*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Spotify-inspired dark base */
  --bg:       #000000;
  --bg2:      #0a0a0a;
  --bg3:      #121212;
  --bg4:      #181818;
  --bg5:      #1f1f1f;
  --bg6:      #2a2a2a;

  --ink:      #ffffff;
  --ink2:     #e5e5e5;
  --ink3:     #b3b3b3;
  --muted:    #6a6a6a;
  --border:   #2a2a2a;
  --border2:  #383838;

  /* Spotify green family */
  --accent:   #1db954;
  --accent2:  #1ed760;
  --accent3:  #4ade80;
  --accent4:  #134e2a;

  /* Severity / signal colors */
  --red:      #e91429;
  --red2:     #ff5b6b;
  --amber:    #f2c94c;
  --amber2:   #ffd966;
  --blue:     #4f9eff;
  --blue2:    #7eb8ff;
  --violet:   #b794f4;
}

html, body {
  width: 100%; height: 100%;
  background: #000;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
  color: var(--ink);
}

#pres { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#viewport { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#scaler { transform-origin: center center; position: relative; width: 960px; height: 540px; }

.slide {
  position: absolute; width: 960px; height: 540px;
  overflow: hidden; border-radius: 14px;
  opacity: 0; transform: translateX(40px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
  box-shadow: 0 40px 100px rgba(0,0,0,.75), 0 4px 16px rgba(0,0,0,.5);
}
.slide.active     { opacity: 1; transform: translateX(0); pointer-events: auto; }
.slide.exit-left  { opacity: 0; transform: translateX(-40px); }
.slide.exit-right { opacity: 0; transform: translateX(40px); }

.s-dark   { background: var(--bg);  color: var(--ink); }
.s-dark2  { background: var(--bg3); color: var(--ink); }
.s-mid    { background: var(--bg4); color: var(--ink); }

.slide-inner { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 44px 56px; }

/* Tags & typography */
.slide-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent2); margin-bottom: 12px;
}

h1.display {
  font-family: 'Inter', sans-serif;
  font-size: 64px; font-weight: 800;
  line-height: 1.02; letter-spacing: -.035em;
  color: var(--ink);
}
h2.section {
  font-family: 'Inter', sans-serif;
  font-size: 38px; font-weight: 700;
  line-height: 1.1; letter-spacing: -.02em;
  margin-bottom: 4px;
  color: var(--ink);
}
h3.subsection {
  font-family: 'Inter', sans-serif;
  font-size: 22px; font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

.divider { width: 56px; height: 4px; background: var(--accent); border-radius: 2px; margin: 14px 0 22px; }

p.body { font-size: 14.5px; line-height: 1.65; color: var(--ink2); max-width: 720px; }

/* Corner number */
.corner-num {
  position: absolute; right: 56px; bottom: 28px;
  font-family: 'Inter', sans-serif;
  font-size: 96px; font-weight: 800; line-height: 1;
  opacity: .04; color: var(--ink); pointer-events: none;
  letter-spacing: -.04em;
}

/* Counter & nav */
#counter {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: rgba(255,255,255,.45); letter-spacing: .12em; z-index: 100;
}
.nav-btn {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: white; width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: background .2s;
}
.nav-btn:hover { background: rgba(29,185,84,.25); border-color: var(--accent); }
#nav-prev { left: 18px; }
#nav-next { right: 18px; }

/* Grid helpers */
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.cols4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
.cols5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }

/* Cards */
.card {
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.card-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--accent2);
}
.card-body { font-size: 13px; line-height: 1.5; color: var(--ink2); }

.card.accent { border-color: var(--accent); border-left: 3px solid var(--accent); }
.card.danger { border-left: 3px solid var(--red); }
.card.warn   { border-left: 3px solid var(--amber); }
.card.muted  { border-color: var(--border); opacity: .8; }

/* Pills */
.pill {
  display: inline-flex; align-items: center;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px;
  white-space: nowrap;
}
.pill-accent { background: rgba(29,185,84,.18); border: 1px solid rgba(29,185,84,.45); color: var(--accent2); }
.pill-amber  { background: rgba(242,201,76,.15); border: 1px solid rgba(242,201,76,.4);  color: var(--amber2); }
.pill-red    { background: rgba(233,20,41,.15); border: 1px solid rgba(233,20,41,.45);   color: var(--red2); }
.pill-muted  { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: var(--ink3); }
.pill-blue   { background: rgba(79,158,255,.15); border: 1px solid rgba(79,158,255,.4);  color: var(--blue2); }

/* Severity chips */
.sev {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  width: 24px; height: 24px; border-radius: 6px;
  flex-shrink: 0;
}
.sev-1 { background: rgba(255,255,255,.06); color: var(--ink3); border: 1px solid var(--border); }
.sev-2 { background: rgba(242,201,76,.12); color: var(--amber2); border: 1px solid rgba(242,201,76,.35); }
.sev-3 { background: rgba(255,140,0,.14); color: #ffb86c; border: 1px solid rgba(255,140,0,.35); }
.sev-4 { background: rgba(233,20,41,.16); color: var(--red2); border: 1px solid rgba(233,20,41,.4); }

/* Definition box */
.def-box {
  background: var(--bg4); border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 6px; padding: 20px 24px; margin-bottom: 16px;
}
.def-text {
  font-family: 'Inter', sans-serif;
  font-size: 18px; font-weight: 500;
  font-style: italic;
  line-height: 1.55; color: var(--ink);
}
.def-src { font-size: 11px; color: var(--muted); margin-top: 8px; letter-spacing: .04em; }

/* Inline code */
code.inline {
  font-family: 'JetBrains Mono', monospace;
  font-size: .92em;
  background: rgba(29,185,84,.14);
  color: var(--accent3);
  padding: 1px 6px;
  border-radius: 3px;
}

/* Section-header (numbered block intro) */
.section-header { display: flex; align-items: center; gap: 22px; margin-bottom: 24px; }
.section-num {
  font-family: 'Inter', sans-serif;
  font-size: 90px; font-weight: 800;
  color: var(--accent2); opacity: .2; line-height: 1; flex-shrink: 0;
  letter-spacing: -.04em;
}
.section-info { flex: 1; }
.section-label {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent2); margin-bottom: 6px;
}
.section-title {
  font-family: 'Inter', sans-serif;
  font-size: 32px; font-weight: 700; color: var(--ink); line-height: 1.1;
  letter-spacing: -.015em;
}

/* Capa */
.capa-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 32px; margin-top: 28px;
  padding-top: 22px; border-top: 1px solid var(--border);
}
.meta-row { display: flex; flex-direction: column; gap: 2px; }
.meta-key { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--accent2); }
.meta-val { font-size: 13px; color: var(--ink2); }

/* Summary list */
.summary-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.summary-item { display: flex; gap: 14px; align-items: flex-start; }
.s-idx { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--accent2); flex-shrink: 0; width: 24px; padding-top: 2px; }
.s-title { font-size: 14px; color: var(--ink); font-weight: 600; }
.s-sub   { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* Arrow list */
.arrow-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.arrow-list li {
  font-size: 13px; color: var(--ink2);
  display: flex; gap: 10px; line-height: 1.55;
}
.arrow-list li::before {
  content: '→'; color: var(--accent); flex-shrink: 0; font-weight: 600;
}

/* Bullet list */
.bullet-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.bullet-list li {
  font-size: 13px; color: var(--ink2);
  display: flex; gap: 10px; line-height: 1.5;
}
.bullet-list li::before {
  content: '·'; color: var(--accent); flex-shrink: 0; font-weight: 800; font-size: 18px; line-height: 1;
}

/* Key quote */
.key-quote {
  font-family: 'Inter', sans-serif;
  font-size: 28px; font-style: italic; font-weight: 500;
  line-height: 1.3; color: var(--ink);
  padding: 14px 0;
  max-width: 760px;
  letter-spacing: -.01em;
}
.key-quote .hl { color: var(--accent2); font-style: normal; font-weight: 700; }

/* Big stat */
.big-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 20px;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.big-stat .num {
  font-family: 'Inter', sans-serif;
  font-size: 64px; font-weight: 800;
  line-height: 1;
  color: var(--accent2);
  letter-spacing: -.04em;
}
.big-stat .num .unit { font-size: 28px; color: var(--accent3); margin-left: 4px; }
.big-stat .stat-label {
  font-size: 11px; color: var(--ink3);
  text-align: center; margin-top: 8px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
}

/* Heuristic card (10 Nielsen) */
.h-card {
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
}
.h-card.violated {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--bg4) 0%, rgba(29,185,84,.08) 100%);
}
.h-card.violated::after {
  content: ''; position: absolute; right: -8px; top: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); opacity: .25;
}
.h-card .h-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700;
  color: var(--accent2); letter-spacing: .08em;
}
.h-card .h-name {
  font-size: 12px; font-weight: 700; color: var(--ink);
  line-height: 1.25;
}
.h-card .h-desc {
  font-size: 10.5px; color: var(--ink3); line-height: 1.4;
}

/* Problem block (one issue per slide) */
.problem-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 10px;
}
.problem-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  color: var(--accent2); letter-spacing: .08em;
}
.problem-meta {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
/* In problem-head context, make the severity chip more prominent
   (auto-width pill with "Sev." prefix, bigger font) */
.problem-meta .sev {
  width: auto;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  gap: 5px;
}
.problem-meta .sev::before {
  content: 'SEV.';
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  opacity: .75;
}

.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
.problem-cell {
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px;
}
.problem-cell.bad  { border-left: 3px solid var(--red); }
.problem-cell.good { border-left: 3px solid var(--accent); }
.problem-cell .pc-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; margin-bottom: 6px;
}
.problem-cell.bad  .pc-label { color: var(--red2); }
.problem-cell.good .pc-label { color: var(--accent2); }
.problem-cell .pc-text { font-size: 13px; line-height: 1.55; color: var(--ink2); }

/* Compact problem row (used in overview slides) */
.p-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: 8px;
}
.p-row .p-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; color: var(--accent2);
  letter-spacing: .04em;
}
.p-row .p-text {
  font-size: 12.5px; color: var(--ink); line-height: 1.4;
}
.p-row .p-text .p-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--muted); margin-left: 6px;
}
.p-row .p-meta { display: flex; gap: 6px; align-items: center; }

/* Bar chart (for heuristic ranking) */
.bar-chart { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 200px 1fr 28px; gap: 12px; align-items: center; }
.bar-row .bar-label {
  font-size: 12px; color: var(--ink2); font-weight: 500;
}
.bar-row .bar-label .bar-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--accent2); margin-right: 6px; font-weight: 700;
}
.bar-track {
  height: 10px; border-radius: 5px;
  background: rgba(255,255,255,.05);
  position: relative; overflow: hidden;
}
.bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 5px;
  transition: width .8s cubic-bezier(.2,.8,.2,1);
}
.bar-fill.warn { background: linear-gradient(90deg, #d97706, var(--amber)); }
.bar-fill.muted { background: rgba(255,255,255,.18); }
.bar-row .bar-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; color: var(--ink);
  text-align: right;
}

/* Severity bars (4-3-2-1) */
.sev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sev-card {
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 14px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.sev-card .sev-cap {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
}
.sev-card .sev-num {
  font-family: 'Inter', sans-serif;
  font-size: 44px; font-weight: 800; line-height: 1;
  letter-spacing: -.04em;
}
.sev-card .sev-label {
  font-size: 11px; color: var(--ink3); line-height: 1.4;
}
.sev-card.s4 { border-left: 3px solid var(--red); }
.sev-card.s4 .sev-cap, .sev-card.s4 .sev-num { color: var(--red2); }
.sev-card.s3 { border-left: 3px solid #ff8c00; }
.sev-card.s3 .sev-cap, .sev-card.s3 .sev-num { color: #ffb86c; }
.sev-card.s2 { border-left: 3px solid var(--amber); }
.sev-card.s2 .sev-cap, .sev-card.s2 .sev-num { color: var(--amber2); }
.sev-card.s1 { border-left: 3px solid var(--ink3); }
.sev-card.s1 .sev-cap, .sev-card.s1 .sev-num { color: var(--ink3); }

/* Avatar / evaluator chip */
.evaluators { display: flex; gap: 10px; flex-wrap: wrap; }
.evaluator {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 12px 6px 6px;
  font-size: 12px; color: var(--ink);
}
.evaluator .avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #000; font-weight: 800; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.evaluator .e-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--ink3); margin-left: 4px;
}

/* Step reveal */
.step {
  transition: opacity .28s ease, background-color .28s ease;
  border-radius: 4px;
  padding: 0 3px;
}
.step.dim    { opacity: .3; }
.step.active {
  background-color: rgba(29,185,84,.18);
  opacity: 1;
}
.step-indicator {
  position: absolute;
  bottom: 18px; left: 56px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink3);
  background: rgba(0,0,0,.65);
  padding: 5px 11px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  z-index: 60;
}
.step-indicator kbd {
  font-family: 'JetBrains Mono', monospace;
  background: rgba(255,255,255,.1);
  color: var(--accent3);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9.5px;
  margin: 0 2px;
}

/* Floating TOC */
.toc-toggle {
  position: fixed; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: white; cursor: pointer; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.toc-toggle:hover, .toc-toggle.open {
  background: rgba(29,185,84,.22);
  border-color: var(--accent);
}
.toc-toggle svg { width: 18px; height: 18px; stroke: currentColor; }

.toc-panel {
  position: fixed; top: 70px; right: 18px;
  width: 320px; max-height: 75vh; overflow: auto;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 12px; padding: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
  opacity: 0; pointer-events: none;
  transform: translateY(-8px) scale(.97);
  transition: opacity .2s, transform .2s;
  z-index: 200;
}
.toc-panel.open {
  opacity: 1; pointer-events: auto;
  transform: translateY(0) scale(1);
}
.toc-panel h4 {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--accent2);
  margin-bottom: 10px;
}
.toc-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.toc-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px; color: var(--ink2);
  transition: background .15s;
  border: 1px solid transparent;
}
.toc-item:hover { background: rgba(255,255,255,.05); }
.toc-item.active {
  background: rgba(29,185,84,.12);
  border-color: rgba(29,185,84,.3);
  color: var(--ink);
}
.toc-item .toc-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--muted); flex-shrink: 0; width: 22px;
}
.toc-item.active .toc-num { color: var(--accent2); }

/* Highlight word (for emphasis) */
.hl       { color: var(--accent2); font-weight: 600; }
.hl-red   { color: var(--red2); font-weight: 600; }
.hl-amber { color: var(--amber2); font-weight: 600; }
em.it { color: var(--accent3); font-style: normal; }

/* Spotify-ish play button decoration */
.play-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #000;
  font-size: 12px; flex-shrink: 0;
}
.play-icon::before {
  content: '▶'; transform: translateX(1px);
}

/* Phone mockup (used in problem visuals) */
.phone {
  width: 200px; height: 380px;
  background: var(--bg4);
  border: 2px solid var(--border2);
  border-radius: 24px;
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.phone::before {
  content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.15);
}
.phone-bar {
  background: var(--bg5);
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 9px;
  color: var(--ink3);
  display: flex; align-items: center; gap: 6px;
}
.phone-bar.search { background: var(--bg6); }
.phone-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0;
  font-size: 8px;
  color: var(--ink2);
}
.phone-thumb {
  width: 22px; height: 22px; border-radius: 3px;
  background: linear-gradient(135deg, #444, #2a2a2a);
  flex-shrink: 0;
}
.phone-thumb.circle { border-radius: 50%; }
.phone-thumb.green { background: linear-gradient(135deg, var(--accent), var(--accent4)); }
.phone-thumb.amber { background: linear-gradient(135deg, var(--amber), #b97a06); }
.phone-thumb.red   { background: linear-gradient(135deg, var(--red), #6b0915); }
.phone-thumb.blue  { background: linear-gradient(135deg, var(--blue), #1a4a8a); }
.phone-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.phone-title { font-size: 8px; color: var(--ink); font-weight: 600; }
.phone-sub { font-size: 7px; color: var(--muted); }
.phone-tag {
  font-size: 6.5px;
  padding: 1px 4px; border-radius: 3px;
  background: rgba(255,255,255,.06); color: var(--ink3);
  margin-left: 4px;
}

/* Highlight overlay for problem zones */
.phone .hl-zone {
  outline: 1.5px dashed var(--red);
  background: rgba(233,20,41,.06);
  border-radius: 6px;
}
.phone .hl-zone-good {
  outline: 1.5px dashed var(--accent);
  background: rgba(29,185,84,.08);
  border-radius: 6px;
}

/* Annotation arrow / callout */
.callout {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; line-height: 1.45;
  color: var(--red2);
  padding: 6px 10px;
  background: rgba(233,20,41,.08);
  border: 1px dashed rgba(233,20,41,.4);
  border-radius: 6px;
}
.callout.good {
  color: var(--accent2);
  background: rgba(29,185,84,.08);
  border-color: rgba(29,185,84,.4);
}

/* Quote attribution */
.attr {
  font-size: 11px; color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .04em;
  margin-top: 8px;
}

/* Solution callout */
.solution-box {
  background: linear-gradient(135deg, rgba(29,185,84,.08), rgba(29,185,84,.02));
  border: 1px solid rgba(29,185,84,.3);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; gap: 12px; align-items: flex-start;
}
.solution-box .solution-icon {
  font-size: 16px; color: var(--accent2); flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(29,185,84,.12);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.solution-box .solution-text {
  font-size: 12.5px; line-height: 1.55; color: var(--ink2);
}
.solution-box .solution-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--accent2); margin-bottom: 3px;
  display: block;
}

/* Diff-like before/after compact */
.ba {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 10px;
}
.ba-side {
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.ba-side.bad  { border-left: 3px solid var(--red); }
.ba-side.good { border-left: 3px solid var(--accent); }
.ba-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
}
.ba-side.bad .ba-tag  { color: var(--red2); }
.ba-side.good .ba-tag { color: var(--accent2); }

/* ════════════════════════════════════════════════════════════════════
   LIGHT THEME — adjusts variables and overrides hardcoded white rgba()
   ════════════════════════════════════════════════════════════════════ */
html[data-theme='light'] {
  --bg:  #ffffff;
  --bg2: #fafafa;
  --bg3: #f4f4f4;
  --bg4: #ffffff;
  --bg5: #ededed;
  --bg6: #e0e0e0;

  --ink:  #0a0a0a;
  --ink2: #2a2a2a;
  --ink3: #4a4a4a;
  --muted:#6a6a6a;
  --border:  #d4d4d4;
  --border2: #b0b0b0;

  /* Spotify green is hard to read on white — darken for body slides.
     Wrapped/Now Playing keep their hardcoded vibrant gradients. */
  --accent:  #14803d;
  --accent2: #14803d;
  --accent3: #166534;
  --accent4: #14532d;

  --red:    #c81e2c;
  --red2:   #c81e2c;
  --amber:  #b15c00;
  --amber2: #b15c00;
  --blue:   #2563eb;
  --blue2:  #2563eb;
}
html[data-theme='light'] body { background: #ececec; }
html[data-theme='light'] .slide { box-shadow: 0 24px 70px rgba(0,0,0,.16), 0 4px 12px rgba(0,0,0,.06); }
html[data-theme='light'] .slide-tag { color: var(--accent); }
html[data-theme='light'] .corner-num { opacity: .07; }

/* Hardcoded rgba(255,255,255,.X) elements that vanish on white */
html[data-theme='light'] .pill-muted {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.12);
  color: var(--ink2);
}
html[data-theme='light'] .sev-1 {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.12);
  color: var(--ink3);
}
html[data-theme='light'] .bar-track { background: rgba(0,0,0,.07); }
html[data-theme='light'] .bar-fill        { background: linear-gradient(90deg, #14803d, #16a34a); }
html[data-theme='light'] .bar-fill.warn   { background: linear-gradient(90deg, #b15c00, #ea7c00); }
html[data-theme='light'] .bar-fill.muted  { background: rgba(0,0,0,.22); }

html[data-theme='light'] .step.active     { background-color: rgba(20,128,61,.16); }
html[data-theme='light'] .step-indicator {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.1);
  color: var(--ink3);
}
html[data-theme='light'] .step-kbd-btn:hover { background: rgba(0,0,0,.08); }
html[data-theme='light'] .step-note {
  background: linear-gradient(135deg, var(--bg2), var(--bg4));
  border-color: var(--border);
}

html[data-theme='light'] .toc-item:hover  { background: rgba(0,0,0,.05); }
html[data-theme='light'] .toc-item.active {
  background: rgba(20,128,61,.1);
  border-color: rgba(20,128,61,.35);
  color: var(--ink);
}
html[data-theme='light'] .toc-panel {
  background: var(--bg2);
  border-color: var(--border2);
}

html[data-theme='light'] .h-card.violated {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--bg4) 0%, rgba(20,128,61,.08) 100%);
}
html[data-theme='light'] .h-card.violated::after { background: var(--accent); }

/* Story bar: white bars vanish on white slides */
html[data-theme='light'] .story-seg          { background: rgba(0,0,0,.18); }
html[data-theme='light'] .story-seg::after   { background: rgba(0,0,0,.85); }
html[data-theme='light'] .story-seg.curr::after { background: #0a0a0a; box-shadow: 0 0 8px rgba(0,0,0,.25); }

/* Phone mockup represents the actual Spotify app — keep it dark in any theme */
html[data-theme='light'] .phone {
  background: #181818;
  border-color: #2a2a2a;
  color: #fff;
}
html[data-theme='light'] .phone::before    { background: rgba(255,255,255,.15); }
html[data-theme='light'] .phone-bar        { background: #1f1f1f; color: rgba(255,255,255,.7); }
html[data-theme='light'] .phone-bar.search { background: #2a2a2a; }
html[data-theme='light'] .phone-row        { color: rgba(255,255,255,.85); }
html[data-theme='light'] .phone-title      { color: #fff; }
html[data-theme='light'] .phone-sub        { color: rgba(255,255,255,.55); }
html[data-theme='light'] .phone-tag        { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }

/* Code inline: tweak for white bg readability */
html[data-theme='light'] code.inline {
  background: rgba(20,128,61,.1);
  color: var(--accent);
}

/* Definition box and big-stat tweaks */
html[data-theme='light'] .def-box {
  background: var(--bg2);
  border-color: var(--border);
}
html[data-theme='light'] .big-stat {
  background: var(--bg2);
  border-color: var(--border);
}

/* Card defaults already use vars — but ensure outline cards are visible */
html[data-theme='light'] .card {
  background: var(--bg);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

/* Wrapped slides keep their dark/vibrant gradients regardless of theme.
   Their internal `.wrapped-card` uses rgba(0,0,0,.18) bg — already correct. */

.theme-toggle {
  position: fixed; top: 18px; right: 70px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: white; cursor: pointer; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.theme-toggle:hover { background: rgba(29,185,84,.22); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

html[data-theme='light'] #counter { color: rgba(0,0,0,.4); }
html[data-theme='light'] .nav-btn,
html[data-theme='light'] .toc-toggle,
html[data-theme='light'] .theme-toggle {
  background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); color: #333;
}

/* ════════════════════════════════════════════════════════════════════
   STORY PROGRESS BAR (Instagram/Wrapped style)
   ════════════════════════════════════════════════════════════════════ */
.story-bar {
  position: absolute;
  top: 12px; left: 16px; right: 16px;
  display: flex; gap: 3px;
  z-index: 10;
  pointer-events: none;
}
.story-seg {
  flex: 1;
  height: 2.5px;
  background: rgba(255,255,255,.22);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.story-seg::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(255,255,255,.96);
  width: 0;
  border-radius: 2px;
  transition: width .35s ease;
}
.story-seg.done::after  { width: 100%; }
.story-seg.curr::after  { width: 100%; background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,.4); }
/* Wrapped slides override story-bar to show on dark accent */
.wrapped .story-seg          { background: rgba(0,0,0,.18); }
.wrapped .story-seg::after   { background: rgba(0,0,0,.85); }
.wrapped .story-seg.curr::after { background: #000; box-shadow: 0 0 8px rgba(0,0,0,.3); }

/* ════════════════════════════════════════════════════════════════════
   WRAPPED SLIDES — bold, vibrant, oversized
   .slide already has position:absolute + overflow:hidden — don't override
   ════════════════════════════════════════════════════════════════════ */
.wrapped .slide-inner {
  padding: 60px 56px 44px;
  position: relative;
  z-index: 2;
}
.wrapped .corner-num { color: #000; opacity: .08; }

/* Vibrant Wrapped backgrounds */
.wrapped-bg-pink {
  background: linear-gradient(140deg, #FF1B8D 0%, #6c1bff 60%, #2a0a8a 100%);
  color: #fff;
}
.wrapped-bg-lime {
  background: linear-gradient(140deg, #d4ff44 0%, #1ed760 55%, #07523c 100%);
  color: #0a0a0a;
}
.wrapped-bg-orange {
  background: linear-gradient(140deg, #ff5c00 0%, #ff1b8d 55%, #6c1bff 100%);
  color: #fff;
}
.wrapped-bg-cyan {
  background: linear-gradient(140deg, #00f5d4 0%, #4f9eff 55%, #1a3a8a 100%);
  color: #0a0a0a;
}
.wrapped-bg-yellow {
  background: linear-gradient(140deg, #fff14f 0%, #ffaa00 55%, #ff3d00 100%);
  color: #0a0a0a;
}

/* Decorative blobs for Wrapped slides */
.wrapped-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
  pointer-events: none;
  z-index: 1;
}

/* Eyebrow text for Wrapped */
.wrapped-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 18px;
  color: inherit; opacity: .85;
}

/* Wrapped headline (huge bold) */
.wrapped-headline {
  font-family: 'Inter', sans-serif;
  font-size: 72px; font-weight: 800;
  line-height: .95;
  letter-spacing: -.045em;
  margin-bottom: 12px;
  color: inherit;
  max-width: 780px;
}
.wrapped-headline.italic-accent em {
  font-family: 'Inter', sans-serif;
  font-style: italic; font-weight: 800;
}
.wrapped-sub {
  font-family: 'Inter', sans-serif;
  font-size: 22px; font-weight: 500;
  line-height: 1.3; letter-spacing: -.015em;
  color: inherit; opacity: .9;
  max-width: 660px;
  margin-bottom: 24px;
}

/* Wrapped massive stat */
.wrapped-stat {
  font-family: 'Inter', sans-serif;
  font-size: 220px; font-weight: 800;
  line-height: .85;
  letter-spacing: -.06em;
  color: inherit;
  display: inline-block;
}
.wrapped-stat-sm {
  font-size: 140px; line-height: .85; font-weight: 800;
  letter-spacing: -.05em;
}
.wrapped-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 24px; font-weight: 600;
  line-height: 1.2; letter-spacing: -.015em;
  margin-top: 8px;
  opacity: .92;
}

/* Wrapped transformation arrow */
.wrapped-arrow {
  font-family: 'Inter', sans-serif;
  font-size: 60px; font-weight: 300;
  opacity: .55;
  margin: 0 24px;
  display: inline-block;
  vertical-align: middle;
}

/* Wrapped meta footer (group / course) */
.wrapped-meta {
  position: absolute;
  bottom: 32px; left: 56px; right: 56px;
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600;
  color: inherit; opacity: .85;
  z-index: 3;
}
.wrapped-meta .meta-group {
  display: flex; flex-direction: column; gap: 2px;
}
.wrapped-meta .meta-key {
  opacity: .65; font-size: 9px;
}
.wrapped-meta .meta-val { font-size: 12px; }

/* Wrapped reveal animation (on slide enter) */
.wrapped.active .wrapped-eyebrow,
.wrapped.active .wrapped-headline,
.wrapped.active .wrapped-sub,
.wrapped.active .wrapped-stat,
.wrapped.active .wrapped-stat-label,
.wrapped.active .wrapped-meta,
.wrapped.active .wrapped-grid {
  animation: wrapUp .65s cubic-bezier(.18,.9,.32,1.18) backwards;
}
.wrapped.active .wrapped-eyebrow     { animation-delay: .05s; }
.wrapped.active .wrapped-headline    { animation-delay: .15s; }
.wrapped.active .wrapped-stat        { animation-delay: .2s; }
.wrapped.active .wrapped-stat-label  { animation-delay: .35s; }
.wrapped.active .wrapped-sub         { animation-delay: .4s; }
.wrapped.active .wrapped-grid        { animation-delay: .25s; }
.wrapped.active .wrapped-meta        { animation-delay: .55s; }
.wrapped.active .wrapped-blob {
  animation: blobFloat 14s ease-in-out infinite, blobIn 1.2s ease-out backwards;
}

@keyframes wrapUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blobIn {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: .55; transform: scale(1); }
}
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(20px,-15px) scale(1.05); }
  66%     { transform: translate(-15px,18px) scale(.95); }
}

/* Wrapped grid (for the summary card) */
.wrapped-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
.wrapped-card {
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
  color: inherit;
}
.wrapped-card .wc-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  opacity: .72;
}
.wrapped-card .wc-value {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -.02em;
  margin-top: 2px;
}
.wrapped-card .wc-sub {
  font-size: 13px; opacity: .8; margin-top: 4px; line-height: 1.35;
}
.wrapped-card.span2 { grid-column: 1 / -1; }
.wrapped-card.dark  { background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.08); }

/* Wrapped chip cluster (top heuristics) */
.wrapped-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wrapped-chip {
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.18);
  color: inherit;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.wrapped-chip.lg {
  font-size: 16px; padding: 7px 14px;
}

/* Counter (animated) — used on data-count-to */
.counter { display: inline-block; }

/* When wrapped slide is light-bg, recolor toc/nav buttons for contrast */
.wrapped.wrapped-bg-lime ~ * {} /* placeholder for selector specificity */

}

/* ════════════════════════════════════════════════════════════════════
   NOW PLAYING SLIDE — Spotify app mock
   Stays dark in BOTH themes — represents the actual Spotify app screen.
   ════════════════════════════════════════════════════════════════════ */
.slide.nowplay,
html[data-theme='light'] .slide.nowplay {
  background: linear-gradient(180deg, #1f5c44 0%, #0c2c20 38%, #050d09 78%, #000 100%);
  color: #fff;
}
html[data-theme='light'] .slide.nowplay .story-seg          { background: rgba(255,255,255,.22); }
html[data-theme='light'] .slide.nowplay .story-seg::after   { background: rgba(255,255,255,.96); }
html[data-theme='light'] .slide.nowplay .story-seg.curr::after { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.4); }
html[data-theme='light'] .slide.nowplay .corner-num         { color: #fff; opacity: .06; }
.nowplay .slide-inner {
  padding: 24px 56px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

/* ─── Top bar (down chevron / context / menu) ─── */
.np-topbar {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  margin-bottom: 18px;
  margin-top: 6px;
}
.np-chev, .np-menu {
  font-size: 22px;
  color: rgba(255,255,255,.85);
  font-weight: 300;
  line-height: 1;
}
.np-chev { transform: rotate(0); }
.np-context {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.np-context-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.np-context-name {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px; font-weight: 700;
  color: #fff; letter-spacing: -.005em;
}

/* ─── Main content split: cover ↔ info+controls ─── */
.np-content {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
  flex: 1;
  padding: 4px 0 0;
}

/* ─── Album cover ─── */
.np-cover {
  width: 320px; height: 320px;
  border-radius: 8px;
  background:
    radial-gradient(ellipse 80% 60% at 28% 22%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, #1ed760 0%, #0d6b40 48%, #052218 100%);
  box-shadow:
    0 30px 60px rgba(0,0,0,.55),
    0 6px 18px rgba(29,185,84,.18),
    inset 0 0 0 1px rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 26px 22px 22px;
  flex-shrink: 0;
}
.np-cover::after {
  /* subtle vignette to ground the cover */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 95%, rgba(0,0,0,.45), transparent 55%);
  pointer-events: none;
}
.np-cover-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 800;
  letter-spacing: .18em;
  color: rgba(0,0,0,.65);
  align-self: flex-start;
  position: relative; z-index: 2;
}
.np-cover-spacer { flex: 1; }
.np-cover-title {
  font-family: 'Inter', sans-serif;
  font-size: 56px; font-weight: 800;
  line-height: .9; letter-spacing: -.04em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.32);
  position: relative; z-index: 2;
}
.np-cover-title em {
  font-style: italic; font-weight: 800;
  color: #d6ffe5;
}
.np-cover-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-top: 10px;
  position: relative; z-index: 2;
}

/* ─── Right column: info + controls ─── */
.np-info {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
}
.np-track-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px;
}
.np-track-meta { min-width: 0; flex: 1; }
.np-track-title {
  font-family: 'Inter', sans-serif;
  font-size: 28px; font-weight: 800;
  line-height: 1.04; letter-spacing: -.022em;
  color: #fff;
  margin-bottom: 5px;
}
.np-track-artist {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  font-weight: 500;
  line-height: 1.4;
}
.np-actions {
  display: flex; gap: 14px; flex-shrink: 0;
  padding-top: 6px;
}
.np-actions span {
  font-size: 22px;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  line-height: 1;
}

/* Heart icon — outlined → filled green with bounce */
.np-heart {
  display: inline-block;
  transform-origin: center center;
  transition: color .35s ease;
}
.np-heart::before { content: '♡'; }
.np-heart.liked {
  color: var(--accent);
  animation: heart-burst .55s cubic-bezier(.36,1.6,.42,1.4);
}
.np-heart.liked::before { content: '♥'; }
@keyframes heart-burst {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.55); }
  60%  { transform: scale(.92); }
  100% { transform: scale(1.05); }
}

/* ─── Progress bar ─── */
.np-progress { display: flex; flex-direction: column; gap: 6px; }
.np-progress-track {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,.22);
  border-radius: 2px;
}
.np-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: #fff;
  border-radius: 2px;
  /* 3.8% = 0:08 / 3:30 — JS keeps this in sync. */
  width: 3.8%;
  transition: width 0s linear, background-color .3s ease;
}
.np-progress-thumb {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  left: 3.8%;
  transition: left 0s linear, background-color .3s ease;
}
/* When playing: visual hint that the bar is now active (turns green).
   Width / position is animated by JS at real-time pace, not by CSS. */
.nowplay.playing .np-progress-fill,
.nowplay.playing .np-progress-thumb {
  background: var(--accent2);
}
.np-progress-time {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 600;
  color: rgba(255,255,255,.65);
}

/* ─── Controls ─── */
.np-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 26px;
  margin-top: 4px;
}
.np-ctrl {
  font-size: 19px;
  color: rgba(255,255,255,.78);
  cursor: pointer;
  line-height: 1;
  transition: color .15s;
}
.np-ctrl:hover { color: #fff; }
.np-ctrl.np-shuffle { color: var(--accent2); }
.np-play {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: transform .2s, box-shadow .2s, background-color .25s ease;
  cursor: pointer;
}
.np-play:hover {
  transform: scale(1.08);
  color: #000;
  box-shadow: 0 6px 22px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.1);
}
.np-play.playing:hover {
  transform: scale(1.08);
  color: #000;
  box-shadow: 0 6px 22px rgba(29,185,84,.5), 0 0 0 4px rgba(29,185,84,.18);
}
.np-play::before {
  content: '▶'; transform: translateX(1px);
  transition: transform .15s ease;
}
.np-play.playing {
  background: var(--accent);
}
.np-play.playing::before {
  content: '⏸'; transform: translateX(0);
}

/* ─── Bottom secondary actions row (lyrics / queue / device) ─── */
.np-secondary {
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255,255,255,.55);
}
.np-device {
  display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent2); font-weight: 700;
}
.np-device::before {
  content: '●'; color: var(--accent);
  font-size: 8px;
  animation: np-blink 1.6s ease-in-out infinite;
}
@keyframes np-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ─── Active animations ─── */
.nowplay.active .np-cover {
  animation: np-cover-in .9s cubic-bezier(.18,.9,.32,1.18) backwards;
  animation-delay: .1s;
}
.nowplay.active .np-topbar {
  animation: np-info-up .55s ease-out backwards;
  animation-delay: .05s;
}
.nowplay.active .np-track-row,
.nowplay.active .np-progress,
.nowplay.active .np-controls,
.nowplay.active .np-secondary {
  animation: np-info-up .55s ease-out backwards;
}
.nowplay.active .np-track-row { animation-delay: .25s; }
.nowplay.active .np-progress  { animation-delay: .35s; }
.nowplay.active .np-controls  { animation-delay: .45s; }
.nowplay.active .np-secondary { animation-delay: .55s; }
.nowplay.active .np-play {
  animation: np-info-up .55s ease-out backwards .45s, np-play-pulse 2.6s ease-in-out 1.6s infinite;
}
.nowplay.active.playing .np-play {
  animation: none;
}

@keyframes np-cover-in {
  from { opacity: 0; transform: translateY(20px) scale(.93); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes np-info-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes np-play-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 22px 6px rgba(255,255,255,.18); }
}

/* ─── Animated cursor (cinematic guide to heart icon) ─── */
.np-cursor {
  position: absolute;
  width: 24px; height: 24px;
  pointer-events: none;
  opacity: 0;
  z-index: 50;
  transform: translate(-2px, -2px);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
.np-cursor svg { display: block; }
.np-cursor::after {
  content: '';
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  top: -3px; left: -3px;
  opacity: 0;
  transform: scale(.3);
  pointer-events: none;
}
.np-cursor.clicking::after {
  animation: cursor-ring .55s ease-out;
}
@keyframes cursor-ring {
  0%   { opacity: .85; transform: scale(.3); }
  100% { opacity: 0;   transform: scale(2.4); }
}
.np-cursor.clicking svg {
  animation: cursor-tap .25s ease-in-out;
}
@keyframes cursor-tap {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(.78); }
}

/* Subtle vinyl-spin animation hint on cover (very slow) */
.nowplay.active .np-cover::before {
  content: '';
  position: absolute;
  width: 60px; height: 60px;
  border-radius: 50%;
  bottom: 16px; right: 16px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.22), transparent 60%);
  animation: np-pulse 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes np-pulse {
  0%,100% { transform: scale(1); opacity: .55; }
  50%     { transform: scale(1.18); opacity: .82; }
}

/* ════════════════════════════════════════════════════════════════════
   NOW PLAYING — INTRO VARIANT (block first-page)
   Compact cover · track info · controls · "Sobre a faixa" panel below.
   ════════════════════════════════════════════════════════════════════ */
.nowplay.nowplay-intro .slide-inner {
  padding: 26px 56px 56px;
  justify-content: flex-start;
}
.nowplay.nowplay-intro .np-content {
  grid-template-columns: 156px 1fr;
  gap: 24px;
  align-items: center;
  flex: 0 0 auto;
  margin-bottom: 18px;
}
.nowplay.nowplay-intro .np-cover {
  width: 156px; height: 156px;
  padding: 0;
  /* Image fills the cover; remove the inner gradient/text styling */
  background: #0f1812;
}
.nowplay.nowplay-intro .np-cover::after { display: none; }
.nowplay.nowplay-intro .np-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.nowplay.nowplay-intro .np-track-title { font-size: 24px; line-height: 1.05; }
.nowplay.nowplay-intro .np-track-artist { font-size: 13px; }
.nowplay.nowplay-intro .np-info { gap: 12px; }
.nowplay.nowplay-intro .np-controls { gap: 22px; margin-top: 2px; }
.nowplay.nowplay-intro .np-play { width: 48px; height: 48px; font-size: 14px; }
.nowplay.nowplay-intro .np-secondary { display: none; }

/* About panel (Spotify-style "Sobre a faixa") */
.np-about {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 18px;
  margin-top: 6px;
}
.np-about-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 12px;
}
.np-about-quote {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 6px;
  max-width: 760px;
}
.np-about-attr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 16px;
}
.np-about-points { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.np-about-points li {
  font-size: 13px;
  color: rgba(255,255,255,.85);
  line-height: 1.5;
  display: flex; gap: 10px;
}
.np-about-points li::before {
  content: '→';
  color: var(--accent2);
  flex-shrink: 0;
  font-weight: 700;
}
.np-about-points li strong { color: #fff; font-weight: 700; }

.nowplay.nowplay-intro.active .np-about {
  animation: np-info-up .55s ease-out backwards .55s;
}

/* ════════════════════════════════════════════════════════════════════
   PLAYLIST SLIDE — Spotify playlist screen mock
   Stays dark in any theme.
   ════════════════════════════════════════════════════════════════════ */
.slide.playlist-slide,
html[data-theme='light'] .slide.playlist-slide {
  background: linear-gradient(180deg, #2a4a3a 0%, #142319 28%, #0a0a0a 78%, #000 100%);
  color: #fff;
}
html[data-theme='light'] .slide.playlist-slide .story-seg          { background: rgba(255,255,255,.22); }
html[data-theme='light'] .slide.playlist-slide .story-seg::after   { background: rgba(255,255,255,.96); }
html[data-theme='light'] .slide.playlist-slide .story-seg.curr::after { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.4); }
html[data-theme='light'] .slide.playlist-slide .corner-num         { color: #fff; opacity: .06; }

.playlist-slide .slide-inner { padding: 30px 56px 60px; }

.pl-header {
  display: grid;
  grid-template-columns: 152px 1fr;
  gap: 24px;
  align-items: flex-end;
  margin-bottom: 18px;
}
.pl-cover {
  width: 152px; height: 152px;
  border-radius: 6px;
  background:
    radial-gradient(ellipse 80% 60% at 28% 22%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, #1ed760 0%, #0d6b40 50%, #052218 100%);
  box-shadow:
    0 18px 40px rgba(0,0,0,.55),
    0 4px 12px rgba(29,185,84,.18),
    inset 0 0 0 1px rgba(255,255,255,.08);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.pl-cover-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; font-weight: 800;
  letter-spacing: .14em;
  color: rgba(0,0,0,.6);
  position: relative; z-index: 2;
}
.pl-cover-title {
  font-family: 'Inter', sans-serif;
  font-size: 26px; font-weight: 800;
  line-height: .9;
  letter-spacing: -.035em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
  position: relative; z-index: 2;
}
.pl-cover-title em { font-style: italic; color: #d6ffe5; }

/* When .pl-cover contains an image, let it fill the whole cover */
.pl-cover.has-image { padding: 0; }
.pl-cover.has-image > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  position: relative; z-index: 2;
}

.pl-info { padding-bottom: 6px; min-width: 0; }
.pl-type {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.pl-title {
  font-family: 'Inter', sans-serif;
  font-size: 56px; font-weight: 800;
  line-height: .98;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: 12px;
}
.pl-desc {
  font-size: 13px;
  color: rgba(255,255,255,.72);
  line-height: 1.4;
  margin-bottom: 10px;
  max-width: 580px;
}
.pl-meta {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  display: flex; flex-wrap: wrap; gap: 4px;
  align-items: center;
}
.pl-meta strong { color: #fff; font-weight: 700; }
.pl-meta .pl-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,.55);
  display: inline-block;
}

.pl-actions {
  display: flex; gap: 18px; align-items: center;
  margin-bottom: 14px;
}
.pl-play-big {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
  transition: transform .2s, background-color .2s;
  flex-shrink: 0;
}
.pl-play-big::before { content: '▶'; transform: translateX(1px); }
.pl-play-big:hover {
  transform: scale(1.06);
  background: var(--accent2);
  color: #000;
}
.pl-actions .pl-icon {
  font-size: 22px;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  transition: color .15s;
}
.pl-actions .pl-icon:hover { color: #fff; }

/* Tracklist wrapper holds header (fixed) + scrollable rows.
   The fade gradient at bottom hints visually that there is more below. */
.pl-tracklist {
  display: flex; flex-direction: column;
  min-height: 0; flex: 1;
  position: relative;
}
.pl-tracklist::after {
  content: '';
  position: absolute;
  left: 0; right: 14px;  /* leave room for the visible scrollbar */
  bottom: 0;
  height: 40px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55) 65%, rgba(0,0,0,.85));
  pointer-events: none;
  border-radius: 0 0 6px 6px;
  z-index: 2;
}
.pl-tracks {
  display: flex; flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  /* Fill remaining vertical space; scroll if content exceeds */
  flex: 1;
  min-height: 0;
  padding-right: 4px;
  padding-bottom: 32px;
  /* Firefox scrollbar — auto width + visible track */
  scrollbar-width: auto;
  scrollbar-color: rgba(255,255,255,.5) rgba(255,255,255,.08);
  scroll-behavior: smooth;
}
/* WebKit scrollbar — thicker + more opaque so it's clearly visible */
.pl-tracks::-webkit-scrollbar { width: 10px; }
.pl-tracks::-webkit-scrollbar-track {
  background: rgba(255,255,255,.06);
  border-radius: 5px;
}
.pl-tracks::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.4);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.pl-tracks::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.6);
  background-clip: padding-box;
}

.pl-track-header {
  display: grid;
  grid-template-columns: 28px 1fr 56px;
  gap: 16px;
  padding: 6px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 4px;
  flex-shrink: 0;
}
.pl-track-header .pl-h-num { text-align: center; }
.pl-track-header .pl-h-dur { text-align: right; }

.pl-track {
  display: grid;
  grid-template-columns: 28px 1fr 56px;
  gap: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s;
  align-items: center;
  min-height: 40px;
}
.pl-track:hover { background: rgba(255,255,255,.07); }
.pl-track.active {
  background: rgba(29,185,84,.12);
  background-color: rgba(29,185,84,.12);  /* override .step.active bg */
  box-shadow: inset 2px 0 0 var(--accent);
}
.pl-track.active .pl-track-title { color: var(--accent2); }
.pl-track.active .pl-track-num   { color: var(--accent2); opacity: 1; }
/* Step infrastructure pads + dims; we override both for tracks */
.pl-track.step      { padding: 6px 12px; }
.pl-track.step.dim  { opacity: 1; }

.pl-track-num-cell {
  display: flex; align-items: center; justify-content: center;
}
.pl-track-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.55);
}
.pl-track:hover .pl-track-num { color: #fff; }

.pl-track-meta { min-width: 0; }
.pl-track-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-track-subtitle {
  font-size: 11.5px;
  color: rgba(255,255,255,.55);
  margin-top: 1px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-track-duration {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  text-align: right;
  font-weight: 500;
}

.playlist-slide.active .pl-header,
.playlist-slide.active .pl-actions,
.playlist-slide.active .pl-tracks {
  animation: pl-rise .55s cubic-bezier(.18,.9,.32,1.18) backwards;
}
.playlist-slide.active .pl-header  { animation-delay: .08s; }
.playlist-slide.active .pl-actions { animation-delay: .22s; }
.playlist-slide.active .pl-tracks  { animation-delay: .35s; }
.playlist-slide.active .pl-track {
  animation: pl-rise .35s ease-out backwards;
}
.playlist-slide.active .pl-tracks .pl-track:nth-of-type(2) { animation-delay: .42s; }
.playlist-slide.active .pl-tracks .pl-track:nth-of-type(3) { animation-delay: .47s; }
.playlist-slide.active .pl-tracks .pl-track:nth-of-type(4) { animation-delay: .52s; }
.playlist-slide.active .pl-tracks .pl-track:nth-of-type(5) { animation-delay: .57s; }
.playlist-slide.active .pl-tracks .pl-track:nth-of-type(6) { animation-delay: .62s; }
.playlist-slide.active .pl-tracks .pl-track:nth-of-type(7) { animation-delay: .67s; }
.playlist-slide.active .pl-tracks .pl-track:nth-of-type(8) { animation-delay: .72s; }
.playlist-slide.active .pl-tracks .pl-track:nth-of-type(9) { animation-delay: .77s; }

@keyframes pl-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════
   WRAPPED INTRO — Spotify Wrapped-style block first-page
   Bold violet bg · rotated decor number · striped frame on photo ·
   two ranked lists · big bottom stat · footer branding.
   ════════════════════════════════════════════════════════════════════ */
.slide.wrapped-intro,
html[data-theme='light'] .slide.wrapped-intro {
  background: linear-gradient(155deg, #a07cff 0%, #7c4cf5 35%, #5e3bff 70%, #3a1ec0 100%);
  color: #fff;
  overflow: hidden;
}
html[data-theme='light'] .slide.wrapped-intro .story-seg          { background: rgba(0,0,0,.22); }
html[data-theme='light'] .slide.wrapped-intro .story-seg::after   { background: rgba(0,0,0,.96); }
html[data-theme='light'] .slide.wrapped-intro .story-seg.curr::after { background: #000; box-shadow: 0 0 8px rgba(0,0,0,.3); }
html[data-theme='light'] .slide.wrapped-intro .corner-num         { color: #fff; opacity: .08; }
.wrapped-intro .corner-num { color: #fff; opacity: .1; }

.wrapped-intro .slide-inner {
  padding: 36px 56px 52px;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
}

/* Decorative giant year/track number — vertical, outlined */
.wri-decor {
  position: absolute;
  top: 30px;
  left: 24px;
  writing-mode: vertical-rl;
  font-family: 'Inter', sans-serif;
  font-size: 120px; font-weight: 900;
  line-height: .94;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 2.5px rgba(255,255,255,.95);
  pointer-events: none;
  z-index: 1;
  user-select: none;
}

/* Header row: title (left) + photo (right) */
.wri-header {
  display: grid;
  grid-template-columns: 1fr 232px;
  gap: 28px;
  align-items: end;
  position: relative;
  z-index: 2;
  padding-left: 96px; /* leave room for rotated decor */
}

.wri-header-text {
  display: flex; flex-direction: column;
  align-self: end;
  padding-bottom: 6px;
}
.wri-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-bottom: 12px;
}
.wri-title {
  font-family: 'Inter', sans-serif;
  font-size: 50px; font-weight: 900;
  line-height: .95;
  letter-spacing: -.04em;
  color: #fff;
  margin-bottom: 10px;
}
.wri-subtitle {
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.85);
  line-height: 1.4;
  max-width: 520px;
}

/* Striped frame around photo */
.wri-photo {
  width: 232px; height: 232px;
  position: relative;
  border-radius: 4px;
  /* Diagonal stripes around the photo (Wrapped-style) */
  background: repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px);
  padding: 14px;
  box-shadow: 0 24px 50px rgba(0,0,0,.35);
}
.wri-photo-inner {
  width: 100%; height: 100%;
  border-radius: 2px;
  overflow: hidden;
  background: #1a1a1a;
}
.wri-photo-inner img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Two-column stat lists */
.wri-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding-left: 96px;
  margin-top: 4px;
  z-index: 2;
}
.wri-stat-block { display: flex; flex-direction: column; }
.wri-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -.005em;
}
.wri-stat-block ol {
  list-style: none; counter-reset: wrii;
  padding: 0; margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px; line-height: 1.5;
  color: rgba(255,255,255,.95);
  font-weight: 600;
}
.wri-stat-block ol li {
  counter-increment: wrii;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 6px;
  margin-bottom: 2px;
}
.wri-stat-block ol li::before {
  content: counter(wrii);
  color: #fff;
  font-weight: 800;
}

/* Big bottom stat */
.wri-bigstat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding-left: 96px;
  align-self: end;
  z-index: 2;
}
.wri-bigstat-block { display: flex; flex-direction: column; }
.wri-bigstat-label {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.85);
  margin-bottom: 4px;
}
.wri-bigstat-value {
  font-family: 'Inter', sans-serif;
  font-size: 36px; font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  color: #fff;
}

/* Footer branding */
.wri-brand {
  position: absolute;
  bottom: 18px;
  left: 56px; right: 56px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  z-index: 3;
}
.wri-brand-logo {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #1ed760;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  color: #000;
  font-weight: 900;
}

/* Reveal animations */
.wrapped-intro.active .wri-decor,
.wrapped-intro.active .wri-photo,
.wrapped-intro.active .wri-header-text,
.wrapped-intro.active .wri-stats,
.wrapped-intro.active .wri-bigstat,
.wrapped-intro.active .wri-brand {
  animation: wri-rise .6s cubic-bezier(.18,.9,.32,1.18) backwards;
}
.wrapped-intro.active .wri-decor       { animation-delay: .05s; }
.wrapped-intro.active .wri-photo       { animation-delay: .15s; }
.wrapped-intro.active .wri-header-text { animation-delay: .25s; }
.wrapped-intro.active .wri-stats       { animation-delay: .40s; }
.wrapped-intro.active .wri-bigstat     { animation-delay: .55s; }
.wrapped-intro.active .wri-brand       { animation-delay: .65s; }

@keyframes wri-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════
   MINI-STAT CARDS — Wrapped-style stat tiles on dark slides
   3 vibrant gradient cards (pink / cyan / lime). Used on content slides
   where we want individual stats to "pop" without going full Wrapped.
   ════════════════════════════════════════════════════════════════════ */
.mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 4px;
  margin-bottom: 16px;
}
.mini-stat-card {
  border-radius: 12px;
  padding: 16px 18px 14px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 150px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.12);
}
.mini-stat-card::before {
  /* radial highlight for a subtle "album art" feel */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 22% 12%, rgba(255,255,255,.22), transparent 55%);
  pointer-events: none;
}

.mini-stat-card.pink {
  background: linear-gradient(140deg, #ff5cce 0%, #ff1b8d 55%, #b40060 100%);
  color: #fff;
}
.mini-stat-card.cyan {
  background: linear-gradient(140deg, #6effff 0%, #00d4ff 50%, #006fb6 100%);
  color: #03132c;
}
.mini-stat-card.lime {
  background: linear-gradient(140deg, #d4ff44 0%, #1ed760 55%, #07523c 100%);
  color: #061a0d;
}
.mini-stat-card.amber {
  background: linear-gradient(140deg, #fbbf24 0%, #f97316 55%, #c2410c 100%);
  color: #1a0a02;
}
.mini-stat-card.violet {
  background: linear-gradient(140deg, #c084fc 0%, #8b5cf6 55%, #5b21b6 100%);
  color: #fff;
}
.mini-stat-card.blue {
  background: linear-gradient(140deg, #60a5fa 0%, #3b82f6 50%, #1e3a8a 100%);
  color: #fff;
}

.mini-stat-card .ms-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .82;
  position: relative;
  z-index: 2;
}
.mini-stat-card .ms-num {
  font-family: 'Inter', sans-serif;
  font-size: 50px; font-weight: 900;
  line-height: .95;
  letter-spacing: -.045em;
  margin-top: 8px;
  margin-bottom: auto;
  position: relative;
  z-index: 2;
}
.mini-stat-card .ms-num .ms-unit {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-left: 1px;
  opacity: .9;
}
.mini-stat-card .ms-label {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px; font-weight: 600;
  line-height: 1.4;
  margin-top: 10px;
  position: relative;
  z-index: 2;
  opacity: .92;
}

/* Reveal animations — cards rise/scale in cascading */
.slide.active .mini-stat-card {
  animation: ms-rise .55s cubic-bezier(.18,.9,.32,1.18) backwards;
}
.slide.active .mini-stat-card:nth-child(1) { animation-delay: .12s; }
.slide.active .mini-stat-card:nth-child(2) { animation-delay: .22s; }
.slide.active .mini-stat-card:nth-child(3) { animation-delay: .32s; }

@keyframes ms-rise {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Light theme: cards keep their vibrant color but tone down shadow */
html[data-theme='light'] .mini-stat-card {
  box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.18);
}

/* ════════════════════════════════════════════════════════════════════
   EQUALIZER / SOUND VISUALIZER — Spotify-style spectrum analyzer
   4 columns (severities), each with multiple thin bars that dance
   continuously with random-ish timings to feel like live audio.
   ════════════════════════════════════════════════════════════════════ */
.eq-chart {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: end;
  height: 220px;
  margin: 28px 0 24px;
  padding: 0 30px;
}
.eq-col {
  display: flex;
  gap: 5px;
  align-items: end;
  justify-content: center;
  height: 100%;
  position: relative;
}
.eq-num {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: .14em;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
}

.eq-bar {
  width: 11px;
  border-radius: 3px 3px 1px 1px;
  position: relative;
  transform-origin: bottom center;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.eq-bar::after {
  /* tiny highlight on top of bar */
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,.5);
  border-radius: inherit;
}

/* Per-column color + base height */
.eq-col.s1 .eq-bar { background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%); }
.eq-col.s2 .eq-bar { background: linear-gradient(180deg, #fde047 0%, #eab308 100%); }
.eq-col.s3 .eq-bar { background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%); }
.eq-col.s4 .eq-bar { background: linear-gradient(180deg, #f87171 0%, #b91c1c 100%); }

/* Heights — slight variation within a column for spectrum-analyzer feel */
.eq-col.s1 .eq-bar { height: 26%; }
.eq-col.s1 .eq-bar:nth-child(2) { height: 22%; }
.eq-col.s1 .eq-bar:nth-child(3) { height: 30%; }
.eq-col.s1 .eq-bar:nth-child(4) { height: 24%; }
.eq-col.s1 .eq-bar:nth-child(5) { height: 28%; }

.eq-col.s2 .eq-bar { height: 52%; }
.eq-col.s2 .eq-bar:nth-child(2) { height: 56%; }
.eq-col.s2 .eq-bar:nth-child(3) { height: 48%; }
.eq-col.s2 .eq-bar:nth-child(4) { height: 60%; }
.eq-col.s2 .eq-bar:nth-child(5) { height: 50%; }

.eq-col.s3 .eq-bar { height: 76%; }
.eq-col.s3 .eq-bar:nth-child(2) { height: 80%; }
.eq-col.s3 .eq-bar:nth-child(3) { height: 72%; }
.eq-col.s3 .eq-bar:nth-child(4) { height: 84%; }
.eq-col.s3 .eq-bar:nth-child(5) { height: 78%; }

.eq-col.s4 .eq-bar { height: 96%; }
.eq-col.s4 .eq-bar:nth-child(2) { height: 100%; }
.eq-col.s4 .eq-bar:nth-child(3) { height: 92%; }
.eq-col.s4 .eq-bar:nth-child(4) { height: 100%; }
.eq-col.s4 .eq-bar:nth-child(5) { height: 94%; }

/* Dance-and-settle — bars oscillate briefly on slide entry then lock
   to their severity-defined height (scaleY(1) = full CSS height). */
.slide.active .eq-bar {
  transform: scaleY(0);
  animation: viz-dance-a var(--dur, 1.7s) cubic-bezier(.32,.04,.22,1) var(--delay, 0s) forwards;
}

/* Three dance patterns for visual variance — distributed by nth-child */
.eq-col .eq-bar:nth-child(3n+2) { animation-name: viz-dance-b; }
.eq-col .eq-bar:nth-child(3n)   { animation-name: viz-dance-c; }

/* All bars start at the same time (delay 0) — natural variance comes
   from different durations + different dance keyframes per nth-child.
   This makes the first ~1.8s feel like real audio playing. */
.eq-col.s1 .eq-bar:nth-child(1) { --dur: 1.65s; }
.eq-col.s1 .eq-bar:nth-child(2) { --dur: 1.85s; }
.eq-col.s1 .eq-bar:nth-child(3) { --dur: 1.55s; }
.eq-col.s1 .eq-bar:nth-child(4) { --dur: 1.95s; }
.eq-col.s1 .eq-bar:nth-child(5) { --dur: 1.70s; }

.eq-col.s2 .eq-bar:nth-child(1) { --dur: 1.75s; }
.eq-col.s2 .eq-bar:nth-child(2) { --dur: 1.55s; }
.eq-col.s2 .eq-bar:nth-child(3) { --dur: 1.90s; }
.eq-col.s2 .eq-bar:nth-child(4) { --dur: 1.60s; }
.eq-col.s2 .eq-bar:nth-child(5) { --dur: 1.80s; }

.eq-col.s3 .eq-bar:nth-child(1) { --dur: 1.85s; }
.eq-col.s3 .eq-bar:nth-child(2) { --dur: 1.65s; }
.eq-col.s3 .eq-bar:nth-child(3) { --dur: 1.95s; }
.eq-col.s3 .eq-bar:nth-child(4) { --dur: 1.75s; }
.eq-col.s3 .eq-bar:nth-child(5) { --dur: 1.50s; }

.eq-col.s4 .eq-bar:nth-child(1) { --dur: 1.55s; }
.eq-col.s4 .eq-bar:nth-child(2) { --dur: 1.90s; }
.eq-col.s4 .eq-bar:nth-child(3) { --dur: 1.70s; }
.eq-col.s4 .eq-bar:nth-child(4) { --dur: 1.85s; }
.eq-col.s4 .eq-bar:nth-child(5) { --dur: 1.65s; }

/* Three dance patterns — all settle at scaleY(1) */
@keyframes viz-dance-a {
  0%   { transform: scaleY(0.05); }
  18%  { transform: scaleY(0.75); }
  32%  { transform: scaleY(0.40); }
  48%  { transform: scaleY(0.95); }
  62%  { transform: scaleY(0.55); }
  76%  { transform: scaleY(0.90); }
  88%  { transform: scaleY(0.95); }
  100% { transform: scaleY(1); }
}
@keyframes viz-dance-b {
  0%   { transform: scaleY(0.10); }
  15%  { transform: scaleY(0.55); }
  30%  { transform: scaleY(0.90); }
  45%  { transform: scaleY(0.45); }
  60%  { transform: scaleY(0.85); }
  74%  { transform: scaleY(0.70); }
  88%  { transform: scaleY(0.95); }
  100% { transform: scaleY(1); }
}
@keyframes viz-dance-c {
  0%   { transform: scaleY(0.15); }
  20%  { transform: scaleY(0.70); }
  36%  { transform: scaleY(0.50); }
  54%  { transform: scaleY(1); }
  68%  { transform: scaleY(0.75); }
  82%  { transform: scaleY(0.92); }
  100% { transform: scaleY(1); }
}

.eq-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: 0 40px;
}
.eq-label {
  text-align: center;
  display: flex; flex-direction: column;
  gap: 4px;
  align-items: center;
}
.eq-label .lbl-title {
  font-family: 'Inter', sans-serif;
  font-size: 17px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -.015em;
}
.eq-label.s1 .lbl-title { color: #4ade80; }
.eq-label.s2 .lbl-title { color: #fde047; }
.eq-label.s3 .lbl-title { color: #fb923c; }
.eq-label.s4 .lbl-title { color: #f87171; }
.eq-label .lbl-sub {
  font-size: 11.5px;
  color: var(--ink3);
  line-height: 1.4;
  max-width: 170px;
}

/* Numbers and labels fade in (bars dance continuously, defined above) */
.slide.active .eq-num,
.slide.active .eq-label {
  animation: eq-fade .5s ease-out backwards;
}
.slide.active .eq-col:nth-child(1) .eq-num { animation-delay: .15s; }
.slide.active .eq-col:nth-child(2) .eq-num { animation-delay: .22s; }
.slide.active .eq-col:nth-child(3) .eq-num { animation-delay: .29s; }
.slide.active .eq-col:nth-child(4) .eq-num { animation-delay: .36s; }
.slide.active .eq-labels .eq-label:nth-child(1) { animation-delay: .25s; }
.slide.active .eq-labels .eq-label:nth-child(2) { animation-delay: .35s; }
.slide.active .eq-labels .eq-label:nth-child(3) { animation-delay: .45s; }
.slide.active .eq-labels .eq-label:nth-child(4) { animation-delay: .55s; }

@keyframes eq-fade {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* Override translateX for labels (which don't need it) */
.slide.active .eq-label {
  animation-name: eq-fade-simple;
}
@keyframes eq-fade-simple {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

html[data-theme='light'] .eq-num { color: var(--ink3); }
html[data-theme='light'] .eq-label .lbl-sub { color: var(--ink3); }
html[data-theme='light'] .eq-label.s1 .lbl-title { color: #16a34a; }
html[data-theme='light'] .eq-label.s2 .lbl-title { color: #b45309; }
html[data-theme='light'] .eq-label.s3 .lbl-title { color: #c2410c; }
html[data-theme='light'] .eq-label.s4 .lbl-title { color: #b91c1c; }

/* ════════════════════════════════════════════════════════════════════
   TOP 10 LIST — Spotify "Popular tracks" / "Top Tracks" of an artist
   Numbered list, two columns. Violated rows highlighted with mini
   "now playing" equalizer (continuously dancing).
   ════════════════════════════════════════════════════════════════════ */
.h10-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 22px;
  margin-top: 6px;
}
.h10-row {
  display: grid;
  grid-template-columns: 26px 1fr 22px;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 4px;
  align-items: center;
  position: relative;
}
.h10-row::after {
  /* divider that spans full row width, subtle */
  content: '';
  position: absolute;
  bottom: 0; left: 10px; right: 10px;
  height: 1px;
  background: rgba(255,255,255,.05);
}
.h10-row:hover { background: rgba(255,255,255,.05); }
.h10-row:hover .h10-num { color: #fff; }

.h10-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.5);
  text-align: center;
  line-height: 1;
}
.h10-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.h10-name {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 600;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h10-name .h10-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  color: var(--accent2);
  margin-right: 6px;
}
.h10-desc {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Violated row treatment — bg tint + accent name */
.h10-row.violated {
  background: rgba(29,185,84,.07);
}
.h10-row.violated .h10-name { color: var(--accent2); }
.h10-row.violated .h10-num  { color: var(--accent2); font-weight: 700; }

/* Mini "now playing" equalizer indicator (only on violated rows) */
.h10-eq {
  display: flex;
  align-items: end;
  gap: 2px;
  width: 18px;
  height: 14px;
}
.h10-eq span {
  flex: 1;
  background: var(--accent2);
  border-radius: 1px;
  transform-origin: bottom center;
  animation: h10-eq-dance var(--d, 0.9s) ease-in-out infinite;
}
.h10-eq span:nth-child(1) { height: 100%; --d: 0.9s; }
.h10-eq span:nth-child(2) { height: 60%;  --d: 1.1s; animation-delay: .15s; }
.h10-eq span:nth-child(3) { height: 80%;  --d: 0.8s; animation-delay: .3s; }
.h10-eq span:nth-child(4) { height: 50%;  --d: 1.2s; animation-delay: .1s; }

@keyframes h10-eq-dance {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}

/* Footer note (no counts — just mention which are violated) */
.h10-footer {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.65);
  display: flex; align-items: center; gap: 10px;
}
.h10-footer .h10-eq-static {
  display: inline-flex;
  align-items: end;
  gap: 2px;
  width: 16px; height: 12px;
}
.h10-footer .h10-eq-static span {
  flex: 1;
  background: var(--accent2);
  border-radius: 1px;
}
.h10-footer .h10-eq-static span:nth-child(1) { height: 80%; }
.h10-footer .h10-eq-static span:nth-child(2) { height: 50%; }
.h10-footer .h10-eq-static span:nth-child(3) { height: 100%; }
.h10-footer .h10-eq-static span:nth-child(4) { height: 65%; }

/* Light theme adjustments */
html[data-theme='light'] .h10-row::after { background: rgba(0,0,0,.06); }
html[data-theme='light'] .h10-row:hover { background: rgba(0,0,0,.04); }
html[data-theme='light'] .h10-row:hover .h10-num { color: var(--ink); }
html[data-theme='light'] .h10-num { color: var(--ink3); }
html[data-theme='light'] .h10-name { color: var(--ink); }
html[data-theme='light'] .h10-desc { color: var(--ink3); }
html[data-theme='light'] .h10-row.violated { background: rgba(20,128,61,.08); }
html[data-theme='light'] .h10-row.violated .h10-name { color: var(--accent); }
html[data-theme='light'] .h10-row.violated .h10-num  { color: var(--accent); }
html[data-theme='light'] .h10-eq span { background: var(--accent); }
html[data-theme='light'] .h10-footer { color: var(--ink3); }
html[data-theme='light'] .h10-footer .h10-eq-static span { background: var(--accent); }

/* ════════════════════════════════════════════════════════════════════
   SPOTIFY LIST — Search results / library style row
   Album cover + title/subtitle + tag chip + green check for matches
   ════════════════════════════════════════════════════════════════════ */
.spotify-list {
  display: flex; flex-direction: column;
  gap: 1px;
  margin-top: 6px;
  /* Scroll inside the slide chrome */
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
  padding-bottom: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
  scroll-behavior: smooth;
}
.spotify-list::-webkit-scrollbar { width: 6px; }
.spotify-list::-webkit-scrollbar-track { background: transparent; }
.spotify-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 3px;
}
.spotify-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.32); }
html[data-theme='light'] .spotify-list { scrollbar-color: rgba(0,0,0,.22) transparent; }
html[data-theme='light'] .spotify-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); }
html[data-theme='light'] .spotify-list::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.32); }
.sl-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  transition: background .15s ease;
  cursor: pointer;
}
.sl-row:hover { background: rgba(255,255,255,.06); }

.sl-cover {
  width: 38px; height: 38px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08);
  flex-shrink: 0;
}
.sl-cover::before {
  /* shared highlight overlay */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 24% 14%, rgba(255,255,255,.22), transparent 55%);
  pointer-events: none;
}
.sl-cover .sl-icon {
  font-family: 'Inter', sans-serif;
  font-size: 18px; font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  text-shadow: 0 1px 5px rgba(0,0,0,.4);
  position: relative; z-index: 2;
  line-height: 1;
}

/* 10 unique gradient covers — one per heuristic, each with personality */
.sl-cover.h1  { background: linear-gradient(135deg, #1ed760 0%, #0d6b40 100%); }   /* green   — visibility */
.sl-cover.h2  { background: linear-gradient(135deg, #38bdf8 0%, #075985 100%); }   /* blue    — real world */
.sl-cover.h3  { background: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%); }   /* purple  — control */
.sl-cover.h4  { background: linear-gradient(135deg, #fb923c 0%, #c2410c 100%); }   /* orange  — consistency */
.sl-cover.h5  { background: linear-gradient(135deg, #ff5cce 0%, #b40060 100%); }   /* pink    — recognize */
.sl-cover.h6  { background: linear-gradient(135deg, #fde047 0%, #b45309 100%); }   /* yellow  — efficiency */
.sl-cover.h7  { background: linear-gradient(135deg, #d4d4d8 0%, #52525b 100%); }   /* silver  — minimalist */
.sl-cover.h8  { background: linear-gradient(135deg, #f87171 0%, #991b1b 100%); }   /* red     — prevention */
.sl-cover.h9  { background: linear-gradient(135deg, #67e8f9 0%, #0e7490 100%); }   /* cyan    — recovery */
.sl-cover.h10 { background: linear-gradient(135deg, #818cf8 0%, #3730a3 100%); }   /* indigo  — help */

/* Ensure h6 and h7 have black icon for legibility (yellow / silver bg) */
.sl-cover.h6 .sl-icon,
.sl-cover.h7 .sl-icon {
  color: #0a0a0a;
  text-shadow: 0 1px 2px rgba(255,255,255,.3);
}

/* Hover: cover scales subtly and gets a green play overlay */
.sl-row:hover .sl-cover { transform: scale(1.04); transition: transform .2s ease; }
.sl-cover { transition: transform .2s ease; }

.sl-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sl-title {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 600;
  color: #fff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sl-sub {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl-tag {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 600;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.06);
}

.sl-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  color: transparent;
  background: transparent;
  transition: background .2s ease, transform .2s cubic-bezier(.5,1.8,.5,1);
}
.sl-check.checked {
  background: var(--accent);
  color: #000;
  font-weight: 900;
}
.sl-check.checked::before { content: '✓'; }

/* Subtle entry animation: rows fade in cascade */
.slide.active .sl-row {
  animation: sl-rise .4s ease-out backwards;
}
.slide.active .sl-row:nth-child(1)  { animation-delay: .12s; }
.slide.active .sl-row:nth-child(2)  { animation-delay: .16s; }
.slide.active .sl-row:nth-child(3)  { animation-delay: .20s; }
.slide.active .sl-row:nth-child(4)  { animation-delay: .24s; }
.slide.active .sl-row:nth-child(5)  { animation-delay: .28s; }
.slide.active .sl-row:nth-child(6)  { animation-delay: .32s; }
.slide.active .sl-row:nth-child(7)  { animation-delay: .36s; }
.slide.active .sl-row:nth-child(8)  { animation-delay: .40s; }
.slide.active .sl-row:nth-child(9)  { animation-delay: .44s; }
.slide.active .sl-row:nth-child(10) { animation-delay: .48s; }

/* Check pops in after row appears */
.slide.active .sl-check.checked {
  animation: sl-check-pop .55s cubic-bezier(.5,1.8,.5,1) backwards;
  animation-delay: .8s;
}

@keyframes sl-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sl-check-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Footer note */
.sl-footer {
  margin-top: 12px;
  font-size: 11.5px;
  color: rgba(255,255,255,.6);
  display: flex; align-items: center; gap: 10px;
}
.sl-footer .sl-check-icon {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900;
  flex-shrink: 0;
}
.sl-footer .sl-check-icon::before { content: '✓'; }

/* Light theme */
html[data-theme='light'] .sl-row:hover { background: rgba(0,0,0,.04); }
html[data-theme='light'] .sl-title { color: var(--ink); }
html[data-theme='light'] .sl-sub { color: var(--ink3); }
html[data-theme='light'] .sl-tag {
  background: rgba(0,0,0,.04);
  color: var(--ink2);
  border-color: rgba(0,0,0,.08);
}
html[data-theme='light'] .sl-check.checked { background: var(--accent); color: #fff; }
html[data-theme='light'] .sl-footer { color: var(--ink3); }
html[data-theme='light'] .sl-footer .sl-check-icon { color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   ALBUM CREDITS — Spotify "Show credits" panel style
   Left: album sidebar (cover + artists). Right: METHOD · TRACKS · PLATFORM stacked.
   ════════════════════════════════════════════════════════════════════ */
.credits {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 22px 36px;
  margin-top: 6px;
}
.credits-info {
  display: flex; flex-direction: column;
  gap: 18px;
  min-width: 0;
}
/* Bottom row inside credits-info: tracks + recorded at side by side */
.credits-bottom {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
}
.credits-section { display: flex; flex-direction: column; }

/* Album sidebar: cover on top + artists below */
.credits-album {
  display: flex; flex-direction: column;
  gap: 14px;
}
.cr-cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 36px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
  background: linear-gradient(135deg, #1ed760 0%, #0d6b40 60%, #052218 100%);
}
.cr-cover::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 24% 14%, rgba(255,255,255,.18), transparent 55%);
  pointer-events: none;
}
.cr-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  position: relative; z-index: 2;
}
.cr-cover-placeholder {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; color: rgba(255,255,255,.85);
  font-weight: 800; line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}

/* Artists list under cover (compact) */
.cr-album-artists {
  display: flex; flex-direction: column;
  gap: 6px;
}
.cr-album-artists .cr-person {
  font-size: 12.5px;
  gap: 9px;
}
.cr-album-artists .cr-avatar {
  width: 20px; height: 20px;
  font-size: 9px;
}
.credits-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 12px;
}

/* Performed By — list of evaluators with avatars */
.credits-performers {
  display: flex; flex-direction: column;
  gap: 10px;
}
.cr-person {
  display: flex; align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.cr-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: #000;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: -.02em;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Tracks — like a small playlist excerpt */
.credits-tracks {
  display: flex; flex-direction: column;
  gap: 4px;
}
.cr-track {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: center;
  padding: 5px 6px;
  border-radius: 4px;
  transition: background .15s;
}
.cr-track:hover { background: rgba(255,255,255,.06); }
.cr-track .cr-tnum {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.5);
  text-align: center;
}
.cr-track .cr-tname {
  font-size: 13.5px; color: var(--ink); font-weight: 500;
  letter-spacing: -.005em;
}

/* Method — numbered process steps */
.credits-method {
  list-style: none; counter-reset: cm;
  display: flex; flex-direction: column;
  gap: 14px;
  margin: 0; padding: 0;
}
.credits-method li {
  counter-increment: cm;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
}
.credits-method li::before {
  content: counter(cm);
  font-family: 'Inter', sans-serif;
  font-size: 18px; font-weight: 800;
  color: var(--accent2);
  letter-spacing: -.04em;
  line-height: 1;
  padding-top: 1px;
}
.credits-method strong {
  display: block;
  font-size: 13.5px; font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
  letter-spacing: -.005em;
}
.credits-method span {
  font-size: 12px;
  color: var(--ink3);
  line-height: 1.5;
}

/* Recorded At — platform info */
.credits-platform {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink2);
  display: flex; flex-direction: column;
  gap: 4px;
}
.credits-platform .cp-row { display: flex; gap: 10px; align-items: center; }
.credits-platform .cp-key {
  color: rgba(255,255,255,.5);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  min-width: 78px;
}
.credits-platform .cp-val {
  color: var(--ink);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* Reveal animations */
.slide.active .credits-album,
.slide.active .credits-info > .credits-section,
.slide.active .credits-bottom > .credits-section {
  animation: cr-rise .55s cubic-bezier(.18,.9,.32,1.18) backwards;
}
.slide.active .credits-album { animation-delay: .12s; }
.slide.active .credits-info > .credits-section:nth-child(1) { animation-delay: .22s; }
.slide.active .credits-bottom > .credits-section:nth-child(1) { animation-delay: .32s; }
.slide.active .credits-bottom > .credits-section:nth-child(2) { animation-delay: .42s; }

@keyframes cr-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Light theme */
html[data-theme='light'] .cr-track:hover { background: rgba(0,0,0,.04); }
html[data-theme='light'] .cr-track .cr-tnum { color: var(--ink3); }
html[data-theme='light'] .credits-platform .cp-key { color: var(--ink3); }

/* ════════════════════════════════════════════════════════════════════
   PROBLEM CAROUSEL — phone-frame screenshot viewer
   Single or multi-image. Multi-image gets dots + arrow keys.
   ════════════════════════════════════════════════════════════════════ */
.problem-carousel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 168px;
  flex-shrink: 0;
  align-self: flex-start;
}
.pc-frame {
  width: 100%;
  aspect-ratio: 9 / 19;
  border-radius: 16px;
  background: #000;
  padding: 5px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}
.pc-track {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  /* No overflow:hidden here — .pc-frame handles clipping */
  transition: transform .4s cubic-bezier(.5,0,.2,1);
}
.pc-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}
.pc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Nav arrows on hover (visible only when multi-slide) */
.pc-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  z-index: 5;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
  backdrop-filter: blur(4px);
}
.pc-frame:hover .pc-arrow { opacity: 1; }
.pc-arrow:hover { background: rgba(0,0,0,.85); }
.pc-arrow.prev { left: 8px; }
.pc-arrow.next { right: 8px; }
.pc-arrow:disabled,
.pc-arrow.disabled { opacity: 0; pointer-events: none; }

/* Dots — only show with 2+ slides */
.pc-dots {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
}
.pc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
  border: none;
  padding: 0;
}
.pc-dot.active {
  background: var(--accent);
  width: 18px;
  border-radius: 3px;
}
.pc-dot:hover { background: rgba(255,255,255,.5); }
.pc-dot.active:hover { background: var(--accent2); }

.pc-caption {
  font-size: 10.5px;
  color: var(--ink3);
  text-align: center;
  font-style: italic;
  line-height: 1.4;
  margin-top: 2px;
  min-height: 14px;
  padding: 0 4px;
}

/* Single-slide variant: hide arrows + dots */
.problem-carousel[data-count="1"] .pc-arrow,
.problem-carousel[data-count="1"] .pc-dots { display: none; }

/* Light theme */
html[data-theme='light'] .pc-frame { background: #1a1a1a; }
html[data-theme='light'] .pc-dot { background: rgba(0,0,0,.2); }
html[data-theme='light'] .pc-dot.active { background: var(--accent); }
html[data-theme='light'] .pc-caption { color: var(--ink3); }

/* Make small phone frame clickable to zoom into dialog */
.problem-carousel .pc-frame {
  cursor: zoom-in;
  transition: transform .25s ease, box-shadow .25s ease;
}
.problem-carousel .pc-frame:hover {
  transform: scale(1.03);
  box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(29,185,84,.4);
}

/* ════════════════════════════════════════════════════════════════════
   IMAGE DIALOG — fullscreen centered modal with large carousel
   Click on phone frame opens this. Esc/click outside closes.
   ════════════════════════════════════════════════════════════════════ */
.image-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.image-dialog.open { opacity: 1; pointer-events: auto; }
.id-content {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  max-width: 92vw;
  max-height: 90vh;
}
.id-frame {
  position: relative;
  border-radius: 24px;
  background: #000;
  padding: 8px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
  overflow: hidden;
  width: min(360px, 92vw);
  aspect-ratio: 9 / 19;
  max-height: 78vh;
}
.id-track {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  /* No overflow:hidden here — .id-frame handles clipping. With overflow
     here the second slide stays clipped even after the translate. */
  transition: transform .4s cubic-bezier(.5,0,.2,1);
}
.id-slide {
  flex: 0 0 100%;
  height: 100%;
}
.id-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.id-close {
  position: fixed;
  top: 24px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  transition: background .2s ease;
}
.id-close:hover { background: rgba(255,255,255,.18); }
.id-arrow {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  transition: background .2s ease, opacity .2s ease;
  backdrop-filter: blur(8px);
}
.id-arrow:hover { background: rgba(29,185,84,.3); border-color: var(--accent); }
.id-arrow.prev { left: max(20px, calc(50% - 320px)); }
.id-arrow.next { right: max(20px, calc(50% - 320px)); }
.id-arrow.disabled { opacity: 0; pointer-events: none; }
.id-caption {
  font-size: 13px;
  color: var(--ink2);
  text-align: center;
  font-style: italic;
  max-width: 540px;
  line-height: 1.5;
}
.id-heuristics {
  display: none;
  flex-direction: column;
  position: fixed;
  left: calc(50% + 210px);
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  max-height: 80vh;
  overflow-y: auto;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  z-index: 6;
}
.id-h-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  padding: 16px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.id-h-table {
  display: flex;
  flex-direction: column;
}
.id-h-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: start;
  gap: 14px;
  padding: 14px 20px;
  font-size: 14px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.id-h-row:last-child { border-bottom: none; }
.id-h-row:hover { background: rgba(255,255,255,.04); }
.id-h-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--red2);
  padding-top: 1px;
}
.id-h-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.id-h-name {
  color: rgba(255,255,255,.94);
  font-weight: 600;
  font-size: 14px;
}
.id-h-why {
  color: rgba(255,255,255,.62);
  font-size: 12.5px;
  line-height: 1.45;
}
html[data-theme='light'] .id-heuristics {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.1);
}
html[data-theme='light'] .id-h-title {
  background: rgba(0,0,0,.03);
  border-bottom-color: rgba(0,0,0,.08);
  color: rgba(0,0,0,.55);
}
html[data-theme='light'] .id-h-row {
  border-bottom-color: rgba(0,0,0,.06);
}
html[data-theme='light'] .id-h-row:hover { background: rgba(0,0,0,.04); }
html[data-theme='light'] .id-h-code { color: #c14a3a; }
html[data-theme='light'] .id-h-name { color: var(--ink); }
html[data-theme='light'] .id-h-why { color: rgba(0,0,0,.62); }
.id-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.id-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  cursor: pointer;
  transition: background .2s, width .2s;
  border: none;
  padding: 0;
}
.id-dot.active {
  background: var(--accent);
  width: 24px;
  border-radius: 4px;
}
.id-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.4);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
}

/* ════════════════════════════════════════════════════════════════════
   PROBLEM SLIDE LAYOUT — Spotify-style content beside the carousel
   ════════════════════════════════════════════════════════════════════ */
.problem-grid-spotify {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 28px;
  align-items: flex-start;
}
.problem-content {
  display: flex; flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* About-section labels (mono caps green) — same family as album credits */
.ps-section { display: flex; flex-direction: column; gap: 6px; }
.ps-label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent2);
}
.ps-body {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.55;
}
.ps-body strong { color: var(--ink); font-weight: 700; }

/* Two cards: BAD (left, red) + GOOD (right, green) */
.ps-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ps-card {
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 8px;
  position: relative;
  transition: transform .2s ease, background .2s ease;
}
.ps-card:hover { background: var(--bg5); }
.ps-card.bad  { border-left: 3px solid var(--red); }
.ps-card.good { border-left: 3px solid var(--accent); }
.ps-card-label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.ps-card.bad  .ps-card-label { color: var(--red2); }
.ps-card.good .ps-card-label { color: var(--accent2); }
.ps-card-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.ps-card.bad  .ps-card-dot { background: var(--red); box-shadow: 0 0 0 3px rgba(233,20,41,.15); }
.ps-card.good .ps-card-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(29,185,84,.15); animation: ps-pulse 2.4s ease-in-out infinite; }

@keyframes ps-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(29,185,84,.15); }
  50%      { box-shadow: 0 0 0 5px rgba(29,185,84,.3); }
}

.ps-points {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink2);
}
.ps-points li {
  position: relative;
  padding-left: 14px;
}
.ps-points li::before {
  content: '·';
  position: absolute;
  left: 4px; top: -2px;
  color: var(--red2);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.ps-points strong { color: var(--ink); font-weight: 700; }
.ps-h {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  margin-right: 6px;
  color: var(--red2);
  white-space: nowrap;
}
html[data-theme='light'] .ps-h {
  color: #c14a3a;
}

/* Light theme */
html[data-theme='light'] .ps-card { background: var(--bg2); }
html[data-theme='light'] .ps-card:hover { background: var(--bg3); }

/* ════════════════════════════════════════════════════════════════════
   DISCOVERABILITY GRID — 4 cards, each with a mini phone thumbnail.
   Click any thumbnail opens the modal with all 4 images navigable.
   ════════════════════════════════════════════════════════════════════ */
.disc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.disc-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  padding: 10px 12px;
  align-items: center;
}
.disc-thumb {
  width: 64px;
  aspect-ratio: 9 / 19;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  cursor: zoom-in;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.disc-thumb:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 0 1.5px var(--accent);
}
.disc-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.disc-content {
  display: flex; flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.disc-head {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.disc-title {
  font-size: 12.5px; font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -.005em;
}
.disc-body {
  font-size: 11.5px;
  color: var(--ink2);
  line-height: 1.45;
}
.disc-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--red2);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -2px;
}
.disc-h::before {
  content: 'Heurísticas';
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ink3);
  font-weight: 700;
}
html[data-theme='light'] .disc-h { color: #c14a3a; }
/* Inline solution hint (used on cards that have their own fix per problem) */
.disc-solution {
  font-size: 11px;
  color: var(--accent2);
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.4;
}
.disc-solution strong { color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   PROBLEM SLIDE — Spotify integration: top "playing from" label,
   heart+share actions, bottom mini-player bar
   ════════════════════════════════════════════════════════════════════ */

/* Small "playing from EP" label above the problem-head */
.problem-context {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 8px;
}
.problem-context .pc-mini-cover {
  width: 18px; height: 18px;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.problem-context .pc-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pc-blink 1.6s ease-in-out infinite;
}
@keyframes pc-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* Heart + share next to title */
.problem-actions {
  display: inline-flex; align-items: center; gap: 14px;
  margin-left: 14px;
  vertical-align: middle;
}
.problem-actions span {
  font-size: 18px;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  line-height: 1;
  transition: color .2s ease, transform .2s ease;
}
.problem-actions span:hover { color: #fff; transform: scale(1.1); }
.problem-actions .pa-heart.liked { color: var(--accent); }

/* Bottom mini-player bar (Spotify persistent player) */
.problem-mini-player {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,.08);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 0 22px;
  gap: 16px;
  z-index: 4;
}
.pmp-left {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.pmp-cover {
  width: 36px; height: 36px;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  position: relative;
  overflow: hidden;
}
.pmp-cover::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 24% 14%, rgba(255,255,255,.22), transparent 55%);
}
.pmp-info {
  display: flex; flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.pmp-title {
  font-size: 12.5px; font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.005em;
}
.pmp-sub {
  font-size: 10.5px;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmp-heart {
  font-size: 14px;
  color: var(--accent2);
  margin-left: 4px;
  flex-shrink: 0;
}

.pmp-center {
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.pmp-ctrl {
  font-size: 14px;
  color: rgba(255,255,255,.78);
  cursor: pointer;
  transition: color .15s;
}
.pmp-ctrl:hover { color: #fff; }
.pmp-ctrl.pmp-shuffle { color: var(--accent2); }
.pmp-play {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.pmp-play::before { content: '⏸'; transform: translateX(0); }

.pmp-right {
  display: flex; align-items: center; gap: 10px;
  justify-content: flex-end;
}
.pmp-progress {
  flex: 1;
  max-width: 200px;
  height: 4px;
  background: rgba(255,255,255,.2);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.pmp-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent2);
  border-radius: 2px;
  width: 25%;
}
.pmp-progress-thumb {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent2);
  left: 25%;
}
.pmp-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,.65);
  white-space: nowrap;
}

/* Slides with .has-mini-player need extra bottom padding */
.slide.has-mini-player .slide-inner { padding-bottom: 70px; }

/* Light theme */
html[data-theme='light'] .problem-context { color: var(--ink3); }
html[data-theme='light'] .problem-mini-player {
  background: rgba(255,255,255,.85);
  border-top-color: rgba(0,0,0,.1);
}
html[data-theme='light'] .pmp-title { color: var(--ink); }
html[data-theme='light'] .pmp-sub { color: var(--ink3); }
html[data-theme='light'] .pmp-ctrl { color: var(--ink2); }
html[data-theme='light'] .pmp-play { background: var(--ink); color: #fff; }
html[data-theme='light'] .pmp-progress { background: rgba(0,0,0,.12); }
html[data-theme='light'] .pmp-time { color: var(--ink3); }
html[data-theme='light'] .problem-actions span { color: var(--ink2); }