#home-view, #view { display: contents; }
#home-view[hidden], #view[hidden] { display: none; }

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  background: var(--color-paper);
}
.topbar__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-lg);
  min-height: 72px;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--display-weight);
  letter-spacing: -0.04em;
  line-height: 1;
  text-decoration: none;
}
.brand:hover { color: var(--color-accent); }
.brand--large { font-size: clamp(3rem, 6vw, 5.5rem); margin: 0; }
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-lg);
  margin-inline-start: auto;
}
.nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-muted);
  transition: color var(--dur-micro) var(--ease-out);
}
.nav a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: 0 var(--space-sm);
  border: var(--rule-bar) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: transparent;
  font-weight: 700;
}
.nav-toggle .icon { transition: transform var(--dur-short) var(--ease-out); }
.nav-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.midi-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 40px;
  padding: 0 var(--space-sm);
  border: var(--rule-bar) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.midi-status:hover { background: var(--color-paper-2); color: var(--color-ink); }
.midi-status[data-state="connected"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.midi-status[data-state="connected"]:hover { background: var(--color-accent-2); }

.hero {
  display: grid;
  align-items: center;
  min-height: calc(100dvh - 72px);
  padding-block: var(--space-xl);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--space-2xl);
}
.hero__copy { display: grid; gap: var(--space-lg); align-content: center; }
.hero__lead { max-width: 24ch; font-size: var(--text-lead); color: var(--color-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.hero__note { color: var(--color-muted); font-size: var(--text-sm); }
.hero__status { color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 700; }

.instrument {
  border-radius: var(--radius-card);
  background: var(--color-paper-3);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}
.instrument__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-xs) var(--space-md);
}
.instrument__title { font-weight: 700; }
.instrument__readout { color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 700; }
.instrument__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding-top: var(--space-sm);
}
.instrument__hint { color: var(--color-muted); font-size: var(--text-xs); max-width: 42ch; }
.piano-mount { width: 100%; }

.course__progress {
  display: grid;
  grid-template-columns: auto minmax(120px, 240px);
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}
.course__count { color: var(--color-muted); font-size: var(--text-sm); font-weight: 700; }
.course-map { list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.course-row { border-bottom: var(--rule-hair) solid var(--color-rule); }
.course-row__link {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 140px 24px;
  align-items: center;
  gap: var(--space-lg);
  min-height: 112px;
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-control);
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out);
}
.course-row__link:hover { background: var(--color-paper-2); }
.course-row__num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums lining-nums;
}
.course-row__body { display: grid; gap: var(--space-2xs); }
.course-row__title { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); }
.course-row__desc { color: var(--color-muted); font-size: var(--text-sm); }
.course-row__meta { display: grid; gap: var(--space-2xs); justify-items: end; color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.course-row__meta .meter { width: 100px; }
.course-row__icon { color: var(--color-muted); }
.course-row__link:hover .course-row__icon { color: var(--color-accent); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--space-2xl);
}
.split__copy { display: grid; gap: var(--space-md); align-content: center; }
.split__copy .plain-list { margin-top: var(--space-xs); }
.split__copy .btn { justify-self: start; margin-top: var(--space-xs); }

.demo-panel {
  border-radius: var(--radius-panel);
  background: var(--color-paper-2);
  color: var(--color-ink);
  padding: var(--space-lg);
}
.demo-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0 var(--space-2xs) var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.demo-panel__head strong { color: var(--color-ink); }
.demo-panel__caption { padding: var(--space-sm) var(--space-2xs) 0; color: var(--color-muted); font-size: var(--text-xs); }
.demo-roll {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);
  min-height: 300px;
}
.demo-bar {
  position: relative;
  border-radius: var(--radius-card-inner);
  background: var(--color-paper-3);
  transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.demo-bar.is-playing { background: var(--color-paper-4); box-shadow: inset 0 0 0 3px var(--color-accent); }
.demo-bar__chord {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking-display);
}
.demo-note {
  position: absolute;
  left: 18%;
  width: 64%;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  top: var(--top);
}
.demo-note--bass { background: var(--color-muted); }

.midi-band { background: var(--color-paper-2); color: var(--color-ink); }
.split--midi { align-items: start; }
.midi-panel {
  border-radius: var(--radius-card);
  background: var(--color-paper-3);
  color: var(--color-ink);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-md);
}
.midi-panel__row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  padding-bottom: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.midi-panel__row .icon { color: var(--color-accent); margin-top: var(--space-3xs); }
.midi-panel__label { color: var(--color-muted); font-size: var(--text-xs); }
.midi-panel__value { font-weight: 700; }
.midi-panel .small { color: var(--color-muted); }
.nowrap { white-space: nowrap; }

.method { background: var(--color-paper-3); }
.statement { display: grid; gap: var(--space-lg); }
.statement h2 { font-size: clamp(2.4rem, 5.6vw, 4.5rem); max-width: 17ch; }
.statement .lead { max-width: 46ch; }
.statement .btn { justify-self: start; }

.footer {
  padding-block: var(--section-gap-s) var(--space-lg);
  background: var(--color-paper);
  color: var(--color-ink);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.footer__brand { display: grid; gap: var(--space-md); align-content: start; }
.footer__line { max-width: 42ch; color: var(--color-muted); }
.footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs) var(--space-lg);
  align-content: start;
}
.footer__links a { color: var(--color-muted); font-size: var(--text-sm); text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; white-space: nowrap; }
.footer__links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.footer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.lesson-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
  padding-block: var(--space-xl) var(--space-2xl);
}
.lesson-side {
  position: sticky;
  top: 96px;
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  padding-right: var(--space-md);
}
.lesson-side__back { display: inline-flex; margin-bottom: var(--space-md); }
.lesson-side__progress { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
.lesson-side__progress p { color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.toc { display: grid; gap: var(--space-lg); }
.toc__module { display: grid; gap: var(--space-2xs); }
.toc__title { color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; }
.toc__list { list-style: none; display: grid; gap: 1px; }
.toc__link {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs);
  min-height: 40px;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-input);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}
.toc__link:hover { background: var(--color-paper-2); color: var(--color-ink); }
.toc__link[aria-current="page"] { background: var(--color-paper-2); color: var(--color-ink); font-weight: 700; }
.toc__mark { width: 16px; height: 16px; display: grid; place-items: center; color: var(--color-rule); }
.toc__mark .icon { width: 15px; height: 15px; }
.toc__link[data-done="true"] .toc__mark { color: var(--color-accent); }
.toc__link[aria-current="page"] .toc__mark { color: var(--color-accent); }

.lesson-mobile-bar { display: none; }
.lesson-mobile-meter { display: none; }
.toc-mobile { display: none; margin-bottom: var(--space-lg); }
.toc-mobile .details { background: var(--color-paper-2); border: 0; border-radius: var(--radius-card-inner); padding: var(--space-sm) var(--space-md); }
.toc-mobile .toc { margin-top: var(--space-sm); }

.lesson { max-width: 900px; }
.lesson__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.lesson__meta { color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.lesson__goal {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-card-inner);
  background: var(--color-paper-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.lesson__goal strong { color: var(--color-ink); }
.lesson__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.prose { display: grid; gap: var(--space-md); max-width: 65ch; }
.prose h2 { font-size: clamp(1.55rem, 2.2vw, 2rem); max-width: 24ch; }
.prose p { color: var(--color-muted); }
.prose ul { display: grid; gap: var(--space-xs); padding-inline-start: 1.1em; color: var(--color-muted); }
.prose li::marker { color: var(--color-accent); }
.prose strong { color: var(--color-ink); }

.widget {
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-md);
}
.widget__head { display: grid; gap: var(--space-2xs); }
.widget__head h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
.widget__intro { color: var(--color-muted); max-width: 65ch; font-size: var(--text-sm); }
.widget__mount { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }

.tip {
  display: grid;
  gap: var(--space-2xs);
  max-width: 65ch;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-small);
  background: var(--color-paper-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.tip strong { color: var(--color-ink); }

.midi-note {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-small);
  background: var(--color-paper-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.midi-note .icon { color: var(--color-accent); margin-top: var(--space-3xs); }
.midi-note strong { color: var(--color-ink); }

.quiz {
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-lg);
}
.quiz__head { display: grid; gap: var(--space-2xs); }
.quiz__head h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.quiz__question { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-sm); }
.quiz__legend { padding: 0; font-weight: 700; font-size: var(--text-md); line-height: 1.35; }
.quiz__options { display: grid; gap: var(--space-xs); }
.option { position: relative; display: block; }
.option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.option span {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-bar) solid var(--color-rule);
  border-radius: var(--radius-input);
  color: var(--color-muted);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.option span:hover { background: var(--color-paper-3); color: var(--color-ink); }
.option:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.option input:checked + span { border-color: var(--color-accent); background: var(--color-paper-3); color: var(--color-ink); }
.option.is-correct span { border-color: var(--color-success); background: var(--color-success); color: var(--color-success-ink); }
.option.is-wrong span { border-color: var(--color-error); background: var(--color-error); color: var(--color-error-ink); }
.option.is-correct span:hover, .option.is-wrong span:hover { background: inherit; }
.quiz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.quiz__feedback { min-height: 1lh; color: var(--color-muted); font-size: var(--text-sm); }
.quiz__feedback[data-tone="error"] { color: var(--color-error); }
.quiz__feedback[data-tone="ok"] { color: var(--color-accent); font-weight: 700; }
.quiz__result {
  display: none;
  padding: var(--space-md);
  border-radius: var(--radius-small);
  background: var(--color-paper-2);
  color: var(--color-ink);
}
.quiz__result.is-visible { display: block; }

.lesson__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.lesson__foot .btn { justify-content: space-between; padding-inline: var(--space-md); font-size: var(--text-sm); text-align: left; white-space: normal; }
.lesson__foot .btn--next { justify-self: end; width: 100%; }
.lesson__foot .btn--prev { width: 100%; }

.studio {
  padding-block: var(--space-xl) var(--space-2xl);
  display: grid;
  gap: var(--space-xl);
}
.studio__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.studio__head h1 { font-size: clamp(2.2rem, 4.4vw, 3.75rem); }
.studio__head .lead { margin-top: var(--space-xs); }
.studio__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.studio__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-lg);
  align-items: start;
}
.studio__main { display: grid; gap: var(--space-md); min-width: 0; }
.studio__side { display: grid; gap: var(--space-md); }
.studio-panel {
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  color: var(--color-ink);
  padding: var(--space-md);
  min-width: 0;
}
.studio-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.studio-panel__head h2 { font-size: var(--text-title); }
.studio-side-card {
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  color: var(--color-ink);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}
.studio-side-card h2 { font-size: var(--text-title); }
.studio-side-card .small { color: var(--color-muted); }
.studio-side-card .status-line { min-height: 1lh; }
.studio__keyboard { padding: var(--space-sm); }
.keyboard-controls { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.keyboard-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radius-card-inner); }
.studio-hint { color: var(--color-muted); font-size: var(--text-xs); }
.studio-transport { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.studio-transport .bpm { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.studio-transport .bpm output { min-width: 4ch; font-variant-numeric: tabular-nums; font-weight: 700; }

@media (min-width: 60.01rem) and (max-width: 85rem) {
  .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl); }
  .pkey--black .pkey__label { display: none; }
}

@media (max-width: 60rem) {
  .topbar__inner { grid-template-columns: 1fr auto auto; }
  .nav-toggle { display: inline-flex; grid-column: 2; grid-row: 1; justify-self: end; }
  .midi-status { grid-column: 3; grid-row: 1; justify-self: end; }
  .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-md);
    padding-bottom: var(--space-sm);
  }
  .js .nav { display: none; }
  .js .nav.is-open { display: flex; }
  .brand { font-size: 1.55rem; }
  .hero { min-height: auto; padding-block: var(--space-xl) var(--space-2xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero__copy { max-width: 36rem; }
  .hero__lead { max-width: 30ch; }
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .split__copy { max-width: 38rem; }
  .course-row__link { grid-template-columns: 48px minmax(0, 1fr) 120px 24px; gap: var(--space-md); min-height: 104px; }
  .course-row__num { font-size: 1.7rem; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__bottom { grid-template-columns: minmax(0, 1fr); }
  .lesson-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-lg) var(--space-2xl); }
  .lesson-side { display: none; }
  .lesson-mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
  .lesson-mobile-bar .small { color: var(--color-muted); font-size: var(--text-xs); }
  .lesson-mobile-meter { display: block; margin-block: var(--space-xs) var(--space-lg); }
  .toc-mobile { display: block; }
  .studio__layout { grid-template-columns: minmax(0, 1fr); }
  .studio__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .topbar__inner { gap: var(--space-xs); }
  .midi-status span { display: none; }
  .midi-status { width: 44px; justify-content: center; padding: 0; }
  .hero h1 { font-size: var(--text-display); }
  .hero__actions { align-items: stretch; }
  .hero__actions .btn { flex: 1 1 100%; }
  .instrument { padding: var(--space-md); }
  .instrument__head { align-items: start; flex-direction: column; gap: var(--space-2xs); }
  .instrument__foot { align-items: start; flex-direction: column; }
  .course__progress { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .course-row__link {
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    gap: var(--space-xs);
    padding-block: var(--space-md);
  }
  .course-row__meta { grid-column: 2 / 3; justify-items: start; grid-row: 2; }
  .course-row__meta .meter { width: 100%; }
  .course-row__icon { grid-column: 3; grid-row: 1 / 3; }
  .demo-roll { min-height: 240px; }
  .footer__links { grid-template-columns: minmax(0, 1fr); }
  .lesson__foot { grid-template-columns: minmax(0, 1fr); }
  .studio__head { align-items: start; }
  .studio__actions { width: 100%; }
  .studio__actions .btn { flex: 1 1 auto; }
  .studio__side { grid-template-columns: minmax(0, 1fr); }
}

.quiz__explain { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-paper-3); color: var(--color-muted); font-size: var(--text-sm); }
.quiz__explain[hidden] { display: none; }
.quiz__question.is-missing { outline: 2px solid var(--color-error); outline-offset: var(--space-xs); border-radius: var(--radius-input); }
.quiz__result .btn { justify-self: start; margin-top: var(--space-sm); }
.quiz__result[hidden] { display: none; }


.roll-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-xs); }
.roll-pager .seg { margin-inline-start: auto; }

@media (pointer: coarse) {
  .instrument__hint { display: none; }
}

@media (max-width: 60rem) {
  .keyboard-scroll .piano { min-width: 560px; }
  .studio__keyboard .piano { --piano-height: 150px; }
}

@media (max-width: 40rem) {
  .roll__labels, .roll__grid { height: 540px; }
}

.roll-pager[hidden] { display: none; }

.drum-band { background: var(--color-paper-3); color: var(--color-ink); }
.course-map--compact .course-row__link { min-height: 88px; }
.course-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-top: var(--space-lg); }
.drums-page .hero { min-height: calc(100dvh - 72px); }
.drum-instrument { display: grid; gap: var(--space-sm); }
.drum-instrument .instrument__head { padding-bottom: 0; }
.drums-page .band .split { align-items: start; }
.beat-lab { padding-block: var(--space-xl) var(--space-2xl); display: grid; gap: var(--space-xl); }
.beat-lab__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.beat-lab__head h1 { font-size: clamp(2.2rem, 4.4vw, 3.75rem); }
.beat-lab__head .lead { margin-top: var(--space-xs); }
.beat-lab__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-lg); align-items: start; }
.beat-lab__layout .studio-side-card { min-width: 0; }

@media (max-width: 60rem) {
  .drums-page .hero { min-height: auto; }
  .beat-lab__layout { grid-template-columns: minmax(0, 1fr); }
}


@media (max-width: 60rem) {
  .drum-game__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .drum-game__controls .field { min-width: 0; }
  .tempo-row input[type="range"] { width: 100%; }
}

@media (max-width: 40rem) {
  .drum-game__controls { grid-template-columns: minmax(0, 1fr); }
}


@media (min-width: 60.01rem) {
  .drums-page .drum-instrument .drum-pad { min-height: 172px; }
}

.beat-cta-band { background: var(--color-paper-2); color: var(--color-ink); }
.beat-preview { display: grid; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-3); }
.beat-preview__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-sm); align-items: center; }
.beat-preview__row > span { color: var(--color-muted); font-size: var(--text-xs); }
.beat-preview__cells { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-2xs); }
.beat-preview__cell { min-height: 24px; border-radius: 4px; background: var(--color-paper-4); }
.beat-preview__cell.is-on { background: var(--color-accent); }

.guitar-band { background: var(--color-paper-2); color: var(--color-ink); }
.guitar-page .hero { min-height: calc(100dvh - 72px); }
.guitar-instrument { display: grid; gap: var(--space-sm); }
.guitar-instrument .instrument__head { padding-bottom: 0; }
.guitar-page .fretboard-cell { min-height: 50px; }
.fretboard-quick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-xs); }
.guitar-tracks-band { background: var(--color-paper-3); color: var(--color-ink); }
.guitar-tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.guitar-track { display: grid; gap: var(--space-xs); align-content: start; min-height: 220px; padding: var(--space-lg); border-radius: var(--radius-panel); background: var(--color-paper-2); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.guitar-track:hover { background: var(--color-paper-4); }
.guitar-track__num { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--display-weight); }
.guitar-track h3 { margin-top: auto; }
.guitar-track p { color: var(--color-muted); font-size: var(--text-sm); }
.guitar-demo .studio-panel { min-width: 0; }

@media (max-width: 60rem) {
  .guitar-page .hero { min-height: auto; }
  .guitar-tracks { grid-template-columns: minmax(0, 1fr); }
  .guitar-track { min-height: 160px; }
  .guitar-page .fretboard-cell { min-height: 36px; }
}

.glossary-page { padding-block: var(--space-xl) var(--space-2xl); display: grid; gap: var(--space-xl); }
.glossary-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.glossary-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.75rem); }
.glossary-head .lead { margin-top: var(--space-xs); }
.glossary-search { display: grid; gap: var(--space-2xs); max-width: 42rem; color: var(--color-muted); font-size: var(--text-sm); font-weight: 700; }
.glossary-search input { min-height: 48px; padding: 0 var(--space-md); border: var(--rule-bar) solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-md); font-weight: 500; outline: 2px solid transparent; outline-offset: -3px; }
.glossary-search input:focus-visible { outline-color: var(--color-focus); }
.glossary-groups { display: grid; gap: var(--space-2xl); }
.glossary-group h2 { font-size: var(--text-section); margin-bottom: var(--space-sm); }
.glossary-group[hidden], .glossary-term[hidden] { display: none; }
.glossary-list { margin: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.glossary-term { display: grid; grid-template-columns: minmax(140px, 240px) minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.glossary-term dt { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.15; }
.glossary-term dd { margin: 0; color: var(--color-muted); max-width: 65ch; }
@media (max-width: 40rem) {
  .glossary-term { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .glossary-head { align-items: start; }
}

.glossary-page { padding-block: var(--space-xl) var(--space-2xl); display: grid; gap: var(--space-xl); }
.glossary-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.glossary-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.75rem); }
.glossary-head .lead { margin-top: var(--space-xs); }
.glossary-search { display: grid; gap: var(--space-2xs); max-width: 42rem; color: var(--color-muted); font-size: var(--text-sm); font-weight: 700; }
.glossary-search input { min-height: 48px; padding: 0 var(--space-md); border: var(--rule-bar) solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-md); font-weight: 500; outline: 2px solid transparent; outline-offset: -3px; }
.glossary-search input:focus-visible { outline-color: var(--color-focus); }
.glossary-groups { display: grid; gap: var(--space-2xl); }
.glossary-group h2 { font-size: var(--text-section); margin-bottom: var(--space-sm); }
.glossary-group[hidden], .glossary-term[hidden] { display: none; }
.glossary-list { margin: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.glossary-term { display: grid; grid-template-columns: minmax(140px, 240px) minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.glossary-term dt { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.15; }
.glossary-term dd { margin: 0; color: var(--color-muted); max-width: 65ch; }
@media (max-width: 40rem) {
  .glossary-term { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .glossary-head { align-items: start; }
}

.lesson__why { display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-small); background: var(--color-paper-4); color: var(--color-muted); font-size: var(--text-sm); }
.lesson__why strong { color: var(--color-accent); }

.principles-page { padding-block: var(--space-xl) var(--space-2xl); display: grid; gap: var(--space-xl); }
.principles-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.principles-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.75rem); }
.principles-head .lead { margin-top: var(--space-xs); }
.principles-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.principle { display: grid; gap: var(--space-xs); align-content: start; min-height: 300px; padding: var(--space-lg); border-radius: var(--radius-panel); background: var(--color-paper-2); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.principle:hover { background: var(--color-paper-3); }
.principle__num { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--display-weight); }
.principle h2 { font-size: var(--text-title); margin-top: auto; }
.principle p { color: var(--color-muted); font-size: var(--text-sm); }
.principle__link { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-ink); font-size: var(--text-xs); font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.principles-practice { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-3); }
.principles-practice h2 { font-size: var(--text-section); }
@media (max-width: 60rem) {
  .principles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principle { min-height: 240px; }
}
@media (max-width: 40rem) {
  .principles-grid { grid-template-columns: minmax(0, 1fr); }
  .principle { min-height: 200px; }
  .principles-head { align-items: start; }
}

.practice-page { padding-block: var(--space-xl) var(--space-2xl); display: grid; gap: var(--space-xl); }
.practice-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.practice-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.75rem); }
.practice-head .lead { margin-top: var(--space-xs); }
.practice-block { display: grid; gap: var(--space-md); }
.practice-timer { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-panel); background: var(--color-paper-2); }
.practice-timer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); align-items: end; }
.practice-timer__time { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(3rem, 7vw, 5rem); font-weight: var(--display-weight); line-height: 0.9; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.practice-timer__phase { display: grid; gap: var(--space-2xs); }
.practice-timer__phase strong { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-title); }
.practice-timer__bar { height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-paper-3); }
.practice-timer__bar span { display: block; width: 100%; height: 100%; background: var(--color-accent); transform-origin: left center; transform: scaleX(0); }
.practice-timer__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.practice-plan { list-style: none; display: grid; gap: var(--space-2xs); }
.practice-plan li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.practice-plan li span { color: var(--color-ink); font-weight: 700; }
.practice-plan li.is-active { color: var(--color-ink); }
.practice-plan li.is-active span { color: var(--color-ink); }
.practice-technique { display: grid; gap: var(--space-md); }
.practice-technique .section-head { margin-bottom: 0; }
.technique-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.technique-card { border: 1px solid var(--color-rule); border-radius: var(--radius-panel); background: var(--color-paper-2); color: var(--color-ink); padding: var(--space-md); }
.technique-card h3 { color: var(--color-ink); }
.checklist { list-style: none; display: grid; gap: var(--space-xs); margin-top: var(--space-sm); }
.checklist .check { color: var(--color-muted); font-size: var(--text-sm); }
.practice-notes { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-panel); background: var(--color-paper-3); }
.practice-notes h2 { font-size: var(--text-section); }
@media (max-width: 60rem) { .technique-columns { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .practice-plan li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); } .practice-head { align-items: start; } }