@font-face { font-family: "Comic Neue"; src: url(/fonts/comic-neue-latin-700.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Ollie Mono"; src: url(/fonts/dejavu-mono-latin-700.woff2) format("woff2"); font-weight: 600 700; font-display: block; }
:root {
  --ink: #2A2320;
  --paper: #FFF3D6;
  --font: "Comic Neue", "Comic Sans MS", cursive;
  --letter: "Comic Neue", "Comic Sans MS", cursive;
  /* the frame and the caption box: main.js sets them from TL.W, TL.H and TL.CAP (9:16 defaults here) */
  --W: 1080px; --H: 1920px;
  --cap-x: 70px; --cap-y: 266px; --cap-w: 940px; --cap-h: 198px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #221d2b; font-family: var(--font); color: var(--ink); }

#view { position: fixed; left: 0; top: 0; right: 0; bottom: 64px; }
body.rec #view { bottom: 0; }
#stage { position: absolute; left: 0; top: 0; width: var(--W); height: var(--H); transform-origin: 0 0; overflow: hidden; background: var(--paper); }
#svg, #fx { position: absolute; left: 0; top: 0; width: var(--W); height: var(--H); overflow: hidden; }
#fx { pointer-events: none; }

/* ink line classes; --lw compensates rig scale */
svg .o  { stroke: var(--ink); stroke-width: calc(6px * var(--lw, 1)); stroke-linejoin: round; stroke-linecap: round; }
svg .o4 { stroke: var(--ink); stroke-width: calc(4.5px * var(--lw, 1)); stroke-linejoin: round; stroke-linecap: round; }
svg .o3 { stroke: var(--ink); stroke-width: calc(3px * var(--lw, 1)); stroke-linejoin: round; stroke-linecap: round; }
svg .nf { fill: none; }
/* the making-of's screens: real artifacts (prompts, code, readouts) in a monospace font */
svg .mono { font-family: "Ollie Mono", Menlo, "SF Mono", Monaco, monospace; font-weight: 600; white-space: pre; }
svg .letter { font-family: var(--letter); font-weight: 700; paint-order: stroke fill; stroke: var(--ink); stroke-width: 7px; stroke-linejoin: round; }

/* caption: comic narration box, fixed 2-line height (16:9: a band at the bottom, over the floor) */
#cap { position: absolute; left: 0; top: 0; width: var(--W); height: var(--H); pointer-events: none; }
#capbox {
  position: absolute; left: var(--cap-x); top: var(--cap-y); width: var(--cap-w); height: var(--cap-h);
  background: #FFF6D0; border: 6px solid var(--ink); border-radius: 8px;
  box-shadow: 10px 10px 0 var(--ink);
  display: flex; align-items: center; justify-content: center; transform-origin: 50% 50%;
}
#capbox::before { /* halftone corner */
  content: ""; position: absolute; inset: 0; border-radius: 3px; opacity: .55;
  background: radial-gradient(circle, #FFD84D 32%, transparent 36%) 0 0 / 16px 16px;
  -webkit-mask-image: linear-gradient(135deg, transparent 62%, #000 100%); mask-image: linear-gradient(135deg, transparent 62%, #000 100%);
}
#captext { position: relative; width: 100%; padding: 0 22px; text-align: center; font-weight: 700; font-size: 52px; line-height: 1.24; }
#captext .ln { display: block; white-space: nowrap; }
#captext .ph { display: inline-block; }
#captext .k {
  display: inline-block; padding: 0 .16em 0 .12em; margin: 0 .02em; border-radius: .45em; border: 3.5px solid currentColor;
  line-height: 1.08; transform-origin: 50% 60%;
  will-change: transform; /* own layer: curved pill edges + icons otherwise rasterize differently depending on the frames before (--check) */
}
#captext .k svg { width: .7em; height: .7em; vertical-align: -.04em; margin-right: .08em; }

/* controls (live mode only) */
#ctl {
  position: fixed; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: #15121b; color: #eee; font: 600 15px/1 system-ui, sans-serif;
}
#ctl button { font: inherit; background: #2d2738; color: #fff; border: 0; border-radius: 8px; padding: 9px 12px; cursor: pointer; }
#ctl button:hover { background: #3c3450; }
#ctl input[type=range] { flex: 1; accent-color: #E0368C; }
#ctl #tc { font-variant-numeric: tabular-nums; min-width: 128px; text-align: right; }
body.rec #ctl, body.rec #start { display: none !important; }

#start {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(20, 16, 26, .55); z-index: 10; cursor: pointer; color: #fff; font: 600 15px/1.4 system-ui, sans-serif; text-align: center;
}
#start button { font: 700 34px var(--font); padding: 18px 40px; border-radius: 18px; border: 5px solid var(--ink); background: #FFD84D; color: var(--ink); box-shadow: 8px 8px 0 var(--ink); cursor: pointer; }
#start button:disabled { opacity: .55; cursor: progress; box-shadow: 4px 4px 0 var(--ink); }
#start.hidden { display: none; }

/* debug overlay */
#dbg { position: absolute; inset: 0; pointer-events: none; display: none; }
body.debug #dbg { display: block; }
#dbg .tc { position: absolute; left: 20px; top: 20px; background: rgba(0,0,0,.72); color: #fff; font: 700 30px/1.25 ui-monospace, monospace; padding: 8px 14px; border-radius: 8px; }
#dbg .sz { position: absolute; background: rgba(255, 40, 40, .16); outline: 2px dashed rgba(255, 40, 40, .7); }

/* website patch: the legal links on the start overlay; a narrow control bar inside the episode page's frame */
#bBoil { display: none !important; } /* the line-boil switch is a production tool */
#start .legal { font-size: 13px; opacity: .9; }
#start .legal a { color: #fff; }
#ctl #tc { white-space: nowrap; flex: none; } /* the readout keeps its width; the scrub bar gives way */
#ctl #scrub { min-width: 0; flex: 1 1 auto; }
@media (max-width: 360px) { #ctl { gap: 4px; padding: 0 6px; } #ctl button { padding: 8px 9px; } #ctl #tc { font-size: 11px; } }
noscript p { position: fixed; inset: auto 0 64px; margin: 0; padding: 12px 16px; background: #FFF6D0; color: #2A2320; font: 600 15px/1.4 system-ui, sans-serif; z-index: 20; }
@media (max-width: 520px) { #ctl { gap: 6px; padding: 0 8px; } #ctl #tc { min-width: 0; font-size: 12px; } }