.story-shell { max-width: 1050px; margin: 32px auto 80px; padding: 0 24px; }
.story-shell h1 { margin-bottom: 12px; }
.story-shell p { line-height: 1.55; }
.story-intro { max-width: 78ch; }
.story-reference-note, .story-source { color: var(--text-muted, #b3b09b); font-size: .92rem; }
.story-shell .mode-select { margin: 24px 0 12px; }
.story-choices-panel, .story-chapter { border: 1px solid var(--border, #726f5a); border-radius: 6px; background: var(--surface, #202418); margin: 14px 0; }
.story-shell summary { padding: 18px; cursor: pointer; }
.story-shell summary:focus-visible { outline: 2px solid var(--accent, #ed9a4b); outline-offset: 3px; }
.story-choice-help, .story-choices { margin: 0 20px 20px; }
.story-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.story-choices label, .story-chapter-body > label { display: block; margin-bottom: 7px; font-weight: 600; }
.story-choices select { width: 100%; min-height: 42px; }
.story-chapter-name { font-size: 1.2rem; font-weight: 700; }
.story-count { display: inline-block; margin-left: 18px; color: var(--text-muted, #b3b09b); font-size: .9rem; }
.story-chapter-body { padding: 0 20px 20px; }
.story-steps { list-style: none; padding: 0; margin: 4px 0 24px; }
.story-step { border-top: 1px solid var(--border, #726f5a); padding: 14px 0; }
.story-step label { display: flex; align-items: flex-start; gap: 14px; line-height: 1.55; cursor: pointer; }
.story-step input { flex: 0 0 auto; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent, #ed9a4b); }
.story-step input:checked + span > span { color: var(--text-muted, #b3b09b); }
.story-step input:disabled { cursor: not-allowed; }
.story-tag, .story-step .story-warning { display: block; margin-top: 6px; }
.story-warning { color: var(--text, #e7e5d6); font-size: .9rem; }
.story-tag { font-size: .8rem; color: var(--text-muted, #b3b09b); }
.story-step-link { display: inline-block; margin: 8px 0 0 34px; }
.story-shell textarea { width: 100%; box-sizing: border-box; min-height: 80px; resize: vertical; }
.story-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.story-shell [hidden] { display: none !important; }
#story-save-status { min-height: 1.6em; font-size: .92rem; }
@media (max-width: 600px) { .story-shell { padding: 0 14px; margin-top: 20px; } .story-count { display: block; margin: 6px 0 0 20px; } .story-chapter-body { padding: 0 14px 14px; } .story-choices { grid-template-columns: 1fr; } }
.story-detailed-list { padding-left:1.5rem; }
.story-detailed-list > li { padding:1rem .3rem; border-bottom:1px solid var(--border,#777); }
.story-detailed-list label { display:flex; gap:.75rem; align-items:flex-start; }
.story-detailed-list input[type=number] { flex:0 0 9rem; width:9rem; max-width:100%; padding:.6rem; background:var(--bg,#181d18); color:var(--text,#eee); border:1px solid var(--border,#777); }
.story-detailed-list small { display:block; margin:.5rem 0; }
.story-observed { padding:.65rem .8rem; border-inline-start:3px solid var(--border,#777); font-size:.88rem; }
.story-observed-complete { border-color:#64c695; }
.story-observed time { color:var(--text-muted,#b3b09b); }
.story-graph-content { padding:0 20px 20px; }
.story-graph-viewport { max-width:100%; overflow:auto; border:1px solid var(--border,#777); border-radius:6px; }
.story-graph-canvas { position:relative; width:1100px; height:670px; background:var(--bg,#171c18); }
.story-graph-canvas svg { width:100%; height:100%; position:absolute; inset:0; }
.story-graph-canvas path { fill:none; stroke:var(--text-muted,#b3b09b); stroke-width:2; }
.story-graph-canvas path.selected { stroke:#64c695; stroke-width:4; }
.story-graph-node { position:absolute; width:184px; min-height:60px; padding:9px; text-align:center; white-space:normal; border:1px solid var(--border,#777); border-radius:5px; background:var(--surface,#202418); color:var(--text,#e7e5d6); font:inherit; font-size:.9rem; cursor:pointer; }
.story-graph-node.ending { border-width:2px; }
.story-graph-node.selected { border-color:#64c695; box-shadow:inset 0 0 0 2px #64c695; }
.story-graph-node.other { border-style:dashed; }
.story-graph-node:focus-visible,.story-branch-objective:focus-visible { outline:3px solid var(--accent,#ed9a4b); outline-offset:3px; }
.story-graph-toolbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:20px 0; }
.story-graph-toolbar select { padding:8px; max-width:100%; }
.story-branch-group { margin:12px 0; border:1px solid var(--border,#777); border-radius:5px; }
.story-branch-group ul { padding:0 18px 12px 38px; }
.story-branch-group li { margin:10px 0; border-inline-start:3px solid var(--border,#777); padding:6px 10px; }
.story-branch-group li.recorded { border-color:#64c695; }
.story-branch-group li small { display:block; margin:4px 0; }
.story-branch-group li.inactive { border-inline-start-style:dashed; }
.story-branch-objective { background:none; color:var(--text,#e7e5d6); border:0; font:inherit; text-align:start; padding:0; cursor:pointer; }
.story-guide-photos { margin-top:12px; }
.story-guide-photos summary { padding:8px 0; }
.story-guide-photos figure { margin:12px 0; max-width:650px; }
.story-guide-photos img { display:block; max-width:100%; max-height:360px; object-fit:contain; }
.story-guide-photos figcaption { margin-top:8px; font-size:.88rem; }
@media(min-width:1200px){.story-shell:has(#story-graph[open]){max-width:1240px;}}
@media(max-width:600px){.story-graph-viewport{max-height:440px;}}
.story-objective-actions { display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0; }
.story-objectives summary,.story-legacy summary { padding:.8rem 0; cursor:pointer; font-weight:bold; }
#story-squad > details { margin:.75rem 0; }
@media(max-width:600px){.story-detailed-list label:has(input[type=number]) { flex-direction:column-reverse; }.story-objective-actions .btn{white-space:normal;}}
.story-native-body { margin-top: 1rem; }
.story-native-chapter,.story-native-step { margin-top:.6rem; padding:.7rem; border:1px solid var(--border,#777863); border-radius:5px; }
.story-native-chapter summary,.story-native-step summary { overflow-wrap:anywhere; }
.story-native-chapter summary .story-tag,.story-native-step summary .story-tag { display:inline-block; margin-left:.5rem; white-space:normal; }
.story-native-step li { margin:.6rem 0; overflow-wrap:anywhere; }