:root {
  --ink: #f5f0df;
  --muted: #a0bbc4;
  --brass: #e2bb72;
  --cyan: #5bd3e2;
  --line: #ffffff16;
  --paper: #0c2633;
  --body: "Manrope", sans-serif;
  --display: "Fraunces", Georgia, serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 90% 0, #193a3b, transparent 65%), var(--paper);
  color: var(--ink);
  font: 14px/1.6 var(--body);
  min-height: 100vh;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
}
button,
a,
input,
select {
  touch-action: manipulation;
}
a {
  color: inherit;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}
[hidden] {
  display: none !important;
}
button:hover {
  filter: brightness(1.1);
}
button svg {
  width: 24px;
  height: 24px;
}
button svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.skip {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  z-index: 100;
  left: 20px;
  top: -90px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px;
}
.skip:focus {
  opacity: 1;
  pointer-events: auto;
  top: 12px;
}
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  padding: 23px 4vw;
  background: #04151eeb;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  font: 500 29px/1.25 var(--display);
  white-space: nowrap;
}
.brand-symbol {
  color: var(--brass);
  font-size: 49px;
  line-height: 1;
}
.brand small {
  display: block;
  color: #76a4b1;
  font: 700 8px var(--body);
  letter-spacing: 2.4px;
  margin-top: 8px;
}
.view-tabs {
  display: flex;
  padding: 5px;
  border: 1px solid #29505d;
  border-radius: 50px;
  background: #071d26;
  box-shadow: inset 0 2px 15px #5cbccc08;
}
.view-tabs button {
  background: transparent;
  color: #b6dbe2;
  font-weight: 700;
  padding: 13px 24px;
  border-radius: 40px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.view-tabs button span {
  font-size: 23px;
  line-height: 1;
}
.view-tabs button[aria-selected="true"] {
  background: linear-gradient(115deg, #2ab6cd, #73d8e6);
  color: #05222e;
  box-shadow: inset 0 0 0 1px #c2f6ff4d;
}
.help-button {
  background: transparent;
  color: var(--muted);
  justify-self: end;
  font-size: 12px;
}
.help-button span {
  display: inline-grid;
  place-items: center;
  border: 1px solid #547984;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  margin-left: 10px;
}
main {
  max-width: 1540px;
  margin: auto;
  padding: 0 40px 25px;
  min-width: 0;
}
.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--brass);
}
#panel-sumario {
  max-width: 1100px;
  margin: 85px auto 100px;
}
.catalog-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding: 12px 0 40px;
  border-bottom: 1px solid var(--line);
}
.catalog-hero h1 {
  font: 400 clamp(48px, 5.7vw, 78px) / 1.08 var(--display);
  letter-spacing: -2.5px;
  margin: 0 0 26px;
}
.catalog-hero p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
  max-width: 760px;
}
.catalog-count {
  text-align: center;
  padding: 0 0 8px;
  flex-shrink: 0;
}
.catalog-count strong {
  display: block;
  color: var(--brass);
  font: 400 78px/1.15 var(--display);
}
.catalog-count span {
  font-size: 9px;
  letter-spacing: 1.7px;
  color: var(--muted);
}
.catalog-tools {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin: 30px 0;
}
.search {
  display: block;
  width: 330px;
  max-width: 100%;
}
.search > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}
input[type="search"] {
  width: 100%;
  background: #071e2a;
  border: 1px solid #34505d;
  border-radius: 9px;
  padding: 14px 17px;
  color: var(--ink);
}
input::placeholder {
  color: #76929c;
}
.catalog-tools > p {
  color: var(--muted);
  font-size: 11px;
  margin: 0;
}
.catalog-tools button {
  display: block;
  background: none;
  color: var(--brass);
  padding: 4px 0;
  font-size: 11px;
}
.song-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 30px;
  background: transparent;
  color: var(--ink);
  border-bottom: 1px solid #38515a;
  border-radius: 3px;
  text-align: left;
  padding: 24px 8px;
}
.song-card:hover {
  background: #ffffff04;
}
.card-number {
  font: 400 30px var(--display);
  color: var(--brass);
}
.song-card strong {
  display: block;
  font: 400 25px/1.4 var(--display);
}
.song-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 5px;
}
.card-arrow {
  margin-left: auto;
  font-size: 24px;
  color: var(--brass);
  padding: 0 16px;
}
.catalog-footnote {
  margin: 30px 0;
  color: #799ba7;
  font-size: 11px;
}
.empty {
  padding: 20px 0;
  color: var(--muted);
}
.lesson-heading {
  position: relative;
  text-align: center;
  padding: 30px 180px 0;
}
.lesson-heading .eyebrow {
  color: #79d2df;
  font-size: 9px;
  letter-spacing: 2.7px;
  margin: 0 0 11px;
}
.lesson-heading h1 {
  font: 500 clamp(31px, 3.6vw, 52px) / 1.14 var(--display);
  letter-spacing: -1.7px;
  margin: 0;
}
.lesson-description {
  display: none;
}
.back-link {
  background: #061d2870;
  border: 1px solid #39515a;
  color: #b4d7df;
  border-radius: 30px;
  padding: 11px 18px;
  font-size: 11px;
}
.lesson-heading .back-link {
  position: absolute;
  left: 0;
  top: 34px;
}
.outline-button {
  background: transparent;
  color: var(--brass);
  border: 1px solid #8f794c65;
  border-radius: 8px;
  padding: 11px 15px;
  font-size: 10px;
}
.lesson-heading .outline-button {
  position: absolute;
  right: 0;
  top: 34px;
}
.outline-button span {
  font-size: 17px;
  margin-right: 6px;
}
.lesson-meta {
  display: flex;
  justify-content: center;
  gap: 24px;
  font-size: 10px;
  color: #91acb7;
  padding: 16px 0 23px;
}
.lesson-meta > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.lesson-meta i {
  font-style: normal;
  color: var(--brass);
}
.lesson-meta strong {
  font-weight: 500;
  color: #c0d1d4;
}
.lesson-meta small {
  font-size: 10px;
}
.eyebrow > span {
  margin: 0 4px;
}
body[data-view="sumario"] .lesson-heading,
body[data-view="sumario"] .lesson-meta,
body[data-view="sumario"] .main-footer {
  display: none;
}
.music-stats {
  display: flex;
  align-items: center;
  margin: 20px 0 26px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.music-stats > div {
  padding: 0 35px;
  border-right: 1px solid var(--line);
}
.music-stats > div:first-child {
  padding-left: 6px;
}
.music-stats > div > span {
  display: block;
  font-size: 8px;
  letter-spacing: 1.7px;
  color: #77a3b2;
}
.music-stats strong {
  font-size: 17px;
  font-weight: 500;
  color: #e3e8df;
}
.music-stats small {
  font-size: 10px;
  color: #95b0ba;
}
.music-stats button {
  margin-left: auto;
  background: transparent;
  color: #8eabb6;
  font-size: 10px;
}
.note-strip-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #92aeb9;
  font-size: 9px;
  letter-spacing: 1.4px;
  margin-bottom: 15px;
}
.note-strip-header > span + span {
  letter-spacing: 0;
  font-size: 10px;
}
.note-strip {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 0 2px 15px;
  scrollbar-width: thin;
  scrollbar-color: #476976 transparent;
}
.note-token {
  flex-shrink: 0;
  min-width: 78px;
  min-height: 75px;
  padding: 13px 18px;
  border: 1px solid #2d4a58;
  border-radius: 10px;
  background: #09222e;
  color: #a3bdc9;
  position: relative;
}
.note-token strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.note-token small {
  display: block;
  font-size: 9px;
  margin-top: 4px;
  color: #698f9f;
}
.note-token.is-current {
  background: #153e45;
  border-color: #dfbb73;
  color: #f3d78f;
  box-shadow: 0 0 0 1px #dfbb7320;
}
.note-token.is-current small {
  color: #b9c7b0;
}
.note-token.measure-start {
  margin-left: 15px;
}
.note-token.measure-start:before {
  content: "";
  width: 1px;
  height: 35px;
  position: absolute;
  left: -14px;
  top: 20px;
  background: #37525d;
}
.player {
  background: linear-gradient(120deg, #0a2a37, #061e29);
  border: 1px solid #335964;
  border-radius: 22px;
  padding: 20px 27px;
  margin-top: 18px;
}
.seek-row {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  color: #a3bcc5;
}
.piano-player-slot .player {
  margin: 0 0 18px;
}
.score-player-slot .player {
  margin: 0 0 20px;
}
.seek-row > span {
  min-width: 30px;
}
.seek-row > span:last-child {
  text-align: right;
}
.seek-row input {
  flex: 1;
  min-width: 0;
}
input[type="range"] {
  appearance: none;
  height: 5px;
  background: #365661;
  border-radius: 10px;
  cursor: pointer;
  accent-color: var(--cyan);
}
#seek {
  background: linear-gradient(
    to right,
    var(--cyan) var(--progress, 0%),
    #365661 var(--progress, 0%)
  );
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--cyan);
  border: 0;
}
input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--cyan);
  border: 0;
}
.player-row,
.transport,
.player-options {
  display: flex;
  align-items: center;
  gap: 18px;
}
.player-row {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 18px;
}
.player-options {
  flex-wrap: wrap;
}
.volume-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tempo-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #b7c9d0;
  font-size: 11px;
  white-space: nowrap;
}
.tempo-label input {
  width: 68px;
  padding: 9px 8px;
  background: #0a2632;
  border: 1px solid #365362;
  border-radius: 7px;
  color: #d2e2e5;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.play-button {
  height: 57px;
  width: 57px;
  border: 1px solid #3ee4ee;
  background: #082e3a;
  border-radius: 50%;
  color: #7de5ec;
  display: grid;
  place-items: center;
}
.icon-button {
  background: transparent;
  color: #b5d2da;
  padding: 5px;
  display: grid;
  place-items: center;
}
.transport > span {
  font-size: 12px;
  color: #b2c9d2;
}
.option-button {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: #b1c6cf;
  font-size: 11px;
  padding: 9px;
}
.option-button > span {
  font-size: 23px;
}
.option-button[aria-pressed="true"],
.icon-button[aria-pressed="true"] {
  color: var(--brass);
}
.speed-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #b7c9d0;
  font-size: 11px;
}
select {
  background: #0a2632;
  border: 1px solid #365362;
  border-radius: 7px;
  padding: 9px 12px;
  color: #d2e2e5;
  cursor: pointer;
}
#volume {
  width: 80px;
}
.phrase-options {
  display: flex;
  align-items: center;
  gap: 13px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 18px;
  font-size: 10px;
  color: #92abb6;
}
.phrase-options > label:last-child {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
}
input[type="checkbox"] {
  accent-color: var(--brass);
}
.phrase-options select {
  font-size: 10px;
  min-width: 185px;
}
.main-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  color: #678e9e;
  padding: 17px 0 0;
  gap: 20px;
}
.main-footer p {
  display: flex;
  align-items: center;
  gap: 8px;
}
.small-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--brass);
  border-radius: 50%;
}
.main-footer button {
  background: transparent;
  color: #8aa8b6;
  font-size: 9px;
}
.score-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 18px;
  font-size: 11px;
  color: #a0bbc4;
}
.score-toolbar p {
  margin: 0;
}
.score-toolbar small {
  display: block;
  color: #708f9c;
  font-size: 10px;
}
.score-toolbar label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}
.sheet {
  background: #fffdf8;
  color: #14243d;
  border-radius: 15px;
  padding: 28px;
  overflow-x: auto;
}
.sheet-header {
  text-align: center;
  margin-bottom: 12px;
}
.sheet-header h2 {
  font: 500 27px var(--display);
  margin: 0;
}
.sheet-header p {
  font-size: 10px;
  color: #768194;
}
.sheet .score-system {
  display: block;
  width: 100%;
  height: auto;
  min-height: 150px;
}
.score-event {
  cursor: pointer;
  outline: none;
}
.score-event .score-hit {
  fill: transparent;
  stroke: transparent;
  rx: 5;
}
.score-event:hover .score-hit,
.score-event:focus .score-hit {
  fill: #e7f2f4;
  stroke: #8fbbca;
}
.score-event.is-current .score-hit {
  fill: #f4ead4;
  stroke: #bd954f;
}
.score-note {
  fill: #14243d;
}
.staff-line {
  stroke: #8d98a8;
  stroke-width: 1;
}
.ledger {
  stroke: #64738a;
  stroke-width: 1.2;
}
.sheet-footer {
  font-size: 8px;
  color: #7d8899;
  border-top: 1px solid #ddd;
  padding-top: 12px;
  margin-top: 12px;
}
.brass-button {
  background: var(--brass);
  color: #172b30;
  font-size: 11px;
  font-weight: 700;
  padding: 13px 18px;
  border-radius: 7px;
}
dialog {
  background: #0b2936;
  color: var(--ink);
  border: 1px solid #45616a;
  border-radius: 20px;
  padding: 38px;
  max-width: 500px;
  width: calc(100% - 36px);
  box-shadow: 0 20px 100px #0008;
}
dialog::backdrop {
  background: #02111bcc;
  backdrop-filter: blur(6px);
}
dialog h2 {
  font: 400 36px/1.2 var(--display);
  margin: 10px 0 25px;
}
dialog p,
dialog li {
  color: #9eb8c4;
  font-size: 12px;
  line-height: 1.9;
}
dialog li {
  margin-bottom: 17px;
}
dialog li strong {
  color: #e5e9df;
}
dialog ol {
  padding-left: 20px;
}
dialog a {
  color: var(--brass);
}
.dialog-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  color: #accbd2;
  font-size: 24px;
}
.dialog-note {
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.dialog-close-action {
  margin-top: 10px;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  background: #15434d;
  color: #eef2e9;
  border: 1px solid #46717e;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 11px;
  z-index: 70;
  transition: 0.2s;
  max-width: 90vw;
}
#toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.load-error {
  padding: 20px;
  color: #efc0a3;
  background: #3a2724;
  border: 1px solid #8c6050;
  margin: 20px 0;
  border-radius: 10px;
}
.load-error button {
  background: none;
  color: inherit;
  text-decoration: underline;
  margin-left: 8px;
}
@media (min-width: 1600px) {
  .practice-stage {
    min-height: 670px;
    grid-template-columns: minmax(0, 1fr) 420px;
  }
  .teacher-area {
    min-height: 645px;
  }
  .teacher-art {
    height: 680px;
  }
  .sax-diagram {
    height: 370px;
  }
  .fingering-panel {
    padding: 23px 27px;
  }
  .note-top strong {
    font-size: 47px;
  }
  .stage-lines {
    width: 450px;
    height: 560px;
  }
}
@media (max-width: 1050px) {
  .site-header {
    gap: 15px;
    padding: 20px 25px;
  }
  .brand {
    font-size: 24px;
  }
  .brand small {
    font-size: 6px;
    letter-spacing: 1.6px;
  }
  .brand-symbol {
    font-size: 37px;
  }
  .view-tabs button {
    padding: 11px 18px;
    font-size: 12px;
  }
  .help-button {
    font-size: 10px;
  }
  main {
    padding: 0 25px 25px;
  }
  .lesson-heading {
    padding-inline: 140px;
  }
  .lesson-heading .back-link {
    font-size: 9px;
    padding: 9px 12px;
  }
  .lesson-heading .outline-button {
    font-size: 9px;
    padding: 9px;
  }
  .practice-stage {
    grid-template-columns: minmax(0, 1fr) 305px;
    padding-right: 24px;
    gap: 0;
  }
  .teacher-caption {
    display: none;
  }
  .fingering-panel {
    padding: 16px;
  }
  .player-options {
    gap: 10px;
  }
  .music-stats > div {
    padding: 0 25px;
  }
}
@media (max-width: 760px) {
  .site-header {
    grid-template-columns: 1fr auto;
    gap: 19px;
    padding: 17px 20px;
  }
  .view-tabs {
    grid-row: 2;
    grid-column: 1/-1;
    justify-self: center;
    width: min(100%, 440px);
    justify-content: center;
  }
  .view-tabs button {
    flex: 1;
    justify-content: center;
    padding: 10px 12px;
  }
  .brand {
    font-size: 25px;
  }
  .brand small {
    font-size: 7px;
  }
  .help-button {
    font-size: 11px;
  }
  #panel-sumario {
    margin: 45px auto 70px;
  }
  .catalog-hero {
    gap: 20px;
  }
  .catalog-hero h1 {
    font-size: 52px;
  }
  .catalog-hero p {
    font-size: 12px;
  }
  .catalog-count strong {
    font-size: 60px;
  }
  .catalog-count span {
    display: block;
    width: 95px;
    font-size: 8px;
  }
  .catalog-tools {
    gap: 20px;
  }
  .catalog-tools > p {
    max-width: 180px;
    font-size: 10px;
  }
  .lesson-heading {
    padding: 60px 0 0;
  }
  .lesson-heading .back-link,
  .lesson-heading .outline-button {
    top: 17px;
  }
  .lesson-heading h1 {
    font-size: 37px;
  }
  .lesson-meta {
    gap: 15px;
    font-size: 9px;
  }
  .practice-stage {
    min-height: 490px;
    grid-template-columns: minmax(0, 1fr) 260px;
    padding: 18px 18px 0 0;
  }
  .teacher-area {
    min-height: 470px;
  }
  .teacher-art {
    height: 470px;
    left: 50%;
    transform: translateX(-50%);
  }
  .stage-lines {
    width: 270px;
    height: 370px;
  }
  .stage-caption {
    left: 18px;
    font-size: 6px;
    letter-spacing: 1px;
  }
  .fingering-panel {
    border-radius: 19px;
    padding: 13px;
    margin-bottom: 18px;
  }
  .note-top strong {
    font-size: 32px;
  }
  .note-top p {
    font-size: 8px;
    letter-spacing: 1.5px;
  }
  .note-top > div > span {
    font-size: 7px;
  }
  .sax-diagram {
    height: 290px;
  }
  .diagram-legend {
    font-size: 8px;
    gap: 15px;
  }
  .octave-indicator strong {
    font-size: 8px;
  }
  .finger-hint {
    font-size: 8px;
  }
  .stage-play {
    width: 55px;
    height: 55px;
  }
  .player-row {
    flex-wrap: wrap;
    gap: 15px;
  }
  .player-options {
    margin-left: auto;
  }
  .transport > span {
    font-size: 10px;
  }
  .music-stats > div {
    padding: 0 19px;
  }
  .music-stats button {
    font-size: 9px;
    max-width: 100px;
  }
  .chart-layout {
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 20px;
    padding: 20px;
  }
  .chart-diagram .sax-diagram {
    height: 380px;
  }
}
@media (max-width: 540px) {
  main {
    padding: 0 15px 20px;
  }
  .site-header {
    padding: 16px 15px;
    gap: 16px;
  }
  .brand {
    font-size: 23px;
  }
  .brand small {
    font-size: 6px;
    letter-spacing: 1.7px;
  }
  .view-tabs button {
    font-size: 12px;
    padding: 9px;
  }
  .view-tabs button span {
    font-size: 20px;
  }
  .catalog-hero {
    align-items: flex-start;
    padding-bottom: 28px;
  }
  .catalog-hero h1 {
    font-size: 43px;
    letter-spacing: -1.5px;
    margin-bottom: 19px;
  }
  .catalog-hero p {
    font-size: 12px;
  }
  .catalog-count {
    padding-top: 5px;
  }
  .catalog-count strong {
    font-size: 47px;
  }
  .catalog-count span {
    width: 65px;
    font-size: 6px;
    line-height: 1.8;
    letter-spacing: 1px;
  }
  .desktop-break {
    display: none;
  }
  .catalog-tools {
    display: block;
    margin: 24px 0 15px;
  }
  .search {
    width: 100%;
  }
  .catalog-tools > p {
    max-width: none;
    margin-top: 18px;
  }
  .catalog-tools button {
    display: inline-block;
    margin-left: 5px;
    font-size: 10px;
  }
  .song-card {
    gap: 17px;
    padding: 23px 3px;
  }
  .song-card strong {
    font-size: 20px;
  }
  .card-number {
    font-size: 27px;
  }
  .song-card small {
    font-size: 9px;
  }
  .card-arrow {
    padding: 0 5px;
  }
  .catalog-footnote {
    font-size: 10px;
  }
  .lesson-heading h1 {
    text-wrap: balance;
    font-size: 30px;
    letter-spacing: -1px;
  }
  .lesson-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 2px;
  }
  .lesson-meta {
    gap: 12px;
    padding: 14px 0 18px;
    flex-wrap: wrap;
  }
  .lesson-meta small {
    font-size: 8px;
  }
  .duration-meta {
    display: none !important;
  }
  .practice-stage {
    border-radius: 20px;
    grid-template-columns: minmax(0, 1fr) 167px;
    min-height: 415px;
    padding: 13px 10px 0 0;
    gap: 0;
  }
  .teacher-area {
    min-height: 402px;
  }
  .teacher-art {
    height: 408px;
    left: 48%;
  }
  .stage-caption {
    display: none;
  }
  .stage-lines {
    width: 200px;
    height: 290px;
    top: 15px;
  }
  .stage-play {
    width: 45px;
    height: 45px;
    top: 39%;
  }
  .stage-play svg {
    width: 20px;
    height: 20px;
  }
  .fingering-panel {
    border-radius: 16px;
    padding: 10px 9px;
    margin-bottom: 13px;
  }
  .note-top > div:first-child {
    column-gap: 8px;
  }
  .note-top strong {
    font-size: 28px;
  }
  .note-top p {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .note-top > div > span {
    font-size: 8px;
    line-height: 1.4;
    text-align: left;
    max-width: 130px;
  }
  .sax-diagram {
    height: 205px;
  }
  .live-diagram {
    padding-top: 1px;
  }
  .diagram-legend {
    gap: 8px;
    font-size: 9px;
    line-height: 1.4;
  }
  .diagram-legend i {
    width: 10px;
    height: 10px;
  }
  .diagram-legend > span {
    gap: 4px;
  }
  .octave-indicator {
    gap: 5px;
    padding-top: 8px;
  }
  .octave-indicator strong {
    font-size: 8px;
  }
  .octave-indicator small {
    font-size: 7px;
  }
  .finger-hint {
    font-size: 8px;
    margin-top: 7px;
  }
  .music-stats {
    position: relative;
    justify-content: space-between;
    margin: 10px 0 22px;
    padding: 13px 0 35px;
  }
  .music-stats > div {
    padding: 0 14px;
  }
  .music-stats > div:last-of-type {
    border: 0;
    padding-right: 0;
  }
  .music-stats > div > span {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .music-stats strong {
    font-size: 14px;
  }
  .music-stats small {
    font-size: 8px;
  }
  .music-stats button {
    position: absolute;
    right: 0;
    bottom: 8px;
    max-width: none;
    font-size: 9px;
  }
  .note-strip-header {
    font-size: 7px;
    letter-spacing: 0.7px;
    gap: 12px;
    margin-bottom: 12px;
  }
  .note-strip-header > span + span {
    font-size: 8px;
    max-width: 150px;
    text-align: right;
  }
  .note-token {
    min-width: 64px;
    min-height: 65px;
    padding: 11px 13px;
  }
  .note-token strong {
    font-size: 12px;
  }
  .player {
    padding: 15px;
    border-radius: 17px;
    margin-top: 10px;
  }
  .seek-row {
    gap: 9px;
    font-size: 9px;
  }
  .seek-row > span {
    min-width: 24px;
  }
  .player-row {
    margin-top: 13px;
    gap: 14px;
  }
  .play-button {
    width: 48px;
    height: 48px;
  }
  .transport {
    gap: 10px;
  }
  .transport > span {
    font-size: 10px;
  }
  .player-options {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
  }
  .option-button {
    font-size: 9px;
    padding: 5px;
    gap: 4px;
  }
  .option-button > span {
    font-size: 20px;
  }
  .speed-label {
    gap: 6px;
    font-size: 9px;
  }
  .speed-label select {
    padding: 7px;
    font-size: 10px;
  }
  #volume {
    width: 50px;
  }
  .icon-button svg {
    width: 21px;
    height: 21px;
  }
  .phrase-options {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    font-size: 9px;
  }
  .phrase-options select {
    min-width: 0;
    font-size: 9px;
  }
  .phrase-options > label:last-child {
    grid-column: 1/-1;
    margin: 3px 0 0;
  }
  .main-footer {
    align-items: flex-start;
    gap: 15px;
    font-size: 8px;
  }
  .main-footer p {
    max-width: 225px;
    margin: 0;
  }
  .main-footer button {
    white-space: nowrap;
    font-size: 8px;
    padding: 0;
  }
  .sheet {
    padding: 20px 12px;
  }
  .sheet-header h2 {
    font-size: 22px;
  }
  .sheet-header p {
    font-size: 8px;
  }
  .sheet .score-system {
    width: 640px;
    min-width: 640px;
  }
  .score-toolbar {
    font-size: 10px;
    gap: 10px;
  }
  .score-toolbar label {
    font-size: 8px;
  }
  .score-toolbar small {
    font-size: 8px;
  }
  .score-toolbar small:after {
    content: " · Deslize para os lados.";
  }
  .chart-layout {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .chart-diagram {
    padding: 20px;
  }
  .chart-diagram .sax-diagram {
    height: 430px;
  }
  .chart-intro h2 {
    font-size: 28px;
  }
  dialog {
    padding: 30px 23px;
  }
  dialog h2 {
    font-size: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  @page {
    size: A4 portrait;
    margin: 16mm;
  }
  body {
    background: white;
    color: black;
  }
  .site-header,
  .lesson-heading,
  .lesson-meta,
  .lesson-options,
  #panel-sumario,
  #panel-aula,
  #panel-dedilhados,
  .player,
  .main-footer,
  .score-toolbar,
  dialog,
  #toast,
  .skip {
    display: none !important;
  }
  main {
    margin: 0;
    padding: 0;
    max-width: none;
  }
  #panel-partitura[hidden] {
    display: block !important;
  }
  .sheet {
    border: 0;
    padding: 0;
    overflow: visible;
    background: white;
    border-radius: 0;
  }
  .sheet .score-system {
    width: 100%;
    min-width: 0;
    min-height: 0;
    break-inside: avoid;
  }
  .sheet-header h2 {
    font-size: 24pt;
  }
  .sheet-footer {
    font-size: 8pt;
  }
  .score-event .score-hit {
    fill: transparent !important;
    stroke: transparent !important;
  }
  .score-system {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}
.live-diagram .auxiliary-key:not(.is-active) {
  display: none;
}

/* Piano: a fixed overhead keyboard, with the hands aligned to real keys. */
.catalog-hero h1 {
  font-size: clamp(45px, 5.15vw, 72px);
}
.catalog-piano-note {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 45px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.catalog-piano-note > span {
  font: 48px Georgia;
  color: var(--brass);
}
.catalog-piano-note strong {
  font-weight: 500;
  color: var(--ink);
}
.piano-stage {
  overflow: hidden;
  border: 1px solid #375662;
  border-radius: 28px;
  background: linear-gradient(120deg, #0d2c38, #061924);
  box-shadow: 0 20px 70px #0002;
}
.piano-teacher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  padding: 30px 36px 22px;
}
.piano-overview {
  position: relative;
  padding-top: 24px;
}
.stage-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8fbdc9;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  position: absolute;
  left: 0;
  top: 0;
}
.live-dot {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px #5bd3e230;
}
.piano-overview > .eyebrow {
  margin: 22px 0 13px;
  letter-spacing: 2px;
  font-size: 9px;
}
.piano-overview h2 {
  font: 400 clamp(28px, 3.2vw, 40px) / 1.12 var(--display);
  letter-spacing: -0.8px;
  margin: 0 0 15px;
}
.piano-overview > p:not(.eyebrow) {
  color: var(--muted);
  max-width: 380px;
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 20px;
}
.stage-start {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: var(--cyan);
  background: #0c3642;
  border: 1px solid #397d8a;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
}
.stage-start svg {
  width: 18px;
  height: 18px;
}
.stage-start path {
  fill: currentColor;
  stroke: none;
}
.piano-guidance {
  min-width: 0;
  border-left: 1px solid #34525c;
  padding-left: 30px;
}
.piano-note-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.piano-note-top .eyebrow {
  font-size: 9px;
  margin: 0;
  letter-spacing: 2px;
  color: var(--cyan);
}
.piano-note-top strong {
  font: 500 48px/1.2 var(--display);
  color: #f2d79a;
  display: inline-block;
  margin: 3px 16px 3px 0;
}
.piano-note-top #currentOctave {
  display: inline-block;
  color: #8bafba;
  font-size: 11px;
}
.piano-note-counter {
  color: #8aafb8;
  font-size: 13px;
  margin-top: 10px;
}
.piano-note-counter small {
  font-size: 11px;
  margin-left: 5px;
  color: #5e8897;
}
.finger-instruction {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 12px 0;
}
.finger-number {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #134450;
  border: 1px solid #438591;
  font-size: 22px;
  color: #8de7eb;
}
.finger-instruction > div > span {
  display: block;
  letter-spacing: 1.8px;
  font-size: 8px;
  color: #8cafb9;
}
.finger-instruction strong {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
}
.finger-instruction small {
  color: #7e9eaa;
  font-size: 11px;
  margin-left: 12px;
}
.hand-fingers {
  list-style: none;
  display: flex;
  gap: 9px;
  padding: 0;
  margin: 14px 0 18px;
}
.hand-fingers li {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #708f9d;
  font-size: 9px;
}
.hand-fingers b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0b2733;
  border: 1px solid #35515f;
  color: #9ab2bb;
  font-size: 11px;
}
.hand-fingers .is-active {
  color: #acdbe0;
}
.hand-fingers .is-active b {
  color: #082833;
  background: var(--cyan);
  border-color: var(--cyan);
}
.hand-position {
  display: flex;
  gap: 13px;
  align-items: center;
  color: #9ebbc4;
  font-size: 11px;
  padding-top: 9px;
  border-top: 1px solid #2c4b57;
}
.hand-position > span,
.upcoming > span {
  letter-spacing: 1.8px;
  color: #7397a5;
  font-size: 8px;
}
.hand-position strong {
  font-weight: 500;
}
.upcoming {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}
#nextNotes {
  display: flex;
  gap: 8px;
}
.next-note {
  color: #a8c5cd;
  background: #12303c;
  border: 1px solid #33505d;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 10px;
}
.piano-console {
  padding: 20px 25px 15px;
  border-top: 1px solid #2c4b56;
  background: #06192466;
}
.keyboard-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 18px;
}
.keyboard-heading .eyebrow {
  font-size: 9px;
  letter-spacing: 2px;
  color: #91bac5;
}
.keyboard-heading p {
  font-size: 12px;
  color: #c7d8d8;
  margin: 4px 0 0;
}
.keyboard-heading label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #86a8b5;
  font-size: 11px;
  white-space: nowrap;
}
.keyboard-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: #476c77 transparent;
  padding: 4px 0 10px;
}
#keyboard {
  min-width: 900px;
}
.piano-keyboard {
  --key-width: calc(100% / var(--white-count));
  --playing-key-height: 290px;
  position: relative;
  height: 450px;
  border: 6px solid #071118;
  border-top: 12px solid #080e13;
  border-radius: 9px;
  box-shadow: 0 12px 18px #0005;
  background: #080e13;
  isolation: isolate;
  overflow: hidden;
}
.white-keys {
  display: flex;
  height: var(--playing-key-height);
}
.piano-key {
  padding: 0;
  position: relative;
  transition:
    background 0.1s,
    box-shadow 0.1s;
  color: #233543;
}
.white-key {
  flex: 1;
  min-width: 0;
  border: 1px solid #a8a598;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(
    90deg,
    #ddd9c9,
    #fffdf2 15%,
    #f1efdf 85%,
    #d1cebd
  );
  box-shadow: inset 0 -6px 0 #b8b2a0;
}
.white-key.is-pressed {
  background: linear-gradient(#5dbdc8, #b5eff0);
  box-shadow:
    inset 0 -5px 0 #478e9a,
    inset 0 0 0 1px #bbecef;
}
.black-key {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  height: calc(var(--playing-key-height) * 0.59);
  background: linear-gradient(
    90deg,
    #080c11,
    #28323a 20%,
    #111a23 75%,
    #00050b
  );
  border: 1px solid #060d12;
  box-shadow:
    inset 0 -6px 0 #000,
    2px 4px 5px #0007;
  border-radius: 0 0 4px 4px;
  color: #9ab0b9;
  z-index: 1;
}
.black-key.is-pressed {
  background: linear-gradient(#0d5e73, #30a5b8);
  box-shadow:
    inset 0 -6px 0 #073e4d,
    0 0 10px #48cbd477;
  color: #d5fcff;
}
.piano-key.is-preview {
  background: #ebc886;
}
.key-name {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  z-index: 4;
  pointer-events: none;
  text-shadow: 0 1px 2px #f6f3e8;
}
.key-name small {
  font-size: 8px;
  color: #737d83;
  display: block;
  font-weight: 500;
  margin-top: 3px;
}
.black-key .key-name {
  top: 14px;
  bottom: auto;
  font-size: 8px;
  text-shadow: none;
}
.black-key .key-name small {
  color: #6e8b96;
}
.hide-labels .key-name {
  visibility: hidden;
}
.key-finger {
  position: absolute;
  bottom: 59px;
  left: 50%;
  transform: translateX(-50%);
  color: #034453;
  font-size: 17px;
  font-weight: 800;
  z-index: 4;
  pointer-events: none;
}
.black-key .key-finger {
  top: 55px;
  bottom: auto;
  color: #c8f9fc;
  font-size: 13px;
}
.piano-hands {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hand-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.natural-hand {
  filter: drop-shadow(0 5px 3px #0003);
}
.hand-left {
  opacity: 1;
}
.hand-finger-marker {
  filter: drop-shadow(0 0 5px #37dbe677);
}
.lesson-options {
  padding: 16px 0 0;
  margin: 18px 0 0;
  border-top: 1px solid var(--line);
}
.lesson-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}
.lesson-controls label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c1d6dc;
  font-size: 12px;
}
.lesson-controls .hear-other {
  margin-left: auto;
}
.lesson-controls label:has(input:disabled) {
  opacity: 0.5;
}
.lesson-options p {
  margin: 14px 0 0;
  color: #91adb7;
  font-size: 12px;
  line-height: 1.6;
  max-width: 900px;
}
.hand-cues {
  display: grid;
  gap: 9px;
  margin: 18px 0;
}
.hand-cues > div {
  border-left: 2px solid var(--cyan);
  padding: 6px 10px;
  background: #0a2733;
}
.hand-cues span {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin-bottom: 5px;
}
.hand-cues strong {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  color: #d9e7eb;
}
.hand-cues .left-cue {
  border-color: #e7bd70;
}
.hand-cues .left-cue span {
  color: #e7bd70;
}
.white-key.is-pressed.is-left {
  background: linear-gradient(#d2a45d, #f6dc9c);
  box-shadow: inset 0 -5px 0 #92713e;
}
.black-key.is-pressed.is-left {
  background: linear-gradient(#987030, #d7ac67);
}
.keyboard-footer .left-legend {
  background: #e7bd70;
  margin-left: 12px;
}
.piano-key.is-left .key-finger {
  color: #503712;
}
.two-hand-study .piano-hands {
  opacity: 1;
}
#keyboard:has(.two-hand-study) {
  min-width: 500px;
}
.grand-system .score-hit {
  fill: transparent;
}
@media (max-width: 760px) {
  .lesson-options {
    padding: 14px 0 0;
  }
  .lesson-controls {
    gap: 12px;
  }
  .lesson-controls label {
    flex-wrap: wrap;
    font-size: 11px;
  }
  .lesson-controls .hear-other {
    margin-left: 0;
  }
  .hand-cues strong {
    font-size: 11px;
  }
}
.keyboard-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: #7696a5;
  font-size: 10px;
  margin-top: 3px;
}
.keyboard-footer > span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}
.keyboard-footer i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--cyan);
}
body[data-view="sumario"] .main-footer {
  max-width: 1100px;
  margin: auto;
}
@media (max-width: 1050px) {
  .piano-teacher {
    gap: 25px;
    padding: 25px;
  }
  .piano-guidance {
    padding-left: 24px;
  }
  .hand-fingers {
    gap: 7px;
  }
  .hand-fingers li > span {
    display: none;
  }
  .piano-note-top #currentOctave {
    display: block;
  }
  .piano-overview h2 {
    font-size: 34px;
  }
}
@media (max-width: 760px) {
  .piano-teacher {
    grid-template-columns: 1fr;
    padding: 22px 20px;
    gap: 20px;
  }
  .piano-overview {
    padding-top: 23px;
  }
  .piano-overview > .eyebrow {
    margin-top: 12px;
  }
  .piano-overview h2 {
    font-size: 29px;
  }
  .piano-overview > p:not(.eyebrow) {
    font-size: 11px;
    margin-bottom: 12px;
  }
  .piano-guidance {
    border-left: 0;
    border-top: 1px solid #34525c;
    padding: 18px 0 0;
  }
  .piano-note-top strong {
    font-size: 42px;
  }
  .piano-note-top #currentOctave {
    display: inline-block;
  }
  .finger-instruction {
    margin: 8px 0;
  }
  .hand-fingers {
    position: absolute;
    right: 25px;
    margin-top: -45px;
  }
  .hand-fingers li {
    gap: 0;
  }
  .hand-position {
    padding-top: 12px;
  }
  .piano-console {
    padding: 18px 12px 12px;
  }
  .keyboard-heading {
    gap: 12px;
  }
  .keyboard-heading .eyebrow {
    font-size: 8px;
  }
  .keyboard-heading p {
    max-width: 220px;
    font-size: 11px;
  }
  .keyboard-heading label {
    font-size: 10px;
  }
  .piano-keyboard {
    --playing-key-height: 240px;
    height: 390px;
  }
  .keyboard-footer {
    flex-wrap: wrap;
    font-size: 9px;
  }
  .keyboard-footer > span:nth-child(2) {
    order: 3;
    width: 100%;
  }
  .catalog-piano-note {
    gap: 17px;
    margin-top: 28px;
    font-size: 12px;
  }
  .piano-stage {
    border-radius: 20px;
  }
}
@media (max-width: 420px) {
  .hand-fingers {
    right: 22px;
    gap: 5px;
  }
  .hand-fingers b {
    width: 19px;
    height: 19px;
    font-size: 10px;
  }
  .finger-instruction small {
    display: none;
  }
  .keyboard-heading label {
    max-width: 85px;
    white-space: normal;
    line-height: 1.5;
  }
  .piano-note-top #currentOctave {
    display: block;
  }
}
.sequence-options{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;color:#a3bdc9;font-size:12px}.sequence-options select{font:inherit;padding:8px 11px;border:1px solid #365563;border-radius:8px;background:#0a2632;color:#d8e7e9}.sequence-options>span{font-size:11px;color:#91adb8;margin-left:auto}.sequence-parts{display:flex;gap:9px;align-items:center;justify-content:center}.sequence-hand{display:flex;flex-direction:column;gap:5px}.sequence-hand em{font-size:9px;font-style:normal;font-weight:400;letter-spacing:.03em;color:#8cbdc9}.sequence-hand[data-hand=left] em{color:#d9b673}.sequence-plus{color:#819faa;font-size:11px}.note-token .sequence-parts{font-size:14px}.next-note .sequence-parts{font-size:11px;gap:5px}.next-note .sequence-hand em{font-size:8px}@media(max-width:600px){.sequence-options>span{width:100%;margin-left:0}.sequence-options{font-size:11px}.note-token .sequence-parts{font-size:12px}}

#catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; }
#catalog .song-card[hidden] { display:none; }
.catalog-availability { color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 20px; }
.song-card[aria-current="true"] { border-bottom-color:var(--brass); }
.song-card .card-number { min-width:52px; }
@media(max-width:800px) { #catalog { grid-template-columns:1fr; } }

.keyboard-display-options { display:flex; flex-wrap:wrap; gap:12px 18px; }
.piano-keyboard.hide-hands .piano-hands { display:none; }
@media(max-width:760px) { .keyboard-display-options { flex-direction:column; gap:8px; flex-shrink:0; } }