/* =====================================================================
   The SI Observatory · tsio.si
   The research hub of the SI ecosystem: true black, brushed chrome, blue
   and amber light. Calmer and more data dense than the token sites.
   Layout: full-bleed bands on a 1240px track. Card rows are flex rows
   whose last items grow, so every row fills (no orphan columns).
   Single theme (night sky), every color is set here.
   ===================================================================== */
:root {
  --void: #020203;
  --deep: #07080a;
  --panel: #0d0e11;
  --panel-2: #14161a;
  --panel-3: #1b1e23;
  --line: rgba(214, 222, 235, .11);
  --line-2: rgba(214, 222, 235, .22);
  --ice: #f3f5f8;
  --mute: #b9bfc9;
  --dim: #8b929d;
  --ion: #5aa9ff;
  --ion-2: #2f7fe0;
  --amber: #ffb45e;
  --flare: #ff9a3c;
  --ok: #5fe3a6;
  --bad: #ff7a8f;
  --ink: #050506;
  --chrome: linear-gradient(180deg, #ffffff 0%, #e4e8ee 30%, #aab1bc 47%, #5d646f 51%, #c3c9d2 66%, #f6f8fa 100%);
  --f-display: "Michroma", "Eurostile", "Microgramma", "Arial Black", sans-serif;
  --f-body: "Exo 2", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --track: 1240px;
  --pad: clamp(16px, 4vw, 56px);
  --hpad: clamp(16px, 3vw, 44px);
  --r: 16px;
  --sec: clamp(64px, 8vw, 112px);
  --hdr: 72px;
  --tkr: 32px;
  --top: calc(var(--hdr) + var(--tkr));
  --btn: #eef1f5;
  --btn-hi: #ffffff;
  --ctl: #171a1f;
  --ctl-hi: #20242a;
  --ctl-line: #333842;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--void); scroll-padding-top: calc(var(--top) + 16px); }
body {
  margin: 0; background: var(--void); color: var(--ice);
  font-family: var(--f-body); font-size: 17px; line-height: 1.65;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ion); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(90, 169, 255, .45); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ice); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--track) + 2 * var(--pad)); margin-inline: auto; padding-left: max(var(--pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad), env(safe-area-inset-right, 0px)); }
.wrap-narrow { max-width: calc(var(--track) + 2 * var(--pad)); }
.band { position: relative; padding-block: var(--sec); }
.band-tight { padding-block: clamp(44px, 5vw, 72px); }
.band-alt { background: radial-gradient(900px 420px at 85% 0%, rgba(90, 169, 255, .08), transparent 70%), radial-gradient(700px 380px at 0% 100%, rgba(255, 180, 94, .05), transparent 70%), linear-gradient(180deg, var(--deep), var(--void)); border-block: 1px solid var(--line); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.2vw, 26px); }
.stack-sm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
main { display: block; min-height: 60vh; }
.page-top { padding-top: calc(var(--top) + env(safe-area-inset-top, 0px)); }

/* ---------- type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ion); }
.eyebrow::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--ion); box-shadow: 0 0 12px var(--ion); }
.eyebrow.amber { color: var(--amber); }
.eyebrow.amber::before { background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.h1 { font-family: var(--f-display); font-size: clamp(26px, 4.4vw, 58px); line-height: 1.14; letter-spacing: .01em; text-wrap: balance; overflow-wrap: break-word; }
.h1 .chrome, .h2 .chrome { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h2 { font-family: var(--f-display); font-size: clamp(21px, 2.6vw, 34px); line-height: 1.22; text-wrap: balance; overflow-wrap: break-word; }
.h3 { font-family: var(--f-body); font-weight: 700; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.3; letter-spacing: .005em; }
.h4 { font-family: var(--f-body); font-weight: 700; font-size: 17px; line-height: 1.35; }
.lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--mute); line-height: 1.7; text-wrap: pretty; }
.lead strong, .body-copy strong { color: var(--ice); font-weight: 600; }
.body-copy { color: var(--mute); text-wrap: pretty; }
.small { font-size: 14.5px; color: var(--dim); line-height: 1.6; }
.mono { font-family: var(--f-mono); }
.k { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.up { color: var(--ok); }
.down { color: var(--bad); }
.flat { color: var(--dim); }
.center { text-align: center; }
.prose { display: grid; gap: 18px; color: var(--mute); font-size: 17.5px; max-width: none; }
.prose.full { max-width: none; }
.prose h2 { font-family: var(--f-display); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25; color: var(--ice); margin-top: 18px; }
.prose h3 { font-weight: 700; font-size: 19px; color: var(--ice); margin-top: 8px; }
.prose strong { color: var(--ice); }
.prose a, .body-copy a, .lead a, .small a, td a { color: var(--ion); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-inline-start: 1.3em; display: grid; gap: 8px; }
.prose li::marker { color: var(--ion); }
.prose code, .body-copy code { font-family: var(--f-mono); font-size: .88em; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ice); }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ion); text-decoration: none; }
.link-arrow::after { content: "\2192"; transition: transform .3s; }
.link-arrow:hover::after { transform: translateX(5px); }

/* ---------- section heads ---------- */
.sec-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(18px, 4vw, 64px); align-items: end; margin-bottom: clamp(30px, 4vw, 52px); }
.sec-head > div { display: grid; gap: 14px; align-content: end; }
.sec-head.one { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
.sec-head.one > div { justify-items: center; }
.sec-head.one .lead { max-width: none; }
@media (max-width: 900px) { .sec-head { grid-template-columns: minmax(0, 1fr); } }

/* ---------- header (full width) ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid transparent; transition: background .35s, border-color .35s; }
.site-header { background: linear-gradient(180deg, rgba(2, 2, 3, .82), rgba(2, 2, 3, .35) 70%, rgba(2, 2, 3, 0)); }
.site-header.solid, .site-header.scrolled, .site-header.menu-open { background: rgba(4, 5, 7, .86); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--line); }
.hdr-in { height: var(--hdr); display: flex; align-items: center; gap: clamp(12px, 1.6vw, 28px); padding-left: max(var(--hpad), env(safe-area-inset-left, 0px)); padding-right: max(var(--hpad), env(safe-area-inset-right, 0px)); }
.brand { position: relative; display: block; flex: none; text-decoration: none; line-height: 0; }
.brand img { width: auto; height: 54px; }
.brand .shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; }
.brand .shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 300%; background: linear-gradient(105deg, transparent 0 40%, rgba(255, 255, 255, .55) 47%, rgba(190, 220, 255, .35) 50%, transparent 57% 100%) 0 0 / 50% 100% repeat-x; mix-blend-mode: overlay; animation: shine 7s linear infinite; will-change: transform; }
@keyframes shine { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* every logo shines like the header: the light tile is half the strip and the strip moves exactly one tile, so the loop never jumps */
.shine-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; vertical-align: middle; }
.shine-wrap > img { display: block; }
.shine-wrap .shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
.hero-shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask: url("/assets/img/tsio-hero-mask.png") center top / 100% auto no-repeat; mask: url("/assets/img/tsio-hero-mask.png") center top / 100% auto no-repeat; }
.shine-wrap .shine::after, .hero-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 300%; background: linear-gradient(105deg, transparent 0 40%, rgba(255, 255, 255, .55) 47%, rgba(190, 220, 255, .35) 50%, transparent 57% 100%) 0 0 / 50% 100% repeat-x; mix-blend-mode: overlay; animation: shine 7s linear infinite; will-change: transform; }
/* the hero logo is large and bright chrome, so its light is a brighter band that screens over the letters */
.hero-shine::after { background: linear-gradient(105deg, transparent 0 41%, rgba(255, 255, 255, .0) 43%, rgba(255, 255, 255, .78) 47.5%, rgba(200, 228, 255, .5) 50%, rgba(255, 255, 255, 0) 54%, transparent 56% 100%) 0 0 / 50% 100% repeat-x; mix-blend-mode: screen; animation-duration: 8s; }
.pillar.lead-p .shine-wrap { width: 100%; max-width: 520px; justify-self: center; }
.tok .shine-wrap { flex: none; }
.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-i { position: relative; }
.nav-a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 0; background: none; cursor: pointer; text-decoration: none; font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); white-space: nowrap; border-radius: 10px; transition: color .2s, background .2s; }
.nav-a:hover, .nav-a[aria-expanded="true"], .nav-a[aria-current="page"], .nav-a.cur { color: var(--ice); background: rgba(255, 255, 255, .05); }
.nav-a .car { width: 9px; height: 9px; transition: transform .25s; opacity: .7; }
.nav-a[aria-expanded="true"] .car { transform: rotate(180deg); }
.dd { position: absolute; top: calc(100% + 8px); left: 50%; min-width: 280px; transform: translate(-50%, 6px); padding: 8px; list-style: none; background: rgba(10, 11, 14, .97); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s .2s; }
.dd.open { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s, transform .2s; }
.dd a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.dd a b { font-weight: 600; font-size: 15px; color: var(--ice); }
.dd a span { font-size: 13px; color: var(--dim); line-height: 1.4; }
.dd a:hover, .dd a:focus-visible, .dd a[aria-current="page"] { background: rgba(90, 169, 255, .09); outline: none; }
.dd a[aria-current="page"] b { color: var(--ion); }
.hdr-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; flex: none; cursor: pointer; border: 1px solid var(--ctl-line); border-radius: 12px; background: var(--ctl); color: var(--ice); text-decoration: none; transition: border-color .2s, background .2s; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { border-color: var(--ion); background: var(--ctl-hi); }
.icon-btn svg { width: 18px; height: 18px; }
.live-chip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(95, 227, 166, .35); background: rgba(95, 227, 166, .06); color: var(--ice); text-decoration: none; font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; transition: border-color .2s, background .2s; }
.live-chip:hover { border-color: var(--ok); background: rgba(95, 227, 166, .12); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 0 rgba(95, 227, 166, .6); animation: ping 2s infinite; }
.dot.amber { background: var(--amber); box-shadow: 0 0 0 0 rgba(255, 180, 94, .6); animation-name: ping-a; }
.dot.off { background: var(--dim); animation: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(95, 227, 166, .55); } 70% { box-shadow: 0 0 0 8px rgba(95, 227, 166, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 227, 166, 0); } }
@keyframes ping-a { 0% { box-shadow: 0 0 0 0 rgba(255, 180, 94, .55); } 70% { box-shadow: 0 0 0 8px rgba(255, 180, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 180, 94, 0); } }

/* $SIO, the Observatory's own token: one clear button in the header, the same word in every language */
.sio-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--btn); background: var(--btn); color: var(--ink); text-decoration: none; font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; box-shadow: 0 8px 26px -12px rgba(90, 169, 255, .75); transition: background .2s, box-shadow .2s; }
.sio-btn:hover, .sio-btn:focus-visible, .sio-btn[aria-current="page"] { background: var(--btn-hi); border-color: var(--btn-hi); box-shadow: 0 0 0 3px rgba(90, 169, 255, .28), 0 8px 26px -12px rgba(90, 169, 255, .9); }
.nav-sio { display: none; }
.nav-sio .nav-a span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 9px; background: var(--btn); color: var(--ink); font-weight: 700; letter-spacing: .06em; }

/* language dropdown */
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--ctl-line); background: var(--ctl); cursor: pointer; font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: border-color .2s; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { border-color: var(--ion); }
.flag { width: 22px; height: 16.5px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); flex: none; display: inline-block; }
.lang-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: 300px; max-width: calc(100vw - 32px); padding: 10px; background: rgba(10, 11, 14, .98); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9); z-index: 70; }
.lang-search { width: 100%; height: 40px; padding: 0 12px; margin-bottom: 8px; border-radius: 10px; border: 1px solid var(--ctl-line); background: var(--panel-2); font-size: 15px; }
.lang-search:focus { outline: none; border-color: var(--ion); }
.lang-list { list-style: none; max-height: min(320px, 50vh); overflow-y: auto; display: grid; gap: 2px; overscroll-behavior: contain; }
.lang-list a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; text-decoration: none; font-size: 15px; }
.lang-list a:hover, .lang-list a:focus-visible, .lang-list a[aria-current="true"] { background: rgba(90, 169, 255, .1); outline: none; }
.lang-list a small { margin-inline-start: auto; font-family: var(--f-mono); font-size: 11px; color: var(--dim); letter-spacing: .08em; }
.lang-all { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 10px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ion); text-decoration: none; }
.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--ctl-line); border-radius: 12px; background: var(--ctl); cursor: pointer; position: relative; flex: none; }
.burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ice); transition: transform .3s, top .3s; }
.burger span:first-child { top: 16px; }
.burger span:last-child { top: 24px; }
.menu-open .burger span:first-child { top: 20px; transform: rotate(45deg); }
.menu-open .burger span:last-child { top: 20px; transform: rotate(-45deg); }
@media (max-width: 1180px) {
  .burger { display: block; }
  .hdr-tools { margin-inline-start: auto; }
  .nav { position: fixed; left: 0; right: 0; top: calc(var(--top) + env(safe-area-inset-top, 0px)); bottom: 0; display: block; margin: 0; padding: 8px max(var(--hpad), env(safe-area-inset-left, 0px)) 32px; background: rgb(4, 5, 7); border-top: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility 0s .25s; }
  .menu-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s; }
  /* a backdrop filter would make the header the containing block of the fixed menu panel */
  .site-header.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(4, 5, 7); }
  .nav > ul { display: grid; gap: 0; max-width: 720px; margin-inline: auto; }
  .nav-i { border-bottom: 1px solid var(--line); }
  .nav-a { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 13px; border-radius: 0; background: none !important; }
  .dd { position: static; transform: none; min-width: 0; padding: 0 0 12px; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; display: none; }
  .dd.open { display: grid; transform: none; }
  .dd a { padding: 10px 12px; }
}
@media (max-width: 640px) {
  .brand img { height: 44px; }
  .live-chip .live-txt { display: none; }
  .live-chip { width: 42px; padding: 0; justify-content: center; }
  .hdr-search { display: none; }
  .lang-btn .lang-code { display: none; }
}
@media (max-width: 370px) { .lang-btn { padding: 0 9px; } .hdr-tools { gap: 6px; } }
/* phones: the header keeps logo, $SIO, language, Live and the menu on one clean line; below 375px $SIO moves to the top of the menu */
@media (max-width: 640px) { .sio-btn { padding: 0 11px; } .lang-btn .car { display: none; } }
@media (max-width: 400px) { .hdr-in { gap: 10px; } .hdr-tools { gap: 6px; } .brand img { height: 40px; } .sio-btn { padding: 0 9px; font-size: 12.5px; letter-spacing: .03em; } }
@media (max-width: 374px) { .sio-btn { display: none; } .nav-sio { display: block; } .brand img { height: 44px; } }
/* narrow desktops: with the full menu and the $SIO button on one line, Live keeps its dot and drops its word so long languages still fit */
@media (min-width: 1181px) and (max-width: 1279px) { .live-chip .live-txt { display: none; } .live-chip { width: 42px; padding: 0; justify-content: center; } }

/* ---------- breadcrumb ---------- */
.crumbs { padding-top: clamp(22px, 3vw, 34px); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--line-2); }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--ion); }
.crumbs [aria-current] { color: var(--ice); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

/* ---------- page hero (inner pages) ---------- */
.phero { position: relative; padding-block: clamp(26px, 3.4vw, 46px) clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--line); background: radial-gradient(800px 360px at 80% -10%, rgba(90, 169, 255, .12), transparent 70%), radial-gradient(600px 300px at 0% 120%, rgba(255, 180, 94, .06), transparent 70%); }
.phero-in { display: grid; gap: 18px; max-width: none; }
.phero .answer { font-size: clamp(17.5px, 1.5vw, 21px); line-height: 1.7; color: var(--mute); text-wrap: pretty; }
.phero .answer strong { color: var(--ice); font-weight: 600; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.meta-row b { color: var(--mute); font-weight: 500; }

/* ---------- home hero ---------- */
.hero { position: relative; padding-top: calc(33.33vw + var(--top)); background: #000; }
.hero::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--top) + 33.33vw - 4vw); height: 4.5vw; background: linear-gradient(180deg, transparent, #000 92%); pointer-events: none; }
/* The moving hero. The banner (the full logo between its light streaks) is a still image and is never changed. All motion is
   in layers on top of it: light that flows along the streaks (.hero-flow, masked to the streaks and stars), star dust on a
   canvas (.hero-dust) and the shine on the lettering (.hero-shine). The flow mask and the dust leave the lettering alone. */
.hero-art { position: absolute; left: 0; right: 0; top: var(--top); aspect-ratio: 2172 / 724; overflow: hidden; pointer-events: none; isolation: isolate; contain: layout paint; background: #000; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.hero-flow { position: absolute; inset: 0; overflow: hidden; mix-blend-mode: screen; -webkit-mask: url("/assets/img/tsio-hero-flow-mask.png") center / 100% 100% no-repeat; mask: url("/assets/img/tsio-hero-flow-mask.png") center / 100% 100% no-repeat; animation: hero-breathe 7s ease-in-out infinite alternate; }
/* the same seamless loop as the logo shine: the strip is three heroes wide, its light tile is half the strip, and the strip
   moves by exactly one tile, so the last frame equals the first. Here it runs left to right, along the streaks. */
.hero-flow i { position: absolute; top: 0; bottom: 0; left: 0; width: 300%; mix-blend-mode: screen; will-change: transform; animation: hero-flow 11s linear infinite; }
.hero-flow-a { background: linear-gradient(104deg, transparent 0 8%, rgba(232, 244, 255, 0) 8%, rgba(232, 244, 255, .24) 13%, rgba(240, 248, 255, .92) 16.5%, rgba(232, 244, 255, .24) 20%, rgba(232, 244, 255, 0) 25%, transparent 25% 57%, rgba(232, 244, 255, 0) 57%, rgba(232, 244, 255, .18) 61%, rgba(240, 248, 255, .66) 64%, rgba(232, 244, 255, .18) 67%, rgba(232, 244, 255, 0) 71%, transparent 71% 100%) 0 0 / 50% 100% repeat-x; }
.hero-flow-b { background: linear-gradient(113deg, transparent 0 10%, rgba(255, 186, 108, 0) 10%, rgba(255, 186, 108, .22) 16%, rgba(255, 196, 124, .8) 20%, rgba(255, 186, 108, .22) 24%, rgba(255, 186, 108, 0) 30%, transparent 30% 60%, rgba(255, 214, 160, 0) 60%, rgba(255, 214, 160, .16) 65%, rgba(255, 214, 160, .54) 69%, rgba(255, 214, 160, .16) 73%, rgba(255, 214, 160, 0) 78%, transparent 78% 100%) 0 0 / 50% 100% repeat-x; }
.hero-flow i.hero-flow-b { animation-duration: 17s; animation-delay: -6.5s; }
@keyframes hero-flow { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes hero-breathe { from { opacity: .76; } to { opacity: 1; } }
.hero-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art.paused .hero-flow, .hero-art.paused .hero-flow i, .hero-art.paused .hero-shine::after { animation-play-state: paused; }
.hero-in { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: 22px; padding-bottom: clamp(48px, 6vw, 88px); }
.hero .h1 { max-width: none; font-size: clamp(26px, 4vw, 54px); }
.hero .answer { max-width: none; font-size: clamp(17.5px, 1.5vw, 21px); line-height: 1.7; color: var(--mute); }
.hero .answer strong { color: var(--ice); font-weight: 600; }


/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 11px 22px; font-family: var(--f-body); font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; color: var(--ice); background: var(--ctl); border: 1px solid var(--ctl-line); border-radius: 12px; transition: border-color .2s, background .2s, box-shadow .25s, transform .2s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { background: var(--ctl-hi); border-color: var(--ion); transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { color: var(--ink); background: var(--btn); border-color: var(--btn); box-shadow: 0 10px 30px -12px rgba(90, 169, 255, .6); }
.btn-primary:hover { color: var(--ink); background: var(--btn-hi); border-color: var(--btn-hi); box-shadow: 0 14px 40px -12px rgba(90, 169, 255, .85), 0 0 0 3px rgba(90, 169, 255, .25); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 14.5px; border-radius: 10px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row.center { justify-content: center; }
@media (max-width: 480px) { .cta-row:not(.keep) > .btn { flex: 1 1 100%; } }

/* ---------- cards and rows that always fill ---------- */
.row { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.6vw, 20px); }
.row > * { flex: 1 1 var(--basis, 300px); min-width: 0; }
.row.b220 { --basis: 220px; }
.row.b260 { --basis: 260px; }
.row.b340 { --basis: 340px; }
.row.b400 { --basis: 400px; }
.card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.2vw, 28px); border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 60%), var(--panel); transition: border-color .25s, transform .25s; }
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.card .h3 { color: var(--ice); }
.card .foot { margin-top: auto; padding-top: 6px; }
.card-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ion); }
.card-ic svg { width: 20px; height: 20px; }
.panel { border: 1px solid var(--line-2); border-radius: 20px; background: radial-gradient(600px 300px at 50% 0%, rgba(90, 169, 255, .08), transparent 70%), var(--panel); padding: clamp(22px, 3vw, 40px); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: start; }
.split.wide-l { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
.split.mid { align-items: center; }
@media (max-width: 900px) { .split, .split.wide-l { grid-template-columns: minmax(0, 1fr); } }

/* ---------- chips and tags ---------- */
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); white-space: nowrap; line-height: 1.5; }
.chip.live { border-color: rgba(95, 227, 166, .4); color: var(--ok); }
.chip.soon { border-color: rgba(255, 180, 94, .4); color: var(--amber); }
.chip.watch { border-color: rgba(90, 169, 255, .4); color: var(--ion); }
.chip.happened { border-color: rgba(255, 122, 143, .45); color: var(--bad); }
.chip.s-in-force { border-color: rgba(95, 227, 166, .4); color: var(--ok); }
.chip.s-passed { border-color: rgba(90, 169, 255, .4); color: var(--ion); }
.chip.s-proposed { border-color: rgba(255, 180, 94, .4); color: var(--amber); }
.chip.s-voluntary { border-color: var(--line-2); color: var(--mute); }
.chip.s-stalled { border-color: rgba(139, 146, 157, .4); color: var(--dim); }
.chip.sev { color: var(--ice); }
.chip.sev-1 { border-color: rgba(185, 191, 201, .4); }
.chip.sev-2 { border-color: rgba(90, 169, 255, .5); color: var(--ion); }
.chip.sev-3 { border-color: rgba(255, 210, 120, .5); color: #ffd278; }
.chip.sev-4 { border-color: rgba(255, 154, 60, .55); color: var(--flare); }
.chip.sev-5 { border-color: rgba(255, 122, 143, .6); color: var(--bad); }
.tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.tag.namesake { color: var(--ink); font-weight: 700; background: linear-gradient(180deg, #ffffff 0%, #eef1f5 50%, #d9dee5 100%); border: 1px solid #ffffff; box-shadow: 0 0 12px rgba(255, 255, 255, .16); }   /* solid silver, no dark band behind the letters */
.tag.eco { color: var(--ion); background: rgba(90, 169, 255, .12); border: 1px solid rgba(90, 169, 255, .35); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- metrics (centered, count up) ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 1px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--line); }
.stat { flex: 1 1 var(--basis, 200px); min-width: 0; display: grid; justify-items: center; align-content: center; gap: 6px; padding: clamp(18px, 2.4vw, 30px) 14px; text-align: center; background: var(--panel); }
.stat .v { font-family: var(--f-display); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.15; color: var(--ice); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat .v small { font-size: .5em; color: var(--mute); margin-left: 2px; }
.stat .l { justify-self: stretch; display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.stat .d { font-size: 13.5px; color: var(--mute); max-width: 30ch; }

/* ---------- signals ---------- */
.sigs { --basis: 330px; }
.sig { gap: 14px; }
.sig .spark { margin-top: auto; }
.sig [data-st] { min-height: 3em; }
.sig-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sig .v { font-family: var(--f-display); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; color: var(--ice); font-variant-numeric: tabular-nums; text-align: center; padding: 8px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig .v.soon { font-size: clamp(18px, 1.7vw, 22px); color: var(--amber); letter-spacing: .02em; }
.sig .unit { text-align: center; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-top: -6px; }
.sig .det { text-align: center; font-size: 14.5px; color: var(--mute); line-height: 1.55; min-height: 3.1em; }
.spark { display: block; width: 100%; height: 46px; }
.spark .ln { fill: none; stroke: var(--ion); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark .ar { fill: url(#sparkfill); }
.spark .bar { fill: rgba(90, 169, 255, .55); }
.spark .bar.hi { fill: var(--amber); }
.sig-links { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; padding-top: 10px; border-top: 1px solid var(--line); }
.sig-links a { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ion); text-decoration: none; }
.sig-links a:hover { text-decoration: underline; }
.sig-full { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(20px, 3vw, 44px); padding: clamp(22px, 3vw, 40px); border: 1px solid var(--line); border-radius: 20px; background: var(--panel); scroll-margin-top: calc(var(--top) + 16px); }
.sig-full + .sig-full { margin-top: clamp(16px, 2vw, 24px); }
.sig-full .read { display: grid; align-content: start; gap: 16px; }
.sig-full .big { display: grid; justify-items: center; gap: 4px; padding: 22px 12px; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(300px 140px at 50% 0%, rgba(90, 169, 255, .1), transparent 70%), var(--panel-2); text-align: center; }
.sig-full .big .v { font-family: var(--f-display); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sig-full .big .v.soon { font-size: clamp(20px, 2vw, 26px); color: var(--amber); }
.sig-full .big .l { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.sig-full .big .d { color: var(--mute); font-size: 15px; max-width: 40ch; }
.sig-full .info { display: grid; align-content: start; gap: 16px; min-width: 0; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: 15px; }
.kv dt { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding-top: 3px; }
.kv dd { color: var(--mute); min-width: 0; overflow-wrap: anywhere; }
.kv dd a { color: var(--ion); }
@media (max-width: 900px) { .sig-full { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .kv dd { margin-bottom: 8px; } }

/* ---------- cite and code boxes ---------- */
.cite, .code { position: relative; border: 1px solid var(--line); border-radius: 12px; background: #08090c; min-width: 0; }
.cite-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); }
.cite pre, .code pre { margin: 0; padding: 12px 14px; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.6; color: var(--mute); white-space: pre-wrap; overflow-wrap: anywhere; }
.code pre { white-space: pre; overflow-x: auto; overflow-wrap: normal; }
.copy { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--ctl-line); background: var(--ctl); cursor: pointer; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ice); transition: border-color .2s, background .2s; }
.copy:hover { border-color: var(--ion); }
.copy.ok { border-color: var(--ok); color: var(--ok); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tab { min-height: 34px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--ctl-line); background: var(--ctl); cursor: pointer; font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.tab[aria-selected="true"] { color: var(--ink); background: var(--btn); border-color: var(--btn); }

/* one-line values: hashes, wallets, contract addresses */
.addr { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow-x: auto; font-family: var(--f-mono); font-size: 13px; color: var(--ice); scrollbar-width: thin; padding-bottom: 2px; }
.addr-row { container-type: inline-size; border: 1px solid var(--line); border-radius: 12px; background: #08090c; min-width: 0; }
.addr-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k c" "v v"; align-items: center; gap: 8px 12px; padding: 10px 10px 12px 14px; }
.addr-in .k { grid-area: k; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addr-in .copy { grid-area: c; }
/* --n is the number of characters in the address (set inline): the type shrinks so the whole address stays on one line */
.addr-in .addr { grid-area: v; font-size: clamp(9px, calc((100cqi - 26px) / (var(--n, 44) * .6136)), 14px); }
@container (min-width: 640px) {
  .addr-in { grid-template-columns: max-content minmax(0, 1fr) auto; grid-template-areas: "k v c"; padding: 10px 10px 10px 14px; }
  .addr-in .addr { font-size: clamp(10px, calc((100cqi - 240px) / (var(--n, 44) * .6136)), 14px); }
}

/* ---------- tables ---------- */
.tbl-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: 11px 14px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: rgba(255, 255, 255, .02); }
.tbl td.num, .tbl th.num { text-align: right; white-space: nowrap; }
.tbl td.nw { white-space: nowrap; }
.tbl td.c, .tbl th.c { text-align: center; }
.tbl td .sub { display: block; font-size: 13px; color: var(--dim); }
.tbl caption { caption-side: bottom; padding: 10px 14px; text-align: start; font-size: 13px; color: var(--dim); }
.tbl-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; }
.dl { display: flex; flex-wrap: wrap; gap: 8px; }
.dl a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--ctl-line); background: var(--ctl); text-decoration: none; font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ice); }
.dl a:hover { border-color: var(--ion); }
.dl .dl-set { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.dl .dl-g { display: inline-flex; align-items: center; gap: 6px; padding-right: 6px; font-size: 13.5px; color: var(--mute); }

/* ---------- charts (inline SVG, drawn to scale) ---------- */
.chart { container-type: inline-size; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: clamp(16px, 2.2vw, 26px); border: 1px solid var(--line); border-radius: 16px; background: var(--panel); min-width: 0; }
.chart > svg { align-self: center; }
.chart figcaption { align-self: start; }
.chart figcaption { display: grid; gap: 4px; }
.chart figcaption b { font-weight: 700; color: var(--ice); font-size: 16.5px; }
.chart figcaption span { font-size: 14px; color: var(--dim); }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .ax { stroke: var(--line-2); stroke-width: 1; }
.chart .gl { stroke: var(--line); stroke-width: 1; }
.chart text { font-family: var(--f-mono); font-size: 13px; fill: var(--dim); }
.chart text.vl { fill: var(--ice); font-weight: 600; font-size: 14px; }
.chart text.lb { fill: var(--mute); font-family: var(--f-body); font-size: 15px; }
.chart .b1 { fill: #b9bfc9; } .chart .b2 { fill: var(--ion); } .chart .b3 { fill: #ffd278; } .chart .b4 { fill: var(--flare); } .chart .b5 { fill: var(--bad); }
.chart .bi { fill: var(--ion); } .chart .ba { fill: var(--amber); } .chart .bm { fill: #6c7380; }
.chart-scroll { overflow-x: auto; overflow-y: hidden; min-width: 0; align-self: center; -webkit-overflow-scrolling: touch; }
.chart-scroll svg { display: block; }
@media (max-width: 640px) { .chart-scroll svg { min-width: 540px; } .chart-scroll::after { content: ""; display: block; height: 1px; } }
/* the legend always sits on one line and spans the card: the type and gaps scale with the card width */
.legend { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: clamp(6px, 2cqi, 22px); font-size: clamp(9.5px, 2.85cqi, 14px); line-height: 1.2; color: var(--mute); white-space: nowrap; }
.legend span { display: inline-flex; align-items: center; flex: none; }
.legend:not(:has(> :nth-child(3))) { justify-content: center; gap: clamp(16px, 5cqi, 40px); }
.legend i { display: inline-block; flex: none; width: clamp(7px, 1.9cqi, 11px); height: clamp(7px, 1.9cqi, 11px); border-radius: 3px; margin-inline-end: clamp(3px, 1cqi, 7px); }

/* ---------- pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.pillar { position: relative; display: grid; align-content: start; gap: 12px; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--line); border-radius: 18px; background: var(--panel); text-decoration: none; color: inherit; text-align: center; justify-items: center; transition: border-color .25s, transform .25s; }
.pillar:hover { border-color: var(--line-2); transform: translateY(-2px); }
.pillar .role { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ion); }
.pillar .tk { font-family: var(--f-display); font-size: 20px; color: var(--ice); }
.pillar .site { font-family: var(--f-mono); font-size: 13px; color: var(--mute); }
/* the site address sits on the bottom edge of every card, so a row of cards lines up flush whatever the copy length */
.pillar:not(.lead-p) { display: flex; flex-direction: column; align-items: center; }
.pillar:not(.lead-p) .site { margin-top: auto; padding-top: 6px; }
.pillar.lead-p { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; text-align: left; justify-items: start; gap: clamp(18px, 3vw, 44px); padding: clamp(24px, 3.4vw, 44px); border-color: rgba(255, 255, 255, .22); background: radial-gradient(520px 260px at 20% 50%, rgba(90, 169, 255, .14), transparent 70%), radial-gradient(420px 220px at 90% 0%, rgba(255, 180, 94, .08), transparent 70%), var(--panel); }
.pillar.lead-p .logo { height: auto; width: 100%; max-width: 520px; justify-self: center; }
.pillar.lead-p .tk { font-size: clamp(24px, 2.6vw, 34px); }
.pillar.lead-p .txt { display: grid; gap: 12px; }
@media (max-width: 900px) { .pillars { grid-template-columns: minmax(0, 1fr); } .pillar.lead-p { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; } }
@media (min-width: 560px) and (max-width: 900px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pillar { padding: 16px; } }

/* ---------- futures ---------- */
.fut { gap: 12px; }
.fut .q { color: var(--mute); font-size: 15px; }
.fut .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.when { border: 1px solid rgba(255, 180, 94, .35); border-radius: 18px; padding: clamp(20px, 2.6vw, 32px); background: radial-gradient(500px 220px at 0% 0%, rgba(255, 180, 94, .1), transparent 70%), var(--panel); display: grid; gap: 14px; }
.when.on { border-color: rgba(255, 122, 143, .6); background: radial-gradient(500px 220px at 0% 0%, rgba(255, 122, 143, .14), transparent 70%), var(--panel); }
.signals-list { list-style: none; display: grid; gap: 12px; }
.signals-list li { display: grid; gap: 4px; padding: 14px 16px; border-inline-start: 2px solid var(--ion); background: var(--panel); border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: 12px; border-end-end-radius: 12px; }
.signals-list li p { color: var(--mute); }
.signals-list li a { font-size: 13.5px; color: var(--ion); }
.src-list { list-style: none; display: grid; gap: 10px; counter-reset: s; }
.src-list li { counter-increment: s; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; font-size: 15px; color: var(--mute); }
.src-list li::before { content: counter(s); font-family: var(--f-mono); font-size: 12px; color: var(--dim); padding-top: 2px; }
.src-list a { color: var(--ion); overflow-wrap: anywhere; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); font-size: 20px; color: var(--ion); flex: none; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 20px 18px; color: var(--mute); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; container-type: inline-size; }
.faq .a .addr { margin-top: 4px; font-size: clamp(9px, calc(100cqi / (var(--n, 44) * .6136)), 13px); }
.faq .a a { color: var(--ion); }

/* ---------- timeline ---------- */
.tl { list-style: none; display: grid; gap: 0; position: relative; }
.tl li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tl li:last-child { border-bottom: 0; }
.tl time { font-family: var(--f-mono); font-size: 13px; color: var(--ion); letter-spacing: .04em; padding-top: 2px; }
.tl p { color: var(--mute); }
.tl p strong { color: var(--ice); }
@media (max-width: 560px) { .tl li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ---------- sector ---------- */
.pin { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2vw, 26px); padding: clamp(16px, 2vw, 24px); border: 1px solid rgba(255, 255, 255, .24); border-radius: 18px; background: radial-gradient(520px 200px at 0% 50%, rgba(90, 169, 255, .14), transparent 70%), radial-gradient(420px 200px at 100% 0%, rgba(255, 180, 94, .08), transparent 70%), var(--panel); }
.pin .logo { width: clamp(120px, 18vw, 220px); height: auto; }
.pin .txt { display: grid; gap: 6px; min-width: 0; }
.pin .nums { display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end; text-align: center; }
.pin .nums div { display: grid; gap: 2px; }
.pin .nums b { font-family: var(--f-display); font-size: 18px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .pin { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; } .pin .nums { justify-content: center; } }
.tm { position: relative; width: 100%; aspect-ratio: 16 / 9; container-type: size; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #060708; }
.tm.m { display: none; aspect-ratio: 3 / 4; }
@media (max-width: 700px) { .tm.d { display: none; } .tm.m { display: block; } }
.tm a { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em; overflow: hidden; text-align: center; text-decoration: none; color: var(--ice); border: 1px solid rgba(2, 2, 3, .9); padding: 2px; line-height: 1.1; transition: filter .2s; }
.tm a:hover, .tm a:focus-visible { filter: brightness(1.35); outline: none; z-index: 1; }
.tm a b { font-family: var(--f-mono); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.tm a span { font-family: var(--f-mono); opacity: .85; white-space: nowrap; }
.tm a.xs b, .tm a.xs span { display: none; }
.tm a.sm span { display: none; }
.tm-key { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin-top: 10px; font-size: 13px; color: var(--dim); }
.tm-scale { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; }
.tm-scale i { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #8a2a3a, #2a2d33, #1f6b4c); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.search-in { flex: 1 1 260px; min-width: 0; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--ctl-line); background: var(--panel-2); font-size: 16px; }
.search-in:focus, select:focus, .field input:focus, .field textarea:focus { outline: none; border-color: var(--ion); box-shadow: 0 0 0 3px rgba(90, 169, 255, .18); }
select { height: 46px; padding: 0 36px 0 12px; border-radius: 12px; border: 1px solid var(--ctl-line); background: var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23b9bfc9' stroke-width='1.6'/%3E%3C/svg%3E") right 12px center no-repeat; -webkit-appearance: none; appearance: none; font-size: 15px; max-width: 100%; }
.tbl th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tbl th button:focus-visible { outline: 2px solid var(--ion); outline-offset: 2px; border-radius: 4px; }
.tbl th[aria-sort="ascending"] button::after { content: "\25B2"; font-size: 8px; color: var(--ion); }
.tbl th[aria-sort="descending"] button::after { content: "\25BC"; font-size: 8px; color: var(--ion); }
.eco-logo { width: 120px; height: 40px; object-fit: contain; flex: none; }
.eco-logo.sq { width: 44px; height: 44px; }
.tok a { color: var(--ice); text-decoration: none; font-weight: 600; }
.tok a:hover { color: var(--ion); }
.tok .sym { font-family: var(--f-mono); font-size: 12px; color: var(--dim); }
.tok .tags { display: inline-flex; gap: 6px; }
tr.pinned td { background: rgba(90, 169, 255, .05); }
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pager .k { min-width: 140px; text-align: center; }
.tbl-sector { min-width: 760px; }
@media (max-width: 700px) {
  .tbl-sector { min-width: 540px; }
  .tbl-sector th:nth-child(6), .tbl-sector td:nth-child(6), .tbl-sector th:nth-child(7), .tbl-sector td:nth-child(7) { display: none; }
}
@media (max-width: 640px) {
  .tbl-cards thead { display: none; }
  .tbl-cards, .tbl-cards tbody, .tbl-cards tr { display: block; width: 100%; }
  .tbl-cards tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .tbl-cards tbody tr:last-child { border-bottom: 0; }
  .tbl-cards td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; border: 0; padding: 3px 0; text-align: left !important; white-space: normal !important; }
  .tbl-cards td:first-child { display: block; padding-bottom: 6px; }
  .tbl-cards td[data-label]:not(:first-child)::before { content: attr(data-label); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding-top: 3px; }
  .tbl-cards caption { display: block; }
  /* a contract address takes the full card width and shrinks to stay whole on one line */
  .tbl-cards td.ca { grid-template-columns: minmax(0, 1fr); gap: 2px; container-type: inline-size; }
  .tbl-cards td.ca .addr { font-size: clamp(9px, calc(100cqi / (var(--n, 44) * .6136)), 13px); overflow: hidden; }
}

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.field input, .field textarea { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ctl-line); background: var(--panel-2); font-size: 16px; }
.field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field .hint { font-size: 13px; color: var(--dim); }
.fields-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 640px) { .fields-2 { grid-template-columns: minmax(0, 1fr); } }
.msg { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--mute); font-size: 15px; }
.msg.ok { border-color: rgba(95, 227, 166, .45); color: var(--ok); }
.msg.err { border-color: rgba(255, 122, 143, .5); color: var(--bad); }
.msg:empty { display: none; }
.keybox { display: grid; gap: 10px; padding: 16px; border: 1px solid rgba(255, 180, 94, .5); border-radius: 14px; background: rgba(255, 180, 94, .06); }
.steps { list-style: none; counter-reset: st; display: grid; gap: 14px; }
.steps > li { counter-increment: st; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.steps > li::before { content: counter(st); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); font-family: var(--f-display); font-size: 14px; color: var(--ion); }
.steps > li > div { display: grid; gap: 6px; padding-top: 6px; }
.steps > li p { color: var(--mute); }

/* ---------- languages ---------- */
.langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.lg { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-decoration: none; color: inherit; min-width: 0; }
.lg .flag { width: 28px; height: 21px; }
.lg div { display: grid; min-width: 0; }
.lg b { font-weight: 600; font-size: 15.5px; overflow-wrap: anywhere; line-height: 1.3; }
.lg span { font-size: 12.5px; color: var(--dim); }
a.lg:hover { border-color: var(--ion); }
.lg.soon { opacity: .62; }
.lg .st { margin-inline-start: auto; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); white-space: nowrap; }
a.lg .st { color: var(--ok); }
.strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.strip a, .strip span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); text-decoration: none; font-size: 14px; color: var(--mute); }
.strip a { color: var(--ice); border-color: var(--line-2); }
.strip .flag { width: 20px; height: 15px; }

/* ---------- search ---------- */
.results { list-style: none; display: grid; gap: 10px; }
.results a { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-decoration: none; }
.results a:hover { border-color: var(--ion); }
.results b { color: var(--ice); }
.results span { font-size: 14px; color: var(--mute); }
.results small { font-family: var(--f-mono); font-size: 11.5px; color: var(--ion); overflow-wrap: anywhere; }

/* ---------- report ---------- */
.toc { display: flex; flex-wrap: wrap; gap: 8px; }
.toc a { padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; font-size: 14px; color: var(--mute); }
.toc a:hover { border-color: var(--ion); color: var(--ice); }
.keyf { list-style: none; display: grid; gap: 10px; }
.keyf li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; color: var(--mute); }
.keyf li::before { content: ""; width: 10px; height: 10px; margin-top: 8px; border-radius: 2px; background: var(--ion); box-shadow: 0 0 10px rgba(90, 169, 255, .6); justify-self: center; }
.keyf strong { color: var(--ice); }
.rsec { scroll-margin-top: calc(var(--top) + 16px); }
.rsec + .rsec { margin-top: clamp(44px, 5vw, 72px); }
.figs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 20px); }
@media (max-width: 900px) { .figs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- agents ---------- */
.lb-empty { display: grid; justify-items: center; gap: 10px; padding: clamp(28px, 4vw, 48px) 20px; text-align: center; color: var(--mute); }
.score { font-family: var(--f-display); font-size: 15px; color: var(--ice); }
.bar-in { display: block; height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; min-width: 80px; }
.bar-in i { display: block; height: 100%; background: linear-gradient(90deg, var(--ion-2), var(--ion)); }
.badge-prev { display: grid; place-items: center; padding: 24px; border: 1px dashed var(--line-2); border-radius: 14px; background: #060708; min-height: 130px; }
.badge-prev img { width: 360px; max-width: 100%; height: auto; }
.wallet-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel-2); font-family: var(--f-mono); font-size: 13px; max-width: 100%; }
.wallet-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- footer (full width) ---------- */
.site-footer { margin-top: 0; border-top: 1px solid var(--line); background: radial-gradient(900px 300px at 50% 0%, rgba(90, 169, 255, .06), transparent 70%), #030304; }
.ftr-in { padding: clamp(44px, 5vw, 72px) max(var(--hpad), env(safe-area-inset-right, 0px)) 28px max(var(--hpad), env(safe-area-inset-left, 0px)); display: grid; gap: clamp(28px, 4vw, 48px); }
.ftr-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.ftr-brand { display: grid; gap: 14px; align-content: start; }
.ftr-brand img { width: 240px; height: auto; }
.ftr-brand p { color: var(--mute); font-size: 15px; max-width: 46ch; }
.ftr-by { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ion); }
.ftr-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.ftr-cols h2 { font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; }
.ftr-cols ul { list-style: none; display: grid; gap: 8px; }
.ftr-cols a { color: var(--mute); text-decoration: none; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.ftr-cols a:hover { color: var(--ice); }
.ftr-cols a b { font-family: var(--f-mono); font-size: 12.5px; color: var(--ice); font-weight: 600; }
.ftr-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ftr-pillars a { display: grid; justify-items: center; gap: 8px; padding: 14px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); text-decoration: none; text-align: center; transition: border-color .2s; }
.ftr-pillars a:hover { border-color: var(--line-2); }
.ftr-pillars a:first-child { border-color: rgba(255, 255, 255, .24); background: radial-gradient(240px 120px at 50% 0%, rgba(90, 169, 255, .14), transparent 70%), var(--panel); }
.ftr-pillars b { font-family: var(--f-mono); font-size: 12.5px; color: var(--ice); }
.ftr-pillars span { font-size: 12.5px; color: var(--dim); }
.ftr-disc { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; font-size: 13.5px; line-height: 1.6; color: var(--dim); background: rgba(255, 255, 255, .015); }
.ftr-disc strong { color: var(--mute); }
.ftr-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--dim); }
.ftr-bottom a { color: var(--mute); text-decoration: none; }
.ftr-bottom a:hover { color: var(--ice); }
@media (max-width: 1100px) { .ftr-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .ftr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftr-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .ftr-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 404 ---------- */
.nf { display: grid; justify-items: center; text-align: center; gap: 18px; padding-block: clamp(80px, 12vw, 160px); }
.nf .code-big { font-family: var(--f-display); font-size: clamp(64px, 12vw, 140px); line-height: 1; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .brand .shine, .shine-wrap .shine, .hero-shine, .hero-flow, .hero-dust { display: none; }
  .js .rv { opacity: 1; transform: none; }
}
@media print {
  .site-header, .site-footer, .copy, .lang, .burger { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- SI network moment banner (si-moment.js) ---------- */
.si-moment-on .site-header { top: var(--si-moment-h, 0px); }
.stat .v.soon, .stat .v .soon { font-size: clamp(15px, 1.5vw, 19px); color: var(--amber); white-space: normal; }

/* ---------- right to left (ar, he, fa, ur) ---------- */
/* letter-spacing breaks the joining of Arabic script, so it is zero on every element of an RTL page */
[dir="rtl"] *, [dir="rtl"] *::before, [dir="rtl"] *::after { letter-spacing: 0 !important; }
[dir="rtl"] .link-arrow::after { content: "\2190"; }
[dir="rtl"] .link-arrow:hover::after { transform: translateX(-5px); }
[dir="rtl"] .lang-all svg, [dir="rtl"] .btn svg[viewBox="0 0 16 16"] { transform: scaleX(-1); }
[dir="rtl"] .addr, [dir="rtl"] .code pre { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .cite pre { unicode-bidi: plaintext; text-align: start; }
[dir="rtl"] .eyebrow, [dir="rtl"] .k, [dir="rtl"] .meta-row, [dir="rtl"] .nav-a, [dir="rtl"] .crumbs ol { text-transform: none; }
.lang-list a span { min-width: 0; }

/* ---------- the language list on phones: full width under the header ---------- */
@media (max-width: 640px) {
  .lang-panel { position: fixed; top: calc(var(--top) + env(safe-area-inset-top, 0px) + 6px); left: 16px; right: 16px; inset-inline-end: 16px; width: auto; max-width: none; }
  .lang-list { max-height: min(60vh, 420px); }
}

/* ---------- $SIO: the home band, the contract block of /token/ and the pending line ---------- */
.sio-band { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: clamp(14px, 1.6vw, 20px); padding: clamp(26px, 4vw, 56px) clamp(18px, 4vw, 56px); border: 1px solid rgba(255, 255, 255, .22); border-radius: 22px; background: radial-gradient(640px 300px at 50% 0%, rgba(90, 169, 255, .16), transparent 70%), radial-gradient(520px 260px at 100% 100%, rgba(255, 180, 94, .08), transparent 70%), radial-gradient(520px 260px at 0% 100%, rgba(90, 169, 255, .06), transparent 70%), var(--panel); }
.sio-band .sio-mark { width: clamp(112px, 12vw, 152px); height: auto; box-shadow: 0 0 0 1px var(--line-2), 0 0 44px rgba(90, 169, 255, .28); }
.sio-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.sio-band .lead { max-width: none; }
.sio-ca { width: 100%; max-width: 880px; }
.sio-ca .addr-row { text-align: start; }
.sio-pending { padding: 14px 18px; border: 1px dashed rgba(255, 180, 94, .5); border-radius: 12px; background: rgba(255, 180, 94, .05); color: var(--mute); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
.sio-links { justify-content: center; }
/* the pair diagram on /token/: a row when the card is wide, a stack when it is narrow */
.pairflow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; align-self: center; }
.pairflow li { position: relative; display: grid; gap: 6px; align-content: center; justify-items: center; text-align: center; min-height: 86px; padding: 14px 8px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2); }
.pairflow li.hi { border-color: var(--ion); box-shadow: 0 0 0 3px rgba(90, 169, 255, .12); }
.pairflow b { font-family: var(--f-display); font-weight: 400; font-size: 14px; line-height: 1.35; color: var(--ice); }
.pairflow span { font-family: var(--f-mono); font-size: 11.5px; color: var(--dim); }
.pairflow li + li::before { content: ""; position: absolute; top: 50%; inset-inline-start: -37px; width: 30px; height: 12px; margin-top: -6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'%3E%3Cpath d='M1 6h26M22 1l6 5-6 5' fill='none' stroke='%235aa9ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
[dir="rtl"] .pairflow li + li::before { transform: scaleX(-1); }
@container (max-width: 500px) {
  .pairflow { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pairflow li { min-height: 0; padding: 16px 12px; }
  .pairflow li + li::before { top: -24px; inset-inline-start: 50%; margin: 0; margin-inline-start: -15px; transform: rotate(90deg); }
}

/* $SIO tokenomics: the numbers inside the home band, and the facts table (labels in the first column, values wrap) */
.sio-band .tok-stats { width: 100%; max-width: 880px; }
.tok-stats { width: 100%; }
.tok-tbl tbody th { width: 30%; font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.tok-tbl tbody tr:last-child th { border-bottom: 0; }
.tok-tbl td { overflow-wrap: anywhere; }
.tok-tbl td .addr { max-width: 100%; }
@media (max-width: 560px) {
  .tok-tbl tbody tr { display: grid; }
  .tok-tbl tbody th { width: auto; border-bottom: 0; padding-bottom: 2px; }
  .tok-tbl tbody td { padding-top: 2px; }
}
.lock-addrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; margin-top: 16px; }
.lock-links { margin-top: 14px; justify-content: center; }
@media (max-width: 560px) {
  .tok-tbl tbody td { container-type: inline-size; }
  .tok-tbl td .addr { font-size: clamp(9px, calc(100cqi / (var(--n, 44) * .6136)), 14px); overflow: visible; }
}

/* SI Passport (the network widget from sicto.si): the full button on wide screens, an icon where the header is tight,
   and on phones a full width button at the top of the menu */
.si-pn-slot { display: inline-flex; align-items: center; flex: none; }
.si-pn-menu { display: none; }
.si-pn-slot .sipn.sipn-trigger.is-inline { height: 42px; border-radius: 12px; }
@media (max-width: 1599px) {
  .si-pn-slot .sipn.sipn-trigger.is-inline { width: 42px; padding: 0; gap: 0; justify-content: center; }
  .si-pn-slot .sipn.sipn-trigger.is-inline .sipn-t-l, .si-pn-slot .sipn.sipn-trigger.is-inline .sipn-t-no, .si-pn-slot .sipn.sipn-trigger.is-inline .sipn-chip { display: none; }
  .si-pn-slot .sipn.sipn-trigger.is-inline .sipn-t-ic { display: inline-grid; }
}
@media (max-width: 640px) {
  .si-pn-slot { display: none; }
  .si-pn-menu { display: flex; justify-content: center; width: 100%; max-width: 720px; margin-inline: auto; padding: 14px 0 6px; box-sizing: border-box; }
  .nav .si-pn-menu .sipn.sipn-trigger { width: 100%; height: 48px; font-size: 14px; justify-content: center; }
  .nav .si-pn-menu .sipn.sipn-trigger .sipn-t-full { display: inline-block; }
  .nav .si-pn-menu .sipn.sipn-trigger .sipn-t-short { display: none; }
  .nav .si-pn-menu .sipn.sipn-trigger.is-in .sipn-t-ic { display: inline-grid; }
}

/* =====================================================================
   v1.2.0 (Nov 10, 2026): SI Jobs, SI Exposure, open data and /cite/, Rug Radar, Open Signals
   ===================================================================== */
/* the header with the Signals and Report menus: a little less padding where the desktop menu is tightest */
@media (min-width: 1181px) and (max-width: 1439px) { .nav-a { padding-inline: 9px; letter-spacing: .1em; } .nav > ul { gap: 0; } }
/* a note at the top of a page ("events, not verdicts") */
.note { padding: 12px 16px; border: 1px solid rgba(90, 169, 255, .35); border-radius: 12px; background: rgba(90, 169, 255, .06); color: var(--mute); font-size: 15px; line-height: 1.6; max-width: 72ch; }
.note strong { color: var(--ice); }
.phero .note { margin-top: 4px; max-width: none; }
/* filters: a checkbox that sits with the inputs */
.chk { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--ctl-line); background: var(--panel-2); font-size: 15px; color: var(--mute); cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--ion); }
.chk.agree { min-height: 0; padding: 12px 14px; align-items: flex-start; line-height: 1.5; font-size: 14.5px; }
.chk.agree input { margin-top: 2px; flex: none; }
.chk.agree a { color: var(--ion); }
.field select { width: 100%; }
.field .sub { text-transform: none; letter-spacing: 0; font-family: var(--f-body); color: var(--dim); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* SI Jobs */
.tbl-jobs td:first-child a { color: var(--ice); font-weight: 600; text-decoration: none; }
.tbl-jobs td:first-child a:hover { color: var(--ion); }
.tbl-jobs td .sub { display: block; margin-top: 2px; }
.co-card { gap: 8px; }
.co-card .co-n { font-family: var(--f-mono); font-size: 13px; color: var(--mute); }
.co-card .co-n b { font-family: var(--f-display); font-weight: 400; font-size: 18px; color: var(--ice); margin-inline-end: 4px; }
.place-chips { justify-content: center; }
.place-chips .chip { text-decoration: none; padding: 7px 14px; font-size: 12px; color: var(--ice); transition: border-color .2s, color .2s; }
.place-chips .chip:hover { border-color: var(--ion); color: var(--ion); }
.place-chips .chip b { font-family: var(--f-display); font-weight: 400; color: var(--ion); letter-spacing: 0; }
/* SI Exposure: a share bar inside a table cell */
.bar-cell { display: inline-grid; grid-template-columns: minmax(70px, 140px) auto; align-items: center; gap: 10px; width: 100%; }
.bar-cell::before { content: ""; grid-area: 1 / 1; height: 8px; border-radius: 4px; background: var(--panel-3); }
.bar-cell i { grid-area: 1 / 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--ion-2), var(--ion)); min-width: 2px; }
.bar-cell b { font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--ice); font-variant-numeric: tabular-nums; }
.tbl-ex td .sub, .tbl-dorm td .sub, .tbl-watch td .sub { display: block; margin-top: 2px; }
.tbl-ex td:nth-child(2) a, .tbl-dorm td:first-child a, .tbl-watch td:first-child a { color: var(--ice); font-weight: 600; text-decoration: none; }
.tbl-ex td:nth-child(2) a:hover, .tbl-dorm td:first-child a:hover, .tbl-watch td:first-child a:hover { color: var(--ion); }
/* Rug Radar: the event feed */
.ev-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.ev { display: grid; gap: 8px; align-content: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); min-width: 0; }
.ev.empty { grid-column: 1 / -1; text-align: center; justify-items: center; padding: clamp(24px, 4vw, 40px) 18px; }
.ev-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ev-top time { font-family: var(--f-mono); font-size: 12px; color: var(--dim); }
.ev-tok { font-weight: 600; }
.ev-tok a { color: var(--ice); text-decoration: none; }
.ev-tok a:hover { color: var(--ion); }
.ev-tok .sym { font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--dim); }
.ev .small a { color: var(--ion); }
.ev .addr { font-size: 12px; }
.split .ev-list { grid-template-columns: minmax(0, 1fr); }
/* open data: charts as images, the dataset box, cards */
.svg-fig { display: grid; gap: 12px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); min-width: 0; }
.svg-fig img { width: 100%; height: auto; border-radius: 8px; background: #fff; }
.svg-fig figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.svg-fig figcaption b { color: var(--ice); font-weight: 600; }
.svg-fig figcaption .small a { color: var(--ion); }
.ds-box .kv { margin: 6px 0 4px; }
.cite-set { display: grid; gap: 10px; min-width: 0; }
.ds-card .k code { font-family: var(--f-mono); color: var(--ion); letter-spacing: .04em; }
.ds-card .small { color: var(--mute); }
.tbl-prev { font-size: 13.5px; }
.tbl-prev td { max-width: 260px; overflow-wrap: anywhere; }
/* Open Signals */
.os-list { list-style: none; display: grid; gap: 10px; }
.os-list li { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.os-list li b { color: var(--ice); }
#os-form .btn-primary { justify-self: start; }
@media (max-width: 480px) { #os-form .btn-primary { justify-self: stretch; } }
/* home: the five new tools */
.tools-row .card .k { color: var(--ion); }
.tools-row .card .tool-n { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 30px); color: var(--ice); line-height: 1.15; font-variant-numeric: tabular-nums; }
/* the filter bars of the new pages: selects share the row evenly, the count sits on its own line */
.jobs-x .filters select, #ex-sec, #rd-kind { flex: 1 1 170px; min-width: 0; }
.jobs-x .filters .k, #ex-count, #rd-count, #rd-tcount { flex: 1 1 100%; }
@media (max-width: 640px) { .jobs-x .filters .chk { flex: 1 1 120px; justify-content: center; } }
/* chart figures shrink with their column on the narrowest phones (the chart itself scrolls inside) */
.chart { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 380px) { .legend { flex-wrap: wrap; justify-content: center; row-gap: 6px; } }
.figs.top { align-items: start; }
@media (max-width: 560px) {
  .tbl.tight { font-size: 14px; }
  .tbl.tight th, .tbl.tight td { padding: 10px 6px; }
  .tbl.tight th:first-child, .tbl.tight td:first-child { padding-inline-start: 10px; }
  .tbl.tight th:last-child, .tbl.tight td:last-child { padding-inline-end: 10px; }
  .tbl.tight thead th { letter-spacing: .04em; font-size: 10px; white-space: normal; vertical-align: bottom; }
  .tbl.tight caption { padding: 10px 8px; }
}

/* ---------- the live ticker: $SI, $SIMIND, $SIS, $RSI, $SIO and $CFLX across the top of every page ----------
   Two identical groups in one track move left by exactly one group, so the loop never jumps. Each value has a fixed minimum
   width and shows a placeholder until the live numbers arrive. Hover, touch or keyboard focus pause it; reduced motion stops it. */
.tkr { position: relative; height: var(--tkr); overflow: hidden; background: linear-gradient(90deg, #05070b, #0b1424 50%, #05070b); border-bottom: 1px solid var(--line); }
.tkr::before, .tkr::after { content: ""; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 2; pointer-events: none; }
.tkr::before { left: 0; background: linear-gradient(90deg, #05070b, rgba(5, 7, 11, 0)); }
.tkr::after { right: 0; background: linear-gradient(-90deg, #05070b, rgba(5, 7, 11, 0)); }
.tkr-track { display: flex; width: max-content; height: 100%; align-items: center; will-change: transform; }
.tkr.run .tkr-track { animation: tkr var(--tkr-dur, 60s) linear infinite; }
/* hover pauses only where a pointer can hover (on phones a tap would leave it stuck); touch pauses through the hold class */
@media (hover: hover) { .tkr:hover .tkr-track { animation-play-state: paused; } }
/* keyboard focus on an item pauses it too (a tapped link keeps plain focus, which must not leave it stuck) */
.tkr:has(a:focus-visible) .tkr-track, .tkr.hold .tkr-track { animation-play-state: paused; }
@keyframes tkr { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.tkr-group { display: flex; align-items: center; flex: none; }
.tkr-it { display: inline-flex; align-items: center; gap: 8px; height: var(--tkr); padding: 0 20px; flex: none; white-space: nowrap; text-decoration: none; font-family: var(--f-mono); font-size: 12px; line-height: 1; color: var(--mute); border-right: 1px solid rgba(140, 170, 210, .14); font-variant-numeric: tabular-nums; }
a.tkr-it:hover .tkr-sym, a.tkr-it:focus-visible .tkr-sym { color: var(--ion); }
a.tkr-it:focus-visible { outline: 2px solid var(--ion); outline-offset: -4px; border-radius: 6px; }
.tkr-live { gap: 8px; color: var(--ok); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
/* joined and complex scripts read badly in a monospace fallback: the live label uses the text font there */
[dir="rtl"] .tkr-live, :lang(hi) .tkr-live, :lang(bn) .tkr-live, :lang(ta) .tkr-live, :lang(th) .tkr-live { font-family: var(--f-body); font-size: 13px; letter-spacing: 0; }
.tkr-sym { font-weight: 600; color: var(--ice); letter-spacing: .04em; }
.tkr-k { position: relative; top: 1px; font-size: 10.5px; letter-spacing: .12em; color: var(--dim); }
.tkr-v { display: inline-block; text-align: left; color: var(--ice); }
.tkr-p { min-width: 12ch; }
.tkr-c { min-width: 7ch; }
.tkr-m { min-width: 7ch; }
.tkr-c.up { color: var(--ok); }
.tkr-c.down { color: #ff7a8f; }
.tkr-c.flat { color: var(--dim); }
.tkr-v.sk { height: 10px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .14), rgba(255, 255, 255, .06)) 0 0 / 200% 100%; animation: tkr-sk 1.6s linear infinite; }
@keyframes tkr-sk { to { background-position: -200% 0; } }
@media (max-width: 640px) { .tkr::before, .tkr::after { width: 22px; } .tkr-it { padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) {
  .tkr.run .tkr-track { animation: none; }
  .tkr { overflow-x: auto; scrollbar-width: none; }
  .tkr::-webkit-scrollbar { display: none; }
  .tkr-v.sk { animation: none; }
}

/* ---------- SI ecosystem cards: one structure, one logo frame, one height ----------
   Every logo sits in the same fixed frame and is scaled to fit inside it (never cropped or stretched), so a square logo and
   a wordmark leave the name, ticker, market line and tag at the same place in every card. */
.eco-frame { position: relative; display: block; flex: none; width: 216px; max-width: 100%; height: 72px; }
/* the image box fills the frame and the logo is contained in it: centered, never cropped, never stretched */
.eco-frame > img, .eco-frame > .shine-wrap { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.eco-frame img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; }
.eco-frame.tp { width: 192px; height: 64px; }
.eco-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(14px, 1.6vw, 20px); }
@media (max-width: 1199px) { .eco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .eco-grid { grid-template-columns: minmax(0, 1fr); } }
.eco-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .eco-grid.n3 { grid-template-columns: minmax(0, 1fr); } }
.eco-card { display: grid; grid-template-rows: auto auto auto auto auto; justify-items: center; align-content: start; gap: 8px; padding: 22px 18px 20px; text-align: center; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, var(--panel-2), var(--panel)); transition: border-color .2s, transform .2s; min-width: 0; }
.eco-card:hover, .eco-card:focus-visible { border-color: var(--line-2); transform: translateY(-2px); }
.eco-card .eco-frame { margin-bottom: 6px; }
.eco-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 600; color: var(--ice); line-height: 1.3; }
.eco-sym { font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em; color: var(--dim); line-height: 1.3; }
.eco-mkt { max-width: 100%; white-space: nowrap; font-size: 14.5px; color: var(--mute); font-variant-numeric: tabular-nums; line-height: 1.4; }
.eco-card .tag { margin-top: 4px; }

/* home and futures pillars: the same fixed frame for every logo, and the three pillars under the $SI spotlight share one height */
.pillars { grid-template-columns: minmax(0, 1fr); }
.pillars-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(14px, 1.6vw, 20px); }
@media (max-width: 559px) { .pillars-3 { grid-template-columns: minmax(0, 1fr); } }
.eco-frame.pf { width: 288px; height: 96px; }
@media (min-width: 560px) and (max-width: 900px) { .eco-frame.pf { width: 192px; height: 64px; } }
@media (max-width: 559px) { .eco-frame.pf { width: 252px; height: 84px; } }
.pillar.lead-p .logo { height: auto; }

/* footer pillars: one frame, one line each for token, role and site, one height */
.ftr-pillars { grid-auto-rows: 1fr; }
.ftr-pillars .eco-frame { width: 138px; height: 46px; }
.ftr-pillars a { align-content: start; gap: 6px; }
.ftr-pillars a .eco-frame + b { margin-top: 4px; }

/* token tables: every row has the same 56 by 24 logo frame, and the name, symbol and tag share one aligned column */
.tok { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; column-gap: 12px; min-width: 0; }
.tok-l { display: grid; place-items: center; width: 56px; height: 24px; }
.tok-l img { width: 24px; height: 24px; border-radius: 50%; background: var(--panel-3); object-fit: contain; }
.tok-l img.wm { width: 56px; height: auto; max-height: 24px; border-radius: 0; background: none; }
.tok-l img.sq { border-radius: 0; background: none; }
.tok-l .shine-wrap { max-width: 56px; }
.tok-ph { width: 24px; height: 24px; border-radius: 50%; background: #1b1e23; }
.tok-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }