/* Readable essentials, with detail available when it is useful. */
body{font-size:16px}
.primary,.secondary,.quiet-button,.reading-mode-switch button{font-size:16px;min-height:44px;line-height:1.4}
.page-heading p{font-size:17px;line-height:1.55;max-width:680px}
main[data-view="today"] .page-heading .studio-context-cue{font-size:14px;margin-top:8px;line-height:1.5}
.page-heading .eyebrow{font-size:11px;letter-spacing:1.5px}
.sidebar{overflow-y:auto}.sidebar #nav .nav-item{font-size:14px}
.topbar{min-height:58px;height:auto;padding:8px 0;justify-content:flex-end}.topbar-label,#date-label{display:none}
.topbar-actions{gap:16px}.topbar-actions .sign-in-link,.account-summary,.account-identity{font-size:14px}
.studio-focus{margin:28px 0}.studio-focus>h2{font-size:28px;margin-bottom:18px}
.studio-practice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.studio-focus-card,.studio-practice-grid>.studio-own-invite{min-width:0;min-height:162px;padding:24px;border:1px solid var(--line);border-radius:10px;background:var(--card);text-align:left;color:var(--ink)}
.studio-focus-card{display:grid;grid-template-columns:42px minmax(0,1fr) 20px;column-gap:14px;align-content:center;align-items:center}
.studio-focus-card .card-icon{grid-row:1/3}.studio-focus-card strong{grid-column:2;grid-row:1;font:25px/1.2 var(--serif);font-weight:400}
.studio-focus-card>span:not(.card-icon):not(.studio-card-arrow){grid-column:2;grid-row:2;font-size:15px;line-height:1.5;color:var(--muted);margin-top:8px}
.studio-focus-card .studio-card-arrow{grid-column:3;grid-row:1/3;color:var(--accent);font-size:22px}
.studio-focus-card:hover{background:#eaf3f9;border-color:#9dbbd0}
.studio-practice-grid>.studio-own-invite{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:14px;margin:0;background:#e9f1f4}
.studio-own-invite h3{font-size:25px;line-height:1.2}.studio-own-invite p{font-size:15px;line-height:1.5;margin-top:8px}
.studio-own-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px 14px}.studio-own-actions button{font-size:14px;min-width:0;padding:8px 10px;flex:0 1 auto;width:auto}
.studio-secondary-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin:16px 0}
.studio-secondary-actions .quiet-button{font-size:15px;justify-content:flex-start;text-align:left}
.studio-playing-options{padding:12px 0;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.studio-playing-options summary,.studio-guidance>summary{cursor:pointer;min-height:44px;padding:10px 0;color:var(--accent);font-size:16px}
.studio-playing-options p{max-width:760px;margin:12px 0;line-height:1.6}
.studio-guidance{margin:16px 0}.studio-guidance p{font-size:15px;line-height:1.6;margin:10px 0}
.welcome-card{grid-template-columns:minmax(0,1fr) minmax(220px,.65fr);padding:30px;gap:24px}
.welcome-copy h2{font-size:36px;margin:10px 0 14px}.welcome-copy>p{font-size:18px;line-height:1.5}.welcome-copy .small-info{font-size:14px;margin-top:12px}
.welcome-actions{margin-top:20px}.welcome-sound-hint,.welcome-sound-hint>.quiet-button{font-size:13px}
.welcome-preview{box-shadow:none;padding:18px;background:#ffffff70}.welcome-preview summary{font-size:16px;min-height:44px;cursor:pointer;display:list-item;text-align:left;padding:10px 0}
.welcome-preview .secondary{font-size:15px}.welcome-preview-choices span{font-size:14px}
.small-info,.ear-topic-controls,.exercise-badge,.routine-banner,.keyboard-caption{font-size:14px;line-height:1.55}
.controls .field label,.control-label{font-size:13px;letter-spacing:.3px}.controls select{font-size:16px;min-height:44px}
.exercise-top strong{font-size:17px}.exercise-top p,.exercise-actions p{font-size:15px}
.feedback,.own-feedback,.sight-status{font-size:17px;line-height:1.5}.ear-center p{font-size:17px}.choice{font-size:18px}
.completion p,.practice-results .completion p{font-size:16px;line-height:1.6}.practice-results .completion p.small-info{font-size:14px}
.ear-topics-heading p,.ear-topic-card span,.ear-interval-card span{font-size:15px}.ear-topic-card strong,.ear-interval-card strong{font-size:18px}
.sight-stage strong{font-size:19px}.sight-stage span>span{font-size:15px}.sight-stage small{font-size:13px}
.sight-room .sight-small,.own-music .own-small,.own-music .own-private{font-size:14px;line-height:1.6}
.sight-room button,.own-music button{font-size:16px;min-height:44px}
.sight-heading p,.own-heading p,.own-check-note{font-size:16px;line-height:1.55}
.own-passage-options>summary{font-size:16px}.own-passage-options>summary>span,.own-passage-overview,.own-passage-overview>span{font-size:14px}
.own-private{margin-top:16px;padding-top:12px}.own-sample h3{font-size:25px}.own-sample p,.own-import p{font-size:16px}
.practice-form label{font-size:15px}.practice-form input,.practice-form textarea{font-size:17px}
.studio-about-grid p,.studio-maker{font-size:16px;line-height:1.65}.studio-about>summary>span:first-child{font-size:12px}
.footer,.footer-links .footer-link{font-size:14px}.footer{flex-wrap:wrap;align-items:center;line-height:1.5}.footer-links{gap:6px 20px}
.help-heading p,.help-intro,.help-answer p,.help-answer li{font-size:16px;line-height:1.65}.help-item>summary{font-size:17px}
@media(max-width:1100px){.studio-practice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.welcome-card{grid-template-columns:1fr}.welcome-preview{padding:8px 16px}.studio-own-actions button{font-size:15px}}
@media(max-width:800px){.sidebar #nav .nav-item{font-size:13px}.studio-focus-card,.studio-practice-grid>.studio-own-invite{padding:20px}.welcome-copy h2{font-size:32px}.page-heading h1{font-size:40px}}
@media(max-width:540px){
 .sidebar #nav .nav-item{font-size:12px;min-height:48px}.studio-navigation-toggle{font-size:14px}
 main{padding:24px 18px 16px}.topbar{margin:0 18px;min-height:54px}
 main[data-view="today"]>.page-heading h1{font-size:34px;line-height:1.12;letter-spacing:-.8px}
 main[data-view="today"]>.page-heading p{font-size:17px;margin-top:12px}.page-heading h1{font-size:34px}
 .welcome-card{padding:22px;gap:14px;margin-bottom:24px}.welcome-copy h2{font-size:30px}.welcome-copy>p{font-size:17px}
 .welcome-copy .small-info{font-size:14px}.welcome-actions{gap:6px}.welcome-actions button{width:100%}.welcome-sound-hint{gap:0 10px}
 .studio-focus>h2{font-size:26px}.studio-practice-grid{grid-template-columns:1fr;gap:12px}
 .studio-focus-card{min-height:106px;padding:20px}.studio-focus-card strong,.studio-own-invite h3{font-size:25px}
 .studio-practice-grid>.studio-own-invite{min-height:152px;padding:20px;gap:10px}.studio-own-actions{flex-direction:row;gap:8px}.studio-own-actions button{width:auto;flex:1 1 130px}
 .studio-secondary-actions{gap:0;align-items:stretch;flex-direction:column}.studio-secondary-actions button{width:100%}
 .reading-mode-switch button{font-size:15px;padding:10px}.ear-topic-controls{font-size:14px}.ear-topic-controls .secondary{font-size:14px}
 .phone-practice .feedback{font-size:16px}.phone-practice .exercise-actions p{font-size:14px}
 .phone-practice.starter-listening .ear-center h2{font-size:27px}.phone-practice .ear-center p{font-size:16px}
 .practice-results .completion p{font-size:15px}.practice-result-toolbar button,.practice-result-toolbar strong{font-size:14px}
 .studio-about-grid p,.studio-maker{font-size:16px}.footer{padding:22px 18px}.footer-links{gap:4px 16px}
}
@media(orientation:landscape) and (max-height:600px){
 .phone-practice .practice-toolbar button,.phone-practice .practice-toolbar strong{font-size:14px}.phone-practice .routine-banner{font-size:13px}
 .phone-practice .feedback{font-size:14px;line-height:1.4;min-height:32px}.phone-practice .keyboard-caption{font-size:12px}.phone-practice .keyboard-caption button{font-size:13px}
 .phone-practice .exercise-actions p{font-size:13px}.phone-practice .exercise-actions button{font-size:14px;min-height:44px}
 .phone-practice .ear-center p{font-size:16px}.phone-practice .choice{font-size:17px}.phone-practice .ear-center h2{font-size:27px}
 .phone-practice .sight-small,.phone-practice .own-small,.phone-practice .own-private{font-size:13px;line-height:1.4}
 .practice-results .completion p,.practice-results .sight-result p,.practice-results .own-result p{font-size:14px}
 .practice-results .completion{padding:14px 18px}.practice-results .completion h2{font-size:32px}
 .phone-practice .studio-about,.phone-practice .studio-playing-options{display:none}
}
.sidebar .brand{margin-bottom:28px}
.ear-actions{justify-content:flex-end}
@media(max-width:800px){.sidebar .brand{margin-bottom:0}}
.studio-sound-check{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0 12px;padding:4px 12px;margin:0 0 20px;background:#e1eff8;border:1px solid #c8deed;border-radius:7px;color:var(--ink)}
.sound-question{grid-column:1;grid-row:1;font-size:12px;line-height:1.5;min-width:0}
.studio-sound-controls{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;text-align:center}
.studio-sound-controls strong{font-size:15px;line-height:1.4;font-weight:600}
.studio-sound-controls .quiet-button{font-size:14px;min-height:44px;padding:6px 0;white-space:nowrap}
@media(max-width:600px){.studio-sound-check{grid-template-columns:minmax(0,1fr);gap:4px;padding:5px 10px}.sound-question{grid-column:1;grid-row:auto;text-align:center}.studio-sound-controls{grid-column:1;grid-row:auto;flex-wrap:wrap;gap:0 12px}.studio-sound-controls strong{font-size:14px}}
@media(orientation:landscape) and (max-height:600px){.phone-practice .studio-sound-check{padding:0 10px;min-height:44px;margin-bottom:5px}.phone-practice .studio-sound-controls strong{font-size:14px}.phone-practice .studio-sound-controls .quiet-button{font-size:14px}}

.studio-about[hidden]{display:none}
.studio-about-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0}
.studio-about-header h2{outline:none}

@media(orientation:landscape) and (max-height:600px){
 .phone-practice main[data-view="reading"] .keyboard-caption{display:none}
 .phone-practice.practice-options-open main[data-view="reading"] .keyboard-caption{display:flex}
 .phone-practice main[data-view="reading"] .keyboard,.phone-practice main[data-view="reading"] .piano-key.white{height:104px}
 .phone-practice main[data-view="reading"] .piano-key.black{height:68px}
}

/* Real links share the existing practice controls and focus treatment. */
a.nav-item,a.studio-focus-card,a.quiet-button,a.footer-link{text-decoration:none}
a.nav-item{display:flex;align-items:center;cursor:pointer}
a.quiet-button{display:inline-flex;align-items:center;justify-content:center}
a.studio-focus-card:focus-visible,a.nav-item:focus-visible,a.quiet-button:focus-visible,a.footer-link:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.studio-start-here{display:inline-block;vertical-align:middle;margin-left:9px;padding:3px 6px;border-radius:4px;background:#dcebea;color:#285f5b;font:600 10px/1.3 var(--sans);white-space:nowrap}
.studio-own-actions a{font-size:14px;padding:8px 10px;min-height:44px}
@media(max-width:540px){
 .studio-focus{margin:20px 0}.studio-practice-grid{gap:9px}
 .studio-focus-card{min-height:88px;padding:14px 16px;grid-template-columns:30px minmax(0,1fr) 16px;column-gap:10px}
 .studio-focus-card .card-icon svg{width:26px;height:26px}
 .studio-focus-card strong,.studio-own-invite h3{font-size:23px}
 .studio-focus-card>span:not(.card-icon):not(.studio-card-arrow){font-size:14px;margin-top:5px}
 .studio-practice-grid>.studio-own-invite{min-height:136px;padding:16px;gap:7px}
 .studio-own-invite p{font-size:14px;margin-top:6px}
 .studio-own-actions{gap:3px 8px}.studio-own-actions a,.studio-own-actions button{font-size:14px;flex:1 1 auto;padding:8px 5px}
 .studio-secondary-actions a{justify-content:flex-start;min-height:44px}
}
/* The maker story is a short standalone page, reached from the footer. */
.about-page{max-width:680px;margin:24px auto 56px;padding:clamp(24px,4vw,48px);border:1px solid var(--line);border-radius:16px;background:#fffefa}
.about-page h1{margin:12px 0 14px;font-size:clamp(32px,5vw,44px);line-height:1.15}
.about-intro{font-size:20px;line-height:1.5;color:var(--muted)}
.about-story{margin:28px 0;font-size:18px;line-height:1.75}
.about-story p+p{margin-top:18px}
.reading-mode-map{max-width:850px;line-height:1.6;margin:10px 0 18px}
.phone-practice .reading-mode-map{display:none}
.phone-practice.practice-options-open .reading-mode-map{display:block}
@media(max-width:600px){.about-page{margin:12px 0 32px;padding:24px}.about-story{font-size:17px}}