/* Class slides: the briefing-screen stage, visuals, animations. */
/* ── Class presentations: a fixed "briefing screen" look in both themes ── */
.stage-wrap { display: flex; flex-direction: column; gap: 12px; }
.lesson.pres { overflow: hidden; background: #0B1528; }
.lesson.pres .lesson-head { display: none; }
.lesson.pres .stage-wrap { position: fixed; inset: 0; z-index: 5; background: #0B1528; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) max(14px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 12px) max(14px, env(safe-area-inset-left, 0px)); }
.lesson.pres .stage-box { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.lesson.pres .stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; overflow: visible; min-height: 0; }
.lesson.pres .thumbs, .lesson.pres .deck-bar .muted { display: none; }
.lesson.pres .deck-bar .btn:not(.primary) { background: #172A4B; color: #EEF2F8; border-color: #33507E; }
.lesson.pres .deck-bar .btn.on { background: #EEF2F8; color: #0B1528; }
.lesson.pres .deck-bar .prog { background: #172A4B; border-color: #33507E; }
.lesson.pres .pic-box { width: 100%; max-width: calc(52vh * 400 / 240); margin: 0 auto; }
.lesson.pres .mm { max-width: calc(56vh * 1.6); margin: 0 auto; }
.lesson.pres .cy { width: min(100%, 56vh); }
.lesson.pres .kid { font-size: clamp(1rem, 1.5vw, 1.5rem); }
.lesson.pres .stage-top h3 { font-size: clamp(1.6rem, 3vw, 3.1rem); }
.stage-wrap:fullscreen { background: #0B1528; padding: 24px max(24px, env(safe-area-inset-left, 0px)); overflow-y: auto; justify-content: center; }
.stage { --s-bg: #0E1B33; --s-panel: #172A4B; --s-panel-2: #1E365E; --s-ink: #EEF2F8; --s-dim: #A9B7CC; --s-line: #33507E;
  --s-brass: #E0AE4C; --s-sea: #3BA3B0; --s-ok: #57C990; --s-bad: #F28C82; --s-kid: #FFF4DA; --s-kid-ink: #2B2108;
  container-type: inline-size; background: radial-gradient(120% 90% at 85% 0%, #1A3360 0%, var(--s-bg) 60%); color: var(--s-ink);
  border-radius: 12px; padding: clamp(16px, 3cqw, 32px); min-height: 440px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; position: relative; }
.stage-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.stage-top .num { font-family: var(--f-mono); font-size: .8rem; color: var(--s-dim); }
.stage-top h3 { font-family: var(--f-display); font-size: clamp(1.45rem, 3.4cqw, 2.2rem); line-height: 1.05; letter-spacing: .01em; flex: 1 1 260px; }
.slide-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; flex: 1; align-items: center; }
@container (min-width: 860px) { .slide-grid.side { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.visual { min-width: 0; }
.kid { background: var(--s-kid); color: var(--s-kid-ink); border-radius: 12px; padding: 16px 18px; position: relative; font-size: clamp(.95rem, 1.6cqw, 1.08rem); line-height: 1.55; }
.kid::before { content: ""; position: absolute; top: -9px; left: 26px; border: 9px solid transparent; border-top: 0; border-bottom-color: var(--s-kid); }
@container (min-width: 860px) { .side .kid::before { top: 24px; left: -9px; border: 9px solid transparent; border-left: 0; border-right-color: var(--s-kid); } }
.kid-h { font-family: var(--f-display); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: #8A5A00; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.guide { width: 60px; height: 60px; flex-shrink: 0; overflow: visible; animation: k-bounce 3.2s ease-in-out infinite; }
.guide .salute { transform-box: view-box; transform-origin: 54px 60px; animation: k-salute 3.2s ease-in-out infinite; }
@keyframes k-bounce { 50% { translate: 0 -3px; } }
@keyframes k-salute { 0%, 55%, 100% { rotate: 0deg; } 65% { rotate: -10deg; } 75% { rotate: 4deg; } 85% { rotate: -6deg; } }
.score { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; color: var(--ink); background: var(--brass-soft); border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; }
.score svg { width: 16px; height: 16px; fill: var(--brass); }
.lesson.pres .score { background: #172A4B; color: #EEF2F8; border-color: #33507E; }
.lesson.pres .hint { display: none; }
.pres-bar { flex-wrap: nowrap; }
.pres-bar .prog { min-width: 40px; }
@media (max-width: 520px) { .pres-bar .btn { padding: 6px 10px; font-size: .8rem; } .pres-bar .score { padding: 3px 8px; } }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; }
.confetti i { position: absolute; top: -12px; left: var(--x); width: 9px; height: 14px; background: var(--c); border-radius: 2px; animation: k-fall var(--d) cubic-bezier(.3,.6,.5,1) forwards; animation-delay: var(--w); }
@keyframes k-fall { to { translate: var(--dx) 1400px; rotate: var(--r); opacity: .2; } }
.qk-b.wrong { animation: k-shake .45s ease; }
@keyframes k-shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
.sc-a.win { animation: k-pop .5s cubic-bezier(.2,.8,.2,1); }
.kid-r { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #D9C08A; font-weight: 600; }
.kid-r b { font-family: var(--f-display); letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; color: #8A5A00; margin-right: 6px; }
.deck-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.deck-bar .prog { flex: 1 1 140px; height: 6px; background: var(--sunk); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.deck-bar .prog i { display: block; height: 100%; background: var(--brass); transition: width .4s; }
.deck-bar .tools { display: flex; gap: 6px; flex-wrap: wrap; }
.btn.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.thumbs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.thumbs button { flex-shrink: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 4px 9px; font-size: .74rem; color: var(--ink-2); font-weight: 600; }
.thumbs button.on { border-color: var(--brass); color: var(--ink); box-shadow: inset 0 -2px 0 var(--brass); }

/* entrance animations: elements are visible at rest; motion only plays on top */
.a-pop, .a-rise, .a-drop, .a-slide, .a-left, .a-right, .a-flip, .a-tick, .a-grow, .a-growy, .a-draw { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); animation-fill-mode: backwards; animation-delay: calc(var(--i, 0) * var(--step, 150ms) + 120ms); }
.a-pop { animation-name: k-pop; } .a-rise { animation-name: k-rise; } .a-drop { animation-name: k-drop; } .a-slide { animation-name: k-slide; }
.a-left { animation-name: k-left; } .a-right { animation-name: k-right; } .a-flip { animation-name: k-flip; } .a-tick { animation-name: k-tick; animation-delay: calc(var(--i, 0) * var(--step, 150ms) + 520ms); }
.a-grow { animation-name: k-grow; transform-origin: left center; animation-duration: 1.1s; } .a-growy { animation-name: k-growy; transform-origin: center top; }
.a-draw { animation-name: k-draw; animation-duration: .9s; stroke-dasharray: 1; }
@keyframes k-pop { from { opacity: 0; scale: .55; } } @keyframes k-rise { from { opacity: 0; translate: 0 22px; } } @keyframes k-drop { from { opacity: 0; translate: 0 -18px; } }
@keyframes k-slide { from { opacity: 0; translate: -30px 0; } } @keyframes k-left { from { opacity: 0; translate: -40px 0; } } @keyframes k-right { from { opacity: 0; translate: 40px 0; } }
@keyframes k-flip { from { opacity: 0; transform: perspective(600px) rotateY(90deg); } } @keyframes k-tick { from { opacity: 0; scale: 0; } 70% { scale: 1.25; } }
@keyframes k-grow { from { scale: 0 1; } } @keyframes k-growy { from { scale: 1 0; } } @keyframes k-draw { from { stroke-dashoffset: 1; } }
@keyframes k-spin { to { rotate: 360deg; } } @keyframes k-wave { to { translate: -600px 0; } } @keyframes k-pulse { from { r: 4; opacity: .9; } to { r: 92; opacity: 0; } }
@keyframes k-sail { from { top: 0; } to { top: calc(100% - 22px); } } @keyframes k-bob { 50% { translate: 0 -4px; } }

/* cover */
.sl-cover { display: flex; flex-direction: column; gap: 10px; justify-content: center; min-height: 240px; position: relative; padding-bottom: 70px; }
.sl-cover .k { font-family: var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--s-brass); font-size: .95rem; }
.sl-cover .big { font-family: var(--f-display); font-size: clamp(2.6rem, 9cqw, 5.4rem); line-height: .92; letter-spacing: .005em; }
.sl-cover .sub { color: var(--s-dim); font-size: clamp(1rem, 2cqw, 1.25rem); max-width: 40ch; }
.waves { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; width: 100%; }
.waves path { animation: k-wave 9s linear infinite; }
.waves .w2 { animation-duration: 14s; opacity: .55; }
/* infographic numbers */
.sl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.sl-stats .st { background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.sl-stats b { font-family: var(--f-display); font-size: clamp(2.6rem, 7cqw, 4rem); line-height: 1; color: var(--s-brass); font-variant-numeric: tabular-nums; }
.sl-stats b small { font-size: .45em; color: var(--s-dim); margin-left: 4px; }
.sl-stats span { font-weight: 700; }
.sl-stats em { font-style: normal; color: var(--s-dim); font-size: .86rem; }
/* mind map */
.mm { position: relative; aspect-ratio: 16 / 10; width: 100%; }
.mm svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm path { stroke: var(--s-sea); stroke-width: .5; fill: none; }
.mm-c, .mm-n { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%; text-align: center; }
.mm-c { --x: 50; --y: 50; background: var(--s-brass); color: #1D1505; font-family: var(--f-display); font-size: clamp(1.05rem, 2.6cqw, 1.5rem); padding: 14px 18px; border-radius: 999px; max-width: 30%; line-height: 1.05; box-shadow: 0 0 0 8px rgba(224,174,76,.18); }
.mm-n { background: var(--s-panel-2); border: 1.5px solid var(--s-sea); border-radius: 12px; padding: 8px 12px; max-width: 27%; }
.mm-n b { display: block; font-size: clamp(.82rem, 1.7cqw, 1rem); }
.mm-n span { display: block; font-size: clamp(.7rem, 1.35cqw, .82rem); color: var(--s-dim); line-height: 1.3; margin-top: 2px; }
@container (max-width: 620px) {
  .mm { aspect-ratio: auto; display: flex; flex-direction: column; gap: 8px; padding-left: 18px; border-left: 3px solid var(--s-sea); }
  .mm svg { display: none; }
  .mm-c, .mm-n { position: static; translate: none; max-width: none; text-align: left; }
  .mm-c { border-radius: 10px; margin-left: -30px; }
}
/* roadmap */
.rm { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.rm-road { position: absolute; top: 0; bottom: 0; left: 50%; width: 18px; translate: -50% 0; background: #2A3A57; border-radius: 9px; }
.rm-road::after { content: ""; position: absolute; top: 8px; bottom: 8px; left: 8px; width: 2px; background: repeating-linear-gradient(var(--s-brass) 0 10px, transparent 10px 20px); }
.rm-boat { position: absolute; left: -5px; width: 28px; height: 22px; background: var(--s-sea); clip-path: polygon(0 45%, 100% 45%, 82% 100%, 18% 100%); animation: k-sail var(--sail, 4s) ease-in-out .3s both; z-index: 2; }
.rm-boat::before { content: ""; position: absolute; left: 11px; top: 0; width: 10px; height: 10px; background: var(--s-ink); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.rm-stop + .rm-stop { margin-top: -20px; }
.rm.long .rm-stop + .rm-stop { margin-top: -30px; }
.rm.long .rm-stop > div { padding: 6px 12px; }
.rm-stop { position: relative; width: 50%; padding: 8px 34px 8px 0; display: flex; justify-content: flex-end; text-align: right; gap: 10px; align-items: center; }
.rm-stop:nth-of-type(even) { align-self: flex-end; padding: 8px 0 8px 34px; justify-content: flex-end; text-align: left; flex-direction: row-reverse; }
.rm-stop > div { background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 10px; padding: 8px 12px; min-width: 0; }
.rm-stop b { display: block; font-size: .95rem; }
.rm-stop p { font-size: .8rem; color: var(--s-dim); margin: 0; }
.rm-n { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--s-brass); color: #1D1505; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 600; font-size: .85rem; position: absolute; right: -15px; z-index: 3; }
.rm-stop:nth-of-type(even) .rm-n { right: auto; left: -15px; }
@container (max-width: 620px) {
  .rm-stop + .rm-stop, .rm.long .rm-stop + .rm-stop { margin-top: 0; }
  .rm-road { left: 15px; translate: 0; }
  .rm-stop, .rm-stop:nth-of-type(even) { width: auto; align-self: stretch; padding: 6px 0 6px 46px; justify-content: flex-start; text-align: left; flex-direction: row; }
  .rm-n, .rm-stop:nth-of-type(even) .rm-n { left: 9px; right: auto; }
  .rm-boat { left: 1px; }
}
/* timeline */
.tl { --n: 4; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
.tl-line { position: absolute; left: 0; right: 0; top: calc(1.6em + 9px); height: 4px; background: var(--s-sea); border-radius: 2px; }
.tl-i { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tl-t { font-family: var(--f-mono); color: var(--s-brass); font-size: .82rem; height: 1.6em; display: flex; align-items: flex-end; }
.tl-i i { width: 22px; height: 22px; border-radius: 50%; background: var(--s-bg); border: 4px solid var(--s-brass); position: relative; z-index: 1; }
.tl-i b { font-size: 1rem; }
.tl-i p { font-size: .82rem; color: var(--s-dim); margin: 0; }
@container (max-width: 620px) {
  .tl { grid-template-columns: 1fr; gap: 14px; padding-left: 36px; }
  .tl-line { top: 0; bottom: 0; left: 9px; right: auto; width: 4px; height: auto; transform-origin: center top; animation-name: k-growy; }
  .tl-i { position: relative; }
  .tl-i i { position: absolute; left: -36px; top: 2px; }
  .tl-t { height: auto; }
}
/* cycle */
.cy { position: relative; aspect-ratio: 1; width: min(100%, 470px); margin: 0 auto; }
.cy svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cy .ring { fill: none; stroke: var(--s-line); stroke-width: 7; }
.cy .ring2 { fill: none; stroke: var(--s-sea); stroke-width: 1.2; stroke-dasharray: 3 4; transform-origin: 50px 50px; animation: k-spin 24s linear infinite; }
.cy .arr { fill: var(--s-brass); }
@container (max-width: 560px) { .cy { width: 84%; } .cy-n { width: 33%; padding: 6px; } }
.cy-c { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 38%; text-align: center; font-family: var(--f-display); font-size: clamp(1rem, 3.4cqw, 1.4rem); line-height: 1.05; color: var(--s-dim); }
.cy-n { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%; width: 31%; background: var(--s-panel-2); border: 2px solid var(--s-brass); border-radius: 14px; padding: 8px; text-align: center; }
.cy-n b { display: block; font-size: clamp(.8rem, 2.4cqw, 1rem); }
.cy-n span { display: block; font-size: clamp(.66rem, 1.9cqw, .78rem); color: var(--s-dim); line-height: 1.25; }
.cy-n .num { font-family: var(--f-mono); color: var(--s-brass); font-size: .72rem; }
/* pyramid */
.py { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.py-l { width: var(--w); min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px 14%; color: #fff;
  background: var(--c); clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%); }
.py-l:first-child { clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); padding-top: 18px; }
.py-l b { font-family: var(--f-display); font-size: clamp(1rem, 2.4cqw, 1.3rem); letter-spacing: .03em; line-height: 1.05; }
.py-l span { font-size: clamp(.7rem, 1.6cqw, .84rem); opacity: .88; }
/* org chart */
.tr { display: flex; flex-direction: column; align-items: center; }
.tr-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tr-n { background: var(--s-panel-2); border: 1.5px solid var(--s-line); border-radius: 10px; padding: 8px 14px; text-align: center; min-width: 120px; }
.tr-n.hl { background: var(--s-brass); color: #1D1505; border-color: var(--s-brass); }
.tr-n.hl span { color: #4A3608; }
.tr-n b { display: block; font-size: .95rem; }
.tr-n span { font-size: .76rem; color: var(--s-dim); }
.tr-link { width: 3px; height: 18px; background: var(--s-sea); }
/* donut */
.dn { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }
.dn svg { width: min(260px, 70cqw); height: auto; rotate: -90deg; }
.dn circle { fill: none; stroke-width: 7; animation: k-seg 1.2s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 500ms + 200ms); }
@keyframes k-seg { from { stroke-dasharray: 0 100; } }
.dn-wrap { position: relative; }
.dn-c { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: clamp(1.6rem, 5cqw, 2.4rem); }
.dn-legend { display: flex; flex-direction: column; gap: 12px; }
.dn-legend div { display: grid; grid-template-columns: 18px auto; gap: 2px 10px; align-items: center; }
.dn-legend i { width: 18px; height: 18px; border-radius: 4px; background: var(--c); }
.dn-legend b { font-family: var(--f-display); font-size: 1.5rem; line-height: 1; }
.dn-legend span { grid-column: 2; color: var(--s-dim); font-size: .88rem; }
/* chevron process */
.cv { display: flex; gap: 4px; }
.cv-i { flex: 1 1 0; min-width: 0; background: var(--c, var(--s-panel-2)); padding: 16px 26px 16px 30px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%); display: flex; flex-direction: column; justify-content: center; }
.cv-i:first-child { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); padding-left: 16px; }
.cv-i b { font-family: var(--f-display); font-size: clamp(1rem, 2.2cqw, 1.3rem); letter-spacing: .03em; line-height: 1.05; }
.cv-i span { font-size: .8rem; color: var(--s-ink); opacity: .82; line-height: 1.3; margin-top: 3px; }
@container (max-width: 620px) {
  .cv { flex-direction: column; gap: 2px; }
  .cv-i, .cv-i:first-child { padding: 14px 18px 24px; clip-path: polygon(0 0, 50% 12px, 100% 0, 100% calc(100% - 12px), 50% 100%, 0 calc(100% - 12px)); padding-top: 20px; }
  .cv-i:first-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% 100%, 0 calc(100% - 12px)); padding-top: 14px; }
}
/* memory letters */
.lt-word { font-family: var(--f-display); font-size: clamp(1.4rem, 4.4cqw, 2.4rem); letter-spacing: .14em; color: var(--s-brass); text-align: center; margin-bottom: 12px; }
.lt { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.lt.wide { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lt-i { background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 10px; padding: 10px; --step: 90ms; }
.lt-i.hl { border-color: var(--s-brass); background: #3A3016; }
.lt-i span { font-family: var(--f-display); font-size: 2rem; line-height: 1; color: var(--s-brass); }
.lt-i b { display: block; font-size: .9rem; }
.lt-i p { font-size: .76rem; color: var(--s-dim); margin: 2px 0 0; line-height: 1.3; }
/* compare */
.cp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container (max-width: 560px) { .cp { grid-template-columns: 1fr; } }
.cp-col { background: var(--s-panel); border-radius: 12px; padding: 14px; border-top: 4px solid var(--tc); display: flex; flex-direction: column; gap: 8px; }
.cp-col h4 { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: .04em; color: var(--tc); }
.cp-i { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; font-size: .92rem; }
.cp-i i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: var(--tc); color: var(--s-bg); }
/* range rings */
.rg { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; }
.rg svg { width: min(340px, 80cqw); height: auto; }
.rg .sea { fill: #123E58; }
.rg .ring { fill: none; stroke-width: 1.4; }
.rg .a-pop, .cy .a-pop { transform-box: fill-box; transform-origin: center; }
.rg .pulse { fill: none; stroke: var(--s-ink); stroke-width: .8; animation: k-pulse 3s ease-out infinite; }
.rg text { fill: var(--s-ink); font-family: var(--f-body); font-size: 8px; font-weight: 600; }
.rg-legend { display: flex; flex-direction: column; gap: 12px; max-width: 280px; }
.rg-legend > div { display: flex; gap: 10px; align-items: flex-start; }
.rg-legend i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--c); flex-shrink: 0; margin-top: 3px; }
.rg-legend b { font-family: var(--f-display); font-size: 1.5rem; line-height: 1; display: block; }
.rg-legend span { color: var(--s-dim); font-size: .86rem; }
/* venn */
.vn svg { width: min(100%, 460px); height: auto; display: block; margin: 0 auto; overflow: visible; }
.vn circle { opacity: .55; mix-blend-mode: screen; transform-box: fill-box; transform-origin: center; animation: k-vn .9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 180ms + 100ms); }
@keyframes k-vn { from { translate: var(--dx) var(--dy); opacity: 0; } }
.vn text { fill: var(--s-ink); font-family: var(--f-body); font-size: 11px; font-weight: 700; text-anchor: middle; }
.vn .mid { font-family: var(--f-display); font-size: 13px; fill: #fff; animation: k-pop .6s backwards 1s; transform-box: fill-box; transform-origin: center; }
/* checklist */
.ck { display: flex; flex-direction: column; gap: 8px; }
.ck-i { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 10px; padding: 10px 14px; }
.ck-box { width: 30px; height: 30px; border-radius: 8px; background: var(--s-ok); color: var(--s-bg); display: grid; place-items: center; font-weight: 900; font-style: normal; }
.ck-i b { display: block; font-size: 1rem; }
.ck-i p { font-size: .84rem; color: var(--s-dim); margin: 0; }
/* scenario */
.sc { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sc-q { background: var(--s-panel); border-left: 5px solid var(--s-brass); border-radius: 10px; padding: 16px 18px; font-size: clamp(1rem, 2cqw, 1.15rem); line-height: 1.55; }
.sc-q .tag, .sc-a .tag { font-family: var(--f-display); letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; color: var(--s-brass); display: block; margin-bottom: 4px; }
.sc-a { background: #123B2C; border-left: 5px solid var(--s-ok); border-radius: 10px; padding: 16px 18px; line-height: 1.55; }
.sc-a .tag { color: var(--s-ok); }
.sc .btn { background: var(--s-brass); color: #1D1505; border-color: var(--s-brass); }
.sc .think { color: var(--s-dim); font-size: .88rem; }
.sc-a.miss { background: #3B1B1B; border-left-color: var(--s-bad); }
.sc-a.miss .tag { color: var(--s-bad); }
/* pictures */
.pic { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pic-box { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--s-line); }
.pic-box svg { display: block; width: 100%; height: auto; }
.pic-box svg text { font-family: var(--f-body); fill: #EEF2F8; font-size: 10px; font-weight: 600; }
.pic-box svg .a-pop, .pic-box svg .a-left { transform-box: fill-box; transform-origin: center; }
.pin { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%; width: 26px; height: 26px; border-radius: 50%; background: var(--s-brass); color: #1D1505;
  font-family: var(--f-mono); font-weight: 700; font-size: .8rem; display: grid; place-items: center; box-shadow: 0 0 0 3px rgba(14,27,51,.85), 0 0 0 6px rgba(224,174,76,.35); }
.pic-key { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 14px; }
.pic-key li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; font-size: .9rem; }
.pic-key li > span { width: 22px; height: 22px; border-radius: 50%; background: var(--s-brass); color: #1D1505; display: grid; place-items: center; font-family: var(--f-mono); font-size: .74rem; font-weight: 700; }
.pic-key em { font-style: normal; color: var(--s-dim); }
.bob { animation: k-bob 2.6s ease-in-out infinite; }
.drift { animation: k-drift 6s ease-in-out infinite alternate; }
@keyframes k-drift { to { translate: 12px 0; } }
.ping { animation: k-ping 1.6s ease-out infinite; opacity: 0; }
@keyframes k-ping { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; translate: 8px 0; } }
@container (max-width: 520px) { .pin { width: 20px; height: 20px; font-size: .68rem; } }
/* quote */
.qt { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; }
.qt-mark { font-family: var(--f-display); font-size: 6rem; line-height: .6; color: var(--s-brass); height: .55em; }
.qt-text { font-family: var(--f-display); font-size: clamp(1.8rem, 5.2cqw, 3.2rem); line-height: 1.05; max-width: 22ch; text-wrap: balance; }
.qt-by { color: var(--s-dim); font-size: .95rem; }
.qt-by::before { content: "\2014  "; }
/* quick check */
.qk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
@container (max-width: 560px) { .qk { grid-template-columns: 1fr; } }
.qk-b { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--s-panel); border: 1.5px solid var(--s-line); border-radius: 10px; padding: 12px; color: var(--s-ink); font-size: .95rem; }
.qk-b span { flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; background: var(--s-panel-2); display: grid; place-items: center; font-family: var(--f-mono); font-size: .8rem; color: var(--s-brass); }
.qk-b:not([disabled]):hover { border-color: var(--s-brass); }
.qk-b.right { border-color: var(--s-ok); background: #123B2C; } .qk-b.right span { background: var(--s-ok); color: var(--s-bg); }
.qk-b.wrong { border-color: var(--s-bad); background: #3B1B1B; } .qk-b.wrong span { background: var(--s-bad); color: var(--s-bg); }
.qk-b.dim { opacity: .5; }
/* flip cards */
.fl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.fl-c { background: none; border: 0; padding: 0; color: inherit; perspective: 900px; text-align: left; }
.fl-in { display: grid; transition: transform .6s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; min-height: 120px; }
.fl-c.on .fl-in { transform: rotateY(180deg); }
.fl-f, .fl-b { grid-area: 1 / 1; backface-visibility: hidden; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.fl-f { background: var(--s-panel-2); border: 1.5px solid var(--s-sea); font-weight: 700; font-size: 1rem; }
.fl-f small { font-weight: 500; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--s-sea); }
.fl-b { background: var(--s-brass); color: #1D1505; transform: rotateY(180deg); font-size: .95rem; font-weight: 600; }
/* bar chart */
.br { display: flex; flex-direction: column; gap: 14px; }
.br-r { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.br-l { font-size: .9rem; color: var(--s-dim); }
.br-t { height: 26px; background: #1A2C4C; border-radius: 6px; overflow: hidden; }
.br-t i { display: block; height: 100%; background: var(--s-sea); border-radius: 6px; }
.br-t i.hl { background: var(--s-brass); }
.br-r b { font-family: var(--f-display); font-size: 1.3rem; min-width: 4ch; }
.br-n { color: var(--s-dim); font-size: .82rem; margin-top: 10px; }
@container (max-width: 520px) { .br-r { grid-template-columns: minmax(0, 1fr) auto; } .br-l { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }