/* GitHub's shape in black and white, written like a staff engineer's blog:
     hairlines, lots of white, one orange. Buttons are small paper tiles
     (Infinite Craft's shape) with a faint grain. Diffs read at a glance:
     orange is what went away, light grey is what came in. */
  :root {
    --bg: #ffffff;
    --canvas: #fafafa;       /* bars, panels */
    --border: #e6e6e6;
    --border-2: #cfcfcf;     /* tile edges, inputs */
    --fg: #0a0a0a;
    --muted: #6b6b6b;
    --faint: #737373;        /* 4.5:1 on white: it's used for text */
    --accent: #e8590c;       /* the one orange */
    --accent-ink: #c2410c;   /* the orange for text: 4.5:1 on white and on accent-soft */
    --accent-soft: #fff4ec;
    --accent-glow: #f08c4a;  /* the orange for text on the dark flap tiles: 4.5:1 on #1f1f1f */
    --del: #fff1e6; --del-edge: #f08c4a; --del-fg: #b5470b;   /* removed */
    --add: #f3f3f3; --add-edge: #bdbdbd;                      /* added */
    --select: #f1f1f1;
    --paper: #fcfbf8;
    --top-bg: rgba(255,255,255,.86); --scrim: rgba(255,255,255,.6); --hover: #f0f0f0; --edge-hi: #a8a8a8;
    --ink-bg: #0a0a0a; --ink-fg: #fff; --ink-hover: #2a2a2a; --tint: var(--tint);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  /* Dark: the same black, white and one orange, turned over. "system" (no data-theme) follows the OS. */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0e0e0e; --canvas: #161616; --border: #2a2a2a; --border-2: #3d3d3d;
    --fg: #f2f2f2; --muted: #a0a0a0; --faint: #8f8f8f;
    --accent-ink: #f08c4a; --main-ink: #58a6ff; --accent-soft: #2a1a0e;
    --del: #2a1a0e; --del-fg: #f6a96c; --add: #1d1d1d; --add-edge: #4a4a4a;
    --select: #222; --paper: #1a1916; --top-bg: rgba(14,14,14,.86); --scrim: rgba(0,0,0,.6); --hover: #242424; --edge-hi: #6b6b6b; --ink-bg: #f2f2f2; --ink-fg: #0a0a0a; --ink-hover: #d8d8d8; --tint: rgba(255,255,255,.1);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #0e0e0e; --canvas: #161616; --border: #2a2a2a; --border-2: #3d3d3d;
      --fg: #f2f2f2; --muted: #a0a0a0; --faint: #8f8f8f;
      --accent-ink: #f08c4a; --main-ink: #58a6ff; --accent-soft: #2a1a0e;
      --del: #2a1a0e; --del-fg: #f6a96c; --add: #1d1d1d; --add-edge: #4a4a4a;
      --select: #222; --paper: #1a1916; --top-bg: rgba(14,14,14,.86); --scrim: rgba(0,0,0,.6); --hover: #242424; --edge-hi: #6b6b6b; --ink-bg: #f2f2f2; --ink-fg: #0a0a0a; --ink-hover: #d8d8d8; --tint: rgba(255,255,255,.1);
    }
  }
  /* codeSplitter is the look the kit (packages/ui) came from: its theme is these tokens, and the kit's components and
     our .btn / toast read them. Dark follows because every value is one of the variables above. */
  :root {
    --ui-bg: var(--bg); --ui-ink: var(--fg); --ui-dim: var(--muted); --ui-line: var(--border-2); --ui-soft: var(--hover);
    --ui-accent: var(--accent); --ui-accent-soft: var(--accent-soft); --ui-scrim: var(--scrim);
    --ui-radius: 6px; --ui-radius-sm: 5px; --ui-border: 1px; --ui-font: var(--sans);
    --ui-toast-bg: var(--fg); --ui-toast-ink: var(--bg); --ui-toast-radius: 6px;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { margin: 0; background: var(--bg); color: var(--fg); font: 400 14px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
  ::selection { background: var(--accent-soft); color: var(--fg); }
  a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--border-2); text-underline-offset: 3px; }
  a:hover { text-decoration-color: var(--accent); }
  [data-lucide], svg.lucide { width: 15px; height: 15px; stroke-width: 1.6; vertical-align: -3px; flex: none; }
  code, kbd { font-family: var(--mono); font-size: 12.5px; }
  .muted { color: var(--muted); }
  .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .grow { flex: 1; }

  /* Inputs: plain hairline boxes. */
  input, select, textarea { font: 400 14px/20px var(--sans); color: var(--fg); background: var(--bg); border: 1px solid var(--border-2); border-radius: 5px; padding: 5px 10px; }
  input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--fg); box-shadow: 0 0 0 3px var(--tint); }
  /* A keyboard user always sees where they are: one orange ring, on everything that takes focus. */
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--accent); }
  .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .skip { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-200%); } .skip:focus { transform: none; }
  input[type=range] { accent-color: var(--accent); padding: 0; border: 0; box-shadow: none; }
  textarea { font-family: var(--mono); font-size: 13px; }

  /* Buttons: Infinite Craft tiles in paper. White-ish, grain, thin grey edge,
     5px corners, a warm wash from the bottom on hover, a 1px press. */
  .btn { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--sans); color: var(--fg); background: var(--grain), var(--paper); border: var(--ui-border) solid var(--ui-line); border-radius: var(--ui-radius-sm); padding: 8px 10px 7px; cursor: pointer; white-space: nowrap; text-decoration: none !important; user-select: none; transition: border-color .12s, background .12s, transform .06s; }
  .btn:hover { background: var(--grain), linear-gradient(0deg, var(--accent-soft), var(--paper) 85%); border-color: var(--edge-hi); }
  .btn:active { transform: translateY(1px); }
  .btn.primary { color: var(--ink-fg); background: var(--grain), var(--ink-bg); border-color: var(--ink-bg); }
  .btn.primary:hover { background: var(--grain), linear-gradient(0deg, var(--ink-hover), var(--ink-bg) 85%); border-color: var(--ink-bg); }
  .btn.ghost { background: transparent; border-color: transparent; }
  .btn.ghost:hover { background: var(--grain), var(--paper); border-color: var(--border-2); }
  .btn[disabled] { opacity: .4; cursor: default; transform: none; }
  /* Following: the button stays as it was, only its eye goes orange (an orange button reads as a warning). */
  .btn.follow[aria-pressed="true"] svg { color: var(--accent-ink); }
  /* Following is a state, so hovering it says what a press does: Unfollow. */
  .btn.follow .off, .btn.follow[aria-pressed="true"]:hover .on, .btn.follow[aria-pressed="true"]:focus-visible .on { display: none; }
  .btn.follow[aria-pressed="true"]:hover .off, .btn.follow[aria-pressed="true"]:focus-visible .off { display: inline; }
  .btn .count { background: var(--tint); border-radius: 4px; padding: 1px 5px; font-size: 11.5px; }
  .badge { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/18px var(--sans); color: var(--muted); border: 1px solid var(--border-2); border-radius: 5px; padding: 1px 7px; background: var(--grain), var(--paper); }
  button.badge { cursor: pointer; } button.badge:hover { border-color: var(--edge-hi); color: var(--fg); }
  .label { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

  /* The top bar. */
  .top { display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: var(--top-bg); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
  .brand { display: flex; align-items: center; gap: 8px; color: var(--fg); font: 600 15px var(--sans); letter-spacing: -0.02em; text-decoration: none; }
  .brand:hover { text-decoration: none; }
  .brand svg { width: 22px; height: 22px; }
  .jump { display: flex; align-items: center; gap: 8px; min-width: 280px; color: var(--muted); background: var(--canvas); border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; cursor: pointer; font: 400 13px var(--sans); }
  .jump:hover { border-color: var(--border-2); color: var(--fg); }
  .jump kbd { margin-left: auto; font: 500 11px var(--mono); border: 1px solid var(--border-2); border-radius: 4px; padding: 0 5px; color: var(--muted); background: var(--bg); }
  #who { display: flex; align-items: center; gap: 8px; }
  #who form { display: flex; gap: 6px; }
  main { padding: 0 0 80px; } main:focus { outline: 0; }
  .wrap { max-width: 1440px; margin: 0 auto; padding: 0 24px; }
  /* The rail (drawRail()): a column of view shortcuts down the left, signed in and wide enough. Words are tooltips. */
  .rail { position: fixed; left: 0; top: 0; bottom: 0; z-index: 11; width: 48px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 12px; background: var(--canvas); border-right: 1px solid var(--border); }
  .rail[hidden] { display: none; } .rail .grow { flex: 1; }
  .rail a, .rail button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
  .rail a:hover, .rail button:hover { background: var(--select); color: var(--fg); }
  .rail a.on { background: var(--select); color: var(--fg); box-shadow: inset 2px 0 var(--accent); }
  .rail svg.lucide { width: 18px; height: 18px; }
  body.railed { padding-left: 48px; } body.railed .tour, body.railed .guide, body.railed .guide-fab { left: 64px; }
  @media (max-width: 860px) { .rail { display: none !important; } body.railed { padding-left: 0; } body.railed .tour, body.railed .guide, body.railed .guide-fab { left: 16px; } }

  /* Repo pages are a workbench, edge to edge like an editor: a slim header,
     the explorer on the left, the code in the middle, details on the right,
     and a status bar along the bottom. */
  body.ide-mode { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  body.ide-mode #topplay { display: none; }
  body.ide-mode main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
  .repohead { background: var(--bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 16px; }
  .repohead h1 { margin: 0; font: 400 15px/1.3 var(--sans); letter-spacing: -0.015em; display: flex; align-items: center; gap: 6px; }
  .repohead h1 b { font-weight: 600; }
  /* The git bar under a repo's header: every git state as a pill, quiet when fine, orange when it wants you, red when it's stuck. */
  .gitbar { background: var(--bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 5px 16px; font-size: 12.5px; }
  .gitbar:empty { display: none; }
  /* Orange rules across the top and bottom of the window while you're on a repo's main, the git source of truth. A branch drops them. */
  .truth-edge { position: fixed; left: 0; right: 0; height: 4px; background: var(--accent); z-index: 60; pointer-events: none; }
  .truth-edge.top { top: 0; } .truth-edge.bottom { bottom: 0; }
  .gpill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--muted); font: inherit; white-space: nowrap; cursor: pointer; text-decoration: none; }
  .gpill i, .gpill svg { width: 14px; height: 14px; }
  .gpill b { font-weight: 600; color: var(--fg); }
  .gpill[data-s="warn"] { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft, var(--bg)); } .gpill[data-s="warn"] b { color: var(--accent-ink); }
  .gpill[data-s="bad"] { color: var(--ink-fg); border-color: var(--del-fg); background: var(--del-fg); font-weight: 600; } .gpill[data-s="bad"] b { color: var(--ink-fg); }
  .gfiles { flex-basis: 100%; display: flex; gap: 4px 10px; flex-wrap: wrap; padding: 2px 0 4px; color: var(--muted); }
  .gfiles[hidden] { display: none; }
  .repohead .btn { padding: 2px 10px; }
  .flow { display: inline-flex; gap: 4px; flex-wrap: wrap; padding-right: 8px; margin-right: 4px; border-right: 1px solid var(--border); }
  .flow .btn { padding: 2px 9px; }
  @media (max-width: 900px) { .flow .flow-step span { display: none; } }
  /* The branch you're editing on (#701): the switcher names it, and an orange bar says edits land there, not main. */
  .branch-pop > .panel { left: 0; right: auto; width: 320px; }
  #branch-switch span { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #branch-switch.on-br { border-color: var(--accent); color: var(--accent-ink); }
  .branch-list { display: grid; max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 5px; }
  .branch-list button { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 8px; border: 0; background: none; font: 13px var(--mono); color: var(--fg); text-align: left; cursor: pointer; }
  .branch-list button + button { border-top: 1px solid var(--border); }
  .branch-list button:hover { background: var(--select); }
  .branch-list button.on { color: var(--accent-ink); }
  .branch-list button code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .branch-list .muted { flex: none; font: 11.5px var(--sans); }
  .branch-say { font-size: 12px; overflow-wrap: anywhere; } .branch-say.bad { color: var(--del-fg); }
  .on-branch { display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: 13px; background: var(--accent-soft); border-bottom: 2px solid var(--accent); }
  .on-branch > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .on-branch code { color: var(--accent-ink); font-weight: 600; }
  .on-branch .btn { flex: none; padding: 2px 10px; }
  .wb { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--ew, 250px) minmax(0, 1fr) var(--dw, 290px); position: relative; margin: 12px 16px; border: 1px solid var(--border); }
  .wb > * { min-height: 0; overflow: auto; }
  .explorer { background: var(--canvas); border-right: 1px solid var(--border); padding-bottom: 12px; }
  .pad { padding: 8px 12px 4px; }
  .explorer .label { display: flex; align-items: center; }
  .tree-add { margin-left: auto; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; }
  .tree-add:hover { background: var(--select); color: var(--fg); } .tree-add svg.lucide { width: 14px; height: 14px; }
  /* The explorer's search: every file whose path has what you type, the name's match in bold. */
  .tree-find { position: sticky; top: 0; z-index: 1; display: block; padding: 4px 8px 6px; background: var(--canvas); }
  .tree-find svg.lucide { position: absolute; left: 16px; top: 50%; translate: 0 -55%; width: 13px; height: 13px; color: var(--muted); pointer-events: none; }
  .tree-find input { width: 100%; height: 26px; padding: 2px 8px 2px 26px; font-size: 12.5px; }
  .tree a .in { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; } .tree a mark { background: none; color: inherit; font-weight: 700; }
  /* The explorer's menu (right-click or ctrl-click on the tree): new file, copy path. */
  .ctx { position: fixed; z-index: 50; min-width: 220px; padding: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; box-shadow: 0 12px 32px -8px rgba(0,0,0,.18); display: grid; font-size: 13px; }
  .ctx button { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 0; border-radius: 4px; background: none; color: var(--fg); text-align: left; cursor: pointer; font: inherit; }
  .ctx button:hover { background: var(--select); } .ctx svg.lucide { width: 14px; height: 14px; color: var(--muted); }
  .ctx input { margin: 2px; font: 12.5px var(--mono); }
  .ctx label.ask { display: flex; align-items: center; gap: 8px; padding: 2px 8px; } .ctx label.ask input { flex: 1; min-width: 0; margin: 0; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--fg); }
  .ctx button span { flex: 1; } .ctx kbd { color: var(--muted); font: 11.5px var(--mono); padding-left: 16px; } .ctx hr { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }
  .ctx button:focus-visible { outline: none; background: var(--select); } #lines:focus { outline: none; }
  .tree a { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 calc(8px + var(--d, 0) * 12px); color: var(--fg); font-size: 13px; white-space: nowrap; cursor: pointer; }
  .tree a:hover { background: var(--hover); text-decoration: none; }
  .tree a.on { background: var(--select); box-shadow: inset 2px 0 var(--fg); font-weight: 500; }
  .tree svg.lucide { width: 14px; height: 14px; vertical-align: 0; }
  .tree .chev { color: var(--muted); } .tree .ic-dir { color: var(--fg); fill: var(--select); } .tree .ic-file { color: var(--faint); margin-left: 19px; }
  .editor { display: flex; flex-direction: column; overflow: hidden; container: editor / inline-size; }
  .tabs { display: flex; background: var(--canvas); border-bottom: 1px solid var(--border); flex: none; }
  .tab { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 13px; background: var(--bg); border-right: 1px solid var(--border); box-shadow: inset 0 2px var(--accent); margin-bottom: -1px; }
  /* One row, however narrow the editor gets: the buttons drop their words for icons (the word's in the tooltip), and the path ellipses. */
  .crumbbar { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-bottom: 1px solid var(--border); font-size: 13px; flex: none; min-height: 34px; overflow-x: auto; scrollbar-width: thin; }
  .crumbbar .btn { padding: 1px 8px; font-size: 12.5px; white-space: nowrap; flex: none; }
  .crumbbar .crumbs { font-weight: 500; font-size: 13px; min-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @container editor (max-width: 980px) { .crumbbar .btn { font-size: 0; gap: 0; padding: 3px 6px; } .crumbbar .btn span { display: none; } }
  .editor .scroll { flex: 1; min-height: 0; overflow: auto; }
  .details { border-left: 2px solid var(--border-2); box-shadow: -6px 0 10px -8px rgb(0 0 0 / .25); font-size: 13px; container-type: inline-size; }
  /* The details side (dock()): drag its left edge to widen it, or snap it to 2/3 or the whole bench.
     Tabs along the top (Code, Hosted, Features) pick which panels show. Each browser keeps its own layout. */
  .drail { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 4px 8px; background: var(--canvas); border-bottom: 1px solid var(--border); }
  .dtabs { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .dtabs::-webkit-scrollbar { display: none; }
  .drail button { display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; }
  .drail button.dtab { display: flex; align-items: center; gap: 5px; width: auto; padding: 0 8px; font: 500 12px var(--sans, inherit); white-space: nowrap; }
  .drail button:hover, .drail button.on { background: var(--select); color: var(--fg); }
  .drail svg.lucide { width: 14px; height: 14px; vertical-align: 0; }
  .dpanels > [hidden] { display: none; }
  @container (min-width: 620px) { .dpanels { columns: 300px; column-gap: 0; } .dpanels .sec { break-inside: avoid; } }
  /* The Wow me tour: a card in the corner, and a ring round whatever it's showing. */
  .tour { position: fixed; left: 16px; bottom: 56px; z-index: 60; width: min(360px, calc(100vw - 32px)); box-sizing: border-box; display: grid; gap: 8px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: 14px; }
  .tour .tour-top { display: flex; align-items: center; gap: 8px; } .tour .tour-top b { flex: 1; } .tour .tour-n { font-variant-numeric: tabular-nums; }
  .tour p { margin: 0; } .tour .tour-said { font-size: 13px; color: var(--accent); min-height: 1em; }
  .guide-fab, .guide { position: fixed; left: 16px; bottom: 12px; z-index: 61; }
  .guide-fab { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.14); font: inherit; font-size: 13px; cursor: pointer; }
  .guide-fab:hover { border-color: var(--accent); } .guide-fab b { min-width: 4ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
  .guide { width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 24px); overflow: auto; display: grid; gap: 10px; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: 14px; }
  .guide p { margin: 0; } .guide .guide-msg { font-size: 13px; color: var(--accent); } .guide .guide-msg:empty { display: none; }
  .guide .guide-top { display: flex; align-items: center; gap: 8px; } .guide .guide-top .grow { flex: 1; } .guide .guide-top .muted { font-variant-numeric: tabular-nums; }
  .guide .guide-btns { display: flex; flex-wrap: wrap; gap: 8px; }
  .guide .guide-opts { display: grid; gap: 8px; } .guide .guide-opts button { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; align-items: center; text-align: left; padding: 10px 12px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; font: inherit; cursor: pointer; }
  .guide .guide-opts button:hover:not(:disabled) { border-color: var(--accent); } .guide .guide-opts button:disabled { opacity: .55; cursor: not-allowed; }
  .guide .guide-opts button > span { grid-column: 2; font-size: 12px; } .guide .guide-opts svg { width: 20px; height: 20px; }
  .guide .octo { fill: currentColor; } .guide .gh-list { display: grid; gap: 4px; }
  .guide .guide-rows { display: grid; gap: 2px; } .guide .guide-row { display: grid; grid-template-columns: 18px 1fr 18px; align-items: center; gap: 8px; padding: 7px 8px; text-align: left; background: none; color: var(--fg); border: 0; border-radius: 6px; font: inherit; cursor: pointer; }
  .guide .guide-row:hover { background: var(--select); } .guide .guide-row > svg:last-child { color: var(--muted); } .guide .guide-row.ok { color: var(--muted); } .guide .guide-row.ok > svg:first-child { color: var(--accent); }
  .tour .tour-scrub { width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
  .tour .tour-dots { display: flex; gap: 3px; } .tour .tour-dots i { flex: 1; height: 3px; border-radius: 2px; background: var(--border); } .tour .tour-dots i.on { background: var(--accent); }
  .tour .tour-queue { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; } .tour .tour-queue .btn { padding: 0 4px; }
  .tour .tour-btns { display: flex; gap: 6px; } .tour .tour-btns .grow, .tour .tour-top .grow { flex: 1; }
  .tour .tour-chs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; } .tour .tour-chs span { margin-left: 4px; white-space: nowrap; }
  .tour .tour-chs button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--bg); color: var(--muted); cursor: pointer; }
  .tour .tour-chs button.on { border-color: var(--accent); color: var(--accent); } .tour .tour-chs svg { width: 14px; height: 14px; }
  .tour-cursor { position: fixed; left: 0; top: 0; z-index: 70; width: 22px; height: 22px; pointer-events: none; color: var(--accent); filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); transition: transform .8s cubic-bezier(.4,0,.2,1); }
  .tour-cursor svg { width: 22px; height: 22px; fill: var(--bg); } .tour-cursor.click::after { content: ""; position: absolute; left: -9px; top: -9px; width: 40px; height: 40px; border: 2px solid var(--accent); border-radius: 50%; animation: tour-ripple .45s ease-out; }
  @keyframes tour-ripple { from { transform: scale(.2); opacity: 1; } to { transform: scale(1); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .tour-cursor { transition: none; } .tour-cursor.click::after { animation: none; display: none; } }
  .tour-hot { outline: 2px solid var(--accent) !important; outline-offset: 2px; animation: pulse 1.2s ease-in-out infinite; }
  .sec.flash { animation: flash 1s ease-out; } @keyframes flash { from { background: var(--accent-soft); } }
  .dgrip { position: absolute; top: 0; bottom: 0; right: calc(var(--dw, 290px) - 3px); width: 6px; z-index: 3; cursor: col-resize; }
  .dgrip:hover, .dgrip.on, .egrip:hover, .egrip.on { background: var(--accent); opacity: .5; }
  /* The explorer's right edge: drag to any width, double-click for the default. */
  .egrip { position: absolute; top: 0; bottom: 0; left: calc(var(--ew, 250px) - 3px); width: 6px; z-index: 3; cursor: col-resize; }
  @media (min-width: 1200px) { .wb.d-full { grid-template-columns: minmax(0, 1fr); } .wb.d-full > :is(.explorer, .editor, .dgrip, .egrip) { display: none; } .wb.d-full > .details { border-left: 0; } }
  .sec { padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .sec h2 { margin: 0 0 6px; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
  .sec-i { margin-left: auto; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
  .sec-i.inl { margin-left: 4px; display: inline-grid; vertical-align: middle; }
  .sec-i:hover, .sec-i[aria-expanded="true"] { background: var(--select); color: var(--fg); } .sec-i svg.lucide { width: 13px; height: 13px; }
  .sec p { margin: 0 0 6px; } .sec .btn { margin: 2px 4px 2px 0; }
  .sec .run { padding: 6px 0; border-top: 1px solid var(--border); display: grid; gap: 2px; } .sec .run:first-child { border-top: 0; }
  .sec .run .st { font: 500 11px/1.4 var(--mono); color: var(--muted); } .sec .run .st.running { color: var(--accent-ink); } .sec .run .st.failed { color: var(--del-fg); } .vuln { color: var(--del-fg); font-weight: 600; }
  .chain { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .chain .step { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
  .chain .step button { border: 0; background: none; cursor: pointer; padding: 2px 6px; font: inherit; color: inherit; } .chain .step:not(.on) { opacity: .45; } .chain .step.on { border-color: var(--accent); }
  .chain .step sup { font: 600 9px var(--mono); color: var(--muted); margin-right: 2px; } .chain .step .up { padding: 2px 3px; color: var(--muted); } .unverified { color: var(--accent-ink); font-weight: 600; }
  .rank { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; } .rank li { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 6px; border: 1px solid var(--accent); border-radius: 6px; background: var(--bg); cursor: grab; white-space: nowrap; }
  .rank li sup { font: 600 9px var(--mono); color: var(--muted); } .rank li button { border: 0; background: none; cursor: pointer; padding: 0 2px; color: var(--muted); font: inherit; }
  .pkg-letter { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 3px; background: var(--fg); color: var(--bg); font: 600 10px var(--mono); text-transform: uppercase; }
  .watch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .watch .badge { white-space: nowrap; text-decoration: none; }
  .watch .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .watch .none .dot { background: var(--fg); } .watch .unknown .dot { background: none; border: 1px solid var(--muted); } .watch .minor .dot { background: var(--accent); } .watch .major .dot, .watch .critical .dot { background: var(--del-fg); }
  .sec .run .tell { display: flex; align-items: center; gap: 4px; margin-top: 2px; } .sec .run .tell input { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 3px 6px; }
  .sec .run > .row { flex-wrap: nowrap; } .sec .run > .row b { white-space: nowrap; } .sec .run .btn.stop { margin: 0 0 0 auto; padding: 1px 8px; font-size: 12px; }
  .sec .bulk { display: flex; flex-wrap: wrap; gap: 2px; padding-bottom: 6px; }
  /* A run's clock (ticker()): fixed-width tabular digits, so ticking never shifts what's beside it. */
  .tick { display: inline-flex; align-items: center; gap: 4px; font: 500 11px/1.4 var(--mono); color: var(--muted); white-space: nowrap; }
  .tick .tick-n { display: inline-block; min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
  .tick.low { color: var(--del-fg); }
  .tick-i { display: inline-grid; place-items: center; width: 14px; height: 14px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--bg); color: var(--muted); font: italic 600 9px/1 var(--sans); cursor: help; flex: none; }
  .tick-i:hover, .tick-i:focus-visible { border-color: var(--accent); color: var(--accent-ink); }
  #tick-tip { position: fixed; z-index: 1000; max-width: min(260px, calc(100vw - 32px)); padding: 6px 8px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 14px rgb(0 0 0 / .12); font: 400 12px/1.4 var(--sans); pointer-events: none; }
  .phone { max-width: 640px; margin: 0 auto; padding: 12px 0 40px; }
  .phone h1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0 14px 10px; font-size: 18px; font-weight: 400; }
  .phone .sec { font-size: 14px; } .phone .sec .run { padding: 10px 0; }
  .phone #m-agent { display: grid; gap: 8px; margin-bottom: 10px; }
  .phone #m-agent :is(input, select, textarea) { font: inherit; font-size: 16px; padding: 8px; width: 100%; box-sizing: border-box; }
  .phone .btn { min-height: 36px; }
  .sec .run pre { margin: 4px 0 0; max-height: 180px; overflow: auto; font: 400 11.5px/1.45 var(--mono); white-space: pre-wrap; color: var(--muted); }
  .digbar { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
  .bubble { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line, var(--border-2)); background: var(--bg); color: inherit; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
  .bubble:hover { border-color: var(--fg); }
  .bubble .octo { width: 18px; height: 18px; fill: currentColor; color: #9aa0a6; }
  .bubble.on .octo { color: var(--fg); filter: drop-shadow(0 0 4px rgba(63,185,80,.65)); }
  .digdlg { border: var(--ui-border) solid var(--ui-line); border-radius: var(--ui-radius); padding: 0; width: min(760px, 94vw); background: var(--ui-bg); color: var(--ui-ink); }
  .digdlg::backdrop { background: var(--ui-scrim); }
  .digdlg form { margin: 0; }
  .digdlg .bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: var(--ui-border) solid var(--ui-line); }
  .digdlg .body { padding: 16px; }
  .ghwho { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 0 0 8px; }
  .ghwho .octo { width: 20px; height: 20px; fill: currentColor; color: #9aa0a6; flex: none; }
  .ghwho.on .octo { color: var(--fg); filter: drop-shadow(0 0 4px rgba(255,255,255,.85)) drop-shadow(0 0 7px rgba(63,185,80,.65)); }
  .ghwho { flex-wrap: wrap; } .ghaccts { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
  .ghacct { display: inline-flex; } .ghacct .btn:first-child { border-radius: 5px 0 0 5px; } .ghacct .btn:not(:first-child) { border-radius: 0; border-left: 0; padding-inline: 6px; } .ghacct .btn:last-child { border-radius: 0 5px 5px 0; }
  .ghacct .btn[data-gh-agent]:not(.on) { opacity: .55; }
  .ghacct.on .btn:first-child { opacity: 1; font-weight: 600; }
  .flow { display: flex; align-items: center; margin: 6px 0 4px; }
  .flow .ln { flex: 1; height: 2px; background: var(--border-2); min-width: 6px; } .flow .ln.done { background: #2f9e44; }
  .flow button { display: grid; justify-items: center; gap: 3px; background: none; border: 0; padding: 2px; cursor: pointer; font: 500 10px/1 var(--mono); color: var(--faint); }
  .flow button .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border-2); background: var(--paper); }
  .flow button svg.lucide { width: 15px; height: 15px; vertical-align: 0; }
  .flow button.sel { color: var(--fg); } .flow button.sel .dot { box-shadow: 0 0 0 3px var(--select); }
  .flow .running { color: var(--accent-ink); } .flow .running .dot { border-color: var(--accent); color: var(--accent-ink); animation: pulse 1s ease-in-out infinite; }
  .flow .done { color: #2f9e44; } .flow .done .dot { border-color: #2f9e44; background: #2f9e44; color: #fff; }
  .flow .failed { color: var(--del-fg); } .flow .failed .dot { border-color: var(--del-fg); background: var(--del-fg); color: var(--ink-fg); }
  .flow .skipped .dot { border-style: dashed; opacity: .5; }
  @keyframes pulse { 50% { box-shadow: 0 0 0 4px var(--accent-soft); } }
  /* A merge conflict, one card each: base, main and the branch with their changed words marked, then the picks. */
  .sec .commit .clash { grid-column: 2; border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin: 6px 0; background: var(--bg); font-size: 12px; min-width: 0; }
  .merge-page .sec .commit .clash { grid-column: 1 / -1; }
  .clash.settled { border-color: var(--accent); }
  .clash .cl-h { display: flex; gap: 6px; align-items: center; white-space: nowrap; min-width: 0; overflow: hidden; margin-bottom: 4px; }
  .clash .cl-h code { overflow: hidden; text-overflow: ellipsis; min-width: 3em; }
  .clash .cl-h .cl-what { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
  .clash .cl-h .cl-state { margin-left: auto; font: 500 11px var(--mono); color: var(--muted); }
  .clash.settled .cl-h .cl-state { color: var(--accent-ink); }
  .clash .cl-side { display: grid; grid-template-columns: 56px 1fr; gap: 6px; align-items: start; padding: 1px 0; }
  .clash .cl-who { font: 500 11px/18px var(--mono); text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .clash .cl-main .cl-who { color: var(--main-ink, #1f6feb); } .clash .cl-branch .cl-who { color: var(--accent-ink); }
  .clash code.pre { white-space: pre-wrap; word-break: break-word; display: block; }
  .clash mark { background: var(--accent-soft); color: inherit; border-radius: 2px; box-shadow: inset 0 -1px var(--accent); }
  .clash .cl-main mark { background: color-mix(in srgb, #1f6feb 20%, transparent); box-shadow: inset 0 -1px #1f6feb; }
  .clash .cl-ctx code { color: var(--faint); }
  .clash .cl-picks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; }
  .clash .cl-picks .btn { white-space: nowrap; padding: 2px 8px; font-size: 12px; }
  .clash .cl-picks .btn[aria-pressed="true"] { color: var(--accent-ink); border-color: var(--accent); background: var(--grain), var(--accent-soft); }
  .clash .cl-picks select { font-size: 12px; padding: 1px 4px; }
  .clash .cl-out { margin-top: 6px; } .clash .cl-out[hidden] { display: none; }
  .clash .cl-out textarea { width: 100%; box-sizing: border-box; font: 12px/1.5 var(--mono); min-height: 3.2em; max-height: 24em; resize: vertical; field-sizing: content; }
  .sec .commit { display: grid; grid-template-columns: auto 1fr; gap: 0 6px; padding: 3px 0; } .sec .commit .muted { grid-column: 2; font-size: 12px; } .sec .commit code.pre { white-space: pre-wrap; display: inline-block; vertical-align: top; }
  .status { display: flex; align-items: center; gap: 14px; flex: none; height: 24px; padding: 0 12px; background: var(--fg); color: var(--bg); font: 400 12px var(--mono); white-space: nowrap; overflow: hidden; }
  .status span { display: inline-flex; align-items: center; gap: 4px; } .status svg.lucide { width: 13px; height: 13px; vertical-align: 0; }
  .status .grow { flex: 1; }
  .status .diffstat .plus { color: var(--faint); }
  /* Sheets: the repos you were in, as tabs along the bottom like a workbook's. The one you're on
     is white with an orange edge; click it again for the wire map of its folders. */
  .sheets { display: flex; align-items: stretch; flex: none; height: 28px; background: var(--canvas); border-top: 1px solid var(--border); padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
  .sheets::-webkit-scrollbar { display: none; }
  .rtab { display: flex; align-items: center; gap: 6px; max-width: 200px; padding: 0 6px 0 10px; margin-top: -1px; font: 400 12.5px var(--sans); color: var(--muted); text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-top: 0; border-radius: 0 0 5px 5px; cursor: pointer; }
  .rtab:hover { color: var(--fg); background: var(--grain), var(--paper); border-color: var(--border-2); }
  .rtab.on { color: var(--fg); background: var(--bg); border-color: var(--border-2); box-shadow: inset 0 -2px var(--accent); font-weight: 500; }
  .rtab .nm { overflow: hidden; text-overflow: ellipsis; }
  .rtab .x { display: inline-flex; padding: 2px; border-radius: 3px; color: var(--faint); visibility: hidden; }
  .rtab:hover .x, .rtab.on .x { visibility: visible; } .rtab .x:hover { color: var(--fg); background: var(--select); }
  .rtab .x svg.lucide { width: 12px; height: 12px; }
  .sheets .add { display: flex; align-items: center; padding: 0 8px; color: var(--muted); background: none; border: 0; cursor: pointer; } .sheets .add:hover { color: var(--fg); }
  /* The wire map: the repo's top folders left to right, and each folder you open
     rising out of it as a column, wired to its files and folders. */
  .wiremap { position: fixed; left: 8px; right: 8px; z-index: 30; max-height: 72vh; display: flex; flex-direction: column; background: var(--grain), var(--paper); border: 1px solid var(--border-2); border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.12); }
  .wiremap .wm-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--border); }
  .wiremap .wm-scroll { overflow: auto; min-height: 0; }
  .wm-stage { position: relative; padding: 16px; }
  .wm-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .wm-wires path { fill: none; stroke: var(--border-2); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
  .wm-wires path.hot { stroke: var(--accent); stroke-width: 1.6; }
  .wm-root { display: flex; gap: 8px; width: max-content; }
  .wm-col { position: absolute; display: flex; flex-direction: column; gap: 3px; max-height: 44vh; overflow-y: auto; padding: 2px 4px 2px 0; }
  .wm-item { display: inline-flex; align-items: center; gap: 6px; font: 400 12.5px var(--mono); color: var(--fg); white-space: nowrap; background: var(--bg); border: 1px solid var(--border-2); border-radius: 5px; padding: 4px 8px; cursor: pointer; }
  .wm-item:hover { border-color: var(--edge-hi); background: var(--grain), linear-gradient(0deg, var(--accent-soft), var(--paper) 85%); }
  .wm-item.dir svg.lucide { color: var(--muted); } .wm-item.on { border-color: var(--accent); } .wm-item.on svg.lucide { color: var(--accent-ink); }
  /* The vein: where a repo came from, the repo, its branches, as paper tiles wired with soft
     brown curves. Dashed was copied once; orange is moving, or waiting on you. */
  .gitmap { --brown: #8b5e3c; --brown-soft: #f5ede4; }
  .gitmap .gm-story { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .gm-stage { position: relative; display: grid; grid-template-columns: repeat(3, max-content); align-items: center; column-gap: 150px; padding: 28px 32px; width: max-content; min-width: 100%; }
  .gm-stage.dips { padding-bottom: 72px; } .gm-col { display: flex; flex-direction: column; gap: 14px; min-width: 40px; }
  .gm-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .gm-wires path { fill: none; stroke: var(--brown); stroke-width: 1.6; stroke-linecap: round; opacity: .75; }
  .gm-wires path.fork { stroke-dasharray: 2 5; } .gm-wires path.hot { stroke: var(--accent); opacity: 1; }
  .gm-wires marker path { fill: none; stroke: var(--brown); stroke-width: 1.4; stroke-dasharray: none; }
  .gm-tile { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; max-width: 260px; padding: 9px 12px 8px; color: var(--fg); text-decoration: none; background: var(--grain), var(--paper); border: 1px solid var(--border-2); border-radius: 6px; box-shadow: 0 1px 0 var(--border); }
  .gm-tile span { display: grid; min-width: 0; } .gm-tile b { font: 500 13px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gm-tile small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gm-tile svg.lucide { width: 18px; height: 18px; color: var(--brown); }
  a.gm-tile:hover { background: var(--grain), linear-gradient(0deg, var(--accent-soft), var(--paper) 85%); border-color: var(--edge-hi); }
  .gm-tile.here { color: var(--ink-fg); background: var(--grain), var(--ink-bg); border-color: var(--ink-bg); padding: 12px 16px 11px; } .gm-tile.here small { color: var(--ink-fg); opacity: .75; } .gm-tile.here svg.lucide { color: var(--accent); }
  .gm-tile.up { background: var(--grain), var(--brown-soft); border-color: #d9c4ad; }
  .gm-tile.upbranch, .gm-tile.done { padding: 6px 10px 5px; } .gm-tile.done { opacity: .6; }
  .gm-label { position: absolute; z-index: 2; padding: 1px 8px; font: 500 11.5px/18px var(--sans); color: var(--brown); white-space: nowrap; background: var(--paper); border: 1px solid #e3d3c1; border-radius: 10px; cursor: help; }
  .gm-label.hot { color: var(--accent-ink); border-color: var(--del-edge); background: var(--accent-soft); }
  .gm-graph { flex: none; border-top: 1px solid var(--border); padding: 6px 0 2px; }
  .cg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 0 12px; font-size: 12px; } .cg-head svg.lucide { width: 14px; height: 14px; }
  .cg-key { display: inline-flex; align-items: center; gap: 5px; } .cg-key svg { width: 10px; height: 10px; } .cg-key rect { fill: var(--muted); }
  .cg-scroll { overflow-x: auto; overflow-y: hidden; padding: 0 4px; }
  .cg path, .cg-key path { fill: none; stroke: var(--border-2); stroke-width: 2; stroke-linecap: round; } .cg path.off { stroke-dasharray: 2 4; }
  .cg g, .cg-key .u, .cg-key .m { cursor: default; } .cg .u, .cg-key .u { fill: var(--fg); } .cg .m, .cg-key .m { fill: var(--accent); }
  .cg g:hover, .cg g:focus { outline: none; } .cg g:hover > *, .cg g:focus > *, .cg g.sel > * { stroke: var(--accent-glow); stroke-width: 3; }
  .cg path.t { fill: var(--brown); stroke: none; } .cg g[data-h] { cursor: pointer; } .cg g.beat > * { stroke: var(--accent-glow); stroke-width: calc(3px + 3px * var(--swell, 0)); }
  /* The pulse travelling the vein: a glowing bead that runs into main's newest commit as the crew lands lines. */
  .cg .bead, .cg-key .bead { fill: var(--accent-glow); } .cg .bead { filter: drop-shadow(0 0 3px var(--accent)); pointer-events: none; }
  .cg-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  .cg-tag { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; font: 500 11.5px/18px var(--mono); color: var(--fg); background: var(--paper); border: 1px solid var(--border-2); border-radius: 9px; cursor: pointer; }
  .cg-tag.off { color: var(--muted); border-style: dashed; } .cg-tag button { display: inline-flex; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; } .cg-tag button:hover { color: var(--accent-ink); }
  .cg-act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 12px 2px; font-size: 12px; } .cg-act .msg { flex: 0 1 auto; max-width: 40ch; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cg-act form { display: inline-flex; gap: 4px; } .cg-act input { width: 9em; padding: 2px 6px; font: 12px var(--mono); } .cg-act .btn { padding: 2px 8px; }
  .cg-pick { display: grid; gap: 6px; margin: 4px 12px 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--canvas); font-size: 12px; }
  .cg-pick .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cg-pick .btn { white-space: nowrap; } .cg-pick select { max-width: 14em; }
  .cg-pick .what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cg-pick .cg-note { margin: 0; max-height: 9em; overflow: auto; white-space: pre-wrap; font: 11px/1.4 var(--mono); color: var(--muted); }
  .gm-key { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 6px 12px; border-top: 1px solid var(--border); font-size: 12px; }
  .gm-key span { display: inline-flex; align-items: center; gap: 6px; } .gm-key svg { width: 28px; height: 6px; overflow: visible; }
  .gm-key path { fill: none; stroke: var(--brown); stroke-width: 1.6; stroke-linecap: round; } .gm-key path.fork { stroke-dasharray: 2 5; } .gm-key path.hot { stroke: var(--accent); }
  @media (max-width: 1199px) {
    body.ide-mode { height: auto; overflow: visible; display: block; } body.ide-mode main { display: block; }
    .wb { grid-template-columns: 230px minmax(0, 1fr); } .wb > * { overflow: visible; }
    .explorer { grid-row: span 2; } .editor { overflow: visible; } .editor .scroll { overflow-x: auto; }
    .details { border-left: 0; border-top: 1px solid var(--border); grid-column: 2; }
    .dgrip, .egrip, .drail .dw { display: none; } .drail { position: static; }
    .status { position: sticky; bottom: 0; } .sheets { position: sticky; bottom: 24px; z-index: 5; }
  }
  .box { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 16px; background: var(--bg); }
  .box > .bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: var(--canvas); border-bottom: 1px solid var(--border); font-size: 13px; } .box > .bar h1 { margin: 0; font-size: inherit; font-weight: 600; }
  .box > .body { padding: 14px 16px; }
  .box > .bar:has(+ .body[hidden]) { border-bottom: 0; }
  /* A folded box: its bar is the summary, the rest opens when asked (#729). */
  .box.fold > summary { cursor: pointer; list-style: none; } .box.fold > summary::-webkit-details-marker { display: none; }
  .box.fold:not([open]) > summary { border-bottom: 0; } .box.fold > summary .chev { margin-left: auto; transition: transform .15s; } .box.fold[open] > summary .chev { transform: rotate(180deg); }
  details.more > summary { cursor: pointer; font-size: 12px; }
  .crumbs { font: 600 14px var(--sans); } .crumbs a { font-weight: 400; } .crumbs .sep { color: var(--faint); margin: 0 4px; }
  .table a.rowlink { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--border); color: var(--fg); text-decoration: none; }
  .table a.rowlink:first-child { border-top: 0; } .table a.rowlink:hover { background: var(--canvas); }
  /* A fork: lines modded since the clone get an orange tick. */
  .ln.mod { box-shadow: inset 2px 0 var(--accent); } .ln.mod .by { color: var(--accent-ink); }
  .gh-list { max-height: 220px; overflow: auto; margin-top: 8px; }
  .gh-list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 3px 0; font: 13px var(--mono); color: var(--fg); cursor: pointer; }
  .gh-list button:hover { color: var(--accent-ink); }
  .gh-list button[disabled] { color: var(--faint); cursor: default; }
  .gh-list button .muted { font-family: var(--sans); margin-left: 6px; }

  /* Code: a line-number gutter you can click, blame faint on the side. */
  .code { font: 400 13px/20px var(--mono); overflow-x: auto; tab-size: 4; }
  .ln { display: grid; grid-template-columns: 52px 92px minmax(0, 1fr); }
  .ln .n { text-align: right; padding-right: 12px; color: var(--faint); cursor: pointer; user-select: none; }
  /* Upstream's branches: past a few, a filter and a box that scrolls, a row each. */
  .up-branches { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 5px; }
  .up-branches .row { flex-wrap: nowrap; gap: 6px; padding: 2px 4px 2px 8px; font-size: 13px; min-height: 28px; }
  .up-branches .row + .row { border-top: 1px solid var(--border); }
  .up-branches code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .up-branches .btn { padding: 2px 6px; transition: none; } .up-branches .btn:active { transform: none; } .up-branches .muted { flex: none; display: inline-flex; }
  .ln .n:hover { color: var(--fg); }
  .ln .by { color: var(--faint); font-size: 11.5px; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid var(--border); user-select: none; }
  .ln .t { white-space: pre; padding: 0 16px; }
  /* A line being saved says so, over the right end of its box; one that didn't land says why, under it (#659). */
  .ln .t:has(> input) { position: relative; }
  .ln .saving { position: absolute; right: 24px; top: 0; font: 500 11.5px/20px var(--sans); color: var(--muted); pointer-events: none; }
  .ln .saving.failed { position: static; display: block; white-space: normal; color: var(--del-fg); }
  .code.plain .ln { grid-template-columns: 52px minmax(0, 1fr); }
  /* Secret bottom-of-the-file mode: the oldest lines fall apart (decayTiers, rot). Tier 0 is the newest fifth and stays whole. */
  .dust-end { display: flex; justify-content: center; padding: 28px 0 40px; }
  .dust-end button { border: 0; background: none; color: var(--faint); opacity: .3; cursor: default; padding: 4px; transition: opacity .3s; } .dust-end button:hover, .dust-end button:focus-visible, .dust-end button[aria-pressed="true"] { opacity: .7; cursor: pointer; } .dust-end svg { width: 14px; height: 14px; }
   
  /* Bombed out: a damaged letter's corner is blasted off (the <s> keeps the rest standing) and the chunk, a piece of that same glyph, lies beside it. */
  .code.rotting .ln .t i.k { position: relative; display: inline-block; font-style: normal; white-space: pre; }
  .code.rotting .ln .t i.k s { text-decoration: none; clip-path: var(--keep); }
  .code.rotting .ln .t i.k::after { content: attr(data-c); position: absolute; left: 0; top: 0; clip-path: var(--chunk); transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
  /* Stamps on a line: small chips after its text, yours filled in. */
  .ln .stamps { display: inline-flex; gap: 4px; margin-left: 14px; vertical-align: 1px; user-select: none; font: 500 11px/16px var(--sans); }
  .ln .stamp { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--muted); cursor: pointer; font: inherit; }
  .ln .stamp svg { width: 11px; height: 11px; }
  .ln .stamp.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
  .stamp-pick .row { display: flex; gap: 4px; flex-wrap: wrap; }
  .st { display: inline-flex; align-items: center; } .st svg { width: 14px; height: 14px; } .ln .st svg { width: 11px; height: 11px; }
  .st-heart svg { fill: var(--accent); stroke: var(--accent); }
  .st-lgtm { font: 700 10px/1 var(--sans); letter-spacing: .04em; }
  /* Picked lines get a solid black gutter, one bar down a run; a line open for editing keeps its gutter and gets a dark box. */
  .ln.sel { background: var(--select); } .ln.sel .n { color: var(--ink-fg); background: var(--ink-bg); }
  .ln .t > input { border-color: var(--fg); box-shadow: 0 0 0 2px var(--select); }
  /* The firehose: a still orange glow on the bottom edge while edits land. It flashes on a change, then sits and bumps at 175 bpm (343ms),
     brighter the faster they come (--rate, 0 to 1). Never takes a click. */
  .firehose { position: fixed; left: 0; right: 0; bottom: 0; height: 64px; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .8s ease-out; transform-origin: 50% 100%;
    background: radial-gradient(120% 100% at 50% 100%, color-mix(in srgb, var(--accent) calc(18% + var(--rate, 0) * 30%), transparent), transparent 70%); }
  .firehose.on { opacity: 1; animation: firehose-bump .343s ease-in-out infinite; }
  .firehose.hit::after { content: ""; position: absolute; inset: 0; background: inherit; animation: firehose-hit .5s ease-out; }
  @keyframes firehose-bump { 50% { transform: scaleY(1.1); opacity: .8; } }
  @keyframes firehose-hit { from { filter: brightness(1.6); opacity: 1; } to { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .firehose.on { animation: none; } .firehose.hit::after { animation: none; display: none; } }
  .ln.flash { animation: flash 1.4s ease-out; } @keyframes flash { from { background: var(--accent-soft); } }
  /* Claimed lines: the holder's colour down the edge, and their name in the blame column. An agent's shimmer while it works. */
  .ln.claim .t { box-shadow: inset 3px 0 0 var(--who); background: color-mix(in srgb, var(--who) 7%, transparent); }
  .ln.claim .by { color: var(--who); font-weight: 500; display: flex; align-items: center; gap: 4px; }
  .ln.claim .by svg { width: 12px; height: 12px; flex: none; }
  .ln.claim.bot .t { background: linear-gradient(90deg, transparent 0 30%, color-mix(in srgb, var(--who) 12%, transparent) 50%, transparent 70%) 0 0 / 300% 100%, color-mix(in srgb, var(--who) 6%, transparent); animation: shimmer 2.4s linear infinite; }
  @keyframes shimmer { from { background-position: 100% 0, 0 0; } to { background-position: -50% 0, 0 0; } }
  @media (prefers-reduced-motion: reduce) { .ln.claim.bot .t { animation: none; } }
  /* An intent (a soft claim): someone means to work here, but the line is open to all. A dashed edge, no fill. */
  .ln.intent:not(.claim) .t { box-shadow: none; border-left: 3px dashed var(--who); }
  /* Who's in the file, over the code: a few faces, then counts, so a thousand agents is still one row. */
  .crew { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 4px 12px; min-height: 30px; box-sizing: border-box; background: var(--bg); border-bottom: 1px solid var(--border); font-size: 12px; overflow: hidden; }
  .who { display: inline-flex; align-items: center; gap: 4px; max-width: 150px; padding: 1px 7px 1px 5px; border: 1px solid color-mix(in srgb, var(--who) 45%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--who) 10%, transparent); color: var(--fg); font: 500 11.5px/18px var(--sans); white-space: nowrap; cursor: pointer; flex: none; }
  .who span { overflow: hidden; text-overflow: ellipsis; }
  .who svg { width: 12px; height: 12px; color: var(--who); flex: none; }
  a.who { text-decoration: none; }
  .who-prof { display: inline-flex; color: var(--muted); flex: none; } .who-prof:hover { color: var(--accent-ink); }
  .who-prof svg { width: 14px; height: 14px; }
  .crew .above { margin-left: auto; padding: 1px 8px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font: 500 11.5px/18px var(--sans); cursor: pointer; white-space: nowrap; }
  .crew:empty { display: none; }
  .editor { position: relative; }
  .here-dock { position: absolute; right: 16px; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 4px; }
  .here-dock .faces { display: flex; gap: 4px; }
  .here-n { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg); color: var(--fg); font: 600 12px/1 var(--mono); font-variant-numeric: tabular-nums; box-shadow: 0 4px 14px -6px rgba(0,0,0,.25); cursor: pointer; }
  .here-n svg { width: 14px; height: 14px; color: var(--accent); }
  .here-dock .pop > .panel { top: auto; bottom: calc(100% + 6px); width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 640px); overflow: auto; }
  .here-h { padding-top: 6px; border-top: 1px solid var(--border); }
  @media (max-width: 1199px) { .here-dock { position: fixed; bottom: 40px; } }
  @media (max-width: 860px) { .here-dock .faces { display: none; } }
  .here-list { display: grid; gap: 2px; max-height: 320px; overflow: auto; margin-top: 6px; }
  .here-list .row { display: flex; align-items: center; gap: 6px; min-height: 24px; }
  .here-list .row .what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
  .here-list .btn { padding: 0 6px; font-size: 11.5px; margin: 0; }
  #here-filter { width: 100%; box-sizing: border-box; font: inherit; padding: 3px 6px; }
  /* Activity: who changed what, newest first, one slim row each; a row jumps to its lines. */
  .act-bar { display: flex; gap: 4px; align-items: center; margin-bottom: 4px; }
  .act-bar .seg { grid-template-columns: repeat(4, auto); padding: 1px; flex: none; } .act-bar .seg button { font-size: 11.5px; padding: 2px 6px; }
  #act-find { flex: 1; min-width: 0; box-sizing: border-box; font: inherit; font-size: 12px; padding: 2px 6px; }
  .acts { display: grid; max-height: 360px; overflow: auto; }
  .act { display: flex; align-items: center; gap: 5px; min-height: 22px; padding: 1px 4px; border: 0; border-radius: 4px; background: none; color: var(--muted); font: 12px/1.4 var(--sans); text-align: left; cursor: pointer; }
  .act:hover { background: var(--select); }
  .act svg { width: 12px; height: 12px; color: var(--who); flex: none; }
  .act b { color: var(--fg); font-weight: 500; flex: none; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .act .what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .act .age { flex: none; font: 500 11px/1 var(--mono); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
  .ln.priv .n { box-shadow: inset 2px 0 0 var(--faint); position: relative; } .ln .ph { color: var(--faint); font-style: italic; }
  .ln.priv .n::before { content: "🔒"; position: absolute; left: 5px; font-size: 10px; }
  /* The crew reads private lines, blurred until hovered or edited, so a screen share doesn't show them. */
  .ln.priv .t :is(.secret, input) { transition: filter .15s; } .ln.priv:not(:hover):not(:focus-within) .t :is(.secret, input) { filter: blur(5px); }
  .ln.priv .t::after { content: "private"; margin-left: 10px; padding: 0 6px; border: 1px solid var(--border-2); border-radius: 9px; font-size: 10.5px; color: var(--faint); }
  /* A cut's gutter: each test's line, and the lines a failure points at. */
  .ln.pass .n { color: #2f9e44; box-shadow: inset 3px 0 #2f9e44; } .ln.fail .n { color: #cf222e; box-shadow: inset 3px 0 #cf222e; }
  .runsum.pass { color: #2f9e44; } .runsum.fail { color: #cf222e; }
  .ln input { width: 100%; font: inherit; padding: 0 4px; border-radius: 3px; }
  .ln:first-child { padding-top: 6px; } .ln:last-child { padding-bottom: 6px; }
  mark { background: var(--accent-soft); color: inherit; border-radius: 2px; box-shadow: inset 0 -1px var(--accent); }

  /* Diffs: orange for what was taken out, light grey for what was put in. */
  .ln.del { background: var(--del); } .ln.del .n { color: var(--del-fg); box-shadow: inset 3px 0 var(--del-edge); }
  .ln.del .t { color: var(--del-fg); }
  .ln.add { background: var(--add); } .ln.add .n { color: var(--fg); box-shadow: inset 3px 0 var(--add-edge); }
  .ln.del .t::before, .ln.add .t::before { display: inline-block; width: 14px; margin-left: -14px; }
  .ln.del .t::before { content: "−"; } .ln.add .t::before { content: "+"; color: var(--muted); }
  /* A branch's build and deploy files, spelled out in its review. */
  .buildiff { grid-column: 2; min-width: 0; margin: 4px 0; font: 12px/1.5 var(--mono); border: 1px solid var(--border-2); border-radius: 4px; overflow-x: auto; }
  .buildiff div { padding: 0 8px; white-space: pre; } .buildiff .d { background: var(--del); color: var(--del-fg); } .buildiff .a { background: var(--add); }
  .buildiff .h { padding: 3px 8px; color: var(--muted); border-bottom: 1px solid var(--border-2); }
  /* A branch's change, a hunk at a time (#735): what it took out in orange, what it put in in grey, Accept / Reject on each. */
  .hunks { grid-column: 2; min-width: 0; display: grid; gap: 6px; margin: 4px 0; }
  .hunks > details { border: 1px solid var(--border-2); border-radius: 4px; min-width: 0; }
  .hunks > details > summary { display: flex; align-items: center; gap: 6px; padding: 3px 8px; cursor: pointer; font: 12px var(--mono); color: var(--muted); }
  .hunks .diffstat b { font-weight: 600; }
  .hunk { font: 12px/1.5 var(--mono); border-top: 1px solid var(--border-2); overflow-x: auto; }
  .hunk div { padding: 0 8px; white-space: pre; } .hunk .d { background: var(--del); color: var(--del-fg); } .hunk .a { background: var(--add); }
  .hunk .d::before { content: "− "; } .hunk .a::before { content: "+ "; color: var(--muted); }
  .hunk-h { display: flex; align-items: center; gap: 6px; padding: 2px 4px 2px 8px; font: 11.5px var(--sans); color: var(--muted); white-space: normal; position: sticky; left: 0; }
  .hunk-h .btn { padding: 1px 8px; font-size: 12px; }
  .hunk.seen > :not(.hunk-h) { display: none; }
  .hunk.seen .hunk-h { color: var(--faint); }
  /* In the code view on a branch: the ghost of what it took out, over the lines it put in. */
  .gl { display: grid; grid-template-columns: 52px 92px minmax(0, 1fr); background: var(--del); color: var(--del-fg); user-select: none; }
  .gl .t { white-space: pre; padding: 0 16px; text-decoration: line-through; text-decoration-color: var(--del-edge); }
  .gl .t::before { content: "−"; display: inline-block; width: 14px; margin-left: -14px; }
  .gl.h { background: var(--accent-soft); color: var(--muted); font: 12px/22px var(--sans); }
  .gl.h .t { text-decoration: none; display: flex; align-items: center; gap: 6px; } .gl.h .t::before { content: none; }
  .gl.h .btn { padding: 0 8px; font-size: 12px; line-height: 18px; }
  .ln.chg { background: var(--add); } .ln.chg .n { box-shadow: inset 3px 0 var(--accent); color: var(--fg); }
  /* On main, an agent's batch waiting to land (#745): the lines it takes out struck through, what it puts in as grey ghosts below. */
  .ln.gone { background: var(--del); } .ln.gone .t { color: var(--del-fg); text-decoration: line-through; text-decoration-color: var(--del-edge); }
  .gl.a { background: var(--add); color: var(--fg); } .gl.a .t { text-decoration: none; } .gl.a .t::before { content: "+"; color: var(--muted); }
  .gl.h .btn.icon-only { padding: 0 5px; } .gl.h .tick { flex: none; }
  .wait-row { display: flex; align-items: center; gap: 4px; } .wait-row .btn.icon-only { padding: 1px 6px; }
  .kept { display: inline-flex; vertical-align: middle; margin-left: 8px; color: var(--muted); cursor: help; } .kept svg { width: 13px; height: 13px; }
  /* Back after being away: what changed meanwhile, a stretch at a time. */
  .ln.caught .n { box-shadow: inset 3px 0 var(--accent); }
  .caught-bar { position: sticky; bottom: 8px; z-index: 3; display: flex; align-items: center; gap: 6px; width: max-content; max-width: calc(100% - 16px); margin: 8px auto 0; padding: 4px 6px 4px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); box-shadow: 0 4px 16px rgb(0 0 0 / .12); font: 12px var(--sans); color: var(--muted); white-space: nowrap; }
  .caught-bar .n { font-variant-numeric: tabular-nums; min-width: 4ch; text-align: center; } .caught-bar .btn { padding: 1px 6px; }
  /* Lines landing: new rows open, changed ones cross-fade, deleted ones fold away (~200ms). */
  .ln.rise, .gl.rise { overflow: hidden; animation: rise .2s ease-out; } @keyframes rise { from { max-height: 0; opacity: 0; } to { max-height: 44px; opacity: 1; } }
  .ln.xfade .t { animation: xfade .2s ease-out; } @keyframes xfade { from { opacity: .15; } }
  .ln.fold { overflow: hidden; pointer-events: none; background: var(--del); animation: fold .2s ease-in forwards; } @keyframes fold { from { max-height: 44px; opacity: 1; } to { max-height: 0; opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .ln.rise, .gl.rise, .ln.xfade .t { animation: none; } .ln.fold { display: none; } }
  .checks { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12px; margin: 2px 0; }
  .check { display: inline-flex; align-items: center; gap: 4px; } .check a { color: inherit; } .check.failed, .check.cancelled { color: var(--del-fg); } .check.running svg { animation: spin 1.2s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .hook-verdict { display: inline-flex; align-items: center; gap: 4px; } .hook-verdict.nay { color: var(--del-fg); } .hook-verdict input { font-size: 12px; width: 11em; }
  #mirror-sync svg.spin { animation: spin 1s linear infinite; }
  .legend { display: inline-flex; gap: 10px; font: 500 11.5px var(--mono); color: var(--muted); }
  .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
  .legend .d { background: var(--del); box-shadow: inset 0 0 0 1px var(--del-edge); } .legend .a { background: var(--add); box-shadow: inset 0 0 0 1px var(--add-edge); }
  .diffstat b { font: 500 12px var(--mono); } .diffstat .minus { color: var(--accent-ink); } .diffstat .plus { color: var(--muted); }

  /* Popovers (share, clone, invite). */
  .pop { position: relative; }
  .pop > .panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 340px; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -8px rgba(0,0,0,.14); display: grid; gap: 9px; }
  .pop > .panel[hidden] { display: none; }
  .pop > .panel.open-right { left: 0; right: auto; }
  /* Run checks as a split button: the press and its menu of where (#2600). */
  .runsplit { display: inline-flex; } .runsplit > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .runsplit > [data-runmenu] { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; padding-inline: 6px; }
  .runsplit > .panel { width: 220px; padding: 6px; gap: 2px; } .runsplit > .panel .btn { justify-content: flex-start; } .runsplit > .panel .dim { opacity: .6; }
  /* Ship: the pop-out that walks build, plan, stage, deploy, with the stack drawn as paper tiles wired to the Worker. */
  .ship-panel { width: min(780px, calc(100vw - 32px)) !important; max-height: 78vh; overflow: auto; }
  .ship-steps { display: flex; gap: 6px; flex-wrap: wrap; }
  .ship-steps .btn { gap: 8px; }
  .ship-steps .btn.on { border-color: var(--fg); box-shadow: 0 0 0 3px var(--select); }
  .ship-steps .st { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); }
  .ship-steps .st.done { background: #2f9e44; } .ship-steps .st.running { background: var(--accent); animation: pulse 1s ease-in-out infinite; } .ship-steps .st.failed { background: var(--del-fg); }
  .imap { position: relative; display: flex; align-items: center; gap: 56px; padding: 18px 16px; overflow: auto; max-height: 300px; border: 1px solid var(--border); border-radius: 8px; background: radial-gradient(var(--border) 1px, transparent 1.2px) 0 0 / 18px 18px, var(--bg); }
  .imap .col { display: grid; gap: 10px; position: relative; z-index: 1; }
  .imap svg.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .imap svg.wires path { fill: none; stroke: var(--border-2); stroke-width: 1.6; stroke-dasharray: 5 4; }
  .imap svg.wires path.kept { stroke: var(--accent); stroke-dasharray: none; }
  .itile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; min-width: 200px; max-width: 280px; text-align: left; padding: 9px 12px 8px; color: var(--fg); background: var(--grain), var(--paper); border: 1px solid var(--border-2); border-radius: 6px; box-shadow: 0 1px 0 var(--border); cursor: pointer; font: inherit; }
  .itile:hover { background: var(--grain), linear-gradient(0deg, var(--accent-soft), var(--paper) 85%); border-color: var(--edge-hi); }
  .itile.sel { border-color: var(--fg); box-shadow: 0 0 0 3px var(--select); }
  .itile.kept { border-color: var(--accent); box-shadow: 0 1px 0 var(--accent-glow); }
  .itile b { display: block; font: 600 13px/1.25 var(--sans); overflow-wrap: anywhere; }
  .itile small { display: block; font: 400 11.5px/1.3 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
  .itile .kind { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
  .itile .badge-keep { color: var(--accent-ink); } .itile .badge-gone { color: var(--faint); }
  .imap-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); align-items: center; }
  .imap-legend span { display: inline-flex; gap: 5px; align-items: center; }
  .imap-note { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 13px; display: grid; gap: 6px; background: var(--grain), var(--paper); }
  .imap-note.kept { border-color: var(--accent); }
  .pair-qr { width: min(220px, 100%); margin: 0 auto 10px; border-radius: 8px; overflow: hidden; } .pair-qr svg { display: block; width: 100%; height: auto; }
  .copyline { display: flex; gap: 6px; } .copyline input { flex: 1; min-width: 0; font: 12px var(--mono); }

  /* The hero: plain white, a dot grid, one big confident line. */
  .hero { overflow-x: clip; border-bottom: 1px solid var(--border); background: radial-gradient(circle, var(--border) 1px, transparent 1.2px) 0 0 / 22px 22px, var(--bg); }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 56px; }
  .est { font: 500 11px var(--mono); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
  .headline { font: 600 clamp(34px, 4.6vw, 56px)/1.02 var(--sans); letter-spacing: -0.045em; margin: 12px 0 16px; }
  .headline em { font-style: normal; color: var(--accent-ink); }
  .lede { color: var(--muted); font-size: 16px; max-width: 540px; margin: 0 0 24px; }
  .stage { position: relative; height: 290px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); overflow: hidden; font: 400 12.5px/1.9 var(--mono); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 48px -24px rgba(0,0,0,.12); }
  .piece { position: absolute; left: 0; top: 0; display: flex; gap: 14px; padding: 0 12px 0 18px; white-space: pre; border: 1px solid transparent; border-radius: 5px; will-change: transform; transition: border-color .5s, background .5s, padding .5s, box-shadow .5s; }
  .piece .who { width: 96px; color: var(--faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
  .piece.apart { border-color: var(--border-2); background: var(--grain), var(--paper); padding: 4px 12px; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
  .slit { position: absolute; top: 8px; bottom: 8px; left: 0; width: 1px; background: var(--accent); opacity: 0; pointer-events: none; }
  .slit.go { animation: slit .75s cubic-bezier(.7, 0, .3, 1) forwards; }
  @keyframes slit { 0% { left: 0; opacity: 0; } 15% { opacity: .9; } 85% { opacity: .9; } 100% { left: 100%; opacity: 0; } }
  .piece.hit { animation: hit 1.1s ease-out; } .piece.hit .txt { animation: type .5s steps(24, end); }
  @keyframes hit { from { border-color: var(--accent); background: var(--accent-soft); } }
  @keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .seal { position: absolute; right: 14px; bottom: 12px; font: 500 11px/1.7 var(--mono); color: var(--fg); border: 1px solid var(--border-2); border-radius: 5px; padding: 1px 8px; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; background: var(--grain), var(--paper); }
  .seal::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; }
  .seal.on { opacity: 1; transform: none; }
  .phases { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; padding: 0; margin: 12px 2px 0; font: 500 11px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); counter-reset: ph; }
  .phases li { color: var(--faint); transition: color .4s; counter-increment: ph; } .phases li::before { content: counter(ph, decimal-leading-zero) "  "; } .phases li.on { color: var(--fg); }

  /* Home sections. */
  .section { overflow-x: clip; padding-top: 48px; }
  .section h2 { font: 600 22px var(--sans); letter-spacing: -0.03em; margin: 6px 0 4px; }
  .section > .wrap > p { margin: 0 0 18px; }
  .cmds { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
  .cmd { display: grid; grid-template-columns: 30px 1fr; gap: 3px 12px; padding: 16px 18px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); }
  .cmd .ico { grid-row: span 3; width: 30px; height: 30px; border-radius: 5px; background: var(--grain), var(--paper); border: 1px solid var(--border-2); display: grid; place-items: center; color: var(--fg); }
  .cmd > b { font-weight: 600; } .cmd > span { color: var(--muted); font-size: 13px; } .cmd > code { color: var(--faint); font-size: 11.5px; }

  /* Hover (or tap) a command: a big panel above it plays a short loop of what it does. All CSS;
     each loop is --d long, and .a1-.a4 bring things in at four beats through it. */
  .cmd { position: relative; } .cmd:focus { outline: 0; } .cmd:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--accent); }
  .mini { --d: 4.2s; display: none; position: absolute; left: -1px; right: -1px; bottom: calc(100% + 6px); z-index: 10; height: 228px; padding: 18px 20px; border: 1px solid var(--border-2); border-radius: 8px; background: var(--grain), var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 48px -16px rgba(0,0,0,.22); font: 400 12.5px/24px var(--mono); color: var(--fg); overflow: hidden; pointer-events: none; animation: m-in .18s ease-out; }
  .cmd:hover .mini, .cmd:focus .mini { display: block; }
  @keyframes m-in { from { opacity: 0; transform: translateY(6px); } }
  .mini .r { position: relative; height: 24px; white-space: pre; } .mini .f { color: var(--faint); }
  .mini .cap { position: absolute; left: 20px; bottom: 12px; font: 500 10.5px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .mini .chip { display: inline-block; font: 500 11.5px/22px var(--mono); padding: 0 8px; border: 1px solid var(--border-2); border-radius: 5px; background: var(--bg); white-space: pre; }
  .mini .who { margin-left: 6px; padding: 1px 5px; border-radius: 3px; font: 500 10px/1 var(--sans); color: #fff; background: var(--accent); vertical-align: 2px; } .mini .who.b { background: var(--fg); }
  .mini .tp { display: inline-block; vertical-align: bottom; overflow: hidden; width: var(--w); border-right: 2px solid var(--accent); animation: m-type var(--d) steps(var(--n, 12)) infinite both; } .mini .tp.b { border-color: var(--fg); animation-delay: .5s; }
  @keyframes m-type { 0%, 4% { width: 0; } 30%, 100% { width: var(--w); } }
  .mini .a1 { animation: m-a1 var(--d) ease-out infinite both; } .mini .a2 { animation: m-a2 var(--d) ease-out infinite both; }
  .mini .a3 { animation: m-a3 var(--d) ease-out infinite both; } .mini .a4 { animation: m-a4 var(--d) ease-out infinite both; }
  @keyframes m-a1 { 0%, 12% { opacity: 0; transform: translateY(var(--dy, 6px)); } 20%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  @keyframes m-a2 { 0%, 30% { opacity: 0; transform: translateY(var(--dy, 6px)); } 38%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  @keyframes m-a3 { 0%, 48% { opacity: 0; transform: translateY(var(--dy, 6px)); } 56%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  @keyframes m-a4 { 0%, 64% { opacity: 0; transform: translateY(var(--dy, 6px)); } 72%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  .m-tag { position: absolute; right: 20px; } .mini mark { background: var(--accent-soft); color: var(--del-fg); border-radius: 2px; }
  /* browse */
  .m-hl { position: absolute; left: 12px; right: 12px; top: 18px; height: 24px; border-radius: 4px; background: var(--select); box-shadow: inset 2px 0 var(--accent); animation: m-walk var(--d) ease-in-out infinite; }
  @keyframes m-walk { 0%, 14% { transform: none; } 24%, 38% { transform: translateY(24px); } 48%, 62% { transform: translateY(48px); } 72%, 92% { transform: translateY(72px); } }
  /* fork */
  .m-box { position: absolute; top: 18px; left: 20px; width: 38%; height: 136px; padding: 6px 12px; border: 1px solid var(--border-2); border-radius: 6px; background: var(--bg); font-size: 11.5px; line-height: 20px; }
  .m-box i { display: block; height: 6px; width: var(--w); margin-top: 12px; border-radius: 3px; background: var(--add-edge); }
  .m-copy { border-color: var(--accent); transform: translateX(calc(100% + 24px)); animation: m-fork var(--d) cubic-bezier(.6, 0, .3, 1) infinite both; } .m-copy i { background: var(--del-edge); }
  @keyframes m-fork { 0%, 10% { transform: none; opacity: 0; } 18% { opacity: 1; transform: none; } 48%, 90% { transform: translateX(calc(100% + 24px)); opacity: 1; } 100% { transform: translateX(calc(100% + 24px)); opacity: 0; } }
  /* share, private lines */
  .m-sel { position: absolute; left: 12px; right: 12px; top: 42px; height: 48px; border-radius: 4px; background: var(--accent-soft); box-shadow: inset 2px 0 var(--accent); }
  .m-blur { filter: blur(4px); opacity: .45; animation: m-blur var(--d) ease-in-out infinite both; }
  @keyframes m-blur { 0%, 22% { filter: none; opacity: 1; } 38%, 88% { filter: blur(4px); opacity: .45; } 100% { filter: none; opacity: 1; } }
  /* invite */
  .m-crew { display: flex; gap: 14px; margin-top: 22px; } .m-av { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--bg); font: 600 13px var(--sans); }
  .m-av.bot { border-radius: 10px; border-color: var(--accent); color: var(--accent-ink); font: 500 11px var(--mono); }
  /* public or private */
  .m-sw { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
  .m-tr { position: relative; flex: none; width: 52px; height: 28px; border-radius: 14px; background: var(--accent); animation: m-trk var(--d) infinite both; }
  .m-tr i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transform: translateX(24px); animation: m-knob var(--d) cubic-bezier(.6, 0, .3, 1) infinite both; }
  @keyframes m-trk { 0%, 40% { background: var(--border-2); } 50%, 90% { background: var(--accent); } 100% { background: var(--border-2); } }
  @keyframes m-knob { 0%, 40% { transform: none; } 50%, 90% { transform: translateX(24px); } 100% { transform: none; } }
  .m-st { display: grid; } .m-st > span { grid-area: 1 / 1; }
  .m-off { opacity: 0; animation: m-off var(--d) infinite both; } .m-on { animation: m-on var(--d) infinite both; }
  @keyframes m-off { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes m-on { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
  /* commit */
  .m-add { background: var(--add); box-shadow: inset 3px 0 var(--add-edge); animation: m-sink var(--d) ease-in infinite both; }
  @keyframes m-sink { 0% { opacity: 0; } 8%, 30% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateY(60px) scale(.6); } }
  .m-git { position: absolute; left: 20px; right: 20px; top: 128px; height: 2px; background: var(--border-2); }
  .m-git i { position: absolute; top: -5px; left: var(--x); width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--border-2); }
  .m-git i.new { border-color: var(--accent); background: var(--accent); } .m-git .chip { position: absolute; top: 14px; left: calc(var(--x) - 60px); }
  /* time travel */
  .m-v1, .m-v2 { opacity: 0; } .m-v1 { animation: m-v1 var(--d) infinite both; } .m-v2 { animation: m-v2 var(--d) infinite both; } .m-v3 { animation: m-v3 var(--d) infinite both; }
  @keyframes m-v1 { 0%, 30% { opacity: 1; } 33%, 97% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes m-v2 { 0%, 30% { opacity: 0; } 33%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
  @keyframes m-v3 { 0%, 63% { opacity: 0; } 66%, 97% { opacity: 1; } 100% { opacity: 0; } }
  .m-scrub { position: absolute; left: 20px; right: 20px; top: 130px; height: 2px; background: var(--border-2); }
  .m-scrub i { position: absolute; top: -6px; left: calc(100% - 14px); width: 14px; height: 14px; border-radius: 50%; background: var(--accent); animation: m-scrub var(--d) cubic-bezier(.6, 0, .3, 1) infinite both; }
  @keyframes m-scrub { 0%, 30% { left: 0; } 33%, 63% { left: calc(50% - 7px); } 66%, 97% { left: calc(100% - 14px); } 100% { left: 0; } }
  .m-ticks { position: absolute; left: 20px; right: 20px; top: 142px; display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); }
  /* cut */
  .m-cut { position: relative; width: fit-content; padding-right: 10px; border-radius: 4px; background: var(--bg); transform: translate(24px, -2px); box-shadow: 0 0 0 1px var(--accent); animation: m-cut var(--d) cubic-bezier(.6, 0, .3, 1) infinite both; }
  @keyframes m-cut { 0%, 30% { transform: none; box-shadow: 0 0 0 1px transparent; background: transparent; } 44%, 90% { transform: translate(24px, -2px); box-shadow: 0 0 0 1px var(--accent); background: var(--bg); } 100% { transform: none; } }
  .m-snip { position: absolute; left: 12px; right: 12px; height: 0; border-top: 1.5px dashed var(--accent); }
  /* collect, search */
  .m-pl { margin-top: 6px; padding: 8px; border: 1px solid var(--border-2); border-radius: 6px; background: var(--bg); display: grid; gap: 6px; justify-items: start; } .m-pl .chip { --dy: -40px; background: var(--paper); }
  .m-q { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; margin-bottom: 8px; border: 1px solid var(--fg); border-radius: 5px; background: var(--bg); }
  /* play */
  .m-bird { position: absolute; padding: 0 8px; border: 1px solid var(--border-2); border-radius: 5px; background: var(--paper); font-size: 11.5px; line-height: 22px; white-space: pre; }
  .m-b1 { animation: m-b1 var(--d) ease-in-out infinite both; } .m-b2 { animation: m-b2 var(--d) ease-in-out infinite alternate both; } .m-b3 { animation: m-b3 calc(var(--d) * .75) ease-in-out infinite alternate both; }
  @keyframes m-b1 { 0% { left: 85%; top: 8%; transform: rotate(0); } 45% { left: 24%; top: 58%; transform: rotate(-8deg); border-color: var(--border-2); } 50% { left: 22%; top: 60%; border-color: var(--accent); background: var(--accent-soft); } 85%, 100% { left: 105%; top: -25%; transform: rotate(40deg); border-color: var(--accent); } }
  @keyframes m-b2 { from { left: 55%; top: 14%; transform: rotate(3deg); } to { left: 38%; top: 30%; transform: rotate(-4deg); } }
  @keyframes m-b3 { from { left: 45%; top: 62%; transform: rotate(-3deg); } to { left: 62%; top: 48%; transform: rotate(5deg); } }
  /* The swatter: a rolled-up README with an orange rubber band. */
  .m-swat { position: absolute; left: 22px; bottom: 44px; width: 70px; height: 12px; border-radius: 6px; border: 1px solid var(--fg); background: linear-gradient(90deg, transparent 18px, var(--accent) 18px 22px, transparent 22px), repeating-linear-gradient(90deg, var(--paper) 0 5px, var(--border-2) 5px 6px); transform-origin: 4px 50%; transform: rotate(-55deg); animation: m-swat var(--d) ease-in infinite both; }
  @keyframes m-swat { 0%, 40% { transform: rotate(-55deg); } 50% { transform: rotate(15deg); } 70%, 100% { transform: rotate(-55deg); } }
  @media (prefers-reduced-motion: reduce) { .mini, .mini *, .mini *::before, .mini *::after { animation: none !important; } }
  /* Levels scroll by slowly, top to bottom and round again; hover or focus holds them still. */
  .levels { height: 340px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
  .levels .reel { display: grid; gap: 10px; padding-bottom: 10px; animation: reel var(--reel-s, 60s) linear infinite; }
  .levels:hover .reel, .levels:focus-within .reel { animation-play-state: paused; }
  @keyframes reel { to { transform: translateY(-50%); } }
  @media (prefers-reduced-motion: reduce) { .levels { overflow: auto; } .levels .reel { animation: none; } .levels .reel [aria-hidden] { display: none; } }
  .level .blurb { color: var(--muted); font: 13px var(--sans); }
  .level { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px 10px 14px; color: var(--fg); border: 1px solid var(--border-2); border-radius: 5px; background: var(--grain), var(--paper); text-decoration: none; transition: border-color .12s, background .12s; }
  .level > a { color: var(--fg); text-decoration: none; min-width: 0; } .level > a:hover b { color: var(--accent-ink); }
  .lvl-acts { display: flex; align-items: center; gap: 6px; } .lvl-acts .lvl-st { margin-right: 4px; }
  #lvl-admin { margin-bottom: 10px; } i.inline, svg.inline { width: 13px; height: 13px; vertical-align: -2px; }
  @media (max-width: 560px) { .level { grid-template-columns: 1fr; } .level .lvl-n, .level .blurb { display: none; } }
  .level:hover { border-color: var(--edge-hi); background: var(--grain), linear-gradient(0deg, var(--accent-soft), var(--paper) 85%); }
  .level b { display: block; font-weight: 600; } .level .muted { font: 12px var(--mono); }
  .lvl-n { font: 500 12px var(--mono); color: var(--faint); }
  .fit-ready, .fit-likely { color: var(--fg); } .fit-ready::before { content: "●"; color: var(--accent-ink); } .fit-poor { color: var(--faint); }
  .fit-why { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
  .fw-logos { display: inline-flex; align-items: center; gap: 6px; vertical-align: -3px; white-space: nowrap; } svg.fw { width: 15px; height: 15px; fill: var(--fg); flex: none; }
  /* The limits panel: a thin meter per cap. */
  .meter { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; } .meter i { display: block; height: 100%; background: var(--fg); } .meter.hot i { background: var(--accent); }
  .lim { display: grid; gap: 3px; font-size: 13px; } .lim .row { justify-content: space-between; } .lim code { font-size: 11.5px; }
  .lvl-st { font: 500 11px var(--mono); color: var(--muted); } .st-ready { color: var(--fg); } .st-ready::before { content: "● "; color: var(--accent-ink); }

  /* Profiles, collections, search. */
  .cards { display: grid; gap: 16px; padding-top: 20px; } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  /* Own your git: the desktop is home, the clouds are where it syncs out to. */
  /* Two ways in: the same calls for a hand and for an agent's eye. */
  .both { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; padding-top: 20px; }
  .both > div { border: 1px solid var(--border); border-radius: 8px; padding: 18px; background: var(--bg); display: grid; gap: 6px; align-content: start; }
  .both .ico { width: 30px; height: 30px; border-radius: 5px; background: var(--grain), var(--paper); border: 1px solid var(--border-2); display: grid; place-items: center; }
  .both b { font-weight: 600; } .both p { margin: 0; color: var(--muted); font-size: 13.5px; } .both code { color: var(--faint); font-size: 11.5px; }
  .both .hand { color: var(--accent-ink); font: 500 11px var(--mono); }
  .owngit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 20px; }
  .owngit > div { border: 1px solid var(--border); border-radius: 8px; padding: 18px; background: var(--bg); }
  .owngit > div.home { border-color: var(--accent); background: var(--accent-soft); }
  .owngit b { display: block; margin-bottom: 6px; } .owngit p { margin: 0; color: var(--muted); }
  .owngit .flow { font: 500 12px/1.6 var(--mono); color: var(--fg); margin-top: 12px; }
  .owngit .flow em { font-style: normal; color: var(--accent-ink); }
  /* The breather under the hero: a few plain lines that rise in as you scroll, and the three helpers' names
     drifting behind them. Scroll-driven CSS on transform and opacity only, so no script and no layout per frame;
     without support (or with reduced motion) it is simply all there. */
  .breathe { position: relative; overflow: clip; border-bottom: 1px solid var(--border); padding: 14vh 0 10vh; view-timeline: --breathe; }
  .breathe .wrap { position: relative; z-index: 1; display: grid; gap: 18vh; }
  .br-far { position: absolute; left: 0; top: 34%; z-index: 0; font: 700 clamp(84px, 15vw, 220px)/1 var(--sans); letter-spacing: -0.05em; color: var(--border); white-space: nowrap; pointer-events: none; user-select: none; }
  .br-line { font: 600 clamp(26px, 3.6vw, 46px)/1.12 var(--sans); letter-spacing: -0.035em; max-width: 24ch; margin: 0; }
  .br-line em { font-style: normal; color: var(--accent-ink); }
  .br-sub { font-size: clamp(18px, 2.1vw, 26px); font-weight: 500; color: var(--muted); max-width: 36ch; margin-top: -12vh; } .br-sub b { color: var(--fg); font-weight: 600; }
  .br-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
  .br-trio a { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: inherit; text-decoration: none; }
  .br-trio a:hover { border-color: var(--accent); } .br-trio b { font: 600 22px var(--sans); letter-spacing: -0.03em; display: flex; align-items: center; gap: 8px; } .br-trio b svg { color: var(--accent-ink); } .br-trio span { color: var(--muted); font-size: 14px; }
  .br-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px 28px; }
  .br-stats > div, .live-stats > span { display: grid; gap: 4px; align-content: start; color: var(--muted); font-size: 14px; }
  .br-stats b { font: 600 clamp(32px, 4vw, 48px)/1 var(--sans); letter-spacing: -0.04em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
  .br-stats > .live-stats { display: contents; }
  .br-more { margin: 0; display: flex; align-items: center; gap: 6px; }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .br-in { animation: br-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
      .br-far { animation: br-drift linear both; animation-timeline: --breathe; animation-range: cover; }
      @keyframes br-in { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
      @keyframes br-drift { from { transform: translate3d(8%, -20vh, 0); } to { transform: translate3d(-45%, 30vh, 0); } }
    }
  }
  .quits { font: 500 12px/1.8 var(--mono); color: var(--muted); margin-top: 16px; } .quits span + span::before { content: " · "; color: var(--faint); }
  @media (max-width: 720px) { .owngit { grid-template-columns: 1fr; } }
  /* A profile: one header line, the repos and digging in the main column, collections and the page on the side. */
  .prof { max-width: 1160px; padding-top: 16px; padding-bottom: 32px; }
  .prof-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
  .prof-head h1 { margin: 0; font: 600 20px/1.2 var(--sans); letter-spacing: -0.02em; display: flex; align-items: center; gap: 6px; align-self: center; }
  .prof-head .stat { font: 12px var(--mono); color: var(--faint); }
  /* Pulse: lines landed per hour over the week; it beats while they're typing. */
  .pulse { display: inline-block; vertical-align: middle; color: var(--accent-ink); }
  .pulse rect { fill: currentColor; } .pulse .base { fill: var(--border); }
  .beat-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
  .live .beat-dot, .beat-dot.live { background: var(--accent); animation: heartbeat 1.1s ease-in-out infinite; }
  @keyframes heartbeat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.5); } 30% { transform: scale(1.1); } 45% { transform: scale(1.35); } }
  .who.beat { animation: heartbeat .6s ease-out; }
  /* Your pulse on your profile: no box, a line of words over an isometric block of the week's hours. */
  .pulse-free { margin: 8px 0 24px; } .pulse-free > .bar { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 0 4px; }
  .pulse-free > .body { display: grid; gap: 4px; justify-items: center; } .pulse-free > .body > .muted { justify-self: start; padding: 0 4px; }
  .pulse-iso { width: 100%; max-width: 560px; height: auto; color: var(--accent); }
  .pulse-iso .floor { fill: var(--canvas); stroke: var(--border); stroke-width: .3; }
  .pulse-iso .t { fill: currentColor; } .pulse-iso .r { fill: color-mix(in srgb, currentColor 72%, #000); } .pulse-iso .l { fill: color-mix(in srgb, currentColor 52%, #000); }
  .pulse-iso g:hover .t { fill: color-mix(in srgb, currentColor 70%, #fff); }
  .crew-pulse { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; } .crew-pulse svg.pulse { width: 56px; height: 14px; }
  @media (prefers-reduced-motion: reduce) { .live .beat-dot, .beat-dot.live, .who.beat { animation: none; } }
  .prof-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
  .top8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .top8 .slot { position: relative; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 10px 4px; min-width: 0; text-align: center; font-size: 12px; }
  .top8 .slot a { display: grid; justify-items: center; gap: 4px; color: inherit; text-decoration: none; max-width: 100%; } .top8 .slot a:hover span { text-decoration: underline; }
  .top8 .slot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .top8 .slot i, .top8 .slot svg { width: 28px; height: 28px; } .top8 .sad { border-style: dashed; color: var(--faint); gap: 4px; }
  .top8 .x { position: absolute; top: 2px; right: 2px; padding: 2px; border: 0; background: none; color: var(--faint); cursor: pointer; } .top8 .x i, .top8 .x svg { width: 14px; height: 14px; } .top8 .x:hover { color: var(--fg); }
  .prof .hid { opacity: .5; } .prof .hid:hover { opacity: 1; }
  .shows { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; } .shows label { display: flex; align-items: center; gap: 4px; }
  .prof-grid .box > .body, .prof-grid .fold > form > .body { padding: 8px 12px; }
  .prof-grid .box > .body > p:first-child { margin-top: 0; }
  .prof-grid aside .photo iframe { height: 160px; }
  /* An agent's pulse: a bar per day, its line edits, 30 days. */
  .agent-pulse { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; align-items: end; height: 48px; }
  .agent-pulse i { display: block; min-height: 2px; border-radius: 2px; background: var(--border); }
  .agent-pulse i.on { background: var(--accent); }
  /* A person's code city: a quiet door at the foot of their profile, in a face the rest of the site never uses. */
  .av-dot { align-self: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--border-2); background: var(--bg-2, var(--bg)); cursor: pointer; overflow: hidden; flex: none; } .av-dot:hover { border-color: var(--fg); } .av-dot canvas { width: 100%; height: 100%; display: block; }
  .av-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0,0,0,.55); padding: 16px; }
  .av-modal .av-sheet { background: var(--bg); border: 1px solid var(--border-2); border-radius: 14px; width: min(1180px, 100%); height: min(860px, 100%); overflow: hidden; display: grid; grid-template-columns: minmax(260px, 400px) 1fr; grid-template-rows: auto minmax(0, 1fr); box-shadow: 0 24px 80px rgba(0,0,0,.35); }
  .av-modal .head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .av-modal .head .grow { flex: 1; }
  .av-stage { display: grid; place-items: center; padding: 20px; min-height: 0; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--fg) 4%, var(--bg)), color-mix(in srgb, var(--fg) 11%, var(--bg))); border-right: 1px solid var(--border); } .av-stage canvas { width: 100%; max-width: 340px; max-height: 100%; aspect-ratio: 4 / 5; }
  .av-ed { display: flex; flex-direction: column; min-height: 0; }
  .av-tabs { display: flex; gap: 4px; padding: 12px 16px 0; border-bottom: 1px solid var(--border); overflow-x: auto; } .av-tabs button { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--faint); font: 500 13px var(--sans); cursor: pointer; white-space: nowrap; } .av-tabs button:hover { color: var(--fg); } .av-tabs button.on { color: var(--fg); border-bottom-color: var(--fg); }
  .av-panel { flex: 1; overflow: auto; padding: 14px 16px; display: grid; gap: 16px; align-content: start; } .av-sec h4 { margin: 0 0 8px; font: 600 12px var(--sans); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
  .av-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; } .av-tiles button { display: grid; justify-items: center; gap: 2px; padding: 4px 2px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); cursor: pointer; font: 11px var(--sans); color: var(--faint); } .av-tiles button:hover { border-color: var(--border-2); background: color-mix(in srgb, var(--fg) 4%, var(--bg)); } .av-tiles button.on { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); color: var(--fg); } .av-tiles canvas { width: 64px; height: 64px; border-radius: 8px; }
  .av-sw { display: flex; gap: 8px; flex-wrap: wrap; } .av-sw button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-2); cursor: pointer; padding: 0; } .av-sw button.on { outline: 2px solid var(--fg); outline-offset: 2px; }
  .av-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); } .av-foot .muted { flex: 1; } .av-foot .btn { white-space: nowrap; }
  @media (max-width: 700px) { .av-modal .av-sheet { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); } .av-stage { border-right: 0; border-bottom: 1px solid var(--border); padding: 12px; } .av-stage canvas { max-width: 150px; } }
  .city-door { display: flex; justify-content: center; gap: 14px; margin: 48px 0 8px; font: italic 400 13px/1 "Didot", "Bodoni 72", "Cormorant Garamond", Georgia, serif; letter-spacing: .18em; text-transform: lowercase; }
  .city-door a, .city-door label { display: inline-flex; gap: 6px; align-items: center; color: var(--faint); text-decoration: none; transition: color .6s; }
  .city-door a:hover, .city-door label:hover { color: var(--fg); }
  .city-door svg { width: 13px; height: 13px; stroke-width: 1.5; opacity: .45; transition: opacity .6s; } .city-door :hover svg { opacity: 1; }
  .city-door input { margin: 0; accent-color: var(--muted); }
  .list .when { margin-left: auto; font: 12px var(--mono); color: var(--faint); white-space: nowrap; }
  .bar .barform { margin-left: auto; display: flex; gap: 6px; }
  .bar .barform input, .bar .barform select { padding: 2px 8px; font-size: 12.5px; } .bar .barform input { width: 150px; } .bar .barform .btn { padding: 2px 8px; font-size: 12.5px; }
  .bar .barform .seg button { font-size: 12.5px; padding: 2px 8px; display: inline-flex; gap: 4px; align-items: center; } .bar .barform .seg .octo, .bar .barform .seg svg { width: 14px; height: 14px; } .bar .barform[data-mode=gh] input { width: 230px; }
  @media (max-width: 860px) { .prof-grid { grid-template-columns: 1fr; } .bar .barform { margin-left: 0; } }
  .photo iframe { width: 100%; height: 220px; border: 0; display: block; background: #fff; }
  /* Full page: the page box fills the window (a circular wipe from the corner, where the browser has view transitions) and the profile's cards scroll over it. */
  .btn.danger { color: var(--del-fg); border-color: var(--del-fg); }
  .stage-x { display: none; }
  body.staged .photo { position: fixed; inset: 0; z-index: -1; margin: 0; border: 0; border-radius: 0; }
  body.staged, body.staged main { background: transparent; }
  body.staged .photo .bar, body.staged .tour, body.staged .guide, body.staged .guide-fab { display: none; }
  body.staged .photo iframe { height: 100% !important; }
  body.staged .stage-x { display: block; }
  /* Loose text gets a card of its own so it reads over the world. */
  body.staged .prof-head, body.staged .pulse-free { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: stage-wipe .55s ease-in-out both; }
  @keyframes stage-wipe { from { clip-path: circle(0 at 100% 0); } to { clip-path: circle(150% at 100% 0); } }
  .list a { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border); text-decoration: none; } .list a:first-child { border-top: 0; }
  .list a:hover { color: var(--accent-ink); }
  .folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .folders a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 6px; text-decoration: none; text-align: center; min-width: 0; }
  .folders a:hover { background: var(--accent-soft); color: var(--accent-ink); }
  .folders svg.lucide { width: 40px; height: 40px; stroke-width: 1.25; }
  .folders .fname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .folders .when { font-size: 11px; color: var(--muted); }

  /* The command palette is the house one (@rustybuns/util/palette, from /commands.js), in this page's tokens. */
  :root { --rb-pal-bg: var(--bg); --rb-pal-fg: var(--fg); --rb-pal-muted: var(--muted); --rb-pal-line: var(--border-2); --rb-pal-hover: var(--canvas);
    --rb-pal-accent: var(--accent); --rb-pal-scrim: var(--scrim); --rb-pal-font: var(--sans); }
  .rb-pal .rb-pal-sheet { width: min(640px, 100%); border-width: 1px; border-radius: 10px; }
  .rb-pal .rb-pal-list li.on { box-shadow: inset 2px 0 0 var(--accent); }
  .rb-pal .rb-pal-foot { background: var(--canvas); }
  .rb-pal .rb-pal-q input { border: 0; outline: 0; box-shadow: none; font-size: 15px; }
  /* The drawer: a sheet that slides in from the right (sign in, your handle). */
  .drawer { position: fixed; inset: 0; z-index: 55; }
  .drawer .scrim { position: absolute; inset: 0; background: var(--ui-scrim); backdrop-filter: blur(2px); opacity: 0; transition: opacity .18s; }
  .drawer .sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--ui-bg); color: var(--ui-ink); border-left: var(--ui-border) solid var(--ui-line); box-shadow: -24px 0 64px -24px rgba(0,0,0,.22); transform: translateX(24px); opacity: 0; transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .18s; }
  .drawer.on .scrim { opacity: 1; } .drawer.on .sheet { transform: none; opacity: 1; }
  .drawer .dhead { display: flex; align-items: center; gap: 8px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--border); }
  .drawer .dbody { flex: 1; overflow: auto; padding: 24px 20px; display: grid; align-content: start; gap: 14px; }
  .drawer .dfoot { display: flex; gap: 8px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--canvas); }
  .drawer h2 { font: 600 20px/1.2 var(--sans); letter-spacing: -0.03em; margin: 0; }
  .drawer .lede { font-size: 14px; margin: -6px 0 4px; }
  .drawer form { display: grid; gap: 10px; }
  .drawer .btn.wide { width: 100%; justify-content: center; padding: 10px 12px 9px; }
  .or { display: flex; align-items: center; gap: 10px; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
  .or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
  .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; white-space: nowrap; padding: 2px; border: 1px solid var(--border-2); border-radius: 6px; background: var(--canvas); }
  .seg button, .seg a { font: 500 13px var(--sans); color: var(--muted); background: transparent; border: 0; border-radius: 4px; padding: 6px; cursor: pointer; text-align: center; text-decoration: none; }
  .seg button.on, .seg a.on { color: var(--fg); background: var(--grain), var(--paper); box-shadow: 0 0 0 1px var(--border-2); }
  .field { display: grid; gap: 5px; } .field > span { font: 500 12px var(--sans); color: var(--muted); }
  .at { display: flex; align-items: center; border: 1px solid var(--border-2); border-radius: 5px; background: var(--bg); }
  .at:focus-within { border-color: var(--fg); box-shadow: 0 0 0 3px var(--tint); }
  .at b { padding: 0 2px 0 10px; font: 500 15px var(--mono); color: var(--accent-ink); }
  .at input { flex: 1; border: 0; box-shadow: none !important; font: 500 15px var(--mono); padding: 8px 10px 8px 0; min-width: 0; }
  .check { font-size: 12.5px; color: var(--muted); min-height: 19px; margin: 0; }
  .check.ok::before { content: "● "; color: var(--accent-ink); } .check.no { color: var(--del-fg); }
  .formmsg { font-size: 12.5px; color: var(--del-fg); margin: 0; min-height: 0; }
  .small { font-size: 12.5px; }
  .rule { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--faint); }
  .rule:first-of-type { border-top: 0; }
  .rule .switch { margin-left: 0; }
  .rule .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font-weight: 500; cursor: help; }
  .rule .name .hot { margin-left: 6px; font: 500 11px var(--mono); color: var(--accent-ink); }
  .rule :is(input, select) { padding: 1px 4px; font-size: 12.5px; line-height: 18px; }
  .rule select[name=window_s] { width: 76px; } .rule select[name=on_fail] { width: 68px; }
  .rule input[name=max] { width: 56px; font-family: var(--mono); text-align: right; }
  .rule .btn { padding: 2px 4px; color: var(--muted); }
  .rule.off :is(.name, input[name=max], select, span) { opacity: .4; }
  /* The rate limits page: rule groups flowed into columns, a save bar that sticks, the log as rows. */
  .limits .rgroups { columns: 2 440px; column-gap: 32px; }
  .limits .rgroups > section { break-inside: avoid; margin: 0 0 18px; } .limits .rgroups h2, .limits .log h2 { margin: 0 0 4px; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .limits h1 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1.5em; font-weight: 600; } .page-h { font-size: 1.5em; font-weight: 600; }
  /* The home feed (#/feed): the digest first, then one row per person or agent run, its raw events one click behind. */
  .feed { max-width: 820px; } .feed h1 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1.5em; font-weight: 600; } .feed h1 .seg { flex: none; } .feed h1 .seg a { padding: 3px 10px; font-size: 12.5px; }
  .feed .digest .body { white-space: pre-wrap; line-height: 1.5; }
  .feed .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
  .feed details.grp { border: 1px solid var(--border); border-radius: 6px; margin: 0 0 8px; }
  .feed details.grp > summary { display: flex; gap: 8px; align-items: center; padding: 8px 12px; cursor: pointer; list-style: none; }
  .feed details.grp > summary svg { width: 14px; height: 14px; color: var(--who); flex: none; }
  .feed details.grp > summary .what { flex: 1; min-width: 0; }
  .feed details.grp > summary .age { flex: none; color: var(--muted); font: 500 12px var(--mono); }
  .feed .evs { border-top: 1px solid var(--border); padding: 6px 12px 8px 34px; font-size: 13px; display: grid; gap: 2px; }
  .feed .evs a { overflow-wrap: anywhere; }
  .limits .savebar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 0; margin-bottom: 16px; background: var(--bg); border-top: 1px solid var(--border); }
  .limits .ev .btn { margin-left: auto; padding: 2px 4px; color: var(--muted); }
  /* Paid tiers (src/tiers.ts): a gem-coloured stamp beside a name. The colours are the stones' own, so they hold in both themes. */
  .tier { --g1: #7c8cf0; --g2: #3b4cc0; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px; font: 600 11px/16px var(--sans); color: #fff; vertical-align: 2px; white-space: nowrap;
    background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 1px 6px color-mix(in srgb, var(--g2) 55%, transparent); text-shadow: 0 1px 1px rgba(0,0,0,.3); }
  .tier svg { width: 12px; height: 12px; }
  .tier.tanzanite { --g1: #8a7ff0; --g2: #3a3fb8; } .tier.alexandrite { --g1: #2ecf9b; --g2: #b0306a; } .tier.painite { --g1: #f0644c; --g2: #7d0f2b; }
  .tier.painite, .tier.alexandrite { background-size: 160% 100%; animation: tier-glint 6s ease-in-out infinite alternate; }
  @keyframes tier-glint { to { background-position: 100% 0; } } @media (prefers-reduced-motion: reduce) { .tier { animation: none !important; } }
  .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 0 0 12px; }
  .tiers .card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--muted); } .tiers .card b { display: block; margin: 6px 0 2px; font-size: 18px; color: var(--fg); }
  #tier-add { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; } #tier-add input { width: 11em; }
  .limits .log { margin: 0 0 18px; } .limits .log h2 { margin: 0 0 4px; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .limits .log .ev { padding: 5px 0; } .limits .log .ev b { font: 500 12.5px var(--mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22em; }
  .limits .ev, .jobs .ev { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; border-top: 1px solid var(--border); font-size: 13px; }
  .limits .ev:first-of-type, .jobs .ev:first-of-type { border-top: 0; }
  .limits .tag, .jobs .tag { font: 500 11px var(--mono); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-2); color: var(--muted); }
  #mirror .tag { font: 500 11px var(--mono); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-2); color: var(--muted); }
  #mirror .tag.ok { color: var(--accent-ink); border-color: var(--accent); } #mirror .tag.fail { color: var(--del-fg); border-color: var(--del-fg); }
  /* A git action, drawn before you press it (#693): each side's commits, before → after. */
  .gitpic { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12px; }
  .gitpic .side { display: grid; grid-template-columns: auto auto; gap: 3px 8px; align-items: center; } .gitpic .side.after { grid-template-columns: auto; } .gitpic .gl { display: contents; } .gitpic .arrow { color: var(--muted); }
  .gitpic .gl > span:first-child:not(.dots) { color: var(--muted); font: 500 11px var(--mono); max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gitpic .dots { display: flex; align-items: center; height: 12px; } .gitpic .dots i { box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-right: 6px; position: relative; background: var(--border-2); }
  .gitpic .dots i + i::before { content: ""; position: absolute; right: calc(100% + 1px); top: calc(50% - 1px); width: 5px; height: 2px; background: var(--border-2); }
  .gitpic .dots i.u { background: var(--fg); } .gitpic .dots i.m { background: var(--accent); }
  .gitpic .dots i.x { background: none; border: 1.5px dashed var(--accent); opacity: .6; } .gitpic .dots i.p { background: var(--bg); border: 3px solid var(--accent); }
  .gitpic .dots i.k, .gitpic .dots i.w { border-radius: 2px; transform: rotate(45deg) scale(.85); } .gitpic .dots i.k { background: var(--accent); } .gitpic .dots i.w { background: var(--fg); }
  .gitpic .dots i.k::before, .gitpic .dots i.w::before { display: none; }
  .gitpic .dots i.r { background: repeating-linear-gradient(135deg, var(--accent) 0 2px, var(--bg) 2px 4px); border: 1.5px solid var(--accent); } .gitpic .dots i.c { background: var(--accent); box-shadow: inset 0 0 0 2px var(--fg); }
  .gitpic .say { flex-basis: 100%; color: var(--muted); }
  #mirror .gitpic { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--canvas); }
  #gitpop { position: fixed; z-index: 60; padding: 8px 10px; border: 1px solid var(--border-2); border-radius: 6px; background: var(--bg); box-shadow: 0 4px 16px rgb(0 0 0 / .12); pointer-events: none; max-width: min(420px, calc(100vw - 32px)); }
  .limits .tag.reject, .jobs .tag.failed { color: var(--del-fg); } .limits .tag.flag, .limits .tag.queue, .jobs .tag.waiting, .jobs .tag.running { color: var(--accent-ink); border-color: var(--accent); }
  .insights .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
  .insights .tile { border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; display: grid; gap: 2px; } .insights .tile b { font: 600 22px var(--mono); } .insights .tile span { color: var(--muted); font-size: 12px; }
  .insights .tile.person b { color: var(--accent-ink); }
  .insights .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .insights .cols > .box { margin: 0 0 12px; }
  .insights .days { display: grid; gap: 6px; padding: 12px 16px; font-size: 12px; } .insights .days > div { display: grid; grid-template-columns: 52px 1fr 64px; gap: 10px; align-items: center; }
  .insights .stack { display: flex; height: 10px; border-radius: 3px; overflow: hidden; background: var(--canvas); } .insights .stack i { display: block; height: 100%; }
  .insights .k-person { background: var(--accent); } .insights .k-agent { background: var(--fg); } .insights .k-bot { background: var(--border-2); }
  .insights .key { display: inline-flex; gap: 12px; } .insights .key i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
  .insights .chk { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--border); font-size: 13px; } .insights .chk:first-of-type { border-top: 0; }
  .insights .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--border-2); } .insights .dot.ok { background: var(--fg); } .insights .dot.warn { background: var(--accent); } .insights .dot.bad { background: var(--del-fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--del-fg) 25%, transparent); }
  .insights .chk .muted { margin-left: auto; text-align: right; }
  .insights .way > div { display: grid; grid-template-columns: 150px 1fr 70px; gap: 10px; align-items: center; padding: 6px 16px; font-size: 13px; } .insights .way .meter i { background: var(--accent); }
  .insights table { width: 100%; border-collapse: collapse; font-size: 13px; } .insights th, .insights td { text-align: left; padding: 7px 12px; border-top: 1px solid var(--border); white-space: nowrap; } .insights thead th { border-top: 0; color: var(--muted); font-weight: 500; font-size: 12px; }
  .insights .scroll { overflow-x: auto; } .insights td.ua { max-width: 280px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-family: var(--mono); font-size: 11px; }
  .insights .steps { display: inline-flex; gap: 3px; } .insights .steps i { width: 9px; height: 9px; border-radius: 2px; border: 1px solid var(--border-2); } .insights .steps i.on { background: var(--accent); border-color: var(--accent); }
  .insights .heat { display: grid; grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 2px; padding: 12px 16px; font-size: 10px; color: var(--muted); align-items: center; }
  .insights .heat i { aspect-ratio: 1; border-radius: 2px; background: var(--canvas); border: 1px solid var(--border); } .insights .heat i.on { background: var(--accent); border-color: transparent; }
  .connectlist { margin: 0; padding: 0 0 0 20px; display: grid; gap: 12px; font-size: 14px; } .connectlist li::marker { font-weight: 600; color: var(--accent-ink, var(--accent)); } .connectlist .copyline { margin-top: 6px; }
  .insights .tag { font: 500 11px var(--mono); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-2); color: var(--muted); } .insights .tag.person { color: var(--accent-ink); border-color: var(--accent); }
  @media (max-width: 720px) { .insights .tiles, .insights .cols { grid-template-columns: 1fr; } .insights .way > div { grid-template-columns: 110px 1fr 56px; } }
  .scale .verdict { border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
  .scale .verdict b { font: 600 20px var(--mono); } .scale .verdict.bad { border-color: var(--del-fg); } .scale .verdict.bad b { color: var(--del-fg); } .scale .verdict.warn b { color: var(--accent-ink); }
  .scale .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  .scale .card { border: 1px solid var(--border); border-radius: 8px; display: grid; grid-template-rows: auto auto 1fr auto; overflow: hidden; }
  .scale .card.bad { border-color: var(--del-fg); box-shadow: 0 0 0 2px color-mix(in srgb, var(--del-fg) 20%, transparent); } .scale .card.warn { border-color: var(--accent); }
  .scale .card header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); } .scale .card header b { font-weight: 600; } .scale .card header .tag { margin-left: auto; }
  .scale .card .reading { padding: 10px 14px; display: grid; gap: 6px; font-size: 12px; border-bottom: 1px solid var(--border); }
  .scale .card .reading .num { font: 600 15px var(--mono); font-variant-numeric: tabular-nums; } .scale .card.bad .meter i { background: var(--del-fg); } .scale .card.warn .meter i { background: var(--accent); }
  .scale .card dl { margin: 0; padding: 10px 14px; display: grid; grid-template-columns: 18px 1fr; gap: 8px 10px; font-size: 13px; } .scale .card dt { color: var(--muted); cursor: help; } .scale .card dd { margin: 0; }
  .scale .card { background: linear-gradient(to bottom, transparent calc(100% - 6px), color-mix(in srgb, var(--accent) 12%, var(--canvas)) calc(100% - 6px)); }
  .scale .meter.soil { height: 8px; background: repeating-linear-gradient(135deg, var(--canvas) 0 4px, var(--border) 4px 5px); } .scale .meter.soil i { background: repeating-linear-gradient(90deg, var(--fg) 0 6px, color-mix(in srgb, var(--fg) 75%, transparent) 6px 8px); }
  .scale .card.bad .meter.soil i { background: var(--del-fg); } .scale .card.warn .meter.soil i { background: var(--accent); }
  .scale .strata { display: flex; height: 6px; border-radius: 3px; overflow: hidden; flex: 1; max-width: 220px; margin-left: auto; } .scale .strata i { flex: 1; } .scale .strata i:nth-child(1) { background: var(--border); } .scale .strata i:nth-child(2) { background: var(--border-2); } .scale .strata i:nth-child(3) { background: var(--accent); } .scale .strata i:nth-child(4) { background: var(--del-fg); } .scale .strata i.past { opacity: .25; }
  .scale .card .next { padding: 10px 14px 14px; border-top: 1px solid var(--border); font-size: 13px; display: flex; gap: 8px; align-items: baseline; } .scale .card .next svg { color: var(--accent-ink); }
  .scale .tag.bad { color: var(--del-fg); border-color: var(--del-fg); } .scale .tag.warn { color: var(--accent-ink); border-color: var(--accent); }
  .switch { position: relative; width: 30px; height: 18px; margin-left: auto; flex: none; }
  .switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .switch i { position: absolute; inset: 0; border-radius: 9px; background: var(--border-2); transition: background .15s; pointer-events: none; }
  .switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
  .switch input:checked + i { background: var(--fg); } .switch input:checked + i::after { transform: translateX(12px); }
  .switch input:focus-visible + i { box-shadow: 0 0 0 3px rgba(10,10,10,.12); }
  .ui-toast.fail { --ui-toast-bg: #7a1f1f; --ui-toast-ink: #fff; --ui-line: rgba(255,255,255,.5); --ui-soft: rgba(255,255,255,.12); max-width: min(92vw, 560px); }
  .ui-toast.fail .ui-btn { background: transparent; color: inherit; min-height: 0; padding: 4px 8px; white-space: nowrap; font-weight: 500; font-size: 13px; } .ui-toast.fail .ui-btn.icon { width: auto; }
  /* The file's socket dropped (a deploy restarts it) or a deploy is coming: calm, top and centre, one line. */
  .net { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; max-width: calc(100vw - 32px); background: var(--bg); color: var(--fg); border: 1px solid var(--line, currentColor); padding: 6px 12px; border-radius: 999px; font-size: 13px; z-index: 60; white-space: nowrap; box-shadow: 0 8px 24px -10px rgba(0,0,0,.3); }
  .net span { overflow: hidden; text-overflow: ellipsis; } .net svg { flex: none; width: 14px; height: 14px; }
  .net.updating svg { animation: netspin 1.6s linear infinite; } @keyframes netspin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .net.updating svg { animation: none; } }
  /* Every toast is the kit's (ui.toast): the plain one, the queue wait (ms 0) and the failure (.fail, with buttons). */
  .ui-toast { max-width: min(92vw, 560px); padding: 9px 14px; font-size: 13px; font-weight: 400; box-shadow: 0 12px 32px -8px rgba(0,0,0,.3); border-color: var(--ui-toast-bg); }
  .ui-toasts { bottom: 20px; z-index: 60; }

  /* Every feature, on a strip that scrolls sideways forever: three copies of the list,
     and the scroll jumps one copy back whenever it reaches the next. It drifts on its
     own and stops while you're on it. Vertical scrolling passes straight through. */
  .feats { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-top: 18px; padding: 4px 0 10px; cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .feats::-webkit-scrollbar { display: none; }
  .feats.held { cursor: grabbing; } .feats.held .feat { pointer-events: none; }
  .feats-track { display: flex; gap: 10px; width: max-content; padding: 0 10px; }
  .feat { width: 270px; flex: none; display: grid; grid-template-columns: 30px 1fr; gap: 4px 12px; align-content: start; padding: 14px 16px; border: 1px solid var(--border-2); border-radius: 6px; background: var(--grain), var(--paper); user-select: none; }
  .feat .ico { grid-row: span 2; width: 30px; height: 30px; border-radius: 5px; background: var(--bg); border: 1px solid var(--border-2); display: grid; place-items: center; }
  .feat b { font-weight: 600; line-height: 1.3; } .feat span { color: var(--muted); font-size: 13px; line-height: 1.45; }
  .feat.secret { border-color: var(--accent); background: var(--grain), var(--accent-soft); } .feat.secret .ico { color: var(--accent-ink); border-color: var(--accent); }

  /* Departures and arrivals, split-flap: who hands what to whom. Each character is a tile
     that flips through a few letters before it lands. */
  .flapboard { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
  .flap-side { background: #111; border-radius: 8px; padding: 14px 16px 16px; box-shadow: inset 0 0 0 1px #000, 0 24px 48px -28px rgba(0,0,0,.45); overflow: hidden; }
  .flap-head { display: flex; align-items: center; gap: 8px; color: #f2f2f2; font: 600 13px var(--mono); letter-spacing: .14em; margin-bottom: 10px; }
  .flap-head svg { width: 16px; height: 16px; color: var(--accent-ink); }
  .flap-cols, .flap-row { display: grid; grid-template-columns: var(--cols); gap: 14px; }
  .flap-cols { color: #8a8a8a; font: 500 10px var(--mono); letter-spacing: .12em; padding: 0 0 6px; border-bottom: 1px solid #2a2a2a; margin-bottom: 6px; }
  .flap-row { padding: 3px 0; }
  .flap-cell { display: flex; gap: 2px; overflow: hidden; }
  .flap-cell b { display: inline-grid; place-items: center; width: 1.05em; height: 1.5em; flex: none; background: linear-gradient(#1f1f1f 49%, #000 49% 51%, #191919 51%); color: #f5f5f5; font: 600 13px/1 var(--mono); border-radius: 2px; }
  .flap-cell b.go { animation: flip .07s linear; }
  .flap-cell.st b { color: var(--accent-glow); }
  @keyframes flip { 50% { transform: scaleY(.15); } }

  /* The whole map: one big card, a tab per area, a picture and every feature of that area. */
  .fmap { margin-top: 18px; border: 1px solid var(--border-2); border-radius: 8px; background: var(--grain), var(--paper); overflow: hidden; box-shadow: 0 24px 48px -32px rgba(0,0,0,.25); }
  .fmap-tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border-2); background: var(--canvas); }
  .fmap-tabs::-webkit-scrollbar { display: none; }
  .fmap-tabs button { flex: none; display: flex; align-items: center; gap: 7px; padding: 12px 18px; font: 500 14px var(--sans); color: var(--muted); background: none; border: 0; border-right: 1px solid var(--border); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
  .fmap-tabs button svg { width: 16px; height: 16px; }
  .fmap-tabs button small { font: 500 11px var(--mono); color: var(--faint); }
  .fmap-tabs button:hover { color: var(--fg); background: var(--bg); }
  .fmap-tabs button[aria-selected="true"] { color: var(--fg); background: var(--bg); border-bottom-color: var(--accent); }
  .fmap-tabs button:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--accent); }
  .fmap-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: center; padding: 26px 26px 8px; }
  .fmap-h { font: 600 26px/1.15 var(--sans); letter-spacing: -0.035em; margin: 6px 0 8px; } .fmap-h em { font-style: normal; color: var(--accent-ink); }
  .fmap-top p { margin: 0; color: var(--muted); max-width: 46ch; }
  .fmap-art { border: 1px solid var(--border-2); border-radius: 6px; background: var(--bg); padding: 8px; }
  .fmap-art svg { display: block; width: 100%; height: auto; font: 500 10px var(--mono); }
  .fmap-art .ln { fill: #e3e3e3; } .fmap-art .ln.o { fill: var(--accent); } .fmap-art .ln.k { fill: var(--fg); } .fmap-art .ln.g { fill: #bdbdbd; }
  .fmap-art .st { fill: none; stroke: var(--fg); stroke-width: 2; } .fmap-art .st.o { stroke: var(--accent); } .fmap-art .st.g { stroke: #bdbdbd; stroke-width: 1.5; } .fmap-art .st.d { stroke-dasharray: 4 4; }
  .fmap-art .bx { fill: #fff; stroke: var(--fg); stroke-width: 1.5; } .fmap-art .bx.o { stroke: var(--accent); fill: var(--accent-soft); } .fmap-art .bx.k { fill: var(--fg); }
  .fmap-art .fl { fill: var(--fg); } .fmap-art .fl.o { fill: var(--accent); } .fmap-art .fl.w { fill: #fff; }
  .fmap-art text { fill: var(--fg); } .fmap-art text.m { fill: var(--muted); } .fmap-art text.w { fill: #fff; } .fmap-art text.o { fill: var(--accent-ink); }
  .fmap-art .pulse { animation: fmap-pulse 2.4s ease-in-out infinite; } .fmap-art .pulse.b { animation-delay: .8s; } .fmap-art .pulse.c { animation-delay: 1.6s; }
  @keyframes fmap-pulse { 50% { opacity: .25; } }
  .fmap-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1px; margin: 22px 0 0; background: var(--border); border-top: 1px solid var(--border); }
  .fmap-item { display: grid; grid-template-columns: 28px 1fr; gap: 2px 11px; align-content: start; padding: 13px 16px; background: var(--paper); }
  .fmap-item .ico { grid-row: span 2; width: 28px; height: 28px; border-radius: 5px; background: var(--bg); border: 1px solid var(--border-2); display: grid; place-items: center; }
  .fmap-item .ico svg { width: 15px; height: 15px; }
  .fmap-item b { font-weight: 600; line-height: 1.3; font-size: 13.5px; } .fmap-item span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
  .fmap-item b + span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  @media (max-width: 860px) { .fmap-top { grid-template-columns: 1fr; padding: 20px 16px 6px; gap: 18px; } .fmap-h { font-size: 22px; } }
  @media (prefers-reduced-motion: reduce) { .fmap-art .pulse { animation: none; } }
  @media (max-width: 860px) { .flapboard { grid-template-columns: 1fr; } }
  @media (max-width: 560px) { .flap-cell b { width: .95em; font-size: 11px; } .flap-cols, .flap-row { gap: 8px; } .flap-side { padding: 12px; } }
  @media (prefers-reduced-motion: reduce) { .flap-cell b.go { animation: none; } }
  /* "What if git was your ___": the same tiles, one big word, turning over slowly. */
  .whatif { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .flap-word { display: inline-flex; background: #111; border-radius: 8px; padding: 8px 10px; box-shadow: inset 0 0 0 1px #000, 0 24px 48px -28px rgba(0,0,0,.45); }
  .flap-word .flap-cell b { font-size: clamp(15px, 3.2vw, 28px); }
  .flap-word.hot .flap-cell b { color: var(--accent-glow); }
  .shell { margin: 10px 0 0; padding: 12px 14px; background: #111; color: #f2f2f2; border-radius: 8px; font: 12px/1.7 var(--mono); overflow-x: auto; }
  .shell i { color: #8a8a8a; font-style: normal; }

  /* The site footer, on home and about. */
  .site-foot { margin-top: 64px; border-top: 1px solid var(--border); background: var(--canvas); }
  .site-foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; padding-top: 22px; padding-bottom: 28px; font-size: 13px; }
  .site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; } .site-foot nav a { color: var(--muted); } .site-foot nav a:hover { color: var(--fg); }
  .site-foot .by { color: var(--muted); } .site-foot .by b { color: var(--fg); font-weight: 600; letter-spacing: .02em; }
  .site-foot .yr { cursor: default; }
  .site-foot .wink { flex-basis: 100%; margin: 0; color: var(--faint); font-size: 12px; }

  /* About, and a room that isn't on any map. */
  .about { max-width: 720px; padding-top: 40px; } .about h1 { font: 600 34px/1.05 var(--sans); letter-spacing: -0.04em; margin: 10px 0 18px; } .about h1 em { font-style: normal; color: var(--accent-ink); }
  .about h2 { font: 600 18px var(--sans); letter-spacing: -0.02em; margin: 30px 0 6px; } .about p { color: color-mix(in srgb, var(--fg) 85%, var(--bg)); margin: 0 0 12px; font-size: 15px; }
  .about .quiet { color: var(--faint); font-size: 12px; margin-top: 36px; }
  /* Privacy: the field report. Four finds up top, then the strata table. */
  .privacy .lede { font-size: 16px; color: var(--fg); } .privacy ul { margin: 0 0 12px; padding-left: 20px; color: color-mix(in srgb, var(--fg) 85%, var(--bg)); font-size: 15px; } .privacy li { margin: 0 0 6px; }
  .privacy .tldr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin: 24px 0 8px; }
  .privacy .tldr > div { background: var(--canvas); padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13px; }
  .privacy .tldr [data-lucide], .privacy .tldr svg { grid-row: span 2; color: var(--accent-ink); margin-top: 3px; } .privacy .tldr span { color: var(--muted); }
  .privacy .strata { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; margin: 10px 0 12px; }
  .privacy table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 560px; }
  .privacy th, .privacy td { text-align: left; vertical-align: top; padding: 9px 12px; border-top: 1px solid var(--border); }
  .privacy thead th { border-top: 0; background: var(--canvas); color: var(--muted); font-weight: 500; font-size: 12px; } .privacy tbody th { font-weight: 600; white-space: nowrap; }
  .privacy tbody tr:nth-child(odd) td, .privacy tbody tr:nth-child(odd) th { background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.012) 3px 4px); }
  .privacy #yourdata { margin: 12px 0 16px; }
  .notice { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--accent-soft); border-bottom: 1px solid var(--border); font-size: 13px; }
  .notice [data-lucide], .notice svg { color: var(--accent-ink); flex: none; } .notice span { flex: 1; } .notice .btn { flex: none; }
  @media (max-width: 560px) { .privacy .tldr { grid-template-columns: 1fr; } }
  .backrooms { min-height: calc(100vh - 49px); display: grid; place-items: center; text-align: center; padding: 0 24px; background: repeating-linear-gradient(90deg, #f3edc9 0 46px, #ebe3b5 46px 48px); color: #4a4426; }
  .backrooms h1 { font: 600 34px var(--mono); letter-spacing: -0.02em; margin: 0 0 8px; } .backrooms p { margin: 0 0 16px; }

  /* ↑↑↓↓←→←→BA: everything on the page tears loose for a moment. */
  body.flock .cmd, body.flock .feat, body.flock .level, body.flock .about p { animation: flap .45s ease-in-out 5 alternate; }
  @keyframes flap { from { transform: rotate(var(--r, 2deg)) translateY(-6px); } to { transform: rotate(calc(var(--r, 2deg) * -1)) translateY(4px); } }
  .brand.split svg path:nth-child(2) { transform: translateX(-3px) rotate(-6deg); } .brand.split svg path:nth-child(4) { transform: translateX(3px) rotate(6deg); }
  .brand svg path { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); transform-origin: center; }

  @media (prefers-reduced-motion: reduce) { body.flock * { animation: none !important; } }

  @media (max-width: 860px) {
    .hero .wrap, .two, .wb { grid-template-columns: 1fr; } .explorer { max-height: 220px; overflow: auto; grid-row: auto; border-right: 0; border-bottom: 1px solid var(--border); } .details { grid-column: auto; }
    .jump { min-width: 0; flex: 1; } .jump span { display: none; } .ln { grid-template-columns: 44px minmax(0, 1fr); } .ln .by { display: none; }
    .wrap { padding: 0 16px; } .top { padding: 10px 16px; } .hero .wrap { padding-top: 40px; }
  }
  /* Phones: the header keeps its icons and the handle, and drops the ⌘K hint, Play's label and the wordmark beside the logo. */
  @media (max-width: 480px) {
    .top { gap: 6px; } #who { gap: 2px; } .top .btn.ghost { padding: 7px 6px 6px; } .brand { font-size: 0; gap: 0; }
    .jump { flex: none; padding: 6px 7px; } .jump kbd { display: none; } #topplay { font-size: 0; gap: 0; }
  }