/* Layout: the picture fills the room; a slim console docks at the bottom; a drawer on the right (a sheet on phones) holds tracks, words, pictures and prompts. */
:root{
  --ink:#0b0a10;            /* the room */
  --ink-2:#14121b;          /* raised surfaces */
  --paper:#ece6dc;          /* text */
  --mute:#938d9e;           /* secondary text */
  --line:rgba(236,230,220,.14);
  --glass:rgba(11,10,16,.64);
  --pewter:#c9c5d4;         /* her silver streaks; default accent */
  --accent:#c9c5d4;         /* set per song from its light */
  --danger:#ff6b5e;
  --display:"EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --bold:"Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --sing:#ffb648;           /* the word being sung: porch-light amber */
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--ink);color:var(--paper);overflow:hidden}
body{font-family:var(--display);font-size:16px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#stage{position:fixed;inset:0;display:block;width:100%;height:100%;background:var(--ink)}
#stage.letterbox{object-fit:contain}
.overlay{position:fixed;pointer-events:none;z-index:2}
#nowtag{top:calc(env(safe-area-inset-top,0px) + 18px);left:20px;max-width:min(70vw,620px);transition:opacity .8s}
#nowtag .num{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}
#nowtag h1{font-weight:500;font-style:italic;font-size:clamp(26px,4.4vw,52px);line-height:1.02;margin:.15em 0 .1em;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.55)}
#nowtag .by{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--paper);opacity:.75}
#nowtag.dim{opacity:.34}
#readout{right:20px;top:calc(env(safe-area-inset-top,0px) + 18px);font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-align:right;color:var(--paper);text-shadow:0 1px 10px rgba(0,0,0,.8)}
#readout .big{font-size:clamp(18px,2.6vw,30px);letter-spacing:.02em;font-variant-numeric:tabular-nums}
#readout .small{opacity:.7;font-size:11px;text-transform:uppercase;letter-spacing:.14em}
#readout.cctv{left:20px;right:auto;bottom:calc(var(--ch,120px) + 14px);top:auto;text-align:left;color:#d8f5d0;font-size:15px}
#readout.date{right:24px;top:auto;bottom:calc(var(--ch,120px) + 14px);color:#ff9d3a;font-size:22px;letter-spacing:.12em;text-shadow:0 0 8px rgba(255,140,40,.7)}

/* intro card */
#intro{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding-inline:16px;padding-block:24px;background:radial-gradient(ellipse at center,rgba(11,10,16,.15),rgba(11,10,16,.72) 75%)}
#intro[hidden]{display:none!important}
.card{width:min(560px,100%);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:6px;padding:28px 28px 22px;display:grid;gap:16px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.card h2{font-size:clamp(40px,8vw,68px);font-weight:500;font-style:italic;line-height:.95;margin:0;text-wrap:balance}
.card p{margin:0;line-height:1.5;color:var(--paper);max-width:62ch}
.facts{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--mute);font-variant-numeric:tabular-nums}
.facts b{color:var(--paper);font-weight:500}
.btnrow{display:flex;flex-wrap:wrap;gap:10px}
.btn{border:1px solid var(--line);background:rgba(236,230,220,.06);padding:10px 16px;border-radius:999px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:8px;transition:background .2s,border-color .2s}
a.btn{color:var(--paper);text-decoration:none}
.btn:hover{background:rgba(236,230,220,.12);border-color:rgba(236,230,220,.3)}
.btn.primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.primary:hover{background:#fff}
.btn.small{padding:7px 12px;font-size:12px}
.fine{font-family:var(--mono);font-size:11.5px;line-height:1.55;color:var(--mute)}
.fine a{color:var(--paper)}

/* console */
#console{position:fixed;left:0;right:0;bottom:0;z-index:4;padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 12px);background:linear-gradient(to top,rgba(11,10,16,.9),rgba(11,10,16,.55) 70%,rgba(11,10,16,0));display:grid;gap:8px}
#scrub{width:100%;height:44px;display:block;cursor:pointer;touch-action:none}
.ctl{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ico{width:40px;height:40px;border-radius:999px;border:1px solid transparent;background:transparent;display:inline-grid;place-items:center;color:var(--paper)}
.ico:hover{background:rgba(236,230,220,.1)}
.ico svg{width:20px;height:20px;fill:currentColor}
.ico.play{width:48px;height:48px;background:var(--paper);color:var(--ink)}
.ico.play:hover{background:#fff}
.time{font-family:var(--mono);font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums;min-width:96px}
.spacer{flex:1}
.tabbtn{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:8px 11px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--paper)}
.tabbtn:hover{background:rgba(236,230,220,.08)}
.tabbtn[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
#vol{width:90px;accent-color:var(--accent)}

/* drawer */
#drawer{position:fixed;z-index:3;top:calc(env(safe-area-inset-top,0px) + 16px);right:16px;bottom:calc(var(--ch,120px) + 8px);width:min(480px,calc(100% - 32px));background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;min-height:0}
#drawer[hidden]{display:none!important}
.dhead{display:flex;flex-shrink:0;align-items:center;gap:2px;padding:10px 8px 8px 10px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.dhead::-webkit-scrollbar{display:none}
.dtab{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;padding:7px 8px;border-radius:999px;border:0;background:transparent;color:var(--mute);white-space:nowrap}
.dtab[aria-selected="true"]{color:var(--ink);background:var(--paper)}
.dclose{margin-left:auto}
.dbody{overflow:auto;padding:14px 16px 22px;min-height:0;flex:1}
.panel[hidden]{display:none!important}
.side{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:18px 0 6px;display:flex;justify-content:space-between}
.side:first-child{margin-top:2px}
.trow{display:grid;grid-template-columns:28px 1fr auto;align-items:baseline;gap:10px;width:100%;text-align:left;border:0;background:transparent;padding:7px 8px;border-radius:4px}
.trow:hover{background:rgba(236,230,220,.07)}
.trow .n{font-family:var(--mono);font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.trow .t{font-size:18px;line-height:1.25;min-width:0}
.trow .t i{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-left:8px}
.trow .d{font-family:var(--mono);font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.trow[aria-current="true"]{background:rgba(236,230,220,.1)}
.trow[aria-current="true"] .n,.trow[aria-current="true"] .t{color:var(--accent)}
.lyrics{font-size:19px;line-height:1.5}
.lyrics .sec{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:18px 0 4px}
.lyrics .sec:first-child{margin-top:0}
.lyrics p{margin:0}
.lyrics .gap{height:.6em}
.lline{display:block;width:100%;text-align:left;border:0;background:transparent;padding:3px 6px;margin:0 -6px;border-radius:4px;font-family:var(--display);font-size:19px;line-height:1.45;color:var(--paper);opacity:.72}
.lline:hover{background:rgba(236,230,220,.07);opacity:1}
.lline.now{opacity:1;color:var(--accent)}
.note{font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--mute)}
.brief{display:grid;gap:12px;font-size:17px;line-height:1.5}
.brief .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:2px}
.brief ul,.brief ol{margin:4px 0 0;padding-left:1.2em;display:grid;gap:6px}
.sound{font-size:16px;line-height:1.5;color:var(--mute);border-left:2px solid var(--accent);padding-left:12px}
textarea.out{width:100%;min-height:260px;resize:vertical;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:4px;padding:12px;font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--paper)}
textarea.in,input.in{width:100%;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:4px;padding:10px;font-family:var(--mono);font-size:12.5px;line-height:1.5}
textarea.in{min-height:90px;resize:vertical}
.lab{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:block;margin:12px 0 6px}
.stack{display:grid;gap:10px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.drop{border:1px dashed rgba(236,230,220,.3);border-radius:6px;padding:22px 16px;text-align:center;display:grid;gap:8px;place-items:center}
.drop.over{border-color:var(--accent);background:rgba(236,230,220,.05)}
.meas{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-family:var(--mono);font-size:12.5px;line-height:1.5}
.meas dt{color:var(--mute)}
.meas dd{margin:0;min-width:0}
select.in{width:100%;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:4px;padding:9px;font-family:var(--mono);font-size:12.5px}
.swatches{display:flex;gap:8px}
.swatches input{width:44px;height:32px;border:1px solid var(--line);border-radius:4px;background:transparent;padding:0}
.status{font-family:var(--mono);font-size:12px;color:var(--accent);min-height:1.2em}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--ch,120px) + 12px);max-width:calc(100% - 32px);text-align:center;z-index:9;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:12.5px;padding:9px 14px;border-radius:999px;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.on{opacity:1}
#recbar{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);left:50%;transform:translateX(-50%);z-index:8;font-family:var(--mono);font-size:12.5px;background:#b3261e;color:#fff;border-radius:999px;padding:8px 14px;display:flex;gap:12px;align-items:center}
#recbar[hidden]{display:none!important}
#recbar button{border:0;background:#fff;color:#b3261e;border-radius:999px;padding:4px 10px;font-family:var(--mono);font-size:12px}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:3px 8px;color:var(--mute)}
.answer{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);font-size:12px;line-height:1.6;background:rgba(0,0,0,.35);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:4px;padding:12px;max-height:440px;overflow:auto}
.answer[hidden],.row[hidden],.btn[hidden]{display:none!important}
.answer.wait{color:var(--mute)}
.cover-row{display:flex;gap:12px;align-items:center}
.cover-prev{width:56px;height:56px;object-fit:cover;border-radius:4px;border:1px solid var(--line);background:var(--ink-2)}
.cover-prev[hidden]{display:none}
/* the words, over the picture */
#lyr{left:16px;right:16px;bottom:calc(var(--ch,120px) + 20px);display:grid;justify-items:center;gap:8px;text-align:center;transition:right .3s,opacity .3s}
#lyr[hidden]{display:none}
body.drawer-open #lyr{right:calc(min(480px,100% - 32px) + 32px)}
#lyr .cur{max-width:min(1100px,100%);text-wrap:balance;min-height:1em}
#lyr .nxt{max-width:min(900px,100%);text-wrap:balance;opacity:.55;min-height:1em}
#lyr .w{display:inline;transition:color .14s}
#lyr .echo{font-size:.7em;opacity:.8}
#lyr.bold .cur{font-family:var(--bold);font-weight:400;font-size:clamp(30px,5.4vw,68px);line-height:1.04;text-transform:uppercase;letter-spacing:.01em;color:rgba(242,238,230,.94);text-shadow:0 2px 0 rgba(0,0,0,.35),0 3px 22px rgba(0,0,0,.6)}
#lyr.bold .cur .on{color:var(--sing)}
#lyr.bold .nxt{font-family:var(--bold);font-size:clamp(14px,1.8vw,22px);text-transform:uppercase;letter-spacing:.05em;color:var(--paper);text-shadow:0 1px 10px rgba(0,0,0,.7)}
#lyr.serif .cur{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(28px,4.2vw,54px);line-height:1.12;color:rgba(236,230,220,.72);text-shadow:0 2px 20px rgba(0,0,0,.7)}
#lyr.serif .cur .on{color:#fff}
#lyr.serif .nxt{font-family:var(--display);font-style:italic;font-size:clamp(15px,1.9vw,22px);color:var(--paper);text-shadow:0 1px 10px rgba(0,0,0,.7)}
#lyr .fade{animation:lyrIn .28s ease-out}
@keyframes lyrIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:720px){ body.drawer-open #lyr{opacity:0} }
/* drawer blocks */
.block{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:6px;background:rgba(236,230,220,.03)}
.panel h3{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.2;margin:6px 0 0}
.panel h3.big{font-size:27px;font-style:italic;margin-top:0}
.block h3{margin:0}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{font-family:var(--mono);font-size:12px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--paper)}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
textarea.out.short{min-height:150px}
.pic-prev{width:100%;max-width:280px;border-radius:4px;border:1px solid var(--line)}
.pic-prev[hidden]{display:none}
.link-prev{max-width:100%;aspect-ratio:1200/630;object-fit:cover}
details.more{border-top:1px solid var(--line);padding-top:12px}
details.more summary{cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--mute)}
details.more[open] summary{margin-bottom:12px}
details.more > div{margin-bottom:12px}
.steps{margin:0;padding-left:1.3em;display:grid;gap:8px;font-size:17px;line-height:1.45}
.steps b{font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two > div{min-width:0}
.tapbox{display:grid;gap:10px;padding:14px;border:1px solid var(--accent);border-radius:6px}
.tapbox[hidden]{display:none}
.tapline{font-family:var(--display);font-style:italic;font-size:22px;line-height:1.3;min-height:2.6em}
.tapline small{display:block;font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tapbig{min-width:140px;justify-content:center;font-size:15px;padding:14px 24px}
.tabbtn.hot{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.tabbtn.hot[aria-pressed="true"]{background:var(--paper);border-color:var(--paper)}
#loadbar{position:fixed;left:0;right:0;bottom:0;height:2px;z-index:6;background:var(--accent);transform-origin:left;transform:scaleX(0);opacity:0;transition:opacity .4s}
#loadbar.on{opacity:1}

@media (max-width:720px){
  #drawer{left:16px;right:16px;width:auto;top:auto;bottom:calc(var(--ch,120px) + 6px);max-height:64vh}
  .dhead{flex-wrap:wrap;row-gap:4px}
  #nowtag{left:16px;max-width:calc(100vw - 32px)}
  #readout{right:16px}
  .time{min-width:0}
  #vol{display:none}
  .card{padding:22px 18px 18px}
}
@media (max-width:560px){
  .ctl .hide-s,.ctl .hide-m,#fs,.t-dur{display:none}
  .ctl{flex-wrap:nowrap;gap:4px}
  .time{min-width:36px}
}
@media (max-width:360px){
  .ico{width:34px;height:34px}
  .tabbtn{padding:8px 9px}
}
@media (prefers-reduced-motion:reduce){
  #nowtag,.toast{transition:none}
}