/* ============================================================================
   ZECHASH DESIGN SYSTEM  ·  v1
   ----------------------------------------------------------------------------
   Built from blur.io's own theme object (styled-components theme lifted from
   their app bundle), not from eyeballing screenshots. Every metric below, the grey ramp, the 36px control height, the 4px radius, the 1px tab
   indicator, the "everything glows" text-shadow, the three themes, is Blur's.
   One thing is ours: the accent. Blur burns orange (#FF8700); we take Zcash
   gold (#F4B728), which already sits inside Blur's own yellow range, so the
   system stays coherent while the site stops looking like a Blur clone.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. tokens */

:root,
[data-theme="dark"] {
  --c-white:  #FFFFFF;
  --c-black:  #000000;
  --c-g100:   #D9D9D9;   /* primary text            */
  --c-g200:   #C1C1C1;   /* secondary text          */
  --c-g300:   #929292;   /* labels, column headers  */
  --c-g400:   #696969;   /* placeholder             */
  --c-g500:   #505050;   /* disabled                */
  --c-g600:   #303030;   /* borders                 */
  --c-g700:   #1E1E1E;   /* panels, row hover       */
  --c-g800:   #171717;   /* sunken                  */
  --c-g900:   #080404;   /* page                    */

  --c-acc:    #F4B728;   /* Zcash gold  (Blur slot: orange200) */
  --c-acc-2:  #E8981C;   /* deeper      (Blur slot: orange300) */
  --c-up:     #26BF74;   /* teal400, positive, confirmed     */
  --c-down:   #F95200;   /* orange400, negative, warning      */
  --c-mag:    #ADE25D;   /* green300 · "magical"               */
  --c-ice:    #00F0FF;   /* blue200                            */
  --c-violet: #9E00FF;   /* purple300                          */

  --glow-text:  0 0 16px currentColor;
  --glow-line:  0 0 8px .5px currentColor;
  --glow-chart: 0 0 5px 2px currentColor;

  --hdr-bg: rgba(8, 4, 4, .72);
  color-scheme: dark;
}

[data-theme="medium"] {
  --c-g700: #2B2B2B;
  --c-g800: #262626;
  --c-g900: #1E1E1E;
  --glow-text:  0 0 8px currentColor;
  --glow-line:  0 0 8px .5px currentColor;
  --glow-chart: 0 0 2px 1px currentColor;
  --hdr-bg: rgba(30, 30, 30, .78);
  color-scheme: dark;
}

[data-theme="light"] {
  --c-white:  #000000;
  --c-black:  #FFFFFF;
  --c-g100:   #3B3B3B;
  --c-g200:   #5A5A5A;
  --c-g300:   #6D6D6D;
  --c-g400:   #969696;
  --c-g500:   #A6A6A6;
  --c-g600:   #E7E7E7;
  --c-g700:   #E1E1E1;
  --c-g800:   #F1F1F1;
  --c-g900:   #FBF7F7;
  --c-acc:    #B8860B;
  --c-acc-2:  #8C6508;
  --c-mag:    #6DA21D;
  --glow-text:  0 0 0 currentColor;
  --glow-line:  0 0 0 0 currentColor;
  --glow-chart: 0 0 0 0 currentColor;
  --hdr-bg: rgba(251, 247, 247, .82);
  color-scheme: light;
}

:root {
  /* type · Blur's scale, to the pixel */
  --fs-sub:   12px;  --lh-sub:   14px;
  --fs-body:  12px;  --lh-body:  14px;
  --fs-label: 14px;  --lh-label: 16px;
  --fs-head:  20px;  --lh-head:  24px;
  --fs-sub2:  32px;  --lh-sub2:  48px;

  --font: "Azeret Mono", ui-monospace, Consolas, "Courier New", monospace;
  /* the art font is deliberately NOT the webfont: the 86 glyphs were audited
     against these three and only these three. */
  --font-art: Consolas, "Courier New", "Lucida Console", monospace;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 64px; --s8: 96px;

  --r1: 2px;  --r2: 4px;  --r3: 8px;  --r4: 16px;

  --h-xs: 20px; --h-sm: 28px; --h-md: 36px; --h-lg: 40px; --h-xl: 48px;
  --hdr-h: 62px;
  --rail-w: 264px;
  --cart-w: 344px;

  --z-rail: 5; --z-bar: 40; --z-hdr: 100; --z-pop: 9000; --z-modal: 9998;
}

@media (min-width: 1921px) {
  :root { --fs-body: 14px; --lh-body: 16px; --fs-label: 16px; --lh-label: 18px; }
}

/* ----------------------------------------------------------------- 2. reset */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--c-g900);
  color: var(--c-g100);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* an app page is a fixed viewport that never scrolls; only panels scroll */
body.app { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
/* a column flex container does not shrink its children on the cross axis, so
   every band has to be told it may. Without this a wide header or stat strip
   pushes the whole app sideways on a phone. */
body.app > * { min-width: 0; max-width: 100vw; }
/* a reading page scrolls normally. NOTE: the modifier is .page, never .doc · .doc is the reading COLUMN below, and putting it on <body> would clamp the
   whole document to 880px. */
body.page { min-height: 100vh; }

h1, h2, h3, h4, h5, h6 { font-weight: 400; font-size: inherit; line-height: inherit; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { border: none; background: none; cursor: pointer; }
button:focus, input:focus, select:focus, textarea:focus { outline: none; }
:focus-visible { outline: 1px solid var(--c-acc); outline-offset: 1px; }
table { border-collapse: collapse; }
hr { border: none; height: 1px; background: var(--c-g600); }

/* ------------------------------------------------------------ 3. type utils */

.t-sub   { font-size: var(--fs-sub);   line-height: var(--lh-sub); }
.t-body  { font-size: var(--fs-body);  line-height: var(--lh-body); }
.t-label { font-size: var(--fs-label); line-height: var(--lh-label); }
.t-head  { font-size: var(--fs-head);  line-height: var(--lh-head); }
.t-big   { font-size: var(--fs-sub2);  line-height: var(--lh-sub2); }

.up  { text-transform: uppercase; }
.b6  { font-weight: 600; }
.b7  { font-weight: 700; }
.l3  { font-weight: 300; }
.num { font-variant-numeric: tabular-nums; }

.c-acc  { color: var(--c-acc); }
.c-up   { color: var(--c-up); }
.c-down { color: var(--c-down); }
.c-w    { color: var(--c-white); }
.c-100  { color: var(--c-g100); }
.c-300  { color: var(--c-g300); }
.c-400  { color: var(--c-g400); }

/* the signature: text carries its own light */
.glow { text-shadow: var(--glow-text); }

.trunc { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* --------------------------------------------------------------- 4. layout  */

.row  { display: flex; align-items: center; }
.col  { display: flex; flex-direction: column; }
.grow { flex: 1 1 auto; min-width: 0; }
.g1 { gap: 4px; } .g2 { gap: 8px; } .g3 { gap: 12px; } .g4 { gap: 16px; } .g5 { gap: 24px; }
.wrap { flex-wrap: wrap; }

.app-body { flex: 1 1 auto; display: flex; min-height: 0; }
.main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; position: relative; }
.scroll { overflow-y: auto; overscroll-behavior: contain; }

.shell { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--s4); }

/* ---------------------------------------------------------------- 5. header */

.hdr {
  position: sticky; top: 0; z-index: var(--z-hdr);
  height: var(--hdr-h); flex: 0 0 var(--hdr-h);
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s3);
  background: var(--hdr-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-g700);
  font-size: var(--fs-sub);
}

.brand {
  display: flex; align-items: center; gap: 8px;
  color: var(--c-acc); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-shadow: var(--glow-text);
  padding-right: var(--s2);
}
.brand .mark {
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid var(--c-acc); border-radius: var(--r2);
  font-size: 13px; line-height: 1;
}
.brand:hover { color: var(--c-white); }
.brand:hover .mark { border-color: var(--c-white); }

.nav { display: flex; align-items: center; }
.nav a {
  display: inline-flex; align-items: center; height: var(--hdr-h);
  margin-left: var(--s4); color: var(--c-g300);
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  position: relative; white-space: nowrap;
  transition: color .15s ease-in-out;
}
.nav a:first-child { margin-left: 0; }
.nav a:hover { color: var(--c-white); }
.nav a.on { color: var(--c-acc); text-shadow: var(--glow-text); }
.nav a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; box-shadow: var(--glow-line);
}

.hdr-right { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }

.bal {
  display: flex; align-items: center; gap: 6px; height: var(--h-md);
  padding: 0 var(--s3); border: 1px solid var(--c-g600); border-radius: var(--r2);
  color: var(--c-g200); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bal .k { color: var(--c-g400); text-transform: uppercase; }
.bal.key { border-color: var(--c-acc); color: var(--c-acc); text-shadow: var(--glow-text); }

/* ---------------------------------------------------------------- 6. search */

.search {
  display: flex; align-items: center; gap: var(--s2);
  width: 350px; max-width: 34vw; height: var(--h-md);
  padding: 0 var(--s2);
  border: 1px solid var(--c-g600); border-radius: var(--r2);
  color: var(--c-g300);
}
.search:focus-within { border-color: var(--c-g400); }
.search input {
  flex: 1; min-width: 0; background: none; border: none;
  color: var(--c-g100); font-size: var(--fs-sub);
}
.search input::placeholder { color: var(--c-g400); }
.search kbd {
  font: inherit; font-size: 10px; color: var(--c-g400);
  border: 1px solid var(--c-g600); border-radius: var(--r1);
  padding: 1px 5px;
}

/* --------------------------------------------------------------- 7. buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-md); padding: 0 var(--s4);
  border: 1px solid transparent; border-radius: var(--r2);
  font-size: var(--fs-sub); font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  cursor: pointer; transition: all .15s ease-in-out;
}
.btn:hover { color: var(--c-white); border-color: var(--c-white); }

.btn-pri { background: var(--c-acc); border-color: var(--c-acc); color: var(--c-black); text-shadow: none; }
.btn-pri:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-black); }

.btn-sec { background: transparent; border-color: var(--c-acc); color: var(--c-acc); text-shadow: var(--glow-text); }
.btn-sec:hover { background: transparent; text-shadow: var(--glow-text); }

.btn-ter { background: transparent; border-color: var(--c-g600); color: var(--c-g100); }

.btn-txt { background: transparent; border-color: transparent; color: var(--c-g300); padding: 0 var(--s2); }

.btn-warn { background: transparent; border-color: var(--c-down); color: var(--c-down); text-shadow: var(--glow-text); }

.btn-mag { background: var(--c-mag); border-color: var(--c-mag); color: var(--c-black); }
.btn-mag:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-black); }

.btn-lg { height: var(--h-lg); padding: 0 var(--s5); }
.btn-sm { height: var(--h-sm); padding: 0 var(--s3); }
.btn-xs { height: var(--h-xs); padding: 0 var(--s2); font-size: 10px; }
.btn-block { width: 100%; }

.btn:disabled, .btn.off { opacity: .5; pointer-events: none; cursor: not-allowed; }

/* ------------------------------------------------------- 8. inputs, selects */

.inp {
  display: flex; align-items: center; gap: var(--s2);
  height: var(--h-md); padding: 0 var(--s2);
  border: 1px solid var(--c-g600); border-radius: var(--r2);
  background: transparent; color: var(--c-g100);
  transition: border-color .15s ease-in-out;
}
.inp:hover { border-color: var(--c-g500); }
.inp:focus-within { border-color: var(--c-acc); }
.inp input, .inp > input { flex: 1; min-width: 0; border: none; background: none; }
.inp input::placeholder { color: var(--c-g400); }
.inp .pre, .inp .post { color: var(--c-g400); white-space: nowrap; }
input.inp { font-variant-numeric: tabular-nums; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { color: var(--c-g300); text-transform: uppercase; font-weight: 600; }

.sel {
  position: relative; display: flex; align-items: center; gap: var(--s2);
  height: var(--h-md); padding: 0 var(--s2);
  border: 1px solid var(--c-g600); border-radius: var(--r2);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.sel:hover { border-color: var(--c-g500); }
.sel .cv { color: var(--c-g100); }
.sel .ca { color: var(--c-g400); font-size: 9px; margin-left: auto; }
.sel.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: var(--c-g500); }
.sel-menu {
  position: absolute; top: 100%; left: -1px; right: -1px; z-index: var(--z-pop);
  background: var(--c-g800); border: 1px solid var(--c-g500); border-top: none;
  border-radius: 0 0 var(--r2) var(--r2); overflow: hidden;
}
.sel-menu .option { display: flex; align-items: center; height: var(--h-md); padding: 0 var(--s2); }
.sel-menu .option + .option { border-top: 1px solid var(--c-g700); }
.sel-menu .option:hover { background: var(--c-g700); color: var(--c-white); }
.sel-menu .option.on { color: var(--c-acc); }

.chk { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; }
.chk input[type="checkbox"] {
  appearance: none; width: 15px; height: 15px; flex: 0 0 15px;
  border: 1px solid var(--c-g500); border-radius: 2.5px; cursor: pointer;
  display: grid; place-items: center;
}
.chk input[type="checkbox"]:checked { border-color: var(--c-acc); background: var(--c-acc); }
.chk input[type="checkbox"]:checked::after {
  content: ""; width: 7px; height: 4px; margin-top: -2px;
  border-left: 2px solid var(--c-black); border-bottom: 2px solid var(--c-black);
  transform: rotate(-45deg);
}
.chk:hover { color: var(--c-white); }

.rad { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; }
.rad input[type="radio"] {
  appearance: none; width: 10px; height: 10px; flex: 0 0 10px;
  border: 1px solid var(--c-g500); border-radius: 50%; cursor: pointer;
}
.rad input[type="radio"]:checked { border-color: var(--c-acc); background: var(--c-acc); box-shadow: var(--glow-line); }

/* range, the sweep slider */
.rng { appearance: none; width: 100%; height: 20px; background: none; cursor: pointer; }
.rng::-webkit-slider-runnable-track {
  height: 2px; border-radius: 1px;
  background: linear-gradient(to right, var(--c-acc) var(--pct, 0%), var(--c-g600) var(--pct, 0%));
}
.rng::-webkit-slider-thumb {
  appearance: none; width: 14px; height: 14px; margin-top: -6px;
  border-radius: 50%; background: var(--c-acc); box-shadow: var(--glow-line);
}
.rng::-moz-range-track { height: 2px; background: var(--c-g600); }
.rng::-moz-range-progress { height: 2px; background: var(--c-acc); }
.rng::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: var(--c-acc); }

/* ------------------------------------------------------------- 9. tabs, pills */

.tabs { display: flex; align-items: flex-end; gap: var(--s5); border-bottom: 1px solid var(--c-g700); }
.tab {
  position: relative; display: flex; align-items: center; gap: 6px;
  height: 40px; color: var(--c-g300);
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  cursor: pointer; background: none; border: none;
}
.tab:hover { color: var(--c-white); }
.tab .n { color: var(--c-g500); font-weight: 400; }
.tab.on { color: var(--c-acc); text-shadow: var(--glow-text); }
.tab.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: currentColor; box-shadow: var(--glow-line);
}

.pill {
  display: inline-flex; align-items: center; gap: 6px; height: var(--h-xs);
  padding: 0 var(--s2); border-radius: 21px;
  border: 1px solid var(--c-g600); color: var(--c-g200);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.pill.on { border-color: var(--c-acc); color: var(--c-acc); text-shadow: var(--glow-text); }
.pill.pick { cursor: pointer; }
.pill.pick:hover { border-color: var(--c-white); color: var(--c-white); }
.pill .x { color: var(--c-g400); font-size: 12px; }
.pill .x:hover { color: var(--c-white); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: var(--glow-line); }

/* tier badges, colours are Blur's own token names, mapped to our six tiers */
.tier {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px;
  border-radius: var(--r1); border: 1px solid currentColor;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; text-shadow: var(--glow-text);
}
.t-common    { color: var(--c-g300); }
.t-uncommon  { color: var(--c-up); }
.t-rare      { color: var(--c-ice); }
.t-epic      { color: var(--c-violet); }
.t-legendary { color: var(--c-acc); }
.t-oneofone  { color: var(--c-white); }

/* --------------------------------------------------------------- 10. panels */

.panel {
  border: 1px solid var(--c-g700); border-radius: var(--r2);
  background: var(--c-g900);
}
.panel > .head {
  display: flex; align-items: center; gap: var(--s2);
  height: 40px; padding: 0 var(--s3);
  border-bottom: 1px solid var(--c-g700);
  color: var(--c-g300); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.panel > .body { padding: var(--s3); }
.sunken { background: var(--c-g800); border: 1px solid var(--c-g700); border-radius: var(--r2); }

.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat .k {
  color: var(--c-g300); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.stat .v {
  color: var(--c-g100); font-size: var(--fs-label); line-height: var(--lh-label);
  font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat.key .v { color: var(--c-acc); text-shadow: var(--glow-text); }
.stat .v small { color: var(--c-g400); font-weight: 400; }

.stats { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; min-width: 0; }
.stats > .stat { flex: 0 0 auto; }
.stats .vr { width: 1px; height: 28px; background: var(--c-g700); }

/* --------------------------------------------------------------- 11. tables */

.tbl { width: 100%; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.tbl thead th, .tbl .th {
  position: sticky; top: 0; z-index: 2;
  background: var(--c-g900);
  padding: 0 var(--s3); height: 32px;
  color: var(--c-g300); font-size: var(--fs-body); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; text-align: left;
  border-bottom: 1px solid var(--c-g700); white-space: nowrap;
}
.tbl th.n, .tbl td.n { text-align: right; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--c-white); }
.tbl th.on { color: var(--c-white); }
.tbl th .car { font-size: 9px; margin-left: 4px; color: var(--c-acc); }
.tbl td { padding: 0 var(--s3); height: 52px; border-bottom: 1px solid var(--c-g800); color: var(--c-g100); }
.tbl tbody tr { transition: background .1s linear; }
.tbl tbody tr:hover { background: var(--c-g700); }
.tbl tbody tr.on { background: color-mix(in srgb, var(--c-acc) 12%, transparent); }
.tbl tbody tr.on td { border-bottom-color: color-mix(in srgb, var(--c-acc) 25%, transparent); }
.tbl .mut { color: var(--c-g300); }
.tbl .empty td { height: 80px; color: var(--c-g400); text-align: center; }
.tbl.dense td { height: 36px; }

.rank { color: var(--c-g400); }
.up   { color: var(--c-up); }
.down { color: var(--c-down); }

/* ----------------------------------------------------- 12. art & item cards */

.art {
  font-family: var(--font-art);
  font-size: 12px; line-height: 1.12;
  white-space: pre; letter-spacing: 0;
  text-align: center; text-shadow: var(--glow-text);
  user-select: none;
}

.grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(var(--tile, 200px), 1fr));
  padding: var(--s3) var(--s4) var(--s7);
}
.grid[data-size="1"] { --tile: 128px; }
.grid[data-size="2"] { --tile: 168px; }
.grid[data-size="3"] { --tile: 216px; }
.grid[data-size="4"] { --tile: 280px; }

.card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--c-g700); border-radius: var(--r2);
  background: var(--c-g900); overflow: hidden; cursor: pointer;
  transition: border-color .12s ease-in-out, background .12s ease-in-out;
}
.card:hover { border-color: var(--c-g500); }
.card .shot {
  position: relative; aspect-ratio: 1 / 1;
  display: grid; place-items: center; overflow: hidden;
  background: var(--c-g800);
}
.card .shot .art { font-size: 15px; }
.card .meta { padding: var(--s2); display: flex; flex-direction: column; gap: 4px; }
.card .line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.card .id { color: var(--c-g300); font-weight: 600; }
.card .nm { color: var(--c-g100); font-weight: 600; }
.card .px { color: var(--c-g100); font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; }
.card .px.none { color: var(--c-g500); font-weight: 400; }
.card .usd { color: var(--c-g400); margin-left: auto; }
.card .act {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-acc); color: var(--c-black);
  font-weight: 700; font-size: var(--fs-sub); text-transform: uppercase; letter-spacing: .04em;
  transform: translateY(100%); transition: transform .12s ease-in-out;
}
.card .shot:hover .act, .card:hover .act { transform: translateY(0); }
.card.on { border-color: var(--c-acc); background: color-mix(in srgb, var(--c-acc) 8%, var(--c-g900)); }
.card.on .act { transform: translateY(0); background: var(--c-white); }
.card .flag {
  position: absolute; top: 6px; left: 6px; z-index: 1;
}
.card .rk {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  color: var(--c-g300); font-size: 10px;
  background: color-mix(in srgb, var(--c-g900) 72%, transparent);
  padding: 1px 5px; border-radius: var(--r1);
}

/* ------------------------------------------------------------- 13. the rail */

.rail {
  flex: 0 0 var(--rail-w); width: var(--rail-w);
  border-right: 1px solid var(--c-g700);
  overflow-y: auto; overscroll-behavior: contain;
  z-index: var(--z-rail); background: var(--c-g900);
}
.rail.hide { display: none; }
.rail .sec { border-bottom: 1px solid var(--c-g800); }
.rail .sec > .hd {
  display: flex; align-items: center; gap: var(--s2);
  height: 44px; padding: 0 var(--s3); cursor: pointer;
  color: var(--c-g200); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.rail .sec > .hd:hover { color: var(--c-white); }
.rail .sec > .hd .ca { margin-left: auto; color: var(--c-g400); font-size: 9px; transition: transform .15s; }
.rail .sec.open > .hd .ca { transform: rotate(180deg); }
.rail .sec > .bd { display: none; padding: 0 var(--s3) var(--s3); }
.rail .sec.open > .bd { display: block; }
.rail .opt {
  display: flex; align-items: center; gap: var(--s2);
  height: 30px; color: var(--c-g200); cursor: pointer;
}
.rail .opt:hover { color: var(--c-white); }
.rail .opt .ct { margin-left: auto; color: var(--c-g400); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- 14. toolbar & bar */

.toolbar {
  display: flex; align-items: center; gap: var(--s2);
  height: 52px; padding: 0 var(--s4); flex: 0 0 52px;
  border-bottom: 1px solid var(--c-g700);
}
.seg { display: flex; border: 1px solid var(--c-g600); border-radius: var(--r2); overflow: hidden; }
.seg button {
  height: 34px; min-width: 34px; padding: 0 var(--s2);
  color: var(--c-g300); font-size: 11px; font-weight: 700;
}
.seg button + button { border-left: 1px solid var(--c-g600); }
.seg button:hover { color: var(--c-white); }
.seg button.on { color: var(--c-acc); background: var(--c-g700); text-shadow: var(--glow-text); }

/* the sweep bar, the one control Blur is known for */
.sweepbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  display: flex; align-items: center; gap: var(--s4);
  height: 64px; padding: 0 var(--s4);
  background: var(--hdr-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-g600);
  transform: translateY(120%); opacity: 0; pointer-events: none;
  transition: transform .18s ease-in-out, opacity .18s ease-in-out;
}
.sweepbar.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sweepbar .lab { color: var(--c-g300); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sweepbar .slot { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.sweepbar .tot { color: var(--c-acc); font-size: var(--fs-label); font-weight: 700;
                 font-variant-numeric: tabular-nums; text-shadow: var(--glow-text); }

/* -------------------------------------------------------------- 15. the cart */

.cart {
  flex: 0 0 var(--cart-w); width: var(--cart-w);
  border-left: 1px solid var(--c-g700);
  display: flex; flex-direction: column; background: var(--c-g900);
}
.cart.hide { display: none; }
.cart .hd {
  display: flex; align-items: center; gap: var(--s2);
  height: 52px; flex: 0 0 52px; padding: 0 var(--s3);
  border-bottom: 1px solid var(--c-g700);
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.cart .list { flex: 1 1 auto; overflow-y: auto; }
.cart .it {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--c-g800);
}
.cart .it:hover { background: var(--c-g700); }
.cart .it .mini {
  width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center;
  background: var(--c-g800); border-radius: var(--r2); overflow: hidden;
}
.cart .it .mini .art { font-size: 5px; line-height: 1.05; }
.cart .ft { flex: 0 0 auto; padding: var(--s3); border-top: 1px solid var(--c-g700); display: flex; flex-direction: column; gap: var(--s2); }
.cart .sum { display: flex; align-items: baseline; }
.cart .sum .v { margin-left: auto; color: var(--c-acc); font-size: var(--fs-label); font-weight: 700; text-shadow: var(--glow-text); }

/* ------------------------------------------------------------ 16. bid ladder */

.ladder { width: 100%; }
.ladder .lv {
  position: relative; display: flex; align-items: center; gap: var(--s3);
  height: 40px; padding: 0 var(--s4); cursor: pointer;
  border-bottom: 1px solid var(--c-g800);
  font-variant-numeric: tabular-nums;
}
.ladder .lv .bar {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: color-mix(in srgb, var(--c-acc) 16%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--c-acc) 45%, transparent);
}
.ladder .lv > * { position: relative; z-index: 1; }
.ladder .lv:hover { background: var(--c-g700); }
.ladder .lv.mine .px { color: var(--c-acc); text-shadow: var(--glow-text); }
.ladder .px { width: 96px; font-weight: 700; }
.ladder .ct { width: 80px; color: var(--c-g300); }
.ladder .vol { margin-left: auto; color: var(--c-g200); }

/* ------------------------------------------------------ 17. modal, toast, tip */

.veil {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,.72);
  display: grid; place-items: center; padding: var(--s4);
}
.modal {
  width: min(560px, 100%); max-height: 88vh; overflow: auto;
  background: var(--c-g900); border: 1px solid var(--c-g600); border-radius: var(--r2);
}
.modal.wide { width: min(760px, 100%); }
.modal .hd {
  display: flex; align-items: center; gap: var(--s2);
  height: 48px; padding: 0 var(--s4); border-bottom: 1px solid var(--c-g700);
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-g100);
}
.modal .hd .x { margin-left: auto; color: var(--c-g400); font-size: 16px; line-height: 1; }
.modal .hd .x:hover { color: var(--c-white); }
.modal .bd { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.modal .ft { padding: 0 var(--s4) var(--s4); display: flex; gap: var(--s2); justify-content: flex-end; }
.modal p { color: var(--c-g200); line-height: 1.6; }

.toasts { position: fixed; right: var(--s4); bottom: var(--s4); z-index: var(--z-pop); display: flex; flex-direction: column; gap: var(--s2); }
.toast {
  min-width: 260px; max-width: 360px;
  display: flex; gap: var(--s2); padding: var(--s3);
  background: var(--c-g800); border: 1px solid var(--c-g600); border-radius: var(--r2);
  animation: toast-in .18s ease-out;
}
.toast.ok   { border-color: var(--c-up); }
.toast.bad  { border-color: var(--c-down); }
.toast .k { color: var(--c-g300); text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); z-index: var(--z-pop);
  background: var(--c-g800); border: 1px solid var(--c-g600); border-radius: var(--r2);
  padding: 6px 8px; white-space: nowrap; color: var(--c-g100); font-size: 10px;
}

/* -------------------------------------------------------------- 18. console */

.crt {
  background: var(--c-g800); border: 1px solid var(--c-g700); border-radius: var(--r2);
  padding: var(--s3);
}
.log {
  height: 180px; overflow-y: auto; padding: var(--s2) var(--s3);
  background: var(--c-g800); border: 1px solid var(--c-g700); border-radius: var(--r2);
  color: var(--c-g300); line-height: 1.7;
}
.log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log b { color: var(--c-acc); font-weight: 600; text-shadow: var(--glow-text); }

.prog { height: 2px; background: var(--c-g700); border-radius: 1px; overflow: hidden; }
.prog > i { display: block; height: 100%; background: var(--c-acc); box-shadow: var(--glow-line); transition: width .2s linear; }

.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 1px; background: var(--c-g700); border: 1px solid var(--c-g700); border-radius: var(--r2); overflow: hidden; }
.readout .cell { background: var(--c-g900); padding: var(--s2) var(--s3); display: flex; flex-direction: column; gap: 2px; }
.readout .cell span { color: var(--c-g300); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.readout .cell b { color: var(--c-g100); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- 19. status strip */

.statusbar {
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  height: 32px; flex: 0 0 32px; padding: 0 var(--s4);
  border-top: 1px solid var(--c-g700); background: var(--c-g900);
  color: var(--c-g400); font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
}
.statusbar b { color: var(--c-g200); font-weight: 600; letter-spacing: 0; }
.statusbar .key b { color: var(--c-acc); text-shadow: var(--glow-text); }

/* -------------------------------------------------------- 20. reading pages */

.doc { max-width: 880px; margin: 0 auto; padding: var(--s7) var(--s4) var(--s8); }
.doc.wide { max-width: 1160px; }
.doc h1 {
  font-size: var(--fs-sub2); line-height: var(--lh-sub2); font-weight: 700;
  color: var(--c-acc); text-transform: uppercase; letter-spacing: .04em;
  text-shadow: var(--glow-text); margin-bottom: var(--s4);
}
.doc h2 {
  font-size: var(--fs-head); line-height: var(--lh-head); font-weight: 700;
  color: var(--c-white); text-transform: uppercase; letter-spacing: .03em;
  margin: var(--s7) 0 var(--s3); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--c-g700);
}
.doc h3, .doc h4 {
  font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 700;
  color: var(--c-g100); margin: var(--s5) 0 var(--s2);
}
.doc p, .doc li { color: var(--c-g200); font-size: var(--fs-label); line-height: 1.75; }
.doc p + p { margin-top: var(--s3); }
.doc ul, .doc ol { margin: var(--s3) 0 var(--s3) var(--s5); display: flex; flex-direction: column; gap: 6px; }
.doc a { color: var(--c-acc); border-bottom: 1px solid color-mix(in srgb, var(--c-acc) 40%, transparent); }
.doc a:hover { color: var(--c-white); border-bottom-color: var(--c-white); }
.doc b, .doc strong { color: var(--c-g100); font-weight: 700; }
.doc code {
  font-family: var(--font); font-size: 12px;
  background: var(--c-g800); border: 1px solid var(--c-g700); border-radius: var(--r1);
  padding: 1px 5px; color: var(--c-acc);
}
.doc pre {
  background: var(--c-g800); border: 1px solid var(--c-g700); border-radius: var(--r2);
  padding: var(--s3); overflow-x: auto; margin: var(--s3) 0;
  font-size: 12px; line-height: 1.7; color: var(--c-g200);
}
.doc pre code { background: none; border: none; padding: 0; color: inherit; }
.doc table { width: 100%; margin: var(--s3) 0; }
.doc th {
  text-align: left; padding: var(--s2) var(--s3); height: 34px;
  color: var(--c-g300); font-size: var(--fs-body); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--c-g600); white-space: nowrap;
}
.doc td {
  padding: var(--s2) var(--s3); height: 38px;
  border-bottom: 1px solid var(--c-g800); color: var(--c-g200);
  font-size: var(--fs-body); font-variant-numeric: tabular-nums;
}
.doc tbody tr:hover { background: var(--c-g800); }
.doc .n, .doc td.n, .doc th.n { text-align: right; }
.doc blockquote {
  border-left: 1px solid var(--c-acc); padding: var(--s2) var(--s4);
  margin: var(--s4) 0; color: var(--c-g200);
}
.doc dl.kv { display: grid; grid-template-columns: 200px 1fr; gap: 1px; background: var(--c-g700);
             border: 1px solid var(--c-g700); border-radius: var(--r2); overflow: hidden; margin: var(--s3) 0; }
.doc dl.kv dt { background: var(--c-g900); padding: var(--s2) var(--s3); color: var(--c-g300); }
.doc dl.kv dd { background: var(--c-g900); padding: var(--s2) var(--s3); color: var(--c-g100); }
.doc .lead { font-size: var(--fs-head); line-height: 1.6; color: var(--c-g100); }

.toc { display: flex; flex-direction: column; gap: 2px; margin: var(--s4) 0 var(--s6); }
.toc a { display: flex; gap: var(--s3); padding: 6px var(--s3); border: none;
         color: var(--c-g300); border-left: 1px solid var(--c-g700); }
.toc a:hover { color: var(--c-white); border-left-color: var(--c-acc); background: var(--c-g800); }
.toc a b { color: var(--c-g500); width: 24px; }

/* --------------------------------------------------------- 21. hero (index) */

.hero { padding: var(--s7) 0 var(--s6); }
.hero h1 {
  font-size: clamp(40px, 9vw, 104px); line-height: .96; font-weight: 700;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--c-white);
  text-shadow: var(--glow-text);
}
.hero h1 em { font-style: normal; color: var(--c-acc); }
.hero .sub { max-width: 560px; color: var(--c-g300); font-size: var(--fs-label); line-height: 1.7; margin-top: var(--s4); }

.marq { overflow: hidden; border-block: 1px solid var(--c-g700); padding: var(--s2) 0; }
.marq .trk { display: flex; gap: var(--s7); width: max-content; animation: marq 28s linear infinite; }
.marq span { color: var(--c-g500); text-transform: uppercase; letter-spacing: .2em; font-size: 10px; white-space: nowrap; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ 22. responsive */

/* Below 1280 the rail and the cart stop being columns and become drawers over
   the grid: a trading screen has to keep the items visible, so nothing that is
   only a filter panel is allowed to take the width. */
@media (max-width: 1279px) {
  .search { display: none; }

  .rail { display: none; }
  .rail.open {
    display: block;
    position: fixed; top: var(--hdr-h); bottom: 0; left: 0;
    width: min(320px, 86vw); z-index: 60;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
  }

  .cart {
    position: fixed; top: var(--hdr-h); bottom: 0; right: 0;
    width: min(340px, 88vw); z-index: var(--z-bar);
    box-shadow: 0 0 24px rgba(0, 0, 0, .6);
  }
}

@media (max-width: 959px) {
  .hdr { gap: var(--s2); padding: 0 var(--s2); }
  .hdr .bal, .hdr #themeBtn { display: none; }
  .hdr-right { margin-left: 0; }

  /* the nav must never vanish, it becomes a scrolling strip instead */
  .nav { display: flex; overflow-x: auto; min-width: 0; flex: 1 1 auto; }
  .nav a { margin-left: var(--s3); font-size: 11px; }
  .nav a:first-child { margin-left: var(--s2); }

  .brand { padding-right: 0; }
  .brand .label { display: none; }

  .colstrip { min-height: 56px; padding: var(--s2) var(--s3); gap: var(--s3); }
  .colstrip > * { flex: 0 0 auto; }          /* the strip scrolls, it does not squeeze */
  .colmark { width: 34px; height: 34px; flex: 0 0 34px; }
  .colstrip .t-sub { display: none; }
  .stats { gap: var(--s4); flex-wrap: nowrap; }
  .stats .vr { display: none; }

  /* two plates across reads better than one enormous one */
  .grid[data-size="3"], .grid[data-size="4"] { --tile: 150px; }
  .grid[data-size="3"] .card .shot .art,
  .grid[data-size="4"] .card .shot .art { font-size: 13px; }

  .toolbar { overflow-x: auto; padding: 0 var(--s2); }
  .tabs { gap: var(--s4); overflow-x: auto; }

  .grid { padding: var(--s2) var(--s2) 96px; }

  /* the sweep bar keeps the two things you act on and drops the rest */
  .sweepbar { height: auto; padding: var(--s2) var(--s3); flex-wrap: wrap; gap: var(--s2); }
  .sweepbar .lab { font-size: 10px; }
  .sweepbar .slot:first-of-type { display: none; }
  .sweepbar .btn { flex: 1 1 auto; }

  .statusbar { height: auto; flex: 0 0 auto; gap: var(--s3); padding: 6px var(--s3); }

  .doc { padding: var(--s5) var(--s4) var(--s7); }
  .doc dl.kv { grid-template-columns: 1fr; }
  .doc h1, .mast .wordmark, h1.wordmark { font-size: clamp(28px, 10vw, 44px); line-height: 1.1; }
  .modal .bd { padding: var(--s3); }
  .modal .bd .row { flex-wrap: wrap; }
}

/* ---------------------------------------------------------- 23. ascii motion */

.ascii-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.ascii-hold { position: relative; }
.ascii-hold > *:not(.ascii-bg) { position: relative; z-index: 1; }

/* the hero canvas carries the shape; the page sits on top of it */
.herofield {
  position: relative; min-height: clamp(360px, 52vh, 560px);
  border-bottom: 1px solid var(--c-g700);
  overflow: hidden;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, #000 42%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 45%, #000 42%, transparent 100%);
}
.herofield canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the boot frame */
.intro {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--c-g900);
  display: grid; place-items: center;
  transition: opacity .6s ease-in-out;
}
.intro.out { opacity: 0; pointer-events: none; }
.intro-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-lines {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px;
  align-items: center; margin-top: 30vh;
  color: var(--c-g400); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.intro-lines .l { min-height: 14px; }
.intro-skip {
  position: absolute; bottom: 24px; left: 0; right: 0; z-index: 1; text-align: center;
  color: var(--c-g500); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
}

/* a plate that is still resolving reads dimmer than one that has landed */
.art.resolving { opacity: .72; }

/* cells that just changed flash once, used on live prices */
@keyframes tick-up   { from { color: var(--c-up);   } to { color: inherit; } }
@keyframes tick-down { from { color: var(--c-down); } to { color: inherit; } }
.tick-up   { animation: tick-up   .9s ease-out; }
.tick-down { animation: tick-down .9s ease-out; }

/* -------------------------------------------------- 24. market page pieces */

.colstrip {
  flex: 0 0 auto; min-height: 72px; padding: 12px var(--s4);
  border-bottom: 1px solid var(--c-g700);
  display: flex; align-items: center; gap: var(--s4);
  overflow-x: auto;
}
.colmark {
  width: 44px; height: 44px; flex: 0 0 44px; position: relative; overflow: hidden;
  border: 1px solid var(--c-g600); border-radius: var(--r2); background: var(--c-g800);
  display: grid; place-items: center;
}
.colmark .art { font-size: 11px; color: var(--c-acc); }

.pane { flex: 1 1 auto; display: flex; flex-direction: column;
         min-height: 0; min-width: 0; position: relative; }
.pane.hide { display: none; }

/* activity rows arrive at the top and flash once */
@keyframes row-in { from { background: color-mix(in srgb, var(--c-acc) 22%, transparent); }
                    to   { background: transparent; } }
.tbl tbody tr.fresh { animation: row-in 1.4s ease-out; }

.ev { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ev-sale  { color: var(--c-up); }
.ev-list  { color: var(--c-g200); }
.ev-bid   { color: var(--c-acc); }
.ev-mine  { color: var(--c-mag); }
.ev-burn  { color: var(--c-down); }
.ev-cancel, .ev-cancel-bid { color: var(--c-g400); }

/* tiny charts, drawn as inline svg */
.chart { width: 100%; }
.chart .ln { fill: none; stroke: var(--c-acc); stroke-width: 1.5; filter: drop-shadow(0 0 4px var(--c-acc)); }
.chart .ar { fill: color-mix(in srgb, var(--c-acc) 14%, transparent); }
.chart .gr { stroke: var(--c-g700); stroke-width: 1; }
.chart .bar { fill: var(--c-g600); }
.chart .bar.on { fill: var(--c-acc); }
.chart text { fill: var(--c-g400); font-size: 9px; }

.empty-note { padding: var(--s5); color: var(--c-g400); text-align: center; }

/* art scales with the grid density */
.grid[data-size="1"] .card .shot .art { font-size: 10px; }
.grid[data-size="2"] .card .shot .art { font-size: 13px; }
.grid[data-size="3"] .card .shot .art { font-size: 18px; }
.grid[data-size="4"] .card .shot .art { font-size: 24px; }

/* the hero field lives on the right; it dissolves before it reaches the words */
.herofield canvas {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 26%, #000 52%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 26%, #000 52%);
}
@media (max-width: 959px) {
  .herofield canvas { -webkit-mask-image: none; mask-image: none; opacity: .5; }
}

/* ------------------------------------------- 25. legacy names, kept working */
/* The long-form pages carry markup written before this system existed. Rather
   than rewrite three thousand lines of prose markup, the old class names are
   aliased onto the new ones. */

.sunken-panel {
  background: var(--c-g800); border: 1px solid var(--c-g700);
  border-radius: var(--r2); overflow: auto; margin: var(--s3) 0;
}
.sunken-panel table { margin: 0; }
.doc tr.hi td { background: color-mix(in srgb, var(--c-acc) 12%, transparent); color: var(--c-white); }
.doc .dim, .dim { color: var(--c-g400); }
.doc .hl, .hl { color: var(--c-acc); text-shadow: var(--glow-text); }
.doc .wordmark, .wordmark { color: var(--c-acc); font-weight: 700; letter-spacing: .08em; }

.doc ol.steps { list-style: none; margin: var(--s4) 0; display: grid; gap: var(--s2);
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.doc ol.steps > li {
  counter-increment: step; position: relative;
  border: 1px solid var(--c-g700); border-radius: var(--r2);
  padding: var(--s3) var(--s3) var(--s3) 44px; background: var(--c-g900);
}
.doc ol.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: var(--s3); top: var(--s3);
  color: var(--c-acc); font-weight: 700; text-shadow: var(--glow-text);
}
.doc ol.steps h4 { margin: 0 0 4px; color: var(--c-white); }
.doc ol.steps p { margin: 0; font-size: var(--fs-body); line-height: 1.7; }

.statusbar .status-cell { display: flex; align-items: center; gap: 6px; }
.statusbar .status-cell b { color: var(--c-g200); }

/* the little tape chips at the top of the reading pages */
.tape {
  display: inline-flex; align-items: center; gap: 6px; height: var(--h-xs);
  padding: 0 var(--s2); border: 1px solid var(--c-g600); border-radius: 21px;
  color: var(--c-g300); font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
}
.tape b { color: var(--c-g100); letter-spacing: 0; }
.tape.key { border-color: var(--c-acc); color: var(--c-acc); }
.tape.key b { color: var(--c-acc); text-shadow: var(--glow-text); }
.tape.burn { border-color: var(--c-g600); }
.tapebar { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); }

/* spec-page furniture */
.doc fieldset {
  border: 1px solid var(--c-g700); border-radius: var(--r2);
  padding: var(--s3); margin: var(--s3) 0;
}
.doc legend {
  padding: 0 var(--s2); color: var(--c-acc); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-sub);
  text-shadow: var(--glow-text);
}
.doc fieldset p { margin: 0; }

.mast { margin: var(--s6) 0 var(--s7); }
.mast .wordmark, h1.wordmark {
  font-size: clamp(40px, 8vw, 88px); line-height: 1; font-weight: 700;
  letter-spacing: -.01em; color: var(--c-white); text-shadow: var(--glow-text);
  margin: 0 0 var(--s4); text-transform: none;
}
h1.wordmark span { color: var(--c-acc); }
.subtitle { color: var(--c-g300); font-size: var(--fs-head); line-height: 1.6; max-width: 640px; }
.stamp { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s4);
         color: var(--c-g400); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.stamp b { color: var(--c-g200); letter-spacing: 0; }

/* The 39 palettes were drawn against a near-black ground. On the light theme
   they wash out, so the art is darkened rather than recoloured, the hues stay
   the ones the generator chose. */
[data-theme="light"] .art { filter: brightness(.66) saturate(1.25); }


/* ------------------------------------------------- 26. landing, second pass */
/* The first version explained itself in paragraphs. It does not any more: the
   mark, four facts, one button, and the five numbers that actually decide
   whether the button is worth pressing. */

.hero-in {
  position: relative; z-index: 1;
  min-height: clamp(360px, 52vh, 560px);
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: var(--s5);
  padding-block: var(--s7);
}
.hero-mark {
  font-size: clamp(44px, 11.5vw, 136px); line-height: .88; font-weight: 700;
  letter-spacing: -.035em; color: var(--c-white);
  text-shadow: var(--glow-text);
}

/* the band under the hero: the numbers, at a size you can read standing up */
.band {
  border-bottom: 1px solid var(--c-g700);
  background: var(--c-g900);
  padding: var(--s3) 0;
}
.band .stat .v { font-size: var(--fs-head); line-height: var(--lh-head); font-weight: 700; }
.band .stat .k { color: var(--c-g400); }
.band .vr { width: 1px; height: 34px; background: var(--c-g700); }

/* the rig strip: the control is the loudest object on the page */
.rigbar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3);
  border: 1px solid var(--c-g700); border-radius: var(--r2);
  background: var(--c-g900);
}

.btn-hero {
  height: 52px; padding: 0 var(--s6);
  font-size: var(--fs-label); letter-spacing: .06em;
}
.btn-pri.btn-hero { box-shadow: 0 0 28px -8px var(--c-acc); }
.btn-pri.btn-hero:hover { box-shadow: 0 0 28px -8px var(--c-white); }
.btn-warn.btn-hero { box-shadow: 0 0 28px -10px var(--c-down); }

/* the hash rate is the one number that moves while you watch */
.rate {
  font-size: 44px; line-height: 1; font-weight: 700;
  color: var(--c-acc); text-shadow: var(--glow-text);
}

/* a readout cell that carries a number with money attached to it */
.readout .cell.key { background: color-mix(in srgb, var(--c-acc) 8%, var(--c-g900)); }
.readout .cell.key b { color: var(--c-acc); text-shadow: var(--glow-text); }

@media (max-width: 959px) {
  .hero-in { gap: var(--s4); padding-block: var(--s6); }
  .band .shell { gap: var(--s4); overflow-x: auto; flex-wrap: nowrap; }
  .band .stat { flex: 0 0 auto; }
  .band .vr { display: none; }
  .rigbar { padding: var(--s2); gap: var(--s2); }
  .btn-hero { height: 46px; padding: 0 var(--s5); flex: 1 1 auto; }
  .rate { font-size: 34px; }
}


/* ------------------------------------------------- 27. wallet picker rows */
/* A connect dialog is a list of ways in, not an essay about the state of
   browser wallets on Zcash. */

.wopt {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; padding: var(--s3);
  border: 1px solid var(--c-g600); border-radius: var(--r2);
  background: transparent; cursor: pointer; text-align: left;
  transition: border-color .15s ease-in-out;
}
.wopt:hover { border-color: var(--c-white); }
.wopt .mk {
  width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
  border: 1px solid var(--c-acc); border-radius: var(--r2);
  color: var(--c-acc); font-size: 17px; text-shadow: var(--glow-text);
}
.wopt .go {
  color: var(--c-acc); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: var(--fs-sub); white-space: nowrap;
}
.wopt:hover .go { color: var(--c-white); }

.orline { display: flex; align-items: center; gap: var(--s3); color: var(--c-g500); }
.orline::before, .orline::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--c-g700);
}