/*
 * The arcade's two chromeless pages: the screen (/play/<id>) and the phone
 * (/join/<code>). Same night, same cream, same accent as the site and the
 * same card colours as the tabletop runtime (#0b0a0e, #17151d, #f4f2f7), so
 * a card landing in the frame belongs to the page around it.
 */
:root {
  --void: #0b0a0e; --card: #17151d; --edge: #2a2732; --ink: #f4f2f7; --dim: #9d97ab; --lamp: #3ee0c8; --cream: #f4efe6;
  --font: "Bricolage Grotesque", ui-rounded, "SF Pro Display", system-ui, sans-serif;
}
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--void); color: var(--ink); font: 400 17px/1.45 var(--font); overscroll-behavior: none; }
h1 { margin: 0 0 .5rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; }
p { margin: 0 0 .6rem; }
.kicker { margin: 0 0 .5rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.keys { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.key, .key-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1.2rem; border-radius: 999px; font-weight: 700; text-decoration: none; }
.key { background: var(--cream); color: #14121a; border: 0; }
.key-ghost { color: var(--ink); border: 1px solid rgba(244, 239, 230, .28); }
.key:active, .key-ghost:active { transform: scale(.975); }

/* ---------------------------------------------------------------- screen */
.screen { position: fixed; inset: 0; display: grid; }
.screen .game { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--void); }
.screen .game[hidden] { display: none; }
/* Before the table opens: the art and the title, the state under it. Stays until the game paints. */
.opening { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; text-align: center; }
.opening .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: saturate(.8); }
.opening-words { position: relative; max-width: 40rem; }
.opening h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); }
.opening .line { color: var(--dim); font-size: 1.1rem; }
.opening .state { color: var(--lamp); }
.screen[data-state="playing"] .opening { display: none; }
/*
 * THE DOOR, IN TWO SIZES AND ONE ELEMENT.
 *
 * It is fixed, it is above the game, and it never folds into a wrapping row
 * — the television lost this exact element that way when the room filled up,
 * and the stylesheet's comment at the time claimed the wrap protected it.
 * The tabletop stage draws its people along the bottom and its title
 * top-left, so this corner is the one a game uses least.
 *
 * `big` is the state a table opens in: nobody has joined, there is nothing
 * on the screen worth covering, and the one thing a room of strangers needs
 * is a code they can read from a sofa and a symbol a camera can find across
 * it. `corner` is every moment after the first phone sits down. The change
 * is a class on <main>, not a second element, so there is exactly one door
 * in this document and it cannot be lost by one state forgetting the other.
 */
.door { position: fixed; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 18px;
  background: rgba(11, 10, 14, .82); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.door[hidden] { display: none; }
.door-qr-box { display: grid; place-items: center; padding: 6px; border-radius: 12px; background: #fff; }
.door-qr { display: block; }
.door-words { display: grid; gap: 2px; min-width: 0; }
.door-line { margin: 0; font-size: .78rem; color: var(--dim); }
.door-what { display: none; }
.door-url { margin: 0; font-size: .92rem; }
.door-url b { font-weight: 650; }
.door-code { margin: 2px 0 0; font: 700 2rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .22em; color: var(--lamp); }
.door-seats { margin: 2px 0 0; font-size: .8rem; color: var(--dim); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Who is in: a chip in that phone's own colour, so somebody on the far side
   of the room can see themselves arrive. One press is the whole of "am I
   in?" and a name in a list answers it worse than this does. */
.door-people { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; max-width: 22rem; }
.door-people:empty { display: none; }
.door-person { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border-radius: 999px; font-size: .9rem; font-weight: 650;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  animation: sat-down .42s cubic-bezier(.2, 1.3, .5, 1) both; }
.door-person::before { content: ''; flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--c, var(--dim)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c, #888) 28%, transparent); }
@keyframes sat-down { from { opacity: 0; transform: translateY(10px) scale(.86); } to { opacity: 1; transform: none; } }

/* ---- big: the way in IS the screen */
.screen[data-door="big"] .door { inset: 0; display: grid; place-content: center; justify-items: center; gap: 20px; grid-auto-flow: row;
  padding: 6vmin; border: 0; border-radius: 0; background: rgba(6, 6, 10, .78); }
.screen[data-door="big"] .door-words { justify-items: center; text-align: center; gap: 4px; }
.screen[data-door="big"] .door-what { display: block; margin: 0 0 .4rem; font-size: clamp(1.4rem, 4vmin, 2.4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; max-width: 22ch; }
.screen[data-door="big"] .door-line { font-size: clamp(1rem, 2.4vmin, 1.3rem); color: var(--ink); }
.screen[data-door="big"] .door-url { font-size: clamp(1.1rem, 2.8vmin, 1.5rem); color: var(--dim); }
.screen[data-door="big"] .door-code { margin-top: 8px; font-size: clamp(3.4rem, 13vmin, 8rem); letter-spacing: .16em; text-indent: .16em; }
.screen[data-door="big"] .door-seats { margin-top: 10px; font-size: clamp(.95rem, 2.2vmin, 1.2rem); max-width: none; }
.screen[data-door="big"] .door-people { justify-content: center; max-width: min(90vw, 44rem); }

/* ---- corner: the game has the screen, the door keeps one fixed size */
.screen[data-door="corner"] .door { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); left: auto; bottom: auto; }
@media (max-width: 40em) {
  .screen[data-door="corner"] .door { gap: 10px; padding: 8px 10px 8px 8px; }
  .screen[data-door="corner"] .door-qr-box { padding: 4px; }
  .screen[data-door="corner"] .door-code { font-size: 1.5rem; }
  .screen[data-door="corner"] .door-seats { max-width: 10rem; }
  .screen[data-door="corner"] .door-people { display: none; }
}

/*
 * ---- the door that was never true: a game whose manifest says phones and
 * whose build never knocked on the bridge (/arcade/web-pad.js). The code is
 * taken down and this takes its place, in the corner, quiet, out of the
 * game's way — it is a fact about the build, not an apology, and the game is
 * playing underneath it.
 */
.keyboard { position: fixed; z-index: 10; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  display: grid; gap: 3px; justify-items: end; padding: 10px 14px; border-radius: 16px; text-align: right;
  background: rgba(11, 10, 14, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .12); }
.keyboard[hidden] { display: none; }
.keyboard-line { margin: 0; font-size: .92rem; font-weight: 650; }
.keyboard-sub { margin: 0; font-size: .78rem; color: var(--dim); }
.keyboard .key-ghost { margin-top: 6px; font-size: .8rem; padding: 6px 12px; }

/* A game that needs a Homie: one honest paragraph. */
.needs { position: relative; min-height: 100svh; display: grid; align-content: end; padding: 2rem max(1.25rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); }
.needs .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; mask-image: linear-gradient(to bottom, #000 40%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); }
.needs-words { position: relative; max-width: 36rem; }
.needs h1 { font-size: clamp(2rem, 6vw, 3.6rem); }

/* ----------------------------------------------------------------- phone */
.phone { min-height: 100svh; display: grid; grid-template-rows: auto 1fr; }
/* The top 64pt belong to the page: the card's own layout starts below them (homie.js, "THE TOP 64 PT BELONG TO HOMIE"). */
.phone-top { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 0; pointer-events: none; }
.phone-who { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 650; font-size: .95rem;
  background: rgba(11, 10, 14, .8); border: 1px solid rgba(255, 255, 255, .12); pointer-events: auto; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-who::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--dim)); flex: none; }
.phone-leave { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .9rem;
  background: rgba(11, 10, 14, .8); border: 1px solid rgba(255, 255, 255, .12); pointer-events: auto; }
/* THE WAY IN, UNDER A THUMB. The block sits in the middle of the screen and
   the one key is the last thing above the safe area — a phone typing a name
   has a keyboard over the bottom third, and a Sit down key floating under a
   half-empty screen is a key somebody reaches up for. The page also wears
   the colour being chosen, from the top. */
.name, .gone { grid-row: 2; display: grid; align-content: center; gap: .4rem; min-height: 100svh;
  padding: calc(84px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in oklab, var(--me, var(--lamp)) 22%, transparent), transparent 70%); }
.name h1, .gone h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
.sit { display: grid; gap: 16px; margin-top: 1rem; }
.sit input:focus { border-bottom-color: var(--me, var(--lamp)); }
.sit input { width: 100%; padding: 18px; border: 1px solid var(--edge); border-bottom: 3px solid var(--lamp); border-radius: 16px 16px 6px 6px;
  background: #100e15; color: var(--ink); font: 500 22px/1.3 var(--font); outline: none; }
.sit input:focus { background: #141119; }
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.swatch { aspect-ratio: 1; min-height: 44px; border-radius: 50%; border: 3px solid transparent; background: var(--c); cursor: pointer; }
.swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--void), 0 0 0 5px var(--c); transform: scale(1.06); }
.swatch { transition: transform .18s cubic-bezier(.2, 1.3, .5, 1); }
.key-big { width: 100%; min-height: 64px; font-size: 1.3rem; border-radius: 20px; }

/* ------------------------------------------------------------ the typed door
   /join with no code on it (arcade.mjs, joinDoor). It borrows `.name` and
   `.sit` wholesale, because it IS the same moment as the one after it — a
   phone, one field, one key — and a second layout for the step before sitting
   down would be a different-looking door to the same room.

   The field is the code's own shape: four capitals, spaced, centred, in the
   size the television is showing them at. A person is copying a thing they
   can see across a room, and a 22px left-aligned text box is not what they
   are looking at. `text-transform` is decoration only — door.js rewrites the
   value itself, and a browser with nothing running still sends what was
   typed, which the worker uppercases before it reads it.
   --------------------------------------------------------------------- */
.door-say { margin: 0; color: var(--dim); }
.door-field { text-align: center; text-transform: uppercase; letter-spacing: .5em; text-indent: .5em; }
.door-form .door-field { font: 700 clamp(2rem, 14vw, 2.8rem)/1.2 var(--font); padding: 16px 12px; }
.door-form .door-field::placeholder { color: color-mix(in oklab, var(--dim) 45%, transparent); letter-spacing: .5em; }
/* One line, in the one colour on this page that is not calm. It sits BELOW
   the field and above the key, so the thing being corrected never moves when
   it appears — only the key does, and a key that moves down to make room for
   the reason is the right one to move. */
.door-bad { margin: -8px 0 0; min-height: 1.2em; color: #ff9d8a; font-size: .95rem; }
.door-bad[hidden] { display: none; }
.door-none { margin: 1.1rem 0 0; color: var(--dim); font-size: .95rem; }
.door-none a { color: var(--ink); }
.seat { grid-row: 2; position: relative; min-height: 100svh; }
.seat .card { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--void); }
.seat .card[hidden] { display: none; }
/* The arrival. The phone's own colour, from the top, under its own name —
   the same colour that just landed as a chip on the television. */
.waiting { position: relative; display: grid; align-content: center; gap: .2rem; min-height: 100svh;
  padding: calc(84px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in oklab, var(--me, var(--lamp)) 34%, transparent), transparent 70%); }
.waiting-seat { margin: 0; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in oklab, var(--me, var(--lamp)) 80%, var(--ink)); }
.waiting h1 { font-size: clamp(2.4rem, 12vw, 3.4rem); letter-spacing: -.03em; }
.waiting-dot { color: var(--me, var(--lamp)); }
.waiting-name { margin: .1rem 0 1rem; font-size: clamp(1.4rem, 7vw, 2rem); font-weight: 650; letter-spacing: -.02em; color: var(--me, var(--ink)); overflow-wrap: anywhere; }
.waiting p { color: var(--dim); font-size: 1.05rem; }
.waiting[hidden] { display: none; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ========================================================================== */
/* THE SCREEN, WHEN THE SCREEN IS A PHONE                                     */
/* ========================================================================== */
/*
 * A controller drawn OVER a game, not beside it. There is one screen on a
 * phone and a driving game wants all of it, so the card the game composed is a
 * layer on top rather than a band underneath.
 *
 * `mix-blend-mode: screen` is what makes it a layer instead of a lid, and it
 * is chosen rather than `opacity` for a reason worth the line: opacity fades
 * the WHOLE card — the near-black it is drawn on included — so the game comes
 * through at 30% and everything looks like fog. `screen` blending is
 * `1-(1-a)(1-b)`: a black pixel in the card contributes NOTHING and the game
 * under it is untouched, while the stick, the buttons and the speed — which
 * are light on dark, because that is how a control scheme composes a card for
 * a phone — stay exactly as bright as they were drawn. The controller floats;
 * the game does not dim.
 *
 * It WAS honest about one failure mode and blind to the one that shipped. The
 * comment used to say: a card composed LIGHT blends to white, but every card
 * is dark, so this is safe. It reasoned about the card and never about the
 * GAME UNDER IT — and `screen` is 1-(1-a)(1-b), so a dark card over a BRIGHT
 * game blends to white just as completely.
 *
 * MEASURED on the live site, 2026-09-12, Kart Royale in landscape thirty
 * seconds into a race: whole-frame luminance 150/255 against Crush Boat's 68,
 * and the Drift button on the card reading mean luminance 234 with white text
 * on it — a contrast ratio of about 1.2:1. The stick, Drift, Item and Rear
 * view were all simply not there. Ryan: *"kart royale isnt even playable
 * currently on the mobile web"*. He was right, and this line was why.
 *
 * THE FIX IS A FLOOR UNDER THE BLEND, not the end of it. A veil between the
 * game and the card gives `screen` a dark base to work against wherever the
 * game is bright, and costs a dim game almost nothing because it is already
 * dark there. The controller stays see-through — which is the whole point of
 * this layer on a phone, where the game needs the entire screen — and it stays
 * legible on a game lit like noon.
 */
.screen[data-pad="on"]::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: rgb(6 6 10 / .34);
}
.screen .pad { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4;
  background: transparent; mix-blend-mode: screen; }
.screen .pad[hidden] { display: none; }
/* A phone is the only shape this layer is for. On a laptop the card belongs on
   a phone, and a controller blended over a game nobody is holding the laptop
   to play would be a picture of a feature rather than one. */
.screen:not([data-hand="phone"]) .pad { display: none; }

/* One key, and it is over the controller because the controller is the whole
   screen. Top centre, clear of both thumbs: a stick lives bottom-left and the
   buttons bottom-right in every scheme @homie/arcade composes. */
/* ==========================================================================
   THE WAY OUT. Top left, above everything including the controller, on every
   screen size, in every state. It is small and quiet — it is not competing
   with the game — but it is never hidden, because the states where a person
   wants it are exactly the states where everything else has gone away.
   ========================================================================== */
.way-out {
  position: fixed; z-index: 40;
  top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 999px; color: var(--cream); text-decoration: none;
  background: rgba(11, 10, 14, .62);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.way-out:active { transform: scale(.94); }
/* While the opening card is still up the game has not taken the screen and
   the page's own words carry the way back, so it would be a second one. */
.screen[data-state="opening"] .way-out { display: none; }

.solo { position: fixed; z-index: 11; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.solo[hidden] { display: none; }
.solo-friends { pointer-events: auto; min-height: 40px; padding: .4rem 1.1rem; border: 0; border-radius: 999px;
  font: 650 .92rem/1 inherit; color: #14121a; background: var(--cream); box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
.solo-friends:active { transform: scale(.97); }
.solo-friends[hidden] { display: none; }
/* What is actually going out, on the host's own screen — small, and only the
   host sees it. The one person who can tell whether their game went slow
   because of the encoder is the one person holding the encoder. */
.solo-sending { margin: 0; padding: 3px 10px; border-radius: 999px; font-size: .72rem; color: var(--dim);
  background: rgba(11, 10, 14, .72); pointer-events: none; }
.solo-sending[hidden] { display: none; }

/* A sentence, never a gate: a phone locked in portrait cannot obey a
   rotate-your-device wall, and a 3D game plays in either shape. */
.rotate { position: fixed; z-index: 9; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  padding: .5rem 1rem; border-radius: 999px; background: rgba(11, 10, 14, .82); border: 1px solid var(--edge); }
.rotate[hidden] { display: none; }
.rotate p { margin: 0; font-size: .85rem; color: var(--dim); }

/*
 * A NEW VERSION OF THIS WORLD HAS LANDED (docs/ARCADE.md, the living world).
 *
 * Top centre, not bottom: the bottom edge is where the rotate hint and, on a
 * phone, the controller's own thumb rests live, and this line has to be
 * readable by a room looking at a television from a sofa. Fixed and outside the
 * game's frame, at ONE size in every state, for the same reason the door is —
 * whatever the game draws, it cannot draw over the one sentence that explains
 * why the screen just blinked.
 *
 * `position: fixed` rather than a flow element: the page around the game is a
 * full-bleed grid and an announcement that reflowed the frame would make the
 * world jump a second time for a reason that has nothing to do with the world.
 */
.landed { position: fixed; z-index: 10; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%);
  margin: 0; max-width: min(92vw, 40rem); padding: .5rem 1.1rem; border-radius: 999px;
  background: rgba(11, 10, 14, .88); border: 1px solid var(--edge); color: var(--ink);
  font-size: 1rem; line-height: 1.3; text-align: center; text-wrap: balance; }
.landed[hidden] { display: none; }

/* The host's name and the way back, inside the door and only while it is big. */
.door-me, .door-back { display: none; }
.screen[data-hand="phone"][data-door="big"] .door-me { display: flex; gap: 8px; margin-top: 14px; width: min(90vw, 22rem); }
.screen[data-hand="phone"][data-door="big"] .door-me[hidden] { display: none; }
.door-me input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--edge); border-radius: 999px;
  background: #141119; color: var(--ink); font: inherit; font-size: 1rem; }
.door-me .key { min-height: 40px; padding: .4rem 1rem; font-size: .9rem; }
.screen[data-hand="phone"][data-door="big"] .door-back { display: inline-flex; margin-top: 14px; font-size: .85rem; padding: .4rem 1rem; min-height: 40px; }

/* ========================================================================== */
/* THE HOST'S PICTURE, ON A PHONE THAT JOINED                                 */
/* ========================================================================== */
/*
 * The game, from somebody else's phone, under this phone's own controller —
 * the identical arrangement to a phone playing alone, which is deliberate:
 * the two cases differ only in which device drew the frame, so they must not
 * look like two different products.
 *
 * `object-fit: contain` and not `cover`: the host may be holding their phone
 * the other way round from this one, and cropping a racing line off the edge
 * of somebody's screen to avoid two black bars is the wrong trade in a game
 * where the edge is where the corner is.
 */
.seat .stage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--void); z-index: 1; }
.seat .stage[hidden] { display: none; }
.phone[data-seeing="yes"] .card { background: transparent; mix-blend-mode: screen; z-index: 2; }
.phone[data-seeing="yes"] .waiting { display: none; }
.stage-note { position: fixed; z-index: 6; left: 50%; transform: translateX(-50%);
  /*
   * AT THE BOTTOM, NOT THE TOP, AND THE FRAME THAT DECIDED IT IS IN
   * ~/.homie/bench/phone-only/. Centred under the header it landed squarely on
   * the card's own heading — "Kart R____ grid" — and this page does not own
   * that document and cannot move what is under it. The bottom edge is the one
   * band a control scheme leaves alone often enough to borrow, and a sentence
   * somebody reads once is a fair thing to put in a borrowed band.
   */
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 8px); margin: 0; max-width: min(92vw, 26rem); text-align: center;
  padding: .5rem 1rem; border-radius: 16px; font-size: .9rem; line-height: 1.3;
  background: rgba(11, 10, 14, .86); border: 1px solid var(--edge); color: var(--ink); }
.stage-note[hidden] { display: none; }
/* Three states, three colours. "We could not measure it" and "we measured it
   and it was fine" must never render the same. */
.stage-note[data-kind="showing"] { border-color: color-mix(in oklab, var(--me, var(--lamp)) 60%, var(--edge)); }
.stage-note[data-kind="stalled"] { color: var(--dim); }
.stage-note[data-kind="none"] { color: var(--dim); }