:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#141414;--panel:#1f1f21;--line:#333336;--text:#ececec;--muted:#9a9aa0;--accent:#f9e2ce;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.4}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{background:var(--bg);color:var(--text);margin:0}button{font:inherit;color:inherit;background:var(--panel);border:1px solid var(--line);cursor:pointer;border-radius:6px;padding:8px 12px}button:hover:not(:disabled){border-color:var(--muted)}button:disabled{opacity:.5;cursor:default}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.editor{--page:#161618;--surface:#1e1e21;--raised:#29292d;--raised-hover:#333338;--line:#2f2f33;--edge:0 0 0 1px oklch(100% 0 0/.08);--edge-hover:0 0 0 1px oklch(100% 0 0/.16);--text:#f4f1ec;--muted:#9b98a1;--primary:#c9dcf7;--primary-hover:#b9d1f4;--on-primary:#16161a;--ring:#f4f1ec;--radius:14px;--text-caption:11px;--text-small:12px;--text-body:13px;--text-button:14px;--text-title:18px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-swap:cubic-bezier(.2, 0, 0, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--fast:.15s;--slide:.24s;--press:scale(.96);--tabbar:64px;background:var(--page);height:100dvh;color:var(--text);font-family:ui-rounded,SF Pro Rounded,system-ui,-apple-system,Segoe UI,sans-serif;font-size:var(--text-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;display:flex}:where(.editor) button{color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition-property:background-color,color,box-shadow,transform,opacity;transition-duration:var(--fast);transition-timing-function:var(--ease-out);background:0 0;border:none;border-radius:0;justify-content:center;align-items:center;gap:6px;padding:0;font-weight:650;display:inline-flex;position:relative}:where(.editor) button:disabled{opacity:.35}:where(.editor) button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}:where(.editor) button:active:not(:disabled){transform:var(--press)}.notice{justify-content:space-between;align-items:center;gap:var(--space-3);margin:var(--space-3) var(--space-4) 0;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);background:var(--raised);font-size:var(--text-body);border-radius:999px;display:flex}.notice p{text-wrap:pretty;margin:0}.notice button{height:32px;padding:0 var(--space-3);background:var(--text);color:var(--page);font-size:var(--text-small);border-radius:999px;flex:none}.masthead{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4) var(--space-2);display:flex}.masthead h1{font-size:var(--text-title);letter-spacing:-.015em;white-space:nowrap;align-items:center;gap:10px;margin:0;font-weight:750;display:flex}.wordmark{align-items:center;gap:6px;display:inline-flex}.wordmark-tag{background:var(--primary);color:var(--on-primary);font-size:var(--text-body);letter-spacing:0;border-radius:999px;padding:1px 7px 2px;font-weight:800}.brand-mark{transition:transform .32s var(--ease-spring);flex:none;display:block}.tagline{color:var(--muted);font-size:var(--text-body);margin:0;font-weight:600;display:none}.masthead>.pill{min-width:108px;margin-left:auto}.pill{background:var(--raised);height:38px;font-size:var(--text-button);border-radius:999px;padding:0 14px 0 12px}.pill.icon-only{width:38px;padding:0}.pill:after,.chip:after,.notice button:after{content:"";border-radius:inherit;position:absolute;inset:-3px}.notice button:after{inset:-6px}.pill[data-copied=true]{background:var(--primary);color:var(--on-primary)}.swap{place-items:center;display:grid}.swap>svg{transition-property:opacity,transform,filter;transition-duration:.2s;transition-timing-function:var(--ease-swap);grid-area:1/1}.swap>svg:last-child,.swap[data-swapped=true]>svg:first-child{opacity:0;filter:blur(4px);transform:scale(.25)}.swap[data-swapped=true]>svg:last-child{opacity:1;filter:none;transform:none}.stage{justify-items:center;gap:var(--space-3);padding:var(--space-1) var(--space-4) var(--space-4);flex:none;display:grid}.stage-frame[data-painted=false],.tile-skeleton{background:radial-gradient(ellipse 2.6% 7.5% at 39% 55%, var(--raised) 0 96%, transparent 100%), radial-gradient(ellipse 2.6% 7.5% at 61% 55%, var(--raised) 0 96%, transparent 100%), radial-gradient(ellipse 37% 33% at 50% 52%, var(--raised-hover) 0 98.5%, transparent 100%), radial-gradient(ellipse 25% 14% at 50% 100%, var(--raised-hover) 0 98.5%, transparent 100%), var(--raised)}.stage-frame{aspect-ratio:1;contain:strict;background:var(--raised);width:min(62vw,34svh,320px);box-shadow:var(--edge), 0 24px 48px -24px #000000b3;border-radius:9%;position:relative;overflow:hidden}.stage-frame[data-painted=false]:before,.tile-skeleton:after{content:"";background:linear-gradient(100deg,#0000 30%,#ffffff0d 50%,#0000 70%);animation:1.6s linear infinite sweep;position:absolute;inset:0;transform:translate(-100%)}.stage-still{width:100%;height:100%;display:block;position:absolute;inset:0}.stage-still[data-fade=true]{transition:opacity .22s var(--ease-out)}@starting-style{.stage-still[data-fade=true]{opacity:0}}.stage-frame canvas{opacity:0;width:100%;height:100%;transition:opacity .24s var(--ease-out);display:block;position:relative}.stage-frame[data-painted=true] canvas{opacity:1}.stage-frame[data-transparent=true] canvas{background:repeating-conic-gradient(#2a2a2d 0% 25%,#3a3a3e 0% 50%) 0 0/16px 16px}.toolbar{align-items:center;gap:var(--space-2);display:flex}.dock{background:var(--surface);min-height:0;box-shadow:var(--edge);border-radius:28px 28px 0 0;flex-direction:column;flex:1 1 0;display:flex;overflow:hidden}.dock-body{overscroll-behavior:contain;scrollbar-gutter:stable both-edges;scrollbar-width:thin;scrollbar-color:var(--raised) transparent;flex:1 1 0;min-height:0;position:relative;overflow-y:auto}.looks{padding:var(--space-4) var(--space-4) 0}.tabbar{z-index:1;height:var(--tabbar);padding:var(--space-3) var(--space-4) var(--space-2);background:var(--surface);position:sticky;top:0}.tabbar:after{content:"";background:linear-gradient(var(--surface), transparent);pointer-events:none;height:10px;position:absolute;inset:100% 0 auto}.group{gap:var(--space-3);display:grid}.group-label{align-items:baseline;gap:var(--space-2);font-size:var(--text-body);font-weight:700;display:flex}.group-detail{font-size:var(--text-small);color:var(--muted);font-weight:600}.tabs,.steps{padding:var(--space-1);background:var(--page);border-radius:999px;gap:2px;display:flex;position:relative;box-shadow:inset 0 0 0 1px oklch(100% 0 0/.06)}.tabs:before,.steps:before{content:"";top:var(--space-1);bottom:var(--space-1);width:var(--pill-w,0);transform:translateX(var(--pill-x,0));background:var(--text);border-radius:999px;position:absolute;left:0;box-shadow:0 1px 3px #00000059}.tabs[data-pill=ready]:before,.steps[data-pill=ready]:before{transition:transform var(--slide) var(--ease-out), width var(--slide) var(--ease-out)}.tabs{scrollbar-width:none;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tabs button,.steps button{height:36px;font-size:var(--text-body);color:var(--muted);border-radius:999px;flex:1 0 auto;padding:0 10px}.tabs button:active:not(:disabled),.steps button:active:not(:disabled){transform:scale(.97)}.tabs button:after,.steps button:after{content:"";position:absolute;inset:-4px 0}.tabs button[aria-selected=true],.steps button[aria-checked=true]{color:var(--on-primary)}.steps{max-width:320px}.steps button{flex-basis:0}.tray{align-content:start;gap:var(--space-5);min-width:0;min-height:calc(100% - var(--tabbar));padding:var(--space-2) var(--space-4) var(--space-6);display:grid}.tiles{gap:var(--space-3) var(--space-2);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.tile{flex-direction:column;align-items:stretch;gap:6px;min-width:0}.tile-art{aspect-ratio:1;border-radius:var(--radius);background:var(--raised);transition:box-shadow var(--fast) var(--ease-out);display:block;position:relative;overflow:hidden}.tile-art:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 1px oklch(100% 0 0/.1)}.tile-art img{object-fit:cover;width:100%;height:100%;transition:opacity .24s var(--ease-out), transform .28s var(--ease-out);display:block}@starting-style{.tile-art img{opacity:0}}.tile-skeleton{width:100%;height:100%;display:block;position:relative;overflow:hidden}.tile[aria-checked=true] .tile-art{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--ring)}.tile:focus-visible{outline:none}.tile:focus-visible .tile-art{outline:2px solid var(--primary);outline-offset:5px}.tile-label{font-size:var(--text-small);color:var(--muted);text-align:center;text-overflow:ellipsis;white-space:nowrap;transition:color var(--fast) ease;font-weight:600;overflow:hidden}.tile[aria-checked=true] .tile-label{color:var(--text);font-weight:700}.palette{gap:var(--space-2);flex-wrap:wrap;display:flex}.chip{border-radius:50%;width:36px;height:36px;box-shadow:inset 0 0 0 1px oklch(100% 0 0/.12)}.chip:after{inset:-4px}.chip:active:not(:disabled){transform:scale(.9)}.chip[aria-checked=true]{box-shadow:inset 0 0 0 1px oklch(100% 0 0/.12), 0 0 0 2px var(--surface), 0 0 0 4px var(--ring)}.downloads{gap:var(--space-2);padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);flex:none;grid-template-columns:minmax(0,1.35fr) minmax(0,1.15fr) repeat(2,minmax(0,1fr));margin-top:auto;display:grid;position:sticky;bottom:0}.downloads:before{content:"";height:var(--space-4);background:linear-gradient(transparent, var(--surface));pointer-events:none;position:absolute;inset:auto 0 calc(100% + 1px)}.download{border-radius:var(--radius);background:var(--raised);white-space:nowrap;--sheen:oklch(100% 0 0/.1);height:52px;min-height:44px;padding:0 10px}.download[data-busy=true]:disabled{opacity:1}.download[data-busy=true]:before{content:"";border-radius:inherit;background:linear-gradient(100deg, transparent 30%, var(--sheen) 50%, transparent 70%) 0 0 / 250% 100%;animation:1.1s linear infinite shimmer;position:absolute;inset:0}.download[data-copied=true]{background:var(--primary);color:var(--on-primary)}.download[data-error=true]{color:oklch(78% .12 25);background:oklch(55% .18 25/.18)}.download.primary{background:var(--primary);color:var(--on-primary);--sheen:oklch(100% 0 0/.55);gap:10px;padding:0 14px 0 12px;box-shadow:inset 0 1px oklch(100% 0 0/.5),0 8px 20px -10px oklch(84% .07 255/.55)}.download.copy{gap:var(--space-2);padding:0 10px 0 var(--space-2)}.download-text{justify-items:start;line-height:1.2;display:grid}.download:not(.primary):not(.copy) .download-text{justify-items:center}.download-label{font-size:var(--text-button);font-weight:700}.download-sub{font-size:var(--text-small);opacity:.65;font-variant-numeric:tabular-nums;font-weight:600}@media (hover:hover) and (pointer:fine){.pill:hover:not(:disabled):not([data-copied=true]),.download:hover:not(:disabled):not(.primary):not([data-copied=true]):not([data-error=true]){background:var(--raised-hover)}.download.primary:hover:not(:disabled){background:var(--primary-hover)}.tabs button:hover:not([aria-selected=true]),.steps button:hover:not([aria-checked=true]){color:var(--text);background:oklch(100% 0 0/.05)}.masthead h1:hover .brand-mark{transform:rotate(-10deg)scale(1.08)}.tile:hover:not([aria-checked=true]) .tile-art{box-shadow:var(--edge-hover)}.tile:hover .tile-art img{transform:scale(1.06)}.tile:hover .tile-label{color:var(--text)}.chip:hover:not([aria-checked=true]){box-shadow:inset 0 0 0 1px oklch(100% 0 0/.12), 0 0 0 2px var(--surface), 0 0 0 4px oklch(100% 0 0/.22)}}@media (width<=480px){.tile-label{font-size:var(--text-caption)}}@media (width<=959px){.looks-strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(68px, calc((100% - 4 * var(--space-2)) / 4.5), 96px);margin:calc(-1 * var(--space-2)) calc(-1 * var(--space-4));padding:var(--space-2) var(--space-4);overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--space-4);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg, transparent, #000 var(--space-3), #000 calc(100% - var(--space-6)), transparent);mask-image:linear-gradient(90deg, transparent, #000 var(--space-3), #000 calc(100% - var(--space-6)), transparent);position:relative;overflow-x:auto}.looks-strip::-webkit-scrollbar{display:none}.looks-strip>.tile{scroll-snap-align:start}}@media (width<=430px){.downloads{padding:10px var(--space-3) calc(10px + env(safe-area-inset-bottom));grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:6px}.download{min-width:0;padding:0 var(--space-1);overflow:hidden}.download.primary{padding:0 var(--space-2);gap:6px}.download.copy{padding:0 var(--space-1);gap:0}.download.copy .swap{display:none}.download.copy .download-text,.download:not(.primary) .download-text{justify-items:center;width:100%;min-width:0}.download-label{text-overflow:ellipsis;max-width:100%;font-size:var(--text-body);overflow:hidden}.download-sub{text-overflow:ellipsis;max-width:100%;font-size:var(--text-caption);letter-spacing:-.02em;overflow:hidden}}@media (width<=359px){.download.primary .swap{display:none}}@media (width>=600px) and (width<=959px){.stage-frame{width:min(62vw,34svh,360px)}.tiles:not(.looks-strip){grid-template-columns:repeat(6,minmax(0,1fr))}}@media (width<=959px) and (height<=599px){.editor{height:auto;min-height:100dvh}.stage-frame{width:min(50vw,70svh,300px)}.dock,.dock-body{flex:none;overflow:visible}.tray{min-height:0}}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-150% 0}}@keyframes sweep{to{transform:translate(100%)}}@media (prefers-reduced-motion:reduce){.editor *,.editor :before,.editor :after{animation:none!important}:where(.editor) button:active:not(:disabled){transform:none!important}.swap>svg,.brand-mark,.tile-art img{filter:none!important;transform:none!important}.tabs:before,.steps:before{transition:none!important}}@media (width>=960px){.editor{--tabbar:68px;column-gap:var(--space-6);height:100dvh;padding:0 var(--space-6) var(--space-6);grid-template:"notice notice""masthead masthead""stage dock"minmax(0,1fr)/minmax(0,1fr) minmax(380px,440px);display:grid}.notice{margin:var(--space-4) 0 0;grid-area:notice}.masthead{gap:var(--space-4);padding:var(--space-5) var(--space-1);grid-area:masthead}.tagline{display:block}.stage{align-content:center;gap:var(--space-5);min-height:0;padding:var(--space-6);background:radial-gradient(circle at 1px 1px, oklch(100% 0 0/.07) 1px, transparent 0) 0 0 / 22px 22px, var(--page);box-shadow:var(--edge);border-radius:28px;grid-area:stage}.stage-frame{border-radius:6%;width:min(100%,100dvh - 260px,620px)}.dock{border-radius:28px;grid-area:dock}.looks{padding:var(--space-5) var(--space-5) 0}.looks-strip{grid-template-columns:repeat(5,minmax(0,1fr))}.tabbar{padding:var(--space-4) var(--space-5) var(--space-2)}.tray{padding:var(--space-2) var(--space-5) var(--space-5)}.downloads{padding:14px;position:static}.downloads:before{display:none}}.render-stage{max-width:none}.render-stage canvas{display:block}.render-error{color:#ff8a80;white-space:pre-wrap;padding:16px}