/* Photographed custom faceplate; all 106 MIDI positions remain live DOM controls. */
.launchpad-shell{position:relative;isolation:isolate;width:100%;max-width:600px;aspect-ratio:1;margin:24px auto 30px;border-radius:9px;background:#17121d url('launchpad-faceplate-v1.jpg') center/cover no-repeat;border:1px solid #665a73;border-bottom:6px solid #100d15;box-shadow:0 2px 0 #a69bb32b,inset 0 1px 1px #ffffff55,0 8px 0 #08070b,0 12px 14px #0009,0 30px 65px #000b}
.launchpad-shell::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(128deg,#ffffff0c,transparent 32%,transparent 75%,#0004);box-shadow:inset 0 1px 2px #ffffff3a,inset 2px 0 3px #0008,inset -2px 0 3px #000b;z-index:2}
.launchpad-shell #grid{position:absolute;inset:8.5% 7.5% 6%;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr)) repeat(2,minmax(0,.46fr));gap:clamp(3px,.43vw,5px);padding:0;margin:0;max-width:none;aspect-ratio:auto;border:0;border-radius:0;background:none;box-shadow:none}
.launchpad-shell .pad{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;min-width:0;aspect-ratio:auto;transform:none;border:1px solid #050408;border-top-color:#ffffff2b;border-bottom:2px solid #030305;border-radius:4px;background:linear-gradient(135deg,#ffffff13,transparent 38%,#0005),var(--led,#23202a);box-shadow:inset 0 1px 1px #fff2,inset 0 -3px 5px #0009,0 1px 2px #000d;transition:transform .06s ease,border-color .1s;touch-action:none;overflow:hidden;padding:0}
.launchpad-shell .pad::after{content:'';pointer-events:none;position:absolute;inset:1px;border-radius:3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");opacity:.09;mix-blend-mode:soft-light}
.launchpad-shell .pad.lit{background:linear-gradient(138deg,#ffffff68,#ffffff06 38%,#00000036),radial-gradient(ellipse at 50% 25%,#ffffff22,transparent 75%),var(--led);border-top-color:#ffffff88;border-bottom-color:#0008;box-shadow:inset 0 1px 2px #ffffff80,inset 0 -3px 5px #0005,0 0 9px var(--led-glow),0 1px 2px #000e}
.launchpad-shell .pad.edge{border-radius:3px;transform:none;background:linear-gradient(145deg,#ffffff15,transparent 45%,#0007),var(--led,#17141d);box-shadow:inset 0 1px 1px #ffffff25,inset 0 -2px 3px #000c,0 1px 2px #000b}
.launchpad-shell .pad.edge.lit{background:linear-gradient(145deg,#ffffff32,transparent 60%,#0003),var(--led);box-shadow:inset 0 1px 1px #ffffff50,inset 0 -2px 3px #0008,0 0 6px var(--led-glow)}
.launchpad-shell .pad .cap-mark{position:relative;z-index:1;font:600 clamp(6px,.55vw,9px)/1 system-ui,sans-serif;letter-spacing:.03em;color:#d9d2dfb0;text-shadow:0 1px 1px #000b;pointer-events:none}
.launchpad-shell .pad.lit .cap-mark{color:#100c1ca6;text-shadow:0 1px 0 #ffffff30}
.launchpad-shell .pad:hover{border-color:#b4a7c8}
.launchpad-shell .pad:active{transform:translateY(1px);box-shadow:inset 0 2px 5px #0009,0 0 7px var(--led-glow,transparent)}
.launchpad-shell .pad:focus-visible{outline:2px solid #c0ff62;outline-offset:1px;z-index:3}
.launchpad-shell .pad.off{visibility:hidden}
@media(max-width:760px){.launchpad-shell{max-width:520px;margin:20px auto 28px}.launchpad-shell #grid{gap:3px}.launchpad-shell .pad .cap-mark{font-size:6px}}
@media(prefers-reduced-motion:reduce){.launchpad-shell .pad{transition:none}}