/* MIDI in a Bottle — dark theme.
   Panel separation between --void and --slate is only 1.31:1, so panel edges are
   carried by hairline borders and rim glow, never by the fill alone.
   Idle controls sit at --mist; lit ones jump to --teal plus a --cyan glow, so the
   change is brightness as well as hue. */
:root{
  --void:#050B12;
  --slate:#132838;
  --slate-hi:#1B3548;
  --teal:#00A8B5;
  --cyan:#72F0F6;
  --mist:#B7C8D2;
  --mist-dim:#6B818F;
  --frost:#F7FBFC;
  --alert:#E8705E;
  --hair:rgba(0,168,181,.28);
  --hair-soft:rgba(183,200,210,.14);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
/* Solid colour on the body with the glow on a fixed pseudo-element.
   background-attachment:fixed is unreliable on mobile browsers and leaves gaps
   on pages taller than the viewport. */
body{
  background:var(--void);
  color:var(--mist);
  font-family:Poppins,system-ui,-apple-system,sans-serif;
  font-size:14px;overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(90% 42% at 50% -6%, rgba(0,168,181,.17), transparent 62%),
    radial-gradient(70% 40% at 82% 22%, rgba(114,240,246,.06), transparent 70%),
    linear-gradient(180deg,#081019 0%, var(--void) 45%, #02060C 100%)}
.wrap{position:relative;max-width:880px;margin:0 auto;padding:18px 14px 34px}

/* ---- masthead ---- */
.mast{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-bottom:1px solid var(--hair);padding-bottom:14px;margin-bottom:18px}
.mast img{height:58px;width:auto;display:block;
  filter:drop-shadow(0 0 14px rgba(0,168,181,.55))}
.wordmark{display:flex;flex-direction:column;gap:3px;min-width:0}
.mark{font-family:Poppins,sans-serif;font-weight:600;font-size:27px;letter-spacing:.02em;
  line-height:1;color:var(--frost);white-space:nowrap}
.mark em{font-style:normal;font-weight:300;color:var(--cyan)}
.sub{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--teal)}
.mast .tog{margin-left:auto}

/* ---- setup ---- */
#setup{border:1px solid var(--hair);border-radius:16px;padding:4px 16px 18px;margin-bottom:20px;
  background:linear-gradient(180deg,var(--slate),rgba(19,40,56,.55));
  box-shadow:inset 0 1px 0 rgba(114,240,246,.10), 0 6px 26px rgba(0,0,0,.5)}
.setrow{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin:8px 0}
.setrow label{display:flex;flex-direction:column;gap:5px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist-dim)}
select{font-family:"IBM Plex Mono",monospace;font-size:12px;padding:7px 9px;border-radius:8px;
  border:1px solid var(--hair);background:var(--void);color:var(--frost)}
select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,168,181,.22)}
select:disabled{opacity:.45}
.ports{display:flex;flex-direction:column;gap:5px;margin:6px 0}
.port{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:10px;
  background:rgba(5,11,18,.7);border:1px solid var(--hair-soft);font-size:13px;color:var(--mist)}
.port .pdot{width:8px;height:8px;border-radius:50%;background:var(--mist-dim);flex:0 0 auto;transition:all .1s}
.port.live .pdot{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.port .pname2{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.port .ptag{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;
  color:var(--teal);border:1px solid var(--hair);border-radius:5px;padding:1px 6px}
.empty,.meta{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;
  color:var(--mist-dim);padding:6px 0;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.meta b{color:var(--cyan);font-weight:500}
.meta.alert{color:var(--alert)}
.meta.alert b{color:var(--alert)}

/* ---- embouchure ---- */
.emb-shell{position:relative;border-radius:26px;padding:15px;
  background:linear-gradient(180deg,var(--slate),rgba(19,40,56,.5));
  border:1px solid var(--hair);
  box-shadow:inset 0 1px 0 rgba(114,240,246,.12), 0 8px 34px rgba(0,0,0,.55)}
.embrow{display:flex;gap:12px;align-items:stretch}
.emb{position:relative;flex:1;min-width:0;height:210px;border-radius:18px;overflow:hidden;
  cursor:crosshair;touch-action:none;background:var(--void);
  box-shadow:inset 0 0 0 1px var(--hair), inset 0 0 40px rgba(0,168,181,.10)}
.emb canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.emb-labels{position:absolute;inset:0;pointer-events:none;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.18em;color:rgba(183,200,210,.42)}
.emb-labels span{position:absolute}
.lb-l{left:10px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl}
.lb-r{right:10px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl}
.lb-t{top:9px;left:50%;transform:translateX(-50%)}
.lb-b{bottom:9px;left:50%;transform:translateX(-50%)}

/* ---- levers ---- */
.expr{display:flex;gap:10px;flex:0 0 auto}
.lvcell{display:flex;flex-direction:column;align-items:center;gap:6px;width:40px}
.lever{position:relative;width:36px;height:210px;border-radius:18px;cursor:ns-resize;touch-action:none;
  background:linear-gradient(100deg,#0A1620,#0D1E2B 45%,#071119);
  box-shadow:inset 0 0 0 1px var(--hair-soft), inset 0 4px 12px rgba(0,0,0,.7)}
.lever i{position:absolute;left:3px;right:3px;bottom:3px;border-radius:15px;
  height:calc(16px + (100% - 36px) * var(--v,0));
  background:linear-gradient(180deg,var(--cyan),var(--teal));opacity:.42;transition:opacity .15s}
.lever.hot i{opacity:.7;box-shadow:0 0 22px rgba(0,168,181,.5)}
.lever b{position:absolute;left:50%;width:32px;height:32px;border-radius:50%;
  bottom:calc(18px + (100% - 36px) * var(--v,0));transform:translate(-50%,50%);
  background:radial-gradient(circle at 36% 30%, #33485A, #1B3548 60%, #0C1A26 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.7), inset 0 0 0 1px rgba(183,200,210,.28)}
.lever.hot b{background:radial-gradient(circle at 36% 30%, var(--frost), var(--cyan) 45%, var(--teal) 100%);
  box-shadow:0 0 18px rgba(114,240,246,.65), inset 0 0 0 1px rgba(247,251,252,.7)}
.lvcell span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-dim);font-weight:500}
.readout{display:flex;gap:16px;margin-top:12px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.09em;color:var(--mist-dim);flex-wrap:wrap}
.readout b{color:var(--cyan);font-weight:500}

/* ---- presets ---- */
.spine{position:relative;margin:24px 0 6px;padding:16px 8px 10px}
.spine::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-80%);
  border-radius:2px;background:linear-gradient(90deg,transparent,rgba(0,168,181,.35) 10%,var(--teal) 50%,rgba(0,168,181,.35) 90%,transparent);
  box-shadow:0 0 14px rgba(0,168,181,.4)}
.keys-row{position:relative;display:flex;justify-content:space-between;gap:6px;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.keys-row::-webkit-scrollbar{display:none}
.pcell{display:flex;flex-direction:column;align-items:center;flex:1 0 62px;min-width:62px}
.pkey{position:relative;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:radial-gradient(circle at 36% 30%, #2A3F51, var(--slate) 58%, #0A151F 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.6), inset 0 0 0 1px rgba(183,200,210,.22);
  display:grid;place-items:center;transition:transform .14s, box-shadow .14s}
.pkey::after{content:"";position:absolute;inset:10px;border-radius:50%;
  background:rgba(183,200,210,.12);transition:background .14s}
.pkey:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.6), inset 0 0 0 1px var(--hair)}
.pkey.on{background:radial-gradient(circle at 36% 30%, var(--frost), var(--cyan) 48%, var(--teal) 100%);
  box-shadow:0 0 22px rgba(0,168,181,.6), inset 0 0 0 1px rgba(247,251,252,.6)}
.pkey.on::after{background:rgba(5,11,18,.85)}
.pkey:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.pname{margin-top:7px;font-size:9.5px;letter-spacing:.06em;line-height:1.2;font-weight:500;
  text-transform:uppercase;color:var(--mist-dim);text-align:center}
.pcell:has(.pkey.on) .pname{color:var(--cyan)}

/* ---- tabs ---- */
.tabs{display:flex;gap:4px;margin:30px 0 0;border-bottom:1px solid var(--hair-soft);
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{font-family:Poppins,sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;padding:12px 18px;border:0;background:none;color:var(--mist-dim);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
  transition:color .14s,border-color .14s}
.tab:hover{color:var(--mist)}
.tab.on{color:var(--cyan);border-bottom-color:var(--teal)}
.tab:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px}
.panel{padding:22px 0 4px}
.panel-note{font-size:12.5px;line-height:1.6;color:var(--mist-dim);max-width:62ch;margin:-4px 0 20px}

/* ---- knobs ---- */
.knobs{display:grid;gap:22px 10px;grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.knob{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px}
.k-dial{position:relative;width:62px;height:62px;cursor:ns-resize;touch-action:none;
  border-radius:50%;outline:none}
.k-dial svg{width:100%;height:100%;display:block;overflow:visible}
.k-track{fill:none;stroke:#17293A;stroke-width:7;stroke-linecap:round;
  stroke-dasharray:188.5 251.3;transform:rotate(135deg);transform-origin:50px 50px}
.k-fill{fill:none;stroke:var(--teal);stroke-width:7;stroke-linecap:round;
  transform:rotate(135deg);transform-origin:50px 50px;transition:stroke .15s}
.knob.lit .k-fill{stroke:var(--cyan);filter:drop-shadow(0 0 5px rgba(114,240,246,.7))}
.k-ptr{stroke:var(--mist-dim);stroke-width:5;stroke-linecap:round;
  transform-origin:50px 50px;transition:stroke .15s}
.knob.lit .k-ptr{stroke:var(--frost)}
.k-cap{position:absolute;inset:14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 30%, #22394C, #0C1A26 70%, #060E16);
  box-shadow:inset 0 0 0 1px rgba(183,200,210,.12), 0 2px 6px rgba(0,0,0,.6)}
.k-dial.drag .k-cap,.k-dial:hover .k-cap{box-shadow:inset 0 0 0 1px var(--hair), 0 2px 8px rgba(0,0,0,.7)}
.k-dial:focus-visible{box-shadow:0 0 0 3px rgba(114,240,246,.45)}
.k-lab{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mist);
  font-weight:500;text-align:center;line-height:1.2}
.k-val{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--cyan);letter-spacing:.02em}
.knob .learn{display:none;position:absolute;top:-2px;right:2px;width:21px;height:16px;
  border-radius:5px;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:8.5px;
  line-height:1;color:var(--mist-dim);border:1px solid var(--hair);background:var(--void)}
body.learnmode .knob .learn{display:block}
.knob .learn.armed{background:var(--cyan);color:var(--void);border-color:var(--cyan);
  box-shadow:0 0 12px rgba(114,240,246,.6)}

.togs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:26px}
.tog{font-family:Poppins,sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 14px;border-radius:20px;border:1px solid var(--hair-soft);cursor:pointer;
  background:rgba(19,40,56,.6);color:var(--mist);transition:all .14s}
.tog:hover{border-color:var(--hair);color:var(--frost)}
.tog.on{background:var(--teal);color:var(--void);border-color:var(--cyan);
  box-shadow:0 0 16px rgba(0,168,181,.55)}
.tog:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---- keyboard ---- */
.kbd-shell{margin-top:26px;border-radius:14px;padding:9px;
  background:linear-gradient(180deg,var(--slate),#08121B);
  border:1px solid var(--hair-soft);box-shadow:0 8px 30px rgba(0,0,0,.6)}
.kbd{position:relative;height:150px;touch-action:none;user-select:none;-webkit-user-select:none}
.wk,.bk{position:absolute;top:0;border-radius:0 0 6px 6px;cursor:pointer;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px;
  font-family:"IBM Plex Mono",monospace;font-size:9px}
.wk{height:100%;background:linear-gradient(180deg,var(--frost) 0%,#DCE6EC 80%,var(--mist) 100%);
  border:1px solid #6E8593;border-top:none;color:var(--mist-dim)}
.bk{height:62%;width:var(--bw);background:linear-gradient(180deg,#1B3548 0%,#08121B 88%,#000 100%);
  border-radius:0 0 5px 5px;z-index:2;color:#3E5666;box-shadow:0 3px 7px rgba(0,0,0,.7)}
.wk.down{background:linear-gradient(180deg,var(--cyan),var(--teal));color:var(--void);
  box-shadow:0 0 20px rgba(114,240,246,.6)}
.bk.down{background:linear-gradient(180deg,var(--cyan),#037781);color:var(--void);
  box-shadow:0 0 18px rgba(114,240,246,.55)}

.foot{margin-top:20px;font-family:"IBM Plex Mono",monospace;font-size:10px;line-height:1.75;
  letter-spacing:.04em;color:var(--mist-dim)}
.foot b{color:var(--teal)}

/* ---- gate ---- */
.gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;cursor:pointer;
  background:
    radial-gradient(70% 45% at 50% 34%, rgba(0,168,181,.22), transparent 66%),
    linear-gradient(180deg,#08121B, var(--void) 55%, #02060C 100%)}
.gate .g-in{text-align:center;padding:22px;max-width:560px}
.gate .lockup{width:min(78vw,430px);height:auto;margin:0 auto;display:block;
  filter:drop-shadow(0 0 46px rgba(0,168,181,.45));
  animation:bob 4.4s ease-in-out infinite}
.gate p{font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--teal);margin-top:6px;line-height:1.8}
.gate p.alert{color:var(--alert);letter-spacing:.06em;text-transform:none;font-size:12px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.gate img{animation:none}}

@media(max-width:520px){
  .mast img{height:50px}
  .mark{font-size:21px}
  .emb{height:180px}
  .lever{height:180px;width:30px}
  .lever b{width:26px;height:26px;bottom:calc(15px + (100% - 30px) * var(--v,0))}
  .lever i{height:calc(13px + (100% - 30px) * var(--v,0))}
  .lvcell{width:34px}
  .kbd{height:130px}
  .pkey{width:38px;height:38px}
  .pkey::after{inset:9px}
  .pcell{flex:0 0 54px;min-width:54px}
  .pname{font-size:8.5px}
  .knobs{gap:18px 6px;grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
  .k-dial{width:54px;height:54px}
  .tab{padding:11px 13px;font-size:10px;letter-spacing:.14em}
  .spine{padding:16px 0 10px}
  .gate .lockup{width:82vw}
}

/* embedded mode: the host page carries the branding */
body.embed .mast{border-bottom:none;padding-bottom:0;margin-bottom:10px;justify-content:flex-end}
body.embed .mast img,body.embed .wordmark{display:none}
body.embed .wrap{padding-top:12px}