@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=IBM+Plex+Mono:wght@400;500;600&family=Inter+Tight:wght@400;500;600&display=swap');
:root{
  --rack:#14110e;--rack2:#1d1915;--rail:#2a241e;--panel:#ece4d2;--panel2:#e2d8c2;--ink:#1b1712;--ink2:#5b5246;--ink3:#8d8372;
  --tom:#ff5a36;--cob:#2f6bff;--mus:#ffc12e;--min:#19c98a;--mag:#ff4fa3;--vio:#8c5cff;--led:#ff3b1f;--ok:#19c98a;
  --mono:'IBM Plex Mono',ui-monospace,monospace;--disp:'Unbounded',system-ui,sans-serif;--body:'Inter Tight',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{background:var(--rack);color:var(--panel);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:radial-gradient(circle at 20% -10%,rgba(255,90,54,.10),transparent 45%),radial-gradient(circle at 110% 30%,rgba(47,107,255,.08),transparent 40%),repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.012) 3px 4px)}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}.mono{font-family:var(--mono)}
.disp{font-family:var(--disp);font-weight:900;letter-spacing:-.03em;line-height:.92}
/* rack rails top + bottom with screw holes */
.rail{height:22px;background:linear-gradient(180deg,#3a3229,#231e19);border-top:1px solid #4a4036;border-bottom:1px solid #0c0a08;position:relative}
.rail::before{content:'';position:absolute;inset:0;background:radial-gradient(circle,#0c0a08 3px,#5a4e41 4px,transparent 5px) 0 50%/48px 22px repeat-x}
/* nav */
nav.top{position:sticky;top:0;z-index:40;background:rgba(20,17,14,.86);backdrop-filter:blur(10px);border-bottom:1px solid #2c261f}
nav.top .wrap{display:flex;align-items:center;gap:22px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:900;font-size:18px;letter-spacing:-.02em}
.brand svg{width:30px;height:30px}
nav.top .links{display:flex;gap:4px;margin-left:10px}nav.top .links a{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:8px;color:#b9ae9a}
nav.top .links a:hover,nav.top .links a.on{color:var(--panel);background:#241f1a}
.sp{flex:1}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:10px;border:2px solid var(--ink);background:var(--panel);color:var(--ink);font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--ink)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.hot{background:var(--tom);color:#1a0703}.btn.dark{background:#241f1a;color:var(--panel);border-color:#0c0a08;box-shadow:0 4px 0 #0c0a08}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
/* bone faceplate */
.plate{background:var(--panel);color:var(--ink);border-radius:6px;position:relative;box-shadow:inset 0 1px 0 #fff8,inset 0 -2px 0 #0002,0 10px 30px rgba(0,0,0,.45)}
.plate::before,.plate::after{content:'';position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d8cfbd,#8a7f6c);box-shadow:inset 0 0 0 1px #6b6253;top:8px;left:8px}
.plate::after{left:auto;right:8px}
.silk{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.led{display:inline-block;width:9px;height:9px;border-radius:50%;background:#5a1d12;box-shadow:inset 0 0 0 1px #0004}.led.on{background:var(--led);box-shadow:0 0 10px var(--led),0 0 2px #fff inset}.led.g.on{background:var(--ok);box-shadow:0 0 10px var(--ok)}
/* jack */
.jack{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#0d0b09 0 6px,#bdb3a0 7px 9px,#77705f 10px 12px,#d6cdb9 13px);cursor:crosshair;position:relative}
.jack:hover{box-shadow:0 0 0 3px var(--mus)}
/* stat strip */
.lcd{background:#0e1410;color:#9cf7c6;font-family:var(--mono);border:2px solid #06090a;border-radius:6px;box-shadow:inset 0 0 18px rgba(25,201,138,.18);text-shadow:0 0 6px rgba(25,201,138,.55)}
footer{border-top:1px solid #2c261f;margin-top:90px;padding:30px 0 50px;color:#8d8372;font-family:var(--mono);font-size:12px}
footer .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(30px);opacity:0;background:var(--panel);color:var(--ink);font-family:var(--mono);font-size:13px;padding:12px 18px;border-radius:10px;border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);transition:.25s;z-index:99;max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%)}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:99px;border:1.5px solid currentColor}
@media(max-width:860px){nav.top .links{display:none}.wrap{padding:0 16px}}

footer .fcols{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:28px;align-items:start}.fbrand p{color:#8d8372;font-family:var(--body);font-size:13.5px;line-height:1.55;margin-top:12px;max-width:260px}
.fcol h5{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#8d8372;font-weight:600;margin-bottom:14px}
.fcol a{display:block;font-family:var(--body);font-size:15px;font-weight:600;color:var(--panel);margin-bottom:12px;transition:color .15s,transform .15s}.fcol a:hover{color:var(--mus);transform:translateX(3px)}
footer .fbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid #2c261f;margin-top:30px;padding-top:20px;font-size:11.5px;color:#6d6455}
@media(max-width:900px){footer .fcols{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}