.tone{margin:var(--ds-space-lg) 0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ds-space-md)}.tone-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-sm);padding:var(--ds-space-md);background:var(--ds-paper);border:var(--ds-rule-hair) solid var(--ds-rule)}.tone-readout{display:flex;align-items:baseline;gap:var(--ds-space-xs);margin:0;font-family:var(--ds-font-mono);font-variant-numeric:tabular-nums}.tone-readout-hz{font-size:var(--ds-text-lg);font-weight:600}.tone-readout-note{font-size:var(--ds-text-sm);color:var(--ds-muted)}.tone-preview{flex:1 1 8rem;min-width:6rem;height:3rem;color:var(--ds-accent);background:var(--ds-ground);border:var(--ds-rule-hair) solid var(--ds-rule)}.tone-preview-midline{stroke:var(--ds-rule);stroke-width:1;vector-effect:non-scaling-stroke}.tone-preview-trace{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke}.tone-frequency,.tone-presets,.tone-settings,.tone-checks{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-xs) var(--ds-space-sm);padding:var(--ds-space-md);background:var(--ds-paper);border:var(--ds-rule-hair) solid var(--ds-rule)}.tone-slider{flex:1 1 12rem;min-width:8rem;accent-color:var(--ds-accent)}.tone-frequency-fields{display:flex;align-items:center;gap:var(--ds-space-xs)}.tone-frequency-fields button{padding:.3rem .6rem;font-family:var(--ds-font-mono)}.tone-hz-input{width:6rem;padding:.35rem .45rem;background:var(--ds-paper-2);color:var(--ds-ink);border:var(--ds-rule-hair) solid var(--ds-rule);border-radius:0;font-family:var(--ds-font-mono);font-size:var(--ds-text-sm);text-align:right}.tone-preset-row{display:flex;flex-wrap:wrap;gap:var(--ds-space-xs)}.tone-preset-row button{padding:.3rem .6rem;font-family:var(--ds-font-mono);font-size:var(--ds-text-xs)}.tone-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-xs)}.tone-field{display:inline-flex;align-items:center;gap:var(--ds-space-xs)}.tone-field>span{font-family:var(--ds-font-mono);font-size:var(--ds-text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ds-muted)}.tone-field select{padding:.3rem .4rem;background:var(--ds-paper-2);color:var(--ds-ink);border:var(--ds-rule-hair) solid var(--ds-rule);border-radius:0;font-family:var(--ds-font-mono);font-size:var(--ds-text-sm)}.tone-field input[type=range]{width:7rem;accent-color:var(--ds-accent)}.tone-field output{min-width:2.6rem;font-family:var(--ds-font-mono);font-variant-numeric:tabular-nums;font-size:var(--ds-text-sm)}.tone .meter-ghost[aria-pressed=true]{background:var(--ds-ink);border-color:var(--ds-ink);color:var(--ds-paper)}.tone-steps{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-xs);margin:0;padding:0;list-style:none;font-size:var(--ds-text-xs);color:var(--ds-muted)}.tone-steps li{display:flex;align-items:center;gap:var(--ds-space-xs)}.tone-steps li:not(:last-child):after{content:"→";color:var(--ds-muted)}.tone-steps span{padding:.2rem .55rem;border-radius:var(--ds-radius-chip)}.tone-steps li[data-active=true] span{background:var(--ds-ink);color:var(--ds-paper)}.tone-note{flex:1 0 100%;margin:0}.tone-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-xs)}.tone-actions .meter-warn{margin:0}
