/* V2: 3-6 year-old friendly follow-along piano waterfall */
.song-mode-select{display:flex;align-items:center;gap:5px;width:max-content;max-width:100%;margin:0 0 13px;padding:5px;background:#eef4fa;border:1px solid #dde6f4;border-radius:21px}
.song-mode-button{min-height:43px;padding:8px 22px;border:0;border-radius:16px;background:transparent;color:#58677e;font-weight:800;font-size:15px;white-space:nowrap;cursor:pointer}
.song-mode-button[aria-pressed="true"]{color:#294d74;background:#fff;box-shadow:0 3px 9px #435a7a1a}
.song-mode-button:focus-visible,.follow-difficulty-button:focus-visible{outline:3px solid #4d8eda;outline-offset:2px}
.follow-area{margin:11px 0 0}
.follow-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:33px;margin:0 3px 7px}
.follow-track-label{color:#526984;font-size:13px;font-weight:750}
.follow-difficulty{display:flex;gap:5px}
.follow-difficulty-button{border:1px solid #d9e6ed;border-radius:22px;background:#fff;padding:6px 11px;min-height:34px;font-size:12px;font-weight:800;color:#718095}
.follow-difficulty-button[aria-pressed="true"]{background:#d4f5eb;border-color:#8ed6c5;color:#23776e}
.follow-lanes{height:152px;border:2px solid #e0ebf4;border-radius:17px 17px 4px 4px;position:relative;overflow:hidden;background:repeating-linear-gradient(90deg,#edf4fa 0,#edf4fa 1px,transparent 1px,transparent calc(100% / 15)),linear-gradient(180deg,#f7fbff,#eff8f7);isolation:isolate}
.follow-lanes::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#e0f5f1 0%,transparent 36%);pointer-events:none}
.follow-note-layer{position:absolute;inset:0;pointer-events:none}
.follow-note{position:absolute;top:0;left:0;border:2px solid #ffffffb5;border-radius:12px 12px 9px 9px;box-shadow:0 2px 8px #426c9744,inset 0 -4px 0 #ffffff55;display:flex;align-items:flex-end;justify-content:center;will-change:transform;overflow:hidden}
.follow-note[hidden]{display:none!important}
.follow-note span{font-size:11px;font-weight:900;white-space:nowrap;color:#2c5166;background:#ffffffba;border-radius:7px;padding:2px 3px;margin-bottom:3px}
.follow-note.is-next{outline:2px solid #438bba;outline-offset:0}
.follow-hitline{height:3px;position:absolute;bottom:14px;left:0;right:0;z-index:2;background:repeating-linear-gradient(90deg,#3aa99f 0,#3aa99f 15px,transparent 15px,transparent 24px);pointer-events:none}
.follow-hitline::after{content:"";width:12px;height:12px;position:absolute;top:-5px;left:5px;border-radius:50%;background:#57c8ad}
.song-stage:has(.follow-area:not([hidden])) .guided-keyboard{border-top-left-radius:5px;border-top-right-radius:5px}
@media(max-width:600px){
 .song-mode-select{width:100%;margin-bottom:9px}
 .song-mode-button{flex:1;padding:8px 10px;font-size:14px}
 .follow-lanes{height:128px}
 .follow-topbar{flex-wrap:wrap}
 .follow-track-label{font-size:12px}
 .follow-difficulty-button{padding:5px 9px}
}
@media(orientation:landscape) and (max-height:540px){
 .song-mode-select{margin:0 0 5px;padding:2px;border-radius:15px;width:max-content}
 .song-mode-button{min-height:30px;font-size:12px;padding:4px 14px;border-radius:12px}
 .follow-area{margin:4px 0 0}
 .follow-topbar{min-height:26px;margin-bottom:3px}
 .follow-difficulty-button{min-height:25px;padding:2px 9px;font-size:11px}
 .follow-lanes{height:82px;border-radius:11px 11px 3px 3px}
 .follow-track-label{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.song-mode-button,.follow-difficulty-button{transition:none}}