:root{--app:#0c0c0e;--panel:#141417;--surface:#1b1b1f;--surface-2:#222228;--surface-3:#2c2c33;--border:#25252b;--border-strong:#36363e;--text:#ededf0;--text-2:#a1a1aa;--text-3:#71717a;--accent:#f4f4f5;--accent-ink:#0c0c0e;--tint:#ffffff0f;--ring:#ffffff8c;--danger:#f87171;--r-lg:12px;--r-md:8px;--r-sm:6px;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in-out:cubic-bezier(.77, 0, .175, 1);--font:"Inter", system-ui, -apple-system, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{--panel-w:340px;--stage-r:0px;grid-template-columns:minmax(0, 1fr) var(--panel-w);transition:grid-template-columns .24s var(--ease-out);background:var(--app);color:var(--text);font:13px/1.45 var(--font);font-feature-settings:"cv11", "ss01";-webkit-font-smoothing:antialiased;grid-template-rows:100vh;display:grid;overflow:hidden}[hidden]{display:none!important}body.is-resizing{cursor:col-resize;-webkit-user-select:none;user-select:none;transition:none}body.is-resizing *{cursor:col-resize!important}body.no-anim,body.no-anim *{transition:none!important}body.is-collapsed{--stage-r:12px;grid-template-columns:minmax(0,1fr) 0}body.is-collapsed .panel{opacity:0;pointer-events:none}button{font:inherit;color:inherit}svg{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:16px;height:16px}:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.num{font-variant-numeric:tabular-nums}.pill,.sample,.dropzone,.btn,.seg span,.chip span,.palette>span,.menu button,.link{transition-property:transform,background-color,border-color,color,opacity,box-shadow;transition-duration:.16s;transition-timing-function:var(--ease-out)}.pill:active,.sample:active,.btn:active:not(:disabled),.seg span:active,.chip span:active,.palette>span:active,.menu button:active:not(:disabled){transform:scale(.97)}.dropzone:active{transform:scale(.99)}.stage{min-width:0;position:relative;overflow:hidden}.stage__canvas{inset:12px var(--stage-r) 12px 12px;border-radius:var(--r-lg);background-color:var(--stage-bg,#0b0b0c);box-shadow:inset 0 0 0 1px var(--border);background-image:radial-gradient(#80808029 1px,#0000 1.3px);background-position:9px 9px;background-size:18px 18px;transition:background-color .25s;position:absolute;overflow:hidden}.stage__canvas.is-transparent{background-color:#1a1a1d;background-image:conic-gradient(#232327 25%, transparent 0 50%, #232327 0 75%, transparent 0);background-size:20px 20px}.frame{justify-content:center;align-items:center;display:flex;position:absolute;inset:64px 32px 32px}.frame canvas{touch-action:none;display:block}.empty{inset:12px var(--stage-r) 12px 12px;border-radius:var(--r-lg);background:var(--app);box-shadow:inset 0 0 0 1px var(--border);flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:24px;display:flex;position:absolute;overflow:hidden}.empty:before{content:"";z-index:0;pointer-events:none;background:radial-gradient(#ffffff12 1px,#0000 1.3px) 9px 9px/18px 18px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(60% 55% at 50% 42%,#000,#0000);mask-image:radial-gradient(60% 55% at 50% 42%,#000,#0000)}.empty>*{z-index:1;position:relative}.demo{flex-direction:column;align-items:center;gap:12px;display:flex}.demo__frame{justify-content:center;align-items:center;width:220px;height:176px;display:flex}.demo__frame canvas{display:block}.demo__tabs{background:var(--surface);border:1px solid var(--border);border-radius:999px;gap:2px;padding:3px;display:flex}.demo__tabs button{cursor:pointer;height:24px;color:var(--text-3);transition-property:background-color,color,transform;transition-duration:.16s;transition-timing-function:var(--ease-out);background:0 0;border:0;border-radius:999px;padding:0 12px;font-size:12px;font-weight:500}.demo__tabs button:active{transform:scale(.97)}.demo__tabs button[aria-pressed=true]{background:var(--surface-3);color:var(--text)}@media (hover:hover) and (pointer:fine){.demo__tabs button:hover{color:var(--text)}}.empty>*{animation:enter .5s var(--ease-out) both}.empty>:nth-child(2){animation-delay:60ms}.empty>:nth-child(3){animation-delay:.12s}.empty>:nth-child(4){animation-delay:.18s}.empty>:nth-child(5){animation-delay:.24s}@keyframes enter{0%{opacity:0;transform:translateY(8px)}}.intro{text-align:center;max-width:520px}.intro__title{letter-spacing:-.02em;text-wrap:balance;margin:0;font-size:22px;font-weight:600;line-height:1.25}.intro__sub{color:var(--text-2);text-wrap:balance;margin:8px 0 0;font-size:14px}.dropzone{border:1.5px dashed var(--border-strong);background:var(--panel);cursor:pointer;border-radius:16px;flex-direction:column;align-items:center;gap:8px;width:min(480px,100%);padding:32px 24px;display:flex}.dropzone__icon{background:var(--surface-2);width:40px;height:40px;color:var(--text);border-radius:10px;margin-bottom:4px;padding:10px}.dropzone__title{font-size:15px;font-weight:600}.dropzone__sub{color:var(--text-2)}.dropzone__sub u{-webkit-text-decoration-color:var(--text-3);text-decoration-color:var(--text-3);text-underline-offset:3px}.samples{flex-direction:column;align-items:center;gap:10px;display:flex}.samples__label{color:var(--text-3);font-size:12px}.samples__row{gap:10px;display:flex}.sample{border:1px solid var(--border);background:var(--panel);cursor:pointer;color:var(--text-2);border-radius:10px;flex-direction:column;align-items:center;gap:6px;padding:6px 6px 8px;font-size:12px;display:flex}.sample img{object-fit:cover;background:var(--surface);border-radius:6px;width:68px;height:68px;display:block}.sample.is-loading{opacity:.5;pointer-events:none}.empty__note{color:var(--text-3);margin:0;font-size:12px}@media (hover:hover) and (pointer:fine){.dropzone:hover{border-color:var(--text-3)}.sample:hover{border-color:var(--border-strong);color:var(--text)}}.stagebar{pointer-events:none;justify-content:space-between;gap:8px;display:flex;position:absolute;top:24px;left:24px;right:12px}.pill{pointer-events:auto;-webkit-backdrop-filter:blur(12px);cursor:pointer;background:#141417b8;border:1px solid #ffffff14;border-radius:999px;align-items:center;gap:8px;height:32px;padding:0 12px;font-size:12px;font-weight:500;display:inline-flex}.pill__name{text-overflow:ellipsis;white-space:nowrap;max-width:180px;color:var(--text-2);font-weight:400;overflow:hidden}.pill svg{color:var(--text-2)}.stagebar .pill:last-child{margin-right:12px}body.is-collapsed .stagebar{right:132px}.expand{z-index:3;position:absolute;top:24px;right:24px}@media (hover:hover) and (pointer:fine){.pill:hover{background:#222228e6;border-color:#ffffff24}}.ai{border-radius:var(--r-lg);-webkit-backdrop-filter:blur(16px);width:min(360px,100% - 48px);transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);background:#141417d6;border:1px solid #ffffff14;padding:12px 14px;position:absolute;bottom:28px;left:calc(50% + 6px);transform:translate(-50%);box-shadow:0 12px 32px #00000059}@starting-style{.ai{opacity:0;transform:translate(-50%,8px)}}.ai.is-leaving{opacity:0;transform:translate(-50%,8px)}.ai__row{align-items:center;gap:10px;display:flex}.ai__label{flex:1;min-width:0;font-weight:500}.ai__meta{color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12px}.ai__icon{flex:none;place-items:center;width:16px;height:16px;display:grid}.ai__icon.spin:before{content:"";border:1.75px solid var(--surface-3);border-top-color:var(--text);border-radius:50%;width:12px;height:12px;animation:.6s linear infinite spin}.ai__icon.ok{color:var(--text)}.ai__icon.err{color:var(--danger)}@keyframes spin{to{transform:rotate(360deg)}}.ai__track{background:var(--surface-3);border-radius:999px;height:3px;margin-top:10px;position:relative;overflow:hidden}.ai__bar{border-radius:inherit;background:var(--text);transform-origin:0;width:100%;transform:scaleX(var(--p,0));transition:transform .3s var(--ease-out);position:absolute;top:0;bottom:0;left:0}.ai__track.is-busy .ai__bar{background:linear-gradient(90deg, transparent, var(--text), transparent);width:40%;transition:none;animation:1.1s linear infinite sweep;transform:none}@keyframes sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}.ai__hint{color:var(--text-3);margin-top:8px;font-size:12px}.ai.is-error .ai__track,.ai.is-done .ai__track{display:none}.drop-overlay{inset:12px var(--stage-r) 12px 12px;border:1.5px dashed var(--text-2);border-radius:var(--r-lg);color:var(--text);opacity:0;pointer-events:none;background:#0c0c0edb;place-items:center;font-size:15px;font-weight:600;transition:opacity .15s;display:grid;position:absolute}.stage.is-dragging .drop-overlay{opacity:1}.toast{background:var(--text);color:var(--app);opacity:0;pointer-events:none;transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);z-index:10;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:500;position:absolute;top:24px;left:calc(50% + 6px);transform:translate(-50%,-8px)}.toast.is-visible{opacity:1;transform:translate(-50%)}.panel{min-height:0;width:var(--panel-w);flex-direction:column;padding:12px;transition:opacity .2s;display:flex;position:relative}.panel>:not(.resizer){background:var(--panel)}.resizer{z-index:2;cursor:col-resize;touch-action:none;width:12px;position:absolute;top:12px;bottom:12px;left:0}.resizer:after{content:"";background:var(--text-3);opacity:0;border-radius:2px;width:2px;height:36px;margin-top:-18px;transition:opacity .15s,background-color .15s;position:absolute;top:50%;left:5px}.resizer:focus-visible{outline:none}.resizer:focus-visible:after,body.is-resizing .resizer:after{opacity:1;background:var(--text)}@media (hover:hover) and (pointer:fine){.resizer:hover:after{opacity:1}}.panel__actions{align-items:center;gap:4px;margin-right:-6px;display:flex}.panel__actions .link{margin-right:0}.icon-btn{border-radius:var(--r-sm);width:28px;height:28px;color:var(--text-3);cursor:pointer;transition-property:transform,background-color,color;transition-duration:.16s;transition-timing-function:var(--ease-out);background:0 0;border:0;place-items:center;padding:0;display:grid}.icon-btn:active{transform:scale(.94)}@media (hover:hover) and (pointer:fine){.icon-btn:hover{color:var(--text);background:var(--surface)}}.panel__head{border-radius:var(--r-lg) var(--r-lg) 0 0;z-index:1;justify-content:space-between;align-items:center;padding:16px 20px 12px;transition:box-shadow .2s;display:flex;position:relative}.panel.is-scrolled .panel__head{box-shadow:0 1px 0 var(--border)}.brand{letter-spacing:-.02em;font-size:15px;font-weight:600}.link{border-radius:var(--r-sm);color:var(--text-3);cursor:pointer;background:0 0;border:0;margin-right:-6px;padding:4px 6px;font-size:12px}@media (hover:hover) and (pointer:fine){.link:hover{color:var(--text);background:var(--surface)}}.panel__body{scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent;flex-direction:column;flex:1;gap:28px;min-height:0;margin:0;padding:8px 20px 24px;display:flex;overflow-y:auto}.panel__body .group{transition:opacity .25s}body.is-empty .panel__body .group:not(:first-child){opacity:.4;pointer-events:none}.group{flex-direction:column;flex-shrink:0;gap:12px;display:flex}.group__title{color:var(--text-3);margin:0 0 2px;font-size:12px;font-weight:500}.sub{color:var(--text-2);margin-bottom:-6px;font-size:12px}.stack{flex-direction:column;gap:12px;display:flex}.help{color:var(--text-3);margin:-4px 0 0;font-size:12px}.seg{border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);gap:2px;padding:3px;display:flex}.seg label{flex:1;position:relative}.seg input{opacity:0;pointer-events:none;position:absolute}.seg span{height:28px;color:var(--text-2);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:5px;justify-content:center;align-items:center;gap:8px;padding:0 8px;font-size:12px;font-weight:500;display:flex}.seg input:checked+span{background:var(--surface-3);color:var(--text);box-shadow:0 1px 2px #0000004d}.seg input:focus-visible+span{outline:2px solid var(--ring);outline-offset:1px}.seg--lg span{height:38px;font-size:13px}.seg svg{color:var(--text-3);transition:color .16s}.seg input:checked+span svg{color:var(--text)}@media (hover:hover) and (pointer:fine){.seg span:hover{color:var(--text)}}.switch-row{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;display:flex}.switch-row>span{flex-direction:column;display:flex}.switch-row__label{font-weight:500}.switch-row__hint{color:var(--text-3);font-size:12px}.switch-row--sm .switch-row__label{font-weight:400}.switch{appearance:none;background:var(--surface-3);cursor:pointer;border-radius:999px;flex:none;width:32px;height:18px;margin:0;transition:background-color .2s;position:relative}.switch:after{content:"";width:14px;height:14px;transition:transform .2s var(--ease-out), background-color .2s ease;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0006}.switch:checked{background:var(--accent)}.switch:checked:after{background:var(--accent-ink);box-shadow:none;transform:translate(14px)}.field{flex-direction:column;gap:6px;display:flex}.field__head{justify-content:space-between;align-items:baseline;display:flex}.field__head label{cursor:default;-webkit-user-select:none;user-select:none}.field__head output{color:var(--text-3);font-variant-numeric:tabular-nums;text-align:right;border-radius:4px;min-width:40px;padding:1px 6px;font-size:12px;font-weight:500;transition:color .16s,background-color .16s}.field.is-changed .field__head label{cursor:pointer}.field.is-changed .field__head output{color:var(--text);background:var(--surface-2)}.field__ends{color:var(--text-3);justify-content:space-between;margin-top:-2px;font-size:11px;display:flex}input[type=range]{--pct:50%;--def:50%;appearance:none;cursor:pointer;background:0 0;width:100%;height:20px;margin:0}input[type=range]::-webkit-slider-runnable-track{background: linear-gradient(var(--text-3), var(--text-3)) var(--def) 50% / 2px 100% no-repeat, linear-gradient(90deg, #d4d4d8 var(--pct), var(--surface-3) var(--pct));border-radius:999px;height:4px}input[type=range]::-moz-range-track{background:var(--surface-3);border-radius:999px;height:4px}input[type=range]::-moz-range-progress{background:#d4d4d8;border-radius:999px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;transition:box-shadow .16s ease, transform .16s var(--ease-out);background:#fff;border:0;border-radius:50%;margin-top:-6px;box-shadow:0 1px 3px #00000080}input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #00000080}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.1);box-shadow:0 0 0 5px #ffffff1a,0 1px 3px #00000080}input[type=range]:focus-visible{outline:none}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--ring)}@media (hover:hover) and (pointer:fine){input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px #ffffff14,0 1px 3px #00000080}}.more summary{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-2);align-items:center;gap:6px;width:fit-content;font-size:12px;font-weight:500;list-style:none;display:flex}.more summary::-webkit-details-marker{display:none}.more summary:before{content:"";width:5px;height:5px;transition:transform .2s var(--ease-out);border-bottom:1.5px solid;border-right:1.5px solid;margin-right:3px;transform:rotate(-45deg)}.more[open] summary:before{transform:rotate(45deg)}.more[open]{flex-direction:column;gap:14px;display:flex}@media (hover:hover) and (pointer:fine){.more summary:hover{color:var(--text)}}.chips{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.chip{min-width:0;position:relative}.chip input{opacity:0;pointer-events:none;position:absolute}.chip span{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);height:32px;color:var(--text-2);cursor:pointer;white-space:nowrap;justify-content:center;align-items:center;padding:0 8px;font-size:12px;font-weight:500;display:flex}.chip input:checked+span{border-color:var(--text-3);background:var(--surface-3);color:var(--text)}.chip input:focus-visible+span{outline:2px solid var(--ring);outline-offset:1px}@media (hover:hover) and (pointer:fine){.chip span:hover{color:var(--text);border-color:var(--border-strong)}}.text-input{border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);width:100%;height:36px;color:var(--text);font:500 13px var(--font);padding:0 10px;transition:border-color .16s}.text-input:focus{border-color:var(--text-2);outline:none}.palettes{flex-direction:column;gap:6px;display:flex}.palette{position:relative}.palette input{opacity:0;pointer-events:none;position:absolute}.palette>span{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);cursor:pointer;justify-content:space-between;align-items:center;gap:12px;height:38px;padding:0 10px;display:flex}.palette input:checked+span{border-color:var(--text-3);background:var(--surface-3)}.palette input:focus-visible+span{outline:2px solid var(--ring);outline-offset:1px}@media (hover:hover) and (pointer:fine){.palette>span:hover{border-color:var(--border-strong)}}.palette__name{white-space:nowrap;font-size:12px;font-weight:500}.swatches{border-radius:3px;flex:1;justify-content:flex-end;max-width:160px;height:14px;display:flex;overflow:hidden}.swatches i{flex:1;min-width:3px;max-width:14px}.swatches:empty:after{content:"Add an image";color:var(--text-3);font-size:11px;line-height:14px}.color-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.swatch-input{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);cursor:pointer;align-items:center;gap:8px;height:30px;padding:0 10px 0 4px;display:inline-flex}.swatch-input code{font:500 12px var(--font);color:var(--text-2);font-variant-numeric:tabular-nums}input[type=color]{appearance:none;cursor:pointer;background:0 0;border:0;border-radius:5px;width:22px;height:22px;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:1px solid #ffffff26;border-radius:5px}input[type=color]::-moz-color-swatch{border:1px solid #ffffff26;border-radius:5px}.bg-swatches{gap:8px;display:flex;position:relative}.bg-swatches label{cursor:pointer;position:relative}.bg-swatches input[type=radio]{opacity:0;pointer-events:none;position:absolute}.bg-swatches i{background:var(--c);border-radius:7px;width:24px;height:24px;transition:box-shadow .16s;display:block;box-shadow:inset 0 0 0 1px #ffffff24}.bg-swatches i.checker{background:conic-gradient(#3a3a42 25%, #1f1f24 0 50%, #3a3a42 0 75%, #1f1f24 0) 0 0 / 10px 10px}#bgCustomSwatch{background:radial-gradient(circle, var(--c,#1b2a4a) 0 6px, transparent 6.5px), conic-gradient(#f87171, #fbbf24, #a3e635, #38bdf8, #a78bfa, #f472b6, #f87171)}.bg-swatches input:checked+i{box-shadow:inset 0 0 0 1px #ffffff24, 0 0 0 2px var(--panel), 0 0 0 3.5px var(--text)}.bg-swatches input:focus-visible+i{outline:2px solid var(--ring);outline-offset:4px}#bg{opacity:0;pointer-events:none;width:24px;height:24px;position:absolute;bottom:0;right:0}.panel__foot{border-radius:0 0 var(--r-lg) var(--r-lg);padding:12px 20px 16px;transition:box-shadow .2s;position:relative}.panel.has-more .panel__foot{box-shadow:0 -1px 0 var(--border)}.split{display:flex;position:relative}.btn{border-radius:var(--r-md);cursor:pointer;border:0;justify-content:center;align-items:center;gap:8px;height:40px;padding:0 14px;font-size:13px;font-weight:600;display:inline-flex}.btn:disabled{cursor:not-allowed;opacity:.3}.btn--primary{background:var(--accent);color:var(--accent-ink)}@media (hover:hover) and (pointer:fine){.btn--primary:hover:not(:disabled){background:#fff}}.split__main{border-radius:var(--r-md) 0 0 var(--r-md);flex:1}.split__toggle{border-radius:0 var(--r-md) var(--r-md) 0;width:40px;padding:0;box-shadow:inset 1px 0 #00000024}.split__toggle svg{transition:transform .2s var(--ease-out)}.split__toggle[aria-expanded=true] svg{transform:rotate(180deg)}.foot-meta{text-align:center;color:var(--text-3);font-variant-numeric:tabular-nums;margin-top:8px;font-size:11px}.menu{border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface);transform-origin:100% 100%;transition:opacity .15s var(--ease-out), transform .15s var(--ease-out);z-index:5;padding:4px;position:absolute;bottom:calc(100% + 8px);left:0;right:0;box-shadow:0 16px 40px #00000080}@starting-style{.menu{opacity:0;transform:scale(.97)translateY(4px)}}.menu button{border-radius:var(--r-sm);text-align:left;cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:8px 10px;display:flex}.menu button b{font-weight:500}.menu button span{color:var(--text-3);font-size:12px}.menu button:focus-visible{background:var(--surface-3);outline:none}.menu button:disabled{opacity:.4;cursor:not-allowed}@media (hover:hover) and (pointer:fine){.menu button:hover:not(:disabled){background:var(--surface-3)}}.menu button.is-default b:after{content:"Default";background:var(--surface-3);color:var(--text-2);vertical-align:1px;border-radius:4px;margin-left:8px;padding:1px 6px;font-size:10px;font-weight:500}@media (width<=820px){body{transition:grid-template-rows .24s var(--ease-out);grid-template-rows:56vh 44vh;grid-template-columns:1fr}body.is-collapsed{--stage-r:8px;grid-template-rows:100vh 0;grid-template-columns:1fr}.panel{width:auto}.resizer{display:none}body.is-collapsed .stagebar{top:56px;right:16px}.expand{top:16px;right:16px}.stage__canvas,.empty,.drop-overlay{inset:8px 8px 0}.empty{gap:14px}.demo{display:none}.intro__title{font-size:18px}.intro__sub,.empty__note{display:none}.frame{inset:56px 16px 16px}.stagebar{top:16px;left:16px;right:16px}.stagebar .pill:last-child{margin-right:0}.ai,.toast{left:50%}.panel{padding:8px}.sample img{width:48px;height:48px}.dropzone{padding:20px 16px}}@media (prefers-reduced-motion:reduce){.empty>*{animation-name:fade}@keyframes fade{0%{opacity:0}}*,:before,:after{transition-property:opacity,background-color,border-color,color!important}.ai__icon.spin:before,.ai__track.is-busy .ai__bar{animation-duration:2s}}