[data-theme=lavender],:root{--text: #2b2b2b;--muted: #8b8793;--stage: #f6f0fa;--dock: #fff;--line: #eeeaf2;--cell-on: #d9d4e0;--export: #17181d;--export-hover: #2a2c34;--about: #faf9fb}[data-theme=light]{--text: #1a1a1a;--muted: #6b7280;--stage: #f3f4f6;--dock: #ffffff;--line: #e5e7eb;--cell-on: #d1d5db;--export: #111827;--export-hover: #374151;--about: #f9fafb}[data-theme=dark]{--text: #f3eef8;--muted: #a39eab;--stage: #16141c;--dock: #1c1a22;--line: #2c2933;--cell-on: #3a3642;--export: #f3eef8;--export-hover: #ffffff;--about: #221f28}:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--text)}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;overflow:hidden}.app{display:grid;grid-template-columns:1fr 320px;height:100dvh;overflow:hidden;color:var(--text);background:var(--dock)}.stage{position:relative;display:grid;place-items:center;background:var(--stage);overflow:hidden;min-width:0;height:100dvh}.stage canvas{width:min(78vmin,720px);height:min(78vmin,720px)}.exports{position:absolute;left:50%;bottom:28px;transform:translate(-50%);z-index:2}.export-list{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%);min-width:148px;border-radius:14px;border:1px solid var(--line);background:var(--dock);box-shadow:0 12px 28px #10101429;overflow:hidden}.export-list button{display:block;width:100%;border:0;background:transparent;color:var(--text);text-align:left;padding:11px 14px;font:600 13px/1 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer}.export-list button:hover{background:var(--about)}.export{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--export);color:#fff;font:600 13px/1 Inter,ui-sans-serif,system-ui,sans-serif;padding:12px 18px;border-radius:999px;cursor:pointer;box-shadow:0 10px 24px #1010142e}[data-theme=dark] .export{color:#16141c}.export svg{width:16px;height:16px}.export .caret{width:14px;height:14px}.export:hover{background:var(--export-hover)}.export:active{transform:scale(.98)}.dock{background:var(--dock);color:var(--text);border-left:1px solid var(--line);padding:22px 18px 40px;overflow-x:hidden;overflow-y:auto;height:100dvh}h2{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--text)}.dock h2:not(:first-child){margin-top:28px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px}.cell{appearance:none;border:1px solid transparent;background:transparent;border-radius:16px;padding:6px 2px 8px;cursor:pointer;display:grid;justify-items:center;gap:4px;color:var(--muted);font:500 11px/1.2 Inter,ui-sans-serif,system-ui,sans-serif}.cell canvas{width:52px;height:52px}.cell.on{border-color:var(--cell-on);color:var(--text)}.swatches{display:flex;flex-wrap:wrap;gap:10px}.swatch{width:28px;height:28px;border-radius:50%;border:3px solid transparent;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px #00000014}.swatch.on{border-color:#111}[data-theme=dark] .swatch.on{border-color:#fff}.toggle-row{margin-top:28px;display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;color:var(--text)}.switch{width:44px;height:26px;border-radius:999px;border:0;background:#d8d4de;padding:3px;cursor:pointer}.switch span{display:block;width:20px;height:20px;border-radius:50%;background:#fff}.switch.on{background:#111}[data-theme=dark] .switch.on{background:#f3eef8}[data-theme=dark] .switch.on span{background:#16141c}.switch.on span{margin-left:18px}.about{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:16px;padding:12px 14px;color:var(--text);text-decoration:none;background:var(--about)}.about svg{width:22px;height:22px;flex:0 0 auto}.about span{display:grid;gap:2px}.about strong{font-size:13px;font-weight:700}.about small{color:var(--muted);font-size:11px}.about:hover{border-color:var(--cell-on);background:var(--dock)}@media(max-width:860px){.app{grid-template-columns:1fr;grid-template-rows:62dvh 38dvh}.stage,.dock{height:auto}.dock{border-left:0;border-top:1px solid var(--line)}}.themes{display:flex;gap:8px}.theme{appearance:none;border:1px solid var(--line);background:var(--about);color:var(--text);border-radius:999px;padding:6px 12px;cursor:pointer;font:600 12px/1 Inter,ui-sans-serif,system-ui,sans-serif}.theme.on{background:var(--export);color:#fff;border-color:transparent}[data-theme=dark] .theme.on{color:#16141c}