:root{color-scheme:dark;--bg:#171d22;--panel:#20282f;--muted:#aab7be;--gold:#f4ca78;--green:#a8d4b1;--line:#ffffff16}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 17% 47%,#31403d55,transparent 48%),var(--bg);color:#f4f2e9;font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;min-height:100vh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;min-height:48px;border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:5px}header,footer{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:28px 44px}header{border-bottom:1px solid var(--line)}.brand{font-size:23px;font-weight:750;letter-spacing:-1px}.brand-mark{color:var(--gold);letter-spacing:1px;margin-right:10px}.edition,.eyebrow,.lesson-meta,.demo-top,.demo-bottom,.art-label{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;letter-spacing:1.5px}.edition{color:var(--muted)}.quiet{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:30px;padding:0 17px;font-size:13px}main{max-width:1100px;margin:64px auto 54px;display:grid;grid-template-columns:1fr 440px;align-items:center;gap:85px;padding:0 34px}.eyebrow{color:var(--gold);font-size:10px;margin:0 0 22px}h1{font-size:clamp(44px,5vw,66px);line-height:1.05;letter-spacing:-3px;margin:0 0 22px;font-weight:750}.lede{max-width:370px;color:var(--muted);font-size:17px;line-height:1.65;margin:0}.art{height:260px;position:relative;display:flex;align-items:center;justify-content:center;margin-top:12px;isolation:isolate}.art img{width:230px;height:230px;object-fit:contain;z-index:1;filter:drop-shadow(0 16px 22px #0004)}.orbit{position:absolute;width:245px;height:245px;border:1px solid #d2caa212;border-radius:50%;transform:scaleY(.5) rotate(-18deg)}.orbit.two{width:340px;height:340px;transform:scaleY(.5) rotate(18deg)}.art-label{position:absolute;bottom:4px;color:var(--green);font-size:9px;background:var(--bg);padding:9px 13px;border:1px solid var(--line);border-radius:20px;z-index:2}.status-dot,.live i{display:inline-block;width:5px;height:5px;background:var(--green);border-radius:50%;margin-right:7px}.footnote{font-size:12px;color:#87969e;line-height:1.7;text-align:center;margin:20px 0 0}.demo{background:var(--panel);border:1px solid #ffffff20;border-radius:28px;box-shadow:0 24px 80px #0003;overflow:hidden}.demo-top,.demo-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 25px;border-bottom:1px solid var(--line);font-size:9px;color:var(--muted);letter-spacing:1px}.live{color:var(--green)}.demo-body{padding:29px 28px 15px;min-height:474px}.lesson-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;letter-spacing:.8px}.progress{height:4px;background:#ffffff0c;margin:17px 0 30px;border-radius:3px;overflow:hidden}.progress span{display:block;background:var(--gold);height:100%;width:0;transition:width .3s}h2{font-size:27px;letter-spacing:-.8px;margin:0 0 12px;line-height:1.2}.copy{color:var(--muted);font-size:14px;line-height:1.65;margin:0 0 22px}.signal-box{background:#151d22;border:1px solid var(--line);border-radius:18px;padding:22px;text-align:center;margin:20px 0}.signal{height:30px;display:flex;align-items:center;justify-content:center;gap:13px}.pulse{display:block;width:14px;height:14px;border-radius:12px;background:#687477;transition:background .05s,box-shadow .05s}.pulse.dash{width:43px}.pulse.active{background:var(--gold);box-shadow:0 0 22px #f4ca7870}.signal-caption{font-size:11px;color:var(--muted);margin:12px 0 0}.primary{width:100%;background:var(--gold);color:#24282a;font-weight:700;border-radius:13px;padding:15px 18px}.primary:hover{background:#ffdb99}.secondary{background:transparent;color:var(--gold);border:1px solid #f4ca7833;border-radius:12px;padding:12px 18px}.replay{width:100%;margin-bottom:15px}.legend{display:flex;gap:9px;margin:22px 0}.legend div{flex:1;background:#ffffff04;border:1px solid var(--line);border-radius:12px;text-align:center;padding:14px 4px}.legend strong{display:block;font-size:20px}.legend span{display:block;color:var(--gold);font-size:18px;letter-spacing:4px;margin-top:5px}.answers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.answers button{background:#2d373f;color:#fff;border:1px solid #ffffff18;border-radius:13px;font-size:24px;font-weight:650;min-height:66px}.answers button:hover{border-color:var(--gold)}button:disabled{cursor:default;opacity:.5}.answers button.correct{border-color:var(--green);background:#345445;opacity:1}#feedback{font-size:13px;line-height:1.5;color:var(--green);min-height:40px;margin:17px 0 0}.demo-bottom{border-top:1px solid var(--line);border-bottom:0;padding:20px 25px}.trophy{height:155px;width:155px;object-fit:contain;display:block;margin:0 auto 20px;border-radius:20px}.reward{text-align:center}.reward .copy{margin-bottom:18px}footer{font-size:12px;line-height:1.6;color:#8d9da5;border-top:1px solid var(--line);gap:18px}footer a{color:var(--gold);min-height:44px;display:flex;align-items:center;gap:15px}@media(max-width:850px){main{gap:35px;grid-template-columns:1fr 390px;margin-top:45px;padding:0 24px}header,footer{padding:22px 24px}h1{font-size:48px}.art{height:235px}.art img{width:210px;height:210px}}@media(max-width:690px){header{padding:16px 20px}.edition{display:none}main{display:flex;flex-direction:column;gap:28px;margin:36px auto;padding:0 20px}.intro{width:100%;text-align:center}.eyebrow{font-size:9px;margin-bottom:16px}h1{font-size:46px}.lede{margin:auto;font-size:15px}.art{height:190px;margin-top:5px}.art img{height:180px;width:180px}.orbit{width:190px;height:190px}.orbit.two{width:270px;height:270px}.footnote{margin:12px 0 0}.demo{width:100%;max-width:440px}.demo-body{min-height:450px;padding:25px 23px 12px}footer{flex-direction:column;gap:5px;text-align:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
