/* =====================================================================
   Podcast Visual Companion — shared styles
   Used by podcasts/*_Podcast.html together with companion.js and a
   per-episode cue file in podcasts/companion/cues/.
   ===================================================================== */

.pc {
  --pc-ink: #F2FAF8;
  --pc-dim: rgba(242, 250, 248, 0.64);
  --pc-faint: rgba(242, 250, 248, 0.38);
  --pc-line: rgba(255, 255, 255, 0.14);
  --pc-panel: rgba(255, 255, 255, 0.055);
  --pc-panel-2: rgba(255, 255, 255, 0.09);
  --pc-mint: #7FD8C3;
  --pc-rose: #FF6E8A;
  --pc-gold: #F5C76B;
  --pc-sky: #8EC5FF;
  --pc-red: #CC0033;
  --pc-sarah: #9ED7C8;
  --pc-kiffer: #FF8AA3;
  --pc-math: 'STIX Two Text', 'Cambria Math', Cambria, Georgia, 'Times New Roman', serif;
  --pc-ease: cubic-bezier(.2, .7, .2, 1);
  margin-bottom: 32px;
  color: var(--pc-ink);
}

/* ---------- frame + stage ---------- */
.pc-frame { container-type: inline-size; container-name: pcframe; }
.pc-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: none;
  background: #04231F;
  container-type: inline-size;
  container-name: pcstage;
  font-size: clamp(9px, 1.82cqw, 34px);
  line-height: 1.4;
  cursor: pointer;
  outline: none;
  isolation: isolate;
}
.pc-stage:focus-visible { box-shadow: inset 0 0 0 3px rgba(127, 216, 195, 0.6); }
@container pcframe (max-width: 620px) {
  .pc-stage { aspect-ratio: 2 / 3; font-size: 3.15cqw; }
}

/* drifting background */
.pc-bg { position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 42% at 22% 28%, rgba(11, 123, 107, 0.55), transparent 70%),
    radial-gradient(34% 40% at 80% 72%, rgba(204, 0, 51, 0.16), transparent 70%),
    radial-gradient(50% 50% at 60% 20%, rgba(6, 92, 80, 0.55), transparent 70%),
    linear-gradient(160deg, #053A33 0%, #03231F 60%, #021A17 100%);
  animation: pc-drift 38s ease-in-out infinite alternate;
}
.pc-bg::after { content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 4.2cqw 4.2cqw; mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);
}
@keyframes pc-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(4%, -3%, 0) scale(1.06); } }

/* heads-up display: chapter + speakers */
.pc-hud { position: absolute; z-index: 3; left: 4%; right: 4%; top: 4.2%; display: flex; justify-content: space-between; align-items: center; gap: 1em; pointer-events: none; }
.pc-chapter { display: flex; align-items: center; gap: 0.7em; min-width: 0; font-size: 0.72em; letter-spacing: 0.06em; }
.pc-course { font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--pc-faint); white-space: nowrap; }
.pc-chap-title { font-weight: 700; color: var(--pc-mint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .4s; }
.pc-chap-title::before { content: ''; display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--pc-mint); margin-right: 0.55em; vertical-align: 0.06em; box-shadow: 0 0 0.6em var(--pc-mint); }
.pc-speakers { display: flex; gap: 0.45em; flex-shrink: 0; }
.pc-spk { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.28em 0.75em 0.28em 0.6em; border-radius: 999px; font-size: 0.7em; font-weight: 700; letter-spacing: 0.04em; color: var(--pc-faint); border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.18); transition: all .35s var(--pc-ease); }
.pc-spk .dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; opacity: .55; }
.pc-spk .eq { display: inline-flex; gap: 0.12em; align-items: flex-end; height: 0.8em; width: 0; overflow: hidden; transition: width .3s; }
.pc-spk .eq i { width: 0.16em; background: currentColor; border-radius: 0.1em; height: 30%; }
.pc-spk.is-on { color: #06231F; }
.pc-spk.s.is-on { background: var(--pc-sarah); border-color: var(--pc-sarah); box-shadow: 0 0 1.2em rgba(158,215,200,0.35); }
.pc-spk.k.is-on { background: var(--pc-kiffer); border-color: var(--pc-kiffer); box-shadow: 0 0 1.2em rgba(255,138,163,0.35); }
.pc-spk.is-on .dot { display: none; }
.pc-spk.is-on .eq { width: 0.8em; }
.pc.is-playing .pc-spk.is-on .eq i { animation: pc-eq 0.9s ease-in-out infinite; }
.pc-spk .eq i:nth-child(2) { animation-delay: -0.3s !important; }
.pc-spk .eq i:nth-child(3) { animation-delay: -0.6s !important; }
@keyframes pc-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* scenes */
.pc-scenes { position: absolute; inset: 0; z-index: 2; }
.pc-scene { position: absolute; left: 5%; right: 5%; top: 12.5%; bottom: 9.5%; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(1.2em) scale(.985); transition: opacity .7s var(--pc-ease), transform .8s var(--pc-ease); }
.pc-scene.is-in { opacity: 1; transform: none; }
.pc-scene.is-out { opacity: 0; transform: translateY(-0.8em) scale(.99); transition-duration: .45s; }
.pc.has-cc .pc-scene { bottom: 15%; }
@container pcstage (max-aspect-ratio: 1/1) { .pc-scene { top: 13%; bottom: 7%; left: 6%; right: 6%; } }

/* reveal mechanics: any element with data-t */
.pc-scene [data-t] { opacity: 0; transform: translateY(0.6em); transition: opacity .55s var(--pc-ease), transform .65s var(--pc-ease), background-color .4s, border-color .4s, color .4s, box-shadow .4s; }
.pc-scene [data-t].on { opacity: 1; transform: none; }
.pc-scene .pc-dimmed { opacity: .38 !important; }
.pc.pc-instant .pc-scene, .pc.pc-instant .pc-scene *, .pc.pc-instant .pc-scene *::before { transition: none !important; }

/* ---------- typography inside scenes ---------- */
.pc-kicker { font-size: 0.72em; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pc-rose); margin-bottom: 0.55em; }
.pc-title { font-size: 1.75em; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 0.65em; color: #fff; }
.pc-title .m, .pc-scene .hlt { color: var(--pc-mint); }
.pc-sub { font-size: 1.02em; color: var(--pc-dim); max-width: 46em; }
.pc-note { margin-top: 0.9em; font-size: 0.86em; color: var(--pc-dim); padding-left: 0.9em; border-left: 3px solid var(--pc-gold); max-width: 52em; }
.pc-note b, .pc-note strong { color: var(--pc-gold); }
.pc-scene b, .pc-scene strong { color: #fff; font-weight: 800; }
.pc-scene .gold { color: var(--pc-gold); }
.pc-scene .rose { color: var(--pc-rose); }
.pc-scene .mint { color: var(--pc-mint); }
.pc-scene .sky { color: var(--pc-sky); }
.pc-scene .dim { color: var(--pc-dim); }

/* math */
.pc-math { font-family: var(--pc-math); font-size: 1.12em; white-space: nowrap; }
.pc-math i, .pc-math var { font-style: italic; }
.pc-math .op { padding: 0 0.28em; font-style: normal; }
.pc-frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 0.18em; }
.pc-frac > span { padding: 0.04em 0.3em; line-height: 1.2; }
.pc-frac > span:first-child { border-bottom: 0.07em solid currentColor; }
.pc-sqrt { display: inline-flex; align-items: stretch; vertical-align: middle; }
.pc-sqrt::before { content: '\221A'; font-size: 1.35em; line-height: 1; margin-right: -0.05em; }
.pc-sqrt > span { border-top: 0.07em solid currentColor; padding: 0.12em 0.15em 0; }
.pc-math sup, .pc-scene sup { font-size: 0.68em; vertical-align: 0.55em; line-height: 0; }
.pc-math sub, .pc-scene sub { font-size: 0.68em; vertical-align: -0.25em; line-height: 0; }
.pc-scene [data-k] { border-radius: 0.25em; padding: 0 0.08em; transition: background-color .35s, color .35s, box-shadow .35s; }
.pc-scene [data-k].hl { background: rgba(245, 199, 107, 0.2); color: var(--pc-gold); box-shadow: 0 0 0 0.12em rgba(245, 199, 107, 0.45); }

/* ---------- scene: cover ---------- */
.pc-cover { align-items: flex-start; }
.pc-cover .pc-title { font-size: 2.7em; max-width: 15em; margin-bottom: 0.35em; }
.pc-cover .pc-sub { font-size: 1.15em; }
.pc-cover .pc-hosts { margin-top: 1.6em; display: flex; gap: 0.6em; font-size: 0.85em; }
.pc-cover .pc-hosts span { padding: 0.35em 0.9em; border-radius: 999px; border: 1px solid var(--pc-line); color: var(--pc-dim); }
.pc-cover .pc-hosts span.s { color: var(--pc-sarah); border-color: rgba(158,215,200,.4); }
.pc-cover .pc-hosts span.k { color: var(--pc-kiffer); border-color: rgba(255,138,163,.4); }

/* ---------- scene: section ---------- */
.pc-section { flex-direction: row !important; align-items: center; gap: 1.6em; }
.pc-section .num { font-size: 7.5em; font-weight: 800; line-height: .9; color: transparent; -webkit-text-stroke: 0.035em rgba(127, 216, 195, 0.7); flex-shrink: 0; }
.pc-section .body { min-width: 0; }
.pc-section .pc-title { font-size: 2.3em; margin-bottom: 0.3em; }
.pc-section ul { list-style: none; margin-top: 0.9em; display: flex; flex-wrap: wrap; gap: 0.5em; }
.pc-section li { font-size: 0.86em; padding: 0.35em 0.85em; border-radius: 999px; background: var(--pc-panel-2); border: 1px solid var(--pc-line); }

/* ---------- scene: list ---------- */
.pc-list ol, .pc-list ul { list-style: none; display: grid; gap: 0.55em; }
.pc-list li { display: flex; gap: 0.8em; align-items: flex-start; padding: 0.62em 0.95em; border-radius: 0.6em; background: var(--pc-panel); border: 1px solid rgba(255,255,255,0.07); }
.pc-list li .ix { flex-shrink: 0; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; font-size: 0.82em; font-weight: 800; background: rgba(127,216,195,0.16); color: var(--pc-mint); margin-top: 0.05em; }
.pc-list li .tx { min-width: 0; }
.pc-list li .tx small { display: block; color: var(--pc-dim); font-size: 0.82em; margin-top: 0.15em; }
.pc-list.cols-2 ol, .pc-list.cols-2 ul { grid-template-columns: 1fr 1fr; }
.pc-list.cols-3 ol, .pc-list.cols-3 ul { grid-template-columns: repeat(3, 1fr); }
.pc-list li.now { border-color: rgba(127,216,195,0.55); background: rgba(127,216,195,0.1); box-shadow: 0 0 0 1px rgba(127,216,195,0.2), 0 0.6em 1.6em rgba(0,0,0,0.25); }
.pc-list li.now .ix { background: var(--pc-mint); color: #04231F; }
.pc-list li[data-k] { padding: 0.62em 0.95em; }
.pc-list li[data-k].hl { background: rgba(127,216,195,0.12); color: var(--pc-ink); box-shadow: 0 0 0 1px rgba(127,216,195,0.55), 0 0.6em 1.6em rgba(0,0,0,0.25); }
.pc-list li[data-k].hl .ix { background: var(--pc-mint); color: #04231F; }
.pc-list.has-hl li[data-k].on:not(.hl) { opacity: .55; }
.pc-list.chips ul { display: flex; flex-wrap: wrap; }
.pc-list.chips li { padding: 0.45em 1em; border-radius: 999px; font-weight: 600; }

/* ---------- scene: define ---------- */
.pc-define .row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 1.6em; align-items: center; }
.pc-define .term { font-size: 2.35em; font-weight: 800; line-height: 1.08; background: linear-gradient(120deg, #fff 0%, var(--pc-mint) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc-define .term small { display: block; font-size: 0.4em; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pc-rose); -webkit-text-fill-color: var(--pc-rose); margin-bottom: 0.5em; }
.pc-define .def { font-size: 1.12em; padding: 0.9em 1.1em; border-radius: 0.7em; background: var(--pc-panel); border-left: 0.22em solid var(--pc-mint); }
.pc-define .ex { margin-top: 1.1em; display: flex; flex-wrap: wrap; gap: 0.5em; }
.pc-define .ex span { font-size: 0.86em; padding: 0.38em 0.9em; border-radius: 999px; background: var(--pc-panel-2); border: 1px solid var(--pc-line); }
.pc-define .ex .lab { background: none; border: none; color: var(--pc-faint); padding-left: 0; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .72em; align-self: center; }

/* ---------- scene: formula ---------- */
.pc-formula .eqbox { align-self: center; text-align: center; font-size: 1.7em; padding: 0.7em 1.2em; border-radius: 0.5em; background: rgba(0,0,0,0.22); border: 1px solid var(--pc-line); box-shadow: inset 0 0 2em rgba(127,216,195,0.06); margin: 0.2em 0 0.8em; }
.pc-formula .eqbox .lbl { display: block; font-family: 'Open Sans', sans-serif; font-size: 0.36em; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pc-faint); margin-bottom: 0.5em; }
.pc-formula .eqs { display: flex; flex-direction: column; align-items: center; gap: 0.6em; margin: 0.2em 0 0.8em; }
.pc-formula .eqs .eqbox { margin: 0; }
.pc-formula.eqrow .eqs { flex-direction: row; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.pc-formula.eqrow .eqbox { font-size: 1.45em; }
.pc-formula .where { display: grid; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); gap: 0.55em; }
.pc-formula .where div { padding: 0.55em 0.85em; border-radius: 0.55em; background: var(--pc-panel); font-size: 0.86em; display: flex; gap: 0.7em; align-items: baseline; }
.pc-formula .where .sym { font-family: var(--pc-math); font-style: italic; font-size: 1.25em; color: var(--pc-gold); flex-shrink: 0; min-width: 1.2em; }
.pc-formula .pc-title { text-align: center; }

/* ---------- scene: cols ---------- */
.pc-cols .grid { display: grid; gap: 0.8em; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
.pc-cols .card { padding: 1em 1.1em; border-radius: 0.75em; background: var(--pc-panel); border: 1px solid rgba(255,255,255,0.08); border-top: 0.22em solid var(--accent, var(--pc-mint)); display: flex; flex-direction: column; gap: 0.45em; }
.pc-cols .card h4 { font-size: 1.15em; font-weight: 800; color: #fff; display: flex; align-items: baseline; gap: 0.5em; flex-wrap: wrap; }
.pc-cols .card h4 .tag { font-size: 0.6em; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent, var(--pc-mint)); }
.pc-cols .card .bd { font-size: 0.9em; color: var(--pc-dim); }
.pc-cols .card .bd b { color: var(--pc-ink); }
.pc-cols .card .ft { margin-top: auto; padding-top: 0.5em; border-top: 1px dashed var(--pc-line); font-size: 0.82em; color: var(--pc-dim); }
.pc-cols .card .eq { font-family: var(--pc-math); font-size: 1.12em; color: var(--accent, var(--pc-mint)); padding: 0.2em 0; white-space: normal; }
.pc-cols .card .eq .pc-frac { margin-left: 0; }
.pc-cols .card.now { background: rgba(255,255,255,0.1); box-shadow: 0 0.6em 1.8em rgba(0,0,0,0.3); }
.pc-cols .card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.15em 0.7em; font-size: 0.82em; }
.pc-cols .card dt { color: var(--pc-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85em; }
.pc-cols .card dd { color: var(--pc-ink); }

/* ---------- scene: calc (worked example) ---------- */
.pc-calc .lay { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: 1.4em; align-items: start; }
.pc-calc .given { display: grid; gap: 0.45em; }
.pc-calc .given div { padding: 0.5em 0.85em; border-radius: 0.5em; background: var(--pc-panel); font-size: 0.9em; }
.pc-calc .given .g-l { display: block; font-size: 0.72em; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pc-faint); }
.pc-calc .given .g-v { font-weight: 700; color: var(--pc-gold); }
.pc-calc .steps { display: grid; gap: 0.5em; }
.pc-calc .step { font-family: var(--pc-math); font-size: 1.22em; padding: 0.4em 0.8em; border-left: 0.16em solid var(--pc-line); white-space: nowrap; }
.pc-calc .step .lab { display: block; font-family: 'Open Sans', sans-serif; font-size: 0.6em; font-weight: 700; color: var(--pc-faint); letter-spacing: 0.06em; white-space: normal; }
.pc-calc .result { margin-top: 0.4em; font-family: var(--pc-math); font-size: 1.45em; padding: 0.5em 0.9em; border-radius: 0.5em; background: rgba(245,199,107,0.12); border: 1px solid rgba(245,199,107,0.45); color: var(--pc-gold); white-space: nowrap; }
.pc-calc .result small { display: block; font-family: 'Open Sans', sans-serif; font-size: 0.55em; color: var(--pc-ink); white-space: normal; margin-top: 0.2em; }
.pc-calc.single .lay { grid-template-columns: 1fr; }

/* ---------- scene: person-time ---------- */
.pc-persontime .rows { display: grid; gap: 0.35em; }
.pc-persontime .row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 6.2em; gap: 0.9em; align-items: center; }
.pc-persontime .who { font-weight: 700; font-size: 0.9em; }
.pc-persontime .who small { display: block; white-space: nowrap; font-weight: 600; font-size: 0.78em; color: var(--pc-dim); }
.pc-persontime .track { position: relative; height: 1.45em; border-radius: 0.4em; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.pc-persontime .track .tick { position: absolute; top: -0.2em; bottom: -0.2em; width: 1px; background: rgba(255,255,255,0.1); }
.pc-persontime .bar { position: absolute; left: 0; top: 0.2em; bottom: 0.2em; width: 0; border-radius: 0.3em; background: linear-gradient(90deg, rgba(127,216,195,0.55), rgba(127,216,195,0.85)); transition: width 1.6s var(--pc-ease) .15s !important; }
.pc-persontime .row.on .bar { width: var(--w); }
.pc-persontime .end { position: absolute; top: 50%; left: var(--w); transform: translate(-50%, -50%) scale(0); width: 1.3em; height: 1.3em; border-radius: 50%; display: grid; place-items: center; font-size: 0.8em; font-weight: 800; transition: transform .45s var(--pc-ease) 1.55s !important; }
.pc-persontime .row.on .end { transform: translate(-50%, -50%) scale(1); }
.pc-persontime .end.case { background: var(--pc-rose); color: #fff; box-shadow: 0 0 0 0.25em rgba(255,110,138,0.25); }
.pc-persontime .end.lost { background: #9AA8A6; color: #04231F; }
.pc-persontime .end.none { background: var(--pc-mint); color: #04231F; }
.pc-persontime .val { font-family: var(--pc-math); font-size: 1.1em; color: var(--pc-gold); text-align: right; white-space: nowrap; }
.pc-persontime .val small { display: inline; margin-left: 0.4em; font-family: 'Open Sans', sans-serif; font-size: 0.62em; color: var(--pc-dim); }
.pc-persontime .axis { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 6.2em; gap: 0.9em; font-size: 0.68em; color: var(--pc-faint); margin-top: 0.2em; }
.pc-persontime .axis .ax { position: relative; height: 1.2em; }
.pc-persontime .axis .ax span { position: absolute; transform: translateX(-50%); }
.pc-persontime .tot { margin-top: 0.6em; display: flex; flex-wrap: wrap; gap: 0.5em; }
.pc-persontime .tot > div { font-family: var(--pc-math); font-size: 1.02em; padding: 0.35em 0.7em; border-radius: 0.5em; background: var(--pc-panel); white-space: nowrap; }
.pc-persontime .tot > div.res { background: rgba(245,199,107,0.12); border: 1px solid rgba(245,199,107,0.45); color: var(--pc-gold); }

/* ---------- scene: plot ---------- */
.pc-plot .lay { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.4em; align-items: center; }
.pc-plot svg { width: 100%; height: auto; overflow: visible; }
.pc-plot .axis line, .pc-plot .axis path { stroke: rgba(255,255,255,0.35); stroke-width: 1.2; }
.pc-plot .grid line { stroke: rgba(255,255,255,0.07); }
.pc-plot text { fill: var(--pc-dim); font-size: 13px; font-family: 'Open Sans', sans-serif; }
.pc-plot text.lbl { fill: var(--pc-ink); font-weight: 700; }
.pc-plot .series { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 2.2s var(--pc-ease), opacity .5s !important; transform: none !important; }
.pc-plot .series.on { stroke-dashoffset: 0; }
.pc-plot .series.dash.on { stroke-dasharray: 7 7; stroke-dashoffset: 0; }
.pc-plot .zone { transform: none !important; }
.pc-plot .side { display: grid; gap: 0.6em; }
.pc-plot .side > div { padding: 0.6em 0.85em; border-radius: 0.55em; background: var(--pc-panel); font-size: 0.9em; border-left: 0.2em solid var(--c, var(--pc-mint)); }
.pc-plot .side .eq { font-family: var(--pc-math); font-size: 1.15em; white-space: nowrap; display: block; color: var(--c, var(--pc-mint)); }

/* ---------- scene: sink ---------- */
.pc-sink .lay { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.4em; align-items: center; }
.pc-sink svg { width: 100%; height: auto; overflow: visible; }
.pc-sink .basin { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.45); stroke-width: 3; }
.pc-sink .water { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--lvl, 0.45)); transition: transform 2.6s var(--pc-ease); }
.pc-sink .surface { transform: translateY(calc((1 - var(--lvl, 0.45)) * 200px)); transition: transform 2.6s var(--pc-ease); }
.pc-sink .surface path { fill: none; stroke: rgba(160, 230, 255, 0.85); stroke-width: 2.4; animation: pc-wave 2.4s linear infinite; }
@keyframes pc-wave { from { transform: translateX(0); } to { transform: translateX(-40px); } }
.pc-sink .stream { stroke: rgba(142,197,255,0.85); stroke-linecap: round; fill: none; stroke-dasharray: 10 8; animation: pc-flow 0.7s linear infinite; transition: stroke-width 1.2s, opacity 1s; }
.pc-sink .stream.in { stroke-width: var(--tap, 8); }
.pc-sink .stream.rec { stroke-width: var(--rec, 7); }
.pc-sink .stream.dth { stroke-width: var(--dth, 7); stroke: rgba(255,110,138,0.85); }
@keyframes pc-flow { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }
.pc-sink .tap { fill: #B9C6C4; }
.pc-sink .drain { fill: #0B1F1C; stroke: rgba(255,255,255,0.4); stroke-width: 2; }
.pc-sink text { font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 700; fill: var(--pc-ink); }
.pc-sink text.sm { font-size: 12px; font-weight: 600; fill: var(--pc-dim); }
.pc-sink .lvl-mark { stroke: var(--pc-gold); stroke-width: 2; stroke-dasharray: 4 4; transform: translateY(calc((1 - var(--lvl, 0.45)) * 200px)); transition: transform 2.6s var(--pc-ease); }
.pc-sink .lvl-text { fill: var(--pc-gold); transform: translateY(calc((1 - var(--lvl, 0.45)) * 200px)); transition: transform 2.6s var(--pc-ease); }
.pc-sink .legend { display: grid; gap: 0.45em; }
.pc-sink .legend > div:not(.mode-card) { display: flex; gap: 0.8em; align-items: center; padding: 0.42em 0.85em; border-radius: 0.55em; background: var(--pc-panel); font-size: 0.9em; }
.pc-sink .legend i { width: 1em; height: 1em; border-radius: 0.25em; flex-shrink: 0; }
.pc-sink .legend .case { display: block; }
.pc-sink .legend > div.mode-card { display: block; padding: 0.6em 0.9em; border-radius: 0.7em; border: 1px solid var(--pc-line); background: rgba(0,0,0,0.2); }
.pc-sink .mode-card h5 { font-size: 1em; font-weight: 800; margin-bottom: 0.15em; }
.pc-sink .mode-card p { font-size: 0.86em; color: var(--pc-dim); line-height: 1.35; }

/* ---------- scene: cards ---------- */
.pc-cards .grid { display: grid; gap: 0.6em; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.pc-cards .tile { padding: 0.7em 0.85em; border-radius: 0.65em; background: var(--pc-panel); border: 1px solid rgba(255,255,255,0.08); min-height: 0; }
.pc-cards .tile .ab { font-size: 1.05em; font-weight: 800; color: var(--pc-mint); letter-spacing: 0.04em; }
.pc-cards .tile .nm { font-size: 0.78em; font-weight: 700; color: var(--pc-ink); line-height: 1.25; margin-top: 0.1em; }
.pc-cards .tile .ds { font-size: 0.72em; color: var(--pc-dim); margin-top: 0.3em; line-height: 1.3; }
.pc-cards .tile.now { border-color: rgba(127,216,195,0.6); background: rgba(127,216,195,0.1); }

/* ---------- scene: bars ---------- */
.pc-bars .rows { display: grid; gap: 0.9em; }
.pc-bars .row { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 1em; align-items: center; }
.pc-bars .lab { font-weight: 700; font-size: 0.95em; }
.pc-bars .lab small { display: block; font-weight: 600; color: var(--pc-dim); font-size: 0.78em; }
.pc-bars .trk { position: relative; height: 2.2em; border-radius: 0.4em; background: rgba(255,255,255,0.05); }
.pc-bars .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 0.4em; background: var(--c, var(--pc-mint)); transition: width 1.6s var(--pc-ease) .1s !important; display: flex; align-items: center; justify-content: flex-end; padding-right: 0.6em; color: #04231F; font-weight: 800; font-size: 0.85em; white-space: nowrap; overflow: visible; }
.pc-bars .row.on .fill { width: var(--w); }
.pc-bars .fill span { position: absolute; left: calc(100% + 0.6em); color: var(--pc-ink); font-weight: 700; }

/* ---------- scene: stack ---------- */
.pc-stack .bar { display: flex; height: 3.6em; border-radius: 0.6em; overflow: hidden; background: rgba(255,255,255,0.05); margin: 0.6em 0 0.4em; }
.pc-stack .seg { flex: 0 0 auto; width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 0.9em; color: #04231F; font-weight: 800; white-space: nowrap; overflow: hidden; transition: width 1.5s var(--pc-ease) !important; transform: none !important; opacity: 1 !important; }
.pc-stack .seg.on { width: var(--w); }
.pc-stack .seg small { font-weight: 700; font-size: 0.72em; opacity: .8; }
.pc-stack .legend { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 0.7em; margin-top: 0.8em; }
.pc-stack .legend > div { padding: 0.55em 0.85em; border-radius: 0.55em; background: var(--pc-panel); font-size: 0.86em; border-left: 0.22em solid var(--c); }
.pc-stack .legend .eq { display: block; font-family: var(--pc-math); font-size: 1.12em; color: var(--pc-ink); white-space: nowrap; }
.pc-stack .total { margin-top: 0.8em; font-family: var(--pc-math); font-size: 1.4em; color: var(--pc-gold); padding: 0.5em 0.9em; border-radius: 0.5em; background: rgba(245,199,107,0.12); border: 1px solid rgba(245,199,107,0.45); align-self: flex-start; white-space: nowrap; }
.pc-stack .total small { font-family: 'Open Sans', sans-serif; font-size: 0.55em; color: var(--pc-ink); display: block; white-space: normal; }

/* ---------- scene: flow ---------- */
.pc-flow .rows { display: grid; gap: 1.1em; }
.pc-flow .frow { display: grid; grid-template-columns: 8.2em minmax(0, 1fr); gap: 1em; align-items: center; }
.pc-flow .frow .rl { font-weight: 800; font-size: 0.95em; color: var(--c, var(--pc-mint)); }
.pc-flow .frow .rl small { display: block; color: var(--pc-dim); font-weight: 600; font-size: 0.75em; }
.pc-flow .chain { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.pc-flow .chain { flex-wrap: nowrap; }
.pc-flow .node { flex: 1 1 0; min-width: 0; padding: 0.55em 0.8em; border-radius: 0.55em; background: var(--pc-panel); border: 1px solid rgba(255,255,255,0.1); font-size: 0.88em; line-height: 1.3; }
.pc-flow .node:only-child { flex: 0 1 auto; }
.pc-flow .node.src { border-color: var(--c, var(--pc-mint)); }
.pc-flow .node.out { background: rgba(245,199,107,0.12); border-color: rgba(245,199,107,0.5); color: var(--pc-gold); font-weight: 700; }
.pc-flow .op { flex-shrink: 0; font-family: var(--pc-math); font-size: 1.45em; color: var(--c, var(--pc-mint)); opacity: .8; }

/* ---------- scene: ci (interval on a number line) ---------- */
.pc-ci .rows { display: grid; gap: 1.1em; margin-top: 0.4em; }
.pc-ci .crow { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 1em; align-items: center; }
.pc-ci .lab { font-size: 0.88em; font-weight: 700; }
.pc-ci .lab small { display: block; font-weight: 600; font-size: 0.82em; color: var(--pc-dim); font-family: var(--pc-math); }
.pc-ci .line { position: relative; height: 2.6em; }
.pc-ci .line::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(255,255,255,0.18); }
.pc-ci .zero { position: absolute; top: 0.2em; bottom: 0.2em; width: 2px; background: rgba(255,255,255,0.5); }
.pc-ci .axisrow { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 1em; }
.pc-ci .axisrow .ax { position: relative; height: 1.6em; border-top: 1px solid rgba(255,255,255,0.25); }
.pc-ci .axisrow .ax span { position: absolute; top: 0.3em; transform: translateX(-50%); font-family: var(--pc-math); font-size: 0.72em; color: var(--pc-dim); }
.pc-ci .axisrow .ax span.z { color: var(--pc-ink); font-weight: 700; }
.pc-ci .bad-zone { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(255,110,138,0.16) 0 6px, transparent 6px 12px); border-radius: 0.3em; }
.pc-ci .iv { position: absolute; top: 50%; height: 0.5em; transform: translateY(-50%); border-radius: 0.25em; background: var(--c, var(--pc-mint)); opacity: .85; }
.pc-ci .iv.bad { background: linear-gradient(90deg, var(--pc-rose) 0 var(--neg, 0%), var(--c, var(--pc-mint)) var(--neg, 0%)); }
.pc-ci .pt { position: absolute; top: 50%; width: 0.95em; height: 0.95em; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 0.2em rgba(255,255,255,0.2); }
.pc-ci .bnd { position: absolute; bottom: 72%; transform: translateX(-50%); font-family: var(--pc-math); font-size: 0.74em; color: var(--pc-ink); white-space: nowrap; }
.pc-ci .bnd.neg { color: var(--pc-rose); font-weight: 700; }

/* ---------- scene: callout ---------- */
.pc-callout { align-items: center; text-align: center; }
.pc-callout .q { font-size: 1.9em; font-weight: 800; line-height: 1.25; max-width: 22em; }
.pc-callout .q em { font-style: normal; color: var(--pc-mint); }
.pc-callout .by { margin-top: 0.9em; font-size: 0.86em; color: var(--pc-dim); max-width: 40em; }
.pc-callout .chips { margin-top: 1.2em; display: flex; gap: 0.6em; flex-wrap: wrap; justify-content: center; }
.pc-callout .chips span { padding: 0.5em 1em; border-radius: 0.6em; background: var(--pc-panel); border: 1px solid var(--pc-line); font-size: 0.95em; }

/* ---------- shared side panel (table, code, dag) ---------- */
.pc-table .lay, .pc-code .lay, .pc-dag .lay { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.3em; align-items: center; }
.pc-scene .side { display: grid; gap: 0.55em; align-content: center; }
.pc-scene .side > div { padding: 0.6em 0.85em; border-radius: 0.55em; background: var(--pc-panel); font-size: 0.88em; border-left: 0.2em solid var(--c, var(--pc-mint)); }
.pc-scene .side .eq { font-family: var(--pc-math); font-size: 1.15em; display: block; color: var(--c, var(--pc-mint)); }
.pc-scene .side > div.hl { background: rgba(245,199,107,0.14); box-shadow: 0 0 0 1px rgba(245,199,107,0.5); }

/* ---------- scene: table ---------- */
.pc-table .tblwrap { overflow: hidden; border-radius: 0.6em; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.18); align-self: flex-start; max-width: 100%; }
.pc-table .lay .tblwrap { align-self: center; }
.pc-tbl { border-collapse: collapse; font-size: 0.92em; min-width: 60%; }
.pc-tbl caption { caption-side: top; text-align: left; padding: 0.5em 0.9em 0.2em; font-size: 0.78em; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pc-faint); }
.pc-tbl th, .pc-tbl td { padding: 0.48em 0.95em; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.08); }
.pc-tbl thead th { font-size: 0.78em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pc-mint); background: rgba(127,216,195,0.08); }
.pc-tbl tbody th { text-align: left; font-weight: 700; color: var(--pc-ink); }
.pc-tbl td { font-family: var(--pc-math); font-size: 1.08em; color: var(--pc-ink); }
.pc-tbl td.txt, .pc-tbl .txt { font-family: 'Open Sans', sans-serif; font-size: 0.95em; }
.pc-tbl tr:last-child th, .pc-tbl tr:last-child td { border-bottom: none; }
.pc-tbl tr.total th, .pc-tbl tr.total td { border-top: 1px solid rgba(255,255,255,0.3); color: var(--pc-dim); }
.pc-tbl tr.hl th, .pc-tbl tr.hl td { background: rgba(245,199,107,0.14); color: var(--pc-gold); }
.pc-tbl tr[data-t] { transform: none; }

/* ---------- scene: code ---------- */
.pc-code .codecol { display: grid; gap: 0.6em; min-width: 0; }
.pc-code pre { margin: 0; font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace; font-size: 0.82em; line-height: 1.55; border-radius: 0.6em; padding: 0.8em 1em; overflow: hidden; white-space: pre-wrap; word-break: break-word; position: relative; }
.pc-code pre.src { background: rgba(0,0,0,0.38); border: 1px solid rgba(255,255,255,0.1); }
.pc-code pre.out { background: rgba(255,255,255,0.06); border: 1px dashed rgba(255,255,255,0.18); color: var(--pc-ink); font-size: 0.76em; }
.pc-code .olab { position: absolute; top: 0.35em; right: 0.6em; font-family: 'Open Sans', sans-serif; font-size: 0.7em; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pc-faint); }
.pc-code .ln { display: block; padding: 0 0.4em; margin: 0 -0.4em; border-radius: 0.25em; }
.pc-code .ln.hl { background: rgba(245,199,107,0.16); box-shadow: inset 0.18em 0 0 var(--pc-gold); }
.pc-code .s { color: #F5C76B; } .pc-code .c { color: rgba(242,250,248,0.45); font-style: italic; } .pc-code .f { color: #7FD8C3; }
.pc-code .o { color: #FF8AA3; } .pc-code .k { color: #C9A7FF; } .pc-code .n { color: #8EC5FF; }

/* ---------- scene: dag ---------- */
.pc-dag .dagbox { min-width: 0; }
.pc-dag svg { width: 100%; height: auto; max-height: 21em; overflow: visible; display: block; margin: 0 auto; }
.pc-dag .node rect { fill: rgba(4, 35, 31, 0.92); stroke: var(--c); stroke-width: 2.2; }
.pc-dag .node .ring { fill: none; stroke: var(--c); stroke-width: 1.4; stroke-dasharray: 4 3; }
.pc-dag .node text { fill: var(--pc-ink); font-family: 'Open Sans', sans-serif; font-size: 17px; font-weight: 700; }
.pc-dag .node .ntag { fill: var(--c); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.pc-dag .node.hl rect { fill: rgba(245,199,107,0.18); stroke: var(--pc-gold); stroke-width: 3; }
.pc-dag .edge path { fill: none; stroke-width: 2.4; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.3s var(--pc-ease) !important; }
.pc-dag .edge.on path { stroke-dashoffset: 0; }
.pc-dag .edge.dashed.on path { stroke-dasharray: 7 6; }
.pc-dag .edge:not([data-t]) path { stroke-dashoffset: 0; }
.pc-dag .edge:not([data-t]).dashed path { stroke-dasharray: 7 6; }
.pc-dag .edge.hl path { stroke: var(--pc-gold) !important; stroke-width: 3.6; }
.pc-dag .edge, .pc-dag .node { transform: none !important; }
.pc-dag .blk path { stroke: var(--pc-rose); stroke-width: 3.5; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
.pc-dag .elab { fill: var(--pc-dim); font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 700; }

/* ---------- scene: timeline ---------- */
.pc-timeline .tl { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0.8em; padding-top: 1.6em; }
.pc-timeline .tl::before { content: ''; position: absolute; left: 0; right: 0; top: 0.55em; height: 2px; background: linear-gradient(90deg, rgba(127,216,195,0.1), rgba(127,216,195,0.6), rgba(127,216,195,0.1)); }
.pc-timeline .ev { position: relative; display: flex; flex-direction: column; gap: 0.25em; padding: 0.7em 0.8em; border-radius: 0.6em; background: var(--pc-panel); border-top: 0.2em solid var(--c, var(--pc-mint)); }
.pc-timeline .ev .dot { position: absolute; top: calc(-1.7em + 1px); left: 0.9em; width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--c, var(--pc-mint)); box-shadow: 0 0 0 0.25em rgba(127,216,195,0.18); }
.pc-timeline .ev .when { font-weight: 800; color: var(--c, var(--pc-mint)); font-size: 0.95em; }
.pc-timeline .ev .what { font-size: 0.84em; color: var(--pc-dim); line-height: 1.35; }
.pc-timeline .ev.now { background: rgba(255,255,255,0.1); }

/* ---------- scene: html (custom) helpers ---------- */
.pc-html .box { padding: 0.8em 1em; border-radius: 0.65em; background: var(--pc-panel); border: 1px solid rgba(255,255,255,0.08); }
.pc-html .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; }
.pc-html .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; }
.pc-html svg { max-width: 100%; height: auto; }

/* ---------- fallbacks: untimed items render in their final state ---------- */
.pc-plot .series:not([data-t]) { stroke-dashoffset: 0; }
.pc-plot .series.dash:not([data-t]) { stroke-dasharray: 7 7; }
.pc-bars .row:not([data-t]) .fill { width: var(--w); }
.pc-stack .seg:not([data-t]) { width: var(--w); }
.pc-persontime .row:not([data-t]) .bar { width: var(--w); }
.pc-persontime .row:not([data-t]) .end { transform: translate(-50%, -50%) scale(1); }
.pc-list.chips ol { display: flex; flex-wrap: wrap; }
.pc-kicker .nc, .pc-formula .eqbox .lbl .nc, .pc-calc .given .g-l .nc { text-transform: none; }
.pc-calc .result, .pc-calc .step { white-space: normal; }
.pc-define .term { overflow-wrap: anywhere; hyphens: auto; }
.pc-dag svg { max-height: 17.5em; }

/* ---------- caption line ---------- */
.pc-caption { position: absolute; z-index: 4; left: 6%; right: 6%; bottom: 4.5%; text-align: center; pointer-events: none; display: none; }
.pc.has-cc .pc-caption { display: block; }
.pc-caption span { display: inline; padding: 0.22em 0.55em; line-height: 1.75; font-size: 0.9em; background: rgba(0, 0, 0, 0.62); color: #fff; border-radius: 0.3em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pc-caption b { color: var(--pc-sarah); margin-right: 0.35em; font-weight: 800; }
.pc-caption.k b { color: var(--pc-kiffer); }

/* big play overlay */
.pc-bigplay { position: absolute; z-index: 5; right: 4%; bottom: 7%; width: 4.6em; height: 4.6em; border-radius: 50%; border: none; background: var(--pc-red); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0.8em 2em rgba(0,0,0,0.35), 0 0 0 0.5em rgba(204,0,51,0.18); transition: transform .25s, opacity .35s; }
.pc-bigplay:hover { transform: scale(1.06); }
.pc-bigplay svg { width: 42%; height: 42%; margin-left: 8%; }
.pc.is-playing .pc-bigplay, .pc.has-started .pc-bigplay { opacity: 0; pointer-events: none; transform: scale(.8); }
.pc-paused-badge { position: absolute; z-index: 5; right: 2.2%; bottom: 4%; padding: 0.3em 0.7em; border-radius: 999px; background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.85); font-size: 0.68em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; transition: opacity .3s; pointer-events: none; }
.pc.has-started:not(.is-playing) .pc-paused-badge { opacity: 1; }

/* in-stage thin progress */
.pc-progress { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.08); }
.pc-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--pc-red); }

/* ---------- control bar ---------- */
.pc-controls { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #03241F; border: 1px solid rgba(255,255,255,0.12); border-top: 1px solid rgba(255,255,255,0.06); border-radius: 0 0 14px 14px; flex-wrap: wrap; }
.pc-btn { flex-shrink: 0; display: inline-grid; place-items: center; height: 34px; min-width: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: rgba(255,255,255,0.82); cursor: pointer; font: 700 12px/1 'Open Sans', sans-serif; letter-spacing: .04em; transition: background .15s, color .15s; }
.pc-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.pc-btn:focus-visible { outline: 2px solid var(--pc-mint); outline-offset: 1px; }
.pc-btn svg { width: 18px; height: 18px; }
.pc-btn.play { background: var(--pc-red); color: #fff; width: 40px; height: 40px; border-radius: 50%; }
.pc-btn.play:hover { background: #E0103F; }
.pc-btn.is-on { color: #04231F; background: var(--pc-mint); }
.pc-btn .skip-n { position: absolute; font-size: 7.5px; font-weight: 800; margin-top: 1px; }
.pc-btn.skip { position: relative; }
.pc-time { font: 600 12.5px/1 'Open Sans', sans-serif; color: rgba(255,255,255,0.75); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.pc-scrub { position: relative; flex: 1 1 200px; min-width: 120px; height: 28px; cursor: pointer; touch-action: none; outline: none; }
.pc-scrub .trk { position: absolute; left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
.pc-scrub .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--pc-red); }
.pc-scrub .gap { position: absolute; top: 0; bottom: 0; width: 2px; background: #03241F; }
.pc-scrub .knob { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%) scale(.85); box-shadow: 0 1px 4px rgba(0,0,0,.4); transition: transform .15s; }
.pc-scrub:hover .knob, .pc-scrub:focus-visible .knob, .pc-scrub.drag .knob { transform: translate(-50%, -50%) scale(1.1); }
.pc-scrub:focus-visible .trk { box-shadow: 0 0 0 2px var(--pc-mint); }
.pc-tip { position: absolute; bottom: 100%; transform: translateX(-50%); margin-bottom: 6px; background: #000; color: #fff; padding: 5px 9px; border-radius: 6px; font: 600 11.5px/1.3 'Open Sans', sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 10; }
.pc-tip b { color: var(--pc-mint); font-weight: 700; margin-left: 6px; }
.pc-scrub:hover .pc-tip, .pc-scrub.drag .pc-tip { opacity: 1; }
.pc-native-hidden { display: none !important; }
.pc-help { flex-basis: 100%; font: 500 11.5px/1.4 'Open Sans', sans-serif; color: rgba(255,255,255,0.45); padding: 2px 4px 0; }
@media (max-width: 560px) {
  .pc-controls { gap: 4px; padding: 8px 8px; }
  .pc-scrub { order: -1; flex-basis: 100%; }
  .pc-time { margin-right: auto; }
  .pc-help { display: none; }
}

/* ---------- fullscreen ---------- */
.pc:fullscreen { background: #021A17; display: flex; flex-direction: column; justify-content: center; padding: 0; margin: 0; }
.pc:fullscreen .pc-frame { width: min(100vw, calc((100vh - 60px) * 16 / 9)); margin: 0 auto; }
.pc:fullscreen .pc-stage { border-radius: 0; }
.pc:fullscreen .pc-controls { width: min(100vw, calc((100vh - 60px) * 16 / 9)); margin: 0 auto; border-radius: 0; }
.pc:fullscreen .pc-help { display: none; }

/* ---------- transcript sync ---------- */
.transcript .dialogue.pc-has-ts { position: relative; }
.transcript .pc-ts { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: transparent; color: rgba(255,255,255,0.55); font: 700 10.5px/1.6 'Open Sans', sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; vertical-align: 1px; }
.transcript .pc-ts:hover { color: #fff; border-color: rgba(255,255,255,0.5); }
.transcript .dialogue.pc-live { background: rgba(255,255,255,0.05); border-radius: 0 8px 8px 0; }
.transcript .dialogue.pc-live .pc-ts { background: var(--pc-red, #CC0033); border-color: transparent; color: #fff; }
.pc-follow { margin-left: auto; margin-right: 14px; display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 'Open Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.7); cursor: pointer; user-select: none; }
.pc-follow input { accent-color: #CC0033; }

/* ---------- narrow stage layout adjustments ---------- */
@container pcstage (max-width: 620px) {
  .pc-title { font-size: 1.5em; }
  .pc-cover .pc-title { font-size: 2.1em; }
  .pc-section { flex-direction: column !important; align-items: flex-start; gap: 0.4em; }
  .pc-section .num { font-size: 4.5em; }
  .pc-define .row, .pc-calc .lay, .pc-plot .lay, .pc-sink .lay { grid-template-columns: 1fr; gap: 0.8em; }
  .pc-define .term { font-size: 1.9em; }
  .pc-cols .grid { grid-template-columns: repeat(min(var(--n, 2), 2), minmax(0, 1fr)); }
  .pc-cards .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-cards .tile .ds { display: none; }
  .pc-list.cols-2 ol, .pc-list.cols-2 ul, .pc-list.cols-3 ol, .pc-list.cols-3 ul { grid-template-columns: 1fr; }
  .pc-flow .frow, .pc-bars .row, .pc-ci .crow, .pc-ci .axisrow { grid-template-columns: 1fr; gap: 0.35em; }
  .pc-ci .axisrow > span { display: none; }
  .pc-flow .chain { flex-wrap: wrap; }
  .pc-flow .node { flex: 1 1 40%; }
  .pc-formula.eqrow .eqs { flex-direction: column; align-items: center; }
  .pc-persontime .row, .pc-persontime .axis { grid-template-columns: 5.2em minmax(0, 1fr) 4.8em; gap: 0.5em; }
  .pc-formula .eqbox { font-size: 1.3em; padding: 0.5em 0.7em; white-space: normal; max-width: 100%; }
  .pc-calc .step, .pc-calc .result, .pc-persontime .tot > div, .pc-stack .total { white-space: normal; }
  .pc-stack .legend { grid-template-columns: 1fr; }
  .pc-stack .seg { padding: 0 0.35em; font-size: 0.85em; }
  .pc-sink svg { max-height: 12.5em; }
  .pc-cols.n3plus .card .ft { display: none; }
  .pc-plot svg { max-height: 15em; }
  .pc-table .lay, .pc-code .lay, .pc-dag .lay { grid-template-columns: 1fr; gap: 0.7em; }
  .pc-dag svg { max-height: 14em; }
  .pc-timeline .tl { grid-template-columns: 1fr; padding-top: 0; padding-left: 1.4em; gap: 0.45em; }
  .pc-timeline .tl::before { left: 0.45em; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .pc-timeline .ev .dot { top: 0.9em; left: calc(-1.4em + 1px); }
  .pc-html .row2, .pc-html .row3 { grid-template-columns: 1fr; }
  .pc-tbl { font-size: 0.85em; }
  .pc-tbl th, .pc-tbl td { padding: 0.4em 0.55em; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-bg { animation: none; }
  .pc-scene, .pc-scene [data-t] { transform: none !important; }
  .pc-sink .stream, .pc-sink .surface path { animation: none; }
}

/* =====================================================================
   Module slide players (modules/walkthrough.js) and the chart and layout
   helpers written by modules/companion/_src/svgfx.py
   ===================================================================== */
/* full-width dark band: the deck spans the content area to the right of the
   sidebar, as the classic deck does; the stage is sized to fit the window */
.av-companion { margin: 0 0 26px; }
.pc.pc-slides { margin: 0; line-height: 1.4; padding-top: 18px; background: #021C18; }
.pc-slides .pc-frame { width: min(calc(100% - 60px), max(620px, calc((100vh - 290px) * 16 / 9))); margin: 0 auto; }
.pc-slides .pc-stage { border-radius: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); }
.pc-slides .pc-progress { border-radius: 0 0 14px 14px; overflow: hidden; }
.pc-slides .pc-controls { margin-top: 16px; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; padding: 10px 30px; flex-wrap: nowrap; }
.av-companion .av-dive-bar { border-top: 0; }
.pc.pc-slides:fullscreen { padding: 0; }
.pc.pc-slides:fullscreen .pc-stage { border-radius: 0; box-shadow: none; }
@media (min-width: 769px) {
  .av-companion { width: calc(100vw - 280px); max-width: none; margin-left: calc((100% - (100vw - 280px)) / 2); margin-right: 0; }
  .module-body > .av-companion:first-child { margin-top: -40px; }
}
@media (max-width: 768px) {
  .av-companion { margin-left: -20px; margin-right: -20px; }
  .module-body > .av-companion:first-child { margin-top: -24px; }
  .pc.pc-slides { padding-top: 12px; }
  .pc-slides .pc-frame { width: calc(100% - 24px); }
  .pc-slides .pc-controls { margin-top: 10px; padding: 8px 12px; flex-wrap: wrap; }
}
.pc-slides .pc-scene :is(p, ul, ol, li, h2, h3, h4, h5, pre) { margin: 0; padding: 0; }
.pc-slides .pc-scene :is(h2, h3, h4) { font-size: inherit; color: inherit; }
/* The reset above removes padding and margins inside slide scenes. Restore the
   spacing that scene components need (October 2026): numbered list items, chips,
   section chips, code blocks and mode-card headings. */
.pc-slides .pc-scene.pc-list li, .pc-slides .pc-scene .pc-list li { padding: 0.62em 0.95em; }
.pc-slides .pc-scene.pc-list.chips li, .pc-slides .pc-scene .pc-list.chips li { padding: 0.45em 1em; }
.pc-slides .pc-scene.pc-section ul { margin-top: 0.9em; }
.pc-slides .pc-scene.pc-section li { padding: 0.35em 0.85em; }
.pc-slides .pc-scene.pc-code pre { padding: 0.8em 1em; }
.pc-slides .pc-scene.pc-sink .mode-card h5 { margin-bottom: 0.15em; }
.pc-chap-n { font-weight: 800; color: var(--pc-faint); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.pc-btn.chap svg { width: 17px; height: 17px; }

/* SVG charts */
.pc-scene svg.ch { display: block; width: 100%; height: auto; overflow: visible; }
.pc-scene svg.ch text { fill: var(--pc-dim); font-family: 'Open Sans', sans-serif; font-size: var(--fs, 13px); font-weight: 600; }
.pc-scene svg.ch text.lbl, .pc-scene svg.ch text.t { fill: var(--pc-ink); font-weight: 700; }
.pc-scene svg.ch text.v { fill: var(--pc-ink); font-weight: 800; }
.pc-scene svg.ch text.rl { fill: var(--pc-ink); font-weight: 700; }
.pc-scene svg.ch text.note { fill: var(--pc-gold); font-weight: 800; }
.pc-scene svg.ch tspan.dm { fill: var(--pc-dim); font-weight: 600; }
.pc-scene svg.ch .ax line, .pc-scene svg.ch .ax path { stroke: rgba(255,255,255,0.35); stroke-width: 1.2; fill: none; }
.pc-scene svg.ch .gr line { stroke: rgba(255,255,255,0.07); stroke-width: 1; }
.pc-scene svg.ch .ref { stroke: rgba(255,255,255,0.55); stroke-width: 1.4; stroke-dasharray: 5 4; fill: none; }
.pc-scene svg [data-t] { transform: none; }
.pc-scene svg .bar { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .9s var(--pc-ease) calc(var(--i, 0) * 60ms), fill .4s, opacity .4s; }
.pc-scene svg [data-t]:not(.on) .bar { transform: scaleY(0); }
.pc-scene svg .hbar { transform-box: fill-box; transform-origin: 0 50%; transition: transform .9s var(--pc-ease) calc(var(--i, 0) * 60ms); }
.pc-scene svg [data-t]:not(.on) .hbar { transform: scaleX(0); }
.pc-scene svg .draw { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--pc-ease) .15s; }
.pc-scene svg [data-t]:not(.on) .draw, .pc-scene svg .draw[data-t]:not(.on) { stroke-dashoffset: var(--len); }
.pc-scene svg .draw.dash { stroke-dasharray: 7 6; }
.pc-scene svg .dot, .pc-scene svg .pt { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .5s var(--pc-ease) calc(.5s + var(--i, 0) * 60ms); }
.pc-scene svg [data-t]:not(.on) .dot, .pc-scene svg [data-t]:not(.on) .pt { transform: scale(0); }
.pc-scene svg [data-k] { transition: opacity .4s, filter .4s; }
.pc-scene svg [data-k].hl { filter: drop-shadow(0 0 6px rgba(245,199,107,0.75)); }
.pc-scene svg rect[data-k].hl, .pc-scene svg circle[data-k].hl { stroke: #fff; stroke-width: 2; }
.pc-scene.has-hl svg .sr [data-k]:not(.hl), .pc-scene.has-hl svg .fr[data-k]:not(.hl):not([data-t]), .pc-scene.has-hl svg .fr[data-k].on:not(.hl) { opacity: .35; }

/* layouts */
.pc-scene .sx-lay { display: grid; grid-template-columns: minmax(0, var(--a, 1.35fr)) minmax(0, var(--b, 1fr)); gap: 1.3em; align-items: center; }
.pc-scene .sx-col { display: grid; gap: 0.6em; align-content: center; min-width: 0; }
.pc-scene .sx-panels { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0.9em; align-items: end; }
.pc-scene .sx-panel { min-width: 0; display: flex; flex-direction: column; gap: 0.35em; padding: 0.3em; border-radius: 0.6em; transition: opacity .45s, background-color .4s, box-shadow .4s; }
.pc-scene .sx-panel .ph { font-size: 0.8em; font-weight: 800; color: var(--pc-ink); text-align: center; line-height: 1.2; }
.pc-scene .sx-panel .ph small { display: block; font-weight: 600; color: var(--pc-dim); font-size: 0.92em; }
.pc-scene .sx-panel .pf { align-self: center; font-size: 0.74em; font-weight: 800; color: var(--pc-mint); text-align: center; padding: 0.25em 0.7em; border-radius: 999px; background: rgba(127,216,195,0.1); border: 1px solid rgba(127,216,195,0.3); line-height: 1.25; }
.pc-scene .sx-panel[data-k] { padding: 0.3em; }
.pc-scene .sx-panel[data-k].hl { background: rgba(245,199,107,0.07); color: inherit; box-shadow: 0 0 0 1px rgba(245,199,107,0.5); }
.pc-scene.has-hl .sx-panel[data-k]:not(.hl):not([data-t]), .pc-scene.has-hl .sx-panel[data-k].on:not(.hl) { opacity: .4; }
.pc-scene .sx-stats { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 0.7em; }
.pc-scene .sx-stat { padding: 0.65em 0.9em; border-radius: 0.6em; background: var(--pc-panel); border-left: 0.22em solid var(--c, var(--pc-gold)); min-width: 0; }
.pc-scene .sx-stat .n { font-family: var(--pc-math); font-size: 2.1em; line-height: 1.05; color: var(--c, var(--pc-gold)); white-space: nowrap; }
.pc-scene .sx-stat .l { font-size: 0.86em; color: var(--pc-ink); font-weight: 700; margin-top: 0.15em; }
.pc-scene .sx-stat .s { font-size: 0.76em; color: var(--pc-dim); margin-top: 0.1em; }
.pc-scene .sx-stat[data-k] { padding: 0.65em 0.9em; border-radius: 0.6em; }
.pc-scene .sx-stat[data-k].hl { background: rgba(245,199,107,0.12); color: inherit; }
.pc-scene .sx-chips { display: flex; flex-wrap: wrap; gap: 0.45em; }
.pc-scene .sx-chip { padding: 0.38em 0.9em; border-radius: 999px; background: var(--pc-panel-2); border: 1px solid var(--pc-line); font-size: 0.86em; }
.pc-scene .sx-chip[data-k] { padding: 0.38em 0.9em; border-radius: 999px; }
.pc-scene .sx-code { font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace; font-size: 0.8em; line-height: 1.5; padding: 0.55em 0.9em; border-radius: 0.55em; background: rgba(0,0,0,0.38); border: 1px solid rgba(255,255,255,0.1); color: var(--pc-mint); white-space: pre-wrap; word-break: break-word; }
.pc-scene .sx-card { padding: 0.75em 0.95em; border-radius: 0.65em; background: var(--pc-panel); border: 1px solid rgba(255,255,255,0.08); border-top: 0.2em solid var(--c, var(--pc-mint)); min-width: 0; display: flex; flex-direction: column; gap: 0.4em; }
.pc-scene .sx-card h4 { font-size: 1em; font-weight: 800; color: var(--c, var(--pc-mint)); }
.pc-scene .sx-card .bd { font-size: 0.84em; color: var(--pc-ink); line-height: 1.38; }
.pc-scene .sx-card .bd small { display: block; color: var(--pc-dim); margin-top: 0.25em; }
.pc-scene .sx-card[data-k] { padding: 0.75em 0.95em; border-radius: 0.65em; }
.pc-scene .sx-card[data-k].hl { background: rgba(245,199,107,0.1); color: inherit; box-shadow: 0 0 0 1px rgba(245,199,107,0.5); }
.pc-scene.has-hl .sx-card[data-k]:not(.hl):not([data-t]), .pc-scene.has-hl .sx-card[data-k].on:not(.hl) { opacity: .45; }
.pc-scene .sx-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0.8em; }
.pc-scene .sx-pill { display: inline-block; padding: 0.2em 0.7em; border-radius: 999px; font-weight: 800; font-size: 0.82em; background: rgba(127,216,195,0.14); color: var(--pc-mint); }

/* 100% stacked horizontal bars */
.pc-scene .sx-hs { display: grid; gap: 0.7em; }
.pc-scene .sx-hs .r { display: grid; grid-template-columns: var(--lw, 8.5em) minmax(0, 1fr); gap: 0.8em; align-items: center; }
.pc-scene .sx-hs .rl { font-weight: 800; font-size: 0.92em; line-height: 1.2; }
.pc-scene .sx-hs .rl small { display: block; font-weight: 600; color: var(--pc-dim); font-size: 0.86em; }
.pc-scene .sx-hs .bar { display: flex; height: 2.4em; border-radius: 0.5em; overflow: hidden; background: rgba(255,255,255,0.04); }
.pc-scene .sx-hs .seg { flex: 0 0 var(--w); display: flex; align-items: center; justify-content: center; color: #04231F; font-weight: 800; font-size: 0.84em; white-space: nowrap; overflow: hidden; padding: 0; border-radius: 0; transition: flex-basis 1s var(--pc-ease) calc(var(--i, 0) * 80ms), opacity .4s, box-shadow .4s; }
.pc-scene .sx-hs .r[data-t]:not(.on) .seg { flex-basis: 0; }
.pc-scene .sx-hs .seg.hl { background-image: linear-gradient(rgba(255,255,255,0.28), rgba(255,255,255,0.28)); box-shadow: inset 0 0 0 0.16em #fff; color: #04231F; }
.pc-scene.has-hl .sx-hs .seg:not(.hl) { opacity: .45; }
.pc-scene .sx-hs .lg { display: flex; flex-wrap: wrap; gap: 0.35em 1.1em; font-size: 0.8em; color: var(--pc-dim); padding-left: calc(var(--lw, 8.5em) + 0.8em); }
.pc-scene .sx-hs .lg i { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 0.2em; margin-right: 0.4em; vertical-align: -0.05em; }

/* untimed charts render in their final state */
.pc.pc-instant .pc-scene svg .bar, .pc.pc-instant .pc-scene svg .draw, .pc.pc-instant .pc-scene svg .dot, .pc.pc-instant .pc-scene svg .pt, .pc.pc-instant .pc-scene .sx-hs .seg { transition: none !important; }

@container pcstage (max-width: 620px) {
  .pc-chap-n { display: none; }
  .pc-scene .sx-lay { grid-template-columns: 1fr; gap: 0.7em; }
  .pc-scene .sx-panels { grid-template-columns: repeat(min(var(--n, 3), var(--pn, 2)), minmax(0, 1fr)); gap: 0.45em; }
  .pc-scene .sx-panels svg.ch { max-height: var(--ph, 9em); }
  .pc-scene .sx-grid { grid-template-columns: repeat(min(var(--n, 3), var(--gn, 1)), minmax(0, 1fr)); gap: 0.5em; }
  .pc-scene .sx-stats { grid-template-columns: repeat(min(var(--n, 2), 2), minmax(0, 1fr)); }
  .pc-scene .sx-stat .n { font-size: 1.7em; }
  .pc-scene .sx-hs .r { grid-template-columns: 1fr; gap: 0.25em; }
  .pc-scene .sx-hs .lg { padding-left: 0; }
  .pc-scene .sx-hide-sm { display: none !important; }
  .pc-scene .sx-lay svg.ch { max-height: var(--lh, 15em); }
}
@container pcstage (min-width: 621px) { .pc-scene .sx-show-sm { display: none !important; } }
.pc-scene .violet { color: #C9A7FF; }
.pc-scene .orange { color: #FFA46B; }
.pc-scene .sx-big { font-size: 1.25em; }
.pc-scene .sx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; }
.pc-scene .sx-arrow { color: var(--pc-faint); font-size: 1.3em; font-family: var(--pc-math); }
.pc-scene .sx-box { padding: 0.55em 0.95em; border-radius: 0.6em; background: var(--pc-panel); border: 1px solid var(--pc-line); }
.pc-scene .sx-box.dash { border: 0.12em dashed var(--c, var(--pc-gold)); background: rgba(245,199,107,0.06); }
.pc-scene .sx-box small { display: block; font-size: 0.72em; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pc-faint); margin-bottom: 0.2em; }
.pc-scene .sx-leaf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2em 0.7em; align-items: baseline; padding: 0.45em 0 0.45em; border-top: 1px solid rgba(255,255,255,0.07); }
.pc-scene .sx-leaf:first-of-type { border-top: none; }
.pc-scene .sx-leaf b { color: var(--c, var(--pc-mint)); }
.pc-scene .sx-leaf .d { font-size: 0.86em; }
.pc-scene .sx-leaf .e { grid-column: 2; font-size: 0.78em; color: var(--pc-dim); }
.pc-scene .sx-letter { font-size: 2.6em; font-weight: 800; line-height: 1; color: var(--c, var(--pc-mint)); }
.pc-scene .sx-glyph { width: 100%; max-width: 7em; height: auto; display: block; }
.pc-scene .sx-glyph * { vector-effect: non-scaling-stroke; }
@container pcstage (max-width: 620px) {
  .pc-scene .sx-letter { font-size: 1.9em; }
}
.pc-table.sx-lg .pc-tbl { font-size: 1.12em; }
.pc-table.sx-lg .tblwrap { align-self: center; }

/* ordered scale with unknown spacing */
.pc-scene .sx-scale { display: flex; align-items: center; gap: 0; margin: 0.3em 0 0.9em; }
.pc-scene .sx-scale .cat { flex: 0 0 auto; padding: 0.45em 0.8em; border-radius: 999px; font-weight: 800; font-size: 0.9em; color: #04231F; background: var(--c, var(--pc-mint)); white-space: nowrap; }
.pc-scene .sx-scale .gp { flex: var(--g, 1) 1 0; min-width: 1.6em; position: relative; height: 2.2em; }
.pc-scene .sx-scale .gp::before { content: ''; position: absolute; left: 0.2em; right: 0.2em; top: 50%; border-top: 2px dashed rgba(255,255,255,0.3); }
.pc-scene .sx-scale .gp span { position: absolute; left: 50%; top: -0.35em; transform: translateX(-50%); font-weight: 800; color: var(--pc-gold); }
.pc-scene .sx-ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em; font-size: 0.84em; }
.pc-scene .sx-ladder .lb { font-weight: 800; color: var(--pc-ink); margin-right: 0.4em; min-width: 6.5em; }
.pc-scene .sx-ladder .st { padding: 0.2em 0.6em; border-radius: 0.4em; background: var(--pc-panel-2); border: 1px solid var(--pc-line); }
.pc-scene .sx-ladder .ar { color: var(--pc-faint); }

/* ordinal splits */
.pc-scene .sx-splits { display: grid; grid-template-columns: 4.6em repeat(5, minmax(0, 1fr)) 3.4em 8.5em; gap: 0.32em 0.3em; align-items: stretch; font-size: 0.86em; }
.pc-scene .sx-splits .hd { font-size: 0.82em; font-weight: 800; color: var(--pc-dim); text-align: center; align-self: end; }
.pc-scene .sx-splits .sl { font-weight: 800; color: var(--pc-ink); align-self: center; }
.pc-scene .sx-splits .cl { display: grid; place-items: center; padding: 0.42em 0.2em; border-radius: 0.35em; font-weight: 700; font-size: 0.86em; }
.pc-scene .sx-splits .cl.lo { background: rgba(255,110,138,0.16); color: rgba(255,170,185,0.95); }
.pc-scene .sx-splits .cl.hi { background: rgba(127,216,195,0.28); color: #DFFAF2; }
.pc-scene .sx-splits .cl.cut { box-shadow: -0.2em 0 0 0 var(--pc-gold); }
.pc-scene .sx-splits .ic { display: grid; place-items: center; font-family: var(--pc-math); color: var(--pc-gold); font-size: 1.05em; border-radius: 0.35em; background: rgba(245,199,107,0.1); }
.pc-scene .sx-splits .or { grid-column: 8; grid-row: 2 / span 4; display: grid; place-items: center; text-align: center; padding: 0.5em; border-radius: 0.55em; border: 0.12em solid var(--pc-mint); background: rgba(127,216,195,0.1); color: var(--pc-ink); font-size: 0.92em; font-weight: 700; }
.pc-scene .sx-splits .or b { display: block; font-family: var(--pc-math); color: var(--pc-mint); font-size: 1.25em; }
.pc-scene .sx-splits .rw { display: contents; }
@container pcstage (max-width: 620px) {
  .pc-scene .sx-splits { grid-template-columns: 3.3em repeat(5, minmax(0, 1fr)) 2.6em; font-size: 0.74em; }
  .pc-scene .sx-splits .or { grid-column: 1 / -1; grid-row: auto; }
  .pc-scene .sx-ladder .lb { min-width: 0; flex-basis: 100%; }
}
.pc-formula.sx-w2 .where { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc-scene .sx-splits .ic { white-space: nowrap; }
@container pcstage (min-width: 621px) { .pc-scene .sx-splits { grid-template-columns: 4.6em repeat(5, minmax(0, 1fr)) 4em 8.5em; } }
@container pcstage (max-width: 620px) { .pc-formula.sx-w2 .where { grid-template-columns: 1fr; } }
/* room inside the clipped title for the glow of its dot */
.pc-chap-title { padding: 0.7em 0.2em 0.7em 0.8em; margin: -0.7em -0.2em -0.7em -0.8em; }

/* some module pages style every svg text with a white halo; keep it out of the stage */
.pc-scene svg text:not([stroke]) { stroke: none; }