@font-face { font-family: "Gotham"; src: url("../assets/fonts/display-700.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Gotham"; src: url("../assets/fonts/display-500.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Work Sans"; src: url("../assets/fonts/WorkSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: block; }
@font-face { font-family: "Work Sans"; src: url("../assets/fonts/WorkSans-Semibold.ttf") format("truetype"); font-weight: 600; font-display: block; }

:root {
  --tai-black: #000000;
  --tai-void: #ffffff;
  --tai-red: #d71920;
  --tai-amber: #ff9500;
  --tai-gray: #57585b;
  --text-soft: #c9c9cb;
  --panel: #111112;
  --panel-rule: #38383b;
  --text-body: #e7e7e8;
  --text-faint: #9c9ca0;
  --frame-dash: #6d6d70;
  --connector-gray: #7c7c80;
  --lane-rule: #3a3a3d;
  --grad-headline: linear-gradient(90deg, var(--tai-red) 40%, var(--tai-amber) 100%);
  --display: "Gotham", "Work Sans", sans-serif;
  --body: "Work Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, "Cascadia Mono", monospace;
}

html, body { margin: 0; height: 100%; background: var(--tai-black); overflow: hidden; }
::selection { background: var(--tai-red); color: var(--tai-void); }

#stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; overflow: hidden; background: var(--tai-black);
  color: var(--tai-void); font-family: var(--body);
}
#map { position: absolute; inset: 0; width: 1920px; height: 1080px; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#life { position: absolute; left: 0; top: 0; }
#frame { position: absolute; inset: 0; pointer-events: none; }
#logo { position: absolute; left: 44px; top: 32px; height: 46px; width: auto; }

/* World text is authored at three times its wide-shot size: the wide shot is scale 1/3, and a close-up is scale 1. */
.w { position: absolute; white-space: nowrap; }
.sentence { font: 700 234px/1.14 var(--display); letter-spacing: -0.015em; }
.sentence.second { font-size: 150px; }
.grad { background: var(--grad-headline); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stance { font: 700 186px/1.14 var(--display); letter-spacing: -0.015em; }
.stance-line { font: 400 96px/1.2 var(--body); color: var(--text-soft); }

.lane-name { width: 590px; white-space: normal; font: 700 72px/1.05 var(--display); letter-spacing: -0.01em; }
.lane-note { margin-top: 10px; white-space: normal; font: 400 72px/1.1 var(--body); color: var(--text-soft); }
/* A stage name sits on its column, bottom-aligned to the lanes, so a long one wraps upward and never reaches its neighbour. */
.stage-name { width: 690px; white-space: normal; text-align: center; font: 700 72px/1.05 var(--display); letter-spacing: -0.01em; transform: translate(-50%, -100%); }

.box { box-sizing: border-box; padding: 9px 12px; background: var(--panel); border: 4px solid var(--panel-rule); white-space: normal; }
.box.human { background: var(--tai-red); border-color: var(--tai-red); }
.box.human .box-detail { color: var(--tai-void); }
.box-title { display: block; font: 700 78px/1.05 var(--display); letter-spacing: -0.01em; }
code.box-title { font-family: var(--mono); font-weight: 700; font-size: 72px; letter-spacing: -0.04em; white-space: nowrap; }
.box-detail { margin-top: 8px; font: 400 72px/1.08 var(--body); letter-spacing: -0.005em; color: #e7e7e8; }

/* Chapter scenes: a 1920 × 1080 layer in plain stage pixels, seen at scale 1. */
.scene { position: absolute; width: 1920px; height: 1080px; visibility: hidden; opacity: 0; background: var(--tai-black); }
.scene-lines { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: visible; pointer-events: none; }
/* A wide scene covers the whole lifecycle at the wide shot: stage pixels drawn at three times their size in the world. */
.scene.wide { transform: scale(3); transform-origin: 0 0; background: transparent; }
.el { position: absolute; box-sizing: border-box; visibility: hidden; opacity: 0; }
.heading { font: 700 54px/1.15 var(--display); letter-spacing: -0.01em; }
.body { font: 400 32px/1.35 var(--body); color: #e7e7e8; }
.body.soft { color: var(--text-soft); }
.body.line { font-size: 40px; }
.body.right { text-align: right; }
.body.small { font-size: 26px; color: var(--text-soft); }

.dbox { padding: 14px 18px; background: var(--panel); border: 2px solid var(--panel-rule); }
.dbox.human { background: var(--tai-red); border-color: var(--tai-red); }
.dbox.off { color: #77777a; border-style: dashed; background: transparent; }
.b-title { font: 700 30px/1.2 var(--display); }
.b-title code, .m-text code { font-family: var(--mono); font-weight: 700; }
.b-detail { margin-top: 8px; font: 400 26px/1.25 var(--body); color: #dcdcde; }
.dbox.human .b-detail { color: var(--tai-void); }

.a-line { fill: none; stroke-width: 2.4; visibility: hidden; }
.a-line.red { stroke: var(--tai-red); }
.a-line.void { stroke: var(--tai-void); }
.a-line.gray { stroke: #7c7c80; }
.a-line.dashed { stroke-dasharray: 10 8; }
.a-reveal { fill: none; stroke: #fff; stroke-width: 10; stroke-linejoin: miter; }

/* The loop frame (kit.loop): the UML loop fragment round the steps that repeat. --loop-rule turns amber while it's named. */
.loop-frame rect { fill: none; stroke: var(--loop-rule, var(--frame-dash)); stroke-width: 2; stroke-dasharray: 10 8; }
.loop-frame.map rect { stroke-width: 4; stroke-dasharray: 14 10; }
.loop-label { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.loop-tag { box-sizing: border-box; padding: 6px 14px; background: var(--panel); border: 2px solid var(--loop-rule, var(--frame-dash)); font: 500 24px/1.2 var(--display); color: var(--text-soft); }
.loop-until { font: 400 26px/1.2 var(--body); color: var(--text-soft); }
.a-head { visibility: hidden; }
.a-head.red { fill: var(--tai-red); }
.a-head.void { fill: var(--tai-void); }
.a-head.gray { fill: #7c7c80; }
.a-label { visibility: visible; opacity: 0; font: 600 26px/1 var(--body); color: #ff7a6e; white-space: nowrap; }
.token { padding: 8px 14px; transform: translate(-50%, -50%); background: var(--tai-amber); color: var(--tai-black); font: 600 24px/1.1 var(--body); white-space: nowrap; }

.t-row { display: grid; gap: 20px; padding: 13px 16px; border-bottom: 1px solid var(--panel-rule); font: 400 28px/1.25 var(--body); align-items: baseline; }
.t-head { font: 700 26px/1.2 var(--display); color: var(--text-soft); border-bottom-color: #6d6d70; }

.message { padding: 24px 30px 28px; background: var(--panel); border: 2px solid var(--panel-rule); }
.message.agent { border-left: 2px solid var(--panel-rule); background: #18181a; }
.m-head { display: flex; gap: 18px; align-items: baseline; font: 600 26px/1.2 var(--body); }
.m-head time { font-weight: 400; color: var(--text-soft); }
.m-text { margin-top: 12px; font: 400 36px/1.35 var(--body); white-space: pre-line; }

.file { background: #0c0c0d; border: 2px solid var(--panel-rule); }
.f-title { padding: 10px 18px; border-bottom: 2px solid var(--panel-rule); font: 500 24px/1.2 var(--mono); color: var(--text-soft); }
.file pre { margin: 0; padding: 16px 18px; font: 400 27px/1.42 var(--mono); }

.counter { text-align: left; }
.c-n { font: 700 96px/1 var(--display); font-variant-numeric: tabular-nums; }
.counter.human .c-n { color: var(--tai-amber); }
.c-l { margin-top: 8px; font: 500 26px/1.2 var(--display); color: var(--text-soft); }

.lifeline { background: #4a4a4e; }
.m-label { font-size: 25px; line-height: 1.2; color: #e7e7e8; }
.m-label.human { color: var(--tai-void); font-weight: 600; }
.card-title { font: 700 96px/1.1 var(--display); letter-spacing: -0.015em; }

/* A lift group (kit.lift): content that moves as one between a sparse rest's centre and where it's authored. */
.scene > .lift { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }