*{box-sizing:border-box}:root{--bg:#0a1020;--panel:rgba(18,27,55,.9);--line:rgba(255,255,255,.11);--text:#f8f9ff;--muted:#aab3cf;--purple:#8e7dff;--purple-2:#c0b5ff;--teal:#2ed3b2;--coral:#ff765f;--gold:#ffd166}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif}button,input{font:inherit}.app-shell{width:100vw;height:100vh;padding:clamp(10px,1.35vw,20px);display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(9px,1.2vw,17px);background:radial-gradient(circle at 8% 12%,rgba(46,211,178,.14),transparent 27%),radial-gradient(circle at 92% 8%,rgba(142,125,255,.25),transparent 32%),linear-gradient(135deg,#090e1b,#111a36 62%,#0b1328)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:1px 4px}.eyebrow,.kicker{margin:0 0 4px;text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:800;color:var(--purple-2)}h1,h2,h3,p{margin-top:0}h1{font:800 clamp(25px,3vw,38px)/1 Manrope,sans-serif;letter-spacing:-.045em;margin:0}.learning-goal{margin:0;display:flex;align-items:center;gap:11px;max-width:555px;padding:9px 13px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.045);font-size:12px;color:var(--muted)}.learning-goal strong{color:#d9d2ff;white-space:nowrap}.workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1.48fr) minmax(315px,.72fr);gap:clamp(10px,1.25vw,18px)}.panel{min-width:0;min-height:0;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,rgba(24,35,70,.94),rgba(12,20,42,.95));box-shadow:0 22px 60px rgba(0,0,0,.24);overflow:hidden}.graph-panel{padding:clamp(13px,1.6vw,23px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,1vh,13px)}.panel-heading,.control-heading,.challenge-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.panel-heading h2,.control-heading h2{font:800 clamp(17px,1.8vw,24px)/1.16 Manrope,sans-serif;margin:0;letter-spacing:-.025em}.root-summary{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:12px;background:rgba(46,211,178,.1);border:1px solid rgba(46,211,178,.28);white-space:nowrap}.root-summary span{font-size:10px;color:#9be4d4}.root-summary strong{font:800 20px Manrope,sans-serif;color:#69e7cf}.graph-wrap{min-height:0;position:relative;border:1px solid rgba(255,255,255,.075);border-radius:17px;overflow:hidden;background:linear-gradient(180deg,rgba(5,10,25,.44),rgba(9,15,33,.22))}.graph-wrap svg{width:100%;height:100%;display:block;touch-action:none}.grid-line{stroke:rgba(255,255,255,.075);stroke-width:1}.axis-line{stroke:rgba(255,255,255,.36);stroke-width:1.5}.tick-label{fill:#7f8aa8;font:11px "DM Sans",sans-serif}.axis-label{fill:#bac2d8;font:700 12px "DM Sans",sans-serif}.parabola{fill:none;stroke:url(#curveGradient);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(142,125,255,.38))}.marker-label{fill:#f8f9ff;font:700 12px "DM Sans",sans-serif;paint-order:stroke;stroke:#111936;stroke-width:4px;stroke-linejoin:round}.root-marker{fill:var(--teal);stroke:#0d1a2e;stroke-width:3}.vertex-marker{fill:var(--gold);stroke:#0d1a2e;stroke-width:3}.intercept-marker{fill:var(--coral);stroke:#0d1a2e;stroke-width:3}.legend{position:absolute;right:10px;top:9px;display:flex;gap:10px;padding:6px 8px;border-radius:9px;background:rgba(8,13,28,.74);color:var(--muted);font-size:9px}.legend span{display:flex;align-items:center;gap:4px}.dot{width:7px;height:7px;border-radius:50%}.dot.root{background:var(--teal)}.dot.vertex{background:var(--gold)}.dot.intercept{background:var(--coral)}.insight-strip{display:grid;grid-template-columns:auto auto minmax(210px,1fr);gap:9px}.insight-strip>div,.insight-strip>p{margin:0;padding:9px 11px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075)}.insight-strip>div{min-width:128px;display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:8px}.insight-strip span{font-size:9px;color:var(--muted)}.insight-strip strong{font:800 17px Manrope,sans-serif}.insight-strip small{grid-column:1/-1;color:#7e89a8;font-size:8px}.insight-strip>p{display:flex;align-items:center;font-size:11px;line-height:1.35;color:var(--muted)}.insight-strip>p strong{font:700 11px "DM Sans",sans-serif;color:var(--text);margin-right:4px}.control-panel{padding:clamp(12px,1.4vw,19px);display:flex;flex-direction:column;gap:clamp(9px,1.2vh,14px)}.controls{display:grid;gap:clamp(8px,1.05vh,12px)}.quiet-button{border:1px solid var(--line);border-radius:9px;background:#202c4b;color:#dce0ef;padding:6px 10px;font-size:10px;font-weight:700;cursor:pointer}.quiet-button:hover,.quiet-button:focus-visible{border-color:var(--purple-2);outline:2px solid rgba(192,181,255,.2);outline-offset:2px}.coefficient-row{display:grid;gap:5px}.coefficient-row label{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:11px;color:var(--muted)}.coefficient-row b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;background:rgba(142,125,255,.16);color:#d4ccff;font-size:13px}.coefficient-row output{min-width:36px;text-align:center;padding:4px 6px;border-radius:7px;background:rgba(255,255,255,.06);color:#fff;font-weight:800}.coefficient-row input{width:100%;accent-color:var(--purple);cursor:pointer}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.presets button,.challenge-options button{border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);color:#d7dcec;font-size:9px;font-weight:700;padding:8px 4px;cursor:pointer;transition:.18s}.presets button:hover,.presets button:focus-visible,.challenge-options button:hover,.challenge-options button:focus-visible{border-color:var(--purple-2);outline:0;background:rgba(142,125,255,.12)}.rule-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:13px;padding:11px 12px;border:1px solid rgba(46,211,178,.2);border-radius:15px;background:linear-gradient(135deg,rgba(46,211,178,.08),rgba(142,125,255,.08))}.rule-card h3,.challenge h3{font:800 14px Manrope,sans-serif;margin:0}.rule-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.rule-cases span{font-size:8px;color:var(--muted);text-align:center}.rule-cases b{display:block;color:var(--text);font-size:10px}.challenge{margin-top:auto;padding:11px 12px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025)}.challenge-equation{margin:9px 0 8px;padding:8px 9px;border-radius:10px;background:rgba(7,12,26,.42);font:800 16px Manrope,sans-serif;text-align:center;color:#f0edff}.challenge-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.challenge-options button.correct{background:rgba(46,211,178,.17);border-color:var(--teal);color:#8cebd9}.challenge-options button.incorrect{background:rgba(255,118,95,.14);border-color:var(--coral)}.challenge-feedback{margin:7px 0 0;min-height:24px;color:var(--muted);font-size:9px;line-height:1.35}
@media(max-width:780px){.app-shell{padding:8px;gap:7px}.topbar{min-height:49px}.learning-goal{max-width:52%;padding:6px 8px;font-size:9px;line-height:1.25}.learning-goal strong{display:none}.workspace{grid-template-columns:1fr;grid-template-rows:minmax(0,1.12fr) minmax(0,.88fr);gap:7px}.panel{border-radius:17px}.graph-panel{padding:9px;grid-template-rows:auto minmax(0,1fr) auto;gap:6px}.panel-heading h2{font-size:15px}.root-summary{padding:5px 8px}.root-summary span{display:none}.root-summary strong{font-size:17px}.legend{font-size:7px;gap:7px;padding:4px 6px}.insight-strip{grid-template-columns:1fr 1fr 1.45fr;gap:5px}.insight-strip>div,.insight-strip>p{padding:6px 7px;border-radius:9px}.insight-strip>div{min-width:0}.insight-strip strong{font-size:13px}.insight-strip>p,.insight-strip>p strong{font-size:8px}.control-panel{padding:9px;display:grid;grid-template-columns:1.12fr .88fr;grid-template-rows:auto 1fr;gap:7px}.controls{grid-row:1/-1;gap:5px}.control-heading h2{font-size:13px}.coefficient-row{gap:2px}.coefficient-row label{font-size:9px}.coefficient-row b{width:18px;height:18px;font-size:10px}.coefficient-row output{padding:2px 4px}.presets button{font-size:7px;padding:5px 2px}.rule-card{display:none}.challenge{margin:0;padding:8px 9px;align-self:stretch}.challenge-equation{font-size:13px;margin:6px 0}.challenge-options{gap:4px}.challenge-options button{font-size:8px;padding:5px 2px}.challenge-feedback{font-size:8px;min-height:20px}.kicker{font-size:8px}}
@media(max-width:430px){h1{font-size:22px}.learning-goal{font-size:8px}.coefficient-row label span{font-size:0}.coefficient-row label span b{font-size:10px}.coefficient-row label span b:after{font-size:8px;margin-left:5px;color:var(--muted)}.coefficient-row:nth-of-type(2) label b:after{content:"direction & width"}.coefficient-row:nth-of-type(3) label b:after{content:"turning point"}.coefficient-row:nth-of-type(4) label b:after{content:"y-intercept"}.coefficient-row label span{display:flex;align-items:center}.legend span{font-size:0}.legend .dot{width:8px;height:8px}.insight-strip>p{line-height:1.2}.challenge h3{font-size:11px}}
@media(max-height:680px) and (min-width:781px){.app-shell{padding:9px;gap:7px}.topbar{min-height:42px}.learning-goal{padding:5px 8px}.graph-panel{padding:11px;gap:6px}.control-panel{padding:9px;gap:7px}.controls{gap:5px}.coefficient-row{gap:2px}.presets button{padding:5px 3px}.rule-card{padding:7px 9px}.challenge{padding:8px 9px}.challenge-equation{margin:5px 0;font-size:14px}.challenge-feedback{min-height:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}