
  *{box-sizing:border-box;margin:0;padding:0;}
  :root{
    --body:#101012; --metal:#2c2d31; --metal-hi:#3a3b40; --metal-lo:#1c1d20;
    --orange:#ff9f1c; --orange-hi:#ffc469; --orange-lo:#c46a00;
    --lcd-bg:#0e1f10; --lcd-fg:#8dffa0; --lcd-dim:#3f7a4e;
    --pad:#17171a; --pad-hi:#232327; --text:#c9cbd0; --dim:#777a82;
    --red:#ff4d4d; --green:#2ecc71;
  }
  body{background:radial-gradient(1100px 700px at 50% -10%,#2a2b30 0%,var(--body) 60%,#0a0b0c 100%);min-height:100vh;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);display:flex;align-items:flex-start;justify-content:center;padding:28px 12px 80px;}
  .chassis{width:1080px;max-width:100%;background:linear-gradient(165deg,var(--metal-hi),var(--metal) 40%,var(--metal-lo));
    border-radius:18px;padding:22px 24px 18px;border:1px solid #4a4b52;position:relative;
    box-shadow:0 30px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -4px 10px rgba(0,0,0,.35);}
  .screw{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a5c64,#26272b 75%);box-shadow:inset 0 1px 1px rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.6);}
  .screw.tl{top:8px;left:10px;} .screw.tr{top:8px;right:10px;} .screw.bl{bottom:8px;left:10px;} .screw.br{bottom:8px;right:10px;}
  .brand{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;padding:0 10px;}
  .brand .logo{font-size:22px;font-weight:900;letter-spacing:2px;color:var(--orange);text-shadow:0 1px 0 rgba(0,0,0,.6);}
  .brand .logo span{font-size:10px;color:var(--dim);letter-spacing:2px;font-weight:600;margin-left:8px;text-transform:uppercase;}
  .brand .sub{font-size:9px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;}
  .top{display:flex;gap:18px;margin-bottom:18px;align-items:stretch;}
  #lcd{flex:1;background:var(--lcd-bg);border-radius:8px;padding:10px 14px;min-height:92px;border:1px solid #000;
    font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13px;line-height:1.5;color:var(--lcd-fg);
    text-shadow:0 0 6px rgba(90,255,150,.4);box-shadow:inset 0 0 26px rgba(0,0,0,.7), inset 0 2px 6px rgba(0,255,120,.05);
    white-space:pre;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
  #lcd::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);}
  .fx-panel{width:210px;display:flex;flex-direction:column;align-items:center;gap:6px;background:linear-gradient(180deg,#232428,#191a1d);border-radius:10px;border:1px solid #000;padding:12px 8px;}
  .fx-panel .lbl{font-size:9px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;}
  .fx-knob{width:86px;height:86px;border-radius:50%;position:relative;cursor:pointer;
    background:radial-gradient(circle at 35% 30%,#55575e,#2a2b30 60%,#17181c);
    box-shadow:0 4px 8px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.3);}
  .fx-knob::before{content:"";position:absolute;top:2px;left:50%;width:4px;height:26px;margin-left:-2px;border-radius:3px;background:var(--orange);box-shadow:0 0 8px rgba(255,159,28,.7);transform-origin:50% 41px;}
  .fx-knob .cap{position:absolute;top:50%;left:50%;width:18px;height:18px;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(145deg,#3c3d42,#16171a);box-shadow:inset 0 1px 2px rgba(255,255,255,.2),0 2px 3px rgba(0,0,0,.6);}
  #fx-name{font-size:12px;font-weight:800;color:var(--orange);letter-spacing:1px;min-height:15px;}
  .ab-row{display:flex;gap:16px;margin-top:2px;}
  .miniknob{width:44px;height:44px;border-radius:50%;position:relative;cursor:ns-resize;
    background:radial-gradient(circle at 35% 30%,#474950,#26272b 65%,#141518);box-shadow:0 3px 6px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.2);}
  .miniknob::before{content:"";position:absolute;top:2px;left:50%;width:3px;height:13px;margin-left:-1.5px;border-radius:2px;background:var(--orange);transform-origin:50% 20px;}
  .miniknob-label{font-size:8px;color:var(--dim);letter-spacing:1px;text-align:center;text-transform:uppercase;}
  .miniknob-val{font-size:9px;color:var(--orange);font-family:"SF Mono",Menlo,monospace;text-align:center;min-height:10px;}
  .middle{display:flex;gap:18px;margin-bottom:18px;}
  .pads{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .pad{position:relative;height:96px;border-radius:10px;cursor:pointer;user-select:none;
    background:linear-gradient(180deg,var(--pad-hi),var(--pad) 45%,#101013);
    border:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -6px 12px rgba(0,0,0,.5), 0 4px 7px rgba(0,0,0,.5);
    transition:transform .03s, box-shadow .03s, filter .03s;padding:8px;display:flex;flex-direction:column;justify-content:space-between;}
  .pad .pid{font-size:10px;font-weight:700;color:#8b8e96;letter-spacing:1px;}
  .pad .pname{font-size:10px;font-weight:700;color:#cfd2d8;text-shadow:0 1px 2px rgba(0,0,0,.8);line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .pad .pmeta{font-size:8px;color:#5c5f66;}
  .pad .pkey{position:absolute;top:6px;right:8px;font-size:8px;color:#55585f;border:1px solid #3a3c42;border-radius:3px;padding:1px 3px;}
  .pad.down{transform:translateY(2px);filter:brightness(1.5);box-shadow:inset 0 2px 14px rgba(255,159,28,.5), 0 1px 2px rgba(0,0,0,.5);}
  .pad.empty{opacity:.55;}
  .pad.sel{outline:2px solid var(--orange);outline-offset:1px;}
  .right-col{width:220px;display:flex;flex-direction:column;gap:10px;}
  .bank-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;}
  .bank-btn{height:30px;border-radius:5px;background:linear-gradient(180deg,#33343a,#1e1f23);border:1px solid #000;color:#9a9da5;
    font-size:10px;font-weight:800;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.07);}
  .bank-btn.on{background:linear-gradient(180deg,#ffb347,#e08a00);color:#241500;border-color:#ffc469;box-shadow:0 0 8px rgba(255,159,28,.4);}
  .btn{background:linear-gradient(180deg,#33343a,#1e1f23);border:1px solid #000;color:#c9cbd0;border-radius:6px;padding:7px 9px;font-size:10px;letter-spacing:1px;cursor:pointer;text-transform:uppercase;font-weight:700;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);}
  .btn:hover{filter:brightness(1.15);} .btn:active{transform:translateY(1px);}
  .btn.orange{background:linear-gradient(180deg,#ffb347,#e08a00);color:#241500;}
  .btn.red{background:linear-gradient(180deg,#ff5c4d,#d62f20);color:#2b0d00;}
  .btn.on{background:linear-gradient(180deg,#ffb347,#e08a00);color:#241500;}
  .ledrow{display:flex;gap:10px;justify-content:center;}
  .led{display:flex;align-items:center;gap:5px;font-size:8px;letter-spacing:1px;color:var(--dim);}
  .led .dot{width:8px;height:8px;border-radius:50%;background:#1c1c1f;box-shadow:inset 0 1px 2px #000;}
  .led.on .dot{background:var(--green);box-shadow:0 0 7px var(--green);}
  .led.on.amber .dot{background:var(--orange);box-shadow:0 0 7px var(--orange);}
  .led.on.red .dot{background:var(--red);box-shadow:0 0 7px var(--red);}
  .seq-row{display:flex;gap:4px;margin-bottom:14px;padding:10px 12px;background:#1c1d20;border-radius:8px;border:1px solid #000;align-items:center;flex-wrap:wrap;}
  .step{width:28px;height:24px;border-radius:4px;background:linear-gradient(180deg,#232428,#141517);border:1px solid #33363c;cursor:pointer;font-size:8px;color:#55585f;display:flex;align-items:center;justify-content:center;font-family:"SF Mono",Menlo,monospace;}
  .step.on{background:linear-gradient(180deg,#ffb347,#e08a00);color:#241500;}
  .step.cur{outline:1px dashed var(--green);outline-offset:-1px;}
  .transport{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px;padding:10px 12px;background:#1c1d20;border-radius:8px;border:1px solid #000;}
  .inspector{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px;padding:10px 12px;background:#1c1d20;border-radius:8px;border:1px solid #000;}
  .inspector label{font-size:8px;letter-spacing:1px;color:var(--dim);text-transform:uppercase;}
  .inspector input[type=text],.inspector select{background:#101115;border:1px solid #33363e;color:var(--text);border-radius:5px;padding:4px 7px;font-size:11px;}
  input[type=range]{accent-color:var(--orange);}
  .footer{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-top:4px;}
  .dropzone{border:1px dashed #4a4e56;border-radius:6px;padding:8px 12px;font-size:10px;color:var(--dim);cursor:pointer;text-align:center;flex:1;min-width:140px;}
  .dropzone:hover{border-color:var(--orange);color:var(--orange);}
  .hint{font-size:9px;color:var(--dim);margin-left:auto;text-align:right;line-height:1.6;}
  .status{font-size:10px;font-family:"SF Mono",Menlo,monospace;color:var(--dim);}
