/* ============================================================
   DUCATE — design system
   Night-market dark shell, brass accent, mono numerics.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* ---- surfaces ---- */
  --bg:          #0a0b0d;
  --bg-deep:     #060709;
  --surface:     #101318;
  --surface-2:   #161a21;
  --surface-3:   #1d222b;
  --line:        #232833;
  --line-soft:   #1a1e26;

  /* ---- ink ---- */
  --ink:         #eef1f6;
  --ink-2:       #b9c0cc;
  --muted:       #7d8695;
  --faint:       #565e6b;

  /* ---- brand ---- */
  --brass:       #e5b84f;
  --brass-hi:    #f7d585;
  --brass-dim:   #6d5620;
  --brass-wash:  rgba(229,184,79,.10);
  --violet:      #7d6dff;
  --violet-wash: rgba(125,109,255,.12);

  /* ---- semantic ---- */
  --up:          #35d18a;
  --up-wash:     rgba(53,209,138,.12);
  --down:        #ff5f6d;
  --down-wash:   rgba(255,95,109,.12);
  --warn:        #f2a93b;

  /* ---- type ---- */
  --sans: 'Space Grotesk', ui-sans-serif, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-hero:   clamp(2.6rem, 1.2rem + 4.4vw, 5.1rem);
  --fs-h1:     clamp(2rem, 1.2rem + 2.4vw, 3.1rem);
  --fs-h2:     clamp(1.4rem, 1.05rem + 1.1vw, 1.95rem);
  --fs-h3:     1.12rem;
  --fs-body:   .975rem;
  --fs-sm:     .86rem;
  --fs-xs:     .765rem;
  --fs-micro:  .68rem;

  /* ---- geometry ---- */
  --r-sm: 8px;
  --r:    13px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shell: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --nav-h: 64px;

  --ease: cubic-bezier(.2,.8,.25,1);
  --shadow-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 60px rgba(0,0,0,.55);
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ambient light behind the whole page */
body::before{
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(229,184,79,.085), transparent 62%),
    radial-gradient(760px 480px at 8% 2%, rgba(125,109,255,.075), transparent 60%);
}
main,header,footer{ position:relative; z-index:1 }

a{ color:inherit; text-decoration:none }
img,svg{ display:block; max-width:100% }
button{ font:inherit; color:inherit }

::selection{ background:var(--brass); color:#151006 }

/* scrollbars */
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:99px; border:3px solid var(--bg) }
*::-webkit-scrollbar-thumb:hover{ background:#2c3340 }

/* ============================================================
   LAYOUT
   ============================================================ */
.shell{ width:min(100% - 2*var(--gut), var(--shell)); margin-inline:auto }
.shell--wide{ width:min(100% - 2*var(--gut), 1480px) }
.stack > * + *{ margin-top:var(--s, 1rem) }
.section{ padding-block:clamp(56px, 8vw, 104px) }
.section--tight{ padding-block:clamp(36px, 5vw, 60px) }

.grid{ display:grid; gap:18px }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
@media (max-width:900px){ .g-3,.g-4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr } }

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

/* ============================================================
   TYPE
   ============================================================ */
h1,h2,h3,h4{ margin:0; font-weight:500; letter-spacing:-.035em; line-height:1.08 }
h1{ font-size:var(--fs-h1) }
h2{ font-size:var(--fs-h2) }
h3{ font-size:var(--fs-h3); letter-spacing:-.02em; line-height:1.3 }
p{ margin:0 }

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.03em }
.muted{ color:var(--muted) }
.faint{ color:var(--faint) }
.ink2{ color:var(--ink-2) }
.up{ color:var(--up) } .down{ color:var(--down) } .brass{ color:var(--brass) }
.lead{ font-size:clamp(1rem,.93rem + .35vw,1.14rem); color:var(--ink-2); line-height:1.6; letter-spacing:-.016em }
.small{ font-size:var(--fs-sm) }
.xs{ font-size:var(--fs-xs) }
.center{ text-align:center }
.nowrap{ white-space:nowrap }
.balance{ text-wrap:balance }

.eyebrow{
  font-family:var(--mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brass);
}
.eyebrow--muted{ color:var(--faint) }

.hero-title{
  font-size:var(--fs-hero); font-weight:400; letter-spacing:-.05em; line-height:.94;
}
.hero-title em{
  font-style:normal;
  background:linear-gradient(96deg, var(--brass-hi), var(--brass) 45%, #b98f2e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============================================================
   NAV
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  background:color-mix(in srgb, var(--bg-deep) 82%, transparent);
  border-bottom:1px solid var(--line-soft);
}
.topbar__in{
  height:var(--nav-h);
  display:flex; align-items:center; gap:clamp(10px,2vw,26px);
}
.brand{ display:flex; align-items:center; gap:9px; flex:none }
.brand__mark{ width:26px; height:26px; flex:none }
.brand__name{
  font-size:1.03rem; font-weight:600; letter-spacing:.015em; text-transform:lowercase;
}
.brand__name b{ font-weight:600; color:var(--brass) }

.navlinks{ display:flex; align-items:center; gap:2px; margin-left:8px }
.navlinks a{
  padding:7px 12px; border-radius:var(--r-pill); font-size:var(--fs-sm);
  color:var(--muted); transition:color .18s var(--ease), background .18s var(--ease);
}
.navlinks a:hover{ color:var(--ink); background:var(--surface-2) }
.navlinks a[aria-current="page"]{ color:var(--ink); background:var(--surface-2) }

.navtools{ margin-left:auto; display:flex; align-items:center; gap:8px }

.burger{
  display:none; width:38px; height:38px; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-sm); align-items:center; justify-content:center; cursor:pointer;
}
.burger span{ display:block; width:15px; height:1.5px; background:var(--ink); position:relative }
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:15px; height:1.5px; background:var(--ink);
  transition:transform .2s var(--ease);
}
.burger span::before{ top:-5px } .burger span::after{ top:5px }

@media (max-width:1040px){
  .navlinks{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch;
    gap:2px; padding:14px var(--gut) 22px; margin:0;
    background:var(--bg-deep); border-bottom:1px solid var(--line);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s var(--ease), transform .2s var(--ease);
  }
  .navlinks a{ padding:13px 14px; border-radius:var(--r-sm); font-size:1rem }
  body.nav-open .navlinks{ opacity:1; transform:none; pointer-events:auto }
  .burger{ display:flex }
  body.nav-open .burger span{ background:transparent }
  body.nav-open .burger span::before{ transform:translateY(5px) rotate(45deg) }
  body.nav-open .burger span::after{ transform:translateY(-5px) rotate(-45deg) }
}
@media (max-width:520px){ .navtools .btn--ghost{ display:none } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bh:40px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--bh); padding:0 17px; border:1px solid transparent; border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:500; letter-spacing:-.015em; white-space:nowrap;
  cursor:pointer; transition:transform .15s var(--ease), background .18s var(--ease),
                             border-color .18s var(--ease), color .18s var(--ease), opacity .18s;
}
.btn:active{ transform:translateY(1px) }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.42; pointer-events:none }
.btn svg{ width:15px; height:15px; flex:none }

.btn--brass{ background:linear-gradient(180deg,var(--brass-hi),var(--brass)); color:#191204; font-weight:600 }
.btn--brass:hover{ filter:brightness(1.07) }
.btn--solid{ background:var(--ink); color:var(--bg-deep); font-weight:600 }
.btn--solid:hover{ background:#fff }
.btn--soft{ background:var(--surface-2); border-color:var(--line); color:var(--ink) }
.btn--soft:hover{ background:var(--surface-3); border-color:#2e3543 }
.btn--ghost{ background:transparent; border-color:var(--line); color:var(--ink-2) }
.btn--ghost:hover{ background:var(--surface-2); color:var(--ink) }
.btn--lg{ --bh:50px; padding:0 26px; font-size:.97rem }
.btn--sm{ --bh:32px; padding:0 13px; font-size:var(--fs-xs) }
.btn--block{ width:100%; }
.btn--up{ background:var(--up); color:#04150c; font-weight:600 }
.btn--down{ background:var(--down); color:#1a0407; font-weight:600 }

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(16px,2.2vw,24px);
}
.card--flush{ padding:0; overflow:hidden }
.card--raise{ box-shadow:var(--shadow-1) }
.card--glow{
  box-shadow:var(--shadow-2);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
}
.panel{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r) }

.stat{ display:flex; flex-direction:column; gap:5px }
.stat__k{ font-size:var(--fs-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--faint); font-family:var(--mono) }
.stat__v{ font-family:var(--mono); font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem); font-weight:500; letter-spacing:-.045em; line-height:1 }
.stat__s{ font-size:var(--fs-xs); color:var(--muted) }

.divide{ height:1px; background:var(--line); border:0; margin:0 }

/* ============================================================
   BADGES / CHIPS
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  height:21px; padding:0 8px; border-radius:6px;
  font-family:var(--mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  background:var(--surface-3); color:var(--ink-2); border:1px solid var(--line);
}
.badge--brass{ background:var(--brass-wash); color:var(--brass); border-color:var(--brass-dim) }
.badge--up{ background:var(--up-wash); color:var(--up); border-color:rgba(53,209,138,.28) }
.badge--down{ background:var(--down-wash); color:var(--down); border-color:rgba(255,95,109,.28) }
.badge--violet{ background:var(--violet-wash); color:#a79bff; border-color:rgba(125,109,255,.3) }

.chip{
  display:inline-flex; align-items:center; gap:7px;
  height:33px; padding:0 13px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--muted); font-size:var(--fs-xs); cursor:pointer;
  transition:all .16s var(--ease); white-space:nowrap;
}
.chip:hover{ color:var(--ink); border-color:#2e3543 }
.chip[aria-pressed="true"],.chip.is-on{
  background:var(--brass-wash); border-color:var(--brass-dim); color:var(--brass-hi);
}
.chip__n{ font-family:var(--mono); font-size:var(--fs-micro); color:var(--faint) }
.chip[aria-pressed="true"] .chip__n,.chip.is-on .chip__n{ color:var(--brass) }

.chiprow{ display:flex; gap:7px; flex-wrap:wrap }
.chiprow--scroll{
  flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.chiprow--scroll::-webkit-scrollbar{ height:5px }

/* ============================================================
   UNIT GLYPH (replaces flag emoji — drawn, not pictorial)
   ============================================================ */
.uglyph{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:none; border-radius:10px;
  font-family:var(--mono); font-size:.86rem; font-weight:700; letter-spacing:-.04em;
  background:var(--surface-3); border:1px solid var(--line); color:var(--ink);
  overflow:hidden; text-overflow:clip;
}
.uglyph--sm{ width:26px; height:26px; border-radius:8px; font-size:.7rem }
.uglyph--lg{ width:46px; height:46px; border-radius:13px; font-size:1.1rem }

.coinart{
  width:38px; height:38px; flex:none; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:.82rem; letter-spacing:-.05em;
  color:#0a0b0d; position:relative; overflow:hidden;
}
.coinart--lg{ width:64px; height:64px; border-radius:18px; font-size:1.3rem }

/* ============================================================
   TABLE
   ============================================================ */
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
table.dt{ width:100%; border-collapse:separate; border-spacing:0; min-width:820px }
table.dt th{
  position:sticky; top:0; z-index:2;
  text-align:left; padding:11px 14px;
  font-family:var(--mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
table.dt th.sortable{ cursor:pointer; user-select:none }
table.dt th.sortable:hover{ color:var(--ink-2) }
table.dt th .sarrow{ opacity:0; margin-left:4px }
table.dt th[data-dir] .sarrow{ opacity:1; color:var(--brass) }
table.dt td{ padding:12px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle }
table.dt tbody tr{ transition:background .14s var(--ease); cursor:pointer }
table.dt tbody tr:hover{ background:var(--surface-2) }
table.dt .ta-r{ text-align:right }
table.dt .ta-c{ text-align:center }

.cellcoin{ display:flex; align-items:center; gap:11px; min-width:0 }
.cellcoin__t{ min-width:0 }
.cellcoin__n{ font-size:var(--fs-sm); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px }
.cellcoin__s{ font-family:var(--mono); font-size:var(--fs-micro); color:var(--faint); letter-spacing:.05em }

/* curve meter */
.meter{ width:74px; height:5px; border-radius:99px; background:var(--surface-3); overflow:hidden; flex:none }
.meter i{ display:block; height:100%; background:linear-gradient(90deg,var(--brass-dim),var(--brass)); border-radius:99px }
.meter--wide{ width:100% }
.meter--tall{ height:8px }

/* ============================================================
   FORMS
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:7px }
.label{ font-size:var(--fs-sm); font-weight:500; color:var(--ink) }
.hint{ font-size:var(--fs-xs); color:var(--muted); line-height:1.5 }
.err{ font-size:var(--fs-xs); color:var(--down) }

.input,.select,.textarea{
  width:100%; background:var(--bg-deep); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 13px; font:inherit; font-size:var(--fs-sm);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input::placeholder,.textarea::placeholder{ color:var(--faint) }
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--brass-dim); box-shadow:0 0 0 3px var(--brass-wash);
}
.textarea{ resize:vertical; min-height:84px; line-height:1.55 }
.select{
  appearance:none; cursor:pointer; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.input--num{ font-family:var(--mono); letter-spacing:-.02em }

.inputgroup{ position:relative; display:flex; align-items:center }
.inputgroup .input{ padding-right:74px }
.inputgroup__suffix{
  position:absolute; right:11px; font-family:var(--mono); font-size:var(--fs-xs);
  color:var(--muted); pointer-events:none;
}

/* segmented control */
.seg{ display:inline-flex; padding:3px; background:var(--surface-3); border-radius:var(--r-pill); gap:2px }
.seg button{
  border:0; background:transparent; color:var(--muted); cursor:pointer;
  padding:6px 15px; border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:500;
  transition:all .16s var(--ease);
}
.seg button:hover{ color:var(--ink) }
.seg button[aria-selected="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.4) }
.seg--block{ display:flex } .seg--block button{ flex:1 }
/* On narrow screens a long segmented control would clip its last option. */
@media (max-width:760px){
  .seg:not(.seg--block){
    max-width:100%; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .seg:not(.seg--block)::-webkit-scrollbar{ display:none }
  .seg:not(.seg--block) button{ flex:none; white-space:nowrap }
}
.seg--buy button[aria-selected="true"][data-side="buy"]{ background:var(--up); color:#04150c }
.seg--buy button[aria-selected="true"][data-side="sell"]{ background:var(--down); color:#1a0407 }

/* range slider */
.rangebox{ display:flex; flex-direction:column; gap:9px }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:99px;
  background:var(--surface-3); cursor:pointer; outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
  background:var(--brass); border:3px solid var(--bg); cursor:grab;
  box-shadow:0 0 0 1px var(--brass-dim);
}
input[type=range]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--brass);
  border:3px solid var(--bg); cursor:grab;
}
.ticks{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:var(--fs-micro); color:var(--faint) }

/* dropzone */
.drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  aspect-ratio:1; border:1px dashed var(--line); border-radius:var(--r);
  background:var(--bg-deep); cursor:pointer; text-align:center; padding:12px;
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.drop:hover{ border-color:var(--brass-dim); background:var(--surface) }
.drop img{ width:100%; height:100%; object-fit:cover; border-radius:calc(var(--r) - 1px) }

/* step marker */
.step{ display:flex; gap:clamp(12px,2vw,22px) }
.step__n{
  flex:none; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:700;
  background:var(--brass-wash); color:var(--brass); border:1px solid var(--brass-dim);
}
.step__body{ flex:1; min-width:0 }

/* ============================================================
   DRAWER / MODAL
   ============================================================ */
.scrim{
  position:fixed; inset:0; z-index:90; background:rgba(4,5,7,.72);
  backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .22s var(--ease);
}
.scrim.is-open{ opacity:1; pointer-events:auto }

.drawer{
  position:fixed; z-index:95; top:0; right:0; bottom:0; width:min(100%,430px);
  background:var(--surface); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .3s var(--ease);
  display:flex; flex-direction:column; box-shadow:var(--shadow-2);
}
.drawer.is-open{ transform:none }
.drawer__head{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line) }
.drawer__body{ padding:20px; overflow-y:auto; flex:1 }
.drawer__foot{ padding:16px 20px; border-top:1px solid var(--line) }
.iconbtn{
  width:32px; height:32px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--surface-2); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted); transition:all .16s var(--ease);
}
.iconbtn:hover{ color:var(--ink); border-color:#2e3543 }

/* ============================================================
   TOAST
   ============================================================ */
.toasts{
  position:fixed; z-index:120; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;
  width:min(100% - 32px, 460px);
}
.toast{
  width:100%; display:flex; align-items:flex-start; gap:10px;
  background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; font-size:var(--fs-sm); box-shadow:var(--shadow-2);
  animation:toast-in .3s var(--ease);
}
.toast--ok{ border-color:rgba(53,209,138,.3) }
.toast--err{ border-color:rgba(255,95,109,.3) }
.toast__dot{ width:7px; height:7px; border-radius:50%; background:var(--brass); margin-top:7px; flex:none }
.toast--ok .toast__dot{ background:var(--up) } .toast--err .toast__dot{ background:var(--down) }
@keyframes toast-in{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  border-block:1px solid var(--line-soft); background:var(--bg-deep);
  overflow:hidden; padding-block:9px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker__track{ display:flex; gap:26px; width:max-content; animation:slide 52s linear infinite }
.ticker:hover .ticker__track{ animation-play-state:paused }
.ticker__item{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:var(--fs-xs); white-space:nowrap }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ============================================================
   CHART
   ============================================================ */
.chartbox{ position:relative; width:100%; aspect-ratio:16/8; min-height:220px }
.chartbox svg{ width:100%; height:100%; overflow:visible }
.crosshair{
  position:absolute; pointer-events:none; background:var(--surface-3);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 10px;
  font-family:var(--mono); font-size:var(--fs-micro); line-height:1.6;
  opacity:0; transition:opacity .12s; white-space:nowrap; z-index:5;
}
.spark{ width:64px; height:24px; flex:none }

/* ============================================================
   MISC
   ============================================================ */
.addr{
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted);
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  padding:3px 7px; border-radius:6px; background:var(--surface-2); border:1px solid var(--line);
  transition:all .16s var(--ease);
}
.addr:hover{ color:var(--ink); border-color:#2e3543 }

.kv{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:var(--fs-sm) }
.kv:last-child{ border-bottom:0 }
.kv dt{ color:var(--muted) } .kv dd{ margin:0; font-family:var(--mono); letter-spacing:-.02em }

.empty{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:56px 20px; text-align:center }
.skel{ background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2)); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:6px }
@keyframes shimmer{ to{ background-position:-200% 0 } }

.note{
  border-left:2px solid var(--brass-dim); padding:2px 0 2px 14px;
  font-size:var(--fs-sm); color:var(--ink-2); line-height:1.6;
}
.warnbox{
  background:var(--down-wash); border:1px solid rgba(255,95,109,.24);
  border-radius:var(--r); padding:14px 16px; font-size:var(--fs-sm); color:#ffc2c7;
}

.pager{ display:flex; align-items:center; justify-content:center; gap:10px; padding:20px }

/* footer */
.foot{ border-top:1px solid var(--line-soft); padding-block:44px 34px; background:var(--bg-deep) }
.foot__grid{ display:grid; gap:30px; grid-template-columns:1.4fr repeat(3,1fr) }
@media (max-width:820px){ .foot__grid{ grid-template-columns:1fr 1fr } }
.foot h4{ font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; font-weight:500 }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px }
.foot a{ font-size:var(--fs-sm); color:var(--muted); transition:color .16s }
.foot a:hover{ color:var(--ink) }

/* reveal on scroll */
[data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
[data-reveal].is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none } }

/* page head */
.pagehead{ padding-block:clamp(34px,5vw,60px) clamp(20px,3vw,32px) }
.pagehead h1{ margin-bottom:12px }
.pagehead .lead{ max-width:62ch }

/* sticky aside */
.sticky{ position:sticky; top:calc(var(--nav-h) + 20px) }

.split{ display:grid; gap:clamp(18px,2.5vw,30px); grid-template-columns:minmax(0,1fr) 370px; align-items:start }
@media (max-width:1000px){ .split{ grid-template-columns:1fr } .sticky{ position:static } }

.hidden{ display:none !important }
.vh{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}