/* JED-43 Stage + Red Room — original blood-moon skin. Loaded only from stage.html. */
:root{
  --bg:#050506; --bg2:#0a0809; --ink:#ece6dc; --mute:#9a9088;
  --blood:#c41e3a; --blood2:#8a0e1c; --blood-glow:rgba(196,30,58,.55);
  --moon:#ff3b3b; --bone:#f5ead8; --gold:#e8c877; --line:rgba(196,30,58,.28);
  --f-display:"Cinzel Decorative",Cinzel,Georgia,serif;
  --f-serif:Cinzel,Georgia,serif;
  --f-italic:"Cormorant Garamond",Georgia,serif;
  --f-cond:Oswald,"Arial Narrow",sans-serif;
  --f-sans:Inter,system-ui,sans-serif;
  --f-script:"Great Vibes","Segoe Script","Apple Chancery",cursive;
  --hit:48px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:16px/1.45 var(--f-sans);-webkit-font-smoothing:antialiased}
html{-webkit-text-size-adjust:100%}
button,input,select{font:inherit;color:inherit}
button{appearance:none;-webkit-appearance:none}
a{color:var(--gold);text-decoration:none}
a:hover,a:focus-visible{color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2{margin:0;font-family:var(--f-display);font-weight:700;letter-spacing:.04em}

.hit{
  min-height:var(--hit);min-width:var(--hit);padding:.55rem .9rem;
  font:500 .72rem/1 var(--f-cond);letter-spacing:.14em;text-transform:uppercase;
  background:rgba(8,6,7,.85);color:var(--bone);border:1px solid var(--line);
  cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
.hit:hover,.hit:focus-visible{border-color:var(--blood);color:#fff}
.hit:disabled{opacity:.4;cursor:default}
.hit[aria-pressed="true"],.hit.is-on{background:var(--blood);border-color:var(--blood);color:#fff}
.rec.is-on,.rec[aria-pressed="true"]{background:#8a0e1c;box-shadow:0 0 0 2px rgba(196,30,58,.45)}

/* ----- header ----- */
.top{
  position:relative;z-index:4;display:flex;align-items:center;gap:.8rem;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-top));
  min-height:56px;
}
.top__back{
  min-height:var(--hit);display:inline-flex;align-items:center;padding:0 .8rem;
  font:500 .72rem/1 var(--f-cond);letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line);
}
.top__brand{flex:1;text-align:center}
.top__kicker{margin:0;font:500 .62rem var(--f-cond);letter-spacing:.36em;text-transform:uppercase;color:var(--blood)}
.top__title{font-size:1.35rem;color:var(--bone)}
.top__moon{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd0d0,#c41e3a 55%,#4a0610);box-shadow:0 0 16px var(--blood-glow)}

/* ----- hall / stage ----- */
.hall{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:calc(100svh - 7.5rem);margin:0 .4rem 1rem;
  background:
    radial-gradient(ellipse 50% 40% at 50% 8%,rgba(196,30,58,.28),transparent 60%),
    linear-gradient(180deg,#12080b 0%,#070406 42%,#050304 100%);
  border:1px solid var(--line);
}
.moon{
  position:absolute;top:4%;left:50%;width:min(28vw,160px);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 34%,#ffd6d0 0%,#ff3b3b 38%,#7a1018 68%,#1a0306 100%);
  box-shadow:0 0 40px 10px rgba(196,30,58,.45),0 0 120px rgba(196,30,58,.25);
  z-index:0;
}
.haze{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 36% at 50% 78%,rgba(220,200,190,.16),transparent 70%),
    radial-gradient(ellipse 50% 22% at 30% 70%,rgba(180,40,50,.1),transparent 70%),
    radial-gradient(ellipse 50% 22% at 70% 72%,rgba(180,40,50,.1),transparent 70%);
  opacity:.55;transform:translate3d(0,0,0);
}
.spots{position:absolute;inset:0;z-index:2;pointer-events:none}
.spot{
  position:absolute;top:-8%;width:28%;height:78%;
  background:linear-gradient(180deg,rgba(255,210,210,.32) 0%,rgba(196,30,58,.22) 24%,rgba(196,30,58,.08) 52%,transparent 78%);
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);
  opacity:.55;transform-origin:50% 0;transform:translate3d(0,0,0);
}
.spot--a{left:4%}.spot--b{left:24%}.spot--c{left:48%}.spot--d{left:68%}

/* Slow, cheap motion — compositor only. Off on phones and reduced motion. */
@media (hover:hover) and (pointer:fine){
  .haze{animation:hazeShift 32s ease-in-out infinite alternate}
  .spot--a,.spot--d{animation:spotDim 7.5s ease-in-out infinite alternate}
  .spot--b,.spot--c{animation:spotDim 6.2s ease-in-out infinite alternate-reverse}
}
@keyframes hazeShift{
  from{opacity:.42;transform:translate3d(0,2%,0) scale(1)}
  to{opacity:.7;transform:translate3d(0,-1.5%,0) scale(1.03)}
}
@keyframes spotDim{
  from{opacity:.32} to{opacity:.7}
}
.haze.is-paused,.spots.is-paused .spot{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .haze,.spot{animation:none !important}
}

.stage{
  position:relative;z-index:3;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  grid-template-rows:auto auto auto auto;
  gap:.4rem 0;
  padding:min(22vw,9rem) max(4.5rem, 12%) 1.2rem;
  min-height:32rem;
}
.backwall{
  position:absolute;inset:0 0 38% 0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 100%);
}
.apron{
  position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 0%,rgba(20,8,10,.4) 8%,#1a0a0c 28%,#0c0607 100%);
  box-shadow:inset 0 18px 40px rgba(0,0,0,.45);
}

/* instruments */
.piece{
  position:relative;z-index:2;appearance:none;border:0;background:transparent;
  color:var(--bone);cursor:pointer;touch-action:manipulation;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  min-height:7.2rem;padding:.3rem;
  -webkit-user-select:none;user-select:none;
}
.piece:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.piece__name{
  font:500 .68rem var(--f-cond);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);text-shadow:0 1px 0 #000;
  min-height:28px;display:flex;align-items:center;
}
.piece__draw{
  width:min(28vw,132px);height:min(22vw,100px);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.piece:hover .piece__draw,.piece:focus-visible .piece__draw{filter:drop-shadow(0 0 12px rgba(196,30,58,.7))}
.piece--drums{grid-column:1;grid-row:1;align-self:end}
.piece--electric{grid-column:2;grid-row:1;align-self:end}
.piece--keys{grid-column:3;grid-row:1;align-self:end}
.piece--acoustic{grid-column:4;grid-row:1;align-self:end}

/* CSS drawings for the four pieces */
.piece__draw--drums{
  background-image:
    radial-gradient(circle at 50% 62%, #2a2a2a 0 22%, transparent 23%),
    radial-gradient(circle at 50% 62%, #111 23% 30%, transparent 31%),
    radial-gradient(circle at 28% 48%, #c41e3a 0 10%, #1a1a1a 11% 16%, transparent 17%),
    radial-gradient(circle at 72% 48%, #d0d0d0 0 11%, #222 12% 17%, transparent 18%),
    radial-gradient(circle at 22% 70%, #8a8a8a 0 8%, #222 9% 13%, transparent 14%),
    radial-gradient(circle at 78% 70%, #777 0 9%, #222 10% 14%, transparent 15%),
    radial-gradient(circle at 50% 86%, #151515 0 14%, #c41e3a 15% 16%, transparent 17%);
}
.piece__draw--electric,.piece__draw--acoustic{
  background:
    linear-gradient(#c9a227,#c9a227) 86% 42%/10% 8% no-repeat,
    linear-gradient(#222,#111) 50% 48%/72% 8% no-repeat,
    radial-gradient(ellipse 42% 70% at 28% 58%, #1a1a1a 0 48%, #c41e3a 52% 58%, transparent 60%),
    radial-gradient(ellipse 28% 40% at 70% 48%, #161616 0 60%, transparent 62%);
}
.piece__draw--acoustic{
  background:
    radial-gradient(circle at 30% 58%, transparent 14%, #3a2418 15% 16%, #c49a6c 17% 42%, #5a3a24 48% 58%, transparent 60%),
    linear-gradient(#3a2418,#2a1a10) 62% 50%/48% 7% no-repeat;
}
.piece__draw--keys{
  background:
    repeating-linear-gradient(90deg,#f5ead8 0 9px,#111 9px 10px) 50% 70%/86% 28% no-repeat,
    linear-gradient(#1a1a1a,#0c0c0c) 50% 68%/92% 42% no-repeat,
    linear-gradient(#2a2a2a,#111) 50% 40%/70% 18% no-repeat;
  box-shadow:0 4px 0 #000;
}

.cables{
  position:absolute;left:2%;right:2%;bottom:18%;height:38%;z-index:1;pointer-events:none;
  stroke:#c41e3a;stroke-width:3;fill:none;opacity:.7;filter:drop-shadow(0 0 4px rgba(196,30,58,.4));
}
.intake{
  position:absolute;z-index:2;left:44%;bottom:22%;
  width:88px;padding:.35rem .45rem .4rem;
  background:linear-gradient(180deg,#2a2a2e,#141416);
  border:1px solid #555;border-radius:4px;
  box-shadow:0 6px 16px #000, inset 0 1px 0 rgba(255,255,255,.12);
  color:#bbb;font:500 .58rem var(--f-cond);letter-spacing:.12em;text-transform:uppercase;text-align:center;
}
.intake__jacks{display:flex;justify-content:space-between;margin-top:.25rem}
.intake__jacks i{width:12px;height:12px;border-radius:50%;background:#111;border:2px solid #666;display:block}
.floorboard{
  position:absolute;z-index:2;right:8%;bottom:20%;
  width:110px;padding:.3rem .4rem;
  background:linear-gradient(180deg,#1a1012,#0c0808);
  border:1px solid var(--line);
  box-shadow:0 6px 16px #000;
  font:500 .58rem var(--f-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:center;
}
.floorboard__faders{display:flex;justify-content:space-around;height:28px;margin-top:.2rem;align-items:flex-end}
.floorboard__faders i{width:4px;background:var(--blood);display:block}
.floorboard__faders i:nth-child(1){height:40%}
.floorboard__faders i:nth-child(2){height:80%}
.floorboard__faders i:nth-child(3){height:55%}
.floorboard__faders i:nth-child(4){height:70%}

/* laptop on the apron */
.laptop{
  grid-column:1 / -1;grid-row:3;justify-self:center;z-index:4;
  width:min(92vw,640px);margin-top:.4rem;
}
.laptop__bezel{
  background:#1a1a1c;border:2px solid #2c2c30;border-bottom:0;
  border-radius:8px 8px 0 0;padding:10px 8px 6px;
  box-shadow:0 0 0 1px #000,0 20px 40px rgba(0,0,0,.55);
}
.laptop__cam{display:block;width:6px;height:6px;margin:0 auto 6px;border-radius:50%;background:#3a3a40}
.laptop__screen{
  background:#050204;min-height:210px;height:34vw;max-height:280px;
  overflow:hidden;border:1px solid #2a1214;position:relative;
}
.laptop__hinge{height:8px;background:linear-gradient(#333,#111);border-radius:0 0 2px 2px}
.laptop__palm{
  height:14px;margin:0 4%;background:linear-gradient(180deg,#2a2a2e,#161618);
  border-radius:0 0 40% 40%/0 0 12px 12px;box-shadow:0 8px 16px rgba(0,0,0,.4);
}

/* Red Room — compact inside the lid, large when maximized (stage still visible around it) */
.desk{
  display:flex;flex-direction:column;height:100%;min-height:0;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%,rgba(196,30,58,.18),transparent 55%),
    #0c0708;
  color:var(--ink);font-size:12px;
}
.desk.is-max{
  position:fixed;z-index:40;
  top:4vh;left:3vw;right:3vw;bottom:4vh;
  width:auto;height:auto;
  border:1px solid var(--line);
  box-shadow:0 0 0 1px #000,0 24px 80px rgba(0,0,0,.7);
  font-size:14px;
}
.desk__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
  padding:.35rem .45rem;border-bottom:1px solid var(--line);background:rgba(8,4,6,.9);
  flex:none;
}
.desk__mark{
  font:700 .78rem var(--f-display);letter-spacing:.1em;color:var(--blood);
  margin-right:.4rem;
}
.desk__field{display:flex;align-items:center;gap:.3rem;font:500 .62rem var(--f-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.desk__field input,.desk__field select{
  min-height:44px;min-width:4.2rem;background:#140a0c;color:var(--bone);
  border:1px solid var(--line);padding:0 .4rem;
}
.transport{display:flex;flex-wrap:wrap;gap:.25rem}
.desk__body{display:flex;flex:1;min-height:0;gap:0}
.cuts{flex:1;min-width:0;overflow:auto;touch-action:pan-y;background:rgba(0,0,0,.25)}
.board{flex:none;width:min(42%,280px);overflow:auto;border-left:1px solid var(--line);background:rgba(8,4,6,.7)}
.desk:not(.is-max) .board{width:38%}
.livebar{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.3rem .45rem;border-top:1px solid var(--line);flex:none}
.livebar__status,.livebar__hint{font:500 .68rem var(--f-cond);letter-spacing:.08em;color:var(--mute)}
.livebar__hint{color:var(--gold)}
.plug{
  position:absolute;z-index:5;right:8px;bottom:52px;width:min(92%,320px);
  background:#12080a;border:1px solid var(--line);padding:.7rem .8rem;
  box-shadow:0 16px 40px rgba(0,0,0,.6);
}
.desk.is-max .plug{right:16px;bottom:64px;width:min(420px,90%)}
.plug h3{font:700 .85rem var(--f-serif);margin:0 0 .5rem;color:var(--bone)}
.plug label{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.35rem 0;font:500 .68rem var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.plug input[type="range"]{flex:1;min-height:28px;accent-color:var(--blood)}
.plug select,.plug input[type="number"]{min-height:40px;background:#140a0c;color:var(--bone);border:1px solid var(--line);padding:0 .4rem}
.plug input[type="checkbox"]{width:44px;height:44px;min-width:44px;accent-color:var(--blood)}

/* arrangement */
.ruler{display:flex;height:22px;border-bottom:1px solid var(--line);font:500 .58rem var(--f-cond);color:var(--mute);position:sticky;top:0;background:#0c0708;z-index:1}
.ruler span{flex:none;border-left:1px solid rgba(196,30,58,.25);padding-left:4px}
.lane{
  position:relative;height:56px;border-bottom:1px solid rgba(196,30,58,.15);
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--beat,48px) - 1px),rgba(196,30,58,.12) calc(var(--beat,48px) - 1px),rgba(196,30,58,.12) var(--beat,48px));
}
.lane__lab{
  position:sticky;left:0;z-index:2;display:flex;align-items:center;
  width:86px;height:100%;padding:0 .5rem;
  font:500 .62rem var(--f-cond);letter-spacing:.1em;text-transform:uppercase;
  background:rgba(12,7,8,.92);color:var(--gold);border-right:1px solid var(--line);
}
.clip{
  position:absolute;top:8px;height:40px;min-width:24px;
  background:linear-gradient(180deg,rgba(196,30,58,.85),rgba(80,10,18,.95));
  border:1px solid #ff6a6a;border-radius:2px;cursor:grab;touch-action:none;
  overflow:hidden;
}
.clip:focus-visible{outline:2px solid var(--gold)}
.clip.is-drag{cursor:grabbing;z-index:3}
.clip canvas{display:block;width:100%;height:100%;pointer-events:none;opacity:.85}
.playhead{
  position:absolute;top:22px;bottom:0;width:2px;background:var(--gold);
  box-shadow:0 0 8px var(--gold);pointer-events:none;z-index:4;display:none;
}
.cuts.is-playing .playhead{display:block}

/* board strips */
.strip{padding:.45rem .5rem;border-bottom:1px solid var(--line)}
.strip__name{font:500 .68rem var(--f-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 .3rem}
.strip__row{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.strip input[type="range"]{flex:1;min-width:72px;min-height:28px;accent-color:var(--blood)}
.strip .hit{min-width:44px;padding:.4rem .45rem;font-size:.62rem}

.attr{
  margin:0 auto 1.2rem;padding:0 1rem;max-width:52rem;
  font:italic 500 .88rem/1.5 var(--f-italic);color:var(--mute);text-align:center;
}
.attr a{font-style:normal}

/* instrument view */
.view{
  position:fixed;inset:0;z-index:50;background:rgba(5,2,4,.96);
  display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.view[hidden]{display:none}
.view__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  padding:.6rem .7rem;border-bottom:1px solid var(--line);flex:none;
}
.view__bar h2{flex:1;font-size:1.05rem;min-width:8rem}
.view__time{font:500 .78rem var(--f-cond);letter-spacing:.1em;color:var(--blood);min-width:3.5rem}
.view__hint{margin:0;padding:.45rem .8rem;font:italic 500 .95rem/1.4 var(--f-italic);color:var(--mute)}
.view__body{flex:1;min-height:0;overflow:auto;padding:.4rem .6rem 1.2rem;-webkit-overflow-scrolling:touch}

/* guitar */
.gtr{display:flex;flex-direction:column;gap:.6rem;min-height:100%}
.gtr__board{
  display:grid;grid-template-rows:repeat(6,minmax(44px,1fr));
  overflow-x:auto;overflow-y:hidden;touch-action:pan-x;
  background:linear-gradient(180deg,#3a2418,#1a100c);
  border:1px solid #5a3a24;min-height:280px;
  -webkit-user-select:none;user-select:none;
}
.gtr__str{display:grid;grid-template-columns:56px repeat(13, minmax(44px,1fr));min-width:628px;position:relative}
.gtr__str::after{
  content:"";position:absolute;left:56px;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,#d8d0c4,#9a9088);pointer-events:none;opacity:.85;
}
.gtr__nut,.gtr__fret{
  position:relative;z-index:1;min-height:44px;border-right:1px solid rgba(0,0,0,.45);
  background:transparent;cursor:pointer;touch-action:manipulation;
}
.gtr__nut{border-right:4px solid #e8d8a0;font:500 .62rem var(--f-cond);color:var(--gold);display:grid;place-items:center}
.gtr__fret.is-locked::after{
  content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;background:var(--blood);box-shadow:0 0 10px var(--blood-glow);z-index:2;
}
.gtr__fret.is-dot::before{
  content:"";position:absolute;left:50%;bottom:4px;width:6px;height:6px;margin-left:-3px;
  border-radius:50%;background:rgba(245,234,216,.35);pointer-events:none;
}
.gtr__tools{display:flex;gap:.5rem;align-items:stretch}
.strum{
  flex:1;min-height:72px;border:1px solid var(--line);background:rgba(20,8,10,.8);
  font:500 .78rem var(--f-cond);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;
}
.strum:hover,.strum:focus-visible,.strum.is-hit{background:rgba(196,30,58,.28)}

/* keys */
.keys{
  display:flex;align-items:stretch;height:min(46vw,260px);min-height:180px;
  overflow-x:auto;touch-action:pan-x;padding-bottom:.4rem;
  -webkit-user-select:none;user-select:none;
}
.keys__white{
  position:relative;flex:none;width:min(12vw,52px);min-width:44px;
  background:linear-gradient(#fff8ee,#e8dcc8);border:1px solid #2a2a2a;border-radius:0 0 6px 6px;
  cursor:pointer;touch-action:none;
}
.keys__white.is-down{background:linear-gradient(#e8c0c0,#c41e3a)}
.keys__black{
  position:absolute;top:0;left:100%;width:62%;height:58%;margin-left:-31%;
  background:linear-gradient(#333,#111);border:1px solid #000;border-radius:0 0 4px 4px;
  z-index:2;cursor:pointer;touch-action:none;
}
.keys__black.is-down{background:linear-gradient(#c41e3a,#4a0610)}

/* drums */
.pads{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;
  max-width:640px;margin:0 auto;padding:.4rem 0 1rem;
}
.pad{
  min-height:88px;border:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 30%,rgba(196,30,58,.28),#14080a 70%);
  color:var(--bone);font:500 .78rem var(--f-cond);letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
.pad:hover,.pad:focus-visible{border-color:var(--blood)}
.pad.is-hit{background:radial-gradient(ellipse at 50% 30%,rgba(255,180,180,.55),#c41e3a 70%);transform:scale(.98)}
.pad--kick{grid-column:1 / -1;min-height:100px}

@media (min-width:800px){
  .stage{padding-top:min(12vw,8rem);grid-template-rows:auto auto auto auto;min-height:38rem}
  .piece{min-height:8.5rem}
  .laptop{width:min(70vw,720px)}
  .laptop__screen{height:260px;max-height:none}
  .pads{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px),(pointer:coarse){
  .haze,.spot{animation:none !important}
  .desk.is-max{top:4vh;left:3vw;right:3vw;bottom:4vh}
  .board{width:min(48%,220px)}
  .stage{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto auto;
    padding:6.5rem 3.2rem 1rem;
    min-height:0;
    gap:.2rem .2rem 0;
  }
  .piece--drums{grid-column:1;grid-row:1}
  .piece--electric{grid-column:2;grid-row:1}
  .piece--keys{grid-column:1;grid-row:2}
  .piece--acoustic{grid-column:2;grid-row:2}
  .piece{min-height:5.6rem}
  .piece__draw{width:min(34vw,120px);height:min(20vw,88px)}
  .stage{
    padding:6.2rem 2.8rem 7.4rem;
  }
  .laptop{grid-column:1 / -1;grid-row:4;width:min(68vw,400px);margin:0.35rem auto 0}
  .laptop__screen{height:190px;max-height:190px}
  .intake{left:4%;bottom:1.4%;width:132px;z-index:6}
  .floorboard{right:4%;bottom:1.4%;width:132px;z-index:6}
  .pa{width:58px;bottom:22%;z-index:6}
  .pa__name,.intake__name,.floorboard__name{font-size:.7rem;letter-spacing:.1em;color:var(--bone)}
  .amp{
    grid-column:1;grid-row:3;align-self:start;justify-self:center;
    width:88px;margin:.15rem 0 0;left:auto;bottom:auto;
  }
  .amp__cab{height:70px}
  .amp__head{height:28px}
  .amp__script{font-size:.85rem}
}


/* ----- patch cables, jacks, PA stacks, Ember 12 ----- */
.patch-svg{
  position:absolute;inset:0;width:100%;height:100%;z-index:8;
  pointer-events:none;overflow:visible;
}
.patch-svg path{stroke-linecap:round;stroke-linejoin:round}
.jack{
  position:absolute;width:44px;height:44px;padding:0;border:0;background:transparent;
  display:grid;place-items:center;z-index:9;touch-action:none;cursor:crosshair;
  -webkit-user-select:none;user-select:none;
}
.jack::after{
  content:"";width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 40% 32%,#5a5a60,#111 62%);
  border:2px solid #8a8680;
  box-shadow:inset 0 0 0 3px #161616,0 0 0 1px #000;
}
.jack.is-plugged::after{border-color:var(--gold);box-shadow:inset 0 0 0 3px #161616,0 0 8px rgba(232,200,119,.45)}
.jack.is-hot::after{border-color:#fff;box-shadow:0 0 12px var(--blood-glow),inset 0 0 0 3px #161616}
.piece .jack{bottom:-6px;left:50%;margin-left:-22px}

.pa{
  position:absolute;z-index:6;bottom:18%;width:min(15%,120px);
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  pointer-events:auto;
}
.pa--l{left:1%}
.pa--r{right:1%}
.pa__name{
  font:600 .72rem var(--f-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--bone);
  text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.8);order:2;
}
.pa__stack{display:flex;flex-direction:column;width:100%;gap:5px;order:1}
.pa__cab{
  position:relative;display:block;width:100%;aspect-ratio:1 / .92;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),
    #111;
  border:2px solid #1a1a1a;
  box-shadow:0 6px 14px #000, inset 0 0 0 2px #f4efe4;
}
.pa__grille{
  position:absolute;left:8%;right:8%;top:22%;bottom:8%;
  background:
    repeating-linear-gradient(45deg, #2a2318 0 2px, #15110c 2px 4px),
    repeating-linear-gradient(-45deg, #1c1812 0 2px, #0c0a08 2px 4px);
  background-blend-mode:multiply;
  border:1px solid #000;
  box-shadow:inset 0 0 12px rgba(0,0,0,.65);
}
.pa__script{
  position:absolute;z-index:2;top:3%;left:0;right:0;text-align:center;
  font:400 clamp(.7rem,3.2vw,1.15rem)/1 var(--f-script);
  color:#f3ebd4;text-shadow:0 1px 0 #000,0 0 6px rgba(0,0,0,.5);
  letter-spacing:.02em;text-transform:none;
}
.pa__handle{
  position:absolute;top:17%;left:28%;right:28%;height:6%;
  border:1px solid #2a2a2a;border-radius:3px;background:linear-gradient(#3a3a3a,#1a1a1a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.pa__corner{position:absolute;width:12px;height:12px;background:linear-gradient(135deg,#8a8a8a,#3a3a3a);z-index:2}
.pa__corner--tl{top:-2px;left:-2px;clip-path:polygon(0 0,100% 0,100% 28%,28% 28%,28% 100%,0 100%)}
.pa__corner--tr{top:-2px;right:-2px;clip-path:polygon(0 0,100% 0,100% 100%,72% 100%,72% 28%,0 28%)}
.pa__corner--bl{bottom:-2px;left:-2px;clip-path:polygon(0 0,28% 0,28% 72%,100% 72%,100% 100%,0 100%)}
.pa__corner--br{bottom:-2px;right:-2px;clip-path:polygon(72% 0,100% 0,100% 100%,0 100%,0 72%,72% 72%)}
.pa .jack{bottom:2%;left:50%;margin-left:-22px}

.amp{
  position:relative;z-index:6;
  left:auto;bottom:auto;width:108px;justify-self:center;align-self:start;
  appearance:none;border:0;background:transparent;color:var(--bone);
  cursor:pointer;touch-action:manipulation;padding:0;
  display:flex;flex-direction:column;align-items:center;
  -webkit-user-select:none;user-select:none;
}
.amp:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.amp__stack{display:flex;flex-direction:column;width:100%;gap:3px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
.amp__head{
  position:relative;height:34px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),
    #111;
  border:2px solid #1a1a1a;
  box-shadow:inset 0 0 0 2px #f4efe4;
  display:flex;align-items:stretch;
}
.amp__script{
  flex:none;width:34%;display:grid;place-items:center;
  font:400 .95rem/1 var(--f-script);color:#f3ebd4;
  text-shadow:0 1px 0 #000;padding:0 2px;
}
.amp__panel{
  flex:1;margin:4px 5px 4px 0;
  background:linear-gradient(180deg,#e4d09a,#c9ad62 50%,#a8883c);
  border:1px solid #8a7028;
  display:flex;align-items:center;justify-content:space-around;gap:2px;padding:0 3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.amp__panel i{
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f5ead8,#c4b48a 55%,#7a6a48);
  box-shadow:0 0 0 1px #5a4a28;display:block;flex:none;
}
.amp__toggles{display:flex;gap:3px;align-items:center}
.amp__toggles b{
  width:7px;height:11px;border-radius:1px;background:#1a1a1a;position:relative;display:block;
  box-shadow:inset 0 0 0 1px #444;
}
.amp__toggles b::after{
  content:"";position:absolute;left:1px;right:1px;top:1px;height:4px;background:#c41e3a;
}
.amp__cab{
  position:relative;display:block;width:100%;height:88px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),
    #111;
  border:2px solid #1a1a1a;
  box-shadow:inset 0 0 0 2px #f4efe4;
}
.amp__handle{
  position:absolute;top:6px;left:28%;right:28%;height:7px;z-index:2;
  border:1px solid #2a2a2a;border-radius:3px;background:linear-gradient(#3a3a3a,#1a1a1a);
}
.amp__grille{
  position:absolute;left:8%;right:8%;top:18px;bottom:8px;
  background:
    repeating-linear-gradient(45deg, #2a2318 0 2px, #15110c 2px 4px),
    repeating-linear-gradient(-45deg, #1c1812 0 2px, #0c0a08 2px 4px);
  background-blend-mode:multiply;
  border:1px solid #000;
  box-shadow:inset 0 0 14px rgba(0,0,0,.65);
}
.amp__corner{position:absolute;width:11px;height:11px;background:linear-gradient(135deg,#8a8a8a,#3a3a3a);z-index:2}
.amp__corner--tl{top:-2px;left:-2px;clip-path:polygon(0 0,100% 0,100% 28%,28% 28%,28% 100%,0 100%)}
.amp__corner--tr{top:-2px;right:-2px;clip-path:polygon(0 0,100% 0,100% 100%,72% 100%,72% 28%,0 28%)}
.amp__corner--bl{bottom:-2px;left:-2px;clip-path:polygon(0 0,28% 0,28% 72%,100% 72%,100% 100%,0 100%)}
.amp__corner--br{bottom:-2px;right:-2px;clip-path:polygon(72% 0,100% 0,100% 100%,0 100%,0 72%,72% 72%)}
.amp .jack--in{left:-8px;top:4px}
.amp .jack--out{right:-8px;top:4px;left:auto}

.intake{width:140px;left:8%;bottom:22%;z-index:6}
.intake__jacks,.intake__outs,.floorboard__jacks{display:flex;justify-content:center;position:relative;min-height:36px}
.intake .jack,.floorboard .jack{position:relative;left:auto;bottom:auto;margin:0}
.floorboard{width:128px;right:7%;bottom:22%;z-index:6}
.top__reset{flex:none}

/* Ember 12 zoomed plate */
.plate{
  position:fixed;z-index:45;left:8vw;right:8vw;top:18vh;bottom:auto;
  max-height:70vh;display:flex;flex-direction:column;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%,rgba(196,30,58,.18),transparent 55%),
    #140a0a;
  border:1px solid var(--line);
  box-shadow:0 0 0 1px #000,0 24px 80px rgba(0,0,0,.7);
  color:var(--ink);
}
.plate[hidden]{display:none}
.plate.is-max{top:4vh;left:3vw;right:3vw;bottom:4vh;max-height:none;width:auto;height:auto}
.plate__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
  padding:.35rem .45rem;border-bottom:1px solid var(--line);background:rgba(8,4,6,.9);flex:none;
}
.plate__mark{font:700 .9rem var(--f-display);letter-spacing:.12em;color:var(--blood);margin-right:.4rem}
.plate__face{padding:.8rem .8rem 1rem;overflow:auto;display:flex;flex-direction:column;gap:.8rem;min-height:0}
.plate__grille{
  height:72px;border:2px solid #2a1612;box-shadow:inset 0 0 0 2px #c9a227;
  background:
    radial-gradient(circle,rgba(0,0,0,.55) 1.2px,transparent 1.4px) 0 0 / 6px 6px,
    linear-gradient(180deg,#2a1410,#140a08);
}
.plate.is-max .plate__grille{height:min(22vh,180px)}
.plate__knobs{display:flex;flex-wrap:wrap;justify-content:space-around;gap:.6rem 1rem}
.plate__hint{margin:0;font:italic 500 .92rem/1.4 var(--f-italic);color:var(--mute)}
.plate.is-bypass .knob__dial{opacity:.45}
.knob{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  width:88px;touch-action:none;-webkit-user-select:none;user-select:none;cursor:ns-resize;
}
.knob__dial{
  width:64px;height:64px;border-radius:50%;
  background:
    conic-gradient(from 0deg,#2a2a2e,#141416 40%,#3a3a40 70%,#2a2a2e);
  border:3px solid #c9a227;
  box-shadow:inset 0 2px 4px #000,0 4px 10px rgba(0,0,0,.5);
  display:grid;place-items:center;
}
.knob__dial i{
  display:block;width:3px;height:22px;margin-bottom:18px;
  background:linear-gradient(#fff,#c41e3a);border-radius:1px;
  box-shadow:0 0 6px var(--blood-glow);
}
.knob__label{font:500 .62rem var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.knob__val{font:500 .68rem var(--f-cond);color:var(--bone)}

/* Cue Grid — original Red Room note entry */
.cue{
  flex:none;border-top:1px solid var(--line);background:rgba(8,4,6,.85);
  display:flex;flex-direction:column;min-height:0;
}
.cue__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;
  padding:.3rem .45rem;border-bottom:1px solid var(--line);flex:none;
}
.cue__mark{font:700 .72rem var(--f-display);letter-spacing:.1em;color:var(--blood)}
.cue__grid{position:relative;overflow:auto;height:88px;background:#0a0506;touch-action:pan-y;min-height:0}
.desk.is-max .desk__body{flex:1 1 42%}
.desk.is-max .cue{flex:1 1 48%}
.desk.is-max .cue__grid{height:auto;flex:1;min-height:180px}
.cue__vel{padding:.25rem .6rem;border-top:1px solid var(--line);font:500 .62rem var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.cue__vel input{accent-color:var(--blood);min-height:28px;vertical-align:middle;width:min(40vw,200px)}
.cue__head{
  position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--gold);
  box-shadow:0 0 8px var(--gold);pointer-events:none;z-index:4;display:none;
  transform:translateX(0);
}
.cue__grid.is-playing .cue__head{display:block}

.kit{position:relative;display:flex;flex-direction:column;min-width:min(100%,520px);padding:0 0 8px}
.kit__row{display:grid;grid-template-columns:64px repeat(var(--steps,16),minmax(22px,1fr));align-items:stretch;min-height:32px}
.kit__lab{
  min-height:32px;border:0;border-right:1px solid var(--line);border-bottom:1px solid rgba(196,30,58,.12);
  background:#12080a;color:var(--gold);font:500 .55rem var(--f-cond);letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;touch-action:manipulation;
}
.kit__cell{
  min-height:32px;border:0;border-right:1px solid rgba(196,30,58,.12);border-bottom:1px solid rgba(196,30,58,.12);
  background:rgba(255,255,255,.03);cursor:pointer;touch-action:manipulation;padding:0;
}
.kit__cell.is-beat{background:rgba(196,30,58,.08)}
.kit__cell.is-on{background:rgba(196,30,58,calc(.35 + var(--vel,.9) * .55));box-shadow:inset 0 0 0 1px #ff6a6a}
.kit__cell.is-sel{outline:2px solid var(--gold);outline-offset:-2px}

.ng{display:grid;grid-template-columns:48px 1fr;position:relative;min-width:min(100%,520px);align-items:start}
.ng__keys{display:flex;flex-direction:column}
.ng__key{
  height:22px;border:0;border-bottom:1px solid rgba(0,0,0,.35);background:#f5ead8;color:#1a100c;
  font:500 .48rem var(--f-cond);text-align:left;padding:0 4px;cursor:pointer;touch-action:manipulation;
}
.ng__key.is-black{background:#1a1a1a;color:var(--bone)}
.ng__board{position:relative;min-height:100%}
.ng__lane{height:22px;border-bottom:1px solid rgba(196,30,58,.1);background:rgba(20,8,10,.5)}
.ng__lane.is-black{background:rgba(8,4,6,.85)}
.ng__lane.is-c{border-bottom-color:rgba(232,200,119,.35)}
.ng__cols{
  position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(100% / var(--steps,16) - 1px),rgba(196,30,58,.22) calc(100% / var(--steps,16) - 1px),rgba(196,30,58,.22) calc(100% / var(--steps,16)));
}
.ng__note{
  position:absolute;height:20px;margin:1px 0;padding:0;border:1px solid #ffb0a0;
  background:linear-gradient(180deg,rgba(196,30,58,.95),rgba(80,10,18,.95));
  border-radius:2px;cursor:grab;touch-action:none;z-index:2;
}
.ng__note.is-sel{outline:2px solid var(--gold);z-index:3}
.ng__handle{
  position:absolute;right:0;top:0;bottom:0;width:14px;cursor:ew-resize;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35));
}

/* Key slip — floating preview keys */
.slip{
  position:fixed;z-index:52;left:auto;right:3vw;bottom:auto;top:22vh;
  width:min(92vw,420px);
  background:#12080a;border:1px solid var(--line);
  box-shadow:0 0 0 1px #000,0 18px 50px rgba(0,0,0,.65);
  touch-action:none;
}
.slip[hidden]{display:none}
.slip__bar{
  display:flex;align-items:center;gap:.4rem;padding:.3rem .4rem;
  border-bottom:1px solid var(--line);cursor:grab;touch-action:none;
  min-height:48px;background:rgba(8,4,6,.95);
}
.slip__mark{flex:1;font:700 .78rem var(--f-display);letter-spacing:.1em;color:var(--blood)}
.slip__body{padding:.5rem .5rem .7rem}
.slip__kb{position:relative;display:flex;height:120px}
.slip__white{
  flex:1;min-width:28px;min-height:100px;border:1px solid #2a2a2a;border-radius:0 0 5px 5px;
  background:linear-gradient(#fff8ee,#e8dcc8);color:#1a100c;
  font:500 .52rem var(--f-cond);padding-top:4.2rem;cursor:pointer;touch-action:none;
}
.slip__white:active,.slip__white.is-down{background:linear-gradient(#e8c0c0,#c41e3a);color:#fff}
.slip__blacks{position:absolute;inset:0;pointer-events:none}
.slip__black{
  position:absolute;top:0;width:1.6rem;height:58%;margin:0;
  background:linear-gradient(#333,#111);border:1px solid #000;border-radius:0 0 3px 3px;
  z-index:2;cursor:pointer;touch-action:none;pointer-events:auto;
}
.slip__black:active{background:linear-gradient(#c41e3a,#4a0610)}
.slip__pads{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
.slip__pad{
  min-height:48px;border:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 30%,rgba(196,30,58,.28),#14080a 70%);
  color:var(--bone);font:500 .62rem var(--f-cond);letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;touch-action:manipulation;
}
.slip__pad:active{background:var(--blood)}

@media (max-width:820px),(pointer:coarse){
  .plate.is-max{top:4vh;left:3vw;right:3vw;bottom:4vh}
  .kit__cell,.kit__lab{min-height:36px}
  .cue__bar .hit,.cue__bar select{min-height:44px}
  .slip{top:6.2rem;left:3vw;right:3vw;width:auto;bottom:auto}
}

/* 3-octave keyboards — keep keys wide enough, scroll on phones */
.keys-shell{display:flex;flex-direction:column;gap:.45rem;min-height:100%}
.keys__bar{display:flex;align-items:center;gap:.5rem;flex:none}
.keys__oct{font:500 .72rem var(--f-cond);letter-spacing:.14em;color:var(--gold)}
.keys{overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.keys__white{flex:none;width:44px;min-width:28px}
.slip__kb{overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x;display:flex;height:120px}
.slip__white{flex:none;width:32px;min-width:28px;min-height:100px}

/* Ember zoomed gold panel + cream chicken-head knobs */
.plate--ember{background:#111;border-color:#2a2a2a}
.plate--ember .plate__mark{font:400 1.6rem/1 var(--f-script);letter-spacing:0;color:#f3ebd4;text-transform:none}
.plate__gold{
  background:linear-gradient(180deg,#e8d6a2,#c9ad62 48%,#a8883c);
  border:2px solid #8a7028;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 24px rgba(0,0,0,.45);
  padding:1rem .8rem 1.1rem;color:#1a1408;
}
.plate__script{
  display:block;text-align:center;margin:0 0 .6rem;
  font:400 2.4rem/1 var(--f-script);color:#f7f0dc;
  text-shadow:0 1px 0 #5a4820,0 2px 0 #3a2e10;
}
.plate__switches{display:flex;justify-content:flex-end;gap:1.2rem;margin-top:.8rem;padding:0 .4rem}
.tog{
  appearance:none;border:0;background:transparent;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  font:600 .58rem var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:#2a2010;
  touch-action:manipulation;
}
.tog i{
  display:block;width:22px;height:32px;border-radius:3px;background:#1a1a1a;
  box-shadow:inset 0 0 0 1px #444,0 2px 0 #000;position:relative;
}
.tog i::after{
  content:"";position:absolute;left:3px;right:3px;top:3px;height:11px;
  background:#3a3a3a;border-radius:1px;
}
.tog--on i::after,.tog[aria-pressed="true"] i::after{top:auto;bottom:3px;background:#c41e3a}
.plate--ember .plate__hint{color:#c8b896}
.plate--ember .plate__knobs{gap:1rem}
.knob--chicken .knob__dial{
  width:72px;height:72px;border:3px solid #8a7028;
  background:
    radial-gradient(circle at 50% 50%,#f5ead8 0 62%,#d4c4a0 63% 100%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.5),0 3px 8px rgba(0,0,0,.35);
}
.knob--chicken .knob__dial i{
  width:0;height:0;margin:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-bottom:26px solid #2a2010;background:none;box-shadow:none;
  margin-bottom:18px;border-radius:0;
}
.plate--ember .knob__label,.plate--ember .knob__val{color:#1a1408;font-weight:600}

/* Board console popup */
.mix{
  position:fixed;z-index:46;left:4vw;right:4vw;top:10vh;bottom:auto;
  max-height:80vh;display:flex;flex-direction:column;
  background:
    linear-gradient(180deg,#2a1c18,#140c0c 30%,#0e0808);
  border:2px solid #3a2a22;
  box-shadow:0 0 0 1px #000,0 24px 80px rgba(0,0,0,.75);
  color:var(--ink);
}
.mix[hidden]{display:none}
.mix.is-max{top:4vh;left:3vw;right:3vw;bottom:4vh;max-height:none;width:auto;height:auto}
.mix__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
  padding:.35rem .45rem;border-bottom:1px solid #3a2a22;background:#1a1010;flex:none;
}
.mix__mark{font:700 .9rem var(--f-display);letter-spacing:.12em;color:var(--blood);margin-right:.4rem}
.mix__face{overflow:auto;display:flex;gap:0;padding:.5rem .4rem .7rem;min-height:0;align-items:stretch}
.mix__strips{display:flex;gap:2px;flex:1;min-width:0}
.mix__strip,.mix__master{
  flex:none;width:108px;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.35rem .25rem .45rem;
  background:linear-gradient(180deg,#1c1412,#120c0c);
  border:1px solid #2a1c18;
}
.mix__master{width:92px;margin-left:8px;background:linear-gradient(180deg,#241414,#120808);border-color:var(--line)}
.mix__name{margin:0;font:600 .62rem var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.mix__knobs{display:grid;grid-template-columns:1fr 1fr;gap:.25rem .15rem;width:100%}
.knob--mix{width:auto;gap:.12rem;cursor:ns-resize}
.knob--mix .knob__dial{
  width:36px;height:36px;border-width:2px;border-color:#8a7028;
  background:conic-gradient(from 0deg,#3a2a24,#1a1010 40%,#4a3a30 70%,#3a2a24);
}
.knob--mix .knob__dial i{height:12px;margin-bottom:10px;width:2px;background:linear-gradient(#f5ead8,#c41e3a)}
.knob--mix .knob__label{font-size:.5rem;letter-spacing:.08em}
.mix__btns{display:flex;gap:.25rem}
.mix__ms{min-width:36px;min-height:36px;padding:.2rem;font-size:.62rem}
.mix__faderrow{display:flex;gap:.25rem;align-items:stretch;height:150px;margin-top:.2rem}
.meter{
  width:10px;display:flex;flex-direction:column;justify-content:space-between;gap:2px;
}
.meter i{flex:1;min-height:6px;background:#1a0c0c;border-radius:1px;opacity:.4}
.meter i.is-on{opacity:1}
.meter i.is-on{background:#3dba6a;box-shadow:0 0 5px rgba(61,186,106,.6)}
.meter i[data-led="8"].is-on,.meter i[data-led="9"].is-on{background:#e8c877;box-shadow:0 0 5px rgba(232,200,119,.5)}
.meter i[data-led="10"].is-on,.meter i[data-led="11"].is-on{background:#c41e3a;box-shadow:0 0 6px var(--blood-glow)}
.fader{display:flex;gap:.2rem;height:100%;touch-action:none;cursor:ns-resize;-webkit-user-select:none;user-select:none}
.fader__scale{display:flex;flex-direction:column;justify-content:space-between;font:500 .42rem var(--f-cond);color:var(--mute);width:18px;text-align:right}
.fader__slot{
  position:relative;width:16px;background:linear-gradient(90deg,#0a0606,#1a1010 40%,#0a0606);
  border:1px solid #2a1c18;border-radius:2px;
}
.fader__cap{
  position:absolute;left:-6px;right:-6px;height:18px;margin-bottom:-9px;
  background:linear-gradient(180deg,#e8d6a2,#a8883c);
  border:1px solid #5a4820;border-radius:2px;
  box-shadow:0 2px 4px #000,inset 0 1px 0 rgba(255,255,255,.4);
}
.mix__read{font:500 .62rem var(--f-cond);color:var(--bone)}
.floorboard{cursor:pointer}

@media (max-width:820px),(pointer:coarse){
  .mix.is-max{top:4vh;left:3vw;right:3vw;bottom:4vh}
  .mix__strip{width:96px}
  .keys__white{width:36px;min-width:28px}
  .slip__white{width:30px;min-width:28px}
}


/* ===== Scene, performer, inserts, meters, patterns (2026-11-12) ===== */
.floor-svg{position:absolute;inset:6% 0 4%;width:100%;height:90%;z-index:0;pointer-events:none}
.patch-svg{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}
.hall{position:relative;overflow:hidden}
.stage.scene{
  position:relative;display:block;min-height:42rem;height:100%;
  padding:0 0 7rem;z-index:2;grid-template-columns:none;grid-template-rows:none;
}
.backwall{position:absolute;left:10%;right:10%;top:0;height:28%;
  background:linear-gradient(180deg,#14080a,transparent);pointer-events:none;z-index:1}
.backline{position:absolute;left:24%;top:8%;width:52%;display:flex;justify-content:center;align-items:flex-end;
  gap:1rem;z-index:2;transform:scale(.86);transform-origin:top center;pointer-events:none}
.backline .amp{width:86px;margin:0;pointer-events:auto}
.backline #ampCab,.backline .amp:nth-child(2){width:108px;z-index:3;transform:scale(1.06)}
.riser{position:absolute;left:36%;top:20%;width:28%;min-height:11rem;z-index:4}
.riser .piece--drums{position:relative;width:100%;min-height:10rem;grid-column:auto;grid-row:auto}
.piece--keys{position:absolute;left:7%;top:36%;width:22%;z-index:5;grid-column:auto;grid-row:auto}
.piece--electric{position:absolute;left:28%;top:48%;width:18%;z-index:6;grid-column:auto;grid-row:auto}
.piece--acoustic{position:absolute;left:56%;top:48%;width:18%;z-index:6;grid-column:auto;grid-row:auto}
.vox{position:absolute;left:46%;top:52%;z-index:7;background:none;border:0;color:var(--bone);cursor:pointer;padding:0}
.vox__stand{display:block;width:4px;height:7.2rem;margin:0 auto;background:linear-gradient(#888,#333);border-radius:2px}
.vox__mic{display:block;width:22px;height:36px;margin:-8px auto 0;background:#222;border:2px solid #888;border-radius:10px 10px 4px 4px;box-shadow:0 0 8px rgba(196,30,58,.4)}
.pa--l{left:1%;top:26%;bottom:auto}
.pa--r{right:1%;left:auto;top:26%;bottom:auto}
.intake{left:3%;bottom:7%;z-index:6}
.floorboard{right:3%;bottom:7%;z-index:6;width:148px}
.floorboard__mini{display:block;height:36px;margin:.2rem .3rem;background:repeating-linear-gradient(90deg,#1a1a1a 0 8px,#111 8px 10px);border:1px solid #333}
.laptop{position:absolute;left:50%;bottom:1.5%;transform:translateX(-50%);margin:0;grid-column:auto;grid-row:auto;z-index:5}

/* kit / keys art */
.kit-art{position:relative;display:block;height:8.5rem}
.kit-art__kick{position:absolute;bottom:6%;width:28%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#f6f1e8 0 38%,#1a0a0c 42% 100%);
  box-shadow:inset 0 0 0 3px #222,0 0 0 2px #888}
.kit-art__kick--l{left:12%}.kit-art__kick--r{right:12%}
.kit-art__kick::after{content:"";position:absolute;left:50%;top:58%;width:22%;height:18%;margin-left:-11%;
  border-radius:50%;background:#5a3a24;box-shadow:inset 0 0 0 1px #3a2418}
.kit-art__tom{position:absolute;width:16%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 30%,#f3eee6,#1a0a0c 70%);box-shadow:0 0 0 2px #aaa}
.kit-art__tom--a{left:32%;top:28%}.kit-art__tom--b{left:50%;top:24%}
.kit-art__floor{position:absolute;right:8%;bottom:18%;width:20%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 30%,#f3eee6,#1a0a0c 70%);box-shadow:0 0 0 2px #aaa}
.kit-art__cym{position:absolute;width:22%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 30%,#e8c877,#8a6a20);box-shadow:0 0 10px rgba(232,200,119,.35);opacity:.95}
.kit-art__cym--l{left:8%;top:8%}.kit-art__cym--r{right:14%;top:4%}
.kit-art__rack{position:absolute;left:20%;top:20%;right:20%;height:2px;background:#c0c0c0}
.mic-dot{position:absolute;width:14px;height:14px;border-radius:50%;border:0;padding:0;
  background:#c8c8c8;box-shadow:0 0 0 2px #222,0 0 8px rgba(245,234,216,.4);z-index:5;cursor:pointer}
.snake{position:absolute;right:-8%;bottom:4%;font:600 .62rem var(--f-cond);letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone);background:#1a1012;border:1px solid var(--line);padding:.25rem .4rem;cursor:pointer;z-index:5}
.keys-art{position:relative;display:block;height:6.5rem}
.keys-art__stand{position:absolute;left:18%;right:18%;top:8%;bottom:4%;
  background:linear-gradient(90deg,transparent 0 42%,#222 42% 46%,transparent 46% 54%,#222 54% 58%,transparent 58%);
  transform:skewX(-12deg)}
.keys-art__deck{position:absolute;left:8%;right:8%;height:22%;background:#111;border:1px solid #333;border-radius:2px;
  box-shadow:inset 0 8px 0 #0a0a0a,0 2px 0 #000}
.keys-art__deck--top{top:18%}.keys-art__deck--bot{top:48%}
.keys-art__pads{position:absolute;left:10%;top:20%;width:16%;height:16%;
  background:repeating-linear-gradient(90deg,#c41e3a 0 20%,#e8c877 20% 40%,#3a8 40% 60%,#48f 60% 80%,#c41e3a 80% 100%)}

/* performer */
.player{position:absolute;z-index:7;pointer-events:none;width:120px;height:180px;
  transition:left .28s ease,top .28s ease,opacity .2s ease;opacity:1}
.player[data-station="electric"]{left:30%;top:38%}
.player[data-station="acoustic"]{left:56%;top:38%}
.player[data-station="drums"]{left:42%;top:16%;width:140px;height:150px}
.player[data-station="keys"]{left:10%;top:28%}
.player[data-station="vocals"]{left:44%;top:40%}
.player__pose{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .2s ease}
.player__pose.is-here{opacity:1}
.player__strum{transform-origin:72px 70px}
.player__pose.is-pulse .player__strum{animation:jedStrum .16s ease-out}
@keyframes jedStrum{0%{transform:rotate(0)}40%{transform:rotate(28deg)}100%{transform:rotate(0)}}
.player__arm--l{transform-origin:54px 76px}
.player__arm--r{transform-origin:86px 76px}
.player__pose.is-hit-snare .player__arm--r,
.player__pose.is-hit-hat .player__arm--l,
.player__pose.is-hit-crash .player__arm--r,
.player__pose.is-hit-ride .player__arm--r{animation:jedHit .14s ease-out}
.player__pose.is-hit-tom .player__arm--l{animation:jedHit .14s ease-out}
@keyframes jedHit{0%{transform:rotate(0)}40%{transform:rotate(18deg)}100%{transform:rotate(0)}}
.player__pose.is-hit-kick .player__pedal{animation:jedKick .14s ease-out}
@keyframes jedKick{40%{transform:translateY(3px)}}
.player__pose.is-pulse .player__hand{animation:jedPress .16s ease-out}
@keyframes jedPress{40%{transform:translateY(4px)}}
.player__pose.is-sing .player__bob{animation:jedBob .7s ease-in-out infinite}
@keyframes jedBob{50%{transform:translateY(3px)}}

@media (prefers-reduced-motion:reduce){
  .player,.player__pose{transition:none}
  .player__strum,.player__arm,.player__hand,.player__pedal,.player__bob{animation:none !important}
}
@media (max-width:820px),(pointer:coarse){
  .player{transition:opacity .15s ease,left 0s,top 0s;width:96px;height:144px}
  .player__pose.is-sing .player__bob{animation:none}
  .stage.scene{min-height:36rem;padding-bottom:8.5rem}
  .backline{left:18%;width:64%;top:6%;transform:scale(.72)}
  .riser{left:32%;top:18%;width:36%}
  .piece--keys{left:4%;top:34%;width:28%}
  .piece--electric{left:22%;top:50%}
  .piece--acoustic{left:58%;top:50%}
  .pa{width:52px}
  .laptop{width:min(78vw,420px);bottom:1%}
  .intake{left:3%;bottom:1.2%;width:132px}
  .floorboard{right:3%;bottom:1.2%;width:132px}
  .amp{width:88px}
}

/* PAT / SONG + playlist + clip editor + plugins + meters */
.mode{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;margin:0 .2rem}
.mode__btn{appearance:none;border:0;background:#12080a;color:var(--mute);font:700 .68rem var(--f-cond);
  letter-spacing:.12em;padding:.35rem .55rem;cursor:pointer;min-height:36px}
.mode__btn.is-on{background:var(--blood);color:#fff;box-shadow:0 0 12px rgba(196,30,58,.55)}
.clip--pat{background:linear-gradient(180deg,#3a1518,#1a080a);border:1px solid var(--line)}
.clip__lab{position:absolute;left:6px;top:4px;z-index:1;font:600 .62rem var(--f-cond);letter-spacing:.08em;color:var(--bone)}
.clip__mini{width:100%;height:100%;display:block}
.plate--clip{z-index:80}
.clip-wave{display:block;width:100%;height:140px;background:#12080a;touch-action:none}
.clip-tools{display:flex;flex-wrap:wrap;gap:.5rem 1rem;padding:.7rem .8rem 1rem;align-items:center}
.plugin{position:fixed;z-index:90;min-width:260px;max-width:min(92vw,420px);background:#121010;border:1px solid #3a3a3a;
  box-shadow:0 18px 40px rgba(0,0,0,.55);color:#f5ead8}
.plugin__bar{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;background:#0a0a0a;cursor:grab;touch-action:none}
.plugin__mark{font:700 .72rem var(--f-cond);letter-spacing:.1em;text-transform:uppercase;margin-right:auto}
.plugin__body{padding:.6rem .7rem .8rem;display:flex;flex-direction:column;gap:.45rem;max-height:70vh;overflow:auto}
.plugin__field{display:grid;grid-template-columns:4.2rem 1fr 2.4rem;gap:.35rem;align-items:center;font:500 .62rem var(--f-cond);letter-spacing:.06em}
.plugin__curve{width:100%;height:90px;background:#0a0809;border:1px solid #2a2a2a}
.plugin__band{display:flex;flex-wrap:wrap;gap:.3rem;border-top:1px solid #2a2a2a;padding-top:.35rem}
.plugin-menu{position:fixed;z-index:95;background:#111;border:1px solid #444;display:flex;flex-direction:column;min-width:140px}
.plugin-menu button{appearance:none;border:0;background:transparent;color:#f5ead8;text-align:left;padding:.45rem .7rem;cursor:pointer;font:500 .72rem var(--f-cond)}
.plugin-menu button:hover{background:#2a1518}
.mix__inserts{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;width:100%;margin:.2rem 0 .35rem}
.ins{appearance:none;border:1px solid #333;background:#0a0a0a;color:#888;font:600 .52rem var(--f-cond);letter-spacing:.04em;
  text-transform:uppercase;min-height:28px;padding:0 .2rem;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ins.is-loaded{background:#1a1214;color:#f5ead8;border-color:#555}
.ins.is-bypass{opacity:.45}
.knob--orange .knob__dial{background:conic-gradient(from 210deg,#3a1a0a,#c45a10 40%,#3a1a0a)}
.knob--orange .knob__dial i{background:#e8a050}
.knob--teal .knob__dial i{background:#7ec8c8}
.knob--white .knob__dial{background:#2a2a2a}
.knob--white .knob__dial i{background:#f5ead8}
.fader__cap{background:#f5ead8;box-shadow:inset 0 0 0 1px #ccc,0 1px 2px #000;border-radius:2px;
  background-image:repeating-linear-gradient(#f5ead8 0 2px,#d8d0c4 2px 3px)}
.mix__ms{background:#1a1a1a;color:#f5ead8;border:1px solid #555;font:700 .55rem var(--f-cond);letter-spacing:.08em}
.mix__ms.is-on{background:#c41e3a;border-color:#f5ead8;color:#fff}
.mix__rec{opacity:.7}
.mix__master{background:linear-gradient(180deg,#3a1410,#120808);border-color:#c45a10}
.mix__dyn{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;margin:.2rem 0}
.led{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3a1010;box-shadow:inset 0 0 0 1px #111}
.led.is-on,.led--gate.is-on{background:#3ecf3e;box-shadow:0 0 6px #3ecf3e}
.gr{display:inline-block;width:8px;height:28px;background:#1a1a1a;position:relative;border:1px solid #333}
.gr i{position:absolute;left:0;right:0;bottom:0;background:#c41e3a;height:0}
.stereo{display:flex;gap:6px;height:160px;margin:.3rem 0}
.stereo__ch{position:relative;width:18px;background:#0a0a0a;border:1px solid #333;display:flex;flex-direction:column;justify-content:flex-end}
.stereo__ch [data-bar]{display:block;width:100%;background:linear-gradient(#c41e3a,#e8c877,#3ecf3e);height:0}
.stereo__ch [data-clip]{position:absolute;top:2px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#3a1010}
.stereo__ch [data-clip].is-on{background:#ff2a2a;box-shadow:0 0 6px #ff2a2a}
.stereo__ch b{font:500 .5rem var(--f-cond);color:var(--bone);position:absolute;bottom:-1.1rem;left:50%;transform:translateX(-50%)}
.stereo__ch em{position:absolute;top:-.9rem;left:50%;transform:translateX(-50%);font:600 .55rem var(--f-cond);color:var(--gold)}
.dbm{position:fixed;z-index:85;min-width:140px;background:rgba(10,8,9,.92);border:1px solid var(--line);color:var(--bone);padding:.3rem .4rem}
.dbm__bar{display:flex;justify-content:space-between;cursor:grab;touch-action:none;font:600 .62rem var(--f-cond);letter-spacing:.08em}
.dbm__read{font:500 .62rem var(--f-cond)}
.dbm [data-clip]{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3a1010;margin-left:.3rem}
.dbm [data-clip].is-on{background:#ff2a2a;box-shadow:0 0 6px #ff2a2a}
.vox-meter{height:10px;background:#1a1012;border:1px solid var(--line);margin:.4rem 0}
.vox-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3ecf3e,#e8c877,#c41e3a)}
.mic-row{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;padding:.4rem;border-bottom:1px solid #2a2a2a}
.mix__face{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:820px),(pointer:coarse){
  .mix__face{overflow-x:auto}
  .mix__strip{width:104px;flex:none}
}

/* ===== Backdrop, lights, Blend, start-show prompt ===== */
.hall{--lite-level:0;--lite-bass:0;--lite-fog:0;--lite-kick:0}
.hall .moon{display:none}
.spots{opacity:0;visibility:hidden}

.backdrop{
  position:absolute;left:12%;right:12%;top:0;height:44%;
  z-index:1;pointer-events:none;
}
.backdrop__frame{
  position:absolute;inset:2% 0 10%;
  background:#080406;
  border:4px solid #1c1014;
  box-shadow:0 0 0 2px #2a181c, inset 0 0 40px rgba(0,0,0,.7), 0 18px 40px rgba(0,0,0,.55);
  overflow:hidden;
  transform:perspective(900px) rotateX(6deg);
  transform-origin:50% 100%;
}
.backdrop__art{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%;
  opacity:.48;transform:translate3d(0,0,0);
}
.backdrop__mesh{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) 1px,transparent 1px,transparent 6px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0,rgba(0,0,0,.22) 1px,transparent 1px,transparent 6px);
  opacity:.55;
}
.backdrop__glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(196,30,58,.5),transparent 70%);
  opacity:.12;transform:translate3d(0,0,0);
}

.rig-lights{position:absolute;inset:0;z-index:3;pointer-events:none}
.par{
  position:absolute;top:1.4%;width:16px;height:12px;border-radius:2px;
  background:hsl(350 50% 36%);
  box-shadow:0 0 10px rgba(196,30,58,.4),0 12px 28px rgba(196,30,58,.35);
  opacity:.14;transform:translate3d(0,0,0);
}
.par[data-par="0"]{left:16%}
.par[data-par="1"]{left:36%}
.par[data-par="2"]{left:62%}
.par[data-par="3"]{left:82%}
.beam{
  position:absolute;top:2%;width:24%;height:68%;
  transform-origin:50% 0;opacity:.1;pointer-events:none;
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(255,70,70,.55) 0%,rgba(196,30,58,.22) 32%,transparent 82%);
  transform:translate3d(0,0,0);
  will-change:transform,opacity;
}
.beam--red[data-beam="0"]{left:10%}
.beam--white[data-beam="1"]{left:30%;
  background:linear-gradient(180deg,rgba(255,236,230,.5) 0%,rgba(255,255,255,.14) 30%,transparent 82%)}
.beam--red[data-beam="2"]{left:52%}
.beam--white[data-beam="3"]{left:70%;
  background:linear-gradient(180deg,rgba(255,236,230,.5) 0%,rgba(255,255,255,.14) 30%,transparent 82%)}
.kick-flash{
  position:absolute;left:18%;right:18%;top:6%;height:38%;
  background:radial-gradient(ellipse at 50% 80%,rgba(255,220,200,.5),transparent 70%);
  opacity:0;pointer-events:none;transform:translate3d(0,0,0);
}
.fx-canvas{position:absolute;inset:0;z-index:5;pointer-events:none;width:100%;height:100%}
.haze{z-index:2}

@media (max-width:820px),(pointer:coarse){
  .backdrop__frame{transform:none}
  .backdrop{left:8%;right:8%;height:38%}
  .hall.is-lite .beam[data-beam="2"],
  .hall.is-lite .beam[data-beam="3"]{display:none}
}
@media (prefers-reduced-motion:reduce){
  .beam,.par,.backdrop__glow,.kick-flash{transition:none}
}

/* Head-bob when a Jed song or blend is driving the figure. */
.player__pose.is-bob .player__bob{animation:jedBob .7s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .player__pose.is-bob .player__bob{animation:none}
}

/* Low-opacity wash of the shared hero art on popups. Same URL as the backdrop, no second download. */
.mix,.plugin,.plate--clip,.desk{
  background-image:
    linear-gradient(rgba(8,5,6,.86),rgba(10,6,8,.9)),
    url("../../images/hero.jpg");
  background-size:cover;
  background-position:center 40%;
  background-repeat:no-repeat;
}
.plate--ember{background-image:none}

/* Blend panel — original two-deck dock, not a brand look-alike. */
.blend{
  position:relative;z-index:5;
  margin:0 .4rem .55rem;
  padding:.5rem .7rem .65rem;
  background:rgba(8,5,6,.94);
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.blend__head{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem;margin-bottom:.45rem}
.blend__mark{
  font:700 .78rem var(--f-cond);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)
}
.blend__xf{display:flex;align-items:center;gap:.45rem;font:500 .62rem var(--f-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.blend__xf input{width:min(42vw,240px);accent-color:var(--blood);min-height:28px}
.blend__decks{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem}
.blend__deck{
  padding:.45rem .55rem .55rem;
  border:1px solid rgba(196,30,58,.22);
  background:rgba(12,6,8,.65);
  min-width:0;
}
.blend__name{margin:0 0 .3rem;font:600 .68rem var(--f-cond);letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}
.blend__wave{display:block;width:100%;height:44px;background:#12080a;border:1px solid var(--line);cursor:pointer;touch-action:manipulation}
.blend__row,.blend__loops{display:flex;flex-wrap:wrap;gap:.3rem;margin:.35rem 0}
.blend__knob,.blend__eq label{
  display:flex;align-items:center;gap:.35rem;
  font:500 .62rem var(--f-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
  margin:.15rem 0;
}
.blend__knob input,.blend__eq input{flex:1;min-width:0;accent-color:var(--blood);min-height:26px}
.blend__knob i,.blend__bpm{font-style:normal;color:var(--bone);min-width:3.2rem}
.blend__eq{display:grid;grid-template-columns:1fr;gap:.15rem}
.blend__eq label{flex-wrap:wrap}
.blend__eq .mix__ms{min-width:40px;min-height:28px;margin-left:auto}
.blend.is-min .blend__decks{display:none}
.blend.is-min{padding-bottom:.4rem}
@media (min-width:821px){
  .blend{padding:.35rem .6rem .45rem}
  .blend__wave{height:36px}
  .blend .hit{min-height:36px;padding:.3rem .55rem}
  .blend select{min-height:36px;margin:.1rem 0 .2rem}
  .blend__eq{grid-template-columns:repeat(3,minmax(0,1fr));gap:.2rem .5rem}
  .blend__eq label{flex-direction:column;align-items:stretch;gap:.15rem}
  .blend__eq .mix__ms{margin-left:0;width:100%}
}
.blend select{width:100%;min-height:40px;background:#140a0c;color:var(--bone);border:1px solid var(--line);margin:.2rem 0 .35rem}
.blend .hit{min-height:40px;padding:.4rem .65rem}

@media (max-width:820px){
  .blend{max-height:46vh;overflow:auto;-webkit-overflow-scrolling:touch;padding:.4rem .5rem}
  .blend__decks{grid-template-columns:1fr;gap:.5rem}
  .hall{min-height:calc(100svh - 14rem)}
}
@media (min-width:821px) and (max-height:820px){
  .blend{max-height:40vh;overflow:auto}
}

.show-prompt{
  position:fixed;inset:0;z-index:80;
  display:grid;place-items:center;
  background:rgba(5,4,6,.48);
}
.show-prompt[hidden]{display:none !important}
.show-prompt__btn{
  min-height:56px;padding:.9rem 1.4rem;
  font:600 .95rem var(--f-cond);letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);background:rgba(8,5,6,.92);
  border:1px solid var(--gold);cursor:pointer;
  box-shadow:0 0 24px rgba(196,30,58,.35);
}

/* ======================================================================
   Stage v3 — a real stage you touch. Every prop opens its own window.
   Everything below overrides the older docked layout.
   ====================================================================== */
html,body{height:100%}
body{overflow:hidden;overscroll-behavior:none}
.top{position:relative;z-index:30;display:flex;align-items:center;gap:.6rem;height:52px;padding:0 .6rem;margin:0}
.top__brand{flex:1;text-align:center}
.top__title{font-size:1.15rem}
.corner{position:relative;flex:none}
.corner__btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  background:rgba(12,6,8,.8);color:var(--bone);cursor:pointer}
.corner__btn svg{width:20px;height:20px;fill:currentColor}
.corner__menu{position:absolute;right:0;top:50px;z-index:9000;display:flex;flex-direction:column;min-width:190px;
  background:#120a0c;border:1px solid #3a2226;border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.7);overflow:hidden}
.corner__menu[hidden]{display:none}
.corner__menu button{appearance:none;border:0;background:none;text-align:left;padding:0 1rem;min-height:48px;
  font:500 .95rem var(--f-sans);color:var(--bone);cursor:pointer;border-bottom:1px solid #22161a}
.corner__menu button:hover,.corner__menu button:focus-visible{background:#2a1518}

.hall{position:relative;margin:0;border:0;min-height:0;height:calc(100svh - 52px);overflow:hidden}
.set{position:absolute;inset:0;z-index:6}
.deck-floor{z-index:1}

/* ---------- props ---------- */
.prop{position:absolute;appearance:none;-webkit-appearance:none;border:0;margin:0;padding:0;background:none;color:var(--bone);
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;z-index:6;
  transition:filter .18s var(--ease),transform .18s var(--ease)}
.prop::before{content:"";position:absolute;inset:-8px;border-radius:14px;border:2px solid transparent;pointer-events:none;
  transition:border-color .18s,box-shadow .18s}
.prop__art{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.prop__name{position:absolute;left:50%;bottom:-.25rem;transform:translate(-50%,100%);white-space:nowrap;pointer-events:none;
  font:600 .58rem/1 var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,234,216,.72);
  padding:.2rem .4rem;border-radius:99px;background:rgba(0,0,0,.45)}
.prop__tag{position:absolute;left:50%;top:-.3rem;transform:translate(-50%,-100%);white-space:nowrap;pointer-events:none;
  font:600 .62rem/1 var(--f-sans);color:#fff;padding:.25rem .5rem;border-radius:99px;background:var(--tag,#c41e3a);
  box-shadow:0 0 12px rgba(0,0,0,.6);z-index:3}
.prop__tag[hidden]{display:none}
@media (hover:hover) and (pointer:fine){
  .prop:hover{filter:brightness(1.18) drop-shadow(0 0 14px rgba(232,200,119,.45))}
  .prop:hover::before{border-color:rgba(232,200,119,.55);box-shadow:0 0 18px rgba(232,200,119,.25)}
  .prop:hover .prop__name{color:#fff;background:rgba(196,30,58,.7)}
}
.prop:focus-visible{outline:none}
.prop:focus-visible::before,.prop.is-press::before{border-color:rgba(232,200,119,.75);box-shadow:0 0 22px rgba(232,200,119,.35)}
.prop.is-press{filter:brightness(1.2) drop-shadow(0 0 14px rgba(232,200,119,.5))}
.prop:active{transform:scale(.97)}
.hall.is-hinting .prop::before{animation:propPulse 1.6s ease-in-out 3}
@keyframes propPulse{50%{border-color:rgba(232,200,119,.6);box-shadow:0 0 18px rgba(232,200,119,.3)}}

/* amps & PA as props */
.prop.amp{justify-self:auto;align-self:auto}
.prop.amp .amp__head{height:auto;aspect-ratio:3.2/1;overflow:hidden}
.prop.amp .amp__panel i{width:clamp(4px,1.4vw,8px);height:clamp(4px,1.4vw,8px)}
.prop.amp .amp__toggles b{width:clamp(4px,1.2vw,7px)}
.prop.amp .amp__cab{height:auto;aspect-ratio:1.25/1}
.prop.amp .amp__grille{top:16%;bottom:7%}
.prop.amp .amp__script{font-size:clamp(.55rem,2.4vw,.95rem)}
.amp--teal .amp__panel{background:linear-gradient(180deg,#a8d8d0,#5fa89e 50%,#3a7e74);border-color:#2a6058}
.amp--teal .amp__toggles b::after{background:#4fb3a9}
.prop.pa{position:absolute;bottom:auto;gap:0}
.prop.pa .pa__stack{gap:3px}
.prop.pa .pa__script{font-size:clamp(.5rem,2.2vw,1rem)}

/* laptop prop: 3D-ish, glowing screen */
.lap{position:relative;display:block;width:100%;perspective:420px}
.lap__lid{display:block;position:relative;width:78%;margin:0 auto;aspect-ratio:16/10.5;transform:rotateX(-8deg);transform-origin:50% 100%;
  background:linear-gradient(160deg,#3a3a40,#16161a);border-radius:6px 6px 2px 2px;padding:5%;
  box-shadow:0 0 0 1px #4a4a52,0 -2px 18px rgba(196,30,58,.25)}
.lap__screen{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:2px;
  background:linear-gradient(180deg,#2a0c12,#0b0507);box-shadow:0 0 18px rgba(196,30,58,.55),inset 0 0 12px rgba(0,0,0,.6);
  }
.lap__lanes{position:absolute;inset:26% 6% 8%;display:block;
  background:
    linear-gradient(90deg,#c41e3a 0 22%,transparent 22% 30%,#c41e3a 30% 52%,transparent 52%) 0 0/100% 18% no-repeat,
    linear-gradient(90deg,transparent 0 12%,#e8c877 12% 40%,transparent 40% 58%,#e8c877 58% 80%,transparent 80%) 0 40%/100% 18% no-repeat,
    linear-gradient(90deg,#4fb3a9 0 34%,transparent 34% 44%,#4fb3a9 44% 70%,transparent 70%) 0 80%/100% 18% no-repeat;opacity:.8}
.lap__head{position:absolute;top:22%;bottom:6%;left:40%;width:2px;background:#fff;box-shadow:0 0 6px #fff}
.lap__screen b{position:absolute;left:6%;top:6%;font:700 clamp(.42rem,1.8vw,.62rem)/1 var(--f-cond);letter-spacing:.12em;text-transform:uppercase;color:#f5ead8}
.lap__base{display:block;position:relative;width:96%;margin:-1px auto 0;height:clamp(6px,1.6vw,12px);
  background:linear-gradient(180deg,#5a5a62,#2a2a30);border-radius:0 0 8px 8px;clip-path:polygon(4% 0,96% 0,100% 100%,0 100%)}
.lap__keys{position:absolute;inset:18% 14% 40%;background:repeating-linear-gradient(90deg,#222 0 3px,#3a3a40 3px 5px)}
.lap__table{display:block;width:100%;height:clamp(10px,2.4vw,18px);margin-top:2px;
  background:linear-gradient(180deg,#3a2418,#1a0e08);border-radius:3px;box-shadow:0 6px 10px rgba(0,0,0,.6)}
@keyframes lapGlow{50%{box-shadow:0 0 26px rgba(196,30,58,.8),inset 0 0 12px rgba(0,0,0,.6)}}
@keyframes lapHead{from{left:6%}to{left:94%}}
@media (prefers-reduced-motion:reduce){.lap__screen,.lap__head{animation:none}}

/* ---------- scene layout: phone portrait first ---------- */
.prop--amp1{left:4%;top:15%;width:18%}
.prop--amp2{right:4%;top:15%;width:18%}
.prop--drums{left:26%;top:12%;width:48%}
.prop--pal{left:1%;top:42%;width:12%}
.prop--par{right:1%;top:42%;width:12%}
.prop--keys1{left:15%;top:38%;width:32%}
.prop--keys2{right:15%;top:38%;width:32%}
.prop--gtr1{left:15%;top:55%;width:13%}
.prop--acoustic{left:31%;top:55%;width:13%}
.prop--vox{left:calc(50% - 4.5%);top:53%;width:9%}
.prop--gtr2{right:16%;top:55%;width:13%}
.prop--snake{left:72%;top:52%;width:12%;display:none}
.prop--dj{left:3%;top:79%;width:30%}
.prop--laptop{left:36%;top:77%;width:28%}
.prop--console{right:3%;top:79%;width:31%}
.prop--snake{display:flex;left:auto;right:2%;top:65%;width:11%}
.prop--pal .prop__name,.prop--par .prop__name{font-size:.5rem}

/* performer: stays out of the way and does not catch taps */
.player{pointer-events:none;z-index:5;width:18%;height:auto;aspect-ratio:120/180}
.player[data-station="electric"]{left:13%;top:47%}
.player[data-station="electric2"]{left:69%;top:47%}
.player[data-station="acoustic"]{left:29%;top:47%}
.player[data-station="keys"]{left:22%;top:28%}
.player[data-station="keys2"]{left:60%;top:28%}
.player[data-station="drums"]{left:40%;top:8%;width:20%;aspect-ratio:140/150}
.player[data-station="vocals"]{left:41%;top:46%}

/* desktop / landscape */
@media (min-width:821px) and (min-height:521px){
  .prop--amp1{left:23%;top:14%;width:8%}
  .prop--amp2{right:23%;top:14%;width:8%}
  .prop--drums{left:37%;top:8%;width:26%}
  .prop--pal{left:1.5%;top:20%;width:7%}
  .prop--par{right:1.5%;top:20%;width:7%}
  .prop--keys1{left:9%;top:42%;width:16%}
  .prop--keys2{right:9%;top:42%;width:16%}
  .prop--gtr1{left:29%;top:44%;width:5.5%}
  .prop--acoustic{left:37%;top:44%;width:5.5%}
  .prop--vox{left:calc(50% - 2%);top:42%;width:4%}
  .prop--gtr2{right:31%;top:44%;width:5.5%}
  .prop--snake{left:60%;right:auto;top:70%;width:5%}
  .prop--snake .prop__name{display:block}
  .prop--dj{left:6%;top:74%;width:17%}
  .prop--laptop{left:43%;top:70%;width:14%}
  .prop--console{right:6%;top:74%;width:18%}
  .prop__name{font-size:.66rem}
  .player{width:7%}
  .player[data-station="electric"]{left:27%;top:36%}
  .player[data-station="electric2"]{left:62%;top:36%}
  .player[data-station="acoustic"]{left:35%;top:36%}
  .player[data-station="keys"]{left:14%;top:30%}
  .player[data-station="keys2"]{left:79%;top:30%}
  .player[data-station="drums"]{left:46%;top:4%;width:8%}
  .player[data-station="vocals"]{left:46.5%;top:34%}
}
/* short landscape phones */
@media (max-height:520px) and (orientation:landscape){
  .prop--amp1{left:22%;top:10%;width:8%}
  .prop--amp2{right:22%;top:10%;width:8%}
  .prop--drums{left:37%;top:4%;width:26%}
  .prop--pal{left:1%;top:16%;width:7%}
  .prop--par{right:1%;top:16%;width:7%}
  .prop--keys1{left:9%;top:40%;width:16%}
  .prop--keys2{right:9%;top:40%;width:16%}
  .prop--gtr1{left:29%;top:40%;width:5%}
  .prop--acoustic{left:36%;top:40%;width:5%}
  .prop--vox{left:48%;top:38%;width:3.6%}
  .prop--gtr2{right:31%;top:40%;width:5%}
  .prop--snake{left:60%;right:auto;top:70%;width:5%}
  .prop--dj{left:6%;top:72%;width:15%}
  .prop--laptop{left:43%;top:66%;width:13%}
  .prop--console{right:6%;top:72%;width:16%}
  .player{width:6%}
}

/* gear list button + hint */
.gear-btn{position:fixed;z-index:40;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.2rem;border-radius:99px;cursor:pointer;
  border:1px solid rgba(232,200,119,.45);background:rgba(18,8,10,.88);color:var(--bone);
  font:600 .9rem var(--f-cond);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gear-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.gear-btn:hover,.gear-btn:focus-visible{border-color:var(--gold);color:#fff}
body.has-win .gear-btn{opacity:0;pointer-events:none}
@media (max-width:820px){.prop--laptop{top:73%}.prop--dj,.prop--console{top:74%}}
.gear-hint{position:absolute;z-index:20;left:50%;bottom:84px;transform:translateX(-50%);margin:0;pointer-events:none;
  padding:.55rem 1rem;border-radius:99px;background:rgba(0,0,0,.72);border:1px solid rgba(232,200,119,.45);
  font:600 .85rem var(--f-sans);color:var(--bone);white-space:nowrap;animation:hintIn .5s var(--ease)}
.gear-hint[hidden]{display:none}
@keyframes hintIn{from{opacity:0;transform:translate(-50%,8px)}}

/* ---------- windows ---------- */
.win{position:fixed;z-index:200;display:flex;flex-direction:column;min-width:260px;max-width:calc(100vw - 8px);
  max-height:calc(100svh - 16px);background:#111013;color:var(--ink);border:1px solid #2c2a30;border-radius:10px;
  box-shadow:0 0 0 1px #000,0 24px 70px rgba(0,0,0,.75);overflow:hidden;font-size:14px}
.win[hidden]{display:none}
.win.is-top{border-color:#4a3a40}
.win.is-drag{opacity:.94;cursor:grabbing}
.win__bar{flex:none;display:flex;align-items:center;gap:.4rem;min-height:48px;padding:2px 2px 2px .9rem;
  background:linear-gradient(180deg,#1f1d22,#18161a);border-bottom:1px solid #2c2a30;cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none}
.win__title{flex:1;min-width:0;margin:0;font:600 .95rem/1.2 var(--f-sans);letter-spacing:.01em;color:#f2ede6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win__extra{display:flex;align-items:center;gap:.35rem;flex:none}
.win__extra:empty{display:none}
.win__btn{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;
  color:#cfc8bf;cursor:pointer}
.win__btn svg{width:18px;height:18px}
.win__btn:hover,.win__btn:focus-visible{background:#2c2a30;color:#fff}
.win__x:hover,.win__x:focus-visible{background:#c41e3a;color:#fff}
.win__btn[hidden]{display:none}
.win__chip{min-height:36px;padding:0 .7rem;border:1px solid #3a3840;border-radius:6px;background:#1a191d;color:#cfc8bf;
  font:600 .7rem var(--f-cond);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.win__chip.is-on{background:#5a4a10;border-color:#e8c877;color:#fff}
.win__select{min-height:36px;max-width:9rem;background:#1a191d;color:#f2ede6;border:1px solid #3a3840;border-radius:6px;padding:0 .4rem}
.win__body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column}
.win.is-max{left:8px !important;top:8px !important;width:auto !important;height:auto !important;right:8px;bottom:8px;max-height:none}
.win__tabs{flex:none;display:flex;gap:2px;padding:4px 6px 0;background:#141317;border-bottom:1px solid #2c2a30}
.win__tabs[hidden]{display:none}
.win__tab{flex:1 1 0;max-width:12rem;min-height:44px;border:0;border-radius:6px 6px 0 0;background:transparent;color:#9a948c;
  font:600 .82rem var(--f-sans);cursor:pointer;border-bottom:2px solid transparent}
.win__tab.is-on{background:#1f1d22;color:#fff;border-bottom-color:#c41e3a}
.win__tab:hover{color:#fff}

/* tools adopted into windows lose their old fixed / docked chrome */
.win__body > .view,.win__body > .desk,.win__body > .mix,.win__body > .plate,.win__body > .slip,
.win__body > .blend,.win__body > .plugin,.win__body > .patchview,.win__body > .masterview,.win__body > .gearlist,.win__body > .helpview{
  position:relative !important;inset:auto !important;left:auto !important;top:auto !important;right:auto !important;bottom:auto !important;
  transform:none !important;width:auto !important;max-width:none !important;height:auto;max-height:none !important;margin:0 !important;
  border:0 !important;border-radius:0;box-shadow:none !important;z-index:auto !important;flex:1 1 auto;min-height:0;
  background-image:none !important;background-color:transparent}
.win__body > [hidden]{display:none !important}
.plate__bar,.mix__bar,.slip__bar,.plugin__bar,.blend__head .hit[data-blend-hide]{display:none}
.plate__bar:has(#ampBypass){display:flex;justify-content:flex-end;border:0;background:transparent;padding:.4rem .6rem 0}
.view{padding:0}
.view__bar{padding:.5rem .7rem}
.view__name{display:none}
.view__body{padding:.4rem .6rem 1rem}
.desk{height:100%;font-size:13px;background:#0e0d10}
.desk__bar{background:#18161a;border-bottom:1px solid #2c2a30;padding:.45rem .6rem;gap:.4rem;position:sticky;top:0;z-index:4}
.desk__mark{display:none}
.desk__panel{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}
.desk__panel[hidden]{display:none}
.desk .cue{flex:1;display:flex;flex-direction:column;min-height:0}
.desk .cue__grid{flex:1;height:auto;min-height:220px}
.desk .board{display:none}
.desk .hit,.win .hit{background:#1a191d;border-color:#3a3840;border-radius:6px;color:#e8e2da}
.desk .hit:hover,.win .hit:hover{border-color:#c41e3a}
.desk .hit.is-on,.win .hit.is-on,.win .hit[aria-pressed="true"]{background:#c41e3a;border-color:#c41e3a;color:#fff}
.win--daw .win__body,.win--mixer .win__body{background:#0e0d10}
.win--amp .win__body{background:#111}
.mix{background:#0e0d10;display:flex;flex-direction:column}
.mix__face{flex:1}
.plug{position:static;width:auto;max-width:none}
.plugin{min-width:0;max-width:none;background:#121114}
.plugin__body{max-height:none}
.plugin-menu{z-index:10000;border-radius:8px;overflow:auto;max-height:70vh}
.plugin-menu button{min-height:40px}
.dbm{z-index:9500;border-radius:8px}
.dbm__x{width:36px;height:32px;border:0;background:transparent;color:#fff;font-size:1.1rem;cursor:pointer}
.blend{padding:.6rem .7rem}
.blend.is-min .blend__decks{display:grid}

/* patch view */
.patchview{display:flex;flex-direction:column;gap:.5rem;padding:.6rem;background:#0e0d10;min-height:100%}
.patchview__bar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.patchview__hint{flex:1;min-width:12rem;font:500 .82rem/1.35 var(--f-sans);color:#9a948c}
.patchview__rack{position:relative;flex:1;min-height:380px;overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));
  gap:10px 48px;padding:12px 14px 20px;border:1px solid #2c2a30;border-radius:8px;align-content:start;
  background:repeating-linear-gradient(0deg,#121114 0 38px,#151418 38px 40px)}
.pv{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
.pv__title{margin:.3rem 0 0;font:600 .66rem var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:#e8c877}
.pv__dev{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:52px;padding:.2rem .3rem .2rem .6rem;
  background:#1c1a1f;border:1px solid #34313a;border-radius:8px;font:600 .78rem var(--f-sans);color:#e8e2da}
.pv--dst .pv__dev{padding:.2rem .6rem .2rem .3rem;justify-content:flex-start}
.pv__dev--io{padding:.2rem .3rem}
.pv__dev--grid{display:grid;grid-template-columns:repeat(3,44px);justify-content:center;gap:6px;padding:.4rem}
.pv__sub{font:600 .6rem var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:#9a948c;align-self:center;text-align:right}
.patchview .jack{position:relative !important;left:auto !important;top:auto !important;bottom:auto !important;right:auto !important;margin:0 !important;flex:none}
.patchview .patch-svg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;pointer-events:none}
@media (max-width:820px){.patchview__rack{gap:10px 22px;padding:10px 8px 16px;grid-template-columns:repeat(3,minmax(96px,1fr))}
  .pv__dev{font-size:.7rem;padding-left:.4rem}}

/* master + meters */
.masterview{padding:.8rem;display:flex;flex-direction:column;gap:.8rem}
.masterview h3{margin:0;font:600 .72rem var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:#e8c877}
.master__row{display:flex;gap:1.2rem;align-items:flex-start}
.master__lab{margin:.2rem 0 0;font:600 .66rem var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:#e8c877}
.stereo--big{height:180px;margin:1rem 0 1.4rem}
.stereo--big .stereo__ch{width:28px}
.master__ctl{flex:1;display:flex;flex-direction:column;gap:.5rem}
.master__ctl input[type="range"]{width:100%;min-height:44px;accent-color:#c41e3a}
.master__read{font:600 1.4rem var(--f-cond);color:#fff}
#paInserts .ins{min-height:44px;font-size:.72rem;border-radius:6px}
.master__meters{display:flex;flex-wrap:wrap;gap:6px}
.master__meters .mix__ms{min-height:44px;min-width:64px;padding:0 .6rem;border-radius:6px;font-size:.7rem}

/* gear list + help */
.gearlist{padding:.7rem}
.gearlist__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gearlist__grid button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.1rem;min-height:60px;padding:0 .8rem;border:1px solid #34313a;border-radius:10px;
  background:#1a191d;color:#f2ede6;font:600 .95rem var(--f-sans);text-align:left;cursor:pointer}
.gearlist__grid button:hover,.gearlist__grid button:focus-visible{border-color:#e8c877;background:#24222a}
.gearlist__grid b{font:600 1rem var(--f-sans)}
.gearlist__grid span{font:500 .74rem var(--f-sans);color:#9a948c}
.helpview .plate__face{padding:0}
.helpview{padding:.9rem 1rem 1.2rem;font:400 .92rem/1.5 var(--f-sans);color:#d8d2ca}
.helpview h3{margin:.6rem 0 .3rem;font:600 .8rem var(--f-cond);letter-spacing:.12em;text-transform:uppercase;color:#e8c877}
.helpview ul{margin:.2rem 0;padding-left:1.1rem}

/* phones: windows are near-full-screen sheets with a big X */
@media (max-width:820px),(max-height:520px){
  .win{left:0 !important;right:0;top:auto !important;bottom:0;width:auto !important;height:auto !important;
    max-height:none;min-width:0;max-width:none;top:calc(env(safe-area-inset-top) + 10px) !important;
    border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom);animation:sheetUp .22s var(--ease)}
  .win.is-max{left:0 !important;right:0;top:0 !important;bottom:0;border-radius:0}
  .win__max{display:none}
  .win__bar{cursor:default;min-height:56px;padding-left:1rem}
  .win__title{font-size:1.02rem}
  .win__x{width:52px;height:52px;background:#26232a;border-radius:50%;margin:2px 4px}
  .win__x svg{width:22px;height:22px}
  .win--gear,.win--plugin{top:auto !important;max-height:88svh}
  .win__select{max-width:6.5rem}
}
@keyframes sheetUp{from{transform:translateY(30px);opacity:.4}}
@media (prefers-reduced-motion:reduce){.win{animation:none}}

/* guest performers: same figure, tinted with the player's color */
.player--guest{filter:drop-shadow(0 0 10px var(--guest)) saturate(.85) hue-rotate(0deg)}
.player--guest .player__pose{opacity:0}
.player--guest .player__pose.is-here{opacity:1}
.player.is-away:not(.player--guest){opacity:0}
.prop__tag{background:var(--tag,#c41e3a)}

/* ---------- Plain static stage: no light show, nothing animates while idle ---------- */
.haze,.spots,.rig-lights,.fx-canvas,.truss,.backdrop__glow,.kick-flash{display:none !important}
.hall{background:linear-gradient(180deg,#0d0b0c 0%,#090808 45%,#060506 100%) !important}
.backdrop__frame{box-shadow:0 0 0 2px #1e1a1b,inset 0 0 30px rgba(0,0,0,.6),0 12px 30px rgba(0,0,0,.5)}
.backdrop__art{opacity:.42;filter:saturate(.75)}
.backdrop__mesh{display:none}
.lap__screen{box-shadow:0 0 10px rgba(196,30,58,.35),inset 0 0 12px rgba(0,0,0,.6)}
.lap__head{left:58%}
.prop__art{filter:none}
.amp__stack{filter:none}
/* phones: one sheet at a time */
.win.is-buried{display:none !important}
.win__back{margin-left:-.4rem}
@media (min-width:821px) and (min-height:521px){.win__back{display:none}}
/* Soft floor fog: two blurred gradient layers drifting with transform only. No JS. */
.floor-fog{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:4;pointer-events:none;overflow:hidden;contain:strict}
.floor-fog span{position:absolute;left:-30%;width:160%;bottom:-10%;height:80%;border-radius:50%;will-change:transform;
  background:radial-gradient(ellipse 50% 50% at 50% 60%,rgba(210,205,200,.9),rgba(210,205,200,0) 70%);filter:blur(18px)}
.floor-fog__a{opacity:.3;animation:fogDrift 46s ease-in-out infinite alternate}
.floor-fog__b{opacity:.22;bottom:-22%;height:70%;animation:fogDrift 63s ease-in-out infinite alternate-reverse}
@keyframes fogDrift{from{transform:translate3d(-12%,0,0)}to{transform:translate3d(12%,0,0)}}
@media (prefers-reduced-motion:reduce){.floor-fog span{animation:none}}
@media (max-width:820px),(max-height:520px){body.has-win .floor-fog span{animation-play-state:paused}}
/* Studio-focused front row (DJ table removed) */
.prop--laptop{left:9%;top:72%;width:38%}
.prop--console{right:7%;left:auto;top:75%;width:36%}
@media (min-width:821px) and (min-height:521px){
  .prop--laptop{left:30%;top:66%;width:18%}
  .prop--console{right:24%;top:72%;width:18%}
  .prop--snake{left:auto;right:8%;top:74%;width:5%}
}
@media (max-height:520px) and (orientation:landscape){
  .prop--laptop{left:30%;top:62%;width:16%}
  .prop--console{right:24%;top:68%;width:16%}
  .prop--snake{left:auto;right:8%;top:72%;width:5%}
}

/* Studio window: compact transport row, one view at a time */
.desk__bar{display:flex;flex-wrap:nowrap;align-items:center;gap:.35rem;overflow-x:auto;scrollbar-width:none}
.desk__bar::-webkit-scrollbar{display:none}
.desk .transport{flex-wrap:nowrap;gap:.3rem}
.desk__bar .hit{min-height:44px;min-width:52px;padding:0 .6rem;font-size:.72rem}
.desk__bar .mode__btn{min-height:44px;padding:0 .55rem}
.desk__bpm{margin-left:auto;flex:none}
.desk__bpm input{width:4.2rem;min-height:40px}
.desk__tools,.cue__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.45rem .6rem;border-bottom:1px solid #2c2a30;background:#141317}
.cue__bar .hit,.desk__tools .hit{min-height:44px;padding:0 .7rem;font-size:.72rem;white-space:nowrap}
.cue__bar .desk__field select,.cue__bar .desk__field input,.desk__tools select{min-height:40px;max-width:9rem}
.cue__mark{display:none}
.desk__panel{position:relative}
.desk .desk__body{flex:1;min-height:240px}
.recpanel{padding:1rem;display:flex;flex-direction:column;gap:.8rem}
.recpanel__hint{margin:0;font:400 .9rem/1.45 var(--f-sans);color:#9a948c}
.recpanel .livebar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;border:0;padding:0}
.recpanel .hit{min-height:52px;min-width:96px;font-size:.85rem}
.recpanel select{min-height:44px;max-width:100%}
.view__loading{margin:2rem auto;text-align:center;color:#9a948c;font:500 .95rem var(--f-sans)}
@media (max-width:820px){
  .win--daw .win__tab{font-size:.78rem;padding:0 .2rem}
  .desk__tools .desk__field,.cue__bar .desk__field{font-size:.6rem}
}
/* Phone studio: compact transport on top, view switcher at the bottom (thumb reach) */
.zoom{display:inline-flex;gap:2px}
.zoom .hit{min-width:44px;font-size:1rem !important}
.cuts{touch-action:pan-x pan-y}
.lane__lab{cursor:pointer}
.lane__lab:hover,.lane__lab:focus-visible{color:#fff;background:#2a1518}
@media (max-width:820px),(max-height:520px){
  .win--daw .win__body{overflow:hidden}
  .win--daw .desk{height:100%;min-height:0}
  .win--daw .desk > .win__tabs{order:99;padding:4px 4px calc(4px + env(safe-area-inset-bottom));border-top:1px solid #2c2a30;border-bottom:0;background:#141317}
  .win--daw .desk > .win__tabs .win__tab{border-radius:0 0 6px 6px;border-bottom:0;border-top:2px solid transparent;min-height:50px}
  .win--daw .desk > .win__tabs .win__tab.is-on{border-top-color:#c41e3a}
  .win--daw .desk__panel{flex:1 1 auto;min-height:0;overflow:auto}
  .win--slip{top:auto !important;max-height:52svh;border-top:2px solid #c41e3a;box-shadow:0 -12px 40px rgba(0,0,0,.7)}
}

/* ---------- JED-43 theme for tool windows (studio, mixer, plugins, clip editor) ---------- */
.win{background:#0a0506;border-color:#3a1218;box-shadow:0 0 0 1px #000,0 0 30px rgba(196,30,58,.12),0 24px 70px rgba(0,0,0,.8)}
.win.is-top{border-color:#6a1a26}
.win__bar{background:linear-gradient(180deg,#1c0a0e,#120608);border-bottom:1px solid #4a141e}
.win__title{font:600 .98rem/1.2 var(--f-serif);letter-spacing:.06em;color:var(--bone)}
.win__btn{color:var(--gold)}
.win__btn:hover,.win__btn:focus-visible{background:#2a1015;color:#fff}
.win__x{color:var(--bone)}
.win__tabs{background:#0e0608;border-color:#3a1218}
.win__tab{font:600 .8rem var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:#a89580}
.win__tab.is-on{background:#1c0a0e;color:var(--gold);border-bottom-color:var(--blood)}
.win__chip,.win__select{background:#140809;border-color:#4a141e;color:var(--bone)}
.win__chip.is-on{background:var(--blood);border-color:var(--blood)}
/* faint blood-moon art behind the studio and its tool windows: one static layer, dark overlay */
.win--daw .win__body,.win--mixer .win__body,.win--plugin .win__body,.win[data-win="clip"] .win__body{
  background:linear-gradient(rgba(8,3,4,.9),rgba(8,3,4,.9)),#080304 url("../../images/hero.jpg") center 38%/cover no-repeat}
.win--daw .desk,.win--mixer .mix,.win--plugin .plugin,.win[data-win="clip"] .plate{background:transparent !important}
.desk__bar,.desk__tools,.cue__bar{background:rgba(18,6,9,.88);border-color:#3a1218}
.desk .hit,.win .hit{background:#140809;border-color:#4a141e;color:var(--bone);font-family:var(--f-cond);letter-spacing:.1em;text-transform:uppercase}
.desk .hit:hover,.win .hit:hover{border-color:var(--blood);color:#fff}
.desk .hit.is-on,.win .hit.is-on,.win .hit[aria-pressed="true"],.mode__btn.is-on{background:var(--blood);border-color:var(--blood);color:#fff;box-shadow:0 0 10px rgba(196,30,58,.45)}
.desk__field,.cue__bar .desk__field{color:var(--gold);font-family:var(--f-cond)}
.desk__field input,.desk__field select,.win select,.win input[type="number"]{background:#0e0507;color:var(--bone);border:1px solid #4a141e}
.lane__lab{color:var(--gold);font-family:var(--f-cond);letter-spacing:.08em;background:rgba(14,5,7,.92)}
.ruler{background:#0e0507;color:#c8b896}
.lane{border-color:rgba(196,30,58,.18)}
.clip{border-color:rgba(232,200,119,.5)}
.recpanel__hint{color:#c8b896}
.recpanel__hint b{color:var(--gold)}
.plugin__field,.plugin label{color:var(--gold)}
.mix__name{color:var(--gold)}
@media (max-width:820px){
  .prop--laptop{left:12%;top:77%;width:29%}
  .prop--console{right:9%;top:78.5%;width:31%}
}
.gear-hint{bottom:auto;top:12px}