.prologue-screen{container-type:size;position:relative;isolation:isolate;display:grid;grid-template-rows:minmax(12rem,1fr) auto auto;min-height:100%;height:100dvh;background:var(--prologue-backdrop,#100e0c);color:#eee6d5;overflow:auto}
.prologue-stage{position:relative;min-height:0;overflow:hidden;grid-row:1}
.prologue-plate{position:absolute;inset:0;overflow:hidden;transform-origin:center}
.prologue-background{width:100%;height:100%;object-fit:cover;display:block}
.prologue-actor{position:absolute;width:auto;transform:translateX(-50%);pointer-events:none}
.prologue-wash{position:absolute;inset:0;z-index:1;mix-blend-mode:color;pointer-events:none}
.prologue-caption{position:relative;z-index:2;padding:var(--prologue-box-padding,1rem) max(1.25rem,env(safe-area-inset-right)) var(--prologue-box-padding,1rem) max(1.25rem,env(safe-area-inset-left));text-align:center;background:linear-gradient(#19150f,#100e0c)}
.prologue-fixed-caption:is(.prologue-layout-caption,.prologue-layout-letterbox) .prologue-caption{box-sizing:border-box;height:calc(var(--prologue-caption-vh,18) * 1cqh);min-height:0;overflow:auto;display:grid;align-content:start}
/* Middle centres the words in a fixed band, as it does over the art. */
/* `safe`: a band that still overflows at the readable floor scrolls from its first line, not from a top cut off out of reach. */
.prologue-fixed-caption:is(.prologue-layout-caption,.prologue-layout-letterbox) .prologue-caption[data-position^=middle]{align-content:center;align-content:safe center}
.prologue-title{font-size:1.6rem;color:var(--gold);margin:0 0 .4rem;font-weight:normal}
.prologue-speaker{font-size:1.2rem;letter-spacing:.12em;text-transform:uppercase;color:#c0b39d;margin:.25rem 0}
.prologue-dialogue{font-size:1.8rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-width:65ch;margin:.4rem auto}
.prologue-location{font-size:2rem;color:var(--gold);margin:.5rem}
.prologue-progress{font-size:1.2rem;color:#b8ac98;margin:.5rem}
.prologue-controls{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.prologue-controls button{min-height:48px}
.prologue-preview-body{padding:0!important;overflow:auto!important}
.prologue-preview-body .prologue-screen{height:70dvh;min-height:24rem}
.prologue-editor-still .prologue-bar,.prologue-editor-still .prologue-controls,.prologue-editor-still .prologue-progress{display:none!important}
.prologue-editor-still{grid-template-rows:minmax(0,1fr) auto}
.prologue-editor-still.prologue-layout-overlay{grid-template-rows:1fr}
.prologue-editor-still.prologue-layout-overlay .prologue-caption{grid-row:1}
.prologue-scene-editor{width:min(calc(96vw / var(--ui-zoom,1)),1480px)!important;max-width:calc(96vw / var(--ui-zoom,1))!important;height:min(calc(94dvh / var(--ui-zoom,1)),1050px)}
.pse-body{padding:0!important;min-height:0;display:flex;flex-direction:column;overflow:hidden!important}
.pse-toolbar{display:flex;flex-wrap:wrap;gap:.6rem;padding:.75rem 1rem;background:#18130f;border-bottom:1px solid rgba(220,187,127,.2)}
.pse-select{display:grid;gap:.22rem;min-width:9rem;flex:1 1 10rem;color:#bfb3a0;font-size:.82rem;letter-spacing:.02em}
.pse-select select{width:100%;min-height:42px;padding:.4rem .55rem;color:var(--text,#eee6d5);background:#272019;border:1px solid #705a3e;border-radius:5px;font:inherit;font-size:.95rem}
.pse-workspace{min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(19rem,.75fr)}
.pse-visual{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:.75rem;background:radial-gradient(circle at 50% 30%,#282018,#100e0c 75%);overflow:auto}
.pse-visual-note{align-self:stretch;margin:0;color:#d5c6aa;font-size:.85rem;text-align:center}
.pse-arrange-bar{width:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.45rem .8rem;color:#e9d9b9;font-size:.82rem}
.pse-arrange-toggle,.pse-arrange-step{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.pse-arrange-toggle input{accent-color:#d5ae67;width:1rem;height:1rem}
.pse-arrange-step input{width:3.2rem;padding:.18rem .25rem;border:1px solid #8b704c;border-radius:3px;background:#17120e;color:#fff5e7;text-align:right}
.pse-project-save{padding:.3rem .55rem;border:1px solid #d5ae67;border-radius:4px;background:#493622;color:#ffdf9b;cursor:pointer}
.pse-project-save[hidden]{display:none}.pse-project-save:disabled{opacity:.6;cursor:wait}
.pse-project-status{color:#eed6a8}
.pse-viewport{position:relative;width:100%;aspect-ratio:16/9;min-height:0;max-height:100%;overflow:hidden;box-shadow:0 12px 34px #0009;border:1px solid #796244;background:#100e0c}
.pse-viewport.pse-phone{width:auto;height:min(100%,780px);max-width:100%;aspect-ratio:9/19.5;flex:none}
.pse-viewport .prologue-screen{height:100%;min-height:0;font-size:clamp(.7rem,.9vw,1rem);overflow:hidden}
.pse-viewport .prologue-title{font-size:calc(1.6em*var(--prologue-text-scale,1)*var(--prologue-title-scale,1))}
.pse-viewport .prologue-speaker{font-size:calc(1.2em*var(--prologue-text-scale,1)*var(--prologue-speaker-scale,1))}
.pse-viewport .prologue-dialogue{font-size:calc(1.8em*var(--prologue-text-scale,1))}
.pse-viewport .prologue-location{font-size:calc(2em*var(--prologue-text-scale,1))}
.pse-viewport .prologue-caption{padding:clamp(.35rem,1.2vw,1rem)}
.pse-inspector{min-height:0;display:flex;flex-direction:column;border-left:1px solid #554330;background:#211a14}
.pse-mode{padding:.8rem 1rem;border-bottom:1px solid #554330;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.pse-mode-summary{margin:0;color:#e5d8c1;font-size:.92rem;line-height:1.35}
.pse-mode-button{flex:none;min-height:38px!important}
.pse-tabs{display:flex;flex-wrap:wrap;gap:.35rem;padding:.6rem;border-bottom:1px solid #554330}
.pse-tab{min-height:38px;padding:.45rem .7rem;border:1px solid #6b5339;border-radius:4px;color:#e7dac2;background:#35291e;cursor:pointer}
.pse-tab.on{color:#1a120b;background:#d2af74;border-color:#e4c78f}
.pse-fields{min-height:0;overflow:auto;padding:.7rem 1rem 1.5rem;display:grid;align-content:start;gap:.75rem}
.pse-field{display:grid;gap:.3rem;padding:.8rem;border:1px solid #594632;border-radius:7px;background:#2c2119;color:#eee6d5}
.pse-field-head{display:flex;align-items:start;justify-content:space-between;gap:.5rem}
.pse-field-head label{font-weight:600;font-size:.96rem}
.pse-field small{color:#c5b69e;line-height:1.35;font-size:.82rem}
.pse-field input:not([type=checkbox]),.pse-field textarea,.pse-field select{width:100%;min-width:0;min-height:40px;padding:.45rem .55rem;border:1px solid #8b704c;border-radius:4px;background:#17120e;color:#fff5e7;font:inherit}
.pse-field textarea{min-height:5.5rem;resize:vertical;line-height:1.5}
.pse-field input[type=checkbox]{width:1.4rem;height:1.4rem;accent-color:#d5ae67}
.pse-field input:disabled,.pse-field select:disabled{opacity:.55}
.pse-follow{border:0;background:none;padding:0;color:#d6b77e;text-decoration:underline;cursor:pointer;font-size:.78rem;text-align:right}
.pse-follow:disabled{color:#b9ad9c;text-decoration:none;cursor:default}
.pse-inherited{color:#e8c58d!important}
.pse-custom{display:flex;align-items:center;gap:.55rem;padding:.7rem .8rem;border:1px solid #9f7742;border-radius:6px;background:#403020;color:#fff1dc;font-weight:600}
.pse-custom input{width:1.3rem;height:1.3rem;accent-color:#d5ae67}
.pse-group-help{color:#c5b69e;line-height:1.45}
.pse-position-slider{width:100%;min-height:32px;accent-color:#d5ae67;cursor:pointer}
.pse-positioning .prologue-actor{pointer-events:auto;cursor:grab;touch-action:none}
.pse-dragging .prologue-actor{cursor:grabbing}
.pse-number-stepper{display:grid;grid-template-columns:2.5rem minmax(0,1fr) 2.5rem;gap:.35rem}
.pse-number-stepper button{border:1px solid #8b704c;border-radius:4px;background:#493622;color:#ffdf9b;font-size:1.3rem;cursor:pointer}
.pse-number-stepper button:disabled{opacity:.45;cursor:default}
.pse-transform-box{position:absolute;z-index:5;box-sizing:border-box;border:1px solid #f2d28c;outline:1px solid #24170d;box-shadow:0 0 0 1px #24170d88,0 0 12px #0008;cursor:move;touch-action:none;background:#f2d28c0a}
.pse-transform-box[hidden]{display:none}
.pse-transform-dimensions{position:absolute;left:0;bottom:100%;padding:.1rem .25rem;background:#24170de8;color:#ffdf9b;font:600 .68rem/1.2 system-ui,sans-serif;white-space:nowrap;pointer-events:none}
.pse-transform-grip{position:absolute;width:12px;height:12px;box-sizing:border-box;border:1px solid #24170d;background:#f2d28c;touch-action:none}
.pse-grip-nw{left:-6px;top:-6px;cursor:nwse-resize}.pse-grip-ne{right:-6px;top:-6px;cursor:nesw-resize}
.pse-grip-sw{left:-6px;bottom:-6px;cursor:nesw-resize}.pse-grip-se{right:-6px;bottom:-6px;cursor:nwse-resize}
.pse-moving-art .prologue-stage{cursor:grab;touch-action:none}.pse-dragging.pse-moving-art .prologue-stage{cursor:grabbing}
.pse-show-grid .prologue-stage::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background-image:linear-gradient(to right,#f2d28c3d 1px,transparent 1px),linear-gradient(to bottom,#f2d28c3d 1px,transparent 1px);background-size:var(--pse-grid-step,5%) var(--pse-grid-step,5%)}
.set-scene-edit{border-color:#c49d62!important;color:#ffdfad!important}
.pse-phone .prologue-screen{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
.pse-phone .prologue-layout-panelLeft .prologue-stage,.pse-phone .prologue-layout-panelRight .prologue-stage,.pse-phone .prologue-layout-overlay .prologue-stage{grid-row:1;grid-column:1}
.pse-phone .prologue-layout-panelLeft .prologue-caption,.pse-phone .prologue-layout-panelRight .prologue-caption,.pse-phone .prologue-layout-overlay .prologue-caption{grid-row:2;grid-column:1;max-width:none;justify-self:stretch;margin:0}
@media(max-width:900px){
  .prologue-scene-editor{height:calc(96dvh / var(--ui-zoom,1))}
  .pse-body{overflow:auto!important}
  .pse-workspace{display:flex;flex:none;flex-direction:column}
  .pse-visual{min-height:min(95dvh,830px);overflow:visible;justify-content:flex-start}
  .pse-inspector{flex:none;border-left:0;border-top:1px solid #554330}
  .pse-fields{overflow:visible}
  .pse-viewport{height:auto;width:100%;max-height:none;flex:none}
  .pse-viewport.pse-phone{height:min(85dvh,740px);width:auto;max-width:100%;aspect-ratio:9/19.5}
  .pse-toolbar{gap:.4rem;padding:.5rem}
  .pse-select{min-width:calc(50% - .4rem);flex:1 1 calc(50% - .4rem)}
  .pse-mode{padding:.5rem .7rem}
  .pse-fields{padding:.6rem}
}
.set-prologue-text{width:100%;min-height:5rem;resize:vertical;font:inherit;line-height:1.4;padding:.65rem;background:var(--bg);color:var(--text);border:1px solid var(--line-soft);border-radius:4px}
@media(max-width:760px) and (orientation:portrait){.prologue-screen{grid-template-rows:minmax(14rem,1fr) auto}.prologue-controls button:last-child{order:-1;flex-basis:100%}.prologue-preview-body .prologue-screen{height:75dvh}.set-row-prologue .r-trail{width:100%;min-width:0}}
@media(max-height:500px) and (orientation:landscape){.prologue-screen{grid-template-columns:1fr minmax(18rem,45%);grid-template-rows:1fr}.prologue-caption{overflow:auto}.prologue-preview-body .prologue-screen{min-height:15rem;height:65dvh}}

/* ---- the opening's wireframes and text plate -------------------------------
   Every value below is a SETTING (Advanced → Opening): which frame presents a
   scene, how the painting sits in it, where the words go, what is behind them
   and whether they are outlined. The stylesheet states the frames; the custom
   properties carry the owner's numbers in. Defaults here match the shipped
   configuration, so a profile that has never touched these renders as before. */
.prologue-screen{--prologue-text-scale:1;--prologue-text-align:center;--prologue-box:rgba(16,14,12,.72);--prologue-outline-color:#100e0c;--prologue-outline-width:0px;--prologue-fit:cover;--prologue-focus:50% 50%;--prologue-scale:1}
.prologue-background{object-fit:var(--prologue-fit);object-position:var(--prologue-focus);transform:scale(var(--prologue-scale))}
.prologue-caption{text-align:var(--prologue-text-align)}
.prologue-title{font-size:calc(1.6rem*var(--prologue-text-scale))}
.prologue-speaker{font-size:calc(1.2rem*var(--prologue-text-scale))}
.prologue-dialogue{font-size:calc(1.8rem*var(--prologue-text-scale))}
.prologue-location{font-size:calc(2rem*var(--prologue-text-scale))}
.prologue-progress{font-size:calc(1.2rem*var(--prologue-text-scale))}
/* The container: present or absent, and when present, visible or not. An
   invisible container still holds its spacing — that is the difference between
   "no container" and "a container you cannot see". */
.prologue-has-box .prologue-caption{background:var(--prologue-box)}
.prologue-box-hidden .prologue-caption{background:transparent}
.prologue-screen:not(.prologue-has-box) .prologue-caption{background:transparent;padding-inline:0}
.prologue-outlined .prologue-title,.prologue-outlined .prologue-speaker,.prologue-outlined .prologue-dialogue,.prologue-outlined .prologue-location,.prologue-outlined .prologue-banner-text{-webkit-text-stroke:var(--prologue-outline-width) var(--prologue-outline-color);paint-order:stroke fill}
.prologue-banner{position:absolute;left:0;right:0;z-index:3;display:flex;justify-content:center;padding:.6rem 1rem;pointer-events:none;background:transparent}
.prologue-banner-box .prologue-banner{background:var(--prologue-banner-box);border-block:1px solid #e6c88b55;box-shadow:0 3px 18px #0006}
.prologue-banner.banner-top{top:0}
.prologue-banner.banner-bottom{bottom:0}
.prologue-banner-text{font-size:calc(1.5rem*var(--prologue-text-scale));letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-align:center}
/* Text over the art: one cell, and `data-position` places the plate in it. */
.prologue-layout-overlay{grid-template-rows:1fr auto}
.prologue-layout-overlay .prologue-stage,.prologue-layout-overlay .prologue-caption{grid-row:1;grid-column:1}
.prologue-layout-overlay .prologue-caption{align-self:end;justify-self:center;max-width:min(60rem,92%);margin:1rem;margin:calc(var(--prologue-inset-y,4)*1cqh) calc(var(--prologue-inset-x,4)*1cqw);height:max-content}
.prologue-layout-overlay .prologue-caption[data-position^=top]{align-self:start}
.prologue-layout-overlay .prologue-caption[data-position^=middle]{align-self:center}
.prologue-layout-overlay .prologue-caption[data-position$=left]{justify-self:start;max-width:min(46rem,62%)}
.prologue-layout-overlay .prologue-caption[data-position$=right]{justify-self:end;max-width:min(46rem,62%)}
.prologue-layout-letterbox .prologue-stage{background:#000}
.prologue-layout-letterbox .prologue-background{object-fit:contain}
.prologue-layout-panelLeft,.prologue-layout-panelRight{grid-template-rows:1fr auto;grid-template-columns:minmax(18rem,34%) 1fr}
.prologue-layout-panelRight{grid-template-columns:1fr minmax(18rem,34%)}
.prologue-layout-panelLeft .prologue-caption,.prologue-layout-panelRight .prologue-caption{grid-row:1;display:grid;align-content:center;overflow:auto}
.prologue-layout-panelLeft .prologue-caption{grid-column:1}
.prologue-layout-panelLeft .prologue-stage{grid-row:1;grid-column:2}
.prologue-layout-panelLeft .prologue-bar,.prologue-layout-panelRight .prologue-bar,.prologue-layout-overlay .prologue-bar{grid-row:2;grid-column:1/-1}
.prologue-layout-panelRight .prologue-stage{grid-row:1;grid-column:1}
.prologue-layout-panelRight .prologue-caption{grid-column:2}
/* A phone in portrait has no room for a side panel or a floating plate; both
   fall back to the caption frame rather than squeezing the words to a column. */
@media(max-width:760px) and (orientation:portrait){
  .prologue-layout-panelLeft,.prologue-layout-panelRight,.prologue-layout-overlay{grid-template-columns:1fr;grid-template-rows:minmax(14rem,1fr) auto auto}
  .prologue-layout-panelLeft .prologue-stage,.prologue-layout-panelRight .prologue-stage,.prologue-layout-overlay .prologue-stage{grid-row:1;grid-column:1}
  .prologue-layout-panelLeft .prologue-caption,.prologue-layout-panelRight .prologue-caption,.prologue-layout-overlay .prologue-caption{grid-row:2;grid-column:1;max-width:none;justify-self:stretch;margin:0}
  /* …and the band follows the caption down to the third row, rather than
     keeping the second-row place it takes when the words are over the art. */
  .prologue-layout-panelLeft .prologue-bar,.prologue-layout-panelRight .prologue-bar,.prologue-layout-overlay .prologue-bar{grid-row:3;grid-column:1}
}
/* The colour rows in Advanced → Opening: a palette you tap, and the system
   wheel folded away behind its own button until it is wanted. */
.set-swatch-trail{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.set-row-swatches .as-swatches{gap:.45rem}
.set-row-swatches .set-swatch::before{width:2rem;height:2rem}
.set-swatch-trail .set-wheel{width:3.2rem;height:2.4rem;padding:0;border:1px solid var(--line-soft);border-radius:4px;background:transparent}
/* The short-landscape rule near the top of this file turns the screen into art
   plus a side panel. That is right for the caption frame, which has nowhere
   else to put the words on a 500px-tall screen, and wrong for the two frames
   that state their own geometry: overlay puts the words ON the art, letterbox
   puts them under a letterboxed plate. Neither inherits a panel it did not ask
   for — the wireframe the owner chose is the wireframe that is drawn. The two
   panel frames already restate their columns above, so they are unaffected. */
@media(max-height:500px) and (orientation:landscape){
  /* The side-panel fallback puts the art beside the words; the band still runs
     the width of the screen underneath both. This rule comes FIRST: the frames
     below state their own geometry, and a generic rule after them would win on
     equal specificity and take it away again. */
  .prologue-screen{grid-template-rows:1fr auto}
  .prologue-bar{grid-row:2;grid-column:1/-1}
  .prologue-layout-overlay{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .prologue-layout-letterbox{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto auto}
  .prologue-layout-letterbox .prologue-bar{grid-row:3}
  /* Here the caption is a side panel, not a band: a fixed band height would
     leave it a strip at the top of an empty column. It fills the panel. */
  .prologue-fixed-caption.prologue-layout-caption .prologue-caption{height:auto}
  /* The editor's phone preview stays one column in any window, so it keeps the band. */
  .pse-phone .prologue-fixed-caption.prologue-layout-caption .prologue-caption{height:calc(var(--prologue-caption-vh,18) * 1cqh)}
}
/* A scene with no painting is a text card: the backdrop, and the words. */
.prologue-plate-bare{background:#100e0c}
/* The reveal: finished text, the part not yet reached drawn in transparent ink.
   It keeps its space, so nothing reflows as the words arrive, and it keeps its
   place in the accessibility tree, so nothing has to wait for a typewriter. */
.prologue-unsaid{color:transparent;-webkit-text-stroke-color:transparent}
/* ---- Advanced → Opening: the scene list and the preset slots --------------
   The list IS the running order: one row per scene, the playing ones first and
   numbered, anything switched off parked below them. Drag or arrow — both write
   the same `order` keys — and the actions sit at the end of the row they act on. */
.as-row.setting.set-row-scenes{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:.7rem;padding-bottom:1.2rem}
.as-row.setting.set-row-scenes>.as-labelstack{width:100%;min-width:0}
.as-row.setting.set-row-scenes>.r-trail{display:grid;flex:none;width:100%;min-width:0;max-width:none;margin:0}
.set-scene-trail{gap:.7rem}
.set-scene-list{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.set-scene{display:grid;grid-template-columns:1.3rem minmax(0,1fr) auto;align-items:center;gap:.5rem .7rem;padding:.7rem .8rem;border:1px solid var(--line-soft);border-radius:6px;background:var(--bg)}
.set-scene[data-live="0"]{opacity:.65}
.set-scene-grip{cursor:grab;color:var(--muted, #b8ac98);font-size:1.1rem;line-height:1}
.set-scene-dragging{outline:2px dashed var(--gold);opacity:.9}
.set-scene-name{grid-column:2;min-width:0;font-weight:600;overflow-wrap:anywhere}
.set-scene-name em{font-style:normal;color:var(--muted, #b8ac98)}
.set-scene-at{grid-column:3;font-variant-numeric:tabular-nums;color:var(--muted, #b8ac98);white-space:nowrap}
.set-scene-acts{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:.35rem}
.set-preset-acts{display:flex;flex-wrap:wrap;gap:.35rem}
.set-scene-acts .as-btn,.set-preset-acts .as-btn{min-height:40px}
.set-scene-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
@media(max-width:760px){.set-scene-acts{width:100%}}

/* ---- the control band, and every dial the staging writes ------------------
   The buttons are the FRAME's: a band along the bottom of the screen, under
   the words but never part of them, so a wireframe that floats the text into
   the middle of the picture leaves Continue where a hand expects it. */
.prologue-bar{grid-row:3;position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;justify-content:var(--prologue-controls-align,center);padding:.6rem max(1.25rem,env(safe-area-inset-right)) max(.7rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left));background:linear-gradient(#15110d,#100e0c);border-top:1px solid rgba(255,255,255,.06)}
.prologue-bar .prologue-progress{margin:0}
.prologue-controls{justify-content:var(--prologue-controls-align,center)}
.prologue-controls-compact .prologue-controls button{min-height:40px;padding-block:.35rem;font-size:.95em}
.prologue-controls-large .prologue-controls button{min-height:60px;padding-inline:1.4rem;font-size:1.15em}
.prologue-controls-text .prologue-caption{padding-bottom:max(var(--prologue-box-padding,1rem),env(safe-area-inset-bottom))}
/* The picture: four dials in one filter, the mirror, the vignette over it. */
.prologue-background{filter:var(--prologue-filter,none);transform:scale(var(--prologue-scale,1)) scaleX(var(--prologue-flip,1))}
.prologue-plate{background:var(--prologue-backdrop,#100e0c)}
/* The plate is `inset:0` over the whole stage, so IT is what shows beside a
   letterboxed painting — a colour on the stage underneath could never paint. */
.prologue-layout-letterbox .prologue-plate{background:var(--prologue-letterbox,#000)}
.prologue-plate::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:var(--prologue-vignette,0);background:radial-gradient(ellipse at center,transparent 45%,#000 120%)}
.prologue-layout-letterbox .prologue-stage{background:var(--prologue-letterbox,#000)}
/* The words, part by part. */
.prologue-title{color:var(--prologue-title-color,var(--gold));font-size:calc(1.6rem*var(--prologue-text-scale,1)*var(--prologue-title-scale,1))}
.prologue-speaker{color:var(--prologue-speaker-color,#c0b39d);font-size:calc(1.2rem*var(--prologue-text-scale,1)*var(--prologue-speaker-scale,1))}
.prologue-dialogue{color:var(--prologue-dialogue-color,#eee6d5);line-height:var(--prologue-line-height,1.5);letter-spacing:var(--prologue-letter-spacing,0);max-width:var(--prologue-measure,65ch);font-family:var(--prologue-font,var(--font-body))}
.prologue-location{color:var(--prologue-location-color,var(--gold))}
.prologue-text-waiting .prologue-title,.prologue-text-waiting .prologue-speaker,.prologue-text-waiting .prologue-dialogue,.prologue-text-waiting .prologue-location{visibility:hidden}
/* The container, in detail: it keeps its spacing whatever it is drawn with. */
.prologue-has-box .prologue-caption{border-radius:var(--prologue-box-radius,0);border:var(--prologue-box-border,0) solid var(--prologue-box-border-color,transparent);backdrop-filter:var(--prologue-box-backdrop,none)}
.prologue-dot{display:inline-block;width:.55rem;height:.55rem;margin:0 .22rem;border-radius:50%;background:currentColor;opacity:.35}
.prologue-dot.on{opacity:1;box-shadow:0 0 6px currentColor}
@media(max-width:760px) and (orientation:portrait){.prologue-screen{grid-template-rows:minmax(14rem,1fr) auto auto}}