/* ==========================================================================
   ROBIN LOGIC — a workbench, a cutting mat, and a solderless board on top.
   Everything drawn in CSS or canvas. No photos, no stock, no gradients
   pretending to be photographs.
   ========================================================================== */

@font-face{font-family:"Silk";src:url("fonts/silkscreen-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Silk";src:url("fonts/silkscreen-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Term";src:url("fonts/vt323.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Dots";src:url("fonts/handjet.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}

:root{
  /* the mat */
  --mat:#0A0A0A;
  --mat-2:#131313;
  --grid:rgba(0,200,5,.06);
  --panel:#101010;
  --panel-2:#181818;
  --line:#1F3A21;
  --line-soft:#17251A;
  /* ink */
  --txt:#FFFFFF;
  --dim:#8A9A8C;
  /* signal */
  --green:#00C805;
  --red:#FF4B2E;
  --blue:#4A8CFF;
  --yellow:#FFC83A;
  --off:#234A28;
  /* the board */
  --board:#E4DCC6;
  --board-hi:#F6F0E1;
  --board-lo:#AFA485;
  --hole:#241E14;
  --copper:#C87A2E;
  --board-ink:#171208;

  --glow:0 0 9px rgba(0,200,5,.45);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--mat);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(115% 75% at 50% -8%, var(--mat-2), transparent 62%);
  background-size:34px 34px, 34px 34px, 100% 100%;
  color:var(--txt);
  font-family:"Term",ui-monospace,"Courier New","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;
  font-size:21px;line-height:1.36;
  -webkit-font-smoothing:none;
  overflow-x:hidden;
}
@media (pointer:fine){body{cursor:none}}

img{max-width:100%;height:auto;display:block;image-rendering:pixelated}
a{color:var(--yellow);text-decoration:none;border-bottom:2px solid currentColor}
a:hover{background:var(--yellow);color:var(--mat)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

p{margin:0 0 14px;max-width:62ch}
.col{max-width:62ch}

/* ---------- type ---------- */
.lab{font-family:"Dots","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-variation-settings:"wght" 500;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
h1{font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-weight:700;font-size:clamp(20px,3.9vw,38px);line-height:1.16;
  text-transform:uppercase;margin:0 0 18px;text-shadow:var(--glow)}
h2{font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-weight:700;font-size:clamp(14px,2.3vw,22px);line-height:1.28;
  text-transform:uppercase;margin:0 0 14px}
h3{font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-weight:400;font-size:13px;line-height:1.35;text-transform:uppercase;margin:0 0 8px}
.big{font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-weight:700;font-size:clamp(24px,5.2vw,52px);line-height:1.07;text-shadow:var(--glow)}

ul.li{margin:0 0 14px;padding:0;list-style:none;max-width:62ch}
ul.li li{position:relative;padding-left:26px;margin-bottom:7px}
ul.li li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;
  background:var(--off);box-shadow:inset 0 0 0 2px rgba(0,0,0,.4)}
ul.li li.ok::before{background:var(--green);box-shadow:var(--glow)}
ul.li li.no::before{background:var(--red);box-shadow:0 0 8px var(--red)}

/* ==========================================================================
   THE BENCH FRAME
   ========================================================================== */
.rig{max-width:1180px;margin:0 auto;padding:20px 16px 80px}

/* the rail: nav as a power rail with holes */
.rail{
  position:sticky;top:0;z-index:40;background:var(--board);
  border-bottom:3px solid var(--board-lo);
  box-shadow:0 3px 0 rgba(0,0,0,.4);
}
.rail .inner{max-width:1180px;margin:0 auto;padding:0 14px;display:flex;align-items:stretch;gap:0;min-height:58px}
.rail .plus,.rail .minus{width:8px;flex:none}
.rail .plus{background:var(--red)}
.rail .minus{background:var(--blue)}
.brandlink{display:flex;align-items:center;gap:10px;padding:0 16px;color:var(--board-ink);border:0;
  font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-weight:700;font-size:15px;text-transform:uppercase}
.brandlink:hover{background:none;color:var(--board-ink)}
.brandlink .railmark{width:30px;height:30px;flex:none;display:block}
.brandlink .railmark svg{display:block;width:30px;height:30px}
.navlinks{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{
  display:flex;align-items:center;gap:8px;padding:0 15px;color:var(--board-ink);border:0;
  font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:10.5px;text-transform:uppercase;white-space:nowrap;opacity:.62;
}
.navlinks a:hover{background:var(--board-hi);color:var(--board-ink);opacity:1}
.navlinks a[aria-current="page"]{opacity:1;background:var(--board-hi)}
.navlinks a::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--hole);flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.navlinks a[aria-current="page"]::before{background:var(--green);box-shadow:0 0 7px var(--green)}
.railtail{margin-left:auto;display:flex;align-items:center;gap:12px;padding:0 12px;flex:none}
.navlinks a.pwrtest::before{background:var(--yellow);box-shadow:0 0 9px var(--yellow)}

/* ---------- chunky physical buttons ---------- */
.btn{
  font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:11px;text-transform:uppercase;
  background:var(--board);color:var(--board-ink);cursor:pointer;border:0;
  padding:11px 14px;display:inline-flex;align-items:center;gap:9px;
  box-shadow:inset 2px 2px 0 var(--board-hi), inset -2px -2px 0 var(--board-lo), 0 4px 0 rgba(0,0,0,.45);
  transition:transform .06s steps(2), box-shadow .06s steps(2);
}
a.btn{border-bottom:0}
.btn:hover{background:var(--board-hi);color:var(--board-ink)}
.btn:active,.btn.down{transform:translateY(4px);box-shadow:inset -2px -2px 0 var(--board-hi), inset 2px 2px 0 var(--board-lo)}
.btn .led{width:9px;height:9px;border-radius:50%;background:var(--off);flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.btn.lit .led,.btn[aria-current="page"] .led{background:var(--green);box-shadow:0 0 8px var(--green)}
.btn[disabled]{opacity:.42;cursor:not-allowed;transform:none}
.btn.wide{padding:13px 19px;font-size:12px}
.btn.wire{background:var(--red);color:#fff;box-shadow:inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.35), 0 4px 0 rgba(0,0,0,.45)}
.btn.wire:hover{background:#ff6a52;color:#fff}

/* ---------- panels ---------- */
.panelbox{background:var(--panel);border:2px solid var(--line);padding:18px 20px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.zone{padding:34px 0;border-bottom:2px dashed var(--line-soft)}
.zone:first-child{padding-top:16px}
.zone:last-child{border-bottom:0}

.readout{border:2px solid var(--line);padding:12px 14px;background:var(--panel)}
.readout .v{font-family:"Dots","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-variation-settings:"wght" 700;font-size:clamp(28px,4.4vw,40px);
  line-height:1;letter-spacing:.04em;text-shadow:var(--glow);font-variant-numeric:tabular-nums;color:var(--green)}
.readout .k{font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:9.5px;text-transform:uppercase;color:var(--dim);margin-top:8px}

.printout{
  background:var(--panel-2);border:2px solid var(--line);padding:13px 15px;
  font-family:"Term","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:18px;line-height:1.45;white-space:pre-wrap;
  overflow-x:auto;word-break:break-word;color:var(--txt);max-width:none;
}
.printout .k{color:var(--dim)}

.hot{border-color:var(--red)}
.hot .lab{color:var(--red)}

.marq{overflow:hidden;border-top:2px solid var(--line);border-bottom:2px solid var(--line);
  padding:7px 0;background:var(--panel)}
.marq div{display:inline-block;white-space:nowrap;font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:11px;
  color:var(--dim);animation:slide 32s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.tw{overflow-x:auto;border:2px solid var(--line)}
table{border-collapse:collapse;width:100%;font-family:"Term","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:18px}
th,td{text-align:left;padding:7px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
th{font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:9px;text-transform:uppercase;color:var(--dim);
  background:var(--panel-2);position:sticky;top:0}
td.r{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- the board surface ---------- */
.board{
  background:var(--board);
  background-image:radial-gradient(circle at 50% 50%, rgba(0,0,0,.05) 0 40%, transparent 41%);
  background-size:11px 11px;
  border:3px solid var(--board-lo);
  box-shadow:inset 2px 2px 0 var(--board-hi), inset -2px -2px 0 var(--board-lo), 0 10px 0 -3px rgba(0,0,0,.5);
  color:var(--board-ink);position:relative;
}
.board .powerrail{height:9px;background:var(--red)}
.board .powerrail.neg{background:var(--blue)}

/* ---------- LEDs ---------- */
.led-lamp{width:16px;height:16px;border-radius:50%;background:var(--off);flex:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25), inset 0 0 0 2px rgba(0,0,0,.35)}
.led-lamp.on{background:var(--green);box-shadow:0 0 12px var(--green), inset 0 2px 0 rgba(255,255,255,.5)}
.led-lamp.red.on{background:var(--red);box-shadow:0 0 12px var(--red), inset 0 2px 0 rgba(255,255,255,.5)}

/* ---------- cursor ---------- */
.pix-cursor{position:fixed;z-index:9999;width:20px;height:20px;pointer-events:none;image-rendering:pixelated}
@media (pointer:coarse){.pix-cursor{display:none}}

/* ---------- footer ---------- */
footer.bench{border-top:3px solid var(--line);background:var(--panel);margin-top:60px}
footer.bench .inner{max-width:1180px;margin:0 auto;padding:26px 16px 40px;display:grid;gap:16px}
footer.bench .nav{display:flex;flex-wrap:wrap;gap:16px;font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:10px}
footer.bench .nav a{color:var(--dim);border-bottom:2px solid var(--line)}
footer.bench .nav a:hover{background:var(--dim);color:var(--panel)}
footer.bench p{max-width:88ch;color:var(--dim);font-size:17px;line-height:1.45;margin:0}

/* ---------- motion ---------- */
@keyframes blink{50%{opacity:0}}
.caret::after{content:"\2588";animation:blink 1.05s steps(1) infinite;margin-left:2px}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-3px,2px)}
  50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,-2px)}}
.shake{animation:shake .26s steps(2) 1}
.js .pop{opacity:0}
.js .pop.in{opacity:1;animation:pop .2s steps(3) forwards}
@keyframes pop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .pop{opacity:1;animation:none}}

@media (max-width:820px){
  body{font-size:19px}
  .rig{padding:12px 8px 56px}
  .zone{padding:26px 0}
  .panelbox{padding:15px}
  .brandlink{padding:0 10px;font-size:13px}
  .navlinks a{padding:0 11px;font-size:9.5px}
}
@media (max-width:560px){
  .brandlink span{display:none}
}

/* ==========================================================================
   THE BOARD (svg)
   ========================================================================== */
.benchwrap{border:3px solid var(--board-lo);box-shadow:0 10px 0 -3px rgba(0,0,0,.5);background:var(--board);
  overflow:hidden}
.benchsvg{display:block;width:100%;height:auto;touch-action:manipulation}
.benchsvg .pinlbl{font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:20px;font-weight:700}
.benchsvg .chiplbl{font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:15px;font-weight:700;letter-spacing:.04em}
.benchsvg .chipnum{font-family:"Term","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:14px}
.benchsvg .hole,.benchsvg .pin,.benchsvg .jumper{cursor:pointer}
.benchsvg .hole:hover circle:nth-child(2){stroke:var(--yellow);stroke-width:3}
.benchsvg .jumper:hover path:nth-child(2){stroke:#fff}
.benchsvg :focus-visible{outline:none}
.benchsvg .hole:focus-visible circle:nth-child(1),
.benchsvg .pin:focus-visible rect,
.benchsvg .jumper:focus-visible path:nth-child(2){stroke:var(--yellow);stroke-width:4}

/* target picker */
.targets{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
.tchip{font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:9.5px;cursor:pointer;background:transparent;color:var(--dim);
  border:2px solid var(--line);padding:8px 10px;display:inline-flex;align-items:center;gap:7px}
.tchip:hover{color:var(--txt);border-color:var(--dim)}
.tchip[aria-pressed="true"]{color:var(--mat);background:var(--green);border-color:var(--green)}
.tchip .dot{width:8px;height:8px;border-radius:50%;background:var(--off)}
.tchip.done .dot{background:var(--green);box-shadow:var(--glow)}
.tchip[aria-pressed="true"] .dot{background:var(--mat)}

/* scoreboard */
.score{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:baseline;border:2px solid var(--line);
  padding:10px 14px;background:var(--panel)}
.score .cell{display:flex;flex-direction:column;gap:2px}
.score .k{font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:9px;color:var(--dim);text-transform:uppercase}
.score .v{font-family:"Dots","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-variation-settings:"wght" 700;font-size:26px;line-height:1;
  letter-spacing:.05em;color:var(--green);text-shadow:var(--glow);font-variant-numeric:tabular-nums}
.score .right{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap;align-items:baseline}
.score .v.over{color:var(--red);text-shadow:0 0 8px var(--red)}

/* truth table */
.ttable{border-collapse:collapse;font-family:"Term","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:19px;width:100%}
.ttable th{font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:9px;color:var(--dim);background:var(--panel-2);
  text-transform:uppercase;padding:7px 10px;text-align:center;position:static}
.ttable td{padding:5px 10px;text-align:center;border-bottom:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums}
.ttable tr.ok td{color:var(--green)}
.ttable tr.bad td{color:var(--red)}
.ttable tr.probe td{background:rgba(255,200,58,.10)}
.ttable td.sep{border-left:2px solid var(--line)}

.badge{font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:11px;padding:6px 10px;display:inline-block;
  background:var(--green);color:var(--mat)}
.badge.opt{background:var(--yellow)}
@media (max-width:820px){
  .benchsvg{min-height:280px}
  .score .right{margin-left:0}
}

/* token panel */
.pending{border:3px dashed var(--red);padding:26px 22px}
.cabox{border:3px solid var(--green);padding:22px;box-shadow:0 0 0 3px rgba(0,200,5,.14)}
.ca{font-family:"Term","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;font-size:clamp(18px,3.2vw,26px);word-break:break-all;margin:12px 0 14px}
.chart{border:2px solid var(--line);overflow:hidden;margin-top:14px}
.chart iframe{width:100%;height:520px;border:0;display:block}
.controls{display:flex;flex-wrap:wrap;gap:9px;align-items:center}

/* ---------- language switch: a two-position slide switch on the rail ---------- */
.langsw{display:flex;align-items:stretch;align-self:center;border:2px solid var(--board-ink);
  background:var(--board-hi);box-shadow:0 3px 0 rgba(0,0,0,.45)}
.langsw .lseg{
  font-family:"Silk","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:11px;font-weight:700;letter-spacing:.02em;cursor:pointer;
  border:0;background:transparent;color:var(--board-ink);padding:9px 12px;
  display:flex;align-items:center;gap:7px;white-space:nowrap;opacity:.48;
}
.langsw .lseg + .lseg{border-left:2px solid var(--board-ink)}
.langsw .lseg::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--off);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);flex:none}
.langsw .lseg:hover{opacity:.85}
.langsw .lseg[aria-pressed="true"]{background:var(--board-ink);color:var(--board);opacity:1}
.langsw .lseg[aria-pressed="true"]::before{background:var(--green);box-shadow:0 0 7px var(--green)}
@media (max-width:560px){ .langsw .lseg{padding:9px 9px;font-size:10px} }