:root{--bg:#f6f5f2;--panel:#fff;--ink:#1c1b19;--muted:#6b6760;--line:#e4e1da;--accent:#1f6feb;--ok:#15803d;--warn:#b45309;--bad:#b91c1c;--select:#f97316;color:var(--ink);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px}*{box-sizing:border-box}body{background:var(--bg);margin:0}button,select,input,.button{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;border-radius:6px;padding:6px 10px}button:hover,.button:hover{border-color:#c9c4b9}button.primary,.button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button:disabled{opacity:.5;cursor:default}button.link{color:var(--accent);background:0 0;border:none;padding:2px 0}input{cursor:text}.app{flex-direction:column;height:100vh;display:flex}.app.dragging{outline:3px dashed var(--accent);outline-offset:-6px}.topbar{background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:10px;padding:8px 14px;display:flex}.topbar h1{margin:0 8px 0 0;font-size:16px}.topbar h1 a{color:inherit;text-decoration:none}.filename{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:40ch;overflow:hidden}.spacer{flex:1}.segmented{display:inline-flex}.segmented button{border-radius:0}.segmented button:first-child{border-radius:6px 0 0 6px}.segmented button:last-child{border-radius:0 6px 6px 0;margin-left:-1px}.segmented button.on{background:var(--ink);color:#fff;border-color:var(--ink)}.workspace{flex:1;grid-template-columns:minmax(300px,360px) 1fr;min-height:0;display:grid}.sidebar{border-right:1px solid var(--line);flex-direction:column;gap:12px;padding:12px;display:flex;overflow-y:auto}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px}.panel h2{margin:0 0 8px;font-size:14px}.panel p{margin:6px 0}.muted{color:var(--muted)}.row{flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;display:flex}.row.between{justify-content:space-between;margin-top:0}.status{background:#fafaf8;border-left:4px solid;border-radius:4px;padding:6px 10px}.status.ok{border-color:var(--ok)}.status.warn{border-color:var(--warn);background:#fffaf0}.status.bad{border-color:var(--bad);background:#fff5f5}.callout{background:#fff6d6;border:2px solid #c87400;border-radius:6px;margin-top:10px;padding:8px 10px}.choices{flex-direction:column;gap:6px;margin-top:8px;display:flex}.choices.grid{grid-template-columns:1fr 1fr;display:grid}.choices button{text-align:left}.measure{flex-direction:column;gap:8px;margin-top:10px;display:flex}.measure label{flex-direction:column;gap:4px;display:flex}.measure input{width:8ch}.quote{font-style:italic}.inspector{border-color:var(--select)}.pieces{flex-direction:column;gap:6px;margin:8px 0 0;padding:0;list-style:none;display:flex}.piece{border:1px solid var(--line);cursor:pointer;border-radius:8px;align-items:flex-start;gap:8px;padding:8px;display:flex}.piece.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.piece.off{opacity:.45}.swatch{border-radius:3px;flex:none;width:12px;height:12px;margin-top:6px}.piece-body{flex:1;min-width:0}.piece-name{border-color:#0000;width:100%;margin-left:-4px;padding:2px 4px;font-weight:600}.piece-name:hover,.piece-name:focus{border-color:var(--line)}.hint{color:var(--warn);font-size:12px;display:block}.facts{color:var(--muted);margin:4px 0 0;padding:0;font-size:12.5px;list-style:none}.facts li.warn{color:var(--warn)}.include input{margin-top:6px}.notes{color:var(--muted);margin:0;padding-left:18px}.legend ul{gap:4px;margin:0;padding:0;list-style:none;display:grid}.legend li{color:var(--muted);align-items:center;gap:8px;display:flex}.legend svg{width:30px;height:8px;overflow:visible}.k-cut{stroke:var(--accent);stroke-width:2px}.k-stitch{stroke:var(--accent);stroke-width:1.2px;stroke-dasharray:3 2}.k-grain{stroke:var(--accent);stroke-width:2.5px}.k-fold{stroke:var(--ok);stroke-width:4px;opacity:.6}.k-notch{fill:var(--bad)}.k-none{stroke:#9ca3af;stroke-width:1px}.canvas-wrap{background:#fbfaf8;min-width:0;min-height:0;position:relative}.canvas{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.canvas:active{cursor:grabbing}.shape .vis{fill:none;stroke:currentColor;vector-effect:non-scaling-stroke;stroke-width:1px}.shape .hit{fill:none;stroke:#0000;vector-effect:non-scaling-stroke;stroke-width:10px;cursor:pointer}.shape.role-cut .vis{stroke-width:1.8px}.shape.role-stitch .vis{stroke-dasharray:5 3}.shape.role-grain .vis,.shape.role-fold .vis{stroke-width:1.2px}.shape.role-notch .vis{stroke:var(--bad);stroke-width:2px}.shape.role-decoration .vis{stroke-width:.8px;opacity:.6}.shape.role-none .vis{stroke-width:.8px}.shape.selected .vis{stroke:var(--select);stroke-width:3px}.label{fill:#57534e;cursor:pointer}.feat-grain{stroke:currentColor;stroke-width:2.5px;vector-effect:non-scaling-stroke;opacity:.85}.feat-fold{stroke:var(--ok);stroke-width:7px;vector-effect:non-scaling-stroke;opacity:.45;stroke-linecap:round}.feat-notch{fill:var(--bad)}.scalebar{color:var(--muted);pointer-events:none;align-items:center;gap:8px;font-size:12px;display:flex;position:absolute;bottom:14px;left:16px}.scalebar .bar{border:2px solid var(--ink);border-top:none;height:6px}.canvas-tools{gap:6px;display:flex;position:absolute;top:12px;right:12px}.welcome{flex:1;justify-content:center;align-items:flex-start;padding:32px 16px;display:flex;overflow-y:auto}.welcome-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;max-width:680px;padding:24px 28px;line-height:1.5}.welcome-card h2{margin-top:0}.welcome-card h3{margin-bottom:4px;font-size:15px}@media (width<=800px){.workspace{grid-template-rows:55vh auto;grid-template-columns:1fr}.canvas-wrap{border-bottom:1px solid var(--line);order:-1}.sidebar{border-right:none}}.shape.role-square .vis{stroke:var(--ok);stroke-width:1.5px;fill:var(--ok);fill-opacity:.08}.small{font-size:12.5px}.stack{flex-direction:column;gap:4px;margin-top:8px;display:flex}.check{align-items:center;gap:6px;display:inline-flex}.steps-nav{margin-left:8px;display:inline-flex}.steps-nav button{border-radius:0}.steps-nav button:first-child{border-radius:6px 0 0 6px}.steps-nav button:last-child{border-radius:0 6px 6px 0;margin-left:-1px}.steps-nav button.on{background:var(--accent);border-color:var(--accent);color:#fff}.points{flex-direction:column;gap:6px;margin:8px 0 0;padding:0;list-style:none;display:flex}.points>li{border:1px solid var(--line);cursor:pointer;border-radius:8px;padding:8px}.points>li.selected{border-color:var(--select);box-shadow:0 0 0 1px var(--select)}.gp-name{border-color:#0000;flex:1;margin-left:-4px;padding:2px 4px;font-weight:600}.gp-name:hover,.gp-name:focus{border-color:var(--line)}.rule{grid-template-columns:1fr 1fr;gap:8px;margin-top:6px;display:grid}.rule label{color:var(--muted);flex-direction:column;gap:2px;font-size:12.5px;display:flex}input.len{width:100%;min-width:0}input.len.bad{border-color:var(--bad);background:#fff5f5}.steps{margin-top:6px}.steps summary{cursor:pointer;color:var(--accent);font-size:12.5px}.steps table{border-collapse:collapse;width:100%;margin-top:6px;font-size:12.5px}.steps th{text-align:left;color:var(--muted);font-weight:500}.steps td{padding:2px 3px 2px 0}.steps tr.override td:first-child{color:var(--warn);font-weight:600}.chips{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.chips p{width:100%;margin:0}.chip{border-radius:999px;padding:3px 10px;font-size:12.5px}.canvas-legend{border:1px solid var(--line);background:#fffffff0;border-radius:8px;max-height:calc(100% - 110px);padding:8px 10px;font-size:12.5px;position:absolute;top:52px;right:12px;overflow-y:auto}.legend-box ul{gap:2px;margin:6px 0;padding:0;list-style:none;display:grid}.legend-box label{cursor:pointer;align-items:center;gap:6px;display:flex}.legend-box svg{width:28px;height:6px;overflow:visible}.nest-cut{fill:none;stroke:currentColor;vector-effect:non-scaling-stroke}.nest-stitch{fill:none;stroke:currentColor;stroke-width:.6px;stroke-dasharray:2 2;vector-effect:non-scaling-stroke;opacity:.55}.nest-grain{stroke:currentColor;stroke-width:1px;vector-effect:non-scaling-stroke;opacity:.7}.nest-notch{stroke:currentColor;stroke-width:1.4px;vector-effect:non-scaling-stroke}.baseline-hit{fill:none;stroke:#0000;stroke-width:12px;vector-effect:non-scaling-stroke;cursor:crosshair}.baseline-hit:hover{stroke:#1f6feb2e}.vertex{fill:#fff;stroke:#111;stroke-width:1px;vector-effect:non-scaling-stroke}.gp{cursor:pointer}.gp path{fill:#f97316;stroke:#fff;stroke-width:1px;vector-effect:non-scaling-stroke}.gp.selected path{fill:#c2410c;stroke:#111;stroke-width:2px}.gp text{fill:#9a3412;paint-order:stroke;stroke:#fff;stroke-width:3px;font-weight:600}.gp-move{stroke:#f97316;stroke-width:1.5px;vector-effect:non-scaling-stroke}.break-shortcut{grid-template-columns:auto 1fr;align-items:center;gap:4px 6px;margin:8px 0;font-size:12.5px;display:grid}.break-shortcut button{grid-column:1/-1;justify-self:start}.centre-line{stroke:#475569;stroke-width:1px;stroke-dasharray:12 4 2 4;vector-effect:non-scaling-stroke;opacity:.7}.frame-arrow{stroke:#475569;stroke-width:1.5px;vector-effect:non-scaling-stroke}.frame-guide text{fill:#475569}.formats{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.formats li{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:10px;padding-bottom:10px;display:flex}.formats li:last-child{border-bottom:none}.formats p{margin:2px 0 0}.export-preview{flex-direction:column;display:flex}.export-preview .canvas{cursor:default;flex:1}.preview-tools{color:var(--muted);align-items:center;gap:6px;padding:8px 12px;display:flex}.preview-tools button.on{background:var(--ink);color:#fff;border-color:var(--ink)}.tile{fill:#fff;stroke:#1f6feb;stroke-width:1px;vector-effect:non-scaling-stroke}.tile.blank{fill:#eceae4;stroke:#c9c4b9}.tile-label{fill:#1f6feb40;font-weight:700}.pv-base{fill:none;stroke:#111;stroke-width:1.2px;vector-effect:non-scaling-stroke}.pv-other{fill:none;stroke:#9ca3af;stroke-width:.8px;vector-effect:non-scaling-stroke}.file-error{flex-wrap:wrap;align-items:baseline;gap:8px;margin:10px 16px 0;display:flex}.modal-backdrop{z-index:50;background:#14141459;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--panel);border-radius:12px;width:100%;max-width:520px;padding:20px 24px;box-shadow:0 10px 40px #0003}.modal h2{margin-top:0}.modal textarea{width:100%;font:inherit;border:1px solid var(--line);resize:vertical;border-radius:6px;padding:6px 8px}.modal.wide{max-width:680px;max-height:calc(100vh - 32px);line-height:1.5;overflow-y:auto}.help-steps li,.help-terms li{margin-bottom:6px}.term{-webkit-text-decoration:underline dotted var(--muted);text-decoration:underline dotted var(--muted);text-underline-offset:3px;cursor:help}.topbar select[aria-label="Open a sample"]{max-width:160px}@media (width<=1500px){.topbar .filename{display:none}}.filename{max-width:30ch}.sidebar select{max-width:100%}.narrow-note{display:none}@media (width<=760px){.narrow-note{background:#fff6d6;border:1px solid #e8c770;border-radius:6px;margin:8px 14px 0;padding:8px 10px;font-size:13px;display:block}}.pv-piece{fill:#0000;stroke:#0000;cursor:grab;vector-effect:non-scaling-stroke}.pv-piece:hover{stroke:#1f6feb80;stroke-width:1.5px;stroke-dasharray:4 3}.pv-piece.moving{cursor:grabbing;fill:#1f6feb0f;stroke:#1f6feb;stroke-width:1.5px}.pv-piece.overlap{fill:#b91c1c14;stroke:#b91c1c;stroke-width:1.5px}.arrange-note{margin-left:12px;font-size:13px}.preview-warning{margin:0 12px 6px}.projector-weight{color:var(--muted);margin-top:4px;display:block}