.tuner{--tuner-hue:220;--tuner-accent:hsl(var(--tuner-hue) 62% 62%);border:1px solid var(--color-line);background:radial-gradient(120% 80% at 50% 0%, #191926 0%, transparent 70%), var(--color-raised);border-radius:1.25rem;gap:1.5rem;padding:clamp(1.25rem,4vw,2rem);display:grid}.tuner[data-state=in-tune]{--tuner-accent:hsl(var(--tuner-hue) 62% 62%)}.tuner-presets{flex-wrap:wrap;gap:.5rem;display:flex}.tuner-preset{border:1px solid var(--color-line);color:var(--color-mute);font-family:var(--font-mono);cursor:pointer;background:0 0;border-radius:999px;padding:.45rem .85rem;font-size:.8125rem;transition:color .16s,border-color .16s}.tuner-preset:hover{color:var(--color-bone)}.tuner-preset[aria-pressed=true]{color:var(--color-bone);border-color:color-mix(in oklab, var(--color-bone) 45%, transparent);background:color-mix(in oklab, var(--color-bone) 8%, transparent)}.tuner-stage{text-align:center;justify-items:center;gap:.75rem;display:grid}.tuner-note{justify-items:center;gap:.15rem;display:grid}.tuner-note-name{font-family:var(--font-display);letter-spacing:-.04em;color:var(--tuner-accent);font-variant-numeric:tabular-nums;font-size:clamp(3rem,12vw,5.5rem);font-weight:700;line-height:1}.tuner-note-hz,.tuner-status{color:var(--color-mute);font-size:.875rem}.tuner-note-hz{font-family:var(--font-mono)}.tuner-meter{width:min(100%,34rem);height:4.5rem;position:relative}.tuner-band{inset-block:1.25rem auto;background:color-mix(in oklab, var(--color-bone) 10%, transparent);border-radius:.25rem;width:6%;height:2rem;position:absolute;left:47%}.tuner-ticks{position:absolute;inset:0}.tuner-tick{top:1.25rem;left:calc(var(--at) * 100%);background:var(--color-line);width:1px;height:2rem;position:absolute}.tuner-tick-label{font-family:var(--font-mono);color:var(--color-mute);font-size:.6875rem;position:absolute;top:2.4rem;left:50%;transform:translate(-50%)}.tuner-needle{--at:0;background:var(--tuner-accent);width:3px;height:3rem;transform:translateX(calc(-50% + var(--at) * 50%));opacity:.35;border-radius:999px;transition:transform 90ms linear;position:absolute;top:.75rem;left:50%}.tuner[data-state=flat] .tuner-needle,.tuner[data-state=sharp] .tuner-needle{opacity:1}.tuner[data-state=in-tune] .tuner-needle{opacity:1;box-shadow:0 0 0 4px color-mix(in oklab, var(--tuner-accent) 25%, transparent)}.tuner-cents{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.125rem}.tuner-cents-unit{color:var(--color-mute);margin-left:.35rem;font-size:.8125rem}.tuner-start{border:1px solid color-mix(in oklab, var(--color-bone) 45%, transparent);background:var(--color-bone);color:var(--color-ink);cursor:pointer;border-radius:999px;padding:.7rem 1.6rem;font-size:1rem;font-weight:600}.tuner-start:disabled{opacity:.6;cursor:progress}.tuner[data-running=true] .tuner-start{color:var(--color-bone);background:0 0}.tuner-privacy{max-width:34rem;color:var(--color-mute);font-size:.8125rem}.tuner[data-live=true] .tuner-panel[data-active=false],.tuner[data-live=true] .tuner-panel-name{display:none}.tuner-panel-name{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-mute);margin-bottom:.5rem;font-size:.75rem}.tuner-panel+.tuner-panel{margin-top:1.25rem}.tuner-string-list{flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.tuner-string{border:1px solid var(--color-line);border-radius:.75rem;justify-items:center;gap:.1rem;min-width:4.5rem;padding:.5rem .6rem;transition:border-color .16s,background-color .16s;display:grid}.tuner-string[data-current=true]{border-color:hsl(var(--hue) 62% 62%);background:hsl(var(--hue) 62% 62% / .12)}.tuner-string-label{font-family:var(--font-mono);color:var(--color-bone);font-size:1rem}.tuner-string-hz{font-family:var(--font-mono);color:var(--color-mute);font-size:.6875rem}@media (prefers-reduced-motion:reduce){.tuner-needle,.tuner-preset,.tuner-string{transition:none}}