:root{color-scheme:light;--ink:#1f1b18;--sub:#5d544c;--line:#e8d9bf;--rose:#a85b5b;--cream:#fffaf2}
h1 span{display:inline-block}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Noto Sans JP",system-ui,-apple-system,sans-serif;line-height:1.8}a{color:#754338;text-underline-offset:4px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #8f7040;outline-offset:4px}[hidden]{display:none!important}
header{border-bottom:1px solid var(--line);background:#fff;padding:16px max(20px,calc((100vw - 1000px)/2));display:flex;justify-content:space-between;align-items:center;gap:16px}header a{font-size:.9rem;text-decoration:none}.brand{font-family:"Noto Serif JP",serif;font-weight:700;letter-spacing:.06em;color:var(--ink)}main{max-width:820px;padding:36px 20px 48px;margin:auto}.intro{text-align:center}.eyebrow{color:var(--rose);font-weight:700;margin:0}h1,h2{font-family:"Noto Serif JP",serif;line-height:1.5}h1{font-size:clamp(1.65rem,5vw,2.35rem);margin:10px 0 16px}.intro>p:last-child{color:var(--sub);max-width:640px;margin:0 auto 26px}.card{background:white;border:1px solid var(--line);border-radius:26px;padding:clamp(18px,4vw,32px);box-shadow:0 10px 30px #3726120a}.card h2{margin:0 0 14px;font-size:1.3rem}.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}.choice{background:#fffaf2;border:1px solid var(--line);border-radius:18px;padding:20px 12px;color:var(--ink)}.choice strong{display:block;font-size:1.15rem;color:#754338}.choice small{display:block;margin-top:5px}.hint,.best,.privacy{font-size:.87rem;color:var(--sub)}.best{min-height:1.8em}.stats{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.9rem}.stats strong{font-variant-numeric:tabular-nums}.staff{display:block;width:100%;max-width:480px;height:auto;margin:12px auto 0;color:#302721}.answers{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.answers button{border:1px solid #dbbdb2;border-radius:14px;background:#fff6f3;min-height:58px;padding:10px 2px;font-size:1.1rem;font-weight:700;color:#643c35}.answers button:disabled{opacity:.6;cursor:default}.feedback{min-height:2em;text-align:center;font-weight:700;color:#754338;margin:6px 0 14px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.button{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:12px 22px;background:#fffaf2;color:var(--ink);text-decoration:none;font-weight:700}.primary{background:#8f7040;border-color:#8f7040;color:white}.sound-row{display:flex;justify-content:flex-end;margin-top:16px}.sound-row button{background:white;color:var(--sub);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:.85rem}.result-number{font-size:1.45rem;color:#754338;font-weight:700}.lesson{border-top:1px solid var(--line);margin-top:26px;padding-top:22px;color:var(--sub)}footer{text-align:center;font-size:.8rem;padding:12px 20px 32px;color:var(--sub)}
@media(max-width:480px){header{padding:14px 18px}.brand{font-size:.85rem}main{padding:26px 14px}.choices{grid-template-columns:1fr}.choice{padding:14px}.answers{grid-template-columns:repeat(4,1fr)}.answers button{min-height:54px}.actions>*{width:100%;text-align:center}}

/* Soft game accents, scoped to the standalone game page. */
body{background:radial-gradient(ellipse at 12% 22%,#fff0f4 0,transparent 40%),radial-gradient(ellipse at 92% 60%,#eff8f5 0,transparent 35%),#fffaf2}
main{max-width:860px}.title-notes{color:#b8788c;font-size:1.8rem;letter-spacing:.4em;line-height:1.2;margin-bottom:12px}.title-notes span{color:#c9a456;font-size:1.1rem;vertical-align:middle}.eyebrow{display:inline-block;background:#fff4d9;border:1px solid #f0e4c5;border-radius:999px;padding:3px 16px;font-size:.85rem}h1{font-size:clamp(1.5rem,5.5vw,2.35rem);color:#634548}h1 span{max-width:100%}.intro>p:last-child{font-size:.95rem}.card{border-color:#eaded8;background:#ffffffed;box-shadow:0 12px 36px #805c4810}.card h2{text-align:center;color:#634548}.choices{gap:18px}.choice{position:relative;background:linear-gradient(145deg,#fff2f3,#fff8eb);border-color:#ead3d6;box-shadow:0 5px 0 #f1e2df;padding:22px 14px;transition:transform .15s ease,box-shadow .15s ease}.choice[data-level="challenge"]{background:linear-gradient(145deg,#eff7fd,#f6f0fa);border-color:#d8deec;box-shadow:0 5px 0 #e4e5f0}.choice-icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 10px;border-radius:50%;background:#fff9;color:#b77a8b;font-size:1.8rem}.choice[data-level="challenge"] .choice-icon{color:#7e83ad}.choice-caption{display:block;font-size:.88rem;margin-top:5px;color:#67585c}.choice small{font-size:.75rem;color:#746970}.choice:active{transform:scale(.98);box-shadow:0 1px 0 #e6d8d7}.hint{margin:24px 0;font-size:.82rem}.record-card{background:linear-gradient(115deg,#fff9e9,#faf8f1);border:1px solid #eee2c8;border-radius:16px;padding:12px 16px;margin-top:20px}.record-label{display:block;color:#8a7149;font-size:.76rem;font-weight:700;letter-spacing:.08em}.best{font-size:.8rem;margin:4px 0 0;overflow-wrap:anywhere}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center;font-size:.75rem}.stats>span{background:#faf5f3;border-radius:12px;padding:9px 4px}.stats>span:nth-child(2){background:#edf6f3}.stats>span:nth-child(3){background:#f2f0fa}.stats strong{display:block;font-size:1.08rem;color:#634548}.progress{display:flex;justify-content:center;gap:clamp(6px,2vw,12px);padding:19px 0}.progress span{width:14px;height:14px;flex:0 0 14px;border-radius:50%;border:1px solid #e4d6d0;background:#f8f3ef;transition:background-color .2s,transform .2s}.progress .done{background:#c790a2;border-color:#c790a2}.progress .current{border:2px solid #c790a2;box-shadow:0 0 0 3px #f8ecf0}.question-card{background:white;border:1px solid #eee5de;border-radius:20px;box-shadow:0 8px 22px #7a66540b;overflow:hidden}.question-caption{text-align:center;color:#89776e;font-size:.82rem;margin:15px 0 0;letter-spacing:.1em}.staff{max-width:580px;margin:0 auto; /* Scale the whole score, preserving every pitch coordinate. */}
.answers{gap:10px}.answers button{font-size:1.3rem;border-radius:17px;border-color:#e5cdd3;background:#fcecf0;box-shadow:0 4px 0 #eed9df;min-height:64px;transition:transform .12s,box-shadow .12s}.answers button:nth-child(3n+2){background:#edf5fa;border-color:#d3e3eb;box-shadow:0 4px 0 #dfeaf1;color:#445f70}.answers button:nth-child(3n){background:#eff7f2;border-color:#d6e5dc;box-shadow:0 4px 0 #e0ece5;color:#4b695c}.answers button:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #e6dad6}.answers button:disabled{opacity:.72}.feedback{position:relative;margin:16px 0 18px;font-size:1rem;min-height:2em}.feedback.is-correct{color:#55735d;animation:answer-pop .4s ease}.feedback.is-correct::before,.feedback.is-correct::after{content:'✦';display:inline-block;color:#c4a354;margin:0 7px;font-size:.8em;animation:note-float .5s ease}.feedback.is-correct::after{content:'♪';color:#b77a8b}.result-badge{text-align:center;letter-spacing:.25em;color:#b99054;font-size:2.2rem;margin:0 0 12px}.result-cheer{text-align:center;color:#8c626a;margin:0 0 22px;font-weight:700}.result-scores{display:grid;grid-template-columns:1fr 1fr;gap:12px}.result-number{margin:0;background:#fff1f4;border-radius:18px;padding:16px 10px;text-align:center;font-size:.86rem}.result-number:nth-child(2){background:#eef6fa}.result-number span{display:block;font-size:2rem;font-variant-numeric:tabular-nums}.new-best{display:inline-block;margin:7px 0 0;padding:2px 10px;border-radius:999px;background:#fff0c9;color:#7d5e2e;font-size:.85rem;font-weight:700}#result:not([hidden]){animation:result-in .35s ease-out}#result-message{text-align:center;font-weight:700;color:#716057}.primary{background:#a56779;border-color:#a56779}.button{transition:transform .12s}.button:active{transform:scale(.98)}.sound-row button{min-height:44px}.privacy{font-size:.74rem;color:#80736a;margin-top:22px}.lesson{font-size:.9rem}.lesson .button{font-size:.85rem}
@keyframes answer-pop{0%{transform:scale(.96)}45%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes note-float{from{transform:translateY(5px);opacity:.3}to{transform:translateY(0);opacity:1}}
@keyframes result-in{from{opacity:.5;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){main{padding-top:22px}.title-notes{font-size:1.45rem}.intro>p:last-child{font-size:.85rem;margin-bottom:22px}.card{padding:18px 14px}.choice{padding:16px 12px}.choice-icon{width:36px;height:36px;font-size:1.4rem;margin-bottom:5px}.answers{gap:10px}.answers button{min-height:58px}.result-scores{gap:8px}.result-number{font-size:.75rem}.result-number span{font-size:1.8rem}.feedback{font-size:.9rem}.stats strong{font-size:1rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.choice:active,.button:active,.answers button:not(:disabled):active{transform:none}}