:root{color-scheme:dark;--gold:#e6c378;--blue:#a8d4ff;--ink:#f5f1e9;--muted:#bdc6d1}*{box-sizing:border-box}html{scroll-padding-top:20px}body{margin:0;background:#000;color:var(--ink);font:17px/1.7 system-ui,sans-serif}header,main,footer{width:min(1180px,calc(100% - 40px));margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;border-bottom:1px solid #705e38}header img{display:block;object-fit:contain}nav{display:flex;gap:22px;flex-wrap:wrap}a{color:var(--blue);text-underline-offset:5px}a:hover{color:var(--gold)}section{padding:48px 0}h1{font:clamp(3.2rem,10vw,7.7rem)/1.1 Georgia,serif;letter-spacing:-.045em;margin:20px 0}.dot,.eyebrow{color:var(--gold)}.tagline{font:clamp(1.8rem,4vw,3.1rem)/1.3 Georgia,serif;color:var(--ink)}h2{font:clamp(1.8rem,4vw,2.7rem)/1.25 Georgia,serif;margin:12px 0 24px}h3{font-size:1.3rem;line-height:1.4}p{color:var(--muted)}.hero{max-width:900px}.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.13em}.fine{font-size:.88rem}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.button,button{display:inline-block;min-height:48px;padding:12px 20px;border-radius:8px;border:1px solid var(--gold);background:var(--gold);color:#111;font:600 1rem/1.5 system-ui;text-decoration:none;cursor:pointer}.button:hover,button:hover{background:#ffe2a5;color:#000}.outline{background:transparent;color:var(--gold)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,315px),1fr));gap:20px}.panel,.lesson-card{padding:28px;background:#1c2028;border:1px solid #76643f;border-radius:14px;min-width:0}.lesson-card{display:flex;flex-direction:column}.lesson-card h3{margin:8px 0}.lesson-card .button{margin-top:auto;align-self:start}.lesson-card p{margin-top:4px}#lesson{margin:35px 0}label{display:block;color:var(--ink);margin:12px 0}input,select{display:block;width:100%;max-width:100%;padding:12px;margin-top:6px;background:#0d121b;border:1px solid #8997a9;border-radius:6px;color:var(--ink);font:inherit;min-height:48px}input[type=range]{padding:0;accent-color:var(--gold)}input[type=checkbox]{width:24px;min-height:24px;margin:0}.check{display:flex;gap:12px;align-items:center}.filters{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px}.equation{font-size:1.4rem;color:#fff;overflow-wrap:anywhere}details{border-top:1px solid #76643f;margin:20px 0;padding:16px 0}summary{cursor:pointer;min-height:44px;color:var(--blue);font-weight:600}li{margin:12px 0}#feedback{padding:12px 0;color:var(--gold)}.meter{height:32px;border:1px solid #adc0d4;background:#070b10;border-radius:6px;overflow:hidden}.meter div{height:100%;background:var(--blue)}.numberline{height:54px;position:relative;border-top:2px solid var(--blue);margin-top:30px;display:flex;justify-content:space-between}.numberline b{position:absolute;top:-22px;color:var(--gold);transform:translateX(-50%)}svg{width:100%;max-width:100%;background:#0d121b;border:1px solid #8b9bad}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:6px;border-bottom:1px solid #536072}#rectangle{background:#a8d4ff;border:3px solid var(--gold);max-width:100%;margin:20px 0}footer{border-top:1px solid #76643f;padding:32px 0;font-size:.88rem}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #fff;outline-offset:5px}.skip{position:absolute;top:-100px;background:#000;padding:15px;z-index:10}.skip:focus{top:0}[hidden]{display:none!important}section[id]{scroll-margin-top:20px}@media(max-width:700px){header{align-items:flex-start}header img{width:54px;height:54px}nav{gap:8px 16px;font-size:.88rem}.filters{grid-template-columns:1fr}.panel,.lesson-card{padding:20px}section{padding:32px 0}h1{overflow-wrap:anywhere}header,main,footer{width:calc(100% - 32px)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}

/* A hands-on first example beside the introduction, matching the companion platforms. */
.hero{max-width:none;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:52px;align-items:center;padding-block:62px}.hero-copy{min-width:0}.hero h1{font-size:clamp(3.2rem,6.8vw,5.6rem);margin-top:16px}.hero .tagline{font-size:clamp(1.8rem,3.3vw,2.65rem)}
.hero-demo{min-width:0;padding:24px;background:radial-gradient(ellipse at top right,#203e55,#15212d 65%);border:1px solid #8c774b;border-radius:18px;box-shadow:0 22px 60px #0005}.demo-kicker{display:flex;justify-content:space-between;gap:12px;font-size:.68rem;font-weight:700;letter-spacing:.12em;color:var(--gold)}.hero-demo h2{font:400 clamp(1.75rem,2.7vw,2.35rem)/1.2 Georgia,serif;margin:20px 0 8px;letter-spacing:-.025em}.hero-demo>p{margin:8px 0}.demo-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0}.demo-parts span{aspect-ratio:2.2;background:#0c141e;border:1px solid #6f879b;border-radius:7px}.demo-parts span.filled{background:linear-gradient(135deg,#b8e3ff,#649dcb);border-color:#c2e6ff;box-shadow:inset 0 0 0 2px #bce4ff33}.hero-demo .demo-equation{font:400 clamp(1.6rem,3vw,2.25rem)/1.3 Georgia,serif;color:var(--gold);margin:12px 0;letter-spacing:-.02em}.hero-demo label{margin:8px 0;display:flex;justify-content:space-between;gap:12px;font-size:.85rem;font-weight:500}.hero-demo output{color:var(--gold);white-space:nowrap}.hero-demo input{border:0;background:transparent;min-height:44px;margin:0;accent-color:var(--gold)}.hero-demo .demo-explanation{font-size:.82rem;line-height:1.6;min-height:0;color:#d6e3ed}.hero-demo>a{display:inline-block;min-height:44px;padding-block:10px;font-weight:650;font-size:.9rem}.hero-demo .demo-note{font-size:.73rem;line-height:1.6;margin-bottom:0;color:#b7c8d7}
@media(max-width:850px){.hero{grid-template-columns:1fr;gap:30px;padding-block:38px}.hero-demo{width:100%;max-width:560px}.hero h1{font-size:clamp(3.2rem,10vw,5.6rem)}}
@media(max-width:400px){.hero-demo{padding:20px}.hero-demo label{font-size:.78rem}.hero-demo .demo-equation{font-size:1.75rem}.hero-demo .demo-explanation{min-height:0}}