/* Layout: left-aligned bench card, 1160px column. Indigo structure, GameCube face-button colors as the only accents
   (A green = act, B red = fault/state, C yellow = trace). */
:root{
  --paper:#EDECF3; --panel:#F8F7FB; --sunk:#E2E0EC; --ink:#1C1938; --muted:#5D5878; --rule:#CFCBE0;
  --indigo:#4A3FA3; --indigo-soft:#DEDAF5; --a:#0A7A5C; --a-ink:#FFFFFF; --b:#C9303A; --c:#B98A06; --c-bright:#E8B91E;
  --scope:#1A1735; --scope-line:#3A3566; --scope-ink:#CFCBF2; --scope-a:#3CCF9E;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --data:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --r:6px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#141228; --panel:#1C1936; --sunk:#100E21; --ink:#ECEAF7; --muted:#A49FC4; --rule:#2F2B52;
  --indigo:#A79EF5; --indigo-soft:#2A2550; --a:#3CCF9E; --a-ink:#06221A; --b:#FF6B73; --c:#F2C94C; --c-bright:#F2C94C;
  --scope:#0D0B1C; --scope-line:#2C2852; --scope-ink:#CFCBF2; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#141228; --panel:#1C1936; --sunk:#100E21; --ink:#ECEAF7; --muted:#A49FC4; --rule:#2F2B52;
  --indigo:#A79EF5; --indigo-soft:#2A2550; --a:#3CCF9E; --a-ink:#06221A; --b:#FF6B73; --c:#F2C94C; --c-bright:#F2C94C;
  --scope:#0D0B1C; --scope-line:#2C2852; --scope-ink:#CFCBF2; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper);scroll-padding-top:calc(var(--head-h,76px) + env(safe-area-inset-top,0px) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--indigo);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--c-bright);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:30;padding:10px 16px;border-radius:8px;background:var(--ink);color:var(--paper);font-weight:700;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}
main:focus{outline:none}
.wrap{max-width:1160px;margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.98;letter-spacing:.005em;margin:0;text-wrap:balance}
h1{font-size:clamp(46px,7.4vw,92px)}
h2{font-size:clamp(34px,4.6vw,54px)}
h3{font-size:26px;line-height:1.05}
p{margin:0}
.lede{font-size:clamp(18px,1.6vw,20px);color:var(--muted);max-width:56ch}
.muted{color:var(--muted)}
.num,.data{font-family:var(--data);font-variant-numeric:tabular-nums}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:64px}
.mark{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:800 26px/1 var(--display);flex-shrink:0}
.mark svg{width:30px;height:30px}
.nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none;min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;padding:8px 12px;border-radius:999px;color:var(--muted);text-decoration:none;font-weight:700;font-size:15px}
.nav a:hover{color:var(--ink);background:var(--sunk)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--indigo-soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;font:700 16px/1 var(--body);text-decoration:none;cursor:pointer;border:2px solid transparent;transition:transform .12s}
.btn:active{transform:translateY(1px)}
.btn.go{background:var(--a);color:var(--a-ink)}
.btn.go:hover{filter:brightness(1.06)}
.btn.line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn.line:hover{background:var(--ink);color:var(--paper)}
.btn.small{min-height:38px;padding:0 14px;font-size:14px}
.top .btn{flex-shrink:0}
.nav .short{display:none}
/* Below ~1000px the five links don't fit beside the mark and button, so the nav gets its own row.
   It wraps instead of scrolling, so no link is ever hidden off the edge. */
@media (max-width:1000px){
  .top .wrap{flex-wrap:wrap;gap:6px 12px;padding-block:10px}
  .top .btn{margin-left:auto}
  .nav{order:3;width:100%;margin-left:-8px;flex-wrap:wrap;overflow:visible;row-gap:2px}
}
@media (max-width:560px){
  .nav{gap:2px;margin-left:-6px}
  .nav a{padding:8px 8px;font-size:14px}
  .nav .full{display:none}
  .nav .short{display:inline}
}
@media (max-width:400px){
  .mark{font-size:22px;gap:8px}
  .mark svg{width:26px;height:26px}
  .top .btn.small{padding:0 12px}
  .nav{gap:0}
  .nav a{padding-inline:6px}
}
@media (max-width:359px){
  .mark{font-size:19px;gap:6px}
  .mark svg{width:22px;height:22px}
  .top .btn.small{padding:0 10px;font-size:13px}
  .nav a{padding-inline:4px;font-size:13px}
}

/* sections */
main{display:block}
section{padding-block:clamp(56px,8vw,104px)}
section+section{border-top:1px solid var(--rule)}
.head{display:grid;gap:14px;margin-bottom:36px;max-width:760px}

/* hero */
.hero{padding-block:clamp(36px,6vw,72px) clamp(56px,8vw,96px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero-copy{display:grid;gap:22px;min-width:0}
.where{font-weight:700;color:var(--indigo)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:880px){.hero .wrap{grid-template-columns:1fr}}

/* scope (stick gate display) */
.scope{background:var(--scope);border-radius:14px;padding:18px;color:var(--scope-ink);box-shadow:0 1px 0 var(--rule),0 24px 48px -28px rgba(20,16,60,.55);min-width:0}
.scope canvas{display:block;width:100%;height:auto;aspect-ratio:1/1;max-width:100%}
.scope-bar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:13px/1.4 var(--data);font-variant-numeric:tabular-nums;color:var(--scope-ink);opacity:.92}
.scope-bar b{color:#fff;font-weight:600}
.dotlive{display:inline-flex;align-items:center;gap:7px}
.dotlive i{width:9px;height:9px;border-radius:50%;background:#6E6890}
.dotlive.on i{background:#3CCF9E;box-shadow:0 0 8px #3CCF9E}
.scope-cap{margin-top:12px;font-size:14px;color:#A49FC4}
.scope-cap a{color:#CFCBF2}

/* four-up facts */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.fact{display:grid;gap:10px;align-content:start;padding-top:18px;border-top:3px solid var(--ink);min-width:0}
.fact p{color:var(--muted);font-size:16px}
@media (max-width:980px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.facts{grid-template-columns:1fr}}

/* split band */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.split>*{min-width:0}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.photo{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:clamp(18px,4vw,40px);display:grid;place-items:center}
.photo img{max-height:360px;width:auto}
/* 3D controller viewer (home, "Every build includes") */
.viewer{margin:0;display:grid;gap:12px;min-width:0}
.viewer-stage{position:relative;background:radial-gradient(120% 90% at 50% 38%,var(--scope-line) 0%,var(--scope) 62%);border-radius:14px;aspect-ratio:4/3;max-width:100%;overflow:hidden;box-shadow:0 1px 0 var(--rule),0 24px 48px -28px rgba(20,16,60,.55)}
.viewer-stage canvas{display:block;width:100%;height:100%;cursor:grab}
.viewer-stage canvas.part{cursor:pointer}
.viewer-stage canvas.dragging{cursor:grabbing}
/* fallback photo sits above the status line (two lines on phones), not under it */
.viewer-stage img{position:absolute;inset:14px 0 64px;margin:auto;max-height:calc(100% - 78px);max-width:calc(100% - 32px);width:auto;height:auto;object-fit:contain}
.viewer-status{position:absolute;inset:auto 0 14px;text-align:center;font:500 13px/1.4 var(--data);color:var(--scope-ink)}
.viewer-reset{position:absolute;top:12px;right:12px;font:700 13px/1 var(--body);color:var(--scope-ink);background:rgba(13,11,28,.55);border:1px solid var(--scope-line);border-radius:999px;padding:8px 12px;cursor:pointer}
.viewer-reset:hover{border-color:var(--scope-ink)}
.viewer-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sw{width:34px;height:34px;border-radius:50%;padding:0;border:2px solid var(--rule);background:var(--c);cursor:pointer}
.sw[aria-checked="true"]{border-color:var(--a);box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 30%,transparent)}
.sw-custom{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);cursor:pointer}
.sw-custom input{width:34px;height:34px;padding:0;border:2px solid var(--rule);border-radius:50%;background:none;cursor:pointer}
.viewer-color{font:500 14px/1.4 var(--data);color:var(--muted)}
.viewer figcaption{font-size:15px;color:var(--muted)}
.viewer-credit{font-size:13px;color:var(--muted)}
.license{border:1px solid var(--rule);border-radius:10px;background:var(--panel)}
.license summary{cursor:pointer;padding:10px 14px;font-weight:700;font-size:15px}
.license-body{display:grid;gap:12px;padding:0 14px 14px;font-size:15px;color:var(--muted)}
.license-body .spec{grid-template-columns:minmax(96px,140px) minmax(0,1fr)}
.license-body .spec dt,.license-body .spec dd{padding:8px 0}
.license-body .spec dt{color:var(--ink)}

/* spec list */
.spec{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);border-top:1px solid var(--rule);margin:0}
.spec dt,.spec dd{padding:14px 0;border-bottom:1px solid var(--rule);margin:0}
.spec dt{font-weight:700}
.spec dd{color:var(--muted)}
@media (max-width:520px){.spec{grid-template-columns:1fr}.spec dt{border-bottom:0;padding-bottom:0}}

/* steps (real sequence) */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;display:grid;gap:8px;align-content:start;min-width:0}
.steps li::before{content:counter(s);font:800 44px/1 var(--display);color:var(--indigo)}
.steps p{color:var(--muted);font-size:16px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* builds */
.builds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:980px){.builds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.builds{grid-template-columns:1fr}}
.build{background:var(--panel);border:1px solid var(--rule);border-radius:14px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;min-width:0}
/* every card's photo area is the same 4:3 box; the image scales inside it and never stretches the card */
.build .pic{background:var(--sunk);aspect-ratio:4/3;display:grid;place-items:center;padding:20px;position:relative;min-width:0;min-height:0;overflow:hidden}
.build .pic img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* 3D model placeholder (sample listings) */
.build .pic.has-model{background:radial-gradient(120% 90% at 50% 38%,var(--scope-line) 0%,var(--scope) 62%)}
.build .pic canvas.card-model{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.build .pic canvas.card-model:active{cursor:grabbing}
.build .pic.model-on img{visibility:hidden}
.build .pic .chip.sample{z-index:1}
.build .pic.pic-failed{background:var(--scope)}
.nopic{display:grid;gap:10px;justify-items:center;text-align:center;color:var(--scope-ink)}
.nopic p{margin:0;font:700 13px/1.2 var(--data);letter-spacing:.08em;text-transform:uppercase;color:var(--scope-ink);opacity:.8}
.nopic a{color:var(--scope-ink);font-weight:700;font-size:16px;text-underline-offset:3px}
.nopic::before{content:"";width:46px;height:46px;border:2px dashed var(--scope-line);border-radius:50%;margin-bottom:4px}
.build .body{padding:20px;display:grid;gap:12px;align-content:start}
.build .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.price{white-space:nowrap;font:700 18px var(--data);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--indigo-soft);color:var(--ink)}
.chip.ok{background:color-mix(in srgb,var(--a) 18%,transparent);color:var(--ink)}
.chip.sample{position:absolute;top:12px;left:12px;background:var(--c-bright);color:#1C1938}
.feat{margin:0;padding-left:18px;color:var(--muted);font-size:15px;display:grid;gap:4px}
.buy{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.build:not(.wide) .body{display:flex;flex-direction:column;gap:12px}
.build:not(.wide) .buy{margin-top:auto;padding-top:4px}
/* home: ready to ship (one wide card per in-stock listing) */
.ready{display:grid;gap:20px}
.build.wide{grid-template-rows:none;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.build.wide .pic{aspect-ratio:auto;min-height:260px}
.build.wide .pic img{max-height:320px}
.build.wide .body{padding:clamp(20px,3vw,32px);gap:14px;align-content:center}
.build.wide h3{font-size:clamp(28px,3vw,36px)}
.build.wide .price{font-size:22px}
.build.wide .feat{font-size:16px}
.ready-more{margin-top:18px;font-weight:700}
@media (max-width:720px){.build.wide{grid-template-columns:minmax(0,1fr)}.build.wide .pic{aspect-ratio:4/3;min-height:0}}

/* tables */
.tablebox{overflow-x:auto;border:1px solid var(--rule);border-radius:10px;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:15.5px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-size:13.5px;color:var(--muted);font-weight:700;background:var(--sunk);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.n{font:700 18px var(--data);color:var(--indigo);width:52px}
td b{display:block}
.yes{color:var(--a);font-weight:700}.no{color:var(--muted)}
/* trigger modes (How it works): one press bar in the header drives every row's meter */
.mode-n{display:grid;place-items:center;font:700 18px var(--data);color:var(--indigo);border:2px solid var(--rule);border-radius:50%;width:38px;height:38px}
.tmodes .live{min-width:220px}
canvas.tpress{display:block;width:220px;height:32px;margin-top:8px;background:var(--scope);border-radius:6px}
canvas.tmeter{display:block;width:220px;height:74px;background:var(--scope);border-radius:6px}
.tsum{display:block;margin-top:6px;font-size:13px;color:var(--muted);line-height:1.4}
.tsum .yes{font-weight:700}
@media (max-width:700px){
  .tmodes,.tmodes thead,.tmodes tbody{display:block}
  .tmodes th:not(.live){display:none}
  .tmodes thead tr{background:var(--sunk)}
  .tmodes th.live{grid-column:2;padding:0;border:0;background:none}
  .tmodes tr{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px 8px;padding:14px 12px;border-bottom:1px solid var(--rule)}
  .tmodes td{display:block;padding:0;border:0}
  .tmodes .live{grid-column:2;min-width:0}
  canvas.tmeter{width:100%;max-width:300px;height:auto;aspect-ratio:220/74}
  canvas.tpress{width:100%;max-width:300px;height:auto;aspect-ratio:220/32}
}

/* tech sections */
.tech{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);align-items:start}
.tech>*{min-width:0}
.tech .prose{display:grid;gap:14px;max-width:62ch}
.tech .prose p{color:var(--muted)}
@media (max-width:860px){.tech{grid-template-columns:1fr}}
.mini{background:var(--scope);border-radius:12px;padding:14px}
.mini canvas{display:block;width:100%;height:auto;aspect-ratio:16/9}
.mini p.cap{color:#A49FC4;font:13px/1.4 var(--data);margin-top:8px}

/* callout */
/* reviews */
.reviews{columns:2 340px;column-gap:56px;margin-bottom:-40px}
.review{margin:0 0 40px;break-inside:avoid;border-left:2px solid var(--a);padding:2px 0 2px 24px;display:grid;gap:16px;min-width:0}
.review blockquote{margin:0}
.review blockquote p{font-size:18px;line-height:1.5}
.review figcaption{display:flex;align-items:center;gap:18px;padding-left:4px;min-width:0}
.review .avatar{width:56px;height:56px;border-radius:50%;flex:none;outline:1px solid var(--indigo);outline-offset:3px;object-fit:cover;background:var(--indigo-soft);color:var(--indigo);display:grid;place-items:center;font:800 24px var(--display)}
.review .tag{font:600 16px var(--data);overflow-wrap:anywhere;min-width:0}
.note{background:var(--indigo-soft);border-radius:12px;padding:18px 20px;display:grid;gap:6px}
.note.warn{background:color-mix(in srgb,var(--b) 14%,var(--panel))}

/* contact */
/* Support: contact and guides as ruled rows under an ink rule, no boxes (owner: "too boxy") */
.contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.contact::before{content:"";grid-column:1/-1;border-top:2px solid var(--ink)} /* rule inside .wrap padding, so it lines up with the content */
.contact>div{display:grid;gap:12px;align-content:start;padding:20px 0 4px;min-width:0}
@media (max-width:700px){.contact{grid-template-columns:1fr}.contact>div+div{border-top:1px solid var(--rule);margin-top:16px}}
.copyrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.copyrow code{font:15px var(--data);background:var(--sunk);padding:8px 12px;border-radius:8px;user-select:all;word-break:break-all;min-width:0}
.links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;border-top:2px solid var(--ink)}
@media (max-width:760px){.links{grid-template-columns:1fr}}
.links li{border-bottom:1px solid var(--rule);min-width:0}
.links a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;padding:14px 4px;text-decoration:none;color:var(--ink)}
.links a b{font:800 24px/1.1 var(--display);color:var(--indigo)}
.links a span{grid-column:1;color:var(--muted);font-size:16px}
.links a i{grid-column:2;grid-row:1/span 2;font:500 20px/1 var(--data);font-style:normal;color:var(--indigo);transition:transform .15s}
.links a:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.links a:hover i{transform:translate(2px,-2px)}
@media (prefers-reduced-motion:reduce){.links a i{transition:none}}

details{border-bottom:1px solid var(--rule);padding:16px 0}
details:first-of-type{border-top:1px solid var(--rule)}
summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:700 22px/1 var(--data);color:var(--indigo)}
details[open] summary::after{content:"\2212"}
details p{color:var(--muted);margin-top:10px;max-width:68ch}
details:target summary{color:var(--indigo)}

/* footer */
.foot{border-top:2px solid var(--ink);padding-block:40px 32px;color:var(--muted);font-size:15px}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:28px 40px;align-items:start}
.foot a{color:var(--muted)}
.f-brand{display:grid;gap:10px;min-width:0}
.f-brand p{margin:0;max-width:34ch}
.foot .f-mark{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font:800 22px/1 var(--display);justify-self:start}
.f-mark svg{width:24px;height:24px}
.f-col{min-width:0}
.f-h{margin:0 0 10px;font:600 12px/1 var(--data);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.f-col a{display:inline-block;padding:5px 0;color:var(--ink);text-decoration:none;font-weight:700}
.f-col a:hover{text-decoration:underline;text-underline-offset:3px}
.f-col a[aria-current]{color:var(--indigo);position:relative}
.f-col a[aria-current]::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;position:absolute;left:-13px;top:50%;margin-top:-3px}
.f-oss{grid-column:1/-1;margin:4px 0 0;padding-top:16px;border-top:1px solid var(--rule);overflow-wrap:anywhere;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px}
.foot a.f-top{display:inline-block;padding:8px 0;color:var(--ink);font-weight:700;text-decoration:none;white-space:nowrap}
.foot a.f-top:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.foot .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.f-brand{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- controller tester ---------- */
.setup{display:grid;gap:16px;max-width:880px}
.setup h2{font-size:clamp(22px,2.4vw,28px)}
/* one signal path: numbered nodes joined by a line, no boxes */
.setup ol{list-style:none;counter-reset:hs;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.setup li{counter-increment:hs;position:relative;display:grid;gap:12px;align-content:start;padding-right:18px;font-size:16px;line-height:1.35;min-width:0}
.setup li::before{content:counter(hs);position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--data);color:var(--indigo);background:var(--paper);border:2px solid var(--indigo);box-sizing:border-box}
.setup li:not(:last-child)::after{content:"";position:absolute;top:14px;left:30px;right:0;height:2px;background:color-mix(in srgb,var(--indigo) 40%,var(--paper))}
.setup li:last-child::before{background:var(--a);border-color:var(--a);color:var(--a-ink)}
.setup .led{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c-bright);box-shadow:0 0 6px var(--c-bright);margin:0 6px 0 4px;vertical-align:1px}
@media (max-width:760px){
  .setup ol{grid-template-columns:1fr}
  .setup li{grid-template-columns:30px minmax(0,1fr);gap:14px;padding:0 0 18px}
  .setup li:last-child{padding-bottom:0}
  .setup li>span{padding-top:4px}
  .setup li:not(:last-child)::after{top:30px;bottom:0;left:14px;right:auto;width:2px;height:auto}
}
/* .setup.vert: the same stepper, always vertical (used beside the GCC Test Suite download) */
.setup.vert h3{font-size:clamp(20px,2vw,24px)}
.setup.vert ol{grid-template-columns:1fr}
.setup.vert li{grid-template-columns:30px minmax(0,1fr);gap:14px;padding:0 0 18px}
.setup.vert li:last-child{padding-bottom:0}
.setup.vert li>span{padding-top:4px}
.setup.vert li:not(:last-child)::after{top:30px;bottom:0;left:14px;right:auto;width:2px;height:auto}
.tester{padding-block:clamp(28px,4vw,48px) clamp(56px,8vw,96px)}
.tbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;margin-bottom:20px}
@media (max-width:820px){.tbar{grid-template-columns:1fr}}
.tstatus{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;padding:16px 18px;border-radius:12px;background:color-mix(in srgb,var(--b) 12%,var(--panel));border:1px solid var(--rule)}
.tstatus.on{background:color-mix(in srgb,var(--a) 14%,var(--panel))}
.tstatus .lamp{grid-row:span 2;width:14px;height:14px;border-radius:50%;margin-top:6px;background:var(--b)}
.tstatus.on .lamp{background:var(--a);box-shadow:0 0 10px var(--a)}
.tstatus b{font-size:18px}
.tstatus p{color:var(--muted);font-size:15px}
.tctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tctl select{min-height:42px;max-width:100%;padding:0 12px;border-radius:10px;border:1px solid var(--rule);background:var(--panel);color:var(--ink);font:15px var(--body)}
.meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;color:var(--muted);margin-bottom:18px}
.meta span b{color:var(--ink);font-family:var(--data);font-weight:500;word-break:break-all}
.wiz{background:var(--indigo-soft);border-radius:12px;padding:16px 18px;margin-bottom:18px;display:grid;gap:10px}
.wiz .wtop{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.wiz .wmsg{font:800 clamp(26px,3.6vw,38px)/1.05 var(--display)}
.wiz .track{height:6px;background:var(--panel);border-radius:6px;overflow:hidden}
.wiz .track i{display:block;height:100%;width:0;background:var(--indigo);transition:width .2s}

.bench{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bench>*{min-width:0}
.s4{grid-column:span 4}.s5{grid-column:span 5}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
@media (max-width:980px){.s4,.s5,.s7,.s8{grid-column:span 6}.s12{grid-column:span 12}}
@media (max-width:640px){.bench>*{grid-column:span 12!important}}
.screen{background:var(--scope);color:var(--scope-ink);border-radius:14px;padding:16px;display:grid;gap:12px;align-content:start;position:relative}
.screen h3{font-size:22px;color:#fff;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.screen h3 small{font:500 12.5px var(--data);color:#A49FC4}
.screen canvas{display:block;width:100%;height:auto;max-width:100%}
.screen canvas.sq{aspect-ratio:1/1}
.screen canvas.wide{aspect-ratio:4/1;min-height:140px}
/* angle practice (tester) */
.prac-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.prac-head h3{flex:1 1 auto}
.prac-tog{background:#2A2650;color:#fff;border-color:var(--scope-line)}
.prac-tog[aria-expanded="true"]{border-color:#3CCF9E}
.prac-note{font-size:14px;color:#A49FC4}
#pracBody{display:grid;gap:12px}
#pracBody[hidden]{display:none}
.prac-msg{font:500 15px/1.5 var(--body);color:var(--scope-ink);min-height:3em}
.prac-msg.hit{color:#3CCF9E}.prac-msg.miss{color:#F2C94C}
.prac-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media (max-width:980px){.prac-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.prac-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ptarget{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--scope-line);border-radius:10px;background:rgba(255,255,255,.02);min-width:0}
.ptarget b{color:#fff;font-size:15px}
.ptarget .num{font-size:12.5px;color:#A49FC4}
.ptarget .cnt{font-size:13px;color:#A49FC4}.ptarget .cnt i{font-style:normal;color:#fff;font-weight:700}
.ptarget.near{border-color:#F2C94C}
.ptarget.on{border-color:#3CCF9E;background:rgba(60,207,158,.14)}
.ptarget.hit{border-color:#3CCF9E;background:rgba(60,207,158,.14);animation:phit .45s ease-out}
@keyframes phit{0%{transform:scale(1)}35%{transform:scale(1.05)}100%{transform:scale(1)}}
.prac-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}
.demo{position:absolute;top:56px;left:26px;font:700 12px var(--body);background:#F2C94C;color:#1C1938;padding:3px 9px;border-radius:999px}
.read{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;font-size:13px;color:#A49FC4;margin:0}
.read div{display:grid;gap:2px}
.read dd{margin:0;font:500 15px var(--data);font-variant-numeric:tabular-nums;color:#fff}
.read dt{margin:0}
.legend2{display:flex;gap:16px;flex-wrap:wrap;font:13px var(--data);color:#A49FC4}
.legend2 i{display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:middle}

/* face */
.face{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:end}
.face svg{width:100%;height:auto;max-width:100%}
.face .bs{fill:#2A2650;stroke:#4A4580;stroke-width:2;transition:fill .05s}
.face .lbl{font:700 15px var(--body);fill:#CFCBF2;text-anchor:middle;dominant-baseline:central;pointer-events:none}
#bA.on{fill:#2FCB8F}#bB.on{fill:#FF5C66}#bX.on,#bY.on,#bStart.on{fill:#ECEAF7}#bZ.on{fill:#8C7BFF}
#bUp.on,#bDown.on,#bLeft.on,#bRight.on{fill:#ECEAF7}#bL.on,#bR.on{fill:#A79EF5}
.trig{display:grid;gap:6px;justify-items:center;font-size:12.5px;color:#A49FC4}
.trig .col{width:34px;height:150px;border-radius:8px;background:#100E21;border:1px solid #2C2852;position:relative;overflow:hidden}
.trig .col i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,#6B5FE0,#A79EF5)}
.trig .val{font:600 16px var(--data);color:#fff;font-variant-numeric:tabular-nums;min-width:3ch;text-align:center}
.trig .dig{display:flex;align-items:center;gap:5px}
.trig .dig i{width:9px;height:9px;border-radius:50%;background:#3B365F}
.trig .dig.on i{background:#F2C94C;box-shadow:0 0 8px #F2C94C}

/* raw */
.rawgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px}
@media (max-width:700px){.rawgrid{grid-template-columns:1fr}}
.rawgrid h4{margin:0 0 10px;font-size:15px}
.axrow{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;gap:10px;align-items:center;font-size:14px;margin-bottom:6px}
.axbar{height:10px;background:var(--sunk);border-radius:5px;position:relative;overflow:hidden}
.axbar::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--muted)}
.axbar i{position:absolute;top:0;bottom:0;background:var(--indigo)}
.btngrid{display:flex;flex-wrap:wrap;gap:6px}
.btngrid span{width:38px;height:38px;display:grid;place-items:center;border-radius:8px;background:var(--sunk);font-size:14px}
.btngrid span.on{background:var(--a);color:var(--a-ink)}
@media (max-width:640px){#trace{min-height:220px}}

/* 404: page list as ruled rows, no boxes (B red marks the fault state) */
.lost .where{font:600 15px/1 var(--data);letter-spacing:.06em;text-transform:uppercase;color:var(--b)}
.sitemap{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink);min-width:0}
.sitemap li{border-bottom:1px solid var(--rule)}
.sitemap a{display:grid;gap:2px;padding:16px 4px;text-decoration:none;color:var(--ink)}
.sitemap b{font:800 28px/1.05 var(--display);color:var(--indigo)}
.sitemap span{color:var(--muted);font-size:16px}
.sitemap a:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

.jump{display:flex;flex-wrap:wrap;gap:8px}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--rule);background:var(--panel);color:var(--ink);text-decoration:none;font-weight:700;font-size:15px}
.jump a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
section[id]{scroll-margin-top:96px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}