:root{color-scheme:dark;font:15px/1.5 system-ui,sans-serif;background:#07121f;color:#eaf1f9;--mint:#75e5cc;--gold:#ffd17c;--dim:#a8bed0}*{box-sizing:border-box}body{margin:0}header{max-width:1600px;margin:auto;padding:26px 30px 18px;display:flex;justify-content:space-between;align-items:center;gap:20px}h1{font-size:clamp(27px,3vw,42px);margin:2px 0;letter-spacing:-.03em}header p{margin:4px 0;color:var(--dim);font-size:14px}.eyebrow{font-size:10px;letter-spacing:.16em;color:var(--mint)}button,select{font:inherit;border-radius:8px;border:1px solid #355065;background:#1a3042;color:#eef4fb;padding:9px 12px;cursor:pointer}button:hover{background:#284a60}button.active{background:var(--mint);border-color:var(--mint);color:#082b25}nav{display:flex;gap:8px;overflow:auto;padding:0 30px 17px;max-width:1600px;margin:auto}nav button{flex-shrink:0;font-size:12px}nav b{color:#83b2c7;margin-right:6px}nav .active b{color:#165e51}main{max-width:1600px;display:grid;grid-template-columns:minmax(0,1fr) 325px;gap:16px;margin:auto;padding:0 24px 24px}.stage{position:relative;height:590px;overflow:hidden;border-radius:18px;border:1px solid #2b4052;background:radial-gradient(ellipse at 55% 45%,#1c3348,#0c1828)}canvas{display:block;touch-action:none}.stageTop{position:absolute;left:19px;right:19px;top:17px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}.stageTop button{pointer-events:auto;align-self:start;font-size:11px}.stageTop h2{margin:0;font-size:21px}.stageTop #number{font-size:10px;color:var(--mint);letter-spacing:.12em}#frameName{font-size:12px;color:var(--dim);max-width:500px}#legend{position:absolute;left:18px;bottom:139px;font-size:11px;line-height:1.8;pointer-events:none;background:#071320b0;border-radius:7px;padding:6px 9px}#legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.caption{position:absolute;bottom:76px;left:18px;right:18px;background:#102b3dec;border-left:3px solid var(--mint);border-radius:7px;padding:9px 12px;font-size:13px;min-height:39px}.transport{position:absolute;bottom:15px;left:18px;right:18px;display:flex;gap:9px;align-items:center;background:#0d1c2bea;border:1px solid #2b4052;border-radius:12px;padding:10px}.transport button{font-size:12px}.transport input{flex:1;width:30px}.transport span{font-size:11px;color:var(--dim);min-width:35px}aside{display:flex;flex-direction:column;gap:16px}.card{background:#101f2f;border:1px solid #293f52;border-radius:15px;padding:18px 20px}.card h3{font-size:15px;margin:0 0 11px}.controls label{font-size:12px;display:block;margin:12px 0 5px}.controls output{color:var(--mint);font-weight:600;float:right}input[type=range]{width:100%;accent-color:var(--mint);margin:9px 0}.presets{display:flex;gap:5px}.presets button{font-size:11px;flex:1;padding:6px 3px}.mini{font-size:13px;display:flex;justify-content:space-between;border-bottom:1px solid #293f52;padding:12px 0}.mini b{color:var(--gold)}.small{font-size:11px;line-height:1.6;color:var(--dim)}.rate{display:flex!important;justify-content:space-between;align-items:center}select{padding:3px 7px;font-size:12px}.row{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:9px 0;border-bottom:1px solid #293f52}.row b{color:var(--gold);font-size:14px;text-align:right}.explanation{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;gap:36px}.explanation h2{font-size:23px;margin:7px 0}.explanation p{font-size:14px}.formula{font-size:17px;color:var(--gold);padding:14px 16px;background:#172d3b;border-radius:9px;overflow-wrap:anywhere}.notice{border-left:3px solid #637f9b;padding-left:13px;color:#b7cddd}.explanation details{border:1px solid #304b5f;border-radius:9px;padding:10px 13px;margin:12px 0;font-size:13px}.explanation summary{cursor:pointer;color:var(--mint)}#plot{height:145px;margin-top:12px}#plot svg{width:100%;height:100%;display:block}#next{margin-top:12px;font-size:12px}.info{grid-column:1/-1;font-size:13px}.info summary{cursor:pointer;color:#bdd2e4}.info p{max-width:1000px}a{color:var(--mint)}#extra .choice{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}#extra .choice button{font-size:11px;padding:6px 8px}#error{position:absolute;top:160px;left:25px;right:25px;padding:18px;border-radius:8px;background:#58242d}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}@media(max-width:900px){main{grid-template-columns:1fr;padding:0 12px 20px}.stage{height:540px}aside{display:grid;grid-template-columns:1fr 1fr}.explanation{grid-template-columns:1fr;gap:20px}header{padding:18px}nav{padding:0 12px 14px}.stageTop h2{font-size:18px}}@media(max-width:540px){aside{grid-template-columns:1fr}.stage{height:490px}.stageTop button{max-width:100px;padding:5px}.stageTop h2{font-size:16px}.caption{font-size:11px}header button{font-size:11px}.transport{gap:5px;padding:8px}.transport button{padding:6px}#legend{bottom:145px}.card{padding:16px}}
[hidden]{display:none!important}.groups{max-width:1600px;margin:auto;padding:0 30px 15px;display:flex;align-items:center;gap:15px}.groups select{font-size:13px}.groups button{margin-left:auto;font-size:11px}.explanation[hidden]{display:none}.stageTop #number{font-size:11px}.caption{font-size:12px}
.equationOverlay{position:absolute;top:94px;left:18px;right:18px;pointer-events:none;background:#0b1d2ce8;border:1px solid #28485d;border-radius:10px;padding:9px 12px;max-width:820px}#stageFormula{color:#ffd17c;font-size:13px;line-height:1.55;font-family:Georgia,serif}#symbols{color:#aac1d1;font-size:10px;line-height:1.5;margin-top:4px}.subjects{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}.subjects span{font-size:9px;padding:2px 6px;background:#163940;color:#8ce5d2;border-radius:5px}.subjects #mathTag{background:#283342;color:#d4def1}.subjects #chemistryTag{background:#343047;color:#d6b8eb}@media(max-width:540px){.equationOverlay{top:93px;padding:7px 9px}#stageFormula{font-size:11px}#symbols{font-size:9px}.subjects span{font-size:8px}.stageTop #frameName{font-size:10px}.stageTop h2{max-width:245px}}
.stage{height:720px}.stage canvas{position:absolute;left:0}.caption{min-height:38px}@media(max-width:900px){.stage{height:700px}}@media(max-width:540px){.stage{height:670px}.equationOverlay{max-height:122px;overflow:auto;pointer-events:auto}}
#chapters{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;max-width:1552px;margin:0 auto 26px;padding:0 24px}#chapters .tile{padding:0;overflow:hidden;border-radius:12px;text-align:left;background:#101f2f;border:1px solid #2d485c;transition:transform .15s,border-color .15s}#chapters .tile:hover{transform:translateY(-3px);border-color:#75e5cc}#chapters .tile.active{border:2px solid #75e5cc;background:#16333d;color:#eaf8f4}#chapters img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#081c2c}#chapters span{display:block;padding:10px 12px;font-family:Georgia,serif;font-size:13px;min-height:65px;overflow-wrap:anywhere}#chapters b{display:block;font:10px system-ui;color:#75e5cc;margin:0 0 4px}.equationEditor{background:#172b3b;padding:9px 12px;border-radius:9px;margin-top:14px}.equationEditor label{font-family:Georgia,serif;font-size:15px}.equationEditor input,#fieldE{width:86px;border:1px solid #54758a;border-radius:5px;padding:4px;background:#091e2b;color:#ffd17c;font:inherit}#liveEquation{color:#85ddc8}.stage{scroll-margin-top:15px}@media(max-width:550px){#chapters{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 12px;gap:9px}#chapters span{font-size:11px;padding:8px}.groups{padding:0 12px 15px;gap:7px}.groups select{max-width:190px}}
.subjects{pointer-events:auto}.subjects button{pointer-events:auto;font-size:11px;padding:5px 9px;border:1px solid #477c7a;background:#163940;color:#8ce5d2;border-radius:6px;cursor:pointer}.subjects #mathTag{background:#283342;color:#d4def1;border-color:#58708e}.subjects #chemistryTag{background:#343047;color:#d6b8eb;border-color:#80679d}.subjects button:hover{filter:brightness(1.35)}.subjects button:focus-visible{outline:2px solid #ffd17c;outline-offset:3px}.subjects button:active{transform:translateY(1px)}
.equationOverlay{pointer-events:auto}.subjects button{font-size:12px}.subjects button.selected{outline:2px solid #ffd17c;background:#294d56}.subjects #chemistryTag.selected{background:#584064}#relatedTopic{margin-top:12px}#detailPanel{scroll-margin-top:15px}.explanation p{font-size:14px}@media(max-width:540px){.equationOverlay{max-height:none;overflow:visible}.subjects button{font-size:11px}header h1{font-size:24px}.groups select{max-width:210px}}

.languages{display:flex;gap:6px;flex-wrap:wrap}.languages a{display:inline-block;padding:8px 12px;color:#c8e2ef;border:1px solid #456177;border-radius:8px;text-decoration:none}.languages a[aria-current]{background:#274a59;color:#fff;border-color:#75e5cc}header{flex-wrap:wrap}.languages a:hover{border-color:#ffd17c}