/* Shared reading surface; existing FreeStory colors, typography and buttons. */
dialog.story-preview.story-details { width: 820px; max-width: calc(100vw - 64px); max-height: calc(100dvh - 64px); padding: 0; overflow: hidden; border-radius: 18px; background: #1c1a20; }
dialog.story-preview.story-details[open] { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.story-details-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; border-bottom: 1px solid rgb(255 255 255 / 7%); }
.story-details-header h2 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.2px; }
.story-details .preview-close { position: static; flex: 0 0 32px; background: transparent; }
.story-details .preview-close:disabled { opacity: .4; cursor: wait; }
.story-details-scroll { min-height: 0; overflow-y: auto; padding: 24px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 18%) transparent; }
.story-details-hero { display: grid; grid-template-columns: 160px minmax(0,1fr); align-items: start; gap: 26px; }
.story-details .preview-cover { width: 160px; height: 240px; border-radius: 10px; object-fit: cover; background: rgb(255 255 255 / 5%); }
.story-details-summary { min-width: 0; }
.story-details-summary h3 { margin: 2px 0 6px; color: #fff; font-size: 22px; font-weight: 650; line-height: 1.4; letter-spacing: -.5px; overflow-wrap: anywhere; }
.story-one-line { margin: 0 0 16px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.story-details-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.story-details-badges span { padding: 5px 9px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 6px; color: var(--text-secondary); font-size: 11px; font-weight: 550; line-height: 1.4; }
.story-details-badges span:first-child { color: #fff; background: rgb(255 255 255 / 7%); }
.story-details-tags { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 18px; color: var(--text-muted); font-size: 12px; line-height: 1.7; }
.story-saved-plays { margin: 15px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.story-details-section { margin-top: 26px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 8%); }
.story-details-section h3, .story-guide-section summary { margin: 0 0 16px; font-size: 16px; line-height: 1.5; font-weight: 650; letter-spacing: -.2px; }
.story-details .story-detail-text { color: var(--text-secondary); font-size: 14px; font-weight: 450; line-height: 1.85; }
.story-details .story-detail-text p { font-weight: inherit; }
.story-details .message-body > :first-child { margin-top: 0; }
.story-details .message-body > :last-child { margin-bottom: 0; }
.story-details .message-body p { margin: 0 0 12px; white-space: pre-wrap; }
.story-details .message-body p + p { margin-top: 0; }
.story-details .message-body img { display: block; width: 100%; max-width: 100%; height: auto; margin: 16px 0; border-radius: 9px; }
.story-details .message-body blockquote { margin: 12px 0; padding-left: 18px; border-left: 3px solid rgb(255 255 255 / 28%); }
.story-details .message-body ul, .story-details .message-body ol { padding-left: 26px; }
.story-details .message-body li + li { margin-top: 6px; }
.story-details .message-body h1, .story-details .message-body h2, .story-details .message-body h3,
.story-details .message-body h4, .story-details .message-body h5, .story-details .message-body h6 { margin: 22px 0 12px; font-size: inherit; line-height: inherit; font-weight: 600; }
.story-details .message-body a { color: inherit; text-underline-offset: 3px; }
.story-details .message-body hr { margin: 20px 0; border: 0; border-top: 1px solid rgb(255 255 255 / 12%); }
.story-details .message-body :not(pre) > code { padding: 2px 6px; border-radius: 5px; background: rgb(255 255 255 / 7%); font-size: inherit; }
.story-details .message-body pre { overflow-x: auto; margin: 0; padding: 12px 18px; font-size: 14px; line-height: 1.6; white-space: pre; }
.story-details .message-body pre code { font: inherit; }
.story-details .message-body .message-info-block pre { font-family: inherit; white-space: pre-wrap; }
.story-details .message-body table { width: 100%; border-collapse: collapse; }
.story-details .message-body th, .story-details .message-body td { padding: 9px 12px; border: 1px solid rgb(255 255 255 / 12%); text-align: left; }
.story-details .message-body .code-copy > img { width: 16px; height: 16px; margin: 0; border-radius: 0; }
.story-details #story-prologue { color: #fff; font-size: 16px; line-height: 1.7; font-weight: 600; }
.story-details #story-prologue em { color: #8f8f8f; font-style: italic; font-weight: 500; }
.story-details #story-prologue strong { color: #fff; font-weight: 600; }
.story-text-viewport { overflow: hidden; }
.story-text-viewport.is-collapsed { max-height: 220px; }
#story-prologue-viewport.is-collapsed { max-height: 340px; }
.story-text-viewport.is-collapsed.has-overflow { mask-image: linear-gradient(#000 75%,transparent); }
.story-view-all { width: 100%; height: 36px; margin-top: 14px; padding: 0 16px; border: 0; border-radius: 8px; background: rgb(255 255 255 / 5%); color: #fff; font-size: 12px; font-weight: 650; }
.story-view-all:hover { background: rgb(255 255 255 / 10%); }
.story-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.story-settings-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.story-settings-field label { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.story-guide-section summary { cursor: pointer; }
.story-settings-hint { margin: 14px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.7; }
.story-details .story-play-button:disabled { cursor: not-allowed; }
.story-prologue-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.story-prologue-heading span { color: var(--text-muted); font-size: 11px; }
.story-last-update time { color: var(--text-muted); font-size: 12px; }
.story-details-footer { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 18px 24px; border-top: 1px solid rgb(255 255 255 / 7%); background: #1c1a20; }
.story-resume-note { flex: 1; min-width: 160px; margin: 0 12px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.6; }
.story-play-button { flex: 0 0 auto; min-width: 112px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 7%); color: #fff; font-size: 13px; font-weight: 650; }
.story-play-button:hover:not(:disabled) { background: rgb(255 255 255 / 13%); }
.story-play-button.primary { background: #fff; color: #151515; }
.story-play-button.primary:hover:not(:disabled) { background: #e4e2e8; }
.story-play-button:disabled { cursor: wait; opacity: .45; }
.story-details-status { flex: 1 0 100%; margin: 0; color: #f1a5ac; font-size: 12px; line-height: 1.7; }
.creator-cover-button { display: block; width: 80px; padding: 0; border: 0; border-radius: 8px; background: transparent; }
.creator-title-button { display: block; width: 100%; padding: 0; overflow: hidden; border: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; letter-spacing: inherit; text-align: left; text-overflow: ellipsis; white-space: inherit; }
.creator-title-button:hover { color: #d8d3e0; }
.creator-copy.is-openable { cursor: pointer; }
.creator-stories.is-grid .creator-cover-button { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .story-view-all, .story-play-button, .creator-title-button { transition: background-color 180ms ease,color 180ms ease; }
}