:root, [data-theme="dark"] {
  --bg: #051d19;
  --bg2: #072420;
  --panel: #0a2b26;
  --panel2: #103833;
  --line: rgba(151, 252, 228, .15);
  --line-strong: #97fce4;
  --text: #eafff8;
  --muted: #93bab0;
  --faint: #5f847b;
  --accent: #2fe6ae;
  --accent-hover: #7dfbd4;
  --accent-soft: #0f4438;
  --accent-ink: #04231d;
  --signal: #ff6ec7;
  --signal-ink: #33081f;
  --danger: #ff7065;
  --warning-bg: #3a2c10;
  --warning-line: #c19a3a;
  --warning-text: #f4dc9a;
  --logo-cut: #051d19;
  --shadow: 0 14px 44px rgba(0, 0, 0, .45);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --text-xs: clamp(.75rem, .72rem + .12vw, .82rem);
  --text-sm: clamp(.875rem, .83rem + .18vw, 1rem);
  --text-base: clamp(1rem, .96rem + .2vw, 1.1rem);
  --text-lg: clamp(1.2rem, 1.08rem + .55vw, 1.55rem);
  --text-xl: clamp(1.75rem, 1.45rem + 1.2vw, 2.55rem);
  --text-hero: clamp(2.7rem, 1.8rem + 3.6vw, 5.7rem);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;
  --transition: 180ms cubic-bezier(.16, 1, .3, 1);
}

[data-theme="light"] {
  --bg: #ecfbf4; --bg2: #dff5eb; --panel: #f8fffc; --panel2: #d8efe4;
  --line: rgba(7, 44, 37, .16); --line-strong: #07352c; --text: #07352c;
  --muted: #4c7a6d; --faint: #7fa89b; --accent: #0b9f74; --accent-hover: #067a58;
  --accent-soft: #c9f3e4; --accent-ink: #f2fffa; --signal: #f244ad; --signal-ink: #fff3fb;
  --danger: #cf3b30; --warning-bg: #fdf3d0; --warning-line: #b7860a; --warning-text: #6b4e00;
  --logo-cut: #ecfbf4; --shadow: 0 12px 40px rgba(7, 44, 37, .1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: none; text-size-adjust: none; }
body {
  min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden;
  background: var(--bg); color: var(--text); font-family: "Satoshi", sans-serif;
  font-size: var(--text-base); line-height: 1.55; -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .32;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 54%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 300px at 85% -40px, color-mix(in oklab, var(--signal) 14%, transparent), transparent 70%),
    radial-gradient(640px 380px at 8% 0, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%);
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img, svg, iframe { display: block; max-width: 100%; }
.mono { font-family: "IBM Plex Mono", monospace; font-size: var(--text-xs); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: var(--space-2); left: var(--space-2); z-index: 30; transform: translateY(-140%); padding: var(--space-2) var(--space-4); background: var(--text); color: var(--bg); border-radius: var(--radius-sm); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.site-header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6);
  padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-16));
  border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; width: fit-content; }
.brand .logo { width: 42px; color: var(--accent); flex: 0 0 auto; }
.brand h1 { font: 800 var(--text-lg)/1 "Cabinet Grotesk", sans-serif; letter-spacing: -.035em; }
.brand h1 span { color: var(--accent); }
.brand p { color: var(--muted); font-size: var(--text-xs); margin-top: var(--space-1); }
.wallet-box { justify-self: end; display: flex; align-items: center; gap: var(--space-2); }
.tabs { display: flex; gap: var(--space-1); padding: var(--space-1); background: var(--panel2); border-radius: var(--radius-md); }
.tab, .pillbtn, .ttab {
  border: 0; background: transparent; color: var(--muted); font-size: var(--text-sm); font-weight: 700;
  min-height: 44px; padding: 0 var(--space-4); border-radius: calc(var(--radius-md) - var(--space-1));
  transition: color var(--transition), background var(--transition), transform var(--transition);
}
.tab:hover, .pillbtn:hover, .ttab:hover { color: var(--text); }
.tab.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.btn, .icon-btn {
  min-height: 44px; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  border-radius: var(--radius-sm); font-weight: 700; font-size: var(--text-sm); padding: 0 var(--space-5);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; text-align: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.btn:hover:not(:disabled), .icon-btn:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.accent:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.icon-btn { width: 44px; padding: 0; }
.icon-btn svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pill {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-3);
  border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
  font: 500 var(--text-xs)/1 "IBM Plex Mono", monospace; white-space: nowrap;
}
.verified { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); color: var(--accent); }

.factory-bar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-16));
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.eyebrow { color: var(--accent); font: 500 var(--text-xs)/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.faddr { color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
.faddr:hover { color: var(--accent); }
#factoryStatus { margin-left: auto; color: var(--muted); }

main { flex: 1; width: min(1280px, 100%); margin: 0 auto; padding: var(--space-10) clamp(var(--space-4), 4vw, var(--space-12)) var(--space-20); }
.view { display: flex; flex-direction: column; gap: var(--space-6); }
.hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); gap: clamp(var(--space-8), 7vw, var(--space-20)); align-items: center; padding: clamp(var(--space-8), 5vw, var(--space-16)) 0 var(--space-12); }
.hero-copy h2 { margin: var(--space-4) 0 var(--space-5); font: 800 var(--text-hero)/.92 "Cabinet Grotesk", sans-serif; letter-spacing: -.065em; max-width: 780px; }
.hero-copy h2 em { font-style: normal; color: var(--accent); }
.hero-copy h2 em.pink { color: var(--signal); }
.mcap-tag {
  display: inline-flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-5);
  padding: var(--space-2) var(--space-4); border: 1px dashed color-mix(in oklab, var(--accent) 60%, var(--line));
  border-radius: 999px; color: var(--accent); font: 500 var(--text-xs)/1.5 "IBM Plex Mono", monospace;
}
.hero-copy p, .page-intro p { max-width: 650px; color: var(--muted); font-size: var(--text-base); }
.text-link { border: 0; background: transparent; color: var(--text); font-weight: 700; margin-top: var(--space-6); padding: var(--space-2) 0; border-bottom: 2px solid var(--accent); }
.text-link span { color: var(--accent); margin-left: var(--space-2); }

.flow-card { position: relative; background: var(--text); color: var(--bg); padding: var(--space-8); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.flow-card::after { content: ""; position: absolute; width: 170px; height: 170px; right: -65px; bottom: -75px; border-radius: 50%; background: var(--signal); }
.flow-label { display: grid; grid-template-columns: 34px 1fr; gap: 0 var(--space-3); align-items: baseline; position: relative; z-index: 1; }
.flow-label span { grid-row: 1 / 3; color: var(--signal); font: 500 var(--text-xs)/1 "IBM Plex Mono", monospace; }
.flow-label b { font: 700 var(--text-lg)/1.1 "Cabinet Grotesk", sans-serif; }
.flow-label small { color: color-mix(in oklab, var(--bg) 70%, transparent); font-size: var(--text-xs); margin-top: var(--space-1); }
.flow-line { height: 34px; margin-left: 15px; border-left: 1px solid color-mix(in oklab, var(--bg) 28%, transparent); position: relative; }
.flow-line i { position: absolute; width: 5px; height: 5px; left: -3px; top: 15px; border-radius: 50%; background: var(--bg); }
.flow-line.active i { background: var(--signal); box-shadow: 0 0 0 6px color-mix(in oklab, var(--signal) 18%, transparent); }
.fee-seal { position: relative; z-index: 1; margin: var(--space-8) 0 var(--space-8) auto; width: 145px; aspect-ratio: 1; border-radius: 50%; background: var(--signal); color: var(--signal-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-7deg); }
.fee-seal strong { font: 800 var(--text-xl)/.9 "Cabinet Grotesk", sans-serif; }
.fee-seal span { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; text-align: center; margin-top: var(--space-2); }

.stats { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); background: var(--panel); }
.stat { padding: var(--space-5); min-width: 0; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat span { display: block; color: var(--text); font: 700 var(--text-lg)/1.15 "Cabinet Grotesk", sans-serif; overflow-wrap: anywhere; }
.stat label { display: block; color: var(--muted); font-size: var(--text-xs); margin-top: var(--space-2); text-transform: uppercase; letter-spacing: .06em; }
.stat.protocol { background: var(--signal); color: var(--signal-ink); }
.stat.mcap30 { background: var(--accent); color: var(--accent-ink); }
.stat.mcap30 span, .stat.mcap30 label { color: inherit; }
.stat.protocol span, .stat.protocol label { color: inherit; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-10); }
.section-head h3, .page-intro h2 { font: 800 var(--text-xl)/1 "Cabinet Grotesk", sans-serif; letter-spacing: -.04em; margin-top: var(--space-2); }
.chain-state { color: var(--muted); }
.chain-state i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #45a552; margin-right: var(--space-2); }

.toolbar { display: grid; grid-template-columns: 1fr auto 44px; gap: var(--space-2); }
.toolbar label { margin: 0; }
input, select {
  width: 100%; min-height: 48px; margin-top: var(--space-2); padding: 0 var(--space-4);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: "IBM Plex Mono", monospace; font-size: var(--text-sm);
}
input::placeholder { color: var(--faint); }
input:focus, select:focus { border-color: var(--accent); outline: 2px solid color-mix(in oklab, var(--accent) 18%, transparent); outline-offset: 0; }
.toolbar input, .toolbar select { margin: 0; }
.toolbar select { width: auto; min-width: 165px; }
.pills { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pillbtn { border: 1px solid var(--line); background: var(--panel); min-height: 36px; font: 500 var(--text-xs)/1 "IBM Plex Mono", monospace; }
.pillbtn.active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.tcard, .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); }
.tcard { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); content-visibility: auto; }
.tcard:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); box-shadow: var(--shadow); }
.tcard.clickable { cursor: pointer; }
.t-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.t-sym { font: 800 var(--text-lg)/1 "Cabinet Grotesk", sans-serif; letter-spacing: -.02em; }
.t-name { color: var(--muted); font-size: var(--text-sm); margin: var(--space-2) 0 var(--space-4); }
.qpill, .obadge, .you { font: 500 var(--text-xs)/1 "IBM Plex Mono", monospace; padding: var(--space-2) var(--space-3); border-radius: 999px; }
.qpill { border: 1px solid var(--line); color: var(--accent); }
.qpill.stock { color: var(--warning-text); border-color: var(--warning-line); }
.obadge { background: var(--signal); color: var(--signal-ink); }
.you { background: var(--accent); color: var(--accent-ink); margin-left: var(--space-1); }
.t-rows { display: flex; flex-direction: column; font-size: var(--text-xs); }
.t-rows div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.t-rows span { color: var(--muted); }
.t-rows b { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.t-rows a { color: var(--accent); text-decoration: none; }
.t-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin-top: var(--space-5); }
.btn.sm { min-height: 38px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.hint { color: var(--muted); font-size: var(--text-sm); }

.page-intro { padding: var(--space-8) 0 var(--space-4); }
.page-intro p { margin-top: var(--space-4); }
.card.narrow { max-width: 680px; margin: 0 auto; width: 100%; padding: clamp(var(--space-5), 5vw, var(--space-10)); }
.fixed-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
label { display: block; margin-bottom: var(--space-5); color: var(--muted); font-size: var(--text-sm); }
.unit { color: var(--accent); font-size: var(--text-xs); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.preview { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-4); color: var(--muted); min-height: 48px; white-space: pre-wrap; }
.notice { margin-top: var(--space-5); padding: var(--space-4); background: var(--warning-bg); border: 1px solid var(--warning-line); border-radius: var(--radius-sm); color: var(--warning-text); font-size: var(--text-sm); }
.notice a { color: inherit; font-weight: 700; }
.btn.big { width: 100%; min-height: 52px; margin-top: var(--space-5); }
.status { margin-top: var(--space-4); color: var(--accent); overflow-wrap: anywhere; }
.status.err { color: var(--danger); }
.status a { color: inherit; }
.sect { font: 800 var(--text-lg)/1 "Cabinet Grotesk", sans-serif; margin-top: var(--space-8); }
.portfolio-stats { grid-template-columns: repeat(4, 1fr); }
.stat.action .btn { width: 100%; }

.tk-head { margin: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-3); }
.tk-title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.t-sym.xl { font-size: var(--text-xl); }
.tk-name { color: var(--muted); }
.tk-ca { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--muted); }
.tk-ca .ca-text { color: var(--accent); overflow-wrap: anywhere; }
.tk-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, .8fr); gap: var(--space-4); align-items: start; }
.chartcard { padding: 0; overflow: hidden; }
.chartcard iframe { width: 100%; height: 520px; border: 0; background: #0c0e0f; }
.trade-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ttab { border: 1px solid var(--line); background: var(--bg2); }
.ttab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#tradeBtn.sell { background: var(--danger); border-color: var(--danger); color: #fff; }
.bal { color: var(--muted); margin-top: calc(-1 * var(--space-3)); }
.bal a { color: var(--accent); }
.hint.small { font-size: var(--text-xs); margin-top: var(--space-4); }
.tk-info { margin-top: var(--space-4); }
.tk-info h3 { margin-bottom: var(--space-3); }
.tk-info i { color: var(--muted); font-style: normal; }
#tkClaim { margin-top: var(--space-4); }
#backBtn { width: fit-content; }

footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-6) clamp(var(--space-4), 4vw, var(--space-16)); border-top: 1px solid var(--line); color: var(--muted); }
.brand.mini { color: var(--text); font-size: var(--text-sm); }
.brand.mini .logo { width: 24px; }

@media (max-width: 920px) {
  .site-header { grid-template-columns: 1fr auto; }
  .tabs { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .tab { flex: 1; }
  .hero { grid-template-columns: 1fr; }
  .flow-card { max-width: 560px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .tk-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .brand p, #netpill { display: none; }
  .site-header { gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .brand .logo { width: 34px; }
  .brand h1 { font-size: 1.2rem; }
  .wallet-box .btn { padding: 0 var(--space-3); }
  .factory-bar .eyebrow, .factory-bar .verified { display: none; }
  #factoryStatus { width: 100%; margin-left: 0; }
  main { padding-top: var(--space-6); }
  .hero { padding-top: var(--space-6); gap: var(--space-8); }
  .hero-copy h2 { letter-spacing: -.05em; }
  .toolbar { grid-template-columns: 1fr 44px; }
  .toolbar label:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
  .toolbar select { width: 100%; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .cards { grid-template-columns: 1fr; }
  .t-actions { grid-template-columns: 1fr 1fr; }
  footer { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}