@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101113;--panel:#17181b;--line:#2c2d30;--text:#f1efea;--muted:#9a9a9e;--accent:#f4ad83;--mint:#aac6ad;font-family:'DM Sans',Arial,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:14px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{color:inherit}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.header{max-width:1240px;margin:auto;height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #25262a}.brand{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk',Arial,sans-serif;font-size:27px;font-weight:700;letter-spacing:-1.4px}.brand svg,.brand>span{color:var(--accent)}.brand>span{margin-left:-10px}.header-right{display:flex;gap:36px;align-items:center}.edition{font-size:10px;letter-spacing:1.7px;color:#76767c}.text-button{border:0;background:none;font-size:12px;color:#c7c5c2;display:flex;align-items:center;gap:8px}.question-mark{display:inline-grid;place-items:center;width:17px;height:17px;border:1px solid #777;border-radius:50%;font-size:10px}main{max-width:980px;margin:auto;padding:0 20px}.intro{text-align:center;padding:51px 0 34px}.eyebrow{font-size:10px;letter-spacing:2.1px;font-weight:600;color:var(--accent)}.eyebrow>span{display:inline-block;height:6px;width:6px;background:var(--accent);border-radius:50%;margin-right:7px;vertical-align:1px}h1{font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(35px,4.7vw,58px);font-weight:500;letter-spacing:-2.8px;line-height:1.12;margin:15px 0 13px}.intro>p{font-size:15px;color:var(--muted);margin:0}.game{background:var(--panel);border:1px solid #323337;border-radius:16px;overflow:hidden;box-shadow:0 18px 50px #0002}.toolbar{height:69px;display:flex;justify-content:space-between;align-items:center;padding:0 27px;border-bottom:1px solid var(--line)}.mode-tabs{display:flex;gap:5px;padding:4px;background:#111214;border:1px solid #292a2d;border-radius:9px}.mode-tabs button{padding:8px 20px;border:0;background:none;border-radius:5px;color:#929196;font-size:12px}.mode-tabs button.active{background:#303135;color:var(--text);box-shadow:0 1px 3px #0003}.difficulty-group{display:flex;gap:13px;align-items:center}.difficulty-group label{font-size:11px;color:#8f8e94}.difficulty-group select{font-size:12px;padding:8px 29px 8px 12px;background:#202124;border:1px solid #37383c;border-radius:6px;color:#dedbd7}.game-meta{padding:22px 27px 17px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:9px;letter-spacing:1.4px;color:#99989e}.round-dots{display:flex;gap:6px}.round-dots span{width:24px;height:4px;background:#37383d;border-radius:2px}.round-dots .current{background:var(--accent)}.round-dots .done{background:var(--mint)}.instrument{display:grid;grid-template-columns:1.65fr 1fr;gap:0;border:1px solid #333439;margin:0 27px;border-radius:9px;overflow:hidden}.sound-field{min-height:268px;position:relative;background:#1c1e21;touch-action:none;cursor:ns-resize;user-select:none;overflow:hidden}.sound-field:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#f4ad8305 1px,transparent 1px),linear-gradient(90deg,#f4ad8305 1px,transparent 1px);background-size:28px 28px}.field-top,.field-bottom{position:absolute;left:19px;right:19px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;z-index:2}.field-top{top:17px;color:#99969a}.field-top i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:6px}.field-tag{color:#65676d;font-size:7px}.field-bottom{bottom:17px;color:#7c7d82;font-size:7px;letter-spacing:.85px}canvas{position:absolute;top:32px;left:0;width:100%;height:130px}.field-copy{position:absolute;bottom:50px;left:10px;right:10px;text-align:center}.field-copy h2{font-family:'Space Grotesk',Arial,sans-serif;font-size:23px;font-weight:500;letter-spacing:-.6px;margin:0 0 9px}.field-copy p{font-size:11px;color:#939299;margin:0;line-height:1.5}.readout{display:flex;flex-direction:column;align-items:center;border-left:1px solid #333439;padding:20px 20px 16px;background:#191a1d}.small-label{font-size:8px;letter-spacing:1.4px;color:#a6a1a0;display:flex;align-items:center;gap:9px}.live-dot{width:5px;height:5px;border-radius:50%;background:var(--mint)}.note-name{font-family:'Space Grotesk',Arial,sans-serif;font-size:69px;line-height:1.15;font-weight:500;letter-spacing:-4px;color:var(--accent);margin-top:5px}.note-name span{font-size:31px;letter-spacing:-2px;color:#b99680;margin-left:3px}.frequency-number{display:flex;align-items:center;gap:4px;color:#9f9c9a;font-size:12px}.frequency-number input{background:none;color:#efebe6;border:0;width:83px;padding:0;font-family:'Space Grotesk',monospace;font-size:20px;text-align:right;outline-offset:1px;font-variant-numeric:tabular-nums;appearance:textfield}.frequency-number input::-webkit-inner-spin-button{appearance:none}.cents-gauge{display:flex;width:180px;gap:8px;align-items:center;font-size:7px;color:#77767a;margin-top:17px}.gauge{flex:1;height:10px;position:relative;background:repeating-linear-gradient(90deg,#414145 0 1px,transparent 1px 9px);background-size:100% 6px;background-repeat:no-repeat;background-position:center}.gauge b{position:absolute;left:50%;top:0;width:1px;height:10px;background:#b8aca3}.gauge i{position:absolute;left:50%;top:-3px;height:15px;width:3px;background:var(--accent);z-index:1;border-radius:1px}.cents-text{font-size:9px;margin:7px 0 14px;color:#c2b9b1}.mini-keys{display:flex;height:19px;gap:3px;align-items:end}.mini-keys i{height:16px;width:11px;border:1px solid #4c4a49;border-radius:1px}.mini-keys i.black{height:11px;background:#363638;align-self:start}.mini-keys i.selected{border-color:var(--accent);background:var(--accent)}.tuning-standard{font-size:6px;letter-spacing:1px;color:#747174;margin-top:10px}.tuner{margin:23px 27px 0}.slider-heading{display:flex;justify-content:space-between;align-items:center;font-size:11px}.snap-label{color:#8f8d93;display:flex;gap:7px;align-items:center;font-size:10px;cursor:pointer}.snap-label input{accent-color:var(--accent);width:12px;height:12px;margin:0}.frequency-slider{--position:50%;appearance:none;width:100%;height:5px;border-radius:5px;margin:22px 0 10px;background:linear-gradient(to right,var(--accent) 0 var(--position),#3b3a3d var(--position) 100%);cursor:pointer;display:block}.frequency-slider::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border-radius:50%;background:#f5ebe3;border:4px solid var(--accent);box-shadow:0 0 0 5px #f4ad8310}.frequency-slider::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#f5ebe3;border:4px solid var(--accent)}.range-labels{display:flex;justify-content:space-between;color:#7e7c81;font-size:9px}.range-labels span:nth-child(2){margin-right:auto;margin-left:9px;font-size:7px;letter-spacing:1px}.range-labels span:nth-child(3){margin-right:9px;font-size:7px;letter-spacing:1px}.fine-tune{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:18px;color:#88858a;font-size:9px}.fine-tune>span:first-child{font-size:7px;letter-spacing:1.1px;margin-right:5px}.fine-tune button{background:#222326;border:1px solid #39393e;border-radius:4px;width:27px;height:25px;font-size:16px;color:#cbc5c0}.keyboard-hint{margin-left:10px;color:#64646b;font-size:8px}kbd{font-family:inherit;padding:2px 4px;background:#25262a;border:1px solid #35363a;border-radius:3px;margin-left:2px}.action-bar{display:flex;gap:12px;padding:24px 27px 22px}.primary,.preview-button{min-height:45px;border-radius:7px;font-size:12px;font-weight:600}.primary{border:1px solid var(--accent);background:var(--accent);color:#251b15;flex:1;display:flex;align-items:center;justify-content:center;gap:18px;transition:background .15s}.primary:hover{background:#ffc298}.primary>span{font-size:19px;line-height:1}.preview-button{flex:1;background:#232427;border:1px solid #3b3c40;color:#d8d4cf;display:flex;gap:10px;align-items:center;justify-content:center}.preview-button:hover{background:#2e2f33}#preview-icon{color:var(--accent);font-size:11px}.game-footer{background:#141518;border-top:1px solid #27282c;min-height:47px;padding:0 27px;display:flex;align-items:center;justify-content:space-between;gap:10px}.volume{display:flex;align-items:center;gap:10px;color:#838188}.volume input{accent-color:#a5a29e;width:65px;height:3px}.volume span{font-size:8px;font-variant-numeric:tabular-nums;min-width:23px}#game-note{font-size:7px;letter-spacing:1.1px;color:#8c888d}.separator{color:#4a484e;padding:0 9px}.below-game{display:flex;justify-content:space-between;align-items:center;padding:17px 0;color:#79777e;font-size:10px}.below-game>span:first-child{display:flex;align-items:center;gap:7px}#best-label{font-size:8px;letter-spacing:1px}#best-label b{font-family:'Space Grotesk',sans-serif;font-size:12px;color:#c4bdb4;margin-left:7px;font-weight:400}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:33px 0 34px;border-top:1px solid #292a2d;padding-top:28px}.step-number{font-family:'Space Grotesk',sans-serif;font-size:11px;color:#777078}.steps h3{font-size:14px;font-weight:500;margin:12px 0 8px;color:#d9d4ce}.steps p{font-size:11px;color:#807d85;line-height:1.7;max-width:230px;margin:0}.page-footer{display:flex;justify-content:space-between;border-top:1px solid #252629;padding:22px 0 28px;color:#626168;font-size:8px;gap:18px}.countdown{position:absolute;bottom:39px;left:25%;right:25%;height:2px;background:#3b3633;display:none}.countdown div{height:100%;width:100%;background:var(--accent);transform-origin:left}.listening .countdown{display:block}.locked .readout{opacity:.3}.locked .tuner{opacity:.35;pointer-events:none}.locked .sound-field{cursor:default}.result-panel{padding:5px 27px}.result-header{text-align:center;padding:2px 0 23px}.result-header h2{font-family:'Space Grotesk',sans-serif;font-size:32px;letter-spacing:-1px;font-weight:500;margin:8px}.result-header p{color:#969096;font-size:12px;margin:0}.score-display{font-family:'Space Grotesk',sans-serif;font-size:66px;color:var(--accent);letter-spacing:-3px;margin:16px 0 6px}.score-display small{font-size:22px;color:#77737a;letter-spacing:-.5px}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px}.comparison>div{border:1px solid #39373c;background:#1c1d20;border-radius:8px;padding:20px;text-align:center}.comparison .small-label{justify-content:center}.compare-note{font-family:'Space Grotesk',sans-serif;font-size:32px;margin:10px 0 3px}.compare-hz{font-size:11px;color:#999199}.compare-play{margin-top:15px;border:1px solid #454046;background:transparent;border-radius:5px;padding:7px 12px;font-size:10px}.result-error{text-align:center;color:#a79a91;font-size:11px;margin:18px 0 0}.summary-panel{padding:0 27px}.score-table{width:100%;border-collapse:collapse;font-size:11px}.score-table th{text-align:left;color:#8e858c;font-size:8px;letter-spacing:1px;font-weight:400;border-bottom:1px solid #373338;padding:10px 6px}.score-table td{padding:13px 6px;border-bottom:1px solid #2c292e;color:#c8c0c3}.score-table small{display:block;font-size:9px;color:#888089;margin-top:4px}.score-table td:last-child{color:var(--accent);text-align:right}.score-table th:last-child{text-align:right}.summary-note{font-size:10px;color:#93858b;text-align:center;margin:16px 0 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}dialog{background:#1b1c1f;border:1px solid #454044;border-radius:15px;color:var(--text);padding:27px;max-width:490px;width:calc(100% - 28px)}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-heading button{background:none;border:0;font-size:25px;color:#a69b9b}dialog h2{font-family:'Space Grotesk',sans-serif;font-size:27px;letter-spacing:-1px;font-weight:500}dialog p,dialog li{font-size:12px;color:#aba4a7;line-height:1.7}dialog ol{padding-left:18px}dialog li{padding:4px 0}dialog strong{color:#e0d7d1}.help-callout{background:#262326;padding:17px;border-radius:7px;font-size:12px}.help-callout p{margin-bottom:0}.help-small{font-size:10px!important}dialog .primary{width:100%;margin-top:20px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#3c342e;color:#f8dfcd;border:1px solid #79604d;border-radius:7px;font-size:12px;padding:13px 20px;z-index:20;opacity:0;pointer-events:none;transition:opacity .15s;max-width:calc(100% - 32px);text-align:center}#toast.visible{opacity:1}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}@media(min-width:1600px){main{max-width:1060px}.intro{padding-top:65px}.sound-field{min-height:300px}.readout{padding-top:25px}.note-name{font-size:79px}.field-copy{bottom:55px}canvas{height:155px}}
@media(max-width:650px){.header{height:73px;padding:0 21px}.brand{font-size:24px}.edition{display:none}.text-button{font-size:11px}.intro{padding:35px 0 26px}h1{letter-spacing:-1.7px;font-size:36px}.intro>p{font-size:12px}main{padding:0 14px}.toolbar{padding:0 15px;height:63px}.mode-tabs button{padding:7px 13px;font-size:11px}.difficulty-group{gap:6px}.difficulty-group label{display:none}.difficulty-group select{padding:7px 17px 7px 9px;font-size:11px}.game-meta{padding:19px 16px 15px;font-size:7px;letter-spacing:1px}.round-dots span{width:17px}.instrument{margin:0 15px;grid-template-columns:1.2fr 1fr}.sound-field{min-height:252px}.field-top{left:11px;right:10px;font-size:6px}.field-tag{display:none}.field-bottom{left:9px;right:9px;font-size:5px;letter-spacing:.5px}.field-bottom>span:last-child{display:none}.field-copy{bottom:50px;left:10px;right:10px}.field-copy h2{font-size:20px;line-height:1.15;max-width:150px;margin:0 auto 10px}.field-copy p{font-size:9px;max-width:150px;margin:auto}.readout{padding:18px 8px 15px}.small-label{font-size:6px;letter-spacing:1px;gap:5px}.note-name{font-size:59px;margin-top:9px}.note-name span{font-size:25px}.frequency-number input{font-size:19px;width:72px}.frequency-number>span{font-size:10px}.cents-gauge{width:110px;gap:5px}.mini-keys{gap:2px}.mini-keys i{width:8px}.tuning-standard{font-size:4.6px;letter-spacing:.4px}.tuner{margin:22px 15px 0}.action-bar{padding:22px 15px 20px;gap:8px}.primary,.preview-button{font-size:11px;min-height:45px}.game-footer{padding:0 15px}.volume{gap:6px}.volume input{width:48px}#game-note{font-size:5.5px;letter-spacing:.7px}.separator{padding:0 3px}.below-game{align-items:start;gap:15px;font-size:8px;line-height:1.5}#best-label{font-size:6px;white-space:nowrap;padding-top:2px}#best-label b{font-size:10px}.steps{gap:15px;margin-top:22px;padding-top:22px}.steps h3{font-size:12px}.steps p{font-size:10px}.page-footer{font-size:7px;line-height:1.5}.page-footer span:last-child{text-align:right;max-width:165px}.result-panel,.summary-panel{padding:0 15px}.comparison>div{padding:17px 10px}.keyboard-hint{display:none}.score-table{font-size:10px}.score-table small{font-size:8px}}