/* Lesson Studio v1 - subject agnostic interactive lesson scenes */
:root {
    --ls-primary: #8b5cf6;
    --ls-secondary: #22d3ee;
    --ls-success: #34d399;
    --ls-danger: #fb7185;
    --ls-warning: #fbbf24;
    --ls-surface: rgba(9, 16, 36, .92);
    --ls-border: rgba(148, 163, 184, .18);
}

.ls-scene {
    position: relative;
    width: 100%;
    min-height: 430px;
    padding: clamp(22px, 4vw, 42px);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--ls-border);
    border-radius: 28px;
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--ls-accent, var(--ls-primary)) 20%, transparent), transparent 32%),
        linear-gradient(145deg, rgba(15, 23, 42, .97), rgba(3, 7, 18, .98));
    box-shadow: 0 30px 90px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255,255,255,.06);
    transform: translateY(20px) scale(.985);
    opacity: 0;
    transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}

.ls-scene.active,
.ls-scene.ls-ready { opacity: 1; transform: none; }
.ls-scene[data-scene-animation="route-build"].ls-ready { animation:ls-scene-route .72s cubic-bezier(.16,1,.3,1) both; }
.ls-scene[data-scene-animation="energy-rise"].ls-ready { animation:ls-scene-energy .78s cubic-bezier(.16,1,.3,1) both; }
.ls-scene[data-scene-animation="speed-reveal"].ls-ready { animation:ls-scene-speed .64s cubic-bezier(.16,1,.3,1) both; }
.ls-scene[data-scene-animation="signal-pulse"].ls-ready { animation:ls-scene-signal .8s ease-out both; }
.ls-scene.passed { opacity: .74; }
.ls-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .2;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, #000, transparent 84%);
}

.ls-scene-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:28px; }
.ls-scene-kicker { display:flex; align-items:center; gap:9px; margin-bottom:9px; color:var(--ls-accent,var(--ls-secondary)); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.ls-scene-kicker i { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:color-mix(in srgb, var(--ls-accent,var(--ls-secondary)) 15%, transparent); }
.ls-scene-title { margin:0; color:#f8fafc; font-size:clamp(25px,3.4vw,42px); font-weight:850; line-height:1.08; letter-spacing:-.035em; }
.ls-scene-subtitle { max-width:720px; margin:10px 0 0; color:#94a3b8; font-size:14px; line-height:1.65; }
.ls-scene-tag { flex:0 0 auto; padding:8px 12px; border:1px solid var(--ls-border); border-radius:999px; color:#cbd5e1; background:rgba(15,23,42,.75); font-size:11px; font-weight:700; }
.ls-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px 16px; border:1px solid rgba(255,255,255,.12); border-radius:12px; color:#f8fafc; background:rgba(255,255,255,.07); font:700 13px 'Outfit',sans-serif; cursor:pointer; transition:.2s ease; }
.ls-action:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--ls-accent,var(--ls-primary)) 60%,white); background:rgba(255,255,255,.11); }
.ls-action.primary { border-color:transparent; background:linear-gradient(135deg,var(--ls-accent,var(--ls-primary)),#6366f1); box-shadow:0 12px 30px color-mix(in srgb,var(--ls-accent,var(--ls-primary)) 25%,transparent); }
.ls-action:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.ls-feedback { display:none; margin-top:18px; padding:14px 16px; border:1px solid var(--ls-border); border-radius:14px; color:#cbd5e1; background:rgba(15,23,42,.72); font-size:14px; line-height:1.55; }
.ls-feedback.show { display:block; animation:ls-pop .35s ease both; }
.ls-feedback.correct { border-color:rgba(52,211,153,.4); color:#a7f3d0; background:rgba(6,78,59,.2); }
.ls-feedback.wrong { border-color:rgba(251,113,133,.4); color:#fecdd3; background:rgba(136,19,55,.18); }
@keyframes ls-pop { from{opacity:0;transform:translateY(8px) scale(.98)} to{opacity:1;transform:none} }
@keyframes ls-scene-route { from{opacity:.2;transform:translateY(26px);clip-path:inset(0 0 18% 0 round 24px)} to{opacity:1;transform:none;clip-path:inset(0 round 24px)} }
@keyframes ls-scene-energy { 0%{opacity:.2;transform:scale(.965);filter:brightness(.8)} 70%{filter:brightness(1.08)} 100%{opacity:1;transform:none;filter:none} }
@keyframes ls-scene-speed { from{opacity:.12;transform:translateX(-55px) skewX(-2deg)} to{opacity:1;transform:none} }
@keyframes ls-scene-signal { 0%{opacity:.15;transform:scale(.96);box-shadow:0 0 0 0 color-mix(in srgb,var(--ls-accent) 35%,transparent)} 70%{box-shadow:0 0 0 16px transparent} 100%{opacity:1;transform:none} }

/* Blackboard */
.ls-board { position:relative; min-height:330px; padding:30px; overflow:hidden; border:10px solid #684a2d; border-radius:9px; color:#ecfccb; background:radial-gradient(circle at 30% 10%,#244e43,#102e29 65%,#0a201c); box-shadow:inset 0 0 50px rgba(0,0,0,.55),0 18px 40px rgba(0,0,0,.28); font-family:'Patrick Hand','Caveat',cursive; }
.ls-board::after { content:''; position:absolute; inset:0; opacity:.12; pointer-events:none; background-image:radial-gradient(#fff 0.7px,transparent .8px); background-size:9px 9px; }
.ls-board-step { position:relative; z-index:1; display:flex; gap:13px; align-items:flex-start; margin:0 0 18px; font-size:clamp(20px,2.4vw,29px); line-height:1.35; opacity:.06; transform:translateX(-16px); filter:blur(2px); transition:.6s ease; }
.ls-board-step.revealed { opacity:1; transform:none; filter:none; }
.ls-board-step .num { display:grid; flex:0 0 30px; place-items:center; width:30px; height:30px; margin-top:2px; border:2px solid #fde68a; border-radius:50%; color:#fde68a; font:700 16px 'Patrick Hand',cursive; }
.ls-board-note { position:absolute; right:22px; bottom:15px; z-index:2; max-width:210px; padding:10px 14px; color:#1e293b; background:#fde68a; box-shadow:4px 5px 0 rgba(0,0,0,.2); font:700 17px 'Caveat',cursive; opacity:0; transform:translateY(8px) rotate(-2deg); transition:.45s ease; }
.ls-board-note.revealed { opacity:1; transform:rotate(-2deg); }

/* Worked example */
.ls-worked-journey { --ls-journey-progress:5%; position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 18px; padding:13px 14px 11px; overflow:hidden; border:1px solid rgba(148,163,184,.22); border-radius:14px; background:linear-gradient(135deg,rgba(15,23,42,.86),rgba(30,41,59,.7)); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.ls-worked-journey-track { position:absolute; left:8%; right:8%; top:30px; height:3px; overflow:hidden; border-radius:999px; background:rgba(148,163,184,.18); }
.ls-worked-journey-track i { display:block; width:var(--ls-journey-progress); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--ls-accent),#38bdf8); box-shadow:0 0 13px color-mix(in srgb,var(--ls-accent) 55%,transparent); transition:width .65s cubic-bezier(.16,1,.3,1); }
.ls-worked-journey>span { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; color:#94a3b8; text-align:center; font-size:11px; font-weight:850; transition:color .3s ease,transform .3s ease; }
.ls-worked-journey>span b { display:grid; place-items:center; width:34px; height:34px; border:3px solid #334155; border-radius:50%; color:#94a3b8; background:#0f172a; box-shadow:0 0 0 4px rgba(15,23,42,.9); font:900 13px 'JetBrains Mono',monospace; transition:.35s cubic-bezier(.16,1,.3,1); }
.ls-worked-journey>span.is-complete { color:#cbd5e1; }
.ls-worked-journey>span.is-complete b { border-color:#22c55e; color:#052e16; background:#86efac; }
.ls-worked-journey>span.is-active { color:#fff; transform:translateY(-2px); }
.ls-worked-journey>span.is-active b { border-color:var(--ls-accent); color:#111827; background:var(--ls-accent); box-shadow:0 0 0 5px color-mix(in srgb,var(--ls-accent) 16%,transparent),0 0 22px color-mix(in srgb,var(--ls-accent) 38%,transparent); animation:ls-journey-pulse 1.8s ease-in-out infinite; }
.ls-scene[data-lesson-studio="worked-example"] .ls-scene-title { font-family:'Caveat','Patrick Hand',cursive; font-size:clamp(31px,4vw,48px); font-weight:800; letter-spacing:0; }
.ls-scene[data-lesson-studio="worked-example"] .ls-scene-kicker,
.ls-scene[data-lesson-studio="worked-example"] .ls-scene-tag,
.ls-scene[data-lesson-studio="worked-example"] .ls-worked-problem>span,
.ls-scene[data-lesson-studio="worked-example"] .ls-worked-result>span,
.ls-scene[data-lesson-studio="worked-example"] .ls-worked-given>strong,
.ls-scene[data-lesson-studio="worked-example"] .ls-worked-strategy strong,
.ls-scene[data-lesson-studio="worked-example"] .ls-worked-warning strong,
.ls-scene[data-lesson-studio="worked-example"] .ls-worked-transfer strong { font-family:'Caveat','Patrick Hand',cursive; font-size:18px; letter-spacing:0; }
.ls-worked-problem { position:relative; padding:22px 24px; border:1px solid color-mix(in srgb,var(--ls-accent) 55%,transparent); border-left:5px solid var(--ls-accent); border-radius:12px; background:linear-gradient(135deg,rgba(251,191,36,.13),rgba(15,23,42,.45)); }
.ls-worked-problem>span,.ls-worked-result>span { display:block; margin-bottom:8px; color:#fbbf24; font-size:11px; font-weight:900; letter-spacing:.14em; }
.ls-worked-problem p { margin:0; color:#f8fafc; font-size:clamp(17px,2vw,22px); font-weight:750; line-height:1.55; }
.ls-worked-given { margin-top:14px; padding:15px 18px; border:1px solid var(--ls-border); border-radius:10px; background:rgba(15,23,42,.58); }
.ls-worked-given>strong { display:block; margin-bottom:10px; color:#cbd5e1; font-size:12px; text-transform:uppercase; }
.ls-worked-given>div { display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:12px; }
.ls-worked-given>div>span { padding:7px 10px; border:1px solid rgba(148,163,184,.2); border-radius:7px; color:#e2e8f0; background:rgba(30,41,59,.72); font-family:'JetBrains Mono',monospace; font-size:13px; }
.ls-note-paper { position:relative; overflow:hidden; color:#24324a; background-color:#fffdf4; background-image:linear-gradient(90deg,transparent 0,transparent 34px,rgba(239,68,68,.2) 35px,transparent 36px),repeating-linear-gradient(180deg,transparent 0,transparent 29px,rgba(59,130,246,.16) 30px,transparent 31px); border:1px solid rgba(148,163,184,.36); box-shadow:0 9px 22px rgba(15,23,42,.1),inset 0 1px rgba(255,255,255,.9); }
.ls-note-paper::after { content:''; position:absolute; right:10px; top:0; width:42px; height:8px; background:rgba(251,191,36,.2); transform:rotate(2deg); pointer-events:none; }
.ls-given-note { min-height:112px; padding:13px 14px 13px 47px; border-radius:5px; }
.ls-written-line { position:relative; min-height:29px; padding:2px 30px 2px 0; color:#1d4ed8; font:700 20px 'Caveat','Patrick Hand',cursive; line-height:1.45; letter-spacing:0; opacity:.38; transition:opacity .2s ease,background .2s ease,transform .2s ease; }
.ls-written-line.ls-writing-current,.ls-written-line[data-written="1"] { opacity:1; }
.ls-written-line.ls-writing-current { background:linear-gradient(90deg,rgba(250,204,21,.16),transparent); transform:translateX(3px); }
.ls-note-main { color:#1e3a8a; font-size:22px; }
.ls-note-purpose { margin-top:4px; color:#475569; font-size:17px; font-weight:650; }
.ls-note-purpose::before { content:'Not: '; color:#b45309; font-weight:800; }
.ls-problem-writing { color:#111827; font-size:clamp(22px,2.5vw,30px); }
.ls-problem-focus { color:#7c2d12; font-size:18px; }
.ls-answer-writing { color:#166534; font-size:clamp(23px,2.7vw,32px); }
.ls-verification-writing { color:#166534; font-size:18px; }
.ls-step-explanation { color:#334155; font-size:19px; }
.ls-worked-step .ls-teacher-note { margin-top:5px; padding-left:12px; border-left:3px solid rgba(37,99,235,.3); color:#1e40af; font-size:17px; }
.ls-worked-strategy,.ls-worked-warning,.ls-worked-transfer { display:flex; gap:13px; align-items:flex-start; margin-top:14px; padding:15px 17px; border-radius:10px; }
.ls-worked-strategy { color:#dbeafe; background:rgba(37,99,235,.13); border:1px solid rgba(96,165,250,.28); }
.ls-worked-strategy>div { flex:1; min-width:0; }
.ls-worked-strategy.ls-strategy-current { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.12),0 18px 42px rgba(30,64,175,.12); }
.ls-strategy-board { display:grid; gap:6px; margin-top:7px; }
.ls-strategy-line { position:relative; min-height:28px; padding:3px 34px 5px 8px; border-bottom:1px solid rgba(96,165,250,.22); color:#bfdbfe; font:700 19px 'Caveat','Patrick Hand',sans-serif; line-height:1.3; opacity:.34; transition:opacity .25s ease,background .25s ease,transform .25s ease; }
.ls-strategy-line.ls-strategy-line-current { opacity:1; background:linear-gradient(90deg,rgba(59,130,246,.1),transparent); transform:translateX(3px); }
.ls-strategy-line[data-written="1"] { opacity:1; }
.ls-strategy-line .ls-writing-pen { top:-5px; }
.ls-worked-warning { color:#fee2e2; background:rgba(220,38,38,.1); border:1px solid rgba(248,113,113,.25); }
.ls-worked-transfer { color:#dcfce7; background:rgba(22,163,74,.1); border:1px solid rgba(74,222,128,.25); }
.ls-worked-strategy i,.ls-worked-warning i,.ls-worked-transfer i { margin-top:3px; font-size:17px; }
.ls-worked-strategy strong,.ls-worked-warning strong,.ls-worked-transfer strong { display:block; margin-bottom:3px; color:#fff; font-size:13px; }
.ls-worked-strategy p,.ls-worked-warning p,.ls-worked-transfer p { margin:0; font-size:14px; line-height:1.55; }
.ls-worked-steps { display:grid; gap:10px; margin-top:16px; }
.ls-worked-step { display:grid; grid-template-columns:40px minmax(0,1fr); gap:13px; padding:16px; border:1px solid var(--ls-border); border-radius:11px; background:rgba(15,23,42,.64); opacity:.08; transform:translateY(10px); filter:blur(2px); transition:.45s ease; }
.ls-worked-step.ls-note-paper { padding-left:48px; color:#24324a; background-color:#fffdf4; background-image:linear-gradient(90deg,transparent 0,transparent 34px,rgba(239,68,68,.2) 35px,transparent 36px),repeating-linear-gradient(180deg,transparent 0,transparent 29px,rgba(59,130,246,.16) 30px,transparent 31px); }
.ls-worked-step.revealed { opacity:1; transform:none; filter:none; border-color:color-mix(in srgb,var(--ls-accent) 42%,var(--ls-border)); }
.ls-worked-step.ls-step-current { position:relative; z-index:2; border-color:var(--ls-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--ls-accent) 13%,transparent),0 18px 42px rgba(15,23,42,.18); background:color-mix(in srgb,var(--ls-accent) 9%,rgba(15,23,42,.9)); }
.ls-worked-step.ls-step-current .ls-worked-step-no { animation:ls-step-number 1.25s ease-in-out infinite; }
.ls-worked-step.ls-step-complete { opacity:.7; filter:saturate(.72); }
.ls-worked-step.ls-step-animate[data-animation="path-draw"] { animation:ls-path-draw var(--ls-step-duration,.62s) cubic-bezier(.2,.8,.2,1) both; }
.ls-worked-step.ls-step-animate[data-animation="ion-flow"] { animation:ls-ion-flow var(--ls-step-duration,.62s) cubic-bezier(.16,1,.3,1) both; }
.ls-worked-step.ls-step-animate[data-animation="speed-lines"] { animation:ls-speed-lines var(--ls-step-duration,.62s) cubic-bezier(.16,1,.3,1) both; }
.ls-worked-step.ls-step-animate[data-animation="synapse-pulse"] { animation:ls-synapse-pulse var(--ls-step-duration,.62s) ease-out both; }
.ls-worked-step.ls-step-animate[data-animation="rise"] { animation:ls-worked-rise var(--ls-step-duration,.62s) cubic-bezier(.16,1,.3,1) both; }
.ls-worked-step[data-animation="ion-flow"].ls-step-current .ls-worked-operation { background-image:linear-gradient(90deg,#fef3c7,#fff7d6,#fbbf24,#fef3c7); background-size:220% 100%; animation:ls-operation-flow 1.8s linear infinite; }
.ls-worked-step[data-animation="synapse-pulse"].ls-step-current .ls-worked-operation { animation:ls-operation-pulse 1.35s ease-in-out infinite; }
.ls-worked-step-no { display:grid; place-items:center; width:36px; height:36px; border-radius:8px; color:#111827; background:#fbbf24; font-weight:950; }
.ls-worked-step-label { color:#f8fafc; font-size:14px; font-weight:900; }
.ls-worked-operation { width:fit-content; max-width:100%; margin:7px 0; padding:8px 11px; overflow-wrap:anywhere; border-radius:7px; color:#fde68a; background:#020617; font:700 15px 'JetBrains Mono',monospace; }
.ls-worked-operation.ls-handwriting { position:relative; min-width:72px; min-height:42px; padding-right:38px; overflow:visible; color:#92400e; background:linear-gradient(180deg,#fffdf5,#fff8dd); border:1px solid rgba(245,158,11,.2); box-shadow:inset 0 -1px 0 rgba(245,158,11,.18); font:700 21px 'Caveat','Patrick Hand','JetBrains Mono',monospace; line-height:1.2; }
.ls-worked-operation.ls-has-visual-cues { min-height:68px; padding-bottom:30px; }
.ls-visual-cue { position:relative; display:inline-block; z-index:2; padding:0 2px; color:#78350f; }
.ls-cue-circle::after,.ls-cue-box::after { content:''; position:absolute; inset:-5px -7px; border:2px solid #dc2626; pointer-events:none; transform:scale(.65) rotate(-3deg); opacity:0; animation:ls-cue-mark .48s .08s cubic-bezier(.16,1,.3,1) forwards; }
.ls-cue-circle::after { border-radius:50%; }
.ls-cue-box::after { border-color:#2563eb; border-radius:3px; transform:scale(.65) rotate(1deg); }
.ls-cue-underline { background-image:linear-gradient(#2563eb,#2563eb); background-repeat:no-repeat; background-position:left calc(100% - 1px); background-size:0 2px; animation:ls-cue-underline .55s .08s ease-out forwards; }
.ls-cue-highlight { border-radius:3px; background:linear-gradient(100deg,rgba(250,204,21,.08),rgba(250,204,21,.55),rgba(250,204,21,.14)); background-size:0 100%; background-repeat:no-repeat; animation:ls-cue-highlight .55s .08s ease-out forwards; }
.ls-cue-strike { text-decoration:line-through 2px #dc2626; text-decoration-skip-ink:none; }
.ls-cue-anchor { color:#1d4ed8; font-weight:800; }
.ls-cue-svg { position:absolute; inset:0; z-index:3; overflow:visible; pointer-events:none; }
.ls-cue-arrow-path { fill:none; stroke:#2563eb; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:180; stroke-dashoffset:180; animation:ls-cue-arrow-draw .72s .18s ease-out forwards; }
.ls-cue-arrow-head { fill:#2563eb; opacity:0; animation:ls-cue-arrow-head .2s .82s ease-out forwards; }
.ls-cue-arrow-label { fill:#1e40af; text-anchor:middle; font:700 12px 'Caveat','Patrick Hand',cursive; opacity:0; animation:ls-cue-arrow-head .25s .86s ease-out forwards; }
.ls-worked-operation.ls-handwriting::after { content:''; position:absolute; left:9px; right:9px; bottom:7px; height:1px; background:rgba(59,130,246,.16); transform-origin:left; transform:scaleX(0); }
.ls-worked-operation.ls-handwriting.is-writing::after { animation:ls-writing-line 1.2s ease-out forwards; }
.ls-writing-pen { display:none; position:relative; top:-7px; margin-left:3px; color:#2563eb; font-size:18px; filter:drop-shadow(0 3px 3px rgba(15,23,42,.2)); transform:rotate(-22deg); transform-origin:20% 80%; }
.ls-handwriting.is-writing .ls-writing-pen { display:inline-block; animation:ls-pen-write .2s ease-in-out infinite alternate; }
.ls-writing-pen[data-pen="marker"] { color:#7c3aed; transform:rotate(-12deg); }
.ls-writing-pen[data-pen="pencil"] { color:#b45309; }
.ls-worked-step p { margin:5px 0 0; color:#cbd5e1; font-size:14px; line-height:1.6; }
.ls-worked-why { margin-top:6px; color:#1d4ed8; font-size:17px; line-height:1.45; }
.ls-worked-result { margin-top:16px; padding:18px 20px; border:1px solid rgba(74,222,128,.35); border-radius:11px; background:linear-gradient(135deg,rgba(22,163,74,.15),rgba(15,23,42,.5)); opacity:.08; transform:scale(.98); transition:.45s ease; }
.ls-worked-result.revealed { opacity:1; transform:none; }
.ls-worked-result.ls-outcome-current,.ls-worked-warning.ls-outcome-current,.ls-worked-transfer.ls-outcome-current { position:relative; z-index:3; animation:ls-outcome-focus .68s cubic-bezier(.16,1,.3,1) both; box-shadow:0 0 0 3px color-mix(in srgb,var(--ls-accent) 16%,transparent),0 18px 45px rgba(15,23,42,.16); }
.ls-worked-result strong { display:block; color:#86efac; font:900 clamp(18px,2.4vw,25px) 'JetBrains Mono',monospace; overflow-wrap:anywhere; }
.ls-worked-result p { margin:9px 0 0; color:#bbf7d0; font-size:13px; line-height:1.55; }
.ls-worked-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:15px; }
.ls-worked-controls>span { color:#94a3b8; font-size:12px; font-weight:800; }
@media(max-width:640px){.ls-worked-step{grid-template-columns:32px minmax(0,1fr);padding:13px}.ls-worked-step.ls-note-paper{padding-left:42px}.ls-worked-step-no{width:30px;height:30px}.ls-worked-controls{align-items:stretch;flex-direction:column}.ls-worked-controls .ls-action{width:100%;justify-content:center}}
@media(max-width:640px){.ls-worked-journey{gap:4px;padding-inline:8px}.ls-worked-journey>span{font-size:9px}.ls-worked-journey>span b{width:29px;height:29px}.ls-worked-journey-track{top:27px}}
body.lesson-light-theme .ls-worked-problem,body.lesson-light-theme .ls-worked-given,body.lesson-light-theme .ls-worked-step { color:#1e293b; background:#fff; border-color:rgba(15,23,42,.13); }
body.lesson-light-theme .ls-worked-journey { background:linear-gradient(135deg,#f8fafc,#eef2ff); border-color:rgba(15,23,42,.12); }
body.lesson-light-theme .ls-worked-journey-track { background:rgba(100,116,139,.2); }
body.lesson-light-theme .ls-worked-journey>span { color:#64748b; }
body.lesson-light-theme .ls-worked-journey>span.is-active { color:#0f172a; }
body.lesson-light-theme .ls-worked-journey>span b { background:#fff; box-shadow:0 0 0 4px rgba(248,250,252,.94); }
body.lesson-light-theme .ls-worked-problem p,body.lesson-light-theme .ls-worked-step-label { color:#0f172a; }
body.lesson-light-theme .ls-worked-step p,body.lesson-light-theme .ls-worked-given>div>span { color:#475569; }
body.lesson-light-theme .ls-worked-given>div>span { background:#f8fafc; }
body.lesson-light-theme .ls-note-paper { color:#24324a; background-color:#fffdf4; }
body.lesson-light-theme .ls-worked-operation { color:#854d0e; background:#fefce8; }
body.lesson-light-theme .ls-worked-strategy { color:#1e40af; background:#eff6ff; }
body.lesson-light-theme .ls-strategy-line { color:#1e40af; border-color:rgba(37,99,235,.18); }
body.lesson-light-theme .ls-worked-warning { color:#991b1b; background:#fef2f2; }
body.lesson-light-theme .ls-worked-transfer { color:#166534; background:#f0fdf4; }
body.lesson-light-theme .ls-worked-strategy strong,body.lesson-light-theme .ls-worked-warning strong,body.lesson-light-theme .ls-worked-transfer strong { color:#0f172a; }
body.lesson-light-theme .ls-worked-result { background:#f0fdf4; }
body.lesson-light-theme .ls-worked-result strong { color:#166534; }
body.lesson-light-theme .ls-worked-result p { color:#15803d; }
@keyframes ls-worked-rise { from{opacity:.15;transform:translateY(34px) scale(.97);filter:blur(5px)} to{opacity:1;transform:none;filter:none} }
@keyframes ls-path-draw { 0%{opacity:.15;transform:translateX(-36px);clip-path:inset(0 100% 0 0)} 65%{clip-path:inset(0)} 100%{opacity:1;transform:none} }
@keyframes ls-ion-flow { 0%{opacity:.12;transform:translateX(-45px) rotate(-.6deg)} 60%{transform:translateX(6px) rotate(.2deg)} 100%{opacity:1;transform:none} }
@keyframes ls-speed-lines { 0%{opacity:.1;transform:translateX(-70px) skewX(-4deg)} 70%{transform:translateX(7px) skewX(1deg)} 100%{opacity:1;transform:none} }
@keyframes ls-synapse-pulse { 0%{opacity:.12;transform:scale(.92);box-shadow:0 0 0 0 color-mix(in srgb,var(--ls-accent) 40%,transparent)} 65%{opacity:1;box-shadow:0 0 0 14px transparent} 100%{transform:none} }
@keyframes ls-step-number { 50%{transform:scale(1.1);box-shadow:0 0 0 8px color-mix(in srgb,var(--ls-accent) 12%,transparent)} }
@keyframes ls-journey-pulse { 50%{transform:scale(1.08);box-shadow:0 0 0 8px color-mix(in srgb,var(--ls-accent) 8%,transparent),0 0 26px color-mix(in srgb,var(--ls-accent) 45%,transparent)} }
@keyframes ls-operation-flow { to{background-position:-220% 0} }
@keyframes ls-operation-pulse { 50%{transform:scale(1.025);box-shadow:0 0 18px color-mix(in srgb,var(--ls-accent) 32%,transparent)} }
@keyframes ls-outcome-focus { from{opacity:.25;transform:translateY(22px) scale(.975)} to{opacity:1;transform:none} }
@keyframes ls-pen-write { from{transform:translateY(-1px) rotate(-25deg)} to{transform:translateY(2px) rotate(-18deg)} }
@keyframes ls-writing-line { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes ls-cue-mark { to{opacity:1;transform:scale(1) rotate(-2deg)} }
@keyframes ls-cue-underline { to{background-size:100% 2px} }
@keyframes ls-cue-highlight { to{background-size:100% 100%} }
@keyframes ls-cue-arrow-draw { to{stroke-dashoffset:0} }
@keyframes ls-cue-arrow-head { to{opacity:1} }

/* Universal pedagogy cards */
.ls-pedagogy-shell { display:grid; gap:15px; }
.ls-pedagogy-journey { --ls-pedagogy-progress:4%; position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:12px 10px 10px; overflow:hidden; border:1px solid rgba(148,163,184,.22); border-radius:14px; background:rgba(15,23,42,.6); }
.ls-pedagogy-journey::before { content:''; position:absolute; left:8%; right:8%; top:29px; height:3px; border-radius:999px; background:rgba(148,163,184,.2); }
.ls-pedagogy-journey>i { position:absolute; left:8%; top:29px; z-index:1; width:var(--ls-pedagogy-progress); max-width:84%; height:3px; border-radius:999px; background:linear-gradient(90deg,var(--ls-accent),#22d3ee); box-shadow:0 0 14px color-mix(in srgb,var(--ls-accent) 48%,transparent); transition:width .65s cubic-bezier(.16,1,.3,1); }
.ls-pedagogy-journey>span { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:5px; color:#94a3b8; text-align:center; font-size:10px; font-weight:850; transition:.3s ease; }
.ls-pedagogy-journey>span b { display:grid; place-items:center; width:34px; height:34px; border:3px solid #334155; border-radius:50%; color:#94a3b8; background:#0f172a; box-shadow:0 0 0 4px rgba(15,23,42,.9); transition:.35s cubic-bezier(.16,1,.3,1); }
.ls-pedagogy-journey>span.is-active { color:#fff; transform:translateY(-2px); }
.ls-pedagogy-journey>span.is-active b { color:#111827; border-color:var(--ls-accent); background:var(--ls-accent); box-shadow:0 0 0 6px color-mix(in srgb,var(--ls-accent) 13%,transparent),0 0 22px color-mix(in srgb,var(--ls-accent) 42%,transparent); animation:ls-pedagogy-phase 1.8s ease-in-out infinite; }
.ls-pedagogy-journey>span.is-complete b { color:#052e16; border-color:#4ade80; background:#86efac; }
.ls-pedagogy-stage { position:relative; display:grid; grid-template-columns:96px minmax(0,1fr); gap:18px; align-items:center; min-height:160px; padding:22px; overflow:hidden; border:1px solid color-mix(in srgb,var(--ls-accent) 34%,transparent); border-radius:18px; background:radial-gradient(circle at 7% 25%,color-mix(in srgb,var(--ls-accent) 22%,transparent),transparent 32%),linear-gradient(135deg,rgba(15,23,42,.92),rgba(30,41,59,.7)); box-shadow:0 18px 42px rgba(15,23,42,.16); }
.ls-pedagogy-stage::after { content:''; position:absolute; inset:0; opacity:.13; pointer-events:none; background-image:linear-gradient(120deg,transparent 0 46%,rgba(255,255,255,.18) 49%,transparent 52%); background-size:220% 100%; animation:ls-pedagogy-sheen 5s linear infinite; }
.ls-pedagogy-orb { position:relative; display:grid; place-items:center; width:78px; height:78px; border-radius:24px; color:#fff; background:linear-gradient(145deg,color-mix(in srgb,var(--ls-accent) 78%,white),var(--ls-accent)); box-shadow:0 16px 32px color-mix(in srgb,var(--ls-accent) 28%,transparent); }
.ls-pedagogy-orb>span { position:absolute; inset:-9px; border:2px dashed color-mix(in srgb,var(--ls-accent) 55%,white); border-radius:29px; opacity:.58; animation:ls-pedagogy-orbit 9s linear infinite; }
.ls-pedagogy-orb>i { font-size:31px; animation:ls-pedagogy-icon 2.2s ease-in-out infinite; }
.ls-pedagogy-focus { position:relative; z-index:1; min-width:0; }
.ls-pedagogy-focus>small { display:block; margin-bottom:7px; color:color-mix(in srgb,var(--ls-accent) 65%,white); font-size:10px; font-weight:950; letter-spacing:.16em; }
.ls-pedagogy-focus-line { margin:5px 0; color:#f8fafc; font-size:clamp(17px,2vw,24px); font-weight:720; line-height:1.48; opacity:.12; transform:translateX(24px); filter:blur(2px); transition:.55s cubic-bezier(.16,1,.3,1); }
.ls-pedagogy-focus-line.revealed { opacity:1; transform:none; filter:none; }
.ls-pedagogy-focus-line.ls-pedagogy-current { padding-left:11px; border-left:4px solid var(--ls-accent); text-shadow:0 0 20px color-mix(in srgb,var(--ls-accent) 25%,transparent); }
.ls-pedagogy-written { position:relative; min-height:52px; padding:8px 38px 8px 13px; border-bottom:2px solid rgba(96,165,250,.3); color:#fef3c7; font:800 clamp(24px,3vw,37px) 'Caveat','Patrick Hand',cursive; line-height:1.25; opacity:.16; transition:.35s ease; }
.ls-pedagogy-written.revealed,.ls-pedagogy-written[data-written="1"] { opacity:1; }
.ls-pedagogy-translation { width:fit-content; margin-top:11px; padding:8px 12px; border:1px solid rgba(45,212,191,.25); border-radius:10px; color:#ccfbf1; background:rgba(13,148,136,.12); font-size:14px; opacity:.08; transform:translateY(9px); transition:.45s ease; }
.ls-pedagogy-translation i { margin-right:8px; color:#2dd4bf; }
.ls-pedagogy-translation.revealed { opacity:1; transform:none; }
.ls-pedagogy-explanation,.ls-pedagogy-teacher-steps { padding:16px 18px; border:1px solid rgba(148,163,184,.2); border-radius:14px; color:#cbd5e1; background:rgba(15,23,42,.62); opacity:.08; transform:translateY(15px); filter:blur(2px); transition:.5s cubic-bezier(.16,1,.3,1); }
.ls-pedagogy-explanation.revealed,.ls-pedagogy-teacher-steps.revealed { opacity:1; transform:none; filter:none; }
.ls-pedagogy-explanation.ls-pedagogy-current,.ls-pedagogy-teacher-steps.ls-pedagogy-current { border-color:var(--ls-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--ls-accent) 11%,transparent); }
.ls-pedagogy-explanation strong,.ls-pedagogy-teacher-steps>strong { display:block; margin-bottom:7px; color:#fff; font-size:13px; }
.ls-pedagogy-explanation p { margin:0; font-size:14px; line-height:1.65; }
.ls-pedagogy-teacher-steps { display:grid; gap:8px; }
.ls-pedagogy-teacher-step { display:grid; grid-template-columns:29px minmax(0,1fr); gap:9px; align-items:start; }
.ls-pedagogy-teacher-step b { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; color:#111827; background:var(--ls-accent); font-size:11px; }
.ls-pedagogy-teacher-step span { padding-top:3px; font-size:13px; line-height:1.55; }
.ls-pedagogy-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.ls-pedagogy-controls>span { color:#94a3b8; font-size:11px; font-weight:850; }
.ls-pedagogy-shell[data-pedagogy-variant="memory"] .ls-pedagogy-stage { background:radial-gradient(circle at 8% 20%,rgba(251,191,36,.24),transparent 34%),linear-gradient(135deg,#29200d,#422006); }
.ls-pedagogy-shell[data-pedagogy-variant="rule"] .ls-pedagogy-stage { background:radial-gradient(circle at 8% 20%,rgba(167,139,250,.25),transparent 34%),linear-gradient(135deg,#21143d,#312e81); }
.ls-pedagogy-shell[data-pedagogy-variant="language"] .ls-pedagogy-stage { background:radial-gradient(circle at 8% 20%,rgba(45,212,191,.24),transparent 34%),linear-gradient(135deg,#092f35,#134e4a); }
.ls-pedagogy-shell[data-pedagogy-variant="formula"] .ls-pedagogy-stage { background:radial-gradient(circle at 8% 20%,rgba(129,140,248,.26),transparent 34%),linear-gradient(135deg,#172554,#1e1b4b); }

/* Animated dimensions shared by every card */
.teaching-dimension-card { position:relative; overflow:hidden; opacity:1; transform:none; filter:none; transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1),filter .5s ease,box-shadow .35s ease,max-height .5s ease,padding .35s ease,margin .35s ease; transition-delay:calc(var(--dimension-index,0) * 55ms); }
.ls-scene[data-lesson-studio="pedagogy-card"] .teaching-dimension-card:not(.revealed) { opacity:.15; transform:translateY(15px) scale(.985); filter:blur(2px); }
.ls-scene:not([data-lesson-studio="pedagogy-card"]).ls-ready .teaching-dimension-card { animation:ls-dimension-rise .48s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--dimension-index,0) * 70ms + 180ms); }
.teaching-dimension-card::after { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--dimension-color,#6366f1); transform:scaleY(0); transform-origin:top; transition:transform .55s ease; }
.teaching-dimension-card.revealed { opacity:1; transform:none; filter:none; }
.teaching-dimension-card.revealed::after { transform:scaleY(1); }
.teaching-dimension-card.ls-pedagogy-current,.teaching-dimension-card:focus { outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--dimension-color,#6366f1) 14%,transparent),0 16px 34px rgba(15,23,42,.12); }
.teaching-dimension-card.ls-pedagogy-complete { opacity:.78; }
.teaching-dimension-title i { transition:transform .4s cubic-bezier(.16,1,.3,1); }
.teaching-dimension-card.revealed .teaching-dimension-title i { transform:rotate(-8deg) scale(1.12); }
.teaching-anatomy-row { opacity:0; transform:translateX(-8px); animation:ls-anatomy-row .38s ease forwards; }
.teaching-dimension-card.revealed .teaching-anatomy-row:nth-child(2){animation-delay:.09s}.teaching-dimension-card.revealed .teaching-anatomy-row:nth-child(3){animation-delay:.18s}.teaching-dimension-card.revealed .teaching-anatomy-row:nth-child(4){animation-delay:.27s}.teaching-dimension-card.revealed .teaching-anatomy-row:nth-child(5){animation-delay:.36s}
.teaching-dimension-card.ls-dimension-locked { max-height:0!important; margin-block:0!important; padding-top:0!important; padding-bottom:0!important; border-width:0!important; opacity:0!important; pointer-events:none; transform:translateY(-7px) scale(.98); }

/* Pedagogical motion layer for legacy practice cards */
.ls-practice-stage { --practice-accent:#7c3aed; position:relative; }
.ls-practice-journey { position:relative; display:grid; gap:8px; margin-bottom:15px; padding:12px 14px; border:1px solid rgba(124,58,237,.16); border-radius:14px; background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(37,99,235,.05)); overflow:hidden; }
.ls-practice-title { display:flex; align-items:center; gap:8px; color:#4c1d95; font-size:11px; font-weight:900; letter-spacing:.05em; }
.ls-practice-title i { color:var(--practice-accent); animation:ls-practice-icon 2s ease-in-out infinite; }
.ls-practice-track { height:3px; overflow:hidden; border-radius:999px; background:rgba(100,116,139,.18); }
.ls-practice-track i { display:block; width:8%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--practice-accent),#2563eb); transition:width .55s cubic-bezier(.16,1,.3,1); }
.ls-practice-journey[data-practice-phase="act"] .ls-practice-track i { width:52%; }
.ls-practice-journey[data-practice-phase="reflect"] .ls-practice-track i { width:100%; }
.ls-practice-phases { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ls-practice-phases span { display:flex; align-items:center; justify-content:center; gap:6px; color:#64748b; font-size:10px; font-weight:850; transition:.3s ease; }
.ls-practice-phases b { display:grid; place-items:center; width:23px; height:23px; border:2px solid #cbd5e1; border-radius:50%; background:#fff; font-size:9px; transition:.3s ease; }
.ls-practice-phases span.is-active { color:#4c1d95; transform:translateY(-1px); }
.ls-practice-phases span.is-active b { color:#fff; border-color:var(--practice-accent); background:var(--practice-accent); box-shadow:0 0 0 5px rgba(124,58,237,.09); }
.ls-practice-phases span.is-complete b { color:#14532d; border-color:#4ade80; background:#bbf7d0; }
.ls-practice-journey.is-correct { --practice-accent:#16a34a; }
.ls-practice-stage .q-prompt { animation:ls-practice-prompt .58s cubic-bezier(.16,1,.3,1) both; }
.ls-practice-stage .mcq-option,.ls-practice-stage .tf-btn,.ls-practice-stage .fill-input-row,.ls-practice-stage .transform-side,.ls-practice-stage .error-side { animation:ls-practice-choice .48s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--practice-order,0) * 85ms + 120ms); }
.ls-practice-stage[data-legacy-variant="tf"] .tf-btn { animation-name:ls-practice-scale; }
.ls-practice-stage[data-legacy-variant="fill"] .fill-input-row { animation-name:ls-practice-focus; }
.ls-practice-stage[data-legacy-variant="transform"] .transform-arrow { animation:ls-transform-flow 1.6s ease-in-out infinite; }
.ls-practice-stage[data-legacy-variant="error"] .error-side.wrong { animation:ls-error-diagnose 2.6s ease-in-out infinite; }
.ls-legacy-motion:not(.ls-practice-stage)>* { animation:ls-legacy-rise .5s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--legacy-order,0) * 75ms); }

@keyframes ls-pedagogy-phase { 50%{transform:scale(1.08)} }
@keyframes ls-pedagogy-sheen { to{background-position:-220% 0} }
@keyframes ls-pedagogy-orbit { to{transform:rotate(360deg)} }
@keyframes ls-pedagogy-icon { 50%{transform:translateY(-4px) rotate(-4deg)} }
@keyframes ls-anatomy-row { to{opacity:1;transform:none} }
@keyframes ls-dimension-rise { from{opacity:.12;transform:translateY(16px) scale(.985);filter:blur(2px)} to{opacity:1;transform:none;filter:none} }
@keyframes ls-practice-icon { 50%{transform:scale(1.13) rotate(-7deg)} }
@keyframes ls-practice-prompt { from{opacity:.18;transform:translateY(18px);filter:blur(3px)} to{opacity:1;transform:none;filter:none} }
@keyframes ls-practice-choice { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:none} }
@keyframes ls-practice-scale { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:none} }
@keyframes ls-practice-focus { from{opacity:0;transform:translateY(15px);box-shadow:0 0 0 0 rgba(124,58,237,0)} to{opacity:1;transform:none;box-shadow:0 0 0 5px rgba(124,58,237,.06)} }
@keyframes ls-transform-flow { 50%{transform:scale(1.12) rotate(8deg);color:#7c3aed} }
@keyframes ls-error-diagnose { 8%,18%{transform:translateX(-3px)} 13%,23%{transform:translateX(3px)} 30%,100%{transform:none} }
@keyframes ls-legacy-rise { from{opacity:.1;transform:translateY(17px)} to{opacity:1;transform:none} }

body.lesson-light-theme .ls-pedagogy-journey { background:#f8fafc; border-color:rgba(15,23,42,.12); }
body.lesson-light-theme .ls-pedagogy-journey>span { color:#64748b; }
body.lesson-light-theme .ls-pedagogy-journey>span.is-active { color:#0f172a; }
body.lesson-light-theme .ls-pedagogy-journey>span b { background:#fff; box-shadow:0 0 0 4px #f8fafc; }
body.lesson-light-theme .ls-pedagogy-explanation,body.lesson-light-theme .ls-pedagogy-teacher-steps { color:#334155; background:#f8fafc; border-color:rgba(15,23,42,.12); }
body.lesson-light-theme .ls-pedagogy-explanation strong,body.lesson-light-theme .ls-pedagogy-teacher-steps>strong { color:#0f172a; }

@media(max-width:640px){
    .ls-pedagogy-stage{grid-template-columns:1fr;padding:18px}.ls-pedagogy-orb{width:60px;height:60px;border-radius:19px}.ls-pedagogy-orb>span{border-radius:24px}.ls-pedagogy-orb>i{font-size:24px}
    .ls-pedagogy-journey{padding-inline:6px}.ls-pedagogy-journey>span{font-size:9px}.ls-pedagogy-journey>span b{width:29px;height:29px}.ls-pedagogy-journey::before,.ls-pedagogy-journey>i{top:26px}
    .ls-pedagogy-controls{align-items:stretch;flex-direction:column}.ls-pedagogy-controls .ls-action{width:100%;justify-content:center}.ls-practice-phases span{font-size:9px;gap:3px}.ls-practice-phases b{width:20px;height:20px}
}

/* Concept map */
.ls-map { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:center; min-height:330px; }
.ls-map-center { grid-column:2; grid-row:2; z-index:3; padding:26px 18px; border:1px solid color-mix(in srgb,var(--ls-accent) 65%,white); border-radius:50%; text-align:center; color:#fff; background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--ls-accent) 75%,white),var(--ls-accent)); box-shadow:0 0 50px color-mix(in srgb,var(--ls-accent) 35%,transparent); font-size:20px; font-weight:850; }
.ls-map-node { position:relative; z-index:2; min-height:92px; padding:16px; border:1px solid var(--ls-border); border-radius:18px; color:#e2e8f0; background:rgba(15,23,42,.86); text-align:left; cursor:pointer; transition:.25s ease; }
.ls-map-node:hover,.ls-map-node.open { transform:translateY(-4px); border-color:var(--ls-accent); box-shadow:0 16px 35px rgba(0,0,0,.28); }
.ls-map-node strong { display:block; color:#fff; font-size:15px; }
.ls-map-node span { display:block; max-height:0; margin-top:0; overflow:hidden; color:#94a3b8; font-size:13px; line-height:1.5; transition:.3s ease; }
.ls-map-node.open span { max-height:130px; margin-top:8px; }
.ls-map-node:nth-of-type(1){grid-column:1;grid-row:1}.ls-map-node:nth-of-type(2){grid-column:3;grid-row:1}.ls-map-node:nth-of-type(3){grid-column:1;grid-row:3}.ls-map-node:nth-of-type(4){grid-column:3;grid-row:3}.ls-map-node:nth-of-type(n+5){grid-column:2}

/* Compare */
.ls-compare { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:stretch; }
.ls-compare-side { position:relative; padding:24px; border:1px solid var(--ls-border); border-radius:20px; background:rgba(15,23,42,.72); }
.ls-compare-side.good { border-color:rgba(52,211,153,.28); background:linear-gradient(145deg,rgba(6,78,59,.2),rgba(15,23,42,.8)); }
.ls-compare-side.bad { border-color:rgba(251,113,133,.28); background:linear-gradient(145deg,rgba(136,19,55,.18),rgba(15,23,42,.8)); }
.ls-compare-label { display:flex; align-items:center; gap:9px; margin-bottom:17px; color:var(--ls-accent); font-weight:850; font-size:16px; }
.ls-compare-list { display:grid; gap:11px; }
.ls-compare-item { padding:11px 13px; border-radius:11px; color:#cbd5e1; background:rgba(255,255,255,.045); font-size:14px; line-height:1.5; opacity:0; transform:translateY(10px); }
.ls-ready .ls-compare-item { animation:ls-pop .45s ease forwards; animation-delay:calc(var(--i) * .11s); }
.ls-compare-vs { align-self:center; display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--ls-border); border-radius:50%; color:#fff; background:#111827; font-weight:900; }

/* Timeline */
.ls-timeline { position:relative; display:flex; gap:22px; padding:40px 8px 16px; overflow-x:auto; scrollbar-width:thin; }
.ls-timeline::before { content:''; position:absolute; top:56px; left:25px; right:25px; height:3px; background:linear-gradient(90deg,var(--ls-accent),#22d3ee); }
.ls-time-event { position:relative; flex:1 0 150px; padding:48px 0 0; border:0; color:#cbd5e1; background:none; text-align:left; font:inherit; cursor:pointer; }
.ls-time-dot { position:absolute; top:4px; left:6px; display:grid; place-items:center; width:28px; height:28px; border:5px solid #0f172a; border-radius:50%; background:var(--ls-accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--ls-accent) 45%,transparent); transition:.25s ease; }
.ls-time-event:hover .ls-time-dot,.ls-time-event.open .ls-time-dot { transform:scale(1.25); box-shadow:0 0 24px var(--ls-accent); }
.ls-time-date { color:var(--ls-accent); font-size:12px; font-weight:850; letter-spacing:.08em; }
.ls-time-title { margin:6px 0; color:#fff; font-weight:800; }
.ls-time-detail { max-height:0; overflow:hidden; color:#94a3b8; font-size:13px; line-height:1.5; transition:.3s ease; }
.ls-time-event.open .ls-time-detail { max-height:150px; }

/* Drag and drop */
.ls-dnd-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:22px; }
.ls-dnd-bank,.ls-drop-grid { display:grid; align-content:start; gap:11px; padding:18px; border:1px solid var(--ls-border); border-radius:18px; background:rgba(15,23,42,.58); }
.ls-dnd-bank::before,.ls-drop-grid::before { content:attr(data-label); margin-bottom:4px; color:#64748b; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.ls-drag { padding:12px 14px; border:1px solid rgba(139,92,246,.3); border-radius:11px; color:#e9d5ff; background:rgba(91,33,182,.18); cursor:grab; user-select:none; transition:.2s ease; }
.ls-drag:hover { transform:translateY(-2px); border-color:#a78bfa; }
.ls-drag.dragging { opacity:.4; }
.ls-drop { min-height:62px; padding:10px; border:1px dashed #475569; border-radius:13px; color:#94a3b8; background:rgba(2,6,23,.35); }
.ls-drop.over { border-color:var(--ls-accent); background:color-mix(in srgb,var(--ls-accent) 10%,transparent); }
.ls-drop.correct { border-color:var(--ls-success); background:rgba(6,78,59,.18); }
.ls-drop.wrong { border-color:var(--ls-danger); background:rgba(136,19,55,.16); }
.ls-drop-label { display:block; margin-bottom:7px; color:#cbd5e1; font-size:12px; font-weight:800; }

/* Hotspots */
.ls-hotspot-stage { position:relative; min-height:360px; overflow:hidden; border:1px solid var(--ls-border); border-radius:20px; background:#020617; }
.ls-hotspot-stage img { display:block; width:100%; height:420px; object-fit:contain; opacity:.92; }
.ls-hotspot-fallback { display:grid; place-items:center; width:100%; height:390px; color:#64748b; background:radial-gradient(circle,#1e293b,#020617); font-size:70px; }
.ls-hotspot { position:absolute; left:var(--x); top:var(--y); display:grid; place-items:center; width:30px; height:30px; border:2px solid #fff; border-radius:50%; color:#fff; background:var(--ls-accent); box-shadow:0 0 0 7px color-mix(in srgb,var(--ls-accent) 25%,transparent),0 0 30px var(--ls-accent); cursor:pointer; animation:ls-pulse 1.8s infinite; }
.ls-hotspot-panel { position:absolute; left:18px; right:18px; bottom:18px; padding:16px 18px; border:1px solid var(--ls-border); border-radius:15px; color:#cbd5e1; background:rgba(2,6,23,.92); backdrop-filter:blur(12px); transform:translateY(130%); transition:.35s ease; }
.ls-hotspot-panel.show { transform:none; }
.ls-hotspot-panel strong { display:block; margin-bottom:4px; color:#fff; }
@keyframes ls-pulse { 50%{box-shadow:0 0 0 13px transparent,0 0 35px var(--ls-accent)} }

/* Animated science scenes */
.ls-science-layout { --science-duration:14s; display:grid; gap:16px; }
.ls-space-scene { position:relative; min-height:390px; overflow:hidden; border:1px solid rgba(125,211,252,.2); border-radius:18px; background:radial-gradient(circle at 28% 22%,rgba(30,64,175,.24),transparent 28%),linear-gradient(145deg,#07152c,#020617 72%); box-shadow:inset 0 0 55px rgba(14,165,233,.08); }
.ls-space-scene::before { content:''; position:absolute; inset:0; opacity:.45; background-image:radial-gradient(circle,#fff 0 1px,transparent 1.4px); background-size:37px 37px; }
.ls-science-sun { position:absolute; z-index:3; display:grid; place-items:center; color:#fde68a; filter:drop-shadow(0 0 22px rgba(250,204,21,.72)); }
.ls-science-sun i { animation:ls-sun-pulse 2.4s ease-in-out infinite; }
.ls-science-sun span { margin-top:7px; color:#fef3c7; font-size:12px; font-weight:800; }
.ls-earth-axis { position:absolute; left:50%; top:-15%; width:2px; height:130%; background:#f8fafc; box-shadow:0 0 6px #38bdf8; transform:rotate(-23.5deg); transform-origin:center; }
.ls-light-rays { position:absolute; z-index:1; display:grid; gap:24px; width:36%; }
.ls-light-rays i { display:block; height:2px; background:linear-gradient(90deg,rgba(253,224,71,.95),rgba(253,224,71,.06)); animation:ls-ray-flow 1.6s ease-in-out infinite alternate; }
.ls-light-rays i:nth-child(2),.ls-light-rays i:nth-child(4) { animation-delay:.35s; }
.ls-motion-callout { position:absolute; z-index:7; display:flex; flex-direction:column; gap:2px; padding:10px 13px; border:1px solid rgba(125,211,252,.25); border-radius:10px; color:#e0f2fe; background:rgba(3,7,18,.78); backdrop-filter:blur(8px); }
.ls-motion-callout i { margin-bottom:4px; color:#38bdf8; }
.ls-motion-callout b { font-size:14px; }
.ls-motion-callout span { color:#94a3b8; font-size:11px; }
.ls-sun-scale-scene { background:radial-gradient(circle at 30% 48%,rgba(245,158,11,.24),transparent 30%),linear-gradient(145deg,#07152c,#020617 72%); }
.ls-scale-sun { position:absolute; left:9%; top:12%; display:grid; place-items:center; color:#fde047; font-size:220px; filter:drop-shadow(0 0 30px rgba(250,204,21,.6)); }.ls-scale-sun span,.ls-scale-earth span{font-size:12px;font-weight:900}.ls-scale-earth{position:absolute;right:15%;top:43%;display:grid;place-items:center;color:#38bdf8;font-size:32px;filter:drop-shadow(0 0 10px #0ea5e9)}
.ls-scale-ruler{position:absolute;left:41%;right:9%;top:28%;display:grid;gap:12px;color:#e2e8f0}.ls-scale-ruler>span{position:relative;padding-top:22px}.ls-scale-ruler>span::before{content:'';position:absolute;left:0;right:0;top:7px;height:3px;background:repeating-linear-gradient(90deg,#38bdf8 0 2px,transparent 2px 9px)}.ls-scale-ruler i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#38bdf8}.ls-sun-scale-scene .ls-motion-callout{right:4%;bottom:5%;max-width:240px}
.ls-layer-sun{position:absolute;left:8%;top:8%;width:300px;aspect-ratio:1;border-radius:50%;filter:drop-shadow(0 0 28px rgba(249,115,22,.48))}.ls-layer-sun>span{position:absolute;left:50%;top:50%;display:block;border-radius:50%;transform:translate(-50%,-50%);transition:filter .3s ease,opacity .3s ease}.ls-layer-sun .corona{width:100%;height:100%;background:radial-gradient(circle,transparent 55%,rgba(254,240,138,.18) 57% 68%,transparent 70%)}.ls-layer-sun .chromosphere{width:82%;height:82%;background:#ef4444}.ls-layer-sun .photosphere{width:72%;height:72%;background:#f59e0b}.ls-layer-sun .convection{width:58%;height:58%;background:repeating-radial-gradient(circle,#f97316 0 7px,#fb923c 8px 14px)}.ls-layer-sun .radiative{width:39%;height:39%;background:#facc15}.ls-layer-sun .core{width:19%;height:19%;background:#fff7ed;box-shadow:0 0 25px #fff}
.ls-layer-legend{position:absolute;left:48%;right:4%;top:8%;display:grid;gap:7px}.ls-layer-legend button{padding:9px 11px;border:1px solid rgba(255,255,255,.13);border-radius:8px;color:#e2e8f0;background:rgba(15,23,42,.8);text-align:left;font:700 12px Outfit,sans-serif;cursor:pointer}.ls-layer-legend button b{float:right;color:#fde68a}.ls-layer-legend button.active{border-color:#facc15;background:rgba(120,53,15,.35)}.ls-sun-layers-scene .ls-motion-callout{right:4%;bottom:5%}
.ls-fusion-scene{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;padding:50px}.ls-protons{display:grid;grid-template-columns:1fr 1fr;gap:16px}.ls-protons i{display:grid;place-items:center;width:58px;aspect-ratio:1;border-radius:50%;color:#fff;background:#2563eb;box-shadow:0 0 18px #3b82f6;font:900 20px Outfit,sans-serif;animation:ls-proton-pulse 1.5s ease-in-out infinite}.ls-fusion-arrow{display:grid;place-items:center;color:#fde047;font-size:44px}.ls-fusion-arrow span{font-size:9px;text-align:center}.ls-helium{display:grid;place-items:center;width:150px;aspect-ratio:1;border-radius:50%;color:#422006;background:radial-gradient(circle,#fff7ed,#facc15);box-shadow:0 0 35px #f59e0b}.ls-helium b{font-size:42px}.ls-helium span{font-size:10px}.ls-energy-burst{position:absolute;right:4%;top:5%;display:grid;padding:11px;border:1px solid rgba(250,204,21,.3);border-radius:10px;color:#fef08a;background:rgba(66,32,6,.72)}.ls-energy-burst i{font-size:22px}.ls-energy-burst span{font-size:9px}.ls-fusion-scene .ls-motion-callout{left:50%;bottom:4%;transform:translateX(-50%)}
.ls-energy-sun{position:absolute;left:7%;top:10%;width:290px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,#facc15 9% 28%,#f97316 29% 64%,#dc2626 65%);box-shadow:0 0 30px rgba(249,115,22,.5)}.ls-energy-sun .core{position:absolute;left:50%;top:50%;width:18%;aspect-ratio:1;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}.ls-energy-sun .photon{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff;animation:ls-photon-walk 4s ease-in-out infinite}.ls-energy-sun .p2{animation-delay:1.2s}.ls-energy-sun .p3{animation-delay:2.4s}.ls-energy-route{position:absolute;left:45%;right:4%;top:12%;display:grid;gap:9px}.ls-energy-route div{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:9px;padding:9px;border:1px solid rgba(249,115,22,.2);border-radius:8px;color:#e2e8f0;background:rgba(15,23,42,.78)}.ls-energy-route b{display:grid;place-items:center;width:28px;aspect-ratio:1;border-radius:50%;color:#422006;background:#fde047}.ls-energy-route span{font-size:11px}.ls-energy-journey-scene .ls-motion-callout{right:4%;bottom:5%}
.ls-magnetic-sun{position:absolute;left:50%;top:42%;width:210px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fef08a,#f59e0b 60%,#dc2626);box-shadow:0 0 35px rgba(249,115,22,.6);transform:translate(-50%,-50%)}.ls-magnetic-sun .field{position:absolute;left:50%;top:50%;border:3px solid #38bdf8;border-radius:50%;transform:translate(-50%,-50%);animation:ls-field-pulse 2s ease-in-out infinite}.ls-magnetic-sun .f1{width:150%;height:80%}.ls-magnetic-sun .f2{width:80%;height:150%;animation-delay:.5s}.ls-magnetic-sun .spot{position:absolute;width:16px;height:11px;border-radius:50%;background:#7c2d12;box-shadow:0 0 5px #451a03}.ls-magnetic-sun .s1{left:28%;top:35%}.ls-magnetic-sun .s2{right:23%;bottom:31%}.ls-magnetic-sun>b{position:absolute;left:50%;color:#fff;transform:translateX(-50%)}.ls-magnetic-sun>b:nth-of-type(1){top:8%}.ls-magnetic-sun>b:nth-of-type(2){bottom:8%}.ls-cycle-meter{position:absolute;left:4%;top:8%;width:210px;color:#e2e8f0}.ls-cycle-meter>i{display:block;height:45px;margin:8px 0;overflow:hidden;border-radius:8px;background:#172554}.ls-cycle-meter>i>b{display:block;width:100%;height:100%;background:linear-gradient(90deg,#1e3a8a,#f97316,#1e3a8a);animation:ls-cycle-wave 5s ease-in-out infinite}.ls-cycle-meter span,.ls-cycle-meter strong{font-size:10px}.ls-magnetic-scene .ls-motion-callout{right:4%;bottom:5%;max-width:230px}
.ls-storm-sun{position:absolute;left:5%;top:27%;z-index:5;color:#fde047;font-size:110px;filter:drop-shadow(0 0 25px #f59e0b)}.ls-storm-sun .flare{position:absolute;right:-60px;top:35%;width:90px;height:18px;border-radius:50%;background:#fb7185;filter:blur(3px);animation:ls-flare 1.5s ease-in-out infinite}.ls-solar-wind{position:absolute;left:22%;right:30%;top:30%;display:grid;gap:28px}.ls-solar-wind i{height:2px;background:linear-gradient(90deg,#fef08a,#38bdf8,transparent);animation:ls-ray-flow 1.2s ease-in-out infinite alternate}.ls-magnetosphere{position:absolute;right:10%;top:22%;width:190px;aspect-ratio:1}.ls-magnetosphere .earth{position:absolute;left:50%;top:50%;z-index:4;color:#38bdf8;font-size:65px;transform:translate(-50%,-50%)}.ls-magnetosphere .shield{position:absolute;inset:3%;border:4px solid #22d3ee;border-left-color:transparent;border-radius:50%;box-shadow:0 0 18px rgba(34,211,238,.7)}.ls-magnetosphere .aurora{position:absolute;left:31%;right:31%;top:18%;height:18px;border-radius:50%;background:#4ade80;filter:blur(5px);animation:ls-aurora 2s ease-in-out infinite}.ls-storm-effects{position:absolute;left:28%;right:28%;bottom:5%;display:flex;justify-content:center;gap:8px}.ls-storm-effects span{padding:7px;border:1px solid rgba(255,255,255,.12);border-radius:7px;color:#cbd5e1;background:rgba(15,23,42,.8);font-size:9px}
.ls-systems-scene .ls-science-sun{left:5%;top:31%;font-size:72px}.ls-system-rays{position:absolute;left:18%;right:8%;top:25%;display:grid;gap:48px}.ls-system-rays span{height:3px;background:linear-gradient(90deg,#fde047,transparent);animation:ls-ray-flow 1.4s ease-in-out infinite alternate}.ls-system-grid{position:absolute;left:35%;right:5%;top:15%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.ls-system-grid div{display:grid;place-items:center;min-height:150px;padding:12px;border:1px solid rgba(255,255,255,.15);border-radius:12px;color:#fff;background:rgba(15,23,42,.82);text-align:center}.ls-system-grid i{color:#4ade80;font-size:35px}.ls-system-grid b{font-size:12px}.ls-system-grid span{color:#94a3b8;font-size:10px}.ls-systems-scene .ls-motion-callout{right:5%;bottom:5%}
.ls-panel-scene{--panel-angle:45deg}.ls-panel-sun{position:absolute;left:7%;top:8%;color:#fde047;font-size:70px;filter:drop-shadow(0 0 20px #f59e0b)}.ls-panel-rays{position:absolute;left:18%;top:23%;display:grid;gap:18px;width:45%;transform:rotate(calc(var(--panel-angle)*.35 - 25deg));transform-origin:left;transition:transform .4s ease}.ls-panel-rays i{height:3px;background:linear-gradient(90deg,#fde047,transparent)}.ls-panel-array{position:absolute;left:42%;bottom:20%;display:grid;grid-template-columns:1fr 1fr;width:260px;height:130px;transform:skewX(-12deg) rotateX(20deg);transition:transform .4s ease}.ls-panel-array span{border:2px solid #7dd3fc;background:repeating-linear-gradient(90deg,#1e3a8a 0 22px,#38bdf8 23px 25px)}.ls-power-meter{position:absolute;right:4%;top:7%;display:grid;padding:11px;border:1px solid rgba(34,197,94,.3);border-radius:10px;color:#dcfce7;background:rgba(5,46,22,.75)}.ls-power-meter b{font-size:28px}.ls-power-meter small{max-width:180px;color:#86efac;font-size:9px}.ls-panel-scene .ls-motion-callout{left:4%;bottom:5%;max-width:250px}.ls-panel-control{border:1px solid rgba(34,197,94,.22);border-radius:10px;padding:8px 10px;background:rgba(5,46,22,.18)}
.ls-life-track{position:absolute;left:4%;right:4%;top:20%;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.ls-life-track::before{content:'';position:absolute;left:8%;right:8%;top:45px;height:3px;background:linear-gradient(90deg,#fde047,#ef4444,#a78bfa,#e2e8f0)}.ls-life-track div{position:relative;z-index:2;display:grid;place-items:center;color:#e2e8f0;text-align:center}.ls-life-track i{display:grid;place-items:center;width:88px;aspect-ratio:1;border-radius:50%;color:#fde047;background:#451a03;font-size:40px;box-shadow:0 0 22px rgba(249,115,22,.4);animation:ls-star-breathe 2.2s ease-in-out infinite}.ls-life-track div:nth-child(2) i{color:#fca5a5;background:#7f1d1d;transform:scale(1.22)}.ls-life-track div:nth-child(3) i{color:#c4b5fd;background:#312e81}.ls-life-track div:nth-child(4) i{color:#fff;background:#334155;transform:scale(.65)}.ls-life-track b{margin-top:10px;font-size:12px}.ls-life-track span{color:#94a3b8;font-size:9px}.ls-not-supernova{position:absolute;left:50%;bottom:5%;display:grid;grid-template-columns:auto 1fr;gap:2px 8px;padding:9px 13px;border:1px solid rgba(248,113,113,.3);border-radius:9px;color:#fecaca;background:rgba(69,10,10,.7);transform:translateX(-50%)}.ls-not-supernova i{grid-row:1/3}.ls-not-supernova span{font-size:9px}
.ls-habitable-scene .ls-science-sun { left:4%; top:35%; font-size:72px; }
.ls-zone { position:absolute; top:16%; bottom:16%; display:grid; place-items:end center; padding:12px; border-radius:45%; font-size:11px; font-weight:900; }
.ls-zone span { padding:5px 8px; border-radius:7px; color:#fff; background:rgba(3,7,18,.72); }
.ls-zone-hot { left:15%; width:24%; background:radial-gradient(ellipse,rgba(239,68,68,.28),transparent 70%); }
.ls-zone-life { left:34%; width:34%; border:2px dashed rgba(34,197,94,.55); background:radial-gradient(ellipse,rgba(34,197,94,.2),transparent 72%); }
.ls-zone-cold { right:5%; width:31%; background:radial-gradient(ellipse,rgba(56,189,248,.2),transparent 72%); }
.ls-zone-earth { position:absolute; left:44%; top:43%; z-index:6; color:#38bdf8; font-size:46px; filter:drop-shadow(0 0 15px #0ea5e9); transition:left .45s ease,color .3s ease; }
.ls-zone-status { position:absolute; right:4%; top:5%; z-index:7; display:flex; flex-direction:column; padding:10px 12px; border:1px solid rgba(34,197,94,.3); border-radius:9px; color:#dcfce7; background:rgba(3,7,18,.8); }.ls-zone-status span{color:#94a3b8;font-size:10px}
.ls-distance-control,.ls-timezone-control { border:1px solid rgba(56,189,248,.2); border-radius:10px; padding:8px 10px; background:rgba(8,47,73,.2); }
.ls-timezone-globe { position:absolute; left:10%; top:12%; z-index:3; display:grid; place-items:center; width:240px; aspect-ratio:1; overflow:hidden; border-radius:50%; color:#38bdf8; background:radial-gradient(circle at 35% 30%,#0ea5e9,#0c4a6e 58%,#082f49); box-shadow:0 0 35px rgba(14,165,233,.3); font-size:155px; }
.ls-timezone-globe i { opacity:.42; }.ls-tz-lines { position:absolute; inset:0; z-index:2; border-radius:50%; background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(255,255,255,.35) 9.5% 10%,transparent 10.5% 19%); }
.ls-longitude-line { position:absolute; left:40%; right:5%; top:24%; height:8px; border-radius:999px; background:linear-gradient(90deg,#38bdf8,#a78bfa); }.ls-longitude-line span{position:absolute;top:-25px;color:#cbd5e1;font-size:11px}.ls-longitude-line b{position:absolute;left:62.5%;top:50%;width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:#ec4899;transform:translate(-50%,-50%);transition:left .35s ease}
.ls-world-clocks { position:absolute; left:40%; right:5%; top:39%; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.ls-world-clocks div{padding:13px;border:1px solid rgba(255,255,255,.12);border-radius:9px;color:#cbd5e1;background:rgba(15,23,42,.78)}.ls-world-clocks div.active{border-color:#ec4899}.ls-world-clocks span,.ls-world-clocks b{display:block}.ls-world-clocks span{font-size:10px}.ls-world-clocks b{margin-top:4px;color:#fff;font-size:20px}
.ls-timezone-scene .ls-motion-callout { right:5%; bottom:7%; }
.ls-coriolis-earth { position:absolute; left:50%; top:8%; width:270px; aspect-ratio:1; border-radius:50%; background:linear-gradient(#075985,#0ea5e9 48%,#0284c7 52%,#164e63); box-shadow:inset -30px 0 35px rgba(0,0,0,.3),0 0 35px rgba(14,165,233,.25); transform:translateX(-50%); }.ls-coriolis-earth>b{position:absolute;left:50%;color:#e0f2fe;font-size:11px;transform:translateX(-50%)}.ls-coriolis-earth>b:nth-of-type(1){top:17%}.ls-coriolis-earth>b:nth-of-type(2){bottom:17%}
.ls-coriolis-path { position:absolute; left:25%; width:50%; height:31%; border:4px dashed #fef08a; border-left-color:transparent; border-radius:50%; animation:ls-coriolis-dash 1.5s linear infinite; }.ls-coriolis-path.north{top:18%;transform:rotate(18deg)}.ls-coriolis-path.south{bottom:18%;transform:rotate(-18deg) scaleX(-1)}
.ls-coriolis-notes { position:absolute; left:5%; top:18%; display:grid; gap:12px; }.ls-coriolis-notes div{display:flex;gap:8px;padding:10px;border:1px solid rgba(254,240,138,.2);border-radius:9px;color:#fef9c3;background:rgba(3,7,18,.75);font-size:12px}.ls-coriolis-scene .ls-motion-callout{right:4%;bottom:6%}
.ls-distance-orbit { position:absolute; left:8%; right:8%; top:14%; bottom:14%; border:3px dashed rgba(125,211,252,.45); border-radius:50%; transform:rotate(-7deg); }.ls-focus-sun{position:absolute;left:36%;top:50%;color:#fde047;font-size:58px;transform:translate(-50%,-50%);filter:drop-shadow(0 0 20px rgba(250,204,21,.65))}.ls-distance-earth{position:absolute;left:0;top:50%;width:42px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#86efac 0 12%,#0284c7 14% 65%,#082f49 66%);offset-path:ellipse(50% 50% at 50% 50%);animation:ls-orbit var(--science-duration) linear infinite;box-shadow:0 0 16px #38bdf8}
.ls-distance-label { position:absolute; z-index:6; display:flex; flex-direction:column; padding:8px 10px; border:1px solid rgba(255,255,255,.14); border-radius:8px; color:#fff; background:rgba(3,7,18,.8); }.ls-distance-label span{color:#94a3b8;font-size:10px}.ls-distance-label.near{left:6%;top:44%}.ls-distance-label.far{right:5%;top:44%}
.ls-not-season { position:absolute; left:50%; bottom:4%; z-index:7; display:grid; grid-template-columns:auto 1fr; gap:2px 9px; padding:10px 14px; border:1px solid rgba(248,113,113,.35); border-radius:10px; color:#fecaca; background:rgba(69,10,10,.75); transform:translateX(-50%); }.ls-not-season i{grid-row:1/3;margin-top:4px}.ls-not-season span{color:#fca5a5;font-size:10px}
.ls-solstice-scene .ls-science-sun { left:5%; top:31%; font-size:68px; }.ls-solstice-scene .ls-light-rays{left:18%;top:24%;width:36%}.ls-solstice-earth{position:absolute;right:24%;top:15%;width:190px;aspect-ratio:1;border-radius:50%;background:linear-gradient(#f97316,#0ea5e9 49%,#2563eb 51%,#172554);box-shadow:inset -20px 0 25px rgba(0,0,0,.3),0 0 30px rgba(56,189,248,.28);transition:transform .6s ease}.ls-tropic{position:absolute;left:11%;right:11%;height:1px;border-top:2px dashed rgba(255,255,255,.65);color:#fff;font-size:9px}.ls-tropic.north{top:34%}.ls-tropic.south{bottom:34%}
.ls-solstice-info { position:absolute; right:3%; top:7%; z-index:7; width:180px; padding:11px; border:1px solid rgba(255,255,255,.15); border-radius:10px; color:#fff; background:rgba(3,7,18,.82); }.ls-solstice-info span{display:block;color:#cbd5e1;font-size:10px}.ls-solstice-info div{display:grid;gap:5px;margin-top:9px}.ls-solstice-info i{display:block;width:var(--length);height:7px;border-radius:999px;background:#fde047;transition:width .5s ease}.ls-solstice-info i:last-child{background:#3b82f6}.ls-science-layout.is-december .ls-solstice-earth{transform:rotate(180deg)}
.ls-polar-horizon { position:absolute; left:-5%; right:-5%; bottom:20%; height:42%; border-radius:50% 50% 0 0; background:linear-gradient(#bae6fd,#e0f2fe); box-shadow:0 -12px 45px rgba(125,211,252,.25); }.ls-polar-sun{position:absolute;left:12%;top:25%;z-index:5;color:#fde047;font-size:52px;filter:drop-shadow(0 0 18px #facc15);animation:ls-polar-path var(--science-duration) ease-in-out infinite alternate}.ls-polar-clock{position:absolute;left:50%;top:18%;z-index:5;display:grid;place-items:center;width:120px;aspect-ratio:1;border:5px solid #fff;border-radius:50%;color:#fff;background:rgba(14,116,144,.65);transform:translateX(-50%)}.ls-polar-clock b{font-size:25px}.ls-polar-clock span{padding:0 10px;text-align:center;font-size:9px}
.ls-polar-card{position:absolute;bottom:5%;z-index:6;display:flex;flex-direction:column;min-width:160px;padding:10px;border-radius:9px;background:rgba(3,7,18,.78)}.ls-polar-card.day{left:4%;color:#fef08a}.ls-polar-card.night{right:4%;color:#bfdbfe}.ls-polar-card span{color:#94a3b8;font-size:10px}
.ls-dual-scene .ls-science-sun{left:50%;top:50%;font-size:58px;transform:translate(-50%,-50%)}.ls-dual-orbit{position:absolute;left:10%;right:10%;top:14%;bottom:14%;border:2px dashed rgba(56,189,248,.4);border-radius:50%;transform:rotate(-8deg)}.ls-dual-earth{position:absolute;width:60px;aspect-ratio:1;border-radius:50%;background:#0284c7;offset-path:ellipse(50% 50% at 50% 50%);animation:ls-orbit var(--science-duration) linear infinite,ls-spin calc(var(--science-duration)/7) linear infinite;box-shadow:0 0 18px #38bdf8}.ls-dual-counters{position:absolute;left:4%;top:6%;z-index:6;display:grid;gap:8px}.ls-dual-counters div{display:grid;grid-template-columns:22px 1fr;gap:1px 8px;padding:8px 10px;border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#fff;background:rgba(3,7,18,.78)}.ls-dual-counters i{grid-row:1/3;color:#38bdf8}.ls-dual-counters span{color:#94a3b8;font-size:9px}.ls-dual-scene .ls-motion-callout{right:4%;bottom:5%}
.ls-angle-scene { --ray-angle:45deg; --shadow-scale:1.6; --heat-level:58%; }
.ls-angle-sun { position:absolute; left:8%; top:8%; z-index:4; color:#fde047; font-size:72px; filter:drop-shadow(0 0 22px rgba(250,204,21,.65)); animation:ls-sun-pulse 2.4s ease-in-out infinite; }
.ls-angle-beam { position:absolute; left:20%; top:26%; z-index:3; width:52%; height:18px; border-top:4px solid #fde68a; background:linear-gradient(180deg,rgba(253,230,138,.28),transparent); transform:rotate(calc(var(--ray-angle) * .48 - 38deg)); transform-origin:left; transition:transform .45s ease; }
.ls-angle-beam span { position:absolute; top:-25px; color:#fef3c7; font-size:11px; font-weight:800; }
.ls-angle-ground { position:absolute; left:10%; right:10%; bottom:21%; height:6px; border-radius:50%; background:#166534; box-shadow:0 15px 35px rgba(34,197,94,.2); }
.ls-angle-object { position:absolute; left:65%; bottom:0; width:12px; height:105px; border-radius:8px 8px 2px 2px; background:linear-gradient(#e2e8f0,#64748b); }
.ls-angle-object::before { content:''; position:absolute; left:50%; top:-18px; width:34px; height:34px; border-radius:50%; background:#f8fafc; transform:translateX(-50%); }
.ls-angle-shadow { position:absolute; left:65%; bottom:-7px; width:92px; height:12px; border-radius:50%; background:rgba(0,0,0,.68); transform:scaleX(var(--shadow-scale)); transform-origin:left; transition:transform .45s ease; }
.ls-heat-meter { position:absolute; right:5%; top:8%; z-index:6; display:grid; grid-template-columns:auto 16px auto; align-items:end; gap:8px; color:#cbd5e1; font-size:11px; font-weight:800; }
.ls-heat-meter i { position:relative; width:14px; height:100px; overflow:hidden; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:#172554; }
.ls-heat-meter b { position:absolute; inset:auto 0 0; height:var(--heat-level); background:linear-gradient(#facc15,#ef4444); transition:height .45s ease; }
.ls-angle-scene .ls-motion-callout { left:5%; bottom:5%; }
.ls-angle-control { border:1px solid rgba(250,204,21,.2); border-radius:10px; padding:8px 10px; background:rgba(120,53,15,.16); }
.ls-hemisphere-scene .ls-science-sun { left:7%; top:31%; font-size:66px; }
.ls-hemisphere-scene .ls-light-rays { left:19%; top:24%; width:34%; }
.ls-hemisphere-earth { position:absolute; right:24%; top:17%; z-index:4; width:190px; aspect-ratio:1; border-radius:50%; background:linear-gradient(#f97316 0 49%,#38bdf8 51%); box-shadow:inset -20px 0 28px rgba(0,0,0,.28),0 0 32px rgba(56,189,248,.3); transition:transform .65s ease; }
.ls-equator { position:absolute; left:0; right:0; top:50%; height:2px; background:#fff; box-shadow:0 0 7px rgba(255,255,255,.8); }
.ls-north-mark,.ls-south-mark { position:absolute; left:50%; z-index:2; color:#fff; transform:translateX(-50%); }.ls-north-mark{top:20%}.ls-south-mark{bottom:20%}
.ls-hemi-season { position:absolute; z-index:6; display:flex; flex-direction:column; min-width:145px; padding:10px 12px; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:rgba(3,7,18,.8); transition:transform .65s ease,border-color .3s ease; }
.ls-hemi-season span,.ls-hemi-season small { color:#94a3b8; font-size:10px; }.ls-hemi-season b { color:#fff; font-size:22px; }
.ls-hemi-north { right:3%; top:10%; border-color:rgba(249,115,22,.5); }.ls-hemi-south { right:3%; bottom:10%; border-color:rgba(56,189,248,.5); }
.ls-hemisphere-scene .ls-motion-callout { left:5%; bottom:6%; }
.ls-science-layout.is-season-swapped .ls-hemisphere-earth { transform:rotate(180deg); }
.ls-science-layout.is-season-swapped .ls-hemi-north { transform:translateY(225px); border-color:rgba(56,189,248,.5); }
.ls-science-layout.is-season-swapped .ls-hemi-south { transform:translateY(-225px); border-color:rgba(249,115,22,.5); }
.ls-day-clock-scene { display:grid; place-items:center; }
.ls-day-dial { position:relative; z-index:3; width:min(280px,72vw); aspect-ratio:1; border:9px solid #e2e8f0; border-radius:50%; background:conic-gradient(from -90deg,#fde047 0 50%,#172554 50% 100%); box-shadow:0 0 0 6px rgba(56,189,248,.12),0 25px 50px rgba(0,0,0,.35); }
.ls-day-dial::after { content:''; position:absolute; inset:21%; border:1px dashed rgba(255,255,255,.6); border-radius:50%; }
.ls-clock-hand { position:absolute; left:50%; top:50%; z-index:4; width:4px; height:42%; border-radius:999px; background:#ef4444; transform:translate(-50%,-100%); transform-origin:50% 100%; animation:ls-clock-turn var(--science-duration) linear infinite; }
.ls-clock-hand i { position:absolute; left:50%; top:-7px; width:14px; height:14px; border:3px solid #fff; border-radius:50%; background:#ef4444; transform:translateX(-50%); box-shadow:0 0 12px #ef4444; }
.ls-day-dial>b { position:absolute; z-index:5; color:#fff; font-size:12px; }.ls-hour-00{left:50%;top:4%;transform:translateX(-50%)}.ls-hour-06{right:5%;top:50%;transform:translateY(-50%)}.ls-hour-12{left:50%;bottom:4%;transform:translateX(-50%)}.ls-hour-18{left:5%;top:50%;transform:translateY(-50%)}
.ls-day-dial strong { position:absolute; left:50%; top:50%; z-index:5; color:#fff; font-size:20px; transform:translate(-50%,-50%); }
.ls-clock-legend { position:absolute; left:4%; bottom:5%; z-index:5; display:grid; gap:7px; color:#cbd5e1; font-size:11px; }.ls-clock-legend i{width:17px;color:#fde047}.ls-clock-legend span:last-child i{color:#93c5fd}
.ls-day-clock-scene .ls-motion-callout { right:4%; bottom:5%; max-width:210px; }
.ls-rotation-scene .ls-science-sun { left:8%; top:32%; font-size:72px; }
.ls-rotation-scene .ls-light-rays { left:20%; top:25%; transform:rotate(-3deg); }
.ls-rotation-earth,.ls-equinox-earth { position:absolute; z-index:4; border-radius:50%; background:linear-gradient(90deg,#0ea5e9 0 49%,#081229 51% 100%); box-shadow:inset -18px 0 25px rgba(0,0,0,.38),0 0 0 5px rgba(56,189,248,.12),0 0 35px rgba(14,165,233,.28); }
.ls-rotation-earth { right:14%; top:19%; width:190px; aspect-ratio:1; animation:ls-earth-bob 3s ease-in-out infinite; }
.ls-earth-grid { position:absolute; inset:16%; border:2px solid rgba(134,239,172,.75); border-radius:44% 56% 48% 52%; box-shadow:24px -26px 0 -12px rgba(134,239,172,.72),-21px 32px 0 -14px rgba(134,239,172,.68); animation:ls-continent-drift calc(var(--science-duration) / 2) linear infinite; }
.ls-earth-marker { position:absolute; left:25%; top:45%; width:10px; height:10px; border:2px solid white; border-radius:50%; background:#ef4444; box-shadow:0 0 0 5px rgba(239,68,68,.2); }
.ls-rotation-arrow { position:absolute; z-index:6; right:9%; top:11%; color:#7dd3fc; font-size:235px; line-height:1; opacity:.78; animation:ls-spin var(--science-duration) linear infinite; }
.ls-day-label,.ls-night-label { position:absolute; z-index:7; top:23%; padding:6px 9px; border-radius:8px; font-size:12px; font-weight:800; }
.ls-day-label { right:29%; color:#713f12; background:#fef08a; }
.ls-night-label { right:13%; color:#dbeafe; background:#172554; }
.ls-rotation-scene .ls-motion-callout { right:16%; bottom:7%; }
.ls-orbit-scene { min-height:450px; }
.ls-orbit-scene .ls-science-sun { left:50%; top:50%; font-size:58px; transform:translate(-50%,-50%); }
.ls-orbit-track { position:absolute; left:10%; right:10%; top:16%; bottom:16%; z-index:2; border:2px dashed rgba(125,211,252,.36); border-radius:50%; transform:rotate(-8deg); }
.ls-orbit-earth { position:absolute; left:50%; top:50%; width:55px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%,#86efac 0 12%,#0284c7 13% 58%,#082f49 60%); box-shadow:0 0 18px rgba(56,189,248,.7); offset-path:ellipse(50% 50% at 50% 50%); offset-distance:0%; animation:ls-orbit var(--science-duration) linear infinite; }
.ls-orbit-earth .ls-earth-axis { top:-12%; height:124%; }
.ls-season { position:absolute; z-index:5; padding:5px 8px; border:1px solid rgba(255,255,255,.12); border-radius:7px; color:#e2e8f0; background:rgba(15,23,42,.78); font-size:11px; font-weight:800; }
.ls-season-spring { left:7%; top:49%; }.ls-season-summer { left:46%; top:7%; }.ls-season-autumn { right:6%; top:49%; }.ls-season-winter { left:45%; bottom:6%; }
.ls-orbit-scene .ls-motion-callout { right:4%; bottom:4%; }
.ls-equinox-scene .ls-science-sun { left:7%; top:31%; font-size:64px; }
.ls-equinox-scene .ls-light-rays { left:19%; top:23%; width:38%; }
.ls-equinox-earth { right:18%; top:17%; width:190px; aspect-ratio:1; }
.ls-terminator { position:absolute; left:49%; top:0; width:3px; height:100%; background:#fff; box-shadow:0 0 11px #fde68a; animation:ls-terminator-pulse 2s ease-in-out infinite; }
.ls-duration-bars { position:absolute; left:7%; right:7%; bottom:7%; z-index:6; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ls-duration-bars div { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; color:#cbd5e1; font-size:12px; }
.ls-duration-bars b { position:relative; overflow:hidden; padding:8px 11px; border-radius:8px; color:#fff; background:rgba(30,41,59,.9); }
.ls-duration-bars b::before { content:''; position:absolute; inset:0 auto 0 0; width:var(--bar); z-index:-1; background:linear-gradient(90deg,#0ea5e9,#22c55e); animation:ls-bar-grow 1.2s ease both; }
.ls-equinox-scene .ls-motion-callout { right:4%; top:7%; }
.ls-leap-scene { display:grid; grid-template-columns:1fr 60px 1fr 130px; align-items:center; gap:18px; padding:42px; }
.ls-year-chips { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ls-year-chips div { display:flex; flex-direction:column; padding:14px; border:1px solid rgba(250,204,21,.25); border-radius:10px; color:#fef3c7; background:rgba(120,53,15,.18); opacity:0; animation:ls-year-arrive .55s ease forwards; animation-delay:calc(var(--year) * .6s); }
.ls-year-chips span { color:#94a3b8; font-size:11px; }.ls-year-chips b { margin-top:3px; font-size:19px; }
.ls-time-funnel { color:#38bdf8; font-size:34px; transform:rotate(-90deg); animation:ls-nudge 1s ease-in-out infinite; }
.ls-day-meter { position:relative; display:grid; place-items:center; min-height:170px; overflow:hidden; border:2px solid rgba(34,197,94,.35); border-radius:50%; color:#dcfce7; background:#052e16; text-align:center; }
.ls-day-fill { position:absolute; inset:auto 0 0; height:0; background:linear-gradient(#22c55e,#15803d); opacity:.42; animation:ls-meter-fill 3s ease forwards 2.7s; }
.ls-day-meter strong,.ls-day-meter b { position:relative; z-index:2; }.ls-day-meter strong { font-size:18px; }.ls-day-meter b { color:#86efac; font-size:13px; }
.ls-calendar { display:grid; place-items:center; overflow:hidden; border-radius:10px; color:#0f172a; background:#fff; box-shadow:0 14px 35px rgba(0,0,0,.3); animation:ls-calendar-pop .7s cubic-bezier(.2,.9,.2,1) both 5.5s; }
.ls-calendar span { width:100%; padding:8px; color:#fff; background:#ef4444; text-align:center; font-size:12px; font-weight:900; }.ls-calendar b { padding-top:8px; font-size:48px; }.ls-calendar small { padding-bottom:10px; color:#475569; font-weight:800; }
.ls-science-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ls-science-controls label { display:grid; grid-template-columns:auto minmax(130px,220px) 55px; align-items:center; gap:10px; margin-left:auto; color:#cbd5e1; font-size:12px; font-weight:700; }
.ls-science-controls input { accent-color:var(--ls-accent); }.ls-science-controls output { color:#7dd3fc; }
.ls-science-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.ls-science-facts article { display:flex; gap:10px; min-height:86px; padding:13px; border:1px solid rgba(125,211,252,.15); border-radius:10px; color:#e2e8f0; background:rgba(15,23,42,.7); }
.ls-science-facts i { margin-top:2px; color:#38bdf8; }.ls-science-facts b,.ls-science-facts span { display:block; }.ls-science-facts b { margin-bottom:4px; font-size:13px; }.ls-science-facts span { color:#94a3b8; font-size:12px; line-height:1.45; }
.ls-science-layout.is-paused * { animation-play-state:paused!important; }.ls-science-layout.is-restarting * { animation:none!important; }
@keyframes ls-sun-pulse { 50%{transform:scale(1.08);filter:brightness(1.18)} }
@keyframes ls-ray-flow { from{opacity:.35;transform:scaleX(.82)} to{opacity:1;transform:scaleX(1)} }
@keyframes ls-earth-bob { 50%{transform:translateY(-7px)} }
@keyframes ls-continent-drift { to{transform:rotate(360deg)} }
@keyframes ls-spin { to{transform:rotate(360deg)} }
@keyframes ls-orbit { to{offset-distance:100%} }
@keyframes ls-terminator-pulse { 50%{box-shadow:0 0 22px #fde68a} }
@keyframes ls-bar-grow { from{width:0} }
@keyframes ls-year-arrive { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:none} }
@keyframes ls-nudge { 50%{transform:rotate(-90deg) translateY(5px)} }
@keyframes ls-meter-fill { to{height:100%} }
@keyframes ls-calendar-pop { from{opacity:0;transform:scale(.6) rotate(-8deg)} to{opacity:1;transform:none} }
@keyframes ls-clock-turn { to{transform:translate(-50%,-100%) rotate(360deg)} }
@keyframes ls-coriolis-dash { to{border-color:#fef08a transparent #fef08a #fef08a} }
@keyframes ls-polar-path { from{transform:translate(0,15px)} to{transform:translate(650px,-40px)} }
@keyframes ls-proton-pulse{50%{transform:scale(1.08);box-shadow:0 0 28px #60a5fa}}
@keyframes ls-photon-walk{0%{transform:translate(0)}25%{transform:translate(45px,-30px)}50%{transform:translate(-55px,55px)}75%{transform:translate(85px,35px)}100%{transform:translate(135px,-85px);opacity:0}}
@keyframes ls-field-pulse{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.65}}
@keyframes ls-cycle-wave{50%{filter:brightness(1.35);transform:scaleX(.9)}}
@keyframes ls-flare{50%{transform:scaleX(1.45);opacity:.7}}
@keyframes ls-aurora{50%{transform:scale(1.3);filter:blur(8px);opacity:.65}}
@keyframes ls-star-breathe{50%{transform:scale(1.07);filter:brightness(1.2)}}

/* Chart and simulations */
.ls-dialogue { display:grid; gap:12px; max-width:860px; margin:auto; }
.ls-dialogue-turn { max-width:82%; padding:14px 18px; border-radius:18px; border:1px solid var(--ls-border); line-height:1.6; }
.ls-dialogue-turn strong { display:block; margin-bottom:5px; color:var(--ls-accent); }
.ls-dialogue-turn p { margin:0; }
.ls-dialogue-turn.teacher { justify-self:start; background:rgba(99,102,241,.12); border-bottom-left-radius:5px; }
.ls-dialogue-turn.student { justify-self:end; background:rgba(244,114,182,.12); border-bottom-right-radius:5px; }
.ls-chart-wrap { position:relative; min-height:340px; padding:18px; border:1px solid var(--ls-border); border-radius:20px; background:rgba(255,255,255,.97); }
.ls-sim { display:grid; grid-template-columns:minmax(220px,.75fr) minmax(260px,1.25fr); gap:25px; }
.ls-controls { display:grid; align-content:start; gap:17px; padding:20px; border:1px solid var(--ls-border); border-radius:18px; background:rgba(15,23,42,.62); }
.ls-control label { display:flex; justify-content:space-between; gap:10px; margin-bottom:8px; color:#cbd5e1; font-size:13px; }
.ls-control output { color:var(--ls-accent); font-weight:850; }
.ls-control input[type=range] { width:100%; accent-color:var(--ls-accent); }
.ls-sim-stage { position:relative; display:grid; place-items:center; min-height:310px; overflow:hidden; border:1px solid var(--ls-border); border-radius:20px; background:radial-gradient(circle at 50% 45%,rgba(30,41,59,.88),rgba(2,6,23,.96)); }
.ls-sim-value { position:relative; z-index:2; text-align:center; }
.ls-sim-value b { display:block; color:#fff; font-size:clamp(42px,7vw,72px); line-height:1; }
.ls-sim-value span { display:block; margin-top:8px; color:#94a3b8; font-size:13px; }
.ls-sim-visual { position:absolute; inset:auto 8% 12%; height:12px; border-radius:999px; background:#334155; }
.ls-sim-object { position:absolute; left:10%; bottom:calc(12% + 12px); width:74px; height:74px; border-radius:18px; background:linear-gradient(135deg,var(--ls-accent),#22d3ee); box-shadow:0 15px 35px color-mix(in srgb,var(--ls-accent) 25%,transparent); transition:transform .25s ease,width .25s ease,height .25s ease; }

/* Branch scenario */
.ls-scenario { max-width:760px; margin:auto; }
.ls-scenario-copy { padding:22px; border-left:3px solid var(--ls-accent); border-radius:0 16px 16px 0; color:#dbeafe; background:rgba(30,41,59,.55); font-size:17px; line-height:1.7; }
.ls-scenario-choices { display:grid; gap:12px; margin-top:20px; }
.ls-choice { width:100%; padding:15px 17px; border:1px solid var(--ls-border); border-radius:14px; color:#e2e8f0; background:rgba(15,23,42,.72); text-align:left; font:650 14px 'Outfit',sans-serif; cursor:pointer; transition:.2s ease; }
.ls-choice:hover { transform:translateX(5px); border-color:var(--ls-accent); }
.ls-choice.selected { border-color:var(--ls-accent); background:color-mix(in srgb,var(--ls-accent) 15%,#0f172a); }

/* Pronunciation and math */
.ls-pronounce { display:grid; grid-template-columns:100px 1fr; gap:24px; align-items:center; }
.ls-mic { display:grid; place-items:center; width:94px; height:94px; border:0; border-radius:50%; color:#fff; background:linear-gradient(145deg,var(--ls-accent),#4f46e5); box-shadow:0 0 0 10px color-mix(in srgb,var(--ls-accent) 12%,transparent),0 20px 45px rgba(0,0,0,.3); font-size:30px; cursor:pointer; }
.ls-mic.listening { animation:ls-mic 1.1s infinite; }
@keyframes ls-mic { 50%{transform:scale(1.07);box-shadow:0 0 0 20px transparent,0 20px 45px rgba(0,0,0,.3)} }
.ls-pronounce-target { color:#fff; font-size:clamp(24px,4vw,38px); font-weight:800; line-height:1.3; }
.ls-pronounce-result { min-height:48px; margin-top:12px; color:#94a3b8; font-size:14px; }
.ls-word { display:inline-block; margin:3px; padding:4px 7px; border-radius:7px; background:rgba(255,255,255,.05); }
.ls-word.match { color:#a7f3d0; background:rgba(6,78,59,.3); }.ls-word.miss{color:#fecdd3;background:rgba(136,19,55,.25)}
.ls-math-field { display:block; width:100%; min-height:75px; padding:16px; border:1px solid var(--ls-border); border-radius:16px; color:#0f172a; background:#fff; font-size:25px; }
.ls-math-actions { display:flex; gap:12px; margin-top:15px; }

/* Professional end report */
.ls-report { width:min(860px,92vw); max-height:84vh; overflow:auto; padding:26px; border:1px solid var(--ls-border); border-radius:24px; background:rgba(8,15,32,.94); text-align:left; }
.ls-report-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin:18px 0; }
.ls-report-metric { padding:17px; border:1px solid var(--ls-border); border-radius:16px; background:rgba(255,255,255,.045); }
.ls-report-metric b { display:block; color:#fff; font-size:28px; }.ls-report-metric span{color:#94a3b8;font-size:12px}
.ls-mastery { display:grid; gap:10px; margin-top:18px; }
.ls-mastery-row { display:grid; grid-template-columns:130px 1fr 42px; align-items:center; gap:10px; color:#cbd5e1; font-size:12px; }
.ls-mastery-track { height:8px; overflow:hidden; border-radius:999px; background:#1e293b; }.ls-mastery-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8b5cf6,#22d3ee)}
.ls-review-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }.ls-review-chip{padding:7px 10px;border-radius:999px;color:#fecdd3;background:rgba(136,19,55,.24);font-size:11px}
#endScreen.show { overflow-y:auto; justify-content:flex-start; }
#endScreen.show .trophy { flex:0 0 auto; margin-top:20px; }
#endScreen.show .ls-report { flex:0 0 auto; margin:0 0 24px; }
#endScreen.show .end-actions { flex:0 0 auto; padding-bottom:30px; }

@media (max-width: 760px) {
    .ls-scene { min-height:360px; padding:20px; border-radius:20px; }
    .ls-scene-head { flex-direction:column; }
    .ls-compare,.ls-dnd-layout,.ls-sim,.ls-pronounce { grid-template-columns:1fr; }
    .ls-compare-vs { margin:auto; }
    .ls-map { grid-template-columns:1fr; }.ls-map-center,.ls-map-node:nth-of-type(n){grid-column:1;grid-row:auto}.ls-map-center{border-radius:18px}
    .ls-hotspot-stage img { height:330px; }
    .ls-space-scene { min-height:350px; }
    .ls-scale-sun { left:2%; top:20%; font-size:145px; }.ls-scale-earth{right:8%}.ls-scale-ruler{left:43%;right:4%}
    .ls-layer-sun { left:2%; top:16%; width:190px; }.ls-layer-legend{left:48%;top:5%}.ls-layer-legend button{padding:6px;font-size:10px}.ls-layer-legend button b{display:none}
    .ls-fusion-scene { grid-template-columns:1fr 55px 1fr; padding:28px 14px; }.ls-protons{gap:7px}.ls-protons i{width:42px}.ls-helium{width:105px}.ls-fusion-arrow{font-size:28px}
    .ls-energy-sun { left:1%; top:22%; width:175px; }.ls-energy-route{left:48%;top:5%;right:2%}.ls-energy-route div{padding:6px}.ls-energy-route span{font-size:9px}
    .ls-magnetic-sun { width:175px; }.ls-cycle-meter{left:2%;width:125px}.ls-magnetic-scene .ls-motion-callout{max-width:145px}
    .ls-storm-sun{left:2%;font-size:75px}.ls-magnetosphere{right:2%;width:145px}.ls-storm-effects{left:20%;right:20%;flex-wrap:wrap}
    .ls-system-grid{left:26%;right:2%;grid-template-columns:1fr}.ls-system-grid div{min-height:78px}.ls-systems-scene .ls-motion-callout{display:none}
    .ls-panel-array{left:34%;width:180px;height:105px}.ls-power-meter{right:2%;top:3%}.ls-panel-scene .ls-motion-callout{max-width:165px}
    .ls-life-track{left:2%;right:2%;gap:5px}.ls-life-track i{width:58px;font-size:25px}.ls-life-track b{font-size:9px}.ls-life-track span{display:none}.ls-not-supernova{width:88%}
    .ls-timezone-globe { left:2%; top:14%; width:145px; font-size:90px; }
    .ls-longitude-line { left:44%; }.ls-world-clocks { left:44%; grid-template-columns:1fr; top:20%; }.ls-world-clocks div{padding:7px}.ls-world-clocks b{font-size:15px}
    .ls-coriolis-earth { width:220px; }.ls-coriolis-notes{left:2%;top:5%}.ls-coriolis-notes div{max-width:120px;padding:6px;font-size:10px}
    .ls-distance-label.near{left:2%;top:33%}.ls-distance-label.far{right:2%;top:53%}.ls-not-season{width:88%;}
    .ls-solstice-earth { right:5%; width:145px; }.ls-solstice-info{left:4%;right:auto;top:5%;width:145px}
    .ls-polar-card { min-width:125px; }.ls-polar-sun{font-size:40px}
    .ls-dual-counters { left:2%; top:3%; }.ls-dual-scene .ls-motion-callout{max-width:160px}
    .ls-rotation-earth,.ls-equinox-earth { right:7%; width:145px; }
    .ls-angle-object { left:58%; }.ls-angle-shadow { left:58%; }
    .ls-hemisphere-earth { right:12%; width:145px; }
    .ls-hemi-season { min-width:118px; padding:8px; }.ls-hemi-north,.ls-hemi-south{right:2%}
    .ls-science-layout.is-season-swapped .ls-hemi-north { transform:translateY(205px); }
    .ls-science-layout.is-season-swapped .ls-hemi-south { transform:translateY(-205px); }
    .ls-day-clock-scene .ls-motion-callout { display:none; }
    .ls-rotation-arrow { right:1%; font-size:180px; }
    .ls-rotation-scene .ls-science-sun,.ls-equinox-scene .ls-science-sun { left:5%; font-size:50px; }
    .ls-day-label { right:25%; }.ls-night-label { right:5%; }
    .ls-leap-scene { grid-template-columns:1fr 35px 1fr; gap:9px; padding:22px 14px; }
    .ls-calendar { grid-column:1/-1; width:110px; margin:auto; }
    .ls-science-controls label { grid-template-columns:1fr; width:100%; margin-left:0; }
    .ls-science-controls input { width:100%; }
    .ls-report-grid { grid-template-columns:1fr; }
    .ls-mastery-row { grid-template-columns:90px 1fr 35px; }
}

@media (prefers-reduced-motion: reduce) {
    .ls-scene,.ls-board-step,.ls-compare-item,.ls-hotspot,.ls-mic,.ls-worked-step,.ls-worked-step-no,.ls-worked-operation,.ls-writing-pen,.ls-written-line,.ls-visual-cue,.ls-visual-cue::after,.ls-cue-arrow-path,.ls-cue-arrow-head,.ls-cue-arrow-label,.ls-worked-result,.ls-worked-warning,.ls-worked-transfer,.ls-worked-journey *,.ls-pedagogy-shell *,.ls-practice-stage *,.teaching-dimension-card,.ls-legacy-motion>*,.ls-science-layout * { animation:none!important; transition:none!important; }
}