/* TOROSO — light futuristic studio. Pearl base, graphite ink, vermilion (TORO) and teal (OSO) as the only accents. */
:root {
  --bg: #F2F3F0;
  --bg-2: #E9EBE7;
  --ink: #14161A;
  --ink-2: rgba(20, 22, 26, .66);
  --ink-3: rgba(20, 22, 26, .44);
  --line: rgba(20, 22, 26, .12);
  --line-2: rgba(20, 22, 26, .2);
  --panel: rgba(250, 251, 249, .72);
  --toro: #E4572E;
  --toro-ink: #C1401B;
  --toro-soft: rgba(228, 87, 46, .1);
  --oso: #1F6F6B;
  --oso-soft: rgba(31, 111, 107, .1);
  --bad: #B3261E;
  --display: "Saira", "Public Sans", system-ui, sans-serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --top-h: 52px;
  --tape-h: 30px;
  --gut: clamp(16px, 2.2vw, 32px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 6px; }
.skip:focus { left: 8px; }
.k { font: 500 10.5px/1 var(--display); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 10px; }
.link { font: 500 10.5px/1 var(--display); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--line-2); padding: 2px 0; }
.link:hover { color: var(--ink); border-color: var(--ink); }
.mono { font-family: var(--mono); }

/* faint grid, masked toward the centre */
.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center center; opacity: .45;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 48%, #000 20%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 48%, #000 20%, transparent 85%);
}

/* ---------- top bar ---------- */
.top {
  position: relative; z-index: 5; height: var(--top-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gut); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 15px/1 var(--display); font-stretch: 118%; letter-spacing: .2em; }
.brand img { border-radius: 50%; }
.top__mid { display: flex; align-items: center; gap: 12px; justify-content: center; }
.launch, .air {
  display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 99px;
  font: 500 11px/1 var(--display); font-stretch: 108%; letter-spacing: .08em; color: var(--ink-2); white-space: nowrap;
}
.air { border-color: var(--toro); color: var(--toro-ink); letter-spacing: .16em; }
.air i { width: 7px; height: 7px; border-radius: 50%; background: var(--toro); animation: blink 1.1s steps(2, jump-none) infinite; }
.air.is-replay { border-color: var(--line-2); color: var(--ink-2); }
.air.is-replay i { background: var(--ink-3); animation: none; }
@keyframes blink { 50% { opacity: .15; } }
.top__right { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.ca { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px 0 12px; border: 1px dashed var(--line-2); border-radius: 99px; font: 400 11.5px/1 var(--mono); color: var(--ink-2); }
.ca__k { font: 600 10px/1 var(--display); letter-spacing: .14em; color: var(--ink-3); }
.ca__sym { font: 600 11px/1 var(--display); letter-spacing: .08em; color: var(--ink); }
.ca__copy { height: 22px; padding: 0 10px; border-radius: 99px; background: var(--bg-2); font: 500 10px/1 var(--display); font-stretch: 108%; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ca.is-set { border-style: solid; color: var(--ink); }
.ca.is-set .ca__copy { background: var(--ink); color: var(--bg); }
.ca__copy:disabled { cursor: default; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 99px; text-decoration: none; white-space: nowrap; font: 600 11px/1 var(--display); font-stretch: 110%; letter-spacing: .12em; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.btn--buy { border: 1px solid var(--ink); background: var(--ink); color: var(--bg); }
.btn--buy[aria-disabled="true"] { background: transparent; border-color: var(--line-2); color: var(--ink-3); cursor: not-allowed; }
.btn--line { border: 1px solid var(--line-2); color: var(--ink); background: var(--panel); }
.btn--line:hover { border-color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.btn--ink:hover { background: #000; }
.btn--toro { background: var(--toro); color: #fff; border: 1px solid var(--toro); }
.btn--oso { background: var(--oso); color: #fff; border: 1px solid var(--oso); }
.toplink { font: 500 11px/1 var(--display); font-stretch: 110%; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid transparent; }
.toplink:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- ticker tape ---------- */
.tape { position: relative; z-index: 5; height: var(--tape-h); overflow: hidden; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tape__track { display: flex; width: max-content; height: 100%; align-items: center; gap: 0; animation: tape var(--tape-dur, 60s) linear infinite; }
.tape:hover .tape__track { animation-play-state: paused; }
.tape__item { display: inline-flex; align-items: baseline; gap: 8px; padding: 0 22px; font: 400 12px/1 var(--sans); color: var(--ink-2); border-right: 1px solid var(--line); white-space: nowrap; }
.tape__item b { font: 600 11.5px/1 var(--display); font-stretch: 110%; letter-spacing: .1em; color: var(--ink); }
.tape__item .up { color: var(--oso); } .tape__item .dn { color: var(--toro-ink); }
.tape__item .rc { font: 500 9px/1 var(--display); letter-spacing: .12em; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 3px; padding: 2px 4px; }
.tape__item--muted { color: var(--ink-3); }
.tape__asof { color: var(--ink-3); font-size: 11px; }
@keyframes tape { to { transform: translateX(-50%); } }

/* ---------- studio layout (desktop: one screen) ---------- */
.studio { position: relative; z-index: 1; }
.stage { position: relative; }
.stage__canvas, .stage__poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.stage__poster { inset: auto; left: 50%; top: var(--hz, 50%); height: calc(var(--band, 300px) * .92); width: auto; max-width: 70%; object-fit: contain; transform: translate(-50%, -50%); }
.horizon { position: absolute; left: 0; right: 0; top: var(--hz, 50%); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(228,87,46,.35) 22%, var(--line-2) 42%, var(--line-2) 58%, rgba(31,111,107,.35) 78%, transparent 100%); }
.horizon i { position: absolute; left: 50%; top: -3px; width: 34%; height: 7px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20,22,26,.18), transparent); filter: blur(2px); }

/* sides (turns) */
.side { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 0; }
.side__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.side--oso .side__head { flex-direction: row-reverse; }
.pill { display: inline-flex; align-items: center; height: 26px; padding: 0 14px; border-radius: 99px; color: #fff; font: 600 13px/1 var(--display); font-stretch: 116%; letter-spacing: .14em; }
.pill--toro { background: var(--toro); } .pill--oso { background: var(--oso); }
.side__role { font: 500 10.5px/1 var(--display); font-stretch: 110%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.clock { margin-left: auto; font: 500 20px/1 var(--display); font-stretch: 90%; letter-spacing: .02em; color: var(--ink-3); min-width: 3.2ch; text-align: right; font-variant-numeric: tabular-nums; }
.side--oso .clock { margin-left: 0; margin-right: auto; text-align: left; }
.side.is-speaking .clock { color: var(--ink); }
.side--toro.is-speaking .pill { box-shadow: 0 0 0 4px var(--toro-soft); }
.side--oso.is-speaking .pill { box-shadow: 0 0 0 4px var(--oso-soft); }
.side__turns { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 4px 8px 0; scrollbar-width: thin; }
.side--oso .side__turns { padding: 14px 0 8px 4px; }
.side__idle { color: var(--ink-3); font-size: 13px; max-width: 30ch; }
.side--oso .side__idle { margin-left: auto; text-align: right; }

.turn { position: relative; padding: 0 0 16px; margin-bottom: 14px; border-bottom: 1px solid var(--line); animation: rise .5s var(--ease) both; }
.turn:last-child { border-bottom: 0; }
.turn__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font: 500 10px/1 var(--display); font-stretch: 110%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.turn__meta .who { color: var(--ink); }
.turn--toro .turn__meta .who { color: var(--toro-ink); } .turn--oso .turn__meta .who { color: var(--oso); }
.fb { display: inline-block; margin-top: 6px; font: 500 9.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--bad); border: 1px solid rgba(179,38,30,.4); border-radius: 3px; padding: 3px 6px; }
.turn__text { font-size: 14px; line-height: 1.58; color: var(--ink); text-wrap: pretty; }
.turn__text .w { opacity: .08; transition: opacity .25s linear; }
.turn__text .w.on { opacity: 1; }
.tag { font: 500 11px/1 var(--mono); padding: 1px 4px; border-radius: 3px; background: var(--bg-2); color: var(--ink-2); vertical-align: 1px; white-space: nowrap; }
.turn--toro .tag.on { background: var(--toro-soft); color: var(--toro-ink); }
.turn--oso .tag.on { background: var(--oso-soft); color: var(--oso); }
.cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--panel); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; transition: border-color .3s, background .3s, box-shadow .3s; }
.chip .tag { background: none; padding: 0; color: var(--ink-3); }
.chip b { font-weight: 600; color: var(--ink); }
.turn--toro .chip.lit { border-color: var(--toro); box-shadow: 0 0 0 3px var(--toro-soft); }
.turn--oso .chip.lit { border-color: var(--oso); box-shadow: 0 0 0 3px var(--oso-soft); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* centre column */
.center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.ask { width: min(560px, 100%); }
.ask__label { display: block; text-align: center; margin-bottom: 12px; font: 300 clamp(26px, 2.6vw, 38px)/1 var(--display); font-stretch: 112%; letter-spacing: .01em; }
.ask__row { display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 5px 0 20px; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(255,255,255,.78); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 30px -18px rgba(20,22,26,.25); transition: border-color .2s, box-shadow .2s; }
.ask__row:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(20,22,26,.06), 0 10px 30px -18px rgba(20,22,26,.25); }
.ask__row input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 400 16px/1 var(--sans); color: var(--ink); }
.ask__row input::placeholder { color: var(--ink-3); }
.btn--go { height: 40px; padding: 0 18px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.btn--go:hover { background: #000; }
.btn--go:disabled { opacity: .5; cursor: progress; }
.ask__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; padding: 0 14px; font-size: 11.5px; color: var(--ink-3); }
.ask__right { display: inline-flex; align-items: center; gap: 14px; }
.ask.is-shake .ask__row { animation: shake .35s; border-color: var(--bad); }
@keyframes shake { 25% { transform: translateX(4px); } 50% { transform: translateX(-3px); } 75% { transform: translateX(2px); } }
.examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; max-width: 680px; }
.examples button, .opt { height: 28px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--panel); font: 400 12.5px/1 var(--sans); color: var(--ink-2); transition: border-color .2s, color .2s, background .2s; }
.examples button:hover, .opt:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
.status { min-height: 18px; margin-top: 10px; font: 500 10.5px/1.4 var(--display); font-stretch: 110%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.status b { color: var(--ink); font-weight: 600; }
.status .dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* data pack */
.pack { width: min(640px, 100%); margin-top: 8px; }
.pack__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.pack__items { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.pk { display: inline-flex; align-items: baseline; gap: 4px; height: 21px; padding: 0 6px; line-height: 19px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); font-size: 11px; color: var(--ink-2); white-space: nowrap; transition: border-color .3s, background .3s, color .3s; cursor: default; }
.pk .tag { background: none; padding: 0; font-size: 10px; color: var(--ink-3); }
.pk b { font-weight: 600; color: var(--ink); }
.pk.by-toro { border-color: rgba(228,87,46,.55); }
.pk.by-oso { border-color: rgba(31,111,107,.55); }
.pk.by-toro.by-oso { border-color: var(--ink-3); }
.pk.flash { background: #fff; color: var(--ink); }
.stale { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 99px; background: rgba(179,38,30,.08); color: var(--bad); font: 600 10px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }

/* notices (errors, offline) */
.notice { width: min(560px, 100%); margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255,255,255,.82); text-align: left; animation: rise .4s var(--ease) both; }
.notice h3 { font: 600 15px/1.2 var(--display); font-stretch: 104%; letter-spacing: .02em; margin-bottom: 4px; }
.notice p { color: var(--ink-2); font-size: 13px; }
.notice .row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.notice--slim { padding: 6px 14px; border-radius: 99px; font-size: 12px; color: var(--ink-2); text-align: center; width: auto; max-width: 640px; }
.notice--slim b { color: var(--bad); font: 600 10.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.notice--bad { border-color: rgba(179,38,30,.35); }
.notice--bad h3 { color: var(--bad); }
.notice .supported { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.notice .supported span { font: 500 10.5px/1 var(--display); letter-spacing: .08em; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-2); }

/* scoreboard */
.board { width: min(660px, 100%); margin-top: auto; padding: 12px 20px 12px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(255,255,255,.8); text-align: center; position: relative; }
.board__idle { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--ink-2); }
.board.is-idle { padding: 10px 16px; background: rgba(255,255,255,.6); }
.board__k { font: 500 10.5px/1 var(--display); font-stretch: 112%; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.board__law { font: 500 12px/1.3 var(--sans); color: var(--ink); }
.board__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.board__verdict { font: 600 clamp(22px, 2.2vw, 30px)/1.05 var(--display); font-stretch: 100%; letter-spacing: .01em; }
.board.v-toro .board__verdict { color: var(--toro-ink); }
.board.v-oso .board__verdict { color: var(--oso); }
.board.v-toro { border-color: rgba(228,87,46,.5); box-shadow: 0 0 0 4px var(--toro-soft); }
.board.v-oso { border-color: rgba(31,111,107,.5); box-shadow: 0 0 0 4px var(--oso-soft); }
.board__stats { display: flex; justify-content: center; gap: 0; margin: 8px 0 6px; }
.stat { padding: 0 16px; border-left: 1px solid var(--line); text-align: center; }
.stat:first-child { border-left: 0; }
.stat b { display: block; font: 500 24px/1 var(--display); font-stretch: 92%; letter-spacing: .01em; }
.stat span { display: block; margin-top: 4px; font: 500 9.5px/1.2 var(--display); font-stretch: 110%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.board__line { font-size: 12px; color: var(--ink-2); }
.board__law2 { font-size: 12px; font-weight: 600; margin-top: 2px; }
.board__note { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.board__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.board__actions .btn { height: 28px; padding: 0 12px; font-size: 10.5px; }
.board.is-wait .board__verdict { color: var(--ink-3); }

/* base band */
.base { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.15fr; padding: 0 calc(var(--gut) - 20px); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); }
.base__col { padding: 10px 20px 8px; border-left: 1px solid var(--line); min-width: 0; }
.base__col:first-child { border-left: 0; }
.base .k { margin-bottom: 8px; justify-content: space-between; }
.feed { display: grid; grid-template-columns: 1fr; gap: 0; max-height: 96px; overflow-y: auto; scrollbar-width: thin; }
.feed li { min-width: 0; }
.feed a { display: flex; align-items: center; gap: 8px; height: 24px; text-decoration: none; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.feed a:hover { color: var(--ink); }
.feed .q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed .v { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.feed .v.toro { background: var(--toro); } .feed .v.oso { background: var(--oso); } .feed .v.even { background: transparent; border: 1px solid var(--ink-2); }
.feed .n { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.feed .lbl { font: 600 9px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 3px; padding: 2px 4px; }
.feed__empty { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-2); padding: 4px 0; }
.feed__empty button { border-bottom: 1px solid var(--ink-3); }
.how li { display: flex; gap: 10px; font-size: 12px; line-height: 1.4; color: var(--ink-2); padding: 1px 0 3px; }
.how b { font: 500 11px/1.5 var(--display); color: var(--ink-3); }
.src div { display: flex; gap: 10px; font-size: 12px; line-height: 1.4; padding: 1px 0 3px; }
.src dt { width: 58px; flex: none; color: var(--ink-3); font: 500 9.5px/1.7 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.src dd { color: var(--ink-2); min-width: 0; }
.src .stale { height: 16px; font-size: 9px; }
.curl { font: 400 11px/1.55 var(--mono); color: var(--ink-2); white-space: pre-wrap; word-break: break-all; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.6); }
.hold { margin-top: 8px; font-size: 11.5px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.foot { position: relative; z-index: 2; padding: 8px var(--gut) 10px; border-top: 1px solid var(--line); font-size: 10.5px; line-height: 1.5; color: var(--ink-3); }
.foot__lines { color: var(--ink-2); margin-bottom: 2px; }
.foot__lines span + span::before { content: "·"; margin: 0 6px; color: var(--ink-3); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; padding: 9px 14px; border-radius: 99px; background: var(--ink); color: var(--bg); font: 500 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; animation: rise .3s var(--ease) both; }

/* ---------- desktop: one screen, no page scroll ---------- */
@media (min-width: 1024px) {
  html, body { height: 100%; }
  body { display: grid; grid-template-rows: var(--top-h) var(--tape-h) minmax(0, 1fr); height: 100dvh; min-height: 640px; overflow: hidden; }
  .studio { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; }
  .stage { display: grid; grid-template-columns: minmax(270px, 24vw) minmax(0, 1fr) minmax(270px, 24vw); gap: 24px; padding: 18px var(--gut) 16px; min-height: 0; }
  .turns-m { display: none; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .base { grid-template-columns: 1.35fr 1fr 1fr 1.25fr; }
  .base__col { padding-top: 9px; padding-bottom: 8px; }
  .how li, .src div { padding-bottom: 2px; }
  .feed { max-height: 72px; }
  .foot__disc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ask__label { display: none; }
  .stat b { font-size: 22px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .stage { grid-template-columns: 228px minmax(0, 1fr) 228px; gap: 18px; }
  .turn__text { font-size: 13px; }
  .stat { padding: 0 10px; }
  .base { grid-template-columns: 1.4fr 1fr 1fr; }
  .base__col--curl { display: none; }
  .top__right { gap: 10px; }
  .ca__v { display: none; }
}

/* ---------- mobile / tablet: stacked, page scrolls ---------- */
@media (max-width: 1023px) {
  .top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; height: auto; min-height: var(--top-h); padding-top: 10px; padding-bottom: 10px; }
  .top::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .top__right { display: contents; }
  .brand { order: 1; }
  .toplink { order: 2; padding: 6px 4px; }
  .toplink[data-x] { margin-left: auto; }
  .top__mid { order: 4; }
  .btn--buy { order: 5; }
  .ca { order: 6; min-width: 0; }
  .ca__v { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stage { display: flex; flex-direction: column; padding: 18px var(--gut) 0; }
  .center { display: contents; }
  .side { display: none; }
  .ask { order: 1; margin: 0 auto; }
  .examples { order: 2; margin-left: auto; margin-right: auto; }
  .stage__poster { position: relative; order: 3; left: auto; top: auto; transform: none; width: 100%; height: auto; margin: 16px 0 8px; }
  .stage__canvas { position: relative; inset: auto; order: 3; height: clamp(190px, 52vw, 380px); margin: 6px calc(var(--gut) * -1) 0; width: calc(100% + var(--gut) * 2);
    background: linear-gradient(90deg, transparent, rgba(228,87,46,.4) 20%, var(--line-2) 45%, var(--line-2) 55%, rgba(31,111,107,.4) 80%, transparent) center 50% / 100% 1px no-repeat; }
  .horizon { display: none; }
  .status { order: 4; margin-top: 0; }
  .pack { order: 5; margin-left: auto; margin-right: auto; }
  .notice { order: 6; margin-left: auto; margin-right: auto; }
  .turns-m { order: 7; width: 100%; max-width: 640px; margin: 12px auto 0; }
  /* in flow, never sticky: it must not cover the trade box or the turns at any width */
  .board { order: 8; position: relative; z-index: 2; margin: 14px auto 12px; padding: 10px 14px; background: rgba(255,255,255,.94); }
  .turns-m .turn { padding: 12px 0 14px; }
  .turns-m .turn__meta .pill { height: 20px; padding: 0 9px; font-size: 11px; }
  .base { grid-template-columns: 1fr 1fr; margin-top: 18px; }
  .base__col { border-top: 1px solid var(--line); }
  .base__col:nth-child(odd) { border-left: 0; }
  .base__col--feed, .base__col--curl { grid-column: 1 / -1; border-left: 0; }
  .feed { max-height: none; grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .brand span { letter-spacing: .14em; }
  .ask__label { font-size: 22px; }
  .ask__row { height: 48px; padding-left: 14px; }
  .btn--go { padding: 0 12px; }
  .btn--go span { font-size: 10.5px; }
  .ask__meta > span:first-child { display: none; }
  .ask__meta { justify-content: flex-end; }
  .base { grid-template-columns: 1fr; }
  .base__col { border-left: 0; }
  .stat { padding: 0 9px; }
  .stat b { font-size: 21px; }
  .stat span { font-size: 8.5px; letter-spacing: .1em; }
  .board__verdict { font-size: 21px; }
  .board.is-compact .board__line, .board.is-compact .board__note { display: none; }
  .foot__lines span { display: block; }
  .foot__lines span + span::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .tape__track { animation: none; transform: none; }
  .tape { overflow-x: auto; }
}

@media (min-width: 1024px) {
  .studio.is-bout .ask__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .studio.is-bout .ask { margin-top: 4px; }
  .pack { width: min(720px, 100%); }
}

@media (min-width: 1024px) and (max-height: 820px) {
  .stage { padding-top: 12px; padding-bottom: 10px; }
  .pack__items { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
  .board { padding: 10px 16px; }
  .board__stats { margin: 6px 0 4px; }
  .board__note--w { display: none; }
  .board__actions { margin-top: 6px; }
  .examples { margin-top: 8px; }
  .status { margin-top: 6px; }
}
/* very short laptop screens: keep the studio intact and let the page scroll instead of crushing it */
@media (min-width: 1024px) and (max-height: 779px) {
  body { display: block; height: auto; overflow: visible; }
  .studio { display: block; }
  .stage { min-height: 640px; height: calc(100dvh - var(--top-h) - var(--tape-h)); }
}

@media (min-width: 1024px) {
  /* once the referee has spoken, the offline note is already on every fallback turn: give the band back to the heads */
  .studio.has-verdict .notice--slim { display: none !important; }
}