/* Self-hosted, latin subsets only. Orbitron for display, Share Tech Mono for the
   micro-labels, JetBrains Mono for body and data. All three are SIL OFL 1.1. */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrains-mono-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrains-mono-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:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/jetbrains-mono-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/jetbrains-mono-700-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:'Orbitron';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/orbitron-700-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:'Orbitron';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/orbitron-900-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:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/share-tech-mono-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;}

/* Wheel Time — cyberpunk. See DESIGN.md.
   One rule governs everything here: the chrome is cyberpunk, the viewfinder is not.
   No effect, filter, skew or overlay is applied to the canvas or anything inside it,
   because a 60fps loop whose sampling feeds the smoothness metric cannot afford
   compositing work, and a transformed canvas would break the fixed 960x540 space. */

:root{
  color-scheme: dark;

  /* ---- surfaces ---- */
  --vf:#05070a;
  --ground:#0a0a0f;
  --panel:#12121a;
  --panel-2:#1c1c2e;
  --panel-3:#222235;
  --rule:#2a2a3a;
  --rule-2:#3a3a50;

  /* ---- ink ---- */
  --ink:#e0e0e0;
  --ink-mid:#a8b0be;
  --ink-dim:#8b93a3;

  /* ---- signal ----
     Each hue keeps the meaning it had: pan, tilt, target, tally. The graphic value is
     what the canvas draws with; the -ink value is what text uses. */
  --acc:#00ff88;    --acc-ink:#00ff88;   /* GO / primary / selected */
  --cyan:#00d4ff;   --cyan-ink:#4ce0ff;  /* pan axis */
  --mag:#ff00ff;    --mag-ink:#ff5cff;   /* tilt axis + smoothness */
  --yel:#ffc400;    --yel-ink:#ffd24d;   /* in-drill targets, attention */
  --tally:#ff3366;  --tally-ink:#ff6b8f; /* recording, failure */

  --glow:0 0 5px #00ff88,0 0 18px #00ff8840;
  --glow-mag:0 0 5px #ff00ff,0 0 18px #ff00ff50;
  --glow-cy:0 0 5px #00d4ff,0 0 18px #00d4ff50;

  /* Asymmetric cut: top-left and bottom-right only, never all four. */
  --cut:polygon(0 16px,16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
  --cut-sm:polygon(0 9px,9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);

  --disp:'Orbitron',"Arial Narrow",system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --tech:'Share Tech Mono',ui-monospace,monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px;
  --z-base:0; --z-hud:10; --z-overlay:20; --z-scrim:30; --z-dialog:40; --z-toast:50;
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:120ms; --t:180ms;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,255,136,.18)}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  padding:var(--s3);
  position:relative;
  overflow-x:hidden;
}
/* faint circuit grid — no scanlines */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(0,255,136,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,136,.028) 1px,transparent 1px);background-size:50px 50px}

h1,h2,h3{font-family:var(--disp);text-transform:uppercase;letter-spacing:.05em;margin:0;font-weight:900}
.tnum{font-variant-numeric:tabular-nums}
.shell{max-width:1180px;margin:0 auto;position:relative;z-index:1}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:var(--z-toast);background:var(--acc);
  color:var(--ground);padding:10px 16px;font-family:var(--tech);letter-spacing:.16em;
  text-transform:uppercase;clip-path:var(--cut-sm)}
.skip:focus{left:var(--s3);top:var(--s3)}

:where(button,select,input,textarea,summary,a,[tabindex]):focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;box-shadow:var(--glow)}

/* ============ top bar ============ */
.topbar{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
        border-bottom:1px solid var(--rule);padding-bottom:var(--s3)}
.topbar h1{font-size:23px;line-height:1;letter-spacing:.09em;
  text-shadow:-1px 0 var(--mag),1px 0 var(--cyan)}
.topbar h1.brand{display:flex;align-items:center;gap:11px}
.topbar h1.brand a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:11px}
.brand-mark{width:36px;height:36px;flex:0 0 auto;
  --m-ink:var(--ink); --m-arc:var(--acc); --m-bg:var(--ground)}
.topbar h1.brand a:hover .brand-mark{--m-arc:var(--cyan)}
@media (max-width:520px){ .brand-mark{width:28px;height:28px} .topbar h1{font-size:18px} }
.topbar .sub{font-family:var(--tech);color:var(--ink-dim);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase}
.topbar .spacer{margin-left:auto}
.clock-total{display:flex;align-items:baseline;gap:var(--s2)}
.clock-total .k{font-family:var(--tech);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim)}
.clock-total .v{font-family:var(--disp);font-size:20px;line-height:1;color:var(--acc);
  font-weight:700;text-shadow:0 0 10px #00ff8860;font-variant-numeric:tabular-nums}
.bars{display:flex;height:12px;width:84px;border:1px solid var(--rule);flex:0 0 auto}
.bars i{flex:1}

/* ============ telemetry strip ============ */
.telemetry{display:flex;align-items:stretch;flex-wrap:wrap;border:1px solid var(--rule);
  border-left:3px solid var(--acc);margin-top:var(--s3);background:#0d0d14;overflow:hidden}
.telemetry .head{display:flex;align-items:center;gap:7px;background:var(--acc);color:var(--ground);
  padding:5px 12px;font-family:var(--tech);font-size:10px;letter-spacing:.2em;flex:0 0 auto}
.telemetry .head i{width:6px;height:6px;background:var(--ground);border-radius:50%;
  animation:blink 1.4s step-end infinite;display:block}
.telemetry div:not(.head){padding:5px 14px;border-right:1px solid var(--rule);
  font-family:var(--tech);font-size:10.5px;letter-spacing:.16em;color:var(--ink-dim);white-space:nowrap}
.telemetry div b{color:var(--acc);font-weight:400}
.telemetry div.c b{color:var(--cyan-ink)} .telemetry div.m b{color:var(--mag-ink)}
.telemetry div:last-child{border-right:0;margin-left:auto}
@keyframes blink{50%{opacity:.25}}

/* ============ rig ============ */
.rig{display:grid;grid-template-columns:124px minmax(0,1fr) 124px;gap:var(--s3);
     margin-top:var(--s6);align-items:start}
.tach{background:var(--panel);border:1px solid var(--rule);clip-path:var(--cut-sm);
  padding:var(--s3) var(--s2);text-align:center}
.tach .lbl{font-family:var(--tech);font-size:10px;letter-spacing:.24em;color:var(--ink-dim);
  text-transform:uppercase}
.tach svg{display:block;width:100%;height:auto;margin-top:var(--s2);max-width:84px;margin-inline:auto}
.tach .val{font-family:var(--disp);font-size:14px;font-weight:700;margin-top:var(--s2);
  font-variant-numeric:tabular-nums}
.tach--pan .val{color:var(--cyan-ink)}
.tach--tilt .val{color:var(--mag-ink)}

/* ============ viewfinder — no effects, ever ============ */
.vf{position:relative;background:var(--vf);border:1px solid var(--rule);aspect-ratio:16/9}
.vf canvas{display:block;width:100%;height:100%;background:var(--vf);touch-action:none}
/* HUD corner brackets sit on the frame, outside the drawing area */
.vf::before,.vf::after{content:"";position:absolute;width:16px;height:16px;
  border:1px solid var(--acc);opacity:.85;pointer-events:none;z-index:var(--z-hud)}
.vf::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.vf::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.vf-overlay{position:absolute;inset:0;pointer-events:none;z-index:var(--z-hud);
            display:flex;flex-direction:column;justify-content:space-between;
            padding:var(--s3) var(--s4);font-family:var(--tech);font-size:11px;
            letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase}
.vf-row{display:flex;justify-content:space-between;gap:var(--s3)}
.vf-row span{font-variant-numeric:tabular-nums}
.tally{color:var(--tally-ink);font-weight:600}
.tally.off{color:var(--ink-dim)}
.tally.on::before{content:"";display:inline-block;width:7px;height:7px;
  background:var(--tally);margin-right:7px;animation:blink 1.4s step-end infinite}

.veil{position:absolute;inset:0;z-index:var(--z-overlay);display:grid;place-content:center;
      gap:var(--s3);text-align:center;background:rgba(5,7,10,.93);padding:var(--s5)}
.veil[hidden]{display:none}
.veil .big{font-family:var(--disp);font-size:clamp(22px,3.4vw,32px);letter-spacing:.06em;
  text-transform:uppercase;font-weight:900}
.veil .small{color:var(--ink-mid);font-size:12.5px;max-width:58ch;margin:0 auto;text-wrap:pretty}
.veil kbd{font-family:var(--tech);font-size:11px;background:var(--panel-2);
          border:1px solid var(--rule-2);padding:1px 6px;color:var(--acc)}
.veil .row{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap}
#engage{cursor:pointer}

#report .grade{font-family:var(--disp);font-size:76px;line-height:.9;font-weight:900;
  color:var(--mag);text-shadow:-2px 0 var(--cyan),2px 0 var(--tally),0 0 26px #ff00ff60}
#report .grade.na{font-size:30px;color:var(--ink-mid);text-shadow:none}
#report .lines{color:var(--ink-mid);font-size:12.5px;line-height:2.1;margin:var(--s2) 0 var(--s4)}
#report .lines b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
#report .caveat{color:var(--yel-ink);font-size:11.5px;max-width:56ch;margin:0 auto var(--s3);
                text-wrap:pretty;line-height:1.7}

/* full-screen readouts */
.vf-hud{position:absolute;left:0;right:0;bottom:0;display:none;justify-content:center;
  gap:clamp(18px,4vw,56px);padding:12px 16px;
  background:linear-gradient(to top,rgba(5,7,10,.92),transparent);
  z-index:var(--z-hud);pointer-events:none}
.vf-hud span{display:flex;flex-direction:column;align-items:center;gap:2px}
.vf-hud i{font-style:normal;font-family:var(--tech);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim)}
.vf-hud b{font-family:var(--disp);font-size:clamp(20px,2.4vw,30px);line-height:1;font-weight:900;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.vf:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;border:none;background:#000;
  display:grid;place-items:center}
.vf:fullscreen::before,.vf:fullscreen::after{display:none}
.vf:fullscreen canvas{width:auto;height:auto;max-width:100vw;max-height:100vh;aspect-ratio:16/9}
.vf:fullscreen .vf-overlay{padding:clamp(10px,2vw,26px) clamp(14px,3vw,34px);font-size:13px}
.vf:fullscreen .vf-hud{display:flex}

/* ============ buttons ============ */
button.go{font-family:var(--tech);letter-spacing:.09em;font-size:12px;padding:10px 20px;
  background:transparent;border:2px solid var(--acc);color:var(--acc);cursor:pointer;
  clip-path:var(--cut-sm);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease)}
button.go:hover{background:var(--acc);color:var(--ground);box-shadow:var(--glow)}
button.go.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule-2)}
button.go.ghost:hover{border-color:var(--acc);color:var(--acc);background:transparent;
  box-shadow:var(--glow)}
button.go.danger{border-color:var(--tally);color:var(--tally-ink)}
button.go.danger:hover{background:var(--tally);color:var(--ground);
  box-shadow:0 0 5px var(--tally),0 0 18px #ff336660}
button.go:disabled{opacity:.4;cursor:not-allowed}
.icon-btn{display:grid;place-content:center;width:34px;height:34px;background:var(--panel);
  border:1px solid var(--rule-2);color:var(--ink-mid);cursor:pointer;flex:0 0 auto;
  clip-path:var(--cut-sm);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease)}
.icon-btn:hover{background:var(--panel-2);color:var(--acc);box-shadow:var(--glow)}
.icon-btn svg{width:19px;height:19px}

/* ============ readout strip — deliberately unequal ============ */
.strip{display:grid;grid-template-columns:.85fr 1.35fr .95fr .8fr .8fr;gap:var(--s2);
       margin-top:var(--s3)}
@media (max-width:900px){ .strip{grid-template-columns:repeat(2,minmax(0,1fr))} }
.cell{background:var(--panel);border:1px solid var(--rule);clip-path:var(--cut-sm);
  padding:10px 14px;position:relative}
.cell::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--rule-2)}
.cell .k{font-family:var(--tech);font-size:10px;letter-spacing:.2em;color:var(--ink-dim);
  text-transform:uppercase;display:flex;align-items:center}
.cell .v{font-family:var(--disp);font-size:26px;font-weight:900;line-height:1.15;margin-top:3px;
         font-variant-numeric:tabular-nums}
.cell .v small{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-mid)}
.v.cy{color:var(--acc);text-shadow:0 0 12px #00ff8850}
.cell:has(.v.cy)::after{background:var(--acc)}
.v.mg{color:var(--mag);text-shadow:0 0 14px #ff00ff60}
.cell:has(.v.mg){padding:13px 16px}
.cell:has(.v.mg) .v{font-size:33px}
.cell:has(.v.mg)::after{background:var(--mag);width:44px}
.v.yl{color:var(--yel);text-shadow:0 0 12px #ffc40050}
.cell:has(.v.yl)::after{background:var(--yel)}
#hudCoverage{color:var(--cyan);text-shadow:0 0 12px #00d4ff50}

.info{width:15px;height:15px;border:1px solid var(--rule-2);background:none;color:var(--ink-dim);
  font-family:var(--disp);font-size:10px;line-height:1;cursor:pointer;padding:0;margin-left:6px;
  clip-path:polygon(0 4px,4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%);
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.info:hover{color:var(--acc);border-color:var(--acc);box-shadow:var(--glow)}

/* ============ panel headers ============ */
.panel-head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  background:var(--panel-2);border-bottom:1px solid var(--rule);
  margin:calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s4);
  padding:10px var(--s4) 10px calc(var(--s4) - 3px);border-left:3px solid var(--rule-2);
  position:relative}
.panel-head h2,.panel-head h3{font-family:var(--disp);font-size:16px;letter-spacing:.04em;
  margin:0;text-transform:none;font-weight:700}
.panel-head .meta{margin-left:auto;font-family:var(--tech);font-size:10.5px;letter-spacing:.16em;
  color:var(--ink-dim);text-transform:uppercase;font-variant-numeric:tabular-nums;text-align:right}
.panel-head .meta b{color:var(--ink);font-weight:400}
.panel-head--drill{border-left-color:var(--acc)}
.panel-head--drill h3,.panel-head--drill h2{color:var(--acc)}
.panel-head--progress{border-left-color:var(--mag)}
.panel-head--progress h2{color:var(--mag-ink)}
.panel-head--board{border-left-color:var(--yel)}
.panel-head--board h2{color:var(--yel-ink)}

/* ============ drill card ============ */
.drillcard{border:1px solid var(--rule);background:var(--panel);margin-top:var(--s3);
  padding:var(--s4);display:grid;gap:var(--s3);clip-path:var(--cut)}
.drillcard h3{font-size:18px}
.dc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s3) var(--s6)}
.dc-grid p{margin:0;font-size:13px;line-height:1.75;color:var(--ink-mid);max-width:62ch;text-wrap:pretty}
.dc-grid p b{color:var(--ink);font-weight:500}
.dc-opts{border-top:1px solid var(--rule);padding-top:var(--s3);display:flex;gap:var(--s4);
  flex-wrap:wrap;align-items:flex-end}
.dc-opts .fld{max-width:220px;flex:1 1 180px}
.dc-opts .opt-note{font-size:11px;color:var(--ink-dim);max-width:42ch;line-height:1.6}

/* ============ drill rail — skewed band, level text ============ */
.rail-label{font-family:var(--tech);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);margin-top:var(--s6);margin-bottom:var(--s2);display:block;font-weight:400}
.drills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);
        transform:skewY(-1.1deg);margin-top:var(--s2)}
.drill{background:var(--panel);border:1px solid var(--rule);clip-path:var(--cut-sm);
       color:var(--ink-mid);text-align:left;padding:12px 14px;cursor:pointer;
       font-family:var(--mono);font-size:12px;transform:skewY(1.1deg);
       display:grid;grid-template-columns:auto 1fr;gap:0 var(--s2);align-items:baseline;
       transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
                  transform var(--t-fast) var(--ease)}
.drill:nth-child(even){margin-top:10px}
.drill:hover{border-color:var(--acc);box-shadow:var(--glow);transform:skewY(1.1deg) translateY(-2px)}
.drill .i{font-family:var(--tech);font-size:11px;color:var(--ink-dim)}
.drill .n{font-family:var(--disp);font-size:14px;letter-spacing:.05em;color:var(--ink);
          text-transform:uppercase;font-weight:700}
.drill .d{grid-column:2;font-size:11.5px;line-height:1.5;margin-top:4px;text-wrap:pretty;
          color:var(--ink-dim)}
.drill .best{grid-column:2;font-family:var(--tech);font-size:10.5px;color:var(--ink-dim);
             margin-top:var(--s1);letter-spacing:.1em}
.drill[aria-pressed="true"]{border-color:var(--acc);box-shadow:var(--glow);background:#101a16}
.drill[aria-pressed="true"] .n{color:var(--acc)}
.drill[aria-pressed="true"] .i{color:var(--acc)}
@media (max-width:900px){
  .drills{grid-template-columns:repeat(2,minmax(0,1fr));transform:none}
  .drill{transform:none}
  .drill:hover{transform:translateY(-2px)}
  .drill:nth-child(even){margin-top:0}
}

/* hazard divider */
.hazard{height:8px;margin-top:var(--s6);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:repeating-linear-gradient(-45deg,#00ff8818 0 8px,transparent 8px 16px)}

/* ============ records ============ */
.records{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s6)}
@media (min-width:1080px){ .records{grid-template-columns:1.38fr 1fr} }
.rec{border:1px solid var(--rule);background:var(--panel);padding:var(--s4);min-width:0;
     clip-path:var(--cut)}
.rec .board-head{margin-bottom:var(--s2)}
.rec .board-head .fld{max-width:280px}

/* ============ forms ============ */
.grid-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:var(--s4) var(--s5)}
.fld{display:block}
.fld .k{font-family:var(--tech);font-size:11px;letter-spacing:.18em;color:var(--ink-dim);
        text-transform:uppercase;display:flex;justify-content:space-between;gap:var(--s2);
        margin-bottom:var(--s1)}
.fld .k b{color:var(--acc);font-weight:400;font-variant-numeric:tabular-nums}
.fld .hint{font-size:11px;color:var(--ink-dim);margin-top:var(--s1);line-height:1.6;text-wrap:pretty}
.hint.err{color:var(--tally-ink)}
input[type=range]{width:100%;accent-color:var(--acc)}
select,input[type=text],input[type=number],input[type=email],input[type=password]{
  width:100%;background:#0d0d14;color:var(--acc);border:1px solid var(--rule-2);
  padding:8px var(--s2);font-family:var(--mono);font-size:12.5px;clip-path:var(--cut-sm);outline:none}
select:focus,input:focus,textarea:focus{border-color:var(--acc);box-shadow:var(--glow)}
input[type=checkbox]{accent-color:var(--acc);width:14px;height:14px}
.checks{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}
.checks label{display:flex;gap:6px;align-items:center;color:var(--ink-mid);font-size:12px;cursor:pointer}
.btnrow{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4);
        border-top:1px solid var(--rule);padding-top:var(--s4)}
.field-err{display:block;font-family:var(--tech);font-size:11px;color:var(--tally-ink);
  margin-top:3px;line-height:1.5;letter-spacing:.06em}
.field-err:empty{display:none}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:var(--tally)}

.note{color:var(--ink-mid);font-size:12.5px;line-height:1.85;max-width:70ch;text-wrap:pretty}
.note + .note{margin-top:var(--s3)}
.note b{color:var(--ink);font-weight:500}
.note code{font-family:var(--tech);color:var(--yel-ink);font-size:12px}

/* ============ history / trend ============ */
.hist-head{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s3)}
.hist-head h3{font-size:16px}
.hist-head .meta{font-family:var(--tech);color:var(--ink-dim);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase}
.trend-read{font-size:13px;color:var(--ink-mid);line-height:1.75;margin:0 0 var(--s3);
  max-width:58ch;text-wrap:pretty}
.trend-read b{color:var(--ink);font-weight:500}
.spark{width:100%;height:auto;max-height:230px;display:block;overflow:visible}
.spark-empty{color:var(--ink-mid);font-size:12.5px;padding:var(--s6) 0;text-align:center;text-wrap:pretty}
table.runs,table.board{width:100%;border-collapse:collapse;font-size:12px;
  font-variant-numeric:tabular-nums}
table.runs{margin-top:var(--s4)}
table.runs th,table.runs td,table.board th,table.board td{
  text-align:right;padding:6px var(--s2);border-bottom:1px solid var(--rule)}
table.runs th,table.board th{font-family:var(--tech);color:var(--ink-dim);font-weight:400;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
table.runs td,table.board td{color:var(--ink-dim)}
table.runs th:first-child,table.runs td:first-child{text-align:left}
table.runs td.g{color:var(--ink)}
.table-wrap{overflow-x:auto}
/* `.tw` wraps the reference tables in the content section. It was never defined in the
   previous stylesheet, so those tables could push the page sideways on a narrow screen. */
.tw{overflow-x:auto;margin:var(--s3) 0;border:1px solid var(--rule);background:#0d0d14}
table.board th:nth-child(2),table.board td:nth-child(2){text-align:left;width:100%}
table.board td.rank{color:var(--ink-dim);width:1%}
table.board td.who{color:var(--ink);max-width:0}
.who-wrap{display:flex;align-items:baseline;gap:7px;min-width:0}
button.whoBtn{background:none;border:none;padding:0;font:inherit;color:var(--ink);cursor:pointer;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
button.whoBtn:hover{color:var(--acc);text-decoration:underline}
.youtag{flex:0 0 auto;font-family:var(--tech);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc);border:1px solid var(--acc);padding:0 5px;
  line-height:1.5;white-space:nowrap}
table.board tr.you td{background:#00ff880e;color:var(--ink)}
table.board td.val{color:var(--mag-ink);font-weight:500}

/* ============ dialogs ============ */
dialog.wiz{background:var(--panel);color:var(--ink);border:1px solid var(--acc);
  box-shadow:var(--glow);padding:0;width:min(620px,94vw);font-family:var(--mono);font-size:13px;
  max-height:88vh;overflow-y:auto;overscroll-behavior:contain;clip-path:var(--cut)}
dialog.wiz::backdrop{background:rgba(5,7,10,.9)}
dialog.drawer{width:min(760px,96vw)}
dialog.acct-dlg{width:min(560px,94vw)}
dialog.doc-dlg{width:min(720px,95vw)}
.wiz-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);
          border-bottom:1px solid var(--rule);background:var(--panel-2)}
.wiz-head h2{font-family:var(--disp);font-size:18px;letter-spacing:.05em;text-transform:none}
.wiz-head .step{font-family:var(--tech);color:var(--ink-dim);font-size:10.5px;letter-spacing:.18em;
                text-transform:uppercase;margin-left:auto;font-variant-numeric:tabular-nums}
.wiz-body{padding:var(--s5) var(--s4);min-height:200px}
.wiz-body h3{font-size:16px;color:var(--ink);margin-bottom:var(--s2);text-transform:none}
.wiz-body p{color:var(--ink-mid);margin:0 0 var(--s3);max-width:62ch;text-wrap:pretty}
.wiz-foot{display:flex;gap:var(--s2);padding:var(--s3) var(--s4);border-top:1px solid var(--rule);
          align-items:center;flex-wrap:wrap;background:var(--panel-2)}
.wiz-foot .spacer{margin-left:auto}
.meter{height:10px;background:#0d0d14;border:1px solid var(--rule-2);margin:var(--s3) 0;
       position:relative;overflow:hidden}
.meter i{display:block;height:100%;background:var(--acc);width:100%;box-shadow:var(--glow);
         transform:scaleX(0);transform-origin:left center;
         transition:transform var(--t-fast) linear}
.meter.warn i{background:var(--yel)}
.readback{font-family:var(--tech);font-variant-numeric:tabular-nums;color:var(--ink);
  font-size:12px;line-height:2;letter-spacing:.06em}
.readback b{color:var(--acc);font-weight:400}
.readback .bad{color:var(--tally-ink)}
.axis-bar{display:grid;grid-template-columns:76px 1fr;gap:var(--s2);align-items:center;
          margin-bottom:var(--s1);font-family:var(--tech);font-size:10.5px;color:var(--ink-dim);
          letter-spacing:.14em}
.axis-bar .track{height:8px;background:#0d0d14;border:1px solid var(--rule);position:relative}
.axis-bar .track i{position:absolute;top:0;bottom:0;background:var(--mag);left:50%;width:50%;
  transform-origin:left center;transform:scaleX(0)}
details.adv{margin-top:var(--s4);border:1px solid var(--rule);background:#0d0d14}
details.adv > summary{padding:9px var(--s3);cursor:pointer;font-family:var(--tech);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
details.adv > summary:hover{color:var(--acc)}
details.adv[open] > summary{border-bottom:1px solid var(--rule);color:var(--acc)}
details.adv > *:not(summary){padding:0 var(--s3) var(--s3)}
.drawer-sec{border-top:1px solid var(--rule);padding-top:var(--s4);margin-top:var(--s4)}
.drawer-sec:first-child{border-top:none;padding-top:0;margin-top:0}
.drawer-sec h3{font-family:var(--disp);font-size:17px;margin-bottom:var(--s3);text-transform:none}

dialog.confirm{background:var(--panel);color:var(--ink);border:1px solid var(--tally);
  box-shadow:0 0 5px var(--tally),0 0 18px #ff336640;padding:0;width:min(460px,94vw);
  font-family:var(--mono);font-size:13px;overscroll-behavior:contain;clip-path:var(--cut)}
dialog.confirm::backdrop{background:rgba(5,7,10,.9)}
dialog.confirm h2{font-family:var(--disp);font-size:18px;padding:var(--s4);
  border-bottom:1px solid var(--rule);text-transform:none;background:var(--panel-2)}
dialog.confirm .cbody{padding:var(--s4);color:var(--ink-mid);line-height:1.75}
dialog.confirm .cbody p{margin:0 0 var(--s3);max-width:52ch}
dialog.confirm .cfoot{display:flex;gap:var(--s2);justify-content:flex-end;
  padding:var(--s3) var(--s4);border-top:1px solid var(--rule);flex-wrap:wrap;background:var(--panel-2)}

dialog.card{background:var(--panel);color:var(--ink);border:1px solid var(--acc);
  box-shadow:var(--glow);padding:0;width:min(420px,94vw);font-family:var(--mono);font-size:13px;
  overscroll-behavior:contain;clip-path:var(--cut)}
dialog.card::backdrop{background:rgba(5,7,10,.9)}
.card-head{padding:var(--s4);border-bottom:1px solid var(--rule);display:flex;gap:var(--s3);
  align-items:center;background:var(--panel-2)}
.card-head .avatar{width:44px;height:44px;flex:0 0 auto;display:grid;place-content:center;
  background:var(--acc);color:var(--ground);font-family:var(--disp);font-size:18px;font-weight:900;
  text-transform:uppercase;clip-path:var(--cut-sm)}
.card-head .who{min-width:0}
.card-head .nm{font-family:var(--disp);font-size:19px;letter-spacing:.03em;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-head .handle{font-family:var(--tech);color:var(--ink-dim);font-size:12px;letter-spacing:.1em}
.card-body{padding:var(--s4)}
.card-body .about{color:var(--ink-mid);line-height:1.8;white-space:pre-wrap;
  overflow-wrap:anywhere;max-width:46ch}
.card-body .about.none{color:var(--ink-dim)}
.card-body .ig{display:inline-flex;align-items:center;gap:7px;margin-top:var(--s3);
  color:var(--mag-ink);text-decoration:none;font-size:12.5px;border:1px solid var(--rule-2);
  padding:5px 10px;clip-path:var(--cut-sm);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.card-body .ig:hover{border-color:var(--mag);box-shadow:var(--glow-mag)}
.card-body .ig[hidden]{display:none}
.card-body .ig svg{width:16px;height:16px;flex:0 0 auto}
.card-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:var(--s4)}
.card-stats div{background:var(--panel);padding:var(--s2) var(--s3)}
.card-stats .k{display:block;font-family:var(--tech);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim)}
.card-stats .v{display:block;font-family:var(--disp);font-size:20px;font-weight:700;
  line-height:1.15;margin-top:2px;font-variant-numeric:tabular-nums}
.card-foot{display:flex;justify-content:flex-end;padding:var(--s3) var(--s4);
  border-top:1px solid var(--rule);background:var(--panel-2)}

/* ============ account ============ */
.acct-btn{display:flex;align-items:center;gap:var(--s2);background:var(--panel);
  border:1px solid var(--rule-2);color:var(--ink);padding:4px 12px 4px 5px;cursor:pointer;
  font-family:var(--tech);font-size:12px;letter-spacing:.08em;clip-path:var(--cut-sm);
  transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.acct-btn:hover{background:var(--panel-2);box-shadow:var(--glow)}
.acct-btn .avatar{width:26px;height:26px;display:grid;place-content:center;background:var(--panel-2);
  border:1px solid var(--rule-2);color:var(--acc);font-family:var(--disp);font-size:13px;
  font-weight:700;line-height:1;text-transform:uppercase}
.acct-btn[data-in="true"] .avatar{background:var(--acc);color:var(--ground);border-color:var(--acc)}
.acct-btn-label{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-msg{font-size:11.5px;color:var(--ink-mid);max-width:44ch;line-height:1.5}
.acct-msg.err{color:var(--tally-ink)} .acct-msg.ok{color:var(--acc)}
.prov{display:grid;gap:var(--s2);margin-bottom:var(--s4)}
.prov button{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;
  padding:11px;border:1px solid var(--rule-2);background:#0d0d14;color:var(--ink);
  font-family:var(--tech);font-size:12.5px;letter-spacing:.08em;cursor:pointer;
  clip-path:var(--cut-sm);transition:border-color var(--t-fast) var(--ease),
  box-shadow var(--t-fast) var(--ease)}
.prov button:hover{border-color:var(--acc);box-shadow:var(--glow)}
.prov button svg{width:17px;height:17px;flex:0 0 auto}
.prov button.apple{background:#000;border-color:#333;color:#fff}
.prov button.apple:hover{border-color:var(--ink)}
.sep{display:flex;align-items:center;gap:var(--s3);margin:var(--s4) 0;color:var(--ink-dim);
  font-family:var(--tech);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--rule)}
.acct-form{display:grid;gap:var(--s3)}
.acct-form .fld .k{margin-bottom:3px}
.acct-form textarea{width:100%;background:#0d0d14;color:var(--acc);border:1px solid var(--rule-2);
  padding:8px var(--s2);font-family:var(--mono);font-size:12.5px;line-height:1.6;resize:vertical;
  min-height:74px;clip-path:var(--cut-sm);outline:none}
.acct-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:520px){ .acct-form .row2{grid-template-columns:1fr} }
.linkish{background:none;border:none;color:var(--acc);font-family:var(--tech);font-size:11.5px;
  letter-spacing:.06em;cursor:pointer;padding:0;text-align:left}
.linkish:hover{text-decoration:underline;text-shadow:0 0 8px #00ff8860}
.acct-section{border-top:1px solid var(--rule);margin-top:var(--s5);padding-top:var(--s4)}
.acct-section h3{font-family:var(--disp);font-size:15px;margin-bottom:var(--s2);text-transform:none}
.acct-section .hint{font-size:11px;color:var(--ink-dim);line-height:1.6;display:block;
  margin-bottom:var(--s2);max-width:56ch}
.acct-meta{display:flex;gap:var(--s4);flex-wrap:wrap;font-family:var(--tech);font-size:11.5px;
  color:var(--ink-dim);margin-bottom:var(--s4);letter-spacing:.08em}
.acct-meta b{color:var(--acc);font-weight:400}
.chipset{display:flex;gap:6px;flex-wrap:wrap}
.chipset span{font-family:var(--tech);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--rule-2);color:var(--ink-mid);padding:2px 7px}

/* ============ content section ============ */
.about{border:1px solid var(--rule);background:var(--panel);padding:var(--s4);margin-top:var(--s7);
  clip-path:var(--cut)}
.about h3{font-family:var(--disp);font-size:17px;margin:var(--s6) 0 var(--s3);
  scroll-margin-top:var(--s5);text-transform:none;color:var(--acc)}
.about p{color:var(--ink-mid);font-size:13.5px;line-height:1.85;max-width:70ch;margin:0 0 var(--s3);
  text-wrap:pretty}
.about p strong{color:var(--ink);font-weight:600}
.about a{color:var(--acc)}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s3) var(--s7)}
.about-grid h3{margin-top:0}
table.ref{width:100%;border-collapse:collapse;font-size:12.5px;min-width:460px}
table.ref th,table.ref td{padding:8px var(--s3);border-bottom:1px solid var(--rule);
  text-align:left;vertical-align:top}
table.ref thead th{font-family:var(--tech);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:400;background:var(--panel-2);white-space:nowrap}
table.ref tbody th{color:var(--ink);font-weight:600;white-space:nowrap}
table.ref td{color:var(--ink-mid);line-height:1.7}
table.ref td.ok{color:var(--acc)}
table.ref td.no{color:var(--tally-ink)}
dl.faq{margin:0;max-width:70ch}
dl.faq dt{font-family:var(--disp);font-size:14.5px;letter-spacing:.02em;color:var(--ink);
  margin-top:var(--s4);text-transform:none;font-weight:700}
dl.faq dd{margin:var(--s1) 0 0;color:var(--ink-mid);font-size:13.5px;line-height:1.85;text-wrap:pretty}

/* ============ footer ============ */
.site-foot{margin-top:var(--s7);border-top:1px solid var(--rule);padding-top:var(--s6);
  padding-bottom:var(--s6)}
.foot-grid{display:grid;grid-template-columns:minmax(240px,2fr) repeat(3,minmax(150px,1fr));
  gap:var(--s6) var(--s5)}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }
.foot-brand .bars{display:flex;height:11px;width:98px;border:1px solid var(--rule);
  margin-bottom:var(--s3)}
.foot-brand .bars i{flex:1}
.foot-name{font-family:var(--disp);font-size:20px;letter-spacing:.07em;text-transform:uppercase;
  margin:0 0 var(--s2);font-weight:900}
.foot-desc{font-size:12.5px;line-height:1.75;color:var(--ink-dim);max-width:38ch;margin:0}
.foot-desc strong{color:var(--ink-mid);font-weight:500}
.foot-col h2{font-family:var(--tech);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:400;margin:0 0 var(--s3)}
.foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot-col a,.foot-link{color:var(--ink-mid);text-decoration:none;font-size:12.5px;background:none;
  border:none;padding:0;font-family:var(--mono);cursor:pointer;text-align:left}
.foot-col a:hover,.foot-link:hover{color:var(--acc);text-decoration:underline}
.foot-note{font-size:11.5px;color:var(--ink-dim);line-height:1.6;margin:var(--s3) 0 0;max-width:34ch}
.foot-base{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-top:var(--s6);
  padding-top:var(--s4);border-top:1px solid var(--rule);font-family:var(--tech);font-size:11px;
  color:var(--ink-dim);letter-spacing:.1em;text-transform:uppercase}
.foot-sep{color:var(--rule-2)}

/* ============ policy page ============ */
body.doc-page{padding-bottom:0}
.doc{max-width:72ch}
.doc h2{font-family:var(--disp);font-size:clamp(24px,4vw,32px);margin:var(--s5) 0 var(--s3);
  color:var(--acc);text-shadow:0 0 12px #00ff8840}
.doc h3{font-family:var(--disp);font-size:16px;margin:var(--s6) 0 var(--s2);color:var(--ink);
  text-transform:none}
.doc p,.doc li{color:var(--ink-mid);font-size:13.5px;line-height:1.9;text-wrap:pretty}
.doc p{margin:0 0 var(--s3)}
.doc ul{margin:0 0 var(--s3);padding-left:20px;display:grid;gap:7px}
.doc strong{color:var(--ink);font-weight:600}
.doc a{color:var(--acc)}
.doc code{font-family:var(--tech);font-size:12px;background:var(--panel-2);
  border:1px solid var(--rule);padding:1px 5px;color:var(--yel-ink)}
.doc-date{font-family:var(--tech);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:var(--s5)!important}
dialog.doc-dlg .doc h3:first-of-type{margin-top:0}

/* ============ hardware gate ============ */
#gate{display:none}
@media (max-width:759px){
  .rig,.strip,.drills,.drillcard,.rail-label,.records,.telemetry,.hazard{display:none!important}
  #gate{display:block;border:1px solid var(--rule);background:var(--panel);clip-path:var(--cut);
        padding:var(--s6) var(--s4);margin-top:var(--s4)}
  #gate h2{font-family:var(--disp);font-size:20px;margin-bottom:var(--s3);color:var(--acc)}
}

@media (max-width:1079px) and (min-width:760px){
  .rig{grid-template-columns:1fr 1fr;grid-template-areas:"vf vf" "tach-l tach-r"}
  .rig > .vf{grid-area:vf}
  .rig > .tach--pan{grid-area:tach-l}
  .rig > .tach--tilt{grid-area:tach-r}
  .tach{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s3);
        text-align:left}
  .tach svg{max-width:60px;margin:0}
  .tach .val{margin-top:0;text-align:right}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
                       transition-duration:.001ms!important}
}