/* =====================================================================
   NOWHERE CITY, Cloud Isle
   A 90s city-sim interface for a city floating above the clouds. Limited palette, hard pixel edges,
   bevels made with box-shadow, no images from the web. One stylesheet for every page: the shared
   header, nav and footer, the home page's city, and each page's panels. whitepaper.css loads after
   it on the whitepaper.

   Colour roles (kept deliberately few):
   - lamp yellow  : headings and highlights on dark, focus rings
   - fee cyan     : data, meters, Venice and the private quarter
   - grass green  : primary actions, success
   - ember        : burns only;  fire: errors only
   - brick        : small labels on paper
   ===================================================================== */

:root {
  --ink: #1c1f36;
  --night: #262b4a;
  --deep: #1d2140;
  --steel7: #353b6e;
  --steel6: #4b55a0;
  --steel5: #6f7fd1;
  --steel3: #a9b3ea;
  --steel1: #e1e5fb;
  --paper: #fffaf2;
  --paper2: #ece6f6;
  --paper3: #c3bce6;
  --paper4: #555b85;
  --grass7: #0e4b57;
  --grass6: #15707f;
  --grass5: #36bccd;
  --grass3: #9fe3ea;
  --earth5: #7d5232;
  --brick: #a6452f;
  --lamp: #ffd36a;
  --ember: #ff7a2f;
  --fire: #e0412a;
  --fee: #46d0d8;
  --mint: #8ee8d8;
  --term: #141733;
  --text-dim: #262b47;
  --text-mid: #4c5274;

  --ui: "Quantico", "Trebuchet MS", system-ui, sans-serif;
  --body: "Quantico", "Trebuchet MS", system-ui, sans-serif;
  --mono: "Kode Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --focus: var(--lamp);
  --topbar-h: 60px;
  --hud-h: 66px;
  --bevel-hi: #ffffff;
  --shadow: 4px 4px 0 rgba(28, 31, 70, .55);
  --gap: 20px;
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 16px); }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 17px/1.45 var(--body);
  overflow-x: hidden;
}

img, canvas, svg { image-rendering: pixelated; image-rendering: crisp-edges; }
canvas { display: block; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: var(--mono); background: rgba(28, 31, 54, .08); padding: 0 4px; }
a { color: inherit; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.panel-body, .win-body, .win, .panel { --focus: #b5331c; }
.code, .top, .hud, .mapctl, .pins, .foot, .band, .formula, .estimator, .lp-pipe, .lp-est, .con-out, .lx-tools { --focus: var(--lamp); }
.band .panel { --focus: #b5331c; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--lamp); color: var(--ink); padding: 10px 14px;
  font: 700 14px var(--ui); border: 2px solid var(--ink); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------------- pixel icons ---------------- */
.ico { display: inline-block; flex: none; vertical-align: middle; }
.ico svg { display: block; width: 100%; height: 100%; }
.ico-16 { width: 16px; height: 16px; }
.ico-32 { width: 32px; height: 32px; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 14px;
  font: 700 13px/1 var(--ui); letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink); background: var(--paper2);
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3), 2px 2px 0 var(--ink);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: #ece6f6; }
.btn:active, .btn[aria-pressed="true"] {
  box-shadow: inset 2px 2px 0 var(--paper3), inset -2px -2px 0 var(--bevel-hi);
  transform: translate(2px, 2px);
}
.btn-go { background: var(--grass5); color: var(--ink); box-shadow: inset 2px 2px 0 #8ae6f0, inset -2px -2px 0 var(--grass6), 2px 2px 0 var(--ink); }
.btn-go:hover { background: #458a32; }
.btn-go:active { box-shadow: inset 2px 2px 0 var(--grass6), inset -2px -2px 0 #8ae6f0; }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--paper3); box-shadow: 2px 2px 0 var(--ink); }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); color: var(--lamp); border-color: var(--lamp); }
.btn-lg { min-height: 48px; padding: 10px 18px; font-size: 14px; }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 12px; }
.btn-xs { min-height: 30px; padding: 4px 10px; font-size: 11px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.linkbtn {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; min-height: 30px;
  font: 700 12px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .03em;
  color: var(--brick); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.linkbtn:hover { color: #7a3020; }

/* =====================================================================
   TOP BAR: brand, site navigation, wallet (shared by every page)
   ===================================================================== */
.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  height: var(--topbar-h); padding: 0 20px;
  background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px),
  linear-gradient(var(--steel7), var(--night));
  border-bottom: 2px solid var(--ink);
  box-shadow: inset 0 2px 0 var(--steel5), 0 2px 0 rgba(0,0,0,.35);
  color: var(--paper);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--paper); text-decoration: none; flex: none; }
.brand:hover .brand-name { color: var(--lamp); }
.brand-text { display: grid; line-height: 1; }
.brand-name { font: 700 20px/1 var(--ui); letter-spacing: .02em; text-transform: uppercase; }
.brand-sub { font: 400 11px/1.5 var(--ui); color: var(--steel3); text-transform: uppercase; letter-spacing: .08em; }

.site-nav { flex: 1; min-width: 0; }
.nav-list { display: flex; align-items: center; gap: 2px; justify-content: center; }
.nav-list a {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 11px;
  font: 400 12px/1 var(--ui); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  color: var(--steel1); text-decoration: none;
}
.nav-list a:hover { color: var(--lamp); }
.nav-list a[aria-current] { color: var(--lamp); font-weight: 700; }
.nav-list a[aria-current]::after, .nav-list a:hover::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: currentColor;
}
.nav-list .nav-wp {
  margin-left: 8px; padding: 0 12px; min-height: 36px;
  color: var(--ink); background: var(--paper2); border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3), 2px 2px 0 var(--ink);
  font-weight: 700;
}
.nav-list .nav-wp:hover { color: var(--ink); background: #ece6f6; }
.nav-list .nav-wp[aria-current] { color: var(--ink); background: var(--lamp); }
.nav-list .nav-wp::after { display: none; }
.btn-wallet { min-height: 40px; flex: none; }
.btn-wallet[data-connected="true"] { background: var(--steel1); text-transform: none; }
.menu-btn {
  display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; flex: none;
  font: 700 12px/1 var(--ui); text-transform: uppercase; color: var(--paper);
  background: var(--steel6); border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--steel5), inset -2px -2px 0 var(--steel7); cursor: pointer;
}
.menu-btn[aria-expanded="true"] { background: var(--steel7); color: var(--lamp); box-shadow: inset 2px 2px 0 var(--ink), inset -2px -2px 0 var(--steel5); }

/* =====================================================================
   THE CITY (hero): map viewport + welcome window + HUD
   ===================================================================== */
.city { position: relative; background: #b3bbee; border-bottom: 2px solid var(--ink); }
.viewport {
  position: relative; overflow: hidden;
  height: clamp(520px, calc(100vh - var(--topbar-h) - var(--hud-h)), 760px);
  background: #b3bbee;
  touch-action: pan-y;
  cursor: grab;
}
.viewport.dragging { cursor: grabbing; }
.viewport.hovering { cursor: pointer; }
#map { position: absolute; left: 0; top: 0; image-rendering: pixelated; outline-offset: -4px; }

/* windows (sim style) */
.win {
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3), var(--shadow);
}
.win-bar, .bar {
  display: flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 4px 6px 4px 10px;
  color: var(--paper);
  background:
  repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.07) 2px 4px),
  var(--steel7);
  border-bottom: 2px solid var(--ink);
}
.win-t, .bar h2, .bar h3, .win-bar h2 {
  flex: 1; min-width: 0;
  font: 700 13px/1.2 var(--ui); text-transform: uppercase; letter-spacing: .03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.win-x {
  width: 26px; height: 22px; display: grid; place-items: center; padding: 0;
  background: var(--paper2); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3); cursor: pointer;
}
.win-x:active { box-shadow: inset 2px 2px 0 var(--paper3), inset -2px -2px 0 var(--bevel-hi); }
.win-body { padding: 14px; }

/* hero window */
.hero-win { position: absolute; z-index: 6; left: 20px; top: 20px; width: 432px; }
@media (min-width: 1400px) { .hero-win { width: 500px; } }   /* narrower below, so the island keeps 2× at 1280 */
.hero-win .sub { font-size: 16px; line-height: 1.42; }
.hero-win .win-bar { cursor: default; }
.logo {
  margin: 6px 0 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font: 700 48px/1 var(--ui); text-transform: uppercase; letter-spacing: .01em; color: var(--ink);
  text-shadow: 3px 3px 0 var(--paper3);
}
.chip {
  font: 700 14px/1 var(--ui); padding: 6px 8px 5px; color: var(--ink); background: var(--fee);
  border: 2px solid var(--ink); text-shadow: none; box-shadow: 2px 2px 0 var(--ink);
}
.tagline { font: 600 22px/1.2 var(--body); color: var(--ink); }
.sub { margin-top: 8px; font-size: 17px; line-height: 1.4; color: #2f3354; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.hero-win .btn-lg { padding: 10px 12px; font-size: 13px; }
.hero-links { margin: 2px 0 4px; }
.hero-links .linkbtn { color: var(--steel7); }
.hero-links .linkbtn:hover { color: var(--ink); }
.hero-win .sub + .sub { margin-top: 10px; }

/* building label pins */
.pins { position: absolute; inset: 0; pointer-events: none; }
.pins.off .pin { opacity: 0; pointer-events: none; }
.pins.off .pin:focus { opacity: 1; pointer-events: auto; }
.pin {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px 3px 4px;
  font: 400 12px/1 var(--ui); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  color: var(--paper); background: var(--ink); text-decoration: none;
  border: 2px solid var(--paper);
  box-shadow: 2px 2px 0 rgba(0,0,0,.45);
  cursor: pointer;
  transform: translate(-50%, -100%);
}
.pin::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 6px; height: 6px; margin-left: -3px;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.pin:hover, .pin.hot { background: var(--steel7); color: var(--lamp); border-color: var(--lamp); }
.pin:hover::after, .pin.hot::after { background: var(--lamp); }
.pin-n {
  display: grid; place-items: center; width: 15px; height: 15px; font-size: 10px; font-weight: 700;
  color: var(--ink); background: var(--lamp);
}
.pin-coming { background: var(--lamp); color: var(--ink); border-color: var(--ink); }
.pin-coming::after { background: var(--ink); }
.pin-coming .pin-n { background: var(--ink); color: var(--lamp); }
.pin-coming:hover { background: #ffe39a; color: var(--ink); border-color: var(--ink); }
.pin[hidden] { display: none; }
.pin-l { display: inline-block; }
.pin.compact { padding: 3px 4px; }
.pin.compact .pin-l { display: none; }

.tip {
  position: absolute; z-index: 9; pointer-events: none; max-width: 280px;
  padding: 6px 8px; font: 400 15px/1.3 var(--body);
  color: var(--paper); background: rgba(28, 31, 54, .94); border: 2px solid var(--lamp);
}
.tip b { font: 700 12px/1.2 var(--ui); text-transform: uppercase; color: var(--lamp); display: block; margin-bottom: 2px; }

/* floating sim windows */
.wins { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.fwin {
  position: absolute; pointer-events: auto;
  display: flex; flex-direction: column;
  width: 380px; max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
}
.fwin[hidden] { display: none; }
.fwin .win-bar { cursor: move; user-select: none; touch-action: none; }
.fwin .win-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.fwin.front .win-bar { background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.08) 2px 4px), var(--steel6); }
.fwin .panel-body { padding: 0; }
.scrim { display: none; }

.ledger-foot { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 15px; line-height: 1.25; color: #2f3354; }
.ledger-foot > span:nth-child(2) { flex: 1 1 140px; }

/* map controls */
.mapctl {
  position: absolute; z-index: 8; right: 12px; bottom: 12px;
  display: flex; gap: 4px; padding: 4px;
  background: var(--steel7); border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--steel5), 2px 2px 0 rgba(0,0,0,.4);
}
.mbtn {
  display: grid; place-items: center; min-width: 34px; height: 32px; padding: 0 6px;
  background: var(--steel6); color: var(--paper); border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--steel5), inset -2px -2px 0 var(--steel7); cursor: pointer;
}
.mbtn:hover { background: #5a64b0; }
.mbtn[aria-pressed="true"] { background: var(--steel7); box-shadow: inset 2px 2px 0 var(--ink), inset -2px -2px 0 var(--steel5); color: var(--lamp); }
.mbtn-txt { font: 400 12px/1 var(--ui); text-transform: uppercase; }

/* ---------------- the city HUD: tools, clock, news ---------------- */
.hud {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: stretch;
  min-height: var(--hud-h);
  background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px),
  var(--night);
  border-top: 2px solid var(--ink); box-shadow: inset 0 2px 0 var(--steel6);
  color: var(--paper);
}
.tools { padding: 4px 8px; border-right: 2px solid var(--ink); box-shadow: 2px 0 0 var(--steel7); }
.tools ul { display: flex; gap: 4px; height: 100%; align-items: center; }
.tool {
  display: grid; justify-items: center; align-content: center; gap: 3px;
  width: 64px; height: 54px; padding: 3px 2px;
  background: var(--steel6); color: var(--paper); text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--steel5), inset -2px -2px 0 var(--steel7);
  cursor: pointer;
}
.tool .ico-32 { width: 28px; height: 28px; }
.tool:hover { background: #5a64b0; }
.tool:active, .tool[aria-expanded="true"] {
  background: var(--steel7);
  box-shadow: inset 2px 2px 0 var(--ink), inset -2px -2px 0 var(--steel5);
}
.tool[aria-expanded="true"] .tool-l { color: var(--lamp); }
.tool-l { font: 400 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .02em; }

.status {
  display: grid; align-content: center; gap: 6px; padding: 0 16px;
  font: 400 12px/1 var(--ui); text-transform: uppercase; color: var(--steel1); white-space: nowrap;
  border-right: 2px solid var(--ink); box-shadow: 2px 0 0 var(--steel7);
}
.status b { font-weight: 700; color: var(--paper); }
.clock { display: flex; align-items: center; gap: 8px; }
.dayno { color: var(--steel3); }
.reset b { color: var(--lamp); }

.news { display: flex; align-items: stretch; min-width: 0; color: var(--lamp); }
.news-tag {
  display: flex; align-items: center; gap: 6px; padding: 0 12px;
  font: 700 12px/1 var(--ui); text-transform: uppercase; color: var(--steel1);
  white-space: nowrap;
}
.news-tag .ico { filter: none; }
.news-win { position: relative; flex: 1; overflow: hidden; }
.news-track { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; will-change: transform; }
.news-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 26px 0 0; font: 400 15px/1 var(--body); }
.news-item::before { content: ""; width: 6px; height: 6px; background: var(--steel5); flex: none; }
.news-item.k-burn { color: #ffb27a; }
.news-item.k-burn::before { background: var(--ember); }
.news-item.k-call { color: #9ef0ff; }
.news-item.k-call::before { background: var(--fee); }
.news-item.k-fee { color: var(--lamp); }
.news-item.k-fee::before { background: var(--lamp); }
.news-item.k-city { color: var(--paper); }
.news-btn { width: 44px; flex: none; display: grid; place-items: center; background: var(--steel7); color: var(--paper); border: 0; border-left: 2px solid var(--ink); cursor: pointer; }
.news-btn[aria-pressed="true"] { color: var(--lamp); }
.news.static .news-track { position: static; padding-left: 12px; overflow: hidden; }

/* =====================================================================
   BANDS: alternating backgrounds (twilight and high dusk)
   ===================================================================== */
.guide { display: block; }
.band { padding: 72px 24px; border-top: 2px solid var(--ink); color: var(--paper); }
.band-a {
  background-color: #2f3563;
  background-image:
  linear-gradient(rgba(255,255,255,.035) 2px, transparent 2px),
  linear-gradient(90deg, rgba(255,255,255,.035) 2px, transparent 2px);
  background-size: 32px 32px;
  --lede: #e6e9fb;
}
.band-b {
  background-color: var(--night);
  background-image:
  linear-gradient(rgba(169,179,234,.08) 2px, transparent 2px),
  linear-gradient(90deg, rgba(169,179,234,.08) 2px, transparent 2px);
  background-size: 32px 32px;
  --lede: #e1e5fb;
}
.wrap { max-width: 1200px; margin: 0 auto; display: grid; gap: var(--gap); }
.wrap > * { min-width: 0; }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-bottom: 8px; }
.sec-copy { max-width: 760px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font: 400 12px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .08em; color: var(--lamp); }
.eb-n { display: inline-grid; place-items: center; min-width: 28px; height: 20px; padding: 0 4px; font-weight: 700; color: var(--ink); background: var(--lamp); box-shadow: 2px 2px 0 var(--ink); }
.sec-head h1, .sec-head h2 { margin: 12px 0 10px; font: 700 28px/1.15 var(--ui); text-transform: uppercase; letter-spacing: .01em; color: var(--paper); text-shadow: 3px 3px 0 var(--ink); }
.sec-head h1 { font-size: 36px; line-height: 1.1; }
.lede code { background: rgba(255,255,255,.12); color: #fff; }
.lede { max-width: 64ch; font-size: 19px; line-height: 1.45; color: var(--lede, #e6e9fb); }
.src { max-width: 80ch; font-size: 14px; line-height: 1.45; color: #b9bfe3; }
.band-b .src { color: #b9bfe3; }

.grid-57 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: stretch; }
.grid-57 > .panel:nth-child(3) { grid-column: 1; }
.grid-57 > * { min-width: 0; }

/* panels */
.panel {
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3), var(--shadow);
  min-width: 0;
}
article.panel { display: flex; flex-direction: column; }
article.panel > .panel-body { flex: 1; }
.bar-note {
  flex: none; font: 400 11px/1 var(--ui); text-transform: uppercase; padding: 4px 6px;
  color: var(--ink); background: var(--steel3); border: 2px solid var(--ink); white-space: nowrap;
}
.bar-coming { background: var(--lamp); }
.panel-body { padding: 18px; display: grid; gap: 14px; align-content: start; grid-template-columns: minmax(0, 1fr); }
.fine { font-size: 14px; line-height: 1.45; color: var(--text-mid); }
.small { font-size: 16px; line-height: 1.45; color: var(--text-dim); }
.lead-strong { font: 600 20px/1.3 var(--body); color: var(--ink); }
.field-l { display: block; font: 400 12px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .03em; color: var(--paper4); margin-bottom: 4px; }
.hint { margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--text-mid); }

.ticks { display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.45; color: var(--text-dim); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--grass5); border: 2px solid var(--ink); }
.ticks-x li::before { background: var(--fire); }
.ticks b { font-weight: 600; color: var(--ink); }

.in {
  width: 100%; min-width: 0; min-height: 40px; padding: 6px 10px;
  font: 500 17px/1.2 var(--body); color: var(--ink); background: #fffdf8;
  border: 2px solid var(--ink); border-radius: 0;
  box-shadow: inset 2px 2px 0 var(--paper3);
}
.in::placeholder { color: #74684a; }
.in:focus-visible { outline-offset: 1px; }
.in[aria-invalid="true"] { border-color: var(--fire); box-shadow: inset 2px 2px 0 #f2b8a8; }
textarea.in { display: block; resize: vertical; min-height: 64px; font-size: 17px; line-height: 1.3; }
select.in, .sel {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 34px;
  font: 400 15px/1.2 var(--body);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 11px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.inrow { display: flex; gap: 8px; align-items: stretch; }
.inrow .btn { flex: none; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }

.meter { height: 14px; margin: 6px 0 4px; background: var(--ink); border: 2px solid var(--ink); }
.meter span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--fee) 0 6px, #2aa5b4 6px 8px); }
.meter-steel span { background: repeating-linear-gradient(90deg, var(--grass3) 0 6px, #5cc6d4 6px 8px); min-width: 4px; }

.code {
  margin: 0; padding: 12px 14px; overflow-x: auto;
  font: 400 14px/1.55 var(--mono); color: #e8f1e8; background: var(--term);
  border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #000;
  white-space: pre; tab-size: 2;
}
.code code { background: none; padding: 0; color: inherit; }
.code-dim { color: #b9d3c0; }

/* =====================================================================
   HOW IT WORKS (how.html)
   ===================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.step {
  padding: 12px 12px 16px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3), var(--shadow);
}
.vig {
  width: 100%; height: auto; aspect-ratio: 128 / 88; margin-bottom: 12px;
  background: #b3bbee; border: 2px solid var(--ink);
}
.step-n { display: flex; align-items: center; gap: 8px; font: 700 12px/1.3 var(--ui); text-transform: uppercase; color: var(--brick); letter-spacing: .03em; }
.step-n span { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--ink); background: var(--lamp); border: 2px solid var(--ink); }
.step h2 { margin: 8px 0 6px; font: 700 15px/1.25 var(--ui); text-transform: uppercase; }
.step p:last-child { font-size: 16px; line-height: 1.45; color: var(--text-dim); }

/* where the value goes */
.fsplit { display: flex; height: 34px; gap: 2px; padding: 2px; background: var(--ink); border: 2px solid var(--ink); }
.sp { display: flex; align-items: center; justify-content: center; min-width: 0; flex: 1 1 0; font: 700 12px/1 var(--ui); color: var(--ink); }
.sp b { padding: 2px 4px; background: rgba(255,255,255,.75); }
.sp-fund { background: repeating-linear-gradient(90deg, var(--fee) 0 6px, #2aa5b4 6px 8px); }
.sp-burn { background: repeating-linear-gradient(90deg, var(--ember) 0 6px, #c8401c 6px 8px); }
.sp-team { background: repeating-linear-gradient(90deg, var(--steel3) 0 6px, var(--steel5) 6px 8px); }
.split-kv { display: grid; gap: 8px; }
.split-kv > div { position: relative; padding: 8px 10px 8px 30px; background: #f6f1fb; border: 2px solid var(--paper3); }
.split-kv > div::before { content: ""; position: absolute; left: 9px; top: 12px; width: 10px; height: 10px; border: 2px solid var(--ink); }
.split-kv .k-fund::before { background: var(--fee); }
.split-kv .k-burn::before { background: var(--ember); }
.split-kv .k-team::before { background: var(--steel3); }
.split-kv dt { font: 700 12px/1.3 var(--ui); text-transform: uppercase; color: var(--ink); }
.split-kv dd { font-size: 15px; line-height: 1.4; color: var(--text-dim); }

/* the daily budget */
.formula { display: grid; gap: 10px; padding: 14px; background: var(--term); color: #e8ebff; border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #2c315e; }
.formula-t { font: 400 12px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .04em; color: #a9b3ea; }
.formula pre { margin: 0; overflow-x: auto; font: 400 15px/1.5 var(--mono); color: #e8ebff; white-space: pre; }
.formula pre code { background: none; padding: 0; color: inherit; }
.formula pre b { color: var(--lamp); font-weight: 600; }
.worked { display: grid; gap: 4px; padding: 10px 12px; border-top: 2px dashed #343a6b; font-size: 16px; line-height: 1.45; color: #e8ebff; }
.worked-l { font: 400 12px/1.3 var(--ui); text-transform: uppercase; color: #a9b3ea; }
.worked b { font-weight: 600; color: #fff; }
.worked .hl { color: var(--mint); }

/* morning settlement */
.chart { display: grid; gap: 8px; }
.chart figcaption { font-size: 14px; line-height: 1.4; color: var(--text-mid); }
.settle-chart { width: 100%; max-width: 464px; height: auto; aspect-ratio: 232 / 60; border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #000; background: var(--term); }
.settle-now { display: grid; gap: 4px; padding: 10px 12px; background: var(--ink); color: var(--steel1); border: 2px solid var(--ink); }
.un-l { font: 400 12px/1.3 var(--ui); text-transform: uppercase; color: var(--steel3); }
.un-l b { color: var(--lamp); font-weight: 700; }
.un-s { font-size: 15px; line-height: 1.4; color: #c9cdf0; }
.settle-steps { display: grid; gap: 6px; counter-reset: ss; }
.settle-steps li { counter-increment: ss; position: relative; padding-left: 30px; font-size: 15px; line-height: 1.4; color: var(--text-dim); }
.settle-steps li::before { content: counter(ss); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; font: 700 12px/1 var(--ui); color: var(--ink); background: var(--lamp); border: 2px solid var(--ink); }
.settle-steps b { font-weight: 600; color: var(--ink); }

/* life of a stake */
.life { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: lf; }
.life li { position: relative; display: grid; align-content: start; gap: 4px; padding: 8px 8px 10px; background: #f6f1fb; border: 2px solid var(--paper3); }
.life li:not(:last-child)::after {
  content: ""; position: absolute; right: -10px; top: 46px; width: 10px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px);
}
.life canvas { width: 96px; height: 80px; margin: 0 auto 4px; }
.life-k { font: 700 12px/1.3 var(--ui); text-transform: uppercase; color: var(--brick); }
.life h4 { font: 700 13px/1.25 var(--ui); text-transform: uppercase; }
.life li p:last-child { font-size: 15px; line-height: 1.35; color: var(--text-dim); }
.life-earn { background: #dff6f8 !important; border-color: var(--grass5) !important; }
.life-earn .life-k { color: var(--grass6); }
.leave { padding: 10px 12px; font-size: 15px; line-height: 1.45; color: var(--text-dim); background: #fff6d6; border: 2px solid var(--lamp); }
.leave b { font-weight: 600; color: var(--ink); }

/* =====================================================================
   PAGE HEADS WITH KEY ART (Private AI, Launchpad)
   ===================================================================== */
.sec-head.sec-art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px 40px; }
.sec-art .sec-copy { display: grid; gap: 0; justify-items: start; }
.sec-art .sec-copy .btn { margin-top: 16px; }
.keyart { margin: 0; overflow: hidden; }
.keyart img { display: block; width: 100%; height: auto; image-rendering: auto; border-top: 2px solid var(--ink); background: #0d1b2a; }

.quotes { display: grid; gap: 8px; padding: 12px 14px; background: var(--deep); border: 2px solid var(--ink); border-left: 6px solid var(--fee); }
.quotes blockquote p { font: 600 19px/1.35 var(--body); color: #fff; }
.quotes-src { font: 400 11px/1.3 var(--ui); text-transform: uppercase; color: var(--steel3); }

/* =====================================================================
   THE PRIVATE AI CONSOLE (City Hall, ai.html)
   ===================================================================== */
.con-setup { display: grid; gap: 14px; min-width: 0; }
.lp-fs { margin: 0; padding: 10px 12px 12px; border: 2px solid var(--ink); display: grid; gap: 10px; background: rgba(255, 250, 240, .6); min-width: 0; }
.lp-fs legend { padding: 2px 6px; font: 700 12px/1.2 var(--ui); text-transform: uppercase; color: var(--paper); background: var(--ink); }
.con-run { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.con-max { width: 120px; }
.con-max .field-l { margin-bottom: 4px; }
.con-run .btn-go { flex: 1 1 140px; }

.con-out { display: grid; gap: 0; min-width: 0; background: var(--term); color: var(--mint); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #2c315e; }
.con-meter { padding: 12px 14px; border-bottom: 2px dashed #343a6b; }
.cm-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cm-l { font: 400 12px/1.3 var(--ui); text-transform: uppercase; color: #a9b3ea; }
.cm-v { font: 700 20px/1.2 var(--ui); color: var(--lamp); }
.cm-v.bump, .ration-v.bump { animation: bump .5s steps(3) 1; }
@keyframes bump { 0% { color: var(--fire); transform: translateY(-2px); } 100% { color: var(--lamp); transform: none; } }
.ration-bar { height: 10px; margin-top: 6px; background: #000; border: 2px solid #343a6b; }
.ration-bar span { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(90deg, var(--lamp) 0 4px, #e8a93a 4px 6px); transition: width .4s steps(6); }
.cm-s { margin-top: 6px; font-size: 14px; line-height: 1.35; color: #c3cbf2; }
.con-tabs { display: flex; gap: 4px; padding: 10px 12px 0; border-bottom: 2px solid #343a6b; }
.con-tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; margin-bottom: -2px;
  font: 700 12px/1 var(--ui); text-transform: uppercase; letter-spacing: .02em;
  color: #a9b3ea; background: #10122a; border: 2px solid #343a6b; cursor: pointer;
}
.con-tab:hover { color: var(--mint); }
.con-tab[aria-selected="true"] { color: var(--lamp); background: var(--term); border-bottom-color: var(--term); }
.con-pane { display: grid; gap: 10px; padding: 12px 14px 14px; min-width: 0; }
.con-pane[hidden] { display: none; }
.pane-help { font-size: 15px; line-height: 1.4; color: #c3cbf2; }
.pane-help code { background: rgba(255,255,255,.08); color: #fff; }
.con-log { height: 300px; overflow-y: auto; display: grid; align-content: start; gap: 10px; padding: 10px; background: #0d0f24; border: 2px solid #2a2f5a; scrollbar-color: #343a6b var(--term); }
.msg { font-size: 17px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-sys { color: #c3cbf2; }
.msg-you { color: var(--lamp); }
.msg-you::before { content: "YOU> "; font: 700 12px var(--ui); color: #c7a54a; }
.msg-ai { color: #dff7dc; }
.msg-ai::before { content: attr(data-who) "> "; font: 700 12px var(--ui); color: #5fbf6a; text-transform: uppercase; }
.msg-ai .cursor { display: inline-block; width: 9px; height: 16px; margin-left: 2px; vertical-align: -2px; background: var(--mint); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.msg-foot { display: block; margin-top: 6px; font: 400 12px/1.5 var(--ui); text-transform: uppercase; color: #9fb9c4; }
.msg-foot b { color: var(--lamp); font-weight: 700; }
.msg-out { color: #ffb27a; }
.msg-out .btn { margin-top: 8px; }
.chip-btn { min-height: 34px; padding: 5px 10px; font: 400 15px/1.2 var(--body); color: var(--ink); background: #fffdf8; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--paper3); cursor: pointer; }
.chip-btn:hover { background: #fff3c4; }
.chip-btn[disabled] { opacity: .55; cursor: not-allowed; }
.con-pane .route-h { margin: 0; }
.con-pane .route-t { color: var(--steel1); }
.con-pane .fine { color: #c3cbf2; }
.con-pane .fine code { background: rgba(255,255,255,.08); color: #fff; }
.route-t2 { margin-top: 4px; }
.con-pane .code { border-color: #2a2f5a; }

/* site cams: small static crops of the city at the foot of a panel */
.pb-col { display: flex; flex-direction: column; }
.cam { margin: auto 0 0; display: grid; gap: 6px; }
.cam .vig { width: 448px; max-width: 100%; aspect-ratio: 224 / 100; margin: 0; }
.cam figcaption { font: 400 12px/1.4 var(--ui); text-transform: uppercase; color: var(--paper4); }

/* =====================================================================
   AGENTS AND THE API (ai.html#agents)
   ===================================================================== */
.pass { display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); }
.pass .fine { margin-top: 4px; }
.pass .fine.ok { color: var(--grass6); font-weight: 600; }
.pass .fine.bad { color: #9b2a17; font-weight: 600; }
.route { display: grid; gap: 6px; }
.route-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.route-t { display: flex; align-items: center; gap: 8px; font: 700 12px/1.3 var(--ui); text-transform: uppercase; }
.route-n { padding: 3px 6px; color: var(--ink); background: var(--fee); border: 2px solid var(--ink); }

/* =====================================================================
   THE LAUNCHPAD (launch.html)
   ===================================================================== */
.lp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.lp h3, .lp h4 { margin: 0; }
.lp-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 0 0 4px; border-bottom: 2px solid var(--ink); }
.lp-tab {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; margin-bottom: -2px;
  font: 700 12px/1 var(--ui); text-transform: uppercase; letter-spacing: .02em;
  color: var(--paper4); background: var(--paper2); border: 2px solid var(--ink); border-bottom-color: var(--ink);
  box-shadow: inset 2px 2px 0 var(--bevel-hi); cursor: pointer;
}
.lp-tab:hover { color: var(--ink); background: #ece6f6; }
.lp-tab[aria-selected="true"] { color: var(--ink); background: var(--paper); border-bottom-color: var(--paper); }
.lp-pane { padding-top: 16px; min-width: 0; }
.lp-pane[hidden] { display: none; }
.lp-pane:focus-visible { outline-offset: 4px; }
.lp-pane > .lead-strong { margin-bottom: 4px; }

.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.lp-grid[hidden] { display: none; }
.lp-main, .lp-side { display: grid; gap: 14px; min-width: 0; }
.lp-wallet { padding: 10px 12px; background: #f6f1fb; border: 2px dashed var(--paper4); }
.lp-row2 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; }
.lp-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.in-pre { display: flex; align-items: stretch; }
.in-pre > span { display: grid; place-items: center; padding: 0 8px; font: 700 16px/1 var(--ui); color: var(--paper); background: var(--ink); border: 2px solid var(--ink); }
.in-pre .in { text-transform: uppercase; font-family: var(--ui); font-size: 16px; letter-spacing: .04em; }
.lp-count { text-align: right; }

.lp-img { display: flex; gap: 12px; align-items: center; }
.lp-pix { width: 64px; height: 64px; flex: none; background: #fffdf8; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); image-rendering: pixelated; }
.lp-img-in { min-width: 0; flex: 1; }
.in-file { display: block; width: 100%; max-width: 100%; font: 400 15px/1.3 var(--body); color: var(--ink); }
.in-file::file-selector-button {
  margin-right: 10px; padding: 6px 10px; font: 700 12px/1 var(--ui); text-transform: uppercase; color: var(--ink);
  background: var(--paper2); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3); cursor: pointer;
}
.lp-socials summary { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; font: 700 12px/1.2 var(--ui); text-transform: uppercase; cursor: pointer; }
.lp-socials summary span { font-weight: 400; color: var(--paper4); }

.lp-slide { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; }
.lp-slide .field-l { margin: 0; }
.lp-slide .range, .lp-slide .hint { grid-column: 1 / -1; }
.lp-val { font: 700 18px/1 var(--ui); color: var(--ink); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; --p: 20%; }
.range::-webkit-slider-runnable-track { height: 12px; background: linear-gradient(90deg, var(--fee) var(--p), #2f3458 var(--p)); border: 2px solid var(--ink); }
.range::-moz-range-track { height: 8px; background: linear-gradient(90deg, var(--fee) var(--p), #2f3458 var(--p)); border: 2px solid var(--ink); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 26px; margin-top: -9px; background: var(--lamp); border: 2px solid var(--ink); border-radius: 0; box-shadow: inset -2px -2px 0 #c9962e, inset 2px 2px 0 #fff3c4; }
.range::-moz-range-thumb { width: 12px; height: 22px; background: var(--lamp); border: 2px solid var(--ink); border-radius: 0; box-shadow: inset -2px -2px 0 #c9962e, inset 2px 2px 0 #fff3c4; }
.range:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* the pair: always SOL */
.lp-pair { display: flex; align-items: center; gap: 12px; }
.lp-pair-s { flex: none; padding: 8px 12px; font: 700 16px/1 var(--ui); color: var(--fee); background: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--fee); }
.lp-pair .hint { margin: 0; }

/* fee pipe */
.lp-pipe { display: grid; gap: 10px; padding: 14px; color: var(--paper); background: var(--night); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 var(--steel6); }
.lp-pipe h3, .lp-built-h { display: flex; align-items: center; gap: 8px; font: 700 13px/1.2 var(--ui); text-transform: uppercase; color: var(--lamp); }
.pipe { display: flex; height: 22px; gap: 2px; padding: 2px; background: var(--ink); border: 2px solid #000; box-shadow: inset 0 0 0 2px #2f3458; }
.pseg { display: block; min-width: 0; flex: 1 1 0; }
.pseg-ai { background: repeating-linear-gradient(90deg, var(--fee) 0 6px, #2aa5b4 6px 8px); }
.pseg-you { background: repeating-linear-gradient(90deg, var(--lamp) 0 6px, #c9962e 6px 8px); }
.pseg-burn { background: repeating-linear-gradient(90deg, var(--ember) 0 6px, #c8401c 6px 8px); }
.pseg-meteora { background: repeating-linear-gradient(90deg, var(--steel3) 0 6px, var(--steel5) 6px 8px); }
.pipe-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pipe-kv > div { display: grid; gap: 2px; padding: 6px 8px 6px 22px; position: relative; background: #1d2140; border: 2px solid #353b6e; }
.pipe-kv > div::before { content: ""; position: absolute; left: 7px; top: 10px; width: 8px; height: 8px; border: 2px solid #000; }
.pipe-kv .k-ai::before { background: var(--fee); }
.pipe-kv .k-you::before { background: var(--lamp); }
.pipe-kv .k-burn::before { background: var(--ember); }
.pipe-kv .k-meteora::before { background: var(--steel3); }
.pipe-kv dt { font: 400 11px/1.3 var(--ui); text-transform: uppercase; color: var(--steel3); }
.pipe-kv dd { font: 700 18px/1.2 var(--ui); color: #fff; }
.pipe-kv .k-ai dd { color: var(--fee); }
.lp-pipe .fine { color: #c9cdf0; }

.lp-est { display: grid; gap: 8px; padding: 14px; background: var(--night); color: var(--paper); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 var(--steel6); }
.lp-est .field-l { color: var(--steel3); margin: 0; }
.lp-est .in { background: var(--term); color: var(--mint); box-shadow: inset 2px 2px 0 #000; border-color: var(--steel5); }
.lp-est .fine { color: #c9cdf0; }
.lp-est .est-sub { color: #b7c8d2; }

.lp-built { display: grid; gap: 6px; padding: 12px 14px; background: #f6f1fb; border: 2px solid var(--ink); }
.lp-built li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.35; color: var(--text-dim); }
.lp-built li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; background: var(--grass5); border: 2px solid var(--ink); }
.lp-built b { font-weight: 600; color: var(--ink); }
.lp-more { display: grid; gap: 8px; }
.lp-more > summary { display: flex; align-items: center; gap: 8px; min-height: 32px; font: 700 12px/1.2 var(--ui); text-transform: uppercase; color: var(--ink); cursor: pointer; list-style: none; }
.lp-more > summary::-webkit-details-marker { display: none; }
.lp-more > summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--ink); background: var(--lamp); border: 2px solid var(--ink); font-size: 12px; }
.lp-more[open] > summary::before { content: "−"; }
.lp-more[open] { gap: 8px; }
.lp-lock { margin-top: 0; }
.lp-fee { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 10px; background: var(--paper2); box-shadow: inset 2px 2px 0 var(--paper3), inset -2px -2px 0 var(--bevel-hi); font-size: 15px; line-height: 1.3; color: #2f3354; }
.lp-fee-l { font: 400 12px/1.3 var(--ui); text-transform: uppercase; color: var(--paper4); }
.lp-fee b { font: 700 16px/1.2 var(--ui); color: var(--ink); }
.lp-go { width: 100%; }

/* launch receipt */
.lp-receipt {
  display: grid; gap: 12px; padding: 16px;
  background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(85, 91, 133, .14) 23px 25px), #f6f1fb;
  border: 2px dashed var(--paper4);
}
.lp-receipt[hidden] { display: none; }
.lp-receipt:focus-visible { outline-offset: 4px; }
.rc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rc-head h3 { font: 700 20px/1.2 var(--ui); text-transform: uppercase; color: var(--ink); }
.rc-mock { margin-left: auto; font: 400 11px/1 var(--ui); text-transform: uppercase; padding: 4px 6px; color: var(--ink); background: var(--steel3); border: 2px solid var(--ink); }
.rc-coin { display: flex; gap: 12px; align-items: center; }
.rc-name { font: 600 22px/1.2 var(--body); color: var(--ink); }
.rc-meta { font-size: 15px; line-height: 1.35; color: #2f3354; }
.rc-desc { font-size: 15px; line-height: 1.35; color: var(--text-dim); font-style: italic; }
.rc-desc:empty { display: none; }
.rc-wired { display: flex; gap: 8px; align-items: center; padding: 8px 10px; font: 700 13px/1.3 var(--ui); text-transform: uppercase; color: var(--ink); background: #dff6f8; border: 2px solid var(--grass5); }
.rc-addrs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rc-addrs > div { padding: 6px 8px; background: var(--paper2); box-shadow: inset 2px 2px 0 var(--paper3); min-width: 0; }
.rc-addrs dt { font: 400 11px/1.3 var(--ui); text-transform: uppercase; color: var(--paper4); }
.rc-addrs dd { font: 700 14px/1.3 var(--ui); color: var(--ink); overflow-wrap: anywhere; }
.rc-h { font: 700 12px/1.2 var(--ui); text-transform: uppercase; color: var(--brick); }
.rc-next { display: grid; gap: 8px; counter-reset: rc; }
.rc-next li { counter-increment: rc; position: relative; padding-left: 30px; font-size: 16px; line-height: 1.4; color: var(--text-dim); }
.rc-next li::before { content: counter(rc); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; font: 700 12px/1 var(--ui); color: var(--ink); background: var(--lamp); border: 2px solid var(--ink); }
.rc-next .btn { margin-left: 4px; vertical-align: middle; }
.rc-note:empty { display: none; }
.rc-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* plug in */
.plug { display: grid; gap: 12px; margin: 4px 0 12px; }
.plug[hidden] { display: none; }
.plug-checks { display: grid; gap: 4px; }
.plug-checks li { display: flex; gap: 8px; align-items: center; font: 700 13px/1.3 var(--ui); text-transform: uppercase; color: var(--grass6); }
.plug-steps { display: grid; gap: 10px; counter-reset: ps; }
.plug-steps li { counter-increment: ps; position: relative; display: grid; gap: 8px; justify-items: start; padding: 10px 12px 12px 44px; background: #f6f1fb; border: 2px solid var(--ink); }
.plug-steps li::before { content: counter(ps); position: absolute; left: 10px; top: 10px; display: grid; place-items: center; width: 22px; height: 22px; font: 700 12px/1 var(--ui); color: var(--ink); background: var(--lamp); border: 2px solid var(--ink); }
.plug-steps li.done { background: #dff6f8; border-color: var(--grass5); }
.plug-steps li.done::before { content: "✓"; background: var(--grass5); color: var(--ink); font-family: var(--body); }
.plug-steps p { font-size: 16px; line-height: 1.4; color: var(--text-dim); }
.plug-steps code { overflow-wrap: anywhere; }
#lp-plug .pass { margin: 14px 0; }

/* =====================================================================
   STAKE (stake.html) AND THE LIVE STATS WINDOW (home)
   ===================================================================== */

/* stake permit */
.permit {
  position: relative; display: grid; gap: 12px; padding: 14px; grid-template-columns: minmax(0, 1fr);
  background:
  repeating-linear-gradient(0deg, transparent 0 23px, rgba(85, 91, 133, .14) 23px 25px),
  #f6f1fb;
  border: 2px dashed var(--paper4);
}
.applicant-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wal-addr { font: 600 14px/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.kv > div { padding: 6px 8px; background: var(--paper2); box-shadow: inset 2px 2px 0 var(--paper3); min-width: 0; }
.kv dt { font: 400 11px/1.3 var(--ui); text-transform: uppercase; color: var(--paper4); }
.kv dd { font: 600 16px/1.3 var(--body); overflow-wrap: anywhere; }
.note { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; line-height: 1.4; color: var(--text-dim); padding: 8px 10px; background: #fff6d6; border: 2px solid var(--lamp); }
.note .ico { margin-top: 3px; }
.stamp-line:empty { display: none; }
.stamp-line { font-size: 16px; line-height: 1.4; color: var(--ink); padding: 8px 10px; background: var(--paper2); border-left: 6px solid var(--grass5); }
.stamp-line.err { border-left-color: var(--fire); }
.stamp-line b { font-weight: 700; }
.stamp {
  display: inline-block; margin-right: 6px; padding: 1px 6px; font: 700 12px/1.3 var(--ui); text-transform: uppercase;
  color: var(--grass6); border: 2px solid var(--grass6); transform: rotate(-3deg);
}
.stamp.bad { color: var(--fire); border-color: var(--fire); }

.estimator { display: grid; gap: 8px; padding: 14px; background: var(--night); color: var(--paper); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 var(--steel6); grid-template-columns: minmax(0, 1fr); }
.estimator h3 { display: flex; align-items: center; gap: 8px; font: 700 13px/1.2 var(--ui); text-transform: uppercase; color: var(--lamp); }
.estimator .field-l { color: var(--steel3); }
.estimator .in { background: var(--term); color: var(--mint); box-shadow: inset 2px 2px 0 #000; border-color: var(--steel5); }
.est-out { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: var(--term); border: 2px solid var(--steel5); }
.est-usd { font: 700 30px/1.1 var(--ui); color: var(--mint); }
.est-per { font-size: 17px; color: var(--steel1); }
.est-sub { width: 100%; font-size: 15px; color: var(--steel3); }
.estimator .fine { color: #c9cdf0; }

/* burns */
.key-once { display: inline-block; margin: 2px 0; overflow-wrap: anywhere; background: var(--ink) !important; color: var(--mint) !important; padding: 1px 6px; }
.burn-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.burn-sum > div { padding: 8px 10px; background: var(--ink); color: var(--paper); }
.burn-sum dt { font: 400 11px/1.3 var(--ui); text-transform: uppercase; color: var(--steel3); }
.burn-sum dd { font: 700 20px/1.2 var(--ui); color: #ffb27a; }
.burn-list { display: grid; gap: 6px; }
.burn {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 10px; align-items: center;
  padding: 7px 10px; background: #f7f3fc; border: 2px solid var(--paper3);
}
.burn .ico { grid-row: span 2; }
.burn-amt { font: 700 14px/1.3 var(--ui); color: var(--ink); }
.burn-meta { font-size: 15px; line-height: 1.3; color: var(--text-mid); grid-column: 2; }
.burn-ago { grid-row: 1; grid-column: 3; font: 400 12px/1.3 var(--ui); color: var(--paper4); }
.burn-tx { grid-column: 3; font-size: 14px; color: var(--steel5); }
.burn.new { animation: burnin 1.4s steps(6) 1; }
@keyframes burnin { 0% { background: #ffcf8a; border-color: var(--ember); } 100% { background: #f7f3fc; border-color: var(--paper3); } }

/* =====================================================================
   FOOTER (shared by every page)
   ===================================================================== */
.foot { background: var(--ink); color: var(--paper); border-top: 2px solid #000; box-shadow: inset 0 2px 0 #2f3458; }
.foot-in { max-width: 1200px; margin: 0 auto; padding: 48px 24px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 40px; }
.foot-brand { display: flex; align-items: flex-start; gap: 12px; }
.foot-name { font: 700 18px/1.2 var(--ui); text-transform: uppercase; }
.foot-name span { color: var(--fee); }
.foot-tag { margin-top: 6px; font-size: 16px; line-height: 1.45; color: #cfd3f3; max-width: 32ch; }
.foot-contract { display: inline-block; margin-top: 12px; padding: 4px 8px; font: 400 12px/1.4 var(--ui); text-transform: uppercase; color: var(--steel1); border: 2px solid #3a4070; }
.sitemap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sm-h { font: 700 12px/1.3 var(--ui); text-transform: uppercase; color: var(--lamp); margin-bottom: 10px; }
.sitemap ul { display: grid; gap: 2px; }
.sitemap a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 16px; color: #e6ebe4; text-decoration: none; }
.sitemap a:hover { color: var(--lamp); text-decoration: underline; text-underline-offset: 3px; }
.sitemap a[aria-disabled="true"] { color: #b9bfe3; cursor: default; }
.sitemap a[aria-disabled="true"]:hover { color: #b9bfe3; text-decoration: none; }
.sitemap small { font: 400 10px/1 var(--ui); text-transform: uppercase; padding: 2px 4px; border: 2px solid #444b7c; color: #b9bfe3; }
.foot-legal { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: 18px; border-top: 2px dashed #3a4070; font-size: 15px; line-height: 1.5; color: #cfd3f3; }

/* =====================================================================
   PRIVATE AI, HOW IT WORKS, STAKE, STATS
   ===================================================================== */
.hero-win .cta { margin-top: 14px; }

/* Private AI: one panel with the console, the agent key and the privacy promise */
.pai-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
.pai-main { min-width: 0; display: flex; flex-direction: column; }
.pai-main > #console { flex: 1; display: flex; min-width: 0; }
#console > .panel-body { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.con-out, .con-pane, .con-setup { min-width: 0; max-width: 100%; }
.pai-api { padding: 16px 18px 18px; border-top: 2px dashed var(--paper3); }
.pai-api h3 { display: flex; align-items: center; gap: 8px; font: 700 13px/1.3 var(--ui); text-transform: uppercase; color: var(--ink); }
.pai-main .con-out { flex: 1; display: flex; flex-direction: column; }
.fwin .con-out { display: flex; flex-direction: column; }
.pai-main .con-pane:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
.pai-main #con-answer .con-log { flex: 1 1 240px; height: auto; min-height: 240px; max-height: 560px; }
.con-setup { display: grid; gap: 8px; min-width: 0; }
.con-model { display: grid; gap: 4px; }
.con-model .field-l, .con-setup > .field-l, .con-compose > .field-l { margin: 0; }
.con-spec { font-size: 14px; line-height: 1.4; color: var(--text-mid); }
.pai-side { display: grid; gap: 14px; align-content: start; padding: 18px; min-width: 0; background: #f6f1fb; border-left: 2px dashed var(--paper3); }
.pai-block { min-width: 0; }
.pai-block h3, .pai-block summary { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 700 13px/1.3 var(--ui); text-transform: uppercase; color: var(--ink); }
.path { display: grid; gap: 0; }
.path li { position: relative; display: grid; gap: 2px; padding: 0 0 12px 30px; }
.path li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border: 2px solid var(--ink); background: var(--pc, var(--steel3)); }
.path li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 20px; bottom: 2px; width: 4px; background: repeating-linear-gradient(0deg, var(--fee) 0 3px, transparent 3px 5px); }
.path b { font: 700 12px/1.3 var(--ui); text-transform: uppercase; color: var(--ink); }
.path span { font-size: 15px; line-height: 1.4; color: var(--text-dim); }
.p-you { --pc: var(--steel3); } .p-gw { --pc: var(--lamp); } .p-ven { --pc: var(--fee); } .p-back { --pc: var(--mint); }
.p-none { --pc: transparent; } .p-none::before { border-style: dashed; }
.quotes blockquote p { font-size: 17px; }
.panel-body.api { padding: 0; gap: 10px; }
.api .pass { margin: 0; }
.api .route { margin-top: 2px; }
.api .code { font-size: 13px; }

/* How it works */
.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.how-src { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; font-size: 16px; line-height: 1.45; color: var(--lede); background: rgba(28, 31, 70, .35); border: 2px solid var(--ink); border-left: 6px solid var(--fee); }
.how-src .ico { margin-top: 3px; }
.how-src b { color: #fff; font-weight: 600; }
.drawer { border: 2px solid var(--ink); background: var(--night); box-shadow: inset 2px 2px 0 var(--steel6), var(--shadow); }
.drawer > summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 14px 18px; cursor: pointer; list-style: none;
  color: var(--paper);
}
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary::before { content: "+"; display: inline-grid; place-items: center; width: 24px; height: 24px; font: 700 16px/1 var(--ui); color: var(--ink); background: var(--lamp); border: 2px solid var(--ink); }
.drawer[open] > summary::before { content: "−"; }
.drawer > summary:hover .drawer-t { color: var(--lamp); }
.drawer-t { font: 700 16px/1.2 var(--ui); text-transform: uppercase; }
.drawer-s { font-size: 15px; color: var(--steel1); }
.drawer-body { display: grid; gap: var(--gap); padding: 0 18px 18px; }
.drawer-wp { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--lede); }
.drawer-wp a { color: var(--lamp); }

/* Stake */
.stake-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.stake-side { display: grid; gap: 14px; min-width: 0; }
.zone-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--ink); }
.zone-tab { min-height: 36px; padding: 6px 14px; margin-bottom: -2px; font: 700 12px/1 var(--ui); text-transform: uppercase; color: var(--paper4); background: var(--paper2); border: 2px solid var(--ink); cursor: pointer; }
.zone-tab[aria-selected="true"] { color: var(--ink); background: #fbf9ff; border-bottom-color: #fbf9ff; }
.zone { display: grid; gap: 6px; padding: 10px 12px 12px; background: #fbf9ff; border: 2px solid var(--ink); border-top: 0; margin-top: -12px; }
.zone[hidden] { display: none; }

/* the Live stats window on the home page (a bottom sheet on phones) */
.stats-holder { display: none; }
.panel-body.stats { gap: 12px; }
.sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sgrid > div { padding: 6px 8px; background: var(--paper2); box-shadow: inset 2px 2px 0 var(--paper3); min-width: 0; }
.sgrid dt { font: 400 11px/1.3 var(--ui); text-transform: uppercase; color: var(--paper4); }
.sgrid dd { font: 700 14px/1.3 var(--ui); color: var(--ink); overflow-wrap: anywhere; }
.sgrid dd span { font: 400 14px/1.3 var(--body); color: #2f3354; }
.sgrid .s-wide { grid-column: 1 / -1; }
.sgrid .s-wide .meter { display: block; margin: 4px 0 0; height: 10px; }
.sgrid .s-clock { grid-column: 1 / -1; background: var(--ink); box-shadow: none; }
.sgrid .s-clock dt { color: var(--steel3); }
.sgrid .s-clock dd { color: var(--lamp); font-size: 18px; }
.burncard { display: grid; gap: 8px; padding: 10px; background: #f7f3fc; border: 2px solid var(--paper3); }
.burncard h3 { display: flex; align-items: center; gap: 8px; font: 700 12px/1.3 var(--ui); text-transform: uppercase; }
.burn-src { font-size: 14px; line-height: 1.45; color: var(--text-dim); }
.burn-src b { font-weight: 600; color: var(--ink); }
.burncard .burn-sum dd { font-size: 16px; }

/* the Private AI Quarter is the headline landmark */
.pin.pin-hero { gap: 6px; padding: 4px 8px 4px 6px; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--fee); border-color: var(--ink); box-shadow: 3px 3px 0 rgba(0,0,0,.5); }
.pin.pin-hero::after { background: var(--ink); }
.pin.pin-hero:hover, .pin.pin-hero.hot { background: #9ef0ff; color: var(--ink); border-color: var(--ink); }

/* Why Nowhere City (home) */
.band-short { padding-top: 48px; padding-bottom: 48px; }
.band-short .wrap { gap: 10px; }
.why-h { font: 700 26px/1.15 var(--ui); text-transform: uppercase; color: var(--paper); text-shadow: 3px 3px 0 var(--ink); }

/* =====================================================================
   WIDE LAYOUTS
   ===================================================================== */
@media (min-width: 1001px) {
  .sec-head + .steps { margin-top: 4px; }
  .band .con-out { display: flex; flex-direction: column; }
  .band .con-pane:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
  .band #con-answer .con-log { flex: 1 1 260px; height: auto; min-height: 260px; max-height: 640px; }
  .band .lp-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; }
  .band .lp-side { position: sticky; top: calc(var(--topbar-h) + 12px); }
}

/* =====================================================================
   1280 and wider: the pitch window floats over the map
   below 1280: it docks as a strip above the map
   ===================================================================== */
@media (min-width: 721px) and (max-width: 1279px) {
  .hero-win {
    position: relative; left: auto; top: auto; width: auto; margin: 0;
    border-left: 0; border-right: 0; box-shadow: inset 0 2px 0 var(--bevel-hi), inset 0 -2px 0 var(--paper3);
  }
  .hero-win .win-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4px 32px; align-items: start; padding: 16px 24px 18px; }
  .hero-win .logo { grid-column: 1; grid-row: 1; }
  .hero-win .tagline { grid-column: 1; grid-row: 2; }
  .hero-win .sub { grid-column: 1; grid-row: 3; }
  .hero-win .sub + .sub { grid-column: 2; grid-row: 1 / span 2; margin: 8px 0 0; }
  .hero-win .cta { grid-column: 2; grid-row: 3; margin: 6px 0 0; }
  .hero-win .hero-links { grid-column: 2; grid-row: 4; margin: 0; }
}

@media (max-width: 1180px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hud { grid-template-columns: auto minmax(0, 1fr); }
  .hud .news { grid-column: 1 / -1; border-top: 2px solid var(--ink); min-height: 38px; }
  .status { border-right: 0; box-shadow: none; }
  .viewport { height: clamp(520px, calc(100vh - var(--topbar-h) - var(--hud-h) - 40px), 780px); }
}

/* the site nav folds into a menu */
@media (max-width: 1180px) {
  .menu-btn { display: inline-flex; }
  .top { gap: 10px; }
  .brand { margin-right: auto; }
  .site-nav {
    position: fixed; left: 0; right: 0; top: var(--topbar-h); z-index: 45; display: none;
    max-height: calc(100vh - var(--topbar-h) - 24px); max-height: calc(100dvh - var(--topbar-h) - 24px); overflow: auto;
    background: var(--night); border-bottom: 2px solid var(--ink); box-shadow: inset 0 2px 0 var(--steel6), 0 6px 0 rgba(0,0,0,.35);
  }
  .top.menu-open .site-nav { display: block; }
  .nav-list { display: grid; gap: 0; padding: 6px 16px 16px; justify-content: stretch; max-width: 560px; margin-left: auto; }
  .nav-list a { display: flex; min-height: 48px; padding: 0 4px; font-size: 13px; border-bottom: 2px dotted #3a4070; }
  .nav-list a[aria-current]::after, .nav-list a:hover::after { left: 4px; right: auto; width: 24px; bottom: 8px; }
  .nav-list .nav-wp { margin: 14px 0 0; justify-content: center; padding: 0 12px; border-bottom: 2px solid var(--ink); }
}

@media (max-width: 1000px) {
  .grid-57 { grid-template-columns: minmax(0, 1fr); }
  .sec-head.sec-art { grid-template-columns: minmax(0, 1fr); }
  .grid-57 > .panel:nth-child(3) { grid-column: auto; }
  .pai-grid, .stake-body { grid-template-columns: minmax(0, 1fr); }
  .pai-side { border-left: 0; border-top: 2px dashed var(--paper3); }
  .steps.steps-3 { grid-template-columns: minmax(0, 1fr); }
  .sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-in { grid-template-columns: minmax(0, 1fr); }

}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
  .msg-ai .cursor { animation: none; }
}

/* =====================================================================
   PAGES: page heads, the home page's cards and its Why block
   ===================================================================== */
.band-page { padding-top: 52px; border-top: 0; }
.how-src a, .drawer-wp a, .src a { color: var(--lamp); }
.how-src a:hover, .drawer-wp a:hover { color: #fff; }
.next-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  display: inline-block; padding: 3px 5px 2px; font: 700 10px/1 var(--ui); text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink); background: var(--steel3); border: 2px solid var(--ink); vertical-align: middle;
}
.btn .tag { margin-left: 4px; }
.badge {
  display: inline-flex; align-items: center; padding: 4px 6px 3px; font: 700 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .02em;
  color: var(--ink); border: 2px solid var(--ink); white-space: nowrap;
}
.badge-grad { background: var(--mint); }
.badge-mine { background: var(--lamp); }

/* home: one card per page */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.doors > li { min-width: 0; }
.door {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px 12px 14px;
  color: var(--ink); text-decoration: none; background: var(--paper); border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3), var(--shadow);
}
.door:hover { transform: translate(-2px, -2px); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3), 6px 6px 0 rgba(28, 31, 70, .6); }
.door:hover .door-go { color: var(--ink); }
.door:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; }
.door-vig { aspect-ratio: 224 / 100; margin-bottom: 6px; }
.door-k { display: flex; align-items: center; gap: 8px; font: 700 12px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .03em; color: var(--brick); }
.door-h { font: 700 18px/1.2 var(--ui); text-transform: uppercase; }
.door-p { font-size: 16px; line-height: 1.45; color: var(--text-dim); }
.door-p b { font-weight: 700; color: var(--ink); }
.door-go { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font: 700 12px/1.3 var(--ui); text-transform: uppercase; color: var(--grass6); }

/* home: why */
.why { max-width: 920px; }
.why-copy { display: grid; gap: 12px; }
.why .lede { max-width: 66ch; }
.why .punch { font-weight: 700; color: var(--lamp); }

/* stake: the coin picker and the site cam */
.coin-pick { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 2px dashed var(--paper3); }
.coin-pick .sel { font-size: 16px; }
.cam-stake { margin: 0; }
.cam-stake .vig { width: 100%; }

/* =====================================================================
   LAUNCHES (launches.html): filters, the coin cards, the detail window
   ===================================================================== */
.lx-head { align-items: flex-end; }
.lx-total { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; font-size: 17px; line-height: 1.45; color: var(--lede); }
.lx-total b { color: #fff; font-weight: 700; }
.lx-miss { padding: 10px 14px; font-size: 16px; color: var(--ink); background: #fff6d6; border: 2px solid var(--lamp); }
.lx-miss[hidden] { display: none; }

.lx-tools {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px) minmax(180px, 220px); gap: 12px 16px; align-items: end;
  padding: 14px; background: var(--deep); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 var(--steel6), var(--shadow);
}
.lx-tools .field-l { color: var(--steel3); }
.lx-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-f {
  min-height: 40px; padding: 8px 12px; font: 700 12px/1.1 var(--ui); text-transform: uppercase; letter-spacing: .02em;
  color: var(--steel1); background: var(--steel6); border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--steel5), inset -2px -2px 0 var(--steel7); cursor: pointer;
}
.lx-f:hover { background: #5a64b0; color: #fff; }
.lx-f[aria-pressed="true"] { color: var(--ink); background: var(--lamp); box-shadow: inset 2px 2px 0 #fff3c4, inset -2px -2px 0 #c9962e; }
.lx-q { position: relative; }
.lx-q .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.lx-q .in { padding-left: 34px; }
.lx-q .in::-webkit-search-cancel-button { cursor: pointer; }
.lx-count { margin-top: -6px; font-size: 14px; color: var(--steel3); }

.lx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); }
.lx-grid[hidden] { display: none; }
.coin { min-width: 0; scroll-margin-top: calc(var(--topbar-h) + 20px); }
.coin-card { position: relative; display: flex; flex-direction: column; height: 100%; }
.coin-card:hover { transform: translate(-2px, -2px); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3), 6px 6px 0 rgba(28, 31, 70, .6); }
.coin-bar { gap: 8px; }
.coin-tk { flex: 1; min-width: 0; font: 700 13px/1.2 var(--ui); letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; }
.coin-age { font: 400 12px/1 var(--ui); color: var(--steel3); white-space: nowrap; }   /* lowercase on purpose: "1d" in uppercase Quantico reads as "10" */
.coin-bar .badge { padding: 2px 5px; font-size: 10px; }
.coin-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 14px; }
.coin-id { display: flex; gap: 12px; align-items: center; }
.coin-pix { width: 64px; height: 64px; flex: none; image-rendering: pixelated; }
.coin-name { min-width: 0; }
.coin-name h3 { font: 700 18px/1.2 var(--ui); text-transform: uppercase; }
.coin-link { color: var(--ink); text-decoration: none; }
.coin-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.coin-link:focus-visible { outline: none; }
.coin-link:focus-visible::after { outline: 3px solid var(--lamp); outline-offset: 3px; }
.coin-card:hover .coin-link { color: var(--brick); }
.coin-sub { margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--text-mid); }
.coin-ai {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; padding: 8px 10px;
  background: var(--term); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #000;
}
.coin-ai-l { font: 400 11px/1.3 var(--ui); text-transform: uppercase; color: var(--steel3); }
.coin-ai-v { white-space: nowrap; }
.coin-ai-v b { font: 700 20px/1 var(--ui); color: var(--mint); }
.coin-ai-v span { margin-left: 6px; font: 400 13px/1 var(--mono); color: #c3cbf2; }
.coin-kv, .cd-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.coin-kv > div, .cd-kv > div { min-width: 0; padding: 6px 8px; background: var(--paper2); box-shadow: inset 2px 2px 0 var(--paper3); }
.coin-kv dt, .cd-kv dt { font: 400 11px/1.3 var(--ui); text-transform: uppercase; color: var(--paper4); }
.coin-kv dd, .cd-kv dd { font: 700 15px/1.3 var(--ui); color: var(--ink); overflow-wrap: anywhere; }
.cbar { height: 14px; background: var(--ink); border: 2px solid var(--ink); }
.cbar span { display: block; height: 100%; min-width: 2px; background: repeating-linear-gradient(90deg, var(--lamp) 0 6px, #c9962e 6px 8px); }
.cbar-lg { height: 20px; }
.coin-curve-l { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 13px; line-height: 1.3; color: var(--text-mid); }
.coin-curve-l b { font: 700 13px/1.3 var(--ui); color: var(--ink); white-space: nowrap; }
.coin-grad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 37px; font-size: 14px; line-height: 1.3; color: var(--text-mid); }
.coin-burn { display: flex; gap: 8px; align-items: flex-start; margin-top: auto; padding-top: 10px; border-top: 2px dashed var(--paper3); font-size: 14px; line-height: 1.35; color: #7a3020; }
.coin-burn .ico { margin-top: 1px; }
.coin-mine .coin-card { box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3), 0 0 0 3px var(--lamp), var(--shadow); }
.coin-hi .coin-card { outline: 3px dashed var(--lamp); outline-offset: 4px; }

.lx-empty-body { display: flex; align-items: center; gap: 22px; padding: 22px; }
.lx-empty-art {
  position: relative; display: grid; place-items: center; width: 120px; height: 104px; flex: none;
  background: repeating-linear-gradient(135deg, #cfa46a 0 6px, #b8894f 6px 12px); border: 2px dashed var(--earth5);
}
.lx-empty-pix { width: 64px; height: 64px; opacity: .45; filter: grayscale(1); }
.lx-empty-sign {
  position: absolute; right: -10px; bottom: 8px; padding: 3px 6px; font: 700 11px/1 var(--ui); text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-4deg);
}
.lx-empty-t { margin-bottom: 6px; font: 700 20px/1.2 var(--ui); text-transform: uppercase; overflow-wrap: anywhere; }
.lx-empty-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lx-empty-act [hidden] { display: none; }

/* the detail window: a modal dialog, a bottom sheet on phones */
.cd { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 0; color: var(--ink); overflow: hidden; }
.cd[open] { display: flex; flex-direction: column; }
.cd::backdrop { background: rgba(20, 23, 51, .72); }
.cd .win-bar { flex: none; }
.cd .win-t { margin: 0; }
.cd-body { display: grid; gap: 16px; padding: 18px; overflow: auto; overscroll-behavior: contain; --focus: #b5331c; }
.cd-head { display: flex; gap: 16px; align-items: center; }
.cd-pix { width: 80px; height: 80px; flex: none; image-rendering: pixelated; }
.cd-name { font: 700 26px/1.1 var(--ui); text-transform: uppercase; text-shadow: 2px 2px 0 var(--paper3); }
.cd-meta { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--text-mid); }
.cd-desc { margin-top: 4px; font-size: 16px; line-height: 1.4; font-style: italic; color: var(--text-dim); }
.cd-ai { padding: 12px 14px; color: var(--steel1); background: var(--term); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #000; }
.cd-ai-l { font: 400 12px/1.3 var(--ui); text-transform: uppercase; color: var(--steel3); }
.cd-ai-v b { font: 700 30px/1.15 var(--ui); color: var(--mint); }
.cd-ai-v span { font: 400 15px/1 var(--mono); color: #c3cbf2; }
.cd-ai-s { margin-top: 4px; font-size: 15px; line-height: 1.4; color: #c3cbf2; }
.cd-kv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cd-sec h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 700 12px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .03em; color: var(--brick); }
.cd-grad { font-size: 15px; line-height: 1.45; color: var(--text-dim); }
.cd-grad .badge { margin-right: 6px; vertical-align: 1px; }
.cd-curve-l { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--text-dim); }
.cd-curve-l b { font-weight: 700; color: var(--ink); }
.cd .pipe { margin-bottom: 8px; }
.cd .pipe-kv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pipe-kv-light > div { background: #f6f1fb; border-color: var(--paper3); }
.pipe-kv-light > div::before { border-color: var(--ink); }
.pipe-kv-light dt { color: var(--paper4); }
.pipe-kv-light dd { color: var(--ink); font-size: 16px; }
.pipe-kv-light .k-ai dd { color: var(--grass6); }
.cd-burns { display: grid; gap: 4px; }
.cd-burns li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 14px; background: #f7f3fc; border: 2px solid var(--paper3); }
.cd-burns b { font: 700 14px/1.3 var(--ui); }
.cd-burns li span:last-child { margin-left: auto; font: 400 12px/1.3 var(--ui); text-transform: uppercase; color: var(--paper4); }
.cd-addrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cd-addrs > div { min-width: 0; padding: 6px 8px; background: var(--paper2); box-shadow: inset 2px 2px 0 var(--paper3); }
.cd-addrs dt { font: 400 11px/1.3 var(--ui); text-transform: uppercase; color: var(--paper4); }
.cd-addrs dd { font: 600 14px/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.cd-sec h4 .tag { font-size: 9px; }
.cd-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 14px; border-top: 2px dashed var(--paper3); }
.cd-actions .btn { flex: 1 1 220px; }

@media (max-width: 1000px) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lx-filters { grid-column: 1 / -1; }
}

/* =====================================================================
   PHONE-ONLY PIECES, NEUTRAL ON WIDER SCREENS
   The tab bar, the Stats button by the ticker, the sheet's handle and the
   action bars' longer labels only show on phones. The wrappers the phone
   layout needs (the composer, the action bars, Launches' search row) step
   out of the way everywhere else, so tablets and desktops lay out exactly
   as before.
   ===================================================================== */
.tabbar, .news-stats, .cd-grab, .act-more { display: none; }
.act-bar, .con-compose, .lx-find { display: contents; }
.mbtn-txt .ico { display: none; }
.coin-ai-w { white-space: pre; }

/* Private AI: the two blocks on the right are <details> that phones fold into an accordion; wide screens keep them open */
.pai-block > summary { display: block; margin: 0; list-style: none; cursor: default; }
.pai-block > summary::-webkit-details-marker { display: none; }
.pai-block > summary h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 700 13px/1.3 var(--ui); text-transform: uppercase; color: var(--ink); }

/* a tooltip opened by a tap on the map carries a button to the building's page */
.tip.tap { pointer-events: auto; max-width: min(300px, calc(100% - 12px)); }
.tip-go {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 10px;
  font: 700 12px/1 var(--ui); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; cursor: pointer;
  color: var(--ink); background: var(--lamp); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #fff3c4, inset -2px -2px 0 #c9962e;
}
.tip-go:active { transform: translate(1px, 1px); }

/* tablets: the steps on How it works read as rows instead of full-width pictures */
@media (min-width: 721px) and (max-width: 1000px) {
  .steps.steps-3 .step { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 0 18px; align-items: start; }
  .steps.steps-3 .step .vig { grid-row: span 3; margin: 0; }
  .steps.steps-3 .step h2 { margin-top: 6px; }
}

/* =====================================================================
   POCKET CITY: PHONES (720 px AND NARROWER)
   An app shell around the same city: a slim top bar with the wallet chip,
   a fixed bottom tab bar, windows flattened into full-bleed sections with
   slim title strips, one level of framing at most, sentence-case headings,
   bottom sheets, and sticky action bars. Safe areas come from
   viewport-fit=cover in each page's viewport meta.
   ===================================================================== */
@media (max-width: 720px) {
  :root {
    --topbar-h: 56px; --tabbar-h: 64px; --actbar-h: 74px; --compose-h: 128px; --gut: 16px; --gap: 12px;
    --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
    --hair: rgba(28, 31, 54, .14);       /* hairline on paper */
    --hair-d: rgba(169, 179, 234, .2);   /* hairline on night */
    --shadow: 3px 3px 0 rgba(28, 31, 70, .5);
  }
  html { scroll-padding-top: calc(var(--topbar-h) + var(--safe-t) + 12px); }
  body { font-size: 16px; line-height: 1.5; padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); -webkit-tap-highlight-color: rgba(255, 211, 106, .25); }
  .page-stake, .page-launch { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--actbar-h)); }

  /* ---------- top bar: logo, NOWHERE, wallet chip ---------- */
  .top {
    height: calc(var(--topbar-h) + var(--safe-t)); gap: 10px;
    padding: var(--safe-t) max(12px, var(--safe-r)) 0 max(12px, var(--safe-l));
  }
  .brand { margin-right: auto; min-height: 44px; gap: 8px; }
  .brand-name { font-size: 18px; letter-spacing: .05em; }
  .brand-sub, .site-nav, .menu-btn { display: none !important; }
  .btn-wallet {
    position: relative; min-height: 36px; max-width: min(176px, 48vw); padding: 0 10px; gap: 6px;
    font-size: 11px; letter-spacing: .04em;
  }
  .btn-wallet::after { content: ""; position: absolute; inset: -6px -4px; }   /* a 48 px touch target around the 36 px chip */
  .btn-wallet > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .btn-wallet[data-connected="true"] { font: 600 12px/1 var(--mono); letter-spacing: 0; }

  /* ---------- the tab bar ---------- */
  .tabbar {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
    height: calc(var(--tabbar-h) + var(--safe-b));
    padding: 6px max(6px, var(--safe-r)) calc(6px + var(--safe-b)) max(6px, var(--safe-l));
    background:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 4px),
      var(--night);
    border-top: 2px solid var(--ink);
    box-shadow: inset 0 2px 0 var(--steel6), 0 -2px 0 rgba(0, 0, 0, .25);
  }
  .tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 0; min-height: 48px;
    font: 700 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
    color: var(--steel3); text-decoration: none; border: 2px solid transparent;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .tab .ico { width: 24px; height: 24px; }
  .tab:not([aria-current]) .ico { opacity: .72; }
  .tab:hover { color: var(--steel1); }
  .tab[aria-current="page"] {
    color: var(--lamp); background: var(--steel7); border-color: var(--ink);
    box-shadow: inset 2px 2px 0 #1d2140, inset -2px -2px 0 var(--steel6);
  }
  .tab[aria-current="page"]::before {
    content: ""; position: absolute; left: 50%; top: -8px; width: 28px; height: 4px; margin-left: -14px;
    background: var(--lamp); box-shadow: 0 2px 0 var(--ink);
  }
  .tab:active { transform: translateY(2px); }
  .tab:focus-visible { outline-offset: -4px; }

  /* ---------- page layout ---------- */
  .band { padding: 24px max(var(--gut), var(--safe-r)) 32px max(var(--gut), var(--safe-l)); }
  .band-page { padding-top: 18px; }
  .wrap { gap: 16px; }
  .sec-head { gap: 12px; margin-bottom: 0; }
  .sec-head h1, .sec-head h2 {
    text-transform: none; letter-spacing: 0; text-shadow: 2px 2px 0 var(--ink); text-wrap: balance;
  }
  .sec-head h1 { margin: 8px 0 8px; font-size: 27px; line-height: 1.12; }
  .sec-head h2 { margin: 6px 0 2px; font-size: 22px; line-height: 1.15; }
  .eyebrow { font-size: 12px; letter-spacing: .1em; }
  .lede { font-size: 16px; line-height: 1.5; }
  .src { font-size: 13px; line-height: 1.5; }
  .fine, .hint { font-size: 14px; }
  .field-l { font-size: 12px; letter-spacing: .06em; margin-bottom: 6px; }

  /* ---------- flatten: windows become full-bleed sections with a slim strip ---------- */
  .panel, .keyart, .lx-empty, .drawer {
    margin-inline: calc(-1 * var(--gut)); border-left: 0; border-right: 0; box-shadow: none;
  }
  .bar, .win-bar { min-height: 36px; padding: 0 var(--gut); gap: 8px; }
  .win-t, .bar h2, .bar h3, .win-bar h2 { font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
  .bar-note { font-size: 10px; padding: 3px 5px 2px; letter-spacing: .02em; }
  .panel-body { padding: 16px var(--gut) 20px; gap: 14px; }
  .win-x { position: relative; width: 40px; height: 30px; }
  .win-x::after { content: ""; position: absolute; inset: -8px -2px; }

  /* key art: a 180 px banner */
  .sec-head.sec-art { gap: 16px; }
  .keyart img { height: 180px; object-fit: cover; object-position: 50% 45%; }

  /* ---------- controls: 48 px inputs, 44 px buttons, iOS-safe 16 px text ---------- */
  .in { min-height: 48px; padding: 10px 12px; font-size: 16px; }
  select.in, .sel { font-size: 16px; padding-right: 36px; }
  textarea.in { font-size: 16px; }
  .btn-sm, .btn-xs { min-height: 44px; padding: 6px 14px; font-size: 12px; }
  .btn-lg { min-height: 52px; }
  .linkbtn { min-height: 44px; }
  .inrow { gap: 8px; }
  .inrow .btn { min-height: 48px; }

  /* segmented controls: tabs and preset rows */
  .zone-tabs, .lp-tabs, .presets[data-seg-for] {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
    padding: 2px; background: var(--paper2); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 var(--paper3);
  }
  .zone-tab, .lp-tab, .presets[data-seg-for] .btn {
    display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
    min-height: 44px; margin: 0; padding: 0 8px;
    font: 700 12px/1 var(--ui); text-transform: uppercase; letter-spacing: .05em;
    color: var(--paper4); background: transparent; border: 0; box-shadow: none; transform: none;
  }
  .zone-tab[aria-selected="true"], .lp-tab[aria-selected="true"], .presets[data-seg-for] .btn.is-on {
    color: var(--paper); background: var(--ink); box-shadow: inset 0 -3px 0 var(--lamp);
  }
  .presets[data-seg-for] .btn:active { transform: none; background: var(--paper3); }
  .lp-tab .ico { display: inline-block; }

  /* the action bar: the form's main button, pinned above the tab bar */
  .act-bar {
    display: block; position: fixed; z-index: 55; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--safe-b));
    padding: 10px max(var(--gut), var(--safe-r)) 10px max(var(--gut), var(--safe-l));
    background: rgba(255, 250, 242, .97); border-top: 2px solid var(--ink); box-shadow: 0 -3px 0 rgba(28, 31, 70, .16);
  }
  .act-bar .btn {
    width: 100%; min-height: 52px; padding: 0 16px; gap: 6px; font-size: 14px; letter-spacing: .04em;
    color: var(--ink); background: var(--grass5); box-shadow: inset 2px 2px 0 #8ae6f0, inset -2px -2px 0 var(--grass6), 2px 2px 0 var(--ink);
  }
  .act-bar .btn:active { box-shadow: inset 2px 2px 0 var(--grass6), inset -2px -2px 0 #8ae6f0; }
  .act-more { display: inline; }
  .act-less { display: none; }
  .act-more > span:empty { display: none; }   /* no amount typed yet: "Stake NOWHERE" */
  /* a status from that button shows as a toast just above the bar (tap it away) */
  .page-stake .stamp-line:not(:empty), .page-launch .stamp-line:not(:empty) {
    position: fixed; z-index: 56; left: 8px; right: 8px; bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--actbar-h) + 8px);
    max-height: 40vh; overflow: auto; padding: 10px 12px; font-size: 15px;
    background: var(--paper); border: 2px solid var(--ink); border-left: 6px solid var(--grass5); box-shadow: 3px 3px 0 rgba(28, 31, 70, .45);
    animation: toast-in .18s ease-out;
  }
  .page-stake .stamp-line.err, .page-launch .stamp-line.err { border-left-color: var(--fire); }

  /* =========== HOME =========== */
  .city { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .viewport { grid-area: 1 / 1; height: clamp(400px, 62svh, 560px); }
  .hero-win {
    grid-area: 1 / 1; align-self: end; justify-self: center; position: relative; z-index: 6; left: auto; top: auto;
    width: calc(100% - 24px); max-width: 460px; margin: 0 0 14px; color: var(--ink);
    background: rgba(255, 250, 242, .86); border: 2px solid var(--ink);
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .7), 3px 3px 0 rgba(28, 31, 70, .3);
  }
  .hero-win .win-body { padding: 12px 14px 14px; }
  .hero-win .sub, .hero-links { display: none; }
  .logo { margin: 0 0 4px; gap: 8px; font-size: 28px; line-height: 1.05; text-transform: none; letter-spacing: 0; text-shadow: 2px 2px 0 var(--paper3); }
  .logo .chip { font-size: 11px; padding: 4px 6px 3px; box-shadow: 2px 2px 0 var(--ink); }
  .tagline { font-size: 17px; line-height: 1.25; }
  .hero-win .cta { flex-wrap: nowrap; gap: 8px; margin: 12px 0 0; }
  .hero-win .cta .btn { flex: 1 1 0; min-height: 48px; padding: 0 10px; font-size: 13px; }

  .mapctl { top: 10px; right: 10px; bottom: auto; flex-direction: column; gap: 4px; padding: 4px; }
  .mbtn { position: relative; min-width: 40px; width: 40px; height: 40px; padding: 0; }
  .mbtn::after { content: ""; position: absolute; inset: -4px; }   /* 48 px to a finger, 40 px to the eye */
  .pin::before { content: ""; position: absolute; inset: -10px -4px; }
  .mbtn-txt .ico { display: inline-block; }
  .mbtn-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pin { font-size: 10px; padding: 2px 5px 2px 3px; }
  .pin-n { width: 13px; height: 13px; font-size: 9px; }
  .tip { max-width: min(300px, calc(100% - 12px)); font-size: 14px; }

  /* the ticker: one line under the hero, with the Stats button the HUD tools used to hold */
  .hud { display: flex; align-items: stretch; min-height: 0; border-top: 2px solid var(--ink); box-shadow: inset 0 2px 0 var(--steel6); }
  .hud .tools, .hud .status { display: none; }
  .news-stats {
    display: flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 12px;
    font: 700 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .06em; color: var(--lamp);
    background: var(--steel7); border: 0; border-right: 2px solid var(--ink); cursor: pointer;
  }
  .news-stats[aria-expanded="true"] { background: var(--ink); }
  .news-stats:active { transform: translateY(1px); }
  .hud .news { flex: 1; min-width: 0; height: 44px; min-height: 44px; border-top: 0; }
  .news-tag { display: none; }
  .news-item { font-size: 14px; }

  /* Pick a building: a carousel of compact cards */
  #doors .sec-head { margin-bottom: -4px; }
  .doors {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(76%, 300px); grid-template-columns: none; gap: 12px;
    margin: 0 calc(-1 * var(--gut)); padding: 4px var(--gut) 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
    scrollbar-width: none;
  }
  .doors::-webkit-scrollbar { display: none; }
  .doors > li { scroll-snap-align: start; }
  .door { gap: 4px; padding: 0 0 12px; box-shadow: var(--shadow); }
  .door:hover { transform: none; box-shadow: var(--shadow); }
  .door > span { padding-inline: 12px; }
  .door-vig { height: 92px; aspect-ratio: auto; object-fit: cover; margin: 0 0 6px; border: 0; border-bottom: 2px solid var(--ink); }
  .door-h { font-size: 16px; line-height: 1.2; text-transform: none; letter-spacing: 0; }
  .door-p { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .door-go { min-height: 32px; padding-top: 4px; }
  .door:focus-visible { outline-offset: -3px; outline-color: #b5331c; }

  .band-short { padding-top: 28px; padding-bottom: 32px; }
  .why-h { font-size: 22px; text-transform: none; letter-spacing: 0; text-shadow: 2px 2px 0 var(--ink); }
  .why-copy { gap: 10px; }
  .why .lede { font-size: 16px; }

  /* the Live stats window: a bottom sheet over the tab bar */
  .fwin {
    position: fixed !important; z-index: 70; left: 0 !important; right: 0; top: auto !important; bottom: 0;
    width: auto !important; max-width: none; max-height: 86vh; max-height: 86svh;
    border-left: 0; border-right: 0; border-bottom: 0; box-shadow: 0 -4px 0 rgba(0, 0, 0, .3);
    padding-bottom: var(--safe-b); animation: sheet-in .26s cubic-bezier(.2, .8, .2, 1);
  }
  .fwin .win-bar { cursor: default; }
  .fwin .win-body { padding: 14px var(--gut) 18px; }
  .wins { z-index: 70; }
  .scrim { position: fixed; inset: 0; z-index: 65; background: rgba(20, 23, 51, .66); }
  .scrim.on { display: block; animation: fade-in .2s ease-out; }
  .sgrid { gap: 0; border-top: 1px solid var(--hair); }
  .sgrid > div { padding: 10px 0; background: none; box-shadow: none; border-bottom: 1px solid var(--hair); }
  .sgrid > div:nth-child(even):not(.s-wide):not(.s-clock) { padding-left: 12px; border-left: 1px solid var(--hair); }
  .sgrid .s-clock { margin-top: 10px; padding: 10px 12px; border: 0; }
  .sgrid dd { font-size: 16px; }
  .burncard { padding: 0; background: none; border: 0; gap: 10px; }
  .burn-sum > div { padding: 10px 12px; }
  .burn { padding: 8px 0; background: none; border: 0; border-bottom: 1px solid var(--hair); }
  .stats .burn:nth-child(n+3) { display: none; }
  .ledger-foot .btn { width: 100%; }

  /* =========== PRIVATE AI: a chat =========== */
  .pai-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
  .pai-main { display: contents; }
  .pai-main > #console { display: block; order: 1; }
  .pai-side { order: 2; }
  .pai-api { order: 3; }
  #console > .panel-body.con {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px var(--gut) 0;
    grid-template-areas: "model" "out" "spec" "hold" "comp";
  }
  .con-setup, .con-model { display: contents; }
  .con-model > .field-l, .con-pl, .con-max .field-l {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* the model picker as a chip */
  #con-model {
    grid-area: model; justify-self: start; width: auto; max-width: 100%; min-height: 44px; padding: 0 34px 0 12px;
    font: 600 14px/1 var(--mono); background-color: var(--paper2); border: 2px solid var(--ink);
    box-shadow: inset 2px 2px 0 #fff, 2px 2px 0 var(--ink); text-overflow: ellipsis;
  }
  .con-spec { grid-area: spec; font-size: 13px; line-height: 1.45; }
  #con-hold { grid-area: hold; margin: 0; font-size: 13px; line-height: 1.45; }
  /* the thread */
  .pai-main .con-out, .con-out {
    grid-area: out; display: flex; flex-direction: column; max-width: none;
    margin-inline: calc(-1 * var(--gut)); border-left: 0; border-right: 0; box-shadow: none;
    /* one screen: from under the model chip down to the composer (--compose-h), so the newest message is never under it */
    height: clamp(380px, calc(100vh - var(--topbar-h) - var(--tabbar-h) - var(--compose-h) - 66px), 640px);
    height: clamp(380px, calc(100svh - var(--topbar-h) - var(--safe-t) - var(--tabbar-h) - var(--safe-b) - var(--compose-h) - 66px), 640px);
  }
  /* the wallet's sign-in strip (js/console.js, styled by js/wallet-ui.js), tightened for phones */
  .con-out .wsi { gap: 6px; padding: 10px var(--gut); border-bottom: 1px solid #2a2f5a; }
  .con-out .wsi-t { font-size: 14px; }
  .con-out .wsi-s { font-size: 13px; }
  .con-out .wsi-row .btn { min-height: 44px; }
  .con-meter { padding: 10px var(--gut); border-bottom: 1px solid #2a2f5a; }
  .cm-v { font-size: 17px; }
  .ration-bar { height: 8px; margin-top: 6px; }
  .cm-s { margin-top: 6px; font-size: 13px; }
  .con-tabs {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
    margin: 10px var(--gut) 0; padding: 2px; background: #10122a; border: 2px solid #343a6b;
  }
  .con-tab { justify-content: center; min-height: 44px; margin: 0; border: 0; background: transparent; }
  .con-tab[aria-selected="true"] { color: var(--ink); background: var(--lamp); }
  .pai-main .con-pane:not([hidden]), .con-pane { padding: 10px 0 0; gap: 10px; }
  #con-answer .pane-help { display: none; }
  #con-request { min-height: 0; padding: 12px var(--gut) 16px; overflow: auto; overscroll-behavior: contain; }
  #con-answer { min-height: 0; }
  .pai-main #con-answer .con-log, .con-log {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    flex: 1 1 0; height: auto; min-height: 120px; max-height: none;
    padding: 12px var(--gut) 16px; border: 0; border-top: 1px solid #2a2f5a; background: #0d0f24;
    overscroll-behavior: contain;
  }
  .con-log > :first-child { margin-top: auto; }
  .msg { max-width: 88%; font-size: 15px; line-height: 1.45; }
  .msg-sys { align-self: center; max-width: 100%; padding: 2px 8px; text-align: center; font-size: 13px; color: #9aa3d6; }
  .msg-you {
    align-self: flex-end; padding: 8px 12px; color: var(--ink);
    background: var(--lamp); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #fff3c4, 2px 2px 0 #000;
  }
  .msg-you::before { content: none; }
  .msg-ai { padding: 8px 12px 10px; color: #e7f3ef; background: #1d2140; border: 2px solid #343a6b; box-shadow: 2px 2px 0 #000; }
  .msg-ai::before { content: attr(data-who); display: block; margin-bottom: 4px; font: 700 11px/1.3 var(--mono); text-transform: none; color: #5fd3a8; }
  .msg-foot { margin-top: 8px; padding-top: 6px; border-top: 1px solid #343a6b; font-size: 11px; line-height: 1.45; text-transform: none; }
  .msg-out { align-self: stretch; max-width: 100%; padding: 10px 12px; font-size: 14px; background: #2a1a14; border: 2px solid #7a3020; }
  .msg-out .btn { width: 100%; }
  /* the composer, pinned above the tab bar while the console is on screen */
  .con-compose {
    grid-area: comp; display: grid; position: sticky; z-index: 20; bottom: calc(var(--tabbar-h) + var(--safe-b));
    grid-template-columns: auto minmax(0, 1fr) 48px; grid-template-areas: "max pre pre" "ta ta run"; gap: 6px 8px; align-items: end;
    margin: 0 calc(-1 * var(--gut)); padding: 6px var(--gut) 10px;
    background: var(--paper); border-top: 2px solid var(--ink); box-shadow: 0 -3px 0 rgba(28, 31, 70, .12);
  }
  #con-prompt { grid-area: ta; min-height: 48px; max-height: 156px; resize: none; padding: 11px 12px; line-height: 1.35; }
  .con-compose .presets {
    grid-area: pre; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-right: calc(-1 * var(--gut)); padding-right: var(--gut);
  }
  .con-compose .presets::-webkit-scrollbar { display: none; }
  .chip-btn {
    flex: none; min-height: 44px; padding: 0 12px; font-size: 14px; white-space: nowrap;
    border: 4px solid transparent; border-left: 0; border-right: 0; background-clip: padding-box;
    box-shadow: inset 0 0 0 2px var(--ink), inset 3px 3px 0 #fff;
  }
  .chip-btn:active { background-color: #fff3c4; }
  .con-run { display: contents; }
  .con-max { grid-area: max; position: relative; width: auto; }
  .con-max::before {
    content: "max"; position: absolute; z-index: 1; left: 9px; top: 50%; transform: translateY(-50%); pointer-events: none;
    font: 700 10px/1 var(--ui); text-transform: uppercase; letter-spacing: .06em; color: var(--paper4);
  }
  #con-max {
    width: auto; height: 44px; min-height: 0; padding: 0 28px 0 38px; font: 600 13px/1 var(--mono);
    border: 4px solid transparent; border-left: 0; border-right: 0; background-clip: padding-box; background-color: var(--paper2);
    box-shadow: inset 0 0 0 2px var(--ink);
  }
  .con-run .btn-go {
    grid-area: run; width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0;
    font-size: 0; letter-spacing: 0; color: transparent; overflow: hidden;
    background: var(--grass5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='8' y='3' width='2' height='1' fill='%2315191c'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%2315191c'/%3E%3Crect x='9' y='4' width='1' height='1' fill='%23fff7df'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%2315191c'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%2315191c'/%3E%3Crect x='9' y='5' width='2' height='1' fill='%23fff7df'/%3E%3Crect x='11' y='5' width='1' height='1' fill='%2315191c'/%3E%3Crect x='1' y='6' width='8' height='1' fill='%2315191c'/%3E%3Crect x='9' y='6' width='3' height='1' fill='%23fff7df'/%3E%3Crect x='12' y='6' width='1' height='1' fill='%2315191c'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%2315191c'/%3E%3Crect x='2' y='7' width='11' height='1' fill='%23fff7df'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%2315191c'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%2315191c'/%3E%3Crect x='2' y='8' width='11' height='1' fill='%23fff7df'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%2315191c'/%3E%3Crect x='1' y='9' width='8' height='1' fill='%2315191c'/%3E%3Crect x='9' y='9' width='3' height='1' fill='%23fff7df'/%3E%3Crect x='12' y='9' width='1' height='1' fill='%2315191c'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%2315191c'/%3E%3Crect x='9' y='10' width='2' height='1' fill='%23fff7df'/%3E%3Crect x='11' y='10' width='1' height='1' fill='%2315191c'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%2315191c'/%3E%3Crect x='9' y='11' width='1' height='1' fill='%23fff7df'/%3E%3Crect x='10' y='11' width='1' height='1' fill='%2315191c'/%3E%3Crect x='8' y='12' width='2' height='1' fill='%2315191c'/%3E%3C/svg%3E") center / 32px 32px no-repeat;
  }
  .con-run .btn-go[disabled] {
    opacity: 1; background-color: var(--paper3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='1' y='6' width='4' height='1' fill='%2315191c'/%3E%3Crect x='6' y='6' width='4' height='1' fill='%2315191c'/%3E%3Crect x='11' y='6' width='4' height='1' fill='%2315191c'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%2315191c'/%3E%3Crect x='2' y='7' width='2' height='1' fill='%23fff7df'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%2315191c'/%3E%3Crect x='6' y='7' width='1' height='1' fill='%2315191c'/%3E%3Crect x='7' y='7' width='2' height='1' fill='%23fff7df'/%3E%3Crect x='9' y='7' width='1' height='1' fill='%2315191c'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%2315191c'/%3E%3Crect x='12' y='7' width='2' height='1' fill='%23fff7df'/%3E%3Crect x='14' y='7' width='1' height='1' fill='%2315191c'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%2315191c'/%3E%3Crect x='2' y='8' width='2' height='1' fill='%23fff7df'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%2315191c'/%3E%3Crect x='6' y='8' width='1' height='1' fill='%2315191c'/%3E%3Crect x='7' y='8' width='2' height='1' fill='%23fff7df'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%2315191c'/%3E%3Crect x='11' y='8' width='1' height='1' fill='%2315191c'/%3E%3Crect x='12' y='8' width='2' height='1' fill='%23fff7df'/%3E%3Crect x='14' y='8' width='1' height='1' fill='%2315191c'/%3E%3Crect x='1' y='9' width='4' height='1' fill='%2315191c'/%3E%3Crect x='6' y='9' width='4' height='1' fill='%2315191c'/%3E%3Crect x='11' y='9' width='4' height='1' fill='%2315191c'/%3E%3C/svg%3E");
  }
  /* the info accordion */
  .pai-side { display: block; padding: 0; background: var(--paper2); border: 0; border-top: 2px solid var(--ink); }
  .pai-block { border-bottom: 1px solid var(--hair); }
  .pai-block > summary {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 var(--gut); cursor: pointer;
  }
  .pai-block > summary h3 { flex: 1; margin: 0; font-size: 15px; text-transform: none; letter-spacing: 0; }
  .pai-block > summary::after {
    content: ""; flex: none; width: 12px; height: 8px; background: var(--ink);
    clip-path: polygon(0 0, 100% 0, 100% 25%, 83% 25%, 83% 50%, 67% 50%, 67% 75%, 33% 75%, 33% 50%, 17% 50%, 17% 25%, 0 25%);
  }
  .pai-block[open] > summary::after { transform: rotate(180deg); }
  .pai-block > summary:focus-visible { outline-offset: -4px; }
  .pai-block > :not(summary) { margin: 0 var(--gut) 18px; }
  .quotes blockquote p { font-size: 17px; }
  /* hand it to your agent */
  .pai-api { padding: 22px var(--gut) 24px; border-top: 2px solid var(--ink); }
  .pai-api h3 { font-size: 15px; text-transform: none; letter-spacing: 0; }
  .api .code { font-size: 12.5px; }

  /* =========== STAKE =========== */
  .stake-body { gap: 0; padding-bottom: 0; }
  .permit { gap: 16px; padding: 0 0 20px; background: none; border: 0; }
  .coin-pick { gap: 0; padding-bottom: 16px; border-bottom: 1px solid var(--hair); }
  .coin-pick .hint { margin-top: 8px; }
  .applicant-row { gap: 12px; }
  .applicant-row .btn { min-height: 44px; }
  .wal-addr { font-size: 15px; }
  .kv { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 12px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
  .kv > div { padding: 10px 8px 10px 0; background: none; box-shadow: none; }
  .kv > div + div { padding-left: 10px; border-left: 1px solid var(--hair); }
  .kv dt { font-size: 11px; letter-spacing: .04em; }
  .kv dd { font: 700 15px/1.3 var(--ui); }
  .applicant:has([data-action="connect"][data-connected="false"]) .kv { display: none; }
  .zone { gap: 0; margin: -6px 0 0; padding: 0; background: none; border: 0; }
  .zone .inrow { flex-wrap: nowrap; }
  .zone .inrow .in { flex: 1 1 auto; }
  .note { gap: 10px; padding: 0; font-size: 14px; color: var(--text-mid); background: none; border: 0; }
  .note .ico { margin-top: 2px; }
  .stake-side { gap: 0; margin: 0 calc(-1 * var(--gut)); background: var(--night); --focus: var(--lamp); }
  .estimator { gap: 10px; padding: 20px var(--gut) 22px; border: 0; box-shadow: none; }
  .estimator h3 { font-size: 13px; letter-spacing: .04em; }
  .estimator .presets[data-seg-for], .lp-est .presets[data-seg-for] { background: var(--term); border-color: var(--steel5); box-shadow: none; }
  .estimator .presets[data-seg-for] .btn, .lp-est .presets[data-seg-for] .btn { color: var(--steel3); }
  .estimator .presets[data-seg-for] .btn.is-on, .lp-est .presets[data-seg-for] .btn.is-on { color: var(--ink); background: var(--lamp); box-shadow: none; }
  /* the estimate: one big-number card */
  .est-out { display: grid; gap: 2px; padding: 16px 16px 14px; background: var(--term); border: 2px solid var(--steel5); box-shadow: 3px 3px 0 #000; }
  .est-usd { font-size: 40px; line-height: 1; }
  .est-per { font-size: 16px; }
  .est-sub { margin-top: 6px; font-size: 14px; line-height: 1.45; }
  .cam-stake { gap: 0; }
  .cam-stake .vig { height: 120px; aspect-ratio: auto; object-fit: cover; border: 0; border-top: 2px solid var(--ink); }
  .cam-stake figcaption { padding: 8px var(--gut) 12px; color: var(--steel3); }
  .how-src { padding: 4px 0 4px 12px; font-size: 15px; background: none; border: 0; border-left: 4px solid var(--fee); }
  .drawer-wp { font-size: 15px; }

  /* =========== LAUNCHPAD =========== */
  .panel-body.lp { padding-top: 14px; padding-bottom: 0; }
  .lp-tabs { padding: 2px; }
  .lp-pane { padding-top: 16px; }
  .lp-grid { gap: 0; }
  .lp-main { gap: 0; }
  .lp-wallet { padding: 0 0 16px; background: none; border: 0; }
  .lp-fs { gap: 12px; padding: 16px 0 20px; background: none; border: 0; border-top: 1px solid var(--hair); }
  .lp-fs legend {
    float: left; width: 100%; margin: 0; padding: 0;
    font: 700 12px/1.3 var(--ui); letter-spacing: .08em; color: var(--brick); background: none;
  }
  .lp-row2, .lp-row3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .in-pre > span { min-width: 40px; }
  .lp-pix { width: 64px; height: 64px; }
  .in-file { font-size: 14px; }
  .in-file::file-selector-button { min-height: 44px; padding: 0 12px; }
  .lp-socials summary { min-height: 44px; }
  .range { height: 44px; }
  .range::-webkit-slider-thumb { width: 22px; height: 34px; margin-top: -13px; }
  .range::-moz-range-thumb { width: 18px; height: 30px; }
  .lp-val { font-size: 20px; }
  /* the side: one full-bleed night section */
  .lp-side { gap: 0; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 24px; background: var(--night); color: var(--paper); --focus: var(--lamp); }
  .lp-pipe, .lp-est { gap: 12px; padding: 20px 0; background: none; border: 0; box-shadow: none; }
  .lp-est { border-top: 1px solid var(--hair-d); }
  .pipe { height: 22px; }
  /* the fee pipe's legend: two columns, no boxes */
  .pipe-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .pipe-kv > div { padding: 0 0 0 20px; background: none; border: 0; }
  .pipe-kv > div::before { left: 0; top: 3px; }
  .pipe-kv dt { font-size: 11px; letter-spacing: .03em; }
  .pipe-kv dd { font-size: 17px; }
  .lp-more { gap: 0; padding: 6px 0; border-top: 1px solid var(--hair-d); }
  .lp-more[open] { gap: 10px; padding-bottom: 18px; }
  .lp-more > summary { min-height: 44px; color: var(--paper); }
  .lp-built { padding: 0; background: none; border: 0; gap: 10px; }
  .lp-built li { font-size: 15px; color: #d9ddf6; }
  .lp-built li::before { border-color: #000; }
  .lp-built b { color: #fff; }
  .lp-side .fine { color: #c9cdf0; }
  .lp-fee { padding: 16px 0 0; background: none; box-shadow: none; color: var(--steel1); border-top: 1px solid var(--hair-d); }
  .lp-fee-l { color: var(--steel3); }
  .lp-fee b { color: #fff; }
  /* the receipt: flat, its addresses as rows */
  .lp-receipt { gap: 14px; padding: 4px 0 24px; background: none; border: 0; }
  .rc-head h3 { font-size: 20px; text-transform: none; letter-spacing: 0; }
  .rc-addrs { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--hair); }
  .rc-addrs > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; background: none; box-shadow: none; border-bottom: 1px solid var(--hair); }
  .rc-actions .btn { flex: 1 1 100%; }
  .plug-steps li { padding: 12px 12px 14px 44px; }
  #plug:not([hidden]) { display: grid; gap: 12px; padding-bottom: 24px; }
  #plug .pass, #plug .plug { margin: 0; }

  /* =========== LAUNCHES =========== */
  .lx-head .btn-lg { min-height: 44px; padding: 0 14px; font-size: 12px; justify-self: start; }
  .lx-total { margin-top: 8px; font-size: 15px; }
  .lx-tools { display: contents; }
  /* filter chips, sticky under the top bar */
  .lx-filters {
    position: sticky; z-index: 30; top: calc(var(--topbar-h) + var(--safe-t));
    display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: -4px calc(-1 * var(--gut)) 0; padding: 6px var(--gut);
    background: var(--night); border-bottom: 2px solid var(--ink); box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  }
  .lx-filters::-webkit-scrollbar { display: none; }
  .lx-f {
    flex: none; min-height: 44px; padding: 0 14px; font-size: 12px; letter-spacing: .04em; white-space: nowrap;
    border: 4px solid transparent; border-left: 0; border-right: 0; background-clip: padding-box;
    box-shadow: inset 0 0 0 2px var(--ink), inset 4px 4px 0 var(--steel5), inset -4px -4px 0 var(--steel7);
  }
  .lx-f[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink), inset 4px 4px 0 #fff3c4, inset -4px -4px 0 #c9962e; }
  .lx-f:hover, .lx-f[aria-pressed="true"], .chip-btn:hover, .chip-btn:active { background-clip: padding-box; }
  /* search and sort in one row */
  .lx-find { display: flex; gap: 8px; }
  .lx-search { flex: 1 1 auto; min-width: 0; }
  .lx-sort { flex: 0 1 46%; min-width: 0; }
  .lx-find .field-l { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lx-count { margin-top: -6px; font-size: 13px; }
  /* the coins as compact rows */
  .lx-grid { display: block; margin: 0 calc(-1 * var(--gut)); background: var(--paper); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
  .coin { border-bottom: 1px solid var(--hair); scroll-margin-top: calc(var(--topbar-h) + var(--safe-t) + 70px); }
  .coin:last-child { border-bottom: 0; }
  .coin-card {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "pix name ai" "pix tk curve";
    gap: 2px 12px; align-items: center; min-height: 76px; height: auto; padding: 12px var(--gut);
    background: none; border: 0; box-shadow: none;
  }
  .coin-card:hover { transform: none; box-shadow: none; }
  .coin-card:active { background: var(--paper2); }
  .coin-body, .coin-id, .coin-name { display: contents; }
  .coin-pix { grid-area: pix; width: 52px; height: 52px; }
  .coin-name h3 { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; text-transform: none; letter-spacing: 0; align-self: end; }
  .coin-bar { grid-area: tk; align-self: start; min-height: 0; padding: 0; gap: 8px; color: var(--paper4); background: none; border: 0; }
  .coin-tk { flex: 0 1 auto; font: 600 13px/1.3 var(--mono); letter-spacing: 0; }
  .coin-age { font-size: 12px; color: var(--paper4); }
  .coin-bar .badge { padding: 2px 4px 1px; font-size: 9px; }
  .coin-sub, .coin-kv, .coin-burn, .coin-curve-l, .coin-grad > span:not(.badge), .coin-ai-v span, .coin-ai-w { display: none; }
  .coin-ai { grid-area: ai; display: grid; justify-items: end; gap: 1px; padding: 0; background: none; border: 0; box-shadow: none; align-self: end; }
  .coin-ai-l { font-size: 10px; letter-spacing: .05em; color: var(--paper4); }
  .coin-ai-v b { font: 700 16px/1.1 var(--ui); color: var(--grass6); }
  .coin-curve { grid-area: curve; width: 72px; align-self: start; margin-top: 4px; }
  .coin-curve .cbar { height: 10px; border-width: 2px; }
  .coin-grad { grid-area: curve; justify-self: end; align-self: start; min-height: 0; }
  .coin-grad .badge { padding: 2px 5px 1px; font-size: 10px; }
  .coin-mine .coin-card { background: #fff6d6; box-shadow: inset 4px 0 0 var(--lamp); }
  .coin-hi .coin-card { outline: 0; background: #fff6d6; box-shadow: inset 4px 0 0 var(--ember); }
  .coin-link:focus-visible::after { outline: 3px solid #b5331c; outline-offset: -3px; }
  .coin-card:hover .coin-link { color: var(--ink); }
  .lx-empty-body { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px var(--gut) 20px; }
  .lx-empty-t { font-size: 18px; text-transform: none; }

  /* the coin detail: a bottom sheet */
  html:has(.cd[open]) { overflow: hidden; }
  .cd {
    width: 100%; max-width: none; max-height: 88vh; max-height: 88svh; margin: auto 0 0;
    border: 0; border-top: 2px solid var(--ink); box-shadow: 0 -4px 0 rgba(0, 0, 0, .35);
  }
  .cd[open] { animation: sheet-in .28s cubic-bezier(.2, .8, .2, 1); }
  .cd[open]::backdrop { animation: fade-in .28s ease-out; }
  .cd.closing { animation: sheet-out .22s cubic-bezier(.4, 0, 1, 1) forwards; }
  .cd.closing::backdrop { animation: fade-out .22s ease-in forwards; }
  .cd.dragging { animation: none; }
  .cd-grab {
    display: grid; place-items: center; flex: none; height: 20px; cursor: grab; touch-action: none;
    background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, .07) 2px 4px), var(--steel7);
  }
  .cd-grab span { width: 44px; height: 4px; background: var(--steel3); box-shadow: 0 2px 0 var(--ink); }
  .cd .win-bar { touch-action: none; }
  .cd-body { gap: 18px; padding: 16px var(--gut) 0; }
  .cd-head { gap: 14px; align-items: flex-start; }
  .cd-pix { width: 56px; height: 56px; }
  .cd-name { font-size: 22px; line-height: 1.15; text-transform: none; letter-spacing: 0; text-shadow: none; }
  .cd-meta { font-size: 14px; }
  .cd-desc { font-size: 15px; }
  .cd-ai-v b { font-size: 34px; }
  .cd-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hair); }
  .cd-kv > div { padding: 10px 0; background: none; box-shadow: none; border-bottom: 1px solid var(--hair); }
  .cd-kv > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--hair); }
  .cd-kv dd { font-size: 17px; }
  .cd .pipe-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe-kv-light > div { background: none; }
  .pipe-kv-light dd { font-size: 16px; }
  .cd-burns { gap: 0; border-top: 1px solid var(--hair); }
  .cd-burns li { padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--hair); }
  .cd-addrs { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--hair); }
  .cd-addrs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; background: none; box-shadow: none; border-bottom: 1px solid var(--hair); }
  .cd-addrs dd { text-align: right; }
  .cd-actions {
    position: sticky; bottom: 0; z-index: 2; gap: 8px; flex-wrap: nowrap;
    margin: 0 calc(-1 * var(--gut)); padding: 12px var(--gut) calc(12px + var(--safe-b));
    background: var(--paper); border-top: 2px solid var(--ink);
  }
  .cd-actions .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 10px; white-space: normal; line-height: 1.15; }

  /* =========== HOW IT WORKS =========== */
  .steps, .steps.steps-3 {
    grid-template-columns: minmax(0, 1fr); gap: 0;
    margin: 0 calc(-1 * var(--gut)); background: var(--paper); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  }
  .step { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 14px; align-items: start; padding: 16px var(--gut); background: none; border: 0; box-shadow: none; }
  .step + .step { border-top: 1px solid var(--hair); }
  .step .vig { grid-row: span 3; width: 96px; margin: 0; }
  .step h2 { margin: 2px 0 4px; font-size: 17px; line-height: 1.2; text-transform: none; letter-spacing: 0; }
  .step p:last-child { font-size: 15px; }
  .drawer > summary { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; align-items: center; min-height: 56px; padding: 14px var(--gut); }
  .drawer-s { grid-column: 2; }
  .drawer-t { font-size: 17px; text-transform: none; letter-spacing: 0; }
  .drawer-s { font-size: 14px; }
  .drawer-body { gap: 0; padding: 0 0 18px; }
  .grid-57 { gap: 0; }
  .drawer .panel { margin-inline: 0; border-bottom: 0; }
  .drawer-wp { padding: 16px var(--gut) 0; }
  .lead-strong { font-size: 18px; }
  .split-kv { gap: 10px; }
  .split-kv > div { padding: 0 0 0 22px; background: none; border: 0; }
  .split-kv > div::before { left: 0; top: 4px; }
  .formula pre, .code { font-size: 13px; }
  .life { gap: 0; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--hair); }
  .life li { grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--hair); }
  .life li canvas { grid-row: span 3; width: 72px; height: 60px; margin: 0; }
  .life li:not(:last-child)::after { display: none; }
  .life-earn { padding-inline: 8px !important; }
  .leave { padding: 2px 0 2px 12px; background: none; border: 0; border-left: 4px solid var(--lamp); }
  .pb-col > .cam { margin: 4px calc(-1 * var(--gut)) -20px; gap: 0; }
  .pb-col > .cam .vig { width: 100%; height: 120px; aspect-ratio: auto; object-fit: cover; border: 0; border-top: 2px solid var(--ink); }
  .pb-col > .cam figcaption { order: -1; padding: 0 var(--gut) 8px; }
  .settle-now { padding: 12px; }
  .next-row { display: grid; gap: 10px; }
  .next-row .btn { width: 100%; }

  /* ---------- footer ---------- */
  .foot-in { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px max(var(--gut), var(--safe-r)) 28px max(var(--gut), var(--safe-l)); }
  .sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
  .sitemap a { display: flex; min-height: 44px; font-size: 15px; }
  .sm-h { margin-bottom: 2px; }
  .foot-tag { font-size: 15px; }
  .foot-legal { font-size: 13px; line-height: 1.5; }
}

@media (max-width: 380px) {
  :root { --gut: 14px; }
  .brand-name { font-size: 16px; }
  .btn-wallet { padding: 0 8px; font-size: 10px; letter-spacing: .02em; }
  .tab { font-size: 10px; letter-spacing: .03em; }
  .logo { font-size: 26px; }
  .hero-win .cta .btn { font-size: 12px; }
  .sec-head h1 { font-size: 26px; }
}

/* the only motion on phones: sheets sliding, tabs and buttons pressing */
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tab:active, .news-stats:active, .tip-go:active { transform: none; }
}

/* ============ the live site (js/chain.js) ============
   html.is-live: rpcUrl and programId are set and every figure is the program's; html.is-mock: the
   preview. [data-mock] shows only on the preview, [data-live] only live. */
html.is-live [data-mock], html.is-mock [data-live] { display: none !important; }
.btn[hidden], .wd[hidden], .lp-closed[hidden] { display: none; }
.wd { display: grid; gap: 8px; justify-items: start; font-size: 16px; line-height: 1.4; color: var(--ink); padding: 10px 12px; background: #fff6d6; border: 2px solid var(--lamp); }
.wd[hidden] { display: none; }
.wd p { margin: 0; }
.lp-closed { padding: 10px 14px; font-size: 16px; line-height: 1.4; color: var(--ink); background: #fff6d6; border: 2px solid var(--lamp); }
.lp-closed[hidden] { display: none; }
.rc-addrs a, .cd-addrs a, .stamp-line a, .wd a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cr-mint { width: auto; flex: 0 0 auto; min-width: 92px; }
.pai-credits .inrow { flex-wrap: wrap; }
.pai-credits .inrow .in:not(.sel) { flex: 1 1 100px; min-width: 0; }
.msg-ai.msg-example::before { color: var(--lamp); }
.msg-example .msg-foot { color: #c7a54a; }
.foot-contract a { color: inherit; text-transform: none; letter-spacing: 0; }
@media (max-width: 720px) {
  .wd { padding: 10px 0 0; background: none; border: 0; border-top: 1px solid var(--paper3); }
  .wd .btn { width: 100%; min-height: 44px; }
  .lp-closed { font-size: 14px; }
  .pai-credits .inrow .btn { flex: 1 1 100%; min-height: 44px; }
}