.app-shell{max-width:none}.hero{display:none}
.hand-map-views{display:flex;gap:8px;flex:none;margin:0 0 8px}.hand-map-views button{padding:7px 16px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);font-weight:700;font-size:14px}.hand-map-views button[aria-pressed=true]{background:var(--accent);color:var(--bg)}
.hand-map-fullscreen{border:1px solid #5aceef;border-radius:10px;padding:9px 15px;background:#19445b;color:white;font:700 14px system-ui;white-space:nowrap}
.top-actions{direction:ltr}.top-actions .theme-wrap{order:0}.top-actions .hand-map-fullscreen{order:1}.top-actions .language-button{order:2}
body[data-hand-view=keyboard] .major-panel,body[data-hand-view=keyboard] .interval-panel,body[data-hand-view=major] .lesson-grid,body[data-hand-view=major] .landmark-panel,body[data-hand-view=major] .steps,body[data-hand-view=major] .interval-panel,body[data-hand-view=interval] .lesson-grid,body[data-hand-view=interval] .landmark-panel,body[data-hand-view=interval] .steps,body[data-hand-view=interval] .major-panel{display:none}
body[data-hand-view=keyboard] .app-shell{height:100dvh;display:flex;flex-direction:column;min-height:0}
.topbar{padding:8px 18px;min-height:58px;flex:none}.brand-kicker{font-size:10px}.brand-copy strong{font-size:16px}
body[data-hand-view=keyboard] main{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 18px;gap:7px}
body[data-hand-view=keyboard] .steps{margin:0;flex:none;gap:7px}body[data-hand-view=keyboard] .steps button{padding:7px 10px;font-size:13px}
body[data-hand-view=keyboard] .lesson-grid{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
body[data-hand-view=keyboard] .lesson-grid>.panel{min-height:0;padding:14px;display:flex;flex-direction:column;gap:6px}
.panel-heading{margin:0;flex:none}.panel-heading h2{font-size:21px;margin:0}.panel-heading .eyebrow{font-size:10px}.play-button{font-size:13px;padding:7px 13px}
body[data-hand-view=keyboard] .lead{font-size:13px;margin:0;line-height:1.4}.keyboard-layout{flex:1;min-height:0;align-content:center}.hand-keyboard{min-width:0}.keyboard-layout.split{grid-template-columns:1fr 1fr;gap:12px}.staff-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.staff-wrap svg{width:100%;max-height:100%;height:auto}.tip{font-size:12px;line-height:1.4;margin:0;flex:none}
body[data-hand-view=keyboard] .landmark-panel{margin:0;padding:8px 15px;flex:none}body[data-hand-view=keyboard] .landmark-panel .panel-body{gap:16px}.landmark-panel h2{font-size:17px;margin:0}.landmark-panel p{font-size:12px;line-height:1.4}.landmark-panel .eyebrow{display:none}.landmark-keys{height:57px;flex-basis:112px;width:112px}.mini-black{height:34px;width:17px}.mini-black.one{left:28px}.mini-black.two{left:66px}.mini-white{font-size:12px;padding-bottom:2px}
@media(max-width:700px){.topbar{padding:6px 8px;gap:6px;min-height:51px}.brand{gap:6px}.brand-copy strong{font-size:12px}.brand-kicker{font-size:8px}.top-actions{gap:4px}.icon-button{width:32px;height:32px;flex-basis:32px;font-size:15px}.language-button{font-size:10px;padding:5px}.hand-map-fullscreen{font-size:10px;padding:6px}.hand-map-views{gap:4px;margin-bottom:3px}.hand-map-views button{font-size:11px;padding:6px 8px}body[data-hand-view=keyboard] main{padding:7px;gap:5px}body[data-hand-view=keyboard] .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}body[data-hand-view=keyboard] .steps button{font-size:10px;padding:5px 3px}body[data-hand-view=keyboard] .lesson-grid{grid-template-columns:1fr;grid-template-rows:1.1fr 1fr;gap:6px}body[data-hand-view=keyboard] .lesson-grid>.panel{padding:10px;gap:4px}.panel-heading h2{font-size:16px}.panel-heading .eyebrow{font-size:9px}body[data-hand-view=keyboard] .lead{font-size:11px}.tip{font-size:10px}.play-button{font-size:11px;padding:5px 8px}.finger-role-row{min-height:25px;margin:2px 0}.finger-role{font-size:9px;padding:3px}.landmark-panel h2{font-size:13px}.landmark-panel p{font-size:10px}body[data-hand-view=keyboard] .landmark-panel{padding:6px 9px}.landmark-keys{height:42px;flex-basis:84px;width:84px}.mini-black{height:26px;width:12px}.mini-black.one{left:22px}.mini-black.two{left:49px}body[data-hand-view=keyboard] .landmark-panel .panel-body{flex-direction:row;gap:8px}.keyboard-layout.split{grid-template-columns:1fr 1fr;gap:7px}.hand-label{font-size:11px}.key-solfege{font-size:9px}}
@media(orientation:landscape) and (max-height:550px){.topbar{min-height:43px;padding:4px 10px}.hand-map-views button{font-size:11px;padding:4px 12px}.hand-map-views{margin:0}.brand-copy strong{font-size:13px}.brand-kicker{display:none}body[data-hand-view=keyboard] main{padding:5px 10px;gap:4px}body[data-hand-view=keyboard] .steps button{padding:4px;font-size:10px}body[data-hand-view=keyboard] .lesson-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:7px}body[data-hand-view=keyboard] .lesson-grid>.panel{padding:7px}.panel-heading h2{font-size:14px}.panel-heading .eyebrow{display:none}body[data-hand-view=keyboard] .lead{font-size:10px}.tip{font-size:9px}.landmark-panel h2{font-size:12px}.landmark-panel p{font-size:9px}.landmark-keys{height:34px;flex-basis:72px}.mini-black{height:21px}.finger-role-row{min-height:20px;margin:0}.finger-role{font-size:8px;padding:2px}.hand-label{font-size:10px}.play-button{font-size:10px;padding:4px 7px}}
@media print{.hand-map-views,.hand-map-fullscreen{display:none}}
body[data-hand-view=keyboard] .lesson-grid{align-items:stretch}
.lesson-grid>.panel>.panel-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:5px}
.lesson-grid>.panel.is-collapsed>.panel-body{display:none}
.staff-wrap .grand-staff{min-width:0}
@media(orientation:landscape) and (max-height:550px){.keyboard{height:70px}.hand-keyboard{padding:5px}.hand-caption{font-size:8px;margin-top:3px}.hand-label{font-size:9px;margin-bottom:3px}.key-label{font-size:9px}.key-label small{font-size:8px}.key-solfege{font-size:8px}.step-num{width:22px;height:22px;flex-basis:22px}.staff-legend{font-size:9px;margin-top:4px}.collapse-icon{width:25px;height:25px}.panel h2{font-size:14px}.finger-role-row{min-height:19px}.landmark-panel .panel-body{gap:8px}}
.brand-copy .hand-studio-brand{display:flex;align-items:center;gap:7px;color:var(--text);font-size:14px;font-weight:800;letter-spacing:0;direction:ltr}.hand-studio-brand img{width:26px;height:26px;object-fit:contain;flex:none}
@media(max-width:700px){.brand-copy .hand-studio-brand{font-size:11px;gap:4px}.hand-studio-brand img{width:21px;height:21px}}
@media(orientation:landscape) and (max-height:550px){.brand-copy .hand-studio-brand{display:flex;font-size:11px}.hand-studio-brand img{width:20px;height:20px}}
/* Interval reference occupies one viewport, split into focused pages. */
body[data-hand-view=interval] .app-shell{height:100dvh;display:flex;flex-direction:column;min-height:0}
body[data-hand-view=interval] main{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 18px;gap:7px}
body[data-hand-view=interval] .interval-panel{flex:1;min-height:0;margin:0;padding:14px;display:flex;flex-direction:column;gap:8px}
.interval-panel>.panel-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.interval-panel.is-collapsed>.panel-body{display:none}
.interval-pages{display:flex;flex-wrap:wrap;gap:7px;flex:none}.interval-pages button{border:1px solid var(--line);background:var(--panel-alt);color:var(--text);border-radius:8px;font:700 13px system-ui;padding:6px 13px}.interval-pages button[aria-pressed=true]{background:#74529a;border-color:#bd98e2;color:#fff}
.interval-panel[data-page=explore] .comparison-tabs,.interval-panel[data-page=explore] .comparison-panel,.interval-panel[data-page=explore] #intervalParity,.interval-panel:not([data-page=explore]) .interval-options,.interval-panel:not([data-page=explore]) .interval-display,.interval-panel:not([data-page=compare]) .comparison-tabs,.interval-panel:not([data-page=compare]) .comparison-panel,.interval-panel[data-page=compare] #intervalParity{display:none!important}
.interval-panel[data-page=parity] .triad-summary,.interval-panel[data-page=triad] .parity-table,.interval-panel[data-page=triad] .octave-note,.interval-panel[data-page=triad] .parity-block>h3{display:none}
.interval-panel .interval-controls{margin:0;flex:none}.interval-panel .interval-controls select{padding:5px 10px}.interval-panel .interval-options{margin:0;gap:6px}.interval-panel .interval-options button{font-size:13px;padding:6px 10px}
.interval-panel .interval-display{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) 1fr}.interval-panel .mini-staff{min-height:0;display:flex;align-items:center;justify-content:center}.interval-panel .mini-staff svg{max-height:min(40dvh,300px);width:100%;max-width:550px}
.interval-panel .comparison-tabs{margin:0;gap:7px}.interval-panel .comparison-panel{flex:1;min-height:0}.interval-panel .fifth-rule{font-size:14px;line-height:1.4;margin:5px 0 8px}.interval-panel .fifth-examples{grid-template-columns:1fr 1fr;gap:12px}.interval-panel .fifth-example{padding:10px}.interval-panel .fifth-example svg{max-height:32dvh}.interval-panel .fifth-example strong{font-size:14px;margin-bottom:5px}
#intervalParity{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}#intervalParity .parity-block{width:100%;max-width:1050px;margin:0;padding:14px}.parity-block h3{margin:0 0 7px}.parity-table{border-spacing:0 4px}.parity-table th,.parity-table td{padding:6px 10px}.octave-note{margin:7px 0 0;padding:7px 10px;font-size:13px}.interval-panel .triad-summary{margin:0;padding:0;border:0}.triad-summary p{font-size:16px;line-height:1.5}.triad-degrees{margin:12px 0}.interval-panel .lead{font-size:13px;line-height:1.4;margin:3px 0}.interval-panel #intervalCaveat{font-size:11px;margin:0;line-height:1.3;flex:none}
@media(max-width:700px){body[data-hand-view=interval] main{padding:7px;gap:5px}body[data-hand-view=interval] .interval-panel{padding:10px;gap:6px}.interval-pages{gap:4px}.interval-pages button{font-size:11px;padding:6px 8px}.interval-panel .interval-options{gap:4px}.interval-panel .interval-options button{font-size:11px;padding:5px 7px}.interval-panel .interval-controls{gap:7px;font-size:12px}.interval-panel .interval-display{grid-template-columns:1fr;align-content:center;gap:10px}.interval-panel .mini-staff svg{max-height:30dvh;max-width:300px}.interval-copy h3{font-size:17px}.interval-copy p{font-size:13px}.interval-panel .fifth-examples{gap:7px}.interval-panel .fifth-example{padding:5px}.interval-panel .fifth-example strong{font-size:10px}.interval-panel .fifth-rule{font-size:12px}.interval-panel .comparison-tab{font-size:12px;padding:6px 9px}#intervalParity .parity-block{padding:9px}.parity-table th,.parity-table td{padding:6px;font-size:12px}.parity-block h3{font-size:15px}.interval-number{width:24px;height:24px;font-size:13px;margin-inline-end:4px}.octave-note{font-size:11px}.triad-summary p{font-size:13px}.triad-degree{padding:6px;gap:5px}.triad-degree small{font-size:11px}.interval-panel .lead{font-size:11px}.interval-panel #intervalCaveat{font-size:10px}}
@media(orientation:landscape) and (max-height:550px){body[data-hand-view=interval] main{padding:5px 10px;gap:4px}body[data-hand-view=interval] .interval-panel{padding:7px;gap:4px}.interval-panel>.panel-body{gap:4px}.interval-pages button{font-size:10px;padding:4px 9px}.interval-panel .lead{font-size:10px}.interval-panel .interval-controls{font-size:11px}.interval-panel .interval-controls select{font-size:11px;padding:2px 8px}.interval-panel .interval-options button{font-size:10px;padding:3px 7px}.interval-panel .interval-display{grid-template-columns:1fr 1fr;gap:10px}.interval-panel .mini-staff svg{max-height:115px}.interval-copy h3{font-size:14px}.interval-copy p{font-size:11px}.interval-panel .comparison-tab{font-size:10px;padding:3px 9px}.interval-panel .fifth-rule{font-size:10px;margin:2px 0}.interval-panel .fifth-example{padding:4px}.interval-panel .fifth-example strong{font-size:10px;margin:0}.interval-panel .fifth-example svg{max-height:100px}#intervalParity .parity-block{padding:6px}.parity-table{border-spacing:0 2px}.parity-table th,.parity-table td{font-size:10px;padding:2px 7px}.interval-number{width:17px;height:17px;font-size:10px}.parity-block h3{font-size:12px;margin-bottom:3px}.octave-note{font-size:10px;margin-top:3px;padding:3px 6px}.triad-summary p{font-size:11px;margin:4px 0}.triad-degrees{margin:5px 0}.triad-degree{padding:3px 7px}.triad-degree b{font-size:15px}.interval-panel #intervalCaveat{font-size:9px}}
/* Fifth/octave comparison: aligned controls and two balanced staff examples. */
body[data-hand-view=interval] .interval-panel[data-page=compare]>.panel-body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px 16px;min-height:0}
.interval-panel[data-page=compare] .interval-pages{grid-column:1/-1;grid-row:1}
.interval-panel[data-page=compare] .interval-controls{grid-column:1;grid-row:2}
.interval-panel[data-page=compare] .comparison-tabs{grid-column:2;grid-row:2;align-self:center}
.interval-panel[data-page=compare] .comparison-panel:not([hidden]){grid-column:1/-1;grid-row:3;display:flex;flex-direction:column;min-height:0;gap:8px}
.interval-panel[data-page=compare] #intervalCaveat{grid-column:1/-1;grid-row:4}
#fifthComparison .fifth-rule,#octaveComparison .fifth-rule{margin:0;padding:7px 10px;border-radius:8px;background:var(--panel-alt);font-size:13px;line-height:1.4;flex:none}
#fifthComparison .fifth-examples,#octaveComparison .fifth-examples{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:14px;flex:1;min-height:0}
#fifthComparison .fifth-example,#octaveComparison .fifth-example{display:flex;flex-direction:column;justify-content:center;min-height:0;min-width:0;padding:10px;gap:7px}
#fifthComparison .fifth-example strong,#octaveComparison .fifth-example strong{text-align:center;margin:0;flex:none}
#fifthComparison .fifth-example svg,#octaveComparison .fifth-example svg{width:100%;height:100%;min-height:0;max-height:min(34dvh,260px);flex:0 1 auto;object-fit:contain}
@media(max-width:700px){body[data-hand-view=interval] .interval-panel[data-page=compare]>.panel-body{gap:6px;grid-template-columns:minmax(0,1fr) auto}.interval-panel[data-page=compare] .interval-controls{display:flex;flex-direction:column;align-items:start;gap:3px}.interval-panel[data-page=compare] .comparison-tabs{gap:4px}.interval-panel[data-page=compare] .comparison-tab{font-size:11px;padding:6px 8px}#fifthComparison .fifth-examples,#octaveComparison .fifth-examples{gap:6px}#fifthComparison .fifth-example,#octaveComparison .fifth-example{padding:5px;gap:4px}#fifthComparison .fifth-rule,#octaveComparison .fifth-rule{font-size:11px;padding:5px 7px}#fifthComparison .fifth-example svg,#octaveComparison .fifth-example svg{max-height:230px}}
@media(orientation:landscape) and (max-height:550px){body[data-hand-view=interval] .interval-panel[data-page=compare]>.panel-body{gap:3px 10px}#fifthComparison .fifth-rule,#octaveComparison .fifth-rule{font-size:10px;padding:3px 7px}#fifthComparison .fifth-example,#octaveComparison .fifth-example{padding:4px;gap:2px}#fifthComparison .fifth-example svg,#octaveComparison .fifth-example svg{max-height:100px}}
/* Readable caveat and consistent studio information buttons. */
.interval-panel #intervalCaveat{font-size:14px;line-height:1.5;color:var(--text);padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel-alt)}
.hand-info,.interval-pages button.hand-info{width:25px;height:25px;padding:0;align-self:center;flex:none;border:1px solid #9d7cbb;border-radius:6px;background:#49365f;color:#e5d3fa;font:18px/1 system-ui;cursor:pointer}
.interval-panel #intervalCaveat+.hand-info{align-self:flex-end;margin-top:-34px;margin-inline-end:8px;position:relative;z-index:1}
.interval-panel #intervalCaveat{padding-inline-end:42px}
.hand-map-help{width:min(570px,calc(100vw - 32px));max-height:90dvh;padding:25px;border:1px solid #9d7cbb;border-radius:18px;background:var(--panel);color:var(--text);box-shadow:0 20px 80px #0008}
.hand-map-help::backdrop{background:#060c17bf;backdrop-filter:blur(4px)}.hand-map-help h2{font:700 25px system-ui;color:#d8c5f5;margin:8px 0 16px}.hand-map-help p{font:18px/1.8 system-ui;margin:0 0 20px}.hand-map-help button{padding:7px 15px;border:1px solid var(--line);border-radius:8px;background:var(--panel-alt);color:var(--text);font:700 14px system-ui}.hand-help-close{float:inline-end}
.interval-panel[data-page=compare] #intervalCaveat+.hand-info{grid-column:1/-1;grid-row:4;justify-self:end;align-self:center;margin:0 8px}
@media(max-width:700px){.interval-panel #intervalCaveat{font-size:12px;line-height:1.5;padding:7px 10px;padding-inline-end:37px}.hand-info,.interval-pages button.hand-info{width:21px;height:23px;font-size:16px}.interval-pages{gap:4px}.interval-pages button{font-size:10px;padding:5px}.hand-map-help p{font-size:15px;line-height:1.65}}
@media(orientation:landscape) and (max-height:550px){.interval-panel #intervalCaveat{font-size:11px;padding:5px 10px;padding-inline-end:35px}.hand-info,.interval-pages button.hand-info{width:20px;height:20px;font-size:15px}.hand-map-help{padding:16px}.hand-map-help p{font-size:14px;line-height:1.5}}
.interval-panel[data-page=triad] .triad-summary{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1fr);gap:10px 24px;align-items:center}
.interval-panel[data-page=triad] .triad-summary>h3{grid-column:1/-1}
.interval-panel[data-page=triad] .triad-staff{grid-column:1;grid-row:2/span 3;min-width:0;direction:ltr}
.triad-staff svg{display:block;width:100%;max-height:280px;background:#f9f8f3;border:1px solid var(--line);border-radius:12px}
.interval-panel[data-page=triad] .triad-degrees,.interval-panel[data-page=triad] .triad-summary>p{grid-column:2;margin:0}
.interval-panel:not([data-page=triad]) .triad-staff{display:none}
@media(max-width:700px){.interval-panel[data-page=triad] .triad-summary{grid-template-columns:1fr;gap:9px}.interval-panel[data-page=triad] .triad-staff{grid-column:1;grid-row:auto}.interval-panel[data-page=triad] .triad-degrees,.interval-panel[data-page=triad] .triad-summary>p{grid-column:1}.triad-staff svg{max-height:180px}.interval-panel[data-page=triad] .triad-degrees{gap:5px}}
@media(orientation:landscape) and (max-height:550px){.interval-panel[data-page=triad] .triad-summary{grid-template-columns:minmax(180px,.65fr) 1fr;gap:4px 14px}.interval-panel[data-page=triad] .triad-staff{grid-column:1;grid-row:2/span 3}.interval-panel[data-page=triad] .triad-degrees,.interval-panel[data-page=triad] .triad-summary>p{grid-column:2}.triad-staff svg{max-height:140px}}
/* Keep the interval SVG inside its own grid cell, even with browser zoom. */
.interval-panel[data-page=explore] .interval-display{min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch;overflow:hidden}
.interval-panel[data-page=explore] #intervalStaff{position:relative;min-height:0;min-width:0;height:100%;overflow:hidden}
.interval-panel[data-page=explore] #intervalStaff svg{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;background:transparent;border:0;border-radius:0}
.interval-panel[data-page=explore] .interval-copy{align-self:center;min-width:0}
@media(max-width:700px){.interval-panel[data-page=explore] .interval-display{grid-template-rows:minmax(0,1fr) auto}.interval-panel[data-page=explore] #intervalStaff{min-height:80px}.interval-panel[data-page=explore] .interval-copy{align-self:end}}
@media(orientation:landscape) and (max-height:550px){.interval-panel[data-page=explore] .interval-display{grid-template-rows:minmax(0,1fr)}.interval-panel[data-page=explore] #intervalStaff{min-height:0}.interval-panel[data-page=explore] .interval-copy{align-self:center}}
.interval-panel[data-page=explore] #intervalStaff{background:#f9f8f3;border:1px solid var(--line);border-radius:12px}
/* Reserve distinct rows for the keyboard, finger caption and explanatory tip. */
body[data-hand-view=keyboard] #keyboardLayout{min-height:0;align-content:stretch;grid-template-rows:minmax(0,1fr);gap:10px}
body[data-hand-view=keyboard] #keyboardLayout .hand-keyboard{display:flex;flex-direction:column;min-height:0;height:100%;gap:4px;padding:9px}
#keyboardLayout .hand-label,#keyboardLayout .finger-role-row,#keyboardLayout .hand-caption{flex:none}
#keyboardLayout .key-stack{flex:1;min-height:40px}
#keyboardLayout .keyboard{height:100%;min-height:40px;max-height:210px}
#keyboardLayout .hand-caption{position:static;line-height:1.35;margin:3px 0 0;padding:0 3px}
#keyboardTip{position:static;flex:none;margin-top:6px;padding-top:5px;border-top:1px solid var(--line);line-height:1.5}
@media(max-width:700px){body[data-hand-view=keyboard] #keyboardLayout .hand-keyboard{padding:6px;gap:2px}#keyboardLayout .hand-caption{font-size:10px}#keyboardTip{font-size:10px;margin-top:3px;padding-top:3px}}
@media(orientation:landscape) and (max-height:550px){#keyboardLayout .key-stack,#keyboardLayout .keyboard{min-height:30px}#keyboardLayout .hand-caption{font-size:8px;margin:0}body[data-hand-view=keyboard] #keyboardLayout .hand-keyboard{padding:4px;gap:1px}#keyboardTip{font-size:9px;line-height:1.35;margin-top:2px;padding-top:2px}}
@media(orientation:landscape) and (max-height:550px){#keyboardLayout .finger-role-row{display:none}.keyboard-panel #stageDescription{display:none}#keyboardLayout .key-stack,#keyboardLayout .keyboard{min-height:20px}.keyboard-panel .panel-body{gap:2px}}
/* Compact information controls keep all topic buttons on the same row. */
.hand-info,.interval-pages button.hand-info{width:20px;height:21px;min-width:20px;min-height:0;font-size:15px;border-radius:5px;padding:0}
.hand-map-views,.interval-pages{gap:5px;align-items:center}
.hand-map-views>button:not(.hand-info){padding:6px 12px}
.interval-pages>button:not(.hand-info){padding:5px 10px;font-size:12px}
@media(max-width:700px){.hand-info,.interval-pages button.hand-info{width:17px;height:19px;min-width:17px;font-size:13px}.hand-map-views,.interval-pages{gap:3px}.hand-map-views>button:not(.hand-info){font-size:10px;padding:5px 7px}.interval-pages>button:not(.hand-info){font-size:10px;padding:5px 6px}}
@media(orientation:landscape) and (max-height:550px){.hand-info,.interval-pages button.hand-info{width:17px;height:18px;min-width:17px;font-size:13px}.interval-pages>button:not(.hand-info){font-size:10px;padding:4px 8px}}
/* Info buttons must override the broad topic-tab styles. */
.app-shell main .hand-map-views>button.hand-info,.app-shell main .interval-pages>button.hand-info{display:inline-flex;align-items:center;justify-content:center;flex:0 0 21px;width:21px;height:22px;min-width:21px;min-height:0;max-width:21px;max-height:22px;padding:0!important;margin:0;align-self:center;border:1px solid #ac88c7!important;border-radius:5px!important;background:#49365f!important;color:#ead6ff!important;font:16px/1 system-ui!important;box-shadow:none}
.app-shell main .hand-map-views>button.hand-info:hover,.app-shell main .interval-pages>button.hand-info:hover{background:#684b86!important}
@media(max-width:700px){.app-shell main .hand-map-views>button.hand-info,.app-shell main .interval-pages>button.hand-info{flex-basis:18px;width:18px;min-width:18px;max-width:18px;height:20px;max-height:20px;font-size:14px!important}}
/* Fixed physical order: palette, fullscreen, language. */
.app-shell .topbar .top-actions{direction:ltr!important;flex-direction:row!important}
.app-shell .topbar .top-actions .theme-wrap{order:0!important}
.app-shell .topbar .top-actions .hand-map-fullscreen{order:1!important}
.app-shell .topbar .top-actions .language-button{order:2!important}
html[dir=ltr] .app-shell .topbar{flex-direction:row-reverse}
.app-shell .topbar .theme-menu{left:0;right:auto;inset-inline-end:auto}
.brand-copy .hand-studio-brand{direction:ltr!important;flex-direction:row!important}.hand-studio-brand img{order:0}

.hand-landmark-dialog{position:fixed;inset:0;margin:auto;width:min(520px,calc(100vw - 32px));height:fit-content;max-height:calc(100dvh - 48px);overflow:auto;box-sizing:border-box;padding:20px;border:1px solid #7991ae;border-radius:16px;background:var(--panel);color:var(--text);font:16px/1.6 system-ui}
.hand-landmark-dialog::backdrop{background:#030915aa}
.hand-landmark-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.hand-landmark-dialog-heading h2{margin:0;font-size:23px}
.hand-landmark-dialog-heading button{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font-size:24px;cursor:pointer}
.hand-landmark-dialog .panel-body{display:flex;flex-direction:column;align-items:center;gap:16px}
.hand-landmark-dialog .landmark-keys{width:210px;height:110px;flex:none}
.hand-landmark-dialog .mini-black{height:65px;width:30px}
.hand-landmark-dialog .mini-black.one{left:54px}.hand-landmark-dialog .mini-black.two{left:124px}
.hand-landmark-dialog p{margin:0;line-height:1.7}
.staff-wrap .staff-legend{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;gap:12px;flex:none}
.staff-wrap .staff-legend>span:has(.legend-dot.right){order:0}
.staff-wrap .staff-legend>span:has(.legend-dot.center){order:1}
.staff-wrap .staff-legend>span:has(.legend-dot.left){order:2}

/* Keep oversized interval examples inside their own row, below the root selector. */
.interval-panel:is([data-page=triad],[data-page=parity]) #intervalParity{align-items:flex-start;overflow:auto;padding-top:5px;box-sizing:border-box;flex:1;min-height:0}
.interval-panel:is([data-page=triad],[data-page=parity]) #intervalParity .parity-block{flex:none;max-width:100%;box-sizing:border-box}
.interval-panel:is([data-page=triad],[data-page=parity]) .interval-controls{position:relative;z-index:1;flex-shrink:0;margin-bottom:3px}

/* Fit the table and triad to their allocated row instead of scrolling it. */
.interval-panel:is([data-page=triad],[data-page=parity]) #intervalParity{overflow:visible;align-items:stretch}
.interval-panel:is([data-page=triad],[data-page=parity]) #intervalParity .parity-block{height:100%;min-height:0;padding:10px}
.interval-panel[data-page=triad] .triad-summary{height:100%;min-height:0;grid-template-rows:auto repeat(3,minmax(0,1fr));gap:7px 16px}
.interval-panel[data-page=triad] .triad-staff{position:relative;min-height:0;height:100%;align-self:stretch}
.interval-panel[data-page=triad] .triad-staff svg{position:absolute;inset:0;width:100%;height:100%;max-height:100%;object-fit:contain}
.interval-panel[data-page=triad] .triad-degrees{gap:6px;flex-wrap:wrap;margin:0}
.interval-panel[data-page=triad] .triad-summary>p{font-size:14px;line-height:1.4}
.interval-panel[data-page=parity] .parity-block{display:flex;flex-direction:column;gap:5px}
.interval-panel[data-page=parity] .parity-table{flex:1;min-height:0;width:100%;height:100%;border-spacing:0 2px}
.interval-panel[data-page=parity] .parity-table th,.interval-panel[data-page=parity] .parity-table td{padding:3px 8px;line-height:1.25}
.interval-panel[data-page=parity] .octave-note{margin:0;padding:5px 8px;flex:none}
@media(max-height:740px){
.interval-panel:is([data-page=triad],[data-page=parity]) .lead{font-size:12px}
.interval-panel[data-page=triad] .triad-summary>p{font-size:12px;line-height:1.3}
.interval-panel[data-page=triad] .triad-degree{padding:5px 7px;gap:5px}
.interval-panel[data-page=triad] .triad-degree small{font-size:11px}
.interval-panel[data-page=parity] .parity-table th,.interval-panel[data-page=parity] .parity-table td{font-size:12px;padding:2px 6px}
.interval-panel[data-page=parity] .interval-number{width:22px;height:22px;font-size:12px}
.interval-panel[data-page=parity] .parity-block>h3{font-size:15px;margin-bottom:3px}
.interval-panel[data-page=parity] .octave-note{font-size:11px}
}

@media(max-height:650px){
.interval-panel[data-page=parity] #intervalParity .parity-block{padding:5px;gap:3px}
.interval-panel[data-page=parity] .parity-table{height:auto}
.interval-panel[data-page=parity] .parity-table th,.interval-panel[data-page=parity] .parity-table td{padding:1px 6px;font-size:11px}
.interval-panel[data-page=parity] .interval-number{width:18px;height:18px;font-size:11px}
.interval-panel[data-page=parity] .octave-note{font-size:10px;line-height:1.25;padding:4px 6px}
}

#majorChoices .major-clef-symbol{display:inline-block;font-family:Bravura,"Noto Music",serif;font-size:32px;line-height:1;vertical-align:middle;direction:ltr;margin:0 4px}

/* Bravura clefs have tall glyph bounds; contain them inside the choice button. */
#majorChoices .major-clef-symbol{font-size:22px;line-height:1;inline-size:27px;block-size:38px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin:0 3px;flex:none}
#majorChoices [data-major=F] .major-clef-symbol{color:#83bdd3}
#majorChoices [data-major=G] .major-clef-symbol{color:#c3a1dc}
#majorChoices button{align-items:center;min-height:58px}

.topbar{position:relative}
.topbar>#appTitle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font-size:20px;font-weight:800;white-space:nowrap}
@media(max-width:1000px){.topbar:has(>#appTitle){flex-wrap:wrap}.topbar>#appTitle{position:static;transform:none;flex:0 0 100%;order:3;font-size:17px;margin:3px 0 0}}