/* Shared scientific visual language, scoped to the learning surfaces. */
science-scene{display:block;position:relative;isolation:isolate;overflow:hidden;min-width:0;background:radial-gradient(ellipse at 50% 90%,#12485b 0%,#0d233a 48%,#081625 100%);border:1px solid #82d8ed24;border-radius:18px;contain:layout paint;aspect-ratio:1.35;color:#dcefff;box-shadow:inset 0 1px 0 #d5f7ff16;transition:border-color .2s;}
science-scene canvas{display:block;width:100%;height:100%;position:absolute;inset:0;pointer-events:none}science-scene[interactive]{touch-action:pan-y;cursor:grab}science-scene[interactive]:active{cursor:grabbing}science-scene::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 50% 45%,#6fead000 45%,#6fead023 46%,transparent 49%);opacity:0}
science-scene:hover,.science-topic-card:hover science-scene,.science-topic-card:focus-within science-scene{border-color:#66dbd680;box-shadow:inset 0 1px 0 #d5f7ff2b,0 0 25px #36bde526}.scene-ripple::after{animation:science-ripple .7s ease-out}.scene-description{position:absolute;bottom:10px;left:12px;right:12px;font:450 10px/1.45 ui-sans-serif,system-ui;color:#b5cbdc;text-align:center;text-wrap:balance}.scene-state{position:absolute;top:10px;right:10px;padding:4px 7px;border-radius:99px;background:#0c2436c9;border:1px solid #6ae3d044;font:600 9px/1.3 system-ui;color:#8deed8}.scene-state:empty{display:none}science-scene[data-state=loading]{border-color:#ffca7280}science-scene[data-state=loading] .scene-state{color:#ffca72}science-scene[data-state=completed] .scene-state{color:#8deed8}science-scene[data-state=active]{border-color:#5ef0d099}.scene-thumb{width:64px;height:58px;aspect-ratio:auto;flex:0 0 64px;border-radius:12px}.scene-thumb .scene-description,.scene-thumb .scene-state{display:none}
.scene-explore{position:absolute;top:10px;left:10px;z-index:1;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;border:1px solid #6ae3d044;background:#0c2436c9;color:#8deed8;padding:0;cursor:pointer;opacity:0;transform:translateY(-3px);transition:opacity .15s,transform .15s,background .15s}
.scene-explore svg{width:16px;height:16px}
science-scene:hover .scene-explore,science-scene:focus-within .scene-explore,.scene-explore:focus-visible{opacity:1;transform:none}
.scene-explore:hover{background:#123146e0}
.scene-thumb .scene-explore{display:none}
@media(hover:none){.scene-explore{opacity:1;transform:none}}.science-topic-card{gap:12px!important}.science-topic-card>.tdot{display:none}.science-topic-card.trow{min-height:90px;padding:13px!important;border:1px solid var(--bdr,#dfebf3);border-radius:17px;margin-bottom:9px;background:linear-gradient(120deg,var(--surf,#fff),var(--blue-l,#f1f7fc));transition:box-shadow .2s,transform .2s}.science-topic-card.trow:hover{transform:translateY(-2px);box-shadow:0 8px 24px #075b8e0d}.science-topic-card:focus-visible{outline:3px solid #298fc5;outline-offset:3px}.science-topic-card.chapter-header{padding:12px}.science-topic-card.chapter-header .scene-thumb{width:48px;height:46px;flex-basis:48px}.science-topic-card.subject-button{position:relative;overflow:hidden}.subject-button>science-scene{width:100%;height:122px;margin-bottom:12px}.subject-button>science-scene .scene-description{display:block}#subjectTabs>button.science-topic-card{display:inline-flex;align-items:center}#subjectTabs>button>.scene-thumb{width:35px;height:35px;flex-basis:35px;border-radius:9px}
.science-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:10px 0 16px}.science-motion{border:1px solid #b0c7d7;border-radius:99px;padding:8px 13px;background:var(--panel,var(--surf,#fff));color:var(--text,var(--txt,#173e55));font:600 11px/1.4 system-ui;cursor:pointer;min-height:36px}.science-motion:disabled{opacity:.65;cursor:default}.science-motion:focus-visible{outline:3px solid #258eae;outline-offset:3px}.science-context{display:flex;align-items:center;gap:15px;padding:18px;border-radius:18px;background:linear-gradient(120deg,#eef5fa,#dbeaf3);color:#0b2338;margin:0 0 22px;border:1px solid #c7dce8}.science-context science-scene{width:110px;height:95px;flex:0 0 110px}.science-context h2{font:650 18px/1.3 system-ui;letter-spacing:-.5px;margin:0 0 5px;color:#0b2338}.science-context p{font:400 12px/1.6 system-ui;color:#4a6579;margin:0}.science-context .science-motion{margin-left:auto;background:#fff;color:#173e55;border-color:#b0c7d7}.science-context science-scene .scene-description{display:none}
/* .science-context defaults to a light card so it sits naturally on the
   light theme's white/light-gray surfaces instead of always forcing its own
   dark island (the bug: a fixed dark background regardless of page theme,
   with low-contrast light text floating inside an otherwise white page).
   Dark theme keeps the original moody gradient, which fits there instead. */
html[data-theme="dark"] .science-context{background:linear-gradient(120deg,#0b1c31,#123950);color:#e7f3fd;border-color:#6598af33}
html[data-theme="dark"] .science-context h2{color:#e7f3fd}
html[data-theme="dark"] .science-context p{color:#b4c9da}
html[data-theme="dark"] .science-context .science-motion{background:#183a4c;color:#c5f3e9;border-color:#4b8278}
@keyframes science-ripple{0%{opacity:.6;transform:scale(.45)}100%{opacity:0;transform:scale(1.7)}}
@media(max-width:600px){.scene-thumb{width:52px;height:52px;flex-basis:52px}.science-context{padding:13px;gap:10px;flex-wrap:wrap}.science-context science-scene{width:65px;height:65px;flex-basis:65px}.science-context>div{flex:1;min-width:160px}.science-context .science-motion{margin-left:75px}.science-context h2{font-size:16px}.science-context p{font-size:11px}.science-topic-card.trow{gap:8px!important}.science-topic-card.chapter-header .scene-thumb{width:38px;height:38px;flex-basis:38px}}
@media(prefers-reduced-motion:reduce){science-scene,.science-topic-card{transition:none!important}.scene-ripple::after{animation:none!important}.science-topic-card.trow:hover{transform:none}}