#campaign-story{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;padding:24px;background:#17281f;overflow:auto}#campaign-story::backdrop{background:#101a14}.story-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px;max-width:1400px;min-height:calc(100dvh - 48px);margin:auto}#story-art{aspect-ratio:1;width:100%;max-height:calc(100dvh - 48px);background-repeat:no-repeat;border-radius:16px;overflow:hidden;background-color:#24392d}#story-model{width:100%;height:100%;object-fit:contain}.story-copy{display:flex;flex-direction:column;max-height:calc(100dvh - 48px);overflow:hidden;min-width:0;padding:12px 4px}#story-count{color:#b9c39e}#story-title{font-size:clamp(22px,2.6vw,35px);line-height:1.2;margin:14px 0 24px;overflow-wrap:anywhere}#story-speaker{color:#efc384}#story-text{font-size:clamp(18px,1.45vw,22px);line-height:1.55;white-space:pre-line;overflow-wrap:anywhere;overflow:auto;min-height:0}.story-controls{display:flex;gap:8px;flex-wrap:wrap;padding-top:14px;flex-shrink:0;background:#17281f}#story-skip{margin-left:auto;background:transparent;color:#b4c3a6;font-size:14px}.story-list{display:grid;gap:8px;margin-bottom:16px}.story-list button{text-align:left}.story-settings{margin:16px 0}.story-settings label{flex-wrap:wrap}.story-settings input{width:20px;height:20px}#story-enabled:focus-visible{outline:2px solid #efc384}body:has(#campaign-story[open]){overflow:hidden}@media(max-width:700px){#campaign-story{padding:14px}.story-layout{grid-template-columns:1fr;gap:16px;min-height:0}#story-art{width:min(100%,42dvh);max-height:none;margin:auto}.story-copy{display:block;max-height:none;overflow:visible;padding:0}#story-title{font-size:23px;margin:10px 0 16px}#story-text{font-size:18px;overflow:visible}.story-controls{padding-bottom:6px}#story-skip{margin-left:0}.story-controls button{font-size:14px}}@media(max-height:500px) and (min-width:701px){#campaign-story{padding:12px}.story-layout{min-height:calc(100dvh - 24px);gap:18px;grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr)}#story-art{width:min(100%,calc(100dvh - 24px));margin:auto}.story-copy{max-height:calc(100dvh - 24px)}#story-title{font-size:22px;margin:8px 0 12px}#story-text{font-size:17px}}
#story-scroll-note{color:#d8c59b;flex-shrink:0;margin:4px 0;font-size:13px}


/* Keep justified prose clear of classic and overlay desktop scrollbars. */
@media(min-width:701px){
 #campaign-story #story-text{padding-inline-end:16px;scrollbar-gutter:stable}
}