/* Defines the compact Blender-inspired workspace and responsive timeline layout. */
:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #111316; color: #d9dde3; --line: #30343b; --panel: #1b1e23; --accent: #e8793a; --ruler: 28px; }
* { box-sizing: border-box; }
body { height: 100vh; display: flex; flex-direction: column; margin: 0; min-width: 760px; overflow: hidden; }
button, input, select, textarea { color: inherit; font: inherit; }
button, select, input, textarea { border: 1px solid #40454e; background: #292d33; border-radius: 4px; }
button { padding: 6px 10px; cursor: pointer; }
button:hover { background: #353a42; }
button.primary { background: #c95d2b; border-color: #ec7d47; color: white; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon-button { display: grid; width: 40px; min-width: 40px; height: 34px; place-items: center; padding: 0 !important; touch-action: manipulation; }
.ui-icon { display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.has-tooltip { position: relative; }
.control-tooltip { max-width: min(220px, calc(100vw - 16px)); position: fixed; z-index: 2000; padding: 5px 7px; border: 1px solid #484e57; border-radius: 4px; background: #111317; box-shadow: 0 3px 10px #0009; color: #e4e7eb; font-size: 11px; font-weight: 500; line-height: 1.25; pointer-events: none; text-align: left; overflow-wrap: anywhere; }
.icon-button[aria-disabled="true"] { color: #6e747d; cursor: default; }
.icon-button[aria-disabled="true"]:hover { background: #292d33; }
.topbar { height: 46px; display: flex; flex: none; align-items: center; gap: 18px; padding: 0 12px; border-bottom: 1px solid var(--line); background: #181a1f; }
.brand { display: flex; align-items: center; gap: 7px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.brand-icon { width: 27px; height: 27px; flex: none; border-radius: 7px; }
.brand strong { font-size: 13px; }
.brand span { color: #777e89; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.project-switcher { position: relative; }
.project-browser-trigger { min-width: 140px; max-width: min(280px, 25vw); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 5px 8px; background: transparent; text-align: left; }
.project-browser-trigger .ui-icon { width: 17px; height: 17px; color: #b5bbc4; }
#current-project-name { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.project-browser { width: min(520px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 58px)); display: flex; position: absolute; z-index: 1000; top: calc(100% + 8px); left: 0; flex-direction: column; overflow: hidden; border: 1px solid #505762; border-radius: 7px; background: #202329; box-shadow: 0 14px 42px #000d; }
.project-browser-heading { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; background: #292d34; box-shadow: inset 0 -1px #3a4048; }
.project-browser-title { display: flex; align-items: center; gap: 4px; }
.project-browser-heading strong { color: #f0f2f5; font-size: 15px; letter-spacing: .01em; }
.project-storage-details { position: relative; color: #858c96; font-size: 10px; }
.project-storage-details summary { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; cursor: help; list-style: none; }
.project-storage-details summary::-webkit-details-marker { display: none; }
.project-storage-details summary:hover, .project-storage-details[open] summary { background: #ffffff0c; color: #dce1e7; }
.project-storage-details summary .ui-icon { width: 17px; height: 17px; }
.project-storage-details p { width: min(300px, calc(100vw - 48px)); position: absolute; z-index: 5; top: calc(100% + 7px); left: -76px; margin: 0; padding: 9px 10px; border: 1px solid #4a515b; border-radius: 5px; background: #191c21; box-shadow: 0 7px 20px #000b; color: #c6cbd2; font-size: 10px; font-weight: 500; line-height: 1.45; }
.project-browser-heading-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 5px; }
.project-browser-heading-actions button { padding: 5px 8px; font-size: 10px; white-space: nowrap; }
.project-list { min-height: 0; max-height: min(490px, calc(100vh - 132px)); flex: 1; padding: 7px 5px 5px; overflow-y: auto; }
.project-row { min-height: 57px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; position: relative; border-bottom: 1px solid #32373f; }
.project-row:last-child { border-bottom: 0; }
.project-row-current { background: #28352f; box-shadow: inset 3px 0 #68ad82; }
.project-row-open { min-width: 0; display: grid; align-content: center; gap: 3px; padding: 8px 10px; border-color: transparent; background: transparent; text-align: left; }
.project-row-open:hover { background: #ffffff08; }
.project-row-current .project-row-open:hover { background: #ffffff0a; }
.project-row-open strong { overflow: hidden; color: #e7e9ed; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.project-row-current .project-row-open strong { color: #f0fff5; }
.project-row-size { color: #9da4ae; font-size: 9px; font-variant-numeric: tabular-nums; }
.project-row-metadata { min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; color: #858c96; font-size: 9px; white-space: nowrap; }
.project-row-storage { min-width: 0; display: inline-flex; align-items: center; gap: 3px; }
.project-row-storage::before { content: '·'; margin-right: 1px; color: #737a84; }
.project-storage-icon { width: 13px; height: 13px; flex: none; color: #929aa4; stroke-width: 1.7; }
.project-row-menu-trigger { width: 40px; height: 36px; align-self: center; margin-right: 4px; padding: 0; border-color: transparent; background: transparent; color: #9198a2; font-size: 10px; letter-spacing: 1px; touch-action: manipulation; }
.project-row-menu-trigger:hover, .project-row-menu-trigger[aria-expanded="true"] { border-color: #464d57; background: #30353c; color: #fff; }
.project-action-menu { min-width: 128px; display: grid; position: fixed; z-index: 1200; padding: 4px; border: 1px solid #505762; border-radius: 6px; background: #24282e; box-shadow: 0 8px 24px #000c; }
.project-action-menu button { min-height: 38px; padding: 7px 10px; border-color: transparent; background: transparent; font-size: 11px; text-align: left; touch-action: manipulation; }
.project-action-menu [data-project-action="delete"] { color: #ffaea5; }
.project-rename-form { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px; padding: 7px 4px 7px 9px; }
.project-rename-form input { min-width: 0; padding: 6px; }
.project-rename-form button { padding: 5px 7px; font-size: 10px; }
.project-storage-summary { min-height: 42px; display: flex; flex: none; align-items: center; justify-content: flex-end; padding: 8px 13px; border-top: 1px solid #3a4048; background: #25292f; color: #d7dbe1; font-size: 14px; font-variant-numeric: tabular-nums; }
.project-storage-summary #project-storage-total { display: inline-flex; align-items: center; gap: 7px; }
.project-storage-summary .project-storage-icon { width: 17px; height: 17px; color: #aeb5be; }
.project-storage-summary strong { font-weight: 750; }
.project-storage-loading { width: 11px; height: 11px; border: 1.5px solid #555d67; border-top-color: #a8b0ba; border-radius: 50%; animation: project-storage-spin .75s linear infinite; }
@keyframes project-storage-spin { to { transform: rotate(360deg); } }
.project-browser[aria-busy="true"] { opacity: .7; pointer-events: none; }
.toolbar { display: flex; gap: 6px; }
.toolbar .history-button { width: 32px; min-width: 32px; height: 32px; border-color: transparent; background: transparent; color: #a1a8b1; }
.toolbar .history-button:hover { border-color: transparent; background: #ffffff0b; color: #eef0f3; }
.toolbar .history-button:focus-visible { outline: 1px solid #73b9d5; outline-offset: -2px; background: #ffffff0b; color: #f1f3f5; }
.toolbar .history-button:disabled, .toolbar .history-button:disabled:hover { border-color: transparent; background: transparent; color: #555b64; cursor: default; }
.toolbar .history-icon { width: 19px; height: 19px; stroke-width: 2; }
.toolbar #export-open { margin-left: 3px; }
#status { margin-left: auto; color: #9ca3ad; font-size: 12px; max-width: 35vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-state-indicator { width: 28px; height: 28px; display: grid; flex: none; place-items: center; border-radius: 50%; color: #8c949f; }
.save-state-indicator .ui-icon { grid-area: 1 / 1; width: 17px; height: 17px; }
.save-state-indicator .save-state-check { display: none; }
.save-state-indicator[data-state="pending"] { color: #c7a56f; }
.save-state-indicator[data-state="saving"] { color: #7fc5e2; animation: save-state-pulse .8s ease-in-out infinite alternate; }
.save-state-indicator[data-state="saved"] { color: #71cc91; }
.save-state-indicator[data-state="saved"] .save-state-disk { display: none; }
.save-state-indicator[data-state="saved"] .save-state-check { display: block; }
.save-state-indicator[data-state="error"] { color: #ff8d91; }
@keyframes save-state-pulse { to { opacity: .45; } }
.storage-durability-indicator { flex: none; padding: 3px 6px; border: 1px solid #66523a; border-radius: 4px; color: #c8aa80; font-size: 9px; white-space: nowrap; }
.storage-durability-indicator[hidden] { display: none; }
.app-menu-shell { position: relative; flex: none; }
.app-menu-trigger { width: 44px; height: 34px; display: grid; grid-template-columns: 22px 10px; place-content: center; align-items: center; gap: 1px; padding: 0; border-color: transparent; background: transparent; color: #9ba2ac; }
.app-menu-trigger:hover, .app-menu-trigger[aria-expanded="true"] { border-color: transparent; background: #ffffff0c; color: #edf0f3; }
.app-menu-trigger:focus-visible { outline: 1px solid #73b9d5; outline-offset: -2px; }
.app-menu-account-icon { width: 21px; height: 21px; }
.app-menu-chevron { width: 12px; height: 12px; transition: transform .14s ease; }
.app-menu-trigger[aria-expanded="true"] .app-menu-chevron { transform: rotate(180deg); }
.app-menu { width: 252px; position: absolute; z-index: 1650; top: calc(100% + 7px); right: 0; overflow: hidden; border: 1px solid #505762; border-radius: 7px; background: #202329; box-shadow: 0 14px 38px #000d; }
.app-menu-heading { min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #3a4048; background: #292d34; }
.app-menu-heading > span, .app-menu a > span { min-width: 0; display: grid; gap: 2px; }
.app-menu-heading strong { color: #f0f2f5; font-size: 13px; }
.app-menu small { color: #858c96; font-size: 9px; font-weight: 500; line-height: 1.3; }
#app-menu-close { display: none; }
.app-menu-group { display: grid; padding: 5px; }
.app-menu-group + .app-menu-group { border-top: 1px solid #343941; }
.app-menu-group-label { padding: 4px 7px 3px; color: #777f89; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.app-menu a { min-height: 48px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px; border-radius: 4px; color: #d9dde3; text-decoration: none; }
.app-menu a:hover, .app-menu a:focus-visible { outline: 0; background: #30353c; color: #fff; }
.app-menu a > .ui-icon { width: 20px; height: 20px; color: #aeb5be; }
.app-menu a:hover > .ui-icon, .app-menu a:focus-visible > .ui-icon { color: #ffad73; }
.app-menu a strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.app-menu a > i { color: #757d87; font-size: 18px; font-style: normal; }
.app-menu-backdrop { display: none; }
.runtime-warning { padding: 9px 14px; border-bottom: 1px solid #a43f3f; background: #521f24; color: #ffd2d2; font-size: 13px; font-weight: 700; text-align: center; }
.storage-durability-warning { min-height: 38px; display: flex; flex: none; align-items: center; justify-content: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid #8a6536; background: #403321; color: #ffe0ae; font-size: 12px; line-height: 1.35; text-align: center; }
.storage-durability-warning[hidden] { display: none; }
.storage-durability-warning.critical { border-color: #a43f3f; background: #521f24; color: #ffd2d2; }
.storage-durability-warning button { flex: none; padding: 4px 8px; border-color: #a57a42; background: #594328; color: #fff1d8; font-size: 11px; }
.workspace { min-height: 0; display: grid; flex: 1; grid-template: minmax(260px, 48%) 1fr / minmax(220px, 24%) 1fr minmax(220px, 24%); gap: 1px; background: #08090b; }
.panel { min-height: 0; background: var(--panel); overflow: hidden; }
.panel-title { height: 34px; display: flex; align-items: center; padding: 0 10px; background: #24272d; border-bottom: 1px solid var(--line); text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.panel-title #preview-resolution { margin-left: auto; color: #858c96; }
.preview-progress { max-width: calc(100% - 28px); position: absolute; z-index: 64; bottom: 10px; left: 50%; padding: 6px 8px; border: 1px solid #536473; border-radius: 5px; background: #17242de8; color: #cbe8f8; font-size: 10px; pointer-events: none; transform: translateX(-50%); }
.preview-progress.error { border-color: #a74b52; background: #4c2024ed; color: #ffe8e8; }
.preview-panel > .panel-title .panel-title-label, .inspector-panel > .panel-title { display: none; }
.mobile-sheet-heading, .mobile-sheet-close, #mobile-sheet-backdrop, #mobile-action-dock, .mobile-asset-placement { display: none; }
.media-panel { display: flex; flex-direction: column; }
.source-navigation { min-width: 0; height: 39px; position: relative; flex: none; border-bottom: 1px solid var(--line); background: #24272d; }
.source-tabs { height: 100%; display: flex; overflow-x: auto; overflow-y: hidden; padding: 0 18px 0 3px; scrollbar-width: none; }
.source-tabs::-webkit-scrollbar { display: none; }
.source-tab { min-width: 72px; height: 100%; display: inline-flex; flex: 1 0 72px; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; position: relative; border: 0; border-radius: 0; background: transparent; color: #aeb4be; font-size: 11px; font-weight: 650; white-space: nowrap; }
.source-tab::after { width: calc(100% - 16px); height: 2px; position: absolute; right: 8px; bottom: 0; left: 8px; border-radius: 2px 2px 0 0; background: transparent; content: ''; }
.source-tab .ui-icon { width: 15px; height: 15px; flex: none; }
.source-tab:hover { background: #2b2f36; color: #e2e5e9; }
.source-tab.active { background: #30343b; color: #fff; }
.source-tab.active::after { background: var(--accent); }
.source-tabs-more { width: 17px; height: 100%; display: none; position: absolute; z-index: 2; top: 0; right: 0; padding: 0 2px; color: #aeb4be; background: linear-gradient(90deg, transparent, #24272d 35%); pointer-events: none; }
.source-navigation.has-overflow .source-tabs-more { display: block; }
.source-panel { min-height: 0; display: flex; flex: 1; flex-direction: column; }
.media-import-split { flex-shrink: 0; display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 2px; position: relative; margin: 10px; }
.drop-zone { min-height: 72px; border: 1px dashed #59606b; border-radius: 4px 0 0 4px; background: #202329; color: #c9ced6; }
.media-import-more { width: 34px; min-height: 34px; align-self: stretch; border-radius: 0 4px 4px 0; color: #929aa5; }
.media-import-more .ui-icon { width: 15px; height: 15px; transition: transform .16s ease; }
.media-import-more[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.media-import-menu { min-width: 240px; position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; padding: 4px; border: 1px solid #4b515b; border-radius: 7px; background: #292d34; box-shadow: 0 8px 24px #0009; }
.media-import-menu button { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px; border: 0; background: transparent; text-align: left; }
.media-import-menu button:hover, .media-import-menu button:focus-visible { background: #363b43; }
.media-import-menu .ui-icon { width: 19px; height: 19px; color: #adb4be; }
.media-import-menu span { min-width: 0; display: grid; gap: 2px; }
.media-import-menu strong { font-size: 11px; }
.media-import-menu small { color: #8f97a2; font-size: 9px; }
.media-panel.has-media .drop-zone { min-height: 34px; padding: 5px; font-size: 0; }
.media-panel.has-media .drop-zone br, .media-panel.has-media .drop-zone span { display: none; }
.media-panel.has-media .drop-zone::after { content: 'Add media'; font-size: 12px; }
.drop-zone.dragover { border-color: var(--accent); background: #30261f; }
.drop-zone span { color: #7f8792; font-size: 11px; }
#relink-media { flex-shrink: 0; margin: 0 10px 10px; border-color: #9a633f; color: #ffad73; }
.media-source-scroll { flex: 1; min-height: 0; overflow: auto; }
.media-list { padding: 0 8px 10px; }
.media-import-progress { margin: 0 10px 9px; padding: 7px 9px; border: 1px solid #486274; border-radius: 4px; background: #1c2c36; color: #bce7ff; font-size: 10px; line-height: 1.4; }
.asset-usage { margin-top: 2px; color: #e7ad82; font-size: 9px; }
.text-source-panel { gap: 8px; padding: 10px; overflow-y: auto; }
.text-type-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 2px; border-radius: 5px; background: #17191d; }
.text-type-tabs button { min-height: 30px; padding: 4px 8px; border-color: transparent; background: transparent; font-size: 11px; }
.text-type-tabs button.active { border-color: #565d68; background: #30353d; color: #fff; }
.text-type-browser { display: grid; gap: 8px; }
.text-add-card { display: grid; min-height: 74px; align-content: center; gap: 5px; text-align: left; cursor: grab; }
.text-add-card strong { font-size: 15px; }
.text-add-card span, .source-note { color: #8d949f; font-size: 10px; line-height: 1.4; }
.text-add-card.primary-card { border-color: #7e5b45; background: linear-gradient(135deg, #34271f, #252930); }
.text-add-card.caption-card { border-color: #52796a; background: linear-gradient(135deg, #1e332d, #252930); }
.text-browser-heading { display: flex; align-items: baseline; justify-content: space-between; margin-top: 5px; color: #d9dde3; font-size: 11px; }
.text-browser-heading span { color: #858c96; font-size: 9px; }
.text-effect-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.text-effect-card { min-height: 54px; padding: 6px; overflow: hidden; color: #fff; font-size: 11px; font-weight: 700; text-align: left; text-shadow: 0 1px 3px #000; }
.text-effect-card span { display: block; margin-top: 4px; color: #d8dce2; font-size: 8px; font-weight: 500; text-transform: uppercase; }
.text-effect-card[data-mode="0"] { background: #2d3138; }
.text-effect-card[data-mode="1"] { background: linear-gradient(135deg, #ffd166, #ff4e8d); }
.text-effect-card[data-mode="2"] { border-color: #00d9ff; background: #102f3d; box-shadow: inset 0 0 14px #00d9ff66; }
.text-effect-card[data-mode="3"] { background: linear-gradient(135deg, #3b260e, #e7b94c, #6e4212); }
.text-effect-card[data-mode="4"] { background: linear-gradient(#eef4ff, #34445c 45%, #fff 55%, #526179); }
.text-effect-card[data-mode="5"] { background: repeating-linear-gradient(120deg, #ece7dc, #ece7dc 8px, #8fa7b5 9px, #ece7dc 11px); color: #18242b; text-shadow: none; }
.text-effect-card[data-mode="6"] { background: #343938; color: #f2f0df; }
.text-effect-card[data-mode="7"] { background: #4a2525; color: #ff8e86; }
.text-effect-card[data-mode="8"] { background: linear-gradient(90deg, #00ecff 0 32%, #171b23 32% 65%, #ff2da6 65%); }
.asset { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 3px 0; padding: 6px; background: #252930; border: 1px solid transparent; border-radius: 3px; cursor: grab; }
.mobile-asset-drag-handle { display: none; }
.asset:hover { border-color: #4b515c; }
.asset.timelapse-created { animation: timelapse-created-highlight 1.6s ease-out; }
.asset-created-hint { grid-column: 1 / -1; justify-self: start; padding: 4px 7px; border-radius: 999px; background: #214b38; color: #d8ffe8; font-size: 9px; animation: timelapse-created-hint 5.5s ease forwards; }
.asset-icon { display: grid; height: 32px; place-items: center; overflow: hidden; border-radius: 3px; background: #343a43; color: var(--accent); font-weight: 700; }
.asset-thumbnail { width: 100%; height: 100%; display: block; object-fit: contain; background: #111318; }
.asset-thumbnail[hidden], .asset-kind[hidden] { display: none; }
.asset-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.asset-meta { color: #8d949f; font-size: 10px; }
.asset-storage { min-height: 14px; color: #6fae83; font-size: 10px; }
.asset-actions { display: flex; align-items: center; gap: 8px; }
.asset-actions .icon-button { width: 32px; min-width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 6px; background: transparent; color: #aeb8c5; }
.asset-actions .ui-icon { width: 20px; height: 20px; }
.asset-actions .icon-button:hover { background: #ffffff10; color: #eef3fa; }
.asset-actions .asset-remove:not([aria-disabled="true"]):hover { color: #ffaaa4; background: #ed655b18; }
.asset-actions [aria-disabled="true"] { opacity: .4; cursor: default; }
.asset-relink-inline { margin-top: 4px; padding: 4px 7px; border: 1px solid #71634f; background: #393228; border-radius: 5px; color: #f0cf9c; font-size: 11px; }
.asset-storage:empty { display: none; }
.media-asset-menu { position: fixed; z-index: 1900; width: min(272px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 5px; border: 1px solid #48515e; border-radius: 10px; background: #252c36; box-shadow: 0 12px 32px #0008; }
.media-asset-menu[hidden], .media-remove-notice[hidden] { display: none !important; }
.media-asset-menu button { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 5px; background: transparent; color: #e3e9f1; text-align: left; }
.media-asset-menu button:hover, .media-asset-menu button:focus-visible { background: #ffffff0e; }
.media-asset-menu button .ui-icon { width: 20px; height: 20px; flex: 0 0 20px; color: #aebcca; }
.media-asset-menu small[hidden] { display: none; }
.media-asset-menu strong { display: block; font-size: 12px; font-weight: 500; }
.media-asset-menu small { display: block; margin-top: 4px; color: #a7b2c1; font-size: 10px; line-height: 1.4; }
.media-asset-menu .separated { margin-top: 5px; border-top: 1px solid #444d59; border-radius: 0 0 5px 5px; }
.media-asset-menu .media-menu-remove:not([aria-disabled="true"]) { color: #ffb6af; }
.media-asset-menu [aria-disabled="true"] { opacity: .5; cursor: default; }
.media-remove-notice { display: flex; align-items: center; gap: 20px; position: fixed; z-index: 1900; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); padding: 7px 8px 7px 16px; border: 1px solid #53616f; border-radius: 9px; background: #2b343f; box-shadow: 0 8px 24px #0008; color: #eef3fa; font-size: 13px; }
.media-remove-notice button { min-height: 40px; padding: 8px 12px; border: 0; background: transparent; color: #9ccaff; font-weight: 600; }
@media (pointer: coarse) {
  .asset-actions .icon-button { width: 48px; min-width: 48px; height: 48px; padding: 14px; }
  .media-asset-menu button, .media-remove-notice button, .asset-relink-inline { min-height: 48px; }
}
@media (max-width: 480px) {
  .asset-actions .asset-remove { display: none; }
}
.asset-retry { padding: 0; border: 0; background: transparent; color: #ffad73; font-size: 10px; text-decoration: underline; }
.storage-progress { margin: 7px 0 0; color: #ffad73; line-height: 1.4; }
.preview-panel { display: flex; flex-direction: column; }
.preview-workspace { min-height: 0; display: flex; flex: 1; }
.preview-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 14px; position: relative; background: #090a0c; overflow: hidden; }
.preview-stage.hand-active { cursor: grab; }
.preview-stage.hand-active.panning { cursor: grabbing; }
.preview-stage.visual-animation-active #preview-viewport { box-shadow: 0 0 0 3px #70d7ff, 0 0 18px #70d7ff77; }
#preview-viewport { --viewer-inverse-zoom: 1; isolation: isolate; position: relative; width: 270px; height: 480px; flex: none; transform-origin: center; }
#preview-canvas { display: block; position: relative; z-index: 1; width: 100%; height: 100%; background: #050506; outline: 2px solid #727983; box-shadow: 0 0 0 3px #050608, 0 8px 24px #000c; }
#motion-path-overlay { display: block; position: absolute; z-index: 40; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#motion-path-handles { position: absolute; z-index: 41; inset: 0; pointer-events: none; }
.motion-keyframe-point { position: absolute; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; transform: translate(-50%, -50%); cursor: move; pointer-events: auto; touch-action: none; }
.motion-keyframe-point::before { content: ''; position: absolute; inset: 8px; border: 2px solid #e9faff; border-radius: 50%; background: #1c708d; box-shadow: 0 0 0 1px #10252e, 0 0 7px #70d7ffaa; }
.motion-keyframe-point.current::before { background: #ff8a4c; }
.motion-keyframe-point:only-child::before { inset: 5px; border-width: 3px; box-shadow: 0 0 0 2px #10252e, 0 0 12px #70d7ff; }
.motion-keyframe-point:only-child::after { content: ''; position: absolute; inset: 1px; border: 1px dashed #70d7ff; border-radius: 50%; }
.motion-keyframe-point:hover, .motion-keyframe-point:focus-visible { background: transparent; outline: none; }
.motion-keyframe-point:hover::before, .motion-keyframe-point:focus-visible::before { inset: 6px; border-color: #fff; }
#visual-animation-indicator { position: absolute; z-index: 42; padding: 3px 6px; border: 1px solid #70d7ff; border-radius: 3px; background: #10252edd; box-shadow: 0 0 8px #70d7ff88; color: #dff8ff; font-size: 9px; font-weight: 800; letter-spacing: .06em; pointer-events: none; text-transform: uppercase; }
#transform-box { position: absolute; z-index: 30; border: calc(1.5px * var(--viewer-inverse-zoom)) solid #ffad73; box-shadow: 0 0 0 calc(1px * var(--viewer-inverse-zoom)) #000b; cursor: move; pointer-events: auto; transform-origin: center; }
#text-edit-overlay { position: absolute; z-index: 50; min-width: 1px; min-height: 1em; margin: 0; padding: 0; border: 0; outline: calc(1.5px * var(--viewer-inverse-zoom)) dashed #ffad73; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: #fff; white-space: pre; overflow: visible; transform-origin: center; }
#text-edit-overlay::selection, #text-edit-overlay *::selection { background: #e8793a80; }
#timeline-text-editor { position: fixed; z-index: 1200; box-sizing: border-box; min-width: 220px; padding: 6px; border: 2px solid #ffad73; border-radius: 6px; background: #202329; box-shadow: 0 10px 28px #000c; -webkit-user-select: text; user-select: text; }
#timeline-text-edit-overlay { display: block; box-sizing: border-box; width: 100%; min-height: 68px; max-height: min(180px, 40vh); padding: 8px; resize: vertical; border: 1px solid #4b515b; border-radius: 3px; outline: 0; background: #17191d; color: #f1f3f6; font: 16px/1.35 system-ui, sans-serif; }
#timeline-text-edit-overlay::selection { background: #e8793aaa; }
.transform-handle, .rotation-handle { position: absolute; width: calc(12px * var(--viewer-inverse-zoom)); height: calc(12px * var(--viewer-inverse-zoom)); border: calc(1px * var(--viewer-inverse-zoom)) solid white; border-radius: 50%; background: var(--accent); }
.transform-handle.top-left { top: calc(-6px * var(--viewer-inverse-zoom)); left: calc(-6px * var(--viewer-inverse-zoom)); cursor: nwse-resize; }
.transform-handle.top-right { top: calc(-6px * var(--viewer-inverse-zoom)); right: calc(-6px * var(--viewer-inverse-zoom)); cursor: nesw-resize; }
.transform-handle.bottom-left { bottom: calc(-6px * var(--viewer-inverse-zoom)); left: calc(-6px * var(--viewer-inverse-zoom)); cursor: nesw-resize; }
.transform-handle.bottom-right { right: calc(-6px * var(--viewer-inverse-zoom)); bottom: calc(-6px * var(--viewer-inverse-zoom)); cursor: nwse-resize; }
.rotation-stem { position: absolute; left: 50%; bottom: calc(-31px * var(--viewer-inverse-zoom)); width: calc(1px * var(--viewer-inverse-zoom)); height: calc(25px * var(--viewer-inverse-zoom)); background: #ffad73; transform: translateX(-50%); pointer-events: none; }
.crop-handle { display: none; }
.rotation-handle { left: 50%; bottom: calc(-40px * var(--viewer-inverse-zoom)); transform: translateX(-50%); cursor: crosshair; }
.preview-panel:fullscreen { width: 100vw; height: 100vh; background: #090a0c; }
.preview-panel:fullscreen .panel-title { display: none; }
.inspector-panel { overflow-y: auto; }
.settings-section { padding: 9px; border-bottom: 1px solid var(--line); font-size: 11px; }
.settings-section summary { cursor: pointer; color: #d4d8de; font-weight: 700; }
/* Project settings becomes the desktop inspector's aligned, meaningful top header. */
body:not(.is-mobile-workspace) #project-properties { padding: 0 9px 9px; }
body:not(.is-mobile-workspace) #project-properties > summary { height: 34px; margin: 0 -9px; padding: 9px 10px 8px; border-bottom: 1px solid var(--line); background: #24272d; text-transform: uppercase; letter-spacing: .06em; }
body:not(.is-mobile-workspace) #project-properties:not([open]) { padding-bottom: 0; }
.settings-note { color: #858c96; line-height: 1.4; }
.property-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 9px 0; }
.property-grid label { display: grid; gap: 3px; color: #999fa9; }
.property-grid .wide { grid-column: 1 / -1; }
.property-grid input, .property-grid select { min-width: 0; width: 100%; padding: 4px; }
.property-grid textarea { min-width: 0; width: 100%; padding: 5px; resize: vertical; }
.property-grid label > span { display: flex; align-items: center; gap: 6px; }
.property-grid label > span output { min-width: 42px; color: #d9dde3; text-align: right; }
.property-label { color: #999fa9; }
.animated-property { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px; color: #999fa9; }
.animated-property > input { grid-column: 1 / -1; }
.animated-property.active { color: #ffd0b3; }
.animated-property-title { align-self: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keyframe-controls { display: flex; gap: 1px; }
.keyframe-controls button { width: 19px; min-width: 19px; height: 18px; padding: 0; border-color: transparent; background: transparent; color: #7f8792; font-size: 10px; line-height: 16px; }
.keyframe-controls button:hover, .keyframe-controls button:focus-visible { border-color: #525a65; color: #e7ebf0; }
.keyframe-controls [data-keyframe-toggle].keyed { color: #ff9a62; }
.keyframe-controls [data-keyframe-toggle].animated:not(.keyed) { color: #70c8e8; }
.animation-group-actions { display: flex; gap: 5px; margin-top: 8px; }
.animation-group-actions button { flex: 1; padding: 4px 6px; font-size: 10px; }
.visual-animation-toggle { border-color: #40454e; background: #292d33; color: #aeb4bc; box-shadow: none; }
.visual-animation-toggle:hover { border-color: #505762; background: #353a42; color: #d9dde3; }
.visual-animation-toggle.active, .visual-animation-toggle[aria-pressed="true"] { border-color: #70d7ff; background: #173d4b; color: #bcefff; box-shadow: inset 0 0 0 1px #70d7ff77, 0 0 8px #70d7ff44; }
.transform-tool-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.transform-key-navigation { display: flex; gap: 2px; }
.transform-key-navigation button { width: 24px; height: 24px; padding: 0; }
.transform-key-navigation #animation-toolbar-toggle.keyed { border-color: #e8793a; color: #ff9a62; }
#visual-animation-status { min-width: 0; color: #929ba6; font-size: 9px; line-height: 1.2; }
.keyframe-settings-back { width: 100%; margin: 7px 0; text-align: left; }
.inspector-panel.keyframe-context > .settings-section:not(#keyframe-settings) { display: none !important; }
.keyframe-settings-title { margin: 7px 0 5px; color: #ffd1b5; font-size: 12px; font-weight: 700; }
.keyframe-time-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 6px; margin: 7px 0; color: #aeb6c0; font-size: 10px; }
.keyframe-time-row input { min-width: 0; color: #cbd3dc; }
.keyframe-settings-navigation, .keyframe-danger-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 7px 0; }
.keyframe-danger-actions button { border-color: #6e4646; color: #ffb8ad; }
.curve-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.curve-presets button { padding: 4px 3px; font-size: 9px; }
.curve-presets button.active { border-color: #e8793a; background: #453027; color: #ffd8c0; }
#animation-curve-canvas { width: 100%; height: 150px; display: block; margin-top: 7px; border: 1px solid #3b424c; background: #171a1e; cursor: crosshair; touch-action: none; }
#animation-curve-canvas.unavailable { cursor: default; }
.bezier-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin-top: 6px; }
.bezier-controls label { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 3px; color: #9ba3ad; font-size: 9px; }
.bezier-controls input { width: 100%; min-width: 0; }
.bezier-controls button { grid-column: 1 / -1; }
.font-picker { display: grid; position: relative; gap: 3px; }
.font-picker-trigger { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; width: 100%; padding: 5px 7px; text-align: left; }
.font-picker-trigger > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font-trigger-state { color: #8fbda0; font-size: 11px; }
.font-picker-popover { position: fixed; z-index: 1000; max-height: calc(100vh - 16px); padding: 6px; border: 1px solid #505762; border-radius: 5px; background: #202329; box-shadow: 0 10px 30px #000b; }
.font-picker-tools { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 5px; margin-bottom: 5px; }
.font-picker-tools input { width: 100%; min-width: 0; padding: 5px 7px; }
.font-picker-tools button { padding: 4px; color: #e4b95e; }
.font-picker-tools button[aria-pressed="true"] { border-color: #c99443; background: #493b27; }
.font-list { height: min(252px, calc(100vh - 80px)); position: relative; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #343941; border-radius: 3px; background: #181b1f; }
.font-list-spacer { position: relative; min-height: 1px; }
.font-list-window { position: absolute; top: 0; right: 0; left: 0; }
.font-row { height: 42px; display: grid; grid-template-columns: minmax(0, 1fr) 52px 28px 28px; align-items: center; gap: 3px; padding: 3px 4px 3px 8px; border-bottom: 1px solid #2d3239; cursor: pointer; }
.font-row:hover, .font-row:focus { outline: 0; background: #30353d; }
.font-row[aria-selected="true"] { box-shadow: inset 3px 0 #e8793a; background: #352d29; }
.font-row-name { overflow: hidden; color: #e3e6eb; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.font-row small { overflow: hidden; color: #777f8a; font-size: 8px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.font-row-icon { width: 26px; height: 26px; padding: 0; border-color: transparent; background: transparent; color: #98a1ad; }
.font-row-icon:disabled { opacity: 1; color: #70a783; cursor: default; }
.font-row-icon.font-favorite { color: #e4b95e; font-size: 15px; }
.font-list-empty { padding: 24px 8px; color: #777f8a; font-size: 11px; text-align: center; }
.text-advanced { padding: 3px 0; border-top: 1px solid #333840; border-bottom: 1px solid #333840; }
.text-advanced > summary { padding: 4px 0; color: #aeb4bd; cursor: pointer; }
.text-advanced > .property-grid { padding-top: 6px; }
.control-unavailable { opacity: .45; }
.clip-identity output { overflow: hidden; color: #d9dde3; text-overflow: ellipsis; white-space: nowrap; }
.property-grid .toggle { display: flex; grid-template-columns: auto 1fr; align-items: center; justify-content: start; }
.property-grid .toggle input { width: auto; }
.storage-setting-row { position: relative; display: flex; align-items: center; gap: 5px; }
.storage-setting-row > .toggle { flex: 1; }
.storage-setting-help { position: relative; }
.storage-setting-help summary { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid #505762; border-radius: 50%; color: #aeb4bd; cursor: help; font-size: 11px; list-style: none; }
.storage-setting-help summary::-webkit-details-marker { display: none; }
.storage-setting-help[open] summary { border-color: #d16c3c; color: #ffad73; }
.storage-setting-help > div { position: absolute; z-index: 100; top: 24px; right: 0; width: min(330px, calc(100vw - 36px)); padding: 9px 10px; border: 1px solid #505762; border-radius: 5px; background: #15171b; box-shadow: 0 9px 25px #000c; color: #d5d9df; font-size: 11px; line-height: 1.45; }
.transport { min-height: 42px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 4px 8px; border-top: 1px solid var(--line); }
.transport-controls, .viewer-tools { display: flex; align-items: center; gap: 5px; }
.transport-controls .transport-icon { width: 16px; height: 16px; pointer-events: none; }
.transport-controls #play-button .transport-icon { width: 18px; height: 18px; }
.mobile-frame-step-icon { display: none; }
.viewer-tools.left { justify-content: flex-start; }
.viewer-tools.right { justify-content: flex-end; }
.viewer-tools select { min-width: 66px; max-width: 112px; padding: 5px; font-size: 11px; }
.viewer-tools button { padding: 5px 8px; font-size: 11px; }
#preview-hand[aria-pressed="true"] { border-color: #ffad73; background: #453024; color: #ffd2b4; }
#preview-audio-mute[hidden] { display: none; }
#preview-audio-mute[aria-pressed="true"] { border-color: #e68a52; background: #493127; color: #ffb481; }
#preview-audio-mute[aria-pressed="false"] .preview-audio-off, #preview-audio-mute[aria-pressed="true"] .preview-audio-on { display: none; }
.preview-audio-state { max-width: 100px; overflow: hidden; padding: 2px 6px; border: 1px solid #52606c; border-radius: 9px; background: #252b31; color: #b9c5cf; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.preview-audio-state[hidden] { display: none; }
.preview-audio-state[data-state="failure"] { border-color: #9a633f; color: #ffc39a; }
.compact-audio-meter { --meter-left: 0; --meter-right: 0; }
.compact-audio-meter-bars { width: 15px; height: 20px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 2px; border-radius: 2px; background: #15181c; }
.compact-audio-meter-bars i { width: 4px; min-height: 1px; height: 1px; border-radius: 1px 1px 0 0; background: linear-gradient(to top, #4ab977 0 72%, #e4bd55 72% 90%, #ed655e 90%); box-shadow: 0 0 3px #4ab97766; transition: height 45ms linear; }
.compact-audio-meter[aria-expanded="true"] { color: #aeeaff !important; filter: drop-shadow(0 0 4px #4acdf688); }
.transport button { min-width: 34px; }
#time-display { margin-left: 10px; min-width: 95px; font: 12px ui-monospace, monospace; }
.timeline-panel { grid-column: 1 / -1; display: flex; flex-direction: column; -webkit-user-select: none; user-select: none; }
.timeline-tools-shell { min-width: 0; position: relative; flex: none; }
.timeline-tools { height: 40px; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 3px 10px; overflow: visible; border-bottom: 1px solid var(--line); color: #8f969f; font-size: 11px; }
.timeline-tools-overflow { display: none; }
.timeline-action-group, .timeline-connection-actions, .timeline-zoom-controls { display: flex; align-items: center; gap: 4px; }
.timeline-zoom-controls { margin-left: auto; }
.timeline-zoom-controls input { width: clamp(90px, 14vw, 180px); }
.timeline-follow-toggle[aria-pressed="true"] { border-color: #e68a52; background: #493127; color: #ffb481; box-shadow: inset 0 0 0 1px #e68a5266; }
/* Desktop tool strips use quiet button chrome so their panel borders remain visually continuous. */
body:not(.is-mobile-workspace) .transport .icon-button, body:not(.is-mobile-workspace) .timeline-tools .icon-button { width: 30px; min-width: 30px; height: 30px; border-color: transparent; background: transparent; color: #9299a3; box-shadow: none; }
body:not(.is-mobile-workspace) .transport .icon-button:hover, body:not(.is-mobile-workspace) .timeline-tools .icon-button:hover { border-color: transparent; background: #ffffff0b; color: #e5e8ec; }
body:not(.is-mobile-workspace) .transport .icon-button:focus-visible, body:not(.is-mobile-workspace) .timeline-tools .icon-button:focus-visible { outline: 1px solid #73b9d5; outline-offset: -2px; background: #ffffff0b; color: #f1f3f5; }
body:not(.is-mobile-workspace) .transport .icon-button[aria-disabled="true"], body:not(.is-mobile-workspace) .timeline-tools .icon-button[aria-disabled="true"], body:not(.is-mobile-workspace) .transport .icon-button:disabled, body:not(.is-mobile-workspace) .timeline-tools .icon-button:disabled { color: #575d66; }
body:not(.is-mobile-workspace) .transport .icon-button[aria-disabled="true"]:hover, body:not(.is-mobile-workspace) .timeline-tools .icon-button[aria-disabled="true"]:hover, body:not(.is-mobile-workspace) .transport .icon-button:disabled:hover, body:not(.is-mobile-workspace) .timeline-tools .icon-button:disabled:hover { background: transparent; color: #575d66; }
body:not(.is-mobile-workspace) #preview-hand[aria-pressed="true"], body:not(.is-mobile-workspace) #preview-audio-mute[aria-pressed="true"], body:not(.is-mobile-workspace) .timeline-follow-toggle[aria-pressed="true"] { border-color: transparent; background: transparent; color: #ff9f66; filter: drop-shadow(0 0 4px #e8793a88); box-shadow: none; }
body:not(.is-mobile-workspace) .visual-animation-toggle, body:not(.is-mobile-workspace) .visual-animation-toggle:hover { border-color: transparent; box-shadow: none; }
body:not(.is-mobile-workspace) .visual-animation-toggle.active, body:not(.is-mobile-workspace) .visual-animation-toggle[aria-pressed="true"] { border-color: transparent; background: transparent; color: #72ddff; filter: drop-shadow(0 0 4px #4acdf688); box-shadow: none; }
.sequencer { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.timeline-scroll { position: absolute; inset: 0; overflow: auto; overflow-anchor: none; background: #14161a; }
.timeline-content { position: relative; min-width: 100%; min-height: 100%; width: 1200px; }
.ruler { height: var(--ruler); position: sticky; top: 0; z-index: 8; overflow: hidden; border-bottom: 1px solid #3a3e45; background: #22252a; user-select: none; }
.tick { position: absolute; bottom: 0; height: 8px; border-left: 1px solid #6f7680; color: #9198a2; font: 9px ui-monospace, monospace; padding: 0 0 10px 3px; }
#track-lanes { position: absolute; right: 0; left: 0; display: flex; flex-direction: column; }
.track-lane { height: 54px; position: relative; flex-shrink: 0; border-top: 1px solid #292e35; border-bottom: 1px solid #3a4049; background: #1a1d22; transition: background-color 90ms ease, box-shadow 90ms ease; }
.track-lane.title-track { height: 32px; background: #1d1921; }
.track-lane.caption-track { height: 32px; background: #172326; }
.track-lane.audio-track { height: 42px; background: #182019; }
.track-lane.dragover { background: #25231d; }
.track-lane.title-drop-target { box-shadow: inset 0 3px #bd7dca; background: #28202c; }
.track-lane.caption-drop-blocked { box-shadow: inset 0 0 0 2px #c95252; background: #352123; }
.track-lane.dragover::after { content: ''; position: absolute; z-index: 7; top: 2px; bottom: 2px; left: var(--drop-x, 0); width: 2px; background: #ffad73; pointer-events: none; }
.track-lane.clip-drop-target { background: #28261f; box-shadow: inset 0 0 0 1px #bd875f; }
.track-lane.clip-drop-main-target { background: #29271f; box-shadow: inset 0 2px #ffad73, inset 0 0 0 1px #a76a42; }
.track-lane.clip-drop-invalid { background: #302023; box-shadow: inset 0 0 0 1px #b95858; }
.clip-drop-preview { height: calc(100% - 8px); position: absolute; z-index: 8; top: 4px; min-width: 10px; border: 2px dashed #ffd0a0; border-radius: 4px; background: #ffad7324; box-shadow: 0 0 9px #e8793a55; pointer-events: none; }
.clip-drop-lane-preview { position: absolute; left: 0; right: 0; z-index: 7; background: #ffad7312; box-shadow: inset 0 0 0 1px #bd875f; pointer-events: none; }
.new-overlay-lane { height: 24px; border: 1px dashed transparent; background: transparent; }
.new-overlay-lane.dragover { border-color: #59606b; background: #25231d; }
.timeline-content.overlay-drop-active { box-shadow: inset 0 0 0 1px #59606b; }
.main-track { background: #20242a; box-shadow: inset 0 2px #59616d; }
.track-kind-label { position: absolute; z-index: 0; top: 4px; right: 7px; color: #737b86; font-size: 9px; text-transform: uppercase; pointer-events: none; }
.empty-main-track { border: 1px dashed #59616d; }
.main-track-prompt { position: absolute; inset: 0; display: grid; place-items: center; color: #858d98; font-size: 11px; pointer-events: none; }
.clip { position: absolute; z-index: 1; top: 5px; height: 44px; min-width: 10px; overflow: hidden; border: 1px solid #5688a6; border-radius: 4px; background: #285c78; cursor: grab; user-select: none; }
.clip.audio { border-color: #61a071; background: #356744; }
.clip.image { border-color: #8d79c6; background: #514478; }
.clip.text { border-color: #bd7dca; background: #674173; }
.clip.text { touch-action: none; }
.clip.text.caption { border-color: #66aa9a; background: #315f5c; }
.clip.text.caption.orphan { border-color: #d36565; background: #64383d; }
.title-track .clip, .caption-track .clip { top: 3px; height: 26px; }
.title-track .clip-caption, .caption-track .clip-caption { top: 2px; padding-top: 1px; padding-bottom: 1px; }
.title-track .clip-time, .caption-track .clip-time { display: none; }
.title-track .clip-label, .caption-track .clip-label { line-height: 16px; }
.audio-track .clip { top: 4px; height: 34px; }
.clip.text.connected::before { content: '◆'; position: absolute; z-index: 5; top: 1px; left: 2px; color: #ffe0a8; font-size: 8px; }
.clip.connection-parent, .clip.connection-parent-preview { box-shadow: inset 0 0 0 3px #f0bd6d, 0 0 0 1px #e9b35e99, 0 0 7px #e9b35e66; }
.clip.title-snap-parent { box-shadow: inset 0 0 0 2px #ffd07a, 0 0 8px #d4903c99; }
.clip.selected { border: 2px solid #fff0c8; box-shadow: 0 0 0 1px #e67a3b; }
.clip.dragging { z-index: 20; opacity: .82; will-change: transform; }
.clip.dragging.clip-drop-invalid { border-color: #ff8f83; box-shadow: 0 0 0 1px #b94d4d; }
.clip.drag-ripple-preview { z-index: 4; will-change: transform; transition: transform 90ms cubic-bezier(.2, .75, .25, 1); }
@media (prefers-reduced-motion: reduce) {
  .track-lane, .clip-drop-preview, .clip.drag-ripple-preview { transition: none; }
}
.clip.audio-muted { border-style: dashed; }
.clip.audio-muted .clip-thumbnails { opacity: .32; }
.clip.audio-muted .clip-caption { max-width: calc(100% - 30px); }
.audio-effect-heading { display: grid; gap: 2px; margin: 18px 0 9px; padding-top: 13px; border-top: 1px solid #393e46; }
.audio-effect-heading strong { color: #e5e8ec; font-size: 12px; }
.audio-effect-heading span { color: #858c96; font-size: 9px; }
.audio-effect-browser-shell { position: relative; }
.audio-effect-browser-trigger { width: 100%; min-height: 48px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px 10px; border-color: #505762; background: #2a2f36; text-align: left; }
.audio-effect-browser-trigger:hover, .audio-effect-browser-trigger[aria-expanded="true"] { border-color: #6c747f; background: #30363e; }
.audio-effect-browser-trigger > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.audio-effect-browser-trigger strong { color: #eef0f3; font-size: 11px; }
.audio-effect-browser-trigger small { overflow: hidden; color: #8e96a1; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.audio-effect-browser-plus { position: relative; width: 28px; height: 28px; display: block; border-radius: 50%; background: #e8793a; color: #fff; font-size: 0; }
.audio-effect-browser-plus::before, .audio-effect-browser-plus::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); }
.audio-effect-browser-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.audio-effect-browser-chevron { color: #929aa5; font-size: 20px; transform: rotate(90deg); }
.audio-effect-browser-trigger[aria-expanded="true"] .audio-effect-browser-chevron { transform: rotate(-90deg); }
.audio-effect-browser { width: min(420px, calc(100vw - 24px)); max-width: none; max-height: min(620px, calc(100vh - 48px)); margin: auto; padding: 0; overflow: hidden; border: 1px solid #59616c; border-radius: 9px; background: #20242a; box-shadow: 0 18px 48px #000e; color: #d9dde3; }
.audio-effect-browser::backdrop { background: #07090bb3; }
.audio-effect-browser-search { display: grid; grid-template-columns: auto minmax(0, 1fr) 30px; align-items: center; gap: 5px; padding: 7px; border-bottom: 1px solid #3a4048; background: #292e35; color: #8e96a1; }
.audio-effect-browser-search input { min-width: 0; height: 34px; padding: 6px 8px; border-color: #4b525c; background: #1d2025; }
.audio-effect-browser-search button { width: 30px; height: 30px; padding: 0; border-color: transparent; background: transparent; color: #9ba2ac; font-size: 17px; }
.audio-effect-browser-results { max-height: min(520px, calc(100vh - 126px)); padding: 5px; overflow-y: auto; }
.audio-effect-browser-results section + section { margin-top: 5px; padding-top: 5px; border-top: 1px solid #343a42; }
.audio-effect-browser-results h4 { margin: 0; padding: 5px 7px 4px; color: #7f8792; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.audio-effect-browser-item { width: 100%; min-height: 48px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; align-items: center; gap: 8px; padding: 6px 7px; border-color: transparent; background: transparent; text-align: left; }
.audio-effect-browser-item:hover, .audio-effect-browser-item:focus-visible { border-color: transparent; outline: 0; background: #30363e; }
.audio-effect-browser-item > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.audio-effect-browser-item strong { color: #e6e9ed; font-size: 11px; }
.audio-effect-browser-item small { overflow: hidden; color: #858d98; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.audio-effect-browser-badge { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #59616c; border-radius: 5px; background: #30363d; color: #b7c2cd; font-size: 8px; font-weight: 800; }
.audio-effect-browser-item.preset .audio-effect-browser-badge { border-color: #805b43; background: #3b2c24; color: #ffbd91; }
.audio-effect-browser-none { padding: 18px; color: #8e96a1; text-align: center; }
.audio-effect-list { display: grid; gap: 8px; margin-top: 10px; }
.audio-effect-empty { display: grid; gap: 3px; padding: 13px 10px; border: 1px dashed #454c55; border-radius: 6px; color: #858d98; text-align: center; }
.audio-effect-empty strong { color: #b8bec7; font-size: 10px; }
.audio-effect-empty span { font-size: 9px; }
.audio-effect-card { border: 1px solid #454c55; border-radius: 7px; background: #24282e; }
.audio-effect-card > summary { min-height: 48px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 5px 6px; cursor: pointer; list-style: none; }
.audio-effect-card > summary::-webkit-details-marker { display: none; }
.audio-effect-grip { color: #747c87; font-size: 17px; cursor: grab; user-select: none; }
.audio-effect-card-title { min-width: 0; display: grid; gap: 2px; }
.audio-effect-card-title strong { overflow: hidden; color: #e5e8ec; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.audio-effect-card-title small { color: #7f8792; font-size: 8px; text-transform: uppercase; }
.audio-effect-actions { display: flex; align-items: center; gap: 2px; }
.audio-effect-actions button { width: 28px; min-width: 28px; height: 28px; padding: 0; border-color: transparent; background: transparent; color: #929aa5; font-size: 11px; }
.audio-effect-actions button:hover { border-color: #4c535d; background: #30363e; color: #fff; }
.audio-effect-actions .audio-effect-bypass { width: 34px; color: #7fc08f; font-size: 9px; font-weight: 700; }
.audio-effect-card.is-bypassed .audio-effect-bypass { color: #d29a78; }
.audio-effect-actions .audio-effect-remove:hover { color: #ffaaa0; }
.audio-effect-actions .audio-effect-automation[aria-pressed="true"] { color: #72ddff; background: #173743; }
.audio-effect-parameters { display: grid; gap: 11px; padding: 11px 10px 12px; border-top: 1px solid #3b4149; }
.audio-effect-card.is-bypassed .audio-effect-parameters { opacity: .42; pointer-events: none; }
.audio-effect-parameters label { display: grid; gap: 5px; color: #a4abb4; font-size: 10px; }
.audio-parameter-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.audio-parameter-value { display: grid; grid-template-columns: minmax(0, 1fr) 58px; align-items: center; gap: 8px; }
.audio-keyframe-controls { display: flex; align-items: center; gap: 1px; }
.audio-keyframe-controls button { width: 22px; height: 22px; padding: 0; border-color: transparent; background: transparent; color: #737b86; font-size: 10px; }
.audio-keyframe-controls button.animated { color: #e9894f; }
.audio-keyframe-controls button.keyed { color: #fff1bd; text-shadow: 0 0 5px #f09a54; }
.audio-keyframe-controls button:disabled { opacity: .3; }
.audio-parameter-static { color: #68717c; font-size: 8px; text-transform: uppercase; }
.audio-effect-parameters select { min-height: 32px; padding: 5px 7px; }
.audio-effect-parameters output { color: #d8dce2; font: 9px ui-monospace, monospace; text-align: right; }
.audio-effect-more { display: grid; gap: 10px; padding-top: 4px; border-top: 1px solid #363c44; }
.audio-effect-more:not([open]) { display: block; }
.audio-effect-more > summary { padding-top: 5px; color: #8f97a1; cursor: pointer; font-size: 9px; }
.audio-monitor-dock { width: var(--audio-monitor-width, 270px); min-width: 220px; max-width: min(42%, 420px); display: flex; flex: none; flex-direction: column; padding: 10px; overflow: auto; resize: horizontal; border-left: 1px solid var(--line); background: #1d2025; }
.audio-monitor-dock-heading { min-height: 30px; display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #393e46; color: #d8dde3; font-size: 11px; }
.audio-monitor-dock-heading .mobile-sheet-close { width: 28px; min-width: 28px; height: 28px; display: grid; place-items: center; padding: 4px; border-color: transparent; background: transparent; }
.audio-monitor { display: grid; gap: 9px; padding-top: 10px; }
.audio-monitor-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.audio-monitor-heading strong { color: #d8dde3; font-size: 11px; }
.audio-monitor-heading select { min-width: 0; max-width: 160px; height: 30px; padding: 4px 6px; font-size: 9px; }
.audio-monitor-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.audio-monitor-tabs button { min-height: 28px; padding: 3px 6px; border-color: #3d444d; background: #24282e; color: #9098a2; font-size: 9px; }
.audio-monitor-tabs button[aria-pressed="true"] { border-color: #52778a; background: #243842; color: #aeeaff; }
.audio-monitor canvas { width: 100%; height: 76px; border: 1px solid #353b43; border-radius: 4px; background: #171a1f; }
.audio-monitor output { color: #87909b; font: 9px ui-monospace, monospace; text-align: right; }
.clip-muted-indicator { position: absolute; z-index: 5; top: 4px; right: 5px; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #17191de6; color: #ffb481; pointer-events: none; }
.clip-muted-indicator[hidden] { display: none; }
.clip-muted-indicator .ui-icon { width: 12px; height: 12px; stroke-width: 2.2; }
.clip.micro-clip { min-width: 10px; background-image: repeating-linear-gradient(135deg, #285c78 0 3px, #1c455c 3px 6px); }
.clip.micro-clip.audio { background-image: repeating-linear-gradient(135deg, #356744 0 3px, #244b31 3px 6px); }
.clip.micro-clip.image { background-image: repeating-linear-gradient(135deg, #514478 0 3px, #3d345d 3px 6px); }
.clip.micro-clip.text { background-image: repeating-linear-gradient(135deg, #674173 0 3px, #4e3058 3px 6px); }
.clip-thumbnails { position: absolute; inset: 0; overflow: hidden; opacity: .72; pointer-events: none; }
.clip-thumbnails img { position: absolute; top: 0; height: 100%; object-fit: cover; background: #11151a; }
.clip-waveform { position: absolute; z-index: 1; right: 2px; bottom: 2px; left: 2px; width: calc(100% - 4px); height: 48%; opacity: .75; pointer-events: none; }
.clip.audio .clip-waveform { top: 2px; height: calc(100% - 4px); }
.clip.audio-muted .clip-waveform { opacity: .25; }
.clip-automation-curve { display: none; position: absolute; z-index: 5; inset: 4px 7px; width: calc(100% - 14px); height: calc(100% - 8px); overflow: visible; pointer-events: none; }
.clip-automation-curve polyline { fill: none; stroke: #72ddff; stroke-width: 1.5; filter: drop-shadow(0 0 2px #173743); }
.clip.audio-automation-mode .clip-automation-curve { display: block; }
.clip.audio-automation-mode .clip-waveform { opacity: .3; }
.clip-caption { position: absolute; z-index: 2; top: 3px; left: 4px; max-width: calc(100% - 8px); padding: 2px 4px; border-radius: 3px; background: #080b0eb8; pointer-events: none; }
.clip-label, .clip-time { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; line-height: 13px; text-shadow: 0 1px 2px #000; }
.clip-time { color: #d6eef9; font-size: 9px; line-height: 11px; }
.clip.compact-clip .clip-thumbnails, .clip.compact-clip .clip-time, .clip.compact-clip .clip-streams { display: none; }
.clip.short-clip .clip-time { display: none; }
.clip.micro-clip .clip-caption { display: none; }
.clip-streams { position: absolute; z-index: 3; right: 8px; bottom: 4px; padding: 1px 4px; border-radius: 3px; background: #111a; color: #d9f0df; font-size: 8px; font-weight: 700; pointer-events: none; }
.clip-keyframes { position: absolute; z-index: 6; right: var(--trim-zone, 7px); bottom: 0; left: var(--trim-zone, 7px); height: 16px; pointer-events: none; }
.clip-keyframe { position: absolute; bottom: 0; width: 28px; height: 20px; padding: 0; border: 0; background: transparent; box-shadow: none; transform: translateX(-50%); pointer-events: auto; cursor: pointer; touch-action: none; }
.clip-keyframe::before { content: ''; position: absolute; bottom: 3px; left: 10px; width: 8px; height: 8px; border: 1px solid #fff1cf; border-radius: 1px; background: #e9894f; box-shadow: 0 0 0 1px #101216aa; transform: rotate(45deg); }
.clip-keyframe.aggregate::before { border-color: #cceeff; background: #3e9ebf; }
.clip-keyframe.current::before { background: #fff4bb; box-shadow: 0 0 0 2px #e8783b; }
.clip-keyframe.snap-target::before { width: 11px; height: 11px; bottom: 2px; left: 8px; border-color: #fff7c2; background: #ffd36b; box-shadow: 0 0 0 2px #6a4a1d, 0 0 8px #ffd36b; }
.clip-keyframe:hover, .clip-keyframe:focus-visible { outline: 1px solid #ffd1b555; outline-offset: -2px; }
.clip.animation-mode .clip-keyframes { top: 0; height: auto; }
.clip-keyframe.visual-animation-marker { height: 100%; }
.clip-keyframe.visual-animation-marker::after { content: ''; position: absolute; top: 5px; bottom: 14px; left: 13px; width: 1px; background: #a9d9e666; }
.clip-keyframe.cluster::before { bottom: 4px; left: 7px; border-color: #cceeff; background: #3e9ebf; box-shadow: 3px -3px 0 -1px #235f76, 3px -3px 0 0 #cceeff; }
.clip-keyframe.cluster::after { display: none; }
.keyframe-cluster-count { position: absolute; right: 0; bottom: 11px; min-width: 13px; height: 13px; padding: 0 3px; border: 1px solid #bfeeff; border-radius: 7px; background: #174b60; color: #effbff; font-size: 8px; font-weight: 700; line-height: 11px; text-align: center; text-shadow: 0 1px #000; }
.keyframe-context-menu { position: fixed; z-index: 1400; display: grid; width: 210px; padding: 5px; border: 1px solid #59616c; border-radius: 5px; background: #20242a; box-shadow: 0 12px 30px #000c; }
.keyframe-context-menu button { width: 100%; padding: 6px 8px; border-color: transparent; background: transparent; text-align: left; }
.keyframe-context-menu button:hover, .keyframe-context-menu button:focus-visible { border-color: #59616c; background: #2b3138; }
.keyframe-context-menu button.active { color: #ffd1b5; }
.keyframe-context-menu > button:last-child { color: #ffb4aa; }
.keyframe-context-heading { padding: 5px 8px 3px; color: #8f98a3; font-size: 9px; text-transform: uppercase; }
.keyframe-context-easing { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 4px; border-bottom: 1px solid #373d45; padding-bottom: 5px; }
.keyframe-context-easing button { font-size: 10px; }
.trim-handle { position: absolute; z-index: 4; top: 0; bottom: 0; width: var(--trim-zone, 7px); cursor: ew-resize; }
.trim-handle.left { left: 0; } .trim-handle.right { right: 0; }
.playhead { position: absolute; z-index: 10; top: 0; bottom: 0; left: 0; width: 1px; background: #f05a40; pointer-events: none; }
.playhead span { position: absolute; top: 0; left: -5px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #f05a40; }
.playhead.keyframe-snapped { width: 2px; background: #ffd36b; box-shadow: 0 0 5px #ffd36b; }
.playhead.keyframe-snapped span { border-top-color: #ffd36b; }
.connection-stem { position: absolute; z-index: 6; width: 1px; border-left: 1px solid #e9b35e; pointer-events: none; }
.connection-stem::before { content: ''; position: absolute; top: -3px; left: -3px; width: 5px; height: 5px; border: 1px solid #ffe0a8; background: #75532a; transform: rotate(45deg); }
.connection-stem.preview { border-left-style: dashed; opacity: .85; }
.connection-stem.connection-drag-preview::before { display: none; }
.connection-stem.connection-drag-preview.detach-candidate { border-left-color: #ff8f83; }
.connection-handle { position: absolute; z-index: 9; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: #ffe0a8; transform: translate(-50%, -50%); cursor: crosshair; touch-action: none; }
.connection-handle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 1px; background: #282017; box-shadow: 0 0 0 2px #14161acc; transform: translate(-50%, -50%) rotate(45deg); }
.connection-handle.connected::before { background: #e9b35e; }
.connection-handle:hover, .connection-handle:focus-visible { background: transparent; }
.connection-handle:hover::before, .connection-handle:focus-visible::before, .connection-handle.dragging::before { width: 10px; height: 10px; border-color: #fff1d2; }
.connection-handle.detach-candidate { color: #ff8f83; }
.title-snap-guide { position: absolute; z-index: 8; top: 0; bottom: 0; width: 1px; border-left: 1px dashed #ffd07a; box-shadow: 0 0 5px #d4903c; pointer-events: none; }
.telemetry-snap-guide { width: 2px; border-left: 2px solid #65dfba; box-shadow: 0 0 8px #42bd94; }
dialog { width: min(460px, 90vw); border: 1px solid #50555e; border-radius: 7px; background: #202329; color: inherit; box-shadow: 0 20px 80px #000c; }
dialog::backdrop { background: #08090bbb; }
button.danger { border-color: #a64d49; background: #7e332f; color: #fff; }
.project-confirmation-dialog p { color: #aab0b9; font-size: 12px; line-height: 1.5; }
.project-package-dialog { width: min(600px, 92vw); }
.project-package-dialog > form > p, .project-package-progress-dialog p { color: #aab0b9; font-size: 12px; line-height: 1.5; }
.project-package-selection, .project-package-review { display: grid; max-height: min(420px, 55vh); margin: 12px 0; overflow-y: auto; border: 1px solid #3b414a; border-radius: 5px; }
.project-package-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 48px; padding: 7px 9px; border-bottom: 1px solid #343941; }
.project-package-choice:last-child { border-bottom: 0; }
.project-package-choice strong, .project-package-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-package-choice small { margin-top: 2px; color: #858c96; font-size: 9px; }
.project-package-readiness { justify-self: end; color: #aab0b9; font-size: 10px; white-space: nowrap; }
.project-package-readiness.ready { color: #8fc9a2; }
.project-package-readiness.blocked { color: #ffad73; }
.project-package-choice select { min-width: 130px; padding: 5px; }
.project-package-selection-status { min-height: 18px; margin: 8px 0 0 !important; }
.project-package-selection-history { margin: 2px 0 8px !important; color: #c5cad1 !important; }
.project-package-selection-missing { max-height: 150px; margin: 8px 0; padding: 8px 10px; overflow-y: auto; border: 1px solid #574638; border-radius: 5px; background: #2a2521; color: #d4bca9; font-size: 11px; line-height: 1.5; }
.project-package-selection-missing ul { margin: 0; padding-left: 18px; }
.project-package-selection-missing small { color: #b99b84; }
.project-package-repair-actions { display: flex; flex-wrap: wrap; gap: 8px; min-height: 30px; }
.project-package-history-confirmation { display: grid; gap: 7px; margin: 8px 0; padding: 9px 10px; border: 1px solid #7b503d; border-radius: 5px; background: #30231e; color: #e8d2c5; font-size: 11px; line-height: 1.4; }
.project-package-history-confirmation[hidden] { display: none; }
.project-package-history-confirmation > div { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.project-package-progress-dialog { width: min(480px, 90vw); }
.project-package-progress-dialog progress { width: 100%; margin: 10px 0 16px; }
#project-package-progress-item { min-height: 18px; overflow-wrap: anywhere; }
.project-package-missing-list { display: grid; max-height: min(420px, 55vh); margin: 12px 0; overflow-y: auto; border: 1px solid #3b414a; border-radius: 5px; }
.project-package-missing-project { padding: 9px; border-bottom: 1px solid #343941; }
.project-package-missing-project:last-child { border-bottom: 0; }
.project-package-missing-project > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-package-missing-project ul { margin: 7px 0 0; padding-left: 18px; color: #aab0b9; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
#project-conflict-status { min-height: 18px; color: #ffad73; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label { display: grid; gap: 5px; color: #aab0b9; font-size: 12px; }
.form-grid input, .form-grid select { padding: 7px; width: 100%; }
#export-dialog { width: min(500px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; }
#export-form { max-height: calc(100dvh - 34px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
#export-form > h2 { margin: 0; padding: 18px 20px 14px; }
.export-dialog-scroll { min-height: 0; padding: 0 20px 16px; overflow-y: auto; overscroll-behavior: contain; }
.export-advanced { margin-top: 14px; }
.export-advanced summary { color: #aab0b9; cursor: pointer; font-size: 12px; }
.export-advanced .form-grid { margin-top: 10px; }
.export-size-pair { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.export-size-pair[hidden] { display: none; }
#export-image-time { min-height: 33px; display: flex; align-items: center; padding: 7px; border: 1px solid #40454e; border-radius: 4px; background: #22262c; color: #d8dde4; font: 12px ui-monospace, monospace; }
.range-output { display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: center; gap: 7px; }
.range-output output { color: #d8dde4; font-variant-numeric: tabular-nums; text-align: right; }
#export-progress { width: 100%; margin-top: 20px; }
#export-note { color: #9299a3; font-size: 12px; }
.export-download { display: block; margin: 10px 0; color: #ff9a62; font-weight: 700; }
.format-warning { margin: 10px 0 0; padding: 7px; border: 1px solid #8f3d3d; border-radius: 4px; background: #3a2020; color: #ff9c9c; font-size: 12px; }
[disabled] { color: #777d85; }
[hidden] { display: none !important; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.export-dialog-actions { padding: 12px 20px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #3c424b; background: #292d34; box-shadow: 0 -8px 20px #0c0e1266; }
#export-start { min-width: 104px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#export-start .ui-icon { width: 17px; height: 17px; }
@media (max-width: 1000px) { .workspace { grid-template-columns: 200px 1fr 210px; } .brand span { display: none; } .project-browser-trigger { min-width: 110px; } .transport { grid-template: auto auto / 1fr 1fr; } .transport-controls { grid-column: 1 / -1; grid-row: 1; justify-content: center; } .viewer-tools.left { grid-column: 1; grid-row: 2; } .viewer-tools.right { grid-column: 2; grid-row: 2; } .viewer-tools select { max-width: 88px; } }
@media (pointer: coarse) { .connection-handle { width: 44px; height: 44px; } }

/* Mobile workspace presentation is class-gated so fine-pointer desktop layout and input remain unchanged. */
#mobile-action-dock, #mobile-task-tray, #mobile-timeline-tool-menu, #mobile-viewer-trigger, #mobile-viewer-popover, #mobile-media-status, #mobile-feedback { display: none; }
/* The phone-width bootstrap only stabilizes first-paint geometry; MobileWorkspace still owns all behavior and final device detection. */
body.mobile-layout-pending { --mobile-dock-height: 66px; width: 100%; min-width: 0; height: var(--mobile-app-height, 100vh); position: fixed; inset: 0; overflow: hidden; }
.mobile-layout-pending .topbar { height: calc(48px + env(safe-area-inset-top)); min-height: calc(48px + env(safe-area-inset-top)); gap: 8px; padding: env(safe-area-inset-top) 8px 0; }
.mobile-layout-pending .brand, .mobile-layout-pending #status, .mobile-layout-pending .storage-durability-indicator { display: none; }
.mobile-layout-pending .project-switcher { min-width: 0; flex: 1; }
.mobile-layout-pending .project-browser-trigger { width: 100%; min-width: 0; max-width: none; height: 40px; }
.mobile-layout-pending .project-browser-heading, .is-mobile-workspace .project-browser-heading { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 7px; padding: 9px 10px 10px; }
.mobile-layout-pending .project-browser-title, .is-mobile-workspace .project-browser-title { min-height: 32px; justify-content: space-between; }
.mobile-layout-pending .project-storage-details p, .is-mobile-workspace .project-storage-details p { right: 0; left: auto; }
.mobile-layout-pending .project-browser-heading-actions, .is-mobile-workspace .project-browser-heading-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mobile-layout-pending .project-browser-heading-actions button, .is-mobile-workspace .project-browser-heading-actions button { min-width: 0; min-height: 40px; padding: 5px 6px; font-size: 11px; touch-action: manipulation; }
.mobile-layout-pending .toolbar { gap: 4px; }
.mobile-layout-pending .toolbar button { min-width: 42px; min-height: 40px; padding: 5px 7px; font-size: 0; }
.mobile-layout-pending .toolbar .history-button { width: 42px; height: 40px; }
.mobile-layout-pending .toolbar #export-open { font-size: 11px; }
.mobile-layout-pending .workspace { min-height: 0; padding-bottom: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom)); grid-template: minmax(150px, 42%) minmax(0, 1fr) / minmax(0, 1fr); transition: none; }
.mobile-layout-pending .media-panel, .mobile-layout-pending .inspector-panel, .mobile-layout-pending .audio-monitor-dock { display: none; }
.mobile-layout-pending .preview-panel { position: relative; grid-row: 1; grid-column: 1; }
.mobile-layout-pending .preview-panel > .panel-title { display: none; }
.mobile-layout-pending #preview-viewport { visibility: hidden; }
.mobile-layout-pending .transport { min-height: 48px; display: flex; justify-content: center; padding: 3px 6px; }
.mobile-layout-pending .viewer-tools { display: none; }
.mobile-layout-pending .transport-controls { min-width: 0; justify-content: center; gap: 3px; }
.mobile-layout-pending .transport-controls button { min-width: 42px; min-height: 40px; padding: 4px; }
.mobile-layout-pending .desktop-frame-step-icon { display: none; }
.mobile-layout-pending .mobile-frame-step-icon { display: block; width: 21px; height: 21px; }
.mobile-layout-pending #time-display { min-width: 80px; margin-left: 4px; font-size: 10px; }
.mobile-layout-pending .timeline-panel { grid-row: 2; grid-column: 1; }
.mobile-layout-pending .timeline-tools { height: 42px; min-height: 42px; padding: 3px 6px; overflow: hidden; }
.mobile-layout-pending .timeline-zoom-controls input { display: none; }
.mobile-layout-pending .timeline-zoom-controls { margin-left: auto; }
.mobile-layout-pending .sequencer { margin-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); border-right: 1px solid #2d3239; border-left: 1px solid #2d3239; }
.mobile-layout-pending #mobile-action-dock { height: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom)); display: block; position: fixed; z-index: 1520; right: 0; bottom: 0; left: 0; padding: 4px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); border-top: 1px solid #3b4149; background: #1d2025f5; box-shadow: 0 -5px 18px #0008; pointer-events: none; }
.mobile-layout-pending .mobile-actions { height: 58px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(58px, 1fr); overflow: hidden; }
.mobile-layout-pending .mobile-actions button { min-width: 58px; min-height: 54px; display: grid; place-items: center; gap: 1px; padding: 3px 5px; border-color: transparent; background: transparent; font-size: 10px; }
.mobile-layout-pending .mobile-actions button span { font-size: 19px; line-height: 21px; }
.mobile-layout-pending .mobile-actions-selection { display: none; }
body.is-mobile-workspace { --mobile-dock-height: 66px; --mobile-task-tray-height: 54px; width: 100%; min-width: 0; height: var(--mobile-app-height, 100%); position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; }
.is-mobile-workspace #export-dialog { max-height: calc(var(--mobile-visible-height, 100dvh) - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))); }
.is-mobile-workspace #export-form { max-height: calc(var(--mobile-visible-height, 100dvh) - max(14px, env(safe-area-inset-top)) - max(14px, env(safe-area-inset-bottom))); }
.is-mobile-workspace #export-form > h2 { padding: 15px 16px 12px; }
.is-mobile-workspace .export-dialog-scroll { padding: 0 16px 14px; }
.is-mobile-workspace .export-dialog-actions { padding: 10px 16px max(10px, env(safe-area-inset-bottom)); }
.is-mobile-workspace .export-dialog-actions button { min-height: 42px; touch-action: manipulation; }
.is-mobile-workspace .topbar { height: calc(48px + env(safe-area-inset-top)); min-height: calc(48px + env(safe-area-inset-top)); gap: 8px; padding: env(safe-area-inset-top) 8px 0; }
.is-mobile-workspace .brand, .is-mobile-workspace #status, .is-mobile-workspace .storage-durability-indicator { display: none; }
.is-mobile-workspace .project-switcher { min-width: 0; flex: 1; }
.is-mobile-workspace .project-browser-trigger { width: 100%; min-width: 0; max-width: none; height: 40px; }
.is-mobile-workspace .toolbar { gap: 4px; }
.is-mobile-workspace .toolbar button { min-width: 42px; min-height: 40px; padding: 5px 7px; font-size: 0; touch-action: manipulation; }
.is-mobile-workspace .toolbar .history-button { width: 42px; height: 40px; padding: 0; }
.is-mobile-workspace .toolbar .history-icon { width: 23px; height: 23px; stroke-width: 2.2; }
.is-mobile-workspace .save-state-indicator { width: 32px; height: 32px; }
.is-mobile-workspace .toolbar #export-open { font-size: 11px; }
.is-mobile-workspace .app-menu-trigger { width: 40px; min-width: 40px; height: 40px; display: grid; grid-template-columns: 1fr; padding: 0; touch-action: manipulation; }
.is-mobile-workspace .app-menu-account-icon { width: 24px; height: 24px; }
.is-mobile-workspace .app-menu-chevron { display: none; }
.is-mobile-workspace .app-menu { width: min(520px, 100%); max-height: min(70%, calc(var(--mobile-visible-height, 100vh) - 24px)); position: fixed; z-index: 1650; top: auto; right: 0; bottom: 0; left: 0; margin: auto; padding-bottom: env(safe-area-inset-bottom); overflow-y: auto; border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -14px 42px #000c; }
.is-mobile-workspace .app-menu-heading { min-height: 54px; padding: 7px 10px 7px 16px; }
.is-mobile-workspace #app-menu-close { width: 40px; min-width: 40px; height: 40px; display: grid; padding: 0; border-color: transparent; border-radius: 50%; background: transparent; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.is-mobile-workspace .app-menu-group { padding: 7px; }
.is-mobile-workspace .app-menu-group-label { padding: 6px 9px 4px; }
.is-mobile-workspace .app-menu a { min-height: 58px; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; touch-action: manipulation; }
.is-mobile-workspace .app-menu a > .ui-icon { width: 23px; height: 23px; }
.is-mobile-workspace .app-menu a strong { font-size: 13px; }
.is-mobile-workspace .app-menu small { font-size: 10px; }
.is-mobile-workspace .app-menu-backdrop { display: block; position: fixed; z-index: 1640; inset: 0; padding: 0; border: 0; border-radius: 0; background: #050609aa; }
.is-mobile-workspace .runtime-warning, .is-mobile-workspace .storage-durability-warning { position: fixed; z-index: 1700; top: calc(48px + env(safe-area-inset-top)); right: 0; left: 0; }
.is-mobile-workspace .workspace { min-height: 0; padding-bottom: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom)); grid-template: minmax(150px, 42%) minmax(0, 1fr) / minmax(0, 1fr); transition: grid-template-rows .18s ease, padding-bottom .18s ease; }
.is-mobile-workspace[data-mobile-mode="trim"] .workspace, .is-mobile-workspace[data-mobile-mode="animate"] .workspace { padding-bottom: calc(var(--mobile-dock-height) + var(--mobile-task-tray-height) + env(safe-area-inset-bottom)); }
.is-phone-workspace[data-mobile-mode="animate"] .workspace { grid-template-rows: minmax(240px, 70%) minmax(96px, 1fr); }
.is-mobile-workspace .preview-panel { position: relative; grid-row: 1; grid-column: 1; }
.is-mobile-workspace .preview-panel > .panel-title { display: none; }
.is-mobile-workspace .preview-workspace { min-height: 0; flex: 1; }
.is-mobile-workspace .preview-stage { min-width: 0; min-height: 0; padding: 7px; touch-action: none; overscroll-behavior: contain; }
.is-mobile-workspace #preview-viewport, .is-mobile-workspace #transform-box, .is-mobile-workspace .transform-handle, .is-mobile-workspace .rotation-handle { touch-action: none; }
.is-mobile-workspace #transform-box { cursor: default; pointer-events: none; }
.is-mobile-workspace #transform-box .transform-handle, .is-mobile-workspace #transform-box .rotation-handle, .is-mobile-workspace #transform-box .rotation-stem { display: none; }
.is-mobile-workspace .motion-keyframe-point { width: 44px; height: 44px; cursor: pointer; }
.is-mobile-workspace .motion-keyframe-point::before { inset: 14px; }
.is-mobile-workspace .motion-keyframe-point:only-child::before { inset: 12px; }
.is-mobile-workspace .motion-keyframe-point:only-child::after { inset: 7px; }
.is-mobile-workspace[data-mobile-mode="transform"] #transform-box, .is-mobile-workspace[data-mobile-mode="animate"] #transform-box { cursor: move; pointer-events: auto; }
.is-mobile-workspace[data-mobile-mode="transform"] #transform-box .transform-handle, .is-mobile-workspace[data-mobile-mode="transform"] #transform-box .rotation-handle, .is-mobile-workspace[data-mobile-mode="transform"] #transform-box .rotation-stem, .is-mobile-workspace[data-mobile-mode="animate"] #transform-box .transform-handle, .is-mobile-workspace[data-mobile-mode="animate"] #transform-box .rotation-handle, .is-mobile-workspace[data-mobile-mode="animate"] #transform-box .rotation-stem { display: block; }
.is-mobile-workspace .transform-handle, .is-mobile-workspace .rotation-handle { width: calc(44px * var(--viewer-inverse-zoom)); height: calc(44px * var(--viewer-inverse-zoom)); border-width: calc(2px * var(--viewer-inverse-zoom)); }
.is-mobile-workspace .transform-handle, .is-mobile-workspace .rotation-handle { background: transparent; box-shadow: none; }
.is-mobile-workspace .transform-handle::before, .is-mobile-workspace .rotation-handle::before { content: ''; width: calc(20px * var(--viewer-inverse-zoom)); height: calc(20px * var(--viewer-inverse-zoom)); position: absolute; top: 50%; left: 50%; border: calc(2px * var(--viewer-inverse-zoom)) solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 calc(1px * var(--viewer-inverse-zoom)) #101216aa; transform: translate(-50%, -50%); }
.is-mobile-workspace .transform-handle.top-left { top: calc(-22px * var(--viewer-inverse-zoom)); left: calc(-22px * var(--viewer-inverse-zoom)); }
.is-mobile-workspace .transform-handle.top-right { top: calc(-22px * var(--viewer-inverse-zoom)); right: calc(-22px * var(--viewer-inverse-zoom)); }
.is-mobile-workspace .transform-handle.bottom-left { bottom: calc(-22px * var(--viewer-inverse-zoom)); left: calc(-22px * var(--viewer-inverse-zoom)); }
.is-mobile-workspace .transform-handle.bottom-right { right: calc(-22px * var(--viewer-inverse-zoom)); bottom: calc(-22px * var(--viewer-inverse-zoom)); }
.is-mobile-workspace .rotation-handle { bottom: calc(-62px * var(--viewer-inverse-zoom)); }
.is-mobile-workspace .transport { min-height: 48px; display: flex; justify-content: center; padding: 3px 6px; }
.is-mobile-workspace .viewer-tools { display: none; }
.is-mobile-workspace .transport-controls { min-width: 0; justify-content: center; gap: 3px; }
.is-mobile-workspace .transport-controls button { min-width: 42px; min-height: 40px; padding: 4px; touch-action: manipulation; }
.is-mobile-workspace .desktop-frame-step-icon { display: none; }
.is-mobile-workspace .mobile-frame-step-icon { display: block; width: 21px; height: 21px; }
/* Mobile transport and timeline strips use icon color instead of boxed button chrome between their separators. */
.is-mobile-workspace .transport .icon-button, .is-mobile-workspace .timeline-tools .icon-button { border-color: transparent; background: transparent; color: #a6adb7; box-shadow: none; -webkit-tap-highlight-color: transparent; }
.is-mobile-workspace .transport .icon-button:hover, .is-mobile-workspace .timeline-tools .icon-button:hover { border-color: transparent; background: #ffffff0a; color: #e7eaee; }
.is-mobile-workspace .transport .icon-button:active, .is-mobile-workspace .timeline-tools .icon-button:active { background: #ffffff12; color: #fff; }
.is-mobile-workspace .transport .icon-button:focus-visible, .is-mobile-workspace .timeline-tools .icon-button:focus-visible { outline: 2px solid #73b9d5; outline-offset: -4px; background: #ffffff0a; color: #f1f3f5; }
.is-mobile-workspace .transport .icon-button[aria-disabled="true"], .is-mobile-workspace .timeline-tools .icon-button[aria-disabled="true"], .is-mobile-workspace .transport .icon-button:disabled, .is-mobile-workspace .timeline-tools .icon-button:disabled { color: #5d636c; }
.is-mobile-workspace .transport .icon-button[aria-disabled="true"]:hover, .is-mobile-workspace .timeline-tools .icon-button[aria-disabled="true"]:hover, .is-mobile-workspace .transport .icon-button:disabled:hover, .is-mobile-workspace .timeline-tools .icon-button:disabled:hover { background: transparent; color: #5d636c; }
.is-mobile-workspace #preview-hand[aria-pressed="true"], .is-mobile-workspace #preview-audio-mute[aria-pressed="true"], .is-mobile-workspace .timeline-tools .timeline-follow-toggle[aria-pressed="true"] { border-color: transparent; background: transparent; color: #ff9f66; filter: drop-shadow(0 0 4px #e8793a88); box-shadow: none; }
.is-mobile-workspace .visual-animation-toggle.active, .is-mobile-workspace .visual-animation-toggle[aria-pressed="true"] { border-color: transparent; background: transparent; color: #72ddff; filter: drop-shadow(0 0 4px #4acdf688); box-shadow: none; }
.is-mobile-workspace #time-display { min-width: 80px; margin-left: 4px; font-size: 10px; }
.is-mobile-workspace .preview-audio-state { max-width: calc(100% - 24px); position: absolute; z-index: 65; bottom: 54px; left: 50%; padding: 6px 9px; border-radius: 5px; background: #17242df2; font-size: 10px; pointer-events: none; transform: translateX(-50%); }
.is-mobile-workspace .timeline-panel { grid-row: 2; grid-column: 1; }
.is-mobile-workspace .timeline-tools { height: 42px; min-height: 42px; padding: 3px 6px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; }
.is-mobile-workspace .timeline-tools::-webkit-scrollbar { display: none; }
.is-mobile-workspace .timeline-tools-overflow { width: 30px; height: 41px; display: grid; position: absolute; z-index: 4; top: 0; place-items: center; padding: 0; border: 0; border-radius: 0; background: linear-gradient(90deg, #202329fa 65%, #20232900); color: #e1e5ea; box-shadow: none; touch-action: manipulation; }
.is-mobile-workspace .timeline-tools-overflow-left { left: 0; }
.is-mobile-workspace .timeline-tools-overflow-right { right: 0; background: linear-gradient(270deg, #202329fa 65%, #20232900); }
.is-mobile-workspace .timeline-tools-overflow .ui-icon { width: 18px; height: 18px; }
.is-mobile-workspace .timeline-tools-overflow:active { color: #fff; filter: brightness(1.25); }
.is-mobile-workspace .timeline-tools-overflow[hidden] { display: none; }
.is-mobile-workspace .timeline-zoom-controls input { display: none; }
.is-mobile-workspace .timeline-zoom-controls { margin-left: auto; }
.is-mobile-workspace .timeline-scroll, .is-mobile-workspace .timeline-content, .is-mobile-workspace .track-lane, .is-mobile-workspace .clip, .is-mobile-workspace .trim-handle { touch-action: none; }
.is-mobile-workspace .sequencer { margin-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); border-right: 1px solid #2d3239; border-left: 1px solid #2d3239; }
.is-mobile-workspace .timeline-scroll { overflow-anchor: none; overscroll-behavior: contain; }
.is-mobile-workspace .trim-handle, .is-mobile-workspace .clip-keyframe, .is-mobile-workspace .connection-handle { pointer-events: none; }
.is-mobile-workspace[data-mobile-timeline-tool="trim"] .clip.selected { z-index: 12; overflow: visible; box-shadow: 0 0 0 2px #ffad73, 0 0 10px #e8793a88; }
.is-mobile-workspace[data-mobile-timeline-tool="trim"] .clip.selected .trim-handle { width: 56px; left: -28px; pointer-events: auto; }
.is-mobile-workspace[data-mobile-timeline-tool="trim"] .clip.selected .trim-handle.right { right: -28px; left: auto; }
.is-mobile-workspace[data-mobile-timeline-tool="trim"] .clip.selected .trim-handle::after { content: ''; width: 12px; height: 30px; position: absolute; top: 50%; left: 50%; border: 2px solid #ff8d4d; border-radius: 7px; background: linear-gradient(#f5f7fa, #f5f7fa) center / 2px 16px no-repeat, #20242a; box-shadow: 0 1px 3px #000d; pointer-events: none; transform: translate(calc(-50% - 2px), -50%); }
.is-mobile-workspace[data-mobile-timeline-tool="trim"] .clip.selected .trim-handle.right::after { transform: translate(calc(-50% + 2px), -50%); }
.is-mobile-workspace[data-mobile-timeline-tool="keyframe"] .clip.selected { z-index: 12; overflow: visible; box-shadow: 0 0 0 2px #5fc7e7, 0 0 10px #3ca5c788; }
.is-mobile-workspace[data-mobile-timeline-tool="keyframe"] .clip.selected .clip-keyframes { top: 0; right: 0; left: 0; height: 100%; border-bottom: 1px solid #87dff866; }
.is-mobile-workspace[data-mobile-timeline-tool="keyframe"] .clip.selected .clip-keyframe { width: 44px; height: 44px; top: 50%; bottom: auto; pointer-events: auto; transform: translate(-50%, -50%); }
.is-mobile-workspace[data-mobile-timeline-tool="keyframe"] .clip.selected .clip-keyframe::before { top: 14px; bottom: auto; left: 14px; width: 12px; height: 12px; border-width: 2px; }
.is-mobile-workspace .connection-handle { width: 48px; height: 48px; opacity: .4; }
.is-mobile-workspace[data-mobile-timeline-tool="link"] .connection-handle { opacity: 1; pointer-events: auto; }
.is-mobile-workspace .media-panel, .is-mobile-workspace .inspector-panel, .is-mobile-workspace .audio-monitor-dock { width: min(520px, 100%); min-width: 0; max-width: none; max-height: min(calc(var(--mobile-visible-height, 100vh) - 24px), 76%); display: flex; position: fixed; z-index: 1510; right: 0; bottom: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom) + var(--mobile-keyboard-inset, 0px)); left: 0; flex-direction: column; margin: auto; overflow: hidden auto; resize: none; border: 1px solid #4c535d; border-bottom: 0; border-radius: 14px 14px 0 0; background: #1d2025; box-shadow: 0 -14px 42px #000c; opacity: 1; transform: translateY(calc(100% + var(--mobile-dock-height) + 30px)); transition: transform .18s ease, opacity .14s ease; }
.is-mobile-workspace[data-mobile-sheet="media"] .media-panel, .is-mobile-workspace[data-mobile-sheet="inspector"] .inspector-panel, .is-mobile-workspace[data-mobile-sheet="monitor"] .audio-monitor-dock { transform: translateY(0); }
.is-mobile-workspace.mobile-media-dragging .media-panel { opacity: .18; transform: translateY(calc(100% + var(--mobile-dock-height) + 30px)) scale(.96); transform-origin: bottom center; }
.is-mobile-workspace .mobile-sheet-heading { min-height: 48px; display: flex; flex: none; align-items: center; justify-content: space-between; padding: 6px 10px 6px 16px; border-bottom: 1px solid var(--line); background: #292d34; }
.is-mobile-workspace .mobile-sheet-close { width: 40px; min-width: 40px; height: 40px; display: grid; padding: 0; border-color: transparent; border-radius: 50%; background: transparent; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.is-mobile-workspace .inspector-panel > .panel-title { height: 48px; display: flex; flex: none; align-items: center; justify-content: space-between; padding: 5px 10px 5px 16px; }
.is-mobile-workspace .audio-monitor-dock { padding: 0; }
.is-mobile-workspace .audio-monitor-dock-heading { min-height: 48px; padding: 5px 10px 5px 16px; background: #292d34; }
.is-mobile-workspace .audio-monitor-dock-heading .mobile-sheet-close { width: 40px; min-width: 40px; height: 40px; }
.is-mobile-workspace .audio-monitor { padding: 12px; }
.is-mobile-workspace .audio-effect-browser-trigger { min-height: 56px; touch-action: manipulation; }
.is-mobile-workspace .audio-effect-browser { width: calc(100vw - 16px); max-height: min(72vh, 600px); margin: auto auto calc(var(--mobile-dock-height) + env(safe-area-inset-bottom) + 8px); border-radius: 14px; }
.is-mobile-workspace .audio-effect-browser-search { padding: 9px; }
.is-mobile-workspace .audio-effect-browser-search input { height: 42px; font-size: 16px; }
.is-mobile-workspace .audio-effect-browser-results { max-height: min(48vh, 410px); }
.is-mobile-workspace .audio-effect-browser-item { min-height: 58px; padding: 8px; touch-action: manipulation; }
.is-mobile-workspace .audio-effect-card > summary { min-height: 56px; grid-template-columns: 22px minmax(0, 1fr) auto; }
.is-mobile-workspace .audio-effect-actions button { width: 36px; min-width: 36px; height: 36px; padding: 0; touch-action: manipulation; }
.is-mobile-workspace .audio-effect-actions .audio-effect-bypass { width: 40px; }
.is-mobile-workspace .audio-effect-actions [data-rack-action="up"], .is-mobile-workspace .audio-effect-actions [data-rack-action="down"] { display: none; }
.is-mobile-workspace .audio-effect-parameters { gap: 14px; padding: 13px 11px 15px; }
.is-mobile-workspace .audio-effect-parameters label { font-size: 12px; }
.is-mobile-workspace .audio-effect-parameters select { min-height: 42px; font-size: 16px; }
.is-mobile-workspace .audio-keyframe-controls button { width: 36px; height: 36px; font-size: 13px; touch-action: manipulation; }
.is-mobile-workspace .audio-monitor-heading { grid-template-columns: 1fr; }
.is-mobile-workspace .audio-monitor-heading select { width: 100%; max-width: none; min-height: 42px; font-size: 14px; }
.is-mobile-workspace .audio-monitor-tabs button { min-height: 42px; font-size: 11px; touch-action: manipulation; }
.is-mobile-workspace .settings-section { flex: none; padding: 12px; font-size: 12px; }
.is-mobile-workspace .property-grid input, .is-mobile-workspace .property-grid select, .is-mobile-workspace .property-grid textarea { min-height: 42px; font-size: 16px; }
.is-mobile-workspace .source-navigation { height: 46px; }
.is-mobile-workspace .source-tabs { flex: none; }
.is-mobile-workspace .source-tab, .is-mobile-workspace .text-type-tabs button { min-height: 38px; touch-action: manipulation; }
.is-mobile-workspace .drop-zone { min-height: 52px; touch-action: manipulation; }
.is-mobile-workspace .drop-zone { font-size: 0; }
.is-mobile-workspace .drop-zone br, .is-mobile-workspace .drop-zone span { display: none; }
.is-mobile-workspace .drop-zone::after { content: 'Import from device'; font-size: 13px; }
.is-mobile-workspace .media-list { padding-bottom: 18px; }
.is-mobile-workspace .asset { grid-template-columns: 32px 46px minmax(0, 1fr) auto; min-height: 70px; position: relative; gap: 7px; cursor: default; }
.is-mobile-workspace .asset-icon { height: 36px; }
.is-mobile-workspace .asset[data-asset-available="true"] .asset-icon { touch-action: none; }
.is-mobile-workspace .telemetry-asset { grid-template-columns: 32px 64px minmax(0, 1fr); min-height: 78px; gap: 4px 7px; cursor: default; }
.is-mobile-workspace .telemetry-asset > .mobile-asset-drag-handle { grid-area: 1 / 1 / 3 / 2; }
.is-mobile-workspace .telemetry-asset-icon { width: 64px; height: 64px; grid-area: 1 / 2 / 3 / 3; touch-action: none; }
.is-mobile-workspace .telemetry-asset-copy { grid-area: 1 / 3; }
.is-mobile-workspace .telemetry-asset-actions { grid-area: 2 / 3; }
.is-mobile-workspace .telemetry-asset-actions button { touch-action: manipulation; -webkit-touch-callout: none; }
.is-mobile-workspace .mobile-asset-drag-handle { width: 44px; min-width: 44px; height: 44px; display: grid; position: relative; z-index: 3; place-self: center; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
.is-mobile-workspace .mobile-asset-drag-handle::before { content: ''; width: 12px; height: 17px; background-image: radial-gradient(circle, #bfc6cf 1.25px, transparent 1.55px); background-position: 0 1px; background-size: 6px 6px; opacity: .72; transition: opacity .12s ease, transform .12s ease; }
.is-mobile-workspace .mobile-asset-drag-handle:active::before, .is-mobile-workspace .mobile-asset-drag-source .mobile-asset-drag-handle::before { background-image: radial-gradient(circle, #ffad73 1.4px, transparent 1.7px); filter: drop-shadow(0 1px 3px #000); opacity: 1; transform: scale(1.12); }
.is-mobile-workspace .mobile-asset-drag-handle:disabled { opacity: .28; }
.is-mobile-workspace .mobile-asset-drag-source { border-color: #a96640; opacity: .55; }
.is-mobile-workspace .mobile-asset-placement { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.is-mobile-workspace .mobile-asset-placement button { min-height: 42px; padding: 5px; font-size: 11px; touch-action: manipulation; }
.is-mobile-workspace #mobile-sheet-backdrop { display: block; position: fixed; z-index: 1500; inset: 0; padding: 0; border: 0; border-radius: 0; background: #050609aa; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.is-mobile-workspace.mobile-sheet-open #mobile-sheet-backdrop { opacity: 1; pointer-events: auto; }
.is-mobile-workspace #mobile-action-dock { height: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom)); display: block; position: fixed; z-index: 1520; right: 0; bottom: var(--mobile-keyboard-inset, 0px); left: 0; padding: 4px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); border-top: 1px solid #3b4149; background: #1d2025f5; box-shadow: 0 -5px 18px #0008; }
.is-mobile-workspace .mobile-actions { height: 58px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(58px, 1fr); overflow-x: auto; scrollbar-width: none; }
.is-mobile-workspace .mobile-actions::-webkit-scrollbar { display: none; }
.is-mobile-workspace .mobile-actions button { min-width: 58px; min-height: 54px; display: grid; place-items: center; gap: 1px; padding: 3px 5px; border-color: transparent; background: transparent; font-size: 10px; touch-action: manipulation; }
.is-mobile-workspace .mobile-actions button span { font-size: 19px; line-height: 21px; }
.is-mobile-workspace .mobile-actions button .mobile-timeline-tool-label { font-size: 10px; line-height: normal; }
.is-mobile-workspace .mobile-actions-selection { display: none; }
.is-mobile-workspace.has-mobile-selection .mobile-actions-project { display: none; }
.is-mobile-workspace.has-mobile-selection .mobile-actions-selection { display: grid; }
.is-mobile-workspace .mobile-action-overflow { width: 30px; height: 54px; display: grid; position: absolute; z-index: 3; bottom: calc(4px + env(safe-area-inset-bottom)); place-items: center; padding: 0; border: 0; border-radius: 0; background: linear-gradient(90deg, #1d2025fa 65%, #1d202500); color: #e1e5ea; box-shadow: none; touch-action: manipulation; }
.is-mobile-workspace .mobile-action-overflow-left { left: max(4px, env(safe-area-inset-left)); }
.is-mobile-workspace .mobile-action-overflow-right { right: max(4px, env(safe-area-inset-right)); background: linear-gradient(270deg, #1d2025fa 65%, #1d202500); }
.is-mobile-workspace .mobile-action-overflow .ui-icon { width: 18px; height: 18px; }
.is-mobile-workspace .mobile-action-overflow:active { color: #fff; filter: brightness(1.25); }
.is-mobile-workspace .mobile-action-overflow[hidden] { display: none; }
.is-mobile-workspace .mobile-actions [aria-pressed="true"] { color: #ffb481; box-shadow: inset 0 0 0 1px #e68a52; background: #493127; }
.is-mobile-workspace #mobile-timeline-tool-menu { width: min(430px, calc(100vw - 12px)); display: none; position: absolute; z-index: 2; right: 6px; bottom: calc(100% + 7px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 5px; border: 1px solid #59616c; border-radius: 10px; background: #24282ef8; box-shadow: 0 -8px 24px #000a; }
.is-mobile-workspace.mobile-timeline-tools-open #mobile-timeline-tool-menu { display: grid; }
.is-mobile-workspace #mobile-timeline-tool-menu button { min-height: 52px; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 0 5px; padding: 5px 8px; border-color: transparent; background: transparent; text-align: left; touch-action: manipulation; }
.is-mobile-workspace #mobile-timeline-tool-menu button > span { grid-row: 1 / 3; color: #b8c0ca; font-size: 20px; text-align: center; }
.is-mobile-workspace #mobile-timeline-tool-menu button > strong { color: #e5e9ee; font-size: 11px; }
.is-mobile-workspace #mobile-timeline-tool-menu button > small { overflow: hidden; color: #929aa5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.is-mobile-workspace #mobile-timeline-tool-menu button[aria-pressed="true"] { border-color: #e68a52; background: #493127; }
.is-mobile-workspace #mobile-timeline-tool-menu button[hidden] { display: none; }
.is-mobile-workspace #mobile-task-tray { height: var(--mobile-task-tray-height); display: none; position: fixed; z-index: 1518; right: max(4px, env(safe-area-inset-right)); bottom: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom) + var(--mobile-keyboard-inset, 0px)); left: max(4px, env(safe-area-inset-left)); padding: 5px 52px 5px 5px; overflow: hidden; border: 1px solid #454c56; border-bottom: 0; border-radius: 10px 10px 0 0; background: #24282ef5; box-shadow: 0 -8px 24px #0009; opacity: 0; transform: translateY(8px); transition: opacity .14s ease, transform .14s ease, display .14s allow-discrete; }
.is-mobile-workspace[data-mobile-mode="trim"] #mobile-task-tray, .is-mobile-workspace[data-mobile-mode="transform"] #mobile-task-tray, .is-mobile-workspace[data-mobile-mode="crop"] #mobile-task-tray, .is-mobile-workspace[data-mobile-mode="animate"] #mobile-task-tray { display: block; }
.is-mobile-workspace[data-mobile-mode="trim"] #mobile-task-tray, .is-mobile-workspace[data-mobile-mode="transform"] #mobile-task-tray, .is-mobile-workspace[data-mobile-mode="crop"] #mobile-task-tray, .is-mobile-workspace[data-mobile-mode="animate"] #mobile-task-tray { opacity: 1; transform: translateY(0); }
@starting-style { .is-mobile-workspace[data-mobile-mode] #mobile-task-tray { opacity: 0; transform: translateY(8px); } }
.is-mobile-workspace.mobile-sheet-open #mobile-task-tray { display: none; }
.is-mobile-workspace .mobile-task-scroll { width: 100%; height: 42px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; }
.is-mobile-workspace .mobile-task-scroll::-webkit-scrollbar { display: none; }
.is-mobile-workspace .mobile-task-controls { min-width: max-content; display: none; align-items: center; gap: 5px; }
.is-mobile-workspace[data-mobile-mode="trim"] [data-mobile-task="trim"], .is-mobile-workspace[data-mobile-mode="transform"] [data-mobile-task="transform"], .is-mobile-workspace[data-mobile-mode="crop"] [data-mobile-task="crop"], .is-mobile-workspace[data-mobile-mode="animate"] [data-mobile-task="animate"] { display: flex; }
.is-mobile-workspace .mobile-task-controls output { padding: 0 4px; color: #dce1e7; font: 10px ui-monospace, monospace; white-space: nowrap; }
.is-mobile-workspace .mobile-task-controls button, .is-mobile-workspace .mobile-task-controls select { min-height: 42px; padding: 5px 10px; touch-action: manipulation; }
.is-mobile-workspace[data-mobile-mode="trim"] #mobile-trim-readout { display: none; }
.is-mobile-workspace .mobile-task-icon, .is-mobile-workspace .mobile-task-done, .is-mobile-workspace .mobile-task-overflow { width: 42px; min-width: 42px; padding: 0; display: grid; place-items: center; }
.is-mobile-workspace .mobile-task-icon .ui-icon, .is-mobile-workspace .mobile-task-done .ui-icon { width: 21px; height: 21px; }
.is-mobile-workspace .mobile-task-icon:disabled { border-color: #3b4048; background: #202329; color: #626872; opacity: .45; }
.is-mobile-workspace .mobile-keyframe-toggle { font-size: 16px; }
.is-mobile-workspace .mobile-task-done { height: 42px; position: absolute; z-index: 3; top: 5px; right: 5px; border-color: #4b8e69; background: #244936; color: #c8ffdb; }
.is-mobile-workspace .mobile-task-overflow { width: 30px; min-width: 30px; height: 42px; display: none; position: absolute; z-index: 4; top: 5px; border: 0; background: linear-gradient(90deg, #24282ef5 65%, #24282e00); color: #e8edf3; }
.is-mobile-workspace .mobile-task-overflow .ui-icon { width: 18px; height: 18px; }
.is-mobile-workspace .mobile-task-overflow-left { left: 5px; }
.is-mobile-workspace .mobile-task-overflow-right { right: 52px; background: linear-gradient(270deg, #24282ef5 65%, #24282e00); }
.is-mobile-workspace #mobile-task-tray[data-overflow-left="true"] .mobile-task-overflow-left, .is-mobile-workspace #mobile-task-tray[data-overflow-right="true"] .mobile-task-overflow-right { display: grid; }
.is-mobile-workspace[data-mobile-mode="crop"] #transform-box { border-style: dashed; border-color: #82e3ff; pointer-events: auto; }
.is-mobile-workspace[data-mobile-mode="crop"] .crop-handle { width: calc(34px * var(--viewer-inverse-zoom)); height: calc(34px * var(--viewer-inverse-zoom)); display: block; position: absolute; border: calc(2px * var(--viewer-inverse-zoom)) solid #fff; border-radius: 5px; background: #1787a8; touch-action: none; }
.is-mobile-workspace .crop-handle.crop-left { top: 50%; left: calc(-17px * var(--viewer-inverse-zoom)); transform: translateY(-50%); }
.is-mobile-workspace .crop-handle.crop-right { top: 50%; right: calc(-17px * var(--viewer-inverse-zoom)); transform: translateY(-50%); }
.is-mobile-workspace .crop-handle.crop-top { top: calc(-17px * var(--viewer-inverse-zoom)); left: 50%; transform: translateX(-50%); }
.is-mobile-workspace .crop-handle.crop-bottom { bottom: calc(-17px * var(--viewer-inverse-zoom)); left: 50%; transform: translateX(-50%); }
.is-mobile-workspace.mobile-keyboard-open #mobile-action-dock { display: none; }
.is-mobile-workspace.mobile-keyboard-open #mobile-task-tray { display: none; }
.is-mobile-workspace #mobile-viewer-trigger { width: 40px; min-width: 40px; height: 40px; display: grid; position: absolute; z-index: 62; top: 7px; right: max(7px, env(safe-area-inset-right)); place-items: center; padding: 0; border-color: #525963; border-radius: 50%; appearance: none; background: #20242abf; color: #cbd1d8; line-height: 1; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }
.is-mobile-workspace #mobile-viewer-trigger .ui-icon { width: 21px; height: 21px; }
.is-mobile-workspace #mobile-viewer-trigger:hover { background: #20242abf; }
.is-mobile-workspace #mobile-viewer-trigger:active { background: #ffffff18; transform: scale(.94); }
.is-mobile-workspace #mobile-viewer-trigger:focus-visible { outline: 2px solid #ffad73; outline-offset: 2px; }
.is-mobile-workspace[data-mobile-mode="viewer"] #mobile-viewer-trigger { border-color: #e8793a; color: #ffbb8e; }
.is-mobile-workspace #mobile-viewer-popover { display: none; max-width: calc(100% - 14px); position: absolute; z-index: 61; top: 51px; right: max(7px, env(safe-area-inset-right)); grid-auto-flow: column; grid-auto-columns: 42px; gap: 2px; overflow-x: auto; padding: 4px; border: 1px solid #454c56; border-radius: 24px; background: #20242af2; box-shadow: 0 8px 24px #000a; scrollbar-width: none; }
.is-mobile-workspace #mobile-viewer-popover::-webkit-scrollbar { display: none; }
.is-mobile-workspace[data-mobile-mode="viewer"] #mobile-viewer-popover { display: grid; }
.is-mobile-workspace #mobile-viewer-popover button { width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; border-color: transparent; border-radius: 50%; background: transparent; color: #cbd1d8; box-shadow: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.is-mobile-workspace #mobile-viewer-popover button:hover { background: transparent; }
.is-mobile-workspace #mobile-viewer-popover button:active { background: #ffffff18; color: #fff; transform: scale(.93); }
.is-mobile-workspace #mobile-viewer-popover button:focus-visible { outline: 2px solid #ffad73; outline-offset: -2px; }
.is-mobile-workspace #mobile-viewer-popover .ui-icon { width: 21px; height: 21px; }
.is-mobile-workspace #mobile-viewer-popover button[aria-pressed="true"] { color: #ffad73; }
.is-mobile-workspace #mobile-viewer-mute[aria-pressed="false"] .preview-audio-off, .is-mobile-workspace #mobile-viewer-mute[aria-pressed="true"] .preview-audio-on { display: none; }
.is-mobile-workspace #mobile-media-status { max-width: calc(100% - 105px); min-height: 36px; display: block; position: absolute; z-index: 62; top: 7px; left: max(7px, env(safe-area-inset-left)); overflow: hidden; padding: 5px 9px; border-color: #9a633f; background: #39281fef; color: #ffc39a; font-size: 10px; text-overflow: ellipsis; touch-action: manipulation; white-space: nowrap; }
.is-mobile-workspace #mobile-media-status.saving { border-color: #446e86; background: #1c3440ef; color: #a9e2ff; }
.is-mobile-workspace #mobile-feedback { max-width: calc(100% - 24px); display: block; position: fixed; z-index: 1750; top: calc(54px + env(safe-area-inset-top)); left: 50%; padding: 9px 12px; border: 1px solid #b77850; border-radius: 6px; background: #30241fee; box-shadow: 0 7px 22px #000b; color: #ffe0ca; font-size: 11px; line-height: 1.35; pointer-events: none; transform: translateX(-50%); }
.is-mobile-workspace .mobile-asset-drag-proxy { width: 46px; height: 36px; display: grid; position: fixed; z-index: 1760; top: 0; left: 0; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 6px; overflow: hidden; padding: 0; border: 1px solid #5688a6; border-radius: 6px; background: #285c78ed; box-shadow: 0 8px 24px #000b; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.2; opacity: .88; pointer-events: none; user-select: none; will-change: transform, width, height; transition: width .14s ease, height .14s ease, border-radius .14s ease, opacity .14s ease; }
.is-mobile-workspace .mobile-asset-drag-proxy.is-clip { width: min(150px, 42vw); height: 42px; padding: 4px 7px; border-radius: 4px; opacity: 1; }
.is-mobile-workspace .mobile-asset-drag-proxy[data-kind="audio"] { border-color: #61a071; background: #356744ed; }
.is-mobile-workspace .mobile-asset-drag-proxy[data-kind="image"] { border-color: #8d79c6; background: #514478ed; }
.is-mobile-workspace .mobile-asset-drag-proxy .asset-icon, .is-mobile-workspace .mobile-asset-drag-proxy .telemetry-asset-icon { width: 32px; height: 30px; grid-area: auto; }
.is-mobile-workspace .mobile-asset-drag-proxy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-mobile-workspace .asset-usage { font-size: 10px; }
.is-mobile-workspace.mobile-keyboard-open .media-panel, .is-mobile-workspace.mobile-keyboard-open .inspector-panel { bottom: var(--mobile-keyboard-inset, 0px); max-height: calc(var(--mobile-visible-height, 100vh) - 8px); }
.is-mobile-workspace.mobile-timeline-expanded .workspace { grid-template-rows: minmax(130px, 26%) minmax(0, 1fr); }
.is-mobile-workspace.mobile-timeline-expanded .preview-panel .transport { min-height: 40px; }

/* Phone portrait compacts inactive secondary lanes while an explicit timeline expansion restores full heights. */
.is-phone-workspace:not(.mobile-timeline-expanded):not([data-mobile-timeline-tool="trim"]):not([data-mobile-timeline-tool="keyframe"]) .track-lane:not(.main-track), .is-phone-workspace:not(.mobile-timeline-expanded) .track-lane:not(.main-track):not(:has(.clip.selected)) { height: 28px; }
.is-phone-workspace:not(.mobile-timeline-expanded):not([data-mobile-timeline-tool="trim"]):not([data-mobile-timeline-tool="keyframe"]) .track-lane:not(.main-track) .clip, .is-phone-workspace:not(.mobile-timeline-expanded) .track-lane:not(.main-track):not(:has(.clip.selected)) .clip { top: 2px; height: 24px; }
.is-phone-workspace:not(.mobile-timeline-expanded):not([data-mobile-timeline-tool="trim"]):not([data-mobile-timeline-tool="keyframe"]) .track-lane:not(.main-track) .clip-caption, .is-phone-workspace:not(.mobile-timeline-expanded) .track-lane:not(.main-track):not(:has(.clip.selected)) .clip-caption { top: 1px; padding-top: 1px; padding-bottom: 1px; }
.is-phone-workspace:not(.mobile-timeline-expanded):not([data-mobile-timeline-tool="trim"]):not([data-mobile-timeline-tool="keyframe"]) .track-lane:not(.main-track) .clip-time, .is-phone-workspace:not(.mobile-timeline-expanded):not([data-mobile-timeline-tool="trim"]):not([data-mobile-timeline-tool="keyframe"]) .track-lane:not(.main-track) .clip-keyframes, .is-phone-workspace:not(.mobile-timeline-expanded) .track-lane:not(.main-track):not(:has(.clip.selected)) .clip-time, .is-phone-workspace:not(.mobile-timeline-expanded) .track-lane:not(.main-track):not(:has(.clip.selected)) .clip-keyframes { display: none; }
.is-phone-workspace[data-mobile-mode="animate"] .track-lane:not(:has(.clip.selected)) { display: none; }
.is-phone-workspace[data-mobile-mode="animate"] .track-lane:has(.clip.selected) { min-height: 68px; }

@media (orientation: landscape) {
  .is-mobile-workspace .workspace { grid-template: minmax(105px, 43%) minmax(0, 1fr) / minmax(0, 1fr); }
  .is-mobile-workspace .media-panel { right: auto; left: env(safe-area-inset-left); margin: 0; border-radius: 0 14px 0 0; }
  .is-mobile-workspace .inspector-panel { right: env(safe-area-inset-right); left: auto; margin: 0; border-radius: 14px 0 0 0; }
}

/* Prioritizes imported activities while keeping optional Map guidance and status out of their way. */
.telemetry-source-panel { gap: 6px; padding-top: 8px; overflow: hidden; }
.telemetry-source-toolbar { display: flex; gap: 5px; margin: 0 8px; }
.telemetry-source-toolbar #import-telemetry { min-width: 0; height: 32px; display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 5px; padding: 4px 9px; font-size: 11px; }
.telemetry-source-toolbar #import-telemetry .ui-icon { width: 14px; height: 14px; }
.telemetry-source-toolbar #telemetry-source-help { width: 32px; min-width: 32px; height: 32px; padding: 4px; border-radius: 50%; color: #aeb6c1; font-size: 13px; font-weight: 700; }
.telemetry-match-target { min-width: 0; display: flex; align-items: center; gap: 7px; margin: 0 8px; padding: 4px 7px; border: 1px solid #3d6d61; border-radius: 5px; background: #1a2926; color: #9fa8b3; font-size: 10px; }
.telemetry-match-target span { flex: none; color: #78828d; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.telemetry-match-target strong { min-width: 0; overflow: hidden; color: #65dfba; text-overflow: ellipsis; white-space: nowrap; }
.telemetry-import-progress { min-height: 27px; display: flex; align-items: center; gap: 5px; margin: 0 8px; padding: 4px 5px 4px 7px; line-height: 1.25; }
.telemetry-import-progress span { min-width: 0; overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.telemetry-import-progress button { width: 20px; min-width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: #a9c8d8; font-size: 16px; line-height: 18px; }
.telemetry-import-progress[data-state="error"] { border-color: #76504b; background: #342321; color: #ffc5bc; }
.telemetry-import-progress[data-state="error"] span { white-space: normal; }
.telemetry-list { min-height: 0; display: grid; flex: 1; align-content: start; gap: 6px; overflow: auto; padding: 0 8px 10px; }
.telemetry-asset { min-width: 0; display: grid; grid-template: auto auto / 46px minmax(0, 1fr); align-items: center; gap: 4px 8px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: #202329; }
.telemetry-asset-icon { width: 46px; height: 46px; display: grid; grid-area: 1 / 1 / 3 / 2; position: relative; place-items: center; overflow: hidden; border: 1px solid #40515a; border-radius: 6px; background: #18252a; color: #73d9bd; }
.telemetry-asset-thumbnail { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
.telemetry-asset-fallback { width: 22px; height: 22px; position: absolute; }
.telemetry-asset-copy { min-width: 0; grid-area: 1 / 2; align-self: end; }
.telemetry-asset strong, .telemetry-asset small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.telemetry-asset strong { font-size: 12px; line-height: 1.3; }
.telemetry-asset small { margin-top: 1px; color: #aeb4c0; font-size: 10px; line-height: 1.25; }
.telemetry-asset-actions { min-width: 0; display: flex; grid-area: 2 / 2; align-items: center; gap: 4px; }
.telemetry-asset-actions .telemetry-choose { min-width: 0; height: 30px; display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 5px; padding: 4px 7px; }
.telemetry-asset-actions .telemetry-choose span { min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.telemetry-asset-actions .icon-button { width: 30px; min-width: 30px; height: 30px; padding: 6px; }
.telemetry-asset-actions .ui-icon { width: 15px; height: 15px; }
.telemetry-asset-actions .telemetry-relink { height: 30px; padding: 4px 7px; font-size: 10px; }
.clip.telemetry { background: #185c50; }
.telemetry-track .track-kind-label { color: #57e0bc; }
.track-lane.clip-detail-expanded { height: 254px; }
.track-lane.clip-detail-expanded > .clip { top: auto; bottom: 4px; }
.track-lane.clip-detail-expanded > .track-kind-label { display: none; }
.clip-detail-slot { position: absolute; z-index: 2; top: 4px; height: 190px; min-width: 10px; overflow: visible; }
.activity-data-editor { width: 100%; height: 100%; min-width: 0; display: grid; grid-template-rows: 20px auto 36px 36px minmax(31px, 1fr); overflow: hidden; padding: 6px 7px; border: 1px solid #53606d; border-radius: 5px; background: #1b2027; color: #dce3ea; font-size: 10px; pointer-events: auto; }
.activity-data-editor[hidden] { display: none; }
.activity-clip-heading, .activity-clip-readout, .activity-clip-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.activity-clip-heading { height: 20px; }
.activity-clip-heading strong { color: #65dfba; }
.activity-clip-heading > span { min-width: 0; overflow: hidden; color: #aab4c0; text-overflow: ellipsis; white-space: nowrap; }
.activity-clip-heading output { margin-left: auto; color: #9bc5ff; white-space: nowrap; }
.activity-clip-heading button { padding: 0 4px; border: 0; background: transparent; font-size: 17px; }
.activity-clip-readout { min-height: 43px; display: grid; grid-template-columns: minmax(140px, 1.25fr) minmax(74px, .75fr) minmax(0, 1.2fr); gap: 10px; }
.activity-clip-readout span { min-width: 0; display: grid; }
.activity-clip-readout small { min-width: 0; color: #7f8995; font-size: 8px; }
.activity-clip-readout time { overflow: hidden; color: #eef5fb; font: 700 13px ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.activity-clip-readout output { overflow: hidden; color: #aeb8c3; font: 9px ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.activity-clip-row { height: 36px; display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 5px; color: #9ba6b2; }
.activity-clip-row canvas { width: 100%; height: 32px; border: 1px solid #343c47; border-radius: 3px; cursor: pointer; touch-action: none; }
.activity-clip-actions { min-height: 31px; }
.activity-clip-actions > span { flex: 1; }
.activity-clip-actions button, .activity-clip-actions summary { padding: 4px 8px; font-size: 10px; }
.activity-clip-actions details { position: relative; }
.activity-clip-actions .activity-focus-section { width: 28px; min-width: 28px; height: 28px; min-height: 28px; display: grid; place-items: center; padding: 5px; border-color: transparent; background: transparent; }
.activity-focus-section .ui-icon { width: 16px; height: 16px; }
.activity-timing-menu { min-width: 180px; display: grid; position: absolute; z-index: 5; bottom: 24px; left: 0; gap: 4px; padding: 7px; border: 1px solid #596574; border-radius: 5px; background: #20262e; box-shadow: 0 5px 18px #000b; }
.activity-timing-menu button { text-align: left; white-space: nowrap; }
.telemetry-asset[draggable="true"] { cursor: grab; }
.clip-detail-slot.gesture-preview .activity-data-editor { width: 100% !important; }

.telemetry-metric-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; margin: 0 0 10px; padding: 8px; border: 1px solid var(--border); }
.telemetry-metric-settings legend { padding: 0 5px; color: #aeb6c1; }
.telemetry-metric-settings legend output { color: #ffbf95; }
.telemetry-metric-settings label { display: flex; align-items: center; gap: 5px; }
.telemetry-metric-settings label[hidden] { display: none; }
.telemetry-metric-settings input { width: auto; }
.telemetry-graphic-range { grid-column: 1 / -1; }
.telemetry-graphic-range span { display: grid; grid-template-columns: minmax(70px, 1fr) auto; align-items: center; gap: 7px; }
.telemetry-graphic-range output { min-width: 74px; color: #d9dde3; text-align: right; font-variant-numeric: tabular-nums; }
.property-grid .telemetry-graphic-range input { padding: 0; }
.is-mobile-workspace .telemetry-graphic-choice { grid-column: 1 / -1; }

.telemetry-layout-dialog { width: min(1180px, calc(100vw - 28px)); max-width: none; height: min(820px, calc(100vh - 28px)); max-height: none; padding: 0; overflow: hidden; border: 1px solid #596574; border-radius: 10px; background: #171b21; color: #e2e7ed; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.telemetry-layout-dialog::backdrop { background: #05070acc; }
.telemetry-layout-dialog input, .telemetry-layout-dialog select { -webkit-user-select: auto; user-select: auto; }
.telemetry-layout-shell { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.telemetry-layout-header, .telemetry-layout-footer { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: #20262e; }
.telemetry-layout-header { position: relative; z-index: 2; border-bottom: 1px solid #343c47; }
.telemetry-layout-header > div { min-width: 0; display: grid; }
.telemetry-layout-header small { color: #9ca7b4; }
.telemetry-layout-header > button { margin-left: auto; border: 0; background: transparent; font-size: 22px; }
.telemetry-layout-toolbar { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; padding: 9px 12px; border-bottom: 1px solid #303741; background: #171b21; }
.telemetry-layout-toolbar label { display: grid; gap: 3px; color: #aab3be; font-size: 10px; }
.telemetry-layout-toolbar label.toggle { display: flex; flex-direction: row; align-items: center; gap: 5px; padding-bottom: 7px; font-size: 11px; }
.telemetry-layout-toolbar input[type="number"] { width: 92px; }
.telemetry-layout-touch-mode, .telemetry-layout-zoom { display: none; align-items: center; gap: 3px; }
.telemetry-layout-touch-mode button[aria-pressed="true"] { border-color: #6caadd; background: #29445d; color: #fff; }
.telemetry-layout-resize-icon, .telemetry-layout-touch-mode button[aria-pressed="true"] .telemetry-layout-move-icon { display: none; }
.telemetry-layout-touch-mode button[aria-pressed="true"] .telemetry-layout-resize-icon { display: block; }
.telemetry-layout-zoom output { min-width: 44px; color: #b7c2ce; text-align: center; font: 10px ui-monospace, monospace; }
.is-mobile-workspace .telemetry-layout-touch-mode, .is-mobile-workspace .telemetry-layout-zoom { display: flex; }
.is-mobile-workspace .telemetry-layout-touch-mode { order: 10; }
.is-mobile-workspace .telemetry-layout-zoom { order: 11; margin-left: auto; }
.is-mobile-workspace .telemetry-layout-touch-mode button, .is-mobile-workspace .telemetry-layout-zoom button { min-height: 34px; }
.telemetry-layout-body { min-height: 0; display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.telemetry-layout-body > aside { position: relative; z-index: 1; min-height: 0; overflow: auto; padding: 10px; border-right: 1px solid #343c47; background: #171b21; }
.telemetry-layout-list-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.telemetry-layout-list-heading small { color: #7f8995; }
.telemetry-layout-widget-list { display: grid; gap: 5px; }
.telemetry-layout-widget-row { display: grid; grid-template-columns: auto minmax(0, 1fr) repeat(3, 28px); align-items: center; gap: 3px; padding: 4px; border: 1px solid transparent; border-radius: 5px; background: #20262e; }
.telemetry-layout-widget-row.selected { border-color: #5b91bd; background: #243343; }
.telemetry-layout-widget-row > button { min-width: 0; padding: 4px; }
.telemetry-layout-widget-row > button[data-widget-action="select"] { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 5px; overflow: hidden; border: 0; background: transparent; text-align: left; white-space: nowrap; }
.telemetry-layout-widget-row > button[data-widget-action="select"] > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.telemetry-layout-layer-number { flex: none; color: #7f9ab1; font: 8px ui-monospace, monospace; }
.telemetry-layout-widget-row button[aria-disabled="true"] { color: #59616c; cursor: default; opacity: .55; }
.telemetry-layout-stage { position: relative; z-index: 0; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px; background: #0b0e12; text-align: center; touch-action: none; }
.telemetry-layout-canvas { --telemetry-grid-columns: 12; --telemetry-grid-rows: 12; --telemetry-canvas-zoom: 1; position: relative; z-index: 0; isolation: isolate; display: inline-block; max-width: none; border: 1px solid #596574; background-color: #111821; background-image: linear-gradient(to right, #68809a26 1px, transparent 1px), linear-gradient(to bottom, #68809a26 1px, transparent 1px); background-size: calc(100% / var(--telemetry-grid-columns)) calc(100% / var(--telemetry-grid-rows)); box-shadow: 0 8px 28px #0008; vertical-align: top; }
.telemetry-layout-safe-guide { position: absolute; z-index: 1002; inset: 5%; border: 1px dashed #f3c96999; pointer-events: none; }
.telemetry-layout-snap-preview { position: absolute; z-index: 0; border: 2px dashed #ffb887; border-radius: 6px; background: #ffb8872b; box-shadow: inset 0 0 16px #ffb88720; pointer-events: none; transition: left 70ms ease-out, top 70ms ease-out, width 70ms ease-out, height 70ms ease-out; }
.telemetry-layout-snap-preview::after { content: '↳'; position: absolute; right: 4px; bottom: 1px; color: #ffca9f; font-size: 16px; line-height: 1; }
.telemetry-layout-widget { position: absolute; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #76b8e3; border-radius: 5px; background: #20374ddd; color: #f3f7fa; box-shadow: 0 2px 8px #0007; cursor: grab; touch-action: none; user-select: none; }
.telemetry-layout-widget.graphic { background: #193329dd; }
.telemetry-layout-widget.selected { outline: 2px solid #ffb887; outline-offset: 1px; }
.telemetry-layout-widget.locked { border-style: dashed; cursor: not-allowed; opacity: .75; }
.telemetry-layout-widget.dragging { cursor: grabbing; }
.telemetry-layout-widget.settling { transition: left 140ms ease-out, top 140ms ease-out, width 140ms ease-out, height 140ms ease-out; }
.telemetry-layout-widget.layer-changed { animation: telemetry-layout-layer-feedback 360ms ease-out; }
.telemetry-layout-widget > span { position: relative; z-index: 2; overflow: hidden; max-width: calc(100% - 10px); font-size: clamp(8px, calc(11px * var(--telemetry-canvas-zoom)), 18px); text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.telemetry-layout-canvas-layer { display: none; position: absolute; z-index: 3; top: 3px; left: 4px; padding: 1px 3px; border-radius: 3px; background: #071019c9; color: #ffbd8f; font: 7px ui-monospace, monospace; line-height: 1.2; pointer-events: none; }
.telemetry-layout-widget.selected .telemetry-layout-canvas-layer { display: block; }
.telemetry-layout-widget.graphic > i { position: absolute; inset: 20%; border-top: 3px solid #5ee2a0; border-right: 3px solid #5ee2a0; border-radius: 50% 30% 60% 20%; transform: rotate(-12deg); opacity: .65; }
.telemetry-layout-resize { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 10px 0 0; background: linear-gradient(135deg, transparent 46%, #b8d7eb 47% 56%, transparent 57% 68%, #b8d7eb 69%); cursor: nwse-resize; }
.telemetry-layout-widget.locked .telemetry-layout-resize { display: none; }
.is-mobile-workspace .telemetry-layout-resize { display: none; }
.is-mobile-workspace .telemetry-layout-dialog[data-touch-mode="resize"] .telemetry-layout-widget:not(.locked) { cursor: nwse-resize; }
.telemetry-layout-secondary-action { display: flex; align-items: center; gap: 6px; }
.telemetry-layout-secondary-action .ui-icon { width: 17px; height: 17px; flex: none; }
.telemetry-layout-footer { position: relative; z-index: 2; border-top: 1px solid #343c47; }
.telemetry-layout-footer > span { flex: 1; }

.is-mobile-workspace .telemetry-layout-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(280px, 1fr) minmax(120px, 30%); overflow: hidden; }
.is-mobile-workspace .telemetry-layout-body > aside { order: 2; min-height: 0; overflow: auto; border-top: 1px solid #343c47; border-right: 0; }
.is-mobile-workspace .telemetry-layout-widget-row { gap: 2px; padding: 2px; }
.is-mobile-workspace .telemetry-layout-stage { padding: 10px 10px max(180px, 35vh); }
.is-mobile-workspace .telemetry-layout-footer { flex-wrap: nowrap; gap: 7px; padding: 7px 9px max(7px, env(safe-area-inset-bottom)); }
.is-mobile-workspace .telemetry-layout-secondary-action { width: 42px; min-width: 42px; height: 42px; justify-content: center; padding: 0; }
.is-mobile-workspace .telemetry-layout-secondary-action .ui-icon { width: 20px; height: 20px; }
.is-mobile-workspace .telemetry-layout-secondary-action > span { display: none; }
.is-mobile-workspace .telemetry-layout-footer > button[value="cancel"], .is-mobile-workspace .telemetry-layout-footer > [data-layout-apply] { min-height: 42px; white-space: nowrap; }

@keyframes telemetry-layout-layer-feedback {
  0% { box-shadow: 0 2px 8px #0007; }
  45% { box-shadow: 0 0 0 4px #ffb88799, 0 2px 15px #0009; }
  100% { box-shadow: 0 2px 8px #0007; }
}

.activity-range-dialog { width: min(1060px, calc(100vw - 28px)); max-width: none; height: min(760px, calc(100vh - 28px)); max-height: none; padding: 0; overflow: hidden; border: 1px solid #596574; border-radius: 10px; background: #171b21; color: #e2e7ed; }
.activity-range-dialog::backdrop { background: #05070acc; }
.activity-picker-shell { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.activity-picker-header, .activity-picker-footer { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: #20262e; }
.activity-picker-header { border-bottom: 1px solid #343c47; }
.activity-picker-header > div { min-width: 0; display: grid; }
.activity-picker-header strong { font-size: 15px; }
.activity-picker-header small { overflow: hidden; color: #9ca7b4; text-overflow: ellipsis; white-space: nowrap; }
.activity-picker-header button { margin-left: auto; border: 0; background: transparent; font-size: 22px; }
.activity-picker-readout { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #303741; }
.activity-picker-readout span { min-width: 0; display: grid; }
.activity-picker-readout small { color: #7f8995; font-size: 9px; }
.activity-picker-readout output { overflow: hidden; font: 11px ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.activity-picker-body { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 12px; overflow: auto; padding: 12px; }
.activity-picker-browser { min-width: 0; display: grid; align-content: start; gap: 8px; }
.activity-picker-row { min-height: 76px; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; color: #aeb7c2; }
.activity-picker-row[hidden] { display: none; }
.activity-picker-row canvas { width: 100%; height: 72px; border: 1px solid #3c4652; border-radius: 5px; cursor: crosshair; touch-action: none; }
.activity-picker-row > span { display: flex; align-items: center; gap: 5px; }
.activity-picker-row.overview { position: relative; }
.activity-picker-icon { min-width: 28px; min-height: 28px; display: inline-grid; place-items: center; padding: 2px 7px; border-radius: 50%; font-size: 16px; line-height: 1; }
.activity-picker-row .activity-picker-icon { position: absolute; z-index: 2; top: 50%; right: 7px; transform: translateY(-50%); }
.activity-picker-row.route { min-height: 150px; }
.activity-picker-row.route canvas { height: 146px; }
.activity-picker-zoom { display: flex; align-items: center; gap: 8px; padding-left: 100px; }
.activity-picker-zoom small { margin-left: auto; color: #7f8995; }
.activity-picker-preview { min-width: 0; display: grid; align-content: start; gap: 8px; }
.activity-picker-preview > canvas { width: 100%; height: 170px; border: 1px solid #3c4652; border-radius: 6px; background: #0d1014; }
.activity-picker-preview p { margin: 0; color: #8e99a5; font-size: 11px; }
.activity-picker-preview section { margin-top: 10px; padding: 9px; border: 1px solid #4b6278; border-radius: 6px; background: #1a2935; }
.activity-picker-preview section label { display: grid; gap: 5px; margin-top: 7px; }
.activity-picker-footer { border-top: 1px solid #343c47; }
.activity-picker-footer > span { flex: 1; }

@media (max-width: 767px) {
  .source-tabs .source-tab { min-width: 88px; flex-basis: 88px; padding-inline: 9px; }
  .activity-data-editor.mobile .activity-clip-readout { min-height: 48px; grid-template-columns: minmax(0, 1.35fr) minmax(92px, .65fr); gap: 3px 8px; }
  .activity-data-editor.mobile .activity-clip-readout > span:last-child { grid-column: 1 / -1; }
  .activity-data-editor.mobile .activity-clip-readout time { font-size: 12px; text-overflow: clip; }
  .activity-data-editor.mobile .activity-clip-readout output { overflow: visible; font-size: 9px; text-overflow: clip; }
  .activity-data-editor.mobile .activity-clip-actions { transform: translateY(2px); }
  .activity-data-editor.mobile .activity-clip-actions button { min-height: 32px; }
  .is-phone-workspace .track-lane.clip-detail-expanded { height: 254px !important; }
  .is-phone-workspace .track-lane.clip-detail-expanded > .clip { top: auto !important; bottom: 4px; height: 44px !important; }
  .activity-range-dialog { width: 100vw; height: var(--mobile-visible-height, 100vh); max-height: var(--mobile-visible-height, 100vh); margin: 0; border: 0; border-radius: 0; }
  .telemetry-layout-dialog { width: 100vw; height: var(--mobile-visible-height, 100vh); max-height: var(--mobile-visible-height, 100vh); margin: 0; border: 0; border-radius: 0; }
  .telemetry-layout-shell { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .telemetry-layout-toolbar { max-height: 156px; overflow: auto; }
  .telemetry-layout-stage { min-height: 300px; }
  .activity-picker-header, .activity-picker-footer { position: sticky; z-index: 3; }
  .activity-picker-header { top: 0; }
  .activity-picker-footer { bottom: 0; overflow-x: auto; }
  .activity-picker-readout { grid-template-columns: 1fr; gap: 4px; }
  .activity-picker-body { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  .activity-picker-row { grid-template-columns: 68px minmax(0, 1fr); }
  .activity-picker-zoom { padding-left: 76px; }
  .activity-picker-zoom small { display: none; }
  .activity-picker-preview { order: -1; }
  .activity-picker-preview > canvas { height: 125px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-mobile-workspace .workspace, .is-mobile-workspace #mobile-task-tray, .is-mobile-workspace .media-panel, .is-mobile-workspace .mobile-asset-drag-proxy, .is-mobile-workspace .mobile-asset-drag-handle::before { transition-duration: 0s; }
}
/* Keeps useful server and admin notices visible without obstructing the editing workspace. */
.app-status-banner { position:fixed; z-index:1000; top:max(10px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; max-width:min(720px,calc(100vw - 24px)); padding:10px 12px; color:#e8f8ff; background:#173447; border:1px solid #2f7998; border-radius:8px; box-shadow:0 8px 30px #0008; font-size:13px }
.app-status-banner[hidden] { display:none }
.app-status-banner[data-level="warning"] { color:#fff5d5; background:#4b3917; border-color:#9a742b }
.app-status-banner[data-level="error"] { color:#ffe8e8; background:#4c2024; border-color:#a74b52 }
.app-status-banner button { flex:0 0 auto; margin-left:auto; padding:0 4px; color:inherit; background:transparent; border:0; font-size:20px; line-height:1; cursor:pointer }
.timelapse-dialog { width: min(680px, calc(100vw - 24px)); max-height: min(820px, calc(100dvh - 24px)); padding: 0; }
.timelapse-dialog form { max-height: min(820px, calc(100dvh - 24px)); display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.timelapse-dialog-scroll { min-height: 0; display: flex; flex-direction: column; gap: 16px; overflow: auto; padding: 20px; }
.timelapse-heading { display: flex; justify-content: space-between; gap: 16px; }
.timelapse-heading h2, .timelapse-heading p { margin: 0 0 5px; }
.timelapse-analysis, .timelapse-warning, .timelapse-summary { padding: 12px; border-radius: 8px; background: var(--surface-raised, rgba(128,128,128,.12)); }
.timelapse-warning { display: grid; gap: 10px; color: var(--warning-text, #ffd28a); margin-bottom: 12px; }
.timelapse-warning button { justify-self: start; color: inherit; border-color: currentColor; background: transparent; }
.timelapse-speed { display: grid; gap: 13px; margin-bottom: 14px; padding: 14px; border-radius: 12px; background: var(--surface-raised, rgba(128,128,128,.12)); }
.timelapse-speed-mode { display: grid; grid-template-columns: auto minmax(190px, 1fr); align-items: center; gap: 12px; }
.timelapse-speed-mode select { min-height: 42px; border-radius: 10px; }
.timelapse-speed-control { display: grid; gap: 8px; }
.timelapse-speed-control > label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.timelapse-speed-control output { min-width: 8ch; font-size: 1.2em; font-variant-numeric: tabular-nums; text-align: right; }
.timelapse-speed-editor { display: grid; grid-template-columns: minmax(120px, 1fr) auto; align-items: center; gap: 12px; }
.timelapse-speed-editor input[type="range"] { width: 100%; min-height: 40px; accent-color: var(--accent, #6ea8fe); touch-action: pan-y; }
.timelapse-speed-number { display: flex; align-items: center; gap: 6px; color: #aeb5bf; font-size: 10px; }
.timelapse-speed-number input { width: 88px; min-height: 38px; font-variant-numeric: tabular-nums; }
#timelapse-speed-details { min-height: 1.4em; color: #9da5b0; font-variant-numeric: tabular-nums; }
.timelapse-summary { display: grid; gap: 5px; }
.timelapse-summary span, .timelapse-summary small { opacity: .8; }
#timelapse-groups { display: grid; gap: 3px; margin-top: 5px; max-height: 130px; overflow: auto; }
#timelapse-groups div { display: flex; justify-content: space-between; gap: 10px; font-size: .9em; }
.timelapse-dialog details { margin-top: 14px; }
.timelapse-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 14px; }
.timelapse-options label { display: grid; gap: 5px; }
.timelapse-options [hidden] { display: none; }
.timelapse-options .timelapse-check { display: flex; align-items: center; gap: 7px; }
.timelapse-custom-resolution { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.timelapse-footer { display: grid; gap: 8px; padding: 12px 20px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line, #3a3e45); background: var(--surface, #17191d); }
.timelapse-progress-copy { margin: 0; font-size: 11px; }
.timelapse-dialog progress { width: 100%; }
@media (max-width: 600px) {
  .timelapse-dialog { width: 100vw; max-width: none; height: var(--mobile-visible-height, 100dvh); max-height: var(--mobile-visible-height, 100dvh); margin: 0; border-radius: 0; }
  .timelapse-dialog form { height: 100%; max-height: none; }
  .timelapse-dialog-scroll { padding: 16px; }
  .timelapse-speed-mode { grid-template-columns: 1fr; gap: 6px; }
  .timelapse-speed-editor { grid-template-columns: 1fr; gap: 5px; }
  .timelapse-speed-number { justify-self: end; }
  .timelapse-options { grid-template-columns: 1fr; }
  .timelapse-dialog .dialog-actions { flex-wrap: wrap; }
  .timelapse-footer { padding-right: 16px; padding-left: 16px; }
  #timelapse-import-normal { width: 100%; order: 3; }
}
@keyframes timelapse-created-highlight { 0% { border-color: #8cf0b4; background: #28533f; box-shadow: 0 0 0 0 #76e9a688; } 35% { box-shadow: 0 0 0 5px #76e9a633; } 100% { border-color: transparent; background: #252930; box-shadow: 0 0 0 9px transparent; } }
@keyframes timelapse-created-hint { 0%, 72% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .asset.timelapse-created { animation: none; border-color: #8cf0b4; } .asset-created-hint { animation: none; } }
.map-tour-dialog { width: min(1120px, calc(100vw - 32px)); height: min(760px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 1px solid #505762; border-radius: 14px; background: var(--panel); color: inherit; }
.map-tour-dialog form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; height: 100%; min-width: 0; }
.map-tour-dialog header, .map-tour-dialog footer { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.map-tour-dialog header { justify-content: space-between; border-bottom: 1px solid var(--line); }
.map-tour-dialog header h2, .map-tour-dialog header p { margin: 0; }
.map-tour-dialog header p { margin-top: 4px; color: #9ba2ac; }
.map-tour-dialog footer { border-top: 1px solid var(--line); }
.map-tour-dialog-body { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr); min-width: 0; min-height: 0; overflow: hidden; }
.map-tour-preview-column { display: grid; align-content: start; min-width: 0; padding: 16px; overflow: hidden; border-right: 1px solid var(--line); background: #17191d; }
.map-tour-controls { min-width: 0; min-height: 0; padding: 16px; overflow-x: hidden; overflow-y: auto; }
.map-tour-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.map-tour-mode label { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #23272d; }
.map-tour-mode input { grid-row: span 2; }
.map-tour-mode small { color: #9ba2ac; }
.map-tour-coverage { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #e8793a18; color: #d7bca8; }
.map-tour-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.map-tour-settings label { display: grid; align-content: start; gap: 6px; min-width: 0; }
.map-tour-settings label > small { color: #9ba2ac; font-size: 11px; }
.map-tour-settings .map-tour-check { display: flex; align-items: center; gap: 8px; }
.map-tour-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 14px; min-width: 0; margin: 0; padding: 11px 12px 13px; border: 1px solid var(--line); border-radius: 9px; }
.map-tour-section legend { padding: 0 5px; color: #d8dce2; font-weight: 650; }
.map-tour-section [hidden] { display: none; }
.map-tour-source-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; min-width: 0; margin: 12px 0 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 9px; }
.map-tour-source-range legend { padding: 0 5px; color: #d8dce2; }
.map-tour-range-actions { display: flex; grid-column: 1 / -1; align-items: center; gap: 8px; min-width: 0; }
.map-tour-range-actions button { min-height: 32px; padding: 4px 9px; }
.map-tour-range-actions output { margin-left: auto; color: #aeb5bf; font-variant-numeric: tabular-nums; }
.map-tour-preview { display: grid; gap: 8px; min-width: 0; margin: 0; overflow: hidden; border: 1px solid #4d4337; border-radius: 12px; background: #111; }
.map-tour-preview-frame { position: relative; display: grid; place-items: center; min-width: 0; }
.map-tour-preview canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: min(380px, calc(100dvh - 280px)); margin: auto; object-fit: contain; background: #151515; }
.map-tour-preview-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: #111d; color: #e3e7ec; }
.map-tour-preview-loading[hidden] { display: none; }
.map-tour-preview-loading span { width: 26px; height: 26px; border: 3px solid #ffffff38; border-top-color: #e3b568; border-radius: 50%; animation: map-tour-spin .8s linear infinite; }
@keyframes map-tour-spin { to { transform: rotate(360deg); } }
.map-tour-preview-controls { display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; align-items: center; gap: 10px; padding: 0 10px 10px; }
.map-tour-preview input[type="range"] { width: 100%; min-height: 36px; }
.map-tour-preview output, .map-tour-slider output { min-width: 5.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.map-tour-slider { display: grid; grid-template-columns: minmax(80px, 1fr) 5.5ch; align-items: center; gap: 8px; min-height: 38px; }
.map-tour-slider input[type="range"] { width: 100%; min-height: 38px; touch-action: pan-y; }
.map-tour-slider input[type="number"] { width: 88px; min-height: 38px; font-variant-numeric: tabular-nums; }
.map-tour-slider:has(input[type="number"]) { grid-template-columns: minmax(80px, 1fr) 88px auto; }
.map-tour-duration-control { display: grid; grid-template-columns: minmax(120px, 1fr) auto; align-items: center; gap: 8px; }
.map-tour-duration-control > input[type="range"] { width: 100%; min-height: 38px; }
.map-tour-duration-value { display: flex; align-items: center; gap: 8px; min-width: 98px; font-variant-numeric: tabular-nums; }
.map-tour-duration-value output { min-width: 5ch; text-align: right; }
.map-tour-duration-value input { width: 86px; }
.map-tour-duration-value .icon-button { flex: 0 0 auto; margin-left: 2px; }
.map-tour-settings select, .map-tour-settings input[type="color"] { width: 100%; min-width: 0; min-height: 38px; }
.map-tour-settings .map-tour-check { align-self: end; min-height: 38px; padding: 0 2px; }
.map-tour-wide { grid-column: 1 / -1; }
.map-tour-progress-state { display: grid; flex: 1; gap: 4px; min-width: 0; }
.map-tour-marker-section { grid-template-columns: minmax(180px, .7fr) minmax(240px, 1.3fr); }
.map-tour-marker-source, .map-tour-marker-controls { display: grid; align-content: start; gap: 8px; }
.map-tour-marker-source > button { min-height: 38px; }
.map-tour-marker-preview { display: grid; grid-column: 1 / -1; justify-items: center; align-content: start; gap: 6px; min-width: 0; margin: 0; }
.map-tour-marker-preview figcaption { justify-self: start; color: #d8dce2; font-size: 12px; font-weight: 650; }
.map-tour-marker-preview canvas { display: block; width: 100%; max-width: 420px; height: auto; border: 1px solid #59616c; border-radius: 10px; background: #1a1e23; touch-action: none; cursor: grab; }
.map-tour-marker-preview canvas[data-action="resize"] { cursor: nwse-resize; }
.map-tour-marker-preview canvas[data-frame="original"] { cursor: default; }
.map-tour-marker-preview canvas:active:not([data-frame="original"]) { cursor: grabbing; }
.map-tour-marker-preview small { min-height: 2.8em; color: #aeb5bf; text-align: center; }
.map-tour-marker-preview output, #map-tour-marker-output-size { color: #8f98a4; font-size: 11px; font-variant-numeric: tabular-nums; }
.map-tour-dialog progress { width: min(260px, 100%); }
#map-tour-progress-copy { min-width: 0; max-height: 5.2em; overflow: auto; white-space: normal; overflow-wrap: anywhere; color: #aeb5bf; font-size: 12px; line-height: 1.3; }
#map-tour-progress-copy.error { color: #ffb3a8; }
.map-video-render-surface { z-index: -1000; }
.clip.map-tour { background: linear-gradient(135deg, #7d5531, #304c55); }
@media (max-width: 760px) { .map-tour-dialog { width: 100vw; height: var(--mobile-visible-height, 100dvh); margin: 0; border-radius: 0; } .map-tour-dialog-body { display: block; overflow-x: hidden; overflow-y: auto; } .map-tour-preview-column { padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); } .map-tour-controls { overflow: visible; padding: 12px; } .map-tour-mode, .map-tour-settings, .map-tour-source-range, .map-tour-section { grid-template-columns: 1fr; } .map-tour-range-actions { grid-column: auto; flex-wrap: wrap; } .map-tour-range-actions output { width: 100%; margin-left: 0; } .map-tour-wide { grid-column: auto; } .map-tour-dialog header { padding: 10px 12px; } .map-tour-dialog footer { flex-wrap: wrap; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); } .map-tour-progress-state { order: -1; width: 100%; flex-basis: 100%; } .map-tour-preview canvas { max-height: 30vh; } }

/* Keeps missing source records visible alongside ordinary relinkable files, including on narrow screens. */
/* Keep missing-source details in the media scroller, below the always-accessible import controls. */
.missing-media-panel { margin: 0 8px 10px; padding: 8px; border: 1px solid #b9813f; border-radius: 6px; background: #332a20; color: #ffe0b2; }
.missing-media-panel[hidden] { display: none; }
.missing-media-panel summary { cursor: pointer; min-height: 32px; padding: 6px 0; font-size: 12px; overflow-wrap: anywhere; }
.missing-media-panel summary span { margin-left: 8px; font-size: 11px; text-decoration: underline; }
.missing-media-panel:not([open]) .missing-media-hide, .missing-media-panel[open] .missing-media-show { display: none; }
.missing-media-items { padding-top: 8px; }
.missing-media-item + .missing-media-item { border-top: 1px solid #725432; margin-top: 12px; padding-top: 12px; }
.missing-media-item b, .missing-media-item code { display: block; overflow-wrap: anywhere; }
.missing-media-item p { margin: 6px 0; font-size: 12px; line-height: 1.5; }
.missing-media-item code { font-size: 11px; margin-bottom: 8px; }
.missing-media-item button { display: block; width: 100%; min-height: 36px; margin-top: 6px; text-align: left; white-space: normal; }
@media (pointer: coarse) { .missing-media-item button, .missing-media-panel summary { min-height: 48px; } }