.studio16-page{--s16-bg:var(--color-ink);--s16-panel:var(--color-panel);--s16-panel-2:#221f24;--s16-border:var(--color-panelLine);--s16-beat-line:#37343b;--s16-text:var(--color-paper);--s16-text-dim:var(--color-concrete);--s16-accent:var(--color-amber);--s16-accent-ink:var(--color-ink);--s16-drum:var(--color-amber);--s16-bass:var(--color-coral);--s16-melody:var(--color-teal);--s16-root-tint:rgba(242,169,59,.14);--s16-shadow:0 1px 2px rgba(0,0,0,.35),0 8px 20px rgba(0,0,0,.3)}.studio16-page *{box-sizing:border-box}.studio16-page h1,.studio16-page h2{text-wrap:balance}.studio16-page button,.studio16-page input,.studio16-page select{font-family:inherit}.studio16-page .app{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px}.studio16-page .transport{background:var(--s16-panel);border:1px solid var(--s16-border);border-radius:14px;box-shadow:var(--s16-shadow);padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;position:sticky;top:env(safe-area-inset-top,0);z-index:5}.studio16-page .brand{display:flex;align-items:center;gap:8px;margin-right:2px}.studio16-page .brand-dot{width:9px;height:9px;border-radius:50%;background:var(--s16-text-dim);box-shadow:0 0 0 3px transparent;transition:background .15s,box-shadow .15s}.studio16-page .brand-dot.on{background:var(--s16-accent);box-shadow:0 0 0 3px var(--s16-root-tint)}.studio16-page .brand-name{font-size:19px;letter-spacing:.03em;text-transform:uppercase}.studio16-page .brand-name,.studio16-page .btn{font-family:var(--font-display);font-weight:700}.studio16-page .btn{border:1px solid var(--s16-border);background:var(--s16-panel-2);color:var(--s16-text);border-radius:6px;padding:9px 14px;font-size:14.5px;letter-spacing:.01em;cursor:pointer;line-height:1}.studio16-page .btn:hover{border-color:var(--s16-text-dim)}.studio16-page .btn:focus-visible,.studio16-page .cell:focus-visible,.studio16-page input:focus-visible,.studio16-page select:focus-visible{outline:2px solid var(--s16-accent);outline-offset:2px}.studio16-page .btn-play{background:var(--s16-accent);border-color:var(--s16-accent);color:var(--s16-accent-ink);min-width:108px}.studio16-page .btn-ghost{background:transparent}.studio16-page .btn-export{background:var(--s16-melody);border-color:var(--s16-melody);color:var(--s16-text)}.studio16-page .btn:disabled{opacity:.5;cursor:not-allowed}.studio16-page .field{display:flex;align-items:center;gap:7px;font-size:12.5px;font-family:var(--font-mono);color:var(--s16-text-dim)}.studio16-page .field label{white-space:nowrap}.studio16-page .field select{background:var(--s16-panel-2);color:var(--s16-text);border:1px solid var(--s16-border);border-radius:4px;padding:6px 7px;font-family:var(--font-mono);font-size:13px}.studio16-page .field input[type=range]{width:88px;accent-color:var(--s16-accent)}.studio16-page output.mono{min-width:2.4em;text-align:right;font-weight:700;color:var(--s16-text);font-size:13px}.studio16-page .unit{font-size:11px}.studio16-page .tracks{display:flex;flex-direction:column;gap:10px}.studio16-page .track{background:var(--s16-panel);border:1px solid var(--s16-border);border-radius:10px;box-shadow:var(--s16-shadow);padding:12px 14px}.studio16-page .track-head{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}.studio16-page .dot{width:10px;height:10px;border-radius:3px;flex:none}.studio16-page .dot--drum{background:var(--s16-drum)}.studio16-page .dot--bass{background:var(--s16-bass)}.studio16-page .dot--melody{background:var(--s16-melody)}.studio16-page .track-name{font-family:var(--font-display);font-weight:700;font-size:15px;margin-right:auto}.studio16-page .miniBtn{border:1px solid var(--s16-border);background:var(--s16-panel-2);color:var(--s16-text-dim);border-radius:4px;width:26px;height:26px;font-family:var(--font-mono);font-size:12px;font-weight:700;cursor:pointer;line-height:1}.studio16-page .miniBtn.active{background:var(--s16-accent);color:var(--s16-accent-ink);border-color:var(--s16-accent)}.studio16-page .timbreSelect{background:var(--s16-panel-2);color:var(--s16-text-dim);padding:4px 6px;height:26px;font-family:var(--font-mono);font-size:11.5px;cursor:pointer}.studio16-page .scope,.studio16-page .timbreSelect{border:1px solid var(--s16-border);border-radius:4px}.studio16-page .scope{background:var(--s16-bg);display:block}.studio16-page .eqPanel{background:var(--s16-panel);border:1px solid var(--s16-border);border-radius:10px;box-shadow:var(--s16-shadow);padding:10px 14px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.studio16-page .eqTitle{font-family:var(--font-display);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--s16-text-dim)}.studio16-page .eqBand{display:flex;align-items:center;gap:7px;font-size:12px;font-family:var(--font-mono);color:var(--s16-text-dim)}.studio16-page .eqBand input[type=range]{width:74px;accent-color:var(--s16-accent)}.studio16-page .vol{width:74px;accent-color:var(--s16-text-dim)}.studio16-page .grid-wrap,.studio16-page .track-body{position:relative}.studio16-page .playhead{position:absolute;top:0;bottom:0;width:calc(100% / 16);background:var(--s16-root-tint);border-radius:4px;pointer-events:none;opacity:0;transform:translateX(0)}@media (prefers-reduced-motion:no-preference){.studio16-page .playhead{transition:transform .06s linear,opacity .1s}}.studio16-page .grid{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;position:relative;z-index:1}.studio16-page .cell{appearance:none;border:1px solid var(--s16-border);background:var(--s16-panel-2);border-radius:4px;aspect-ratio:1;min-height:20px;cursor:pointer;padding:0}.studio16-page .cell--beat{border-color:var(--s16-beat-line)}.studio16-page .cell--root{background:var(--s16-root-tint)}.studio16-page .cell.active.d-drum{background:var(--s16-drum);border-color:var(--s16-drum)}.studio16-page .cell.active.d-bass{background:var(--s16-bass);border-color:var(--s16-bass)}.studio16-page .cell.active.d-melody{background:var(--s16-melody);border-color:var(--s16-melody)}.studio16-page .roll-body{display:flex;flex-direction:column;gap:3px}.studio16-page .roll-row{display:flex;align-items:stretch;gap:6px}.studio16-page .roll-label{flex:none;width:18px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--s16-text-dim);font-family:var(--font-mono)}.studio16-page .roll-label.root{color:var(--s16-text);font-weight:700}.studio16-page .roll-cells{flex:1;min-width:0;position:relative;display:grid;grid-template-columns:repeat(16,1fr);gap:3px}.studio16-page .exportbar{background:var(--s16-panel);border:1px solid var(--s16-border);border-radius:10px;box-shadow:var(--s16-shadow);padding:12px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.studio16-page .export-status{font-family:var(--font-mono);font-size:12.5px;color:var(--s16-text-dim)}.studio16-page .hint{font-size:12.5px;color:var(--s16-text-dim);line-height:1.5;margin:0 2px;padding-bottom:4px}@media (max-width:460px){.studio16-page .field input[type=range]{width:64px}.studio16-page .vol{width:54px}.studio16-page .cell{min-height:16px}}.studio16-page .keyboardPanel{background:var(--s16-panel);border:1px solid var(--s16-border);border-radius:10px;box-shadow:var(--s16-shadow);padding:10px 14px 14px;display:flex;flex-direction:column;gap:8px}.studio16-page .keyboard{position:relative;height:72px;touch-action:none}.studio16-page .whiteKeys{display:flex;height:100%;gap:2px}.studio16-page .whiteKey{flex:1;background:var(--s16-text);border:1px solid var(--s16-border);border-radius:0 0 4px 4px;cursor:pointer;padding:0}.studio16-page .whiteKey.active{background:var(--s16-accent)}.studio16-page .blackKey{position:absolute;top:0;width:7%;height:58%;background:var(--s16-panel-2);border:1px solid var(--s16-border);border-radius:0 0 3px 3px;transform:translateX(-50%);z-index:2;cursor:pointer;padding:0}.studio16-page .blackKey.active{background:var(--s16-accent)}.studio16-page .eqPanel,.studio16-page .exportbar,.studio16-page .keyboardPanel,.studio16-page .track,.studio16-page .transport{background:linear-gradient(180deg,var(--s16-panel),color-mix(in srgb,var(--s16-panel) 80%,#000))}.studio16-page .btn{background:linear-gradient(180deg,color-mix(in srgb,var(--s16-panel-2) 100%,#fff 6%),var(--s16-panel-2));box-shadow:inset 0 1px 0 hsla(0,0%,100%,.08),0 2px 3px rgba(0,0,0,.35)}.studio16-page .btn:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.5);transform:translateY(1px)}.studio16-page .btn-play{background:linear-gradient(180deg,color-mix(in srgb,var(--s16-accent) 100%,#fff 18%),var(--s16-accent))}.studio16-page .btn-export{background:linear-gradient(180deg,color-mix(in srgb,var(--s16-melody) 100%,#fff 18%),var(--s16-melody))}.studio16-page .btn.active{background:linear-gradient(180deg,color-mix(in srgb,var(--s16-accent) 100%,#fff 18%),var(--s16-accent));border-color:var(--s16-accent);color:var(--s16-accent-ink);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}.studio16-page .field select,.studio16-page .miniBtn,.studio16-page .timbreSelect{background:linear-gradient(180deg,color-mix(in srgb,var(--s16-panel-2) 100%,#fff 5%),var(--s16-panel-2));box-shadow:inset 0 1px 0 hsla(0,0%,100%,.06),0 1px 2px rgba(0,0,0,.3)}.studio16-page .miniBtn:active{box-shadow:inset 0 2px 3px rgba(0,0,0,.5)}.studio16-page .miniBtn.active{background:linear-gradient(180deg,color-mix(in srgb,var(--s16-accent) 100%,#fff 18%),var(--s16-accent))}.studio16-page input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--s16-panel-2);box-shadow:inset 0 1px 2px rgba(0,0,0,.5);outline:none}.studio16-page input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--s16-accent) 100%,#fff 45%),var(--s16-accent) 70%);box-shadow:0 1px 3px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.25);cursor:pointer}.studio16-page input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--s16-panel-2);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}.studio16-page input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;border:none;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--s16-accent) 100%,#fff 45%),var(--s16-accent) 70%);box-shadow:0 1px 3px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.25);cursor:pointer}.studio16-page .whiteKey{background:linear-gradient(180deg,#fff,var(--s16-text) 85%);box-shadow:inset 0 -3px 4px rgba(0,0,0,.12),0 2px 3px rgba(0,0,0,.3)}.studio16-page .whiteKey.active,.studio16-page .whiteKey:active{background:linear-gradient(180deg,color-mix(in srgb,var(--s16-accent) 100%,#fff 25%),var(--s16-accent));box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}.studio16-page .blackKey{background:linear-gradient(180deg,color-mix(in srgb,var(--s16-panel-2) 100%,#fff 12%),var(--s16-bg));box-shadow:0 2px 3px rgba(0,0,0,.5)}.studio16-page .blackKey.active,.studio16-page .blackKey:active{background:linear-gradient(180deg,color-mix(in srgb,var(--s16-accent) 100%,#fff 25%),var(--s16-accent));box-shadow:inset 0 2px 3px rgba(0,0,0,.4)}