:root { color-scheme: light dark; }
body { margin: 0; color: var(--vscode-editor-foreground, #ddd); background: var(--vscode-editor-background, #222); font: 17px/1.65 var(--vscode-font-family, sans-serif); }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--vscode-panel-border, #888); }
button { font: inherit; padding: .25rem .7rem; color: var(--vscode-button-foreground, white); background: var(--vscode-button-background, #275e87); border: 1px solid transparent; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
.reader-preference { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; white-space: nowrap; cursor: pointer; }
.reader-preference input { accent-color: var(--vscode-button-background, #275e87); }
:focus-visible { outline: 2px solid var(--vscode-focusBorder, #6bf); outline-offset: 2px; }
#status { font-size: .85rem; margin-left: auto; }
#beat { box-sizing: border-box; width: 100%; max-width: 44rem; margin: 0 auto; padding: 1rem 1.5rem 3rem; overflow-wrap: anywhere; }
.beat-ending { display: flex; justify-content: flex-end; align-items: center; margin-top: 2rem; padding-top: .8rem; border-top: 1px solid var(--vscode-panel-border, #888); }
.beat-ending button { max-width: 100%; }
.end-of-scene { margin: 0; color: var(--vscode-descriptionForeground, #aaa); font-size: .9rem; }
#follow-story { position: fixed; z-index: 2; right: 1rem; bottom: 1rem; box-shadow: 0 2px 8px #0005; }
#follow-story[hidden] { display: none; }
#warnings { white-space: pre-wrap; padding: 0 1rem; color: var(--vscode-editorWarning-foreground, #da8); font-size: .85rem; }
#warnings:empty { display: none; }
.chat { list-style: none; padding: 0; margin: 1.5rem 0; }
.chat li { border-left: 3px solid var(--vscode-textLink-foreground, #6bf); background: var(--vscode-textBlockQuote-background, #333); padding: .5rem 1rem; margin: .6rem 0; }
.chat strong { font-size: .85rem; }
.chat p { margin: .2rem 0; white-space: pre-wrap; }
pre { overflow: auto; padding: .6rem; background: var(--vscode-textCodeBlock-background, #333); }
.link-text { text-decoration: underline; }
.story-figure { margin: 1.3rem 0; max-width: 100%; }
.story-image { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; object-fit: contain; }
.story-inline-image { display: inline-block; vertical-align: middle; max-width: 100%; max-height: 12rem; width: auto; height: auto; object-fit: contain; }
.story-figure figcaption { margin-top: .35rem; font-size: .9rem; color: var(--vscode-descriptionForeground, #aaa); }
.image-placeholder { display: inline-block; padding: .7rem; border: 1px dashed var(--vscode-editorWarning-foreground, #da8); overflow-wrap: anywhere; }
/* No reveal animation: reduced motion retains identical, discrete sequencing. */
.chat li { position: relative; padding-bottom: 1.4rem; }
.chat li.outgoing { margin-left: 1rem; border-left-color: var(--vscode-charts-green, #9b9); }
.ticks { position: absolute; right: .65rem; bottom: .15rem; font-size: .8rem; }
.ticks.read { color: var(--vscode-textLink-foreground, #6bf); }
.responding { margin: .4rem 1rem 1rem; font-size: .9rem; font-style: italic; }
.chat-title { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }
.chat-title + .chat { margin-top: .4rem; }
.typeout { margin: 1.4rem 0; max-width: 100%; }
.typeout-surface { position: relative; padding: .8rem 1rem; border: 1px solid var(--vscode-panel-border, #888); background: var(--vscode-textCodeBlock-background, #333); }
.typeout pre { box-sizing: border-box; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; line-height: 1.45; font-size: .93rem; }
.typeout-yaml pre { font-family: var(--vscode-editor-font-family, monospace); }
.typeout-annotation { border-left: 3px solid var(--vscode-textLink-foreground, #6bf); }
.typeout-annotation .typeout-surface { background: var(--vscode-textBlockQuote-background, #333); }
.typeout-annotation .typeout-progress { font-family: Georgia, serif; font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.typeout-annotation .typeout-progress > :first-child { margin-top: 0; }
.typeout-annotation .typeout-progress > :last-child { margin-bottom: 0; }
.typeout-annotation .typeout-progress pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.typeout-annotation .typeout-progress code { font-family: var(--vscode-editor-font-family, monospace); }
.typeout-annotation .typeout-progress blockquote { margin: .8rem 0; padding-left: .8rem; border-left: 2px solid var(--vscode-panel-border, #888); }
.typeout-annotation .typeout-progress li { padding-left: .1rem; }
.typeout-unrevealed { visibility: hidden; }
.typeout-border-none, .typeout-border-none .typeout-surface { border: 0; }
.typeout-border-grey { border-left-color: var(--vscode-panel-border, #888); }
.typeout-border-grey .typeout-surface { border: 1px solid var(--vscode-panel-border, #888); }
.typeout-fill-none .typeout-surface, .typeout-fill-none pre { background: transparent; }
.typeout-fill-grey .typeout-surface, .typeout-fill-grey pre { background: #e9ebed; color: #202124; }
.typeout-fill-yellow .typeout-surface, .typeout-fill-yellow pre { background: #fff1bd; color: #29220d; }
:is(body.vscode-dark, body.reader-dark) .typeout-fill-grey .typeout-surface, :is(body.vscode-dark, body.reader-dark) .typeout-fill-grey pre { background: #34383c; color: #f0f0f0; }
:is(body.vscode-dark, body.reader-dark) .typeout-fill-yellow .typeout-surface, :is(body.vscode-dark, body.reader-dark) .typeout-fill-yellow pre { background: #4a401d; color: #fff4cf; }
body.vscode-high-contrast .typeout-fill-grey .typeout-surface, body.vscode-high-contrast .typeout-fill-grey pre,
body.vscode-high-contrast .typeout-fill-yellow .typeout-surface, body.vscode-high-contrast .typeout-fill-yellow pre,
body.vscode-high-contrast-light .typeout-fill-grey .typeout-surface, body.vscode-high-contrast-light .typeout-fill-grey pre,
body.vscode-high-contrast-light .typeout-fill-yellow .typeout-surface, body.vscode-high-contrast-light .typeout-fill-yellow pre { background: var(--vscode-editor-background); color: var(--vscode-editor-foreground); }
@media (forced-colors: active) { .typeout-fill-grey .typeout-surface, .typeout-fill-grey pre, .typeout-fill-yellow .typeout-surface, .typeout-fill-yellow pre { background: Canvas; color: CanvasText; } }
.typeout-reserve { visibility: hidden; }
.typeout-yaml .typeout-progress { position: absolute; inset: .8rem 1rem; width: calc(100% - 2rem); }
.typeout-progress.active::after { content: '▌'; opacity: .7; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .typeout-progress.active::after { content: none; } }
/* Explicit supporting-note controls, independent of manuscript styling. */
button.wiki-link { display:inline; font:inherit; line-height:inherit; color:var(--vscode-textLink-foreground,#7bd); background:transparent; padding:0; border:0; text-decoration:underline; text-underline-offset:.15em; white-space:normal; }
button.wiki-link.note-unavailable { text-decoration-style:dotted; }
.supporting-preview { position:fixed; z-index:10; box-sizing:border-box; max-height:min(17rem,70vh); overflow:auto; overscroll-behavior:contain; padding:.7rem 1rem; border:1px solid var(--vscode-focusBorder,#7bd); border-radius:.25rem; background:var(--vscode-editorHoverWidget-background,#252525); color:var(--vscode-editorHoverWidget-foreground,var(--vscode-editor-foreground,#ddd)); box-shadow:0 3px 12px #0005; font-size:.9rem; }
.supporting-preview[hidden] { display:none; }
.supporting-preview > :first-child { margin-top:0; }
.supporting-preview img { max-width:100%; max-height:8rem; object-fit:contain; }
.supporting-panel { box-sizing:border-box; width:min(42rem,calc(100vw - 24px)); max-height:calc(100vh - 24px); padding:0; border:1px solid var(--vscode-focusBorder,#7bd); background:var(--vscode-editor-background,#222); color:var(--vscode-editor-foreground,#ddd); font:inherit; }
.supporting-panel::backdrop { background:#0008; }
.supporting-panel > header { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; padding:.6rem; border-bottom:1px solid var(--vscode-panel-border,#888); }
.supporting-panel h2 { flex:1; min-width:0; margin:0; font-size:1.05rem; overflow-wrap:anywhere; }
.supporting-panel > article { box-sizing:border-box; padding:.8rem 1.2rem; max-height:calc(100vh - 8rem); overflow:auto; overscroll-behavior:contain; overflow-wrap:anywhere; }
.supporting-panel img { display:block; max-width:100%; max-height:65vh; height:auto; object-fit:contain; }
.supporting-panel pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.supporting-warning { white-space:pre-wrap; font-size:.85rem; color:var(--vscode-editorWarning-foreground,#da8); }

.reader-preference select { font: inherit; color: inherit; background: var(--vscode-input-background, Canvas); min-height: 44px; max-width: 100%; }
.reader-preference { white-space: nowrap; }
.reader-preference { flex-wrap: wrap; max-width: 100%; }
.reader-preference select { min-width: 0; }