@font-face{font-family:'RocknRoll One';src:url('../fonts/rocknroll-one/RocknRollOne-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
body{min-height:100dvh;font-family:'M PLUS 2','Yu Gothic',sans-serif;background:radial-gradient(ellipse at 50% 0,#557d704d,transparent 65%),repeating-linear-gradient(90deg,#fff1 0 1px,transparent 1px 100px),#101d24}main{max-width:820px;margin:30px auto 60px;padding:34px;border:1px solid #d2bd8370;border-radius:24px;background:linear-gradient(140deg,#263c3cfa,#151d2af5);box-shadow:0 25px 80px #0006}h1,h2,h3{font-family:'RocknRoll One','M PLUS 2',sans-serif;font-weight:400}h1{font-size:clamp(25px,4vw,38px);margin:14px 0}.eyebrow{text-align:center;font-size:11px;letter-spacing:.2em}main>h1,.lead{text-align:center}.lead{color:#dfca95}#intro{text-align:center;margin:30px 0}#intro p{max-width:560px;margin:18px auto;font-size:14px;line-height:2}.piano-emblem{display:grid;place-items:center;width:85px;height:85px;margin:auto;border:1px solid #e4d09e;border-radius:50%;font-size:42px;color:#eddaa7;background:#d8bb6520}.primary{background:#e4d09e;color:#202626;font-weight:700}button{min-height:46px;border-radius:12px}#start{padding:14px 30px}.studio-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.1em;color:#d6c795}#phase{color:#ffe4aa;font-size:20px;font-weight:700;min-height:36px}#instruction{font-size:13px;color:#cbd8d3;min-height:2em}#noteProgress{display:flex;gap:12px}#noteProgress span{width:32px;height:32px;display:grid;place-items:center;border:1px solid #d2bd8355;border-radius:50%;color:#9bafa9}#noteProgress .done{background:#e1ce9b;color:#192823}.keyboard{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;background:#080e14;padding:10px 8px 8px;border:1px solid #b39a67;border-radius:12px;box-shadow:0 10px 30px #0006}.piano-key{position:relative;min-width:0;height:195px;background:linear-gradient(90deg,#eee5d1,#fff9eb 45%,#e6ddc7);color:#283331;border:0;border-radius:0 0 6px 6px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:12px 0;gap:4px;box-shadow:inset 0 -7px #bdb398;touch-action:manipulation;user-select:none}.piano-key:disabled{opacity:1;color:#66716a;cursor:default}.piano-key::before{content:'';position:absolute;top:0;right:-24%;width:45%;height:53%;background:linear-gradient(90deg,#080d14,#34404c,#111824);border-radius:0 0 4px 4px;z-index:1;box-shadow:0 4px 3px #0008;pointer-events:none}.piano-key:nth-child(3)::before,.piano-key:nth-child(7)::before{display:none}.piano-key.lit,.piano-key:enabled:active{background:linear-gradient(#f6df9d,#d8ad50);box-shadow:inset 0 -5px #a77829,0 0 20px #edc77855}.piano-key kbd{font:12px 'M PLUS 2',sans-serif;opacity:.6}.piano-key strong{font-size:14px}.keyboard-note,.credits{font-size:11px;color:#a8bdb5;line-height:1.9}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:20px 0}.actions button{font-size:13px;flex:1;padding:10px 14px}.scores{display:flex;gap:20px;justify-content:center}.scores p{padding:10px 20px;border:1px solid #dac68d66;border-radius:12px;font-size:14px}.scores strong{color:#f9e3ab}#results{text-align:center;margin-top:32px;padding-top:24px;border-top:1px solid #dac68d66}.score{margin:12px 0;color:#ffe5ad}.score strong{font:72px 'RocknRoll One',sans-serif}.score span{font-size:14px;color:#c5b992}#advice{font-size:14px;line-height:1.9}.compare{background:#09162066;border:1px solid #dac68d33;border-radius:16px;padding:16px;margin-top:20px}.compare h3{margin:0;font-size:20px}.compare p,#noteComparison{font-size:12px;color:#c5d5cc}#noteComparison p{margin:6px 0}#notice{color:#f7d692;font-size:13px}.credits{margin-top:28px}@media(max-width:600px){.catalog-shell{padding:0 12px}main{padding:22px 14px;margin-top:16px}.catalog-header{flex-wrap:wrap}.piano-key{height:164px}.piano-key strong{font-size:11px}.actions button{min-width:120px}.scores{gap:8px}.scores p{padding:10px 12px}#phase{font-size:17px}h2{font-size:21px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
#instrumentProgress{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}#instrumentProgress span{font-size:12px;padding:7px 10px;border:1px solid #bca77b55;border-radius:18px;color:#b6c8bf}#instrumentProgress .current{background:#e4d09e;color:#172a27;font-weight:700}#instrumentProgress .completed{border-color:#8ec5ac;color:#bbdecf}#ensembleResult{border:1px solid #e4d09e88;border-radius:18px;background:radial-gradient(ellipse at top,#e4d09e22,transparent 75%);padding:24px 14px;margin:24px 0}#instrumentScores{display:grid;grid-template-columns:1fr 1fr;gap:8px}#instrumentScores p{font-size:13px;border:1px solid #e4d09e33;border-radius:10px;padding:10px;margin:0}#saveStatus{font-size:12px;color:#d1decf}#echoHistory{color:#f0e9da;background:linear-gradient(140deg,#263c3c,#151d2a);border:1px solid #d2bd83;border-radius:20px;width:min(700px,calc(100vw - 24px));max-height:85dvh;padding:24px;font-family:'M PLUS 2','Yu Gothic',sans-serif}#echoHistory::backdrop{background:#091014c9;backdrop-filter:blur(4px)}#echoHistory h2{font-size:22px;margin:0}#echoHistorySummary{color:#ffe4aa;border-block:1px solid #d2bd8355;padding:14px 0}#echoHistoryNotice,#echoHistoryList p{font-size:12px;color:#c5d5cc}#echoHistoryList{padding:0;list-style:none}#echoHistoryList li{padding:16px 0;border-bottom:1px solid #d2bd8344}#echoHistoryList strong{display:block;color:#ffe4aa}#echoHistoryList time{font-size:12px;color:#adc0b9}.credits a{color:#dcca9c}@media(max-width:480px){#echoHistory{padding:18px}#echoHistory h2{font-size:18px}#instrumentScores{grid-template-columns:1fr}}
.practice-options{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:22px 0}.practice-options label{display:flex;flex-direction:column;gap:8px;color:#dfca95;font-size:13px;text-align:left}.practice-options select{max-width:100%;font:inherit}#noteProgress{flex-wrap:wrap}#paused{margin:20px 0;padding:18px;border:1px solid #d2bd83;border-radius:12px;background:#172c33}#paused p{font-size:13px}#tournamentSummary{font-size:14px;line-height:1.9;color:#f4dfae}#submitInput{font-size:12px}