/* A quieter frame keeps the dancer, next key and current combo readable. */
body{-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button{transition:background .12s,border-color .12s,box-shadow .12s}
kbd{font-family:inherit}
.combo-pill{display:inline-block;color:#95ac95;border:1px solid #455948;border-radius:20px;padding:4px 7px;font-size:8px;letter-spacing:.05em;white-space:nowrap;vertical-align:middle}
.combo-pill[data-live=true]{background:#d0e5ae;color:#223b29;border-color:#d0e5ae}
.round-progress{height:2px;margin-bottom:5px;background:#263d35;overflow:hidden}
.round-progress i{display:block;width:100%;height:100%;background:#cce3ae;transform-origin:left;transition:transform .1s linear}
[data-urgent=true]{color:#f1bd96!important}
.coach-route{height:12px;line-height:12px;font-size:8px!important;letter-spacing:0;color:#a5c0b2!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.coach[data-timed=false] .cue-track:after,.coach[data-timed=false] .track:after{opacity:0}
.coach[data-timed=false] .cue-track>span{display:none}
.coach[data-timed=false] .cue-rail,.coach[data-timed=false] .track{opacity:.35}
.coach[data-kind=release]{border-color:#768d91;background:#243638}
.pad[data-via=true] .link-badge{opacity:.6}
.app .hud #combo{margin-left:10px}
.app .coach{min-height:79px}
.app .coach-copy{flex:1;overflow:hidden}
.app .coach-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .cue-rail{width:210px}
.app .arena{height:clamp(250px,calc(100dvh - 480px),480px)}
body[data-screen=home] .app .arena{height:clamp(430px,calc(100dvh - 175px),650px)}
body[data-screen=home] .deck{display:none}
.app .home-copy{padding:35px 0 24px 32px;width:430px;max-width:60%}
.app .home-copy h1{font-size:57px;margin:15px 0}
.app .home-copy p{line-height:1.6;margin-bottom:18px}
.home-sequence{font-size:9px;color:#bed0ad;margin:8px 0 14px;max-width:300px;line-height:1.5}
.home-control{display:flex;align-items:center;gap:6px;color:#a7bda1;font-size:10px;margin:10px 0 15px;cursor:pointer}
.home-control input{accent-color:#c7e6a5}
.app .home-actions{margin-top:15px}
.app .home .primary,.app .home .secondary{padding:11px 13px}
.app .home .practice-button{padding:9px 0}
.app .homeRecord{font-size:10px}
@media(max-width:1000px){.app .home-copy{padding:30px 0 22px 26px;max-width:66%}.app .home-copy h1{font-size:49px}.app .cue-rail{width:165px}.app .arena{height:340px}}
@media(max-width:600px){.app .home-copy{padding:30px 18px;max-width:100%;width:100%}.app .home-copy h1{font-size:49px}.app .home-copy p{font-size:12px}body[data-screen=home] .app .arena{height:500px}.app .home select{width:100%}.app .home-caption{display:none}.app .hud #combo{display:block;margin:3px 0 0;width:max-content;font-size:7px;padding:2px 5px}.app .hud{height:67px}.app .beat-box small{display:none}.app .coach-copy{flex:auto;width:100%}.app .cue-rail{width:100%}.app .coach-copy strong{font-size:15px}.app .arena{height:380px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.app #feedback{top:42px;left:auto;right:24px;font-size:14px;max-width:calc(100% - 225px);text-align:right}
.app .arena:has(.comic:not([hidden])) #feedback{opacity:0!important}
@media(max-width:600px){.app #feedback{right:14px;max-width:65%}}

.move-pages{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 12px}.move-pages button{font-size:11px;padding:7px 12px}.move-pages button[aria-pressed=true]{background:#f8aaca;color:#172036;border-color:#f8aaca}.move-pages small{font-size:10px;opacity:.7}

.keyboard[data-page="1"] .row-pads{grid-template-columns:repeat(5,minmax(0,1fr))}.keyboard[data-page="1"] .key-row{align-items:flex-start}.keyboard[data-page="1"] .row-label{padding-top:12px}.keyboard[data-page="1"] .key-row .pad{height:48px}.keyboard[data-page="1"] .key-row .pad strong{display:block;margin:3px 0 0;white-space:normal}.keyboard[data-page="1"] .pad[data-move="backflip"]{grid-column:1/-1;height:32px}.keyboard[data-page="1"] .pad[data-move="backflip"] strong{display:inline;margin-left:10px}