*{box-sizing:border-box}html,body{background:var(--stage);min-height:100%;color:var(--ink);margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}button,a{font:inherit}a{color:inherit;text-decoration:none}.stage{background:linear-gradient(#ffffffc2,#e2e6ede6),radial-gradient(circle at 50% 12%,#ffffffe6,#0000 34rem),#eef0f4;place-items:start center;min-height:100svh;padding:0 18px 66px;display:grid;position:relative;overflow:hidden}.stage:before{pointer-events:none;content:"";filter:blur(.2px);opacity:.22;border:10px solid #1b1f26b8;border-bottom:0;border-radius:50% 50% 0 0;width:min(48vw,520px);height:24svh;position:fixed;top:-18svh;left:50%;transform:translate(-50%)rotate(-7deg)}.instrument{width:min(920px,100vw - 28px);box-shadow:0 34px 70px var(--shadow), 0 10px 24px #262d3a1a, inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #2a303a14;background:linear-gradient(145deg,#ffffff6b,#0000 38%),linear-gradient(#edf0f5,#d3d8e1);border:1px solid #ffffffd1;border-radius:12px;grid-template-rows:auto 1fr;gap:clamp(14px,2.5vw,22px);padding:clamp(16px,2.2vw,24px);display:grid;position:relative}.instrument:before,.instrument:after{z-index:-1;content:"";filter:blur(13px);background:#3136405c;border-radius:999px;position:absolute}.instrument:before{height:38px;bottom:-19px;left:34px;right:34px}.instrument:after{opacity:.18;height:12px;top:-7px;left:20px;right:20px}.deviceTop{grid-template-columns:46px 1fr 46px;align-items:center;gap:18px;min-width:0;display:grid}.knob{aspect-ratio:1;background:radial-gradient(circle at 36% 28%,#ffffffeb,#0000 20%),linear-gradient(145deg,#eef1f5,#bac1ce);border:1px solid #4a52602e;border-radius:50%;width:46px;box-shadow:0 8px 15px #29303b29,inset 0 1px #fffc,inset 0 -6px 10px #50596829}.statusStrip{color:#f6458be0;text-transform:uppercase;white-space:nowrap;background:linear-gradient(90deg,#ffffff85,#0000 18%),linear-gradient(#f9fafc,#d9dee7);border:1px solid #50586621;border-radius:5px;justify-content:space-between;align-items:center;min-width:0;height:46px;padding:0 18px;font-size:11px;line-height:1;display:flex;overflow:hidden;box-shadow:inset 0 1px #ffffffe6,inset 0 -1px #23293214}.deck{grid-template-columns:minmax(62px,.24fr) minmax(0,1fr) minmax(62px,.24fr);align-items:stretch;gap:clamp(13px,1.7vw,18px);min-width:0;display:grid}.sideRail{background:linear-gradient(90deg,#ffffff8f,#0000 42%),linear-gradient(#e9edf3,#cbd2dc);border:1px solid #56607021;border-radius:8px;grid-auto-rows:max-content;justify-items:center;gap:12px;min-width:0;padding:12px 8px;display:grid;box-shadow:inset 0 1px #ffffffd6,inset 0 -1px #2c344014,0 8px 18px #252d3a14}.railKnob{aspect-ratio:1;background:radial-gradient(circle at 36% 28%,#ffffffeb,#0000 18%),linear-gradient(145deg,#f8fafc,#aeb7c5);border:1px solid #404a5a2e;border-radius:50%;width:min(52px,70%);margin-bottom:2px;box-shadow:0 8px 14px #2a313c26,inset 0 1px #ffffffe0,inset 0 -7px 12px #46526333}.railButton,.railTiny{background:linear-gradient(#f7f9fb,#c5ccd7);border:1px solid #4b556524;border-radius:4px;width:min(44px,74%);height:24px;display:block;box-shadow:0 3px #bdc4cf,inset 0 1px #ffffffdb}.railButton.lit{background:radial-gradient(circle at 50% 48%,#f6458b75,#0000 38%),linear-gradient(#f9fbfd,#c6ced8)}.railSlot{background:linear-gradient(90deg,#0000 42%,#22293429 45% 55%,#0000 58%),linear-gradient(#d6dce5,#f7f9fb);border:1px solid #46506021;border-radius:999px;width:min(38px,68%);height:128px;margin:2px 0;display:block;box-shadow:inset 0 2px 9px #28303c1a}.railTiny{height:18px}.railDpad{aspect-ratio:1;background:linear-gradient(145deg,#f9fbfd,#c5ccd6);border:1px solid #4b556524;border-radius:8px;width:min(54px,82%);margin:6px 0;position:relative;box-shadow:0 4px #bdc4cf,inset 0 1px #ffffffdb}.railDpad:before,.railDpad:after{content:"";background:#2127313d;border-radius:999px;width:22px;height:6px;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.railDpad:after{transform:translate(-50%,-50%)rotate(90deg)}.keypad{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(11px,2vw,17px);display:grid}.pad{--accent:#f2d35b;aspect-ratio:1;cursor:pointer;min-width:0;color:var(--ink);background:linear-gradient(145deg, #ffffffdb, #e2e6edb3), var(--pad);touch-action:manipulation;-webkit-user-select:none;user-select:none;border:1px solid #60697829;border-radius:7px;padding:0;transition:transform .11s,box-shadow .11s,filter .11s;position:relative;overflow:hidden;transform:translateY(0);box-shadow:0 8px #c4cad4,0 16px 24px #252d3a24,inset 0 1px #fffffff5,inset 0 -16px 20px #8691a429}.pad:before{z-index:4;pointer-events:none;content:"";border:1px solid #ffffff94;border-radius:5px;position:absolute;inset:8px;box-shadow:inset 0 0 0 1px #2227301c,inset 8px 0 14px #ffffff4d,inset -10px 0 16px #1f263124,inset 0 10px 18px #ffffff29,inset 0 -16px 22px #2128341c}.pad:after{z-index:3;pointer-events:none;content:"";background:linear-gradient(90deg, #ffffff42, transparent 20%, transparent 72%, #181e281a), radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--accent), transparent 74%), transparent 38%), linear-gradient(180deg, #ffffff0f, #ffffff4d);opacity:.38;transition:opacity .11s;position:absolute;inset:0}.pad:hover{filter:brightness(1.02)}.pad:focus-visible{outline-offset:4px;outline:2px solid #f6458bd1}.pad.pressed:after{opacity:.56}.padMedia{background:#e9edf3;border:1px solid #282f3a24;border-radius:5px;display:block;position:absolute;inset:8px;overflow:hidden;box-shadow:0 1px #ffffffe0,inset 0 1px 3px #ffffffa8,inset 10px 0 16px #fff3,inset -12px 0 18px #1a212c2e,inset 0 -12px 20px #1f263129}.padMedia img,.clipVideo{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.padMedia img{opacity:.78;filter:grayscale(.22)contrast(1.02)brightness(1.03)saturate(.86);transform:scale(1.035)}.clipVideo{z-index:2;opacity:0;filter:grayscale(.08)contrast(1.03)brightness(1.02)saturate(.92)}.clipVideo.active{opacity:.92}.padLabel{z-index:5;color:#1b1f2694;text-shadow:0 1px 6px #ffffffb8;text-align:left;text-overflow:ellipsis;text-transform:lowercase;white-space:nowrap;font-size:clamp(9px,1.15vw,11px);font-weight:700;line-height:1.15;position:absolute;bottom:12px;left:14px;right:14px;overflow:hidden}.footer{z-index:6;color:#20242b85;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;font-size:11px;line-height:1;display:grid;position:fixed;bottom:12px;left:16px;right:16px}.byline,.sourceLink,.liveCount{align-items:center;min-width:0;display:inline-flex}.byline{justify-self:start;gap:8px}.avatar{background:linear-gradient(145deg,#fffdf8,#d7d0c7);border:1px solid #353c4824;border-radius:50%;flex:none;place-items:center;width:26px;height:26px;display:grid;overflow:hidden;box-shadow:0 1px 3px #4a41371f,inset 0 1px #ffffffdb}.avatar img{object-fit:cover;width:100%;height:100%}.liveCount{white-space:nowrap;justify-self:center;gap:6px}.analyticsLink{color:#433e389e;line-height:1}.visitorText{min-width:0}.footerDivider{color:#433e3857;margin:0 3px}.powerText{align-items:center;gap:5px;min-width:0;line-height:1;display:inline-flex}.dataFastIcon{object-fit:contain;filter:saturate(.82)contrast(.98)opacity(.82);flex:none;width:12px;height:12px}.liveDot{background:#f6458b;border-radius:999px;width:7px;height:7px;box-shadow:0 0 12px #f6458b94}.sourceLink{text-transform:lowercase;justify-self:end}.byline:hover,.analyticsLink:hover,.sourceLink:hover{color:var(--ink)}@media (max-width:560px){.stage:before{opacity:.13;border-width:7px;width:70vw;height:18svh;top:-7svh}.stage{padding:0 10px 54px}.instrument{border-radius:9px;width:min(100%,430px);padding:11px}.deck{grid-template-columns:1fr}.sideRail{display:none}.deviceTop{grid-template-columns:30px 1fr 30px;gap:9px}.knob,.statusStrip{height:30px}.knob{width:30px}.statusStrip{padding:0 10px;font-size:9px}.keypad{gap:9px}.pad{border-radius:6px;box-shadow:0 6px #c4cad4,0 12px 18px #252d3a21,inset 0 1px #fffffff5,inset 0 -14px 18px #8691a426}.pad:active,.pad.pressed{transform:translateY(4px);box-shadow:0 2px #c4cad4,0 6px 14px #252d3a24,inset 0 1px #ffffffb8,inset 0 10px 22px #5059682b}.padLabel{bottom:8px;left:9px;right:9px}.footer{gap:8px;font-size:10px;bottom:9px;left:10px;right:10px}.avatar{width:23px;height:23px}.dataFastIcon{width:11px;height:11px}}.stage:before{display:none}.instrument{aspect-ratio:1;width:min(960px,100vw - 8px);box-shadow:none;filter:drop-shadow(0 38px 58px #262d3a38)drop-shadow(0 12px 18px #262d3a1f);background:0 0;border:0;border-radius:0;padding:0}.instrument:before,.instrument:after{display:none}.frameImage{z-index:4;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.statusDisplay{z-index:5;color:#ff84b2ad;pointer-events:none;background:radial-gradient(circle at 92%,#ff5a9a24,#0000 9%),linear-gradient(90deg,#ff84b209,#0000 30%),linear-gradient(#050506f7,#010102fc);border:1px solid #ffebe00b;border-radius:7px;grid-template-columns:45% minmax(0,1fr);align-items:center;gap:10px;width:32.6%;height:5.85%;min-height:20px;padding:0 1.75%;display:grid;position:absolute;top:19.72%;left:33.45%;overflow:hidden;box-shadow:inset 0 1px 1px #ffffff0b,inset 0 -1px 12px #000000db,0 1px 1px #ffffff09}.statusDisplay:after{pointer-events:none;content:"";mix-blend-mode:screen;background:repeating-linear-gradient(90deg,#ffffff04 0 1px,#0000 1px 9px),linear-gradient(#ffffff07,#0000 44%,#0000004d);position:absolute;inset:0}.waveform{z-index:1;grid-template-columns:repeat(24,1fr);align-items:center;gap:3px;width:100%;min-width:0;height:54%;display:grid;position:relative}.waveform span{height:var(--level);opacity:.38;transform-origin:50%;background:linear-gradient(#ffe1ebdb,#ff7baaeb);border-radius:999px;min-height:2px;display:block;transform:scaleY(.22);box-shadow:0 0 6px #ff5f9a80,0 0 13px #ff5f9a38}.statusDisplay.playing .waveform span{animation:.76s cubic-bezier(.42,0,.28,1) infinite wavePulse;animation-delay:var(--delay);opacity:.88}.statusFilename{z-index:1;color:#ffbad2cc;text-align:right;text-overflow:ellipsis;text-transform:lowercase;text-shadow:0 0 7px #ff5f9a57;white-space:nowrap;min-width:0;font-size:9px;font-weight:700;line-height:1;position:relative;overflow:hidden}@keyframes wavePulse{0%,to{transform:scaleY(.24)}42%{transform:scaleY(1)}66%{transform:scaleY(.52)}}.keypad{z-index:2;background:linear-gradient(#dde3ecd1,#f6f8fb7a);border-radius:3.8%;gap:clamp(6px,.8vw,11px);width:50.7%;height:51.2%;padding:1.2%;position:absolute;top:32.1%;left:24.7%;box-shadow:inset 0 2px 14px #1b222d29,inset 0 -1px #ffffffa3}.pad{border-radius:8px;box-shadow:0 5px #c4cad4,0 10px 16px #252d3a24,inset 0 1px #fffffff5,inset 0 -12px 18px #8691a429}.pad:active,.pad.pressed{transform:translateY(4px);box-shadow:0 1px #c4cad4,0 5px 12px #252d3a29,inset 0 1px #ffffffb8,inset 0 8px 18px #5059682e}@media (max-width:560px){.stage{padding:0 0 70px}.instrument{--mobile-instrument-size:min(132vw, calc(100svh - 92px), 620px);width:var(--mobile-instrument-size);transform:translateX(calc((100vw - var(--mobile-instrument-size)) / 2));justify-self:center;padding:0}.keypad{gap:7px}.footer{grid-template-columns:minmax(0,.72fr) auto minmax(0,.5fr);gap:4px;font-size:clamp(7px,2.05vw,9px);bottom:10px;left:8px;right:8px}.byline{gap:5px}.byline>span:last-child,.sourceLink{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.liveCount{gap:4px}.footerDivider{margin:0 1px}.powerText{gap:3px}.liveDot{width:6px;height:6px}.avatar{width:22px;height:22px}.dataFastIcon{width:9px;height:9px}}@media (max-height:620px) and (min-width:700px){.footer{font-size:9px;bottom:8px}.avatar{width:22px;height:22px}.liveDot{width:6px;height:6px}.dataFastIcon{width:10px;height:10px}}:root{--ink:#3c3935;--muted:#3c39358f;--hairline:#5d544a29;--stage:#ece8e2;--device:#e9e5de;--device-dark:#cfc7bd;--pad:#f3f0ea;--pad-edge:#d6cec4;--shadow:#4a413733}html,body{background:var(--stage);color:var(--ink)}.stage{background:radial-gradient(circle at 50% 4%,#fffffcf5,#0000 36rem),linear-gradient(#f7f4ef 0%,#ede8e1 46%,#ddd6cd 100%)}.instrument{filter:drop-shadow(22px 42px 54px #53493e33)drop-shadow(8px 14px 18px #544a4021)}.keypad{background:linear-gradient(#e7e2dae6,#f8f6f18a);box-shadow:inset 0 2px 13px #4e44392e,inset 0 -1px #ffffffad}.pad{background:linear-gradient(145deg, #fffdf9eb, #e2dbd1bd), var(--pad);border-color:#655b4f2b;box-shadow:0 5px #c9c1b7,7px 12px 18px #4b413726,inset 0 1px #fffffff5,inset 0 -12px 18px #897e6f2b}.pad:before{border-color:#fffdf7ad;box-shadow:inset 0 0 0 1px #4941381f,inset 8px 0 14px #fffdf852,inset -10px 0 16px #483f3526,inset 0 10px 18px #fffffb2b,inset 0 -16px 22px #51463b1f}.pad:after{background:linear-gradient(90deg, #fffdf847, transparent 20%, transparent 72%, #4940361c), radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--accent), transparent 78%), transparent 38%), linear-gradient(180deg, #fffffa0d, #f5f0e852)}.pad:active,.pad.pressed{box-shadow:0 1px #c9c1b7,4px 6px 12px #4b41372b,inset 0 1px #ffffffbd,inset 0 8px 18px #5f54482e}.padMedia{background:#e9e4dc;border-color:#4a423926;box-shadow:0 1px #fffffae6,inset 0 1px 3px #fffdf8ad,inset 10px 0 16px #fffbf43b,inset -12px 0 18px #42393030,inset 0 -12px 20px #4e44392b}.padMedia img{filter:grayscale(.16)contrast(1.03)brightness(1.02)saturate(.9)sepia(.04)}.clipVideo{filter:grayscale(.04)contrast(1.03)brightness(1.01)saturate(.95)sepia(.03)}.padLabel{color:#302c27e6;text-shadow:0 1px #fffcf6e6,0 0 8px #fffcf6d1;background:linear-gradient(90deg,#f6f1e9b8,#f6f1e961 72%,#0000);border-radius:4px;padding:4px 5px 3px;bottom:9px;left:11px;right:11px}.footer{color:#433e3885}.avatar{color:#433e38;background:linear-gradient(145deg,#fffdf8,#d7d0c7);border-color:#59504526}