/* Shared UI skin tokens. Canvas pixels, authored materials and permissions are unchanged. */
:root[data-skin]{--ink:var(--ui-text);--muted:var(--ui-muted);--line:var(--ui-border);--paper:var(--ui-surface);--panel:var(--ui-surface);--surface:var(--ui-surface);--text:var(--ui-text);--input:var(--ui-background);--lime:var(--ui-raised);--radius:var(--ui-radius);font-family:var(--ui-font);color:var(--ui-text);background:var(--ui-background)}
:root[data-skin] body{background:var(--ui-background);color:var(--ui-text);font-family:var(--ui-font)}
:root[data-skin] :is(.ff-studio,.pes-app,.pes-portal,.sy-studio,.shipyard,.scenario-studio,.world-studio){--ff-line:var(--ui-border);--ff-accent:var(--ui-accent);--pes-bg:var(--ui-background);--pes-panel:var(--ui-surface);--pes-text:var(--ui-text);--pes-muted:var(--ui-muted);--pes-border:var(--ui-border);--pes-accent:var(--ui-accent);--pes-input:var(--ui-background);--sy-ink:var(--ui-text);--sy-muted:var(--ui-muted);--sy-border:var(--ui-border);--sy-panel:var(--ui-surface);--sy-raised:var(--ui-raised);--sy-gold:var(--ui-accent);--suite-border:var(--ui-border);--suite-gold:var(--ui-accent);color:var(--ui-text)}
:root[data-skin] :is(.sidebar,.login-story,.topbar,.workspace-label,.small-note,.intro-banner,.area-card,.add-area-card,.idea-card,.empty-ideas,.board-column,dialog,.pg-details,.pg-toolbar,.idea-common-actions,.idea-notebook-rail,.ff-library,.ff-view-controls,.ff-apply,.ws-controls,.ws-heading,.ws-toolbar,.ws-caption,.world-studio,.director-header,.presentation-panel){background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-border)}
:root[data-skin] :is(.nav-area.active,.nav-area:hover,.view-switch,.workspace-avatar,.account .avatar,.intro-banner,.add-area-card,.ff-library #ff-list button[aria-pressed=true]){background:var(--ui-raised);color:var(--ui-text)}
:root[data-skin] :is(h1,h2,h3,h4,legend,label,.breadcrumbs a,.breadcrumbs strong,.brand,.ff-kicker,.ff-id,.ws-heading p){color:var(--ui-text)}
:root[data-skin] :is(.muted,.small,.hint,small,footer,.field-help,.ff-note,.ff-library small,.ws-summary,.page-heading p,.idea-card p,.area-card p,.ff-camera-details p){color:var(--ui-muted)}
:root[data-skin] :is(button,select,textarea,input:not([type=range]):not([type=checkbox]):not([type=color]),.secondary,.version-badge){background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-border);border-radius:var(--ui-radius)}
:root[data-skin] :is(button.primary,.primary,.take,.ff-studio button.primary){background:var(--ui-accent);color:var(--ui-accent-text);border-color:var(--ui-accent)}
:root[data-skin] :is(a,output,.director-header a){color:var(--ui-accent)}
:root[data-skin] :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--ui-accent);outline-offset:3px}
:root[data-skin] input[type=range]{accent-color:var(--ui-accent)}
:root[data-presentation-context=dm] :is(header,article,details),:root[data-presentation-context=player] header{background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-border)}
:root[data-presentation-context=dm] p,:root[data-presentation-context=player] p{color:var(--ui-muted)}
:root[data-presentation-context=dm] :is(.badge,.hint),:root[data-presentation-context=player] #connection{color:var(--ui-muted)}
:root[data-skin] #error{color:var(--ui-text)}
:root[data-presentation-context=dm] .mark,:root[data-presentation-context=player] .mark{color:var(--ui-accent);border-color:var(--ui-accent)}
.presentation-controls{position:fixed;left:12px;bottom:12px;z-index:1100;max-width:calc(100vw - 24px);padding:0;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-surface);color:var(--ui-text);font:13px var(--ui-font);box-shadow:0 4px 20px #0003}
.presentation-controls>summary{padding:10px 14px;min-height:40px;cursor:pointer;list-style-position:inside}
.presentation-panel{padding:6px 14px 14px;width:300px;max-width:calc(100vw - 26px);max-height:70dvh;overflow:auto}
.presentation-panel label{display:grid;gap:4px;margin:10px 0;color:var(--ui-text);font-size:13px}
.presentation-panel select,.presentation-panel input{width:100%;max-width:100%;font:inherit;min-height:36px;padding:6px;border:1px solid var(--ui-border);color:var(--ui-text);background:var(--ui-surface)}
.presentation-panel p{font-size:12px;line-height:1.5;color:var(--ui-muted);margin:8px 0}
:root[data-presentation-layout=compact] :is(.main-content,main:not(#main):not(#director-output)){padding-block:16px}
:root[data-presentation-layout=compact] :is(article,.pg-details,.ws-controls,.ff-library){padding:10px}
:root[data-presentation-layout=compact] :is(.desk,.monitors,.ff-layout,.ws-layout){gap:10px}
:root[data-presentation-layout=cinematic][data-presentation-context=player] :is(header,h2,p,footer){display:none}
:root[data-presentation-layout=cinematic][data-presentation-context=player] main{max-width:none;padding:0}
:root[data-presentation-layout=cinematic][data-presentation-context=player] canvas{width:100%;height:100dvh;max-height:none;object-fit:contain;border-radius:0}
:root[data-presentation-layout=cinematic][data-presentation-context=output] body>.director-header{display:none}
:root[data-presentation-layout=cinematic][data-presentation-context=output] .director-native-frame{height:100dvh}
:root[data-presentation-layout=cinematic] .presentation-controls p{display:block}
@media(max-width:600px){.presentation-controls{left:8px;bottom:8px;max-width:calc(100vw - 16px)}.presentation-panel{max-height:60dvh}}
@media(prefers-reduced-motion:reduce){.presentation-controls *{transition:none!important}}