/* The story engine's shared look: one night stage, the chapter's words top left, the numbers bottom left,
   the chapter rail along the bottom. Each story adds its own scene and devices in its own file, scoped to .sx-<id>. */
.sx{
  --bg:#04070a; --ink:#eef3f6; --sec:#8e9ba3; --faint:#3c4851; --line:#1a242b; --gold:#e3ad4f;
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  position:relative;overflow:hidden;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;color-scheme:dark;
  background:radial-gradient(70% 60% at 60% 40%,#0a141b 0%,var(--bg) 72%);letter-spacing:normal;line-height:normal;text-align:left;
}
.sx *{box-sizing:border-box}
.sx canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sx-page{height:100%;min-height:540px;touch-action:none}

/* inside a page: the stage stays pinned while the wrap scrolls past; one screen of scroll per chapter */
.sx-wrap{position:relative;height:calc(var(--sx-len,10) * 85vh + 100vh)}
.sx-inline{position:sticky;top:0;height:100vh;height:100svh;touch-action:pan-y}
.sx-full{position:fixed!important;inset:0;z-index:1000;height:100vh!important;height:100dvh!important;touch-action:none}
html.sx-lock,html.sx-lock body{overflow:hidden}

.sx-shade{position:absolute;left:0;top:0;width:min(820px,100%);height:460px;pointer-events:none;background:radial-gradient(85% 75% at 0% 0%,rgba(4,7,10,.94) 0%,rgba(4,7,10,.72) 45%,rgba(4,7,10,0) 78%)}
.sx-act{position:absolute;top:max(22px,env(safe-area-inset-top,0px));left:max(16px,env(safe-area-inset-left,0px));max-width:min(460px,calc(100% - 32px));display:grid;gap:8px;pointer-events:none;z-index:2}
.sx-tag{font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--sec)}
.sx-ttl{margin:0;font-family:var(--display);font-stretch:118%;font-weight:760;font-size:clamp(30px,4vw,52px);line-height:1;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
.sx-txt{margin:0;font-size:clamp(14.5px,1.35vw,17px);line-height:1.5;color:#b4c0c7;max-width:31em}
.sx-ttl,.sx-txt{text-shadow:0 1px 18px rgba(0,0,0,.8)}
.sx-act.swap{animation:sxsw .6s ease both}
@keyframes sxsw{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sx-stats{position:absolute;left:max(16px,env(safe-area-inset-left,0px));bottom:150px;display:flex;gap:30px;pointer-events:none;transition:opacity .5s;z-index:2}
.sx-stats div{display:grid;gap:4px}
.sx-stats b{font-family:var(--display);font-stretch:112%;font-weight:720;font-size:clamp(26px,3vw,40px);line-height:1;font-variant-numeric:tabular-nums}
.sx-stats span{font-size:12.5px;color:#b4c0c7}
.sx-stats b,.sx-stats span{text-shadow:0 1px 16px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.6)}
.sx-stats .g b{color:var(--gold)}
.sx-rail{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:grid;gap:10px;background:linear-gradient(to top,var(--bg) 40%,rgba(4,7,10,0))}
.sx-ch{display:grid;grid-template-columns:repeat(var(--sx-n,10),minmax(0,1fr)) auto;gap:8px;align-items:stretch}
.sx-ch button{all:unset;cursor:pointer;display:grid;gap:3px;padding:10px 0 2px;border-top:2px solid var(--line);position:relative;min-width:0}
.sx-ch button::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:calc(var(--p,0)*100%);background:var(--ink)}
.sx-ch button i{display:none;font-style:normal}
.sx-ch button b{font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sec)}
.sx-ch button span{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-ch button[aria-current="step"] b{color:var(--ink)}
.sx-ch button[aria-current="step"] span{color:var(--sec)}
.sx-ch button:focus-visible,.sx .sx-play:focus-visible,.sx-fsb:focus-visible,.sx-x:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.sx .sx-play{all:unset;cursor:pointer;align-self:center;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg)}
.sx-play svg{width:14px;height:14px}
.sx-inline:not(.sx-full) .sx-ch{grid-template-columns:repeat(var(--sx-n,10),minmax(0,1fr))}
.sx-inline:not(.sx-full) .sx-play{display:none}
.sx-note{margin:0;font-size:11.5px;line-height:1.4;color:#66747e}
.sx-srcrow{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sx-src{position:relative;flex:none}
.sx-src summary{list-style:none;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--sec);padding:2px 0}.sx-src summary::-webkit-details-marker{display:none}
.sx-src summary:hover{color:var(--ink)}
.sx-srcbox{position:absolute;right:0;bottom:26px;width:min(360px,80vw);display:grid;gap:8px;padding:16px 18px;border-radius:16px;background:rgba(12,19,24,.94);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:0 24px 60px -30px #000}
.sx-srcbox b{font-size:13px}.sx-srcbox p{margin:0;font-size:12.5px;line-height:1.5;color:var(--sec)}
.sx-hint{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);margin:0;font-size:12.5px;color:var(--sec);opacity:0;transition:opacity .6s;pointer-events:none;z-index:2}
.sx-hint.on{opacity:1}
.sx-fsb,.sx-x{all:unset;cursor:pointer;position:absolute;z-index:4;top:max(22px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 12px;border-radius:999px;background:rgba(8,19,31,.6);border:1px solid rgba(255,255,255,.16);color:#e8eef2;font:600 13.5px/1 var(--sans);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sx-fsb:hover,.sx-x:hover{background:rgba(8,19,31,.85)}
.sx-fsb svg,.sx-x svg{width:15px;height:15px}
.sx-x{display:none;padding:10px;border-radius:50%}
.sx-full .sx-fsb{display:none}.sx-full .sx-x{display:inline-flex}
@media (max-width:860px){
  .sx-stats{bottom:132px;gap:22px}
  .sx-ch{gap:5px}
  .sx-ch button span,.sx-ch button b{display:none}
  .sx-ch button i{display:block;font-size:12px;font-weight:650;color:var(--sec);font-variant-numeric:tabular-nums}
  .sx-ch button[aria-current="step"] i{color:var(--ink)}
  .sx-txt{font-size:14px}
  .sx-hint{bottom:104px}
  .sx-fsb span{display:none}.sx-fsb{padding:10px;border-radius:50%}
}
@media (prefers-reduced-motion:reduce){.sx-act.swap{animation:none}}

/* when three.js can't load: the chapters as a plain article */
.sx-wrap-fail{height:auto!important}
.sx-fail{background:#04070a;color:#eef3f6;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif}
html.sx-fail-page,html.sx-fail-page body{overflow:auto!important;height:auto!important}
.sx-fallback{max-width:44em;margin:0 auto;padding:72px 20px;display:grid;gap:28px}
.sx-fallback span{font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#8e9ba3}
.sx-fallback h3{margin:6px 0 6px;font:760 26px/1.1 "Archivo","Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em}
.sx-fallback p{margin:0;font-size:16px;line-height:1.55;color:#b4c0c7}
.sx-fallback .sx-fnote{font-size:12.5px;color:#66747e}