.sync-page-shell{z-index:10;background:#fff;flex-direction:column;display:flex;position:fixed;inset:8.25rem 0 0;overflow:hidden}.dark .sync-page-shell{background:#020617}body:has(.sync-page-shell){overflow:hidden}body:has(.sync-page-shell) footer{display:none}@media (min-width:768px){.sync-page-shell{left:6rem}}.sync-editor{--sync-accent:#3b82f6;--sync-accent-soft:#3b82f61f;--sync-measure:#3b82f6;--sync-beat:#8b5cf6;flex-direction:column;height:100%;min-height:0;display:flex;overflow:hidden}.sync-toolbar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#f8fafccc;border-bottom:1px solid #e2e8f0cc;flex-shrink:0;padding:.5rem .75rem}.dark .sync-toolbar{background:#0f172a99;border-color:#1e293bcc}.sync-hints{border-top:1px solid #e2e8f099;flex-wrap:wrap;gap:.375rem;margin-top:.375rem;padding-top:.375rem;display:flex}.dark .sync-hints{border-color:#33415599}.sync-hint-chip{color:#64748b;align-items:center;gap:.25rem;font-size:.6875rem;display:inline-flex}.sync-hint-chip kbd{color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:.25rem;padding:.125rem .375rem;font-family:inherit;font-size:.625rem}.dark .sync-hint-chip kbd{color:#94a3b8;background:#1e293b;border-color:#334155}.sync-hint-legend{margin-left:auto;gap:.625rem!important}.sync-legend-square{color:#334155;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:4px;justify-content:center;align-items:center;width:18px;height:18px;font-size:10px;font-weight:600;display:inline-flex}.sync-legend-note{color:#6d28d9;background:#f5f3ff;border:1px solid #c4b5fd;border-radius:9999px;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;display:inline-flex}.sync-workspace{flex-direction:column;flex:1;max-width:100%;min-height:0;padding:.375rem .75rem;display:flex;overflow:hidden}.sync-media-section{flex-direction:column;flex:1;justify-content:center;align-items:stretch;width:100%;max-width:720px;min-height:0;margin:0 auto;display:flex;overflow:hidden}.sync-media-frame{flex-shrink:0;width:100%}.sync-media-frame .sync-media-box{aspect-ratio:16/9;width:100%;height:auto}.sync-dock{flex-shrink:0;padding:.25rem .75rem 0}.sync-dock--empty{opacity:0;pointer-events:none;height:0;padding:0;overflow:hidden}.sync-dock-waveform{width:100%;min-width:0}.sync-dock-waveform .sync-waveform-shell{border-radius:.5rem}.sync-bottom-panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff5;border-top:1px solid #e2e8f0cc;flex-shrink:0}.dark .sync-bottom-panel{background:#0f172af5;border-color:#334155cc}@media (min-width:768px){.sync-bottom-panel{left:auto}}.sync-media-box{aspect-ratio:16/9;background:#0f172a;border-radius:.625rem;width:100%;overflow:hidden;box-shadow:0 2px 12px #00000026}.sync-media-box .sync-embed-player{width:100%;height:100%}.sync-local-video{-o-object-fit:contain;object-fit:contain;background:#000;width:100%;height:100%}.sync-audio-preview{background:linear-gradient(145deg,#1e293b,#0f172a);justify-content:center;align-items:center;display:flex}.sync-audio-preview-inner{text-align:center;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;display:flex}.sync-audio-preview-icon{color:#60a5fa;background:#3b82f626;border-radius:9999px;justify-content:center;align-items:center;width:56px;height:56px;display:flex}.sync-audio-preview-title{color:#e2e8f0;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.75rem;font-weight:600;overflow:hidden}.sync-audio-bars{align-items:flex-end;gap:3px;height:24px;margin-top:.25rem;display:flex}.sync-audio-bar{background:#60a5fa80;border-radius:2px;width:4px;height:8px}.sync-audio-bar.playing{animation:.8s ease-in-out infinite alternate sync-audio-pulse}@keyframes sync-audio-pulse{0%{opacity:.5;height:6px}to{opacity:1;height:22px}}.sync-media-placeholder{color:#94a3b8;background:#f1f5f9;justify-content:center;align-items:center;display:flex}.dark .sync-media-placeholder{background:#1e293b}.sync-embed-section{padding:.75rem 1rem 0}.sync-embed-wrapper,.sync-embed-player{width:100%;height:100%}.sync-embed-player iframe{border:0;width:100%;height:100%}.sync-embed-only-banner{color:#475569;background:#fef9c3e6;border:1px solid #fde04799;border-radius:.375rem;flex-shrink:0;margin-bottom:.25rem;padding:.25rem .5rem;font-size:.6875rem;line-height:1.35}.dark .sync-embed-only-banner{color:#cbd5e1;background:#42381480;border-color:#71602099}.sync-waveform-container{width:100%;max-width:100%;padding:1rem;position:relative;overflow:hidden}.sync-controlbar{z-index:1;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border-top:none;padding:.375rem .75rem .5rem;position:relative;bottom:auto;left:auto;right:auto}.dark .sync-controlbar{background:0 0;border-color:#0000}@media (min-width:768px){.sync-controlbar{left:auto}}.sync-progress-track{cursor:pointer;background:#e2e8f0;border-radius:9999px;height:4px;margin-bottom:.625rem;position:relative}.dark .sync-progress-track{background:#334155}.sync-progress-fill{background:var(--sync-accent);pointer-events:none;border-radius:9999px;height:100%;transition:width 50ms linear}.sync-progress-input{opacity:0;cursor:pointer;width:100%;margin:0;position:absolute;inset:-6px 0}.sync-playback-row{align-items:center;gap:.75rem;display:flex}.sync-play-btn{background:var(--sync-accent);color:#fff;cursor:pointer;border:none;border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:background .15s,transform .1s;display:flex;box-shadow:0 2px 8px #3b82f659}.sync-play-btn:hover{background:#2563eb}.sync-play-btn:active{transform:scale(.95)}.sync-track-meta{flex:1;min-width:0}.sync-track-title{color:#0f172a;white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;font-weight:600;overflow:hidden}.dark .sync-track-title{color:#f8fafc}.sync-track-time{color:#64748b;font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border:none;margin-top:1px;padding:0;font-size:.6875rem}.sync-track-time:hover{color:var(--sync-accent)}.sync-speed-group{flex-shrink:0;align-items:center;gap:.25rem;display:flex}.sync-menu-portal{z-index:100000;pointer-events:none;position:fixed;inset:0}.sync-menu-portal>*{pointer-events:auto}.sync-metronome-btn{color:#94a3b8;cursor:pointer;background:0 0;border:1px solid #e2e8f0;border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;transition:background .15s,color .15s,border-color .15s;display:flex}.dark .sync-metronome-btn{color:#64748b;border-color:#334155}.sync-metronome-btn:hover{color:#475569;background:#f1f5f9}.sync-metronome-btn.active{color:#2563eb;background:#eff6ff;border-color:#93c5fd}.dark .sync-metronome-btn.active{color:#60a5fa;background:#1e3a8a4d;border-color:#3b82f680}.sync-speed-control{flex-shrink:0;position:relative}.sync-speed-trigger{color:#334155;font-variant-numeric:tabular-nums;cursor:pointer;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;align-items:center;gap:.375rem;height:32px;padding:0 .625rem;font-size:.75rem;font-weight:600;transition:background .15s,border-color .15s;display:inline-flex}.dark .sync-speed-trigger{color:#e2e8f0;background:#1e293b;border-color:#334155}.sync-speed-trigger:hover{background:#f1f5f9;border-color:#cbd5e1}.sync-speed-popover{z-index:60;background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;width:240px;padding:.75rem;position:absolute;bottom:calc(100% + 8px);right:0;box-shadow:0 8px 30px #0000001f}.dark .sync-speed-popover{background:#0f172a;border-color:#334155;box-shadow:0 8px 30px #0006}.sync-speed-popover-header{color:#334155;justify-content:space-between;align-items:center;margin-bottom:.625rem;font-size:.75rem;font-weight:600;display:flex}.dark .sync-speed-popover-header{color:#e2e8f0}.sync-speed-popover-value{font-variant-numeric:tabular-nums;color:var(--sync-accent)}.sync-speed-slider{width:100%;accent-color:var(--sync-accent);margin-bottom:.75rem}.sync-speed-presets{grid-template-columns:repeat(4,1fr);gap:.375rem;display:grid}.sync-speed-preset{color:#475569;cursor:pointer;background:0 0;border:1px solid #e2e8f0;border-radius:.375rem;padding:.375rem 0;font-size:.6875rem;font-weight:600;transition:background .12s,border-color .12s,color .12s}.dark .sync-speed-preset{color:#cbd5e1;border-color:#334155}.sync-speed-preset:hover{background:#f1f5f9}.sync-speed-preset.active{color:#2563eb;background:#eff6ff;border-color:#93c5fd}.dark .sync-speed-preset.active{color:#60a5fa;background:#1e3a8a4d;border-color:#3b82f680}.sync-speed-btn{color:#64748b;cursor:pointer;background:0 0;border:1px solid #e2e8f0;border-radius:.375rem;justify-content:center;align-items:center;width:24px;height:24px;font-size:.875rem;transition:background .15s;display:flex}.dark .sync-speed-btn{color:#94a3b8;border-color:#334155}.sync-speed-btn:hover{background:#f1f5f9}.dark .sync-speed-btn:hover{background:#1e293b}.sync-speed-label{color:#64748b;text-align:center;font-variant-numeric:tabular-nums;min-width:2.5rem;font-size:.6875rem;font-weight:500}.sync-empty-state{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.75rem;min-height:0;padding:1rem;display:flex;overflow:auto}.sync-empty-cards{pointer-events:auto;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;width:100%;max-width:480px;display:grid}.sync-empty-card{cursor:pointer;background:#fffc;border:1px solid #e2e8f0;border-radius:.875rem;flex-direction:column;align-items:center;gap:.5rem;padding:1.25rem 1rem;transition:border-color .15s,box-shadow .15s,transform .1s;display:flex}.dark .sync-empty-card{background:#1e293b99;border-color:#334155}.sync-empty-card:hover{border-color:var(--sync-accent);transform:translateY(-1px);box-shadow:0 4px 16px #3b82f61f}.sync-empty-card-icon{background:var(--sync-accent-soft);width:36px;height:36px;color:var(--sync-accent);border-radius:.625rem;justify-content:center;align-items:center;display:flex}.sync-empty-card-label{color:#0f172a;font-size:.8125rem;font-weight:600}.dark .sync-empty-card-label{color:#f8fafc}.sync-empty-card-desc{color:#64748b;text-align:center;font-size:.6875rem}.sync-loading-overlay{z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffffb3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.dark .sync-loading-overlay{background:#0f172ab3}.sync-loading-card{background:#fff;border-radius:1rem;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem 2rem;display:flex;box-shadow:0 8px 32px #0000001a}.dark .sync-loading-card{background:#1e293b}