.tabs { display:flex; justify-content:center; gap:10px; margin:0 auto 20px; flex-wrap:wrap; }
.tab { font:inherit; font-size:1.2rem; font-weight:bold; padding:10px 24px; border-radius:999px;
  border:3px solid var(--c4); background:#fff; color:var(--c4); cursor:pointer; }
.tab[aria-selected="true"] { background:var(--c4); color:#fff; }

.big { font-size:clamp(4rem,16vw,7rem); font-weight:bold; line-height:1; color:var(--c1); }
.word { font-size:1.8rem; margin:4px 0; text-transform:capitalize; }
.place { font-size:1.3rem; min-height:1.6em; margin-bottom:10px; color:var(--c4); font-weight:bold; }

.stage-wrap { max-width:520px; margin:0 auto; background:#fff; border:4px solid var(--c3);
  border-radius:24px; padding:12px; overflow:hidden; }
.stage { position:relative; width:480px; height:215px; transform-origin:top left; }

.stick { position:absolute; top:20px; width:16px; height:130px; border-radius:4px;
  background:linear-gradient(90deg,#e8b86d,#f5d08f 50%,#d9a354);
  box-shadow:0 1px 2px rgba(0,0,0,.3);
  transform-origin:50% 64px; transition:left .6s ease, transform .6s ease, opacity .3s; }
.stick::before { content:""; position:absolute; left:-1px; top:-8px; width:18px; height:22px;
  border-radius:50% 50% 45% 45%; background:radial-gradient(circle at 35% 30%,#ff8a80,#d32f2f 70%); }
.stick .lbl { position:absolute; left:50%; top:138px; transform:translateX(-50%); font-weight:bold;
  font-size:1.1rem; transition:opacity .3s; }

.band { position:absolute; top:70px; height:28px; width:84px; border-radius:8px;
  background:repeating-linear-gradient(90deg,var(--c2) 0 14px,#3ab5ab 14px 28px);
  border:2px solid #2a8f87; box-shadow:0 2px 3px rgba(0,0,0,.3);
  opacity:0; transform:scaleX(.6); transition:opacity .4s, transform .4s, left .6s ease; }
.band.on { opacity:1; transform:none; transition-delay:.55s,.55s,0s; }
.blbl { position:absolute; top:158px; width:110px; text-align:center; font-weight:bold; font-size:1.3rem;
  color:var(--c2); opacity:0; transition:opacity .4s, left .6s ease; }
.blbl.on { opacity:1; transition-delay:.6s,0s; }

.controls { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin:20px 0 10px; }
.btn { font:inherit; font-size:1.3rem; font-weight:bold; padding:12px 22px; border-radius:18px; border:0;
  background:var(--c2); color:#fff; box-shadow:0 4px 0 #2a8f87; cursor:pointer; }
.btn:active { transform:translateY(2px); box-shadow:0 2px 0 #2a8f87; }
.btn:disabled { opacity:.4; cursor:default; }
.btn.alt { background:var(--c4); box-shadow:0 4px 0 #4b44c4; }
input[type=range] { width:min(420px,90%); accent-color:var(--c4); }