/* gassed. main styles: blue flame. A near-black page with one static blue glow at the top, dark panels with hairline
   borders, and the flame (electric blue into cyan) only where something is live or clickable: primary buttons, the
   active tab, focus rings, the logo's dot. Green and red mean long and short and nothing else. Unbounded for display
   type, Inter for text, JetBrains Mono for numbers. Fonts are linked in index.html; class names match what
   assets/js/app.js renders. Nothing here needs a GPU: no blur, no fixed backgrounds, no animated gradients. */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;border:0 solid currentColor}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4}
body,h1,h2,h3,h4,p,dl,dd,figure,blockquote,pre,hr{margin:0}
h1,h2,h3,h4{font-size:inherit;font-weight:inherit}
b,strong{font-weight:700}
small{font-size:80%}
ol,ul,menu{list-style:none;margin:0;padding:0}
table{border-collapse:collapse;text-indent:0}
button,input,select,textarea{color:inherit;font:inherit;letter-spacing:inherit;margin:0;padding:0}
button{-webkit-appearance:button;background:none;cursor:pointer}
:disabled{cursor:default}
img,svg,video,canvas{display:block;vertical-align:middle}
img{height:auto;max-width:100%}
input::placeholder{color:var(--dim);opacity:1}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}

/* ---------- tokens ---------- */
:root{
  color-scheme:dark;
  --page:#05070b;
  --panel:#0b0e15;--panel-2:#10141d;--panel-3:#161b27;--well:#07090e;
  --line:#1a2030;--line-2:#252d40;--line-3:#33405a;
  --text:#eef1f7;--soft:#b6bfce;--muted:#8791a5;--dim:#5d6779;
  /* the flame: electric blue into cyan */
  --accent:#3d7bff;--accent-2:#2fd4f5;--on-accent:#03101f;
  --flame:linear-gradient(100deg,#3d7bff 0%,#2fd4f5 100%);
  --flame-hi:linear-gradient(100deg,#5b8fff 0%,#5ae0f8 100%);
  --ring:0 0 0 3px rgba(61,123,255,.35);
  --glow:0 14px 34px -14px rgba(61,123,255,.55);
  --long:#34d399;--long-fill:#10b981;--long-soft:rgba(52,211,153,.12);--long-line:rgba(52,211,153,.35);
  --short:#fb7185;--short-fill:#f43f5e;--short-soft:rgba(251,113,133,.12);--short-line:rgba(251,113,133,.35);
  --r:16px;--r-sm:10px;
  --sans:"Inter",ui-sans-serif,system-ui,sans-serif;--display:"Unbounded","Inter",ui-sans-serif,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}

/* ---------- page ---------- */
body{
  -webkit-font-smoothing:antialiased;color:var(--text);font-family:var(--sans);min-height:100vh;
  background-color:var(--page);
  background-image:
    radial-gradient(900px 420px at 78% -120px,rgba(61,123,255,.22),rgba(61,123,255,0) 70%),
    radial-gradient(700px 360px at 8% -160px,rgba(47,212,245,.12),rgba(47,212,245,0) 70%);
  background-repeat:no-repeat;
}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.wrap{margin:0 auto;max-width:1140px;padding:0 20px}
.num{font-family:var(--mono);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.soft{color:var(--soft)}
.dim{color:var(--dim)}
.long{color:var(--long)}
.short{color:var(--short)}
.tiny{font-size:11px}
.small{font-size:13px}
.accent{color:var(--accent-2);font-weight:600;text-decoration:underline;text-decoration-color:rgba(47,212,245,.4);text-decoration-thickness:1px;text-underline-offset:3px}
.accent:hover{text-decoration-color:var(--accent-2)}
.sr-only{clip:rect(0 0 0 0);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}

/* ---------- nav ---------- */
.nav{background:rgba(5,7,11,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.nav::after{background:linear-gradient(90deg,rgba(61,123,255,0),rgba(61,123,255,.7) 30%,rgba(47,212,245,.7) 70%,rgba(47,212,245,0));bottom:-1px;content:"";height:1px;left:0;position:absolute;right:0}
.nav-inner{align-items:center;display:flex;gap:18px;height:64px}
/* the wordmark: gassed, then a flame dot */
.logo{align-items:baseline;color:var(--text);display:flex;font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1;text-transform:lowercase}
.logo::after{background:var(--flame);border-radius:2px;content:"";flex:none;height:6px;margin-left:3px;width:6px}
.nav-links{display:flex;gap:4px;margin-left:6px}
.nav-links a{border-radius:9px;color:var(--muted);font-size:14px;font-weight:600;padding:7px 12px;transition:color .15s,background-color .15s}
.nav-links a:hover{background:var(--panel-2);color:var(--text)}
.nav-links a.active{background:var(--panel-3);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text)}
.nav-spacer{flex:1 1}
.x-link{background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--soft);display:inline-grid;flex:none;height:38px;place-items:center;transition:color .15s,border-color .15s,background-color .15s;width:38px}
.x-link:hover{background:var(--panel-3);border-color:var(--line-3);color:var(--text)}

/* ---------- buttons, chips, tabs ---------- */
.btn{align-items:center;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--text);cursor:pointer;display:inline-flex;font-family:var(--sans);font-size:14px;font-weight:600;gap:7px;justify-content:center;padding:9px 16px;transition:background-color .15s,border-color .15s,box-shadow .15s,transform .08s;white-space:nowrap}
.btn:hover{background:var(--panel-3);border-color:var(--line-3)}
.btn:active{transform:translateY(1px)}
.btn:disabled{cursor:not-allowed;opacity:.5;transform:none}
.btn.primary{background:var(--flame);border-color:transparent;color:var(--on-accent);font-weight:700}
.btn.primary:hover{background:var(--flame-hi);box-shadow:var(--glow)}
.btn.primary.long{background:var(--long-fill);color:var(--on-accent)}
.btn.primary.long:hover{background:#2bd49d;box-shadow:0 14px 34px -14px rgba(16,185,129,.6)}
.btn.primary.short{background:var(--short-fill);color:var(--on-accent)}
.btn.primary.short:hover{background:#ff5c78;box-shadow:0 14px 34px -14px rgba(244,63,94,.6)}
.btn.wide{font-size:16px;padding:14px;width:100%}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--panel-2)}
.chip,.tabs button{background:var(--panel-2);border:1px solid var(--line-2);border-radius:999px;color:var(--soft);cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:600;padding:6px 13px;transition:background-color .15s,border-color .15s,color .15s}
.chip:hover,.tabs button:hover{border-color:var(--line-3);color:var(--text)}
.chip.active,.tabs button.active{background:rgba(61,123,255,.16);border-color:rgba(61,123,255,.65);color:#fff}
.tabs{display:flex;gap:6px}
select.chip{padding-right:10px}
select.chip option{background:var(--panel-2);color:var(--text)}

/* ---------- live strip under the nav ---------- */
.statsbar{align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--muted);display:flex;flex-wrap:wrap;font-size:12px;font-weight:600;gap:22px;letter-spacing:.06em;margin-top:22px;padding:9px 16px;text-transform:uppercase}
.statsbar b{color:var(--text);font-family:var(--mono);font-weight:600}
.live-dot{animation:pulse 2s infinite;background:var(--accent-2);border-radius:50%;box-shadow:0 0 0 0 var(--accent-2);display:inline-block;height:7px;margin-right:8px;vertical-align:1px;width:7px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,212,245,.6)}70%{box-shadow:0 0 0 7px rgba(47,212,245,0)}to{box-shadow:0 0 0 0 rgba(47,212,245,0)}}

/* ---------- home ---------- */
.hero{padding:64px 0 10px}
.hero-kicker{align-items:center;color:var(--accent-2);display:flex;font-family:var(--mono);font-size:12px;font-weight:700;gap:12px;letter-spacing:.2em;text-transform:uppercase}
.hero-kicker::before{background:var(--flame);content:"";flex:none;height:2px;width:30px}
.hero-title{font-family:var(--display);font-size:clamp(38px,7.4vw,86px);font-weight:800;letter-spacing:-.045em;line-height:1;margin:22px 0 0}
.hero-title span{display:inline-block}
.hero-title .up{color:var(--long)}
.hero-title .or{color:var(--dim);font-weight:600}
.hero-title .down{color:var(--short)}
.hero p{color:var(--soft);font-size:18px;font-weight:500;line-height:1.55;margin:24px 0 22px;max-width:560px}
.ca-box{background:var(--panel);border:1px solid var(--line-2);border-radius:14px;display:flex;gap:8px;max-width:640px;padding:6px;transition:border-color .15s,box-shadow .15s}
.ca-box:focus-within{border-color:rgba(61,123,255,.7);box-shadow:var(--ring)}
.ca-box input{background:transparent;color:var(--text);flex:1 1;font-family:var(--mono);font-size:15px;min-width:0;outline:none;padding:10px 12px}
.section{margin-top:52px}
.section-head{align-items:center;display:flex;gap:12px;margin-bottom:16px}
.section-head h2{color:var(--text);font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.03em;margin:0}
.section-head h3{font-size:17px;font-weight:700}
.badge-real{background:rgba(47,212,245,.08);border:1px solid rgba(47,212,245,.3);border-radius:6px;color:var(--accent-2);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;padding:2px 7px;text-transform:uppercase}
.section-head .muted{color:var(--muted);font-weight:500}

/* coin cards */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);color:var(--text);contain-intrinsic-size:140px;content-visibility:auto;display:flex;flex-direction:column;gap:10px;padding:14px;transition:border-color .15s,box-shadow .15s,transform .15s}
.card:hover{border-color:rgba(61,123,255,.55);box-shadow:var(--glow);transform:translateY(-2px)}
.card:active{transform:translateY(0)}
.card-top{align-items:center;display:flex;gap:10px}
.coin-img{background:var(--panel-3);border:1px solid var(--line-2);border-radius:50%;flex:none;height:38px;object-fit:cover;width:38px}
.coin-img.big{border-color:var(--line-3);border-radius:50%;border-width:2px;box-shadow:0 0 0 4px rgba(61,123,255,.12)}
.avatar-letter{display:inline-grid;font-family:var(--sans);font-weight:800;place-items:center}
.coin-name{font-size:16px;font-weight:700;letter-spacing:-.01em}
.coin-venue{color:var(--dim);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.card-row{align-items:center;display:flex;justify-content:space-between}
.mcap{font-family:var(--mono);font-size:16px;font-weight:600}
.card-row>.small.long,.card-row>.small.short{border:1px solid;border-radius:999px;font-family:var(--mono);font-weight:600;padding:1px 8px}
.card-row>.small.long{background:var(--long-soft);border-color:var(--long-line)}
.card-row>.small.short{background:var(--short-soft);border-color:var(--short-line)}
.liq{color:var(--muted);font-size:12px}
.ioi{display:flex;font-size:11px;gap:6px}
.pill{border:1px solid;border-radius:999px;font-family:var(--mono);font-weight:600;padding:1px 7px}
.pill.long{background:var(--long-soft);border-color:var(--long-line);color:var(--long)}
.pill.short{background:var(--short-soft);border-color:var(--short-line);color:var(--short)}

/* top trades and the tape */
.two-col{display:grid;gap:22px;grid-template-columns:1fr 1fr}
.tape,.toptrades{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);color:var(--text);list-style:none;margin:0;padding:4px 16px}
.tape li,.toptrades li{align-items:center;border-bottom:1px solid var(--line);display:flex;font-size:13px;gap:8px;padding:11px 0}
.tape li:last-child,.toptrades li:last-child{border-bottom:0}
.tape li{color:var(--soft)}
.tape .sym,.toptrades .sym{color:var(--text);font-weight:700}
.tape .t-ago{color:var(--dim);font-size:12px;margin-left:auto;white-space:nowrap}
.toptrades .rank{background:var(--panel-3);border:1px solid var(--line-2);border-radius:8px;color:var(--soft);display:grid;flex:none;font-family:var(--mono);font-size:12px;font-weight:700;height:26px;place-items:center;width:26px}
.toptrades li:first-child .rank{background:var(--flame);border-color:transparent;color:var(--on-accent)}

/* ---------- coin, pool, portfolio pages ---------- */
.coin-head{align-items:center;color:var(--text);display:flex;gap:16px;padding:32px 0 20px}
.coin-head h1{color:var(--text);font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-.035em;line-height:1.1;margin:0}
.coin-head .muted{color:var(--muted);font-weight:500}
.ca{color:var(--muted);font-family:var(--mono);font-size:12px}
.ca a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.coin-head .ca .accent{color:var(--accent-2)}
#coin-quote .mcap{color:var(--text)}
#coin-quote .long,#coin-quote .short{border:1px solid;border-radius:999px;display:inline-block;font-weight:600;margin-top:4px;padding:1px 10px}
#coin-quote .long{background:var(--long-soft);border-color:var(--long-line)}
#coin-quote .short{background:var(--short-soft);border-color:var(--short-line)}
.detail{align-items:start;display:grid;gap:22px;grid-template-columns:1fr 390px}
.detail>*{min-width:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);color:var(--text);overflow-x:auto;padding:18px}
.panel h2{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.03em;margin-bottom:8px}
.panel h3{font-size:17px;font-weight:700}
.statgrid{display:grid;gap:10px;grid-template-columns:repeat(4,1fr)}
.statgrid .s{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.statgrid .s dt{color:var(--dim);font-size:11px;font-weight:700;letter-spacing:.07em;margin-bottom:3px;text-transform:uppercase}
.statgrid .s dd{font-family:var(--mono);font-size:18px;font-weight:600;margin:0}
.chart-wrap,#coin-chart{border-radius:var(--r-sm)}

/* trade ticket */
.side-toggle{background:var(--well);border:1px solid var(--line);border-radius:12px;display:grid;gap:4px;grid-template-columns:1fr 1fr;margin-bottom:16px;padding:4px}
.side-toggle button{background:transparent;border-radius:9px;color:var(--muted);cursor:pointer;font-family:var(--sans);font-size:15px;font-weight:700;padding:11px;transition:background-color .15s,color .15s}
.side-toggle button:hover{color:var(--text)}
.side-toggle button.a-long.on{background:var(--long-fill);color:var(--on-accent)}
.side-toggle button.a-short.on{background:var(--short-fill);color:var(--on-accent)}
.field{margin-bottom:14px}
.field label{color:var(--dim);display:block;font-size:11px;font-weight:700;letter-spacing:.07em;margin-bottom:6px;text-transform:uppercase}
.field input{background:var(--well);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--text);font-family:var(--mono);font-size:16px;outline:none;padding:12px 14px;transition:border-color .15s,box-shadow .15s;width:100%}
.field input:focus{border-color:rgba(61,123,255,.7);box-shadow:var(--ring)}
.lev-row{display:flex;gap:6px}
.lev-row button{background:var(--panel-2);border:1px solid var(--line-2);border-radius:9px;color:var(--soft);cursor:pointer;flex:1 1;font-family:var(--mono);font-size:14px;font-weight:600;padding:9px;transition:background-color .15s,border-color .15s,color .15s}
.lev-row button:hover{border-color:var(--line-3);color:var(--text)}
.lev-row button.on{background:var(--flame);border-color:transparent;color:var(--on-accent);font-weight:700}
.quick{display:flex;gap:6px;margin-top:8px}
.quick button{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;color:var(--muted);cursor:pointer;flex:1 1;font-family:var(--mono);font-size:12px;font-weight:500;padding:5px}
.quick button:hover{border-color:var(--line-3);color:var(--text)}
.oneclick{align-items:center;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--text);cursor:pointer;display:flex;gap:10px;margin-bottom:12px;padding:10px 12px;text-align:left;transition:border-color .15s;width:100%}
.oneclick:hover{border-color:var(--line-3)}
.oneclick.on{border-color:rgba(61,123,255,.6)}
.oneclick .sw{background:var(--line-2);border-radius:999px;flex:none;height:22px;margin-left:auto;position:relative;transition:background-color .15s;width:40px}
.oneclick .sw::after{background:#fff;border-radius:50%;content:"";height:16px;left:3px;position:absolute;top:3px;transition:left .15s;width:16px}
.oneclick.on .sw{background:var(--accent)}
.oneclick.on .sw::after{left:21px}
.msg{border:1px solid;border-radius:var(--r-sm);font-size:13px;font-weight:500;margin-top:12px;padding:11px 13px}
.msg.ok{background:var(--long-soft);border-color:var(--long-line);color:#a7f3d0}
.msg.err{background:var(--short-soft);border-color:var(--short-line);color:#fecdd3}
.scen{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.scen-row{display:flex;font-family:var(--mono);font-size:13px;justify-content:space-between;padding:4px 0}
.engine-banner{background:rgba(61,123,255,.1);border:1px solid rgba(61,123,255,.45);border-radius:var(--r-sm);color:#c7d7ff;font-size:14px;font-weight:600;margin:12px 0 0;padding:10px 14px}

/* rows and tables */
.pos-row{align-items:center;border-bottom:1px solid var(--line);display:flex;font-size:14px;gap:10px;padding:11px 0}
.pos-row:last-child{border-bottom:0}
.pos-row .pnl{font-family:var(--mono);font-weight:600;margin-left:auto}
table.trades{border-collapse:collapse;font-size:13px;width:100%}
table.trades th{color:var(--dim);font-size:11px;font-weight:700;letter-spacing:.07em;padding:8px 6px;text-align:left;text-transform:uppercase}
table.trades td,table.trades th{border-bottom:1px solid var(--line)}
table.trades tr:last-child td{border-bottom:0}
table.trades td{font-family:var(--mono);padding:9px 6px}
table.trades td a{text-decoration:underline;text-decoration-color:var(--line-3);text-decoration-thickness:1px;text-underline-offset:2px}
.standings{border-collapse:collapse;width:100%}
.standings td,.standings th{border-bottom:1px solid var(--line);font-size:14px;padding:12px 10px;text-align:left}
.standings th{color:var(--dim);font-size:11px;text-transform:uppercase}
.standings td.num{font-family:var(--mono)}
.loading{color:var(--muted);font-weight:500;padding:40px 0;text-align:center}
.err-banner{background:var(--short-soft);border:1px solid var(--short-line);border-radius:var(--r-sm);color:#fecdd3;font-size:14px;font-weight:600;margin:16px 0;padding:12px 16px}

/* ---------- docs ---------- */
.docs{align-items:start;display:grid;gap:28px;grid-template-columns:210px 1fr;padding-top:32px}
.docs-toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;gap:2px;padding:8px;position:sticky;top:88px}
.docs-toc a{border-radius:8px;color:var(--muted);font-size:14px;font-weight:500;padding:7px 10px}
.docs-toc a:hover{background:var(--panel-2);color:var(--text)}
.docs article{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);color:var(--text);min-width:0;padding:32px 36px}
.docs article h1{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.035em;line-height:1.15;margin:0 0 14px}
.docs article h2{border-left:3px solid var(--accent);font-size:20px;font-weight:700;letter-spacing:-.01em;margin:34px 0 10px;padding-left:12px;scroll-margin-top:96px}
.docs article p,.docs article li{color:var(--soft);font-size:15px;line-height:1.7}
.docs article p+p{margin-top:10px}
.docs article ul{list-style:disc;padding-left:20px}
.docs article b{color:var(--text)}
.docs article b.long{color:var(--long)}
.docs article b.short{color:var(--short)}
.docs .kv{border:1px solid var(--line-2);border-radius:var(--r-sm);display:grid;grid-template-columns:1fr auto;margin:6px 0 10px;overflow:hidden}
.docs .kv div{border-bottom:1px solid var(--line);font-size:14px;padding:10px 14px}
.docs .kv div:nth-last-child(-n+2){border-bottom:0}
.docs .kv div:nth-child(2n){color:var(--text);font-family:var(--mono);font-weight:600;text-align:right}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);color:var(--dim);font-size:13px;font-weight:500;margin:72px 0 0;padding:26px 0 34px;text-align:center}
footer .accent{color:var(--accent-2)}

/* ---------- small screens ---------- */
@media (max-width:920px){.detail{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
@media (max-width:720px){
  .wrap{padding:0 14px}
  .nav-inner{flex-wrap:wrap;gap:10px;height:auto;padding:10px 14px}
  .logo{font-size:19px}
  .wallet-chip .btn{font-size:12px;gap:4px;padding:7px 10px}
  .nav-links{margin:0;order:3;overflow-x:auto;padding:0 4px 2px 0;scrollbar-width:none;width:100%}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{flex:none}
  .statsbar{flex-wrap:nowrap;font-size:11px;gap:14px;margin-top:16px;overflow-x:auto;white-space:nowrap}
  .hero{padding:40px 0 6px}
  .hero-title{margin-top:16px}
  .hero p{font-size:15px;margin-top:18px}
  .ca-box{flex-direction:column}
  .ca-box .btn{width:100%}
  .section{margin-top:40px}
  .section-head{flex-wrap:wrap}
  .section-head h2{font-size:19px}
  .section-head .tabs,.section-head select{margin-left:0!important;overflow-x:auto;padding:0 4px 3px 0;width:100%}
  .grid{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{gap:7px;padding:10px}
  .coin-img{height:30px!important;width:30px!important}
  .coin-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .coin-name,.mcap{font-size:13px}
  .ioi,.liq{font-size:10px}
  .card-row{flex-wrap:wrap;gap:4px}
  .coin-head{flex-wrap:wrap;gap:10px;padding:22px 0 14px}
  .coin-head h1{font-size:25px}
  .coin-head-detail .coin-img.big{height:48px!important;width:48px!important}
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .tape li{flex-wrap:wrap;font-size:12px}
  .toptrades li{flex-wrap:wrap;font-size:13px}
  .standings,table.trades{font-size:12px;min-width:460px}
  .panel{padding:14px}
  .docs{gap:14px;grid-template-columns:1fr}
  .docs-toc{flex-direction:row;overflow-x:auto;position:static}
  .docs-toc a{flex:none}
  .docs article{padding:22px 18px}
  .docs article h1{font-size:24px}
  .x-link{height:36px;width:36px}
}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}.card,.btn,.chip,.x-link,.side-toggle button,.lev-row button,.ca-box,.field input{transition:none}.card:hover{transform:none}}