/*! Singing Note Detector 2.0.0 | pitchdetector.com */
.psn{--psn-blue:#2563eb;--psn-blue2:#1d4ed8;--psn-violet:#7c3aed;--psn-ink:#0f172a;--psn-muted:#475569;--psn-line:#e2e8f0;--psn-tint:#eff6ff;--psn-ok:#15803d;--psn-amb:#b45309;--psn-bad:#b91c1c;box-sizing:border-box;max-width:1100px;margin:0 auto 1.75em;color:var(--psn-ink);font-family:inherit;line-height:1.5}
.psn *,.psn *::before,.psn *::after{box-sizing:border-box}.psn [hidden]{display:none!important}
.psn-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:0 0 8px}
.psn .psn-title{margin:0;padding:0;font-size:1.25rem;line-height:1.25;font-weight:700;color:var(--psn-ink);letter-spacing:normal;text-transform:none}
.psn-voice{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem}
.psn .psn-voice select,.psn .psn-field select,.psn .psn-field input{min-height:44px;border:1px solid #cbd5e1;border-radius:10px;padding:0 10px;font:inherit;background:#fff;color:var(--psn-ink);max-width:100%}
.psn-stage{background:linear-gradient(135deg,var(--psn-blue),var(--psn-violet));color:#fff;border-radius:18px;padding:14px;text-align:center}
.psn .psn-prompt{margin:0;font-size:.9rem;font-weight:600;opacity:.92;color:#fff}
.psn .psn-note{margin:2px 0 0;font-weight:800;line-height:1;font-size:3.8rem;display:flex;justify-content:center;align-items:flex-start;min-height:3.8rem;color:#fff}
.psn-oct{font-size:.45em;margin:.12em 0 0 .06em;opacity:.9}
.psn .psn-hz{margin:4px 0 8px;font-variant-numeric:tabular-nums;color:#fff}
.psn .psn-guide{margin:0 auto 10px;font-weight:700;background:#fff;color:var(--psn-muted);border-radius:999px;padding:7px 14px;width:fit-content;max-width:100%;font-size:.95rem}
.psn .psn-guide[data-state="in"]{color:var(--psn-ok)}.psn .psn-guide[data-state="close"]{color:var(--psn-amb)}.psn .psn-guide[data-state="off"]{color:var(--psn-bad)}
.psn-steady{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.85rem;margin:0 auto 10px;max-width:420px}
.psn-bar{flex:1;height:10px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden}.psn-bar i{display:block;height:100%;width:0;background:#fff;transition:width .15s}
.psn-lock{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:14px;padding:8px 12px;margin:0 auto 12px;max-width:460px}
.psn .psn-lock-title{margin:0;font-size:1.05rem;color:#fff}.psn .psn-lock-meta{margin:2px 0 0;font-size:.85rem;opacity:.95;color:#fff}
.psn-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.psn .psn-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;margin:0;border:2px solid var(--psn-blue);background:#fff;color:var(--psn-blue2);font:700 1rem/1.1 inherit;font-family:inherit;min-height:44px;padding:0 18px;border-radius:12px;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:normal}
.psn .psn-btn:hover:not(:disabled){background:var(--psn-tint)}.psn .psn-btn:disabled{opacity:.5;cursor:not-allowed}
.psn .psn-start{flex:1 1 180px;min-height:56px;font-size:1.15rem;border-color:#fff;max-width:320px}.psn .psn-start.is-on{color:var(--psn-bad)}
.psn .psn-stage .psn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.75);min-height:56px;flex:0 1 180px}
.psn .psn-sm{min-height:44px;font-size:.9rem;padding:0 14px;border-width:1.5px}
.psn .psn-status{margin:10px 2px 12px;font-size:.9rem;color:var(--psn-muted)}.psn .psn-status[data-kind="error"]{color:var(--psn-bad);font-weight:600}
.psn .psn-trace{margin:0 0 12px;background:#fff;border:1px solid var(--psn-line);border-radius:14px;padding:8px 8px 4px}
.psn-trace canvas{display:block;width:100%;height:150px}.psn .psn-trace figcaption{font-size:.8rem;color:var(--psn-muted);padding:4px 2px 0}
.psn .psn-card{background:#fff;border:1px solid var(--psn-line);border-radius:14px;padding:12px 14px;margin:0 0 12px}
.psn .psn-card h3{margin:0;padding:0;font-size:1rem;font-weight:700;color:var(--psn-ink);letter-spacing:normal;text-transform:none}
.psn-cardhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 8px;margin:0 0 8px}
.psn .psn-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.psn .psn-chips li{margin:0;background:var(--psn-tint);color:var(--psn-blue2);font-weight:700;border-radius:999px;padding:3px 10px;font-size:.92rem}
.psn .psn-chips li small{font-weight:500;color:var(--psn-muted);margin-left:4px;font-size:.78rem}
.psn .psn-chips li.psn-empty{background:none;color:var(--psn-muted);font-weight:400;padding:0}
.psn .psn-settings summary{cursor:pointer;font-weight:700}
.psn-fields{display:grid;gap:12px;margin-top:10px}.psn-field{display:grid;gap:4px;min-width:0}.psn-field label{font-weight:600;font-size:.9rem}.psn .psn-field select,.psn .psn-field input{width:100%}
.psn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.psn-small{font-size:.8rem;color:var(--psn-muted)}
.psn-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.psn :focus-visible{outline:3px solid var(--psn-violet);outline-offset:2px}.psn .psn-stage :focus-visible{outline-color:#fff}
@media (min-width:700px){.psn-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.psn .psn-note{font-size:5.4rem;min-height:5.4rem}.psn-stage{padding:22px 24px}.psn-trace canvas{height:170px}}
@media (prefers-reduced-motion:reduce){.psn *{transition:none!important}}