.word-panel h3 { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.word-panel h3 .muted { font-size: 14px; font-weight: 400; }

.row { margin: 6px 0 2px; }
.row-label { font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.stage {
  position: relative; overflow: visible;
  background: #fff; border: 1px dashed var(--line); border-radius: 10px;
  touch-action: manipulation; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

.a-text, .a-clone, .a2-text, .ov-text {
  position: absolute; top: 0; white-space: pre;
  font-family: "Trad", cursive; font-feature-settings: "calt"; font-weight: 400;
}
.a-text { color: transparent; }
.a-text .probe { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.a-lift { position: absolute; inset: 0; transition: transform 180ms ease-out; pointer-events: none; }
.a-lift .a-clone { left: 0; }
.a-lift.lifted { transform: translateY(-0.14em); filter: drop-shadow(0 4px 4px rgb(43 42 40 / 0.35)); }
.a-clone.vocale { color: var(--red); }
.a-clone.consonante { color: var(--blue); }

.a2-text .vocale { color: var(--red); }
.a2-text .consonante { color: var(--blue); }
.a2-text span { position: relative; top: 0; transition: top 180ms ease-out; }
.a2-text span.lifted { top: -0.14em; }

.word-b { position: absolute; overflow: visible; }
.word-b .letter.vocale path { fill: var(--red); }
.word-b .letter.consonante path { fill: var(--blue); }
.word-b .letter.altro path { fill: var(--ink); }
.word-b .base { transition: transform 180ms ease-out; }
.word-b .letter.lifted .base { transform: translateY(150px); }

.overlay .ov-text { color: rgb(230 40 40); mix-blend-mode: multiply; }
.overlay .word-b path { fill: rgb(40 90 230) !important; }

.areas { position: absolute; inset: 0; pointer-events: none; }
.area {
  position: absolute; top: 4px; bottom: 4px;
  border-left: 1px solid rgb(29 78 158 / 0.5); border-right: 1px solid rgb(29 78 158 / 0.5);
  background: rgb(29 78 158 / 0.06);
}
.area:nth-child(even) { background: rgb(214 40 40 / 0.06); border-color: rgb(214 40 40 / 0.5); }
.area .tag { position: absolute; bottom: 0; left: 2px; font-size: 11px; color: var(--muted); font-family: "Andika", sans-serif; }
.zone { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgb(43 42 40 / 0.35); }
.hide-areas .areas { display: none; }
.hide-a2 .row.a2 { display: none; }

.facts { font-size: 13px; color: var(--muted); margin-top: 6px; }
.facts b { color: var(--ink); font-weight: 400; }