:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{color:#f2f2f2;background:#0e0e14;margin:0;padding:1.5rem;font-family:system-ui,sans-serif;line-height:1.6}main{max-width:60rem;margin:0 auto}a{color:#8ab4ff}h1{margin-bottom:.25rem}.hint{color:#b7b7c4;margin-top:0}.difficulty{gap:.5rem;margin-top:1rem;display:flex}.difficulty button{color:#f2f2f2;cursor:pointer;background:#1c1c26;border:1px solid #3a3a48;border-radius:999px;padding:.5rem 1rem;font-size:.95rem}.difficulty button[aria-pressed=true]{background:#2a3a5c;border-color:#8ab4ff}.lanes{border-radius:.75rem;gap:.75rem;height:min(60vh,32rem);margin-top:1rem;transition:box-shadow .2s ease-out;display:flex}.lanes.chord{box-shadow:0 0 3rem .75rem #ffffff1f}.lane{flex-direction:column;flex:1;min-width:0;transition:opacity .2s ease-out,flex-basis .2s ease-out;display:flex}.lane.inactive{opacity:0;pointer-events:none;flex:0 0;margin:0}.lane.inactive .track,.lane.inactive button{visibility:hidden}.track{background:hsl(var(--lane-hue) 60% 14%);border-bottom:3px solid hsl(var(--lane-hue) 70% 45%);border-radius:.5rem;flex:1;transition:box-shadow .15s ease-out;position:relative;overflow:hidden}.note{background:hsl(var(--lane-hue) 85% 65%);width:2.25rem;height:2.25rem;box-shadow:0 0 .75rem hsl(var(--lane-hue) 85% 65% / 70%);animation:fall var(--fall-duration,2.6s) linear forwards;border-radius:50%;margin-left:-1.125rem;position:absolute;top:-2.5rem;left:50%}.note--long{border-radius:1.125rem;height:6.5rem}@keyframes fall{to{top:100%}}.lane button{color:#0e0e14;background:hsl(var(--lane-hue) 80% 70%);cursor:pointer;touch-action:manipulation;border:none;border-radius:.5rem;min-height:3.5rem;margin-top:.75rem;font-size:1.25rem;font-weight:700;transition:transform 80ms ease-out}.lane button:active{transform:scale(.95)}.lane.held .track{box-shadow:inset 0 0 1.5rem .35rem hsl(var(--lane-hue) 85% 65% / 80%)}@media (width<=480px){.lanes{gap:.4rem;height:55vh}.lane button{min-height:3rem;font-size:1rem}}