@property --film-extend{syntax:"<length>";inherits:true;initial-value:0}@property --film-corner-in{syntax:"<number>";inherits:true;initial-value:1}@property --film-corner-hover{syntax:"<number>";inherits:true;initial-value:0}@property --film-controls-scroll{syntax:"<number>";inherits:true;initial-value:1}.film{--fade:1;--sub:0;--icon-x:50%;--icon-y:42%;--icon:160px;--film-ring-from:#39ffe7;--film-ring-to:#4f10d6;--film-controls-bottom:calc(var(--site-bezel-size) + 20px);--film-controls-height:52px;--film-controls-width:400px;isolation:isolate;height:calc(100svh - var(--header-height) - var(--site-bezel-size) + var(--film-extend));min-height:calc(560px + var(--film-extend));color:#fff;border-radius:var(--site-corner-size);corner-shape:superellipse(2);-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--film-extend)), #000000bf calc(100% - var(--film-extend) * .75), #0006 calc(100% - var(--film-extend) * .5), #0000001f calc(100% - var(--film-extend) * .25), transparent);mask-image:linear-gradient(to bottom, #000 calc(100% - var(--film-extend)), #000000bf calc(100% - var(--film-extend) * .75), #0006 calc(100% - var(--film-extend) * .5), #0000001f calc(100% - var(--film-extend) * .25), transparent);background:#000;position:relative;overflow:hidden}@supports (clip-path:shape(from 0 0, line to 1px 1px)) and (corner-shape:superellipse(2)){@media (min-width:721px){:where(html:not([data-shapes=off])) .film{height:calc(100svh + var(--film-extend));margin-top:calc(-1 * var(--header-height));border-radius:0}}}.film-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.film[data-entrance=true]:not([data-ready=true]) .film-canvas,.film[data-entrance=true]:not([data-ready=true]) .film-copy{opacity:0}@media (prefers-reduced-motion:no-preference){.film[data-entrance=true][data-ready=true] .film-canvas{animation:1.1s cubic-bezier(.22,.61,.36,1) both film-arrive-picture}.film[data-entrance=true][data-ready=true] .film-copy{animation:.8s cubic-bezier(.22,.61,.36,1) .25s both film-arrive-copy}}@keyframes film-arrive-picture{0%{opacity:0;scale:1.04}}@keyframes film-arrive-copy{0%{opacity:0;translate:0 -14px}50%{opacity:0}}@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){.film .film-canvas{animation:ease-in-out both film-leave-picture;animation-timeline:scroll(root);animation-range:0 75svh}.film .film-copy{animation:ease-in-out both film-leave-copy;animation-timeline:scroll(root);animation-range:0 55svh}.film[data-entrance=true][data-ready=true] .film-canvas{animation:1.1s cubic-bezier(.22,.61,.36,1) both film-arrive-picture,ease-in-out both film-leave-picture;animation-timeline:auto,scroll(root);animation-range:normal,0 75svh}.film[data-entrance=true][data-ready=true] .film-copy{animation:.8s cubic-bezier(.22,.61,.36,1) .25s both film-arrive-copy,ease-in-out both film-leave-copy;animation-timeline:auto,scroll(root);animation-range:normal,0 55svh}.film .film-controls,.film .film-controls-settings{animation:ease-in-out both film-leave-controls;animation-timeline:scroll(root);animation-range:0 35svh}.film .film-corner{animation:ease-in-out both film-leave-corner;animation-timeline:scroll(root);animation-range:0 35svh}}}@keyframes film-leave-controls{to{opacity:0;visibility:hidden}}@keyframes film-leave-corner{to{--film-controls-scroll:0;visibility:hidden}}@keyframes film-leave-picture{to{opacity:0}}@keyframes film-leave-copy{to{opacity:0}}.film-copy{top:calc(var(--icon-y) + var(--icon) / 2 + var(--icon) * .24);z-index:1;text-align:center;mix-blend-mode:plus-lighter;flex-direction:column;align-items:center;padding:0 16px;display:flex;position:absolute;left:0;right:0}.film .film-heading{min-height:1.15em;font-size:clamp(24px, calc(var(--icon) * .33), 44px);letter-spacing:-.035em;color:#fff;margin:0;font-weight:600;line-height:1.15}.film-caret{vertical-align:-.1em;background:linear-gradient(180deg, var(--film-ring-from), var(--film-ring-to));opacity:0;border-radius:999px;width:.07em;height:.92em;margin-left:.06em;display:inline-block}.film-caret[data-visible=true]{opacity:1;animation:1.05s step-end infinite film-caret}.film-subheading{max-width:420px;font-size:clamp(14px, calc(var(--icon) * .12), 16px);color:#ffffff8c;opacity:var(--sub);transform:translateY(calc((1 - var(--sub)) * 8px));margin-top:10px;line-height:1.45}.film-replay{font:inherit;color:#ffffffbf;border-radius:var(--radii-full);cursor:pointer;opacity:0;pointer-events:none;background:#ffffff0f;border:0;align-items:center;gap:8px;margin-top:28px;padding:9px 10px 9px 16px;font-size:13.5px;font-weight:500;transition:opacity .5s,transform .5s,background .15s,color .15s;display:inline-flex;transform:translateY(6px)}.film[data-done=true] .film-replay{opacity:1;pointer-events:auto;transform:none}.film-replay:hover{color:#fff;background:#ffffff1a}.film-replay kbd{color:#ffffffb3;corner-shape:superellipse(2);width:26px;height:22px;box-shadow:none;background:#ffffff14;border:0;border-radius:10px;flex:none;place-items:center;margin-left:4px;padding:0;line-height:0;transition:translate .15s;display:grid}.film-replay kbd svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;width:12px;height:12px}.film-replay:hover kbd{color:#fff}.film-replay:active kbd{transition-duration:60ms;translate:0 1px}.film-credits{z-index:3;aspect-ratio:110/22;color:#ffffffe6;visibility:hidden;pointer-events:none;width:auto;height:clamp(17px,1.9vw,26px);position:absolute;top:30%;left:50%;overflow:visible;translate:-50% -50%}.film-vignette{z-index:2;pointer-events:none;background:radial-gradient(80% 75%,#0000 60%,#00000080 100%);position:absolute;inset:0}.film-fade{z-index:3;opacity:var(--fade);pointer-events:none;background:#000;position:absolute;inset:0}.film-controls-dock{--film-head:0%;--film-controls-inset:calc(var(--site-bezel-size) + 20px);--film-dial-height:40px;--film-dial-pad:6px;--film-dial-radius:calc(var(--film-dial-height) / 2 - 4px);--film-dial-shape:superellipse(1.3);--film-dial-fill:#ffffff14;--film-controls-gap:8px;right:var(--film-controls-inset);bottom:calc(var(--film-controls-bottom) + var(--film-extend));left:var(--film-controls-inset);z-index:4;gap:var(--film-controls-gap);max-width:var(--film-controls-width);margin:0 auto;animation:.35s cubic-bezier(.22,.61,.36,1) both film-controls-in;display:flex;position:absolute}.film-controls,.film-controls-settings,.film-corner{color:#ffffffe6;border-radius:calc(var(--film-dial-radius) + var(--film-dial-pad));corner-shape:var(--film-dial-shape);-webkit-backdrop-filter:blur(40px)saturate(1.8)brightness(1.05);background:linear-gradient(#ffffff12,#ffffff03),#18181c1f;box-shadow:inset 0 1px #ffffff29,inset 0 -1px #0000002e,0 16px 40px #0000004d}.film-controls{align-items:center;gap:var(--film-dial-pad);min-width:0;padding:var(--film-dial-pad);font-variant-numeric:tabular-nums;flex:1;font-size:12px;display:flex}.film-controls-settings{width:var(--film-controls-height);height:var(--film-controls-height);cursor:pointer;border:0;flex:none;place-items:center;padding:0;transition:color .15s,background .15s,scale .15s;display:grid}.film-controls-settings:hover{color:#fff;background:linear-gradient(#ffffff1f,#ffffff0a),#18181c1f}.film-controls-settings:active{scale:.96}.film-controls-settings:focus-visible{outline-offset:2px;outline:2px solid #fff9}.film-controls-settings[data-active]{color:#000;background:#ffffffeb}.film-controls-button,.film-controls-track,.film-controls-rates{height:var(--film-dial-height);background:var(--film-dial-fill);border-radius:var(--film-dial-radius);corner-shape:var(--film-dial-shape);flex:none;box-shadow:inset 0 1px #ffffff0d}.film-controls-button{width:var(--film-dial-height);font:inherit;color:#fffc;cursor:pointer;border:0;place-items:center;padding:0;transition:color .15s,background .15s,scale .15s;display:grid}.film-controls-button[data-primary]{color:#fff}.film-controls-button:hover{color:#fff;background:#ffffff29}.film-controls-button:active{scale:.94}.film-controls-button:focus-visible,.film-controls-rate:focus-visible{outline-offset:2px;outline:2px solid #fff9}.film-controls-track{flex:auto;min-width:0;position:relative;overflow:hidden}.film-controls-track:after{content:"";width:var(--film-head);pointer-events:none;background:#ffffff24;transition:background .15s;position:absolute;inset:0 auto 0 0}.film-controls-track:hover:after{background:#fff3}.film-controls-track:before{content:"";top:50%;left:var(--film-head);z-index:1;opacity:0;pointer-events:none;background:#ffffffd9;border-radius:2px;width:3px;height:45%;transition:opacity .15s;position:absolute;translate:-6px -50%}.film-controls-track[data-detailed]:before,.film-controls-track:hover:before{opacity:1}.film-controls-track:has(input:focus-visible):before{opacity:1}.film-controls-label,.film-controls-readout{z-index:1;white-space:nowrap;pointer-events:none;position:absolute;top:50%;translate:0 -50%}.film-controls-label{text-overflow:ellipsis;color:#ffffffd9;max-width:calc(100% - 150px);font-size:13px;font-weight:500;left:14px;overflow:hidden}.film-controls-readout{color:#fffc;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;right:14px}.film-controls-dim{color:#fff6}.film-controls-beat{pointer-events:none;background:#ffffff38;border-radius:1px;height:2px;position:absolute}.film-controls-track input{z-index:2;opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;position:absolute;inset:0}.film-controls-rates{--film-rates-pad:4px;padding:var(--film-rates-pad);gap:2px;display:flex}.film-controls-rate{min-width:40px;height:100%;font:inherit;color:#fff9;border-radius:calc(var(--film-dial-radius) - var(--film-rates-pad));corner-shape:var(--film-dial-shape);cursor:pointer;background:0 0;border:0;padding:0 8px;font-weight:500;transition:color .15s,background .15s}.film-controls-rate:hover{color:#fff}.film-controls-rate[data-active=true]{color:#000;background:#ffffffeb;box-shadow:0 1px 4px #0000004d}.film-corner{--film-dial-height:36px;--film-dial-pad:5px;--film-dial-radius:calc(var(--film-dial-height) / 2 - 4px);--film-dial-shape:superellipse(1.3);--film-dial-fill:#ffffff14;--film-corner-show:calc(var(--film-corner-in) * var(--film-corner-hover));--film-corner-open:calc(var(--film-corner-show) * var(--film-controls-scroll));right:calc(var(--site-bezel-size) + 20px);bottom:calc(var(--site-bezel-size) + 20px + var(--film-extend));z-index:4;gap:var(--film-dial-pad);padding:var(--film-dial-pad);opacity:var(--film-corner-open);translate:0 calc((1 - var(--film-corner-show)) * 8px);scale:calc(.97 + var(--film-corner-show) * .03);pointer-events:none;font-size:12px;transition:--film-corner-in .5s cubic-bezier(.22,.61,.36,1) 1.2s,--film-corner-hover .4s cubic-bezier(.64,0,.78,0),visibility;display:flex;position:absolute}.film[data-pointer=lower] .film-corner{--film-corner-hover:1;pointer-events:auto;transition:--film-corner-in .5s cubic-bezier(.22,.61,.36,1) 1.2s,--film-corner-hover .3s cubic-bezier(.22,.61,.36,1),visibility}.film-corner:has(:focus-visible){--film-corner-hover:1;pointer-events:auto;transition:--film-corner-in .5s cubic-bezier(.22,.61,.36,1) 1.2s,--film-corner-hover .3s cubic-bezier(.22,.61,.36,1),visibility}@starting-style{.film-corner[data-shown]{--film-corner-in:0}}.film .film-corner:not([data-shown]){--film-corner-in:0;visibility:hidden;transition:--film-corner-in .3s cubic-bezier(.64,0,.78,0),visibility 0s linear .3s}.film-panel{--film-head:0%;--film-controls-inset:calc(var(--site-bezel-size) + 20px);--film-dial-height:36px;--film-dial-pad:6px;--film-dial-radius:calc(var(--film-dial-height) / 2 - 4px);--film-dial-shape:superellipse(1.3);--film-dial-fill:#ffffff14;right:var(--film-controls-inset);z-index:4;color:#ffffffe6;-webkit-backdrop-filter:blur(40px)saturate(1.8)brightness(1.05);--film-panel-top:calc(var(--header-height) + 16px);top:var(--film-panel-top);width:316px;max-height:calc(100% - var(--film-extend) - var(--film-panel-top) - var(--film-controls-bottom) - var(--film-controls-height) - 12px);font-variant-numeric:tabular-nums;border-radius:calc(var(--film-dial-radius) + 2 * var(--film-dial-pad));corner-shape:var(--film-dial-shape);background:linear-gradient(#ffffff12,#ffffff03),#18181c52;flex-direction:column;font-size:12px;animation:.35s cubic-bezier(.22,.61,.36,1) both film-controls-in;display:flex;position:absolute;box-shadow:inset 0 1px #ffffff29,inset 0 -1px #0000002e,0 16px 40px #0000004d}.film-panel-header{flex:none;align-items:center;gap:2px;padding:10px 10px 6px 16px;display:flex}.film-panel-title{letter-spacing:-.01em;flex:1;font-size:13px;font-weight:600}.film-panel-icon{color:#fff9;corner-shape:var(--film-dial-shape);cursor:pointer;background:0 0;border:0;border-radius:9px;flex:none;place-items:center;width:28px;height:28px;padding:0;transition:color .15s,background .15s;display:grid}.film-panel-icon:hover{color:#fff;background:#ffffff1a}.film-panel-scroll{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#fff3 transparent;flex:0 auto;min-height:0;padding:0 10px 10px;overflow-y:auto}.film-panel-section{gap:var(--film-dial-pad);flex-direction:column;padding:8px 0;display:flex}.film-panel-section+.film-panel-section{border-top:1px solid #ffffff12}.film-panel-row{gap:var(--film-dial-pad);display:flex}.film-panel-row .film-controls-rates{flex:1;justify-content:stretch}.film-panel-row .film-controls-rate{flex:1;min-width:0;padding:0 4px}.film-panel-beats{flex-wrap:wrap;gap:4px;display:flex}.film-panel-chip{font:inherit;color:#ffffffb3;cursor:pointer;background:#ffffff0f;border:0;border-radius:999px;padding:4px 9px;font-size:11.5px;transition:color .15s,background .15s}.film-panel-chip:hover{color:#fff;background:#ffffff24}.film-panel-section-head{justify-content:space-between;align-items:center;min-height:28px;display:flex}.film-panel-section-title{font:inherit;color:#ffffffd9;cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;padding:4px 6px 4px 2px;font-size:12px;font-weight:600;display:inline-flex}.film-panel-chevron{color:#ffffff73;transition:rotate .15s;rotate:-90deg}.film-panel-section-title[aria-expanded=true] .film-panel-chevron{rotate:none}.film-panel-dot{background:var(--film-ring-from);border-radius:50%;width:6px;height:6px}.film-panel-fields{flex-direction:column;gap:4px;display:flex}.film-panel-dial{background:var(--film-dial-fill);corner-shape:var(--film-dial-shape);border-radius:12px;align-items:center;gap:8px;height:32px;padding:0 12px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0d}.film-panel-dial:after{content:"";width:var(--film-value,0%);pointer-events:none;background:#ffffff1f;transition:background .15s;position:absolute;inset:0 auto 0 0}.film-panel-dial:hover:after{background:#ffffff2e}.film-panel-dial:has(input:focus-visible){outline-offset:1px;outline:2px solid #fff9}.film-panel-dial-label,.film-panel-dial-value,.film-panel-swatch{z-index:1;pointer-events:none;position:relative}.film-panel-dial-label{white-space:nowrap;text-overflow:ellipsis;color:#fffc;flex:1;min-width:0;font-weight:500;overflow:hidden}.film-panel-dial[data-changed] .film-panel-dial-label:after{content:"";vertical-align:.15em;background:var(--film-ring-from);border-radius:50%;width:5px;height:5px;margin-left:6px;display:inline-block}.film-panel-dial-value{color:#ffffffbf;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}.film-panel-dial input{z-index:2;opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;position:absolute;inset:0}.film-panel-dial[data-kind=color] input{cursor:pointer}.film-panel-swatch{border-radius:5px;width:16px;height:16px;box-shadow:inset 0 0 0 1px #ffffff40}.film-panel-action{height:32px;font:inherit;color:#ffffffd9;background:var(--film-dial-fill);corner-shape:var(--film-dial-shape);cursor:pointer;border:0;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:6px;padding:0 10px;font-weight:500;transition:color .15s,background .15s;display:inline-flex}.film-panel-action:hover,.film-panel-action[data-active]{color:#fff;background:#ffffff29}.film-panel-action[data-primary]{color:#000;background:#ffffffeb;flex:none;align-self:flex-end}.film-panel-action:disabled{opacity:.4;cursor:default}.film-panel-paste{gap:var(--film-dial-pad);flex-direction:column;display:flex}.film-panel-paste textarea{color:#ffffffe6;corner-shape:var(--film-dial-shape);resize:vertical;background:#0000004d;border:0;border-radius:12px;outline:none;width:100%;min-height:140px;padding:10px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5}.film-panel-paste textarea:focus-visible{box-shadow:0 0 0 2px #fff6}.film-panel-status{color:#ffffffa6;margin:0;padding:0 4px;font-size:11.5px;line-height:1.4}.film-panel-status[data-error]{color:#ffb4a8}.film-panel :is(button,input):focus-visible{outline-offset:2px;outline:2px solid #fff9}@media (max-width:720px){.film-panel{top:auto;bottom:calc(var(--film-controls-bottom) + var(--film-extend) + var(--film-controls-height) + 12px);left:var(--film-controls-inset);width:auto;max-height:56%}}@keyframes film-controls-in{0%{opacity:0;translate:0 8px;scale:.97}}.film-menu .popover-item{outline:none}.film-menu .popover-item:focus-visible:not([data-active=true]){color:var(--color-text-1);background:color-mix(in srgb, var(--color-text-1) 5%, transparent)}.film[data-failed=true]{--fade:0;--sub:1;--icon-x:50%;--icon-y:40%}.film-fallback-icon{top:var(--icon-y);left:var(--icon-x);width:var(--icon);height:var(--icon);position:absolute;transform:translate(-50%,-50%)}@keyframes film-caret{0%,to{opacity:1}50%{opacity:0}}@media (max-width:720px){.film{border-radius:0;min-height:520px}}@media (prefers-reduced-motion:reduce){.film-caret[data-visible=true],.film-controls-dock,.film-panel{animation:none}.film-corner{translate:none;scale:none}}