/* Nest, in the Asterion language: paper and ink, one electric blue, Helvetica set tight, mono only for
   identifiers and small labels, hairlines instead of boxes. No warm or green colour appears anywhere,
   including the operating system's accent, which is pinned to the blue. */

@layer reset, tokens, base, layout, components, map, motion, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, ol, ul, dl, dd { margin: 0; }
  ol, ul { padding: 0; }
  button, input, textarea, select { font: inherit; color: inherit; }
  img { display: block; max-width: 100%; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --paper: light-dark(#f1f3f5, #11151b);
    --raised: light-dark(#e7eaed, #171c24);
    --line: light-dark(#c6cbd0, #2c333d);
    --line-strong: light-dark(#9aa1a8, #46505e);
    --text: light-dark(#111316, #f1f3f5);
    --muted: light-dark(#565d65, #aab1bf);
    --faint: light-dark(#868d95, #6f7887);
    --neutral: light-dark(#6b727a, #b9c0ca);
    --blue: #1833eb;
    --signal: light-dark(#1833eb, #8e9cff);
    --signal-soft: color-mix(in srgb, var(--signal) 14%, transparent);
    --on-blue: #ffffff;
    --font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-id: "SF Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
    --gutter: clamp(1rem, 2.4vw, 2.5rem);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --head-w: 220px;
    accent-color: var(--blue);
    caret-color: var(--signal);
    scrollbar-color: var(--line-strong) transparent;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
  :root[data-theme="dark"] { color-scheme: dark; }
  :root[data-theme="light"] { color-scheme: light; }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; }
  body { background: var(--paper); color: var(--text); font: 400 14px/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; }
  ::selection { background: color-mix(in srgb, var(--blue) 26%, transparent); color: var(--text); }
  :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
  h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
  p, q, figcaption { text-wrap: pretty; }
  a { color: inherit; text-decoration: none; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  body:has(.scrim:not([hidden])) { overflow: hidden; }
  .id { font-family: var(--font-id); font-size: .84em; letter-spacing: 0; }
  /* The small mono label Asterion uses for kickers and step numbers. */
  .kicker, .panel-head h2, .panel-head .aside, .group h3, .history h3, .legend, .ev .svc, .status, .lane-head .alt, .field label {
    font-family: var(--font-id); font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
  }
  .blue-period { color: var(--signal); }
}

@layer layout {
  .app { min-height: 100svh; display: grid; grid-template-rows: auto auto 1fr; padding: 0 var(--gutter) var(--gutter); }

  /* Header: wordmark and a quiet status line over a hairline. */
  .top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; min-height: 76px; padding-block: 14px;
    background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
  .wordmark { display: inline-flex; flex-direction: column; flex-shrink: 0; transition: color .25s ease; }
  .wordmark:is(:hover, :focus-visible) { color: var(--blue); }
  .wordmark-name { text-transform: uppercase; font-size: 1.55rem; line-height: 1.1; letter-spacing: .26em; margin-right: -.26em; }
  .wordmark-sub { text-transform: uppercase; font-size: .66rem; line-height: 1.2; letter-spacing: .14em; margin-top: .3rem; color: var(--muted); }
  .top-right { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }

  /* The objective is the page's headline. */
  .objective { padding: 2.2rem 0 1.6rem; border-bottom: 1px solid var(--line); }
  .objective .kicker { color: var(--muted); margin-bottom: 1rem; }
  .objective h1 { font-size: clamp(2.1rem, 4.6vw, 4.4rem); line-height: 1; letter-spacing: -.055em; max-width: 22ch; }

  /* Three columns on paper, divided by hairlines: context feeds the work, decisions close it. */
  .shell { display: grid; grid-template-columns: 252px minmax(0, 1fr) 348px; min-height: 0; }
  .panel { min-width: 0; display: flex; flex-direction: column; }
  .rail { border-right: 1px solid var(--line); padding-right: 20px; }
  .map-panel { padding-inline: 20px; }
  .right { border-left: 1px solid var(--line); padding-left: 20px; }
  .panel-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding: 18px 0 14px; }
  .panel-head h2, .panel-head .aside { white-space: nowrap; }
  .panel-head h2 { color: var(--text); }
  .panel-head h2 .num { color: var(--signal); }
  .panel-head h2 .num::after { content: " /"; color: var(--faint); }
  .panel-head .aside { margin-left: auto; color: var(--muted); }
  .decisions-head { padding-bottom: 6px; }
}

@layer components {
  /* Status line in the header. */
  .stat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .stat b { color: var(--text); font-weight: 500; }
  .stat.cp svg { inline-size: 16px; block-size: 16px; color: var(--text); }
  .stat.spend { flex-direction: column; align-items: stretch; gap: 5px; }
  .meter { display: block; block-size: 2px; background: var(--line); overflow: hidden; }
  .meter span { display: block; block-size: 100%; inline-size: 0; background: var(--signal); transition: inline-size .6s var(--ease-out); }
  .stat.live .dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--faint); }
  .stat.live.on .dot { background: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }

  /* Buttons: square, ink outlines; the one blue fill is the action that moves work forward. */
  .btn { display: inline-flex; align-items: center; gap: .5rem; height: 34px; padding: 0 14px; border: 1px solid var(--text); font-size: 13px; letter-spacing: -.005em; transition: background .2s ease, color .2s ease; }
  .btn:hover { background: var(--text); color: var(--paper); }
  .btn.primary { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
  .btn.primary:hover { background: color-mix(in srgb, var(--blue) 86%, black); }
  .btn.small { height: 30px; padding: 0 12px; font-size: 12.5px; }
  .btn[disabled] { opacity: .45; cursor: not-allowed; background: none; color: inherit; }
  a.btn { color: var(--text); }
  button.link { color: var(--signal); font-size: inherit; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
  button.link:hover { border-bottom-color: currentColor; }
  .mini { margin-inline-start: auto; block-size: 22px; padding: 0 8px; font-size: 11.5px; border: 1px solid var(--line-strong); flex: none; }
  .mini:hover { border-color: var(--text); }

  /* Context rail. */
  .rail-body { display: flex; flex-direction: column; gap: 18px; overflow: auto; padding-bottom: 20px; }
  .search { inline-size: 100%; block-size: 36px; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; padding: 0; font-size: 14px; }
  .search:focus-visible { outline: none; border-bottom-color: var(--signal); }
  .search::placeholder { color: var(--faint); }
  .store { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13px; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .store b { color: var(--text); font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-id); font-size: 12px; }
  #ctxGroups { display: grid; gap: 20px; }
  .group h3 { color: var(--muted); margin-bottom: 4px; }
  .ctx { inline-size: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
  .ctx:hover .t, .ctx.on .t { color: var(--signal); }
  .ctx .t { font-size: 15px; letter-spacing: -.012em; transition: color .2s ease; }
  .ctx .v { font-family: var(--font-id); font-size: 11.5px; color: var(--muted); align-self: center; }
  .ctx .v.new { color: var(--signal); }
  .ctx .m { grid-column: 1 / -1; font-size: 12px; color: var(--faint); display: flex; gap: 10px; flex-wrap: wrap; }
  .ctx.fresh .t { animation: flash-text 1.4s ease-out; }
  .empty-note { font-size: 13px; color: var(--faint); }

  /* Activity. */
  .stream { display: flex; flex-direction: column; max-height: 220px; overflow: auto; padding-bottom: 12px; }
  .ev { display: grid; grid-template-columns: 70px 124px minmax(0, 1fr); gap: 12px; font-size: 13px; padding: 7px 0; border-top: 1px solid var(--line); align-items: baseline; }
  .ev time { font-family: var(--font-id); font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
  .ev .svc { color: var(--text); }
  .ev .txt { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
  .ev .txt b, .ev .txt .id { color: var(--text); font-weight: 400; }
  .ev.new .txt { animation: flash-text 1.2s ease-out; }

  /* Decisions: tabs like Asterion's navigation, entries ruled by hairlines rather than boxed. */
  .tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); }
  .tab { padding: 8px 0 11px; font-size: 14px; color: var(--muted); border-bottom: 1px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 7px; align-items: baseline; transition: color .2s ease; }
  .tab:hover { color: var(--text); }
  .tab[aria-selected="true"] { color: var(--signal); border-bottom-color: var(--signal); }
  .count { font-family: var(--font-id); font-size: 11px; color: var(--signal); font-variant-numeric: tabular-nums; }
  .count.zero { color: var(--faint); }
  .right-body { padding: 4px 0 24px; overflow: auto; display: flex; flex-direction: column; min-height: 0; }
  .card { padding: 18px 0; display: flex; flex-direction: column; gap: 11px; border-top: 1px solid var(--line); }
  .card:first-child { border-top: 0; }
  .card.focus { border-top: 2px solid var(--signal); }
  .card.focus:first-child { margin-top: 14px; }
  .card h4 { font-size: 19px; line-height: 1.18; letter-spacing: -.03em; }
  .card p { color: var(--muted); font-size: 13.5px; }
  .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .who { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
  .who b { color: var(--text); font-weight: 500; }
  .glyph { inline-size: 18px; block-size: 18px; display: inline-grid; place-items: center; font-size: 9.5px; font-weight: 500; flex: none; border: 1px solid var(--text); }
  .glyph.agent { border-radius: 50%; }
  .glyph.person { border-color: var(--signal); color: var(--signal); }
  .verdict { font-weight: 500; font-size: 13px; }
  .review { display: grid; gap: 5px; padding: 12px 0; border-top: 1px solid var(--line); }
  .review:first-child { border-top: 0; padding-top: 0; }
  .review q { font-size: 14px; letter-spacing: -.008em; quotes: none; }
  .review .meta { font-size: 12px; color: var(--faint); display: flex; gap: 10px; flex-wrap: wrap; }
  .kv { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 8px 12px; font-size: 13px; }
  .kv dt { color: var(--muted); }
  .kv dd { min-width: 0; overflow-wrap: anywhere; }
  .cites { display: flex; gap: 6px; flex-wrap: wrap; }
  .cite-chip { border: 1px solid var(--line-strong); padding: 2px 7px; font-family: var(--font-id); font-size: 11.5px; color: var(--muted); }
  .cite-chip:hover { color: var(--text); border-color: var(--text); }
  .cite-chip.stale { border-style: dashed; color: var(--text); }
  pre.diff { padding: 12px 14px; background: var(--raised); font: 12px/1.55 var(--font-id); overflow-x: auto; color: var(--muted); }
  pre.diff .a { color: var(--text); }
  pre.diff .d { color: var(--faint); text-decoration: line-through; }
  .checks { display: flex; gap: 5px; align-items: center; font-size: 12.5px; color: var(--muted); }
  .chk { inline-size: 11px; block-size: 11px; border: 1px solid var(--neutral); }
  .chk.pass { background: var(--text); border-color: var(--text); }
  .chk.fail { position: relative; border-color: var(--text); }
  .chk.fail::after { content: ""; position: absolute; inset: 4px -2px; border-top: 1px solid var(--text); transform: rotate(45deg); }
  .chk.pend { border-style: dotted; }
  .chk.todo { border-style: dashed; border-color: var(--faint); }
  .fail-line { font-size: 13px; }
  .fail-line b { font-family: var(--font-id); font-weight: 400; font-size: 12px; }
  .fail-line.todo { color: var(--muted); }
  .shot { margin-top: 4px; }
  .shot img { inline-size: 100%; block-size: auto; border: 1px solid var(--line); background: var(--raised); }
  .shot figcaption { font-size: 12.5px; color: var(--muted); margin-top: 7px; }
  .status { padding: 3px 7px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
  .status.ready { color: var(--on-blue); background: var(--blue); border-color: var(--blue); }
  .status.accepted { color: var(--paper); background: var(--text); border-color: var(--text); }
  .status.outdated { border-style: dashed; color: var(--text); }
  .picks { display: flex; gap: 6px; flex-wrap: wrap; }
  .pick { display: inline-flex; gap: 7px; align-items: baseline; padding: 4px 8px; background: var(--raised); font-size: 12.5px; }
  .pick .id { color: var(--muted); }
  .note { font-size: 13px; padding: 9px 12px; border-left: 2px solid var(--signal); background: var(--signal-soft); }
  .reasons { padding-left: 18px; font-size: 13.5px; }
  .empty { padding: 18px 0; }
  .empty h4 { font-size: 19px; letter-spacing: -.03em; margin-bottom: 6px; }
  .empty p { color: var(--muted); font-size: 13.5px; }
  .versions { display: grid; gap: 8px; }
  .ver { padding: 10px 12px; background: var(--raised); font-size: 13px; }
  .ver.next { border: 1px dashed var(--signal); background: transparent; }
  .ver small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 2px; }

  /* Checkpoint history: a ruled list with the current checkpoint in blue. */
  .history { margin-top: 22px; }
  .history h3 { color: var(--muted); margin-bottom: 6px; }
  .history ol { list-style: none; }
  .history li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
  .history .v { font: 400 12px var(--font-id); color: var(--muted); padding-top: 2px; }
  .history li.now .v { color: var(--signal); }
  .history b { display: block; font-size: 14.5px; font-weight: 400; letter-spacing: -.012em; line-height: 1.3; }
  .history q { display: block; font-size: 13px; margin-top: 4px; quotes: none; color: var(--muted); }
  .history .meta { display: flex; gap: 10px; align-items: baseline; font-size: 12px; color: var(--muted); margin-top: 4px; }

  /* Forms, dialogs and the toast. */
  .scrim { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--paper) 70%, transparent); backdrop-filter: blur(10px); }
  .modal { inline-size: min(760px, 100%); background: var(--paper); border: 1px solid var(--text); }
  .modal.narrow { inline-size: min(540px, 100%); }
  .form { display: grid; gap: 14px; padding: 24px; }
  .form h3 { font-size: 26px; letter-spacing: -.04em; line-height: 1.1; }
  .form p { color: var(--muted); font-size: 13.5px; }
  .field { display: grid; gap: 6px; }
  .field label { color: var(--muted); }
  .field input, .field textarea, .field select { border: 1px solid var(--line-strong); background: transparent; padding: 9px 10px; font-size: 14px; border-radius: 0; }
  .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; border-color: var(--signal); }
  .field textarea { field-sizing: content; min-block-size: 6lh; resize: vertical; font-family: var(--font-id); font-size: 12px; line-height: 1.5; }
  .toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 30; background: var(--text); color: var(--paper); padding: 11px 16px; font-size: 13px; max-width: min(560px, calc(100vw - 32px)); }

  /* Map tools and legend. */
  .map-tools { display: flex; gap: 8px; margin-left: 12px; flex-wrap: wrap; }
  .legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 0; color: var(--muted); border-bottom: 1px solid var(--line); }
  .legend span { display: inline-flex; align-items: center; gap: 7px; }
  .legend svg { inline-size: 14px; block-size: 14px; }
}

@layer map {
  .map-wrap { position: relative; display: grid; grid-template-columns: var(--head-w) minmax(0, 1fr); border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); }
  .plot { overflow-x: auto; overflow-y: hidden; min-inline-size: 0; }
  #map { display: block; }
  .heads { border-inline-end: 1px solid var(--line); }
  .lane-head { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 14px 0 0; min-inline-size: 0; border-top: 1px solid var(--line); }
  .lane-head.trunk { border-top: 0; }
  .lane-head b { font-size: 14.5px; font-weight: 400; letter-spacing: -.015em; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lane-head.trunk b { font-size: 16px; letter-spacing: -.02em; }
  .lane-head.trunk span { font-size: 12px; color: var(--muted); }
  .lane-head .alt { color: var(--faint); font-size: 10.5px; }
  .lane-head:has(.alt) b { -webkit-line-clamp: 1; }
  .lane-head.competing { box-shadow: inset 2px 0 0 var(--line-strong); padding-left: 10px; }
  .who-line { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); min-inline-size: 0; white-space: nowrap; overflow: hidden; }
  .who-line .state { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--faint); flex: none; }
  .st-running .who-line .state { background: var(--signal); animation: working 1.8s ease-in-out infinite; }
  .st-done .who-line .state { background: var(--text); }
  .st-paused .who-line .state { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text); }
  .lane-head.arrive b { animation: flash-text 1.4s ease-out; }

  /* Rows are separated by hairlines drawn in the SVG, matching the HTML lane headers. */
  .row { fill: transparent; stroke: none; }
  .row-rule { stroke: var(--line); stroke-width: 1; }
  .trunk-row { fill: color-mix(in srgb, var(--raised) 60%, transparent); }
  .trunk { stroke: var(--text); stroke-width: 2; }
  .trunk.next { stroke: var(--signal); stroke-width: 1.4; stroke-dasharray: 3 4; }
  .merge { fill: none; stroke: var(--text); stroke-width: 1; opacity: .45; }
  .merge.next { stroke: var(--signal); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: 1; }
  .merge.arrive { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85; animation: draw 1.1s var(--ease-out) forwards; }
  .dep { fill: none; stroke: var(--line-strong); stroke-width: 1; }
  .dep.hl { stroke: var(--text); stroke-width: 1.5; }
  .spine { stroke: var(--line); stroke-width: 1; }
  .spine-mark { fill: var(--paper); stroke: var(--faint); stroke-width: 1; }
  .spine-mark.on { fill: var(--signal); stroke: var(--signal); }
  .cite { fill: none; stroke: var(--signal); stroke-width: 1.2; opacity: .6; }
  .cite-flow { fill: none; stroke: var(--signal); stroke-width: 1.6; }
  .hatch-line { stroke: var(--muted); stroke-width: 1.4; }

  .bead { cursor: pointer; outline: none; }
  .bead .disc { fill: var(--text); stroke: var(--text); stroke-width: 1.4; }
  .bead text { font: 400 11px var(--font-id); fill: var(--paper); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
  .bead.ctx .disc { fill: var(--paper); }
  .bead.ctx text { fill: var(--text); }
  .bead .halo { fill: none; stroke: transparent; }
  .bead.head .halo { stroke: var(--signal); stroke-width: 1.4; }
  .bead.ghost .disc { fill: var(--paper); stroke: var(--signal); stroke-width: 1.6; stroke-dasharray: 3 2.5; }
  .bead.ghost text { fill: var(--signal); }
  .bead:hover .disc, .bead:focus-visible .disc { stroke: var(--signal); stroke-width: 2.2; }

  .node { cursor: pointer; outline: none; }
  .node .body { stroke-width: 1.4; }
  .node .ini { font-size: 11.5px; font-weight: 500; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
  .node .nid { font-family: var(--font-id); font-size: 10.5px; fill: var(--muted); text-anchor: middle; }
  .node .ring { fill: none; stroke: var(--signal); stroke-width: 2; }
  .node .ask { fill: none; stroke: var(--signal); stroke-width: 1.2; stroke-dasharray: 3 3; }
  .node .mark { stroke: var(--text); stroke-width: 1.4; opacity: .75; }
  .node:focus-visible .body, .node.sel .body { stroke: var(--signal); stroke-width: 2.2; }
  .node .pulse { fill: none; stroke: var(--signal); stroke-width: 1.6; }
  .st-proposed .body { fill: var(--paper); stroke: var(--text); }
  .st-proposed .ini { fill: var(--text); }
  .st-approved .body { fill: var(--neutral); stroke: var(--neutral); }
  .st-approved .ini { fill: var(--paper); }
  .st-changes .body, .st-blocked .body, .st-superseded .body { fill: var(--paper); stroke: var(--muted); }
  .st-changes .ini, .st-blocked .ini, .st-superseded .ini { fill: var(--muted); }
  .st-superseded { opacity: .4; }
  .st-superseded .body { stroke-dasharray: 2.5 2; }
  .st-stale .body { fill: url(#hatch); stroke: var(--text); stroke-dasharray: 3 2; }
  .st-stale .ini { fill: var(--text); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
  .st-accepted .body { fill: var(--text); stroke: var(--text); }
  .st-accepted .ini { fill: var(--paper); }
  .tick { stroke-width: 1.2; }
  .tick.ok { fill: var(--neutral); stroke: var(--neutral); }
  .tick.ch { fill: none; stroke: var(--neutral); }
  .tick.bl { stroke: var(--text); }
  .tick.hm { fill: var(--signal); stroke: var(--signal); }
  .tick.hm-ch { fill: none; stroke: var(--signal); }

  .tip { position: absolute; z-index: 5; pointer-events: none; max-width: 270px; padding: 9px 11px; font-size: 12.5px; background: var(--text); color: var(--paper); }
  .tip b { display: block; font-weight: 500; margin-bottom: 2px; }
  .tip span { opacity: .75; }
  .map-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; }
  .map-empty div { max-width: 420px; }
  .map-empty h3 { font-size: 22px; letter-spacing: -.035em; margin-bottom: 6px; }
  .map-empty p { color: var(--muted); font-size: 13.5px; }
}

@layer motion {
  @keyframes flash-text { 0% { color: var(--signal); } 100% { color: inherit; } }
  @keyframes working { 0%, 100% { box-shadow: 0 0 0 0 var(--signal-soft); } 50% { box-shadow: 0 0 0 5px var(--signal-soft); } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes land { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  @keyframes pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }
  @keyframes halo { from { transform: scale(.6); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
  @keyframes headline-enter { from { opacity: 0; transform: translateY(.22em); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: no-preference) {
    /* One orchestrated moment on load: the objective rises into place, as Asterion's hero does. */
    .objective h1 { animation: headline-enter 1s var(--ease-out) both; }
    .objective .kicker { animation: headline-enter .8s var(--ease-out) both; }
    .node.arrive .body { animation: land .7s cubic-bezier(.2, .9, .25, 1.2) both; transform-box: fill-box; transform-origin: center; }
    .node .pulse { animation: pulse 1.2s ease-out .25s both; transform-box: fill-box; transform-origin: center; }
    .bead.arrive .halo { stroke: var(--signal); animation: halo 1.1s ease-out .9s both; transform-box: fill-box; transform-origin: center; }
    .toast { transition: opacity .22s ease, translate .22s ease; }
    @starting-style { .toast { opacity: 0; translate: -50% 8px; } }
    .scrim .modal { transition: opacity .2s ease, scale .2s ease; }
    @starting-style { .scrim .modal { opacity: 0; scale: .98; } }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}

@layer responsive {
  .right { container-type: inline-size; }
  @container (inline-size < 320px) { .kv { grid-template-columns: 1fr; } }
  @media (max-width: 1280px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .rail, .right, .map-panel { border: 0; padding-inline: 0; }
    .map-panel { order: 1; }
    .right { order: 2; border-top: 1px solid var(--text); }
    .rail { order: 3; border-top: 1px solid var(--text); }
  }
  @media (max-width: 560px) {
    :root { --head-w: 136px; }
    .top { gap: 1rem; min-height: 64px; }
    .top-right { gap: 1rem; }
    .wordmark-name { font-size: 1.25rem; }
    .objective { padding: 1.6rem 0 1.2rem; }
    .lane-head b { font-size: 13px; }
    .who-line { font-size: 11px; }
    .mini, .lane-head .alt { display: none; }
    .lane-head:has(.alt) b { -webkit-line-clamp: 2; }
    .ev { grid-template-columns: 58px minmax(0, 1fr); }
    .ev .svc, .ev .txt { grid-column: 2; }
    .kv { grid-template-columns: 1fr; }
  }
}