/* NM Can Data - shared tokens. Dark is the default; html[data-theme=light] swaps the palette (assets/theme.js sets it). */
:root{
  --bg:#07080a; --bg-2:#0c0d10; --panel:rgba(11,12,15,.80); --panel-solid:#0e0f13; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#f3f1ea; --text-2:#b9b6ad; --muted:#7c7a74;
  --up:#1dff7c; --down:#ff2d78; --flat:#8a8f98; --new:#00e5ff; --mag:#ffd60a; --violet:#b56cff; --orange:#ff8a1f;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --tint:255,255,255;        /* rgba(var(--tint),a): subtle fills/borders that read on either theme */
  --on-text:#07080a;         /* text on a var(--text) background */
  --tip-bg:#000; --ring:#07080a; --glow:1;
  color-scheme:dark;
}
html[data-theme=light]{
  --bg:#f4f2ed; --bg-2:#ebe8e1; --panel:rgba(255,255,255,.88); --panel-solid:#ffffff; --line:rgba(22,20,15,.10); --line-2:rgba(22,20,15,.18);
  --text:#17150f; --text-2:#4a463e; --muted:#7d776b;
  --up:#00a352; --down:#e0115f; --flat:#8a8f98; --new:#0089b8; --mag:#b88600; --violet:#7a3fe0; --orange:#dc6300;
  --tint:22,20,15; --on-text:#ffffff; --tip-bg:#ffffff; --ring:#ffffff; --glow:0;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.num{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.delta.up{color:var(--up)} .delta.down{color:var(--down)} .delta.flat{color:var(--text-2)}

/* top nav */
.topnav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:4px;padding:5px;
  background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;
  animation:navIn .7s var(--ease-out) both}
.topnav a{text-decoration:none;color:var(--text-2);font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:999px;transition:background .2s,color .2s;white-space:nowrap}
.topnav a:hover{color:var(--text);background:rgba(var(--tint),.06)}
.topnav a.on{color:var(--on-text);background:var(--text)}
.topnav .logo{white-space:nowrap;display:flex;align-items:center;gap:7px;color:var(--text);font-weight:700;padding:7px 12px 7px 10px}
.logo i{width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up),0 0 18px var(--up);animation:breathe 2.6s ease-in-out infinite}
.soon{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-left:4px}
@keyframes navIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sample{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#07080a;background:var(--mag);border-radius:4px;padding:2px 6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:760px){.topnav{top:8px;max-width:calc(100% - 16px);overflow:auto}.topnav .logo span{display:none}}

/* theme toggle (added to every .topnav by assets/theme.js) */
.theme-toggle{display:grid;place-items:center;width:32px;height:32px;margin-left:2px;border-radius:50%;border:0;background:rgba(var(--tint),.07);color:var(--text);cursor:pointer;transition:background .2s,transform .3s var(--ease-out)}
.theme-toggle:hover{background:rgba(var(--tint),.14)} .theme-toggle:active{transform:scale(.9)}
.theme-toggle svg{width:16px;height:16px;transition:transform .5s var(--ease-out)}
.theme-toggle:hover svg{transform:rotate(25deg)}
html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color .35s ease,border-color .35s ease,color .35s ease,fill .35s ease,stroke .35s ease!important}
html[data-theme=light] .logo i{box-shadow:0 0 6px rgba(0,163,82,.5)}
html[data-theme=light] .sample{color:#fff}
