.post-body figure[data-zoomable] { padding: 10px; border: 1px solid var(--border); border-radius: 24px; background: var(--bg-sec); }
.post-body figure[data-zoomable] svg { vertical-align: middle; }
.post-body figure[data-zoomable] figcaption { padding: 8px 16px 12px; line-height: 1.6; }
.story-launch, .ai-story button { font: inherit; color: var(--text); background: var(--bg-sec); border: 1px solid var(--border); border-radius: 10px; padding: 11px 16px; cursor: pointer; }
.story-launch { display: block; margin-top: 24px; border-color: var(--acc); }
.story-launch:hover, .ai-story button:hover { border-color: var(--acc); }
.story-launch:focus-visible, .ai-story :focus-visible { outline: 3px solid var(--acc); outline-offset: 4px; }
.ai-story { color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 0; width: min(1100px, calc(100vw - 32px)); max-width: none; height: min(900px, calc(100dvh - 32px)); max-height: none; }
.ai-story::backdrop { background: rgb(3 13 18 / 88%); backdrop-filter: blur(8px); }
.ai-story[open] { display: flex; flex-direction: column; margin: auto; }
.ai-story-header, .ai-story-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; flex-shrink: 0; }
.ai-story-header { border-bottom: 1px solid var(--border); }
.ai-story-footer { border-top: 1px solid var(--border); }
.ai-story-label { font: 12px 'JetBrains Mono', monospace; letter-spacing: .08em; color: var(--muted); }
.ai-story-progress { width: 100%; height: 4px; flex-shrink: 0; accent-color: var(--acc); border: 0; }
.ai-story-content { padding: 28px 36px; overflow: auto; min-height: 0; flex: 1; }
.ai-story-content h2 { margin: 0 0 20px; font-size: clamp(24px, 3vw, 36px); line-height: 1.2; }
.ai-story-content p, .ai-story-content li { font-size: 17px; line-height: 1.75; }
.ai-story-content p { margin: 0 0 18px; }
.ai-story-content figure { margin: 24px 0; overflow-x: auto; }
.ai-story-content svg { display: block; width: 100%; min-width: 640px; height: auto; }
.ai-story-content figcaption { color: var(--muted); font-size: 14px; line-height: 1.6; margin-top: 12px; }
.ai-story-content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-story button:disabled { opacity: .4; cursor: default; }
.ai-story-count { color: var(--muted); font-size: 14px; }
@media (max-width: 600px) {
  .post-body figure[data-zoomable] { overflow-x: auto; border-radius: 16px; }
  .post-body figure[data-zoomable] svg { min-width: 640px; }
  .ai-story { width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 14px; }
  .ai-story-header, .ai-story-footer { padding: 12px; gap: 8px; }
  .ai-story-content { padding: 24px 18px; }
  .ai-story button { padding: 10px 12px; }
  .ai-story-label { max-width: 150px; }
}