/* UMBRA v2 · shared tokens + frame (Stage). DESIGN.md is the source; nothing hard-coded below the token sheet. */
@font-face { font-family: 'Krona One'; src: url(/assets/fonts-v2/krona-one.woff2) format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Inter Display'; src: url(/assets/fonts-v2/InterDisplay-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url(/assets/fonts-v2/InterDisplay-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url(/assets/fonts-v2/InterDisplay-SemiBold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Zed Mono'; src: url(/assets/fonts-v2/zed-mono-regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Zed Mono'; src: url(/assets/fonts-v2/zed-mono-medium.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Zed Mono Ext'; src: url(/assets/fonts-v2/zed-mono-extended.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  /* day: the public market */
  --page: #e7e8eb; --panel: #f0f1f3; --raised: #f8f8f9; --sunk: #dfe0e4;
  --ink: #0b0c0e; --ink-2: #3d4047; --ink-3: #6b6f78; --ink-4: #9a9ea6;
  --line: rgba(11, 12, 14, .10); --line-2: rgba(11, 12, 14, .17); --line-3: rgba(11, 12, 14, .30);
  /* the umbra */
  --u0: #000; --u1: #0b0c0f; --u2: #131419; --u3: #1b1d23;
  --l1: #eceef2; --l2: #a9adb7; --l3: #737782; --l4: #4a4d56;
  --uline: rgba(236, 238, 242, .08); --uline-2: rgba(236, 238, 242, .14); --uline-3: rgba(236, 238, 242, .26);
  /* one accent + state */
  --acc: #2433ff; --acc-2: #1a26d6; --acc-l: #6a76ff; --acc-wash: rgba(36, 51, 255, .08);
  --buy: #0c8a5e; --sell: #c8333f; --buy-l: #2fd197; --sell-l: #ff5c69;
  /* type */
  --f-d: 'Krona One', 'Inter Display', system-ui, sans-serif;
  --f-t: 'Inter Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-m: 'Zed Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --f-mx: 'Zed Mono Ext', 'Zed Mono', ui-monospace, monospace;
  /* space, radius, motion */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r: 2px; --hdr: 56px;
  --ease: cubic-bezier(.2, .7, .2, 1); --t-ui: .14s; --t-in: .5s;
  color-scheme: light;
}
/* the umbra tone (the /app console, dark panels): same names, shadow values */
.tone-umbra {
  --page: #08090b; --panel: #0e0f13; --raised: #15161b; --sunk: #050607;
  --ink: #eceef2; --ink-2: #b3b7c1; --ink-3: #7c808b; --ink-4: #555963;
  --line: rgba(236, 238, 242, .07); --line-2: rgba(236, 238, 242, .13); --line-3: rgba(236, 238, 242, .24);
  --acc: #5866ff; --acc-2: #6f7bff; --acc-wash: rgba(88, 102, 255, .12);
  --buy: #2fd197; --sell: #ff5c69;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 15px/1.5 var(--f-t); font-feature-settings: 'ss01', 'cv11'; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
::selection { background: var(--acc); color: #fff; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.mono { font-family: var(--f-m); font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: 'tnum', 'zero'; }
.is-hidden { display: none !important; }
.vh { visibility: hidden; }
.lab { font: 400 10.5px/1.2 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* scrollbars: thin, themed, no arrows (no-stock-scrollbars) */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 6px; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports (-moz-appearance: none) { * { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; } }

/* ------------------------------------------------------------------ header */
.hdr { position: sticky; top: 0; z-index: 50; height: var(--hdr); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: var(--s4); padding: 0 var(--s5); background: var(--page); border-bottom: 1px solid var(--line-2); }
.hdr-l { display: flex; align-items: center; gap: var(--s6); min-width: 0; }
.wm { display: flex; align-items: center; gap: 10px; font: 400 16px/1 var(--f-d); letter-spacing: .06em; }
.wm-word { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.wm-word b { font: 400 16px/1 var(--f-d); letter-spacing: .06em; }
.wm-word small { font: 400 10px/1 var(--f-m); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
.wm-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--u0); box-shadow: 0 0 0 1px var(--line-2), 0 0 0 4px var(--page), 0 0 0 5px var(--line-2); flex: none; }
.tone-umbra .wm-mark { background: #000; box-shadow: 0 0 0 1px rgba(236,238,242,.5), 0 0 0 4px var(--page), 0 0 0 5px var(--line-2); }
.nav { display: flex; gap: 2px; }
.nav a { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; font: 500 14px/1 var(--f-t); color: var(--ink-2); border-radius: var(--r); transition: color var(--t-ui), background var(--t-ui); }
.nav a:hover { color: var(--ink); background: var(--line); }
.nav a[aria-current='page'] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }

.clock { display: grid; grid-template-columns: auto 168px auto; align-items: center; gap: 12px; height: 34px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--raised); }
.clock .lab { color: var(--ink-3); }
.clock-ticks { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; height: 10px; }
.clock-ticks i { display: block; background: var(--line-2); border-radius: 1px; }
.clock-ticks i.on { background: var(--ink); }
.clock-ticks i.hot { background: var(--acc); }
.clock-n { font: 500 14px/1 var(--f-m); font-variant-numeric: tabular-nums; width: 5ch; text-align: right; color: var(--ink); }
.clock.is-cross .clock-n { color: var(--acc); }

.hdr-r { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); min-width: 0; }
.btn { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border-radius: var(--r); font: 500 14px/1 var(--f-t); white-space: nowrap;
  border: 1px solid var(--line-2); background: var(--raised); color: var(--ink); transition: border-color var(--t-ui), background var(--t-ui), color var(--t-ui); }
.btn:hover { border-color: var(--line-3); }
.btn.solid { background: var(--ink); border-color: var(--ink); color: var(--page); }
.btn.solid:hover { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn.acc { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn.acc:hover { background: var(--acc-2); }
.btn.lg { height: 46px; padding: 0 22px; font-size: 15px; }
.btn.icon { width: 34px; padding: 0; }
.btn svg { width: 15px; height: 15px; flex: none; }

/* the CA slot (launch kit ids): hidden until the coin exists */
.ca { display: flex; align-items: center; height: 34px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--raised); min-width: 0; max-width: 340px; }
.ca .ca-lab { padding: 0 10px; font: 400 10.5px/1 var(--f-m); letter-spacing: .1em; color: var(--ink-3); border-right: 1px solid var(--line); height: 100%; display: flex; align-items: center; white-space: nowrap; }
.ca .ca-addr { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 10px; min-width: 0; font: 400 12.5px/1 var(--f-m); cursor: copy; }
.ca .ca-addr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15ch; }
.ca .ca-copy { font: 500 11px/1 var(--f-t); font-style: normal; color: var(--acc); }
.ca .ca-link { height: 100%; display: flex; align-items: center; padding: 0 9px; border-left: 1px solid var(--line); font: 500 12px/1 var(--f-t); color: var(--ink-2); }
.ca .ca-link:hover { color: var(--ink); }

/* ------------------------------------------------------------------ section frame */
.wrap { width: min(1440px, 100% - 2 * var(--s7)); margin: 0 auto; }
.sec { padding: 96px 0; border-top: 1px solid var(--line-2); }
.sec-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s5); padding-bottom: var(--s5); margin-bottom: var(--s6); border-bottom: 1px solid var(--line-2); }
.sec-h .lab { display: block; margin-bottom: 14px; }
.sec-h h2 { margin: 0; font: 400 clamp(26px, 2.6vw, 40px)/1.08 var(--f-d); letter-spacing: -.02em; }
.sec-h .more { font: 500 14px/1 var(--f-t); color: var(--ink-2); }
.sec-h .more:hover { color: var(--acc); }

/* ------------------------------------------------------------------ footer */
.ftr { border-top: 1px solid var(--line-2); padding: var(--s6) 0 var(--s7); }
.ftr .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); align-items: center; }
.ftr p { margin: 0; color: var(--ink-2); font-size: 14px; }
.ftr .nfa { font: 400 11px/1 var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.tag-sample { position: fixed; left: 10px; bottom: 10px; z-index: 90; font: 500 10px/1 var(--f-m); letter-spacing: .14em; padding: 6px 8px; background: var(--ink); color: var(--page); border-radius: var(--r); pointer-events: none; }

@media (max-width: 1100px) {
  .nav { display: none; }
  .clock { grid-template-columns: auto auto; } .clock-ticks { display: none; }
}
@media (max-width: 720px) {
  :root { --hdr: 52px; }
  .hdr { grid-template-columns: auto minmax(0, 1fr); padding: 0 var(--s3); gap: var(--s2); }
  .hdr .clock { display: none; }
  .ca .ca-lab, .ca .ca-link { display: none; }
  .ca .ca-addr > span { max-width: 9ch; }
  .wrap { width: calc(100% - 2 * var(--s4)); }
  .sec { padding: 64px 0; }
  .ftr .wrap { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.lgt { font-style: normal; }
.ch-legend .lgt .b-short, .tc-leg .lgt .b-short { display: inline; }