/* Clefwise — layout: tool-first home page (app card + optional 300px ad rail on very wide screens),
   single reading column for lessons. Manuscript palette: sage-tinted paper, Prussian-blue ink, one brass accent. */
:root{
  --paper:#F2F4F1; --surface:#FFFFFF; --sunk:#E8ECE8; --ink:#15232A; --muted:#546570;
  --line:#CFD7D3; --line-strong:#A9B6B3;
  --accent:#1F5A7A; --accent-hover:#174963; --accent-ink:#FFFFFF; --accent-soft:#DCE8EF;
  --brass:#A8730A; --brass-bright:#D29A22; --brass-soft:#F5E6C3;
  --good:#1B7646; --good-soft:#DAEFE2; --bad:#B8372D; --bad-soft:#F7DFDA;
  --shadow:0 1px 2px rgba(21,35,42,.06), 0 8px 24px -12px rgba(21,35,42,.18);
  --font-display:'Bodoni Moda', 'Bodoni 72', Didot, 'Libre Bodoni', Georgia, serif;
  --font-ui:'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius:14px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F171B; --surface:#152026; --sunk:#1B2930; --ink:#E3EBEE; --muted:#95A7B0;
    --line:#293A42; --line-strong:#3E535D;
    --accent:#88C1E3; --accent-hover:#A6D2EE; --accent-ink:#0B1A22; --accent-soft:#1B3645;
    --brass:#E7B34A; --brass-bright:#F0C263; --brass-soft:#3A2D12;
    --good:#5DCB8F; --good-soft:#163A27; --bad:#FF8173; --bad-soft:#44211D;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0F171B; --surface:#152026; --sunk:#1B2930; --ink:#E3EBEE; --muted:#95A7B0;
  --line:#293A42; --line-strong:#3E535D;
  --accent:#88C1E3; --accent-hover:#A6D2EE; --accent-ink:#0B1A22; --accent-soft:#1B3645;
  --brass:#E7B34A; --brass-bright:#F0C263; --brass-soft:#3A2D12;
  --good:#5DCB8F; --good-soft:#163A27; --bad:#FF8173; --bad-soft:#44211D;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 12px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-ui); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{color:var(--accent-hover)}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:12px; top:-60px; background:var(--accent); color:var(--accent-ink); padding:8px 14px; border-radius:8px; z-index:50}
.skip:focus{top:12px}

.wrap{max-width:1180px; margin:0 auto; padding-inline:20px}
@media (max-width:480px){ .wrap{padding-inline:16px} }

/* ---------- header / footer ---------- */
.site-head{border-bottom:1px solid var(--line); background:var(--paper)}
.site-head .wrap{display:flex; align-items:center; gap:18px; min-height:62px; flex-wrap:wrap; padding-block:8px}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; margin-right:auto}
.brand:hover{color:var(--ink)}
.brand svg{width:34px; height:34px; flex:none}
.brand-name{font-family:var(--font-display); font-style:italic; font-weight:600; font-size:1.45rem; letter-spacing:-.01em; line-height:1}
.nav{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.nav a{color:var(--ink); text-decoration:none; padding:8px 12px; border-radius:9px; font-size:.98rem}
.nav a:hover{background:var(--sunk)}
.nav a[aria-current="page"]{background:var(--accent-soft); color:var(--ink); font-weight:700}
.theme-btn{
  width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); display:inline-grid; place-items:center; cursor:pointer; padding:0;
}
.theme-btn svg{width:20px; height:20px}
@media (max-width:560px){
  .site-head .wrap{gap:6px 10px}
  .nav{order:3; width:100%; margin-inline:-12px}
  .brand-name{font-size:1.2rem}
}

.site-foot{border-top:1px solid var(--line); margin-top:56px; padding-block:34px 42px; color:var(--muted); font-size:.95rem}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap:24px}
.foot-grid h2{font-family:var(--font-ui); font-size:.95rem; color:var(--ink); margin:0 0 8px}
.foot-grid ul{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.foot-grid a{color:var(--muted)}
.foot-grid a:hover{color:var(--ink)}
.foot-note{margin-top:26px; font-size:.86rem}
@media (max-width:760px){ .foot-grid{grid-template-columns:repeat(2, minmax(0,1fr))} .foot-grid > :first-child{grid-column:1/-1} }

/* ---------- type ---------- */
h1,h2,h3{text-wrap:balance; line-height:1.15; margin:0}
.display{font-family:var(--font-display); font-weight:600; letter-spacing:-.015em}
.hero{padding-block:30px 20px; display:grid; gap:8px}
.hero h1{font-family:var(--font-display); font-weight:600; font-size:clamp(2.1rem, 4.2vw, 3.2rem); letter-spacing:-.02em}
.hero p{margin:0; color:var(--muted); font-size:1.08rem; max-width:62ch}
.section-title{font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing:-.01em; margin-bottom:14px}

/* ---------- controls ---------- */
button,select,input,textarea{font:inherit; color:inherit}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:8px 16px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:.98rem; line-height:1.2; text-decoration:none; white-space:nowrap;
  transition:background-color .12s, border-color .12s;
}
.btn:hover{border-color:var(--line-strong); background:var(--sunk); color:var(--ink)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700}
.btn.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn.quiet{background:transparent; border-color:transparent}
.btn.quiet:hover{background:var(--sunk)}
.btn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent)}
.btn:disabled{opacity:.45; cursor:default; background:var(--surface); border-color:var(--line)}
.btn.primary:disabled{background:var(--accent); border-color:var(--accent)}
.btn svg{width:18px; height:18px; flex:none}
.btn.big{min-height:48px; padding:10px 22px; font-size:1.05rem}

.seg{display:inline-flex; border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:3px; gap:2px}
.seg button{border:0; background:transparent; border-radius:7px; min-height:34px; padding:4px 12px; cursor:pointer; font-size:.95rem; color:var(--muted)}
.seg button:hover{color:var(--ink); background:var(--sunk)}
.seg button[aria-pressed="true"]{background:var(--accent-soft); color:var(--ink); font-weight:700}
.seg button:disabled{opacity:.5; cursor:default}

.field{display:inline-flex; align-items:center; gap:8px; font-size:.95rem; color:var(--muted)}
.field > span{white-space:nowrap}
select, .input{
  min-height:40px; padding:6px 30px 6px 10px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); max-width:100%; font-size:.95rem;
}
select{appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat}
.input{padding-right:10px}
select:disabled{opacity:.5}
.check{display:inline-flex; align-items:center; gap:8px; font-size:.95rem; cursor:pointer; user-select:none}
.check input{width:18px; height:18px; accent-color:var(--accent); margin:0}
input[type="range"]{accent-color:var(--accent)}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.8em; padding:1px 5px; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:5px; background:var(--surface)}

/* ---------- home layout ---------- */
.home-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:28px}
.rail{display:none}
@media (min-width:1320px){
  .home-grid{grid-template-columns:minmax(0,1fr) 300px}
  .rail{display:block}
  .rail .ad{position:sticky; top:20px; margin-top:0}
}

/* ---------- app ---------- */
.app{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow)}
.app-top{display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; padding:12px 14px; border-bottom:1px solid var(--line)}
.tabs{display:flex; gap:4px; flex-wrap:wrap}
.tab{border:0; background:transparent; padding:8px 14px; border-radius:10px; cursor:pointer; font-size:1rem; color:var(--muted); min-height:40px; display:inline-flex; align-items:center; gap:8px}
.tab svg{width:20px; height:24px}
.tab:hover{color:var(--ink); background:var(--sunk)}
.tab[aria-selected="true"]{background:var(--ink); color:var(--surface); font-weight:700}
.tab[aria-selected="true"]:hover{background:var(--ink); color:var(--surface)}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:.86rem; padding:4px 10px; border-radius:999px; background:var(--sunk); color:var(--muted); font-variant-numeric:tabular-nums}
.chip strong{color:var(--ink)}
.chip.streak .flame{width:8px; height:8px; border-radius:50%; background:var(--brass-bright); box-shadow:0 0 0 3px var(--brass-soft)}
.panel{padding:16px 18px 20px}
@media (max-width:560px){ .panel{padding:12px 12px 16px} .app-top{padding:10px} .tab{padding:8px 10px} }

.setup{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px}
.setup .push{margin-left:auto}
.setup.row2{margin-top:10px}
.setup .grow{flex:1 1 220px; min-width:0}
.setup .grow select,.setup input.grow{width:100%}
.setup.row1 .field.grow{display:flex}
@media (max-width:560px){
  .setup.row2{display:grid; grid-template-columns:auto minmax(0,1.7fr) minmax(0,1fr); gap:8px}
  .setup.row2 .field{display:flex; min-width:0}
  .setup.row2 .field > span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .setup.row2 .field select{width:100%}
  .setup.row2 .seg button{padding:4px 9px}
}
.custom-opts{margin-top:10px; padding:12px 14px; background:var(--sunk); border-radius:12px; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px 18px}
.custom-opts .field{justify-content:flex-start}
.custom-opts > div:last-child{grid-column:1/-1}
@media (hover:none) and (pointer:coarse){ .kbd-only{display:none} }
.rhythms{display:flex; flex-wrap:wrap; gap:4px}
.rhythms .tog{min-width:38px; height:38px; padding:0 6px}
.opt-label{font-size:.9rem; color:var(--muted); display:block; margin-bottom:4px}

.score-head{display:flex; align-items:center; justify-content:space-between; gap:8px 14px; flex-wrap:wrap; margin-top:16px}
.start-note{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.start-note .lbl{color:var(--muted)}
.start-note strong{font-family:var(--font-display); font-size:2rem; line-height:1; color:var(--accent); min-width:2.2ch}
.piece-title{font-family:var(--font-display); font-weight:600; font-size:1.5rem; margin:0}

.sheet{margin-top:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px 6px 4px; color:var(--ink); position:relative}
.sheet svg{display:block; width:100%; height:auto; overflow:visible; touch-action:manipulation}
.sheet.editing svg{cursor:crosshair}
@media (max-width:640px){
  .sheet.editing{overflow-x:auto; overscroll-behavior-x:contain}
  .sheet.editing svg{width:640px; max-width:none}
}

/* notation */
.sl,.bl,.ledger{stroke:currentColor; stroke-width:1.25}
.sl{stroke:currentColor; opacity:.55}
.bl{stroke-width:1.4}
.fb,.clefg,.acc,.restg,.beam,.flag,.dot{fill:currentColor}
.stem{stroke:currentColor; stroke-width:1.6}
.head{fill:currentColor}
.head.hollow{fill:var(--surface); stroke:currentColor; stroke-width:1.9}
.head.whole{stroke-width:2.5}
.ts{font-family:var(--font-ui); font-weight:700; font-size:37px; fill:currentColor; text-anchor:middle; letter-spacing:-1px}
.note{cursor:pointer}
.note:focus{outline:none}
.note:focus-visible,.note.lit{color:var(--accent)}
.note.sel{color:var(--accent)}
.note.good{color:var(--good)}
.note.bad{color:var(--bad)}
.note.cur{color:var(--accent)}
.selbg,.curbg{fill:var(--accent-soft)}
.hit{fill:transparent}
.sheet.editing .note > *{pointer-events:none}
.sheet.editing .note > .hit{pointer-events:all}
.name{fill:var(--muted); font-size:15px; text-anchor:middle; font-family:var(--font-ui)}
.note.first .name{fill:var(--accent); font-weight:700}
.note.good .name{fill:var(--good)}
.note.bad .name{fill:var(--bad); font-weight:700}
.name.hid{visibility:hidden}
.played{fill:var(--bad); font-size:12.5px; text-anchor:middle; font-family:var(--font-ui)}
.ghost{color:var(--accent); pointer-events:none}
.ghost .gh{opacity:.5}
.caret{stroke:var(--accent); stroke-width:1.5; stroke-dasharray:4 4}
.ghost-name{fill:var(--accent); font-weight:700; font-size:15px; text-anchor:middle; font-family:var(--font-ui)}

.transport{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:14px}
.transport .grow{flex:1 1 auto}
.tempo{display:flex; align-items:center; gap:8px; font-size:.95rem; color:var(--muted)}
.tempo input{width:130px}
.tempo output{min-width:5.2em; font-variant-numeric:tabular-nums; color:var(--ink)}
.hint{color:var(--muted); font-size:.9rem; margin:10px 0 0}

/* check-as-you-play */
.checker{margin-top:14px; border:1px solid var(--line); background:var(--sunk); border-radius:var(--radius); padding:12px}
.checker-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px}
.progress{font-weight:700; font-variant-numeric:tabular-nums}
.inputs{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:.92rem; color:var(--muted)}
.inputs .pill{padding:3px 9px; border-radius:999px; background:var(--surface); border:1px solid var(--line)}
.inputs .pill.on{border-color:var(--good); color:var(--good)}
.level{display:inline-block; width:60px; height:6px; border-radius:3px; background:var(--line); overflow:hidden; vertical-align:middle}
.level i{display:block; height:100%; width:0; background:var(--good); transition:width .08s}
.result{margin-top:10px; padding:12px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.result .score{font-family:var(--font-display); font-size:1.7rem; font-weight:700}
.result.great .score{color:var(--good)}

.piano{position:relative; height:132px; margin-top:12px; user-select:none; -webkit-user-select:none; touch-action:manipulation}
.key{position:absolute; top:0; padding:0; border:1px solid var(--line-strong); cursor:pointer; -webkit-tap-highlight-color:transparent}
.key.white{height:100%; background:#FBFCFB; border-radius:0 0 7px 7px; z-index:1}
.key.black{height:60%; background:#1B272D; border-color:#0D1417; border-radius:0 0 5px 5px; z-index:2}
.key.white.down,.key.white:active{background:#DCE8EF}
.key.black.down,.key.black:active{background:#3A5566}
.key.good{background:var(--good)!important}
.key.bad{background:var(--bad)!important}
.key.hint{box-shadow:inset 0 -5px 0 var(--brass-bright)}
.kl{position:absolute; bottom:6px; left:0; right:0; text-align:center; font-size:11px; color:#546570; pointer-events:none}
.oct-row{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:.9rem; color:var(--muted); flex-wrap:wrap}
@media (max-width:560px){ .piano{height:112px} }

/* editor toolbar */
.editor{position:sticky; top:env(safe-area-inset-top,0px); z-index:6; margin-top:12px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:8px 10px; box-shadow:var(--shadow)}
.toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.tgroup{display:flex; gap:3px; align-items:center; padding-right:6px; border-right:1px solid var(--line)}
.tgroup.end{margin-left:auto; border-right:0; padding-right:0}
.tb{min-height:38px; min-width:38px; height:38px; padding:0 5px; border-radius:9px; border:1px solid var(--line); background:var(--surface); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; line-height:1; color:var(--ink)}
.tb:hover{background:var(--sunk)}
.tb[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent)}
.tb:disabled{opacity:.4; cursor:default; background:var(--surface)}
.tb.wide{font-size:.95rem; padding:0 12px}
.tb.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700}
.ico{width:22px; height:26px; display:block}
.status{color:var(--muted); font-size:.88rem; margin:6px 2px 0; min-height:1.3em; line-height:1.35}
.meta{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 14px}
.meta details[open]{flex-basis:100%; order:2}
.meta summary{cursor:pointer; font-size:.88rem; color:var(--muted); padding:2px}
.meta details[open] summary{color:var(--ink); font-weight:700}
.meta textarea{width:100%; min-height:72px; resize:vertical; font-size:1rem; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); margin-top:6px}
.meta p{font-size:.9rem; color:var(--muted); margin:6px 0 8px; max-width:72ch}
.meta code{font-weight:700; color:var(--ink); font-family:inherit}
.linkish{min-height:0; padding:2px; border:0; background:none; color:var(--muted); font-size:.88rem; text-decoration:underline; text-underline-offset:2px; cursor:pointer}
.error{color:var(--bad); font-size:.92rem; margin:8px 0 0}
.error:empty{display:none}
@media (max-width:640px){ .tgroup{border-right:0; padding-right:0} }

.library{margin-top:12px; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.library ul{list-style:none; margin:0; padding:0}
.library li{display:flex; align-items:center; gap:10px; padding:8px 12px; border-top:1px solid var(--line)}
.library li:first-child{border-top:0}
.library .t{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.library .m{color:var(--muted); font-size:.85rem; white-space:nowrap}
.library .empty{padding:12px; color:var(--muted)}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--surface); padding:10px 16px; border-radius:10px; font-size:.95rem; z-index:60; box-shadow:var(--shadow); max-width:calc(100% - 32px)}

/* drill */
.drill{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:18px; margin-top:14px; align-items:stretch}
@media (max-width:760px){ .drill{grid-template-columns:minmax(0,1fr)} }
.drill .sheet{margin-top:0; display:grid; place-items:center; padding:8px}
.drill .sheet svg{max-width:340px}
.drill-side{display:flex; flex-direction:column; gap:12px; justify-content:center}
.feedback{min-height:1.6em; font-size:1.05rem; font-weight:700}
.feedback.good{color:var(--good)}
.feedback.bad{color:var(--bad)}
.pad{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px}
.pad button{min-height:56px; border-radius:12px; border:1px solid var(--line); background:var(--surface); cursor:pointer; font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--ink)}
.pad button:hover{background:var(--sunk)}
.pad button.good{background:var(--good-soft); border-color:var(--good); color:var(--good)}
.pad button.bad{background:var(--bad-soft); border-color:var(--bad); color:var(--bad)}
@media (max-width:420px){ .pad button{min-height:50px; font-size:1.35rem} }
.drill .piano{margin-top:0}
.stats-row{display:flex; flex-wrap:wrap; gap:8px}
.stat{padding:6px 12px; border-radius:10px; background:var(--sunk); font-size:.9rem; color:var(--muted); font-variant-numeric:tabular-nums}
.stat strong{display:block; color:var(--ink); font-size:1.2rem; line-height:1.2}
.stat.best strong{color:var(--brass)}
.sprint-bar{height:6px; border-radius:3px; background:var(--line); overflow:hidden}
.sprint-bar i{display:block; height:100%; background:var(--brass-bright); width:100%}
.weak{font-size:.92rem; color:var(--muted)}
.weak b{color:var(--ink)}

/* ---------- home sections ---------- */
.features{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px; margin-top:44px}
.features h3{font-size:1.12rem; margin:10px 0 6px}
.features p{margin:0; color:var(--muted)}
.features .fi{width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center}
.features .fi svg{width:26px; height:30px}
@media (max-width:820px){ .features{grid-template-columns:minmax(0,1fr)} }
.block{margin-top:56px}
.lessons{display:grid; grid-template-columns:repeat(auto-fit, minmax(176px, 1fr)); gap:14px}
.article + .lessons, .lessons.one-col{grid-template-columns:minmax(0,1fr)}
.lesson-card{display:flex; flex-direction:column; gap:6px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); text-decoration:none; transition:border-color .12s, transform .12s}
.lesson-card:hover{border-color:var(--accent); color:var(--ink)}
.lesson-card .k{font-size:.85rem; color:var(--muted)}
.lesson-card h3{font-size:1.1rem}
.lesson-card p{margin:0; color:var(--muted); font-size:.95rem}
.faq details{border-top:1px solid var(--line); padding:12px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; font-weight:700; font-size:1.05rem}
.faq p{margin:8px 0 0; color:var(--muted); max-width:70ch}

/* ---------- ads ---------- */
.ad{margin-block:28px; display:flex; flex-direction:column; align-items:center; gap:4px; min-height:120px}
.ad-label{font-size:.72rem; color:var(--muted); letter-spacing:.04em}
.ad-box{width:100%; min-height:100px; display:block}
.ad-box ins{display:block; width:100%}
.ad-ph{width:100%; min-height:100px; border:1.5px dashed var(--line-strong); border-radius:12px; display:grid; place-items:center; color:var(--muted); font-size:.9rem; background:repeating-linear-gradient(135deg, transparent 0 10px, var(--sunk) 10px 11px)}
.rail .ad-ph{min-height:600px}
.ad:has(ins[data-ad-status="unfilled"]){display:none}
body.editing-mode .ad-hide-editing{display:none}

/* ---------- lesson pages ---------- */
.article{max-width:720px; margin:0 auto}
.article .crumbs{font-size:.92rem; color:var(--muted); padding-top:26px}
.article .crumbs a{color:var(--muted)}
.article h1{font-family:var(--font-display); font-weight:600; font-size:clamp(2rem, 4vw, 2.8rem); letter-spacing:-.02em; margin:12px 0 10px}
.article .lede{font-size:1.15rem; color:var(--muted); margin:0 0 8px}
.article h2{font-family:var(--font-display); font-weight:600; font-size:1.65rem; margin:40px 0 10px}
.article h3{font-size:1.15rem; margin:26px 0 6px}
.article p,.article li{max-width:68ch}
.article ul,.article ol{padding-left:1.3em}
.article li{margin:4px 0}
.article .note-box{background:var(--accent-soft); border-radius:12px; padding:12px 16px; margin:18px 0}
.article .note-box p{margin:0}
.article table{border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto; margin:14px 0}
.article th,.article td{border-bottom:1px solid var(--line); padding:8px 10px; text-align:left}
.article th{font-size:.92rem; color:var(--muted); font-weight:700}
.ex{margin:20px 0; padding:12px 12px 10px; background:var(--surface); border:1px solid var(--line); border-radius:14px}
.ex-staff{display:block; width:100%; height:auto; color:var(--ink); overflow:visible}
.ex figcaption{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.92rem; color:var(--muted); margin-top:4px}
.ex .ex-play{min-height:36px; padding:4px 12px; font-size:.92rem}
.next-lesson{margin-top:40px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.cta{margin-top:30px; padding:18px 20px; border-radius:14px; background:var(--ink); color:var(--surface); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.cta p{margin:0; max-width:52ch}
.cta .btn{background:var(--brass-bright); border-color:var(--brass-bright); color:#1B1405; font-weight:700}
.page{max-width:720px; margin:0 auto; padding-top:26px}
.page h1{font-family:var(--font-display); font-weight:600; font-size:clamp(2rem, 4vw, 2.6rem); margin:0 0 12px}
.page h2{font-size:1.25rem; margin:30px 0 8px}
.page p,.page li{max-width:68ch}
.copy-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.copy-row code{padding:6px 10px; background:var(--sunk); border-radius:8px; font-size:.95rem}

@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important; scroll-behavior:auto!important} }

/* ---------- print (My music sheet) ---------- */
@media print{
  body{background:#fff; color:#000}
  .site-head,.site-foot,.hero,.ad,.rail,.app-top,.setup,.transport,.checker,.editor,.score-head .btn,.features,.block,.hint,.no-print,.skip{display:none!important}
  .app{border:0; box-shadow:none}
  .sheet{border:0}
  .name.hid{visibility:hidden}
  .print-title{display:block!important}
}
.print-title{display:none; font-family:var(--font-display); font-size:1.6rem; text-align:center; margin:0 0 10px}