.sampler{--vs-body:#e8eef0;--vs-body-2:#dce5e9;--vs-key:#f8fafb;--vs-key-2:#edf2f5;--vs-line:#c5d2d8;--vs-line-2:#aebfc8;--vs-ink:#293e4b;--vs-hot:#597b8c;--vs-led:#698c88;--vs-slice:rgba(89,123,140,.10);--vs-sel:rgba(89,123,140,.26);--vs-wavebg:#f8fafb;--vs-edge:#8fa6b3;border-radius:16px;overflow:hidden}
.sampler .vs-panel{padding:22px}.sampler .vs-bar{background:#dce5ea}.sampler .vs-panel__title{font-size:17px}.sampler .vs-fine{line-height:1.6}.sampler .vs-source{margin-top:14px}.sampler-origin{padding:12px 15px;border-radius:10px;background:#f7fafb;line-height:1.5;overflow-wrap:anywhere}.sampler-origin.is-error{color:#972e38;background:#fff0f1}
.sampler-pedals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:740px;margin:20px 0}.sampler-pedal{position:relative;border:1px solid #aebfc8;border-radius:16px;padding:22px;background:#d9e8e9;box-shadow:inset 0 2px 0 #ffffffb3,0 4px 0 #afc1c7}.sampler-pedal--reverb{background:#e3deec;border-color:#bdb3ce;box-shadow:inset 0 2px 0 #ffffffb3,0 4px 0 #c4bad2}.sampler-pedal h3{font-size:25px;margin:6px 0 18px;letter-spacing:-.03em}.sampler-pedal .eyebrow{font-size:10px}.sampler-pedal label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin:15px 0}.sampler-pedal input[type=range]{width:100%;accent-color:#3f6576;min-height:28px}.sampler-pedal select{width:100%;min-height:40px;background:#ffffffb3;border:1px solid #adbcc6;border-radius:8px;padding:8px}.sampler-pedal .sampler-switch{justify-content:flex-start;border-bottom:1px solid #293e4b26;padding-bottom:12px}.sampler-switch input{width:18px;height:18px;accent-color:#466f65}.sampler #sampler-export-mode{min-height:42px;max-width:340px;margin-bottom:12px}.sampler .vs-export{margin-top:18px}.sampler .vs-wavewrap{border-radius:10px}.sampler .vs-bank{gap:8px}.sampler .vs-btn{border-radius:7px}.sampler #vs-wave-help{max-width:850px}.sampler .vs-panel--fold summary{cursor:pointer;font-size:16px;font-weight:600;padding:8px 0}.sampler .vs-panel--fold[open] summary{margin-bottom:16px}
@media(max-width:600px){.sampler-pedals{grid-template-columns:1fr;gap:18px}.sampler .vs-panel{padding:16px}.sampler .vs-bar{position:static}.sampler .vs-flow{flex-wrap:wrap}.sampler input:not([type=range]):not([type=checkbox]),.sampler select{font-size:16px}.sampler-pedal{padding:18px}}
.sampler-slice-details{padding:12px 0;border-bottom:1px solid #c5d2d8;margin-bottom:16px}.sampler-slice-details summary{cursor:pointer;font-weight:600;margin-bottom:12px}.sampler-pedal input[type=range]{background:transparent!important;padding:0;box-shadow:none}.sampler-pedal input[type=range]::-webkit-slider-runnable-track{background:#9cadb955;border-radius:6px;height:6px}.sampler-pedal input[type=range]::-webkit-slider-thumb{background:#486d7a!important}.sampler .vs-export__pat[hidden]{display:none}
/* Hardware controls share the Rhythm Composer's warm casing and orange LEDs. */
.sampler-pedals{max-width:840px;align-items:stretch}.sampler-pedal{background:#e7e3d9;border:1px solid #a9a291;border-radius:7px;padding:24px 18px 18px;color:#25282c;box-shadow:inset 0 2px 0 #fff9,0 5px 0 #bdb6a6,0 9px 18px #25282c18;display:flex;flex-direction:column}.sampler-pedal--reverb{background:#ddd8cb;border-color:#a9a291}.sampler-pedal:before,.sampler-pedal:after{content:'⊖';position:absolute;top:9px;color:#8b887d;font-size:13px}.sampler-pedal:before{left:9px}.sampler-pedal:after{right:9px}.sampler-pedal h3{font-size:28px;margin:5px 0 24px;text-transform:uppercase;letter-spacing:.08em}.sampler-pedal .eyebrow{color:#666257;font-size:10px}.sampler-knobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start;min-height:150px}.sampler-knobs--reverb{grid-template-columns:1.5fr 1fr}.sampler-pedal label{display:block;text-align:center;margin:0 0 14px;font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:#3a3e44}.sampler-dial{position:relative;width:66px;height:66px;margin:0 auto 12px;border:5px solid #bdb6a6;border-radius:50%;background:repeating-conic-gradient(#303338 0deg 9deg,#25282c 9deg 18deg);box-shadow:0 4px 5px #0004,inset 0 2px 2px #fff4;touch-action:none;cursor:ns-resize;outline-offset:5px}.sampler-dial span{position:absolute;inset:5px;border-radius:50%;background:linear-gradient(140deg,#474b50,#22252a);transform:rotate(var(--rotation,-135deg));box-shadow:inset 0 1px 2px #fff2}.sampler-dial span:after{content:'';position:absolute;top:3px;left:calc(50% - 2px);height:14px;width:4px;background:#f4f1e9;border-radius:1px}.sampler-dial:focus-visible{outline:3px solid #62517c}.sampler-value{display:flex;align-items:center;justify-content:center;gap:3px;font:11px ui-monospace,monospace;color:#625d52}.sampler .sampler-value input{width:54px!important;min-width:0;min-height:28px!important;padding:3px!important;font:12px ui-monospace,monospace!important;text-align:center;border:1px solid #bdb6a6;background:#f4f1e9;border-radius:3px;color:#25282c;box-shadow:inset 0 1px 2px #0001}.sampler-room{padding:0 4px}.sampler-room select{margin:12px 0 15px;width:100%;font-size:12px;border-radius:3px;border-color:#a9a291;background:#f4f1e9;color:#25282c;min-height:42px;padding:7px}.sampler-room__caption{display:block;text-align:center;font:9px ui-monospace,monospace;letter-spacing:.04em;color:#777063}.sampler .sampler-stomp{display:flex;flex-direction:column;align-items:center;gap:10px;align-self:center;margin:16px 0 0;padding:8px 22px;border:0;background:transparent;color:#625d52;box-shadow:none;cursor:pointer;font:10px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em}.sampler-stomp i{width:8px;height:8px;border:1px solid #857a65;border-radius:50%;background:#857a65;box-shadow:inset 0 1px 2px #0005}.sampler-stomp[aria-pressed=true] i{background:#e0501e;border-color:#bb481e;box-shadow:0 0 7px #e0501e99}.sampler-stomp__metal{display:block;width:34px;height:34px;border:5px solid #a8aaa6;border-radius:50%;background:linear-gradient(125deg,#f4f4ec,#a3a7a3 60%,#d6d8d2);box-shadow:0 3px 0 #797d79,0 4px 5px #0004,inset 0 1px 2px #fff}.sampler-stomp:active .sampler-stomp__metal{transform:translateY(2px);box-shadow:0 1px 0 #797d79}.sampler .vs-pro-tag,.sampler .vs-pro-offer .vs-pro-tag{display:inline-block;background:#62517c;color:#fff;font-size:10px;line-height:1.3;padding:4px 7px;border-radius:4px;vertical-align:middle;letter-spacing:.02em}.sampler #pro-buy{background:#62517c;color:#fff;border-color:#62517c;font-size:12px;padding:8px 12px;min-height:34px}
@media(max-width:600px){.sampler .sampler-value input{font-size:16px!important;width:62px!important}.sampler-pedal{padding:24px 14px 16px}.sampler-room select{font-size:16px}.sampler-knobs{gap:6px}}
/* Supplied grain artwork sits behind the controls. */
.sampler-pedal{isolation:isolate;overflow:hidden}.sampler-pedal__texture{position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/assets/sampler/delay-grain.jpg') center/cover;opacity:.22}.sampler-pedal--reverb .sampler-pedal__texture{background-image:url('/assets/sampler/reverb-grain.jpg');opacity:.18}