/* NoPowerFix tools - calm, light-first design (2026-10-18 redesign). One accent colour, soft surfaces,
   one sticky header with the device switch, underline sub-navigation, smooth page transitions. */
/* Dark PCB theme (2026-10-18): animated board behind everything (assets/pcb-bg.js), dark glass surfaces on top. */
:root {
  --bg: #03100b; --surface: rgba(7, 19, 14, .88); --surface-2: rgba(255, 255, 255, .06); --ink: #e8f1ec; --muted: #98ada4;
  --line: rgba(110, 200, 150, .16); --solid: #081711;
  --brand: #ff6a3d; --brand-ink: #ffffff; --brand-soft: rgba(255, 106, 61, .14); --signal: #39ff8f;
  --ok: #3fd47f; --warn: #e8ad45; --bad: #ff6b55;
  --radius: 16px; --radius-sm: 12px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-up: 0 0 0 1px rgba(57, 255, 143, .22), 0 14px 40px rgba(0, 0, 0, .5);
  --header-bg: rgba(3, 12, 8, .72);
  /* legacy names used by the tools */
  --card: var(--surface); --chip: var(--surface-2); --code: rgba(255, 255, 255, .06);
  color-scheme: dark;
}
.pcb-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--bg); }
.pcb-bg canvas { position: absolute; top: 0; left: 0; }
.pcb-base { filter: blur(.45px) saturate(1.05); }
.pcb-fx { filter: none; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased;
       font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--brand); text-underline-offset: 3px; }
img, svg { max-width: 100%; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.hide { display: none !important; }

/* ---------- header: logo + device switch ---------- */
header.top { position: sticky; top: 0; z-index: 50; background: var(--header-bg); -webkit-backdrop-filter: saturate(180%) blur(14px);
             backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
             padding-top: env(safe-area-inset-top, 0px); view-transition-name: site-header; }
header.top.scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 12px rgba(16, 24, 40, .05); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; }
header .logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; letter-spacing: -.3px;
        color: var(--ink); text-decoration: none; flex: none; }
header .logo .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--brand); display: grid; place-items: center; }
header .logo .mark svg { width: 17px; height: 17px; fill: #fff; }
header .logo b { color: var(--brand); font-weight: 800; }
.seg { display: flex; gap: 2px; padding: 4px; background: var(--surface-2); border-radius: 14px; }
.seg a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px;
         border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap;
         transition: color .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.seg a:hover { color: var(--ink); }
.seg a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); view-transition-name: seg-active; }
.seg a.on svg { stroke: var(--brand); }
.seg svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.seg .s { display: none; }

/* ---------- sub-navigation: underline tabs ---------- */
.subnav { border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { flex: none; position: relative; padding: 14px 0 12px; color: var(--muted); text-decoration: none; font-size: 15px;
            font-weight: 500; scroll-snap-align: center; transition: color .2s; }
.subnav a:hover { color: var(--ink); }
.subnav a.on { color: var(--ink); font-weight: 650; }
.subnav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px;
                      background: var(--brand); view-transition-name: sub-active; }

/* ---------- typography ---------- */
main.wrap { padding-top: 8px; padding-bottom: 24px; }
h1 { font-size: clamp(28px, 4.4vw, 40px); line-height: 1.15; letter-spacing: -.025em; font-weight: 750; margin: 34px 0 10px; }
.lead { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 26px; max-width: 64ch; }
h2 { font-size: 22px; line-height: 1.3; letter-spacing: -.01em; margin: 52px 0 12px; }
h3 { font-size: 17px; line-height: 1.35; margin: 22px 0 6px; }
p, ul, ol { max-width: 70ch; }
.note { font-size: 14px; color: var(--muted); margin: 4px 0 0; }
ul, ol { padding-left: 22px; } li { margin: 6px 0; }
code { background: var(--surface-2); border-radius: 6px; padding: 1px 6px; font-size: .9em; }
.path { background: var(--surface-2); border-radius: 6px; padding: 1px 7px; font-weight: 600; white-space: nowrap; }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.tile { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink);
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.tile strong { font-size: 17px; font-weight: 650; }
.tile span { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.tile:active { transform: translateY(0); }
.testgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.testgrid .card { display: flex; flex-direction: column; gap: 6px; }
.testgrid .card h3 { margin: 0; }
.testgrid .card .btn { margin-top: auto; align-self: flex-start; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 650; background: var(--surface-2); }

/* ---------- buttons & controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px;
       border: 0; border-radius: var(--radius-sm); font: inherit; font-weight: 650; font-size: 15.5px; cursor: pointer;
       background: var(--brand); color: var(--brand-ink); text-decoration: none; transition: filter .15s, transform .1s, background .2s;
       -webkit-tap-highlight-color: transparent; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.98); }
.btn.alt { background: var(--surface-2); color: var(--ink); }
.btn.alt:hover { filter: none; background: color-mix(in srgb, var(--ink) 8%, var(--surface-2)); }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn input { margin: 0 4px 0 0; accent-color: var(--brand); }
.btn:focus-visible, a:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 40%, transparent); outline-offset: 2px; border-radius: 10px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center; margin-top: 14px; }
.dl { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
select { font: inherit; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--line);
         background: var(--surface); color: var(--ink); max-width: 100%; }
textarea { width: 100%; min-height: 120px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px;
           background: var(--bg); color: var(--ink); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
input[type="range"] { accent-color: var(--brand); width: min(260px, 70vw); }
.soon { display: inline-block; vertical-align: middle; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
        color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-radius: 999px; padding: 2px 9px; margin-left: 6px; }
.chip { display: inline-block; background: var(--surface-2); border-radius: 999px; padding: 4px 11px; font-size: 13px; }
.stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.status { margin: 12px 0 0; font-weight: 600; }
.status.ok { color: var(--ok); } .status.bad { color: var(--bad); }

/* ---------- FAQ ---------- */
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; font-weight: 600; padding: 16px 34px 16px 0; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--muted);
                 border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
details > *:not(summary) { margin: 0 0 16px; color: var(--muted); }
.cta { margin: 48px 0 8px; text-align: center; }
.cta p { margin-left: auto; margin-right: auto; }

/* ---------- footer ---------- */
footer { color: var(--muted); font-size: 13.5px; border-top: 1px solid var(--line); margin-top: 64px; padding: 28px 0 calc(36px + env(safe-area-inset-bottom, 0px)); }
footer p { max-width: none; margin: 6px 0; }

/* ---------- panic analyzer ---------- */
.private { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.drop { border: 2px dashed var(--line); border-radius: var(--radius); padding: 26px 18px; text-align: center; transition: border-color .2s, background .2s; }
.drop.over { border-color: var(--brand); background: var(--brand-soft); }
.or { color: var(--muted); font-size: 14px; margin: 16px 0 8px; }
.result { margin-top: 20px; }
.result[hidden] { display: none; }
.device { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.finding { border-left: 3px solid var(--brand); padding: 4px 0 4px 16px; margin: 18px 0; }
.finding h3 { margin: 0 0 8px; }
.part { display: flex; gap: 10px; align-items: baseline; margin: 8px 0; }
.conf { flex: none; font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .5px; border-radius: 6px; padding: 2px 7px; color: #fff; }
.conf.high { background: var(--bad); } .conf.medium { background: var(--warn); } .conf.low { background: #7a828e; }
.excerpt { background: var(--surface-2); border-radius: 10px; padding: 12px; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
           white-space: pre-wrap; word-break: break-word; max-height: 170px; overflow: auto; }
ol.steps li { margin: 10px 0; }

/* ---------- hub + Apple diagnostics ---------- */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0; }
.opt { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 6px; transition: transform .2s, box-shadow .2s; }
.opt:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
.opt span { color: var(--muted); font-size: 14.5px; }
.opt.rec { border: 2px solid var(--brand); }
.badge { align-self: flex-start; background: var(--brand); color: #fff !important; font-size: 11px !important; font-weight: 750; letter-spacing: .4px;
         text-transform: uppercase; border-radius: 999px; padding: 2px 10px; }
.testmenu { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 12px 0 18px; padding-bottom: 2px; }
.testmenu::-webkit-scrollbar { display: none; }
.testmenu a { flex: none; text-decoration: none; font-size: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink);
              border-radius: 999px; padding: 7px 14px; transition: border-color .2s, color .2s; }
.testmenu a:hover { border-color: var(--brand); color: var(--brand); }
.tests { display: grid; gap: 12px; }
.test h3 { margin-top: 0; } .test p { margin: 6px 0; }
.test { scroll-margin-top: 90px; transition: box-shadow .3s, border-color .3s; }
.test:target { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
[id] { scroll-margin-top: 84px; }

.anim { margin: 18px 0; }
.anim svg { width: 100%; max-width: 560px; display: block; margin: 0 auto; }
.anim .body { fill: #2b3240; } .anim .vol, .anim .side { fill: #7a828e; transition: fill .3s; }
.anim .port { fill: #11151c; } .anim .off { fill: #000; opacity: 0; transition: opacity .5s; }
.anim .s { opacity: 0; transition: opacity .5s; } .anim .hint { opacity: 0; transition: opacity .4s; }
.anim .slider { fill: rgba(255,255,255,.15); } .anim .knob { fill: #fff; }
.anim .logo { fill: #fff; } .anim .cta { fill: #0a84ff; }
.anim .tsm { font-size: 8px; fill: #cfd6e2; text-anchor: middle; }
.anim .tmd { font-size: 11px; font-weight: 700; fill: #fff; text-anchor: middle; }
.anim .tmd2 { font-size: 9px; fill: #cfd6e2; text-anchor: middle; }
.anim .tbtn { font-size: 8.5px; font-weight: 700; fill: #fff; text-anchor: middle; }
.anim .tlab { font-size: 11px; fill: var(--muted); font-weight: 600; }
.anim .turl { font-size: 6.2px; fill: #2b3240; text-anchor: middle; }
.anim .arrow { stroke: var(--brand); stroke-width: 3; }
.anim .lscreen { fill: #1d2533; stroke: #3a4352; } .anim .lbase { fill: #7a828e; } .anim .url, .anim .field { fill: #e6eaf0; }
.anim .plug { fill: #c9ced6; } .anim .wire { fill: #c9ced6; }
.anim .cable { transform: translateY(46px); opacity: 0; transition: transform .7s ease, opacity .4s; }
.anim .cablelab { opacity: 0; transition: opacity .4s; }
.anim .laptop { opacity: .22; transition: opacity .5s; }
[data-step="1"] .s1, [data-step="4"] .s4, [data-step="5"] .s5, [data-step="6"] .s5 { opacity: 1; }
[data-step="1"] .knob { animation: knob 2.6s ease-in-out infinite; }
[data-step="2"] .off, [data-step="3"] .off { opacity: 1; }
[data-step="2"] .vol, [data-step="3"] .vol { fill: var(--brand); animation: press 1s ease-in-out infinite; }
[data-step="2"] .hint, [data-step="3"] .hint { opacity: 1; }
[data-step="3"] .cable, [data-step="4"] .cable, [data-step="5"] .cable, [data-step="6"] .cable { transform: none; opacity: 1; }
[data-step="3"] .cablelab, [data-step="4"] .cablelab { opacity: 1; }
[data-step="6"] .laptop { opacity: 1; }
@keyframes knob { 0%, 15% { transform: translateX(0); } 70%, 100% { transform: translateX(58px); } }
@keyframes press { 50% { opacity: .55; } }
.anim .knob, .anim .vol { transform-box: fill-box; }
.anim-steps { padding-left: 22px; margin: 14px 0 6px; }
.anim-steps li { opacity: .45; cursor: pointer; margin: 8px 0; transition: opacity .3s; }
.anim-steps li.on { opacity: 1; }
.anim-ctl { display: flex; gap: 8px; justify-content: center; }
.anim-ctl .btn { min-width: 52px; padding: 0 14px; }

/* ---------- online test widgets ---------- */
.stage { background: #000; border-radius: var(--radius-sm); overflow: hidden; position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; color: #9aa3b2; }
.stage video { width: 100%; height: 100%; object-fit: contain; }
.stage.mirror video { transform: scaleX(-1); }
.meter { height: 14px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.meter > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--ok), #d69e2e 70%, var(--bad)); transition: width .06s linear; }
.kbd { display: grid; gap: 5px; overflow-x: auto; padding: 4px 0 8px; }
.key { flex: 1 0 auto; min-width: 34px; height: 42px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
       display: grid; place-items: center; font-size: 12px; color: var(--muted); user-select: none; padding: 0 5px;
       box-shadow: 0 1px 0 var(--line); transition: background .12s, color .12s, border-color .12s; }
/* keys sit on a grid of quarter-key columns and half-key rows (keyboard.js places them): main | number pad | varies by laptop */
.kgrid { display: grid; grid-auto-rows: 23px; }
.kgrid .key { height: auto; min-width: 0; margin: 0 4px 4px 0; padding: 0; overflow: hidden; white-space: nowrap; font-size: 11px; }
.kgrid .key.sm { font-size: 10px; letter-spacing: -.2px; }
.kgrid .key.half { font-size: 10px; line-height: 1; }
.kgrid .key.opt { opacity: .5; }   /* not on every laptop (or number pad not used yet): counts only once pressed */
.kgrid .key.ph { opacity: .3; }    /* Fn: never reaches the browser */
.kgrid .kgroup { align-self: end; padding-bottom: 4px; font-size: 11px; line-height: 1.15; color: var(--muted); overflow: hidden; }
.key.down { background: var(--brand); color: #fff; border-color: var(--brand); }
.key.done { background: color-mix(in srgb, var(--ok) 18%, var(--surface)); color: var(--ink); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.key.repeat { outline: 2px solid var(--warn); }
.pad { position: relative; height: min(380px, 60vh); border: 2px dashed var(--line); border-radius: var(--radius); touch-action: none; overflow: hidden; background: var(--surface); }
.pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pad .hintc { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; text-align: center; padding: 16px; }
.mbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.mbtn { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--surface); min-width: 112px; text-align: center;
        font-size: 14px; transition: background .2s, border-color .2s; }
.mbtn.hit { background: color-mix(in srgb, var(--ok) 18%, var(--surface)); border-color: var(--ok); }
.fs { position: fixed; inset: 0; z-index: 99; display: none; cursor: none; }
.fs.on { display: block; }
.fs .fshint { position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: rgba(0,0,0,.55);
              color: #fff; padding: 7px 14px; border-radius: 10px; font-size: 13px; transition: opacity .6s; cursor: default; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.swatch { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .bar { min-height: 58px; gap: 10px; }
  header .logo .word { display: none; }
  .seg { flex: 1; }
  .seg a { flex: 1; padding: 0 8px; font-size: 14px; gap: 6px; min-height: 40px; }
  .seg .l { display: none; } .seg .s { display: inline; }
  .subnav .wrap { gap: 22px; mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
                  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); }
  h1 { margin-top: 26px; }
  h2 { margin-top: 42px; font-size: 20px; }
  .lead { font-size: 17px; }
  .card { padding: 18px; }
  .grid, .testgrid { grid-template-columns: 1fr; gap: 12px; }
  .row .btn { flex: 1 1 auto; }
  table { font-size: 14px; }
  th, td { padding: 10px 12px; }
}
@media (max-width: 360px) { .seg svg { display: none; } }

/* ---------- smooth page changes (Chrome/Edge/Safari 18+) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
::view-transition-group(seg-active), ::view-transition-group(sub-active) { animation-duration: .3s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important; transition: none !important; }
}

/* ---------- 2026-10-18 polish: tile icons, open affordance, neutral "coming soon", phone stacking ---------- */
.tile .ico { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-soft); display: grid; place-items: center; margin-bottom: 4px; flex: none; }
.tile .ico svg { width: 22px; height: 22px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile::after { content: "Open \2192"; margin-top: auto; padding-top: 8px; color: var(--brand); font-weight: 600; font-size: 14px;
               transition: transform .2s; transform-origin: left; }
.tile:hover::after { transform: translateX(3px); }
.btn[aria-disabled="true"] { opacity: 1; background: var(--surface-2); color: var(--muted); border: 1px dashed var(--line); }
@media (max-width: 640px) { .options { grid-template-columns: 1fr; } }

/* ---------- dark PCB theme overrides (keep last) ---------- */
header.top.scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 24px rgba(0, 0, 0, .55); }
.seg { background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.seg a.on { background: rgba(255, 255, 255, .10); box-shadow: inset 0 0 0 1px rgba(57, 255, 143, .22); color: var(--ink); }
.subnav { background: rgba(3, 12, 8, .55); }
.btn.alt { background: rgba(255, 255, 255, .08); }
.btn.alt:hover { background: rgba(255, 255, 255, .13); }
.btn[aria-disabled="true"] { background: rgba(255, 255, 255, .04); color: var(--muted); border: 1px dashed var(--line); }
.tile .ico { background: rgba(57, 255, 143, .09); box-shadow: inset 0 0 0 1px rgba(57, 255, 143, .18); }
.tile .ico svg { stroke: var(--signal); }
.tile:hover { border-color: rgba(57, 255, 143, .35); }
th { background: rgba(255, 255, 255, .04); }
textarea { background: rgba(0, 0, 0, .35); }
select { background: var(--solid); }
.key { background: rgba(255, 255, 255, .035); box-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.pad, .mbtn { background: rgba(0, 0, 0, .3); }
.seg a.on svg { stroke: var(--signal); }
header .logo .mark { box-shadow: 0 0 18px rgba(255, 106, 61, .35); }
footer { background: rgba(2, 8, 6, .62); }
.finding { border-left-color: var(--signal); }

/* ======================= v3 (2026-10-18): glass sheet, iOS-glass device tabs with drawings, controller ======================= */
/* header: same blur, a little more see-through so via lights glow faintly behind it */
header.top { background: rgba(4, 14, 10, .42); -webkit-backdrop-filter: saturate(170%) blur(14px); backdrop-filter: saturate(170%) blur(14px); }
.bar { min-height: 74px; }

/* iOS-style glass segmented control; every tab carries a small device drawing that pops on the selected tab */
.seg { gap: 6px; padding: 5px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 24px rgba(0, 0, 0, .25); }
.seg a { position: relative; overflow: visible; min-height: 48px; min-width: 116px; padding: 0 46px 0 14px; justify-content: flex-start;
         border-radius: 13px; color: rgba(232, 241, 236, .82); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
         border: 1px solid rgba(255, 255, 255, .07); box-shadow: none; view-transition-name: none;
         transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .25s, box-shadow .3s, color .2s; }
.seg a .l, .seg a .s { position: relative; z-index: 2; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.seg svg.art { position: absolute; right: 3px; bottom: 4px; width: 44px; height: 30px; fill: none; stroke: none; opacity: .5; z-index: 1;
               transform-origin: 75% 85%; transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .3s, filter .3s; }
.seg .art .a-body { fill: rgba(205, 225, 215, .28); stroke: rgba(230, 245, 238, .55); stroke-width: .8; }
.seg .art .a-screen { fill: rgba(57, 255, 143, .10); stroke: rgba(57, 255, 143, .35); stroke-width: .6; }
.seg .art .a-dark { fill: rgba(0, 0, 0, .6); stroke: none; }
.seg .art .a-glow { fill: none; stroke: rgba(57, 255, 143, .7); stroke-width: 1.2; stroke-linecap: round; }
.seg .art .a-glow-f { fill: rgba(57, 255, 143, .85); stroke: none; }
.seg a:hover { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); }
.seg a:hover svg.art { opacity: .8; transform: scale(1.1); }
.seg a.on { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .07)); border-color: rgba(255, 255, 255, .3);
            transform: translateY(-3px) scale(1.05); view-transition-name: seg-active;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(57, 255, 143, .28), 0 0 22px rgba(57, 255, 143, .12); }
.seg a.on::before { content: ""; position: absolute; inset: 1px 1px 52% 1px; border-radius: 12px 12px 50% 50% / 12px 12px 18px 18px;
                    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); pointer-events: none; z-index: 1; }
.seg a.on svg.art { opacity: 1; transform: scale(1.5) translate(-2px, -3px); filter: drop-shadow(0 0 7px rgba(57, 255, 143, .6)); }
.seg a.on .art .a-body { fill: rgba(235, 248, 240, .5); stroke: #fff; }
.seg a.on .art .a-screen { fill: rgba(57, 255, 143, .3); stroke: rgba(57, 255, 143, .8); }
.seg a:active { transform: scale(.97); }

/* the reading area: one frosted-glass sheet, strong blur so the board barely shows through text */
main.sheet { margin-top: 18px; padding: 6px 30px 34px; border-radius: 26px; background: rgba(3, 11, 8, .76);
             -webkit-backdrop-filter: blur(24px) saturate(115%); backdrop-filter: blur(24px) saturate(115%);
             border: 1px solid rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 80px rgba(0, 0, 0, .45); }
.sheet .card { background: rgba(255, 255, 255, .035); }
.subnav { background: none; border-bottom: 1px solid var(--line); margin: 4px -30px 4px; padding: 0 30px; }
.subnav .sn { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.subnav .sn::-webkit-scrollbar { display: none; }
footer { background: transparent; border-top: 0; margin-top: 24px; }
footer .wrap { background: rgba(3, 11, 8, .6); border-radius: 18px; padding-top: 14px; padding-bottom: 14px; }

/* controller tester */
.ctl-status { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ctl-status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 10px var(--warn); animation: blink 1.4s ease-in-out infinite; }
.ctl-status.ok .dot { background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: none; }
@keyframes blink { 50% { opacity: .35; } }
.ctl-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 22px; }
.ctl-info span { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.ctl-info strong { font-weight: 600; word-break: break-word; }
.batt { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); margin-top: 6px; overflow: hidden; }
.batt i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .4s; } .batt i.low { background: var(--bad); }
.pad-svg { width: 100%; max-width: 580px; display: block; margin: 0 auto; }
.pad-svg .shell { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .18); stroke-width: 1.5; }
.pad-svg .b { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .25); stroke-width: 1.2; transition: fill .08s, stroke .2s; }
.pad-svg .b.ok { fill: rgba(57, 255, 143, .16); stroke: rgba(57, 255, 143, .65); }
.pad-svg .b.on { fill: var(--brand); stroke: #fff; }
.pad-svg .well { fill: rgba(0, 0, 0, .35); stroke: rgba(255, 255, 255, .12); }
.pad-svg .bl { font: 600 13px -apple-system, "Segoe UI", sans-serif; fill: #e3ece8; text-anchor: middle; pointer-events: none; }
.pad-svg .bl.s { font-size: 10.5px; } .pad-svg .bl.xs { font-size: 9px; fill: var(--muted); }
.trig { display: grid; grid-template-columns: auto 1fr auto auto 1fr auto; gap: 10px; align-items: center; margin: 14px 0 6px; font-size: 14px; }
.trig b { min-width: 46px; font-weight: 600; font-size: 13px; }
.btn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 14px; }
.bcell { border: 1px solid var(--line); border-radius: 12px; padding: 8px 6px; text-align: center; background: rgba(255, 255, 255, .03); transition: background .1s, border-color .2s; }
.bcell b { display: block; font-size: 15px; } .bcell span { font-size: 11.5px; color: var(--muted); }
.bcell.ok { background: rgba(57, 255, 143, .1); border-color: rgba(57, 255, 143, .45); }
.bcell.on { background: var(--brand); border-color: var(--brand); } .bcell.on span { color: #fff; }
.bcell.warn { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.sticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.sticks figure { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }
.sticks canvas { width: min(260px, 70vw); height: auto; aspect-ratio: 1; display: block; border-radius: 18px; background: rgba(0, 0, 0, .3); margin-bottom: 8px; }
.sticks strong { color: var(--ink); font-weight: 600; }

@media (max-width: 760px) {
  .bar { min-height: 64px; gap: 8px; }
  header .logo .mark { width: 26px; height: 26px; }
  .seg { flex: 1; gap: 4px; padding: 4px; border-radius: 16px; }
  .seg a { flex: 1; min-width: 0; min-height: 50px; padding: 26px 0 4px; flex-direction: column; justify-content: flex-end; align-items: center;
           font-size: 10.5px; letter-spacing: -.1px; border-radius: 12px; }
  .seg svg.art { right: auto; left: 50%; top: 3px; bottom: auto; width: 34px; height: 23px; margin-left: -17px; transform-origin: 50% 60%; }
  .seg a:hover svg.art { transform: none; }
  .seg a.on { transform: translateY(-2px) scale(1.04); }
  .seg a.on svg.art { transform: scale(1.22) translateY(1px); }
  .seg .l { display: none; } .seg .s { display: inline; }
  main.sheet { margin: 10px 10px 0; padding: 4px 16px 24px; border-radius: 20px; }
  .subnav { margin: 4px -16px 4px; padding: 0 16px; }
  .subnav .sn { gap: 22px; mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
                -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); }
  .trig { grid-template-columns: auto 1fr auto; }
  footer .wrap { margin: 0 10px; }
}
@media (max-width: 360px) { .seg a { font-size: 9.5px; } .seg svg.art { display: block; } }

/* v3.1: selected drawing pops UP out of the button without covering the label; tabs fit on tablets */
.seg a { min-width: 0; padding: 0 52px 0 12px; }
.seg svg.art { right: 6px; width: 40px; height: 28px; transform-origin: 50% 65%; }
.seg a.on svg.art { transform: scale(1.32) translateY(-6px); }
@media (max-width: 1000px) and (min-width: 761px) { header .logo .word { display: none; } }
@media (max-width: 760px) {
  .seg a { padding: 26px 0 4px; }
  .seg svg.art { right: auto; width: 34px; height: 23px; }
  .seg a.on svg.art { transform: scale(1.2) translateY(-3px); }
}

/* ---------- v4 (2026-10-18): tab animations ----------
   The drawing now spans the whole button and only its transform moves: unselected = small closed device at the side,
   selected = device open and grown into a faint glass picture behind the label. html.seg-play (head script, set once
   per section visit) plays the open sequence; reduced-motion users get the final states from the rule further up. */
.seg a { overflow: hidden; transform-origin: 50% 50%; view-transition-name: none;
         --art-small: translate(calc(50% - 26px), 6px) rotate(0deg) scale(.58);
         --art-hover: translate(calc(50% - 30px), 3px) rotate(0deg) scale(.7);
         --art-big:   translate(calc(50% - 34px), 1px) rotate(0deg) scale(.8);
         --art-cover: translate(0px, 0px) rotate(0deg) scale(1.3); }
.seg a.t-controller { --art-small: translate(calc(50% - 26px), 6px) rotate(0deg) scale(.46);
                      --art-cover: translate(0px, 0px) rotate(360deg) scale(1.3); --art-hover: var(--art-cover); }
.seg svg.art { inset: 0; width: 100%; height: 100%; margin: 0; transform-origin: 50% 50%; transform: var(--art-small); opacity: .55;
               transition: transform .65s cubic-bezier(.3, 1.2, .5, 1), opacity .45s, filter .45s; }
.seg a:not(.on):hover svg.art { transform: var(--art-small); opacity: .55; }
.seg a.on { transform: scale(1.08); z-index: 2; view-transition-name: none; }
.seg a.on svg.art { transform: var(--art-cover); opacity: .3; filter: drop-shadow(0 0 4px rgba(57, 255, 143, .45)); }
.seg a .l { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.seg a.on .l { transform: translateX(20px); }

/* moving parts: closed by default, open on hover and on the selected tab */
.seg .art g { transform-box: fill-box; transition: transform .55s cubic-bezier(.3, 1.3, .5, 1); }
.seg .art .lap-lid { transform-origin: 50% 100%; transform: scaleY(.2); }
.seg .art .duo-l { transform: translateX(7.5px); }
.seg .art .duo-r { transform-origin: 0% 50%; transform: translateX(7.5px) scaleX(.001) skewY(0deg); }
.seg .art .flip-all { transform: translateY(-7.5px); }
.seg .art .flip-t { transform-origin: 50% 100%; transform: scaleY(.001) skewX(0deg); }
.seg .art .fb1 { transform-origin: 15% 100%; } .seg .art .fb2 { transform-origin: 80% 100%; }
.seg a.on .art g { transform: none; }

@media (hover: hover) {
  .seg a:not(.on):hover { transform: scale(1.04); }
  .seg a.t-controller:not(.on):hover { transform: scale(1.07); }
  .seg a:not(.on):hover svg.art { transform: var(--art-hover); opacity: .9; }
  .seg a.t-controller:not(.on):hover svg.art { opacity: .42; }
  .seg a:hover .art g { transform: none; }
  .seg a.t-forum:not(.on):hover .fb2 { animation: npf-bub .45s cubic-bezier(.3, 1.6, .5, 1); }
  .seg a.t-controller:not(.on):hover .l { transform: translateX(20px); }
}
.seg a:not(.on):active { transform: scale(.96); }

/* the open sequence: button pops from its centre, device opens, then grows and fades into the button's background */
.seg-play .seg a.on { animation: npf-pop .75s cubic-bezier(.2, .8, .2, 1) backwards; }
.seg-play .seg a.on svg.art { animation: npf-art 1.5s cubic-bezier(.3, 1, .5, 1) backwards; }
.seg-play .seg a.on .l { animation: npf-label 1.5s cubic-bezier(.2, .8, .2, 1) backwards; }
.seg-play .seg a.on .lap-lid { animation: npf-lid .6s .15s cubic-bezier(.3, 1.4, .5, 1) backwards; }
.seg-play .seg a.on .duo-l { animation: npf-duo-l .6s .15s cubic-bezier(.3, 1.2, .5, 1) backwards; }
.seg-play .seg a.on .duo-r { animation: npf-duo-r .7s .15s ease-out backwards; }
.seg-play .seg a.on .flip-all { animation: npf-flip-all .6s .15s cubic-bezier(.3, 1.2, .5, 1) backwards; }
.seg-play .seg a.on .flip-t { animation: npf-flip-t .7s .15s ease-out backwards; }
.seg-play .seg a.on .fb1 { animation: npf-bub .5s .1s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.seg-play .seg a.on .fb2 { animation: npf-bub .5s .4s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.seg-play .seg a.on .a-glow, .seg-play .seg a.on .a-glow-f { animation: npf-glow .4s .6s backwards; }
@keyframes npf-pop { 0% { transform: scale(.88); } 40% { transform: scale(1.17); } 65% { transform: scale(1.04); } }
@keyframes npf-art { 0% { transform: var(--art-small); opacity: .6; } 35%, 55% { transform: var(--art-big); opacity: 1; } }
@keyframes npf-label { 0%, 55% { transform: none; } }
@keyframes npf-lid { from { transform: scaleY(.2); } }
@keyframes npf-duo-l { from { transform: translateX(7.5px); } }
@keyframes npf-duo-r { from { transform: translateX(7.5px) scaleX(.001) skewY(0deg); } 50% { transform: translateX(3.5px) scaleX(.55) skewY(-12deg); } }
@keyframes npf-flip-all { from { transform: translateY(-7.5px); } }
@keyframes npf-flip-t { from { transform: scaleY(.001) skewX(0deg); } 55% { transform: scaleY(.6) skewX(-10deg); } }
@keyframes npf-bub { from { transform: scale(0); } }
@keyframes npf-glow { from { opacity: 0; } }

@media (max-width: 760px) {
  .seg a { --art-small: translate(0px, -11px) rotate(0deg) scale(.52); --art-big: translate(0px, -6px) rotate(0deg) scale(.72);
           --art-cover: translate(0px, 0px) rotate(0deg) scale(1.2); }
  .seg a.t-controller { --art-small: translate(0px, -11px) rotate(0deg) scale(.42); --art-cover: translate(0px, 0px) rotate(360deg) scale(1.2); }
  .seg a.on { transform: scale(1.06); }
  .seg a.on .l { transform: none; }
}

/* ---------- v5 (2026-10-18): crossed-out "No" logo, tabs span the sheet, side rails on wide screens ----------
   Logo story: "No" is struck through in fault-red, "Power" lights up power-good green, "Fix" stays white.
   Rails (>=1400 px): left = section map drawn as a net of test points with read progress; right = the device's
   power-on ladder (tap a stage for "stops here") + bench notes. Same 3 columns in the header, so the tabs sit
   exactly over the sheet. */
header .logo { gap: 10px; font-size: 21px; letter-spacing: -.4px; }
header .logo .mark { width: 34px; height: 34px; border-radius: 10px; background: rgba(57, 255, 143, .08); border: 1px solid rgba(57, 255, 143, .35);
                     box-shadow: 0 0 16px rgba(57, 255, 143, .18), inset 0 1px 0 rgba(255, 255, 255, .12); }
header .logo .mark svg { width: 22px; height: 22px; fill: none; stroke: #39ff8f; stroke-width: 2.8; stroke-linecap: round;
                         filter: drop-shadow(0 0 3px rgba(57, 255, 143, .7)); }
.logo .no { position: relative; display: inline-block; margin-right: 4px; color: rgba(232, 241, 236, .42); font-weight: 700; }
.logo .no .x { position: absolute; left: -3px; top: 14%; width: calc(100% + 6px); height: 76%; overflow: visible; }
.logo .no .x path { fill: none; stroke: #ff5a36; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke;
                    filter: drop-shadow(0 0 3px rgba(255, 90, 54, .65)); }
.logo .pw { color: #39ff8f; text-shadow: 0 0 12px rgba(57, 255, 143, .45); }
.logo .fx { color: #fff; }
.npf-first .logo .x path { stroke-dasharray: 60; animation: npf-x .3s .25s ease-out backwards; }
.npf-first .logo .x path + path { animation-delay: .6s; }
.npf-first .logo .no { animation: npf-no .5s .25s backwards; }
.npf-first .logo .pw { animation: npf-led 1.1s 1s backwards; }
.npf-first .logo .mark svg { animation: npf-mark 1.1s 1s backwards; }
@keyframes npf-x { from { stroke-dashoffset: 60; } }
@keyframes npf-no { from { color: #fff; } }
@keyframes npf-led { 0%, 35%, 50% { color: rgba(232, 241, 236, .35); text-shadow: none; } 25%, 42%, 100% { color: #39ff8f; } }
@keyframes npf-mark { 0%, 35%, 50% { stroke: rgba(232, 241, 236, .35); filter: none; } 25%, 42% { stroke: #39ff8f; } }

/* tabs fill the bar up to the sheet's right edge */
@media (min-width: 761px) {
  .seg { flex: 1; }
  .seg a { flex: 1 1 auto; }
}
@media (min-width: 920px) and (max-width: 1399px) { header .bar { padding-inline: 0; } }
h2[id] { scroll-margin-top: 100px; }

.ask, .rail { display: none; }
@media (min-width: 1400px) {
  header .bar, .frame { max-width: 1480px; display: grid; grid-template-columns: 236px minmax(0, 880px) 236px; column-gap: 24px; justify-content: center; }
  header .logo { justify-self: start; }
  .frame { margin: 0 auto; padding: 0 20px; align-items: start; }
  .frame > main.sheet { max-width: none; width: auto; margin: 18px 0 0; }
  .seg a { flex: 1 1 0; }
  .subnav { display: none; }
  .ask { display: inline-flex; align-items: center; gap: 6px; justify-self: end; min-height: 44px; padding: 0 16px; border-radius: 14px;
         color: #fff; font-weight: 650; font-size: 14px; text-decoration: none; white-space: nowrap;
         background: linear-gradient(180deg, #d24516, #b93a0a);   /* white text >= 4.5:1 (was 2.6:1 on #ff7a4f) */ box-shadow: 0 6px 18px rgba(255, 106, 61, .3), inset 0 1px 0 rgba(255, 255, 255, .3);
         transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
  .ask:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 10px 24px rgba(255, 106, 61, .42), inset 0 1px 0 rgba(255, 255, 255, .3); }
  .rail { display: block; position: sticky; top: 94px; margin-top: 18px; max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain;
          scrollbar-width: none; padding: 18px 16px 16px; border-radius: 22px; background: rgba(3, 11, 8, .6); border: 1px solid rgba(255, 255, 255, .08);
          -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px rgba(0, 0, 0, .35); }
}
.rail-h { margin: 0 0 14px; font: 600 10.5px/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .14em; text-transform: uppercase;
          color: rgba(57, 255, 143, .78); }

/* left: section map = vias joined by a trace; passed ones are powered (green), the current one pings, the trace below it fills as you read */
.tp, .tp-sub { list-style: none; margin: 0; padding: 0; }
.tp > li { position: relative; padding: 0 0 15px 26px; }
.tp > li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%;
                   border: 2px solid rgba(214, 190, 120, .7); background: #03100b; z-index: 1; }
.tp > li::after { content: ""; position: absolute; left: 7px; top: 16px; bottom: -4px; width: 2px; background: rgba(214, 190, 120, .22); }
.tp > li:last-child::after { display: none; }
.tp > li.done::before { border-color: #39ff8f; background: #39ff8f; }
.tp > li.done::after { background: #39ff8f; box-shadow: 0 0 6px rgba(57, 255, 143, .55); }
.tp > li.on::before { border-color: #39ff8f; box-shadow: 0 0 10px rgba(57, 255, 143, .85); animation: npf-ping 2.4s ease-out infinite; }
.tp > li.on::after { background: linear-gradient(#39ff8f calc(var(--p, 0) * 100%), rgba(214, 190, 120, .22) 0); }
@keyframes npf-ping { 0% { box-shadow: 0 0 10px rgba(57, 255, 143, .85), 0 0 0 0 rgba(57, 255, 143, .45); }
                      70%, 100% { box-shadow: 0 0 10px rgba(57, 255, 143, .85), 0 0 0 9px rgba(57, 255, 143, 0); } }
.tp a { display: flex; align-items: baseline; gap: 8px; color: rgba(232, 241, 236, .7); text-decoration: none; }
.tp a:hover .tp-t { color: #fff; }
.tp-n { min-width: 26px; font: 600 10px ui-monospace, "Cascadia Mono", Consolas, monospace; color: rgba(214, 190, 120, .75); }
.tp-t { font-size: 14px; line-height: 1.35; transition: color .2s; }
.tp li.on > a { color: #fff; font-weight: 600; } .tp li.on .tp-n { color: #39ff8f; }
.tp-sub { margin: 8px 0 2px; padding-left: 10px; border-left: 1px dashed rgba(57, 255, 143, .28); }
.tp-sub li { margin: 0 0 7px; }
.tp-sub a { display: block; font-size: 12.5px; line-height: 1.4; color: rgba(232, 241, 236, .55); }
.tp-sub a:hover { color: #fff; } .tp-sub a.on { color: #39ff8f; }

/* right: power-on ladder; a pulse runs down the rail, LEDs light in order when you arrive in a section */
.pwr { position: relative; list-style: none; margin: 0; padding: 0; }
.pwr::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px;
               background: linear-gradient(transparent, #39ff8f, transparent) 0 -60px / 2px 60px no-repeat, rgba(57, 255, 143, .16);
               animation: npf-flow 4.5s linear infinite; }
@keyframes npf-flow { to { background-position: 0 calc(100% + 60px), 0 0; } }
.pwr li { position: relative; margin: 0 0 3px; padding-left: 20px; }
.pwr .led { position: absolute; left: -19px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: #39ff8f;
            box-shadow: 0 0 8px rgba(57, 255, 143, .8); }
.seg-play .pwr .led, .npf-first .pwr .led { animation: npf-led-on .3s calc(.35s + var(--i) * .2s) backwards; }
@keyframes npf-led-on { from { background: #0c2a1c; box-shadow: inset 0 0 0 1px rgba(57, 255, 143, .4); } }
.pwr summary { display: grid; padding: 5px 26px 5px 8px; font-weight: 400; border-radius: 10px; cursor: pointer; list-style: none; transition: background .2s; }
.pwr summary::-webkit-details-marker { display: none; }
.pwr summary:hover, .pwr details[open] summary { background: rgba(255, 255, 255, .05); }
.pwr b { font-size: 13.5px; font-weight: 650; color: #e8f1ec; }
.pwr code { font: 10.5px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; color: rgba(214, 190, 120, .85); background: none; padding: 0; }
.pwr details p { margin: 2px 8px 8px; font-size: 12.5px; line-height: 1.45; color: rgba(232, 241, 236, .78); }
.pwr details p span { color: #ff8a5c; font-weight: 650; }
.rail-cap { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: rgba(232, 241, 236, .5); }

.pwr summary::after { right: 8px; width: 7px; height: 7px; }
@media (max-width: 760px) {
  header .logo .mark { width: 30px; height: 30px; }
  header .logo .mark svg { width: 19px; height: 19px; }
}

/* ---------- v5.1: "Fixed on the bench" feed at the top of the right rail ----------
   Cards share one grid cell (no height jump); the bar under them is the timer: its animationend moves to the
   next card (nav.js), so hover/focus pauses it and reduced motion / hidden rails never rotate. */
.feed { margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.feed .rail-h { display: flex; justify-content: space-between; }
.feed-n { color: rgba(232, 241, 236, .45); letter-spacing: .06em; }
.slides { display: grid; }
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(14px);
         transition: opacity .45s, transform .55s cubic-bezier(.2, .8, .2, 1), visibility 0s .55s; }
.slide.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s .1s, transform .55s .1s cubic-bezier(.2, .8, .2, 1); }
.slide p { margin: 0; }
.sl-k { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; color: #fff; line-height: 1.3; }
.sl-k b { flex: none; font: 700 9.5px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .1em; text-transform: uppercase;
          padding: 4px 6px; border-radius: 6px; color: #03100b; background: #39ff8f; box-shadow: 0 0 10px rgba(57, 255, 143, .45); }
.sl-k b.bn-k { color: #d6be78; background: none; border: 1px dashed rgba(214, 190, 120, .5); box-shadow: none; }
.sl-s { margin-top: 8px !important; font-size: 12.5px; line-height: 1.45; color: rgba(232, 241, 236, .62); }
.sl-f { margin-top: 6px !important; font-size: 12.5px; line-height: 1.5; color: rgba(232, 241, 236, .85); }
.sl-f span { color: #39ff8f; font-weight: 650; }
.sl-a { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600; }
.sl-a.sl-wait { color: rgba(232, 241, 236, .4); font-weight: 500; }
.feed-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.dots { display: flex; gap: 5px; flex-wrap: wrap; }
.dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(232, 241, 236, .25); cursor: pointer; transition: background .2s, transform .2s; }
.dots button.on { background: #39ff8f; transform: scale(1.25); }
.feed-t { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.feed-t i { display: block; height: 100%; width: 100%; background: #39ff8f; transform-origin: 0 50%; transform: scaleX(0); }
.feed.run .feed-t i { animation: npf-feed 7s linear forwards; }
.feed:hover .feed-t i, .feed:focus-within .feed-t i { animation-play-state: paused; }
@keyframes npf-feed { to { transform: scaleX(1); } }
.pwr-h { margin-top: 4px; }

/* ---------- v5.2: real power-on sequences, played as a light running down the rail ----------
   The ol draws its own dim track (background); ::before is the green "powered" fill down to --y and ::after the
   travelling light. nav.js (.pwrbox.live) steps --y from LED to LED and lights each stage; without JS or with
   reduced motion everything shows lit. */
.pwr { --y: 0px; background: linear-gradient(rgba(57, 255, 143, .14), rgba(57, 255, 143, .14)) 6px 12px / 2px calc(100% - 24px) no-repeat; }
.pwr::before { bottom: auto; top: 12px; height: max(0px, calc(var(--y) - 12px)); background: #39ff8f; box-shadow: 0 0 6px rgba(57, 255, 143, .7);
               animation: none; transition: height .7s cubic-bezier(.4, 0, .2, 1); }
.pwrbox:not(.live) .pwr::before { bottom: 12px; height: auto; }
.pwr::after { content: ""; position: absolute; left: 1px; top: 0; width: 12px; height: 12px; border-radius: 50%; z-index: 3; pointer-events: none; opacity: 0;
              background: radial-gradient(circle, #fff 0 22%, #39ff8f 45%, rgba(57, 255, 143, 0) 72%); box-shadow: 0 0 16px 5px rgba(57, 255, 143, .5);
              transform: translateY(calc(var(--y) - 6px)); transition: transform .7s cubic-bezier(.4, 0, .2, 1), opacity .35s; }
.pwr.run::after { opacity: 1; }
.pwrbox.live .pwr .led { background: #0c2a1c; box-shadow: inset 0 0 0 1px rgba(57, 255, 143, .4); animation: none; transition: background .3s, box-shadow .3s; }
.pwrbox.live .pwr li.on .led { background: #39ff8f; box-shadow: 0 0 8px rgba(57, 255, 143, .8); }
.pwrbox.live .pwr li.now .led { animation: npf-led-now .8s ease-out; }
.pwrbox.live .pwr li.now b { color: #39ff8f; text-shadow: 0 0 10px rgba(57, 255, 143, .5); }
@keyframes npf-led-now { from { box-shadow: 0 0 8px rgba(57, 255, 143, .8), 0 0 0 0 rgba(57, 255, 143, .7); }
                         to { box-shadow: 0 0 8px rgba(57, 255, 143, .8), 0 0 0 9px rgba(57, 255, 143, 0); } }
.pwr summary { grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; }
.pwr summary b { grid-column: 1; transition: color .3s, text-shadow .3s; }
.pwr summary em { grid-column: 2; grid-row: 1; align-self: center; font: 600 10px ui-monospace, "Cascadia Mono", Consolas, monospace; font-style: normal;
                  color: rgba(57, 255, 143, .85); white-space: nowrap; transition: color .3s; }
.pwrbox.live .pwr li:not(.on) em { color: rgba(232, 241, 236, .35); }
.pwr summary code { grid-column: 1 / -1; }
.pwr-board { margin: 0 0 8px; font: 10.5px/1.35 ui-monospace, "Cascadia Mono", Consolas, monospace; color: rgba(214, 190, 120, .82); }
.pwr-done { margin: 6px 0 0 20px; font: 600 11px/1.35 ui-monospace, "Cascadia Mono", Consolas, monospace; color: rgba(232, 241, 236, .3);
            transition: color .35s, text-shadow .35s; }
.pwr-done::before { content: "● "; }
.pwr-panel.done .pwr-done, .pwrbox:not(.live) .pwr-done { color: #39ff8f; text-shadow: 0 0 8px rgba(57, 255, 143, .6); }
.pwr-tabs { display: flex; gap: 4px; margin: 0 0 10px; }
.pwr-tabs button { flex: 1; min-width: 0; padding: 5px 2px; font-family: inherit; font-weight: 650; font-size: 10.5px; line-height: 1.2; color: rgba(232, 241, 236, .65); cursor: pointer;
                   background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; transition: background .2s, color .2s; }
.pwr-tabs button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.pwr-tabs button[aria-selected="true"] { color: #03100b; background: #39ff8f; border-color: transparent; box-shadow: 0 0 10px rgba(57, 255, 143, .4); }

/* ---------- v5.3: home - diagnose first, what guessing does to a board, e-waste in numbers ---------- */
.why-h { margin-top: 34px; }
.why-lead { max-width: 70ch; margin: 0 0 14px; color: var(--muted); } .why-lead b { color: var(--ink); }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 8px; }
.why-card, .ew-n { padding: 16px 16px 14px; border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); }
.why-k { display: inline-block; margin-bottom: 8px; padding: 3px 7px; border-radius: 6px; font: 700 10px ui-monospace, "Cascadia Mono", Consolas, monospace;
         letter-spacing: .12em; text-transform: uppercase; color: #03100b; background: #39ff8f; }
.why-card strong { display: block; margin-bottom: 4px; font-size: 15.5px; }
.why-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.harm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: center; }
.harm-fig { margin: 0; padding: 10px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .07); }
.harm-fig svg { display: block; width: 100%; height: auto; }
.hf-board { fill: #0d4a2c; stroke: #1f7a4a; }
.hf-chip { fill: #1b2420; stroke: #5d6b64; } .hf-chip.hot { fill: #3a1f17; stroke: #ff8a5c; }
.hf-cap { fill: #b98a4a; } .hf-balls { stroke: #c9c9c9; stroke-width: 3; stroke-linecap: round; }
.hf-nozzle { fill: #4a4f4c; }
.hf-air { fill: none; stroke: #ff8a5c; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 5; animation: npf-air 1s linear infinite; }
.hf-heat { animation: npf-heat 3s ease-in-out infinite; }
.hf-lift { stroke: #ff5a36; stroke-width: 2.5; stroke-linecap: round; }
.harm-fig text { font: 10px ui-monospace, "Cascadia Mono", Consolas, monospace; fill: rgba(232, 241, 236, .7); }
@keyframes npf-air { to { stroke-dashoffset: -9; } }
@keyframes npf-heat { 50% { opacity: .6; } }
.harm-list { margin: 0; padding: 0; list-style: none; }
.harm-list li { position: relative; margin: 0 0 10px; padding-left: 18px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.harm-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #ff6a3d;
                        box-shadow: 0 0 8px rgba(255, 106, 61, .6); }
.harm-list b { color: var(--ink); }
.src { margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: rgba(232, 241, 236, .5); } .src a { color: rgba(232, 241, 236, .72); }
.ew { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ew-n b { display: block; font-size: 26px; letter-spacing: -.02em; color: #39ff8f; text-shadow: 0 0 14px rgba(57, 255, 143, .35); }
.ew-n span { font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (max-width: 900px) { .why-grid, .harm { grid-template-columns: 1fr; } .ew { grid-template-columns: 1fr 1fr; } }
/* v5.2a: fit the whole sequence beside a laptop-height screen - a stage shows its nets while the light is on it (or
   when opened); the row that loses "now" collapses instantly so the LED positions nav.js reads are already final */
@media (min-width: 1400px) { header .bar, .frame { grid-template-columns: 220px minmax(0, 880px) 272px; } }
.pwrbox.live:not(.still) .pwr code { max-height: 0; opacity: 0; overflow: hidden; }
.pwrbox.live .pwr li.now code, .pwrbox.live .pwr details[open] code { max-height: 3em; opacity: 1; transition: max-height .45s ease, opacity .35s .1s; }
.pwrbox.live .pwr summary { padding-top: 4px; padding-bottom: 4px; }

/* ---------- v6 (2026-10-18): home buttons with sub-menus, left-rail Software & tools, BIOS & EC and Software & tools pages ---------- */
/* home: 8 glass buttons; each shows its sub-menu as test points and pops open over its neighbours on hover/focus */
.hbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 12px; }
.hb { position: relative; height: 182px; }
.hb-in { position: absolute; left: 0; right: 0; top: 0; min-height: 100%; max-height: 182px; overflow: hidden; z-index: 1; box-sizing: border-box;
         padding: 14px 14px 10px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); transform-origin: 50% 0;
         background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)), rgba(6, 20, 14, .94);
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
         transition: max-height .45s cubic-bezier(.2, .8, .2, 1), transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .3s; }
.hb-in::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; pointer-events: none;
                background: linear-gradient(rgba(6, 20, 14, 0), rgba(6, 20, 14, .96)); transition: opacity .3s; }
.hb:hover .hb-in, .hb:focus-within .hb-in { max-height: 420px; z-index: 6; transform: translateY(-3px) scale(1.04); border-color: rgba(57, 255, 143, .45);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(57, 255, 143, .2), 0 0 26px rgba(57, 255, 143, .12); }
.hb:hover .hb-in::after, .hb:focus-within .hb-in::after { opacity: 0; }
.hb:hover .hb-in, .hb:focus-within .hb-in { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)), #07170f; }
.hb-top { position: relative; display: block; min-height: 58px; padding-right: 62px; color: #fff; text-decoration: none; }
.hb-top .art { position: absolute; right: -4px; top: -4px; width: 66px; height: 44px; overflow: visible; fill: none;
               transition: transform .5s cubic-bezier(.3, 1.3, .5, 1), filter .3s; }
.hb:hover .hb-top .art, .hb:focus-within .hb-top .art { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(57, 255, 143, .55)); }
.hb-top .art.spin { transition: transform .9s cubic-bezier(.3, 1.1, .5, 1), filter .3s; }
.hb:hover .hb-top .art.spin, .hb:focus-within .hb-top .art.spin { transform: scale(1.2) rotate(360deg); }
.hb-t { display: block; font-size: 16px; font-weight: 700; }
.hb-d { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.hb-sub { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px dashed rgba(255, 255, 255, .1); }
.hb-sub li { margin: 0; }
.hb-sub a { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 7px; font-size: 13px; color: rgba(232, 241, 236, .75);
            text-decoration: none; transition: background .2s, color .2s; }
.hb-sub a::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid rgba(214, 190, 120, .7); transition: all .2s; }
.hb-sub a:hover { color: #fff; background: rgba(57, 255, 143, .08); }
.hb-sub a:hover::before { border-color: #39ff8f; background: #39ff8f; box-shadow: 0 0 6px #39ff8f; }
.hb-more { display: none; }
.hb .art .a-body { fill: rgba(205, 225, 215, .28); stroke: rgba(230, 245, 238, .6); stroke-width: .8; }
.hb .art .a-screen { fill: rgba(57, 255, 143, .12); stroke: rgba(57, 255, 143, .4); stroke-width: .6; }
.hb .art .a-dark { fill: rgba(0, 0, 0, .6); stroke: none; }
.hb .art .a-glow { fill: none; stroke: rgba(57, 255, 143, .75); stroke-width: 1.2; stroke-linecap: round; }
.hb .art .a-glow-f { fill: rgba(57, 255, 143, .85); stroke: none; }
/* moving parts: closed until the button is hovered - same story as the top tabs */
.hb .art g { transform-box: fill-box; transition: transform .55s cubic-bezier(.3, 1.3, .5, 1); }
.hb .art .lap-lid { transform-origin: 50% 100%; transform: scaleY(.2); }
.hb .art .duo-l { transform: translateX(7.5px); }
.hb .art .duo-r { transform-origin: 0% 50%; transform: translateX(7.5px) scaleX(.001) skewY(0deg); }
.hb .art .flip-all { transform: translateY(-7.5px); }
.hb .art .flip-t { transform-origin: 50% 100%; transform: scaleY(.001) skewX(0deg); }
.hb .art .fb1 { transform-origin: 15% 100%; } .hb .art .fb2 { transform-origin: 80% 100%; transform: scale(.001); }
.hb .art .q { transform-origin: 50% 100%; transform: scale(.6); }
.hb .art .wr { transform-origin: 20% 85%; } .hb .art .sd { transform-origin: 85% 85%; }
.hb:hover .art g, .hb:focus-within .art g { transform: none; }
.hb:hover .art.tl .wr { transform: rotate(-16deg); } .hb:hover .art.tl .sd { transform: rotate(12deg); }
.hb:hover .art.spi .legs { stroke-dasharray: 2 1.5; animation: npf-data .5s linear infinite; }
.hb:hover .art.spi .data { animation: npf-blink .9s steps(2) infinite; }
@keyframes npf-data { to { stroke-dashoffset: -3.5; } }
@keyframes npf-blink { 50% { opacity: .25; } }
@media (max-width: 900px) { .hbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (hover: none) {
  .hb { height: auto; }
  .hb-in { position: relative; max-height: none; }
  .hb-in::after { display: none; }
  .hb-sub li:nth-child(n+4) { display: none; }
  .hb-more { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; }
}

/* left rail: Software & tools as vertical buttons above the section map */
.lt { display: grid; gap: 5px; margin: 0 0 18px; }
.lt-b { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; color: #e8f1ec; text-decoration: none;
        background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); transition: background .2s, border-color .2s, transform .2s; }
.lt-b svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #39ff8f; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lt-b span { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; line-height: 1.25; }
.lt-b small { font-size: 11px; font-weight: 400; color: rgba(232, 241, 236, .5); }
.lt-b:hover { background: rgba(57, 255, 143, .08); border-color: rgba(57, 255, 143, .3); transform: translateX(2px); }
.lt-b.on { background: rgba(57, 255, 143, .1); border-color: rgba(57, 255, 143, .5); }

/* BIOS & EC page */
.bstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 6px 0 8px; }
.bstats div, .bcard, .tgrid a, .dl > div { border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); }
.bstats div { padding: 14px; }
.bstats b { display: block; font-size: 24px; letter-spacing: -.02em; color: #39ff8f; text-shadow: 0 0 14px rgba(57, 255, 143, .35); }
.bstats span { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.bgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bcard { padding: 16px; }
.bcard strong { display: block; margin-bottom: 4px; }
.bcard p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.steps { padding-left: 22px; } .steps li { margin: 0 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { padding: 4px 10px; border-radius: 999px; font-size: 13px; color: #e9e3cf; background: rgba(214, 190, 120, .08); border: 1px solid rgba(214, 190, 120, .3); }
/* Software & tools page */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tgrid a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; text-decoration: none; transition: border-color .2s, background .2s, transform .2s; }
.tgrid a b { font-size: 14.5px; color: #fff; } .tgrid a span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.tgrid a:hover { transform: translateY(-2px); border-color: rgba(57, 255, 143, .45); background: rgba(57, 255, 143, .06); }
.dl { display: grid; gap: 10px; } .dl > div { padding: 14px 16px; }
.dl p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.ft { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 22px; }
.ft h3 { margin: 6px 0 4px; font-size: 14px; color: #39ff8f; }
.ft ul { margin: 0; padding-left: 18px; } .ft li { margin: 0 0 5px; font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (max-width: 760px) { .bstats { grid-template-columns: 1fr 1fr; } .bgrid { grid-template-columns: 1fr; } }

/* ---------- v7 (2026-10-18): meter logo (brand/make_logo.py) ----------
   The meter reads 0, its probes cross out "No", the i of Fix carries a 1 instead of a dot. Full logo inline (so it can
   animate), the meter alone where the header is narrow. First visit: 0 blinks, probes swing in, leads draw, the 1 lights. */
header .logo { gap: 0; }
.logo-full { display: block; height: 46px; width: auto; overflow: visible; }
.logo-mark { display: none; height: 40px; width: auto; }
@media (max-width: 1000px) { .logo-full { display: none; } .logo-mark { display: block; } }
@media (max-width: 760px) { .logo-mark { height: 36px; } }
.logo-full .probe-red, .logo-full .probe-blk { transform-box: fill-box; transform-origin: 50% 50%; }
.npf-first .logo-full .lcd0 { animation: npf-lcd .5s steps(2) 3 backwards; }
.npf-first .logo-full .probe-blk { animation: npf-probe-b .8s .2s cubic-bezier(.2, .8, .2, 1) backwards; }
.npf-first .logo-full .probe-red { animation: npf-probe-r .8s .4s cubic-bezier(.2, .8, .2, 1) backwards; }
.npf-first .logo-full .cable-red, .npf-first .logo-full .cable-blk { stroke-dasharray: 420; animation: npf-cable .9s .25s ease-out backwards; }
.npf-first .logo-full .w-one, .npf-first .logo-full .led-on { animation: npf-one 1.1s 1.3s backwards; }
@keyframes npf-lcd { 50% { opacity: .15; } }
@keyframes npf-probe-b { from { transform: translate(-140px, 90px) rotate(-25deg); opacity: 0; } }
@keyframes npf-probe-r { from { transform: translate(140px, 90px) rotate(25deg); opacity: 0; } }
@keyframes npf-cable { from { stroke-dashoffset: 420; } }
@keyframes npf-one { 0%, 30%, 50% { opacity: 0; } 20%, 40%, 100% { opacity: 1; } }

/* ---------- v8 (2026-10-18): phones get the full logo + a ⋮ menu; side panels move under the content below 1400 px ---------- */
.menu-btn { display: none; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
            border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); color: #e8f1ec;
            background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); }
.menu-btn svg { width: 22px; height: 22px; fill: currentColor; }
.menu-btn[aria-expanded="true"] { color: #39ff8f; border-color: rgba(57, 255, 143, .5); background: rgba(57, 255, 143, .14); }
.m-menu { position: absolute; top: calc(100% + 6px); right: 12px; z-index: 60; box-sizing: border-box; width: min(340px, calc(100vw - 24px));
          max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; padding: 12px; border-radius: 18px;
          background: #04100b; border: 1px solid rgba(57, 255, 143, .25); box-shadow: 0 20px 50px rgba(0, 0, 0, .7); }
.mm-h { margin: 4px 6px 8px; font: 600 10.5px ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(57, 255, 143, .78); }
.mm-devs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 12px; }
.mm-devs a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border-radius: 12px; text-decoration: none;
             color: #e8f1ec; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.mm-devs a.on { border-color: rgba(57, 255, 143, .5); background: rgba(57, 255, 143, .1); }
.mm-devs .art { width: 48px; height: 32px; overflow: visible; }
.m-menu .art .a-body { fill: rgba(205, 225, 215, .28); stroke: rgba(230, 245, 238, .6); stroke-width: .8; }
.m-menu .art .a-screen { fill: rgba(57, 255, 143, .12); stroke: rgba(57, 255, 143, .4); stroke-width: .6; }
.m-menu .art .a-dark { fill: rgba(0, 0, 0, .6); stroke: none; }
.m-menu .art .a-glow { fill: none; stroke: rgba(57, 255, 143, .75); stroke-width: 1.2; stroke-linecap: round; }
.m-menu .art .a-glow-f { fill: rgba(57, 255, 143, .85); stroke: none; }
.mm-tools { display: grid; gap: 2px; }
.mm-tools a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: #e8f1ec; text-decoration: none; }
.mm-tools a:hover, .mm-tools a.on { background: rgba(57, 255, 143, .08); }
.mm-ico { flex: none; width: 18px; height: 18px; fill: none; stroke: #39ff8f; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mm-tools span { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.mm-tools small { font-size: 11px; font-weight: 400; color: rgba(232, 241, 236, .5); }
.mm-ask { display: block; margin-top: 12px; padding: 11px; border-radius: 12px; text-align: center; color: #fff; font-weight: 700; text-decoration: none;
          background: linear-gradient(180deg, #d24516, #b93a0a);   /* white text >= 4.5:1 (was 2.6:1 on #ff7a4f) */ }
@media (max-width: 1000px) {
  .seg { display: none; }
  .menu-btn { display: inline-flex; }
  .logo-full { display: block; height: 40px; }
  .logo-mark { display: none; }
  header .bar { justify-content: space-between; }
}
@media (max-width: 380px) { .logo-full { height: 34px; } }
/* below the wide layout the two side panels follow the page: feed + power-on first, then Software & tools + the section map */
@media (max-width: 1399px) {
  .frame { display: flex; flex-direction: column; }
  .frame > main { order: 0; } .rail-r { order: 1; } .rail-l { order: 2; }
  .rail { display: block; position: static; box-sizing: border-box; width: calc(100% - 20px); max-width: 880px; max-height: none; overflow: visible;
          margin: 14px auto 0; padding: 18px 16px 16px; border-radius: 22px; background: rgba(3, 11, 8, .72); border: 1px solid rgba(255, 255, 255, .08);
          -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}

/* =====================================================================================================================
   v9 (2026-10-18) LIGHT THEME "option 3" - body.tl. White glass page, deep / metal black text, glass buttons with a
   centre-out light and green bleeding edges, logo on a white plate; the green animated board stays behind everything.
   ===================================================================================================================== */
.tl { --deep: #0b0b0d; --metal: #1f2329;
      --surface: rgba(255, 255, 255, .92); --surface-2: rgba(0, 0, 0, .045); --ink: #0b0b0d; --muted: #1f2329; --line: rgba(0, 0, 0, .12);
      --solid: #fff; --brand-soft: rgba(255, 106, 61, .12); --header-bg: rgba(255, 255, 255, .74);
      --shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 24px rgba(0, 0, 0, .1);
      --shadow-up: 0 0 0 1px rgba(57, 255, 143, .45), 0 0 18px rgba(57, 255, 143, .35), 0 14px 40px rgba(0, 0, 0, .15); }

/* header: frosted white bar, logo on a white plate, glass tabs */
.tl header.top { background: rgba(255, 255, 255, .74); border-bottom: 1px solid rgba(0, 0, 0, .08); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.tl header .logo { background: #fff; border-radius: 14px; padding: 5px 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
.tl .seg { background: rgba(0, 0, 0, .04); border-color: rgba(0, 0, 0, .08); box-shadow: none; }
.tl .seg a .l, .tl .seg a .s { text-shadow: none; }
.tl header .seg a, .tl header .seg a * { color: var(--deep) !important; }
.tl .seg .art .a-body, .tl .m-menu .art .a-body, .tl .hb .art .a-body { fill: rgba(30, 40, 35, .07); stroke: rgba(30, 40, 35, .5); }
.tl .seg .art .a-screen, .tl .m-menu .art .a-screen, .tl .hb .art .a-screen { fill: rgba(15, 157, 85, .12); stroke: rgba(15, 157, 85, .6); }
.tl .seg .art .a-glow, .tl .m-menu .art .a-glow, .tl .hb .art .a-glow { stroke: #0f9d55; }
.tl .seg .art .a-glow-f, .tl .m-menu .art .a-glow-f, .tl .hb .art .a-glow-f { fill: #0f9d55; }

/* the white page and the side panels: a little see-through, light blur, so the moving via light shows faintly */
.tl main.sheet, .tl .rail { background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .7);
                            -webkit-backdrop-filter: blur(6px) saturate(150%); backdrop-filter: blur(6px) saturate(150%); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.tl .subnav { background: transparent; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.tl footer { background: transparent; } .tl footer .wrap { background: rgba(255, 255, 255, .86); }
.tl footer, .tl footer * { color: var(--metal) !important; }

/* every text deep / metal black (the black video stage and the full-screen screen test keep their own colours) */
.tl main.sheet, .tl main.sheet *:not(.stage):not(.stage *):not(.fs):not(.fs *), .tl .rail, .tl .rail * { color: var(--metal) !important; text-shadow: none !important; }
.tl main.sheet h1, .tl main.sheet h2, .tl main.sheet h3, .tl .hb-t, .tl .why-card strong, .tl .harm-list b, .tl .ew-n b, .tl .sl-k, .tl .pwr b,
.tl .bstats b, .tl .tgrid a b { color: var(--deep) !important; }
.tl main.sheet a:not(.hb-top):not(.btn):not(.card):not(.tile), .tl .rail a.sl-a { text-decoration: underline; text-decoration-color: #ff6a3d; text-underline-offset: 3px; }
.tl .hb-sub a, .tl .tp a, .tl .lt-b, .tl .qa a { text-decoration: none !important; }
.tl .pwr-tabs button[aria-selected="true"], .tl .pwr-tabs button[aria-selected="true"] * { color: #fff !important; }
.tl .harm-fig text { fill: rgba(232, 241, 236, .85); }
.tl .stage, .tl .stage * { color: #e8f1ec; }

/* glass buttons: whiter, green light bleeding at the edges, a white light expanding from the centre on hover / tap */
.tl .hb-in, .tl .lt-b, .tl .seg a, .tl .pwr-tabs button, .tl .card, .tl .tgrid a, .tl .bcard, .tl .bstats div, .tl .why-card, .tl .ew-n, .tl .dl > div {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .9) 46%, rgba(244, 249, 246, .84) 54%, rgba(255, 255, 255, .95) 100%);
  border: 1px solid rgba(57, 255, 143, .55); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(57, 255, 143, .18), 0 0 14px rgba(57, 255, 143, .32), 0 8px 22px rgba(0, 0, 0, .08); }
.tl .hb:hover .hb-in, .tl .hb:focus-within .hb-in, .tl .lt-b:hover, .tl .seg a:hover, .tl .card:hover, .tl .tgrid a:hover {
  border-color: rgba(57, 255, 143, .85); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(57, 255, 143, .35), 0 0 26px rgba(57, 255, 143, .5), 0 22px 50px rgba(0, 0, 0, .16); }
.tl .hb:hover .hb-in, .tl .hb:focus-within .hb-in { background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .97) 46%, rgba(244, 249, 246, .95) 54%, #fff 100%); }
.tl .seg a.on { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15, 157, 85, .55), 0 0 20px rgba(57, 255, 143, .45), 0 8px 20px rgba(0, 0, 0, .14); }
.tl .pwr-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #108649, #0a7440); border-color: #0a7440; }   /* white text >= 4.6:1 */
.tl .hb-in::after { display: none; }
.tl .hb:not(:hover):not(:focus-within) .hb-sub { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.tl .hb-in::before, .tl .lt-b::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, #fff 0 45%, rgba(255, 255, 255, .85) 70%, rgba(57, 255, 143, .18) 100%);
  transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .35s; }
.tl .hb:hover .hb-in::before, .tl .hb:focus-within .hb-in::before, .tl .hb:active .hb-in::before, .tl .lt-b:hover::before, .tl .lt-b:active::before {
  transform: translate(-50%, -50%) scale(70); opacity: 1; }
.tl .lt-b { position: relative; overflow: hidden; } .tl .lt-b > * { position: relative; z-index: 1; }
.tl .hb-top, .tl .hb-sub, .tl .hb-more { position: relative; z-index: 1; }
.tl .hb-sub { border-top-color: rgba(0, 0, 0, .1); } .tl .hb-sub a::before { border-color: #0f9d55; }

/* side panels: dark details turned light */
.tl .feed { border-bottom-color: rgba(0, 0, 0, .08); } .tl .feed-t { background: rgba(0, 0, 0, .08); } .tl .feed-t i { background: #0f9d55; }
.tl .dots button { background: rgba(0, 0, 0, .18); } .tl .dots button.on { background: #0f9d55; }
.tl .tp > li::before { background: #fff; } .tl .tp > li::after { background: rgba(0, 0, 0, .14); }
.tl .tp > li.done::after { background: #0f9d55; } .tl .tp-sub { border-left-color: rgba(15, 157, 85, .4); }
.tl .pwr { background: linear-gradient(rgba(15, 157, 85, .2), rgba(15, 157, 85, .2)) 6px 12px / 2px calc(100% - 24px) no-repeat; }
.tl .pwr summary:hover, .tl .pwr details[open] summary { background: rgba(0, 0, 0, .04); }

/* left panel: Software & tools + Popular tools always; the rest unfolds downwards as the visitor scrolls */
.lt + .rail-h { margin-top: 18px; }
.lt-more { overflow: hidden; max-height: calc(var(--reveal, 0) * 1100px); opacity: calc(.15 + var(--reveal, 0) * .85); transition: max-height .25s ease-out, opacity .25s; }
.lt-more > .rail-h { margin-top: 18px; }
.qa { list-style: none; margin: 0; padding: 0; } .qa li { margin: 0 0 10px; } .qa a { display: block; font-size: 13px; font-weight: 650; }
.qa span { display: block; font-size: 12px; line-height: 1.45; }
.ask-card { padding: 12px; border-radius: 12px; border: 1px solid rgba(57, 255, 143, .55); box-shadow: 0 0 14px rgba(57, 255, 143, .25); }
.ask-card p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; } .ask-card b { display: block; font-size: 12.5px; } .ask-card span { display: block; margin-top: 4px; font-size: 11.5px; }
@media (max-width: 1399px) { .lt-more { max-height: none; opacity: 1; } }

/* phone menu in the light theme */
.tl .m-menu { background: #fff; border-color: rgba(57, 255, 143, .55); box-shadow: 0 0 18px rgba(57, 255, 143, .3), 0 20px 50px rgba(0, 0, 0, .25); }
.tl .m-menu, .tl .m-menu * { color: var(--metal); } .tl .m-menu .mm-h { color: #0b7f45; }
.tl .mm-devs a { background: linear-gradient(180deg, #fff, rgba(244, 249, 246, .9)); border-color: rgba(57, 255, 143, .5); }
.tl .mm-devs a.on { background: rgba(57, 255, 143, .16); }
.tl .mm-ico { stroke: #0f9d55; } .tl .mm-ask, .tl .mm-ask * { color: #fff; }
.tl .menu-btn { background: linear-gradient(180deg, #fff, rgba(244, 249, 246, .9)); border-color: rgba(57, 255, 143, .55); color: var(--deep);
                box-shadow: 0 0 12px rgba(57, 255, 143, .3); }
.menu-btn svg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* phone header: logo in the centre, two-dash menu button on the right */
@media (max-width: 1000px) {
  header .bar { position: relative; justify-content: flex-end; }
  header .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .tl header .logo { padding: 4px 10px; }
  .logo-full { height: 36px; }
}
@media (max-width: 380px) { .logo-full { height: 30px; } }
/* light theme fixes found on the page sweep: form fields white, controller drawing dark-on-light, stick plots keep a dark
   scope-style screen (their drawing is light-on-dark) */
.tl textarea, .tl select, .tl input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) { background: #fff; color: var(--deep); border-color: rgba(0, 0, 0, .16); }
.tl textarea::placeholder { color: #6b7076; }
.tl .pad-svg .shell { fill: rgba(0, 0, 0, .03); stroke: rgba(0, 0, 0, .28); }
.tl .pad-svg .b { fill: rgba(255, 255, 255, .9); stroke: rgba(0, 0, 0, .35); }
.tl .pad-svg .b.ok { fill: rgba(57, 255, 143, .3); stroke: #0f9d55; }
.tl .pad-svg .b.on { fill: var(--brand); stroke: #0b0b0d; }
.tl .pad-svg .well { fill: rgba(0, 0, 0, .07); stroke: rgba(0, 0, 0, .25); }
.tl .pad-svg .bl, .tl .pad-svg .bl.xs { fill: var(--deep); }
.tl .sticks canvas { background: #0b1a12; box-shadow: inset 0 0 0 1px rgba(57, 255, 143, .35), 0 0 14px rgba(57, 255, 143, .25); }

/* ---------- v10 PREVIEW: curved-glass edges (only with "#…edge=curve" or "#…edge=deep" in the address) ----------
   The page and side panels lose their hard outline: the rim fades into the board like a curved display sinking into
   its bezel, with a thin bright highlight where the "glass" bends. */
.edge-curve main.sheet, .edge-curve .rail, .edge-deep main.sheet, .edge-deep .rail { --fe: 22px; --fo: .5; border-color: transparent !important; position: relative;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,var(--fo)), #000 var(--fe), #000 calc(100% - var(--fe)), rgba(0,0,0,var(--fo))),
                      linear-gradient(to bottom, rgba(0,0,0,var(--fo)), #000 var(--fe), #000 calc(100% - var(--fe)), rgba(0,0,0,var(--fo)));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, rgba(0,0,0,var(--fo)), #000 var(--fe), #000 calc(100% - var(--fe)), rgba(0,0,0,var(--fo))),
              linear-gradient(to bottom, rgba(0,0,0,var(--fo)), #000 var(--fe), #000 calc(100% - var(--fe)), rgba(0,0,0,var(--fo)));
  mask-composite: intersect;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 24px rgba(255,255,255,.55); }
.edge-deep main.sheet, .edge-deep .rail { --fe: 44px; --fo: .18; }
/* the bend catching light: a thin bright rim that softens inward */
.edge-curve main.sheet::before, .edge-curve .rail::before, .edge-deep main.sheet::before, .edge-deep .rail::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,0) 16px, rgba(255,255,255,0) calc(100% - 16px), rgba(255,255,255,.75)),
              linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 18px, rgba(255,255,255,0) calc(100% - 18px), rgba(255,255,255,.6)); }
.edge-curve main.sheet > *, .edge-curve .rail > *, .edge-deep main.sheet > *, .edge-deep .rail > * { position: relative; z-index: 1; }
.edge-deep main.sheet, .edge-deep .rail { box-shadow: inset 0 1px 0 #fff, inset 0 0 36px rgba(255,255,255,.7); }

/* logo: the lights running on the brown board (brand/board_scene.py) stay off under reduced motion */
@media (prefers-reduced-motion: reduce) { .logo-full .lp { display: none; } }
/* the logo now brings its own circuit board: no white plate round it, just the shadow, matching the board's corners */
.tl header .logo { background: transparent; padding: 0; border-radius: 4px; }
@media (max-width: 1000px) { .tl header .logo { padding: 0; } }
.nf-row { justify-content: flex-start; }   /* 404 page buttons */

/* motto bus (2026-10-19): the copper trace with the motto's bits, between the menu and the page */
.motto-bus { position: relative; height: 96px; margin: 0 0 -8px; pointer-events: none; z-index: 1; }
.motto-bus canvas { display: block; }
@media (max-width: 640px) { .motto-bus { height: 92px; margin-bottom: -6px; } }

/* responsive fixes 2026-10-19 (found by the 360-2560 px overflow check):
   - in the single-column layout (< 1400 px) the main panel took the width of its widest content (auto margins switch
     off flex stretch), so a non-wrapping row or the drawn keyboard pushed the page wider than the screen on tablets;
   - long file paths in <code> never wrapped on phones. */
@media (max-width: 1399px) {
  .frame > main.sheet { box-sizing: border-box; width: min(880px, calc(100% - 20px)); min-width: 0; }
}
main code { overflow-wrap: anywhere; }
/* keyboard on phones: smaller keys; the number pad and the varies keys sit under the main keys (keyboard.js) */
@media (max-width: 520px) {
  .kgrid { grid-auto-rows: 20px; }
  .kgrid .key { margin: 0 3px 3px 0; font-size: 9px; border-radius: 6px; }
  .kgrid .key.sm, .kgrid .key.half { font-size: 8px; }
}