.studio-overlay{position:fixed;inset:0;z-index:90;background:#08060dc9;display:grid;place-items:center;padding:18px;box-sizing:border-box;backdrop-filter:blur(4px)}
.studio-panel,.studio-piano{font:15px Arial,sans-serif;color:#eee9e0;background:#1b1723;border:1px solid #76677e;border-radius:14px;box-shadow:0 18px 80px #0008;padding:22px;box-sizing:border-box}
.studio-panel{width:min(900px,100%);max-height:92dvh;overflow:auto;overscroll-behavior:contain}
.studio-panel button,.studio-piano button{font:inherit;color:inherit;background:#302936;border:1px solid #6d5e76;border-radius:6px;padding:9px 13px;cursor:pointer;touch-action:manipulation}
.studio-panel button:hover,.studio-piano button:hover{background:#55425e}.studio-panel button:focus-visible,.studio-piano button:focus-visible,.studio-panel input:focus-visible,.studio-piano input:focus-visible{outline:3px solid #e4c573;outline-offset:3px}
.studio-panel button[aria-pressed=true],.studio-piano button[aria-pressed=true]{background:#c6a06e;color:#17121c;border-color:#f3d7a4}
.studio-heading,.studio-tabs,.studio-transport,.studio-voices,.studio-preview{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}.studio-heading{justify-content:space-between}.studio-heading h2{font:24px Arial,sans-serif;margin:0}.studio-transport input{width:64px;font:inherit;padding:7px;background:#29222f;color:#fff;border:1px solid #76677e;border-radius:4px}.studio-transport>span,.studio-hint{font-size:13px;color:#c0b4c7;line-height:1.5}
.studio-sound{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin:12px 0 22px}.studio-voices{margin:0;max-width:220px}.studio-knob{position:relative;display:grid;justify-items:center;gap:6px;font-size:12px}.studio-knob input{appearance:none;-webkit-appearance:none;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#706375,#211a28 75%);border:2px solid #94849d;cursor:ew-resize;touch-action:pan-y}.studio-knob input::-webkit-slider-thumb{appearance:none;width:6px;height:21px;background:#edd7a7;border-radius:4px;transform:rotate(var(--turn));transform-origin:center 23px}.studio-knob input::-moz-range-thumb{width:6px;height:21px;background:#edd7a7;border:0;transform:rotate(var(--turn));transform-origin:center 23px}.studio-knob input::-moz-range-track{background:transparent}.studio-knob output{color:#c9bdcd;min-width:62px;text-align:center}
.studio-grid{display:grid;grid-template-columns:60px repeat(16,minmax(22px,1fr));gap:5px;overflow-x:auto;padding:5px 4px 14px;margin-bottom:12px}.studio-grid button{height:32px;min-width:22px;padding:0;border-radius:4px}.studio-grid button:nth-child(4n+2){border-left:2px solid #b6a3c1}.studio-grid button.studio-current{box-shadow:inset 0 0 0 2px #f5e4bb}.studio-count{text-align:center;font-size:10px;color:#b1a5ba}.studio-row-name{align-self:center;font-size:12px}.studio-sample{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:12px 0;padding:10px;background:#27202e;border-radius:6px}.studio-sample input{max-width:260px;font:12px Arial,sans-serif}.studio-sample [data-sample-name]{width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-status{min-height:20px;color:#f3d7a4;font-size:13px}.studio-piano{position:fixed;z-index:75;left:50%;bottom:20px;transform:translateX(-50%);width:max-content;max-width:96vw;padding:10px 18px}.studio-piano .studio-sound{margin:0;gap:14px}.studio-piano .studio-knob input{width:42px;height:42px}.studio-piano .studio-voices{max-width:none}.studio-piano button{padding:7px 9px;font-size:12px}
@media(max-width:600px){.studio-overlay{padding:8px}.studio-panel{padding:15px;max-height:96dvh}.studio-grid{grid-template-columns:46px repeat(16,26px);gap:4px}.studio-heading h2{font-size:20px}.studio-transport>span{width:100%}.studio-sound{gap:16px}.studio-piano{bottom:8px;padding:9px}.studio-piano .studio-voices{max-width:92px;gap:3px}.studio-piano .studio-sound{gap:8px}.studio-piano .studio-knob input{width:36px;height:36px}.studio-piano .studio-knob output{font-size:10px;min-width:48px}}
.studio-beats{margin:4px 0 14px;padding:12px;background:#231d2a;border:1px solid #4a3f52;border-radius:8px}.studio-beats h3{font:16px Arial,sans-serif;margin:0 0 10px;color:#f3d7a4}.studio-beats .studio-hint{margin:0}.studio-beat-save{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.studio-beat-save input{flex:1;min-width:140px;font:inherit;padding:8px;background:#29222f;color:#fff;border:1px solid #76677e;border-radius:4px}.studio-beat-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:180px;overflow:auto}.studio-beat-list li{display:flex;align-items:center;gap:8px}.studio-beat-list li>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-beat-list small{color:#b1a5ba;font-size:11px}.studio-beat-list button{padding:5px 10px}

/* in the piano view the sound controls are a slim strip sitting on the keyboard's rail */
.studio-piano{bottom:var(--pv-rail,20px);padding:4px 10px;border-radius:8px 8px 0 0;border-bottom:0;box-shadow:0 -6px 24px #0006;max-width:100vw}
.studio-piano .studio-sound{flex-wrap:wrap;justify-content:center;gap:4px 12px}
.studio-piano .studio-voices{flex-wrap:nowrap;gap:4px;max-width:none}
.studio-piano button{padding:3px 8px;font-size:12px;border-radius:5px}
.studio-piano .studio-knob{display:flex;align-items:center;gap:5px;font-size:11px}
.studio-piano .studio-knob input{width:64px;height:16px;border-radius:8px;background:#211a28;border:1px solid #94849d;margin:0}
.studio-piano .studio-knob input::-webkit-slider-thumb{width:12px;height:12px;border-radius:50%;transform:none}
.studio-piano .studio-knob input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;transform:none}
.studio-piano .studio-knob output{font-size:10px;min-width:40px;text-align:left}
@media(max-width:600px){.studio-piano{bottom:var(--pv-rail,8px);padding:4px 6px}.studio-piano .studio-voices{max-width:none;gap:3px}.studio-piano .studio-sound{gap:4px 8px}.studio-piano .studio-knob input{width:48px;height:16px}.studio-piano .studio-knob output{min-width:36px}}
@media(pointer:coarse){.studio-piano .studio-knob input{height:22px;border-radius:11px}.studio-piano .studio-knob input::-webkit-slider-thumb{width:18px;height:18px}.studio-piano button{padding:5px 9px}}