: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;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-swap:cubic-bezier(.2, 0, 0, 1);--press:scale(.96);--tabbar:66px;background:var(--page);height:100dvh;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;font-family:ui-rounded,SF Pro Rounded,system-ui,-apple-system,Segoe UI,sans-serif;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:.15s;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{background:var(--raised);border-radius:999px;justify-content:space-between;align-items:center;gap:12px;margin:12px 16px 0;padding:8px 8px 8px 14px;font-size:13px;display:flex}.notice p{text-wrap:pretty;margin:0}.notice button{background:var(--text);height:30px;color:var(--page);border-radius:999px;flex:none;padding:0 12px;font-size:12px}.masthead{justify-content:space-between;align-items:center;gap:12px;padding:14px 16px 6px;display:flex}.masthead h1{letter-spacing:-.015em;white-space:nowrap;text-wrap:balance;align-items:center;gap:10px;margin:0;font-size:17px;font-weight:750;display:flex}.brand-mark{flex:none;display:block}.pill{background:var(--raised);border-radius:999px;height:38px;padding:0 14px 0 12px;font-size:13.5px}.pill.icon-only{width:38px;padding:0}.pill:after,.chip:after{content:"";border-radius:inherit;position:absolute;inset:-3px}.masthead>.pill{min-width:108px}.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{flex:none;justify-items:center;gap:10px;padding:4px 16px 14px;display:grid}.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{content:"";background:linear-gradient(100deg,#0000 30%,#ffffff0d 50%,#0000 70%) 0 0/250% 100%;animation:1.2s linear infinite shimmer;position:absolute;inset: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:8px;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:18px 16px 0}.tabbar{z-index:1;height:var(--tabbar);background:var(--surface);padding:14px 16px 8px;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:10px;display:grid}.group-label{align-items:baseline;gap:8px;font-size:13px;font-weight:700;display:flex}.group-detail{color:var(--muted);font-size:12px;font-weight:600}.tabs,.steps{background:var(--page);border-radius:999px;gap:2px;padding:4px;display:flex;box-shadow:inset 0 0 0 1px oklch(100% 0 0/.06)}.tabs{scrollbar-width:none;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tabs button,.steps button{height:36px;color:var(--muted);border-radius:999px;flex:1 0 auto;padding:0 10px;font-size:13px}.tabs button:after,.steps button:after{content:"";position:absolute;inset:-4px 0}.tabs button[aria-selected=true],.steps button[aria-checked=true]{background:var(--text);color:var(--on-primary)}.steps{max-width:320px}.steps button{flex-basis:0}.tray{min-width:0;min-height:calc(100% - var(--tabbar));align-content:start;gap:20px;padding:10px 16px 22px;display:grid}.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px;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 .15s var(--ease-out);display:block;position:relative;overflow:hidden}.tile-art img{object-fit:cover;border-radius:inherit;outline-offset:-1px;width:100%;height:100%;transition:opacity .2s var(--ease-out);outline:1px solid oklch(100% 0 0/.1);display:block}@starting-style{.tile-art img{opacity:0}}.tile-skeleton{background:linear-gradient(100deg,#0000 30%,#ffffff0f 50%,#0000 70%) 0 0/250% 100%;width:100%;height:100%;animation:1.2s linear infinite shimmer;display:block}.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{color:var(--muted);text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;transition:color .15s;overflow:hidden}.tile[aria-checked=true] .tile-label{color:var(--text)}.palette{flex-wrap:wrap;gap:10px;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[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{padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);flex:none;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:8px;margin-top:auto;display:grid;position:sticky;bottom:0}.download{border-radius:var(--radius);background:var(--raised);white-space:nowrap;height:52px;min-height:44px;padding:0 10px}.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);gap:10px;padding:0 14px 0 12px}.download.copy{gap:8px;padding:0 10px 0 8px}.download.copy .download-text{justify-items:start}.download-text{justify-items:start;line-height:1.2;display:grid}.download:not(.primary) .download-text{justify-items:center}.download-label{font-size:13.5px;font-weight:700}.download-sub{opacity:.65;font-variant-numeric:tabular-nums;font-size:11.5px;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)}.tile:hover:not([aria-checked=true]) .tile-art{box-shadow:var(--edge-hover)}.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{letter-spacing:-.01em;font-size:11px}}@media (width<=430px){.downloads{padding:10px 12px calc(10px + env(safe-area-inset-bottom));grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.download{min-width:0;height:auto;min-height:44px;padding:8px 4px;overflow:hidden}.download.primary{gap:0;padding:8px 4px}.download.primary>svg{display:none}.download.copy{gap:0;padding:8px 4px}.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:12px;overflow:hidden}.download-sub{text-overflow:ellipsis;letter-spacing:-.02em;max-width:100%;font-size:10px;overflow:hidden}}@media (width>=600px) and (width<=959px){.stage-frame{width:min(62vw,34svh,360px)}.tiles{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}}@media (prefers-reduced-motion:reduce){.editor *,.editor :before{animation:none!important}:where(.editor) button:active:not(:disabled){transform:none}.swap>svg{filter:none!important;transform:none!important}}@media (width>=960px){.editor{grid-template:"notice notice""masthead masthead""stage dock"minmax(0,1fr)/minmax(0,1fr) minmax(380px,440px);column-gap:28px;height:100dvh;padding:0 28px 28px;display:grid}.notice{grid-area:notice;margin:16px 0 0}.masthead{grid-area:masthead;padding:20px 0}.masthead h1{font-size:19px}.stage{grid-area:stage;align-content:center;gap:20px;min-height:0;padding:0 0 12px}.stage-frame{border-radius:6%;width:min(100%,100dvh - 220px,620px)}.dock{border-radius:28px;grid-area:dock}.editor{--tabbar:70px}.looks{padding:20px 20px 0}.tabbar{padding:16px 20px 10px}.tray{padding:10px 20px 20px}.downloads{padding:14px;position:static}}.render-stage{max-width:none}.render-stage canvas{display:block}.render-error{color:#ff8a80;white-space:pre-wrap;padding:16px}