:root{--bg: #f3f4f6;--panel: #ffffff;--panel-2: #ebedf0;--border: #d6d9de;--text: #1a1d21;--text-dim: #5c6470;--accent: #3a82c4;--accent-2: #2c6ca6;--accent-contrast: #ffffff;--danger: #c75c5c;--shadow: 0 2px 8px rgba(0, 0, 0, .12);--canvas-bg: #e4e6ea}@media (prefers-color-scheme: dark){:root{--bg: #15171b;--panel: #1f2228;--panel-2: #282c33;--border: #353a42;--text: #e6e9ee;--text-dim: #9aa3b0;--accent: #5fa3d9;--accent-2: #3f86bf;--accent-contrast: #0c1218;--shadow: 0 2px 10px rgba(0, 0, 0, .45);--canvas-bg: #101216}}html[data-mode=light]{--bg: #f3f4f6;--panel: #ffffff;--panel-2: #ebedf0;--border: #d6d9de;--text: #1a1d21;--text-dim: #5c6470;--accent: #3a82c4;--accent-2: #2c6ca6;--accent-contrast: #ffffff;--shadow: 0 2px 8px rgba(0, 0, 0, .12);--canvas-bg: #e4e6ea}html[data-mode=dark]{--bg: #15171b;--panel: #1f2228;--panel-2: #282c33;--border: #353a42;--text: #e6e9ee;--text-dim: #9aa3b0;--accent: #5fa3d9;--accent-2: #3f86bf;--accent-contrast: #0c1218;--shadow: 0 2px 10px rgba(0, 0, 0, .45);--canvas-bg: #101216}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}#app{display:grid;grid-template-columns:max-content 0 1fr 280px;grid-template-rows:48px 1fr;grid-template-areas:"topbar topbar topbar topbar" "toolbar subtoolbar canvas rightbar"}#app.properties-detached{grid-template-columns:max-content 0 1fr 280px 280px;grid-template-areas:"topbar topbar topbar topbar topbar" "toolbar subtoolbar canvas properties rightbar"}#app.construction-subbar{grid-template-columns:max-content max-content 1fr 280px}#app.construction-subbar.properties-detached{grid-template-columns:max-content max-content 1fr 280px 280px}.topbar{grid-area:topbar;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--border);z-index:10}.brand{font-weight:700;color:var(--accent);letter-spacing:.5px}.project-name{color:var(--text-dim);font-style:italic;margin-left:8px}.topbar-spacer{flex:1}.btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:13px;min-height:32px;min-width:32px;transition:background .1s,border-color .1s}.btn:hover:not(:disabled){background:color-mix(in srgb,var(--panel-2) 80%,var(--text) 12%)}.btn:active:not(:disabled){background:color-mix(in srgb,var(--panel-2) 60%,var(--text) 22%)}.btn:disabled{opacity:.4;cursor:not-allowed}#btn-undo,#btn-redo{padding:4px 8px}#btn-undo svg,#btn-redo svg{width:16px;height:16px;fill:currentColor;display:block}.btn.primary{background:var(--accent-2);border-color:var(--accent);color:var(--accent-contrast)}.btn.primary:hover{background:var(--accent)}.btn.active{background:var(--accent-2);border-color:var(--accent);color:var(--accent-contrast)}.btn.icon-btn{width:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;margin-left:4px}.toolbar{grid-area:toolbar;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:stretch;padding:8px 6px;gap:4px;overflow-y:auto}.tool-btn{height:44px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 6px;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--text);cursor:pointer;font-size:20px;transition:background .1s;white-space:nowrap}.tool-btn:hover:not(:disabled){background:var(--panel-2)}.tool-btn.active{background:var(--accent-2);color:var(--accent-contrast)}.tool-btn:disabled{opacity:.35;cursor:not-allowed}.tool-icon{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.tool-label{font-size:13px;font-weight:500;letter-spacing:.1px;flex:1;text-align:left}#app:not(.toolbar-expanded) .tool-label{display:none}#app:not(.toolbar-expanded) .tool-btn{justify-content:center;padding:0}.tool-btn[data-tool-id=stamp] svg{width:26px;height:auto;max-height:18px;fill:currentColor}.tool-btn[data-tool-id=shape] svg{width:24px;height:24px;fill:currentColor}.tool-btn[data-tool-id=stitch] svg{width:22px;height:22px;fill:currentColor}.tool-btn[data-tool-id=construction] svg{width:22px;height:22px;fill:currentColor}.tool-collapse-toggle{margin-top:auto;color:var(--text-dim)}.tool-collapse-toggle .tool-icon svg{width:22px;height:22px;fill:currentColor}.tool-divider{width:32px;height:1px;background:var(--border);margin:4px 0}.subtoolbar{grid-area:subtoolbar;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:stretch;padding:8px 6px;gap:4px;overflow-y:auto}.subtoolbar[hidden]{display:none}.subtool-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--text);cursor:pointer;transition:background .1s}.subtool-btn[hidden]{display:none}.subtool-btn:hover{background:color-mix(in srgb,var(--panel) 70%,var(--text) 14%)}.subtool-btn.active{background:var(--accent-2);border-color:var(--accent);color:var(--accent-contrast)}.subtool-btn svg{width:22px;height:22px;fill:currentColor;stroke:currentColor}.subtool-btn[data-subtool-id=edit] svg{width:36px;height:36px}.subtool-divider{height:1px;background:var(--border);margin:4px 6px}.subtool-divider[hidden]{display:none}.panel-section-divider{border:0;border-top:1px solid var(--border);margin:12px 0}.segment-list{display:flex;flex-direction:column;gap:0;margin:6px 0 4px}.segment-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px;border-radius:4px;height:28px}.segment-row:hover{background:var(--row-hover, rgba(255, 255, 255, .04))}.segment-label{font-size:12px;color:var(--text-dim)}.segment-indicators{display:flex;align-items:center;gap:0}.segment-connector{width:42px;height:2px;background:var(--border);margin:0 -12px;position:relative;z-index:0}.segment-dot{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;color:var(--text);flex:0 0 auto;position:relative;z-index:1}.segment-dot:hover{color:var(--accent, currentColor)}.segment-dot:focus{outline:none}.segment-dot svg{width:12px;height:12px;display:block}.segment-dot-bridged-above:before{content:"";position:absolute;left:12px;top:12px;width:51px;height:2px;margin-top:-1px;background:var(--text);transform-origin:0 50%;transform:rotate(-33.7deg);pointer-events:none;z-index:1}.canvas-host{grid-area:canvas;position:relative;overflow:hidden;background-color:var(--canvas-bg)}#canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.canvas-controls{position:absolute;bottom:12px;left:12px;display:flex;align-items:center;gap:8px}.zoom-indicator,.calibrate-btn,.snap-toggle{height:28px;padding:0 10px;background:#0009;color:#f1ece2;border:1px solid transparent;border-radius:4px;font-family:inherit;cursor:pointer;user-select:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.zoom-indicator:hover,.calibrate-btn:hover,.snap-toggle:hover{border-color:#ffffff40}.zoom-indicator{font-size:12px;min-width:56px}.calibrate-btn{font-size:14px;min-width:36px}.snap-toggle{font-size:11px;min-width:36px}.snap-toggle.active{background:var(--accent-2);border-color:var(--accent);color:var(--accent-contrast)}.snap-angle-indicator{height:28px;background:#0009;color:#f1ece2;border:1px solid transparent;border-radius:4px;font-family:inherit;font-size:12px;user-select:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:52px;gap:4px;padding:0}.snap-angle-indicator:empty{display:none}.snap-angle-indicator svg{display:block;flex-shrink:0}.snap-angle-indicator .snap-angle-value{min-width:24px;text-align:center}.snap-angle-indicator-full{width:64px}.snap-angle-indicator-full .snap-angle-value{min-width:32px}.zoom-popup{position:absolute;bottom:40px;left:12px;background:var(--panel);border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow);padding:4px 0;z-index:20;min-width:80px;max-height:calc(100vh - 100px);overflow-y:auto;display:none;flex-direction:column}.zoom-popup.open{display:flex}.zoom-popup .zoom-option{padding:4px 14px;cursor:pointer;font-size:12px;text-align:right;color:var(--text);background:transparent;border:0;font-family:inherit}.zoom-popup .zoom-option:hover{background:var(--panel-2)}.zoom-popup .zoom-option.current{color:var(--accent)}.zoom-popup .zoom-option.prominent{font-weight:700;font-size:13px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding-top:6px;padding-bottom:6px;margin:4px 0}.zoom-popup .zoom-option.zoom-fit{border-top:1px solid var(--border);margin-top:4px;padding-top:6px}.rightbar{grid-area:rightbar;background:var(--panel);border-left:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}.properties-sidebar{grid-area:properties;background:var(--panel);border-left:1px solid var(--border);overflow-y:auto;display:none;flex-direction:column}#app.properties-detached .properties-sidebar{display:flex}.panel{border-bottom:1px solid var(--border);padding:12px}.panel-shell{position:relative}.panel-detach-btn{position:absolute;top:6px;right:6px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:4px;color:var(--text-dim);cursor:pointer;padding:0;z-index:1}.panel-detach-btn:hover{background:var(--panel-2);color:var(--text)}.panel-detach-btn svg{width:14px;height:14px;fill:none;stroke:currentColor}#layers-shell{max-height:50%;min-height:0;flex-shrink:0;display:flex;flex-direction:column}#layers-panel{flex:1 1 auto;min-height:0;overflow-y:auto}#app.properties-detached #layers-shell{max-height:none;flex:1}.panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin:0 0 8px}.panel .empty{color:var(--text-dim);font-style:italic;font-size:12px}.field{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}.field label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}.preset-dim-label-row{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:14px}.preset-dim-reset{background:var(--accent);border:1px solid var(--accent);color:var(--accent-contrast, #fff);border-radius:3px;font-size:9px;font-weight:700;font-family:inherit;padding:0 6px;line-height:11px;cursor:pointer;text-transform:uppercase;letter-spacing:.4px}.preset-dim-reset:hover{background:var(--accent-2, var(--accent));border-color:var(--accent-2, var(--accent));filter:brightness(1.05)}.preset-dim-reset:active{filter:brightness(.92)}.field input[type=number],.field input[type=text],.field select{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:4px;font-size:13px;min-height:28px}.field input[type=range]{width:100%}.field-row{display:flex;gap:6px}.field-row>*{flex:1}.mm-in-row{display:flex;gap:6px;flex:1}.mm-in-cell{position:relative;flex:1;min-width:0}.mm-in-cell input[type=number],.mm-in-cell input[type=text]{width:100%;padding-right:24px}.mm-in-unit{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px;pointer-events:none}.length-field-row>input[type=range]{flex:1.4}.length-field-row>.mm-in-row{flex:2.2}.stitch-summary{font-size:11px;color:var(--text-dim);margin:2px 0 8px;font-variant-numeric:tabular-nums}.stitch-pitch-input-row{display:flex;align-items:stretch;gap:6px}.stitch-pitch-input-row>.mm-in-row{flex:1}.stitch-reset-btn{flex:0 0 auto;width:28px;background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:4px;cursor:pointer;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.stitch-reset-btn:hover{border-color:var(--accent)}.preset-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:4px}.preset-row-label{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-dim);width:16px}.preset-chip{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:2px 8px;font-size:11px;cursor:pointer;font-family:inherit;line-height:1.3}.preset-chip:hover{border-color:var(--accent)}.preset-chip.active{background:var(--accent-2);border-color:var(--accent);color:var(--accent-contrast)}.stamp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:4px}.stamp-tile{aspect-ratio:1;background:var(--panel-2);border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:4px;position:relative}.stamp-tile:hover{border-color:var(--accent)}.stamp-tile.selected{border-color:var(--accent);background:var(--accent-2)}.shape-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:4px}.shape-tile{aspect-ratio:1;background:var(--panel-2);border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:6px;color:var(--text);font-family:inherit}.shape-tile:hover{border-color:var(--accent)}.shape-tile.selected{border-color:var(--accent);background:var(--accent-2);color:var(--accent-contrast)}.shape-tile svg{width:100%;height:100%}.stamp-tile svg{width:100%;height:100%}.hardware-color-row{display:flex;gap:6px;flex-wrap:wrap}.hardware-color-swatch{width:24px;height:24px;border-radius:50%;border:1px solid var(--border);cursor:pointer;padding:0;box-shadow:inset 0 -2px 3px #00000040}.hardware-color-swatch:hover{border-color:var(--accent)}.hardware-color-swatch.selected{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}.layers-hardware-swatch{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.35);vertical-align:-2px}.stamp-categories{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.stamp-cat{background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);padding:2px 8px;border-radius:10px;font-size:11px;cursor:pointer}.stamp-cat.active{background:var(--accent-2);border-color:var(--accent);color:var(--accent-contrast)}.layer-row{display:flex;align-items:center;gap:6px;padding:4px;border-radius:4px;cursor:pointer;font-size:12px}.layer-row:hover{background:var(--panel-2)}.layer-row.selected{background:var(--accent-2);color:var(--accent-contrast)}.layer-row.layer-group-header{cursor:default;color:var(--text-dim);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px}.layer-row.layer-group-header:hover{background:transparent}.layer-row.layer-group-header.selectable{cursor:pointer}.layer-row.layer-group-header.selectable:hover{background:var(--panel-2)}.layer-row.layer-group-header.selectable.selected{background:var(--accent-2);color:var(--accent-contrast)}.layer-row .row-toggle{display:inline-flex;align-items:center;height:16px;margin-top:-.4rem;font-size:28px;line-height:1;color:var(--text);flex-shrink:0;user-select:none;overflow:visible}.layer-row .row-toggle.interactive{cursor:pointer}.layer-row .row-toggle.interactive:hover{color:var(--accent)}.layer-row .visibility{cursor:pointer;width:18px;text-align:center;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.layer-row .visibility svg{width:18px;height:auto;max-height:14px}.layer-row .visibility.faded{opacity:.3}.layer-row.faded .row-label,.layer-row.faded .visibility{opacity:.45}.layer-row.faded.selected{opacity:1}.layer-row .row-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-row .row-action{background:transparent;border:0;color:inherit;opacity:.55;cursor:pointer;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;font-size:16px;line-height:1}.layer-row:hover .row-action{opacity:1}.layer-row .row-action:hover{background:#ffffff1f;color:var(--danger)}.modal-host{position:fixed;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;z-index:100}.modal-host.open{pointer-events:auto;background:#00000080}.modal{background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);min-width:360px;max-width:540px;max-height:80vh;overflow-y:auto}.modal header{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600}.modal .body{padding:16px}.modal footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}.calibration-modal{min-width:480px;max-width:720px}.calibration-instructions{margin:0 0 16px;color:var(--text-2, var(--text));font-size:13px;line-height:1.4}.calibration-line-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 0;margin-bottom:12px}.calibration-line{height:16px;border-left:2px solid var(--text);border-right:2px solid var(--text);background:linear-gradient(to bottom,transparent calc(50% - 1px),var(--text) calc(50% - 1px),var(--text) calc(50% + 1px),transparent calc(50% + 1px));box-sizing:border-box;flex-shrink:0}.calibration-input-row{display:flex;align-items:center;gap:8px}.calibration-input-row label{font-size:13px;white-space:nowrap}.calibration-mm-in input[type=text]{background:var(--panel-2, transparent);border:1px solid var(--border);border-radius:4px;color:var(--text);font:inherit;padding:4px 24px 4px 6px;min-height:28px;box-sizing:border-box}.calibration-save{font-weight:600}.stitch-flyout,.construction-flyout{position:fixed;display:none;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:6px;box-shadow:0 4px 14px #00000040;z-index:20}.stitch-flyout.open,.construction-flyout.open{display:flex}.stitch-flyout-btn,.construction-flyout-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid;background:transparent;cursor:pointer;transition:background .1s}.stitch-flyout-btn.confirm,.construction-flyout-btn.confirm{border-color:#4caf50;color:#4caf50}.stitch-flyout-btn.confirm:hover:not(:disabled),.construction-flyout-btn.confirm:hover:not(:disabled){background:color-mix(in srgb,#4caf50 18%,transparent)}.stitch-flyout-btn.cancel,.construction-flyout-btn.cancel{border-color:var(--danger);color:var(--danger)}.stitch-flyout-btn.cancel:hover,.construction-flyout-btn.cancel:hover{background:color-mix(in srgb,var(--danger) 18%,transparent)}.stitch-flyout-btn:disabled,.construction-flyout-btn:disabled{opacity:.4;cursor:not-allowed}@media (pointer: coarse){.tool-btn{height:48px;min-width:48px}.btn{padding:8px 14px;min-height:40px}.stitch-flyout-btn,.construction-flyout-btn{width:48px;height:48px}}@media (max-width: 900px){#app{grid-template-columns:max-content 1fr;grid-template-rows:48px 1fr;grid-template-areas:"topbar topbar" "toolbar canvas"}#app.properties-detached{grid-template-columns:max-content 1fr;grid-template-areas:"topbar topbar" "toolbar canvas"}.rightbar,.properties-sidebar,#app.properties-detached .properties-sidebar{display:none}}