/* ARC Docs: the markets.arcterminal.ai frame, for reading. Light dot-grid paper, a left sidebar of pages, a sticky top
   bar with search, and each page a 12-column grid of white panels (radius 24px), with one black room for what is coming.
   Satoshi for words, Doto for the figure that matters, JetBrains Mono for labels and numbers, one orange. Tokens, sidebar,
   top bar, panels, tables, chips and the dark room are the markets dashboard's own (~/Downloads/ARC-Markets-Dashboard/
   src/style.css), copied, not remembered. Profit green / loss red only for money won or lost. */
@font-face{font-family:Satoshi;src:url(/assets/fonts/Satoshi-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(/assets/fonts/Satoshi-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(/assets/fonts/Satoshi-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Satoshi;src:url(/assets/fonts/Satoshi-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/JetBrainsMono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/JetBrainsMono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Doto;src:url(/assets/fonts/Doto-var.woff2) format("woff2");font-weight:100 900;font-display:block}

:root{--brand:#FA6F43;--brand2:#FF8259;--up:#109C58;--neg:#E5484D;--amber:#c98500;
  --sans:"Satoshi",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Helvetica,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --bg:#F0F0F0;--card:#FFFFFF;--ink:#15171C;--slate:#5E6470;--mute:#8A8F98;--soft:rgba(30,50,90,.025);--line:rgba(30,50,90,.08);--line2:rgba(30,50,90,.14);--dot:rgba(30,50,90,.10);--shadow:0 8px 30px rgba(0,0,0,.04);
  --dk:#0C0D0F;--dk-card:#16171A;--dk-card2:#1F2125;--dk-ink:#F2F2F0;--dk-slate:#A3A8B1;--dk-mute:#6E737C;--dk-line:rgba(255,255,255,.07);--dk-line2:rgba(255,255,255,.13);
  --on-ink:#fff;--ink-hover:#000;--side-bg:rgba(255,255,255,.5);--top-bg:rgba(240,240,240,.84);--side-m:rgba(246,246,246,.97);--dk-edge:transparent;
  --side:256px;--ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.34,1.4,.64,1);--spring2:cubic-bezier(.34,1.56,.64,1)}
/* Dark: follows the device unless the switch in the top bar picked one (data-theme on <html>, set before paint in the head). */
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0F1012;--card:#18191C;--ink:#F2F2F0;--slate:#A3A8B1;--mute:#7C818A;--soft:rgba(255,255,255,.03);--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.13);--dot:rgba(255,255,255,.055);--shadow:none;--on-ink:#0C0D0F;--ink-hover:#fff;--side-bg:rgba(22,23,26,.6);--top-bg:rgba(15,16,18,.84);--side-m:rgba(20,21,24,.97);--dk:#0A0B0C;--dk-edge:rgba(255,255,255,.07);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0F1012;--card:#18191C;--ink:#F2F2F0;--slate:#A3A8B1;--mute:#7C818A;--soft:rgba(255,255,255,.03);--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.13);--dot:rgba(255,255,255,.055);--shadow:none;--on-ink:#0C0D0F;--ink-hover:#fff;--side-bg:rgba(22,23,26,.6);--top-bg:rgba(15,16,18,.84);--side-m:rgba(20,21,24,.97);--dk:#0A0B0C;--dk-edge:rgba(255,255,255,.07);color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-padding-top:84px}
body{display:flex;min-height:100vh;background:var(--bg) radial-gradient(var(--dot) 1.3px,transparent 1.7px) 0 0/28px 28px;color:var(--ink);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
b,strong{font-weight:500}
::selection{background:var(--brand);color:#160803}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dots{font-family:"Doto",var(--mono);font-variation-settings:"wght" 900,"ROND" 100;font-weight:900;font-variant-numeric:tabular-nums}
.dim{color:var(--mute)}
.pos{color:var(--up)}.negv{color:var(--neg)}
[hidden]{display:none!important}
.k{display:block;font:500 10.5px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.tag{display:inline-flex;align-items:center;gap:8px;font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}
h3{font-size:18px;font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.h{font-weight:500;letter-spacing:-.03em;line-height:1.1;color:var(--slate);text-wrap:balance}
.h b{font-weight:500;color:var(--ink)}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--ink);color:var(--on-ink);padding:8px 14px;border-radius:99px}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ───────── the sidebar ───────── */
.side{position:sticky;top:0;height:100vh;width:var(--side);flex:none;display:flex;flex-direction:column;padding:18px 14px 16px;border-right:1px solid var(--line);background:var(--side-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow-y:auto;z-index:40}
.lockup{display:inline-flex;align-items:center;gap:9px;font:900 19px/1 var(--sans);color:var(--ink);padding:6px 8px}
.lockup .mark{width:22px;height:21px;fill:var(--brand)}
.lockup em{font:500 10.5px/1 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:99px;border:1px solid var(--line2);color:var(--slate);margin-left:2px}
.lockup.sm{display:none;font-size:17px;padding:0}
.nav{display:grid;gap:2px;margin-top:18px}
.nav .grp{font:500 10.5px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mute);padding:16px 12px 6px}
.nav .grp:first-child{padding-top:4px}
.nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;color:var(--slate);font-weight:500;font-size:14.5px;transition:background .25s,color .25s,transform .45s var(--spring)}
.nav a svg{width:18px;height:18px;flex:none}
.nav a .n{margin-left:auto;font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--amber);white-space:nowrap}
.nav a:hover{background:var(--card);color:var(--ink);transform:translateX(2px)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--on-ink)}
.nav a[aria-current="page"] .n{color:inherit;opacity:.6}
.sfoot{margin-top:auto;padding:14px 10px 0;border-top:1px solid var(--line);font-size:12px;color:var(--slate);line-height:1.5}
.sfoot b{display:block;font:500 12.5px var(--mono);color:var(--ink);margin:4px 0}
.sfoot a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.sfoot a:hover{color:var(--ink)}

/* ───────── main, top bar ───────── */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px 18px;padding:12px 22px;background:var(--top-bg);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line)}
.tb-l{display:flex;align-items:center;gap:14px;min-width:0}
.title{font-size:18px;font-weight:500;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-r{display:flex;align-items:center;gap:8px;margin-left:auto}
.menu{display:none;width:38px;height:38px;border-radius:12px;background:var(--card);border:1px solid var(--line);align-items:center;justify-content:center;flex:none}
.menu svg{width:18px;height:18px}
.theme{width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--slate);transition:color .2s,border-color .2s}
.theme:hover{color:var(--ink);border-color:var(--line2)}
.theme svg{width:17px;height:17px}
.theme .sun{display:none}
:root[data-dark] .theme .moon{display:none}:root[data-dark] .theme .sun{display:block}
.cta{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:99px;background:var(--ink);color:var(--on-ink);font-weight:500;font-size:13.5px;white-space:nowrap;transition:transform .4s var(--spring),background .2s}
.cta:hover{transform:translateY(-1px);background:var(--ink-hover)}
.cta svg{width:13px;height:13px}
.cta.light{background:var(--card);color:var(--ink);border:1px solid var(--line2)}
.cta.brand{background:var(--brand);color:#160803}
.cta.brand:hover{background:var(--brand2)}

/* search */
.search{position:relative}
.search label{display:flex;align-items:center;gap:8px;height:38px;width:min(340px,38vw);padding:0 12px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--mute);transition:border-color .2s,box-shadow .2s}
.search label:focus-within{border-color:var(--line2);box-shadow:0 0 0 4px rgba(250,111,67,.12)}
.search svg{width:15px;height:15px;flex:none}
.search input{flex:1;min-width:0;height:100%;outline:0;font-size:13.5px;color:var(--ink)}
.search input::placeholder{color:var(--mute)}
.search kbd{font:500 10.5px var(--mono);color:var(--mute);border:1px solid var(--line2);border-radius:6px;padding:1px 6px}
.results{position:absolute;right:0;top:46px;width:min(460px,92vw);max-height:min(480px,70vh);overflow:auto;background:var(--card);border:1px solid var(--line2);border-radius:18px;box-shadow:0 24px 60px -20px rgba(0,0,0,.25);padding:6px;animation:viewin .4s var(--spring) both}
.results a{display:block;padding:10px 12px;border-radius:12px}
.results a:hover,.results a[aria-selected="true"]{background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.results .rt{font-weight:500;font-size:14px;color:var(--ink)}
.results .rp{font:500 10.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
.results .rx{font-size:12.5px;color:var(--slate);line-height:1.45;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.results mark{background:rgba(250,111,67,.18);color:inherit;border-radius:3px}
.results .none{padding:14px;font-size:13px;color:var(--slate)}

.content{padding:22px 22px 56px;flex:1;display:flex;gap:28px;align-items:flex-start}
.page{flex:1;min-width:0;max-width:1080px}

/* ───────── page head, grid, panels (the markets view) ───────── */
.view{animation:viewin .65s var(--spring) both}
@keyframes viewin{from{transform:translateY(16px) scale(.985);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.view,.results{animation:none}}
.vhead{margin:6px 2px 20px}
.vhead .tag{margin-bottom:12px}
.vhead h2.h{font-size:clamp(26px,3vw,40px);max-width:24ch}
.vhead .lede{font-size:15.5px;color:var(--slate);max-width:66ch;margin-top:12px;line-height:1.55}
.vhead .lede b{color:var(--ink)}
.vhead .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-bottom:14px}
.grid>*{min-width:0}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
.panel{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:20px 22px;display:flex;flex-direction:column;position:relative}
.panel>*{min-width:0;max-width:100%}
a.panel{transition:transform .5s var(--spring),box-shadow .3s}
a.panel:hover{transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(0,0,0,.14)}
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.ph .right{font:400 11.5px/1.5 var(--mono);color:var(--mute);text-align:right;flex:none;max-width:52%}
.panel .read{font-size:13.5px;line-height:1.5;color:var(--slate);margin-top:8px}
.panel .read b{color:var(--ink)}
.kpi{gap:6px}
.kpi .hero-n{font-size:clamp(34px,3.2vw,52px);line-height:1;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;margin-top:8px}
.go-link{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:13px;color:var(--slate);margin-top:auto;padding-top:12px}
.go-link svg{width:13px;height:13px}
a.panel:hover .go-link{color:var(--ink)}
.ico{width:38px;height:38px;border-radius:12px;background:var(--soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);margin-bottom:12px}
.ico svg{width:19px;height:19px}

/* the dark room */
.dark{background:var(--dk);box-shadow:inset 0 0 0 1px var(--dk-edge);color:var(--dk-ink);border-radius:2.4rem;padding:26px;position:relative;isolation:isolate;overflow:hidden;margin-bottom:14px}
.dark::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(255,255,255,.045) 1.2px,transparent 1.6px) 0 0/28px 28px;-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 70%);mask-image:linear-gradient(180deg,#000 0,transparent 70%)}
.dark .panel{background:var(--dk-card);border-color:var(--dk-line);box-shadow:none;color:var(--dk-ink)}
.dark .h{color:rgba(242,242,240,.62)}.dark .h b{color:#fff}
.dark h3,.dark .kpi .hero-n{color:var(--dk-ink)}
.dark .read,.dark .lede,.dark p{color:var(--dk-slate)}
.dark .read b,.dark p b{color:#fff}
.dark .k,.dark .tag{color:var(--dk-mute)}
.dark .grid{margin-bottom:0}
.art{border-radius:18px;overflow:hidden;background:#000;aspect-ratio:1/1}
.art img{width:100%;height:100%;object-fit:cover}

/* screens from the app: real captures of trade.arcterminal.ai, in a black frame, with where and when they were taken */
.shot{margin:0 0 14px;background:var(--dk);border-radius:24px;padding:10px;border:1px solid var(--line);box-shadow:var(--shadow);min-width:0}
.shot img{width:100%;height:auto;border-radius:16px}
.shot figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:4px 14px;flex-wrap:wrap;padding:10px 8px 4px;font:400 11px/1.45 var(--mono);color:var(--dk-mute)}
.shot figcaption b{color:var(--dk-ink);font:500 13px/1.4 var(--sans)}
.shot figcaption i{font-style:normal;white-space:nowrap}
.doc .shot{margin:8px 0 16px;box-shadow:none}
.shot.phone{max-width:300px}
.shot.phone img{border-radius:22px}
.shots{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:14px;align-items:start;margin-bottom:14px}
.shots>.shot{margin:0}
.shots.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots .shot.phone{max-width:none}
.split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start}
.split>.shot{margin-top:4px}
@media (max-width:720px){.shots,.shots.even,.split{grid-template-columns:1fr}.shots .shot.phone,.split .shot.phone{max-width:300px;width:100%;margin:0 auto}}

/* the tier coins: the app's own pictures, in a row of black tiles */
.coins{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:4px 0 16px}
.coin{background:var(--dk);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.coin img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.coin figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:8px 10px 10px;color:var(--dk-slate);font:500 11px/1.3 var(--mono)}
.coin figcaption b{color:#fff;font:500 12.5px/1.3 var(--sans)}
@media (max-width:720px){.coins{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 11px 6px 9px;border-radius:99px;background:var(--soft);border:1px solid var(--line2);font-size:12.5px;color:var(--slate);white-space:nowrap}
.chip i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--mute)}
.chip b{font:500 12.5px var(--mono);color:var(--ink)}
.chip.live i{background:var(--up)}
.chip.soon i{background:var(--amber)}
.chip.prop i{background:var(--brand)}
.dark .chip{background:rgba(255,255,255,.04);border-color:var(--dk-line2);color:var(--dk-slate)}

/* ───────── prose inside a panel ───────── */
.doc{padding:24px 26px}
.doc>h2{font-size:22px;font-weight:500;letter-spacing:-.025em;line-height:1.2;margin:4px 0 10px}
.doc h3{margin:22px 0 8px}
.doc h2+h3{margin-top:6px}
.doc p{color:var(--slate);max-width:72ch;margin:0 0 12px}
.doc p b,.doc li b{color:var(--ink)}
.doc a:not(.cta):not(.panel){color:var(--ink);text-decoration:underline;text-decoration-color:rgba(250,111,67,.55);text-underline-offset:3px;text-decoration-thickness:1.5px}
.doc a:not(.cta):not(.panel):hover{text-decoration-color:var(--brand)}
.doc ul{margin:0 0 14px;padding-left:0;list-style:none;max-width:72ch}
.doc ul li{position:relative;padding-left:20px;color:var(--slate);margin:6px 0}
.doc ul li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.doc>:last-child{margin-bottom:0}
.steps{list-style:none;counter-reset:s;display:grid;gap:10px;margin:6px 0 16px;max-width:76ch}
.steps>li{counter-increment:s;position:relative;padding:14px 16px 14px 56px;border-radius:16px;background:var(--soft);border:1px solid var(--line);color:var(--slate)}
.steps>li::before{content:counter(s,decimal-leading-zero);position:absolute;left:14px;top:13px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--on-ink);font:500 11.5px/30px var(--mono);text-align:center}
.steps>li b{color:var(--ink)}
.steps>li .s-t{display:block;font-weight:500;color:var(--ink);margin-bottom:2px}
.note{border-radius:16px;background:var(--soft);border:1px solid var(--line2);padding:14px 16px;font-size:14px;color:var(--slate);margin:4px 0 14px;max-width:76ch}
.note b{color:var(--ink)}
.note .k{margin-bottom:4px}
.ui{font:500 12px var(--mono);color:var(--ink);background:var(--card);border:1px solid var(--line2);border-radius:7px;padding:1px 7px;white-space:nowrap}

/* tables */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:4px 0 16px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:right;font:500 10.5px/1.35 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mute);padding:0 12px 9px 0;border-bottom:1px solid var(--line2);vertical-align:bottom}
th.l,td.l{text-align:left}
td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top;text-align:right;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
td.l{font-family:var(--sans);font-size:14px;white-space:normal;min-width:150px;color:var(--ink)}
td.l small{display:block;font-size:12.5px;color:var(--slate);margin-top:2px;line-height:1.45}
td.w{white-space:normal;text-align:left;font-family:var(--sans);font-size:13.5px;color:var(--slate);min-width:170px}
tr:last-child td{border-bottom:0}
td.hot{color:var(--brand);font-weight:500}
th:last-child,td:last-child{padding-right:0}

/* questions */
.faq{display:grid;gap:0}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px;padding:15px 0;font-weight:500;font-size:15.5px;color:var(--ink);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font:400 20px/1 var(--mono);color:var(--mute);transition:transform .4s var(--spring)}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--brand)}
.faq .a{padding:0 34px 16px 0;color:var(--slate);max-width:74ch}
.faq .a p{margin:0 0 10px}
.faq .a p:last-child{margin:0}

/* on this page */
.toc{position:sticky;top:84px;width:210px;flex:none;padding-top:8px}
.toc .k{margin-bottom:10px}
.toc a{display:block;font-size:13px;line-height:1.4;color:var(--slate);padding:6px 0 6px 12px;border-left:1.5px solid var(--line2);transition:color .2s,border-color .2s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--brand)}

/* prev / next */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.pager a{padding:16px 18px}
.pager a.nx{text-align:right;align-items:flex-end}
.pager .k{margin-bottom:4px}
.pager b{font-size:16px;color:var(--ink)}

/* the footer line */
.foot{margin-top:28px;padding:16px 4px 0;border-top:1px solid var(--line);display:flex;gap:10px 20px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}
.foot a:hover{color:var(--ink)}

/* ───────── 1280 and below: no contents column ───────── */
@media (max-width:1280px){.toc{display:none}}
/* ───────── 1040 and below: the sidebar becomes a sheet from the menu button ───────── */
@media (max-width:1040px){
  body{display:block}
  .side{position:fixed;left:0;top:0;bottom:0;height:auto;width:min(300px,86vw);background:var(--side-m);transform:translateX(-102%);transition:transform .5s var(--spring);box-shadow:0 0 0 100vmax rgba(12,13,15,0);}
  body.nav-open .side{transform:none;box-shadow:0 0 0 100vmax rgba(12,13,15,.32)}
  .menu{display:inline-flex}
  .lockup.sm{display:inline-flex}
  .s3,.s4,.s5{grid-column:span 6}.s7,.s8{grid-column:span 12}
}
/* ───────── 720 and below: one column ───────── */
@media (max-width:720px){
  html{scroll-padding-top:120px}
  .topbar{padding:10px 12px;gap:8px 10px;flex-wrap:wrap}
  .title{font-size:16px}
  .tb-r{display:contents}
  .cta.top{margin-left:auto}
  .search{order:5;flex:1 1 calc(100% - 48px);min-width:0}
  .theme{order:6}
  .search label{width:100%}
  .search label{width:100%}
  .search kbd{display:none}
  .results{left:0;right:0;width:auto}
  .cta.top{height:34px;padding:0 12px;font-size:12.5px}
  .content{padding:14px 12px 48px}
  .grid{gap:10px}
  .grid>*{grid-column:span 12}
  .kpi.half{grid-column:span 6}
  .panel{padding:16px;border-radius:20px}
  .doc{padding:18px 16px}
  .dark{border-radius:1.6rem;padding:16px}
  .vhead h2.h{font-size:27px}
  .steps>li{padding:12px 12px 12px 50px}
  .steps>li::before{left:10px;top:11px}
  .pager{grid-template-columns:1fr}
  .faq .a{padding-right:0}
}
@media (max-width:420px){body{font-size:14.5px}.kpi.half{grid-column:span 12}.kpi .hero-n{font-size:clamp(30px,10vw,42px)}}
@media print{body{display:block;background:#fff}.side,.topbar,.toc{display:none}}

/* Co-pilot (6 Nov 2026): the four styles as picture tiles, in the coins' black tiles, and the header picture */
.pstyles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0 16px}
.pstyle{margin:0;background:var(--dk);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.pstyle img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.pstyle figcaption{display:flex;flex-direction:column;gap:6px;padding:12px 14px 16px;color:var(--dk-mute);font-size:13px;line-height:1.5}
.pstyle figcaption b{color:var(--dk-ink);font:500 15px/1.3 var(--sans)}
.cp-hero .split{align-items:center}
.cp-hero .read{color:rgba(242,242,240,.72);font-size:15px;line-height:1.55;max-width:46ch}
.cp-art{width:100%;height:auto;border-radius:18px;display:block}
@media (max-width:900px){.pstyles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Farm guides: the animated walk-through (docs.js "walk") ─────────────────────────────────────────────────────
   Real captures of the app, one step at a time: what to do on top ("3 of 8" and the instruction), the window under it with a cursor that
   comes in beside the key and presses it, and Back, Play, Next and the steps below. Still and by hand under prefers-reduced-motion. */
.walk{margin:8px 0 16px;background:var(--dk);border-radius:24px;padding:12px;border:1px solid var(--line);color:var(--dk-ink);min-width:0;outline:0}
.walk-head{display:flex;flex-direction:column;gap:4px;padding:8px 8px 14px;min-height:5.6em}
.walk-n{font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--brand2)}
.walk .walk-cap{margin:0;font-size:17px;line-height:1.45;color:var(--dk-slate);max-width:62ch}
.walk .walk-cap b{display:block;color:var(--dk-ink);font-weight:500;font-size:19px;letter-spacing:-.01em;margin-bottom:2px}
.walk-stage{position:relative;border-radius:16px;overflow:hidden;background:#08090A radial-gradient(rgba(255,255,255,.07) 1.1px,transparent 1.5px) 0 0/22px 22px;display:grid;place-items:center;padding:22px 14px}
.walk-stage>.wf{grid-area:1/1;width:100%;max-width:420px;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .5s var(--ease);pointer-events:none}
.walk-stage>.wf.on{opacity:1;transform:none}
.walk-bar{display:flex;align-items:center;gap:8px;padding:12px 4px 4px}
.walk-ctl{flex:none;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--dk-line2);display:grid;place-items:center;color:var(--dk-ink)}
.walk-ctl:hover{background:rgba(255,255,255,.15)}
.walk-ctl svg{width:13px;height:13px}
.walk-play{background:var(--brand);border-color:var(--brand);color:#160803}
.walk-play:hover{background:var(--brand2)}
.walk-steps{list-style:none;display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;margin-left:4px}
.walk-steps::-webkit-scrollbar{display:none}
.walk-steps button{position:relative;overflow:hidden;display:flex;align-items:center;gap:7px;height:36px;padding:0 12px 0 6px;border-radius:99px;background:rgba(255,255,255,.04);border:1px solid var(--dk-line);font:500 12.5px var(--sans);color:var(--dk-slate);white-space:nowrap}
.walk-steps button i{font:500 10.5px/22px var(--mono);font-style:normal;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);text-align:center;flex:none}
.walk-steps button[aria-current="step"]{color:var(--dk-ink);border-color:rgba(250,111,67,.55)}
.walk-steps button[aria-current="step"] i{background:var(--brand);color:#160803}
.walk-steps button.done i{background:rgba(250,111,67,.22);color:var(--brand2)}
.walk-steps button u{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--brand);transform-origin:0 50%;transform:scaleX(0);text-decoration:none}
.walk.playing .walk-steps button[aria-current="step"] u{animation:walkfill var(--walk-ms,6000ms) linear forwards}
@keyframes walkfill{to{transform:scaleX(1)}}
/* the cursor: its tip is the point it presses */
.walk-cur{position:absolute;left:0;top:0;width:30px;height:30px;margin:-3px 0 0 -5px;pointer-events:none;opacity:0;z-index:6;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.walk-cur svg{width:100%;height:100%;transition:transform .15s var(--ease);transform-origin:5px 3px}
.walk-cur.on{opacity:1;transition:opacity .25s}
.walk-cur.go{transition:transform .75s var(--ease),opacity .25s}
.walk-cur.press svg{transform:scale(.82)}
/* the ring on the key to press: a ripple when it is pressed, then it stays */
.walk-ring{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2.5px solid var(--brand);box-shadow:0 0 0 4px rgba(250,111,67,.25);pointer-events:none;opacity:0;z-index:5}
.walk-ring.on{opacity:1}
.walk-ring.hit{animation:walkhit .7s var(--ease)}
@keyframes walkhit{from{scale:.4;opacity:0}60%{scale:1.25;opacity:1}to{scale:1}}
@media (prefers-reduced-motion:reduce){.walk-stage>.wf{transition:none}.walk-cur{display:none}.walk.playing .walk-steps button[aria-current="step"] u{animation:none}}
@media (max-width:560px){.walk{padding:8px;border-radius:20px}.walk-stage{padding:12px 6px}.walk .walk-cap{font-size:15px}.walk .walk-cap b{font-size:17px}.walk-ctl{width:34px;height:34px}}

/* a frame is a capture of the real app (tools/farm-capture.mjs): the window as ARC draws it, and the key it presses */
.walk-stage>.wf.wf-shot{position:relative;max-width:430px}
.walk-stage>.wf.wf-wide{max-width:860px}
.wf-shot img{width:100%;height:auto;border-radius:18px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.wf-tap{position:absolute;width:2px;height:2px;margin:-1px 0 0 -1px;pointer-events:none}

/* the guide links: numbered panels */
.gl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:6px 0 16px}
.gl a.panel{padding:18px 20px;gap:6px}
.gl a.panel .k{color:var(--brand)}
.gl a.panel b{font-size:16px;letter-spacing:-.01em}
.gl a.panel span.read{margin-top:0}
@media (max-width:720px){.gl{grid-template-columns:1fr}}
/* a scenario: who, what they have, the path they take */
.scn{display:grid;gap:10px;margin:6px 0 16px}
.scn details{border-radius:16px;background:var(--soft);border:1px solid var(--line);padding:0 16px}
.scn summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:500;color:var(--ink);display:flex;gap:10px;align-items:baseline}
.scn summary::-webkit-details-marker{display:none}
.scn summary::before{content:"+";font:500 15px var(--mono);color:var(--brand);width:14px;flex:none}
.scn details[open] summary::before{content:"−"}
.scn details>div{padding:0 0 14px 24px;color:var(--slate)}
.scn details>div p{margin:0 0 8px}