@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,700;12..96,800&family=DM+Mono:ital,wght@0,300;0,400;1,300&display=swap');

:root {
  --bg: #f2efe9;
  --ink: #1a1714;
  --muted: #9a9590;
  --line: #e0dbd2;
  --white: #faf8f4;
  --breath: #4a90d9;
  --decide: #e8622a;
  --focus: #2a9d6e;
  --coin: #d4a017;
  --dice: #9b4dca;
  --noise: #e85a2a;
  --bpm: #e8226a;
  --wheel: #22a8b8;
  --unit: #5a8a2a;
  --ice: #e87a22;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
body { background: var(--bg); color: var(--ink); font-family: 'Bricolage Grotesque', sans-serif; min-height: 100vh; }

/* NAV */
nav {
  padding: 18px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: rgba(250,248,244,0.85);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 100;
}
.logo { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; cursor: pointer; }
.logo span { color: var(--breath); }
.nav-tag { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 2px; }

/* HERO */
.hero { padding: 72px 40px 48px; max-width: 1200px; margin: 0 auto; }
.hero h1 { font-size: clamp(50px, 9vw, 112px); font-weight: 800; line-height: 0.92; letter-spacing: -3px; margin-bottom: 24px; }
.hero h1 .c1 { color: var(--breath); } .hero h1 .c2 { color: var(--decide); }
.hero-sub { font-size: 17px; color: var(--muted); font-weight: 300; max-width: 460px; line-height: 1.65; margin-bottom: 36px; }
.hero-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-pill { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 2px; padding: 7px 14px; border: 1px solid var(--line); color: var(--muted); border-radius: 100px; }

/* FILTER BAR */
.filter-bar { padding: 0 40px 32px; max-width: 1200px; margin: 0 auto; display: flex; gap: 8px; flex-wrap: wrap; }
.filter-btn {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px; font-weight: 600;
  padding: 9px 20px; border-radius: 100px;
  border: 1.5px solid var(--line);
  background: var(--white); color: var(--muted);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  transform: scale(1);
}
.filter-btn:hover { transform: scale(1.06); border-color: var(--ink); color: var(--ink); }
.filter-btn.active { background: var(--ink); color: var(--white); border-color: var(--ink); transform: scale(1.06); }

/* GRID */
.apps-grid { padding: 0 40px 80px; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; overflow: visible; }

/* OVERFLOW GUARD */
.app-window { max-width: 100%; overflow-x: hidden; }

/* CARD */
.app-card {
  border-radius: 28px; overflow: visible; cursor: pointer;
  position: relative; aspect-ratio: 1 / 1.15;
  display: flex; flex-direction: column;
  border: 1.5px solid transparent;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.app-card.hidden { display: none; }
.app-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }

.card-inner { padding: 28px 24px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.card-label { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px; opacity: 0.45; }
.card-title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; margin-bottom: 6px; }
.card-desc { font-size: 12px; color: var(--muted); font-weight: 400; line-height: 1.5; }
.card-visual { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; min-height: 130px; }
.card-cta { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; display: flex; align-items: center; gap: 6px; margin-top: 12px; opacity: 0.5; transition: opacity 0.2s, gap 0.2s; }
.app-card:hover .card-cta { opacity: 1; gap: 10px; }

/* card colors */
.breath-card { background: #e4f0fc; border-color: #c0d8f5; }
.decide-card { background: #fdeee8; border-color: #f5d5c5; }
.focus-card  { background: #e4f5ee; border-color: #bce5d2; }
.coin-card   { background: #fdf6e4; border-color: #eedcaa; }
.dice-card   { background: #f2e8fd; border-color: #dcc0f5; }
.noise-card  { background: #fdeee4; border-color: #f5d0b5; }
.bpm-card    { background: #fde4ee; border-color: #f5b8d0; }
.wheel-card  { background: #e4f5f8; border-color: #b0dde5; }
.unit-card   { background: #eef5e0; border-color: #cce0a0; }
.ice-card    { background: #fef2e4; border-color: #f5d8b0; }

/* CARD VISUALS */
.breath-orb { width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #7bb8f0, #2a6db8); animation: breathePulse 4s ease-in-out infinite; box-shadow: 0 0 40px #4a90d940; }
@keyframes breathePulse { 0%,100%{transform:scale(1);box-shadow:0 0 30px #4a90d930} 50%{transform:scale(1.35);box-shadow:0 0 60px #4a90d960} }

.decide-coin-preview { width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f5d060, #c08010); box-shadow: 0 6px 0 #8a5800, 0 8px 16px rgba(0,0,0,0.2); animation: coinBobble 2.5s ease-in-out infinite; display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;color:#7a4000; -webkit-user-select:none;user-select:none;pointer-events:none;font-family:'Bricolage Grotesque',sans-serif;font-style:normal; }
@keyframes coinBobble { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-10px) rotate(3deg)} }

.focus-ring-preview { width:80px;height:80px;border-radius:50%;border:4px solid #2a9d6e30;position:relative;display:flex;align-items:center;justify-content:center; }
.focus-ring-preview::before { content:'';position:absolute;inset:-4px;border-radius:50%;border:4px solid transparent;border-top-color:#2a9d6e;animation:focusSpin 3s linear infinite; }
@keyframes focusSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.focus-dot { width:10px;height:10px;border-radius:50%;background:var(--focus); }

.coin-preview { display:flex;gap:-6px; }
.coin-p { width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f0d060,#b8840a);box-shadow:3px 3px 0 #8a6000;animation:coinBounce 2s ease-in-out infinite; }
.coin-p:nth-child(2){animation-delay:.2s;margin-left:-10px}.coin-p:nth-child(3){animation-delay:.4s;margin-left:-10px}
@keyframes coinBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.dice-preview { width:64px;height:64px;background:white;border-radius:14px;box-shadow:4px 4px 0 #c090f0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;padding:8px;gap:4px;animation:diceWobble 3s ease-in-out infinite; }
@keyframes diceWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(8deg)}75%{transform:rotate(-6deg)}}
.dp{border-radius:50%;background:#9b4dca;width:100%;aspect-ratio:1}.dp.e{background:transparent}

.noise-bars-preview { display:flex;align-items:flex-end;gap:4px;height:60px; }
.nbp { width:9px;border-radius:3px;background:var(--noise);animation:noiseAnim 1.2s ease-in-out infinite; }
.nbp:nth-child(1){height:30%;animation-delay:0s}.nbp:nth-child(2){height:70%;animation-delay:.15s}.nbp:nth-child(3){height:90%;animation-delay:.3s}.nbp:nth-child(4){height:50%;animation-delay:.45s}.nbp:nth-child(5){height:80%;animation-delay:.6s}.nbp:nth-child(6){height:40%;animation-delay:.75s}.nbp:nth-child(7){height:65%;animation-delay:.9s}
@keyframes noiseAnim{0%,100%{transform:scaleY(1);opacity:.6}50%{transform:scaleY(1.5);opacity:1}}

.bpm-preview { display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px; }
.bpm-bars { display:flex;align-items:flex-end;gap:6px;height:60px; }
.bpm-bar { width:14px;border-radius:4px 4px 2px 2px;background:var(--bpm);animation:bpmPulse 1.2s ease-in-out infinite; }
.bpm-bar:nth-child(1) { height:40%;animation-delay:0s; }
.bpm-bar:nth-child(2) { height:85%;animation-delay:.15s; }
.bpm-bar:nth-child(3) { height:40%;animation-delay:.3s; }
@keyframes bpmPulse{0%,100%{transform:scaleY(1);opacity:.55}30%{transform:scaleY(1.7);opacity:1}60%{transform:scaleY(0.9);opacity:.7}}

.wheel-preview { width:72px;height:72px;border-radius:50%;background:conic-gradient(#22a8b8 0deg 72deg,#f0c030 72deg 144deg,#e8622a 144deg 216deg,#9b4dca 216deg 288deg,#2a9d6e 288deg 360deg);animation:wheelSpin 6s linear infinite;box-shadow:0 4px 16px #22a8b840; }
@keyframes wheelSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.unit-preview { display:flex;flex-direction:column;gap:6px;align-items:center; }
.unit-arrows { display:flex;flex-direction:column;align-items:center;gap:8px;animation:unitBounce 2s ease-in-out infinite; }
.unit-arr-up { width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:21px solid var(--unit); }
.unit-arr-down { width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:21px solid var(--unit); }
@keyframes unitBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.unit-labels { display:flex;gap:8px;font-family:'DM Mono',monospace;font-size:11px;font-weight:500;color:var(--unit); }

.ice-preview { width:68px;height:52px;background:var(--ice);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;font-family:'Bricolage Grotesque',sans-serif;color:white;position:relative;animation:iceWiggle 2s ease-in-out infinite; }
.ice-preview::after { content:'';position:absolute;bottom:-10px;left:14px;width:0;height:0;border-left:11px solid transparent;border-right:0 solid transparent;border-top:12px solid var(--ice); }
@keyframes iceWiggle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

/* OVERLAY */
.overlay { position:fixed;inset:0;background:rgba(20,18,14,0.75);z-index:200;display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(8px); }
.overlay.open { display:flex; }
.app-window { background:var(--white);border-radius:32px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;position:relative;padding:40px 36px 36px;animation:windowPop 0.45s cubic-bezier(0.34,1.56,0.64,1);text-align:center; }
@keyframes windowPop{from{transform:scale(0.8) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.close-btn { position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;background:var(--line);border:none;cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1); }
.close-btn:hover { background:#d0cbc3;transform:scale(1.15) rotate(90deg); }
.app-title { font-size:26px;font-weight:800;letter-spacing:-0.5px;margin-bottom:4px; }
.app-subtitle { font-size:13px;color:var(--muted);margin-bottom:28px;font-weight:300; }

/* SHARED BUTTON */
.big-btn { border:none;padding:15px 40px;border-radius:100px;font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);color:white;display:inline-block; }
.big-btn:hover { transform:scale(1.07); }

/* BREATH */
#breathApp { text-align:center; }
.breath-stage { display:flex;align-items:center;justify-content:center;height:200px;margin-bottom:20px; }
.breath-big { width:130px;height:130px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7bb8f0,#2a6db8);box-shadow:0 0 60px #4a90d950;transition:transform 0.1s; }
.breath-label { font-size:20px;font-weight:700;margin-bottom:6px;min-height:28px; }
.breath-count { font-family:'DM Mono',monospace;font-size:12px;color:var(--muted);margin-bottom:24px; }
.breath-patterns { display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px; }
.pat-btn { font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1px;padding:8px 18px;border-radius:100px;border:1.5px solid var(--line);background:transparent;cursor:pointer;color:var(--muted);transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);white-space:nowrap; }
.pat-btn:hover,.pat-btn.active { background:var(--breath);color:white;border-color:var(--breath);transform:scale(1.08); }

/* DECIDE */
#decideApp { text-align:center; }
.decide-stage { height:180px;display:flex;align-items:center;justify-content:center;margin-bottom:20px; }
.big-coin { width:140px;height:140px;border-radius:50%;cursor:pointer;position:relative;user-select:none; }
.coin-side { position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:900;backface-visibility:hidden; }
.coin-front { background:radial-gradient(circle at 35% 30%,#f5d060,#c08010);box-shadow:0 8px 0 #8a5800,0 12px 24px rgba(0,0,0,0.2);color:#7a4000; }
.coin-back  { background:radial-gradient(circle at 35% 30%,#e0c050,#a07000);box-shadow:0 8px 0 #7a4800,0 12px 24px rgba(0,0,0,0.15);color:#6a3800;transform:rotateY(180deg); }
.coin-spinning .coin-front { animation:flipAnim 0.65s ease-in-out forwards; }
@keyframes flipAnim{0%{transform:rotateY(0) translateY(0)}30%{transform:rotateY(0) translateY(-70px)}60%{transform:rotateY(540deg) translateY(-40px)}100%{transform:rotateY(720deg) translateY(0)}}
.coin-result { font-size:26px;font-weight:800;margin-bottom:6px;min-height:34px; }
.coin-tally  { font-family:'DM Mono',monospace;font-size:12px;color:var(--muted);margin-bottom:18px; }
.small-link  { font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);background:none;border:none;cursor:pointer;letter-spacing:1px;text-decoration:underline;margin-top:10px; }

/* FOCUS */
#focusApp { text-align:center; }
.focus-stage { height:200px;display:flex;align-items:center;justify-content:center;margin-bottom:16px; }
.focus-circle { width:160px;height:160px;border-radius:50%;border:3px solid var(--line);position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column; }
.focus-svg { position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:rotate(-90deg); }
.focus-track { fill:none;stroke:var(--line);stroke-width:3; }
.focus-progress { fill:none;stroke:var(--focus);stroke-width:3;stroke-linecap:round;stroke-dasharray:502;stroke-dashoffset:502;transition:stroke-dashoffset 1s linear; }
.focus-time { font-size:30px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums; }
.focus-status { font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--muted);text-transform:uppercase; }
.focus-techniques { display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:12px; }
.tech-btn { padding:8px 16px;border-radius:100px;border:1.5px solid var(--line);background:transparent;font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:500;cursor:pointer;color:var(--muted);transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.tech-btn:hover,.tech-btn.active { background:var(--focus);color:white;border-color:var(--focus);transform:scale(1.07); }
.tech-btn:disabled { opacity:0.45;cursor:not-allowed;transform:none; }
.focus-hint { font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:1px;text-align:center;margin-bottom:12px;min-height:16px;opacity:0;transition:opacity 0.35s ease; }
.focus-hint.visible { opacity:1; }

/* DICE */
.dice-count-row { display:flex;gap:8px;justify-content:center;margin-bottom:18px; }
.dcount-btn { width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:transparent;cursor:pointer;font-family:'DM Mono',monospace;font-size:13px;color:var(--muted);transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.dcount-btn.active,.dcount-btn:hover { background:var(--dice);color:white;border-color:var(--dice);transform:scale(1.12); }
.dice-stage { display:flex;gap:14px;justify-content:center;margin-bottom:20px;flex-wrap:wrap; }
.big-dice { width:88px;height:88px;background:white;border-radius:18px;box-shadow:0 6px 0 #c8a0e8,0 8px 20px rgba(0,0,0,0.1);display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;padding:10px;gap:4px;cursor:pointer;transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1);user-select:none; }
.big-dice:hover { transform:translateY(-4px) scale(1.05); }
.big-dice:active,.big-dice.rolling { animation:diceRoll 0.45s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes diceRoll{0%{transform:rotate(0) scale(1)}25%{transform:rotate(-20deg) scale(1.12) translateY(-12px)}60%{transform:rotate(12deg) scale(0.95)}100%{transform:rotate(0) scale(1)}}
.bdot { border-radius:50%;background:#9b4dca;width:100%;aspect-ratio:1; }
.bdot.e { background:transparent; }
.dice-sum { font-size:20px;font-weight:800;text-align:center;margin-bottom:16px;min-height:28px;color:var(--dice); }

/* NOISE */
#noiseApp { text-align:center; }
.noise-vis { display:flex;align-items:flex-end;gap:5px;height:140px;justify-content:center;margin-bottom:20px; }
.nbar { width:12px;border-radius:5px;background:var(--noise);transition:height 0.12s ease; }
.noise-types { display:flex;gap:8px;justify-content:center;margin-bottom:16px;flex-wrap:wrap; }
.ntype-btn { padding:9px 18px;border-radius:100px;border:1.5px solid var(--line);background:transparent;font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.ntype-btn.active { background:var(--noise);color:white;border-color:var(--noise); }
.vol-row { display:flex;align-items:center;gap:12px;margin-bottom:18px;text-align:left; }
.vol-lbl { font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:2px;min-width:56px;text-align:left; }
.vol-slider { flex:1;-webkit-appearance:none;height:4px;border-radius:2px;background:var(--line);outline:none; }
.vol-slider::-webkit-slider-thumb { -webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--noise);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.15); }

/* BPM */
#bpmApp { text-align:center; }
.bpm-stage { height:180px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;margin-bottom:20px; }
.bpm-number { font-size:72px;font-weight:800;letter-spacing:-3px;color:var(--bpm);line-height:1;transition:transform 0.1s; }
.bpm-unit { font-family:'DM Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--muted); }
.tap-zone { width:100%;padding:28px;border-radius:24px;background:linear-gradient(135deg,#fde4ee,#ffd0e0);border:2px solid #f5b8d0;cursor:pointer;font-size:32px;transition:all 0.1s cubic-bezier(0.34,1.56,0.64,1);user-select:none;margin-bottom:16px;font-weight:800;color:var(--bpm); }
.tap-zone:active { transform:scale(0.95); background:linear-gradient(135deg,#f5c8d8,#ffc0d0); }
.tap-zone.pulse { animation:tapPulse 0.1s ease-out; }
@keyframes tapPulse{0%{transform:scale(1)}50%{transform:scale(0.94)}100%{transform:scale(1)}}
.bpm-hint { font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:1px;margin-bottom:16px; }
.bpm-reset { font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);background:none;border:none;cursor:pointer;letter-spacing:1px;text-decoration:underline; }

/* WHEEL */
#wheelApp { text-align:center; }
.wheel-container { position:relative;width:240px;height:240px;margin:0 auto 16px; }
.wheel-canvas { width:240px;height:240px;border-radius:50%;box-shadow:0 8px 32px rgba(0,0,0,0.15); }
.wheel-pointer { position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:24px solid var(--ink);filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.wheel-center { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:white;box-shadow:0 2px 8px rgba(0,0,0,0.2); }
.wheel-options { display:flex;flex-direction:column;gap:6px;margin-bottom:16px; }
.wheel-input-row { display:flex;gap:8px; }
.wheel-input { flex:1;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);font-family:'Bricolage Grotesque',sans-serif;font-size:14px;color:var(--ink);outline:none;text-align:left; }
.wheel-input:focus { border-color:var(--wheel); }
.wheel-add-btn { padding:10px 16px;border-radius:12px;border:none;background:var(--wheel);color:white;font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.wheel-add-btn:hover { transform:scale(1.08); }
.wheel-tags { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;min-height:28px; }
.wheel-tag { font-size:12px;padding:4px 10px;border-radius:100px;color:white;font-weight:600;display:flex;align-items:center;gap:4px; }
.wheel-tag button { background:none;border:none;cursor:pointer;color:white;font-size:14px;line-height:1;padding:0;opacity:.7; }
.wheel-result { font-size:20px;font-weight:800;margin-bottom:12px;min-height:28px;color:var(--wheel); }

/* UNIT */
#unitApp {}
.unit-tabs { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;text-align:left; }
.unit-tab { padding:8px 16px;border-radius:100px;border:1.5px solid var(--line);background:transparent;font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.unit-tab.active,.unit-tab:hover { background:var(--unit);color:white;border-color:var(--unit);transform:scale(1.06); }
.unit-row { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.unit-field { flex:1;display:flex;flex-direction:column;gap:4px; }
.unit-lbl { font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--muted);text-align:left; }
.unit-in { width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg);font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:700;color:var(--ink);outline:none;transition:border-color 0.2s;text-align:left; }
.unit-in:focus { border-color:var(--unit); }
.unit-swap { width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--white);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);flex-shrink:0;margin-top:20px; }
.unit-swap:hover { background:var(--unit);border-color:var(--unit);color:white;transform:rotate(180deg) scale(1.1); }
.unit-select { padding:10px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);font-family:'Bricolage Grotesque',sans-serif;font-size:14px;color:var(--ink);outline:none;cursor:pointer;width:100%;text-align:left; }

/* ICE */
#iceApp { text-align:center; }
.ice-card-display { background:linear-gradient(135deg,#fff8f0,#ffe8d0);border:1.5px solid #f5d8b0;border-radius:20px;padding:24px;margin-bottom:20px;min-height:160px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.ice-card-display:hover { transform:translateY(-3px) scale(1.01); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.ice-text { font-size:20px;font-weight:700;line-height:1.4;color:var(--ink);letter-spacing:-0.3px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3lh;text-align:center;width:100%; }
.ice-category-row { display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:16px; }
.ice-cat-btn { padding:8px 16px;border-radius:100px;border:1.5px solid var(--line);background:transparent;font-family:'Bricolage Grotesque',sans-serif;font-size:12px;font-weight:600;cursor:pointer;color:var(--muted);transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.ice-cat-btn.active,.ice-cat-btn:hover { background:var(--ice);color:white;border-color:var(--ice);transform:scale(1.07); }
.ice-hint { font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:1px;margin-bottom:16px; }

/* FOOTER */
footer { border-top:1px solid var(--line);padding:28px 40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px; }
footer p { font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:1px; }

/* RESPONSIVE */
@media(max-width:1024px){.apps-grid{grid-template-columns:repeat(3,1fr)}}

@media(min-width:641px) and (max-width:1023px){
  .app-window{width:90%;max-width:480px;max-height:88vh;border-radius:28px;}
  .apps-grid { grid-template-columns: repeat(2, 1fr); }
  .breath-orb { width: 90px !important; height: 90px !important; }
  .decide-coin-preview { width: 80px !important; height: 80px !important; }
  .focus-ring-preview { width: 80px !important; height: 80px !important; }
  .dice-preview { width: 76px !important; height: 76px !important; }
  .wheel-preview { width: 80px !important; height: 80px !important; }
  .coin-p { width: 52px !important; height: 52px !important; }
}

@media(max-width:768px){.apps-grid{grid-template-columns:repeat(2,1fr);padding:0 20px 60px;gap:12px}.hero{padding:44px 20px 36px}.hero h1{letter-spacing:-2px}nav,.filter-bar,footer{padding-left:20px;padding-right:20px}}

@media(max-width:640px){
  .overlay{align-items:flex-end;padding:0;}
  .app-window{width:100%;max-width:100%;max-height:85vh;border-radius:24px 24px 0 0;padding:0 24px 40px;animation:slideUp 0.4s cubic-bezier(0.34,1.56,0.64,1);}
  .app-window::before{content:'';display:block;width:40px;height:4px;background:var(--line);border-radius:2px;margin:16px auto 20px;}
  nav { padding: 18px 20px; max-width: 100%; }
  .nav-tag { font-size: 9px; letter-spacing: 1px; }
  .hero { padding: 36px 20px 28px; max-width: 100%; }
  .hero h1 { font-size: clamp(38px, 11vw, 72px); letter-spacing: -2px; max-width: 100%; word-break: break-word; }
  .hero-sub { font-size: 15px; max-width: 100%; }
  .filter-bar { padding: 0 20px 32px; max-width: 100%; overflow: hidden; }
  .filter-btn { transform: none !important; }
  .apps-grid { max-width: 100%; padding: 0 20px 60px; grid-template-columns: 1fr; }
  .wheel-container { width: 100%; max-width: 220px; height: 220px; }
  .wheel-canvas { width: 100%; height: 100%; }
  footer { padding: 20px; }
  .card-visual { overflow: visible; }
  .app-card { min-height: 260px; }
  .breath-orb { width: 90px !important; height: 90px !important; }
  .decide-coin-preview { width: 80px !important; height: 80px !important; }
  .focus-ring-preview { width: 80px !important; height: 80px !important; }
  .dice-preview { width: 76px !important; height: 76px !important; }
  .wheel-preview { width: 80px !important; height: 80px !important; }
  .coin-p { width: 52px !important; height: 52px !important; }
  body { font-size: 14px; }
  .hero-sub { font-size: 16px; }
  .hero-pill { font-size: 11px; }
}

@media(max-width:400px){.apps-grid{grid-template-columns:1fr}}