/* Metronome Map 2 guides (/guides/, /<lang>/guides/) — pages are generated by build-guides.py */
:root { --bg:#F6F8FB; --bg2:#FFFFFF; --ink:#0E1B2E; --soft:#55637C; --accent:#2F7CF6; --accent-ink:#1F5FCC; --tint:#EAF1FB; --line:#E1E7F0; }
@media (prefers-color-scheme: dark) { :root { --bg:#0B1526; --bg2:#13223B; --ink:#F4F7FB; --soft:#AEBBD2; --accent:#7CB5FF; --accent-ink:#9CC8FF; --tint:#16294A; --line:#223455; } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",sans-serif; -webkit-font-smoothing:antialiased; }
html:lang(th) body { font-family:"Anuphan","Noto Sans Thai",-apple-system,sans-serif; line-height:1.8; }
html:lang(th) h1, html:lang(th) h2, html:lang(th) .kicker { font-family:"IBM Plex Sans Thai","Noto Sans Thai",-apple-system,sans-serif; }
html:lang(ja) body { font-family:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif; line-height:1.85; }
html:lang(ko) body { font-family:-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; line-height:1.8; word-break:keep-all; }
a { color:var(--accent-ink); }
.wrap { max-width:860px; margin:0 auto; padding:0 16px; }
nav.top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0; }
nav.top .brand { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); text-decoration:none; }
nav.top .brand img { width:32px; height:32px; border-radius:8px; }
nav.top .links { display:flex; gap:16px; font-size:15px; }
nav.top .links a { color:var(--soft); text-decoration:none; }
.crumbs { font-size:14px; color:var(--soft); margin:4px 0 0; }
.crumbs a { color:var(--soft); }
.hero { padding:28px 0 8px; }
.kicker { font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink); font-weight:700; }
h1 { font-size:clamp(30px,5.4vw,46px); line-height:1.15; margin:10px 0 10px; letter-spacing:-.015em; }
h2 { font-size:clamp(23px,3.4vw,30px); line-height:1.25; margin:0 0 12px; letter-spacing:-.01em; }
.meta, .small { color:var(--soft); font-size:14px; }
.lead { font-size:clamp(18px,2.3vw,20px); color:var(--soft); }
.answer { background:var(--tint); border-left:4px solid var(--accent); border-radius:14px; padding:18px 20px; margin:18px 0 8px; }
.answer .label { font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); }
.answer p { margin:6px 0 0; font-size:18px; }
.block { padding:30px 0 6px; }
.block p, .block li { color:var(--ink); }
.block ul, .block ol { padding-left:22px; }
.block li { margin:6px 0; }
.app { background:var(--bg2); border:1px solid var(--line); border-radius:24px; padding:28px 24px; margin-top:30px; }
.app-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:28px; align-items:center; }
.phone { border-radius:32px; background:#0A0A0C; padding:9px; box-shadow:0 24px 50px rgba(14,27,46,.25); max-width:240px; justify-self:center; }
.phone img { display:block; width:100%; height:auto; border-radius:24px; }
.faq details { background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin:10px 0; }
.faq summary { font-weight:650; cursor:pointer; }
.faq details p { color:var(--soft); margin:8px 0 0; }
.cta-box { text-align:center; background:var(--bg2); border:1px solid var(--line); border-radius:24px; padding:30px 22px; margin:34px 0 0; }
.cta-box > img { border-radius:18px; }
.cta-box h2 { margin-top:10px; }
.cta-box p { color:var(--soft); }
.btn { display:inline-block; padding:12px 22px; border-radius:999px; font-weight:700; text-decoration:none; }
.btn.ghost { color:var(--accent-ink); border:1.5px solid var(--accent); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cards .card { display:flex; flex-direction:column; gap:6px; background:var(--bg2); border:1px solid var(--line); border-radius:18px; padding:16px; text-decoration:none; color:var(--ink); }
.cards .card span { color:var(--soft); font-size:15px; }
.cards.big { grid-template-columns:repeat(2,1fr); gap:18px; }
.cards.big .card.guide { padding:0; overflow:hidden; gap:0; transition:transform .15s ease, box-shadow .15s ease; }
.cards.big .card.guide:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(14,27,46,.12); }
.thumb { --tint:#EAF1FB; background:var(--tint); padding:22px 26px 0; height:210px; overflow:hidden; }
.thumb img { display:block; width:100%; height:100%; object-fit:cover; border-radius:14px 14px 0 0; box-shadow:0 10px 30px rgba(14,27,46,.16); background:#fff; }
/* which band of the phone screenshot each card shows */
.thumb-metronome { --tint:#E3F7EF; } .thumb-metronome img { object-position:50% 93%; }
.thumb-stems { --tint:#E6EEFC; } .thumb-stems img { object-position:50% 94%; }
.thumb-home { --tint:#FFF1DE; } .thumb-home img { object-position:50% 27%; }
.thumb-notes-staff { --tint:#F1E9FB; } .thumb-notes-staff img { object-position:50% 36.5%; }
@media (prefers-color-scheme: dark) {
  .thumb-metronome { --tint:#15332B; } .thumb-stems { --tint:#16294A; } .thumb-home { --tint:#3A2C17; } .thumb-notes-staff { --tint:#2B2140; }
}
.card.guide .body { display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; flex:1; }
.card.guide .chip { align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); background:var(--tint, var(--bg)); border:1px solid var(--line); border-radius:999px; padding:3px 10px; }
.cards.big .card b { font-size:19px; line-height:1.35; }
.cards.big .card em { font-style:normal; color:var(--accent-ink); font-weight:700; font-size:15px; margin-top:auto; padding-top:4px; }
footer { text-align:center; color:var(--soft); font-size:14px; padding:44px 0 40px; }
footer a { color:var(--soft); }
footer .langs { line-height:2; }
@media (max-width:720px) {
  .app-grid { grid-template-columns:1fr; }
  .cards, .cards.big { grid-template-columns:1fr; }
  nav.top .links { gap:12px; font-size:14px; }
}
.thumb-editor { --tint:#FDEBEC; } .thumb-editor img { object-position:50% 30%; }
.thumb-share { --tint:#E7F4FB; } .thumb-share img { object-position:50% 40%; }
@media (prefers-color-scheme: dark) { .thumb-editor { --tint:#3A1F24; } .thumb-share { --tint:#14303D; } }