:root{--bg-color: #0d1117;--panel-bg: rgba(23, 28, 36, .7);--accent-color: #58a6ff;--text-primary: #f0f6fc;--text-secondary: #8b949e;--success-color: #2ecc71;--warning-color: #f1c40f;--glass-border: rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .8)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background-color:var(--bg-color);color:var(--text-primary);min-height:100vh;display:flex;justify-content:center;align-items:center}#app{width:100%;max-width:500px;padding:2rem;text-align:center}header{margin-bottom:3rem}h1{font-family:Outfit,sans-serif;font-size:2.5rem;letter-spacing:-1px;background:linear-gradient(135deg,#fff,#58a6ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.subtitle{color:var(--text-secondary);font-weight:300;text-transform:uppercase;letter-spacing:4px;font-size:.8rem}.glass-morph{background:var(--panel-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:24px;box-shadow:var(--glass-shadow);padding:2rem;margin-bottom:1.5rem}.note-display{padding:1rem}#note-name{font-family:Outfit,sans-serif;font-size:6rem;font-weight:600;line-height:1;display:inline-block}#note-octave{font-size:2rem;color:var(--text-secondary);vertical-align:super}.meter-container{margin:2rem 0;position:relative}.meter-marks{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-secondary);margin-bottom:.5rem;padding:0 10%}.meter-rail{height:4px;background:#ffffff1a;border-radius:2px;position:relative;overflow:visible}.meter-rail:before{content:"";position:absolute;top:-10px;left:50%;width:2px;height:24px;background:#fff3;transform:translate(-50%)}#meter-needle{position:absolute;top:-15px;left:50%;width:2px;height:34px;background-color:var(--accent-color);transform-origin:bottom center;transform:translate(-50%) rotate(0);transition:transform .1s ease-out,background-color .2s ease;box-shadow:0 0 10px #58a6ff80}.frequency-display{font-size:1.1rem;color:var(--text-secondary)}#frequency-val{font-family:Outfit,sans-serif;color:var(--text-primary);font-weight:600}.info-panel{text-align:center}.info-panel p{margin-bottom:2rem;color:var(--text-secondary)}.info-panel strong{color:var(--accent-color);font-family:Outfit,sans-serif;font-size:1.2rem}footer a{color:var(--accent-color);text-decoration:none;font-weight:600;transition:color .2s ease}footer a:hover{color:#fff;text-decoration:underline}.btn-primary{width:100%;padding:1rem;border-radius:16px;border:none;background:linear-gradient(135deg,#58a6ff,#005cc5);color:#fff;font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #58a6ff4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #58a6ff66}.btn-stop{background:linear-gradient(135deg,#f85149,#b62324);box-shadow:0 4px 15px #f851494d}footer{margin-top:2rem;font-size:.8rem;color:var(--text-secondary)}@media(max-width:480px){#app{padding:1rem}#note-name{font-size:4rem}}