*{box-sizing:border-box}:root{--bg:#0d1124;--panel:rgba(255,255,255,.065);--line:rgba(255,255,255,.11);--text:#f7f8ff;--muted:#aeb5cf;--purple:#8c72ff;--mint:#31d3ae;--coral:#ff806d;--yellow:#ffd36a}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif}body{background:radial-gradient(circle at 12% 6%,rgba(113,83,231,.23),transparent 30%),radial-gradient(circle at 92% 86%,rgba(39,199,162,.15),transparent 30%),var(--bg)}button,input{font:inherit}.app-shell{width:100vw;height:100vh;height:100dvh;overflow:hidden;padding:clamp(14px,2.2vh,24px) clamp(16px,2.3vw,34px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(10px,1.6vh,16px);position:relative}.app-shell:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px}.topbar,.workspace,.challenge{position:relative;z-index:1}.topbar{display:flex;align-items:end;justify-content:space-between;gap:24px}.eyebrow,.challenge-kicker{display:block;text-transform:uppercase;letter-spacing:.14em;color:#c0b3ff;font-weight:700;font-size:11px}.topbar h1{font:800 clamp(24px,3vw,42px)/1.05 Manrope,sans-serif;letter-spacing:-.04em;margin:5px 0 0}.purpose{max-width:430px;color:var(--muted);font-size:clamp(12px,1.15vw,15px);line-height:1.5;margin:0;text-align:right}.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 55px rgba(0,0,0,.2);backdrop-filter:blur(16px)}.workspace{display:grid;grid-template-columns:minmax(245px,310px) minmax(0,1fr);gap:clamp(12px,1.5vw,18px);min-height:0}.controls{padding:clamp(15px,2.1vh,22px);display:flex;flex-direction:column;justify-content:space-between;min-height:0}.control-group{display:grid;gap:7px}.label-row{display:flex;justify-content:space-between;gap:12px;align-items:center}.label-row label,.group-label{font-weight:650;font-size:13px}.label-row output{font-weight:800;color:var(--mint);font-size:13px;background:rgba(49,211,174,.09);padding:3px 7px;border-radius:7px}input[type=range]{width:100%;accent-color:var(--purple);height:24px;margin:0;cursor:pointer}.range-ends{display:flex;justify-content:space-between;color:#7f87a4;font-size:9px;margin-top:-5px}.frequency-group{gap:9px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:rgba(0,0,0,.16);border-radius:11px;padding:4px}.segmented button{border:0;color:var(--muted);background:transparent;border-radius:8px;padding:8px 4px;font-size:11px;cursor:pointer}.segmented button[aria-pressed=true]{color:#fff;background:linear-gradient(135deg,#745ce5,#9873ee);box-shadow:0 5px 13px rgba(80,51,190,.28)}.segmented button:focus-visible,.reset-button:focus-visible,#checkPrediction:focus-visible,input:focus-visible{outline:3px solid rgba(255,211,106,.7);outline-offset:2px}.compare-toggle{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;cursor:pointer}.compare-toggle input{position:absolute;opacity:0}.toggle-ui{width:34px;height:20px;border-radius:99px;background:#4b526b;position:relative;transition:.2s}.toggle-ui:after{content:"";position:absolute;width:14px;height:14px;background:white;border-radius:50%;left:3px;top:3px;transition:.2s}.compare-toggle input:checked+.toggle-ui{background:var(--coral)}.compare-toggle input:checked+.toggle-ui:after{transform:translateX(14px)}.compare-toggle input:focus-visible+.toggle-ui{outline:3px solid rgba(255,211,106,.7);outline-offset:2px}.reset-button{border:1px solid var(--line);background:rgba(255,255,255,.045);color:var(--muted);border-radius:11px;padding:9px;cursor:pointer;font-size:11px}.reset-button:hover{color:white;background:rgba(255,255,255,.09)}.visual{padding:clamp(14px,1.8vh,20px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,1.3vh,13px);min-width:0;min-height:0}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.summary-card{padding:9px 12px;border:1px solid var(--line);border-radius:13px;background:rgba(0,0,0,.13);min-width:0}.summary-card span,.summary-card small{display:block;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-card strong{display:block;font:800 clamp(17px,2.1vw,27px) Manrope,sans-serif;letter-spacing:-.04em;margin:2px 0}.compound-card strong{color:var(--mint)}.simple-card strong{color:var(--coral)}.difference-card strong{color:var(--yellow)}.chart-wrap{position:relative;min-height:0;background:rgba(4,7,18,.32);border:1px solid rgba(255,255,255,.075);border-radius:15px;padding:10px 12px 18px 37px;display:grid;grid-template-rows:auto minmax(0,1fr)}.chart-head{display:flex;justify-content:space-between;gap:10px;align-items:start}.chart-title{font-weight:700;font-size:12px}.chart-subtitle{display:block;color:var(--muted);font-size:10px;margin-top:2px}.legend{display:flex;gap:12px;color:var(--muted);font-size:9px}.legend span{display:flex;align-items:center;gap:4px}.dot{width:7px;height:7px;border-radius:50%;display:inline-block}.compound-dot{background:var(--mint)}.simple-dot{background:var(--coral)}#growthChart{width:100%;height:100%;min-height:120px;overflow:visible}.axis-label{position:absolute;color:#737c9b;text-transform:uppercase;letter-spacing:.11em;font-size:8px}.y-label{left:8px;top:52%;transform:rotate(-90deg)}.x-label{bottom:5px;left:52%}.insight{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,rgba(49,211,174,.09),rgba(140,114,255,.07));border:1px solid rgba(49,211,174,.16);border-radius:12px;padding:8px 11px}.insight-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(49,211,174,.14);color:var(--mint);font-weight:800}.insight p{margin:0;color:var(--muted);font-size:10px;line-height:1.4}.insight strong{color:#fff}.challenge{padding:11px 16px;display:grid;grid-template-columns:1.4fr 1fr .9fr;gap:18px;align-items:center}.challenge-copy h2{font:700 13px Manrope,sans-serif;margin:3px 0 0}.challenge-action label{display:block;color:var(--muted);font-size:9px;margin-bottom:3px}.prediction-row{display:flex;gap:6px}.prediction-row input{min-width:0;width:100%;border:1px solid var(--line);background:rgba(0,0,0,.2);color:#fff;border-radius:9px;padding:7px 9px}.prediction-row button{border:0;border-radius:9px;background:linear-gradient(135deg,var(--purple),#6d57df);color:#fff;font-weight:700;padding:7px 14px;cursor:pointer}.feedback{font-size:10px;color:var(--muted);line-height:1.4}.feedback.success{color:#77eacb}.feedback.close{color:var(--yellow)}@media(max-height:700px) and (min-width:701px){.app-shell{padding-top:10px;padding-bottom:10px;gap:8px}.topbar h1{font-size:26px}.purpose{font-size:11px}.controls{padding:12px}.control-group{gap:3px}.range-ends{display:none}.segmented button{padding:6px 3px}.visual{padding:11px;gap:6px}.summary-card{padding:6px 10px}.insight{padding:6px 9px}.challenge{padding:7px 14px}.challenge-kicker{display:none}}@media(max-width:700px){.app-shell{padding:10px;gap:8px}.topbar{align-items:start}.purpose{display:none}.topbar h1{font-size:24px}.eyebrow{font-size:9px}.workspace{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:8px}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:7px 10px;padding:10px 12px}.control-group{gap:2px}.label-row{display:block}.label-row label,.group-label{font-size:9px}.label-row output{font-size:9px;padding:0;background:none}.range-ends{display:none}input[type=range]{height:18px}.frequency-group{grid-column:span 2}.segmented{padding:2px}.segmented button{padding:5px 2px;font-size:8px}.compare-toggle{font-size:9px;align-self:end}.toggle-ui{width:27px;height:16px}.toggle-ui:after{width:10px;height:10px}.compare-toggle input:checked+.toggle-ui:after{transform:translateX(11px)}.reset-button{display:none}.visual{padding:10px;gap:6px}.summary-card{padding:6px 7px}.summary-card span,.summary-card small{font-size:7px}.summary-card strong{font-size:14px}.chart-wrap{padding:7px 7px 14px 25px}.chart-title{font-size:9px}.chart-subtitle{font-size:8px}.legend{font-size:7px;gap:6px}.insight{padding:5px 7px}.insight-icon{width:21px;height:21px;font-size:11px}.insight p{font-size:8px}.challenge{grid-template-columns:1.05fr 1fr;padding:7px 10px;gap:8px}.challenge-copy h2{font-size:9px}.challenge-kicker{font-size:7px}.challenge-action label{display:none}.prediction-row input,.prediction-row button{padding:6px 7px;font-size:9px}.feedback{grid-column:1/-1;font-size:8px;text-align:center}.axis-label{font-size:6px}}@media(max-width:420px){.app-shell{padding:8px}.topbar h1{font-size:21px}.controls{gap:4px 7px;padding:8px}.summary-card small{display:none}.difference-card span{white-space:normal}.chart-head{align-items:center}.chart-subtitle{display:none}.challenge-copy h2{font-size:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}