:root{color-scheme:dark;--bg:#101523;--panel:#181f30;--panel-deep:#131a2a;--line:#2b3346;--text:#eff2f8;--muted:#a3aec4;--accent:#eed082;--cyan:#83d7d0;--red:#ffaaa6}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Sans",system-ui,sans-serif;font-size:15px;line-height:1.65}
button,input,select{font:inherit}
button,a,input{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}
button{color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,.brand,.formula,.metric-value{font-family:"Space Grotesk",system-ui,sans-serif}
.topbar{max-width:1320px;margin:auto;padding:26px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}
.brand{display:flex;align-items:center;font-size:21px;font-weight:700;letter-spacing:-.7px;white-space:nowrap}
.brand-light{font-weight:400;color:var(--muted);margin-left:5px}
.brand-icon{display:inline-grid;place-items:center;background:var(--accent);color:var(--bg);width:32px;height:32px;border-radius:9px;margin-right:11px;font-size:28px;line-height:1}
.course-label{font-size:10px;letter-spacing:1.7px;color:var(--muted)}
.status{font-size:12px;color:var(--muted);white-space:nowrap}
.status>span{display:inline-block;width:6px;height:6px;background:var(--cyan);border-radius:100%;margin-right:7px}
main{max-width:1240px;padding:0 40px;margin:auto}
.hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:40px;padding:64px 0 52px}
.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:700;margin-bottom:16px}
h1{font-size:clamp(38px,4.7vw,62px);line-height:1.12;letter-spacing:-2.7px;font-weight:500}
h1 span{color:var(--accent)}
.hero-description{max-width:520px;color:var(--muted);margin-top:24px;font-size:14px;line-height:1.9}
.hero-actions{display:flex;align-items:center;gap:22px;margin-top:30px}
.button{border:1px solid transparent;border-radius:8px;padding:12px 20px;font-size:13px;font-weight:700;transition:background .15s,transform .15s}
.button:hover:not(:disabled){transform:translateY(-1px)}
.primary{background:var(--accent);color:#242418}
.primary:hover:not(:disabled){background:#ffe5a4}
.primary span{margin-left:22px}
.secondary{background:transparent;border-color:var(--line)}
.secondary:hover{background:#242d40}
.small{padding:9px 16px;font-size:12px}
.hero-note{font-size:11px;color:var(--muted)}
.hero-art{position:relative;height:310px;display:grid;place-items:center;background:radial-gradient(ellipse at center,#27324977,transparent 65%)}
.orbit{position:absolute;width:310px;height:240px;border:1px solid #71829c33;border-radius:50%;transform:rotate(-25deg)}
.orbit-two{width:240px;height:310px;transform:rotate(-40deg);border-style:dashed}
.art-disc{position:relative;width:186px;height:186px;border:2px solid var(--cyan);border-radius:50%;background:repeating-conic-gradient(from 0deg,#83d7d010 0deg 59deg,#83d7d050 59deg 60deg);box-shadow:0 0 60px #83d7d012,inset 0 0 40px #83d7d012;transform:rotateX(28deg) rotateY(-26deg);animation:disc-turn 25s linear infinite}
.art-disc:after{content:"";position:absolute;inset:13px;border:1px solid #83d7d066;border-radius:50%}
.disc-spoke{position:absolute;height:2px;background:var(--accent);width:50%;top:50%;left:50%}
.disc-spoke:after{content:"";position:absolute;right:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px #eed08288}
.disc-core{width:18px;height:18px;background:var(--bg);border:4px solid var(--cyan);border-radius:50%;position:absolute;left:calc(50% - 9px);top:calc(50% - 9px)}
.art-axis{position:absolute;width:1px;height:265px;background:linear-gradient(transparent,#eed08288,transparent);transform:rotate(25deg)}
.art-formula{position:absolute;border:1px solid var(--line);background:#182031cc;border-radius:7px;padding:7px 13px;font-family:"Space Grotesk",sans-serif;font-size:17px}
.formula-one{right:2%;top:40px;color:var(--accent);transform:rotate(7deg)}
.formula-two{left:4%;bottom:55px;color:var(--cyan);transform:rotate(-7deg)}
.art-caption{position:absolute;bottom:-4px;font-size:8px;letter-spacing:2.4px;color:var(--muted)}
.tabs{display:flex;border-bottom:1px solid var(--line);gap:30px}
.tab{border:0;border-bottom:2px solid transparent;background:none;padding:17px 4px;color:var(--muted);font-size:13px}
.tab span{font-size:10px;margin-right:9px;opacity:.65}
.tab.active{border-bottom-color:var(--accent);color:var(--accent)}
.page{padding-top:35px}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}
.section-heading .eyebrow{margin-bottom:5px;font-size:9px}
h2{font-size:25px;letter-spacing:-.7px;font-weight:500}
.section-note,.tag{font-size:11px;color:var(--muted)}
.tag{border:1px solid var(--line);padding:4px 11px;border-radius:30px}
.learning-layout{display:grid;grid-template-columns:265px minmax(0,1fr);gap:22px;align-items:start}
.lesson-list{display:flex;flex-direction:column;gap:8px;position:sticky;top:15px;max-height:calc(100vh - 30px);overflow-y:auto;padding:3px}
.lesson-group{font-size:11px;color:var(--accent);font-weight:500;letter-spacing:.4px;margin:12px 0 2px}
.course-intro{border:1px solid var(--line);border-radius:9px;padding:20px 24px;margin-bottom:25px;background:var(--panel-deep)}
.course-intro>strong{font-family:"Space Grotesk",system-ui,sans-serif;font-size:17px;font-weight:500}
.course-intro p{font-size:12px;color:var(--muted);margin-top:9px;max-width:950px}
.lesson-goal{border-left:3px solid var(--accent);padding:10px 15px;margin-bottom:15px;background:#eed08208}
.lesson-goal>strong{font-size:11px;color:var(--accent)}
.lesson-goal p{margin:5px 0 0}
.lesson-panel .source-map{font-size:10px;color:var(--muted)}
.lesson-section{margin:26px 0}
.lesson-section>h4{font-family:"Space Grotesk",system-ui,sans-serif;font-size:18px;font-weight:500;margin-bottom:12px;color:var(--text)}
.worked-example{border:1px solid #eed08244;background:#eed08208;border-radius:8px;padding:18px 22px;margin:25px 0}
.worked-example h4{font-size:14px;color:var(--accent);margin-bottom:14px}
.worked-example ol{padding-left:22px;margin:8px 0 0}
.worked-example li{font-size:13px;color:#c0c9d9;padding-left:5px;margin:10px 0}
.worked-example li::marker{color:var(--accent);font-weight:700}
.concept-warning{padding:15px 18px;border-left:3px solid var(--red);background:#ffaaa608;margin:22px 0}
.concept-warning>strong{font-size:12px;color:var(--red)}
.concept-warning p{margin:6px 0 0}
summary{cursor:pointer;font-size:13px;line-height:1.6}
.recall,.extension{padding:14px 17px;border:1px solid var(--line);border-radius:7px;margin:12px 0;background:var(--panel-deep)}
.recall summary{color:var(--cyan)}
.extension summary{color:var(--accent)}
.recall p,.extension p{margin:12px 0 0;font-size:13px;color:#c0c9d9}
.lesson-practice{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border:1px solid var(--line);border-radius:8px;margin-top:24px}
.lesson-practice span{font-size:12px;color:var(--muted)}
.lesson-practice button{flex-shrink:0}
.table-scroll{overflow-x:auto;max-width:100%;margin:16px 0}
.table-scroll table{min-width:330px}
.lesson-figure{margin:20px 0;background:var(--panel-deep);padding:15px;border:1px solid var(--line);border-radius:8px}
.lesson-figure svg{width:100%;height:auto;display:block}
.lesson-figure figcaption{font-size:11px;color:var(--muted);margin-top:8px}
.textbook-image-link{display:block;width:fit-content;max-width:100%;margin:0 auto;background:#fff;cursor:zoom-in;border-radius:4px;overflow:hidden}
.textbook-image-link img{display:block;max-width:100%;height:auto}
.textbook-image-link:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.textbook-figure figcaption strong{display:block;color:var(--text);font-size:13px}
.textbook-source,.textbook-guide,.textbook-zoom{display:block;margin-top:8px}
.textbook-guide{color:var(--text);font-size:13px;line-height:1.7}
.textbook-zoom{color:var(--accent)}
.formula{overflow-wrap:anywhere}
.practice-picker{max-width:820px;margin:0 auto 20px;display:flex;align-items:center;gap:16px}
.practice-picker label{font-size:12px;color:var(--muted)}
.practice-picker select{min-width:0;flex:1;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:10px}
.exercise-question{font-size:16px!important;color:var(--text)!important;line-height:1.9}
#exercise-form label{font-size:12px;color:var(--cyan)}
.exercise-input-row{display:flex;gap:12px;margin:10px 0}
.exercise-input-row input{min-width:0;flex:1;background:var(--panel-deep);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:10px 13px}
#exercise-form .input-note{font-size:11px;margin:8px 0;color:var(--muted)}
.exercise-feedback{font-size:13px;color:var(--red);margin:16px 0}
.exercise-feedback:empty{display:none}
.exercise-feedback.success{color:var(--cyan)}
.solution summary{color:var(--accent)}
.solution p{font-size:11px;margin:13px 0 0}
.lesson-item{display:flex;align-items:center;text-align:left;background:transparent;border:1px solid var(--line);border-radius:9px;padding:14px 13px;gap:13px}
.lesson-item:hover{background:var(--panel)}
.lesson-item.active{background:#eed0820b;border-color:#eed08280}
.lesson-number{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#232c3f;color:var(--muted);font-size:11px;flex-shrink:0}
.lesson-item.active .lesson-number{background:var(--accent);color:var(--bg)}
.lesson-item.done .lesson-number{color:var(--cyan)}
.lesson-name{font-weight:500;font-size:12px;display:block}
.lesson-subtitle{color:var(--muted);font-size:10px;display:block}
.lesson-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:28px 32px}
.lesson-kicker{display:flex;align-items:center;gap:9px;color:var(--cyan);font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.lesson-panel h3{font-size:25px;font-weight:500;letter-spacing:-.5px;margin-bottom:15px}
.lesson-panel p{font-size:13px;color:#c0c9d9;margin-bottom:14px}
.lesson-panel strong{color:var(--text);font-weight:600}
.formula-box{background:var(--panel-deep);border:1px solid var(--line);border-left:3px solid var(--cyan);padding:16px 21px;margin:19px 0;border-radius:6px}
.formula{font-size:23px;color:var(--cyan);letter-spacing:.3px}
.formula-key{font-size:11px;color:var(--muted);margin-top:6px}
.vector-symbol{display:inline-block;position:relative;min-width:.65em;padding-top:.18em;line-height:1.15;text-align:center;white-space:nowrap;letter-spacing:0}
.vector-symbol::before{content:"";position:absolute;top:.08em;left:0;right:0;border-top:.06em solid currentColor}
.vector-symbol::after{content:"";position:absolute;top:-.015em;right:.015em;width:.2em;height:.2em;border-top:.06em solid currentColor;border-right:.06em solid currentColor;transform:rotate(45deg)}
.example-box{padding:14px 18px;background:#eed08208;border:1px solid #eed0822b;border-radius:7px;margin:18px 0}
.example-box h4{color:var(--accent);font-size:11px;margin-bottom:5px}
.example-box p{font-size:12px;margin:0}
.lesson-panel table{width:100%;border-collapse:collapse;font-size:12px;margin:16px 0}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:500}
.lesson-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:23px;padding-top:18px;gap:12px}
.lesson-bottom span{font-size:11px;color:var(--muted)}
.text-button{background:none;border:0;color:var(--accent);font-size:12px;padding:8px 0}
.insight{display:flex;align-items:center;gap:20px;border:1px solid var(--line);border-radius:10px;padding:20px 24px;margin-top:22px}
.insight-icon{color:var(--accent);font-size:30px}
.insight h3{font-size:13px;font-weight:500;margin-bottom:4px}
.insight p{font-size:11px;color:var(--muted)}
.insight .text-button{white-space:nowrap;margin-left:auto}
footer{margin-top:54px;border-top:1px solid var(--line);padding:24px 0 30px;color:var(--muted);font-size:10px}
footer strong{font-weight:500;color:var(--text)}
footer p{max-width:850px;margin-top:12px;line-height:1.8}
#storage-notice{display:block;color:var(--red);margin-top:8px}
.experiment-picker{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.experiment{min-width:150px}
.experiment{flex:1;background:transparent;border:1px solid var(--line);border-radius:8px;padding:13px;color:var(--muted);font-size:12px}
.experiment.active{color:var(--cyan);border-color:#83d7d088;background:#83d7d009}
.lab-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px}
.canvas-panel{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel-deep)}
.canvas-top{display:flex;justify-content:space-between;padding:18px 22px;font-size:9px;letter-spacing:1.4px;color:var(--muted);gap:10px}
.live-dot{color:var(--cyan)}
canvas{display:block;width:100%;height:auto;aspect-ratio:900/480}
.simulation-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:17px 20px;border-top:1px solid var(--line)}
#playback-control{font-size:11px;color:var(--muted)}
#playback-rate{font:inherit;color:var(--text);background:var(--panel-deep);border:1px solid var(--line);border-radius:5px;padding:5px}
#simulation-time{margin-left:auto;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.control-panel{padding:22px;border:1px solid var(--line);background:var(--panel);border-radius:12px}
.control-panel h3{font-size:19px;line-height:1.3;margin-bottom:12px}
.control-panel p{font-size:12px;color:var(--muted)}
.range-field{display:block;margin-top:22px}
.range-heading{display:flex;justify-content:space-between;gap:8px;font-size:12px}
.range-heading output{color:var(--cyan);white-space:nowrap}
input[type=range]{width:100%;accent-color:var(--cyan);margin:12px 0 0;cursor:pointer}
.prediction{border-top:1px solid var(--line);margin-top:22px;padding-top:16px;font-size:12px;color:var(--accent)}
.measurements{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:17px 22px}
.metric-name{font-size:11px;color:var(--muted);margin-bottom:6px}
.metric-value{font-size:23px;color:var(--cyan);font-variant-numeric:tabular-nums}
.metric-value small{font-size:12px;color:var(--muted);margin-left:5px}
.model-note{font-size:12px;color:var(--muted);padding:20px 2px}
.quiz-panel{max-width:820px;margin:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:32px}
.quiz-panel h3{font-size:25px;font-weight:500;margin-bottom:15px}
.quiz-panel p{color:var(--muted);font-size:14px;margin-bottom:20px}
.quiz-badges{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0}
.quiz-badges span{font-size:12px;border:1px solid var(--line);padding:6px 12px;border-radius:7px}
.quiz-top{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;gap:15px}
.progress-track{height:4px;background:var(--line);border-radius:3px;margin:13px 0 25px;overflow:hidden}
.progress-fill{background:var(--accent);height:100%}
.question-category{font-size:10px;letter-spacing:1.5px;color:var(--cyan);margin-bottom:10px;text-transform:uppercase}
.quiz-panel .question{font-size:21px;line-height:1.5}
.answers{display:grid;gap:10px;margin:24px 0}
.answer{text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--panel-deep);padding:13px 17px;font-size:14px;display:flex;align-items:center;gap:15px}
.answer:hover:not(:disabled){border-color:var(--muted)}
.answer-letter{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.answer.correct{border-color:var(--cyan);background:#83d7d010}
.answer.incorrect{border-color:var(--red);background:#ffaaa610}
.feedback{border-left:3px solid var(--cyan);padding:12px 18px;background:var(--panel-deep);margin-bottom:20px}
.feedback.wrong{border-left-color:var(--red)}
.feedback h4{color:var(--cyan);font-size:14px;margin-bottom:7px}
.feedback.wrong h4{color:var(--red)}
.feedback p{font-size:13px;margin:0}
.quiz-navigation{display:flex;justify-content:space-between;align-items:center;gap:15px}
.quiz-navigation span{font-size:11px;color:var(--muted)}
.result-score{font-family:"Space Grotesk",sans-serif;font-size:65px;color:var(--accent);line-height:1.3;margin:10px 0}
.review-item{border-top:1px solid var(--line);padding:16px 0}
.review-item h4{font-size:14px;margin-bottom:5px}
.review-item p{font-size:12px;margin:4px 0}
.review-item .right-answer{color:var(--cyan)}
.result-actions{display:flex;gap:12px;flex-wrap:wrap;margin:25px 0}
.storage-warning{color:var(--red)}
@keyframes disc-turn{from{transform:rotateX(28deg) rotateY(-26deg) rotate(0)}to{transform:rotateX(28deg) rotateY(-26deg) rotate(360deg)}}
@media(min-width:1500px){.hero{padding-top:80px;padding-bottom:70px}}
@media(max-width:950px){.course-label{display:none}.hero{gap:10px}.hero-actions{align-items:flex-start;flex-direction:column;gap:12px}.learning-layout{grid-template-columns:225px minmax(0,1fr)}.lesson-panel{padding:24px}.lab-layout{grid-template-columns:minmax(0,1fr) 240px}.control-panel{padding:18px}.formula-one{right:0}.hero-art{transform:scale(.9)}}
@media(max-width:700px){.topbar{padding:18px 20px}.brand{font-size:18px}.status{font-size:10px}main{padding:0 20px}.hero{padding:38px 0 32px;grid-template-columns:1fr}.hero-art{height:230px;margin-top:10px}.art-disc{width:150px;height:150px}.orbit{width:250px;height:180px}.orbit-two{width:180px;height:240px}.art-caption{bottom:-5px}h1{font-size:43px;letter-spacing:-1.7px}.hero-description{font-size:13px}.hero-actions{flex-direction:row;align-items:center}.hero-note{font-size:10px}.tabs{gap:0;justify-content:space-between}.tab{font-size:11px;padding:16px 3px}.tab span{display:none}.section-heading{align-items:flex-start}h2{font-size:22px}.section-note{white-space:nowrap;margin-top:24px}.learning-layout{grid-template-columns:1fr}.lesson-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}.lesson-item{padding:10px;gap:9px}.lesson-subtitle{font-size:9px}.lesson-name{font-size:11px}.lesson-number{width:24px;height:24px}.lesson-panel{padding:22px 18px}.lesson-panel h3{font-size:23px}.insight{padding:17px;flex-wrap:wrap;gap:12px}.insight>div{flex:1}.insight .text-button{margin-left:39px}.lab-layout{grid-template-columns:1fr}.experiment-picker{gap:6px}.experiment{font-size:10px;padding:11px 6px}.control-panel{padding:20px}.measurements{gap:8px}.metric{padding:13px 10px}.metric-name{font-size:10px}.metric-value{font-size:18px}.metric-value small{display:block;margin-left:0}.simulation-controls{padding:14px 10px;gap:8px}.simulation-controls .button{padding:9px 10px}.quiz-panel{padding:23px 18px}.quiz-panel .question{font-size:19px}.section-heading .tag{font-size:9px;white-space:nowrap}.formula{font-size:20px}footer{margin-top:35px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:700px){.hero-actions{flex-wrap:wrap}.tabs{gap:4px}.tab{font-size:10px}.lesson-list{position:static;max-height:340px;padding:4px;grid-template-columns:1fr 1fr}.lesson-group{grid-column:1/-1;margin:10px 0 0}.course-intro{padding:17px}.section-heading{flex-wrap:wrap;gap:7px}.section-note{margin-top:0}.lesson-practice{align-items:flex-start;flex-direction:column}.practice-picker{align-items:stretch;flex-direction:column;gap:7px}.lesson-panel{min-width:0}.lesson-bottom{align-items:flex-start}.lesson-bottom .button{max-width:75%}.worked-example{padding:15px}.experiment{min-width:95px}.lesson-section>h4{font-size:17px}.exercise-input-row{flex-wrap:wrap}.exercise-input-row .button{flex-shrink:0}.formula{font-size:18px}.lesson-panel .table-scroll table{font-size:11px}.lesson-figure{margin:18px 0;padding:8px}}