/* Shared ARVO component tokens. Scene/canvas colours are outside this system. */
.spectrum-object-settings{display:grid;gap:12px;padding:16px 0;border-top:1px solid var(--ui-border)}.spectrum-object-settings>label,.spectrum-object-settings .inspector-detail-body>label{display:grid;gap:6px;margin:0}.spectrum-object-settings .inspector-detail-body{display:grid;gap:12px}.spectrum-object-settings .hint{margin:0}
@media(max-width:600px){.arvo-options [role=option]{min-height:44px}.arvo-number .number-value{min-height:44px}.arvo-number .number-scrub{min-height:44px;min-width:44px;width:44px}}
:root{
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
 --font-caption:11px;--font-control:12px;--font-body:13px;--font-section:14px;--font-dialog:19px;
 --control-height:36px;--control-compact:32px;--control-touch:44px;--icon-size:18px;
 --radius-sm:6px;--radius-control:8px;--radius-panel:12px;--border-width:1px;
 --motion-fast:140ms;--motion-normal:180ms;--field-gap:8px;--menu-width:220px;
}
body[data-theme=dark]{
 --control-top:var(--arvo-surface-top);--control-bottom:var(--arvo-surface-bottom);
 --slider-fill-start:#22609a;--slider-fill-end:var(--ui-accent);--slider-empty:var(--ui-bg);
 --thumb-top:#e7f4ff;--thumb-bottom:#9dbedc;--thumb-border:#9fbfdf;
 --switch-on-top:#339cff;--switch-on-bottom:#0879df;--switch-thumb-bottom:#c8d8e9;
 --ui-disabled:#708599;--ui-warning:#e4bd78;--ui-success:#93c5a8;
}
body[data-theme=light]{
 --control-top:var(--arvo-surface-top);--control-bottom:var(--arvo-surface-bottom);
 --slider-fill-start:#31363e;--slider-fill-end:#545c67;--slider-empty:#e6e9ed;
 --thumb-top:#414750;--thumb-bottom:#24292f;--thumb-border:#424a54;
 --switch-on-top:#525b65;--switch-on-bottom:#30363e;--switch-thumb-bottom:#e3e5e9;
 --ui-disabled:#818894;--ui-warning:#8b651f;--ui-success:#37684a;
}
button,.arvo-select{transition:color var(--motion-fast),border-color var(--motion-fast),background-color var(--motion-fast),box-shadow var(--motion-fast)}
button:not(:disabled):hover,.arvo-select:not(:disabled):hover{border-color:var(--ui-focus)}
button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
button:disabled,input:disabled{cursor:default;color:var(--ui-disabled)}
.ui-icon{width:var(--icon-size);height:var(--icon-size);flex:none}
.inspector-field:not(:has(input[type=checkbox])){display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--field-gap);min-width:0;margin:var(--space-3) 0}
.inspector-field:not(:has(input[type=checkbox]))>input,.inspector-field input[type=text]{display:block;width:100%;margin:0;min-height:var(--control-height);box-sizing:border-box}
.inspector-field>.arvo-number{margin-top:0}.inspector-field input[type=color]{width:100%;min-height:var(--control-height)}
.inspector-grid .inspector-field{display:flex;flex-direction:column;align-items:stretch;gap:var(--field-gap)}
.inspector-detail-body>.inspector-grid{margin:var(--space-2) 0;gap:var(--space-3)}
.inspector-grid .inspector-field:not(:has(input[type=checkbox])){margin:0}
.inspector-grid .inspector-field input{margin-top:0}
.layer-menu[popover]{width:min(var(--menu-width),calc(100vw - 16px));min-width:0}
.layer-menu>button{min-height:var(--control-height);justify-content:flex-start}
.layer-list{padding-bottom:var(--space-5)}
.arvo-options[popover]{margin:0;inset:auto}
.shell-dialog>header h2{font-size:var(--font-dialog)}
.settings-flat>h3{font-size:var(--font-section)}
.project-media>.settings-section-body{display:flex;flex-direction:column;gap:var(--space-2)}
#app-settings{width:min(560px,calc(100vw - 32px));max-width:calc(100vw - 32px)}
#app-settings h3{color:var(--ui-text);font-size:var(--font-section);font-weight:600;letter-spacing:0;text-transform:none}
#app-settings button{min-height:var(--control-height)}
#app-settings .preview-quality-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);padding-bottom:var(--space-5);margin-bottom:var(--space-5)}
#app-settings .preview-quality-settings>h3,#app-settings .preview-quality-settings>p,#app-settings .preview-quality-settings>details{grid-column:1/-1;margin:0}
#app-settings .preview-quality-settings label{min-width:0;margin:0;font-size:var(--font-control);line-height:1.5}
#app-settings .preview-quality-settings .arvo-select{width:100%;min-height:var(--control-height);margin-top:var(--space-2)}
#app-settings details>summary{padding:var(--space-3) 0;font-size:var(--font-body);color:var(--ui-text)}
#app-settings .preview-quality-settings pre{max-height:200px;overflow:auto;font-size:var(--font-caption)}
#app-settings .dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
#app-settings #settings-close{order:2}
#app-settings #panels-reset{order:1}
@media(max-width:600px){#app-settings button{min-height:var(--control-touch)}#app-settings .preview-quality-settings{grid-template-columns:1fr}#app-settings .dialog-actions{flex-wrap:wrap}#app-settings .dialog-actions>button{flex:1;min-height:var(--control-touch)}}
/* Short landscape screens need the preview beside the scrollable tools,
   rather than a second row that consumes nearly all available height. */
@media(min-width:601px) and (max-width:1000px) and (max-height:550px){
 html body #app,html body.right-closed #app{grid-template-columns:minmax(260px,min(38vw,var(--left-width))) 1px minmax(0,1fr);grid-template-rows:64px minmax(0,1fr);grid-template-areas:'head head head' 'side left-resize main'}
 html body.left-closed #app,html body.left-closed.right-closed #app{grid-template-columns:0 1px minmax(0,1fr);grid-template-rows:64px minmax(0,1fr);grid-template-areas:'head head head' 'side left-resize main'}
 .editor-header,.topbar{height:64px}.workspace{padding:8px;gap:8px}.preview-options{min-height:24px;margin-bottom:0}
 .transport{height:52px;min-height:52px;padding:4px 8px;margin-top:0;gap:6px}.transport button,#play{min-width:36px;width:36px}
 .editor-sidebar{margin:8px 0 8px 8px}.topbar>#left-toggle{top:72px;left:16px}.topbar>#right-toggle{display:none}
 .inspector{grid-area:side;display:none!important;margin:8px 0 8px 8px;max-height:none;min-height:0;z-index:6}
 .mobile-properties .inspector{display:flex!important;visibility:visible!important}.mobile-properties .editor-sidebar .panel-scroll{visibility:hidden}
 .inspector #inspector-back{display:block;width:auto;font-size:var(--font-control)}.inspector header h2{display:none}.inspector #inspector-close{margin-left:auto}
}
@media(max-width:600px){
 .workspace{padding:var(--space-2);gap:var(--space-2)}
 .transport{height:52px;min-height:52px}
 .preview-options{min-height:24px;margin-bottom:0}
 .preview-options>button,.preview-manual>summary{min-height:24px}
 .inspector-field:not(:has(input[type=checkbox]))>input{min-height:var(--control-touch)}
 .layer-menu>button{min-height:var(--control-touch)}
}
#intro{opacity:1;visibility:visible!important;animation:none!important;transition:opacity var(--splash-duration,650ms) ease!important}
#intro .intro-core{opacity:0;animation:none!important;transition:opacity var(--splash-duration,650ms) ease!important}
#intro.intro-visible .intro-core{opacity:1}
#intro.intro-exit{opacity:0!important;visibility:visible!important}
.panel-scroll,#inspector-scroll{overflow-anchor:none}
/* Panel visibility controls own real toolbar space, never float over panel titles. */
.preview-options{flex:none;gap:12px;min-height:36px}
.preview-view-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:1;min-width:0}
.preview-view-controls>.hint{margin:0 auto 0 0;font-variant-numeric:tabular-nums}
.preview-view-controls>#preview-fit,.preview-view-controls .preview-manual>summary{min-height:28px;padding:5px 10px;font-size:11px}
.preview-options>.pane-toggle{position:static;flex:none;width:32px;min-width:32px;height:32px;min-height:32px;padding:6px}
@media(min-width:601px) and (max-width:1000px) and (max-height:550px){.preview-options>#right-toggle{display:none}}
@media(max-width:600px){.preview-options>.pane-toggle{display:none}.preview-options{min-height:24px;gap:8px}}
.shape-segments>button{flex:1 1 auto;overflow-wrap:anywhere}
.preset-preview-bar{position:static;transform:none;flex:none;align-self:center;margin-bottom:8px}
#app:fullscreen .preset-preview-bar{display:none}
.preset-library>header>button{min-width:36px;min-height:36px}
@media(max-width:1000px){.preset-preview-bar{position:fixed;top:auto;bottom:16px;left:50%;transform:translateX(-50%);margin:0;max-width:calc(100vw - 32px)}.preset-preview-bar button{min-height:var(--control-touch)}}
@media(min-width:601px) and (max-width:1000px) and (max-height:550px){.preset-preview-bar{left:16px;transform:none;width:min(290px,calc(38vw - 24px))}}
@media(max-width:600px){.preset-library>header>button,.library-categories button,.preset-library>.dialog-actions button,.preset-save-actions button{min-height:var(--control-touch)}}
@media(prefers-reduced-motion:reduce){:root{--motion-fast:0ms;--motion-normal:0ms}}

.timer-style-body{padding:12px 0}.timer-format-options{display:flex;flex-wrap:wrap;gap:8px}.timer-format-options>button{flex:1;min-height:36px}.timer-format-options>button[aria-pressed=true]{background:var(--ui-selected);border-color:var(--ui-focus);color:var(--ui-text)}.timer-style-body>.arvo-select{width:100%;margin-bottom:8px}
@media(max-width:600px){.timer-format-options>button{min-height:44px}}
/* Legacy scene controls retain their field layout after moving out of .panel. */
#inspector-scroll [data-controls] label:not(.check){display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:12px 0;font-size:var(--font-control);color:var(--ui-muted);min-width:0}
#inspector-scroll [data-controls] .check{display:flex;align-items:center;gap:8px;margin:12px 0;min-height:36px;font-size:var(--font-control)}
#inspector-scroll [data-controls] label>output{display:none}
#inspector-scroll [data-controls] input[type=color],#inspector-scroll [data-controls] select{width:100%;min-height:36px;box-sizing:border-box}
#inspector-scroll [data-controls] .arvo-number{width:100%}
.scene-selection button{width:32px;height:32px;min-width:32px;min-height:32px;padding:0;background:transparent!important;border:0;box-shadow:none!important}
.scene-selection button::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border:1px solid var(--ui-bg);border-radius:50%;background:var(--ui-accent);box-sizing:border-box;pointer-events:none}
.scene-selection .handle-resize{right:-16px;bottom:-16px}.scene-selection .handle-rotate{top:-42px}
@media(max-width:600px){#inspector-scroll [data-controls] .check,#inspector-scroll [data-controls] input[type=color],#inspector-scroll [data-controls] select{min-height:44px}.scene-selection button{width:44px;height:44px;min-width:44px;min-height:44px}.scene-selection .handle-resize{right:-22px;bottom:-22px}.scene-selection .handle-rotate{top:-48px}}
/* At small desktop widths the centred absolute tabs could overlap Undo. */
@media(min-width:1001px) and (max-width:1200px){.topbar>.tabs{position:static;transform:none;flex:none;margin:0 auto;order:1}.topbar .brand{flex:none;width:155px;margin-right:0}.top-actions{margin-left:0;order:2}}

/* Stage02: existing ARVO tokens and widgets, scoped to behavior disclosure. */
#audio-behavior .settings-section-body{display:grid;gap:8px}
#audio-behavior .settings-section-body>label{display:grid;gap:6px}
#audio-behavior .settings-section-body>label.check{display:flex;align-items:center;gap:8px}
#audio-behavior .settings-section-body>button{width:100%}
#audio-behavior .arvo-number{width:100%;min-width:0}
#audio-analysis-status progress{width:100%}

#audio-behavior .behavior-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#audio-behavior .behavior-modes [aria-checked=true]{color:var(--ui-accent);border-color:var(--ui-accent);background:var(--ui-selected,rgba(153,197,233,.1))}
#audio-behavior .behavior-modes button{min-width:0;white-space:normal;overflow-wrap:anywhere}
#audio-behavior .behavior-basic-fields{display:grid;gap:12px;margin-block:12px}
#audio-behavior .behavior-basic-fields>label{display:grid;gap:6px}

#audio-behavior .behavior-modes button{font-size:12px;padding-inline:2px;white-space:nowrap;overflow-wrap:normal;min-height:44px}

/* Personal layer audio action remains scoped to the layer tree. */
.layer-row .layer-audio{display:flex;min-height:36px;height:36px;min-width:36px;width:36px}
.layer-row .layer-audio[aria-pressed=true]{color:var(--ui-text);background:var(--ui-selected);border-color:transparent;box-shadow:none}
@media(max-width:600px){.layer-row{padding-left:min(calc(var(--depth)*10px),20px)}.layer-row .layer-audio{width:44px;min-width:44px;height:44px;min-height:44px}}

/* Stage02 catalog stays compact; parameters live in the contextual inspector. */
.scene-effect-category{margin-block:18px}.scene-effect-category>h3{margin:0 0 8px;color:var(--ui-muted);font-size:12px;font-weight:600}
.spectrum-template-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.spectrum-template-grid>p{grid-column:1/-1}.spectrum-template-grid>button{min-width:0;white-space:normal;overflow-wrap:anywhere}

/* Visible readiness belongs beside the player, including narrow layouts. */
.audio-preparation{flex:none;width:min(100%,600px);display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px 10px;padding:8px 10px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-panel);color:var(--ui-text);font-size:12px;margin:0}
.audio-preparation[hidden],.audio-preparation [hidden]{display:none!important}.audio-preparation>span{grid-column:1;min-width:0;overflow-wrap:anywhere}.audio-preparation>progress{grid-column:1;grid-row:2;width:100%;height:5px;accent-color:var(--ui-accent)}.audio-preparation>button{grid-row:1 / span 2;min-height:32px;font-size:12px;padding:5px 10px}.audio-preparation>button:first-of-type{grid-column:2}.audio-preparation>button:last-of-type{grid-column:3}
.intro-audio-cancel{margin-top:16px;font-size:12px;min-height:36px}.intro-audio-cancel[hidden]{display:none!important}
.stage03-export-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 16px}.stage03-export-fields>label{min-width:0;display:flex;flex-direction:column;gap:8px;margin:0}.stage03-export-fields>label:first-child,.stage03-export-fields>#export-size{grid-column:1/-1}.stage03-export-fields [hidden],.stage03-download[hidden]{display:none!important}.stage03-download{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 12px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-selected);color:var(--ui-text);text-decoration:none;margin-block:12px}.stage03-download:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}#export-status{display:block;overflow-wrap:anywhere}
@media(max-width:600px){.stage03-export-fields{grid-template-columns:minmax(0,1fr);gap:12px}.stage03-download{min-height:44px}}
@media(max-width:600px){.audio-preparation>button,.intro-audio-cancel{min-height:44px}}