:root{--background:oklch(14.7% .004 49.3);--foreground:oklch(98.6% .002 67.8);--card:oklch(21.4% .009 43.1);--card-foreground:oklch(98.6% .002 67.8);--popover:oklch(21.4% .009 43.1);--popover-foreground:oklch(98.6% .002 67.8);--primary:oklch(92.2% .005 34.3);--primary-foreground:oklch(21.4% .009 43.1);--secondary:oklch(26.8% .011 36.5);--secondary-foreground:oklch(98.6% .002 67.8);--muted:oklch(26.8% .011 36.5);--muted-foreground:oklch(71.4% .014 41.2);--accent:oklch(26.8% .011 36.5);--accent-foreground:oklch(98.6% .002 67.8);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(54.7% .021 43.1);--chart-1:oklch(86.8% .007 39.5);--chart-2:oklch(54.7% .021 43.1);--chart-3:oklch(43.8% .017 39.3);--chart-4:oklch(36.7% .016 35.7);--chart-5:oklch(26.8% .011 36.5);--sidebar:oklch(21.4% .009 43.1);--sidebar-foreground:oklch(98.6% .002 67.8);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.6% .002 67.8);--sidebar-accent:oklch(26.8% .011 36.5);--sidebar-accent-foreground:oklch(98.6% .002 67.8);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(54.7% .021 43.1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--foreground);background-color:var(--background);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:monospace;font-weight:400;line-height:1.5}@media (prefers-color-scheme:light){:root{--background:oklch(100% 0 0);--foreground:oklch(14.7% .004 49.3);--card:oklch(100% 0 0);--card-foreground:oklch(14.7% .004 49.3);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.7% .004 49.3);--primary:oklch(21.4% .009 43.1);--primary-foreground:oklch(98.6% .002 67.8);--secondary:oklch(96% .002 17.2);--secondary-foreground:oklch(21.4% .009 43.1);--muted:oklch(96% .002 17.2);--muted-foreground:oklch(54.7% .021 43.1);--accent:oklch(96% .002 17.2);--accent-foreground:oklch(21.4% .009 43.1);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.2% .005 34.3);--input:oklch(92.2% .005 34.3);--ring:oklch(71.4% .014 41.2);--chart-1:oklch(86.8% .007 39.5);--chart-2:oklch(54.7% .021 43.1);--chart-3:oklch(43.8% .017 39.3);--chart-4:oklch(36.7% .016 35.7);--chart-5:oklch(26.8% .011 36.5);--radius:.625rem;--sidebar:oklch(98.6% .002 67.8);--sidebar-foreground:oklch(14.7% .004 49.3);--sidebar-primary:oklch(21.4% .009 43.1);--sidebar-primary-foreground:oklch(98.6% .002 67.8);--sidebar-accent:oklch(96% .002 17.2);--sidebar-accent-foreground:oklch(21.4% .009 43.1);--sidebar-border:oklch(92.2% .005 34.3);--sidebar-ring:oklch(71.4% .014 41.2);color:var(--foreground);background-color:var(--background)}}*{box-sizing:border-box}a{color:var(--primary-foreground);-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:var(--accent-foreground)}body{margin:0}h1{z-index:1000;pointer-events:auto;margin:0;font-family:Major Mono Display,monospace;font-size:2em;line-height:1;position:fixed;top:16px;left:16px}h2{margin-top:0;font-family:monospace}input[type=range],input[type=checkbox]{accent-color:var(--primary)}hr{border-color:var(--border);width:100%}button{background-color:var(--primary);color:var(--primary-foreground);cursor:pointer;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:400;transition:border-color .25s,background-color .25s,color .25s}button:hover:not([disabled]){color:var(--primary-foreground);background-color:color-mix(in oklab, var(--primary) 80%, transparent)}button:focus,button:focus-visible{outline:4px auto var(--input)}button[disabled]{opacity:.6;cursor:not-allowed}.icon-button{border-radius:50%;padding:.6em;font-size:.75em;display:flex}.select{width:100%;position:relative}.select__trigger{width:100%;color:var(--input-foreground);background-color:color-mix(in oklab, var(--input) 30%, transparent);border-color:var(--input);justify-content:space-between;align-items:center;display:flex}.select__trigger:hover{background-color:color-mix(in oklab, var(--input) 50%, transparent)}.select__icon{font-size:12px}.select__options{background:var(--popover);box-shadow:0 4px 16px var(--shadow);z-index:10;border-radius:6px;margin:0;padding:6px 0;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0}.select__option{cursor:pointer;padding:10px 14px}.select__option:hover,.select__option.is-selected{background:var(--accent)}.select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}.app-actions{gap:8px;display:flex;position:absolute;top:16px;right:16px}.app-actions__input-file{opacity:0;width:0;height:0}.app-actions__section{border:1px solid var(--border);background-color:color-mix(in oklab, var(--background) 60%, transparent);border-radius:32px;align-items:center;gap:4px;padding:4px;display:flex}.app-actions__icon{width:16px;height:16px;stroke:var(--muted-foreground);margin-inline:4px 2px}.app-actions__label{color:var(--muted-foreground);margin:0 0 0 4px;font-size:12px}.app-actions__action svg{width:16px;height:16px}.effect-actions{gap:8px;display:flex}.effect-actions__action{color:var(--secondary-foreground);background:0 0}.effect-actions__action svg{width:16px;height:16px}.effects-panel{width:var(--settings-panel-width);pointer-events:auto;background:color-mix(in oklab, var(--background) 60%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:16px;flex-direction:column;padding:16px;transition:background .2s,transform .2s;display:flex}@media (width<576px){.effects-panel{width:100%;height:var(--settings-panel-height)}}.effects-panel__tabs{gap:8px;margin-bottom:8px;display:flex}.effects-panel__tab{flex:1;width:0}.effects-panel__tab:not(.effects-panel__tab--active){background:var(--border);color:var(--secondary-foreground);outline:1px solid var(--border)}.effects-list{scroll-snap-type:x mandatory;grid-template-columns:repeat(5,1fr);gap:8px;margin:0;padding:0;list-style:none;display:grid}@media (width<576px){.effects-list{height:80px;display:flex;overflow-x:auto}}.effects-list__effect{aspect-ratio:.75;scroll-snap-align:start;width:100%;height:100%;display:flex;position:relative}.effects-list__effect-button{background:0 0;border:none;border-radius:4px;align-items:flex-end;gap:8px;padding:0;display:flex;overflow:hidden}.effects-list__effect-button:hover img{opacity:1}.effects-list__effect-button:hover .effects-list__effect-background{opacity:.75}.effects-list__effect-button--active{filter:grayscale()}@media (width<576px){.effects-list__effect-button{border-radius:8px}}.effects-list__effect-button img{object-fit:cover;opacity:.75;width:100%;height:100%;transition:opacity .2s}.effects-list__effect-button p{z-index:3;text-align:center;text-wrap:balance;width:100%;color:var(--foreground);margin:0;padding-bottom:4%;font-size:.8em;position:absolute}.effects-list__effect-options-icon{z-index:2;opacity:0;visibility:hidden;width:20px;height:20px;stroke:var(--foreground);transition:opacity .2s,visibility .2s;position:absolute;top:50%;right:50%;transform:translate(50%,-50%)}.effects-list__effect-options-icon--visible{opacity:1;visibility:visible}.effects-list__effect-background{z-index:1;opacity:0;visibility:hidden;background:linear-gradient(#0000 0%,#000 100%);transition:opacity .2s,visibility .2s;position:absolute;inset:0}.effects-list__effect-background--visible{opacity:1;visibility:visible}.effects-queue{flex-direction:column;gap:8px;height:100%;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.effects-queue__effect{align-items:center;gap:8px;display:flex}.effects-queue__effect-button{background:var(--border);border:none;border-radius:8px;align-items:center;gap:8px;width:100%;padding:8px;display:flex;overflow:hidden}@media (width<576px){.effects-queue__effect-button{padding:4px}}.effects-queue__effect-button img,.effects-queue__effect-button video{object-fit:cover;border-radius:4px;width:32px;height:32px}.effects-queue__effect-button p{color:var(--foreground);margin:0}.effects-queue__no-layers{text-align:center;color:var(--muted-foreground);margin-block:12px}.effects-properties{flex-direction:column;list-style:none;display:flex}.effects-properties__header{justify-content:space-between;align-items:center;display:flex}.effects-properties__title{margin:0}.effects-properties__list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.effects-properties__property{justify-content:space-between;align-items:center;gap:8px;padding-block:8px;display:flex}@media (width<416px){.effects-properties__property{flex-direction:column}}.effects-properties__property-value{color:var(--secondary-foreground);margin-left:1ch;font-size:.75rem}.effects-properties-tabs{flex-direction:column;max-width:100vw;list-style:none;display:flex}.effects-properties-tabs__header{justify-content:space-between;align-items:center;display:flex}.effects-properties-tabs__title{text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.effects-properties-tabs__go-back{align-items:center;gap:8px;display:flex}.effects-properties-tabs__go-back-icon{width:16px;height:16px}.effects-properties-tabs__input{grid-template-columns:repeat(3,1fr);align-items:center;gap:8px;height:72px;padding-block:16px;display:grid}.effects-properties-tabs__input span{text-align:end}.effects-properties-tabs__input input[type=color]{justify-self:center}.effects-properties-tabs__properties{scroll-snap-type:x mandatory;gap:8px;margin:0;padding:0;display:flex;overflow:auto hidden}.effects-properties-tabs__property{text-align:center;scroll-snap-align:start;flex-direction:column;flex-shrink:0;align-items:center;gap:4px;width:56px;font-size:.75em;line-height:1;display:flex}.effects-properties-tabs__property span{color:var(--muted-foreground)}.effects-properties-tabs__property button{color:var(--muted-foreground);background-color:var(--border)}.effects-properties-tabs__property--active span{color:var(--foreground)}.effects-properties-tabs__property--active button{color:var(--primary-foreground);background-color:var(--primary)}.scene-actions{gap:8px;display:flex;position:absolute;bottom:8px;right:50%;transform:translate(50%)}.scene-actions__section{border:1px solid var(--border);background-color:color-mix(in oklab, var(--background) 60%, transparent);border-radius:32px;align-items:center;gap:4px;padding:4px;display:flex}.scene-actions__icon{width:16px;height:16px;stroke:var(--muted-foreground);margin-inline:4px 2px}.scene-actions__label{color:var(--muted-foreground);margin:0 0 0 4px;font-size:12px}.scene-actions__action svg{width:16px;height:16px}*{transition:height .2s ease-out}main{background:var(--background);width:100vw;height:100dvh;display:flex;overflow:hidden}@media (width<576px){main{flex-direction:column}}.canvas-wrapper{width:calc(100% - var(--settings-panel-width));position:relative}@media (width<576px){.canvas-wrapper{width:100%;height:calc(100% - var(--settings-panel-height))}}.effect-buttons{flex-direction:column;gap:10px;display:flex}.sampler-2d-input{grid-template-columns:repeat(4,1fr);display:grid}.sampler-2d-input input{border:none;width:16px;height:16px;padding:0}.sampler-2d-input input::-webkit-color-swatch-wrapper{padding:0}