:root{--bg:#f6f4f1;--panel:#fff;--ink:#24201d;--muted:#7b736c;--line:#e2ddd7;--accent:#7b1fa2;--danger:#c0392b;--radius:10px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px}*{box-sizing:border-box}body{background:var(--bg);margin:0}h1,h2,h3{margin:0;line-height:1.2}h1{font-size:1.4rem}h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.8rem}p{margin:0}.muted{color:var(--muted);font-size:.85rem}.empty{padding:.5rem 0}.app{flex-direction:column;gap:1rem;max-width:1400px;margin:0 auto;padding:1.25rem;display:flex}.app-head{flex-wrap:wrap;align-items:baseline;gap:.75rem;display:flex}.workspace{grid-template-columns:240px minmax(0,1fr) 320px;align-items:start;gap:1rem;display:grid}@media (width<=1080px){.workspace{grid-template-columns:1fr}}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem}.canvas{justify-content:center;align-items:flex-start;min-height:240px;display:flex;overflow:auto}button{font:inherit;border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#fff;border-radius:7px;padding:.35rem .7rem}button:hover:not(:disabled){border-color:var(--muted)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.danger:hover:not(:disabled){border-color:var(--danger);color:var(--danger)}input,select{font:inherit;border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:7px;width:100%;padding:.35rem .45rem}input:disabled{background:var(--bg);color:var(--muted)}kbd{font:inherit;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 .25rem;font-size:.75rem}.toolbar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap;align-items:flex-end;gap:.6rem .75rem;padding:.75rem .9rem;display:flex}.field{flex-direction:column;gap:.2rem;min-width:8rem;display:flex}.field>span{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-size:.72rem}.field.grow{flex:12rem}.field.narrow{min-width:5.5rem;max-width:6.5rem}.rotate-group{align-items:center;gap:.3rem;display:flex}.rotate-group button{padding:.32rem .55rem;font-size:1.05rem;line-height:1}.rotate-readout{text-align:center;font-variant-numeric:tabular-nums;min-width:2.6rem;color:var(--muted);font-size:.85rem}.toolbar-actions{flex-wrap:wrap;gap:.4rem;margin-left:auto;display:flex}.toolbar-meta{flex-basis:100%}.bead-grid{touch-action:none;width:100%;height:auto;max-height:68vh;overflow:visible}.bead-grid .bead{stroke:#00000038;stroke-width:1px}.bead-grid .bead-channel{fill:#0003}.bead-grid .slot{fill:none;stroke:var(--line);stroke-width:1.5px;stroke-dasharray:2 3}.bead-grid .hit{fill:#0000;cursor:crosshair}.bead-grid .hit:hover{fill:var(--active-color);fill-opacity:.55}.bead-grid.tool-erase .hit{cursor:cell}.bead-grid.tool-erase .hit:hover{fill:var(--danger);fill-opacity:.2}.bead-grid .seam{stroke:var(--accent);stroke-width:1.5px;stroke-dasharray:4 4;opacity:.5}.bead-grid .diff-ring{fill:none;stroke:var(--danger);stroke-width:2.5px}.color-picker{flex-direction:column;gap:.5rem;display:flex}.active-row{align-items:center;gap:.5rem;display:flex}.active-chip{border:1px solid #00000030;border-radius:50%;flex:none;width:2rem;height:2rem}.active-meta{flex-direction:column;min-width:0;line-height:1.25;display:flex}.active-meta strong{text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;overflow:hidden}.tool-btn{flex:none;margin-left:auto}.tool-btn.on{background:var(--danger);border-color:var(--danger);color:#fff}.palette-tabs{border-bottom:1px solid var(--line);gap:.25rem;display:flex}.tab{color:var(--muted);background:0 0;border:1px solid #0000;border-bottom:none;border-radius:7px 7px 0 0;margin-bottom:-1px;padding:.3rem .6rem;font-size:.78rem}.tab.on{background:var(--panel);border-color:var(--line);color:var(--ink);font-weight:600}.swatches{grid-template-columns:repeat(auto-fill,minmax(1.65rem,1fr));gap:.3rem;display:grid}.swatch{aspect-ratio:1;cursor:pointer;border:1px solid #00000030;border-radius:50%;padding:0}.swatch.light{border-color:#0002}.swatch.on{outline:2px solid var(--accent);outline-offset:2px}.custom-row{align-items:center;gap:.5rem;display:flex}.custom-row input[type=color]{cursor:pointer;width:3rem;height:2rem;padding:2px}.recolor{flex-direction:column;gap:.4rem;display:flex}.recolor-row{align-items:center;gap:.5rem;display:flex}.recolor-row>span:first-child{text-transform:uppercase;letter-spacing:.05em;min-width:3.4rem;font-size:.72rem}.recolor-target{text-align:left;text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.recolor-chip{border:1px solid #00000030;border-radius:4px;flex:none;width:1.4rem;height:1.4rem}.recolor-chip.light{border-color:#0002}.recolor-row.anchored{position:relative}.popover-backdrop{z-index:15;position:fixed;inset:0}.color-popover{z-index:16;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);width:300px;max-height:80vh;padding:.8rem;position:absolute;bottom:0;left:calc(100% + .6rem);overflow:auto;box-shadow:0 10px 30px #00000026}.color-popover.small{width:200px}.popover-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:.75rem;padding-bottom:.5rem;display:flex}@media (width<=1080px){.color-popover{width:min(300px,100%);top:calc(100% + .5rem);bottom:auto;left:0}}.hint{color:var(--muted);border-top:1px solid var(--line);margin-top:.25rem;padding-top:.5rem;font-size:.78rem}.library-head{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.design-list{flex-direction:column;gap:.5rem;max-height:70vh;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.design-card{border:1px solid var(--line);border-radius:8px;grid-template-columns:auto 64px minmax(0,1fr);align-items:center;gap:.5rem;padding:.5rem;display:grid}.design-card.current{border-color:var(--accent);background:#7b1fa20a}.card-select input{width:auto}.card-thumb{justify-content:center;align-items:center;display:flex}.card-thumb .bead-grid{max-height:56px}.card-body{flex-direction:column;gap:.15rem;min-width:0;display:flex}.card-name{text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;overflow:hidden}.card-meta{font-size:.75rem}.card-actions{gap:.25rem;margin-top:.2rem;display:flex}.card-actions button{padding:.15rem .4rem;font-size:.78rem}.modal-backdrop{z-index:10;background:#0005;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.modal{background:var(--panel);border-radius:var(--radius);width:min(1200px,100%);max-height:100%;padding:1rem 1.25rem 1.25rem;overflow:auto}.modal-head{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;padding-bottom:.75rem;display:flex}.modal-head-actions{align-items:center;gap:.75rem;display:flex}.diff-toggle{align-items:center;gap:.35rem;font-size:.85rem;display:flex}.diff-toggle input{width:auto}.compare-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;display:grid}.compare-item{flex-direction:column;gap:.35rem;min-width:0;display:flex}.compare-canvas{border:1px solid var(--line);border-radius:8px;justify-content:center;padding:.6rem;display:flex}.compare-canvas .bead-grid{max-height:45vh}.legend{flex-direction:column;gap:.2rem;margin:0;padding:0;font-size:.82rem;list-style:none;display:flex}.legend li{align-items:center;gap:.4rem;display:flex}.legend-dot{border:1px solid #00000030;border-radius:50%;flex:none;width:.85rem;height:.85rem}.legend-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}