:root {
  color-scheme: dark;
  --story-bg: #111312;
  --story-panel: #171a18;
  --story-panel-2: #1e211f;
  --story-line: #303530;
  --story-line-soft: #262a27;
  --story-text: #f1f2ed;
  --story-muted: #9da29b;
  --story-green: #82b89b;
  --story-green-strong: #a8d6b9;
  --story-coral: #d67d68;
  --story-gold: #c8a75b;
  --story-red: #ce6f72;
  --sidebar-width: 252px;
  --header-height: 66px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { overflow-x: hidden; background: var(--story-bg); color: var(--story-text); font-family: Inter, "Microsoft YaHei", sans-serif; letter-spacing: 0; }
button, input, select, textarea { color: inherit; font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.story-app { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.story-sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: var(--sidebar-width); display: flex; flex-direction: column; padding: 18px 14px; border-right: 1px solid var(--story-line); background: #0d0f0e; box-shadow: 12px 0 40px rgba(0,0,0,.14); }
.story-brand { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 6px; color: var(--story-text); text-decoration: none; }
.story-brand-mark { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; overflow: hidden; border: 1px solid rgba(190,179,255,.25); border-radius: 13px; background: #11101d; box-shadow: 0 12px 30px rgba(124,105,230,.18), inset 0 1px 0 rgba(255,255,255,.08); }
.story-brand .brand-logo { width: 100%; height: 100%; display: block; }
.story-brand-copy { min-width: 0; display: grid; align-content: center; }
.story-brand .brand-wordmark { display: inline-flex; align-items: baseline; gap: 1px; width: fit-content; overflow: visible; color: #fff; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 18px; font-weight: 720; line-height: 1.05; letter-spacing: 0; text-overflow: clip; white-space: nowrap; }
.story-brand .brand-wordmark span { display: inline; }
.story-brand .brand-wordmark span:first-child { color: #fff; }
.story-brand .brand-wordmark span:last-child { color: #d9c8ff; font-family: "Playfair Display", Georgia, serif; font-size: 19px; font-style: italic; font-weight: 650; text-shadow: 0 0 18px rgba(216,149,207,.22); }
.story-brand .brand-byline { margin-top: 4px; color: #777482; font-family: Inter, sans-serif; font-size: 7px; font-weight: 650; line-height: 1.1; letter-spacing: .035em; text-transform: uppercase; }
.story-new-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; margin: 22px 2px 18px; border: 1px solid #8fc2a5; border-radius: 6px; background: #8fc2a5; color: #102017; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.story-new-button:hover { background: #a9d6ba; }
.story-new-button .material-symbols-outlined { font-size: 19px; }
.story-sidebar-heading { display: flex; justify-content: space-between; padding: 0 7px 8px; color: #777e77; font-size: 11px; font-weight: 700; }
.story-sidebar-heading span:last-child { font-variant-numeric: tabular-nums; }
.story-project-list { min-height: 0; display: grid; gap: 4px; overflow-y: auto; }
.story-project-item { position: relative; width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.story-project-item:hover { background: #171a18; }
.story-project-item.is-active { border-color: #3d5145; background: #1a211d; }
.story-project-item.is-active::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: -1px; width: 2px; border-radius: 2px; background: var(--story-green); box-shadow: 0 0 12px rgba(130,184,155,.55); }
.story-project-cover { width: 34px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: #252a26; color: #7e887f; }
.story-project-cover img { width: 100%; height: 100%; object-fit: cover; }
.story-project-cover .material-symbols-outlined { font-size: 18px; }
.story-project-copy { min-width: 0; display: grid; gap: 4px; }
.story-project-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.story-project-copy small { color: #7e847e; font-size: 9px; }
.story-project-empty { display: grid; justify-items: center; gap: 6px; padding: 30px 10px; color: #656a65; font-size: 11px; text-align: center; }
.story-project-empty .material-symbols-outlined { font-size: 25px; }
.story-global-nav { display: grid; gap: 3px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--story-line-soft); }
.story-global-nav a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 9px; border-radius: 5px; color: #929891; font-size: 11px; font-weight: 650; text-decoration: none; }
.story-global-nav a:hover { color: var(--story-text); background: #171a18; }
.story-global-nav .material-symbols-outlined { font-size: 18px; }

.story-main { min-width: 0; grid-column: 2; }
.story-header { position: sticky; z-index: 30; top: 0; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; border-bottom: 1px solid var(--story-line); background: rgba(17, 19, 18, .94); backdrop-filter: blur(16px); }
.story-header-title { min-width: 0; display: grid; gap: 3px; }
.story-header-title small { color: var(--story-green); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.story-header-title strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.story-account-actions { display: flex; align-items: center; gap: 8px; }
.story-help-button { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid var(--story-line); border-radius: 5px; background: #171a18; color: #929891; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.story-help-button:hover { color: var(--story-text); border-color: #59615a; background: #1c201d; transform: translateY(-1px); }
.story-help-button .material-symbols-outlined { font-size: 18px; }
.color-mode-toggle { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid var(--story-line); border-radius: 5px; background: #1a1d1b; color: var(--story-text); font-size: 10px; font-weight: 700; }
.color-mode-toggle .material-symbols-outlined { font-size: 16px; }
.story-sync-state { display: flex; align-items: center; gap: 6px; color: #7f867f; font-size: 10px; }
.story-sync-state i { width: 6px; height: 6px; border-radius: 50%; background: #686f69; }
.story-sync-state.is-synced { color: #a7b9ac; }
.story-sync-state.is-synced i { background: var(--story-green); box-shadow: 0 0 0 4px rgba(130,184,155,.1); }
.story-text-button, .story-credit { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid var(--story-line); border-radius: 5px; background: #1a1d1b; color: var(--story-text); font-size: 11px; font-weight: 700; text-decoration: none; }
.story-credit .material-symbols-outlined { color: var(--story-gold); font-size: 16px; }
.story-credit strong { font-variant-numeric: tabular-nums; }

.story-setup-view { --story-preview-width: 420px; width: min(1600px, calc(100% - 32px)); min-height: calc(100vh - var(--header-height)); display: grid; grid-template-columns: minmax(480px, 1fr) 28px minmax(300px, var(--story-preview-width)); align-items: center; gap: 0; margin: 0 auto 0 16px; padding: 40px 0 64px; }
.story-setup-copy { align-self: start; position: sticky; top: 122px; padding-top: 36px; }
.story-kicker { color: var(--story-coral); font-size: 10px; font-weight: 800; }
.story-setup-copy h1 { max-width: 520px; margin: 14px 0 18px; font-size: 48px; line-height: 1.08; letter-spacing: 0; }
.story-setup-copy > p { max-width: 480px; margin: 0; color: var(--story-muted); font-size: 14px; line-height: 1.9; }
.story-setup-steps { display: grid; gap: 14px; margin-top: 42px; }
.story-setup-steps span { display: flex; align-items: center; gap: 13px; color: #aeb3ac; font-size: 12px; }
.story-setup-steps b { width: 32px; color: var(--story-gold); font-size: 10px; font-variant-numeric: tabular-nums; }
.story-project-form { position: relative; width: 100%; display: grid; gap: 18px; padding: 28px; overflow: hidden; border: 1px solid var(--story-line); border-radius: 8px; background: var(--story-panel); box-shadow: 0 24px 70px rgba(0,0,0,.2); animation: story-rise .42s ease both; }
.story-project-form::before { content: ""; position: absolute; top: 0; right: 28px; left: 28px; height: 1px; background: var(--story-green); opacity: .72; transform-origin: left; animation: story-line-in .7s ease both; }
.story-generated-preview { align-self: start; min-width: 0; display: grid; grid-template-rows: auto auto auto auto; gap: 14px; padding: 20px; border: 1px solid var(--story-line); border-radius: 8px; background: var(--story-panel); box-shadow: 0 24px 70px rgba(0,0,0,.16); animation: story-rise .48s .06s ease both; }
.story-generated-preview-head, .story-generated-preview-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.story-generated-preview-head > div:first-child, .story-generated-preview-meta > div { min-width: 0; display: grid; gap: 4px; }
.story-generated-preview-head small { color: var(--story-coral); font-size: 8px; font-weight: 800; }
.story-generated-preview-head strong { font-size: 13px; }
.story-generated-preview-actions { display: flex; align-items: center; gap: 6px; }
.story-generated-preview-actions > span { padding: 4px 7px; border: 1px solid #3c4e42; border-radius: 4px; background: #172019; color: #9fc5ab; font-size: 8px; font-weight: 800; }
.story-generated-preview-actions button { width: 28px; height: 28px; display: none; place-items: center; padding: 0; border: 1px solid #383e39; border-radius: 4px; background: #171a18; color: #9aa19a; }
.story-generated-preview-actions .material-symbols-outlined { font-size: 18px; }
.story-generated-preview figure { position: relative; width: 100%; min-height: 180px; aspect-ratio: var(--preview-aspect, 16 / 9); display: grid; place-items: center; margin: 0; overflow: hidden; border: 1px solid #2e332f; border-radius: 6px; background: #0d100e; }
.story-generated-preview figure img { width: 100%; height: 100%; object-fit: contain; }
.story-generated-preview-empty { display: grid; justify-items: center; gap: 8px; color: #737a73; text-align: center; }
.story-generated-preview-empty .material-symbols-outlined { font-size: 34px; }
.story-generated-preview-empty strong { font-size: 10px; }
.story-generated-preview-controls { position: absolute; inset: 50% 8px auto; display: flex; justify-content: space-between; pointer-events: none; transform: translateY(-50%); }
.story-generated-preview-controls button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; pointer-events: auto; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(9,11,10,.76); color: #fff; }
.story-generated-preview-controls button:disabled { visibility: hidden; }
.story-generated-preview-controls .material-symbols-outlined { font-size: 20px; }
.story-generated-preview-thumbs { min-width: 0; display: flex; gap: 6px; overflow-x: auto; }
.story-generated-preview-thumbs:empty { display: none; }
.story-generated-preview-thumb { flex: 0 0 58px; height: 42px; padding: 0; overflow: hidden; border: 1px solid #363c37; border-radius: 4px; background: #0f1210; opacity: .52; }
.story-generated-preview-thumb.is-active { border-color: var(--story-green); opacity: 1; }
.story-generated-preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.story-generated-preview-meta { padding-top: 2px; }
.story-generated-preview-meta strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.story-generated-preview-meta small { color: #777e77; font-size: 9px; }
.story-generated-preview-meta .story-icon-button { flex: 0 0 auto; display: grid; }
.story-setup-resizer { position: relative; align-self: stretch; min-height: 180px; outline: none; cursor: col-resize; touch-action: none; }
.story-setup-resizer::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 13px; width: 2px; border-radius: 2px; background: #353b36; transition: width .16s ease, left .16s ease, background .16s ease, box-shadow .16s ease; }
.story-resizer-grip { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; width: 24px; height: 34px; border: 1px solid #4d554f; border-radius: 5px; background: #171a18; color: #8f978f; font-size: 18px; pointer-events: none; transform: translate(-50%,-50%); }
.story-setup-resizer > button { position: absolute; z-index: 2; top: calc(50% + 25px); left: 2px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 1px solid #404741; border-radius: 4px; background: #171a18; color: #8f978f; opacity: .68; cursor: pointer; }
.story-setup-resizer > button:hover, .story-setup-resizer > button:focus-visible { border-color: var(--story-green); color: var(--story-green-strong); opacity: 1; }
.story-setup-resizer > button .material-symbols-outlined { font-size: 15px; }
.story-setup-resizer:hover::before, .story-setup-resizer:focus-visible::before, body.is-story-resizing .story-setup-resizer::before { left: 12px; width: 4px; background: var(--story-green); box-shadow: 0 0 12px rgba(130,184,155,.42); }
.story-setup-resizer:hover .story-resizer-grip, .story-setup-resizer:focus-visible .story-resizer-grip, body.is-story-resizing .story-resizer-grip { border-color: var(--story-green); background: #1d2821; color: var(--story-green-strong); }
body.is-story-resizing { cursor: col-resize; user-select: none; }
.story-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.story-field { min-width: 0; display: grid; gap: 7px; }
.story-field > span, .story-field-heading > label, .story-reference-control > span, .story-plan-box > span { color: #aab0a9; font-size: 10px; font-weight: 750; }
.story-field-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.story-ai-write-button { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid #4c6657; border-radius: 5px; background: #19241d; color: #a9d0b6; font-size: 9px; font-weight: 800; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.story-ai-write-button:hover { border-color: #72947f; background: #1e2c23; transform: translateY(-1px); }
.story-ai-write-button .material-symbols-outlined { font-size: 16px; }
.story-field input, .story-field textarea, .story-field select { width: 100%; min-height: 40px; border: 1px solid #373c38; border-radius: 5px; outline: none; background: #111412; padding: 9px 11px; color: var(--story-text); font-size: 12px; }
.story-field textarea { resize: vertical; line-height: 1.65; }
.story-field input:focus, .story-field textarea:focus, .story-field select:focus { border-color: #709c83; box-shadow: 0 0 0 3px rgba(112,156,131,.1); }
.story-field small { justify-self: end; color: #6f756f; font-size: 9px; }
.story-toggle-row { min-height: 58px; display: grid; grid-template-columns: 0 minmax(0,1fr) 38px; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #353a36; border-radius: 6px; background: #131613; cursor: pointer; }
.story-toggle-row input { width: 0; height: 0; opacity: 0; }
.story-toggle-row span { display: grid; gap: 3px; }
.story-toggle-row b { font-size: 11px; }
.story-toggle-row small { color: #7d847d; font-size: 9px; }
.story-toggle-row i { position: relative; width: 36px; height: 20px; border-radius: 10px; background: #343934; }
.story-toggle-row i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #9ba19b; transition: transform .18s ease, background .18s ease; }
.story-toggle-row:has(input:checked) { border-color: #466353; background: #172019; }
.story-toggle-row input:checked ~ i { background: #557963; }
.story-toggle-row input:checked ~ i::after { transform: translateX(16px); background: #dcece1; }
.story-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 4px; }
.story-form-actions > span { display: flex; align-items: center; gap: 6px; color: #7f857f; font-size: 9px; }
.story-form-actions .material-symbols-outlined { font-size: 16px; }
.story-primary-button, .story-secondary-button, .story-icon-text-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 5px; font-size: 11px; font-weight: 800; white-space: nowrap; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.story-primary-button { border: 1px solid #94c8aa; background: #94c8aa; color: #122017; }
.story-primary-button:hover { background: #add8bd; }
.story-secondary-button, .story-icon-text-button { border: 1px solid #3a403b; background: #1c201d; color: #d8dcd7; }
.story-secondary-button:hover, .story-icon-text-button:hover { border-color: #5b655d; background: #232824; }
.story-primary-button:hover:not(:disabled), .story-new-button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(130,184,155,.16); }
.story-primary-button:active:not(:disabled), .story-secondary-button:active:not(:disabled), .story-icon-text-button:active:not(:disabled), .story-new-button:active { transform: translateY(0); }
.story-secondary-button.is-active { border-color: #658b74; background: #1d2a22; color: #b9ddc5; }
.story-primary-button:disabled, .story-secondary-button:disabled, .story-icon-text-button:disabled { cursor: not-allowed; opacity: .45; }
.story-primary-button .material-symbols-outlined, .story-secondary-button .material-symbols-outlined, .story-icon-text-button .material-symbols-outlined { font-size: 17px; }

.story-editor { padding: 22px 24px 56px; }
.story-editor-bar { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 2px 0 20px; }
.story-editor-bar > div:first-child { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }
.story-editor-bar h1 { grid-column: 1 / -1; max-width: 680px; overflow: hidden; margin: 7px 0 3px; font-size: 27px; text-overflow: ellipsis; white-space: nowrap; }
.story-editor-bar small { grid-column: 1 / -1; color: var(--story-muted); font-size: 10px; }
.story-project-meter { grid-column: 1 / -1; width: min(280px, 100%); height: 3px; margin-top: 7px; overflow: hidden; border-radius: 2px; background: #292e2a; }
.story-project-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--story-green); box-shadow: 0 0 14px rgba(130,184,155,.44); transition: width .45s ease; }
.story-status { width: fit-content; padding: 4px 7px; border: 1px solid #4c6657; border-radius: 4px; background: #17221b; color: #a9d0b7; font-size: 9px; font-weight: 800; }
.story-editor-actions { display: flex; gap: 7px; }
.story-action-select { min-height: 38px; padding: 0 28px 0 10px; border: 1px solid #3a403b; border-radius: 5px; outline: none; background: #1c201d; color: #d8dcd7; font-size: 10px; }
.story-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 18px; }
.story-workspace { min-width: 0; }
.story-tabs { display: flex; align-items: end; gap: 4px; height: 46px; padding: 0 5px; border-bottom: 1px solid var(--story-line); }
.story-tabs button { position: relative; height: 45px; padding: 0 15px; border: 0; background: transparent; color: #888f88; font-size: 11px; font-weight: 700; transition: color .16s ease; }
.story-tabs button.is-active { color: var(--story-text); }
.story-tabs button.is-active::after { content: ""; position: absolute; right: 14px; bottom: -1px; left: 14px; height: 2px; background: var(--story-coral); animation: story-tab-in .2s ease both; }
.story-tab-panel { padding-top: 14px; }
.story-tab-panel:not([hidden]) { animation: story-panel-in .24s ease both; }
.story-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 10px; }
.story-toolbar-selection, .story-toolbar-actions { display: flex; align-items: center; gap: 9px; }
.story-toolbar-selection label, .story-toolbar-selection span { color: #8c938c; font-size: 10px; }
.story-toolbar-selection input { accent-color: var(--story-green); }
.story-chapter-list { display: grid; gap: 24px; }
.story-chapter { min-width: 0; }
.story-chapter-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 40px; padding: 0 4px; }
.story-chapter-head div { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.story-chapter-head h2 { margin: 0; font-size: 14px; }
.story-chapter-head span { color: #777e77; font-size: 9px; }
.story-scene-list { display: grid; gap: 8px; }
.story-scene { position: relative; min-width: 0; display: grid; grid-template-columns: 34px 168px minmax(0, 1fr) 40px; gap: 12px; align-items: stretch; padding: 10px; overflow: hidden; border: 1px solid var(--story-line-soft); border-radius: 7px; background: var(--story-panel); transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.story-scene::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #3e4540; opacity: 0; transition: opacity .18s ease, background .18s ease; }
.story-scene:hover { z-index: 1; transform: translateY(-2px); border-color: #3b443d; box-shadow: 0 14px 32px rgba(0,0,0,.16); }
.story-scene.is-selected { border-color: #587460; background: #19201b; }
.story-scene.is-selected::before, .story-scene.is-status-complete::before { opacity: 1; background: var(--story-green); }
.story-scene.is-stale { border-color: #685f42; }
.story-scene.is-stale::before { opacity: 1; background: var(--story-gold); }
.story-scene.is-status-queued::before, .story-scene.is-status-generating::before { opacity: 1; background: var(--story-coral); animation: story-status-pulse 1.25s ease-in-out infinite; }
.story-scene-select { display: flex; align-items: flex-start; justify-content: center; padding-top: 3px; }
.story-scene-select input { accent-color: var(--story-green); }
.story-scene-media { position: relative; width: 100%; min-height: 116px; aspect-ratio: var(--scene-aspect, 16 / 9); display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: #0d100e; color: #697069; }
.story-scene-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, opacity .25s ease; }
.story-scene:hover .story-scene-media img { transform: scale(1.025); }
.story-scene-media > .material-symbols-outlined { font-size: 27px; }
.story-scene-media-status { position: absolute; right: 5px; bottom: 5px; padding: 4px 6px; border-radius: 3px; background: rgba(10,12,10,.78); color: #dce2dc; font-size: 8px; font-weight: 800; }
.story-scene-copy { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(160px,.8fr); gap: 9px 12px; }
.story-scene-title-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.story-scene-number { color: var(--story-coral); font-size: 9px; font-weight: 800; }
.story-scene-title { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 13px; font-weight: 750; }
.story-scene-field { min-width: 0; display: grid; gap: 4px; }
.story-scene-field span { color: #747b74; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.story-scene-field textarea, .story-scene-field input, .story-scene-field select { width: 100%; min-height: 32px; padding: 6px 8px; border: 1px solid #303530; border-radius: 4px; outline: none; background: #121512; color: #dfe2dd; font-size: 10px; resize: vertical; }
.story-scene-field textarea:focus, .story-scene-field input:focus, .story-scene-field select:focus { border-color: #63806d; }
.story-scene-characters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.story-character-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 7px; border: 1px solid #3a403b; border-radius: 12px; background: #1b1f1c; color: #afb5ae; font-size: 9px; }
.story-character-chip input { accent-color: var(--story-green); }
.story-scene-menu { display: flex; flex-direction: column; gap: 5px; }
.story-scene-menu button, .story-inspector-head button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #333833; border-radius: 4px; background: #151815; color: #8d948d; transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease; }
.story-scene-menu button:hover { color: #fff; border-color: #59615a; }
.story-scene-menu button:hover { transform: translateX(-1px); }
.story-scene-menu .material-symbols-outlined { font-size: 16px; }
.story-add-row { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; border: 1px dashed #3d443e; border-radius: 6px; background: transparent; color: #8f968f; font-size: 10px; font-weight: 700; }
.story-add-row:hover { border-color: #647267; color: #d8ddd8; }
.story-add-row .material-symbols-outlined { font-size: 17px; }

.story-inspector { position: sticky; top: calc(var(--header-height) + 18px); display: grid; gap: 14px; padding: 17px; border: 1px solid var(--story-line); border-radius: 7px; background: var(--story-panel); box-shadow: 0 18px 44px rgba(0,0,0,.12); }
.story-inspector-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--story-line-soft); font-size: 11px; font-weight: 800; }
.story-inspector-head button { width: 28px; height: 28px; color: #a36e70; }
.story-inspector-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.story-toggle-compact { min-height: 50px; }
.story-reference-control, .story-plan-box, .story-queue-box { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid var(--story-line-soft); }
.story-reference-preview { min-height: 86px; display: grid; place-items: center; align-content: center; gap: 4px; overflow: hidden; border: 1px dashed #3c423d; border-radius: 5px; background: #111411; color: #747b74; }
.story-reference-preview img { width: 100%; max-height: 150px; object-fit: cover; }
.story-reference-preview .material-symbols-outlined { font-size: 23px; }
.story-reference-preview small { font-size: 9px; }
.story-upload-button { min-height: 32px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #3a403b; border-radius: 4px; background: #1b1f1c; color: #cbd0ca; font-size: 9px; font-weight: 700; cursor: pointer; }
.story-upload-button .material-symbols-outlined { font-size: 15px; }
.story-plan-box .story-secondary-button { width: 100%; }
.story-queue-box > span { display: flex; align-items: center; gap: 7px; color: #9fa59f; font-size: 9px; font-weight: 800; }
.story-queue-box i { width: 7px; height: 7px; border-radius: 50%; background: #626862; }
.story-queue-box i.is-active { background: var(--story-gold); box-shadow: 0 0 0 4px rgba(200,167,91,.1); animation: story-queue-pulse 1.15s ease-in-out infinite; }
.story-queue-box strong { font-size: 10px; line-height: 1.5; }
.story-queue-box button { width: fit-content; padding: 0; border: 0; background: transparent; color: var(--story-coral); font-size: 9px; }

.story-section-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 12px 4px 22px; border-bottom: 1px solid var(--story-line-soft); }
.story-section-intro h2 { margin: 7px 0 0; font-size: 20px; }
.story-section-intro p { max-width: 470px; margin: 0; color: var(--story-muted); font-size: 10px; line-height: 1.7; }
.story-cast-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 12px; }
.story-character { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--story-line-soft); border-radius: 7px; background: var(--story-panel); }
.story-character-reference { min-height: 188px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: #0e100f; color: #697069; }
.story-character-reference img { width: 100%; height: 100%; object-fit: cover; }
.story-character-reference .material-symbols-outlined { font-size: 28px; }
.story-character-fields { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.story-character-fields .story-field:first-child, .story-character-fields .story-field:nth-child(2), .story-character-actions { grid-column: 1 / -1; }
.story-character-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 3px; }
.story-character-actions button, .story-character-actions label { min-height: 29px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid #3a403b; border-radius: 4px; background: #1c201d; color: #d3d8d2; font-size: 8px; font-weight: 750; cursor: pointer; }
.story-character-actions .material-symbols-outlined { font-size: 14px; }
.story-character-actions button.is-approved { border-color: #557763; background: #17231b; color: #b9d9c3; }
.story-bible-content { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; padding-top: 12px; }
.story-memory-section { min-width: 0; padding: 15px; border-left: 2px solid var(--story-gold); background: var(--story-panel); }
.story-memory-section h3 { margin: 0 0 9px; font-size: 11px; }
.story-memory-section pre, .story-memory-section p { margin: 0; overflow-wrap: anywhere; color: #aab0a9; font: 10px/1.7 Inter, "Microsoft YaHei", sans-serif; white-space: pre-wrap; }

.story-modal, .story-reader { position: fixed; z-index: 100; inset: 0; }
#authModal { z-index: 130; }
.story-modal { display: grid; place-items: center; padding: 18px; }
.story-modal-backdrop { position: absolute; inset: 0; background: rgba(4,6,5,.78); backdrop-filter: blur(10px); }
.story-auth-card { position: relative; width: min(420px, 100%); display: grid; gap: 14px; padding: 28px; border: 1px solid #3c433e; border-radius: 8px; background: #171a18; box-shadow: 0 30px 100px rgba(0,0,0,.6); }
.story-modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; color: #8c928c; }
.story-modal-close .material-symbols-outlined { font-size: 19px; }
.story-modal-icon { color: var(--story-green); font-size: 30px; }
.story-auth-card h2 { margin: 0; font-size: 22px; }
.story-auth-card > p { margin: 0; color: var(--story-muted); font-size: 11px; line-height: 1.7; }
.story-code-row { display: grid; grid-template-columns: minmax(0,1fr) 100px; align-items: end; gap: 8px; }
.story-code-row button { min-height: 40px; border: 1px solid #424943; border-radius: 5px; background: #202421; color: #d4d8d3; font-size: 10px; }
.story-form-note { min-height: 18px; color: var(--story-coral) !important; }
.story-plan-note { min-height: 14px; margin: 0; color: #7f867f; font-size: 9px; line-height: 1.55; }
.story-plan-note.is-error { color: #e0a6a8; }

.story-writer-modal { padding: 14px; }
.story-writer-card { position: relative; width: min(820px, 100%); max-height: calc(100dvh - 28px); display: grid; gap: 17px; padding: 26px; overflow-y: auto; border: 1px solid #3c433e; border-radius: 8px; background: #151816; box-shadow: 0 34px 110px rgba(0,0,0,.64); }
.story-writer-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--story-green), var(--story-gold), var(--story-coral)); }
.story-writer-head { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: start; gap: 13px; padding-right: 38px; }
.story-writer-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #496152; border-radius: 6px; background: #19241d; color: var(--story-green-strong); font-size: 23px; }
.story-writer-head > div { display: grid; gap: 4px; }
.story-writer-head small, .story-writer-result-head small { color: var(--story-coral); font-size: 8px; font-weight: 850; }
.story-writer-head h2 { margin: 0; font-size: 22px; }
.story-writer-head p { margin: 0; color: var(--story-muted); font-size: 10px; line-height: 1.6; }
.story-writer-modes { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 7px; }
.story-writer-modes label { min-width: 0; cursor: pointer; }
.story-writer-modes input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.story-writer-modes label > span { min-height: 92px; display: grid; align-content: center; justify-items: start; gap: 4px; padding: 11px; border: 1px solid #343a35; border-radius: 6px; background: #191c1a; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.story-writer-modes label:hover > span { border-color: #4d5750; transform: translateY(-1px); }
.story-writer-modes input:focus-visible + span { outline: 2px solid var(--story-green); outline-offset: 2px; }
.story-writer-modes input:checked + span { border-color: #71917d; background: #1b2820; box-shadow: inset 0 0 0 1px rgba(130,184,155,.12); }
.story-writer-modes i { color: #8e9890; font-size: 20px; }
.story-writer-modes input:checked + span i { color: var(--story-green-strong); }
.story-writer-modes b { font-size: 10px; }
.story-writer-modes small { color: #747b75; font-size: 8px; line-height: 1.45; }
.story-writer-instruction textarea { min-height: 64px; }
.story-writer-generate-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.story-writer-generate-row > span { display: inline-flex; align-items: center; gap: 5px; color: #7f867f; font-size: 9px; }
.story-writer-generate-row > span .material-symbols-outlined { color: var(--story-green); font-size: 15px; }
.story-writer-generate-row .story-primary-button { flex: 0 0 auto; }
.story-writer-result { display: grid; gap: 12px; padding-top: 17px; border-top: 1px solid var(--story-line-soft); animation: story-panel-in .24s ease both; }
.story-writer-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.story-writer-result-head > div { display: grid; gap: 3px; }
.story-writer-result-head strong { font-size: 13px; }
.story-writer-result-head > span { color: #7c837c; font-size: 9px; font-variant-numeric: tabular-nums; }
.story-writer-result textarea { min-height: 230px; }
.story-writer-title-toggle { width: fit-content; display: inline-flex; align-items: center; gap: 7px; color: #aeb5ae; font-size: 9px; cursor: pointer; }
.story-writer-title-toggle input { accent-color: var(--story-green); }
.story-writer-notes { display: grid; gap: 7px; padding: 11px 13px; border-left: 2px solid var(--story-gold); background: #191c1a; }
.story-writer-notes > span { color: #c9b77e; font-size: 9px; font-weight: 800; }
.story-writer-notes ul { display: grid; gap: 4px; margin: 0; padding-left: 17px; color: #8f968f; font-size: 9px; line-height: 1.55; }
.story-writer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 3px; }
.story-writer-actions > button { min-height: 38px; padding: 0 9px; border: 0; background: transparent; color: #858c85; font-size: 10px; }
.story-writer-actions > div { display: flex; gap: 7px; }
.story-writer-error { margin: 0; padding: 10px 12px; border: 1px solid #694446; border-radius: 5px; background: #27191a; color: #e0a6a8; font-size: 10px; line-height: 1.6; }

.story-guide-card { --guide-accent: var(--story-green); position: relative; width: min(620px, 100%); min-height: 510px; display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; border: 1px solid #3c433e; border-radius: 8px; background: #151816; box-shadow: 0 34px 110px rgba(0,0,0,.62); }
.story-guide-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--guide-accent); transition: background .25s ease; }
.story-guide-progress { display: grid; gap: 10px; padding: 25px 30px 0; }
.story-guide-progress > span { color: #848b84; font-size: 9px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.story-guide-progress > div { height: 2px; overflow: hidden; background: #292e2a; }
.story-guide-progress i { display: block; width: 16.666%; height: 100%; background: var(--guide-accent); transition: width .32s ease, background .25s ease; }
.story-guide-content { align-content: center; display: grid; padding: 34px 54px 28px; animation: story-guide-step .28s ease both; }
.story-guide-content.is-changing { animation: story-guide-step .28s ease both; }
.story-guide-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 24px; border: 1px solid color-mix(in srgb, var(--guide-accent) 42%, #353a36); border-radius: 6px; background: color-mix(in srgb, var(--guide-accent) 12%, #151816); color: var(--guide-accent); font-size: 25px; transition: color .25s ease, border-color .25s ease, background .25s ease; }
.story-guide-content small { color: var(--guide-accent); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.story-guide-content h2 { margin: 9px 0 11px; font-size: 27px; line-height: 1.2; }
.story-guide-content > p { max-width: 500px; margin: 0; color: #a3aaa3; font-size: 11px; line-height: 1.75; }
.story-guide-content ul { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.story-guide-content li { position: relative; padding-left: 17px; color: #d2d7d1; font-size: 10px; line-height: 1.55; }
.story-guide-content li::before { content: ""; position: absolute; top: .58em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--guide-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--guide-accent) 12%, transparent); }
.story-guide-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 30px 24px; border-top: 1px solid #292e2a; }
.story-guide-actions > div { display: flex; gap: 7px; }
.story-guide-later { min-height: 36px; padding: 0; border: 0; background: transparent; color: #858c85; font-size: 10px; }
.story-guide-later:hover { color: #d8ddd8; }
.story-guide-back { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #373d38; border-radius: 5px; background: #1b1f1c; color: #b5bbb4; }
.story-guide-back:disabled { opacity: .35; cursor: default; }
.story-guide-back .material-symbols-outlined, .story-guide-actions .story-primary-button .material-symbols-outlined { font-size: 17px; }
.story-guide-actions .story-primary-button { min-width: 112px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding-inline: 15px; }

.story-reader { display: grid; grid-template-rows: 62px minmax(0, 1fr) 88px; background: #080a09; animation: story-reader-in .24s ease both; }
.story-reader header, .story-reader footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 20px; border-bottom: 1px solid #262a27; }
.story-reader header > div:first-child { display: grid; gap: 3px; }
.story-reader header small { color: var(--story-coral); font-size: 8px; font-weight: 800; }
.story-reader header strong { font-size: 13px; }
.story-reader header > div:last-child { display: flex; gap: 5px; }
.story-reader header button, .story-reader-stage > button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #343934; border-radius: 5px; background: #151815; color: #d6dad5; }
.story-reader header button.is-active { color: #142017; border-color: var(--story-green); background: var(--story-green); }
.story-reader-stage { min-height: 0; display: grid; grid-template-columns: 54px minmax(0,1fr) 54px; align-items: center; gap: 14px; padding: 18px; }
.story-reader-stage > button { justify-self: center; border-radius: 50%; }
.story-reader figure { position: relative; width: min(100%, 1180px); height: 100%; min-height: 0; display: grid; place-items: center; justify-self: center; margin: 0; overflow: hidden; touch-action: pan-y; }
.story-reader figure img { width: 100%; height: 100%; object-fit: contain; }
.story-reader figcaption { position: absolute; right: max(7%, 28px); bottom: 5%; left: max(7%, 28px); margin: auto; padding: 10px 16px; border-radius: 4px; background: rgba(5,7,6,.76); color: #fff; font-size: 20px; font-weight: 650; line-height: 1.5; text-align: center; text-shadow: 0 2px 6px #000; white-space: pre-line; animation: story-caption-in .22s ease both; }
.story-reader footer { border-top: 1px solid #262a27; border-bottom: 0; }
.story-reader footer > span { width: 60px; color: #929892; font-size: 10px; font-variant-numeric: tabular-nums; }
#readerThumbs { min-width: 0; display: flex; gap: 6px; overflow-x: auto; }
.story-reader-thumb { flex: 0 0 70px; height: 48px; padding: 0; overflow: hidden; border: 1px solid #333833; border-radius: 4px; background: #101210; opacity: .56; transition: opacity .16s ease, border-color .16s ease, transform .16s ease; }
.story-reader-thumb.is-active { border-color: var(--story-green); opacity: 1; }
.story-reader-thumb:hover { opacity: .9; transform: translateY(-1px); }
.story-reader-thumb img { width: 100%; height: 100%; object-fit: cover; }

.story-toast { position: fixed; z-index: 150; right: 22px; bottom: 22px; max-width: min(420px, calc(100vw - 44px)); padding: 12px 15px; border: 1px solid #4c5f52; border-radius: 6px; background: #1b241e; color: #e4e9e4; box-shadow: 0 18px 50px rgba(0,0,0,.4); font-size: 10px; line-height: 1.55; animation: story-toast-in .22s ease both; }
.story-toast.is-error { border-color: #794d50; background: #29191b; }
.story-mobile-backdrop { display: none; }
.mobile-only { display: none; }
.story-icon-button { width: 36px; height: 36px; place-items: center; border: 1px solid var(--story-line); border-radius: 5px; background: #171a18; }

html[data-color-mode='day'] {
  --story-bg: #f7f7fb;
  --story-panel: #ffffff;
  --story-panel-2: #f2f3f7;
  --story-line: #dde0e7;
  --story-line-soft: #e9eaf0;
  --story-text: #171923;
  --story-muted: #6f727d;
  --story-green: #5f8d72;
  --story-green-strong: #416c54;
  --story-coral: #b85f4c;
  --story-gold: #9a7628;
  --story-red: #b94f55;
}
html[data-color-mode='day'] .story-sidebar { border-right-color: rgba(25,28,38,.09); background: #f5f5f8; box-shadow: 18px 0 50px rgba(31,35,48,.035); }
html[data-color-mode='day'] .story-brand-mark { border-color: rgba(122,108,196,.18); background: #1a1829; box-shadow: 0 10px 24px rgba(99,82,185,.13); }
html[data-color-mode='day'] .story-brand .brand-wordmark span:first-child { color: #151722; }
html[data-color-mode='day'] .story-brand .brand-wordmark span:last-child { color: #7764b7; text-shadow: none; }
html[data-color-mode='day'] .story-brand .brand-byline { color: #8a8991; }
html[data-color-mode='day'] .story-sidebar-heading,
html[data-color-mode='day'] .story-project-copy small,
html[data-color-mode='day'] .story-project-empty { color: #858893; }
html[data-color-mode='day'] .story-project-item:hover,
html[data-color-mode='day'] .story-global-nav a:hover { color: #1c1e28; background: rgba(255,255,255,.72); }
html[data-color-mode='day'] .story-project-item.is-active { border-color: #bfd3c5; background: #eaf2ed; }
html[data-color-mode='day'] .story-project-cover { background: #e5e8ed; color: #68716b; }
html[data-color-mode='day'] .story-global-nav { border-top-color: #dfe1e7; }
html[data-color-mode='day'] .story-global-nav a { color: #666974; }
html[data-color-mode='day'] .story-header { border-bottom-color: rgba(25,28,38,.085); background: rgba(250,250,253,.9); }
html[data-color-mode='day'] .story-sync-state { color: #737781; }
html[data-color-mode='day'] .story-text-button,
html[data-color-mode='day'] .story-credit,
html[data-color-mode='day'] .color-mode-toggle,
html[data-color-mode='day'] .story-icon-button { border-color: rgba(28,31,42,.1); background: rgba(255,255,255,.78); color: #555864; box-shadow: 0 5px 16px rgba(37,40,52,.035); }
html[data-color-mode='day'] .story-project-form,
html[data-color-mode='day'] .story-generated-preview,
html[data-color-mode='day'] .story-inspector,
html[data-color-mode='day'] .story-scene,
html[data-color-mode='day'] .story-character,
html[data-color-mode='day'] .story-memory-section { color: #1d1f29; background: #fff; box-shadow: 0 16px 38px rgba(37,40,52,.055); }
html[data-color-mode='day'] .story-project-form { box-shadow: 0 26px 68px rgba(51,46,79,.09); }
html[data-color-mode='day'] .story-generated-preview { box-shadow: 0 22px 54px rgba(51,46,79,.07); }
html[data-color-mode='day'] .story-generated-preview-actions > span { border-color: #b5cdbd; background: #edf5f0; color: #43684f; }
html[data-color-mode='day'] .story-generated-preview-actions button,
html[data-color-mode='day'] .story-setup-resizer > button,
html[data-color-mode='day'] .story-resizer-grip { border-color: #c9cdd3; background: #fff; color: #686d75; }
html[data-color-mode='day'] .story-generated-preview figure { border-color: #d8dbe1; background: #eef0f3; }
html[data-color-mode='day'] .story-generated-preview-empty,
html[data-color-mode='day'] .story-generated-preview-meta small { color: #777b85; }
html[data-color-mode='day'] .story-generated-preview-thumb { border-color: #cfd3d9; background: #eef0f3; }
html[data-color-mode='day'] .story-generated-preview-thumb.is-active { border-color: var(--story-green); }
html[data-color-mode='day'] .story-setup-resizer::before { background: #c9cdd3; }
html[data-color-mode='day'] .story-setup-resizer:hover::before,
html[data-color-mode='day'] .story-setup-resizer:focus-visible::before,
html[data-color-mode='day'] body.is-story-resizing .story-setup-resizer::before { background: var(--story-green); }
html[data-color-mode='day'] .story-setup-resizer:hover .story-resizer-grip,
html[data-color-mode='day'] .story-setup-resizer:focus-visible .story-resizer-grip,
html[data-color-mode='day'] body.is-story-resizing .story-resizer-grip { border-color: var(--story-green); background: #edf5f0; color: #43684f; }
html[data-color-mode='day'] .story-field > span,
html[data-color-mode='day'] .story-field-heading > label,
html[data-color-mode='day'] .story-reference-control > span,
html[data-color-mode='day'] .story-plan-box > span,
html[data-color-mode='day'] .story-scene-field span { color: #747783; }
html[data-color-mode='day'] .story-field input,
html[data-color-mode='day'] .story-field textarea,
html[data-color-mode='day'] .story-field select,
html[data-color-mode='day'] .story-scene-field textarea,
html[data-color-mode='day'] .story-scene-field input,
html[data-color-mode='day'] .story-scene-field select { border-color: #d7d9e0; background: #fbfbfd; color: #1d1f29; }
html[data-color-mode='day'] .story-field input::placeholder,
html[data-color-mode='day'] .story-field textarea::placeholder { color: #92959f; }
html[data-color-mode='day'] .story-toggle-row { border-color: #d9dce2; background: #f8f9fb; }
html[data-color-mode='day'] .story-toggle-row:has(input:checked) { border-color: #a9c7b5; background: #edf5f0; }
html[data-color-mode='day'] .story-toggle-row i { background: #c7cbd0; }
html[data-color-mode='day'] .story-toggle-row b,
html[data-color-mode='day'] .story-chapter-head h2,
html[data-color-mode='day'] .story-scene-title,
html[data-color-mode='day'] .story-section-intro h2,
html[data-color-mode='day'] .story-memory-section h3 { color: #20222c; }
html[data-color-mode='day'] .story-toggle-row small,
html[data-color-mode='day'] .story-field small,
html[data-color-mode='day'] .story-toolbar-selection label,
html[data-color-mode='day'] .story-toolbar-selection span,
html[data-color-mode='day'] .story-chapter-head span,
html[data-color-mode='day'] .story-section-intro p,
html[data-color-mode='day'] .story-memory-section pre,
html[data-color-mode='day'] .story-memory-section p { color: #727681; }
html[data-color-mode='day'] .story-secondary-button,
html[data-color-mode='day'] .story-icon-text-button,
html[data-color-mode='day'] .story-action-select,
html[data-color-mode='day'] .story-upload-button,
html[data-color-mode='day'] .story-character-actions button,
html[data-color-mode='day'] .story-character-actions label { border-color: #d7dae0; background: #f6f7f9; color: #4e525d; }
html[data-color-mode='day'] .story-secondary-button:hover,
html[data-color-mode='day'] .story-icon-text-button:hover { border-color: #b9bec7; background: #fff; }
html[data-color-mode='day'] .story-status { border-color: #9fbda9; background: #eaf4ed; color: #42684f; }
html[data-color-mode='day'] .story-tabs,
html[data-color-mode='day'] .story-section-intro { border-bottom-color: #e0e2e8; }
html[data-color-mode='day'] .story-tabs button { color: #777a84; }
html[data-color-mode='day'] .story-tabs button.is-active { color: #191b25; }
html[data-color-mode='day'] .story-scene:hover { border-color: #c8ccd3; box-shadow: 0 14px 32px rgba(37,40,52,.08); }
html[data-color-mode='day'] .story-scene.is-selected { border-color: #8eb29a; background: #f0f7f2; }
html[data-color-mode='day'] .story-scene.is-stale { border-color: #c6b273; }
html[data-color-mode='day'] .story-scene-media,
html[data-color-mode='day'] .story-character-reference { background: #eceef2; color: #7c818b; }
html[data-color-mode='day'] .story-scene-menu button,
html[data-color-mode='day'] .story-inspector-head button { border-color: #d8dbe1; background: #f7f8fa; color: #676b75; }
html[data-color-mode='day'] .story-add-row { border-color: #c9cdd4; color: #696d77; }
html[data-color-mode='day'] .story-reference-control,
html[data-color-mode='day'] .story-plan-box,
html[data-color-mode='day'] .story-queue-box,
html[data-color-mode='day'] .story-inspector-head { border-color: #e4e6eb; }
html[data-color-mode='day'] .story-reference-preview { border-color: #cfd3da; background: #f7f8fa; color: #777b85; }
html[data-color-mode='day'] .story-character-chip { border-color: #d9dce2; background: #f5f6f8; color: #5f636d; }
html[data-color-mode='day'] .story-auth-card { border-color: #d9dce2; background: #fff; color: #20222c; box-shadow: 0 30px 100px rgba(37,32,54,.2); }
html[data-color-mode='day'] .story-ai-write-button { border-color: #b7cec0; background: #edf5f0; color: #42684f; }
html[data-color-mode='day'] .story-writer-card { border-color: #d9dce2; background: #fff; color: #20222c; box-shadow: 0 34px 110px rgba(37,32,54,.22); }
html[data-color-mode='day'] .story-writer-icon { border-color: #b7cec0; background: #edf5f0; color: #42684f; }
html[data-color-mode='day'] .story-writer-modes label > span { border-color: #dfe1e7; background: #f8f9fb; }
html[data-color-mode='day'] .story-writer-modes label:hover > span { border-color: #c5c9d1; }
html[data-color-mode='day'] .story-writer-modes input:checked + span { border-color: #9ebda8; background: #edf5f0; }
html[data-color-mode='day'] .story-writer-modes small,
html[data-color-mode='day'] .story-writer-generate-row > span,
html[data-color-mode='day'] .story-writer-result-head > span { color: #747883; }
html[data-color-mode='day'] .story-writer-title-toggle { color: #565a64; }
html[data-color-mode='day'] .story-writer-notes { background: #f7f8fa; }
html[data-color-mode='day'] .story-writer-notes ul { color: #6a6e78; }
html[data-color-mode='day'] .story-writer-error { border-color: #e0b9bc; background: #fff1f2; color: #7d373c; }
html[data-color-mode='day'] .story-plan-note { color: #737781; }
html[data-color-mode='day'] .story-plan-note.is-error { color: #9a454b; }
html[data-color-mode='day'] .story-help-button { border-color: #d7dae0; background: #fff; color: #666a74; }
html[data-color-mode='day'] .story-help-button:hover { border-color: #b8bdc6; background: #f7f8fa; color: #292c36; }
html[data-color-mode='day'] .story-guide-card { border-color: #d9dce2; background: #fff; color: #20222c; box-shadow: 0 34px 110px rgba(37,32,54,.22); }
html[data-color-mode='day'] .story-guide-progress > div { background: #e7e9ee; }
html[data-color-mode='day'] .story-guide-content > p { color: #696d77; }
html[data-color-mode='day'] .story-guide-content li { color: #373a44; }
html[data-color-mode='day'] .story-guide-actions { border-top-color: #e5e7ec; }
html[data-color-mode='day'] .story-guide-later { color: #777b85; }
html[data-color-mode='day'] .story-guide-back { border-color: #d7dae0; background: #f6f7f9; color: #555963; }
html[data-color-mode='day'] .story-code-row button { border-color: #d5d8de; background: #f5f6f8; color: #50545e; }
html[data-color-mode='day'] .story-reader { background: #eceef2; }
html[data-color-mode='day'] .story-reader header,
html[data-color-mode='day'] .story-reader footer { border-color: #d7dae0; background: #fff; color: #20222c; }
html[data-color-mode='day'] .story-reader header button,
html[data-color-mode='day'] .story-reader-stage > button { border-color: #d2d5dc; background: rgba(255,255,255,.9); color: #4e525c; }
html[data-color-mode='day'] .story-reader-thumb { border-color: #cfd2d9; background: #e3e5e9; }
html[data-color-mode='day'] .story-reader-thumb.is-active { border-color: var(--story-green); }
html[data-color-mode='day'] .story-toast { border-color: #a8c0af; background: #edf5ef; color: #294333; box-shadow: 0 18px 50px rgba(37,40,52,.16); }
html[data-color-mode='day'] .story-toast.is-error { border-color: #d5a6aa; background: #fff1f2; color: #7d373c; }

@keyframes story-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes story-line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes story-tab-in { from { opacity: 0; transform: scaleX(.35); } to { opacity: 1; transform: scaleX(1); } }
@keyframes story-panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes story-status-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes story-queue-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(200,167,91,.08); } 50% { box-shadow: 0 0 0 6px rgba(200,167,91,.15); } }
@keyframes story-reader-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes story-caption-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes story-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes story-guide-step { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 1120px) {
  :root { --sidebar-width: 210px; }
  .story-setup-view { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .story-setup-resizer { display: none; }
  .story-generated-preview { width: 100%; }
  .story-editor-layout { grid-template-columns: minmax(0,1fr) 260px; }
  .story-cast-list { grid-template-columns: 1fr; }
  .story-scene { grid-template-columns: 30px 138px minmax(0,1fr) 36px; }
}

@media (max-width: 860px) {
  .story-app { display: block; }
  .story-main { grid-column: auto; }
  .story-sidebar { visibility: hidden; pointer-events: none; transform: translateX(-102%); transition: transform .22s ease, visibility .22s ease; box-shadow: 20px 0 60px rgba(0,0,0,.45); }
  body.is-story-sidebar-open .story-sidebar { visibility: visible; pointer-events: auto; transform: translateX(0); }
  .story-mobile-backdrop { position: fixed; z-index: 35; inset: 0; display: block; border: 0; background: rgba(5,7,6,.65); animation: story-reader-in .18s ease both; }
  .mobile-only { display: grid; }
  .story-header { padding: 0 14px; }
  .story-header-title { margin-right: auto; }
  .story-sync-state { display: none; }
  .story-setup-view { width: min(680px, calc(100% - 28px)); grid-template-columns: 1fr; gap: 30px; margin: 0 auto; padding: 34px 0 60px; }
  .story-generated-preview { min-height: 0; gap: 0; padding: 16px 18px; }
  .story-generated-preview-actions button { display: grid; }
  .story-generated-preview > figure,
  .story-generated-preview > .story-generated-preview-thumbs,
  .story-generated-preview > .story-generated-preview-meta { display: none; }
  .story-generated-preview.is-mobile-open { gap: 14px; }
  .story-generated-preview.is-mobile-open > figure { display: grid; }
  .story-generated-preview.is-mobile-open > .story-generated-preview-thumbs:not(:empty) { display: flex; }
  .story-generated-preview.is-mobile-open > .story-generated-preview-meta { display: flex; }
  .story-setup-copy { position: static; padding-top: 0; }
  .story-setup-copy h1 { font-size: 37px; }
  .story-setup-steps { grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 24px; }
  .story-setup-steps span { display: grid; gap: 5px; }
  .story-editor { padding: 16px 14px 48px; }
  .story-editor-bar { align-items: flex-start; }
  .story-editor-actions span:not(.material-symbols-outlined) { display: none; }
  .story-editor-actions button { width: 38px; padding: 0; }
  .story-action-select { width: 94px; padding-left: 7px; }
  .story-editor-layout { grid-template-columns: 1fr; }
  .story-inspector { position: static; display: none; grid-row: 1; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .story-inspector.is-mobile-open { display: grid; animation: story-panel-in .22s ease both; }
  .story-inspector-head, .story-reference-control, .story-plan-box, .story-queue-box { grid-column: 1 / -1; }
  .story-toggle-compact { min-height: 54px; }
  .story-writer-modes { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .story-header { height: 58px; }
  .story-header-title { display: none; }
  .color-mode-toggle { width: 34px; padding: 0; }
  .color-mode-toggle .color-mode-label { display: none; }
  .story-text-button { padding-inline: 8px; }
  .story-help-button { width: 34px; height: 34px; }
  .story-guide-modal { padding: 10px; }
  .story-guide-card { min-height: min(620px, calc(100dvh - 20px)); }
  .story-guide-progress { padding: 22px 20px 0; }
  .story-guide-content { align-content: start; padding: 30px 22px 22px; }
  .story-guide-icon { margin-bottom: 20px; }
  .story-guide-content h2 { font-size: 23px; }
  .story-guide-actions { padding: 16px 20px 20px; }
  .story-guide-actions .story-primary-button { min-width: 104px; }
  .story-setup-copy h1 { font-size: 31px; }
  .story-project-form { padding: 18px 14px; }
  .story-writer-modal { padding: 8px; }
  .story-writer-card { max-height: calc(100dvh - 16px); gap: 14px; padding: 20px 14px; }
  .story-writer-head { grid-template-columns: 36px minmax(0,1fr); gap: 10px; }
  .story-writer-icon { width: 36px; height: 36px; font-size: 20px; }
  .story-writer-head h2 { font-size: 19px; }
  .story-writer-modes { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .story-writer-modes label > span { min-height: 78px; }
  .story-writer-generate-row { align-items: stretch; flex-direction: column; }
  .story-writer-generate-row .story-primary-button { width: 100%; justify-content: center; }
  .story-writer-actions { align-items: stretch; flex-direction: column-reverse; }
  .story-writer-actions > div { display: grid; grid-template-columns: 1fr 1fr; }
  .story-writer-actions > div button { justify-content: center; }
  .story-form-grid { grid-template-columns: 1fr; }
  .story-form-actions { align-items: stretch; flex-direction: column; }
  .story-form-actions > span { order: 2; justify-content: center; }
  .story-editor-bar { min-height: 82px; }
  .story-editor-bar h1 { max-width: 210px; font-size: 21px; }
  .story-project-meter { width: 170px; }
  .story-editor-actions { gap: 4px; }
  .story-editor-actions button { min-height: 34px; width: 34px; }
  .story-inspector { grid-template-columns: 1fr; padding: 13px; }
  .story-inspector-head, .story-reference-control, .story-plan-box, .story-queue-box { grid-column: auto; }
  .story-toolbar { align-items: stretch; flex-direction: column; }
  .story-toolbar-actions { justify-content: flex-end; }
  .story-scene { grid-template-columns: 26px minmax(0,1fr) 34px; }
  .story-scene-media { grid-column: 2; min-height: 150px; }
  .story-scene-copy { grid-column: 2; grid-template-columns: 1fr; }
  .story-scene-menu { grid-column: 3; grid-row: 1 / span 2; }
  .story-scene-title-row, .story-scene-characters { grid-column: 1; }
  .story-section-intro { align-items: flex-start; flex-direction: column; gap: 10px; }
  .story-character { grid-template-columns: 1fr; }
  .story-character-reference { min-height: 260px; }
  .story-bible-content { grid-template-columns: 1fr; }
  .story-reader { grid-template-rows: 56px minmax(0,1fr) 72px; }
  .story-reader-stage { grid-template-columns: 34px minmax(0,1fr) 34px; gap: 3px; padding: 8px 2px; }
  .story-reader-stage > button { width: 32px; height: 32px; }
  .story-reader figcaption { right: 5%; bottom: 4%; left: 5%; padding: 8px 10px; font-size: 13px; }
  .story-reader footer { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}