@charset "UTF-8";
.tn-card { text-align: center; }
.tn-display { margin-bottom: 20px; }
.tn-note { font-size: 5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tn-note sub { font-size: 2rem; opacity: 0.6; font-weight: 600; }
.tn-note.in-tune { color: var(--tool-success); }
.tn-note.flat { color: var(--tool-info); }
.tn-note.sharp { color: var(--tool-danger); }
.tn-freq { margin-top: 8px; font-size: 0.95rem; opacity: 0.8; font-family: 'Courier New', monospace; }

.tn-meter { max-width: 460px; margin: 0 auto 22px; }
.tn-scale { display: flex; justify-content: space-between; font-size: 0.75rem; opacity: 0.6; margin-bottom: 4px; }
.tn-scale .tn-zero { font-weight: 700; opacity: 0.9; }
.tn-bar { position: relative; height: 46px; background: var(--alt-content-bg-color); border: 1px solid var(--border-color); border-radius: var(--tool-radius-sm); overflow: hidden; }
.tn-center-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--tool-success); transform: translateX(-1px); opacity: 0.7; }
.tn-needle { position: absolute; top: 4px; bottom: 4px; width: 4px; left: 50%; background: var(--tool-muted); border-radius: 2px; transform: translateX(-2px); transition: left 0.08s linear, background 0.1s; }
.tn-needle.in-tune { background: var(--tool-success); }
.tn-needle.flat { background: var(--tool-info); }
.tn-needle.sharp { background: var(--tool-danger); }
.tn-cents { margin-top: 6px; font-size: 0.9rem; font-weight: 600; min-height: 20px; }

.tn-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.tn-ref { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.tn-ref .tool-input { width: 80px; }
.tn-error { min-height: 20px; color: var(--tool-danger); font-weight: 600; font-size: 0.9rem; margin-top: 12px; }

.tn-strings { margin-top: 20px; }
.tn-strings-title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; font-weight: 700; margin-bottom: 10px; }
.tn-string-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tn-str { min-width: 46px; padding: 10px 0; border-radius: var(--tool-radius-sm); background: var(--alt-content-bg-color); border: 1px solid var(--border-color); font-family: 'Courier New', monospace; font-weight: 700; font-size: 1.05rem; }
.tn-str.active { background: var(--tool-accent); border-color: var(--tool-accent); color: #fff; }
.tn-about p { margin: 0 0 12px; }
@media (max-width: 480px) { .tn-note { font-size: 3.6rem; } }