.echo-knob{--knob:56px;display:inline-grid;justify-items:center;gap:var(--echo-space-2)}.echo-knob[data-size=sm]{--knob:40px}.echo-knob[data-size=lg]{--knob:72px}.echo-knob__dial{position:relative;display:grid;place-items:center;width:calc(var(--knob) * 1.42);height:calc(var(--knob) * 1.42)}.echo-knob__scale{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.echo-knob__scale line{stroke:color-mix(in oklab,var(--echo-text-dim) 55%,transparent);stroke-width:2.4;stroke-linecap:round}.echo-knob__scale line[data-lit]{stroke:var(--echo-accent-glow)}.echo-knob__well{display:grid;place-items:center;width:calc(var(--knob) + 8px);height:calc(var(--knob) + 8px);border-radius:50%;cursor:grab;touch-action:none;outline:none;box-shadow:inset 0 2px 5px color-mix(in oklab,var(--echo-cast-ink,black) calc(.65 * var(--echo-shade, 1) * 100%),transparent),inset 0 -1px 0 rgb(255 255 255/calc(.05 * var(--echo-gloss, 1))),inset 0 0 0 var(--echo-line-width,0) var(--echo-line,transparent)}.echo-knob__well:active{cursor:grabbing}.echo-knob__well:focus-visible{box-shadow:0 0 0 2px var(--echo-surface),0 0 0 4px var(--echo-accent-ink,var(--echo-accent-glow)),inset 0 2px 5px color-mix(in oklab,var(--echo-cast-ink,black) calc(.65 * var(--echo-shade, 1) * 100%),transparent)}.echo-knob__cap{position:relative;width:var(--knob);height:var(--knob);border-radius:50%;background:radial-gradient(115% 85% at 32% 0,color-mix(in oklab,var(--echo-paper-stock,var(--echo-text)) calc(var(--echo-pillow, 0) * 34%),transparent) 0,transparent 72%),radial-gradient(circle at 35% 30%,rgb(255 255 255/calc(.16 * var(--echo-gloss, 1))),transparent 55%),linear-gradient(160deg,var(--echo-cap-highlight),var(--echo-cap) 50%,var(--echo-cap-shadow));box-shadow:inset 0 calc(-10px * var(--echo-pillow, 0)) calc(16px * var(--echo-pillow, 0)) color-mix(in oklab,var(--echo-cast-ink,black) calc(.42 * var(--echo-shade, 1) * 100%),transparent),inset 0 1.5px 0 rgb(255 255 255/calc(.35 * var(--echo-gloss, 1))),0 0 0 var(--echo-line-width,0) var(--echo-line,transparent),0 3px 0 var(--echo-line-width,0) var(--echo-seam),0 8px 14px color-mix(in oklab,var(--echo-cast-ink,black) calc(.5 * var(--echo-shade, 1) * 100%),transparent)}.echo-knob__rotor{position:absolute;inset:15%}.echo-knob__pointer{position:absolute;top:0;inset-inline-start:calc(50% - 1.5px);width:3px;height:36%;border-radius:var(--echo-radius-full);background:var(--echo-seam);box-shadow:0 1px 0 rgb(255 255 255/calc(.18 * var(--echo-gloss, 1)))}.echo-knob__label{font-family:var(--echo-font-machine,ui-sans-serif,system-ui,sans-serif);font-size:var(--echo-text-3xs);font-weight:var(--echo-weight-bold,700);letter-spacing:var(--echo-tracking-widest,.25em);text-transform:uppercase;color:var(--echo-text-dim)}.echo-knob__value{font-family:var(--echo-font-lcd,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:var(--echo-text-sm);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:var(--echo-text)}.echo-knob[data-disabled]{opacity:.45}.echo-knob[data-disabled] .echo-knob__well{cursor:default}@media (forced-colors:active){.echo-knob__cap{border:var(--echo-border-thick,2px) solid ButtonText}.echo-knob__pointer{background:ButtonText}.echo-knob__scale line{stroke:GrayText}.echo-knob__scale line[data-lit]{stroke:Highlight}.echo-knob__well:focus-visible{outline:2px solid Highlight}}