/* jif Live skins (studio-looks.js). Each skin re-builds the hardware: toolbar keys, screens for tempo/position,
   screwed rack modules, LEDs, knob caps with tick rings, its own type. Session (the original) gets none of it.
   Materials are Higgsfield renders in /assets/looks, set as --lk-* urls by JFLooks.apply(). */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600&family=Manrope:wght@500;600;700;800&family=Azeret+Mono:wght@400;500&family=Archivo+Black&family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700&family=Barlow+Semi+Condensed:wght@500;700&family=Michroma&family=Share+Tech+Mono&family=VT323&display=swap');

/* ---------- shared hardware parts (any skin = data-hw) ---------- */
.sd-kn .dl{position:relative}
.sd-kn .dl .cap{display:none}
.ap-sd[data-hw] .sd-kn{width:64px}
.ap-sd[data-hw] .sd-kn .dl{width:46px;height:46px}
.ap-sd[data-hw] .sd-kn.sm .dl{width:34px;height:34px}
.ap-sd[data-hw] .sd-kn .dl .cap{display:block;position:absolute;left:17%;top:17%;width:66%;height:66%;border-radius:50%;
  background:var(--lk-knob) center/cover;box-shadow:0 2px 3px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.25);pointer-events:none;z-index:1}
.ap-sd[data-hw] .sd-kn .dl svg line{display:none}
.ap-sd[data-hw] .sd-kn .dl svg path:first-child{stroke:transparent}            /* the grey track gives way to the tick ring */
.ap-sd[data-hw] .sd-kn .dl::before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from -135deg,var(--lk-tick,#2a2a2a) 0 2.2deg,transparent 2.2deg 27deg);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64%,#000 71%,transparent 72%);mask:radial-gradient(circle,transparent 63%,#000 64%,#000 71%,transparent 72%)}
.ap-sd[data-hw] .sd-kn .kl{text-transform:uppercase;font-size:9.5px;letter-spacing:.08em;font-weight:700}
.ap-sd[data-hw] .sd-cx{position:relative}
.ap-sd[data-hw] .sd-cx.on::after,.ap-sd[data-hw] .sd-pn .pw.on::after{content:'';position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--lk-led,#ff5a1f);box-shadow:0 0 6px var(--lk-led,#ff5a1f)}
.ap-sd[data-hw] .sd-pn{border-radius:12px;background:var(--lk-mod,var(--lv-l2)) var(--lk-panel) center/cover;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 8px rgba(0,0,0,.14)}
.ap-sd[data-hw] .sd-pn::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:var(--lk-screw) 5px calc(100% - 5px)/9px no-repeat,var(--lk-screw) calc(100% - 5px) calc(100% - 5px)/9px no-repeat}
.ap-sd[data-hw] .sd-pn{position:relative}
.ap-sd[data-hw] .sd-pn .pt{background:transparent;color:var(--lk-modtx,var(--lv-l6));height:26px;font-family:var(--lk-font);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding-left:18px;background:var(--lk-screw) 5px 50%/9px no-repeat}
.ap-sd[data-hw] .sd-pn .pw{position:relative;margin-left:auto;order:5;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#bbb 60%,#888)!important;border:1px solid rgba(0,0,0,.35)!important}
.ap-sd[data-hw] .sd-pn .pw.on{background:radial-gradient(circle at 35% 30%,#fff,var(--lk-led,#ff5a1f) 55%)!important;box-shadow:0 0 8px var(--lk-led,#ff5a1f)}
.ap-sd[data-hw] .sd-pn .pw.on::after{display:none}
.ap-sd[data-hw] .sd-pn .pb{color:var(--lk-modtx,var(--lv-l6))}
.ap-sd[data-hw] .sd-cb{background:var(--lk-plate,var(--lv-l2)) var(--lk-cbmat,var(--lk-panel)) center/cover;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.12);padding-left:22px;padding-right:22px}
.ap-sd[data-hw] .sd-cb::before,.ap-sd[data-hw] .sd-cb::after{content:'';position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;background:var(--lk-screw) center/contain no-repeat}
.ap-sd[data-hw] .sd-cb::before{left:6px}.ap-sd[data-hw] .sd-cb::after{right:6px}
.ap-sd[data-hw] .sd-pos,.ap-sd[data-hw] .sd-num{font-family:var(--lk-screenfont,'Share Tech Mono',monospace);font-size:15px!important;letter-spacing:.06em}
.ap-sd[data-hw]{font-family:var(--lk-font,inherit)}

/* the Skin button: always findable */
.sd-cx.sd-skin{gap:6px}
.sd-cx.sd-skin i{width:14px;height:14px;border-radius:50%;background:conic-gradient(#ff5a36,#ffc21a,#2fd39a,#3ec5ff,#a78bff,#ff5fa2,#ff5a36);box-shadow:0 0 0 1px rgba(0,0,0,.25)}

/* ---------- Studio White (white hardware, black OLED, black knurled knobs, silver footswitches) ---------- */
.ap-sd[data-look=studio]{--lk-font:'Archivo',system-ui,sans-serif;--lk-tick:#1a1a1a;--lk-led:#ff4b12;background:#d9d9d6}
.ap-sd[data-look=studio] .sd-cx{background:linear-gradient(#ffffff,#ececea)!important;border:1px solid #cfcfcb!important;border-radius:9px;box-shadow:0 1px 2px rgba(0,0,0,.22),inset 0 1px 0 #fff;color:#1a1a1a!important;text-transform:lowercase}
.ap-sd[data-look=studio] .sd-cx.on{background:linear-gradient(#f4f4f2,#e2e2df)!important}
.ap-sd[data-look=studio] .sd-cx.tpb{width:36px;height:36px;border-radius:50%;padding:0;background:var(--lk-foot) center/cover!important;border:none!important;color:#222!important}
.ap-sd[data-look=studio] .sd-cx.tpb.rc{color:#d01e12!important}
.ap-sd[data-look=studio] .sd-cx.tpb.pl.on{box-shadow:0 0 0 3px rgba(255,75,18,.45)}
.ap-sd[data-look=studio] .sd-pos,.ap-sd[data-look=studio] .sd-num{background:#060606 var(--lk-screen) center/100% 100%!important;color:#f2f2f2!important;border:1px solid #000!important;border-radius:8px;text-shadow:0 0 6px rgba(255,255,255,.55);min-width:96px}
.ap-sd[data-look=studio] .sd-pn .pt{background:#0a0a0a;color:#f2f2f2;border-radius:12px 12px 0 0;text-transform:lowercase;letter-spacing:.04em;font-weight:500;font-size:12px;padding-left:10px}
.ap-sd[data-look=studio] .sd-th{background:linear-gradient(#ffffff,#f1f1ef)}

/* ---------- Vintage Silver (tape echo: brushed aluminium, piano-key switches, VU cream, red, leatherette) ---------- */
.ap-sd[data-look=vintage]{--lk-font:'Archivo',system-ui,sans-serif;--lk-tick:#c0261c;--lk-led:#ff3b1f;background:#1c1c1c var(--lk-frame) center/cover}
.ap-sd[data-look=vintage] .sd-cx{border:none!important;background:var(--lk-key) center/100% 100% no-repeat!important;padding:0 10px;min-height:34px;color:#1d1d1d!important;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border-radius:0;box-shadow:none}
.ap-sd[data-look=vintage] .sd-cx.on{filter:brightness(.9);transform:translateY(1px)}
.ap-sd[data-look=vintage] .sd-pos,.ap-sd[data-look=vintage] .sd-num{border:2px solid #2b2b2b!important;background:#f3ead6 var(--lk-vu) center/cover!important;color:#1d1d1d!important;font-family:'Space Mono',monospace;border-radius:3px;min-width:96px}
.ap-sd[data-look=vintage] .sd-pn{border:2px solid #2a2a2a;border-radius:4px}
.ap-sd[data-look=vintage] .sd-pn .pt{border-bottom:2px solid #2a2a2a;letter-spacing:.32em}
.ap-sd[data-look=vintage] .sd-main,.ap-sd[data-look=vintage] .sd-det{background:transparent}
.ap-sd[data-look=vintage] .sd-view,.ap-sd[data-look=vintage] .sd-br{border:2px solid #2a2a2a;border-radius:4px}

/* ---------- Sticker (worn cream plastic, chunky arcade keys, lime CRT screens, stickers) ---------- */
.ap-sd[data-look=sticker]{--lk-font:'Archivo',system-ui,sans-serif;--lk-tick:#1c1a14;--lk-led:#a8e61d;background:#e9dfc6}
.ap-sd[data-look=sticker] .sd-cx{border:none!important;background:var(--lk-key) center/100% 100% no-repeat!important;padding:0 12px;min-height:36px;color:#1c1a14!important;font-weight:800;text-transform:uppercase;border-radius:0}
.ap-sd[data-look=sticker] .sd-cx.on{background:var(--lk-keyon) center/100% 100% no-repeat!important}
.ap-sd[data-look=sticker] .sd-cx.on::after{display:none}
.ap-sd[data-look=sticker] .sd-pos,.ap-sd[data-look=sticker] .sd-num{border:none!important;background:var(--lk-screen) center/100% 100% no-repeat!important;padding:0 16px;min-height:40px;color:#0f1a02!important;font-family:'VT323',monospace;font-size:22px!important;min-width:104px;text-shadow:0 0 4px rgba(200,255,90,.7)}
.ap-sd[data-look=sticker] .sd-pn{border:3px solid #1c1a14;border-radius:16px}
.ap-sd[data-look=sticker] .sd-det{background:#e9dfc6 var(--lk-det) right center/auto 100% no-repeat}

/* ---------- Red Line (white lab gear, red LED digits, red rule) ---------- */
.ap-sd[data-look=redline]{--lk-font:'Archivo',system-ui,sans-serif;--lk-tick:#e1251b;--lk-led:#e1251b;background:#e6e6e6}
.ap-sd[data-look=redline] .sd-cb{border-top:4px solid #e1251b}
.ap-sd[data-look=redline] .sd-cx{background:#fff!important;border:1px solid #c9c9c9!important;border-radius:4px;color:#1a1a1a!important;font-weight:700;text-transform:uppercase;font-size:11px}
.ap-sd[data-look=redline] .sd-cx.on{background:#e1251b!important;color:#fff!important;border-color:#b51a12!important}
.ap-sd[data-look=redline] .sd-pos,.ap-sd[data-look=redline] .sd-num{background:#140303!important;color:#ff3b30!important;border:1px solid #000!important;text-shadow:0 0 6px rgba(255,59,48,.8);border-radius:3px;min-width:96px}
.ap-sd[data-look=redline] .sd-pn .pt{background:#e1251b;color:#fff;border-radius:12px 12px 0 0;padding-left:10px}

/* ---------- Clear (frosted acrylic over circuit board, chrome toggles, mono lowercase) ---------- */
.ap-sd[data-look=clear]{--lk-font:'Space Mono',monospace;--lk-tick:#2c2c2c;--lk-led:#ff3b30;background:#cdd6cb var(--lk-panel) center/cover}
.ap-sd[data-look=clear] .sd-cb,.ap-sd[data-look=clear] .sd-pn{background-color:rgba(240,245,240,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ap-sd[data-look=clear] .sd-cx{background:rgba(25,25,25,.85)!important;border:1px solid #000!important;color:#f1f1f1!important;border-radius:6px;text-transform:lowercase}
.ap-sd[data-look=clear] .sd-cx.on{background:#ff3b30!important}
.ap-sd[data-look=clear] .sd-pos,.ap-sd[data-look=clear] .sd-num{background:rgba(10,30,15,.85)!important;color:#7dff9a!important;border:1px solid #000!important;text-shadow:0 0 5px rgba(125,255,154,.7)}
.ap-sd[data-look=clear] .sd-pn .pt{text-transform:lowercase;letter-spacing:.02em;font-weight:700}
.ap-sd[data-look=clear] .sd-main,.ap-sd[data-look=clear] .sd-det,.ap-sd[data-look=clear] .sd-view{background-color:rgba(240,245,240,.35)}

/* ---------- Candy (modules: white / yellow / navy plates, black knobs, S M B keys) — default ---------- */
.ap-sd[data-look=candy]{--lk-font:'Space Mono',monospace;--lk-tick:#1e1e28;--lk-led:#ff5a36;background:#f2f2f0}
.ap-sd[data-look=candy] .sd-cb{background:#fff;border:2px solid #1e1e28;border-radius:14px;margin:6px}
.ap-sd[data-look=candy] .sd-cx{background:linear-gradient(#ffffff,#eeeeec)!important;border:2px solid #1e1e28!important;border-radius:8px;color:#1e1e28!important;font-weight:700;box-shadow:0 2px 0 #1e1e28}
.ap-sd[data-look=candy] .sd-cx.on{background:#1e1e28!important;color:#ffc21a!important;box-shadow:none;transform:translateY(2px)}
.ap-sd[data-look=candy] .sd-cx.on::after{display:none}
.ap-sd[data-look=candy] .sd-pos,.ap-sd[data-look=candy] .sd-num{background:#1e1e28!important;color:#ffc21a!important;border:2px solid #1e1e28!important;border-radius:8px;box-shadow:none}
.ap-sd[data-look=candy] .sd-pn{border:2px solid #1e1e28;background:var(--lk-mod,#fff)}
.ap-sd[data-look=candy] .sd-th{border-left:2px solid #1e1e28}

/* ---------- Gallery (white + ink strips, paint splash, white knobs, green LEDs) ---------- */
.ap-sd[data-look=gallery]{--lk-font:'Archivo',system-ui,sans-serif;--lk-tick:#1f2430;--lk-led:#2fd34e;background:#efefed}
.ap-sd[data-look=gallery] .sd-cx{background:linear-gradient(#fff,#ececea)!important;border:1px solid #bdbdb8!important;border-radius:5px;color:#1f2430!important;font-weight:800;text-transform:uppercase;font-size:11px;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.ap-sd[data-look=gallery] .sd-pos,.ap-sd[data-look=gallery] .sd-num{background:#1f2430!important;color:#f4f4f2!important;border:none!important;border-radius:6px}
.ap-sd[data-look=gallery] .sd-pn{border:2px solid #1f2430}
.ap-sd[data-look=gallery] .sd-det{background:#efefed var(--lk-head) left bottom/cover no-repeat}

/* ---------- Skin picker ---------- */
.lk-pick{display:flex;flex-direction:column;gap:14px}
.lk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ap-sd.mac .lk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.lk-card{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:14px;border:2px solid rgba(0,0,0,.08);background:#fff;color:#16141f;text-align:left;font:inherit;cursor:pointer;min-height:44px}
.lk-card.on{border-color:#ff5a36;box-shadow:0 0 0 3px rgba(255,90,54,.3)}
.lk-card b{font-size:14px}
.lk-card small{font-size:11.5px;line-height:1.35;color:#55525f}
.lk-prev{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;background-size:cover;background-position:center;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.lk-prev img{position:absolute;width:30%;max-width:56px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.lk-prev img.k{left:8%;top:14%}.lk-prev img.b{left:44%;top:22%;width:26%}
.lk-sw{position:absolute;right:6px;bottom:6px;display:flex;gap:3px}
.lk-sw i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.18);display:block}
.lk-custom{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px;border-radius:12px;background:rgba(0,0,0,.04)}
.lk-ct{width:100%;font-weight:700;font-size:13px}
.lk-col{display:flex;align-items:center;gap:8px;font-size:13px}
.lk-col input{width:44px;height:32px;border:none;padding:0;background:none;cursor:pointer}

/* ---------- the big middle: browser + tracks become recessed windows mounted on the skin's material ---------- */
.ap-sd[data-hw] .sd-main{padding:8px;gap:8px;background:var(--lk-mainbg,var(--lv-l3)) var(--lk-mainmat,none) center/cover}
.ap-sd[data-hw] .sd-br,.ap-sd[data-hw] .sd-view{border-radius:12px;overflow:hidden;box-shadow:inset 0 1px 4px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.55)}
.ap-sd[data-hw] .sd-det{border-top:none}
.ap-sd[data-look=studio]{--lk-mainbg:#cfcfcb;--lk-mainmat:var(--lk-panel)}
.ap-sd[data-look=studio] .sd-br,.ap-sd[data-look=studio] .sd-view{border:6px solid #f7f7f5;box-shadow:0 0 0 1px #bdbdb8,0 2px 6px rgba(0,0,0,.18)}
.ap-sd[data-look=vintage]{--lk-mainbg:#1c1c1c;--lk-mainmat:var(--lk-frame)}
.ap-sd[data-look=vintage] .sd-br,.ap-sd[data-look=vintage] .sd-view{border:3px solid #c9c9c5;box-shadow:0 0 0 2px #2a2a2a,0 3px 8px rgba(0,0,0,.5)}
.ap-sd[data-look=sticker]{--lk-mainbg:#e9dfc6}
.ap-sd[data-look=sticker] .sd-main{background:#e9dfc6 var(--lk-det) center/100% 100% no-repeat;padding:14px 46px}
.ap-sd[data-look=sticker] .sd-br,.ap-sd[data-look=sticker] .sd-view{border:4px solid #1c1a14;border-radius:18px}
.ap-sd[data-look=redline]{--lk-mainbg:#e6e6e6}
.ap-sd[data-look=redline] .sd-view{border-top:3px solid #e1251b}
.ap-sd[data-look=clear] .sd-main{background:transparent}
.ap-sd[data-look=clear] .sd-br,.ap-sd[data-look=clear] .sd-view{border:1px solid rgba(255,255,255,.7);background-color:rgba(245,248,245,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ap-sd[data-look=candy]{--lk-mainbg:#ececea}
.ap-sd[data-look=candy] .sd-br,.ap-sd[data-look=candy] .sd-view{border:2px solid #1e1e28;border-radius:14px;box-shadow:0 3px 0 #1e1e28}
.ap-sd[data-look=gallery]{--lk-mainbg:#1f2430}
.ap-sd[data-look=gallery] .sd-br,.ap-sd[data-look=gallery] .sd-view{border:2px solid #f4f4f2}
/* phones: keep the frame thin so the song gets the room */
.ap-sd:not(.mac)[data-hw] .sd-main{padding:4px;gap:4px}
.ap-sd:not(.mac)[data-look=sticker] .sd-main{padding:6px 14px}

/* ================= v3: authentic type, track labels, clip strips, drum pads, every bottom-panel control ================= */
/* each skin: --lk-ui (body labels), --lk-font (titles), screens keep their LCD fonts; --hw-* = its buttons */
.ap-sd[data-hw]{font-family:var(--lk-ui,'Barlow',sans-serif)!important}
.ap-sd[data-hw] .sd-pn .pt{font-family:var(--lk-font,var(--lk-ui))}
.ap-sd[data-hw] :is(.sd-tg,.sd-seg button,.sd-tabs button,.sd-dclr,.sd-dtr,.sd-btns button,.sd-res,.sd-sname,select.sd-csel,.sd-cin,.sd-in,.sd-bs){
  font-family:var(--lk-ui)!important;background:var(--hw-bg)!important;border:1px solid var(--hw-bd)!important;color:var(--hw-tx)!important;
  border-radius:var(--hw-r)!important;box-shadow:var(--hw-sh,none)}
.ap-sd[data-hw] .sd-seg{background:transparent!important;border:none!important;gap:3px}
.ap-sd[data-hw] :is(.sd-tg.on,.sd-seg button.on,.sd-tabs button.on){background:var(--hw-on)!important;color:var(--hw-ontx)!important;border-color:var(--hw-on)!important}
.ap-sd[data-hw] .sd-th .nm{background:var(--th-bg,var(--c))!important;color:var(--th-tx,#111)!important;border:var(--th-bd,none);border-radius:var(--hw-r);font-family:var(--lk-font,var(--lk-ui));letter-spacing:.04em;height:24px}
.ap-sd[data-hw] .sd-th .nm::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;margin-right:7px;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.ap-sd[data-hw] .sd-th{background:var(--th-plate,var(--lv-l2))}
.ap-sd[data-hw] .sd-step{border-radius:var(--pad-r,3px)!important;background:var(--pad-bg)!important;box-shadow:var(--pad-sh,inset 0 0 0 1px rgba(0,0,0,.12))}
.ap-sd[data-hw] .sd-step.b{background:var(--pad-bg2,var(--pad-bg))!important}
.ap-sd[data-hw] .sd-step.on{background:var(--pad-on)!important;box-shadow:var(--pad-onsh,0 0 6px var(--pad-on))}
.ap-sd[data-hw] .sd-step.on.soft{opacity:.6}
.ap-sd[data-hw] .sd-dh b{font-family:var(--lk-font,var(--lk-ui));letter-spacing:.06em}

/* Studio White: Barlow lowercase, white keys, black screen labels, orange-lit pads */
.ap-sd[data-look=studio]{--lk-ui:'Barlow',sans-serif;--lk-font:'Barlow',sans-serif;--hw-bg:linear-gradient(#ffffff,#efefec);--hw-bd:#d0d0cb;--hw-tx:#1a1a1a;--hw-r:8px;--hw-sh:0 1px 2px rgba(0,0,0,.18),inset 0 1px 0 #fff;--hw-on:#141416;--hw-ontx:#ffffff;
  --th-bg:#0b0b0c;--th-tx:#f2f2f0;--th-plate:#f7f7f5;--pad-bg:linear-gradient(#ffffff,#ececea);--pad-bg2:linear-gradient(#f5f5f3,#e4e4e1);--pad-r:5px;--pad-sh:0 1px 1px rgba(0,0,0,.2),inset 0 0 0 1px #d6d6d1;--pad-on:#ff5a1f;--pad-onsh:0 0 8px rgba(255,90,31,.8),inset 0 1px 0 rgba(255,255,255,.5)}
.ap-sd[data-look=studio] .sd-cx,.ap-sd[data-look=studio] .sd-pn .pt,.ap-sd[data-look=studio] .sd-th .nm{text-transform:lowercase}
/* Tape Echo: Michroma titles, condensed caps, piano-key controls, cream VU tape labels, red */
.ap-sd[data-look=vintage]{--lk-ui:'Barlow Condensed',sans-serif;--lk-font:'Michroma',sans-serif;--hw-bg:var(--lk-key) center/100% 100% no-repeat;--hw-bd:transparent;--hw-tx:#1d1d1d;--hw-r:2px;--hw-on:#b8261c;--hw-ontx:#ffffff;
  --th-bg:#f3ead6;--th-tx:#1d1d1d;--th-bd:2px solid #2a2a2a;--th-plate:#d9d9d5 var(--lk-panel) center/cover;--pad-bg:linear-gradient(#fbfbf8,#e3e3de);--pad-bg2:linear-gradient(#efefeb,#d8d8d3);--pad-r:2px;--pad-sh:inset 0 -3px 0 rgba(0,0,0,.18),0 0 0 1px #9a9a95;--pad-on:#c0261c;--pad-onsh:inset 0 2px 3px rgba(0,0,0,.35)}
.ap-sd[data-look=vintage] :is(.sd-tg,.sd-tabs button,.sd-btns button,.sd-cx){text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.ap-sd[data-look=vintage] .sd-pn .pt{font-size:9.5px}
/* Sticker Bomb: Archivo Black, chunky cream keys, lime when lit */
.ap-sd[data-look=sticker]{--lk-ui:'Barlow',sans-serif;--lk-font:'Archivo Black',sans-serif;--hw-bg:var(--lk-key) center/100% 100% no-repeat;--hw-bd:transparent;--hw-tx:#1c1a14;--hw-r:6px;--hw-on:#a8e61d;--hw-ontx:#1c1a14;
  --th-bg:#f6efdc;--th-tx:#1c1a14;--th-bd:2.5px solid #1c1a14;--th-plate:#e9dfc6;--pad-bg:#f6efdc;--pad-bg2:#ebe0c5;--pad-r:6px;--pad-sh:inset 0 -3px 0 rgba(0,0,0,.2),0 0 0 1.5px #1c1a14;--pad-on:#a8e61d;--pad-onsh:0 0 10px rgba(168,230,29,.9),0 0 0 1.5px #1c1a14}
.ap-sd[data-look=sticker] :is(.sd-tg,.sd-tabs button,.sd-btns button,.sd-cx){font-weight:800;text-transform:uppercase}
/* Red Line: condensed caps, white keys, red */
.ap-sd[data-look=redline]{--lk-ui:'Barlow Condensed',sans-serif;--lk-font:'Barlow Condensed',sans-serif;--hw-bg:#ffffff;--hw-bd:#c9c9c9;--hw-tx:#111;--hw-r:3px;--hw-on:#e1251b;--hw-ontx:#fff;
  --th-bg:#ffffff;--th-tx:#111;--th-bd:1px solid #c9c9c9;--th-plate:#f4f4f4;--pad-bg:#ffffff;--pad-bg2:#f1f1f1;--pad-r:2px;--pad-sh:inset 0 0 0 1px #cfcfcf;--pad-on:#e1251b;--pad-onsh:inset 0 0 0 1px #9e140d}
.ap-sd[data-look=redline] :is(.sd-tg,.sd-tabs button,.sd-btns button,.sd-cx,.sd-pn .pt){text-transform:uppercase;letter-spacing:.06em;font-weight:600}
/* Clear Circuit: the board shows through; black rubber keys with red LEDs; OCR-style mono lowercase */
.ap-sd[data-look=clear]{--lk-ui:'Share Tech Mono',monospace;--lk-font:'Share Tech Mono',monospace;--hw-bg:rgba(22,22,22,.88);--hw-bd:#000;--hw-tx:#f1f1f1;--hw-r:6px;--hw-on:#ff3b30;--hw-ontx:#fff;
  --th-bg:rgba(255,255,255,.7);--th-tx:#111;--th-bd:1px solid rgba(0,0,0,.35);--th-plate:rgba(255,255,255,.35);--pad-bg:rgba(20,20,20,.82);--pad-bg2:rgba(40,40,40,.82);--pad-r:4px;--pad-sh:inset 0 1px 0 rgba(255,255,255,.12);--pad-on:#ff3b30;--pad-onsh:0 0 8px #ff3b30;
  background:#e9ecea var(--lk-pcb) center/cover!important}
.ap-sd[data-look=clear] :is(.sd-tg,.sd-tabs button,.sd-btns button,.sd-cx,.sd-pn .pt,.sd-th .nm){text-transform:lowercase}
.ap-sd[data-look=clear] .sd-main,.ap-sd[data-look=clear] .sd-det{background:transparent!important}
.ap-sd[data-look=clear] .sd-cb{background:rgba(255,255,255,.28)!important;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
.ap-sd[data-look=clear] .sd-br,.ap-sd[data-look=clear] .sd-view,.ap-sd[data-look=clear] .sd-pn{background:rgba(255,255,255,.42)!important;-webkit-backdrop-filter:blur(1.5px) saturate(1.1);backdrop-filter:blur(1.5px) saturate(1.1);border:1px solid rgba(255,255,255,.85)}
/* Candy Modules: condensed bold caps, outlined keys, yellow lit */
.ap-sd[data-look=candy]{--lk-ui:'Barlow Semi Condensed',sans-serif;--lk-font:'Barlow Semi Condensed',sans-serif;--hw-bg:linear-gradient(#ffffff,#efefed);--hw-bd:#1e1e28;--hw-tx:#1e1e28;--hw-r:7px;--hw-sh:0 2px 0 #1e1e28;--hw-on:#1e1e28;--hw-ontx:#ffc21a;
  --th-bg:var(--c);--th-tx:#1e1e28;--th-bd:2px solid #1e1e28;--th-plate:#ffffff;--pad-bg:#ffffff;--pad-bg2:#f2f2ef;--pad-r:5px;--pad-sh:inset 0 0 0 1.5px #1e1e28;--pad-on:#ffc21a;--pad-onsh:inset 0 0 0 1.5px #1e1e28,0 2px 0 #1e1e28}
.ap-sd[data-look=candy] :is(.sd-tg,.sd-tabs button,.sd-btns button,.sd-cx,.sd-pn .pt,.sd-th .nm){text-transform:uppercase;font-weight:700;letter-spacing:.05em}
/* Gallery Strips: Barlow caps, embossed white keys, green LEDs */
.ap-sd[data-look=gallery]{--lk-ui:'Barlow',sans-serif;--lk-font:'Barlow',sans-serif;--hw-bg:linear-gradient(#ffffff,#ebebe8);--hw-bd:#bdbdb8;--hw-tx:#1f2430;--hw-r:5px;--hw-sh:0 1px 2px rgba(0,0,0,.2);--hw-on:#1f2430;--hw-ontx:#ffffff;
  --th-bg:#1f2430;--th-tx:#f4f4f2;--th-plate:#ffffff;--pad-bg:#ffffff;--pad-bg2:#f0f0ee;--pad-r:4px;--pad-sh:inset 0 0 0 1px #c4c4bf;--pad-on:#2fd34e;--pad-onsh:0 0 7px rgba(47,211,78,.9)}
.ap-sd[data-look=gallery] :is(.sd-tg,.sd-tabs button,.sd-btns button,.sd-cx,.sd-pn .pt,.sd-th .nm){text-transform:uppercase;font-weight:700;letter-spacing:.08em}

/* Clear Circuit: pop-up sheets stay solid so they read cleanly over the board */
.ap-sd[data-look=clear] :is(.sd-sheet,.ap-sheet,.sd-alert,.sd-atp){background:#ffffff!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.ap-sd[data-look=clear] .sd-br,.ap-sd[data-look=clear] .sd-view,.ap-sd[data-look=clear] .sd-pn{-webkit-backdrop-filter:blur(6px) saturate(1.05);backdrop-filter:blur(6px) saturate(1.05)}
.ap-sd[data-look=clear] .sd-br,.ap-sd[data-look=clear] .sd-view{background:rgba(250,252,250,.8)!important}
.ap-sd[data-look=clear] .sd-pn{background:rgba(250,252,250,.82)!important}

/* ================= Spectrum: sleek, futuristic, colourful (hairlines, gradients, dark glass screens) ================= */
.ap-sd[data-look=spectrum]{--sp-g:linear-gradient(90deg,#2EC5FF,#8B5CFF 52%,#FF4FA8);--lk-ui:'Sora',sans-serif;--lk-font:'Sora',sans-serif;
  --hw-bg:#ffffff;--hw-bd:#E3E3EE;--hw-tx:#14142B;--hw-r:7px;--hw-sh:0 1px 2px rgba(20,20,43,.06);--hw-on:#14142B;--hw-ontx:#ffffff;
  --th-bg:#ffffff;--th-tx:#14142B;--th-bd:1px solid #E3E3EE;--th-plate:#FBFBFE;--pad-bg:#ffffff;--pad-bg2:#F5F5FA;--pad-r:4px;--pad-sh:inset 0 0 0 1px #E3E3EE;--pad-on:#8B5CFF;--pad-onsh:0 0 10px rgba(139,92,255,.55);
  background:#F4F4FA var(--lk-holo) center/cover}
.ap-sd[data-look=spectrum] .sd-main{padding:10px;gap:10px;background:transparent}
.ap-sd[data-look=spectrum] .sd-cb{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:none;border-bottom:none;padding:8px 14px}
.ap-sd[data-look=spectrum] .sd-cb::before{content:'';position:absolute;left:0;right:0;bottom:0;top:auto;width:auto;height:2px;margin:0;background:var(--sp-g)}
.ap-sd[data-look=spectrum] .sd-cb::after{display:none}
.ap-sd[data-look=spectrum] .sd-cx{background:#ffffff!important;border:1px solid #E3E3EE!important;border-radius:8px;color:#14142B!important;font-weight:500;box-shadow:0 1px 2px rgba(20,20,43,.06)}
.ap-sd[data-look=spectrum] .sd-cx.on{background:var(--sp-g)!important;color:#fff!important;border-color:transparent!important}
.ap-sd[data-look=spectrum] .sd-cx.on::after{display:none}
.ap-sd[data-look=spectrum] .sd-cx.tpb.rc{color:#FF3D6E!important}
.ap-sd[data-look=spectrum] .sd-pos,.ap-sd[data-look=spectrum] .sd-num{background:linear-gradient(135deg,#171733,#0E0E22)!important;color:#7FE3FF!important;border:1px solid #2A2A55!important;border-radius:9px;font-family:'Azeret Mono',monospace;text-shadow:0 0 8px rgba(46,197,255,.6);min-width:96px}
.ap-sd[data-look=spectrum] .sd-br,.ap-sd[data-look=spectrum] .sd-view{border:1px solid rgba(227,227,238,.9);border-radius:14px;background:rgba(255,255,255,.92);box-shadow:0 8px 24px rgba(60,40,140,.08)}
.ap-sd[data-look=spectrum] .sd-det{background:transparent}
.ap-sd[data-look=spectrum] .sd-pn{border:1px solid #E3E3EE;border-radius:12px;background:#ffffff;box-shadow:0 6px 18px rgba(60,40,140,.06)}
.ap-sd[data-look=spectrum] .sd-pn::after{display:none}
.ap-sd[data-look=spectrum] .sd-pn .pt{background:none;padding-left:10px;font-weight:600;letter-spacing:.14em;font-size:10px;color:#14142B;border-bottom:1px solid #EEEEF5}
.ap-sd[data-look=spectrum] .sd-pn .pt::after{content:'';position:absolute;left:10px;top:23px;width:22px;height:2px;border-radius:2px;background:var(--sp-g)}
.ap-sd[data-look=spectrum] .sd-pn .pw.on{background:var(--sp-g)!important;box-shadow:0 0 8px rgba(139,92,255,.6)}
.ap-sd[data-look=spectrum] .sd-step.on{background:var(--sp-g)!important;background-size:600% 100%!important}
.ap-sd[data-look=spectrum] :is(.sd-tg.on,.sd-seg button.on,.sd-tabs button.on){background:var(--sp-g)!important;border-color:transparent!important}
.ap-sd[data-look=spectrum] .sd-th .nm::before{background:var(--sp-g);width:10px;height:10px}
/* slim knobs: no caps, a hairline track and the gradient value arc */
.ap-sd[data-look=spectrum] .sd-kn .dl .cap{display:none}
.ap-sd[data-look=spectrum] .sd-kn .dl::before{background:none}
.ap-sd[data-look=spectrum] .sd-kn .dl::after{content:'';position:absolute;inset:30%;border-radius:50%;background:#ffffff;box-shadow:0 1px 3px rgba(20,20,43,.25),inset 0 0 0 1px #E3E3EE}
.ap-sd[data-look=spectrum] .sd-kn .dl svg path:first-child{stroke:#E6E6F0!important}
.ap-sd[data-look=spectrum] .sd-kn .kl{letter-spacing:.12em;font-weight:600}
.ap-sd[data-look=spectrum] .sd-step.on:nth-child(4n+3){background-position:33% 0!important}
.ap-sd[data-look=spectrum] .sd-step.on:nth-child(4n+4){background-position:66% 0!important}
.ap-sd[data-look=spectrum] .sd-step.on:nth-child(4n+5){background-position:100% 0!important}

/* ================= Soft Touch: soft grey hardware (moulded keys, lit dome knobs, metal fader caps, rocker toggles) ================= */
.ap-sd[data-look=soft]{--sf:#E9E9EC;--sf-out:5px 5px 12px rgba(150,153,166,.5),-5px -5px 12px rgba(255,255,255,.95);--sf-sm:2px 2px 5px rgba(150,153,166,.55),-2px -2px 5px rgba(255,255,255,.95);
  --sf-in:inset 2px 2px 5px rgba(150,153,166,.55),inset -2px -2px 5px rgba(255,255,255,.9);--sf-glow:#12D6C2;
  --lk-ui:'Manrope',sans-serif;--lk-font:'Manrope',sans-serif;--lk-led:#12D6C2;--lk-mainbg:#E9E9EC;
  --hw-bg:linear-gradient(145deg,#F7F7F9,#E2E2E6);--hw-bd:transparent;--hw-tx:#2A2C33;--hw-r:9px;--hw-sh:var(--sf-sm);--hw-on:#2A2C33;--hw-ontx:#fff;
  --th-bg:#F4F4F6;--th-tx:#2A2C33;--th-plate:#EDEDF0;--pad-bg:linear-gradient(145deg,#F6F6F8,#DEDEE3);--pad-bg2:linear-gradient(145deg,#EEEEF1,#D6D6DB);--pad-r:6px;--pad-sh:1.5px 1.5px 3px rgba(150,153,166,.6),-1.5px -1.5px 3px #fff;
  --pad-on:radial-gradient(circle at 50% 40%,#7FFFF2,#12D6C2 70%);--pad-onsh:0 0 9px rgba(18,214,194,.75),inset 0 1px 0 rgba(255,255,255,.6);background:#E9E9EC}
.ap-sd[data-look=soft] .sd-main{padding:10px;gap:10px;background:#E9E9EC}
.ap-sd[data-look=soft] .sd-br,.ap-sd[data-look=soft] .sd-view{border-radius:18px;background:#F1F1F3;box-shadow:var(--sf-out)}
.ap-sd[data-look=soft] .sd-det{background:#E9E9EC}
/* top bar: moulded square keys like a transport block, record lit red */
.ap-sd[data-look=soft] .sd-cb{background:#E9E9EC;box-shadow:none;border-bottom:none;padding:8px 14px}
.ap-sd[data-look=soft] .sd-cb::before,.ap-sd[data-look=soft] .sd-cb::after{display:none}
.ap-sd[data-look=soft] .sd-cx{background:linear-gradient(145deg,#FAFAFB,#E1E1E5)!important;border:none!important;border-radius:10px;color:#2A2C33!important;box-shadow:var(--sf-sm);font-weight:600}
.ap-sd[data-look=soft] .sd-cx:active{box-shadow:var(--sf-in)}
.ap-sd[data-look=soft] .sd-cx.on{background:linear-gradient(145deg,#E3E3E7,#F3F3F5)!important;box-shadow:var(--sf-in)}
.ap-sd[data-look=soft] .sd-cx.on::after{background:var(--sf-glow);box-shadow:0 0 6px var(--sf-glow)}
.ap-sd[data-look=soft] .sd-cx.tpb.rc{color:#F0322E!important}
.ap-sd[data-look=soft] .sd-cx.tpb.rc.on{background:radial-gradient(circle at 50% 35%,#FF6B5E,#D9241B 70%)!important;color:#fff!important;box-shadow:0 0 12px rgba(240,50,46,.55),inset 0 1px 0 rgba(255,255,255,.4)}
.ap-sd[data-look=soft] .sd-pos,.ap-sd[data-look=soft] .sd-num{background:#E4E4E8!important;color:#2A2C33!important;border:none!important;border-radius:9px;box-shadow:var(--sf-in);font-family:'Manrope',sans-serif;font-weight:700;letter-spacing:.04em;font-size:14px!important}
/* modules: raised soft plates, no screws, the speaker-grille dots as the title mark */
.ap-sd[data-look=soft] .sd-pn{border:none;border-radius:16px;background:#ECECEF;box-shadow:var(--sf-out)}
.ap-sd[data-look=soft] .sd-pn::after{display:none}
.ap-sd[data-look=soft] .sd-pn .pt{background:none;padding-left:26px;font-weight:700;letter-spacing:.14em;font-size:10px;color:#4A4D57;position:relative}
.ap-sd[data-look=soft] .sd-pn .pt::before{content:'';position:absolute;left:9px;top:50%;width:11px;height:11px;margin-top:-5.5px;
  background:radial-gradient(circle,#55585F 1.1px,transparent 1.5px) 0 0/3.7px 3.7px;opacity:.75}
/* power: round chrome button, red when on */
.ap-sd[data-look=soft] .sd-pn .pw{width:18px;height:18px;background:radial-gradient(circle at 50% 40%,#FBFBFC,#C9CACF)!important;border:none!important;box-shadow:0 0 0 2px #E9E9EC,0 0 0 3px #C3C4CA,1px 2px 3px rgba(0,0,0,.25)}
.ap-sd[data-look=soft] .sd-pn .pw.on{background:radial-gradient(circle at 50% 38%,#FF7A70,#D3221A 72%)!important;box-shadow:0 0 0 2px #E9E9EC,0 0 0 3px #C3C4CA,0 0 10px rgba(240,50,46,.6)}
/* toggles: rocker pills with a teal LED */
.ap-sd[data-look=soft] :is(.sd-tg,.sd-seg button,.sd-tabs button){border-radius:999px!important;font-weight:600}
.ap-sd[data-look=soft] :is(.sd-tg.on,.sd-seg button.on,.sd-tabs button.on){background:linear-gradient(145deg,#3A3D45,#22242A)!important;color:#7FFFF2!important;border-color:transparent!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px #15171C,var(--sf-sm);text-shadow:0 0 6px rgba(18,214,194,.8)}
/* track names: soft keys with the track's colour as a lit dot */
.ap-sd[data-look=soft] .sd-th{background:#EDEDF0}
.ap-sd[data-look=soft] .sd-th .nm{background:linear-gradient(145deg,#FAFAFB,#E4E4E8)!important;border:none;border-radius:9px;box-shadow:var(--sf-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.ap-sd[data-look=soft] .sd-th .nm::before{background:var(--c);box-shadow:0 0 6px var(--c),0 0 0 1.5px #fff}
.ap-sd[data-look=soft] .sd-th.sel .nm{background:#15171C!important;color:#fff!important}
/* knobs: recessed well, white dome with a black rim, a lit teal pointer */
.ap-sd[data-look=soft] .sd-kn .dl::before{background:#E4E4E8;-webkit-mask:none;mask:none;inset:8%;box-shadow:var(--sf-in)}
.ap-sd[data-look=soft] .sd-kn .dl .cap{left:22%;top:22%;width:56%;height:56%;background:radial-gradient(circle at 50% 32%,#FFFFFF,#EDEDF0 55%,#C9CAD0);
  box-shadow:0 0 0 2.2px #1C1D22,0 3px 6px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.3)}
.ap-sd[data-look=soft] .sd-kn .dl .cap::after{content:'';position:absolute;left:50%;top:9%;width:2.4px;height:22%;margin-left:-1.2px;border-radius:2px;background:var(--sf-glow);box-shadow:0 0 5px var(--sf-glow),0 0 2px var(--sf-glow)}
.ap-sd[data-look=soft] .sd-kn .dl svg path:nth-child(2){stroke:var(--sf-glow)!important;filter:drop-shadow(0 0 2px rgba(18,214,194,.7))}
.ap-sd[data-look=soft] .sd-kn .dl svg{position:relative;z-index:2;pointer-events:none}
.ap-sd[data-look=soft] .sd-kn .kl{color:#4A4D57;letter-spacing:.12em}
.ap-sd[data-look=soft] .sd-kn .kv{background:transparent;border:none;color:#2A2C33;font-weight:700}
.ap-sd[data-look=soft] .mx .sd-kn.gk .dl .cap{box-shadow:0 0 0 1.6px #1C1D22,0 2px 3px rgba(0,0,0,.3)}
/* faders: dark slot with tick marks, a ridged metal cap */
.ap-sd[data-look=soft] .sd-fd .fw{height:96px}
.ap-sd[data-look=soft] .sd-fd .gr{width:30px;background:repeating-linear-gradient(#A9ABB3 0 1px,transparent 1px 12px) 0 0/6px 100% no-repeat,repeating-linear-gradient(#A9ABB3 0 1px,transparent 1px 12px) 100% 0/6px 100% no-repeat}
.ap-sd[data-look=soft] .sd-fd .gr i{left:13px;width:4px;border-radius:3px;background:#2A2C33;box-shadow:inset 0 1px 2px #000,0 1px 0 #fff}
.ap-sd[data-look=soft] .sd-fd .gr b{left:1px;width:28px;height:16px;border-radius:3px;margin-bottom:-4px;
  background:linear-gradient(#FDFDFD,#D7D8DD 45%,#9C9EA6 50%,#D7D8DD 55%,#F2F2F4);box-shadow:0 2px 4px rgba(0,0,0,.4),0 0 0 .5px #6E7078}
.ap-sd[data-look=soft] .sd-fd .db{background:#E4E4E8;border:none;border-radius:6px;box-shadow:var(--sf-in);font-weight:700}
/* drum pads: moulded rubber keys, teal when lit */
.ap-sd[data-look=soft] .sd-mpc{background:linear-gradient(145deg,#F7F7F9,#DCDCE1)!important;border:none!important;border-radius:12px!important;box-shadow:var(--sf-sm)!important}
.ap-sd[data-look=soft] .sd-mpc.on,.ap-sd[data-look=soft] .sd-mpc:active{box-shadow:var(--sf-in),0 0 0 2px var(--c)!important}
.ap-sd:not(.mac)[data-look=soft] .sd-main{padding:6px;gap:6px}
/* track mix keys (activator / solo / arm): small moulded keys; activator lit teal, solo blue, arm red */
.ap-sd[data-look=soft] :is(.mx button,.sd-mix .bt button){border:none!important;border-radius:6px!important;background:linear-gradient(145deg,#FAFAFB,#E1E1E5)!important;box-shadow:var(--sf-sm);font-weight:700}
.ap-sd[data-look=soft] :is(.mx .act.on,.sd-mix .act.on){background:linear-gradient(145deg,#3A3D45,#22242A)!important;color:#7FFFF2!important;text-shadow:0 0 5px rgba(18,214,194,.8)}
/* Session grid: channel names as colour tabs, clip slots as soft tinted cards, empty slots as moulded wells */
.ap-sd[data-look=soft] .sd-ch{border-radius:11px 11px 0 0;margin:0 2px;color:#fff!important;font-family:'Manrope',sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;border-bottom:none!important}
.ap-sd[data-look=soft] .sd-col.m .sd-ch{background:#15171C!important}
.ap-sd[data-look=soft] .sd-ch.add{color:#4A4D57!important;text-transform:none;letter-spacing:0}
.ap-sd[data-look=soft] .sd-slot{border-radius:9px;margin:0 3px 4px}
.ap-sd[data-look=soft] .sd-slot.f{background:color-mix(in srgb,var(--c) 24%,#fff)!important;box-shadow:inset 3px 0 0 var(--c)}
.ap-sd[data-look=soft] .sd-slot.f .cn{color:#15171C!important;font-weight:700}
.ap-sd[data-look=soft] .sd-slot.f .lb{color:var(--c)!important}
.ap-sd[data-look=soft] :is(.sd-slot.e,.sd-slot.v){background:#E6E6EA!important;box-shadow:var(--sf-in)}
.ap-sd[data-look=soft] .sd-slot.play{box-shadow:inset 3px 0 0 var(--c),0 0 0 1.5px var(--sf-glow),0 0 10px rgba(18,214,194,.45)}