:root{--plum:#2E2157;--cream:#FFF7E8;--peach:#FFF0DC;--ink:#26232B;--coral:#FF6B57;--gold:#FFB627;--teal:#0FA3A3;--pink:#EF5DA8}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Georgia,'Noto Serif',serif;color:var(--ink);background:var(--cream)}
.nav{position:sticky;top:0;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 1.2rem;background:rgba(255,247,232,.95);border-bottom:2px dotted #d8cdb2;flex-wrap:wrap}
.nav img{height:52px;width:auto}
.nav nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.nav a{color:var(--plum);text-decoration:none;font-size:.98rem}
.nav a:hover{color:var(--coral)}
.hero{text-align:center;padding:2.2rem 1rem 3rem}
.hero-logo{width:min(760px,94vw);height:auto}
.hero h1{font-size:clamp(2rem,5.4vw,3.4rem);color:var(--plum);margin:.6rem 0 .4rem}
.hero h1 em,.band h2 em{color:var(--coral)}
.lede{font-size:1.2rem;color:#5c5546}
.pills{display:flex;gap:.55rem;justify-content:center;flex-wrap:wrap;margin-top:1.1rem}
.pills span,.pills button{border:1.6px solid var(--plum);color:var(--plum);background:#fff;border-radius:999px;padding:.42rem .95rem;font-family:inherit;font-size:.98rem}
.pills button{cursor:pointer}.pills button:hover,.pills button.on{background:var(--plum);color:#fff}
.band{padding:3rem 1.2rem;max-width:1080px;margin:0 auto}
.band.plum{background:var(--plum);color:#fff;border-radius:22px;margin:1rem auto;padding:3rem 1.6rem}
.band.peach{background:var(--peach);border-radius:22px;margin:1rem auto;padding:3rem 1.6rem}
.band h2{font-size:clamp(1.6rem,3.6vw,2.4rem);color:var(--plum);text-align:center;margin-top:0}
.band.plum h2{color:#FFD166}
.band p{line-height:1.65;font-size:1.06rem;max-width:820px;margin:.8rem auto}
.centre{text-align:center}.light{color:#E9E2FF}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:1.6rem;text-align:center}
.stats div{background:#fff;border:2px dashed #e3d5ae;border-radius:16px;padding:1rem}
.stats strong{display:block;font-size:2rem;color:var(--coral)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.cards article{background:rgba(255,255,255,.08);border:1.4px solid rgba(255,255,255,.35);border-radius:16px;padding:1.1rem}
.cards h3{margin:.2rem 0;color:#FFD166}
.tabs{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:1.2rem 0}
.tab{font-family:inherit;font-size:1.05rem;padding:.5rem 1.4rem;border-radius:999px;border:2px solid var(--plum);background:#fff;color:var(--plum);cursor:pointer}
.tab.active{background:var(--coral);border-color:var(--coral);color:#fff}
.songs{list-style:none;margin:0 auto;padding:0;max-width:820px;counter-reset:song}
.songs li{display:flex;align-items:center;gap:1rem;background:#fff;border:1.6px solid #eee0bd;border-radius:14px;padding:.8rem 1rem;margin:.55rem 0}
.rank{flex:0 0 2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;font-weight:bold;color:#fff}
.song{flex:1}.song b{display:block;font-size:1.08rem;color:var(--plum)}
.song small{color:#7A7264}
.play{flex:0 0 auto;background:var(--plum);color:#fff;text-decoration:none;padding:.5rem 1rem;border-radius:999px;font-size:.95rem}
.play:hover{background:var(--coral)}
.note{text-align:center;color:#7A7264;font-size:.92rem}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;text-align:center}
.steps span{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--coral);color:#fff;font-size:1.3rem;font-weight:bold}
.mood-card{max-width:640px;margin:1.2rem auto;background:#fff;border:2px dashed var(--gold);border-radius:16px;padding:1.2rem;text-align:center;font-size:1.15rem;color:var(--plum)}
.spinner{text-align:center}
#letter{font-size:5rem;font-weight:bold;color:#FFD166;line-height:1.1}
#spin{font-family:inherit;font-size:1.05rem;background:var(--gold);color:var(--plum);border:0;border-radius:999px;padding:.7rem 1.8rem;cursor:pointer;font-weight:bold}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.tile{border-radius:18px;padding:2rem 1rem;text-align:center;font-size:2.2rem;display:flex;flex-direction:column;gap:.6rem}
.tile span{font-size:1rem;color:var(--plum)}
.c1{background:#FFE3DE}.c2{background:#D9F2F2}.c3{background:#FFF0C2}.c4{background:#FDE0F0}
details{background:#fff;border:1.6px solid #eee0bd;border-radius:12px;padding:1rem 1.2rem;margin:.6rem auto;max-width:820px}
summary{cursor:pointer;font-weight:bold;color:var(--plum)}
footer{background:var(--plum);color:#fff;text-align:center;padding:2.4rem 1rem;margin-top:2rem}
footer img{width:min(560px,90vw);height:auto;background:rgba(255,255,255,.06);border-radius:14px}
footer .small{color:#CFC7E8;font-size:.9rem}
@media(max-width:640px){.nav{justify-content:center}.songs li{flex-wrap:wrap}}