:root{--bg:#05070b;--panel:#09131fc7;--panel-strong:#0c1c2bf0;--border:#76c0ff33;--text:#edf8ff;--muted:#8fa4b8;--cyan:#55d5ff;--rose:#ff7a90;--gold:#f4c45f;--green:#62e6a7}*{box-sizing:border-box}html{background:var(--bg)}body{min-width:320px;color:var(--text);background:linear-gradient(135deg,#26596e29,#0000 34%),radial-gradient(circle at 82% 8%,#f4c45f24,#0000 28%),radial-gradient(circle at 15% 70%,#55d5ff24,#0000 34%),#05070b;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body:before{content:"";pointer-events:none;background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);background-size:48px 48px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 72%);mask-image:linear-gradient(#000,#0000 72%)}button,input{font:inherit}.app-shell{width:min(1280px,100% - 32px);margin:0 auto;padding:28px 0 40px}.hero{background:linear-gradient(115deg,#09131ff0,#08212fb8),url(/assets/hero-CLDdwZDr.png) right 6% center/210px no-repeat;border:1px solid #76c0ff2e;border-radius:8px;grid-template-columns:minmax(0,1fr) minmax(220px,auto);align-items:center;gap:24px;min-height:300px;margin-bottom:22px;padding:34px;display:grid;overflow:hidden;box-shadow:0 24px 80px #0000005c,inset 0 1px #ffffff14}.hero-copy{max-width:860px}.eyebrow,.section-kicker{color:var(--gold);letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;font-weight:800;display:block}.hero h1{letter-spacing:0;margin:8px 0 10px;font-size:clamp(2.2rem,6vw,5rem);line-height:.92}.hero p{color:#b9c9d8;max-width:640px;margin:0;font-size:clamp(1rem,2vw,1.18rem);line-height:1.7}.intro-story{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px;display:grid}.intro-story article{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0003;border:1px solid #ffffff1c;border-radius:8px;min-height:124px;padding:15px}.intro-story span{color:var(--gold);margin-bottom:8px;font-size:.78rem;font-weight:900;display:block}.intro-story p{color:#d1e1ee;margin:0;font-size:.88rem;line-height:1.5}.hero-metrics{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#00000038;border:1px solid #ffffff1f;border-radius:8px;gap:8px;min-width:230px;padding:16px;display:grid}.hero-metrics span{color:var(--muted);font-size:.82rem}.hero-metrics strong{color:var(--text);font-size:1rem}.hero-metrics small{color:var(--gold);font-size:.78rem;font-weight:800}.main-grid{grid-template-columns:minmax(0,1.75fr) minmax(320px,.85fr);align-items:start;gap:20px;display:grid}.canvas-column,.side-column{flex-direction:column;gap:16px;min-width:0;display:flex}.lab-stage,.control-panel,.readout-panel,.velocity-graph,.thumb-panel,.concept-notes,.guided-panel,.insight-panel,.faq-panel,.quick-rules{border:1px solid var(--border);background:var(--panel);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:8px;box-shadow:0 18px 60px #00000047,inset 0 1px #ffffff0f}.lab-stage{padding:16px}.control-panel,.readout-panel,.velocity-graph,.thumb-panel,.concept-notes,.guided-panel,.insight-panel,.faq-panel,.quick-rules{padding:18px}.stage-header,.panel-title{justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;display:flex}.stage-header h2,.panel-title h2{color:var(--text);letter-spacing:0;margin:4px 0 0;font-size:1rem}.status-pill{color:#ceffe5;background:#62e6a71a;border:1px solid #62e6a74d;border-radius:999px;align-items:center;gap:8px;min-height:32px;padding:0 12px;font-size:.78rem;font-weight:800;display:inline-flex}.pulse-dot{background:var(--green);border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 5px #62e6a71f}.sim-canvas{aspect-ratio:4/3;background:#06101a;border:1px solid #76c0ff38;border-radius:8px;width:100%;display:block;box-shadow:inset 0 0 36px #55d5ff14}.control-stack{gap:18px;display:grid}.slider-control{gap:10px;display:grid}.slider-label{color:#b9c9d8;justify-content:space-between;gap:12px;font-size:.88rem;display:flex}.slider-label strong{color:var(--text);white-space:nowrap}.slider-control input[type=range]{appearance:none;background:linear-gradient(90deg, var(--cyan) var(--value), #89a0be29 var(--value));border-radius:999px;outline:none;width:100%;height:8px;margin:0}.slider-control input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--cyan);border:3px solid #06101a;border-radius:50%;width:20px;height:20px;box-shadow:0 0 0 4px #55d5ff33,0 0 18px #55d5ffa6}.ghost-button{min-height:34px;color:var(--text);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff24;border-radius:8px;padding:0 13px}.ghost-button:hover{border-color:#55d5ff7a}.toggle-row{cursor:pointer;background:#ffffff0b;border:1px solid #ffffff1a;border-radius:8px;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:12px;margin-top:20px;padding:14px;display:grid}.toggle-row input{opacity:0;pointer-events:none;position:absolute}.toggle-track{background:#89a0be3d;border-radius:999px;width:46px;height:26px;transition:background .16s;position:relative}.toggle-track:after{content:"";background:#dcefff;border-radius:50%;width:18px;height:18px;transition:transform .16s;position:absolute;top:4px;left:4px}.toggle-row input:checked+.toggle-track{background:linear-gradient(90deg, var(--cyan), var(--rose))}.toggle-row input:checked+.toggle-track:after{transform:translate(20px)}.toggle-row strong{font-size:.88rem;display:block}.toggle-row small{color:var(--muted);margin-top:3px;font-size:.76rem;line-height:1.4;display:block}.rule-stage{background:radial-gradient(circle,#55d5ff1f,#0000 56%),#ffffff09;border:1px solid #ffffff17;border-radius:8px;place-items:center;min-height:220px;display:grid;position:relative;overflow:hidden}.field-plane{color:#8fa4b86b;grid-template-columns:repeat(4,1fr);place-items:center;font-size:1.45rem;display:grid;position:absolute;inset:18px}.rule-center{width:150px;height:150px;position:relative}.orbit-ring{border:1px dashed #55d5ff52;border-radius:50%;animation:5s linear infinite ruleSpin;position:absolute;inset:12px}.hand-orbit{transform-origin:50% 78%;animation:2.4s ease-in-out infinite handNod;position:absolute;inset:42px 36px 32px 38px}.hand-palm{background:linear-gradient(145deg,#ffd39a,#f2a969);border-radius:18px 18px 16px 16px;width:54px;height:42px;position:absolute;top:45px;left:22px;box-shadow:inset -8px -8px 16px #7c431e2e}.hand-finger,.hand-thumb{background:linear-gradient(145deg,#ffd7a6,#f1aa67);position:absolute;box-shadow:inset -5px -5px 12px #7c431e24}.hand-finger{border-radius:999px;width:16px;height:72px;top:0}.hand-finger.index{left:32px;transform:rotate(-4deg)}.hand-finger.middle{height:66px;left:54px;transform:rotate(5deg)}.hand-thumb{transform-origin:100%;border-radius:999px;width:48px;height:17px;top:48px;left:1px;transform:rotate(-34deg)}.rule-arrow{transform-origin:0;width:68px;height:0;position:absolute;top:75px;left:75px}.rule-arrow:before{content:"";background:currentColor;border-radius:999px;width:58px;height:4px;position:absolute;top:-2px;left:0;box-shadow:0 0 14px}.rule-arrow:after{content:"";border-top:7px solid #0000;border-bottom:7px solid #0000;border-left:12px solid;position:absolute;top:-7px;right:0}.rule-arrow span{color:currentColor;transform:rotate(var(--label-rotation,0deg));font-size:.8rem;font-weight:900;position:absolute;top:-27px;right:-8px}.velocity-vector{color:var(--cyan);animation:1.8s ease-in-out infinite vectorPulse}.force-vector{color:var(--gold);animation:1.8s ease-in-out .55s infinite forcePulse}.field-badge{color:#dff7ff;background:#05070bb8;border:1px solid #55d5ff5c;border-radius:50%;place-items:center;width:44px;height:44px;font-size:.86rem;font-weight:900;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.rule-legend{color:#b9c9d8;gap:8px;margin-top:12px;font-size:.78rem;display:grid}.rule-legend span{align-items:center;gap:8px;display:flex}.dot{border-radius:50%;width:9px;height:9px}.dot.cyan{background:var(--cyan)}.dot.blue{background:#8fa4b8}.dot.gold{background:var(--gold)}.rule-note{color:var(--muted);margin:12px 0 0;font-size:.82rem;line-height:1.55}@keyframes ruleSpin{to{transform:rotate(360deg)}}@keyframes handNod{0%,to{transform:rotate(-5deg)translateY(0)}50%{transform:rotate(7deg)translateY(-4px)}}@keyframes vectorPulse{0%,to{opacity:.68;filter:saturate()}50%{opacity:1;filter:saturate(1.35)}}@keyframes forcePulse{0%,to{opacity:.58;filter:saturate()}50%{opacity:1;filter:saturate(1.5)}}.readout-grid{gap:10px;display:grid}.readout-row{background:linear-gradient(135deg,#55d5ff14,#ffffff08);border:1px solid #ffffff17;border-radius:8px;gap:4px;padding:14px;display:grid}.readout-row span{color:#b9c9d8;font-size:.8rem}.readout-row strong{color:var(--text);font-size:1.28rem}.readout-row small{color:var(--muted);font-size:.76rem}.graph-caption{color:var(--muted);margin:-4px 0 12px;font-size:.86rem;line-height:1.5}.lesson-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px;display:grid}.lesson-step{min-height:72px;color:var(--muted);background:#ffffff0a;border:1px solid #ffffff14;border-radius:8px;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:10px;padding:12px;display:grid}.lesson-step.active{color:#cfeeff;background:#55d5ff14;border-color:#55d5ff42}.lesson-step strong{width:32px;height:32px;color:var(--cyan);background:#55d5ff26;border-radius:50%;place-items:center;display:grid}.lesson-step span{font-size:.84rem;line-height:1.45}.prediction-box{background:linear-gradient(135deg,#f4c45f1a,#ffffff09);border:1px solid #f4c45f2e;border-radius:8px;gap:12px;padding:14px;display:grid}.prediction-box p{color:var(--text);margin:0;font-weight:800}.prediction-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.direction-button,.reveal-button{min-height:40px;color:var(--text);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:8px}.direction-button:hover,.reveal-button:hover{border-color:#55d5ff70}.direction-button.selected{background:#f4c45f26;border-color:#f4c45f94}.direction-button.correct{background:#62e6a72b;border-color:#62e6a79e}.direction-button.wrong{background:#ff7a9029;border-color:#ff7a909e}.reveal-button{color:#03111a;background:linear-gradient(90deg, var(--gold), #ffe39b);border-color:#0000;font-weight:900}.reveal-button:disabled,.direction-button:disabled{cursor:not-allowed;opacity:.46}.feedback-card{color:#b9c9d8;background:#ffffff0b;border:1px solid #ffffff17;border-radius:8px;margin-top:12px;padding:13px 14px;font-size:.86rem;line-height:1.5}.feedback-card.success{color:#d9ffed;background:#62e6a71a;border-color:#62e6a757}.feedback-card.error{color:#ffe0e6;background:#ff7a901a;border-color:#ff7a9057}.insight-hero{background:linear-gradient(135deg,#55d5ff1f,#f4c45f14),#ffffff09;border:1px solid #55d5ff33;border-radius:8px;gap:8px;padding:16px;display:grid}.insight-hero span{color:var(--gold);letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;font-weight:900}.insight-hero strong{color:var(--text);font-size:1.22rem}.insight-hero p{color:#b9c9d8;margin:0;font-size:.9rem;line-height:1.55}.insight-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px;display:grid}.insight-card{background:#ffffff0b;border:1px solid #ffffff17;border-radius:8px;min-height:132px;padding:14px}.insight-card span{color:var(--muted);text-transform:uppercase;font-size:.76rem;font-weight:800;display:block}.insight-card strong{color:var(--text);margin:6px 0;font-size:1.05rem;display:block}.insight-card p{color:#b9c9d8;margin:0;font-size:.82rem;line-height:1.5}.faq-list{gap:9px;display:grid}.faq-item{background:#ffffff0b;border:1px solid #ffffff17;border-radius:8px;overflow:hidden}.faq-item summary{min-height:44px;color:var(--text);cursor:pointer;padding:12px 14px;font-size:.86rem;font-weight:800;line-height:1.35}.faq-item summary::marker{color:var(--gold)}.faq-item p{color:#b9c9d8;margin:0;padding:0 14px 13px 28px;font-size:.82rem;line-height:1.5}.rule-list{gap:10px;display:grid}.rule-card{background:#ffffff0b;border:1px solid #ffffff17;border-radius:8px;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:11px;padding:13px;display:grid}.rule-card>strong{color:#03111a;background:var(--gold);border-radius:50%;place-items:center;width:34px;height:34px;font-size:.9rem;display:grid}.rule-card h3{color:var(--text);margin:0 0 4px;font-size:.9rem}.rule-card p{color:#b9c9d8;margin:0;font-size:.8rem;line-height:1.45}.formula-strip{background:linear-gradient(90deg,#55d5ff1f,#f4c45f1f);border-radius:8px;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding:12px;display:flex}.formula-strip span{color:var(--muted);font-size:.78rem;font-weight:800}.formula-strip code{color:var(--gold);font-weight:900}.notes-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.note-card{background:#ffffff0b;border:1px solid #ffffff17;border-radius:8px;min-height:150px;padding:16px}.highlight-note{background:linear-gradient(135deg,#55d5ff21,#f4c45f17)}.note-card h3{color:var(--text);margin:0 0 10px;font-size:.98rem}.note-card p,.note-card li{color:#b9c9d8;font-size:.86rem;line-height:1.55}.note-card p{margin:0 0 10px}.note-card ul{margin:0;padding-left:18px}.note-card code{color:#03111a;background:var(--gold);border-radius:8px;margin:2px 0 10px;padding:7px 10px;font-weight:900;display:inline-block}@media (width<=980px){.hero,.main-grid{grid-template-columns:1fr}.hero{background-position:right 16px top 16px;background-size:150px}.hero-metrics{width:min(100%,340px)}.intro-story{grid-template-columns:1fr}}@media (width<=620px){.app-shell{width:min(100% - 20px,1280px);padding-top:10px}.hero{min-height:auto;padding:22px}.hero h1{font-size:2.35rem}.lab-stage,.control-panel,.readout-panel,.velocity-graph,.concept-notes,.thumb-panel,.guided-panel,.insight-panel,.faq-panel,.quick-rules{padding:12px}.notes-grid,.insight-grid,.lesson-steps,.prediction-options{grid-template-columns:1fr}.stage-header,.panel-title{align-items:flex-start}.status-pill{display:none}}