@font-face{font-family:Bravura;src:url('./vendor/Bravura.woff2') format('woff2');font-display:block}
:root{--page-width:1160px}
*{box-sizing:border-box}body{margin:0;color:var(--color-neutral-solid-gray-900);background:var(--color-neutral-white);font-family:var(--font-family-sans);font-size:var(--font-size-16);line-height:var(--line-height-170)}button,select,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}a{color:var(--color-key-900)}h1,h2,h3,p{margin:0}h1{font-size:var(--font-size-45);line-height:var(--line-height-150);letter-spacing:.02em}h2{font-size:var(--font-size-28);line-height:var(--line-height-150)}h3{font-size:var(--font-size-20);line-height:var(--line-height-150)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}.skip-link{position:absolute;top:-80px;left:16px;z-index:10;background:var(--color-neutral-white);padding:12px}.skip-link:focus{top:12px}.site-header{max-width:var(--page-width);margin:auto;min-height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--color-neutral-solid-gray-200)}.brand{display:flex;gap:12px;align-items:center;color:var(--color-neutral-solid-gray-900);text-decoration:none;font-weight:700;font-size:var(--font-size-22)}.brand-mark{display:grid;place-items:center;width:36px;height:44px;color:var(--color-key-900);font-size:var(--font-size-36);line-height:var(--line-height-100)}nav{display:flex;gap:32px}.nav-link{position:relative;padding:34px 0;text-decoration:none;font-size:var(--font-size-14);font-weight:700;color:var(--color-neutral-solid-gray-600)}.nav-link[aria-current=page]{color:var(--color-key-900)}.nav-link[aria-current=page]:after{content:'';height:3px;background:var(--color-key-900);position:absolute;bottom:0;left:0;right:0}main{max-width:var(--page-width);margin:auto;padding:0 28px;outline:none}.eyebrow{font-size:var(--font-size-14);font-weight:700;letter-spacing:.1em;color:var(--color-key-900)}.muted{color:var(--color-neutral-solid-gray-600)}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;padding:64px 0 56px}.hero-copy h1{margin:16px 0 22px}.hero-copy p:not(.eyebrow){color:var(--color-neutral-solid-gray-600);line-height:var(--line-height-175)}.hero-actions{display:flex;align-items:center;gap:20px;margin-top:32px}.dads-button{gap:10px}.arrow{font-weight:400;font-size:var(--font-size-20)}.microcopy{font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600);margin-top:12px!important}.hero-score{background:var(--color-key-50);border-radius:var(--border-radius-16);padding:24px 24px 30px;position:relative}.hero-score .score-label{font-size:var(--font-size-14);color:var(--color-key-1000);font-weight:700}.hero-score .music-sheet{display:block;width:100%;height:220px;margin:12px 0 4px}.hero-score-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--color-key-200);padding-top:18px;font-size:var(--font-size-14);color:var(--color-key-1000)}.hero-score-bottom strong{font-weight:700}.music-sheet{color:var(--color-neutral-solid-gray-900);overflow:visible}.music-clef{font-family:Bravura;font-size:80px;fill:currentColor}.staff-line{stroke:var(--color-neutral-solid-gray-420);stroke-width:1.2}.ledger-line{stroke:currentColor;stroke-width:1.5}.note-head{fill:currentColor}.note-stem{stroke:currentColor;stroke-width:1.8}.note-label{font-family:var(--font-family-sans);font-size:18px;fill:var(--color-key-1000);font-weight:700}.score-note{color:var(--color-key-900)}.practice-strip{border-block:1px solid var(--color-neutral-solid-gray-200);padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}.practice-strip p{font-size:var(--font-size-14)}.practice-strip strong{font-weight:700}.preferences{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.setting{display:flex;gap:10px;align-items:center;font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600)}.setting .dads-select__select{background:var(--color-neutral-white)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:48px 0 28px}.section-head p{color:var(--color-neutral-solid-gray-600);font-size:var(--font-size-14);margin-top:8px}.curriculum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}.course-group-header{padding-bottom:20px;border-bottom:2px solid var(--color-neutral-solid-gray-900);min-height:120px}.group-index{display:block;font-size:var(--font-size-14);font-weight:700;color:var(--color-key-900);margin-bottom:10px}.course-group-header p{font-size:var(--font-size-14);margin-top:8px;color:var(--color-neutral-solid-gray-600)}.course-link{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:20px 0;border-bottom:1px solid var(--color-neutral-solid-gray-200);text-decoration:none;color:var(--color-neutral-solid-gray-900)}.course-link:hover .course-title{text-decoration:underline;color:var(--color-key-900)}.course-title{display:block;font-weight:700;font-size:var(--font-size-16)}.course-meta{display:block;font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600);margin-top:6px}.course-arrow{color:var(--color-key-900);font-size:var(--font-size-24)}.completed{color:var(--color-semantic-success-1)}.mix-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:36px;padding:28px 0;border-block:1px solid var(--color-neutral-solid-gray-200)}.mix-row p{font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600);margin-top:6px}.guide{padding:36px 0 12px}.guide .dads-disclosure__summary{font-weight:700;cursor:pointer}.guide .dads-disclosure__content{max-width:780px;color:var(--color-neutral-solid-gray-600)}.guide p+p{margin-top:12px}.site-footer{max-width:var(--page-width);padding:32px 28px;margin:40px auto 0;border-top:1px solid var(--color-neutral-solid-gray-200);display:flex;justify-content:space-between;gap:24px;color:var(--color-neutral-solid-gray-600);font-size:var(--font-size-14)}.site-footer>span{font-weight:700;white-space:nowrap}.site-footer p{max-width:740px}.loading{padding:64px 0}.practice-page{max-width:900px;margin:auto;padding:32px 0}.practice-top{display:flex;justify-content:space-between;align-items:center;gap:16px}.back-link{font-size:var(--font-size-14)}.session-badge{font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600)}.practice-heading{margin:28px 0 24px;display:flex;justify-content:space-between;gap:16px;align-items:center}.practice-heading h1{font-size:var(--font-size-28);margin-top:8px}.progress-label{font-size:var(--font-size-16);white-space:nowrap;color:var(--color-neutral-solid-gray-600)}.progress-label strong{font-size:var(--font-size-28);color:var(--color-neutral-solid-gray-900)}.progress-track{height:4px;background:var(--color-neutral-solid-gray-100);margin-bottom:32px}.progress-fill{height:100%;background:var(--color-key-900)}.question-panel{text-align:center;padding:12px 24px 0;background:var(--color-neutral-solid-gray-50);border-radius:var(--border-radius-16)}.question-label{color:var(--color-neutral-solid-gray-600);font-size:var(--font-size-14);padding-top:12px}.question-title{font-size:var(--font-size-20);margin-top:8px}.question-visual{height:228px;display:flex;align-items:center;justify-content:center;overflow:hidden}.question-visual .music-sheet{height:224px;width:440px;max-width:100%}.question-tools{display:flex;align-items:center;justify-content:center;gap:24px;padding-bottom:12px;min-height:60px}.question-tools .dads-button{font-size:var(--font-size-14)}.icon{width:20px;height:20px;flex-shrink:0}.hint-content{padding:0 16px 24px;font-size:var(--font-size-14);color:var(--color-key-1000);text-align:left;max-width:620px;margin:auto}.answer-area{padding-top:28px}.answer-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:16px;font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600)}.answer-buttons{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}.answer-btn.dads-button{width:100%;min-height:76px;flex-direction:column;gap:8px;font-size:var(--font-size-24)}.answer-key{font-size:var(--font-size-14);font-weight:400;opacity:.75}.answer-btn.is-correct:disabled{background:var(--color-semantic-success-1);border-color:var(--color-semantic-success-1);color:var(--color-neutral-white)}.answer-btn.is-wrong:disabled{background:var(--color-primitive-red-50);border-color:var(--color-semantic-error-1);color:var(--color-semantic-error-1)}.answer-btn .mark{font-size:var(--font-size-14)}.feedback{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;min-height:110px;margin-top:24px;padding:22px 24px;border:1px solid var(--color-neutral-solid-gray-200);border-radius:var(--border-radius-12)}.feedback[data-correct=true]{border-color:var(--color-semantic-success-1)}.feedback[data-correct=false]{border-color:var(--color-semantic-error-1)}.feedback-title{font-size:var(--font-size-20);font-weight:700}.feedback p{font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600);margin-top:4px}.question-tip{text-align:center;margin-top:24px;font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600)}.sequence{display:flex;align-items:center;justify-content:center;gap:16px;width:100%}.sequence-note{font-size:var(--font-size-36);font-weight:700}.sequence-arrow{color:var(--color-neutral-solid-gray-420);font-size:var(--font-size-20)}.sequence-missing{color:var(--color-key-900);border-bottom:3px solid var(--color-key-900);min-width:64px;text-align:center}.keyboard-wrap{width:100%;max-width:600px}.keyboard-context{font-size:var(--font-size-20);margin-bottom:16px;font-weight:700}.piano{display:block;width:100%;height:142px}.piano-white{fill:var(--color-neutral-white);stroke:var(--color-neutral-solid-gray-600);stroke-width:1}.piano-black{fill:var(--color-neutral-solid-gray-900)}.piano-target{fill:var(--color-key-100)}.piano-label{font-size:16px;fill:var(--color-neutral-solid-gray-600);font-family:var(--font-family-sans)}.piano-target-label{font-weight:700;font-size:22px;fill:var(--color-key-900)}.result-page{max-width:820px;margin:auto;padding:48px 0}.result-heading{text-align:center;padding:28px 0 40px}.result-heading h1{font-size:var(--font-size-36);margin:16px 0}.result-heading>p{color:var(--color-neutral-solid-gray-600)}.result-score{font-size:var(--font-size-64);line-height:var(--line-height-120);font-weight:700;margin:24px 0 12px;color:var(--color-key-900)}.result-score span{font-size:var(--font-size-24);color:var(--color-neutral-solid-gray-600);font-weight:400}.result-stats{display:flex;justify-content:center;gap:40px;margin-top:24px;font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600)}.result-stats strong{color:var(--color-neutral-solid-gray-900)}.result-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:32px}.review-title{display:flex;justify-content:space-between;align-items:baseline;margin:24px 0 16px}.review-title h2{font-size:var(--font-size-22)}.review-title span{font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600)}.review-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--color-neutral-solid-gray-200)}.review-row{display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid var(--color-neutral-solid-gray-200);padding:16px 0}.review-row p{font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600)}.review-row strong{display:block;color:var(--color-neutral-solid-gray-900);font-size:var(--font-size-16)}.review-answer{white-space:nowrap;font-size:var(--font-size-20)}.review-answer del{color:var(--color-neutral-solid-gray-600);font-size:var(--font-size-16)}.history-page{padding:48px 0;max-width:900px;margin:auto}.history-page h1{font-size:var(--font-size-36);margin-bottom:12px}.history-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:32px 0 48px;padding:24px 0;border-block:1px solid var(--color-neutral-solid-gray-200)}.history-stat{padding:0 32px;border-right:1px solid var(--color-neutral-solid-gray-200)}.history-stat:first-child{padding-left:0}.history-stat:last-child{border-right:0}.history-stat span{font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600)}.history-stat strong{font-size:var(--font-size-36);display:block;margin-top:8px}.history-stat small{font-size:var(--font-size-16);font-weight:400;margin-left:8px}.history-list{list-style:none;padding:0;margin:20px 0}.history-list li{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;border-bottom:1px solid var(--color-neutral-solid-gray-200)}.history-list p{font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600);margin-top:4px}.history-list strong{font-size:var(--font-size-18)}.history-score{font-size:var(--font-size-24);white-space:nowrap;font-weight:700}.history-score span{font-size:var(--font-size-16);color:var(--color-neutral-solid-gray-600);font-weight:400}.empty-state{padding:48px 0}.empty-state p{margin:12px 0 24px;color:var(--color-neutral-solid-gray-600)}.storage-warning{padding:12px 16px;margin:16px 0;color:var(--color-semantic-error-1);background:var(--color-primitive-red-50);font-size:var(--font-size-14)}
@media(min-width:1600px){.hero{padding-block:80px}.hero-score .music-sheet{height:240px}}
@media(max-width:900px){h1{font-size:var(--font-size-36)}.hero{gap:28px}.hero-actions{align-items:start;flex-direction:column;gap:12px}.hero-score{padding:20px}.hero-score-bottom{align-items:start;gap:8px;flex-direction:column}.curriculum{gap:24px}.course-group-header{min-height:142px}.practice-strip{align-items:start;flex-direction:column;gap:16px}.site-footer{flex-direction:column}}
@media(max-width:640px){.site-header{min-height:76px;padding:0 20px}.brand{font-size:var(--font-size-18);gap:4px}.brand-mark{font-size:var(--font-size-28);width:28px}nav{gap:20px}.nav-link{font-size:var(--font-size-14);padding:26px 0}main{padding:0 20px}.hero{grid-template-columns:1fr;gap:28px;padding:36px 0 28px}.hero-copy h1{font-size:var(--font-size-32);margin:12px 0 16px}.hero-copy p:not(.eyebrow){font-size:var(--font-size-14)}.hero-actions{margin-top:24px;flex-direction:row;align-items:center}.hero-score{padding:16px 20px 20px}.hero-score .music-sheet{height:165px;margin:0}.hero-score-bottom{flex-direction:row;font-size:var(--font-size-14);padding-top:12px}.hero-score .score-label{font-size:var(--font-size-14)}.preferences{gap:16px;width:100%;justify-content:space-between}.setting{gap:8px}.setting .dads-select__select{font-size:var(--font-size-14);padding-left:10px;padding-right:30px}.section-head{margin-top:36px;margin-bottom:24px;display:block}.section-head h2{font-size:var(--font-size-24)}.curriculum{grid-template-columns:1fr;gap:32px}.course-group-header{min-height:0;padding-bottom:16px}.course-group-header h3{font-size:var(--font-size-22)}.course-link{padding:18px 0}.mix-row{align-items:start;flex-direction:column}.site-footer{padding:24px 20px;margin-top:24px}.practice-page{padding-top:20px}.practice-heading{margin-top:24px}.practice-heading h1{font-size:var(--font-size-22)}.session-badge{font-size:var(--font-size-14)}.progress-track{margin-bottom:20px}.question-panel{padding:8px 12px 0}.question-title{font-size:var(--font-size-18)}.question-visual{height:200px}.question-visual .music-sheet{height:195px}.question-tools{gap:12px}.answer-buttons{grid-template-columns:repeat(4,1fr);gap:10px}.answer-btn.dads-button{min-height:64px;font-size:var(--font-size-22)}.answer-key,.desktop-help{display:none}.feedback{grid-template-columns:1fr;gap:16px;padding:20px}.feedback .dads-button{width:100%}.question-tip{margin-top:16px}.sequence{gap:8px}.sequence-note{font-size:var(--font-size-28)}.sequence-arrow{font-size:var(--font-size-16)}.sequence-missing{min-width:44px}.result-page{padding-top:24px}.result-heading h1{font-size:var(--font-size-28)}.result-stats{gap:20px}.result-actions{flex-direction:column}.result-actions .dads-button{width:100%}.review-row{gap:12px}.history-page{padding-top:32px}.history-stats{gap:16px}.history-stat{padding:0 8px}.history-stat strong{font-size:var(--font-size-28)}.history-stat span{font-size:var(--font-size-14)}.history-list li{gap:12px}.history-list strong{font-size:var(--font-size-16)}}
@media(prefers-reduced-motion:no-preference){.progress-fill{transition:width .2s ease}.course-arrow{transition:transform .15s ease}.course-link:hover .course-arrow{transform:translateX(4px)}}
/* Keep the score and all seven answers together on a typical laptop. */
.practice-page{padding-top:20px}.practice-heading{margin:16px 0}.progress-track{margin-bottom:20px}.question-panel{padding-top:4px}.question-visual{height:180px}.question-visual .music-sheet{height:180px}.question-tools{min-height:48px;padding-bottom:8px}.answer-area{padding-top:20px}.answer-btn.dads-button{min-height:64px}.answer-heading{margin-bottom:10px}
@media(max-width:640px){.practice-page{padding-top:16px}.practice-heading{margin:20px 0 16px}.question-visual{height:176px}.question-visual .music-sheet{height:176px}.question-tools{gap:8px}.answer-area{padding-top:18px}.answer-btn.dads-button{min-height:56px}.question-title{font-size:var(--font-size-18)}}
.answer-btn.dads-button{min-width:0;padding-inline:8px}
.question-tools .dads-button{min-width:0;white-space:nowrap;padding-inline:8px}.brand,.nav-link{white-space:nowrap}
@media(max-width:360px){.site-header{padding-inline:16px}.brand{font-size:var(--font-size-16)}.brand-mark{width:22px;font-size:var(--font-size-24)}nav{gap:12px}main{padding-inline:16px}.practice-top{align-items:flex-start;flex-direction:column;gap:8px}.practice-heading h1{font-size:var(--font-size-20)}.progress-label strong{font-size:var(--font-size-24)}.answer-btn.dads-button{font-size:var(--font-size-20);padding-inline:4px}.hero-actions{flex-direction:column;align-items:flex-start}.preferences{gap:12px}.hero-score-bottom{flex-direction:column}}
.hero-line{display:inline-block}
@media(max-width:640px){.hero-actions{flex-direction:column;align-items:flex-start;gap:16px}.hero-actions .dads-button{min-width:0;white-space:nowrap;padding-inline:20px}}
/* Interval and chord practice share the existing course and answer controls. */
.hero-actions{flex-wrap:wrap}.advanced-section{margin-top:48px;padding-top:4px;border-top:2px solid var(--color-neutral-solid-gray-900);scroll-margin-top:24px}.advanced-section .section-head{margin-top:28px}.advanced-settings{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;padding:20px 0;border-block:1px solid var(--color-neutral-solid-gray-200)}.advanced-settings .microcopy{margin:0!important}.advanced-note{font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600);margin:14px 0 28px}.advanced-courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.advanced-course{display:block;color:var(--color-neutral-solid-gray-900);text-decoration:none;border-bottom:1px solid var(--color-neutral-solid-gray-200);padding:0 0 24px}.advanced-course:hover h3{text-decoration:underline;color:var(--color-key-900)}.advanced-course p{font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600);margin:10px 0 16px}.advanced-course .dads-link{font-size:var(--font-size-14)}.chord-heading{margin-top:32px}.chord-heading p{font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600);margin-top:8px}.chord-courses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.advanced-practice .question-visual{height:224px}.advanced-practice .question-visual .music-sheet{height:224px}.whole-note-hole{fill:var(--color-neutral-solid-gray-50)}.music-accidental{font-family:Bravura;font-size:40px;fill:currentColor}.harmony-label{font-size:16px}.answer-degrees{grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}.answer-terms{grid-template-columns:repeat(4,minmax(0,1fr))}.answer-terms .answer-btn{font-size:var(--font-size-20)}.advanced-practice .practice-top{align-items:flex-start}.advanced-practice .session-badge{text-align:right}.review-answer{white-space:normal;text-align:right;overflow-wrap:anywhere}
@media(max-width:640px){.advanced-courses,.chord-courses{grid-template-columns:1fr;gap:24px}.advanced-course{padding-bottom:24px}.advanced-settings{gap:16px}.advanced-settings .setting{justify-content:space-between;width:100%}.advanced-settings .dads-select{min-width:180px}.advanced-settings select{width:100%}.chord-courses{gap:0}.advanced-practice .practice-top{flex-direction:column;gap:8px}.advanced-practice .session-badge{text-align:left}.advanced-practice .question-visual,.advanced-practice .question-visual .music-sheet{height:210px}.advanced-practice .question-tools{gap:4px;flex-wrap:wrap}.advanced-practice .question-tools .dads-button{padding-inline:4px;font-size:var(--font-size-14);gap:4px}.advanced-practice .question-tools .icon{width:16px;height:16px}.answer-degrees{grid-template-columns:repeat(3,minmax(0,1fr))}.answer-terms{grid-template-columns:repeat(2,minmax(0,1fr))}.answer-terms .answer-btn{font-size:var(--font-size-18)}.review-row{align-items:flex-start}.review-answer{max-width:40%;flex-shrink:0}}

.interval-guide{margin:0 0 28px}.interval-guide .dads-disclosure__summary{cursor:pointer;font-weight:700}.interval-guide .dads-disclosure__content{font-size:var(--font-size-14);max-width:820px}.interval-guide p+p{margin-top:12px}.interval-reference{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;margin:16px 0}.interval-reference>div{display:flex;justify-content:space-between;border-bottom:1px solid var(--color-neutral-solid-gray-200);padding-bottom:6px;gap:8px}.interval-reference dt{font-weight:700}.interval-reference dd{margin:0}@media(max-width:640px){.interval-reference{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}}
/* Keep remote ledger notes at a readable scale and grow the score vertically. */
.question-visual:has(.extended-sheet){height:auto;min-height:180px;overflow:visible;padding-block:8px}.question-visual .music-sheet.extended-sheet{width:440px;max-width:100%;height:auto;flex-shrink:0}.audio-preference{display:flex;gap:8px 20px;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 8px 16px;font-size:var(--font-size-14);color:var(--color-neutral-solid-gray-600)}.audio-preference .dads-button{font-size:var(--font-size-14);padding-inline:8px;min-width:0;gap:6px}.practice-strip{flex-wrap:wrap}.preferences{justify-content:flex-start}.advanced-settings{align-items:center}.advanced-note{overflow-wrap:anywhere}@media(max-width:640px){.preferences{flex-wrap:wrap;width:100%;gap:12px}.preferences .setting{width:100%;justify-content:space-between}.audio-preference{gap:0;padding-inline:0}.audio-preference>span{width:100%}.advanced-practice .session-badge{font-size:var(--font-size-14)}.question-visual:has(.extended-sheet){min-height:0}}
@media(max-width:640px){.practice-top{align-items:flex-start;flex-direction:column;gap:8px}.practice-top .back-link{white-space:nowrap}.session-badge{text-align:left}}

/* Practice uses the available screen for the score and the current action. */
body:has(.practice-page) .site-footer{display:none}
.practice-top>[data-action="toggle-sound"]{font-size:var(--font-size-14);min-width:0;padding-inline:8px;gap:6px;white-space:nowrap}
.feedback-selected{display:none}

@media all{
  body:has(.practice-page) .site-header{display:none}
  body:has(.practice-page) main{padding-inline:16px}
  .practice-page{height:100vh;height:100svh;min-height:500px;padding:4px 0 max(12px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto auto 4px minmax(160px,1fr) auto;gap:8px}
  .practice-top,.advanced-practice .practice-top{flex-direction:row;align-items:center;gap:8px;min-width:0}
  .practice-top .session-badge,.practice-heading .eyebrow,.practice-page>.question-tip{display:none}
  .practice-heading{margin:0;gap:12px;min-width:0}
  .practice-heading h1{font-size:var(--font-size-18);line-height:var(--line-height-150);margin:0}
  .progress-label,.progress-label strong{font-size:var(--font-size-16)}
  .progress-track{margin:0}
  .question-panel{position:relative;min-width:0;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;padding:8px 8px 0}
  .question-label{padding:0;font-size:var(--font-size-14)}
  .question-title{margin:2px 0 0;font-size:var(--font-size-18);line-height:var(--line-height-150)}
  .question-panel .question-visual,.question-panel .question-visual:has(.extended-sheet){height:auto;min-height:0;padding:0;overflow:hidden}
  .question-panel .question-visual .music-sheet,.question-panel .question-visual .music-sheet.extended-sheet{width:100%;height:100%;max-height:100%;max-width:460px;flex-shrink:1}
  .question-tools,.advanced-practice .question-tools{min-height:44px;gap:4px;padding:0;flex-wrap:nowrap}
  .question-tools .dads-button,.advanced-practice .question-tools .dads-button{min-height:44px;padding:8px 4px;gap:4px;font-size:var(--font-size-14)}
  .question-tools .icon{width:16px;height:16px}
  .audio-preference{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .hint-content{position:absolute;inset:auto 8px 48px;max-height:calc(100% - 64px);overflow-y:auto;padding:12px;background:var(--color-neutral-white);border:1px solid var(--color-key-600);border-radius:var(--border-radius-8);line-height:var(--line-height-150)}
  .response-area{min-width:0}
  .answer-area{padding:0}
  .answer-heading{margin:0 0 6px;font-size:var(--font-size-14)}
  .desktop-help,.answer-key{display:none}
  .answer-buttons{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .answer-buttons.answer-degrees{grid-template-columns:repeat(3,minmax(0,1fr))}
  .answer-buttons.answer-terms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .answer-btn.dads-button{min-height:48px;padding:8px 4px;gap:0;font-size:var(--font-size-22)}
  .answer-terms .answer-btn.dads-button{font-size:var(--font-size-18)}
  .practice-page[data-answered=true] .answer-area{display:none}
  .feedback{position:relative;margin:0;padding:12px;min-height:0;gap:12px;grid-template-columns:1fr;line-height:var(--line-height-150)}
  .feedback-title{font-size:var(--font-size-18)}
  .feedback-selected{display:block}
  .feedback p{font-size:var(--font-size-14)}
  .feedback .dads-button{width:100%;min-height:48px}
  .feedback-details{font-size:var(--font-size-14);margin-top:4px}
  .feedback-details .dads-disclosure__summary{min-height:44px;align-items:center;cursor:pointer;color:var(--color-key-900)}
  .feedback-details .dads-disclosure__content{position:absolute;bottom:calc(100% + 8px);left:0;right:0;z-index:1;max-height:40svh;overflow-y:auto;background:var(--color-neutral-white);padding:16px;border:1px solid var(--color-neutral-solid-gray-420);border-radius:var(--border-radius-8)}
  .keyboard-wrap{width:100%;min-height:0}
  .keyboard-context{font-size:var(--font-size-16)}
  .keyboard-wrap .piano{max-height:130px}
  .practice-page>.storage-warning{position:fixed;top:8px;left:16px;right:16px;z-index:2}
}
@media(min-width:761px), (min-width:600px) and (max-height:500px){
  .practice-page{max-width:1000px;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);grid-template-rows:auto auto 4px minmax(160px,1fr)}
  .practice-top,.practice-heading,.progress-track{grid-column:1/-1}
  .question-panel{grid-column:1;grid-row:4}
  .response-area{grid-column:2;grid-row:4;align-self:center}
}
@media(min-width:600px) and (max-height:500px){
  .practice-page{min-height:340px;grid-template-columns:minmax(0,1fr) minmax(240px,.8fr)}
  .feedback{padding:8px;gap:8px}
  .feedback p:not(.feedback-selected){max-height:84px;overflow-y:auto}
}