/*
 * 99 + Tax notebook theme: fonts and colour tokens (light + dark), then theme-base.css,
 * then the extras after the AFTER BASE marker. Ruled notebook paper with a red margin
 * and punched holes, handwritten headings, blue ballpoint accents, yellow highlighter,
 * and every token / NFT card as a sticky note.
 */
@import url("https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Patrick+Hand&family=Nunito:wght@400;600;700;800&display=swap");

:root {
  color-scheme: light;
  --paper: #fffef7;        /* a clean sheet: panels and cards */
  --paper-2: #f4f1e6;
  --desk: #d9d4c4;
  --page: #fbfaf2;         /* the notebook page behind everything */
  --ruled: rgb(120 160 215 / .38);
  --margin: rgb(230 110 110 / .75);
  --hole: #d9d4c4;
  --ink: #1f2a44;          /* ballpoint-black */
  --ink-2: #3c4763;
  --ink-3: #5c6680;
  --red: #1d4ed8;          /* the accent slot: blue ballpoint */
  --red-ink: #1a3fae;
  --amber: #8a5a00;
  --good: #2f7d32;
  --highlight: rgb(255 236 61 / .85);
  --rule: rgb(31 42 68 / .45);
  --rule-soft: rgb(31 42 68 / .16);
  --note-yellow: #fff27a; --note-pink: #ffc9dc; --note-green: #d2f4b8; --note-blue: #c7e6ff;
  --note-ink: #1f2a44;
  --mono: "Nunito", system-ui, sans-serif;
  --hand: "Patrick Hand", "Comic Sans MS", cursive;
  --title: "Gochi Hand", "Comic Sans MS", cursive;

  --bg: var(--paper); --bg-2: var(--paper); --surface-1: var(--paper); --glass: var(--paper); --glass-strong: var(--paper);
  --border: var(--rule); --line: var(--rule-soft); --line-2: var(--rule); --grid: var(--rule-soft); --shadow: transparent;
  --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-muted: var(--ink-3);
  --muted: var(--ink-3);
  --link: var(--red); --accent: var(--red); --pink: var(--red); --cyan: var(--ink); --lime: var(--red); --yellow: var(--red); --gold: var(--amber);
  --warning: var(--amber); --critical: #c8102e;
  --receipt: #fbf8ef; --receipt-ink: #1b1824;
  --glow-pink: none; --glow-cyan: none; --glow-lime: none;
  /* Chart / split colours: validated on this paper, and 3:1+ against every sticky-note colour. */
  --holders: #c8323c; --liquidity: #2e6bbf; --creator: #3f8a2f; --burn: #6f6a5f;
  --series-1: #c8323c; --series-2: #2e6bbf; --series-3: #3f8a2f;
  --s-hold: #c8323c; --s-pool: #2e6bbf; --s-other: #3f8a2f; --s-burn: #6f6a5f;
}

/* Dark mode (a navy notebook at night): the theme menu (html[data-mode="dark"]) or Auto on a dark device. */
:root[data-mode="dark"] {
  color-scheme: dark;
  --paper: #222b3d; --paper-2: #2a3448; --desk: #0c1019; --page: #1b2231;
  --ruled: rgb(140 170 230 / .16); --margin: rgb(240 120 120 / .45); --hole: #0c1019;
  --ink: #e8edf7; --ink-2: #c7cfe0; --ink-3: #9aa6c0;
  --red: #86a8ff; --red-ink: #a9c1ff; --amber: #e0b04a; --good: #7fd07f;
  --highlight: rgb(255 214 0 / .35);
  --rule: rgb(232 237 247 / .4); --rule-soft: rgb(232 237 247 / .14);
  --note-yellow: #e9d85e; --note-pink: #eab0c4; --note-green: #b7dca0; --note-blue: #a9cdea;
  --holders: #e93d98; --liquidity: #1b9ed0; --creator: #6aa51c; --burn: #8a8474;
  --series-1: #e93d98; --series-2: #1b9ed0; --series-3: #6aa51c;
  --s-hold: #e93d98; --s-pool: #1b9ed0; --s-other: #6aa51c; --s-burn: #8a8474;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    color-scheme: dark;
    --paper: #222b3d; --paper-2: #2a3448; --desk: #0c1019; --page: #1b2231;
    --ruled: rgb(140 170 230 / .16); --margin: rgb(240 120 120 / .45); --hole: #0c1019;
    --ink: #e8edf7; --ink-2: #c7cfe0; --ink-3: #9aa6c0;
    --red: #86a8ff; --red-ink: #a9c1ff; --amber: #e0b04a; --good: #7fd07f;
    --highlight: rgb(255 214 0 / .35);
    --rule: rgb(232 237 247 / .4); --rule-soft: rgb(232 237 247 / .14);
    --note-yellow: #e9d85e; --note-pink: #eab0c4; --note-green: #b7dca0; --note-blue: #a9cdea;
    --holders: #e93d98; --liquidity: #1b9ed0; --creator: #6aa51c; --burn: #8a8474;
    --series-1: #e93d98; --series-2: #1b9ed0; --series-3: #6aa51c;
    --s-hold: #e93d98; --s-pool: #1b9ed0; --s-other: #6aa51c; --s-burn: #8a8474;
  }
}

/*
 * Shared theme rules for every public page, written against the colour tokens a theme
 * file defines (--paper, --ink, --red, --rule, --mono…). Loaded after each page's own
 * <style>, so it wins on equal specificity; !important only where a page hard-codes the
 * old neon colours.
 */
/* ---------- paper and ink ---------- */
html { background: var(--desk); }
body {
  background: var(--paper) !important; color: var(--ink) !important;
  font-family: var(--mono) !important; font-size: 14px; line-height: 1.55;
  max-width: 1180px; margin: 0 auto !important; min-height: 100vh;
  box-shadow: 0 0 0 1px rgb(29 27 22 / .08), 0 30px 80px -30px rgb(60 45 20 / .45) !important;
  position: relative;
}
/* Torn receipt edge along the bottom of the page. */
body::after {
  content: "" !important; position: absolute !important; inset: auto 0 -10px 0 !important; height: 10px !important;
  opacity: 1 !important; mix-blend-mode: normal !important; z-index: 0 !important; pointer-events: none;
  background: linear-gradient(-45deg, transparent 7px, var(--paper) 0) 0 0 / 14px 10px repeat-x,
              linear-gradient(45deg, transparent 7px, var(--paper) 0) 0 0 / 14px 10px repeat-x !important;
}
*, *::before, *::after { text-shadow: none !important; }
/* Zero specificity, so each theme's own heading/label fonts override it. */
:where(body *:not(svg):not(svg *)) { font-family: var(--mono) !important; }
/* Text inside headings, buttons and labels takes their font, not the body font. */
:is(h1, h2, h3, legend, summary, .brand, a.logo, .btn, th, .lbl, .chip, .badge) * { font-family: inherit !important; }
/* Inline bits inside intro text (a fee, a note) follow their paragraph's font instead of switching mid-sentence. */
:is(.lede, .section-lede, .ts-sub, .fine, .why) :is(span, b, strong, em, a) { font-family: inherit !important; font-size: inherit !important; }
h1, h2, h3, legend, summary, .display, .logo-word, .t { color: var(--ink) !important; font-weight: 700 !important; letter-spacing: .02em; }
h1 { text-transform: uppercase; letter-spacing: .01em; }
h2 { text-transform: uppercase; }
a { color: var(--ink) !important; text-decoration: underline dotted color-mix(in srgb, var(--ink) 45%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--red) !important; text-decoration-color: var(--red); }
::selection { background: var(--red); color: var(--paper); }
.muted, .sub, .n, .note, .fine, .est, .k, dt, th { color: var(--ink-3) !important; }

/* ---------- the "heads up" strip: printed at the top of the receipt ---------- */
.topbar {
  background: var(--paper) !important; color: var(--ink-2) !important; border-bottom: 2px dashed var(--rule) !important;
  font-size: 12px !important; letter-spacing: .03em;
}
.topbar b { color: var(--red) !important; text-transform: uppercase; }
.topbar a { color: var(--ink) !important; }

/* ---------- header / nav ---------- */
nav, header { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* The landing page menu stays on top while scrolling: give it the page colour so text scrolls under it, not through it. */
body > nav { background: var(--paper) !important; }
nav { border-bottom: 2px dashed var(--rule) !important; }
header { border-bottom: 2px dashed var(--rule); padding-bottom: 16px; }
header nav { border-bottom: 0 !important; }
nav .links a:not(.btn), header nav a:not(.btn), .mainnav a {
  color: var(--ink) !important; text-transform: uppercase; font-size: 13px !important; font-weight: 600; letter-spacing: .06em; text-decoration: none;
}
nav .links a:not(.btn):hover, header nav a:not(.btn):hover, .mainnav a:hover { color: var(--red) !important; }
header nav a[aria-current="page"] { color: var(--red) !important; text-decoration: underline !important; text-decoration-style: solid !important; text-decoration-color: var(--red) !important; text-decoration-thickness: 2px !important; }

/* Brand: the old neon sign becomes a red price tag + wordmark. */
.brand svg, a.logo svg { display: none !important; }
.brand, a.logo { display: inline-flex !important; align-items: center; gap: 10px; color: var(--ink) !important; text-decoration: none !important; text-shadow: none !important;
  font-size: 22px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .02em; }
.brand h1, .logo-word { font-size: 22px !important; margin: 0 !important; color: var(--ink) !important; text-transform: uppercase; }
.brand::before, a.logo::before {
  content: "99¢"; display: inline-grid; place-items: center; height: 30px; padding: 0 10px 0 16px;
  background: var(--red); color: var(--paper); font: 700 14px var(--mono); letter-spacing: .02em;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
  -webkit-mask: radial-gradient(circle 3px at 9px 50%, transparent 98%, #000); mask: radial-gradient(circle 3px at 9px 50%, transparent 98%, #000);
  transform: rotate(-4deg);
}
.badge { background: var(--paper) !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important;
  text-transform: uppercase; font-size: 11px !important; letter-spacing: .08em; }

/* ---------- boxes: dashed receipt panels ---------- */
.card, .chunk, .panel, .tile, .stat, .tok, .nft, .nft-card, .tag-card, .loop, .final, .g, details, .receipt-side, .yield-panel, .mine-strip, .stat-tiles .tile {
  background: var(--paper) !important; border: 1.5px dashed var(--rule) !important; border-radius: 0 !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.chunk:hover, .nft-card:hover { border-color: var(--ink) !important; border-style: solid !important; box-shadow: none !important; }
.tile.hl, .tile.big, .metric.price, .yield-panel, .mine-strip, .final, .tag-card {
  border: 2px solid var(--ink) !important;
}
.mine-strip { border-color: var(--red) !important; }
.tag-card::before, .step::before, summary::after { box-shadow: none !important; }
.tile .v, .stat .v, .metric .v, .yield-panel .v, .tile.big .v, .tile.hl .v, .metric.price .v { color: var(--ink) !important; text-shadow: none !important; }
.tile.big .v, .tile.hl .v, .metric.price .v, .yield-panel .v, .nft-card .earned, .nft .ready, .yield .yv, .yield .apr, .calc b { color: var(--red) !important; }
.stats .stat .v { color: var(--ink) !important; }
.stats .stat:nth-child(2) .v { color: var(--red) !important; }

/* ---------- buttons: ink boxes; primary is a red price tag ---------- */
.btn, button.btn, .gate-ok, .seg button {
  font-family: var(--mono) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em;
  background: var(--paper) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--ink) !important; text-shadow: none !important; transition: transform .08s, box-shadow .08s;
}
.btn:hover:not(:disabled), .gate-ok:hover { background: var(--ink) !important; color: var(--paper) !important; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--red) !important; text-decoration: none !important; }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink) !important; }
.btn.primary, .gate-ok {
  background: var(--red) !important; color: var(--paper) !important; border-color: var(--red-ink) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}
.btn.primary:hover:not(:disabled), .gate-ok:hover { background: var(--red-ink) !important; color: var(--paper) !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.btn:disabled { opacity: .4 !important; box-shadow: none !important; }
.seg { border: 2px solid var(--ink) !important; border-radius: 0 !important; }
.seg button { box-shadow: none !important; border: 0 !important; }
.seg button[aria-pressed="true"] { background: var(--ink) !important; color: var(--paper) !important; }

/* ---------- forms ---------- */
input, select, textarea, .search input, .toolbar input, .toolbar select, .calc input {
  background: var(--paper) !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; border-radius: 0 !important;
  box-shadow: none !important; font-family: var(--mono) !important;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--red) !important; outline-offset: 1px; box-shadow: none !important; }
select option { background: var(--paper) !important; color: var(--ink) !important; }
input[type=range] { accent-color: var(--red); border: 0 !important; background: transparent !important; }
fieldset { border: 1.5px dashed var(--rule) !important; border-radius: 0 !important; }
legend { color: var(--red) !important; text-transform: uppercase; font-size: 13px !important; letter-spacing: .06em; }
.holders-share, .creator-share, .fixed-pct { background: var(--paper) !important; box-shadow: none !important; border-radius: 0 !important; border: 2px solid var(--ink) !important; color: var(--ink) !important; }
.creator-share, .fixed-pct { color: var(--red) !important; border-color: var(--red) !important; }
.holders-share.bad { color: var(--red) !important; border-color: var(--red) !important; background: color-mix(in srgb, var(--red) 8%, transparent) !important; }

/* ---------- tables: dotted receipt lines ---------- */
table th, table td { border-bottom: 1px dashed var(--rule-soft) !important; }
table th { text-transform: uppercase; font-size: 11px !important; letter-spacing: .06em; }
tr.me td, .holders tr.me td { background: color-mix(in srgb, var(--red) 10%, transparent) !important; }
.lbl, .chip, .kind, .tag, .pill, .sticker, .stamp {
  background: var(--paper) !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; border-radius: 0 !important;
  box-shadow: none !important; text-transform: uppercase; letter-spacing: .05em;
}
.pill.ok, .stamp { color: var(--good) !important; border-color: var(--good) !important; }
.pill.warn { color: var(--amber) !important; border-color: var(--amber) !important; }
.sticker { color: var(--red) !important; border-color: var(--red) !important; transform: rotate(-2deg); }
.sticker .pulse { background: var(--red) !important; box-shadow: none !important; }
.st.earning, .chg.up { color: var(--good) !important; }
.chg.up { border-color: var(--good) !important; }
.chg.down { color: var(--red) !important; border-color: var(--red) !important; }
.st.below-minimum { color: var(--amber) !important; }

/* ---------- things that were black glass ---------- */
.art, .logo:not(a), .nft .thumb, .nft-card .thumb, .tok .logo {
  background: var(--paper-2) !important; border: 1.5px dashed var(--rule) !important; border-radius: 0 !important; box-shadow: none !important;
}
.tok .logo { color: var(--red) !important; font-weight: 700; }
.tip, .ctip, .wallet-menu, .toast {
  background: var(--paper) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 25%, transparent) !important;
}
.toast { border-left: 8px solid var(--ink) !important; }
.toast.success { border-left-color: var(--good) !important; }
.toast.error { border-left-color: var(--red) !important; }
.wallet-menu button:hover { background: var(--paper-2) !important; }
.bar, .split { border-radius: 0 !important; box-shadow: none !important; }
.bar > div, .bar span, .split span { box-shadow: none !important; border-radius: 0 !important; }
.sw, .legend i, .brk i { box-shadow: none !important; border-radius: 0 !important; }
.share { background: var(--rule-soft) !important; border-radius: 0 !important; }
.share span { background: var(--s-hold) !important; }
svg.chart text, .chart-box svg text { fill: var(--ink-3) !important; font-family: var(--mono) !important; }
.yield { background: var(--paper) !important; border: 1.5px dashed var(--red) !important; border-radius: 0 !important; color: var(--ink-2) !important; }
.yield.muted { border-color: var(--rule) !important; }

/* ---------- landing specifics ---------- */
.hero h1 .hl, h1 .hl { color: var(--red) !important; }
.receipt { transform: rotate(-1deg); border: 1.5px solid var(--rule) !important; box-shadow: 6px 8px 0 color-mix(in srgb, var(--ink) 12%, transparent) !important; }
.receipt::after { background: radial-gradient(circle, var(--paper) 3.5px, transparent 4px) 0 0/16px 10px repeat-x !important; }
.receipt .tax b { color: var(--red) !important; }
.loop { background: var(--paper) !important; }
.loop b { color: var(--red) !important; }
.arrow { color: var(--red) !important; }
.g .ic, .step::before, summary::after { color: var(--red) !important; border: 2px solid var(--red) !important; border-radius: 0 !important; background: var(--paper) !important; }
.final { background: var(--paper) !important; }
.final .big-tag { display: none !important; }
.disclaimer { background: var(--paper-2) !important; border: 1.5px dashed var(--rule) !important; border-radius: 0 !important; color: var(--ink-2) !important; }
footer { border-top: 2px dashed var(--rule) !important; color: var(--ink-3) !important; }
.neon-sign { animation: none !important; }

/* ---------- launch app specifics ---------- */
.dot { border: 2px solid var(--ink) !important; background: var(--paper) !important; color: var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; }
.steps li.done .dot { background: var(--ink) !important; color: var(--paper) !important; }
.steps li.active .dot { border-color: var(--red) !important; color: var(--red) !important; }
.steps li.error .dot { background: var(--red) !important; border-color: var(--red) !important; color: var(--paper) !important; }

/* ---------- entry disclaimer: a printed notice ---------- */
.gate { background: color-mix(in srgb, var(--desk) 92%, transparent) !important; backdrop-filter: none !important; }
.gate-box { background: var(--paper) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; box-shadow: 8px 8px 0 color-mix(in srgb, var(--ink) 20%, transparent) !important; }
.gate-box h2 { color: var(--ink) !important; border-bottom: 2px dashed var(--rule); padding-bottom: 10px; }
.gate-box ul, .gate-box ul b { color: var(--ink) !important; }
.gate-box .gate-leave { color: var(--ink-3) !important; }

@media (max-width: 1200px) { body { box-shadow: none !important; } }

/* Theme fonts are wider than the old one: let the hero headline wrap so the calculator keeps its width. */
h1 .line { white-space: normal !important; }
.hero > * { min-width: 0; }
/* Wider theme fonts: let every header menu wrap instead of pushing the page sideways. */
header nav { flex-wrap: wrap !important; row-gap: 8px !important; }

/* ---------- theme picker (src/web/theme.js) ---------- */
/* ---------- phone tables (src/web/theme.js labelTables) ---------- */
@media (max-width: 640px) {
  table[data-stack], table[data-stack] > tbody, table[data-stack] > thead { display: block; width: 100%; min-width: 0 !important; }
  table[data-stack] tr.stack-head { display: none !important; }
  table[data-stack] tr { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 12px 2px; border-bottom: 1px dashed var(--rule); }
  table[data-stack] td { display: block !important; padding: 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; min-width: 0; overflow-wrap: anywhere; }
  table[data-stack] td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1px; }
  table[data-stack] td.stack-full { grid-column: 1 / -1; font-weight: 600; }
  table[data-stack] td.stack-hide { display: none !important; }
  :has(> table[data-stack]) { overflow-x: visible !important; }
}

/* ---------- shared empty state (src/web/theme.js siteEmpty) ---------- */
.site-empty { text-align: center; padding: 36px 18px; border: 2px dashed var(--rule); margin: 8px 0 24px; }
.site-empty > p:first-child { font-size: 18px; margin: 0 0 16px; color: var(--ink); }
.site-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.site-empty-note { margin: 14px 0 0; font-size: 13px; color: var(--ink-3); }

/* ---------- wrong-network hint (src/web/wallet.js) ---------- */
.net-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 auto; padding: 10px 44px 10px 16px; position: relative;
  background: color-mix(in srgb, var(--red) 10%, var(--paper)); border: 2px solid var(--red); color: var(--ink); font-size: 14px; max-width: 1180px; }
.net-warn a { color: var(--red) !important; font-weight: 700; }
.net-warn-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 16px; cursor: pointer; color: var(--ink); padding: 4px 8px; }

/* ---------- phone menu (src/web/theme.js) ---------- */
.mnav-btn { display: none; }
@media (max-width: 860px) {
  .has-mnav { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; }
  .mnav-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; order: 2; padding: 7px 12px; font: inherit; font-size: 14px !important; font-weight: 700;
    background: transparent; color: var(--ink); border: 1.5px solid var(--ink); cursor: pointer; }
  .mnav-host { order: 3; margin-left: 0 !important; }
  .mnav-host:not(.open) > :not(.btn.primary):not(.wallet) { display: none !important; }
  .mnav-host.open { flex-basis: 100%; display: flex !important; flex-direction: column; align-items: stretch !important; gap: 2px !important; padding: 8px 0 4px; border-top: 1.5px dashed var(--rule); }
  .mnav-host.open > a:not(.btn) { display: block !important; padding: 10px 4px !important; border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
  .mnav-host.open > .btn, .mnav-host.open > .net-toggle, .mnav-host.open > .theme-picker, .mnav-host.open > .site-prefs { align-self: flex-start; margin-top: 8px; }
  .has-mnav > .brand, .has-mnav > a.logo, .has-mnav > .has-logo { order: 1; }
  .has-mnav > :not(.mnav-btn):not(.mnav-host):not(.brand):not(.logo):not(.has-logo) { order: 4; }
}

/* ---------- Mainnet / Testnet toggle (src/web/theme.js) ---------- */
.net-toggle { display: inline-flex; border: 1.5px solid var(--rule); font-size: 13px; line-height: 1.2; white-space: nowrap; }
/* header nav a:not(.btn) rules in the themes are stronger than a plain class, so match them. */
.net-toggle > *, header nav .net-toggle > a:not(.btn), nav .links .net-toggle > a:not(.btn), .mainnav .net-toggle > a {
  padding: 6px 10px; color: var(--ink-3) !important; text-decoration: none !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; }
.net-toggle > a:hover { color: var(--ink) !important; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.net-toggle > [aria-current] { color: var(--paper) !important; background: var(--ink); }
.net-toggle > .net-testnet[aria-current] { background: var(--red); }
.net-toggle > [aria-disabled] { opacity: .45; }
.theme-picker { position: relative; }
.theme-picker summary {
  list-style: none; cursor: pointer; display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 10px !important;
  border: 1.5px solid var(--rule); color: var(--ink) !important; font-size: 13px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: 0 !important; line-height: 1.2 !important; user-select: none;
}
.theme-picker summary::-webkit-details-marker { display: none; }
.theme-picker summary::after { content: none !important; display: none !important; }
.theme-picker[open] summary { border-color: var(--red); color: var(--red) !important; }
.tp-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; width: 250px; padding: 10px;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 25%, transparent);
  display: grid; gap: 6px; text-align: left;
}
.tp-h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-top: 4px; }
.tp-opt { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px; background: transparent; color: var(--ink); border: 1.5px solid transparent; cursor: pointer; text-align: left; font: inherit; }
.tp-opt:hover { border-color: var(--rule); }
.tp-opt[aria-pressed="true"] { border-color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); }
.tp-opt b { display: block; font-size: 13px; }
.tp-opt small { display: block; font-size: 11px; color: var(--ink-3); }
.tp-sw { flex: none; width: 28px; height: 28px; border: 1.5px solid var(--rule); }
.tp-sw-receipt { background: linear-gradient(135deg, #fbf8ef 60%, #c8102e 60%); }
.tp-sw-arcade { background: repeating-linear-gradient(0deg, #170d30 0 3px, #221444 3px 4px), #170d30; box-shadow: inset -9px -9px 0 #ffd23f; }
.tp-sw-lunchbag { background: linear-gradient(90deg, #c9a06a 48%, #b88c55 50%, #c9a06a 52%); box-shadow: inset 0 -9px 0 #ff8a1f; border-radius: 3px; }
.tp-sw-space { background: radial-gradient(1px 1px at 30% 30%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 70% 60%, #fff 60%, transparent 61%), radial-gradient(circle at 75% 25%, #7c5aff 0 5px, transparent 6px), #0a0e24; box-shadow: inset -9px -9px 0 #ff8a3d; border-radius: 50%; }
.tp-sw-desert { background: radial-gradient(ellipse 120% 40% at 30% 100%, #d9a066 60%, transparent 61%), radial-gradient(circle at 70% 35%, #ffeab0 0 4px, transparent 5px), linear-gradient(#f7c77a, #ee8a5a 60%, #c65f55); }
.tp-sw-casino { background: radial-gradient(circle, #0f4a30 55%, transparent 56%), #07130d; border: 3px dashed #e8c15a !important; border-radius: 50%; }
.tp-sw-notebook { background: repeating-linear-gradient(to bottom, #fbfaf2 0 5px, #9fbde6 5px 6px); box-shadow: inset 5px 0 0 -3px #e66e6e, inset -12px -12px 0 #fff27a; }
.tp-modes { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--ink); }
.tp-modes button { padding: 7px 0; background: transparent; color: var(--ink); border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.tp-modes button + button { border-left: 1.5px solid var(--ink); }
.tp-modes button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tp-modes button:disabled { opacity: .4; cursor: not-allowed; }
.tp-note { font-size: 11px; color: var(--ink-3); }
/* Language menu (src/web/theme.js): the theme menu's look, with the language code as the swatch.
   It shares a box with the theme menu so the two wrap together. */
.site-prefs { display: inline-flex; align-items: center; gap: 8px; }
.lang-picker .tp-menu { width: 180px; }
.tp-sw-lang { display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
@media (max-width: 520px) { .tp-menu { right: auto; left: 0; } }
/* The home page's top bar: let it grow and wrap (theme fonts + the Theme button). */
nav .wrap { height: auto !important; min-height: 70px; flex-wrap: wrap; row-gap: 8px; padding-top: 8px; padding-bottom: 8px; }
nav .links { flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; }
/* The picker is a <details>, but it isn't a FAQ panel. */
details.theme-picker { border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; }
details.theme-picker > summary { font-family: var(--mono) !important; font-size: 13px !important; padding: 6px 10px !important; }

/* ---------- live countdowns (src/web/countdown.js) ---------- */
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--red); white-space: nowrap; }
.countdown.done { color: var(--good); }
.cd-box { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 8px 0 4px; padding: 8px 10px;
  border: 1.5px dashed var(--red); background: color-mix(in srgb, var(--red) 6%, transparent); }
.cd-box .countdown { font-size: 20px; }
.cd-box .cd-label { font-size: 12px; color: var(--ink-3); }

/* ---------- the 99 + Tax logo (added to the header by theme.js) ---------- */
.brand.has-logo::before, a.logo.has-logo::before { content: none !important; display: none !important; }
.brand-logo { height: 44px; width: auto; display: block; flex: none; }
/* The logo already says "99¢ + TAX", so the text beside it stays for screen readers only. */
a.has-logo { gap: 0 !important; font-size: 0 !important; }
a.has-logo > :not(.brand-logo) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) { .brand-logo { height: 38px; } }


/* ---------- the notebook page: ruled lines, red margin, punched holes ---------- */
html { background: var(--desk) !important; }
body {
  background-color: var(--page) !important;
  background-image:
    radial-gradient(circle at 26px 50%, var(--hole) 0 9px, rgb(0 0 0 / .18) 9px 10px, transparent 10.5px),
    linear-gradient(90deg, transparent 58px, var(--margin) 58px 60px, transparent 60px),
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--ruled) 31px 32px) !important;
  background-size: 52px 120px, 100% 100%, 100% 32px !important;
  background-repeat: repeat-y, no-repeat, repeat !important;
  background-position: 0 40px, 0 0, 0 0 !important;
  padding-left: 44px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 24px 60px -24px rgb(0 0 0 / .45) !important;
}
body::after { display: none !important; }

/* ---------- handwriting ---------- */
h1, h2, h3, legend, summary, .display, .logo-word, .brand, a.logo, .stats-card h3, .panel h3 {
  font-family: var(--title) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: .01em !important;
}
h1 { font-size: clamp(34px, 6vw, 60px) !important; line-height: 1.1 !important; }
h2 { font-size: clamp(26px, 3.4vw, 36px) !important; }
h3, summary { font-size: 22px !important; }
.stats-card h3, .panel h3 { font-size: 19px !important; }
.lede, .section-lede, .ts-sub, .fine, .note, .why, .tok .sub, .tok > .sub { font-family: var(--hand) !important; font-size: 19px !important; line-height: 1.35 !important; }
.fine, .note, .why { font-size: 17px !important; }
/* Highlighter on the key words. */
h1 .hl, .hero h1 .hl { color: var(--ink) !important; background: linear-gradient(transparent 55%, var(--highlight) 55% 92%, transparent 92%); padding: 0 4px; }
h2 { background: linear-gradient(transparent 62%, var(--highlight) 62% 90%, transparent 90%); display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tile .v, .stat .v, .metric .v, .yield-panel .v, .nft-card .earned, .nft .ready, .yield .yv, .calc b { font-family: var(--title) !important; font-weight: 400 !important; }
a { color: var(--red) !important; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--red) 40%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--red-ink) !important; }
nav .links a:not(.btn), header nav a:not(.btn), .mainnav a { color: var(--ink) !important; text-decoration: none !important; font-weight: 700; text-transform: none; font-size: 15px !important; letter-spacing: 0; }
header nav a[aria-current="page"] { color: var(--red) !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; }

/* ---------- header, brand ---------- */
.topbar { background: var(--paper) !important; border-bottom: 1px solid var(--rule-soft) !important; }
nav, header { border-bottom: 2px solid var(--ruled) !important; }
header nav { border-bottom: 0 !important; }
.brand, a.logo { font-size: 28px !important; color: var(--ink) !important; }
.brand h1, .logo-word { font-size: 28px !important; }
/* A tiny yellow sticky note with "99¢" on it. */
.brand::before, a.logo::before {
  content: "99¢"; clip-path: none !important; -webkit-mask: none !important; mask: none !important;
  width: 44px; height: 40px !important; padding: 0 !important;
  background: var(--note-yellow) !important; color: var(--note-ink) !important; font: 400 17px var(--title) !important;
  box-shadow: 2px 3px 4px rgb(0 0 0 / .2) !important; transform: rotate(-6deg) !important;
}

/* ---------- panels: clean sheets clipped onto the page ---------- */
.card, .chunk, .panel, .tile, .stat, .tag-card, .loop, .final, .g, details, .receipt-side, .yield-panel, .mine-strip, .stat-tiles .tile, .disclaimer {
  background: var(--paper) !important; border: 1px solid var(--rule-soft) !important; border-radius: 3px !important;
  box-shadow: 0 1px 0 var(--rule-soft), 2px 4px 10px -4px rgb(0 0 0 / .25) !important;
}
.tile.hl, .tile.big, .metric.price, .yield-panel, .final, .tag-card { border: 2px solid var(--red) !important; }
.mine-strip { border: 2px dashed var(--red) !important; }
.chunk:hover { border-color: var(--red) !important; }

/* ---------- sticky notes: token cards and NFT cards ---------- */
.tok, .nft-card, .nft {
  --note: var(--note-yellow);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--note) 88%, #000) 0 22px, var(--note) 22px) !important;
  color: var(--note-ink) !important; border: 0 !important; border-radius: 0 0 2px 2px !important;
  box-shadow: 0 1px 1px rgb(0 0 0 / .12), 3px 8px 14px -6px rgb(0 0 0 / .35) !important;
  position: relative; overflow: visible !important; transition: transform .15s;
}
.tok:nth-child(4n+2), .nft-card:nth-child(4n+2), .nft:nth-child(4n+2) { --note: var(--note-pink); }
.tok:nth-child(4n+3), .nft-card:nth-child(4n+3), .nft:nth-child(4n+3) { --note: var(--note-green); }
.tok:nth-child(4n+4), .nft-card:nth-child(4n+4), .nft:nth-child(4n+4) { --note: var(--note-blue); }
.tok:nth-child(odd), .nft-card:nth-child(odd), .nft:nth-child(odd) { transform: rotate(-1.2deg); }
.tok:nth-child(even), .nft-card:nth-child(even), .nft:nth-child(even) { transform: rotate(1deg); }
.tok:hover, .nft-card:hover, .nft:hover { transform: rotate(0deg) translateY(-3px); }
/* Peeled bottom-right corner. */
.tok::after, .nft-card::after, .nft::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px;
  background: linear-gradient(315deg, var(--page) 0 45%, color-mix(in srgb, var(--note) 70%, #000) 50%, var(--note) 56%);
  box-shadow: -1px -1px 2px rgb(0 0 0 / .12);
}
/* Everything on a note is written in the note's ink, whatever the mode. */
.tok *, .nft-card *, .nft * { color: var(--note-ink); }
.tok a, .nft-card a, .nft a { color: #1a3fae !important; }
.tok :is(.sub, .muted, .n, .note, .k, dt, th, .legend, .legend span), .nft-card :is(.line, .muted), .nft :is(.line, .muted) { color: #3c4763 !important; }
.tok :is(dd, h2, b, strong), .nft-card :is(h3, b), .nft :is(h3, b) { color: var(--note-ink) !important; }
.tok h2, .nft-card h3, .nft h3 { font-family: var(--title) !important; font-size: 24px !important; line-height: 1.15 !important; color: var(--note-ink) !important; background: none !important; display: block; }
.tok .logo, .nft-card .thumb, .nft .thumb { background: rgb(255 255 255 / .55) !important; border: 1px solid rgb(31 42 68 / .15) !important; border-radius: 3px !important; }
.tok .tag, .nft-card .mine { background: rgb(255 255 255 / .6) !important; color: var(--note-ink) !important; border-color: var(--note-ink) !important; }
.tok .yield { background: rgb(255 255 255 / .55) !important; border: 1.5px solid #1d4ed8 !important; border-radius: 3px !important; }
.tok .yield .yv, .tok .yield .apr, .nft-card .earned, .nft .ready { color: #1d4ed8 !important; }
.tok .btn, .nft .btn { background: rgb(255 255 255 / .75) !important; color: var(--note-ink) !important; border-color: var(--note-ink) !important; }
.tok .btn.primary, .nft .btn.primary { background: #1d4ed8 !important; color: #fff !important; border-color: #1a3fae !important; }

/* ---------- buttons: ballpoint ink ---------- */
.btn, .gate-ok, .seg button {
  font-family: var(--mono) !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: 0 !important;
  background: var(--paper) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; border-radius: 6px !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
}
.btn:hover:not(:disabled), .gate-ok:hover { background: var(--highlight) !important; color: var(--ink) !important; }
.btn.primary, .gate-ok { background: var(--red) !important; color: var(--paper) !important; border-color: var(--red-ink) !important; box-shadow: 2px 2px 0 var(--ink) !important; }
.btn.primary:hover:not(:disabled), .gate-ok:hover { background: var(--red-ink) !important; color: var(--paper) !important; }
.seg { border-radius: 6px !important; overflow: hidden; }
.seg button[aria-pressed="true"] { background: var(--ink) !important; color: var(--paper) !important; }

/* ---------- small things ---------- */
input, select, textarea, .search input, .toolbar input, .toolbar select, .calc input {
  background: var(--paper) !important; border: 0 !important; border-bottom: 2px solid var(--red) !important; border-radius: 0 !important; font-family: var(--hand) !important; font-size: 17px !important;
}
.lbl, .chip, .kind, .tag, .pill, .badge, .stamp { border-radius: 999px !important; text-transform: none !important; font-weight: 700; }
.sticker { background: var(--note-yellow) !important; color: var(--note-ink) !important; border: 0 !important; border-radius: 0 !important; transform: rotate(-3deg); box-shadow: 2px 3px 4px rgb(0 0 0 / .18) !important; }
.sticker .pulse { background: #c8102e !important; }
.tip, .ctip, .wallet-menu, .toast { border-radius: 4px !important; border: 1.5px solid var(--ink) !important; background: var(--paper) !important; }
.gate-box { border-radius: 4px !important; }
.g .ic, .step::before, summary::after, .dot { border-radius: 50% !important; }
.receipt { transform: rotate(-1.5deg); }
@media (max-width: 520px) { body { padding-left: 30px; background-position: -8px 40px, -18px 0, 0 0 !important; } }
/* Notes stay light in dark mode, so they keep the paper palette (3:1+ on every note colour) and dark ink. */
.tok, .nft-card, .nft { --holders: #c8323c; --liquidity: #2e6bbf; --creator: #3f8a2f; --burn: #6f6a5f; --s-hold: #c8323c; }
.tok .yield, .tok .yield * { color: #3c4763 !important; }
.tok .yield .yv, .tok .yield .apr { color: #1d4ed8 !important; }