:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0f0f13;--panel:#17171c;--raised:#1e1e25;--line:#292932;--line-soft:#21212a;--text:#ececf1;--dim:#8b8b98;--accent:#a855f7;--accent-soft:#a855f726;--hover:#262630;--hover-line:#35353f;--open-line:#3a3a46;--field:#0c0c10;--checker-a:#17171b;--checker-b:#1a1a1f;--stripe-a:#24242a;--stripe-b:#1b1b20;--warn-bg:#241f14;--warn-text:#f0dcae;--bad-bg:#241618;--bad-line:#5a2a2a;--bad-text:#f0b8b8;--preview-bg:#16161a;--panel-shadow:none;--shadow-md:0 12px 32px #0009;--shadow-lg:0 24px 64px #000a;--glass:#0000008c;--glass-soft:#00000059;--glass-strong:#000000c7;--veil:#16161a66;--spin-track:#ffffff38;--spin-head:#fff;--chip-line:#ffffff24;--ok:#4ade80;--bad:#ff6b6b;--warn:#f5b544;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--r1:6px;--r2:8px;--r3:12px;--control:32px;--z-canvas:1;--z-overlay:10;--z-menu:20;--z-toast:30;--ease:cubic-bezier(.2, 0, .1, 1);accent-color:var(--accent)}*{box-sizing:border-box}:where(button,input,select,textarea,summary,a,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r1)}:where(button,summary){-webkit-tap-highlight-color:transparent}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--bg:#f7f2fc;--panel:#fff;--raised:#f3ecfa;--line:#e8dcf5;--line-soft:#f1e9fa;--text:#2b1b3d;--dim:#6d5b82;--accent:#7127b0;--accent-soft:#7127b01f;--ok:#1a7f4b;--bad:#c02626;--warn:#8a6000;--hover:#f0e7fa;--hover-line:#d9c6ef;--open-line:#c9b0e6;--field:#fff;--checker-a:#f6f0fd;--checker-b:#ece1f8;--stripe-a:#ebe1f7;--stripe-b:#f8f3fd;--warn-bg:#fdf4dc;--warn-text:#6b4e00;--bad-bg:#fdeceb;--bad-line:#f2c9c6;--bad-text:#8f2320;--preview-bg:#f2eafa;--panel-shadow:0 1px 2px #4018680d, 0 8px 24px #4018680f;--shadow-md:0 12px 32px #40186824;--glass:#ffffffc7;--glass-soft:#ffffffa8;--glass-strong:#fffffff0;--veil:#f7f2fc99;--spin-track:#4018682e;--spin-head:#7127b0;--chip-line:#2b1b3d29;--shadow-lg:0 24px 64px #4018682e}}:root[data-theme=light]{--bg:#f7f2fc;--panel:#fff;--raised:#f3ecfa;--line:#e8dcf5;--line-soft:#f1e9fa;--text:#2b1b3d;--dim:#6d5b82;--accent:#7127b0;--accent-soft:#7127b01f;--ok:#1a7f4b;--bad:#c02626;--warn:#8a6000;--hover:#f0e7fa;--hover-line:#d9c6ef;--open-line:#c9b0e6;--field:#fff;--checker-a:#f6f0fd;--checker-b:#ece1f8;--stripe-a:#ebe1f7;--stripe-b:#f8f3fd;--warn-bg:#fdf4dc;--warn-text:#6b4e00;--bad-bg:#fdeceb;--bad-line:#f2c9c6;--bad-text:#8f2320;--preview-bg:#f2eafa;--panel-shadow:0 1px 2px #4018680d, 0 8px 24px #4018680f;--shadow-md:0 12px 32px #40186824;--glass:#ffffffc7;--glass-soft:#ffffffa8;--glass-strong:#fffffff0;--veil:#f7f2fc99;--spin-track:#4018682e;--spin-head:#7127b0;--chip-line:#2b1b3d29;--shadow-lg:0 24px 64px #4018682e}:root[data-theme=light] .segmented button.on{color:var(--accent)}@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .segmented button.on{color:var(--accent)}}body{background:var(--bg);min-height:100vh;color:var(--text);margin:0;font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}button{justify-content:center;align-items:center;gap:var(--s2);min-height:var(--control);padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r1);background:var(--raised);color:var(--text);font:inherit;cursor:pointer;transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);font-size:13px;display:inline-flex}button:hover:not(:disabled){background:var(--hover);border-color:var(--hover-line)}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button.primary:hover:not(:disabled){background:#b673f9;border-color:#b673f9}button.quiet{color:var(--dim);background:0 0;border-color:#0000}button.quiet:hover:not(:disabled){background:var(--raised);color:var(--text)}button.icon{width:var(--control);padding:0}input,select{width:100%;min-height:var(--control);padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r1);background:var(--field);color:var(--text);font:inherit;font-size:13px}input[type=range]{padding:0}.gate{place-items:center;min-height:100vh;padding:24px;display:grid}.card{border:1px solid var(--line);background:var(--panel);border-radius:12px;flex-direction:column;gap:16px;width:min(380px,100%);padding:28px;display:flex}.card h1{margin:0;font-size:18px}.sub{color:var(--dim);margin:-10px 0 0}.card label{color:var(--dim);flex-direction:column;gap:6px;font-size:13px;display:flex}.card button[type=submit]{background:var(--accent);border-color:var(--accent);font-weight:600}.card button[type=submit]:hover:not(:disabled){background:#b673f9}.hint{color:var(--dim);font-size:12px}.error{color:var(--bad);margin:0}.notice{color:var(--ok);margin:0}.links{flex-wrap:wrap;gap:6px;display:flex}.links button{color:var(--dim);background:0 0;border:0;padding:4px;text-decoration:underline}.links button:hover{color:var(--text);background:0 0}.app{flex-direction:column;height:100vh;display:flex}header{align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);background:var(--panel);display:flex}.brand{align-items:center;gap:var(--s2);letter-spacing:-.01em;padding-right:var(--s2);white-space:nowrap;font-size:13px;font-weight:600;display:flex}.brand:before{content:"";border:2px solid var(--accent);border-radius:3px;width:14px;height:20px}header .name{width:190px}.spacer{flex:1}.verdict{align-items:center;gap:var(--s2);height:var(--control);padding:0 var(--s3);border:1px solid var(--line);background:var(--raised);font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:999px;font-size:12px;display:inline-flex}.verdict:before{content:"";background:var(--ok);border-radius:50%;width:7px;height:7px}.verdict.bad{border-color:var(--bad-line);background:var(--bad-bg);color:var(--bad)}.verdict.bad:before{background:var(--bad)}.menu{position:relative}.menu>summary{align-items:center;gap:var(--s2);min-height:var(--control);padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r1);background:var(--raised);cursor:pointer;white-space:nowrap;font-size:13px;list-style:none;display:inline-flex}.menu>summary::-webkit-details-marker{display:none}.menu>summary:hover{background:var(--hover)}.menu[open]>summary{border-color:var(--open-line)}.menu-panel{z-index:var(--z-menu);min-width:240px;max-height:60vh;padding:var(--s2);border:1px solid var(--line);border-radius:var(--r2);background:var(--panel);box-shadow:var(--shadow-md);position:absolute;top:calc(100% + 6px);right:0;overflow-y:auto}.menu-panel h3{margin:var(--s2) var(--s2) var(--s1);text-transform:uppercase;letter-spacing:.07em;color:var(--dim);font-size:11px}.menu-panel .who{padding:var(--s2);color:var(--dim);word-break:break-all;font-size:12px}.menu-panel button{justify-content:flex-start;width:100%}.toolbar{align-items:center;gap:var(--s1);padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);background:var(--bg);display:flex}.toolbar .rule{background:var(--line);width:1px;height:18px;margin:0 var(--s2)}.toolbar .hint{font-size:12px}.segmented{border:1px solid var(--line);border-radius:var(--r1);display:inline-flex;overflow:hidden}.canvas-faces{background:var(--glass-soft);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);flex:none}.segmented button{color:var(--dim);text-transform:capitalize;padding:0 var(--s3);background:0 0;border:0;border-radius:0}.segmented button.on{background:var(--accent-soft);color:var(--text);font-weight:600}.segmented button:hover:not(.on){background:var(--raised);color:var(--text)}.banner{align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);background:var(--warn-bg);color:var(--warn-text);font-size:13px;display:flex}.banner.bad{background:var(--bad-bg);color:var(--bad-text)}.body{flex:1;min-height:0;display:flex}aside{width:268px;padding:var(--s3);border-right:1px solid var(--line);gap:var(--s2);background:var(--bg);flex-direction:column;flex:none;display:flex;overflow-y:auto}.panel{border-radius:var(--r3);background:var(--panel);box-shadow:var(--panel-shadow)}.panel>summary{align-items:center;gap:var(--s2);padding:var(--s3);border-radius:var(--r3);cursor:pointer;color:var(--text);transition:background .16s var(--ease);font-size:13px;font-weight:600;list-style:none;display:flex}.panel>summary::-webkit-details-marker{display:none}.panel>summary:hover{background:var(--raised)}.panel>summary>svg:first-child{color:var(--accent);flex:none}.panel>summary>span:first-of-type{flex:1}.panel>summary .chev{color:var(--dim);transition:transform .16s var(--ease);display:flex}.panel[open]>summary .chev{transform:rotate(180deg)}.panel-body{padding:0 var(--s3) var(--s3);gap:var(--s3);flex-direction:column;display:flex}.section{gap:var(--s2);flex-direction:column;display:flex}.section>.row{gap:var(--s2);display:flex}.section>.row>button{flex:1}.drawer{gap:var(--s1);grid-template-columns:repeat(6,1fr);display:grid}.drawer-item{aspect-ratio:1;min-height:0;color:var(--dim);background:var(--raised);border-color:#0000;padding:6px}.drawer-item:hover:not(:disabled){color:var(--accent);background:var(--hover);border-color:#0000}.drawer-item svg{width:100%;height:100%;display:block}.empty{padding:var(--s4) var(--s3);border:1px dashed var(--line);border-radius:var(--r2);color:var(--dim);text-align:center;font-size:12px;line-height:1.5}.advanced>summary{align-items:center;gap:var(--s2);cursor:pointer;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);font-size:11px;list-style:none;display:flex}.advanced>summary::-webkit-details-marker{display:none}.advanced>summary svg{transition:transform .16s var(--ease)}.advanced[open]>summary svg{transform:rotate(180deg)}.advanced .section{margin-top:var(--s3)}aside dl{gap:var(--s1) var(--s3);grid-template-columns:auto 1fr;margin:0;font-size:12px;display:grid}aside dt{color:var(--dim)}aside dd{font-variant-numeric:tabular-nums;text-align:right;margin:0}.designs{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.designs li{gap:var(--s1);display:flex}.designs li button:first-child{text-overflow:ellipsis;white-space:nowrap;flex:1;justify-content:flex-start;overflow:hidden}.designs li.current button:first-child{border-color:var(--accent)}.designs .del{width:var(--control);flex:none;padding:0}main{flex-direction:column;flex:1;min-width:0;display:flex}.preview{flex:1;min-height:0;position:relative}.preview-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.preview-actions{top:var(--s3);right:var(--s3);z-index:var(--z-overlay);gap:var(--s2);display:flex;position:absolute}.preview-actions button{color:var(--text);background:var(--glass);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--line)}.preview-actions button:hover{background:var(--glass-strong)}.preview-actions button[aria-pressed=true]{border-color:var(--accent);color:var(--text)}.modal{z-index:var(--z-toast);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0009;place-items:center;display:grid;position:fixed;inset:0}.modal-card{gap:var(--s3);padding:var(--s4);border-radius:var(--r3);background:var(--panel);box-shadow:var(--shadow-lg);flex-direction:column;align-items:stretch;max-width:92vw;display:flex}.modal-card h2{margin:0;font-size:15px}.modal-card>label{gap:var(--s1);color:var(--dim);grid-template-columns:1fr auto;font-size:12px;display:grid}.modal-card>label>span{color:var(--text);font-variant-numeric:tabular-nums}.modal-card>label>input{grid-column:1/-1}.modal-actions{gap:var(--s2);justify-content:flex-end;display:flex}.crop-frame{border-radius:var(--r2);cursor:grab;touch-action:none;box-shadow:0 0 0 1px var(--line);background:#000;align-self:center;position:relative;overflow:hidden}.crop-frame:active{cursor:grabbing}.crop-frame img{-webkit-user-select:none;user-select:none;max-width:none;position:absolute}.crop-thirds{pointer-events:none;background:linear-gradient(90deg,#0000 calc(33.333% - .5px),#ffffff73 calc(33.333% - .5px) calc(33.333% + .5px),#0000 calc(33.333% + .5px) calc(66.667% - .5px),#ffffff73 calc(66.667% - .5px) calc(66.667% + .5px),#0000 calc(66.667% + .5px)),linear-gradient(#0000 calc(33.333% - .5px),#ffffff73 calc(33.333% - .5px) calc(33.333% + .5px),#0000 calc(33.333% + .5px) calc(66.667% - .5px),#ffffff73 calc(66.667% - .5px) calc(66.667% + .5px),#0000 calc(66.667% + .5px));position:absolute;inset:0}.toast{bottom:var(--s5);z-index:var(--z-toast);padding:var(--s2) var(--s4);border-radius:var(--r2);background:var(--raised);border:1px solid var(--line);box-shadow:var(--shadow-md);font-size:13px;animation:2.6s forwards toast;position:fixed;left:50%}@keyframes toast{0%{opacity:0;transform:translate(-50%,8px)}12%{opacity:1;transform:translate(-50%)}80%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%)}}main.split{grid-template-columns:minmax(0,auto) minmax(0,1fr);min-height:0;display:grid}main.split .preview{border-left:1px solid var(--line)}main.split>.canvas-wrap{grid-area:1/1}main.split>.preview{grid-area:1/2}.inspector{z-index:var(--z-overlay);margin:var(--s3);width:264px;max-height:calc(100% - 2 * var(--s3));border-radius:var(--r3);background:var(--panel);box-shadow:0 0 0 1px var(--line), var(--shadow-lg);visibility:hidden;opacity:0;transform-origin:0 0;transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;grid-area:1/2;place-self:start;overflow-y:auto;transform:translate(-14px)scale(.98)}.inspector.open{visibility:visible;opacity:1;transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s;transform:none}@starting-style{.inspector.open{opacity:0;transform:translate(-14px)scale(.98)}}.inspector-head{align-items:center;gap:var(--s2);padding:var(--s3);color:var(--text);font-size:13px;font-weight:600;display:flex}.inspector-head>svg:first-child{color:var(--accent);flex:none}.inspector-head>span{flex:1}.inspector-head>button{flex:none;width:26px;height:26px;padding:0}.inspector-body{padding:0 var(--s3) var(--s3);gap:var(--s3);flex-direction:column;display:flex}.preview-busy{z-index:var(--z-overlay);background:var(--veil);pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.preview-busy:after{content:"";border:3px solid var(--spin-track);border-top-color:var(--spin-head);border-radius:50%;width:34px;height:34px;animation:.75s linear infinite spin}@keyframes spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.preview-busy:after{animation:1.2s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.25}}}.canvas-wrap{justify-content:safe center;align-items:center;gap:var(--s3);padding:var(--s4);background:linear-gradient(45deg, var(--checker-b) 25%, transparent 25%, transparent 75%, var(--checker-b) 75%), linear-gradient(45deg, var(--checker-b) 25%, transparent 25%, transparent 75%, var(--checker-b) 75%) 8px 8px, var(--checker-a);background-size:16px 16px;flex-direction:column;display:flex;overflow:auto}.canvas-surface{touch-action:none;flex:none;position:relative;box-shadow:0 6px 24px #0008}.canvas-window,.canvas-hole{pointer-events:none;background:#16161a;position:absolute}.canvas-window{outline:1px dashed #ffffff40;place-items:center;display:grid}.canvas-window span{color:#fff5;letter-spacing:.08em;text-transform:uppercase;font-size:11px}.canvas-hole{border-radius:50%}.canvas-art{cursor:grab;-webkit-user-select:none;user-select:none;position:absolute}.canvas-frame{pointer-events:none;outline:1px solid var(--accent);outline-offset:2px;position:absolute}.canvas-handle{background:var(--accent);cursor:nwse-resize;border:2px solid #fff;border-radius:50%;width:12px;height:12px;margin:-6px 0 0 -6px;position:absolute}.canvas-rotate{border:2px solid var(--accent);color:#16161a;cursor:grab;-webkit-user-select:none;user-select:none;background:#fff;border-radius:50%;place-items:center;width:20px;height:20px;margin:-10px 0 0 -10px;font-size:13px;line-height:1;display:grid;position:absolute}.canvas-rotate:active{cursor:grabbing}.canvas-size{background:var(--accent);color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;border-radius:4px;padding:2px 7px;font-size:11px;position:absolute;transform:translate(-50%,2px)}.canvas-size.side{transform:translate(2px,-50%)}.banner.warn{background:#2a2418}.drop{place-items:center;gap:var(--s2);padding:var(--s5) var(--s3);border:1px dashed var(--line);border-radius:var(--r2);color:var(--dim);cursor:pointer;text-align:center;transition:border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);font-size:12px;display:grid}.drop:hover{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}.drop.small{padding:var(--s3)}.drop input{display:none}.slots{gap:var(--s2);display:flex}.slot{height:var(--control);border-radius:var(--r1);cursor:pointer;border:1px solid var(--line);flex:1;min-height:0;padding:0;position:relative;overflow:hidden}.slots>.slot,.slots>.shell-slot{flex:1;min-width:0}.shell-slot{display:contents}.shell-slot>.slot{flex:1;box-shadow:inset 0 0 0 2px #0006}.slot.open{outline:2px solid var(--accent);outline-offset:1px}.swatch-panel{z-index:var(--z-menu);gap:var(--s3);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r2);background:var(--panel);flex-direction:column;display:flex;position:fixed;box-shadow:0 16px 40px #000b}.swatch-grid{grid-template-columns:repeat(8,1fr);gap:5px;display:grid}.swatch-chip{aspect-ratio:1;border:1px solid var(--chip-line);border-radius:5px;width:100%;height:auto;min-height:0;padding:0}.swatch-chip:hover:not(:disabled){border-color:#fff}.swatch-chip.on{outline:2px solid var(--accent);outline-offset:1px}.mixer{gap:var(--s2);flex-direction:column;display:flex}.mixer-sv{border-radius:var(--r1);cursor:crosshair;touch-action:none;background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);height:116px;position:relative;box-shadow:inset 0 0 0 1px #ffffff1a}.mixer-dot{pointer-events:none;border:2px solid #fff;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;position:absolute;box-shadow:0 0 0 1px #0008,0 1px 4px #0008}.mixer-row{align-items:center;gap:var(--s2);display:flex}.mixer-row>.mixer-hue{flex:1;min-width:0}.mixer-pick{flex:none;width:28px;height:28px;padding:0}.mixer-hue{appearance:none;background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);border:0;border-radius:999px;height:14px;padding:0}.mixer-hue::-webkit-slider-thumb{-webkit-appearance:none;cursor:ew-resize;background:#fff;border:2px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 0 0 1px #0008}.mixer-hue::-moz-range-thumb{cursor:ew-resize;background:#fff;border:2px solid #fff;border-radius:50%;width:12px;height:12px;box-shadow:0 0 0 1px #0008}.swatch-hex{align-items:center;gap:var(--s2);color:var(--dim);grid-template-columns:auto 1fr;font-size:12px;display:grid}.swatch-hex input{text-transform:uppercase;letter-spacing:.04em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.props label.swatch-row{grid-template-columns:1fr auto;align-items:center}.props label.swatch-row>.slot{flex:none;grid-column:auto;width:44px}.slot input[type=color]{opacity:0;cursor:pointer;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}.slot.shell{box-shadow:inset 0 0 0 2px #0006}.slot.empty{background:repeating-linear-gradient(45deg, var(--stripe-a) 0 5px, var(--stripe-b) 5px 10px)}.props{gap:var(--s3);flex-direction:column;display:flex}.props label{gap:var(--s1);color:var(--dim);grid-template-columns:1fr auto;font-size:12px;display:grid}.props label>span:first-of-type{text-align:right;color:var(--text);font-variant-numeric:tabular-nums}.props label input,.props label .hint{grid-column:1/-1}.props input[type=range]{background:0 0;border:0;width:100%;padding:0}.props label.toggle{color:var(--text);grid-template-columns:auto 1fr;align-items:center;gap:8px}.props label.toggle input{grid-column:auto;width:auto}.remap{align-items:center;gap:var(--s2);display:flex}.remap-from{border-radius:var(--r1);flex:none;width:22px;height:22px;box-shadow:inset 0 0 0 1px #ffffff2e}.remap-arrow{color:var(--dim);flex:none;font-size:12px}.remap-to{flex-wrap:wrap;flex:1;gap:5px;display:flex}.remap-to .swatch-chip{aspect-ratio:1;flex:none;width:22px}