:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fff;--canvas-surface:#f5f5f5;--border:#e2e2e2;--border-soft:#ececec;--text:#16171a;--text-muted:#7a7a7a;--text-faint:#aaa;--accent:#0d99ff;--accent-soft:color-mix(in srgb, var(--accent) 12%, transparent);--action-bg:var(--accent);--action-text:#fff;font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{height:100%}body{background:var(--bg);color:var(--text);font-feature-settings:"tnum" 1;margin:0;overflow:hidden}#app{flex-direction:column;height:100vh;display:flex;position:relative}[hidden]{display:none!important}.app-body{flex:1;min-height:0;display:flex}.side-rail{background:var(--bg);border-right:1px solid var(--border);flex-direction:column;flex:0 0 64px;align-items:center;gap:.3rem;padding:.75rem .5rem;display:flex}.rail-button{width:100%;color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;flex-direction:column;align-items:center;gap:.3rem;padding:.55rem .25rem;font-family:inherit;font-size:.6rem;font-weight:600;display:flex}.rail-button:hover{background:#0000000d}.rail-button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}.side-panel{background:var(--bg);border-right:1px solid var(--border);flex-direction:column;flex:0 0 300px;display:flex;overflow:hidden}.side-panel-header{letter-spacing:.08em;text-transform:uppercase;color:var(--text);flex:none;padding:.9rem 1rem .5rem;font-size:.7rem;font-weight:700}.edit-scope-control{border-bottom:1px solid var(--border-soft);flex:none;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.1rem;padding:0 1rem .85rem;display:flex}.edit-scope-control .segmented{flex:none}.side-panel-body{flex-direction:column;flex:1;min-height:0;padding:.85rem 1rem 1rem;display:flex;overflow-y:auto}.panel-content{flex-direction:column;gap:1rem;display:flex}.canvas-viewport{background:var(--canvas-surface);cursor:grab;flex:1;min-width:0;position:relative;overflow:hidden}.canvas-viewport.is-panning{cursor:grabbing}.icon-stage{transform-origin:0 0;position:absolute;inset:0}.icon-tile-canvas{cursor:grab;touch-action:none;border:1px solid #cfcfcf;border-radius:0;width:190px;height:190px;padding:0;transition:box-shadow .12s,left .1s,top .1s;position:absolute;overflow:hidden;box-shadow:0 16px 36px #0000001a}.icon-tile-canvas:active{cursor:grabbing}.icon-tile-canvas[aria-selected=true]{border-color:var(--accent);box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--accent), 0 16px 36px #0000001a}.icon-tile-canvas--add{border:2px dashed var(--border);background:var(--bg);color:var(--text-faint);cursor:pointer;justify-content:center;align-items:center;display:flex}.icon-tile-canvas--add:hover{border-color:var(--accent);color:var(--accent)}.icon-tile-remove{z-index:3;border:1px solid var(--border);width:20px;height:20px;color:var(--text-muted);cursor:pointer;opacity:0;background:#ffffffeb;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:opacity .12s;display:flex;position:absolute;top:6px;right:6px}.icon-tile-canvas:hover .icon-tile-remove,.icon-tile-canvas[aria-selected=true] .icon-tile-remove{opacity:1}.icon-tile-remove:hover{border-color:var(--accent);color:var(--accent)}.grid-overlay{z-index:1;pointer-events:none;background-image:linear-gradient(to right, var(--grid-line-color,#80808059) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line-color,#80808059) 1px, transparent 1px);background-size:calc(100% / var(--grid-cols,12)) calc(100% / var(--grid-rows,12));position:absolute;inset:0}.svg-mount{z-index:2;width:100%;height:100%;display:block;position:relative}.svg-mount svg{width:100%;height:100%;display:block}[data-canvas-bg=black] .icon-tile-canvas,[data-canvas-bg=black] .preview-small .svg-mount{background:#000}[data-canvas-bg=black] .grid-overlay{--grid-line-color:#ffffff52}[data-canvas-bg=white] .icon-tile-canvas,[data-canvas-bg=white] .preview-small .svg-mount{background:#fff}[data-canvas-bg=white] .grid-overlay{--grid-line-color:#0000002e}[data-canvas-bg=transparent] .icon-tile-canvas,[data-canvas-bg=transparent] .preview-small .svg-mount{background-color:#bbb;background-image:linear-gradient(45deg,#888 25%,#0000 25%),linear-gradient(-45deg,#888 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#888 75%),linear-gradient(-45deg,#0000 75%,#888 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}[data-canvas-bg=transparent] .grid-overlay{--grid-line-color:#00000040}.toolbar{background:var(--bg);border:1px solid var(--border);z-index:30;border-radius:14px;align-items:center;gap:.6rem;max-width:calc(100vw - 40px);padding:.4rem .6rem;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0000001f,0 2px 6px #0000000d}.toolbar-group{background:#f6f6f7;border-radius:9px;align-items:center;gap:.5rem;height:46px;padding:0 .6rem;display:flex}.toolbar-spacer{flex:1}.field{flex-direction:column;gap:.4rem;display:flex}.field label,.control-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-size:.68rem;font-weight:600}.control{flex-direction:column;gap:.5rem;display:flex}.control-row{align-items:center;gap:.7rem;display:flex}.control-label-row{justify-content:space-between;align-items:center;display:flex}.segmented{background:#f0f1f3;border-radius:8px;gap:2px;padding:2px;display:inline-flex}.segmented-option{color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:.3rem .65rem;font-family:inherit;font-size:.68rem;font-weight:700;transition:background .12s,color .12s,box-shadow .12s}.segmented-option[aria-pressed=true]{color:var(--accent);background:#fff;box-shadow:0 1px 3px #00000024}.shape-grid{grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.5rem;display:grid}.shape-option{background:var(--bg);color:var(--text-muted);border:1px solid var(--border);cursor:pointer;letter-spacing:.03em;border-radius:6px;flex-direction:column;align-items:center;gap:.3rem;width:100%;padding:.55rem .4rem;font-family:inherit;font-size:.66rem;font-weight:600;display:flex}.shape-option:hover{border-color:var(--text-muted)}.shape-option[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}.shape-option--wide{flex-direction:row;justify-content:center}.text-clear-button{background:var(--bg);color:var(--text-muted);border:1px solid var(--border);cursor:pointer;border-radius:6px;flex:none;padding:.5rem .75rem;font-family:inherit;font-size:.72rem;font-weight:600}.text-clear-button:hover{border-color:var(--text-muted);color:var(--text)}select,input[type=text],input[type=search],input[type=number]{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.5rem .6rem;font-family:inherit;font-size:.85rem}select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23868686' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:11px;padding-right:2.1rem}select:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.control-number{text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield;flex:0 0 60px;width:60px;padding:.4rem .5rem}.control-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.control-number::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.control-number-wrap{flex:0 0 68px;position:relative}.control-number-wrap .control-number{flex:none;width:100%;padding-right:1.6rem}.control-number-wrap .unit{color:var(--text-muted);pointer-events:none;font-size:.72rem;position:absolute;top:50%;right:.55rem;transform:translateY(-50%)}input[type=range]{appearance:none;background:var(--border);border-radius:2px;flex:1;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--action-bg);cursor:pointer;width:14px;height:14px;box-shadow:0 0 0 0 var(--accent-soft);border:none;border-radius:50%;transition:box-shadow .1s}input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--accent-soft)}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--accent-soft)}input[type=range]::-moz-range-thumb{background:var(--action-bg);cursor:pointer;width:14px;height:14px;box-shadow:0 0 0 0 var(--accent-soft);border:none;border-radius:50%;transition:box-shadow .1s}input[type=range]:hover::-moz-range-thumb{box-shadow:0 0 0 5px var(--accent-soft)}input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px var(--accent-soft)}input[type=range]:focus-visible{outline:none}.color-field{align-items:center;gap:.5rem;display:flex}.color-field input[type=color]{border:1px solid var(--border);background:0 0;border-radius:6px;width:2.1rem;height:2.1rem;padding:0}.color-field input[type=text]{flex:1}.hint{color:var(--text-faint);margin:0;font-size:.72rem}.icon-grid{grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:.4rem;display:grid}.icon-tile{aspect-ratio:1;background:var(--bg);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;padding:.4rem;display:flex}.icon-tile:hover{border-color:var(--text-muted)}.icon-tile[aria-selected=true]{border-color:var(--accent);background:var(--accent-soft)}.icon-thumb{width:100%;height:100%;display:block}.icon-thumb svg{stroke:currentColor;width:100%;height:100%}.icon-thumb svg:not([fill=none]){fill:currentColor}.zoom-control{gap:1px}.zoom-button{width:26px;height:26px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;flex:none;justify-content:center;align-items:center;font-family:inherit;font-size:1rem;font-weight:600;line-height:1;display:flex}.zoom-button:hover{color:var(--text);background:#0000000d}.zoom-button:disabled{color:var(--text-faint);cursor:default}.zoom-button:disabled:hover{background:0 0}.zoom-level{text-align:center;font-variant-numeric:tabular-nums;min-width:42px;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:.35rem .2rem;font-family:inherit;font-size:.72rem;font-weight:600}.zoom-level:hover{background:#0000000d}.canvas-bg-picker{gap:.55rem}.canvas-bg-swatch{cursor:pointer;border:1px solid var(--border);width:20px;height:20px;box-shadow:0 0 0 0 var(--accent-soft);border-radius:50%;flex:none;padding:0;transition:box-shadow .12s}.canvas-bg-swatch[aria-pressed=true]{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--accent);border-color:var(--accent)}.canvas-bg-swatch[data-canvas-bg=black]{background:#000}.canvas-bg-swatch[data-canvas-bg=white]{background:#fff}.canvas-bg-swatch[data-canvas-bg=transparent]{background-color:#bbb;background-image:linear-gradient(45deg,#888 25%,#0000 25%),linear-gradient(-45deg,#888 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#888 75%),linear-gradient(-45deg,#0000 75%,#888 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px}.preview-small-group{gap:.85rem}.preview-small{align-items:center;display:flex}.preview-small .svg-mount{border:1px solid var(--border-soft);border-radius:4px;flex:none}.svg-mount--16{width:16px;height:16px}.svg-mount--24{width:24px;height:24px}.svg-mount--40{width:40px;height:40px}.download-group{align-items:center;gap:.4rem;height:46px;display:flex}.download-group select{height:32px;padding:0 1.9rem 0 .65rem;font-size:.8rem}.primary-button{background:var(--action-bg);height:32px;color:var(--action-text);letter-spacing:.01em;cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;gap:.4rem;padding:0 1rem;font-family:inherit;font-size:.82rem;font-weight:600;display:inline-flex}.primary-button:hover{filter:brightness(.9)}