/* apprendre-musique.fr : direction « studio de répétition / ampli vintage ».
   Polices auto-hébergées sous SIL Open Font License : Barlow Condensed (titres), Barlow (texte), Noto Music (clés). */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/barlow-condensed-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Noto Music";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/noto-music-clefs.woff2) format("woff2");unicode-range:U+1D11E,U+1D122}

/* ---------------------------------------------------------------- jetons
   Sombre chaud par défaut (charbon, lampe ambre, crème). Le mode « Lecture » passe le texte sur papier crème,
   mais le matériel (en-tête, faces d'outils, pied) reste sombre : l'identité ne bouge pas. */
:root,.site-head,.site-foot,.deck,.panel,.finder,.rack,.f-info,.tap-stats{
  --bg:#14120e;--bg2:#1c1913;--panel:#221e17;--panel2:#2b261d;
  --ink:#f2e9d6;--ink2:#d6cab2;--muted:#a99c84;--line:#3a3328;--line2:#544a3b;
  --accent:#f5a524;--link:#f7b84f;--accent-soft:#3a2a10;
  --btn1:#363026;--btn2:#221e17;--btn-line:#5a4f40;--btn-ink:#f2e9d6;--btn-drop:#000;
  --ok:#8bd46a;--ok-soft:#1d2b17;--red:#ff6a3d;
  --key-w:#f4ecda;--key-b:#100e0b;--fret:#b9ac93;
  color-scheme:dark;
}
:root{
  --amp:#f5a524;--amp2:#ffbd4a;--amp-ink:#1a1206;--amp-glow:rgba(245,165,36,.45);
  --cream:#f3ead6;--cream2:#e7dabd;--cream-ink:#1f1a12;--cream-muted:#5e5444;--root-cream:#c2410c;
  --display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif-condensed,Impact,sans-serif;
  --font:"Barlow",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:6px;
}
:root[data-theme=light]{
  --bg:#f5eedf;--bg2:#ece2cc;--panel:#fbf7ee;--panel2:#efe6d2;
  --ink:#1f1a12;--ink2:#3d3426;--muted:#665a47;--line:#dacdb2;--line2:#c4b593;
  --accent:#a34a06;--link:#9a4300;--accent-soft:#f8e2bf;
  --btn1:#fffaf0;--btn2:#ece2cc;--btn-line:#bfae8c;--btn-ink:#1f1a12;--btn-drop:#bfae8c;
  --ok:#2f7d1e;--ok-soft:#e1efd6;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
[id]{scroll-margin-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{max-width:100%}
h1,h2,h3{line-height:1.05;margin:0 0 .5em;text-wrap:balance}
h1{font:800 clamp(34px,5.6vw,62px)/.95 var(--display);text-transform:uppercase;letter-spacing:.005em}
h2{font:800 clamp(26px,3.4vw,36px)/1.05 var(--display);margin-top:1.6em;letter-spacing:.005em}
h3{font-size:19px;font-weight:700;line-height:1.25;margin-top:1.4em}
p{margin:0 0 1em}
b,strong{font-weight:700}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.narrow{max-width:780px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--amp);color:var(--amp-ink);padding:8px 12px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)}.small{font-size:14.5px}
:focus-visible{outline:3px solid var(--amp);outline-offset:2px;border-radius:4px}
::selection{background:var(--amp);color:var(--amp-ink)}

/* ---------------------------------------------------------------- en-tête : rack noir, 3 outils toujours à portée */
.site-head{position:sticky;top:0;z-index:20;background:#0d0b08;color:var(--ink);border-bottom:1px solid #000;box-shadow:inset 0 -1px 0 #2e281f}
.head-row{display:flex;align-items:center;gap:12px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 21px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;color:var(--ink)}
.brand b{color:var(--amp)}
.logo{flex:none;display:block}
.hot{display:flex;gap:6px;margin-left:10px}
.hot a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:600 17px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:10px 13px;border-radius:5px;color:var(--ink);
  background:linear-gradient(#2e281f,#1b1813);border:1px solid #4a4134;box-shadow:0 2px 0 #000,inset 0 1px 0 rgba(255,255,255,.07)}
.hot a i{width:8px;height:8px;border-radius:50%;background:#4a3511;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.hot a:hover{border-color:var(--amp)}
.hot a:hover i,.hot a[aria-current] i{background:var(--amp);box-shadow:0 0 8px 1px var(--amp-glow)}
.hot a[aria-current]{border-color:#7a5a1e}
.main-nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.main-nav a{white-space:nowrap;text-decoration:none;font-size:15px;font-weight:700;color:var(--ink2);padding:8px 9px;border-radius:4px}
.main-nav a:hover{color:var(--amp)}
.main-nav a[aria-current]{color:var(--amp);box-shadow:inset 0 -2px 0 var(--amp)}
.lamp,.burger{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 11px;border-radius:5px;border:1px solid #4a4134;background:#1b1813;color:var(--ink2);font:600 15px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.lamp:hover,.burger:hover{color:var(--ink);border-color:var(--ink2)}
.lamp[aria-pressed=true]{color:var(--amp);border-color:#7a5a1e}
.lamp[aria-pressed=true] svg{filter:drop-shadow(0 0 4px var(--amp-glow))}
.burger{display:none}
.burger span{width:16px;height:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor;margin-right:4px}
@media (max-width:1380px){
  .burger{display:inline-flex}
  .lamp{margin-left:auto}
  .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#0d0b08;flex-direction:column;align-items:stretch;padding:6px 16px 16px;border-bottom:2px solid var(--amp);box-shadow:0 20px 40px rgba(0,0,0,.5)}
  .nav-open .main-nav{display:flex}
  .main-nav a{padding:13px 4px;font-size:17px;border-bottom:1px solid #2a241c;border-radius:0}
  .main-nav a[aria-current]{box-shadow:none}
}
@media (max-width:720px){
  .site-head{position:relative}
  .head-row{flex-wrap:wrap;gap:8px;padding-top:8px;padding-bottom:10px}
  .brand{font-size:19px}
  .lamp span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hot{order:3;width:100%;margin:0;display:grid;grid-template-columns:repeat(3,1fr)}
  .hot a{justify-content:center;padding:12px 6px;font-size:16.5px;letter-spacing:.04em}
}

/* ---------------------------------------------------------------- commandes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--btn-line);background:linear-gradient(var(--btn1),var(--btn2));color:var(--btn-ink);
  font:600 17px/1.1 var(--display);text-transform:uppercase;letter-spacing:.05em;padding:11px 16px;border-radius:5px;cursor:pointer;text-decoration:none;
  box-shadow:0 2px 0 var(--btn-drop),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .06s,box-shadow .06s,border-color .15s;touch-action:manipulation;min-height:44px}
.btn:hover{border-color:var(--amp)}
.btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--btn-drop)}
.btn-primary{background:linear-gradient(var(--amp2),var(--amp));border-color:#a86700;color:var(--amp-ink);box-shadow:0 2px 0 #6b4100,inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{border-color:#6b4100;background:linear-gradient(#ffc964,var(--amp2))}
.btn-lg{padding:15px 24px;font-size:20px}
.btn.is-on{background:linear-gradient(#3a2a10,#2a1e0b);color:var(--amp);border-color:var(--amp)}
.btn-play::before{content:"";width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.btn.is-playing{border-color:var(--amp);box-shadow:0 0 0 2px var(--amp-glow)}
.btn.is-off{opacity:.45;pointer-events:none}
select,input[type=number]{font:inherit;font-size:16px;padding:10px 12px;border-radius:5px;border:1px solid var(--line2);background:var(--bg);color:var(--ink);box-shadow:inset 0 2px 4px rgba(0,0,0,.25);min-height:44px}
label.check{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;font-weight:700;cursor:pointer}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--amp)}
input[type=range]{accent-color:var(--amp)}

/* ---------------------------------------------------------------- titres de page, fil d'ariane */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;padding:0;margin:20px 0 0;font:600 15px/1.3 var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line2)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--ink2)}
.page-head{padding:18px 0 8px}
.page-head h1{max-width:20ch}
.article-wrap .page-head h1{max-width:none;font-size:clamp(32px,4.8vw,54px)}
.page-head .lead{font-size:19px;color:var(--ink2);max-width:720px}
.page-head .kicker{background:var(--ink);color:var(--bg)}
:root:not([data-theme=light]) .page-head .kicker{background:var(--cream);color:var(--cream-ink)}
.kicker{display:inline-block;font:800 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-ink);background:var(--cream);padding:6px 9px 5px;border-radius:2px;margin-bottom:14px;box-shadow:0 1px 0 rgba(0,0,0,.4)}

/* ---------------------------------------------------------------- accueil : l'accordeur d'abord */
.deck{background:#100e0b;color:var(--ink);border-bottom:1px solid #000;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,transparent 2px 5px),radial-gradient(ellipse at 75% 0%,rgba(245,165,36,.10),transparent 60%)}
.deck-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:auto 1fr;grid-template-areas:"head tool" "rest tool";column-gap:48px;padding-top:44px;padding-bottom:52px;align-items:start}
.deck-head{grid-area:head}
.deck-head h1{font-size:clamp(34px,4.2vw,54px)}
.deck-tool{grid-area:tool}
.deck-rest{grid-area:rest}
.deck .lead{font-size:19px;color:var(--ink2);max-width:540px}
.deck-label{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 14px;margin:0 4px 10px;font:600 15px/1.2 var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.deck-label b{font-weight:800;color:var(--amp);font-size:17px}
.deck .panel{margin:0}
.quick{display:grid;gap:8px;margin-top:22px;max-width:540px}
.hw{display:flex;align-items:center;gap:16px;text-decoration:none;padding:10px 14px 10px 10px;border-radius:6px;background:linear-gradient(#26211a,#1b1813);border:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px #3a3328}
.hw:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px var(--amp)}
.hw b{display:block;font:800 22px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.hw small{display:block;color:var(--muted);font-size:15px;margin-top:4px}
.led{flex:none;display:grid;place-items:center;width:74px;height:52px;border-radius:4px;background:#0a0806;border:1px solid #000;box-shadow:inset 0 2px 8px #000,0 0 0 1px #3a3328;
  font:800 30px/1 var(--display);color:var(--amp);text-shadow:0 0 12px var(--amp-glow);font-variant-numeric:tabular-nums}
.jacks{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin:14px 4px 0;font-size:15px}
.jacks span{color:var(--muted)}
.jacks a{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none;color:var(--ink2);min-height:44px}
.jacks a::before{content:"";width:12px;height:12px;border-radius:50%;border:3px solid #6f6455;background:#000}
.jacks a:hover{color:var(--amp)}
@media (max-width:900px){
  .deck-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"head" "tool" "rest";padding-top:22px;padding-bottom:32px}
  .deck-head h1{font-size:clamp(30px,8.4vw,46px);margin-bottom:18px}
  .deck-head .kicker{margin-bottom:10px}
  .deck-rest{margin-top:22px}
  .deck-head .kicker{font-size:13px;letter-spacing:.08em}
}
.section{padding:14px 0 22px}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px}
.sec-head h2{margin-bottom:.4em}
.more{font:600 17px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--accent);text-decoration:none}
a.more:hover{text-decoration:underline}
.split{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* grilles d'accords sur papier crème */
.sheets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:8px 0 14px}
.sheet,.voicing{--ink:var(--cream-ink);--ink2:#3a3226;--muted:var(--cream-muted);--fret:#b9ac93;--bg:#f7f0e1;--bg2:var(--cream2);--accent:var(--root-cream);--link:#8a3b00;
  --btn1:#fffaf0;--btn2:#e9ddc3;--btn-line:#b5a481;--btn-ink:#1f1a12;--btn-drop:#b5a481;--line:#d4c6a8;--line2:#bba985;
  background:var(--cream);color:var(--cream-ink);border-radius:3px;box-shadow:0 1px 0 #000,0 12px 28px rgba(0,0,0,.35);color-scheme:light}
:root[data-theme=light] :is(.sheet,.voicing){box-shadow:0 0 0 1px #d4c6a8,0 6px 18px rgba(60,40,10,.12)}
.sheet{display:flex;flex-direction:column;align-items:center;padding:14px 12px 10px;text-decoration:none;position:relative;transition:transform .15s}
.sheet:hover{transform:translateY(-3px)}
.sheet-sym{align-self:flex-start;font:800 38px/1 var(--display)}
.sheet-name{align-self:flex-start;font-size:14px;color:var(--cream-muted);font-weight:700;margin-bottom:2px}
.sheet .chd{max-width:200px}
@media (max-width:820px){
  .sheets{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(150px,44%);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;-webkit-overflow-scrolling:touch}
  .sheet{scroll-snap-align:start}
}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{display:inline-flex;align-items:baseline;gap:7px;padding:9px 13px;border-radius:5px;border:1px solid var(--btn-line);background:linear-gradient(var(--btn1),var(--btn2));box-shadow:0 2px 0 var(--btn-drop);text-decoration:none;font:800 21px/1 var(--display);min-height:44px}
.chip:hover{border-color:var(--amp)}
.chip small{color:var(--muted);font:700 13.5px var(--font)}

/* rack d'outils */
.rack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}
.unit{display:flex;align-items:center;gap:16px;padding:14px 18px 14px 30px;text-decoration:none;border-radius:5px;color:var(--ink);position:relative;
  background-color:#1e1a14;background-image:radial-gradient(circle at 12px 50%,#6b6152 0 3px,#2a251d 3.5px 4.5px,transparent 5px),linear-gradient(#26211a,#1b1813);
  border:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px #3a3328}
.unit:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px var(--amp)}
.unit-ico{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--amp);
  background:radial-gradient(circle at 38% 30%,#4d4538,#1a1611 72%);box-shadow:0 2px 0 #000,0 0 0 2px #0b0907,0 0 0 3px #3a3328}
.unit-ico svg{width:24px;height:24px}
.unit-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.unit-title{font:800 22px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.unit-text{color:var(--muted);font-size:15px;line-height:1.4}
.unit-tag{margin-left:auto;align-self:flex-start;flex:none;display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--display);text-transform:uppercase;letter-spacing:.12em;color:var(--amp)}
.unit-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amp);box-shadow:0 0 6px var(--amp-glow)}
@media (max-width:720px){.rack{grid-template-columns:1fr}.unit{padding:12px 14px 12px 28px}.unit-title{font-size:20px}}

/* listes numérotées (solfège, guides) : une setlist, pas des cartes */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;counter-reset:set;margin:6px 0 18px}
.cards-list{grid-template-columns:1fr}
@media (max-width:760px){.cards{grid-template-columns:1fr}}
.card{display:grid;grid-template-columns:44px 1fr;column-gap:8px;padding:14px 0;border-top:1px solid var(--line);text-decoration:none}
.card::before{counter-increment:set;content:counter(set,decimal-leading-zero);grid-row:1/span 3;font:800 26px/1 var(--display);color:var(--accent);padding-top:2px}
.card>*{grid-column:2}
.card-title{font:800 22px/1.1 var(--display);letter-spacing:.01em}
.card-text{font-size:15.5px;color:var(--muted);line-height:1.45;margin-top:3px}
.card-tag{font:600 13px/1 var(--display);color:var(--accent);text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px}
.card:hover .card-title{color:var(--accent)}

/* ---------------------------------------------------------------- face avant d'un outil (vis, tôle, lampe) */
.panel,.finder{position:relative;color:var(--ink);border-radius:8px;border:1px solid #000;
  background-color:#1d1913;
  background-image:radial-gradient(circle at 14px 14px,#6b6152 0 3px,#2a251d 3.5px 4.5px,transparent 5px),radial-gradient(circle at calc(100% - 14px) 14px,#6b6152 0 3px,#2a251d 3.5px 4.5px,transparent 5px),
    radial-gradient(circle at 14px calc(100% - 14px),#6b6152 0 3px,#2a251d 3.5px 4.5px,transparent 5px),radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),#6b6152 0 3px,#2a251d 3.5px 4.5px,transparent 5px),
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 2px,transparent 2px 5px),linear-gradient(#2a251d,#191612);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px #3a3328,0 18px 40px rgba(0,0,0,.35)}
.panel{padding:30px 26px;margin:16px 0 30px}
.panel-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.panel-row label,.field label{font:600 14px/1.1 var(--display);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px;text-align:left}
.panel .muted.small{color:var(--muted)}

/* accordeur : vumètre crème rétroéclairé */
.tuner{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;justify-items:center;text-align:center}
.gauge{position:relative;width:min(440px,100%);aspect-ratio:2/1.08;overflow:hidden;border-radius:10px 10px 6px 6px;border:7px solid #0b0907;
  background:radial-gradient(ellipse at 50% 115%,#fff6dc 0%,#f3ead6 45%,#dccca8 100%);box-shadow:0 0 0 1px #4a4134,inset 0 10px 22px rgba(60,40,10,.35),0 0 46px rgba(245,165,36,.16)}
.gauge::before{content:"cents";position:absolute;left:14px;top:12px;font:600 13px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#7a6d57}
.gauge::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 40%);pointer-events:none}
.gauge svg{width:100%;height:100%;display:block}
.g-arc{fill:none;stroke:#cdbd99;stroke-width:12;stroke-linecap:round}
.g-ok{fill:none;stroke:#3f8f2a;stroke-width:12;stroke-linecap:round;opacity:.55}
.g-tick{stroke:#5e5444;stroke-width:2}
.g-tick.big{stroke:#1f1a12;stroke-width:3.5}
.g-lab{fill:#4a4134;font:600 16px var(--display);text-anchor:middle}
.needle{position:absolute;left:50%;bottom:4%;width:3px;height:80%;margin-left:-1.5px;background:#1f1a12;border-radius:3px;transform-origin:50% 100%;transform:rotate(0deg);transition:transform .12s ease-out,background .2s;opacity:.3}
.needle::after{content:"";position:absolute;left:50%;bottom:-10px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:#1f1a12;box-shadow:0 0 0 3px #3a3226}
.is-hearing .needle{opacity:1}
.is-near .needle{background:#b34a00}
.is-ok .needle{background:#2f7d1e}
.t-note{font:800 clamp(72px,14vw,112px)/.9 var(--display);color:var(--amp);text-shadow:0 0 22px var(--amp-glow);margin-top:2px;transition:color .2s,text-shadow .2s;min-height:.9em}
.is-ok .t-note{color:var(--ok);text-shadow:0 0 22px rgba(139,212,106,.45)}
.t-sub{font-size:15.5px;color:var(--muted);font-variant-numeric:tabular-nums;min-height:1.4em}
.t-cents{font:800 22px/1 var(--display);letter-spacing:.04em;min-height:1.1em;font-variant-numeric:tabular-nums}
.is-ok .t-cents{color:var(--ok)}
.t-msg{color:var(--amp);font-weight:700;min-height:1em;max-width:520px;margin:0}
.t-controls{display:flex;flex-direction:column;gap:14px;align-items:center;width:100%}
.t-knobs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.t-knobs select{max-width:100%}
.t-knobs .field{min-width:0;max-width:100%}
.t-hint{font-size:14.5px;color:var(--muted);margin:0;max-width:560px}
.t-msg:empty{display:none}
@media (max-width:600px){
  .tuner{gap:12px}
  .t-note{font-size:64px}
  .t-knobs:has(> .field + .field){display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .t-knobs select{width:100%}
  .deck-label span{display:none}
}
.is-on [data-start]{background:linear-gradient(#3a2a10,#2a1e0b);border-color:var(--amp);color:var(--amp);box-shadow:0 0 0 2px var(--amp-glow)}
.strings{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:6px;width:100%;max-width:560px}
.string-btn{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:14px 4px 9px;border-radius:5px;border:1px solid #4a4134;background:linear-gradient(#332d23,#1d1914);color:var(--ink);font:inherit;cursor:pointer;
  box-shadow:0 3px 0 #000,inset 0 1px 0 rgba(255,255,255,.07);transition:border-color .15s;touch-action:manipulation}
.string-btn::before{content:"";position:absolute;top:5px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#3b2a10}
.string-btn b{font:800 26px/1 var(--display)}
.string-btn span{font-size:12.5px;color:var(--muted);font-weight:700}
.string-btn small{font-size:11.5px;line-height:1.2;color:var(--muted)}
.string-btn:hover{border-color:var(--ink2)}
.string-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
.string-btn.is-active{border-color:var(--amp)}
.string-btn.is-active::before,.string-btn.is-target::before{background:var(--amp);box-shadow:0 0 6px var(--amp-glow)}
.string-btn.is-target{border-color:var(--amp)}
.string-btn.is-done{border-color:#4f8a35}
.string-btn.is-done::before{background:var(--ok);box-shadow:0 0 6px rgba(139,212,106,.6)}
.string-btn.is-done b::after{content:" ✓";color:var(--ok);font-size:17px}

/* métronome : afficheur LED et potards */
.metro{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;justify-items:center;text-align:center}
.m-bpm{display:flex;align-items:center;gap:16px}
.m-bpm>div{display:flex;flex-direction:column;align-items:center;gap:6px}
.m-num{position:relative;font:800 clamp(80px,16vw,128px)/.95 var(--display);font-variant-numeric:tabular-nums;color:var(--amp);text-shadow:0 0 22px var(--amp-glow);
  min-width:calc(1.8em + 36px);overflow:hidden;text-align:right;padding:8px 18px 4px;border-radius:6px;background:#090705;border:1px solid #000;box-shadow:inset 0 3px 14px #000,0 0 0 1px #3a3328}
.m-num::before{content:"888";position:absolute;left:18px;right:18px;top:8px;text-align:right;color:rgba(245,165,36,.07);text-shadow:none;pointer-events:none}
.m-unit{font:600 15px/1 var(--display);color:var(--muted);letter-spacing:.3em}
.m-step{width:60px;height:60px;border-radius:50%;font:800 28px/1 var(--display);padding:0;color:var(--ink);border:2px solid #0b0907;
  background:radial-gradient(circle at 38% 30%,#5b5244,#1d1914 72%);box-shadow:0 3px 0 #000,0 0 0 3px #3a3328}
.m-step:hover{box-shadow:0 3px 0 #000,0 0 0 3px var(--amp)}
.m-name{font:800 20px/1 var(--display);text-transform:uppercase;letter-spacing:.12em;color:var(--amp);margin-top:-4px;min-height:1em}
.m-range{width:min(520px,100%);height:32px}
.beats{display:flex;gap:14px;min-height:30px;align-items:center;flex-wrap:wrap;justify-content:center}
.beat{width:20px;height:20px;border-radius:50%;background:#3b2a10;box-shadow:inset 0 2px 3px rgba(0,0,0,.6),0 0 0 2px #0b0907;transition:background .06s,box-shadow .06s}
.beat-1{width:26px;height:26px;background:#3e1a10}
.beat.is-on{background:var(--amp);box-shadow:0 0 14px 2px var(--amp-glow),0 0 0 2px #0b0907}
.beat-1.is-on{background:var(--red);box-shadow:0 0 16px 3px rgba(255,106,61,.55),0 0 0 2px #0b0907}
.m-play{min-width:210px}
.metro .panel-row{justify-content:center}
.m-count{font-size:14.5px;color:var(--muted);min-height:1.2em}
.tempo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:12px 0}
.tempo-list a{display:flex;flex-direction:column;align-items:center;padding:10px 6px 8px;border-radius:5px;text-decoration:none;background:#0d0b08;border:1px solid #000;box-shadow:0 0 0 1px #3a3328;color:#d6cab2}
.tempo-list a b{font:800 30px/1 var(--display);color:var(--amp);text-shadow:0 0 10px var(--amp-glow)}
.tempo-list a span{font:600 12.5px var(--display);letter-spacing:.2em;color:#a99c84}
.tempo-list a:hover,.tempo-list a[aria-current]{box-shadow:0 0 0 2px var(--amp)}

/* tap tempo : gros footswitch */
.tap{display:grid;gap:18px}
.tap-pad{appearance:none;border:1px solid #6b4100;cursor:pointer;width:100%;min-height:230px;border-radius:10px;color:var(--amp-ink);font:inherit;display:grid;place-items:center;text-align:center;
  background:radial-gradient(ellipse at 50% 30%,#ffc964,var(--amp) 60%,#d98a0c);box-shadow:0 6px 0 #6b4100,inset 0 1px 0 rgba(255,255,255,.4);
  touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.tap-pad b{display:block;font:800 clamp(72px,15vw,132px)/1 var(--display);font-variant-numeric:tabular-nums}
.tap-inner>span{display:block;margin-top:6px;font:800 20px var(--display);text-transform:uppercase;letter-spacing:.08em}
.tap-inner>small{display:block;margin-top:6px;font-size:14.5px;font-weight:700}
.tap-pad.hit{animation:tapHit .12s ease-out}
@keyframes tapHit{from{transform:translateY(4px);box-shadow:0 2px 0 #6b4100}to{transform:none}}
.tap-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.tap-stats div{background:#0d0b08;border:1px solid #000;box-shadow:0 0 0 1px #3a3328;border-radius:5px;padding:10px 12px}
.tap-stats b{display:block;font:800 28px/1.1 var(--display);color:var(--amp);font-variant-numeric:tabular-nums}
.tap-stats span{font-size:13.5px;color:var(--muted)}

/* piano */
.piano-wrap{display:grid;gap:14px}
.piano-wrap>.panel-row b{font:800 20px var(--display);color:var(--amp);letter-spacing:.06em}
.keys{position:relative;height:clamp(170px,26vw,240px);user-select:none;-webkit-user-select:none;touch-action:none;border-radius:0 0 8px 8px;border-top:10px solid #6e1d12;box-shadow:inset 0 3px 0 #000}
.key{position:absolute;top:0;border:0;padding:0;font:inherit;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;-webkit-tap-highlight-color:transparent}
.key-w{height:100%;background:linear-gradient(#efe6d1,var(--key-w) 12%);border:1px solid #9c907a;border-top:0;border-radius:0 0 6px 6px;z-index:1;color:#4a4134;padding-bottom:10px;box-shadow:inset 0 -7px 0 #ddd0b4}
.key-b{height:62%;background:linear-gradient(#2a251d,var(--key-b) 30%);z-index:2;border-radius:0 0 5px 5px;color:#bdb19a;padding-bottom:8px;box-shadow:inset 0 -6px 0 #3a3328,0 3px 4px rgba(0,0,0,.5)}
.key span{font-size:13px;font-weight:700;pointer-events:none}
.key-b span{font-size:10.5px}
.key i{font-style:normal;font-size:10px;opacity:.7;margin-left:1px}
.key kbd{font:700 10.5px var(--font);opacity:.5;margin-top:3px;pointer-events:none}
.key-w.is-down{background:#ffd27a;box-shadow:inset 0 -2px 0 #b06d00}
.key-b.is-down{background:var(--amp);color:#1a1206}
.key.is-hl.key-w{background:#f7cf86}
.key.is-hl.key-b{background:#c27a0e}

/* diagrammes d'accords, nets et grands */
.voicings{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin:14px 0 10px}
.voicing{padding:18px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
a.voicing:hover{transform:translateY(-3px)}
a.voicing{transition:transform .15s}
.voicing h3{margin:0;font:800 21px/1.1 var(--display);letter-spacing:.01em}
.voicing p{font-size:14.5px;color:var(--cream-muted);margin:0;line-height:1.45;text-align:left}
.voicing .btn{font-size:15.5px;padding:8px 12px}
.voicing .panel-row{gap:8px;justify-content:center}
.chd{width:100%;max-width:210px;height:auto}
.chd .str{stroke:var(--ink2);stroke-width:1.4}
.chd .fr{stroke:var(--fret);stroke-width:1.6}
.chd .nut{stroke:var(--ink);stroke-width:6;stroke-linecap:round}
.chd .dot{fill:var(--ink)}
.chd .dot.root{fill:var(--accent)}
.chd .barre{fill:var(--ink)}
.chd .fnum{fill:var(--bg);font-size:12px;font-weight:800;text-anchor:middle;dominant-baseline:central}
.chd .ox{fill:none;stroke:var(--ink2);stroke-width:1.8}
.chd .lab{fill:var(--muted);font-size:12px;font-weight:700;text-anchor:middle}
.chd .pos{fill:var(--ink2);font-size:13px;font-weight:800}
.chd-img{width:100%;max-width:210px;height:auto;border-radius:2px}
.big-chord{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:28px;align-items:center}
@media (max-width:720px){.big-chord{grid-template-columns:1fr}}
.shape{margin:0!important;text-align:center!important;font-size:14px!important}
.shape code{font:800 17px/1 var(--display);letter-spacing:.14em;color:var(--cream-ink);background:var(--cream2);padding:4px 8px;border-radius:3px}
.notes-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.nt{display:inline-flex;flex-direction:column;align-items:center;min-width:66px;padding:8px 10px 6px;border-radius:5px;background:var(--panel2);border:1px solid var(--line);font:800 24px/1 var(--display)}
.nt small{font:700 12.5px/1.6 var(--font);color:var(--muted)}
.nt.root{background:var(--amp);border-color:#a86700;color:var(--amp-ink)}
.nt.root small{color:#4a2e00}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0}
.fact{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amp);border-radius:3px;padding:10px 12px}
.fact b{display:block;font:800 22px/1.1 var(--display)}
.fact span{font-size:13.5px;color:var(--muted)}
.mini-kb{width:100%;max-width:420px;height:auto}
.mini-kb .w{fill:var(--key-w);stroke:#9c907a}
.mini-kb .b{fill:var(--key-b)}
.mini-kb .hl.w{fill:#f7cf86}
.mini-kb .hl.b{fill:#c27a0e}
.mini-kb .kl{font-size:10px;font-weight:800;text-anchor:middle;fill:#5a2300}
.mini-kb .kl.on-b{fill:#1a1206}
.fretboard{width:100%;height:auto;min-width:620px}
.fb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:5px;background:linear-gradient(#2e2117,#24190f);border:1px solid #000;padding:6px}
.fretboard .s{stroke:#cdbf9f;stroke-width:1.2}
.fretboard .f{stroke:#8a7a60;stroke-width:2}
.fretboard .n0{stroke:#f3ead6;stroke-width:5}
.fretboard .d{fill:#f3ead6}
.fretboard .d.r{fill:var(--amp)}
.fretboard .t{fill:#1f1a12;font-size:8.6px;letter-spacing:-.3px;font-weight:800;text-anchor:middle;dominant-baseline:central}
.fretboard .fn{fill:#a99c84;font-size:10px;text-anchor:middle;font-weight:700}
.fretboard .mk{fill:#5a4a38}
.fretboard.box{min-width:0;max-width:100%;width:100%;background:#2a1e15;border-radius:3px}
.voicings.boxes{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.tab{font:13px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg2);color:var(--ink);border-radius:3px;padding:8px 10px;margin:4px 0;overflow-x:auto;width:100%}

/* ---------------------------------------------------------------- tableaux */
.table-wrap{overflow-x:auto;margin:14px 0 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:15.5px}
th,td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--panel2);font:600 15px/1.2 var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);border-bottom:2px solid var(--amp)}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--panel2) 45%,transparent)}
tr:last-child td{border-bottom:0}
td a{font-weight:700;color:var(--link)}
.chord-table td:first-child{font-weight:700;white-space:nowrap}
.chord-table td a{font:800 18px var(--display);text-decoration:none}
.chord-table td a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- lecture longue */
.prose{max-width:70ch;font-size:18.5px;line-height:1.7}
.prose a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2px}
.prose h2::before{content:"";display:block;width:34px;height:4px;background:var(--amp);border-radius:2px;margin-bottom:14px}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.1em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--accent)}
.prose blockquote{margin:1.2em 0;padding:12px 18px;border-left:4px solid var(--amp);background:var(--panel);border-radius:0 4px 4px 0}
.prose code{background:var(--panel2);padding:1px 6px;border-radius:3px;font-size:.92em}
.prose .table-wrap,.prose .voicings,.prose .fifths,.prose .notes-row{max-width:none}
.callout{position:relative;border-radius:4px;padding:14px 18px 14px 44px;margin:18px 0;background:var(--panel);border:1px solid var(--line)}
.callout::before{content:"";position:absolute;left:18px;top:22px;width:10px;height:10px;border-radius:50%;background:var(--amp);box-shadow:0 0 8px var(--amp-glow)}
.callout-astuce::before{background:var(--ok);box-shadow:0 0 8px rgba(139,212,106,.5)}
.callout p:last-child{margin:0}
details.faq{border-top:1px solid var(--line);padding:0 2px;margin:0}
details.faq:last-of-type{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;font-weight:700;padding:15px 30px 15px 0;list-style:none;position:relative}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:4px;top:10px;color:var(--accent);font:800 26px/1 var(--display)}
details.faq[open] summary::after{content:"−"}
details.faq p{color:var(--ink2)}
.toc{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--amp);border-radius:3px;padding:16px 20px;margin:18px 0 26px;max-width:70ch}
.toc-title{font:800 15px/1 var(--display);text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin:0 0 10px}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;font-size:16px;columns:2 260px;column-gap:28px}
.toc li{counter-increment:toc;display:flex;gap:10px;padding:4px 0;break-inside:avoid}
.toc li::before{content:counter(toc,decimal-leading-zero);font:800 16px/1.5 var(--display);color:var(--accent)}
.toc a{text-decoration:none}.toc a:hover{text-decoration:underline;color:var(--accent)}
.byline{font-size:14.5px;color:var(--muted)}
.byline a{color:inherit}
.read-toggle{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:7px 12px;border-radius:4px;border:1px solid var(--line2);background:transparent;color:var(--ink2);font:600 15px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;min-height:40px}
.read-toggle::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--muted)}
.read-toggle[aria-pressed=true]::before{background:var(--amp);box-shadow:0 0 6px var(--amp-glow)}
.read-toggle:hover{border-color:var(--amp);color:var(--ink)}
.article-wrap{max-width:860px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:760px){.two-col{grid-template-columns:1fr}}
.related{margin-top:30px}
.sr-h2{font-size:22px;margin:18px 0 4px}
.lead code{font-size:.9em;background:var(--panel2);padding:1px 7px;border-radius:3px;font-weight:700}

/* sélecteur d'instrument, chercheur d'accord */
.pill-nav{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.pill-nav a{padding:9px 12px;border-radius:4px;border:1px solid var(--btn-line);background:linear-gradient(var(--btn1),var(--btn2));text-decoration:none;font:600 16px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;box-shadow:0 2px 0 var(--btn-drop)}
.pill-nav a:hover{border-color:var(--amp)}
.pill-nav a[aria-current]{background:var(--amp);color:var(--amp-ink);border-color:#a86700;box-shadow:0 2px 0 #6b4100}
.finder{display:flex;flex-wrap:wrap;gap:12px;align-items:end;padding:22px 26px;margin:14px 0 24px}

/* jeu de lecture : la portée sur papier */
.game{display:grid;gap:14px;justify-items:center;text-align:center}
.staff{width:min(380px,100%);height:auto;background:var(--cream);border-radius:3px;box-shadow:0 1px 0 #000,0 10px 24px rgba(0,0,0,.3)}
.st-line{stroke:#1f1a12;stroke-width:1.5}
.st-stem{stroke:#1f1a12;stroke-width:2}
.st-note{fill:#1f1a12}
.st-clef{fill:#1f1a12;font-family:"Noto Music","Bravura","Apple Symbols","Segoe UI Symbol",serif}
.answers{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;width:min(580px,100%)}
.ans{padding:14px 0;border-radius:5px;border:1px solid #4a4134;background:linear-gradient(#332d23,#1d1914);font:800 22px/1 var(--display);cursor:pointer;color:var(--ink);box-shadow:0 3px 0 #000;touch-action:manipulation;min-height:48px}
.ans:hover{border-color:var(--amp)}
.ans:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
.ans.is-good{background:#1d2b17;border-color:var(--ok);color:var(--ok)}
.ans.is-bad{background:#3e1a10;border-color:var(--red);color:var(--red)}
@media (max-width:480px){.answers{grid-template-columns:repeat(4,1fr)}}
.g-score{display:flex;gap:18px;font-weight:700;font-variant-numeric:tabular-nums;flex-wrap:wrap;justify-content:center}
.g-score span{color:var(--muted);font-weight:600}
.g-score b{font:800 22px var(--display);color:var(--amp)}
.flash-bad .staff{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.g-msg{min-height:1.5em;font:800 22px var(--display);letter-spacing:.04em}

/* cercle des quintes */
.fifths{display:grid;grid-template-columns:minmax(260px,460px) 1fr;gap:24px;align-items:center}
@media (max-width:760px){.fifths{grid-template-columns:1fr}}
.fifths svg{width:100%;height:auto}
.fifths [data-key]{cursor:pointer}
.fifths .seg{fill:var(--panel);stroke:var(--line2);stroke-width:1.5;transition:fill .15s}
.fifths .seg.min{fill:var(--panel2)}
.fifths [data-key]:hover .seg{fill:var(--accent-soft)}
.fifths [data-key].is-sel .seg{fill:var(--amp)}
.fifths [data-key].is-sel text{fill:var(--amp-ink)}
.fifths text{font-family:var(--display);font-weight:800;text-anchor:middle;dominant-baseline:central;fill:var(--ink);pointer-events:none}
.f-info{background:var(--panel);color:var(--ink);border:1px solid #000;box-shadow:0 0 0 1px #3a3328;border-left:4px solid var(--amp);border-radius:4px;padding:18px;font-size:17px;line-height:1.7}
.f-info b{color:var(--amp)}
.f-info span{color:var(--muted);font-size:15px}

/* ---------------------------------------------------------------- pied : face arrière de l'ampli */
.cta-band{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:22px 26px;margin:34px 0}
.cta-band p{margin:0}.cta-title{font:800 24px var(--display)}
.site-foot{margin-top:60px;padding:0 0 26px;background:#0d0b08;color:var(--ink);font-size:15px;border-top:1px solid #000;box-shadow:inset 0 1px 0 #2e281f}
.foot-plate{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:28px 0 22px;border-bottom:1px dashed #3a3328}
.foot-plate p{margin:0;color:var(--muted);max-width:560px}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:22px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-col:last-child{grid-column:1/-1}}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin:0}
.foot-grid a{display:inline-block;padding:4px 0;text-decoration:none;color:var(--ink2)}
.foot-grid a:hover{color:var(--amp)}
.foot-title{font:800 15px/1 var(--display);text-transform:uppercase;letter-spacing:.16em;color:var(--amp);margin:0 0 10px}
.foot-bottom{margin:26px 0 0;color:var(--muted);font:600 14px var(--display);letter-spacing:.14em;text-transform:uppercase}

@media (max-width:640px){
  .pill-nav{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .pill-nav a{white-space:nowrap}
  .page-head{padding:10px 0 4px}.page-head .lead{font-size:17px}
  .panel{padding:22px 14px}
  .finder{padding:20px 16px}
  .prose{font-size:17.5px}
  .m-step{width:52px;height:52px}
  .m-bpm{gap:10px}
}
.ramp-row input[type=number]{width:72px;padding:7px 8px}
.ramp-row span{font-size:14.5px;font-weight:700;color:var(--muted)}
.metro .panel-row:has(> .field){align-items:flex-end}
.metro .field input[type=range]{min-height:44px}
.panel-row label.check{font:700 15.5px/1.3 var(--font);text-transform:none;letter-spacing:0;color:var(--ink2);text-align:left;min-height:44px}
@media (max-width:600px){
  .metro .panel-row:has(> .field){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:12px}
  .metro .panel-row:has(> .field) select,.metro .panel-row:has(> .field) input[type=range]{width:100%}
  .metro .panel-row:has(> .field) input[type=range]{min-height:44px}
  .metro .panel-row:not(.ramp-row):has(> label.check){flex-direction:column;align-items:flex-start;gap:4px;width:100%}
  .ramp-row{justify-content:flex-start!important;gap:8px!important;width:100%}
  .ramp-row input[type=number]{width:62px}
  .game>.panel-row:first-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
  .game>.panel-row:first-child select{width:100%}
  .game>.panel-row:first-child .field:nth-child(2){grid-column:1/-1;order:3}
  table{font-size:15px}
  th,td{padding:9px 10px}
  th{text-transform:none;letter-spacing:.02em;font-size:16px}
  .voicings:has(> a.voicing){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  a.voicing{padding:10px 6px}
  a.voicing h3{font-size:16px}
}

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