.an-note { margin: 0; font: 500 13px var(--ui); color: var(--muted); }
.an-title { font: 700 18px var(--ui); }
.an-title:empty { display: none; }
.sk-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fbfaf6; }
.sk-stage.vertical { aspect-ratio: 9 / 16; max-width: 360px; }
.sk-stage.square { aspect-ratio: 1; max-width: 480px; }
.an-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font: 500 14px var(--ui); }
.an-steps:empty { display: none; }
.an-steps li { color: var(--muted); }
.an-steps li.ready { color: var(--ink); }
.an-steps li .st { font: 600 12px var(--ui); margin-left: 6px; color: var(--brand); }
.an-steps li.ready .st { color: #15803d; }
.an-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.an-recent a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); font: 600 13px var(--ui); }
.an-recent img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #fbfaf6; }
.sk-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fbfaf6; }
.an-steps li.playable { color: var(--ink); }
.an-steps li.playable .st, .an-steps li.ready .st { color: #15803d; }
.an-steps li.playing { font-weight: 700; }
/* minmax(0, 1fr) + min-width 0: a long option name (e.g. a voice) can no longer push its select past the screen edge */
#anForm .sk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#anForm .sk-grid label { min-width: 0; }
#anForm .sk-grid select { width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 760px) { #anForm .sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }