*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#1c1c1e;background:#fff;height:100dvh;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Helvetica Neue,sans-serif}#root{height:100%}.app{flex-direction:column;justify-content:space-between;align-items:center;max-width:430px;height:100dvh;margin:0 auto;padding:64px 32px 56px;display:flex}.app-name{letter-spacing:.22em;color:#aeaeb2;font-size:11px;font-weight:600}.note-circle{border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:192px;height:192px;transition:background-color .35s;display:flex;position:relative}.note-circle.in-tune{background-color:#34c7590f}.waveform-canvas{pointer-events:none;z-index:0;border-radius:50%;width:100%;height:100%;position:absolute;inset:0}.ring-svg{pointer-events:none;z-index:1;position:absolute;inset:0}.ring-track{fill:none;stroke:#e5e5ea;stroke-width:2px}.ring-progress{fill:none;stroke:#e5e5ea;stroke-width:2px;stroke-linecap:round;transition:stroke-dashoffset .12s,stroke .35s}.ring-progress.active{stroke:#3a3a3c}.ring-progress.in-tune{stroke:#34c759}.note-letter{z-index:2;color:#1c1c1e;-webkit-user-select:none;user-select:none;font-size:96px;font-weight:200;line-height:1;transition:color .35s;position:relative}.note-circle.in-tune .note-letter{color:#34c759}.note-octave{z-index:2;color:#aeaeb2;-webkit-user-select:none;user-select:none;font-size:15px;font-weight:400;position:absolute;bottom:32px;right:42px}.meter-wrapper{width:100%}.meter-bar{background:#e5e5ea;border-radius:2px;height:3px;margin-bottom:12px;position:relative}.meter-center-tick{pointer-events:none;background:#c7c7cc;border-radius:1px;width:1.5px;height:13px;position:absolute;top:-5px;left:50%;transform:translate(-50%)}.meter-dot{background:#e5e5ea;border-radius:50%;width:20px;height:20px;transition:left .11s cubic-bezier(.22,1,.36,1),background-color .3s,box-shadow .3s;position:absolute;top:50%;transform:translate(-50%,-50%)}.meter-dot.active{background:#1c1c1e}.meter-dot.in-tune{background:#34c759;box-shadow:0 0 0 5px #34c75933}.meter-labels{color:#c7c7cc;-webkit-user-select:none;user-select:none;justify-content:space-between;font-size:14px;display:flex}.btn{letter-spacing:-.01em;cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius:100px;outline:none;padding:16px 56px;font-family:inherit;font-size:17px;font-weight:500;transition:transform .1s,opacity .15s}.btn:active{opacity:.8;transform:scale(.96)}.btn-start{color:#fff;background:#1c1c1e}.btn-stop{color:#3a3a3c;background:#e5e5ea}.strings-row{gap:6px;display:flex}.string-pill{color:#aeaeb2;-webkit-user-select:none;user-select:none;border:1.5px solid #0000;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;font-size:17px;font-weight:300;transition:color .3s,border-color .3s,font-weight .1s;display:flex}.string-pill.active{color:#1c1c1e;border-color:#3a3a3c;font-weight:500}.string-pill.in-tune{color:#34c759;border-color:#34c759;font-weight:500}.error-msg{color:#ff453a;text-align:center;font-size:14px}