/* public/assets/app.css — Ekicho's one stylesheet. Tokens first (light, then dark), then the page frame, then parts
   (cards, tabs, tables, checklists), then the pages' own bits, then the landing page. No inline styles anywhere: the CSP
   refuses them.

   The look keeps Grand Central's elements, in Japanese rail colours: the top bar is a night sky of stars, numbers sit on
   split-flap departure-board tiles, labels are set like station signage (condensed display caps, mono), the mark is a
   stationmaster's seal (駅), tactile-paving yellow marks the active thing and vermilion what needs you. Day mode is the
   off-white of a platform sign; night mode is the sky itself. */

@font-face { font-family: "Big Shoulders Display"; src: url("fonts/big-shoulders-display.woff2") format("woff2"); font-weight: 500 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --bg: #f7f5ef; --surface: #ffffff; --sunk: #f1efe8; --text: #16191d; --muted: #5d6470; --line: #e2dfd6; --line-strong: #c9c5ba;
  --accent: #0b7a45; --accent-soft: #dcefe2; --accent-ink: #ffffff;
  --brass: #8a6a00; --brass-soft: #fbf1c7; --ceiling: #0e141b; --ceiling-ink: #f3f1ea; --signal: #c7362b; --yellow: #f2c300;
  --hot: #c7362b; --warn: #8a5a00; --warn-soft: #fbefc9; --ok: #2d6a3a; --ok-soft: #dfeedd; --danger: #b2271b;
  --s-open: #e1ecf7; --s-progress: #dcefe2; --s-blocked: #f8ddd8; --s-owner: #fcecb8; --s-other: #ece4f3; --s-done: #eceae3;
  --flap: #16191d; --flap-ink: #f3f1ea; --flap-seam: #000;
  --radius: 6px; --radius-s: 4px; --shadow: 0 1px 0 rgb(22 25 29 / 5%), 0 2px 6px rgb(22 25 29 / 4%);
  --topo: none;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --jp: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e141b; --surface: #151d26; --sunk: #111820; --text: #ecebe5; --muted: #9aa3ae; --line: #243041; --line-strong: #33425a;
    --accent: #6fcf8e; --accent-soft: #16301f; --accent-ink: #0e141b;
    --brass: #f2c300; --brass-soft: #2b2610; --ceiling: #090d12; --ceiling-ink: #f3f1ea; --signal: #ff5a4e;
    --hot: #ff6b5a; --warn: #e6b64f; --warn-soft: #2d2510; --ok: #78c48b; --ok-soft: #14291b; --danger: #f2877b;
    --s-open: #17283a; --s-progress: #163021; --s-blocked: #3d1d1a; --s-owner: #3a3112; --s-other: #2a2340; --s-done: #1b232d;
    --flap: #05080b; --flap-ink: #f3f1ea; --flap-seam: #000;
    --shadow: 0 1px 0 rgb(0 0 0 / 35%);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg) var(--topo) 0 0 / 600px 420px; background-attachment: fixed; color: var(--text); font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased; min-height: 100vh; }
main { max-width: 1120px; margin: 0 auto; padding: 24px 16px 80px; }
main.narrow { max-width: 560px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1 { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; margin: 0 0 8px; }
h2 { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
h3 { font-family: var(--mono); font-size: 11.5px; margin: 22px 0 8px; color: var(--muted); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
p { margin: 0 0 12px; }
ul, ol { padding-left: 20px; }
.muted { color: var(--muted); }
.small, small { font-size: 13px; }
.fine { color: var(--muted); font-size: 13px; margin-top: 12px; }
.mono, code, pre { font-family: var(--mono); font-size: 12.5px; }
code { background: var(--sunk); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; }
pre { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 12px; }
.copy { cursor: copy; }
.copy:hover { border-color: var(--accent); }
.pre { white-space: pre-wrap; }
.warn { color: var(--warn); }
.bad, .danger { color: var(--danger); }
.accent { color: var(--accent); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11.5px; font-weight: 700; color: var(--brass); margin: 0 0 10px; }
.eyebrow::before { content: ""; display: inline-block; width: 18px; height: 2px; background: currentColor; vertical-align: middle; margin: -2px 8px 0 0; }
.status:empty { display: none; }
.status { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 8px 16px;
  border-radius: var(--radius-s); font: 600 12.5px var(--mono); letter-spacing: 0.04em; box-shadow: var(--shadow); margin: 0; max-width: calc(100% - 32px); z-index: 10; }

/* ---------- top bar: the concourse ceiling ---------- */
.topbar { background: var(--ceiling) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='120'%3E%3Ccircle cx='165' cy='19' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='37' cy='105' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='298' cy='7' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='44' cy='55' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='123' cy='11' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='289' cy='15' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='295' cy='74' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='113' cy='5' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='214' cy='18' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='286' cy='104' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='297' cy='73' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='49' cy='70' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='316' cy='26' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='160' cy='59' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='153' cy='31' r='0.8' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='41' cy='73' r='1' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='175' cy='93' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='311' cy='9' r='0.6' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='84' cy='96' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='250' cy='53' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='285' cy='73' r='1' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='179' cy='76' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='35' cy='107' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='242' cy='89' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='158' cy='82' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='197' cy='113' r='1' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='236' cy='45' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='252' cy='7' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Cpath d='M40 88 L78 62 L118 70 L150 40 L196 52' fill='none' stroke='%23dfe6ee' stroke-opacity='.28' stroke-width='.6'/%3E%3Ccircle cx='40' cy='88' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='78' cy='62' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='118' cy='70' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='150' cy='40' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='196' cy='52' r='1.6' fill='%23ffffff'/%3E%3C/svg%3E") 0 0 / 320px 120px; color: var(--ceiling-ink); border-bottom: 2px solid var(--yellow); position: sticky; top: 0; z-index: 5; }
.topbar .bar { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ceiling-ink); white-space: nowrap; font: 800 21px/1 var(--display);
  letter-spacing: 0.06em; text-transform: uppercase; }
.brand:hover { text-decoration: none; }
/* the mark is the stationmaster's seal: 駅 (station) in a vermilion ring */
.mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ff5a4e; color: #ff5a4e;
  font: 800 15px/1 var(--jp); letter-spacing: 0; }
.links { display: flex; gap: 2px; flex: 1; }
.links a { color: color-mix(in srgb, var(--ceiling-ink) 72%, transparent); padding: 6px 10px; border-radius: var(--radius-s); font: 600 12px var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase; }
.links a:hover { color: var(--ceiling-ink); background: rgb(255 255 255 / 6%); text-decoration: none; }
.links a[aria-current="page"] { color: var(--yellow); box-shadow: inset 0 -2px var(--yellow); border-radius: 0; }
.me { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.who { color: color-mix(in srgb, var(--ceiling-ink) 70%, transparent); font-size: 13px; }
.topbar button { background: transparent; color: var(--ceiling-ink); border-color: rgb(239 228 201 / 35%); }
.topbar button:hover { background: rgb(255 255 255 / 8%); }
.chip { display: inline-flex; gap: 8px; align-items: center; background: var(--yellow); color: #16191d; padding: 4px 10px; border-radius: var(--radius-s);
  font: 700 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.chip span { font-variant-numeric: tabular-nums; background: #16191d; color: var(--yellow); padding: 0 5px; border-radius: 2px; }
.chip:hover { text-decoration: none; filter: brightness(1.05); }
.topbar.plain .bar { justify-content: center; }

/* ---------- page header ---------- */
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin: 4px 0 20px; }
.pagehead .titles { flex: 1 1 420px; }
.pagehead .sub { color: var(--muted); margin: 0; max-width: 70ch; }
.pagehead .actions { display: flex; gap: 8px; }
.back { display: block; width: 100%; font: 600 11.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }
.pagehead .sub .pill { vertical-align: middle; }

/* ---------- controls ---------- */
button, .button { font: inherit; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: var(--radius-s); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  line-height: 1.3; white-space: nowrap; }
button:hover, .button:hover { background: var(--sunk); text-decoration: none; }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: inset 0 -2px rgb(0 0 0 / 22%);
  font-weight: 600; }
button.primary:hover, .button.primary:hover { filter: brightness(1.06); background: var(--accent); }
button.ghost { background: transparent; }
button.small, .button.small { padding: 5px 10px; font-size: 13px; }
button.wide { width: 100%; padding: 11px 14px; }
button.link { border: 0; background: none; color: var(--accent); padding: 0; font-size: inherit; }
button.link:hover { text-decoration: underline; background: none; }
button.link.danger, button.danger { color: var(--danger); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, select, textarea { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: var(--surface); color: var(--text); width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; }
label { display: block; font-size: 14px; font-weight: 500; margin: 0 0 12px; }
label input, label select { margin-top: 6px; }
label.check, label.pick { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 6px 0; }
label.check input, label.pick input, label.check.top input { width: auto; margin: 3px 0 0; flex: none; }
form { margin: 0; }
form > * + * { margin-top: 10px; }
form > label + label { margin-top: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row > input, .row > select { flex: 1 1 200px; width: auto; }
.row > button, .row > .button { flex: none; }
.row.end { justify-content: flex-end; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 14px 12px; margin: 0 0 12px; }
legend { font-weight: 600; font-size: 14px; padding: 0 6px; }

/* ---------- cards and layout ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 16px; box-shadow: var(--shadow); }
.card > :last-child { margin-bottom: 0; }
.cardhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -2px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cardhead h2::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--brass); margin-right: 9px; vertical-align: 1px; }
.card.emph { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.card.ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.card.ok .cardhead h2::before { background: var(--ok); border-radius: 50%; }
.card.notice { background: var(--sunk); box-shadow: none; border-left: 3px solid var(--brass); }
details.card.notice > summary { cursor: pointer; }
details.card.notice[open] > summary { margin-bottom: 10px; }
.card.auth { padding: 28px; margin-top: 24px; }
.card.auth h1 { margin-bottom: 14px; font-size: 34px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.split.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0 0 16px; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards .card { margin: 0; }
.card.feature { border-top: 3px solid var(--brass); }
.card.feature h3 { color: var(--text); margin: 0 0 8px; font: 800 20px/1.1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.card.feature p { color: var(--muted); font-size: 14px; }
.link-card { display: block; color: var(--text); transition: border-color 0.15s; }
.link-card:hover { border-color: var(--accent); text-decoration: none; }
.link-card h3 { margin: 0 0 4px; color: var(--text); font: 800 24px/1.1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.link-card p { margin: 0; }
.empty { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--muted); margin: 0 0 12px; }
.empty p { margin: 0 0 10px; }
.empty p:last-child { margin: 0; }

.banner { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; background: var(--brass-soft);
  border: 1px solid color-mix(in srgb, var(--brass) 40%, transparent); border-left: 4px solid var(--signal); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 20px; }
.banner[hidden] { display: none; }
.warn-banner { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* the hero is a piece of the ceiling: the invite, the group invite */
.hero { background: linear-gradient(100deg, var(--ceiling) 30%, color-mix(in srgb, var(--ceiling) 35%, transparent) 75%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='120'%3E%3Ccircle cx='165' cy='19' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='37' cy='105' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='298' cy='7' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='44' cy='55' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='123' cy='11' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='289' cy='15' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='295' cy='74' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='113' cy='5' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='214' cy='18' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='286' cy='104' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='297' cy='73' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='49' cy='70' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='316' cy='26' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='160' cy='59' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='153' cy='31' r='0.8' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='41' cy='73' r='1' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='175' cy='93' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='311' cy='9' r='0.6' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='84' cy='96' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='250' cy='53' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='285' cy='73' r='1' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='179' cy='76' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='35' cy='107' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='242' cy='89' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='158' cy='82' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='197' cy='113' r='1' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='236' cy='45' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='252' cy='7' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Cpath d='M40 88 L78 62 L118 70 L150 40 L196 52' fill='none' stroke='%23dfe6ee' stroke-opacity='.28' stroke-width='.6'/%3E%3Ccircle cx='40' cy='88' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='78' cy='62' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='118' cy='70' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='150' cy='40' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='196' cy='52' r='1.6' fill='%23ffffff'/%3E%3C/svg%3E") 0 0 / 320px 120px, var(--ceiling); color: var(--ceiling-ink); border-radius: var(--radius); border-bottom: 3px solid var(--yellow);
  padding: 34px 32px 26px; margin: 8px 0 18px; }
.hero h1 { font-size: 58px; line-height: 0.95; margin-bottom: 16px; max-width: 16ch; }
.hero h1 .accent { color: var(--yellow); }
.hero p { font-size: 17px; color: color-mix(in srgb, var(--ceiling-ink) 78%, transparent); max-width: 62ch; }
.hero .lead { color: var(--ceiling-ink); }
.hero .eyebrow { color: var(--yellow); }

/* ---------- tiles: the departure board ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 22px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.tile .n { display: flex; gap: 3px; font: 700 26px/1 var(--mono); font-variant-numeric: tabular-nums; }
/* each character is a flap: dark card, light digit, a seam across the middle */
.flap { display: inline-grid; place-items: center; min-width: 26px; height: 36px; padding: 0 4px; border-radius: 3px; color: var(--flap-ink);
  background: linear-gradient(var(--flap) 0 calc(50% - 0.5px), var(--flap-seam) calc(50% - 0.5px) calc(50% + 0.5px), var(--flap) calc(50% + 0.5px));
  box-shadow: inset 0 1px rgb(255 255 255 / 8%), 0 1px 0 rgb(0 0 0 / 25%); }
.tile .n .mono { font-size: 15px; align-self: center; }
.tile .k { color: var(--muted); font: 600 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.tile.hot { border-color: var(--signal); box-shadow: inset 0 3px var(--signal); }
.tile.hot .flap { color: #ffb08c; }
.tile.warn .flap { color: var(--yellow); }

/* ---------- tabs ---------- */
.tablist { display: flex; gap: 4px; box-shadow: inset 0 -1px var(--line); margin: 0 0 18px; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tablist [role="tab"] { flex: none; padding: 10px 12px 12px; color: var(--muted); font: 600 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.tablist [role="tab"]:hover { color: var(--text); text-decoration: none; }
.tabs.js .tablist [role="tab"][aria-selected="true"] { color: var(--text); box-shadow: inset 0 -3px var(--brass); }
.tabs:not(.js) .panel { margin-bottom: 32px; }
.count { display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 2px; background: var(--flap); color: var(--flap-ink); font: 700 11px/18px var(--mono);
  text-align: center; margin-left: 4px; }
.panel > h3:first-child { margin-top: 0; }

/* ---------- tables and lists ---------- */
.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 12px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font: 600 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; background: var(--sunk); }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--sunk) 50%, transparent); }
td.when, .when { color: var(--muted); font: 12px var(--mono); white-space: nowrap; }
tr.p-high td:first-child, tr.p-urgent td:first-child { box-shadow: inset 3px 0 var(--signal); }
tr.a-retired, tr.m-suspended { opacity: 0.6; }
.tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tag { display: inline-block; font: 500 11px/18px var(--mono); padding: 0 6px; border-radius: 3px; background: var(--sunk); color: var(--muted); border: 1px solid var(--line); }
.tag.accent { background: var(--brass-soft); color: var(--brass); border-color: color-mix(in srgb, var(--brass) 35%, transparent); }
.due { font-size: 12px; color: var(--warn); }
.pill { display: inline-block; font: 700 10.5px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 7px; border-radius: 3px;
  background: var(--s-done); white-space: nowrap; }
.s-open { background: var(--s-open); } .s-in_progress { background: var(--s-progress); } .s-blocked { background: var(--s-blocked); }
.s-waiting_on_owner { background: var(--s-owner); } .s-waiting_on_other { background: var(--s-other); }
.s-done, .s-dropped { background: var(--s-done); color: var(--muted); }

ul.rows { list-style: none; padding: 0; margin: 0 0 12px; }
ul.rows > li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
ul.rows > li:last-child { border-bottom: 0; }
ul.rows .main { flex: 1 1 260px; }
ul.rows .side { display: flex; gap: 12px; align-items: center; }
ul.rows details.perms { flex: 1 1 100%; }
ul.rows.plain > li { display: block; }

ol.log { list-style: none; padding: 0; margin: 0 0 12px; }
ol.log li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
ol.log li:last-child { border-bottom: 0; }

details > summary { cursor: pointer; }
details:not(.card):not(.perms):not(.mint-wrap) { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 14px; margin: 0 0 8px; background: var(--surface); }
details[open]:not(.card) > summary { margin-bottom: 8px; }
.kind { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-right: 4px; }
details.perms, details.mint-wrap { margin: 6px 0; font-size: 14px; }
details.perms summary, details.mint-wrap summary { color: var(--accent); }
details.perms form { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--sunk); }

dl.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 14px; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- forms in lists ---------- */
form.rule { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px; margin: 0 0 10px; }
form.rule.new { border-style: dashed; }
form.rule .row { justify-content: flex-start; }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; margin: 6px 0 10px; }
.picks label.pick input { width: auto; }

/* ---------- agents ---------- */
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin: 0 0 16px; }
.agents .card { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.agents .card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.agents .card h3 { margin: 0; color: var(--text); font: 800 21px/1.1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.agents .card p { margin: 0 0 6px; }
.agents .card.retired { opacity: 0.6; }
ul.conns { list-style: none; padding: 0; margin: 4px 0; font-size: 13px; }
ul.conns li { padding: 6px 0; border-top: 1px solid var(--line); }
.agents .card > button.link { align-self: flex-start; margin-top: auto; padding-top: 8px; }

/* ---------- copy boxes, steps, checklists ---------- */
/* copy blocks: a label, an obvious Copy button, the text, and where it goes */
.copyblock { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); margin: 0 0 14px; overflow: hidden; }
.copyblock[hidden] { display: none; }
.copyblock .cb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 12px; background: var(--sunk);
  border-bottom: 1px solid var(--line); }
.copyblock .label { color: var(--brass); font: 700 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.copy-btn { padding: 5px 12px; font: 700 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); }
.copy-btn::before { content: "⧉ "; }
.copy-btn:hover { background: var(--accent); filter: brightness(1.08); }
.copy-btn.done { background: var(--ok); border-color: var(--ok); color: #fff; }
.copy-btn.done::before { content: ""; }
.copyblock pre { margin: 0; border: 0; border-radius: 0; background: transparent; padding: 12px 14px; font-size: 13px; cursor: copy; max-height: 360px; overflow: auto; }
.copyblock.big pre { font-size: 13.5px; line-height: 1.6; color: var(--text); }
.copyblock .hint { margin: 0; padding: 8px 14px 10px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
.copyblock.top { margin-bottom: 20px; border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }
details .copyblock { margin-top: 10px; }

/* the connect quick start: two numbered steps above the details */
.quickstart { display: grid; gap: 14px; margin: 0 0 28px; }
.qs-step { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
  box-shadow: var(--shadow); }
.qs-n { flex: none; display: grid; place-items: center; width: 40px; height: 48px; border-radius: 3px; color: var(--flap-ink); font: 700 24px var(--mono);
  background: linear-gradient(var(--flap) 0 calc(50% - 0.5px), #000 calc(50% - 0.5px) calc(50% + 0.5px), var(--flap) calc(50% + 0.5px)); }
.qs-body { flex: 1; min-width: 0; }
.qs-body h2 { font: 800 24px/1.1 var(--display); letter-spacing: 0.02em; margin: 2px 0 12px; }
.qs-body .copyblock { margin: 0; }
h2.more { margin: 0 0 10px; color: var(--muted); }

ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 12px; }
ol.steps > li { counter-increment: s; position: relative; padding: 0 0 12px 36px; }
ol.steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--flap); color: var(--flap-ink); font: 700 12px var(--mono); border-radius: 3px; }

/* one segment per step, like a row of flaps: brass when done, hatched when skipped */
.progress { display: flex; gap: 4px; margin: 0 0 10px; }
.progress span { flex: 1; height: 8px; border-radius: 2px; background: var(--line); }
.progress span.done { background: var(--brass); }
.progress span.skipped { background: repeating-linear-gradient(135deg, var(--line-strong) 0 3px, var(--line) 3px 6px); }
ol.checklist { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; gap: 10px; }
.check-item { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.check-item .dot { flex: none; width: 30px; height: 34px; border-radius: 3px; display: grid; place-items: center; font: 700 15px var(--mono);
  color: var(--flap-ink); background: linear-gradient(var(--flap) 0 calc(50% - 0.5px), #000 calc(50% - 0.5px) calc(50% + 0.5px), var(--flap) calc(50% + 0.5px)); }
.check-item .body { flex: 1; }
.check-item h3 { margin: 0 0 2px; color: var(--text); font: 650 15px var(--font); letter-spacing: 0; text-transform: none; }
.check-item p { margin: 0; color: var(--muted); font-size: 14px; }
.check-item .state { color: var(--ok); font: 700 11.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.check-item.done { background: transparent; box-shadow: none; }
.check-item.done .dot { background: var(--ok-soft); color: var(--ok); }
.check-item.done h3 { color: var(--muted); }
.check-item.optional:not(.done) .dot { opacity: 0.6; }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .split, .split.even, .cards.three { grid-template-columns: minmax(0, 1fr); }
  .topbar .bar { flex-wrap: wrap; gap: 8px 12px; }
  .links { order: 3; flex: 1 1 100%; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scrollbar-width: none; margin: 0 -6px; }
  .links a { flex: none; }
  .links::-webkit-scrollbar { display: none; }
  .me { margin-left: auto; }
  .who { display: none; }
}
@media (max-width: 560px) {
  main { padding-top: 16px; }
  h1 { font-size: 32px; }
  .hero { padding: 26px 20px 20px; }
  .hero h1 { font-size: 42px; }
  .brand { font-size: 18px; }
  .card { padding: 16px; }
  .card.auth { padding: 20px; }
  ol.log li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .check-item { flex-wrap: wrap; }
  .check-item .button { width: 100%; }
  .agents { grid-template-columns: minmax(0, 1fr); }
  .qs-step { padding: 14px; gap: 12px; }
  .qs-n { width: 32px; height: 40px; font-size: 19px; }
}
ul.rows .actions-col { flex-direction: column; align-items: flex-end; gap: 4px; }
ul.rows > li.m-suspended .main { opacity: 0.6; }
@media (max-width: 560px) { ul.rows .actions-col { align-items: flex-start; flex-direction: row; flex-wrap: wrap; } }
.check-item .acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.check-item .acts .link.muted { color: var(--muted); }
@media (max-width: 560px) { .check-item .acts { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; } }

/* ---------- the landing page (/ when signed out) ----------
   Always the night sky on top, whatever the theme: stars that twinkle, Tokyo Station's zodiac dome turning slowly,
   light streaks of passing trains in line colours. Then plain sections on the page's own colours. Every animation stops
   for reduced motion. */
@keyframes l-tw { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes l-spin { to { transform: rotate(360deg); } }
@keyframes l-glide { to { transform: translateX(calc(100vw + 1000px)); } }
@keyframes l-pulse { 0% { box-shadow: 0 0 0 0 rgb(199 54 43 / 55%); } 70% { box-shadow: 0 0 0 12px rgb(199 54 43 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(199 54 43 / 0%); } }
@keyframes l-stamp { 0% { transform: scale(1.7) rotate(-18deg); opacity: 0; } 55% { transform: scale(.93) rotate(-7deg); opacity: 1; } 100% { transform: scale(1) rotate(-9deg); opacity: 1; } }

.jp { font-family: var(--jp); }
.l-top { position: relative; overflow: hidden; background: #0e141b; color: #f3f1ea; border-bottom: 3px solid var(--yellow); }
.l-sky { position: absolute; inset: 0; pointer-events: none; }
.l-sky .stars { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300'%3E%3Ccircle cx='56' cy='254' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='50' cy='228' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='331' cy='28' r='0.6' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='182' cy='229' r='0.6' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='112' cy='241' r='1.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='379' cy='9' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='394' cy='114' r='0.8' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='305' cy='158' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='232' cy='104' r='0.8' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='400' cy='278' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='78' cy='298' r='1' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='312' cy='269' r='1.6' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='213' cy='273' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='119' cy='292' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='247' cy='10' r='0.8' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='174' cy='52' r='1.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='36' cy='199' r='0.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='219' cy='118' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='197' cy='93' r='1.6' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='272' cy='51' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='324' cy='162' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='170' cy='103' r='1.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='193' cy='81' r='1.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='161' cy='257' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='218' cy='168' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='202' cy='109' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='395' cy='124' r='1' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='145' cy='162' r='1.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='192' cy='8' r='0.8' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='231' cy='54' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='14' cy='283' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='365' cy='136' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='113' cy='239' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='122' cy='50' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='276' cy='194' r='1' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='295' cy='149' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='131' cy='103' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='46' cy='270' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='406' cy='129' r='0.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='8' cy='44' r='0.8' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='296' cy='203' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='410' cy='189' r='1.6' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='94' cy='195' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='277' cy='128' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='407' cy='263' r='1' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='361' cy='93' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3C/svg%3E") 0 0 / 420px 300px; animation: l-tw 6s ease-in-out infinite; }
.l-sky .stars.b { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='380'%3E%3Ccircle cx='535' cy='360' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='48' cy='317' r='1' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='339' cy='231' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='560' cy='243' r='1.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='305' cy='169' r='1' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='488' cy='138' r='1' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='237' cy='336' r='0.8' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='132' cy='9' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='77' cy='194' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='557' cy='169' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='442' cy='134' r='1.3' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='535' cy='152' r='1.3' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='274' cy='351' r='1.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='371' cy='173' r='1.3' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='318' cy='350' r='1.3' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='369' cy='357' r='0.8' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='433' cy='182' r='1' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='175' cy='79' r='1.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='523' cy='237' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='407' cy='345' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='33' cy='248' r='1' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='382' cy='348' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='478' cy='93' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='237' cy='272' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='203' cy='65' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='65' cy='26' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='209' cy='49' r='0.8' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='293' cy='1' r='1.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='445' cy='94' r='0.6' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='193' cy='234' r='0.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='189' cy='12' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='505' cy='287' r='1.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='265' cy='86' r='1' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='14' cy='300' r='0.8' fill='%23dfe6ee' fill-opacity='0.9'/%3E%3Ccircle cx='273' cy='125' r='1' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3Ccircle cx='147' cy='369' r='0.6' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='376' cy='96' r='0.8' fill='%23dfe6ee' fill-opacity='0.5'/%3E%3Ccircle cx='96' cy='172' r='0.8' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='557' cy='88' r='1.3' fill='%23dfe6ee' fill-opacity='0.35'/%3E%3Ccircle cx='140' cy='225' r='1.6' fill='%23dfe6ee' fill-opacity='0.7'/%3E%3C/svg%3E") 0 0 / 560px 380px; animation-duration: 7.5s; animation-delay: -3s; }
.l-dome { position: absolute; left: 50%; top: 40px; width: 900px; height: 900px; margin-left: -450px; color: var(--yellow); opacity: .22;
  animation: l-spin 360s linear infinite; }
.l-dome text { font: 800 38px var(--jp); }
.streaks span { position: absolute; left: -1000px; height: 1px; opacity: .85; animation: l-glide 10s linear infinite; }
.streaks span:nth-child(odd) { height: 2px; }
.streaks span:nth-child(1) { bottom: 14px; width: 320px; background: linear-gradient(90deg, transparent, #7dc243); animation-duration: 9s; animation-delay: -2s; }
.streaks span:nth-child(2) { bottom: 30px; width: 180px; background: linear-gradient(90deg, transparent, #f15a22); animation-duration: 12s; animation-delay: -7s; }
.streaks span:nth-child(3) { bottom: 52px; width: 420px; background: linear-gradient(90deg, transparent, #00a7db); animation-duration: 7s; animation-delay: -4s; }
.streaks span:nth-child(4) { bottom: 8px; width: 260px; background: linear-gradient(90deg, transparent, #f2c300); animation-duration: 14s; animation-delay: -11s; }
.streaks span:nth-child(5) { bottom: 70px; width: 200px; background: linear-gradient(90deg, transparent, #e85298); animation-duration: 10s; animation-delay: -1s; }
.streaks span:nth-child(6) { bottom: 40px; width: 360px; background: linear-gradient(90deg, transparent, #7dc243); animation-duration: 13s; animation-delay: -9s; }
.streaks span:nth-child(7) { bottom: 22px; width: 150px; background: linear-gradient(90deg, transparent, #dfe6ee); animation-duration: 8s; animation-delay: -5s; }
.streaks span:nth-child(8) { bottom: 62px; width: 280px; background: linear-gradient(90deg, transparent, #f15a22); animation-duration: 11s; animation-delay: -3s; }
.streaks span:nth-child(9) { bottom: 4px; width: 220px; background: linear-gradient(90deg, transparent, #00a7db); animation-duration: 9.5s; animation-delay: -8s; }
.streaks span:nth-child(10) { bottom: 84px; width: 300px; background: linear-gradient(90deg, transparent, #f2c300); animation-duration: 12.5s; animation-delay: -6s; }
.l-bar { position: relative; max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 16px; }
.l-links { display: flex; gap: 2px; margin-left: auto; }
.l-links a { color: #c3c9d1; padding: 12px; font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.l-links a:hover { color: #f3f1ea; text-decoration: none; }
.l-top .button { text-decoration: none; }
.l-signin, .l-top .button.primary { background: var(--yellow); border-color: var(--yellow); color: #16191d; font-weight: 700; }
.l-top .button.ghost { background: transparent; color: #f3f1ea; border-color: rgb(243 241 234 / 35%); }
.l-top .button.ghost:hover { background: rgb(255 255 255 / 8%); }
.button.big { padding: 14px 24px; font-size: 16px; font-weight: 700; }
.l-hero { position: relative; max-width: 1000px; margin: 0 auto; padding: 80px 20px 96px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 24px; }
.l-hero h1 { font: 900 clamp(52px, 8vw, 104px)/.9 var(--display); text-transform: uppercase; margin: 0; max-width: 900px; }
.gold { color: var(--yellow); }
.l-hero p { font-size: 18px; color: #c3c9d1; max-width: 560px; margin: 0; }
.l-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.l-clocks { display: flex; gap: 48px; justify-content: center; margin-top: 16px; }
.l-clock { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.l-clock .face { position: relative; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #fff 0 62%, #c7cdd4 63% 70%, #5d6470 71%);
  box-shadow: 0 0 0 1px rgb(243 241 234 / 30%), 0 0 40px rgb(255 255 255 / 10%); }
.l-clock .tick { position: absolute; background: #16191d; }
.l-clock .tick.n, .l-clock .tick.s { left: 59px; width: 2px; height: 8px; }
.l-clock .tick.n { top: 18px; } .l-clock .tick.s { bottom: 18px; }
.l-clock .tick.e, .l-clock .tick.w { top: 59px; width: 8px; height: 2px; }
.l-clock .tick.e { right: 18px; } .l-clock .tick.w { left: 18px; }
.l-clock .hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; background: #16191d; border-radius: 2px; }
.l-clock .hand.h { width: 4px; height: 28px; margin-left: -2px; }
.l-clock .hand.m { width: 2.5px; height: 38px; margin-left: -1.25px; }
.l-clock .hand.sec { width: 1.2px; height: 42px; margin-left: -.6px; background: #c7362b; }
.l-clock .pin { position: absolute; left: 56px; top: 56px; width: 8px; height: 8px; border-radius: 50%; background: #5d6470; }
.l-clock .city { font: 700 12px var(--mono); letter-spacing: .16em; color: var(--yellow); text-transform: uppercase; }
.l-clock .jp { font-size: 15px; color: #c3c9d1; }

.landing h2 { font: 900 clamp(40px, 6vw, 60px)/.95 var(--display); letter-spacing: .01em; text-transform: uppercase; margin: 0 0 32px; color: var(--text); }
.landing h3 { letter-spacing: .01em; }
.l-section { max-width: 1100px; margin: 0 auto; padding: 88px 20px; }
.l-inner { max-width: 1100px; margin: 0 auto; padding: 48px 20px 52px; }
.l-eyebrow { font: 700 12.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.l-eyebrow.red { color: var(--signal); }
.l-what { text-align: center; }
.l-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; text-align: left; }
.l-card { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 28px 30px;
  display: flex; flex-direction: column; gap: 14px; }
.l-card.red { border-top-color: var(--signal); }
.l-card h3 { font: 800 34px/1 var(--display); text-transform: uppercase; color: var(--text); margin: 0; }
.l-card p { margin: 0; line-height: 1.7; color: var(--muted); }
.l-card strong { color: var(--text); }
.l-num { display: inline-flex; gap: 3px; }
.l-num .flap { min-width: 28px; height: 42px; font: 700 22px var(--mono); }
.flap.gold { color: var(--yellow); }

.l-board { background: #16191d; color: #f3f1ea; }
.landing .l-board h2 { color: #f3f1ea; font-size: 34px; margin: 0; }
.l-board h2 .jp { font-size: 22px; color: var(--yellow); margin-right: 8px; }
.l-boardhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.l-note { font: 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9aa3ae; }
.l-scroll { overflow-x: auto; }
.l-flaps { min-width: 900px; display: flex; flex-direction: column; gap: 6px; }
.l-cols { display: grid; grid-template-columns: 150px 475px 75px 1fr; font: 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9aa3ae;
  padding-bottom: 4px; }
.l-row { display: flex; gap: 3px; }
.l-row .flap { --flap: #262b31; min-width: 22px; width: 22px; height: 34px; padding: 0; font: 700 18px var(--mono); color: #f3f1ea; }
.l-row .flap.st { color: var(--yellow); }
.l-row .flap.hot { color: #ff8a6a; }

.l-steps { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 36px; }
.l-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 4px; background: #7dc243; }
.l-steps li { position: relative; }
.l-steps h3 { font: 800 30px/1 var(--display); text-transform: uppercase; color: var(--text); margin: 16px 0 8px; }
.l-steps h3 .jp { font-size: 26px; margin-right: 6px; }
.l-steps p { color: var(--muted); line-height: 1.7; margin: 0; }

.l-demo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.l-demohead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.landing .l-demohead h2 { margin: 0; font-size: 40px; }
.l-demo ul { list-style: none; margin: 0; padding: 0; }
.l-demo li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px 28px; border-bottom: 1px solid var(--line); min-height: 76px; }
.l-demo .what { flex: 999 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.l-demo .what span { color: var(--muted); font-size: 14px; }
.l-demo li.done .what { opacity: .55; }
.l-demo li.done .pulse { visibility: hidden; }
.l-demo .fine { padding: 0 28px 18px; }
.pulse { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); animation: l-pulse 2.4s ease-out infinite; }
.l-stamp { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--signal); color: var(--signal);
  font: 800 17px/1 var(--jp); writing-mode: vertical-rl; margin-right: 14px; transform: rotate(-9deg); animation: l-stamp .45s cubic-bezier(.2, .8, .3, 1.2) both; }
.l-stamp[hidden] { display: none; }

.l-rules { background: var(--sunk); }
.l-rules .l-inner { padding: 88px 20px; }
.l-lead { color: var(--muted); max-width: 620px; margin: -18px 0 32px; line-height: 1.7; }
.l-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.l-rule { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius-s); padding: 20px 22px; }
.l-rule h3 { font: 800 24px/1 var(--display); text-transform: uppercase; color: var(--text); margin: 0 0 8px; }
.l-rule p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 15px; }

.l-end { border-top: 3px solid var(--yellow); border-bottom: 0; }
.l-ask { position: relative; max-width: 720px; margin: 0 auto; padding: 96px 20px 64px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.landing .l-ask h2 { color: #f3f1ea; margin: 0; }
.l-ask p { color: #c3c9d1; margin: 0; line-height: 1.65; font-size: 17px; }
.l-ticket { width: 170px; height: 170px; border: 4px solid var(--yellow); border-radius: 24px; color: var(--yellow); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; transform: rotate(-4deg); outline: 1.5px solid var(--yellow); outline-offset: -12px; }
.l-ticket .k { font: 700 10px var(--mono); letter-spacing: .2em; }
.l-ticket .jp { font: 800 42px/1 var(--jp); }
.l-ticket .w { font: 900 22px var(--display); letter-spacing: .08em; }
#ask { width: 100%; text-align: left; }
#ask[hidden] { display: none; }
.l-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.l-ask label { color: #f3f1ea; margin: 0; }
.l-ask input { background: #151d26; color: #f3f1ea; border-color: #33425a; }
.l-ask input:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgb(242 195 0 / 25%); }
#ask button { width: 100%; background: var(--yellow); border-color: var(--yellow); color: #16191d; }
.l-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.l-ask .l-thanks { font: 800 28px/1.1 var(--display); text-transform: uppercase; color: var(--yellow); }
.l-thanks[hidden] { display: none; }
.l-have a { color: var(--yellow); }
.l-foot { position: relative; border-top: 1px solid rgb(243 241 234 / 15%); text-align: center; padding: 18px; margin: 0; font: 12px var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: #9aa3ae; }

@media (max-width: 720px) {
  .l-links, .l-clocks { display: none; }
  .l-signin { margin-left: auto; }
  .l-dome { opacity: .1; }
  .l-hero { padding: 40px 20px 64px; }
  .l-section { padding: 64px 20px; }
  .l-demo li, .l-demohead { padding-left: 18px; padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .l-sky .stars, .l-dome, .streaks span, .pulse, .l-stamp { animation: none; }
  .streaks { display: none; }
}