:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;--font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, monospace;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--transition-fast: .15s ease;--transition-normal: .25s ease}:root,[data-theme=light]{--color-bg: #ffffff;--color-bg-secondary: #f8f9fb;--color-bg-tertiary: #f0f2f5;--color-surface: #ffffff;--color-surface-hover: #f5f6f8;--color-border: #e2e5ea;--color-border-strong: #c9cdd4;--color-text-primary: #0f1419;--color-text-secondary: #536471;--color-text-tertiary: #8899a6;--color-accent: #2563eb;--color-accent-hover: #1d4ed8;--color-accent-light: #eff6ff;--color-success: #16a34a;--color-warning: #ca8a04;--color-error: #dc2626;--color-sidebar-bg: #f8f9fb;--color-card-bg: #ffffff;--color-scrubbar-bg: #e2e5ea;--color-scrubbar-prefetched: #b4c4d9;--color-scrubbar-fill: #2563eb;--color-scrubbar-handle: #2563eb;--color-input-bg: #f0f2f5;--color-input-border: #e2e5ea;--color-input-focus: #2563eb;--color-badge-bg: #eff6ff;--color-badge-text: #2563eb;--color-nav-active: #2563eb;--color-nav-text: #536471;--color-focus-ring: #2563eb;--focus-ring: 0 0 0 1px var(--color-bg), 0 0 0 2.5px var(--color-focus-ring)}[data-theme=dark]{--color-bg: #0d1117;--color-bg-secondary: #161b22;--color-bg-tertiary: #1c2128;--color-surface: #161b22;--color-surface-hover: #1c2128;--color-border: #30363d;--color-border-strong: #484f58;--color-text-primary: #e6edf3;--color-text-secondary: #8b949e;--color-text-tertiary: #6e7681;--color-accent: #58a6ff;--color-accent-hover: #79c0ff;--color-accent-light: #0d2240;--color-success: #3fb950;--color-warning: #d29922;--color-error: #f85149;--color-sidebar-bg: #0d1117;--color-card-bg: #161b22;--color-scrubbar-bg: #30363d;--color-scrubbar-prefetched: #484f58;--color-scrubbar-fill: #58a6ff;--color-scrubbar-handle: #58a6ff;--color-input-bg: #0d1117;--color-input-border: #30363d;--color-input-focus: #58a6ff;--color-badge-bg: #0d2240;--color-badge-text: #58a6ff;--color-nav-active: #58a6ff;--color-nav-text: #8b949e;--color-focus-ring: #58a6ff;--focus-ring: 0 0 0 1px var(--color-bg), 0 0 0 2.5px var(--color-focus-ring)}*{margin:0;padding:0;box-sizing:border-box}:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}html,body{height:100%;font-family:var(--font-sans);font-size:14px;line-height:1.5;color:var(--color-text-primary);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{scrollbar-width:thin;scrollbar-color:var(--color-border-strong) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border-strong);border:2px solid var(--color-bg);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}::-webkit-scrollbar-corner{background:transparent}#app{display:grid;grid-template-columns:240px 1fr;grid-template-rows:1fr auto;height:100vh;height:100dvh;overflow:hidden}.sidebar{grid-row:1/-1;background:var(--color-sidebar-bg);border-right:1px solid var(--color-border);display:flex;flex-direction:column;overflow-y:auto}.sidebar .logo{display:flex;align-items:center;gap:var(--space-sm);margin:var(--space-sm);padding:var(--space-md) var(--space-sm);text-decoration:none;color:var(--color-text-primary);font-size:18px;font-weight:600;border-radius:var(--radius-sm);letter-spacing:-.02em}.sidebar .logo img{width:32px;height:32px}.sidebar nav{flex:1;padding:var(--space-sm) var(--space-sm);display:flex;flex-direction:column;gap:var(--space-xs)}.sidebar .navItem{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);color:var(--color-nav-text);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.sidebar .navItem:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.sidebar .navItem.active{background:var(--color-accent-light);color:var(--color-nav-active)}.sidebar .navItem:focus-visible{box-shadow:inset var(--focus-ring)}.sidebar .navItem .navIcon{width:16px;height:16px;opacity:.7}.sidebar .themeToggle{padding:var(--space-md);border-top:1px solid var(--color-border)}.stage{overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;padding-bottom:calc(var(--transport-height, 0px) + env(safe-area-inset-bottom,0px))}.mainContent{overflow-y:auto;padding:var(--space-xl)}.page{max-width:900px;margin:0 auto;padding:var(--space-xl)}.pageHeader{margin-bottom:var(--space-xl)}.pageHeader h1{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:var(--space-xs)}.pageHeader .subtitle{color:var(--color-text-secondary);font-size:14px}.heroSection{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl)}.heroSection .heroLogo{width:256px;height:256px;flex-shrink:0}.heroSection .heroTitle{font-size:28px;font-weight:700;letter-spacing:-.03em;margin-bottom:var(--space-xs)}.heroSection .heroSubtitle{font-size:14px;color:var(--color-text-secondary);line-height:1.6;max-width:540px}.docsLayout{display:flex;gap:0;overflow:hidden;height:100%}.docsMenu{width:220px;flex-shrink:0;border-right:1px solid var(--color-border);padding:var(--space-lg) 0;overflow-y:auto;height:100%}.docsCategoryHeader{padding:var(--space-sm) var(--space-lg);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);margin-top:var(--space-sm)}.docsCategoryHeader:first-child{margin-top:0}.docsMenuItem{display:block;padding:var(--space-xs) var(--space-lg);font-size:13px;color:var(--color-text-secondary);cursor:pointer;text-decoration:none;transition:color var(--transition-fast),background var(--transition-fast)}.docsMenuItem:hover{color:var(--color-text-primary);background:var(--color-surface-hover)}.docsMenuItem.active{color:var(--color-accent);background:var(--color-accent-light)}.docsMenuItem:focus-visible{box-shadow:inset var(--focus-ring);border-radius:0}.docsContent{flex:1;padding:var(--space-xl);overflow-y:auto;height:100%}.docsLoading{color:var(--color-text-tertiary);font-size:13px}.markdown{line-height:1.7;font-size:14px}.markdown h1{font-size:24px;font-weight:700;margin:0 0 var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-border)}.markdown h2{font-size:18px;font-weight:600;margin:var(--space-xl) 0 var(--space-md)}.markdown h3{font-size:15px;font-weight:600;margin:var(--space-lg) 0 var(--space-sm)}.markdown p{margin:var(--space-md) 0;color:var(--color-text-secondary)}.markdown code{font-family:var(--font-mono);font-size:13px;background:var(--color-bg-tertiary);padding:2px 5px;border-radius:3px}.markdown pre{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-md);overflow-x:auto;margin:var(--space-md) 0}.markdown pre code{background:none;padding:0}.markdown ul,.markdown ol{padding-left:var(--space-lg);margin:var(--space-md) 0;color:var(--color-text-secondary)}.markdown li{margin:var(--space-xs) 0}.markdown table{width:100%;border-collapse:collapse;margin:var(--space-md) 0;font-size:13px}.markdown table th,.markdown table td{padding:var(--space-sm);border:1px solid var(--color-border);text-align:left}.markdown table th{background:var(--color-bg-tertiary);font-weight:500}.markdown blockquote{border-left:3px solid var(--color-accent);padding-left:var(--space-md);margin:var(--space-md) 0;color:var(--color-text-tertiary)}.markdown a{color:var(--color-accent);text-decoration:none}.markdown a:hover{text-decoration:underline}.markdown hr{border:none;border-top:1px solid var(--color-border);margin:var(--space-lg) 0}.mobileHeader{display:none;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-sidebar-bg);border-bottom:1px solid var(--color-border)}.mobileHeader .menuBtn{width:36px;height:36px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-primary);border-radius:var(--radius-sm)}.mobileHeader .menuBtn:hover{background:var(--color-surface-hover)}.mobileHeader .menuBtn svg{width:20px;height:20px}.mobileHeader .mobileTitle{font-size:16px;font-weight:600;color:var(--color-text-primary);flex:1}.mobileHeader img{width:28px;height:28px}.mobileHeader .mobileGithub{color:var(--color-text-secondary);display:flex;align-items:center;padding:var(--space-xs)}.mobileHeader .mobileGithub:hover{color:var(--color-text-primary)}.sidebarOverlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:99}@media(max-width:768px){#app{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.mobileHeader{display:flex}.sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;z-index:100;transform:translate(-100%);transition:transform .25s ease}.sidebar.open{transform:translate(0)}.sidebarOverlay.open{display:block}.mainContent{padding:var(--space-md)}.stage{padding:var(--space-md);padding-bottom:calc(var(--transport-height, 0px) + env(safe-area-inset-bottom,0px))}.heroSection{flex-direction:column;align-items:center;text-align:center}.heroSection .heroLogo{width:160px;height:160px}.statsGrid{grid-template-columns:repeat(2,1fr)}.docsLayout{flex-direction:column;margin:0}.docsMenu{width:100%;height:auto;max-height:200px;border-right:none;border-bottom:1px solid var(--color-border)}}.card{background:var(--color-card-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg)}.card+.card{margin-top:var(--space-md)}.cardHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.cardHeader h2{font-size:16px;font-weight:600}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;border:none;transition:background var(--transition-fast),transform var(--transition-fast)}.btn:active{transform:scale(.97)}.btnPrimary{background:var(--color-accent);color:#fff}.btnPrimary:hover{background:var(--color-accent-hover)}.btnSecondary{background:var(--color-bg-tertiary);color:var(--color-text-primary);border:1px solid var(--color-border)}.btnSecondary:hover{background:var(--color-surface-hover)}.btnIcon{width:36px;height:36px;padding:0;border-radius:var(--radius-full);background:var(--color-bg-tertiary);border:1px solid var(--color-border);color:var(--color-text-primary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--transition-fast)}.btnIcon:hover{background:var(--color-surface-hover)}.btnIcon svg{width:16px;height:16px}.inputGroup{display:flex;flex-direction:column;gap:var(--space-xs)}.inputGroup label{font-size:12px;font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}.textInput{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);border:1px solid var(--color-input-border);background:var(--color-input-bg);color:var(--color-text-primary);font-size:14px;font-family:inherit;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.textInput::placeholder{color:var(--color-text-tertiary)}.textInput:focus-visible{border-color:var(--color-input-focus);box-shadow:0 0 0 3px #2563eb1a}.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-full);font-size:11px;font-weight:600;background:var(--color-badge-bg);color:var(--color-badge-text)}.statsGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-md);margin-bottom:var(--space-xl)}.statCard{background:var(--color-card-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg)}.statCard .statValue{font-size:22px;font-weight:700;color:var(--color-text-primary)}.statCard .statLabel{font-size:12px;color:var(--color-text-secondary);margin-top:var(--space-xs)}.demoGrid{display:flex;flex-direction:column;gap:var(--space-sm)}.demoCard{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast)}.demoCard:hover{background:var(--color-surface-hover)}.demoCard:focus-visible{background:var(--color-surface-hover)}.demoCard .demoCardIcon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-bg-tertiary);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-text-secondary)}.demoCard .demoCardContent{flex:1;min-width:0}.demoCard .demoCardTitle{font-size:13px;font-weight:500;color:var(--color-text-primary)}.demoCard .demoCardDesc{font-size:12px;color:var(--color-text-tertiary);margin-top:2px}.themeSwitch{display:flex;align-items:center;gap:var(--space-sm);font-size:12px;color:var(--color-text-secondary);cursor:pointer;border-radius:var(--radius-sm);padding:var(--space-xs)}.themeSwitch .switchTrack{width:36px;height:20px;border-radius:var(--radius-full);background:var(--color-border-strong);position:relative;transition:background var(--transition-fast)}.themeSwitch .switchTrack .switchThumb{width:16px;height:16px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:transform var(--transition-fast)}.themeSwitch.dark .switchTrack{background:var(--color-accent)}.themeSwitch.dark .switchTrack .switchThumb{transform:translate(16px)}.featureList{display:flex;flex-direction:column;gap:var(--space-sm)}.featureItem{display:flex;align-items:center;gap:var(--space-sm);font-size:13px;color:var(--color-text-secondary)}.featureItem .iconContainer{display:flex;flex-shrink:0}.urlRow{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap}.urlRow .textInput{flex:1;min-width:0}.urlRow .btnPrimary{flex-shrink:0}.mediaContainer{border-radius:var(--radius-sm);overflow:hidden;background:#000}.compatTable{width:100%;font-size:13px;border-collapse:collapse}.compatTable th{text-align:left;padding:var(--space-sm);border-bottom:1px solid var(--color-border);color:var(--color-text-secondary);font-weight:500}.compatTable td{padding:var(--space-sm);border-bottom:1px solid var(--color-border)}.compatTable tr:last-child td{border-bottom:none}.iconContainer{display:inline-flex;align-items:center;justify-content:center;line-height:0}.iconContainer svg{display:block}.tabs{display:flex;gap:var(--space-xs);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-lg)}.tab{padding:var(--space-sm) var(--space-md);font-size:13px;font-weight:500;color:var(--color-text-secondary);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;transition:color var(--transition-fast),border-color var(--transition-fast);font-family:inherit}.tab:hover{color:var(--color-text-primary)}.tab.active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.transport{position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--color-surface);border-top:1px solid var(--color-border);display:flex;flex-direction:column}.transportVideo{background:#000;display:flex;justify-content:center}.transportVideo video{max-height:240px;width:100%;object-fit:contain;cursor:pointer}.transportControlsRow{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-lg);height:56px}.transportControls{display:flex;align-items:center;gap:var(--space-sm)}.transportBtn{width:32px;height:32px;border-radius:var(--radius-full);border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-primary);transition:background var(--transition-fast)}.transportBtn:hover{background:var(--color-bg-tertiary)}.transportBtn:focus-visible{border-radius:var(--radius-full)}.transportBtn svg{width:16px;height:16px}.playBtn{width:36px;height:36px;background:var(--color-accent);color:#fff;border-radius:var(--radius-full);position:relative}.playBtn:hover{background:var(--color-accent-hover)}.playBtn svg{width:18px;height:18px}.playBtn.loading:after{content:"";position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;border-radius:50%;border:2px solid var(--color-border);border-top-color:var(--color-text-primary);animation:spin 1s linear infinite;pointer-events:none}@keyframes spin{to{transform:rotate(360deg)}}.transportProgress{flex:1;display:flex;align-items:center;gap:var(--space-sm)}.progressTime{font-size:11px;font-variant-numeric:tabular-nums;color:var(--color-text-tertiary);min-width:40px;text-align:center}.progressBar{flex:1;position:relative}.progressBarHit{cursor:pointer;width:100%;height:20px;display:flex;align-items:center;touch-action:none}.progressBarFills{position:relative;height:4px;width:100%;border-radius:var(--radius-full);transition:height .15s ease}.progressBarTrack{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-scrubbar-bg);border-radius:var(--radius-full)}.progressBarPrefetched{position:absolute;top:0;left:0;height:100%;background:var(--color-scrubbar-prefetched);border-radius:var(--radius-full);width:0%}.progressFill{position:absolute;top:0;left:0;height:100%;background:var(--color-scrubbar-fill);border-radius:var(--radius-full);width:0%}.progressHandle{width:12px;height:12px;border-radius:50%;background:var(--color-scrubbar-handle);position:absolute;top:50%;left:0%;transform:translate(-50%,-50%) scale(0);opacity:0;transition:opacity var(--transition-fast),transform var(--transition-fast)}.progressBarHit:hover .progressBarFills{height:6px}.progressBarHit:hover .progressHandle{opacity:1;transform:translate(-50%,-50%) scale(1)}.transportTrackInfo{min-width:140px;max-width:200px}.transportTrackInfo .trackTitle{font-size:13px;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transportTrackInfo .trackType{font-size:11px;color:var(--color-text-tertiary)}.transportActions{display:flex;align-items:center;gap:var(--space-xs)}.volumeControl{display:flex;align-items:center;position:relative}.volumeControl .volumeSlider{width:0;height:20px;border-radius:var(--radius-full);background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;opacity:0;overflow:visible;transition:width var(--transition-normal),opacity var(--transition-normal)}.volumeControl .volumeSlider::-webkit-slider-runnable-track{height:4px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--color-text-primary) var(--volume, 100%),var(--color-scrubbar-bg) var(--volume, 100%))}.volumeControl .volumeSlider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--color-text-primary);margin-top:-4px}.volumeControl .volumeSlider::-moz-range-track{height:4px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--color-text-primary) var(--volume, 100%),var(--color-scrubbar-bg) var(--volume, 100%))}.volumeControl .volumeSlider::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:var(--color-text-primary)}.volumeControl:hover .volumeSlider,.volumeControl .volumeSlider:focus{width:80px;opacity:1}@media(max-width:768px){.transportControlsRow{flex-wrap:wrap;height:auto;padding:var(--space-sm) var(--space-md);gap:var(--space-sm)}.transportProgress{order:-1;flex-basis:100%}.transportTrackInfo{flex:1;min-width:0}.volumeControl{display:none}.transportActions{margin-left:auto}}.toastContainer{position:fixed;bottom:calc(var(--transport-height, 0px) + var(--space-md));left:0;right:0;z-index:1000;pointer-events:none}.toastMessages{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:0 var(--space-md)}.toastMessage{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-primary);font-size:13px;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);display:flex;align-items:center;gap:var(--space-sm);animation:toastIn .2s ease-out}.toastMessage.toastHide{animation:toastOut .2s ease-in forwards}.toastMessage.toastError{border-color:var(--color-error)}.toastMessage.toastError .iconContainer{color:var(--color-error)}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}:root,[data-theme=light]{--hljs-keyword: #8250df;--hljs-string: #0a3069;--hljs-attr: #0550ae;--hljs-comment: #6e7781;--hljs-number: #0550ae;--hljs-type: #953800;--hljs-function: #6639ba;--hljs-params: #24292f;--hljs-meta: #0550ae;--hljs-property: #953800;--hljs-literal: #0550ae}[data-theme=dark]{--hljs-keyword: #c678dd;--hljs-string: #98c379;--hljs-attr: #98c379;--hljs-comment: #6e7681;--hljs-number: #d19a66;--hljs-type: #e5c07b;--hljs-function: #61afef;--hljs-params: #abb2bf;--hljs-meta: #56b6c2;--hljs-property: #e06c75;--hljs-literal: #d19a66}.hljs{color:var(--color-text-primary)}.hljs-keyword,.hljs-selector-tag,.hljs-built_in{color:var(--hljs-keyword)}.hljs-string,.hljs-attr{color:var(--hljs-string)}.hljs-comment{color:var(--hljs-comment);font-style:italic}.hljs-number,.hljs-literal{color:var(--hljs-literal)}.hljs-type,.hljs-title,.hljs-class{color:var(--hljs-type)}.hljs-function,.hljs-title.function_{color:var(--hljs-function)}.hljs-params{color:var(--hljs-params)}.hljs-meta{color:var(--hljs-meta)}.hljs-property{color:var(--hljs-property)}