: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}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);background:var(--page);min-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}.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:14px;padding:10px 16px 18px;display:grid}.stage-frame{aspect-ratio:1;background:var(--raised);width:min(66vw,36dvh,300px);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);box-shadow:var(--edge);border-radius:28px 28px 0 0;flex-direction:column;display:flex}.dock-head{gap:16px;padding:18px 16px 0;display:grid}.group{gap:10px;display:grid}.group-label{justify-content:space-between;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:34px;color:var(--muted);border-radius:999px;flex:1 0 auto;padding:0 10px;font-size:13px}.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{align-content:start;gap:20px;min-width:0;padding:18px 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:34px;height:34px;box-shadow:inset 0 0 0 1px oklch(100% 0 0/.12)}.chip:after{inset:-5px}.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);grid-template-columns:minmax(0,1.7fr) repeat(2,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;padding:0 10px}.download.primary{background:var(--primary);color:var(--on-primary);gap:10px;padding:0 14px 0 12px}.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){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}.tabs button:after,.steps button:after{content:"";position:absolute;inset:-5px 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;min-height:0;overflow:hidden}.dock-head{padding:20px 20px 0}.tray{scrollbar-width:thin;scrollbar-color:var(--raised) transparent;flex:auto;min-height:0;padding:20px;overflow-y:auto}.downloads{padding:14px;position:static}}.control{gap:6px;margin-bottom:12px;display:grid}.control-label{justify-content:space-between;align-items:center;gap:8px;display:flex}.control-label output{color:var(--muted);font-variant-numeric:tabular-nums}.control input[type=range]{width:100%;accent-color:var(--accent)}.hex-input{font:inherit;text-transform:uppercase;width:6.5em;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:4px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.control .react-colorful{width:100%;height:120px}.swatches,.preset-picker{flex-wrap:wrap;gap:8px;display:flex}.swatch{border:2px solid #0000;border-radius:50%;width:28px;height:28px;padding:0}.swatch[aria-checked=true]{border-color:var(--text)}.preset-picker.thumbnails .preset{justify-items:center;gap:4px;padding:6px;font-size:12px;display:grid}.preset-picker.thumbnails img{background:repeating-conic-gradient(#2a2a2d 0% 25%,#3a3a3e 0% 50%) 0 0/16px 16px;border-radius:4px;height:56px;display:block}.preset[aria-checked=true]{border-color:var(--accent);color:var(--accent)}.render-stage{max-width:none}.render-stage canvas{display:block}.render-error{color:#ff8a80;white-space:pre-wrap;padding:16px}