/* ============================================================
   WHALE — design tokens
   Editorial DeFi · warm bone + ink + copper
   ============================================================ */

:root {
  /* surfaces — 2026 warmer + softer */
  --bone:        #F1ECE0;
  --bone-2:      #E8E1D0;
  --bone-3:      #DDD3BB;
  --paper:       #F7F3E8;
  --ink:         #0B0B0C;
  --ink-2:       #1A1A1C;
  --graphite:    #67655E;
  --graphite-2:  #97948A;
  --rule:        #0B0B0C12;
  --rule-2:      #0B0B0C22;

  /* signal */
  --copper:      #C8884E;
  --copper-2:    #A66E36;
  --acid:        #1F3A5F;          /* editorial petrol blue — was lime, replaced for 2026 calm */
  --acid-2:      #142A47;
  --acid-ink:    #F1ECE0;          /* text on acid surface */
  --green:       #4F8F6A;
  --green-soft:  #6BBF8E;
  --red:         #C24A3D;

  /* type */
  --f-display:   "Instrument Serif", "Newsreader", Georgia, serif;
  --f-sans:      "Geist", "Inter Tight", -apple-system, system-ui, sans-serif;
  --f-mono:      "JetBrains Mono", "Geist Mono", ui-monospace, monospace;
  --f-cn:        "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --f-cn-display:"Smiley Sans", "ZCOOL XiaoWei", "Noto Serif SC", "PingFang SC", sans-serif;
  --f-cn-serif:  "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --f-num:       "Newsreader", "Geist", "Inter Tight", -apple-system, sans-serif;

  --r-card:      10px;
  --r-sheet:     24px;
  --r-pill:      999px;
}

/* ════════════ DARK MODE — warm-black, layered surfaces ════════════ */
.whale.dark {
  /* layered warm-black surfaces (page → raised → elevated) */
  --bone:        #0F0D08;   /* page floor — warm near-black */
  --paper:       #1A1611;   /* default card — raised +1 */
  --bone-2:      #221E16;   /* dock / swap / sheet — raised +2 */
  --bone-3:      #07060300; /* sunken (ticker / modes pad) */

  /* type — bone-toned ivory not pure white, to keep warmth */
  --ink:         #F1ECE0;
  --ink-2:       #D8CFB8;
  --graphite:    #8A877D;
  --graphite-2:  #56534A;

  /* rules — subtle on dark, never harsh */
  --rule:        #FFFFFF0C;
  --rule-2:      #FFFFFF1A;

  /* signals — slight punch up so they breathe on dark */
  --copper:      #D49968;
  --copper-2:    #B07C4D;
  --acid:        #D4FB6E;
  --acid-2:      #B8E060;
  --green:       #6BC58E;
  --green-soft:  #88D5A8;
  --red:         #E36556;
}

/* page background — subtle warm vignette so surfaces float */
.whale.dark {
  background:
    radial-gradient(120% 60% at 50% 0%, #1B1812 0%, #0F0D08 60%) !important;
}

/* ─── cards: lift via inset highlight + ring + soft drop ─── */
.whale.dark .card {
  background: var(--paper);
  border-color: transparent;
  box-shadow:
    0 0.5px 0 0 #FFFFFF0F inset,            /* top edge catchlight */
    0 0 0 0.5px #FFFFFF14,                   /* hairline */
    0 8px 24px -18px #000000CC;              /* soft floor shadow */
}
.whale.dark .card.elev {
  background: var(--bone-2);
  box-shadow:
    0 0.5px 0 0 #FFFFFF14 inset,
    0 0 0 0.5px #FFFFFF1F,
    0 18px 32px -18px #000000DD;
}
.whale.dark .card.ink {
  /* hero cards (FOMO / Cumulative) — keep dark, add copper edge for premium feel */
  background:
    radial-gradient(140% 80% at 0% 0%, #1F160C 0%, #0A0804 60%);
  color: var(--ink);
  border-color: transparent;
  box-shadow:
    inset 0 0.5px 0 0 #D4996866,                /* copper top hairline */
    inset 0 -0.5px 0 0 #FFFFFF06,                /* faint bottom catchlight */
    0 0 0 0.5px #FFFFFF12,                       /* hairline ring */
    0 20px 40px -18px #00000099,                 /* depth shadow */
    inset 0 60px 80px -40px #C8884E12;           /* warm inner glow from top */
}
.whale.dark .card.ink .num { color: var(--ink); }
.whale.dark .card.ink .cn { color: var(--ink); }

/* ─── buttons ─── */
.whale.dark .btn {
  background: var(--ink); color: var(--bone);
  box-shadow:
    0 0.5px 0 0 #FFFFFFCC inset,
    0 0 0 0.5px #00000044,
    0 8px 18px -12px #000000AA;
}
.whale.dark .btn:hover { box-shadow: 0 0.5px 0 0 #FFFFFFCC inset, 0 0 0 1px var(--ink), 0 0 0 5px #F1ECE018; }
.whale.dark .btn:active { background: var(--ink-2); }
.whale.dark .btn.ghost {
  background: transparent; color: var(--ink);
  box-shadow: 0 0 0 1px #FFFFFF44;
}
.whale.dark .btn.ghost:hover { background: var(--ink); color: var(--bone); }
.whale.dark .btn.bone {
  background: var(--bone-2); color: var(--ink);
  box-shadow: 0 0.5px 0 0 #FFFFFF14 inset, 0 0 0 0.5px #FFFFFF22;
}
.whale.dark .btn.bone:hover { box-shadow: 0 0.5px 0 0 #FFFFFF14 inset, 0 0 0 1px #FFFFFF44; }
.whale.dark .btn.copper { background: var(--copper); color: #15110A; box-shadow: 0 0 0 0.5px var(--copper-2), 0 0 18px -4px #D4996833; }
.whale.dark .btn.acid {
  /* warm beacon — copper body, dark text, glowing halo */
  background: var(--copper);
  color: #15110A;
  box-shadow:
    inset 0 0.5px 0 #FFE0B855,            /* warm top catchlight */
    inset 0 -0.5px 0 #00000055,
    0 0 0 0.5px var(--copper-2),
    0 0 28px -6px #D4996866,               /* copper halo */
    0 8px 18px -10px #000000AA;
}
.whale.dark .btn.acid:hover {
  box-shadow:
    inset 0 0.5px 0 #FFE0B877,
    inset 0 -0.5px 0 #00000055,
    0 0 0 1px var(--copper-2),
    0 0 0 6px #D4996822,
    0 0 36px -4px #D4996899;
}
.whale.dark .btn.acid:active { background: var(--copper-2); }
/* reset child glyph colors so they pick up button color naturally */
.whale.dark .btn.acid > span > span:first-child,
.whale.dark .btn.acid > span:last-child { color: inherit; }
.whale.dark .btn.green { background: var(--green); color: #0A0F0B; }

/* ─── tags ─── */
.whale.dark .tag { background: var(--ink); color: var(--bone); }
.whale.dark .tag.ghost { background: transparent; color: var(--ink); border-color: #FFFFFF22; }
.whale.dark .tag.copper { background: var(--copper); color: #15110A; }
.whale.dark .tag.green { background: var(--green); color: #0A0F0B; }
.whale.dark .tag.red { background: var(--red); color: #1A0908; }

/* ─── nav / dock ─── */
.whale.dark .dock {
  background: var(--bone-2);
  box-shadow:
    0 0.5px 0 0 #FFFFFF14 inset,
    0 0 0 0.5px #FFFFFF1A,
    0 14px 30px -10px #000000CC,
    0 0 0 100vmax #00000000;
}
.whale.dark .dock .item { color: #6E6B62; }
.whale.dark .dock .item.on { background: var(--ink); color: var(--bone); }

/* ─── ticker / modes / inputs ─── */
.whale.dark .ticker {
  background: #06050200;
  box-shadow: inset 0 1px 0 #FFFFFF06, inset 0 -1px 0 #FFFFFF06;
}
.whale.dark .modes {
  background: #06050200;
  box-shadow: inset 0 0 0 0.5px #FFFFFF12;
}
.whale.dark .modes button { color: var(--graphite); }
.whale.dark .modes button.on {
  background: var(--bone-2); color: var(--ink);
  box-shadow: 0 0.5px 0 0 #FFFFFF1F inset, 0 0 0 0.5px #FFFFFF1F, 0 4px 10px -4px #000000CC;
}
.whale.dark .swap-zone {
  background: var(--bone-2);
  border-color: #FFFFFF12;
  box-shadow: 0 0.5px 0 0 #FFFFFF10 inset;
}
.whale.dark .swap-zone.focus { border-color: var(--ink); box-shadow: 0 0.5px 0 0 #FFFFFF14 inset, 0 0 0 3px #F1ECE018; }

/* ─── connect / brand chrome ─── */
.whale.dark .connect { background: var(--ink); color: var(--bone); }
.whale.dark .connect.connected { background: transparent; color: var(--ink); border-color: #FFFFFF44; }
.whale.dark .lang { border-color: #FFFFFF22; color: var(--graphite); }
.whale.dark .lang .on { color: var(--ink); }
.whale.dark .brand b { color: var(--graphite); }

/* ─── rules + dividers ─── */
.whale.dark .divider { background: #FFFFFF10; }

/* ─── scrollbars / overlays ─── */
.whale.dark .crosshair { color: #FFFFFF22; }

html, body { margin: 0; padding: 0; }
body {
  background: #2A2722;
  font-family: var(--f-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

* { box-sizing: border-box; }

/* phone screen — replaces iOS bezel inner bg */
.whale {
  width: 100%; height: 100%;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 14px; line-height: 1.4;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}

.whale .scroll {
  flex: 1;
  overflow: auto;
  padding: 0 0 160px;
  scrollbar-width: none;
}
.cn { font-feature-settings: "palt" 1, "kern" 1; letter-spacing: 0; font-weight: 400; }
.cn b, .cn strong { font-weight: 600; }
/* Chinese sizing baseline — 2026 polish */
.whale .cn { font-size: 13px; line-height: 1.5; }
.whale h1.display .cn,
.whale h2.display .cn { font-family: var(--f-cn-display); font-weight: 400; letter-spacing: 0.005em; }
.cn-display { font-family: var(--f-cn-display); letter-spacing: 0.01em; }
.whale .scroll::-webkit-scrollbar { display: none; }

/* AppBar */
.appbar {
  display: flex; align-items: center;
  padding: 50px 18px 12px;
  gap: 12px;
  position: relative;
  z-index: 4;
}
.brand {
  font-family: var(--f-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  font-weight: 400;
  flex: 1;
  font-style: italic;
  line-height: 1;
}
.brand b {
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  display: block;
  font-family: var(--f-mono);
  color: var(--graphite);
  margin-bottom: 3px;
}
.lang {
  display: inline-flex;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  padding: 4px 8px 4px;
  gap: 6px;
  color: var(--graphite);
  text-transform: uppercase;
}
.lang .on { color: var(--ink); font-weight: 600; }

.connect {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: var(--bone);
  padding: 7px 12px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.connect.connected { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.connect .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-soft); box-shadow: 0 0 0 2px #4F8F6A22; }

/* ────────── headings + sections ────────── */
.kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  display: flex; align-items: center; gap: 8px;
}
.kicker::before {
  content: ""; width: 14px; height: 1px; background: currentColor; opacity: 0.5;
}
.kicker.r::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
  display: flex; align-items: center; gap: 8px;
}
.kicker::before {
  content: ""; width: 14px; height: 1px; background: currentColor; opacity: 0.5;
}
.kicker.r::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--graphite-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1.display {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
}
h2.display {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0;
}

.num {
  font-family: var(--f-mono);
  font-feature-settings: "tnum", "ss01";
  letter-spacing: -0.02em;
}

.section { padding: 22px 18px 6px; }
.section + .section { padding-top: 14px; }

.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }

.divider {
  height: 1px; background: var(--rule); margin: 14px 0;
}

/* ────────── card / surfaces — 2026 layered ────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  position: relative;
  box-shadow: 0 1px 0 0 #ffffffb3 inset, 0 0 0 0.5px var(--rule);
}
.card.ink {
  background: var(--ink); color: var(--bone);
  border-color: var(--ink-2);
  box-shadow: 0 1px 0 0 #ffffff10 inset, 0 12px 32px -16px #00000080;
}
.card.elev {
  box-shadow: 0 1px 0 0 #ffffffb3 inset, 0 8px 22px -14px #00000022, 0 0 0 0.5px var(--rule);
}
.card-pad { padding: 16px; }
.card-pad-l { padding: 20px; }

/* crosshair retired — kept as no-op so existing markup still parses */
.crosshair { position: relative; }
.crosshair::before, .crosshair::after,
.crosshair > .ch1, .crosshair > .ch2 { display: none; }

/* ────────── pills + chips ────────── */
/* tags — 2026: flat dot-prefix label, no pill chrome */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0; border-radius: 0;
  background: transparent; color: var(--ink);
}
.tag::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink); flex-shrink: 0;
}
.tag.ghost { background: transparent; color: var(--graphite); border: 0; }
.tag.ghost::before { background: var(--graphite); }
.tag.copper { background: transparent; color: var(--copper-2); }
.tag.copper::before { background: var(--copper); }
.tag.green { background: transparent; color: var(--green); }
.tag.green::before { background: var(--green); }
.tag.red { background: transparent; color: var(--red); }
.tag.red::before { background: var(--red); }

/* ────────── buttons — 2026 editorial flat · letterpress ────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 10px;
  background: var(--ink); color: var(--bone);
  font-family: var(--f-sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0.005em;
  border: 0;
  width: 100%;
  cursor: pointer;
  position: relative;
  /* faint letterpress: top 0.5px highlight + crisp ring */
  box-shadow: 0 0 0 0.5px var(--ink);
  transition: box-shadow 140ms ease, background 140ms ease, color 140ms ease;
}
.btn:hover { box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px #0B0B0C0F; }
.btn:active { background: #1A1A1C; box-shadow: 0 0 0 1px var(--ink); }
.btn.lg { padding: 15px 18px; font-size: 15px; }
.btn.copper { background: var(--copper); box-shadow: 0 0 0 0.5px var(--copper-2); }
.btn.copper:hover { box-shadow: 0 0 0 1px var(--copper-2), 0 0 0 4px #C8884E22; }
.btn.copper:active { background: var(--copper-2); }
.btn.acid { background: var(--acid); color: var(--acid-ink); box-shadow: 0 0 0 0.5px var(--acid-2); }
.btn.acid:hover { box-shadow: 0 0 0 1px var(--acid-2), 0 0 0 6px #1F3A5F22; }
.btn.acid:active { background: var(--acid-2); }
.btn.green { background: var(--green); box-shadow: 0 0 0 0.5px #3F7757; }
.btn.ghost {
  background: transparent; color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.btn.ghost:hover { background: var(--ink); color: var(--bone); }
.btn.bone {
  background: var(--bone-2); color: var(--ink);
  box-shadow: 0 0.5px 0 0 #ffffffb3 inset, 0 0 0 0.5px var(--rule-2);
}
.btn.bone:hover { box-shadow: 0 0.5px 0 0 #ffffffb3 inset, 0 0 0 1px var(--ink-2); }

.iconbtn {
  width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule-2);
  background: transparent;
}

/* ────────── bottom dock ────────── */
.dock-wrap {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  display: flex; justify-content: center;
  z-index: 20; pointer-events: none;
}
.dock {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px;
  background: var(--ink);
  border-radius: 999px;
  pointer-events: auto;
  box-shadow: 0 14px 28px -12px #00000055;
}
.dock .item {
  width: 44px; height: 44px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: #88857C;
  position: relative;
}
.dock .item.on {
  background: var(--bone);
  color: var(--ink);
}
.dock .item svg { width: 18px; height: 18px; }

/* ────────── sparkline / svg helpers ────────── */
.spark { display: block; width: 100%; height: 100%; }

/* ────────── tab variants ────────── */
.modes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 4px;
  background: var(--bone-2);
  padding: 4px;
  border-radius: 14px;
  position: relative;
}
.modes button {
  border: 0; background: transparent; padding: 11px 0;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--graphite);
  position: relative;
  border-radius: 10px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.modes button.on {
  background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 0 0 #ffffffb3 inset, 0 1px 4px -1px #00000022;
}

.swap-zone {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 16px 18px;
  position: relative;
  box-shadow: 0 1px 0 0 #ffffffb3 inset;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.swap-zone.focus {
  border-color: var(--ink);
  box-shadow: 0 1px 0 0 #ffffffb3 inset, 0 0 0 3px #0B0B0C0F;
}
.swap-zone .label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite);
  margin-bottom: 8px;
}
.swap-zone .amount {
  display: flex; align-items: baseline; gap: 10px;
}
.swap-zone .amount input,
.swap-zone .amount .v {
  flex: 1;
  font-family: var(--f-mono);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
}
.swap-zone .token {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 12px;
  font-weight: 600; letter-spacing: 0.04em;
}
.swap-zone .token .t-icon {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--ink); color: var(--bone);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 12px; font-style: italic;
}
.swap-zone .usd {
  font-family: var(--f-mono); font-size: 11px; color: var(--graphite);
  margin-top: 6px;
}

.pcts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; margin-top: 12px;
}
.pcts button {
  border: 0.5px solid var(--rule-2); background: transparent;
  border-radius: 8px; padding: 7px 0;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--graphite);
  cursor: pointer; transition: all 140ms ease;
}
.pcts button:hover { color: var(--ink); border-color: var(--ink); }
.pcts button.on { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ────────── tx tracker ────────── */
.txbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--ink); color: var(--bone);
  border-radius: 12px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.06em;
}
.meter { display: inline-flex; gap: 2px; align-items: end; }
.meter span {
  display: inline-block; width: 3px; background: var(--copper);
  animation: meter 1.1s infinite;
}
.meter span:nth-child(1) { height: 6px; animation-delay: 0s; }
.meter span:nth-child(2) { height: 12px; animation-delay: .12s; }
.meter span:nth-child(3) { height: 9px; animation-delay: .24s; }
@keyframes meter {
  0%, 100% { transform: scaleY(0.4); transform-origin: bottom; }
  50% { transform: scaleY(1); }
}

/* node row */
.node {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--rule);
  align-items: center;
}
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bone-3), var(--copper));
  position: relative;
}
.avatar.b2 { background: linear-gradient(135deg, var(--ink-2), var(--copper-2)); }
.avatar.b3 { background: linear-gradient(135deg, var(--green), var(--bone-2)); }
.avatar.b4 { background: linear-gradient(135deg, var(--copper), var(--ink)); }
.addr {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: -0.01em;
}

/* ────────── 2026 polish ────────── */

/* marquee ticker band */
.ticker {
  height: 28px;
  background: var(--ink); color: var(--bone);
  overflow: hidden; position: relative;
  border-top: 1px solid var(--ink-2);
  border-bottom: 1px solid var(--ink-2);
}
.ticker .track {
  display: inline-flex; gap: 28px;
  white-space: nowrap;
  padding: 0 0;
  animation: tickerScroll 38s linear infinite;
  align-items: center; height: 100%;
}
.ticker .track > span {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bone);
  display: inline-flex; gap: 8px; align-items: center;
}
.ticker .track .tg { color: #88857C; }
.ticker .track .up { color: #6BBF8E; }
.ticker .track .dn { color: #E58775; }
.ticker .track .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--copper); }
@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ornament — engraved separator */
.orn {
  display: flex; align-items: center; gap: 10px;
  color: var(--graphite-2);
  font-family: var(--f-mono); font-size: 11px;
  margin: 14px 0;
}
.orn::before, .orn::after {
  content: ""; flex: 1; height: 1px; background: var(--rule-2);
}
.orn .star { letter-spacing: 0.4em; }

/* index serial — retired (was vintage industrial cosplay) */
.serial { display: none;
  position: absolute; top: 6px; right: 14px;
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--graphite-2);
  display: flex; align-items: center; gap: 6px;
}
.serial b { color: var(--ink); font-weight: 500; }

/* big number column with engraved label */
.big {
  display: flex; align-items: flex-end; gap: 12px;
}
.big .v {
  /* editorial serif numerals — Newsreader has gorgeous old-style figures */
  font-family: var(--f-num);
  font-size: 64px; font-weight: 300;
  letter-spacing: -0.025em; line-height: 0.92;
  font-feature-settings: "lnum" 1, "tnum" 1, "ss01" 1;
}
.big .v sup { font-size: 0.28em; vertical-align: 0.85em; color: var(--graphite); margin-left: 10px; font-weight: 400; letter-spacing: 0.12em; font-family: var(--f-mono); }

/* italic serif inline accent */
.it {
  font-family: var(--f-display); font-style: italic;
  letter-spacing: -0.01em;
}

/* CN-aware text — Noto Sans SC, slightly looser */
.cn { font-family: var(--f-cn); }
.cn-s { font-family: var(--f-cn-serif); }

/* section label — 2026 minimal: chinese title + hairline rule */
.sec-label {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.sec-label .num-tag { display: none; }
.sec-label .ti {
  font-family: var(--f-cn);
  font-size: 13px; font-weight: 500; color: var(--ink);
  flex-shrink: 0;
  letter-spacing: 0.005em;
}
.sec-label::after {
  content: ""; flex: 1; height: 1px; background: var(--rule); margin-left: 2px;
}
.sec-label .en {
  font-family: var(--f-mono); font-size: 9px; display: none;
  color: var(--graphite); letter-spacing: 0.08em;
  text-transform: uppercase; margin-left: auto;
}

/* hairline tab indicator */
.hr-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule-2);
}
.hr-tabs button {
  border: 0; background: transparent;
  padding: 10px 0 12px;
  font-family: var(--f-cn); font-size: 13px; color: var(--graphite);
  position: relative;
}
.hr-tabs button .en {
  display: block;
  font-family: var(--f-mono); font-size: 8px;
  letter-spacing: 0.16em; margin-top: 2px; color: var(--graphite-2);
}
.hr-tabs button.on { color: var(--ink); }
.hr-tabs button.on::after {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: -1px;
  height: 2px; background: var(--ink);
}

/* tonal split card — left ink / right paper */
.split {
  display: grid; grid-template-columns: 1.05fr 1fr;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--rule-2);
}
.split .L { background: var(--ink); color: var(--bone); padding: 16px; }
.split .R { background: var(--paper); padding: 16px; }
.split .R .e { color: var(--graphite); }

/* engraved divider · single line with asterisk */
.eng {
  display: flex; align-items: center; gap: 8px; color: var(--graphite-2);
  margin: 14px 18px;
}
.eng::before, .eng::after { content: ""; flex: 1; height: 1px; background: var(--rule-2); }
.eng .a { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.4em; }

/* timeline tick */
.tline {
  position: relative; padding-left: 22px;
}
.tline::before {
  content: ""; position: absolute; left: 4px; top: 0; bottom: 0;
  width: 1px; background: var(--rule-2);
}
.tline .item { position: relative; padding: 10px 0; }
.tline .item::before {
  content: ""; position: absolute; left: -22px; top: 16px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bone); border: 1px solid var(--ink);
}
.tline .item.now::before { background: var(--copper); border-color: var(--copper); box-shadow: 0 0 0 3px #C8884E33; }

/* striped placeholder */
.placeholder {
  background-image: repeating-linear-gradient(135deg,
    var(--bone-2) 0, var(--bone-2) 6px,
    var(--paper) 6px, var(--paper) 12px);
  border: 1px solid var(--rule);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite);
}