.shp-reference{border:1px solid var(--line);border-radius:10px;padding:10px}.shp-reference summary{cursor:pointer;font-weight:600}.shp-reference-tools{flex-wrap:wrap;align-items:end;gap:8px;margin:10px 0;display:flex}.shp-reference-tools label:not(.shp-btn){gap:4px;width:150px;font-size:.8rem;display:grid}.shp-reference-tools input{background:var(--field);color:var(--ink);border:1px solid var(--line);box-sizing:border-box;border-radius:6px;width:100%;padding:6px}.shp{gap:10px;display:grid}.shp:popover-open{border:1px solid var(--line);background:var(--surface);color:var(--ink);box-sizing:border-box;border-radius:16px;align-content:start;width:auto;height:auto;margin:0;padding:18px;position:fixed;inset:12px;overflow:auto}.shp::backdrop{background:#10181e80}.shp:popover-open{grid-auto-rows:max-content}.shp:popover-open .shp-stage>svg{height:min(60dvh,700px)}.shp-bar{flex-wrap:wrap;justify-content:space-between;gap:8px;display:flex}.shp-group{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.shp-btn{all:unset;box-sizing:border-box;border:1px solid var(--line);background:var(--surface);height:36px;color:var(--ink);cursor:pointer;transition:background var(--dur-hover) ease, border-color var(--dur-hover) ease, color var(--dur-hover) ease, transform .12s var(--ease-out);border-radius:10px;align-items:center;gap:6px;padding:0 12px;font-size:.88rem;font-weight:600;display:inline-flex}.shp-btn svg{width:17px;height:17px}.shp-btn:hover:not(:disabled){background:var(--field)}.shp-btn:active:not(:disabled){transform:scale(.97)}.shp-btn:focus-visible{outline:3px solid var(--chalk);outline-offset:1px}.shp-btn:disabled{opacity:.4;cursor:default}.shp-icon{padding:0 10px}.shp-btn[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--primary-foreground)}.shp-stage{border:1px solid var(--line);background:var(--surface);border-radius:14px;position:relative;overflow:hidden}.shp-stage>svg{touch-action:none;-webkit-user-select:none;user-select:none;cursor:default;outline:none;width:100%;height:320px;display:block}.shp-stage>svg.drawing{cursor:crosshair}.shp-stage:has(svg:focus-visible){box-shadow:0 0 0 3px var(--focus-ring)}.shp-v,.shp-mid,.shp-stage[data-tool=pan] :is(.shp-v,.shp-mid){cursor:grab}.shp-camera-tools button[aria-pressed=true]{background:var(--ink);color:var(--primary-foreground);border-color:var(--ink);box-shadow:inset 0 -3px var(--flag)}.shp-mid{opacity:.75;transition:opacity var(--dur-hover) ease}.shp-mid:hover{opacity:1}.shp-sum{background:color-mix(in srgb, var(--surface) 88%, transparent);color:var(--ink);pointer-events:none;border-radius:99px;margin:0;padding:4px 10px;font-size:.85rem;font-weight:700;position:absolute;top:8px;left:10px}.shp-help{margin:-2px 0 0}.shp-selection-actions{border:1px solid var(--line);background:var(--field);border-radius:10px;justify-content:space-between;align-items:center;gap:8px;padding:5px 6px 5px 12px;font-size:.85rem;font-weight:600;display:flex}.shp-selection-actions[hidden]{display:none}.shp-selection-actions .shp-remove{color:var(--flag);border-color:color-mix(in srgb,var(--flag) 30%,var(--line));flex-shrink:0}.shp-selection-actions .shp-remove:hover:not(:disabled){background:color-mix(in srgb,var(--flag) 8%,var(--surface))}@media (pointer:coarse){.shp-selection-actions .shp-remove{height:44px}}.shp-empty{text-align:center;pointer-events:none;animation:y-in .26s var(--ease-out) both;place-content:center;justify-items:center;gap:6px;padding:20px;display:grid;position:absolute;inset:0}.shp-empty[hidden]{display:none}.shp-empty-t{font-family:var(--font-cond);color:var(--ink);background:color-mix(in srgb, var(--surface) 80%, transparent);border-radius:8px;margin:10px 0 0;padding:0 8px;font-size:1.3rem;font-weight:700}.shp-empty-s{max-width:34ch;color:var(--ink-2);background:color-mix(in srgb, var(--surface) 80%, transparent);border-radius:8px;margin:0;padding:2px 8px;font-size:.88rem;line-height:1.45}.shp-target{background:var(--flag);width:22px;height:22px;box-shadow:0 0 0 4px color-mix(in srgb, var(--flag) 25%, transparent);border-radius:99px;position:relative}.shp-target i{border:2px solid var(--flag);animation:shp-ping 1.6s var(--ease-out) infinite;border-radius:99px;position:absolute;inset:-4px}@keyframes shp-ping{0%{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(2.6)}}.shp-cancel{all:unset;pointer-events:auto;color:var(--chalk);cursor:pointer;border-radius:8px;margin-top:6px;padding:4px 8px;font-size:.85rem;font-weight:600}.shp-cancel:hover{background:var(--tint)}.shp-cancel:focus-visible{outline:3px solid var(--chalk)}.shp-stage:has(.shp-empty:not([hidden])) .shp-sum{display:none}@media (prefers-reduced-motion:reduce){.shp-target i{animation:none}}.shp-warn{background:color-mix(in srgb, var(--flag) 10%, transparent);color:var(--flag-deep);border-radius:10px;align-items:center;gap:8px;margin:0;padding:8px 12px;font-size:.9rem;font-weight:600;display:flex}.shp-warn[hidden]{display:none}.shp-warn svg{flex:none;width:18px;height:18px}.shp-type{background:var(--tint);animation:y-in .24s var(--ease-out) both;border-radius:12px;flex-wrap:wrap;align-items:end;gap:12px 18px;padding:12px;display:flex}.shp-type[hidden]{display:none}.shp-type .lbl{margin-bottom:6px}.shp-dirgrid{grid-template-columns:repeat(8,32px);gap:4px;display:grid}.shp-dir{all:unset;background:var(--surface);border:1px solid var(--line);cursor:pointer;height:32px;transition:background var(--dur-hover) ease;border-radius:8px;place-items:center;font-size:1rem;display:grid}.shp-dir[aria-pressed=true]{background:var(--ink);color:var(--primary-foreground);border-color:var(--ink)}.shp-dir:focus-visible{outline:3px solid var(--chalk)}.shp-next{flex:1;min-width:240px}.shp-nextrow{flex-wrap:wrap;gap:8px;display:flex}.shp-nextrow .ig{flex:1;min-width:110px}.shp-nextrow .btn{height:44px}.shp-sides{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.shp-sides li{animation:y-in .22s var(--ease-out) both;align-items:center;gap:8px;display:flex}.shp-k{width:38px;color:var(--muted-ink);flex:none;font-size:.85rem;font-weight:700}.shp-a{text-align:right;width:46px;color:var(--muted-ink);font-variant-numeric:tabular-nums;flex:none;font-size:.82rem}.ig-sm{flex:1;min-width:0}.ig-sm input{height:38px}@media (width<=640px){.shp-stage>svg{height:270px}.shp-dirgrid{grid-template-columns:repeat(4,38px)}.shp-dir{height:34px}}
