:root {
  --amber: #ffad3b;
  --amber-glow: rgba(255, 173, 59, .55);
  --ink: #d9dade;
  --ink-dim: #9a9ca3;
  --rule: rgba(255, 255, 255, .14);
}
/* one bundled typeface so the panel reads the same on every system (and offline) */
@font-face { font-family: "Inter"; src: url(fonts/Inter-SY01.woff2) format("woff2");
  font-weight: 100 900; font-style: normal; font-display: block; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0d0d0e; overflow: hidden;
  font-family: "Inter", sans-serif; color: var(--ink);
  user-select: none; -webkit-user-select: none; }
button { font: inherit; }

/* the instrument is laid out at a fixed design size and scaled to fit */
#fit { position: absolute; inset: 0; overflow: hidden; }
#unit { position: absolute; left: 50%; top: 50%; width: 1440px; height: 1150px; display: flex;
  transform-origin: center center; transform: translate(-50%, -50%); }

.cheek { width: 38px; flex: none; border-radius: 10px;
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.18) 0 2px, transparent 2px 7px, rgba(255,255,255,.04) 7px 8px, transparent 8px 13px),
    repeating-linear-gradient(88deg, rgba(0,0,0,.12) 0 1px, transparent 1px 19px),
    linear-gradient(90deg, #3b200f, #6e4123 22%, #85512c 48%, #66391c 74%, #3a1f0e);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.08); }

.panel { flex: 1; margin: 0 2px; border-radius: 6px; position: relative; padding: 0 30px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #4a4b4f, #3c3d41 40%, #35363a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.6); }

/* ------------------------------------------------------------- top bar */
.top { height: 66px; display: flex; align-items: center; gap: 14px; }
.logo { font-size: 34px; font-weight: 500; letter-spacing: 9px; color: #e8e9ec; }
.top > * { flex: none; white-space: nowrap; }
.top > .grow { flex: 1; }
.grow { flex: 1; }
.sel { height: 36px; border-radius: 5px; border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(#2b2c30, #232427); display: flex; align-items: center;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6); font-size: 15px; color: #e6e7ea; }
.sel button { all: unset; cursor: pointer; width: 34px; height: 36px; display: grid; place-items: center;
  color: var(--ink-dim); font-size: 18px; }
.sel button:hover { color: #fff; }
.sel .name { min-width: 170px; text-align: center; }
.sel .name.empty { color: var(--ink-dim); }
.sel .name { position: relative; cursor: default; }
.sel .name.mine::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; border-radius: 50%;
  vertical-align: middle; background: #8fc79a; box-shadow: 0 0 4px rgba(143, 230, 160, .6); }
.sel .name input.rename { width: 150px; height: 24px; border: 0; outline: 1px solid var(--amber); border-radius: 3px; padding: 0 6px;
  background: #15161a; color: #fff; font: 15px "Inter", sans-serif; text-align: center; }
/* save, nested at the right end of the memory bar: soft green, glows on hover */
.sel button.savein { width: 34px; color: #8fc79a; border-left: 1px solid rgba(255,255,255,.12); transition: color .15s, filter .15s; }
.sel button.savein svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sel button.savein:hover { color: #c4f5cd; filter: drop-shadow(0 0 3px rgba(143, 230, 160, .95)) drop-shadow(0 0 8px rgba(143, 230, 160, .55)); }
.sel button.savein.flash { color: #e8ffec; filter: drop-shadow(0 0 6px rgba(143, 230, 160, 1)); }
.res { padding: 0 5px; }
.res span { padding: 6px 10px; border-radius: 3px; cursor: pointer; color: var(--ink-dim); font-size: 13px; letter-spacing: 1px; }
.res span.on { color: #111; background: var(--amber); }
.toplabel { font-size: 11px; letter-spacing: 2px; color: var(--ink-dim); }
.tbtn { height: 36px; padding: 0 14px; border-radius: 5px; cursor: pointer; font-size: 12px; letter-spacing: 2px;
  color: #dcdde0; background: linear-gradient(#2e2f33, #1d1e21); border: 1px solid rgba(0,0,0,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 4px rgba(0,0,0,.5); display: flex; align-items: center; gap: 8px; }
.tbtn:active { transform: translateY(1px); }
.ibtn { width: 38px; height: 36px; padding: 0; border-radius: 5px; cursor: pointer; display: grid; place-items: center;
  font-size: 18px; color: #dcdde0; background: linear-gradient(#2e2f33, #1d1e21); border: 1px solid rgba(0,0,0,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 4px rgba(0,0,0,.5); }
.ibtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ibtn:active { transform: translateY(1px); }
.ibtn.lit { color: var(--amber); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 8px var(--amber-glow); }
.ibtn.flash { color: #111; background: var(--amber); }
.tbtn.flash { color: #111; background: var(--amber); }

/* menu */
.menu { position: absolute; right: 30px; top: 60px; z-index: 20; width: 300px; padding: 8px;
  background: #222326; border: 1px solid rgba(0,0,0,.9); border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
.menu button { all: unset; display: block; width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 4px;
  cursor: pointer; font-size: 14px; color: #e2e3e6; }
.menu button:hover { background: rgba(255,255,255,.07); }
.menu hr { border: 0; border-top: 1px solid var(--rule); margin: 6px 4px; }
.menu .mrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px; font-size: 14px; color: #e2e3e6; }
.menu .mrow[hidden] { display: none; }   /* [hidden] loses to display: flex otherwise */
.menu .mrow select { width: 160px; height: 30px; border-radius: 4px; padding: 0 6px; font: 12px "Inter", sans-serif;
  color: #dcdde0; background: #1d1e21; border: 1px solid rgba(0,0,0,.85); }
.menu #record.lit { color: #ff6b62; }
.menu .keys { padding: 6px 12px 4px; font-size: 12px; line-height: 1.8; color: var(--ink-dim);
  display: grid; grid-template-columns: auto 1fr; gap: 0 14px; }
.menu .keys b { color: #e2e3e6; font-weight: 500; }
.menu .version { padding: 8px 12px 2px; font-size: 11px; letter-spacing: 1px; color: #6f7178; border-top: 1px solid var(--rule); margin-top: 6px; }

/* -------------------------------------------------------------- screen */
.bezel { width: 1300px; height: 731px; border-radius: 6px; padding: 5px; margin: 0 auto;
  background: linear-gradient(#1b1b1d, #0f0f10);
  box-shadow: 0 1px 0 rgba(255,255,255,.12), inset 0 2px 8px rgba(0,0,0,.9); }
.screen { width: 100%; height: 100%; border-radius: 3px; background: #000; position: relative; overflow: hidden; }
.screen canvas { width: 100%; height: 100%; display: block; object-fit: contain; }
.notice { position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-size: 16px; line-height: 1.6; letter-spacing: 1px; color: var(--ink-dim); padding: 40px; }

/* ---------------------------------------------------------- knob groups */
.groups { display: flex; margin-top: 22px; height: 168px; }
.group { flex: var(--n); min-width: 0; padding: 0 14px; border-left: 1px solid var(--rule); }
.group:first-child { border-left: none; padding-left: 0; }
.group:last-child { padding-right: 0; }
.ghead { display: flex; align-items: center; gap: 12px; font-size: 17px; letter-spacing: 4px; color: #e4e5e8; margin-bottom: 14px; }
.grule { flex: 1; height: 1px; background: var(--rule); }

/* MORE tab at the end of each section rule; amber dot = hidden changes */
.more { all: unset; position: relative; cursor: pointer; font-size: 10px; letter-spacing: 2px; color: var(--ink-dim);
  padding: 4px 8px; border-radius: 3px; border: 1px solid var(--rule); line-height: 1; }
.more:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.more.open { color: #111; background: var(--amber); border-color: var(--amber); }
.more .mdot { position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; display: none;
  background: var(--amber); box-shadow: 0 0 5px 1px var(--amber-glow); }
.more.dirty .mdot { display: block; }
.more[hidden] { display: none; }
.more.open .mdot { display: none; }

.menu[hidden], .knobs[hidden], .lblock[hidden] { display: none; }

/* MORE flips a section's knob row: extras use slightly smaller knobs and a
   compact grid of switch buttons so they fit the same width */
.knobs.extra { justify-content: space-around; align-items: center; }
.swgrid { display: grid; grid-template-columns: 52px; gap: 6px; }
.swgrid.two { grid-template-columns: repeat(2, 40px); }
/* text-free colour buttons (Form extras): the setting is shown only by colour */
.btn.mini.cbtn { width: 40px; height: 40px; padding: 0; }
.btn.cbtn.lit { background: linear-gradient(color-mix(in srgb, var(--sc) 82%, #fff), var(--sc));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 10px color-mix(in srgb, var(--sc) 55%, transparent); }
.btn.mini { min-width: 0; width: 52px; height: 44px; padding: 0 2px; gap: 5px; font-size: 9px; letter-spacing: 1px; }
.btn.mini .two .cap { font-size: 8px; letter-spacing: 1px; }
.btn.mini .two .val { font-size: 12px; letter-spacing: 1px; }
.btn.mini .led { width: 6px; height: 6px; }
.btn .two { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; }
.btn .two .cap { font-size: 10px; letter-spacing: 2px; color: var(--ink-dim); }
.btn .two .val { font-size: 13px; letter-spacing: 2px; }
.btn.changed .val { color: var(--amber); }
.knobs { display: flex; justify-content: space-around; }

.knob { width: 92px; flex: none; text-align: center; cursor: ns-resize; position: relative; }
.knob > svg { width: 86px; height: 86px; display: block; margin: 0 auto; overflow: visible; }
.klabel { font-size: 13px; letter-spacing: 1.5px; margin-top: 4px; color: #e2e3e6; }
.kval { font-size: 13px; color: var(--ink-dim); margin-top: 6px; font-variant-numeric: tabular-nums; }
.knob.touched .kval, .breathe.touched .kval { color: var(--amber); }

/* MIDI learn: armed controls pulse, mapped controls carry a small dot */
.armed { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 8px; animation: arm 0.8s ease-in-out infinite alternate; }
@keyframes arm { from { outline-color: rgba(255,173,59,.25); } to { outline-color: var(--amber); } }
.mapped::before { content: ""; position: absolute; top: 2px; right: 6px; width: 5px; height: 5px; border-radius: 50%;
  background: #7fd1ff; box-shadow: 0 0 4px rgba(127,209,255,.8); }

/* ---------------------------------------------------------- bottom strip */
.strip { position: absolute; left: 0; right: 0; bottom: 0; height: 152px; padding: 0 30px;
  display: flex; align-items: center; gap: 0; border-top: 1px solid rgba(0,0,0,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.18)); border-radius: 0 0 6px 6px; }
.vrule { width: 1px; align-self: stretch; margin: 26px 0; background: var(--rule); }
.lblock { flex: none; height: 128px; padding: 0 14px; border-left: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-around; gap: 12px; }
#blkShapes, #blkStatic { border-left: none; padding-left: 0; }
#blkAudio { padding-right: 0; justify-content: flex-start; }
.breathe { display: flex; align-items: center; gap: 0; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.lhead { display: flex; align-items: center; gap: 10px; }
.ltab { all: unset; cursor: pointer; font-size: 10px; letter-spacing: 2px; color: var(--ink-dim);
  padding: 4px 8px; border-radius: 3px; border: 1px solid var(--rule); line-height: 1; }
.ltab:hover { color: #fff; border-color: rgba(255,255,255,.3); }

.shape { display: grid; grid-template-columns: 44px repeat(4, 52px); gap: 5px 5px; align-items: center; width: 100%; }
.shape .h { font-size: 11px; letter-spacing: 1.5px; color: var(--ink-dim); text-align: center; }
.shape .r { font-size: 11px; letter-spacing: 1.5px; color: var(--ink-dim); text-align: right; padding-right: 4px; }
.shape .title { grid-column: 1 / -1; font-size: 15px; letter-spacing: 3px; color: #e4e5e8; margin-bottom: 2px; }
.glitch { display: flex; flex-direction: column; width: 100%; gap: 0; }
.glitch .lhead { font-size: 15px; letter-spacing: 3px; color: #e4e5e8; margin-bottom: 2px; }
.glitch .knobs { justify-content: space-between; }
.sbtn { height: 26px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; letter-spacing: 1px; color: #cfd0d4; position: relative;
  background: linear-gradient(#2c2d31, #1f2023); border: 1px solid rgba(0,0,0,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.6); }
.sbtn:active { transform: translateY(1px); }
.sbtn.changed { color: var(--amber); }

.led { width: 8px; height: 8px; border-radius: 50%; background: #4b4c50; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); flex: none; }
.lit .led { background: var(--amber); box-shadow: 0 0 6px 2px var(--amber-glow); }
.rec.lit .led { background: #ff3b30; box-shadow: 0 0 7px 2px rgba(255,59,48,.6); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

.btns { display: flex; gap: 10px; }
.btn { min-width: 104px; height: 46px; padding: 0 10px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 13px; letter-spacing: 2px; color: #dcdde0; position: relative; font-variant-numeric: tabular-nums;
  background: linear-gradient(#2e2f33, #1d1e21); border: 1px solid rgba(0,0,0,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 4px rgba(0,0,0,.6); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.7); }

/* ------------------------------------------------------- perform view */
/* a transformed ancestor would capture position:fixed, so drop the fit scale */
body.perform #unit { transform: none !important; }
body.perform .panel > *:not(.bezel-wrap), body.perform .cheek { visibility: hidden; }
body.perform .bezel { position: fixed; inset: 0; width: 100vw; height: 100vh; padding: 0; border-radius: 0; z-index: 10; background: #000; box-shadow: none; }
body.perform .screen { border-radius: 0; }
body.perform { cursor: none; }
body.perform.awake { cursor: default; }
.hint { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 11; display: none;
  font-size: 13px; letter-spacing: 2px; color: rgba(255,255,255,.75); background: rgba(0,0,0,.55);
  padding: 10px 16px; border-radius: 6px; transition: opacity .6s; opacity: 0; }
body.perform .hint { display: block; }
body.perform.awake .hint { opacity: 1; }

.toast { position: fixed; left: 50%; top: 22px; transform: translateX(-50%); z-index: 30; padding: 10px 16px;
  border-radius: 6px; background: rgba(20,20,22,.92); color: #e8e9ec; font-size: 13px; letter-spacing: 1px;
  border: 1px solid rgba(255,255,255,.12); transition: opacity .4s; opacity: 0; pointer-events: none; }
.toast.show { opacity: 1; }

/* license key entry: over the instrument, which plays on dimmed behind it */
.gate { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(8, 8, 9, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gate[hidden], .gbox[hidden] { display: none; }
.gbox { width: min(400px, calc(100vw - 32px)); padding: 34px 32px 26px; border-radius: 10px; text-align: center;
  background: #222326; border: 1px solid rgba(0,0,0,.9);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
.glogo { font-size: 26px; font-weight: 500; letter-spacing: 9px; color: #ecedf0; margin: 0 0 18px; }
.gtext { margin: 0 0 22px; font-size: 14px; line-height: 1.5; color: var(--ink-dim); }
.gbox input { width: 100%; height: 42px; padding: 0 12px; border-radius: 5px; border: 1px solid rgba(0,0,0,.85);
  background: #18191b; color: #ecedf0; font: 14px "Inter", sans-serif; letter-spacing: 1px; text-align: center;
  user-select: text; -webkit-user-select: text; outline: none; }
.gbox input:focus { border-color: rgba(255, 173, 59, .6); }
.gbox button { width: 100%; height: 42px; margin: 12px 0 0; border: 0; border-radius: 5px; cursor: pointer;
  background: var(--amber); color: #141414; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; }
.gbox button:disabled { opacity: .55; cursor: default; }
.gmsg { min-height: 20px; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: #ff9a8f; }
.gmsg:empty { min-height: 0; margin: 0; }
.gmsg.busy { color: var(--ink-dim); }
.gfoot { margin: 18px 0 0; font-size: 13px; color: var(--ink-dim); }
.gfoot a, .gtext a { color: var(--amber); text-decoration: none; white-space: nowrap; }

/* ------------------------------------------------------- page switch */
.strip[hidden] { display: none; }
.recdot { all: unset; cursor: pointer; font-size: 12px; letter-spacing: 2px; color: #ff3b30; animation: blink 1s steps(2) infinite; font-variant-numeric: tabular-nums; }
.recdot[hidden] { display: none; }

/* ------------------------------------------------------ audio + glitch row */
#bandGraph { flex: 1 1 0; min-width: 0; width: 0; height: 96px; border-radius: 4px; border: 1px solid rgba(0,0,0,.85); cursor: ew-resize; touch-action: none; }
.bandcols { display: flex; gap: 6px; }
.bandcol { width: 46px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.chip { position: relative; width: 46px; height: 40px; border-radius: 5px; overflow: hidden; cursor: grab; text-align: center;
  background: #1a1f26; border: 1px solid rgba(0,0,0,.85); border-top: 3px solid var(--c); }
.chip .cfill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--lv, 0) * 100%); background: var(--c); opacity: .35; }
.chip .cnum { position: relative; display: block; margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--c); }
.chip .chz { position: relative; display: block; font-size: 10px; color: var(--ink-dim); margin-top: 2px; }
.glitch { display: flex; flex-direction: column; }

/* band width (Q) knobs */
.qknob { width: 46px; text-align: center; cursor: ns-resize; }
.qknob > svg { width: 40px; height: 40px; display: block; margin: 0 auto; overflow: visible; }
.qknob .mhit, .qknob .marc, .qknob .mdot { display: none; }
.qval { font-size: 10px; color: var(--ink-dim); margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }


/* --------------------------------------------- audio modulation rings */
.knob .mhit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; display: none; cursor: ns-resize; }
.knob .marc { fill: none; stroke-width: 3.2; stroke-linecap: round; pointer-events: none; display: none; }
.knob .mdot { pointer-events: none; display: none; stroke: #0d0d0e; stroke-width: 1; }
.knob.modded .mhit, .knob.modded .marc, .knob.modded .mdot { display: inline; }

/* drag a band onto a knob */
.puck { position: fixed; z-index: 60; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none; font: 600 15px "Inter", sans-serif;
  color: #0e131a; background: var(--c); box-shadow: 0 0 0 3px rgba(0,0,0,.35), 0 0 14px var(--c); }
body.assigning, body.assigning * { cursor: grabbing !important; }
body.assigning .knob.modable > svg { filter: drop-shadow(0 0 5px rgba(255,255,255,.18)); }
.knob.droptarget > svg { filter: drop-shadow(0 0 9px var(--amber)) !important; }

/* --------------------------------------- analyzer block: AUDIO / MOTION views */
.rpage { display: flex; flex-direction: column; width: 100%; height: 100%; gap: 4px; }
.rpage[hidden] { display: none; }
.rpage > .lhead { font-size: 15px; letter-spacing: 3px; color: #e4e5e8; }
.rrow { flex: 1; min-height: 0; display: flex; align-items: center; gap: 12px; }
#reactHost .knob { width: 80px; }
#reactHost .knob > svg { width: 64px; height: 64px; }
.qknob > svg { width: 34px; height: 34px; }

/* Motion table: tabs A-D, one waveform with a playhead, and the
   selected motion's speed knob + shape selector */
.mtabs { display: flex; flex-direction: column; gap: 4px; }
.mtab { width: 30px; height: 22px; border-radius: 4px; cursor: grab; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--c); background: #1a1f26;
  border: 1px solid rgba(0,0,0,.85); border-left: 3px solid var(--c); }
.mtab.sel { color: #0e131a; background: var(--c); }
#motionTable { flex: 1 1 0; min-width: 0; width: 0; height: 96px; border-radius: 4px; border: 1px solid rgba(0,0,0,.85); }
.mside { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mside .knob { width: 64px; }
.mside .knob[hidden] { display: none; }
.mside .knob > svg { width: 52px; height: 52px; }
.mside .klabel { display: none; }
.mside .kval { font-size: 11px; margin-top: 1px; white-space: nowrap; }
.mshapesel { display: flex; align-items: center; gap: 2px; }
.mshapesel button { all: unset; cursor: pointer; width: 14px; text-align: center; color: var(--ink-dim); font-size: 15px; }
.mshapesel button:hover { color: #fff; }
.mshape { width: 40px; height: 18px; border-radius: 4px; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(#2c2d31, #1f2023); border: 1px solid rgba(0,0,0,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.6); }
.mshape svg { width: 22px; height: 12px; fill: none; stroke: var(--c); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.mshape:active { transform: translateY(1px); }

/* ---------------------------------------------- rendered faceplate skin */
/* 3D renders in skin/: the plate is the whole unit (walnut, brushed panel,
   bezel, lower-deck seam); knobs show a frame of a rendered body under the live
   pointer; raised buttons wear a rendered surface stretched as a 9-slice
   (corners fixed, middle stretched). Rules, text, ticks, rings, the screen and
   every lit state stay live. The button renders were made where each group sits
   (the top catch-light fades left to right), hence the per-container sources.
   ?skin=0 turns it all off. */
html:not(.skin) .kbody, html:not(.skin) .ps { display: none; }
html.skin .kc, html.skin .pl { display: none; }
html.skin #unit { background: url(skin/plate@2x.webp) 0 0 / 1440px 1150px no-repeat; }
html.skin .cheek { background: none; box-shadow: none; }
html.skin .panel { background: none; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
html.skin .bezel { background: none; box-shadow: none; }
html.skin .strip { background: none; box-shadow: none; border-top-color: transparent; }
html.skin body.perform #unit { background: none; }
html.skin body.perform .bezel { background: #000; }

/* :where() keeps this at the weight of one class, so the sources below and the
   app's lit states (.ibtn.flash, .more.open, ...) still win; longhands only, as
   the border shorthand would also reset border-image */
html.skin :where(.ibtn, .top .sel, .btn, .sbtn, .more, .ltab, .chip, .mtab, .mshape) {
  background: none; box-shadow: none; border-color: transparent; border-width: 1px; }
/* large buttons: 24 px slice of the 2x source = 8 px shadow margin + 4 px edge */
html.skin .btn { border-image: url(skin/button-deck-large-centre@2x.webp) 24 fill / 12px / 8px stretch; }
html.skin .top :is(.ibtn, .sel) { border-image: url(skin/button-top-large-right@2x.webp) 24 fill / 12px / 8px stretch; }
html.skin .group .btn { border-image: url(skin/button-mid-large-left@2x.webp) 24 fill / 12px / 8px stretch; }
html.skin #blkAudio .chip { border-image: url(skin/button-deck-large-right@2x.webp) 24 fill / 12px / 8px stretch; }
/* small buttons: 22 px slice = 8 px margin + 3 px edge */
html.skin :is(.sbtn, .ltab, .mtab, .mshape) { border-image: url(skin/button-deck-small-left@2x.webp) 22 fill / 11px / 8px stretch; }
html.skin #blkAudio :is(.ltab, .mtab, .mshape) { border-image: url(skin/button-deck-small-right@2x.webp) 22 fill / 11px / 8px stretch; }
html.skin .more { border-image: url(skin/button-mid-small-right@2x.webp) 22 fill / 11px / 8px stretch; }
html.skin .group:nth-child(1) .more { border-image: url(skin/button-mid-small-left@2x.webp) 22 fill / 11px / 8px stretch; }
html.skin .group:nth-child(2) .more { border-image: url(skin/button-mid-small-centre@2x.webp) 22 fill / 11px / 8px stretch; }
/* lit states keep the app's own fills and glows */
html.skin .ibtn.lit { box-shadow: 0 0 8px var(--amber-glow); }
html.skin .top .ibtn.flash { border-image: none; background: var(--amber); }
html.skin .group .more.open { border-image: none; background: var(--amber); border-color: var(--amber); }
html.skin .group .btn.cbtn.lit { border-image: none; border-color: rgba(0,0,0,.85);
  background: linear-gradient(color-mix(in srgb, var(--sc) 82%, #fff), var(--sc));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 10px color-mix(in srgb, var(--sc) 55%, transparent); }
html.skin #blkAudio .mtab.sel { border-image: none; background: var(--c); border-color: rgba(0,0,0,.85); }