/* sampler.css — SP-1998 Sampler (original design, MPC-inspired hardware look) */
.g-sampler{position:relative;background:linear-gradient(#55585d,#2b2d31);border:2px solid #15161a;border-radius:4px!important;box-shadow:inset 0 1px 0 #777}
.g-sampler::before{content:"";position:absolute;right:4px;top:5px;width:20px;height:20px;background:
 linear-gradient(#c33,#c33) 0 0/9px 9px no-repeat,linear-gradient(#999,#999) 11px 0/9px 9px no-repeat,linear-gradient(#999,#999) 0 11px/9px 9px no-repeat,linear-gradient(#999,#999) 11px 11px/9px 9px no-repeat}
.g-sampler::after{content:"";position:absolute;left:4px;top:6px;width:10px;height:6px;background:#9fd96a;box-shadow:0 0 3px #9fd96a}
.win .body.sp1{position:relative;overflow:hidden;background:#1b1c1f;outline:none;margin:2px}
.sp-dev{position:absolute;left:0;top:0;width:660px;height:430px;transform-origin:0 0;box-sizing:border-box;padding:10px 12px;
 background:linear-gradient(160deg,#4a4d52,#3a3c40 40%,#303236);font:10px Helvetica,Arial,sans-serif;color:#d8d8d8;user-select:none;-webkit-user-select:none;
 box-shadow:inset 0 0 0 1px #5d6066,inset 0 2px 0 #6a6d72;border-radius:6px;touch-action:none}
.sp-top{display:flex;gap:12px;height:92px;align-items:center}
.sp-brand{width:150px}.sp-logo{font:italic 900 26px/1 'Arial Black',Helvetica,sans-serif;letter-spacing:-1px;color:#e9e9e9;text-shadow:0 1px 0 #000}
.sp-sub{font-size:7px;letter-spacing:1px;color:#aaa;margin-top:3px}
.sp-scr{display:flex;gap:6px;margin-top:10px}.sp-scr span{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#888,#222)}
.sp-lcd{width:250px;height:80px;box-sizing:border-box;padding:4px 6px;background:linear-gradient(#a8c66c,#8fb257);color:#1b2a0c;font:10.5px/13px 'Courier New',monospace;
 border:3px solid #1a1b1d;border-radius:3px;box-shadow:inset 0 0 8px rgba(0,0,0,.45),0 1px 0 #666;overflow:hidden}
.sp-lcd>div{white-space:pre;overflow:hidden}
.sp-lcd b{font-weight:bold}.sp-lcd .bar{letter-spacing:1px}.sp-lcd .msg{font-weight:bold}
.sp-knobs{display:flex;gap:10px}.sp-knob{display:flex;flex-direction:column;align-items:center;width:46px}
.sp-knob .kc{width:34px;height:34px;border-radius:50%;cursor:ns-resize;position:relative;touch-action:none;
 background:radial-gradient(circle at 40% 30%,#6c6f74,#232427 70%);box-shadow:0 2px 3px rgba(0,0,0,.7),0 0 0 3px #26282b,0 0 0 4px #555}
.sp-knob .kp{position:absolute;left:50%;top:3px;width:3px;height:11px;margin-left:-1.5px;background:#f2f2f2;border-radius:2px}
.sp-knob b{font-size:8px;letter-spacing:1px;margin-top:7px;color:#ccc}.sp-knob i{font:9px 'Courier New',monospace;color:#ffb347;font-style:normal}
.sp-mid{display:flex;gap:16px;margin-top:6px;height:268px}
.sp-left{width:300px;display:flex;flex-direction:column;gap:8px}
.sp-padk{justify-content:space-between;padding:4px 6px;background:rgba(0,0,0,.15);border-radius:4px}
.sp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.sp-btn{font:bold 8.5px Helvetica,Arial,sans-serif;color:#e6e6e6;background:linear-gradient(#5a5d62,#3b3d41);border:1px solid #1a1b1e;border-radius:3px;
 height:24px;padding:0 2px;cursor:pointer;box-shadow:0 2px 0 #18191b,inset 0 1px 0 #77797d;letter-spacing:.3px;white-space:nowrap}
.sp-btn:active{transform:translateY(1px);box-shadow:0 1px 0 #18191b}
.sp-btn.on{color:#1a1a1a;background:linear-gradient(#ffcf6a,#f0a020);box-shadow:0 2px 0 #18191b,0 0 6px #f0a020}
.sp-trans{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:auto}
.sp-trans .sp-btn{height:32px;font-size:9.5px}.sp-rec .led{display:inline-block;width:6px;height:6px;border-radius:50%;background:#511;margin-right:4px;vertical-align:1px}
.sp-rec.on{background:linear-gradient(#5a5d62,#3b3d41);color:#fff}.sp-rec.on .led{background:#ff3030;box-shadow:0 0 6px #f22}
.sp-play.on{background:linear-gradient(#7fe07a,#3a9d3a);color:#0b1f0b;box-shadow:0 2px 0 #18191b,0 0 6px #5c5}
.sp-pads{display:grid;grid-template-columns:repeat(4,62px);grid-auto-rows:62px;gap:6px;padding:6px;background:#222326;border-radius:6px;box-shadow:inset 0 2px 6px #000}
.sp-pad{--lv:1;position:relative;border-radius:7px;cursor:pointer;touch-action:none;background:linear-gradient(#8a8d91,#6d7074);
 box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.18),0 2px 2px #000;transition:background .12s,box-shadow .12s}
.sp-pad em{position:absolute;left:4px;bottom:3px;font:bold 7.5px Helvetica;color:#2a2b2d;font-style:normal;max-width:56px;overflow:hidden;white-space:nowrap}
.sp-pad span{position:absolute;right:5px;top:3px;font:bold 9px 'Courier New',monospace;color:#3a3b3e}
.sp-pad u{position:absolute;left:5px;top:3px;font:8px Helvetica;color:#3d3e41;text-decoration:none}
.sp-pad.has::after{content:"";position:absolute;right:5px;bottom:5px;width:5px;height:5px;border-radius:50%;background:#ffb000;box-shadow:0 0 3px #ffb000}
.sp-pad.sel{outline:2px solid #ffb347;outline-offset:1px}.sp-pad.m{filter:brightness(.6)}
.sp-pad.hit{transition:none;background:radial-gradient(circle at 50% 45%,rgba(255,236,190,var(--lv)),rgba(255,90,30,var(--lv)) 60%,#8a3a20);
 box-shadow:0 0 calc(18px*var(--lv)) rgba(255,110,40,.9),inset 0 0 6px rgba(255,255,255,.5)}
.sp-pad.hit em,.sp-pad.hit span,.sp-pad.hit u{color:#300}
.sp-steps{display:flex;gap:4px;margin-top:8px;align-items:center;height:30px}
.sp-pg{width:58px;height:26px}
.sp-step{flex:1;height:24px;border-radius:3px;background:linear-gradient(#55585c,#3d3f43);border:1px solid #1b1c1e;cursor:pointer;position:relative}
.sp-step.q{border-color:#777}
.sp-step.on{background:linear-gradient(#ff8a4a,#d14a12);box-shadow:0 0 5px #e65a1a}.sp-step.acc{background:linear-gradient(#ffd26a,#ff7a12)}
.sp-step.ph{outline:2px solid #8f6;outline-offset:-2px}
.sp-smpl{position:absolute;left:12px;right:12px;top:100px;bottom:44px;background:#26282b;border:1px solid #111;border-radius:6px;padding:8px;box-shadow:0 6px 20px #000;z-index:2}
.sp-sh{font:bold 10px Helvetica;color:#eee;margin-bottom:6px}.sp-st{color:#ffb347;font:10px 'Courier New',monospace;margin-left:8px}
.sp-smpl canvas{width:100%;height:130px;display:block;border:2px solid #111;border-radius:3px;cursor:ew-resize;touch-action:none}
.sp-sb{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.sp-sb .sp-btn{padding:0 8px}
.sp-hint{margin-top:8px;color:#999;font-size:9px}