:root{
  --ink:#ffeaf6; --dim:#d59ec6; --playhead:#ff5ea8; --accent:#ff9ed8;
}
*{box-sizing:border-box;}
*:focus,.focusable:focus{outline:none;}
html,body{margin:0;padding:0;height:100%;background:#000;
  color:var(--ink);font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-user-select:none;user-select:none;}
/* 600x600 stage — fills the glasses display, centered on larger screens */
#stage{position:relative;width:600px;height:600px;margin:0 auto;background:#000;overflow:hidden;}
.screen{position:absolute;inset:0;width:600px;height:600px;display:none;}
.screen.active{display:block;}

/* ---------- LIBRARY ---------- */
#library{padding:48px 36px;}
#library h1{font-size:32px;font-weight:700;text-align:center;margin:6px 0 4px;
  color:#ffd6ee;text-shadow:0 0 14px rgba(255,94,168,.7);}
#library .tag{text-align:center;color:var(--dim);font-size:15px;margin-bottom:26px;}
#songList{display:flex;flex-direction:column;gap:12px;max-height:392px;overflow:hidden;scroll-behavior:smooth;
  -webkit-mask-image:linear-gradient(transparent 0,#000 14px,#000 calc(100% - 14px),transparent);
  mask-image:linear-gradient(transparent 0,#000 14px,#000 calc(100% - 14px),transparent);}
.row{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;
  border:2px solid #20323a;font-size:22px;}
.row .meta{margin-left:auto;color:var(--dim);font-size:15px;}
.row.add{color:var(--accent);border-style:dashed;border-color:#4a2740;justify-content:center;}
.row.sel{border-color:var(--playhead);box-shadow:0 0 16px -2px var(--playhead);background:rgba(255,94,168,.08);}
.row .del{margin-left:10px;color:var(--dim);font-size:18px;}
#library .foot{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:var(--dim);font-size:14px;}

/* ---------- PLAYER ---------- */
#pTitle{position:absolute;top:16px;left:0;right:0;text-align:center;font-size:22px;font-weight:600;}
#lane{position:absolute;left:0;right:0;top:150px;height:300px;overflow:hidden;}
#strip{position:absolute;top:0;left:0;will-change:transform;transform:translate3d(0,0,0);}
#notation{position:absolute;top:0;left:0;}
#playhead{position:absolute;top:150px;height:300px;width:3px;left:200px;
  background:var(--playhead);box-shadow:0 0 10px 2px var(--playhead);border-radius:2px;}
#playhead::before{content:"";position:absolute;top:-10px;left:-6px;
  border-left:7px solid transparent;border-right:7px solid transparent;border-top:11px solid var(--playhead);}
#countin{position:absolute;top:62px;left:0;right:0;text-align:center;font-size:64px;font-weight:800;
  color:var(--accent);text-shadow:0 0 18px rgba(255,94,168,.8);opacity:0;}
#hud{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:30px;font-variant-numeric:tabular-nums;}
#hud .k{color:var(--dim);font-size:13px;display:block;text-align:center;}
#hud .v{font-size:24px;font-weight:600;text-align:center;display:block;}
.v.playing{color:var(--accent);} .v.paused{color:var(--dim);}
#pHint{position:absolute;left:0;right:0;bottom:66px;text-align:center;font-size:14px;color:var(--dim);}
#bar{position:absolute;left:40px;right:40px;bottom:58px;height:3px;background:#1d2c33;border-radius:2px;}
#barFill{position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent);border-radius:2px;}

/* toast */
#toast{position:absolute;left:30px;right:30px;bottom:24px;text-align:center;font-size:16px;
  color:var(--ink);background:rgba(40,12,28,.92);border:1px solid #5a2742;border-radius:12px;
  padding:12px 16px;opacity:0;transition:opacity .25s;pointer-events:none;}
#toast.show{opacity:1;}

/* ---------- SETUP (chord charts) ---------- */
#setup{padding:34px 40px;}
#sTitle{text-align:center;font-size:26px;font-weight:700;color:#ffd6ee;text-shadow:0 0 14px rgba(255,94,168,.6);}
#sArtist{text-align:center;color:var(--dim);font-size:15px;margin:2px 0 18px;min-height:18px;}
#sRows{display:flex;flex-direction:column;gap:9px;}
.srow{display:flex;align-items:baseline;gap:14px;padding:11px 18px;border-radius:14px;border:2px solid #20323a;font-size:20px;}
.srow .k{min-width:120px;}
.srow .v{font-weight:700;color:var(--accent);min-width:52px;font-variant-numeric:tabular-nums;}
.srow .note{margin-left:auto;color:var(--dim);font-size:14px;text-align:right;}
.srow.act{justify-content:center;}
.srow.act .k{min-width:0;}
.srow.act .note{margin-left:14px;}
.srow.sel{border-color:var(--playhead);box-shadow:0 0 16px -2px var(--playhead);background:rgba(255,94,168,.08);}
#sChords{position:absolute;left:0;right:0;bottom:52px;display:flex;justify-content:center;gap:2px;flex-wrap:wrap;padding:0 30px;}
#sChords svg{width:62px;height:70px;}
#setup .foot{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:var(--dim);font-size:14px;}

/* ---------- CHART (chords + lyrics) ---------- */
#cTitle{position:absolute;top:12px;left:0;right:0;text-align:center;font-size:20px;font-weight:600;white-space:nowrap;overflow:hidden;}
#cTitle small{color:var(--dim);font-weight:400;font-size:14px;margin-left:10px;}
#cHead{position:absolute;left:0;right:0;top:44px;height:150px;display:flex;justify-content:center;align-items:center;gap:22px;}
#cHead .diag{display:flex;align-items:center;justify-content:center;}
#nowDiag{width:104px;height:118px;}
#nextDiag{width:86px;height:100px;opacity:.6;}
#nowChord{font-size:74px;font-weight:800;color:#fff;text-shadow:0 0 18px rgba(255,94,168,.9);min-width:130px;text-align:center;line-height:1;}
#nowChord.long{font-size:48px;}
#cArrow{color:var(--dim);font-size:30px;}
#nextChord{font-size:38px;font-weight:700;color:var(--accent);opacity:.75;min-width:70px;text-align:center;}
#beats{position:absolute;left:0;right:0;top:200px;display:flex;justify-content:center;gap:10px;}
#beats i{width:14px;height:14px;border-radius:50%;border:2px solid var(--dim);display:inline-block;}
#beats i.on{background:var(--playhead);border-color:var(--playhead);box-shadow:0 0 8px var(--playhead);}
#nowBand{position:absolute;left:18px;right:18px;top:232px;height:76px;border-left:4px solid var(--playhead);
  box-shadow:inset 14px 0 20px -16px var(--playhead);border-radius:4px;}
#lines{position:absolute;left:30px;right:30px;top:236px;height:290px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent);}
#linesInner{position:absolute;left:0;top:0;right:0;will-change:transform;}
.cl{position:relative;height:72px;white-space:nowrap;font-size:29px;}
.cl.gap{height:14px;}
.cl.cont{padding-left:22px;}
.cl .seg{display:inline-block;vertical-align:bottom;}
.cl .ch{display:block;height:24px;font-size:.66em;font-weight:700;color:var(--accent);line-height:24px;padding-right:.35em;}
.cl .ly{display:block;font-size:1em;line-height:36px;white-space:pre;color:var(--ink);}
.cl.cur .ly{font-size:1.07em;}
.cl .seg.cur .ly{color:#fff;text-shadow:0 0 14px rgba(255,94,168,1),0 0 3px #fff;}
.cl .seg.cur .ch{color:#fff;}
#cCountin{position:absolute;top:186px;left:0;right:0;text-align:center;font-size:40px;font-weight:800;line-height:44px;
  color:var(--accent);text-shadow:0 0 18px rgba(255,94,168,.9);opacity:0;pointer-events:none;}
#section{position:absolute;right:34px;top:210px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);}
.cl .ly{opacity:.88;}
.cl.cur .ly{opacity:1;}
#cBar{position:absolute;left:40px;right:40px;bottom:58px;height:3px;background:#1d2c33;border-radius:2px;}
#cBarFill{position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent);border-radius:2px;}
#cHud{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:30px;font-variant-numeric:tabular-nums;}
#cHud .k{color:var(--dim);font-size:12px;display:block;text-align:center;}
#cHud .v{font-size:22px;font-weight:600;text-align:center;display:block;}