: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}.editor{--ink:#1d1c1d;--tray:#fffcf8;--tray-2:#f3eee7;--tray-line:#e8e1d7;--tray-muted:#8a8279;--on-page:#fffcf8;--page:#1d1c1d;--glass:#ffffff24;--glass-hover:#ffffff3d;background:var(--page);min-height:100dvh;color:var(--ink);flex-direction:column;transition:background-color .4s;display:flex}.editor[data-tone=light]{--on-page:#1d1c1d;--glass:#1d1c1d14;--glass-hover:#1d1c1d24}.editor button{color:inherit;background:0 0;border:none;border-radius:0;padding:0}.editor button:hover:not(:disabled){border-color:#0000}.editor button:disabled{opacity:.35}.editor button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.notice{background:var(--glass);color:var(--on-page);border-radius:14px;justify-content:space-between;align-items:center;gap:12px;margin:10px 12px 0;padding:8px 10px 8px 12px;font-size:13px;display:flex}.notice p{margin:0}.notice button{background:var(--on-page);height:32px;color:var(--page);border-radius:999px;flex:none;padding:0 10px;font-size:12px;font-weight:650}.masthead{color:var(--on-page);flex-direction:column;align-items:stretch;gap:8px;padding:12px 14px 4px;display:flex}.masthead h1{letter-spacing:-.02em;white-space:nowrap;margin:0;font-size:16px;font-weight:700}.actions{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.action-text,.action-icon{height:36px;color:var(--on-page);border-radius:999px;justify-content:center;align-items:center;gap:6px;font-size:13px;font-weight:650;display:inline-flex;background:var(--glass)!important}.action-text{padding:0 12px 0 10px}.action-icon{width:36px}.action-text:hover:not(:disabled),.action-icon:hover:not(:disabled){background:var(--glass-hover)!important}.copied{color:var(--on-page);font-size:12px;font-weight:650}.stage{place-items:center;padding:6px 16px 10px;display:grid}.stage-frame{aspect-ratio:1;border-radius:50%;width:min(52vw,34vh,236px);overflow:hidden;box-shadow:0 0 0 5px #ffffff14,0 18px 40px -16px #00000080}.editor[data-tone=light] .stage-frame{box-shadow:0 0 0 5px #ffffff73,0 18px 40px -18px #00000047}.stage-frame canvas,.stage canvas{width:100%;height:100%;display:block}.stage canvas,.preset img{background:repeating-conic-gradient(#2a2a2d 0% 25%,#3a3a3e 0% 50%) 0 0/16px 16px}.dock{background:var(--tray);border-radius:28px 28px 0 0;flex-direction:column;flex:auto;gap:10px;min-height:0;padding:12px 0 14px;display:flex;box-shadow:0 -12px 36px #00000029}.tabs{scrollbar-width:none;gap:2px;padding:0 10px;display:flex;position:relative;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tabs button{height:34px;color:var(--tray-muted);border-radius:999px;flex:none;padding:0 9px;font-size:12.5px;font-weight:650}.tabs button:hover{color:var(--ink)}.tabs button[aria-selected=true]{background:var(--ink);color:var(--tray)}.tray{gap:10px;min-width:0;display:grid}.tiles{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;padding:0 14px;display:grid}.tile{gap:5px;min-width:0;display:grid}.tile-art{aspect-ratio:1;background:var(--tray-2);border-radius:18px;position:relative;overflow:hidden}.tile-art img{object-fit:cover;width:100%;height:100%;display:block}.tile-skeleton{background:linear-gradient(100deg,#0000 20%,#0000000d 50%,#0000 80%);width:100%;height:100%;display:block}.tile[aria-checked=true] .tile-art{box-shadow:0 0 0 3px var(--tray), 0 0 0 5.5px var(--ink)}.tile-label{color:var(--tray-muted);text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:650;overflow:hidden}.tile[aria-checked=true] .tile-label{color:var(--ink)}.palette-block{gap:6px;display:grid}.group-label{color:var(--tray-muted);letter-spacing:.02em;padding:0 16px;font-size:11px;font-weight:650}.palette{flex-wrap:wrap;gap:10px;padding:2px 16px 4px;display:flex}.chip{border-radius:50%;width:34px;height:34px;box-shadow:inset 0 0 0 1px #0000001a}.chip[aria-checked=true]{box-shadow:0 0 0 3px var(--tray), 0 0 0 5.5px var(--ink)}.downloads{grid-template-columns:1fr 1fr;gap:6px;padding:0 14px;display:grid}.downloads button{white-space:nowrap;border-radius:999px;height:32px;padding:0 10px;font-size:12px;font-weight:650;background:var(--tray-2)!important}.downloads button:hover:not(:disabled){background:#e8e1d6!important}.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{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}@media (width>=1024px){.editor{grid-template:"notice notice""stage masthead""stage dock"1fr/minmax(0,1fr) minmax(360px,420px);align-items:stretch;gap:0 20px;padding:20px 24px;display:grid}.notice{grid-area:notice;margin:0 0 12px}.masthead{background:var(--tray);color:var(--ink);box-shadow:none;border-radius:28px 28px 0 0;grid-area:masthead;padding:18px 18px 8px}.masthead h1{font-size:18px}.action-text,.action-icon{color:var(--ink);background:var(--tray-2)!important}.action-text:hover:not(:disabled),.action-icon:hover:not(:disabled){background:#e8e1d6!important}.copied{color:var(--ink)}.stage{grid-area:stage;place-items:center;padding:12px 12px 20px}.stage-frame{border-radius:14%;width:min(56vh,560px)}.dock{border-radius:0 0 28px 28px;grid-area:dock;padding:8px 0 18px;box-shadow:0 24px 60px -24px #0006,0 0 0 1px #ffffff0a}.tiles{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;padding:0 18px}.downloads{padding:4px 18px 0}}