/* StakeHUD draft (2026-10-14). Instrument-panel palette: graphite ground,
   Boost orange-red, slightly muted (#e2401a; #f5603d for small text), dimmed ink. Not Stake navy/green. */
:root{
  --bg:#0e1115; --panel:#161a20; --panel-2:#1d222a; --line:#2a313b;
  --ink:#dde1e6; --ink-dim:#9ea8b4; --ink-faint:#7d8896;
  --accent:#e2401a; --accent-text:#f5603d;
  --ok:#3fb950; --bad:#f85149; --warn:#e3b341;
  --display:"Saira Condensed","Arial Narrow",sans-serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--accent-text)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
/* ── Inputs: one rule for every text field, textarea and select (2026-10-19,
   ux-design "Form field states"). Pages add layout (width, flex, margins),
   never their own colours, focus or padding. States:
     default   page bg, 1px line           hover     line lightens
     focus     2px accent edge, click or Tab, no layout shift (border + outline)
     error     [aria-invalid=true] or .bad  → red edge; the message sits under the field
     success   .good                        → green edge
     disabled  dimmed, not-allowed          busy  [aria-busy=true] progress cursor
     readonly  transparent, dim text
   Placeholder is an example, never the label (faint ink). 36px tall, 44 on touch. */
.ifield,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]),textarea,select{
  box-sizing:border-box;min-height:36px;padding:8px 12px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:14px;line-height:1.4;
  transition:border-color .12s ease,outline-color .12s ease}
textarea{line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--ink-faint);opacity:1}
@media(hover:hover){input:not([disabled]):hover,textarea:not([disabled]):hover,select:not([disabled]):hover{border-color:var(--ink-faint)}}
input:focus,textarea:focus,select:focus{outline:1px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
input[aria-invalid=true],input.bad,textarea[aria-invalid=true],textarea.bad,select[aria-invalid=true]{border-color:var(--bad)}
input[aria-invalid=true]:focus,input.bad:focus,textarea[aria-invalid=true]:focus,textarea.bad:focus{outline-color:var(--bad)}
input.good,textarea.good{border-color:var(--ok)}
input.good:focus,textarea.good:focus{outline-color:var(--ok)}
input:disabled,textarea:disabled,select:disabled{opacity:.5;cursor:not-allowed}
input[aria-busy=true],textarea[aria-busy=true]{cursor:progress;border-style:dashed}
input[readonly]:not([type=search]),textarea[readonly]{background:transparent;color:var(--ink-dim);cursor:default}
input[readonly]:not([type=search]):focus{outline-color:var(--line);border-color:var(--line)}
/* 16px on touch screens: iOS Safari zooms the page into any field smaller
   than that the moment it is tapped. */
@media(pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),textarea,select{min-height:44px;font-size:16px}}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:.01em;line-height:1;margin:0}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
@media(max-width:720px){.wrap{padding:0 16px}}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:12px;z-index:9;background:var(--panel);padding:8px 12px}

/* Nav */
nav.top{position:sticky;top:0;z-index:5;background:rgba(14,17,21,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;gap:24px;height:60px;max-width:none}
/* Wordmark: Saira, widest, black, italic (2026-10-16, the new logo). */
.brand{font-family:"Saira",var(--display);font-style:italic;font-weight:900;font-stretch:125%;font-size:21px;color:var(--ink);text-decoration:none;letter-spacing:0;padding-right:.08em}
.brand b{color:var(--accent)}
nav.top .links{display:flex;gap:22px;margin-left:auto}
nav.top .links a{color:var(--ink-dim);text-decoration:none;font-size:15px}
nav.top .links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:999px;font:600 15px var(--body);text-decoration:none;border:1px solid transparent}
.btn.primary{background:var(--accent);color:var(--bg)}
.btn.primary:hover{background:var(--accent-text)}
nav.top .btn{height:30px;padding:0 13px;font-size:13px}
@media(max-width:640px){nav.top .links{display:none}nav.top .btn{margin-left:auto}}

/* Hero: headline left, the product itself right */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:72px 24px 80px}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:40px;padding:40px 16px 56px}}
.hero h1{font-size:clamp(44px,6.4vw,84px);text-transform:uppercase;line-height:.92}
.hero h1 em{font-style:normal;color:var(--accent)}
.lede{margin-top:24px;max-width:34em;font-size:18px;color:var(--ink-dim)}
.actions{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:32px}
.actions .more{color:var(--ink-dim);text-decoration:none}
.actions .more:hover{color:var(--ink)}
.trial{margin-top:14px;font-size:13.5px;color:var(--ink-faint)}

/* The signature: a StakeHUD panel, rounds settling in */
.hud{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(226,64,26,.06);overflow:hidden;font-family:var(--mono);min-width:0}
.hud-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);font:700 14px var(--display);letter-spacing:.06em;text-transform:uppercase}
.hud-bar .live{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--ok);font:600 11px var(--body);letter-spacing:0}
.hud-bar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.hud-tabs{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid var(--line);font:600 11px var(--body);text-transform:uppercase;letter-spacing:.04em;overflow:hidden}
/* Phones (ux-audit 2026-10-20): the demo's seven tabs run past 390px and were
   simply clipped — Tools and Settings unreachable. The strip scrolls sideways
   with a fade on the right as the affordance, the same cue the nav links use. */
@media(max-width:640px){.hud-tabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}.hud-tabs::-webkit-scrollbar{display:none}}
.hud-tabs button{all:unset;cursor:pointer;padding:3px 8px;border-radius:4px;color:var(--ink-faint);white-space:nowrap}
.hud-tabs button:hover{color:var(--ink-dim)}
.hud-tabs button[aria-selected=true]{background:var(--panel-2);color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.hud-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Carousel: slides stack in one grid cell so the panel never changes height */
.hud-body{display:grid}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.slide.on{opacity:1;visibility:visible;transition:opacity .45s ease}
@media (prefers-reduced-motion:reduce){.slide,.slide.on{transition:none}}
.hud-list{list-style:none;margin:0;padding:6px 0;font-size:12.5px}
.hud-list li{display:grid;grid-template-columns:6.5em 1fr auto;gap:12px;align-items:center;padding:7px 14px;color:var(--ink-dim);border-bottom:1px solid rgba(42,49,59,.5)}
.hud-list li:last-child{border-bottom:0}
.hud-list code{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud .chip{font:600 10.5px var(--body);text-transform:uppercase;padding:2px 7px;border:1px solid var(--line);color:var(--ink-faint);border-radius:4px}
.hud .chip.ok{border-color:var(--ok);color:var(--ok)}
.hud .chip.warn{border-color:var(--warn);color:var(--warn)}
.hud .chip.info{border-color:#58a6ff;color:#58a6ff}
.hud-sub{padding:10px 14px 0;font:600 11px var(--body);color:var(--ink-faint)}
.hud-foot{padding:8px 14px 12px;font:12px var(--body);color:var(--ink-faint)}
.hud-table{width:100%;border-collapse:collapse;font-size:13px}
.hud-table th{font:600 11px var(--body);color:var(--ink-faint);text-align:right;padding:10px 14px 6px}
.hud-table td{text-align:right;padding:6px 14px;color:var(--ink-dim)}
.hud-table th:first-child,.hud-table td:first-child{text-align:left}
.hud-table tr.hl td{color:var(--ink);background:rgba(226,64,26,.1)}
.hud-dots{display:flex;gap:6px;justify-content:center;padding:10px;border-top:1px solid var(--line)}
.hud-dots i{width:18px;height:3px;border-radius:2px;background:var(--line);overflow:hidden;position:relative}
.hud-dots i.on::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;animation:fill var(--dwell,6s) linear forwards}
.hud.paused .hud-dots i.on::after{animation-play-state:paused}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.hud-dots i.on::after{animation:none}}
.hud-stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.hud-stats div{padding:12px 14px;border-right:1px solid var(--line)}
.hud-stats div:last-child{border-right:0}
.hud-stats small{display:block;font:600 11px var(--body);color:var(--ink-faint)}
.hud-stats b{display:block;font-size:22px;font-weight:600;margin-top:2px}
.pos{color:var(--ok)}.neg{color:var(--bad)}
.hud-rows{list-style:none;margin:0;padding:6px 0;font-size:13px;height:236px;overflow:hidden}
.hud-rows li{display:grid;grid-template-columns:4.2em 1fr auto auto;gap:14px;padding:5px 14px;color:var(--ink-dim)}
.hud-rows li .x{color:var(--ink);text-align:right;min-width:4.5em}
.hud-rows li.new{animation:settle .5s ease-out}
@keyframes settle{from{opacity:0;transform:translateY(-6px);background:rgba(226,64,26,.12)}to{opacity:1;transform:none;background:transparent}}
@media (prefers-reduced-motion:reduce){.hud-rows li.new{animation:none}}
.hud-seed{display:flex;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-faint);min-width:0}
.hud-seed .chip{flex:none;font:600 11px var(--body);text-transform:uppercase;padding:3px 7px;border:1px solid var(--ok);color:var(--ok);border-radius:4px}
.hud-seed code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hud-cap{margin-top:10px;font-size:12.5px;color:var(--ink-faint);text-align:center}

/* Sections */
section{padding:72px 0;border-top:1px solid var(--line)}
@media(max-width:720px){section{padding:48px 0}}
.kicker{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--accent-text);margin-bottom:12px}
section h2{font-size:clamp(32px,4.4vw,52px);text-transform:uppercase}
.sub{margin-top:14px;max-width:44em;color:var(--ink-dim)}

/* Features as the HUD's own tab strip: each feature IS a tab in the extension */
.tabset{display:grid;grid-template-columns:220px 1fr;margin-top:40px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel);min-height:260px}
.tablist{display:flex;flex-direction:column;border-right:1px solid var(--line);padding:8px}
.tablist button{all:unset;cursor:pointer;padding:10px 12px;border-radius:6px;font:600 15px var(--body);color:var(--ink-dim)}
.tablist button:hover{color:var(--ink)}
.tablist button[aria-selected=true]{background:var(--panel-2);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
.tablist button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tabpanel{padding:32px 36px}
.tabpanel h3{font-size:30px;text-transform:uppercase;margin-bottom:12px}
.tabpanel p{color:var(--ink-dim);max-width:60ch}
@media(max-width:760px){.tabset{grid-template-columns:1fr}.tablist{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.tablist button{white-space:nowrap}.tablist button[aria-selected=true]{box-shadow:inset 0 -3px 0 var(--accent)}.tabpanel{padding:24px 20px}}

/* A real sequence, so numbered */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;counter-reset:s}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:24px}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);display:block;font:600 13px var(--mono);color:var(--accent-text);margin-bottom:14px}
.step h3{font-size:24px;text-transform:uppercase;margin-bottom:8px}
.step p{font-size:15px;color:var(--ink-dim)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:28px;margin-top:16px}
.panel h3{font-size:24px;text-transform:uppercase;margin-bottom:10px}
.panel p{color:var(--ink-dim);font-size:15px;max-width:72ch}
.panel p+p{margin-top:12px}
.note{font-size:14px;color:var(--ink-faint)}
strong{color:var(--ink);font-weight:600}

.glist{columns:5 140px;column-gap:24px;list-style:none;padding:0;margin:32px 0 0;font-size:15px;color:var(--ink-dim)}
.glist li{break-inside:avoid;padding:3px 0}
.glist li::before{content:"▸ ";color:var(--accent)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.split .panel{margin-top:0}
.scope{border-left:3px solid var(--warn);margin-top:32px}
.cta-end{margin-top:32px}

footer{border-top:1px solid var(--line);padding:40px 0 48px;color:var(--ink-faint);font-size:14px}
footer .fnav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:16px}
footer .fnav a{color:var(--ink-dim);text-decoration:none;display:inline-block;padding:4px 0}
footer .fnav a:hover{color:var(--ink)}
footer .fine{font-size:13px}

/* Doc pages (privacy, disclaimer, contact, install) */
main.doc{padding:56px 0 72px}
main.doc h1{font-size:clamp(36px,5vw,56px);text-transform:uppercase}
main.doc .updated{font:12.5px var(--mono);color:var(--ink-faint);margin:10px 0 36px}
main.doc h2{font-size:24px;text-transform:uppercase;color:var(--accent-text);margin:40px 0 10px}
main.doc h3{font-family:var(--body);font-size:16px;font-weight:600;color:var(--ink);margin:24px 0 6px}
main.doc p,main.doc li{color:var(--ink-dim);max-width:72ch}
main.doc p+p{margin-top:12px}
main.doc ul{padding-left:1.2em;margin:10px 0}
main.doc li{margin-bottom:8px}
main.doc code{font:.92em var(--mono);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink)}
nav.top .links a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}


/* ── Hero HUD = the real side panel (2026-10-14) ──────────────────────────
   Values lifted from Boost Dashboard/panel.html and the live panel's computed
   styles: --bg #0e1116, cards #161b23 / #2c3442 / r8, system-ui text,
   ui-monospace numbers, tabs 600 13px #8fa3bf with a 2px underline. Kept in
   the HUD's own type, not the site's, so it reads as a screenshot. */
.hud{--h-bg:#0e1116;--h-card:#161b23;--h-line:#2c3442;--h-div:#232a35;--h-text:#e6e9ef;--h-dim:#8591a3;--h-tab:#8fa3bf;--h-blue:#3f7bff;--h-title:#a9c3f5;
  background:var(--h-bg);border-color:var(--h-line);font:13px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--h-text)}
.hud-tabs{gap:0;padding:0 6px;border-bottom:1px solid var(--h-div);font:600 13px system-ui,-apple-system,sans-serif;text-transform:none;letter-spacing:.06em;overflow-x:auto;scrollbar-width:none}
.hud-tabs::-webkit-scrollbar{display:none}
.hud-tabs button,.hud-tabs .tab-x{padding:10px 11px 8px;border-radius:0;color:var(--h-tab);border-bottom:2px solid transparent;white-space:nowrap}
.hud-tabs button[aria-selected=true]{background:none;color:#fff;box-shadow:none;border-bottom-color:var(--h-blue)}
.hud-tabs .tab-x{opacity:.55}
.hud-site{display:flex;align-items:center;gap:10px;padding:10px 12px 6px;font-weight:600;font-size:15px}
.hud-site .sdot{margin-left:auto;width:16px;height:16px;border-radius:50%;background:#00e701;color:#06240a;font:700 9px/16px system-ui;text-align:center;font-style:normal}
.ddbtn{display:inline-flex;align-items:center;gap:6px;font:600 11.5px system-ui,sans-serif;color:#cfd6e2;background:#2c3442;border:1px solid #3f4d63;border-radius:4px;padding:3px 10px}
.ddbtn::after{content:"";border:3.5px solid transparent;border-top-color:currentColor;margin-top:3px}
.ddbtn.sm{margin-left:auto;padding:2px 8px;font-size:11px}
.hud-body{padding:0 8px 8px}
.pcard{background:var(--h-card);border:1px solid var(--h-line);border-radius:8px;padding:10px;margin-top:8px}
.pc-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pc-h b{font-weight:600;font-size:12.5px;color:#4cc9b0;padding-left:8px;border-left:3px solid #4cc9b0;line-height:1.1}
.pcard .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tile{background:var(--h-bg);border:1px solid var(--h-line);border-radius:6px;padding:8px 10px;min-height:62px}
.tile small{display:block;font:600 11px system-ui,sans-serif;color:var(--h-dim)}
.tile b{display:block;margin-top:4px;font:600 20px ui-monospace,SFMono-Regular,Menlo,monospace;color:#c9d1dd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud .pos{color:#3fb950}.hud .neg{color:#f85149}
.hud-rows{height:auto;padding:0;font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace}
.hud-rows li{padding:4px 2px;border-bottom:1px solid var(--h-div);color:var(--h-dim)}
.hud-rows li:last-child{border-bottom:0}
.hud-rows li .x{color:var(--h-text)}
.hud-list{padding:0;font-size:12.5px}
.hud-list li{padding:6px 2px;border-bottom-color:var(--h-div)}
.hud-list code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--h-text)}
.hud .chip{border-radius:4px;font:600 10.5px system-ui,sans-serif;padding:2px 7px}
.hud-dots{border-top-color:var(--h-div)}
.hud-dots i.on::after{background:var(--h-blue)}
@media(max-width:480px){.pcard .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Hero HUD: per-tab interfaces (2026-10-14, from the live panel) ──────── */
.hud{--h-green:#1f7a45;--h-green-t:#3fb950;--h-purple:#7656e0;--h-amber:#8a6420;--h-field:#0e1116}
.hud-body{min-height:0}
.slide{align-self:start}
.subtabs{display:flex;flex-wrap:wrap;gap:5px;padding:8px 0 2px}
.subtabs .sb{font:600 11px system-ui,sans-serif;padding:5px 9px;border-radius:4px;background:#2c3442;color:#cfd6e2}
.subtabs .sb.on{background:var(--h-green);color:#fff}
.hud-site{padding:10px 2px 2px;font-size:14px}
.notice{margin-top:8px;padding:8px 10px;border:1px solid var(--h-line);border-radius:6px;font-size:11.5px;color:var(--h-dim)}
.notice b{color:var(--h-text);font-family:ui-monospace,Menlo,monospace;font-weight:600;float:right}
.pc-h .chip{margin-left:auto}
.pc-h .r{margin-left:auto}
.mute{font-size:11.5px;color:var(--h-dim)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;max-width:300px;margin-bottom:8px}
.seg span{font:600 11px system-ui,sans-serif;text-align:center;padding:6px 8px;background:#2c3442;color:#cfd6e2}
.seg span:first-child{border-radius:4px 0 0 4px}.seg span:last-child{border-radius:0 4px 4px 0}
.seg .on.green{background:var(--h-green);color:#fff}.seg .on.blue{background:var(--h-blue);color:#fff}
.fld{margin-bottom:7px}
.fld small{display:block;font:600 10.5px system-ui,sans-serif;color:var(--h-dim);margin-bottom:3px}
.fld .in{background:var(--h-field);border:1px solid var(--h-line);border-radius:4px;padding:6px 9px;font-size:12px;color:var(--h-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fld .in.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.fld.sel .in{border-color:#2f4a80;position:relative;padding-right:22px}
.fld.sel .in::after{content:"";position:absolute;right:9px;top:50%;border:4px solid transparent;border-top-color:var(--h-text);margin-top:-1px}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sdot.sm{display:inline-block;width:12px;height:12px;line-height:12px;font-size:7px;margin:0 4px 0 0;vertical-align:-1px}
.pbtn{display:inline-block;font:600 11px system-ui,sans-serif;color:#fff;padding:6px 14px;border-radius:999px;margin-top:4px}
.pbtn.blue{background:#2f6df6}.pbtn.purple{background:var(--h-purple)}
.btns{display:flex;gap:6px;flex-wrap:wrap}
.pcard.active{border-color:var(--h-amber)}
.tbl{width:100%;border-collapse:collapse;font-size:11.5px;margin-bottom:6px}
.tbl th{font:600 10.5px system-ui,sans-serif;color:var(--h-dim);text-align:left;padding:5px 6px;border-bottom:1px solid var(--h-div)}
.tbl td{padding:6px;border-bottom:1px solid var(--h-div);color:var(--h-text)}
.tbl th:not(:first-child),.tbl td:not(:first-child){text-align:right}
.tbl tr:last-child td{border-bottom:0}
.tbl td.code{color:#f2c94c;font-family:ui-monospace,Menlo,monospace}
.okline{margin-top:8px;padding:7px 10px;border:1px solid #1f4d2c;border-left:3px solid var(--h-green-t);border-radius:4px;background:#0f1f15;font-size:11.5px;color:#cfe9d6}
.tiles.t2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile2{background:var(--h-bg);border:1px solid var(--h-line);border-radius:6px;padding:8px 10px}
.tile2 .tt{display:flex;justify-content:space-between;gap:6px}
.tile2 small{font:600 10.5px system-ui,sans-serif;color:var(--h-dim)}
.tile2 small.r{text-align:right}
.tile2 small em{display:block;font:600 12px ui-monospace,Menlo,monospace;color:var(--h-text);font-style:normal}
.tile2>b{display:block;margin:2px 0 6px;font:600 22px ui-monospace,SFMono-Regular,Menlo,monospace;color:#e6e9ef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile2 .tf{display:flex;justify-content:space-between;gap:6px;border-top:1px solid var(--h-div);padding-top:5px;font-size:10.5px;color:var(--h-dim)}
.tile2 .tf i{font:600 11px ui-monospace,Menlo,monospace;color:var(--h-text);font-style:normal}
.menu{list-style:none;margin:0;padding:0}
.menu li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--h-div);font-size:11.5px}
.menu li:last-child{border-bottom:0}
.menu b{font-weight:600;min-width:72px}
.tog{width:24px;height:13px;border-radius:999px;background:var(--h-green-t);position:relative;flex:none}
.tog::after{content:"";position:absolute;right:2px;top:2px;width:9px;height:9px;border-radius:50%;background:#fff}
.eye{font-size:10.5px;padding:2px 8px;border:1px solid var(--h-line);border-radius:999px;color:#cfd6e2;background:#1b2029}
.eye::before{content:"◉ ";font-size:8px;color:var(--h-dim)}
@media(max-width:480px){.row3{grid-template-columns:1fr}.tiles.t2{grid-template-columns:1fr}.hud-body{min-height:0}}

/* ── "One tab for each job": the dashboard frame, interactive (2026-10-14) ── */
.hud.feat{margin-top:40px;max-width:820px}
.feat-body{padding:0 10px 12px}
.feat .subtabs{padding-top:10px}
.feat .subtabs .sb{all:unset;cursor:pointer;font:600 12px system-ui,sans-serif;padding:6px 11px;border-radius:4px;background:#2c3442;color:#cfd6e2}
.feat .subtabs .sb:hover{background:#38455a}
.feat .subtabs .sb.on{background:var(--h-green);color:#fff}
.feat .subtabs .sb:focus-visible,.feat .hud-tabs button:focus-visible{outline:2px solid var(--h-blue);outline-offset:-2px}
.feat .pcard{margin-top:10px;padding:14px 16px}
.feat .pcard .pc-h b{font-size:14px}
.feat .pcard p{font-size:14px;line-height:1.6;color:#c3cad6;max-width:62ch}

/* Every slide fills the panel: the cell is as tall as the tallest slide, each
   slide stretches to it, and its last card takes up the rest (2026-10-15). */
.slide{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}
.slide>.pcard:last-child{flex:none}
/* Phones / stacked hero (dchan, 2026-10-18: "mobile view … fix the hud example"):
   the slides run tall, so space-between opened a ~130px hole between cards.
   The cards stay together at the top instead. */
@media(max-width:900px){.slide{justify-content:flex-start}}
/* ...and the frame follows the slide on screen (dchan, 2026-10-18: "Resize per
   slide"): every slide used to share one grid cell as tall as the tallest, so a
   short slide sat on ~260px of blank. Off-screen slides leave the flow while
   they fade (pinned inside .hud-body's 0 8px 8px padding), so the cell is the
   showing slide's height. */
@media(max-width:900px){.hud-body{position:relative;overflow:hidden;min-height:0}.slide:not(.on){position:absolute;left:8px;right:8px;top:0}}
.stepper{display:inline-flex;align-items:center;gap:10px;font:600 12px ui-monospace,Menlo,monospace}
.stepper span{width:22px;height:22px;display:grid;place-items:center;border-radius:4px;background:#2c3442;color:#cfd6e2}
.fld .seg{margin:0}
.feat-pts{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;max-width:62ch}
.feat-pts li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.5;color:#aeb7c4}
.feat-pts li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:#4cc9b0}
/* Provably-fair steps say WHEN each check happens instead of 01/02/03. */
.step[data-when]::before{content:attr(data-when);letter-spacing:.12em;text-transform:uppercase}
/* Stake Cash mark: the HUD's own drawing (crypto.js pfvCoinImage, sweeps). */
.hud .coin{width:16px;height:16px;margin-left:auto;flex:none;display:block}
.hud .coin.sm{display:inline-block;width:14px;height:14px;margin:0 5px 0 0;vertical-align:-2px}
.mute.tight{margin-top:6px}
/* Footer centred (2026-10-15). */
footer{text-align:center}
footer .fnav{justify-content:center}
/* Signed in: the menu button becomes the account (avatar + name). */
nav.top .btn.me{background:transparent;border-color:var(--line);color:var(--ink);gap:7px;max-width:180px}
nav.top .btn.me:hover{border-color:var(--ink-faint)}
nav.top .btn.me img{width:18px;height:18px;border-radius:50%}

/* ── Top menu = the HUD's tab strip (2026-10-15) ─────────────────────────
   Same values as the panel's tabs: system-ui 600 13px, .06em tracking,
   #8fa3bf, the open one white with a 2px #3f7bff underline, on the HUD's
   #0e1116 with its #232a35 divider. Links run the full bar height so the
   underline sits on the divider, exactly like the panel. */
nav.top{background:rgba(14,17,22,.94);border-bottom-color:#232a35}
nav.top .wrap{height:52px;gap:20px}
nav.top .links{gap:0;align-self:stretch}
nav.top .links a{display:flex;align-items:center;padding:0 13px;font:600 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.06em;color:#8fa3bf;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s}
nav.top .links a:hover{color:#e6e9ef}
nav.top .links a[aria-current]{color:#fff;box-shadow:none;border-bottom-color:#3f7bff}
nav.top .links a:focus-visible{outline:2px solid #3f7bff;outline-offset:-4px;border-radius:2px}
/* Signed in last visit: no trial button in the first frame (the chip is
   drawn by script right after). Undone if /api/me says signed out. */
html.signed-in nav.top #navCta.primary{visibility:hidden}
html.signed-in nav.top .links a[href="/account"]{display:none}

/* ── Top menu, two rows like the HUD (2026-10-15): logo + button on top, the
   tab strip on its own full-width row underneath, left-aligned under the
   logo. 14px tabs. On phones the strip scrolls sideways, as the panel's does. */
nav.top .wrap{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand cta" "tabs tabs";height:auto;gap:0 16px;padding-top:10px}
nav.top .brand{grid-area:brand;align-self:center}
nav.top #navCta,nav.top>.wrap>.btn{grid-area:cta;align-self:center;margin-left:0}
nav.top .links{grid-area:tabs;display:flex;margin:8px 0 0 -13px;height:40px;overflow-x:auto;scrollbar-width:none}
nav.top .links::-webkit-scrollbar{display:none}
nav.top .links a{font-size:14px;white-space:nowrap}
@media(max-width:640px){nav.top .links{display:flex}nav.top .btn{margin-left:0}}
/* Fixed row heights so the tab strip sits at the same height on every page. */
nav.top .wrap{grid-template-rows:48px 40px;padding-top:0}
nav.top .links{margin-top:0}
/* Menu underline in the brand colour, not the HUD blue (2026-10-15). */
nav.top .links a[aria-current]{border-bottom-color:var(--accent)}
nav.top .links a:focus-visible{outline-color:var(--accent)}
nav.top .links a{margin-bottom:0;height:100%;box-sizing:border-box}

/* ── Tab strip, ux-design pass (2026-10-15) ───────────────────────────────
   Underline ON the divider (the divider is drawn under the tabs, the active
   tab's 2px line covers it); 44px tap targets (Hover trap); focus ring is
   off-white so it never reads as the active state (Tabs system); hover only
   where there is hover; a right-edge fade when the strip overflows (Tabs
   system: overflow scrolls with edge fades). */
nav.top{border-bottom:0;box-shadow:inset 0 -1px 0 #232a35}
nav.top .wrap{grid-template-rows:48px 44px}
nav.top .links{height:44px}
nav.top .links a{transition:color .12s ease-out}
nav.top .links a:hover{color:#8fa3bf}
@media (hover:hover){nav.top .links a:hover{color:#e6e9ef}}
nav.top .links a:focus-visible{outline:2px solid #e6e9ef;outline-offset:-6px}
@media(max-width:640px){nav.top .links{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}}

/* ── Tabs System (designmotionhq, 2026-10-15): one sliding underline on a
   spring, edge fades + chevrons on overflow. Driven by /tabstrip.js. ── */
.tab-scroll{grid-area:tabs;position:relative;height:44px;margin-left:-13px;min-width:0}
.tab-scroll>.links{grid-area:auto;position:relative;margin:0!important;height:44px;-webkit-mask-image:none!important;mask-image:none!important}
.tab-ink{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);opacity:0;pointer-events:none;
  transition:transform .5s cubic-bezier(.34,1.36,.64,1),width .5s cubic-bezier(.34,1.36,.64,1),opacity .15s ease-out}
.tab-ink.instant{transition:none}
@media (prefers-reduced-motion:reduce){.tab-ink{transition:none}}
.has-ink a[aria-current]{border-bottom-color:transparent!important}
.tab-scroll::before,.tab-scroll::after{content:"";position:absolute;top:0;bottom:1px;width:36px;pointer-events:none;opacity:0;transition:opacity .15s ease-out;z-index:1}
.tab-scroll::before{left:0;background:linear-gradient(90deg,#0e1116,transparent)}
.tab-scroll::after{right:0;background:linear-gradient(270deg,#0e1116,transparent)}
.tab-scroll.more-left::before,.tab-scroll.more-right::after{opacity:1}
.tab-chev{display:none;position:absolute;top:50%;margin-top:-12px;width:24px;height:24px;border:0;border-radius:4px;background:#1b2029;color:#cfd6e2;cursor:pointer;z-index:2;font:600 14px/24px system-ui,sans-serif;padding:0}
.tab-chev.prev{left:2px}.tab-chev.prev::before{content:"‹"}
.tab-chev.next{right:2px}.tab-chev.next::before{content:"›"}
@media (hover:hover){.tab-scroll.more-left .tab-chev.prev,.tab-scroll.more-right .tab-chev.next{display:block}.tab-chev:hover{background:#2c3442}}
nav.top #navCta,nav.top .btn{height:26px;padding:0 11px;font-size:12px}nav.top .btn.me img{width:16px;height:16px}
/* No trial button in the menu (2026-10-15, dchan): the hero and page CTAs carry it. The signed-in account chip stays. */
nav.top #navCta.primary{display:none}

/* ── One row: logo left, tabs right, flush against the profile / Sign in chip
   (2026-10-15). Tabs run the full bar height so the underline stays flush
   with the divider. Below 760px the tabs drop to their own row again. ── */
@media (min-width:761px){
  nav.top .wrap,nav[aria-label="Main"] .wrap{grid-template-columns:auto 1fr auto!important;grid-template-rows:52px!important;grid-template-areas:"brand tabs cta"!important;gap:0 4px!important}
  .tab-scroll{justify-self:end;height:52px;margin-left:0}
  .tab-scroll>.links{height:52px!important}
}
/* Sign in chip: quiet outline, same shape as the signed-in chip. */
nav.top #navCta.signin{display:inline-flex;background:transparent;border:1px solid var(--line);color:var(--ink);height:26px;padding:0 11px;font-size:12px}
@media (hover:hover){nav.top #navCta.signin:hover{border-color:var(--ink-faint)}}
html.signed-in nav.top #navCta.signin{visibility:hidden}

/* Shorter bar, divider closer under the tab text (2026-10-15): 44px, the
   tap-target floor (ux-design: Hover trap), so it cannot go lower. */
@media (min-width:761px){
  nav.top .wrap,nav[aria-label="Main"] .wrap{grid-template-rows:44px!important}
  .tab-scroll{height:44px}
  .tab-scroll>.links{height:44px!important}
}
/* Hero pause control (WCAG 2.2.2): stops the slides and the live numbers. */
.hud-foot{display:flex;align-items:center;gap:10px;padding:0 10px;border-top:1px solid var(--h-div)}
.hud-foot .hud-dots{flex:1;border-top:0;padding:10px 0}
.hud-pause{all:unset;cursor:pointer;width:24px;height:24px;display:grid;place-items:center;border-radius:4px;color:#8fa3bf}
.hud-pause span{width:8px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.hud-pause[aria-pressed=true] span{width:0;height:0;border:0;border-left:9px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
@media (hover:hover){.hud-pause:hover{color:#e6e9ef;background:#1b2029}}
.hud-pause:focus-visible{outline:2px solid #e6e9ef;outline-offset:2px}
.hud.stopped .hud-dots i.on::after{animation-play-state:paused}
/* AA contrast on the orange-red buttons: black text, 4.48 → ~5:1 (ux-audit 10-15). */
.btn.primary{color:#000}

/* Motion at 300ms or under (ux-audit 10-15, pattern: Animation timing). */
.tab-ink{transition:transform .3s cubic-bezier(.34,1.36,.64,1),width .3s cubic-bezier(.34,1.36,.64,1),opacity .15s ease-out}
.slide{transition:opacity .3s ease-out,visibility 0s .3s}
.slide.on{transition:opacity .3s ease-out}
/* Phones (ux-audit 2026-10-20): stacked slides cross-fade over different
   layouts, so two cards' text overlapped for the whole fade. Shorter here —
   the outgoing slide is gone in 180ms and the next lands on a clean frame.
   After the rule above on purpose: same specificity, later wins. */
@media(max-width:900px){.slide{transition:opacity .18s ease,visibility 0s .18s}.slide.on{transition:opacity .22s ease}}
.hud-rows li.new{animation-duration:.3s}
/* Box icons (2026-10-15): one line family, 20px, brand text colour, left of
   the heading (ux-design: Icon Design Rules). Decorative, hidden from AT. */
.panel h3.with-ico{display:flex;align-items:center;gap:10px}
.panel h3.with-ico .ico{width:20px;height:20px;flex:none;fill:none;stroke:var(--accent-text);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Icons on every container (2026-10-15): steps and panels share the family. */
.step h3.with-ico,.panel h3.with-ico{display:flex;align-items:center;gap:10px}
.step h3.with-ico .ico,.panel p.with-ico .ico{width:20px;height:20px;flex:none;fill:none;stroke:var(--accent-text);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.panel p.with-ico{display:flex;gap:12px;align-items:flex-start}
.panel p.with-ico .ico{margin-top:2px}
/* Live Stats sample: a changed figure flashes, like the HUD's tiles. */
@keyframes hudTick{from{text-shadow:0 0 10px rgba(242,246,255,.55);filter:brightness(1.35)}to{text-shadow:none;filter:none}}
.hud .tick{animation:hudTick .28s ease-out}
@media (prefers-reduced-motion:reduce){.hud .tick{animation:none}}

/* ── /tutorial (2026-10-15): one lesson per HUD tab and sub-tab ─────────────
   The panel is the hero's (.hud and its cards); tutorial.js fills it. A ring
   marks the part a step explains, and the tooltip sits beside the panel, or
   under it on narrow screens so it never covers what it explains. */
.tut-head{padding:32px 0 8px}
@media(max-width:760px){.tut-head{padding-top:24px}}
.tut-head h1{font-size:clamp(34px,5vw,52px)}
section.tut-main{padding:0;border-top:0}
section.tut-main .tut-meta h2{font-size:32px;text-transform:none}
.tut-grid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:48px;align-items:start;padding:32px 0 96px}
.tut-toc{position:sticky;top:84px}
.tut-toc ol,.tut-toc ul{list-style:none;margin:0;padding:0}
.tut-toc>ol>li+li{margin-top:16px}
.tut-toc .tg{display:block;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);margin-bottom:6px}
.tut-toc a{display:block;padding:4px 0 4px 12px;border-left:2px solid var(--line);color:var(--ink-dim);text-decoration:none;font-size:14px}
@media (hover:hover){.tut-toc a:hover{color:var(--ink)}}
.tut-toc a[aria-current=step]{color:var(--ink);border-left-color:var(--accent)}
.tut-meta .tcount{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent-text)}
.tut-meta h2{font-size:32px;margin-top:8px}
.tut-meta p{margin-top:8px;color:var(--ink-dim);max-width:40em}
.tut-stage{position:relative;margin-top:24px}
#tHud{position:relative}
/* Fills the column, leaving 318px for the tip beside it; under 860px the tip
   moves below and the panel takes the full width. */
@media(min-width:860px){#tHud{max-width:calc(100% - 318px)}}
.tbody [data-s]{cursor:pointer}
/* Room for the ring (6px clear + its 1.5px line): 12px between everything
   stacked inside a card, so a ring never crosses the next label or button. */
.tbody .pc-h{margin-bottom:0}
.tbody .hintnote{margin:12px 0 0}
.tbody .fld{margin-bottom:0}
.tbody .pcard>*+*,.tbody :not(.row2,.row3)>.fld+.fld{margin-top:12px}
.tbody .pcard>.pbtn{margin-top:12px}
.tbody .pcard>.chip{display:inline-block}
.tbody .tbl{margin-bottom:0}
.tsubs .sb{all:unset;cursor:pointer;font:600 11px system-ui,sans-serif;padding:5px 9px;border-radius:4px;background:#2c3442;color:#cfd6e2}
@media (hover:hover){.tsubs .sb:hover{background:#38455a}}
.tsubs .sb.on{background:var(--h-green);color:#fff}
.tsubs .sb:focus-visible,#tHud .hud-tabs button:focus-visible{outline:2px solid var(--h-blue);outline-offset:-2px}
.tring{position:absolute;border:1.5px solid var(--accent);border-radius:8px;pointer-events:none;box-shadow:0 0 0 3px rgba(226,64,26,.14);
  transition:left .25s cubic-bezier(.2,.8,.2,1),top .25s cubic-bezier(.2,.8,.2,1),width .25s cubic-bezier(.2,.8,.2,1),height .25s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.tring{transition:none}}
.ttip{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:10px;padding:14px 16px;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.ttip.side{position:absolute;width:300px}
.ttip.side::before{content:"";position:absolute;left:-7px;top:var(--ay,24px);width:12px;height:12px;margin-top:-6px;background:var(--panel);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.ttip.under{margin-top:14px}
.ttip .tnum{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent-text)}
.ttip h3{font-size:22px;margin-top:6px}
.ttip p{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--ink-dim)}
.tnav{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
.tbtn{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--ink);font:600 14px var(--body);cursor:pointer}
@media (hover:hover){.tbtn:hover{border-color:var(--ink-faint)}}
.tbtn.primary{background:var(--accent);border-color:var(--accent);color:#000}
@media (hover:hover){.tbtn.primary:hover{background:var(--accent-text)}}
.tbtn:disabled{opacity:.4;cursor:default}
.tdone{margin-top:24px;padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.tdone h3{font-size:24px}.tdone p{margin-top:6px;color:var(--ink-dim)}
.tdone:focus{outline:none}
/* The HUD's own ⓘ notes (hud.css #pfv-hud .hintdot / .hintnote). */
.hud .hintdot{all:unset;cursor:pointer;color:#6f9bff;font-size:12px;line-height:1;padding:7px;margin:-7px -7px -7px -5px;min-width:12px;text-align:center}
@media (hover:hover){.hud .hintdot:hover{color:#a9c3f5}}
.hud .hintdot[aria-expanded=true]{color:#a9c3f5}
.hud .hintdot:focus-visible{outline:2px solid #6f9bff;outline-offset:0;border-radius:4px}
.hud .hintnote{margin:0 0 8px;padding:8px 10px;border-radius:6px;background:#101b2e;border:1px solid #2f4a80;border-left:3px solid #3f7bff;color:#a9c3f5;font-size:11px;line-height:1.5}
.tlive{display:flex;align-items:center;gap:6px;padding:8px 2px 0;font-size:11.5px;color:var(--h-dim)}
.tcoin{margin-left:auto;flex:none;width:16px;height:16px;border-radius:50%;background:#00e701;color:#12161c;font:700 10px/16px system-ui,sans-serif;text-align:center}
.tspark{display:block;width:100%;height:70px}
.tspark path{fill:none;stroke:#3fb950;stroke-width:2;vector-effect:non-scaling-stroke}
.tspark .be{stroke:#3a4352;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.tbars{display:flex;align-items:flex-end;gap:4px;height:70px}
.tbars i{flex:1;background:#3f7bff;border-radius:2px 2px 0 0;opacity:.85}
.theat{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.theat i{height:22px;background:#3fb950;border-radius:2px}
.tdrop{border:1px dashed var(--h-line);border-radius:6px;padding:14px;text-align:center;font-size:11.5px;color:var(--h-dim);margin-bottom:8px}
.pbtn.danger{background:#b62324}
.pbtn.set{background:#2c3442;padding:3px 10px;margin:0}
.kbd{font:600 11px ui-monospace,Menlo,monospace;padding:1px 7px;border:1px solid var(--h-line);border-bottom-width:2px;border-radius:4px;color:var(--h-text)}
@media(max-width:960px){.tut-grid{grid-template-columns:minmax(0,1fr);gap:0;padding-top:16px}.tut-toc{display:none}}
/* Run buttons in the tutorial panel press like the HUD's (2026-10-15). */
.tbody button.pbtn{border:0;cursor:pointer;font:600 11px system-ui,sans-serif;line-height:normal}
@media (hover:hover){.tbody button.pbtn:not(.danger):hover{filter:brightness(1.15)}}
.tbody button.pbtn:focus-visible{outline:2px solid #e6e9ef;outline-offset:2px}
.tbody button.pbtn.danger{cursor:pointer}
.tbody .pbtn.busy{opacity:.75;cursor:progress}
.tbody .pbtn.busy::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-1px;animation:tspin .7s linear infinite}
@keyframes tspin{to{transform:rotate(360deg)}}
@keyframes tflash{0%{border-color:#3fb950;box-shadow:0 0 0 2px rgba(63,185,80,.25)}100%{border-color:var(--h-line);box-shadow:none}}
.tbody .pcard.flash{animation:tflash .9s ease-out}
@media (prefers-reduced-motion:reduce){.tbody .pbtn.busy::before{animation:none}.tbody .pcard.flash{animation:none}}
/* Real captured output, revealed by a run button: scrolls inside the card. */
.tbody .tshot-in{max-height:520px;overflow-y:auto;border-radius:6px;border:1px solid var(--h-line);background:var(--h-bg);scrollbar-width:thin}
.tbody .tshot-in img{display:block;width:100%;height:auto}
.tbody .tshot-in:focus-visible{outline:2px solid #e6e9ef;outline-offset:2px}
/* Profile chip, larger (2026-10-15): 34px tall in the 44px menu row, 26px
   avatar, name at 14px. Mirrored in legacy.css. */
nav.top .btn.me,nav.top #navCta.me{height:34px;padding:0 14px 0 4px;gap:8px;font-size:14px;font-weight:600;max-width:220px}
nav.top .btn.me img{width:26px;height:26px}
/* Sign in: a filled brand pill, the menu's one action for visitors, 26px
   (the profile chip is 34px; both sit centred in the 44px row). */
nav.top #navCta.signin{height:26px;padding:0 11px;font-size:11px;font-weight:600;background:var(--accent);border-color:var(--accent);color:#000}
@media (hover:hover){nav.top #navCta.signin:hover{background:var(--accent-text);border-color:var(--accent-text)}}
/* The game-name row in the tutorial panel: room inside for its ring. */
.tbody .hud-site{padding:6px 10px;margin:10px 0 12px}
/* Phones: 8px tab padding so all four tabs fit without scrolling, and the
   first tab's text lines up with the logo and the page content (2026-10-16). */
@media(max-width:480px){nav.top .tab-scroll{margin-left:-8px}nav.top .links a{padding:0 8px}}
/* Jumping to a section (#what, #fair) lands with ~32px (desktop) / ~24px
   (narrow) between the sticky menu and the heading, instead of the section's
   full top padding (72 / 48px). The section's own top border ends up behind
   the menu, so there is one divider. Normal scrolling keeps full spacing. */
main section[id]{scroll-margin-top:4px}
@media(max-width:760px){main section[id]{scroll-margin-top:68px}}
main [id]:not(section){scroll-margin-top:56px}
@media(max-width:760px){main [id]:not(section){scroll-margin-top:104px}}
/* Narrow screens (2026-10-16): the step card is a slide-up bottom sheet.
   Non-blocking (no backdrop, page still scrolls and the panel stays
   tappable): a modal would cover the panel it explains. It slides up while
   the panel is on screen and away when it isn't; 250ms ease-out in, 150ms
   ease-in out (ux-design: enter/exit timing). */
@media(max-width:859px){
  .ttip.under{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;max-width:none;
    border-radius:16px 16px 0 0;border-bottom:0;padding:8px 16px calc(14px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -14px 40px -10px rgba(0,0,0,.8);transform:translateY(110%);transition:transform .15s ease-in;visibility:hidden}
  .ttip.under.up{transform:none;transition:transform .25s ease-out;visibility:visible}
  /* The handle is a real control: drag or tap it to fold the sheet to a slim
     bar (the step number) and back (ux-design: Bottom sheets, snap points). */
  .tgrab{all:unset;display:block;width:100%;height:24px;margin:-8px 0 2px;cursor:grab;touch-action:none;border-radius:8px}
  .tgrab span{display:block;width:36px;height:4px;border-radius:2px;background:var(--ink-faint);margin:10px auto 0}
  .tgrab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .ttip.under.up.min{transform:translateY(calc(100% - 58px - env(safe-area-inset-bottom,0px)))}
  .ttip.under.dragging{transition:none}
  .ttip.under h3{font-size:19px;margin-top:4px}
  .ttip.under p{font-size:14px;margin-top:4px}
  .ttip.under .tnav{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){.ttip.under,.ttip.under.up{transition:none}}

/* Lessons drawer on narrow screens (2026-10-16): navigation → drawer
   (ux-design: overlay by blocking-ness). Slides in from the left over a scrim;
   Esc, ✕ or the scrim close it; focus stays inside while open. */
.ttoc-h,.ttoc-open{display:none}
.tmeta-row{display:flex;align-items:center;gap:12px}
@media(max-width:960px){
  .tut-toc{display:block!important;position:fixed;top:0;bottom:0;left:0;width:min(300px,85vw);z-index:40;background:var(--panel);
    border-right:1px solid var(--line);padding:16px 20px 32px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;transform:translateX(-102%);transition:transform .15s ease-in;visibility:hidden}
  .tut-toc.open{transform:none;transition:transform .25s ease-out;visibility:visible}
  .ttoc-h{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-16px;z-index:1;margin:-16px -20px 16px;padding:16px 20px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
  .ttoc-h b{font:700 22px var(--display);text-transform:uppercase;letter-spacing:.02em}
  .ttoc-x{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;margin-right:-12px;border-radius:8px;color:var(--ink-dim);font-size:16px}
  .ttoc-x:focus-visible{outline:2px solid var(--accent)}
  .tut-toc a{padding:10px 0 10px 12px;font-size:15px}
  .ttoc-open{display:inline-flex;align-items:center;gap:8px;margin-left:auto;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);
    background:var(--panel);color:var(--ink);font:600 13px var(--body);cursor:pointer}
  .ttoc-open span{width:12px;height:2px;background:currentColor;box-shadow:0 -4px 0 currentColor,0 4px 0 currentColor}
  .ttoc-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* Catches a tap outside the drawer to close it. Transparent: a drawer
     dims only the area it covers (ux-design: Modal Hierarchy). */
  .tscrim{position:fixed;inset:0;z-index:35;background:transparent}
  .tut-toc.open{box-shadow:24px 0 48px -16px rgba(0,0,0,.8)}
}
@media (prefers-reduced-motion:reduce){.tut-toc,.tut-toc.open{transition:none}}

.tgrab{display:none}
@media(max-width:859px){.ttip.under .tgrab{display:block}}
/* Lessons from the sheet too, so the list is one tap away anywhere in the
   panel (2026-10-16). Sits left, away from Back/Next. */
.tlessons{display:none}
@media(max-width:960px){.ttip .tlessons{display:inline-flex;align-items:center;margin-right:auto}}
/* Esc hides the desktop tip until the next step (2026-10-16). */
.ttip.side.dismissed,.ttip.under.dismissed{display:none}   /* dismissed on the finish screen too (2026-10-19) */
/* Phones: the sheet keeps the word "Lessons" (labels beat icons). On a
   lesson's last step, "Next: <lesson> →" takes its own full-width row under
   Lessons and Back, above the home bar, instead of wrapping off the edge. */
@media(max-width:960px){
  .ttip .tnav{flex-wrap:nowrap}
  .ttip .tnav .tbtn{flex:none;padding:0 16px}
  .ttip.to-next .tnav{flex-wrap:wrap}
  .ttip.to-next #tNext{order:3;flex:1 0 100%}
}
/* Tighter vertical rhythm, every page (2026-10-16): less empty space between
   sections and before the footer, same values in legacy.css. */
section{padding:48px 0}
@media(max-width:720px){section{padding:32px 0}}
.hero{padding:48px 24px 56px}
@media(max-width:900px){.hero{padding:24px 16px 40px}}
main.doc{padding:32px 0 48px}
@media(max-width:720px){main.doc{padding:24px 0 40px}}
footer{padding:28px 0 32px}
.tut-grid{padding-bottom:48px}
@media(max-width:960px){.tut-grid{padding-bottom:16px}}
/* Smaller page titles on one scale (2026-10-16): home headline 60px max, other
   page titles 44px, section headings 38px. */
.hero h1{font-size:clamp(36px,4.6vw,60px)}
section h2{font-size:clamp(26px,3vw,38px)}
main.doc h1,.tut-head h1{font-size:clamp(30px,3.6vw,44px)}
/* Phones: room to spare in the tab strip (2026-10-16). It fitted with 0px to
   spare in Chrome, so a slightly wider system font (Safari) overflowed. */
@media(max-width:480px){nav.top .tab-scroll{margin-left:-6px}nav.top .links a{padding:0 6px;letter-spacing:.03em}}
/* Profile chip with any name length (2026-10-16): capped width, the name ends
   in "…", never pushes the menu or the page wider. Block layout so the
   ellipsis works (it doesn't on a flex container's bare text). */
nav.top .btn.me,nav.top #navCta.me{display:inline-block;max-width:min(220px,45vw);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:32px;flex:0 1 auto;min-width:0}
nav.top .btn.me img{display:inline-block;vertical-align:middle;margin:-2px 8px 0 0}
/* The whole phone sheet takes the swipe, not just the handle (2026-10-16). */
@media(max-width:859px){.ttip.under{touch-action:none;user-select:none;-webkit-user-select:none}.ttip.under .tgrab{height:28px}}

/* Tutorial results after Run, built in CSS from the real HUD's layout
   (2026-10-16; replaced the screenshots). */
.tshot-in{padding:8px;contain:inline-size}
.tshot{min-width:0}
.rcard{background:var(--h-card);border:1px solid var(--h-line);border-radius:8px;padding:10px}
.rcard+.rcard,.tshot-in>.mute+.rcard{margin-top:8px}
.rcard .pc-h .r{font-size:10.5px;color:var(--h-dim)}
.rcard .tiles.t2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tshot-in .tbl td,.tshot-in .tbl th{white-space:nowrap}
.rcard:has(.tbl){overflow-x:auto}
.tchart{display:block;width:100%;height:150px;background:var(--h-bg);border:1px solid var(--h-div);border-radius:6px}
.tchart .be{stroke:#3a4352;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.tchart .ln{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke}
.tchart .ln.up{stroke:#3fb950}.tchart .ln.dn{stroke:#f85149}
.tchart .ar.up{fill:rgba(63,185,80,.16)}.tchart .ar.dn{fill:rgba(248,81,73,.16)}
.tchart-f{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:10.5px;color:var(--h-dim)}
.tchart-f i{font:600 11px ui-monospace,Menlo,monospace;font-style:normal;color:var(--h-text)}
.tchart-f i.pos{color:#3fb950}.tchart-f i.neg{color:#f85149}
.tdays{display:grid;grid-template-columns:repeat(7,minmax(92px,1fr));gap:6px;margin-top:8px;overflow-x:auto;scrollbar-width:none}
.tday{background:var(--h-bg);border:1px solid var(--h-line);border-radius:6px;padding:7px 8px;display:flex;flex-direction:column;gap:2px}
.tday small{font:600 10.5px system-ui,sans-serif;color:var(--h-dim)}
.tday b{font:600 15px ui-monospace,Menlo,monospace;padding-bottom:4px;border-bottom:1px solid var(--h-div);margin-bottom:2px}
.tday span{font-size:10px;color:var(--h-dim)}
.tday i{display:block;font:600 11px ui-monospace,Menlo,monospace;font-style:normal;color:var(--h-text)}
.tpair,.tgbars{display:flex;align-items:flex-end;gap:10px;height:120px;padding:0 4px 18px;border-bottom:1px solid var(--h-div)}
.tpair>div,.tgbars>div{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;position:relative}
.tpair i{width:38%;max-width:18px;background:#3f7bff;border-radius:2px 2px 0 0}
.tpair i.f{background:#59626f}
.tgbars i{width:72%;background:#2ea043;border-radius:2px 2px 0 0}
.tpair small,.tgbars small{position:absolute;bottom:-17px;font:10px ui-monospace,Menlo,monospace;color:var(--h-dim)}
.tkey{display:flex;gap:14px;margin-top:6px;font-size:10.5px;color:var(--h-dim)}
.tkey i{display:inline-block;width:9px;height:9px;margin-right:5px;background:#3f7bff;border-radius:2px;vertical-align:-1px}
.tkey i.f{background:#59626f}
.tinfo{margin-top:8px;padding:7px 10px;border:1px solid #23406f;border-left:3px solid #3f7bff;border-radius:4px;background:#0f1a2e;font-size:11.5px;color:#c9d8f2}
@media(max-width:400px){.rcard .tiles.t2{grid-template-columns:1fr}}
.tile2 .tf i.pos{color:#3fb950}.tile2 .tf i.neg{color:#f85149}
/* Sideways rows scroll by swipe or trackpad with no bar; the result box's
   up-down bar is drawn dark to match the panel (2026-10-16). */
.tdays::-webkit-scrollbar,.rcard:has(.tbl)::-webkit-scrollbar{display:none}
.rcard:has(.tbl){scrollbar-width:none}
.tbody .tshot-in{color-scheme:dark;scrollbar-color:#3a4352 transparent}
/* Tutorial · Customize lesson: a card in edit mode (2026-10-16), after the
   real HUD's edit mode (size chip, corner grip, drag to move). */
.tedit{border-color:#3f7bff}
.tetools{display:flex;align-items:center;gap:6px}
.twid{font:600 11px system-ui,sans-serif;color:#cfd6e2;background:#2c3442;border:1px solid #3f4d63;border-radius:4px;padding:3px 8px}
.tmove{font-size:10px;color:var(--h-dim);letter-spacing:2px}
.tpen{width:24px;height:24px;border-radius:4px;border:1px solid #3f4d63;background:#2c3442;color:#cfd6e2;font-size:13px;line-height:1;cursor:default}
.tpen.on{border-color:#3f7bff;background:#16233d;color:#a9c3f5}
.tegrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(58px,auto);gap:6px}
.etile{position:relative;background:var(--h-bg);border:1px solid var(--h-line);border-radius:6px;padding:7px 9px;min-width:0}
.etile.big{grid-column:span 2;grid-row:span 2}
.etile.grab{border-style:dashed;border-color:#3f7bff;cursor:grab}
.etile small{display:block;font:600 10.5px system-ui,sans-serif;color:var(--h-dim);padding-right:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etile b{display:block;margin-top:4px;font:600 14px ui-monospace,Menlo,monospace;color:#e6e9ef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etile.big b{font-size:24px;margin-top:10px}
.etile b.pos{color:#3fb950}.etile b.neg{color:#f85149}
.tsz{position:absolute;top:5px;right:5px;font:600 9.5px ui-monospace,Menlo,monospace;color:#a9c3f5;background:#16233d;border:1px solid #3f7bff;border-radius:3px;padding:1px 4px;cursor:pointer}
.tsz:focus-visible{outline:2px solid #e6e9ef;outline-offset:1px}
.tgrip{position:absolute;right:3px;bottom:3px;width:8px;height:8px;border-right:2px solid #3f7bff;border-bottom:2px solid #3f7bff;border-radius:0 0 2px 0}
@media(max-width:480px){.tegrid{grid-template-columns:repeat(2,minmax(0,1fr))}.tetools{flex-wrap:wrap;justify-content:flex-end}}

/* PREMIUM BUTTON (dchan, 2026-10-18; ux-design "Premium buttons"). The hero and
   end-of-page Start Free Trial — never on screen together, so one per view; the
   nav's stays standard. Same footprint as .btn (44px pill): surface and motion
   only, so nothing shifts. Black text keeps >=4.5:1 on both stops (6.62 on
   #f5603d, 4.98 on #e2401a). */
.btn.premium{background:linear-gradient(135deg,var(--accent-text),var(--accent));color:#000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 14px -4px rgba(226,64,26,.35);
  transition:filter .12s ease-out,box-shadow .12s ease-out,transform .08s ease-out;position:relative;overflow:hidden}
@media (hover:hover){.btn.premium:hover{background:linear-gradient(135deg,var(--accent-text),var(--accent));filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 20px -4px rgba(226,64,26,.45)}}
.btn.premium:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 10px -4px rgba(226,64,26,.35)}
.btn.premium:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* One sheen on first appearance, never looped; off for reduced motion. */
.btn.premium::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  transform:translateX(-120%);animation:premSheen .6s ease-out .4s 1 forwards;pointer-events:none}
@keyframes premSheen{to{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.btn.premium::after{animation:none;display:none}.btn.premium{transition:none}}

/* Tutorial: Get Started (install / update), the browser's extensions page (2026-10-18). */
.xpage{display:flex;flex-direction:column;gap:10px;padding:4px 2px}
/* Account-page mocks for the tutorial (2026-10-19) */
.atabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.atabs span{font:600 11px system-ui,sans-serif;padding:6px 10px;border:1px solid var(--h-line);border-radius:6px;color:var(--h-dim)}
.atabs span.on{background:var(--accent);border-color:var(--accent);color:#fff}
.abadge{display:inline-block;min-width:16px;margin-left:5px;padding:0 5px;border-radius:999px;background:var(--ok);color:#0b1220;font:700 10px system-ui,sans-serif;line-height:1.5;font-style:normal}
.arow,.alink,.atool{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0}
.arow b,.atool b{font:600 12.5px system-ui,sans-serif;color:#e6e9ef}.arow small,.atool small{font:500 11.5px ui-monospace,monospace;color:var(--h-dim)}
.atool{flex-direction:column;align-items:flex-start;gap:6px;padding:8px 0;border-top:1px solid var(--h-line)}
.aava{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#8ab4f8,#e2401a)}
.alink span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--h-dim)}
.ah{display:block;font:600 11px system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--h-dim);margin:12px 0 4px}
.aform{display:flex;flex-direction:column;gap:8px;padding:4px 2px}
.achat{border:1px solid var(--h-line);border-radius:8px;overflow:hidden;background:var(--h-bg)}
.achead{display:flex;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--h-line);font:500 11.5px system-ui,sans-serif;color:var(--h-dim)}.achead b{color:#e6e9ef}.achead .chip{margin-left:auto}
.apane{display:flex;flex-direction:column;gap:4px;padding:12px}
.abub{max-width:80%;padding:7px 11px;border-radius:12px;border:1px solid var(--h-line);font:500 12px system-ui,sans-serif;line-height:1.45;color:#e6e9ef}
.abub.user{align-self:flex-end;background:rgba(226,64,26,.12);border-color:rgba(226,64,26,.45);border-bottom-right-radius:4px}
.abub.admin{align-self:flex-start;border-bottom-left-radius:4px}
.acap{font:500 10.5px system-ui,sans-serif;color:var(--h-dim);margin:0 4px 6px}.acap.user{align-self:flex-end}
.acomp{display:flex;gap:8px;align-items:center;padding:8px 10px;border-top:1px solid var(--h-line)}
.ain{flex:1;padding:8px 10px;border:1px solid var(--h-line);border-radius:10px;font:500 12px system-ui,sans-serif;color:var(--h-dim)}
.xfolder,.xacct,.xreplace,.xpin{display:flex;align-items:center;gap:10px;border:1px solid var(--h-line);border-radius:8px;padding:10px 12px;background:var(--h-bg)}
.xf-ic{width:22px;height:16px;border-radius:2px 3px 3px 3px;background:#e6b450;position:relative;flex:none}.xf-ic::before{content:"";position:absolute;left:0;top:-4px;width:9px;height:5px;border-radius:2px 2px 0 0;background:#e6b450}
.xfolder b,.xcard b{display:block;font:600 12.5px system-ui,sans-serif;color:#e6e9ef}.xfolder small,.xcard small{font:500 11px ui-monospace,Menlo,monospace;color:var(--h-dim)}
.xbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.xurl{flex:1;font:500 12px ui-monospace,Menlo,monospace;color:#cfd6e2;background:#161c25;border:1px solid var(--h-line);border-radius:16px;padding:6px 12px}
.xdev{display:inline-flex;align-items:center;gap:8px;font:600 12px system-ui,sans-serif;color:#cfd6e2}
.xtools{display:flex;gap:8px;flex-wrap:wrap}
.xbtn{font:600 11.5px system-ui,sans-serif;color:#0b1220;background:#8ab4f8;border-radius:4px;padding:5px 10px;white-space:nowrap}.xbtn.ghost{background:transparent;color:#8ab4f8;border:1px solid #3c4a63}
.xcard{border:1px solid var(--h-line);border-radius:8px;padding:12px;background:var(--h-bg);max-width:320px}
.xc-top{display:flex;gap:10px;align-items:center}.xc-ic{font-style:normal;width:26px;height:26px;border-radius:6px;background:#e2401a;color:#fff;font:800 13px system-ui,sans-serif;display:flex;align-items:center;justify-content:center}
.xcard p{margin:8px 0 10px;font:500 11.5px system-ui,sans-serif;color:var(--h-dim)}
.xc-foot{display:flex;align-items:center;gap:12px;font:600 11px system-ui,sans-serif;color:#8ab4f8}.xc-reload{margin-left:auto;font-size:15px;color:#cfd6e2}
.xacct{justify-content:space-between;font:600 12px system-ui,sans-serif;color:#cfd6e2}
.xreplace{flex-wrap:wrap;font:500 11.5px system-ui,sans-serif;color:#cfd6e2}.xreplace b{flex:1 1 100%;font-weight:600}
.xpin{font:600 12px system-ui,sans-serif;color:#cfd6e2}.xp-row{margin-left:auto;display:inline-flex;gap:8px;align-items:center}.xp-pin{font-style:normal;color:#8ab4f8}.xp-puz{color:#cfd6e2}

/* Phone tap targets in the sample panel (ux-design review 2026-10-19): the
   Run buttons mirror the HUD's 29px pills, which is under the 44px touch
   rule; on narrow screens they grow, the pill look kept. */
@media(max-width:859px){.tbody button.pbtn{min-height:40px;padding:0 16px;display:inline-flex;align-items:center}}