:root{--ink:#17324d;--ink-soft:#4a6580;--paper:#f3f7fb;--panel:#ffffffe0;--line:#c5d5e6;--accent:#e8a317;--accent-ink:#3a2a05;--good:#1f7a4c;--bad:#b42318;--shadow:0 18px 50px #17324d1f;--radius:1.25rem;--font-display:"Fraunces", Georgia, serif;--font-body:"Outfit", system-ui, sans-serif;color:var(--ink);background:radial-gradient(circle at 12% 18%, #e8a3172e, transparent 42%), radial-gradient(circle at 88% 8%, #468cc838, transparent 40%), linear-gradient(160deg, #d9e8f5 0%, var(--paper) 45%, #e7eef6 100%);font-family:var(--font-body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{min-height:100%}body{min-width:320px;margin:0}button,input{font:inherit}.page{width:min(720px,100% - 2rem);margin:0 auto;padding:1.5rem 0 3rem}.page--center{place-items:center;min-height:100vh;display:grid}.topbar{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.brand{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:1.35rem;font-weight:700}.muted{color:var(--ink-soft);margin:.25rem 0 0;font-size:.95rem}.hero-panel,.panel{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #c5d5e6e6}.hero-panel{margin-bottom:1rem;padding:1.5rem 1.5rem 1.25rem}.hero-panel h1,.panel h1,.result h2{font-family:var(--font-display);letter-spacing:-.03em;margin:0 0 .5rem;font-size:clamp(1.8rem,4vw,2.4rem);line-height:1.15}.lede{color:var(--ink-soft);max-width:36ch;margin:0 0 1.25rem;line-height:1.5}.progress-track{background:#d7e4f0;border-radius:999px;height:.55rem;margin-bottom:.6rem;overflow:hidden}.progress-track__bar{background:linear-gradient(90deg,#2f6f9f,#e8a317);height:100%;transition:width .28s}.panel{padding:1.5rem}.exercise-form{gap:1.25rem;display:grid}.equation{font-family:var(--font-display);letter-spacing:-.04em;flex-wrap:wrap;justify-content:center;align-items:center;gap:.65rem;margin:.25rem 0 .5rem;font-size:clamp(2.4rem,8vw,3.6rem);font-weight:700;display:flex}.equation__op{color:var(--ink-soft);font-weight:500}.equation__q{color:var(--accent)}.field{gap:.45rem;display:grid}.field span{color:var(--ink-soft);font-size:.95rem}.field input{border:1px solid var(--line);width:100%;color:var(--ink);background:#fff;border-radius:.9rem;padding:.9rem 1rem;font-size:1.35rem}.field input:focus{border-color:var(--accent);outline:3px solid #e8a31759}.btn{appearance:none;cursor:pointer;border:1px solid #0000;border-radius:999px;padding:.85rem 1.35rem;transition:transform .16s,background .16s,border-color .16s}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.65;cursor:wait;transform:none}.btn--primary{background:var(--accent);color:var(--accent-ink);font-weight:700}.btn--ghost{border-color:var(--line);color:var(--ink-soft);background:0 0}.feedback{color:var(--ink);background:#2f6f9f1a;border-radius:.9rem;margin:0;padding:.85rem 1rem}.feedback--ok{color:var(--good);background:#1f7a4c1f}.feedback--bad{color:var(--bad);background:#b423181a}.result{justify-items:start;gap:.75rem;display:grid}.error{color:var(--bad);margin:0}@media (width<=560px){.topbar{flex-direction:column;align-items:flex-start}.page{width:min(100% - 1.25rem,720px)}}@media (prefers-reduced-motion:reduce){.btn,.progress-track__bar{transition:none}}
