:root {
  color-scheme:dark;
  --bg:#071814;
  --panel:#172522;
  --cream:#f4eddf;
  --aqua:#28dce0;
  --pink:#ffc8f7;
  --mint:#91e5ba;
  --line:#536661;
  font-family:'IBM Plex Sans',sans-serif;
  color:var(--cream);
  background:var(--bg)
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  min-width:320px
}
button,select,input {
  font:inherit
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
button,select,summary {
  min-height:44px
}
button {
  border:1px solid var(--line);
  border-radius:12px;
  background:transparent;
  color:inherit;
  padding:10px 16px;
  font-weight:600;
  cursor:pointer;
  touch-action:manipulation
}
button:hover {
  border-color:var(--aqua)
}
button:disabled {
  opacity:.5;
  cursor:default
}
button.accent,button[aria-pressed=true] {
  background:var(--aqua);
  color:#071814;
  border-color:var(--aqua)
}
a {
  color:inherit;
  text-underline-offset:5px
}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid var(--aqua);
  outline-offset:4px
}
[hidden] {
  display:none!important
}
h1,h2,strong,#activityTitle {
  font-family:'Bricolage Grotesque',sans-serif
}
p {
  line-height:1.5
}
h1 {
  font-size:clamp(42px,6vw,76px);
  line-height:1.02;
  letter-spacing:-.04em;
  margin:16px 0
}
button,a {
  user-select:none
}
.app-header {
  max-width:1240px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 24px;
  border-bottom:1px solid #30453f;
  min-height:80px
}
#homeLink {
  min-height:44px;
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-weight:700
}
#homeLink span {
  font-weight:400;
  font-size:15px
}
#activityTitle {
  font-size:22px;
  font-weight:700
}
.header-actions {
  display:flex;
  gap:8px;
  margin-left:auto
}
#stop {
  color:var(--pink)
}
main {
  max-width:1180px;
  margin:auto;
  padding:32px 24px
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
  font-size:14px;
  color:var(--aqua);
  margin:0
}
.intro {
  font-size:18px;
  margin:16px 0 28px;
  color:#c6d6cf
}
.activities {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.activity-card {
  text-align:left;
  background:var(--cream);
  color:#0b2b23;
  border:0;
  border-radius:22px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:24px;
  transition:transform .18s
}
.activity-card:hover {
  transform:translateY(-4px)
}
.beat-card {
  background:var(--pink)
}
.lick-card {
  background:var(--mint)
}
.card-copy {
  display:flex;
  flex-direction:column;
  gap:10px
}
.card-copy strong {
  font-size:32px;
  line-height:1.05
}
.card-copy>span {
  font-size:17px;
  font-weight:400;
  line-height:1.4
}
.card-copy b {
  margin-top:10px;
  font-size:16px;
  text-decoration:underline;
  text-underline-offset:4px
}
.illustration {
  height:125px;
  display:flex;
  position:relative;
  align-self:center
}
.mini-keys {
  gap:3px;
  width:190px;
  background:#0b2b23;
  border:7px solid #0b2b23;
  border-radius:10px;
  transform:rotate(-6deg)
}
.mini-keys i {
  background:#fff;
  width:20%;
  border-radius:0 0 4px 4px;
  position:relative
}
.mini-keys i:nth-child(1):after,.mini-keys i:nth-child(2):after,.mini-keys i:nth-child(4):after {
  content:'';
  position:absolute;
  left:72%;
  top:0;
  background:#0b2b23;
  width:65%;
  height:58%;
  z-index:1;
  border-radius:0 0 4px 4px
}
.mini-keys i:nth-child(3) {
  background:var(--aqua)
}
.mini-pads {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:155px;
  transform:rotate(5deg)
}
.mini-pads i {
  border-radius:9px;
  background:#0b2b23;
  color:var(--pink);
  display:grid;
  place-items:center;
  font-size:12px;
  font-style:normal
}
.mini-pads i:first-child {
  color:#0b2b23;
  background:#fff
}
.mini-notes {
  width:160px;
  border-bottom:9px solid #0b2b23;
  justify-content:space-around;
  overflow:hidden
}
.mini-notes i {
  background:#0b2b23;
  border-radius:8px;
  width:22px;
  height:35px;
  position:relative;
  top:12px
}
.mini-notes i:nth-child(2) {
  top:45px
}
.mini-notes i:nth-child(3) {
  top:28px
}
.mini-notes i:nth-child(4) {
  top:65px
}
.mini-notes span {
  position:absolute;
  bottom:-1px;
  letter-spacing:9px;
  font-size:24px
}
.studio-link {
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin:24px 0;
  font-size:15px;
  color:#b9ccc3
}
.studio-link a {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:var(--cream);
  font-weight:600
}
.tutorial {
  padding:16px 20px;
  background:var(--cream);
  color:#0b2b23;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px
}
.tutorial strong {
  font-size:19px
}
.tutorial p {
  margin:6px 0 0;
  max-width:650px
}
.tutorial-actions {
  display:flex;
  gap:8px;
  flex-shrink:0
}
.tutorial button {
  border-color:#536661
}
.tutorial-target {
  outline:3px solid var(--pink);
  outline-offset:3px
}
.instrument {
  background:var(--panel);
  border:2px solid #3c524b;
  border-radius:20px;
  overflow:hidden
}
.instrument-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:14px 20px
}
.instrument-top p {
  margin:0;
  max-width:640px;
  font-size:17px
}
.volume {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px
}
.volume input {
  width:90px;
  min-height:44px;
  accent-color:var(--aqua)
}
.controls {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 20px
}
.controls span {
  font-size:15px
}
#withSong {
  margin-left:auto
}
#songArea {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:14px 20px
}
select {
  background:#071814;
  color:var(--cream);
  border:1px solid #637870;
  border-radius:10px;
  padding:8px;
  max-width:100%;
  font-size:16px
}
#songProgressRow {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  font-size:14px
}
progress {
  width:100%;
  height:6px;
  accent-color:var(--aqua)
}
.lesson-stages {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:12px 20px
}
.practice-speed {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:8px 20px 12px;
  font-size:14px
}
.keyboard {
  position:relative;
  height:230px;
  background:#050e0c;
  border-top:6px solid #050e0c;
  touch-action:none;
  overflow:hidden
}
.piano-key {
  position:absolute;
  top:0;
  min-width:0;
  border-radius:0 0 7px 7px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  padding:0 0 18px;
  font-weight:700;
  touch-action:none
}
.piano-key.white {
  height:100%;
  background:var(--cream);
  color:#071814;
  border:1px solid #172522;
  z-index:1
}
.piano-key.black {
  height:61%;
  background:#0b1713;
  color:#fff;
  border:1px solid #536661;
  z-index:2;
  min-width:44px;
  padding-bottom:14px
}
.piano-key.active {
  background:var(--aqua)!important;
  color:#071814!important
}
.piano-key.target {
  box-shadow:inset 0 0 0 5px var(--aqua)
}
.piano-key.demo {
  background:var(--pink)!important;
  color:#071814!important
}
.note-lane {
  height:150px;
  position:relative;
  background:#081d17;
  overflow:hidden
}
.lane-hint {
  position:absolute;
  top:10px;
  left:12px;
  right:12px;
  font-size:14px;
  color:#b9ccc3;
  text-align:center
}
.hit-line {
  position:absolute;
  bottom:6px;
  height:4px;
  background:var(--aqua);
  width:100%;
  box-shadow:0 0 12px #28dce077
}
.falling-note {
  position:absolute;
  background:var(--pink);
  color:#071814;
  border-radius:6px;
  height:25px;
  min-width:24px;
  text-align:center;
  font-size:13px;
  font-weight:700;
  line-height:25px;
  will-change:transform
}
.desktop-hint {
  text-align:center;
  color:#b9ccc3;
  font-size:14px;
  margin:10px
}
.beat-start {
  display:flex;
  gap:10px;
  margin:16px 20px
}
.beat-start button {
  flex:1
}
.beat-meter {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:16px 20px;
  font-size:15px
}
#beatDots {
  display:flex;
  gap:7px
}
#beatDots i {
  width:12px;
  height:12px;
  border-radius:50%;
  background:#536661
}
#beatDots i.lit {
  background:var(--aqua)
}
.pads {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:16px 20px
}
.pad {
  height:130px;
  background:var(--pink);
  color:#071814;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:26px;
  border:0;
  border-bottom:6px solid #855d7e;
  border-radius:18px;
  touch-action:none
}
.pad:nth-child(2) {
  background:var(--aqua);
  border-color:#177579
}
.pad:nth-child(3) {
  background:var(--mint);
  border-color:#497d61
}
.pad:nth-child(4) {
  background:var(--cream);
  border-color:#91856a
}
.pad.active {
  transform:translateY(3px);
  border-bottom-width:2px;
  box-shadow:0 0 20px #28dce077
}
#extraPads .pad {
  height:68px;
  font-size:18px
}
details {
  margin:16px 20px
}
summary {
  display:flex;
  align-items:center;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:5px
}
.tempo {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px
}
.tempo input {
  min-height:44px;
  accent-color:var(--aqua)
}
.feedback {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:70px;
  margin:8px 20px
}
.feedback p {
  margin:0;
  font-size:15px;
  color:#d1e6db
}
.characters {
  display:flex;
  flex-shrink:0;
  align-items:flex-end
}
.characters img {
  width:34px;
  height:52px;
  object-fit:contain
}
.characters img:last-child {
  width:34px;
  height:36px
}
.characters.react {
  animation:hop .3s ease-out
}
.reduced .note-lane {
  height:54px
}
.reduced .falling-note {
  display:none
}
.reduced .characters img:last-child {
  display:none
}
@keyframes hop {
  50% {
    transform:translateY(-5px)
  }
}
@media(max-width:700px) {
  .app-header {
    padding:8px 12px;
    gap:10px;
    min-height:64px
  }
  #activityTitle {
    font-size:19px
  }
  .header-actions {
    gap:5px
  }
  .app-header button {
    padding:8px 12px
  }
  main {
    padding:24px 16px
  }
  .eyebrow {
    font-size:13px
  }
  h1 {
    font-size:46px
  }
  .intro {
    font-size:17px;
    margin-bottom:20px
  }
  .activities {
    grid-template-columns:1fr;
    gap:12px
  }
  .activity-card {
    flex-direction:row;
    gap:18px;
    padding:18px 16px;
    align-items:center;
    min-height:142px;
    border-radius:18px
  }
  .illustration {
    width:83px;
    height:78px;
    flex-shrink:0
  }
  .mini-keys {
    border-width:4px;
    gap:2px
  }
  .mini-pads {
    gap:5px
  }
  .mini-pads i {
    font-size:8px
  }
  .mini-notes i {
    width:12px;
    height:20px;
    top:0
  }
  .mini-notes i:nth-child(2) {
    top:20px
  }
  .mini-notes i:nth-child(3) {
    top:12px
  }
  .mini-notes i:nth-child(4) {
    top:34px
  }
  .mini-notes span {
    font-size:15px;
    letter-spacing:2px
  }
  .card-copy {
    gap:5px
  }
  .card-copy strong {
    font-size:26px
  }
  .card-copy>span {
    font-size:16px
  }
  .card-copy b {
    font-size:14px;
    margin-top:4px
  }
  .studio-link {
    gap:0;
    text-align:center;
    flex-direction:column;
    margin:16px 0
  }
  .in-activity main {
    padding:12px 4px
  }
  .instrument {
    border-radius:14px
  }
  .instrument-top {
    margin:10px;
    gap:6px;
    align-items:flex-start;
    flex-direction:column
  }
  .instrument-top p {
    font-size:16px
  }
  .volume {
    align-self:flex-end;
    height:32px
  }
  .volume input {
    width:100px
  }
  .tutorial {
    margin:0 8px 10px;
    padding:12px;
    gap:10px;
    flex-wrap:wrap
  }
  .tutorial strong {
    font-size:17px
  }
  .tutorial p {
    font-size:15px
  }
  .tutorial-actions {
    width:100%
  }
  .tutorial button {
    flex:1;
    padding:8px
  }
  .controls,#songArea,.practice-speed,.beat-start,.beat-meter,.pads,details,.feedback {
    margin-left:10px;
    margin-right:10px
  }
  .controls button {
    padding:8px 10px
  }
  #withSong {
    margin-left:0;
    flex-basis:100%
  }
  #songArea {
    gap:8px
  }
  #songArea select {
    flex:1;
    min-width:0;
    width:210px
  }
  .lesson-stages {
    margin:10px;
    gap:6px
  }
  .lesson-stages button {
    padding:8px 5px;
    font-size:14px;
    line-height:1.3
  }
  .practice-speed {
    font-size:13px;
    gap:6px
  }
  .practice-speed button {
    padding:8px 10px;
    font-size:14px
  }
  .keyboard {
    height:200px
  }
  .piano-key {
    padding-bottom:16px
  }
  .piano-key.black {
    font-size:13px
  }
  .note-lane {
    height:120px
  }
  .lane-hint {
    font-size:12px
  }
  .desktop-hint {
    display:none
  }
  .pads {
    gap:10px
  }
  .pad {
    height:105px;
    font-size:25px
  }
  .feedback {
    min-height:58px
  }
  .feedback p {
    font-size:14px
  }
  .characters img {
    height:44px;
    width:28px
  }
  .characters img:last-child {
    width:28px;
    height:30px
  }
  #loopControls {
    display:grid;
    grid-template-columns:repeat(3,1fr)
  }
  #loopControls button {
    font-size:14px;
    padding:8px 4px
  }
  .beat-meter {
    font-size:14px
  }
  #beatDots {
    gap:5px
  }
  #beatDots i {
    width:10px;
    height:10px
  }
}
@media(max-height:550px) and (orientation:landscape) {
  main {
    padding-top:12px
  }
  .keyboard {
    height:140px
  }
  .note-lane {
    height:65px
  }
  .pads {
    grid-template-columns:repeat(4,1fr)
  }
  .pad {
    height:90px
  }
  .instrument-top {
    flex-direction:row
  }
  .studio-link {
    margin:6px
  }
  .activities {
    grid-template-columns:repeat(3,1fr)
  }
  .activity-card {
    flex-direction:column
  }
  .illustration {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
@media(max-width:700px) {
  html {
    scrollbar-width:none
  }
  html::-webkit-scrollbar {
    width:0
  }
  .app-header {
    position:sticky;
    top:0;
    z-index:10;
    background:var(--bg)
  }
}