/* Independent TuneViva design system. The score canvas always stays light. */
:root {
  color-scheme: light;
  --paper: #fff;
  --ground: #fafbfd;
  --surface: #f1f5f9;
  --text: #1b293d;
  --secondary: #475569;
  --border: #dfe5eb;
  --link: #345474;
  --action: #41678f;
  --action-hover: #345474;
  --focus: #235991;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --content-width: 80rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--sans); background: var(--ground); color: var(--text); }
body { margin: 0; }
a { color: var(--link); text-underline-offset: .2em; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.container { width: min(calc(100% - 2 * var(--gutter)), var(--content-width)); margin-inline: auto; }
.page-header { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; min-height: 4.25rem; padding-block: .75rem; }
.site-head { border-bottom: 1px solid var(--border); background: var(--paper); }
.wordmark { font: 700 1.75rem/1 var(--serif); color: var(--text); text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-left: auto; }
.site-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text); text-decoration: none; font-size: .9rem; }
.site-nav a:hover { color: var(--link); text-decoration: underline; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.18; letter-spacing: -.025em; }
h1 { font-size: clamp(2rem, 3.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); }
p { line-height: 1.6; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:.5rem; min-height:2.875rem; padding:.7rem 1.125rem; border:1px solid var(--action); border-radius:.4rem; background:var(--action); color:white; font-weight:600; text-decoration:none; cursor:pointer; }
.button:hover { background:var(--action-hover); }
.button.secondary { background:var(--paper); color:var(--link); }
.button.secondary:hover { background:var(--surface); }
.field { min-width:0; min-height:2.875rem; padding:.75rem 1rem; border:1px solid #a6b4c2; border-radius:.4rem; background:var(--paper); color:var(--text); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.intro { max-width:64rem; padding:4rem 0 3.5rem; margin:auto; text-align:center; }
.intro h1 { margin:0; }.intro p { color:var(--secondary); max-width:65ch; margin:1rem auto 1.5rem; }
.search-composers { margin: .5rem 0 1.5rem; }
.search-composers h2 { font-size: 1.35rem; margin: 0 0 .25rem; }
.search-form { display:flex; gap:.5rem; max-width:56rem; margin:auto; }.search-form input { flex:1; }
.section { padding-block:2rem; }.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }.section-head h2 { margin:0 0 1rem; }
.score-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.score-card { min-width:0; }.score-card__image { display:block; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--border); background:var(--paper); }.score-card__image img { width:100%; height:100%; object-fit:cover; object-position:top; }.score-card h3 { font-size:1.1rem; margin:.75rem 0 .25rem; }.score-card p { font-size:.9rem; color:var(--secondary); margin:0; }
.journey { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; border-block:1px solid var(--border); padding-block:1.5rem; }.journey h3 { margin:0 0 .5rem; }.journey p { color:var(--secondary); font-size:.9rem; margin:0; }
.browse-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }.browse-grid ul { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; list-style:none; margin:0; padding:0; }
.site-footer { border-top:1px solid var(--border); padding:1.5rem 0; margin-top:3rem; color:var(--secondary); font-size:.9rem; }
@media(max-width:700px) { .page-header { gap:.5rem 1rem; }.site-nav { width:100%; margin:0; gap:0 1rem; }.intro { padding:2.5rem 0; }.search-form { display:grid; grid-template-columns:1fr 1fr; }.search-form input { grid-column:1/-1; width:100%; }.score-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.journey,.browse-grid { grid-template-columns:1fr; gap:1.5rem; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }
.catalogue-page,.score-page { padding-block:2.5rem 4rem; }.catalogue-page h1 { margin:0 0 1.5rem; }.catalogue-search { display:flex; gap:.5rem; max-width:60rem; }.catalogue-search input { flex:1; }.catalogue-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:1rem; padding-block:2rem 1rem; }.catalogue-heading h2,.catalogue-heading p { margin:0; }.catalogue-heading p { color:var(--secondary); }.pagination { display:flex; gap:1rem; align-items:center; font-size:.9rem; }
.catalogue-list { border-top:1px solid var(--border); }.catalogue-row { display:grid; grid-template-columns:10rem minmax(0,1fr) auto; gap:1.5rem; padding:1.25rem 0; border-bottom:1px solid var(--border); }.catalogue-row__image { height:7rem; overflow:hidden; background:var(--paper); border:1px solid var(--border); }.catalogue-row__image img { width:100%; height:100%; object-fit:cover; object-position:top; }.catalogue-row h3 { margin:0 0 .4rem; font-size:1.25rem; }.catalogue-row h3 a { color:var(--text); text-decoration:none; }.catalogue-row p { color:var(--secondary); font-size:.9rem; margin:.25rem 0; }.catalogue-row__action { align-self:start; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:.6rem; font-size:.875rem; color:var(--secondary); }.score-title h1 { margin:1.5rem 0 .4rem; }.score-title p { margin:0 0 1.5rem; }.score-layout { display:grid; grid-template-columns:minmax(0,3fr) minmax(15rem,1fr); align-items:start; gap:2rem; }.score-workspace { min-width:0; }.score-tools { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem; }.notation { min-height:26rem; max-height:75vh; overflow:auto; background:#fff; color:#1b293d; border:1px solid var(--border); }.notation > img { width:100%; height:auto; display:block; }.workspace-status { color:var(--secondary); font-size:.875rem; }.score-facts { padding:0 0 1rem; }.score-facts h2 { margin-top:0; }.score-facts p,.score-facts dl { color:var(--secondary); font-size:.9rem; }.score-facts dl div { display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--border); }.score-facts dd { margin:0; text-align:right; }
@media(max-width:700px) { .catalogue-row { grid-template-columns:6rem minmax(0,1fr); gap:.9rem; }.catalogue-row__image { height:5rem; }.catalogue-row__action { grid-column:2; }.score-layout { grid-template-columns:1fr; }.notation { min-height:20rem; max-height:60vh; } }
.utility-page { max-width:58rem; padding-block:3rem 4rem; }.utility-heading { text-align:center; }.utility-heading h1 { margin:0 0 .8rem; }.utility-heading p { color:var(--secondary); max-width:55ch; margin:0 auto 2rem; }.import-zone { text-align:center; border:1px dashed #a6b4c2; background:var(--paper); padding:3rem 1.5rem; }.import-zone h2 { margin:0 0 .5rem; }.import-zone p { color:var(--secondary); }.import-actions { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:1.5rem; }.utility-notice { color:var(--secondary); background:var(--surface); padding:1rem; font-size:.9rem; }
.practice-page { padding-block:2rem 4rem; }.practice-title h1 { margin:1rem 0 .3rem; }.practice-title p { color:var(--secondary); margin:0 0 1.25rem; }.practice-layout { display:grid; grid-template-columns:minmax(0,3fr) minmax(14rem,1fr); gap:2rem; }.practice-feedback { border-inline-start:1px solid var(--border); padding-inline-start:1.5rem; }.practice-feedback h2 { margin-top:0; }.practice-feedback p { color:var(--secondary); }.score-tools input,.score-tools select { min-height:2.875rem; max-width:9rem; padding:.5rem; border:1px solid #a6b4c2; background:var(--paper); color:var(--text); border-radius:.4rem; }.score-tools label { align-self:center; }
@media(max-width:700px) { .practice-layout { grid-template-columns:1fr; }.practice-feedback { border-inline-start:0; border-top:1px solid var(--border); padding:1rem 0 0; }.import-actions { flex-direction:column; } }
.directory-intro,.composer-intro p,.composer-copy p { color:var(--secondary); max-width:70ch; }.composer-index { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; gap:0 2rem; padding:0; margin:2rem 0; }.composer-index li { padding:.8rem 0; border-bottom:1px solid var(--border); }.composer-intro h1 { margin:0; }.composer-works { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 2rem; padding:0; list-style:none; }.composer-works li { border-bottom:1px solid var(--border); padding-bottom:.75rem; }.composer-works p { color:var(--secondary); margin:.3rem 0 0; font-size:.9rem; }@media(max-width:700px) { .composer-index,.composer-works { grid-template-columns:1fr; } }
.button:focus-within { outline:3px solid var(--focus); outline-offset:3px; }
.catalogue-row__image a { display:block; height:100%; }.preview-unavailable { display:grid; place-items:center; height:100%; padding:.5rem; font-size:.8rem; color:#475569; text-align:center; }
.preview-banner { padding:.6rem 1rem; background:#eaf1f8; color:#1b293d; text-align:center; font:600 .875rem/1.4 var(--sans); }
.mobile-menu { display:none; }
@media(max-width:700px) {
  .site-nav { display:none; }
  .page-header { flex-wrap:nowrap; min-height:4rem; }
  .mobile-menu { display:block; position:relative; margin-left:auto; }
  .mobile-menu summary { display:flex; align-items:center; justify-content:center; min-width:2.75rem; min-height:2.75rem; cursor:pointer; font-size:.9rem; font-weight:600; list-style:none; }
  .mobile-menu summary::-webkit-details-marker { display:none; }
  .mobile-nav { position:absolute; z-index:5; right:0; top:100%; display:grid; min-width:12rem; padding:.5rem; background:var(--paper); border:1px solid var(--border); box-shadow:0 8px 24px #1b293d1a; }
  .mobile-nav a { display:flex; align-items:center; min-height:2.75rem; padding:.5rem .75rem; color:var(--text); text-decoration:none; }
  .mobile-nav a:hover { background:var(--surface); }
}
.scan-result { margin-top:3rem; }.scan-result > p { color:var(--secondary); }
[hidden] { display:none !important; }
.policy-header { padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--border); }
.policy-header h1 { margin: .5rem 0; }
.policy-header > p:last-child { color: var(--secondary); }
.policy-content { max-width: 72ch; padding: 1rem 0 3rem; line-height: 1.7; }
.policy-content section { padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.policy-content h2 { font-size: 1.3rem; margin: 0 0 .75rem; }
.policy-content p, .policy-content li { color: var(--secondary); }
.footer-inner { display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.footer-inner p { color:var(--secondary); margin:.5rem 0 0; }
.footer-inner nav { display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; }
/* Reference fidelity pass: editorial music library, consistent product chrome. */
:root { --ground:#f8fafc; --text:#102342; --secondary:#60718b; --link:#3265a0; --action:#3974ae; --action-hover:#285d94; --border:#e0e7ef; --content-width:83rem; }
body { -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-weight:500; }
.site-head { position:sticky; top:0; z-index:40; background:var(--ground); }
.page-header { min-height:76px; }
.wordmark { font-size:2.15rem; letter-spacing:-.055em; }
.site-nav { gap:2rem; }
.site-nav a { font-size:.875rem; color:#304766; }
.site-nav a[aria-current="page"],.mobile-nav a[aria-current="page"] { color:var(--link); font-weight:650; text-decoration:underline; text-underline-offset:.35em; }
.preview-banner { padding:.28rem 1rem; font-size:.69rem; font-weight:400; background:#edf2f7; color:#62728a; }
.intro { max-width:76rem; padding:3.25rem 0 2.5rem; }
.intro h1 { font-size:clamp(2.3rem,3.65vw,3.5rem); line-height:1.13; letter-spacing:-.045em; }
.intro p { font-size:1.15rem; margin:.9rem auto 1.7rem; max-width:60ch; }
.search-form { max-width:56rem; gap:.6rem; }
.search-form .field { min-height:54px; border-color:#b8c7d9; box-shadow:0 2px 4px #18385804; }
.search-form .button { min-width:115px; }
.button { border-radius:6px; font-size:.93rem; font-weight:550; transition:background .15s, box-shadow .15s; }
.button.secondary { border-color:#9eb6d2; }
.section-head h2 { font-size:1.85rem; }
.section-head > a { font-size:.84rem; text-decoration:none; }
.featured-section { padding:0 0 2.6rem; }
.score-grid { gap:14px; }
.score-card { border:1px solid var(--border); border-radius:7px; background:white; overflow:hidden; transition:box-shadow .2s,transform .2s; }
.score-card:hover { box-shadow:0 10px 30px #17385a12; transform:translateY(-3px); }
.score-card__link { display:flex; flex-direction:column; height:100%; color:var(--text); text-decoration:none; }
.score-card__heading { padding:17px 18px 6px; min-height:108px; text-align:center; }
.score-card h3 { font-size:1.15rem; line-height:1.3; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.score-card p { margin:5px 0 0; font-size:.78rem; }
.score-card__image { border:0; border-radius:0; height:156px; aspect-ratio:auto; margin:0 12px; }
.score-card__image img { height:auto; min-height:100%; width:100%; object-fit:cover; object-position:top; }
.score-card__open { display:flex; justify-content:space-between; margin-top:auto; padding:12px 18px; font-size:.75rem; color:var(--link); border-top:1px solid #f0f3f7; }
.workflow-section { padding:0 0 2.4rem; }
.journey { border:0; gap:0; padding:0; }
.journey > div { display:flex; gap:22px; padding:8px 28px; border-right:1px solid var(--border); }
.journey > div:first-child { padding-left:16px; }
.journey > div:last-child { border-right:0; }
.step-number { font:500 3rem/1 var(--serif); color:#4d7baa; }
.journey h2 { font-size:1.8rem; margin:0 0 8px; }
.journey p { font-size:.92rem; line-height:1.65; }
.journey a { display:inline-block; margin-top:12px; font-size:.79rem; text-decoration:none; }
.browse-grid { border-top:1px solid var(--border); padding:1.4rem 0 1.8rem; gap:3rem; }
.browse-grid > div + div { border-left:1px solid var(--border); padding-left:3rem; }
.browse-grid h2 { font-size:1.65rem; }
.browse-grid ul { display:flex; flex-wrap:wrap; gap:12px 20px; }
.browse-grid li a { font-size:.86rem; text-decoration:none; }
.site-footer { margin-top:1rem; padding:1.5rem 0; }
.footer-inner .wordmark { font-size:1.45rem; }
.footer-inner p { font-size:.78rem; }
.footer-inner nav { font-size:.8rem; gap:1.25rem; }
.footer-inner nav a { text-decoration:none; }
.catalogue-row { background:white; padding:1.2rem; border:1px solid var(--border); border-radius:8px; margin-bottom:12px; }
.catalogue-list { border:0; }
.catalogue-row__image { border-radius:4px; }
.catalogue-row h3 { font-size:1.35rem; }
.catalogue-row__action { font-size:.85rem; text-decoration:none; }
.notation { border-radius:8px; box-shadow:0 4px 24px #19365908; }
.import-zone { border-radius:12px; padding:4rem 2rem; border-color:#a4b9d0; }
.utility-notice { border-radius:8px; line-height:1.7; }
.score-facts,.practice-feedback { background:white; border:1px solid var(--border); padding:1.5rem; border-radius:10px; }
@media(max-width:1000px) { .journey > div { padding-inline:16px; gap:14px; }.score-card__heading { min-height:118px; }.score-card__image { height:135px; } }
@media(max-width:700px) { .intro { padding:2.5rem 0 2rem; }.intro h1 { font-size:2.35rem; }.intro p { font-size:1rem; }.score-card__heading { padding:14px 10px 6px; min-height:112px; }.score-card h3 { font-size:1rem; }.score-card__image { height:120px; margin:0 8px; }.section-head h2 { font-size:1.5rem; }.section-head > a { font-size:.75rem; }.journey { gap:20px; }.journey > div,.journey > div:first-child { padding:0 4px 20px; border-right:0; border-bottom:1px solid var(--border); gap:20px; }.journey h2 { font-size:1.65rem; }.step-number { font-size:2.7rem; }.browse-grid { gap:24px; }.browse-grid > div + div { padding-left:0; border:0; }.catalogue-row { padding:12px; }.site-nav { display:none; } }
/* The core music tools lead the browsing content. */
.workflow-section { padding:0 0 2.8rem; }
.workflow-section .journey { padding:1.4rem 0; border-block:1px solid var(--border); }
.tool-icon { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; color:#3974ae; background:#eaf1f8; border-radius:12px; }
.tool-icon svg { width:27px; height:27px; }
.journey h2 { font-size:1.45rem; margin:0 0 7px; }
.journey p { font-size:.85rem; max-width:30ch; }
.journey a { font-size:.8rem; margin-top:9px; }
@media(max-width:700px) { .workflow-section { padding-bottom:2rem; }.workflow-section .journey { padding:1.25rem 0 .25rem; gap:16px; }.journey > div,.journey > div:first-child { padding:0 0 16px; gap:15px; }.journey > div:last-child { border-bottom:0; }.journey p { max-width:none; }.journey h2 { font-size:1.4rem; } }
.catalogue-page:has(.composer-intro) { padding-top:1rem; }
.composer-intro { margin-top:.75rem; }
.composer-identity { display:flex; align-items:flex-start; gap:1.5rem; min-width:0; }
.composer-identity h1 { margin:0; min-width:0; }
.composer-intro p { margin:.85rem 0 0; }
.composer-portrait { width:8rem; height:8rem; flex:none; border-radius:50%; object-fit:cover; object-position:center 20%; background:#eaf0f6; }
@media(max-width:700px) { .composer-identity { gap:1rem; }.composer-portrait { width:5.5rem; height:5.5rem; } }
.composer-portraits { padding:1.25rem 0 2.5rem; border-top:1px solid var(--border); }
.portrait-grid { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:20px; padding-top:12px; }
.portrait-link { text-align:center; text-decoration:none; color:var(--text); font:500 1rem/1.35 var(--serif); }
.portrait-link img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:50%; margin-bottom:13px; background:#eaf0f6; transition:transform .2s; }
.portrait-link:hover img { transform:translateY(-4px); }
.portrait-link:hover span { color:var(--link); }
@media(max-width:1100px) { .portrait-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; }.portrait-link img { max-width:120px; margin-inline:auto; } }
@media(max-width:600px) { .portrait-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px 10px; }.portrait-link { font-size:.75rem; }.portrait-link img { margin-bottom:8px; } }
@media(max-width:600px) { .portrait-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 18px; }.portrait-link { font-size:.88rem; }.portrait-link img { max-width:104px; } }
.genre-section { padding:1.5rem 0 2rem; border-top:1px solid var(--border); }
.genre-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; }
.genre-tile { display:block; overflow:hidden; border:1px solid var(--border); border-radius:9px; background:#fff; text-decoration:none; color:var(--text); transition:transform .2s,box-shadow .2s; }
.genre-tile:hover { transform:translateY(-3px); box-shadow:0 8px 22px #18385812; }
.genre-art { display:block; aspect-ratio:1.25; background-image:url('/assets/genres/genre-atlas.webp'); background-size:400% 300%; }
.genre-x-0 { background-position-x:0%; }.genre-x-1 { background-position-x:33.333333%; }.genre-x-2 { background-position-x:66.666667%; }.genre-x-3 { background-position-x:100%; }
.genre-y-0 { background-position-y:0%; }.genre-y-1 { background-position-y:50%; }.genre-y-2 { background-position-y:100%; }
.genre-label { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 13px; font:500 .95rem/1.3 var(--serif); }
.genre-label > span { color:var(--link); font:400 .8rem var(--sans); }
@media(max-width:1000px) { .genre-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:600px) { .genre-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.genre-art { aspect-ratio:1; }.genre-label { padding:10px 8px; font-size:.85rem; }.genre-label > span { display:none; } }
.genre-art { aspect-ratio:1; }
.practice-start { max-width:1050px; margin:0 auto; padding:1.5rem 0 3rem; }
.practice-start__heading { text-align:center; max-width:40rem; margin:0 auto 1.5rem; }
.practice-start__heading h1 { font-size:clamp(2rem,3.3vw,2.8rem); margin:0 0 1rem; }
.practice-start__heading p { margin:0; color:var(--secondary); font-size:1.05rem; }
.practice-samples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.practice-sample { display:flex; flex-direction:column; overflow:hidden; text-decoration:none; background:white; border:1px solid var(--border); border-radius:10px; color:var(--text); transition:transform .2s,box-shadow .2s; }
.practice-sample:hover { transform:translateY(-4px); box-shadow:0 12px 30px #18385812; }
.practice-sample__preview { height:180px; overflow:hidden; border-bottom:1px solid var(--border); padding:14px 18px 0; }
.practice-sample__preview img { width:100%; height:auto; display:block; }
.practice-sample__body { display:flex; flex-direction:column; flex:1; padding:20px; }
.practice-sample h2 { font-size:1.3rem; line-height:1.3; margin:0 0 8px; }
.practice-sample p { font-size:.85rem; color:var(--secondary); margin:0; }
.practice-sample__action { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:24px; margin-top:auto; font-size:.9rem; color:var(--link); font-weight:550; }
.practice-start__note { text-align:center; font-size:.85rem; color:var(--secondary); margin:1.5rem 0 0; }
.practice-start__fallback { text-align:center; padding:2rem; }
@media(max-width:650px) { .practice-start { padding-top:.5rem; }.practice-samples { grid-template-columns:1fr; gap:16px; }.practice-sample { flex-direction:row; }.practice-sample__preview { width:32%; flex-shrink:0; height:auto; padding:12px 8px; border-bottom:0; border-right:1px solid var(--border); }.practice-sample__body { padding:16px; }.practice-sample h2 { font-size:1.15rem; }.practice-sample__action { font-size:.8rem; padding-top:16px; }.practice-start__heading { margin-bottom:1.75rem; } }
.practice-entry-paths { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:0 0 2.25rem; padding:0; border:0; }
.practice-choice { display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; min-height:100%; padding:1.2rem 1.2rem 1.1rem; background:var(--paper); border:1px solid var(--border); border-radius:14px; }
.practice-choice strong { font:500 1.25rem/1.3 var(--serif); color:var(--text); }
.practice-choice > span { color:var(--secondary); font-size:.9rem; line-height:1.5; }
.practice-choice .button { margin-top:auto; }
.practice-choice [data-import-status]:empty { display:none; }
.practice-choice [data-import-status] { margin:0; font-size:.85rem; }
.practice-samples-heading h2 { font-size:1.55rem; margin:0 0 .4rem; }
.practice-samples-heading p { color:var(--secondary); font-size:.9rem; margin:0 0 1.25rem; }
.musicxml-upload { position:relative; cursor:pointer; }
.journey > .journey-link { display:flex; gap:22px; padding:8px 28px; border-right:1px solid var(--border); color:var(--text); text-decoration:none; border-radius:6px; transition:background .15s; }
.journey > .journey-link:first-child { padding-left:16px; }
.journey > .journey-link:last-child { border-right:0; }
.journey > .journey-link:hover { background:#edf3f9; }
.journey > .journey-link:focus-visible { outline:3px solid var(--focus); outline-offset:4px; background:#edf3f9; }
.journey-cta { display:inline-block; margin-top:9px; font-size:.8rem; color:var(--link); }
.journey-link:hover .journey-cta { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:1000px) { .journey > .journey-link { padding-inline:16px; gap:14px; } }
@media(max-width:700px) { .journey > .journey-link,.journey > .journey-link:first-child { padding:8px 6px 16px; border-right:0; border-bottom:1px solid var(--border); gap:15px; }.journey > .journey-link:last-child { border-bottom:0; } }
.button-icon { width:20px; height:20px; flex-shrink:0; }
/* Native capture is a touch-device shortcut; desktop file selection stays explicit. */
.camera-capture { display:none; }
@media(any-pointer:coarse) { .camera-capture { display:inline-flex; } }
@media(max-width:700px) { .practice-entry-paths { grid-template-columns:1fr; } }
/* A score is a reading surface first; catalogue detail follows the music. */
.score-page { max-width:1120px; }
.score-title { padding-bottom:1rem; }
.score-title h1 { font-size:clamp(2rem,3.3vw,2.8rem); max-width:30ch; }
.score-title p { margin-bottom:.5rem; }
.score-layout { grid-template-columns:minmax(0,1fr); gap:2rem; }
.score-workspace-heading { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding-top:1.2rem; border-top:1px solid var(--border); }
.score-workspace-heading h2 { font-size:1.4rem; margin:0 0 1rem; }
.score-workspace-heading p { color:var(--secondary); font-size:.85rem; margin:0; }
.score-tools .score-practice-link { margin-left:auto; order:5; }
.score-xml-download { align-self:center; padding:.7rem; font-size:.85rem; text-decoration:none; }
.score-facts { background:transparent; border:0; border-top:1px solid var(--border); border-radius:0; padding:1.75rem 0; }
.score-facts h2 { font-size:1.7rem; }
.score-facts dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 2rem; }
.score-facts dl div { display:flex; flex-direction:column; gap:.35rem; padding:.9rem 0; min-width:0; }
.score-facts dt { font-size:.78rem; color:var(--secondary); }
.score-facts dd { text-align:left; color:var(--text); font-size:1rem; overflow-wrap:anywhere; }
.score-facts .score-metadata-note { font-size:.75rem; max-width:80ch; }
.score-facts h3 { font:600 .85rem var(--sans); margin-top:1.5rem; }
.score-browse-more { display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1.5rem; font-size:.9rem; }
.score-browse-more a { text-decoration:none; }
@media(max-width:700px) { .score-workspace-heading { display:block; }.score-workspace-heading h2 { margin-bottom:.4rem; }.score-workspace-heading p { margin-bottom:1rem; }.score-facts dl { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1rem; }.score-tools .score-practice-link { margin-left:0; }.score-title h1 { font-size:2rem; } }

/* Keep guidance compact and aligned with the practice controls. */
.practice-layout { align-items:start; }
.practice-feedback-label { font-size:.68rem; letter-spacing:.12em; font-weight:700; color:var(--accent); }
.practice-feedback h2 { font-size:1.6rem; line-height:1.15; margin:.65rem 0 .85rem; }
.practice-feedback p { font-size:.9rem; line-height:1.6; }
.practice-feedback .button { width:100%; margin-top:.4rem; }
.practice-feedback small { display:block; font-size:.75rem; line-height:1.55; color:var(--secondary); }
.practice-feedback .practice-mic-status { font-size:.8rem; margin:.85rem 0; }
.practice-score-status { font-size:.8rem; color:var(--secondary); margin:.6rem 0; }
@media(max-width:700px) { .practice-feedback { grid-row:1; } }

.practice-hand-control { display:flex; align-items:center; gap:.65rem; font-size:.85rem; }
.hand-segments { display:flex; padding:3px; background:#e7ecf2; border-radius:8px; }
.hand-segments button { border:0; background:transparent; color:var(--text); padding:.65rem .85rem; cursor:pointer; border-radius:6px; }
.hand-segments button[aria-pressed="true"] { background:white; box-shadow:0 1px 4px #182d4220; }
.practice-layout > section { min-width:0; }
.practice-layout .notation { max-height:55vh; overflow:auto; }
.practice-piano { margin-top:1.5rem; padding:1.1rem; background:white; border:1px solid var(--border); border-radius:12px; }
.piano-caption { display:flex; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.piano-caption strong,.piano-caption span { display:block; }
.piano-caption span,.practice-piano p { font-size:.75rem; color:var(--secondary); margin:.3rem 0 0; }
.piano-caption output { color:var(--accent); font-size:.85rem; }
.piano-scroll { overflow-x:auto; padding:3px; }
.piano-bed { position:relative; height:150px; min-width:1040px; }
.piano-key { position:absolute; top:0; padding:0 0 8px; display:flex; align-items:flex-end; justify-content:center; cursor:pointer; font-size:9px; border-radius:0 0 4px 4px; }
.piano-white { width:calc(100% / 52); height:100%; background:linear-gradient(white,#f5f6f8); color:#73808e; border:1px solid #b6c0ca; }
.piano-black { width:calc(100% / 52 * .64); height:64%; background:linear-gradient(#344054,#182231); border:1px solid #111b28; z-index:1; color:white; }
.piano-key.piano-target { background:#83b2da; color:#102b46; }
.piano-key.piano-matched { background:#82c6a4; }
.piano-key:focus-visible { outline:3px solid #ce8f38; outline-offset:-3px; z-index:2; }
@media(max-width:700px) { .practice-layout { gap:1rem; }.practice-feedback { grid-row:auto; }.practice-piano { position:sticky; bottom:0; z-index:3; padding:.7rem; box-shadow:0 -5px 20px #24375014; }.piano-bed { height:110px; }.piano-caption span { max-width:220px; }.practice-piano p { font-size:.65rem; }.practice-feedback { padding:1rem; } }

.practice-title h1 { font-size:clamp(1.65rem,3vw,2.5rem); line-height:1.15; margin:.75rem 0 1.25rem; }
.practice-tempo-control { display:grid; grid-template-columns:1fr auto; gap:.2rem .7rem; font-size:.75rem; color:var(--secondary); }
.practice-tempo-control input { grid-column:1/-1; width:150px; min-height:20px; padding:0; accent-color:#4b78a8; }
.practice-layout .score-tools { gap:.75rem; }
.practice-layout .notation { max-height:clamp(240px,calc(100svh - 490px),520px); }
.practice-feedback h2 { font-size:1.35rem; }
.practice-feedback { padding:1.15rem; }
.practice-feedback p { font-size:.8rem; line-height:1.5; }
.practice-feedback small { font-size:.7rem; }

/* One full-width workspace, with listening above and keys always in reach. */
.practice-layout { grid-template-columns:minmax(0,1fr); gap:1rem; }
.practice-feedback { grid-row:1; display:flex; align-items:center; flex-wrap:wrap; gap:.75rem 1.25rem; padding:.85rem 1rem; background:#eef3f8; }
.practice-mic-intro { display:grid; gap:.2rem; }
.practice-mic-intro strong { font-size:.85rem; }
.practice-mic-intro span { font-size:.78rem; color:var(--secondary); }
.practice-feedback .button { width:auto; margin:0; min-height:2.5rem; padding:.5rem .85rem; font-size:.8rem; }
.practice-feedback > p { margin:0; font-size:.75rem; }
.practice-mic-details { margin-left:auto; font-size:.75rem; color:var(--secondary); }
.practice-mic-details summary { cursor:pointer; }
.practice-mic-details[open] { flex-basis:100%; }
.practice-mic-details p { max-width:800px; margin-bottom:0; }
.practice-layout .notation { max-height:clamp(260px,calc(100svh - 440px),620px); }
.practice-piano { position:sticky; bottom:0; z-index:5; margin-top:1rem; box-shadow:0 -6px 24px #203c5212; }
.piano-bed { height:120px; min-width:1040px; }
.practice-piano { padding:.8rem 1rem; }
.piano-caption { margin-bottom:.6rem; }
@media(max-width:700px) {
 .practice-feedback { gap:.6rem; padding:.75rem; }
 .practice-mic-intro { flex:1 1 150px; }
 .practice-mic-intro span { font-size:.7rem; }
 .practice-feedback > p { flex:1 1 120px; }
 .practice-mic-details { margin-left:auto; }
 .practice-layout .notation { max-height:45svh; }
 .practice-piano { margin-inline:-.4rem; padding:.6rem; }
 .piano-bed { height:100px; }
 .piano-caption strong { font-size:.8rem; }
 .piano-caption span { font-size:.65rem; }
}

/* Practice is a viewport workspace: controls and keyboard never cover notation. */
.practice-playing-page .site-footer { display:none; }
.practice-playing-page .page-header { min-height:3rem; padding-block:.35rem; }
.practice-playing-page .wordmark { font-size:1.55rem; }
.practice-playing-page .site-nav a { min-height:2rem; }
.practice-active { height:calc(100dvh - 64px); min-height:400px; padding-block:.65rem .4rem; display:flex; flex-direction:column; gap:.5rem; }
.practice-active .practice-title { display:flex; align-items:center; gap:.75rem; flex:none; }
.practice-active .practice-title h1 { flex:1; min-width:0; margin:0; font-size:1.2rem; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.practice-back { text-decoration:none; font-size:1.3rem; padding:.3rem; }
.practice-active .button { min-height:2.2rem; padding:.4rem .7rem; font-size:.78rem; }
.practice-active .practice-layout { display:flex; align-items:stretch; flex:1; min-height:0; }
.practice-active .practice-layout > section { display:flex; flex-direction:column; flex:1; min-height:0; }
.practice-active .score-tools { align-items:center; gap:.5rem; margin:0; flex:none; }
.practice-active .practice-hand-control { font-size:.75rem; gap:.4rem; }
.practice-active .hand-segments button { padding:.45rem .65rem; font-size:.75rem; }
.practice-active .practice-tempo-control { font-size:.65rem; gap:0 .5rem; }
.practice-active .practice-tempo-control input { width:110px; }
.practice-status-row { display:flex; justify-content:space-between; gap:1rem; flex:none; }
.practice-status-row p { font-size:.68rem; margin:.3rem 0; color:var(--secondary); }
.practice-active .practice-layout .notation { flex:0 1 auto; align-self:stretch; min-height:0; max-height:min(62dvh,40rem); overflow:auto; overscroll-behavior:contain; background:#fff; }
.practice-active .practice-piano { position:relative; bottom:auto; flex:none; margin:0; padding:.5rem .75rem; box-shadow:none; }
.practice-active .piano-bed { height:100px; }
.practice-active .piano-caption { margin-bottom:.3rem; align-items:center; }
.practice-active .piano-caption strong { font-size:.75rem; }
.practice-active .piano-caption span { display:none; }
.practice-active .practice-piano > p { font-size:.6rem; margin:.2rem 0 0; }
.practice-help { position:relative; margin-left:auto; }
.practice-help summary { cursor:pointer; border:1px solid var(--border); border-radius:50%; width:1.8rem; height:1.8rem; text-align:center; line-height:1.8rem; list-style:none; }
.practice-help p { position:absolute; right:0; top:1.5rem; z-index:10; width:min(300px,80vw); background:white; border:1px solid var(--border); border-radius:8px; padding:1rem; box-shadow:0 5px 20px #14283b18; font-size:.8rem; }
.practice-active:fullscreen,.practice-active.practice-focus { width:100%; max-width:none; height:100dvh; min-height:0; margin:0; padding:.6rem 1rem; background:var(--ground); }
.practice-active.practice-focus { position:fixed; inset:0; z-index:100; }
@media(max-width:700px) {
 .practice-active { height:calc(100dvh - 64px); gap:.35rem; }
 .practice-active .practice-title h1 { font-size:.95rem; }
 .practice-active .practice-title { gap:.4rem; }
 .practice-active .practice-fullscreen { font-size:.7rem; white-space:nowrap; }
 .practice-active .score-tools { gap:.35rem .5rem; }
 .practice-active .practice-hand-control > span { display:none; }
 .practice-active .piano-bed { height:85px; }
 .practice-active .practice-piano { padding:.4rem; }
 .practice-active .practice-piano > p { display:none; }
 .practice-active .practice-status-row p { font-size:.6rem; }
 .practice-active:fullscreen,.practice-active.practice-focus { padding:.4rem; }
}

.score-workspace:fullscreen,.score-workspace.score-focus { padding:1rem; background:var(--ground); display:flex; flex-direction:column; height:100dvh; width:100%; }
.score-workspace.score-focus { position:fixed; inset:0; z-index:100; }
.score-workspace:fullscreen .notation,.score-workspace.score-focus .notation { flex:1; min-height:0; max-height:none; }

.appearance-control select { font:inherit; font-size:.7rem; padding:.35rem; border:1px solid var(--border); border-radius:6px; background:var(--paper); color:var(--text); }
html[data-theme="dark"] { color-scheme:dark; --ground:#121416; --paper:#1a1d21; --surface:#23272c; --text:#ececec; --secondary:#a3a9b1; --border:#2e3339; --link:#8fb8e0; --action:#4a7bb0; --action-hover:#5a8bc0; }
html[data-theme="dark"] .site-head,html[data-theme="dark"] .practice-piano,html[data-theme="dark"] .score-facts,html[data-theme="dark"] .practice-help p { background:var(--paper); }
html[data-theme="dark"] .hand-segments { background:#262a30; }
html[data-theme="dark"] .hand-segments button[aria-pressed="true"] { background:#3d434b; }
/* Dark notation, matching the live site: white ink drawn straight on the panel colour.
   CSS recolours the viewer's black ink, so theme switches apply instantly without
   re-rendering. PDF export renders outside .notation and stays black on white. */
html[data-theme="dark"] .notation,html[data-theme="dark"] .practice-active .practice-layout .notation { background:var(--paper); color:#ffffff; }
html[data-theme="dark"] .notation svg [fill="#000000"] { fill:#ffffff; }
/* The pre-Play preview is a transparent image with black ink: invert it to match the white-ink score. */
html[data-theme="dark"] .notation > img { filter:invert(1); }
html[data-theme="dark"] .notation svg [stroke="#000000"] { stroke:#ffffff; }
/* OSMD paints page backgrounds inline on the svg element (A4 scan pages), so override it. */
html[data-theme="dark"] .notation svg[style*="background-color"] { background-color:var(--paper) !important; }
html[data-theme="dark"] .notation svg [fill="#FFFFFF"],html[data-theme="dark"] .notation svg [fill="#ffffff"] { fill:var(--paper); }
html[data-theme="dark"] .preview-banner { background:#23272c; color:#a3a9b1; }

html[data-theme="dark"] .score-card,html[data-theme="dark"] .catalogue-row,html[data-theme="dark"] .genre-tile,html[data-theme="dark"] .practice-sample { background:var(--paper); }
html[data-theme="dark"] .site-nav a { color:var(--text); }
html[data-theme="dark"] .tool-icon { background:#262c34; color:#8fb8e0; }
html[data-theme="dark"] .practice-start__symbol { background:#262c34; color:#8fb8e0; }

html[data-theme="dark"] .button.secondary { background:#1a1d21; color:#c9dcef; border-color:#4d5560; }
html[data-theme="dark"] .field::placeholder { color:#959ba3; opacity:1; }
/* Notation previews are ink on paper, independent of the surrounding theme. */
.score-card__image,.catalogue-row__image,.practice-sample__preview { background:#fff; color:#17263a; color-scheme:light; }
.score-card__image img,.catalogue-row__image img,.practice-sample__preview img { background:#fff; }
.score-card__open { border-top-color:var(--border); }
.appearance-control { position:relative; flex:none; }
.appearance-control summary { display:grid; place-items:center; width:40px; height:40px; border:1px solid transparent; border-radius:50%; color:var(--secondary); cursor:pointer; list-style:none; transition:background .15s,color .15s; }
.appearance-control summary::-webkit-details-marker { display:none; }
.appearance-control summary:hover,.appearance-control[open] summary { color:var(--text); background:var(--surface); border-color:var(--border); }
.appearance-control svg { display:block; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.appearance-moon { display:none; }
html[data-theme="dark"] .appearance-sun { display:none; }
html[data-theme="dark"] .appearance-moon { display:block; }
.appearance-popover { position:absolute; top:calc(100% + 8px); right:0; width:224px; z-index:30; background:var(--paper); border:1px solid var(--border); border-radius:12px; padding:8px; box-shadow:0 12px 36px #07132330; }
.appearance-heading { display:block; padding:7px 9px 10px; color:var(--secondary); font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.appearance-popover button { width:100%; display:flex; align-items:center; gap:11px; border:0; background:transparent; border-radius:7px; padding:10px; color:var(--text); text-align:left; font-size:.82rem; cursor:pointer; }
.appearance-popover button:hover { background:var(--surface); }
.appearance-popover button[aria-pressed="true"] { background:var(--surface); color:var(--link); }
.theme-check { margin-left:auto; visibility:hidden; }
[aria-pressed="true"] > .theme-check { visibility:visible; }
@media(max-width:700px) { .appearance-control summary { width:44px; height:44px; } }

.composer-directory-heading h1 { margin-bottom:.65rem; }
.composer-directory-heading .directory-intro { margin:0; font-size:1.05rem; }
.directory-featured { padding:2.5rem 0; }
.directory-featured .section-head h2,.composer-directory .section-head h2 { font-size:1.6rem; }
.directory-featured .section-head > a,.directory-count { font-size:.8rem; color:var(--secondary); }
.composer-directory { border-top:1px solid var(--border); padding-top:2rem; scroll-margin-top:1.5rem; }
.composer-directory .section-head h2 { margin-bottom:.5rem; }
.alphabet-hint { margin:0 0 1rem; font-size:.8rem; color:var(--secondary); }
.alphabet-filter { display:flex; flex-wrap:wrap; gap:5px; padding:.7rem; border:1px solid var(--border); border-radius:12px; background:var(--paper); }
.alphabet-filter a { display:grid; place-items:center; min-width:34px; min-height:38px; padding:.4rem .6rem; border-radius:6px; font-size:.82rem; text-decoration:none; color:var(--secondary); }
.alphabet-filter a:hover { background:var(--surface); color:var(--text); }
.alphabet-filter a[aria-current] { background:var(--action); color:white; font-weight:600; }
.composer-directory .composer-index { margin-top:1.25rem; }
.composer-directory .composer-index a { display:flex; justify-content:space-between; align-items:center; gap:1rem; color:var(--text); text-decoration:none; padding:.3rem 0; font-size:.9rem; }
.composer-directory .composer-index a span { color:var(--secondary); font-size:.8rem; }
.composer-directory .composer-index a:hover { color:var(--link); }
.directory-empty { padding:2rem 0; color:var(--secondary); }
@media(max-width:700px) { .directory-featured { padding:1.75rem 0; }.directory-featured .portrait-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px 12px; }.directory-featured .portrait-link { font-size:.7rem; }.alphabet-filter a { min-width:36px; min-height:44px; }.directory-featured .section-head { align-items:start; }.directory-featured .section-head > a { max-width:100px; text-align:right; } }

@media(max-width:600px) { .genre-directory-featured .genre-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.genre-directory-featured .genre-label { font-size:1rem; padding:12px; }.genre-directory-featured .genre-label > span { display:inline; } }

/* Shared musical signature, from the browser tab to the practice workspace. */
.wordmark { display:inline-flex; align-items:center; gap:.6rem; flex-shrink:0; }
.brand-mark { display:block; width:40px; height:40px; flex:none; }
.footer-inner .brand-mark { width:30px; height:30px; }
.practice-playing-page .brand-mark { width:30px; height:30px; }
html[data-theme="dark"] .brand-mark { color:var(--link); }
@media(max-width:700px) { .wordmark { font-size:1.8rem; gap:.5rem; }.brand-mark { width:34px; height:34px; } }

.wordmark .brand-mark { width:32px; color:var(--link); }
.footer-inner .brand-mark,.practice-playing-page .brand-mark { width:24px; }
@media(max-width:700px) { .wordmark .brand-mark { width:28px; }.practice-playing-page .brand-mark { width:24px; } }

.piano-key.piano-midi-held { background:#74bda5; }
.practice-status-row { flex-wrap:wrap; gap:0 1rem; }
.practice-status-row p:empty { display:none; }

.practice-guide { display:grid; grid-template-columns:1.1fr 1fr; gap:2rem 3rem; padding:2rem; margin-bottom:2.5rem; border:1px solid var(--border); border-radius:16px; background:var(--paper); }
.guide-eyebrow { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--link); font-weight:600; }
.practice-guide h2 { font-size:2rem; line-height:1.15; margin:.7rem 0 1rem; }
.practice-guide-copy p { color:var(--secondary); font-size:.9rem; line-height:1.65; }
.practice-guide-copy .guide-detail { font-size:.8rem; }
.practice-guide-copy > a { font-size:.85rem; }
.practice-demo { align-self:center; background:#f6f8fb; color:#23364a; border:1px solid #dce3eb; border-radius:12px; padding:1rem 1.25rem; }
.practice-demo-heading { display:flex; justify-content:space-between; font-size:.65rem; color:#51677b; gap:1rem; }
.practice-demo svg { display:block; width:100%; height:auto; margin:.75rem 0; }
.demo-keyboard { position:relative; display:flex; width:210px; height:94px; margin:0 auto; }
.demo-keyboard button { flex:1; border:1px solid #aab8c8; border-radius:0 0 6px 6px; background:#fff; color:#23364a; padding:58px 0 8px; font:500 .85rem var(--sans); cursor:pointer; }
.demo-keyboard button.is-target { background:#d5e9df; border-color:#65977e; }
.demo-keyboard button:disabled { opacity:1; cursor:default; }
.demo-black-key { position:absolute; width:22px; height:53px; background:#293749; border-radius:0 0 4px 4px; top:0; pointer-events:none; }
.demo-black-key-first { left:59px; }.demo-black-key-second { left:129px; }
.practice-demo > p { font-size:.75rem; text-align:center; min-height:2.8em; margin:1rem 0 .2rem; }
.demo-reset { display:block; margin:0 auto; border:0; background:transparent; color:#345778; text-decoration:underline; font-size:.7rem; padding:.5rem; cursor:pointer; }
.practice-input-guide { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.practice-input-guide p { margin:0; }.practice-input-guide strong { display:block; font-size:.85rem; margin-bottom:.4rem; }.practice-input-guide span { display:block; color:var(--secondary); font-size:.78rem; line-height:1.6; }
#practice-samples { scroll-margin-top:1.5rem; }
@media(max-width:700px) { .practice-guide { grid-template-columns:1fr; padding:1.25rem; gap:1.5rem; }.practice-guide h2 { font-size:1.7rem; }.practice-input-guide { grid-template-columns:1fr; gap:1rem; }.practice-demo { width:100%; min-width:0; } }

.composer-faq details { border-bottom:1px solid var(--border); padding:1rem 0; max-width:75ch; }.composer-faq summary { cursor:pointer; color:var(--text); font-weight:500; }.composer-faq p { color:var(--secondary); line-height:1.7; }

.catalogue-pagination { margin:1rem 0; max-width:100%; }.catalogue-pagination .pagination { flex-wrap:wrap; gap:.35rem; }.catalogue-pagination .pagination a { display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:36px; padding:.35rem .55rem; border-radius:6px; text-decoration:none; }.catalogue-pagination .pagination a:hover { background:var(--surface); }.catalogue-pagination .pagination a[aria-current] { background:var(--action); color:white; }.pagination-position,.collection-summary { color:var(--secondary); font-size:.8rem; }.pagination-jumps { font-size:.8rem; margin-top:.6rem; }.pagination-jumps summary { cursor:pointer; color:var(--link); }.pagination-jumps > div { padding:.75rem 0; }.pagination-jumps nav { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.35rem; }.pagination-jumps nav a { padding:.5rem; border:1px solid var(--border); border-radius:5px; }.pagination-jumps > div > span { color:var(--secondary); }

/* Twelve featured composers form complete rows at each breakpoint. */
.portrait-grid,.directory-featured .portrait-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:28px 32px; }
.portrait-link img { max-width:136px; margin-inline:auto; }
@media(max-width:900px) { .portrait-grid,.directory-featured .portrait-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 22px; } }
@media(max-width:600px) { .portrait-grid,.directory-featured .portrait-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 18px; }.portrait-link img { max-width:104px; }.directory-featured .portrait-link { font-size:.88rem; } }

/* Scan page: compact chooser with a progress summary */
.scan-page .utility-heading h1 { margin-bottom:1.25rem; }
.scan-page .import-zone { display:flex; flex-direction:column; justify-content:center; min-height:clamp(15rem, 34vh, 22rem); padding:2rem 1.25rem; }
.scan-page .import-zone:has(.scan-progress:not([hidden])) { min-height:0; padding:1.5rem 1.25rem; }
.scan-page .import-zone h2 { font-size:1.35rem; margin:0 0 .25rem; }
.scan-page .import-zone > p { margin:0; font-size:.95rem; }
.scan-page .import-actions { margin-top:1rem; }
.scan-progress { margin:1.25rem auto 0; max-width:34rem; text-align:start; }
.scan-progress-head { display:flex; justify-content:space-between; gap:1rem; font-size:.9rem; margin-bottom:.4rem; }
.scan-file { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scan-percent { color:var(--secondary); font-variant-numeric:tabular-nums; }
.scan-bar { height:.5rem; border-radius:999px; background:var(--surface); border:1px solid var(--border); overflow:hidden; }
.scan-bar > span { display:block; height:100%; width:0; background:var(--action); border-radius:inherit; transition:width .3s ease; }
.scan-progress[data-state="error"] .scan-bar > span { background:#b42318; }
.scan-steps { display:flex; justify-content:space-between; gap:.5rem; list-style:none; padding:0; margin:.6rem 0 0; font-size:.8rem; color:var(--secondary); }
.scan-steps li::before { content:"○ "; }
.scan-steps li[data-status="active"] { color:var(--text); font-weight:600; }
.scan-steps li[data-status="active"]::before { content:"● "; color:var(--action); }
.scan-steps li[data-status="done"]::before { content:"✓ "; color:var(--action); }
.scan-progress .scan-status { margin:.6rem 0 0; color:var(--secondary); font-size:.9rem; text-align:center; }
.scan-progress[data-state="error"] .scan-status { color:#b42318; }
.scan-actions { margin-top:.75rem; }
.scan-actions:not(:has(button:not([hidden]))) { display:none; }
.info-tip { position:relative; display:inline-block; vertical-align:middle; }
.info-tip-button { width:1.15rem; height:1.15rem; padding:0; border:1px solid var(--secondary); border-radius:50%; background:transparent; color:var(--secondary); font:italic 600 .7rem/1 var(--serif); cursor:help; }
.info-tip-button:hover, .info-tip-button:focus-visible { color:var(--link); border-color:var(--link); }
.info-tip-text { position:absolute; z-index:5; bottom:calc(100% + .5rem); left:50%; transform:translateX(-50%); width:max-content; max-width:min(18rem, 80vw); padding:.55rem .7rem; border-radius:.4rem; background:var(--text); color:var(--paper); font-size:.8rem; line-height:1.4; text-align:start; box-shadow:0 4px 14px rgba(0,0,0,.15); opacity:0; visibility:hidden; transition:opacity .15s; pointer-events:none; }
.info-tip:hover .info-tip-text, .info-tip:focus-within .info-tip-text { opacity:1; visibility:visible; }
@media(max-width:700px) { .info-tip-text { left:auto; right:-.5rem; transform:none; } }
/* Scan result: A4 sheets on desktop. The viewer sizes each page from this
   container's width; never resize its pages or SVGs in CSS, or the playback
   cursor (positioned in the viewer's own pixels) drifts off the notes. */
.scan-result { scroll-margin-top:5rem; }
.scan-result .notation--pages { width:min(100%, 794px); margin:1.5rem auto 0; padding:0; max-height:none; overflow:visible; background:transparent; border:0; border-radius:0; box-shadow:none; position:relative; }
.scan-result .notation--pages > div[id^="osmdCanvasPage"] { margin-bottom:2rem; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(25,54,89,.12); }
.scan-result .notation--pages > div[id^="osmdCanvasPage"]:last-of-type { margin-bottom:0; }
.privacy-note { display:inline-flex; align-items:center; gap:.45rem; margin:0; color:var(--secondary); font-size:.9rem; line-height:1.45; }
.privacy-note strong { color:var(--text); font-weight:600; }
.privacy-note .info-tip { flex:none; }
.scan-page .utility-heading { display:flex; flex-direction:column; align-items:center; margin-bottom:1.25rem; }
.scan-page .utility-heading h1 { margin-bottom:.6rem; }
.scan-page .utility-heading .privacy-note { margin:0 !important; }
.scan-page .import-zone .import-actions { margin-top:0; }
@media(max-width:700px) { .scan-page .import-zone { min-height:13rem; padding:1.5rem 1rem; } .privacy-note { display:block; text-align:center; } .privacy-note .info-tip { margin-inline-start:.3rem; } }
/* Dark mode: hover, focus and selected states use graphite tones, not the light-theme tints */
html[data-theme="dark"] { --focus:#8fb8e0; }
html[data-theme="dark"] .journey > .journey-link:hover,html[data-theme="dark"] .journey > .journey-link:focus-visible { background:var(--surface); }
html[data-theme="dark"] .score-card:hover,html[data-theme="dark"] .genre-tile:hover,html[data-theme="dark"] .practice-sample:hover { border-color:#3a4048; box-shadow:0 10px 30px rgba(0,0,0,.45); }
html[data-theme="dark"] .hand-segments button[aria-pressed="true"] { color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.5); }
html[data-theme="dark"] .button.secondary:hover { background:var(--surface); border-color:#5c6570; }
html[data-theme="dark"] .scan-result .notation--pages { background:transparent; }
html[data-theme="dark"] .scan-result .notation--pages > div[id^="osmdCanvasPage"] { background:var(--paper); box-shadow:0 1px 3px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4); }

/* Keep search results close to the query; detailed page navigation stays below the list. */
.score-search-page .catalogue-search { max-width:none; }
.score-search-page .catalogue-search input { min-width:0; }
.score-search-page .catalogue-heading { align-items:center; padding-block:1.25rem .75rem; gap:.75rem 1.5rem; }
.score-search-page .catalogue-heading .catalogue-pagination { margin:0; }
.score-search-page .catalogue-heading .pagination-position,
.score-search-page .catalogue-heading .pagination-jumps { display:none; }
@media(max-width:600px) {
 .score-search-page .catalogue-heading { flex-direction:column; align-items:flex-start; }
 .score-search-page .catalogue-heading .pagination { gap:.2rem; }
}

/* Scan follows the same left-aligned utility layout as practice. */
.scan-page { max-width:72rem; padding-block:2.5rem 4rem; }
.scan-page .utility-heading { align-items:flex-start; text-align:left; margin-bottom:1.5rem; }
.scan-page .utility-heading p { margin:0; max-width:60ch; }
.scan-page .import-zone { min-height:0; align-items:flex-start; text-align:left; padding:1.75rem 2rem; border:1px solid var(--border); border-radius:12px; }
.scan-page .import-zone .import-actions { justify-content:flex-start; margin:1.25rem 0 1rem; }
.scan-page .import-zone .privacy-note { font-size:.8rem; text-align:left; }
.scan-page .scan-progress { width:100%; max-width:40rem; margin:1rem 0 0; }
.scan-guide { margin-top:2.25rem; }
.scan-guide > h2 { font-size:1.75rem; margin:0 0 1.25rem; }
.scan-guide-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; list-style:none; padding:0; margin:0; }
.scan-guide-number { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:50%; background:var(--surface); color:var(--link); font-size:.9rem; font-weight:600; }
.scan-guide-steps h3 { font-family:var(--font-sans,Arial,sans-serif); font-size:1rem; margin:.8rem 0 .5rem; }
.scan-guide-steps p,.scan-guide-note { font-size:.875rem; color:var(--secondary); line-height:1.65; margin:0; }
.scan-guide-note { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border); }
.scan-page:has(.scan-progress:not([hidden])) .scan-guide { display:none; }
@media(max-width:600px) {
 .scan-page .import-zone { padding:1.25rem; }
 .scan-guide-steps { grid-template-columns:1fr; gap:1.25rem; }
 .scan-guide-steps li { display:grid; grid-template-columns:2rem minmax(0,1fr); gap:0 .75rem; }
 .scan-guide-number { grid-row:1 / 3; }
 .scan-guide-steps h3 { margin:.25rem 0 .4rem; }
 .scan-guide-steps p { grid-column:2; }
}

/* A compact photo-to-score demonstration, centred around the scanning action. */
.scan-page { max-width:60rem; margin-inline:auto; padding-top:2.5rem; }
.scan-page .utility-heading { align-items:center; text-align:center; margin-bottom:2rem; }
.scan-page .utility-heading h1 { font-size:clamp(2.25rem,4vw,3.25rem); }
.scan-page .utility-heading p { max-width:44ch; }
.scan-page .import-zone { display:block; padding:1.25rem; border-radius:18px; }
.scan-welcome { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:2.5rem; }
.scan-start-copy { padding-right:1.25rem; }
.scan-page .scan-start-copy h2 { font-size:1.8rem; line-height:1.2; margin:0 0 .75rem; }
.scan-start-copy > p { line-height:1.6; font-size:.95rem; }
.scan-page .scan-start-copy .import-actions { margin:1.5rem 0 1rem; }
.scan-page .scan-start-copy .privacy-note { font-size:.8rem; line-height:1.6; }
.scan-demo { margin:0; min-width:0; }
.scan-comparison { position:relative; overflow:hidden; border:1px solid #dce2e8; border-radius:10px; aspect-ratio:1; background:white; isolation:isolate; }
.scan-comparison img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scan-comparison-before { clip-path:inset(0 calc(100% - var(--reveal)) 0 0); }
.scan-comparison-label { position:absolute; top:.75rem; padding:.25rem .5rem; border-radius:4px; background:#ffffffed; color:#233851; font-size:.68rem; font-weight:600; pointer-events:none; }
.scan-comparison-label.before { left:.75rem; }.scan-comparison-label.after { right:.75rem; }
.scan-comparison-divider { position:absolute; top:0; bottom:0; left:var(--reveal); width:2px; background:#3976ad; transform:translateX(-50%); pointer-events:none; }
.scan-comparison-divider > span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:white; color:#2f679b; box-shadow:0 2px 12px #12294430; display:grid; place-items:center; font-size:1.1rem; font-weight:bold; }
.scan-comparison input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; }
.scan-comparison:focus-within { outline:3px solid var(--action); outline-offset:4px; }
.scan-demo figcaption { font-size:.72rem; text-align:center; color:var(--secondary); margin-top:.65rem; }
.scan-demo figcaption span { opacity:.8; }
.scan-guide { max-width:52rem; margin:2rem auto 0; }
.scan-guide > h2 { text-align:center; font-size:1.5rem; }
.scan-guide-steps { gap:1.75rem; }
.scan-guide-note { font-size:.8rem; }
.scan-page:has(.scan-progress:not([hidden])) .scan-demo { display:none; }
.scan-page:has(.scan-progress:not([hidden])) .scan-welcome { display:block; }
/* While a scan runs the demo is hidden: shrink the card to its content and centre it under the heading. */
.scan-page:has(.scan-progress:not([hidden])) .import-zone { max-width:40rem; margin-inline:auto; padding:1.75rem 2rem; }
.scan-page:has(.scan-progress:not([hidden])) .scan-start-copy { padding:0; text-align:center; }
.scan-page:has(.scan-progress:not([hidden])) .scan-start-copy .import-actions { justify-content:center; }
.scan-page:has(.scan-progress:not([hidden])) .scan-start-copy .privacy-note { text-align:center; }
.scan-page:has(.scan-progress:not([hidden])) .scan-progress { max-width:none; margin:1.25rem 0 0; }
@media(max-width:600px) {
 .scan-page { padding-top:1.75rem; }
 .scan-page .utility-heading { margin-bottom:1.5rem; }
 .scan-welcome { grid-template-columns:1fr; gap:1.5rem; }
 .scan-start-copy { grid-row:1; padding:0; text-align:center; }
 .scan-page .scan-start-copy h2 { font-size:1.6rem; }
 .scan-page .scan-start-copy .import-actions { justify-content:center; margin:1rem 0; }
 .scan-page .scan-start-copy .privacy-note { text-align:center; }
 .scan-demo { width:min(100%,20rem); margin:auto; }
 .scan-guide > h2 { text-align:left; }
}

/* Genre copy stays under the score list so the catalogue is reached first. */
.genre-support { margin-top:2.5rem; }
.genre-support h2 { font-size:1.25rem; margin:1.75rem 0 .6rem; }
.genre-support p { color:var(--secondary); max-width:68ch; line-height:1.6; }
.genre-highlights,.genre-related,.genre-support ul { padding:0; margin:0; list-style:none; }
.genre-highlights li { padding:.85rem 0; border-bottom:1px solid var(--border); }
.genre-highlights p { margin:.35rem 0 0; font-size:.9rem; }
.genre-related { display:flex; flex-wrap:wrap; gap:.5rem; }
.genre-related a { display:inline-block; padding:.35rem .7rem; border:1px solid var(--border); border-radius:999px; text-decoration:none; }
.genre-support details { border-bottom:1px solid var(--border); padding:.85rem 0; max-width:68ch; }
.genre-support summary { cursor:pointer; font-weight:500; }
@media(max-width:600px) {
 .genre-support { margin-top:1.5rem; }
 .genre-support h2 { font-size:1.15rem; }
 .genre-related a { padding:.45rem .75rem; }
}
/* Scan progress: long file names truncate, the bar and steps never overflow on phones */
.scan-progress { width:100%; min-width:0; }
.scan-progress-head { min-width:0; }
.scan-file { flex:1 1 auto; min-width:0; }
.scan-percent { flex:none; }
.scan-steps { flex-wrap:wrap; gap:.3rem .9rem; }
.scan-steps li { white-space:nowrap; }
/* "More" menu for secondary score actions */
.tools-menu { position:relative; }
.tools-menu > summary { list-style:none; cursor:pointer; }
.tools-menu > summary::-webkit-details-marker { display:none; }
.tools-menu > summary::after { content:""; width:.45em; height:.45em; margin-left:.2rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-.15em) rotate(45deg); }
.tools-menu[open] > summary::after { transform:translateY(.1em) rotate(-135deg); }
.tools-menu__list { position:absolute; z-index:20; top:calc(100% + .4rem); left:0; min-width:12.5rem; padding:.35rem; background:var(--paper); border:1px solid var(--border); border-radius:.6rem; box-shadow:0 12px 32px rgba(16,32,54,.16); display:flex; flex-direction:column; }
.tools-menu__list > button,.tools-menu__list > a { display:block; width:100%; text-align:start; padding:.6rem .75rem; border:0; border-radius:.4rem; background:none; color:var(--text); font:inherit; font-size:.95rem; text-decoration:none; cursor:pointer; }
.tools-menu__list > button:hover,.tools-menu__list > a:hover,.tools-menu__list > button:focus-visible,.tools-menu__list > a:focus-visible { background:var(--surface); }
.tools-menu__list > button[disabled] { opacity:.5; cursor:default; }
html[data-theme="dark"] .tools-menu__list { box-shadow:0 12px 32px rgba(0,0,0,.5); }
.score-workspace:fullscreen .notation--pages,.score-workspace.score-focus .notation--pages { overflow:auto; width:100%; margin-top:.75rem; }
/* Player toolbar stays reachable while playback scrolls the page to follow the cursor:
   it pins just below the sticky site header (77px) on score and scan pages. */
.score-workspace > .score-tools { position:sticky; top:77px; z-index:15; background:var(--ground); padding-block:.6rem; margin-block:-.6rem .4rem; }
.score-workspace:fullscreen > .score-tools,.score-workspace.score-focus > .score-tools { top:0; }
.notation img[id^="cursorImg"] { scroll-margin-block:9rem 2rem; }
@media(max-width:520px) { .wide-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .score-workspace > .score-tools { flex-wrap:nowrap; } }
.tools-menu__tempo { padding:.55rem .75rem .7rem; border-bottom:1px solid var(--border); margin-bottom:.3rem; }
.tools-menu__tempo label { display:flex; justify-content:space-between; gap:1rem; font-size:.9rem; color:var(--text); margin-bottom:.35rem; }
.tools-menu__tempo output { color:var(--secondary); font-variant-numeric:tabular-nums; }
.tools-menu__tempo input[type="range"] { width:100%; accent-color:var(--action); }
/* More menu: sections (Help, Advanced) and setting rows */
.tools-menu__list { max-height:min(75vh, 34rem); overflow-y:auto; }
.tools-menu__section { border-top:1px solid var(--border); margin-top:.3rem; padding-top:.3rem; }
.tools-menu__section > summary { padding:.6rem .75rem; border-radius:.4rem; cursor:pointer; color:var(--text); font-size:.95rem; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.tools-menu__section > summary::-webkit-details-marker { display:none; }
.tools-menu__section > summary::after { content:""; width:.4em; height:.4em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); }
.tools-menu__section[open] > summary::after { transform:rotate(-135deg); }
.tools-menu__section > summary:hover { background:var(--surface); }
.tools-menu__section > p { margin:.2rem .75rem .6rem; font-size:.82rem; line-height:1.5; color:var(--secondary); }
.tools-menu__setting { padding:.45rem .75rem; }
.tools-menu__setting label { display:flex; justify-content:space-between; gap:1rem; font-size:.85rem; color:var(--text); margin-bottom:.25rem; }
.tools-menu__setting output { color:var(--secondary); font-variant-numeric:tabular-nums; }
.tools-menu__setting input[type="range"] { width:100%; accent-color:var(--action); }
.tools-menu__setting select { width:100%; padding:.35rem .5rem; border:1px solid var(--border); border-radius:.4rem; background:var(--paper); color:var(--text); font:inherit; font-size:.85rem; }
.tools-menu__setting--check { display:flex; align-items:center; gap:.5rem; }
.tools-menu__setting--check label { margin:0; }
.tools-menu__list > .tools-menu__section .tools-menu__reset { display:block; width:calc(100% - 1.5rem); margin:.4rem .75rem .5rem; padding:.45rem .6rem; border:1px solid var(--border); border-radius:.4rem; background:none; color:var(--link); font:inherit; font-size:.85rem; cursor:pointer; }
.practice-page .tools-menu__list { min-width:16rem; }
.practice-page .score-tools .tools-menu__list { left:auto; right:0; }
/* Keyboard size and note names (Advanced) */
.practice-page[data-keyboard-size="fit"] .piano-bed { min-width:0; }
.practice-page[data-keyboard-size="large"] .piano-bed { min-width:1560px; height:150px; }
.piano-name-extra { display:none; pointer-events:none; }
.piano-names .piano-name-extra { display:inline; }
/* Scores where a click moves the playback cursor (attachClickToSeek). */
.notation--seekable svg { cursor:pointer; }

/* Compact catalogue cards keep score previews and edition details together. */
.search-score-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.25rem 0 2rem; }
.search-score-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--border); border-radius:.5rem; overflow:hidden; background:var(--paper); }
.search-score-card__link { display:flex; flex:1; flex-direction:column; color:var(--text); text-decoration:none; }
.search-score-card__link:focus-visible { outline:3px solid var(--link); outline-offset:-3px; }
.search-score-card:hover { border-color:var(--link); }
.search-score-card__image { height:9rem; overflow:hidden; background:#fff; color:#17263a; text-align:center; }
.search-score-card__image img { width:100%; height:100%; object-fit:cover; object-position:top; background:#fff; }
.search-score-card__body { display:flex; flex:1; flex-direction:column; gap:.3rem; padding:.9rem 1rem; }
.search-score-card h3 { margin:0; font-size:1.05rem; line-height:1.3; }
.search-score-card p { margin:0; color:var(--secondary); font-size:.8rem; line-height:1.4; overflow-wrap:anywhere; }
.search-score-card h3,.search-score-card__credit,.search-score-card__description,.search-score-card__details { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.search-score-card h3 { -webkit-line-clamp:3; }
.search-score-card__credit,.search-score-card__description,.search-score-card__details { -webkit-line-clamp:2; }
.search-score-card__action { display:flex; justify-content:space-between; margin-top:auto; padding-top:.8rem; color:var(--link); font-size:.8rem; }
@media (max-width:700px) { .search-score-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; } .search-score-card__image { height:7rem; } .search-score-card__body { padding:.7rem; } .search-score-card h3 { font-size:.95rem; } }
@media (max-width:360px) { .search-score-grid { grid-template-columns:1fr; } }

/* Composer matches are destinations in their own right, distinct from score cards. */
.search-composers { margin:.5rem 0 1.35rem; }
.search-composers h2 { margin:0 0 .65rem; font-size:1rem; font-family:var(--sans); font-weight:600; color:var(--secondary); }
.search-composer-list { display:flex; flex-wrap:wrap; gap:.65rem; list-style:none; margin:0; padding:0; }
.search-composer-list li { flex:0 1 21rem; min-width:0; }
.search-composer-card { display:flex; align-items:center; gap:.8rem; min-height:4.25rem; padding:.6rem .8rem; border:1px solid var(--border); border-radius:.5rem; background:var(--paper); color:var(--text); text-decoration:none; }
.search-composer-card:hover { border-color:var(--link); background:var(--surface); }
.search-composer-card:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.search-composer-card img,.search-composer-card__icon { width:3rem; height:3rem; border-radius:50%; flex:none; object-fit:cover; }
.search-composer-card__icon { display:grid; place-items:center; color:var(--link); background:var(--surface); }
.search-composer-card__icon svg { width:1.35rem; height:1.35rem; }
.search-composer-card__copy { display:grid; min-width:0; gap:.12rem; }
.search-composer-card__copy strong { font-size:.94rem; line-height:1.3; }
.search-composer-card__copy span { color:var(--secondary); font-size:.76rem; }
.search-composer-card__arrow { margin-left:auto; color:var(--link); }
.composer-intro > p:first-of-type { white-space:pre-line; }
.guide-action { margin-top:1.25rem; }
@media(max-width:600px) { .search-composer-list li { flex:1 1 100%; } .search-composer-card { min-height:3.75rem; } }
.search-empty { max-width:38rem; padding:1.5rem 0 2.5rem; }
.search-empty h2 { margin:0 0 .4rem; font-size:1.35rem; }
.search-empty p { margin:0 0 1rem; color:var(--secondary); }

/* File drops use the same private recognition flow as the file chooser. */
.scan-dropzone { padding:1.1rem; border:1.5px dashed #9db3c9; border-radius:.75rem; background:var(--surface); transition:border-color .15s,background .15s,box-shadow .15s; }
.scan-dropzone__hint { margin:0; color:var(--text); font-size:.9rem; font-weight:600; }
.scan-page .scan-start-copy .scan-dropzone .import-actions { margin:.75rem 0 0; }
.scan-dropzone.is-dragging { border-color:var(--action); background:var(--paper); box-shadow:0 0 0 3px var(--focus); }
.scan-page .scan-start-copy .privacy-note { margin-top:1rem; }
@media (any-hover:none) { .scan-dropzone__hint { display:none; } .scan-page .scan-start-copy .scan-dropzone .import-actions { margin:0; } }

/* Composer pages: concise identity and direct access to the music. */
.composer-identity { align-items:center; }
.composer-identity-copy { min-width:0; flex:1; }
.composer-identity-copy > p { max-width:65ch; line-height:1.65; }
.composer-section-links { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.3rem; margin-top:1.2rem; font-size:.9rem; }
.composer-section-links .button { display:inline-flex; padding:.65rem 1rem; background:var(--link); color:var(--paper); border-radius:.4rem; text-decoration:none; }
.composer-selected { padding-top:2rem; }
.composer-works li > a { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; font-weight:600; text-decoration:none; }
.composer-works li > a:hover span:first-child { text-decoration:underline; }
.composer-works li > a span:last-child { flex:none; }
.composer-more-works summary { cursor:pointer; color:var(--link); font-size:.9rem; width:fit-content; }
.composer-scores,.composer-copy,.composer-faq { scroll-margin-top:1.5rem; }
.composer-full-intro { white-space:pre-line; }
@media(max-width:600px) { .composer-identity { align-items:flex-start; gap:1rem; flex-wrap:wrap; }.composer-identity-copy { flex-basis:100%; }.composer-portrait { width:4.5rem; height:4.5rem; }.composer-section-links { gap:.8rem 1rem; }.composer-scores .section-head { flex-wrap:wrap; gap:.35rem; } }
.composer-copy a { overflow-wrap:anywhere; }
.composer-works li,.composer-copy { min-width:0; }
.composer-scores,.composer-copy,.composer-faq,#composer-faq-title { scroll-margin-top:6rem; }

.genre-support a { overflow-wrap:anywhere; }
.genre-highlights > li > a { font-weight:600; }

/* Quiet reading panels for substantial editorial content, not catalogue grids. */
.reading-panel { box-sizing:border-box; width:100%; max-width:none; margin:2.5rem auto; padding:clamp(1.25rem,3vw,2.5rem); background:var(--paper); border:1px solid var(--border); border-radius:.75rem; }
.reading-panel p,.reading-panel ul,.reading-panel details { max-width:none; }
.reading-panel p { line-height:1.75; }
.reading-panel > h2:first-child { margin-top:0; }
.composer-reading > .section { margin:0; padding:0; }
.composer-reading > .section + .section { margin-top:2rem; padding-top:1.75rem; border-top:1px solid var(--border); }
.composer-reading > .section > h2:first-child { margin-top:0; }
.reading-panel details:last-child { border-bottom:0; }
.reading-panel a { overflow-wrap:anywhere; }
.reading-panel summary { line-height:1.5; }
@media(max-width:600px) { .reading-panel { margin-block:1.75rem; padding:1.25rem; }.composer-reading > .section + .section { margin-top:1.5rem; padding-top:1.5rem; } }
/* Matching explanatory panels for the two music tools. */
.practice-guide,.scan-guide { box-sizing:border-box; width:100%; max-width:none; margin-inline:auto; padding:2rem; border:1px solid var(--border); border-radius:1rem; background:var(--paper); }
.scan-guide > h2 { text-align:left; }
@media(max-width:700px) { .practice-guide,.scan-guide { padding:1.25rem; } }
/* Keep the composer editorial panel close to its catalogue. */
.composer-reading { margin-top:1.5rem; }
.composer-scores { padding-bottom:0; }

/* The entire right-hand panel is the file drop target. */
.scan-start-copy.scan-dropzone { align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding:1.5rem; min-width:0; }
.scan-page .scan-start-copy.scan-dropzone .import-actions { margin:.75rem 0 0; }
.scan-start-copy.scan-dropzone .privacy-note { margin-bottom:0; }
@media(max-width:700px) { .scan-start-copy.scan-dropzone { padding:1.25rem; } }

/* Guides use navigable lessons and purposeful visual explanations. */
.guide-contents { margin:2rem 0; padding:1.5rem 0; border-block:1px solid var(--border); }
.guide-contents h2 { font-size:1.25rem; margin:0 0 1rem; }
.guide-contents ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem 2rem; padding-left:1.25rem; margin:0; }
.guide-contents a { font-size:.9rem; }
.guide-visual { margin:2rem 0; padding:1.5rem; border-radius:.75rem; background:var(--surface); color:var(--text); }
.guide-visual svg { display:block; width:100%; max-height:230px; }
.guide-visual figcaption { text-align:center; font-size:.85rem; color:var(--secondary); margin-top:1rem; }
.guide-scan-visual { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:1rem; align-items:center; }
.guide-scan-visual img { display:block; width:100%; height:220px; object-fit:contain; }
.guide-scan-visual div > span { display:block; text-align:center; margin-top:.5rem; font-size:.85rem; }
.guide-scan-visual figcaption { grid-column:1/-1; }
.guide-visual-arrow { font-size:2rem; color:var(--link); }
.guide-workflow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; padding:1.5rem; background:var(--surface); border-radius:.75rem; list-style:none; }
.guide-workflow li > span { display:block; font-size:.8rem; color:var(--link); margin-bottom:.6rem; }
.guide-workflow p { font-size:.9rem; color:var(--secondary); margin:.5rem 0 0; }
.guide-article section { scroll-margin-top:6rem; }
.guide-article section + section { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.guide-article section h2 { margin-top:0; font-size:1.5rem; }
.guide-article section p { margin-bottom:0; }
.guide-references { font-size:.85rem; overflow-wrap:anywhere; }
.guide-references h2 { font-size:1.25rem; }
.guide-next { margin:2rem 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.guide-next h2 { margin:0; }
.guide-directory-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.guide-directory-cards li { border:1px solid var(--border); border-radius:.75rem; padding:0; background:var(--paper); }
.composer-directory .guide-directory-cards a { padding:1.5rem; height:100%; align-items:flex-start; }
.composer-directory .guide-directory-cards a > span:first-child { color:var(--text); font-family:Georgia,serif; font-size:1.35rem; }
.guide-directory-cards small { display:block; font-family:Arial,sans-serif; color:var(--secondary); font-size:.9rem; line-height:1.6; margin-top:.7rem; }
@media(max-width:600px) { .guide-contents ol,.guide-workflow,.guide-directory-cards { grid-template-columns:1fr; }.guide-scan-visual img { height:140px; }.guide-visual { padding:1rem; }.guide-article section h2 { font-size:1.25rem; } }

#composer-directory,#genre-directory,#collection-directory,#practice-samples { scroll-margin-top:6rem; }

/* Keep the mobile practice toolbar on one line, with MIDI in More. */
.practice-active [data-practice-action="microphone"][aria-pressed="true"] { background:var(--action); color:#fff; border-color:var(--action); }
@media(max-width:700px) {
 .practice-active .score-tools { flex-wrap:nowrap; gap:.3rem; }
 .practice-active .score-tools > .button,.practice-active .tools-menu > summary { min-height:44px; padding:.4rem .55rem; white-space:nowrap; }
 .practice-active .hand-segments { padding:2px; }
 .practice-active .hand-segments button { min-height:40px; padding:.4rem .45rem; }
 .practice-active .score-tools > .tools-menu { margin-left:auto; }
 .practice-active .tools-menu__list { min-width: min(16rem, calc(100vw - 2rem)); }
}
@media(max-width:360px) {
 .practice-active .score-tools { gap:.2rem; }
 .practice-active .hand-segments button { padding-inline:.3rem; }
 .practice-active .score-tools > .button,.practice-active .tools-menu > summary { padding-inline:.4rem; }
}

/* Section semantics are independent of display size. */
.score-list-heading { font-size:1.5rem; margin:1.25rem 0 1rem; }
.score-facts .score-related-heading { font-size:1.25rem; margin:1.75rem 0 1rem; }
/* Standalone navigation targets; prose links retain their inline rhythm. */
.section-head > a { display:inline-flex; align-items:center; min-height:44px; padding-block:.5rem; }
.site-footer nav a { display:inline-flex; align-items:center; min-height:44px; padding:.5rem .25rem; }
.breadcrumbs { align-items:center; gap:.25rem .6rem; }
.breadcrumbs a { display:inline-flex; align-items:center; min-height:44px; padding-block:.5rem; }
@media(max-width:700px) {
 .section-head { align-items:center; }
 .section-head > a { flex-shrink:0; max-width:45%; text-align:right; }
 .site-footer nav { column-gap:1rem; row-gap:.25rem; }
}

.score-lyrics p { white-space:pre-line; overflow-wrap:anywhere; }