/* Vocal Scale Finder 1.0.0 – scoped to .vsf. singingrangetest.com palette (Astra): blue #046bd2, slate #1e293b. */
.vsf{--vsf-ink:#1e293b;--vsf-muted:#334155;--vsf-line:#d1d5db;--vsf-bg:#fff;--vsf-soft:#f5f8fc;--vsf-accent:#046bd2;--vsf-good:#047857;--vsf-off:#b45309;--vsf-err:#b91c1c;box-sizing:border-box;max-width:780px;margin:1em 0 1.5em;padding:16px;background:var(--vsf-bg);color:var(--vsf-ink);border:1px solid var(--vsf-line);border-radius:12px;box-shadow:0 1px 3px rgba(20,30,50,.06);font-size:16px;line-height:1.5}
.vsf *,.vsf *::before,.vsf *::after{box-sizing:inherit}
.vsf [hidden]{display:none!important}
.vsf .vsf-title{margin:0 0 4px;font-size:1.35em;line-height:1.25;color:var(--vsf-ink)}
.vsf .vsf-intro{margin:0 0 12px;color:var(--vsf-muted);font-size:.95em}
.vsf .vsf-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.vsf .vsf-btn{min-height:44px;padding:9px 16px;font:inherit;font-weight:600;color:var(--vsf-ink);background:#fff;border:1px solid #cbd5e1;border-radius:8px;cursor:pointer;line-height:1.2}
.vsf .vsf-btn:hover{border-color:var(--vsf-accent)}
.vsf .vsf-btn-primary{color:#fff;background:var(--vsf-accent);border-color:var(--vsf-accent)}
.vsf .vsf-btn-primary:hover{background:#045cb4}
.vsf .vsf-btn-quiet{border-color:transparent;background:transparent;color:var(--vsf-accent)}
.vsf .vsf-btn-small{min-height:40px;padding:6px 12px;font-size:.92em}
.vsf .vsf-btn:disabled{opacity:.5;cursor:not-allowed}
.vsf button:focus-visible,.vsf select:focus-visible{outline:3px solid #8fc1ee;outline-offset:2px}
.vsf select{box-sizing:border-box;width:100%;min-height:44px;padding:8px 10px;font:inherit;color:var(--vsf-ink);background:#fff;border:1px solid #cbd5e1;border-radius:8px}
.vsf .vsf-status{margin:8px 0 12px;font-size:.92em;color:var(--vsf-muted)}
.vsf .vsf-status.vsf-error{color:var(--vsf-err);font-weight:600}
.vsf .vsf-display{padding:14px;background:var(--vsf-soft);border:1px solid var(--vsf-line);border-radius:10px}
.vsf .vsf-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.88em;font-weight:600;color:var(--vsf-muted);margin:0 0 8px}
.vsf .vsf-display[data-vsf-mode="noisy"] [data-vsf-state],.vsf .vsf-display[data-vsf-mode="nosignal"] [data-vsf-state]{color:var(--vsf-off)}
.vsf .vsf-display[data-vsf-mode="note"] [data-vsf-state]{color:var(--vsf-good)}
.vsf .vsf-level{flex:0 0 90px;height:6px;background:#d1d5db;border-radius:3px;overflow:hidden}
.vsf .vsf-level span{display:block;height:100%;width:0;background:#94a3b8;transition:width .08s linear}
.vsf .vsf-now{display:flex;flex-direction:column;align-items:center;padding:8px 6px;background:#fff;border:1px solid var(--vsf-line);border-radius:10px}
.vsf .vsf-label{font-size:.8em;color:var(--vsf-muted)}
.vsf .vsf-note{font-size:2.8em;font-weight:800;line-height:1.05;color:var(--vsf-accent);font-variant-numeric:tabular-nums;transition:opacity .2s}
.vsf .vsf-sub{font-size:.9em;color:var(--vsf-muted);font-variant-numeric:tabular-nums;text-align:center}
.vsf .vsf-stale .vsf-note{opacity:.4}
.vsf .vsf-box{margin:14px 0 0;padding:14px;border:1px solid var(--vsf-line);border-radius:10px}
.vsf .vsf-box-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 10px}
.vsf .vsf-h3{margin:0;font-size:1.1em;line-height:1.3}
.vsf .vsf-help{margin:4px 0 10px}
.vsf .vsf-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 12px}
.vsf .vsf-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;padding:4px 2px;font:inherit;font-size:.92em;color:var(--vsf-muted);background:#fff;border:1px dashed #cbd5e1;border-radius:8px;cursor:pointer;line-height:1.2}
.vsf .vsf-chip b{font-weight:700}
.vsf .vsf-chip .vsf-sec{font-size:.78em;min-height:1.2em;font-variant-numeric:tabular-nums}
.vsf .vsf-chip[aria-pressed="true"]{color:#fff;background:var(--vsf-accent);border:1px solid var(--vsf-accent)}
.vsf .vsf-chip:hover{border-color:var(--vsf-accent)}
.vsf .vsf-chip:focus-visible{outline:3px solid #8fc1ee;outline-offset:2px}
.vsf .vsf-field label{display:block;font-weight:600;font-size:.9em;margin:0 0 5px}
.vsf .vsf-verdict{margin:6px 0 10px;font-size:.95em}
.vsf .vsf-cands{margin:0 0 8px;padding:0;list-style:none;counter-reset:vsf}
.vsf .vsf-cand{position:relative;margin:0 0 8px;padding:10px 12px 10px 40px;background:var(--vsf-soft);border:1px solid var(--vsf-line);border-radius:10px;counter-increment:vsf}
.vsf .vsf-cand::before{content:counter(vsf);position:absolute;left:12px;top:10px;width:20px;height:20px;border-radius:50%;background:var(--vsf-ink);color:#fff;font-size:.75em;font-weight:700;line-height:20px;text-align:center}
.vsf .vsf-cand-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px}
.vsf .vsf-cand-name{font-size:1.05em}
.vsf .vsf-fit{font-size:.88em;font-weight:700;color:var(--vsf-off)}
.vsf .vsf-fit.vsf-good{color:var(--vsf-good)}
.vsf .vsf-notes{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.vsf .vsf-n{min-width:2.2em;padding:2px 6px;text-align:center;font-size:.9em;color:var(--vsf-muted);background:#fff;border:1px dashed #cbd5e1;border-radius:6px}
.vsf .vsf-n-sung{color:var(--vsf-ink);font-weight:700;border:1px solid #94a3b8}
.vsf .vsf-n-root{box-shadow:inset 0 -3px 0 var(--vsf-accent)}
.vsf .vsf-why{margin:0 0 6px;font-size:.85em;color:var(--vsf-muted)}
.vsf .vsf-small{margin:8px 0 0;font-size:.85em;color:var(--vsf-muted)}
.vsf .vsf-small:empty{display:none}
.vsf .vsf-foot{margin:14px 0 0}
.vsf .vsf-sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:600px){
	.vsf{padding:22px}
	.vsf .vsf-note{font-size:3.4em}
	.vsf .vsf-chips{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.vsf .vsf-level span,.vsf .vsf-note{transition:none}}