.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}}