/* BAKHY Workbench — shared hardware primitives.
   Everything on the site is a piece of equipment: charcoal chassis, brass/amber keys,
   amber vacuum-fluorescent screens, screws and status LEDs. */
@font-face{font-family:Segment;src:url('/assets/fonts/segment.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:Controls;src:url('/assets/fonts/controls.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Wordmark;src:url('/assets/fonts/wordmark.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  color-scheme:dark;
  --bench:#191816; --chassis:#2a2825; --chassis-hi:#353129; --chassis-lo:#1e1c19;
  --well:#100f0d; --edge:#080706; --seam:#3d3830;
  --ink:#e6dccb; --ink-dim:#a89d8a; --ink-faint:#6f685d;
  --amber:#ffb53f; --amber-hot:#ffd98a; --amber-deep:#c27a1c; --amber-dim:rgba(255,170,60,.07);
  --brass:#c09a5d; --green:#86ff7c; --red:#ff5d4c;
  --f-mark:Wordmark,'Arial Narrow',sans-serif;
  --f-ui:Controls,'Arial Narrow','Roboto Condensed',Arial,sans-serif;
  --f-seg:Segment,'Courier New',monospace;
  --grain:url('/assets/grain.webp');
  --brass-tex:url('/assets/brass.webp');
  --r:10px;
  scrollbar-color:#6b6459 var(--bench);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bench);color:var(--ink);font:500 18px/1.45 var(--f-ui);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(90% 60% at 50% -10%,#2b2925 0%,transparent 70%),var(--grain);background-size:auto,560px;opacity:.9}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg,canvas{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--amber);color:#1b1206;padding:8px 14px;border-radius:6px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* ---------- Chassis ---------- */
.chassis{
  position:relative;border-radius:var(--r);
  background:var(--chassis) var(--grain);background-size:560px;background-blend-mode:soft-light;
  border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.02),0 0 0 2px #121110,0 0 0 3px #3e3a33,0 24px 40px rgba(0,0,0,.55);
}
.seam{border-top:1px solid var(--edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.screw{position:absolute;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#5a544a,#26231f 62%,#121110);
  box-shadow:0 1px 0 rgba(255,255,255,.08),inset 0 -1px 2px rgba(0,0,0,.7),0 0 0 2px #0f0e0c}
.screw::before,.screw::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:2px;border-radius:1px;background:#0b0a09;transform:translate(-50%,-50%) rotate(var(--a,38deg))}
.screw::after{--a:128deg}
.screw.tl{left:10px;top:10px}.screw.tr{right:10px;top:10px}.screw.bl{left:10px;bottom:10px}.screw.br{right:10px;bottom:10px}
.screw:nth-of-type(2n)::before{--a:72deg}.screw:nth-of-type(2n)::after{--a:162deg}

/* ---------- LEDs ---------- */
.led{display:inline-block;flex:none;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#57524a,#36322c 60%,#1b1916);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.07)}
.led.on,.led.amber{background:radial-gradient(circle at 40% 35%,#fff6d4,#ffc54a 45%,#d27a08 80%);box-shadow:0 0 6px 2px rgba(255,186,70,.7),0 0 14px rgba(255,170,50,.4)}
.led.green{background:radial-gradient(circle at 40% 35%,#f0ffe8,#8dff7f 45%,#2f9e2a 85%);box-shadow:0 0 6px 2px rgba(125,255,110,.55),0 0 14px rgba(110,255,100,.3)}
.led.red{background:radial-gradient(circle at 40% 35%,#ffe4dc,#ff6a55 45%,#a82a19 85%);box-shadow:0 0 6px 2px rgba(255,90,70,.6)}
.led.blink{animation:led-blink 1.2s steps(1) infinite}
@keyframes led-blink{50%{opacity:.25}}

/* ---------- Keys (radio-style latching buttons) ---------- */
.bank{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:9px;background:linear-gradient(180deg,#0c0b0a,#171513);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.06)}
.key{
  --lift:0px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:48px;padding:0 20px;border-radius:5px;border:1px solid #070606;text-decoration:none;
  background:linear-gradient(180deg,#3a362f 0%,#2b2823 48%,#22201c 100%);
  color:#d9d0be;font:500 18px/1 var(--f-ui);letter-spacing:.06em;user-select:none;
  box-shadow:0 5px 0 #0b0a09,0 7px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -2px 0 rgba(0,0,0,.25);
  transform:translateY(var(--lift));margin-bottom:5px;
  transition:transform .1s,box-shadow .1s,background .15s,color .15s;
}
.key:hover{color:#f1e8d6}
.key:active,.key.is-down{transform:translateY(4px);box-shadow:0 1px 0 #0b0a09,inset 0 2px 4px rgba(0,0,0,.5)}
.key .led{width:10px;height:10px}
.key[aria-pressed="true"],.key[aria-checked="true"],.key[aria-current="true"],.key--amber{
  background:linear-gradient(180deg,rgba(255,236,190,.18),transparent 45%),var(--brass-tex) center/420px,linear-gradient(180deg,#f2bb63,#c47f26);
  background-blend-mode:normal,multiply,normal;color:#2a1906;text-shadow:0 1px 0 rgba(255,228,170,.45);
  box-shadow:0 5px 0 #4a2c08,0 8px 14px rgba(0,0,0,.5),0 0 22px rgba(255,170,60,.16),inset 0 1px 0 rgba(255,240,205,.6);
}
.key[aria-pressed="true"],.key[aria-checked="true"],.key[aria-current="true"]{--lift:4px;box-shadow:0 1px 0 #4a2c08,0 0 22px rgba(255,170,60,.22),inset 0 1px 0 rgba(255,240,205,.55),inset 0 -2px 3px rgba(80,40,0,.35)}
.key--amber:active{box-shadow:0 1px 0 #4a2c08,inset 0 2px 4px rgba(90,45,0,.35)}
.key[aria-pressed="true"] .led,.key[aria-checked="true"] .led,.key[aria-current="true"] .led{background:radial-gradient(circle at 40% 35%,#fff6d0,#ffc649 45%,#d77d0a 80%);box-shadow:0 0 6px 2px rgba(255,190,70,.75)}
.key:disabled,.key[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.key.is-latching{animation:key-latch .26s cubic-bezier(.3,.7,.3,1)}
.key.is-popping{animation:key-pop .34s cubic-bezier(.2,.9,.3,1.3)}
@keyframes key-latch{0%{transform:translateY(0)}45%{transform:translateY(6px)}70%{transform:translateY(3px)}100%{transform:translateY(4px)}}
@keyframes key-pop{0%{transform:translateY(4px)}35%{transform:translateY(-2px)}65%{transform:translateY(1px)}100%{transform:translateY(0)}}
.key svg{width:18px;height:18px;flex:none}
.key--sm{min-height:38px;padding:0 14px;font-size:15px;letter-spacing:.1em}

/* ---------- VFD screen ---------- */
.bezel{padding:9px;border-radius:9px;background:linear-gradient(180deg,#0a0908,#1d1b18);box-shadow:0 0 0 1px #050404,inset 0 1px 0 rgba(255,255,255,.06),0 8px 16px rgba(0,0,0,.4)}
.vfd{
  position:relative;overflow:hidden;border-radius:6px;border:1px solid #2b2112;color:var(--amber);
  background:radial-gradient(75% 95% at 50% 50%,rgba(120,70,10,.34),transparent 72%),linear-gradient(180deg,#1a1006,#0e0803);
  box-shadow:inset 0 0 34px rgba(0,0,0,.85);text-shadow:0 0 6px rgba(255,160,40,.6),0 0 16px rgba(255,140,20,.3);
}
.vfd::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px)}
.vfd::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(165deg,rgba(255,255,255,.07),transparent 34%)}
.vfd canvas{display:block;width:100%;height:100%}
.vfd.flicker>*{animation:vfd-flick .5s linear}
@keyframes vfd-flick{0%{opacity:.2}10%{opacity:1}18%{opacity:.35}26%{opacity:1}40%{opacity:.7}52%{opacity:1}}

/* ---------- Labels / plates ---------- */
.label{font:500 13px/1.2 var(--f-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.plate{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:3px;border:1px solid #4a443a;
  background:linear-gradient(180deg,#2f2c27,#24221e);font:500 12px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:#bfb4a1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 1px rgba(0,0,0,.5)}
.engraved{color:#c9bfad;text-shadow:0 1px 0 #000,0 -1px 0 rgba(255,255,255,.05)}

/* ---------- Rack ears (19" style) ---------- */
.unit{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 34px}
.ear{position:relative;background:linear-gradient(90deg,#24221e,#302d28 50%,#24221e);border-inline:1px solid var(--edge)}
.ear::before,.ear::after{content:"";position:absolute;left:50%;width:14px;height:20px;border-radius:7px;transform:translateX(-50%);
  background:#0b0a09;box-shadow:inset 0 2px 3px #000,0 1px 0 rgba(255,255,255,.06)}
.ear::before{top:18px}.ear::after{bottom:18px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media (forced-colors:active){.chassis,.key,.vfd,.bank{background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none}}

/* ---------- Account plate & dialog ---------- */
.acc-plate{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 14px 0 6px;border-radius:24px;border:1px solid #5c4628;cursor:pointer;
  background:linear-gradient(180deg,#2c241b,#15100b);color:#f0e4cc;box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,220,170,.12)}
.acc-plate:hover{border-color:#a07a3a}
.acc-coin{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font:700 16px/1 Georgia,serif;color:#7a5512;
  background:radial-gradient(circle at 35% 30%,#fff3c4,#f0c24a 50%,#b8860b);box-shadow:inset 0 0 0 2px rgba(122,85,18,.5),0 2px 4px rgba(0,0,0,.5)}
.acc-coin.big{width:56px;height:56px;font-size:28px}
.acc-txt{display:grid;text-align:left;line-height:1.05}
.acc-bal{font:700 17px/1 var(--f-mark);color:#ffe9b0;font-variant-numeric:tabular-nums}
.acc-bal.up{animation:bal-up .8s}.acc-bal.down{animation:bal-down .8s}
@keyframes bal-up{30%{color:#7dff8a;transform:scale(1.15)}}@keyframes bal-down{30%{color:#ff7a6a}}
.acc-who{font-size:11px;letter-spacing:.08em;color:#bda983;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-dlg{width:min(440px,calc(100vw - 32px));border:0;border-radius:18px;padding:26px;color:#f0e4cc;background:radial-gradient(circle at 50% 0,#2e251b,#140f0a);box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 1px #6b5432}
.acc-dlg::backdrop{background:rgba(6,5,4,.65);backdrop-filter:blur(3px)}
.acc-x{position:absolute;right:14px;top:10px;border:0;background:none;color:#bda983;font-size:28px;cursor:pointer}
.acc-title{margin:0 0 6px;font:700 24px/1.1 Georgia,serif;color:#ffe9b0}
.acc-note{margin:0 0 16px;color:#bda983;font-size:15px}
.acc-tabs{margin-bottom:14px}.acc-tabs .key{flex:1}
.acc-form{display:grid;gap:8px}
.acc-form label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#bda983}
.acc-form input{height:44px;padding:0 12px;border-radius:8px;border:1px solid #4a3a26;background:#0f0b08;color:#f6ead2;font-size:17px}
.acc-form .key--amber{margin-top:8px}
.acc-form.row{grid-template-columns:1fr auto;align-items:end;margin-top:14px}.acc-form.row label{grid-column:1/-1}
.acc-link{justify-self:start;border:0;background:none;color:#e8b54a;cursor:pointer;padding:4px 0;font-size:14px}
.acc-msg{margin:12px 0 0;padding:10px 12px;border-radius:8px;background:rgba(232,181,74,.12);color:#ffe9b0}
.acc-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.acc-name{margin:0;font:700 22px/1.1 var(--f-mark)}.acc-chips{margin:4px 0 0;color:#ffe9b0;font:600 18px/1 var(--f-ui)}
.acc-actions{display:flex;flex-wrap:wrap;gap:10px}