: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;--credit:36px;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);background:var(--page);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}.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>*{transition-property:opacity,transform,filter;transition-duration:.2s;transition-timing-function:var(--ease-swap);grid-area:1/1}.swap>:last-child,.swap[data-swapped=true]>:first-child{opacity:0;filter:blur(4px);transform:scale(.25)}.swap[data-swapped=true]>: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}}.character svg{width:100%;height:100%;display:block}.stage-frame .character{opacity:0;width:100%;height:100%;transition:opacity .24s var(--ease-out);display:block;position:relative}.stage-frame[data-painted=true] .character{opacity:1}.stage-frame[data-transparent=true] .character{background:repeating-conic-gradient(#2a2a2d 0% 25%,#3a3a3e 0% 50%) 0 0/16px 16px}.toolbar{align-items:center;gap:var(--space-2);display:flex}.looks-sheet{overscroll-behavior:contain;background:var(--surface);width:100%;max-width:none;max-height:80dvh;color:var(--text);box-shadow:var(--edge), 0 -12px 40px -12px oklch(0% 0 0/.7);opacity:0;transition-property:opacity,transform,overlay,display;transition-duration:.15s;transition-timing-function:var(--ease-out);transition-behavior:allow-discrete;border:none;border-radius:28px 28px 0 0;margin:0;padding:0;position:fixed;inset:auto 0 0;overflow-y:auto;transform:translateY(8px)}.looks-sheet[open]{opacity:1;transform:none}@starting-style{.looks-sheet[open]{opacity:0;transform:translateY(8px)}}.looks-sheet::backdrop{background:0 0}.looks-body{gap:var(--space-2);padding:var(--space-2) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));display:grid}.looks-head{justify-content:space-between;align-items:center;display:flex}.looks-head h2{font-size:var(--text-button);margin:0;font-weight:700}.looks-close{width:44px;height:44px;margin-right:calc(-1 * var(--space-2));color:var(--muted);border-radius:999px}.looks-tiles{gap:var(--space-3) var(--space-2);grid-template-columns:repeat(5,minmax(0,1fr));display:grid}.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}.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 8px}.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) - var(--credit));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;margin-top:auto;display:flex;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);width:48px;height:48px;box-shadow:var(--edge);color:var(--muted);white-space:nowrap;--sheen:oklch(100% 0 0/.1);background:0 0;flex:none}.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);box-shadow:none;color:var(--on-primary)}.download[data-error=true]{box-shadow:none;color:oklch(78% .12 25);background:oklch(55% .18 25/.18)}.download.primary{gap:var(--space-2);background:var(--primary);width:auto;min-width:0;color:var(--on-primary);--sheen:oklch(100% 0 0/.55);flex:auto;padding:0 16px 0 14px;box-shadow:inset 0 1px oklch(100% 0 0/.5),0 8px 20px -10px oklch(84% .07 255/.55)}.download-label{font-size:var(--text-button);font-weight:700}.glyph{font-size:var(--text-body);letter-spacing:.02em;font-weight:750;line-height:18px}.download-hint{bottom:calc(100% + var(--space-2));z-index:2;padding:5px var(--space-2);background:var(--raised);box-shadow:var(--edge), 0 6px 16px -6px oklch(0% 0 0/.6);color:var(--text);font-size:var(--text-small);font-variant-numeric:tabular-nums;pointer-events:none;opacity:0;transform-origin:bottom;transition-property:opacity,transform;transition-duration:.1s;transition-timing-function:var(--ease-out);border-radius:8px;font-weight:650;line-height:1.2;position:absolute;left:50%;transform:translate(-50%,3px)scale(.97)}.download:first-child .download-hint{transform-origin:0 100%;left:0;transform:translateY(3px)scale(.97)}.download:last-of-type .download-hint{transform-origin:100% 100%;left:auto;right:0;transform:translateY(3px)scale(.97)}.download:focus-visible:not(.primary){color:var(--text)}.download:focus-visible .download-hint{opacity:1;transition-duration:.15s;transform:translate(-50%)}.download:first-child:focus-visible .download-hint,.download:last-of-type:focus-visible .download-hint{transform:none}.credit{height:var(--credit);color:var(--muted);font-size:var(--text-caption);opacity:.7;justify-content:center;align-items:center;gap:.3em;margin:0;font-weight:600;display:flex}.credit a{color:inherit;text-underline-offset:2px;transition:color var(--fast) ease;-webkit-text-decoration:underline oklch(100% 0 0/.25);text-decoration:underline oklch(100% 0 0/.25)}.credit a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:2px}@media (hover:hover) and (pointer:fine){.pill:hover:not(:disabled):not([data-copied=true]){background:var(--raised-hover)}.download:hover:not(:disabled):not(.primary):not([data-copied=true]):not([data-error=true]){background:var(--raised);color:var(--text)}.download.primary:hover:not(:disabled){background:var(--primary-hover)}.download:hover .download-hint{opacity:1;transition-duration:.15s;transform:translate(-50%)}.download:first-child:hover .download-hint,.download:last-of-type:hover .download-hint{transform:none}.credit a:hover,.looks-close:hover{color:var(--text)}.looks-close:hover{background:var(--raised)}.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<=400px){.tabs button{padding:0 5px}}@media (width<=380px){.tabs button{font-size:var(--text-small);padding:0 4px}}@media (width<=480px){.tile-label{font-size:var(--text-caption)}}@media (width<=430px){.downloads{padding:10px var(--space-3) calc(10px + env(safe-area-inset-bottom))}}@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}}@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>*,.brand-mark,.tile-art img{filter:none!important;transform:none!important}.tabs:before,.steps:before{transition:none!important}.download-hint{transform:translate(-50%)!important}.download:first-child .download-hint,.download:last-of-type .download-hint{transform:none!important}.looks-sheet,.looks-sheet::backdrop{transition:none!important;transform:none!important}}@media (width>=960px){.editor{--tabbar:68px;column-gap:var(--space-6);height:100dvh;padding:env(safe-area-inset-top) max(var(--space-6), env(safe-area-inset-right)) max(var(--space-6), env(safe-area-inset-bottom)) max(var(--space-6), env(safe-area-inset-left));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}.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}.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}.looks-sheet[data-mode=panel]{--arrow-size:8px;z-index:10;inset:var(--y,0px) auto auto var(--x,0px);width:max-content;max-height:none;box-shadow:var(--edge), 0 16px 40px -12px oklch(0% 0 0/.7);border-radius:18px;overflow:visible;transform:scale(.97)}.looks-sheet[data-mode=panel][open]{transform:none}@starting-style{.looks-sheet[data-mode=panel][open]{transform:scale(.97)}}.looks-sheet[data-side=right]{transform-origin:0}.looks-sheet[data-side=left]{transform-origin:100%}.looks-sheet[data-side=bottom]{transform-origin:top}.looks-sheet[data-side=top]{transform-origin:bottom}.looks-sheet[data-mode=panel]:before,.looks-sheet[data-mode=panel]:after{content:"";--a:var(--arrow-size);position:absolute}.looks-sheet[data-mode=panel]:before{--a:calc(var(--arrow-size) + 1.5px);background:oklch(100% 0 0/.1)}.looks-sheet[data-mode=panel]:after{background:var(--surface)}.looks-sheet[data-side=right]:before,.looks-sheet[data-side=right]:after,.looks-sheet[data-side=left]:before,.looks-sheet[data-side=left]:after{top:calc(var(--arrow) - var(--a));width:var(--a);height:calc(var(--a) * 2)}.looks-sheet[data-side=bottom]:before,.looks-sheet[data-side=bottom]:after,.looks-sheet[data-side=top]:before,.looks-sheet[data-side=top]:after{left:calc(var(--arrow) - var(--a));width:calc(var(--a) * 2);height:var(--a)}.looks-sheet[data-side=right]:before,.looks-sheet[data-side=right]:after{clip-path:polygon(100% 0,0 50%,100% 100%);right:100%}.looks-sheet[data-side=right]:after{right:calc(100% - 1px)}.looks-sheet[data-side=left]:before,.looks-sheet[data-side=left]:after{clip-path:polygon(0 0,100% 50%,0 100%);left:100%}.looks-sheet[data-side=left]:after{left:calc(100% - 1px)}.looks-sheet[data-side=bottom]:before,.looks-sheet[data-side=bottom]:after{clip-path:polygon(0 100%,50% 0,100% 100%);bottom:100%}.looks-sheet[data-side=bottom]:after{bottom:calc(100% - 1px)}.looks-sheet[data-side=top]:before,.looks-sheet[data-side=top]:after{clip-path:polygon(0 0,50% 100%,100% 0);top:100%}.looks-sheet[data-side=top]:after{top:calc(100% - 1px)}.looks-sheet[data-mode=panel] .looks-body{align-items:start;gap:var(--space-2);padding:var(--space-2) var(--space-1) var(--space-2) var(--space-3);grid-template-columns:auto auto}.looks-sheet[data-mode=panel] .looks-head{display:contents}.looks-sheet[data-mode=panel] .looks-head h2{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.looks-sheet[data-mode=panel] .looks-close{order:1;margin:0}.looks-sheet[data-mode=panel] .looks-tiles{grid-template-columns:repeat(var(--cols,10), var(--tile,56px));gap:var(--space-2) 6px;padding-top:var(--space-1)}.looks-sheet[data-mode=panel] .tile-label{font-size:var(--text-caption)}}.render-stage{max-width:none}.render-stage .character{display:block}.render-error{color:#ff8a80;white-space:pre-wrap;padding:16px}@media (display-mode:standalone){.editor{height:100lvh}}@media (display-mode:standalone) and (width<=959px) and (height<=599px){.editor{height:auto;min-height:100lvh}}