:root{--bg:#0e151c;--panel:#151e27;--line:#293039;--gold:#d7b875;--muted:#89939f;--text:#e5e6e8;--serif:"Cormorant Garamond",Georgia,serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:DM Sans,Arial,sans-serif;font-size:13px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline-offset:5px;outline:2px solid #dec18a}button{border:0}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh;display:flex}.sidebar{border-right:1px solid var(--line);z-index:20;background:#10171e;flex-direction:column;flex-shrink:0;width:237px;padding:34px 20px 0;display:flex;position:fixed;inset:0 auto 0 0}.brand{color:#e0c88e;align-items:center;gap:11px;padding-left:7px;display:flex}.brand-mark{border:1px solid #75653f;border-radius:18px 18px 22px 22px;place-items:center;width:43px;height:51px;display:grid;position:relative}.brand-mark:after{content:"";border:1px solid #75653f66;border-radius:15px 15px 18px 18px;position:absolute;inset:4px}.brand>span{font-family:var(--serif);letter-spacing:1.4px;font-size:17px;font-weight:600}.brand small{letter-spacing:4.7px;margin-top:6px;font-family:DM Sans,sans-serif;font-size:9px;display:block}.school-label{letter-spacing:1.25px;color:#737a81;text-align:center;margin:21px -4px 47px;font-size:7px}.nav-label{letter-spacing:1.7px;color:#79818b;margin-bottom:17px;padding:0 13px;font-size:9px}.nav-item{color:#929ba5;background:0 0;border-radius:5px;align-items:center;gap:12px;width:100%;margin:4px 0;padding:14px 13px;font-size:12px;display:flex}.nav-item>svg:last-child:not(:first-child){margin-left:auto}.nav-item.active{color:#e0bf7f;background:#bfa06415;border:1px solid #c7a36126}.nav-item:hover{color:#dfc58e;background:#ffffff08}.tiny-badge{background:#27313b;border-radius:3px;margin-left:auto;padding:2px 5px;font-size:9px}.sidebar-divider{background:#252d35;height:1px;margin:29px 11px}.chapter-nav{align-items:center;gap:10px;padding:0 12px;font-size:11px;display:flex}.chapter-dot{width:24px;height:24px;color:var(--gold);border:1px solid #b89b59;border-radius:50%;place-items:center;font-size:10px;display:grid}.chapter-nav small{color:#7c8793;margin-top:6px;font-size:10px;display:block}.lesson-progress{color:#939ca5;margin:28px 12px;font-size:9px}.lesson-progress>span{justify-content:space-between;display:flex}.lesson-progress b{color:var(--gold);font-weight:400}.lesson-progress>div{background:#2a3138;border-radius:4px;height:3px;margin:11px 0;overflow:hidden}.lesson-progress i{background:var(--gold);height:100%;transition:width .6s;display:block}.lesson-progress small{color:#66727d;font-size:9px}.sidebar-bottom{text-align:center;margin-top:auto;padding-top:30px}.quote-star{color:var(--gold);font-size:30px}.sidebar-bottom p{font-family:var(--serif);color:#8e959b;font-size:16px;font-style:italic;line-height:1.5}.student{text-align:left;border-top:1px solid var(--line);align-items:center;gap:10px;margin-top:28px;padding:22px 0;font-size:11px;display:flex}.avatar{color:#d6bfeb;width:33px;height:33px;font-family:var(--serif);background:#393144;border:1px solid #6c597b;border-radius:50%;place-items:center;font-size:18px;display:grid}.student small{color:#7c8590;margin-top:4px;font-size:9px;display:block}.student>svg{color:var(--gold);margin-left:auto}main{width:calc(100% - 237px);margin-left:237px}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:73px;padding:0 39px;display:flex}.breadcrumb{color:#7d8793;align-items:center;gap:12px;font-size:11px;display:flex}.breadcrumb span{color:#c6cbd1}.header-right{align-items:center;gap:21px;display:flex}.ks3{color:#a5abb3;align-items:center;gap:8px;font-size:10px;display:flex}.ks3 svg{color:var(--gold)}.icon-btn{color:#99a3ae;background:0 0;place-items:center;padding:3px;display:grid}.mobile-menu{display:none}.page-content{max-width:1530px;margin:auto;padding:32px 39px 0}.eyebrow{letter-spacing:2px;color:#c5ac79;align-items:center;gap:10px;font-size:9px;display:flex}.eyebrow>span:first-child{background:var(--gold);border-radius:50%;width:5px;height:5px}.eyebrow-line{background:#6f6044;width:22px;height:1px}.title-row{justify-content:space-between;align-items:center;margin:12px 0 27px;display:flex}h1{font-family:var(--serif);letter-spacing:-1px;margin:0 0 12px;font-size:49px;font-weight:500;line-height:1.1}h1 em{color:#d6b97e;font-weight:400}.title-row p{color:#8f9aa6;margin:0;font-size:12px}.lesson-badge{color:#b9a984;background:#ba9a5810;border:1px solid #bda05f25;border-radius:20px;align-items:center;gap:8px;padding:9px 12px;font-size:9px;display:flex}.workspace{grid-template-columns:minmax(0,1fr) 305px;gap:20px;display:grid}.classroom{background:radial-gradient(at 50% 25%,#243741,#101b24 68%);border:1px solid #394143;border-radius:10px;min-height:510px;position:relative;overflow:hidden}.classroom:after{content:"";pointer-events:none;border-radius:10px;position:absolute;inset:0;box-shadow:inset 0 0 80px #09131e66}.scene-top{z-index:3;justify-content:space-between;display:flex;position:absolute;top:20px;left:22px;right:22px}.location{color:#b5b8b8;letter-spacing:1.5px;align-items:center;gap:8px;font-size:8px;display:flex}.location svg{color:#b6a27a}.live-dot{letter-spacing:1.1px;color:#a6b5b1;align-items:center;gap:6px;font-size:8px;display:flex}.live-dot:before{content:"";background:#99bfac;border-radius:50%;width:4px;height:4px;box-shadow:0 0 8px #93ceb9}.equation-overlay{text-align:center;z-index:3;pointer-events:none;position:absolute;top:58px;left:0;right:0}.equation-overlay>span{color:#a9b4bc;letter-spacing:2px;font-size:8px}.equation-overlay>div{font-family:var(--serif);letter-spacing:2px;color:#f4ead7;text-shadow:0 3px 20px #000;margin:6px 0 9px;font-size:45px;animation:.5s reveal}.equation-overlay small{background:#101d23b0;border:1px solid #9fb7a129;border-radius:15px;align-items:center;gap:6px;padding:5px 10px;font-size:9px;display:inline-flex}.balanced{color:#a9c6ac}.unbalanced{color:#ecc183}.equation-overlay i{background:currentColor;border-radius:50%;width:4px;height:4px}.three-scene{position:absolute;inset:60px 0 10px}.three-scene canvas{touch-action:none;width:100%;height:100%;display:block}.scene-loading{text-align:center;color:var(--gold);place-content:center;line-height:2;display:grid;position:absolute;inset:0}.pan-labels{pointer-events:none;justify-content:space-between;display:flex;position:absolute;bottom:58px;left:10%;right:10%}.pan-labels>div{font-family:var(--serif);background:#0c151bce;border:1px solid #69707755;border-radius:5px;align-items:center;gap:7px;padding:7px 12px;font-size:17px;display:flex}.pan-labels span{color:#96a0aa;font-family:DM Sans,sans-serif;font-size:9px}.purple-dot,.gold-dot{background:#b691e9;border-radius:50%;width:5px;height:5px}.gold-dot{background:var(--gold)}.scene-bottom{z-index:4;color:#8e9ca6;justify-content:space-between;align-items:center;font-size:9px;display:flex;position:absolute;bottom:19px;left:21px;right:21px}.scene-bottom>span{align-items:center;gap:7px;display:flex}.scene-bottom button{color:#b9bfc5;background:0 0;align-items:center;gap:7px;font-size:9px;display:flex}.control-panel{background:linear-gradient(125deg,#1b242d,#141d26);border:1px solid #333a42;border-radius:10px;padding:23px 21px 17px}.panel-heading{align-items:center;gap:10px;display:flex}.panel-heading svg{color:var(--gold)}h2{font-family:var(--serif);margin:0;font-size:23px;font-weight:500}.control-panel>p{color:#98a1ac;margin:9px 0 21px;font-size:10px}.mode-switch{background:#0d151d;border:1px solid #29343e;border-radius:5px;padding:4px;display:flex}.mode-switch button{color:#8e99a5;background:0 0;border-radius:3px;width:50%;padding:8px 0;font-size:10px}.mode-switch .selected{color:#e2c890;background:#303339;box-shadow:0 1px 3px #0004}.equation-inputs{gap:24px;margin:22px 0;display:flex}.input-group{width:calc(33.3333% - 16px);position:relative}.input-group label{white-space:nowrap;color:#98a3ae;margin-bottom:8px;font-size:9px;display:block}.number-box{background:#111a22;border:1px solid #3b444d;border-radius:5px;align-items:center;height:41px;display:flex;position:relative}.number-box input{color:#e7e4df;width:100%;font-family:var(--serif);appearance:textfield;background:0 0;border:0;padding:5px 5px 5px 12px;font-size:24px}.number-box input::-webkit-inner-spin-button{opacity:.4;width:10px}.number-box em{font-family:var(--serif);pointer-events:none;color:#ac8bd8;font-size:22px;position:absolute;right:22px}.input-operator{color:#a8a5a0;font-size:17px;position:absolute;bottom:11px;right:-17px}.x-control{border-bottom:1px solid #323a43;padding-bottom:20px}.x-control>div:first-child{color:#bac0c7;justify-content:space-between;align-items:center;font-size:10px;display:flex}.x-control em{font-family:var(--serif);font-size:16px}.x-control output{color:#c8afe6;background:#b797d51a;border:1px solid #b497d13b;border-radius:4px;padding:4px 10px}.x-control input{accent-color:#bd9cde;cursor:pointer;width:100%;height:3px;margin:17px 0 12px}.range-labels{color:#7d8996;justify-content:space-between;font-size:8px;display:flex}.rule-card{background:#c4a16309;border:1px solid #b7975930;border-radius:5px;align-items:flex-start;gap:10px;margin:18px 0;padding:12px;display:flex}.rule-card svg{color:var(--gold);flex-shrink:0;margin-top:1px}.rule-card strong{color:#d8bf8e;font-size:10px;font-weight:500}.rule-card p{color:#a1a6aa;margin:5px 0 0;font-size:10px;line-height:1.7}.next-spell>span{color:#9a8b70;letter-spacing:1.6px;font-size:8px}.next-spell h3{font-family:var(--serif);margin:8px 0 5px;font-size:21px;font-weight:500}.next-spell p{color:#8995a2;margin:0 0 17px;font-size:9px;line-height:1.6}.cast-button{color:#28251e;background:linear-gradient(100deg,#dec895,#c5a464);border-radius:5px;justify-content:center;align-items:center;gap:9px;width:100%;padding:13px 14px;font-size:11px;font-weight:650;transition:filter .2s,transform .2s;display:flex;box-shadow:0 4px 20px #c9a96c12}.cast-button:hover{filter:brightness(1.1);transform:translateY(-1px)}.cast-button svg:last-child{margin-left:auto}.panel-footnote{color:#798591;text-align:center;margin-top:11px;font-size:8px;line-height:1.5}.journey{margin-top:27px}.journey-heading{justify-content:space-between;align-items:center;margin-bottom:15px;display:flex}.journey-heading>div{align-items:center;gap:10px;display:flex}.small-star{color:#c6aa6e;font-size:25px}.journey-heading h2{font-size:22px}.journey-heading>span{letter-spacing:1.7px;color:#6f7c8a;font-size:8px}.steps{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.step-card{text-align:left;background:#141d26;border:1px solid #2d3741;border-radius:7px;padding:17px 18px;transition:border .3s,background .3s}.step-card.current{background:linear-gradient(110deg,#b4945d12,#171f28);border-color:#a58a514f}.step-card:hover{border-color:#b69a65}.step-heading{color:#bbc1c8;align-items:center;gap:10px;font-size:10px;display:flex}.step-number{color:#8d9aa7;border:1px solid #48505a;border-radius:50%;flex-shrink:0;place-items:center;width:24px;height:24px;font-size:8px;display:grid}.current .step-number,.complete .step-number{color:#dbc68f;background:#b79b5718;border-color:#ae945a}.here{letter-spacing:1px;color:#b6a078;margin-left:auto;font-size:6px}.step-equation{font-family:var(--serif);letter-spacing:1px;color:#e6dfd0;margin:12px 0 6px 34px;font-size:30px}.step-card p{color:#7e8b98;margin:0 0 0 34px;font-size:9px}footer{color:#6b7885;justify-content:space-between;align-items:center;padding:24px 0;font-size:9px;display:flex}footer>span{align-items:center;gap:8px;display:flex}footer>span:last-child{letter-spacing:1.3px;font-size:7px}footer svg{color:#9d8a63}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#060b12cf;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.modal{background:#17212c;border:1px solid #8e7851;border-radius:12px;max-width:470px;max-height:90vh;padding:35px;position:relative;overflow:auto}.modal-close{position:absolute;top:18px;right:18px}.gold{color:var(--gold)}.modal h2{margin:12px 0 20px;font-size:34px}.modal p{color:#aab6c2;font-size:12px;line-height:1.8}.modal strong{color:#e0c48b}.modal-note{background:#0f1820;border-radius:5px;padding:12px}.modal .cast-button{margin-top:23px}@keyframes reveal{0%{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (min-width:1600px){.page-content{padding-top:45px}.classroom{min-height:570px}.title-row{margin-bottom:35px}h1{font-size:58px}.control-panel{padding:28px}.workspace{grid-template-columns:minmax(0,1fr) 340px}.next-spell{margin-top:25px}.steps .step-card{padding:23px}}@media (max-width:1200px){.sidebar{width:207px;padding-left:13px;padding-right:13px}main{width:calc(100% - 207px);margin-left:207px}header{padding:0 25px}.page-content{padding:28px 25px 0}.workspace{grid-template-columns:minmax(0,1fr) 275px;gap:14px}.control-panel{padding:20px 17px}.lesson-badge,.here{display:none}.step-card{padding:14px 10px}.step-heading{gap:7px;font-size:9px}.pan-labels{left:7%;right:7%}.location{letter-spacing:1px;font-size:7px}}@media (max-width:1000px){.sidebar{width:185px;padding-left:10px;padding-right:10px}.brand{gap:7px}.brand>span{font-size:14px}.brand-mark{width:35px}.brand small{font-size:8px}.school-label{font-size:6px}main{width:calc(100% - 185px);margin-left:185px}.workspace{grid-template-columns:1fr}.classroom{min-height:500px}.control-panel{grid-template-columns:1fr 1fr;column-gap:25px;display:grid}.panel-heading,.control-panel>p,.mode-switch,.equation-inputs,.x-control{grid-column:1}.panel-heading{grid-row:1}.control-panel>p{grid-row:2;margin-bottom:16px}.mode-switch{grid-row:3}.equation-inputs{grid-row:4;margin:15px 0}.x-control{border:0;grid-row:5/span 2;padding:0}.rule-card{grid-area:1/2/span 3;margin:0 0 13px}.next-spell{grid-area:4/2}.cast-button{grid-area:5/2;align-self:start}.panel-footnote{grid-area:6/2}.journey-heading>span,.ks3{display:none}.step-equation{margin-left:0;font-size:26px}.step-card p{margin-left:0}.step-number{width:20px;height:20px}.step-heading{font-size:8px}}@media (max-width:700px){.sidebar{width:230px;transition:transform .25s;transform:translate(-100%);box-shadow:15px 0 60px #0008}.sidebar.open{top:61px;transform:translate(0)}.brand>span{font-size:17px}.school-label{font-size:7px}.mobile-menu{display:grid}main{width:100%;margin-left:0}header{gap:12px;height:61px;padding:0 20px}.header-right{gap:16px}.breadcrumb{gap:7px;margin-right:auto;font-size:9px}.breadcrumb>span{max-width:145px}.page-content{padding:26px 18px 0}.eyebrow{letter-spacing:1.5px;font-size:7px}h1{font-size:43px}.title-row p{font-size:10px;line-height:1.6}.title-row{margin-bottom:22px}.classroom{min-height:450px}.scene-top{left:15px;right:15px}.location{font-size:6px}.equation-overlay{top:58px}.equation-overlay>div{font-size:38px}.three-scene{inset:85px -40px 10px}.scene-bottom{font-size:7px;left:15px;right:15px}.pan-labels{bottom:58px;left:5%;right:5%}.pan-labels>div{padding:6px 8px;font-size:15px}.pan-labels span{font-size:8px}.control-panel{padding:23px;display:block}.control-panel>p{margin-bottom:18px}.equation-inputs{margin:22px 0}.rule-card{margin-top:20px}.next-spell{margin:18px 0}.steps{grid-template-columns:1fr;gap:10px}.step-card{grid-template-columns:1fr auto;align-items:center;padding:16px 18px;display:grid}.step-heading{grid-column:1;font-size:11px}.step-number{width:25px;height:25px}.step-equation{grid-area:1/2/span 2;margin:0;font-size:28px}.step-card p{grid-column:1;margin:8px 0 0 33px}.journey-heading h2{font-size:24px}footer>span:last-child{display:none}footer{justify-content:center;font-size:8px}.modal{padding:26px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}