@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@500;600&display=swap");
/* =====================================================================================================
   VooSquare Academy: the lesson as a film (Nov 2026 redesign). Loaded after school.css and voice.css; everything is
   scoped to .px (the lesson player, app-school.js openLesson).
   - A bright, quiet page frames one graphite screen (16:9 on wide screens). Controls and captions sit on the screen
     like a video player; on phones the captions and controls sit in a band under the picture so they never cover it.
   - The screen is never a still: every part plays over real photography that pans and zooms slowly (Ken Burns, varied
     per shot) and changes every few sentences with a cross-dissolve; headlines build in word by word; the diagram
     builds as it is explained and the item being talked about lights up. Slides cross-dissolve, never hard-cut.
   - Everything holds while the voice is paused (.px-hold), follows seeking, is still with reduced motion, and animates
     transform and opacity only. No pulsing dots, rings or ripples. No cartoons. One accent: the Academy's deep blue (#1E46F0), set in Geist like the Academy site.
   ===================================================================================================== */
.px {
  --px-bg: #FFFFFF; --px-rail: #F6F7F9; --px-ink: #0E1116; --px-ink2: #2B303A; --px-mut: #646B78; --px-line: #E7E9EE;
  --px-scr: #0C0E12; --px-acc: #1E46F0; --px-acc-d: #1E46F0; --px-acc-t: #8FA5FF; --px-f: "Geist", var(--f-d), system-ui, -apple-system, "Segoe UI", sans-serif; --px-e: cubic-bezier(.2,.8,.2,1);
  /* the dark surfaces the slides are drawn with: graphite instead of green */
  --night: #0E1116; --night2: #161A21; --night3: #1E232C; --nline: #2A2F39; --ntext: #B7BDC8; --muted2: #8E95A3;
  --lime: #FFFFFF;
}
.px.player, .px.player button, .px.player input { font-family: var(--px-f); }
.px.player { background: var(--px-bg); padding: 0; place-items: stretch; -webkit-backdrop-filter: none; backdrop-filter: none; }
.px .pl.ssp { width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; border: 0; box-shadow: none; background: var(--px-bg); color: var(--px-ink); animation: fadein .2s; }

/* ---------- top bar ---------- */
.px .ssp-top { background: rgba(255,255,255,.92); border-bottom: 1px solid var(--px-line); padding: 10px max(18px, env(safe-area-inset-right, 0px)) 10px max(14px, env(safe-area-inset-left, 0px)); padding-top: max(10px, env(safe-area-inset-top, 0px)); gap: 14px; }
.px .ssp-x { width: 38px; height: 38px; background: transparent; color: var(--px-ink); border: 1px solid var(--px-line); }
.px .ssp-x:hover { background: var(--px-rail); }
.px .ssp-x .ico { width: 18px; height: 18px; }
.px .ssp-tt b { color: var(--px-ink); font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.px .ssp-tt small { color: var(--px-mut); font-size: 12.5px; font-weight: 500; }
.px .ssp-who { background: transparent; border: 0; color: var(--px-ink2); font-weight: 600; font-size: 13px; padding: 0; }
.px .ssp-who .av { border: 0; }
.px .ssp-who span small { color: var(--px-mut); font-weight: 500; }
.px .px-mono { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--px-ink); color: #fff; font-weight: 700; font-size: 13px; }
.px .ssp-gl { border: 1px solid var(--px-line); color: var(--px-ink); font-weight: 600; padding: 8px 13px; }
.px .ssp-gl:hover, .px .ssp-gl[aria-expanded="true"] { background: var(--px-rail); }
.px .ssp-gl i { background: var(--px-rail); color: var(--px-ink2); border: 1px solid var(--px-line); font-weight: 700; }
.px .ssp-glossary { box-shadow: 0 30px 80px -24px rgba(14,17,22,.3), 0 0 0 1px var(--px-line); background: #fff; border-radius: 16px; }
.px .ssp-glossary dt { color: var(--px-ink); }
.px .ssp-bars { display: none; }

/* ---------- page: screen + text, chapters on the right ---------- */
.px .px-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.px .ssp-body { display: block; overflow-y: auto; padding: 30px clamp(20px, 3.2vw, 48px) 56px; background: var(--px-bg); }
.px .ssp-body > * { flex: initial; }
.px .px-ch { display: none; }
@media (min-width: 1100px) {
  .px .px-main { grid-template-columns: minmax(0, 1fr) 330px; }
  .px .px-ch { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-left: 1px solid var(--px-line); background: #fff; padding: 22px 14px 28px; }
}
.px .px-ch-h { padding: 0 10px 14px; display: grid; gap: 3px; border-bottom: 1px solid var(--px-line); margin-bottom: 8px; }
.px .px-ch-h b { font-size: 16px; font-weight: 700; letter-spacing: -.015em; color: var(--px-ink); }
.px .px-ch-h small { font-size: 13px; color: var(--px-mut); font-weight: 500; }
.px .px-ch ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.px .px-ch button { position: relative; width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 10px; border-radius: 10px; text-align: left; color: var(--px-ink2); font-size: 13.5px; font-weight: 500; line-height: 1.35; transition: background .15s, color .15s; }
.px .px-ch button:hover { background: var(--px-rail); }
.px .px-ch button.on { background: var(--px-rail); color: var(--px-ink); font-weight: 600; }
.px .px-ch button.on::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--px-acc); }
.px .px-ch button.on::after { content: ""; position: absolute; left: 44px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--px-acc); opacity: .85; transform-origin: left; transform: scaleX(var(--cf, 0)); transition: transform .25s linear; }
.px .px-ch button.on { padding-bottom: 14px; }
.px .px-n { width: 24px; height: 20px; display: grid; place-items: center start; color: var(--px-mut); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; background: none; border-radius: 0; }
.px .px-n .ico { width: 14px; height: 14px; }
.px .px-ch button.seen .px-n { color: var(--px-acc-d); }
.px .px-ch button.on .px-n { color: var(--px-ink); }
.px .px-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.px .px-d { font-size: 12px; color: var(--px-mut); font-variant-numeric: tabular-nums; padding-top: 1px; }

/* ---------- the screen ---------- */
.px .px-screen {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  width: min(100%, 1100px, calc((100dvh - 200px) * 16 / 9)); aspect-ratio: 16 / 9; margin: 0 auto;
  background: var(--px-scr); color: #fff; border-radius: 14px;
  /* a bright bezel: white rim, hairline edge and a soft drop, like a screen set into a clean page */
  box-shadow: 0 0 0 1px rgba(14,17,22,.08), 0 0 0 7px #fff, 0 0 0 8px var(--px-line), 0 2px 4px 8px rgba(14,17,22,.03), 0 36px 70px -34px rgba(14,17,22,.5);
}
.px .px-screen .ssp-stage { position: relative; z-index: 1; flex: 1; min-height: 0; margin: 0; border-radius: 0; padding: 30px 32px 150px; overflow-y: auto; scrollbar-width: none; background: transparent; align-content: center; }
.px .px-screen .ssp-stage::-webkit-scrollbar { display: none; }
.px .px-screen .vl-stage::before { display: none; }
.px .px-screen.has-kick .ssp-stage { padding-top: 64px; }

/* the film: photography that moves, a scrim so type stays readable, a soft vignette and a little grain */
.px .px-film { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--px-scr); pointer-events: none; }
.px .px-ph { position: absolute; inset: -3%; will-change: transform; animation: pxKB 24s cubic-bezier(.3,.1,.3,1) both; animation-delay: var(--px-off, 0s); }
.px .px-ph + .px-ph { opacity: 0; transition: opacity 1.6s ease; }
.px .px-ph.in { opacity: 1; }
.px .px-ph i { position: absolute; inset: 0; background: #1A1D23 center / cover no-repeat; }
@keyframes pxKB { from { transform: translate3d(var(--x0, 0), var(--y0, 0), 0) scale(var(--s0, 1.08)); } to { transform: translate3d(var(--x1, 0), var(--y1, 0), 0) scale(var(--s1, 1.18)); } }
.px .px-film.t-hero .px-ph { opacity: .5; } .px .px-film.t-hero .px-ph + .px-ph:not(.in) { opacity: 0; }
.px .px-film.t-mid .px-ph { opacity: .22; } .px .px-film.t-mid .px-ph + .px-ph:not(.in) { opacity: 0; }
.px .px-film.t-dense .px-ph { opacity: .1; } .px .px-film.t-dense .px-ph + .px-ph:not(.in) { opacity: 0; }
.px .px-film::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 100% at 50% 42%, rgba(12,14,18,.1) 0%, rgba(12,14,18,.55) 62%, rgba(12,14,18,.92) 100%), linear-gradient(180deg, rgba(12,14,18,.35), rgba(12,14,18,0) 30%, rgba(12,14,18,0) 60%, rgba(12,14,18,.75)); }
.px .px-film::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.px .px-screen::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 120px rgba(0,0,0,.35); }
.px .px-screen .ssp-stage.px-on-photo { background: transparent; }

/* the part's title on the screen, top left, building in word by word */
.px .px-kick { position: absolute; z-index: 3; left: clamp(18px, 2.4vw, 30px); top: clamp(16px, 2vw, 24px); right: 30%; display: flex; align-items: baseline; gap: 12px; pointer-events: none; }
.px .px-kick span { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--px-acc-t); font-variant-numeric: tabular-nums; }
.px .px-kick b { font-size: clamp(13px, 1.15vw, 15px); font-weight: 600; color: rgba(255,255,255,.86); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px .kw { display: inline-block; animation: pxW .6s var(--px-e) both; animation-delay: calc(var(--k) * 55ms + .15s); }
@keyframes pxW { from { opacity: 0; transform: translateY(.45em); } }

/* slide changes: the new picture settles in while the last one dissolves away (a still copy on top) */
.px .px-screen.px-enter .ssp-stage { animation: pxIn .8s var(--px-e) both; }
.px .px-screen.px-enter .ssp-stage.back { animation-name: pxInB; }
.px .px-screen.px-enter .px-film { animation: pxFilmIn 1s ease both; }
@keyframes pxIn { from { opacity: 0; transform: translate3d(1.2%, 0, 0) scale(1.02); } }
@keyframes pxInB { from { opacity: 0; transform: translate3d(-1.2%, 0, 0) scale(.985); } }
@keyframes pxFilmIn { from { transform: scale(1.04); } }
.px .px-ghost { position: absolute !important; inset: 0; z-index: 2; margin: 0 !important; width: auto !important; aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; box-shadow: none !important; border-radius: inherit; pointer-events: none; animation: pxOut .7s cubic-bezier(.4,0,.6,1) forwards; }
.px .px-ghost.px-gf > .ssp-stage { animation: pxOutF .7s var(--px-e) forwards !important; }
.px .px-ghost.px-gb > .ssp-stage { animation: pxOutB .7s var(--px-e) forwards !important; }
@keyframes pxOutF { to { transform: translate3d(-1.6%, 0, 0) scale(.985); } }
@keyframes pxOutB { to { transform: translate3d(1.6%, 0, 0) scale(1.02); } }
.px .px-ghost *, .px .px-ghost *::before, .px .px-ghost *::after { animation: none !important; transition: none !important; }
.px .px-ghost .ph-m { display: flex; }
@keyframes pxOut { to { opacity: 0; } }

/* paused: the whole picture holds (photos, builds, highlights), exactly like a paused video */
.px.px-hold .px-screen :is(.px-ph, .ssp-stage, .ssp-stage *, .px-kick *) { animation-play-state: paused !important; }
/* pausing shows the whole slide (app-voice.js reveals every part): those parts finish arriving instead of freezing half-in */
.px.px-hold .vl-build .vb.vb-in, .px.px-hold .vl-build .vb.vb-in * { animation-play-state: running !important; }

/* captions, like subtitles */
.px .px-screen .vn-cap { position: absolute; left: 0; right: 0; bottom: 78px; z-index: 4; min-height: 0; padding: 0 clamp(16px, 6vw, 90px); border: 0; background: none; pointer-events: none; display: flex; justify-content: center; }
.px .px-screen .vn-cap p { display: inline; max-width: 54ch; padding: 5px 12px 6px; border-radius: 8px; background: rgba(8,9,12,.74); -webkit-box-decoration-break: clone; box-decoration-break: clone; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.75; font-weight: 500; letter-spacing: -.003em; color: rgba(255,255,255,.6); text-wrap: balance; text-align: center; animation: pxCap .35s var(--px-e); }
@keyframes pxCap { from { opacity: 0; } }
.px .px-screen .vn-cap span { transition: color .2s; }
.px .px-screen .vn-cap span.lit, .px .px-screen .vn-cap p.still { color: #fff; }
.px .px-screen .vn-cap .vn-note { font-family: var(--px-f); font-style: normal; font-weight: 600; font-size: 15px; color: #fff; }

/* controls on the screen */
.px .px-screen .ssp-ctl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 30px 14px 10px; border: 0; background: linear-gradient(180deg, rgba(8,9,12,0), rgba(8,9,12,.8) 55%); color: #fff; }
.px .ssp-ctl .vn { display: contents; }
.px .ssp-ctl .cb { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 0; color: #fff; transition: background .15s; }
.px .ssp-ctl .cb:hover { transform: none; background: rgba(255,255,255,.12); }
.px .ssp-ctl .cb .ico { width: 19px; height: 19px; }
.px .ssp-ctl .cb.main { width: 40px; height: 40px; margin: 0; background: transparent; color: #fff; }
.px .ssp-ctl .cb.main.wide { width: auto; padding: 0 16px; height: 34px; border-radius: 999px; background: #fff; color: var(--px-ink); font-size: 13.5px; font-weight: 700; gap: 6px; }
.px .ssp-ctl .cb:disabled { opacity: .35; }
.px .ssp-ctl .cnt, .px .ssp-ctl .vn-eq, .px .ssp-ctl .vn-time { display: none; }
.px .ssp-ctl .vn-play { order: 1; width: 44px; height: 44px; }
.px .ssp-ctl .vn-ring { display: none; }
.px .ssp-ctl .vn-pi { width: 38px; height: 38px; background: #fff; color: var(--px-scr); }
.px .ssp-ctl .vn-pi .ico { width: 17px; height: 17px; }
.px .ssp-ctl [data-prev] { order: 2; }
.px .ssp-ctl [data-next] { order: 3; }
.px .ssp-ctl .px-gt { order: 4; padding: 0 8px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .01em; }
.px .ssp-ctl .vn-speed { order: 6; margin-left: auto; }
.px .ssp-ctl [data-vn="cc"] { order: 7; }
.px .ssp-ctl .vn-wide[data-vn="auto"] { order: 8; }
.px .ssp-ctl .vn-wide[data-vn="mute"] { order: 9; }
.px .ssp-ctl .vn-morebtn { order: 10; }
.px .ssp-ctl .px-fs { order: 11; margin-left: auto; }
.px .ssp-ctl .vn-speed ~ .px-fs, .px .ssp-ctl .vn-b ~ .px-fs { margin-left: 0; }
.px .ssp-ctl .vn-b { height: 34px; min-width: 34px; border-radius: 8px; background: transparent; border: 0; color: rgba(255,255,255,.88); font-weight: 600; }
.px .ssp-ctl .vn-b:hover { background: rgba(255,255,255,.12); color: #fff; }
.px .ssp-ctl .vn-b[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.14); border: 0; }
.px .ssp-ctl .vn-b[data-vn="mute"][aria-pressed="true"] { color: #FFD2A8; background: rgba(255,255,255,.1); }
.px .ssp-ctl .vn-speed { font-family: var(--px-f); font-size: 13px; font-weight: 700; padding: 0 8px; }
.px .ssp-ctl .vn-pop { position: absolute; right: 12px; bottom: 64px; left: auto; z-index: 6; background: #15181E; border-color: #2A2F39; border-radius: 14px; }
.px .vn-pop [aria-pressed="true"] .vn-sw { background: var(--px-acc); }
.px .vn-pop [aria-pressed="true"] .vn-sw::after { background: #fff; }

/* the timeline: the whole lesson, one segment per part */
.px .px-tl { order: -1; flex: 1 0 100%; position: relative; height: 18px; cursor: pointer; touch-action: none; margin-bottom: 4px; outline: none; }
.px .px-tl-tr { position: absolute; left: 0; right: 0; top: 7px; height: 3px; display: flex; gap: 2px; transition: height .12s, top .12s; }
.px .px-tl-tr i { min-width: 2px; border-radius: 2px; background: rgba(255,255,255,.24); }
.px .px-tl-f { position: absolute; left: 0; top: 7px; height: 3px; width: calc(var(--f, 0) * 100%); border-radius: 2px; background: #fff; pointer-events: none; transition: height .12s, top .12s; }
.px .px-tl-h { position: absolute; top: 3px; left: calc(var(--f, 0) * 100% - 6px); width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .12s; pointer-events: none; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.px .px-tl:hover .px-tl-tr, .px .px-tl.drag .px-tl-tr, .px .px-tl:hover .px-tl-f, .px .px-tl.drag .px-tl-f { top: 6px; height: 5px; }
.px .px-tl:hover .px-tl-h, .px .px-tl.drag .px-tl-h, .px .px-tl:focus-visible .px-tl-h { transform: scale(1); }
.px .px-tl:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,.5); border-radius: 6px; }
.px .ssp-ctl:not(:has(.vn)) .px-tl { pointer-events: none; }

/* off the screen (recap with the voice): a plain dark bar at the bottom of the page */
.px .pl > .ssp-ctl { background: var(--px-ink); border-top: 0; color: #fff; padding: 8px 14px; }
.px .pl > .ssp-ctl .px-tl, .px .pl > .ssp-ctl .px-fs, .px .pl > .ssp-ctl .px-gt { display: none; }
.px .pl > .vn-cap { background: var(--px-ink); border-top: 0; }

/* ---------- the poster (before play): a title card on a real photo ---------- */
.px .px-poster { justify-content: flex-end; }
.px .px-poster .co-art { display: none; }
.px .px-poster::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(12,14,18,.82) 0%, rgba(12,14,18,.45) 55%, rgba(12,14,18,.15) 100%), linear-gradient(180deg, rgba(12,14,18,0) 40%, rgba(12,14,18,.75) 100%); pointer-events: none; }
.px .px-pv { position: relative; z-index: 3; display: grid; justify-items: start; align-content: end; gap: 14px; height: 100%; padding: 28px clamp(22px, 5vw, 64px) clamp(30px, 6vw, 60px); text-align: left; }
.px .px-pv .co-k { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.82); letter-spacing: 0; text-transform: none; font-family: var(--px-f); }
.px .px-pv .co-k i { font-style: normal; color: rgba(255,255,255,.4); width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; }
.px .px-pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: -4px 0 0; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; animation: pxIn .6s .3s var(--px-e) both; }
.px .px-pmeta i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.45); }
.px .px-pv .co-title { font-size: clamp(30px, 4.6vw, 60px); line-height: 1.02; font-weight: 800; letter-spacing: -.04em; color: #fff; max-width: 16ch; text-wrap: balance; margin: 0; }
.px .px-pv .vn-listen, .px .px-pv .px-noplay { width: auto; grid-template-columns: auto auto; gap: 14px; padding: 6px 22px 6px 6px; margin-top: 10px; border-radius: 999px; background: #fff; border: 0; color: var(--px-ink); box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); transition: transform .2s var(--px-e); }
.px .px-pv .vn-listen:hover { background: #fff; transform: translateY(-1px); border: 0; }
.px .px-pv .vn-lp { width: 46px; height: 46px; background: var(--px-ink); color: #fff; }
.px .px-pv .vn-lp i, .px .px-pv .vn-lw { display: none; }
.px .px-pv .vn-lt b { font-size: 16px; font-weight: 700; color: var(--px-ink); }
.px .px-pv .vn-lt small { color: var(--px-mut); font-size: 12.5px; font-weight: 500; }
.px .px-poster .px-pv .vn-listen { animation: pxIn .6s .4s var(--px-e) both; }
.px .px-pv .vn-offline { color: rgba(255,255,255,.8); }
.px .px-pv .vn-offline .lnk { color: #fff; }

/* ---------- under the screen: the key point, the full words behind "Transcript" ---------- */
.px .px-below { width: min(100%, 1100px); margin: 26px auto 0; color: var(--px-ink); }
.px .ssp-text { padding: 0; max-width: 740px; animation: none; }
.px .ssp-text .sk { display: block; font-family: var(--px-f); font-size: 14px; font-weight: 500; color: var(--px-mut); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.px .ssp-text h3 { color: var(--px-ink); font-size: clamp(22px, 2.3vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; margin-top: 6px; }
.px .ssp-text .px-key { color: var(--px-ink2); font-size: 17px; line-height: 1.55; margin-top: 10px; max-width: 62ch; animation: vlIn .6s .35s var(--px-e) both; }
.px .ssp-text:has(.px-tr[open]) .px-key { display: none; }
.px .px-tr { margin-top: 14px; border-top: 1px solid var(--px-line); }
.px .px-tr summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 12px 0 4px; font-size: 14px; font-weight: 700; color: var(--px-ink); }
.px .px-tr summary::-webkit-details-marker { display: none; }
.px .px-tr summary .ico { width: 16px; height: 16px; transition: transform .25s var(--px-e); }
.px .px-tr[open] summary .ico { transform: rotate(180deg); }
.px .px-tr .px-tr-c { display: none; }
.px .px-tr[open] .px-tr-o { display: none; } .px .px-tr[open] .px-tr-c { display: inline; }
.px .px-trb { padding: 6px 0 4px; animation: vlIn .35s var(--px-e) both; }
.px .px-trb p { color: var(--px-ink2); font-size: 16.5px; line-height: 1.65; margin: 0 0 12px; max-width: 66ch; }
.px .px-trb h4 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--px-ink); margin: 18px 0 6px; }
.px .px-intro { display: grid; gap: 16px; justify-items: start; max-width: 1100px; }
.px .px-intro .sch-meta { color: var(--px-mut); }
.px .px-intro .ssp-obj { background: transparent; border: 0; border-top: 1px solid var(--px-line); border-radius: 0; padding: 18px 0 0; max-width: 740px; }
.px .px-intro .ssp-obj h4 { color: var(--px-ink); font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.px .px-intro .ssp-obj li { color: var(--px-ink); font-weight: 500; font-size: 16px; }
.px .px-intro .ssp-obj li .ico, .px .px-intro .co-tk { color: var(--px-acc-d); }
.px .px-intro .ssp-hint { color: var(--px-mut); }
.px .px-intro .btn-w .ico { width: 17px; height: 17px; }

/* ---------- recap, quiz and result: clean end cards on the page ---------- */
.px .px-card { width: min(100%, 780px); margin: 0 auto; background: #fff; color: var(--px-ink); border: 1px solid var(--px-line); border-radius: 18px; padding: clamp(22px, 3.4vw, 40px); box-shadow: 0 24px 60px -40px rgba(14,17,22,.35); }
.px .px-card .sk { font-family: var(--px-f); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--px-acc); }
.px .px-card h3 { color: var(--px-ink); letter-spacing: -.03em; }
.px .px-card .btn-l { background: var(--px-ink); color: #fff; border: 0; }
.px .px-card .btn-l:hover { opacity: .9; }
.px .px-card .btn-w, .px .px-card .ssp-ghost { background: #fff !important; color: var(--px-ink) !important; border: 1px solid var(--px-line) !important; }
.px .pe-badge { width: 44px; height: 44px; border-radius: 50%; background: var(--px-acc); color: #fff; animation: none; }
.px .pe-badge .ico { width: 22px; height: 22px; }
.px .pe-take h4 { font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--px-ink); }
.px .pe-take ul { gap: 0; border-top: 1px solid var(--px-line); }
.px .pe-take li { background: none; border: 0; border-bottom: 1px solid var(--px-line); border-radius: 0; padding: 13px 0; color: var(--px-ink); font-weight: 500; font-size: 15.5px; }
.px .pe-take li .ico { color: var(--px-acc-d); }
.px .px-card .pe-action { background: var(--px-rail); border: 0; border-left: 3px solid var(--px-acc); border-radius: 0 12px 12px 0; }
.px .px-card .pe-action .sk { color: var(--px-acc-d); }
.px .px-card .pe-action p { color: var(--px-ink); font-weight: 600; }
.px .ssp-qcta { background: var(--px-ink); border: 0; border-radius: 14px; color: #fff; }
.px .ssp-qcta span { color: rgba(255,255,255,.72); }
.px .ssp-qcta .btn-l { background: #fff; color: var(--px-ink); }
.px .sq-dots i { background: var(--px-line); width: 22px; height: 4px; }
.px .sq-dots i.cur { background: var(--px-ink); } .px .sq-dots i.ok { background: var(--px-acc); } .px .sq-dots i.no { background: #E0672E; }
.px .sq-q { color: var(--px-ink); font-weight: 700; }
.px .sq-o { background: #fff; border: 1px solid var(--px-line); color: var(--px-ink); font-weight: 500; border-radius: 12px; }
.px .sq-o:hover:not(:disabled) { border-color: var(--px-ink); transform: none; }
.px .sq-l { background: var(--px-rail); color: var(--px-ink2); border-radius: 8px; font-family: var(--px-f); font-weight: 700; }
.px .sq-o.picked { border-color: var(--px-ink); }
.px .sq-o.right { border-color: var(--px-acc); background: #F0F3FF; }
.px .sq-o.right .sq-l { background: var(--px-acc); color: #fff; }
.px .sq-o.right .sq-m { color: var(--px-acc-d); }
.px .sq-o.wrong { border-color: #E0672E; background: #FFF6F1; }
.px .sq-o.wrong .sq-l { background: #E0672E; color: #fff; }
.px .sq-o.wrong .sq-m { color: #C2410C; }
.px .sq-o.burst::after { display: none; }
.px .sq-why { border-radius: 12px; }
.px .sq-why.ok { background: #F0F3FF; border-color: #C9D4FD; } .px .sq-why.no { background: #FFF6F1; border-color: #F6D3C0; }
.px .sq-why.ok b { color: var(--px-acc-d); } .px .sq-why.no b { color: #C2410C; }
.px .sq-why p { color: var(--px-ink2); }
.px .ssp-result > p { color: var(--px-ink2); }
.px .sr-score b small, .px .sr-score span { color: var(--px-mut); }
.px .sch-ring .rg-t { stroke: var(--px-line); }
.px .sch-ring .rg-v { stroke: var(--px-acc); }
.px .ssp-result.no .sch-ring .rg-v { stroke: #E0672E; }
.px .sr-wrong { background: var(--px-rail); border: 0; }
.px .sr-wrong h4 { color: var(--px-mut); }
.px .sr-wrong li { color: var(--px-ink); }

/* ---------- full screen ---------- */
.px .pl:fullscreen, .px.px-full .pl { background: #000; }
.px .pl:fullscreen .ssp-top, .px .pl:fullscreen .px-ch, .px .pl:fullscreen .px-below,
.px.px-full .ssp-top, .px.px-full .px-ch, .px.px-full .px-below { display: none; }
.px .pl:fullscreen .px-main, .px.px-full .px-main { grid-template-columns: minmax(0, 1fr); }
.px .pl:fullscreen .ssp-body, .px.px-full .ssp-body { padding: 0; overflow: hidden; background: #000; display: grid; place-items: center; }
.px .pl:fullscreen .px-screen, .px.px-full .px-screen { width: min(100vw, calc(100vh * 16 / 9)); max-width: none; border-radius: 0; box-shadow: none; }

/* ---------- real photography on the poster ---------- */
.px .px-photo { position: absolute; inset: 0; z-index: 0; background: #0C0E12 center / cover no-repeat; }
.px .px-poster .px-photo { animation: pxKen 26s cubic-bezier(.3,.1,.3,1) both; }
.px .px-photo-dim { opacity: .42; }
@keyframes pxKen { from { transform: scale(1.12) translate3d(1.5%, 1%, 0); } to { transform: scale(1.02) translate3d(-1%, 0, 0); } }
/* while the lesson plays from the poster, the controls take over from the big button */
.px.vn-live .px-poster .px-pv .vn-listen { display: none; }

/* ---------- slides fill the screen ---------- */
@media (min-width: 1100px) and (min-height: 700px) {
  .px .px-screen .ssp-stage { zoom: 1.24; padding: 26px 30px calc(150px / 1.24); }
  .px .px-screen.has-kick .ssp-stage { padding-top: calc(64px / 1.24); }
}
@media (min-width: 1500px) and (min-height: 860px) {
  .px .px-screen .ssp-stage { zoom: 1.4; padding-bottom: calc(150px / 1.4); }
  .px .px-screen.has-kick .ssp-stage { padding-top: calc(64px / 1.4); }
}
.px .pl:fullscreen .px-screen .ssp-stage, .px.px-full .px-screen .ssp-stage { zoom: 1.55; padding-bottom: calc(150px / 1.55); }

/* ---------- like a video: while it plays and the pointer rests, the controls step back ---------- */
.px .px-screen .ssp-ctl, .px .px-screen .vn-cap { transition: opacity .35s var(--px-e), transform .35s var(--px-e); }
.px.px-idle .px-screen .ssp-ctl { opacity: 0; pointer-events: none; }
.px.px-idle .px-screen .vn-cap { transform: translateY(56px); }
.px.px-idle .px-screen { cursor: none; }

/* ---------- phones: the picture on top; captions and controls in a band under it, never over the drawing ---------- */
@media (max-width: 760px) {
  .px .ssp-body { padding: 0 0 40px; }
  .px .px-screen { width: 100%; aspect-ratio: auto; height: auto; min-height: min(66svh, 600px); border-radius: 0; box-shadow: none; }
  .px .px-screen .ssp-stage { flex: 1 0 auto; padding: 22px 16px 26px; overflow: visible; }
  .px .px-screen.has-kick .ssp-stage { padding-top: 22px; }
  .px .px-kick { display: none; }
  .px .px-screen .vn-cap { position: relative; bottom: auto; z-index: 4; flex: none; padding: 10px 14px 2px; background: var(--px-scr); min-height: 0; }
  .px .px-screen .vn-cap[hidden] { display: none; }
  .px .px-screen .vn-cap p { display: block; background: none; padding: 0; font-size: 15.5px; line-height: 1.5; max-width: none; }
  .px .px-screen .ssp-ctl { position: relative; flex: none; padding: 4px 6px 6px; gap: 2px; background: var(--px-scr); }
  .px.px-idle .px-screen .ssp-ctl { opacity: 1; pointer-events: auto; }
  .px.px-idle .px-screen .vn-cap { transform: none; }
  .px .ssp-ctl .vn-wide { display: none; }
  .px .ssp-ctl .cb { width: 38px; height: 38px; }
  .px .px-screen .ssp-ctl:has(.vn) [data-prev], .px .px-screen .ssp-ctl:has(.vn) [data-next]:not(.wide) { display: none; }
  .px .ssp-ctl .px-gt { padding: 0 4px; font-size: 12.5px; }
  .px .px-below { padding: 0 18px; margin-top: 20px; }
  .px .ssp-text h3 { font-size: 22px; }
  .px .ssp-text .px-key { font-size: 16px; }
  .px .px-trb p { font-size: 16px; }
  .px .px-card { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .px .ssp-who { display: none; }
  .px .px-poster { min-height: min(62svh, 520px); }
  .px .px-poster::after { background: linear-gradient(180deg, rgba(12,14,18,.2) 0%, rgba(12,14,18,.5) 45%, rgba(12,14,18,.92) 100%); }
  .px .px-pv { padding: 24px 20px 28px; }
  .px .px-pv .vn-lt b { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .px .px-tl-f, .px .px-tl-h, .px .px-tl-tr { transition: none; }
  .px .px-poster .px-photo, .px .px-ph, .px .kw, .px .px-screen.px-enter .ssp-stage, .px .ssp-text .px-key, .px .px-trb { animation: none !important; }
  .px .px-ph { transform: scale(1.06); }
  .px .px-ph + .px-ph { transition: none; }
  .px .px-ghost { display: none; }
}

/* ---------- fit and density (Nov 2026 audit) ---------- */
/* an overflowing slide never loses its top: centre only while it fits */
.px .px-screen .ssp-stage { align-content: safe center; align-items: safe center; justify-items: safe center; }
/* hands-on labs: when a worksheet needs more room, the picture grows taller instead of shrinking the inputs */
.px .px-screen.px-tall { aspect-ratio: auto; }
.px .px-screen.px-tall .ssp-stage { overflow: visible; flex: 1 0 auto; }
/* devices, code and quotes sized for a 16:9 picture with captions */
.px .px-screen .vl-phone { --pw: 240px; }
.px .px-screen .ph-screen { height: 392px; }
.px .px-screen .cd-pre { max-height: 260px; font-size: 13.5px; line-height: 1.62; }
.px .px-screen .vl-quote q { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.28; }
.px .px-screen .vl-quote .vq-mark { font-size: 64px; height: 26px; }
@media (max-width: 760px) {
  .px .px-screen .ph-screen { height: 400px; }
  .px .px-screen .vl-quote q { font-size: 22px; }
}
/* the vignette sits over the photography, under the slide, so white worksheets and devices stay clean */
.px .px-screen::after { z-index: 0; box-shadow: inset 0 0 140px rgba(0,0,0,.4); }
/* one focus colour in the player: the Academy blue */
.px :focus-visible { outline: 2px solid var(--px-acc) !important; outline-offset: 2px; box-shadow: none; }
/* paused: the words being read show in full, so a paused slide reads cleanly */
.px.px-hold .vl-stage.vk-live .kk { opacity: 1; }
/* the clean canvas for diagrams, charts and lists: solid graphite, a faint drafting grid, no photo */
.px .px-film.t-clean { background: #0E1116; }
.px .px-film.t-clean::before { opacity: 1; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 32px 32px; background-position: center; }
.px .px-film.t-clean::after { background: radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,.035), rgba(12,14,18,0) 55%, rgba(12,14,18,.6) 100%); }