:root{--surface:#fff;--surface-strong:#fff;--surface-soft:#f5f3ff;--line:#e4e4e7;--line-strong:#c4b5fd;--text:#111827;--muted:#6b7280;--muted-strong:#4b5563;--cyan:#2563eb;--green:#16a34a;--amber:#b45309;--violet:#7c3aed;--danger:#dc2626;--glass:#ffffffe6;--glass-strong:#fffffff7;--highlight:#7c3aed;--radius-lg:8px;--radius-md:7px;--shadow-high:0 18px 50px #00000052;--shadow-soft:0 8px 22px #0000002e;--font-sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"SFMono-Regular", "SF Mono", ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;color:var(--text);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:var(--font-sans);font-synthesis:none;text-rendering:optimizelegibility}*{box-sizing:border-box}html,body,#root{height:100%;min-height:100%}body{background:#f5f3ff;min-width:320px;margin:0;overflow:hidden}.docs-playground{color:var(--text);background:radial-gradient(circle at 100% 0,#c4b5fd80,#0000 34%),linear-gradient(145deg,#fff 0%,#f5f3ff 100%);grid-template-columns:minmax(0,1.25fr) minmax(18rem,.75fr);gap:0;height:100%;min-height:0;display:grid;overflow:hidden}.docs-playground__stage{background:#fff;border-right:1px solid #ddd6fe;min-height:0;position:relative}.docs-playground__stage .renderer-viewport{background:#f3f4f6;height:100%}.docs-playground__stage .renderer-viewport:after{display:none}.docs-playground__stage-copy{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:3;background:#ffffffe0;border:1px solid #c4b5fde0;border-radius:999px;align-items:center;gap:.45rem;padding:.42rem .72rem;display:flex;position:absolute;top:1rem;left:1rem;box-shadow:0 8px 24px #4c1d951f}.docs-playground__stage-copy span,.docs-playground__stage-copy strong{font-size:.7rem;line-height:1}.docs-playground__stage-copy span{color:var(--violet);letter-spacing:.08em;text-transform:uppercase;font-weight:780}.docs-playground__stage-copy strong{color:var(--text);font-weight:740}.docs-playground__controls{scrollbar-color:#c4b5fd transparent;scrollbar-width:thin;flex-direction:column;gap:1.15rem;min-height:0;padding:clamp(1.2rem,3vw,2rem);display:flex;overflow:auto}.docs-playground__controls-heading{justify-content:space-between;align-items:start;gap:.8rem;display:flex}.docs-playground__controls-heading p,.docs-playground__controls-heading h1{margin:0}.docs-playground__controls-heading p,.docs-playground legend{color:var(--violet);letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;font-weight:780}.docs-playground__controls-heading h1{color:var(--text);letter-spacing:-.045em;margin-top:.35rem;font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.04}.docs-playground__controls-heading a{color:var(--violet);white-space:nowrap;font-size:.76rem;font-weight:720;text-decoration:none}.docs-playground__layer-list,.docs-playground__style-list{background:#ffffffbd;border:1px solid #e4e4e7;border-radius:13px;gap:.6rem;padding:.95rem;display:grid}.docs-playground legend{margin-bottom:.18rem;padding:0}.docs-playground__layer{cursor:pointer;border-radius:9px;align-items:center;gap:.65rem;padding:.4rem;display:flex}.docs-playground__layer:hover{background:#f5f3ff}.docs-playground__layer input{accent-color:var(--violet);block-size:1rem;inline-size:1rem;margin:0}.docs-playground__layer span{gap:.08rem;display:grid}.docs-playground__layer strong{color:var(--text);font-size:.8rem;font-weight:700}.docs-playground__layer small{color:var(--muted);font-size:.69rem}.docs-playground__range{gap:.42rem;display:grid}.docs-playground__range+.docs-playground__range{margin-top:.42rem}.docs-playground__range>span{justify-content:space-between;align-items:baseline;display:flex}.docs-playground__range strong{color:var(--muted-strong);font-size:.76rem;font-weight:680}.docs-playground__range output{color:var(--text);font-family:var(--font-mono);font-size:.7rem;font-weight:700}.docs-playground__range input{accent-color:var(--violet);cursor:pointer;inline-size:100%}.docs-playground__playback{grid-template-columns:auto minmax(3rem,1fr);align-items:center;gap:.5rem;margin-top:auto;display:grid}.docs-playground__playback button{background:var(--violet);color:#fff;cursor:pointer;border:0;border-radius:9px;align-items:center;gap:.38rem;min-height:2.2rem;padding:.45rem .72rem;font-size:.78rem;font-weight:730;display:inline-flex;box-shadow:0 8px 16px #6d28d92e}.docs-playground__playback button:hover:not(:disabled){background:#6d28d9}.docs-playground__playback button:disabled{cursor:wait;opacity:.55}.docs-playground__progress{background:#ddd6fe;border-radius:999px;block-size:.35rem;overflow:hidden}.docs-playground__progress span{border-radius:inherit;background:linear-gradient(90deg,#7c3aed,#a78bfa);block-size:100%;transition:width .18s linear;display:block}.docs-playground__loop{color:var(--muted);grid-column:2;font-size:.68rem;font-weight:620}@media (width<=720px){.docs-playground{grid-template-rows:minmax(22rem,1.08fr) minmax(27rem,.92fr);grid-template-columns:1fr;overflow:auto}.docs-playground__stage{border-bottom:1px solid #ddd6fe;border-right:0;min-height:22rem}.docs-playground__controls{overflow:visible}}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}fieldset{border:0;margin:0;padding:0}.demo-shell{color:var(--text);background:radial-gradient(circle at 80% 0,#c4b5fd70,#0000 28%),linear-gradient(#faf9ff 0%,#f5f3ff 64%,#ede9fe 100%);grid-template-rows:auto minmax(0,1fr);gap:10px;height:100dvh;min-height:0;padding:10px;display:grid;position:relative;overflow:hidden}.demo-shell--benchmarks{grid-template-rows:auto minmax(0,1fr)}.demo-shell:before{content:"";opacity:.55;pointer-events:none;background-image:linear-gradient(#7c3aed14 1px,#0000 1px),linear-gradient(90deg,#7c3aed12 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000008c,#0000 58%);mask-image:linear-gradient(#0000008c,#0000 58%)}.demo-shell__header{-webkit-backdrop-filter:blur(18px)saturate(1.04);backdrop-filter:blur(18px)saturate(1.04);border:1px solid var(--line);border-radius:var(--radius-lg);z-index:5;background:#ffffffe0;grid-template-columns:minmax(220px,1fr) auto;align-items:center;gap:10px;min-width:0;padding:8px 10px;display:grid;position:relative}.demo-shell__brand{align-items:center;gap:9px;min-width:0;display:flex}.demo-shell__mark{border:1px solid var(--line);box-shadow:none;background:#f5f3ff;border-radius:8px;flex:none;justify-content:center;align-items:center;width:32px;height:32px;display:flex;position:relative;overflow:hidden}.demo-shell__mark img{width:24px;height:24px;display:block}.demo-shell__title{gap:1px;min-width:0;display:grid}.demo-shell__title strong{color:var(--text);letter-spacing:0;font-size:15px;font-weight:740;line-height:1.1}.demo-shell__title span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:560;overflow:hidden}.demo-shell__mode{flex-wrap:wrap;justify-content:flex-end;gap:6px;display:flex}.demo-shell__mode a,.demo-shell__mode button{border:1px solid var(--line);border-radius:var(--radius-md);color:var(--muted-strong);cursor:pointer;background:#fff;justify-content:center;align-items:center;min-width:0;min-height:30px;padding:5px 10px;font-size:12px;font-weight:620;text-decoration:none;transition:background .14s,color .14s,transform .14s;display:inline-flex}.demo-shell__mode button[aria-pressed=true]{background:var(--highlight);box-shadow:none;color:#fff;border-color:#0000}.demo-shell__mode a:hover,.demo-shell__mode button:hover:not([aria-pressed=true]){border-color:var(--line-strong);color:var(--violet);background:#f5f3ff}.demo-shell__workspace{z-index:1;grid-template-columns:minmax(280px,336px) minmax(0,1fr);gap:10px;min-height:0;display:grid;position:relative}.demo-shell__inspector{-webkit-backdrop-filter:blur(18px)saturate(1.04);backdrop-filter:blur(18px)saturate(1.04);border:1px solid var(--line);border-radius:var(--radius-lg);scrollbar-color:#c4b5fd transparent;scrollbar-width:thin;background:#ffffffe0;align-content:start;gap:10px;min-height:0;padding:10px;display:grid;overflow:auto}.demo-shell__inspector::-webkit-scrollbar{width:8px}.demo-shell__inspector::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:999px}.demo-shell__inspector::-webkit-scrollbar-track{background:0 0}.demo-shell__stage{grid-template-rows:minmax(0,1fr) auto;gap:10px;min-width:0;min-height:0;display:grid}.demo-shell__viewport{border:1px solid var(--line);border-radius:var(--radius-lg);min-width:0;min-height:0;overflow:hidden}.demo-shell__benchmarks{z-index:1;scrollbar-color:#c4b5fd transparent;scrollbar-width:thin;min-height:0;position:relative;overflow:auto}.demo-shell__benchmarks::-webkit-scrollbar{width:8px}.demo-shell__benchmarks::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:999px}.demo-shell__benchmarks::-webkit-scrollbar-track{background:0 0}.renderer-viewport{background:linear-gradient(#ffffff06,#0000 38%),linear-gradient(90deg,#000000b8,#0000 24% 76%,#000000b8),linear-gradient(#0000 68%,#0000005c),#050607;height:100%;min-height:0;position:relative;overflow:hidden}.renderer-viewport:after{content:"";pointer-events:none;background:linear-gradient(#0000002e,#0000 18%),linear-gradient(#0000 66%,#000000a8);border:1px solid #ffffff13;position:absolute;inset:0}.renderer-viewport__mount{width:100%;height:100%;min-height:0;overflow:hidden}.renderer-viewport__mount canvas{display:block}.renderer-viewport__overlay{pointer-events:none;z-index:2;justify-content:center;align-items:flex-start;padding-top:clamp(12px,3vh,28px);display:flex;position:absolute;inset:0}.renderer-viewport__overlay-card{-webkit-backdrop-filter:blur(16px)saturate(1.2);backdrop-filter:blur(16px)saturate(1.2);text-align:center;background:linear-gradient(#ffffff14,#0000),#080a0d94;border:1px solid #ffffff21;border-radius:11px;gap:3px;min-width:148px;max-width:min(260px,100vw - 32px);padding:8px 12px;display:grid;box-shadow:0 10px 28px #00000038,inset 0 1px #fff1}.renderer-viewport__overlay-card strong{color:var(--text);font-size:12px;font-weight:850;line-height:1.25}.renderer-viewport__overlay-card span{color:var(--muted-strong);font-size:10px;font-weight:750}.renderer-viewport__overlay-kicker{color:var(--cyan);text-transform:uppercase}.renderer-viewport__overlay-progress{background:#ffffff1f;border-radius:999px;height:4px;margin-top:2px;overflow:hidden}.renderer-viewport__overlay-progress span{background:linear-gradient(90deg, #67e8f9b8, var(--cyan));border-radius:inherit;height:100%;width:var(--overlay-progress);display:block}.source-controls{border:1px solid var(--line);border-radius:var(--radius-md);background:#07090d85;gap:8px;min-width:0;padding:9px;display:grid}.inspector-card__header{justify-content:space-between;align-items:center;gap:8px;min-width:0;display:flex}.inspector-card__header h2{color:var(--text);margin:0;font-size:12px;font-weight:740;line-height:1.1}.source-controls__mode{grid-template-columns:1fr;gap:6px;min-width:0;display:grid}.source-controls__mode button,.source-actions button{border:1px solid var(--line);color:var(--muted-strong);cursor:pointer;border-radius:var(--radius-md);white-space:nowrap;background:#ffffff09;justify-content:center;min-width:0;min-height:30px;padding:5px 10px;font-size:12px;font-weight:620;transition:background .14s,color .14s,transform .14s}.source-controls__mode button[aria-pressed=true],.source-actions__primary{background:var(--highlight);box-shadow:none;color:#07080a;border-color:#0000}.source-controls__mode button:hover:not(:disabled,[aria-pressed=true]),.source-actions button:hover:not(:disabled){color:#fff;background:#ffffff13;border-color:#ffffff38}.source-controls__mode button:disabled,.source-actions button:disabled{color:#ffffff47;cursor:not-allowed}.source-controls__upload{grid-template-columns:1fr;align-items:stretch;gap:8px;min-width:0;display:grid}.source-field{gap:4px;min-width:0;display:grid}.source-field span{color:var(--muted);font-size:11px;font-weight:610;line-height:1.2}.source-field input,.source-field textarea{border:1px solid var(--line);border-radius:var(--radius-md);color:var(--text);resize:vertical;background:#03050880;min-width:0;min-height:32px;padding:6px 8px}.source-field input:focus-visible,.source-field textarea:focus-visible,.source-controls__mode button:focus-visible,.source-actions button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.source-field--file{border:1px dashed var(--line-strong);border-radius:var(--radius-md);cursor:pointer;background:#ffffff06;min-height:58px;padding:7px 8px}.source-field--file input{opacity:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.source-field--file strong{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:620;overflow:hidden}.source-actions{justify-content:stretch;gap:6px;display:flex}.source-actions button{border:1px solid var(--line);border-radius:var(--radius-md);flex:1;min-height:32px}.source-actions button:hover:not(:disabled){transform:translateY(-1px)}.source-progress{border:1px solid var(--line);border-radius:var(--radius-md);color:var(--muted-strong);background:#ffffff06;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;padding:5px 8px;font-size:12px;font-weight:560;display:flex}.source-progress strong{color:var(--text);font-family:var(--font-mono);font-size:11px;font-weight:620}.quality-controls{border:1px solid var(--line);border-radius:var(--radius-md);background:#07090d85;gap:8px;min-width:0;padding:9px;display:grid}.quality-controls .inspector-card__header span{color:var(--muted);text-align:right;font-size:10px;font-weight:620;line-height:1.2}.quality-controls__input-row{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;display:grid}.quality-controls__input-row label{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;gap:4px;min-width:0;font-size:10px;font-weight:700;display:grid}.quality-controls__input-row input[type=number]{border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font-mono);background:#ffffff0b;min-width:0;height:30px;padding:0 8px;font-size:12px;font-weight:650}.quality-controls__input-row input:disabled{cursor:not-allowed;opacity:.45}.quality-controls__toggle{border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;background:#ffffff0a;justify-content:center;align-items:center;height:30px;padding:0 8px;text-transform:none!important;gap:6px!important;display:flex!important}.quality-controls__toggle span{color:var(--muted-strong);letter-spacing:0;font-size:11px;font-weight:680}.quality-controls__toggle input{accent-color:var(--cyan);width:14px;height:14px}.quality-controls__input-row input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.selection-panel{border:1px solid var(--line);border-radius:var(--radius-md);background:#07090d85;gap:8px;min-width:0;padding:9px;display:grid}.selection-panel .inspector-card__header button{border:1px solid var(--line);border-radius:var(--radius-md);color:var(--muted-strong);cursor:pointer;background:#ffffff09;min-height:25px;padding:3px 8px;font-size:11px;font-weight:650}.selection-panel .inspector-card__header button:hover{border-color:var(--line-strong);color:#fff;background:#ffffff13}.selection-panel__hint{color:var(--muted);margin:0;font-size:11px;font-weight:560;line-height:1.35}.selection-details{border-radius:var(--radius-md);background:#ffffff06;border:1px solid #8f9db21f;gap:8px;min-width:0;padding:8px;display:grid}.selection-details--empty{gap:3px}.selection-details--empty strong,.selection-details__title strong{color:var(--text);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:12px;font-weight:720;overflow:hidden}.selection-details--empty span,.selection-details__title span{color:var(--muted);font-family:var(--font-mono);font-size:11px;font-weight:620}.selection-details__title{justify-content:space-between;align-items:baseline;gap:8px;min-width:0;display:flex}.selection-details__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;min-width:0;margin:0;display:grid}.selection-details__grid div{min-width:0}.selection-details__grid dt{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:10px;font-weight:680;line-height:1.2}.selection-details__grid dd{color:var(--text);font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap;min-width:0;margin:0;font-size:11px;font-weight:620;line-height:1.25;overflow:hidden}.control-bar{border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:none;background:#0a0c11e0;grid-template-columns:auto minmax(280px,1fr) auto;align-items:center;gap:9px;min-width:0;padding:8px;display:grid}.control-bar__time{flex-wrap:wrap;justify-content:end;align-items:center;gap:5px;min-width:0;display:flex}.playback-controls{align-items:center;gap:6px;display:inline-flex}.playback-controls__toggle{background:var(--highlight);box-shadow:none;color:#07080a;cursor:pointer;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;transition:background .14s,border-color .14s,box-shadow .14s,transform .14s;display:inline-flex;position:relative}.playback-controls__toggle:hover:not(:disabled){box-shadow:none;background:#fff;border-color:#fffc;transform:translateY(-1px)}.playback-controls__step:focus-visible,.playback-controls__toggle:focus-visible,.demo-shell__mode a:focus-visible,.demo-shell__mode button:focus-visible,.render-control button:focus-visible,.render-control input:focus-visible,.render-controls__tabs button:focus-visible,.class-color-control input:focus-visible,.timeline-view__strip:focus-visible,.timeline-view__input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.playback-controls__step:disabled,.playback-controls__toggle:disabled{color:#ffffff5c;cursor:not-allowed;background:#ffffff1a;transform:none}.playback-controls__step{border:1px solid var(--line);color:var(--text);cursor:pointer;letter-spacing:0;background:#ffffff09;border-radius:999px;justify-content:center;align-items:center;min-width:34px;height:32px;padding:0 8px;font-size:12px;font-weight:650;transition:background .14s,border-color .14s,color .14s,transform .14s;display:inline-flex}.playback-controls__step:hover:not(:disabled){color:#e7fbff;background:#67e8f926;border-color:#67e8f966;transform:translateY(-1px)}.playback-controls__label{white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.playback-controls__play{border-top:8px solid #0000;border-bottom:8px solid #0000;border-left:12px solid #07080a;width:0;height:0;margin-left:2px;display:block}.playback-controls__pause{gap:4px;display:inline-flex}.playback-controls__pause:before,.playback-controls__pause:after{content:"";background:#07080a;border-radius:2px;width:4px;height:15px}.timeline-view{gap:5px;min-width:0;display:grid}.timeline-view__legend{flex-wrap:wrap;align-items:center;gap:5px;min-width:0;display:flex}.timeline-view__chip{border:1px solid var(--line);border-radius:var(--radius-md);color:var(--muted-strong);background:#ffffff06;align-items:center;gap:5px;min-width:0;max-width:100%;min-height:20px;padding:3px 6px;font-size:11px;font-weight:560;line-height:1.2;display:inline-flex}.timeline-view__chip strong{color:var(--text);font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:620;overflow:hidden}.timeline-view__chip-dot{border-radius:999px;flex:none;width:6px;height:6px;display:inline-block}.timeline-view__chip--buffer .timeline-view__chip-dot{background:var(--green);box-shadow:none}.timeline-view__chip--ready .timeline-view__chip-dot{box-shadow:none;background:#9bf6a5}.timeline-view__chip--processed .timeline-view__chip-dot{background:var(--cyan);box-shadow:none}.timeline-view__chip--normalized .timeline-view__chip-dot{box-shadow:none;background:#a78bfa}.timeline-view__chip--processing .timeline-view__chip-dot{background:var(--amber);box-shadow:none}.timeline-view__scrubber{gap:3px;min-width:0;display:grid;position:relative}.timeline-view__scrubber:focus-within .timeline-view__strip{outline:2px solid var(--cyan);outline-offset:3px}.timeline-view__lanes{gap:3px;min-width:0;display:grid}.timeline-view__lane{background:#ffffff14;border-radius:999px;height:6px;position:relative;overflow:hidden}.timeline-view__segment{bottom:0;left:var(--timeline-left);width:var(--timeline-width);border-radius:999px;position:absolute;top:0}.timeline-view__segment--processed{background:var(--cyan);box-shadow:none}.timeline-view__segment--normalized{background:var(--violet);box-shadow:none}.timeline-view__segment--ready{box-shadow:none;background:linear-gradient(90deg,#9bf6a5f2,#e8ffd7)}.timeline-view__segment--processing{background:repeating-linear-gradient(135deg,#ffd166eb 0 6px,#ffd1665c 6px 12px),#ffd1668a;animation:.9s linear infinite timeline-processing}.timeline-view__strip{border:1px solid var(--line);touch-action:none;background:#030508db;border-radius:999px;height:16px;position:relative;overflow:hidden;box-shadow:inset 0 1px 2px #0000008c}.timeline-view__strip--interactive{cursor:pointer}.timeline-view__range{left:var(--timeline-left);width:var(--timeline-width);border-radius:999px;position:absolute}.timeline-view__range--requested{border:1px solid var(--line);background:#ffffff1f;top:2px;bottom:2px}.timeline-view__range--buffer{background:var(--green);box-shadow:none;height:5px;top:5px}.timeline-view__marker{left:var(--timeline-left);width:2px;position:absolute;transform:translate(-1px)}.timeline-view__marker--active-frame{background:var(--amber);box-shadow:none;top:1px;bottom:1px}.timeline-view__marker--playhead{box-shadow:none;background:#fff;top:0;bottom:0}.timeline-view__knob{height:12px;left:var(--timeline-left);background:#fff;border:2px solid #07090cd9;border-radius:999px;width:12px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #ffffff1f}.timeline-view__input{appearance:none;cursor:pointer;opacity:0;z-index:2;background:0 0;width:100%;height:18px;margin:0;position:absolute;inset:18px 0 0}.timeline-view__input:disabled{cursor:not-allowed}.render-control--slider input{appearance:none;background:0 0;width:100%;height:18px;margin:0}.render-control--slider input::-webkit-slider-runnable-track{background:#ffffff2e;border-radius:999px;height:4px}.render-control--slider input::-moz-range-track{background:#ffffff2e;border-radius:999px;height:4px}.render-control--slider input::-moz-range-progress{background:var(--cyan);border-radius:999px;height:4px}.render-control--slider input::-webkit-slider-thumb{appearance:none;background:var(--cyan);border:0;border-radius:50%;width:14px;height:14px;margin-top:-5px;box-shadow:0 0 0 3px #70d8ed29}.render-control--slider input::-moz-range-thumb{background:var(--cyan);border:0;border-radius:50%;width:14px;height:14px;box-shadow:0 0 0 3px #70d8ed29}.render-control--slider input::-webkit-slider-thumb{background:var(--cyan);box-shadow:0 0 0 3px #67e8f921}.render-control--slider input::-moz-range-thumb{background:var(--cyan);box-shadow:0 0 0 3px #67e8f921}.render-control--slider input:disabled{opacity:.42}@keyframes timeline-processing{0%{background-position:0 0}to{background-position:17px 0}}.render-controls{border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:none;background:#07090d85;gap:8px;min-width:0;padding:9px;display:grid}.render-controls__tabs{flex-wrap:wrap;justify-content:flex-end;gap:4px;min-width:0;display:flex}.render-controls__tabs button{border:1px solid var(--line);border-radius:var(--radius-md);color:var(--muted-strong);cursor:pointer;background:#ffffff09;flex:0 auto;min-width:0;min-height:26px;padding:4px 8px;font-size:11px;font-weight:650}.render-controls__tabs button[aria-pressed=true]{background:var(--highlight);box-shadow:none;color:#07080a;border-color:#0000}.render-controls__tabs button:hover:not([aria-pressed=true]){border-color:var(--line-strong);color:#fff;background:#ffffff13}.render-controls__panel{min-width:0}.render-controls__panel--global{gap:8px;display:grid}.render-control-section{border-radius:var(--radius-md);background:#ffffff06;border:1px solid #8f9db21f;gap:8px;min-width:0;padding:8px;display:grid}.render-control-section h3{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin:0;font-size:11px;font-weight:700;line-height:1.1}.render-control-section__body{gap:8px;min-width:0;display:grid}.benchmarks-panel{border:1px solid var(--line);border-radius:var(--radius-lg);background:#0a0c11e0;gap:12px;width:100%;min-width:0;max-width:1280px;margin:0 auto;padding:12px;display:grid}.benchmark-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-width:0;display:grid}.benchmark-comparison-card{border-radius:var(--radius-md);background:#07090db8;border:1px solid #7ee18f3d;grid-column:span 2;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:10px;display:grid}.benchmark-comparison-card__side{gap:3px;min-width:0;display:grid}.benchmark-comparison-card__side:last-of-type{text-align:right}.benchmark-comparison-card__side span{color:#a3afbf;letter-spacing:.04em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:10px;font-weight:670;line-height:1.15;overflow:hidden}.benchmark-comparison-card__side strong{color:#fff;font-family:var(--font-mono);font-size:22px;font-weight:690;line-height:1.12}.benchmark-comparison-card__arrow{color:#7ee18f;font-family:var(--font-mono);font-size:16px;font-weight:760;line-height:1}.benchmark-comparison-card small{color:var(--muted);grid-column:1/-1;font-size:11px;font-weight:560;line-height:1.2}.benchmark-metric-card{border:1px solid var(--line);border-radius:var(--radius-md);background:#07090db8;gap:3px;min-width:0;padding:10px;display:grid}.benchmark-metric-card span{color:#a3afbf;letter-spacing:.04em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:10px;font-weight:670;line-height:1.15;overflow:hidden}.benchmark-metric-card strong{color:#fff;font-family:var(--font-mono);font-size:18px;font-weight:680;line-height:1.2}.benchmark-metric-card small{color:var(--muted);font-size:11px;font-weight:560;line-height:1.2}.benchmarks-grid{grid-template-columns:minmax(0,1.7fr) minmax(260px,.65fr);align-items:start;gap:8px;min-width:0;display:grid}.benchmarks-grid .benchmark-card:first-child{grid-row:span 2}.benchmark-card{border:1px solid var(--line);border-radius:var(--radius-md);background:#07090dad;gap:9px;min-width:0;padding:10px;display:grid}.benchmark-card h2{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin:0;font-size:11px;font-weight:650;line-height:1.2}.benchmark-table{border-collapse:collapse;color:var(--muted-strong);width:100%;min-width:620px;font-size:12px}.benchmark-card{overflow-x:auto}.benchmark-table th,.benchmark-table td{font-family:var(--font-mono);text-align:right;white-space:nowrap;border-top:1px solid #ffffff12;padding:8px 9px;font-weight:560}.benchmark-table thead th{color:var(--muted);font-family:var(--font-sans);letter-spacing:.04em;text-transform:uppercase;border-top:0;font-size:10px;font-weight:670}.benchmark-table th:first-child,.benchmark-table td:first-child{text-align:left}.benchmark-table tbody th{color:var(--text);font-family:var(--font-sans);font-weight:640}.benchmark-table__row--selected th,.benchmark-table__row--selected td{color:#defee6;border-color:#7ee18f38}.benchmark-table--compact{min-width:0}.benchmark-table--compact td{color:#fff}.render-controls__panel--classes{grid-template-columns:1fr;gap:8px;display:grid}.render-controls__toggles{grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:6px;min-width:0;display:grid}.render-control{color:var(--text);min-width:0}.render-control--toggle{border:1px solid var(--line);border-radius:var(--radius-md);cursor:pointer;background:#ffffff09;justify-content:center;align-items:center;gap:6px;min-height:30px;padding:5px 8px;font-size:12px;font-weight:620;transition:background .14s,border-color .14s;display:inline-flex}.render-control--toggle:hover{border-color:var(--line-strong);background:#ffffff14}.render-control--toggle input{accent-color:var(--cyan);margin:0}.render-control__label{color:var(--muted);font-size:11px;font-weight:610;line-height:1.25}.render-control--slider{gap:4px;display:grid}.render-control--segmented{gap:5px;display:grid}.render-control__segments{border:1px solid var(--line);border-radius:var(--radius-md);background:#ffffff09;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:2px;min-width:0;padding:2px;display:grid}.render-control__segments button{border-radius:calc(var(--radius-md) - 3px);color:var(--muted-strong);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:0 0;border:0;min-width:0;min-height:25px;padding:4px 6px;font-size:11px;font-weight:650;overflow:hidden}.render-control__segments button[aria-pressed=true]{background:var(--highlight);color:#07080a}.render-control__segments button:disabled{cursor:not-allowed;opacity:.42}.render-control__segments button:hover:not(:disabled,[aria-pressed=true]){color:#fff;background:#ffffff13}.render-control__label{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.render-control__label strong{color:var(--text);font-family:var(--font-mono);font-size:12px;font-weight:620}.class-style-card{border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:none;background:#ffffff06;gap:7px;min-width:0;padding:8px;display:grid}.class-style-card header{align-items:center;gap:6px;min-width:0;display:flex}.class-style-card strong{color:var(--text);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:12px;font-weight:640;overflow:hidden}.class-style-card__swatch{background:var(--class-color);box-shadow:none;border:1px solid #ffffff5c;border-radius:4px;flex:none;width:15px;height:15px}.class-style-card__controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid}.class-color-control{gap:4px;min-width:0;display:grid}.class-color-control span{color:var(--muted);font-size:11px;font-weight:610}.class-color-control input{appearance:none;cursor:pointer;background:0 0;border:0;width:100%;height:26px;padding:0}.class-color-control input::-webkit-color-swatch-wrapper{padding:0}.class-color-control input::-webkit-color-swatch{border-radius:var(--radius-md);border:1px solid #ffffff3d}.class-color-control input::-moz-color-swatch{border-radius:var(--radius-md);border:1px solid #ffffff3d}.performance-strip{grid-template-columns:1fr;gap:6px;min-width:0;display:grid}.performance-metric{border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:none;background:#07090dc2;gap:3px;min-width:0;min-height:48px;padding:8px 9px;display:grid}.performance-metric span{color:#a3afbf;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;font-size:10px;font-weight:620;line-height:1.15;overflow:hidden}.performance-metric strong{color:#fff;font-family:var(--font-mono);letter-spacing:0;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:15px;font-weight:650;line-height:1.2;overflow:hidden}.performance-metric--good{box-shadow:none;border-color:#80f29a57}.performance-metric--good strong{color:#dfffe7}.performance-metric--warn{border-color:#ffd87570}.performance-metric--warn strong{color:#ffe8a3}.status-panel{grid-template-columns:1fr;align-items:start;gap:8px;display:grid}.status-group{border:1px solid var(--line);border-radius:var(--radius-lg);background:#080b10c7;gap:6px;min-width:0;padding:8px;display:grid}.status-group__title{color:var(--muted);letter-spacing:0;margin:0;font-size:11px;font-weight:650;line-height:1.2}.status-group__items{flex-wrap:wrap;align-items:start;gap:5px;min-width:0;display:flex}.readout{border:1px solid var(--line);border-radius:var(--radius-md);color:var(--text);white-space:nowrap;background:#ffffff09;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:4px;min-width:0;max-width:100%;padding:5px 7px;line-height:1.2;display:inline-grid}.readout__label{color:#a3afbf;font-size:12px;font-weight:610}.readout__value{color:#d8e1ec;font-family:var(--font-mono);text-overflow:ellipsis;min-width:0;font-size:12px;font-weight:620;overflow:hidden}.readout--danger{color:#ffd1d1;background:#ff505024;border-color:#ff8a8a73}.readout--danger .readout__label,.readout--danger .readout__value{color:var(--danger)}@media (width<=1200px){.benchmark-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.benchmark-comparison-card{grid-column:1/-1}.benchmarks-grid{grid-template-columns:1fr}}@media (width<=760px){body{overflow:auto}.demo-shell{height:auto;min-height:100vh;overflow:visible}.demo-shell__header{grid-template-columns:1fr}.demo-shell__mode{justify-content:stretch}.demo-shell__mode a,.demo-shell__mode button{flex:100px}.demo-shell__workspace{grid-template-columns:1fr;min-height:0;overflow:visible}.demo-shell__inspector{overflow:visible}.demo-shell__stage{grid-template-rows:auto auto;min-height:0}.demo-shell__viewport{height:58vh;min-height:360px}.control-bar{grid-template-columns:auto minmax(0,1fr)}.benchmark-metrics,.benchmark-comparison-card{grid-template-columns:1fr}.benchmark-comparison-card__side:last-of-type{text-align:left}.benchmark-comparison-card__arrow{display:none}.control-bar__time{grid-column:1/-1;justify-content:start}}@media (width<=520px){.demo-shell{padding:8px}.control-bar,.render-controls{border-radius:14px}}.source-controls,.quality-controls,.selection-panel,.render-controls,.status-panel,.benchmark-card,.benchmark-metric-card,.benchmark-comparison-card,.control-bar{border-color:var(--line);background:#ffffffeb;box-shadow:0 10px 28px #4c1d950f}.source-controls__mode button,.source-actions button,.selection-panel .inspector-card__header button,.playback-controls__step,.timeline-view__chip,.render-controls__tabs button,.render-control,.render-control--toggle,.render-control--segmented,.render-control__segments button,.class-style-card,.readout,.performance-metric{border-color:var(--line);color:var(--muted-strong);background:#fff}.source-controls__mode button[aria-pressed=true],.source-actions__primary,.render-controls__tabs button[aria-pressed=true],.render-control__segments button[aria-pressed=true],.playback-controls__toggle{background:var(--violet);border-color:var(--violet);color:#fff;box-shadow:0 8px 16px #7c3aed33}.source-controls__mode button:hover:not(:disabled,[aria-pressed=true]),.source-actions button:hover:not(:disabled),.selection-panel .inspector-card__header button:hover,.playback-controls__step:hover:not(:disabled),.render-controls__tabs button:hover:not([aria-pressed=true]),.render-control__segments button:hover:not(:disabled,[aria-pressed=true]){color:var(--violet);background:#f5f3ff;border-color:#a78bfa}.source-field input,.source-field textarea,.quality-controls__input-row input[type=number],.quality-controls__toggle,.selection-details,.source-progress,.source-field--file,.timeline-view__strip,.timeline-view__lane,.timeline-view__input{border-color:var(--line);color:var(--text);background:#fafafa}.source-field--file,.selection-details,.source-progress,.timeline-view__chip,.class-style-card,.readout{background:#fafafa}.source-controls__mode button:disabled,.source-actions button:disabled,.playback-controls__step:disabled,.playback-controls__toggle:disabled,.render-control__segments button:disabled{color:#9ca3af;background:#f4f4f5}.source-field--file strong,.selection-details--empty strong,.selection-details__title strong,.selection-details__grid dd,.source-progress strong,.timeline-view__chip strong,.benchmark-comparison-card__side strong,.benchmark-metric-card strong,.benchmark-card h2,.class-style-card strong,.performance-metric strong,.readout__value{color:var(--text)}.source-field span,.selection-panel__hint,.selection-details--empty span,.selection-details__title span,.selection-details__grid dt,.quality-controls .inspector-card__header span,.quality-controls__input-row label,.benchmark-comparison-card__side span,.benchmark-metric-card span,.benchmark-comparison-card small,.benchmark-metric-card small,.readout__label,.performance-metric span{color:var(--muted)}.renderer-viewport{border:1px solid var(--line);background:linear-gradient(135deg,#ede9fecc,#0000 52%),#fafafa;box-shadow:0 16px 36px #4c1d9529}.renderer-viewport:after{background:linear-gradient(#ffffff1a,#0000 18%);border-color:#7c3aed1f}.renderer-viewport__overlay-card{background:#fffffff0;border-color:#7c3aed33;box-shadow:0 10px 28px #4c1d952e}.renderer-viewport__overlay-card strong{color:var(--text)}.renderer-viewport__overlay-card span{color:var(--muted)}.renderer-viewport__overlay-kicker{color:var(--violet)}.renderer-viewport__overlay--waiting .renderer-viewport__overlay-kicker{color:var(--amber)}.renderer-viewport__overlay--error .renderer-viewport__overlay-kicker{color:var(--danger)}.renderer-viewport__overlay-progress{background:#ede9fe}.renderer-viewport__overlay-progress span{background:linear-gradient(90deg, #a78bfa, var(--violet))}.playback-controls__play{border-left-color:#fff}.playback-controls__pause:before,.playback-controls__pause:after{background:#fff}.playback-controls__toggle:hover:not(:disabled){background:#6d28d9;border-color:#6d28d9;box-shadow:0 10px 20px #6d28d94d}.render-control--slider input::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--violet) 0 var(--control-progress), #ddd6fe var(--control-progress) 100%)}.render-control--slider input::-moz-range-track{background:#ddd6fe}.render-control--slider input::-moz-range-progress{background:var(--violet)}.render-control--slider input::-webkit-slider-thumb{background:var(--violet);box-shadow:0 0 0 3px #7c3aed29}.render-control--slider input::-moz-range-thumb{background:var(--violet);box-shadow:0 0 0 3px #7c3aed29}.timeline-view__chip--requested .timeline-view__chip-dot{background:#9ca3af}.timeline-view__chip--buffer .timeline-view__chip-dot,.timeline-view__chip--ready .timeline-view__chip-dot,.timeline-view__range--buffer{background:#15803d}.timeline-view__segment--ready{background:linear-gradient(90deg,#15803d,#22c55e)}.timeline-view__segment--normalized,.timeline-view__marker--playhead,.timeline-view__knob{background:var(--violet)}.benchmark-table{background:#fff}.benchmark-table th,.benchmark-table td,.benchmark-table thead th{border-color:var(--line);color:var(--muted-strong)}.benchmark-table tbody th,.benchmark-table__row--selected th,.benchmark-table__row--selected td{color:var(--text)}.benchmark-table__row--selected{background:#f5f3ff}.demo-shell{gap:1rem;padding:clamp(.75rem,1.8vw,1.5rem)}.demo-shell__header{border-color:#c4b5fdb3;border-radius:16px;gap:1rem;padding:.7rem .85rem;box-shadow:0 12px 34px #4c1d9512}.demo-shell__mark{background:var(--surface-soft);border-color:#ddd6fe;border-radius:11px;width:38px;height:38px}.demo-shell__mark img{width:28px;height:28px}.demo-shell__title{gap:.1rem}.demo-shell__eyebrow{letter-spacing:.1em;text-transform:uppercase;line-height:1;color:var(--violet)!important;font-size:.58rem!important;font-weight:780!important}.demo-shell__title strong{letter-spacing:-.03em;font-size:1rem}.demo-shell__title span:not(.demo-shell__eyebrow){font-size:.69rem}.demo-shell__mode{gap:.35rem}.demo-shell__mode a,.demo-shell__mode button{border-radius:9px;min-height:34px;padding:.45rem .75rem;font-size:.78rem;font-weight:680}.demo-shell__mode button[aria-pressed=true]{box-shadow:0 7px 18px #6d28d93d}.demo-shell__workspace{grid-template-columns:minmax(19rem,22rem) minmax(0,1fr);gap:1rem}.demo-shell__inspector{background:#fffffff0;border-color:#c4b5fdad;border-radius:16px;gap:.85rem;padding:.85rem;box-shadow:0 14px 38px #4c1d9511}.demo-shell__stage{gap:1rem}.demo-shell__viewport,.renderer-viewport{border-color:#c4b5fdb3;border-radius:16px}.renderer-viewport{box-shadow:0 18px 42px #4c1d951f}.source-controls,.quality-controls,.selection-panel,.render-controls,.status-panel,.control-bar{border-color:#e7e2fb;border-radius:13px;box-shadow:0 8px 22px #4c1d950b}.inspector-card__header{border-bottom:1px solid #ede9fe;align-items:center;margin-bottom:.8rem;padding-bottom:.7rem}.inspector-card__header h2,.render-control-section h3{color:var(--text);letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;font-weight:780}.render-controls__tabs{background:var(--surface-soft);border:1px solid #e4def9;border-radius:9px;gap:.2rem;padding:.2rem}.render-controls__tabs button{background:0 0;border-color:#0000;border-radius:6px;min-height:26px;padding:.25rem .52rem;font-size:.68rem}.render-controls__tabs button[aria-pressed=true]{box-shadow:0 4px 11px #6d28d933}.render-controls__panel--global{gap:.75rem}.render-control-section{background:linear-gradient(145deg,#fffffffa,#faf9ff);border:1px solid #ebe7fa;border-radius:11px;padding:.8rem}.render-control-section h3{color:var(--violet);margin-bottom:.65rem}.render-controls__toggles{gap:.4rem}.render-control--toggle{border-radius:8px;min-height:2.15rem;padding:.38rem .48rem}.render-control--toggle:hover{background:var(--surface-soft);border-color:#c4b5fd}.render-control--toggle input{accent-color:var(--violet)}.render-control__label{font-size:.74rem;font-weight:660}.render-control__segments{background:#f7f5ff;border:1px solid #e4def9;border-radius:9px;gap:.2rem;padding:.2rem}.render-control__segments button{border-radius:6px;min-height:27px;font-size:.67rem}.render-control--slider input::-webkit-slider-runnable-track{border-radius:999px;height:5px}.render-control--slider input::-moz-range-track{border-radius:999px;height:5px}.render-control--slider input::-webkit-slider-thumb{width:17px;height:17px;margin-top:-6px}.render-control--slider input::-moz-range-thumb{width:17px;height:17px;margin-top:-6px}.timeline-view__legend{gap:.36rem}.timeline-view__chip{border-radius:999px;padding:.28rem .48rem;font-size:.68rem;box-shadow:0 2px 7px #4c1d950b}.control-bar{border-color:#c4b5fdad;padding:.8rem;box-shadow:0 12px 30px #4c1d9511}@media (width<=780px){.demo-shell__workspace{grid-template-columns:minmax(0,1fr)}.demo-shell__inspector{max-height:42dvh}}
