@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Libre+Caslon+Display&display=swap');
.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;
  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);
}
.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;
}
.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 {
  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;
  }
}

/* The first complete unit keeps the original paper-and-ink studio. */
#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; }
.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; }
.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; }
}