/* Tonkle: one quiet surface and a consistent hierarchy across every area. */
:root{--radius:20px;--control-radius:12px;--primary-bg:#6556b8;--primary-hover:#5647a7;--primary-text:#fff}
:root[data-theme=dark]{--primary-bg:#c1adff;--primary-hover:#d1c1ff;--primary-text:#211831}
@media(prefers-color-scheme:dark){:root:not([data-theme]){--primary-bg:#c1adff;--primary-hover:#d1c1ff;--primary-text:#211831}}
body{font-kerning:normal;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:650;text-wrap:balance}h2{letter-spacing:-.45px}
.card{box-shadow:none;border-color:color-mix(in srgb,var(--line) 72%,transparent)}
.primary,.secondary,.stop{min-height:48px;border-radius:var(--control-radius);font-size:15px;line-height:1.3;padding:12px 18px;font-weight:600}
.primary{background:var(--primary-bg);color:var(--primary-text)}.primary:hover{background:var(--primary-hover)}
.secondary{background:var(--surface-soft);border-color:color-mix(in srgb,var(--line) 75%,transparent)}
button:disabled{opacity:.5;cursor:default}button:disabled:hover{filter:none}
input:not([type=checkbox]):not([type=range]),select{font-size:16px;border-radius:var(--control-radius);min-height:48px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.text-button{min-height:44px;line-height:1.4}
.eyebrow{font-size:12px;letter-spacing:1.4px;font-weight:650}
.intro-row{gap:20px;margin-bottom:28px}.lead{line-height:1.65}
.side-stack{gap:20px}.welcome{border-radius:16px;padding:20px 22px}.next-card{background:var(--lav)}
.exercise-tile{border-radius:16px;box-shadow:none;padding:20px}.exercise-tile p{line-height:1.55}
.settings-grid{gap:24px}.settings-grid .card>h2{margin-bottom:20px}
.controls{gap:16px}.controls label,.field{line-height:1.5}
.stat{border-color:color-mix(in srgb,var(--line) 65%,transparent);border-radius:16px}
.topic-intro,.listening-guide,.reflection{border:0;background:var(--surface-soft);border-radius:14px;padding:18px}
.library-item{gap:16px;padding:22px 0}.library-open strong{line-height:1.4}
.library-item .primary{min-width:84px}.library-tools{gap:20px}
.notice,.result{border:0;border-radius:14px;padding:16px 18px;line-height:1.55}
.notice:empty{display:none}.result h3{margin-bottom:8px}.result button{margin-top:12px}
.account-shell{max-width:560px;padding:24px;margin:clamp(20px,6vh,64px) auto}
.account-card{padding:32px;margin-top:28px}.account-card h1{font-size:32px;letter-spacing:-.9px}
.account-card .field{margin:22px 0;gap:8px}.account-card .field input{padding:12px 14px}
.account-tabs{padding:4px;gap:4px;border-radius:14px}.account-tabs button{min-height:44px;border-radius:10px}
dialog{max-width:min(540px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--paper);color:var(--ink);box-shadow:0 24px 80px #080d1640}
dialog::backdrop{background:#080d1680;backdrop-filter:blur(3px)}dialog .button-row{gap:10px;flex-wrap:wrap}
dialog h2{margin-bottom:14px}dialog p{line-height:1.6}
/* The action group is identical in preparation, preview, pause and completion. */
body .practice-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:100%;max-width:600px;justify-self:center;margin:20px auto 0;padding:0;border:0}
body .practice-actions .listen-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-area:1/1;margin:0;gap:10px;min-width:0}
body .practice-actions .listen-row[hidden]{display:none!important}
body .practice-actions .listen-row #listen-first,body .practice-actions .listen-row #hear-target{grid-area:1/1}
body .practice-actions .listen-row #listen-all{grid-area:1/2}
body .practice-actions .listen-row button{min-height:44px;font-size:14px;background:transparent;border-color:transparent;color:var(--muted);padding:8px}
body .practice-actions .listen-row button:hover:not(:disabled){background:var(--surface-soft);color:var(--ink)}
body .practice-actions .practice-toolbar{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));grid-area:2/1;gap:10px;margin:0;width:100%}
body .practice-actions .practice-toolbar #practice-restart,body .practice-actions .practice-toolbar #practice-start,body .practice-actions .practice-toolbar #practice-pause{grid-row:1;min-width:0;min-height:48px;font-size:15px;line-height:1.2;padding:10px 4px;margin:0}
body .practice-actions .practice-toolbar #practice-restart{grid-column:1}
body .practice-actions .practice-toolbar #practice-start{grid-column:2;display:inline-flex!important;background:var(--primary-bg);color:var(--primary-text);border:1px solid transparent}
body .practice-actions .practice-toolbar #practice-pause{grid-column:3;background:var(--surface-soft);color:var(--ink);border:1px solid var(--line)}
body .practice-actions .practice-toolbar #practice-start:disabled{opacity:.65}
body .practice-actions .practice-toolbar #practice-start[hidden]{display:none!important}
body .practice-actions #practice-end{grid-area:3/1;width:100%;min-height:44px;padding:8px;background:transparent;color:var(--muted);border:1px solid var(--line);font-size:14px}
body .practice-actions #practice-end:hover:not(:disabled){background:var(--surface-soft);color:var(--ink)}
body .practice-actions .practice-toolbar #explore-next{grid-area:1/2;min-height:48px;font-size:14px;padding:8px 4px;min-width:0}
body .practice-actions #stop{display:none!important}
body .practice-actions .mic-note,body .practice-actions #notice{grid-column:1;margin:0}
body[data-completed=true] .practice-actions #listen-all,body[data-completed=true] .practice-actions #hear-target{display:inline-flex!important}
body[data-practice-focus=true] .practice-actions{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:8px;margin:0 auto;max-width:600px}
body[data-practice-focus=true] .practice-actions .listen-row,body[data-practice-focus=true] .practice-actions .practice-toolbar{gap:8px}
body[data-practice-focus=true] .trainer{border-color:transparent;background:var(--paper);border-radius:18px;padding:14px;gap:10px}
body[data-practice-focus=true] .feedback{background:var(--surface-soft);border:0;padding:10px 12px;border-radius:14px}
body[data-practice-focus=true][data-completed=true] .feedback{background:var(--good-bg)}
body[data-practice-focus=true] .practice-score{padding:8px 0}
body[data-practice-focus=true] #staff svg{max-height:300px!important}
body[data-practice-focus=true] .score-caption{padding:0}
body[data-practice-focus=true] .exercise-head h2{font-size:17px}
@media(max-width:600px){
 .shell{padding-inline:20px}.card{padding:22px}.settings-grid{gap:18px}.intro-row{gap:16px}
 .account-shell{padding:20px;margin:12px auto}.account-card{padding:24px;margin-top:22px}
 .account-card h1{font-size:29px}dialog{padding:24px}.welcome{padding:18px}
}

@media(max-height:620px){
 body[data-practice-focus=true] .trainer{padding:6px;gap:4px 10px}
 body[data-practice-focus=true] .feedback{padding:4px 6px}
 body[data-practice-focus=true] .practice-score{padding:0}
 body[data-practice-focus=true] .practice-actions,body[data-practice-focus=true] .practice-actions .listen-row,body[data-practice-focus=true] .practice-actions .practice-toolbar{gap:6px}
 body[data-practice-focus=true] .practice-actions .practice-toolbar button{min-height:44px!important}
}
@media(min-width:480px) and (max-height:420px){
 body[data-practice-focus=true] .trainer{grid-template-rows:minmax(0,1fr) auto}
 body[data-practice-focus=true] .exercise-head{grid-area:1/1;align-self:start;z-index:1}
 body[data-practice-focus=true] .exercise-head h2{font-size:15px}
 body[data-practice-focus=true] #practice-mic{font-size:12px}
 body[data-practice-focus=true] .practice-score{grid-area:1/1;padding-top:26px}
 body[data-practice-focus=true] .feedback{grid-area:1/2;padding:2px 4px}
 body[data-practice-focus=true] .practice-actions{grid-area:2/1/3/3;max-width:560px}
 body[data-practice-focus=true] .pitch-range-caption{display:none}
 body[data-practice-focus=true] .pitch-track{margin-top:5px}
 body[data-practice-focus=true] .guidance{line-height:1.2}
}
@media(min-width:480px) and (max-height:360px){
 body[data-practice-focus=true] .trainer{position:relative}
 body[data-practice-focus=true] .trainer:has(.practice-lyrics:not([hidden])) .score-caption{display:none!important}
 body[data-practice-focus=true] #practice-lyric-page{display:none}
 body[data-practice-focus=true] .practice-lyrics select{position:absolute;left:6px;bottom:106px;width:96px;margin:0}
 body[data-practice-focus=true] .trainer:has(#practice-verse:not([hidden])) .listen-row{padding-left:104px}
 body[data-practice-focus=true] .pitch-readings .target-note,body[data-practice-focus=true] .heard-note{font-size:22px;line-height:1}
 body[data-practice-focus=true] .guidance{margin:0}
 body[data-practice-focus=true] .pitch-overview{margin:2px 0;padding:0 4px;border:0}
 body[data-practice-focus=true] .pitch-axis{height:42px}
 body[data-practice-focus=true] .pitch-axis:after{top:19px}
 body[data-practice-focus=true] .pitch-tick{top:16px}
 body[data-practice-focus=true] .pitch-tick.major{top:12px}
 body[data-practice-focus=true] .pitch-note-label{top:25px}
 body[data-practice-focus=true] .pitch-target-line{height:26px}
 body[data-practice-focus=true] .wide-needle{top:18px}
 body[data-practice-focus=true] .pitch-track{height:12px;margin:3px auto 2px}
 body[data-practice-focus=true] .sweetspot,body[data-practice-focus=true] .fine-zero{height:12px}
 body[data-practice-focus=true] .pitch-needle{height:18px}
 body[data-practice-focus=true] .hold-track{margin-top:2px;height:2px}
}

/* One quiet surface, with display-safe content and an approximate outer curve. */
body[data-practice-focus=true] .shell{padding:4px;max-width:1200px}
body[data-practice-focus=true] .trainer{border:0;box-shadow:none;border-radius:clamp(24px,7vmin,36px);padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
body[data-practice-focus=true] .exercise-head{padding-inline:6px}
body[data-practice-focus=true] .practice-score{position:relative}
body[data-practice-focus=true] #staff{display:block;width:100%;height:100%;max-width:none;transform:none!important}
body[data-practice-focus=true] #staff svg.practice-ribbon{display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;flex:none}
.ribbon-note{color:var(--notation-ink)}
.ribbon-note[data-active=true]{color:var(--accent)}
.ribbon-highlight{fill:var(--lav);opacity:0}
.ribbon-note[data-active=true] .ribbon-highlight{opacity:.65}
.ribbon-lyric{font:16px system-ui,sans-serif}
.ribbon-bar{font:12px system-ui,sans-serif;fill:var(--muted)}
body[data-practice-focus=true] .practice-lyrics:not([hidden]){position:absolute;right:0;bottom:4px;display:block;z-index:2}
body[data-practice-focus=true] .practice-lyrics>div{display:none}
body[data-practice-focus=true] .practice-lyrics select{position:static;min-height:32px;height:32px;padding:2px 5px;width:100px;font-size:14px}
body[data-practice-focus=true] .score-caption{min-height:32px;display:flex!important;align-items:center;padding-right:0}
body[data-practice-focus=true] .trainer:has(#practice-verse:not([hidden])) .score-caption{padding-right:106px}
body[data-practice-focus=true] .trainer:has(#practice-verse:not([hidden])) .listen-row{padding-left:0}
@media(max-height:620px){
 body[data-practice-focus=true] .trainer{padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-radius:24px}
}
@media(min-width:480px) and (max-height:420px){
 body[data-practice-focus=true] .score-caption{display:none!important}
 body[data-practice-focus=true] .practice-lyrics:not([hidden]){position:fixed;left:max(16px,env(safe-area-inset-left));right:auto;bottom:calc(116px + max(0px,env(safe-area-inset-bottom) - 8px))}
 body[data-practice-focus=true] .trainer:has(#practice-verse:not([hidden])) .listen-row{padding-left:106px}
}

body[data-practice-focus=true] .exercise-head h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:480px) and (max-height:420px){body[data-practice-focus=true] .practice-score{padding-top:18px}}
/* Give a wide vocal range room without scaling down long scores. */
@media(min-width:480px) and (max-height:360px){
 body[data-practice-focus=true] .shell{padding:2px}
 body[data-practice-focus=true] .trainer{padding:max(4px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
 body[data-practice-focus=true] .exercise-head{display:none}
 body[data-practice-focus=true] .practice-score{padding-top:0}
 body[data-practice-focus=true] .practice-actions{gap:2px}
 body[data-practice-focus=true] .practice-lyrics:not([hidden]){bottom:104px}
}
@media(max-width:479px) and (max-height:620px){
 body[data-practice-focus=true] .score-caption{display:none!important}
 body[data-practice-focus=true] .practice-lyrics:not([hidden]){position:fixed;left:max(16px,env(safe-area-inset-left));right:auto;bottom:calc(116px + max(0px,env(safe-area-inset-bottom) - 8px))}
 body[data-practice-focus=true] .trainer:has(#practice-verse:not([hidden])) .listen-row{padding-left:106px}
 body[data-practice-focus=true] .pitch-readings .target-note,body[data-practice-focus=true] .heard-note{font-size:22px;line-height:1}
 body[data-practice-focus=true] .guidance{margin:0}
 body[data-practice-focus=true] .pitch-overview{margin:2px 0;padding:0 4px;border:0}
 body[data-practice-focus=true] .pitch-axis{height:42px}
 body[data-practice-focus=true] .pitch-axis:after{top:19px}
 body[data-practice-focus=true] .pitch-tick{top:16px}
 body[data-practice-focus=true] .pitch-tick.major{top:12px}
 body[data-practice-focus=true] .pitch-note-label{top:25px}
 body[data-practice-focus=true] .pitch-target-line{height:26px}
 body[data-practice-focus=true] .wide-needle{top:18px}
 body[data-practice-focus=true] .pitch-track{height:12px;margin:3px auto 2px}
 body[data-practice-focus=true] .sweetspot,body[data-practice-focus=true] .fine-zero{height:12px}
 body[data-practice-focus=true] .pitch-needle{height:18px}
 body[data-practice-focus=true] .hold-track{margin-top:2px;height:2px}
}

/* Keep score playback obvious and reachable alongside microphone practice. */
.library-play-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex:none}
.library-play-actions button{min-height:48px;font-size:1rem;white-space:nowrap}
.library-play-actions button span{margin-right:6px}
@media(max-width:600px){.library-item .library-open{flex-basis:100%}.library-item .library-play-actions{width:100%}.library-item .library-play-actions button{flex:0 0 auto;padding-inline:12px}.library-item .library-play-actions .primary{flex:1 0 132px}}