@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Libre+Caslon+Display&display=swap');
.help-launcher {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--green);
  border-radius:5px;
  background:#fffef8;
  color:var(--green);
  padding:9px 14px;
  font-size:16px;
  white-space:nowrap;
}
.help-launcher kbd,.help-palette kbd {
  font:inherit;
  font-size:14px;
  background:#eef0e4;
  padding:1px 5px;
  border:1px solid #c7ceba;
  border-radius:4px;
  white-space:nowrap;
}
.help-open .app-shell {margin-right:410px}
.help-open .workshop-grid,.help-open .lesson-grid {grid-template-columns:minmax(0,1fr)}
.help-open .intro {flex-wrap:wrap}
.help-open .approaches {gap:6px}
.help-palette {
  position:fixed;
  z-index:6;
  top:20px;
  right:18px;
  bottom:112px;
  width:382px;
  display:flex;
  flex-direction:column;
  background:#fffef8;
  border:1px solid #bbc8b7;
  border-radius:12px;
  box-shadow:0 12px 40px #233f2e1f;
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
}
.help-palette[hidden] {display:none}
.help-heading {display:flex;justify-content:space-between;align-items:center;padding:20px 22px 12px}
.help-heading .eyebrow {font-size:11px;letter-spacing:1.4px;margin:0 0 4px}
.help-heading h2 {font-size:31px;margin:0;line-height:1.15}
.help-close {background:none;color:var(--green);font-size:28px;line-height:1;width:38px;height:38px;border-radius:50%}
.help-close:hover {background:#edf0e3}
.help-sections {display:flex;margin:0 20px 12px;padding:4px;background:#eef0e6;border-radius:7px;gap:4px}
.help-sections button {flex:1;padding:8px 4px;border-radius:4px;font-size:15px;background:transparent;color:var(--ink)}
.help-sections button[aria-pressed="true"] {background:var(--green);color:white}
.help-topics {display:flex;flex-wrap:wrap;gap:6px;padding:0 20px 12px}
.help-topics button {padding:5px 9px;border:1px solid #cbd2c0;border-radius:20px;background:transparent;color:#324635;font-size:14px}
.help-topics button[aria-pressed="true"] {background:#e4edbe;border-color:#95a969}
.help-location {margin:0;padding:9px 22px;background:#f2f4e9;border-top:1px solid #e2e6d8;border-bottom:1px solid #e2e6d8;color:#43563e;font-size:13px}
#help-article {overflow-y:auto;min-height:0;overscroll-behavior:contain;padding:20px 22px 24px}
#help-article h3 {font-family:inherit;font-size:21px;font-weight:550;margin:0 0 12px;line-height:1.3}
#help-article h4 {font-size:17px;font-weight:650;margin:22px 0 7px}
#help-article p {font-size:16px;line-height:1.6;margin:0 0 15px}
#help-article ul {padding-left:20px;margin:10px 0 16px}
#help-article li {margin-bottom:8px}
#help-article .help-callout {background:#f0f3e3;border-left:3px solid #7d9458;padding:12px 14px;border-radius:0 6px 6px 0}
#help-article .help-footnote,.help-sources p {font-size:14px;color:#53604f}
.help-footer {padding:10px 22px;border-top:1px solid #e2e6d8;font-size:12px;color:#53604f;margin-top:auto}
.figure-explanation {display:flex;gap:16px;align-items:flex-start}
.help-figure-stack {display:flex;flex-direction:column;font:30px/1.05 Georgia,serif;text-align:center;background:#edf0dd;border-radius:8px;padding:8px 14px;color:#234b3d}
.help-tones,.register-example {display:flex;justify-content:space-between;gap:8px;background:#f5f4ed;border-radius:8px;padding:14px;margin:15px 0 20px}
.help-tones>span,.register-example>span {text-align:center;font-size:24px;flex:1}
.help-tones small,.register-example small {display:block;font-size:12px;color:#4e5c48}
.help-ranges {width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.help-ranges caption {text-align:left;font-size:13px;color:#53604f;margin-bottom:8px}
.help-ranges th,.help-ranges td {padding:7px 10px;text-align:left;border-bottom:1px solid #dde2d2}
.help-ranges .current {background:#eaf0d3}
.help-keys {margin:0}
.help-keys dt {margin-top:17px}
.help-keys dd {margin:6px 0 15px}
.help-sources {border-top:1px solid #d8dfcd;padding-top:12px}
.help-sources summary {font-size:14px;color:#365337;cursor:pointer;margin-bottom:12px}
.help-sources a {color:var(--green);text-decoration:underline}
.help-topic-link {background:var(--green);color:white;padding:10px 14px;border-radius:5px;font-size:15px;text-align:left}
.check-shortcut {display:inline-block;border:1px solid currentColor;border-radius:4px;margin-left:8px;padding:0 6px;line-height:1.25;font-size:18px;vertical-align:middle}
.editor-help {display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.editor-help button {background:#334b4b;color:#fafbec;border:1px solid #758d80;border-radius:5px;padding:8px 10px;font-size:14px}
.editor-help button:hover {background:#45605c}
.editor-help span {color:#e2edbb;margin-left:5px}
.figure-help-target {cursor:pointer;outline:none}
.figure-help-halo {fill:transparent;stroke:transparent}
.figure-help-target:hover .figure-help-halo,.figure-help-target:focus .figure-help-halo {fill:#e9efce;stroke:#687f4e;stroke-width:1.5}
@media(max-width:1000px){
  .help-open .app-shell {margin-right:0}
  .help-palette {top:auto;bottom:112px;max-height:65vh;right:12px;width:min(382px,calc(100% - 24px))}
  .help-heading {padding-top:14px}
  .help-footer {display:none}
  .help-launcher {padding:7px 10px}
}
@media(max-width:600px){
  .help-palette {bottom:148px;max-height:calc(100dvh - 168px)}
  .help-launcher kbd {display:none}
  .help-heading {padding:14px 18px 10px}
  .help-sections {margin-inline:16px}
  .help-topics {padding-inline:16px}
  #help-article {padding:16px 18px}
}
.lesson-grid>*,.workshop-grid>*,.ear>* {
  min-width:0;
}
.score-card,.score-scroll {
  max-width:100%;
}
.whole-bass {
  background:transparent;
  border:1px solid #d8dcd0;
  border-radius:4px;
  padding:5px 7px;
  font-size:12px;
  white-space:nowrap;
}
.voice-comparison {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px;
}
.voice-path-card {
  background:#fffdf5;
  border:1px solid #ded5c0;
  border-radius:5px;
  padding:20px;
}
.voice-path {
  display:flex;
  gap:18px;
  color:var(--voice);
  border-bottom:1px solid #e5e3d7;
  padding:10px 0;
  font-size:16px;
}
.voice-path strong {
  min-width:65px;
  font-weight:500;
}
.voice-path span {
  letter-spacing:1px;
}
@media(max-width:600px) {
  .voice-comparison {
    grid-template-columns:1fr;
  }
  .whole-bass {
    font-size:11px;
    padding:4px;
  }
  .tempo-label input {
    display:none;
  }
}
:root {
  --paper:#f5f3ed;
  --ink:#25372f;
  --muted:#53604f;
  --line:#d8dcd0;
  --green:#234b3d;
  --lime:#e4edbe;
  --s:#914323;
  --a:#4f602c;
  --t:#28616b;
  --b:#604b7c;
  --serif:'Libre Caslon Display',Georgia,serif;
  --sans:'DM Sans',Arial,sans-serif;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font:16px/1.6 var(--sans);
}
button,input,select,textarea {
  font:inherit;
}
button,a,input,select {
  touch-action:manipulation;
}
button {
  cursor:pointer;
  color:inherit;
}
button {
  border:0;
}
button:disabled {
  cursor:default;
  opacity:.62;
}
a {
  color:inherit;
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #bd853c;
  outline-offset:4px;
}
button:hover:not(:disabled) {
  filter:brightness(.96);
}
.skip {
  position:fixed;
  top:-60px;
  left:20px;
  background:white;
  padding:10px;
  z-index:20;
}
.skip:focus {
  top:10px;
}
.topbar {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 42px;
  border-bottom:1px solid var(--line);
  gap:30px;
}
.brand {
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:14px;
  font-weight:650;
  font-size:24px;
  letter-spacing:4px;
  line-height:1;
}
.brand-mark {
  font:44px var(--serif);
  letter-spacing:-6px;
}
.brand-mark span {
  font:22px Georgia;
  vertical-align:top;
  display:inline-block;
  margin-top:4px;
}
.brand-sub {
  display:block;
  font-size:10px;
  letter-spacing:1.25px;
  margin-top:9px;
}
.edition {
  font-family:var(--serif);
  font-size:20px;
  color:#53604f;
}
.text-button {
  padding:10px 0;
  background:none;
  font-size:16px;
}
.text-button span {
  margin-left:16px;
}
.app-shell {
  display:flex;
}
.rail {
  width:106px;
  flex-shrink:0;
  border-right:1px solid var(--line);
  padding-top:37px;
  display:flex;
  align-items:center;
  flex-direction:column;
}
.rail-top {
  font-size:10px;
  letter-spacing:1px;
  max-width:92%;
  text-align:center;
}
.rail-number {
  font:66px/1 var(--serif);
  margin-top:25px;
}
.rail-label {
  font-size:11px;
  letter-spacing:1.6px;
  margin-top:8px;
}
.rail-line {
  height:52px;
  width:1px;
  background:var(--line);
  margin:26px 0;
}
.vertical {
  writing-mode:vertical-rl;
  font-size:12px;
  letter-spacing:2.2px;
  color:var(--muted);
}
.source-link {
  background:none;
  margin:50px 0 130px;
  font-size:24px;
}
.source-link span {
  display:block;
  font-size:13px;
}
main {
  flex:1;
  min-width:0;
  padding:37px 42px 120px;
  max-width:1600px;
  margin:auto;
}
.intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}
.eyebrow {
  font-size:13px;
  font-weight:600;
  letter-spacing:1.6px;
  margin:0 0 11px;
}
.eyebrow span {
  padding:0 10px;
  color:#a6ac9e;
}
h1 {
  font:clamp(38px,3.8vw,64px)/1.06 var(--serif);
  font-weight:400;
  letter-spacing:-1.5px;
  margin:0 0 12px;
}
h1 em {
  font-weight:400;
  color:#4e6854;
}
h2 {
  font:34px/1.08 var(--serif);
  font-weight:400;
  margin:0 0 15px;
}
h3 {
  font-size:16px;
  margin:0 0 8px;
}
.dek {
  margin:0;
  color:var(--muted);
  font-size:16px;
}
.study-meta {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:7px;
  max-width:210px;
}
.study-meta span {
  font-size:13px;
  border:1px solid var(--line);
  padding:5px 9px;
  border-radius:3px;
  white-space:nowrap;
}
.approaches {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden;
  margin:31px 0 27px;
}
.approaches button {
  display:flex;
  align-items:center;
  gap:13px;
  padding:18px 20px;
  background:transparent;
  text-align:left;
  border-right:1px solid var(--line);
}
.approaches button:last-child {
  border:0;
}
.approaches button.active {
  background:var(--green);
  color:#fafbf4;
}
.tab-number {
  font:25px var(--serif);
  opacity:.9;
}
.approaches strong {
  font-size:16px;
  font-weight:550;
  display:block;
}
.approaches small {
  font-size:13px;
  display:block;
  opacity:1;
  margin-top:3px;
}
.tab-arrow {
  margin-left:auto;
  font-size:21px;
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:15px;
  gap:20px;
}
.section-heading .eyebrow {
  margin:0;
}
.section-heading span {
  color:var(--muted);
  font-size:15px;
}
.lesson-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:22px;
}
.score-card {
  background:#fffef8;
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden;
}
.score-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:18px 23px 0;
}
.score-top h3 {
  font-family:var(--serif);
  font-size:25px;
  font-weight:400;
  margin:0;
}
.score-top span {
  font-size:13px;
  color:var(--muted);
}
.score-scroll {
  overflow:auto;
  padding:10px 10px 0;
}
.score-svg {
  width:100%;
  min-width:680px;
  display:block;
}
.score-svg .staff {
  stroke:#a0aa98;
  stroke-width:.85;
}
.score-svg .barline {
  stroke:#9da894;
  stroke-width:.8;
}
.score-svg .clef {
  fill:#4a5b45;
  font-family:'Segoe UI Symbol','Noto Music',serif;
  font-size:34px;
}
.score-svg .voice-name {
  font:12px var(--sans);
  font-weight:500;
  letter-spacing:.2px;
}
.score-svg .bar-number {
  font:12px var(--sans);
  fill:#53604f;
}
.score-svg .note-label {
  font:14px var(--sans);
  font-weight:500;
}
.score-svg .roman {
  font:18px var(--serif);
  fill:#344b38;
}
.score-svg .given {
  font:11px var(--sans);
  fill:#526549;
}
.score-svg .note-button {
  cursor:pointer;
}
.score-svg .note-button:hover .note-halo {
  fill:#dce6ca;
  opacity:1;
}
.score-bottom {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-top:1px solid #e8eadf;
  padding:12px 21px;
  font-size:13px;
  color:var(--muted);
}
.score-bottom label {
  display:flex;
  align-items:center;
  gap:6px;
}
.score-bottom input {
  accent-color:var(--green);
}
.score-options { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; font-size:14px; color:var(--ink); }
.figure-toggle { display:flex; align-items:center; gap:7px; font-size:14px; color:var(--ink); }
.figure-toggle input { accent-color:var(--green); }
.comparison-figure-option { margin:14px 0; }
.legend {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.legend span:before {
  content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  display:inline-block;
  background:var(--voice);
  margin-right:5px;
}
.coach {
  padding:25px;
  background:#e8eddf;
  border:1px solid #dbe2d1;
  border-radius:7px;
  display:flex;
  flex-direction:column;
  min-height:460px;
}
.coach-top {
  font-size:12px;
  letter-spacing:1.5px;
  display:flex;
  justify-content:space-between;
  margin-bottom:23px;
}
.coach p {
  font-size:16px;
  line-height:1.7;
  margin:0 0 15px;
  color:#354731;
}
.coach .question {
  font-weight:600;
  font-size:16px;
  color:#2d4234;
}
.choices {
  display:grid;
  gap:7px;
}
.primary,.secondary,.choice,.voice-tabs button,.pitch-picker button,.phrase-select button {
  min-height:44px;
}
.dock-voices button,.whole-bass,.stop {
  min-height:40px;
  min-width:40px;
}
.choice {
  padding:10px 12px;
  border:1px solid #cbd4c2;
  border-radius:4px;
  background:#f7f8ef;
  text-align:left;
  font-size:15px;
}
.choice.correct {
  background:#d2e3b9;
  border-color:#71935b;
}
.choice.incorrect {
  border-color:#be8069;
  background:#f5e5d8;
}
.feedback {
  padding:11px 13px;
  border-left:2px solid #73935a;
  background:#f5f7e9;
  color:#41513c;
  font-size:15px;
  margin-top:12px;
}
.feedback.bad {
  border-color:#c07f53;
  background:#f8eee3;
}
.coach-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:22px;
}
.primary {
  background:var(--green);
  color:#fafcf2;
  border-radius:4px;
  padding:10px 15px;
  font-size:15px;
}
.secondary {
  background:transparent;
  border:1px solid var(--line);
  padding:9px 13px;
  border-radius:4px;
  font-size:15px;
}
.round {
  background:none;
  border:1px solid #bac7b1;
  width:40px;
  height:40px;
  border-radius:50%;
}
.lesson-path {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-top:18px;
  gap:8px;
}
.path-step {
  background:none;
  text-align:left;
  border-top:2px solid #d9ded0;
  padding:12px 3px;
}
.path-step.active {
  border-color:var(--green);
}
.path-step span {
  font-size:13px;
  color:#526549;
}
.path-step strong {
  display:block;
  font-size:15px;
  font-weight:500;
  margin-top:3px;
}
.path-step.completed span:after {
  content:'  ✓';
}
.thought {
  display:flex;
  gap:18px;
  align-items:center;
  padding:18px 22px;
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:5px;
}
.thought .symbol {
  font:32px var(--serif);
  color:#8c9b79;
}
.thought p {
  margin:0;
  font-size:15px;
  color:var(--muted);
}
.thought strong {
  font-weight:600;
  color:var(--ink);
}
.phrase-select {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.phrase-select button {
  padding:6px 10px;
  background:none;
  border:1px solid var(--line);
  border-radius:4px;
  font-size:13px;
}
.phrase-select button.active {
  background:var(--green);
  border-color:var(--green);
  color:white;
}
.workshop {
  background:#202e31;
  color:#edf0e5;
  border-radius:8px;
  padding:24px;
}
.workshop .section-heading span {
  color:#b1beb7;
}
.workshop .phrase-select button {
  color:#c8d2ca;
  border-color:#55615e;
}
.workshop .phrase-select button.active {
  background:#dbe9b0;
  color:#22392b;
}
.workshop-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:20px;
}
.workshop .score-card {
  border-color:#f2f0e6;
  color:var(--ink);
}
.editor {
  display:flex;
  flex-direction:column;
}
.editor .eyebrow {
  color:#b9cba3;
  margin:7px 0 12px;
}
.editor h2 {
  font-size:30px;
  margin-bottom:8px;
}
.editor p {
  color:#b8c2b9;
  font-size:15px;
  margin:0 0 15px;
}
.voice-tabs {
  display:flex;
  gap:5px;
  margin:5px 0 17px;
}
.voice-tabs button {
  flex:1;
  background:#354447;
  border:1px solid #56625c;
  border-radius:4px;
  padding:8px 4px;
  font-size:15px;
}
.voice-tabs button.active {
  background:#dfebbc;
  color:#21392a;
  border-color:#dfebbc;
}
.pitch-picker {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
}
.pitch-picker button {
  background:#344447;
  color:#d5ded5;
  padding:9px 0;
  border:1px solid #536160;
  border-radius:3px;
  font-size:13px;
}
.pitch-picker button.chord-tone {
  background:#4b5c52;
  border-color:#83947d;
}
.pitch-picker button.selected {
  background:#e4ecc6;
  color:#243e2c;
}
.workshop .feedback {
  background:#2e453a;
  color:#d6e8cb;
  border-color:#9eb77f;
}
.workshop .feedback.bad {
  background:#503b31;
  color:#f2dcc4;
  border-color:#d9a478;
}
.editor-actions {
  display:flex;
  gap:7px;
  margin-top:16px;
  flex-wrap:wrap;
}
.editor-actions .primary {
  background:#dce9b5;
  color:#223a2b;
}
.editor-actions .secondary {
  border-color:#5d6b63;
  color:#dce5d6;
}
.workshop-caption {
  font-size:13px;
  color:#b8c5b9;
  margin:18px 0 0;
}
.event-nav {
  display:flex;
  gap:5px;
  margin-bottom:18px;
}
.event-nav button {
  background:#39494b;
  border-radius:3px;
  padding:6px 12px;
  font-size:16px;
}
.event-nav span {
  font-size:13px;
  align-self:center;
  flex:1;
  text-align:center;
}
.workshop .legend {
  color:#46553e;
}
.ear {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  min-height:435px;
  border:1px solid #ded5c0;
  border-radius:8px;
  overflow:hidden;
}
.ear-stage {
  background:#ece4d1;
  position:relative;
  padding:27px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.ear-stage .eyebrow {
  position:absolute;
  top:22px;
  left:24px;
  color:#5e5743;
}
.ear-rings {
  position:relative;
  width:240px;
  height:240px;
  display:flex;
  justify-content:center;
  align-items:center;
  border:1px solid #cdc3aa;
  border-radius:50%;
  margin:28px 0 16px;
}
.ear-rings:before,.ear-rings:after {
  content:'';
  position:absolute;
  border:1px solid #cdc3aa;
  border-radius:50%;
  inset:24px;
}
.ear-rings:after {
  inset:48px;
}
.ear-center {
  z-index:1;
  display:flex;
  flex-direction:column;
  text-align:center;
  align-items:center;
  justify-content:center;
  background:#ded4b9;
  width:142px;
  height:142px;
  border-radius:50%;
}
.ear-center span {
  font:57px/1.1 var(--serif);
  color:#6f7752;
}
.ear-center small {
  letter-spacing:2px;
  font-size:11px;
  color:#6f7159;
}
.ear-rings.sounding {
  animation:breathe 1.2s infinite alternate;
}
.ear-options {
  display:flex;
  gap:10px;
  width:100%;
  max-width:370px;
}
.ear-options button {
  flex:1;
  background:#fffdf3;
  border:1px solid #d5c9ad;
  padding:14px;
  border-radius:5px;
  text-align:left;
}
.ear-options button b {
  font:25px var(--serif);
  margin-right:18px;
}
.ear-options button span {
  font-size:15px;
}
.ear-stage>p {
  font-size:13px;
  color:#5e5743;
  margin:15px 0 0;
}
.ear-question {
  padding:31px;
  background:#fcfaf2;
}
.ear-question h2 {
  font-size:37px;
  margin:15px 0;
}
.ear-question>p {
  font-size:16px;
  color:#555240;
  line-height:1.7;
}
.ear-question .choice {
  background:#f5f0e4;
  border-color:#ded6c2;
}
.ear-question .choice.correct {
  background:#dde9c9;
  border-color:#819769;
}
.ear-question .choice.incorrect {
  background:#f4e2d5;
  border-color:#b27b61;
}
.ear-question .feedback {
  background:#edf0dd;
}
.ear-question .coach-nav {
  margin-top:24px;
}
.ear-question .eyebrow {
  color:#665a3d;
}
.ear-reveal {
  margin-top:20px;
}
.ear-progress {
  display:flex;
  gap:6px;
}
.ear-progress i {
  width:30px;
  height:3px;
  background:#d2cab5;
}
.ear-progress i.active {
  background:#8d9064;
}
.footer {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  color:#53604f;
  font-size:12px;
  padding-top:26px;
}
.footer button {
  background:none;
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:3px;
  color:#53604f;
}
.audio-dock {
  height:96px;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#fffef8f5;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:0 42px 0 147px;
  backdrop-filter:blur(14px);
  z-index:5;
}
#lesson-continuation { position:absolute; bottom:100%; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px max(24px,calc((100vw - 1100px)/2)); border-top:1px solid #9cab88; background:#e9efda; color:#233f31; box-shadow:0 -4px 20px #24382d0c; }
#lesson-continuation[hidden] { display:none; }
.lesson-next-copy { min-width:0; }
.lesson-next-copy strong { display:block; font-size:19px; font-weight:600; line-height:1.35; }
.lesson-next-copy strong span { margin-right:7px; }
.lesson-next-copy p { margin:4px 0 0; font-size:15px; line-height:1.45; }
#lesson-continuation .primary { flex-shrink:0; font-size:17px; padding:13px 20px; white-space:normal; }
.has-lesson-next main { padding-bottom:280px; }
.stage-instruction,.section-heading { scroll-margin-top:100px; }
@media(max-width:600px) {
  #lesson-continuation { padding:12px 17px; gap:10px; flex-wrap:wrap; }
  .lesson-next-copy { width:100%; }
  .lesson-next-copy strong { font-size:17px; }
  .lesson-next-copy p { font-size:14px; }
  #lesson-continuation .primary { width:100%; padding:10px 14px; font-size:16px; }
  .has-lesson-next main { padding-bottom:350px; }
}
.dock-label {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:215px;
}
.dock-label strong {
  display:block;
  font-size:15px;
  font-weight:500;
}
.dock-label small {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}
.live-dot {
  width:6px;
  height:6px;
  background:#7f9765;
  border-radius:50%;
}
.transport {
  display:flex;
  align-items:center;
  gap:12px;
}
.play-control {
  display:grid;
  justify-items:center;
  gap:3px;
}
.play-control small {
  color:var(--muted);
  font-size:12px;
  line-height:1;
}
.play {
  border-radius:50%;
  width:44px;
  height:44px;
  background:var(--green);
  color:white;
  font-size:16px;
}
.stop {
  background:none;
  font-size:13px;
  padding:8px;
}
.tempo-label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
}
.tempo-label input {
  width:70px;
  accent-color:var(--green);
}
.tempo-label small {
  font-size:12px;
  color:var(--muted);
}
.dock-voices {
  display:flex;
  gap:5px;
}
.dock-voices button {
  background:none;
  border:1px solid var(--line);
  padding:5px 10px;
  border-radius:4px;
  font-size:13px;
  color:var(--voice);
}
.dock-voices button.muted {
  text-decoration:line-through;
  opacity:.75;
}
.dock-voices button.solo {
  background:#e7edd8;
}
.score-svg .playhead {
  fill:#dbe6bd;
  opacity:0;
}
.score-svg .playing .playhead {
  opacity:.65;
}
.score-svg .selected-column {
  fill:#eef1df;
}
.score-svg .note-halo {
  fill:transparent;
}
.score-svg .active-note .note-halo {
  fill:#e3eabd;
  stroke:#234b3d;
  stroke-width:1.8;
}
.score-svg .note-button:focus {
  outline:none;
}
.score-svg .note-button:focus-visible .note-halo {
  stroke:#9b641c;
  stroke-width:2.5;
  stroke-dasharray:3 2;
}
.score-svg .dimmed {
  opacity:1;
}
.score-svg .dimmed ellipse,.score-svg .dimmed>line {
  opacity:.8;
}
.score-svg .note-group {
  transition:opacity .2s;
}
dialog {
  width:min(780px,92vw);
  max-height:88vh;
  padding:40px;
  background:#fbfaf2;
  color:var(--ink);
  border:1px solid #d3d9c8;
  border-radius:9px;
  box-shadow:0 30px 130px #0f251b40;
}
dialog::backdrop {
  background:#1f312c66;
  backdrop-filter:blur(3px);
}
.close {
  position:absolute;
  right:14px;
  top:10px;
  font-size:27px;
  background:none;
}
dialog p {
  font-size:16px;
  line-height:1.8;
  color:#46553e;
}
dialog img {
  width:100%;
  border:1px solid var(--line);
  margin-top:10px;
}
.compare-table {
  border-collapse:collapse;
  width:100%;
  font-size:16px;
  margin:24px 0;
}
.compare-table td,.compare-table th {
  border-bottom:1px solid var(--line);
  padding:12px 8px;
  text-align:left;
  vertical-align:top;
}
.compare-table th {
  font-size:13px;
  color:var(--muted);
}
.preference-buttons {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
#preference-status {
  min-height:22px;
}
.hidden {
  display:none!important;
}
@keyframes breathe {
  from {
    box-shadow:0 0 0 0 #a29e7115;
  }
  to {
    box-shadow:0 0 0 16px #a29e7120;
  }
}
@media(min-width:1550px) {
  main {
    padding-top:48px;
  }
  .lesson-grid {
    grid-template-columns:minmax(0,1fr) 380px;
  }
  .coach {
    padding:30px;
  }
  .approaches {
    margin:35px 0;
  }
  .score-svg {
    max-height:none;
  }
}
@media(max-width:1150px) {
  .topbar {
    padding:0 25px;
  }
  .edition {
    display:none;
  }
  .rail {
    width:75px;
  }
  .rail-top {
    font-size:10px;
  }
  main {
    padding:28px 24px 120px;
  }
  .lesson-grid {
    grid-template-columns:minmax(0,1fr) 340px;
    gap:15px;
  }
  .coach {
    padding:20px;
  }
  .approaches button {
    padding:16px 12px;
    gap:9px;
  }
  .approaches strong {
    font-size:15px;
  }
  .tab-arrow {
    display:none;
  }
  .audio-dock {
    padding-left:100px;
    padding-right:24px;
    gap:14px;
  }
  .dock-label {
    min-width:170px;
  }
  .workshop-grid {
    grid-template-columns:minmax(0,1fr) 300px;
  }
  .workshop {
    padding:18px;
  }
  .score-top {
    padding:17px 17px 0;
  }
}
@media(max-width:1100px) {
  .rail {
    display:none;
  }
  main {
    padding:25px 20px 130px;
  }
  .topbar {
    height:75px;
  }
  .intro {
    align-items:flex-start;
  }
  .study-meta {
    max-width:130px;
  }
  .lesson-grid,.workshop-grid {
    grid-template-columns:1fr;
  }
  .coach {
    min-height:0;
    display:block;
  }
  .coach-top {
    margin-bottom:12px;
  }
  .coach h2 {
    font-size:30px;
  }
  .coach .choices {
    grid-template-columns:repeat(3,1fr);
  }
  .coach-nav {
    margin-top:14px;
  }
  .score-svg {
    max-height:none;
  }
  .audio-dock {
    padding:0 20px;
    height:104px;
  }
  .dock-label {
    min-width:140px;
  }
  .tempo-label input {
    width:48px;
  }
  .dock-voices button {
    padding:5px 7px;
  }
  .workshop .editor {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 25px;
  }
  .editor>div,.editor>p,.editor>h2 {
    grid-column:1;
  }
  .editor .pitch-picker,.editor .editor-feedback,.editor .editor-actions {
    grid-column:2;
  }
  .editor .pitch-picker {
    grid-row:2/6;
    align-content:start;
  }
  .editor .editor-feedback {
    grid-row:6/9;
  }
  .editor .editor-actions {
    grid-row:9;
  }
  .ear {
    grid-template-columns:1fr 1fr;
  }
  .ear-question {
    padding:25px;
  }
  .ear-stage {
    padding:20px;
  }
  .ear-rings {
    width:200px;
    height:200px;
  }
  .ear-rings:after {
    inset:40px;
  }
  .ear-center {
    width:120px;
    height:120px;
  }
  .score-bottom {
    flex-wrap:wrap;
  }
  .footer {
    padding-top:20px;
  }
}
@media(max-width:600px) {
  .topbar {
    height:68px;
    padding:0 17px;
    gap:16px;
  }
  .brand {
    font-size:20px;
    gap:9px;
  }
  .brand-mark {
    font-size:35px;
  }
  .brand-sub {
    font-size:10px;
  }
  .topbar .text-button {
    font-size:13px;
    max-width:115px;
    text-align:right;
  }
  .topbar .text-button span {
    display:none;
  }
  main {
    padding:24px 14px 168px;
  }
  .intro {
    display:block;
  }
  h1 {
    font-size:42px;
  }
  .dek {
    font-size:15px;
    max-width:280px;
  }
  .study-meta {
    max-width:none;
    justify-content:flex-start;
    margin-top:17px;
  }
  .study-meta span {
    font-size:12px;
  }
  .approaches {
    margin:23px 0 22px;
    gap:0;
  }
  .approaches button {
    padding:11px 7px;
    display:block;
  }
  .tab-number {
    font-size:19px;
    display:block;
    margin-bottom:4px;
  }
  .approaches strong {
    font-size:13px;
    line-height:1.35;
  }
  .approaches small {
    display:none;
  }
  .section-heading {
    gap:10px;
    align-items:flex-start;
  }
  .section-heading .eyebrow {
    font-size:11px;
  }
  .section-heading>span {
    font-size:12px;
    text-align:right;
  }
  .score-top {
    padding:15px 15px 0;
  }
  .score-top h3 {
    font-size:22px;
  }
  .score-top span {
    font-size:12px;
    max-width:115px;
    text-align:right;
  }
  .score-scroll {
    padding-left:0;
    padding-right:0;
  }
  .score-svg {
    min-width:680px;
  }
  .score-bottom {
    padding:10px 13px;
    font-size:12px;
  }
  .legend {
    gap:8px;
  }
  .coach {
    padding:20px;
  }
  .coach .choices {
    grid-template-columns:1fr;
  }
  .lesson-path {
    gap:6px;
  }
  .path-step {
    padding-top:9px;
  }
  .path-step strong {
    font-size:12px;
  }
  .path-step span {
    font-size:11px;
  }
  .thought {
    padding:14px;
    gap:12px;
  }
  .thought p {
    font-size:13px;
  }
  .audio-dock {
    height:140px;
    padding:11px 17px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:7px;
  }
  .dock-label {
    min-width:0;
  }
  .dock-label strong {
    font-size:13px;
  }
  .dock-label small {
    font-size:11px;
    max-width:160px;
  }
  .dock-voices {
    grid-column:1/3;
    justify-content:center;
    gap:13px;
  }
  .dock-voices button {
    padding:3px 10px;
  }
  .transport {
    gap:5px;
  }
  .tempo-label {
    gap:5px;
  }
  .tempo-label input {
    width:42px;
  }
  .tempo-label small {
    display:none;
  }
  .play {
    width:40px;
    height:40px;
  }
  .workshop {
    padding:14px 11px;
  }
  .workshop .section-heading {
    display:block;
  }
  .phrase-select {
    margin-top:10px;
  }
  .phrase-select button {
    padding:5px 7px;
  }
  .workshop .editor {
    display:flex;
  }
  .editor .pitch-picker {
    grid-template-columns:repeat(7,1fr);
  }
  .ear {
    grid-template-columns:1fr;
  }
  .ear-stage {
    min-height:340px;
  }
  .ear-rings {
    margin-top:38px;
  }
  .ear-question {
    padding:24px;
  }
  .ear-question h2 {
    font-size:34px;
  }
  .footer {
    font-size:11px;
  }
  .footer #save-status {
    display:none;
  }
  dialog {
    padding:30px 20px;
  }
  .compare-table {
    font-size:13px;
  }
  .compare-table td,.compare-table th {
    padding:10px 5px;
  }
  .preference-buttons .primary {
    font-size:13px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* Shared course progress, section cards and practice controls. */
.unit-progress { margin:0 0 30px; padding:20px 24px; border:1px solid #cdd5c4; border-radius:6px; background:#ecefe2; }
.unit-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; font-size:15px; }
.unit-heading .eyebrow { margin:0; }
.unit-track { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.unit-track button { display:flex; gap:10px; align-items:center; background:transparent; padding:7px 16px 7px 0; font-size:16px; }
.unit-track button span { font-size:22px; }
.unit-track .done { font-weight:700; color:#234b3d; }
.unit-track .optional-milestone { gap:8px; }
.optional-milestone small { padding:2px 7px; border:1px solid #b2bea4; border-radius:4px; color:#44533c; font-size:12px; font-weight:500; }
.completion { border-top:1px solid #bac9ab; padding-top:14px; margin-bottom:0; }
.practice-path { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-bottom:22px; }
.practice-path button { text-align:left; padding:16px; border:1px solid #c9cebf; background:#fffdf7; border-radius:5px; font-size:17px; font-weight:600; }
.practice-path button>span { display:block; color:#53604f; font-size:14px; margin-bottom:5px; }
.practice-path button small { display:block; font-size:13px; font-weight:400; margin-top:5px; }
.practice-path .active { background:#e4edbe; border-color:#718456; box-shadow:inset 0 -3px #365744; }
.stage-instruction { max-width:920px; font-size:18px; line-height:1.7; margin:0 0 24px; }
.term-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:16px 0; font-size:14px; }
.term-links button { text-decoration:underline; text-underline-offset:3px; font-size:15px; }
#comparison-voices { margin-left:auto; }
.practice-actions,.progress-tools,.comparison-audio { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:20px 0 10px; }
.help-caption { font-size:15px!important; line-height:1.65; color:#53604f; }
.workshop-caption { font-size:15px; line-height:1.65; color:var(--muted); }
.editor { background:#202e31; color:#edf0e5; padding:22px; border-radius:7px; align-self:start; }
.editor .hint-box,.editor .hint-box p { color:#25372f; }
.phrase-feedback .feedback { margin:18px 0; font-size:16px; }
.phrase-feedback p:last-child { margin-bottom:0; }
.issue-link { background:transparent; padding:0; text-align:left; text-decoration:underline; text-underline-offset:3px; }
.editor .voice-tabs button,.pitch-picker button { font-size:15px; min-height:40px; }
.hint-box { background:#edf0dc; padding:16px; border-radius:4px; margin:18px 0; font-size:16px; }
.reflection-label { display:block; font-weight:600; font-size:17px; margin:24px 0 10px; }
textarea { width:100%; padding:14px; border:1px solid #8c9b83; border-radius:4px; background:#fffdf7; color:var(--ink); line-height:1.6; resize:vertical; }
textarea:focus-visible { outline:3px solid #bd853c; outline-offset:3px; }
.scope-note,.glossary { padding:18px 22px; border:1px solid #c9cebf; border-radius:5px; margin:26px 0; background:#faf9f2; }
summary { cursor:pointer; font-weight:600; font-size:17px; }
.glossary summary>span { font-weight:400; font-size:15px; margin-left:12px; }
.glossary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:24px 0; }
.glossary-grid h3 { font-family:var(--serif); font-size:28px; font-weight:400; margin:0 0 8px; }
.glossary-grid p { margin:8px 0; }
.progress-tools p { flex:1 1 300px; font-size:15px; }
.import-label { position:relative; cursor:pointer; overflow:hidden; }
.import-label input { position:absolute; opacity:0; inset:0; width:100%; cursor:pointer; }
.import-label:focus-within { outline:3px solid #bd853c; outline-offset:3px; }
dialog { width:min(1150px,96vw); max-width:1150px; }
.comparison-scores { display:grid; grid-template-columns:1fr; gap:16px; }
.comparison-scores section { min-width:0; }
.comparison-scores h3 { font-size:22px; }
.comparison-scores .score-svg { min-width:640px; }
.score-svg .bass-figures text { font:21px Georgia,serif; fill:#25372f; }
.score-svg .row-label { font:13px var(--sans); font-weight:600; fill:#435640; }
.score-svg .roman { font-size:21px; }
.harmony-cell { height:44px; padding:2px; box-sizing:border-box; }
.harmony-cell input { width:100%; height:39px; box-sizing:border-box; padding:3px 5px; border:1.5px solid #68765d; border-radius:5px; background:#fffef8; color:#25372f; text-align:center; font:20px Georgia,serif; }
.harmony-cell input::placeholder { color:#68765d; }
.harmony-cell input:focus { outline:3px solid #9b641c; outline-offset:0; background:#fffce6; }
.harmony-cell.harmony-invalid,.harmony-cell.harmony-valid { height:70px; }
.harmony-invalid input { border:2px solid #a23728; background:#fff1e8; color:#79291e; }
.harmony-valid input { border:2px solid #416b4c; background:#eff6e8; }
.harmony-check-label { display:block; margin-top:3px; text-align:center; font:600 13px/18px var(--sans); color:#35583c; }
.harmony-invalid .harmony-check-label { color:#922e22; }
.harmony-feedback-description { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.feedback-group { margin-top:18px; }
.feedback-group h4 { margin:0 0 10px; font:600 17px/1.4 var(--sans); }
.feedback-group p { margin:8px 0; }
.figure-caption { margin:0; padding:8px 18px 14px; color:#4c5945; font-size:14px; line-height:1.5; }
.harmony-entry-help { font-size:16px; line-height:1.65; color:#304b3d; padding:12px 0; margin:0; }
.harmony-entry-help button { font-size:16px; text-decoration:underline; }
.score-svg .note-accidental { font:23px 'Segoe UI Symbol',serif; }
.note-entry { margin:18px 0; padding:14px; border:1px solid #6d8178; border-radius:6px; background:#19292b; }
.note-entry>label { display:block; font-size:16px; font-weight:600; color:#f6f5e9; }
.note-entry>input { display:block; width:100%; box-sizing:border-box; height:44px; margin:8px 0; padding:7px 11px; font:21px var(--sans); color:#25372f; background:#fffef8; border:2px solid #9fab8d; border-radius:4px; }
.note-entry>input:focus { outline:3px solid #d7b164; outline-offset:2px; }
.note-entry>input:disabled { opacity:.6; }
.note-entry>input[aria-invalid="true"] { border-color:#df8e70; }
.editor .note-entry p { font-size:14px; line-height:1.5; margin:8px 0; color:#d9e0d2; }
.note-entry .advance-option { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:400; margin-top:10px; }
.advance-option input { accent-color:#cfdca3; width:17px; height:17px; }
.editor .note-entry .entry-error { color:#ffd1ba; }
.bonet-hint { margin:18px 0; padding:16px; border:1px solid #c8b775; border-left:4px solid #c8b775; border-radius:5px; background:#f4f0d9; color:#263e32; }
.bonet-hint strong { display:block; font:600 22px var(--sans); line-height:1.35; }
.bonet-hint .bonet-location { display:block; margin-bottom:8px; color:#4e5d46; font-size:14px; }
.editor .bonet-hint p { margin:10px 0; font-size:16px; line-height:1.55; color:#344b3d; }
.editor .bonet-hint .secondary { color:#25483a; background:#fffdf4; border-color:#7b8c68; font-size:15px; }
.bonet-reveal:not(:disabled) { background:#eeefd4; color:#294837; border-color:#84945c; }
.score-feedback-overlay { pointer-events:none; }
.correction-label { pointer-events:all; cursor:help; outline:none; }
.correction-label:hover rect,.correction-label:focus rect { stroke-width:2.5; fill:#fff1d9; }
.score-feedback-overlay .faded:has(.correction-label:hover),.score-feedback-overlay .faded:has(.correction-label:focus) { opacity:1; }
.correction-tooltip { position:fixed; z-index:30; width:340px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; box-sizing:border-box; padding:16px 18px; border:1px solid #8c6547; border-radius:8px; background:#fffaf0; color:#352d23; box-shadow:0 8px 28px #192b2830; font:16px/1.55 var(--sans); }
.correction-tooltip[hidden] { display:none; }
.correction-tooltip strong { display:block; color:#7e3521; font-size:17px; line-height:1.4; }
.correction-tooltip p { margin:9px 0; white-space:pre-line; }
.correction-tooltip small { display:block; color:#655b4d; font-size:13px; }
.parallel-edge { color:#a84219; }
.parallel-edge.parallel-octave { color:#98354c; }
.parallel-edge.parallel-mixed { color:#663471; }
.parallel-edge path { fill:none; stroke:currentColor; stroke-width:2; }
.parallel-edge.parallel-octave path { stroke-dasharray:5 3; }
.parallel-edge rect { fill:#fffaf1; stroke:currentColor; stroke-width:1; }
.parallel-edge text { font:600 12px var(--sans); fill:currentColor; }
.feedback-note-ring { fill:none; stroke:#a23728; stroke-width:2; }
.score-feedback-overlay .faded { opacity:.18; }
.score-feedback-review { margin:14px 0; padding:16px; background:#fff4e5; border:1px solid #b78c68; border-radius:6px; color:#543a29; }
.score-feedback-review>strong { font-size:17px; }
.score-feedback-review p { margin:7px 0 12px; font-size:15px; line-height:1.5; }
.feedback-choices { display:flex; flex-wrap:wrap; gap:8px; }
.feedback-choices button { border:1px solid #a17b60; border-radius:5px; padding:9px 12px; background:#fffdf7; color:#543a29; text-align:left; font-size:15px; }
.feedback-choices button[aria-pressed="true"] { background:#5b3b2b; color:#fffdf7; }
.feedback-choices small { display:block; margin-top:4px; font-size:13px; }
.feedback-mark { color:#9a3a25; }
.feedback-cross { color:#873548; }
.feedback-spacing { color:#355b82; }
.feedback-leap { color:#6b4387; }
.feedback-mark path { fill:none; stroke:currentColor; stroke-width:2; }
.feedback-leap path { stroke-dasharray:4 3; }
.feedback-mark rect { fill:#fffaf1; stroke:currentColor; stroke-width:1; }
.feedback-mark text { font:600 12px var(--sans); fill:currentColor; }
.score-feedback-review .focused-feedback { margin:14px 0; padding:12px; border-left:3px solid #9a6743; background:#fffdf7; font-size:16px; }
.feedback-choices { max-height:260px; overflow:auto; padding:3px; }
.markup-key { margin-top:15px; border-top:1px solid #d7bfa7; padding-top:12px; }
.markup-key summary { font-size:15px; }
.markup-key ul { font-size:15px; line-height:1.65; padding-left:22px; }
.markup-key li+li { margin-top:8px; }
.ear-bass-scores { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:24px; }
.ear-bass-scores>* { min-width:0; }
.score-svg.bass-excerpt { min-width:460px; }
.compare-table code { white-space:nowrap; }
@media(max-width:800px) { .ear-bass-scores { grid-template-columns:1fr; } }
.published-scroll { overflow-x:auto; border:1px solid #d8dcd0; background:white; }
.published-score { display:block; width:100%; min-width:640px; max-width:none; margin:0; }
#modal-content>p { font-size:17px; }
.ear .choices~p { font-size:15px!important; }
@media(max-width:900px) {
  .practice-path { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .glossary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .unit-heading { align-items:flex-start; flex-direction:column; gap:6px; }
}
@media(max-width:600px) {
  .unit-progress { padding:16px; }
  .practice-path { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .practice-path button { padding:12px; font-size:16px; }
  .stage-instruction { font-size:17px; }
  .glossary-grid { grid-template-columns:1fr; }
  .glossary summary>span { display:block; margin-left:0; }
  .coach p,.coach .question,.feedback,.choice { font-size:16px; }
  .footer #save-status { display:block; font-size:13px; }
  .score-bottom { flex-wrap:wrap; }
}

.beat-shortcut { display:block; margin-top:3px; font-size:12px; opacity:.85; }
.explore-playback-toggle { display:flex; align-items:center; gap:7px; max-width:130px; font-size:14px; line-height:1.35; font-weight:600; color:#304a3a; cursor:pointer; }
.explore-playback-toggle[hidden],.whole-bass[hidden] { display:none; }
.explore-playback-toggle input { width:18px; height:18px; flex-shrink:0; accent-color:#294e3d; }
@media(max-width:600px) {
  .explore-playback-toggle { max-width:80px; font-size:12px; gap:5px; }
}

.foundation-entry{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;margin:0 0 24px;background:#fffef5;border:1px solid #adbca1;border-radius:6px;color:#234b3d;text-decoration:none}.foundation-entry strong{font-size:21px}.foundation-entry small{display:block;margin-top:6px;font-size:17px;line-height:1.5}.foundation-entry:focus-visible{outline:3px solid #a64a25;outline-offset:3px}

.course-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:15px 42px;background:#eef1e3;border-bottom:1px solid #c3cdb5}.course-nav a{display:block;text-decoration:none;color:#244c3d;padding:13px 18px;border:1px solid #bac8ac;border-radius:6px;background:#fffef8}.course-nav a[aria-current]{background:#e1ebba;border-color:#315b42;box-shadow:inset 0 -3px #315b42}.course-nav strong{font-size:19px}.course-nav small{display:block;font-size:15px;margin-top:5px;line-height:1.4}.course-nav a:focus-visible{outline:3px solid #a64a25;outline-offset:3px}@media(max-width:700px){.course-nav{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 15px;gap:8px}.course-nav a{padding:11px 12px}.course-nav strong{font-size:18px}.course-nav small{font-size:14px}}