:root{--color-foreground: #000000;--color-background: #ffffff;--color-disabled: #818181}*{margin:0;padding:0;box-sizing:border-box;font-family:Urbanist,sans-serif}body{min-height:100vh;display:flex;flex-direction:column}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:2rem}h1{font-size:2.5rem;color:var(--color-foreground)}button{font-size:1.2rem;font-weight:600;padding:1rem 2rem;color:var(--color-background);background-color:var(--color-foreground);border:3px solid var(--color-foreground);border-radius:5px;cursor:pointer;transition:color .3s,background-color .3s}@media(hover:hover){button:hover{color:var(--color-foreground);background-color:var(--color-background)}}.note-display{display:flex;flex-direction:column;align-items:center;gap:1rem;border:10px solid var(--color-foreground);padding:2rem;border-radius:5px;transition:border-color .3s,color .3s;min-width:300px}.note-display.inactive{border-color:var(--color-disabled);color:var(--color-disabled)}.note-name{font-size:5rem;font-weight:700;font-family:JetBrains Mono,monospace;min-height:5.5rem;display:flex;align-items:center}.note-status{font-size:1.5rem;font-weight:600;text-align:center;min-height:2rem}.note-status.sharp{color:#d32f2f}.note-status.flat{color:#1976d2}.note-status.in-tune{color:#388e3c}.note-frequency{font-size:1.2rem;font-family:JetBrains Mono,monospace}.frequency-display{font-size:5rem;font-weight:700;display:flex;align-items:center;gap:1rem;border:10px solid var(--color-foreground);padding:1rem;border-radius:5px;transition:border-color .3s,color .3s}.frequency-display.inactive{border-color:var(--color-disabled);color:var(--color-disabled)}.frequency{min-width:5ch;text-align:right;font-family:JetBrains Mono,monospace;font-variant-numeric:tabular-nums}.unit{font-size:3rem}.error{height:1.2rem;color:red;font-weight:700}