/* Crit Studio · Stage. A second take on the crit: a lit table between two designers, a spotlight on the note,
   captions underneath, chapters you can scrub. Dark first; light is a warm gallery. Radius 8/12/18, motion 160-950ms. */
@property --accent { syntax: "<color>"; inherits: true; initial-value: #FF5A1F; }
:root {
  --accent: #FF5A1F;
  --serif: "Instrument Serif", Georgia, serif; --sans: Inter, ui-sans-serif, -apple-system, system-ui, sans-serif;
  --out: cubic-bezier(.2,.8,.2,1); --cam: cubic-bezier(.7,0,.22,1); --spring: cubic-bezier(.3,1.35,.4,1);
  --r1: 8px; --r2: 12px; --r3: 18px;
  --side: clamp(16px, 15vw, 250px); --figW: clamp(150px, 15vw, 250px); --capH: 150px;
  transition: --accent .7s ease;
}
:root[data-theme="dark"] {
  --bg: #0A0A0B; --stage: #0F0F11; --floor: #141416; --panel: rgba(24,24,27,.72); --solid: #121214; --raised: #1B1B1E;
  --ink: #F4F3EF; --ink-2: #C9C7C1; --mut: #8F8C86; --faint: #5F5D59; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --chip: rgba(255,255,255,.055); --chip-2: rgba(255,255,255,.09); --dimA: .7; --dimC: #050506; --cap-shadow: 0 2px 18px rgba(0,0,0,.6);
  --e1: 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.4); --e2: 0 0 0 1px var(--line), 0 24px 70px -18px rgba(0,0,0,.8);
  --table-shadow: 0 50px 120px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #E7E4DE; --stage: #EFEDE8; --floor: #E3E0D9; --panel: rgba(255,255,255,.76); --solid: #FBFAF8; --raised: #FFFFFF;
  --ink: #141413; --ink-2: #3B3A37; --mut: #75726C; --faint: #A6A39C; --line: rgba(20,20,19,.09); --line-2: rgba(20,20,19,.15);
  --chip: rgba(20,20,19,.045); --chip-2: rgba(20,20,19,.08); --dimA: .5; --dimC: #24221F; --cap-shadow: 0 1px 14px rgba(239,237,232,.9);
  --e1: 0 0 0 1px var(--line), 0 1px 2px rgba(20,20,19,.05); --e2: 0 0 0 1px var(--line), 0 20px 50px -18px rgba(20,20,19,.28);
  --table-shadow: 0 40px 90px -34px rgba(40,34,26,.42), 0 0 0 1px rgba(20,20,19,.06);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 13.5px/20px var(--sans); letter-spacing: -.003em;
  font-feature-settings: "cv11", "ss01", "ss03"; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; letter-spacing: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r1); }
.icon { width: 32px; height: 32px; border: 0; border-radius: 9px; background: none; color: var(--mut); display: grid; place-items: center; transition: background .15s, color .15s; flex: none; }
.icon:hover { background: var(--chip-2); color: var(--ink); }
.icon[aria-pressed="true"] { background: var(--chip-2); color: var(--ink); }
.face { border-radius: 50%; object-fit: cover; flex: none; background: var(--chip-2); display: block; }

/* ---------- top bar ---------- */
.bar { height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 12px 0 16px; background: var(--solid); box-shadow: 0 1px 0 var(--line); z-index: 8; min-width: 0; }
.brand { font-weight: 600; letter-spacing: -.015em; display: flex; align-items: center; gap: 8px; font-size: 14px; flex: none; }
.brand em { font: italic 400 19px/1 var(--serif); letter-spacing: 0; transform: translateY(.03em); }
.brand { gap: 6px; } .brand .wm { height: 16px; width: auto; display: block; overflow: visible; }
.mark { width: 19px; height: 19px; color: var(--ink); }
.tabs { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-left: 14px; box-shadow: -1px 0 0 var(--line); }
.tab { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 6px; border: 0; border-radius: 9px; background: none; color: var(--mut); white-space: nowrap; font-weight: 500; }
.tab img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; object-position: top left; box-shadow: 0 0 0 1px var(--line); }
.tab:hover { color: var(--ink); background: var(--chip); }
.tab.on { color: var(--ink); background: var(--chip-2); }
.tab small { color: var(--faint); font-weight: 400; }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.engine { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mut); padding: 0 10px; }
.engine i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.engine.on i { background: #2BD07A; box-shadow: 0 0 0 3px rgba(43,208,122,.18); }
.switch { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 9px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--line-2); margin-right: 4px; transition: background .15s; }
.switch:hover { background: var(--chip); }
.theme .moon, :root[data-theme="dark"] #theme .sun { display: none; }
#theme .moon { display: none; } :root[data-theme="dark"] #theme .moon { display: block; }
.sim { font-size: 12px; color: var(--mut); box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 999px; padding: 2px 9px; white-space: nowrap; margin-left: 6px; }

/* ---------- layout ---------- */
.main { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; }
.stage { position: relative; overflow: hidden; background: var(--stage); isolation: isolate; min-width: 0; }
.ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 48% at 50% 40%, color-mix(in oklab, var(--accent) 13%, transparent), transparent 72%),
    radial-gradient(ellipse 80% 40% at 50% 112%, color-mix(in oklab, var(--accent) 10%, var(--floor)), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, color-mix(in oklab, var(--bg) 70%, transparent)); }
.ambient::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0); background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%); }

/* ---------- the table: design + spotlight + pins (camera moves this) ---------- */
.viewport { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.viewport.dragging { cursor: grabbing; }
.table { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform .95s var(--cam); will-change: transform; --z: 1; }
.table.snap, .table.snap .pin { transition: none !important; }
.table img { display: block; border-radius: 14px; box-shadow: var(--table-shadow); user-select: none; -webkit-user-drag: none; background: #fff; }
.spot { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; border-radius: 14px; }
.dim { fill: var(--dimC); opacity: 0; transition: opacity .7s var(--out); }
.spot.on .dim { opacity: var(--dimA); }
.bracket { fill: none; stroke: var(--c, var(--accent)); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--c, var(--accent)) 70%, transparent)); animation: bIn .5s var(--out) both; }
.halo { fill: none; stroke: var(--c, var(--accent)); stroke-width: 1; opacity: .5; vector-effect: non-scaling-stroke; animation: bIn .5s var(--out) both; }
@keyframes bIn { from { opacity: 0; } }

.pins { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50% 50% 50% 6px; pointer-events: auto;
  background: var(--c); color: #fff; font: 600 12px/28px var(--sans); text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2.5px #fff, 0 6px 16px rgba(0,0,0,.35);
  transform: translate(-50%, -100%) scale(calc(1 / var(--z))); transform-origin: 50% 100%;
  transition: transform .95s var(--cam), opacity .4s, box-shadow .2s; }
.pin.landing { animation: pinDrop .55s var(--spring) both; }
@keyframes pinDrop { from { translate: 0 -30px; opacity: 0; } }
.spot.on ~ .pins .pin:not(.active) { opacity: .45; }
.pin.active { box-shadow: 0 0 0 2.5px #fff, 0 0 0 7px color-mix(in oklab, var(--c) 40%, transparent), 0 8px 22px rgba(0,0,0,.45); z-index: 2; }
.pin:hover { z-index: 3; opacity: 1 !important; }
.pin::after { content: attr(data-title); position: absolute; left: calc(100% + 8px); top: 50%; translate: 0 -50%; white-space: nowrap;
  background: var(--raised); color: var(--ink); font: 500 12px/1 var(--sans); padding: 7px 9px; border-radius: 8px; box-shadow: var(--e2);
  opacity: 0; pointer-events: none; transition: opacity .15s; }
.pin:hover::after { opacity: 1; }

/* A soft floor under the captions so they read over a white design. */
.stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 230px; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, var(--stage) 18%, color-mix(in oklab, var(--stage) 82%, transparent) 50%, transparent); }

/* ---------- the designers ---------- */
.figs { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fig { position: absolute; bottom: 0; width: var(--figW); transition: filter .6s var(--out), transform .7s var(--out), opacity .6s; transform-origin: 50% 100%; pointer-events: auto; }
.fig.left { left: max(4px, calc(var(--side) / 2 - var(--figW) / 2 + 10px)); }
.fig.right { right: max(4px, calc(var(--side) / 2 - var(--figW) / 2 + 10px)); }
.fig::before { content: ""; position: absolute; left: -30%; right: -30%; bottom: -40px; height: 140px; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 55%, transparent), transparent); opacity: 0; transition: opacity .7s; }
.fig.speaking::before { opacity: .55; }
.fig.listening { filter: brightness(.6) saturate(.7); transform: scale(.955); }
:root[data-theme="light"] .fig.listening { filter: brightness(.88) saturate(.6) contrast(.92); }
.fig.entering { opacity: 0; transform: translateY(40px) scale(.94); }
.fig .rigvideo { position: relative; width: 100% !important; height: auto !important; aspect-ratio: 414 / 554; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.rigvideo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: opacity .25s ease; }
.rigvideo video.talk { opacity: 0; } .rigvideo.talking video.talk { opacity: 1; } .rigvideo.talking video:not(.talk) { opacity: 0; }
.fig .tag { position: absolute; bottom: 12px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--panel); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--e1); font-size: 12px; transition: filter .6s; border: 0; color: var(--ink); }
.fig.listening .tag { filter: brightness(1.5); }
.fig .tag b { font-weight: 600; }
.fig .tag .st { color: var(--mut); display: flex; align-items: center; gap: 5px; }
.fig .tag .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.fig.speaking .tag .st::before { background: var(--c); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 30%, transparent); animation: live 1.2s ease-in-out infinite; }
.fig.thinking .tag .st::before { background: var(--c); animation: live .6s ease-in-out infinite; }
@keyframes live { 50% { opacity: .35; } }
.fig .tag:hover { cursor: pointer; }

/* ---------- captions ---------- */
.caption { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; z-index: 4; width: min(780px, calc(100% - 2 * var(--side) - 24px));
  display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.cap-head { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--panel);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: var(--e1); font-size: 12.5px; max-width: 100%; pointer-events: auto; }
.cap-head:empty { display: none; }
.cap-head b { font-weight: 600; }
.cap-head .num { background: var(--accent); color: #fff; font-weight: 600; font-size: 11px; min-width: 19px; height: 19px; border-radius: 6px; display: grid; place-items: center; padding: 0 5px; font-variant-numeric: tabular-nums; }
.cap-head .ttl { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-head .mode { color: var(--mut); }
.cap-text { margin: 0; text-align: center; font: 400 27px/1.3 var(--serif); letter-spacing: -.005em; color: var(--ink); text-wrap: balance; text-shadow: var(--cap-shadow);
  max-height: calc(1.3em * 4); overflow: hidden; pointer-events: auto; }
.cap-text.in { animation: capIn .45s var(--out); }
@keyframes capIn { from { opacity: 0; translate: 0 8px; filter: blur(3px); } }
.cap-text .w { opacity: .26; transition: opacity .2s, filter .2s; }
.cap-text .w.on { opacity: 1; }
.cap-text.all .w { opacity: 1; }
.cap-text.inspect { font-size: 21px; max-height: calc(1.3em * 6); overflow: auto; text-align: left; scrollbar-width: thin; }
.cap-text.sys { font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.typing { display: inline-flex; gap: 5px; padding: 10px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--mut); animation: bounce .9s infinite; }
.typing i:nth-child(2) { animation-delay: .12s; } .typing i:nth-child(3) { animation-delay: .24s; }
@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---------- pull quotes and work refs ---------- */
.pull { position: absolute; top: 16px; z-index: 5; width: min(290px, calc(var(--side) + 40px)); display: flex; flex-direction: column; gap: 10px; }
.pull.left { left: 16px; } .pull.right { right: 16px; }
.pull[data-hold]::after { order: 99; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  background: var(--raised); color: var(--mut); box-shadow: var(--e1, 0 1px 3px rgba(0,0,0,.12)); font: 500 11.5px/1 var(--sans); animation: reactIn .35s var(--spring) both; }
.pull.right[data-hold]::after { align-self: flex-end; }
.pull[data-hold="hover"]::after { content: "❚❚  Paused while you read"; }
.pull[data-hold="click"]::after { content: "❚❚  Paused · press Space or play to carry on"; }
.pull[hidden] { display: none; }
.pq, .pr { background: var(--panel); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-radius: var(--r2); box-shadow: var(--e2);
  padding: 14px 16px; animation: pullIn .6s var(--spring) both; }
.pull.right .pq, .pull.right .pr { animation-name: pullInR; }
@keyframes pullIn { from { opacity: 0; translate: -18px 0; } }
@keyframes pullInR { from { opacity: 0; translate: 18px 0; } }
.pq { position: relative; padding-left: 18px; }
.pq::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.pq q { display: block; font: italic 400 18px/1.32 var(--serif); color: var(--ink); quotes: "“" "”"; }
.pq a, .pr-head { display: block; margin-top: 8px; font-size: 11.5px; color: var(--mut); text-decoration: none; font-weight: 500; }
.pq a:hover { color: var(--accent); }
.pr-head { margin: 0 0 8px; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; font-weight: 600; }
.pr-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pr-row button { padding: 0; border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: var(--chip-2); position: relative; transition: transform .25s var(--spring); }
.pr-row button:hover { transform: translateY(-2px) scale(1.03); }
.pr-row img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-name { margin-top: 8px; font-size: 12px; color: var(--ink-2); line-height: 1.35; }

/* ---------- overlays: intro, fix list, verdict ---------- */
.overlay { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: 24px;
  background: color-mix(in oklab, var(--stage) 55%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fade .4s var(--out); }
.overlay[hidden] { display: none; }
.overlay.out { animation: fadeOut .35s var(--out) forwards; }
@keyframes fade { from { opacity: 0; } } @keyframes fadeOut { to { opacity: 0; } }
.card { background: var(--raised); border-radius: var(--r3); box-shadow: var(--e2); animation: cardIn .6s var(--spring); }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.kicker { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.intro-x { position: absolute; top: 14px; right: 14px; } .intro-x[hidden] { display: none; }
.primary { height: 44px; border: 0; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 9px; transition: transform .2s var(--spring), box-shadow .2s; }
.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -8px color-mix(in oklab, var(--accent) 70%, transparent); }
.ghost { height: 38px; border: 0; border-radius: 10px; background: none; color: var(--mut); font-weight: 500; }
.ghost:hover { color: var(--ink); background: var(--chip); }
.keys { margin-top: 14px; font-size: 11.5px; color: var(--faint); }
kbd { font: 500 10.5px/1 var(--sans); padding: 3px 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--mut); margin: 0 1px; }

.wrap-card { width: min(640px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.wc-head { padding: 22px 24px 16px; display: flex; gap: 16px; align-items: flex-start; box-shadow: 0 1px 0 var(--line); }
.wc-head h2 { font: italic 400 32px/1.05 var(--serif); margin: 4px 0 4px; letter-spacing: -.01em; }
.wc-head p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.wc-head .icon { margin-left: auto; margin-top: -4px; margin-right: -8px; }
.ring { width: 54px; height: 54px; flex: none; position: relative; display: grid; place-items: center; font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.ring svg { position: absolute; inset: 0; rotate: -90deg; }
.ring circle { fill: none; stroke-width: 4; }
.ring .bg { stroke: var(--chip-2); } .ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .6s var(--out); }
.wc-body { overflow: auto; padding: 8px 12px 12px; }
.grp { padding: 10px 0 4px; }
.grp-head { display: flex; align-items: center; gap: 9px; padding: 6px 12px; font-size: 12.5px; }
.grp-head b { font-weight: 600; } .grp-head span { color: var(--mut); }
.row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; transition: background .15s; }
.row:hover { background: var(--chip); }
.row input { appearance: none; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line-2); margin: 0; flex: none; cursor: pointer; display: grid; place-items: center; transition: background .15s, box-shadow .15s; }
.row input:checked { background: var(--c); box-shadow: none; }
.row input:checked::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -1px; }
.row .n { width: 22px; height: 22px; border-radius: 7px; background: color-mix(in oklab, var(--c) 16%, transparent); color: var(--c); font: 600 11px/22px var(--sans); text-align: center; flex: none; font-variant-numeric: tabular-nums; }
.row .t { flex: 1; min-width: 0; font-weight: 500; }
.row.done .t { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--line-2); }
.row .go { border: 0; background: var(--chip-2); color: var(--ink-2); font-size: 12px; font-weight: 500; height: 26px; padding: 0 10px; border-radius: 7px; transition: background .15s, color .15s; flex: none; }
.row .go:hover { background: var(--ink); color: var(--solid, #fff); }
.row .go.mock { display: inline-flex; align-items: center; gap: 4px; color: var(--c, var(--ink-2)); background: color-mix(in oklab, var(--c, #888) 14%, transparent); }
.row .go.mock:hover { background: var(--c, var(--ink)); color: #fff; }
.row .fcs { display: inline-flex; flex: none; } .row .fcs .fc + .fc { margin-left: -6px; box-shadow: 0 0 0 2px var(--raised); border-radius: 50%; }
.wc-foot { display: flex; gap: 8px; padding: 14px 20px 18px; box-shadow: 0 -1px 0 var(--line); flex-wrap: wrap; }
.wc-foot > :first-child { margin-right: auto; }
.wc-foot .primary { height: 38px; padding: 0 16px; font-size: 13px; }
.wc-foot .ghost { height: 38px; padding: 0 12px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.v-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); padding: 14px 12px 6px; }
.v-item { padding: 12px; border-radius: 12px; transition: background .15s; }
.v-item.locatable { cursor: pointer; } .v-item.locatable:hover { background: var(--chip); }
.v-first { background: color-mix(in oklab, var(--accent) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent); }
.v-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; }
.v-title .backers { margin-left: auto; display: flex; }
.v-title .backers img { width: 22px; height: 22px; box-shadow: 0 0 0 2px var(--raised); }
.v-title .backers img + img { margin-left: -6px; }
.v-item p { margin: 5px 0 0; color: var(--ink-2); line-height: 1.5; }
.v-item p.why { color: var(--mut); font-size: 12.5px; }
.v-split { padding: 10px 12px; }
.wc-head p.v-q { color: var(--mut); font-size: 12.5px; margin-bottom: 6px; }
.wc-head p.v-head { color: var(--ink); font-weight: 550; font-size: 14.5px; line-height: 1.45; }
.wc-head p.v-how { color: var(--mut); font-size: 12.5px; margin-top: 4px; font-style: italic; }
.v-split b { display: block; margin-bottom: 4px; }
.v-split p { margin: 3px 0; color: var(--ink-2); }

/* ---------- drawer ---------- */
.drawer { width: 0; overflow: hidden; background: var(--solid); box-shadow: -1px 0 0 var(--line); transition: width .45s var(--cam); }
.drawer.open { width: min(380px, 40vw); }
.drawer-in { width: min(380px, 40vw); height: 100%; display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 18px; box-shadow: 0 1px 0 var(--line); }
.log { flex: 1; overflow: auto; padding: 8px 10px 20px; }
.ent { display: flex; gap: 10px; padding: 10px 8px; border-radius: 10px; transition: background .15s; animation: fade .4s var(--out); }
.ent.click { cursor: pointer; } .ent.click:hover { background: var(--chip); }
.ent.now { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.ent .who { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; margin-bottom: 2px; flex-wrap: wrap; }
.ent .who b { font-weight: 600; }
.ent .who .n { color: var(--c); font-weight: 600; font-size: 11.5px; }
.ent .who .tt { color: var(--mut); }
.ent p { margin: 0; color: var(--ink-2); white-space: pre-wrap; }
.ent q { display: block; margin-top: 7px; font: italic 400 15px/1.35 var(--serif); color: var(--ink); quotes: "“" "”"; padding-left: 10px; box-shadow: inset 2px 0 0 var(--c); }
.ent.you { justify-content: flex-end; }
.ent.you .bubble { background: var(--chip-2); padding: 8px 12px; border-radius: 14px 14px 4px 14px; max-width: 85%; }
.ent.you .bubble img { display: block; max-width: 100%; border-radius: 8px; margin-top: 6px; }
.ent.sys p { color: var(--mut); font-size: 12.5px; }

/* ---------- dock: transport + ask ---------- */
.dock { background: var(--solid); box-shadow: 0 -1px 0 var(--line); padding: 8px 16px 14px; z-index: 6; display: flex; flex-direction: column; gap: 8px; }
.transport { display: flex; align-items: center; gap: 14px; }
.tp-btns { display: flex; align-items: center; gap: 2px; }
.play { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); display: grid; place-items: center; transition: transform .2s var(--spring); }
.play:hover { transform: scale(1.06); }
.play .i-pause { display: none; } .play.on .i-pause { display: block; } .play.on .i-play { display: none; }
.tl { flex: 1; min-width: 0; position: relative; }
.now { display: flex; gap: 10px; align-items: baseline; font-size: 12px; height: 18px; white-space: nowrap; overflow: hidden; }
.now-ch { font-weight: 600; color: var(--ink); } .now-t { color: var(--mut); overflow: hidden; text-overflow: ellipsis; }
.chapters { display: flex; align-items: center; gap: 3px; height: 22px; }
.seg { position: relative; height: 22px; min-width: 6px; flex-basis: 0; border: 0; padding: 0; background: none; display: flex; align-items: center; }
.seg::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; translate: 0 -50%; border-radius: 3px; background: color-mix(in oklab, var(--c) 22%, var(--chip)); transition: height .18s var(--out); }
.seg .fill { position: absolute; left: 0; top: 50%; height: 6px; translate: 0 -50%; border-radius: 3px; background: var(--c); width: 0; transition: height .18s var(--out); }
.seg:hover::before, .seg:hover .fill, .seg.cur::before, .seg.cur .fill { height: 10px; }
.seg.cur .fill { box-shadow: 0 0 12px color-mix(in oklab, var(--c) 70%, transparent); }
.seg.k-opener::before, .seg.k-closing::before { background: color-mix(in oklab, var(--c) 10%, var(--chip)); }
.seg.k-opener .fill, .seg.k-closing .fill { opacity: .55; }
.seg.gap { margin-left: 10px; }
.seg.live::after { content: ""; position: absolute; left: 50%; top: -1px; width: 4px; height: 4px; border-radius: 50%; background: var(--c); translate: -50% 0; }
.tip { position: absolute; bottom: 48px; translate: -50% 0; background: var(--raised); box-shadow: var(--e2); border-radius: 10px; padding: 7px 10px 7px 7px; display: flex; gap: 8px; align-items: center; white-space: nowrap; font-size: 12px; pointer-events: none; z-index: 9; }
.tip[hidden] { display: none; }
.tip .n { color: var(--c); font-weight: 600; }
.tp-right { display: flex; gap: 6px; align-items: center; }
.pill { height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border-radius: 9px; border: 0; background: var(--chip); color: var(--ink-2); font-weight: 500; font-size: 12.5px; font-variant-numeric: tabular-nums; transition: background .15s; }
.pill:hover { background: var(--chip-2); color: var(--ink); }
.pill b { font-weight: 600; color: var(--mut); font-size: 11.5px; }
.pill.glow { box-shadow: 0 0 0 1.5px var(--accent); animation: glow 1.8s ease-in-out 3; }
@keyframes glow { 50% { box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 6px color-mix(in oklab, var(--accent) 22%, transparent); } }

.ask-wrap { width: min(900px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.suggest { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.suggest:empty { display: none; }
.suggest button { flex: none; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 4px; border-radius: 999px; border: 0; background: var(--chip); color: var(--ink-2); font-size: 12.5px; animation: chipIn .4s var(--out) both; transition: background .15s; }
.suggest button:hover { background: var(--chip-2); color: var(--ink); }
.suggest button img { width: 22px; height: 22px; }
.suggest button .duo { display: flex; } .suggest button .duo img + img { margin-left: -8px; box-shadow: 0 0 0 1.5px var(--solid); }
@keyframes chipIn { from { opacity: 0; translate: 0 6px; } }
.ask { display: flex; align-items: flex-end; gap: 6px; padding: 6px; border-radius: 16px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.ask:focus-within { box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent); }
.who-seg { display: flex; padding: 3px; border-radius: 11px; background: var(--chip); gap: 2px; flex: none; }
.who-seg button { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 4px; border: 0; border-radius: 8px; background: none; color: var(--mut); font-size: 12.5px; font-weight: 500; transition: background .15s, color .15s, box-shadow .15s; }
.who-seg button img { width: 22px; height: 22px; filter: grayscale(.6); transition: filter .15s; }
.who-seg button .duo { display: flex; } .who-seg button .duo img + img { margin-left: -9px; }
.who-seg button[aria-checked="true"] { background: var(--raised); color: var(--ink); box-shadow: var(--e1); }
.who-seg button[aria-checked="true"] img { filter: none; }
.field { flex: 1; position: relative; min-width: 0; }
.field textarea { width: 100%; resize: none; border: 0; background: none; outline: none; color: var(--ink); font: 400 14px/20px var(--sans); padding: 8px 6px; max-height: 120px; display: block; }
.field textarea::placeholder { color: var(--faint); }
.attach { cursor: pointer; }
.send { width: 36px; height: 36px; border: 0; border-radius: 11px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; transition: opacity .15s, transform .2s var(--spring); }
.send:disabled { opacity: .35; cursor: default; }
.send:not(:disabled):hover { transform: scale(1.05); }
.mention-pop { position: absolute; bottom: calc(100% + 12px); left: 0; min-width: 260px; background: var(--raised); border-radius: 12px; box-shadow: var(--e2); padding: 5px; display: none; z-index: 10; }
.mention-pop.on { display: block; animation: chipIn .2s var(--out); }
.mention-pop button { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 7px 8px; border-radius: 8px; }
.mention-pop button:hover, .mention-pop button:first-child { background: var(--chip); }
.mention-pop img { width: 26px; height: 26px; }
.mention-pop small { display: block; color: var(--mut); font-size: 11.5px; }

/* ---------- misc ---------- */
.hint { position: absolute; top: 14px; left: 50%; translate: -50% 0; font-size: 11.5px; color: var(--mut); background: var(--panel); backdrop-filter: blur(10px); padding: 4px 11px; border-radius: 999px; box-shadow: var(--e1); opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 4; }
.hint.on { opacity: 1; }
.drop { position: absolute; inset: 12px; border-radius: var(--r3); border: 2px dashed var(--accent); display: none; place-items: center; z-index: 9; background: color-mix(in oklab, var(--stage) 80%, transparent); font: italic 400 26px/1 var(--serif); }
.drop.on { display: grid; }
.lightbox { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-columns: 1.6fr 1fr; background: color-mix(in srgb, #0A0A0A 86%, transparent); backdrop-filter: blur(8px); }
.lightbox[hidden] { display: none; }
.lb-media { overflow: auto; padding: 28px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.lb-media img, .lb-media video { max-width: 100%; border-radius: var(--r2); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lb-text { background: var(--solid); padding: 28px 26px; overflow: auto; }
.lb-text .id { color: var(--accent); font-weight: 600; font-size: 12px; }
.lb-text h2 { font: italic 400 29px/1.1 var(--serif); letter-spacing: -.01em; margin: 6px 0 4px; }
.lb-text h5 { margin: 18px 0 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.lb-text p { margin: 0; color: var(--ink-2); }
.lb-text a { color: var(--accent); font-weight: 500; text-decoration: none; }
.lb-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; }

/* ---------- UX layer: severity, effort, UX card ---------- */
:root { --sev-blocker: #FF3B30; --sev-major: #FF9F0A; --sev-minor: #8E8B85; }
.sev { display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 7px; border-radius: 6px; font: 600 10.5px/1 var(--sans); letter-spacing: .02em; white-space: nowrap; flex: none;
  color: var(--sc); background: color-mix(in oklab, var(--sc) 15%, transparent); }
.sev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sc); }
.sev.blocker { --sc: var(--sev-blocker); } .sev.major { --sc: var(--sev-major); } .sev.minor { --sc: var(--sev-minor); }
.eff { font: 600 10.5px/19px var(--sans); color: var(--mut); padding: 0 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; flex: none; }
.cap-head .stance { color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.cap-head .stance.pushback, .cap-head .stance.hold { color: var(--sev-major); }
.cap-head .off { font-size: 11px; color: var(--mut); box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.cap-head .num.re { background: none; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.ux { background: var(--panel); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-radius: var(--r2); box-shadow: var(--e2); padding: 12px 14px 13px; animation: pullIn .6s var(--spring) both; }
.pull.right .ux { animation-name: pullInR; }
.ux-top { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ux-top .k { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); margin-right: auto; }
.ux b { display: block; font-weight: 600; font-size: 13px; line-height: 1.35; }
.ux p { margin: 4px 0 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.ux small { display: block; margin-top: 8px; font-size: 10.5px; color: var(--faint); }
.showme { margin-top: 10px; width: 100%; height: 34px; border: 0; border-radius: 9px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 12.5px; display: flex; align-items: center; justify-content: center; gap: 7px; transition: transform .2s var(--spring), box-shadow .2s; }
.showme:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--accent) 80%, transparent); }
.showme:disabled { opacity: .5; cursor: progress; transform: none; }
.pin[data-sev="minor"] { width: 23px; height: 23px; line-height: 23px; font-size: 10.5px; }
.pin[data-sev="blocker"] { width: 32px; height: 32px; line-height: 32px; font-size: 13px; animation: blk 2s ease-in-out infinite; }
.pin[data-sev="blocker"].landing { animation: pinDrop .55s var(--spring) both, blk 2s ease-in-out .6s infinite; }
@keyframes blk { 0%, 100% { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px var(--sev-blocker), 0 6px 16px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 0 2.5px #fff, 0 0 0 10px color-mix(in oklab, var(--sev-blocker) 30%, transparent), 0 6px 16px rgba(0,0,0,.35); } }
.sevgrp { padding: 10px 0 4px; }
.sevgrp-head { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px; color: var(--mut); }
.sevgrp-head > span:last-child { margin-left: auto; font-size: 11.5px; color: var(--faint); }
.row .fc { width: 20px; height: 20px; }
.v-title .sev, .v-title .eff { font-weight: 600; }

/* ---------- pointer beam: from the speaker's hand to the spot ---------- */
.beam { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .35s; }
.beam.on { opacity: 1; }
#beamPath { fill: none; stroke: var(--c, var(--accent)); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: .5 8; animation: flow 1.1s linear infinite;
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--c, var(--accent)) 80%, transparent)); }
#beamReveal { fill: none; stroke: #fff; stroke-width: 14; stroke-dasharray: 1; stroke-dashoffset: 0; }
.beam.draw #beamReveal { animation: reveal .7s var(--out) both; }
@keyframes reveal { from { stroke-dashoffset: 1; } }
@keyframes flow { to { stroke-dashoffset: -17; } }
#beamDot { fill: var(--c, var(--accent)); }
#beamRing { fill: none; stroke: var(--c, var(--accent)); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ring 1.6s var(--out) infinite; }
.beam.draw #beamDot, .beam.draw #beamRing { animation-delay: .6s; }
@keyframes ring { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }

/* ---------- heatmap ---------- */
.heat { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .5s; mix-blend-mode: multiply; }
:root[data-theme="dark"] .heat { mix-blend-mode: multiply; }
.stage.heat-on .heat { opacity: 1; }
.stage.heat-on .pin { opacity: 1 !important; }
#heatBtn[aria-pressed="true"] { background: color-mix(in oklab, var(--sev-blocker) 16%, var(--chip)); color: var(--ink); }

/* ---------- "Show me": the designer's fix over the original, with a wipe ---------- */
.fixes { position: absolute; inset: 0; pointer-events: none; }
.fixes:not(:empty) ~ .pins { opacity: 0; pointer-events: none; transition: opacity .3s; }
.fix { position: absolute; pointer-events: auto; --p: 50%; border-radius: 6px; cursor: ew-resize; touch-action: none; }
.fix iframe { position: absolute; inset: 0; border: 0; display: block; pointer-events: none; background: transparent;
  clip-path: inset(0 calc(100% - var(--p)) 0 0); border-radius: 6px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--c) 40%, transparent); }
.fix .handle { position: absolute; top: -6px; bottom: -6px; left: var(--p); width: 2px; margin-left: -1px; background: var(--c); box-shadow: 0 0 10px color-mix(in oklab, var(--c) 80%, transparent); }
.fix .knob { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center;
  transform: translate(-50%, -50%) scale(calc(1 / var(--z))); box-shadow: 0 0 0 2.5px #fff, 0 6px 16px rgba(0,0,0,.4); }
.fix .lbl { position: absolute; bottom: calc(100% + 6px); font: 600 11px/1 var(--sans); padding: 5px 8px; border-radius: 7px; white-space: nowrap; transform-origin: 0 100%; transform: scale(calc(1 / var(--z))); }
.fix .lbl.theirs { left: 0; background: var(--c); color: #fff; }
.fix .lbl.yours { right: 0; transform-origin: 100% 100%; background: var(--raised); color: var(--ink); box-shadow: var(--e1); }
.fix .x { position: absolute; top: 0; right: 0; translate: 50% -50%; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--raised); color: var(--ink); display: grid; place-items: center; box-shadow: var(--e2);
  transform: scale(calc(1 / var(--z))); cursor: pointer; }
.fix.loading { cursor: progress; overflow: hidden; }
.fix.loading::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(100deg, transparent 20%, color-mix(in oklab, var(--c) 35%, transparent) 50%, transparent 80%); background-size: 250% 100%; animation: scan 1.3s linear infinite; }
@keyframes scan { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ---------- re-crit: status of a note in the next version ---------- */
:root { --ok: #1F9D57; }
.stc { display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 7px; border-radius: 6px; font: 600 10.5px/1 var(--sans); white-space: nowrap; flex: none;
  color: var(--sc); background: color-mix(in oklab, var(--sc) 15%, transparent); }
.stc.fixed { --sc: var(--ok); } .stc.partly { --sc: var(--sev-major); } .stc.open { --sc: var(--sev-blocker); } .stc.unclear { --sc: var(--sev-minor); } .stc.fresh { --sc: #2F7CF6; }
.stc.fixed::before { content: ""; width: 7px; height: 4px; border: solid currentColor; border-width: 0 0 1.6px 1.6px; rotate: -45deg; translate: 0 -1px; }
.pin[data-status="fixed"] { background: var(--ok); }
.pin[data-status="fixed"]::before { content: ""; position: absolute; right: -5px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5' fill='none' stroke='%231F9D57' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 10px; background-position: center; background-repeat: no-repeat; }
.pin[data-status="partly"] { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--sev-major), 0 6px 16px rgba(0,0,0,.35); }
.pin[data-status="open"] { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--sev-blocker), 0 6px 16px rgba(0,0,0,.35); }
.pin[data-fresh]::before { content: "NEW"; position: absolute; left: 50%; bottom: calc(100% + 3px); translate: -50% 0; font: 700 8.5px/1 var(--sans); letter-spacing: .04em; color: #fff; background: #2F7CF6; padding: 3px 4px; border-radius: 4px; }
.bf { background: var(--panel); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-radius: var(--r2); box-shadow: var(--e2); padding: 12px 14px; animation: pullIn .6s var(--spring) both; }
.pull.right .bf { animation-name: pullInR; }
.bf img { display: block; width: 100%; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); background: #fff; min-height: 40px; }
.row.rc { cursor: pointer; align-items: flex-start; }
.row.rc .t b { display: block; font-weight: 500; } .row.rc .t small { display: block; color: var(--mut); font-size: 12px; line-height: 1.4; margin-top: 2px; }
.row.rc.done .t b { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--line-2); }
.row .stc { margin-left: 2px; }
.seg.clash::after { content: ""; position: absolute; left: 50%; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--sev-major); translate: -50% 0; box-shadow: 0 0 0 2px var(--solid); }
.seg.st-fixed::after, .seg.st-partly::after, .seg.st-open::after { content: ""; position: absolute; left: 50%; top: -1px; width: 4px; height: 4px; border-radius: 50%; translate: -50% 0; }
.seg.st-fixed::after { background: var(--ok); } .seg.st-partly::after { background: var(--sev-major); } .seg.st-open::after { background: var(--sev-blocker); }
.tip .stc { margin-left: 2px; } .tip-clash { color: var(--sev-major); font-weight: 600; }

/* ---------- listener reactions ---------- */
.fig .react { position: absolute; top: 2%; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; z-index: 2;
  padding: 6px 11px 6px 8px; border-radius: 999px; background: var(--raised); color: var(--ink); box-shadow: var(--e2); font: 600 12px/1 var(--sans);
  animation: reactIn .5s var(--spring) both; }
.fig .react svg { color: var(--c); }
.fig .react.pushback, .fig .react.hold { box-shadow: var(--e2), inset 0 0 0 1.5px var(--sev-major); } .fig .react.pushback svg, .fig .react.hold svg { color: var(--sev-major); }
.fig .react::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; background: var(--raised); translate: -50% -50%; rotate: 45deg; border-radius: 2px; z-index: -1; }
.fig .react.out { animation: reactOut .28s var(--out) forwards; }
@keyframes reactIn { from { opacity: 0; transform: translateY(8px) scale(.85); } }
@keyframes reactOut { to { opacity: 0; transform: translateY(-6px) scale(.95); } }
.fig.listening:has(.react) { filter: brightness(.85) saturate(.9); }
:root[data-theme="light"] .fig.listening:has(.react) { filter: none; }
.fig.nod .rigvideo { animation: nod .95s ease-in-out; transform-origin: 50% 100%; }
.fig.shake .rigvideo { animation: shake .8s ease-in-out; transform-origin: 50% 100%; }
@keyframes nod { 20% { transform: translateY(4px) rotate(.5deg); } 40% { transform: none; } 60% { transform: translateY(3px) rotate(.3deg); } 80%, 100% { transform: none; } }
@keyframes shake { 20% { transform: rotate(-1deg); } 40% { transform: rotate(1deg); } 60% { transform: rotate(-.7deg); } 80%, 100% { transform: none; } }

/* ---------- narrow ---------- */
@media (max-width: 900px) {
  :root { --side: 16px; --figW: clamp(96px, 24vw, 150px); }
  .tabs, .engine, .switch span, .sim { display: none; }
  .switch { padding: 0 9px; margin-right: 0; }
  .bar { gap: 8px; padding: 0 8px 0 14px; }
  .wc-head { padding: 18px 16px 14px; gap: 12px; } .wc-head h2 { font-size: 27px; } .wc-foot { padding: 12px 14px 14px; }
  .fig .tag { font-size: 11px; padding: 4px 9px 4px 6px; bottom: 6px; } .fig .tag .st { display: none; }
  .caption { width: calc(100% - 2 * var(--figW) + 30px); bottom: 12px; }
  .cap-text { font-size: 19px; }
  .pull { top: 10px; width: min(300px, calc(100% - 32px)); }
  .pull.left, .pull.right { left: 50%; right: auto; translate: -50% 0; }
  .pr { display: none; }
  .who-seg button span.nm { display: none; } .who-seg button { padding: 0 4px; }
  .tp-right #speed { display: none; } .pill span { display: none; } .beam { display: none; }
  .drawer.open { width: 100vw; position: fixed; inset: 52px 0 0 auto; z-index: 12; } .drawer-in { width: 100vw; }
  /* reference sheet on phones (2026-11-10): one scrolling page, the image first and full width, the text below it.
     The first screen shows the image with the title peeking underneath, so it's clear there's more to scroll */
  .lightbox { display: block; overflow-y: auto; overscroll-behavior: contain; backdrop-filter: none; background: color-mix(in srgb, #0A0A0A 94%, transparent); }   /* no blur: it would pin the close button to the scrolling sheet */
  .lb-media { overflow: visible; min-height: 64svh; padding: 64px 12px 20px; justify-content: center; }
  .lb-media img, .lb-media video { width: auto; max-width: 100%; max-height: 82svh; object-fit: contain; }   /* wide shots fill the width, tall ones stop at the screen */
  .lb-text { overflow: visible; border-radius: 18px 18px 0 0; padding: 24px 20px calc(32px + env(safe-area-inset-bottom)); }
  .lb-close { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px; z-index: 1; background: rgba(0,0,0,.55); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* work thumbnails: videos get their first frame plus a play badge */
.vthumb { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 54px; border-radius: inherit; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in oklab, var(--c, #888) 22%, var(--raised)), var(--raised)); }
.vthumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vbadge { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: transform .2s var(--spring); }
.vbadge svg { translate: 1px 0; } .vthumb:not(.is-vid) .vbadge svg { translate: 0; }
button:hover > .vthumb .vbadge { transform: scale(1.12); }

/* voice toggle + picker */
.voice-wrap { position: relative; display: flex; gap: 2px; margin-inline: 2px; }
.voice-wrap .voice { border-top-right-radius: 4px; border-bottom-right-radius: 4px; padding-inline: 10px; }
.voice-wrap .voice-more { border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding-inline: 7px; }
.voice .v-off { display: none; } .voice.muted .v-on { display: none; } .voice.muted .v-off { display: block; } .voice.muted { color: var(--mut); }
.voice-menu { position: absolute; bottom: calc(100% + 10px); right: 0; width: 330px; z-index: 40; padding: 14px; border-radius: var(--r2, 14px);
  background: var(--raised); box-shadow: var(--e2); animation: reactIn .3s var(--spring) both; }
.voice-menu[hidden] { display: none; }
.vm-head { font: 600 13px/1.2 var(--sans); color: var(--ink); }
.vm-note { font-size: 11.5px; color: var(--mut); margin: 4px 0 10px; line-height: 1.4; }
.vm-row { display: grid; grid-template-columns: 22px 78px 1fr auto; align-items: center; gap: 8px; margin-top: 8px; font: 500 12.5px/1 var(--sans); color: var(--ink); }
.vm-row select { min-width: 0; height: 30px; border-radius: 8px; border: 1px solid var(--line-2, var(--line)); background: var(--solid, var(--raised)); color: var(--ink); font: 12px var(--sans); padding: 0 6px; }
.vm-row .ghost { height: 30px; padding: 0 10px; font-size: 12px; }


/* phone: fix-list rows keep the title readable */
@media (max-width: 560px) {
  .row .eff { display: none; }
  .row .go { padding: 0 8px; }
  .row .go.mock span { display: none; }
  .row .go:not(.mock) { font-size: 0; width: 28px; }
  .row .go:not(.mock)::before { content: "→"; font-size: 13px; }
  .row .fcs .fc + .fc { display: none; }
  #voiceMore { display: none; }
  .voice-wrap .voice { border-radius: 999px; }
}

/* ---------- welcome card (v2): a little stage on the left, one clear action on the right ---------- */
.intro-card { width: min(880px, 100%); display: grid; grid-template-columns: 1fr 1.02fr; padding: 0; overflow: hidden; text-align: left; position: relative; max-height: calc(100% - 24px); border-radius: 24px; }
.intro-x { position: absolute; top: 14px; right: 14px; z-index: 3; } .intro-x[hidden] { display: none; }
.intro-stage { position: relative; min-height: 460px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 80% at 50% 0%, #F7F1EA 0%, #EDE4D9 55%, #E2D7C9 100%); }
:root[data-theme="dark"] .intro-stage { background: radial-gradient(120% 80% at 50% 0%, #26232A 0%, #17161A 60%, #0E0E10 100%); }
.is-spot { position: absolute; inset: auto 8% 0; height: 42%; background: radial-gradient(50% 60% at 50% 100%, rgba(0,0,0,.14), transparent 70%); z-index: -1; }
:root[data-theme="dark"] .is-spot { background: radial-gradient(50% 60% at 50% 100%, rgba(0,0,0,.6), transparent 70%); }
.is-figs { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 0; padding: 0 0 62px; }
.is-fig { position: relative; width: 52%; max-width: 240px; margin: 0 -2%; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(14px); animation: isIn .9s var(--out) forwards; }
.is-fig.r { animation-delay: .18s; }
.is-fig .rigvideo { width: 100% !important; height: auto !important; aspect-ratio: 414 / 554; filter: drop-shadow(0 16px 22px rgba(40,30,20,.22)); }
.is-tag { position: absolute; bottom: -22px; z-index: 1; display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: center; justify-items: start; padding: 7px 12px 7px 10px; border-radius: 12px; background: var(--raised); box-shadow: var(--e1), 0 6px 18px -8px rgba(0,0,0,.25); white-space: nowrap; }
.is-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); grid-row: span 2; align-self: center; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.is-tag b { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.is-tag span { grid-column: 2; font-size: 10.5px; color: var(--mut); line-height: 1.2; }
.is-bubble { position: absolute; left: 50%; top: 39%; transform: translateX(-50%); display: flex; gap: 4px; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: var(--raised); box-shadow: var(--e1), 0 8px 20px -10px rgba(0,0,0,.3); opacity: 0; animation: isFade .6s var(--out) .9s forwards; }
.is-bubble i { width: 6px; height: 6px; border-radius: 50%; background: var(--mut); animation: isDot 1.2s ease-in-out infinite; }
.is-bubble i:nth-child(2) { animation-delay: .15s; } .is-bubble i:nth-child(3) { animation-delay: .3s; }
.is-note { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-size: 10.5px; letter-spacing: .02em; color: var(--mut); opacity: .85; }
@keyframes isIn { to { opacity: 1; transform: none; } }
@keyframes isFade { to { opacity: 1; } } @keyframes isDot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.intro-body { padding: 34px 38px 24px; display: flex; flex-direction: column; min-width: 0; }
.intro-brand { display: flex; align-items: center; gap: 10px; }
.intro-brand .brand .wm { height: 15px; } .intro-brand .brand em { font-size: 18px; }
.intro-pill { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 4px 8px; border-radius: 999px; }
.intro-card h1 { font: italic 400 50px/.98 var(--serif); letter-spacing: -.02em; margin: 30px 0 14px; color: var(--ink); }
.intro-line { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 36ch; text-wrap: pretty; }
.intro-steps { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 0; counter-reset: s; }
.intro-steps li { counter-increment: s; display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--mut); }
.intro-steps li:last-child { border-bottom: 1px solid var(--line); }
.intro-steps li::before { content: "0" counter(s); font: 500 11px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--faint); width: 18px; flex: none; }
.intro-steps b { color: var(--ink); font-weight: 600; }
.intro-go { width: 100%; height: 50px; border-radius: 14px; font-size: 14.5px; margin-top: auto; padding: 0 16px 0 20px; justify-content: flex-start; }
.intro-go:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(0,0,0,.45); }
.intro-time { margin-left: auto; font-size: 12px; font-weight: 500; opacity: .62; }
.intro-alt { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.intro-alt .link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 4px; font: 500 13px var(--sans); color: var(--ink-2); cursor: pointer; border-radius: 6px; }
.intro-alt .link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.intro-alt [hidden] { display: none !important; }
.intro-alt .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.intro-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--mut); }
.intro-foot .snd { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border: 0; border-radius: 999px; background: var(--chip); color: var(--ink-2); font: 500 11.5px var(--sans); cursor: pointer; }
.intro-foot .snd:hover { background: var(--chip-2); color: var(--ink); }
.intro-foot .snd .s-on, .intro-foot .snd.on .s-off { display: none; } .intro-foot .snd.on .s-on { display: block; }
.intro-foot .snd.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.intro-foot .keys { margin-left: auto; margin-top: 0; font-size: 11px; color: var(--faint); }
.intro-foot #introVoice:empty { display: none; }
@media (max-width: 760px) {
  .intro-card { grid-template-columns: 1fr; width: min(460px, 100%); }
  .intro-card { overflow: auto; } .intro-stage { min-height: 236px; flex: none; } .is-figs { padding-bottom: 58px; } .is-fig { max-width: 124px; } .is-tag { bottom: -18px; padding: 5px 10px 5px 8px; } .is-bubble { top: 7%; } .is-note { bottom: 7px; font-size: 10px; } .intro-alt { gap: 2px 14px; } .intro-alt .dot { display: none; } .intro-brand, .intro-steps { display: none; } .intro-go { margin-top: 18px; } .is-tag span { display: none; } .is-tag { bottom: -34px; }
  .intro-body { padding: 20px 22px 16px; } .intro-card h1 { font-size: 34px; margin: 0 0 8px; } .intro-line { font-size: 14px; } .intro-steps { margin: 16px 0 18px; }
  .intro-foot .keys { display: none; }
}
@media (max-height: 640px) and (min-width: 761px) { .intro-stage { min-height: 400px; } .intro-card h1 { font-size: 42px; margin-top: 22px; } .intro-steps { margin: 16px 0 18px; } }
@media (prefers-reduced-motion: reduce) { .is-fig, .is-bubble { animation: none; opacity: 1; transform: none; } .is-bubble { transform: translateX(-50%); } .is-bubble i { animation: none; } }

@media (max-width: 760px) and (max-height: 780px) {
  .intro-stage { min-height: 196px; } .is-fig { max-width: 104px; } .is-figs { padding-bottom: 54px; } .is-bubble { top: 6%; padding: 7px 10px; }
  .intro-body { padding: 16px 20px 12px; } .intro-card h1 { font-size: 30px; } .intro-line { font-size: 13.5px; } .intro-go { height: 46px; margin-top: 14px; }
  .intro-alt { margin-top: 6px; } .intro-foot { margin-top: 8px; padding-top: 10px; }
}

/* bubble attached to Leye's figure: just off his head, toward aydahnizzy */
.is-fig .is-bubble { top: 0; left: 64%; right: auto; transform: none; border-radius: 16px 16px 16px 4px; }
@media (max-width: 760px) { .is-fig .is-bubble { top: 3%; left: 72%; padding: 6px 9px; } .is-fig .is-bubble i { width: 5px; height: 5px; } }
@media (min-width: 761px) and (max-width: 940px) { .intro-foot .keys { display: none; } .intro-card { grid-template-columns: .9fr 1fr; } .intro-body { padding: 30px 30px 20px; } .intro-card h1 { font-size: 42px; } }
/* phone on its side: no room for the stage picture, keep the words and the button */
@media (max-height: 500px) and (min-width: 561px) {
  .intro-card { grid-template-columns: 1fr; width: min(520px, 100%); overflow: auto; }
  .intro-stage, .intro-brand, .intro-steps, .intro-foot .keys { display: none; }
  .intro-body { padding: 16px 22px 12px; } .intro-card h1 { font-size: 28px; margin: 0 0 6px; } .intro-card h1 br { display: none; }
  .intro-line { font-size: 13px; max-width: none; } .intro-go { height: 42px; margin-top: 12px; } .intro-alt { margin-top: 4px; } .intro-foot { margin-top: 6px; padding-top: 8px; }
}

/* phones: cards fold to a headline so the design stays visible; caption and bar get more room */
@media (max-width: 560px) {
  .pull { top: 8px; width: calc(100% - 24px); gap: 6px; }
  .pull .fold { cursor: pointer; }
  .pull .ux.fold { padding: 10px 12px; } .pull .ux.fold b { font-size: 13px; margin: 4px 0 0; }
  .pull .ux.fold:not(.open) p, .pull .ux.fold:not(.open) small { display: none; }
  .pull .ux.fold .showme { height: 32px; margin-top: 8px; font-size: 12.5px; }
  .pull .ux.fold:not(.open) .showme { display: none; }
  .pull .pq.fold { padding: 9px 12px; } .pull .pq.fold q { font-size: 15px; line-height: 1.3; }
  .pull .pq.fold:not(.open) q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pull .pq.fold:not(.open) a { display: none; }
  .pull .fold:not(.open)::after { content: "Tap to open"; display: block; margin-top: 4px; font: 500 10.5px/1 var(--sans); color: var(--faint); }
  .pull[data-hold]::after { display: none; }
  .bf.fold:not(.open) img { max-height: 70px; object-fit: cover; }
}
@media (max-width: 440px) {
  :root { --figW: clamp(80px, 22vw, 120px); }
  .caption { width: calc(100% - 2 * var(--figW) + 44px); }
  .cap-text { font-size: 16.5px; line-height: 1.32; }
  #heatBtn { display: none; }
  .now { gap: 6px; } .now-t { display: none; }
}
@media (max-width: 380px) { .now-ch { font-size: 11px; letter-spacing: -.01em; } .tp-right { gap: 4px; } }

/* welcome stage: the design they're about to crit, floating behind them */
.is-screen { position: absolute; top: 7%; left: 50%; width: 82%; aspect-ratio: 1440 / 1024; translate: -50% 0; z-index: 0; border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(20,20,19,.07), 0 28px 56px -22px rgba(70,45,20,.38); transform: perspective(1100px) rotateX(7deg); transform-origin: 50% 100%;
  opacity: 0; animation: isScreenIn 1s var(--out) .15s forwards, isFloat 7s ease-in-out 1.2s infinite alternate; }
.wf { position: absolute; inset: 0; } .wf i { position: absolute; display: block; border-radius: 3px; }
.wf-side { left: 0; top: 0; bottom: 0; width: 18%; border-radius: 0 !important; background: rgba(20,20,19,.04); box-shadow: inset -1px 0 0 rgba(20,20,19,.05); }
.wf-title { left: 24%; top: 7%; width: 26%; height: 4.5%; background: rgba(20,20,19,.7); }
.wf-btn { left: 83%; top: 7%; width: 11%; height: 5%; background: #FFC93C; border-radius: 4px !important; }
.wf-search { left: 24%; top: 18.5%; width: 35%; height: 6%; background: rgba(20,20,19,.05); box-shadow: inset 0 0 0 1px rgba(20,20,19,.07); border-radius: 5px !important; }
.wf-row { left: 24%; width: 71%; height: 7%; background: rgba(20,20,19,.025); }
.wf-row s { position: absolute; top: 38%; height: 26%; border-radius: 3px; background: rgba(20,20,19,.13); }
.wf-row s:nth-child(1) { left: 3%; width: 20%; } .wf-row s:nth-child(2) { left: 30%; width: 26%; background: rgba(20,20,19,.07); }
.wf-row s.st { left: 70%; width: 10%; background: rgba(31,157,87,.35); }
:root[data-theme="dark"] .is-screen { background: #1E1D21; }
:root[data-theme="dark"] .wf-side, :root[data-theme="dark"] .wf-row, :root[data-theme="dark"] .wf-search { background: rgba(255,255,255,.04); box-shadow: none; }
:root[data-theme="dark"] .wf-title { background: rgba(255,255,255,.7); } :root[data-theme="dark"] .wf-row s { background: rgba(255,255,255,.14); } :root[data-theme="dark"] .wf-row s:nth-child(2) { background: rgba(255,255,255,.07); }
.is-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(237,228,217,.4)); pointer-events: none; }
:root[data-theme="dark"] .is-screen { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,.8); }
:root[data-theme="dark"] .is-screen::after { background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(15,15,17,.6)); }
.is-marks { position: absolute; inset: 0; }
.is-ring { position: absolute; border-radius: 4px; box-shadow: 0 0 0 2px var(--c), 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent); opacity: 0; animation: isRing 9s var(--out) infinite; }
.is-pin { position: absolute; display: grid; place-items: center; width: 17px; height: 17px; translate: -50% -50%; border-radius: 50% 50% 50% 3px; background: var(--c); color: #fff;
  font: 700 9.5px/1 var(--sans); box-shadow: 0 0 0 2px #fff, 0 4px 10px -2px rgba(0,0,0,.35); opacity: 0; animation: isPin 9s var(--spring) infinite; }
.is-figs, .is-bubble { z-index: 1; }
@keyframes isScreenIn { from { opacity: 0; translate: -50% 12px; } to { opacity: 1; translate: -50% 0; } }
@keyframes isFloat { to { transform: perspective(1100px) rotateX(4deg) translateY(-6px); } }
@keyframes isPin { 0% { opacity: 0; scale: .2; } 5% { opacity: 1; scale: 1.18; } 8% { scale: 1; } 70% { opacity: 1; scale: 1; } 78%, 100% { opacity: 0; scale: .7; } }
@keyframes isRing { 0%, 2% { opacity: 0; } 7% { opacity: 1; } 70% { opacity: 1; } 78%, 100% { opacity: 0; } }
@media (max-width: 760px) { .is-screen { top: 6%; width: 64%; } .is-pin { width: 13px; height: 13px; font-size: 7.5px; box-shadow: 0 0 0 1.5px #fff; } }
@media (prefers-reduced-motion: reduce) { .is-screen { opacity: 1; animation: none; } .is-pin, .is-ring { animation: none; opacity: 1; } }

/* ---------- phones, round 2 (2026-11-08): nothing sits on top of anything ----------
   Layout on a phone, top to bottom: a band with the note's cards (one row, swipe for more, tap to open), the design,
   then a dock with the two designers in the corners and the caption between them, never wider than the gap.
   The camera in stage.js (topReserve / capReserve, PHONE_MQ) keeps the design between the band and the dock. */
@media (max-width: 900px), (max-height: 500px) {
  :root { --figW: clamp(64px, 21vw, 92px); --side: 10px; }
  .stage::after { height: 170px; }
  /* the design only shows in its own window between the cards and the dock, even when the camera zooms in */
  .viewport { clip-path: inset(var(--topR, 0px) 0 var(--capR, 0px) 0); }
  .row input[type="checkbox"] { width: 24px; height: 24px; }

  /* the designers: tucked into the corners; name tags no wider than the figure */
  .fig.left { left: 4px; } .fig.right { right: 4px; }
  .fig .tag { bottom: 4px; gap: 4px; padding: 3px 7px 3px 3px; font-size: 10.5px; max-width: calc(var(--figW) + 6px); }
  .fig .tag img { width: 18px; height: 18px; flex: none; }
  .fig .tag b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 10px; letter-spacing: -.01em; }
  /* reactions sit above the head and wrap inside the figure's width, so they never reach the caption or the screen edge */
  .fig .react { top: auto; bottom: calc(100% + 6px); white-space: normal; width: max-content; max-width: calc(var(--figW) + 8px);
    text-align: center; justify-content: center; font-size: 10.5px; line-height: 1.2; padding: 5px 8px; gap: 4px; }
  .fig .react svg { flex: none; }

  /* the caption: only the space between the two figures */
  .caption { width: calc(100% - 2 * var(--figW) - 16px); bottom: 8px; gap: 6px; }
  .cap-head { font-size: 11.5px; gap: 6px; min-height: 26px; padding: 3px 9px 3px 3px; overflow: hidden; }
  .cap-head > * { flex: none; }
  .cap-head > b, .cap-head .mode, .cap-head .off { display: none; }
  .cap-head .ttl, .cap-head .stance { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cap-text { font-size: 16px; line-height: 1.3; max-height: calc(1.3em * 5); }
  .cap-text.inspect { font-size: 15px; max-height: calc(1.3em * 5); }
  .cap-text.sys { font-size: 13px; line-height: 1.45; }

  /* the note's cards: one row at the top; folded to a single line; one opens at a time */
  .pull { top: 6px; left: 10px; right: 10px; width: auto; translate: none; flex-direction: row; align-items: flex-start; gap: 6px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pull::-webkit-scrollbar { display: none; }
  .pull.left, .pull.right { left: 10px; right: 10px; translate: none; }
  .pull > * { flex: 0 0 auto; width: min(80%, 320px); scroll-snap-align: start; margin: 0; }
  .pull > :only-child { width: 100%; }
  .pull .fold:not(.open) { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 10px 7px 12px; }
  .pull .fold:not(.open)::after { content: "›"; display: block; order: 9; margin: 0 0 0 auto; flex: none; font: 400 18px/1 var(--sans); color: var(--faint); }
  .pull .ux.fold:not(.open) p, .pull .ux.fold:not(.open) small, .pull .ux.fold:not(.open) .showme, .pull .pq.fold:not(.open) a { display: none; }
  .pull .pq.fold:not(.open) q { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .pull .fold { cursor: pointer; }
  .pull .ux.fold:not(.open) .ux-top { margin: 0; order: 2; flex: none; }
  .pull .ux.fold:not(.open) .ux-top > :not(.sev) { display: none; }
  .pull .ux.fold:not(.open) b { margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
  .pull .pq.fold:not(.open) { padding-left: 16px; }
  .pull .pq.fold:not(.open)::before { top: 9px; bottom: 9px; }
  .pull .pq.fold:not(.open) q { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; -webkit-line-clamp: 1; }
  .pull .bf.fold:not(.open) .pr-name { display: none; }
  .pull .bf.fold:not(.open) .pr-head { margin: 0; white-space: nowrap; }
  .pull .bf.fold:not(.open) img { width: auto; max-width: 90px; max-height: 26px; min-height: 0; object-fit: cover; }
  .pull.has-open { flex-direction: column; overflow: visible; }
  .pull.has-open > .open { width: 100%; max-height: min(52vh, 360px); overflow: auto; }

  /* the dock: chapters shrink instead of running under the buttons on the right */
  .dock { padding: 6px 10px 10px; gap: 6px; }
  .transport { gap: 8px; }
  .tl { overflow: hidden; }
  .chapters { gap: 2px; overflow: hidden; }
  .seg { min-width: 0; }
  .pin[data-sev="minor"] { width: 25px; height: 25px; line-height: 25px; }
  .seg.gap { margin-left: 5px; }
  .tp-right { gap: 4px; flex: none; }
  .tp-right .pill { padding: 0 9px; }
  .voice-wrap { margin-inline: 0; }
  .voice-menu { position: fixed; left: 10px; right: 10px; bottom: 120px; width: auto; }
  /* composer: 16px text so iOS doesn't zoom in, compact "who answers" */
  .field textarea { font-size: 16px; padding: 7px 4px; }
  .who-seg { padding: 2px; }
  .who-seg button { height: 30px; padding: 0 3px; }
  /* the @ menu spans the whole composer, so it never runs off the screen */
  .ask { position: relative; } .ask .field { position: static; }
  .mention-pop { min-width: 0; left: 0; right: 0; width: auto; bottom: calc(100% + 8px); }
  .suggest button { font-size: 12px; }
}
@media (max-width: 380px) {
  .who-seg button img { width: 20px; height: 20px; }
  .ask { gap: 4px; padding: 5px; }
  .ask .icon { width: 30px; }
  .tp-btns .icon { width: 28px; }
  .play { width: 34px; height: 34px; }
}
/* phone on its side: very little height, so the dock goes on one row and the bar gets thinner */
@media (max-height: 500px) and (min-width: 561px) {
  :root { --figW: 74px; }
  .bar { height: 44px; }
  .dock { flex-direction: row; align-items: center; gap: 12px; padding: 6px 12px 8px; }
  .transport { flex: 1 1 52%; min-width: 0; }
  .ask-wrap { flex: 1 1 48%; min-width: 0; margin: 0; }
  .suggest { display: none; }
  .ask { padding: 4px; }
  .now { display: none; }
  .caption { width: calc(100% - 2 * var(--figW) - 28px); bottom: 6px; }
  .cap-text { font-size: 15px; max-height: calc(1.3em * 3); }
  .stage::after { height: 120px; }
  .voice-menu { bottom: 64px; left: auto; width: 330px; }
  .drawer.open { inset: 44px 0 0 auto; }
}
/* short portrait phones: the welcome card fits without scrolling */
@media (max-width: 760px) and (max-height: 700px) and (min-height: 501px) {
  .intro-stage { min-height: 150px; } .is-fig { max-width: 84px; } .is-figs { padding-bottom: 46px; }
  .intro-body { padding: 14px 18px 10px; } .intro-card h1 { font-size: 27px; } .intro-line { font-size: 13px; line-height: 1.45; }
  .intro-go { height: 44px; margin-top: 10px; } .intro-alt { margin-top: 4px; } .intro-foot { margin-top: 6px; padding-top: 8px; }
}
/* tablets (561 to 900px wide, standing up): the same layout with bigger figures and type */
@media (min-width: 561px) and (max-width: 900px) and (min-height: 501px) {
  :root { --figW: 124px; }
  .stage::after { height: 240px; }
  .fig .tag { font-size: 11.5px; padding: 4px 9px 4px 4px; } .fig .tag b { font-size: 11.5px; }
  .fig .react { font-size: 11.5px; max-width: calc(var(--figW) + 20px); }
  .caption { width: calc(100% - 2 * var(--figW) - 28px); bottom: 12px; }
  .cap-head { font-size: 12.5px; } .cap-head > b { display: inline; }
  .cap-text { font-size: 20px; max-height: calc(1.3em * 5); }
  .pull { top: 10px; left: 16px; right: 16px; } .pull.left, .pull.right { left: 16px; right: 16px; }
  .pull > * { width: min(48%, 360px); }
  .dock { padding: 8px 16px 12px; }
}

/* the welcome is a full-screen takeover: header and player bar wait behind it */
#intro { position: fixed; inset: 0; z-index: 60; padding: 32px; background: color-mix(in oklab, var(--stage) 72%, transparent); backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1); }
#intro .intro-card { max-height: calc(100dvh - 48px); }
@media (max-width: 760px) { #intro { padding: 12px; } #intro .intro-card { max-height: calc(100dvh - 24px); } }
/* the fix list on phones: a compact header and footer so the list itself always has room */
@media (max-width: 560px), (max-height: 500px) {
  .overlay { padding: 12px 10px; }
  .wc-head { padding: 14px 14px 12px; gap: 12px; }
  .wc-head .ring { width: 42px; height: 42px; font-size: 11px; }
  .wc-head h2 { font-size: 25px; }
  .wc-head p { font-size: 12.5px; line-height: 1.4; }
  .wc-body { flex: 1 1 auto; min-height: 120px; padding: 4px 6px 8px; }
  .row { gap: 9px; padding: 8px 8px; }
  .wc-head { flex: none; }
  .wc-foot { flex: none; padding: 10px 12px 12px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .wc-foot > * { flex: none; }
  .wc-foot .primary, .wc-foot .ghost { height: 36px; padding: 0 12px; font-size: 12.5px; }
}
@media (max-height: 620px) and (max-width: 560px) { .wc-head p:not(.v-head) { display: none; } }
@media (max-height: 500px) { .wc-head p:not(.v-head) { display: none; } .wc-head h2 { font-size: 22px; margin: 2px 0 0; } .wc-body { min-height: 70px; } .overlay { padding: 8px 10px; } }

/* the listener never stands frozen: a slow sway and breath on top of the loop's nods */
.fig:not(.speaking) .rigvideo { transform-origin: 50% 100%; animation: listenSway 7s ease-in-out infinite; }
.fig.right:not(.speaking) .rigvideo { animation-delay: -3.2s; animation-duration: 8s; }
@keyframes listenSway {
  0%, 100% { transform: rotate(-.7deg) translateY(0) scaleY(1); }
  30% { transform: rotate(.3deg) translateY(-2px) scaleY(1.006); }
  55% { transform: rotate(.9deg) translateY(0) scaleY(1); }
  80% { transform: rotate(-.2deg) translateY(-1.5px) scaleY(1.004); }
}
@media (prefers-reduced-motion: reduce) { .fig .rigvideo { animation: none !important; } }

/* Suggest a designer: a small form over everything (lifted to <body> like the welcome card). */
#sgOverlay { position: fixed; inset: 0; z-index: 70; padding: 20px; background: color-mix(in oklab, var(--stage) 70%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.sg-card { width: min(440px, 100%); position: relative; padding: 28px 28px 22px; max-height: calc(100dvh - 40px); overflow: auto; }
.sg-card h2 { font: 400 32px/1.05 var(--serif, "Instrument Serif", Georgia, serif); letter-spacing: -.01em; margin: 8px 0 8px; }
.sg-line { color: var(--ink-2); margin: 0 0 18px; }
.sg-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin: 0 0 6px; }
.sg-label span { font-weight: 400; color: var(--mut); margin-left: 4px; }
.sg-handle { display: flex; align-items: center; gap: 2px; height: 42px; padding: 0 12px; border-radius: 11px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--line-2); margin-bottom: 14px; transition: box-shadow .15s; }
.sg-handle span { color: var(--mut); font-weight: 500; }
.sg-handle input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); font: 500 14px var(--sans); }
.sg-card textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 76px; border: 0; border-radius: 11px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 400 14px/20px var(--sans); padding: 10px 12px; outline: none; transition: box-shadow .15s; }
.sg-handle:focus-within, .sg-card textarea:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.sg-handle input::placeholder, .sg-card textarea::placeholder { color: var(--faint); }
.sg-err { color: #E5484D; font-size: 12.5px; margin: 10px 0 0; } .sg-err[hidden] { display: none; }
.sg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.sg-foot .primary { height: 40px; padding: 0 18px; font-size: 13.5px; } .sg-foot .ghost { padding: 0 14px; }
.sg-foot .primary[disabled] { opacity: .55; pointer-events: none; }
.sg-done { text-align: center; padding: 10px 0 0; } .sg-done[hidden], .sg-ask[hidden] { display: none; }
.sg-done .sg-foot { justify-content: center; }
.sg-tick { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; margin: 4px auto 6px; color: #fff; background: var(--accent, #FF5A1F); animation: cardIn .5s var(--spring); }
@media (max-width: 480px) { .sg-card { padding: 24px 18px 18px; } .sg-card h2 { font-size: 28px; } }

/* Welcome card, option A (2026-11-10): one button, one link, one quiet line. Sound sits in the corner with the close button;
   the keyboard hints live in the tooltips (play button, transcript, sound). Earlier version in backups/2026-11-10-welcome-before-A/. */
.intro-corner { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 4px; }
.intro-corner .intro-x { position: static; }
.intro-corner .snd { background: color-mix(in oklab, var(--raised) 70%, transparent); }
.intro-corner .snd .s-on, .intro-corner .snd.on .s-off { display: none; } .intro-corner .snd.on .s-on { display: block; }
.intro-corner .snd.on { color: var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.intro-alt #introOwn { color: var(--ink-2); }
.intro-foot { justify-content: center; gap: 4px; font-size: 12.5px; color: var(--mut); }
.intro-foot .link { background: none; border: 0; padding: 4px 2px; font: 500 12.5px var(--sans); color: var(--ink-2); cursor: pointer; border-radius: 6px; }
.intro-foot .link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Phones: give the small welcome-card controls a finger-sized tap area (about 44px) without changing how they look. */
@media (pointer: coarse) {
  #introOwn, #introSuggest, .intro-corner .icon { position: relative; }
  #introOwn::after, #introSuggest::after { content: ""; position: absolute; inset: -10px -6px; }
  .intro-corner .icon::after { content: ""; position: absolute; inset: -6px; }
}
/* Phones: the welcome text fills the card's width, like the button under it.
   The headline drops its desktop line break and scales with the screen so "A design crit, out loud." sits on one line edge to edge. */
@media (max-width: 760px) {
  .intro-line { max-width: none; }
  .intro-card h1 br { display: none; }
}
/* Owner's call (2026-11-10): no sound toggle on the welcome card; the bottom bar's speaker button and the M key still turn the voices on. */
.intro-corner .snd { display: none; }

/* ---------- Phone pass (2026-11-10): most visitors arrive on a phone from a post ---------- */
@media (max-width: 760px) {
  /* Typing fields at 16px, or iPhone Safari zooms the whole page in when you tap them. */
  #sgHandle, #sgWhy, #input { font-size: 16px; }
  /* Fix list actions: wrap onto rows instead of hiding off the right edge. */
  .wc-foot { flex-wrap: wrap; overflow: visible; }
  .wc-foot > * { flex: 1 1 auto; }
  .wc-foot > :first-child { flex-basis: 100%; margin-right: 0; }
  .wc-foot .primary, .wc-foot .ghost { height: 44px; font-size: 13.5px; }
  /* Small labels up to a readable size. */
  .is-tag b, .is-note { font-size: 11.5px; }
  .fig .tag { font-size: 12px; }
}
/* Touch screens: finger-sized tap areas (about 44px) without changing how anything looks. */
@media (pointer: coarse) {
  header .icon, #prev, #next, #play, #voiceBtn, #voiceMore, #fixBtn, #heatBtn, #send, .icon.attach, #seg button, #drawerClose, #sgClose, .wc-foot .ghost, .go { position: relative; }
  header .icon::after, #prev::after, #next::after, #voiceBtn::after, #voiceMore::after, #fixBtn::after, #heatBtn::after, .icon.attach::after, #seg button::after, #drawerClose::after, #sgClose::after, .go::after { content: ""; position: absolute; inset: -7px -2px; }
  #play::after, #send::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
}

/* ---------- Phone type scale (2026-11-10) ----------
   Five steps instead of fifteen sizes. Nothing on a phone below 12px.
   12  meta: badges, name tags, counts, chapter      14  UI: buttons, links, note titles
   15  body: descriptions                            20  the spoken line (Instrument Serif runs small, so it needs the extra size)
   display: welcome headline (fitted to width), fix list title 28 */
@media (max-width: 760px) {
  .sev, .react span, .fig .tag, .fig .tag b, #nowCh, #fixCount, .cap-head, .cap-head b, .cap-head .ttl, .sevgrp-head span, .wc-head .kicker, .who-seg .nm, .is-tag b { font-size: 12px !important; }
  .intro-alt .link, #introOwn, .intro-foot, .intro-foot .link, .sevgrp .row .t, .wc-foot .primary, .wc-foot .ghost { font-size: 14px !important; }
  .ux.fold > b { font-size: 13px !important; }
  .intro-line, .wc-head p, .ent p { font-size: 15px !important; line-height: 1.5; }
  #capText { font-size: 20px !important; line-height: 1.25 !important; }
  .pq.fold q { font-size: 16px !important; }
  .wc-head h2 { font-size: 28px !important; }
}

/* ---------- Welcome card on phones, option A (owner's pick, 2026-11-10) ----------
   Bigger figures in front of the screen they crit; names on the figures; no typing bubble;
   the "simulated" line moves out of the picture to sit above the headline. Spacing on an 8px rhythm. */
.intro-kicker { display: none; }
@media (max-width: 760px) {
  .intro-stage { min-height: 300px !important; }
  .is-screen { top: 7%; width: 80%; }
  .is-pin { width: 16px; height: 16px; font-size: 9px; }
  .is-figs { padding-bottom: 0 !important; z-index: 1; }
  .is-fig { max-width: 168px !important; margin: 0 -5% !important; }
  .is-fig .rigvideo, .is-screen { -webkit-mask-image: linear-gradient(#000 72%, transparent 98%); mask-image: linear-gradient(#000 72%, transparent 98%); }
  .is-bubble, .is-fig .is-bubble, .is-note { display: none !important; }
  .is-tag { bottom: 14px !important; z-index: 3; padding: 6px 11px 6px 9px !important; }
  .is-tag span { display: none; }
  .is-tag b { font-size: 13px !important; }

  .intro-body { padding: 24px 24px 16px !important; }
  .intro-kicker { display: block; margin: 0 0 8px; font: 500 12px/1.3 var(--sans); letter-spacing: .01em; color: var(--mut); }
  .intro-card h1 { font-size: clamp(28px, 8.6vw, 34px) !important; line-height: 1.05; margin: 0 0 12px !important; white-space: nowrap; }
  .intro-line { margin: 0 0 24px !important; }
  .intro-go { margin-top: 0 !important; }
  .intro-alt { margin-top: 12px !important; }
  .intro-foot { margin-top: 16px !important; padding-top: 16px !important; }
}

/* ---------- Phones: the note's cards at the top (2026-11-10) ----------
   They're a selling point, so on phones they stack as full-width cards with a label saying what they are,
   a clear "Open" chip, a glow when they arrive, and a one-time hint. Desktop is unchanged. */
@media (max-width: 900px), (max-height: 500px) {
  .pull:not(.has-open) { flex-direction: column; overflow: visible; scroll-snap-type: none; gap: 6px; }
  .pull:not(.has-open) > * { width: 100% !important; }
  .pull .fold:not(.open) { position: relative; flex-wrap: wrap; align-items: center; row-gap: 2px; min-height: 52px; padding: 8px 12px 8px 14px; }
  .pull .fold:not(.open)::after { content: "Open"; order: 9; margin-left: auto; padding: 5px 10px; border-radius: 999px; font: 600 12px/1 var(--sans); color: var(--ink); background: var(--chip-2); }
  .kick { display: none; }
  .pull .fold .kick { display: block; flex: 0 0 100%; order: -1; font: 600 11px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
  .pull .pq.fold .kick { color: var(--accent); }
  .pull .fold.open .kick { margin-bottom: 6px; }
  .pull .fold.fresh { animation: pullGlow 1.2s ease-out 2; }
  .pull-hint { position: absolute; z-index: 6; left: 50%; translate: -50% 0; top: var(--hint-top, 128px); max-width: calc(100% - 40px); padding: 8px 12px; border-radius: 12px; background: var(--ink); color: var(--bg); font: 500 13px/1.35 var(--sans); text-align: center; box-shadow: var(--e2); animation: isFade .3s var(--out); pointer-events: none; }
  .pull-hint::before { content: ""; position: absolute; top: -5px; left: 50%; translate: -50% 0; width: 10px; height: 10px; rotate: 45deg; background: var(--ink); border-radius: 2px; }
  .pull-hint.out { opacity: 0; transition: opacity .3s; }
}
@keyframes pullGlow { 0% { box-shadow: var(--e2), 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: var(--e2), 0 0 0 10px transparent; } }

/* Phones: "From his work" is a selling point, so it shows as its own card: label, then thumbnails you tap to open. */
@media (max-width: 900px), (max-height: 500px) {
  .pull .fold .ux-top .k { display: none; } /* the label above already says it */
  .pull .pr { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px 10px 14px; }
  .pull .pr .pr-head { flex: 0 0 100%; margin: 0; font: 600 11px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
  .pull .pr .pr-row { display: flex; gap: 6px; margin: 0; }
  .pull .pr .pr-row button { width: 56px; height: 40px; padding: 0; border-radius: 8px; overflow: hidden; }
  .pull .pr .pr-row button > * { width: 100%; height: 100%; object-fit: cover; }
  .pull .pr .pr-name { flex: 1; min-width: 0; margin: 0; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* The canvas view is a desktop-only local page with no way back on a phone; never offer it there. */
@media (max-width: 900px), (pointer: coarse) { .switch { display: none !important; } }

/* Phones: opening and closing a card (2026-11-10).
   The open card keeps its label, gets a clear Close button top right, and says the crit is waiting.
   The other cards stay underneath, folded, so you can hop between them. */
.fold-close { display: none; }
@media (max-width: 900px), (max-height: 500px) {
  .pull.has-open { flex-direction: column; gap: 6px; }
  .pull.has-open > * { width: 100% !important; }
  .pull .fold.open { position: relative; padding-top: 12px; }
  .pull .fold.open .kick { padding-right: 84px; min-height: 30px; display: flex; align-items: center; }
  .pull .fold.open .fold-close { display: inline-flex; align-items: center; gap: 6px; position: absolute; top: 8px; right: 8px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--chip-2); color: var(--ink); font: 600 13px/1 var(--sans); cursor: pointer; }
  .pull .fold.open .fold-close::before { content: "✕"; font-size: 11px; }
  .pull .fold.open .fold-close::after { content: ""; position: absolute; inset: -6px; }
  .pull .fold.open::after { content: "❚❚  Paused while you read · Close to carry on"; display: block; order: 99; margin-top: 10px; font: 500 12px/1.3 var(--sans); color: var(--mut); background: none; padding: 0; }
  .pull.has-open > .open { max-height: min(48vh, 360px); }
}

/* First release: no voice. The controls stay in the code (VOICE_ENABLED in stage.js) but are hidden. */
.voice-wrap, #introSound { display: none !important; }

/* ---------- Nudges (2026-11-10, preview with ?nudges=1) ---------- */
/* Paused: a pill above the caption, and the play button breathes. */
.pause-pill { position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  height: 36px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); box-shadow: var(--e2); font: 500 13px/1 var(--sans); cursor: pointer; pointer-events: auto; animation: isFade .25s var(--out); }
.pause-pill[hidden] { display: none; }
.pause-pill i { width: 10px; height: 11px; flex: none; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.pause-pill b { font-weight: 600; }
.pause-pill span { opacity: .65; }
.pause-pill::after { content: ""; position: absolute; inset: -6px; }
.play.nudge { animation: playBreathe 1.8s ease-in-out infinite; }
@keyframes playBreathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .play.nudge { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); } }

/* Halfway: an upload chip above the ask bar, in the accent so it reads as the next step. */
#suggest .chip-upload { color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); font-weight: 600; }
#suggest .chip-upload svg { flex: none; }

/* End: "Your turn" card. */
.wrap-card.turn-card { position: relative; width: min(440px, 100%); align-items: center; text-align: center; padding: 30px 26px 22px; gap: 0; overflow: visible; }
.turn-card .turn-x { position: absolute; top: 10px; right: 10px; }
.turn-figs { display: flex; margin-bottom: 14px; }
.turn-figs img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--raised); }
.turn-figs img + img { margin-left: -12px; }
.turn-card .kicker { margin-bottom: 4px; }
.turn-card h2 { font: italic 400 40px/1 var(--serif); margin: 0 0 10px; letter-spacing: -.01em; }
.turn-card p { margin: 0 0 20px; color: var(--ink-2); line-height: 1.5; max-width: 34ch; }
.turn-card .turn-go { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; font: 600 15px var(--sans); cursor: pointer; }
.turn-card .turn-go::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 11V3M4.5 6.5L8 3l3.5 3.5M3 12.5h10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 11V3M4.5 6.5L8 3l3.5 3.5M3 12.5h10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.turn-card small { display: block; margin: 10px 0 14px; color: var(--mut); font-size: 12.5px; }
.turn-card .turn-fix { font: 500 13.5px var(--sans); color: var(--ink-2); background: none; border: 0; padding: 8px; cursor: pointer; }
@media (max-width: 760px) {
  .wrap-card.turn-card { padding: 28px 20px 18px; }
  .turn-card h2 { font-size: 36px; }
}

/* Phones: the fix list uses the full width with tighter rows so titles stay on one or two lines. */
@media (max-width: 760px) {
  .wc-body { padding: 4px 6px 10px; }
  .row { gap: 8px; padding: 8px 6px; }
  .sevgrp-head { padding-left: 6px; padding-right: 6px; }
}

/* ---------- "Bring your own design" panel (2026-11-10) ---------- */
.bring { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 16px; background: color-mix(in oklab, var(--stage, var(--bg)) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: isFade .25s var(--out); }
.bring-card { position: relative; width: min(460px, 100%); padding: 22px; display: flex; flex-direction: column; align-items: stretch; text-align: center; background: var(--raised); border-radius: 22px; box-shadow: var(--e3, var(--e2)); }
.bring-x { position: absolute; top: 28px; right: 28px; z-index: 1; }
.bring-zone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 20px 24px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.bring-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); margin-bottom: 4px; }
.bring-zone h2 { font: italic 400 32px/1.05 var(--serif); margin: 0; letter-spacing: -.01em; color: var(--ink); }
.bring-zone p { margin: 0; color: var(--ink-2); line-height: 1.5; max-width: 32ch; }
.bring-keys { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12.5px; color: var(--mut); }
.bring-keys kbd { min-width: 24px; height: 24px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 6px; background: var(--chip); box-shadow: inset 0 -1px 0 var(--line-2); font: 600 12px var(--sans); color: var(--ink); }
.bring-keys span { margin-left: 4px; }
.bring-acts { display: flex; gap: 8px; margin-top: 14px; }
.bring-go { flex: 1; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; font: 600 15px var(--sans); cursor: pointer; }
.bring-paste { flex: none; height: 48px; padding: 0 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-weight: 600; }
.bring-note { display: block; margin: 12px 4px 4px; color: var(--mut); font-size: 12.5px; line-height: 1.45; }
.bring-back { margin-top: 2px; padding: 8px; background: none; border: 0; font: 500 13.5px var(--sans); color: var(--ink-2); cursor: pointer; }
@media (max-width: 760px) {
  .bring { place-items: start center; padding-top: 24px; }
  .bring-card { padding: 16px; }
  .bring-zone { padding: 22px 14px 18px; }
  .bring-zone h2 { font-size: 28px; }
  .bring-acts { flex-direction: column; }
  .bring-go, .bring-paste { flex: none; width: 100%; height: 50px; }
  .bring-x { top: 22px; right: 22px; }
}