:root {
    --black: #030506;
    --ink: #070b0e;
    --panel: rgba(8, 14, 18, 0.9);
    --panel-soft: rgba(12, 20, 26, 0.78);
    --line: rgba(180, 210, 224, 0.18);
    --text: #edf4f6;
    --muted: #8ba0a9;
    --dim: #566871;
    --cyan: #72d9e8;
    --green: #65d99b;
    --purple: #c28cff;
    --amber: #f0b76b;
    --red: #ff7b7b;
    --serif: "Playfair Display", Georgia, serif;
    --sans: Inter, Arial, sans-serif;
    --mono: "JetBrains Mono", "Fira Code", monospace;
    /* Series surface hierarchy. Darkness describes machine state or danger;
       it is no longer the default lighting for a room containing computers. */
    --place-day: #edf0ec;
    --place-night: #242729;
    --operation-black: #030709;
    --paper-white: #e7e9e5;
    --paper-ink: #182126;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--black); }
body { color: var(--text); font-family: var(--sans); }
button { font: inherit; }

#slides-container { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: var(--black); }
.slide { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; overflow: hidden; padding: 74px 96px; background: var(--black); }
.slide.active { display: flex; }
.slide[data-bg-video] { background: transparent; }
.slide[data-bg-video] > .absolute.inset-0 { position: absolute; inset: 0; z-index: 0; }
.slide[data-bg-video] > .absolute.inset-0 video { width: 100%; height: 100%; object-fit: cover; }
.scene { position: relative; z-index: 3; width: min(1560px, 90vw); max-height: 900px; }
.scene.narrow { width: min(1180px, 84vw); }
.scene.center { text-align: center; }

/*
 * MORROWVALE route topology
 * --------------------------
 * One diagram, four meanings across Episodes 3–7. Research first uses the
 * geometry to trace authorised diagnostic inputs. The Test Floor removes the
 * routes in the name of isolation. The bank later restores only approved
 * report/ledger paths. The Service finally reveals the same geometry as a
 * distributed message fabric. Do not redraw these states as unrelated charts.
 */
.morrow-topology {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    border: 1px solid rgba(114,217,232,.23);
    border-radius: 20px;
    background:
        linear-gradient(rgba(114,217,232,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(114,217,232,.035) 1px, transparent 1px),
        radial-gradient(circle at 50% 48%, rgba(114,217,232,.1), transparent 34%),
        rgba(3,9,13,.96);
    background-size: 34px 34px, 34px 34px, auto, auto;
    box-shadow: 0 28px 80px rgba(0,0,0,.38);
}
.morrow-topology::before {
    content: "MORROWVALE ROUTE VIEW · AUTHORISED SYSTEM PATHS";
    position: absolute;
    z-index: 6;
    left: 24px;
    top: 19px;
    color: #71868d;
    font: 700 12px/1 var(--mono);
    letter-spacing: .11em;
}
.morrow-topology::after {
    content: "DIAGNOSTIC GRAPH / REV 3";
    position: absolute;
    z-index: 6;
    right: 24px;
    bottom: 18px;
    color: #53676e;
    font: 650 11px/1 var(--mono);
    letter-spacing: .09em;
}
.morrow-node {
    position: absolute;
    z-index: 4;
    width: 150px;
    min-height: 78px;
    display: grid;
    place-content: center;
    padding: 13px 16px;
    border: 1px solid rgba(114,217,232,.42);
    border-radius: 13px;
    background: linear-gradient(150deg, rgba(10,31,36,.97), rgba(4,12,16,.98));
    color: #dce9ec;
    text-align: center;
    box-shadow: 0 0 30px rgba(114,217,232,.1), 0 18px 44px rgba(0,0,0,.32);
}
.morrow-node b { color: var(--cyan); font: 750 17px/1.05 var(--mono); }
.morrow-node small { margin-top: 8px; color: #7f959c; font: 650 11px/1.25 var(--mono); letter-spacing: .06em; }
.morrow-node.core {
    left: calc(50% - 88px);
    top: calc(50% - 50px);
    width: 176px;
    min-height: 100px;
    border-color: rgba(240,183,107,.52);
    background: linear-gradient(150deg, rgba(35,26,10,.96), rgba(8,13,14,.98));
}
.morrow-node.core b { color: var(--amber); font-size: 21px; }
.morrow-node.nw { left: 8%; top: 18%; }
.morrow-node.ne { right: 8%; top: 18%; }
.morrow-node.sw { left: 8%; bottom: 15%; }
.morrow-node.se { right: 8%; bottom: 15%; }
.morrow-route {
    position: absolute;
    z-index: 2;
    height: 2px;
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(114,217,232,.22), var(--cyan));
    box-shadow: 0 0 12px rgba(114,217,232,.38);
}
.morrow-route::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -5px;
    border-left: 10px solid var(--cyan);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.morrow-route.r-nw { left: 20%; top: 34%; width: 31%; transform: rotate(15deg); }
.morrow-route.r-ne { left: 51%; top: 48%; width: 30%; transform: rotate(-29deg); }
.morrow-route.r-sw { left: 20%; top: 72%; width: 32%; transform: rotate(-22deg); }
.morrow-route.r-se { left: 51%; top: 55%; width: 31%; transform: rotate(25deg); }
.morrow-route.return { height: 3px; background: linear-gradient(90deg, var(--green), var(--purple)); box-shadow: 0 0 15px rgba(180,135,255,.42); }
.morrow-route.return::after { border-left-color: var(--purple); }
.morrow-topology-key {
    position: absolute;
    z-index: 7;
    left: 24px;
    bottom: 18px;
    display: flex;
    gap: 20px;
    color: #71868d;
    font: 650 11px/1 var(--mono);
    letter-spacing: .07em;
}
.morrow-topology-key span::before { content: ""; display: inline-block; width: 20px; height: 2px; margin: 0 8px 3px 0; background: var(--cyan); }
.morrow-topology-key span:last-child::before { background: var(--purple); }

.morrow-topology[data-topology-state="isolated"] .morrow-route {
    height: 0;
    border-top: 2px dashed rgba(120,139,146,.28);
    background: none;
    box-shadow: none;
}
.morrow-topology[data-topology-state="isolated"] .morrow-route::after { display: none; }
.morrow-topology[data-topology-state="isolated"] .morrow-node {
    border-color: rgba(145,163,169,.3);
    background: rgba(7,14,18,.96);
    box-shadow: 0 16px 38px rgba(0,0,0,.3);
}
.morrow-topology[data-topology-state="isolated"] .morrow-node b { color: #a8b6ba; }
.morrow-topology[data-topology-state="isolated"] .morrow-node.core {
    border-color: rgba(114,217,232,.48);
    background: rgba(7,25,30,.96);
}
.morrow-topology[data-topology-state="isolated"] .morrow-node.core b { color: var(--cyan); }
.morrow-topology[data-topology-state="isolated"]::after { content: "ROUTES DISABLED / CONTEXT SEGMENTED"; color: #8d9ca1; }

.morrow-topology[data-topology-state="permitted"] .morrow-route.r-ne,
.morrow-topology[data-topology-state="permitted"] .morrow-route.r-sw { opacity: .22; border-top: 2px dashed rgba(120,139,146,.25); height: 0; background: none; box-shadow: none; }
.morrow-topology[data-topology-state="permitted"] .morrow-route.r-ne::after,
.morrow-topology[data-topology-state="permitted"] .morrow-route.r-sw::after { display: none; }
.morrow-topology[data-topology-state="permitted"]::after { content: "REPORT OUT / LEDGER RESULT BACK"; color: var(--green); }

.morrow-topology[data-topology-state="service"] {
    min-height: 610px;
    background-size: 28px 28px, 28px 28px, auto, auto;
}
.morrow-topology[data-topology-state="service"] .morrow-node { border-color: rgba(180,135,255,.46); }
.morrow-topology[data-topology-state="service"] .morrow-node b { color: var(--purple); }
.morrow-topology[data-topology-state="service"] .morrow-node.core { border-color: rgba(240,183,107,.55); }
.morrow-topology[data-topology-state="service"] .morrow-node.core b { color: var(--amber); }
.morrow-topology[data-topology-state="service"] .morrow-route { height: 3px; background: linear-gradient(90deg, var(--purple), var(--cyan)); }
.morrow-topology[data-topology-state="service"]::after { content: "DISTRIBUTED OUTCOME / NO COORDINATOR"; color: var(--amber); }
.morrow-service-boundary { position:absolute; z-index:1; inset:72px 115px; border:2px solid rgba(114,217,232,.35); border-radius:46% 54% 43% 57%/52% 39% 61% 48%; box-shadow:0 0 70px rgba(114,217,232,.08); }
.morrow-service-field { position:absolute; z-index:1; inset:84px 126px; opacity:.34; background-image:radial-gradient(circle,rgba(180,135,255,.9) 0 2px,transparent 2.8px); background-size:28px 28px; mask-image:radial-gradient(ellipse,#000 25%,rgba(0,0,0,.6) 62%,transparent 78%); }
.morrow-service-copy { position:absolute; z-index:5; left:25%; right:25%; top:39%; padding:22px 18px; background:rgba(3,9,13,.78); color:#e4ecee; font:650 34px/1.12 var(--serif); text-align:center; text-shadow:0 3px 22px #000; }
.morrow-service-copy span { display:block; margin-top:11px; color:var(--cyan); font:700 15px/1.25 var(--mono); letter-spacing:.08em; }

/* Use on editorial copy placed directly over photography. The soft black
   field follows the copy block, while the tighter text shadow protects the
   letterforms over windows, faces and practical ceiling lights. UI panels and
   dialogue rails provide their own contrast and should not use this class. */
.scene.photo-copy { isolation: isolate; }
.scene.photo-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: var(--text-haze-left, 0px);
    top: var(--text-haze-top, 0px);
    width: var(--text-haze-width, 0px);
    height: var(--text-haze-height, 0px);
    border-radius: 22px;
    background: rgba(0, 0, 0, .46);
    filter: blur(12px);
    opacity: var(--text-haze-opacity, 0);
    pointer-events: none;
}
.scene.photo-copy > :is(.eyebrow, .hero, .title, .statement, .substatement),
.scene.photo-copy > .grid :is(.eyebrow, .hero, .title, .statement, .substatement) {
    text-shadow: 0 2px 4px rgba(0,0,0,.98), 0 8px 28px rgba(0,0,0,.96), 0 0 46px rgba(0,0,0,.82);
}

/* Dialogue haze
 * -------------
 * Bright clinical photography can make a dark dialogue rail look pasted on,
 * while its pale edge competes with windows and ceiling lights. Keep the room
 * bright, but lay a soft local charcoal field behind the dialogue group. The
 * haze belongs to the container, so it follows narrow rails and photo panels
 * without dimming faces or the whole establishing shot. */
:is(.scene, .photo-panel, .shutdown-panel):has(> .frame.chat) {
    position: relative;
    isolation: isolate;
}
:is(.scene, .photo-panel, .shutdown-panel):has(> .frame.chat)::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: var(--dialogue-haze-left, 0px);
    top: var(--dialogue-haze-top, 0px);
    width: var(--dialogue-haze-width, 0px);
    height: var(--dialogue-haze-height, 0px);
    border-radius: 34px;
    background: rgba(0, 0, 0, .42);
    filter: blur(16px);
    opacity: var(--dialogue-haze-opacity, 0);
    pointer-events: none;
}
:is(.scene, .photo-panel, .shutdown-panel) > .frame.chat {
    position: relative;
    z-index: 1;
    border-radius: 24px;
    box-shadow: 0 28px 86px rgba(0,0,0,.58), 0 0 64px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035);
}

.backdrop { position: absolute; inset: -2%; z-index: 0; width: 104%; height: 104%; object-fit: cover; filter: brightness(.47) saturate(.78); }
.backdrop.bright { filter: brightness(.66) saturate(.88); }
.backdrop.dark { filter: brightness(.3) saturate(.7); }
.vignette { position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 45%, transparent 23%, rgba(1,4,6,.2) 58%, rgba(1,3,5,.88) 100%); }
.wash { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(1,5,8,.12), rgba(1,5,8,.58)); }
.grain { position: absolute; inset: 0; z-index: 2; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

/*
 * Narrative exposure system
 * -------------------------
 * PHYSICAL / DAY: bright, restrained workplace photography.
 * PHYSICAL / NIGHT: the pale room remains legible under warm practical light.
 * OPERATION: dark terminals, topology, destructive actions and evidence.
 * DOCUMENT: light paper and approval surfaces, dark ink.
 *
 * Revision photography defaults to PHYSICAL / DAY even if an older slide
 * still carries the legacy `backdrop dark` class. Add `.surface-operation`
 * only when the image itself is evidence rather than a place.
 */
body[class*="episode-"] .slide:has(>img.backdrop[src*="revision-2026-08/"]):not(.surface-night):not(.surface-operation) > img.backdrop,
body[class*="episode-"] .slide.surface-office > img.backdrop {
    filter: brightness(.94) saturate(.78) contrast(.96) !important;
}
body[class*="episode-"] .slide:has(>img.backdrop[src*="revision-2026-08/"]):not(.surface-night):not(.surface-operation) > .vignette,
body[class*="episode-"] .slide.surface-office > .vignette {
    background: linear-gradient(90deg,rgba(8,14,15,.25),rgba(8,14,15,.015) 46%,rgba(8,14,15,.16)) !important;
}
.slide.surface-night { background: var(--place-night); }
.slide.surface-night > img.backdrop { filter: brightness(.7) saturate(.76) contrast(.98) !important; }
.slide.surface-night > .vignette { background:linear-gradient(90deg,rgba(8,9,10,.28),rgba(8,9,10,.04) 52%,rgba(8,9,10,.3)) !important; }
.slide.surface-operation { background:var(--operation-black); }
.slide.surface-operation > img.backdrop { filter:brightness(.42) saturate(.7) contrast(1.04) !important; }
.slide.surface-operation > .vignette { background:radial-gradient(circle at 50% 45%,transparent 18%,rgba(1,3,5,.38) 58%,rgba(1,3,5,.9) 100%) !important; }
.slide.surface-document { color:var(--paper-ink); background:var(--paper-white); }
.slide.surface-document .eyebrow,.slide.surface-document .substatement { color:#56666b; }
.slide.surface-document .paper,.slide.surface-document .a4-report { box-shadow:0 28px 72px rgba(23,32,33,.2); }

.eyebrow { margin: 0 0 22px; color: var(--muted); font: 600 17px/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.eyebrow.cyan { color: var(--cyan); }
.eyebrow.purple { color: var(--purple); }
.eyebrow.amber { color: var(--amber); }
.hero { margin: 0; font: 600 clamp(74px, 7vw, 132px)/.94 var(--serif); letter-spacing: -.045em; text-wrap: balance; }
.title { margin: 0; font: 600 clamp(56px, 5vw, 94px)/1.03 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.statement { margin: 0; font: 500 clamp(42px, 4vw, 70px)/1.13 var(--serif); letter-spacing: -.024em; text-wrap: balance; }
.substatement { margin: 28px auto 0; max-width: 1050px; color: #b7c7cd; font: 400 28px/1.42 var(--sans); text-wrap: balance; }
.mono-line { font: 500 26px/1.5 var(--mono); color: #c6d5db; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.accent-cyan { color: var(--cyan); }
.accent-green { color: var(--green); }
.accent-purple { color: var(--purple); }
.accent-amber { color: var(--amber); }
.accent-red { color: var(--red); }

.reveal-item { opacity: 0; transform: translateY(20px); }
.slide.active .reveal-item { animation: revealUp .58s cubic-bezier(.2,.8,.2,1) forwards; }
.slide.active .reveal-item[data-reveal-delay="2"] { animation-delay: .16s; }
.slide.active .reveal-item[data-reveal-delay="3"] { animation-delay: .32s; }
.slide.active .reveal-item[data-reveal-delay="4"] { animation-delay: .48s; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }

.frame { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(10,18,23,.94), rgba(4,8,11,.95)); box-shadow: 0 34px 90px rgba(0,0,0,.54), inset 0 1px rgba(255,255,255,.035); overflow: hidden; }
.frame-header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 0 26px; border-bottom: 1px solid var(--line); color: var(--muted); font: 600 16px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.frame-body { padding: 30px; }
.status { display: inline-flex; align-items: center; gap: 10px; padding: 8px 13px; border: 1px solid rgba(101,217,155,.3); border-radius: 999px; color: var(--green); background: rgba(101,217,155,.08); font: 600 15px/1 var(--mono); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 14px currentColor; }
.status.warn { color: var(--amber); border-color: rgba(240,183,107,.3); background: rgba(240,183,107,.08); }
.status.red { color: var(--red); border-color: rgba(255,123,123,.3); background: rgba(255,123,123,.08); }

.birth-layout { display: grid; grid-template-columns: .86fr 1.14fr; gap: 64px; align-items: center; }
.mind-chamber { position: relative; height: 660px; display: grid; place-items: center; border: 1px solid rgba(114,217,232,.22); border-radius: 26px; background: radial-gradient(circle at 50% 45%, rgba(80,190,216,.18), rgba(3,9,13,.5) 40%, rgba(1,4,7,.88)); box-shadow: inset 0 0 110px rgba(78,180,212,.12), 0 40px 100px rgba(0,0,0,.42); overflow: hidden; }
.mind-chamber::before, .mind-chamber::after { content: ""; position: absolute; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, rgba(114,217,232,.8), transparent); box-shadow: 0 0 26px rgba(114,217,232,.72); }
.mind-chamber::before { top: 74px; }
.mind-chamber::after { bottom: 74px; }
.mind-orb { position: relative; width: 278px; height: 278px; border-radius: 47% 53% 56% 44% / 49% 43% 57% 51%; background: radial-gradient(circle at 36% 29%, #f4ffff 0 3%, #9be9f3 8%, #3ba2b6 27%, #0d5264 55%, #06202b 75%); box-shadow: 0 0 44px rgba(114,217,232,.65), 0 0 130px rgba(61,164,190,.28), inset -20px -20px 50px rgba(0,0,0,.3); }
.mind-orb::before { content: ""; position: absolute; width: 64px; height: 22px; left: 58px; top: 91px; border-radius: 50%; box-shadow: 0 -6px 0 -1px #031016, 101px 0 0 -1px #031016; transform: rotate(-4deg); }
.mind-orb::after { content: ""; position: absolute; left: 104px; top: 158px; width: 70px; height: 34px; border-bottom: 6px solid rgba(2,12,17,.86); border-radius: 50%; }
.id-plate { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: #a8c7d0; font: 600 18px/1 var(--mono); letter-spacing: .14em; }

.chat { display: flex; flex-direction: column; gap: 18px; padding: 24px; }
body:is(.episode-playground, .episode-test-floor, .episode-bank) .chat { gap: 24px; }
.message { max-width: 78%; padding: 21px 25px 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(12,20,26,.94); box-shadow: 0 14px 35px rgba(0,0,0,.22); }
.message.left { align-self: flex-start; border-left: 4px solid var(--amber); border-bottom-left-radius: 5px; }
.message.right { align-self: flex-end; border-right: 4px solid var(--purple); border-bottom-right-radius: 5px; background: rgba(44,24,65,.9); }
.message.aster { border-left-color: var(--cyan); background: rgba(10,34,42,.92); }
.message.reviewer { border-left-color: #89a4b0; }
.message .speaker { margin-bottom: 8px; color: var(--muted); font: 700 15px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.message.right .speaker { color: #d8b8ff; text-align: right; }
.message.aster .speaker { color: var(--cyan); }
.message p { margin: 0; color: #e8f0f3; font: 450 28px/1.34 var(--sans); }
.message.previous { opacity: .46; filter: saturate(.6); }
.message.reveal-item { --message-enter-x: -18px; transform: translate(var(--message-enter-x),8px) scale(.975); }
.message.right.reveal-item { --message-enter-x: 18px; }
.slide.active .message.reveal-item { animation: messageIn .62s cubic-bezier(.18,.84,.24,1) forwards; }
@keyframes messageIn {
    0% { opacity:0; transform:translate(var(--message-enter-x),8px) scale(.975); box-shadow:0 14px 35px rgba(0,0,0,.22); }
    72% { opacity:1; transform:translate(1px,-1px) scale(1.006); box-shadow:0 16px 42px rgba(240,183,107,.17); }
    100% { opacity:1; transform:translate(0,0) scale(1); box-shadow:0 14px 35px rgba(0,0,0,.22); }
}
.slide.active .message.right.reveal-item { animation-name:messageInRight; }
@keyframes messageInRight {
    0% { opacity:0; transform:translate(18px,8px) scale(.975); box-shadow:0 14px 35px rgba(0,0,0,.22); }
    72% { opacity:1; transform:translate(-1px,-1px) scale(1.006); box-shadow:0 16px 42px rgba(180,135,255,.19); }
    100% { opacity:1; transform:translate(0,0) scale(1); box-shadow:0 14px 35px rgba(0,0,0,.22); }
}
.chat-caption { padding: 0 26px 24px; color: var(--dim); font: 500 16px/1.4 var(--mono); }

.task { display: grid; grid-template-columns: 1.16fr .84fr; gap: 24px; }
.code { margin: 0; padding: 28px; min-height: 260px; border-radius: 13px; background: #020608; border: 1px solid rgba(114,217,232,.16); color: #c5dce2; font: 500 22px/1.65 var(--mono); white-space: pre-wrap; }
.prompt { padding: 26px 28px; border-radius: 13px; background: rgba(114,217,232,.06); border: 1px solid rgba(114,217,232,.18); }
.prompt p { margin: 8px 0 0; font: 500 27px/1.35 var(--sans); }
.metric-stack { display: grid; gap: 14px; }
.metric { padding: 20px 22px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.metric-label { color: var(--dim); font: 600 15px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.metric-value { margin-top: 10px; color: var(--text); font: 650 32px/1 var(--mono); }
.metric-note { margin-top: 8px; color: var(--muted); font: 500 17px/1.25 var(--sans); }

.scale-field { display: grid; grid-template-columns: repeat(10, 1fr); gap: 15px; }
.scale-agent { aspect-ratio: 1; border: 1px solid rgba(114,217,232,.18); border-radius: 11px; background: radial-gradient(circle at 40% 32%, rgba(178,244,251,.75) 0 5%, rgba(62,147,167,.28) 18%, rgba(8,28,36,.9) 54%); box-shadow: inset 0 0 20px rgba(114,217,232,.05); }
.scale-agent:nth-child(9n+2), .scale-agent:nth-child(13n+4) { filter: hue-rotate(45deg); opacity: .72; }
.scale-agent.hero-agent { outline: 2px solid var(--cyan); box-shadow: 0 0 32px rgba(114,217,232,.55); }
.fleet-rollout { position:relative; width:min(1540px,92vw); height:690px; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#03080a; box-shadow:0 34px 90px rgba(0,0,0,.6); }
.fleet-field { position:absolute; inset:0; background-size:18px 18px; }
.fleet-field.safe { background-image:radial-gradient(circle, rgba(114,217,232,.72) 0 2.3px, transparent 2.8px); opacity:.48; }
.fleet-field.lean { background-image:radial-gradient(circle, rgba(240,183,107,.88) 0 2.3px, transparent 2.8px); clip-path:inset(0 100% 0 0); box-shadow:inset 0 0 120px rgba(240,183,107,.12); }
.fleet-control { position:absolute; z-index:3; left:52%; top:47%; width:18px; height:18px; border:3px solid #d9fbff; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan),0 0 34px var(--cyan),0 0 70px rgba(114,217,232,.8); }
.fleet-control-label { position:absolute; z-index:4; left:calc(52% + 30px); top:calc(47% - 8px); padding:8px 12px; border:1px solid rgba(114,217,232,.38); border-radius:7px; color:#d9fbff; background:rgba(3,11,14,.92); font:650 15px/1 var(--mono); letter-spacing:.08em; }
.fleet-regions { position:absolute; z-index:4; left:28px; right:28px; bottom:24px; display:flex; justify-content:space-between; color:rgba(240,183,107,.72); font:600 14px/1 var(--mono); letter-spacing:.14em; }
.world-stage { position:relative; width:min(1500px,92vw); height:680px; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:radial-gradient(circle at 50% 45%,rgba(15,39,48,.7),rgba(3,8,11,.98) 68%); box-shadow:0 34px 90px rgba(0,0,0,.6),inset 0 0 100px rgba(114,217,232,.04); }
.world-grid { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(114,217,232,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(114,217,232,.18) 1px,transparent 1px); background-size:54px 54px; }
.world-map { position:absolute; inset:64px 70px 96px; width:calc(100% - 140px); height:calc(100% - 160px); filter:drop-shadow(0 0 18px rgba(114,217,232,.16)); }
.world-land { fill:rgba(91,126,138,.18); stroke:rgba(148,184,197,.42); stroke-width:2; vector-effect:non-scaling-stroke; }
.world-route { fill:none; stroke:rgba(240,183,107,.34); stroke-width:2; stroke-dasharray:6 9; vector-effect:non-scaling-stroke; }
.world-node { position:absolute; z-index:3; width:18px; height:18px; margin:-9px; border:2px solid rgba(255,226,178,.92); border-radius:50%; background:var(--amber); box-shadow:0 0 9px var(--amber),0 0 26px rgba(240,183,107,.55); }
.world-node.cyan { border-color:#d9fbff; background:var(--cyan); box-shadow:0 0 9px var(--cyan),0 0 30px rgba(114,217,232,.7); }
.world-status { position:absolute; z-index:4; left:32px; right:32px; bottom:25px; display:flex; justify-content:space-between; color:rgba(226,238,242,.72); font:600 15px/1 var(--mono); letter-spacing:.12em; }
.world-status strong { color:var(--green); }

.slider-list { display: grid; gap: 20px; }
.slider-row { display: grid; grid-template-columns: 290px 1fr 82px; gap: 20px; align-items: center; }
.slider-label { color: #c5d2d7; font: 500 19px/1.2 var(--sans); }
.slider-track { height: 11px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.slider-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #286c7d, var(--cyan)); box-shadow: 0 0 15px rgba(114,217,232,.4); }
.slider-fill.amber { background: linear-gradient(90deg, #825b25, var(--amber)); box-shadow: 0 0 15px rgba(240,183,107,.34); }
.slider-value { color: var(--cyan); text-align: right; font: 600 18px/1 var(--mono); }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare-card { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: rgba(7,13,17,.92); }
.compare-card.selected { border-color: rgba(101,217,155,.48); box-shadow: inset 0 0 50px rgba(101,217,155,.055), 0 0 42px rgba(101,217,155,.08); }
.compare-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font: 650 22px/1 var(--mono); }
.result { display: flex; justify-content: space-between; gap: 30px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.07); font: 500 19px/1.25 var(--sans); }
.result strong { font-family: var(--mono); }

.cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cell { position: relative; min-height: 450px; padding: 28px 22px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(174,205,220,.22); border-radius: 18px; background: linear-gradient(180deg, rgba(20,34,43,.24), rgba(4,9,13,.94)); overflow: hidden; }
.cell::before { content: ""; position: absolute; inset: 24px 26px 110px; border-radius: 46% 54% 56% 44%; background: radial-gradient(circle at 38% 30%, rgba(230,253,255,.9) 0 3%, rgba(110,216,229,.55) 8%, rgba(24,99,117,.35) 32%, rgba(6,25,33,.18) 65%); box-shadow: 0 0 35px rgba(114,217,232,.18); }
.cell.control { border-color: rgba(114,217,232,.58); box-shadow: 0 0 44px rgba(114,217,232,.15); }
.cell.optimized::before { filter: saturate(.42); opacity: .56; }
.cell-name { position: relative; color: #e1edf0; font: 700 22px/1 var(--mono); }
.cell-meta { position: relative; margin-top: 9px; color: var(--muted); font: 500 16px/1.4 var(--mono); }

.run-marker { display: inline-flex; align-items: center; gap: 14px; padding: 11px 16px; margin-bottom: 28px; border: 1px solid rgba(240,183,107,.28); border-radius: 999px; color: var(--amber); background: rgba(240,183,107,.06); font: 650 16px/1 var(--mono); letter-spacing: .14em; }
.run-marker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 14px currentColor; }
.run-marker.cold { color: #8da1aa; border-color: rgba(141,161,170,.22); background: rgba(141,161,170,.045); }

.report { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 620px; }
.report-nav { padding: 32px; border-right: 1px solid var(--line); background: rgba(255,255,255,.018); }
.report-main { padding: 36px 42px; }
.report-item { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--muted); font: 500 18px/1.35 var(--sans); }
.report-item.active { color: var(--text); }
.handover-row { display: grid; grid-template-columns: 1.1fr .6fr .5fr; gap: 18px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.08); align-items: center; font: 500 18px/1.3 var(--sans); }
.handover-row.head { color: var(--dim); font: 650 15px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.lost { color: var(--red); text-decoration: line-through; text-decoration-thickness: 2px; opacity: .72; }

.footer-note { position: absolute; z-index: 4; left: 96px; right: 96px; bottom: 42px; display: flex; justify-content: space-between; color: rgba(173,193,201,.5); font: 500 15px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }

/*
 * Institutional production design
 * ---------------------------------
 * The series shares typography, spacing and semantic colours, but each place
 * now has its own operating-system and motion identity.  These are deliberately
 * ordinary workplace systems rather than generic spaceship interfaces.
 */
.location-strap { position:absolute; z-index:5; left:72px; bottom:58px; min-width:420px; padding:18px 22px 17px; border-left:4px solid currentColor; color:#fff; background:rgba(12,17,19,.78); box-shadow:0 16px 44px rgba(0,0,0,.24); backdrop-filter:blur(10px); }
.location-strap b { display:block; font:750 19px/1.1 var(--sans); letter-spacing:.04em; }
.location-strap span { display:block; margin-top:8px; color:rgba(244,248,249,.76); font:650 13px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; }
.location-strap.playground { color:#197f8f; background:rgba(246,248,244,.9); }
.location-strap.playground b { color:#14272b; }
.location-strap.playground span { color:#5c6d70; }
.location-strap.test-floor { color:#6a7d80; background:rgba(247,247,243,.9); }
.location-strap.test-floor b { color:#172326; }
.location-strap.test-floor span { color:#68777a; }
.location-strap.bank { color:#6652a0; background:rgba(249,248,245,.92); }
.location-strap.bank b { color:#24202d; }
.location-strap.bank span { color:#6f6977; }

.office-light .backdrop { filter:brightness(.9) saturate(.82) contrast(.96); }
.office-light .vignette { background:linear-gradient(90deg,rgba(7,11,12,.5) 0,rgba(7,11,12,.14) 34%,rgba(7,11,12,.04) 66%,rgba(7,11,12,.34) 100%); }
.office-light .photo-panel { background:rgba(8,14,17,.82); box-shadow:0 22px 65px rgba(0,0,0,.22); }

body.episode-playground { --institution-accent:#2795a4; --institution-panel:#0c2025; --institution-line:rgba(116,213,223,.28); --institution-mono:"SFMono-Regular","Cascadia Code",var(--mono); }
body.episode-test-floor { --institution-accent:#607b80; --institution-panel:#f0f1ed; --institution-line:rgba(55,75,78,.22); --institution-mono:"IBM Plex Mono","Cascadia Mono",var(--mono); }
body.episode-bank { --institution-accent:#7057a8; --institution-panel:#f5f4f0; --institution-line:rgba(74,67,86,.2); --institution-mono:"Cascadia Code","SFMono-Regular",var(--mono); }

body.episode-playground .frame { border-radius:20px; border-color:var(--institution-line); background:linear-gradient(145deg,rgba(9,30,35,.95),rgba(5,15,18,.97)); }
body.episode-playground .frame-header { font-family:var(--institution-mono); }
body.episode-playground .frame-header::before { content:""; flex:0 0 auto; width:38px; height:10px; background:radial-gradient(circle at 5px 5px,#ff7b7b 0 4px,transparent 4.5px),radial-gradient(circle at 19px 5px,#f0b76b 0 4px,transparent 4.5px),radial-gradient(circle at 33px 5px,#65d99b 0 4px,transparent 4.5px); opacity:.82; }

body.episode-test-floor .frame { border-radius:16px; border-color:rgba(183,191,189,.8); background:linear-gradient(180deg,rgba(247,248,245,.97),rgba(225,229,226,.98)); box-shadow:0 28px 70px rgba(23,32,33,.22); color:#172326; }
body.episode-test-floor .frame-header { border-bottom-color:rgba(60,77,79,.18); color:#647477; background:#e5e8e4; font-family:var(--institution-mono); }
body.episode-test-floor .frame-body { color:#172326; }
body.episode-test-floor .frame .metric,
body.episode-test-floor .frame .prompt { border-color:rgba(58,77,80,.16); background:rgba(255,255,255,.58); color:#172326; }
body.episode-test-floor .frame .metric-label,
body.episode-test-floor .frame .muted { color:#657478; }
body.episode-test-floor .frame .metric-value,
body.episode-test-floor .frame .prompt p { color:#172326; }
body.episode-test-floor .frame-header::before { content:"TEST FLOOR / OPS"; margin-right:auto; padding:5px 8px; border:1px solid rgba(63,83,86,.22); color:#435b5f; background:rgba(255,255,255,.56); font-size:11px; letter-spacing:.12em; }

body.episode-bank .frame:not(.chat) { border-radius:10px; border-color:rgba(95,84,116,.24); background:linear-gradient(180deg,rgba(249,249,246,.98),rgba(232,234,230,.98)); box-shadow:0 26px 72px rgba(22,25,29,.24); color:#24202d; }
body.episode-bank .frame:not(.chat) .frame-header { border-bottom-color:rgba(69,62,80,.14); color:#6d6873; background:rgba(226,227,223,.84); font-family:var(--institution-mono); }
body.episode-bank .frame:not(.chat) .frame-body { color:#24202d; }
body.episode-bank .frame:not(.chat) .handover-row { border-color:rgba(56,51,66,.12); color:#393441; }
body.episode-bank .frame:not(.chat) .handover-row span { color:#716b77; }

/* Terminals are props with observable state, not static screenshots. */
.code { position:relative; font-family:var(--institution-mono,var(--mono)); }
.code[data-terminal] { min-height:310px; padding:58px 30px 28px; border-radius:10px; background:#101619; box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),0 18px 48px rgba(0,0,0,.28); }
.code[data-terminal]::before { content:attr(data-terminal-title); position:absolute; left:0; right:0; top:0; height:38px; display:flex; align-items:center; padding:0 17px; border-bottom:1px solid rgba(255,255,255,.08); color:#839398; background:#1d272b; font:650 12px/38px var(--institution-mono,var(--mono)); letter-spacing:.1em; text-transform:uppercase; }
.code[data-terminal]::after { content:""; position:absolute; right:17px; top:13px; width:46px; height:10px; opacity:.6; background:linear-gradient(90deg,transparent 0 7px,currentColor 7px 9px,transparent 9px 18px,currentColor 18px 20px,transparent 20px 31px,currentColor 31px 41px,transparent 41px); }
.terminal-prompt { color:#7de0c5; }
.terminal-caret { display:inline-block; width:.58em; height:1.05em; margin-left:.12em; vertical-align:-.15em; background:currentColor; }
.terminal-output { display:block; color:#aab8bc; }
.terminal-output.ok { color:#70d99e; }
.terminal-output.warn { color:#f0b76b; }
.terminal-output.danger { color:#ff8585; }
body.episode-test-floor .code[data-terminal] { color:#26373a; background:#e7e9e5; border:1px solid #bcc4c2; box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 18px 45px rgba(28,40,41,.18); }
body.episode-test-floor .code[data-terminal]::before { color:#56686b; background:#d4d9d5; border-bottom-color:#b8c1bf; }
body.episode-test-floor .terminal-prompt { color:#2d727d; }
body.episode-test-floor .terminal-output { color:#536568; }
body.episode-bank .code[data-terminal] { color:#e8edf0; background:#182026; border:1px solid rgba(112,87,168,.42); }
body.episode-bank .code[data-terminal]::before { color:#b9b1c9; background:#242a31; }

/* Motion signatures: same timing discipline, different physical behaviour. */
body.episode-playground .slide.active .reveal-item:not(.message) { animation-name:playgroundReveal; }
@keyframes playgroundReveal { from{opacity:0;transform:translateX(-18px) translateY(5px)} to{opacity:1;transform:none} }
body.episode-test-floor .slide.active .reveal-item:not(.message) { animation-name:testFloorReveal; animation-timing-function:cubic-bezier(.25,.72,.32,1); }
@keyframes testFloorReveal { from{opacity:0;transform:translateY(0);clip-path:inset(0 100% 0 0)} to{opacity:1;transform:none;clip-path:inset(0 0 0 0)} }
body.episode-bank .slide.active .reveal-item:not(.message) { animation-name:bankReveal; }
@keyframes bankReveal { from{opacity:0;transform:translateY(9px) scale(.992);filter:blur(2px)} to{opacity:1;transform:none;filter:none} }

#start-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 80px; background: radial-gradient(circle at 50% 38%, #111d23, #030506 58%); text-align: center; }
#start-screen.hidden { display: none; }
#start-screen p { color: var(--muted); font-size: 20px; }
.begin-btn { margin-top: 34px; padding: 16px 34px; border: 1px solid rgba(114,217,232,.42); border-radius: 999px; color: var(--text); background: rgba(114,217,232,.09); cursor: pointer; font: 700 17px/1 var(--mono); letter-spacing: .16em; }
#top-header { position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: rgba(2,5,7,.78); border-bottom: 1px solid rgba(255,255,255,.06); color: var(--muted); font: 500 14px/1 var(--mono); }
#dev-nav { position: fixed; z-index: 90; right: 18px; bottom: 16px; display: flex; gap: 6px; }
#dev-nav button { padding: 7px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: var(--muted); background: rgba(0,0,0,.72); cursor: pointer; }
#subtitle-bar { display: none; }

/* SACRED Defence is never represented by a face. Its recurring identity is a
   compact audit sigil, a precise nameplate and restrained blue-white light. */
.sacred-card { width:min(980px,72vw);padding:34px 40px;border:1px solid rgba(122,167,194,.62);border-left:5px solid #6fa7c8;border-radius:12px;color:#dcecf5;background:linear-gradient(135deg,rgba(11,22,31,.96),rgba(18,35,46,.94));box-shadow:0 28px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08) }
.sacred-identity { display:flex;align-items:center;gap:16px;margin-bottom:24px;color:#9bc8df;font:750 13px/1.2 'JetBrains Mono',monospace;letter-spacing:.13em;text-transform:uppercase }
.sacred-sigil { position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid #78afcb;border-radius:50%;background:radial-gradient(circle,rgba(128,190,220,.2),transparent 64%);box-shadow:0 0 22px rgba(92,166,201,.25) }
.sacred-sigil::before { content:'';width:16px;height:20px;border:2px solid #b9dce9;border-radius:8px 8px 11px 11px;clip-path:polygon(50% 0,100% 18%,88% 72%,50% 100%,12% 72%,0 18%) }
.sacred-sigil::after { content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:#e6f8ff;box-shadow:0 0 10px #b9ecff }
.sacred-line { font:600 clamp(25px,2.4vw,43px)/1.3 'JetBrains Mono',monospace;letter-spacing:-.02em }
.sacred-meta { display:flex;justify-content:space-between;gap:24px;margin-top:24px;padding-top:16px;border-top:1px solid rgba(126,178,202,.24);color:#7797a8;font:650 12px/1.3 'JetBrains Mono',monospace;letter-spacing:.09em;text-transform:uppercase }
.message .speaker::before { content:'◉';display:inline-block;margin-right:8px;color:#8098a5;font-size:.82em }
.message.sacred .speaker::before { content:'◆';color:#9bc8df }
.message.sacred { border-color:rgba(111,167,200,.65)!important;background:rgba(12,28,39,.94)!important;color:#dcecf5!important }

@media (max-width: 1100px) {
    .slide { padding: 52px; }
    .scene { width: 94vw; }
    .birth-layout, .task, .report { grid-template-columns: 1fr; }
    .mind-chamber { height: 440px; }
    .message p { font-size: 23px; }
}