.poem-animation { margin: 28px 20px; border: 1px solid #e1e6df; border-radius: 14px; overflow: hidden; background: #fafbf7; }
.poem-animation-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; }
.poem-animation-eyebrow { font-size: 11px; letter-spacing: .18em; color: #687b73; }
.poem-animation-heading h2 { margin: 5px 0 0; font: 23px/1.4 Georgia, "Songti SC", "SimSun", serif; color: #304e46; letter-spacing: .12em; }
.poem-animation-control { flex-shrink: 0; border: 1px solid #859b8b; border-radius: 20px; padding: 7px 15px; background: transparent; color: #365a4f; cursor: pointer; font-size: 13px; }
.poem-animation-control:hover { background: #eaf0e7; }
.poem-animation-control:focus-visible { outline: 2px solid #365a4f; outline-offset: 3px; }
.poem-animation-control[hidden] { display: none; }
.poem-animation-stage { width: 100%; height: 420px; height: clamp(300px, 48vw, 460px); background: radial-gradient(ellipse at 50% 110%, #314e50 0, #14232e 65%); }
.poem-animation-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.poem-animation-status { margin: 0; padding: 10px 22px; color: #6c7d74; font-size: 12px; }
.poem-animation-empty { padding: 48px 20px; text-align: center; background: linear-gradient(145deg, #e8eee5, #f6f3e9); color: #5b7268; }
.poem-animation-empty span { font: 20px/1.8 Georgia, "Songti SC", "SimSun", serif; letter-spacing: .12em; }
.poem-animation-empty p { margin: 12px 0 0; font-size: 13px; }
@media (max-width: 576px) {
    .poem-animation { margin: 24px 10px; }
    .poem-animation-heading { padding: 15px; }
    .poem-animation-heading h2 { font-size: 21px; }
    .poem-animation-empty span { font-size: 17px; }
}