:root{
  --accent1:#1ed760;
  --accent2:#9b5de5;
  --muted:rgba(255,255,255,0.78);
  --bg-glow: rgba(0,0,0,0);
}

/* reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#05050a;color:#f7f7fb;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;overflow:hidden}

/* slides container */
#slides{height:100vh;width:100vw;position:relative;overflow:hidden;}

/* panel base */
.panel{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;padding:36px;
  transition:transform 700ms cubic-bezier(.2,.9,.2,1),filter 300ms,background 600ms;
  background:linear-gradient(180deg,#020202,#040407);
  -webkit-font-smoothing:antialiased;
}

/* theme vars - base colors (JS will set proper gradients) */
.panel[data-theme="green"]{--base1:#061006;--base2:#042814}
.panel[data-theme="purple"]{--base1:#0b0520;--base2:#2b0f6a}
.panel[data-theme="blue"]{--base1:#051027;--base2:#0a2b52}
.panel[data-theme="red"]{--base1:#2b0707;--base2:#5b0f0f}

/* panel inner layout */
.panelInner{position:relative;z-index:3;text-align:center;max-width:1100px;width:92%}

/* text */
h1{font-size:clamp(28px,6vw,48px);margin-bottom:6px}
h2{font-size:clamp(20px,4vw,34px);margin-bottom:8px}
.muted{color:var(--muted);font-size:14px}
.more{color:rgba(255,255,255,0.85);margin-top:12px;font-size:1rem}

/* grids */
.statsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.statCard{background:rgba(0,0,0,0.18);padding:16px;border-radius:12px}
.statNum{font-weight:900;font-size:2.2rem;font-family:monospace}
.statLabel{color:var(--muted);margin-top:8px;font-size:0.95rem}
.largeList{font-size:1.05rem;text-align:left;max-width:720px;margin:10px auto}
.habitsList,.erasList,.factsList{list-style:disc;margin-left:22px;text-align:left;max-width:760px}

/* decorative SVG layer */
.panelDecor{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
}

/* SVG defaults — smaller than before, absolute placement handled by helper classes */
.svg{display:block;max-width:none;height:auto;position:absolute;opacity:0.9;transform-origin:center center}
.hero.large{width:360px}
.hero.med{width:240px}
.hero.small{width:140px}
.hero.xs{width:88px}
.wave.xl{width:720px}
.wave.medium{width:420px}
.blob.xlarge{width:420px}
.blob.med{width:260px}
.badge.med{width:110px}
.badge.sm{width:72px}
.spark.small{width:110px}
.spark.xs{width:64px}

/* placement helpers - use combinations of r-a, r-b, r-c, r-d for variety */
.r-a{top:54%;left:54%;transform:translate(-50%,-50%) rotate(8deg)}
.r-b{top:18%;right:8%;transform:rotate(-12deg)}
.r-c{bottom:8%;left:12%;transform:rotate(26deg)}
.r-d{top:62%;left:20%;transform:rotate(34deg)}

/* micro variants */
.rotateSmall{transform:rotate(-12deg)}
.rotate{transform:rotate(6deg)}
.faded{opacity:0.6}
.glow{filter:drop-shadow(0 18px 40px rgba(155,93,229,0.12))}

/* motion presets applied by JS (per-slide choreography) */
.svgMotion-float{animation:sv_float 6s ease-in-out infinite alternate}
.svgMotion-spin{animation:sv_spin 18s linear infinite}
.svgMotion-orbit{animation:sv_orbit 9s linear infinite}
.svgMotion-pulse{animation:svg_pulse 1.2s ease-in-out infinite}
.svgMotion-none{animation:none}

@keyframes sv_float{to{transform:translate(-50%,-78%) rotate(8deg)}}
@keyframes sv_spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes sv_orbit{0%{transform:translate(-50%,-50%) rotate(0deg)}50%{transform:translate(-30%,-60%) rotate(90deg)}100%{transform:translate(-50%,-50%) rotate(0deg)}}
@keyframes svg_pulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

/* dots */
#dots{position:fixed;left:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:120}
#dots button{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.14);border:none;outline:none}
#dots button.active{background:linear-gradient(90deg,var(--accent1),var(--accent2));box-shadow:0 8px 26px rgba(155,93,229,0.12);transform:scale(1.12)}

/* player */
#playerRoot{position:fixed;right:18px;bottom:18px;z-index:140;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
#playerToggle{width:54px;height:54px;border-radius:14px;background:linear-gradient(90deg,var(--accent1),var(--accent2));border:none;color:#07110a;font-size:20px}
#playerPanel{width:340px;background:rgba(0,0,0,0.45);padding:12px;border-radius:14px;box-shadow:0 22px 80px rgba(0,0,0,0.6);transform-origin:100% 100%;opacity:0;pointer-events:none;transform:translateY(10px) scale(.98)}
#playerRoot.open #playerPanel{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);transition:all 320ms cubic-bezier(.2,.9,.2,1)}

/* player internals */
.playerTop{display:flex;justify-content:space-between;align-items:center}
.trackMeta{display:flex;flex-direction:column}
.playerVizWrap{display:flex;gap:12px;align-items:center;margin-top:10px}
.bpmViz{width:76px;height:76px}
.progressWrap{flex:1}
#trackProgress{width:100%}
.times{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
.playerControls{display:flex;align-items:center;gap:10px;margin-top:10px}
.playerControls button{padding:8px 10px;border-radius:10px;border:none;background:rgba(255,255,255,0.03);color:var(--muted)}
.volumeWrap input{width:100px}

/* playlist */
.playlistWrap{max-height:120px;overflow:auto;margin-top:8px}
.playlistWrap ul{list-style:none;padding:0;margin:0}
.playlistWrap li{padding:8px;border-radius:8px;cursor:pointer}
.playlistWrap li.active{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#03120a;font-weight:800}

/* recap */
.recapCard{background:rgba(0,0,0,0.25);padding:18px;border-radius:12px;display:inline-block;margin-top:10px}
.recapBig{font-weight:900;font-size:1.8rem}
.recapRow{color:var(--muted);margin-top:8px}

/* responsive */
@media (max-width:720px){
  #dots{display:none}
  .hero.large{width:320px}
  .blob.xlarge{width:320px}
  #playerPanel{width:92vw;right:4vw}
}