@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Libre+Caslon+Display&display=swap');

:root{color-scheme:light;--paper:#f6f4ee;--ink:#292d28;--muted:#76796f;--line:#dedfd5;--orange:#bd4d28;--study:#efbb81;--study-dark:#87462d;--key-width:58px;font-family:'DM Sans',sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #356b91;outline-offset:4px}main{max-width:1440px;margin:0 auto;padding:0 58px}button{color:inherit}.masthead{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:22px;letter-spacing:-1px;font-weight:650;text-decoration:none;color:inherit;display:flex;align-items:center}.brand-dot{color:var(--orange)}.brand-mark{font-size:34px;margin-right:10px;line-height:1;color:var(--orange)}.edition,.eyebrow,.range-label,.overview-heading,.fact-label{font-size:10px;font-weight:600;letter-spacing:1.6px}.edition{color:var(--muted)}.intro{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:52px 0 44px}.eyebrow{margin:0 0 13px;color:var(--muted)}h1{font-family:'Libre Caslon Display',Georgia,serif;font-size:clamp(38px,4.4vw,62px);font-weight:400;letter-spacing:-1.5px;line-height:1.1;margin:0}h1 em{font-weight:400;color:var(--orange)}.intro-copy{font-size:14px;color:var(--muted);margin:17px 0 0}.range-note{border-left:1px solid #d5c5b1;padding:8px 0 8px 30px;flex-shrink:0}.range-label{display:flex;align-items:center;gap:8px;color:var(--orange);font-size:9px;letter-spacing:1.3px}.range-label i{height:6px;width:6px;border-radius:50%;background:var(--orange)}.range-note strong{font-size:29px;font-weight:500;display:block;letter-spacing:-1px;margin:9px 0 5px}.range-note strong span{color:#b4a99a;margin:0 10px;font-weight:400}.range-note small{font-size:11px;color:var(--muted)}.instrument{background:#fdfcf8;border:1px solid var(--line);border-radius:12px;padding:27px 28px 17px;box-shadow:0 8px 30px #2c251704}.instrument-top,.instrument-top>div{display:flex;align-items:center}.instrument-top{justify-content:space-between;gap:20px;margin-bottom:30px}.section-number{font-size:11px;color:var(--orange);margin-right:12px;border:1px solid #dfc3ac;border-radius:50%;width:25px;height:25px;display:grid;place-items:center}h2{font-size:16px;font-weight:500;letter-spacing:-.3px;margin:0}.volume-label{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:11px}.volume-label input{width:92px;accent-color:var(--orange);cursor:pointer}.volume-label output{width:29px;font-variant-numeric:tabular-nums}.overview-heading{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;margin-bottom:10px}.muted,.overview-hint{color:var(--muted)}.overview-hint{font-size:10px;font-weight:400;letter-spacing:0}.overview-wrap{position:relative}.overview{height:54px;position:relative;background:#eee9df;border-radius:3px}.mini-key{position:absolute;top:0;height:54px;padding:0;border:1px solid #d7d6cd;border-radius:0 0 2px 2px;background:#f5f3eb}.mini-key.black{height:33px;background:#494b45;border:1px solid #30332d;z-index:1}.mini-key.study{background:var(--study);border-color:#c99b69}.mini-key.black.study{background:var(--study-dark);border-color:#673623}.mini-key.selected{background:#c95e34}.viewport-marker{position:absolute;top:-4px;height:62px;border:2px solid var(--orange);border-radius:5px;pointer-events:none;z-index:2;transition:left .12s ease;box-shadow:0 0 0 3px #bd4d2810}.octave-nav{display:flex;justify-content:space-between;gap:2px;margin-top:9px}.octave-nav button{background:transparent;border:0;padding:6px;color:var(--muted);font-size:10px}.octave-nav button:hover{color:var(--orange)}.keyboard-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:27px 0 14px}.legend{display:flex;gap:18px;font-size:11px;color:var(--muted)}.legend>span{display:flex;align-items:center;gap:7px}.legend i{height:9px;width:9px;border-radius:2px}.study-swatch{background:var(--study);border:1px solid #c99b69}.regular-swatch{background:#faf8f0;border:1px solid #b9bbaf}.study-jump{border:1px solid #dbc7b6;background:#f8f0e7;color:#864b2c;font-size:11px;padding:9px 12px;border-radius:5px;font-weight:500}.study-jump:hover{background:#f0dfcc}.study-jump span{margin-left:12px}.piano-case{border:7px solid #30372f;border-top-width:0;border-radius:7px;background:#30372f;overflow:hidden}.piano-felt{height:18px;background:linear-gradient(#343b33 70%,#86513b 70%);box-shadow:inset 0 3px 4px #0002}.keyboard-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#bba68d #30372f;overscroll-behavior-x:contain;padding-bottom:8px;touch-action:pan-x pan-y}.keyboard{height:230px;position:relative;width:calc(52 * var(--key-width));isolation:isolate}.piano-key{position:absolute;top:0;height:224px;width:var(--key-width);padding:0;border:1px solid #b7b7ac;border-top:0;border-radius:0 0 5px 5px;background:linear-gradient(90deg,#f7f5ee,#fffdf7 25%,#f8f6ec 90%,#e7e5dd);box-shadow:0 5px 0 #c8c8ba;color:#43473d;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;padding-bottom:19px;user-select:none;transition:background .1s,box-shadow .1s}.piano-key.study{background:linear-gradient(90deg,#e7ac70,#f4c68d 27%,#efbd82 90%,#dda56b);border-color:#c99660;box-shadow:0 5px 0 #b98856;color:#5b3822}.piano-key.black{height:143px;width:calc(var(--key-width) * .62);z-index:2;background:linear-gradient(90deg,#252c25,#424940 38%,#363d34 75%,#20271f);border:1px solid #192219;box-shadow:0 6px 0 #171f16,2px 7px 4px #0003;color:#eceee4;padding-bottom:16px;gap:5px}.piano-key.black.study{background:linear-gradient(90deg,#733c27,#985436 35%,#884b2f 75%,#6e3924);border-color:#5f331f;box-shadow:0 6px 0 #562c1b,2px 7px 4px #0003;color:#fff0dc}.key-letter{font-size:13px;font-weight:600;line-height:1}.key-name{font-size:10px;font-weight:400;line-height:1.25}.key-octave{font-size:10px;opacity:.7}.piano-key.black .key-letter{font-size:11px}.piano-key.black .key-name{font-size:9px}.piano-key .focus-dot{height:4px;width:4px;border-radius:50%;background:currentColor;position:absolute;bottom:8px;opacity:.6}.piano-key.selected:after{content:'';position:absolute;bottom:0;left:4px;right:4px;height:4px;background:var(--orange);border-radius:2px}.piano-key.black.selected:after{background:#ffdbab}.piano-key.playing{background:#d8844b;box-shadow:0 2px 0 #a86235;transform:translateY(3px)}.piano-key.black.playing{background:#bb703d;box-shadow:0 3px 0 #65331d}.piano-key:focus-visible{outline:3px solid #356b91;outline-offset:-4px;z-index:3}.keyboard-footer{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:10px;margin-top:15px}.keyboard-footer>span:first-child>span{margin-right:5px}.footer-divider{margin:0 8px;color:#b3b3a8}.note-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 0;border-bottom:1px solid var(--line)}.note-title{min-width:240px}.note-title .eyebrow{font-size:9px;letter-spacing:1.2px}.selected-note{display:flex;align-items:baseline;gap:16px;font-family:'Libre Caslon Display',Georgia,serif;font-size:42px;line-height:1.15;margin-top:8px}.selected-note span{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--muted);letter-spacing:0}.note-facts{display:flex;gap:48px;align-items:center}.note-facts>div{min-width:100px}.fact-label{display:block;font-size:8px;letter-spacing:1.2px;color:var(--muted);margin-bottom:10px}.note-facts strong{display:block;font-size:15px;font-weight:500}.note-facts strong small{font-size:11px;font-weight:400;color:var(--muted)}.note-facts strong.range-status{font-size:12px}.range-status.in-range{color:#94532b}.page-footer{display:flex;align-items:center;justify-content:space-between;gap:40px;color:var(--muted);padding:22px 0 28px}.page-footer p{font-size:11px;line-height:1.8;margin:0;max-width:600px}.page-footer p strong{color:#666b5f;font-weight:500;margin-right:9px}.page-footer>span{font-size:8px;letter-spacing:1px;white-space:nowrap}.page-footer>span>span{margin:0 7px}.audio-error{color:#9c3429;font-size:13px}button{touch-action:manipulation}.mini-key:focus-visible{z-index:5}.mini-key:hover{filter:brightness(.9)}
@media(min-width:1600px){.intro{padding-top:70px;padding-bottom:54px}.keyboard{height:260px}.piano-key{height:254px}.piano-key.black{height:163px}.note-panel{padding:38px 0}}
@media(max-width:1050px){main{padding:0 30px}.intro{align-items:flex-start}.range-note{padding-left:20px;margin-top:7px}.range-note small{max-width:180px;display:block;line-height:1.6}.note-facts{gap:24px}.page-footer{flex-wrap:wrap;gap:12px}.note-title{min-width:190px}.selected-note{gap:10px}.selected-note span{max-width:115px;font-size:11px}}
@media(max-width:720px){main{padding:0 18px}.masthead{height:72px}.brand{font-size:19px}.edition{font-size:8px;letter-spacing:1px}.intro{flex-direction:column;padding:33px 0 26px;gap:23px}h1{font-size:44px}.intro-copy{font-size:12px;line-height:1.6;max-width:280px;margin-top:12px}.range-note{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;border-left:0;padding:0;margin:0}.range-label{font-size:8px}.range-note strong{font-size:20px;margin:0}.range-note strong span{margin:0 5px}.range-note small{max-width:none;width:100%;font-size:10px}.instrument{padding:18px 12px 14px;margin:0 -4px}.instrument-top{margin-bottom:24px;gap:10px}.instrument-top h2{font-size:13px}.section-number{margin-right:8px;width:22px;height:22px;font-size:9px}.volume-label{font-size:10px;gap:5px}.volume-label input{width:58px}.volume-label output{display:none}.overview-hint{display:none}.octave-nav button{padding:8px 2px;font-size:9px;min-height:36px}.keyboard-tools{margin-top:18px;gap:8px;align-items:flex-end}.legend{flex-direction:column;gap:7px;font-size:9px}.study-jump{font-size:10px;padding:10px}.study-jump span{margin-left:5px}.piano-case{border-left-width:4px;border-right-width:4px}.keyboard-footer{font-size:9px;flex-wrap:wrap;line-height:1.5;gap:6px}.note-panel{flex-direction:column;align-items:stretch;gap:23px;padding:25px 4px}.selected-note{font-size:38px}.selected-note span{max-width:none;font-size:12px}.note-facts{gap:15px;justify-content:space-between}.note-facts>div{min-width:0}.fact-label{font-size:7px;letter-spacing:.7px}.note-facts strong{font-size:13px}.note-facts strong.range-status{font-size:11px}.page-footer{padding-top:18px}.page-footer p{font-size:10px}.page-footer p strong{display:block}.page-footer>span{font-size:7px}.brand-mark{font-size:29px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* Ear training shares the piano's paper, terracotta, and quiet typography. */
[hidden] { display: none !important; }
.workspace-tools { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 22px; }
.mode-nav { display: flex; gap: 5px; padding: 4px; background: #eae8df; border-radius: 8px; }
.mode-nav button { border: 0; background: transparent; padding: 11px 18px; border-radius: 5px; font-size: 12px; color: #666b5f; }
.mode-nav button[aria-pressed="true"] { background: #fffdf8; color: var(--ink); box-shadow: 0 1px 4px #292d2810; }
.training { border: 1px solid var(--line); border-radius: 12px; background: #fdfcf8; padding: 30px; }
.training-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.training-heading h2 { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 38px; font-weight: 400; }
.training-heading .eyebrow { color: var(--orange); font-size: 9px; }
.level-label { display: flex; flex-direction: column; gap: 7px; font-size: 10px; color: var(--muted); }
.level-label select { font: inherit; font-size: 12px; padding: 11px 32px 11px 12px; color: var(--ink); background: var(--paper); border: 1px solid #d7d6c9; border-radius: 5px; max-width: 100%; }
.training-description { font-size: 13px; line-height: 1.7; color: #676d61; margin: 17px 0 25px; }
.references { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0 15px; }
.references summary { font-size: 12px; font-weight: 550; cursor: pointer; }
.references summary span { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 12px; }
.reference-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.reference-button { background: #f5f1e8; border: 1px solid #d8d4c5; border-radius: 5px; padding: 11px 15px; min-height: 42px; font-size: 12px; }
.reference-button:hover { background: #eee4d4; }
.reference-status { color: var(--muted); font-size: 10px; min-height: 15px; line-height: 1.5; margin: 12px 0 0; }
.challenge { padding-top: 26px; }
.challenge-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.challenge-top .eyebrow { margin: 0; font-size: 9px; }
.training-score { color: #716b5e; font-size: 11px; font-variant-numeric: tabular-nums; }
.challenge-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.training-primary, .training-secondary { padding: 12px 18px; min-height: 44px; border-radius: 5px; font-size: 12px; border: 1px solid #d4cfbf; }
.training-primary { background: #a74727; color: #fff8ed; border-color: #a74727; }
.training-primary:hover:not(:disabled) { background: #8e3e22; }
.training-secondary { background: #f9f7f0; }
.training-secondary:hover:not(:disabled) { background: #ece8dc; }
.training button:disabled { cursor: default; opacity: .5; }
.recall-label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #676d61; margin-left: auto; min-height: 44px; }
.recall-label input { accent-color: var(--orange); width: 16px; height: 16px; }
.challenge-instruction { color: #676d61; font-size: 12px; line-height: 1.7; margin: 20px 0 15px; }
.answer-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.answer-button { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid #d5d2c4; border-radius: 7px; background: #fffef9; padding: 19px 12px; }
.answer-button strong { font-size: 20px; font-weight: 500; }
.answer-button span { font-size: 10px; color: #797a6e; }
.answer-button:hover:not(:disabled) { background: #f9edda; border-color: #b69471; }
.training .answer-button.answer-correct { background: #e5eddd; color: #3a582d; border-color: #8eaa7c; opacity: 1; }
.training .answer-button.answer-incorrect { background: #f5e4d9; color: #943d26; border-color: #c8977f; opacity: 1; }
.answer-correct::after { content: '✓ Resposta'; font-size: 10px; }
.answer-incorrect::after { content: 'Sua escolha'; font-size: 10px; }
.challenge-feedback { color: #727568; font-size: 13px; line-height: 1.65; margin: 20px 0 0; min-height: 22px; }
.feedback-correct { color: #3a582d; }
.feedback-compare { color: #934b2d; }
.answer-comparison, .self-assessment { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.training-tip { color: var(--muted); font-size: 11px; line-height: 1.8; margin: 26px 0 0; padding-top: 19px; border-top: 1px solid var(--line); }
@media(max-width:720px) {
  .workspace-tools { flex-wrap: wrap; gap: 12px; margin-bottom: 17px; }
  .mode-nav { flex: 1; }
  .mode-nav button { flex: 1; font-size: 11px; padding: 11px 8px; }
  .workspace-tools .volume-label { margin-left: auto; }
  .training { padding: 22px 17px; margin: 0 -4px; }
  .training-heading { flex-direction: column; align-items: stretch; gap: 20px; }
  .training-heading h2 { font-size: 34px; }
  .level-label select { font-size: 16px; width: 100%; }
  .training-description { font-size: 12px; }
  .references summary span { display: block; margin: 8px 0 0 15px; }
  .reference-notes { gap: 6px; }
  .reference-button { padding: 11px 12px; }
  .challenge-top { align-items: flex-start; flex-direction: column; gap: 8px; }
  .challenge-controls { gap: 8px; }
  .training-primary, .training-secondary { padding: 12px; font-size: 11px; }
  .recall-label { width: 100%; margin-left: 0; }
  .answer-options { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 7px; }
  .answer-button { padding: 17px 6px; }
  .answer-button strong { font-size: 18px; }
}