/* AI OS board. Dark system ground, Geist, colour only with a job:
   blue = where a job starts, orange = live / the one highlight, green = recorded.
   All sizes are in --u, 1% of the stage's short side, so a 16:9 and a 9:16 recording
   are the same drawing at the same sharpness. */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--black); color: var(--dgray-12); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input { font: inherit; color: inherit; }
.mono { font-family: var(--font-mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.viewport { position: fixed; inset: 0; display: grid; place-items: center; }
.stage {
  --u: 1cqmin;
  --pad: calc(var(--u) * 5.5);
  --line: var(--dgray-4);
  --soft: var(--dgray-11);
  --faint: var(--dgray-10);
  container: stage / size;
  position: relative; width: 100vw; height: 100vh; overflow: hidden;
  background: radial-gradient(120% 90% at 85% 0%, #141414 0%, #050505 55%, #000 100%);
  user-select: none; -webkit-user-select: none;
}
body[data-frame="wide"] .stage { width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); }
body[data-frame="tall"] .stage { height: min(100vh, calc(100vw * 16 / 9)); width: min(100vw, calc(100vh * 9 / 16)); }
body[data-frame="wide"], body[data-frame="tall"] { background: #1a1a1a; }

/* Bracket corners, the brand's frame */
.corner { position: absolute; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); border: 0 solid var(--dgray-7); pointer-events: none; }
.corner.tl { left: calc(var(--u) * 2); top: calc(var(--u) * 2); border-left-width: 2px; border-top-width: 2px; }
.corner.br { right: calc(var(--u) * 2); bottom: calc(var(--u) * 2); border-right-width: 2px; border-bottom-width: 2px; }

/* Top bar */
.bar { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--u) * 3.4); display: flex; align-items: center; gap: calc(var(--u) * 2.4); height: calc(var(--u) * 4); z-index: 3; }
.brand { display: flex; align-items: center; gap: calc(var(--u) * 1); font-weight: 600; letter-spacing: -0.02em; font-size: calc(var(--u) * 2); }
.brand .mark { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); color: #fff; }
.where { font-size: calc(var(--u) * 1.35); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--soft); padding-left: calc(var(--u) * 2.4); border-left: 1px solid var(--line); }
.company { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * .8); font-size: calc(var(--u) * 1.25); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--soft); border: 1px solid var(--line); padding: calc(var(--u) * .6) calc(var(--u) * 1.2); border-radius: var(--r-pill); }
.company .dot { width: calc(var(--u) * .8); height: calc(var(--u) * .8); border-radius: 50%; background: var(--dgray-9); }
body.yours .company .dot { background: var(--act-dark); }

/* Scenes */
.scenes { position: absolute; inset: 0; }
.scene {
  position: absolute; inset: 0; padding: calc(var(--u) * 11) var(--pad) calc(var(--u) * 7);
  display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); gap: calc(var(--u) * 5);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s;
}
.scene.active { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.head { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 2); min-width: 0; }
.kicker { font-family: var(--font-mono); font-size: calc(var(--u) * 1.4); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--live); }
.head h2 { margin: 0; font-size: calc(var(--u) * 6.4); line-height: .98; letter-spacing: var(--display-track); font-weight: 600; text-wrap: balance; }
.head p { margin: 0; font-size: calc(var(--u) * 2.1); line-height: 1.4; color: var(--soft); max-width: 34ch; text-wrap: pretty; }
.body { position: relative; min-width: 0; min-height: 0; }
.assume { font-family: var(--font-mono); font-size: calc(var(--u) * 1.15); letter-spacing: .04em; color: var(--faint); line-height: 1.5; }

@container stage (orientation: portrait) {
  .stage { --pad: calc(var(--u) * 6); }
  .scene { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: calc(var(--u) * 5); padding-top: calc(var(--u) * 12); padding-bottom: calc(var(--u) * 9); }
  .head { justify-content: flex-start; gap: calc(var(--u) * 2.2); }
  .head h2 { font-size: calc(var(--u) * 9); }
  .head p { font-size: calc(var(--u) * 3); max-width: none; }
  .kicker { font-size: calc(var(--u) * 2.2); }
  .where { font-size: calc(var(--u) * 2); }
  .company { font-size: calc(var(--u) * 1.8); }
  .brand { font-size: calc(var(--u) * 3); }
  .brand .mark { width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); }
  .bar { top: calc(var(--u) * 5); height: calc(var(--u) * 5); }
  .assume { font-size: calc(var(--u) * 1.8); }
}

/* Build steps: anything with data-at waits for its step */
[data-at] { opacity: 0; transform: translateY(calc(var(--u) * 1.2)); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
[data-at].on { opacity: 1; transform: none; }
.fade[data-at] { transform: none; }

/* Progress ticks */
.ticks { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--u) * 3.2); display: flex; gap: calc(var(--u) * .6); align-items: center; z-index: 3; }
.ticks .sc { display: flex; gap: calc(var(--u) * .3); flex: 1; }
.ticks .sc i { flex: 1; height: 2px; background: var(--dgray-5); border-radius: 2px; transition: background .3s; }
.ticks .sc i.on { background: var(--dgray-11); }
.ticks .sc.now i.on { background: var(--live); }

/* 00 Cover */
.scene.cover { grid-template-columns: 1fr; align-items: center; }
.cover-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: calc(var(--u) * 6); }
.cover h1 { margin: 0; font-size: calc(var(--u) * 9.2); line-height: .95; letter-spacing: var(--display-track); font-weight: 600; text-wrap: balance; }
.cover h1 em { font-style: normal; color: var(--live); }
.cover .lede { margin: calc(var(--u) * 2.6) 0 0; font-size: calc(var(--u) * 2.2); color: var(--soft); line-height: 1.45; max-width: 40ch; }
.cover .index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cover .index li { display: grid; grid-template-columns: calc(var(--u) * 5) 1fr auto; align-items: baseline; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.5) 0; border-bottom: 1px solid var(--line); font-size: calc(var(--u) * 2.3); letter-spacing: -0.01em; }
.cover .index b { font-family: var(--font-mono); font-weight: 400; font-size: calc(var(--u) * 1.4); color: var(--faint); }
.cover .index span.q { font-size: calc(var(--u) * 1.5); color: var(--faint); }
.glossy { width: calc(var(--u) * 13); height: auto; mix-blend-mode: screen; display: block; margin-bottom: calc(var(--u) * 3); }
@container stage (orientation: portrait) {
  .cover-inner { grid-template-columns: 1fr; gap: calc(var(--u) * 7); }
  .cover h1 { font-size: calc(var(--u) * 12); }
  .cover .lede { font-size: calc(var(--u) * 3.1); }
  .cover .index li { font-size: calc(var(--u) * 3.4); grid-template-columns: calc(var(--u) * 7) 1fr; padding: calc(var(--u) * 2) 0; }
  .cover .index b { font-size: calc(var(--u) * 2); }
  .cover .index span.q { display: none; }
  .glossy { width: calc(var(--u) * 18); }
}

/* Big number */
.big { display: flex; flex-direction: column; gap: calc(var(--u) * .6); }
.big .n { font-size: calc(var(--u) * 8.4); font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.big .n small { font-size: .42em; letter-spacing: -0.02em; color: var(--soft); font-weight: 500; margin-left: .15em; }
.big .l { font-family: var(--font-mono); font-size: calc(var(--u) * 1.3); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--faint); }
.big.live .n { color: var(--live); }
.nums { display: flex; gap: calc(var(--u) * 5); flex-wrap: wrap; margin-top: calc(var(--u) * 1); }
@container stage (orientation: portrait) {
  .big .n { font-size: calc(var(--u) * 11); }
  .big .l { font-size: calc(var(--u) * 1.9); }
}

/* 01 Leak: treemap */
.treemap { position: absolute; inset: 0; }
.tile { position: absolute; padding: 3px; }
.tile > div { position: absolute; inset: 3px; border-radius: calc(var(--u) * .9); background: var(--dgray-2); border: 1px solid var(--dgray-4); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.2); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: background .5s var(--ease), border-color .5s var(--ease); }
.tile .t { font-size: calc(var(--u) * 1.65); line-height: 1.2; letter-spacing: -0.01em; font-weight: 500; }
.tile .h { font-family: var(--font-mono); font-size: calc(var(--u) * 1.3); color: var(--soft); display: flex; justify-content: space-between; gap: calc(var(--u) * 1); white-space: nowrap; }
.tile .h b { font-weight: 500; }
.tile .h em { font-style: normal; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-size: .85em; }
.tile.small .t { font-size: calc(var(--u) * 1.3); }
.tile.tiny .t { font-size: calc(var(--u) * 1.1); }
.tile.tiny .h em, .tile.small .h em, .tile.narrow .h em { display: none; }
.scene[data-hot="1"] .tile.hot > div { border-color: var(--live); background: var(--signal-soft-dark); }
@container stage (orientation: portrait) {
  .tile .t { font-size: calc(var(--u) * 2.3); }
  .tile .h { font-size: calc(var(--u) * 1.8); }
  .tile.small .t { font-size: calc(var(--u) * 1.8); }
  .tile.tiny .t { font-size: calc(var(--u) * 1.5); }
}

/* Leak layout: numbers under the head on wide, under the map on tall */
.leak .head .nums { margin-top: calc(var(--u) * 2); }

/* 02 Pick: the matrix */
.pick .body { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: calc(var(--u) * 2); }
.plot { position: relative; margin: 0 0 calc(var(--u) * 4) calc(var(--u) * 5); }
.plot .quad { position: absolute; border: 0 solid var(--dgray-5); }
.plot .q-first { background: linear-gradient(135deg, rgba(255,90,31,.10), rgba(255,90,31,.03)); border-radius: calc(var(--u) * 1.2); }
.plot .qlabel { position: absolute; font-family: var(--font-mono); font-size: calc(var(--u) * 1.2); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--faint); padding: calc(var(--u) * 1); max-width: 22ch; line-height: 1.35; }
.plot .qlabel.first { color: var(--live); }
.plot .axis-x, .plot .axis-y { position: absolute; background: var(--dgray-6); }
.plot .axis-x { left: 0; right: 0; bottom: 0; height: 1px; }
.plot .axis-y { left: 0; top: 0; bottom: 0; width: 1px; }
.plot .split-x { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--dgray-6); }
.plot .split-y { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--dgray-6); }
.plot .alabel { position: absolute; font-family: var(--font-mono); font-size: calc(var(--u) * 1.2); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.plot .alabel.x { bottom: calc(var(--u) * -3.4); right: 0; }
.plot .alabel.x0 { bottom: calc(var(--u) * -3.4); left: 0; color: var(--faint); }
.plot .alabel.y { left: calc(var(--u) * -2.4); top: 50%; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: 50% 50%; }
.dotw { position: absolute; width: 0; height: 0; }
.dotw .d { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); background: var(--dgray-9); transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.dotw .lb { position: absolute; left: calc(var(--r) + var(--u) * .6); transform: translateY(-50%); font-size: calc(var(--u) * 1.35); white-space: nowrap; color: var(--dgray-11); letter-spacing: -0.01em; transition: color .4s; }
.dotw .lb.left { left: auto; right: calc(var(--r) + var(--u) * .6); }
.dotw .rk { display: none; }
.scene[data-rank="1"] .dotw.pick .d { background: var(--live); box-shadow: 0 0 0 calc(var(--u) * .5) rgba(255,90,31,.22); }
.scene[data-rank="1"] .dotw.pick .lb { color: #fff; font-weight: 600; }
.scene[data-rank="1"] .dotw.pick .rk { display: inline; font-family: var(--font-mono); color: var(--live); margin-right: .4em; }
.picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.4); }
.picks li { border: 1px solid var(--dgray-5); border-radius: calc(var(--u) * 1); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); display: grid; gap: calc(var(--u) * .4); }
.picks b { font-family: var(--font-mono); font-weight: 400; font-size: calc(var(--u) * 1.2); color: var(--live); letter-spacing: var(--label-track); }
.picks span { font-size: calc(var(--u) * 1.7); font-weight: 500; letter-spacing: -0.01em; }
.picks em { font-style: normal; font-family: var(--font-mono); font-size: calc(var(--u) * 1.2); color: var(--faint); }
.formula { font-family: var(--font-mono); font-size: calc(var(--u) * 1.4); color: var(--soft); border-left: 2px solid var(--live); padding: calc(var(--u) * .4) 0 calc(var(--u) * .4) calc(var(--u) * 1.4); }
@container stage (orientation: portrait) {
  .plot .qlabel, .plot .alabel { font-size: calc(var(--u) * 1.7); }
  .dotw .lb { font-size: calc(var(--u) * 1.9); }
  .picks { grid-template-columns: 1fr; gap: calc(var(--u) * 1); }
  .picks li { grid-template-columns: auto 1fr auto; align-items: baseline; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8); }
  .picks b, .picks em { font-size: calc(var(--u) * 1.8); }
  .picks span { font-size: calc(var(--u) * 2.5); }
  .formula { font-size: calc(var(--u) * 2); }
  .plot { margin-left: calc(var(--u) * 5.5); margin-bottom: calc(var(--u) * 5); }
  .plot .alabel.x, .plot .alabel.x0 { bottom: calc(var(--u) * -4.2); }
}

/* 03 Run: one job */
.run .body { display: grid; grid-template-rows: auto calc(var(--u) * 46); align-content: center; gap: calc(var(--u) * 3.4); }
.track { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--u) * 1); }
.track::before { content: ""; position: absolute; left: 8%; right: 8%; top: calc(var(--u) * 2.1); height: 2px; background: var(--dgray-5); }
.track .fill { position: absolute; left: 8%; top: calc(var(--u) * 2.1); height: 2px; width: 0; background: var(--live); transition: width .7s var(--ease); }
.node { position: relative; display: grid; justify-items: center; gap: calc(var(--u) * 1); text-align: center; }
.node .ring { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); border-radius: 50%; border: 2px solid var(--dgray-6); background: var(--black); display: grid; place-items: center; font-family: var(--font-mono); font-size: calc(var(--u) * 1.3); color: var(--faint); transition: all .4s var(--ease); }
.node .nm { font-family: var(--font-mono); font-size: calc(var(--u) * 1.2); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--faint); transition: color .4s; }
.node.done .ring { border-color: var(--dgray-11); color: var(--dgray-12); }
.node.done .nm { color: var(--soft); }
.node.now .ring { border-color: var(--live); color: var(--live); box-shadow: 0 0 0 calc(var(--u) * .7) rgba(255,90,31,.18); }
.node.now .nm { color: #fff; }
.node.start.now .ring, .node.start.done .ring { border-color: var(--act-dark); color: var(--act-dark); box-shadow: none; }
.node.start.now .ring { box-shadow: 0 0 0 calc(var(--u) * .7) rgba(41,151,255,.2); }
.node.end.now .ring, .node.end.done .ring { border-color: var(--done); color: var(--done); box-shadow: 0 0 0 calc(var(--u) * .7) rgba(52,199,89,.18); }
.node.hold .ring { border-color: var(--live); color: var(--live); border-style: dashed; }
.node.hold .nm { color: var(--live); }
.panel { position: relative; border: 1px solid var(--dgray-5); border-radius: calc(var(--u) * 1.6); background: var(--dgray-1); padding: calc(var(--u) * 2.6) calc(var(--u) * 3); overflow: hidden; }
.panel .clock { position: absolute; right: calc(var(--u) * 2.6); top: calc(var(--u) * 2.2); font-family: var(--font-mono); font-size: calc(var(--u) * 1.4); color: var(--soft); font-variant-numeric: tabular-nums; }
.panel .clock b { color: #fff; font-weight: 500; }
.card { position: absolute; inset: calc(var(--u) * 2.6) calc(var(--u) * 3); display: grid; align-content: start; gap: calc(var(--u) * 1.6); opacity: 0; transform: translateY(calc(var(--u) * 1)); transition: opacity .4s var(--ease), transform .5s var(--ease); pointer-events: none; }
.card.on { opacity: 1; transform: none; }
.card .lbl { font-family: var(--font-mono); font-size: calc(var(--u) * 1.3); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--faint); }
.card .lbl.act { color: var(--act-dark); } .card .lbl.live { color: var(--live); } .card .lbl.done { color: var(--done); }
.card h3 { margin: 0; font-size: calc(var(--u) * 3.6); letter-spacing: var(--heading-track); font-weight: 600; line-height: 1.1; }
.fields { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * .9) calc(var(--u) * 2.4); font-size: calc(var(--u) * 2.2); }
.fields dt { font-family: var(--font-mono); color: var(--faint); font-size: .8em; text-transform: uppercase; letter-spacing: .06em; padding-top: .2em; }
.fields dd { margin: 0; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.2); }
.checks li { display: flex; gap: calc(var(--u) * 1.2); align-items: baseline; }
.checks li::before { content: "✓"; font-family: var(--font-mono); color: var(--done); }
.checks li.wait::before { content: "…"; color: var(--live); }
.checks li.src::before { content: "↳"; color: var(--faint); }
.bubble { max-width: 46ch; background: var(--dgray-3); border-radius: calc(var(--u) * 1.8) calc(var(--u) * 1.8) calc(var(--u) * 1.8) calc(var(--u) * .4); padding: calc(var(--u) * 1.6) calc(var(--u) * 2); font-size: calc(var(--u) * 2.2); line-height: 1.45; min-height: calc(var(--u) * 7); }
.bubble.out { background: var(--act); color: #fff; border-radius: calc(var(--u) * 1.8) calc(var(--u) * 1.8) calc(var(--u) * .4) calc(var(--u) * 1.8); justify-self: end; }
.caret::after { content: ""; display: inline-block; width: .5em; height: 1.05em; vertical-align: -.15em; background: var(--live); margin-left: .1em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.record { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); }
.record div { border: 1px solid var(--dgray-5); border-radius: calc(var(--u) * 1); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); display: grid; gap: calc(var(--u) * .4); }
.record div span { font-family: var(--font-mono); font-size: calc(var(--u) * 1.15); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.record div b { font-size: calc(var(--u) * 1.9); font-weight: 500; }
.approve { display: flex; gap: calc(var(--u) * 1); }
.approve span { border: 1px solid var(--dgray-6); border-radius: var(--r-pill); padding: calc(var(--u) * .7) calc(var(--u) * 1.8); font-size: calc(var(--u) * 1.6); }
.approve span.primary { background: #fff; color: var(--ink); border-color: #fff; font-weight: 500; }
@container stage (orientation: portrait) {
  .track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: calc(var(--u) * 2.4); }
  .track::before, .track .fill { display: none; }
  .node .ring { width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); font-size: calc(var(--u) * 1.8); }
  .node .nm { font-size: calc(var(--u) * 1.7); }
  .card h3 { font-size: calc(var(--u) * 4.4); }
  .card .lbl, .panel .clock { font-size: calc(var(--u) * 1.9); }
  .fields, .checks, .bubble { font-size: calc(var(--u) * 2.7); }
  .record { grid-template-columns: 1fr; }
  .record div b { font-size: calc(var(--u) * 2.6); }
  .record div span { font-size: calc(var(--u) * 1.6); }
  .approve span { font-size: calc(var(--u) * 2.4); }
  .panel .clock { top: auto; bottom: calc(var(--u) * 2.2); }
}

/* 04 Ledger */
.ledger .body { display: grid; align-content: center; gap: calc(var(--u) * 2.4); }
.rule { display: flex; gap: calc(var(--u) * 1.4); align-items: center; border: 1px solid var(--dgray-5); border-radius: calc(var(--u) * 1); padding: calc(var(--u) * 1.3) calc(var(--u) * 1.8); font-size: calc(var(--u) * 1.9); }
.rule b { font-family: var(--font-mono); font-weight: 400; font-size: .7em; color: var(--live); letter-spacing: var(--label-track); text-transform: uppercase; white-space: nowrap; }
table.pl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pl th { text-align: right; font-family: var(--font-mono); font-weight: 400; font-size: calc(var(--u) * 1.15); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 0 calc(var(--u) * 1) calc(var(--u) * 1.2); border-bottom: 1px solid var(--dgray-5); }
.pl td { text-align: right; padding: calc(var(--u) * 1.5) calc(var(--u) * 1); border-bottom: 1px solid var(--dgray-4); font-size: calc(var(--u) * 1.95); transition: color .4s, opacity .4s; }
.pl th:first-child, .pl td:first-child { text-align: left; padding-left: 0; }
.pl td:first-child { font-weight: 500; letter-spacing: -0.01em; }
.pl td .sub { display: block; font-family: var(--font-mono); font-weight: 400; font-size: calc(var(--u) * 1.15); color: var(--faint); letter-spacing: .04em; margin-top: .2em; }
.pl td.net { font-weight: 600; }
.pl td.neg { color: var(--soft); }
.st { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: calc(var(--u) * 1.2); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.st i { width: .75em; height: .75em; border-radius: 50%; background: var(--live); }
.st.running i { animation: pulse 1.6s var(--ease) infinite; }
.st.trial i { background: transparent; border: 2px solid var(--live); }
.st.off { color: var(--faint); } .st.off i { background: var(--dgray-7); }
.st.kept { color: var(--done); } .st.kept i { background: var(--done); animation: none; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,90,31,.5); } 60% { box-shadow: 0 0 0 .5em rgba(255,90,31,0); } }
.pl tr.off-row.struck td { color: var(--faint); }
.pl tr.off-row.struck td:first-child { text-decoration: line-through; text-decoration-color: var(--dgray-9); }
.pl tfoot td { border-bottom: 0; padding-top: calc(var(--u) * 2); font-size: calc(var(--u) * 2.2); }
.pl tfoot td.net { color: var(--live); font-size: calc(var(--u) * 3.4); letter-spacing: -0.03em; }
@container stage (orientation: portrait) {
  .rule { font-size: calc(var(--u) * 2.5); }
  .pl .wide-only { display: none; }
  .pl th { font-size: calc(var(--u) * 1.6); }
  .pl td { font-size: calc(var(--u) * 2.6); padding: calc(var(--u) * 1.9) calc(var(--u) * .8); }
  .pl td .sub, .st { font-size: calc(var(--u) * 1.6); }
  .pl tfoot td { font-size: calc(var(--u) * 2.6); }
  .pl tfoot td.net { font-size: calc(var(--u) * 4.4); }
}

/* 05 Build: the staircase */
.build .body { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: calc(var(--u) * 2.4); }
.chart { position: relative; }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart .grid { stroke: var(--dgray-4); stroke-width: 1; }
.chart .zero { stroke: var(--dgray-7); stroke-width: 1; stroke-dasharray: 4 5; }
.chart .line { fill: none; stroke: var(--live); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: url(#fillLive); }
.chart text { font-family: var(--font-mono); fill: var(--faint); }
.chart .gate circle { fill: var(--black); stroke: var(--done); stroke-width: 2; }
.chart .gate path { fill: none; stroke: var(--done); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .gate text { fill: var(--dgray-12); }
.chart .start line { stroke: var(--dgray-7); stroke-width: 1; }
.chart .start text { fill: var(--soft); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); counter-reset: s; }
.steps li { counter-increment: s; border-top: 2px solid var(--dgray-6); padding-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.6); line-height: 1.35; color: var(--soft); }
.steps li::before { content: "0" counter(s); display: block; font-family: var(--font-mono); font-size: calc(var(--u) * 1.15); color: var(--faint); margin-bottom: calc(var(--u) * .6); }
.steps li b { color: #fff; font-weight: 500; }
.steps li.hi { border-top-color: var(--live); }
@container stage (orientation: portrait) {
  .steps { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); }
  .steps li { font-size: calc(var(--u) * 2.3); }
  .steps li::before { font-size: calc(var(--u) * 1.6); }
}

/* 06 Your turn */
.turn .body { display: grid; align-content: center; gap: calc(var(--u) * 3); }
.asks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: a; }
.asks li { counter-increment: a; display: grid; grid-template-columns: calc(var(--u) * 5) 1fr; align-items: baseline; padding: calc(var(--u) * 1.6) 0; border-bottom: 1px solid var(--line); font-size: calc(var(--u) * 2.4); letter-spacing: -0.01em; }
.asks li::before { content: "0" counter(a); font-family: var(--font-mono); font-size: calc(var(--u) * 1.4); color: var(--faint); }
.asks li span { color: var(--faint); font-size: .75em; display: block; margin-top: .25em; }
.asks li div { min-width: 0; }
.summary { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.2); }
.summary span { border: 1px solid var(--dgray-5); border-radius: var(--r-pill); padding: calc(var(--u) * .7) calc(var(--u) * 1.6); font-size: calc(var(--u) * 1.5); color: var(--soft); }
.summary span b { color: #fff; font-weight: 500; }
.cta { justify-self: start; background: #fff; color: var(--ink); border: 0; border-radius: var(--r-pill); padding: calc(var(--u) * 1.4) calc(var(--u) * 2.8); font-size: calc(var(--u) * 1.9); font-weight: 500; cursor: pointer; }
@container stage (orientation: portrait) {
  .asks li { font-size: calc(var(--u) * 3.2); grid-template-columns: calc(var(--u) * 7) 1fr; }
  .asks li::before { font-size: calc(var(--u) * 2); }
  .summary span { font-size: calc(var(--u) * 2.1); }
  .cta { font-size: calc(var(--u) * 2.8); }
}

/* Controls (outside the stage, never recorded in film mode) */
.controls { position: fixed; right: 16px; bottom: 16px; display: flex; gap: 6px; align-items: center; padding: 6px; background: rgba(20,20,20,.86); border: 1px solid #2a2a2a; border-radius: 999px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 10; transition: opacity .3s; font-size: 13px; }
.controls button { background: transparent; border: 0; color: #ddd; padding: 7px 12px; border-radius: 999px; cursor: pointer; min-width: 34px; }
.controls button:hover { background: #2a2a2a; color: #fff; }
.controls button:focus-visible, .btn:focus-visible, .cta:focus-visible { outline: 2px solid var(--act-dark); outline-offset: 2px; }
.controls .sep { width: 1px; height: 18px; background: #333; }
body.film .controls { opacity: 0; pointer-events: none; }
body.film .stage { cursor: none; }
/* hbunn.io copy: on a touch screen every control is at least 44 px, and the
   recording-frame and keyboard-keys buttons (no use without a keyboard) are hidden. */
@media (pointer: coarse) {
  .controls button { min-height: 44px; min-width: 44px; }
  .controls [data-act="frame"], .controls [data-act="keys"] { display: none; }
  .edit td.x button, .btn { min-height: 44px; min-width: 44px; }
  .edit input, .rate input { min-height: 44px; font-size: 16px; }
}

.sheet { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 20; padding: 16px; }
.sheet[hidden] { display: none; }
.sheet-card { background: #111; border: 1px solid #2a2a2a; border-radius: 18px; padding: 24px; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; color: #eee; font-size: 14px; }
.sheet-card.wide { width: min(980px, 100%); display: grid; gap: 16px; }
.sheet-card h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.02em; font-weight: 600; }
.fine { color: #9a9a9a; font-size: 13px; margin: 0; font-weight: 400; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 16px 0; }
.keys dt { font-family: var(--font-mono); color: #fff; }
.keys dd { margin: 0; color: #bbb; }
.btn { background: #fff; color: #0a0a0a; border: 0; border-radius: 999px; padding: 9px 16px; font-weight: 500; cursor: pointer; font-size: 14px; }
.btn.ghost { background: transparent; color: #eee; border: 1px solid #3a3a3a; }
.sheet-head { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.rate { display: grid; gap: 6px; color: #bbb; font-size: 13px; }
.money { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #3a3a3a; border-radius: 10px; padding: 0 10px; background: #0a0a0a; }
.money b { font-weight: 400; color: #888; }
.money input { background: transparent; border: 0; width: 80px; padding: 8px 0; outline: none; }
.table-wrap { overflow: auto; border: 1px solid #2a2a2a; border-radius: 12px; }
table.edit { width: 100%; border-collapse: collapse; }
.edit th { text-align: left; font-weight: 500; font-size: 12px; color: #aaa; padding: 10px; border-bottom: 1px solid #2a2a2a; vertical-align: bottom; }
.edit th .fine { display: block; font-size: 11px; }
.edit td { padding: 4px 6px; border-bottom: 1px solid #1f1f1f; }
.edit input { width: 100%; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 8px; outline: none; }
.edit input:focus { border-color: var(--act-dark); background: #0a0a0a; }
.edit input[type=number] { width: 90px; }
.edit td.x button { background: transparent; border: 0; color: #888; cursor: pointer; padding: 6px 10px; border-radius: 8px; }
.edit td.x button:hover { color: #fff; background: #222; }
.sheet-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-at], .scene, .card, .tile > div, .track .fill { transition: none !important; }
  .st.running i, .caret::after { animation: none; }
}