/* Mixamo reference: a dense catalog, large stage and narrow action column.
   This route uses an explicitly requested neutral workbench; global skins stay available. */
html body.motion-library-page { background:var(--bg); }
html body.motion-library-page .game-theme-backdrop { display:none; }
html body.motion-library-page .navbar { min-height:48px; padding:0 20px; border:0; border-bottom:1px solid var(--border); box-shadow:none; }
html body.motion-library-page .navbar-brand { font-size:16px; padding:0; min-height:48px; }
html body.motion-library-page .navbar-brand-mark,html body.motion-library-page .navbar .game-theme-character { display:none; }
html body.motion-library-page .navbar-brand-text { padding:0; }
html body.motion-library-page .main-content { max-width:none; width:100%; margin:0; padding:0; flex:1; }
html body.motion-library-page .site-footer { margin:0; padding:6px 12px; font-size:11px; min-height:0; border:0; }
.motion-app { --motion-paper:#fff; --motion-catalog:#f3f3f3; --motion-line:#d6d6d6; --motion-text:#333; --motion-muted:#666; --motion-accent:#ef8e24; --motion-accent-text:#894300; color:var(--motion-text); background:var(--motion-paper); font-family:Arial,'Microsoft YaHei',sans-serif; }
html:not([data-theme="light"]) .motion-app { --motion-paper:#27292c; --motion-catalog:#212326; --motion-line:#45474a; --motion-text:#e7e8e9; --motion-muted:#b1b4b8; --motion-accent-text:#ffb65d; }
.motion-app *, .motion-app *::before,.motion-app *::after { box-sizing:border-box; }
.motion-app [hidden] { display:none!important; }
.motion-app ::selection { background:var(--motion-accent); color:#222; }
.motion-app { scrollbar-color:var(--motion-line) var(--motion-catalog); }
html body .motion-app button,html body .motion-app .btn { min-height:44px; font-family:inherit; font-size:14px; font-weight:400; letter-spacing:0; border:1px solid var(--motion-line); border-radius:3px; color:var(--motion-text); background:var(--motion-paper); box-shadow:none; cursor:pointer; padding:8px 12px; text-transform:none; transform:none; text-shadow:none; white-space:normal; }
html body .motion-app button:hover { background:var(--motion-catalog); border-color:var(--motion-muted); transform:none; box-shadow:none; }
html body .motion-app button:disabled { opacity:.5; cursor:not-allowed; }
html body .motion-app .btn-primary { background:var(--motion-accent); border-color:#d47817; color:#231b11; font-weight:600; }
html body .motion-app .btn-primary:hover { background:#f6a23d; }
html body .motion-app .form-control { width:100%; min-width:0; min-height:44px; border:1px solid var(--motion-line); border-radius:3px; color:var(--motion-text); background:var(--motion-paper); box-shadow:none; font:14px Arial,'Microsoft YaHei',sans-serif; padding:8px 10px; caret-color:var(--motion-accent-text); }
html body .motion-app .form-control::placeholder { color:var(--motion-muted); opacity:1; }
.motion-app button:focus-visible,.motion-app a:focus-visible,.motion-app input:focus-visible,.motion-app select:focus-visible,.motion-app summary:focus-visible { outline:2px solid var(--motion-accent-text); outline-offset:2px; }
.motion-app h1,.motion-app h2,.motion-app h3,.motion-app p { margin:0; text-shadow:none; }
.motion-topline { display:flex; align-items:center; gap:20px; height:56px; padding:0 20px; background:#333436; color:#fff; border-bottom:1px solid #191a1b; }
.motion-topline h1 { font-size:18px; font-weight:500; white-space:nowrap; }
.motion-home { font-size:22px; color:#fff; text-decoration:none; letter-spacing:-.7px; }
.motion-tabs { display:flex; align-self:stretch; gap:0; }
html body .motion-app .motion-tabs button { background:transparent; color:#d6d7d8; border:0; border-bottom:3px solid transparent; border-radius:0; padding:0 20px; }
html body .motion-app .motion-tabs button[aria-pressed="true"] { border-bottom-color:var(--motion-accent); color:#fff; background:#252628; }
.motion-top-actions { margin-left:auto; display:flex; gap:8px; }
html body .motion-app .motion-top-actions button { color:#eee; background:transparent; border:0; }
.motion-status { padding:12px 20px; border-bottom:1px solid var(--motion-line); color:var(--motion-text); }
.motion-status:empty { display:none; }
.motion-status[data-error="true"],.motion-media-error { color:var(--danger); }
.motion-workspace { display:grid; grid-template-columns:minmax(340px,44%) minmax(0,1fr); height:calc(100dvh - 204px); min-height:580px; }
.motion-workspace>* { min-width:0; min-height:0; }
.motion-catalog { display:grid; grid-template-rows:auto auto auto minmax(0,1fr); background:var(--motion-catalog); border-right:1px solid var(--motion-line); }
.motion-searchbar { display:flex; align-items:center; gap:14px; padding:12px 20px; border-bottom:1px solid var(--motion-line); background:var(--motion-paper); }
.motion-search { position:relative; flex:1; min-width:0; }
.motion-search svg { position:absolute; width:18px; height:18px; left:12px; top:13px; stroke:var(--motion-muted); stroke-width:1.7; fill:none; }
html body .motion-app .motion-search input { padding-left:38px; }
.motion-sort { width:120px; flex:none; }
.motion-categories { display:flex; flex-wrap:wrap; gap:0 10px; padding:8px 20px 0; }
html body .motion-app .motion-categories button { padding:6px 0; margin-right:8px; background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0; font-size:13px; color:var(--motion-muted); }
html body .motion-app .motion-categories button[aria-pressed="true"] { color:var(--motion-accent-text); border-bottom-color:var(--motion-accent); }
.motion-categories span { font-size:11px; margin-left:3px; }
.motion-catalog-heading { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; }
.motion-app h2 { font-size:15px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.motion-catalog-heading>span { font-size:12px; color:var(--motion-muted); }
.motion-resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:start; gap:16px; padding:0 20px 20px; overflow-y:auto; min-height:0; }
html body .motion-app .motion-resource { display:flex; flex-direction:column; min-width:0; padding:0; text-align:left; border:1px solid var(--motion-line); border-radius:2px; overflow:hidden; }
html body .motion-app .motion-resource[aria-pressed="true"] { outline:2px solid var(--motion-accent); outline-offset:-2px; border-color:var(--motion-accent); }
.motion-thumbnail { aspect-ratio:4/3; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#e8e8e6; }
.motion-thumbnail img { width:100%; height:100%; object-fit:cover; }
.motion-thumbnail>strong { font:600 22px Consolas,monospace; color:#253140; }
.motion-resource-copy { display:grid; gap:5px; padding:10px; width:100%; }
.motion-resource-copy strong { font-size:13px; line-height:1.5; font-weight:500; overflow-wrap:anywhere; }
.motion-resource-copy small { font-size:11px; color:var(--motion-muted); overflow-wrap:anywhere; }
.motion-resource-copy small:last-child { display:none; }
.motion-inspector { background:var(--motion-paper); }
#selection { display:grid; grid-template-columns:minmax(0,1fr) 236px; grid-template-rows:69px minmax(0,1fr); height:100%; }
.motion-preview-heading { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--motion-line); text-align:center; }
.motion-preview-heading>div { flex:1; min-width:0; }
.motion-preview-kind { display:block; font-size:11px; color:var(--motion-muted); margin-top:2px; }
html body .motion-app .motion-favorite { width:44px; min-width:44px; font-size:25px; border:0; padding:0; }
.motion-viewer { display:flex; flex-direction:column; min-width:0; min-height:0; position:relative; background:#e8e8e6; }
.motion-view-switch { display:flex; align-items:center; padding:8px; gap:6px; background:var(--motion-paper); border-bottom:1px solid var(--motion-line); }
html body .motion-app .motion-view-switch button { min-height:36px; padding:5px 10px; font-size:12px; }
html body .motion-app .motion-view-switch button[aria-pressed="true"] { color:var(--motion-accent-text); border-color:var(--motion-accent); }
.motion-view-switch>span { margin-left:auto; font-size:11px; color:var(--motion-muted); }
.motion-stage { flex:1; display:flex; justify-content:center; align-items:center; min-height:0; overflow:hidden; }
.motion-stage video,.motion-stage img { display:block; width:100%; height:100%; min-height:0; max-height:100%; object-fit:contain; }
.motion-stage:fullscreen { background:#202326; }
.motion-file-preview { text-align:center; max-width:440px; padding:24px; color:#172433; }
.motion-file-preview strong { font:600 44px Consolas,monospace; }
.motion-file-preview p { margin:16px 0; }
.motion-file-preview a { color:#152334; text-decoration:underline; }
.motion-viewer-footer { display:flex; align-items:center; flex-wrap:wrap; padding:6px 10px; gap:8px; background:var(--motion-paper); border-top:1px solid var(--motion-line); }
.motion-time { font:12px Consolas,monospace; color:var(--motion-muted); font-variant-numeric:tabular-nums; margin-right:auto; }
html body .motion-app .motion-viewer-footer button { border:0; font-size:12px; padding:5px; }
.motion-settings { border-left:1px solid var(--motion-line); padding:12px; overflow-y:auto; min-width:0; }
.motion-primary-actions { display:grid; gap:8px; margin-bottom:22px; }
.motion-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.motion-app .motion-actions .btn { flex:1 1 auto; }
.motion-playback { padding-bottom:18px; border-bottom:1px solid var(--motion-line); }
.motion-playback label { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; }
html body .motion-app .motion-playback select { width:88px; }
.motion-trim,.motion-details { border-bottom:1px solid var(--motion-line); padding:0; margin:0; }
.motion-app summary { cursor:pointer; font-size:14px; min-height:48px; padding:14px 0; }
.motion-app h3 { font-size:14px; }
.motion-section-heading { display:flex; justify-content:space-between; gap:8px; }
.motion-section-heading>span { font-size:12px; color:var(--motion-muted); }
.motion-app .motion-help { font-size:12px; color:var(--motion-muted); margin:8px 0 12px; overflow-wrap:anywhere; line-height:1.7; }
.motion-field { display:grid; gap:6px; margin:14px 0; font-size:13px; }
.motion-range-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0; }
.motion-range-fields label { display:grid; gap:6px; font-size:12px; min-width:0; }
.motion-app .motion-text-button { background:transparent; border:0; text-decoration:none; color:var(--motion-accent-text); padding:6px 0; font:inherit; font-size:12px; }
.motion-app .motion-danger { color:var(--danger); }
.motion-clips { display:grid; gap:8px; margin-top:14px; }
.motion-clip { display:flex; align-items:center; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--motion-line); padding:4px 0; }
html body .motion-app .motion-clip-play { display:grid; width:100%; text-align:left; border:0; padding:4px; overflow-wrap:anywhere; }
.motion-clip small { font:11px Consolas,monospace; color:var(--motion-muted); }
.motion-clip[aria-current="true"] { border-bottom-color:var(--motion-accent); }
.motion-output { padding:16px 0; }
.motion-capability-note { font-size:12px; color:var(--motion-muted); line-height:1.8; border-top:1px solid var(--motion-line); padding:14px 0; }
.motion-empty { text-align:center; padding:60px 24px; color:var(--motion-muted); }
.motion-empty>span { display:block; font-size:32px; }
.motion-empty h3 { color:var(--motion-text); margin-bottom:8px; }
.motion-empty p { margin-bottom:18px; font-size:14px; line-height:1.7; }
.motion-catalog:has(#libraryEmpty:not([hidden])) { grid-template-rows:auto auto auto auto 1fr; }
.motion-media-error { padding:12px; background:var(--motion-paper); font-size:14px; }
.motion-storage { display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px; padding:4px 20px; font-size:12px; background:var(--motion-paper); border-top:1px solid var(--motion-line); color:var(--motion-muted); }
.motion-storage>span { margin-right:auto; }
.motion-storage strong { font-weight:400; }
.motion-dialog { margin:auto; padding:24px; width:min(540px,calc(100% - 32px)); max-height:90dvh; overflow-y:auto; color:var(--motion-text); background:var(--motion-paper); border:1px solid var(--motion-line); border-radius:4px; }
.motion-dialog::backdrop { background:rgb(0 0 0 / 55%); }
.motion-dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; }
.motion-dialog>p { font-size:14px; line-height:1.8; margin-bottom:12px; color:var(--motion-muted); }
html body .motion-app .motion-close { font-size:24px; width:44px; border:0; }
.motion-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:1450px) { .motion-workspace { grid-template-columns:minmax(320px,40%) minmax(0,1fr); } .motion-resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #selection { grid-template-columns:minmax(0,1fr) 214px; } }
@media(max-width:1100px) { .motion-workspace { grid-template-columns:minmax(280px,40%) minmax(0,1fr); height:auto; min-height:700px; } #selection { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; } .motion-viewer { min-height:380px; } .motion-settings { border:0; border-top:1px solid var(--motion-line); max-height:420px; } .motion-catalog { max-height:900px; } .motion-searchbar { gap:8px; padding:12px; } .motion-sort { width:108px; } .motion-topline { gap:16px; } .motion-topline h1 { font-size:16px; } .motion-tabs button { padding-inline:12px!important; } }
@media(max-width:700px) { html body.motion-library-page .navbar { padding:0 12px; } .motion-topline { height:auto; min-height:96px; gap:8px 12px; flex-wrap:wrap; padding:8px 12px 0; } .motion-home { font-size:20px; } .motion-topline h1 { font-size:16px; } .motion-tabs { order:3; width:100%; height:44px; } .motion-tabs button { flex:1; } .motion-top-actions { gap:0; } html body .motion-app .motion-top-actions button { font-size:13px; padding:6px; } .motion-workspace { display:flex; flex-direction:column; height:auto; min-height:0; } .motion-inspector { order:0; } .motion-catalog { order:1; border:0; border-top:1px solid var(--motion-line); max-height:none; } #selection { height:auto; } .motion-preview-heading { padding:8px 12px; min-height:62px; } .motion-viewer { min-height:0; } .motion-stage { height:260px; flex:none; } .motion-settings { max-height:none; padding:12px; } .motion-primary-actions { grid-template-columns:1fr 1fr; margin-bottom:16px; } .motion-searchbar { padding:12px; } .motion-categories { padding:4px 12px; } .motion-catalog-heading { padding:12px; } .motion-resource-grid { padding:2px 12px 16px; gap:12px; max-height:510px; } html body .motion-app .form-control { font-size:16px; } html body .motion-app .motion-view-switch button { min-height:44px; font-size:14px; } .motion-field,.motion-playback label { font-size:16px; } .motion-range-fields label { font-size:14px; } .motion-storage { padding:8px 12px; gap:0 16px; } .motion-storage>span { width:100%; line-height:1.8; } .motion-dialog { padding:16px; } .motion-capability-note { padding-bottom:0; } }
@media(prefers-reduced-motion:reduce) { .motion-app * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
/* Override the shared skin's pixel shadows for this reference-driven workbench. */
html[data-image-skin="1"] body.motion-library-page .motion-app button,
html[data-image-skin="1"] body.motion-library-page .motion-app .btn,
html[data-image-skin="1"] body.motion-library-page .motion-app input,
html[data-image-skin="1"] body.motion-library-page .motion-app select,
html[data-image-skin="1"] body.motion-library-page .motion-app textarea { box-shadow:none!important; text-shadow:none!important; transform:none!important; }
@media(max-width:700px) { .motion-catalog { order:0; } .motion-inspector { order:1; } .motion-resource-grid { max-height:300px; } }
.motion-resource-grid { grid-auto-rows:max-content; }
.motion-thumbnail { flex-shrink:0; }


/* Real 3D stage and independent animated catalog previews. */
.motion-thumbnail video {width:100%;height:100%;object-fit:contain;pointer-events:none;}
.motion-stage {position:relative;}
.motion-scene {position:absolute;inset:0;min-height:0;}
.motion-scene canvas {width:100%;height:100%;display:block;touch-action:none;outline-offset:-3px;}
.motion-scene-status {position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:#e8e8e6;color:#333;z-index:2;pointer-events:none;}
.motion-scene-toolbar,.motion-camera-tools {display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--motion-paper);border-top:1px solid var(--motion-line);flex-wrap:wrap;}
.motion-scene-toolbar button,.motion-camera-tools button,#togglePreviews {min-height:36px;padding:6px 10px;border:1px solid var(--motion-line);background:var(--motion-paper);color:var(--motion-text);font:inherit;cursor:pointer;}
.motion-scene-toolbar button:focus-visible,.motion-camera-tools button:focus-visible,#togglePreviews:focus-visible {outline:2px solid var(--motion-accent);outline-offset:2px;}
.motion-scene-seek {flex:1;min-width:80px;display:flex;align-items:center;}
.motion-scene-seek input {width:100%;accent-color:var(--motion-accent);}
#sceneTime {font-size:11px;font-variant-numeric:tabular-nums;min-width:126px;line-height:17px;white-space:pre-line;flex-shrink:0;}
.motion-camera-tools span {font-size:11px;color:var(--motion-muted);}
.motion-scene-settings {margin-bottom:16px;display:grid;gap:12px;}
.motion-scene-settings>label {display:grid;gap:8px;font-size:13px;}
.motion-scene-settings .motion-bone-toggle {display:flex;align-items:center;}
.motion-bone-toggle input {accent-color:var(--motion-accent);width:16px;height:16px;}
.motion-scene-settings select {width:100%;min-width:0;}
.motion-catalog-heading {flex-wrap:wrap;gap:8px;}
.motion-card {min-width:0;display:flex;flex-direction:column;border:1px solid var(--motion-line);background:var(--motion-paper);}
.motion-card .motion-resource {width:100%;flex:1;border:0;}
.motion-card:has(.motion-resource[aria-pressed="true"]) {outline:2px solid var(--motion-accent);outline-offset:-2px;}
.motion-card-views {display:flex;border-top:1px solid var(--motion-line);}
.motion-card-views button,.motion-character-picker button {min-height:44px;padding:6px 10px;border:0;background:var(--motion-paper);color:var(--motion-text);font:inherit;cursor:pointer;}
.motion-card-views button {flex:1;font-size:12px;}
html body .motion-app .motion-card-views button[aria-pressed="true"] {color:var(--motion-accent-text);background:var(--motion-catalog);border-bottom:2px solid var(--motion-accent);}
.motion-card-views button:hover,.motion-character-picker button:hover {background:var(--motion-catalog);}
.motion-card-views button:focus-visible,.motion-character-picker button:focus-visible {outline:2px solid var(--motion-accent);outline-offset:-3px;}
.motion-character-picker {display:grid;gap:8px;margin-bottom:16px;min-width:0;}
.motion-character-picker>label {font-size:13px;font-weight:600;}
.motion-character-picker select {width:100%;min-width:0;min-height:44px;}
.motion-character-picker button {border:1px solid var(--motion-line);font-size:13px;}
#togglePreviews {margin-left:auto;font-size:12px;}
@media(max-width:700px){.motion-stage:has(.motion-scene:not([hidden])){height:380px}.motion-scene-toolbar button,.motion-camera-tools button,#togglePreviews {min-height:44px}.motion-camera-tools span{width:100%}.motion-scene-settings>label{font-size:16px}}

/* Action semantics sit above the catalog; editing stays beside the character. */
.motion-catalog {grid-template-rows:auto auto auto auto minmax(0,1fr)}
.motion-catalog:has(#libraryEmpty:not([hidden])) {grid-template-rows:auto auto auto auto auto 1fr}
.motion-catalog:has(#actionFilters[hidden]) {grid-template-rows:auto auto auto minmax(0,1fr)}
.motion-catalog:has(#actionFilters[hidden]):has(#libraryEmpty:not([hidden])) {grid-template-rows:auto auto auto auto 1fr}
.motion-action-filters {display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px 0;align-items:end}
.motion-action-filters>label {display:grid;gap:5px;flex:1;min-width:110px;font-size:12px}
.motion-action-filters>button {font-size:12px!important}
.motion-adjustments {border-block:1px solid var(--motion-line);padding:16px 0;margin-bottom:20px}
.motion-adjustments fieldset {border:0;padding:0;margin:0;min-width:0}
.motion-adjustments fieldset>label,.motion-adjustments details>label {display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:13px}
.motion-adjustments output {font-variant-numeric:tabular-nums;color:var(--motion-text);white-space:nowrap}
.motion-adjustments input[type=range] {width:100%;min-height:44px;margin:0;accent-color:var(--motion-accent);cursor:pointer}
.motion-adjustments input:disabled {opacity:.45;cursor:not-allowed}
.motion-adjust-toggles {display:flex;flex-wrap:wrap;gap:0 12px;margin:4px 0 12px}
.motion-adjust-toggles label {display:flex;align-items:center;gap:7px;min-height:44px;font-size:13px}
.motion-adjust-toggles input {width:16px;height:16px;accent-color:var(--motion-accent)}
.motion-trim-heading {display:grid;gap:5px;margin:12px 0;font-size:13px}
.motion-trim-heading span {font-size:12px;color:var(--motion-muted);font-variant-numeric:tabular-nums}
#resetAdjustments {width:100%;margin-top:12px}
@media(max-width:700px){.motion-action-filters{padding-inline:12px}.motion-adjustments fieldset>label,.motion-adjustments details>label,.motion-adjust-toggles label{font-size:14px}}

/* Compact catalog: four actions across, one preview above mutually exclusive controls. */
body.motion-library-page .motion-app[data-layout="compact"] .motion-workspace {
  grid-template-columns:minmax(0,3fr) minmax(420px,2fr);
  height:calc(100dvh - 125px - var(--motion-status-height,0px)); min-height:576px;
}
body.motion-library-page .motion-app[data-layout="compact"] #selection {
  grid-template-columns:minmax(0,1fr); grid-template-rows:48px minmax(220px,1fr) auto;
}
.motion-app[data-layout="compact"] .motion-resource-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 12px 16px}
.motion-app[data-layout="compact"] .motion-thumbnail {aspect-ratio:4/3}
html body .motion-app[data-layout="compact"] .motion-card-views button {padding:6px 4px;font-size:12px}
.motion-app[data-layout="compact"] .motion-categories {gap:0 12px;padding:4px 12px 0}
.motion-app[data-layout="compact"] .motion-action-filters {padding:8px 12px 0}
.motion-app[data-layout="compact"] .motion-catalog-heading {padding:8px 12px}
body.motion-library-page .motion-app[data-layout="compact"] .motion-preview-heading h2 {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.motion-library-page .motion-app[data-layout="compact"] .motion-preview-kind {display:none}
.motion-app[data-layout="compact"] .motion-viewer {min-height:0}
.motion-app[data-layout="compact"] .motion-stage {height:auto;min-height:128px;flex:1}
.motion-app[data-layout="compact"] .motion-scene-toolbar {flex-wrap:nowrap;padding:0 12px;min-height:44px;gap:8px}
.motion-app[data-layout="compact"] .motion-scene-seek input {min-height:44px;margin:0}
.motion-app[data-layout="compact"] .motion-view-controls {display:flex;align-items:center;flex-wrap:wrap;background:var(--motion-paper);border-top:1px solid var(--motion-line);padding:0 8px;gap:4px}
.motion-app[data-layout="compact"] .motion-camera-tools {padding:0;border:0;gap:0;flex-wrap:nowrap}
.motion-app[data-layout="compact"] .motion-viewer-footer {padding:0;border:0;gap:4px;flex:1 0 136px;justify-content:flex-end}
html body .motion-app[data-layout="compact"] .motion-view-controls button {min-width:44px;padding:6px;font-size:12px;border:0}
html body .motion-app[data-layout="compact"] .motion-viewer-footer button {white-space:nowrap}
.motion-app[data-layout="compact"] .motion-settings {overflow:visible;max-height:none;padding:0 12px 8px;border:0;border-top:1px solid var(--motion-line);min-height:0}
.motion-app[data-layout="compact"] .motion-character-picker {display:flex;align-items:center;gap:12px;padding:4px 0;margin:0}
.motion-app[data-layout="compact"] .motion-character-picker>label {flex:none}
.motion-app[data-layout="compact"] .motion-character-picker select {flex:1;width:0}
.motion-app[data-layout="compact"] .motion-adjustments {border:0;padding:0;margin:0}
.motion-parameter-tabs {display:flex;border-bottom:1px solid var(--motion-line)}
html body .motion-app .motion-parameter-tabs button {flex:1;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:6px 12px}
html body .motion-app .motion-parameter-tabs button[aria-selected="true"] {border-bottom-color:var(--motion-accent);color:var(--motion-accent-text);background:var(--motion-catalog)}
.motion-app[data-layout="compact"] [role="tabpanel"] {min-height:132px;padding-top:8px}
.motion-adjust-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.motion-adjust-control {min-width:0}
.motion-adjust-control label {display:flex;justify-content:space-between;gap:4px;font-size:13px;line-height:20px}
.motion-app[data-layout="compact"] .motion-adjust-toggles {gap:8px;margin:0;align-items:center;flex-wrap:nowrap}
html body .motion-app[data-layout="compact"] #resetAdjustments {margin:0 0 0 auto;width:auto;padding:6px 8px;font-size:12px}
.motion-app[data-layout="compact"] .motion-trim-heading {display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;min-height:44px}
.motion-app[data-layout="compact"] .motion-scene-settings {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;margin:0}
.motion-app[data-layout="compact"] .motion-scene-settings>label {gap:4px;font-size:12px}
.motion-app[data-layout="compact"] .motion-bone-toggle {min-height:44px;align-self:end;white-space:nowrap}
.motion-app[data-layout="compact"] #sceneRigInfo {margin:4px 0;font-size:12px}
html body .motion-app[data-layout="compact"] #useSourceCharacter {min-height:44px;font-size:12px;padding:6px 8px}
.motion-app[data-layout="compact"] .motion-primary-actions {display:flex;align-items:center;gap:8px;margin:0;padding-top:4px;border-top:1px solid var(--motion-line)}
.motion-app[data-layout="compact"] .motion-primary-actions>button {flex:1;min-width:0}
.motion-more-actions {position:relative;flex:none}
html body .motion-app .motion-more-actions>summary {display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 12px;border:1px solid var(--motion-line);border-radius:3px;list-style:none}
.motion-more-actions>summary::-webkit-details-marker {display:none}
.motion-more-menu {position:absolute;right:0;bottom:calc(100% + 8px);width:220px;display:grid;gap:4px;padding:8px;border:1px solid var(--motion-line);background:var(--motion-paper);box-shadow:0 8px 24px rgb(0 0 0 / 18%);z-index:10}
.motion-app[data-layout="compact"] .motion-more-menu .motion-output {display:grid;padding:0;gap:4px}
.motion-app[data-layout="compact"] .motion-more-menu button {width:100%;text-align:left}
html body.motion-library-page:has(.motion-app[data-layout="compact"]) .site-footer {height:24px;min-height:24px;flex:none;box-sizing:border-box;padding:4px 12px;font-size:11px;line-height:16px}
html body.motion-library-page:has(.motion-app[data-layout="compact"]) .site-footer p {margin:0;line-height:16px}
.motion-app[data-layout="compact"] .motion-storage {min-height:45px;padding:0 12px;gap:0 16px}
.motion-app[data-layout="compact"] .motion-playback {padding:8px 0}
.motion-app[data-layout="compact"] .motion-settings:has(#videoControls:not([hidden]) .motion-trim[open]:not([hidden])) {min-height:min-content}
body.motion-library-page .motion-app[data-layout="compact"] .motion-workspace:has(#videoControls:not([hidden]) .motion-trim[open]:not([hidden])) {height:auto}
body.motion-library-page .motion-app[data-layout="compact"] #selection:has(#videoControls:not([hidden]) .motion-trim[open]:not([hidden])) {grid-template-rows:48px 320px auto}
@media(max-width:1099px) {
  body.motion-library-page .motion-app[data-layout="compact"] .motion-workspace {display:flex;flex-direction:column;height:auto;min-height:0}
  .motion-app[data-layout="compact"] .motion-catalog {max-height:none;border-right:0}
  .motion-app[data-layout="compact"] .motion-resource-grid {min-height:0;padding-top:2px}
  body.motion-library-page .motion-app[data-layout="compact"] #selection {height:auto;grid-template-rows:48px 300px auto}
  .motion-app[data-layout="compact"] .motion-inspector {border-top:1px solid var(--motion-line)}
}
@media(max-width:600px) {
  .motion-app[data-layout="compact"] .motion-resource-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .motion-app[data-layout="compact"] .motion-adjust-grid {gap:12px}
  .motion-app[data-layout="compact"] .motion-adjust-toggles {gap:4px;flex-wrap:wrap}
  html body .motion-app[data-layout="compact"] .motion-primary-actions>button,
  html body .motion-app .motion-more-actions>summary {padding:6px;font-size:12px}
  body.motion-library-page .motion-app[data-layout="compact"] .motion-stage:has(.motion-scene:not([hidden])) {height:auto}
}
/* Five columns, 25 resources per page. The pager stays outside the catalog scroller. */
.motion-app[data-layout="compact"] .motion-catalog {display:flex;flex-direction:column}
.motion-app[data-layout="compact"] .motion-catalog> :not(.motion-resource-grid):not(.motion-empty) {flex-shrink:0}
.motion-app[data-layout="compact"] .motion-resource-grid {grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;overflow-y:auto;max-height:none;flex:1;align-items:start}
.motion-app[data-layout="compact"] .motion-resource-copy {padding:8px;gap:4px}
.motion-app[data-layout="compact"] .motion-resource-copy strong {line-height:1.4;min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.motion-app[data-layout="compact"] .motion-catalog>.motion-empty {flex:1}
.motion-pagination {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-top:1px solid var(--motion-line);background:var(--motion-paper);font-size:12px;color:var(--motion-muted)}
.motion-page-controls,.motion-page-numbers {display:flex;align-items:center;gap:4px}
.motion-page-controls {max-width:100%}
.motion-page-numbers {flex-wrap:wrap;justify-content:center;min-width:0}
html body .motion-app .motion-pagination button {min-width:44px;padding:6px;font-size:13px}
html body .motion-app .motion-pagination button[aria-current="page"] {border-color:var(--motion-accent);background:var(--motion-accent);color:#231b11;font-weight:600}
@media(max-width:767px) {
  .motion-app[data-layout="compact"] .motion-resource-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .motion-pagination {flex-wrap:wrap;justify-content:center}
  .motion-pagination #pageSummary {margin-right:auto}
  .motion-page-size {display:none}
}

/* Frame editing stays inside the existing parameter tabs. */
.motion-review-filter {display:flex;align-items:center;gap:12px;padding:6px 12px;font-size:12px}
.motion-review-filter select {flex:1;min-width:0}
.motion-review-panel {padding:8px 0;border-bottom:1px solid var(--motion-border);font-size:12px}
.motion-review-summary {display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}
.motion-review-summary span {min-width:0;overflow-wrap:anywhere}
.motion-review-summary strong {flex-shrink:0}
.motion-review-panel .motion-actions {display:flex;gap:6px;flex-wrap:wrap}
html body .motion-app .motion-review-panel button {padding:6px 10px;font-size:12px}
.motion-review-panel a {color:var(--motion-muted)}
.motion-app[data-layout="compact"] .motion-adjust-grid+.motion-adjust-grid {margin-top:8px}
.motion-frame-step {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.motion-frame-step span {font-size:11px;color:var(--motion-muted)}
html body .motion-app .motion-frame-step button {font-size:12px;padding:6px 10px}
@media(max-width:1099px) {
  .motion-app[data-layout="compact"] .motion-resource-grid {flex:auto;max-height:60dvh}
}