/* HashProbe site — the tester's own visual language.
 *
 * The design tokens (:root), the theme system (Auto / Light / Dark) and the two
 * self-hosted families — Instrument Sans + DM Mono — are lifted verbatim from the
 * instrument UI (firmware/web/canvas.html in antminer-tester) so the site and the
 * device read as one product. The woff2 files are the same (SIL OFL 1.1, see
 * /licenses). Nothing is fetched from Google at run time. This file adds only the
 * page layout the instrument chrome does not need: header, hero, sections, cards.
 */

/* ---------- fonts (same woff2 the tester ships) ---------- */
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-mono-v16-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-mono-v16-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-mono-v16-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-mono-v16-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(../fonts/instrument-sans-v4-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(../fonts/instrument-sans-v4-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(../fonts/instrument-sans-v4-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(../fonts/instrument-sans-v4-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(../fonts/instrument-sans-v4-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(../fonts/instrument-sans-v4-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens: identical to the instrument's :root ---------- */
:root{
  color-scheme:dark;
  --bg:#0b0e13; --grid:rgba(255,255,255,.055);
  --cell:#151a22; --cell-2:#1c222c; --ln:rgba(255,255,255,.08); --ln-2:rgba(255,255,255,.18);
  --fg:#eef2f6; --mu:#8d97a5; --faint:#5b6570;
  --glass:rgba(14,18,25,.78); --glass-ln:rgba(255,255,255,.1); --glass-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 16px 40px rgba(0,0,0,.45);
  --track:rgba(255,255,255,.08); --hl:rgba(255,255,255,.06); --frame-bg:rgba(255,255,255,.022); --scrim:rgba(5,7,10,.5);
  --sel:#5b93ff; --ok:#38d39f; --fail:#ff5e73; --warn:#ffb648; --run:#58a6ff; --on-fail:#fff; --st-mix:82%;
  --gold:#d9b35a;
  --font:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1120px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#eef1f5; --grid:rgba(16,24,40,.12);
    --cell:#ffffff; --cell-2:#f5f7fa; --ln:rgba(16,24,40,.1); --ln-2:rgba(16,24,40,.22);
    --fg:#121a26; --mu:#5d6b7c; --faint:#8a95a3;
    --glass:rgba(255,255,255,.8); --glass-ln:rgba(16,24,40,.1); --glass-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 36px rgba(16,24,40,.14);
    --track:rgba(16,24,40,.08); --hl:rgba(16,24,40,.04); --frame-bg:rgba(16,24,40,.025); --scrim:rgba(16,24,40,.28);
    --sel:#2f6df6; --ok:#178a5b; --fail:#d8364a; --warn:#b8780a; --run:#2563eb; --on-fail:#d8364a; --st-mix:100%;
    --gold:#c9a24d;
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#eef1f5; --grid:rgba(16,24,40,.12);
  --cell:#ffffff; --cell-2:#f5f7fa; --ln:rgba(16,24,40,.1); --ln-2:rgba(16,24,40,.22);
  --fg:#121a26; --mu:#5d6b7c; --faint:#8a95a3;
  --glass:rgba(255,255,255,.8); --glass-ln:rgba(16,24,40,.1); --glass-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 36px rgba(16,24,40,.14);
  --track:rgba(16,24,40,.08); --hl:rgba(16,24,40,.04); --frame-bg:rgba(16,24,40,.025); --scrim:rgba(16,24,40,.28);
  --sel:#2f6df6; --ok:#178a5b; --fail:#d8364a; --warn:#b8780a; --run:#2563eb; --on-fail:#d8364a; --st-mix:100%;
  --gold:#c9a24d;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;background:
    radial-gradient(circle at 0 0,var(--grid) 1px,transparent 1.2px) 0 0/22px 22px,
    radial-gradient(70% 50% at 50% -5%,color-mix(in oklab,var(--run) 11%,transparent),transparent 72%),
    var(--bg);
  color:var(--fg);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased;
  background-attachment:fixed,fixed,fixed;
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto}}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:600;line-height:1.12;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.2rem)}
h3{font-size:1.12rem}
p{margin:0}
.mono{font-family:var(--mono)}
.mu{color:var(--mu)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--run)}
.lead{font-size:clamp(1.05rem,1.8vw,1.25rem);color:var(--mu);max-width:62ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;border:1px solid var(--ln-2);
  background:var(--cell);color:var(--fg);font:600 15px/1 var(--font);cursor:pointer;transition:border-color .2s,background .2s,transform .06s}
.btn:hover{border-color:color-mix(in oklab,var(--sel) 60%,var(--ln-2))}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--sel);border-color:var(--sel);color:#fff}
.btn.primary:hover{background:color-mix(in oklab,var(--sel) 86%,#fff)}
.btn.ghost{background:transparent}
.btn:focus-visible{outline:2px solid var(--sel);outline-offset:2px}

/* ---------- glass surfaces (the instrument's capsule look) ---------- */
.glass{background:var(--glass);border:1px solid var(--glass-ln);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:40}
.nav{display:flex;align-items:center;gap:18px;height:62px;margin:10px auto;padding:0 18px 0 20px;max-width:var(--maxw);
  border-radius:16px}
@media(max-width:760px){.nav{margin:8px 12px}}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;font-size:18px}
.brand .mark{width:26px;height:26px;flex:0 0 auto}
.nav .links{display:flex;gap:4px;margin-left:8px}
.nav .links a{padding:8px 12px;border-radius:9px;color:var(--mu);font-weight:500;font-size:14.5px;transition:color .2s,background .2s}
.nav .links a:hover{color:var(--fg);background:var(--hl)}
.nav .links a.active{color:var(--fg)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:10px}
@media(max-width:880px){.nav .links{display:none}}

/* theme toggle — the circle-fill motif from the instrument's zoom bar */
.theme{width:34px;height:34px;border-radius:50%;border:1px solid var(--ln-2);background:var(--cell);display:grid;place-items:center;cursor:pointer;color:var(--mu)}
.theme:hover{color:var(--fg);border-color:var(--ln-2)}
.theme svg{width:17px;height:17px}

/* mobile menu */
.burger{display:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--ln-2);background:var(--cell);color:var(--fg);cursor:pointer;place-items:center}
.burger svg{width:18px;height:18px}
@media(max-width:880px){.burger{display:grid}}
.drawer{display:none;flex-direction:column;gap:2px;padding:10px;margin:0 12px;border-radius:14px}
.drawer.open{display:flex}
.drawer a{padding:11px 12px;border-radius:9px;color:var(--mu);font-weight:500}
.drawer a:hover{background:var(--hl);color:var(--fg)}

/* ---------- sections ---------- */
section{padding:72px 0}
section.tight{padding:48px 0}
.center{text-align:center;margin-inline:auto}
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}

/* cards */
.card{background:var(--cell);border:1px solid var(--ln);border-radius:16px;padding:22px 22px 24px;box-shadow:inset 0 1px 0 var(--hl);transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--ln-2)}
.card .ic{width:34px;height:34px;margin-bottom:14px;color:var(--run)}
.card h3{margin-bottom:7px}
.card p{color:var(--mu);font-size:15px}

/* hero */
.hero{padding:clamp(48px,8vw,104px) 0 56px}
.hero .eyebrow{margin-bottom:18px}
.hero h1{max-width:16ch}
.hero .lead{margin-top:20px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero .note{margin-top:14px;font-size:13.5px;color:var(--faint)}

/* status pills reuse the verdict colors */
.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font:600 12.5px/1 var(--font);border:1px solid var(--ln-2);background:var(--cell)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--mu));box-shadow:0 0 7px color-mix(in oklab,var(--c,var(--mu)) 70%,transparent)}
.pill.ok{--c:var(--ok)} .pill.warn{--c:var(--warn)} .pill.fail{--c:var(--fail)} .pill.run{--c:var(--run)} .pill.off{--c:var(--faint)}
.pill.off::before{box-shadow:none}

/* demo frame */
.demo-wrap{border:1px solid var(--ln-2);border-radius:20px;overflow:hidden;background:var(--bg);box-shadow:0 30px 80px rgba(0,0,0,.25)}
.demo-wrap iframe{display:block;width:100%;height:min(74vh,620px);border:0}
.demo-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--ln);font:500 12px var(--mono);color:var(--faint)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:var(--track)}

/* compatibility table */
.ctable{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;overflow:hidden;border:1px solid var(--ln);border-radius:14px}
.ctable th,.ctable td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--ln)}
.ctable thead th{font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);background:var(--cell-2)}
.ctable tbody tr:last-child td{border-bottom:0}
.ctable tbody tr:hover{background:var(--hl)}
.ctable td.model{font-weight:600}
.ctable .mono{color:var(--mu)}
.scrollx{overflow-x:auto}

/* prose for docs */
.prose{max-width:72ch}
.prose h2{margin:40px 0 14px}
.prose h3{margin:28px 0 8px}
.prose p,.prose li{color:var(--mu)}
.prose ul,.prose ol{padding-left:22px;margin:10px 0}
.prose li{margin:6px 0}
.prose code{font-family:var(--mono);font-size:.92em;background:var(--cell-2);border:1px solid var(--ln);border-radius:6px;padding:1px 6px}
.prose a{color:var(--sel);text-decoration:underline;text-underline-offset:2px}
.callout{border:1px solid var(--ln-2);border-left:3px solid var(--run);background:var(--frame-bg);border-radius:12px;padding:16px 18px;margin:20px 0}
.callout.gold{border-left-color:var(--gold)}

/* price block */
.price{font:600 44px/1 var(--font);letter-spacing:-.02em}
.price small{font:500 15px var(--mono);color:var(--faint)}
.spec{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14.5px;margin-top:8px}
.spec dt{color:var(--faint);font-family:var(--mono);font-size:13px}
.spec dd{margin:0}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--ln);margin-top:40px;padding:40px 0 56px;color:var(--mu);font-size:14px}
footer.site .cols{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
footer.site a:hover{color:var(--fg)}
footer.site .legal{margin-top:28px;font-size:12.5px;color:var(--faint);max-width:70ch}
footer .fcol{display:flex;flex-direction:column;gap:9px}
footer .fcol b{color:var(--fg);font-weight:600;font-size:13px;letter-spacing:.02em}

/* generic */
.divider{height:1px;background:var(--ln);border:0;margin:0}
.kpi{display:flex;gap:40px;flex-wrap:wrap}
.kpi .n{font:600 34px/1 var(--font);letter-spacing:-.02em}
.kpi .l{color:var(--faint);font-size:13.5px;margin-top:6px}