@layer reset{*,*:before,*:after{box-sizing:border-box}*{margin:0;scrollbar-color:var(--border) transparent;scrollbar-width:thin}@media(prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}body{isolation:isolate}ul{padding:0;list-style:disc inside}dialog{max-width:none;max-height:none;background:transparent;border:none}button{all:unset;touch-action:manipulation;-webkit-user-select:none;user-select:none}fieldset{all:unset;display:block}}:root{--background: light-dark(oklch(100% 0 0), oklch(2% 0 0));--color: light-dark(oklch(2% 0 0), oklch(98% 0 0));--color-light: oklch(from var(--color) l c h / .5);--border: light-dark(var(--gray-200), var(--gray-50));--border-75: oklch(from var(--border) l c h / .25);--ring: oklch(from var(--color) l c h / .15);--accent: color-mix(in oklch, var(--background) 85%, var(--color));--text-accent: oklch(from var(--color) l c h / .8);--primary: light-dark(oklch(61% .23 253.3), oklch(62% .23 252.87));--primary-25: oklch(from var(--primary) l c h / .25);--primary-50: oklch(from var(--primary) l c h / .5);--primary-75: oklch(from var(--primary) l c h / .75);--primary-lighter: light-dark(oklch(.7 .18 250.78), oklch(.7 .18 250.78));--destructive: light-dark(oklch(.65 .3 28.96), oklch(.65 .29 28.41));--destructive-lighter: light-dark(oklch(.69 .25 24.91), oklch(.69 .25 24.91));--destructive-25: oklch(from var(--destructive) l c h / .25);--destructive-50: oklch(from var(--destructive) l c h / .5);--destructive-100: oklch(from var(--destructive) var(--lightness-100) c h);--destructive-200: oklch(from var(--destructive) var(--lightness-200) c h);--destructive-300: oklch(from var(--destructive) var(--lightness-300) c h);--destructive-400: oklch(from var(--destructive) var(--lightness-400) c h);--destructive-500: oklch(from var(--destructive) var(--lightness-500) c h);--destructive-accent: color-mix(in oklch, var(--destructive) 80%, var(--background));--destructive-foreground: light-dark( color-mix(in oklch, var(--destructive) 80%, var(--color)), color-mix(in oklch, var(--destructive) 40%, var(--color)) );--outline: color-mix(in srgb, var(--color) 50%, var(--background));--overlay-background: oklch(from var(--color) l c h / .15);--screen-s: 24rem ;--max-w: 75rem ;--sidebar-width: 200px;--prose-width: 32rem ;--wide-width: 46rem ;--sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;--serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;--text-2xl: 2.25rem;--text-xl: 1.75rem;--text-lg: 1.25rem;--text: 1rem;--text-sm: .875rem;--text-xs: .75rem;--text-xxs: .625rem;--top-blur-height: 100px;--button-transition-delay: 70ms;color-scheme:light dark;view-transition-name:root;--mask-dark: rgb(0% 0% 0% / 0) 0%, rgb(0% 0% 0% / .00390625) 6.25%, rgb(0% 0% 0% / .015625) 12.5%, rgb(0% 0% 0% / .03515625) 18.75%, rgb(0% 0% 0% / .0625) 25%, rgb(0% 0% 0% / .09765625) 31.25%, rgb(0% 0% 0% / .140625) 37.5%, rgb(0% 0% 0% / .19140625) 43.75%, rgb(0% 0% 0% / .25) 50%, rgb(0% 0% 0% / .31640625) 56.25%, rgb(0% 0% 0% / .390625) 62.5%, rgb(0% 0% 0% / .47265625) 68.75%, rgb(0% 0% 0% / .5625) 75%, rgb(0% 0% 0% / .66015625) 81.25%, rgb(0% 0% 0% / .765625) 87.5%, rgb(0% 0% 0% / .87890625) 93.75%, rgb(0% 0% 0%) 100%;--mask-light: rgb(100% 100% 100% / 0) 0%, rgb(100% 100% 100% / .00390625) 6.25%, rgb(100% 100% 100% / .015625) 12.5%, rgb(100% 100% 100% / .03515625) 18.75%, rgb(100% 100% 100% / .0625) 25%, rgb(100% 100% 100% / .09765625) 31.25%, rgb(100% 100% 100% / .140625) 37.5%, rgb(100% 100% 100% / .19140625) 43.75%, rgb(100% 100% 100% / .25) 50%, rgb(100% 100% 100% / .31640625) 56.25%, rgb(100% 100% 100% / .390625) 62.5%, rgb(100% 100% 100% / .47265625) 68.75%, rgb(100% 100% 100% / .5625) 75%, rgb(100% 100% 100% / .66015625) 81.25%, rgb(100% 100% 100% / .765625) 87.5%, rgb(100% 100% 100% / .87890625) 93.75%, rgb(100% 100% 100%) 100%;--mask: light-dark(var(--mask-light), var(--mask-dark))}@view-transition{:root{navigation:auto}}:root{--gray: oklch(.4 0 0);--tint: var(--primary);--red: oklch(.51 .23 29.99);--orange: oklch(.7 .150492 54);--yellow: oklch(.8 .128516 73.8032);--turquoise: oklch(.5 .081146 205.114);--cyan: oklch(.4 .142107 243.926);--green: oklch(.5 .121276 155.372);--blue: oklch(.5 .22049 266.315);--indigo: oklch(1 .25049 284.23);--purple: oklch(.7 .223324 302);--pink: oklch(.6 .177717 347.813);--tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);--tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);--tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);--tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);--tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);--tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);--tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);--tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);--tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);--tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);--tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);--tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);--tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);--tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);--tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);--tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);--gray-100: oklch(from var(--gray) var(--lightness-100) c h);--gray-200: oklch(from var(--gray) var(--lightness-200) c h);--gray-300: oklch(from var(--gray) var(--lightness-300) c h);--gray-400: oklch(from var(--gray) var(--lightness-400) c h);--gray-500: oklch(from var(--gray) var(--lightness-500) c h);--gray-600: oklch(from var(--gray) var(--lightness-600) c h);--gray-700: oklch(from var(--gray) var(--lightness-700) c h);--gray-800: oklch(from var(--gray) var(--lightness-800) c h);--gray-900: oklch(from var(--gray) var(--lightness-900) c h);--gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);--gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);--gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);--gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);--gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);--gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);--gray-1600: oklch(from var(--gray) var(--lightness-1600) c h)}:root{--background-color: var(--background);--gray-50: #ffffff;--lightness-100: 98.1187%;--lightness-200: 95.2045%;--lightness-300: 91.1434%;--lightness-400: 85.1751%;--lightness-500: 79.1773%;--lightness-600: 72.3297%;--lightness-700: 67.0121%;--lightness-800: 62.3039%;--lightness-900: 57.9699%;--lightness-1000: 51.9076%;--lightness-1100: 46.9058%;--lightness-1200: 41.0821%;--lightness-1300: 35.3616%;--lightness-1400: 29.6725%;--lightness-1500: 24.5366%;--lightness-1600: 16.6959%;--chroma-100: calc(l*c/2) ;--chroma-200: calc(l*c*.6) ;--chroma-300: calc(l*c*.7) ;--chroma-400: calc(l*c*.8) ;--chroma-500: calc(l*c*.9) ;--chroma-600: c;--chroma-700: c;--chroma-800: c;--chroma-900: c;--chroma-1000: c;--chroma-1100: c;--chroma-1200: c;--chroma-1300: c;--chroma-1400: c;--chroma-1500: c;--chroma-1600: c;--highlight-hover: rgb(0 0 0 / .07);--highlight-pressed: rgb(0 0 0 / .15);--overlay-background: var(--gray-50);--overlay-border: rgb(0 0 0 / .06);--popover-shadow: 0 8px 20px rgba(0 0 0 / .12);--floaty-shadow: 0 4px 12px #00000011}@media(prefers-color-scheme:dark){:root{--background-color: var(--background);--gray-50: oklch(16% 0 0);--lightness-100: 29.6725%;--lightness-200: 35.3616%;--lightness-300: 41.0821%;--lightness-400: 46.9058%;--lightness-500: 51.9076%;--lightness-600: 57.9699%;--lightness-700: 56.1347%;--lightness-800: 59.2866%;--lightness-900: 62.3039%;--lightness-1000: 67.0121%;--lightness-1100: 72.3297%;--lightness-1200: 79.1773%;--lightness-1300: 85.1751%;--lightness-1400: 91.1434%;--lightness-1500: 95.2045%;--lightness-1600: 100%;--highlight-hover: rgb(255 255 255 / .1);--highlight-pressed: rgb(255 255 255 / .2);--overlay-background: var(--gray-100);--overlay-border: rgb(255 255 255 / .2);--popover-shadow: 0 8px 20px rgba(0 0 0 / .5)}}:root{--focus-ring-color: var(--tint-1000);--text-color: var(--gray-1200);--text-color-hover: var(--gray-1300);--text-color-disabled: var(--gray-600);--text-color-placeholder: var(--gray-1000);--link-color: var(--tint-1200);--link-color-secondary: var(--gray-1200);--link-color-pressed: var(--tint-1300);--border-color: var(--gray-400);--border-color-hover: var(--gray-500);--border-color-disabled: var(--gray-300);--field-text-color: var(--gray-1400);--button-background: var(--tint-100);--button-background-pressed: var(--tint-200);--highlight-background: oklch(from var(--tint) 55% c h);--highlight-background-pressed: oklch(from var(--tint) 50% c h);--highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);--highlight-foreground: white;--highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);--invalid-color: oklch(from var(--red) var(--lightness-900) c h);--field-background: var(--gray-50)}@media(forced-colors:active){:root{--background-color: Canvas;--focus-ring-color: Highlight;--text-color: ButtonText;--text-color-hover: ButtonText;--text-color-disabled: GrayText;--text-color-placeholder: ButtonText;--link-color: LinkText;--link-color-secondary: LinkText;--link-color-pressed: LinkText;--border-color: ButtonBorder;--border-color-hover: ButtonBorder;--border-color-pressed: ButtonBorder;--border-color-disabled: GrayText;--field-background: Field;--field-text-color: FieldText;--overlay-background: Canvas;--overlay-border: ButtonBorder;--button-background: ButtonFace;--button-background-pressed: ButtonFace;--highlight-background: Highlight;--highlight-background-pressed: Highlight;--highlight-background-invalid: LinkText;--highlight-foreground: HighlightText;--invalid-color: LinkText}}:root{--font-size: .875rem;--font-size-sm: .75rem;--font-size-lg: 1rem;--radius-xs: 0px;--radius-sm: 2px;--radius: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 16px;--radius-2xl: 32px;--radius-button: 999px;--spacing: .25rem;--spacing-1: var(--spacing);--spacing-2: calc(2 * var(--spacing));--spacing-3: calc(3 * var(--spacing));--spacing-4: calc(4 * var(--spacing));--spacing-5: calc(5 * var(--spacing));--spacing-6: calc(6 * var(--spacing));--spacing-7: calc(7 * var(--spacing));--spacing-8: calc(8 * var(--spacing));--spacing-9: calc(9 * var(--spacing));--spacing-10: calc(10 * var(--spacing))}@media(min-resolution:200dpi){:root{--spacing: .3125rem ;--font-size: 1.0625rem;--font-size-sm: .9375rem;--font-size-lg: 1.25rem;--text-2xl: 2.5rem;--text-xl: 2rem;--text-lg: 1.5rem;--text: 1.0625rem;--text-sm: .9375rem;--text-xs: .875rem;--text-xxs: .75rem}}::selection{background:var(--primary-25)}@media(prefers-color-scheme:dark){:root{--background: oklch(2% 0 0);--color: oklch(98% 0 0)}}::view-transition-old(root),::view-transition-new(root){animation-duration:75ms}::view-transition-group(lightbox-image){animation-duration:.35s;animation-timing-function:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001)}app-lightbox[data-transitioning=image]::part(image){view-transition-name:lightbox-image}html:has(dialog[open]){overflow:hidden}body{font-family:var(--sans-serif);background:var(--background);color:var(--color)}noscript{display:block;place-self:center;height:100%;align-content:center;font-size:var(--text-lg);font-weight:600;text-align:center}@layer components{.ui-button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.5rem;height:calc(10 * var(--spacing));padding:0 calc(3.5 * var(--spacing));margin:0;outline:0;border:1px solid var(--border);border-radius:var(--radius-button);background:var(--gray-50);background:linear-gradient(to top,var(--background),var(--gray-100) 50%,var(--background));font-family:inherit;font-size:1rem;font-weight:500;line-height:1.5rem;color:var(--color);-webkit-user-select:none;user-select:none;cursor:pointer;transition:--destructive-btn-gradient-to .15s ease-out,--primary-btn-gradient-to .15s ease-out,background .15s ease-out,transform .15s ease-out}@media(prefers-color-scheme:dark){.ui-button[data-variant=secondary]{background:var(--gray-50);color:var(--gray-1600)}}@media(hover:hover){.ui-button[data-variant=secondary]:hover:not([data-disabled]){background:var(--gray-100)}@media(prefers-color-scheme:dark){.ui-button[data-variant=secondary]:hover:not([data-disabled]){background:var(--gray-200)}}}.ui-button[data-variant=secondary]:active:not([data-disabled]){background:var(--gray-200)}@media(prefers-color-scheme:dark){.ui-button[data-variant=secondary]:active:not([data-disabled]){background:var(--gray-600)}}.ui-button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.ui-button[data-pending=true]{cursor:wait}.ui-button:active{transform:scale(.97)}@media(prefers-reduced-motion:reduce){.ui-button{transition:none}.ui-button:active{transform:none}}.ui-button[data-size=sm]{height:calc(7 * var(--spacing));padding:0 calc(3 * var(--spacing));font-size:var(--font-sm);line-height:1.25rem}.ui-button[data-size=lg]{height:calc(12 * var(--spacing));padding:0 calc(4 * var(--spacing));font-size:1.125rem;line-height:1.75rem}.ui-button[data-size=sm]:has(>svg:only-child){height:calc(7 * var(--spacing));width:calc(7 * var(--spacing))}.ui-button[data-size=md]:has(>svg:only-child){height:calc(8 * var(--spacing));width:calc(8 * var(--spacing))}.ui-button[data-size=lg]:has(>svg:only-child){width:2.5rem;height:2.5rem}.ui-button[data-size=sm] svg{width:1rem;height:1rem}.ui-button[data-size=md] svg{width:1.125rem;height:1.125rem}.ui-button[data-size=lg] svg{width:1.25rem;height:1.25rem}@property --primary-btn-gradient-to{syntax: "<color>"; initial-value: oklch(62% .23 252.87); inherits: true;}@property --destructive-btn-gradient-to{syntax: "<color>"; initial-value: oklch(.65 .3 28.96); inherits: true;}.ui-button[data-variant=primary]{border-color:var(--primary);background:linear-gradient(180deg,var(--primary-lighter),var(--primary-btn-gradient-to));box-shadow:inset 0 0 1px 1px #ffffff14,0 1px 1.5px #00000052,0 0 0 .5px #1a94ff;box-shadow:inset 0 0 1px 1px #ffffff14,0 1px 1.5px #00000052,0 0 0 .5px oklch(.66 .19 251.62);--active-primary-bg: oklch(.53 .22 254.63);color:#fff}@media(hover:hover){.ui-button[data-variant=primary]:hover:not([data-disabled]){--primary-btn-gradient-to: var(--active-primary-bg);border-color:var(--primary)}}.ui-button[data-variant=primary]:active:not([data-disabled]),.ui-button[data-variant=primary]:focus-visible:not([data-disabled]){--primary-btn-gradient-to: var(--active-primary-bg);border-color:var(--primary)}.ui-button[data-variant=quiet]{border-color:transparent;background:transparent}@media(hover:hover){.ui-button[data-variant=quiet]:hover:not([data-disabled]),.ui-button[data-variant=quiet]:active:not([data-disabled]){background:var(--gray-200)}@media(prefers-color-scheme:dark){.ui-button[data-variant=quiet]:hover:not([data-disabled]),.ui-button[data-variant=quiet]:active:not([data-disabled]){background:var(--gray-100);color:var(--gray-1500)}}}.ui-button[data-variant=destructive]{border-color:var(--destructive-50);background:linear-gradient(180deg,var(--destructive-lighter),var(--destructive-btn-gradient-to));--active-destructive-bg: oklch(.5 .23 28.96);color:#fff}@media(hover:hover){.ui-button[data-variant=destructive]:hover:not([data-disabled]){--destructive-btn-gradient-to: var(--active-destructive-bg);border-color:var(--destructive)}}.ui-button[data-variant=destructive]:active:not([data-disabled]){--destructive-btn-gradient-to: var(--active-destructive-bg);border-color:var(--destructive-25)}.ui-button:has(>svg:only-child),.ui-button[data-icon]{padding:0;border-radius:9999px;aspect-ratio:1}.ui-button svg{flex-shrink:0}.ui-button[data-disabled]{cursor:not-allowed;background:var(--gray-200);color:var(--gray-700);transition:none;border-color:var(--border);box-shadow:none}.ui-button[data-disabled]:active{transform:none}@media(prefers-color-scheme:dark){.ui-button[data-disabled]{background:var(--gray-50);color:var(--gray-900)}}}.keyboard-shortcuts__keybinds{display:none;overflow-y:auto}@media screen and (min-width:767px)and (pointer:fine){.keyboard-shortcuts__keybinds{display:block;flex:1;min-width:320px}}.modal-content.keyboard-shortcuts__modal:has(.keybind-item:hover) .keybind-item:not(:hover) :where(.kbd-shortcut){opacity:.5;transition:opacity .2s ease-in-out 20ms}.keybind-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.keybind-section{padding:var(--spacing-3);border-top:1px solid var(--border)}.keybind-section :where(h2){font-size:var(--text)}.keybind-section:first-of-type{border-top:none}.keybind-item{display:grid;grid-template-columns:1fr auto;grid-gap:var(--spacing-2);align-items:center}.keybind-item :where(.kbd-shortcut){transition:opacity .2s ease-in-out .15s}@layer components{.modal{--duration: .1s;inset:0;position:fixed;z-index:99999;margin:auto;padding:0}.modal>*{-webkit-user-select:none;user-select:auto;pointer-events:auto}.modal::backdrop{background:#0000001a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity var(--duration) ease-out,overlay var(--duration) ease-out allow-discrete,display var(--duration) ease-out allow-discrete}.modal[open]::backdrop{opacity:1}@starting-style{.modal[open]::backdrop{opacity:0}}.modal[open]:focus-visible{outline:none}@starting-style{.modal[open]::backdrop{opacity:0}}}@layer about{@property --fade-top{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --fade-bottom{syntax: "<length>"; inherits: false; initial-value: 0px;}.about-drawer-content{overflow-y:hidden;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}.about-drawer-content>section{--fade-top: 0px;--fade-bottom: 50px;min-width:100%;scroll-snap-align:center;scroll-snap-stop:always;padding:var(--spacing-4);overflow-y:auto;-webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0 / 0) 0px,rgb(0 0 0 / .33) calc(var(--fade-top) * .125),rgb(0 0 0 / .578) calc(var(--fade-top) * .25),rgb(0 0 0 / .753) calc(var(--fade-top) * .375),rgb(0 0 0 / .875) calc(var(--fade-top) * .5),rgb(0 0 0 / .95) calc(var(--fade-top) * .625),rgb(0 0 0 / .984) calc(var(--fade-top) * .75),rgb(0 0 0 / .998) calc(var(--fade-top) * .875),rgb(0 0 0 / 1) var(--fade-top),rgb(0 0 0 / 1) calc(100% - var(--fade-bottom)),rgb(0 0 0 / .998) calc(100% - var(--fade-bottom) * .875),rgb(0 0 0 / .984) calc(100% - var(--fade-bottom) * .75),rgb(0 0 0 / .95) calc(100% - var(--fade-bottom) * .625),rgb(0 0 0 / .875) calc(100% - var(--fade-bottom) * .5),rgb(0 0 0 / .753) calc(100% - var(--fade-bottom) * .375),rgb(0 0 0 / .578) calc(100% - var(--fade-bottom) * .25),rgb(0 0 0 / .33) calc(100% - var(--fade-bottom) * .125),rgb(0 0 0 / 0) 100%);mask-image:linear-gradient(to bottom,rgb(0 0 0 / 0) 0px,rgb(0 0 0 / .33) calc(var(--fade-top) * .125),rgb(0 0 0 / .578) calc(var(--fade-top) * .25),rgb(0 0 0 / .753) calc(var(--fade-top) * .375),rgb(0 0 0 / .875) calc(var(--fade-top) * .5),rgb(0 0 0 / .95) calc(var(--fade-top) * .625),rgb(0 0 0 / .984) calc(var(--fade-top) * .75),rgb(0 0 0 / .998) calc(var(--fade-top) * .875),rgb(0 0 0 / 1) var(--fade-top),rgb(0 0 0 / 1) calc(100% - var(--fade-bottom)),rgb(0 0 0 / .998) calc(100% - var(--fade-bottom) * .875),rgb(0 0 0 / .984) calc(100% - var(--fade-bottom) * .75),rgb(0 0 0 / .95) calc(100% - var(--fade-bottom) * .625),rgb(0 0 0 / .875) calc(100% - var(--fade-bottom) * .5),rgb(0 0 0 / .753) calc(100% - var(--fade-bottom) * .375),rgb(0 0 0 / .578) calc(100% - var(--fade-bottom) * .25),rgb(0 0 0 / .33) calc(100% - var(--fade-bottom) * .125),rgb(0 0 0 / 0) 100%);animation:section-blur linear both,scroll-fade linear both;animation-timeline:view(x),scroll(self)}.about{display:flex;min-width:0;position:relative;flex:1}.about :where(h1){font-size:var(--text-xl);margin-bottom:var(--spacing-2);font-weight:500}.about :where(h2){font-size:var(--text-lg);margin-top:var(--spacing-4);margin-bottom:var(--spacing-2);font-weight:500}.about :where(h3){font-size:var(--text);margin-top:var(--spacing-4);margin-bottom:var(--spacing-2);font-weight:600}.about :where(ul){color:var(--text-secondary);padding-left:var(--spacing-4);display:flex;flex-direction:column;gap:var(--spacing-1)}.about :where(img){border-radius:var(--radius-lg);margin:var(--spacing-5) 0 var(--spacing);height:180px;object-fit:cover}.about :where(.fullsize){width:100%;height:auto}.about :where(footer){margin-top:auto}.desktop-about{display:grid;grid-template-columns:3fr 2fr;max-width:clamp(200px,1200px,90vw);padding:0;grid-auto-flow:column;gap:var(--spacing-2)}.desktop-about>section{display:flex;flex-direction:column;gap:var(--spacing-2)}.about-modal[open]{width:100%;height:100%;max-width:100%;max-height:100%;display:flex;flex-direction:column;background:var(--background);border:none;overflow:hidden;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}.about-modal__close{position:absolute;top:calc(var(--spacing-3) + env(safe-area-inset-top,0px));right:calc(var(--spacing-3) + env(safe-area-inset-right,0px));z-index:2}.carousel-dots{--dot-size: 9px;--dots-in-dur: .25s;--dots-in-delay: .3s;position:absolute;bottom:calc(var(--spacing-4) + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);z-index:1;display:flex;justify-content:center;align-items:center;gap:10px;height:24px;padding:0 var(--spacing-2);background:light-dark(color-mix(in srgb,var(--gray-200) 80%,transparent),color-mix(in srgb,var(--gray-100) 60%,transparent));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-button);width:fit-content;opacity:1;filter:blur(0px);transition:opacity var(--dots-in-dur) ease-out var(--dots-in-delay),transform var(--dots-in-dur) ease-out var(--dots-in-delay),filter var(--dots-in-dur) ease-out var(--dots-in-delay)}@starting-style{.carousel-dots{opacity:0;transform:translate(-50%) translateY(16px) scale(.76);filter:blur(4px)}}@media(prefers-reduced-motion:reduce){.carousel-dots{--dots-in-dur: 0ms;--dots-in-delay: 0ms}}.carousel-dot{all:unset;width:var(--dot-size);height:var(--dot-size);border-radius:var(--radius-button);background:var(--gray-50);cursor:pointer;transition:transform .2s ease-out;transform:scale(.86)}.carousel-dot[aria-current=true]{background:var(--gray-1100);transform:scale(1.1)}.carousel-dot:focus-visible{outline:1px solid var(--gray-1400);outline-offset:2px}.about-section{display:flex;flex-direction:column;border-bottom:1px solid var(--border)}@media(min-width:767px){.about-section{border-bottom:none;overflow-y:auto;width:100%}}.about__effects{display:grid;gap:var(--spacing-2)}.about__effects :where(div){display:grid;grid-template-columns:subgrid;gap:var(--spacing-3);grid-column:span 2;align-items:baseline}.about__effects :where(dt){min-width:5rem;color:var(--gray-1100)}.about__effects :where(dd){text-wrap:pretty}.about-section{border-bottom:none}.about-section :where(a){text-decoration:underline}.update{content-visibility:auto;contain-intrinsic-size:auto 500px;margin-bottom:var(--spacing-5)}.updates-title{display:grid;grid-auto-flow:column;justify-content:space-between;align-items:baseline}.updates-title :where(.date){font-size:var(--text-sm);color:var(--gray-900)}.update figcaption{font-size:var(--text-sm);color:var(--gray-900)}@keyframes section-blur{0%,to{filter:blur(12px);opacity:.05;transform:scale(.96)}48%,56%{filter:blur(0px);opacity:1;transform:scale(1)}}@keyframes scroll-fade{0%{--fade-top: 0px;--fade-bottom: 50px}10%{--fade-top: 50px;--fade-bottom: 50px}90%{--fade-top: 50px;--fade-bottom: 50px}to{--fade-top: 50px;--fade-bottom: 0px}}}@layer components{.drawer-overlay{--backdrop-opacity: .5;position:fixed;inset:0;min-height:100dvh;background-color:#000;opacity:calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));transition:opacity .45s cubic-bezier(.32,.72,0,1)}.drawer-overlay[data-starting-style],.drawer-overlay[data-ending-style]{opacity:0}.drawer-overlay[data-swiping]{transition-duration:0ms}.drawer-overlay[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength) * .4s)}.drawer-viewport{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center}.drawer-popup{--bleed: 3rem;box-sizing:border-box;width:100%;height:100%;max-height:calc(90% + var(--bleed) + env(safe-area-inset-bottom,0px));margin-bottom:calc(-1 * (env(safe-area-inset-bottom,0px) + var(--bleed)));padding:1rem 0 0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--bleed));display:flex;flex-direction:column;border-top-left-radius:var(--radius-2xl);border-top-right-radius:var(--radius-2xl);filter:drop-shadow(var(--popover-shadow));box-shadow:0 0 0 1px var(--border);border:none;background-color:var(--background);touch-action:auto;transition:transform .45s cubic-bezier(.32,.72,0,1);will-change:transform;transform:translateY(calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y)))}@supports (corner-shape: squircle){.drawer-popup{corner-shape:squircle;border-top-left-radius:calc(var(--radius-2xl) * 1.8);border-top-right-radius:calc(var(--radius-2xl) * 1.8)}}.drawer-popup[data-swiping]{-webkit-user-select:none;user-select:none}.drawer-popup[data-starting-style],.drawer-popup[data-ending-style]{transform:translateY(calc(100% - var(--bleed)))}.drawer-popup[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength) * .4s)}.drawer-popup .drawer-handle{height:6px;width:42px;margin:0 auto .75rem;border-radius:9999px;background:var(--gray-400);flex-shrink:0}.drawer-popup .drawer-close{position:absolute;top:1rem;right:1rem;z-index:1}.drawer-content{flex:1;min-height:0;overscroll-behavior:contain}.drawer-indent-root{position:relative;height:100%;overflow:hidden}.drawer-indent-bg{position:absolute;inset:0;background-color:#000}.drawer-indent{height:100%;background-color:var(--background);--indent-progress: var(--drawer-swipe-progress);--indent-radius: calc(1.5rem * (1 - var(--indent-progress)));--indent-transition: calc(1 - clamp(0, calc(var(--drawer-swipe-progress) * 100000), 1)) ;position:relative;transition:transform .4s cubic-bezier(.32,.72,0,1),border-radius .25s cubic-bezier(.32,.72,0,1);transition-duration:calc(.4s * var(--indent-transition)),calc(.25s * var(--indent-transition));transform-origin:center top;will-change:transform}.drawer-indent[data-active]{transform:scale(calc(.96 + (.04 * var(--indent-progress)))) translateY(calc(.5rem * (1 - var(--indent-progress)) + (env(safe-area-inset-top) * (1 - var(--indent-progress)))));border-radius:var(--indent-radius);overflow:hidden}}@layer components{.ui-checkbox{display:flex;align-items:center;gap:.5rem;font-family:inherit;font-size:var(--text-sm);line-height:1.5rem;color:var(--gray-900);cursor:pointer;-webkit-user-select:none;user-select:none}@media(prefers-color-scheme:dark){.ui-checkbox{color:var(--gray-1600)}}.ui-checkbox:has(input[switch]){flex-direction:row-reverse}.ui-checkbox input[type=checkbox]{width:1.125rem;height:1.125rem;margin:0;cursor:pointer;accent-color:var(--primary);border-radius:var(--radius)}.ui-checkbox input[type=checkbox]:focus-visible{outline:2px solid var(--primary)}.ui-checkbox input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}.ui-checkbox input[type=checkbox][switch]{width:auto;min-width:1.125rem}.ui-checkbox:has(input[type=checkbox]:disabled){opacity:.5;cursor:not-allowed}}.ui-checkbox-label{flex:1;margin-bottom:0}.settings-drawer-trigger{filter:drop-shadow(var(--floaty-shadow))}.settings-drawer-inner{display:flex;flex-direction:column;margin-bottom:var(--spacing-2);height:100%}.settings-drawer-switch,.settings-drawer-ext-item{padding:var(--spacing-1) var(--spacing-2);display:grid;grid-template-columns:1fr auto;grid-auto-flow:row;align-items:center}.settings-drawer-link{color:var(--gray-900)}.settings-drawer-title{text-align:center;font-weight:600;margin:var(--spacing-1) 0 var(--spacing-3)}.settings-drawer-studio-buttons{display:flex;flex-direction:column;gap:var(--spacing-2);padding:var(--spacing-2);margin-top:auto;padding-bottom:env(safe-area-inset-bottom,0px)}@layer components{.ui-dropzone{outline:none}}@layer components{.select-field{display:flex;flex-direction:column;align-items:start;gap:.25rem}.select-label{font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--gray-900);cursor:default;-webkit-user-select:none;user-select:none}.select-select{box-sizing:border-box;display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;min-height:2rem;padding-block:.375rem;padding-left:.875rem;padding-right:.75rem;margin:0;outline:0;border:1px solid var(--gray-50);border-radius:var(--radius);background-color:canvas;font-family:inherit;font-size:1rem;line-height:1.5rem;color:var(--gray-900);-webkit-user-select:none;user-select:none;min-width:14rem}@media(hover:hover){.select-select:hover{background-color:var(--gray-100)}}@media(prefers-color-scheme:light){.select-select{border:1px solid var(--border)}}.select-select[data-popup-open]{background-color:var(--gray-100)}.select-select:focus-visible{outline:2px solid var(--primary);outline-offset:-1px}.select-value_text{display:flex;flex-direction:column;align-items:flex-start;gap:.125rem}.select-value_primary{font-size:1rem;line-height:1.5rem}.select-value_secondary{font-size:.825rem;line-height:1rem;color:var(--gray-600)}.select-select_icon{display:flex;align-items:center;align-self:center}.select-positioner{outline:none;z-index:1;-webkit-user-select:none;user-select:none}.select-popup{box-sizing:border-box;border-radius:var(--radius);-webkit-backdrop-filter:var(--floating-backdrop);backdrop-filter:var(--floating-backdrop);background-color:var(--floating-background);background-clip:padding-box;color:var(--gray-900);min-width:var(--anchor-width);transform-origin:var(--transform-origin);transition:transform .15s,opacity .15s;filter:drop-shadow(var(--popover-shadow))}.select-popup[data-starting-style],.select-popup[data-ending-style]{opacity:0;transform:scale(.9)}.select-popup[data-side=none]{transition:none;transform:none;opacity:1;min-width:calc(var(--anchor-width) + 1rem)}@media(prefers-color-scheme:light){.select-popup{outline:1px solid var(--gray-200)}}@media(prefers-color-scheme:dark){.select-popup{outline:1px solid var(--gray-50);outline-offset:-1px}}.select-list{box-sizing:border-box;position:relative;padding-block:.25rem;overflow-y:auto;max-height:var(--available-height);scroll-padding-block:1.5rem}.select-item{box-sizing:border-box;outline:0;font-size:.875rem;line-height:1rem;padding-block:.375rem;padding-left:.625rem;padding-right:1rem;display:grid;gap:.5rem;align-items:flex-start;grid-template-columns:.75rem 1fr;cursor:default;-webkit-user-select:none;user-select:none}@media(pointer:coarse){.select-item{padding-block:.625rem;font-size:.925rem}}[data-side=none] .select-item{font-size:1rem;padding-right:2rem}.select-item[data-highlighted]{z-index:0;position:relative}.select-item[data-highlighted] .select-item_description{color:currentColor}.select-item[data-highlighted]:before{content:"";z-index:-1;position:absolute;inset-block:0;inset-inline:.25rem;border-radius:var(--radius);background-color:var(--gray-200)}.select-item_indicator{grid-column-start:1;display:flex;align-items:center;justify-content:center;align-self:start;position:relative;top:.4em}.select-item_indicator_icon{display:block;width:.75rem;height:.75rem}.select-item_text{grid-column-start:2;display:flex;flex-direction:column;gap:.125rem}.select-item_label{font-size:1rem;line-height:1.5rem}.select-item_description{font-size:.825rem;line-height:1rem;opacity:.8}.select-scroll_arrow{width:100%;background:canvas;z-index:1;text-align:center;cursor:default;border-radius:var(--radius);height:1rem;font-size:.75rem;display:flex;align-items:center;justify-content:center}.select-scroll_arrow:before{content:"";position:absolute;width:100%;height:100%;left:0}.select-scroll_arrow[data-direction=up][data-side=none]:before{top:-100%}.select-scroll_arrow[data-direction=down]{bottom:0}.select-scroll_arrow[data-direction=down][data-side=none]:before{bottom:-100%}}:root{--canvas-overlay-z: 1000;--canvas-overlay-z-1: 1001;--canvas-overlay-z-2: 1002;--canvas-overlay-z-3: 1003}.infinite-canvas{position:relative;width:100%;height:100%;overflow:hidden;cursor:default;touch-action:none;-webkit-user-select:none;user-select:none;background-color:var(--studio-background);outline:none}@media screen and (max-width:768px){.infinite-canvas{background-color:var(--background)}}.infinite-canvas:active{cursor:default}.infinite-canvas__canvas{display:block;width:100%;height:100%;image-rendering:auto}.infinite-canvas__overlay{position:absolute;inset:0;top:env(safe-area-inset-top,0);pointer-events:none;z-index:var(--canvas-overlay-z)}.infinite-canvas__overlay>*,.infinite-canvas__controls>*,.infinite-canvas__toolrow>*{pointer-events:auto}.infinite-canvas__entity-label{position:absolute;left:0;top:0;will-change:transform;font-size:.875rem;padding:4px 3px;border-radius:var(--radius);background:linear-gradient(180deg,var(--primary-lighter),var(--primary));box-shadow:inset 0 0 1px 1px #ffffff14,0 1px 1.5px #00000052,0 0 0 .5px #1a94ff;box-shadow:inset 0 0 1px 1px #ffffff14,0 1px 1.5px #00000052,0 0 0 .5px oklch(.66 .19 251.62);color:#fff;display:grid;align-items:center;gap:4px;grid-template-columns:auto minmax(0,1fr);white-space:nowrap;z-index:var(--canvas-overlay-z);max-width:20rem;pointer-events:none;opacity:1}@media screen and (max-width:768px){.infinite-canvas__entity-label{font-size:.75rem;max-width:12rem;padding:2px 6px;border-radius:var(--radius-button)}}.infinite-canvas__entity-label span{overflow:hidden;text-overflow:ellipsis}.infinite-canvas__entity-label-icon{display:inline;vertical-align:middle;height:1em;width:0;overflow:hidden;transition:width .15s cubic-bezier(.34,1.56,.64,1)}.infinite-canvas__entity-label--dragging .infinite-canvas__entity-label-icon{width:1.2em}.infinite-canvas__entity-label--warning{background:var(--orange)}.infinite-canvas__perf-overlay{position:absolute;top:8px;left:8px;padding:4px 8px;background:var(--gray-50);color:light-dark(oklch(.49 .21 254.9),oklch(.75 .14 251.13));font-size:var(--text-sm);border-radius:var(--radius);pointer-events:none;z-index:var(--canvas-overlay-z-3);white-space:nowrap}@media screen and (max-width:768px){.infinite-canvas__perf-overlay{top:calc(var(--spacing) * 12)}}.left-controls{display:grid;grid-auto-flow:column;gap:var(--spacing-2);pointer-events:auto}@media screen and (max-width:768px){.infinite-canvas__keyboard-shortcuts{bottom:initial;top:calc(var(--spacing) * 1.5)}}.infinite-canvas__controls{pointer-events:none;display:grid;grid-auto-flow:column;gap:var(--spacing-2)}@media screen and (max-width:768px){.infinite-canvas__controls{align-content:start}}.infinite-canvas__zoom-indicator{font-variant-numeric:tabular-nums;font-family:var(--font-mono, monospace)}@media screen and (max-width:768px){.infinite-canvas__zoom-indicator{display:none}}.infinite-canvas__center{font-size:var(--text)}.infinite-canvas__select,.infinite-canvas__confirm,.infinite-canvas__reset{font-size:var(--text-sm);height:calc(8 * var(--spacing))}.infinite-canvas__confirm{width:calc(8 * var(--spacing))}.infinite-canvas__confirm svg{width:1.125rem;height:1.125rem}.infinite-canvas__loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:calc(var(--spacing) * 2);background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius);font-size:var(--text-sm);color:var(--text-color-secondary);box-shadow:0 4px 12px #00000026}.infinite-canvas-error{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:calc(var(--spacing) * 4);background-color:var(--studio-background);color:var(--text-color-secondary);text-align:center}@media screen and (max-width:768px){.infinite-canvas-error{background-color:var(--background)}}.infinite-canvas-error p{margin:0 0 calc(var(--spacing) * 1)}.infinite-canvas-error .error-message{font-size:12px;color:var(--invalid-color);font-family:var(--font-mono, monospace)}.infinite-canvas-dropzone{width:100%;height:100%;outline:none}.infinite-canvas-dropzone[data-drop-target] .infinite-canvas{outline-offset:-2px;outline:2px solid var(--primary);border-radius:var(--radius-xl)}.canvas-menu-trigger{height:100%}.infinite-canvas-toolrow{position:absolute;bottom:0;left:0;width:100%;display:grid;grid-auto-flow:column;pointer-events:none;z-index:var(--canvas-overlay-z-1);padding:calc(var(--spacing) * 1.5);justify-content:space-between}@media screen and (max-width:768px){.infinite-canvas-toolrow{top:0;bottom:initial;align-content:start}}.undo-redo{display:grid;grid-auto-flow:column;gap:var(--spacing-2);background:linear-gradient(to top,var(--background),var(--gray-100) 50%,var(--background));color:var(--gray-900);border-radius:var(--radius-button);border:1px solid var(--border);height:calc(7 * var(--spacing));transition:background-color .15s ease-out,transform .15s ease-out}.undo-redo :where(button){width:calc(7 * var(--spacing));display:flex;align-items:center;justify-content:center;color:light-dark(var(--color),var(--gray-1600))}.undo-redo :where(button:disabled){cursor:not-allowed;color:light-dark(var(--gray-700),var(--gray-900))}.undo-redo:has(button:active:not(:disabled)){transform:scale(.97)}@media(prefers-reduced-motion:reduce){.undo-redo:has(button:active:not(:disabled)){transition:none}}@media(prefers-color-scheme:dark){.undo-redo{background:var(--gray-50);color:var(--gray-1600)}}@media screen and (max-width:768px){.undo-redo{height:calc(8 * var(--spacing))}.undo-redo :where(button){width:calc(8 * var(--spacing))}}.infinite-canvas__top-right{position:absolute;top:0;right:0;padding:calc(var(--spacing) * 1.5);z-index:var(--canvas-overlay-z-1);pointer-events:auto;filter:drop-shadow(var(--floaty-shadow))}.infinite-canvas__keyboard-shortcuts,.undo-redo,.infinite-canvas__confirm,.infinite-canvas__reset,.infinite-canvas__select{filter:drop-shadow(var(--floaty-shadow));will-change:transform}.mobile-bottom-bar{background:linear-gradient(to top,var(--background),var(--gray-100) 50%,var(--background));display:grid;grid-auto-flow:column;justify-items:center;border-radius:var(--radius-button);overflow:clip;border:1px solid var(--border-75);height:100%;padding:4px;filter:drop-shadow(0px 1px 2px #00000010)}@media(prefers-color-scheme:dark){.mobile-bottom-bar{background:var(--gray-50);filter:none}}.bottom-bar-item{position:relative;color:var(--gray-1000);width:100%;display:flex;justify-content:center;align-items:center;--pill: 22px;border-radius:var(--radius-lg);transition:color .1s ease-out}.bottom-bar-item :where(svg){height:1.5rem;width:1.5rem;z-index:1;transform:scale(.92);transition:transform .2s ease-out}.bottom-bar-item:is([data-active]:not([aria-disabled=true]),:focus-visible,:active:not([aria-disabled=true])) svg{transform:scale(1)}.bottom-bar-item:before{position:absolute;inset:0;width:100%;height:100%;content:"";border-radius:inherit;z-index:0;transition:transform .2s ease-out,opacity .1s ease-out;opacity:0;transform:scale(.72);background:var(--gray-200);box-shadow:0 0 3px 1px #2c2c2c1a inset}@media(prefers-color-scheme:dark){.bottom-bar-item:before{background:var(--gray-100);box-shadow:0 0 3px 1px #000 inset,0 4px 40px 1px #d1d1d11a}}.bottom-bar-item:is([data-active]:not([aria-disabled=true]),:focus-visible:not([aria-disabled=true])):before{opacity:1;transform:scale(1)}@starting-style{.bottom-bar-item:is([data-active]:not([aria-disabled=true]),:focus-visible:not([aria-disabled=true])):before{transform:scale(.72);opacity:.7}}.bottom-bar-item:active:not([aria-disabled=true]):before,.bottom-bar-item:active:not([aria-disabled=true]) svg{transform:scale(1.05)}.bottom-bar-item[aria-disabled=true]{cursor:not-allowed;color:var(--gray-400)}@media(prefers-color-scheme:dark){.bottom-bar-item[aria-disabled=true]{color:var(--gray-100)}.bottom-bar-item[aria-disabled=true]:focus-visible{color:var(--gray-200)}}.bottom-bar-item:first-child{border-radius:var(--pill) var(--radius-lg) var(--radius-lg) var(--pill)}.bottom-bar-item:first-child:before{border-radius:var(--pill) var(--radius-lg) var(--radius-lg) var(--pill)}.bottom-bar-item:first-child svg{margin-inline:2px -2px}.bottom-bar-item:last-child{border-radius:var(--radius-lg) var(--pill) var(--pill) var(--radius-lg)}.bottom-bar-item:last-child:before{border-radius:var(--radius-lg) var(--pill) var(--pill) var(--radius-lg)}.bottom-bar-item:last-child svg{margin-inline:-2px 2px}.bottom-bar-item:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.mobile-bottom-bar-container{display:grid;grid-auto-flow:column;align-items:center;grid-template-columns:1fr auto;margin:0 var(--spacing-2) 4px;gap:0;height:var(--bottom-bar-height, 56px)}.mobile-action-btn-slot{justify-self:end;display:grid;height:inherit;aspect-ratio:1;margin-inline-start:var(--spacing-2)}.mobile-action-btn-slot>*{grid-area:1 / 1}.mobile-delete-btn,.mobile-fullscreen-btn{--in-dur: .15s;--out-dur: .12s;--start-scale: .92;opacity:1;scale:1;width:100%;height:inherit;filter:drop-shadow(0px 1px 2px #00000010);border-color:var(--border-75);transition:--destructive-btn-gradient-to .15s ease-out,opacity var(--in-dur) ease-out,scale var(--in-dur) ease-out,display var(--in-dur) ease-out allow-discrete}@starting-style{.mobile-delete-btn,.mobile-fullscreen-btn{opacity:0;scale:var(--start-scale)}}:is(.mobile-delete-btn,.mobile-fullscreen-btn)[hidden]{display:none;opacity:0;scale:var(--start-scale);transition:--destructive-btn-gradient-to .15s ease-out,opacity var(--out-dur) ease-out,scale var(--out-dur) ease-out,display var(--out-dur) ease-out allow-discrete}@media(prefers-reduced-motion:reduce){.mobile-delete-btn,.mobile-fullscreen-btn{--in-dur: 0ms;--out-dur: 0ms}}@media(prefers-color-scheme:dark){.mobile-delete-btn,.mobile-fullscreen-btn{box-shadow:none}}.slider-picker-window{position:relative;overflow:hidden}.slider-picker-options{display:flex;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;scroll-behavior:smooth}.slider-picker-options::-webkit-scrollbar{display:none}.slider-picker-item{flex-shrink:0;scroll-snap-align:center;cursor:pointer;outline:none}.mobile-style-knobs{--item-w: 3.5rem;--item-h: 4.5rem;--gap: var(--spacing-2);display:flex;flex-direction:column;align-items:center}.mobile-style-knobs__window{width:100%;height:calc(var(--item-h) + .5rem);padding-top:.25rem}.mobile-style-knobs__options{gap:var(--gap);height:100%;padding-inline:calc((100% - var(--item-w)) / 2);scroll-padding-inline:calc((100% - var(--item-w)) / 2)}.mobile-style-knobs__item{width:var(--item-w);height:var(--item-h);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.25rem;padding-top:2px;transition:opacity .15s ease-out}.mobile-style-knobs__item :where(button){transform:scale(.86);width:calc(var(--item-w) - 1rem);height:calc(var(--item-w) - 1rem);filter:drop-shadow(0 2px 4px #0000001f);border-radius:99px;display:flex;align-items:center;justify-content:center;transition:color .15s ease-out,background-color .15s ease-out,transform .15s ease-out,box-shadow .15s ease-out,border-color 0ms ease-out}.mobile-style-knobs__item :where(:focus-visible button){outline:2px solid var(--primary);outline-offset:1px}.mobile-style-knobs__item :where([data-variant=primary]){background:linear-gradient(180deg,var(--primary-lighter),var(--primary));box-shadow:inset 0 0 1px 1px #ffffff14,0 1px 1.5px #00000052,0 0 0 .5px #1a94ff;box-shadow:inset 0 0 1px 1px #ffffff14,0 1px 1.5px #00000052,0 0 0 .5px oklch(.66 .19 251.62)}.mobile-style-knobs__item:not([data-selected]) .ui-button{background:var(--gray-50);border-color:transparent;box-shadow:none;color:var(--color);filter:drop-shadow(0 1px 3px #00000013)}:is(.mobile-style-knobs__item:not([data-checked])[data-toggleable][data-selected],.mobile-style-knobs__item:not([data-checked])[data-toggleable]) .ui-button{background:var(--gray-100);border-color:var(--gray-300);color:var(--gray-500);box-shadow:none}.mobile-style-knobs__item[data-selected] .ui-button{opacity:1;transform:scale(1)}.mobile-style-knobs__item[data-selected] .mobile-style-knobs__label{color:var(--color)}.mobile-style-knobs__item[data-selected] .ui-button:active{transform:scale(.97)}:is(.mobile-style-knobs__item[data-toggleable][data-selected]:not([data-checked]),.mobile-style-knobs__item:not([data-checked])[data-toggleable]) .mobile-style-knobs__label{color:var(--gray-500)}.mobile-style-knobs__time-toggle{display:grid;place-items:center;padding:0}.mobile-style-knobs__time-toggle :where(svg){grid-area:1 / 1}.mobile-style-knobs__label{font-size:.675rem;font-weight:500;color:var(--gray-1100);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;user-select:none;-webkit-user-select:none;transition:color .15s ease-out}.mobile-style-knobs__floating-label{position:fixed;bottom:var(--canvas-bottom);left:50%;transform:translate(-50%,-50%);z-index:var(--canvas-overlay-z-3);background:var(--gray-50);color:var(--color-900);padding:var(--spacing) var(--spacing-2);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;filter:drop-shadow(var(--popover-shadow));white-space:nowrap;pointer-events:none;user-select:none;-webkit-user-select:none;opacity:0;transition:opacity .15s ease-out}.mobile-style-knobs__floating-label[data-visible]{opacity:1}.mobile-style-knobs__highlight{position:absolute;display:none;top:0;left:50%;transform:translate(-50%);width:var(--item-w);height:var(--item-h);border:1px solid var(--gray-100);border-radius:var(--radius-lg);pointer-events:none}.params-knobs,.post-process-knobs{height:100%}@layer components{.infinite-slider{--tick-w: 2px;--tick-h: 2.5rem;--slider-tick-color: light-dark(var(--gray-500), var(--gray-100));--slider-highlight-color: light-dark(var(--gray-900), var(--gray-1100));--slider-major-tick-color: light-dark(var(--gray-700), var(--gray-300));-webkit-user-select:none;user-select:none;touch-action:none}.infinite-slider:focus-visible{outline:2px solid var(--primary);border-radius:var(--radius-lg)}@media screen and (max-width:768px){.infinite-slider{--tick-h: 3rem;padding-top:var(--spacing-2)}}.infinite-slider__canvas{display:block;width:100%;height:calc(var(--tick-h));cursor:grab;mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent)}.infinite-slider__canvas:active{cursor:grabbing}}@layer components{.menu-positioner{outline:0}.menu-separator{margin:.375rem 0;height:1px;background-color:light-dark(var(--border),var(--gray-100))}.menu-popup,.menu-submenu-popup{box-sizing:border-box;padding-block:.25rem;border-radius:var(--radius-md);-webkit-backdrop-filter:var(--floating-backdrop);backdrop-filter:var(--floating-backdrop);background:var(--floating-background);color:var(--gray-900);transform-origin:var(--transform-origin);transition:transform .15s,opacity .15s;filter:drop-shadow(var(--popover-shadow))}:is(.menu-popup,.menu-submenu-popup)[data-ending-style]{opacity:0}@media(prefers-color-scheme:light){.menu-popup,.menu-submenu-popup{outline:1px solid var(--gray-200)}}@media(prefers-color-scheme:dark){.menu-popup,.menu-submenu-popup{outline:1px solid var(--gray-50);outline-offset:-1px}}.menu-submenu-popup[data-starting-style],.menu-submenu-popup[data-ending-style]{transform:scale(.9);opacity:0}.menu-arrow{display:flex}.menu-arrow[data-side=top]{bottom:-8px;rotate:180deg}.menu-arrow[data-side=bottom]{top:-8px;rotate:0deg}.menu-arrow[data-side=left]{right:-13px;rotate:90deg}.menu-arrow[data-side=right]{left:-13px;rotate:-90deg}.menu-arrow-fill{fill:canvas}@media(prefers-color-scheme:light){.menu-arrow-outer-stroke{fill:var(--gray-200)}}@media(prefers-color-scheme:dark){.menu-arrow-inner-stroke{fill:var(--gray-300)}}.menu-item,.menu-submenu-trigger{outline:0;cursor:default;-webkit-user-select:none;user-select:none;padding-block:.5rem;padding-left:1rem;padding-right:2rem;display:flex;font-size:.875rem;line-height:1rem}:is(.menu-item,.menu-submenu-trigger)[data-popup-open]{z-index:0;position:relative}:is(.menu-item,.menu-submenu-trigger)[data-popup-open]:before{content:"";z-index:-1;position:absolute;inset-block:0;inset-inline:.25rem;border-radius:var(--radius);background-color:var(--gray-100)}:is(.menu-item,.menu-submenu-trigger)[data-highlighted]{z-index:0;position:relative;color:var(--gray-50)}:is(.menu-item,.menu-submenu-trigger)[data-disabled]{z-index:0;position:relative;pointer-events:none;opacity:.5}:is(.menu-item,.menu-submenu-trigger)[data-highlighted]:before{content:"";z-index:-1;position:absolute;inset-block:0;inset-inline:.25rem;border-radius:var(--radius);background-color:var(--gray-900)}:is(.menu-item,.menu-submenu-trigger)[data-variant=destructive]{color:var(--destructive)}:is(.menu-item,.menu-submenu-trigger)[data-variant=destructive][data-highlighted]:before{background-color:var(--destructive-25)}.menu-icon-right,.menu-icon-left{position:absolute;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem}:is(.menu-icon-right,.menu-icon-left) svg{width:.875rem;height:.875rem}.menu-icon-right{right:.5rem}.menu-icon-left{left:.5rem}.menu-submenu-trigger{align-items:center;justify-content:space-between;gap:1rem;padding-right:1rem}.menu-group-label{outline:0;cursor:default;-webkit-user-select:none;user-select:none;display:flex;padding-block-start:.5rem;padding-block-end:.5rem;padding-left:.875rem;padding-right:2rem;font-size:var(--text-xs);line-height:1rem}.menu-checkbox-item{outline:0;cursor:default;-webkit-user-select:none;user-select:none;padding-block:.5rem;padding-left:2rem;padding-right:2rem;display:flex;align-items:center;font-size:.875rem;line-height:1rem;position:relative}.menu-checkbox-item[data-highlighted]{z-index:0;position:relative;color:var(--gray-50)}.menu-checkbox-item[data-highlighted]:before{content:"";z-index:-1;position:absolute;inset-block:0;inset-inline:.25rem;border-radius:var(--radius);background-color:var(--gray-900)}.menu-checkbox-item[data-disabled]{pointer-events:none;opacity:.5}.menu-checkbox-indicator{position:absolute;left:.5rem;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem}.menu-checkbox-indicator[data-unchecked]{display:none}.menu-checkbox-indicator svg{width:.875rem;height:.875rem}.menu-radio-item{outline:0;cursor:default;-webkit-user-select:none;user-select:none;padding-block:.5rem;padding-left:2rem;padding-right:2rem;display:flex;align-items:center;font-size:.875rem;line-height:1rem;position:relative}.menu-radio-item[data-highlighted]{z-index:0;position:relative;color:var(--gray-50)}.menu-radio-item[data-highlighted]:before{content:"";z-index:-1;position:absolute;inset-block:0;inset-inline:.25rem;border-radius:var(--radius);background-color:var(--gray-900)}.menu-radio-item[data-disabled]{pointer-events:none;opacity:.5}.menu-radio-indicator{position:absolute;display:flex;align-items:center;justify-content:center;width:.5rem;height:.5rem;left:.75rem}.menu-radio-indicator[data-unchecked]{display:none}.menu-radio-indicator svg{width:.875rem;height:.875rem}.menu-item:has(>.menu-icon-right),.menu-item--icon-right,.menu-checkbox-item:has(>.menu-icon-right){padding-right:.5rem;align-items:center;gap:3.5rem;justify-content:space-between}.menu-item:has(>.menu-icon-left),.menu-item--icon-left{padding-left:2rem}}.color-picker{background:none;border:none;padding:0;display:flex;align-items:center;gap:var(--spacing-2);outline:none;appearance:none;vertical-align:middle;font:var(--font-size) system-ui;color:var(--text-color);-webkit-tap-highlight-color:transparent;cursor:pointer}.color-picker[data-disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}.color-picker__wrapper{position:relative}.color-picker__swatch{display:block;width:var(--spacing-8);height:var(--spacing-8);border-radius:9999px;border:1px solid var(--border)}.color-picker__swatch--lg{width:100%;height:100%;border-radius:var(--radius-xl)}.color-picker__native-input{all:unset;opacity:0;position:absolute;width:1px;height:1px;overflow:hidden;padding:0;margin:0;pointer-events:none}.color-picker__drawer{max-height:calc(280px + env(safe-area-inset-bottom,0px))}.color-picker__drawer-body{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-4);align-items:start;padding:var(--spacing-3) var(--spacing-2) env(safe-area-inset-bottom,var(--spacing-3)) var(--spacing-2);height:100%}.color-picker__drawer-actions{display:flex;flex-direction:column;gap:var(--spacing-2)}.color-picker__drawer-input{width:100%;height:100%;background-color:var(--background);border:1px solid var(--border);padding:0;border-radius:var(--radius-xl);cursor:pointer}.color-picker__drawer-input::-webkit-color-swatch-wrapper{padding:0}.color-picker__drawer-input::-webkit-color-swatch{border:none}@layer components{.color-palette{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:var(--spacing-1);grid-column:1 / -1}.color-palette__label{grid-column:1 / 1}.color-palette__count{grid-column:2 / -1;justify-self:end}.color-palette__colors{display:flex;gap:var(--spacing-1);overflow-x:auto;scrollbar-gutter:stable;--fade-range-start: 6px;--fade-range-end: 20px}.color-palette__actions{grid-column:2 / -1;grid-row:2 / -1;justify-self:end;display:flex;gap:var(--spacing-2)}}@layer components{.field{display:flex;flex-direction:column;align-items:start;gap:.25rem;width:100%;max-width:20rem}.field-label{display:block;color:var(--gray-900);font-size:var(--text-sm);margin-bottom:var(--spacing);font-weight:500;-webkit-user-select:none;user-select:none}}.color-palette-thumbnail{display:grid;width:100%;height:100%;overflow:hidden;border-radius:inherit}.color-palette-thumbnail__swatch{min-width:0;min-height:0}.mobile-color-knobs{display:block}.mobile-color-knobs__picker{padding-bottom:0}.mobile-color__palette{padding:0 var(--spacing-2) var(--spacing-2)}.mobile-color__palette .field-label{font-size:var(--text-xxs)}.mobile-color-knobs__item .ui-button{padding:2px}.mobile-color-knobs__item[data-type=upload] .ui-button{padding:0}.mobile-color-knobs__item[data-type=preserveColors] .ui-button{background:conic-gradient(in hsl longer hue,red 0 100%);border:none;padding:0}.mobile-style-knobs__item[data-type=preserveColors][data-toggleable]:not([data-checked]) .ui-button{background:conic-gradient(in hsl longer hue,red 0 100%);filter:saturate(0)}.mobile-palette-upload{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-2);padding:0 var(--spacing-3) var(--spacing) var(--spacing-3)}.mobile-palette-upload__button{width:100%;justify-content:center}.mobile-palette__hint{font-size:var(--text-xs);color:var(--gray-900);text-align:center}.mobile-color__preserve-colors{font-size:var(--text-sm);padding:0 var(--spacing-3) var(--spacing-2)}.preserve-colors-label{color:var(--gray-900);font-weight:500}.preserve-colors-hint{font-size:var(--text-xs)}.color-circle--black{display:inline-block;width:.875em;height:.875em;border-radius:50%;background-color:#000;border:1px solid var(--border)}@layer components{.native-select-field{display:flex;flex-direction:column;align-items:start;gap:.25rem}.native-select-field--mobile{flex-direction:row;justify-content:space-between;width:100%;align-items:center}.native-select-field--mobile :where(label){font-size:var(--text-sm)}.native-select-wrapper{position:relative;width:fit-content}.native-select-wrapper:has(select:disabled){opacity:.5}.native-select{height:calc(8 * var(--spacing));width:100%;min-width:0;appearance:none;border-radius:var(--radius);border:1px solid var(--border);background-color:var(--gray-50);padding:calc(1 * var(--spacing)) calc(8 * var(--spacing)) calc(1 * var(--spacing)) calc(2.5 * var(--spacing));font-family:inherit;font-size:var(--text-sm);line-height:1.25rem;color:var(--gray-900);outline:none;-webkit-user-select:none;user-select:none;transition:border-color .15s ease-out,box-shadow .15s ease-out,background-color .15s ease-out}.native-select::placeholder{color:var(--gray-500)}.native-select::selection{background-color:var(--primary);color:#fff}.native-select:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.native-select:disabled{pointer-events:none;cursor:not-allowed}.native-select[aria-invalid=true]{border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in srgb,var(--destructive) 20%,transparent)}.native-select[data-variant=quiet]{border-color:transparent;background-color:transparent}@media(prefers-color-scheme:dark){.native-select{border-color:var(--gray-100);background-color:var(--gray-50);color:var(--gray-1600)}}@media(hover:hover){.native-select:hover:not(:disabled){background-color:var(--gray-100)}@media(prefers-color-scheme:dark){.native-select:hover:not(:disabled){background-color:var(--gray-200)}}}.native-select[data-size=sm]{height:calc(7 * var(--spacing));padding:calc(.5 * var(--spacing)) calc(7 * var(--spacing)) calc(.5 * var(--spacing)) calc(2 * var(--spacing));font-size:var(--font-xs)}.native-select-icon{position:absolute;top:50%;right:calc(2.5 * var(--spacing));width:calc(4 * var(--spacing));height:calc(4 * var(--spacing));transform:translateY(-50%);pointer-events:none;-webkit-user-select:none;user-select:none;color:var(--gray-500)}@media(prefers-color-scheme:dark){.native-select-icon{color:var(--gray-700)}}.native-select[data-size=sm]+.native-select-icon{right:calc(2 * var(--spacing));width:calc(3.5 * var(--spacing));height:calc(3.5 * var(--spacing))}}@layer components{.slider-field{position:relative}.slider-root{width:100%;--slider-h: 1.25rem;--slider-radius: var(--radius);--slider-bg: light-dark(var(--gray-100), var(--background));--slider-indicator-bg: light-dark(var(--background), canvas);--slider-padding: 2px}.slider-control{box-sizing:border-box;display:flex;align-items:center;width:100%;padding-block:.15rem;touch-action:none;-webkit-user-select:none;user-select:none}.slider-track{width:100%;height:var(--slider-h);background:var(--slider-bg);border-radius:var(--slider-radius);-webkit-user-select:none;user-select:none}.slider-value{position:absolute;top:0;right:.5rem;mix-blend-mode:difference;z-index:99}.slider-indicator{border-radius:var(--slider-radius);background:var(--slider-indicator-bg);-webkit-user-select:none;user-select:none;box-shadow:inset 0 0 0 1px var(--border)}.slider-thumb{width:.5rem;height:var(--slider-h);border-radius:var(--radius-sm);background:#fff;outline:1px solid var(--gray-300);-webkit-user-select:none;user-select:none}.slider-thumb:has(:focus-visible){outline:2px solid var(--primary)}}@layer components{.number-field-field{display:flex;flex-direction:column;align-items:start;gap:.25rem}.number-field-scrub_area{cursor:ew-resize;font-weight:700;-webkit-user-select:none;user-select:none}.number-field-scrub_area_cursor{filter:drop-shadow(0 1px 1px #0008)}.number-field-scrub_area .number-field-label{cursor:ew-resize;font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--gray-900)}.number-field-label{font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--gray-900)}.number-field-group{display:flex}.number-field-input{box-sizing:border-box;margin:0;padding:0;border-radius:0;border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);border-left:none;border-right:none;width:6rem;height:2.5rem;font-family:inherit;font-size:1rem;font-weight:400;background-color:transparent;color:var(--gray-900);text-align:center;font-variant-numeric:tabular-nums}.number-field-input:focus{z-index:1;outline:2px solid var(--primary);outline-offset:-1px}.number-field-decrement,.number-field-increment{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;margin:0;outline:0;padding:0;border:1px solid var(--gray-200);border-radius:var(--radius-button);background-color:var(--gray-50);background-clip:padding-box;color:var(--gray-900);-webkit-user-select:none;user-select:none}@media(hover:hover){:is(.number-field-decrement,.number-field-increment):hover{background-color:var(--gray-100)}}:is(.number-field-decrement,.number-field-increment)[disabled]{cursor:not-allowed;background-color:var(--gray-200)}:is(.number-field-decrement,.number-field-increment):active{background-color:var(--gray-100)}.number-field-decrement{border-top-right-radius:0;border-bottom-right-radius:0}.number-field-increment{border-top-left-radius:0;border-bottom-left-radius:0}}@layer components{.collapsible{display:flex;flex-direction:column;justify-content:center}.collapsible-depth-1{padding-left:var(--spacing-2)}.collapsible-trigger{display:flex;align-items:center;gap:.5rem;margin:0;border:0;outline:0;padding:var(--spacing) var(--spacing-2);border-radius:var(--radius);color:var(--gray-900);font-family:inherit;font-size:var(--text-sm);line-height:1.25rem;font-weight:500}.collapsible-trigger :where(svg){width:.75rem;height:.75rem;transition:transform .15s ease-out}@media(hover:hover){.collapsible-trigger:hover{background-color:var(--gray-100)}.collapsible-trigger:active{background-color:var(--gray-100)}@media(prefers-color-scheme:dark){.collapsible-trigger:hover{background-color:var(--gray-50)}.collapsible-trigger:active{background-color:var(--gray-50)}}}.collapsible-trigger:focus-visible{outline:2px solid var(--primary)}.collapsible-trigger[data-panel-open] :where(svg){transform:rotate(90deg)}.collapsible-panel{display:flex;height:var(--collapsible-panel-height);flex-direction:column;justify-content:end;overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:all .1s ease-out}.collapsible-panel[hidden]:not([hidden=until-found]){display:none}.collapsible-panel[data-starting-style],.collapsible-panel[data-ending-style]{height:0}.collapsible-content{display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem;padding:.5rem 0 .5rem 1.75rem;border-radius:var(--radius);background-color:var(--gray-100);cursor:text}.collapsible-trigger-with-enabled{display:grid;grid-template-columns:1fr auto;gap:var(--spacing)}.collapsible-checkbox input[type=checkbox]{width:1rem;height:1rem}}.sidebar--left{height:100%;padding:8px 0;display:flex;flex-direction:column}.sidebar-controls-overflow{overflow-y:auto;flex:1 1 auto;min-height:0;scrollbar-gutter:stable}@media screen and (max-width:768px){.sidebar-controls-overflow{overflow-y:initial;scrollbar-gutter:initial}}.sidebar-controls-overflow>div{padding:8px 0}.sidebar--right{height:100%}.sidebar-row{display:grid;padding:4px 12px}.buttons-row{grid-template-columns:1fr 1fr;gap:.5rem}.last-row{margin-top:auto}.studio-file-row{display:flex;flex-direction:column;gap:var(--spacing-2);margin-top:auto}.export-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.export-row:has(>:only-child){grid-template-columns:1fr}[data-image-only] .export-row{grid-template-columns:1fr}[data-image-only] .export-row>button[data-size=sm]{height:calc(10 * var(--spacing));padding:0 calc(3.5 * var(--spacing));font-size:1rem;line-height:1.5rem}.balanced-row{display:grid;grid-template-columns:1fr auto}.color-row{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;gap:.25rem .5rem}.color-row :where(.divider){grid-column:1;margin-left:-8px}.swap-btn{grid-row:1 / -1;grid-column:2;place-self:center}.preserve-colors-row,.show-original-row{padding:6px 12px}.show-original-row{grid-template-columns:1fr auto;gap:var(--spacing-6)}.controls{display:flex;flex-direction:column;height:100%}.file-input{display:none}.studio-heading{font-size:var(--text);font-weight:500}.renders-container{overflow:auto;padding:4px 0 4px 12px}.renders-container :where(p){padding:4px 0;font-size:var(--text-sm);color:var(--color-light)}.render-examples{--box-padding: 24px;display:grid;overflow:auto;grid-template-columns:1fr;padding-right:12px}.render-examples :where(app-lightbox){margin:0 0 1rem}.render-examples :where(app-lightbox:first-child){margin-top:calc(-1 * var(--box-padding))}.render-examples :where(app-lightbox:last-child){margin-bottom:calc(-1 * var(--box-padding))}.render-examples:before,.render-examples:after{content:"";position:sticky;left:0;width:100%;height:var(--box-padding);z-index:1;pointer-events:none;animation:scroll linear;animation-timeline:scroll();animation-fill-mode:both}.render-examples:before{top:0;background:linear-gradient(0deg,var(--mask));animation-range:20px 50px}.render-examples:after{bottom:0;background:linear-gradient(180deg,var(--mask));animation-direction:reverse;animation-range:entry 95%}.render-example-img{height:auto;border-radius:var(--radius)}.sidebar-exit-link{font-size:var(--text-sm)}.sidebar-header{display:flex;flex-wrap:wrap;gap:.25rem .5rem;justify-content:space-between;padding-bottom:.5rem}.sidebar-text{font-size:var(--text-xs)}.no-selection-message{color:var(--text-accent);font-size:var(--text-sm);text-align:center}@media(max-width:768px){.no-selection-message{color:var(--gray-1000);font-size:var(--text-xs)}}.sidebar-hint--image-selected{margin-bottom:var(--spacing-3)}.export-video-row{display:grid}.export-video-btn{width:auto}.export-progress{display:flex;flex-direction:column;gap:.25rem;padding:.5rem;margin-bottom:.5rem;background:light-dark(var(--gray-100),var(--accent));border-radius:var(--radius);min-width:0}.export-progress__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:var(--spacing-1)}.export-progress__label{font-size:var(--text-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.export-progress__cancel{flex-shrink:0;border-radius:var(--radius);height:var(--spacing-6);width:var(--spacing-6)}.export-progress__bar{height:4px;background:var(--primary-25);border-radius:var(--radius-sm);overflow:hidden}.export-progress__fill{height:100%;background:var(--primary);border-radius:var(--radius-sm);transition:width .1s ease-out}.export-progress__status{font-size:var(--text-xs);color:var(--text-accent);font-variant:tabular-nums}.palette-row{gap:var(--spacing)}.color-section-mixed{color:var(--text-accent);font-size:var(--text-sm);text-align:center;padding:var(--spacing-2) 0}.select-mixed{color:inherit}.palette-mixed{color:var(--text-accent);font-size:var(--text-sm);padding:var(--spacing-2) 0}.sidebar-collapsible-trigger{margin:var(--spacing)}.collapsible-trigger-with-enabled{padding-right:var(--spacing-3)}.exports-content{padding-top:var(--spacing)}.hint-text{color:var(--gray-900);font-size:var(--text-xs)}.export-queue-collapsible{min-width:0}.export-queue-header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--spacing-2);padding-right:var(--spacing)}.export-queue-list{display:flex;flex-direction:column;gap:var(--spacing-1);padding:4px 12px}.export-progress__icon{flex-shrink:0;width:14px;height:14px}.export-progress__icon--failed{color:var(--error)}.select-select{width:100%}.hint{display:grid;grid-template-areas:"title title close" "desc desc desc" "action action action";background:light-dark(var(--gray-100),var(--gray-50));padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-lg);font-size:var(--text-sm);view-transition-class:hint}.hint__title{font-weight:500;line-height:1.4;grid-area:title;align-self:center}.hint__description{font-size:var(--text-xs);color:var(--text-accent);line-height:1.4;grid-area:desc}.hint__action{justify-self:end;font-size:var(--text-xs);height:var(--spacing-7);padding:0 var(--spacing-2);margin:var(--spacing-1) 0;grid-area:action}.hint__close{flex-shrink:0;background:none;border:none;appearance:none;border-radius:var(--radius);padding:0;margin-right:calc(-1 * var(--spacing-1));color:var(--color);opacity:.7;transition:opacity .2s;grid-area:close;justify-self:end;height:var(--spacing-6);width:var(--spacing-6)}.hint__close:hover,.hint__close[data-hovered]{opacity:1;background:var(--tint-900)}.hint__close[data-focus-visible]{outline:2px solid var(--focus-ring-color);outline-offset:2px}.hint__close[data-pressed]{opacity:1}::view-transition-new(.hint):only-child{animation:hint-slide-in .2s ease-out}::view-transition-old(.hint):only-child{animation:hint-slide-out .2s ease-in;animation-fill-mode:forwards}@keyframes hint-slide-in{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes hint-slide-out{0%{transform:translate(0);opacity:1}to{transform:translate(20px);opacity:0}}.palette-preset{display:grid;grid-template-rows:auto 1fr;padding:.5rem;border:1px solid var(--border);border-radius:var(--radius);transition:background-color 50ms ease-out;cursor:pointer;justify-content:normal;height:auto}.palette-preset :where(.palette-preset__swatches){display:flex;gap:4px;min-width:0;flex-wrap:wrap}.palette-preset :where(.palette-preset__swatch){border-radius:999px;height:calc(var(--spacing-2) * 2);width:calc(var(--spacing-2) * 2);border:.5px solid var(--border)}.palette-preset--selected{background:var(--button-background);border:1px solid light-dark(var(--gray-300),var(--gray-100))}.palette-swatches--inline{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}.palette-swatch--inline{border-radius:999px;height:14px;width:14px;border:.5px solid var(--border);flex-shrink:0}.desktop-time-slider{padding:0}.desktop-time-slider__label{display:block;padding:4px 12px 0;margin:0;font-size:var(--text-xs)}.desktop-time-slider__grid{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;align-items:center}.desktop-time-slider__button{grid-row:1;grid-column:1;z-index:1;justify-self:start;margin-left:12px;display:grid;place-items:center}.desktop-time-slider__button :where(svg){grid-area:1 / 1}.desktop-time-slider__slider{grid-row:1;grid-column:1}@layer components{.resizable{display:flex;height:100%;width:100%}.resizable[data-panel-group-direction=vertical]{flex-direction:column}.resize-handle{--and-a-bit: 6px;background:transparent;position:relative;display:flex;width:1px;align-items:center;justify-content:center;height:calc(100% - 2 * var(--content-radius) - var(--and-a-bit));top:calc(var(--content-radius) + var(--and-a-bit) / 2);z-index:1}.resize-handle--left{transform:translate(2px)}.resize-handle--right{transform:translate(-2px)}.resize-handle:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:.25rem;transform:translate(-50%);border-radius:var(--radius)}.resize-handle[data-separator=hover]:after,.resize-handle[data-separator=active]:after,.resize-handle:focus-visible{background-color:var(--border);outline:none}.resize-handle[data-panel-group-direction=vertical]{height:1px;width:100%}.resize-handle[data-panel-group-direction=vertical]:after{left:0;height:.25rem;width:100%;transform:translate(0) translateY(-50%)}.resize-handle[data-panel-group-direction=vertical]>div{rotate:90deg}}.resizable-handle--icon{background-color:var(--border);z-index:10;display:flex;height:1rem;width:.75rem;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1px solid}@layer components{.toast_viewport{position:fixed;z-index:1;width:250px;bottom:1rem;left:50%;transform:translate(-50%);top:auto;right:auto}@media(min-width:500px){.toast_viewport{bottom:2rem;width:320px}}.toast_root{--gap: .75rem;--peek: .75rem;--scale: max(0, 1 - (var(--toast-index) * .1)) ;--shrink: calc(1 - var(--scale));--height: var(--toast-frontmost-height, var(--toast-height));--offset-y: calc( var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y) );position:absolute;right:0;margin:0 0 0 auto;box-sizing:border-box;background:var(--gray-50);color:var(--gray-900);border:.5px solid var(--gray-100);padding:var(--spacing-3);width:100%;box-shadow:0 2px 10px #0000001a;background-clip:padding-box;border-radius:var(--radius-lg);transform-origin:bottom center;bottom:0;left:auto;-webkit-user-select:none;user-select:none;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s,height .15s;cursor:default;z-index:calc(1000 - var(--toast-index));height:var(--height);transform:translate(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) - (var(--shrink) * var(--height)))) scale(var(--scale))}.toast_root[data-expanded]{transform:translate(var(--toast-swipe-movement-x)) translateY(var(--offset-y));height:var(--toast-height)}.toast_root[data-starting-style],.toast_root[data-ending-style]{transform:translateY(150%)}.toast_root[data-limited]{opacity:0}.toast_root[data-ending-style]{opacity:0}.toast_root[data-ending-style][data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-movement-y) - 150%))}.toast_root[data-ending-style][data-swipe-direction=left]{transform:translate(calc(var(--toast-swipe-movement-x) - 150%)) translateY(var(--offset-y))}.toast_root[data-ending-style][data-swipe-direction=right]{transform:translate(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--offset-y))}.toast_root[data-ending-style][data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-movement-y) + 150%))}.toast_root:after{content:"";position:absolute;top:100%;width:100%;left:0;height:calc(var(--gap) + 1px)}.toast_root[data-type=destructive]{border-color:var(--destructive-500);background:var(--destructive);color:#fff}.toast_root[data-type=destructive] :where(.toast_close:hover){background:var(--destructive-500)}.toast_content{overflow:hidden;transition:opacity .25s}.toast_content[data-behind]{opacity:0}.toast_content[data-expanded]{opacity:1}.toast_title{font-weight:500;font-size:.975rem;line-height:1.25rem;margin:0}.toast_description{font-size:.925rem;line-height:1.25rem;margin:0}.toast_close{position:absolute;top:.5rem;right:.5rem;padding:0;border:none;background:transparent;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);cursor:pointer;color:inherit}.toast_close:where(:hover){background-color:var(--gray-100)}}@layer primitives{a{border-radius:var(--radius)}a:link{color:color-mix(in srgb,var(--color) 95%,var(--background));text-decoration:none}a:visited{color:color-mix(in srgb,var(--color) 75%,var(--background))}a:hover,a:focus-visible{color:var(--color);text-decoration:underline}a:focus-visible{outline:1px solid var(--border)}a:active{color:color-mix(in srgb,var(--color) 95%,var(--background))}h1,h2,h3,h4,h5,h6{border-radius:var(--radius)}:is(h1,h2,h3,h4,h5,h6):focus-visible{outline:1px solid var(--border)}.button{line-height:1;padding:.5rem;cursor:pointer;text-align:center;background:var(--background);color:var(--color);border-radius:var(--radius);transition:background-color 125ms;transition-delay:var(--button-transition-delay)}.button:focus-visible{outline:1px solid var(--outline);outline-offset:2px}@media screen and (pointer:fine){.button:hover{background:color-mix(in oklch,var(--background) 95%,var(--color))}}.button--accent{background-color:var(--accent)}@media screen and (pointer:fine){.button--accent:hover{background:color-mix(in oklch,var(--accent) 95%,var(--color))}}.button--primary{background-color:var(--primary);color:var(--background)}@media screen and (pointer:fine){.button--primary:hover{background:color-mix(in oklch,var(--primary) 95%,var(--color))}}.button--destructive{background:transparent;border:1px solid var(--destructive);color:var(--destructive)}@media screen and (pointer:fine){.button--destructive:hover{background:var(--destructive);color:var(--background)}}.divider{border:none;display:block;height:1px;background-color:var(--border);margin:4px 0}.link{display:inline-grid;grid-template-columns:auto 1fr;align-items:center;gap:8px}}@layer components{.menu-positioner{outline:0}.menu-separator{margin:.375rem 0;height:1px;background-color:light-dark(var(--border),var(--gray-100))}.menu-popup,.menu-submenu-popup{box-sizing:border-box;padding-block:.25rem;border-radius:var(--radius-md);-webkit-backdrop-filter:var(--floating-backdrop);backdrop-filter:var(--floating-backdrop);background:var(--floating-background);color:var(--gray-900);transform-origin:var(--transform-origin);transition:transform .15s,opacity .15s;filter:drop-shadow(var(--popover-shadow))}:is(.menu-popup,.menu-submenu-popup)[data-ending-style]{opacity:0}@media(prefers-color-scheme:light){.menu-popup,.menu-submenu-popup{outline:1px solid var(--gray-200)}}@media(prefers-color-scheme:dark){.menu-popup,.menu-submenu-popup{outline:1px solid var(--gray-50);outline-offset:-1px}}.menu-submenu-popup[data-starting-style],.menu-submenu-popup[data-ending-style]{transform:scale(.9);opacity:0}.menu-arrow{display:flex}.menu-arrow[data-side=top]{bottom:-8px;rotate:180deg}.menu-arrow[data-side=bottom]{top:-8px;rotate:0deg}.menu-arrow[data-side=left]{right:-13px;rotate:90deg}.menu-arrow[data-side=right]{left:-13px;rotate:-90deg}.menu-arrow-fill{fill:canvas}@media(prefers-color-scheme:light){.menu-arrow-outer-stroke{fill:var(--gray-200)}}@media(prefers-color-scheme:dark){.menu-arrow-inner-stroke{fill:var(--gray-300)}}.menu-item,.menu-submenu-trigger{outline:0;cursor:default;-webkit-user-select:none;user-select:none;padding-block:.5rem;padding-left:1rem;padding-right:2rem;display:flex;font-size:.875rem;line-height:1rem}:is(.menu-item,.menu-submenu-trigger)[data-popup-open]{z-index:0;position:relative}:is(.menu-item,.menu-submenu-trigger)[data-popup-open]:before{content:"";z-index:-1;position:absolute;inset-block:0;inset-inline:.25rem;border-radius:var(--radius);background-color:var(--gray-100)}:is(.menu-item,.menu-submenu-trigger)[data-highlighted]{z-index:0;position:relative;color:var(--gray-50)}:is(.menu-item,.menu-submenu-trigger)[data-disabled]{z-index:0;position:relative;pointer-events:none;opacity:.5}:is(.menu-item,.menu-submenu-trigger)[data-highlighted]:before{content:"";z-index:-1;position:absolute;inset-block:0;inset-inline:.25rem;border-radius:var(--radius);background-color:var(--gray-900)}:is(.menu-item,.menu-submenu-trigger)[data-variant=destructive]{color:var(--destructive)}:is(.menu-item,.menu-submenu-trigger)[data-variant=destructive][data-highlighted]:before{background-color:var(--destructive-25)}.menu-icon-right,.menu-icon-left{position:absolute;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem}:is(.menu-icon-right,.menu-icon-left) svg{width:.875rem;height:.875rem}.menu-icon-right{right:.5rem}.menu-icon-left{left:.5rem}.menu-submenu-trigger{align-items:center;justify-content:space-between;gap:1rem;padding-right:1rem}.menu-group-label{outline:0;cursor:default;-webkit-user-select:none;user-select:none;display:flex;padding-block-start:.5rem;padding-block-end:.5rem;padding-left:.875rem;padding-right:2rem;font-size:var(--text-xs);line-height:1rem}.menu-checkbox-item{outline:0;cursor:default;-webkit-user-select:none;user-select:none;padding-block:.5rem;padding-left:2rem;padding-right:2rem;display:flex;align-items:center;font-size:.875rem;line-height:1rem;position:relative}.menu-checkbox-item[data-highlighted]{z-index:0;position:relative;color:var(--gray-50)}.menu-checkbox-item[data-highlighted]:before{content:"";z-index:-1;position:absolute;inset-block:0;inset-inline:.25rem;border-radius:var(--radius);background-color:var(--gray-900)}.menu-checkbox-item[data-disabled]{pointer-events:none;opacity:.5}.menu-checkbox-indicator{position:absolute;left:.5rem;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem}.menu-checkbox-indicator[data-unchecked]{display:none}.menu-checkbox-indicator svg{width:.875rem;height:.875rem}.menu-radio-item{outline:0;cursor:default;-webkit-user-select:none;user-select:none;padding-block:.5rem;padding-left:2rem;padding-right:2rem;display:flex;align-items:center;font-size:.875rem;line-height:1rem;position:relative}.menu-radio-item[data-highlighted]{z-index:0;position:relative;color:var(--gray-50)}.menu-radio-item[data-highlighted]:before{content:"";z-index:-1;position:absolute;inset-block:0;inset-inline:.25rem;border-radius:var(--radius);background-color:var(--gray-900)}.menu-radio-item[data-disabled]{pointer-events:none;opacity:.5}.menu-radio-indicator{position:absolute;display:flex;align-items:center;justify-content:center;width:.5rem;height:.5rem;left:.75rem}.menu-radio-indicator[data-unchecked]{display:none}.menu-radio-indicator svg{width:.875rem;height:.875rem}.menu-item:has(>.menu-icon-right),.menu-item--icon-right,.menu-checkbox-item:has(>.menu-icon-right){padding-right:.5rem;align-items:center;gap:3.5rem;justify-content:space-between}.menu-item:has(>.menu-icon-left),.menu-item--icon-left{padding-left:2rem}}@layer utilities{.text-xs{font-size:var(--text-xs)}.no-wrap{white-space:nowrap;text-wrap:nowrap}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:var(--spacing-2)}.pb-3{padding-bottom:var(--spacing-3)}}@layer global{:root{--studio-background: light-dark(lch(98 0 0), lch(4.8 .7 272));--content-radius: var(--radius-xl);--mobile-controls-h: 160px;--bottom-bar-height: 54px;--canvas-bottom: calc( env(safe-area-inset-bottom, 0) + var(--mobile-controls-h) + var(--bottom-bar-height) + var(--spacing-2) );--floating-background: color-mix(in srgb, canvas 90%, transparent);--floating-backdrop: blur(12px)}#root{isolation:isolate;height:100dvh;position:fixed;width:100%}body{min-height:100dvh}html,body{background:var(--background);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;width:100%;margin:0;padding:0}#root,body{margin:0}html,body,#root{overflow:hidden}html{min-height:calc(100% + env(safe-area-inset-top))}.app-sidebar{height:100%}.content{display:flex;flex-direction:column;position:relative;-webkit-box-align:stretch;align-items:stretch;justify-items:stretch;background-color:var(--studio-background);border-radius:var(--content-radius);overflow:hidden;border-width:1px;border-style:solid;border-color:light-dark(var(--gray-200),var(--gray-50));border-image:initial;--margin-y: 8px;margin:var(--margin-y) 0;height:calc(100% - var(--margin-y) * 2)}.handle--invisible{background-color:transparent}.handle--invisible:focus-visible{outline:none}.canvas{height:100%}.mobile-layout{position:relative;height:100%}.mobile-content{position:absolute;-webkit-user-select:none;user-select:none;border:none;border-radius:0;height:100%;margin:0;inset:0;background:var(--background)}.mobile-float{position:absolute;bottom:0;left:0;right:0;z-index:1100;pointer-events:none;padding-bottom:env(safe-area-inset-bottom,0);background-image:linear-gradient(0deg,#fff,#fffffffd,#fffffff5,#ffffffea,#ffffffda,#ffffffc6,#ffffffb0,#ffffff98,#ffffff80,#ffffff67,#ffffff4f,#ffffff39,#ffffff25,#ffffff15,#ffffff0a,#ffffff02,#fff0),linear-gradient(0deg,var(--background),#ffffff69 62.5%,#ffffff3d 75% 75%,#ffffff00 100%)}@media(prefers-color-scheme:dark){.mobile-float{background-image:linear-gradient(0deg,#000,#000000fd,#000000f5,#000000ea,#000000da,#000000c6,#000000b0,#00000098,#00000080,#00000067,#0000004f,#00000039,#00000025,#00000015,#0000000a,#00000002,#0000),linear-gradient(0deg,#000,#000000a1 59.5%,#0000006e,#0000003b 80%,#00000014 90.5%,#0000)}}.mobile-float>*{pointer-events:auto}.mobile-controls-container{overflow-y:auto;height:var(--mobile-controls-h, 160px);position:relative;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}.mobile-controls-container>*,.mobile-exports>*{pointer-events:auto}.mobile-controls{display:flex;flex-direction:column;flex:1 1 auto;height:auto;min-height:0}.mobile-controls :where(.sidebar-controls-overflow){--fade-gradient: var(--background);flex:1 1 auto;min-height:0}.mobile-controls :where(.last-row){padding-bottom:env(safe-area-inset-bottom,0px)}.mobile-exports-drawer-content[data-image-only]{max-height:40%;overflow-y:hidden}.mobile-exports-drawer-inner{display:flex;flex-direction:column;justify-content:space-between;gap:var(--spacing-2);height:100%;padding-bottom:env(safe-area-inset-bottom,0px)}.mobile-exports-settings{overflow-y:auto;flex:1;min-height:0;display:grid;align-content:start;gap:var(--spacing)}.mobile-row{display:grid;padding:var(--spacing) var(--spacing-2)}.mobile-common-knobs{margin-top:auto}.mobile-exports-actions{flex-shrink:0}.mobile-export-btn{width:100%}.mobile-exports{display:grid;align-content:center;margin-top:auto;padding-bottom:var(--spacing);pointer-events:none}.modal-content{position:relative;min-width:clamp(200px,500px,90vw);max-height:90dvh;overflow-y:auto;background-color:var(--gray-50);border-radius:calc(var(--radius) * 2);border:1px solid var(--border);padding:.5rem 1rem}@supports (animation-timeline: scroll()){.fade-mask-y{--box-padding: 24px;--fade-gradient: var(--mask)}.fade-mask-y :where(.fade-mask-y>:first-child){margin-top:calc(-1 * var(--box-padding))}.fade-mask-y :where(.fade-mask-y>:last-child){margin-bottom:calc(-1 * var(--box-padding))}.fade-mask-y:after,.fade-mask-y:before{content:"";position:sticky;display:block;left:0;width:100%;height:var(--box-padding);z-index:1;pointer-events:none;opacity:0;animation:scroll linear;animation-timeline:scroll();animation-fill-mode:both}.fade-mask-y:before{top:0;background:linear-gradient(0deg,var(--fade-gradient));animation-range:var(--fade-range-start, 20px) var(--fade-range-end, 50px)}.fade-mask-y:after{bottom:0;background:linear-gradient(180deg,var(--fade-gradient));animation-direction:reverse;animation-range:calc(100% - var(--fade-range-end, 50px)) calc(100% - var(--fade-range-start, 20px))}.fade-mask-x{--box-padding: 24px;--fade-gradient: var(--mask)}.fade-mask-x :where(.fade-mask-x>:first-child){margin-left:calc(-1 * var(--box-padding))}.fade-mask-x :where(.fade-mask-x>:last-child){margin-right:calc(-1 * var(--box-padding))}.fade-mask-x:after,.fade-mask-x:before{content:"";position:sticky;top:0;height:100%;width:var(--box-padding);flex-shrink:0;z-index:1;pointer-events:none;opacity:0;animation:scroll linear;animation-timeline:scroll(x);animation-fill-mode:both}.fade-mask-x:before{left:0;background:linear-gradient(270deg,var(--fade-gradient));animation-range:var(--fade-range-start, 20px) var(--fade-range-end, 50px)}.fade-mask-x:after{right:0;background:linear-gradient(90deg,var(--fade-gradient));animation-direction:reverse;animation-range:calc(100% - var(--fade-range-end, 50px)) calc(100% - var(--fade-range-start, 20px))}}.kbd{background:var(--gray-100);border-radius:var(--radius);color:var(--gray-900);min-width:1.25rem;height:1.25rem;padding-inline:4px;font-weight:500;line-height:1;font-size:var(--text-sm);display:inline-flex;justify-content:center;width:fit-content;align-items:center}.kbd-shortcut{display:flex;gap:var(--spacing);width:auto}.icon-crossfade{--icon-crossfade-dur: .15s}.icon-crossfade :where(svg){transition:opacity var(--icon-crossfade-dur) ease-out,filter var(--icon-crossfade-dur) ease-out,transform var(--icon-crossfade-dur) ease-out}.icon-crossfade .icon-visible{opacity:1;filter:blur(0px);transform:scale(1)}.icon-crossfade .icon-hidden{opacity:0;filter:blur(4px);transform:scale(.4);pointer-events:none}@media(prefers-reduced-motion:reduce){.icon-crossfade{--icon-crossfade-dur: 0s}}@keyframes scroll{0%{opacity:0}to{opacity:1}}}.media-controls{--transition-in-dur: .1s;--transition-in: opacity var(--transition-in-dur) ease-out, transform var(--transition-in-dur) ease-out, display var(--transition-in-dur) ease-out allow-discrete;--transition-out-dur: 80ms;--transition-out: opacity var(--transition-out-dur) ease-in, transform var(--transition-out-dur) ease-in, display var(--transition-out-dur) ease-in allow-discrete;--player-height: 60px;--scale-in-start: .9;--scale-out-start: .93;--y-in: calc(var(--player-height) / 2);--y-out: calc(var(--player-height) / 2);transform:translate(-50%) translateY(0) scale(1);min-width:clamp(300px,100%,480px);padding:0 .5rem;margin-bottom:var(--spacing-2);display:block;opacity:1;transition:var(--transition-in);z-index:var(--canvas-overlay-z-2);position:absolute;bottom:1rem;left:50%}@starting-style{.media-controls{opacity:0;transform:translate(-50%) translateY(var(--y-in)) scale(var(--scale-in-start))}}.media-controls[hidden]{display:none;opacity:0;transform:translate(-50%) translateY(var(--y-out)) scale(var(--scale-out-start));transition:var(--transition-out)}@media(prefers-reduced-motion:reduce){.media-controls{--transition-in-dur: 0ms;--transition-out-dur: 0ms}}@media screen and (max-width:768px){.media-controls{position:relative;left:auto;bottom:auto;transform:translateY(0) scale(1);--player-height: 50px}@starting-style{.media-controls{transform:translateY(var(--y-in)) scale(var(--scale-in-start))}}.media-controls[hidden]{transform:translateY(var(--y-out)) scale(var(--scale-out-start))}}.media-controls__container{position:relative;height:var(--player-height, 60px);display:grid;grid-template-columns:auto 1fr;background:var(--floating-background);-webkit-backdrop-filter:var(--floating-backdrop);backdrop-filter:var(--floating-backdrop);padding:var(--spacing-2) var(--spacing-2);border-radius:var(--radius-xl);align-items:center;gap:var(--spacing-2);filter:drop-shadow(var(--popover-shadow))}@media screen and (max-width:768px){.media-controls__container{border-radius:var(--radius-button);padding:var(--spacing) var(--spacing-3) var(--spacing-2) var(--spacing-2)}}.controls-state{--transition-dur: .15s;width:2rem;height:2rem;padding:0;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:inherit;transition:opacity var(--transition-dur) ease-out;position:relative}.controls-state :where(svg){width:1.5rem;height:1.5rem;position:absolute}.controls-state:hover{opacity:.85}.controls-state:active svg{transform:scale(.93)}.controls-state:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius)}@media(prefers-reduced-motion:reduce){.controls-state{--transition-dur: 0s}}@media screen and (max-width:768px){.controls-state{padding:4px 0 0}}.media-progress-root{width:100%;position:relative;contain:layout style paint;display:flex;align-items:center;height:100%}@media screen and (max-width:768px){.media-progress-root{padding:4px 0 0}}.media-progress-control{box-sizing:border-box;display:flex;align-items:center;width:100%;padding-block:.75rem;touch-action:none;-webkit-user-select:none;user-select:none}.media-progress-track{width:100%;height:8px;contain:strict;background-color:var(--gray-200);box-shadow:inset 0 0 0 1px var(--gray-200);border-radius:var(--radius-button);-webkit-user-select:none;user-select:none;transition:transform .2s ease-in-out;transform-origin:top;overflow:clip}.media-progress-value,.media-duration-value{opacity:.5;position:absolute;font-size:var(--text-sm);font-variant:tabular-nums;top:-4px;user-select:none;-webkit-user-select:none}.media-progress-value{left:0}.media-duration-value{right:0}.media-time-ms{font-size:.85em;opacity:.7}:is(.media-progress-control:active,.media-progress-control:hover) .media-progress-track{transform:scaleY(1.45)}.media-progress-control:hover .media-progress-value,.media-progress-control:hover .media-duration-value{opacity:1}.media-progress-indicator{position:absolute;inset:0;transform-origin:left;will-change:transform;background-color:var(--primary);border-radius:var(--radius) 0 0 var(--radius);-webkit-user-select:none;user-select:none}.media-progress-thumb{opacity:0;width:1.25rem;height:1.25rem;-webkit-user-select:none;user-select:none}.play-progress{position:absolute;top:0;left:0;height:100%;background-color:var(--primary);opacity:1}