/* Shared tokens; layouts remain owned by each surface. */
:root{
  --motion-ink:#162033;--motion-muted:#657083;--motion-paper:#fffdf9;
  --motion-card:#fff;--motion-line:#e7e2d8;--motion-coral:#ff7b68;
  --motion-yellow:#ffd66b;--motion-blue:#eef2ff;
  --motion-success:#226341;--motion-warning:#845208;--motion-error:#b42318;
  --motion-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --motion-radius-control:8px;--motion-radius-panel:12px;
  --motion-space-1:4px;--motion-space-2:8px;--motion-space-3:12px;--motion-space-4:16px;
  --editor-ink:var(--motion-ink);--editor-muted:var(--motion-muted);--editor-paper:var(--motion-paper);
  --editor-card:var(--motion-card);--editor-line:var(--motion-line);--editor-coral:var(--motion-coral);
  --editor-yellow:var(--motion-yellow);--editor-blue:var(--motion-blue);
}
[hidden]{display:none!important}
.motion-brand{display:flex;align-items:center;gap:var(--motion-space-2);color:var(--motion-ink);text-decoration:none;font-family:var(--motion-font)}
.motion-brand img{display:block;width:34px;height:34px;flex:none}
.motion-brand-copy strong{letter-spacing:-.02em}
.motion-brand-copy small{display:block;font-size:11px;color:var(--motion-muted);font-weight:400}
.motion-shell-link{color:var(--motion-muted);font:12px var(--motion-font);padding:var(--motion-space-2);border-radius:var(--motion-radius-control);text-decoration:none}
.motion-shell-link:hover{color:var(--motion-ink);background:var(--motion-blue)}
.motion-status{color:var(--motion-muted);font-size:11px;line-height:1.5}
.motion-status[data-state=success]{color:var(--motion-success)}
.motion-status[data-state=warning],.motion-status[data-state=experimental]{color:var(--motion-warning)}
.motion-status[data-state=error]{color:var(--motion-error)}
.motion-status[role=alert]{color:var(--motion-error)}
.button{border-radius:var(--motion-radius-control);gap:var(--motion-space-2)}
.button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.hero-copy .microcopy{font-size:12px;line-height:1.6}
:where(button,input,select,summary,a):focus-visible{outline:2px solid var(--motion-ink);outline-offset:3px}
button,input,select{font-family:var(--motion-font);accent-color:var(--motion-ink)}
.workspace-actions button,.canvas-toolbar button,.properties-sidebar button{border-radius:var(--motion-radius-control);border-color:var(--motion-line)}
.workspace-actions button[aria-pressed=true]{background:var(--motion-blue);border-color:var(--motion-ink)}
body.editor-app{font-family:var(--motion-font)}
.workspace-topbar{gap:var(--motion-space-3)}
.workspace-file{min-width:0;display:grid;gap:2px;margin-right:auto;font-size:11px}
#projectFileName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24vw}
.canvas-toolbar{overflow-x:auto;flex-shrink:0}
.canvas-toolbar>button{flex-shrink:0}
#conversionMode{white-space:nowrap;font-weight:700;color:var(--motion-ink)}
.inspector-title::after{content:none}
#qualitySummary{padding:var(--motion-space-2);border:1px solid var(--motion-line);border-radius:var(--motion-radius-control);margin:0 0 var(--motion-space-2)}
#qualityNotes{margin-top:var(--motion-space-1)}
#qualityNotes summary{cursor:pointer;font-size:11px}
#qualityNotes p{margin:var(--motion-space-2) 0 0}
.properties-sidebar .quick-panel{border:1px solid var(--motion-line);border-radius:var(--motion-radius-panel);padding:var(--motion-space-2);margin:var(--motion-space-2) 0;background:var(--motion-card)}
.quick-panel>summary{font-weight:700;font-size:12px;cursor:pointer}
.quick-panel label{font-size:11px;margin:var(--motion-space-2) 0 var(--motion-space-1)}
#editScopeSummary{display:block;margin-top:var(--motion-space-2);font-size:11px;color:var(--motion-muted)}
.quick-scope-note{font-size:10px;line-height:1.5;color:var(--motion-muted)}
.properties-sidebar .advanced-panel .hint{display:block!important}
#conversionNotice{position:absolute;top:var(--motion-space-2);left:var(--motion-space-3);right:var(--motion-space-3);padding:var(--motion-space-2);background:var(--motion-paper);border:1px solid var(--motion-line);border-radius:var(--motion-radius-control);z-index:1;pointer-events:none}
.drop-hint{padding:var(--motion-space-4);gap:var(--motion-space-2)}
.drop-hint span{max-width:440px;line-height:1.5}
body:not(.advanced-mode) [data-advanced]{display:none!important}
body:not(.advanced-mode) .workspace-body main{grid-template-rows:36px minmax(0,1fr) 88px}
body:not(.advanced-mode) .timeline-wrap{grid-template-rows:30px 34px}
body:not(.advanced-mode) .timeline-labels,body:not(.advanced-mode) .timeline-canvas,body:not(.advanced-mode) .timeline-selection{display:none}
body.empty-project .workspace-body main{grid-template-rows:36px minmax(300px,1fr) 0}
.empty-project .workspace-actions #workspaceAdvanced{visibility:visible}
.empty-project.advanced-mode .properties-sidebar{visibility:visible;pointer-events:auto;padding:10px;overflow:auto}
.empty-project.advanced-mode .workspace-body{grid-template-columns:0 minmax(0,1fr) 280px}
.empty-project.advanced-mode .workspace-body .object-sidebar{visibility:hidden}
.timeline-playback #timeline{min-width:50px;flex:1;max-width:240px}
.timeline-playback>div{flex-wrap:wrap;height:auto}
#stateSettings>div{z-index:6}
#conversionDialog{font-family:var(--motion-font);color:var(--motion-ink);border-color:var(--motion-line);border-radius:var(--motion-radius-panel)}
#conversionDialog button,#conversionDialog select,#conversionDialog input{border-radius:var(--motion-radius-control);border-color:var(--motion-line)}
#conversionDialog .primary{background:var(--motion-ink)}
#conversionDialog [data-error]{color:var(--motion-error)}
#exportDialog{--ink:var(--motion-ink);--muted:var(--motion-muted);--line:var(--motion-line);--radius-lg:var(--motion-radius-panel);--radius-sm:var(--motion-radius-control);font-family:var(--motion-font);max-height:calc(100vh - 32px);overflow:auto}
#exportDialog label{color:var(--motion-ink);margin:0}
#exportDialog button{color:var(--motion-ink)}
@media(max-width:820px){
  .workspace-topbar{flex-wrap:wrap}
  .workspace-brand small{display:block}
  .workspace-file{order:3;flex-basis:100%}
  #projectFileName{max-width:80vw}
  .workspace-actions{flex-wrap:wrap;gap:var(--motion-space-1)}
  .workspace-actions button:not(.primary){display:block}
  .workspace-body .object-sidebar{order:1}
  .workspace-body main{order:0}
  .workspace-body .properties-sidebar{order:2}
  body:not(.advanced-mode) .workspace-body main{grid-template-rows:40px minmax(300px,50vh) 108px;min-height:0}
  .canvas-toolbar{height:40px}
  .canvas-toolbar>strong,.canvas-toolbar>span:not(#conversionMode){display:none}
  body.empty-project .workspace-body main{grid-template-rows:40px minmax(420px,65vh) 0}
  .timeline-playback #timeline{max-width:110px}
  .timeline-playback #reverse{display:none}
  #objectTree{height:auto;max-height:180px}
  .empty-project:not(.advanced-mode) .workspace-body aside{display:none}
}