/* DAFTWERK-808 — light steel in light mode, classic black in dark mode. Orange step-key bands. */
:root{--m-body:#d9dcdf;--m-face:#e9ebed;--m-ink:#1b1d20;--m-sub:#5b6168;--m-line:#b9bec4;--m-well:#c9ccd0;--m-key:#f4f4f3;--m-keyoff:#cfd3d7;--m-lcd:#1b1d20;--m-lcdon:#f26a1b;--m-lcdoff:rgba(242,106,27,.12);--m-shadow:0 30px 70px rgba(0,0,0,.18)}
:root[data-theme=dark]{--m-body:#16171a;--m-face:#1f2125;--m-ink:#f4f4f3;--m-sub:#9aa0a7;--m-line:#33363b;--m-well:#2a2d31;--m-key:#2d3035;--m-keyoff:#26292d;--m-lcd:#0a0b0c;--m-lcdon:#ff7a2a;--m-lcdoff:rgba(242,106,27,.1);--m-shadow:0 30px 80px rgba(0,0,0,.55)}
.dw{background:var(--bg)}
.dw .world{display:none}
.dw-main{padding:120px 0 80px}
.dw-intro{margin-bottom:34px}
.dw-h1{font-size:clamp(36px,5vw,72px);margin-bottom:16px}
.dw-intro .lead{margin:0;max-width:640px}
.rig{overflow-x:auto;padding-bottom:10px}
.m808{min-width:1060px;background:linear-gradient(180deg,var(--m-face),var(--m-body));border-radius:18px;padding:26px 28px 18px;box-shadow:var(--m-shadow),inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px var(--m-line);color:var(--m-ink);transition:background .5s,color .5s}
.m-top{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-bottom:18px;border-bottom:2px solid var(--m-line)}
.seg .on{fill:var(--m-lcdon)}.seg .off{fill:var(--m-lcdoff)}
.seg.logo{height:58px;width:auto;display:block}
.seg.logo .on{fill:var(--o)}
.m-sub{margin-top:8px;font:800 12px var(--f);letter-spacing:.32em;text-transform:uppercase;color:var(--m-ink)}
.m-sub span{color:var(--m-sub);letter-spacing:.2em}
.m-trans{display:flex;align-items:center;gap:22px}
.lcdbox{background:var(--m-lcd);border-radius:8px;padding:8px 12px 10px;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.lcdbox small{display:block;font:700 9px var(--f);letter-spacing:.2em;text-transform:uppercase;color:#7a8088;margin-bottom:4px}
.lcd .seg{height:34px;width:auto;display:block}
.lcd.sm .seg{height:22px}
.t-play{width:64px;height:64px;border-radius:50%;border:0;background:var(--o);cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 0 #b84d10,0 10px 20px rgba(0,0,0,.25);transition:transform .1s,box-shadow .1s}
.t-play:active{transform:translateY(4px);box-shadow:0 2px 0 #b84d10}
.t-play .tri{width:0;height:0;border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.t-play .sq{display:none;width:20px;height:20px;background:#fff;border-radius:3px}
.t-play.on .tri{display:none}.t-play.on .sq{display:block}
.m-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 0}
.presets{display:flex;flex-wrap:wrap;gap:6px}
.preset,.pill{border:0;background:var(--m-well);color:var(--m-ink);font:700 12.5px var(--f);padding:8px 13px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.preset:hover,.pill:hover{background:var(--m-line)}
.preset.on,.pill.o{background:var(--o);color:#fff}
.pill:disabled{opacity:.4;cursor:default}
.m-acts{display:flex;gap:6px}
.m-mid{display:grid;grid-template-columns:1fr 300px;gap:22px}
.leds-row,.row{display:grid;grid-template-columns:118px repeat(16,1fr);gap:4px;align-items:center}
.leds{display:contents}
.led{height:6px;border-radius:3px;background:var(--m-keyoff);margin:0 6px 6px;transition:background .05s}
.led.on{background:var(--o);box-shadow:0 0 10px var(--o)}
.grid{display:grid;gap:4px}
.lab{display:flex;align-items:center;gap:8px;height:30px;border:0;background:transparent;color:var(--m-ink);cursor:pointer;padding:0 6px;border-radius:6px;text-align:left;position:relative}
.lab b{font:900 13px var(--f);width:24px}
.lab span{font:600 11px var(--f);color:var(--m-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab:hover{background:var(--m-well)}
.lab.hit b{animation:hit .25s}
@keyframes hit{0%{color:var(--o);transform:scale(1.2)}100%{color:inherit;transform:none}}
.lab .smp{display:none;position:absolute;right:4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--o)}
.row.sampled .smp{display:block}
.row.sel .lab{background:var(--m-well);box-shadow:inset 3px 0 0 var(--o)}
.row.armed .lab{animation:armed .8s ease-in-out infinite}
@keyframes armed{50%{background:rgba(242,106,27,.3)}}
.row[data-r=AC] .lab b{color:var(--o)}
.st{height:30px;border:0;border-radius:4px;background:var(--m-keyoff);cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);transition:background .08s,transform .08s}
.st:hover{filter:brightness(1.08)}
.st.on.b0{background:#c4520f}.st.on.b1{background:#f26a1b}.st.on.b2{background:#ffb27a}.st.on.b3{background:var(--m-key);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset 0 0 0 2px var(--o)}
:root:not([data-theme=dark]) .st.on.b3{background:#fff}
.st.now{outline:2px solid var(--m-ink);outline-offset:-2px}
.st.on.now{transform:scale(.92)}
.row[data-r=AC] .st.on{background:var(--m-ink)}
.side-panel .panel{background:var(--m-well);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}
.p-head{display:flex;align-items:center;gap:12px}
.p-head .lcd{background:var(--m-lcd);padding:6px 9px;border-radius:6px}
.p-head b{font:800 15px var(--f)}
.knobs3{display:flex;justify-content:space-between}
.wavebox{position:relative;background:var(--m-lcd);border-radius:8px;height:70px;overflow:hidden}
.wavebox canvas{width:100%;height:100%;display:block}
.wavebox small{position:absolute;left:8px;bottom:5px;font:700 9.5px var(--f);letter-spacing:.12em;text-transform:uppercase;color:#7a8088}
.sam-btns{display:flex;flex-wrap:wrap;gap:6px}
.sam-stat{display:grid;grid-template-columns:8px 1fr auto;gap:10px;align-items:center;font-size:12.5px;color:var(--m-sub);min-height:34px}
.sam-stat b{color:var(--o)}
.miclvl{width:8px;height:30px;border-radius:4px;background:linear-gradient(to top,var(--o) calc(var(--lv,0)*100%),var(--m-keyoff) 0)}
.tiny{border:0;background:none;color:var(--m-sub);font:600 11px var(--f);cursor:pointer;text-decoration:underline}
body:not(.armed) .tiny{visibility:hidden}
.m-fx{display:flex;gap:10px;margin-top:20px;padding-top:18px;border-top:2px solid var(--m-line)}
.fxg{position:relative;display:flex;gap:6px;align-items:flex-end;padding:22px 12px 10px;background:var(--m-well);border-radius:12px}
.fxg h3{position:absolute;left:12px;top:8px;font:800 10px var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--m-sub)}
.fxg.out{margin-left:auto;align-items:center}
#scope{width:170px;height:58px;background:var(--m-lcd);border-radius:8px;display:block}
.gr{width:12px;height:58px;border-radius:5px;background:var(--m-keyoff);position:relative;overflow:hidden;align-self:center}
.gr i{position:absolute;left:0;right:0;top:0;height:calc(var(--gr,0)*100%);background:var(--o);transition:height .05s}
.gr small{position:absolute;bottom:-16px;left:-2px;font:700 8px var(--f);color:var(--m-sub)}
.m-foot{margin-top:12px;font-size:11.5px;color:var(--m-sub);text-align:center}
/* knobs */
.knob{width:62px;display:flex;flex-direction:column;align-items:center;cursor:ns-resize;user-select:none;touch-action:none;outline:0}
.knob.big{width:74px}
.knob svg{width:52px;height:52px;display:block}
.knob.big svg{width:64px;height:64px}
.kr{fill:none;stroke:var(--m-keyoff);stroke-width:4}
.ka{fill:none;stroke:var(--o);stroke-width:4;stroke-linecap:round}
.kb{fill:var(--m-ink);filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
:root[data-theme=dark] .kb{fill:#3a3e44}
.kp{stroke:var(--o);stroke-width:3.5;stroke-linecap:round}
.knob.turn .kb,.knob:focus-visible .kb{fill:var(--o)}.knob.turn .kp,.knob:focus-visible .kp{stroke:#fff}
.kv{font:800 11px var(--f);color:var(--m-ink);margin-top:2px;min-height:14px}
.knob label{font:700 9.5px var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--m-sub);cursor:inherit}
@media (max-width:760px){.dw-main{padding-top:100px}.rig{margin:0}.m808{padding:20px}}
.panel .pill{background:var(--m-face);box-shadow:inset 0 0 0 1px var(--m-line)}
.panel .pill.o{background:var(--o);box-shadow:none}
/* sampling v2 */
.pill.rec{display:inline-flex;align-items:center;gap:8px}
.pill.rec .dot{width:10px;height:10px;border-radius:50%;background:#fff}
.pill.rec.live{background:#c4520f}.pill.rec.live .dot{animation:recblink .6s steps(2) infinite}
@keyframes recblink{50%{opacity:.2}}
.wavebox{height:84px}
.trim{position:absolute;inset:0;--a:0;--b:1;pointer-events:none}
.wavebox.has .trim{pointer-events:auto}
.shade{position:absolute;top:0;bottom:0;background:rgba(0,0,0,.55);pointer-events:none}
.shade.l{left:0;width:calc(var(--a)*100%)}.shade.r{right:0;width:calc((1 - var(--b))*100%)}
.th{position:absolute;top:0;bottom:0;width:14px;margin-left:-7px;cursor:ew-resize;z-index:2;display:none}
.wavebox.has .th{display:block}
.th::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:#fff}
.th::after{content:"";position:absolute;left:1px;top:50%;width:12px;height:20px;margin-top:-10px;border-radius:3px;background:var(--o)}
.th.a{left:calc(var(--a)*100%)}.th.b{left:calc(var(--b)*100%)}
body:not(.armed) #cancel{visibility:hidden}
.kit{margin-top:20px;padding:16px 18px;background:var(--m-well);border-radius:12px}
.kit-head{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.kit-head h3{font:800 11px var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--m-ink)}
.kit-head p{font-size:12.5px;color:var(--m-sub)}
.kit-acts{margin-left:auto;display:flex;gap:6px}
.kit .pill{background:var(--m-face);box-shadow:inset 0 0 0 1px var(--m-line)}.kit .pill.o{background:var(--o);box-shadow:none}
.kitchips{display:grid;grid-template-columns:repeat(13,1fr);gap:6px}
.kc{border:0;border-radius:8px;background:var(--m-face);box-shadow:inset 0 0 0 1px var(--m-line);padding:8px 0 7px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--m-ink);transition:background .2s,transform .15s}
.kc b{font:900 14px var(--f)}.kc small{font:700 9px var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--m-sub)}
.kc:hover{transform:translateY(-2px)}
.kc.yours{background:var(--o);box-shadow:none;color:#fff}.kc.yours small{color:#ffe1cc}
.kc.sel{box-shadow:inset 0 0 0 2px var(--m-ink)}
.kc.live{animation:armed .8s ease-in-out infinite}
.guide{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:14px;padding:16px 18px;border-radius:10px;background:var(--m-lcd);color:#fff}
.guide[hidden]{display:none}
.g-step small{display:block;font:700 10px var(--f);letter-spacing:.18em;text-transform:uppercase;color:#7a8088}
.g-step b{display:block;font:900 26px var(--f);letter-spacing:-.03em;text-transform:uppercase;color:var(--o)}
.g-step p{font-size:13.5px;color:#c9ccd0}
.g-btns{display:flex;gap:6px}.guide .pill{background:#2d3035;color:#fff;box-shadow:none}
.wavebox canvas{position:absolute;left:10px;right:10px;top:0;bottom:0;width:calc(100% - 20px)}
.trim{left:10px;right:10px;inset:0 10px}
.th{width:20px;margin-left:-10px}.th::before{left:9px}.th::after{left:4px}

/* ---------- 80s electro ---------- */
/* stage: striped sunset + perspective grid floor behind the machine */
.rig-stage{position:relative;padding:40px 0 30px;overflow:hidden}
.retro{position:absolute;inset:0;pointer-events:none;z-index:0}
.retro .sun{position:absolute;left:50%;top:0;width:min(560px,70vw);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:linear-gradient(180deg,#ffb27a 0%,#f26a1b 55%,#c4520f 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 46%,transparent 46% 50%,#000 50% 56%,transparent 56% 61%,#000 61% 66%,transparent 66% 72%,#000 72% 77%,transparent 77% 84%,#000 84% 88%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0 46%,transparent 46% 50%,#000 50% 56%,transparent 56% 61%,#000 61% 66%,transparent 66% 72%,#000 72% 77%,transparent 77% 84%,#000 84% 88%,transparent 88%);opacity:.85}
.retro .floor{position:absolute;left:-20%;right:-20%;bottom:0;height:55%;transform:perspective(420px) rotateX(62deg);transform-origin:50% 100%;
  background:linear-gradient(transparent 0 0),repeating-linear-gradient(90deg,rgba(242,106,27,.55) 0 2px,transparent 2px 70px),repeating-linear-gradient(0deg,rgba(242,106,27,.55) 0 2px,transparent 2px 70px);
  -webkit-mask-image:linear-gradient(0deg,#000 30%,transparent);mask-image:linear-gradient(0deg,#000 30%,transparent);animation:floor 2.4s linear infinite}
@keyframes floor{to{background-position:0 0,0 0,0 70px}}
:root:not([data-theme=dark]) .retro .floor{opacity:.6}
.rig{position:relative;z-index:1}
/* glowing displays with scanlines */
.seg .on{fill:var(--m-lcdon);filter:drop-shadow(0 0 3px rgba(255,122,42,.85))}
.seg.logo .on{filter:drop-shadow(0 0 6px rgba(242,106,27,.55))}
.lcdbox,.wavebox,#scope,.p-head .lcd,.np-box,.guide{position:relative}
.lcdbox::after,.wavebox::after,.np-box::after,.p-head .lcd::after,.guide::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
#scope{filter:drop-shadow(0 0 3px rgba(242,106,27,.6))}
/* now playing marquee */
.np-box{flex:1;max-width:420px;background:var(--m-lcd);border-radius:8px;padding:8px 12px 10px;box-shadow:inset 0 2px 8px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05)}
.np-box small{display:block;font:700 9px var(--f);letter-spacing:.2em;text-transform:uppercase;color:#7a8088;margin-bottom:5px}
.np-win{overflow:hidden;white-space:nowrap;height:30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.np-win .seg{height:30px;width:auto;display:inline-block}
.np-win.scroll .seg{animation:marq 9s linear infinite;padding-left:100%}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* chunky hardware preset keys */
.preset{border-radius:6px;padding:10px 14px;background:linear-gradient(180deg,var(--m-face),var(--m-well));box-shadow:0 3px 0 var(--m-line),inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px var(--m-line);font-size:12px;transition:transform .08s,box-shadow .08s,background .2s}
.preset:active{transform:translateY(3px);box-shadow:0 0 0 var(--m-line),inset 0 0 0 1px var(--m-line)}
.preset.on{background:linear-gradient(180deg,#ff8a45,var(--o));color:#fff;box-shadow:0 3px 0 #b84d10,0 0 16px rgba(242,106,27,.45)}
/* chrome sub-title */
.m-sub{background:linear-gradient(180deg,var(--m-ink) 0 55%,var(--m-sub) 56% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.m-sub span{-webkit-text-fill-color:var(--m-sub)}
/* step keys get a little bevel */
.st{box-shadow:inset 0 -3px 0 rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.18)}
.st.on{box-shadow:inset 0 -3px 0 rgba(0,0,0,.2),0 0 10px rgba(242,106,27,.35)}
.m-top{gap:24px}
.th{touch-action:none}.trim{touch-action:none;cursor:ew-resize}
.wavebox:not(.has) .trim{cursor:default}
.pill.share{background:var(--m-ink);color:var(--m-face)}
.sharemsg{align-self:center;font:700 12px var(--f);color:var(--o);opacity:0;transition:opacity .3s;margin-right:6px}
.sharemsg.show{opacity:1}
.m-acts{align-items:center}
.m-bar{flex-wrap:wrap}
.m-acts{flex:none}
.m-acts .pill{white-space:nowrap}
.rig-stage{padding:150px 0 140px;margin-top:-40px}
.retro .sun{top:10px;width:min(520px,64vw)}
.retro .floor{height:48%}
@media (hover:none),(max-width:900px){.plughint{display:none}}
.exp{position:relative}
.exp-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:290px;background:var(--m-face);border-radius:12px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.25),inset 0 0 0 1px var(--m-line);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s,transform .22s}
.exp.open .exp-menu{opacity:1;transform:none;pointer-events:auto}
.exp-menu button{display:block;width:100%;text-align:left;border:0;background:none;color:var(--m-ink);padding:10px 12px;border-radius:8px;cursor:pointer}
.exp-menu button:hover{background:var(--m-well)}
.exp-menu b{display:block;font:800 13.5px var(--f)}.exp-menu small{font:500 11.5px var(--f);color:var(--m-sub)}
.exp-menu button.busy{opacity:.5;pointer-events:none}
/* no grid floor, no scrollbars */
.retro .floor{display:none}
.rig-stage{padding-bottom:60px}
.rig{overflow:visible;padding-bottom:0}
@media (max-width:1140px){.rig{overflow-x:auto;scrollbar-width:none}.rig::-webkit-scrollbar{display:none}}
.retro{display:none}
.rig-stage{padding-top:20px;margin-top:0}
/* COLOUR jack: where the plug from the logo goes */
.jack{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:help}
.j-sock{position:relative;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 50% 45%,#2a2d31 0 55%,#121315 56% 100%);box-shadow:inset 0 0 0 3px #4a4f56,inset 0 0 0 6px #1b1d20,0 2px 0 rgba(255,255,255,.2);display:flex;justify-content:center;align-items:center;gap:8px}
.j-sock i{width:5px;height:16px;border-radius:3px;background:#0a0b0c;box-shadow:inset 0 0 0 1px #4a4f56}
.jack small{font:800 9.5px var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--m-sub)}
html.plug-out .j-sock{animation:jackpulse 1s ease-in-out infinite}
@keyframes jackpulse{50%{box-shadow:inset 0 0 0 3px var(--o),inset 0 0 0 6px #1b1d20,0 0 0 8px rgba(242,106,27,.25),0 0 22px rgba(242,106,27,.6)}}
html.plug-out .jack small{color:var(--o)}
.m-trans{gap:16px}
.np-box{max-width:330px;min-width:220px}
.m-top{gap:18px}
.seg.logo{height:52px}
/* the two big generator keys */
.smothers{display:flex;gap:10px}
.big-key{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;border:0;cursor:pointer;padding:12px 20px 12px 14px;border-radius:10px;color:#fff;
  background:linear-gradient(180deg,#ff8a45,var(--o) 55%,#d9560b);box-shadow:0 5px 0 #a8460d,0 10px 22px rgba(242,106,27,.35),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .08s,box-shadow .08s}
.big-key:active{transform:translateY(4px);box-shadow:0 1px 0 #a8460d,0 4px 10px rgba(242,106,27,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.big-key .ankh{grid-row:1/3;width:40px;height:40px;border-radius:8px;background:rgba(0,0,0,.18);display:grid;place-items:center;font-size:22px;line-height:1}
.big-key b{font:900 17px var(--f);letter-spacing:-.02em;text-transform:uppercase}
.big-key small{font:600 11.5px var(--f);opacity:.85}
.big-key.fx{background:linear-gradient(180deg,#3a3e44,#1b1d20);box-shadow:0 5px 0 #000,0 10px 22px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.15)}
.big-key.fx .ankh{color:var(--o)}
.big-key.spin .ankh{animation:spinA .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes spinA{from{transform:rotate(-180deg) scale(.6)}}
.np-win.scroll .seg{animation-name:marq;animation-timing-function:linear;animation-iteration-count:infinite}
.m-bar{padding-top:30px}
/* smother keys: smaller + cleaner */
.smothers{gap:8px}
.big-key{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 10px;border-radius:999px;background:var(--o);box-shadow:0 3px 0 #b84d10;transition:transform .08s,box-shadow .08s,background .2s}
.big-key:hover{background:#ff7a2a}
.big-key:active{transform:translateY(2px);box-shadow:0 1px 0 #b84d10}
.big-key .ankh{grid-row:auto;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.2);font-size:13px}
.big-key b{font:800 13px var(--f);letter-spacing:.02em}
.big-key.fx{background:var(--m-ink);color:var(--m-face);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.big-key.fx:hover{background:var(--m-ink)}
.big-key.fx .ankh{background:rgba(242,106,27,.2);color:var(--o)}
.big-key b{word-spacing:.18em}
.nav a.cur{color:var(--o)}

/* ---------- Egyptian dancefloor (for the Egyptian Lover) ---------- */
:root{--eg-stone:#d6d9dd;--eg-shade:#b3b9c0;--eg-ink:#2a2d31;--eg-sand:#e9ebed}
:root[data-theme=dark]{--eg-stone:#3a3e44;--eg-shade:#2a2d31;--eg-ink:#c9ccd0;--eg-sand:#1f2125}
.egypt{position:relative;height:300px;margin:-10px auto 0;max-width:var(--max);overflow:hidden;pointer-events:none}
.eg-sun{position:absolute;left:50%;top:18px;width:140px;height:140px;margin-left:-70px;border-radius:50%;background:radial-gradient(circle,#ffb27a,#f26a1b 60%,rgba(242,106,27,0) 72%);opacity:.55}
.eg-pyrs{position:absolute;left:0;right:0;bottom:62px;display:flex;justify-content:center;align-items:flex-end;gap:0}
.eg-pyr{display:block;height:auto;transform-origin:50% 100%}
.eg-pyr.p1{margin-right:-40px}.eg-pyr.p3{margin-left:-30px}
.eg-floor{position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(180deg,var(--eg-sand),transparent);border-top:2px solid var(--eg-shade)}
.eg-crew{position:absolute;left:0;right:0;bottom:22px;height:200px}
.eg-crew>*{position:absolute;bottom:0}
.eg-walkers{left:2%;display:flex;gap:6px}.eg-walkers.r{left:auto;right:2%}
.eg-spot.camel{left:20%}.eg-spot.mummy{right:21%}
.eg-moon{left:0;right:0;height:200px}
.eg-moon-in{position:absolute;bottom:0;left:38%;display:flex;flex-direction:column;align-items:center;animation:moonpath 16s ease-in-out infinite}
.eg-name{order:-1;font:800 10px var(--f);letter-spacing:.22em;text-transform:uppercase;color:var(--o);margin-bottom:4px;white-space:nowrap}
@keyframes moonpath{0%{transform:translateX(0)}45%{transform:translateX(200px)}50%{transform:translateX(200px)}95%{transform:translateX(0)}100%{transform:translateX(0)}}
.eg-plaque{position:absolute;left:0;right:0;bottom:4px;text-align:center;font:800 11px var(--f);letter-spacing:.24em;text-transform:uppercase;color:var(--m-sub,#7a8088)}
.eg-plaque span{color:var(--o)}
.egypt svg *{transform-box:fill-box}
/* idle: everyone sways gently */
.eg-bob{animation:idlebob 2.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes idlebob{50%{transform:translateY(-3px) rotate(-1deg)}}
.eg-head{transform-origin:50% 90%;animation:nod 2.4s ease-in-out infinite}
@keyframes nod{50%{transform:rotate(4deg)}}
/* moonwalk legs slide back and forth */
.eg-mw{transition:transform .12s}
.egypt .eg-mw.a{transform:translateX(-6px)}.egypt .eg-mw.b{transform:translateX(6px)}
.egypt.ph .eg-mw.a{transform:translateX(6px)}.egypt.ph .eg-mw.b{transform:translateX(-6px)}
/* steppers */
.eg-leg{transform-origin:50% 0;transition:transform .12s}
.egypt.ph .eg-leg.a,.egypt:not(.ph) .eg-leg.b{transform:rotate(14deg)}
.egypt.ph .eg-leg.b,.egypt:not(.ph) .eg-leg.a{transform:rotate(-10deg)}
.egypt:not(.live) .eg-leg,.egypt:not(.live) .eg-mw{animation:idlestep 1.2s ease-in-out infinite}
.egypt:not(.live) .eg-leg.b,.egypt:not(.live) .eg-mw.b{animation-delay:-.6s}
@keyframes idlestep{50%{transform:rotate(10deg)}}
/* live: the beat drives it */
.egypt.live .eg-bob{animation:none}
.egypt.live .eg-head{animation:none;transition:transform .1s}
.egypt.live.ph .eg-head{transform:rotate(6deg)}.egypt.live:not(.ph) .eg-head{transform:rotate(-4deg)}
.egypt.kick .eg-bob{animation:hop .22s ease-out}
@keyframes hop{30%{transform:translateY(-12px)}}
.egypt.kick .eg-pyr{animation:thump .2s ease-out}
@keyframes thump{30%{transform:scale(1.04,.97)}}
.egypt.kick .eg-cone{animation:cone .2s ease-out;transform-origin:center}
@keyframes cone{30%{transform:scale(1.25)}}
.egypt.kick .eg-sun{animation:sunp .25s ease-out}
@keyframes sunp{30%{opacity:.85;transform:scale(1.08)}}
.eg-pop{transform-origin:85% 50%;transition:transform .08s}.eg-pop.r{transform-origin:15% 50%}
.egypt.snare .eg-pop.l{animation:popl .2s steps(1)}.egypt.snare .eg-pop.r{animation:popr .2s steps(1)}
@keyframes popl{0%{transform:rotate(-55deg)}100%{transform:none}}@keyframes popr{0%{transform:rotate(55deg)}100%{transform:none}}
.egypt.live.ph .eg-pop.l{transform:rotate(30deg)}.egypt.live:not(.ph) .eg-pop.r{transform:rotate(-30deg)}
.egypt.snare .eg-eye{fill:#fff}
.egypt.live.ph .eg-arm{transform:rotate(-20deg);transform-origin:0 100%}
.egypt.snare .eg-box{animation:boxp .18s ease-out;transform-origin:center}
@keyframes boxp{40%{transform:scale(1.1)}}
@media (max-width:900px){.egypt{height:240px}.eg-walkers{display:none}.eg-spot.camel{left:2%}.eg-spot.mummy{right:2%}.eg-pyr.p1{width:180px!important}.eg-camel{width:140px!important}}
@media (prefers-reduced-motion:reduce){.egypt *{animation:none!important;transition:none!important}}
/* dancefloor v2: tomb painting meets breakdance */
:root{--eg-line:#1b1d20;--eg-course:rgba(27,29,32,.12)}
:root[data-theme=dark]{--eg-line:#0a0b0c;--eg-course:rgba(0,0,0,.35)}
.egypt{height:330px}
.eg-sun{left:50%;top:6px;width:240px;height:150px;margin-left:-120px;border-radius:0;background:none;opacity:1}
.eg-sun svg{display:block;width:100%;height:auto}
.eg-pyrs{bottom:60px}
.eg-spot.camel{left:14%}.eg-spot.mummy{right:31%}.eg-spot.dj{left:auto;right:12%}
.eg-moon-in{left:38%}
@keyframes moonpath{0%{transform:translateX(0)}45%{transform:translateX(150px)}50%{transform:translateX(150px)}95%{transform:translateX(0)}100%{transform:translateX(0)}}
.eg-plat{animation:plat 1.8s linear infinite}
@keyframes plat{to{transform:rotate(360deg)}}
.egypt.live .eg-plat{animation-duration:.6s}
.eg-scratch{transition:transform .08s}
.egypt.snare .eg-scratch{animation:scratch .22s ease-in-out}
@keyframes scratch{30%{transform:rotate(-14deg)}70%{transform:rotate(8deg)}}
.egypt.kick .eg-sun{animation:sunp .25s ease-out}
@keyframes sunp{30%{transform:scale(1.05)}}
.eg-camel,.eg-mummy,.eg-tut,.eg-anubis{overflow:visible}
@media (max-width:1100px){.eg-spot.dj{display:none}.eg-spot.mummy{right:14%}}
@media (max-width:900px){.egypt{height:270px}.eg-sun{transform:scale(.7);transform-origin:50% 0}}
/* pivots given in px are in the drawing's own coordinates */
.egypt [style*="transform-origin"]{transform-box:view-box}
.eg-name{order:1;margin:4px 0 0}
.eg-crew{bottom:16px}
.egypt{height:230px}.eg-pyrs{bottom:44px}.eg-floor{height:54px}

/* ===== STUDIO: fixed floor under the header, drag + zoom ===== */
body.studio-mode{overflow:hidden;height:100vh;height:100dvh;overscroll-behavior:none}
.studio{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
  background:radial-gradient(circle at 1px 1px,var(--st-dot) 1px,transparent 1.5px) 0 0/28px 28px,var(--bg)}
:root{--st-dot:rgba(27,29,32,.13);--st-mat:#e4e6e8;--st-matline:rgba(27,29,32,.08)}
:root[data-theme=dark]{--st-dot:rgba(255,255,255,.07);--st-mat:#141518;--st-matline:rgba(255,255,255,.05)}
.studio.panning{cursor:grabbing}
.dw .studio .world{display:block;position:absolute;left:0;top:0;z-index:auto;pointer-events:auto;transform-origin:0 0;will-change:transform}
.studio .dw-intro{position:absolute;left:120px;top:110px;width:760px;margin:0}
.studio .dev{position:absolute}
.studio .dev::before{content:"";position:absolute;inset:-26px;border-radius:30px;background:var(--st-mat);box-shadow:inset 0 0 0 1px var(--st-matline);z-index:-1}
.d808{width:1320px}.d808 .m808{min-width:0}
.dpyr{width:1200px}.dpyr .egypt{max-width:none;margin:0}
.dpyr::before{display:none}
.studio .knob,.studio button,.studio [data-patch]{cursor:pointer}
.studio .knob{cursor:ns-resize}

/* patch jacks */
.pjack{display:flex;flex-direction:column;align-items:center;gap:5px;touch-action:none}
.pjack .pj{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#050505 0 32%,#8d939a 34% 46%,#d4d7da 50% 60%,#6b7076 64%);box-shadow:0 2px 4px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.3);transition:box-shadow .2s,transform .2s}
.pjack small{font:800 9px var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--m-sub);white-space:nowrap}
.pjack:hover .pj{box-shadow:0 0 0 4px rgba(242,106,27,.35),0 2px 4px rgba(0,0,0,.35)}
.patching .pjack.want .pj{box-shadow:0 0 0 5px var(--o),0 0 22px var(--o);animation:want .8s ease-in-out infinite alternate}
@keyframes want{to{transform:scale(1.12)}}
.pjack.plugged small{color:var(--o)}
.patch{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:5}
.patch .pc-sh{fill:none;stroke:rgba(0,0,0,.22);stroke-width:13;stroke-linecap:round;transform:translate(4px,9px)}
.patch .pc{fill:none;stroke:var(--o);stroke-width:10;stroke-linecap:round}
.patch .pc-hl{fill:none;stroke:rgba(255,255,255,.35);stroke-width:2.5;stroke-linecap:round;transform:translate(-2px,-3px)}
.patch .pc-end{fill:#2a2d31;stroke:var(--o);stroke-width:4}
.patch .pc-plug{fill:#2a2d31;stroke:var(--o);stroke-width:4}.patch .pc-tip{fill:#c9ccd0}

/* WOLLOPER-303: silver in light, gunmetal in dark */
:root{--t-body:#cfd2d5;--t-face:#e3e5e7;--t-panel:#bfc3c7;--t-ink:#1b1d20;--t-sub:#5b6168;--t-key:#f1f1f0;--t-blk:#2a2d31;--t-off:#d7dadd}
:root[data-theme=dark]{--t-body:#24262a;--t-face:#2e3136;--t-panel:#1a1c1f;--t-ink:#eef0f2;--t-sub:#9aa0a7;--t-key:#3a3e44;--t-blk:#141518;--t-off:#2a2d31}
.d303{width:1040px}
.m303{background:linear-gradient(180deg,var(--t-face),var(--t-body));border-radius:16px;padding:24px 26px 22px;color:var(--t-ink);box-shadow:var(--m-shadow),inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px var(--m-line);transition:background .5s,color .5s}
.t-top{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:16px;border-bottom:2px solid var(--m-line)}
#tlogo .seg{height:44px;width:auto;display:block}
#tlogo .seg .on{fill:var(--o)}
.m303:not(.on) #tlogo .seg .on{fill:var(--t-sub);opacity:.55}
.t-sub{margin-top:8px;font:800 11px var(--f);letter-spacing:.32em;text-transform:uppercase}
.t-sub span{color:var(--t-sub);letter-spacing:.2em}
.t-io{display:flex;align-items:center;gap:22px}
.t-power{display:flex;align-items:center;gap:9px;border:0;border-radius:999px;padding:10px 18px 10px 12px;background:var(--t-blk);color:#eef0f2;font:800 11px var(--f);letter-spacing:.2em;text-transform:uppercase;box-shadow:0 4px 0 #000,0 8px 16px rgba(0,0,0,.25);transition:transform .1s,box-shadow .1s}
.t-power:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.t-power .led{width:12px;height:12px;margin:0;border-radius:50%;background:#4a1a08}
.m303.on .t-power .led{background:var(--o);box-shadow:0 0 12px var(--o),0 0 3px #fff inset}
.t-knobs{display:flex;align-items:flex-start;gap:14px;padding:18px 0 8px;flex-wrap:wrap}
.t-knobs .knob{width:76px}
.t-wave{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto;align-self:center;max-width:150px;justify-content:center}
.t-wave button{border:0;background:var(--t-off);color:var(--t-ink);font:700 12px var(--f);padding:8px 13px;border-radius:999px}
.t-wave button.on{background:var(--o);color:#fff}
.t-wave small{width:100%;text-align:center;font:800 9px var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--t-sub)}
.t-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:10px 0 14px}
.t-stat{margin:0;font:600 13.5px var(--f);color:var(--t-sub)}
.t-stat b{color:var(--t-ink)}
.t-acts{display:flex;gap:8px;align-items:center}
.t-grid{background:var(--t-panel);border-radius:10px;padding:10px;display:grid;gap:3px;transition:opacity .4s}
.m303:not(.on) .t-grid{opacity:.45}
.tr{display:grid;grid-template-columns:62px repeat(16,1fr);gap:3px;align-items:center}
.tr span{font:800 10px var(--f);letter-spacing:.08em;color:var(--t-sub);text-transform:uppercase}
.tr.gap{margin-top:8px}
.tc{height:16px;border:0;padding:0;border-radius:3px;background:var(--t-key);transition:background .08s}
.tr.blk .tc{background:var(--t-off)}
.tr.mod .tc{height:18px}
.tc.b1,.tc.b3{filter:brightness(.94)}
.tc:hover{background:rgba(242,106,27,.4)}
.tc.on{background:var(--o)!important;filter:none}
.tc.now{box-shadow:0 0 0 2px #fff,0 0 14px var(--o)}
.tled .tl{height:6px;border-radius:3px;background:var(--t-off);margin:0 4px 4px}
.tled .tl.on{background:var(--o);box-shadow:0 0 10px var(--o)}

/* view controls */
.st-ctrl{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:var(--bg);box-shadow:0 10px 30px rgba(0,0,0,.18),inset 0 0 0 1px var(--m-line)}
.st-ctrl button{border:0;background:transparent;color:var(--m-ink);font:800 13px var(--f);min-width:40px;height:36px;padding:0 12px;border-radius:999px;cursor:pointer}
.st-ctrl button:hover{background:var(--m-well)}
.st-ctrl .st-hint{font:600 12px var(--f);color:var(--m-sub);padding:0 12px 0 8px;white-space:nowrap}
@media (max-width:760px){.st-ctrl .st-hint{display:none}.st-ctrl{bottom:12px}}
@media (hover:none){.st-ctrl .st-hint{display:none}}

/* moving machines */
.studio .dev[data-dev]{cursor:grab}
.studio .dev.moving{cursor:grabbing;z-index:20}
.studio .dev.moving::before{box-shadow:inset 0 0 0 2px var(--o),0 40px 80px rgba(0,0,0,.25)}

/* FILLING-RATTLER sub: same family as the 303, a big pumping cone */
.drat{width:1040px}
.mrat{background:linear-gradient(180deg,var(--t-face),var(--t-body));border-radius:16px;padding:24px 26px 18px;color:var(--t-ink);box-shadow:var(--m-shadow),inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px var(--m-line);transition:background .5s,color .5s}
#rlogo .seg{height:40px;width:auto;display:block}
#rlogo .seg .on{fill:var(--o)}
.mrat:not(.on) #rlogo .seg .on{fill:var(--t-sub);opacity:.55}
.mrat.on .t-power .led{background:var(--o);box-shadow:0 0 12px var(--o),0 0 3px #fff inset}
.r-body{display:grid;grid-template-columns:300px 1fr;gap:26px;padding-top:18px;align-items:start}
.r-cone{width:300px;height:300px;border-radius:24px;background:var(--t-panel);display:grid;place-items:center;box-shadow:inset 0 3px 10px rgba(0,0,0,.25)}
.r-cone svg{width:270px;height:270px;overflow:visible}
.rc-frame{fill:#2a2d31}.rc-bolts circle{fill:#8d939a}
.rc-sur{fill:#151618;stroke:#3a3e44;stroke-width:3}
.rc-cone{fill:url(#none);fill:#1d1f22;stroke:#2c2f33;stroke-width:2}
.rc-ring{fill:none;stroke:rgba(255,255,255,.06);stroke-width:2}
.rc-cap{fill:var(--o)}
.mrat:not(.on) .rc-cap{fill:#3a3e44}
.rc-shine{fill:rgba(255,255,255,.18)}
.rc-move{transform-origin:100px 100px;transform-box:view-box}
.r-cone.pump .rc-move{animation:pump .28s cubic-bezier(.2,.8,.3,1)}
@keyframes pump{0%{transform:scale(calc(1 + .09 * var(--hit,1)))}35%{transform:scale(calc(1 - .03 * var(--hit,1)))}100%{transform:scale(1)}}
.r-knobs{padding-top:0}
.r-knobs .knob{width:66px}
.r-mode{display:flex;gap:6px;margin:6px 0 10px}
.r-mode button{border:0;background:var(--t-off);color:var(--t-ink);font:700 12.5px var(--f);padding:9px 15px;border-radius:999px;cursor:pointer}
.r-mode button.on{background:var(--o);color:#fff}
.r-side .t-stat{margin-bottom:12px;min-height:2.6em}
.r-grid{background:var(--t-panel);border-radius:10px;padding:10px;display:grid;gap:3px;transition:opacity .4s}
.mrat:not(.r-own) .r-grid{opacity:.4}
.r-grid .tr{grid-template-columns:40px repeat(16,1fr)}
.r-foot{margin:14px 0 0;font:600 11px var(--f);letter-spacing:.06em;color:var(--t-sub);text-align:center}
@media (prefers-reduced-motion:reduce){.r-cone.pump .rc-move{animation:none}}

/* TRANSPORT-CAFF: play, tempo, share, export */
.dtrn{width:1320px}
.mtrn{display:flex;align-items:center;gap:28px;background:linear-gradient(180deg,var(--m-face),var(--m-body));border-radius:16px;padding:20px 26px;color:var(--m-ink);box-shadow:var(--m-shadow),inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px var(--m-line);transition:background .5s,color .5s}
#xlogo .seg,#mlogo .seg{height:34px;width:auto;display:block}
#xlogo .seg .on,#mlogo .seg .on{fill:var(--o)}
.trn-main{display:flex;align-items:center;gap:20px}
.trn-main .t-play{width:78px;height:78px}
.trn-acts{margin-left:auto;display:flex;align-items:center;gap:8px;position:relative}
.trn-acts .sharemsg{position:absolute;right:0;bottom:calc(100% + 8px);white-space:nowrap}

/* CAKE-MIXER: channel strips + the FX rack */
.dmix{width:1320px}
.mmix{background:linear-gradient(180deg,var(--m-face),var(--m-body));border-radius:16px;padding:22px 26px 22px;color:var(--m-ink);box-shadow:var(--m-shadow),inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px var(--m-line);transition:background .5s,color .5s}
.x-hint{margin:0;max-width:340px;text-align:right;font:600 12px var(--f);color:var(--m-sub)}
.x-strips{display:flex;gap:12px;padding-top:18px}
.strip{width:118px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px 12px;background:var(--m-well);border-radius:12px;transition:opacity .25s}
.strip.quiet{opacity:.45}
.s-name{font:800 12px var(--f);letter-spacing:.16em;color:var(--o)}
.strip .knob{width:60px}
.fader{position:relative;width:64px;height:210px;cursor:ns-resize;touch-action:none;outline:0;--v:.8}
.f-track{position:absolute;left:50%;top:12px;bottom:28px;width:6px;margin-left:-3px;border-radius:3px;background:var(--m-lcd);box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.f-cap{position:absolute;left:50%;width:44px;height:22px;margin-left:-22px;top:calc(12px + (1 - var(--v)) * (100% - 40px) - 11px);border-radius:5px;background:linear-gradient(180deg,#4a4e55,#2a2d31 45%,#1b1d20);box-shadow:0 4px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.2)}
.f-cap::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;margin-top:-1px;background:var(--o);border-radius:1px}
.fader:focus-visible .f-cap{outline:2px solid var(--o);outline-offset:2px}
.f-meter{position:absolute;right:2px;top:12px;bottom:28px;width:6px;border-radius:3px;background:var(--m-keyoff);overflow:hidden}
.f-meter i{position:absolute;inset:0;transform-origin:bottom;transform:scaleY(0);background:linear-gradient(0deg,var(--o) 0 70%,#ffb27a 70% 92%,#fff 92%)}
.f-meter i.hot{box-shadow:0 0 8px var(--o)}
.f-val{position:absolute;left:0;right:0;bottom:4px;text-align:center;font:700 10px var(--f);color:var(--m-sub)}
.s-btns{display:flex;gap:6px}
.s-btns button{width:34px;height:28px;border:0;border-radius:7px;background:var(--m-key);color:var(--m-ink);font:800 12px var(--f);cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.s-mute.on{background:#1b1d20;color:#fff}
.s-solo.on{background:var(--o);color:#fff}
.mmix{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px}
.mmix .t-top{grid-column:1/-1}
.mmix .m-fx{min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;margin-top:18px;border-top:0;padding-top:0}
.mmix .fxg{justify-content:center;align-items:center;padding-top:30px}
.mmix .fxg.out{margin-left:0}

/* control bar scrolls sideways on narrow screens */
.st-ctrl{max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none}
.st-ctrl::-webkit-scrollbar{display:none}
.st-ctrl button{flex:0 0 auto}
.mmix .fxg .knob{width:72px}.mmix .fxg{gap:8px;min-width:0;padding-left:10px;padding-right:10px}

/* cables run behind the machines; the jack shows a plug sitting in it */
.studio .dev{z-index:1}
.patch{z-index:0}
.patch.live{z-index:30}
.pjack .pj{position:relative}
.pjack.plugged .pj::after{content:"";position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffb27a,var(--o) 45%,#b84d10);box-shadow:0 3px 6px rgba(0,0,0,.4),0 0 0 3px #2a2d31}
.pjack.plugged .pj::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#2a2d31;z-index:1}

/* audio leads: dark rubber with an orange tip ring; sync stays orange */
.patch .audio .pc{stroke:#2a2d31;stroke-width:9}
.patch .audio .pc-hl{stroke:rgba(255,255,255,.18)}
.patch .audio .pc-end{fill:#2a2d31;stroke:#8d939a}
:root[data-theme=dark] .patch .audio .pc{stroke:#5b6168}
.pjack.aj .pj{background:radial-gradient(circle,#050505 0 30%,#3a3e44 32% 46%,#8d939a 50% 60%,#2a2d31 64%)}
.pjack.aj.plugged .pj::after{background:radial-gradient(circle at 40% 35%,#6b7076,#2a2d31 55%,#141518);box-shadow:0 3px 6px rgba(0,0,0,.4),0 0 0 3px var(--o)}
.pjack.aj.plugged small{color:var(--m-ink)}
/* CAKE-MIXER inputs + main out */
.mmix .t-top{gap:20px}
.x-io{display:flex;align-items:center;gap:18px;padding:10px 16px;background:var(--m-well);border-radius:12px}
.x-sep{width:2px;align-self:stretch;background:var(--m-line);border-radius:1px}
.mmix .x-hint{grid-column:1/-1;max-width:none;text-align:left;margin:10px 0 0}
.strip.unplugged{opacity:.4}
.strip.unplugged .s-name::after{content:" · no lead";font-size:9px;letter-spacing:.1em;color:var(--m-sub)}
.mtrn.nolead .t-play{background:#8d939a;box-shadow:0 6px 0 #5b6168,0 10px 20px rgba(0,0,0,.25)}

/* ===== BARE (phones + tablets): no studio, just the 808 with the transport on top, like the first prototype ===== */
body.bare .studio{position:static;overflow:visible;touch-action:auto;cursor:auto;user-select:auto;-webkit-user-select:auto;padding:110px var(--pad) 60px}
body.bare .studio .world{position:static;transform:none!important;width:auto!important;height:auto!important;max-width:var(--max);margin:0 auto}
body.bare .studio .dw-intro{position:static;width:auto;margin:0 0 26px}
body.bare .studio .dev{position:static;width:auto}
body.bare .studio .dev::before{display:none}
body.bare .d303,body.bare .drat,body.bare .dmix,body.bare .dbrk,body.bare .st-ctrl,body.bare #patch,body.bare [data-patch]{display:none!important}
body.bare .d808{overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch}
body.bare .d808 .m808{min-width:1060px}
body.bare .studio .dev[data-dev]{cursor:auto}
body.bare .dpyr{margin-top:10px;overflow:hidden}
body.bare .dpyr .egypt{max-width:100%}
/* transport sits inside the 808's top bar */
body.bare .m808 .mtrn{background:none;box-shadow:none;border-radius:0;padding:0 0 16px;margin-bottom:16px;border-bottom:2px solid var(--m-line);flex-wrap:wrap;gap:20px}
body.bare .m808 .trn-brand{display:none}
body.bare .m808 .trn-acts{margin-left:auto}
body.bare .jack{display:none}

/* BREAKING & ENTERING: turntable + record crate + chop grid */
.dbrk{width:1320px}
.mbrk{background:linear-gradient(180deg,var(--t-face),var(--t-body));border-radius:16px;padding:24px 26px 18px;color:var(--t-ink);box-shadow:var(--m-shadow),inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px var(--m-line);transition:background .5s,color .5s}
#blogo .seg{height:38px;width:auto;display:block}
#blogo .seg .on{fill:var(--o)}
.mbrk:not(.on) #blogo .seg .on{fill:var(--t-sub);opacity:.55}
.mbrk.on .t-power .led{background:var(--o);box-shadow:0 0 12px var(--o),0 0 3px #fff inset}
.b-body{display:grid;grid-template-columns:260px 1fr 400px;gap:22px;padding-top:18px;align-items:start}
.b-deck{position:relative;width:260px;height:260px;border-radius:20px;background:var(--t-panel);display:grid;place-items:center;box-shadow:inset 0 3px 10px rgba(0,0,0,.25)}
.b-vinyl{width:228px;height:228px}
.bv-disc{fill:#141518}
.bv-grooves circle{fill:none;stroke:rgba(255,255,255,.05);stroke-width:1}
.bv-label{fill:var(--o)}
.mbrk:not(.on) .bv-label{fill:#5b6168}
.bv-t1{font:800 7.5px var(--f);fill:#fff;text-anchor:middle;letter-spacing:.06em;text-transform:uppercase}
.bv-t2{font:700 7px var(--f);fill:rgba(255,255,255,.75);text-anchor:middle;letter-spacing:.1em}
.bv-hole{fill:#d9dcdf}
.b-vinyl{transform-origin:50% 50%}
.mbrk.spinning .b-vinyl{animation:spin33 1.8s linear infinite}
@keyframes spin33{to{transform:rotate(360deg)}}
.b-arm{position:absolute;right:22px;top:20px;width:8px;height:150px;border-radius:4px;background:linear-gradient(90deg,#8d939a,#d4d7da,#8d939a);transform-origin:50% 6px;transform:rotate(18deg);transition:transform .6s cubic-bezier(.3,1.4,.5,1);box-shadow:0 4px 8px rgba(0,0,0,.3)}
.b-arm::before{content:"";position:absolute;left:-8px;top:-8px;width:24px;height:24px;border-radius:50%;background:#2a2d31;box-shadow:inset 0 0 0 3px #8d939a}
.b-arm::after{content:"";position:absolute;left:-4px;bottom:-6px;width:16px;height:22px;border-radius:3px;background:#2a2d31}
.mbrk.spinning .b-arm{transform:rotate(32deg)}
.b-crate{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:300px;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.b-rec{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:0;border-radius:10px;padding:9px 12px;background:var(--t-off);color:var(--t-ink);cursor:pointer;border-left:4px solid transparent}
.b-rec b{font:800 13px var(--f)}
.b-rec small{font:600 10.5px var(--f);color:var(--t-sub)}
.b-rec:hover{background:var(--t-key)}
.b-rec.on{border-left-color:var(--o);background:var(--t-key);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.b-knobs{padding-top:0}
.b-knobs .knob{width:66px}
.b-kit{display:flex;gap:6px;margin:4px 0 10px;flex-wrap:wrap}
.b-kit button{border:0;background:var(--t-off);color:var(--t-ink);font:700 12px var(--f);padding:8px 13px;border-radius:999px;cursor:pointer}
.b-kit button.on{background:var(--o);color:#fff}
.b-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.b-side .t-stat{margin-top:10px;min-height:2.6em}
.b-side .t-stat span{color:var(--t-sub);font-weight:500}
.b-grid{margin-top:16px;background:var(--t-panel);border-radius:10px;padding:10px;display:grid;gap:5px}
.b-bar{display:grid;grid-template-columns:50px repeat(16,1fr);gap:4px;align-items:center}
.b-bar span{font:800 10px var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--t-sub)}
.bc{position:relative;height:46px;border:0;border-radius:6px;background:var(--t-key);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:4px 0 6px;color:var(--t-sub)}
.bc.q1,.bc.q3{filter:brightness(.95)}
.bc em{font:800 10px var(--f);font-style:normal}
.bc.moved em{color:var(--o)}
.bc.moved{box-shadow:inset 0 0 0 2px rgba(242,106,27,.5)}
.bc i{display:block;width:calc(30% + var(--v) * 50%);height:4px;border-radius:2px;opacity:calc(.15 + var(--v) * .85)}
.bc .bd-k{background:var(--t-ink)}.bc .bd-s{background:var(--o)}.bc .bd-h{background:var(--t-sub)}
.bc.now{box-shadow:0 0 0 2px #fff,0 0 14px var(--o)}
.mbrk .r-foot a{color:inherit}