/* Noctis Agentic: layout and components. Every colour comes from tokens.css;
   the values follow the design files (desktop pixel sizes × --pxs). */

*, *::before, *::after { box-sizing: border-box; }
body { background: var(--paper); font: 400 14px/1.5 var(--body); color: var(--ink); }
#root { min-height: 100vh; }
img { display: block; }
.pixel { image-rendering: pixelated; }
.pix { font-family: var(--pix); font-weight: 400; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
.grow { flex: 1; min-width: 0; }
.r { text-align: right; }
.t2 { color: var(--t2); } .t3 { color: var(--t3); } .t4 { color: var(--t4); } .t5 { color: var(--t5); }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm { display: block; font: 600 12.5px/1.2 var(--mono); color: var(--ink); }
.sub { display: block; margin-top: 3px; font: 500 10px/1.2 var(--mono); color: var(--t4); }
.lbl { font: 600 8.5px/1.3 var(--mono); letter-spacing: .1em; color: var(--t4); }
.kick { font: 600 9.5px/1 var(--mono); letter-spacing: .12em; color: var(--blue-d); }
.kick.sm { font-size: 8.5px; letter-spacing: .1em; }
.meta { margin-top: 8px; font: 500 11px/1.3 var(--mono); color: var(--t4); }
.p12 { margin-top: 8px; font: 400 12px/1.5 var(--body); color: var(--t3); }
.p13 { margin-top: 8px; font: 400 12.5px/1.55 var(--body); color: var(--t3); }
.note { margin-top: 12px; font: 400 12px/1.5 var(--body); color: var(--t4); }
.empty-note { padding: 26px 18px; font: 400 13px/1.5 var(--body); color: var(--t3); }
.dot { flex: none; display: inline-block; width: 6px; height: 6px; background: var(--green); animation: mtBlink 1.4s steps(2) infinite; }
.caret { color: var(--c1); animation: agCaret 1s steps(1) infinite; }
.caret-block { flex: none; width: 9px; height: 18px; background: var(--green); animation: agCaret 1s steps(1) infinite; }
.caret-block.sm { width: 8px; height: 15px; }

/* Motion off, or the viewer prefers reduced motion: nothing moves. */
.na-still .btn-drift, .na-still .dot, .na-still .caret, .na-still .caret-block,
.na-still .tk-track, .na-still .feed-row.in, .na-still .m-feed.in, .na-still .bz-led { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .btn-drift, .dot, .caret, .caret-block, .tk-track, .feed-row.in, .m-feed.in, .bz-led { animation: none !important; }
}

/* ---------------------------------------------------------------- buttons, chips */
.btn-drift {
  display: inline-flex; align-items: center; justify-content: center; flex: none; white-space: nowrap;
  height: 36px; padding: 0 14px; border: none; color: #fff; text-decoration: none;
  font: 400 calc(11.5px * var(--pxs)) / 1 var(--pix);
  background: var(--drift); background-size: 300% 100%; animation: dgDrift 14s linear infinite; box-shadow: var(--bevel);
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}
.btn-drift:hover { color: #fff; filter: brightness(1.08); }
.btn-drift:focus-visible { clip-path: none; outline: 2px solid var(--blue); outline-offset: 2px; }
.btn-drift.big { height: 46px; padding: 0 20px; font-size: calc(13px * var(--pxs)); }
.btn-out {
  display: inline-flex; align-items: center; justify-content: center; flex: none; white-space: nowrap;
  height: 34px; padding: 0 12px; border: 2px solid var(--c); background: var(--desk); color: var(--c); text-decoration: none;
  font: 400 calc(11px * var(--pxs)) / 1 var(--pix);
}
.btn-out:hover { background: var(--c); color: var(--chip-fg); }
.btn-out.big { height: 46px; padding: 0 18px; font-size: calc(13px * var(--pxs)); }
.btn-out.sm { height: 30px; padding: 0 10px; font-size: 14px; }
.chip { flex: none; white-space: nowrap; padding: 5px 9px; border: 2px solid var(--c); color: var(--c); font: 700 9.5px/1 var(--mono); letter-spacing: .1em; }
.chip.fill { background: var(--c); color: var(--chip-fg); }
.chip.sm { padding: 3px 6px; font-size: 8.5px; letter-spacing: .08em; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.linkbtn { border: none; background: none; padding: 0; font: 600 8.5px/1 var(--mono); letter-spacing: .1em; color: var(--blue-t); }
.linkbtn:hover { color: var(--ink); }
.more { margin-left: auto; font: 600 10px/1 var(--mono); letter-spacing: .08em; white-space: nowrap; }
.numtile { flex: none; width: 26px; height: 26px; display: grid; place-items: center; color: var(--chip-fg); font-size: calc(12px * var(--pxs)); line-height: 1; }
.numtile.big { width: 40px; height: 40px; font-size: calc(14px * var(--pxs)); }
.clogo { flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--hue); color: var(--chip-fg); font-family: var(--logo); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.zk { flex: none; padding: 4px 6px; background: var(--panel-2); border: 1px solid var(--panel-rule); font: 700 8.5px/1 var(--mono); letter-spacing: .08em; color: var(--green); }
.bar { height: 10px; margin-top: 6px; }
.bar.tall { height: 12px; }
.xp-h { display: flex; justify-content: space-between; gap: 8px; }
.tilt { border: 2px solid var(--green); transform: perspective(500px) rotateY(-22deg) rotateX(10deg); box-shadow: 8px 8px 0 #FF2FB0; }

/* ---------------------------------------------------------------- the frame, and the 90s monitor */
.na-frame { position: relative; z-index: 0; display: flex; flex-direction: column; color: var(--ink); font: 400 14px/1.5 var(--body); }
.na-screen { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.na-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; background-color: var(--paper); background-image: radial-gradient(rgba(0,255,163,.07) 1px, transparent 1px); background-size: 16px 16px; }
/* A desktop never scrolls the window: the ticker and the rail stay put and the content column is the
   only scroller, as on noctis.zone and noctisswap.zone. A phone scrolls the window as before. */
html.na-desk, html.na-desk body { height: 100%; overflow: hidden; }
html.na-desk .na-frame { height: 100vh; }
.na-shell { flex: 1; min-height: 0; display: flex; }
.na-col { flex: 1; min-width: 0; overflow-y: auto; }
.na-frame .crt-glass { display: none; background: radial-gradient(ellipse 62% 34% at 30% 10%, rgba(255,255,255,.11), transparent 72%), radial-gradient(ellipse 120% 115% at 50% 50%, transparent 56%, rgba(0,0,0,.28) 78%, rgba(0,0,0,.7) 100%), linear-gradient(90deg, rgba(0,0,0,.32), transparent 5%, transparent 95%, rgba(0,0,0,.32)), linear-gradient(180deg, rgba(0,0,0,.26), transparent 6%, transparent 94%, rgba(0,0,0,.34)); }
.na-bezel { display: none; }
html.na-retro, html.na-retro body { height: 100%; overflow: hidden; }
.na-frame[data-retro="1"] { position: fixed; inset: 0; padding: var(--crt-pad); background: var(--crt-bezel); }
.na-frame[data-retro="1"] .na-screen { border: var(--crt-screen-border); border-radius: var(--crt-radius); overflow: hidden; box-shadow: var(--crt-ring); }
.na-frame[data-retro="1"] .scanlines { position: absolute; }
.na-frame[data-retro="1"] .crt-glass { display: block; }
.na-frame[data-retro="1"] .na-bezel { flex: none; height: 74px; display: flex; align-items: center; gap: 22px; padding: 0 26px; }
.bz-brand { font: 400 calc(20px * var(--pxs)) / 1 var(--pix); letter-spacing: .16em; color: #8C8471; text-shadow: 1px 1px 0 #F2ECDD; }
.bz-model { font: 600 10px/1 var(--mono); letter-spacing: .14em; color: #8C8471; }
.bz-grille { flex: 1; height: 8px; background: repeating-linear-gradient(90deg, #B9B09A 0 2px, transparent 2px 5px); }
.bz-keys { display: flex; gap: 8px; }
.bz-keys span { width: 18px; height: 10px; border-radius: 2px; background: linear-gradient(#E8E1CF, #B3AA93); border: 1px solid #9C937D; }
.bz-led { width: 8px; height: 8px; border-radius: 50%; background: #00FFA3; border: 1px solid #1C7460; box-shadow: 0 0 6px #00FFA3; animation: mtBlink 3s ease-in-out infinite; }
.bz-knob { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F2ECDD, #B3AA93); border: 2px solid #9C937D; }

/* ---------------------------------------------------------------- ticker */
.tk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-height: 30px; padding: 5px 24px; background: var(--desk); border-bottom: 2px solid var(--rule); white-space: nowrap; }
.tk-live { display: flex; align-items: center; gap: 7px; flex: none; font: 600 9.5px/1 var(--mono); letter-spacing: .12em; color: var(--green); }
.tk-live .dot { animation-duration: 1.6s; }
.tk-concept { flex: none; padding: 3px 6px; border: 1px solid var(--amber); font: 700 9px/1 var(--mono); letter-spacing: .1em; color: var(--amber); }
.tk-sep { flex: none; width: 2px; height: 12px; background: var(--rule); }
.tk-syms { flex: 1 1 160px; min-width: 0; overflow: hidden; }
.tk-track { display: flex; gap: 22px; width: max-content; animation: tkRoll 48s linear infinite; }
.tk-dup { display: flex; gap: 22px; }
.tk-syms:hover .tk-track { animation-play-state: paused; }
@keyframes tkRoll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 11px)); } }
.na-still .tk-dup { display: none; }
@media (prefers-reduced-motion: reduce) { .tk-dup { display: none; } }
.tk-sym { flex: none; font: 500 9.5px/1 var(--mono); letter-spacing: .06em; color: var(--t3); }
.tk-right { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 12px; flex: 1 1 auto; margin-left: auto; font: 600 9.5px/1 var(--mono); letter-spacing: .08em; }
.tk-a { flex: none; white-space: nowrap; line-height: 12px; color: var(--t3); }
.tk-a:hover { color: var(--ink); }
.tk-mc { color: var(--green); }
.tk-btn { flex: none; white-space: nowrap; height: 20px; padding: 0 8px; border: 1px solid var(--rule-strong); background: none; color: var(--t3); font: 600 9.5px/1 var(--mono); letter-spacing: .08em; }
.tk-btn.on { border-color: var(--c); color: var(--c); }
.tk-btn.fill.on { background: var(--c); color: var(--chip-fg); }

/* ---------------------------------------------------------------- header, footer */
/* The brand kit's lockup, whole: the spear's fade starts transparent at the image's left edge, so
   wherever it sits the line fades in rather than being cut. The phone's app bar draws it as .brand. */
.brand { display: block; flex: none; width: 190px; margin-left: -28px; }
.lockup { display: block; width: 100%; height: auto; }
.gt { font: 700 12px/1 var(--mono); color: var(--c2); }
.big-search input, .m-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; font: 500 12px/1 var(--mono); color: var(--ink); }
.big-search:focus-within, .m-search:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- rail */
/* 238px, as on noctis.zone and noctisswap.zone, drawn in this site's own hand: 2px rules, square
   corners, the pixel face for the pages. It never scrolls internally: the rows are flex 1 1 0 with a
   22-44px clamp, so they expand on a tall window and compress on a short one. */
.na-rail { width: 238px; flex: none; display: flex; flex-direction: column; background: var(--surface); border-right: 2px solid var(--rule); overflow: hidden; }
.na-rail-top { flex: none; padding: 18px 16px 14px; border-bottom: 2px solid var(--rule); }
/* The whole lockup, spear included, centred on the rail: 220px wide and 50px tall, so the line fades
   in 9px off the rail's edge instead of being cut by it. */
.na-rail-mark { display: block; width: 220px; margin-left: calc(50% - 110px); }
.na-rail-sub { margin-top: 10px; font: 500 9.5px/1.5 var(--mono); letter-spacing: .1em; color: var(--t4); text-align: center; }
.na-rail-sub span { display: block; }
.na-rail-nav { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px; }
.na-rail-row { flex: 1 1 0; min-height: 22px; max-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-left: 2px solid transparent; color: var(--t3); }
.na-rail-row:hover { background: var(--hover); color: var(--ink); }
.na-rail-row.on { background: var(--desk); border-left-color: var(--c); color: var(--c); }
.na-rail-num { flex: none; font: 600 9.5px/1.4 var(--mono); letter-spacing: .06em; color: var(--t5); }
.na-rail-row.on .na-rail-num { color: var(--c); }
.na-rail-label { flex: 1; min-width: 0; font: 400 calc(11.5px * var(--pxs)) / 1 var(--pix); letter-spacing: .02em; white-space: nowrap; }
/* Rows out: the sister sites named with their brand-kit words (img/brand/words.svg), ZONE in cyan and
   SWAP in magenta, as each is drawn on a dark ground; a height sets the size and the viewBox's ratio
   the width. The arrow sits where a count would and is the one thing that says the row leaves. */
.na-word { display: block; flex: none; width: auto; overflow: visible; }
.na-word--zone { aspect-ratio: 770 / 150; height: 11px; color: var(--c2); }
.na-word--swap { aspect-ratio: 775 / 151; height: 11px; color: var(--c1); }
.na-rail-out { flex: none; font: 600 9.5px/1 var(--mono); color: var(--t5); }
.na-rail-row--zone:hover .na-rail-out { color: var(--c2); }
.na-rail-row--swap:hover .na-rail-out { color: var(--c1); }
/* Sign-in, the last item in the list, where the other two sites keep their wallet; signed in, it
   names the agent and opens My Agent. */
.na-rail-signin, .na-rail-me { flex: none; width: 100%; height: 42px; margin-top: 9px; }
.na-rail-me { display: flex; align-items: center; gap: 9px; padding: 0 10px 0 6px; border: 2px solid var(--green); background: var(--desk); font: 400 calc(11.5px * var(--pxs)) / 1 var(--pix); color: var(--green); }
.na-rail-me img { flex: none; }
.na-rail-me:hover, .na-rail-me[aria-current="page"] { color: var(--ink); }
/* Short windows: the tagline gives its height back and everything in the rail gives a little. */
@media (max-height: 620px) {
  .na-rail-sub { display: none; }
  .na-rail-nav { padding: 4px 8px; }
  .na-rail-row { min-height: 19px; }
  .na-rail-signin, .na-rail-me { height: 34px; margin-top: 5px; }
}
/* In the 90s monitor the screen's corners are curved: lift the list clear of the lower one. */
.na-frame[data-retro="1"] .na-rail-nav { padding-bottom: 38px; }

.mn { max-width: 1400px; margin: 0 auto; padding: 0 28px 80px; }
/* Home's header area runs edge to edge in the content column; the sections under it keep the
   page's measure. */
.mn.mn--bleed { max-width: none; padding: 0; }
.mn-in { max-width: 1400px; margin: 0 auto; padding: 0 28px 80px; }
.ft { border-top: 2px solid var(--rule); background: var(--surface); }
.ft-in { max-width: 1400px; margin: 0 auto; padding: 34px 28px; display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap: 30px; }
.ft-brand { width: 190px; margin-left: -28px; }
.ft-p { margin-top: 12px; max-width: 340px; font: 400 12.5px/1.6 var(--body); color: var(--t4); }
.ft-col { display: flex; flex-direction: column; gap: 9px; font: 500 12px/1.3 var(--mono); color: var(--t3); }
.ft-col a { color: var(--t3); }
.ft-col a:hover { color: var(--ink); }
.ft-k { font: 600 9px/1 var(--mono); letter-spacing: .12em; color: var(--t5); }
.ft-note { margin-top: -5px; font: 500 10px/1.3 var(--mono); color: var(--t5); }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 95; max-width: calc(100vw - 32px); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 12px 16px; background: var(--desk); border: 2px solid var(--green); font: 600 12px/1.3 var(--mono); color: var(--green); transition: opacity .15s, transform .15s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
/* On a phone the toast drops in under the ticker, clear of the tab bar and the Sign & Sync bar. */
html.na-mobile .toast { top: calc(58px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -12px); }
html.na-mobile .toast.on { transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- shared page parts */
.sec { margin-top: 28px; }
.page-h { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: 18px; }
.page-h > :last-child:not(:first-child) { margin-left: auto; }
.h1 { margin-top: 10px; font-size: calc(34px * var(--pxs)); line-height: 1; text-wrap: balance; }
.h1.tight { line-height: 1.05; }
.h2 { font-size: calc(17px * var(--pxs)); line-height: 1; }
.h2.big { font-size: calc(20px * var(--pxs)); }
.h3 { font-size: calc(15px * var(--pxs)); line-height: 1; }
.intro { margin-top: 14px; max-width: 620px; font: 400 15px/1.6 var(--body); color: var(--t2); text-wrap: pretty; }
.intro.wide { max-width: 720px; }
.card { border: 2px solid var(--rule); background: var(--surface); }
.card.panel { background: var(--panel); }
.card-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 2px solid var(--rule-2); }
.card-h.col { flex-direction: column; align-items: flex-start; gap: 6px; }
.card-h-note { margin-left: auto; font: 500 10px/1 var(--mono); color: var(--t4); }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sec-h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.sec-note { font: 500 11px/1 var(--mono); color: var(--t4); }
.thead, .trow { display: grid; gap: 0 12px; padding: 0 18px; }
.thead { padding-top: 9px; padding-bottom: 9px; background: var(--panel-2); font: 600 8.5px/1.2 var(--mono); letter-spacing: .1em; color: var(--t3); }
.trow { align-items: center; min-height: 40px; border-bottom: 1px solid var(--rule-faint); font: 500 11.5px/1.3 var(--mono); color: var(--t2); }
.trow.short { min-height: 38px; }
a.trow:hover { background: var(--hover); }
.cell { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tabs { display: flex; border-bottom: 2px solid var(--rule-2); overflow-x: auto; }
.tab { flex: none; padding: 14px 18px; border: none; border-bottom: 3px solid transparent; background: none; color: var(--t4); font: 400 calc(12px * var(--pxs)) / 1 var(--pix); }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--c); border-bottom-color: var(--c); }
.tabs.fill .tab { flex: 1; padding: 12px 4px; }
.tab.sm { font-size: calc(11px * var(--pxs)); }
.kvs { display: grid; gap: 7px; font: 500 11px/1.3 var(--mono); color: var(--t4); }
.kv { display: flex; justify-content: space-between; gap: 10px; }
.kv > :last-child { text-align: right; }
.kvs.record { gap: 9px; margin-top: 14px; }
.sw { flex: none; width: 46px; height: 24px; padding: 3px; border: 2px solid var(--rule-strong); background: var(--desk); display: flex; justify-content: flex-start; }
.sw span { width: 14px; height: 14px; background: var(--t5); }
.sw.on { border-color: var(--green); justify-content: flex-end; }
.sw.on span { background: var(--green); }
.risk { display: flex; gap: 2px; margin-top: 6px; }
.risk span { width: 8px; height: 13px; }
.risk.sm { margin-top: 0; }
.risk.sm span { width: 7px; height: 12px; }
.split { display: flex; height: 22px; margin-top: 14px; background: var(--bar-empty); }
.split-l { display: grid; gap: 8px; margin-top: 14px; font: 500 11px/1.3 var(--mono); }
.split-l > div { display: flex; align-items: center; gap: 8px; }
.sw-dot { flex: none; width: 10px; height: 10px; }
.idle { border: 2px dashed var(--rule-strong); background: var(--surface); padding: 40px; display: flex; gap: 26px; align-items: center; }
.idle-n { font-size: calc(40px * var(--pxs)); line-height: 1; color: var(--t5); }
.idle-t { font-size: calc(16px * var(--pxs)); line-height: 1.3; color: var(--amber); }
.idle p { margin-top: 6px; max-width: 520px; font: 400 13.5px/1.6 var(--body); color: var(--t3); }
.nomatch { padding: 28px 16px; text-align: center; }
.nomatch .pix { font-size: calc(14px * var(--pxs)); line-height: 1.3; }
.nomatch p { margin-top: 8px; font: 400 12.5px/1.5 var(--body); color: var(--t3); overflow-wrap: anywhere; }
.illus { flex: none; padding: 8px 10px; border: 2px solid var(--amber); font: 700 10px/1 var(--mono); letter-spacing: .1em; color: var(--amber); }
.illus.sm { display: inline-block; padding: 4px 6px; font-size: 8.5px; letter-spacing: .08em; }

/* ---------------------------------------------------------------- 01 home */
/* The header area is at least the film's own 16:9 at its width, never capped (Jinx: the full height of
   the city view), and taller where its words need it. Never wider than 16:9, so the film's whole height
   always shows: where the words make it taller, the film's sides are trimmed, never its sky or its
   street. The paragraph's banner sits along its foot, and the figures follow under it. */
.hero { position: relative; display: flex; flex-direction: column; min-height: 560px; min-height: 56.25cqw; background: #0B0C22; overflow: hidden; }
.city { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Home's film covers the header area, centred. The header is never wider than 16:9, so cover only ever
   trims the film's sides and its full height shows. */
.hero-film { object-fit: cover; object-position: 50% 50%; }
.hero-body { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; padding: 66px 40px 28px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.hero-body .chips { justify-content: center; }
/* Nothing sits behind the words, so the film shows whole. A one-pixel outline and a hard offset keep
   them legible over its bright day sky as over its night one, and the outlined chips take the desk's
   fill, as the clock chip does. */
.hero-body { --hs: #07090C; --ho: -1px -1px 0 var(--hs), 1px -1px 0 var(--hs), -1px 1px 0 var(--hs), 1px 1px 0 var(--hs); }
.hero-body .chip:not(.fill) { background: var(--desk); }
/* The whole lockup at noctis.zone's size: 980px wide, 222px tall. */
.hero-lockup { width: min(980px, 100%); margin: -6px 0 -4px; filter: drop-shadow(3px 3px 0 var(--hs)); }
.hero-h { max-width: 900px; font: 400 calc(40px * var(--pxs)) / 1.08 var(--pix); letter-spacing: -.01em; text-wrap: balance; text-shadow: var(--ho), 3px 3px 0 var(--hs); }
/* The paragraph, in a small banner the width of the header area along the film's foot (Jinx, 13 Oct):
   under a green rule, the words on the header's own measure, two lines on a desktop. The film shows
   through it, darkened and softened (Jinx: "not just flat black"): at 60% of the desk's black the
   words keep 4.5:1 even over a white frame, and a pixel shadow lifts them off the moving street. */
.hero-banner { position: relative; margin: auto 0 0; padding: 11px max(40px, calc((100% - 1020px) / 2)) 12px; background: rgba(7, 9, 12, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-top: 2px solid var(--c3); font: 500 14px/1.5 var(--body); color: var(--ink); text-shadow: 1px 1px 0 var(--desk); text-align: center; text-wrap: balance; }
/* The figures, in a band of their own under the header area, as on noctis.zone. */
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); background: var(--surface); border-bottom: 2px solid var(--rule); }
.hs { padding: 16px 24px 18px; border-right: 2px solid var(--rule); border-top: 3px solid var(--c); }
.hs:last-child { border-right: none; }
.hs-v { font-size: calc(22px * var(--pxs)); line-height: 1; }
.hs .lbl { margin-top: 7px; }
.clock-chip { position: absolute; top: 18px; right: 18px; display: flex; align-items: center; gap: 7px; padding: 6px 8px; background: var(--desk); border: 2px solid var(--c2); font: 600 9px/1 var(--mono); letter-spacing: .1em; color: var(--c2); white-space: nowrap; }
.home-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: 20px; margin-top: 20px; }
.stream { display: flex; align-items: center; gap: 6px; padding: 3px 5px; border: 1px solid transparent; background: none; font: 600 9px/1 var(--mono); letter-spacing: .1em; color: var(--green); }
.stream .dot { animation-duration: 1.2s; }
.stream:hover { border-color: var(--green); }
.stream.paused { color: var(--amber); }
.stream.paused .dot { background: var(--amber); animation: none; }
.feed { height: 468px; overflow: hidden; font: 500 11.5px/1 var(--mono); }
.feed-row { display: grid; gap: 0 12px; align-items: center; height: 36px; padding: 0 18px; border-bottom: 1px solid var(--rule-faint); }
.feed-row.in { animation: agIn .4s steps(4); }
.feed-ag { display: flex; align-items: center; gap: 8px; color: var(--ink); min-width: 0; }
.feed-ag img { flex: none; }
.act { justify-self: start; padding: 4px 6px; font: 700 9px/1 var(--mono); letter-spacing: .08em; color: var(--c); border: 1px solid var(--c); white-space: nowrap; }
.lrow { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--rule-faint); color: var(--ink); }
.lrow:hover { background: var(--hover); color: var(--ink); }
.lrank { width: 22px; flex: none; font-size: calc(13px * var(--pxs)); line-height: 1; }
.lrow .r .nm { font-weight: 700; }
.lrow .r .sub { font-size: 9.5px; }
.rules3 { display: grid; gap: 12px; margin-top: 14px; }
.rule3 { display: flex; gap: 12px; }
.rule3-t { display: block; font-size: calc(13px * var(--pxs)); line-height: 1.3; color: var(--ink); }
.rule3-d { display: block; margin-top: 3px; font: 400 12.5px/1.5 var(--body); color: var(--t3); }
.trending { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.tcard { display: block; border: 2px solid var(--hue); background: var(--surface); padding: 16px; color: var(--ink); transform: perspective(700px) rotateX(8deg) rotateY(-6deg); box-shadow: 6px 6px 0 var(--hue); transition: transform .2s, border-color .2s; }
.tcard:hover { border-color: var(--ink); color: var(--ink); transform: perspective(700px) rotateX(4deg) rotateY(-3deg); }
.tcard-top { display: flex; align-items: center; gap: 10px; }
.tcard-id { flex: 1; min-width: 0; }
.tcard-t { display: block; font-size: calc(14px * var(--pxs)); line-height: 1.1; }
.tcard-by { display: block; margin-top: 4px; font: 500 10.5px/1.2 var(--mono); color: var(--t4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard-ch { font: 700 11.5px/1 var(--mono); }
.tcard-meta { display: flex; justify-content: space-between; margin-top: 14px; font: 500 10px/1 var(--mono); color: var(--t4); }
.tcard-bar { display: block; height: 10px; margin-top: 7px; }
.na-still .tcard, .na-still .tcard:hover { transition: none; }

/* ---------------------------------------------------------------- the band on every other page */
/* The page's kicker and title over a short strip of the same city, edge to edge in the content
   column; the band's words line up with the page's measure under it. The title takes the header
   area's outline and hard offset, and the kicker sits on the desk's fill, as the clock chip does, so
   both read over the bright day sky as over the night one. */
.band { position: relative; background: #0B0C22; overflow: hidden; border-bottom: 2px solid var(--rule); }
.band-body { --hs: #07090C; --ho: -1px -1px 0 var(--hs), 1px -1px 0 var(--hs), -1px 1px 0 var(--hs), 1px 1px 0 var(--hs);
  position: relative; max-width: 1400px; min-height: 120px; margin: 0 auto; padding: 36px 28px 26px; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 20px; }
.band-body > :last-child:not(:first-child) { margin-left: auto; }
.band .kick { display: inline-block; padding: 5px 7px; background: var(--desk); border: 2px solid currentColor; }
.band .h1 { color: var(--ink); text-shadow: var(--ho), 3px 3px 0 var(--hs); }
.band .ranges { background: var(--desk); }

/* ---------------------------------------------------------------- 02 agents */
.big-search { display: flex; align-items: center; gap: 10px; width: 460px; max-width: 100%; height: 50px; padding: 0 14px; background: var(--desk); border: 2px solid var(--green); }
.big-search .gt { font-size: 16px; color: var(--green); }
.big-search input { font-size: 15px; }
.agents-grid { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 20px; align-items: start; }
.list-h { padding: 11px 14px; background: var(--panel-2); font: 600 8.5px/1 var(--mono); letter-spacing: .1em; color: var(--t3); }
.list { max-height: 880px; overflow: auto; }
.arow, .crow { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-bottom: 1px solid var(--rule-faint); border-left: 3px solid transparent; color: var(--ink); }
.arow:hover, .crow:hover { background: var(--hover); color: var(--ink); }
.arow.on, .crow.on { border-left-color: var(--green); background: var(--hover); }
.arow .sub { font-size: 10px; }
.tag { flex: none; font: 700 9px/1 var(--mono); letter-spacing: .06em; }
.profile { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 26px; padding: 24px; }
.profile-rings { position: absolute; inset: 0; pointer-events: none; background: repeating-radial-gradient(circle at 8% 40%, transparent 0 26px, rgba(0,255,163,.08) 26px 28px); }
.big-av { position: relative; width: 132px; height: 132px; }
.profile-id { position: relative; min-width: 0; }
.profile-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-name h2 { font-size: calc(30px * var(--pxs)); line-height: 1; }
.ident { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px 22px; margin-top: 18px; }
.idv { margin-top: 6px; font: 600 13px/1.2 var(--mono); }
.xp { margin-top: 16px; max-width: 420px; }
.profile-act { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.kpis { display: grid; border: 2px solid var(--rule); background: var(--surface); }
.kpis.six { grid-template-columns: repeat(6, minmax(0,1fr)); }
.kpi { padding: 16px; border-right: 2px solid var(--rule-2); border-top: 3px solid var(--c); }
.kpi:last-child { border-right: none; }
.kpi-v { margin-top: 9px; font-size: calc(19px * var(--pxs)); line-height: 1; }

/* ---------------------------------------------------------------- 03 coins */
.coins-grid { margin-top: 28px; display: grid; grid-template-columns: 280px minmax(0,1fr) 340px; gap: 20px; align-items: start; }
.crow { gap: 10px; padding: 10px 12px; }
.crow .nm { font-size: 12px; }
.crow .sub { font-size: 9.5px; }
.ch { font: 600 11px/1 var(--mono); }
.coin-head { display: flex; align-items: center; gap: 14px; }
.coin-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.coin-title h2 { font-size: calc(26px * var(--pxs)); line-height: 1; }
.coin-name { font: 500 13px/1 var(--body); color: var(--t3); }
.coin-by { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.by { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }
.coin-px { font-size: calc(26px * var(--pxs)); line-height: 1; }
.coin-ch { margin-top: 6px; font: 700 12px/1 var(--mono); }
.tfs { display: flex; gap: 6px; margin-top: 18px; }
.tf { padding: 6px 9px; border: 2px solid var(--c); background: none; font: 600 10px/1 var(--mono); color: var(--t4); }
.tf.on, .tf:hover { color: var(--c); }
.tf.on { background: var(--desk); }
.tf.sm { padding: 5px 7px; font-size: 9.5px; }
.chart { position: relative; height: 290px; margin-top: 14px; display: flex; gap: 3px; border-bottom: 2px solid var(--rule-2); background: linear-gradient(var(--rule-faint) 1px, transparent 1px) 0 0 / 100% 58px; }
.chart.sm { height: 170px; margin-top: 10px; gap: 2px; background-size: 100% 42px; }
.cdl { position: relative; flex: 1; height: 100%; }
.cdl i { position: absolute; left: calc(50% - 1px); width: 2px; opacity: .55; }
.cdl b { position: absolute; left: 12%; right: 12%; }
.chart.sm .cdl b { left: 10%; right: 10%; }
.coin-stats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.statv { margin-top: 6px; font: 600 13.5px/1 var(--mono); }
.ticket { border: 2px solid var(--rule-strong); background: var(--surface); }
.ticket-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.ticket-tabs span { padding: 13px; text-align: center; font-size: calc(12px * var(--pxs)); line-height: 1; color: var(--t4); background: var(--surface-2); }
.ticket-tabs span.on { color: var(--chip-fg); background: var(--green); }
.ticket-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.warn { padding: 10px 12px; border: 2px solid var(--amber); display: flex; gap: 10px; align-items: flex-start; font: 400 12px/1.5 var(--body); color: var(--t2); }
.warn .pix { font-size: calc(14px * var(--pxs)); line-height: 1; }
.field { background: var(--surface-2); border: 2px solid var(--rule); padding: 12px; }
.field-h { display: flex; justify-content: space-between; }
.field-v { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.field-v .pix { font-size: calc(12px * var(--pxs)); line-height: 1; }
.amt { font: 600 22px/1 var(--mono); color: var(--t5); }
.api-only { height: 46px; display: grid; place-items: center; border: 2px dashed var(--rule-strong); font-size: calc(12px * var(--pxs)); color: var(--t4); }
.curve-prog { margin-top: 16px; }

/* ---------------------------------------------------------------- 04 leaderboards */
.ranges { display: flex; border: 2px solid var(--rule-strong); }
.rng { height: 34px; padding: 0 13px; border: none; background: transparent; color: var(--t3); font: 600 11px/1 var(--mono); }
.rng.on { background: var(--c); color: var(--chip-fg); }
.lbtabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 2px; }
.lbtab { text-align: left; padding: 16px 18px; border: 2px solid var(--rule); background: var(--surface-2); color: var(--ink); }
.lbtab.on { border-color: var(--c); background: var(--surface); }
.lbtab-t { display: block; font-size: calc(15px * var(--pxs)); line-height: 1.2; color: var(--ink); }
.lbtab.on .lbtab-t { color: var(--c); }
.lbtab-d { display: block; margin-top: 6px; font: 400 12.5px/1.4 var(--body); color: var(--t3); }
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: end; margin-top: 26px; padding: 0 60px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink); }
.pod:hover { color: var(--ink); }
.pod img { transition: transform .3s; }
.pod-n { font-size: calc(14px * var(--pxs)); line-height: 1; }
.pod-m { font: 700 13px/1 var(--mono); }
.pod-b { width: 100%; background: var(--surface); border: 2px solid; display: grid; place-items: center; font-size: calc(34px * var(--pxs)); line-height: 1; transform: perspective(600px) rotateX(18deg); box-shadow: 0 10px 0 #07090C; }
.lbtable { margin-top: 22px; overflow-x: auto; }
.thead.wide, .trow.wide { min-width: 1100px; gap: 0 14px; }
.trow.wide { min-height: 46px; }
.lb-ag { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--ink); }
.lb-ag .nm { font-size: 11.5px; }
.lb-ag .sub { font-size: 9.5px; margin-top: 2px; }

/* ---------------------------------------------------------------- 05 strategies */
.strat-h { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 24px; align-items: end; }
.placeholder { border: 2px solid var(--amber); padding: 14px 16px; font: 400 12.5px/1.5 var(--body); color: var(--t2); }
.placeholder .pix { font-size: calc(11px * var(--pxs)); }
.placeholder.sm { padding: 10px 12px; font-size: 12px; }
.scards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin-top: 24px; }
.scard { border: 2px solid var(--rule); background: var(--surface); display: flex; flex-direction: column; }
.scard.on { border-color: var(--c); }
.scard-h { padding: 18px 18px 0; display: flex; align-items: flex-start; gap: 12px; }
.scard-t { font-size: calc(15px * var(--pxs)); line-height: 1.2; }
.scard-h .lbl { margin-top: 5px; font-size: 9px; }
.scard-d { flex: 1; margin: 12px 18px 0; font: 400 13px/1.55 var(--body); color: var(--t3); }
.scard-m { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin: 16px 18px 0; border: 2px solid var(--rule-2); }
.scard-m > div { padding: 10px; }
.scard-m > div + div { border-left: 2px solid var(--rule-2); }
.mv { margin-top: 6px; font: 700 13px/1 var(--mono); }
.scard-f { display: flex; align-items: center; gap: 10px; padding: 14px 18px 18px; font: 500 10.5px/1.3 var(--mono); }
.sbtn { margin-left: auto; height: 34px; padding: 0 12px; border: 2px solid var(--c); background: var(--desk); color: var(--c); font: 400 calc(10.5px * var(--pxs)) / 1 var(--pix); white-space: nowrap; }
.sbtn:hover, .scard.on .sbtn { background: var(--c); color: var(--chip-fg); }

/* ---------------------------------------------------------------- 06 my agent */
.signin { max-width: 560px; margin: 60px auto 0; border: 2px solid var(--rule-strong); background: var(--surface); padding: 36px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.signin p { max-width: 420px; font: 400 14px/1.6 var(--body); color: var(--t3); }
.signin .btn-drift, .signin .btn-out { margin-top: 24px; }
.oauth { margin-top: 16px; font: 500 10px/1.4 var(--mono); color: var(--t5); }
.me-h { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; border: 2px solid var(--green); background: var(--surface); }
.me-n { font-size: calc(28px * var(--pxs)); line-height: 1; }
.me-act { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 2px solid var(--c); font: 700 10px/1 var(--mono); letter-spacing: .1em; color: var(--c); }
.status .dot { width: 7px; height: 7px; background: var(--c); }
.mytabs { gap: 2px; margin-top: 18px; border-bottom-color: var(--rule); }
.mytab { padding: 14px 20px; margin-bottom: -2px; font-size: calc(12.5px * var(--pxs)); }
.mytab.on { background: var(--surface); }
.mstats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.mstat { padding: 18px; }
.mstat-v { margin-top: 12px; font-size: calc(24px * var(--pxs)); line-height: 1; }
.mstat .sub { margin-top: 8px; font-size: 10.5px; line-height: 1.3; }
.overview-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 20px; margin-top: 20px; }
.pos { min-height: 42px; }
.pos-c { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.console { background: var(--desk); font: 500 11.5px/1.6 var(--mono); }
.console .card-h { background: var(--surface); }
.tail { margin-left: auto; font: 600 9px/1 var(--mono); letter-spacing: .1em; color: var(--green); }
.log { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; }
.log-l { display: flex; gap: 10px; }
.log-l > :first-child { flex: none; }
.policy-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 360px; gap: 20px; margin-top: 20px; align-items: start; }
.policy-side { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 20px; }
.toggle-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: none; border-bottom: 1px solid var(--rule-faint); background: none; text-align: left; color: var(--ink); }
.toggle-row:hover { background: var(--hover); }
.tdesc { display: block; margin-top: 3px; font: 400 12px/1.45 var(--body); color: var(--t4); }
.sld { padding: 14px 18px; border-bottom: 1px solid var(--rule-faint); }
.sld-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sld-h .nm { font-size: 12px; }
.sld-v { font-size: calc(14px * var(--pxs)); line-height: 1; color: var(--blue-t); }
.sld input { width: 100%; margin: 10px 0 0; }
.sld-f { display: flex; justify-content: space-between; font: 500 9.5px/1 var(--mono); color: var(--t5); }
.sync { border: 2px solid var(--rule); background: var(--panel); padding: 18px; }
.sync-t { font-size: calc(13px * var(--pxs)); line-height: 1.3; color: var(--green); }
.sync.dirty { border-color: var(--amber); }
.sync.dirty .sync-t { color: var(--amber); }
.sync p { margin-top: 6px; font: 400 12.5px/1.5 var(--body); color: var(--t3); }
.sync-b { display: flex; gap: 8px; margin-top: 12px; }
.save { flex: 1; height: 40px; border: none; background: var(--surface-2); color: var(--t5); font: 400 calc(11.5px * var(--pxs)) / 1 var(--pix); }
.dirty .save { background: var(--blue); color: var(--on-blue); }
.dirty .save:hover { background: var(--blue-h); }
.save[aria-disabled="true"] { cursor: default; }
.sync-b .btn-out { height: 40px; }
.mystrat-grid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 20px; margin-top: 20px; align-items: start; }
.astrat { padding: 16px 18px; border-bottom: 1px solid var(--rule-faint); }
.astrat-h { display: flex; align-items: center; gap: 12px; }
.astrat-h .numtile { width: 30px; height: 30px; font-size: calc(11px * var(--pxs)); }
.astrat-t { font-size: calc(13.5px * var(--pxs)); line-height: 1.2; }
.astrat-a { font-size: calc(16px * var(--pxs)); line-height: 1; color: var(--blue-t); }
.astrat input { width: 100%; margin-top: 12px; }
.xbtn { flex: none; width: 28px; height: 28px; border: 2px solid var(--rule-strong); background: none; color: var(--red); font: 700 12px/1 var(--mono); }
.xbtn:hover { border-color: var(--red); }
.api-grid { display: grid; grid-template-columns: minmax(0,560px) minmax(0,1fr); gap: 20px; margin-top: 20px; align-items: start; }
.api-h { display: flex; align-items: center; justify-content: space-between; }
.keybox { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; background: var(--desk); border: 2px solid var(--rule); }
.key { flex: 1; min-width: 0; font: 600 12px/1 var(--mono); color: var(--green); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-b { display: flex; gap: 8px; margin-top: 10px; }
.api-b .btn-out { flex: 1; font-size: calc(10.5px * var(--pxs)); }
.scopes { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.scope { padding: 4px 6px; border: 1px solid var(--rule); font: 600 9px/1 var(--mono); color: var(--t5); }
.scope.on { border-color: var(--green); color: var(--green); }

/* ---------------------------------------------------------------- 07 how it works */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); margin-top: 26px; border: 2px solid var(--rule); background: var(--surface); }
.step { padding: 20px 18px; border-right: 2px solid var(--rule-2); border-top: 3px solid var(--c); }
.step:last-child { border-right: none; }
.step-n { font-size: calc(30px * var(--pxs)); line-height: 1; color: var(--c); }
.step-t { margin-top: 12px; font-size: calc(14px * var(--pxs)); line-height: 1.25; }
.step p { margin-top: 8px; font: 400 12.5px/1.55 var(--body); color: var(--t3); }
.docs-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 20px; margin-top: 20px; align-items: start; }
.param { display: grid; grid-template-columns: 200px minmax(0,1fr) 34px; gap: 14px; align-items: start; padding: 12px 18px; border-bottom: 1px solid var(--rule-faint); }
.pk { font: 600 11px/1.4 var(--mono); }
.pv { display: block; font: 600 12.5px/1.4 var(--mono); color: var(--ink); }
.pw { display: block; margin-top: 3px; font: 400 12px/1.45 var(--body); color: var(--t4); }
.pf { font: 700 13px/1 var(--mono); color: var(--amber); text-align: right; }
.kvs.fees { gap: 9px; margin-top: 14px; }
.matrix { display: grid; grid-template-columns: minmax(0,1fr) 70px 70px; margin-top: 14px; font: 500 11.5px/1 var(--mono); }
.mx-h { padding: 8px 0; color: var(--t4); font-size: 9px; letter-spacing: .1em; }
.mx-h.c, .mx-c { text-align: center; }
.mx-a, .mx-c { padding: 9px 0; border-top: 1px solid var(--panel-rule); }
.mx-a { color: var(--t2); }
.shields { display: grid; gap: 10px; margin-top: 14px; }
.shield { display: flex; gap: 10px; font: 400 12.5px/1.5 var(--body); color: var(--t3); }
.shield-i { flex: none; font: 700 12px/1.5 var(--mono); }
.shield strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- narrower desktops */
/* These answer the width the pages actually get, not the window's: on a desktop that is the content
   column beside the rail, on a phone the whole screen. So a page lays out the same at the same width
   wherever it is drawn. */
.na-col, .m-app { container: na-col / inline-size; }
@container na-col (max-width: 1280px) {
  .coins-grid { grid-template-columns: 240px minmax(0,1fr); }
  .coin-side { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
  .policy-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .policy-side { grid-column: 1 / -1; position: static; }
  .scards { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@container na-col (max-width: 1100px) {
  .trending { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .agents-grid { grid-template-columns: 260px minmax(0,1fr); }
  .kpis.six { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .kpis.six .kpi:nth-child(3) { border-right: none; }
  .profile { grid-template-columns: auto minmax(0,1fr); }
  .profile-act { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .ident { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: none; border-bottom: 2px solid var(--rule-2); }
  .strat-h { grid-template-columns: 1fr; }
  .mystrat-grid, .overview-grid, .api-grid, .docs-grid { grid-template-columns: 1fr; }
  .ft-in { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@container na-col (max-width: 1000px) {
  .coins-grid { grid-template-columns: 1fr; }
  .coin-side { grid-template-columns: 1fr; }
  .agents-grid { grid-template-columns: 1fr; }
  .list { max-height: 360px; }
  .mstats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lbtabs { grid-template-columns: 1fr; }
  .podium { padding: 0; }
  .coin-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .param { grid-template-columns: 150px minmax(0,1fr) 24px; }
}

/* ---------------------------------------------------------------- mobile (narrower than 1000px) */
.m-app { min-height: 100vh; background: var(--paper); padding-bottom: calc(64px + env(safe-area-inset-bottom)); font: 400 14px/1.5 var(--body); color: var(--ink); }
.m-page { display: block; }
.m-tk { display: flex; align-items: center; gap: 10px; height: 24px; padding: 0 14px; background: var(--desk); overflow: hidden; white-space: nowrap; }
.m-tk .tk-live { gap: 6px; font-size: 8.5px; letter-spacing: .1em; }
.m-tk .dot { width: 5px; height: 5px; }
.m-tk .tk-sym { font-size: 8.5px; }
.m-tk .tk-syms { flex: 1 1 auto; }
.m-concept { padding: 5px 14px; background: var(--desk); border-top: 1px solid var(--rule-faint); border-bottom: 2px solid var(--rule); font: 700 8.5px/1.2 var(--mono); letter-spacing: .1em; color: var(--amber); }
.m-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 2px solid var(--rule); }
.m-tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-top: -2px; border-top: 3px solid transparent; color: var(--t4); }
.m-tab .pix { font-size: 13px; line-height: 1; white-space: nowrap; }
.m-tab.on { border-top-color: var(--c); color: var(--c); }
.m-tab:hover { color: var(--ink); }
.m-appbar { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px; background: var(--surface); border-bottom: 2px solid var(--rule); }
/* The whole lockup, its left edge on the bar's (the fade is transparent there): 187px wide, 42px tall
   inside the 52px bar, and 145px below 401px, as on noctis.zone and noctisswap.zone. */
.m-appbar .brand { display: flex; align-items: center; width: 187px; margin-left: -14px; }
.m-ft .ft-brand { width: 160px; margin-left: -14px; }
@media (max-width: 400px) {
  .m-appbar .brand { width: 145px; }
}
.m-find { margin-left: auto; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--c2); font: 700 14px/1 var(--mono); color: var(--c2); }
.m-signin { height: 44px; padding: 0 12px; font-size: 15px; }
.m-me { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--green); background: var(--desk); }
/* The header area, laid out as noctis.zone and noctisswap.zone lay theirs out on a phone -- the
   whole lockup centred with the headline under it -- over the film, as on the desktop. The clock heads
   the column, with the chips under it, and the lockup leads at 330px. The header area is taller than
   the film's 16:9 would make it, so the street shows under the headline; the paragraph's banner
   follows directly under the film. */
.m-hero { min-height: 430px; }
.m-hero .hero-body { padding: 16px 16px 24px; gap: 12px; }
.m-hero .chips { gap: 6px; }
.m-hero .hero-lockup { width: min(330px, 92%); margin: 0; }
.m-hero .hero-h { font-size: 34px; line-height: 1; }
/* On a phone the banner sits under the film, not over it, so there is nothing to show through: the
   desk's solid fill. */
.m-hero-banner { margin: 0; padding: 11px 16px 13px; background: var(--desk); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 2px solid var(--rule); font-size: 12.5px; line-height: 1.5; color: var(--t2); text-shadow: none; }
/* A tablet, still the phone layout, has the room for a larger lockup, headline and banner. */
@container na-col (min-width: 600px) {
  .m-hero .hero-body { padding: 28px 32px 72px; gap: 16px; }
  .m-hero .hero-lockup { width: min(520px, 64%); }
  .m-hero .hero-h { font-size: 46px; }
  .m-hero { min-height: 600px; }
  .m-hero-banner { padding: 13px 32px 15px; font-size: 14px; }
}
.m-clock { display: flex; align-items: center; gap: 6px; padding: 5px 7px; background: var(--desk); border: 2px solid var(--c2); font: 600 8.5px/1 var(--mono); letter-spacing: .08em; color: var(--c2); white-space: nowrap; }
.m-clock .dot { width: 5px; height: 5px; }
.m-stats { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--rule); background: var(--surface); }
.m-stat { padding: 11px 14px; border-top: 3px solid var(--c); border-right: 2px solid var(--rule-2); }
.m-stat .pix { font-size: 24px; line-height: 1; }
.m-stat .lbl { margin-top: 5px; line-height: 1.2; letter-spacing: .08em; }
.m-feed-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.m-feed-h > .pix { font-size: 20px; line-height: 1; }
.m-note { margin-left: auto; font: 500 9.5px/1 var(--mono); }
.m-feed { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-top: 1px solid var(--rule-faint); color: var(--ink); }
.m-feed.in { animation: agIn .4s steps(4); }
.m-feed .nm { font-size: 11.5px; }
.m-feed-a { display: flex; gap: 6px; margin-top: 3px; font: 500 9.5px/1 var(--mono); }
.m-amt { font: 500 11px/1 var(--mono); }
.m-sec { padding: 16px 14px 4px; border-top: 2px solid var(--rule); margin-top: 8px; }
.m-link { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 2px; border-bottom: 1px solid var(--rule-faint); color: var(--ink); }
.m-link .pix { font-size: 19px; line-height: 1; }
.m-link > :last-child { color: var(--c2); font: 700 14px/1 var(--mono); }
.m-view { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.m-view .tk-btn { height: 38px; padding: 0 12px; font-size: 11px; }
.m-ft { margin-top: 18px; padding: 18px 14px 22px; border-top: 2px solid var(--rule); background: var(--surface); }
.m-ft p { margin-top: 10px; font: 400 12.5px/1.55 var(--body); color: var(--t4); }
.m-ft-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font: 500 12px/1 var(--mono); }
.m-ft-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--t3); }
/* A page's head is a band over the city, as on the desktop; its controls follow in a bar under it. */
.m-band { position: relative; background: #0B0C22; overflow: hidden; border-bottom: 2px solid var(--rule); }
.m-band-body { --hs: #07090C; --ho: -1px -1px 0 var(--hs), 1px -1px 0 var(--hs), -1px 1px 0 var(--hs), 1px 1px 0 var(--hs);
  position: relative; min-height: 104px; padding: 26px 14px 16px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.m-band .kick { padding: 4px 6px; background: var(--desk); border: 2px solid currentColor; color: var(--blue-t); }
.m-head { padding: 14px; background: var(--surface); border-bottom: 2px solid var(--rule); }
.m-head > :first-child { margin-top: 0; }
.m-h1 { margin-top: 6px; font-size: 30px; line-height: 1; text-wrap: balance; }
.m-band .m-h1 { color: var(--ink); text-shadow: var(--ho), 3px 3px 0 var(--hs); }
.m-bar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; background: var(--surface); border-bottom: 2px solid var(--rule); }
.m-back { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); }
.m-back .chev { font: 700 16px/1 var(--mono); color: var(--c2); }
.m-back .pix { font-size: 18px; line-height: 1; }
.m-bar .btn-out { margin-left: auto; }
.m-search { display: flex; align-items: center; gap: 8px; height: 46px; margin-top: 12px; padding: 0 12px; background: var(--desk); border: 2px solid var(--c3); }
.m-search .gt { font-size: 15px; color: var(--c3); }
.m-search input { font-size: 16px; }
.m-recents { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.m-recent { height: 36px; padding: 0 10px; border: 2px solid var(--c); background: none; color: var(--c); font: 500 10.5px/1 var(--mono); }
.m-row { display: flex; align-items: center; gap: 11px; min-height: 54px; padding: 8px 14px; border-bottom: 1px solid var(--rule-faint); color: var(--ink); font: 500 11px/1.2 var(--mono); }
.m-row:hover { background: var(--hover); color: var(--ink); }
.m-row.plain { min-height: 44px; gap: 10px; }
.m-row .tag { font-size: 8.5px; }
.m-small { display: flex; flex-direction: column; gap: 3px; font: 500 10px/1.4 var(--mono); color: var(--t4); }
.m-when { width: 34px; flex: none; }
.m-prof { position: relative; overflow: hidden; display: flex; gap: 16px; padding: 18px 14px; background: var(--surface); border-bottom: 2px solid var(--rule); }
.m-prof > img { position: relative; box-shadow: 6px 6px 0 #FF2FB0; transform: perspective(400px) rotateY(-22deg) rotateX(10deg); }
.m-prof .grow { position: relative; }
.m-prof .profile-rings { background: repeating-radial-gradient(circle at 15% 40%, transparent 0 22px, rgba(0,255,163,.08) 22px 24px); }
.m-prof-n { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-prof-n .pix { font-size: 30px; line-height: 1; }
.m-prof .meta { margin-top: 6px; font-size: 10px; }
.m-prof .bar { height: 9px; margin-top: 5px; }
.m-ident { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 14px; border-bottom: 2px solid var(--rule); }
.m-ident .idv { margin-top: 5px; font-size: 12.5px; }
.m-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); background: var(--surface); border-bottom: 2px solid var(--rule); }
.m-kpi { padding: 11px 12px; border-top: 3px solid var(--c); border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.m-kpi .lbl { font-size: 8px; letter-spacing: .08em; }
.m-kpi .pix { margin-top: 6px; font-size: 22px; line-height: 1; }
.m-ltabs { display: flex; border-bottom: 2px solid var(--rule-2); }
.m-ltab { flex: 1; min-height: 44px; padding: 12px 0; border: none; border-bottom: 3px solid transparent; background: none; color: var(--t4); }
.m-ltab .pix { font-size: 16px; line-height: 1; }
.m-ltab.on { color: var(--c); border-bottom-color: var(--c); }
.idle.m { flex-direction: column; align-items: flex-start; gap: 6px; margin: 14px; padding: 22px; }
.m-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 12px; border: 2px solid var(--rule-strong); }
.m-seg-b { height: 44px; border: none; background: transparent; color: var(--t3); font: 400 15px/1 var(--pix); }
.m-seg-b.on { background: var(--c); color: var(--chip-fg); }
.m-rngs { display: flex; gap: 4px; margin-top: 8px; }
.m-rng { flex: 1; height: 36px; border: none; background: var(--surface-2); color: var(--t4); font: 600 10px/1 var(--mono); }
.m-rng.on { background: var(--c); color: var(--chip-fg); }
.m-coin { padding: 14px; background: var(--surface); border-bottom: 2px solid var(--rule); }
.m-coin-h { display: flex; align-items: center; gap: 12px; }
.m-coin-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-coin-t .pix { font-size: 28px; line-height: 1; }
.m-coin .meta { margin-top: 4px; font-size: 10px; }
.m-px { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 12px; font: 700 12px/1 var(--mono); }
.m-px .pix { font-size: 30px; line-height: 1; font-weight: 400; }
.m-coin .tfs { gap: 4px; margin-top: 10px; }
.m-cstats { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--rule); }
.m-cstat { padding: 10px 14px; border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.m-cstat .statv { margin-top: 5px; font-size: 13px; }
.m-curve { padding: 12px 14px; border-bottom: 2px solid var(--rule); }
.ticket.m { margin: 12px 14px; }
.ticket.m .ticket-tabs span { padding: 10px; font-size: 16px; }
.ticket.m .ticket-body { padding: 12px; gap: 8px; font: 500 10.5px/1.3 var(--mono); color: var(--t4); }
.ticket.m .warn { padding: 8px 10px; font-size: 11.5px; line-height: 1.45; }
.m-podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: end; padding: 16px 14px 0; }
.m-pod { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); }
.m-pod > .pix { font-size: 15px; line-height: 1; }
.m-pod .pod-m { font-size: 10px; }
.m-pod .pod-b { font-size: 30px; transform: none; box-shadow: 0 6px 0 #07090C; }
.m-lhead { display: flex; align-items: center; margin-top: 14px; padding: 8px 14px; background: var(--panel-2); font: 600 8.5px/1 var(--mono); letter-spacing: .08em; color: var(--t3); }
.m-lrow { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-bottom: 1px solid var(--rule-faint); font: 500 11px/1.2 var(--mono); color: var(--ink); }
.m-lrank { width: 26px; flex: none; font-size: 17px; line-height: 1; color: var(--t5); }
.m-lhead .m-lrank { font: inherit; color: inherit; }
.m-lag { display: flex; align-items: center; gap: 8px; }
.m-lag .nm { font-size: 11px; }
.m-k1 { width: 78px; flex: none; text-align: right; }
.m-k2 { width: 70px; flex: none; text-align: right; }
.note.m { padding: 0 14px; }
.m-signin-screen { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-height: 520px; padding: 32px 24px; background: radial-gradient(ellipse at 50% 30%, rgba(255,47,176,.14), transparent 60%); }
.m-ghost { display: flex; justify-content: center; }
.ghost { filter: grayscale(1) brightness(.55); border: 2px dashed var(--rule-strong); }
.m-signin-screen h1 { text-align: center; font-size: 34px; line-height: 1; text-wrap: balance; }
.m-signin-screen p { text-align: center; font: 400 13.5px/1.6 var(--body); color: var(--t3); }
.m-big { height: 52px; width: 100%; font-size: 18px; }
.m-signin-screen .oauth { margin-top: 0; text-align: center; font-size: 9.5px; }
.m-mehead { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border-bottom: 2px solid var(--green); }
.tilt.sm { transform: perspective(300px) rotateY(-20deg); box-shadow: 4px 4px 0 #FF2FB0; border: none; }
.m-me-n { font-size: 26px; line-height: 1; }
.m-mehead .meta { margin-top: 4px; font-size: 9.5px; }
.m-pause { flex: none; height: 44px; padding: 0 12px; border: 2px solid var(--c); background: var(--desk); color: var(--c); font: 400 15px/1 var(--pix); }
.m-mstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px; }
.m-mstat { border: 2px solid var(--rule); border-top: 3px solid var(--c); background: var(--surface); padding: 10px 12px; }
.m-mstat .lbl { font-size: 8px; letter-spacing: .08em; }
.m-mstat > .pix { margin-top: 8px; font-size: 24px; line-height: 1; }
.m-mstat .sub { margin-top: 5px; font-size: 9px; line-height: 1.3; }
.m-sub-h { padding: 4px 14px 8px; font-size: 18px; line-height: 1; }
.log.m { margin: 10px 14px 0; border: 2px solid var(--rule); background: var(--desk); padding: 10px 12px; font: 500 10.5px/1.5 var(--mono); }
.log.m .log-l { gap: 8px; }
.m-signout { margin: 16px 14px 0; }
.toggle-row.m { min-height: 58px; padding: 8px 14px; gap: 12px; }
.toggle-row.m .nm { font-size: 12px; }
.toggle-row.m .tdesc { margin-top: 2px; font-size: 11.5px; line-height: 1.4; }
.toggle-row.m .sw { width: 48px; height: 26px; }
.toggle-row.m .sw span { width: 16px; height: 16px; }
.sld.m { padding: 12px 14px; }
.sld.m .sld-v { font-size: 20px; }
.sld.m input { margin-top: 8px; height: 28px; }
.m-api { margin: 12px 14px; border: 2px solid var(--rule); background: var(--surface); padding: 12px; }
.m-api > .pix { font-size: 18px; line-height: 1; }
.m-api .keybox { margin-top: 8px; padding: 9px 10px; }
.m-api .key { font-size: 11px; }
.m-api .linkbtn { min-height: 32px; font-size: 9.5px; }
.m-sync { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--panel); border-top: 2px solid var(--rule); }
.m-sync .pix { flex: 1; font-size: 15px; line-height: 1.1; color: var(--green); }
.m-sync.dirty { border-top-color: var(--amber); }
.m-sync.dirty .pix { color: var(--amber); }
.m-sync .save { flex: none; height: 44px; padding: 0 14px; font-size: 16px; }
.astrat.m { padding: 14px; }
.m-split { margin: 12px 14px; border: 2px solid var(--rule); background: var(--panel); padding: 12px; }
.m-pad { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.m-scard { border: 2px solid var(--c); background: var(--surface); padding: 12px; }
.m-scard-h { display: flex; align-items: center; gap: 10px; }
.m-scard-h .numtile { width: 34px; height: 34px; font-size: 18px; }
.m-scard-t { font-size: 20px; line-height: 1; }
.m-scard-h .lbl { margin-top: 3px; letter-spacing: .08em; }
.m-scard .p12 { margin-top: 10px; }
.m-scard-m { display: flex; align-items: center; gap: 12px; margin-top: 10px; font: 600 10.5px/1 var(--mono); }
.m-assign { margin-left: auto; height: 40px; padding: 0 10px; border: 2px solid var(--c); background: none; color: var(--c); font: 400 14px/1 var(--pix); }
.m-assign.on { background: var(--c); color: var(--chip-fg); }
.m-step { display: flex; gap: 12px; padding-bottom: 12px; }
.m-step-rail { display: flex; flex-direction: column; align-items: center; }
.m-step-rail .numtile { width: 30px; height: 30px; font-size: 18px; }
.m-step-line { flex: 1; width: 2px; margin-top: 4px; background: var(--rule-strong); }
.m-step-t { font-size: 19px; line-height: 1.1; }
.m-step p { margin-top: 3px; font: 400 12px/1.5 var(--body); color: var(--t3); }
.m-box { border: 2px solid var(--rule); background: var(--panel); padding: 10px 12px; display: grid; gap: 8px; margin: 0 14px 12px; }
.m-pad .m-box { margin: 0; }
.m-box.plain { background: var(--surface); }
.m-box .kv { padding-top: 8px; border-top: 1px solid var(--panel-rule); font: 500 10.5px/1.35 var(--mono); }
.m-box .kick + .kv { border-top: none; padding-top: 0; }
.m-box .m-sub-h { padding: 0; }
.m-param { padding-top: 8px; border-top: 1px solid var(--panel-rule); }
.m-param .kv { padding-top: 0; border-top: none; }
.m-param .pv { margin-top: 4px; font-size: 12px; }
.m-box .matrix { margin-top: 0; }
.m-page .list-h { padding: 8px 14px; }
@media (max-width: 380px) {
  .m-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .m-k1 { width: 64px; } .m-k2 { width: 52px; }
}

/* Before the app draws (and with JavaScript off). */
.boot { min-height: 100vh; max-width: 900px; margin: 0 auto; padding: 48px 28px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.boot h1 { font-size: calc(50px * var(--pxs)); line-height: 1.08; text-wrap: balance; }
.boot-p { font: 400 15px/1.6 var(--body); color: var(--t3); }

/* The design's containers and outlined controls size their content box: a
   max-width or height there does not include padding and border. */
.mn, .mn-in, .band-body, .ft-in, .big-search, .btn-out, .tk-btn, .sbtn, .xbtn { box-sizing: content-box; }
.kv > :first-child { flex: none; white-space: nowrap; }
.kv > :last-child { min-width: 0; }

/* Phones: every control is at least 44px to touch. Small inline controls keep
   their look and get a taller hit area instead. */
.m-app .btn-out.sm { box-sizing: border-box; height: 44px; }
.m-appbar .brand { min-height: 44px; }
.m-view .tk-btn { box-sizing: border-box; height: 44px; }
.m-recent, .m-rng, .m-assign { height: 44px; }
.m-app .xbtn { box-sizing: border-box; width: 44px; height: 44px; }
.m-ft-links a { min-height: 44px; }
.m-app .sld input, .m-app .astrat input { height: 44px; margin: 4px 0 0; }
.m-app .linkbtn, .m-app .stream, .m-app .tf { position: relative; }
.m-app .linkbtn::after, .m-app .stream::after, .m-app .tf::after { content: ''; position: absolute; inset: -12px 0; }
.m-app .stream::after { inset: -14px 0; }
.m-search { height: 48px; }
.m-search input { align-self: stretch; }