@font-face{font-family:ArmoniaBravura;src:url(/fonts/Bravura.woff2) format("woff2");font-style:normal;font-weight:400;font-display:block}.note-game{--game-green:#123e2c;--game-muted:#6b716b;--game-copper:#ad6038;max-width:960px;margin:32px auto 0;border:1px solid #dfdfd2;background:#fffefb;border-radius:24px;overflow:hidden;color:var(--game-green);box-shadow:0 12px 50px #17362208;text-align:left}.note-game button{font-family:inherit;cursor:pointer;transition:background .2s,transform .2s,color .2s;border:0}.note-game button:focus-visible{outline:3px solid #bd744c;outline-offset:4px}.note-game button:disabled{cursor:default}.note-game__toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px;border-bottom:1px solid #e8e8df;background:#f6f7f0}.note-game__clefs{display:flex;gap:5px;flex-wrap:wrap}.note-game__clefs button{display:flex;align-items:center;gap:11px;padding:11px 15px;border-radius:9px;background:transparent;font-size:13px;color:#5e665d}.note-game__clefs button[aria-pressed=true]{background:var(--game-green);color:white;box-shadow:0 3px 8px #133e2b1a}.note-game__clef-icon{font-family:ArmoniaBravura;font-size:27px;line-height:1;display:inline-flex;align-items:center;height:25px}.note-game__free{display:flex;gap:6px;align-items:center;font-size:12px;color:#6b716b;white-space:nowrap}.note-game__board{padding:29px 48px 24px;text-align:center}.note-game__progress-label{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#73776e;margin-bottom:10px}.note-game__progress-label>span:last-child{display:flex;align-items:center;gap:5px}.note-game progress{display:block;width:100%;height:4px;border:none;border-radius:8px;overflow:hidden;background:#ebeee4;accent-color:#b3653d}.note-game progress::-webkit-progress-bar{background:#ebeee4}.note-game progress::-webkit-progress-value{background:#b3653d;-webkit-transition:width .25s;transition:width .25s}.note-game progress::-moz-progress-bar{background:#b3653d}.note-game__board h2,.note-game__result h2{font-family:var(--font-heading,Georgia,serif);font-size:30px;line-height:1.25;font-weight:400;letter-spacing:-.6px;margin:35px 0 9px}.note-game__instruction{font-size:14px;color:#777c73;margin:0}.note-game__staff{display:block;width:min(100%,580px);height:auto;margin:0 auto -12px;color:#233d2e}.note-game__music-symbol{font-family:ArmoniaBravura;-webkit-user-select:none;user-select:none}.note-game__note{animation:note-in .35s ease-out;transform-origin:center}.note-game__listen{padding:9px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#526d5d;background:#f1f4eb;border-radius:20px;font-size:12px}.note-game__listen:hover:not(:disabled){background:#e8edde}.note-game__audio-error{font-size:12px;color:#875137;max-width:400px;margin:10px auto}.note-game__answers{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;max-width:600px;margin:24px auto 0}.note-game__answers button{position:relative;min-height:58px;display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #dfdfd2;border-radius:12px;background:#fffefb;color:var(--game-green);font-size:20px;font-family:var(--font-heading,Georgia,serif);box-shadow:0 3px 0 #efefe6}.note-game__answers button:hover:not(:disabled){background:#f1f4e9;border-color:#9ba993;transform:translateY(-2px)}.note-game__answers button.is-correct{background:#e5efdf;border-color:#8ea580;color:#244b29}.note-game__answers button.is-incorrect{background:#fbebe2;border-color:#c49375;color:#895035}.note-game__answers button:disabled:not(.is-correct):not(.is-incorrect){opacity:.45}.note-game__feedback{min-height:94px;gap:15px;padding-top:18px}.note-game__feedback,.note-game__feedback p{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.note-game__feedback p{gap:5px;font-size:13px;margin:0;line-height:1.6}.note-game__quiet{color:#8a8c82;font-style:italic}.note-game .note-game__primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:43px;padding:12px 20px;border-radius:8px;background:var(--game-green);color:white;font-size:12px;line-height:1.5}.note-game .note-game__primary:hover{background:#20523b}.note-game__hint{border-top:1px solid #e8e8df;background:#fafaf4;padding:0 28px}.note-game__hint>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:55px;padding:12px 0;color:#637360;background:transparent;text-align:left;font-size:13px}.note-game__hint>button>span{font-size:21px;font-weight:300}.note-game__hint>p{margin:0;padding:0 0 22px;color:#637360;font-size:13px;line-height:1.8;max-width:760px}.note-game__result{min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:45px 25px}.note-game__trophy{display:grid;place-items:center;width:76px;height:76px;background:#edf1df;border-radius:50%;color:#a5683d;margin-bottom:22px}.note-game__eyebrow{font-size:10px;letter-spacing:1.6px;color:#7c866d;margin:0}.note-game__result h2{margin:15px 0 10px;max-width:520px}.note-game__result>p:not(.note-game__eyebrow){font-size:15px;color:#6e766c}.note-game__result-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:17px 0 30px}.note-game__result-dots span{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;font-size:11px}.note-game__result-dots .is-correct{background:#e3eddc;color:#315637}.note-game__result-dots .is-incorrect{background:#f7e7dc;color:#905a3d}.note-game-page{background:#faf9f3;min-height:100vh;padding:46px 24px 70px}.note-game-page__intro{max-width:960px;margin:auto}.note-game-page__back{display:inline-flex;align-items:center;gap:7px;color:#697364;text-decoration:none;font-size:12px;margin-bottom:28px}.note-game-page__eyebrow{display:flex;align-items:center;gap:8px;color:#a7653d;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 14px}.note-game-page h1{font-family:var(--font-heading,Georgia,serif);font-weight:400;font-size:clamp(36px,5vw,55px);line-height:1.1;letter-spacing:-1.5px;color:#163c2a;margin:0 0 15px}.note-game-page__description{max-width:630px;font-size:15px;line-height:1.8;color:#747b70;margin:0}.note-game-page__footnote{max-width:960px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:19px auto 0;font-size:11px;line-height:1.7;color:#8a8b7f}@keyframes note-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.note-game__toolbar{padding:16px;flex-direction:column;align-items:flex-start;gap:12px}.note-game__clefs{width:100%;flex-wrap:nowrap;gap:4px}.note-game__clefs button{flex:1 1;justify-content:center;padding:10px 7px;gap:7px;font-size:11px}.note-game__free{font-size:11px}.note-game__board{padding:23px 18px 15px}.note-game__board h2{font-size:25px;margin-top:27px}.note-game__instruction{font-size:12px}.note-game__answers{gap:6px;margin-top:24px}.note-game__answers button{min-height:48px;font-size:18px;border-radius:8px}.note-game__answers button svg{display:none}.note-game__progress-label{font-size:10px}.note-game__feedback{min-height:110px;flex-direction:column;gap:12px}.note-game__feedback p{font-size:12px}.note-game__hint{padding:0 19px}.note-game__result{min-height:440px}.note-game__result h2{font-size:28px}.note-game-page{padding:30px 16px 50px}.note-game-page__description{font-size:14px}.note-game-page__footnote{font-size:10px;gap:5px}.note-game__staff{margin:3px auto -7px}}@media(prefers-reduced-motion:reduce){.note-game *{animation:none!important;transition:none!important}}