/* A fixed logical stage fitted to the viewport, with independent view and item scale. */
.page-stage .stage-fit-viewport{position:relative;width:100%;min-width:0;min-height:0!important;max-height:none!important;padding:0;overflow:auto!important;touch-action:pan-x pan-y;overscroll-behavior:contain;border-radius:14px;background:#090f16}
.stage-fit-space{position:relative;flex:none;max-width:none;margin:0 auto}
.page-stage .stage-fit-viewport #stage-canvas{position:absolute;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;transform-origin:0 0;overflow:visible;box-sizing:border-box}
.page-stage .stage-fit-viewport #stage-canvas .stage-grid{border-radius:14px;overflow:hidden}
.page-stage #stage-canvas .stage-item{transform:translate(-50%,-50%) scale(var(--stage-item-scale,1));transform-origin:center;transition:border-color .12s,box-shadow .12s}
.stage-fit-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.stage-fit-tools .btn{min-height:40px;min-width:42px;padding:6px 10px;flex:none!important;width:auto!important}
.stage-fit-tools>span{font-size:11px;color:#97aaba;margin-left:auto}.stage-view-value{font-size:12px;min-width:42px;text-align:center;color:#dce8f2;font-variant-numeric:tabular-nums}
.stage-resize-handle{display:none;position:absolute;right:-6px;bottom:-6px;z-index:12;align-items:center;justify-content:center;width:calc(44px / var(--stage-view-scale,1) / var(--stage-item-scale,1));height:calc(44px / var(--stage-view-scale,1) / var(--stage-item-scale,1));transform:translate(50%,50%);touch-action:none;cursor:nwse-resize;border-radius:50%}
.stage-item.selected .stage-resize-handle{display:flex}
.stage-resize-handle>span{display:grid;place-items:center;border:1px solid #b8f2ff;background:#0c7b99;color:#fff;border-radius:50%;font-size:calc(12px / var(--stage-view-scale,1) / var(--stage-item-scale,1));width:calc(22px / var(--stage-view-scale,1) / var(--stage-item-scale,1));height:calc(22px / var(--stage-view-scale,1) / var(--stage-item-scale,1));box-shadow:0 1px 6px #0009}
.stage-resize-handle:focus-visible{outline:2px solid #fff;outline-offset:2px}.stage-sizing .stage-item{transition:none}.stage-sizing{cursor:nwse-resize}
.stage-size-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;border:1px solid #315468;border-radius:12px;background:#0e202b}
.stage-size-tools[hidden]{display:none!important}.stage-size-name{font-size:12px;font-weight:700;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-size-tools label{font-size:12px}.stage-size-tools input[type=range]{flex:1 1 90px;min-width:80px;min-height:44px;padding:0;accent-color:#74d5eb;touch-action:pan-y}.stage-size-tools output{font-size:12px;min-width:38px;font-variant-numeric:tabular-nums}.stage-size-tools .btn{min-height:40px;width:auto!important;font-size:11px;padding:6px 9px}
@media(max-width:900px){
 .page-stage .stage-canvas-panel{display:flex;flex-direction:column;min-width:0;margin-top:0}
 .page-stage .stage-fit-tools{order:0}.page-stage .stage-fit-viewport{order:1;flex:none}.page-stage .stage-size-tools{order:2}
 .page-stage .stage-toolbar-v9{order:3;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
 .page-stage .stage-toolbar-v9 .stage-toolbar-left{flex-wrap:wrap;gap:4px}.page-stage .stage-toolbar-v9 .stage-toolbar-right{max-width:100%;width:100%;flex-wrap:wrap;overflow:visible}
 .page-stage .stage-toolbar-v9 .btn{display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;min-height:40px;font-size:11px;padding:6px 8px}
 .page-stage .band-preset-help{order:4;font-size:10px;margin:6px 0}.page-stage .drum-control-v9{order:5;margin-top:6px}.page-stage .stage-help-row{order:6}
 .page-stage .stage-mobile-dock{position:static!important;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;margin:6px 0 8px;box-shadow:none;min-width:0}
 .page-stage .stage-mobile-dock button{min-height:44px;font-size:11px}.page-stage .stage-mobile-dock button span{font-size:11px}
 .page-stage .page-head{margin-bottom:8px;gap:8px}.page-stage .page-head p{display:none}.page-stage .page-head h1{font-size:21px}
 .page-stage .page-head .page-actions{display:flex;flex-wrap:wrap;gap:6px}.page-stage .page-head .page-actions .btn{width:auto;min-height:40px;font-size:12px}
 .page-stage .stage-edit-shell-v9{padding-bottom:20px}.page-stage .stage-mode-tabs{margin-bottom:8px}.page-stage .stage-mode-tab{padding:8px;min-height:42px}
 .page-stage .stage-size-tools{display:grid;grid-template-columns:auto 1fr auto auto;gap:5px;padding:8px}.page-stage .stage-size-name{grid-column:1/-1;max-width:100%}
 .page-stage .stage-preview-viewport-v9{max-width:100%;min-width:0;overflow:auto}
 .page-stage .stage-preview-viewport-v9 .stage-preview-zoom-v9{min-width:0!important}
}
@media(prefers-reduced-motion:reduce){.stage-item{transition:none!important}}