/* Shared motion for independent preview controls; live scores keep their own animations. */
html body .viewer-live>.section-bar,html body .viewer-live>.fullscreen-bar{transition:opacity 180ms ease,visibility 180ms ease,transform 180ms ease!important;transform:translateY(4px)}
html body .viewer-live.score-tools-visible>.section-bar,html body .viewer-live.score-tools-visible>.fullscreen-bar,html body .viewer-live.is-fullscreen>.fullscreen-bar{transform:translateY(0)}
html body :is(.text-style-popover,[data-sound-setting-panel],.team-autocomplete-panel){transition:opacity 180ms ease,visibility 180ms ease,transform 180ms ease!important}
html body :is(.text-style-popover,[data-sound-setting-panel],.team-autocomplete-panel):not(.is-open){opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}
html body :is(.text-style-popover,[data-sound-setting-panel],.team-autocomplete-panel).is-open{opacity:1;visibility:visible;transform:translateY(0)}
html body :is(#viewer-toast,#toast,#scoreLockNotice){transition:opacity 180ms ease,transform 180ms ease,visibility 180ms ease!important}
details>summary{cursor:pointer}details>summary::marker{transition:color 180ms ease}
@supports (transition-behavior:allow-discrete){html body :is(.text-style-popover,[data-sound-setting-panel],.team-autocomplete-panel){transition:opacity 180ms ease,transform 180ms ease,display 180ms allow-discrete!important}@starting-style{html body :is(.text-style-popover,[data-sound-setting-panel],.team-autocomplete-panel).is-open{opacity:0;transform:translateY(-5px)}}}
@media(prefers-reduced-motion:reduce){html body :is(.viewer-live>.section-bar,.viewer-live>.fullscreen-bar,.text-style-popover,[data-sound-setting-panel],.team-autocomplete-panel,#viewer-toast,#toast,#scoreLockNotice){transition:none!important}}
/* Role-frame crossfade occupies one slot while the outgoing document unloads. */
#center-preview:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
#center-preview>.design-subnav{grid-area:1/1}
#center-preview>.center-frame{grid-area:2/1;min-width:0}
body>main:has(>section[id$="-preview"]){display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
body>main>section[id$="-preview"]{grid-area:1/1;min-width:0}