/* Quantinals: the Quantus look (near-black, warm off-white, orange, Geist + Geist Mono, square
   edges, hairline grids, orange ASCII) around a classic ordinals mint console. */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.a369fcf562.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.fba8f577f3.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/Archivo-Variable.8f704806db.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

[hidden] { display: none !important; }
:root {
  --bg: #0e0e0e;
  --card: #111111;
  --well: #0a0a0a;
  --line: #262626;
  --line2: #333333;
  --ink: #e8e6e0;
  --mute: rgba(232, 230, 224, 0.55);
  --dim: rgba(232, 230, 224, 0.32);
  --accent: #ff6b35;
  --accent-rgb: 255, 107, 53;
  --accent-hover: #ff7a48;
  --accent-ink: #0e0e0e;
  --ink-rgb: 232, 230, 224;
  --bg-rgb: 14, 14, 14;
  --violet: #f2d48f; /* the second accent (champagne gold): marks what is private */
  --violet-rgb: 242, 212, 143;
  --ok: #4ade80;
  --bad: #ff5a4e;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 48px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- top bar ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); height: 72px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.08); position: fixed; top: 0; left: 0; right: 0; background: rgba(var(--bg-rgb), 0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 5; animation: drop 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
body { padding-top: 72px; }
.mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 19px; letter-spacing: -0.02em; text-decoration: none; color: #fff; }
.mark .glyph { font: 500 15px var(--mono); color: var(--accent); letter-spacing: -0.08em; }
.mark.sm { font-size: 14px; }
.topnav { display: flex; gap: 22px; align-items: center; }
.topnav .tab { background: none; border: 0; padding: 6px 0; font: 500 13.5px var(--sans); letter-spacing: -0.005em; color: var(--mute); text-decoration: none; }
.topnav .tab:hover { color: var(--ink); }
.topnav .tab.on { color: #fff; }
.topnav .tab i { font: 500 9.5px var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-left: 6px; border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: 999px; padding: 2px 6px; vertical-align: 1px; }
.net { display: none; } /* network status is tracked in code, not shown */
.net.live { color: var(--mute); }
.net.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 7px; vertical-align: 1px; }
.chip { border: 1px solid rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.08); color: var(--accent); padding: 9px 16px; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: 0.1em; border-radius: 999px; }
.chip.on { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 720px) { .top { height: 60px; gap: 8px; } body { padding-top: 60px; } .hero { min-height: calc(100svh - 60px); } .mark { font-size: 16px; gap: 6px; } .topnav { gap: 10px; min-width: 0; } .topnav .tab { font-size: 10px; letter-spacing: 0.1em; } .net { display: none; } .topnav .tab i { display: none; } .chip { padding: 7px 9px; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; } }

/* ---------- hero ---------- */
main { position: relative; padding: 0 var(--gutter) 64px; max-width: 1240px; margin: 0 auto; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.in { animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--d, 0s); animation-play-state: paused; }
body.booted .in, body.booted .top, body.mintpage .top { animation-play-state: running; }
.top { animation-play-state: paused; }
/* boot screen: the inscription writes itself out under our mark, then the page rises in */
.boot { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; place-items: center; padding: 24px; transition: opacity 0.6s ease; }
.bootbox { width: min(560px, 100%); text-align: center; }
.bootmark { font: 500 44px var(--mono); color: var(--accent); letter-spacing: -0.08em; margin-bottom: 22px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }
.bootjson { margin: 0; min-height: 1.8em; font: 500 13px/1.8 var(--mono); color: var(--ink); white-space: pre-wrap; word-break: break-all; }
.bootjson .op { color: var(--accent); }
.bootjson .cur { display: inline-block; width: 8px; height: 13px; background: var(--accent); vertical-align: -2px; animation: blink 0.8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.bootrail { height: 2px; background: #1e1e1e; margin: 22px auto 14px; width: min(320px, 80%); overflow: hidden; }
.bootrail i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.12s linear; }
.bootstatus { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.22em; color: var(--mute); min-height: 1.4em; }
.bootstatus b { color: var(--ink); font-weight: 500; }
.boot.out { opacity: 0; pointer-events: none; }
.d1 { --d: 0.15s; } .d2 { --d: 0.3s; } .d3 { --d: 0.5s; } .d4 { --d: 0.65s; }
.mt { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .in, .top, .wave { animation: none !important; } }
/* ---------- landing hero ---------- */
.landing { max-width: none; padding: 0; }
.hero { position: relative; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.wave { position: absolute; inset: 0; margin: 0; font: 12px/1.22 var(--mono); color: rgba(var(--accent-rgb), 0.34); pointer-events: none; user-select: none; white-space: pre; overflow: hidden; animation: fade 1.6s ease both; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 55% at 50% 55%, rgba(var(--bg-rgb), 0.9), rgba(var(--bg-rgb), 0.3) 60%, transparent 100%); }
.herobody { position: relative; z-index: 1; align-self: center; text-align: center; max-width: 1100px; width: 100%; margin: 0 auto; padding: 120px var(--gutter) 80px; }
.kicker { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.24em; color: var(--accent); margin: 0 0 28px; }
.headline { font-size: clamp(40px, 5.2vw, 84px); line-height: 1.02; margin: 0 auto; color: #fff; font-family: "Archivo", var(--sans); font-weight: 640; letter-spacing: -0.03em; }
.headline em { font-style: normal; color: var(--accent); }
@media (min-width: 721px) { .headline span, .headline em { white-space: nowrap; } }
.lede { font-size: clamp(17px, 1.5vw, 21px); color: var(--mute); max-width: 44ch; line-height: 1.45; margin: 28px auto 0; letter-spacing: 0.005em; }
.lede em { font-style: normal; color: var(--ink); }
.lede.live { font: 500 13px/1.9 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: #fff; margin-top: 34px; max-width: 60ch; }
.lede.live .q { color: var(--mute); }
.cta { display: flex; gap: 12px; margin-top: 38px; flex-wrap: wrap; justify-content: center; }
.btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 14px 26px; font: 600 14px var(--sans); letter-spacing: -0.01em; text-decoration: none; border-radius: 999px; border: 1px solid rgba(var(--ink-rgb), 0.18); color: var(--ink); background: rgba(var(--ink-rgb), 0.06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; }
.btn:hover { background: rgba(var(--ink-rgb), 0.12); transform: translateY(-1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 12px 34px -12px rgba(var(--accent-rgb), 0.7); }
.btn.primary:hover { background: var(--accent-hover); box-shadow: 0 16px 40px -12px rgba(var(--accent-rgb), 0.8); }
.btn.primary::after { content: "→"; font-weight: 500; }
.strip { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; padding: 14px var(--gutter); border-top: 1px solid var(--line); font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--dim); background: rgba(var(--bg-rgb), 0.7); }
.strip b { color: var(--ink); font-weight: 500; margin-left: 6px; }
.strip i { color: var(--accent); font-style: normal; margin-right: 6px; }
.landing .foot { max-width: 1240px; margin: 0 auto; padding: 18px var(--gutter) 40px; border-top: 0; }
@media (max-width: 720px) { .herobody { padding: 110px var(--gutter) 40px; } .headline { font-size: clamp(38px, 11.5vw, 72px); } .cta .btn { flex: 1 1 100%; justify-content: center; } }

/* ---------- trade page ---------- */
body.tradepage .top { animation-play-state: running; }
.hero.soon { grid-template-rows: 1fr; }
.hero.soon .herobody { padding: 80px var(--gutter) 120px; }
.hero.soon .headline { font-size: clamp(48px, 7vw, 112px); }
.hero.soon .cta { margin-top: 40px; }

/* ---------- mint page ---------- */
body.mintpage { background: #0b0b0b radial-gradient(70% 45% at 15% 0%, rgba(var(--accent-rgb), 0.1), transparent 60%); }
.bgfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(var(--ink-rgb), 0.07) 1px, transparent 1.2px); background-size: 24px 24px; }
.bgfield::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 40%, transparent 30%, rgba(11, 11, 11, 0.85) 100%); }
.wave.bg { position: absolute; inset: 0; animation: fade 1.2s ease both; color: rgba(var(--accent-rgb), 0.22); mask-image: radial-gradient(70% 70% at 60% 45%, #000 20%, transparent 100%); -webkit-mask-image: radial-gradient(70% 70% at 60% 45%, #000 20%, transparent 100%); }
.mintmain { position: relative; z-index: 1; max-width: 1480px; padding-bottom: 28px; display: flex; flex-direction: column; min-height: calc(100svh - 72px); }
.mintmain > .console { margin-bottom: 56px; }
@media (max-width: 720px) { .mintmain { min-height: calc(100svh - 60px); } }
.mhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: clamp(28px, 4.5vw, 56px) 0 24px; flex-wrap: wrap; }
.mtitle .kicker { margin-bottom: 12px; }
.ticker.big { font-size: clamp(48px, 6vw, 84px); line-height: 0.95; letter-spacing: -0.045em; margin: 0; color: #fff; font-weight: 500; font-family: "Archivo", var(--sans); }
.mmeta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-bottom: 14px; }
.lede.sm.mute { color: var(--mute); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.16em; margin: 0; text-align: right; }
@media (max-width: 720px) { .mmeta { align-items: flex-start; } .lede.sm.mute { text-align: left; } }
.stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.stack .side { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.stack .side .feed { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
.feedscroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 8px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.mintpage .feedscroll td:first-child { padding-left: 12px; } /* the side padding lives in the rows, so a highlighted row has room inside */
.mintpage .feedscroll td:last-child { padding-right: 12px; }
.mintpage .feedscroll td + td { padding-left: 8px; } /* a minimum gap: neighbouring numbers never run together ("×10" "10,000") */
@media (max-width: 400px) { .mintpage .feedscroll td:nth-child(4) { display: none; } } /* small phones: the mint count repeats the amount */
.feedscroll::-webkit-scrollbar { width: 6px; }
.feedscroll::-webkit-scrollbar-thumb { background: #333; }
@media (max-width: 920px) { .feedscroll { max-height: 56vh; } }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute); }
.pgbtns { display: inline-flex; align-items: center; gap: 10px; }
.pgbtns[hidden] { display: none; }
.pgbtns b { color: var(--ink); font-weight: 500; }
.pg { width: 28px; height: 28px; border: 1px solid var(--line2); background: var(--well); color: var(--ink); font: 500 16px var(--mono); line-height: 1; display: inline-grid; place-items: center; }
.pg:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pg:disabled { opacity: 0.3; cursor: default; }
.mbody { padding: 22px 18px 18px; }
.mbig { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.mbig span:first-child { font-size: clamp(36px, 3.4vw, 52px); font-weight: 500; letter-spacing: -0.04em; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.mbig small { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--mute); }
.mlive .bar { height: 6px; background: rgba(var(--ink-rgb), 0.08); }
.mlive .barlabels { margin-top: 10px; }
.stats.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stats.grid3 .stat { padding: 13px 16px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats.grid3 .stat:nth-child(3n) { border-right: 0; }
.stats.grid3 .stat:nth-last-child(-n+3) { border-bottom: 0; }
.stats.grid3 .stat .v { font-size: clamp(18px, 1.5vw, 24px); }
@media (max-width: 560px) { .stats.grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats.grid3 .stat:nth-child(3n) { border-right: 1px solid var(--line); } .stats.grid3 .stat:nth-child(2n) { border-right: 0; } .stats.grid3 .stat:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); } .stats.grid3 .stat:nth-last-child(-n+2) { border-bottom: 0; } }
.mintpage .card { background: rgba(17, 17, 17, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9); }
.mintpage .console { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 0; align-items: stretch; }
.mintpage .stack { min-height: 0; }
@media (min-width: 921px) { .mintpage .console { min-height: 640px; } .mintpage .stack { height: 0; min-height: 100%; } }
@media (max-width: 920px) { .mintpage .console { grid-template-columns: minmax(0, 1fr); } }
.mintpage .widget .panel { padding: 24px 28px 28px; }
.mintpage .code { font-size: 13px; padding: 16px 18px; }
.mintpage .feed { padding: 0; }
.mintpage .feed td { padding: 11px 0; }
.mintpage .mintmain > .foot { margin-top: auto; } /* pinned to the bottom of the screen; the gap above comes from the last section */
.cardhead .ticker { font: 500 14px var(--sans); text-transform: none; letter-spacing: 0; color: #fff; }

/* ---------- console ---------- */
.console { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 920px) { .console { grid-template-columns: minmax(0, 1fr); } }
.card { position: relative; border: 1px solid var(--line); background: var(--card); min-width: 0; }
.card::before, .card::after { content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none; }
.card::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.card::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.cardhead .mute { color: var(--dim); }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--mute); }
.cardhead.sub { border-top: 1px solid var(--line); }
.cardhead a { color: var(--accent); text-decoration: none; }
.cardhead a:hover { text-decoration: underline; }
.pill { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.14em; }
.pill.live { color: var(--ok); }
.pill.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 10px var(--ok); }
.pill.done { color: var(--accent); }
.panel { padding: 18px 18px 20px; }

.progress { padding: 18px 18px 14px; }
.bar { height: 6px; background: #1e1e1e; overflow: hidden; }
.fill { height: 100%; width: 0; background: var(--accent); transition: width 0.6s ease; }
.barlabels { display: flex; justify-content: space-between; gap: 12px; font: 11px var(--mono); color: var(--mute); margin-top: 10px; letter-spacing: 0.02em; }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stat { padding: 14px 18px 16px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); min-width: 0; }
.stat:nth-child(2n) { border-right: 0; }
.stat .k { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--mute); }
.stat .v { font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; letter-spacing: -0.02em; margin-top: 8px; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v.accent { color: var(--accent); }
.stats.flush { border-top: 0; margin: 0 -18px; width: calc(100% + 36px); }

.feed { padding: 4px 18px 10px; }
.feed table td { font-size: 12px; }
.feed .h { color: var(--dim); }

/* ---------- forms ---------- */
label { display: block; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--mute); margin: 18px 0 8px; }
.field { display: flex; border: 1px solid var(--line2); background: var(--well); }
.field input { flex: 1; min-width: 0; background: none; border: 0; padding: 12px 14px; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; outline: none; font-variant-numeric: tabular-nums; color: #fff; }
.field .unit { padding: 12px 14px; color: var(--mute); font: 11px var(--mono); text-transform: uppercase; letter-spacing: 0.1em; align-self: center; white-space: nowrap; }
.field:focus-within { border-color: var(--accent); }
textarea { width: 100%; background: var(--well); border: 1px solid var(--line2); padding: 12px; font: 14px var(--mono); min-height: 96px; outline: none; color: var(--ink); }
textarea:focus { border-color: var(--accent); }
.quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.quick button { background: none; border: 1px solid var(--line2); padding: 9px 0; font: 500 12px var(--mono); color: var(--mute); }
.quick button:hover { color: var(--ink); border-color: var(--ink); }
.quick button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.code { display: block; margin: 0; background: var(--well); border: 1px solid var(--line2); padding: 14px 16px; font: 12.5px/1.75 var(--mono); color: var(--mute); white-space: pre-wrap; word-break: break-all; }
.code .op { color: var(--accent); }
.code .k { color: var(--ink); }
.code .dim { color: var(--dim); }
.codehead { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--mute); }
.codehead .count { color: var(--accent); }

.sum { width: 100%; border-collapse: collapse; margin-top: 16px; font: 12px var(--mono); }
.sum td { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--mute); }
.sum td.r { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.sum tr.total td { color: var(--ink); border-bottom: 0; padding-top: 12px; }
.sum tr.total td.r { color: var(--accent); font-size: 15px; font-weight: 500; }

.est { margin: 14px 0; font: 12px var(--mono); color: var(--mute); line-height: 1.8; }
.est b { color: var(--ink); font-weight: 500; }
.go { width: 100%; margin-top: 16px; padding: 18px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: 0.16em; transition: filter 0.18s ease; }
.go:hover { filter: brightness(1.08); }
.go:disabled { opacity: 0.35; cursor: not-allowed; filter: none; }
.ghost { background: none; border: 1px solid var(--line2); color: var(--ink); padding: 10px 14px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; }
.ghost:hover { border-color: var(--ink); }
.small { font-size: 12px; color: var(--mute); line-height: 1.55; }
/* wallet start: two choices, each one line of explanation */
.sheet .lead { margin: 0 0 20px; color: var(--mute); font-size: 14px; }
.choices { display: grid; gap: 10px; }
.choice { display: grid; gap: 4px; text-align: left; padding: 16px 18px; background: var(--well); border: 1px solid var(--line2); color: var(--ink); transition: border-color 0.18s ease, background 0.18s ease; }
.choice b { font: 600 15px var(--sans); letter-spacing: -0.01em; }
.choice span { font-size: 12.5px; color: var(--mute); line-height: 1.45; }
.choice:hover { border-color: var(--ink); }
.choice.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.choice.primary span { color: var(--accent-ink); opacity: 0.72; }
.choice.primary:hover { filter: brightness(1.06); }
.facts { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.facts li { position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.5; color: var(--mute); }
.facts li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 1px; background: var(--accent); }
.warn { border-left: 2px solid var(--accent); padding: 8px 12px; font-size: 12.5px; line-height: 1.45; margin: 14px 0 0; background: var(--well); color: var(--mute); }
.err { color: var(--bad); font: 12px var(--mono); margin-top: 10px; min-height: 1em; line-height: 1.5; }

/* ---------- tables, tags ---------- */
table { width: 100%; border-collapse: collapse; font: 12px var(--mono); font-variant-numeric: tabular-nums; }
th { text-align: left; color: var(--mute); font-weight: 400; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; }
td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: right; }
td a { color: var(--accent); text-decoration: none; }
.tag { font: 500 9.5px var(--mono); padding: 3px 7px; border: 1px solid var(--line2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--mute); }
.tag.mint { border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent); background: rgba(var(--accent-rgb), 0.06); }
.tag.pending { border-color: var(--line2); }
/* the viewer's own rows in Recent inscriptions */
tr.me td { background: rgba(var(--accent-rgb), 0.07); }
tr.me td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.you { font-style: normal; color: var(--accent); margin-left: 4px; }
.tag.bad { border-color: rgba(255, 90, 78, 0.5); color: var(--bad); background: rgba(255, 90, 78, 0.06); }
.tag.ok { border-color: rgba(74, 222, 128, 0.5); color: var(--ok); background: rgba(74, 222, 128, 0.06); }
.linkbtn { background: none; border: 0; text-decoration: underline; padding: 0; font: inherit; color: var(--ink); text-underline-offset: 2px; }
/* Wormhole deposits: the table keeps the sheet's width on a phone, and the payout form sits under its row */
#dList table { table-layout: fixed; }
#dList td:first-child { width: 30%; }
#dList td.r { overflow-wrap: anywhere; }
#dList .payout td { padding-top: 2px; }
#dList .payout .field input { font: 13px var(--mono); letter-spacing: 0; padding: 11px 12px; }
#dList .payout .row { margin-top: 8px; }
.linkbtn:hover { color: var(--accent); }
.empty { color: var(--dim); font: 12px var(--mono); padding: 12px 0; }
.lede.sm { font-size: 20px; margin: 0; color: var(--ink); }
.mono { font-family: var(--mono); }
.addr { font: 13px var(--mono); word-break: break-all; padding: 12px 14px; background: var(--well); border: 1px solid var(--line2); line-height: 1.5; }
.row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.row > * { flex: 1; }
.btnlink { display: inline-block; text-align: center; text-decoration: none; }
.field.gap { margin-top: 8px; }

/* ---------- sheet (wallet, receipts) ---------- */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72); display: flex; align-items: flex-start; justify-content: center; z-index: 20; overflow-y: auto; padding: 6vh 16px; }
.sheet { background: var(--card); border: 1px solid var(--line2); width: min(540px, 100%); padding: 22px 22px 24px; }
/* ---- wallet sheet ---- */
.wtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wlabel { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--mute); }
.wbal { font: 600 34px/1.1 var(--sans); letter-spacing: -0.03em; color: #fff; margin-top: 6px; font-variant-numeric: tabular-nums; }
.wx { width: 34px; height: 34px; flex: none; border: 1px solid var(--line2); background: none; color: var(--mute); font: 400 20px/1 var(--sans); display: grid; place-items: center; }
.wx:hover { color: var(--ink); border-color: var(--ink); }
.waddr { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 7px 10px; background: var(--well); border: 1px solid var(--line); color: var(--ink); font: 12px var(--mono); }
.waddr span { color: var(--accent); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; }
.waddr:hover { border-color: var(--line2); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 20px 0 6px; background: var(--well); border: 1px solid var(--line); }
.seg button { padding: 11px 8px; background: none; border: 0; color: var(--mute); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; }
.seg button.on { background: var(--card); color: #fff; box-shadow: inset 0 0 0 1px var(--line2); }
.seg button:not(.on):hover { color: var(--ink); }
.step { margin-top: 18px; }
.steptitle { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 600 14px var(--sans); color: #fff; letter-spacing: -0.01em; }
.steptitle b { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent); font: 500 11px var(--mono); }
.steptitle em { font: 500 10px var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute); border: 1px solid var(--line2); padding: 3px 7px; }
.stepnote { margin: -2px 0 10px 32px; font-size: 12.5px; line-height: 1.5; color: var(--mute); }
.stepnote b { color: var(--ink); font-weight: 500; }
.stepnote.flat { margin: 12px 0 0; }
.copyfield { display: flex; align-items: stretch; background: var(--well); border: 1px solid var(--line2); }
.copyfield code { flex: 1; min-width: 0; padding: 12px 14px; font: 12.5px/1.5 var(--mono); color: var(--ink); word-break: break-all; }
.copyfield button { flex: none; padding: 0 16px; background: none; border: 0; border-left: 1px solid var(--line2); color: var(--accent); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; }
.copyfield button:hover { background: rgba(var(--accent-rgb), 0.08); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chips span { font: 11px var(--mono); color: var(--mute); border: 1px solid var(--line); padding: 4px 8px; }
.getqtc { margin: 12px 0 0; font-size: 12.5px; color: var(--mute); }
.getqtc a { color: var(--accent); text-decoration: none; }
.getqtc a:hover { text-decoration: underline; }
.field.slim input { font-size: 16px; padding: 12px 14px; letter-spacing: 0; }
.field.slim + .field.slim { margin-top: 8px; }
.field .max { flex: none; align-self: center; margin-right: 4px; padding: 6px 9px; background: none; border: 1px solid var(--line2); color: var(--mute); font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; }
.field .max:hover { color: var(--ink); border-color: var(--ink); }
.step .go { margin-top: 10px; }
.step .est { margin: 10px 0 0; }
.step .err:empty { min-height: 0; margin: 0; }
.deps { display: grid; border: 1px solid var(--line); }
.dep { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.dep + .dep, .payout + .dep { border-top: 1px solid var(--line); }
.dep .dl { display: grid; gap: 2px; }
.dep .dl b { font: 500 14px var(--mono); color: #fff; }
.dep .dl span { font: 11px var(--mono); color: var(--mute); }
.dep .dr { display: flex; gap: 6px; align-items: center; text-align: right; }
.dep.spent .dl b { color: var(--mute); }
.sm { padding: 8px 11px; background: none; border: 1px solid var(--line2); color: var(--ink); font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; }
.sm:hover { border-color: var(--ink); }
.sm.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sm.primary:hover { filter: brightness(1.06); }
.st { font: 11px var(--mono); color: var(--mute); }
.st.done { color: var(--ok); }
.st.busy { color: var(--ink); }
.st small { color: var(--dim); font-size: 10px; }
.payout { padding: 0 14px 14px; }
.payout .row { margin-top: 8px; }
#dList .empty + .deps { margin-top: 10px; }
.empty.waiting { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px dashed var(--line2); }
.empty.waiting i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.hint { margin: 16px 0 0; font-size: 12px; line-height: 1.55; color: var(--mute); }
.hint + .hint { margin-top: 8px; }
.hint b { color: var(--ink); font-weight: 500; }
.hint .linkbtn { color: var(--ink); }
.wfoot { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.linkbtn.quiet { color: var(--mute); text-decoration: none; font: 11px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; }
.linkbtn.quiet:hover { color: var(--ink); }
@media (max-width: 480px) { .dep { flex-wrap: wrap; } .dep .dr { width: 100%; justify-content: flex-start; } .wbal { font-size: 28px; } }
.sheet h2 { font-size: 26px; letter-spacing: -0.03em; margin: 0 0 8px; font-weight: 500; color: #fff; }
.words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font: 13px var(--mono); margin: 14px 0; }
.words span { border: 1px solid var(--line2); padding: 7px 9px; background: var(--well); }
.words span i { color: var(--dim); font-style: normal; margin-right: 6px; }
.sheet-tabs { display: flex; gap: 18px; margin: 16px 0 6px; border-bottom: 1px solid var(--line); }
.sheet-tabs .tab { background: none; border: 0; padding: 10px 0; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute); }
.sheet-tabs .tab.on { color: var(--ink); box-shadow: inset 0 -1px 0 var(--accent); }
.sheet .stat { border: 0; padding: 8px 0 4px; }
.rstatus { font: 12px var(--mono); padding: 10px 12px; border-left: 2px solid var(--mute); background: var(--well); margin: 10px 0; line-height: 1.5; }
.rstatus.ok { border-color: var(--ok); }
.rstatus.bad { border-color: var(--bad); color: var(--bad); }
.receipt td { font-size: 12px; }
pre.inscription { white-space: pre-wrap; word-break: break-all; background: var(--well); border: 1px solid var(--line2); padding: 12px 14px; font: 12.5px/1.6 var(--mono); color: var(--accent); margin: 0; }
.hist td { font-size: 12px; }

/* ---------- misc ---------- */
.toasts { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 30; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--bg); padding: 12px 14px; font: 12px var(--mono); line-height: 1.45; word-break: break-word; }
.toast.bad { background: #2a1210; color: #ff8a7a; border: 1px solid var(--bad); }
.banner { background: var(--bad); color: #fff; padding: 10px var(--gutter); font: 12px var(--mono); }
.admin { margin-top: 40px; border: 1px dashed var(--accent); padding: 20px; }
.admin h3 { margin: 0 0 8px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); }
.foot { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; font: 11px var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute); }
.foot a { color: var(--accent); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .mute { color: var(--dim); text-transform: none; letter-spacing: 0.02em; }

/* ---------- rules page ---------- */
.rules .hero { min-height: 0; display: block; padding: 56px var(--gutter) 8px; border: 0; }
.rules .ticker { font-size: clamp(48px, 8vw, 96px); line-height: 0.95; letter-spacing: -0.035em; }
.rules article { max-width: 72ch; color: var(--mute); font-size: 15px; line-height: 1.65; }
.rules h3 { color: #fff; margin: 32px 0 8px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.rules code { font: 12.5px var(--mono); word-break: break-word; color: var(--accent); }
.rules p { margin: 0 0 12px; }

/* ---------- home hero: the same pieces in an editorial composition (set left on the page grid,
   larger and tighter type, copy and buttons sharing one ruled line), with yellow as a second
   accent for what is private: the word, the private-funding button, the outer edge of the wave ---------- */
.home .hero::after { background: linear-gradient(90deg, rgba(var(--bg-rgb), 0.9) 0%, rgba(var(--bg-rgb), 0.78) 32%, rgba(var(--bg-rgb), 0.24) 54%, transparent 72%), linear-gradient(0deg, rgba(var(--bg-rgb), 0.8) 0%, transparent 24%); }
/* the wave in two colours: a soft gold field and a soft orange field drift through it (positions set
   each frame by waveField), over an orange-to-gold base, so both colours flow through the pattern */
.home .wave { --gx: 60%; --gy: 34%; --ox: 82%; --oy: 62%; color: transparent; background: radial-gradient(ellipse 34% 46% at var(--gx) var(--gy), rgba(var(--violet-rgb), 0.85), rgba(var(--violet-rgb), 0) 100%), radial-gradient(ellipse 38% 50% at var(--ox) var(--oy), rgba(var(--accent-rgb), 0.85), rgba(var(--accent-rgb), 0) 100%), linear-gradient(115deg, rgba(var(--accent-rgb), 0.46) 0%, rgba(var(--violet-rgb), 0.44) 50%, rgba(var(--accent-rgb), 0.46) 100%); -webkit-background-clip: text; background-clip: text; }
.home .herobody { --inset: clamp(var(--gutter), 8vw, 180px); text-align: left; max-width: none; margin: 0; padding: 96px var(--gutter) 96px var(--inset); align-self: center; } /* set in from the left wall, more on wider screens */
@media (min-width: 721px) { .home .herobody { width: max-content; max-width: 100%; } } /* the ruled line below ends where the headline ends */
.home .kicker { display: flex; align-items: center; gap: 18px; margin: 0 0 34px; font-size: clamp(13px, 0.95vw, 16px); letter-spacing: 0.22em; }
.home .kicker::before { content: ""; flex: none; width: 64px; height: 1px; background: linear-gradient(90deg, var(--violet), var(--accent)); }
.home .headline { font-size: clamp(46px, 6.3vw, 124px); line-height: 0.94; font-weight: 600; letter-spacing: -0.038em; margin: 0; }
.home .headline .pv { font-style: normal; color: var(--violet); }
.home .herofoot { display: flex; flex-direction: column; align-items: flex-start; gap: 34px; margin-top: 46px; padding-top: 30px; border-top: 1px solid; border-image: linear-gradient(90deg, rgba(var(--violet-rgb), 0.6), rgba(var(--ink-rgb), 0.14) 38%, transparent 90%) 1; }
.home .lede { font: 400 clamp(18px, 1.35vw, 22px)/1.5 var(--sans); color: var(--mute); max-width: 27em; margin: 0; letter-spacing: -0.005em; }
.home .lede b { display: block; margin-top: 6px; color: #fff; font-weight: 500; }
.home .cta .btn { padding: 17px 30px; font-size: 15px; }
.home .cta { margin: 0; }
.home .cta .btn:not(.primary) { border-color: rgba(var(--violet-rgb), 0.5); background: rgba(var(--violet-rgb), 0.08); }
.home .cta .btn:not(.primary):hover { background: rgba(var(--violet-rgb), 0.16); box-shadow: 0 14px 36px -16px rgba(var(--violet-rgb), 0.75); }
.home .strip { justify-content: flex-start; padding-left: clamp(var(--gutter), 8vw, 180px); } /* lines up with the hero text */
.home .strip i { color: var(--violet); }
@media (max-width: 720px) { .home .herobody { padding: 104px var(--gutter) 44px; align-self: center; } .home .headline { font-size: clamp(42px, 12vw, 66px); } .home .herofoot { margin-top: 34px; gap: 26px; } .home .lede { font-size: 17px; } .home .cta { width: 100%; } }

/* ---------- wallet page: the portfolio ---------- */
.walletpage .pgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr); gap: 20px; align-items: start; margin-bottom: 56px; }
.walletpage .pgrid .wide { grid-column: 1 / -1; }
.walletpage .mmeta .waddr { margin-top: 0; }
.pbody { padding: 8px 18px 18px; }
.pbody > .empty:first-child { padding-top: 14px; }
.pbody .go { margin-top: 18px; }
.pbody .btnlink { margin-top: 6px; }
.pqtc { margin: 14px 0 2px; font-size: clamp(30px, 3vw, 44px); font-weight: 500; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
#pfSend .field:first-child { margin-top: 14px; }
@media (max-width: 900px) { .walletpage .pgrid { grid-template-columns: minmax(0, 1fr); } .walletpage .mmeta { align-items: flex-start; } }

/* ---------- mint page legibility (this page's content only; the nav and the wallet sheet match the
   other pages): lighter greys (labels ~7.9:1 on the cards, secondary ~4.5:1, were 5.3 and 2.6) and
   the small type a touch larger. :where() keeps these at one specificity, so the later line wins. ---------- */
.mintpage:not(.walletpage) .mintmain { --mute: rgba(232, 230, 224, 0.7); --dim: rgba(232, 230, 224, 0.5); }
.mintpage:not(.walletpage) .mintmain :where(.tag) { font-size: 10.5px; }
.mintpage:not(.walletpage) .mintmain :where(.cardhead, .codehead, .stat .k, .mbig small, .pager, .pill, label, th) { font-size: 11px; }
.mintpage:not(.walletpage) .mintmain :where(.kicker, .lede.sm.mute, .barlabels, .field .unit, .foot) { font-size: 12px; }
.mintpage:not(.walletpage) .mintmain :where(table, .feed table td, .est, .small, .err, .hint, .empty) { font-size: 12.5px; }
.mintpage:not(.walletpage) .mintmain :where(.quick button, .sum) { font-size: 13px; }
.mintpage:not(.walletpage) .mintmain :where(.empty) { color: var(--mute); }