/* =============================================================================
   THE CANVAS AND WHAT SITS ON IT

   The ground is a gradient and the painting hangs at the top of it. That order
   matters: a 1122px photograph stretched over a 2560px monitor goes soft, and a
   gradient never does, so the picture stays at a size it can hold and the
   gradient carries the rest of the page.

   Everything above is glass: translucent, blurred, saturated, with a lit top
   edge. Nothing in the interface is an opaque rectangle.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100dvh;
  background: var(--abyss);
  color: var(--bone);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
}

/* ---- the ground ---------------------------------------------------------
   The page sits on a gradient, not on the picture. A gradient is resolution
   free, so it is sharp at any size, and it gives the glass above it something
   even to sit on. The painting used to be stretched across the whole viewport,
   which upscaled a 1122px file past 2x on a wide screen and went soft. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -4; pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(28,62,132,.55), transparent 62%),
    radial-gradient(90% 70% at 8% 108%, rgba(14,32,70,.5), transparent 60%),
    linear-gradient(180deg, #071228 0%, #050c1c 45%, #03070f 100%);
}

/* ---- the painting -------------------------------------------------------
   Hung once, at the top, at close to its own size rather than blown up to fill
   a monitor. It fades out downward into the gradient, so it reads as a painting
   the page begins with instead of wallpaper the page fights. */
.canvas {
  position: fixed; inset: 0 0 auto var(--rail-w); height: min(96vh, 980px);
  z-index: -3; pointer-events: none;
  background: url('/assets/bg.jpg') 62% 22% / cover no-repeat;
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0,0,0,.35) 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0,0,0,.35) 78%, transparent 100%);
}
/* A cool scrim, so white type has the same contrast over every brushstroke. */
.canvas::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(3,7,17,.26), rgba(3,7,17,.06) 38%, rgba(3,7,17,.5)),
    linear-gradient(90deg, rgba(3,7,17,.34), transparent 34%);
}

/* The waterline. The one horizontal in the composition, and the thing the
   whole product is about: everything above it is price, everything below it
   is the floor. */
.waterline {
  position: fixed; left: var(--rail-w); right: 0; top: 58%; height: 1px; z-index: -2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(232,236,245,.42) 14%, rgba(232,236,245,.42) 86%, transparent);
  opacity: .3;
}

/* the varnish: a soft vignette so the edges darken like oil under glass */
.varnish {
  position: fixed; inset: 0 0 0 var(--rail-w); z-index: -1; pointer-events: none;
  background: radial-gradient(135% 100% at 50% 34%, transparent 52%, rgba(2,4,9,.72) 100%);
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-s); }

/* ---- type ---------------------------------------------------------------
   A gallery-label serif for the headlines, a plain grotesk for the reading, a
   terminal face for anything measured. */
h1, h2 { font-family: var(--display); font-weight: 600; line-height: 1.02; letter-spacing: -.035em; text-transform: uppercase; }
h3 { font-family: var(--display); font-weight: 600; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.01em; line-height: 1.3; }
h4 { font-size: var(--t-body); font-weight: 600; }

.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.muted { color: var(--bone-2); }
.dim   { color: var(--bone-3); }
.up, .long { color: var(--long); }
.down, .short { color: var(--short); }
.warn { color: var(--warn); }

.wrap { width: min(100% - 40px, var(--page)); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: min(100% - 26px, var(--page)); } }

.section { padding-top: var(--s9); }
.section-head { max-width: 60ch; margin-bottom: var(--s5); }
.section-head h2 { margin-bottom: var(--s3); }
.section-head p { color: var(--bone-2); }
@media (max-width: 720px) { .section { padding-top: var(--s8); } }

/* ---- the label ----------------------------------------------------------
   Small caps in mono, the way a museum labels a wall. Used for column headers
   and data keys, never as decoration above a heading. */
.label {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3);
}

/* -------------------------------------------------------------------- rail
   Navigation down the left edge, the way a machine puts its controls on a
   panel: stamped tiles, hard corners, sections named in caps. It is fixed, so
   the painting scrolls behind it and the controls never move. */
.rail {
  position: fixed; left: var(--s3); top: var(--s3); bottom: var(--s3);
  width: var(--rail-w); z-index: 70;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s4) 10px var(--s4);
  border-radius: var(--r-panel);
  /* real glass: translucent, blurred, saturated, with a lit top edge and a
     drawn one at the left, the way a pane of glass catches a room */
  background: linear-gradient(180deg, rgba(20,38,74,.42), rgba(6,14,30,.52));
  border: 1px solid rgba(232,236,245,.11);
  box-shadow:
    inset 0 1px 0 rgba(232,236,245,.16),
    inset -1px 0 0 rgba(232,236,245,.04),
    0 24px 60px rgba(2,5,12,.55);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  overflow-y: auto; overscroll-behavior: contain;
}
.rail::-webkit-scrollbar { width: 0; }
.has-rail { padding-left: calc(var(--rail-w) + var(--s3) * 2); }
.rail, .has-rail { transition: width .22s var(--ease), padding-left .22s var(--ease); }

/* ---- folded ------------------------------------------------------------
   Down to the tiles. Nothing is removed from the DOM, so the labels come
   straight back and each tile carries its own name as a tooltip meanwhile. */
.rail-folded { --rail-w: 62px; }
.rail-folded .rail-brand b,
.rail-folded .rail-label,
.rail-folded .rail-soon,
.rail-folded .rail-group { display: none; }
.rail-folded .rail-top { flex-direction: column; gap: 6px; padding-bottom: var(--s4); }
.rail-folded .rail-brand { padding: 2px 0; }
.rail-folded .rail-item { justify-content: center; padding-inline: 0; }
.rail-folded .rail-fold svg { transform: scaleX(-1); }
.rail-folded .rail { padding-inline: 7px; }

.rail-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px;
  font-weight: 650; letter-spacing: -.02em; font-size: 1.02rem;
}
.rail-top { display: flex; align-items: center; gap: 8px; padding-bottom: var(--s5); }
.rail-brand { flex: 1; min-width: 0; }
.rail-fold {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 8px; color: var(--bone-4);
  transition: color .14s var(--ease), background .14s var(--ease);
}
.rail-fold:hover { color: var(--bone); background: rgba(232,236,245,.08); }
.rail-fold svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: square; transition: transform .2s var(--ease);
}

.rail-brand .mark {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 9px; color: var(--bone);
  background: linear-gradient(180deg, rgba(232,236,245,.14), rgba(232,236,245,.04));
  border: 1px solid rgba(232,236,245,.14);
  box-shadow: inset 0 1px 0 rgba(232,236,245,.2);
}
.rail-brand .mark svg { width: 18px; height: 18px; }

.rail-group { padding: var(--s5) 10px var(--s2); }

.rail-item {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 8px; border-radius: 10px;
  color: var(--bone-2); font-size: var(--t-sm); font-weight: 500;
  border: 1px solid transparent;
  transition: color .14s var(--ease), background .14s var(--ease), border-color .14s var(--ease);
}
.rail-item:hover { color: var(--bone); background: rgba(232,236,245,.06); }
.rail-item.on {
  color: var(--bone);
  background: linear-gradient(180deg, rgba(232,236,245,.13), rgba(232,236,245,.05));
  border-color: rgba(232,236,245,.14);
  box-shadow: inset 0 1px 0 rgba(232,236,245,.16);
}
.rail-item.soon { color: var(--bone-4); pointer-events: none; }

/* the tile: a stamped plate with the icon cut into it */
.rail-tile {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: 9px; border: 1px solid rgba(232,236,245,.1);
  background: linear-gradient(180deg, rgba(232,236,245,.1), rgba(232,236,245,.02));
  box-shadow: inset 0 1px 0 rgba(232,236,245,.14);
  transition: background .16s var(--ease), box-shadow .16s var(--ease);
}
.rail-tile svg { width: 16px; height: 16px; }
.rail-item.on .rail-tile { background: var(--bone); color: #06101f; border-color: transparent; }
.rail-item.soon .rail-tile { opacity: .45; }

.rail-label { flex: 1; }
.rail-soon {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bone-4); border: 1px solid var(--edge); padding: 2px 6px; border-radius: var(--r-s);
}
.rail-foot { margin-top: auto; padding-top: var(--s5); }
.rail-x .rail-tile svg { width: 13px; height: 13px; }

/* On a narrow screen the rail lies down along the bottom as a control strip. */
@media (max-width: 900px) {
  .rail {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 62px;
    border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
    flex-direction: row; align-items: center; gap: 0;
    padding: 0 var(--s3) env(safe-area-inset-bottom); border-right: 0; border-top: 1px solid var(--edge);
    overflow-x: auto; overflow-y: hidden;
  }
  .has-rail { padding-left: 0; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .rail-brand, .rail-group, .rail-label, .rail-soon, .rail-foot, .rail-fold { display: none; }
  .rail-top { padding: 0; }
  .rail-item { padding: 0 6px; }
}

/* ------------------------------------------------------------------ ticker */
.ticker {
  position: relative; z-index: 60; height: 32px; overflow: hidden;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--edge);
  background: rgba(4,7,15,.5); backdrop-filter: var(--blur);
}
.ticker-track { display: flex; white-space: nowrap; animation: slide 52s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s4); font-size: var(--t-xs); color: var(--bone-2);
  font-family: var(--mono); border-right: 1px solid var(--edge);
}
.tick .who { color: var(--bone-4); }
.ticker-empty { padding: 0 var(--s4); font-size: var(--t-xs); color: var(--bone-4); font-family: var(--mono); }

/* ------------------------------------------------------------------ header */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(4,7,15,.55);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--edge);
}
.top .wrap { display: flex; align-items: center; gap: var(--s3); height: 62px; justify-content: flex-end; }
.brand { display: none; }   /* it is on the rail */
.brand svg { width: 26px; height: 26px; }
.nav { display: none; }   /* the rail owns navigation */
.nav a {
  padding: 8px 16px; border-radius: var(--r-pill); color: var(--bone-3);
  font-size: var(--t-sm); font-weight: 500;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav a:hover { color: var(--bone); background: var(--glass-hi); }
.nav a[aria-current='page'] { color: var(--bone); background: rgba(232,236,245,.1); }
.top-right { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
@media (max-width: 900px) { .nav a.hide-sm { display: none; } }
@media (max-width: 760px) { .nav { display: none; } .top .wrap { justify-content: space-between; } }
@media (max-width: 560px) { .top-right .hide-xs { display: none; } }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 44px; padding: 0 22px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid rgba(232,236,245,.16);
  background: linear-gradient(180deg, rgba(28,52,100,.45), rgba(10,20,42,.5));
  color: var(--bone);
  box-shadow: inset 0 1px 0 rgba(232,236,245,.14);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: transform .12s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}
.btn:hover { background: rgba(36,66,124,.6); border-color: rgba(232,236,245,.3); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .4; pointer-events: none; }
/* the primary action is the cold light on the water */
.btn-primary {
  background: var(--bone); color: #06101f; border-color: transparent;
  font-weight: 650; text-transform: uppercase; letter-spacing: .06em; font-size: var(--t-xs);
  box-shadow: 0 6px 22px -12px rgba(232,236,245,.6);
}
.btn-primary:hover { background: #fff; }
.btn-ghost { background: transparent; border-color: var(--edge); color: var(--bone-2); }
.btn-ghost:hover { color: var(--bone); background: var(--glass-hi); }
.btn-lg { height: 52px; padding: 0 28px; font-size: var(--t-body); }
.btn-sm { height: 34px; padding: 0 14px; font-size: var(--t-xs); }
.btn-long  { background: var(--long-bg); border-color: rgba(79,216,164,.4); color: var(--long); }
.btn-short { background: var(--short-bg); border-color: rgba(255,122,107,.4); color: var(--short); }

/* ------------------------------------------------------------------- panel
   Glass over paint. One treatment everywhere. */
/* A plate: dark metal over the canvas, one hairline, one square corner, a
   highlight along the top edge where the light catches the machined face. */
.panel {
  background: linear-gradient(180deg, rgba(19,36,72,.4), rgba(6,13,28,.55));
  border: 1px solid rgba(232,236,245,.1);
  border-radius: var(--r-panel);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow:
    inset 0 1px 0 rgba(232,236,245,.14),
    0 20px 50px -24px rgba(2,5,12,.9);
  overflow: hidden;
}
/* the sheen: one soft highlight raked across the top of the glass */
.panel { position: relative; }
.panel::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 42%;
  background: linear-gradient(180deg, rgba(232,236,245,.06), transparent);
  pointer-events: none;
}
.panel > * { position: relative; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s5); border-bottom: 1px solid rgba(232,236,245,.08); min-height: 56px;
}
.panel-head h3 { font-size: var(--t-sm); }
.panel-body { padding: var(--s5); }
.panel-foot { padding: var(--s4) var(--s5); border-top: 1px solid var(--edge); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.panel + .panel { margin-top: var(--s4); }

.rows > * { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 11px var(--s5); border-bottom: 1px solid var(--edge); }
.rows > *:last-child { border-bottom: 0; }
.rows .k { color: var(--bone-3); font-size: var(--t-sm); }
.rows .v { font-family: var(--mono); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------- pill */
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--r-pill); font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--edge-2); color: var(--bone-2); background: rgba(232,236,245,.05);
}
.pill-long  { color: var(--long);  border-color: rgba(79,216,164,.4);  background: var(--long-bg); }
.pill-short { color: var(--short); border-color: rgba(255,122,107,.4); background: var(--short-bg); }
.pill-accent{ color: var(--bone);  border-color: var(--edge-2); background: rgba(232,236,245,.1); }
.pill-warn  { color: var(--warn);  border-color: rgba(227,180,92,.4); background: rgba(227,180,92,.1); }
.pill-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 70% { opacity: .4; } }

/* -------------------------------------------------------------------- chip */
.chip {
  height: 34px; padding: 0 15px; border-radius: var(--r-pill);
  border: 1px solid var(--edge); background: transparent; color: var(--bone-3);
  font-size: var(--t-xs);
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.chip:hover { color: var(--bone); border-color: var(--edge-2); }
.chip.on { color: #06101f; background: var(--bone); border-color: transparent; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* -------------------------------------------------------------------- logo */
.logo {
  display: inline-grid; place-items: center; flex: none;
  border-radius: 50%; overflow: hidden; background: rgba(232,236,245,.08);
  font-family: var(--mono); font-weight: 620; color: var(--bone);
}
.logo img, .logo svg { width: 100%; height: 100%; object-fit: contain; }
.logo-chip { text-transform: uppercase; }

/* -------------------------------------------------------------------- stat */
.stats { display: grid; gap: 1px; background: var(--edge); }
.stat { background: rgba(6,13,27,.86); padding: var(--s4) var(--s5); }
.stat .k { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-4); }
.stat .v { font-family: var(--mono); font-size: 1.12rem; font-weight: 500; margin-top: 4px; letter-spacing: -.025em; }
.stat .s { font-size: var(--t-xs); color: var(--bone-4); margin-top: 2px; }

/* ------------------------------------------------------------------ fields */
.field { display: block; margin-bottom: var(--s4); }
.field > .lbl { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: 7px; }
.field .lbl span:first-child { font-size: var(--t-sm); color: var(--bone-2); font-weight: 500; }
.field .hint { display: block; font-size: var(--t-xs); color: var(--bone-4); margin-top: 7px; }
.field > .lbl .hint { margin-top: 0; }

.input, select.input, textarea.input {
  width: 100%; height: 46px; padding: 0 15px; border-radius: var(--r-s);
  background: rgba(4,7,15,.5); border: 1px solid var(--edge); color: var(--bone);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
textarea.input { height: auto; padding: 13px 15px; resize: vertical; min-height: 88px; line-height: 1.5; }
.input:hover { border-color: var(--edge-2); }
.input:focus { border-color: rgba(232,236,245,.45); box-shadow: var(--ring); outline: none; }
.input::placeholder { color: var(--bone-4); }
.input.num-in { font-family: var(--mono); }
.input.pill { border-radius: var(--r-pill); }
select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--bone-3) 50%), linear-gradient(135deg, var(--bone-3) 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px;
}
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: var(--r-pill); background: rgba(232,236,245,.18); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--bone); border: 3px solid #0a1830; cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--bone); border: 3px solid #0a1830; cursor: pointer; }

/* ------------------------------------------------------------------ empty */
.empty { padding: var(--s8) var(--s5); text-align: center; }
.empty h4 { margin-bottom: var(--s2); }
.empty p { font-size: var(--t-sm); color: var(--bone-3); max-width: 52ch; margin-inline: auto; }

/* ----------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--edge); margin-top: var(--s9); padding: var(--s5) 0 var(--s7); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between; }
.foot .links { display: flex; gap: var(--s5); flex-wrap: wrap; }
.foot a, .foot p { font-size: var(--t-xs); color: var(--bone-4); }
.foot a:hover { color: var(--bone); }

/* ------------------------------------------------------------------ toast */
#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 18px);
  z-index: 200; padding: 12px 20px; border-radius: var(--r);
  background: var(--glass-2); border: 1px solid var(--edge-2);
  backdrop-filter: var(--blur); box-shadow: var(--lift-2); font-size: var(--t-sm);
  opacity: 0; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 900px) {
  .canvas, .varnish { inset: 0; }
  .waterline { left: 0; }
  /* the rail's brand goes down with it, so the header takes it back */
  .brand {
    display: flex; align-items: center; gap: var(--s2);
    font-weight: 650; font-size: 1.05rem; letter-spacing: -.02em;
  }
  .brand svg { width: 20px; height: 20px; }
}

/* ---------------------------------------------------------------- announce
   One line across the top of the page, above everything, for the one thing a
   visitor needs to know before they read anything else. It is dismissible and
   it remembers, because an announcement that cannot be turned off is an advert.

   Adapted from the shadcn banner pattern: shade sweep, icon, title, one action,
   one close. Built here in plain CSS because this site has no build step. */
.banner {
  position: relative; z-index: 90; overflow: hidden;
  margin: var(--s3) var(--s3) 0;
  border-radius: 14px;
  border: 1px solid rgba(232,236,245,.12);
  background: linear-gradient(180deg, rgba(24,46,92,.5), rgba(8,17,36,.55));
  box-shadow: inset 0 1px 0 rgba(232,236,245,.14), 0 16px 40px -26px rgba(2,5,12,.9);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.banner[hidden] { display: none; }
/* the shade: a slow highlight raked across the glass, once, then still */
.banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(232,236,245,.09) 45%, transparent 70%);
  transform: translateX(-60%);
  animation: shade 6.5s var(--ease) 1.2s 2;
}
@keyframes shade { to { transform: translateX(140%); } }

.banner-in { display: flex; align-items: center; gap: var(--s3); padding: 10px 12px; }
.banner-icon {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 9px; color: var(--bone);
  background: linear-gradient(180deg, rgba(232,236,245,.13), rgba(232,236,245,.03));
  border: 1px solid rgba(232,236,245,.12);
}
.banner-icon svg { width: 16px; height: 16px; }
.banner-text { min-width: 0; flex: 1; }
.banner-text b { display: block; font-size: var(--t-sm); font-weight: 600; }
.banner-text span { display: block; font-size: var(--t-xs); color: var(--bone-3); }
.banner-act { display: flex; align-items: center; gap: 6px; flex: none; }
.banner-x {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  color: var(--bone-3);
}
.banner-x:hover { color: var(--bone); background: rgba(232,236,245,.07); }
.banner-x svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .banner-text span { display: none; }
  .banner { margin: var(--s2) var(--s2) 0; }
}

/* ------------------------------------------------------------------ motion
   Two state icons, in the spirit of the animated-state-icons set: a spinner
   that becomes a tick when a transaction confirms, and nothing else. A button
   that is waiting on a chain should say so with one moving part, not five. */
.spin { animation: spin 1s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }

.state-icon { width: 16px; height: 16px; flex: none; }
.state-icon .ring { stroke-dasharray: 25 75; stroke-linecap: round; }
.state-icon .tick { stroke-dasharray: 30; stroke-dashoffset: 30; }
.state-icon.done .ring { animation: none; opacity: .35; stroke-dasharray: 100; }
.state-icon.done .tick { animation: draw .4s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .banner::after, .spin { animation: none; }
  .state-icon.done .tick { stroke-dashoffset: 0; animation: none; }
}