/* Concept Reference - colours and type come from assets/theme.css */
body{background:var(--bg); color:var(--ink); font-family:var(--font-ui); line-height:1.55}
header.page{padding:24px 20px 16px; border-bottom:1px solid var(--line); background:var(--surface)}
.wrap{max-width:1120px; margin:0 auto; padding:0 18px}
h1{font-family:var(--font-display); margin:0; font-size:1.65rem; font-weight:600}
.sub{color:var(--ink-2); font-size:.87rem; margin-top:4px}
.tools{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px}
.search{flex:1; min-width:220px; padding:9px 12px; border:1px solid var(--line-2); border-radius:var(--radius-sm); font-size:.88rem; font-family:inherit; background:var(--bg); color:var(--ink)}
button{font-family:inherit; font-size:.86rem; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); padding:8px 13px; border-radius:var(--radius-sm); cursor:pointer; transition:.15s}
button:hover{border-color:var(--accent); color:var(--accent)}
.nav{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
.chip{font-size:.77rem; padding:6px 11px; border-radius:18px; border:1px solid var(--line-2); background:var(--surface); cursor:pointer; white-space:nowrap; font-family:inherit; color:var(--ink); transition:.15s}
.chip:hover{border-color:var(--accent); color:var(--accent)}
.chip.active{background:var(--accent-fill); color:var(--on-accent); border-color:var(--accent-fill)}
main{padding:20px 0 70px}
.catblock{margin-bottom:30px}
.cathead{font-family:var(--font-display); font-size:1.25rem; color:var(--navy); border-bottom:2px solid var(--gold-fill); padding-bottom:5px; margin:8px 0 4px; font-weight:600}
.catblurb{color:var(--ink-2); font-size:.83rem; margin:0 0 14px}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; align-items:start}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 15px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.card h3{font-family:var(--font-ui); margin:0 0 4px; font-size:.98rem; font-weight:700}
.num{color:var(--gold); font-weight:700; font-size:.74rem; margin-right:6px; font-variant-numeric:tabular-nums}
.tag{font-size:.64rem; color:var(--surface); background:var(--warm-2); border-radius:5px; padding:1px 7px; margin-left:8px; vertical-align:middle; letter-spacing:.02em}
.def{font-size:.84rem; margin:2px 0 6px}
.listen{font-size:.78rem; color:var(--ink-2); font-style:italic; margin:0 0 10px}
.listen b{color:var(--warm); font-style:normal}
.demo{background:var(--demo-bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px; margin-top:auto}
.demo svg{display:block; width:100%; height:auto}
.row{display:flex; gap:8px; align-items:center; margin-top:8px}
button.play{font-size:.8rem; border:1px solid var(--warm); background:var(--warm); color:var(--surface); padding:7px 13px; border-radius:8px; cursor:pointer}
button.play:hover{filter:brightness(1.1); color:var(--surface); border-color:var(--warm)}
.tempo{font-size:.74rem; color:var(--ink-3)}
.notxt{font-size:.78rem; color:var(--ink-3); padding:6px 2px}
.keylabel{font:10px var(--font-ui); fill:var(--ink-3)}
.spell{font:11px var(--font-ui); fill:var(--warm)}
.hidden{display:none !important}
footer.page{border-top:1px solid var(--line); padding:16px 0; color:var(--ink-3); font-size:.75rem; text-align:center}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}