.ReactPiano__Keyboard{display:flex;position:relative}.ReactPiano__Key{display:flex}.ReactPiano__Key--accidental{cursor:pointer;z-index:1;background:#555;border:1px solid #fff;border-top-color:#0000;border-radius:0 0 4px 4px;height:66%;position:absolute;top:0}.ReactPiano__Key--natural{cursor:pointer;z-index:0;background:#f6f5f3;border:1px solid #888;border-radius:0 0 6px 6px;flex:1;margin-right:1px}.ReactPiano__Key--natural:last-child{margin-right:0}.ReactPiano__Key--active{background:#3ac8da}.ReactPiano__Key--active.ReactPiano__Key--accidental{border:1px solid #fff;border-top-color:#3ac8da;height:65%}.ReactPiano__Key--active.ReactPiano__Key--natural{border:1px solid #3ac8da;height:98%}.ReactPiano__Key--disabled.ReactPiano__Key--accidental{background:#ddd;border:1px solid #999}.ReactPiano__Key--disabled.ReactPiano__Key--natural{background:#eee;border:1px solid #aaa}.ReactPiano__NoteLabelContainer{flex:1;align-self:flex-end}.ReactPiano__NoteLabel{text-align:center;text-transform:capitalize;-webkit-user-select:none;user-select:none;font-size:12px}.ReactPiano__NoteLabel--accidental{color:#f8e8d5;margin-bottom:3px}.ReactPiano__NoteLabel--natural{color:#888;margin-bottom:3px}.ReactPiano__NoteLabel--natural.ReactPiano__NoteLabel--active{color:#f8e8d5}
.music-floor-screen,.music-trainer-screen{background:#000}.music-trainer-screen{padding:calc(18px + env(safe-area-inset-top))env(safe-area-inset-right,0px)calc(18px + env(safe-area-inset-bottom))env(safe-area-inset-left,0px);-webkit-overflow-scrolling:touch;overflow-y:auto}.music-entry-screen{flex-direction:column;display:flex}.music-entry-screen .mode-group{width:min(560px,92vw);margin-inline:auto}.music-entry-screen .mode-block{gap:12px;display:grid}.music-index-screen{padding:0 18px calc(18px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;flex-direction:column;display:flex;overflow-y:auto}.music-index-screen .screen-header{padding-top:calc(24px + env(safe-area-inset-top))}.music-index-screen .index-list{flex:none;gap:10px;width:min(620px,100%);margin:0 auto;padding:4px 6px 24px;display:grid}.music-index-screen .index-item{gap:6px;display:grid}.music-index-screen .index-row{text-align:left;background:#ffffff08;border:1px solid #ffffff29;border-radius:16px;align-items:center;gap:12px;width:100%;padding:10px 12px;display:flex}.music-index-screen .index-row.is-open{border-color:#fff6}.music-index-screen .index-meta{gap:2px;display:grid}.music-index-screen .index-name{color:#fffffff2;margin:0;font-weight:600}.music-index-screen .index-capital{color:#ffffff8f;margin:0;font-size:.78rem}.music-index-screen .index-detail{opacity:0;gap:8px;max-height:0;padding:0 12px;transition:max-height .2s,opacity .2s;display:grid;overflow:hidden}.music-index-screen .index-detail.is-open{opacity:1;max-height:220px}.music-index-screen .index-fact{color:#ffffffc7;margin:0;font-size:.9rem;line-height:1.35}.music-index-fact-label{letter-spacing:.16em;text-transform:uppercase;color:#ffffff80;margin-bottom:2px;font-size:.65rem;display:block}.music-trainer-stack{flex:1;grid-template-rows:auto minmax(0,1fr);gap:12px;width:min(1320px,100%);min-height:calc(100svh - 150px);margin:0 auto;padding:0 0 12px;display:grid}.music-title-row{justify-content:center;align-items:flex-start;width:100%;padding-top:2px;display:flex}.music-play-picker{justify-content:center;align-items:center;gap:10px;width:min(760px,100%);display:flex}.music-play-controls{gap:8px;width:min(760px,100%);display:grid}.music-play-picker-btn{color:#ffffffe6;min-width:24px;height:24px;box-shadow:none;cursor:pointer;background:0 0;border:0;border-radius:0;outline:none;padding:0;font-size:20px;line-height:1}.music-prompt-title{letter-spacing:.03em;color:#fffffffa;text-wrap:balance;text-align:center;margin:0;font-size:clamp(20px,4vw,28px);font-weight:600;line-height:1.1}.music-play-key-label{letter-spacing:.06em;text-transform:uppercase;color:#ffffffe6;text-align:center;min-width:3ch;margin:0;font-size:clamp(16px,3vw,20px);font-weight:600}.music-keyboard-stage{grid-template-rows:minmax(0,1fr) auto;gap:14px;min-height:0;display:grid}.music-keyboard-scroll{-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain;justify-content:flex-start;align-items:center;min-height:clamp(190px,42svh,420px);padding-bottom:4px;display:flex;overflow:auto visible}@media (pointer:fine){.music-keyboard-scroll{cursor:grab;-webkit-user-select:none;user-select:none}.music-keyboard-scroll.is-dragging{cursor:grabbing}}.music-keyboard-premade{background:0 0;border:0;border-radius:0;flex:none;width:auto;min-width:100%;max-width:none;margin:0;padding:0;display:inline-block}.music-keyboard-premade .ReactPiano__Keyboard{touch-action:pan-x;width:100%}.music-keyboard-premade .ReactPiano__Key{touch-action:pan-x}.music-keyboard-premade .ReactPiano__Key--accidental{background:#000;border-color:#1b1b1b}.music-keyboard-premade .ReactPiano__Key--active.ReactPiano__Key--natural{background:#7bb6ff;border-color:#7bb6ff}.music-keyboard-premade .ReactPiano__Key--active.ReactPiano__Key--accidental{background:#4b8eea;border-color:#9cc8ff #7bb6ff #7bb6ff}.music-actions{flex-direction:column;justify-content:center;align-items:center;gap:6px;padding-bottom:4px;display:flex}.music-feedback{letter-spacing:.14em;text-transform:uppercase;color:#ffffff8f;min-height:18px;margin:0;font-size:11px}.music-feedback.is-correct{color:#69d08f}.music-feedback.is-incorrect{color:#ff8e8e}.music-primary-btn,.music-ghost-btn{letter-spacing:.2em;text-transform:uppercase;cursor:pointer;border:0;border-radius:999px;min-height:40px;padding:0 22px;font-size:11px;transition:opacity .15s}.music-primary-btn{color:#121212;background:#f3f3f3}.music-primary-btn:disabled,.music-ghost-btn:disabled{opacity:.45;cursor:not-allowed}@media (max-width:760px){.music-trainer-stack{min-height:calc(100svh - 130px)}}@media (max-height:520px) and (orientation:landscape){.music-trainer-screen{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom))}.music-trainer-stack{gap:8px;min-height:calc(100svh - 86px)}.music-keyboard-scroll{min-height:0}}