.cl-points{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;padding:4px 4px 4px 0}.cl-point{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:10px;padding:8px;border-radius:var(--radius-s);border:1px solid transparent;transition:background var(--dur-1),border-color var(--dur-1)}.cl-point.is-sel{background:var(--accent-soft);border-color:color-mix(in oklab,var(--accent) 45%,transparent)}.cl-point__n{align-self:center;padding-top:18px;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--fg-faint);text-align:center}.cl-dim{opacity:.45}.cl-canvas{position:relative;width:min(100%,420px);aspect-ratio:1/1;touch-action:none;user-select:none}.cl-sample{position:absolute;inset:0;display:grid;place-items:center;border-radius:6px;background:linear-gradient(135deg,var(--lime) 0,var(--aqua) 55%,var(--violet) 100%);color:#0a0c05;font-weight:800;font-size:clamp(22px,5vw,34px);letter-spacing:var(--tracking-tight);text-align:center;padding:12%;transition:clip-path var(--dur-2) var(--ease-out)}.cl-sample--ghost{opacity:.16;filter:grayscale(.4)}.cl-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.cl-outline polygon{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}.cl-handle{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;padding:0;display:grid;place-items:center;border-radius:50%;border:2px solid var(--accent);background:#0b0d12;color:var(--accent);font:700 10px var(--font-mono);cursor:grab;touch-action:none;transition:transform var(--dur-1) var(--ease-spring)}.cl-handle:hover{transform:scale(1.2)}.cl-handle:active{cursor:grabbing}.cl-handle.is-sel,.cl-handle:focus-visible{background:var(--accent);color:var(--accent-ink);outline:2px solid var(--bg);outline-offset:2px;transform:scale(1.2)}@media (pointer:coarse){.cl-handle{width:32px;height:32px;margin:-16px 0 0 -16px}.cl-handle:after{content:"";position:absolute;inset:-8px}}@media (max-width:520px){.cl-point{grid-template-columns:20px minmax(0,1fr) minmax(0,1fr) auto;gap:6px}}@media (prefers-reduced-motion:reduce){.cl-handle,.cl-sample{transition:none}}@media (pointer:coarse){.cl-canvas{width:min(calc(100% - 44px),420px);margin:22px auto}}