.is-premiere-panel .demo-main{gap:14px}.ppn-keys{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;display:flex}.ppn-keys .demo-hint{flex:20rem;min-height:1.55em}.ppn-alt{border:1px solid var(--color-line-strong);border-radius:var(--radius-chip);background:var(--color-raised);min-width:48px;height:32px;color:var(--color-fg-muted);font:500 12.5px/1 var(--font-mono);cursor:pointer;transition:transform var(--dur-el) var(--ease-smooth);border-bottom-width:3px;flex:none;padding:0 12px}.ppn-alt:active{transform:scale(.94)}.ppn-alt:focus-visible{outline:2px solid var(--tone,var(--color-accent-bright));outline-offset:2px}.ppn-alt[aria-pressed=true]{border-color:color-mix(in oklab, var(--tone,var(--color-accent-bright)) 60%, black);background:var(--tone,var(--color-accent-bright));color:var(--color-shell)}.ppn-alt[data-ring]:after{display:none}.ppro-body.is-top-row{flex-direction:column;height:auto}.ppro-top{border-bottom:1px solid var(--color-ppro-line);display:flex}.ppro-body.is-top-row .ppro-slot{border-right:1px solid var(--color-ppro-line);border-bottom:0;width:390px;height:auto;min-height:0;container-type:inline-size}.ppro-mon{background:var(--color-ppro-monitor);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:6px;min-width:0;padding:10px 12px;display:flex}.ppro-body.is-top-row .ppro-tl{height:auto}@container ppro not (min-width:840px){.ppro-body.is-top-row .ppro-tl{min-height:320px}}@media not (min-width:40rem){.ppro-mon{display:none}.ppro-body.is-top-row .ppro-slot{border-right:0;width:100%}.ppro-body.is-top-row .ppro-tl{min-height:0}}.is-premiere-panel[aria-hidden] .demo-hint{min-height:42px}.is-premiere-panel[aria-hidden] .ppro-slot{min-height:152px}.is-premiere-panel[aria-hidden] .ppro-tl{min-height:237px}@media not (min-width:40rem){.is-premiere-panel[aria-hidden] .demo-hint{min-height:4.7rem}.is-premiere-panel[aria-hidden] .ppro-slot{min-height:140px}}.ppn-mon-f{aspect-ratio:16/9;background:var(--color-black);width:100%;max-width:236px;box-shadow:0 0 0 1px var(--color-ppro-track);position:relative;overflow:hidden}.ppn-mon-f[class*=ppn-c-]{background:linear-gradient(160deg, var(--c), var(--color-black) 130%)}.ppn-mon-f svg{width:100%;height:100%;fill:var(--color-black-40);position:absolute;inset:0}.ppn-mon-f em{color:var(--color-ppro-monitor-offline);font:600 13px/1 var(--font-sans);letter-spacing:.02em;justify-content:center;align-items:center;font-style:normal;display:flex;position:absolute;inset:0}.ppn-mon-t{max-width:100%;color:var(--color-ppro-dim);font:400 10.5px/1 var(--font-mono);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ppn{--u:clamp(.45px, 100cqw / 390, 1px);box-sizing:border-box;gap:calc(8 * var(--u));min-height:calc(152 * var(--u));padding:calc(8 * var(--u));background:var(--color-panel-shell);color:var(--color-panel-fg);font:400 12.5px/1.35 var(--font-sans);-webkit-user-select:none;user-select:none;flex-direction:column;display:flex}.ppn-head{align-items:center;gap:calc(8 * var(--u));min-width:0;padding:calc(2 * var(--u)) calc(4 * var(--u)) 0;flex:none;display:flex}.ppn-tile{width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:calc(8 * var(--u));background:linear-gradient(160deg, var(--color-panel-mint-lite), var(--color-panel-mint-dark));box-shadow:inset 0 1px 0 #ffffff5c, 0 5px 15px -4px color-mix(in srgb, var(--color-panel-voice) 42%, transparent), 0 1px 1px #00000073;color:var(--color-hub-app-premiere-ink);font:500 calc(13 * var(--u)) / 1 var(--font-display);flex:none;justify-content:center;align-items:center;display:flex}.ppn-title{font:500 calc(15 * var(--u)) / 1.1 var(--font-display);letter-spacing:-.022em;white-space:nowrap;flex:none}.ppn-by{min-width:0;color:var(--color-panel-fg-dim);font:400 calc(9.5 * var(--u)) / 1 var(--font-mono);letter-spacing:.06em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;margin-top:2px;overflow:hidden}.ppn-sp{flex:1;min-width:0}.ppn-q{width:calc(26 * var(--u));height:calc(26 * var(--u));border:1px solid var(--color-panel-line);color:var(--color-panel-fg-muted);font:600 calc(12 * var(--u)) / 1 var(--font-sans);border-radius:50%;flex:none;justify-content:center;align-items:center;display:flex}.ppn-card{padding:calc(10 * var(--u));border-radius:var(--radius-el);background:linear-gradient(180deg, var(--color-panel-card-top), var(--color-panel-card-bottom)) padding-box, linear-gradient(152deg, color-mix(in srgb, var(--color-panel-voice) 30%, transparent), var(--color-panel-line) 28%, var(--color-panel-line-quiet)) border-box;box-shadow:inset 0 1px 0 var(--color-panel-line-quiet), inset 0 -1px 0 #00000040, 0 1px 1px #00000073;border:1px solid #0000;flex:none}.ppn-bar{gap:calc(8 * var(--u));display:flex}.ppn-btn{--t:var(--color-panel-voice);width:calc(52 * var(--u));height:calc(52 * var(--u));border:1px solid color-mix(in srgb, var(--t) 26%, transparent);border-radius:calc(12 * var(--u));background:linear-gradient(180deg, color-mix(in srgb, var(--t) 15%, transparent), color-mix(in srgb, var(--t) 5%, transparent));color:var(--t);cursor:pointer;transition:transform var(--dur-el) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth);flex:none;justify-content:center;align-items:center;padding:0;display:flex;position:relative}:is(.ppn-btn,.ppn-tip).is-ember{--t:var(--color-panel-ember)}:is(.ppn-btn,.ppn-tip).is-coral{--t:var(--color-panel-danger)}:is(.ppn-btn,.ppn-tip).is-mint{--t:var(--color-panel-voice)}:is(.ppn-btn,.ppn-tip).is-teal{--t:var(--color-panel-teal)}:is(.ppn-btn,.ppn-tip).is-violet{--t:var(--color-panel-violet)}:is(.ppn-btn,.ppn-tip).is-azure{--t:var(--color-panel-azure)}.ppn-btn:hover{border-color:color-mix(in srgb, var(--t) 44%, transparent);background:linear-gradient(180deg, color-mix(in srgb, var(--t) 24%, transparent), color-mix(in srgb, var(--t) 8%, transparent))}.ppn-btn:focus-visible{border-color:color-mix(in srgb, var(--t) 60%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--t) 28%, transparent);outline:none}.ppn-btn:active{transform:scale(.94)}.ppn-btn[aria-disabled=true]{opacity:.42;filter:saturate(.12);pointer-events:none}.ppn-btn svg{width:calc(22 * var(--u));height:calc(22 * var(--u));display:block}.ppn-altmark{top:calc(3 * var(--u));right:calc(3 * var(--u));border-radius:var(--radius-hair);background:var(--t);color:var(--color-panel-shell);font:600 calc(7.5 * var(--u)) / 1 var(--font-mono);letter-spacing:.04em;opacity:0;transition:opacity var(--dur-el) var(--ease-smooth);padding:1px 3px;position:absolute}.ppn.is-alt .ppn-altmark{opacity:1}.ppn-status{min-height:calc(13 * var(--u));color:var(--color-panel-fg-dim);font-size:calc(11.5 * var(--u));line-height:1.45}.ppn-status.is-ok{color:var(--color-panel-voice)}.ppn-status.is-error{color:var(--color-panel-danger)}.ppn-advice{border-left:2px solid var(--color-panel-ember);color:var(--color-panel-ember);font-size:var(--text-label);padding-left:6px;line-height:1.5}.ppn-tip{--t:var(--color-panel-voice);top:var(--tip-y,0);left:var(--tip-x,0);z-index:30;border:1px solid color-mix(in srgb, var(--t) 45%, transparent);border-left:2px solid var(--t);border-radius:var(--radius-mini);background:var(--color-panel-menu);width:max-content;min-width:130px;max-width:250px;color:var(--color-panel-fg-muted);font:400 10px/1.45 var(--font-sans);text-align:left;pointer-events:none;flex-direction:column;gap:3px;padding:7px 9px;animation:.1s linear both ppn-tip-in;display:flex;position:absolute;box-shadow:0 1px 1px #0000008c,0 10px 24px -12px #0009,0 44px 78px -34px #000c}.ppn-tip b{color:var(--color-panel-fg);font-size:var(--text-label);font-weight:600}.ppn-tip-alt{color:var(--t)}.ppn-tip ul{border-top:1px solid var(--color-panel-line);color:var(--color-panel-fg-dim);font-size:var(--text-label);flex-direction:column;gap:3px;margin:2px 0 0;padding:4px 0 0;list-style:none;display:flex}.ppn-tip li{padding-left:9px;position:relative}.ppn-tip li:before{content:"";background:color-mix(in srgb, var(--t) 75%, transparent);border-radius:50%;width:3px;height:3px;position:absolute;top:.6em;left:0}@keyframes ppn-tip-in{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.ppn-tip{animation:none}}.ppn-tl .gtl-tracks{overflow:hidden}.ppn-tl .gtl-lane{cursor:default;overflow:visible}.ppn-tl .gtl-row.is-new{animation:tl-clip-in var(--dur-base) var(--ease-smooth)}.ppn-rl{background:repeating-linear-gradient(to right, var(--color-ppro-tick) 0 1px, transparent 1px 12.5%) left bottom / 100% 8px no-repeat, repeating-linear-gradient(to right, var(--color-ppro-line) 0 1px, transparent 1px 3.125%) left bottom / 100% 4px no-repeat;cursor:pointer;touch-action:none}.ppn-clip{background:var(--c);cursor:pointer}.ppn-c-violet{--c:var(--color-ppro-label-violet)}.ppn-c-iris{--c:var(--color-ppro-label-iris)}.ppn-c-caribbean{--c:var(--color-ppro-label-caribbean)}.ppn-c-lavender{--c:var(--color-ppro-label-lavender)}.ppn-c-cerulean{--c:var(--color-ppro-label-cerulean)}.ppn-c-forest{--c:var(--color-ppro-label-forest)}.ppn-c-teal{--c:var(--color-ppro-label-teal)}.ppn-c-mango{--c:var(--color-ppro-label-mango)}.ppn-clip.is-sel{z-index:2;box-shadow:inset 0 0 0 1.5px var(--color-ppro-select), 0 0 0 1px #0006}.ppn-clip.is-off{filter:brightness(.42)saturate(.35)}.ppn-clip.is-offl{background:var(--color-ppro-offline-clip)}.ppn-clip.is-offl:after{content:"";background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-panel-danger) 28%, transparent) 0 4px, transparent 4px 8px);position:absolute;inset:0}.ppn-clip.is-offl .gtl-name{color:var(--color-ppro-offline-clip-ink)}.ppn-clip.is-nest{background:linear-gradient(180deg, var(--color-white-10), transparent 60%), var(--c)}.ppn-clip.is-new{animation:tl-clip-in var(--dur-base) var(--ease-smooth)}.ppn-fx{z-index:1;border-radius:var(--radius-hair);background:var(--color-ppro-fx);color:var(--color-ppro-frame);font:600 8px/10px var(--font-mono);padding:0 2px;position:absolute;top:3px;right:3px}.ppn-mk{top:2px;left:calc(var(--x) * 100%);z-index:2;color:var(--color-ppro-text);font:500 9px/1 var(--font-mono);white-space:nowrap;cursor:help;align-items:center;gap:3px;font-style:normal;display:flex;position:absolute;translate:-5px}.ppn-mk b{background:var(--color-ppro-marker);clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);width:10px;height:13px}.ppn-mk.is-new{animation:ppn-mk-drop var(--dur-slow) var(--ease-smooth) both}@keyframes ppn-mk-drop{0%{opacity:0;transform:translateY(-12px)}}.ppn-mkl{top:0;bottom:0;left:calc(var(--x) * 100%);border-left:1px dashed color-mix(in srgb, var(--color-ppro-marker) 70%, transparent);width:0;position:absolute}@media (prefers-reduced-motion:reduce){.ppn-clip.is-new,.ppn-tl .gtl-row.is-new,.ppn-mk.is-new{animation:none}.ppn-btn,.ppn-alt,.ppn-altmark{transition:none}}
.fx-cover{width:max(100%,1400px);height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-34%)perspective(1600px)rotateX(20deg)rotate(-5deg)scale(1.08)}.fxd{flex-direction:column;gap:14px;display:flex}.fx-body{grid-template-columns:minmax(0,1fr);display:grid}.fx-ec{border-right:1px solid var(--color-ppro-line);background:var(--color-ppro-panel);min-width:0;font:400 11.5px/1.3 var(--font-sans);color:var(--color-ppro-text);text-align:left;flex-direction:column;display:flex}@media (min-width:56.25rem){.fx-body{grid-template-columns:330px minmax(0,1fr)}}@media not (min-width:56.25rem){.fx-ec{border-right:0;border-top:1px solid var(--color-ppro-line);order:2}}.fx-ec-tab{border-bottom:1px solid var(--color-ppro-line);height:28px;font-size:var(--text-small);flex:none;justify-content:space-between;align-items:stretch;padding:0 10px;display:flex}.fx-ec-tab b{border-bottom:2px solid var(--color-ppro-playhead);color:var(--color-ppro-fx-tab);align-items:center;font-weight:500;display:flex}.fx-ec-tab span{color:var(--color-ppro-dim);align-items:center;display:flex}.fx-ec-src{border-bottom:1px solid var(--color-ppro-line);font-size:var(--text-label);color:var(--color-ppro-dim);white-space:nowrap;text-overflow:ellipsis;padding:7px 10px;overflow:hidden}.fx-ec-src b{color:var(--color-ppro-text);font-weight:500}.fx-ec-list{padding:4px 0 10px}.fx-sec{font-size:var(--text-label);color:var(--color-ppro-dim);padding:6px 10px 3px}.fx-row{white-space:nowrap;align-items:center;gap:7px;min-height:25px;padding:2px 10px;display:flex;position:relative}.fx-row.fx-lv1{padding-left:24px}.fx-row.fx-lv2{padding-left:38px}.fx-row>span:not(.fxb,.fx-v),.fx-row>label{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}label.fx-row{cursor:pointer}.fx-tw{width:10px;font:400 11px/1 var(--font-sans);color:var(--color-ppro-dim);flex:none;font-style:normal}.fxb{border-radius:var(--radius-hair);background:var(--color-ppro-fx);font:600 9px/12px var(--font-mono);color:var(--color-ppro-frame);flex:none;padding:0 3px}.fx-row.fx-on{background:var(--color-ppro-fx-row-on)}.fx-row.fx-grp{color:var(--color-ppro-fx-group)}.fx-v{min-width:34px;font:400 11.5px/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--color-ppro-fx-value);text-align:right;flex:none}.fx-row.fx-ro{color:var(--color-ppro-dim)}.fx-row.fx-ro .fx-v{color:var(--color-ppro-fx-value-ro)}.fx-row.fx-off{opacity:.42}.fx-cb{border:1px solid var(--color-ppro-fx-check);border-radius:var(--radius-hair);background:var(--color-ppro-frame);cursor:pointer;appearance:none;flex:none;place-items:center;width:14px;height:14px;margin:0;display:grid}.fx-cb:checked{border-color:var(--color-ppro-fx-value);background:var(--color-ppro-fx-value)}.fx-cb:checked:after{content:"";border:solid var(--color-ppro-fx-check-mark);border-width:0 0 2px 2px;width:7px;height:4px;translate:0 -1px;rotate:-45deg}.fx-cb:focus-visible,.fx-rng:focus-visible{outline:2px solid var(--color-accent-bright);outline-offset:2px}.fx-row.fx-sl{flex-wrap:wrap;row-gap:0}.fx-rng{cursor:pointer;appearance:none;background:0 0;flex-basis:100%;height:18px;margin:0}@media (pointer:coarse){.fx-rng{height:24px}}.fx-rng::-webkit-slider-runnable-track{background:var(--color-ppro-fx-track);height:2px}.fx-rng::-moz-range-track{background:var(--color-ppro-fx-track);height:2px}.fx-rng::-webkit-slider-thumb{background:var(--color-ppro-fx-thumb);appearance:none;border:0;border-radius:50%;width:10px;height:10px;margin-top:-4px}.fx-rng::-moz-range-thumb{background:var(--color-ppro-fx-thumb);border:0;border-radius:50%;width:10px;height:10px}.fx-right{background:var(--color-ppro-monitor);flex-direction:column;min-width:0;display:flex}.fx-mon{flex-direction:column;align-items:center;gap:8px;padding:14px 14px 10px;display:flex}.fx-mon-f{aspect-ratio:16/9;width:100%;max-width:560px;box-shadow:0 0 0 1px var(--color-ppro-track);background:#000;position:relative;overflow:hidden}.fx-mon-f svg{width:100%;height:100%;display:block;position:absolute;inset:0}.fx-mon-t{width:100%;max-width:560px;font:400 10.5px/1 var(--font-mono);color:var(--color-ppro-dim);white-space:nowrap;justify-content:space-between;gap:12px;display:flex}.fx-mon-t b{color:var(--color-ppro-playhead);font-weight:400}.fx-mon-t .fx-nw{color:var(--tone)}.fx-mon-t .fx-cp{color:var(--color-demo-fx-copy-text)}.fx-tl{border-top:1px solid var(--color-ppro-line);background:var(--color-ppro-panel);text-align:left}.fx-tl-head{border-bottom:1px solid var(--color-ppro-line);font-size:var(--text-small);color:var(--color-ppro-text);flex-wrap:wrap;align-items:center;gap:6px 14px;padding:6px 10px;display:flex}.fx-tc{font:400 12px/1 var(--font-mono);color:var(--color-ppro-playhead)}.fx-sp{align-items:center;gap:8px;margin-left:auto;display:flex}.fx-seg-l{font-size:var(--text-label);color:var(--color-ppro-dim)}.fx-seg{border-radius:var(--radius-mini);background:var(--color-ppro-frame);box-shadow:inset 0 0 0 1px var(--color-ppro-line);gap:2px;padding:2px;display:inline-flex}.fx-seg button{border-radius:var(--radius-mini);height:24px;font:500 11.5px/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--color-ppro-dim);cursor:pointer;background:0 0;border:0;padding:0 10px}.fx-seg button:hover{color:var(--color-ppro-select)}.fx-seg button[aria-pressed=true]{background:var(--color-ppro-fx-seg-on);color:var(--color-ppro-select)}.fx-seg button:focus-visible{outline:2px solid var(--color-accent-bright);outline-offset:2px}.fx-tracks{position:relative}.fx-tr{border-bottom:1px solid var(--color-ppro-line);background:var(--color-ppro-track);grid-template-columns:56px minmax(0,1fr);height:32px;display:grid}.fx-tr:nth-child(odd){background:var(--color-ppro-track-alt)}.fx-tr>b{border-right:1px solid var(--color-ppro-line);font:500 10.5px/1 var(--font-mono);color:var(--color-ppro-dim);justify-content:center;align-items:center;display:flex}.fx-tr.fx-rl{background:var(--color-ppro-panel);height:14px}.fx-ln{position:relative;overflow:hidden}.fx-rb{border-radius:var(--radius-hair);background:var(--color-ppro-fx-render);width:92%;height:4px;position:absolute;bottom:2px;left:4%}.fx-clip{border-radius:var(--radius-hair);background:var(--c);width:92%;position:absolute;top:3px;bottom:3px;left:4%;overflow:hidden;box-shadow:inset 0 0 0 1px #00000059}.fx-clip.fx-nest{background-image:linear-gradient(180deg, var(--color-white-13), transparent 60%)}.fx-cn{font:400 10.5px/1.2 var(--font-sans);color:var(--color-ppro-select);white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 1px #0009;position:absolute;top:50%;left:6px;right:30px;overflow:hidden;translate:0 -50%}.fx-clip .fxb{position:absolute;top:4px;right:4px}.fx-c-forest{--c:var(--color-ppro-label-forest)}.fx-c-caribbean{--c:var(--color-ppro-label-caribbean)}.fx-c-iris{--c:var(--color-ppro-label-iris)}.fx-c-cerulean{--c:var(--color-ppro-label-cerulean)}.fx-phw{z-index:3;pointer-events:none;position:absolute;inset:0 0 0 56px}.fx-ph{top:0;bottom:0;left:calc(4% + var(--ph,0) * 92%);background:var(--color-ppro-playhead);width:1px;position:absolute}.fx-ph:before{content:"";background:var(--color-ppro-playhead);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%);width:11px;height:10px;position:absolute;top:0;left:-5px}@media not (min-width:40rem){.fx-tr{grid-template-columns:40px minmax(0,1fr)}.fx-phw{left:40px}.fx-sp{margin-left:0}}
.try-wsf{text-align:left;flex-direction:column;align-self:stretch;gap:16px;margin-top:24px;display:flex;container-type:inline-size}.zd[data-mode=raw]{--zc:var(--color-level-high)}.zd[data-mode=wsf]{--zc:var(--tone,var(--color-accent-bright))}.zd-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.zd-modes{border-radius:var(--radius-full);max-width:100%;box-shadow:inset 0 0 0 1px var(--color-line-quiet);gap:6px;padding:4px;display:flex}.zd-mode{border-radius:var(--radius-full);height:36px;color:var(--color-fg-dim);white-space:nowrap;cursor:pointer;transition:color var(--dur-base) var(--ease-smooth), background-color var(--dur-base) var(--ease-smooth);background:0 0;border:0;flex:none;padding:0 16px}.zd-mode:hover{color:var(--color-fg)}.zd-mode:focus-visible,.zd-key:focus-visible{outline:2px solid var(--tone,var(--color-accent-bright));outline-offset:2px}.zd-mode[aria-pressed=true]{color:var(--color-fg);background:color-mix(in oklab, var(--tone,var(--color-accent-bright)) 20%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--tone,var(--color-accent-bright)) 50%, transparent)}.zd-mode.is-raw[aria-pressed=true]{background:color-mix(in oklab, var(--color-level-high) 18%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--color-level-high) 50%, transparent)}.zd-grid{grid-template-columns:minmax(0,1fr);gap:16px;display:grid}@container (min-width:868px){.zd-grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:stretch}}.zd-rv{border:1px solid var(--color-resolve-line);border-radius:var(--radius-chip);background:var(--color-resolve-frame);min-width:0;font-family:var(--font-sans);-webkit-user-select:none;user-select:none;flex-direction:column;display:flex;position:relative;overflow:hidden;box-shadow:0 1px 1px #00000080,0 10px 24px -12px #0009,0 44px 78px -34px #000c}.zd-top{border-bottom:1px solid var(--color-resolve-line);height:30px;font-size:var(--text-small);color:var(--color-resolve-text);flex:none;align-items:center;gap:10px;padding:0 12px;display:flex}.zd-top-tc{font:400 12px/1 var(--font-mono);margin-left:auto}.zd-body{background:var(--color-resolve-panel);--zd-names:56px;position:relative;overflow:hidden}.zd-ruler,.zd-row{grid-template-columns:var(--zd-names) minmax(0, 1fr);display:grid}.zd-ruler{border-bottom:1px solid var(--color-resolve-line);height:26px}.zd-rl{position:relative;overflow:hidden}.zd-tick{bottom:0;left:calc(var(--x) * 100%);background:var(--color-demo-wsf-tick);width:1px;height:8px;position:absolute}.zd-tick.is-minor{background:var(--color-demo-wsf-tick-minor);height:4px}.zd-tc{top:4px;left:calc(var(--x) * 100%);font:400 10px/1 var(--font-mono);color:var(--color-resolve-dim);white-space:nowrap;margin-left:4px;position:absolute}.zd-row{border-bottom:1px solid var(--color-resolve-line);background:var(--color-resolve-track);height:46px}.zd-row.is-alt{background:var(--color-resolve-track-alt)}.zd-row.is-titles{height:30px}.zd-row>b,.zd-ruler>b{border-right:1px solid var(--color-resolve-line);background:var(--color-resolve-frame);font:500 10.5px/1 var(--font-mono);color:var(--color-resolve-dim);justify-content:center;align-items:center;display:flex}.zd-lane{position:relative;overflow:hidden}.zd-clip{top:3px;bottom:3px;left:calc((var(--t0) - var(--s0)) / var(--v) * 100%);width:calc((var(--t1) - var(--t0)) / var(--v) * 100%);border-radius:var(--radius-hair);position:absolute;overflow:hidden;box-shadow:inset 0 0 0 1px #0000006b}.zd-clip.is-video{background:linear-gradient(180deg, color-mix(in srgb, var(--color-resolve-video), white 14%) 0 15px, var(--color-resolve-video) 15px)}.zd-clip.is-audio{background:color-mix(in srgb, var(--color-resolve-audio), black 16%)}.zd-clip.is-title{background:var(--color-resolve-title)}.zd-clip em{z-index:1;font:400 10.5px/1.2 var(--font-sans);color:#fff;text-overflow:ellipsis;text-shadow:0 1px 1px #0009;white-space:nowrap;font-style:normal;position:absolute;top:3px;left:5px;right:4px;overflow:hidden}.zd-wave{width:100%;height:72%;fill:var(--color-demo-wsf-wave);position:absolute;bottom:0;left:0}.zd-body.is-jolt-a .zd-clip{animation:zd-jolt-a .2s var(--ease-smooth)}.zd-body.is-jolt-b .zd-clip{animation:zd-jolt-b .2s var(--ease-smooth)}@keyframes zd-jolt-a{25%{transform:translate(-7px)}55%{transform:translate(5px)}80%{transform:translate(-2px)}}@keyframes zd-jolt-b{25%{transform:translate(-7px)}55%{transform:translate(5px)}80%{transform:translate(-2px)}}.zd-ph{top:0;bottom:0;left:calc(var(--zd-names) + (100% - var(--zd-names)) * var(--p));left:round(calc(var(--zd-names) + (100% - var(--zd-names)) * var(--p)), 1px);z-index:3;background:var(--color-resolve-playhead);pointer-events:none;width:1px;position:absolute}.zd-ph:before{content:"";background:var(--color-resolve-playhead);clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%);width:11px;height:12px;position:absolute;top:3px;left:-5px}.zd-click{z-index:4;border-radius:var(--radius-full);background:var(--color-shell);color:var(--zc);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--zc) 50%, transparent);opacity:0;pointer-events:none;padding:5px 9px;position:absolute;top:34px;right:10px}.zd-click.is-on-a{animation:zd-click-a .7s var(--ease-smooth)}.zd-click.is-on-b{animation:zd-click-b .7s var(--ease-smooth)}@keyframes zd-click-a{0%{opacity:0;transform:translateY(4px)}18%{opacity:1;transform:none}70%{opacity:1}to{opacity:0}}@keyframes zd-click-b{0%{opacity:0;transform:translateY(4px)}18%{opacity:1;transform:none}70%{opacity:1}to{opacity:0}}.zd-foot{border-top:1px solid var(--color-resolve-line);font-size:var(--text-small);color:var(--color-resolve-dim);flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 14px;display:flex}.zd-zb{border-radius:var(--radius-full);background:var(--color-white-7);flex:160px;height:8px;position:relative}.zd-zb-fill{border-radius:inherit;background:color-mix(in oklab, var(--zc) 50%, transparent);transform:scaleX(var(--z));transform-origin:0;position:absolute;inset:0}.zd-zb-tks{height:16px;position:absolute;inset:-4px 0 auto}.zd-zb-tks>i{border-radius:var(--radius-hair);background:var(--color-white-22);width:2px;height:16px;margin-left:-1px;position:absolute;top:0}.zd-zb-tks>i.is-on{background:var(--zc)}.zd-zb-tks.is-raw>i:first-child{left:15%}.zd-zb-tks.is-raw>i:nth-child(2){left:50%}.zd-zb-tks.is-raw>i:nth-child(3){left:95%}.zd-zb-tks.is-raw>i:nth-child(4){left:100%}.zd-zb-tks.is-wsf{justify-content:space-between;display:flex;inset:-4px -1px auto}.zd-zb-tks.is-wsf>i{flex:none;margin-left:0;position:static}.zd-zb-th{top:50%;left:calc(var(--z) * 100%);z-index:1;width:14px;height:14px;box-shadow:0 1px 3px #0009, 0 0 0 3px color-mix(in oklab, var(--zc) 45%, transparent);background:#fff;border-radius:50%;margin:-7px 0 0 -7px;position:absolute}.zd-count b{font:600 13px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--color-resolve-text)}.zd-pm{gap:6px;display:flex}.zd-key{border:1px solid var(--color-line-strong);border-radius:var(--radius-mini);background:var(--color-raised);min-width:30px;height:28px;font:500 15px/1 var(--font-mono);color:var(--color-fg);white-space:nowrap;cursor:pointer;touch-action:manipulation;border-bottom-width:2px;justify-content:center;align-items:center;padding:0 8px;display:inline-flex}.zd-key:hover{border-color:var(--tone,var(--color-accent-bright))}.zd-key:active{translate:0 1px}@media (pointer:coarse){.zd-key,.zd-mode{position:relative}.zd-key:after,.zd-mode:after{content:"";position:absolute;inset:-8px -3px}.zd-mode:after{inset:-4px 0}}.zd-graph{min-width:0;color:var(--color-fg-dim);flex-direction:column;gap:12px;margin:0;padding:18px 18px 16px;display:flex}.zd-svg{fill:currentColor;width:100%;max-width:520px;height:auto;font-family:var(--font-mono);font-size:var(--text-label);margin-inline:auto;display:block}.zd-grid-line{stroke:currentColor;stroke-opacity:.14}.zd-start-line{stroke:currentColor;stroke-opacity:.22;stroke-dasharray:2 3}.zd-ln{--c:var(--color-level-high);transition:opacity var(--dur-base) var(--ease-smooth)}.zd-ln.is-wsf{--c:var(--tone,var(--color-accent-bright))}.zd-ln.is-off{opacity:.28}.zd-ln-main{fill:none;stroke:var(--c);stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round}.zd-ln-edge{stroke:var(--c);stroke-width:1.5px;stroke-dasharray:3 4}.zd-ln-dot{fill:var(--c)}.zd-dot{fill:var(--zc);stroke:var(--color-surface);stroke-width:2.5px}.zd-leg{color:var(--color-fg-muted);flex-wrap:wrap;gap:6px 18px;display:flex}.zd-leg span{align-items:center;gap:8px;display:inline-flex}.zd-leg i{border-radius:var(--radius-hair);background:var(--color-level-high);width:18px;height:3px}.zd-leg .is-wsf i{background:var(--tone,var(--color-accent-bright))}.zd-hint{text-align:center;text-wrap:balance;min-height:1.55em;color:var(--color-fg-muted);margin:0}@media not (min-width:40rem){.zd-body{--zd-names:40px}.zd-row{height:40px}.zd-row.is-titles{height:26px}.zd-hint{min-height:3.1em}}@media (prefers-reduced-motion:reduce){.zd-body .zd-clip,.zd-click,.zd-ln,.zd-mode{transition:none;animation:none}}
.try-fx{text-align:left;align-self:stretch;margin-top:24px}.rt-rib{justify-content:center;gap:4px;padding:0 14px 8px;display:flex}.rt-cell{aspect-ratio:16/10;border-radius:var(--radius-hair);background:var(--color-demo-fx-cell);min-width:0;max-width:64px;box-shadow:inset 0 0 0 1px var(--color-demo-fx-cell-line);flex:1 1 0;position:relative;overflow:hidden}.rt-cell svg{width:100%;height:100%;display:block;position:absolute;inset:0}.rt-cell.rt-src{box-shadow:inset 0 0 0 1.5px var(--color-demo-fx-ball)}.rt-cell.rt-cp:after{content:"";background:repeating-linear-gradient(135deg, var(--color-demo-fx-copy) 0 3px, transparent 3px 6px);position:absolute;inset:0}.rt-cell.rt-nw{box-shadow:inset 0 0 0 1.5px var(--tone)}.rt-cell.rt-cur{outline:2px solid var(--color-ppro-playhead);outline-offset:1px}.rt-cell em{z-index:1;font:600 8.5px/1 var(--font-mono);color:var(--color-demo-fx-shine);text-shadow:0 1px 1px #000;font-style:normal;position:absolute;top:2px;left:3px}.rt-leg{font:400 10.5px/1.3 var(--font-sans);color:var(--color-ppro-dim);flex-wrap:wrap;justify-content:center;gap:4px 16px;padding:0 14px 14px;display:flex}.rt-leg span{align-items:center;gap:6px;display:inline-flex}.rt-leg i{border-radius:var(--radius-hair);background:var(--color-demo-fx-cell);width:12px;height:8px}.rt-leg i.rt-src{box-shadow:inset 0 0 0 1.5px var(--color-demo-fx-ball)}.rt-leg i.rt-cp{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-panel-danger) 60%, transparent) 0 2px, var(--color-demo-fx-cell) 2px 4px)}.rt-leg i.rt-nw{box-shadow:inset 0 0 0 1.5px var(--tone)}
.fx-sel-w{flex:none;min-width:0;max-width:168px;display:flex;position:relative}.fx-sel-w:after{content:"";background:var(--color-ppro-dim);clip-path:polygon(0 0,100% 0,50% 100%);pointer-events:none;width:8px;height:5px;position:absolute;top:50%;right:6px;translate:0 -50%}.fx-sel{border:1px solid var(--color-ppro-window-line);border-radius:var(--radius-hair);background:var(--color-ppro-frame);min-width:0;max-width:168px;height:20px;font:400 11.5px/1 var(--font-sans);color:var(--color-ppro-fx-value);white-space:nowrap;text-overflow:ellipsis;cursor:pointer;appearance:none;padding:0 18px 0 6px;overflow:hidden}@media (pointer:coarse){.fx-sel{height:24px}}.fx-sel option{background:var(--color-ppro-panel);color:var(--color-ppro-fx-tab)}.fx-sel:focus-visible{outline:2px solid var(--color-accent-bright);outline-offset:2px}.cf-none{opacity:.35}.cf-strip{justify-content:center;padding:0 14px 8px;display:flex}.cf-strip svg{width:100%;max-width:560px;height:auto;color:var(--tone);display:block}.cf-s-c1{fill:var(--color-ppro-label-iris)}.cf-s-c2{fill:var(--color-ppro-label-cerulean)}.cf-s-tr{fill:color-mix(in srgb, var(--color-demo-fx-shine) 4%, transparent);stroke:var(--color-ppro-tick)}.cf-s-jp{stroke:var(--color-panel-danger)}.cf-s-ph{stroke:var(--color-ppro-playhead)}.cf-s-dot{stroke:var(--color-ppro-monitor)}.cf-leg i.cf-c1{background:var(--color-ppro-label-iris)}.cf-leg i.cf-c2{background:var(--color-ppro-label-cerulean)}.cf-leg i.cf-mo{background:color-mix(in oklab, var(--tone) 30%, transparent);box-shadow:inset 0 0 0 1.5px var(--tone)}.cf-leg i.cf-jp{border-left:2px dashed var(--color-panel-danger);background:0 0;border-radius:0;width:6px}.fx-clip.cf-c1{width:46%}.fx-clip.cf-c2{width:46%;left:50%}.fx-rb.cf-rb{width:30.67%;left:34.67%}.cf-trn{z-index:1;border-radius:var(--radius-hair);background:linear-gradient(to top right, var(--color-ppro-fx-trn-hi) 49.6%, var(--color-ppro-fx-trn-lo) 50.4%);width:30.67%;font:500 10px/1 var(--font-sans);color:var(--color-ppro-fx-trn-text);white-space:nowrap;justify-content:center;align-items:center;display:flex;position:absolute;top:5px;bottom:5px;left:34.67%;overflow:hidden;box-shadow:inset 0 0 0 1px #00000073}.fx-mon-t:has(>.cf-ft){flex-wrap:wrap;row-gap:4px}.cf-ft{margin-left:auto}@media not (min-width:31rem){.try-fx:has(.cf-strip) .demo-hint{min-height:5.5rem}}@media not (min-width:28rem){.cf-leg{align-content:start;min-height:calc(2lh + 18px)}}@media not (min-width:24rem){.try-fx:has(.cf-strip) .demo-hint{min-height:6.75rem}.fx-mon-t:has(>.cf-ft){align-content:start;min-height:calc(2lh + 4px)}}@media not (min-width:22.5rem){.try-fx:has(.cf-strip) .demo-hint{min-height:8.25rem}.cf-leg{min-height:calc(3lh + 22px)}}