:root{--font-sans: "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;--font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--bg-0: #f2f3f5;--bg-1: #f7f8fa;--panel: rgba(255, 255, 255, .74);--panel-strong: rgba(255, 255, 255, .92);--line-soft: rgba(16, 24, 40, .1);--line-mid: rgba(16, 24, 40, .16);--text-1: #111827;--text-2: #4b5563;--text-3: #6b7280;--accent: #0a84ff;--accent-indigo: #6366f1;--accent-weak: color-mix(in srgb, var(--accent) 12%, transparent);--danger: #ff3b30;--radius-pill: 999px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--border-soft: rgba(148, 163, 184, .22);--border-mid: rgba(148, 163, 184, .28);--border-strong: rgba(148, 163, 184, .34);--border-hairline: rgba(148, 163, 184, .14);--border-faint: rgba(148, 163, 184, .07);--transition-fast: .14s;--transition-slow: .16s;--z-canvas-bg: 0;--z-canvas-scene: 1;--z-canvas-interaction: 2;--z-canvas-ui: 3;--z-pages-panel: 35;--z-toast: 40;--z-recovery: 60;--z-confirm: 120;--shadow-soft: 0 8px 32px rgba(15, 23, 42, .08);--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .6)}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%}body{font-family:var(--font-sans);color:var(--text-1);background:radial-gradient(1200px 460px at 5% -10%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 68%),radial-gradient(900px 380px at 100% 0%,color-mix(in srgb,var(--accent-indigo) 8%,transparent),transparent 64%),linear-gradient(180deg,var(--bg-1),var(--bg-0));letter-spacing:.01em;overflow:hidden;user-select:none;-webkit-user-select:none}button,input{font:inherit}input,textarea{user-select:text;-webkit-user-select:text}button{border:1px solid var(--line-soft);border-radius:var(--radius-pill);background:#ffffffdb;color:var(--text-1);padding:7px 12px;cursor:pointer;transition:background var(--transition-fast) ease,border-color var(--transition-fast) ease,transform var(--transition-fast) ease}button:hover{border-color:var(--line-mid);background:#fff}button:active{transform:translateY(1px)}button:disabled{color:var(--text-2);border-color:var(--line-soft);cursor:not-allowed}button.active{border-color:#0a84ff66;background:var(--accent-weak);color:#0558ba}button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid rgba(10,132,255,.55);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition:none!important;animation:none!important}}input[type=number]{width:112px;padding:6px 8px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:#ffffffd1;color:var(--text-1)}input[type=number]:focus-visible{outline:2px solid rgba(10,132,255,.35);outline-offset:0}input[type=color]{width:40px;height:28px;border:0;background:transparent;padding:0}.app-shell{width:100%;height:100%;max-height:100vh;margin:0 auto;padding:4px;display:flex;flex-direction:column;gap:4px;overflow:hidden}.app-shell.recording-shell{padding:0;gap:0}@supports (padding: max(0px)){.app-shell{padding-top:max(4px,env(safe-area-inset-top));padding-right:max(4px,env(safe-area-inset-right));padding-bottom:max(4px,env(safe-area-inset-bottom));padding-left:max(4px,env(safe-area-inset-left))}}.panel{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius-lg);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:var(--shadow-soft),var(--shadow-inset)}.app-main{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,220px);gap:4px;min-height:0;height:100%;overflow:hidden}.recording-loading{width:100%;height:100%;display:grid;place-items:center;font-size:13px;color:var(--text-2);letter-spacing:.02em}.user-chip{display:inline-flex;align-items:center;gap:8px;height:32px;border-radius:var(--radius-md);border:1px solid var(--border-mid);background:#fffffff0;padding:0 9px;box-shadow:0 3px 10px #0f172a14;color:#1f2937}.user-chip-meta{display:flex;flex-direction:column;line-height:1.05}.user-chip-meta strong{font-size:11px;font-weight:600}.user-chip-meta span{font-size:10px;color:var(--text-3)}.license-badge{border:1px solid rgba(14,116,144,.24);border-radius:var(--radius-pill);padding:2px 6px;font-size:9px;color:#0f766e;background:#ccfbf1b3}.project-layer{position:relative;width:100%;height:100%;padding:18px;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:12px;border:1px solid var(--border-mid);border-radius:var(--radius-xl);background:radial-gradient(120% 100% at 10% -10%,#6366f124,#6366f100 50%),linear-gradient(180deg,#f8fafcf5,#f1f5f9f0);overflow:hidden}.project-header{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:12px;padding:12px 14px;border:1px solid var(--border-soft);border-radius:var(--radius-lg);background:#ffffffbd;box-shadow:0 10px 26px #0f172a0f}.project-brand{display:inline-flex;align-items:center;gap:10px}.project-brand-logo{width:30px;height:30px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 3px 6px rgba(37,99,235,.22))}.project-brand-copy{display:inline-flex;flex-direction:column}.project-brand-copy h2{margin:0;font-size:20px;font-weight:680;color:var(--text-1)}.project-brand-copy p{margin:4px 0 0;color:var(--text-2);font-size:12px}.project-overview{margin-top:7px;display:inline-flex;align-items:center;gap:6px}.project-overview span{height:24px;border-radius:var(--radius-pill);border:1px solid var(--border-mid);padding:0 9px;display:inline-flex;align-items:center;font-size:11px;color:#334155;background:#ffffffdb}.project-actions{display:inline-flex;align-items:center;gap:8px}.project-user-chip{margin-left:auto}.project-actions input[type=text]{width:220px;height:32px;border:1px solid var(--border-mid);border-radius:var(--radius-md);background:#ffffffd9;padding:0 10px;color:var(--text-1)}.create-project-form{padding:0;display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr);gap:10px}.create-project-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#334155}.create-project-form input[type=text]{height:32px;border:1px solid var(--border-mid);border-radius:var(--radius-md);background:#ffffffe0;padding:0 10px}.create-project-form select{height:32px;border:1px solid var(--border-mid);border-radius:var(--radius-md);background:#ffffffe0;padding:0 10px;color:#334155}.create-project-file-row{grid-column:1 / -1;display:inline-flex;align-items:center;gap:8px}.create-project-file-row.hint{border:1px dashed var(--border-strong);border-radius:var(--radius-md);padding:8px 10px;background:#f8fafcb8}.create-project-file-name{color:var(--text-2);font-size:11px;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-actions .icon-btn{gap:6px;height:34px;border-radius:var(--radius-md);padding:0 12px;border-color:var(--border-mid);background:#fffffff5;color:#1e293b;box-shadow:0 2px 10px #0f172a0f}.create-project-dialog{width:min(620px,100%);padding:14px;display:grid;gap:12px}.export-config-dialog{width:min(620px,100%);max-height:min(calc(100vh - 48px),640px);padding:0;display:flex;flex-direction:column;gap:0;border-radius:var(--radius-xl);border:1px solid var(--border-strong);background:linear-gradient(180deg,#22232bfa,#19191ffa);box-shadow:0 30px 64px #0f172a70,inset 0 1px #ffffff0f;overflow:hidden;color:#ebeef8f2}.export-config-form{display:flex;flex-direction:column;gap:0;min-height:0;overflow-y:auto}.export-config-head{flex-shrink:0;min-height:66px;display:grid;grid-template-columns:minmax(64px,1fr) auto minmax(64px,1fr);align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--border-soft);background:linear-gradient(180deg,#31323ee6,#272831db)}.export-config-head h4{margin:0;font-size:21px;font-weight:650;letter-spacing:.01em;color:#f2f4fff5}.export-config-head-action{border:0;border-radius:0;background:transparent;box-shadow:none;padding:0;height:34px;min-width:auto;color:var(--uf-accent);font-size:14px;font-weight:600}.export-config-head-action:hover{background:transparent;border:0;color:color-mix(in srgb,var(--uf-accent) 65%,#ffffff)}.export-config-head-action.primary{justify-self:end}.export-config-head-action:not(.primary){justify-self:start}.export-config-dialog button:disabled{color:#ebeef89e;border-color:transparent}.export-config-rows{display:flex;flex-direction:column;border-bottom:1px solid var(--border-soft)}.export-config-row{min-height:58px;display:grid;grid-template-columns:108px minmax(0,1fr);align-items:center;gap:8px;padding:0 20px 0 24px;border-bottom:1px solid var(--border-soft);background:#0f101670}.export-config-row:last-child{border-bottom:0}.export-config-row-button{width:100%;border:0;border-radius:0;box-shadow:none;cursor:pointer}.export-config-row-button:hover:not(:disabled){border:0;background:#23242eb8}.export-config-row-button:disabled{cursor:not-allowed}.export-config-row-button:disabled .export-config-row-label,.export-config-row-button:disabled .export-config-row-value,.export-config-row-button:disabled .export-config-ext{color:#cbcfe2b8}.export-config-row-button.open{background:#23242e9e}.export-config-row-label{font-size:14px;font-weight:590;color:#eef1fbe6}.export-config-row-value{min-width:0;display:inline-flex;align-items:center;justify-content:flex-end;gap:8px}.export-config-row-value.action{color:color-mix(in srgb,var(--uf-accent) 45%,#ffffff);font-size:13px;font-weight:600}.export-config-row-value input{width:min(100%,320px);min-width:0;border:0;border-radius:0;background:transparent;color:var(--uf-accent);font-size:14px;font-weight:600;text-align:right;padding:0;outline:none;box-shadow:none}.export-config-row-value input:focus-visible{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--uf-accent) 70%,transparent);text-underline-offset:4px}.export-config-row-value input:disabled{color:#cbcfe2b8}.export-config-segment{min-width:0;display:inline-flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}.export-config-segment-option{min-height:30px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--border-mid);background:transparent;color:#cbcfe2d1;font-size:13px;font-weight:600;cursor:pointer}.export-config-segment-option:hover:not(:disabled){border-color:color-mix(in srgb,var(--uf-accent) 46%,transparent);color:#eef1fbf2}.export-config-segment-option.selected{border-color:color-mix(in srgb,var(--uf-accent) 46%,transparent);background:color-mix(in srgb,var(--uf-accent) 16%,transparent);color:color-mix(in srgb,var(--uf-accent) 60%,#ffffff)}.export-config-segment-option:disabled{opacity:.44;cursor:not-allowed}.export-config-ext{font-size:13px;color:color-mix(in srgb,var(--uf-accent) 84%,#ffffff)}.export-config-path-row{align-items:flex-start;padding-top:10px;padding-bottom:10px}.export-config-row-value.path{justify-content:flex-end;flex-wrap:wrap;row-gap:6px}.export-config-path-btn{min-height:30px;padding:0 10px;border-radius:var(--radius-pill);border:1px solid color-mix(in srgb,var(--uf-accent) 38%,transparent);background:color-mix(in srgb,var(--uf-accent) 16%,transparent);color:color-mix(in srgb,var(--uf-accent) 60%,#ffffff);font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:5px}.export-config-path-btn:hover{border-color:color-mix(in srgb,var(--uf-accent) 46%,transparent);background:color-mix(in srgb,var(--uf-accent) 24%,transparent)}.export-config-path-row .create-project-file-name{max-width:min(48vw,332px);color:#cdd0e3d1;text-align:right}.export-config-advanced{display:flex;flex-direction:column}.export-config-status{min-height:36px;display:inline-flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--border-soft);font-size:12px;font-weight:560;letter-spacing:.01em}.export-config-status.error{color:#fec3c3f0}.export-config-preview{padding:18px 20px 16px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,#2b2c37c7,#272831c7);border-bottom:1px solid var(--border-soft)}.export-config-preview-frame{position:relative;height:200px;border-radius:var(--radius-lg);border:1px solid var(--border-mid);background:#0c0e1499;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:crosshair}.export-config-preview-scrub{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--uf-accent) 72%,#ffffff);pointer-events:none;z-index:2}.export-config-preview-scrub-time{position:absolute;top:8px;transform:translate(-50%);height:20px;padding:0 8px;border-radius:var(--radius-md);display:inline-flex;align-items:center;background:#161925d6;color:#f0f3ffeb;font-size:11px;pointer-events:none;z-index:3}.export-config-preview-img{max-width:100%;max-height:100%;object-fit:contain}.export-config-preview-placeholder{font-size:13px;color:#cbcfe2b8}.export-config-preview-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:#cdd0e3d1}.export-config-foot{min-height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:linear-gradient(180deg,#2a2b36cc,#24252fcc)}.export-config-foot .mono{font-size:14px;color:color-mix(in srgb,var(--uf-accent) 84%,#ffffff)}.export-config-foot-link{border:0;border-radius:0;background:transparent;box-shadow:none;padding:0;min-width:auto;height:32px;color:color-mix(in srgb,var(--uf-accent) 85%,#ffffff);font-size:14px;font-weight:600}.export-config-foot-link:hover{border:0;background:transparent;color:color-mix(in srgb,var(--uf-accent) 70%,#ffffff)}.create-project-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.create-project-dialog-header h4{margin:0;font-size:16px}.create-project-mode-switch{display:inline-flex;align-items:center;gap:8px}.create-project-mode-switch .icon-btn{height:30px;padding:0 10px;gap:6px}.create-project-submit-row{grid-column:1 / -1;display:inline-flex;justify-content:flex-end;align-items:center;gap:8px}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;min-height:0;overflow:auto;padding:4px 6px 6px 2px}.project-card{position:relative;border-radius:var(--radius-lg);border:1px solid var(--border-soft);background:linear-gradient(180deg,#fffffffa,#f6f9fdf0);text-align:left;padding:13px 13px 12px;display:flex;flex-direction:column;gap:7px;min-height:128px;box-shadow:0 8px 20px #0f172a0f;transition:transform var(--transition-slow) ease,box-shadow var(--transition-slow) ease,border-color var(--transition-slow) ease}.project-card:hover{transform:translateY(-1px);box-shadow:0 14px 30px #0f172a1a}.project-card.active{border-color:color-mix(in srgb,var(--accent-indigo) 48%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-indigo) 14%,transparent),0 16px 34px color-mix(in srgb,var(--accent-indigo) 16%,transparent)}.project-card-cover{width:100%;aspect-ratio:16 / 9;border-radius:var(--radius-md);object-fit:cover;background:var(--border-faint, rgba(15, 23, 42, .06))}.project-card-cover-empty{display:flex;align-items:center;justify-content:center;color:var(--text-3, rgba(15, 23, 42, .45))}.project-pages-panel{position:absolute;right:18px;bottom:18px;width:min(460px,calc(100% - 36px));max-height:min(380px,calc(100% - 36px));display:flex;flex-direction:column;border-radius:var(--radius-xl);padding:12px;gap:10px;border:1px solid var(--border-mid);background:#f8fafcf0;box-shadow:0 18px 40px #0f172a24;z-index:var(--z-pages-panel)}.project-pages-panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.project-pages-panel-header strong{font-size:14px;color:var(--text-1)}.project-pages-panel-actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.project-pages-list{display:flex;flex-direction:column;gap:6px;min-height:0;overflow:auto;padding-right:2px}.project-page-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:var(--radius-md);border:1px solid var(--border-soft);background:#ffffffdb;cursor:pointer}.project-page-item.selected{border-color:#0a84ff6b;background:#eff6ffeb;box-shadow:0 0 0 1px #0a84ff29}.project-page-item-meta{display:inline-flex;flex-direction:column;min-width:0;gap:2px}.project-page-item-meta strong{font-size:12px;color:var(--text-1)}.project-page-item-meta span{font-size:10px;color:var(--text-3);letter-spacing:.03em}.project-page-item-actions{display:inline-flex;align-items:center;gap:4px}.project-card-title{font-weight:650;font-size:15px;color:var(--text-1);padding-right:78px;min-height:24px;display:inline-flex;align-items:center;cursor:text}.project-title-input{width:100%;height:24px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:0 7px;background:#fffffff2;font-size:13px;color:var(--text-1)}.project-card-meta{color:var(--text-2);font-size:12px}.project-card-actions{position:absolute;top:9px;right:9px;display:inline-flex;align-items:center;gap:4px}.project-card .card-action{min-width:26px;width:26px;height:26px;padding:0;border-radius:var(--radius-sm)}.project-card-open{margin-top:auto;display:inline-flex;align-items:center;gap:6px;color:#312e81;font-size:12px;font-weight:640;border:1px solid color-mix(in srgb,var(--accent-indigo) 32%,transparent);border-radius:var(--radius-md);width:fit-content;padding:5px 10px;background:#e0e7ffb8}.project-card-open:hover{border-color:color-mix(in srgb,var(--accent-indigo) 52%,transparent);background:#e0e7fff0;color:#1e1b4b}.project-error{border:1px solid rgba(239,68,68,.24);border-radius:var(--radius-md);background:#fef2f2cc;color:#b42318;font-size:12px;padding:8px 10px}.project-toast-stack{position:absolute;right:8px;top:10px;z-index:var(--z-toast);display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}.project-toast{max-width:min(460px,52vw);border:1px solid rgba(56,189,248,.24);border-radius:var(--radius-md);padding:8px 10px;background:#eff6fff0;color:#0c4a6e;font-size:12px;box-shadow:0 5px 16px #0f172a1f}.project-toast.error{border-color:#ef44443d;background:#fef2f2f2;color:#991b1b}.project-toast.warning{border-color:#f59e0b3d;background:#fffbebf2;color:#92400e}.confirm-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-confirm);background:#0f172a47;display:grid;place-items:center;padding:16px}.confirm-dialog{width:min(420px,100%);padding:14px;display:grid;gap:10px}.confirm-dialog h4{margin:0;font-size:16px}.confirm-dialog p{margin:0;font-size:13px;color:#334155}.confirm-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.whiteboard-bg-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:var(--z-canvas-bg);pointer-events:none}.whiteboard-fabric-scene{position:absolute;top:0;right:0;bottom:0;left:0;z-index:var(--z-canvas-scene);pointer-events:none}.whiteboard-fabric-interaction-scene{position:absolute;top:0;right:0;bottom:0;left:0;z-index:var(--z-canvas-interaction);pointer-events:none}.whiteboard-ui-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:var(--z-canvas-ui)}.fabric-stroke-layer{width:100%;height:100%;display:block;pointer-events:none}.fabric-object-interaction-layer{width:100%;height:100%;display:block}.icon-btn{min-width:28px;height:30px;border-radius:var(--radius-md);border:1px solid rgba(15,23,42,.1);padding:0 7px;font-size:11px;font-weight:600;background:linear-gradient(180deg,#fffffff5,#f8fafceb);display:inline-flex;align-items:center;justify-content:center;color:#334155;box-shadow:0 1px 2px #0f172a0f}.icon-btn.active{background:#ff3b3024;border-color:#ff3b306b;color:#b42318}.icon-btn.selected{background:#0a84ff21;border-color:#0a84ff57;color:#045bc6}.icon-btn.danger{color:#9f2f2f}.icon-btn svg{pointer-events:none}.mono{font-family:var(--font-mono);font-size:12px}@media (max-width: 1220px){.app-main{grid-template-rows:minmax(0,1fr) minmax(0,230px)}}@media (max-width: 768px){.app-shell{padding:4px;gap:4px}.create-project-dialog{width:min(96vw,520px);padding:12px}.export-config-dialog{width:min(96vw,620px)}.export-config-head{min-height:58px}.export-config-head h4{font-size:18px}.export-config-row{min-height:52px;grid-template-columns:84px minmax(0,1fr);padding-left:14px;padding-right:14px}.export-config-row-label,.export-config-row-value input,.export-config-row select,.export-config-row-value.action,.export-config-foot .mono,.export-config-foot-link{font-size:13px}.export-config-status{padding-left:14px;padding-right:14px}.export-config-preview{padding:12px}.export-config-preview-canvas{height:180px}.create-project-form{grid-template-columns:1fr}.create-project-submit-row{justify-content:space-between}.user-chip{height:28px;padding:0 6px;gap:6px}.user-chip-meta span,.license-badge{display:none}}@media (pointer: coarse){.icon-btn,.overlay-btn,.project-card-open,.project-page-item-actions .icon-btn{min-height:44px}.project-card .card-action,.export-task-close{min-width:44px;width:44px;height:44px}.create-project-form input[type=text],.project-title-input,input[type=number]{font-size:16px;min-height:44px}.project-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.create-project-dialog{width:min(92vw,720px)}}.timeline-recovery-dialog{position:fixed;left:50%;bottom:96px;transform:translate(-50%);padding:14px 18px;display:flex;flex-direction:column;gap:10px;z-index:var(--z-recovery)}.timeline-recovery-actions{display:flex;gap:8px;justify-content:flex-end}.overlay-settings-popover{position:fixed;padding:6px;min-width:160px;z-index:var(--uf-z-overlay-popover, 200)}.overlay-settings-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 10px;border:none;background:none;cursor:pointer}.switch-track{position:relative;width:34px;height:20px;border-radius:var(--radius-pill);background:var(--border-mid);transition:background var(--transition-fast) ease;flex:none}.switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0f172a59;transition:left var(--transition-fast) ease}.overlay-settings-row.on .switch-track{background:var(--uf-accent)}.overlay-settings-row.on .switch-thumb{left:16px}.overlay-settings-device-row{cursor:default}.overlay-settings-select{max-width:120px;padding:3px 6px;border:1px solid var(--border-mid);border-radius:var(--radius-md);background:transparent;color:var(--text-1);font-size:13px}.export-queue-hint{margin:6px 0 0;font-size:12px;opacity:.75}:root{--uf-surface: rgba(24, 28, 38, .76);--uf-surface-strong: rgba(22, 26, 35, .9);--uf-text: #f8fafc;--uf-text-soft: rgba(226, 232, 240, .74);--uf-accent: #7a7dff;--uf-accent-soft: color-mix(in srgb, var(--uf-accent) 22%, transparent);--uf-accent-grad: linear-gradient(135deg, #5f64ea 0%, #4a4fd6 100%);--uf-accent-grad-deep: linear-gradient(135deg, #5458e0 0%, #5054d8 100%);--uf-border: var(--border-mid);--uf-overlay-top: 24px;--uf-overlay-height: 38px;--uf-canvas-toolbar-top: calc(var(--uf-overlay-top) + var(--uf-overlay-height) + 36px);--uf-z-track-grid: 1;--uf-z-track-lane: 3;--uf-z-track-thumbs: 4;--uf-z-track-segment: 4;--uf-z-track-wave: 5;--uf-z-track-camera: 6;--uf-z-track-ruler: 8;--uf-z-track-action-lane: 9;--uf-z-track-topbar: 10;--uf-z-track-selection: 10;--uf-z-track-pointer: 11;--uf-z-track-snap: 12;--uf-z-track-cursor: 13;--uf-z-track-bubble: 14;--uf-z-timeline-track: 42;--uf-z-drag-region: 44;--uf-z-floating-controls: 45;--uf-z-canvas-toolbar: 48;--uf-z-page-strip: 49;--uf-z-overlay: 52;--uf-z-actionbar: 60;--uf-z-export: 66;--uf-z-context-menu: 72;--uf-z-rocker: 1;--uf-z-overlay-popover: 54;--uf-danger: #ef4444;--uf-control-size: 38px;--uf-toolbar-gap: 6px;--uf-timeline-side-gap: 12px;--uf-timeline-track-bottom: 64px;--uf-timeline-track-height: 136px;--uf-ruler-height: 16px;--uf-action-lane-height: 30px;--uf-track-lane-gap: 3px;--uf-track-padding-bottom: 6px;--uf-scrollbar-thumb: rgba(100, 116, 139, .42);--uf-scrollbar-track: rgba(226, 232, 240, .45)}.recording-shell :focus-visible{outline-color:var(--uf-accent)}.app-shell.recording-shell button:disabled{color:#fff;border-color:var(--border-soft)}.app-shell.recording-shell .export-config-dialog button:disabled{color:#ebeef89e;border-color:transparent}.recording-shell .confirm-backdrop,.recording-shell .timeline-recovery-dialog{pointer-events:auto}.recording-shell .confirm-dialog{border-color:var(--uf-border);background:var(--uf-surface-strong);box-shadow:0 20px 44px #0f172a57;min-width:0}.recording-shell .confirm-dialog h4{color:var(--uf-text)}.recording-shell .confirm-dialog p{color:var(--uf-text-soft);overflow-wrap:anywhere}.recording-shell .confirm-actions{flex-wrap:wrap}.app-shell.recording-shell{background:#d6d9de}.recording-layer{position:relative;width:100%;height:100%;padding:0;background:radial-gradient(180% 120% at 50% -10%,#7a7dff24,#7a7dff00 45%),linear-gradient(180deg,#e9ebee,#d8dbe0)}.recording-stage{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;border-radius:0;border:0;background:transparent;box-shadow:none}.recording-stage:before{display:none}.native-title-drag-region{position:absolute;z-index:var(--uf-z-drag-region);-webkit-app-region:drag;pointer-events:none;top:8px;left:140px;right:18px;height:36px;background:transparent}.native-macos .recording-overlay,.native-macos .canvas-toolbar,.native-macos .floating-controls,.native-macos .page-preview-strip,.native-macos .timeline-floating-track,.native-macos .timeline-actionbar,.native-macos .timeline-transport-pill{-webkit-app-region:no-drag}.recording-overlay{position:absolute;top:var(--uf-overlay-top);left:12px;right:12px;z-index:var(--uf-z-overlay);display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}.overlay-left,.overlay-right{display:inline-flex;align-items:center;gap:6px;min-width:0;pointer-events:auto}.overlay-right{position:relative;flex-wrap:nowrap;justify-content:flex-end;margin-left:auto;max-width:min(72vw,920px);overflow-x:clip;scrollbar-width:none}.overlay-right::-webkit-scrollbar{display:none}.overlay-project-pill{display:inline-flex;align-items:stretch;min-width:min(296px,40vw);height:38px;border-radius:var(--radius-md);border:1px solid var(--uf-border);background:var(--uf-surface);box-shadow:0 14px 30px #0f172a33;backdrop-filter:blur(16px) saturate(138%);-webkit-backdrop-filter:blur(16px) saturate(138%)}.overlay-nav-btn{width:34px;min-width:34px;height:100%;display:inline-flex;align-items:center;justify-content:center;border:0;border-right:1px solid var(--border-mid);background:transparent;color:var(--uf-text);transition:background-color var(--transition-slow) ease,color var(--transition-slow) ease}.overlay-nav-btn:hover:not(:disabled){background:#7a7dff2e;color:#eef2ff}.overlay-nav-btn:disabled{border-right-color:var(--border-soft)}.overlay-project-meta{display:inline-flex;align-items:center;min-width:0;gap:6px;padding:0 10px}.overlay-project-badge{display:none}.overlay-project-line{display:inline-flex;align-items:center;gap:6px;min-width:0}.overlay-project-selector{border:0;background:transparent;color:var(--uf-text);font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:0;padding:0;min-width:0;cursor:text}.overlay-project-selector:hover{color:#fff}.overlay-project-selector strong{max-width:min(260px,34vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overlay-project-input{min-width:min(260px,34vw);max-width:min(280px,36vw);height:24px;padding:0 8px;border-radius:var(--radius-sm);border:1px solid rgba(122,125,255,.58);background:#0f172a85;color:var(--uf-text);font-size:13px;font-weight:700;outline:none}.overlay-project-input:focus{border-color:#7a7dffdb;box-shadow:0 0 0 2px #7a7dff38}.overlay-page-caption{color:var(--uf-text-soft);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:20vw}.overlay-btn{height:38px;border-radius:var(--radius-md);border:1px solid var(--uf-border);background:var(--uf-surface);color:var(--uf-text);box-shadow:0 14px 30px #0f172a33;backdrop-filter:blur(16px) saturate(138%);-webkit-backdrop-filter:blur(16px) saturate(138%);padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12px;pointer-events:auto;transition:background-color var(--transition-slow) ease,border-color var(--transition-slow) ease,color var(--transition-slow) ease,transform var(--transition-fast) ease}.overlay-btn:hover:not(:disabled){border-color:#a7a9ff7a;background:#292f3ce6;color:#eef2ff}.overlay-btn-pill{min-width:92px;padding:0 11px;gap:6px;font-weight:700;font-size:13px}.overlay-btn-compact{min-width:30px;width:30px;height:30px;padding:0}.overlay-btn-accent{background:var(--uf-accent-grad);border-color:#7a7dff9e;color:#fff}.overlay-btn-accent:hover:not(:disabled){border-color:color-mix(in srgb,var(--uf-accent) 55%,#ffffff);background:var(--uf-accent-grad);box-shadow:0 14px 30px #0f172a33,0 6px 16px #7a7dff59;color:#fff}.overlay-btn.selected{background:var(--uf-accent-grad);border-color:#7a7dff9e;color:#fff}.export-progress-pill{position:absolute;top:72px;right:14px;z-index:var(--uf-z-export);display:inline-flex;align-items:center;gap:8px;min-width:186px;max-width:240px;height:30px;padding:0 9px;border-radius:var(--radius-pill);border:1px solid var(--border-mid);background:#111827b8;box-shadow:0 12px 24px #0f172a3d;pointer-events:none}.export-progress-strip{position:relative;flex:1;min-width:94px;height:4px;border-radius:var(--radius-pill);background:#64748b66;overflow:hidden}.export-progress-strip>span{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--accent-indigo) 80%,#ffffff),color-mix(in srgb,var(--accent-indigo) 96%,transparent))}.export-progress-percent{min-width:34px;text-align:right;color:#e2e8f0f0;font-size:11px;font-weight:700}.export-progress-ring{width:16px;height:16px;transform:rotate(-90deg);flex-shrink:0}.export-progress-ring .ring-bg{fill:none;stroke:#64748b75;stroke-width:2}.export-progress-ring .ring-fg{fill:none;stroke:color-mix(in srgb,var(--accent-indigo) 98%,#ffffff);stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset var(--transition-slow) linear}.export-center-panel{position:absolute;top:108px;right:14px;width:min(420px,calc(100vw - 28px));z-index:var(--uf-z-export);border-radius:var(--radius-lg);border:1px solid var(--border-mid);background:#111827c7;box-shadow:0 16px 36px #0f172a3d;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#e2e8f0}.export-center-panel.collapsed{width:min(360px,calc(100vw - 28px))}.export-center-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 8px}.export-center-title{display:grid;gap:2px}.export-center-title strong{font-size:13px;color:#f8fafc}.export-center-title span{font-size:11px;color:#cbd5e1e6}.export-center-head-actions{display:flex;align-items:center;gap:6px}.app-shell.recording-shell .export-center-head-actions .icon-btn{height:28px;width:auto;min-width:0;padding:0 10px;border-radius:var(--radius-pill);font-size:11px}.export-center-body{max-height:280px;overflow:auto;padding:0 8px 8px;display:grid;gap:8px}.export-job-group{display:grid;gap:6px}.export-job-group h5{margin:0;font-size:11px;font-weight:700;color:#94a3b8f2;letter-spacing:.01em}.export-job-row{border:1px solid var(--border-soft);border-radius:var(--radius-md);background:#1e293b85;padding:7px 8px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.export-job-row.error{border-color:#f8717166;background:#7f1d1d38}.export-job-row.done{border-color:#4ade804d;background:#14532d2e}.export-job-main{display:grid;gap:4px;min-width:0;flex:1}.export-job-line{display:flex;align-items:center;justify-content:space-between;gap:8px}.export-job-line strong{font-size:12px;color:#f8fafc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}.export-job-line span{font-size:10px;color:#cbd5e1e0}.export-job-line.subtle span{color:#cbd5e1d1}.export-job-progress{position:relative;height:4px;border-radius:var(--radius-pill);background:#64748b6b;overflow:hidden}.export-job-progress>span{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--accent-indigo) 80%,#ffffff),color-mix(in srgb,var(--accent-indigo) 96%,transparent))}.export-job-error{font-size:11px;color:#fecacaf5;line-height:1.35}.export-job-actions{display:flex;align-items:center;gap:6px}.app-shell.recording-shell .export-job-actions .icon-btn{height:26px;width:auto;min-width:0;padding:0 9px;border-radius:var(--radius-md);font-size:11px}.app-main.recording-workspace,.canvas-section,.canvas-surface{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.canvas-surface{border:0;border-radius:0;background:transparent;box-shadow:none;touch-action:none;overscroll-behavior:none}.whiteboard{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;touch-action:none}.canvas-toolbar{position:absolute;top:var(--uf-canvas-toolbar-top);left:12px;z-index:var(--uf-z-canvas-toolbar);display:inline-flex;align-items:flex-start;gap:0;padding:6px;pointer-events:auto}.tool-primary-rail{position:relative;border:1px solid var(--border-mid);border-radius:var(--radius-lg);background:linear-gradient(180deg,#1b212df0,#141923e6),radial-gradient(130% 80% at 50% -10%,rgba(122,125,255,.24),transparent 64%);box-shadow:0 16px 34px #0f172a42,inset 0 1px #ffffff24;width:46px;padding:7px 4px;display:flex;flex-direction:column;gap:5px}.tool-main-btn{width:34px;min-width:34px;height:34px;border-radius:var(--radius-md);border:1px solid var(--border-mid);background:#ffffff14;color:#e2e8f0;box-shadow:inset 0 1px #ffffff24;padding:0;display:inline-flex;align-items:center;justify-content:center}.tool-main-btn svg{width:18px;height:18px}.app-shell.recording-shell .tool-main-btn.selected{border-color:#7a7dff9e;background:linear-gradient(180deg,#5f64ea,#4a4fd6);color:#fff;box-shadow:0 10px 24px #7a7dff57,inset 0 1px #ffffff42}.tool-zoom-divider{width:100%;height:1px;margin:4px 0 2px;background:var(--border-mid)}.tool-mini-action{width:34px;min-width:34px;height:30px;border-radius:var(--radius-md);padding:0}.tool-secondary-popout{position:absolute;left:calc(100% + 8px);top:8px;min-width:224px;max-width:264px;padding:10px;border-radius:var(--radius-lg);border:1px solid var(--border-mid);background:linear-gradient(180deg,#181e2bf0,#141924eb),radial-gradient(120% 70% at 50% -10%,rgba(122,125,255,.2),transparent 70%);box-shadow:0 16px 34px #0f172a4d,inset 0 1px #ffffff1f}.tool-secondary-header{display:flex;align-items:center;justify-content:flex-start;gap:0;margin-bottom:8px;padding:0 2px}.tool-secondary-header strong{color:#e2e8f0;font-size:12px;font-weight:600;line-height:1.2}.tool-secondary-phase{font-size:10px;color:#e2e8f0b8}.tool-secondary-panel{display:flex;flex-direction:column;gap:8px}.tool-quick-row{display:flex;flex-wrap:wrap;gap:6px}.tool-quick-chip{width:40px;min-width:40px;height:24px;border-radius:var(--radius-md);border:1px solid var(--border-mid);background:#ffffff1a;color:#e2e8f0e6;font-size:10px;font-weight:700;padding:0;display:inline-flex;align-items:center;justify-content:center}.tool-quick-chip.selected{border-color:#7a7dff94;background:#7a7dff47;color:#eef2ff}.tool-secondary-row.swatches{display:flex;flex-wrap:wrap;gap:6px}.tool-secondary-row.shape-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.shape-type-chip{width:100%;min-width:0}.shape-type-chip svg{width:16px;height:16px}.tool-secondary-row.color-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px}.tool-row-label{display:inline-flex;align-items:center;gap:4px;color:#e2e8f0d6;font-size:10px;font-weight:700}.tool-color-grid{display:flex;flex-wrap:wrap;gap:6px}.swatch-none-icon{position:relative;width:13px;height:13px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:repeating-linear-gradient(45deg,var(--border-hairline),var(--border-hairline) 2px,rgba(248,250,252,.82) 2px,rgba(248,250,252,.82) 4px)}.swatch-none-icon:after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1.6px;background:#ef4444e6;transform:translateY(-50%) rotate(-36deg);transform-origin:center}.eraser-mode-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.eraser-mode-chip{width:100%;min-width:0;padding:0}.eraser-mode-chip .eraser-mode-icon{display:inline-flex;align-items:center;justify-content:center;width:100%;color:#e2e8f0db}.eraser-mode-chip.selected .eraser-mode-icon{color:#f8fafc}.tool-chip-size-preview{border-radius:var(--radius-pill);background:#f1f5f9eb;box-shadow:0 0 0 1px var(--border-mid)}.tool-chip-size-preview.eraser{background:transparent;border:1.4px solid rgba(241,245,249,.92);box-shadow:none}.tool-chip-opacity-preview{width:14px;height:14px;border-radius:var(--radius-pill);background:#f1f5f9f5;box-shadow:0 0 0 1px var(--border-mid)}.swatch-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;min-width:22px;height:22px;border-radius:var(--radius-sm);border:1px solid rgba(226,232,240,.5);padding:0}.swatch-btn.selected{box-shadow:0 0 0 2px #5669d842;border-color:color-mix(in srgb,var(--uf-accent) 58%,transparent)}.floating-controls{position:absolute;z-index:var(--uf-z-floating-controls);display:inline-flex;align-items:center;gap:4px;padding:5px;border-radius:var(--radius-lg);border:1px solid var(--uf-border);background:var(--uf-surface);box-shadow:0 14px 30px #0f172a33;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);pointer-events:auto}.floating-history-dock{left:12px;bottom:12px;flex-direction:row}.floating-page-dock{right:12px;bottom:12px}.recording-shell .icon-btn{border:1px solid var(--border-mid);background:#ffffff1a;color:#e2e8f0;display:inline-flex;align-items:center;justify-content:center}.recording-shell .icon-btn svg,.recording-shell .tool-main-btn svg,.recording-shell .overlay-btn svg{flex-shrink:0;display:block}.recording-shell .icon-btn,.recording-shell .overlay-btn,.recording-shell .tool-main-btn,.recording-shell .tool-quick-chip,.recording-shell .swatch-btn{transition:transform var(--transition-fast) ease,border-color var(--transition-slow) ease,background-color var(--transition-slow) ease,box-shadow var(--transition-slow) ease,color var(--transition-slow) ease}.recording-shell .icon-btn:hover:not(:disabled),.recording-shell .overlay-btn:hover:not(:disabled),.recording-shell .tool-main-btn:hover:not(:disabled),.recording-shell .tool-quick-chip:hover:not(:disabled),.recording-shell .swatch-btn:hover:not(:disabled){transform:translateY(-1px)}.recording-shell .icon-btn:active:not(:disabled),.recording-shell .overlay-btn:active:not(:disabled),.recording-shell .tool-main-btn:active:not(:disabled),.recording-shell .tool-quick-chip:active:not(:disabled),.recording-shell .swatch-btn:active:not(:disabled){transform:translateY(0)}.app-shell.recording-shell .icon-btn.selected:not(.tool-main-btn){background:var(--uf-accent-soft);border-color:#7a7dff94;color:#eef2ff}.page-indicator{min-width:62px;text-align:center;color:#e2e8f0db}.page-preview-strip{position:absolute;left:50%;transform:translate(-50%);bottom:62px;width:min(860px,calc(100% - 140px));max-width:min(860px,calc(100% - 140px));overflow:hidden;padding:8px 10px;border-radius:var(--radius-lg);border:1px solid var(--border-mid);background:#151a25f2;box-shadow:0 18px 38px #0f172a40;z-index:var(--uf-z-page-strip)}.page-preview-header{display:flex;justify-content:space-between;align-items:center;color:#e2e8f0db}.page-preview-item{min-width:132px;max-width:132px;padding:6px;display:inline-flex;flex-direction:column;gap:6px;align-items:center;border:1px solid var(--border-mid);background:#ffffff14;border-radius:var(--radius-md)}.page-preview-item.active{border-color:#7a7dffa3;background:#7a7dff33}.page-preview-thumb{width:120px;height:74px;overflow:hidden;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;border:1px solid var(--border-mid);background:#ffffff29}.page-preview-label{width:100%;text-align:center;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e2e8f0d6}.page-preview-scroll{display:flex;align-items:flex-start;gap:8px;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}.page-preview-thumb img{width:100%;height:100%;object-fit:contain}.timeline-editor{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.timeline-floating-track{position:absolute;left:var(--uf-timeline-side-gap);right:var(--uf-timeline-side-gap);bottom:var(--uf-timeline-track-bottom);height:var(--uf-timeline-track-height);pointer-events:auto;z-index:var(--uf-z-timeline-track)}.timeline-track{display:flex;flex-direction:column;height:100%;min-height:0}.timeline-track-shell{position:relative;width:100%;height:100%;min-height:0;display:flex;flex-direction:column}.timeline-track-topbar{height:34px;border:1px solid rgba(100,116,139,.42);border-bottom:0;border-radius:var(--radius-md) var(--radius-md) 0 0;background:linear-gradient(180deg,#f4f7fcfa,#e8eef6f0);box-shadow:0 5px 12px #0f172a1a;display:flex;align-items:center;justify-content:center;z-index:var(--uf-z-track-topbar)}.timeline-track-topbar-inner{height:100%;display:inline-flex;align-items:center;justify-content:center;gap:var(--uf-toolbar-gap);padding:0 10px}.app-shell.recording-shell .timeline-track-topbar .icon-btn{min-width:30px;width:30px;height:30px;border-radius:var(--radius-md);border:1px solid rgba(100,116,139,.34);background:#ffffffe0;color:#334155}.app-shell.recording-shell .timeline-track-topbar .icon-btn:hover:not(:disabled){border-color:#47556970;background:#fffffffa;color:var(--text-1)}.app-shell.recording-shell .timeline-track-topbar .icon-btn:disabled{background:#e2e8f09e;color:var(--text-2)}.app-shell.recording-shell .timeline-track-topbar .icon-btn.danger:not(:disabled){color:#9f2f2f}.recording-shell .confirm-dialog .icon-btn.danger{color:#fecaca}.app-shell.recording-shell .confirm-dialog .icon-btn{width:auto;min-width:0;padding:0 12px;white-space:nowrap}.track-scroll{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:2px}.track-scroll::-webkit-scrollbar{height:8px}.track-scroll::-webkit-scrollbar-thumb{background:var(--uf-scrollbar-thumb);border-radius:var(--radius-pill)}.track-scroll::-webkit-scrollbar-track{background:var(--uf-scrollbar-track);border-radius:var(--radius-pill)}.track-surface{position:relative;height:auto;min-height:0;flex:1;border-radius:0 0 var(--radius-md) var(--radius-md);border:1px solid var(--border-strong);border-top:0;background:linear-gradient(180deg,#f0f4fbc2,#e2e8f0b8);box-shadow:0 12px 26px #0f172a24,inset 0 1px #ffffff85;overflow:hidden;cursor:pointer}.track-ruler{position:absolute;left:0;right:0;top:0;height:var(--uf-ruler-height);background:linear-gradient(180deg,#e2e8f0f0,#d6dfebdb);border-bottom:1px solid rgba(71,85,105,.36);z-index:var(--uf-z-track-ruler);pointer-events:none}.ruler-tick{position:absolute;top:0;bottom:0;transform:translate(-50%);border-left:1px solid var(--border-strong)}.ruler-tick.minor{border-left-color:#64748b2e}.ruler-tick.major{border-left-color:#3341557a}.ruler-tick .mono{color:#0f172ae6;font-size:10px;font-weight:600;line-height:1}.ruler-tick .mono{position:absolute;top:2px;left:4px;white-space:nowrap}.track-grid-layer{position:absolute;inset:var(--uf-ruler-height) 0 0 0;z-index:var(--uf-z-track-grid);pointer-events:none}.track-grid-line{position:absolute;top:0;bottom:0;transform:translate(-50%);border-left:1px solid var(--border-faint)}.track-grid-line.major{border-left-color:var(--border-hairline)}.track-combined-lane{position:absolute;left:0;right:0;top:calc(var(--uf-ruler-height) + 1px + var(--uf-action-lane-height) + var(--uf-track-lane-gap));bottom:var(--uf-track-padding-bottom);border-radius:var(--radius-md);border:1px solid var(--border-strong);background:linear-gradient(180deg,#f1f5f9ad,#e2e8f09e);overflow:hidden;z-index:var(--uf-z-track-lane)}.track-thumbs-layer{position:absolute;top:0;left:0;right:0;bottom:0;z-index:var(--uf-z-track-thumbs)}.track-empty-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#3341558c;font-size:12px;letter-spacing:.02em;pointer-events:none;z-index:6}.track-empty-import-btn{pointer-events:auto;padding:4px 14px;border-radius:var(--radius-pill);border:1px solid color-mix(in srgb,var(--uf-accent) 48%,transparent);background:color-mix(in srgb,var(--uf-accent) 14%,transparent);color:var(--text-1);font-size:12px;cursor:pointer}.track-empty-import-btn:hover{background:color-mix(in srgb,var(--uf-accent) 24%,transparent)}.track-wave-layer{position:absolute;left:0;right:0;top:0;bottom:0;height:auto;min-height:0;z-index:var(--uf-z-track-wave);pointer-events:none;background:transparent}.track-camera-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:var(--uf-z-track-camera)}.track-camera-band{position:absolute;top:4px;bottom:4px;border-radius:var(--radius-pill);background:color-mix(in srgb,#8b5cf6 26%,transparent);border:1px solid color-mix(in srgb,#8b5cf6 62%,transparent);display:flex;align-items:center;gap:3px;padding:0 6px;color:#c4b5fd;pointer-events:auto;cursor:pointer;overflow:hidden}.track-camera-band.selected{background:color-mix(in srgb,#8b5cf6 44%,transparent)}.timeline-segment{position:absolute;top:3px;bottom:3px;display:grid;grid-template-columns:30px 1fr;align-items:center;gap:6px;border-radius:var(--radius-sm);border:1px solid rgba(51,65,85,.54);padding:0 5px;overflow:hidden;z-index:var(--uf-z-track-segment);background:linear-gradient(180deg,#fbfcfefa,#f3f6fbf5);color:#1f2937}.timeline-segment.selected{border-color:color-mix(in srgb,var(--accent-indigo) 86%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-indigo) 22%,transparent)}.timeline-segment .mono{color:#1f2937;font-size:10px;font-weight:600;letter-spacing:.02em}.segment-thumb{width:24px;height:18px;border-radius:var(--radius-sm);border:1px solid rgba(55,65,81,.5);background:linear-gradient(180deg,var(--border-soft),rgba(148,163,184,.02)),repeating-linear-gradient(0deg,rgba(100,116,139,.1),rgba(100,116,139,.1) 1px,transparent 1px,transparent 4px),#fffffff2;flex-shrink:0;background:#f8fafcf2}.track-action-lane{position:absolute;left:0;right:0;top:calc(var(--uf-ruler-height) + 1px);height:var(--uf-action-lane-height);z-index:var(--uf-z-track-action-lane);pointer-events:none}.track-selection-range{position:absolute;top:0;bottom:0;border-left:1px solid color-mix(in srgb,var(--uf-accent) 65%,transparent);border-right:1px solid color-mix(in srgb,var(--uf-accent) 65%,transparent);background:color-mix(in srgb,var(--uf-accent) 18%,transparent);z-index:var(--uf-z-track-selection);pointer-events:none}.action-block{position:absolute;top:0;bottom:0;border-radius:var(--radius-sm);border:1px solid;background:var(--border-mid);padding:0 8px;overflow:hidden;display:inline-flex;align-items:center;color:#e2e8f0;pointer-events:auto;box-shadow:inset 0 1px #ffffff8f}.action-block .mono{font-size:10px;font-weight:600;white-space:nowrap;opacity:.92}.action-block.selected{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}.audio-wave-overlay{position:absolute;top:0;bottom:0;border-radius:0;border:0;background:transparent;overflow:hidden;z-index:var(--uf-z-track-wave);pointer-events:none}.audio-wave-overlay.baseline-only{opacity:.55}.wave-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible}.wave-fill{fill:#4b5563e6;stroke:none}.wave-baseline{stroke:#4b5563f5;stroke-width:1.15;stroke-linecap:round}.track-pointer-guide,.track-snap-guide{position:absolute;top:0;bottom:0;width:1px;transform:translate(-50%);pointer-events:none}.track-pointer-guide{background:#0ea5e98a;z-index:var(--uf-z-track-pointer)}.track-snap-guide{background:#ef4444c7;box-shadow:0 0 0 1px #ef44442e;z-index:var(--uf-z-track-snap)}.track-cursor{position:absolute;top:0;bottom:0;width:2px;background:#ef4444;transform:translate(-50%);pointer-events:none;z-index:var(--uf-z-track-cursor)}.track-cursor.dragging{box-shadow:0 0 0 1px #ef444433}.track-time-bubble{position:absolute;top:16px;left:50%;transform:translate(-50%);min-width:70px;text-align:center;padding:1px 6px;border-radius:var(--radius-md);border:1px solid rgba(71,85,105,.22);background:#fffffff5;color:var(--text-1);font-size:10px;line-height:1.3;box-shadow:0 4px 12px #0f172a24;z-index:var(--uf-z-track-bubble)}.cursor-handle{position:absolute;top:-2px;left:50%;width:12px;height:12px;border-radius:var(--radius-pill);border:1px solid rgba(239,68,68,.65);background:#fff;transform:translate(-50%);pointer-events:auto;padding:0}.timeline-actionbar{position:absolute;left:50%;bottom:10px;transform:translate(-50%);pointer-events:auto;z-index:var(--uf-z-actionbar);display:flex;flex-direction:column;gap:5px;align-items:center}.timeline-shortcut-hint{position:absolute;left:50%;top:calc(100% + 3px);transform:translate(-50%);white-space:nowrap;font-size:9px;line-height:1;padding:2px 4px;border-radius:var(--radius-sm);border:1px solid var(--border-mid);background:#0f172aeb;color:#e2e8f0d6;opacity:0;pointer-events:none}.icon-btn:hover .timeline-shortcut-hint{opacity:1}.timeline-transport-pill{display:inline-flex;align-items:center;justify-content:center;gap:var(--uf-toolbar-gap);padding:4px 8px;min-height:40px;border-radius:var(--radius-md);border:1px solid var(--border-strong);background:#111827b8;box-shadow:0 16px 32px #0f172a47}.timeline-transport-group{display:inline-flex;align-items:center;gap:4px}.timeline-rate-btn{min-width:40px;height:26px;padding:0 8px;border-radius:var(--radius-pill);border:1px solid color-mix(in srgb,var(--uf-accent) 44%,transparent);background:color-mix(in srgb,var(--uf-accent) 16%,transparent);color:color-mix(in srgb,var(--uf-accent) 60%,#ffffff);font-size:12px;font-weight:640;cursor:pointer}.timeline-rate-btn:hover{border-color:color-mix(in srgb,var(--uf-accent) 52%,transparent);background:color-mix(in srgb,var(--uf-accent) 24%,transparent)}.timeline-shortcut-help{position:relative;display:inline-flex;align-items:center}.timeline-shortcut-popover{position:absolute;bottom:calc(100% + 10px);right:0;padding:8px;min-width:216px;z-index:var(--uf-z-overlay-popover, 54)}.shortcut-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:4px 6px;font-size:13px}.shortcut-keys{color:var(--text-2);white-space:nowrap}.shortcut-action{color:var(--text-1)}.timeline-record-button{width:34px;min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);border:2px solid rgba(239,68,68,.5);background:#fee2e2f0;color:#dc2626}.timeline-record-button.active{background:#fecacafa}.timeline-record-mode{position:relative;display:inline-flex;align-items:center;gap:0;padding:2px;border-radius:var(--radius-pill);overflow:hidden;border:1px solid var(--border-strong);background:#0f172ae0;box-shadow:inset 0 1px #ffffff3d,inset 0 -1px #0f172a47}.record-mode-rocker-thumb{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:var(--radius-pill);background:linear-gradient(135deg,color-mix(in srgb,var(--uf-accent) 82%,#ffffff),color-mix(in srgb,var(--uf-accent) 82%,#000000));box-shadow:0 5px 12px #4f46e55c,inset 0 1px #ffffff42;transform:translate(0);transition:transform var(--transition-slow) cubic-bezier(.2,.95,.2,1),box-shadow var(--transition-fast) ease;pointer-events:none}.record-mode-rocker-thumb.overwrite{transform:translate(100%)}.record-mode-btn{position:relative;z-index:var(--uf-z-rocker);min-width:48px;height:28px;padding:0 11px;border:0;background:transparent;color:#e2e8f0bd;font-size:11px;font-weight:650;transition:color var(--transition-fast) ease,transform var(--transition-fast) ease}.record-mode-btn.selected{color:#f8faff}.record-mode-btn:active:not(:disabled){transform:translateY(.5px)}.timeline-transport-status{min-width:92px;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--radius-md);border:1px solid rgba(122,125,255,.52);background:var(--uf-accent-grad-deep);color:#eef2ff;padding:0 10px;font-size:12px;cursor:default}.timeline-transport-status.toggleable{cursor:pointer}.timeline-transport-status.toggleable:hover:not(:disabled){background:var(--uf-accent-grad-deep);border-color:color-mix(in srgb,var(--uf-accent) 55%,#ffffff);color:#fff}.timeline-transport-status .mono{color:inherit}.timeline-transport-status:disabled{background:var(--uf-surface-strong);border-color:var(--border-mid);cursor:not-allowed}.timeline-context-menu{position:fixed;z-index:var(--uf-z-context-menu);min-width:182px;padding:8px;display:flex;flex-direction:column;gap:6px;border-radius:var(--radius-lg);background:#fffffffa;border:1px solid var(--border-mid);box-shadow:0 16px 34px #0f172a33}.timeline-context-menu .context-title{display:flex;align-items:center;justify-content:space-between;color:var(--text-3);font-size:10px}.timeline-context-menu .context-time{color:#334155;font-size:11px}.timeline-context-menu .context-item{width:100%;border-radius:var(--radius-md);padding:8px 10px;text-align:left;border:1px solid var(--border-mid);background:linear-gradient(180deg,#fffffffa,#f8fafcf0);color:#334155;font-size:12px}.app-shell.recording-shell .timeline-context-menu .context-item:disabled{color:var(--text-3)}.timeline-context-menu .context-item.danger{color:#b91c1c}.recording-stage .timeline-editor-recording .timeline-actionbar{bottom:12px}.recording-stage .timeline-editor-recording .timeline-transport-pill{background:#fffffffa;border-color:var(--border-strong)}.native-macos{--uf-overlay-top: 30px}.recording-shell .export-config-dialog{border-color:var(--border-mid);box-shadow:0 30px 64px #02061780,inset 0 1px #ffffff0d}.recording-shell .export-config-head{border-bottom-color:var(--border-soft);background:linear-gradient(180deg,#2f303bf0,#24252ee6)}.recording-shell .export-config-row{border-bottom-color:var(--border-soft);background:#10121975}.recording-shell .export-config-status{border-bottom-color:var(--border-soft)}.recording-shell .export-config-dialog .create-project-file-name{color:#e2e8f0c7}.recording-shell .export-config-preview{background:linear-gradient(180deg,#2c2d39d1,#23242cd6);border-bottom-color:var(--border-soft)}.recording-shell .export-config-foot{background:linear-gradient(180deg,#2b2c36db,#23242be0)}.app-shell.recording-shell .timeline-editor{position:absolute;top:0;right:0;bottom:0;left:0;display:block;max-height:none;border:0;padding:0;background:transparent;overflow:visible;pointer-events:none}.app-shell.recording-shell .timeline-actionbar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:auto}.app-shell.recording-shell .icon-btn{min-width:32px;width:32px;height:32px;border-radius:var(--radius-md);border:1px solid var(--border-mid);background:#ffffff14;color:#e2e8f0}.timeline-transport-pill .icon-btn:hover:not(:disabled){border-color:#a7a9ff8f;background:#7a7dff42;color:#f8fafc}.app-shell.recording-shell .timeline-floating-track,.app-shell.recording-shell .timeline-track,.app-shell.recording-shell .track-scroll,.app-shell.recording-shell .track-surface{min-height:0}.app-shell.recording-shell .track-combined-lane{top:calc(var(--uf-ruler-height) + 1px + var(--uf-action-lane-height) + var(--uf-track-lane-gap));bottom:var(--uf-track-padding-bottom);z-index:var(--uf-z-track-lane)}.app-shell.recording-shell .track-thumbs-layer{top:0;right:0;bottom:0;left:0;z-index:var(--uf-z-track-thumbs)}.app-shell.recording-shell .track-wave-layer{top:0;right:0;bottom:0;left:0;z-index:var(--uf-z-track-wave);display:block;visibility:visible;opacity:1}.app-shell.recording-shell .audio-wave-overlay{top:0;bottom:0;z-index:var(--uf-z-track-wave)}@media (max-width: 1100px){:root{--uf-timeline-side-gap: 10px;--uf-timeline-track-bottom: 62px;--uf-timeline-track-height: 122px}.timeline-floating-track{height:var(--uf-timeline-track-height);bottom:var(--uf-timeline-track-bottom)}.overlay-project-pill{min-width:min(280px,56vw)}}@media (max-width: 768px){:root{--uf-timeline-side-gap: 6px;--uf-timeline-track-bottom: 58px;--uf-timeline-track-height: 108px;--uf-overlay-top: 6px}.recording-overlay{top:var(--uf-overlay-top);left:6px;right:6px}.overlay-project-pill{min-width:220px;max-width:58vw}.canvas-toolbar{top:var(--uf-canvas-toolbar-top)}.timeline-floating-track{left:var(--uf-timeline-side-gap);right:var(--uf-timeline-side-gap);bottom:var(--uf-timeline-track-bottom);height:var(--uf-timeline-track-height)}.timeline-actionbar{width:calc(100% - 14px);max-width:520px}.timeline-transport-pill{width:100%;justify-content:center}.native-title-drag-region{left:96px;right:10px;height:0}.native-macos{--uf-overlay-top: 24px}.export-progress-pill{top:64px;right:10px;min-width:166px;max-width:212px}.export-center-panel{top:98px;right:8px;width:min(360px,calc(100vw - 16px))}.export-center-body{max-height:220px}.export-job-line strong{max-width:146px}}@media (pointer: coarse){.app-shell.recording-shell .icon-btn,.tool-main-btn,.tool-mini-action,.overlay-btn,.overlay-nav-btn,.timeline-record-button,.timeline-transport-status{min-height:44px}.app-shell.recording-shell .icon-btn,.tool-main-btn,.tool-mini-action,.overlay-nav-btn,.timeline-record-button{min-width:44px}.overlay-project-pill{height:44px}.swatch-btn{min-width:32px;min-height:32px}.tool-quick-chip{min-width:40px;min-height:36px}.record-mode-btn{min-height:36px}.timeline-context-menu .context-item{min-height:44px}.timeline-track-topbar{height:44px}.timeline-track-topbar .icon-btn{min-height:40px}}.camera-pip-preview{position:absolute;right:16px;bottom:16px;width:22%;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.35);box-shadow:0 8px 24px #0f172a4d;z-index:8;pointer-events:none}.camera-pip-preview video,.camera-pip-preview img{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-pip-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#0f172ad9;color:#94a3b8e6}