/* Pocket Studio 48 — the desk's black/graphite console, brown wood cheeks,
   cream VU faces, ivory faders, fluted encoders and lamp colours, at pocket size. */
:root{
 --ivory-hi:#efe3c2;--ivory:#d8c89f;--ivory-lo:#b9a676;--ink:#2a2319;
 --green:#9ad66f;--amber:#f2b33d;--red:#e0492c;--yellow:#e8d44a;--brass:#d7b56a;--lamp-off:#3a3024;
 --text:#e3d9c0;--dim:#b7b39c;--faint:#8c8874;
 --panel:linear-gradient(180deg,#2a2723,#1b1916 60%,#121110);
 --din:"DIN Condensed","DINCondensed-Bold","Arial Narrow","Roboto Condensed",sans-serif-condensed,"Helvetica Neue",sans-serif;
 --ui:"Helvetica Neue",Helvetica,Arial,sans-serif;
 --mono:Menlo,ui-monospace,"SF Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html{background:#0d0c0b;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;padding:22px 16px 18px;color:var(--text);font:13px/1.35 var(--ui);
 background:radial-gradient(120% 70% at 50% 0,#22201c,#0d0c0b 70%);
 display:flex;flex-direction:column;align-items:center;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
a{color:inherit}

/* ---------- Chassis: wood cheeks with screws ---------- */
.chassis{position:relative;width:100%;max-width:1180px;padding:0 22px;border-radius:5px;
 background:
  radial-gradient(4px 4px at 11px 40px,#b39c68,#6b5a33 55%,#2a2112 100%) no-repeat,
  radial-gradient(4px 4px at calc(100% - 11px) 40px,#b39c68,#6b5a33 55%,#2a2112 100%) no-repeat,
  radial-gradient(4px 4px at 11px calc(100% - 40px),#b39c68,#6b5a33 55%,#2a2112 100%) no-repeat,
  radial-gradient(4px 4px at calc(100% - 11px) calc(100% - 40px),#b39c68,#6b5a33 55%,#2a2112 100%) no-repeat,
  radial-gradient(90% 4% at 0 31%,#0c0602aa,transparent) no-repeat,
  radial-gradient(90% 5% at 100% 62%,#0c0602aa,transparent) no-repeat,
  radial-gradient(140% 10% at 0 66%,#e1b98722,transparent) no-repeat,
  repeating-linear-gradient(91deg,#0000 0 2px,#00000038 2px 4px,#0000 4px 7px),
  repeating-linear-gradient(88deg,#ffd2a00d 0 1px,#0000 1px 9px),
  linear-gradient(90deg,#2c180c,#573219 3%,#683d20 50%,#573219 97%,#2c180c);
 box-shadow:0 24px 70px #000d,inset 0 0 0 1px #97765944,inset 0 0 7px 2px #130f0b}
.panel{position:relative;border:1px solid #79775f44;border-radius:2px;
 background:repeating-linear-gradient(0deg,#fff5e105 0 1px,#0000 1px 3px),var(--panel);
 box-shadow:inset 0 1px #c0b48b1c,0 2px 3px #000a}
/* Sparse wear: a chipped corner and a faint scuff per panel. */
.panel:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
 background:radial-gradient(6px 4px at 97% 6%,#c9b98a1f,#0000),radial-gradient(30px 2px at 18% 88%,#ffffff08,#0000),radial-gradient(120% 120% at 50% 40%,#0000 65%,#0000002e)}

/* ---------- Bridge ---------- */
.bridge{display:grid;grid-template-columns:minmax(200px,1fr) minmax(220px,1.1fr) auto;align-items:center;gap:22px;
 padding:14px 18px;border-top:none;border-radius:0 0 2px 2px;background:repeating-linear-gradient(0deg,#fff5e105 0 1px,#0000 1px 3px),linear-gradient(180deg,#2a2723,#1b1916 60%,#121110)}
.brand{padding:10px 16px 10px;border:1px solid #6d6a5755;background:linear-gradient(180deg,#1d1b18,#151412);box-shadow:inset 0 1px 2px #000c,0 1px #a0987a22}
.brand-title{display:block;font:700 40px/0.9 var(--din);letter-spacing:1.5px;color:#ece4cc;text-decoration:none;text-shadow:0 1px #000,0 0 1px #fff3}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.brand-maker{font:600 10px var(--ui);letter-spacing:6px;color:#bdb69c}
.pocket-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 2px;border:1px solid #8d7a4f88;border-radius:2px;font:700 11px/1 var(--din);letter-spacing:1.6px;color:var(--brass);background:#0d0c0a}
.pocket-tag i{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 6px var(--amber)}
.readout{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 16px;border:1px solid #000;border-radius:2px;
 background:linear-gradient(180deg,#0b0a09,#13110f);box-shadow:inset 0 2px 6px #000,0 1px #a0987a26}
.eyebrow{font:600 9px var(--ui);letter-spacing:2px;color:var(--faint)}
.readout strong{font:700 34px/1 var(--din);letter-spacing:1.5px;color:var(--amber);text-shadow:0 0 12px #f2b33d55;transition:color .3s}
.readout.done strong{color:var(--green);text-shadow:0 0 12px #9ad66f55}
.readout #step-detail{font:12px var(--mono);color:#cfc6a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vu-pair{display:flex;gap:10px}
.vu-frame{width:178px;padding:5px;border:2px solid #363636;border-radius:3px;background:#070707;box-shadow:0 3px 2px #000b,inset 0 0 3px #000,0 1px #98998533;position:relative}
.vu-frame:after{content:"";position:absolute;inset:5px;pointer-events:none;border-radius:2px;background:radial-gradient(120% 110% at 50% 62%,#0000 62%,#5a3a1238),linear-gradient(180deg,#fff2,#0000 30%)}
.vu{display:block;width:100%;height:auto;aspect-ratio:2/1;border-radius:2px}

/* ---------- Body ---------- */
.body{display:grid;grid-template-columns:372px minmax(0,1fr);gap:10px;margin-top:10px}

/* ---------- Finish module (rack faceplate) ---------- */
.finish{display:flex;flex-direction:column;align-items:center;padding:14px 18px 18px;
 background:repeating-linear-gradient(0deg,#fff5e104 0 1px,#0000 1px 3px),linear-gradient(170deg,#2c2e28,#21231e 55%,#181a16);border-color:#7d806a55}
.finish:after{content:"";position:absolute;top:10px;left:10px;width:9px;height:9px;border-radius:50%;
 background:radial-gradient(circle at 40% 35%,#cfc7ad,#6f6a58 60%,#2a2822);box-shadow:calc(100% + 0px) 0 0 transparent}
.plate-head{align-self:stretch;display:flex;justify-content:space-between;align-items:baseline;padding:0 14px 8px 18px;border-bottom:1px solid #a6a07b22}
.plate-title{font:700 22px/1 var(--din);letter-spacing:3px;color:#e5dcc0}
.plate-model{font:600 9px var(--ui);letter-spacing:2px;color:#a9a68c}
.encoder-wrap{position:relative;width:330px;height:300px;margin:14px 0 0;--size:178px}
.steps span{position:absolute;left:50%;top:50%;font:700 12px/1 var(--din);letter-spacing:1.4px;color:#9f9a82;white-space:nowrap;
 transform:translate(-50%,-50%) rotate(var(--a)) translateY(-136px) rotate(calc(-1 * var(--a)));transition:color .25s,text-shadow .25s}
.steps span.on{color:var(--amber);text-shadow:0 0 8px #f2b33d66}
.steps span.done{color:#d6cfb4}
.steps span[data-step="4"].on{color:var(--green);text-shadow:0 0 8px #9ad66f88}
.ring{position:absolute;inset:0}
.ring i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--lamp-off);
 box-shadow:inset 0 1px 1px #000a,0 1px #ffffff14;transform:rotate(var(--a)) translateY(-112px);transition:background .08s,box-shadow .08s}
.ring i.lit{background:var(--amber);box-shadow:0 0 6px #f2b33d,0 0 1px #fff8 inset}
.ring i.lit.full{background:var(--green);box-shadow:0 0 6px #9ad66f,0 0 1px #fff8 inset}
.ring i.tick{width:2px;height:9px;margin:-4.5px -1px;border-radius:1px;background:#8d8a76;box-shadow:none;transform:rotate(var(--a)) translateY(-99px)}
.encoder{position:absolute;left:50%;top:50%;width:var(--size);height:var(--size);margin:calc(var(--size) / -2);border-radius:50%;cursor:grab;touch-action:none;outline:none;
 --angle:-135deg}
.encoder:active{cursor:grabbing}
.encoder-skirt{position:absolute;inset:0;border-radius:50%;
 background:repeating-conic-gradient(from 1deg,#171818 0deg 4deg,#64655b 5deg 6deg,#222321 7deg 10deg);
 border:1px solid #92908466;box-shadow:inset 0 2px 2px #efead955,inset 0 -6px 5px #000d,0 5px 0 #111210,4px 12px 14px #000c,0 0 0 6px #0d0d0c,0 0 0 7px #4b4a4044}
.encoder-cap{position:absolute;inset:21%;border-radius:50%;transform:translateY(-3px);
 background:radial-gradient(ellipse at 33% 20%,#fff3 0,transparent 55%),linear-gradient(135deg,#ddc792,#a58c4e 46%,#60502b);
 border:1px solid #dbd9bd66;box-shadow:inset 2px 2px 2px #fff3,inset -2px -4px 4px #0008,0 3px 0 #4e4122,2px 7px 6px #000b;filter:sepia(.14)}
.encoder-cap:after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid #08090922;
 background:repeating-radial-gradient(circle at 50% 50%,#0000 0 2px,#00000010 2px 3px);box-shadow:inset 1px 1px 0 #fff2}
.encoder-cap i{position:absolute;inset:0;border-radius:50%;transform:rotate(var(--angle));z-index:2}
.encoder-cap i:before{content:"";position:absolute;top:5px;left:calc(50% - 2px);width:4px;height:30%;border-radius:0 0 2px 2px;background:#2a2318;box-shadow:1px 0 #f4e7c488}
.encoder:focus-visible .encoder-skirt{box-shadow:inset 0 2px 2px #efead955,inset 0 -6px 5px #000d,0 5px 0 #111210,4px 12px 14px #000c,0 0 0 6px #0d0d0c,0 0 0 8px var(--brass)}
.encoder-label{margin-top:2px;font:700 15px/1 var(--din);letter-spacing:2.6px;color:#e2d8bb}
.encoder-value{margin-top:6px;font:15px var(--mono);color:var(--ivory-hi)}
.encoder-value span{display:inline-block;min-width:2.2em;text-align:right;font-variant-numeric:tabular-nums}
.encoder-value small{margin-left:5px;color:var(--faint);font-size:11px}
.lamps{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.lamp{display:inline-flex;align-items:center;gap:5px;padding:5px 8px 4px;border:1px solid #0008;border-radius:2px;background:linear-gradient(#24231f,#191815);
 font:700 11px/1 var(--din);letter-spacing:1.2px;color:#8f8a74;box-shadow:inset 0 1px #ffffff10}
.lamp i{width:7px;height:7px;border-radius:50%;background:var(--lamp-off);box-shadow:inset 0 1px 1px #000a;transition:background .2s,box-shadow .2s}
.lamp.on{color:#e0d6ba}.lamp.on i{background:var(--green);box-shadow:0 0 7px var(--green)}

/* ---------- Console strips ---------- */
.console{padding:10px 10px 8px;min-width:0}
.strips{display:grid;grid-template-columns:repeat(8,minmax(0,1fr)) minmax(0,1.35fr);gap:5px;height:100%}
.strip{display:flex;flex-direction:column;align-items:center;min-width:0;padding:8px 3px 7px;border:1px solid #00000099;border-radius:2px;
 background:linear-gradient(90deg,#121110,#24221e 6%,#1e1c19 50%,#24221e 94%,#100f0e);box-shadow:inset 0 1px #ffffff0c}
.strip-num{font:10px var(--mono);color:#a9a48c}
.strip-name{display:flex;align-items:center;gap:4px;max-width:100%;margin-top:1px;font:700 16px/1.05 var(--din);letter-spacing:.6px;color:#ece2c6;white-space:nowrap}
.strip-name:before{content:"";flex:none;width:3px;height:12px;border-radius:1px;background:var(--c,#779fab)}
.strip-knobs{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:8px}
.mini{display:flex;flex-direction:column;align-items:center;gap:2px}
.mini span{font:600 8px var(--ui);letter-spacing:1px;color:#a6a28b}
.knob{position:relative;width:28px;height:28px;border-radius:50%;--angle:0deg;--cap-light:#ddc792;--cap-mid:#a58c4e;--cap-dark:#60502b;
 background:repeating-conic-gradient(from 1deg,#171818 0deg 5deg,#64655b 6deg 8deg,#222321 9deg 15deg);border:1px solid #92908466;
 box-shadow:inset 0 1px 1px #efead955,inset 0 -3px 2px #000d,0 2px 0 #111210,1px 4px 4px #000b}
.knob.blue{--cap-light:#91adb3;--cap-mid:#4e727c;--cap-dark:#233d48}
.knob b{position:absolute;inset:4px;border-radius:50%;transform:translateY(-1.5px);
 background:radial-gradient(ellipse at 33% 20%,#fff2 0,transparent 55%),linear-gradient(135deg,var(--cap-light),var(--cap-mid) 46%,var(--cap-dark));
 border:1px solid #dbd9bd55;box-shadow:inset 1px 1px 1px #fff3,inset -1px -2px 2px #0008,0 1.5px 0 var(--cap-dark)}
.knob b:before{content:"";position:absolute;inset:0;border-radius:50%;transform:rotate(var(--angle));
 background:linear-gradient(#222621,#222621) 50% 1px/2px 36% no-repeat}
.knob.blue b:before{background-image:linear-gradient(#eee5c9,#eee5c9)}
.mini em{font:normal 9px var(--mono);color:#cbc4a6;font-variant-numeric:tabular-nums;white-space:nowrap}
.keys{display:flex;gap:3px;margin-top:7px}
.tag{padding:3px 4px 2px;border:1px solid #000;border-radius:2px;font:700 9px/1 var(--din);letter-spacing:.8px;color:#77735f;background:linear-gradient(#2b2a26,#1a1916);display:flex;align-items:center;gap:3px}
.tag i{width:5px;height:5px;border-radius:50%;background:var(--lamp-off)}
.tag.on{color:#ddd3b6}.tag.on i{background:var(--green);box-shadow:0 0 5px var(--green)}
.fader-bay{position:relative;flex:1;display:flex;justify-content:center;gap:6px;width:100%;min-height:150px;margin-top:9px}
.fader{position:relative;width:34px;height:100%}
.fader-track{position:absolute;left:calc(50% - 4px);top:6px;bottom:6px;width:8px;border-radius:2px;background:#080808;box-shadow:2px 0 #77796755,inset 0 0 3px #000}
.fader-scale{position:absolute;right:-12px;top:6px;bottom:6px;width:12px}
.fader-scale i{position:absolute;left:0;width:4px;height:1px;background:#8d8a76}
.fader-cap{position:absolute;left:calc(50% - 15px);width:30px;height:40px;margin-top:-20px;top:var(--y,50%);border-radius:1px;border:1px solid #777963;
 background:linear-gradient(#d0cdb5 0,#e2ddc5 7%,#939884 12%,#b1b59e 27%,#e0ddbf 48%,#c8c7a9 51%,#9ca58a 77%,#59614f 100%);
 box-shadow:0 5px 3px #000b,1px 0 1px #0009,inset 1px 0 #e9e1bc55;filter:sepia(.2) saturate(.95);will-change:top}
.fader-cap:after{content:"";position:absolute;left:3px;right:3px;top:calc(50% - 1px);height:2px;background:#2b2a24;box-shadow:0 1px #fff4}
.red .fader-cap{background:linear-gradient(#cf7255 0,#dd815d 7%,#7f3427 13%,#b74d34 27%,#d06946 47%,#e09162 50%,#ab422b 73%,#65251d);border-color:#873d29}
.led{position:relative;width:6px;height:calc(100% - 12px);margin-top:6px;border-radius:1px;background:#0a0a09;box-shadow:inset 0 0 2px #000,0 1px #ffffff10;overflow:hidden}
.led i{position:absolute;left:0;right:0;bottom:0;height:var(--h,0%);
 background:linear-gradient(0deg,#6fbf55 0,#9ad66f 62%,#e8d44a 78%,#f2b33d 88%,#e0492c 96%);background-size:100% calc(100% / var(--k,1) );background-position:bottom}
.led:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 2px,#0a0a09 2px 3px)}
.strip-db{margin-top:4px;font:11px var(--mono);color:#e9e0c3;font-variant-numeric:tabular-nums;white-space:nowrap}
.strip-db small{font-size:8px;color:var(--faint)}
.strip.master{background:linear-gradient(90deg,#15130f,#2a2620 6%,#231f1a 50%,#2a2620 94%,#120f0c);border-color:#2b2117}
.strip.master .strip-name{color:#e7b7a0}
.strip.master .strip-name:before{display:none}

/* ---------- Transport ---------- */
.transport{display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;gap:14px;margin-top:10px;padding:10px 14px;border-bottom:none;border-radius:2px 2px 0 0;
 background:repeating-linear-gradient(0deg,#fff5e105 0 1px,#0000 1px 3px),linear-gradient(180deg,#24211d,#181613)}
.key{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border:1px solid #000;border-radius:3px;cursor:pointer;
 background:linear-gradient(#e6dfc8,#c5bea4 60%,#a69f86);color:#2a2319;font:700 15px/1 var(--din);letter-spacing:1.6px;
 box-shadow:inset 0 1px #fff8,inset 0 -2px 2px #0004,0 3px 0 #0b0a09,0 5px 5px #000a;transition:transform .05s,box-shadow .05s,filter .2s}
.key:active,.key.down{transform:translateY(2px);box-shadow:inset 0 1px #fff6,inset 0 -1px 1px #0004,0 1px 0 #0b0a09,0 2px 3px #000a}
.key:disabled{cursor:progress;filter:saturate(.4) brightness(.75)}
.key:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.play{min-width:132px;background:linear-gradient(#a9c98c,#7da463 60%,#5b7e45);color:#13200d}
.play .glyph{width:0;height:0;border-left:13px solid #1b2a12;border-top:8px solid transparent;border-bottom:8px solid transparent}
.play.playing .glyph{width:12px;height:14px;border:none;background:linear-gradient(90deg,#1b2a12 0 4px,#0000 4px 8px,#1b2a12 8px)}
.ab{display:flex;gap:6px}
.ab-key{padding:0 12px;min-width:104px;background:linear-gradient(#3a3833,#26241f 60%,#1c1a17);color:#d8ceb1}
.ab-key b{margin-right:6px;padding:3px 5px 1px;border-radius:2px;background:#0b0a09;color:var(--faint);font-weight:700}
.ab-key.on{background:linear-gradient(#e7d49e,#c9ae6f 60%,#a68b50);color:#2a2319}
.ab-key.on b{color:var(--amber)}
.counter{display:flex;flex-direction:column;gap:3px;padding:6px 14px;border:1px solid #000;border-radius:2px;background:#0b0a09;box-shadow:inset 0 2px 5px #000}
.counter strong{font:24px/1 var(--mono);color:#e9dfc0;letter-spacing:1px;font-variant-numeric:tabular-nums}
.cta{justify-self:end;display:inline-flex;align-items:center;gap:6px;padding:12px 16px;border:1px solid #8d7a4f88;border-radius:3px;text-decoration:none;
 font:600 13px var(--ui);color:#e9dfc2;background:linear-gradient(#2a2620,#1a1814);box-shadow:inset 0 1px #ffffff12,0 2px 3px #000a}
.cta b{color:var(--brass)}
.cta:hover{border-color:var(--brass)}

/* ---------- Overlay (tap to start / errors) ---------- */
.overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:20px;background:#0b0a09b8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:5px}
.overlay[hidden]{display:none}
.overlay-card{max-width:400px;padding:22px 24px;text-align:center}
.overlay-title{margin:0;font:700 26px/1.1 var(--din);letter-spacing:1.4px;color:var(--ivory-hi)}
.overlay-text{margin:10px 0 16px;color:#cfc6a8;line-height:1.5}
.overlay-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.overlay-actions a.key{text-decoration:none}

.credit{max-width:1180px;margin:14px 0 0;padding:0 8px;font-size:11.5px;line-height:1.55;color:#958f78;text-align:center}
.credit a{color:#c9bc94}
.silent-note{display:none}
@supports (-webkit-touch-callout:none){.silent-note{display:inline}}

/* ---------- Tablet ---------- */
@media (max-width:980px){
 .bridge{grid-template-columns:1fr auto;gap:14px}
 .readout{grid-column:1 / -1;order:3}
 .body{grid-template-columns:1fr}
 .finish{padding-bottom:14px}
 .fader-bay{min-height:170px}
 .transport{grid-template-columns:auto auto 1fr}
 .counter{display:none}
}
/* ---------- Phone ---------- */
@media (max-width:620px){
 body{padding:0 0 14px;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
 .chassis{padding:0 9px;border-radius:0 0 4px 4px;
  background:repeating-linear-gradient(91deg,#0000 0 2px,#00000038 2px 4px,#0000 4px 7px),linear-gradient(90deg,#2c180c,#5d351b 4%,#683d20 50%,#5d351b 96%,#2c180c)}
 .bridge{grid-template-columns:1fr;gap:9px;padding:10px 10px 10px;padding-top:max(10px,env(safe-area-inset-top))}
 .brand{display:flex;align-items:center;justify-content:space-between;padding:8px 11px}
 .brand-title{font-size:27px}
 .brand-row{margin:0;gap:8px}
 .brand-maker{display:none}
 .vu-pair{order:2;gap:7px}
 .vu-frame{flex:1;width:auto;padding:3px}
 .readout{order:3;padding:7px 11px;flex-direction:row;align-items:baseline;flex-wrap:wrap;column-gap:10px}
 .readout .eyebrow{display:none}
 .readout strong{font-size:26px}
 .readout #step-detail{flex-basis:100%;font-size:11px}
 .chassis{display:flex;flex-direction:column}
 .body{display:contents}
 .bridge{order:1}.finish{order:2;margin-top:8px}.transport{order:3}.console{order:4;margin-top:8px}
 .transport{margin-top:8px;border-radius:2px}
 .finish{padding:10px 10px 12px}
 .plate-head{padding:0 6px 7px 22px}
 .encoder-wrap{width:310px;height:262px;margin-top:4px;--size:156px}
 .steps span{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-124px) rotate(calc(-1 * var(--a)));font-size:11px}
 .ring i{transform:rotate(var(--a)) translateY(-102px)}
 .ring i.tick{transform:rotate(var(--a)) translateY(-90px)}
 .lamps{margin-top:10px;gap:4px}
 .lamp{padding:4px 6px 3px;font-size:10px}
 .console{padding:6px 5px}
 .strips{gap:2px;grid-template-columns:repeat(8,minmax(0,1fr)) minmax(0,1.5fr)}
 .strip{padding:6px 0 5px}
 .strip-num{font-size:8px}
 .strip-name{font-size:12px;letter-spacing:.2px;gap:2px}
 .strip-name:before{width:2px;height:9px}
 .knob{width:22px;height:22px}
 .knob b{inset:3px}
 .mini span{font-size:7px;letter-spacing:.4px}
 .mini em{font-size:8px}
 .keys{flex-direction:column;gap:2px}
 .tag{padding:2px 3px 1px;font-size:8px}
 .fader-bay{min-height:150px;gap:2px;margin-top:6px}
 .fader{width:22px}
 .fader-cap{width:20px;left:calc(50% - 10px);height:32px;margin-top:-16px}
 .fader-scale{display:none}
 .led{width:4px}
 .strip-db{font-size:9px}
 .strip-db small{display:none}
 .master .fader{width:20px}
 .transport{grid-template-columns:auto 1fr;gap:8px;padding:9px}
 .play{min-width:0;padding:0 14px}
 .ab{justify-content:flex-end}
 .ab-key{min-width:0;flex:1;padding:0 9px;font-size:13px}
 .cta{grid-column:1 / -1;justify-self:stretch;justify-content:center}
 .credit{font-size:11px;padding:0 14px}
}
/* ---------- Tap to play, on the knob until the song first starts ---------- */
.start{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;
 min-height:54px;padding:0 22px;border:1px solid #000;border-radius:28px;cursor:pointer;
 background:linear-gradient(#a9c98c,#7da463 60%,#5b7e45);color:#13200d;font:700 17px/1 var(--din);letter-spacing:1.8px;white-space:nowrap;
 box-shadow:inset 0 1px #fff8,inset 0 -2px 2px #0004,0 3px 0 #0b0a09,0 8px 18px #000c;animation:breathe 2.4s ease-in-out infinite}
.start .glyph{width:0;height:0;border-left:13px solid #1b2a12;border-top:8px solid transparent;border-bottom:8px solid transparent}
.start:disabled{cursor:progress;animation:none;background:linear-gradient(#3a3833,#26241f 60%,#1c1a17);color:#d8ceb1}
.start:disabled .glyph{display:none}
.start:active{transform:translate(-50%,calc(-50% + 2px))}
.start[hidden]{display:none}
@keyframes breathe{50%{box-shadow:inset 0 1px #fff8,inset 0 -2px 2px #0004,0 3px 0 #0b0a09,0 8px 18px #000c,0 0 0 6px #9ad66f33}}
@media (prefers-reduced-motion:reduce){.start{animation:none}.ring i,.lamp i,.steps span{transition:none}}
.steps span[data-step="1"]{margin-left:-10px}.steps span[data-step="3"]{margin-left:10px}