@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
.input-status{margin:20px 0 0}.input-status>div:first-child{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#a2afa0}.input-status #device{max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-meter{height:5px;background:#ffffff12;border-radius:4px;margin-top:9px;overflow:hidden}.input-meter span{display:block;height:100%;width:0;background:#caeb9f;transition:width .1s}
:root{font-family:'DM Sans',sans-serif;color:#e9eee8;background:#101714;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 10%,#26352744,transparent 45%)}header{height:94px;border-bottom:1px solid #ffffff0d;display:flex;align-items:center;justify-content:space-between;padding:0 max(5%,calc((100vw - 1180px)/2))}.brand{text-decoration:none;color:#eef4e9;font-family:Manrope,sans-serif;font-size:32px;letter-spacing:-2px;font-weight:800;display:flex;align-items:center}.brand-icon{display:inline-flex;align-items:center;justify-content:center;color:#142016;background:#c9ec9a;border-radius:10px;width:35px;height:35px;margin-right:10px;font-size:38px;font-weight:400}.brand-dot{color:#c9ec9a}.header-label,.version{font-size:10px;letter-spacing:2px;color:#7d8b81}.version{display:flex;align-items:center;gap:12px}.version i{height:6px;width:6px;background:#c9ec9a;border-radius:50%}main{max-width:1180px;margin:auto;padding:48px 0 20px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px}.eyebrow{font-size:10px;letter-spacing:2px;color:#9aa99c;font-weight:600}.intro .eyebrow{color:#c9ec9a;margin-bottom:19px}h1{font-family:Manrope,sans-serif;font-size:44px;line-height:1.2;letter-spacing:-1.8px;margin:0}h1 em{font-style:normal;color:#c9ec9a}.subtitle{font-size:14px;color:#95a198;line-height:1.7;margin-top:20px}.intro-mark{font-family:serif;font-size:140px;color:#bddf9440;transform:rotate(-16deg);margin-right:65px;position:relative}.intro-mark span{font-size:58px;position:absolute;bottom:5px;right:-40px;color:#bddf9420}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:22px}.card{background:#1a231e;border:1px solid #ffffff0c;border-radius:19px;padding:26px}.listen{background:linear-gradient(140deg,#202c23,#19221d);display:flex;flex-direction:column}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}h2{font-size:15px;font-weight:600;margin:0}.tiny-icon{color:#c9ec9a;margin-right:6px}.status,.tag{font-size:8px;letter-spacing:1px;color:#92a192}.status{border:1px solid #ffffff12;border-radius:20px;padding:7px 9px}.status.active{color:#c9ec9a;border-color:#c9ec9a44}.note-area{text-align:center;margin:36px 0 22px}.note{font-family:Manrope,sans-serif;font-size:80px;line-height:1.35;letter-spacing:-4px;font-weight:600;color:#d7f3b6}.note small{font-size:25px;color:#8fa186;letter-spacing:0;margin-left:6px}.frequency{font-size:12px;color:#9aa99c;height:20px}.tuning{width:75%;margin:auto;text-align:center}.tuning-label{display:flex;justify-content:space-between;font-size:8px;color:#8b9c8e;letter-spacing:1px}.tuning-track{height:5px;background:linear-gradient(90deg,#8d744644,#c9ec9a77,#8d744644);border-radius:4px;position:relative;margin-top:15px}.center-line{position:absolute;left:50%;top:-5px;height:15px;width:1px;background:#c9ec9a}#needle{position:absolute;top:-4px;width:5px;height:13px;background:#f3ffde;border-radius:4px;left:50%;transition:left .1s}.tuning p{font-size:10px;color:#91a08e}.wave-wrap{height:72px;margin:5px 0 16px}canvas{width:100%;height:100%}.primary{width:100%;border:0;border-radius:10px;background:#caeb9f;color:#20301a;font:700 14px 'DM Sans',sans-serif;padding:17px;cursor:pointer}.primary span{margin-right:8px}.primary:hover{background:#dcfbb7}.primary:disabled{opacity:.65;cursor:wait}.message{text-align:center;font-size:11px;line-height:1.6;color:#a2afa0;min-height:18px;margin:12px 0 20px}.privacy{border-top:1px solid #ffffff0b;padding-top:17px;text-align:center;color:#7e8f81;font-size:10px}.privacy span{margin-right:6px}.results{display:grid;gap:20px;grid-template-rows:1fr auto}.key-title{font-size:34px;font-family:Manrope,sans-serif;font-weight:600;letter-spacing:-1px;line-height:1.25;margin:25px 0 16px}.key-title span{display:block;color:#798b7b;font-size:27px}.confidence{display:inline-block;font-size:10px;color:#c3d5b7;background:#c9ec9a0d;border-radius:20px;padding:7px 10px}.key p,.harmony>p{font-size:12px;color:#99a799;line-height:1.65}.progress{height:4px;background:#ffffff0a;margin-top:20px;border-radius:4px;overflow:hidden}.progress span{display:block;background:#c9ec9a;width:0;height:100%;transition:width .3s}.progress-label{display:flex;align-items:center;justify-content:space-between;margin-top:9px;font-size:10px;color:#91a18d}.text-button{border:0;background:none;color:#b8c7ae;font:inherit;cursor:pointer;padding:6px}.key .alternative{font-size:10px;border-top:1px solid #ffffff0b;padding-top:13px;margin:15px 0 0}.chords{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:19px 0}.chords>span{display:flex;min-width:0;align-items:center;justify-content:center;flex-direction:column;gap:7px;border:1px solid #ffffff0d;background:#ffffff03;border-radius:8px;min-height:58px;color:#cedbc6;font-size:15px}.chords>span:first-child{border-color:#c9ec9a44;background:#c9ec9a0b;color:#d6efb9}.chords small{font-size:9px;color:#84947d}.harmony .footnote{font-size:10px;margin-bottom:0}.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:30px 0 40px}.tips>div{display:flex;align-items:flex-start;gap:12px}.tips>div>span{border:1px solid #ffffff12;border-radius:50%;padding:7px;font-size:9px;color:#b4c5a5;margin-top:10px}.tips p{font-size:11px;color:#839280;line-height:1.7}.tips strong{display:block;color:#b6c3b1;font-size:12px;font-weight:500}footer{display:flex;justify-content:space-between;border-top:1px solid #ffffff0b;padding-top:20px;font-size:10px;color:#6d7d71}button:focus-visible,a:focus-visible{outline:2px solid #d5f3b1;outline-offset:4px}@media(max-width:1250px){main{margin:0 5%}}@media(max-width:760px){header{height:76px}.header-label{display:none}.version{font-size:8px}main{padding-top:32px}.intro-mark{display:none}h1{font-size:35px}.workspace{grid-template-columns:1fr}.intro{margin-bottom:25px}.card{padding:22px}.tips{grid-template-columns:1fr;gap:0;margin:22px 0}.note-area{margin-top:28px}.results{grid-template-rows:auto auto}.key-title{font-size:31px}footer{gap:15px;line-height:1.5}.chords{gap:4px}.chords>span{font-size:13px}.desktop{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.audio-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}.audio-controls label{font-size:11px;color:#a2afa0;min-width:0}.audio-controls select{display:block;width:100%;background:#17211b;color:#e9eee8;border:1px solid #ffffff22;padding:9px;border-radius:8px;margin-top:6px}#capture-stats{font-size:11px;line-height:1.5;color:#c9ec9a}