.clasp-edit-card{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border:1px solid var(--line,#dce3e7);border-radius:8px;background:#f8fafb;text-align:left;margin:9px 0 18px;cursor:pointer}
.clasp-edit-card:hover{border-color:#189ed0;background:#f3fafd}.clasp-edit-card>svg:first-child{width:42px;height:58px;flex:none;filter:drop-shadow(0 1px 1px #53647340)}
.clasp-edit-card>span{display:flex;flex-direction:column;gap:5px;flex:1}.clasp-edit-card strong{font-size:12px;font-weight:600}.clasp-edit-card small{font-size:11px;color:#78858e}.clasp-edit-icon{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}
.metal-options #metal-picker{width:27px;height:27px;padding:2px;cursor:pointer;border:1px solid #d4dde4;border-radius:50%;background:#fff}.metal-options #metal-picker::-webkit-color-swatch-wrapper{padding:0}.metal-options #metal-picker::-webkit-color-swatch{border:0;border-radius:50%}.metal-options #metal-picker.active{box-shadow:0 0 0 2px #189ed0}
.clasp-dialog{width:min(850px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
.clasp-editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 205px;gap:24px;padding:0 22px 6px}.clasp-editor-hint{font-size:11px;line-height:1.7;color:#71808c;margin:0 0 10px}.clasp-editor-canvas{height:380px;border:1px solid #dfe8ed;border-radius:9px;background:radial-gradient(circle,#d7e2e8 .8px,transparent 1px) 0 0/18px 18px,#f7fafb;overflow:hidden}
#clasp-editor-svg{display:block;width:100%;height:100%;touch-action:none;outline:none}#clasp-editor-svg:focus-visible{box-shadow:inset 0 0 0 2px #189ed0}.clasp-guides{fill:none;stroke:#c6d6df;stroke-width:.8;stroke-dasharray:3 4;vector-effect:non-scaling-stroke;pointer-events:none}
.clasp-point-actions{display:flex;justify-content:space-between;gap:12px;padding-top:9px}.clasp-point-actions button{font-size:11px}.clasp-editor-shortcut{font-size:10px;color:#85929c;margin:7px 0 0}.clasp-editor-fields{padding-top:24px}.clasp-editor-fields select{width:100%}.clasp-editor-fields .number-unit{width:100%}.clasp-editor-fields input[type=range]{width:100%;accent-color:#168fb7}.clasp-gate-field>span{display:flex;align-items:center;gap:7px}.clasp-gate-key{display:inline-block;width:17px;height:4px;background:#168fb7;border-radius:2px;flex:none}

/* Both the acrylic outline and the hardware use the same editing affordances. */
.outline-dialog>.path-editor-toolbar{margin:0;padding:0 24px 8px}.path-editor-hint{margin:0;padding:0 24px 12px;color:#85929c;font-size:10px;line-height:1.6}
.path-editor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0 0 9px;min-height:31px}.path-editor-modes,.path-editor-history{display:flex;align-items:center;gap:3px}.path-editor-modes{padding:3px;border:1px solid #dce5eb;border-radius:7px;background:#f5f8fa}.path-editor-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:27px;padding:4px 8px;border:0;border-radius:4px;background:transparent;color:#536571;font-size:11px;line-height:1.3;white-space:nowrap;cursor:pointer}.path-editor-toolbar button:hover:not(:disabled){background:#e5f1f7;color:#147fa6}.path-editor-toolbar button[aria-pressed=true]{color:#087ca8;background:#fff;box-shadow:0 1px 3px #54718426}.path-editor-toolbar button:disabled{opacity:.4;cursor:default}.path-editor-toolbar button:focus-visible{outline:2px solid #169dcc;outline-offset:1px}.path-editor-toolbar button svg{width:19px;height:16px;fill:#fff;stroke:currentColor;stroke-width:1.2;overflow:visible}.path-editor-toolbar button svg path{fill:none}.path-editor-toolbar button svg .handle{stroke-width:.8}.path-editor-history button{color:#788794;padding:4px 6px}
.path-editor-svg{touch-action:none;outline:none;user-select:none;-webkit-user-select:none}.path-editor-svg:focus-visible{outline:2px solid #169dcc;outline-offset:3px}.path-editor-underlay{pointer-events:none}.path-editor-line{fill:none;stroke:#1597c6;stroke-width:1.1;vector-effect:non-scaling-stroke;pointer-events:none}.path-editor-edge-hit{fill:none;stroke:transparent;stroke-width:15;vector-effect:non-scaling-stroke;pointer-events:stroke;cursor:copy}.path-editor-svg .path-editor-anchor{fill:#fff;stroke:#1597c6;stroke-width:1.5;cursor:grab}.path-editor-svg .path-editor-anchor>rect,.path-editor-svg .path-editor-anchor>circle:not(.path-editor-hit){vector-effect:non-scaling-stroke}.path-editor-svg .path-editor-anchor.selected{fill:#1597c6;stroke:#fff;stroke-width:1.4;filter:drop-shadow(0 0 .5px #127da7)}.path-editor-svg .path-editor-hit{fill:transparent;stroke:none;cursor:inherit;pointer-events:all}.path-editor-svg .path-editor-handle{cursor:crosshair}.path-editor-handle-line{fill:none;stroke:#329fca;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}.path-editor-svg .path-editor-handle-dot{fill:#fff;stroke:#168fbe;stroke-width:1.3;vector-effect:non-scaling-stroke;cursor:crosshair}.path-editor-svg.path-editor-dragging,.path-editor-svg.path-editor-dragging .path-editor-anchor{cursor:grabbing}
@media(max-width:620px){.clasp-editor-layout{grid-template-columns:1fr;gap:8px;padding:0 14px}.clasp-editor-canvas{height:300px}.clasp-editor-fields{padding-top:4px;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.clasp-editor-fields>.field-note{grid-column:1/-1}.clasp-editor-hint{font-size:10px}.path-editor-toolbar{gap:5px}.path-editor-toolbar button{padding:4px 6px;font-size:10px}.path-editor-history button{padding:4px}.path-editor-toolbar button svg{width:16px}}