/* Look: video-first and quiet. Neutral near-black chrome so whichever of the music videos is playing sets the mood,
   one readable sans, and highlighter yellow (--mark) as the single constant: it marks the line being explained (the
   lyric, the current note, the progress seam, the current tab). Light and dark themes. */
:root{
  --bg:#f4f4f2; --surface:#ffffff; --surface2:#fafaf9; --line:#e0e0dc; --fg:#141416; --muted:#5c5c63;
  --accent:#c2185b; --accent-ink:#ffffff; --mark:#ffe14d; --mark-ink:#141416; --chip:#ececea;
  --screen:#0b0b0d; --screen-fg:#f3f3f5; --screen-muted:#9d9da6; --shadow:0 1px 2px rgba(20,20,22,.06),0 8px 24px rgba(20,20,22,.06);
  --display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b0b0d; --surface:#141417; --surface2:#1a1a1e; --line:#2a2a30; --fg:#ececf1; --muted:#9d9da6;
  --accent:#ff7aa8; --accent-ink:#1a0710; --chip:#222227; --shadow:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b0b0d; --surface:#141417; --surface2:#1a1a1e; --line:#2a2a30; --fg:#ececf1; --muted:#9d9da6;
  --accent:#ff7aa8; --accent-ink:#1a0710; --chip:#222227; --shadow:none; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.6}
a{color:var(--accent);text-underline-offset:.18em}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding-inline:20px}
@media (max-width:480px){.wrap{padding-inline:16px}}
.mono{font-family:var(--mono)}

/* Hero: always dark, in both themes, flat */
.hero{background:var(--screen);color:var(--screen-fg);position:relative;overflow:hidden;border-bottom:3px solid var(--mark)}
.htop{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 40px;align-items:end}
.hside{padding-bottom:6px}
.hero .wrap{position:relative;z-index:1;padding-block:40px 20px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.eyebrow{font:600 13px var(--mono);color:var(--mark);letter-spacing:.12em;display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
.eyebrow small{font-family:var(--mono);color:var(--screen-muted);letter-spacing:.04em;font-size:12px}
h1{font-family:var(--display);font-weight:700;margin:4px 0 0;line-height:1;letter-spacing:-.02em;font-size:clamp(36px,5.4vw,68px);color:var(--screen-fg);text-wrap:balance}
.dek{max-width:62ch;font-size:16px;line-height:1.55;color:var(--screen-fg);margin:0}
.dek a{color:var(--mark)}
.credits{display:flex;flex-wrap:wrap;gap:4px 22px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.credits div{font-size:13px;line-height:1.45;color:var(--screen-muted)}
.credits b{display:inline;margin-right:6px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--screen-fg);margin-bottom:2px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.btn{display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--body);padding:11px 16px;border-radius:6px;border:1px solid transparent;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--mark);color:var(--mark-ink)}
.btn.ghost{border-color:rgba(255,255,255,.3);color:var(--screen-fg);background:transparent}
.btn.ghost:hover{border-color:var(--mark)}

/* Watch-along */
.watch{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start;padding-block:20px 48px}
@media (max-width:960px){.watch{grid-template-columns:minmax(0,1fr)}}
.left{position:sticky;top:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0}
.player{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--screen);border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}
.player iframe,#yt{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytfacade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}
.ytfacade img{width:100%;height:100%;object-fit:cover;display:block}
.ytplay{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:12px;background:rgba(0,0,0,.72);display:grid;place-items:center;transition:background .15s,opacity .15s}
.ytplay svg{width:26px;height:26px;fill:#fff}
.ytfacade:hover .ytplay{background:rgba(0,0,0,.9)}
.ytfacade:focus-visible{outline:2px solid var(--mark);outline-offset:-2px}
.ytfacade.loading .ytplay{opacity:.5}
.player .fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--screen-fg)}
.player .fallback a{color:var(--mark)}
.now{display:none}
.nowtop{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.nowlabel{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.now h2{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,26px);line-height:1.15;margin:0;text-wrap:balance}
.now p{margin:0;color:var(--muted);font-size:15px}
.meter{display:flex;align-items:center;gap:10px;font:600 12px var(--mono);color:var(--muted)}
.meter .bar{width:120px;height:8px;border-radius:4px;background:var(--chip);overflow:hidden}
.meter .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--mark),var(--accent));transition:width .6s ease}
.meter b{color:var(--fg);font-variant-numeric:tabular-nums;min-width:3.5ch;text-align:right}
.toggles{display:flex;flex-wrap:wrap;gap:8px}
.tog{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--body);padding:7px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);cursor:pointer}
.tog[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tog .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.tog[aria-pressed="true"] .dot{background:var(--mark)}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--muted)}

/* Explorer */
.right{min-width:0;position:sticky;top:16px;height:calc(100vh - 32px);min-height:480px;display:flex;flex-direction:column;
  background:var(--surface2);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.filters{padding:10px 12px;display:grid;gap:8px;border-bottom:1px solid var(--line);background:var(--surface)}
.frow{display:flex;gap:8px;min-width:0}.frow .search{flex:1;min-width:0}
#tTopics{white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis}
#tTopics.on{border-color:var(--accent);color:var(--accent)}
#list{flex:1;min-height:0;overflow-y:auto;position:relative;padding:0 12px 24px;outline:0;scrollbar-width:thin}
.right .empty{padding:20px 12px}
.listintro{margin:14px 0 0;font-size:15px;color:var(--muted)}
.search{display:flex;gap:8px}
.search input{flex:1;min-width:0;font:15px var(--body);padding:8px 11px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--fg)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.chip{flex:none;font:600 12.5px var(--body);padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.count{font:12px var(--mono);color:var(--muted)}
.sec{font:700 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:22px 0 8px;display:flex;align-items:center;gap:10px}
.sec::after{content:"";flex:1;height:1px;background:var(--line)}
.cue{border:1px solid var(--line);background:var(--surface);border-radius:8px;margin-bottom:8px;transition:border-color .2s,box-shadow .2s}
/* The note being sung gets the highlighter stripe */
.cue.cur{box-shadow:inset 4px 0 0 var(--mark)}
.cuehead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:start;width:100%;text-align:left;background:none;border:0;padding:12px 14px;cursor:pointer}
.ts{font:600 12.5px var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);background:var(--chip);border:0;border-radius:4px;padding:3px 7px;margin-top:2px;cursor:pointer}
.ts:hover{background:var(--mark);color:var(--mark-ink)}
.ct{font:700 17px/1.3 var(--body);min-width:0}
.ct .star{color:var(--accent);margin-left:6px;font-size:.85em}
.sum{grid-column:2;font-size:14.5px;color:var(--muted);line-height:1.45}
.tagrow{grid-column:2;display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.tag{font:600 10.5px var(--mono);letter-spacing:.04em;padding:2px 6px;border-radius:3px;background:var(--chip);color:var(--muted)}
.chev{grid-row:1;grid-column:3;color:var(--muted);transition:transform .2s;font-size:14px;margin-top:3px}
.cue.open .chev{transform:rotate(180deg)}
.cuebody{padding:2px 14px 16px 14px;display:grid;gap:12px;border-top:1px dashed var(--line);margin-inline:14px;padding-inline:0;padding-top:14px}
.para{margin:0;max-width:68ch}
.lbl{display:inline-block;font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;border-radius:3px;margin-right:8px;vertical-align:2px}
.lbl.os{background:var(--mark);color:var(--mark-ink)}
.lbl.ctx{background:var(--chip);color:var(--fg)}
.lbl.read{background:transparent;color:var(--accent);border:1px solid var(--accent);padding:3px 5px}
.figs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.fig{padding:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface2);cursor:zoom-in;text-align:left}
.fig img{display:block;width:100%;height:96px;object-fit:cover;object-position:top}
.fig span{display:block;font-size:12.5px;line-height:1.35;padding:6px 8px;color:var(--muted)}
.links{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}
.links a::after{content:" ↗";font-size:.85em}
.cueactions{display:flex;gap:8px;flex-wrap:wrap}
.minibtn{font:600 13px var(--body);padding:7px 11px;border-radius:6px;border:1px solid var(--line);background:var(--surface2);cursor:pointer}
.minibtn:hover{border-color:var(--accent)}
.empty{padding:28px 0;color:var(--muted)}

/* Lightbox */
dialog{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);width:100%;max-height:92vh}
dialog::backdrop{background:rgba(8,6,14,.82);backdrop-filter:blur(3px)}
.lb{background:var(--surface);color:var(--fg);border-radius:10px;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:92vh}
.lbbar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);font:12.5px var(--mono);color:var(--muted)}
.lbbar span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbimg{overflow:auto;background:var(--surface2);min-height:0}
.lbimg img{display:block;max-width:100%;margin:0 auto}
.lbcap{padding:10px 14px;font-size:14.5px;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;align-items:baseline}

/* About + footer */
.about{border-top:1px solid var(--line);padding-block:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.about h3{font-family:var(--display);font-weight:600;font-size:20px;margin:0 0 8px}
.about p{margin:0 0 10px;color:var(--muted);font-size:15px;max-width:60ch}
footer{border-top:1px solid var(--line);padding-block:22px 40px;font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cue,.chev,.meter .bar i{transition:none}}
/* Site tabs: folder tabs on a shared baseline; the current page is the yellow one */
.topnav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:-16px 0 8px;border-bottom:2px solid var(--mark);max-width:760px}
.topnav a{display:grid;gap:2px;align-content:start;min-width:0;padding:10px 14px 9px;text-decoration:none;color:var(--screen-muted);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.2);border-bottom:0;border-radius:8px 8px 0 0;transition:background .15s,color .15s}
.topnav b{font:600 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--screen-fg)}
.topnav small{font-size:12.5px;line-height:1.3}
.topnav a:hover{background:rgba(255,255,255,.1);color:var(--screen-fg)}
.topnav a[aria-current="page"]{background:var(--mark);border-color:var(--mark);color:var(--mark-ink)}
.topnav a[aria-current="page"] b{color:var(--mark-ink)}
.topnav a:focus-visible{outline:2px solid var(--mark);outline-offset:2px}
@media (max-width:560px){.topnav{gap:4px}.topnav a{padding:9px 8px 8px}.topnav b{font-size:11.5px;letter-spacing:.04em}.topnav small{display:none}}
.chips{flex-wrap:wrap;overflow:visible}
.chev{font-size:18px;line-height:1}
.lbl.mv{background:var(--accent);color:var(--accent-ink)}
.madeby{margin:14px auto 0;font:600 13px var(--mono);color:var(--fg);letter-spacing:.02em}
.madeby span{color:var(--accent)}
.fbline{margin:14px auto 0;font-size:14px}
.nofeedback .fbline{display:none}
a.minibtn{color:inherit;text-decoration:none}
.rend{margin-top:14px;font-size:14px;color:var(--muted)}
.mvpick{display:grid;gap:6px;min-width:0}
.mvlabel{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mvstrip{position:relative;display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.mvbtn{flex:none;width:128px;padding:0;border:2px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface);cursor:pointer;text-align:left}
.mvbtn img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.mvbtn span{display:block;padding:4px 6px 5px;font-size:11.5px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvbtn b{display:block;color:var(--fg);font-size:12px}
.mvbtn:hover{border-color:var(--accent)}
.mvbtn[aria-pressed="true"]{border-color:var(--mark);box-shadow:0 0 0 2px var(--mark)}
.mvbtn i{display:block;font:500 10.5px var(--mono);font-style:normal;color:var(--muted);margin-top:1px}
.mvmeta{display:grid;gap:4px;padding:2px 2px 4px;min-width:0}
.mvt{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.mvt b{font:700 15px/1.3 var(--body)}
.mvt span{font:12px var(--mono);color:var(--muted)}
.mvmeta p{margin:0;font-size:14px;color:var(--muted);max-width:70ch}
.mvl{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px}
.mvl a::after{content:" ↗";font-size:.85em}
.mvl a.int::after{content:" →"}
/* Perduta explainer: its own note labels, event-date chips and the source list */
.lbl.src{background:var(--mark);color:var(--mark-ink)}
.lbl.lib{background:transparent;color:var(--fg);border:1px dashed var(--muted);padding:3px 5px}
.tag.when{background:transparent;color:var(--fg);border:1px solid var(--line);padding:1px 5px}
.h1sub{display:block;font:600 clamp(13px,1.6vw,16px) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--screen-muted);margin-top:10px}
.credits a{color:var(--mark)}
.srclist{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:14px;counter-reset:src}
.srclist li{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:baseline;counter-increment:src}
.srclist span{font:600 11.5px var(--mono);color:var(--muted);min-width:9.5ch}
.srclist a{color:var(--fg)}
/* Reading level toggle ("Explain it simply" / "Give me the details"), shown when the page loads cues-simple.js */
.lvl{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.lvl button{font:700 14px var(--body);padding:10px 12px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.lvl button+button{border-left:1px solid var(--line)}
.lvl button[aria-pressed="true"]{background:var(--mark);color:var(--mark-ink)}
.lvl button:hover:not([aria-pressed="true"]){color:var(--fg)}
.secintro{margin:-2px 0 10px;font-size:15px;color:var(--muted);max-width:68ch}
.para.more{font-size:14px;color:var(--muted)}
.linkbtn{padding:0;border:0;background:none;color:var(--accent);text-decoration:underline;text-underline-offset:.18em;cursor:pointer;font:inherit}
/* Toolbar under the player: P(doom) meter, reading toggles and the video picker dropdown */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.bar .toggles{flex:1 1 auto;gap:6px}
.bar .meter{order:2;margin-left:auto}
.bar .tog{padding:6px 10px;font-size:12.5px}
.tog.vis{border-style:dashed}
.tog.vis[aria-expanded="true"]{border-style:solid;border-color:var(--fg)}
.mvpanel{display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.about .legend{margin-top:4px}
.lvl button{padding:8px 10px}
/* Narrow screens: one column; the player, toolbar and a short "now playing" strip stay pinned at the top */
@media (max-width:960px){
  .left{position:sticky;top:0;z-index:6;background:var(--bg);padding-block:8px;margin-inline:-20px;padding-inline:20px;border-bottom:1px solid var(--line)}
  .bar{flex-wrap:nowrap;gap:10px}
  .bar .toggles{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0}
  .bar .tog{flex:none}
  .bar .meter{order:0;margin-left:0;flex:none}.bar .meter .bar{width:44px}
  .now{display:grid;gap:2px}
  .now h2{font-size:17px}.now p{font-size:14px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .right{position:static;height:auto;min-height:0;overflow:visible}
  #list{overflow:visible}
  .htop{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){.left{margin-inline:-16px;padding-inline:16px}.tog{font-size:12px;padding:6px 9px}}
@media (max-width:960px) and (max-height:700px){.now{display:none}}
/* Zen mode (body.zen): a slim bar, the video on the left half, one large note on the right.
   body.zenlist swaps the note card for the full notes panel. */
.zenbar,.zencard{display:none}
body.zen{--zb:54px}
body.zen .hero,body.zen .about,body.zen .now,body.zen #tFollow,body.zen .mvmeta,body.zen .right{display:none}
body.zen .zenbar{display:block;position:sticky;top:0;z-index:20;background:var(--screen);color:var(--screen-fg);border-bottom:3px solid var(--mark)}
.zenbar .wrap{display:flex;align-items:center;gap:8px 18px;min-height:calc(var(--zb) - 3px);flex-wrap:wrap;padding-block:6px}
.ztitle{font:600 18px/1 var(--display);color:var(--screen-fg);white-space:nowrap}
.ztabs{display:flex;gap:2px}
.ztabs a{font:600 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--screen-muted);text-decoration:none;padding:5px 8px;border-radius:4px}
.ztabs a:hover{color:var(--screen-fg)}
.ztabs a[aria-current="page"]{background:var(--mark);color:var(--mark-ink)}
.zsp{flex:1}
.zenbar .minibtn{background:transparent;color:var(--screen-fg);border-color:rgba(255,255,255,.28)}
.zenbar .minibtn:hover,.zenbar .minibtn[aria-pressed="true"]{border-color:var(--mark)}
.zlvl{background:transparent;border-color:rgba(255,255,255,.28)}
.zlvl button{padding:6px 12px;font-size:13px;color:var(--screen-muted)}
.zlvl button+button{border-left-color:rgba(255,255,255,.28)}
body.zen .watch{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;min-height:calc(100vh - var(--zb));padding-block:20px}
body.zen .left{position:static}
body.zen main.wrap,body.zen .zenbar .wrap{max-width:1680px}
body.zen .zencard{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:14px;max-height:calc(100vh - var(--zb) - 40px);overflow-y:auto;scrollbar-width:thin;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--mark);border-radius:8px;padding:20px 24px;box-shadow:var(--shadow)}
.zmain{display:grid;gap:10px;align-content:start}
.zmain h2{font:600 clamp(24px,2.6vw,34px)/1.12 var(--display);margin:0;text-wrap:balance}
.zmain h2 .star{color:var(--accent);margin-left:8px;font-size:.7em;vertical-align:.2em}
.zsum{margin:0;font-size:17px;color:var(--muted)}
.zbody{display:grid;gap:12px;font-size:16px}
.zbody .para{max-width:none}
.zside{justify-self:start;padding:0;border:0;background:none;font:500 13px var(--mono);color:var(--muted);opacity:.75;cursor:pointer;text-align:left}
button.zside:hover{opacity:1;color:var(--accent)}
.zfoot{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
body.zen.zenlist .zencard{display:none}
body.zen.zenlist .right{display:flex;height:calc(100vh - var(--zb) - 40px);top:calc(var(--zb) + 20px)}
body.zen.zenlist .watch{align-items:start}
@media (max-width:960px){
  body.zen .zenbar{position:static}
  body.zen .ztabs{order:5;width:100%}
  body.zen .watch{grid-template-columns:minmax(0,1fr);min-height:0;gap:14px;padding-top:0}
  body.zen .left{position:sticky;top:0}
  body.zen .zencard{max-height:none;overflow:visible;padding:16px 18px}
  body.zen.zenlist .right{height:auto}
}
/* Official lyric line on each note (list card and zen card), shown once lyrics.js is filled in */
/* The lyric is the highlighted line: a highlighter swipe behind the words, wrapping line by line */
.lyric{margin:2px 0 0;padding:0;font:500 15.5px/1.7 var(--body)}
.lyric span{background:var(--mark);color:var(--mark-ink);padding:.12em .3em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cuehead .lyric{grid-column:2}
/* In the full list every card has its lyric, so only the note being sung gets the highlighter; the rest read plain */
.cuehead .lyric span{background:none;color:var(--muted);padding:0}
.cue.cur .cuehead .lyric span{background:var(--mark);color:var(--mark-ink);padding:.12em .3em}
.zmain .lyric{font-size:18px;margin:2px 0 4px}
/* Zen | Full page switch: in the zen bar, and top right of the full page's hero (same corner, same look) */
.viewsw{display:inline-flex;border:1px solid rgba(255,255,255,.3);border-radius:6px;overflow:hidden;flex:none}
.viewsw button{font:700 13px var(--body);padding:7px 12px;border:0;background:transparent;color:var(--screen-muted);cursor:pointer}
.viewsw button+button{border-left:1px solid rgba(255,255,255,.3)}
.viewsw button[aria-pressed="true"]{background:var(--mark);color:var(--mark-ink)}
.viewsw button:hover:not([aria-pressed="true"]){color:var(--screen-fg)}
.heroview{position:absolute;top:24px;right:min(20px,calc(20px - (100vw - 1280px) / 2));display:flex;gap:8px;align-items:center}
@media (max-width:900px){.heroview{position:static;justify-self:end;margin-top:-4px}}
/* Copy link: on the dark bar and hero it matches the bar's buttons; reel keeps it in its How it works sheet */
.heroview .minibtn{background:transparent;color:var(--screen-fg);border-color:rgba(255,255,255,.28)}
.heroview .minibtn:hover{border-color:var(--mark)}
body.reel .zenbar .sharebtn{display:none}

/* Reel (the default view, body.zen.reel; John Salter’s design): full screen with no page scroll. The video on black on top, a progress
   seam with a tick per line, then one large note: year, title and a one-line gloss, opening to the full story.
   It shares zen's bar, which swaps its tabs and All notes for a jump list and a help button. */
.rjump,.rhelpbtn,.reelnote,.reelprog,.rsong{display:none}
body.reel{--note-min:clamp(220px,36dvh,340px);height:100dvh;overflow:hidden}
body.reel .zencard,body.reel .ztabs,body.reel #zList,body.reel .left>.bar,body.reel .mvpanel,body.reel footer{display:none!important}
body.reel .rhelpbtn{display:inline-flex;align-items:center}
body.reel .rjump{display:block}
body.reel .zenbar{position:static}
body.reel .zenbar .wrap{flex-wrap:nowrap;max-width:none}
body.reel .ztitle{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:0 1 auto}
.rhelpbtn .short{display:none}
body.reel main.wrap{max-width:none;padding:0}
body.reel .watch{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(var(--note-min),1fr);gap:0;
  height:calc(100dvh - var(--zb));min-height:0;padding:0;align-items:stretch}
body.reel .left{position:relative;top:auto;display:block;background:#000;padding:0 0 4px;margin:0}
body.reel .player{width:min(100%,calc((100dvh - var(--zb) - var(--note-min) - 4px) * 16 / 9));margin:0 auto;border-radius:0;box-shadow:none}
body.reel .rsong{display:grid;place-items:center;position:absolute;top:calc(50% - 2px);translate:0 -50%;z-index:2;width:44px;height:72px;
  font:400 40px/1 var(--body);color:rgba(255,255,255,.72);text-decoration:none;border-radius:8px}
body.reel .rsong:hover{color:#fff;background:rgba(255,255,255,.1)}
body.reel .rsong.prev{left:6px}
body.reel .rsong.next{right:6px}
body.reel .reelprog{display:block;position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.16);cursor:pointer;z-index:2;transition:height .12s}
body.reel .reelprog:hover{height:9px}
.reelprog i{position:absolute;inset:0;background:var(--mark);transform-origin:left;transform:scaleX(0)}
.reelprog b{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(255,255,255,.4)}
body.reel .reelnote{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;background:var(--surface)}
.rslide{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:22px max(20px,calc((100% - 820px) / 2)) 10px;display:grid;gap:10px;align-content:start}
.rlabel{font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rslide h2{font:600 clamp(26px,3.6vw,40px)/1.12 var(--display);margin:0;text-wrap:balance}
.rslide h2 .when{color:var(--muted);margin-right:.4em}
.rslide h2 .star{color:var(--accent);margin-left:8px;font-size:.6em;vertical-align:.25em}
.rgloss{margin:0;font-size:clamp(17px,1.7vw,20px);line-height:1.5;max-width:60ch}
.rmore{display:grid;gap:12px;margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.rmore .lyric{font-size:18px}
.rfoot{display:flex;justify-content:center;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.rfoot .rexp{min-width:9.5em}
.rfoot button:disabled{opacity:.35;cursor:default}
.rfoot .rghost{visibility:hidden}  /* holds the Full story and Share slots before the song, so ↓ doesn't move */
@keyframes reel-from-next{from{transform:translateY(32px);opacity:0}}
@keyframes reel-from-prev{from{transform:translateY(-32px);opacity:0}}
.rslide.fromnext{animation:reel-from-next .22s ease-out}
.rslide.fromprev{animation:reel-from-prev .22s ease-out}
/* The jump list: a search box in the bar that lists every reference */
.rjump{position:relative;flex:1 1 240px;max-width:440px;min-width:0}
.rjump input{width:100%;font:500 14px var(--body);padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);color:var(--screen-fg)}
.rjump input::placeholder{color:var(--screen-muted)}
.rjump input:focus{outline:2px solid var(--mark);outline-offset:1px}
.rjumplist{position:absolute;top:calc(100% + 6px);left:0;width:max(100%,320px);max-height:min(60dvh,480px);overflow-y:auto;z-index:30;padding:4px;
  background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 36px rgba(0,0,0,.35)}
.rjumplist button{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:8px;width:100%;text-align:left;font:500 14px/1.35 var(--body);
  padding:7px 10px;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer}
.rjumplist button[aria-selected="true"],.rjumplist button:hover{background:var(--chip)}
.rjumplist .t{font:600 12px var(--mono);color:var(--muted);padding-top:2px}
.rjumplist .now .t{color:var(--accent)}
.rjumplist i{font-style:normal;color:var(--muted);font-size:12.5px}
.rjumplist .none{margin:8px 10px;color:var(--muted)}
/* "How it works": gestures, plus the layout and level switches (the bar has no room for them on phones) */
.reelhelp{width:min(440px,calc(100% - 32px));padding:22px 22px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg)}
.reelhelp::backdrop{background:rgba(0,0,0,.6)}
.reelhelp h3{font:600 22px var(--display);margin:0 0 6px}
.reelhelp p{margin:0}
.reelhelp dl{display:grid;gap:2px;margin:14px 0 16px}
.reelhelp dt{font-weight:700;margin-top:6px}
.reelhelp dd{margin:0;color:var(--muted)}
.rhclose{position:absolute;top:12px;right:12px}
.reelhelp .rhsub{font-size:16px;margin:18px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
.reelhelp .themebtn{color:var(--muted);border-color:var(--line)}
.reelhelp .themebtn:hover{color:var(--fg)}
.rhvis{display:grid;gap:6px;margin-top:14px}
.rhvis .mvlabel b{color:var(--fg);font-weight:700}
.rhset{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.rhset>span{font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.reelhelp .viewsw,.reelhelp .zlvl{border-color:var(--line)}
.reelhelp .viewsw button,.reelhelp .zlvl button{color:var(--muted)}
.reelhelp .viewsw button+button,.reelhelp .zlvl button+button{border-left-color:var(--line)}
.reelhelp .viewsw button:hover:not([aria-pressed="true"]),.reelhelp .zlvl button:hover:not([aria-pressed="true"]){color:var(--fg)}
.reelhelp .viewsw button[aria-pressed="true"],.reelhelp .zlvl button[aria-pressed="true"]{color:var(--mark-ink)}
.rhfoot{margin-top:16px!important;font-size:13px;color:var(--muted)}
@media (max-width:760px){
  body.reel .zenbar .zlvl,body.reel .zenbar .viewsw,body.reel .zenbar .themebtn,body.reel .zsp{display:none}
  /* On a phone the sheet is a bottom sheet, within thumb reach of the button that opens it */
  .reelhelp{width:100%;max-width:none;margin:auto 0 0;border-radius:14px 14px 0 0;border-bottom:0;max-height:88dvh;overflow:auto}
  body.reel .rjump{flex:1 1 auto}
  body.reel .rhelpbtn .long{display:none}
  body.reel .rhelpbtn .short{display:inline}
  body.reel .rhelpbtn{padding-inline:12px}
  body.reel .rsong{width:32px;height:56px;font-size:30px}
  .rslide{padding:16px 18px 8px}
}
/* Light/dark switch (theme.js): last in the hero's .heroview, and in the zen/reel bar */
.themebtn{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;padding:0;cursor:pointer;background:transparent;color:var(--screen-muted);border:1px solid rgba(255,255,255,.28);border-radius:6px}
.themebtn:hover{color:var(--screen-fg);border-color:var(--mark)}
.themebtn:focus-visible{outline:2px solid var(--mark)}
.hero .wrap > .themebtn{position:absolute;top:24px;right:min(20px,calc(20px - (100vw - 1280px) / 2))}
@media (max-width:900px){.hero .wrap > .themebtn{position:static;justify-self:end;margin-top:-4px}}