.cr-grad-stage{min-height:380px}.cr-grad-preview{position:relative;width:min(100%,760px);max-height:460px;border-radius:var(--radius-m);border:1.5px solid var(--color-edge);box-shadow:var(--shadow-s);touch-action:none}.cr-grad-centre{position:absolute;width:44px;height:44px;min-height:44px;padding:0;transform:translate(-50%,-50%);border:0;background:transparent;cursor:grab}.cr-grad-centre span{display:block;width:22px;height:22px;margin:auto;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px #000,0 2px 6px #0006}.cr-grad-centre:hover:not(:disabled){background:transparent}.cr-grad-centre:focus-visible{outline-offset:-4px;border-radius:50%}.cr-grad-stops{display:grid;gap:var(--space-3);padding:var(--space-5) var(--space-5) var(--space-4);border-top:1.5px solid var(--color-line)}.cr-grad-bar-wrap{padding:0 22px}.cr-grad-bar{position:relative;height:44px;border-radius:var(--radius-m);border:1.5px solid var(--color-edge);background:repeating-conic-gradient(var(--color-line-strong) 0 25%,var(--color-surface) 0 50%) 0 0 /14px 14px;cursor:copy;touch-action:none}.cr-grad-bar-fill{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.cr-grad-handle{position:absolute;top:50%;width:44px;height:58px;min-height:0;padding:0;transform:translate(-50%,-50%);border:0;cursor:ew-resize;touch-action:none}.cr-grad-handle,.cr-grad-handle:hover:not(:disabled){background:transparent}.cr-grad-handle span{display:block;width:22px;height:52px;margin:auto;border-radius:6px;border:3px solid var(--color-surface);box-shadow:0 0 0 1.5px var(--color-edge),var(--shadow-s)}.cr-grad-handle[data-active] span{border-color:var(--color-accent);box-shadow:0 0 0 1.5px var(--color-edge),0 0 0 5px var(--color-accent-soft)}.cr-grad-handle[data-active]{z-index:2}.cr-grad-handle:focus-visible{outline:none}.cr-grad-handle:focus-visible span{box-shadow:0 0 0 1.5px var(--color-edge),0 0 0 5px var(--color-focus)}.cr-grad-help,.cr-grad-tip{margin:0;color:var(--color-muted);font-size:var(--text-xs)}.cr-grad-out{display:grid;gap:var(--space-3);padding:var(--space-4) var(--space-5) var(--space-5);border-top:1.5px solid var(--color-line)}.cr-grad-out-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.cr-grad-out-head h3{margin:0;font:600 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted)}.cr-grad-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}.cr-grad-presets button{display:grid;gap:4px;padding:4px;min-height:64px;align-content:start}.cr-grad-presets button span{display:block;height:34px;border-radius:var(--radius-s);border:1px solid var(--color-line-strong)}.cr-grad-presets small{font-size:var(--text-2xs);font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cr-grad-angles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.cr-grad-angles button{min-height:40px;padding:4px;font:600 var(--text-xs) var(--font-mono)}.cr-grad-angles button[aria-pressed=true]{color:var(--color-accent);background:var(--color-accent-soft);border-color:var(--color-accent)}@media (max-width:560px){.cr-grad-stage{min-height:0}.cr-grad-out,.cr-grad-stops{padding-inline:var(--space-4)}}.cr-grad .cr-grad-centre:active:not(:disabled),.cr-grad .cr-grad-handle:active:not(:disabled){transform:translate(-50%,-50%)}