.main-nav { display: flex; gap: 24px; margin-left: auto; margin-right: 28px; font-size: 14px; }
.main-nav a { padding: 12px 0; text-decoration: none; }
.catalog-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; align-items: center; padding: 40px 0 64px; }
.catalog-hero h1 { font-size: clamp(34px,4.7vw,58px); }
.hero-score { background: #191815; color: white; border-radius: 16px; padding: 28px; }
.hero-score p { letter-spacing: .12em; font-size: 11px; font-weight: 800; color: #ffad64; }
.hero-score img { width: 100%; height: auto; padding: 16px; background: white; border-radius: 8px; margin: 12px 0 24px; }
.hero-score a { display: block; padding: 8px 0; }
.secondary-link { display: inline-block; margin: 20px 0 20px 20px; }
.catalog-heading { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 32px; }
.catalog-heading h2 { font-size: 30px; }
.catalog-heading p { color: #57524a; }
.category-nav { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 24px; }
.category-nav a { background: #fffefa; border: 1px solid #d5cfc5; border-radius: 100px; padding: 12px 18px; text-decoration: none; }
.category-nav span { margin-left: 8px; color: #7a3700; font-weight: 700; }
[hidden] { display:none !important; }
.catalog-finder { padding:20px; margin:0 0 18px; border:1px solid #d5cfc5; border-radius:12px; background:#fffefa; }
.finder-fields { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:16px; }
.finder-fields label { display:block; min-width:0; font-size:14px; font-weight:700; }
.finder-fields input,.finder-fields select { display:block; width:100%; min-width:0; min-height:48px; margin-top:8px; padding:10px 12px; border:1px solid #999084; border-radius:6px; background:white; color:#29251f; font:inherit; font-size:16px; }
#finder-hint { font-size:13px; color:#625c53; margin:12px 0; }
.finder-summary { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; }
#finder-count { margin:0; font-size:14px; font-weight:700; }
#finder-clear { min-height:44px; padding:8px 12px; border:1px solid #b8ada0; border-radius:6px; background:#fffefa; color:#713200; font:inherit; font-size:14px; cursor:pointer; }
#finder-clear:disabled { color:#777; cursor:default; border-color:#ddd; }
#finder-empty { line-height:1.7; margin-bottom:0; }
.catalog-finder :focus-visible { outline:3px solid #1964c8; outline-offset:3px; }
@media(max-width:500px) { .finder-fields { grid-template-columns:1fr; gap:14px; } .catalog-finder { padding:16px; } }
.rudiment-group { scroll-margin-top: 20px; padding-bottom: 30px; }
.rudiment-group h3 { font-size: 24px; padding: 18px 0 10px; }
.rudiment-group h3 small { font-size: 13px; color: #756d62; margin-left: 16px; }
.catalog-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; list-style: none; padding: 0; }
.catalog-grid li { min-width: 0; }
.catalog-grid a { display: flex; align-items: center; gap: 16px; min-height: 96px; height: 100%; padding: 20px; background: #fffefa; border: 1px solid #e3ded5; border-radius: 10px; text-decoration: none; }
.catalog-grid a:hover { border-color: #b84b00; background: #fff7ef; }
.catalog-number { flex: 0 0 26px; color: #9a4000; font-weight: 700; font-variant-numeric: tabular-nums; }
.catalog-grid strong { display: block; font-size: 17px; line-height: 1.45; }
.catalog-grid small { display: block; color: #675f55; margin-top: 6px; font-size: 12px; }
.catalog-grid a > span:last-child { margin-left: auto; }
.source-note { font-size: 13px; line-height: 1.8; color: #625c53; }
.english-name { color: #765b41; margin-top: -10px; }
.score-paper img { max-height: 450px; object-fit: contain; }
.score-zoom { display: block; font-size: 13px; margin-top: 14px; }
.sticking { overflow-wrap: anywhere; letter-spacing: .14em; line-height: 1.8; }
.notation-key { font-size: 13px; color: #57524a; line-height: 1.7; }
.click-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; }
.click-toggle input { width: 20px; height: 20px; accent-color: #9a4000; }
.practice-tip { margin: 32px 0; }
.practice-tip h2 { font-size: 23px; }
.practice-tip p { line-height: 1.8; }
.pattern-pager { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 24px; }
.pattern-pager a { max-width: 48%; line-height: 1.7; }
.app-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; padding: 24px 0 54px; }
.app-intro img { display: block; max-height: 560px; max-width: 100%; width: auto; height: auto; object-fit: contain; margin: auto; }
.app-page h2 { font-size: 30px; line-height: 1.4; }
.app-page section { margin-bottom: 56px; }
.app-page p, .app-page li { line-height: 1.9; }
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feature-list article { background: #fffefa; padding: 28px; border: 1px solid var(--line); border-radius: 12px; }
.feature-list h3 { font-size: 21px; }
.app-steps li { padding: 12px 0 12px 12px; }
.availability { border-left: 3px solid #b84b00; padding-left: 16px; font-size: 14px; }
.table-scroll { overflow-x: auto; }
.app-page table { border-collapse: collapse; width: 100%; min-width: 450px; background: #fffefa; }
.app-page th, .app-page td { text-align: left; padding: 18px; border: 1px solid var(--line); line-height: 1.7; }
.app-page thead { background: #eae4da; }
.faq details { padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; min-height: 44px; }
.faq p { margin: 14px 0; }
.download-cta { background: #191815; color: white; border-radius: 16px; padding: 36px; }
.download-cta .store-button { border: 1px solid #83776c; }
@media(max-width:700px) { .topbar { flex-wrap: wrap; height: auto; padding: 16px 0; gap: 12px; } .main-nav { order: 3; width: 100%; margin: 0; border-top: 1px solid var(--line); padding-top: 3px; } .language-switch { margin-left: auto; } .catalog-hero { grid-template-columns: 1fr; gap: 28px; padding-top: 20px; } .catalog-grid { grid-template-columns: 1fr; } .catalog-grid a { min-height: 88px; } .hero-score { padding: 24px; } .catalog-heading h2 { font-size: 26px; } .category-nav a { padding: 10px 14px; } .app-intro, .feature-list { grid-template-columns: 1fr; } .app-intro img { max-height: 420px; } .app-page h2 { font-size: 26px; } .feature-list article { padding: 24px; } .download-cta { padding: 24px; } }

/* Official, unmodified localized download badges: 48px tall, 12px clear space. */
.store-badges { display:flex; flex-wrap:wrap; align-items:center; gap:0; margin:12px -12px; }
.store-badge { display:inline-flex; flex:0 0 auto; padding:12px; background:transparent; line-height:0; border:0; }
.store-badge img { display:block; height:48px; width:auto; max-width:none; border:0; border-radius:0; box-shadow:none; }
.store-badge:focus-visible { outline:3px solid #1964c8; outline-offset:0; }
.beat-unit,.notation-exception { line-height:1.7; border-left:3px solid #cc7c26; padding-left:14px; }

.entry-page { max-width:1060px; }
.entry-hero { padding:36px 0 48px; }
.entry-page h1 span { display:block; font-size:.7em; margin-top:14px; color:#68635c; }
.entry-english { font-size:18px; line-height:1.8; color:#57524a; }
.entry-languages { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:32px 0 22px; }
.entry-language { display:flex; flex-direction:column; gap:13px; padding:28px; border:1px solid #d4cdc1; background:#fffefa; border-radius:14px; text-decoration:none; }
.entry-language span { font-size:26px; font-weight:800; }
.entry-language strong { font-size:19px; text-decoration:underline; text-underline-offset:4px; }
.entry-language small,.entry-note { color:#57524a; line-height:1.8; font-size:14px; }
.entry-app { border-top:1px solid #d4cdc1; padding:40px 0; }
.entry-app h2 { font-size:28px; line-height:1.5; }
.entry-app h2 span { display:block; font-size:22px; color:#68635c; }
.entry-app p { line-height:1.9; max-width:850px; }
.entry-app-links { display:flex; flex-wrap:wrap; gap:20px; margin:24px 0; }
.entry-app-links a,.entry-store-links a { display:inline-block; padding:8px 0; }
@media(max-width:650px) { .entry-languages { grid-template-columns:1fr; gap:16px; } .entry-language { padding:24px; } .entry-hero { padding-top:22px; } }
@media(max-width:650px) {
 .entry-hero { padding-top:10px; }
 .entry-page h1 { font-size:28px; margin-bottom:16px; }
 .entry-page .lede,.entry-english { font-size:15px; line-height:1.65; margin:14px 0; }
 .entry-languages { margin:22px 0 18px; gap:12px; }
 .entry-language { padding:20px; gap:10px; }
 .entry-language span { font-size:24px; }
 .entry-language strong { font-size:17px; }
}