:root{
    --face:#0b0c0b;
    --silk:#e8e9e4;
    --silk-dim:#9fa39c;
    --alu-hi:#f4f5f1;
    --alu-mid:#b4b7b0;
    --alu-lo:#5c5f59;
    --alu-shadow:#1b1c1a;
    --led:#39ff6a;
    --room:#171715;
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:
      radial-gradient(120% 90% at 50% 0%, #23231f 0%, #101010 55%, #070706 100%);
    color:#cfd2cb;
    font-family:"Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    padding:24px 12px 60px;
  }
  .wrap{max-width:1160px;margin:0 auto}
  .masthead{text-align:center;margin-bottom:18px}
  .masthead h1{
    font:700 13px/1.2 "Arial Narrow",Arial,sans-serif;
    letter-spacing:.42em;text-transform:uppercase;color:#8d918a;margin:0 0 6px;
  }
  .masthead p{margin:0;font:400 12px/1.5 "Arial Narrow",Arial;letter-spacing:.14em;color:#5f625c;text-transform:uppercase}

  /* ---------- rack scaling ---------- */
  #stage{width:100%;display:flex;justify-content:center}
  #scaler{transform-origin:top center}
  .panel{
    position:relative;width:1120px;height:268px;
    background:
      linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 12%,rgba(0,0,0,.28) 92%),
      repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,0) 1px 3px),
      linear-gradient(90deg,#111211 0%,#0a0b0a 20%,#131413 50%,#0a0b0a 80%,#111211 100%);
    border-radius:3px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -1px 0 rgba(0,0,0,.9),
      0 26px 50px -12px rgba(0,0,0,.9),
      0 2px 0 rgba(255,255,255,.04);
    overflow:hidden;
    user-select:none;
  }
  .panel.off{filter:saturate(.5) brightness(.86)}
  .schem{position:absolute;inset:0;pointer-events:none;opacity:.28}

  /* rack ears + handles */
  .ear{position:absolute;top:0;bottom:0;width:58px;
    background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(0,0,0,.35));}
  .ear.l{left:0}.ear.r{right:0;background:linear-gradient(270deg,rgba(255,255,255,.05),rgba(0,0,0,.35))}
  .screw{position:absolute;width:13px;height:13px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#d7d9d2,#7f827b 55%,#3a3c37 100%);
    box-shadow:inset 0 -1px 1px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.8)}
  .screw::after{content:"";position:absolute;left:2px;right:2px;top:5.5px;height:2px;
    background:#2a2c28;border-radius:1px;box-shadow:0 1px 0 rgba(255,255,255,.18)}
  .handle{position:absolute;top:64px;height:140px;width:20px;border-radius:10px;
    background:linear-gradient(90deg,#4a4d47,#c9ccc4 35%,#8f938b 60%,#33352f);
    box-shadow:0 3px 8px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.4)}
  .handle::before,.handle::after{content:"";position:absolute;left:-4px;width:28px;height:16px;border-radius:4px;
    background:linear-gradient(180deg,#b9bcb4,#4c4f49);box-shadow:0 2px 4px rgba(0,0,0,.7)}
  .handle::before{top:-12px}.handle::after{bottom:-12px}
  .handle.l{left:18px}.handle.r{right:18px}

  /* ---------- silkscreen type ---------- */
  .silk{position:absolute;font-family:"Arial Narrow",Arial,sans-serif;color:var(--silk);
    text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;pointer-events:none;line-height:1}
  .silk.c{transform:translateX(-50%)}
  .s6{font-size:6.5px}.s7{font-size:7.5px}.s8{font-size:8.5px}.s10{font-size:10px}
  .dim{color:var(--silk-dim)}
  .rule{position:absolute;border:1px solid rgba(232,233,228,.55);border-radius:4px;pointer-events:none}

  /* ---------- logo ---------- */
  .logo{position:absolute;pointer-events:none;display:flex;align-items:baseline;color:#f2f3ee}
  .logo .g{font:italic 700 30px/1 Georgia,"Times New Roman",serif;letter-spacing:-.01em}
  .logo .mark{width:26px;height:16px;margin:0 5px 0 3px;align-self:center}
  .logo .l{font:italic 700 30px/1 Georgia,"Times New Roman",serif}

  /* ---------- knobs ---------- */
  .knob-wrap{position:absolute;touch-action:none;cursor:grab}
  .knob-wrap.turning{cursor:grabbing}
  .knob-wrap.turning .knob{box-shadow:
      0 6px 12px -2px rgba(0,0,0,.85),
      0 0 0 1px rgba(140,210,255,.35),
      inset 0 2px 3px rgba(255,255,255,.55),
      inset 0 -3px 6px rgba(0,0,0,.6)}
  .cap{cursor:ns-resize}
  .knob-wrap:focus-visible{outline:2px solid #6fd6ff;outline-offset:6px;border-radius:50%}

  /* ---------- "this turns" ----------
     The panel is a photoreal illustration, so a drawn ring alone reads as engraving.
     At rest each live knob carries a faint rim; hover and focus brighten it; and one
     knob nudges once, because only movement cannot be mistaken for hardware. */
  /* 2px at .38: the panel renders about half size in the page, and a 1px hairline
     at .22 disappeared entirely at that scale. */
  .knob-wrap::after{content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;
    border:2px solid rgba(214,180,124,.38);transition:border-color .18s cubic-bezier(.4,0,.2,1)}
  .knob-wrap:hover::after,.knob-wrap:focus-visible::after,.knob-wrap.turning::after{border-color:rgba(226,196,145,.62)}
  .knob-wrap.hinting{animation:knob-hint 760ms cubic-bezier(.16,1,.3,1) 1}
  .knob-wrap.hinting::after{border-color:rgba(226,196,145,.62)}
  @keyframes knob-hint{
    0%{transform:rotate(0)}
    38%{transform:rotate(9deg)}
    72%{transform:rotate(-4deg)}
    100%{transform:rotate(0)}
  }
  @media (prefers-reduced-motion:reduce){.knob-wrap.hinting{animation:none}}
  .ticks{position:absolute;inset:-11px;pointer-events:none}
  .knob{position:absolute;inset:0;border-radius:50%;
    background:
      radial-gradient(circle at 50% 22%,#fbfbf8 0%,#d3d6cf 22%,#a5a89f 46%,#6b6e67 72%,#303230 92%,#171816 100%);
    box-shadow:
      0 6px 12px -2px rgba(0,0,0,.85),
      0 1px 0 rgba(255,255,255,.25),
      inset 0 2px 3px rgba(255,255,255,.55),
      inset 0 -3px 6px rgba(0,0,0,.6);
  }
  .knurl{position:absolute;inset:0;border-radius:50%;
    background:repeating-conic-gradient(from 0deg,
      rgba(255,255,255,.16) 0deg 1.4deg, rgba(0,0,0,.22) 1.4deg 3deg);
    -webkit-mask:radial-gradient(circle,transparent 56%,#000 58%,#000 100%);
    mask:radial-gradient(circle,transparent 56%,#000 58%,#000 100%);
    opacity:.75}
  .cap{position:absolute;inset:22%;border-radius:50%;
    background:radial-gradient(circle at 45% 30%,#e9ebe5,#9fa29a 60%,#585b54 100%);
    box-shadow:inset 0 -1px 2px rgba(0,0,0,.5),0 1px 1px rgba(255,255,255,.25)}
  .ptr{position:absolute;left:50%;top:5%;width:3px;height:26%;margin-left:-1.5px;border-radius:2px;
    background:linear-gradient(180deg,#1a1b19,#3d3f3a);box-shadow:0 1px 0 rgba(255,255,255,.35)}
  .knob-spin{position:absolute;inset:0;border-radius:50%}

  /* ---------- toggles ---------- */
  .tog{position:absolute;width:20px;height:34px;cursor:pointer;touch-action:none;
    display:flex;align-items:center;justify-content:center}
  .tog:focus-visible{outline:2px solid #6fd6ff;outline-offset:3px;border-radius:4px}
  .tog .base{position:absolute;width:19px;height:19px;border-radius:50%;
    background:radial-gradient(circle at 40% 30%,#c8cbc3,#7c7f78 55%,#2b2d29 100%);
    box-shadow:inset 0 -1px 2px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.8)}
  .tog .bat{position:absolute;width:7px;height:19px;border-radius:4px;transform-origin:50% 90%;
    background:linear-gradient(90deg,#5e615b,#e2e4dd 40%,#9a9d95 70%,#3b3d38);
    box-shadow:0 2px 4px rgba(0,0,0,.8);transition:transform .12s cubic-bezier(.3,1.6,.5,1)}
  .tog[data-pos="0"] .bat{transform:translateY(-7px) rotate(-22deg)}
  .tog[data-pos="1"] .bat{transform:translateY(-7px) rotate(22deg)}

  /* ---------- LED / jacks ---------- */
  .led{position:absolute;width:9px;height:9px;border-radius:50%;
    background:#123b1c;box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 0 0 2px rgba(0,0,0,.6)}
  .led.on{background:var(--led);box-shadow:0 0 10px 2px rgba(57,255,106,.75),0 0 0 2px rgba(0,0,0,.6)}
  .jack{position:absolute;width:26px;height:26px;border-radius:50%;
    background:radial-gradient(circle at 40% 30%,#b6b9b1,#6d706a 45%,#232420 100%);
    box-shadow:inset 0 -2px 3px rgba(0,0,0,.7),0 2px 4px rgba(0,0,0,.8)}
  .jack::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#050604;
    box-shadow:inset 0 2px 3px rgba(0,0,0,.9)}

  /* ---------- value bubble ---------- */
  #bubble{position:fixed;z-index:50;pointer-events:none;opacity:0;transition:opacity .12s;
    background:#0d0f0d;border:1px solid #3c403a;border-radius:3px;padding:5px 9px;
    font:700 11px/1 "Arial Narrow",Arial;letter-spacing:.1em;color:#b9ffcb;
    text-transform:uppercase;box-shadow:0 6px 18px rgba(0,0,0,.8)}
  #bubble.show{opacity:1}

  /* ---------- transport shelf ---------- */
  .shelf{width:1120px;max-width:100%;margin:16px auto 0;
    background:linear-gradient(180deg,#1a1b19,#0e0f0e);
    border:1px solid #2a2c28;border-radius:3px;padding:14px 18px;
    display:flex;flex-wrap:wrap;gap:14px;align-items:center;
    box-shadow:0 14px 30px -14px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07)}
  .btn{appearance:none;border:1px solid #4a4d46;border-radius:3px;cursor:pointer;
    background:linear-gradient(180deg,#3a3d38,#212320);color:#dfe2db;
    font:700 11px/1 "Arial Narrow",Arial;letter-spacing:.22em;text-transform:uppercase;
    padding:12px 20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 4px rgba(0,0,0,.6)}
  .btn:hover{background:linear-gradient(180deg,#474a44,#282a26)}
  .btn:active{transform:translateY(1px)}
  .btn.primary{border-color:#2f6b3f;background:linear-gradient(180deg,#2c6b3d,#17381f);color:#d8ffe3}
  .btn.primary:hover{background:linear-gradient(180deg,#357f49,#1b4325)}
  .btn:focus-visible{outline:2px solid #6fd6ff;outline-offset:2px}
  .seg{display:flex;border:1px solid #4a4d46;border-radius:3px;overflow:hidden}
  .seg button{appearance:none;border:0;cursor:pointer;background:#1c1e1b;color:#8b8f88;
    font:700 10px/1 "Arial Narrow",Arial;letter-spacing:.2em;text-transform:uppercase;padding:11px 15px}
  .seg button[aria-pressed="true"]{background:#3b3e38;color:#eef0ea}
  .readout{flex:1 1 260px;min-width:200px;
    background:#060706;border:1px solid #262824;border-radius:3px;padding:10px 12px;
    font:700 11px/1.4 "Arial Narrow",Arial;letter-spacing:.14em;color:#6ef09a;text-transform:uppercase;
    text-shadow:0 0 8px rgba(110,240,154,.35)}
  .transport{flex:1 1 100%;display:flex;align-items:center;gap:12px;
    border-top:1px solid #262824;padding-top:13px;margin-top:1px}
  .tc{font:700 11px/1 "Arial Narrow",Arial;letter-spacing:.14em;color:#7f8379;min-width:38px;
    font-variant-numeric:tabular-nums}
  .track{flex:1;height:8px;border-radius:4px;cursor:pointer;position:relative;
    background:#060706;border:1px solid #262824;box-shadow:inset 0 1px 3px rgba(0,0,0,.9)}
  .track:focus-visible{outline:2px solid #6fd6ff;outline-offset:3px}
  .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;
    background:linear-gradient(90deg,#1f6b39,#6ef09a);box-shadow:0 0 8px rgba(110,240,154,.4)}
  .loopbtn{appearance:none;cursor:pointer;border:1px solid #4a4d46;border-radius:3px;
    background:#1c1e1b;color:#8b8f88;font:700 10px/1 "Arial Narrow",Arial;
    letter-spacing:.2em;text-transform:uppercase;padding:8px 12px}
  .loopbtn[aria-pressed="true"]{background:#3b3e38;color:#eef0ea}
  .loopbtn:focus-visible{outline:2px solid #6fd6ff;outline-offset:2px}
  .siglamp{display:flex;align-items:center;gap:7px;font:700 10px/1 "Arial Narrow",Arial;
    letter-spacing:.2em;color:#6b6f68;text-transform:uppercase}
  .siglamp i{width:9px;height:9px;border-radius:50%;background:#3a1a12;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.2)}
  .siglamp i.lit{background:#ffb347;box-shadow:0 0 9px 2px rgba(255,179,71,.6)}
  .tog.flash .base{animation:flash .4s ease-in-out 6}
  @keyframes flash{50%{box-shadow:0 0 0 4px rgba(255,179,71,.85),inset 0 -1px 2px rgba(0,0,0,.7)}}
  .filelabel{font:700 10px/1 "Arial Narrow",Arial;letter-spacing:.2em;color:#7e827b;text-transform:uppercase;
    border:1px dashed #45483f;border-radius:3px;padding:11px 14px;cursor:pointer}
  .filelabel:hover{color:#c6cabf;border-color:#6c7065}
  input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
  .notes{max-width:1120px;margin:22px auto 0;
    font:400 12.5px/1.75 "Arial Narrow",Arial;letter-spacing:.05em;color:#767a72}
  .notes b{color:#a9ada4;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:11px}
  .notes ul{margin:6px 0 0;padding-left:18px}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

@font-face{font-family:Manrope;src:url('../css/fonts/manrope-latin.woff2') format('woff2');font-display:swap}
:root{--led:#e2bc85;--silk:#f1e9dc;--silk-dim:#b1ab9f}
html,body{padding:0;background:#000;color:#f1e9dc;font-family:Manrope,Arial,sans-serif}
.wrap{max-width:1312px;padding:0 0 8px}.panel{border:1px solid #635c4a;background-color:#0a0a08}.schem{opacity:.23}
.session-bar{display:flex;align-items:center;gap:24px;padding:24px 0;border-block:1px solid #393a30;margin-bottom:24px}.session-track{flex:1;min-width:0}.session-track>div{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:#b5aea2}.session-track>div>span:first-child{color:#f1e9dc}.session-track input{display:block;width:100%;height:24px;margin:8px 0 0;accent-color:#d4b381;cursor:pointer}.btn{font:500 11px/1.4 Manrope,Arial,sans-serif;letter-spacing:.1em;border:1px solid #84775e;border-radius:0;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px),linear-gradient(115deg,#303129,#171913);color:#eee6d9;min-height:44px;padding:12px 20px;box-shadow:0 0 0 2px #000 inset,0 0 0 3px #8c816244 inset;white-space:nowrap}.btn.primary{background:repeating-linear-gradient(0deg,#fff1 0 1px,transparent 1px 3px),linear-gradient(120deg,#c1a475,#eddbb7,#b79a6c);border-color:#f0dfbd;color:#13140e}.btn.primary:hover{background:linear-gradient(115deg,#dbc096,#f2e3c7,#c5ab7d)}.btn.reset{border:0;box-shadow:none;background:transparent;text-transform:none;letter-spacing:0;color:#b5aea2;padding-inline:0}.btn:disabled{opacity:.6;cursor:wait}.btn:focus-visible,.knob-wrap:focus-visible,.tog:focus-visible,input:focus-visible{outline:2px solid #d4b381;outline-offset:3px}
.panel-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.panel-toolbar p{font-size:12px;color:#c5b18e;margin:0;line-height:1.5}
/* The gesture belongs above the panel, where it is read before the knobs are seen. */
.toolbar-hint{margin-inline:auto 0;font:600 11px/1.5 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8d8678}
@media(max-width:700px){.toolbar-hint{display:none}}.zoom{display:none}.instructions{font-size:12px;line-height:1.7;color:#b5aea2;margin:24px 0 0;text-align:center}.phone-tip{display:none}.panel-pan{gap:8px;align-items:center;margin-top:16px;flex-wrap:wrap}.panel-pan:not([hidden]){display:flex}.panel-pan>span{flex-basis:100%;font-size:11px;color:#b5aea2;margin-bottom:8px}.panel-pan .btn{font-size:10px;letter-spacing:0;padding:8px 12px;flex:1}.tog[data-static]{pointer-events:none}.led.on{background:#e2bc85;box-shadow:0 0 8px #d4b38188}.knob-wrap.turning .knob{box-shadow:0 6px 12px #000b,0 0 0 1px #d4b381,inset 0 2px 3px #fff7,inset 0 -3px 6px #0009}
#bubble{color:#f1e9dc;border-color:#9c8764;font-family:Manrope,Arial,sans-serif;font-size:10px;letter-spacing:0;max-width:90vw;line-height:1.5}#stage{display:block;overflow:auto;overscroll-behavior-x:contain;scrollbar-color:#8b7858 #14150f;scrollbar-width:thin;padding-bottom:16px}#rack-space{position:relative;margin:auto}#scaler{position:absolute;left:0;top:0;transform-origin:top left}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:900px){.zoom{display:block}.phone-tip{display:block}.session-bar{gap:16px;flex-wrap:wrap;margin-bottom:16px;padding-block:16px}.session-track{order:3;flex-basis:100%}.session-bar>#play{flex:1}.session-bar>.reset{padding-inline:8px}.panel-toolbar{align-items:start}.panel-toolbar p{padding-top:10px}.instructions{text-align:left;margin-top:16px}}
@media(forced-colors:active){.btn,.panel{border:1px solid ButtonText}.knob{outline:1px solid ButtonText}.ptr{background:ButtonText}}

.instructions{text-align:center}

/* Real GP-2000 front photograph; the moving controls share its measured geometry. */
.panel{height:200px;border:0;border-radius:0;background:url('gp2000-photo/faceplate.webp') center/100% 100% no-repeat;box-shadow:none}
.knob,.knob-wrap.turning .knob{background-size:100% 100%;background-repeat:no-repeat;background-color:transparent;box-shadow:none}
.cap{background:none;box-shadow:none}
.knob-wrap::after{inset:-3px;border:1px solid transparent}
.knob-wrap:hover::after,.knob-wrap:focus-visible::after,.knob-wrap.turning::after{border-color:#d4b381}
.tog .base{width:13px;height:13px}
.tog .bat{width:4px;height:13px;border-radius:2px;transform-origin:50% 90%}
.tog[data-pos="0"] .bat{transform:translateY(5px) rotate(12deg)}
.tog[data-pos="1"] .bat{transform:translateY(-5px) rotate(-12deg)}
.tog.slide .base{width:7px;height:12px;border-radius:0;background:#111511;box-shadow:0 0 0 1px #393b35}
.tog.slide .bat{width:3px;height:5px;border-radius:0;background:linear-gradient(90deg,#777a70,#e0ddd0,#777a70);box-shadow:0 1px 1px #000}
.tog.slide[data-pos="0"] .bat{transform:translateY(3px)}
.tog.slide[data-pos="1"] .bat{transform:translateY(-3px)}
.tog.reference .base,.tog.reference .bat{display:none}
.tog.metal .base,.tog.metal .bat{display:none}
.tog.metal:hover,.tog.metal:focus-visible{outline:1px solid #d4b381;outline-offset:2px;border-radius:50%}
.led{background:#164328;box-shadow:none}
.led.on{background:#57b66c;box-shadow:0 0 5px #57b66c88}