/* Earworm lesson. All rules scoped under .ew-* */
.ew-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ew-hero img { width: 240px; }
.ew-lab { fill: var(--dim); font: 700 12.5px var(--sans); }

/* a tune as dots */
.ew-tune { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.ew-staff { stroke: var(--line); stroke-width: 1; }
.ew-seg { stroke: var(--violet-bright); stroke-width: 3; stroke-linecap: round; opacity: .5; transition: stroke .2s, opacity .2s; }
.ew-n { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 1.5; transition: fill .08s; }
.ew-n.on { fill: var(--gold); stroke: #fff; }
.ew-tune.quiet .ew-seg { opacity: .18; }
.ew-tune.still.glow .ew-n { fill: var(--gold); stroke: #fff; }
.ew-tune.still.dim { opacity: .5; }

/* the song and its loop */
.ew-sec rect { fill: var(--raised); stroke: var(--line-strong); }
.ew-sec.chorus rect { fill: #262046; stroke: var(--violet); }
.ew-sec text { fill: var(--text); font: 700 12.5px var(--sans); }
.ew-sec.hot rect { fill: var(--gold); stroke: var(--gold); }
.ew-sec.hot text { fill: #2A1B00; }
.ew-loop { opacity: 0; transition: opacity .4s; }
.ew-loop path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.ew-loop text { fill: var(--gold); font: 700 13px var(--sans); }
.ew-song.looping .ew-loop { opacity: 1; }
.ew-song.looping .ew-sec:not(.hot) { opacity: .45; }

/* the head */
.ew-headw { max-width: 290px; margin: 0 auto; }
.ew-skull { fill: var(--surface); stroke: var(--violet-bright); stroke-width: 2.5; }
.ew-wave path { fill: none; stroke: var(--violet-bright); stroke-width: 3; stroke-linecap: round; }
.ew-voice circle { fill: var(--gold); }
.ew-voice text, .ew-lab2 { fill: var(--dim); font: 700 12.5px var(--sans); }
.ew-headw.sing .ew-voice circle { animation: ewSing .5s ease-in-out 3; }
.ew-headw.sing .ew-wave path { stroke: var(--gold); }
@keyframes ewSing { 50% { transform: scale(1.35); } }
.ew-voice circle { transform-box: fill-box; transform-origin: center; }

/* gum */
.ew-gum { display: flex; flex-direction: column; gap: 8px; }
.ew-grow { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 8px; }
.ew-grow span { font: 700 13.5px var(--sans); color: var(--text); }
.ew-gbar { height: 24px; border-radius: 8px; background: var(--raised); overflow: hidden; }
.ew-gbar i { display: block; height: 100%; width: 0; background: var(--violet-bright); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.ew-grow[data-i="2"] .ew-gbar i { background: var(--mint); }
.ew-note { margin: 0; font-size: 12.5px; color: var(--faint); opacity: 0; transition: opacity .4s; }
.ew-gum.shown .ew-note { opacity: 1; }

/* the cut-off song */
.ew-cut { display: flex; flex-direction: column; gap: 16px; }
.ew-cbar span { display: block; margin-bottom: 6px; font: 700 14px var(--sans); color: var(--text); }
.ew-cbar i { display: block; height: 30px; border-radius: 10px; background: repeating-linear-gradient(90deg, var(--violet) 0 26px, var(--violet-deep) 26px 30px); }
.ew-cbar.half { position: relative; }
.ew-cbar.half i { width: 52%; }
.ew-cbar.half b { position: absolute; left: 53%; bottom: 2px; font-size: 22px; color: var(--gold); }

@media (max-height: 700px) {
  .ew-hero img { width: 200px; }
  .ew-headw { max-width: 240px; }
}