/* StanzaAnimator engine styles. Themed by --display, --fg, --accent, --accent-2. */
.sa { position: relative; min-width: max-content; padding-left: 44px; font-family: var(--display); font-style: var(--stanza-style, normal); font-size: 26px; line-height: 1.75; }
@media (max-width: 560px) { .sa { padding-left: 22px; } }
.sa-line { white-space: nowrap; transition: opacity .7s ease, filter .7s ease, letter-spacing .9s ease; }
.sa-line.is-far { opacity: .38; filter: blur(1.2px); letter-spacing: .04em; }
.sa-coda { margin-top: .9em; font-style: italic; opacity: 0; transform: translateY(6px); transition: opacity .8s ease, transform .8s ease; }
.sa-coda.is-shown { opacity: 1; transform: none; }
.sa-w { transition: opacity .5s ease, color .5s ease; }
.sa-w.is-dim { opacity: .28; }
.sa-w.is-focus { color: var(--accent); }
.sa-ch { display: inline-block; transition: transform .6s cubic-bezier(.3,.6,.3,1); white-space: pre; }
.sa-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sa-link { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; }
.sa-link.is-anim { transition: stroke-dashoffset 1s ease; }
.sa-ticks { stroke: var(--accent-2); stroke-width: 1; transition: opacity .8s ease; }
.sa-extract { min-height: 2.6em; margin-top: 1.1em; display: flex; align-items: center; }
.sa-phrase { font-size: 1.55em; line-height: 1.2; display: flex; gap: .3em; color: var(--accent); opacity: 0; transition: opacity .5s ease; }
.sa-extract.is-shown .sa-phrase { opacity: 1; }
.sa-pw { display: inline-block; transform-origin: 0 0; }
.sa-pw.is-flying { transition: transform 1.1s cubic-bezier(.5,0,.2,1); }

/* Player: stage + step panel */
.player { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 960px) { .player { grid-template-columns: minmax(0, 1fr); } }
.stage { background: var(--surface); border: 1px solid var(--ink); overflow-x: auto; padding: 40px 28px 28px; }
@media (max-width: 560px) { .stage { padding: 24px 10px 16px; } }
.panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel h3 { margin: 0; font: 400 30px/1.15 var(--display); text-wrap: balance; }
.caption { margin: 0; max-width: 60ch; min-height: 6.6em; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; }
.steps { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.steps button {
  width: 100%; text-align: left; display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: baseline;
  background: transparent; border: 0; border-bottom: 1px solid var(--rule); color: var(--muted);
  font: 14px/1.3 var(--body); padding: 11px 2px; min-height: 44px; cursor: pointer;
}
.steps button:hover { color: var(--fg); }
.steps .n { font-size: 11px; font-variant-numeric: tabular-nums; }
.steps button[aria-current="step"] { color: var(--fg); }
.steps button[aria-current="step"] .n { color: var(--accent); }
.steps button.key .t::after { content: " ●"; color: var(--accent); font-size: 9px; vertical-align: 2px; }