/*! Frequency to Note Converter 2.0.0 | pitchdetector.com | answer-calculator design */
.pfn{--pfn-blue:#2563eb;--pfn-blue2:#1d4ed8;--pfn-violet:#7c3aed;--pfn-ink:#0f172a;--pfn-muted:#475569;--pfn-line:#e2e8f0;--pfn-tint:#eff6ff;box-sizing:border-box;max-width:1000px;margin:0 auto 1.75em;color:var(--pfn-ink);font-family:inherit;line-height:1.5}
.pfn *,.pfn *::before,.pfn *::after{box-sizing:border-box}.pfn [hidden]{display:none!important}
.pfn .pfn-title{margin:0 0 8px;padding:0;font-size:1.25rem;line-height:1.25;font-weight:700;color:var(--pfn-ink);letter-spacing:normal;text-transform:none}
.pfn-calc{display:grid;border:1px solid var(--pfn-line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.07)}
/* Input side */
.pfn-in{padding:16px}
.pfn .pfn-lbl{display:block;margin:0 0 6px;font-weight:700;font-size:.95rem;color:var(--pfn-ink)}
.pfn-field{display:flex;align-items:center;border:2px solid #cbd5e1;border-radius:14px;background:#fff;padding:0 14px;transition:border-color .15s}
.pfn-field:focus-within{border-color:var(--pfn-blue);box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.pfn .pfn-field input{flex:1 1 auto;min-width:0;width:100%;border:0;outline:0;background:transparent;margin:0;padding:10px 0;font:700 2.1rem/1.1 ui-monospace,"SFMono-Regular",Consolas,monospace;color:var(--pfn-ink);box-shadow:none}
.pfn-field span{font-weight:700;font-size:1.2rem;color:var(--pfn-muted);padding-left:8px}
.pfn .pfn-hint{margin:6px 2px 10px;font-size:.85rem;color:var(--pfn-muted)}.pfn .pfn-hint[data-kind="error"]{color:#b91c1c;font-weight:600}
.pfn-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.pfn .pfn-chips button{appearance:none;margin:0;min-height:36px;padding:0 12px;border:1px solid #c7d2fe;border-radius:999px;background:var(--pfn-tint);color:var(--pfn-blue2);font:600 .88rem/1 inherit;font-family:inherit;cursor:pointer;box-shadow:none;text-transform:none}
.pfn .pfn-chips button:hover{background:#dbeafe}
.pfn-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pfn-opts label{display:grid;gap:3px;margin:0;min-width:0;font-size:.8rem;font-weight:600;color:var(--pfn-muted)}
.pfn .pfn-opts select,.pfn .pfn-opts input{width:100%;min-height:44px;margin:0;border:1px solid #cbd5e1;border-radius:10px;padding:0 10px;font:500 .95rem/1.2 inherit;font-family:inherit;background:#fff;color:var(--pfn-ink)}
/* Answer side */
.pfn-out{padding:16px;background:linear-gradient(145deg,#1e3a8a 0%,var(--pfn-blue) 45%,var(--pfn-violet) 100%);color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center}
.pfn .pfn-kicker{margin:0;font-size:.95rem;opacity:.9;color:#fff}
.pfn .pfn-note{margin:2px 0 0;font:800 4rem/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.02em;color:#fff}
.pfn .pfn-cents{margin:8px 0 10px;display:inline-block;padding:3px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-weight:700;font-size:.95rem;color:#fff}
.pfn .pfn-cents[data-state="in"]::before{content:"✓ "}
.pfn-meter{position:relative;width:100%;max-width:320px;height:14px;border-radius:999px;background:linear-gradient(90deg,#fca5a5,#fde68a 35%,#86efac 45%,#86efac 55%,#fde68a 65%,#fca5a5)}
.pfn-meter i{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:rgba(15,23,42,.55)}
.pfn-meter b{position:absolute;top:-5px;width:6px;height:24px;margin-left:-3px;border-radius:3px;background:#fff;box-shadow:0 0 0 2px var(--pfn-ink);transition:left .15s}
.pfn-meter-lbl{display:flex;justify-content:space-between;width:100%;max-width:320px;font-size:.72rem;opacity:.85;margin:4px 0 10px}
.pfn-keys{width:100%;max-width:300px;height:auto;margin:0 0 12px}
.pfn-keys .w{fill:#fff;stroke:#1e3a8a}.pfn-keys .b{fill:#0f172a}.pfn-keys .on{fill:#fde047;stroke:#0f172a}
.pfn-keys text{font:600 10px system-ui,sans-serif;text-anchor:middle}.pfn-keys .dt{fill:#475569}.pfn-keys .lt{fill:#0f172a}
.pfn-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pfn .pfn-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;margin:0;min-height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.55);border-radius:10px;background:transparent;color:#fff;font:700 .92rem/1.1 inherit;font-family:inherit;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:normal}
.pfn .pfn-btn:hover:not(:disabled){background:rgba(255,255,255,.14)}
.pfn .pfn-btn.pfn-main{background:#fff;color:var(--pfn-blue2);border-color:#fff}.pfn .pfn-btn.pfn-main:hover:not(:disabled){background:#e0e7ff}
.pfn .pfn-btn:disabled{opacity:.45;cursor:not-allowed}
.pfn.is-empty .pfn-out>*:not(.pfn-kicker){opacity:.35}
/* Facts */
.pfn .pfn-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 0}
.pfn .pfn-facts div{background:#fff;border:1px solid var(--pfn-line);border-radius:12px;padding:8px 12px;min-width:0}
.pfn .pfn-facts dt{margin:0;font-size:.74rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--pfn-muted)}
.pfn .pfn-facts dd{margin:0;font:700 .98rem/1.35 ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pfn .pfn-msg{min-height:1.4em;margin:8px 2px;font-size:.88rem;color:var(--pfn-muted)}
/* Batch */
.pfn .pfn-batch{margin:4px 0 16px;border:1px solid var(--pfn-line);border-radius:12px;padding:10px 14px;background:#f8fafc}
.pfn .pfn-batch summary{cursor:pointer;font-weight:700;min-height:28px}
.pfn .pfn-batch textarea{width:100%;margin:0 0 8px;border:1px solid #cbd5e1;border-radius:10px;padding:8px 10px;font:500 .95rem/1.4 ui-monospace,Consolas,monospace;background:#fff;color:var(--pfn-ink)}
.pfn .pfn-batch .pfn-btns{justify-content:flex-start}
.pfn .pfn-batch .pfn-btn{border-color:var(--pfn-blue);color:var(--pfn-blue2);background:#fff}.pfn .pfn-batch .pfn-btn.pfn-main{background:var(--pfn-blue);color:#fff}
.pfn .pfn-batch .pfn-btn:hover:not(:disabled){background:var(--pfn-tint)}.pfn .pfn-batch .pfn-btn.pfn-main:hover:not(:disabled){background:var(--pfn-blue2)}
.pfn-scroll{overflow-x:auto;margin-top:8px}
/* Common frequencies */
.pfn .pfn-h3{margin:0 0 8px;padding:0;font-size:1.05rem;font-weight:700;color:var(--pfn-ink);text-transform:none;letter-spacing:normal}.pfn .pfn-h3 small{font-weight:400;color:var(--pfn-muted);font-size:.82rem}
.pfn-tables{display:grid;gap:12px}
.pfn .pfn-table{width:100%;margin:0;border-collapse:collapse;background:#fff;border:1px solid var(--pfn-line);font-size:.92rem;font-variant-numeric:tabular-nums}
.pfn .pfn-table caption{caption-side:top;text-align:left;font-size:.8rem;color:var(--pfn-muted);padding:0 0 4px}
.pfn .pfn-table th,.pfn .pfn-table td{border:0;border-bottom:1px solid var(--pfn-line);padding:4px 10px;text-align:left}
.pfn .pfn-table th{background:var(--pfn-tint);font-size:.8rem}
.pfn .pfn-table td:nth-child(2){font-weight:700}
.pfn .pfn-pick{appearance:none;margin:0;padding:6px 0;min-height:32px;border:0;background:none;color:var(--pfn-blue2);font:600 .92rem/1.2 ui-monospace,Consolas,monospace;cursor:pointer;text-decoration:underline;text-underline-offset:3px;box-shadow:none}
.pfn-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.pfn :focus-visible{outline:3px solid var(--pfn-violet);outline-offset:2px}.pfn .pfn-out :focus-visible{outline-color:#fde047}
@media (min-width:720px){.pfn-calc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pfn-in,.pfn-out{padding:22px}.pfn .pfn-note{font-size:4.8rem}.pfn .pfn-facts{grid-template-columns:repeat(3,minmax(0,1fr))}.pfn-tables{grid-template-columns:1fr 1fr}}
