/* ============================================================
   THE EXAMINER — pilot · "The Interrogation" design tokens & system
   Engine-agnostic styling. No episode copy lives here.
   ============================================================ */

:root{
  --void:#050505;
  --void-2:#0d0c0b;
  --ink:#ECE6DB;
  --ink-dim:#8C857A;
  --light:#FFD27A;
  --signal:#E5483D;   /* grip only */
  --learn:#6BBF8A;    /* growth only */
  --line:rgba(236,230,219,0.12);
  --disp:'Oswald', 'Arial Narrow', sans-serif;
  --serif:'Newsreader', Georgia, serif;
  --mono:'Space Mono', ui-monospace, monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
/* the light cone overflows by design; clip on html too so mobile doesn't
   widen the layout viewport (which zoomed the page out + clipped the grip readout) */
html{overflow-x:clip}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
  min-height:100dvh;
}
/* film grain — keeps it from reading as flat web */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* heavy vignette — the dark room closing in */
.vignette{position:fixed;inset:0;pointer-events:none;z-index:70;
  background:radial-gradient(ellipse 90% 70% at 50% 38%, transparent 40%, rgba(0,0,0,.55) 100%);}

/* ---------- the lamp (the seal / signature) ---------- */
/* the rig holds lamp + cone + seal and tilts as a whole with vertical scroll
   (pivot at the ceiling), while the lamp/cone keep swinging inside it */
.lamprig{position:fixed;inset:0;transform-origin:50% 0;pointer-events:none;z-index:2;will-change:transform}
/* canvas volumetric light — screen space, bound to the lamp's live position each frame */
.lightcanvas{position:fixed;inset:0;width:100%;height:100%;display:none;pointer-events:none;z-index:1;
  transition:opacity .9s var(--ease) .55s}
.canvas-light .cone{display:none}
.canvas-light .lightcanvas{display:block}
.stage.boot .lightcanvas{opacity:0}
.lampgrp{position:fixed;top:0;left:50%;transform-origin:top center;z-index:5;
  animation:swing 6s ease-in-out infinite;}
/* a dark wire — invisible against the void, runs into the top of the shade */
.cord{width:1.5px;height:9vh;min-height:46px;margin:0 auto;
  background:linear-gradient(180deg,rgba(60,55,47,0) 0%,rgba(64,58,49,.4) 60%,rgba(110,90,55,.55) 100%);
  transform-origin:top center;transition:transform .6s var(--ease);}
/* the metal reflector shade — hoods the bulb so light is thrown DOWN as a real cone */
.shade{position:relative;z-index:3;width:50px;height:21px;margin:-1px auto -13px;
  clip-path:polygon(35% 0,65% 0,100% 86%,90% 100%,10% 100%,0 86%);
  background:linear-gradient(177deg,#3b362d 0%,#272219 42%,#15110c 100%);
  box-shadow:inset 0 -3px 4px rgba(0,0,0,.55),0 2px 5px rgba(0,0,0,.5);}
.shade::before{content:"";position:absolute;inset:0;clip-path:inherit;       /* metal top-sheen */
  background:linear-gradient(180deg,rgba(255,236,200,.2),transparent 48%);}
.shade::after{content:"";position:absolute;left:6%;right:6%;bottom:-2px;height:5px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,rgba(255,216,142,.9),rgba(255,200,110,.25) 58%,transparent 76%);
  filter:blur(1px);}                                                          /* warm lit rim */
/* glowing glass bulb: pear envelope, hot filament core, glass specular, layered bloom */
.bulb{position:relative;width:21px;height:27px;margin:0 auto 0;
  border-radius:50% 50% 49% 49% / 60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 60%,
    #fff 0%,#fff7e6 9%,#ffe6b0 24%,var(--light) 46%,#c98f33 74%,#7c5520 100%);
  box-shadow:
    0 0 5px 1px rgba(255,240,210,.9),
    0 0 13px 4px rgba(255,214,135,.7),
    0 0 28px 9px rgba(255,201,110,.4),
    0 0 56px 20px rgba(255,193,100,.2),
    0 0 104px 42px rgba(255,184,92,.09);
  transition:box-shadow .6s var(--ease) .35s,background .5s var(--ease),opacity .55s var(--ease) .35s;}
.bulb::before{content:"";position:absolute;left:50%;top:56%;width:3px;height:8px;
  transform:translate(-50%,-50%);border-radius:40%;background:#fff;
  box-shadow:0 0 8px 3px rgba(255,255,255,.9),0 0 2px 1px #fff;}        /* filament */
.bulb::after{content:"";position:absolute;left:31%;top:23%;width:6px;height:9px;
  transform:rotate(-20deg);border-radius:60% 60% 50% 50%;
  background:radial-gradient(circle,rgba(255,255,255,.55),transparent 72%);}  /* glass glint */
/* the cone swings with the bulb — pivots about the ceiling point (same as the cord).
   Built from stacked soft light-disks that widen and fade as they fall: no clip-path,
   so there is no hard "start line" — the light just bleeds out of the bulb and dies
   into the dark on every side, like illuminated dust. */
.cone{position:absolute;top:0;left:50%;
  width:min(120vw,940px);height:125vh;pointer-events:none;
  transform:translateX(-50%);transform-origin:50% 0;
  /* one continuous taper: smooth monotonic falloff from the shade, widening as it
     descends, dying out before it can form a second pool (no snowman) */
  background:
    radial-gradient(ellipse 10% 7%  at 50% 9%,  rgba(255,245,214,.55) 0%, transparent 76%),
    radial-gradient(ellipse 16% 13% at 50% 17%, rgba(255,239,194,.32) 0%, transparent 78%),
    radial-gradient(ellipse 24% 21% at 50% 28%, rgba(255,235,183,.20) 0%, transparent 80%),
    radial-gradient(ellipse 34% 31% at 50% 43%, rgba(255,232,175,.12) 0%, transparent 82%),
    radial-gradient(ellipse 46% 43% at 50% 62%, rgba(255,230,168,.07) 0%, transparent 84%);
  filter:blur(10px);
  animation:swingCone 6s ease-in-out infinite;
  transition:opacity .9s var(--ease) .55s;}
/* drifting dust — faint motes scattering inside the beam (kept inside the lit cone by a mask) */
.dust{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;
  width:min(86vw,640px);height:135vh;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='340'%20height='340'%3E%3Cg%20fill='%23ffe9c8'%3E%3Ccircle%20cx='34'%20cy='50'%20r='1.3'%20opacity='.6'/%3E%3Ccircle%20cx='130'%20cy='96'%20r='.9'%20opacity='.5'/%3E%3Ccircle%20cx='225'%20cy='38'%20r='1.1'%20opacity='.45'/%3E%3Ccircle%20cx='300'%20cy='140'%20r='.8'%20opacity='.55'/%3E%3Ccircle%20cx='66'%20cy='196'%20r='1.2'%20opacity='.4'/%3E%3Ccircle%20cx='170'%20cy='235'%20r='1'%20opacity='.5'/%3E%3Ccircle%20cx='268'%20cy='270'%20r='.85'%20opacity='.45'/%3E%3Ccircle%20cx='110'%20cy='306'%20r='1.05'%20opacity='.5'/%3E%3Ccircle%20cx='318'%20cy='320'%20r='.75'%20opacity='.4'/%3E%3Ccircle%20cx='22'%20cy='268'%20r='.9'%20opacity='.5'/%3E%3Ccircle%20cx='192'%20cy='66'%20r='.75'%20opacity='.4'/%3E%3Ccircle%20cx='250'%20cy='190'%20r='1.05'%20opacity='.45'/%3E%3Ccircle%20cx='150'%20cy='150'%20r='.7'%20opacity='.35'/%3E%3Ccircle%20cx='90'%20cy='130'%20r='.8'%20opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;background-size:300px 300px;
  -webkit-mask-image:radial-gradient(ellipse 55% 70% at 50% 8%,#000 0%,rgba(0,0,0,.5) 45%,transparent 78%);
          mask-image:radial-gradient(ellipse 55% 70% at 50% 8%,#000 0%,rgba(0,0,0,.5) 45%,transparent 78%);
  animation:dustdrift 32s linear infinite;
  transition:opacity .9s var(--ease) .55s;}
@keyframes dustdrift{0%{background-position:0 0}100%{background-position:34px -300px}}

/* ---------- scenery: faint atmosphere of place, barely lifting out of the void ----------
   Each beat sets a mood class (the engine reads a `bg` key from episode data). The mood
   gradients tint the dark; the ::after silhouette hints at the location along the floor. */
.scenery{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease);}
.scenery.show{opacity:1;}
.scenery::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32vh;opacity:.85;
  background-repeat:repeat-x;background-position:bottom;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 48%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 48%);}

/* Beat 1 — harbour bar, evening: warm back wall, a cold sliver of dock-light, a shelf of bottles */
.scenery.bar{background:
  radial-gradient(150% 72% at 50% 128%, rgba(92,58,28,.82) 0%, rgba(46,30,15,.36) 44%, transparent 68%),
  radial-gradient(46% 44% at 4% 30%, rgba(62,88,116,.32) 0%, transparent 70%);}
.scenery.bar::after{height:26vh;opacity:.85;background-size:230px 100%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='120'%3E%3Cg%20fill='%23130d07'%3E%3Crect%20x='10'%20y='44'%20width='13'%20height='76'%20rx='3'/%3E%3Crect%20x='14'%20y='30'%20width='5'%20height='16'/%3E%3Crect%20x='40'%20y='58'%20width='11'%20height='62'%20rx='3'/%3E%3Crect%20x='43'%20y='46'%20width='5'%20height='14'/%3E%3Crect%20x='66'%20y='36'%20width='15'%20height='84'%20rx='4'/%3E%3Crect%20x='71'%20y='22'%20width='5'%20height='16'/%3E%3Crect%20x='98'%20y='52'%20width='12'%20height='68'%20rx='3'/%3E%3Crect%20x='101'%20y='40'%20width='5'%20height='14'/%3E%3Crect%20x='126'%20y='42'%20width='14'%20height='78'%20rx='3'/%3E%3Crect%20x='130'%20y='28'%20width='5'%20height='16'/%3E%3Crect%20x='160'%20y='60'%20width='11'%20height='60'%20rx='3'/%3E%3Crect%20x='163'%20y='48'%20width='5'%20height='14'/%3E%3Crect%20x='186'%20y='38'%20width='15'%20height='82'%20rx='4'/%3E%3Crect%20x='191'%20y='24'%20width='5'%20height='16'/%3E%3Crect%20x='214'%20y='54'%20width='12'%20height='66'%20rx='3'/%3E%3Crect%20x='217'%20y='42'%20width='5'%20height='14'/%3E%3C/g%3E%3C/svg%3E");}

/* Beat 2 — the pier at night: cold moon-haze, dark water, masts & rigging */
.scenery.pier{background:
  radial-gradient(88% 42% at 50% 5%, rgba(145,175,210,.22), transparent 60%),
  linear-gradient(180deg, transparent 40%, rgba(36,54,80,.78) 100%);}
.scenery.pier::after{height:42vh;opacity:.85;background-size:260px 100%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='150'%3E%3Cg%20stroke='%230e1a26'%20stroke-width='2'%20fill='none'%3E%3Cline%20x1='55'%20y1='150'%20x2='55'%20y2='18'/%3E%3Cline%20x1='28'%20y1='52'%20x2='82'%20y2='52'/%3E%3Cline%20x1='55'%20y1='18'%20x2='26'%20y2='150'/%3E%3Cline%20x1='55'%20y1='18'%20x2='86'%20y2='150'/%3E%3Cline%20x1='128'%20y1='150'%20x2='128'%20y2='72'/%3E%3Cline%20x1='110'%20y1='88'%20x2='146'%20y2='88'/%3E%3Cline%20x1='200'%20y1='150'%20x2='200'%20y2='34'/%3E%3Cline%20x1='173'%20y1='64'%20x2='227'%20y2='64'/%3E%3Cline%20x1='200'%20y1='34'%20x2='170'%20y2='150'/%3E%3Cline%20x1='200'%20y1='34'%20x2='232'%20y2='150'/%3E%3C/g%3E%3C/svg%3E");}

/* Beat 5a — the boat at the moorings: moonlit cold water, a hull */
.scenery.boat{background:
  radial-gradient(46% 36% at 72% 10%, rgba(175,198,228,.26), transparent 64%),
  linear-gradient(180deg, transparent 38%, rgba(30,46,70,.78) 100%);}
.scenery.boat::after{height:30vh;opacity:.85;background-size:280px 100%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='280'%20height='150'%3E%3Cg%20fill='%230b1119'%3E%3Cpath%20d='M40,88%20Q140,150%20240,88%20L222,116%20Q140,140%2058,116%20Z'/%3E%3C/g%3E%3Cg%20stroke='%230b1119'%20stroke-width='2'%3E%3Cline%20x1='140'%20y1='88'%20x2='140'%20y2='28'/%3E%3C/g%3E%3C/svg%3E");}

/* Beat 5b — the cooperage / guild hall: dim, enclosed, casks */
.scenery.guild{background:
  radial-gradient(130% 70% at 50% 124%, rgba(84,58,32,.78), transparent 62%),
  radial-gradient(66% 46% at 50% 18%, rgba(70,54,36,.34), transparent 72%);}
.scenery.guild::after{height:26vh;opacity:.85;background-size:240px 100%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='140'%3E%3Cg%20fill='%23150e08'%3E%3Crect%20x='18'%20y='62'%20width='48'%20height='78'%20rx='12'/%3E%3Crect%20x='92'%20y='50'%20width='54'%20height='90'%20rx='13'/%3E%3Crect%20x='172'%20y='66'%20width='48'%20height='74'%20rx='12'/%3E%3C/g%3E%3C/svg%3E");}

/* Beat 5c — the town moot: a warmer, crowded hall, seated figures */
.scenery.moot{background:
  radial-gradient(140% 76% at 50% 120%, rgba(98,64,34,.82), transparent 64%),
  radial-gradient(86% 56% at 50% 28%, rgba(82,58,36,.36), transparent 74%);}
.scenery.moot::after{height:24vh;opacity:.85;background-size:280px 100%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='280'%20height='130'%3E%3Cg%20fill='%23100c08'%3E%3Ccircle%20cx='34'%20cy='44'%20r='11'/%3E%3Crect%20x='16'%20y='56'%20width='36'%20height='74'%20rx='16'/%3E%3Ccircle%20cx='96'%20cy='40'%20r='11'/%3E%3Crect%20x='78'%20y='52'%20width='36'%20height='78'%20rx='16'/%3E%3Ccircle%20cx='158'%20cy='44'%20r='11'/%3E%3Crect%20x='140'%20y='56'%20width='36'%20height='74'%20rx='16'/%3E%3Ccircle%20cx='220'%20cy='39'%20r='11'/%3E%3Crect%20x='202'%20y='51'%20width='36'%20height='79'%20rx='16'/%3E%3C/g%3E%3C/svg%3E");}

/* modern variant — a flat / office at night: cool city window + skyline */
.scenery.modern{background:
  radial-gradient(88% 46% at 50% 6%, rgba(150,172,208,.2), transparent 60%),
  radial-gradient(82% 56% at 50% 120%, rgba(52,58,78,.7), transparent 64%);}
.scenery.modern::after{height:34vh;opacity:.85;background-size:300px 100%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='150'%3E%3Cg%20fill='%230d121b'%3E%3Crect%20x='0'%20y='62'%20width='44'%20height='88'/%3E%3Crect%20x='50'%20y='30'%20width='40'%20height='120'/%3E%3Crect%20x='98'%20y='76'%20width='36'%20height='74'/%3E%3Crect%20x='142'%20y='48'%20width='46'%20height='102'/%3E%3Crect%20x='196'%20y='66'%20width='38'%20height='84'/%3E%3Crect%20x='242'%20y='38'%20width='50'%20height='112'/%3E%3C/g%3E%3Cg%20fill='%231f2c40'%3E%3Crect%20x='60'%20y='44'%20width='6'%20height='9'/%3E%3Crect%20x='74'%20y='64'%20width='6'%20height='9'/%3E%3Crect%20x='152'%20y='60'%20width='6'%20height='9'/%3E%3Crect%20x='168'%20y='82'%20width='6'%20height='9'/%3E%3Crect%20x='254'%20y='52'%20width='6'%20height='9'/%3E%3Crect%20x='270'%20y='76'%20width='6'%20height='9'/%3E%3C/g%3E%3C/svg%3E");}

/* frontier — open land at dusk: cold sky, a low rise, fence posts */
.scenery.field{background:
  radial-gradient(98% 42% at 50% 8%, rgba(146,150,178,.2), transparent 60%),
  linear-gradient(180deg, transparent 46%, rgba(36,36,48,.7) 100%);}
.scenery.field::after{height:30vh;opacity:.85;background-size:300px 100%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='150'%3E%3Cg%20fill='%23161620'%3E%3Cpath%20d='M0,108%20Q150,84%20300,106%20L300,150%20L0,150%20Z'/%3E%3Crect%20x='40'%20y='90'%20width='4'%20height='26'/%3E%3Crect%20x='96'%20y='86'%20width='4'%20height='30'/%3E%3Crect%20x='160'%20y='90'%20width='4'%20height='26'/%3E%3Crect%20x='224'%20y='84'%20width='4'%20height='32'/%3E%3Crect%20x='278'%20y='90'%20width='4'%20height='26'/%3E%3Crect%20x='0'%20y='96'%20width='300'%20height='2'/%3E%3C/g%3E%3C/svg%3E");}

/* domestic — a hearth-lit room: warm glow, a mantel and jugs */
.scenery.hearth{background:
  radial-gradient(120% 68% at 50% 122%, rgba(100,58,26,.8), transparent 62%),
  radial-gradient(54% 46% at 82% 70%, rgba(120,68,30,.4), transparent 70%);}
.scenery.hearth::after{height:28vh;opacity:.85;background-size:260px 100%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='130'%3E%3Cg%20fill='%23160f08'%3E%3Crect%20x='0'%20y='46'%20width='260'%20height='7'/%3E%3Crect%20x='40'%20y='62'%20width='30'%20height='58'%20rx='12'/%3E%3Crect%20x='110'%20y='56'%20width='34'%20height='64'%20rx='13'/%3E%3Crect%20x='182'%20y='64'%20width='30'%20height='56'%20rx='12'/%3E%3C/g%3E%3C/svg%3E");}

/* fort — a battlement at night: cold sky, a crenellated wall */
.scenery.rampart{background:
  radial-gradient(92% 42% at 50% 6%, rgba(146,158,182,.2), transparent 60%),
  linear-gradient(180deg, transparent 44%, rgba(34,36,46,.74) 100%);}
.scenery.rampart::after{height:30vh;opacity:.85;background-size:300px 100%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='130'%3E%3Cg%20fill='%23141620'%3E%3Crect%20x='0'%20y='70'%20width='300'%20height='60'/%3E%3Crect%20x='0'%20y='52'%20width='34'%20height='20'/%3E%3Crect%20x='52'%20y='52'%20width='34'%20height='20'/%3E%3Crect%20x='104'%20y='52'%20width='34'%20height='20'/%3E%3Crect%20x='156'%20y='52'%20width='34'%20height='20'/%3E%3Crect%20x='208'%20y='52'%20width='34'%20height='20'/%3E%3Crect%20x='260'%20y='52'%20width='34'%20height='20'/%3E%3C/g%3E%3C/svg%3E");}

/* harbour — the working waterfront at evening: warm town glow on cold water, moored hulls & masts */
.scenery.harbour{background:
  radial-gradient(95% 42% at 50% 6%, rgba(150,170,200,.18), transparent 60%),
  radial-gradient(130% 52% at 50% 124%, rgba(80,62,38,.52), transparent 64%),
  linear-gradient(180deg, transparent 50%, rgba(30,46,66,.66) 100%);}
.scenery.harbour::after{height:34vh;opacity:.85;background-size:300px 100%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='150'%3E%3Cg%20fill='%230c1622'%3E%3Cpath%20d='M24,98%20Q72,128%20120,98%20L110,114%20Q72,124%2034,114%20Z'/%3E%3Cpath%20d='M176,102%20Q216,126%20256,102%20L248,116%20Q216,122%20184,116%20Z'/%3E%3Crect%20x='150'%20y='104'%20width='9'%20height='26'%20rx='2'/%3E%3Crect%20x='0'%20y='118'%20width='300'%20height='3'/%3E%3C/g%3E%3Cg%20stroke='%230c1622'%20stroke-width='3'%20fill='none'%3E%3Cline%20x1='72'%20y1='98'%20x2='72'%20y2='46'/%3E%3Cline%20x1='216'%20y1='102'%20x2='216'%20y2='58'/%3E%3Cline%20x1='52'%20y1='62'%20x2='92'%20y2='62'/%3E%3C/g%3E%3C/svg%3E");}

/* Beat 6 — the chandlery in the capital: cooler city light, stocked shelves */
.scenery.chandlery{background:
  radial-gradient(120% 68% at 50% 120%, rgba(58,64,82,.68), transparent 62%),
  radial-gradient(66% 46% at 50% 20%, rgba(62,68,86,.3), transparent 72%);}
.scenery.chandlery::after{height:30vh;opacity:.85;background-size:240px 100%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='150'%3E%3Cg%20fill='%23120d09'%3E%3Crect%20x='0'%20y='52'%20width='240'%20height='4'/%3E%3Crect%20x='0'%20y='100'%20width='240'%20height='4'/%3E%3Crect%20x='16'%20y='28'%20width='14'%20height='24'/%3E%3Crect%20x='44'%20y='34'%20width='10'%20height='18'/%3E%3Crect%20x='70'%20y='24'%20width='16'%20height='28'/%3E%3Crect%20x='110'%20y='32'%20width='12'%20height='20'/%3E%3Crect%20x='150'%20y='26'%20width='14'%20height='26'/%3E%3Crect%20x='186'%20y='34'%20width='10'%20height='18'/%3E%3Crect%20x='212'%20y='30'%20width='14'%20height='22'/%3E%3Crect%20x='30'%20y='78'%20width='12'%20height='22'/%3E%3Crect%20x='66'%20y='82'%20width='14'%20height='18'/%3E%3Crect%20x='104'%20y='76'%20width='12'%20height='24'/%3E%3Crect%20x='150'%20y='80'%20width='14'%20height='20'/%3E%3Crect%20x='190'%20y='78'%20width='12'%20height='22'/%3E%3C/g%3E%3C/svg%3E");}
.seal{position:absolute;top:calc(9vh + 26px);left:50%;transform:translateX(-50%) rotate(-6deg);
  font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);border:1px solid var(--signal);padding:.22rem .5rem;border-radius:2px;
  white-space:nowrap;opacity:0;transition:opacity .6s var(--ease);background:rgba(5,5,5,.6);}
.seal.show{opacity:.92;}

@keyframes swing{0%,100%{transform:rotate(-3.2deg)}50%{transform:rotate(3.2deg)}}
/* cone keeps its centering translate while it swings in sync with the lamp */
@keyframes swingCone{0%,100%{transform:translateX(-50%) rotate(-3.2deg)}50%{transform:translateX(-50%) rotate(3.2deg)}}

/* ---------- first-load room assembly + title-card state ---------- */
/* .boot: room starts dark; removing it lights the cord → bulb → cone in turn */
.stage.boot .cord{transform:scaleY(.18)}
.stage.boot .bulb{opacity:.12;box-shadow:0 0 8px 2px rgba(255,210,122,.14)}
.stage.boot .cone,.stage.boot .dust{opacity:0}
/* .preplay: the instruments stay hidden until the player steps into the light */
.gripdock,.dossier{transition:opacity .7s var(--ease)}
.stage.preplay .gripdock,.stage.preplay .dossier{opacity:0;pointer-events:none}

/* ---------- the title card (Beat 0) ---------- */
.tc-title{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(2.3rem,8vw,4rem);line-height:.94;letter-spacing:.02em;color:#fff;
  text-shadow:0 0 55px rgba(255,210,122,.18);}
.tc-case{font-family:var(--serif);font-style:italic;color:var(--light);
  font-size:1.05rem;letter-spacing:.01em;margin-top:.55rem;}
.tc-body{font-family:var(--serif);font-weight:300;color:#cfc7b8;font-size:1.04rem;
  line-height:1.62;max-width:38ch;margin:1.7rem auto 0;}
.tc-hint{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);margin-top:1.5rem;}
.tc-link{margin-top:1.7rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:inline-block;min-width:13rem}
.tc-link button{background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:.7;
  transition:color .25s var(--ease),opacity .25s var(--ease)}
.tc-link button:hover{color:var(--light);opacity:1}
.tc-foot{margin-top:1.6rem;font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim)}
.tc-foot a{color:var(--ink-dim);text-decoration:none;transition:color .25s var(--ease)}
.tc-foot a:hover{color:var(--light)}

/* ---------- the season: case files index ---------- */
.season{max-width:44rem;margin:1.8rem auto .5rem;text-align:left}
.case-row{display:flex;align-items:center;gap:1rem;width:100%;padding:1rem .2rem;
  border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:inherit;font:inherit}
.case-row .cn{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--ink-dim);flex:0 0 2.4rem}
.case-row .cmain{flex:1;display:flex;flex-direction:column;gap:.28rem;min-width:0}
.case-row .ct{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:1.05rem;letter-spacing:.01em;color:var(--ink)}
.case-row .cb{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.case-row .cstatus{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  flex:0 0 auto;display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.case-row .dot{width:5px;height:5px;border-radius:50%;background:var(--signal);display:inline-block}
.case-row .dot.live{background:var(--learn);box-shadow:0 0 6px 1px rgba(107,191,138,.7)}
.case-row.live{position:relative;cursor:pointer;transition:background .25s var(--ease)}
.case-row.live::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;
  background:var(--learn);opacity:0;transition:opacity .25s var(--ease)}
.case-row.live .cstatus{color:var(--learn)}
.case-row.live .play{display:inline-block;color:var(--ink-dim);transition:transform .25s var(--ease),color .25s var(--ease)}
.case-row.live:hover{background:rgba(255,210,122,.05)}
.case-row.live:hover::before{opacity:1}
.case-row.live:hover .ct{color:#fff}
.case-row.live:hover .play{color:var(--light);transform:translateX(3px)}
.case-row.draft{opacity:.5}
.case-row.draft .cstatus{color:var(--signal)}
.redact{display:inline-block;height:.74em;background:var(--ink);opacity:.5;border-radius:1px;vertical-align:baseline;margin:0 .08em}
@media (max-width:780px){ .case-row .play{display:none} }

/* broken prediction → bulb shatters, room cuts to black, relights */
.stage.broke .lampgrp{animation:none;transform:rotate(0)}
.stage.broke .bulb{animation:bulbpop .5s var(--ease) forwards}
.stage.broke .cone{animation:conecut .55s var(--ease) forwards}
.stage.broke .seal{animation:sealbreak .5s var(--ease) forwards}
@keyframes bulbpop{0%{box-shadow:0 0 50px 18px rgba(255,210,122,.95),0 0 120px 50px rgba(255,210,122,.3)}
  45%{box-shadow:0 0 70px 26px rgba(255,255,255,1)}
  46%{box-shadow:none;background:#1a1611}
  100%{box-shadow:0 0 26px 8px rgba(107,191,138,.35);background:radial-gradient(circle at 40% 35%,#cdeede,var(--learn) 60%,#2f5a44)}}
@keyframes conecut{0%{opacity:1}46%{opacity:0}100%{opacity:.5;background:linear-gradient(180deg,rgba(107,191,138,.12),transparent 70%)}}
@keyframes sealbreak{0%{opacity:.92;transform:translateX(-50%) rotate(-6deg)}45%{opacity:1}46%{opacity:0}100%{opacity:0}}

/* held prediction → lamp steadies, seal glows (cone slows with it) */
.stage.held .lampgrp{animation:swing 9s ease-in-out infinite}
.stage.held .cone{animation:swingCone 9s ease-in-out infinite}
.stage.held .seal{box-shadow:0 0 14px rgba(229,72,61,.5);opacity:1}

/* black flash overlay used on the shatter */
.blackout{position:fixed;inset:0;background:#000;z-index:75;opacity:0;pointer-events:none}
.blackout.flash{animation:flash .9s var(--ease)}
@keyframes flash{0%{opacity:0}30%{opacity:1}55%{opacity:1}100%{opacity:0}}

/* ---------- layout ---------- */
.stage{position:relative;min-height:100dvh;display:flex;flex-direction:column;}
.main{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(8rem,16vh,12rem) clamp(1.4rem,6vw,4rem) clamp(7rem,12vh,9rem);
  max-width:760px;margin:0 auto;width:100%;position:relative;z-index:3;text-align:center;}

.kick{font-family:var(--mono);font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-dim);display:flex;gap:.9rem;align-items:center;justify-content:center;margin-bottom:2.2rem;}
.kick .rule{width:42px;height:1px;background:var(--line)}

/* ---------- narrative blocks ---------- */
.scene{font-family:var(--serif);font-style:italic;color:#b7af9f;font-size:1.02rem;font-weight:300;
  margin:0 auto 1.2rem;max-width:48ch;}
.speaker{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--light);opacity:.85;margin-bottom:.7rem}
.says{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.01em;line-height:1.2;
  font-size:clamp(1.2rem,2.6vw,1.7rem);max-width:26ch;margin:0 auto;color:#fff;text-shadow:0 0 40px rgba(255,210,122,.12);}
.says em{font-style:normal;color:var(--light)}
.sub{font-family:var(--serif);margin:1.3rem auto 0;max-width:46ch;color:var(--ink-dim);font-size:.98rem;font-weight:300;}

/* the Old Coat — a red shadow on the wall */
.shadow{margin:1.4rem auto 0;max-width:40ch;color:rgba(229,72,61,.9);
  font-family:var(--disp);font-weight:300;text-transform:uppercase;letter-spacing:.12em;font-size:.92rem;line-height:1.5;
  position:relative;text-shadow:2px 2px 0 rgba(229,72,61,.18);}
.shadow .who{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.2em;color:rgba(229,72,61,.7);margin-bottom:.4rem}

/* ---------- choices ---------- */
.choices{display:flex;flex-wrap:wrap;gap:.7rem;margin:2.2rem auto 0;justify-content:center;max-width:40rem}
.choice{appearance:none;background:rgba(13,12,11,.5);color:var(--ink);border:1px solid var(--line);border-radius:2px;
  font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:1rem;
  padding:.85rem 1.4rem;cursor:pointer;text-align:left;
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease),color .35s var(--ease);}
.choice:hover{border-color:var(--light);background:rgba(255,210,122,.06);transform:translateY(-2px);color:#fff}
.choice .tag{font-family:var(--mono);font-size:.52rem;letter-spacing:.16em;display:block;color:var(--ink-dim);margin-bottom:.3rem;text-transform:uppercase}
.choice.skill{border-color:rgba(107,191,138,.4)}
.choice.skill .tag{color:var(--learn)}
.choice.skill:hover{border-color:var(--learn);background:rgba(107,191,138,.06)}

/* ---------- verdict / feedback ---------- */
.vtag{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;display:inline-block;
  padding:.4rem .8rem;border-radius:2px;margin-bottom:1.4rem;color:var(--signal);border:1px solid var(--signal);transform:rotate(-1.2deg)}
.vtag.grew{color:var(--learn);border-color:var(--learn);transform:rotate(1deg)}
.vtitle{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:clamp(1.3rem,3.2vw,1.9rem);line-height:1.12;letter-spacing:.01em;max-width:22ch;margin:0 auto;color:#fff}
.vbody{font-family:var(--serif);margin:1.5rem auto 0;max-width:52ch;font-weight:300;font-size:1.06rem;color:#d2cabb;text-align:left}
.vbody em{font-style:italic;color:var(--ink)}
.vbody .philo{display:block;margin-top:1.1rem;color:var(--ink-dim);font-size:.96rem;border-left:1px solid var(--line);padding-left:1.1rem}
.fb{font-family:var(--serif);margin:1.4rem auto 0;max-width:50ch;font-weight:300;font-size:1.04rem;color:#d2cabb;text-align:left}
.fb.caught{color:#EBA8A2}
.fb.grew{color:#A9D9BC}

/* ---------- tool / reveal / cards ---------- */
.tool{margin:1.6rem auto 0;border:1px solid var(--line);border-radius:3px;padding:1.6rem 1.7rem;max-width:54ch;
  background:linear-gradient(180deg,rgba(255,210,122,.05),transparent);text-align:left}
.tool .label{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--learn);margin-bottom:.7rem}
.tool h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:1.4rem;letter-spacing:.01em;margin-bottom:.7rem;color:#fff}
.tool p{font-family:var(--serif);font-weight:300;color:#d2cabb;font-size:1.04rem}
.tool p em{font-style:italic;color:var(--ink)}
.tool .cite{font-family:var(--mono);font-size:.58rem;color:var(--ink-dim);margin-top:.9rem;letter-spacing:.04em;text-transform:uppercase}

.reveal{margin:1.5rem auto 0;padding:1.3rem 1.4rem;border:1px solid rgba(107,191,138,.3);border-radius:3px;
  background:linear-gradient(180deg,rgba(107,191,138,.05),transparent);max-width:50ch;text-align:left}
.reveal .label{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--learn);margin-bottom:.6rem}
.reveal .mirror{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:1.08rem}
.reveal p{font-family:var(--serif);font-weight:300;color:#d2cabb;font-size:1.02rem}

/* ---------- anchoring estimate (Case 02 mechanic) ---------- */
.estwrap{margin:1.8rem auto 0;max-width:34rem}
.anchorcard{display:inline-flex;flex-direction:column;gap:.25rem;border:1px solid var(--signal);
  border-radius:2px;padding:.5rem 1rem;margin-bottom:1.6rem;background:rgba(229,72,61,.05)}
.anchorcard .al{font-family:var(--mono);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.anchorcard .av{font-family:var(--disp);font-weight:600;font-size:1.7rem;letter-spacing:.01em;color:var(--signal)}
.estrange{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;
  background:rgba(236,230,219,.18);outline:none;cursor:pointer}
.estrange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff,var(--light) 60%,#7a5a20);cursor:pointer;
  box-shadow:0 0 14px 3px rgba(255,210,122,.55)}
.estrange::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff,var(--light) 60%,#7a5a20);cursor:pointer;
  box-shadow:0 0 14px 3px rgba(255,210,122,.55)}
.estout{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin-top:1rem}
.estout span{color:var(--light);font-weight:700;font-size:.95rem}

/* ---------- the record: sourced evidence at the debrief ---------- */
/* evidence reads as a left-ruled record, distinct from the boxed "standing" card */
.record{margin:1.8rem auto 0;max-width:56ch;text-align:left;border-left:2px solid var(--light);
  padding:.3rem 0 .3rem 1.4rem;background:none}
.record>.label{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:1.1rem}
.record .fact{display:flex;gap:1rem;align-items:baseline;margin-bottom:.85rem}
.record .fact .n{flex:0 0 5.4rem;font-family:var(--disp);font-weight:600;font-size:1.04rem;letter-spacing:.01em;
  color:var(--light);font-variant-numeric:tabular-nums;text-align:right}
.record .fact .t{font-family:var(--serif);font-weight:300;font-size:.95rem;line-height:1.5;color:#cfc7b8}
.record .fact .t em{font-style:italic;color:var(--ink)}
.record .bites{margin-top:1.05rem;border-top:1px solid var(--line);padding-top:.9rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;color:var(--ink-dim);line-height:1.8}
.record .bites span{color:var(--signal);letter-spacing:.18em;text-transform:uppercase;margin-right:.5rem}
@media (max-width:780px){ .record .fact{flex-direction:column;gap:.15rem} .record .fact .n{text-align:left} }

/* what a choice reveals about the player — shown in the practice reps */
.revealnote{margin:1.5rem auto 0;max-width:50ch;text-align:left;border-left:2px solid var(--ink-dim);padding:.2rem 0 .2rem 1.3rem}
.revealnote .label{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.55rem}
.revealnote h4{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:1.05rem;letter-spacing:.01em;color:var(--light);margin-bottom:.5rem}
.revealnote p{font-family:var(--serif);font-weight:300;font-size:.98rem;line-height:1.6;color:#cfc7b8}
.revealnote p em{font-style:italic;color:var(--ink)}
.revealnote .cite{font-family:var(--mono);font-size:.56rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim);margin-top:.7rem}

.next{margin-top:2.2rem}

/* ---------- the grip meter (lives in the room, top-left) ---------- */
.gripdock{position:fixed;top:1.1rem;left:1.1rem;z-index:6;width:200px;font-family:var(--mono);
  background:linear-gradient(180deg,rgba(13,12,11,.85),rgba(13,12,11,.4));border:1px solid var(--line);border-radius:3px;
  padding:.8rem .9rem;backdrop-filter:blur(3px)}
.gripdock .name{font-size:.66rem;letter-spacing:.1em;color:var(--ink);text-transform:uppercase;margin-bottom:.15rem}
.gripdock .desc{font-size:.54rem;color:var(--ink-dim);opacity:.8;margin-bottom:.55rem;line-height:1.4;text-transform:uppercase;letter-spacing:.04em}
.bar{height:7px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:rgba(0,0,0,.4)}
.bar .fill{height:100%;width:78%;background:var(--signal);transition:width .9s var(--ease),background .6s var(--ease)}
.bar .fill.low{background:var(--learn)}
.gripval{display:flex;justify-content:space-between;margin-top:.4rem;font-size:.6rem}
.gripval .n{color:var(--signal)} .gripval .n.low{color:var(--learn)}

/* ---------- case-file dossier (top-right, collapsible on mobile) ---------- */
.dossier{position:fixed;top:1.1rem;right:1.1rem;z-index:6;width:208px;font-family:var(--mono);font-size:.62rem;
  background:linear-gradient(180deg,rgba(13,12,11,.85),rgba(13,12,11,.3));border:1px solid var(--line);border-radius:3px;
  padding:.8rem .9rem;backdrop-filter:blur(3px);color:var(--ink-dim);max-height:46vh;overflow:auto}
.dossier h2{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);font-weight:400;margin-bottom:.7rem}
.dossier .row{margin-bottom:.5rem;opacity:0;transform:translateX(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);line-height:1.4}
.dossier .row.in{opacity:1;transform:none}
.dossier .row .ok{color:var(--learn)} .dossier .row .no{color:var(--signal)}

/* ---------- share card + capture ---------- */
.sharecard-wrap{margin:1.4rem auto 0;max-width:420px}
.sharecard-wrap canvas{width:100%;height:auto;border:1px solid var(--line);border-radius:4px;display:block}
.btnrow{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:1.2rem}
.capture{margin:2rem auto 0;max-width:46ch;text-align:left;border-top:1px solid var(--line);padding-top:1.8rem}
.capture h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:1.2rem;color:#fff;margin-bottom:.5rem}
.capture p{font-family:var(--serif);font-weight:300;color:#d2cabb;font-size:1rem;margin-bottom:1rem}
.capture form{display:flex;gap:.6rem;flex-wrap:wrap}
.capture input[type=email]{flex:1;min-width:200px;background:rgba(13,12,11,.6);border:1px solid var(--line);border-radius:2px;
  color:var(--ink);font-family:var(--mono);font-size:.82rem;padding:.75rem .9rem;letter-spacing:.02em}
.capture input[type=email]:focus{outline:none;border-color:var(--light)}
.capture .ok-msg{color:var(--learn);font-family:var(--mono);font-size:.78rem;margin-top:.6rem}
.capture .err-msg{color:var(--signal);font-family:var(--mono);font-size:.74rem;margin-top:.6rem}
.capture .privacy{font-family:var(--mono);font-size:.56rem;color:var(--ink-dim);margin-top:.8rem;letter-spacing:.03em;line-height:1.6}

/* ---------- entrance animation ---------- */
.fade{opacity:0;transform:translateY(13px)}
.fade.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ---------- responsive ---------- */
@media (max-width:780px){
  .gripdock{width:auto;left:.7rem;right:.7rem;top:.7rem}
  /* dossier reads as reference texture BELOW the scene on mobile, not above the reveal */
  .dossier{position:static;width:auto;margin:2.5rem auto 0;max-width:520px;max-height:none;order:2}
  .main{padding-top:clamp(7rem,14vh,9rem);order:1}
}

@media (prefers-reduced-motion: reduce){
  .lampgrp{animation:none !important;transform:rotate(0) !important}
  .cone{animation:none !important;transform:translateX(-50%) !important}
  .dust{animation:none !important}
  /* room assembles without transforms — opacity only, no cord scale */
  .cord,.cone,.bulb{transition:opacity .3s !important}
  .stage.boot .cord{transform:none}
  .stage.boot .bulb{opacity:1}
  .fade{transition:opacity .3s !important;transform:none !important}
  .fade{transform:none}
  .choice:hover{transform:none}
  .bar .fill,.dossier .row{transition:opacity .3s !important;transform:none !important}
  .stage.broke .lampgrp,.stage.broke .bulb,.stage.broke .cone,.stage.broke .seal{animation:none !important}
  .stage.broke .bulb{box-shadow:0 0 26px 8px rgba(107,191,138,.4);background:radial-gradient(circle at 40% 35%,#cdeede,var(--learn) 60%,#2f5a44)}
  .stage.broke .cone{background:linear-gradient(180deg,rgba(107,191,138,.12),transparent 70%)}
  .stage.broke .seal{opacity:0}
  .blackout.flash{animation:rmflash .6s linear}
  @keyframes rmflash{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
}