/* ============================================================
   HELP ARCADE — GUIDE ENGINE STYLES v1.2 · 2026-10-10
   v1.2 adds the Check my setup styles (.sc-*, .btn-check,
   .sum-btns, .gate-alt). Supersedes v1.1.
   Shared by every interactive guide. Fonts are self-hosted
   (no CDN); /fonts/ paths resolve once the font files ship.
   ============================================================ */
@font-face{font-family:'Orbitron';src:url('/fonts/orbitron-v400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Orbitron';src:url('/fonts/orbitron-v700.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'Orbitron';src:url('/fonts/orbitron-v900.woff2') format('woff2');font-weight:900;font-display:swap;}
@font-face{font-family:'VT323';src:url('/fonts/vt323-v400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Space Mono';src:url('/fonts/space-mono-v400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Space Mono';src:url('/fonts/space-mono-v700.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'Space Mono';src:url('/fonts/space-mono-i400.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

:root{
  --bg:#080c14; --bg2:#0b0f1c; --panel:#101828;
  --a1:#00ff99; --a2:#c84bff; --a3:#00e5ff; --a4:#ffe033; --a5:#ff5c6a;
  --text:#e8f0ff; --muted:#6a7090;
  --glow-green:0 0 18px rgba(0,255,153,.25);
  --font-display:'Orbitron',system-ui,sans-serif;
  --font-label:'VT323','Courier New',monospace;
  --font-body:'Space Mono','Courier New',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--bg);}
body{background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);font-family:var(--font-body);font-size:14.5px;line-height:1.6;min-height:100vh;}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:9;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);opacity:.5;}
.orb{position:fixed;border-radius:50%;filter:blur(90px);opacity:.15;pointer-events:none;z-index:0;}
.orb-g{width:420px;height:420px;background:var(--a1);top:-120px;right:-120px;}
.orb-p{width:360px;height:360px;background:var(--a2);bottom:-140px;left:-120px;}
.wrap{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:22px 14px 60px;}

header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.sig-dot{width:9px;height:9px;border-radius:50%;background:var(--a1);box-shadow:var(--glow-green);animation:blink 1.6s steps(2) infinite;}
@keyframes blink{50%{opacity:.25;}}
.eyebrow{font-family:var(--font-label);font-size:18px;letter-spacing:.12em;color:var(--a1);text-transform:uppercase;}
.step-eyebrow{font-family:var(--font-label);font-size:17px;letter-spacing:.1em;color:var(--a3);text-transform:uppercase;}
h1{font-family:var(--font-display);font-weight:900;font-size:clamp(20px,4.2vw,28px);letter-spacing:.03em;text-transform:uppercase;margin-top:2px;}
h1 .thin{font-weight:400;color:var(--a3);}
.panel{background:var(--panel);border:1px solid rgba(0,255,153,.22);border-radius:10px;padding:18px 16px;margin-bottom:14px;}

/* --- Buttons --- */
.btn{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--bg);background:var(--a1);border:none;border-radius:6px;padding:13px 26px;cursor:pointer;transition:transform .15s,box-shadow .15s;}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:var(--glow-green);outline:none;}
.btn:focus-visible{outline:2px solid var(--text);outline-offset:2px;}
.btn-ghost{background:transparent;color:var(--a3);border:1px solid rgba(0,229,255,.45);}
.btn-ghost:hover,.btn-ghost:focus-visible{box-shadow:0 0 14px rgba(0,229,255,.25);}
.btn-sm{padding:10px 18px;font-size:12px;}
.linkbtn{background:none;border:none;color:var(--a3);font-family:var(--font-label);font-size:18px;letter-spacing:.05em;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px;}
.linkbtn:focus-visible{outline:2px solid var(--a3);outline-offset:2px;}

/* --- Guided setup questions --- */
.wiz{animation:rise .3s ease both;}
@keyframes rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.wiz-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.dots{display:flex;gap:6px;flex-wrap:wrap;}
.dots span{width:22px;height:5px;border-radius:3px;background:rgba(232,240,255,.15);}
.dots span.done{background:rgba(0,255,153,.5);}
.dots span.on{background:var(--a1);box-shadow:var(--glow-green);}
.wiz h2{font-family:var(--font-display);font-weight:700;font-size:clamp(17px,3.4vw,21px);margin:10px 0 4px;}
.wiz h2:focus{outline:none;}
.wiz .lead{color:rgba(232,240,255,.78);font-size:14px;}
.wiz-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:16px 0 12px;}
.wcard{display:flex;flex-direction:column;align-items:stretch;gap:8px;text-align:left;background:var(--bg2);color:var(--text);border:1px solid rgba(232,240,255,.16);border-radius:10px;padding:12px;cursor:pointer;font-family:var(--font-body);font-size:13.5px;line-height:1.5;transition:transform .15s,border-color .15s,box-shadow .15s;}
.wcard:hover,.wcard:focus-visible{border-color:var(--a1);transform:translateY(-2px);box-shadow:var(--glow-green);outline:none;}
.wcard:focus-visible{outline:2px solid var(--a1);outline-offset:2px;}
.wcard.selected{border-color:var(--a1);box-shadow:var(--glow-green);}
.wicon{display:block;color:var(--a1);background:rgba(0,255,153,.05);border-radius:8px;padding:10px 0;}
.wicon svg{display:block;width:120px;height:80px;margin:0 auto;}
.wtext{display:flex;flex-direction:column;gap:4px;}
.w-title{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--a1);}
.w-sub{color:rgba(232,240,255,.74);font-size:12.5px;}
.helper{border:1px dashed rgba(0,229,255,.35);border-radius:8px;padding:10px 12px;}
.helper summary{cursor:pointer;font-family:var(--font-label);font-size:18px;letter-spacing:.06em;color:var(--a3);}
.helper summary:focus-visible{outline:2px solid var(--a3);outline-offset:2px;}
.helper-body{font-size:13.5px;margin-top:8px;}
.helper-body p{margin-bottom:8px;}
.helper-body ul{margin:4px 0 8px 18px;}
.helper-body li{margin-bottom:4px;}
.wiz-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap;}

/* --- Setup summary + direct controls --- */
.sum-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.sum-title{font-family:var(--font-display);font-weight:700;font-size:16px;margin:4px 0 8px;}
.sum-title:focus{outline:none;}
.pills{display:flex;gap:8px;flex-wrap:wrap;}
.pill{font-family:var(--font-label);font-size:17px;letter-spacing:.05em;color:var(--text);border:1px solid rgba(0,255,153,.35);background:rgba(0,255,153,.06);border-radius:999px;padding:1px 12px;}
.quick{margin-top:14px;border-top:1px dashed rgba(232,240,255,.12);padding-top:10px;}
.quick summary{cursor:pointer;font-family:var(--font-label);font-size:17px;letter-spacing:.06em;color:var(--muted);}
.quick summary:focus-visible{outline:2px solid var(--a1);outline-offset:2px;}
.controls{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.ctl-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ctl-label{font-family:var(--font-label);font-size:17px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;min-width:110px;}
.chip{font-family:var(--font-display);font-weight:700;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text);background:var(--bg2);border:1px solid rgba(232,240,255,.18);border-radius:999px;padding:7px 14px;cursor:pointer;transition:border-color .15s,box-shadow .15s,color .15s;}
.chip:hover,.chip:focus-visible{border-color:var(--a1);outline:none;}
.chip:focus-visible{outline:2px solid var(--a1);outline-offset:2px;}
.chip[aria-pressed="true"]{border-color:var(--a1);color:var(--a1);box-shadow:var(--glow-green);}

/* --- View tabs --- */
.tabs{display:flex;gap:8px;margin-bottom:10px;}
.tab{flex:1;font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--bg2);color:var(--muted);border:1px solid rgba(232,240,255,.14);border-radius:8px;padding:10px 8px;cursor:pointer;}
.tab[aria-selected="true"]{color:var(--a1);border-color:var(--a1);box-shadow:var(--glow-green);}
.tab:focus-visible{outline:2px solid var(--a1);outline-offset:2px;}

/* --- Scene (diagram) --- */
.scene-hint{font-family:var(--font-label);font-size:17px;color:var(--a3);letter-spacing:.06em;text-align:center;margin:2px 0 8px;}
.scene{width:100%;height:auto;display:block;touch-action:manipulation;}
.scene text{font-family:var(--font-label);letter-spacing:.05em;fill:var(--text);}
.scene .dev-name{font-size:16px;fill:var(--a1);}
.scene .port-name{font-size:12px;fill:var(--text);fill-opacity:.72;}
.scene .panel-tag{font-size:10px;fill:var(--muted);letter-spacing:.14em;}
.scene .spk-tag{font-size:15px;fill:var(--a1);}
.scene .cab-label{font-size:14px;}
.scene .code{font-size:14px;fill:var(--a1);}
.scene .wire-label{font-size:13px;fill:var(--text);fill-opacity:.85;}
.scene .group-label{font-size:12px;fill:var(--muted);letter-spacing:.12em;}
.scene .halo{paint-order:stroke;stroke:var(--panel);stroke-width:5px;stroke-linejoin:round;}
.scene .cab{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.scene .flow{fill:none;stroke:#e8f0ff;stroke-opacity:.55;stroke-width:1.2;stroke-linecap:round;stroke-dasharray:1.5 8;animation:flow 1.1s linear infinite;}
@keyframes flow{to{stroke-dashoffset:-9.5;}}
.scene .hit{cursor:pointer;transition:opacity .2s;}
.scene .hit:focus{outline:none;}
.scene .focus-ring{opacity:0;fill:none;}
.scene .hit:focus .focus-ring, .scene .hit.lit .focus-ring{stroke:var(--a4);stroke-width:2;opacity:1;}
.scene .hit:focus .ring-cable, .scene .hit.lit .ring-cable{stroke:rgba(255,224,51,.3);stroke-width:18;}
.scene.focusing .hit{opacity:.22;}
.scene.focusing .hit.lit{opacity:1;}
.scene .pulse{animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{50%{opacity:.45;}}

/* --- Legend --- */
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:12px;padding-top:10px;border-top:1px dashed rgba(232,240,255,.12);}
.legend:empty{display:none;}
.legend-title{width:100%;font-family:var(--font-label);font-size:16px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;}
.lg{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(232,240,255,.82);}
.lg svg{width:44px;height:14px;flex:0 0 auto;overflow:visible;}

/* --- Detail / step panel --- */
.detail{border-color:rgba(0,229,255,.35);}
.detail h2{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--a3);margin:2px 0 8px;}
.detail h2:focus{outline:none;}
.detail h3{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--a1);margin:12px 0 6px;}
.detail p{margin-bottom:9px;}
.muted{color:var(--muted);font-size:13px;}
.check{list-style:none;}
.check li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed rgba(232,240,255,.12);}
.check li:last-child{border-bottom:none;}
.check .tick{flex:0 0 auto;width:20px;height:20px;border:2px solid var(--a1);border-radius:4px;display:grid;place-items:center;font-family:var(--font-label);color:var(--a1);font-size:15px;margin-top:2px;}
.adapter{border:1px dashed rgba(200,75,255,.5);border-radius:8px;padding:10px 12px;margin:8px 0;font-size:13px;}
.adapter .a-name{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--a2);display:block;margin-bottom:3px;}
.routeout{border-left:3px solid var(--a5);background:rgba(255,92,106,.06);padding:10px 12px;border-radius:0 8px 8px 0;margin-top:12px;font-size:13px;}
.step-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap;}
.allsteps{margin-top:14px;border-top:1px dashed rgba(232,240,255,.12);padding-top:10px;}
.allsteps summary{cursor:pointer;font-family:var(--font-label);font-size:17px;letter-spacing:.06em;color:var(--muted);}
.allsteps summary:focus-visible{outline:2px solid var(--a1);outline-offset:2px;}
.steplist{list-style:none;margin-top:8px;}
.steplist button{display:flex;gap:10px;align-items:center;width:100%;background:none;border:none;color:var(--muted);font-family:var(--font-body);font-size:13px;text-align:left;padding:6px;border-radius:6px;cursor:pointer;}
.steplist .n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-family:var(--font-label);font-size:15px;}
.steplist button.done{color:rgba(232,240,255,.62);}
.steplist button.cur{color:var(--a1);}
.steplist button:hover,.steplist button:focus-visible{background:rgba(0,255,153,.06);outline:none;}

/* --- Format table (what a connection can carry) --- */
.fmt{width:100%;border-collapse:collapse;margin:8px 0 10px;font-size:13px;}
.fmt th{font-family:var(--font-label);font-size:15px;letter-spacing:.06em;color:var(--muted);text-align:left;font-weight:400;padding:4px 6px;border-bottom:1px solid rgba(232,240,255,.14);}
.fmt td{padding:7px 6px;border-bottom:1px dashed rgba(232,240,255,.1);vertical-align:top;}
.fmt .yes,.fmt .no,.fmt .maybe{font-family:var(--font-label);font-size:17px;white-space:nowrap;}
.fmt .yes{color:var(--a1);}
.fmt .no{color:var(--a5);}
.fmt .maybe{color:var(--a4);}
.fmt .note{display:block;color:var(--muted);font-size:12px;margin-top:2px;}

/* --- Gate --- */
.gate{max-width:560px;margin:7vh auto 0;text-align:center;}
.gate .waveform{display:flex;gap:5px;justify-content:center;margin:24px 0;height:38px;align-items:flex-end;}
.gate .bar{width:7px;background:var(--a1);border-radius:2px;animation:wave 1.1s ease-in-out infinite;}
.gate .bar:nth-child(2n){background:var(--a3);animation-delay:.15s;}
.gate .bar:nth-child(3n){background:var(--a2);animation-delay:.3s;}
@keyframes wave{0%,100%{height:22%;}50%{height:100%;}}
.gate h2{font-family:var(--font-display);font-weight:700;font-size:18px;margin-bottom:10px;}
.gate-notice{font-size:14px;margin:16px 0 20px;}
.gate-notice a{color:var(--a3);}
.fineprint{font-family:var(--font-label);font-size:16px;color:var(--muted);margin-top:20px;letter-spacing:.05em;}

/* --- Check my setup (yellow = "check this", matching the diagram highlight) --- */
.sum-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.btn-check{background:transparent;color:var(--a4);border:1px solid rgba(255,224,51,.55);}
.btn-check:hover,.btn-check:focus-visible{box-shadow:0 0 14px rgba(255,224,51,.28);}
.gate-alt{margin-top:14px;color:var(--a4);}
.gate-alt:focus-visible{outline-color:var(--a4);}
.sc-note{border-left:3px solid var(--a4);background:rgba(255,224,51,.06);border-radius:0 8px 8px 0;padding:8px 12px;margin:12px 0 2px;font-size:13px;}
.sc-eyebrow{color:var(--a4);}
.sc-for{font-family:var(--font-label);font-size:17px;letter-spacing:.05em;color:var(--muted);margin:0 0 2px;}
.detail.sc-mode{border-color:rgba(255,224,51,.5);}
.sc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.sc-help{margin-top:10px;}
.sc-group{font-family:var(--font-label);font-weight:400;font-size:18px;letter-spacing:.08em;color:var(--a4);text-transform:uppercase;margin:18px 0 0;}
.sc-pick .wiz-cards{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
.sc-list .wiz-cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.sc-list .wcard{flex-direction:row;align-items:center;gap:12px;}
.sc-list .wicon{flex:0 0 96px;padding:6px 0;}
.sc-list .wicon svg{width:84px;height:56px;}
.sc-pick .wicon{color:var(--a4);background:rgba(255,224,51,.05);}
.sc-pick .w-title{color:var(--a4);}
.sc-pick .wcard:hover,.sc-pick .wcard:focus-visible{border-color:var(--a4);box-shadow:0 0 18px rgba(255,224,51,.22);}
.sc-pick .wcard:focus-visible{outline-color:var(--a4);}
.sc-links{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:4px 0 2px;}
.sc-link{color:var(--a4);text-align:left;}
.sc-link:focus-visible{outline-color:var(--a4);}
.sc-picks{border-top:1px dashed rgba(255,224,51,.3);margin-top:12px;padding-top:12px;}
.sc-picks-q{font-family:var(--font-label);font-size:18px;letter-spacing:.05em;color:var(--a4);margin-bottom:8px;}
.sc-chips{display:flex;gap:8px;flex-wrap:wrap;}
.sc-chip{border-color:rgba(255,224,51,.4);}
.sc-chip:hover,.sc-chip:focus-visible{border-color:var(--a4);color:var(--a4);}
.sc-chip:focus-visible{outline-color:var(--a4);}

footer{margin-top:30px;font-family:var(--font-label);font-size:16px;color:var(--muted);letter-spacing:.05em;text-align:center;line-height:1.9;}
footer a{color:var(--a3);}
.hidden{display:none !important;}

@media (max-width:560px){
  .wcard{flex-direction:row;align-items:center;gap:12px;}
  .wicon{flex:0 0 96px;padding:6px 0;}
  .wicon svg{width:84px;height:56px;}
  .sum-row .btn{width:100%;}
  .sum-btns{width:100%;}
  .tab{font-size:10.5px;padding:10px 4px;}
}

@media (prefers-reduced-motion: reduce){
  .sig-dot{animation:none;}
  .gate .bar{animation:none;height:60%;}
  .wiz{animation:none;}
  .scene .flow{animation:none;}
  .scene .pulse{animation:none;opacity:1;}
  .chip,.btn,.wcard,.scene .hit{transition:none;}
  .btn:hover,.wcard:hover{transform:none;}
}