:root{--cube:clamp(310px,38vw,560px);--half:calc(var(--cube)/2)}.sampler-page{color:#f7f2e8;isolation:isolate;cursor:grab;background:#171717;min-height:100svh;position:relative;overflow:hidden}.sampler-page:active{cursor:grabbing}.sampler-page button,.sampler-page a,.sampler-page input,.sampler-page select,.sampler-page textarea{cursor:pointer}.sampler-page:before{content:"";z-index:-1;background:radial-gradient(circle at 66% 44%,#2323238c 0,#101010e8 57%,#090909fa 100%),linear-gradient(90deg,#111e 0,#111a 40%,#1116);position:fixed;inset:0}.sampler-project-backgrounds{z-index:-2;pointer-events:none;background:#171717;position:fixed;inset:0;overflow:hidden}.sampler-project-backgrounds>div{opacity:0;will-change:opacity,transform;background-position:50%;background-size:cover;transition:opacity .8s,transform 1.35s;position:absolute;inset:-2%;transform:scale(1.035)}.sampler-project-backgrounds>div.active{opacity:1;transform:scale(1)}.sampler-nav{z-index:20;border-bottom:1px solid #ffffff2b;justify-content:space-between;align-items:center;height:88px;padding:0 clamp(20px,4vw,64px);display:flex;position:relative}.sampler-mark{letter-spacing:-2px;flex-direction:column;font-size:25px;font-style:italic;font-weight:950;line-height:.72;display:flex;transform:skew(-5deg)}.sampler-nav nav{text-transform:uppercase;letter-spacing:.16em;gap:28px;font-size:10px;font-weight:900;display:flex}.sampler-nav nav a:hover{color:#d9ff45}.sampler-nav>button{color:#fff;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff4a;border-radius:999px;padding:11px 16px;font-size:10px;font-weight:900}.sampler-nav>button span{color:#d9ff45;margin-left:7px}.sampler-nav>button span.midi-live:before{content:"";background:#d9ff45;border-radius:50%;width:6px;height:6px;margin-right:6px;display:inline-block;box-shadow:0 0 8px #d9ff45}.sampler-layout{grid-template-columns:minmax(260px,350px) minmax(0,1fr);align-items:center;gap:3vw;width:min(1500px,100% - 8vw);min-height:calc(100svh - 88px);margin:auto;padding:28px 0 42px;display:grid}.sampler-release{z-index:3;align-self:center;position:relative}.sampler-kicker{text-transform:uppercase;letter-spacing:.2em;color:#d9ff45;margin:0 0 20px;font-size:10px;font-weight:900}.sampler-pack-number{border:1px solid #ffffff4a;margin-bottom:18px;padding:7px 9px;font:800 10px/1 monospace;display:inline-block}.sampler-release h1{text-transform:uppercase;letter-spacing:-.07em;overflow-wrap:anywhere;margin:0 0 14px;font-size:clamp(48px,5.5vw,86px);line-height:.82;animation:.48s both project-title-in}@keyframes project-title-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.sampler-artist{color:#ff704f;margin:0 0 24px;font:italic 400 22px/1 Georgia,serif}.sampler-description{color:#d5d0c6;max-width:34ch;font-size:14px;line-height:1.6}.sampler-artwork{aspect-ratio:1;object-fit:cover;border:1px solid #fff5;width:106px;margin:14px 0;box-shadow:9px 9px #d9ff45}.sampler-release-link{text-transform:uppercase;letter-spacing:.14em;border-bottom:1px solid #d9ff45;width:max-content;margin-top:20px;padding-bottom:5px;font-size:10px;font-weight:900;display:block}.sampler-instrument{flex-direction:column;align-items:center;min-width:0;display:flex}.sampler-status{text-transform:uppercase;letter-spacing:.14em;color:#aaa;justify-content:space-between;gap:12px;width:min(690px,100%);padding:0 10px 10px;font:800 9px/1 Arial;display:flex}.sampler-status span{white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:8px;min-width:0;display:flex;overflow:hidden}.sampler-status .midi-online{color:#d9ff45}.sampler-status i,.controller-state i{background:#d9ff45;border-radius:50%;flex:none;width:7px;height:7px;box-shadow:0 0 10px #d9ff45}.sampler-status strong{color:#f7f2e8;white-space:nowrap}.cube-stage{width:100%;height:calc(var(--cube) + 48px);perspective:1300px;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;place-items:center;display:grid;position:relative}.cube-stage:active{cursor:grabbing}.sampler-cube{width:var(--cube);height:var(--cube);transform-style:preserve-3d;will-change:transform;transition:transform .58s cubic-bezier(.18,.78,.22,1);position:relative}.cube-stage:active .sampler-cube{transition:none}.cube-shadow{width:calc(var(--cube)*.82);filter:blur(25px);opacity:.65;height:80px;transform:translateY(calc(var(--cube)*.48)) rotateX(72deg);background:#000;border-radius:50%;position:absolute}.cube-face{width:100%;height:100%;box-shadow:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:none;transform-style:preserve-3d;background:0 0;border:0;padding:clamp(3px,.55vw,8px);position:absolute}.cube-face.selected{pointer-events:auto}.cube-face.front{transform:translateZ(var(--half))}.cube-face.back{transform:rotateY(180deg) translateZ(var(--half))}.cube-face.right{transform:rotateY(90deg) translateZ(var(--half))}.cube-face.left{transform:rotateY(-90deg) translateZ(var(--half))}.cube-face.top{transform:rotateX(90deg) translateZ(var(--half))}.cube-face.bottom{transform:rotateX(-90deg) translateZ(var(--half))}.face-0{--face:#d9ff45;--pad:#667c45;--pad-dark:#29331c}.face-1{--face:#ff704f;--pad:#96513f;--pad-dark:#412118}.face-2{--face:#638dff;--pad:#4968a6;--pad-dark:#1d2944}.face-3{--face:#fc8fbd;--pad:#9b5875;--pad-dark:#402432}.face-4{--face:#eac447;--pad:#887638;--pad-dark:#393017}.face-5{--face:#a885ff;--pad:#685694;--pad-dark:#2c243f}.face-pads{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.05vw,15px);height:100%;display:grid;overflow:visible}.sampler-pad{background:linear-gradient(145deg,#ffffff4f 0,var(--pad) 18%,var(--pad-dark) 100%);color:#fff;cursor:pointer;min-width:0;min-height:0;transform-style:preserve-3d;border:2px solid #ffffff24;border-radius:clamp(3px,.45vw,7px);transition:transform 70ms,box-shadow 70ms,filter .12s;position:relative;overflow:hidden;transform:translateZ(0);box-shadow:inset 4px 4px 7px #ffffff24,inset -7px -8px 12px #0009,4px 4px #090909,8px 10px 18px #000b}.sampler-pad:before{content:"";border:1px solid #ffffff17;border-radius:calc(clamp(3px,.45vw,7px) - 1px);position:absolute;inset:5px;box-shadow:inset 0 0 14px #0005}.sampler-pad:hover{filter:brightness(1.22);transform:translateZ(4px)}.sampler-pad.is-loaded:after{content:"";background:var(--face);width:6px;height:6px;box-shadow:0 0 10px var(--face);border-radius:50%;position:absolute;top:8px;right:8px}.sampler-pad.is-pressed{box-shadow:inset 1px 1px 18px var(--face),inset -2px -2px 8px #0007,1px 1px 0 #090909;filter:brightness(1.75);transform:translate(4px,4px)scale(.97)}.sampler-pad span{color:#ffffff9c;font:700 8px/1 monospace;position:absolute;top:8px;left:9px}.sampler-pad kbd{color:var(--face);background:#0004;border:0;border-radius:2px;padding:3px 5px;font:800 7px/1 Arial;position:absolute;bottom:7px;right:8px}.sampler-pad em{text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;text-overflow:ellipsis;color:#ffffffc9;font:700 clamp(6px,.62vw,9px)/1.05 Arial;position:absolute;bottom:9px;left:8px;right:30px;overflow:hidden}.sampler-console{z-index:6;background:#101010f2;border:1px solid #ffffff30;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;width:min(690px,100%);min-height:58px;padding:10px 13px;display:grid;position:relative;box-shadow:0 12px 30px #0008}.face-selector{gap:5px;display:flex}.face-selector button{color:#aaa;cursor:pointer;background:#2c2c2c;border:1px solid #ffffff28;width:31px;height:31px;font:700 9px monospace}.face-selector button.active{color:#111;background:#d9ff45;box-shadow:0 0 12px #d9ff4588}.volume-control{text-transform:uppercase;letter-spacing:.12em;color:#aaa;grid-template-columns:auto 1fr 30px;align-items:center;gap:11px;font-size:8px;font-weight:900;display:grid}.volume-control input{accent-color:#d9ff45;width:100%}.volume-control b{color:#fff;font-family:monospace}.control-button{color:#111;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;background:#ff704f;border:0;padding:11px 14px;font-size:8px;font-weight:950}.sampler-hint{text-transform:uppercase;letter-spacing:.16em;color:#888;margin:12px 0 0;font-size:8px;font-weight:800}.mapping-backdrop,.quick-map-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:50;background:#000c;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.mapping-panel,.quick-map-panel{color:#151515;background:#efeadf;border:1px solid #111;width:min(760px,100%);max-height:min(880px,94svh);padding:clamp(22px,4vw,42px);overflow:auto;box-shadow:16px 16px #d9ff45}.mapping-panel header,.quick-map-panel header{justify-content:space-between;align-items:start;display:flex}.mapping-panel h2,.quick-map-panel h2{text-transform:uppercase;letter-spacing:-.06em;margin:0;font-size:clamp(36px,6vw,64px);line-height:.85}.mapping-panel header>button,.quick-map-panel header>button{cursor:pointer;background:0 0;border:0;font-size:34px}.mapping-panel>p,.quick-map-panel>p{max-width:58ch;font-size:13px;line-height:1.5}.mapping-panel .sampler-kicker,.quick-map-panel .sampler-kicker{color:#cc3d22}.controller-state{text-transform:uppercase;letter-spacing:.1em;border-top:1px solid;align-items:center;gap:8px;padding:12px 0;font-size:9px;font-weight:900;display:flex}.controller-state i{box-shadow:none;background:#888}.controller-state i.online{background:#32ad63;box-shadow:0 0 8px #32ad63}.midi-device-panel{background:#e4ded2;border:1px solid #aaa;margin:18px 0;padding:0 14px 13px}.midi-device-panel .controller-state{border:0;border-bottom:1px solid #aaa}.midi-device-panel .controller-state strong{flex:1}.midi-device-panel .controller-state button{text-transform:uppercase;cursor:pointer;background:#fff;border:1px solid;padding:6px 9px;font-size:8px;font-weight:900}.midi-device-names{flex-wrap:wrap;gap:5px;margin:10px 0;display:flex}.midi-device-names span{color:#d9ff45;text-transform:uppercase;letter-spacing:.08em;background:#151515;padding:6px 8px;font-size:8px;font-weight:900}.midi-profile-controls{grid-template-columns:1fr auto;align-items:end;gap:15px;display:grid}.midi-profile-controls>label:first-child{gap:5px;display:grid}.midi-profile-controls label>span{text-transform:uppercase;letter-spacing:.1em;font-size:8px;font-weight:900}.midi-profile-controls select{background:#fff;border:1px solid #999;height:34px;padding:0 8px;font:700 10px Arial}.velocity-toggle{align-items:center;gap:7px;min-height:34px;display:flex}.velocity-toggle input{accent-color:#151515}.midi-help{color:#5c574f;margin:10px 0 0!important;font-size:10px!important}.midi-learn-banner{color:#d9ff45;text-transform:uppercase;letter-spacing:.08em;background:#151515;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;padding:12px 14px;font-size:9px;font-weight:900;animation:.8s infinite alternate pulse;display:flex}.midi-learn-banner button{color:#d9ff45;cursor:pointer;background:0 0;border:1px solid #d9ff45;padding:5px 8px}.midi-notice{color:#151515;background:#d9ff45;padding:9px 11px;font-weight:800;margin:0 0 12px!important;font-size:10px!important}.mapping-grid{grid-template-columns:1fr;gap:6px;display:grid}.mapping-row{grid-template-columns:24px minmax(58px,.8fr) minmax(90px,1fr) minmax(92px,1.15fr) 30px;align-items:center;gap:5px;display:grid}.mapping-row strong{font:700 10px monospace}.mapping-row button{text-transform:uppercase;cursor:pointer;background:#fff;border:1px solid #aaa;height:34px;font:800 9px Arial}.mapping-row button:disabled{opacity:.42;cursor:not-allowed}.mapping-row .midi-map-button{background:#f4f0e8;border-color:#666}.mapping-row .midi-clear{font-size:16px}.mapping-row button.listening,.quick-map-controls button.listening{color:#d9ff45;background:#151515;animation:.8s infinite alternate pulse}@keyframes pulse{to{opacity:.65}}.mapping-panel footer,.quick-map-panel footer{border-top:1px solid;justify-content:space-between;gap:12px;margin-top:24px;padding-top:18px;display:flex}.mapping-panel footer>div{flex-wrap:wrap;gap:6px;display:flex}.mapping-panel footer button,.quick-map-panel footer button{text-transform:uppercase;cursor:pointer;background:0 0;border:1px solid;padding:11px 16px;font-size:9px;font-weight:900}.mapping-panel footer .mapping-done,.quick-map-panel footer .mapping-done{color:#fff;background:#151515}.quick-map-panel{width:min(620px,100%);box-shadow:14px 14px #ff704f}.quick-map-controls{grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0 10px;display:grid}.quick-map-controls button{cursor:pointer;background:#fff;border:1px solid #aaa;flex-direction:column;justify-content:center;align-items:center;gap:9px;min-height:105px;display:flex}.quick-map-controls small{text-transform:uppercase;letter-spacing:.15em;color:#777;font-size:8px;font-weight:900}.quick-map-controls strong{text-transform:uppercase;font-size:16px}.clear-midi-assignment{text-transform:uppercase;cursor:pointer;background:0 0;border:0;border-bottom:1px solid;padding:4px 0;font-size:8px;font-weight:900}@media (max-width:900px){.sampler-page{overflow:auto}.sampler-layout{grid-template-columns:1fr;gap:10px;width:min(100% - 28px,700px);padding-top:40px}.sampler-release{grid-template-columns:1fr auto;column-gap:18px;display:grid}.sampler-release>:not(.sampler-artwork){grid-column:1}.sampler-release h1{font-size:52px}.sampler-artwork{grid-area:1/2/7;width:90px;margin:0 9px 0 0}.sampler-description{max-width:60ch}.sampler-instrument{margin-top:20px}.sampler-nav nav{display:none}}@media (max-width:600px){:root{--cube:min(82vw,390px)}.sampler-nav{height:72px}.sampler-layout{min-height:calc(100svh - 72px);padding-top:28px}.sampler-release{display:block}.sampler-release h1{font-size:45px}.sampler-artwork{float:right;width:75px;margin:-95px 8px 10px 15px}.cube-stage{height:calc(var(--cube) + 25px)}.sampler-console{grid-template-columns:1fr auto;gap:10px}.face-selector{grid-column:1/3;justify-content:center}.face-selector button{width:38px}.volume-control{min-width:0}.sampler-status span:nth-child(2){display:none}.midi-profile-controls{grid-template-columns:1fr}.mapping-row{grid-template-columns:20px 1fr 1.3fr 30px}.mapping-row .midi-map-button{grid-column:2/4}.mapping-panel footer{align-items:flex-end}.sampler-pad em{display:none}.sampler-pad kbd{bottom:5px;right:6px}.sampler-hint{text-align:center}.quick-map-controls{grid-template-columns:1fr}.quick-map-controls button{min-height:78px}}