:root{--bg:#fbfcff;--surface:#fff;--surface-strong:#f3f6ff;--border:#0a0e191f;--text:#0a0e19eb;--muted:#0a0e19ad;--shadow:0 8px 24px #0a0e1914;--brand:#2f6fed;--danger:#dc2626;--ok:#16a34a;--radius-lg:18px;--radius-md:12px;--radius-sm:10px;--space-1:8px;--space-2:12px;--space-3:16px;--space-4:24px;--space-5:32px;--ring:0 0 0 3px #2563eb38;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:light){:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}}*,:before,:after{box-sizing:border-box}html,body{height:100%}body{color:var(--text);background:var(--bg);margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans JP,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,sans-serif;line-height:1.55}#root{flex-direction:column;min-height:100%;display:flex}.siteHeader{z-index:10;border-bottom:1px solid var(--border);background:#fff;width:100%;position:sticky;top:0}.siteHeader__inner{align-items:center;max-width:920px;margin:0 auto;padding:14px clamp(16px,3vw,28px);display:flex}.siteMain{width:100%;max-width:920px;padding:var(--space-4) clamp(16px, 3vw, 28px) var(--space-5);gap:var(--space-4);flex-direction:column;flex:1;margin:0 auto;display:flex}.siteMain>button{align-self:center}.siteFooter{background:var(--surface);border-top:1px solid var(--border);width:100%;margin-top:auto}.siteFooter__inner{max-width:920px;padding:var(--space-4) clamp(16px, 3vw, 28px);text-align:center;margin:0 auto}.siteFooter p{color:var(--muted);margin:.2rem 0;font-size:.875rem}.siteFooter__copy{opacity:.85;font-size:.8rem}a{color:inherit;text-decoration:none}.siteHeader a{letter-spacing:.2px;border-radius:10px;padding:8px 10px;font-weight:800}.siteHeader a:hover{background:#0a0e190a}h1{margin:0 0 var(--space-2);letter-spacing:-.02em;font-size:clamp(24px,3vw,34px)}p{color:var(--muted);margin:.35rem 0}.siteMain>:not(button){gap:var(--space-3);text-align:center;justify-items:center;display:grid}.siteMain>:not(button)>div:not(.resultShowcase__burst):not(.resultShowcase__scoreBlock){border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:var(--space-4);box-shadow:var(--shadow);width:min(720px,100%)}button{appearance:none;border:1px solid var(--border);border-radius:var(--radius-md);color:#fff;background:var(--brand);box-shadow:none;cursor:pointer;padding:10px 14px;font-weight:700;transition:transform .12s,box-shadow .12s,opacity .12s}button:hover{opacity:.95;transform:translateY(-1px)}button:active{opacity:.95;transform:translateY(0)}button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}input[type=number],input[type=text],select{border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);width:min(420px,100%);color:var(--text);outline:none;padding:11px 12px}input[type=number]:focus,input[type=text]:focus,select:focus{box-shadow:var(--ring);border-color:#7c5cff8c}form{gap:var(--space-3);align-self:center;justify-items:center;width:min(720px,100%);display:grid}.answerForm{width:min(720px,100%)}.pianoKeyboard{--piano-white-height:clamp(120px, 28vw, 160px);--piano-black-height:clamp(72px, 17vw, 100px);--piano-black-width:calc(100% / 7 * .58);width:100%;box-shadow:var(--shadow);background:linear-gradient(#2a2a2a 0%,#1a1a1a 100%);border-radius:0 0 8px 8px;padding:0 2px 4px;position:relative}.pianoKeyboard__whiteKeys{width:100%;display:flex}.pianoKeyboard__blackKeys{height:var(--piano-black-height);pointer-events:none;position:absolute;top:0;left:0;right:0}.pianoKey{-webkit-user-select:none;user-select:none;cursor:pointer;border:1px solid #bbb;justify-content:center;align-items:flex-end;padding-bottom:8px;transition:background-color .12s,transform 80ms,box-shadow .12s;display:flex;position:relative}.pianoKey input[type=checkbox]{opacity:0;pointer-events:none;position:absolute}.pianoKey__label{pointer-events:none;font-size:clamp(.65rem,2.2vw,.85rem);font-weight:700;line-height:1}.pianoKey--white{min-width:0;height:var(--piano-white-height);background:linear-gradient(#fff 0%,#f0f0f0 100%);border-top:none;border-radius:0 0 5px 5px;flex:1;box-shadow:inset 0 -2px #0000000f}.pianoKey--white+.pianoKey--white{border-left:none}.pianoKey--white:first-child{border-radius:0 0 0 6px}.pianoKey--white:last-child{border-radius:0 0 6px}.pianoKey--white .pianoKey__label{color:#333}.pianoKey--white:hover{background:linear-gradient(#fafafa 0%,#e8e8e8 100%)}.pianoKey--white.pianoKey--checked{box-shadow:inset 0 -3px 0 var(--brand);background:linear-gradient(#dbeafe 0%,#bfdbfe 100%);border-color:#2f6fed8c}.pianoKey--black{width:var(--piano-black-width);height:var(--piano-black-height);z-index:2;pointer-events:auto;background:linear-gradient(#3a3a3a 0%,#111 100%);border:1px solid #000;border-radius:0 0 4px 4px;padding-bottom:6px;position:absolute;top:0;box-shadow:0 3px 6px #00000059}.pianoKey--black .pianoKey__label{color:#eee;font-size:clamp(.55rem,1.8vw,.7rem)}.pianoKey--black:hover{background:linear-gradient(#444 0%,#222 100%)}.pianoKey--black.pianoKey--checked{background:linear-gradient(#3b5fc9 0%,#1e3a8a 100%);border-color:#60a5fa;box-shadow:0 3px 8px #2f6fed80}.pianoKey:active:not(:has(input:disabled)){transform:translateY(1px)}.pianoKey:has(input:disabled){cursor:default;opacity:.85}.answerForm button[type=submit]{justify-self:center}.resultText{margin:0 0 var(--space-2);letter-spacing:-.01em;font-size:clamp(22px,3vw,32px);font-weight:900}.resultText--ok{color:var(--ok)}.resultText--ng{color:var(--danger)}.playButton{min-width:220px;color:var(--text);background:var(--surface-strong);border:2px solid #2f6fed66;border-radius:999px;justify-content:center;align-items:center;gap:14px;padding:14px 24px;font-size:18px;font-weight:800;display:inline-flex;box-shadow:0 4px 14px #2f6fed29}.playButton:hover{opacity:1;background:#2f6fed1a;border-color:#2f6fed99}.playButton__iconWrap{background:var(--brand);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:inline-flex}.playButton__icon{width:22px;height:22px;margin-left:3px}.playButton__label{color:var(--text);margin-right:0}.actionButton{box-sizing:border-box;justify-content:center;align-items:center;width:160px;padding:10px 14px;display:inline-flex}.confirmAnswer{gap:var(--space-3);align-self:center;justify-items:center;width:min(720px,100%);display:grid}.homeForm button[type=submit]{justify-self:center;min-width:160px;padding:11px 18px}.homeNotes{width:min(720px,100%);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow);text-align:left;align-self:center;display:block}.homeNotes h2{margin:0 0 var(--space-2);color:var(--text);text-align:center;font-size:1rem;font-weight:800}.homeNotes ul{gap:var(--space-2);text-align:left;width:100%;margin:0;padding-left:1.25rem;list-style-position:outside;display:grid}.homeNotes li{color:var(--muted);text-align:left;font-size:.9rem;line-height:1.55}span{color:var(--text);margin-right:6px;font-weight:800}.resultShowcase{width:min(720px,100%);padding:var(--space-5) var(--space-4);border-radius:var(--radius-lg);background:linear-gradient(160deg, #2f6fed33 0%, #2f6fed0d 40%, var(--surface) 100%);text-align:center;align-self:center;gap:var(--space-2);border:2px solid #2f6fed59;justify-items:center;display:grid;position:relative;overflow:hidden;box-shadow:0 12px 40px #2f6fed2e}.resultShowcase__eyebrow{z-index:1;letter-spacing:.1em;color:var(--brand);margin:0;font-size:.9rem;font-weight:800;position:relative}.resultShowcase__message{z-index:1;margin:0 0 var(--space-2);color:var(--text);font-size:clamp(1.25rem,3vw,1.75rem);font-weight:900;animation:.5s .35s both resultMessagePop;position:relative}.resultShowcase__burst{width:280px;height:280px;box-shadow:none;pointer-events:none;background:radial-gradient(circle,#2f6fed40 0%,#2f6fed14 45%,#0000 70%);border:none;border-radius:50%;margin:-140px 0 0 -140px;padding:0;animation:.7s ease-out both resultBurst;position:absolute;top:50%;left:50%}.resultShowcase__scoreBlock{z-index:1;box-shadow:none;background:0 0;border:none;justify-content:center;align-items:baseline;gap:4px;width:auto;padding:0;line-height:1;display:flex;position:relative}.resultShowcase__number{letter-spacing:-.04em;color:var(--brand);text-shadow:0 6px 28px #2f6fed66;margin-right:0;font-size:clamp(5rem,22vw,7.5rem);font-weight:900;animation:.65s cubic-bezier(.34,1.56,.64,1) .1s both resultNumberPop}.resultShowcase__slash{color:var(--muted);margin-right:0;font-size:clamp(2rem,8vw,3rem);font-weight:700;animation:.5s .25s both resultNumberPop}.resultShowcase__total{color:var(--text);margin-right:0;font-size:clamp(2.5rem,10vw,3.5rem);font-weight:800;animation:.5s .3s both resultNumberPop}.resultShowcase__caption{z-index:1;color:var(--brand);letter-spacing:.08em;margin:0;font-size:1.1rem;font-weight:800;animation:.45s .45s both resultMessagePop;position:relative}@keyframes resultNumberPop{0%{opacity:0;transform:scale(.2)}70%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes resultMessagePop{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.loadingOverlay{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fbfcffd1;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.loadingOverlay__panel{gap:var(--space-3);padding:var(--space-5);border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);justify-items:center;display:grid}.loadingOverlay__spinner{border:4px solid #2f6fed2e;border-top-color:var(--brand);border-radius:50%;width:48px;height:48px;animation:.8s linear infinite loadingSpin}.loadingOverlay__label{color:var(--muted);margin:0;font-size:.95rem;font-weight:700}@keyframes loadingSpin{to{transform:rotate(360deg)}}@keyframes resultBurst{0%{opacity:0;transform:scale(0)}50%{opacity:1}to{opacity:1;transform:scale(1)}}