/* Depth and interactive explanations, using the portal's existing visual language. */
.chapter-index{position:fixed;right:22px;top:50%;transform:translateY(-50%);display:grid;gap:18px;z-index:22}
.chapter-index a{display:flex;align-items:center;justify-content:flex-end;gap:9px;color:#65808d;font:9px ui-monospace,monospace;position:relative}
.chapter-index i{width:16px;height:1px;background:#315362;transition:width .3s,background .3s}
.chapter-index b{position:absolute;right:58px;white-space:nowrap;font-weight:400;letter-spacing:.1em;color:#c4e6ef;opacity:0;transform:translateX(5px);transition:.2s;background:#061119ed;padding:8px 10px;pointer-events:none}
.chapter-index a:hover b,.chapter-index a:focus-visible b{opacity:1;transform:none}
.chapter-index [aria-current]{color:#eac385}.chapter-index [aria-current] i{width:26px;background:#eac385;box-shadow:0 0 9px #eac38555}
.portal-ready .chapter:not(.opening){background:radial-gradient(ellipse at 75% 50%,#0b2631b3,transparent 65%),linear-gradient(90deg,#030b12f2,#030b12cb);border-top:1px solid #38617044}
.chapter:not(.opening):before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#5cc7dd08 1px,transparent 1px),linear-gradient(90deg,#5cc7dd08 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 72% 50%,#000,transparent 68%)}
.chapter:not(.opening).chapter-seen .section-copy,.chapter:not(.opening).chapter-seen .visual{animation:chapter-arrival .9s both}
.chapter:not(.opening).chapter-seen .visual{animation-delay:.12s}
@keyframes chapter-arrival{from{opacity:.5;translate:0 28px}to{opacity:1;translate:0 0}}
.experience-visual,.studio-visual{--panel-x:50%;--panel-y:50%;--panel-tilt:0deg;transition:transform .45s;transform:perspective(1200px) rotateY(var(--panel-tilt))}
.film-frame{transform:none!important;background:#06131d;border-color:#365e70;position:relative}
.film-frame:before,.studio-visual:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(300px circle at var(--panel-x) var(--panel-y),#b8efff0d,transparent 75%);border-top:1px solid #82ccdf55}
.scene-art{background:radial-gradient(ellipse at var(--panel-x,70%) 40%,#32616e,#112530 48%,#040a10 78%);transition:background .4s}
.scene-art .door{box-shadow:0 0 35px #e5ae4a55,inset 0 0 30px #e5ae4a33;animation:door-light 7s ease-in-out infinite}
@keyframes door-light{50%{box-shadow:0 0 60px #e5ae4a66,inset 0 0 36px #e5ae4a55}}
.path-visual{padding:22px;border:1px solid #30505d;background:linear-gradient(145deg,#0b202bc4,#030c13de);box-shadow:0 24px 70px #0005}
.path-visual:before{content:'LIVE PATH DEMONSTRATION';display:block;font:9px ui-monospace,monospace;letter-spacing:.16em;color:#81bdcc;border-bottom:1px solid #2c4b58;padding:0 0 18px}
.story-packet{fill:#ecfcff;stroke:#9fefff;stroke-width:2;filter:drop-shadow(0 0 8px #77e9ff)}
.path-visual[data-stage=reading] rect{stroke:#c1f9ff;fill:#53dcf633}.path-visual[data-stage=decision] .junction{fill:#f5cd7f;stroke:#ffe7b8;filter:drop-shadow(0 0 12px #efb94e)}
html body .demo-replay{margin-top:16px;min-height:38px!important;padding:10px 16px!important;font-size:10px!important}
.studio-visual{box-shadow:0 30px 90px #0006;background:#081a24dd}.studio-visual img{max-height:260px;object-fit:contain}
.studio-simulator{padding:20px 24px;border-top:1px solid #285366;background:#040e17a6}
.simulator-heading{display:flex;justify-content:space-between;align-items:center;font:10px ui-monospace,monospace;letter-spacing:.12em;color:#8fc9d9;margin-bottom:14px}
.simulator-heading output{color:#f1d19a;font-size:17px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.studio-simulator label{display:block;font-size:12px;color:#b6cfd9;margin-bottom:12px}.studio-simulator input{width:100%;accent-color:#80d9e9;cursor:ew-resize;min-height:24px;margin:0}
.studio-simulator #demo-status{font-size:13px;line-height:1.65;color:#e0edf2;min-height:43px;margin:12px 0 8px}.simulator-note{font:10px/1.6 ui-monospace,monospace;color:#809eac;margin:0}
.demo-playhead{position:absolute;top:-4px;bottom:-4px;width:1px;background:#ddf7ff;box-shadow:0 0 9px #7bdeff;pointer-events:none}
.demo-playhead:before{content:'';position:absolute;top:0;left:-3px;width:7px;height:7px;background:#ddf7ff;transform:rotate(45deg)}
.studio-visual[data-phase=reading] .window-marker{background:#4cd9ec44;box-shadow:0 0 20px #57c9da22}.studio-visual[data-phase=held] .window-marker{border-color:#dfbb77}.studio-visual[data-phase=branch] .point-marker{color:#fff2cf;filter:drop-shadow(0 0 5px #dcb46d)}
.invitation:after{content:'';position:absolute;width:min(80vw,800px);aspect-ratio:1;z-index:-1;border:1px solid #3b82952b;border-radius:50%;box-shadow:0 0 0 28px #2c64730a,0 0 0 29px #3b829516;pointer-events:none}
@media(max-width:1000px){.chapter-index{display:none}.path-visual{padding:16px}.studio-simulator{padding:18px}.studio-visual,.experience-visual{transform:none}}
@media(prefers-reduced-motion:reduce){.chapter-seen .section-copy,.chapter-seen .visual,.scene-art .door{animation:none!important}.experience-visual,.studio-visual{transform:none!important}}
.motion-paused .experience-visual,.motion-paused .studio-visual{transform:none!important}

/* Audience-first positioning and the connected writing workflow. */
.hero-definition{font:500 clamp(14px,1.5vw,19px)/1.5 'Segoe UI',sans-serif;letter-spacing:.025em;color:#c9eaf2;margin:0 0 7px}.hero-explainer{font:400 14px/1.6 'Segoe UI',sans-serif;color:#8eabb8;margin:0 auto 28px;max-width:470px}.hero-content .hero-line{margin-bottom:22px}
.section-copy .audience-promise{border-left:1px solid #bd9653;padding-left:18px;color:#e3d0ad!important;font-size:15px!important}
.creator-steps{border-top:1px solid #2b4a57;margin:24px 0 8px}.creator-steps p{display:grid;grid-template-columns:125px 1fr;gap:18px;padding:14px 0;margin:0;border-bottom:1px solid #2b4a57}.creator-steps b{font:500 12px/1.6 'Segoe UI',sans-serif;color:#e6c88e}.creator-steps span{font:400 13px/1.65 'Segoe UI',sans-serif;color:#a9c1cd}
.script-map-preview{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;border-bottom:1px solid #294b59;background:#040e1780}.script-map-preview>span{font:11px/1.7 'Courier New',monospace;color:#d1e1e6}.script-map-preview i{font-style:normal;color:#86a5b4}.script-map-preview b{font:9px/1.7 ui-monospace,monospace;letter-spacing:.08em;color:#82cddd;white-space:nowrap}
@media(max-width:800px){.hero-explainer{font-size:13px;max-width:300px}.creator-steps p{grid-template-columns:1fr;gap:5px}.script-map-preview{padding:16px;flex-wrap:wrap}.hero-definition{margin-top:8px}}