.sfx-page-main{overflow:hidden;padding:0!important}.sfx-page-main>*{max-width:none!important;margin:0!important}.sfx-wrap{background:var(--bg-base);border-top:0;flex-direction:column;height:100%;display:flex;overflow:hidden}.sfx-toolbar{background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;padding:7px 10px}.sfx-main{background:var(--surface-canvas);flex:1;grid-template:"layers preview"minmax(210px,.42fr)"layers editor"minmax(310px,.58fr)/250px minmax(0,1fr);min-height:0;display:grid;overflow:hidden}.sfx-layers,.sfx-editor,.sfx-preview{min-width:0;min-height:0;overflow:hidden}.sfx-layers{border-right:1px solid var(--border);background:var(--bg-base);flex-direction:column;grid-area:layers;display:flex}.sfx-layer-actions{align-items:center;gap:6px;display:flex}.sfx-layer-actions .sfx-btn{min-width:0;padding-inline:7px}.sfx-btn.danger{color:var(--accent-red);border-color:color-mix(in srgb, var(--accent-red) 32%, transparent)}.sfx-toolbar-label{color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;font-size:.66rem}.sfx-preset-select{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elevated);width:142px;min-height:34px;color:var(--text-primary);font-family:var(--font-mono);padding:6px 8px;font-size:.78rem}.sfx-preview{border-bottom:1px solid var(--border);background:var(--surface-canvas);flex-direction:column;grid-area:preview;display:flex}.sfx-editor{background:var(--bg-base);flex-direction:column;grid-area:editor;display:flex}.sfx-layer-list{flex:1;align-content:start;gap:6px;min-height:0;padding:8px;display:grid;overflow:auto}.sfx-layer{border-radius:var(--radius-sm);cursor:pointer;border:1px solid #0000;grid-template-columns:20px 1fr auto auto;align-items:center;gap:8px;padding:8px;display:grid}.sfx-layer:hover{background:var(--bg-surface);border-color:var(--border)}.sfx-layer.active{background:color-mix(in srgb, var(--accent-teal) 9%, transparent);border-color:var(--accent-teal-dim)}.sfx-layer input{accent-color:var(--accent-teal)}.sfx-layer-name{text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);color:var(--text-primary);font-size:.78rem;overflow:hidden}.sfx-layer-meta{font-family:var(--font-mono);color:var(--text-muted);font-size:.65rem}.sfx-solo{border:1px solid var(--border);border-radius:var(--radius-sm);min-height:22px;color:var(--text-muted);font-family:var(--font-mono);cursor:pointer;background:0 0;padding:2px 6px;font-size:.62rem}.sfx-solo.active{color:var(--accent-amber);border-color:color-mix(in srgb, var(--accent-amber) 42%, transparent);background:color-mix(in srgb, var(--accent-amber) 10%, transparent)}.sfx-selected-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--text-primary);font-family:var(--font-mono);font-size:.82rem;font-weight:600;overflow:hidden}.sfx-controls{background:var(--bg-base);flex:1;grid-template-columns:repeat(3,minmax(220px,1fr));align-content:start;gap:12px;min-height:0;padding:12px;display:grid;overflow-y:auto}.sfx-control-section{flex-direction:column;gap:10px;min-width:0;display:flex}.sfx-control-section.sfx-wide{grid-column:span 1}.sfx-section-title{color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;font-size:.65rem;font-weight:500}.sfx-control-grid{grid-template-columns:1fr 1fr;gap:9px;display:grid}.sfx-wide .sfx-control-grid{grid-template-columns:1fr 1fr;align-items:end}.sfx-controls label,.sfx-timeline label{min-width:0;font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);gap:3px;font-size:.6rem;display:grid}.sfx-controls label{min-height:32px}.sfx-value{color:var(--text-secondary);letter-spacing:0;text-transform:none;justify-self:end;margin-top:-.95rem;font-size:.62rem}.sfx-layer-tool-row{min-width:128px}.sfx-layer-tool-buttons{flex-wrap:wrap;gap:4px;display:flex}.sfx-layer-tool-buttons .sfx-btn{min-height:24px;padding:3px 7px;font-size:.66rem}.sfx-controls input,.sfx-controls select,.sfx-timeline input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elevated);width:100%;min-width:0;color:var(--text-primary);font-family:var(--font-mono);padding:4px 6px;font-size:.72rem}.sfx-controls input[type=range],.sfx-timeline input[type=range]{accent-color:var(--accent-teal);padding:0}.sfx-canvas-wrap{background:var(--surface-canvas);flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}#sfx-canvas{background:var(--surface-canvas);flex:1;width:100%;min-height:0;display:block}.sfx-meter{min-height:26px;font-family:var(--font-mono);color:var(--text-muted);align-items:center;gap:12px;font-size:.7rem;display:flex}.sfx-timeline{border-top:1px solid var(--border);background:var(--bg-base);grid-template-columns:1fr 1fr auto;align-items:center;gap:12px;padding:10px 12px;display:grid}.sfx-check{white-space:nowrap;align-items:center;gap:8px;display:flex!important}.sfx-check input{width:auto;accent-color:var(--accent-teal)}.sfx-dialog-overlay{z-index:540;background:var(--overlay-scrim-strong);justify-content:center;align-items:center;display:none;position:fixed;inset:0}.sfx-dialog-overlay.open{display:flex}.sfx-dialog{width:min(420px,100vw - 48px);padding:var(--space-4);border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-lg);gap:14px;display:grid}.sfx-dialog h2{letter-spacing:0;margin:4px 0 0;font-size:1rem}.sfx-dialog p{color:var(--text-secondary);margin:0;line-height:1.45}.sfx-dialog input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elevated);width:100%;min-width:0;color:var(--text-primary);padding:8px 9px}.sfx-dialog-actions{justify-content:flex-end;gap:8px;display:flex}@media (width<=1180px){.sfx-controls{grid-template-columns:repeat(2,minmax(220px,1fr))}}@media (width<=760px){.sfx-main{grid-template:"layers""preview""editor"/1fr;overflow:auto}.sfx-layers,.sfx-editor,.sfx-preview{border-right:0;border-bottom:1px solid var(--border);min-height:360px}.sfx-editor{min-height:720px}.sfx-wide .sfx-control-grid,.sfx-control-grid,.sfx-controls,.sfx-timeline{grid-template-columns:1fr}.sfx-controls label,.sfx-timeline label{font-size:.78rem}}