/* muskstats theme. Derived from prlstats' theme.
   Light is the base; dark comes from the OS preference or an explicit choice.
   The `:not([data-theme="light"])` guard lets a manual light selection beat an
   OS set to dark, and the `[data-theme="dark"]` block lets a manual dark
   selection beat an OS set to light. Chart hues are validated in both. */
:root {
  color-scheme: light;
  --bg:#f5f5f3; --surface:#fcfcfb; --surface-2:#f0f0ed; --border:#e0e0dc;
  --text:#0b0b0b; --text-2:#52514e; --text-3:#6b6963;
  --accent:#1f66c9; --accent-dim:#174f9c; --accent-wash:rgba(31,102,201,.08);
  /* Caveat text sits on surface-2, where --accent is 4.3:1 in light. */
  --caveat:#a8241f;
  /* Line-chart slots. Six, not three: /activity already asked for
     --series-4 and --series-5, got an empty string, and drew those lines in
     the browser's default black; /metric/price cycled two companions back
     onto the same blue. The extra three are the validated categorical hues
     below, in an order that keeps neighbours apart. */
  --series-1:#2a78d6; --series-2:#d4322c; --series-3:#1baf7a;
  --series-4:#eb6834; --series-5:#eda100; --series-6:#4a3aa7;
  /* Categorical slots for charts with many members (mining pools). Assigned
     in this fixed order, never cycled: colour follows the pool, so a filter
     that drops one must not repaint the rest. The order is the safety
     mechanism -- it is a validated rotation of the reference theme and
     clears every adjacent gate in both modes (worst adjacent CVD dE 9.1
     light / 8.4 dark; normal-vision 19.6 / 19.3). Do not reorder without
     re-running the validator. Three light slots sit under 3:1 on the
     surface, so the stack ships direct labels and a table view. */
  --cat-1:#2a78d6; --cat-2:#d4322c; --cat-3:#eb6834; --cat-4:#1baf7a;
  --cat-5:#eda100; --cat-6:#e87ba4; --cat-7:#008300; --cat-8:#4a3aa7;
  --good:#008300; --bad:#d4322c; --grid:#e8e8e4;
  /* The profitable counterpart of --accent-wash, for cards that answer
     "yes" where the accent answers "no". */
  --good-dim:#1f7a3a; --good-wash:rgba(0,131,0,.07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#0a0a0b; --surface:#141416; --surface-2:#1b1b1e; --border:#28282d;
    --text:#f4f4f2; --text-2:#a5a49e; --text-3:#8a8984;
    --accent:#5a9bf0; --accent-dim:#3b7bd0; --accent-wash:rgba(90,155,240,.10); --caveat:#ef4a45;
    --series-1:#3987e5; --series-2:#ef4a45; --series-3:#199e70;
    --series-4:#d95926; --series-5:#c98500; --series-6:#9085e9;
    --cat-1:#3987e5; --cat-2:#ef4a45; --cat-3:#d95926; --cat-4:#199e70;
    --cat-5:#c98500; --cat-6:#d55181; --cat-7:#008300; --cat-8:#9085e9;
    --good:#3fb950; --bad:#ef4a45; --grid:#232327;
    --good-dim:#2d7d3f; --good-wash:rgba(63,185,80,.08);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0a0a0b; --surface:#141416; --surface-2:#1b1b1e; --border:#28282d;
  --text:#f4f4f2; --text-2:#a5a49e; --text-3:#8a8984;
  --accent:#5a9bf0; --accent-dim:#3b7bd0; --accent-wash:rgba(90,155,240,.10); --caveat:#ef4a45;
  --series-1:#3987e5; --series-2:#ef4a45; --series-3:#199e70;
  --series-4:#d95926; --series-5:#c98500; --series-6:#9085e9;
  --cat-1:#3987e5; --cat-2:#ef4a45; --cat-3:#d95926; --cat-4:#199e70;
  --cat-5:#c98500; --cat-6:#d55181; --cat-7:#008300; --cat-8:#9085e9;
  --good:#3fb950; --bad:#ef4a45; --grid:#232327;
  --good-dim:#2d7d3f; --good-wash:rgba(63,185,80,.08);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ------------------------------------------------------------------- nav */
.nav {
  border-bottom:1px solid var(--border); background:var(--surface);
  position:sticky; top:0; z-index:40;
}
.nav-in {
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:24px; height:58px;
  /* Eight non-wrapping links are wider than a phone. Let the NAV scroll
     rather than the document: without this every page had a horizontal
     scrollbar and content clipped off the right edge at 375px. */
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.nav-in::-webkit-scrollbar { display:none; }
.brand {
  font-weight:700; font-size:17px; letter-spacing:-0.02em; color:var(--text);
  display:flex; align-items:center; gap:8px; margin-right:4px; white-space:nowrap;
}
.brand:hover { text-decoration:none; }
/* The site is a model of an unmeasured thing, and says so next to its name. */
.beta {
  margin-left:7px; padding:2px 5px; border-radius:4px;
  background:var(--accent-wash); color:var(--accent);
  border:1px solid var(--accent); font-size:9.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; vertical-align:2px;
}
.brand .dot { width:8px; height:8px; border-radius:50%; background:var(--accent);
              box-shadow:0 0 0 3px var(--accent-wash); flex:none; }
.nav a.link {
  color:var(--text-2); font-size:15px; padding:4px 0; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-2px;
}
.nav a.link:hover { color:var(--text); text-decoration:none; }
.nav a.link[aria-current="page"] { color:var(--text); border-bottom-color:var(--accent); }
.nav .spacer { flex:1; }
.nav .live {
  font-size:11.5px; color:var(--text-2); display:flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.nav .live b { color:var(--text); font-variant-numeric:tabular-nums; font-weight:600; }
.pulse { width:7px; height:7px; border-radius:50%; background:var(--good); flex:none;
         animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.theme-btn {
  background:none; border:1px solid var(--border); color:var(--text-2);
  border-radius:6px; padding:3px 8px; font:inherit; font-size:12px; cursor:pointer;
}
.theme-btn:hover { color:var(--text); border-color:var(--text-3); }
/* The nav scrolls sideways when the links outgrow it, which pushed the theme
   button off the end at every desktop width. It stays pinned instead. */
.theme-btn { position:sticky; right:0; flex:none; background:var(--surface); }
/* Five sections and the live counter fit on a laptop; below that the counter
   goes before it collides with the pinned button. */
@media (max-width:900px) { .nav .live { display:none; } .nav-in { gap:20px; } }
/* On a phone the brand and the theme button take the first row and the five
   sections the second, so every section is visible without a sideways
   scroll nobody discovers. */
@media (max-width:560px) {
  .nav-in { flex-wrap:wrap; height:auto; padding:10px 16px 0; gap:0 18px; overflow:visible; }
  .nav .brand { flex:1 0 calc(100% - 90px); order:0; height:40px; }
  .nav .theme-btn { order:1; position:static; }
  .nav .spacer, .nav .live { display:none; }
  .nav a.link { order:2; padding:10px 0 9px; font-size:14.5px; }
  .tabs-in { padding:0 16px; gap:18px; }
}
.skip { position:absolute; left:-9999px; }
.skip:focus { left:16px; top:8px; z-index:100; background:var(--surface); padding:6px 10px;
              border:1px solid var(--border); border-radius:6px; }

/* ----------------------------------------------------------------- layout */
.wrap { max-width:1180px; margin:0 auto; padding:34px 20px 56px; }
.page-h { margin:0 0 10px; font-size:34px; line-height:1.15; letter-spacing:-0.03em; }
.page-p { margin:0 0 30px; color:var(--text-2); font-size:17px; line-height:1.65; max-width:68ch; }
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:22px 24px; margin-bottom:20px;
}
h2 { font-size:20px; margin:0 0 6px; letter-spacing:-0.02em; line-height:1.25; }
.sub { font-size:15px; line-height:1.6; color:var(--text-2); margin:0 0 18px; max-width:76ch; }
@media (max-width:640px) { }

.tiles { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-bottom:20px; }
.tile { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:17px 19px; }
@media (max-width:820px) { }
@media (max-width:560px)  { }
#who .est { margin-top:7px; }
/* Emphasis, not verdict. This used to be tinted with the brand accent,
   which is red: the highest-return use of the fleet was painted like a
   warning while its own figure was green. Red and green are reserved for
   "pays" and "does not", everywhere on the site. */
.tile.hero { border-color:var(--text-3); background:var(--surface-2); }
/* Why a figure is green or red, in the same colour, under the figure.
   `.tile .n` sets a grey, so the colour has to be stated at the same
   specificity or the note comes out grey and the colour goes unexplained. */
.tile .n.good { color:var(--good); font-weight:600; }
.tile .n.bad  { color:var(--bad);  font-weight:600; }
.tile .k { font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); line-height:1.35; }
.tile .v { font-size:32px; font-weight:650; letter-spacing:-0.03em; margin-top:6px;
           line-height:1.1; font-variant-numeric:tabular-nums; }
.tile .n { font-size:13px; line-height:1.45; color:var(--text-2); margin-top:6px; }
.good { color:var(--good); } .bad { color:var(--bad); }

.controls { display:grid; gap:16px 20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
/* `display:grid` outranks the hidden attribute, so the chart page's
   overhead picker showed on every chart, cost or not. */
.controls[hidden] { display:none; }
label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
        color:var(--text-3); margin-bottom:6px; line-height:1.35; }
select, input {
  width:100%; padding:9px 11px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font:inherit; font-size:15px;
}
select:focus, input:focus { outline:2px solid var(--accent); outline-offset:1px; }

.legend { display:flex; flex-wrap:wrap; gap:18px; margin-bottom:12px; font-size:14px; }
.legend span { display:flex; align-items:center; gap:6px; color:var(--text-2); }
.sw { width:11px; height:3px; border-radius:2px; flex:none; }
svg { display:block; width:100%; height:auto; overflow:visible; }
/* Size is set on the element, not here: the chart has to know how wide a
   label will be before it can leave room for it, and a stylesheet that
   changes the size behind its back is how "100.00 EH/s" became "0.00
   EH/s" on a phone. Colour and weight still belong to the theme. */
.axis { fill:var(--text-3); font-variant-numeric:tabular-nums; }
.glabel { font-weight:600; }

table { width:100%; border-collapse:collapse; font-size:15px; }
th { text-align:left; font-weight:600; color:var(--text-3); font-size:12px;
     text-transform:uppercase; letter-spacing:.06em; padding:10px 10px;
     border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:11px 10px; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums;
     line-height:1.5; }
tr:last-child td { border-bottom:none; }
td.r, th.r { text-align:right; }
.pill { display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px;
        border:1px solid var(--border); color:var(--text-2); }
.pill.on { border-color:var(--accent-dim); color:var(--accent); background:var(--accent-wash); }
.tbl-wrap { overflow-x:auto; }
/* A table with many numeric columns -- the difficulty ladder carries nine.
   It still scrolls on a narrow screen, but on a desktop it should fit, and
   a figure that wraps to two lines ("100 / MW") reads as two numbers. */
table.compact { font-size:13.5px; }
/* A grouped header spans several numeric columns; the rule marks where one
   group ends and the next begins, so eleven columns still read as three
   ideas. */
table th.grp, table td.grp { border-left:1px solid var(--border); }
table th[colspan] { text-align:right; padding-bottom:2px; color:var(--text-2); }
table.compact th { padding:9px 7px; font-size:11px; letter-spacing:.05em; }
table.compact td { padding:9px 7px; }
table.compact td.r { white-space:nowrap; }
.note { font-size:14.5px; color:var(--text-2); margin-top:14px; line-height:1.7; max-width:76ch; }

.tip { position:fixed; pointer-events:none; opacity:0; transition:opacity .08s;
       background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
       padding:8px 10px; font-size:12px; box-shadow:0 8px 26px rgba(0,0,0,.45);
       z-index:60; font-variant-numeric:tabular-nums; }
.tip b { display:block; margin-bottom:4px; font-size:10.5px; color:var(--text-3);
         font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.tip i { display:inline-block; width:9px; height:3px; border-radius:2px; margin-right:6px;
         vertical-align:middle; font-style:normal; }
.err { color:var(--bad); font-size:13px; }

footer {
  border-top:1px solid var(--border); margin-top:44px; padding:26px 20px 52px;
  color:var(--text-3); font-size:14px; line-height:1.6;
}
footer .in { max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap;
             gap:8px 18px; align-items:center; }
footer .in .spacer { flex:1; }
@media (max-width:640px){
  body { font-size:15px; }
  /* Charts scale a 1000-unit viewBox down to roughly a third at phone
     width, so 12px axis text renders at about 4px -- present, and
     unreadable. charts.js sets the phone sizes on the elements themselves
     (they are ~30 viewBox units, near 11px on screen) because it also has
     to reserve the gutter they need. Fewer ticks fit; that is the right
     trade. */
  .page-h { font-size:27px; }
  .page-p { font-size:16px; }
  .tile .v { font-size:26px; }
  h2 { font-size:18px; }
  .wrap { padding:22px 16px 36px; }
  .nav-in { gap:14px; padding:0 16px; }
  .nav .live { display:none; }
  .method { padding:14px 16px; font-size:14.5px; }
}

/* ------------------------------------------------- chart toolbar & notes */
.toolbar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:12px; }
.toolbar .dlbtn { margin-left:auto; }
.range-btn, .dlbtn {
  background:var(--surface-2); color:var(--text-2); border:1px solid var(--border);
  border-radius:7px; padding:5px 12px; font:inherit; font-size:13px; cursor:pointer;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
}
.range-btn:hover, .dlbtn:hover { color:var(--text); border-color:var(--text-3); }
/* The compare link is a button in the same row, so it has to stop being a
   link to the eye: same box, no underline, no visited colour. */
a.cmpbtn { text-decoration:none; display:inline-block; }

/* The comparison view's method notes: collapsed, and quiet enough that the
   next chart is still on the screen. Expanded they are the same text the
   metric page shows. */
.method details.about > summary {
  cursor:pointer; font-size:12px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-3); padding:2px 0;
}
.method details.about > summary:hover { color:var(--text-2); }
.method details.about[open] > summary { margin-bottom:8px; }
.method details.about { font-size:13px; }
.range-btn.active {
  background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;
}
.method {
  margin-top:20px; border-left:3px solid var(--accent); background:var(--surface-2);
  border-radius:0 10px 10px 0; padding:16px 20px; font-size:15px; line-height:1.7;
  color:var(--text-2);
}
/* The panel fills its card so it does not read as broken beside a full-width
   table; the text inside keeps a comfortable measure. */
.method:empty { display:none; }
.method > div, .method > p, .method .cav, .method .src { max-width:82ch; }
.method h4 {
  margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-3); font-weight:600;
}
.method .cav { display:block; margin-top:12px; color:var(--caveat); }
.method .src { display:block; margin-top:12px; color:var(--text-3); font-size:13.5px; }

/* clickable metric cards */
a.tile { display:block; text-decoration:none; color:inherit; transition:border-color .12s; }
a.tile:hover { border-color:var(--accent); text-decoration:none; }
a.tile .k::after { content:' \2197'; opacity:.45; font-size:10px; }
.asmlink { color:var(--text-2); border-bottom:1px dotted var(--text-3); }
.asmlink:hover { color:var(--accent); text-decoration:none; }
.asmlink.low { color:var(--accent); }
.asm { margin-bottom:14px; }
.asm h3 { font-size:14px; margin:0 0 2px; }
.asm .val { font-size:20px; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.asm .prompt {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:6px;
  padding:7px 9px; margin:8px 0; color:var(--text-2); overflow-x:auto; white-space:pre-wrap;
}
.cite { border-left:2px solid var(--border); padding:4px 0 4px 11px; margin:8px 0; font-size:12.5px; }
.cite .claim { color:var(--text-2); font-style:italic; }
.cite .meta { color:var(--text-3); font-size:11.5px; margin-top:2px; }
.fb { margin-top:12px; border-top:1px solid var(--border); padding-top:10px; }
.fb textarea {
  width:100%; min-height:56px; padding:7px 9px; border-radius:7px; resize:vertical;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text); font:inherit; font-size:13px;
}
.fb button {
  margin-top:7px; background:var(--accent); border:none; color:#fff; border-radius:7px;
  padding:6px 14px; font:inherit; font-size:12.5px; cursor:pointer; font-weight:600;
}
.fb button:hover { background:var(--accent-dim); }
.fb .ok { color:var(--good); font-size:12.5px; margin-left:10px; }
.anno { font-weight:600; pointer-events:none; }
.refline { stroke:var(--text-3); stroke-width:1; stroke-dasharray:4 4; opacity:.8; }
.tb-sep { width:1px; height:18px; background:var(--border); margin:0 4px; display:inline-block; }
.scale-btn { text-transform:lowercase; letter-spacing:0; }
.rels { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
a.rel {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:9px;
  padding:14px 16px; color:var(--text); font-size:15px; text-decoration:none;
}
a.rel:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
a.rel span { color:var(--text-3); }
a.rel:hover span { color:var(--accent); }
.controls.key { gap:18px 22px; }
/* In the dock the inputs are a strip, not a form: the labels stay, the
   explanatory hints are what a reader needs once. The selector matches
   `.controls.key .hint`, which sets them to block. */
#keydock .controls.key .hint { display:none; }
#keydock .controls.key { gap:10px 18px; }
#keydock label { margin-bottom:4px; font-size:11px; }
#keydock select, #keydock input { font-size:14px; padding:6px 9px; }
.controls.key .hint {
  display:block; margin-top:6px; font-size:13px; line-height:1.5; color:var(--text-3);
}
.controls.key select, .controls.key input { font-size:16px; padding:10px 12px; }
/* One control above a row of cards does not need the full tray treatment. */
.controls.compact { gap:10px 16px; grid-template-columns:repeat(auto-fit,minmax(260px,420px)); }
.controls.compact select { font-size:14px; padding:7px 10px; }
.controls.compact .hint { margin-top:4px; font-size:12px; }
.sm[open] > summary::after { content:'\2212'; }
@media (max-width:640px) { }

/* Two rows on the difficulty table carry meaning beyond their numbers:
   where the network actually is, and where it would match Bitcoin. Marked
   with a tinted background AND a pill, never colour alone. */
tr.row-now > td { background:var(--surface-2); }
tr.row-mark > td {
  background:var(--accent-wash);
  border-top:1px solid var(--accent); border-bottom:1px solid var(--accent);
}
tr.row-mark > td:first-child, tr.row-now > td:first-child { font-weight:650; }

.est {
  display:inline-block; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-3); font-weight:600;
}
.sm[open] > summary::after { content:'\2212'; }
@media (max-width:640px) { }

/* Two rows on the difficulty table carry meaning beyond their numbers:
   where the network actually is, and where it would match Bitcoin. Marked
   with a tinted background AND a pill, never colour alone. */
tr.row-now > td { background:var(--surface-2); }
tr.row-mark > td {
  background:var(--accent-wash);
  border-top:1px solid var(--accent); border-bottom:1px solid var(--accent);
}
tr.row-mark > td:first-child, tr.row-now > td:first-child { font-weight:650; }

.est { display:block; margin-top:6px; }
.est::before { content:'~ '; opacity:.7; }
.est.modelled::after { content:' \00b7 modelled'; font-weight:400; text-transform:none;
  letter-spacing:0; font-size:11.5px; }
.chart-est {
  font-size:12px; color:var(--text-3); margin:-4px 0 10px;
}
.mc h2 { display:flex; gap:10px; align-items:baseline; }
@media (max-width:640px) { }
/* Every chart says which model drew it. */
.model-ref { display:inline-block; margin-top:6px; font-size:12px; color:var(--text-3); text-decoration:none; }
.model-ref:hover { color:var(--accent); }
.txbar { fill:var(--series-1); }
.txbar:hover { opacity:.75; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }

/* /inference */
td.good { color:var(--good); }
td.bad { color:var(--bad); }
td .hint, td.hint { font-size:12px; color:var(--text-3); line-height:1.45; margin-top:2px; }
td.hint { max-width:36ch; }
td.unsup, th.unsup { opacity:.45; }
td.grp, th.grp { border-left:1px solid var(--border); }
:root { --ov-0:#86b6ef; --ov-1:#5598e7; --ov-2:#2a78d6; --ov-3:#1c5cab; --ov-4:#0d366b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ov-0:#184f95; --ov-1:#256abf; --ov-2:#3987e5; --ov-3:#6da7ec; --ov-4:#b7d3f6; }
}
:root[data-theme="dark"] { --ov-0:#184f95; --ov-1:#256abf; --ov-2:#3987e5; --ov-3:#6da7ec; --ov-4:#b7d3f6; }

/* Section tabs: the hub and its pages, under the nav. */
.tabs { border-bottom:1px solid var(--border); background:var(--bg); }
.tabs-in { max-width:1180px; margin:0 auto; padding:0 20px; display:flex; gap:22px; align-items:center;
           overflow-x:auto; scrollbar-width:none; }
.tabs-in::-webkit-scrollbar { display:none; }
.tabs-sec { font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); padding:11px 0; white-space:nowrap; }
.tabs a { font-size:14px; color:var(--text-2); padding:10px 0; border-bottom:2px solid transparent; white-space:nowrap; text-decoration:none; }
.tabs a:hover { color:var(--text); }
.tabs a[aria-current="page"] { color:var(--text); border-bottom-color:var(--accent); }
.sec:hover { border-color:var(--text-3); text-decoration:none; }
/* The overview's key figures: one row of six on a desktop. */
#figs.tiles { grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); }
#figs .tile .v { font-size:26px; }
.nav .caret { display:inline-block; width:0; height:0; margin-left:6px; vertical-align:2px;
              border-left:4px solid transparent; border-right:4px solid transparent;
              border-top:5px solid currentColor; opacity:.6; transition:transform .15s; }
@media (min-width:561px) {
  .nav-in { overflow:visible; }
}
@media (max-width:560px) { .nav .caret { display:none; } }
@media (max-width:560px) {
  .nav .brand { flex:0 0 auto; }
}
@media (max-width:760px) { }
table th.gk { text-transform:none; font-size:13px; }

/* /mining: the core cost figures, in three groups. */
.core-group + .core-group { margin-top:16px; }
.core-h { font-size:13px; font-weight:650; text-transform:uppercase; letter-spacing:.06em; }
.core-sub { font-size:13px; color:var(--text-2); margin:2px 0 8px; }
.core-row { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }

/* ------------------------------------------------------------ spcxstats */
.grid2 { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); }
.grid2 > .card { margin-bottom:20px; min-width:0; }
@media (max-width:520px) { .grid2 { grid-template-columns:1fr; } }
.rel.done span { color:var(--good); }
.seg { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.seg button { font:inherit; font-size:13px; padding:5px 11px; border:0; background:var(--surface);
  color:var(--text-2); cursor:pointer; }
.seg button + button { border-left:1px solid var(--border); }
.seg button.on { background:var(--accent-wash); color:var(--accent); font-weight:600; }
.badge { display:inline-block; font-size:11px; padding:1px 7px; border-radius:10px; border:1px solid var(--border);
  color:var(--text-2); white-space:nowrap; }
.badge.ok { color:var(--good); border-color:var(--good-dim); }
.badge.bad { color:var(--bad); border-color:var(--bad); }
.badge.est { color:var(--text-3); }
.badge.rep { color:var(--good); border-color:var(--good-dim); }
.muted { color:var(--text-3); }
td a.src { font-size:13px; }
.bar-hit { fill:transparent; }
.bar-hit:hover { fill:var(--accent-wash); }
span.rel { display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:9px;
  padding:14px 16px; color:var(--text); font-size:15px; }
span.rel span { color:var(--text-3); font-size:13px; }

/* Musk Industries: Tesla streams in warm reds and ambers, SpaceX in cool
   blues, teal and violet, so the two companies read apart at a glance. */
:root { --t1:#c92a2a; --t2:#e8590c; --t3:#f08c00; --t4:#d6336c; --t5:#9c3653;
        --s1:#1c7ed6; --s2:#0ca678; --s3:#6741d9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --t1:#ff6b6b; --t2:#ff922b; --t3:#fcc419; --t4:#f06595; --t5:#c2255c; --s1:#4dabf7; --s2:#38d9a9; --s3:#9775fa; } }
:root[data-theme="dark"] { --t1:#ff6b6b; --t2:#ff922b; --t3:#fcc419; --t4:#f06595; --t5:#c2255c; --s1:#4dabf7; --s2:#38d9a9; --s3:#9775fa; }
.big { font-size:44px; font-weight:700; letter-spacing:-0.04em; line-height:1.05; }
.lede { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin:6px 0 22px; }
.lede .k { font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); }
.lede .n { font-size:14px; color:var(--text-2); margin-top:4px; line-height:1.45; }
.lede > div { border-left:3px solid var(--accent); padding:4px 0 4px 14px; }
.bizgrid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.biz { display:block; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px; color:var(--text); }
.biz:hover { border-color:var(--text-3); text-decoration:none; }
.biz .t { font-weight:650; display:flex; align-items:center; gap:8px; }
.biz .t i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.biz .v { font-size:24px; font-weight:650; margin-top:6px; letter-spacing:-0.02em; }
.biz .n { font-size:13px; color:var(--text-2); margin-top:4px; line-height:1.45; }
tr.head td { font-weight:650; background:var(--accent-wash); }

/* ===================================================== muskstats v0.2
   Cybertruck-inspired: hard angles, stainless neutrals, one red. Display
   type is Michroma (SIL OFL, assets/fonts/OFL.txt), a wide geometric face
   in the spirit of the Cybertruck wordmark, which is Tesla's own. */
@font-face { font-family:"Michroma"; src:url("/fonts/michroma.woff2") format("woff2"); font-display:swap; }
:root {
  --display:"Michroma",ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  --bg:#ecedee; --surface:#f8f8f8; --surface-2:#e4e6e8; --border:#cfd3d7;
  --text:#0d0f11; --text-2:#454b52; --text-3:#6b737c;
  --accent:#d81f26; --accent-dim:#a3161c; --accent-wash:rgba(216,31,38,.08);
  --cut:14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#08090b; --surface:#101215; --surface-2:#171a1e; --border:#262a30;
  --text:#eef0f2; --text-2:#a8b0b9; --text-3:#7d868f; --grid:#1b1e22;
  --accent:#ff3b42; --accent-dim:#c4242b; --accent-wash:rgba(255,59,66,.10); } }
:root[data-theme="dark"] {
  --bg:#08090b; --surface:#101215; --surface-2:#171a1e; --border:#262a30;
  --text:#eef0f2; --text-2:#a8b0b9; --text-3:#7d868f; --grid:#1b1e22;
  --accent:#ff3b42; --accent-dim:#c4242b; --accent-wash:rgba(255,59,66,.10); }

body { background:var(--bg); }
/* The bar is black whatever the theme: the truck's glass. */
.nav { background:#000; border-bottom:1px solid #1d2024; }
.nav .link { color:#aeb4bb; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.nav .link:hover { color:#fff; }
.nav .link[aria-current="page"] { color:#fff; border-bottom-color:var(--accent); }
.brand { font-family:var(--display); color:#fff !important; letter-spacing:.22em; font-size:15px; text-transform:uppercase; }
.brand .dot { width:10px; height:10px; border-radius:0; background:var(--accent); clip-path:polygon(50% 0,100% 100%,0 100%); }
.brand .rev { font-family:ui-monospace,monospace; font-size:10px; letter-spacing:0; color:#7d868f; margin-left:8px; border:1px solid #2a2e33; padding:1px 5px; }
.nav .live, .nav .live b { color:#aeb4bb; }
.theme-btn { background:#000; color:#aeb4bb; border-color:#2a2e33; border-radius:0; }

.page-h { font-family:var(--display); font-weight:400; font-size:30px; letter-spacing:.02em; text-transform:uppercase; }
.card h2 { font-family:var(--display); font-weight:400; font-size:15px; letter-spacing:.06em; text-transform:uppercase; }
.card { border-top:2px solid var(--border); }
.big { font-size:34px; }
.lede > div { border-left:3px solid var(--accent); }
.lede .k, .tile .k, .biz .t { letter-spacing:.1em; }
.seg { border-radius:0; } .seg button { letter-spacing:.04em; }
.badge { border-radius:0; }
.method { border-radius:0; }
tr.head td { background:var(--accent-wash); }
tr.head td:first-child { box-shadow:inset 3px 0 0 var(--accent); }
footer { border-top:1px solid var(--border); }
footer .in span:first-child::before { content:"MUSKSTATS"; font-family:var(--display); letter-spacing:.2em; margin-right:12px; color:var(--text); font-size:12px; }

/* The PNG button, top right of every chart and table card. */
.card { position:relative; }
.dl { position:absolute; top:16px; right:calc(var(--cut) + 12px); font:inherit; font-size:11px; letter-spacing:.08em;
      text-transform:uppercase; padding:4px 10px; border:1px solid var(--border); background:var(--surface);
      color:var(--text-2); cursor:pointer; border-radius:0; }
.dl:hover { color:var(--accent); border-color:var(--accent); }
@media (max-width:640px) { .dl { position:static; float:right; margin:0 0 6px 8px; } .page-h { font-size:22px; } .big { font-size:28px; } }
.pc { font-family:ui-sans-serif,-apple-system,"Segoe UI",sans-serif; font-weight:600; font-size:.82em; margin-left:.06em; }
/* Top bar: SPCX, TSLA, and the two combined. On narrow screens, SPCX only. */
.nav .live .tk { margin-left:12px; white-space:nowrap; }
@media (max-width:900px) { .nav .live .tk + .tk { display:none; } }

/* ------------------------------------------------ home: acts and opener */
.acts { display:flex; gap:22px; margin:-14px 0 22px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.acts a { color:var(--text-3); }
.acts a:hover { color:var(--accent); text-decoration:none; }
@media (min-width:900px) { .acts { position:sticky; top:58px; z-index:30; background:var(--bg); padding:8px 0; } }
.act { display:flex; align-items:baseline; gap:14px; margin:56px 0 6px; scroll-margin-top:110px; }
.act-n { font-family:var(--display); font-size:12px; color:var(--text-3); letter-spacing:.16em; white-space:nowrap; }
.act-t { font-family:var(--display); font-weight:400; font-size:26px; margin:0; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; }
.act-w { flex:1; height:1px; background:var(--border); position:relative; top:-8px; }
.act-w::before { content:""; position:absolute; left:0; top:-5px; width:14px; height:10px; background:var(--accent); clip-path:polygon(0 100%,50% 0,100% 100%); }
.act-s { color:var(--text-2); margin:0 0 18px; max-width:76ch; }
.opener { position:relative; overflow:hidden; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px; background:#000; color:#eef0f2;
  padding:30px 32px; margin-bottom:12px; clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); min-height:220px; }
.op-fan { position:absolute; inset:0; opacity:.22; pointer-events:none; }
.op-fan svg { height:100%; }
.op-col { position:relative; }
.op-k { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8e96a0; }
.op-n { font-family:var(--display); font-size:96px; line-height:1; margin:10px 0 6px; color:#fff; }
.op-n .pc { font-size:.55em; }
.op-m { font-family:var(--display); font-size:34px; line-height:1.1; margin:12px 0 8px; color:#fff; font-variant-numeric:tabular-nums; }
.op-s { font-size:14px; color:#b4bbc4; line-height:1.5; }
.op-main .op-s { font-size:15px; }
@media (max-width:900px) { .opener { grid-template-columns:1fr; gap:18px; padding:24px 20px; } .op-n { font-size:64px; } .op-m { font-size:28px; } .act-t { font-size:20px; } .act { margin-top:36px; } }
.card.hero { padding:28px 32px; }
.biz .spark { height:28px; margin:8px 0 2px; }
.biz .spark svg { height:28px; }
/* compare */
.pk-g { margin-bottom:12px; }
.pk-h { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:6px; }
.pk { font:inherit; font-size:13px; padding:5px 10px; margin:0 6px 6px 0; border:1px solid var(--border); background:var(--surface); color:var(--text-2); cursor:pointer; }
.pk.on { border-color:var(--accent); color:var(--accent); background:var(--accent-wash); font-weight:600; }
/* nav on phones: everything on one scrolling row */
@media (max-width:640px) { .nav .link { font-size:12px; letter-spacing:.04em; } .nav-in { gap:14px; } .brand .rev { display:none; } }
/* long method notes fold away */
.method details.fold > summary { cursor:pointer; color:var(--text-3); font-size:13px; }

/* Phones: the bar is one scrolling row; the opener's numbers fit the band. */
@media (max-width:640px) {
  .nav-in { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:14px; }
  .nav-in::-webkit-scrollbar { display:none; }
  .nav .live { display:none; }
  .op-col { min-width:0; }
  .op-m { font-size:22px; word-break:break-all; }
  .op-n { font-size:56px; }
}