/* ── tokens.css ─────────────────────────────── */


:root{
  

  
  --black-void: #000000;  
  --black-base: #050709;  

  
  --ash-900: #101419;  
  --ash-700: #31363D;  
  --ash-500: #646972;  
  --ash-300: #9A9FA5;  
  --ash-100: #D5D8DB;  

  
  --blood-deep: #540004;  
  --blood-main: #9E020F;  
  --blood-accent: #EF021B;  

  
  --gold-deep: #6B5110;  
  --gold-main: #C19E2C;  
  --gold-lit: #E1C078;  

  
  --cyan-fill: #012837;  
  --cyan-main: #397189;  
  --cyan-text: #84ABBE;  

  
  --moss-deep: #1E3419;  
  --moss-main: #486836;  
  --moss-lit: #8BA264;   


  

  
  --c-surface-void: var(--black-void);  
  --c-surface-base: var(--black-base);  
  --c-surface-raised: var(--ash-900);  

  
  --c-border: var(--ash-700);  
  --c-border-interactive: var(--ash-500);  
  --c-focus-ring: var(--gold-lit);  

  
  --c-text-primary: var(--ash-100);  
  --c-text-secondary: var(--ash-100);  
  --c-text-disabled: var(--ash-700);  

  
  --c-blood: var(--blood-main);  
  --c-blood-accent: var(--blood-accent);  
  --c-blood-deep: var(--blood-deep);  

  
  --c-gold: var(--gold-main);  
  --c-gold-lit: var(--gold-lit);  
  --c-gold-deep: var(--gold-deep);  

  
  --c-cyan: var(--cyan-main);  
  --c-cyan-fill: var(--cyan-fill);  
  --c-cyan-text: var(--cyan-text);  

  
  --game-scrim-panel: linear-gradient(90deg,
      color-mix(in srgb, var(--black-base) 88%, transparent),
      color-mix(in srgb, var(--black-base) 52%, transparent));
  --game-scrim-bottom: linear-gradient(180deg,
      transparent, color-mix(in srgb, var(--black-void) 82%, transparent));
  --game-rim-warm: radial-gradient(85% 120% at 78% 118%,
      color-mix(in srgb, var(--blood-main) 32%, transparent), transparent 58%);
  --game-rim-cold: radial-gradient(70% 100% at 8% -12%,
      color-mix(in srgb, var(--cyan-main) 26%, transparent), transparent 60%);
}



/* ── type.css ─────────────────────────────── */



@font-face{
  font-family:"Bastion Numerals";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/bastion-numerals/BastionNumerals-Numerals.ae0e87d1.woff2") format("woff2");
  unicode-range:U+0020,U+002B-002F,U+0030-0039,U+003A,U+0025,U+00D7,U+2013-2014,U+2212;
}

:root{
  
  --font-display:"Playfair Display SC",Georgia,serif;
  --font-text:"Didact Gothic","Segoe UI",system-ui,sans-serif;
  --font-num:"Bastion Numerals","Didact Gothic",sans-serif;

  
  --cap-display:0.708;
  --cap-text:0.682;
  --x-text:0.468;

  
  --fs-display:64px;  --lh-display:68px;  --ls-display:.01em;
  --fs-h1:48px;       --lh-h1:52px;       --ls-h1:.02em;
  --fs-h2:32px;       --lh-h2:36px;       --ls-h2:.03em;
  --fs-label:24px;    --lh-label:28px;    --ls-label:.02em;
  --fs-body:16px;     --lh-body:20px;
  --fs-meta:16px;     --lh-meta:20px;     --ls-meta:.12em;
  --fs-micro:16px;    --lh-micro:20px;    --ls-micro:.1em;
  --fs-num-l:32px;    --lh-num-l:36px;    --ls-num-l:.02em;
  --fs-num:16px;      --lh-num:20px;      --ls-num:.03em;

  
  --lh-control-sm:16px;
  --lh-control-lg:32px;

  
  --fs-base:16px;

  
  --w-display:900;
  --w-heading:750;
  --w-heading-section:600;
  --w-text:400;   
}


html{ font-synthesis:none; -webkit-text-size-adjust:100%; }


.t-display,.t-h1,.t-h2{font-family:var(--font-display);color:var(--c-gold)}
.t-display{font-weight:var(--w-display);font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.t-h1{font-weight:var(--w-heading);font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
.t-h2{font-weight:var(--w-heading-section);font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.t-label,.t-body,.t-meta,.t-micro{font-family:var(--font-text);font-weight:var(--w-text);color:var(--c-text-primary)}
.t-label{font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label)}
.t-body{font-size:var(--fs-body);line-height:var(--lh-body)}
.t-meta{font-size:var(--fs-meta);line-height:var(--lh-meta);
  letter-spacing:var(--ls-meta);text-transform:uppercase}
.t-micro{font-size:var(--fs-micro);line-height:var(--lh-micro);
  letter-spacing:var(--ls-micro);text-transform:uppercase}
.t-num-l{font-family:var(--font-num);font-size:var(--fs-num-l);color:var(--c-cyan-text);
  line-height:var(--lh-num-l);letter-spacing:var(--ls-num-l)}
.t-num{font-family:var(--font-num);font-size:var(--fs-num);color:var(--c-cyan-text);
  line-height:var(--lh-num);letter-spacing:var(--ls-num)}

/* ── controls.css ─────────────────────────────── */
:root{
  
  --s-2:2px;    
  --s-4:4px;
  --s-8:8px;
  --s-12:12px;
  --s-16:16px;
  --s-24:24px;
  --s-32:32px;
  --s-40:40px;
  --s-48:48px;
  --s-64:64px;
  --s-96:96px;

  
  --radius:0;

  
  --line-hair:1px;    
  --line-rule:2px;    
  --line-heavy:4px;   

  
  --side-w:264px;     
  --bp-narrow:960px;  
  --measure:62ch;
}




:root{
  --heading-shadow:2px 2px 2px rgb(0 0 0 / 50%);
  
  --btn-family:var(--font-display);
  --btn-weight:400;
  --btn-transform:none;

  
  --btn-sm-size:16px;  --btn-sm-line:16px;
  --btn-sm-pad-y:8px;  --btn-sm-pad-x:8px;  --btn-sm-track:.08em;

  
  --btn-lg-size:32px;  --btn-lg-line:32px;
  --btn-lg-pad-y:16px; --btn-lg-pad-x:16px; --btn-lg-track:.04em;

  
  --btn-red-fill:transparent;
  --btn-red-ring:var(--c-blood);
  --btn-red-ring-active:var(--c-blood);
  --btn-red-text:var(--c-text-primary);
  --btn-red-hover:color-mix(in srgb,var(--c-blood-deep) 50%,transparent);
  --btn-red-press:var(--c-blood-deep);

  
  --btn-gold-fill:transparent;
  --btn-gold-ring:var(--c-gold-lit);
  --btn-gold-ring-active:var(--c-gold-lit);
  --btn-gold-text:var(--c-gold);
  --btn-gold-hover:color-mix(in srgb,var(--c-gold-deep) 50%,transparent);
  --btn-gold-press:var(--c-gold-deep);

  
  --btn-ring-w:1px;
  --btn-radius:0;

  
  --btn-shadow-color:var(--c-surface-void);
  --btn-shadow-hover:6px 6px 6px;   --btn-shadow-hover-op:25%;
  --btn-shadow-press:2px 2px 2px;   --btn-shadow-press-op:50%;

  
  --btn-ms:160ms;
  --btn-ease:cubic-bezier(.55,.02,.28,1);
  --btn-grow-x:8;   --btn-grow-y:8;
  --btn-press-x:-2; --btn-press-y:-2;
  --btn-bright-hover:1.08;
  --btn-bright-press:0.9;

  
  --sx-hover:1; --sy-hover:1; --sx-press:1; --sy-press:1;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-8);
  position:relative;isolation:isolate;border:0;background:none;cursor:pointer;text-decoration:none;
  border-radius:var(--btn-radius);
  font-family:var(--btn-family);
  font-weight:var(--btn-weight);
  text-transform:var(--btn-transform);
  white-space:nowrap;
  color:var(--btn-text);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--btn-fill);box-shadow:inset 0 0 0 var(--btn-ring-w) var(--btn-ring);
  transform:scale(1);filter:brightness(1);will-change:transform;
  transition:transform var(--btn-ms) var(--btn-ease),box-shadow var(--btn-ms) var(--btn-ease),
    filter var(--btn-ms) var(--btn-ease),background-color var(--btn-ms) var(--btn-ease);
}
.btn__label{
  position:relative;top:var(--btn-label-y);
  font-size:var(--btn-label-size);line-height:var(--btn-label-line);
  transform:scale(1);transform-origin:center;will-change:transform;
  transition:transform var(--btn-ms) var(--btn-ease);
}
.btn:focus-visible{
  outline:var(--line-rule) solid var(--c-focus-ring);
  outline-offset:var(--s-2);
}
.btn:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;pointer-events:none}


.btn--sm{
  font-size:var(--btn-sm-size);line-height:var(--btn-sm-line);
  padding:var(--btn-sm-pad-y) var(--btn-sm-pad-x);
  letter-spacing:var(--btn-sm-track);
  --btn-label-size:16px;--btn-label-line:16px;--btn-label-y:-1px;
}
.btn--lg{
  font-size:var(--btn-lg-size);line-height:var(--btn-lg-line);
  padding:var(--btn-lg-pad-y) var(--btn-lg-pad-x);
  letter-spacing:var(--btn-lg-track);
  --btn-label-size:32px;--btn-label-line:32px;--btn-label-y:-3px;
}


.t-display,.t-h1,.t-h2,.mark,.page-title,.block-head h2,.law h3,.todo h2,.gold-text{
  color:var(--c-gold);
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--c-gold) 75%,white),var(--c-gold));
  background-repeat:no-repeat;
  background-size:100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(var(--heading-shadow));
}
.type-heading-sample{
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--c-gold) 75%,white),var(--c-gold));
  background-repeat:no-repeat;
  background-size:100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(var(--heading-shadow));
}


.btn--red{
  --btn-fill:var(--btn-red-fill);--btn-ring:var(--btn-red-ring);--btn-text:var(--btn-red-text);
}
.btn--gold{
  --btn-fill:var(--btn-gold-fill);--btn-ring:var(--btn-gold-ring);--btn-text:var(--btn-gold-text);
}


.btn:hover:not(:disabled):not([aria-disabled="true"]){
  z-index:1;
}
.btn:hover:not(:disabled):not([aria-disabled="true"]) .btn__label{
  
  transform:scale(var(--sx-hover));
}
.btn:hover:not(:disabled):not([aria-disabled="true"])::before{
  transform:scale(var(--sx-hover),var(--sy-hover));filter:brightness(var(--btn-bright-hover));
  box-shadow:inset 0 0 0 var(--btn-ring-w) var(--btn-ring),
    var(--btn-shadow-hover) color-mix(in srgb,var(--btn-shadow-color) var(--btn-shadow-hover-op),transparent);
}
.btn--red:hover:not(:disabled):not([aria-disabled="true"]){--btn-fill:var(--btn-red-hover);--btn-ring:var(--btn-red-ring-active)}
.btn--gold:hover:not(:disabled):not([aria-disabled="true"]){--btn-fill:var(--btn-gold-hover);--btn-ring:var(--btn-gold-ring-active)}


.btn:active:not(:disabled):not([aria-disabled="true"]){
  z-index:1;
}
.btn:active:not(:disabled):not([aria-disabled="true"]) .btn__label{
  transform:scale(var(--sx-press));
}
.btn--red:active:not(:disabled):not([aria-disabled="true"]){--btn-fill:var(--btn-red-press);--btn-ring:var(--btn-red-ring-active)}
.btn--gold:active:not(:disabled):not([aria-disabled="true"]){--btn-fill:var(--btn-gold-press);--btn-ring:var(--btn-gold-ring-active)}
.btn:active:not(:disabled):not([aria-disabled="true"])::before{
  transform:scale(var(--sx-press),var(--sy-press));filter:brightness(var(--btn-bright-press));
  box-shadow:inset 0 0 0 var(--btn-ring-w) var(--btn-ring),
    var(--btn-shadow-press) color-mix(in srgb,var(--btn-shadow-color) var(--btn-shadow-press-op),transparent);
}


.btn:disabled,.btn[aria-disabled="true"]{
  
  opacity:.5;
}


.btn--icon{padding:0;aspect-ratio:1;gap:0}
.btn--icon.btn--sm{width:32px;min-width:32px}
.btn--icon.btn--lg{width:64px;min-width:64px}
.btn--icon.btn--sm svg{width:var(--s-16);height:var(--s-16);display:block}
.btn--icon.btn--lg svg{width:var(--fs-h2);height:var(--fs-h2);display:block}

@media (prefers-reduced-motion:reduce){
  .btn::before{transition:box-shadow var(--btn-ms) var(--btn-ease)}
  .btn:hover::before,.btn:active::before{transform:none}
  .btn__label{transition:none}
}


/* ── site.css ─────────────────────────────── */





@font-face {
  font-family: "Playfair Display SC";
  src: url("/assets/fonts/playfair-display-sc/PlayfairDisplaySC-Regular.e3f05eec.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display SC";
  src: url("/assets/fonts/playfair-display-sc/PlayfairDisplaySC-Bold.65c82483.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display SC";
  src: url("/assets/fonts/playfair-display-sc/PlayfairDisplaySC-Black.bbe9939d.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Didact Gothic";
  src: url("/assets/fonts/didact-gothic/DidactGothic-Regular.fd29baa4.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}


.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;


  background:
    radial-gradient(70% 38% at 18% 4%,
      color-mix(in srgb, var(--c-cyan) 26%, transparent), transparent 70%),
    radial-gradient(80% 34% at 26% 92%,
      color-mix(in srgb, var(--c-blood) 30%, transparent), transparent 72%),
    linear-gradient(180deg,
      var(--c-cyan-fill) 0%,
      var(--c-surface-raised) 30%,
      var(--c-surface-base) 70%,
      var(--c-surface-void) 100%);
}





.sky__pan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
}


.sky__shake {
  position: relative;
  width: 105%;
  left: -2.5%;
  will-change: transform;

  animation: sky-shake linear infinite;
}


.sky__shake--flash {
  position: absolute;
  top: 0;
  height: 100%;
}


.sky__kick { position: relative; }
.sky__shake--flash .sky__kick { height: 100%; }




.sky__img {
  display: block;
  width: 100%;
  height: auto;
}


.sky__flash {
  position: absolute;
  inset: 0;


  background: var(--c-text-primary);
  -webkit-mask-image: url("/assets/images/site-background-mask.7325eff6.webp");
  mask-image: url("/assets/images/site-background-mask.7325eff6.webp");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  opacity: 0;
}


.sky__flash.is-striking {
  will-change: opacity;
  animation: lightning 1500ms linear 1;
}



@keyframes lightning {
  0%   { opacity: 0;    }
  2%   { opacity: 0.95; }
  6%   { opacity: 0.12; }
  10%  { opacity: 0.82; }
  15%  { opacity: 0.06; }
  22%  { opacity: 0.58; }
  30%  { opacity: 0.10; }
  40%  { opacity: 0.34; }
  55%  { opacity: 0.12; }
  72%  { opacity: 0.16; }
  100% { opacity: 0;    }
}

.layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}



.rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}


.drop--fg {
  filter: blur(5px);
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--c-text-secondary) 70%, transparent));
}

.drop {
  position: absolute;
  top: 0;
  width: var(--w);
  height: var(--len);

  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--c-text-disabled) 85%, transparent));
  opacity: var(--op);
  will-change: transform;
  animation: drop-fall var(--dur) linear var(--delay) infinite;
}


@keyframes drop-fall {
  from { transform: translate3d(0, -20vh, 0) rotate(var(--tilt)); }
  to   { transform: translate3d(var(--dx), 120vh, 0) rotate(var(--tilt)); }
}





:root {
  --step: 8px; --safe: 32px; --rail-w: 160px; --tick: 64px;
  --head-h: 64px; --content-w: 80rem;
  --ease: cubic-bezier(.22,1,.36,1); --split: .5;
  --reading-size: calc((var(--fs-body) + var(--fs-label)) / 2);
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body { margin: 0; background: var(--c-surface-base); color: var(--c-text-primary); font: var(--fs-body)/1.5 var(--font-text); font-synthesis: none; -webkit-font-smoothing: antialiased; }
body.experience { overflow: hidden; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:not(:disabled), a, input[type=range], summary { touch-action: manipulation; }
button:disabled { cursor: wait; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
::selection { background: var(--c-blood-deep); color: var(--c-text-primary); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.ribbon { height: 100vh; height: 100svh; overflow-y: auto; overflow-x: hidden; position: relative; z-index: 1; scroll-snap-type: none; overscroll-behavior-y: contain; scrollbar-width: none; }
.ribbon::-webkit-scrollbar { width: 0; height: 0; }
.page { min-height: 100vh; min-height: 100svh; position: relative; display: grid; align-content: center; padding: calc(var(--safe) + var(--head-h) + 24px) calc(var(--safe) + var(--rail-w)) max(48px,env(safe-area-inset-bottom)); }
.page__inner { width: 100%; min-width: 0; position: relative; }
.page--title .page__inner { max-width: 44rem; }
.sky__img { min-height: 100svh; object-fit: cover; }
.atmosphere { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-surface-base) 74%, transparent), color-mix(in srgb, var(--c-surface-base) 20%, transparent) 62%, transparent), linear-gradient(0deg, color-mix(in srgb, var(--c-surface-base) 82%, transparent), transparent 24%, transparent 80%, color-mix(in srgb, var(--c-surface-base) 55%, transparent)); }
.atmosphere::after { content: ''; position: absolute; inset: 0; background: var(--c-surface-base); opacity: 0; transition: opacity 900ms var(--ease); }
body[data-chapter="video"] .atmosphere::after, body[data-chapter="world"] .atmosphere::after, body[data-chapter="roadmap"] .atmosphere::after, body[data-chapter="contact"] .atmosphere::after { opacity: .7; }
.rain { opacity: .6; }
.drop--fg { filter: none; }
.frame { position: fixed; inset: 16px; z-index: 2; pointer-events: none; }
.frame i { position: absolute; width: 16px; height: 16px; border-color: color-mix(in srgb, var(--c-gold) 40%, transparent); border-style: solid; }
.frame i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.frame i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.frame i:nth-child(3) { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.frame i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.eyebrow, .kicker, .availability, .stage__period, .stage__status, .session-flow { font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: .08em; }
.eyebrow { display: flex; align-items: center; gap: 16px; color: var(--c-cyan-text); margin: 0; text-transform: uppercase; }
.eyebrow .num { color: var(--c-gold-lit); }
.eyebrow__rule { display: inline-block; width: 40px; height: 1px; background: var(--c-border-interactive); flex-shrink: 0; }
.kicker { margin: 0 0 20px; color: var(--c-text-primary); }
.wordmark { font-family: var(--font-display); font-weight: var(--w-display); font-size: clamp(var(--fs-h1),6vw,var(--fs-display)); line-height: 1; letter-spacing: .04em; margin: 0 0 24px; color: var(--c-gold-lit); }
.wordmark span { display: block; }
.wordmark span + span { margin-top: 4px; letter-spacing: .105em; }
.title, .wait-title { margin: 0 0 24px; font: var(--w-heading) clamp(var(--fs-h2),3.4vw,var(--fs-h1))/1.15 var(--font-display); letter-spacing: var(--ls-h1); color: var(--c-gold-lit); }
.tagline { font: 400 var(--fs-label)/var(--lh-label) var(--font-display); margin: 0 0 16px; }
.scene__description { font-size: var(--reading-size); line-height: 1.4; max-width: 40ch; margin: 0 0 40px; }
.scene__ctas { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.availability { display: flex; align-items: center; gap: 12px; color: var(--c-cyan-text); margin: 32px 0 0; letter-spacing: .04em; }
.status-dot { width: 4px; height: 4px; flex: 0 0 4px; background: var(--c-gold-lit); box-shadow: 0 0 12px color-mix(in srgb,var(--c-gold) 45%,transparent); transform: rotate(45deg); }
.lead { max-width: 46ch; font-size: var(--reading-size); line-height: 1.4; margin: 0 0 32px; }
.lead--wide { max-width: 72ch; }
.minor { font: var(--w-heading) var(--fs-label)/var(--lh-label) var(--font-display); color: var(--c-gold-lit); margin: 0 0 16px; }
.hl { color: var(--c-gold-lit); }
.hl--blood { color: var(--c-blood-accent); -webkit-text-fill-color: var(--c-blood-accent); }
.gold-text { text-shadow: none; }
.link { color: var(--c-gold-lit); text-underline-offset: .25em; text-decoration-color: var(--c-border-interactive); }
.link:hover { text-decoration-color: currentColor; }
.text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; border: 0; padding: 0; background: none; text-decoration: none; cursor: pointer; font: var(--fs-meta)/1.5 var(--font-text); color: var(--c-gold-lit); }
.text-link:hover .arrow { transform: translateX(4px); }
.text-link:hover .arrow--left { transform: translateX(-4px); }
.arrow { position: relative; display: inline-block; width: 24px; height: 12px; flex: 0 0 24px; transition: transform 260ms var(--ease); }
.arrow::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; }
.arrow::after { content: ''; position: absolute; right: 0; top: calc(50% - 4px); width: 8px; height: 8px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.arrow--left { rotate: 180deg; }
.demo-layout { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 880px); justify-content: space-between; gap: 48px; align-items: center; }
.session-flow { list-style: none; padding: 0; display: flex; gap: 24px; flex-wrap: wrap; color: var(--c-cyan-text); }
.facts { list-style: none; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 16px; padding: 24px 0 0; margin: 32px 0 0; border-top: 1px solid var(--c-border); }
.fact { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fact__value { font-size: var(--fs-num-l); line-height: var(--lh-num-l); color: var(--c-gold-lit); }
.fact__label { font-size: var(--fs-body); line-height: 1.25; }
.demo-art { margin: 0; min-width: 0; }
.video { width: 100%; min-width: 0; min-height: 280px; aspect-ratio: 4 / 3; position: relative; isolation: isolate; display: grid; place-items: center; padding: 32px; border: 1px solid var(--c-border-interactive); background: var(--c-surface-base); overflow: hidden; }
.video::after { content: ''; position: absolute; inset: 12px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--c-gold) 28%, transparent); }
.video__poster { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,color-mix(in srgb,var(--c-surface-base) 20%,transparent),color-mix(in srgb,var(--c-surface-base) 82%,transparent)),url('/assets/images/site-background.783aa58d.webp') 74% 10% / cover; opacity: .85; }
.video__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__index { position: absolute; top: 24px; left: 24px; color: var(--c-gold-lit); font: var(--fs-label) var(--font-display); }
.video__pending { text-align: center; }
.video__pending p { font: var(--fs-label)/var(--lh-label) var(--font-display); margin: 24px 0 16px; }
.video__pending .eyebrow { justify-content: center; letter-spacing: .04em; text-transform: none; }
.seal { display: inline-grid; place-items: center; width: 64px; height: 80px; border: 1px solid var(--c-gold); outline: 1px solid color-mix(in srgb,var(--c-gold) 30%,transparent); outline-offset: 8px; font: var(--fs-label) var(--font-display); color: var(--c-gold-lit); }
.demo-art figcaption { font-size: var(--fs-meta); line-height: 1.4; margin-top: 16px; }
.duo { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 40px; align-items: start; }
.split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.split__half { padding: 24px 20px; position: relative; border: 1px solid var(--c-border); min-width: 0; transition: border-color 400ms var(--ease); background: color-mix(in srgb,var(--c-surface-base) 68%,transparent); }
.split__half::before { content: ''; position: absolute; inset: 0; pointer-events: none; transition: opacity 400ms var(--ease); }
.split__half--night { border-top-color: var(--c-blood); }
.split__half--day { border-top-color: var(--c-gold); border-left: 0; }
.split__half--night::before { background: linear-gradient(0deg,color-mix(in srgb,var(--c-blood-deep) 30%,transparent),transparent); opacity: calc(1 - var(--split)); }
.split__half--day::before { background: linear-gradient(0deg,color-mix(in srgb,var(--c-gold-deep) 30%,transparent),transparent); opacity: var(--split); }
.split__name { font: var(--w-heading) var(--fs-label)/var(--lh-label) var(--font-display); margin: 16px 0; }
.split__half--night .split__name { color: var(--c-blood-accent); }
.split__half--day .split__name { color: var(--c-gold-lit); }
.split__points { list-style: none; padding: 0; margin: 0; }
.split__points li + li { margin-top: 12px; }
.faction-sigil { position: relative; display: block; height: 32px; width: 32px; }
.faction-sigil--night { border: 1px solid var(--c-blood-accent); border-radius: 50%; }
.faction-sigil--night::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--c-blood-accent); transform: rotate(45deg); }
.faction-sigil--day::before, .faction-sigil--day::after { content: ''; position: absolute; background: var(--c-gold-lit); }
.faction-sigil--day::before { width: 2px; height: 32px; left: 16px; }
.faction-sigil--day::after { height: 2px; width: 24px; top: 8px; left: 4px; }
.lever { grid-column: 1/-1; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 16px; align-items: center; margin-top: 16px; }
.lever__end { font-size: var(--fs-meta); }
.lever__input { appearance: none; height: 44px; width: 100%; margin: 0; cursor: ew-resize; background: transparent; }
.lever__input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg,var(--c-blood),var(--c-gold)); }
.lever__input::-moz-range-track { height: 2px; background: linear-gradient(90deg,var(--c-blood),var(--c-gold)); }
.lever__input::-webkit-slider-thumb { appearance: none; height: 24px; width: 12px; margin-top: -12px; border: 1px solid var(--c-gold-lit); background: var(--c-surface-base); }
.lever__input::-moz-range-thumb { height: 24px; width: 12px; border: 1px solid var(--c-gold-lit); border-radius: 0; background: var(--c-surface-base); }
.duo__lead { margin: 0 0 24px; font-size: var(--reading-size); line-height: 1.4; }
.compare { width: 100%; border-collapse: collapse; }
.compare th { color: var(--c-cyan-text); font-weight: 400; text-align: left; padding: 0 8px 12px 0; font-size: var(--fs-meta); }
.compare td { padding: 12px 12px 12px 0; vertical-align: top; border-top: 1px solid var(--c-border); font-size: var(--fs-body); line-height: 1.35; }
.compare td:first-child { width: 37%; color: var(--c-gold-lit); }
.stages { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.stage { position: relative; padding: 24px; border-top: 1px solid var(--c-border-interactive); border-left: 1px solid var(--c-border); background: color-mix(in srgb,var(--c-surface-base) 30%,transparent); }
.stage:first-child { border-top-color: var(--c-gold-lit); background: linear-gradient(180deg,color-mix(in srgb,var(--c-gold-deep) 20%,transparent),transparent); }
.stage:last-child { border-right: 1px solid var(--c-border); }
.stage::before { content: ''; position: absolute; top: -4px; left: 24px; width: 8px; height: 8px; background: var(--c-surface-base); border: 1px solid var(--c-border-interactive); rotate: 45deg; }
.stage:first-child::before { background: var(--c-gold-lit); border-color: var(--c-gold-lit); }
.stage__top { display: grid; gap: 4px; }
.stage__num { font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--c-gold-lit); }
.stage__period { color: var(--c-cyan-text); }
.stage__status { display: inline-block; margin: 24px 0 16px; border-bottom: 1px solid var(--c-border); padding-bottom: 8px; letter-spacing: 0; }
.stage__name { font: var(--w-heading) var(--fs-label)/var(--lh-label) var(--font-display); margin: 0 0 16px; }
.stage__text { font-size: var(--fs-body); line-height: 1.4; margin: 0; }
.roadmap-note { margin: 24px 0 0; padding-left: 16px; border-left: 1px solid var(--c-gold); max-width: 78ch; font-size: var(--fs-meta); }
.download-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); align-items: center; gap: 64px; }
.download-panel { padding: 32px; border: 1px solid var(--c-border-interactive); border-top-color: var(--c-gold); background: color-mix(in srgb,var(--c-surface-base) 84%,transparent); min-width: 0; }
.download-panel .eyebrow { margin-bottom: 24px; }
.download-facts { margin: 24px 0; display: grid; gap: 12px; }
.download-facts > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
.download-facts dt { color: var(--c-cyan-text); }
.download-facts dd { margin: 0; }
.download-status { color: var(--c-cyan-text); font-size: var(--fs-meta); }
.download-panel .btn { max-width: 100%; }
.download-updates { display: flex; width: fit-content; margin-top: 24px; }
.contact-note { color: var(--c-cyan-text); font-size: var(--fs-meta); line-height: 1.4; margin: 12px 0 24px; }
.contact-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-top: 40px; }
.contact-grid article { padding: 24px 0 0; border-top: 1px solid var(--c-border-interactive); }
.contact-grid__index { display: block; color: var(--c-cyan-text); margin-bottom: 24px; }
.contact-grid p { max-width: 46ch; font-size: var(--reading-size); line-height: 1.4; margin: 0 0 24px; }
.contact-grid .contact-note, .contact-stat .wait-stat__note { font-size: var(--fs-meta); line-height: 1.4; }
.contact-stat { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; margin-top: 24px; }
.contact-stat .wait-stat__number { font-size: var(--fs-h2); line-height: var(--lh-h2); min-height: 0; }
.contact-stat .wait-stat__label { margin-top: 0; text-transform: none; letter-spacing: 0; }
.contact-stat .wait-stat__note { grid-column: 1 / -1; margin: 0; min-height: 2.8em; }
.footer { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 24px; margin-top: 48px; border-top: 1px solid var(--c-border); font-size: var(--fs-meta); }
.lightbox { padding: 24px; width: min(92vw,80rem); max-width: none; border: 1px solid var(--c-gold); background: var(--c-surface-base); color: var(--c-text-primary); }
.lightbox::backdrop { background: color-mix(in srgb,var(--c-surface-void) 92%,transparent); }
.lightbox iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.skip { position: fixed; left: var(--safe); top: var(--safe); transform: translateY(-300%); z-index: 10; padding: 12px 16px; background: var(--c-surface-base); color: var(--c-gold-lit); }
.skip:focus { transform: none; }
.visually-hidden, .honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-hidden .drop, .is-hidden .sky__shake { animation-play-state: paused; }
@media (min-width: 64rem) and (max-height: 50rem) {
  .page { padding-top: calc(var(--safe) + var(--head-h) + 8px); padding-bottom: max(32px,env(safe-area-inset-bottom)); }
  .lead { margin-bottom: 24px; }
  .scene__description { margin-bottom: 24px; }
  .wordmark { font-size: var(--fs-h1); }
  .availability { margin-top: 24px; }
  .stages, .contact-grid { margin-top: 24px; }
  .stage { padding: 16px; }
  .stage__status { margin-top: 16px; }
}
@media (max-width: 75rem) {
  :root { --rail-w: 128px; }
  .demo-layout { gap: 32px; }
  .duo { gap: 24px; }
  .stage { padding: 16px; }
}
@media (max-width: 63.9375rem) {
  :root { --safe: 24px; --rail-w: 0px; --head-h: 80px; }
  .page { padding-right: var(--safe); padding-top: calc(var(--safe) + var(--head-h) + 24px); padding-bottom: max(48px,env(safe-area-inset-bottom)); }
  .demo-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
  .duo { grid-template-columns: 1fr; gap: 32px; }
  .stages { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 32px; }
  .download-layout { gap: 32px; }
  .download-panel { padding: 24px; }
  .contact-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-grid [data-contact-waitlist] { grid-column: 1 / -1; }
  .sky__shake { animation: none; }
  .sky__shake--flash { display: none; }
  .sky__img { width: 100%; height: 100svh; object-fit: cover; object-position: 70% 15%; }
  .sky__pan { transform: none !important; }
  .drop:nth-child(n+13) { display: none; }
  .atmosphere { background: linear-gradient(90deg,color-mix(in srgb,var(--c-surface-base) 82%,transparent),color-mix(in srgb,var(--c-surface-base) 38%,transparent)),linear-gradient(0deg,var(--c-surface-base),transparent 48%); }
  .frame { inset: 12px; }
}
@media (max-width: 42rem) {
  :root { --safe: 24px; --head-h: 72px; }
  .page { align-content: center; }
  .eyebrow { gap: 12px; font-size: var(--fs-body); line-height: 1.4; letter-spacing: .04em; }
  .eyebrow__rule { width: 24px; }
  .kicker { max-width: 24ch; font-size: var(--fs-body); letter-spacing: .04em; }
  .wordmark { font-size: clamp(var(--fs-h2),12vw,var(--fs-h1)); }
  .title, .wait-title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .tagline { font-size: var(--reading-size); line-height: 1.4; }
  .scene__description { margin-bottom: 32px; }
  .scene__ctas { align-items: flex-start; flex-direction: column; gap: 16px; }
  .lead { margin-bottom: 24px; }
  .availability { align-items: flex-start; line-height: 1.5; letter-spacing: 0; }
  .status-dot { margin-top: 8px; }
  .demo-layout, .download-layout, .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .demo-layout { gap: 40px; }
  .video { min-height: 240px; padding: 24px; }
  .video__pending p { font-size: var(--reading-size); }
  .facts { gap: 12px; }
  .split__half { padding: 20px 12px; }
  .split__name { font-size: var(--reading-size); line-height: 1.4; }
  .lever { gap: 8px; }
  .stages { grid-template-columns: 1fr; row-gap: 24px; }
  .stage { padding: 24px; border-right: 1px solid var(--c-border); }
  .stage__top { display: flex; align-items: baseline; gap: 16px; }
  .stage__status { margin-top: 16px; }
  .contact-grid { margin-top: 32px; }
  .footer { margin-top: 32px; gap: 16px; }
  .btn--lg { font-size: var(--fs-label); min-height: 64px; white-space: normal; text-align: center; max-width: 100%; }
  .btn--lg .btn__label { font-size: var(--fs-label); line-height: var(--lh-control-lg); }
  .btn--sm { white-space: normal; max-width: 100%; }
  .frame { display: none; }
}
@media (max-width: 22rem) {
  :root { --safe: 16px; }
  .split { grid-template-columns: 1fr; }
  .split__half--day { border-left: 1px solid var(--c-border); }
  .split__points li + li { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html, .ribbon { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .sky__pan, .sky__shake, .sky__kick { transform: none !important; animation: none !important; }
  .rain, .sky__shake--flash { display: none; }
  .btn:hover .btn__label, .btn:active .btn__label, .btn:hover::before, .btn:active::before { transform: none !important; }
}

/* ── chrome.css ─────────────────────────────── */

.head { position: fixed; top: var(--safe); left: var(--safe); right: var(--safe); z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 24px; pointer-events: none; }
.head > * { pointer-events: auto; }
.head::before { content: ''; position: absolute; inset: calc(var(--safe) * -1) calc(var(--safe) * -1) -24px; z-index: -1; pointer-events: none; background: linear-gradient(var(--c-surface-base),color-mix(in srgb,var(--c-surface-base) 72%,transparent) 56%,transparent); opacity: .85; }
.head__mark { display: flex; align-items: center; gap: 16px; text-decoration: none; min-width: 0; }
.crest { width: 40px; height: 48px; flex: 0 0 40px; fill: none; stroke: var(--c-gold-lit); stroke-width: 1; }
.head__brand { display: grid; gap: 4px; min-width: 0; }
.head__markName { font: var(--w-heading) var(--fs-label)/var(--lh-label) var(--font-display); color: var(--c-gold-lit); letter-spacing: .02em; }
.head__markKind { font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: .06em; color: var(--c-cyan-text); }
.siege { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; justify-items: center; gap: 4px; pointer-events: auto; }
.siege__label { font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--c-cyan-text); white-space: nowrap; }
.siege__clock { display: flex; align-items: baseline; gap: 8px; color: var(--c-gold-lit); }
.siege__unit { display: inline-flex; align-items: baseline; gap: 4px; }
.siege__unit b { font-weight: 400; font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-num-l); min-width: 2ch; text-align: right; }
.siege__unit i { font-style: normal; font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-cyan-text); }
.siege__sep { color: color-mix(in srgb, var(--c-gold) 55%, transparent); font-size: var(--fs-body); }
.siege--done .siege__clock { color: var(--c-blood, var(--c-gold-lit)); }
.head__actions { display: flex; align-items: center; gap: 24px; }
.head__join { flex: none; height: 40px; padding-block: 0; }
.head__actions .btn--sm { --btn-label-y: 0px; }

.lang { position: relative; }
.lang__pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; height: 40px; padding: 0 12px; font: inherit; font-size: var(--fs-meta); line-height: 1; letter-spacing: .08em; color: var(--c-gold-lit); background: color-mix(in srgb, var(--c-surface-base) 72%, transparent); border: 1px solid var(--c-gold); cursor: pointer; transition: border-color 160ms var(--ease); }
.lang__pill:hover, .lang__pill[aria-expanded="true"] { border-color: var(--c-gold); }
.lang__chev { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; transition: rotate 160ms var(--ease); }
.lang__pill[aria-expanded="true"] .lang__chev { rotate: 180deg; }
.lang__list { position: absolute; top: calc(100% + 4px); right: 0; z-index: 5; list-style: none; margin: 0; padding: 4px; min-width: 192px; display: grid; gap: 0; background: var(--c-surface-raised); border: 1px solid var(--c-border-interactive); border-top-color: var(--c-gold); clip-path: inset(0 0 0 0); opacity: 1; transition: clip-path 160ms var(--ease), opacity 120ms var(--ease), display 160ms allow-discrete; }
.lang__list[hidden] { display: none; clip-path: inset(0 0 0 100%); opacity: 0; }
@starting-style { .lang__list:not([hidden]) { clip-path: inset(0 0 0 100%); opacity: 0; } }
.lang__opt { display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 0 12px; text-decoration: none; color: var(--c-text-primary); }
.lang__opt:hover, .lang__opt:focus-visible { background: color-mix(in srgb, var(--c-gold) 12%, transparent); outline: none; }
.lang__opt[aria-current] { color: var(--c-gold-lit); }
.lang__code { min-width: 24px; font-size: var(--fs-meta); letter-spacing: .08em; color: var(--c-cyan-text); }
.lang__opt[aria-current] .lang__code { color: var(--c-gold-lit); }
.menu-toggle { display: none; }
.rail { --rail-cursor-y: 0px; position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 3; padding-right: var(--safe); display: grid; justify-items: end; gap: 24px; }
.rail__tools { display: flex; align-items: center; gap: 16px; }
.rail__sound { display: grid; place-items: center; width: 44px; height: 44px; padding: 12px; border: 0; background: none; color: var(--c-cyan-text); cursor: pointer; }
.rail__sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.rail__sound[aria-pressed="false"] .sound-wave, .rail__sound[aria-pressed="true"] .sound-cross { display: none; }
.rail__sound[aria-pressed="true"] { color: var(--c-gold-lit); }
.rail__lang { display: flex; gap: 4px; }
.rail__langLink { display: grid; place-items: center; min-width: 36px; min-height: 44px; color: var(--c-text-primary); font-size: var(--fs-meta); text-decoration: none; }
.rail__langLink[aria-current] { color: var(--c-gold-lit); text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.rail__scaleWrap { position: relative; }
.rail__scale { position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent,var(--c-border-interactive) 16%,var(--c-border-interactive) 84%,transparent); }
.rail__list { list-style: none; display: grid; margin: 0; padding: 0; }
.rail__item { height: var(--tick); }
.rail__link { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; height: 100%; text-decoration: none; color: var(--c-text-primary); }
.rail__text { display: grid; justify-items: end; gap: 4px; text-align: right; transition: transform 500ms var(--ease); }
.rail__num { font-size: var(--fs-num); line-height: 1; color: var(--c-cyan-text); transition: color 240ms; }
.rail__label { font-size: var(--fs-meta); line-height: var(--lh-meta); opacity: 0; transform: translateX(8px); transition: opacity 400ms var(--ease),transform 500ms var(--ease); }
.rail:hover .rail__label, .rail:focus-within .rail__label, .rail__link[aria-current] .rail__label { opacity: 1; transform: none; }
.rail__link:hover .rail__text { transform: translateX(-8px); }
.rail__mark { width: 24px; height: 1px; background: var(--c-border-interactive); transform: scaleX(.33); transform-origin: right; transition: transform 500ms var(--ease),background-color 400ms; }
.rail__link[aria-current] .rail__mark, .rail__link:hover .rail__mark { transform: scaleX(1); background: var(--c-gold-lit); }
.rail__link[aria-current] .rail__num { color: var(--c-gold-lit); }
.rail__cursor { position: absolute; right: 0; top: 0; left: -12px; height: var(--tick); border-right: 2px solid var(--c-gold-lit); background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--c-gold-deep) 18%,transparent)); transform: translateY(var(--rail-cursor-y)); transition: transform 820ms var(--ease); pointer-events: none; }
.icon-control { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--c-gold-lit); padding: 8px; }
.icon-control:disabled { opacity: .3; cursor: default; }
.close-icon { display: block; width: 24px; height: 24px; position: relative; }
.close-icon::before, .close-icon::after { content: ''; position: absolute; top: 12px; left: 0; width: 24px; height: 1px; background: currentColor; rotate: 45deg; }
.close-icon::after { rotate: -45deg; }
.chapter-menu { position: fixed; margin: auto; width: min(100% - 48px,40rem); max-height: calc(100svh - 48px); padding: 32px; border: 1px solid var(--c-gold); color: var(--c-text-primary); background: var(--c-surface-base); overflow-y: auto; overscroll-behavior: contain; }
.chapter-menu::backdrop { background: color-mix(in srgb,var(--c-surface-void) 86%,transparent); }
.chapter-menu[open] { animation: menu-arrive 420ms var(--ease); }
.chapter-menu__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.chapter-menu ol { list-style: none; padding: 0; margin: 0; }
.chapter-menu nav a { display: grid; grid-template-columns: 32px 1fr 24px; gap: 20px; align-items: center; min-height: 64px; border-top: 1px solid var(--c-border); text-decoration: none; font-size: var(--fs-label); }
.chapter-menu nav .num { font-size: var(--fs-num); color: var(--c-cyan-text); }
.chapter-menu nav a[aria-current] { color: var(--c-gold-lit); }
.chapter-menu__join { display: inline-block; margin-top: 32px; }
@keyframes menu-arrive { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 75rem) {
  .rail__tools { gap: 0; }
  .rail__link { gap: 8px; }
  .rail__label { max-width: 112px; font-size: var(--fs-body); line-height: 1.2; }
}
@media (max-width: 63.9375rem) {
  .head { top: max(16px,env(safe-area-inset-top)); }
  .head__mark { gap: 12px; }
  .crest { width: 32px; height: 40px; flex-basis: 32px; }
  .head__markName { font-size: var(--reading-size); line-height: 1.4; }
  .head__markKind { display: none; }
  .head__actions { gap: 12px; }
  .menu-toggle { display: grid; place-content: center; gap: 8px; width: 44px; height: 44px; border: 1px solid var(--c-border); background: var(--c-surface-base); color: var(--c-gold-lit); padding: 12px; cursor: pointer; }
  .menu-toggle span { display: block; width: 20px; height: 1px; background: currentColor; }
  .menu-toggle span:last-child { width: 12px; justify-self: end; }
  .rail { top: 64px; right: var(--safe); padding: 0; transform: none; }
  .rail__scaleWrap { display: none; }
  .rail__tools { gap: 8px; }
  .rail__langLink { min-width: 44px; }
  .siege { position: fixed; left: var(--safe); top: 64px; transform: none; grid-auto-flow: column; justify-items: start; align-items: baseline; gap: 12px; }
  .siege__unit b { font-size: var(--fs-body); line-height: var(--lh-body); }
  .siege__sep { display: none; }
}
@media (max-width: 42rem) {
  .head__markName { font-size: var(--fs-body); line-height: var(--lh-meta); max-width: 12ch; }
  .head__mark { gap: 8px; }
  .head__join { display: none; }
  .head__actions { gap: 8px; }
  .chapter-menu { padding: 24px; }
  .chapter-menu nav a { font-size: var(--reading-size); gap: 12px; }
  .chapter-menu__top .eyebrow { max-width: 18ch; }
  .siege { top: 72px; display: grid; grid-auto-flow: row; gap: 0; }
}
@media (max-width: 22rem) {
  .head__markName { max-width: 10ch; }
  .crest { width: 24px; flex-basis: 24px; }
}

/* ── waitlist.css ─────────────────────────────── */
.waiting-room { position: relative; min-height: 100svh; }
.waiting-room__art { position: fixed; inset: 0; z-index: -1; background: linear-gradient(90deg,var(--c-surface-base),color-mix(in srgb,var(--c-surface-base) 58%,transparent)),linear-gradient(0deg,var(--c-surface-base),transparent 72%),url('/assets/images/site-background.783aa58d.webp') center 15% / cover; pointer-events: none; }
.wait-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: var(--safe); }
.wait-main { max-width: 84rem; margin: 0 auto; padding: 64px var(--safe) 48px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 48px 80px; align-items: start; }
.wait-intro { padding-top: 24px; }
.wait-title { margin-top: 32px; }
.wait-title span { display: block; margin-top: 8px; color: var(--c-text-primary); -webkit-text-fill-color: var(--c-text-primary); }
.wait-stat { position: relative; text-align: center; padding: 48px 24px; display: flex; align-items: center; flex-direction: column; }
.wait-stat__ornament { position: absolute; inset: 0; border: 1px solid color-mix(in srgb,var(--c-gold) 45%,transparent); pointer-events: none; }
.wait-stat__ornament::before { content: ''; position: absolute; inset: 12px; border: 1px solid var(--c-border); }
.wait-stat__ornament::after { content: ''; position: absolute; width: 8px; height: 8px; left: calc(50% - 4px); top: -4px; background: var(--c-gold-lit); rotate: 45deg; }
.wait-stat__number { display: block; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-num-l); color: var(--c-gold-lit); min-height: var(--lh-display); overflow-wrap: anywhere; }
.wait-stat__label { font-size: var(--fs-meta); line-height: 1.5; margin-top: 12px; text-transform: uppercase; letter-spacing: var(--ls-micro); }
.wait-stat__note { margin: 16px 0 0; font-size: var(--fs-meta); line-height: 1.4; color: var(--c-cyan-text); max-width: 28ch; }
.wait-stat--inline { text-align: left; align-items: start; padding: 32px 0 0; margin-top: 32px; border-top: 1px solid var(--c-border-interactive); }
.wait-stat--inline .wait-stat__note { max-width: none; }
.wait-panel { position: relative; background: color-mix(in srgb,var(--c-surface-base) 94%,transparent); border: 1px solid var(--c-border-interactive); border-top-color: var(--c-gold); padding: 40px; }
.wait-panel::before { content: ''; position: absolute; width: 8px; height: 8px; top: -4px; left: 40px; rotate: 45deg; background: var(--c-gold-lit); }
.wait-panel__index { display: block; color: var(--c-cyan-text); margin-bottom: 24px; font-size: var(--fs-meta); }
.wait-panel > .minor { margin-bottom: 32px; }
.wait-form { display: flex; flex-direction: column; gap: 12px; }
.wait-form > label { font-size: var(--fs-meta); }
.wait-form input[type=email] { width: 100%; min-width: 0; border: 1px solid var(--c-border-interactive); border-radius: 0; background: var(--c-surface-raised); color: var(--c-text-primary); padding: 16px; min-height: 56px; font-size: var(--reading-size); }
.wait-form input::placeholder { color: var(--c-cyan-text); opacity: 1; }
.wait-form input[type=email]:focus { border-color: var(--c-gold-lit); }
.faction-choice { border: 0; padding: 0; margin: 16px 0 8px; min-width: 0; }
.faction-choice legend { padding: 0 0 12px; }
.faction-choice > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.faction-choice label { display: block; min-width: 0; position: relative; }
.faction-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.faction-choice span { display: grid; place-items: center; height: 100%; padding: 12px 8px; border: 1px solid var(--c-border); font-size: var(--fs-body); text-align: center; min-height: 48px; cursor: pointer; transition: background-color 200ms; }
.faction-choice input:checked + span { border-color: var(--c-gold-lit); color: var(--c-gold-lit); background: color-mix(in srgb,var(--c-gold-deep) 18%,var(--c-surface-base)); }
.faction-choice input[value=darkness]:checked + span { color: var(--c-text-primary); border-color: var(--c-blood-accent); background: color-mix(in srgb,var(--c-blood-deep) 30%,var(--c-surface-base)); }
.faction-choice input:focus-visible + span { outline: 2px solid var(--c-focus-ring); outline-offset: 4px; position: relative; z-index: 1; }
.consent { display: flex; align-items: start; gap: 12px; padding-block: 8px; cursor: pointer; line-height: 1.4; }
.consent input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: var(--c-gold-lit); }
.wait-form .btn { align-self: stretch; margin-top: 16px; }
.form-note { font-size: var(--fs-meta); line-height: 1.4; color: var(--c-cyan-text); margin: 12px 0 0; }
.form-status { font-size: var(--fs-meta); line-height: 1.5; margin: 0; color: var(--c-gold-lit); overflow-wrap: anywhere; }
.form-status:not(:empty) { padding: 16px 0; }
.form-status[data-error=true] { border-top: 1px solid var(--c-blood-accent); margin-top: 16px; }
.form-success p { font-size: var(--reading-size); line-height: 1.4; }
.success-seal { display: block; width: 48px; height: 48px; margin: 16px 0 32px; border: 1px solid var(--c-gold-lit); position: relative; }
.success-seal::before { content: ''; position: absolute; left: 16px; top: 8px; height: 24px; width: 12px; border-right: 2px solid var(--c-gold-lit); border-bottom: 2px solid var(--c-gold-lit); rotate: 45deg; }
.manage-registration { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--c-border); }
.wait-faq { grid-column: 1 / -1; width: 100%; }
.wait-faq details { border-top: 1px solid var(--c-border-interactive); }
.wait-faq details:last-child { border-bottom: 1px solid var(--c-border-interactive); }
.wait-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font-size: var(--reading-size); }
.wait-faq summary::-webkit-details-marker { display: none; }
.wait-faq summary span { color: var(--c-gold-lit); font-size: var(--fs-label); }
.wait-faq details[open] summary span { rotate: 45deg; }
.wait-faq details p { margin: 0 0 24px; max-width: 74ch; font-size: var(--reading-size); line-height: 1.4; }
.wait-footer { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin: 0 var(--safe); padding: 24px 0; border-top: 1px solid var(--c-border); font-size: var(--fs-meta); }
@media (max-width: 75rem) { .wait-main { gap: 40px; } .wait-panel { padding: 32px; } }
@media (max-width: 63.9375rem) { .wait-main { padding-top: 32px; grid-template-columns: 1fr 1fr; gap: 32px; } .wait-panel { padding: 24px; } .wait-title { font-size: var(--fs-h2); } }
@media (max-width: 48rem) {
  .wait-main { grid-template-columns: 1fr; padding-top: 24px; gap: 40px; }
  .wait-intro { padding-top: 0; }
  .wait-title { margin-top: 24px; }
  .wait-intro .lead { max-width: 48ch; }
  .wait-stat--inline { margin-top: 24px; padding-top: 24px; }
  .wait-stat__number { font-size: var(--fs-h1); line-height: var(--lh-h1); min-height: var(--lh-h1); }
  .wait-panel { padding: 24px; }
  .wait-faq { grid-column: auto; }
  .wait-footer { gap: 12px 24px; }
  .wait-footer > span { order: 3; width: 100%; }
}
@media (max-width: 22rem) { .wait-panel { padding: 20px 16px; } .faction-choice span { padding-inline: 4px; } }

/* ── sheets.css ─────────────────────────────── */

.sheet { width: min(100% - 2 * var(--safe), 56rem); max-height: calc(100svh - 2 * var(--safe)); padding: 0; border: 1px solid var(--c-border-interactive); border-top-color: var(--c-gold); background: var(--c-surface-raised); color: var(--c-text-primary); overflow: hidden; }
.sheet--wide { width: min(100% - 2 * var(--safe), 72rem); }
.sheet::backdrop { background: color-mix(in srgb, var(--c-surface-base) 78%, transparent); backdrop-filter: blur(4px); }
.sheet[open] { animation: sheet-in 320ms var(--ease) both; }
.sheet[open]::backdrop { animation: sheet-fade 320ms var(--ease) both; }
.sheet.is-closing { animation: sheet-out 200ms var(--ease) both; }
.sheet.is-closing::backdrop { animation: sheet-fade 200ms var(--ease) reverse both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sheet-out { to { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
.sheet__inner { position: relative; max-height: calc(100svh - 2 * var(--safe)); overflow-y: auto; padding: 48px; }
.sheet__close { position: absolute; top: 16px; right: 16px; }
.sheet__title { font: var(--w-heading) var(--fs-h2)/var(--lh-h2) var(--font-display); letter-spacing: var(--ls-h2); margin: 0 48px 16px 0; }
.sheet__title span { display: block; color: var(--c-text-primary); }
.sheet .lead { margin: 0 0 32px; max-width: 60ch; }
.sheet__section { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--c-border); }
.sheet__section .minor { margin: 0 0 16px; }
.sheet__doc p { margin: 0 0 16px; font-size: var(--reading-size); line-height: 1.4; max-width: 64ch; }
.sheet__facts { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 12px 24px; margin: 0; }
.sheet__facts dt { color: var(--c-cyan-text); }
.sheet__facts dd { margin: 0; }
.sheet__files { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.sheet__files li { display: grid; gap: 4px; }
.sheet__files li span:last-child { color: var(--c-cyan-text); }
.sheet__list { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 12px; }
.sheet__list li { display: flex; gap: 16px; align-items: baseline; font-size: var(--reading-size); line-height: 1.4; }
.sheet__list li::before { content: ''; width: 8px; height: 8px; flex: none; rotate: 45deg; background: var(--c-gold); translate: 0 -4px; }
.sheet__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.sheet__grid .wait-panel { padding: 32px; }
.sheet .btn { margin-top: 8px; }
body:has(.sheet[open]) { overflow: hidden; }


.contact-card { display: grid; align-content: start; justify-items: start; gap: 16px; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-top: 1px solid var(--c-border-interactive); padding: 24px 0 0; cursor: pointer; transition: border-color 160ms var(--ease); }
.contact-card:hover { border-top-color: var(--c-gold); }
.contact-card:hover .arrow, .contact-card:focus-visible .arrow { transform: translateX(4px); }
.contact-card .minor, .contact-card p, .contact-card .contact-grid__index { margin: 0; }
.contact-card .contact-stat { margin: 0; width: 100%; }
.page--contact { grid-template-rows: minmax(0, 1fr); align-content: stretch; padding-bottom: max(var(--safe), env(safe-area-inset-bottom)); }
.page--contact .page__inner { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.contact-page { align-self: center; }
.contact-base { position: relative; display: flex; align-items: center; min-height: 56px; padding-top: 16px; border-top: 1px solid var(--c-border); width: 100%; }
.social { position: absolute; left: 50%; top: calc(50% + 8px); translate: -50% -50%; display: flex; gap: 8px; }
.social__link { width: 40px; height: 40px; display: grid; place-items: center; color: var(--c-gold-lit); border: 1px solid var(--c-border); transition: border-color 160ms var(--ease), transform 160ms var(--ease); }
.social__link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
a.social__link:hover { border-color: var(--c-gold); transform: translateY(-4px); }
.social__link--soon { color: var(--c-border-interactive); cursor: default; }
.page--contact .footer { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; border: 0; font-size: var(--fs-meta); }
.page--contact .footer a { color: var(--c-text-primary); text-decoration: none; transition: color 160ms var(--ease); }
.page--contact .footer a:hover, .page--contact .footer a:focus-visible { color: var(--c-gold-lit); }
.page--contact .footer span { color: var(--c-cyan-text); }
@media (max-width: 63.9375rem) {
  .sheet__inner { padding: 32px 24px; }
  .sheet__grid { grid-template-columns: 1fr; gap: 32px; }
  .sheet__facts { grid-template-columns: 1fr; gap: 4px; }
  .sheet__facts dd { margin-bottom: 12px; }
  .page--contact { grid-template-rows: auto auto; }
  .contact-base { margin-top: 32px; }
}
@media (max-width: 42rem) {
  .contact-base { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .social { position: static; translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet[open], .sheet.is-closing, .sheet[open]::backdrop { animation: none; }
}

/* ── pages.css ─────────────────────────────── */

.download-layout { align-items: center; grid-template-columns: minmax(0, 720px) minmax(320px, 416px); justify-content: space-between; }
.download-panel { justify-self: end; width: 100%; }
.download-info .lead { margin-bottom: 32px; }
.download-info__label { margin: 0 0 16px; font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--c-cyan-text); font-weight: 400; }
.download-steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 32px; display: grid; gap: 12px; }
.download-steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; gap: 16px; align-items: baseline; }
.download-steps li::before { content: counter(step, upper-roman); font-family: var(--font-display); color: var(--c-gold-lit); }
.reqs { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: var(--lh-body); }
.reqs th, .reqs td { text-align: left; padding: 8px 16px 8px 0; border-bottom: 1px solid var(--c-border); font-weight: 400; }
.reqs thead th { color: var(--c-gold-lit); }
.reqs tbody th { color: var(--c-cyan-text); white-space: nowrap; }
.reqs__note { margin: 12px 0 0; font-size: var(--fs-meta); line-height: 1.4; color: var(--c-cyan-text); max-width: 60ch; }
.download-status { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.download-updates { margin-top: 24px; }
@media (max-width: 63.9375rem) {
  .download-layout { grid-template-columns: 1fr; }
  .download-panel { justify-self: stretch; }
  .reqs th, .reqs td { padding-right: 8px; }
}


.road { display: grid; grid-template-columns: minmax(0, 1fr) minmax(304px, 400px); gap: 64px; align-items: center; }
.road__main { min-width: 0; }
.road__label { margin: 32px 0 16px; font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--c-cyan-text); font-weight: 400; }
.news .road__label { margin-top: 0; }
.news__list, .plan__list { list-style: none; padding: 0; margin: 0; }
.news__list { max-height: min(560px, calc(100svh - 280px)); overflow-y: auto; padding-right: 8px; }
.news__item { padding: 16px 0; border-top: 1px solid var(--c-border); display: grid; gap: 4px; }
.news__item:first-child { border-top-color: var(--c-gold); }
.news__date { font-family: var(--font-num); color: var(--c-cyan-text); font-size: var(--fs-num); }
.news__title { margin: 0; font: var(--w-heading) var(--fs-label)/var(--lh-label) var(--font-display); color: var(--c-gold-lit); }
.news__text { margin: 0; line-height: 1.4; }
.plan__list { display: grid; grid-template-columns: repeat(4, minmax(232px, 1fr)); gap: 24px; overflow-x: auto; padding: 0 0 16px; position: relative; scroll-snap-type: x proximity; }
.plan__stage { position: relative; display: grid; align-content: start; gap: 8px; padding: 24px; border: 1px solid var(--c-border); border-top-color: var(--c-border-interactive); background: color-mix(in srgb, var(--c-surface-base) 72%, transparent); scroll-snap-align: start; }
.plan__stage::after { content: ''; position: absolute; left: 100%; top: 48px; width: 24px; height: 1px; background: var(--c-border-interactive); }
.plan__stage:last-child::after { display: none; }
.plan__num { width: 48px; height: 48px; display: grid; place-items: center; font-family: var(--font-display); color: var(--c-cyan-text); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--c-border); }
.plan__stage--current { border-top-color: var(--c-gold); }
.plan__stage--current .plan__num { background: var(--c-gold); color: var(--c-surface-base); }
.plan__stage--target { border-top-color: var(--c-blood); }
.plan__stage--target .plan__num { background: var(--c-blood); color: var(--c-text-primary); }
.plan__status { font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--c-cyan-text); }
.plan__stage--current .plan__status, .plan__stage--current .plan__name { color: var(--c-gold-lit); }
.plan__name { margin: 0; font: var(--w-heading) var(--fs-label)/var(--lh-label) var(--font-display); color: var(--c-text-primary); }
.plan__text { margin: 0; line-height: 1.4; }
@media (max-width: 63.9375rem) {
  .road { grid-template-columns: 1fr; gap: 32px; }
  .news__list { max-height: none; overflow: visible; padding-right: 0; }
}

/* ── sides.css ─────────────────────────────── */

.page--world .page__inner { width: 100%; }
.sides { --slam: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; height: calc(100svh - var(--safe) - var(--head-h) - 72px); }
.sides__head { text-align: center; justify-self: center; max-width: 52rem; transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.sides__head .lead { margin: 8px auto 0; }
.sides__head .title { margin: 0; }

.sides__stage { position: relative; display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 28fr) minmax(0, 36fr); grid-template-rows: minmax(0, 1fr); gap: 0; align-items: stretch; min-height: 0; }
.side, .roster { grid-row: 1; min-width: 0; transition: opacity 640ms var(--ease), transform 640ms var(--ease), filter 640ms var(--ease), visibility 0s linear 640ms; opacity: 0; filter: blur(8px); visibility: hidden; pointer-events: none; }
.side--dark { transform: translateX(-32px); }
.side--light { transform: translateX(32px); }
.side--dark, .roster--light { grid-column: 1; }
.side--light, .roster--dark { grid-column: 3; }

.side--dark { justify-self: start; }
.side--light { justify-self: end; text-align: right; }
.side--light .side__head { flex-direction: row-reverse; }
.side--light .side__laws li { flex-direction: row-reverse; }
.side--light .side__ranks, .side--light .side__lock { justify-content: flex-end; }
.side--light .side__about { margin-left: auto; }
.roster--light { justify-self: start; width: 100%; }
.roster--dark { justify-self: end; width: 100%; }
.roster--dark .roster__grid { justify-content: end; }
.roster--dark .roster__label { text-align: right; }
.side--dark, .roster--dark { --side-c: var(--c-blood-accent); --side-line: var(--c-blood); }
.side--light, .roster--light { --side-c: var(--c-gold-lit); --side-line: var(--c-gold); }
.roster--light { transform: translateX(-48px); }
.roster--dark { transform: translateX(48px); }
.sides[data-state="center"] .side,
.sides[data-state="dark"] .side--dark, .sides[data-state="dark"] .roster--dark,
.sides[data-state="light"] .side--light, .sides[data-state="light"] .roster--light { opacity: 1; filter: none; visibility: visible; pointer-events: auto; transform: none; transition-delay: 120ms; }

.roster li { --i: 0; }
.roster .unit { opacity: 0; transform: translateY(12px) scale(.96); transition: opacity 420ms var(--ease), transform 420ms var(--ease); transition-delay: calc(var(--i) * 45ms); }
.sides[data-state="dark"] .roster--dark .unit, .sides[data-state="light"] .roster--light .unit { opacity: 1; transform: none; transition-delay: calc(240ms + var(--i) * 45ms); }

.side { position: relative; overflow-y: auto; align-self: center; max-height: 100%; padding: 0; border: 0; background: none; }
.side__head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.sigil { width: 48px; height: 48px; flex: none; fill: none; stroke: var(--side-c); stroke-width: 1.5; }
.side__name { margin: 0; font: var(--w-heading) var(--fs-h2)/var(--lh-h2) var(--font-display); color: var(--side-c); }
.side__tagline { margin: 4px 0 0; color: var(--c-cyan-text); }
.side__about { margin: 0; font-size: var(--reading-size); line-height: 1.4; max-width: 56ch; }
.side__label { margin: 24px 0 12px; font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--c-cyan-text); font-weight: 400; }
.side__laws { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.side__laws li { display: flex; gap: 12px; align-items: baseline; line-height: 1.4; }
.side__laws li::before { content: ''; width: 8px; height: 8px; flex: none; rotate: 45deg; border: 1px solid var(--side-c); translate: 0 -4px; }
.side__ranks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: rank; }
.side__ranks li { counter-increment: rank; padding: 4px 12px; border: 1px solid var(--c-border); font-size: var(--fs-body); }
.side__ranks li::before { content: counter(rank, upper-roman) ' '; color: var(--side-c); font-family: var(--font-display); }
.side__lock { display: none; align-items: center; gap: 12px; margin: 24px 0 0; color: var(--c-cyan-text); }
.lock-icon { width: 16px; height: 20px; position: relative; flex: none; }
.lock-icon::before { content: ''; position: absolute; left: 4px; right: 4px; top: 0; height: 12px; border: 1px solid currentColor; border-bottom: 0; border-radius: 8px 8px 0 0; }
.lock-icon::after { content: ''; position: absolute; inset: 8px 0 0; border: 1px solid currentColor; background: var(--c-surface-base); }
.sides[data-state="center"] .side__more { display: none; }
.sides[data-state="center"] .side__lock { display: flex; }
.sides[data-state="center"] .side { cursor: pointer; }
.sides[data-state="center"] .side:hover .side__name { text-shadow: 0 0 16px var(--side-line); }


.roster { position: static; min-height: 0; overflow: hidden; container-type: size; align-self: stretch; }
.roster__rows { --tile: min(calc((100cqw - 40px) / 6), calc((100cqh - 120px) / 3), 160px); height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); align-content: center; gap: 16px 24px; }
.roster__row--field, .roster__row--fortress { grid-column: 1 / -1; }
.roster__label { margin: 0 0 8px; font-size: var(--fs-meta); line-height: 20px; letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--c-cyan-text); font-weight: 400; }
.roster__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, var(--tile)); gap: 8px; }
.unit { position: relative; display: block; width: var(--tile); padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.unit__img, .unit__ph { display: block; width: var(--tile); aspect-ratio: 1; border: 1px solid var(--c-border); object-fit: contain; background: var(--c-surface-raised); transition: border-color 200ms var(--ease), transform 200ms var(--ease), filter 200ms var(--ease); filter: saturate(.8); }
.unit__ph { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--side-line) 24%, transparent), var(--c-surface-raised) 72%); }
.unit__ph .sigil { width: 40%; height: auto; opacity: .7; }
.unit:hover .unit__img, .unit:hover .unit__ph, .unit:focus-visible .unit__img, .unit:focus-visible .unit__ph, .unit[aria-expanded="true"] .unit__img, .unit[aria-expanded="true"] .unit__ph { border-color: var(--side-line); transform: translateY(-4px); filter: none; }

.unit__name { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 8px 4px; font-size: var(--fs-body); line-height: 20px; overflow-wrap: normal; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; background: linear-gradient(transparent, color-mix(in srgb, var(--c-surface-base) 92%, transparent) 55%); pointer-events: none; transition: transform 200ms var(--ease); }
.unit:hover .unit__name, .unit:focus-visible .unit__name, .unit[aria-expanded="true"] .unit__name { transform: translateY(-4px); }


.unit-card { position: absolute; z-index: 2; top: 50%; translate: 0 -50%; max-height: 100%; overflow-y: auto; display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; padding: 24px; border: 1px solid var(--side-line); background: var(--c-surface-raised); box-shadow: 0 24px 48px var(--c-surface-void); animation: unit-in 240ms var(--ease) both; }
.unit-card[hidden] { display: none; }

.sides[data-state="light"] .sides__stage { grid-template-columns: minmax(0, 46fr) minmax(0, 28fr) minmax(0, 26fr); }
.sides[data-state="dark"] .sides__stage { grid-template-columns: minmax(0, 26fr) minmax(0, 28fr) minmax(0, 46fr); }
.roster--light .unit-card { left: calc(46% + 24px); width: calc(28% - 48px); }
.roster--dark .unit-card { left: calc(26% + 24px); width: calc(28% - 48px); }
@keyframes unit-in { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }
.unit-card__close { position: absolute; top: 4px; right: 4px; }
.unit-card__img, .unit-card__ph { width: min(100%, 240px); aspect-ratio: 1; height: auto; object-fit: contain; border: 1px solid var(--c-border); background: var(--c-surface-base); }
.unit-card__ph { display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; color: var(--c-cyan-text); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--side-line) 24%, transparent), var(--c-surface-base) 72%); }
.unit-card__ph .sigil { width: 64px; height: 64px; }
.unit-card__text { display: grid; align-content: start; gap: 8px; }
.unit-card__group { font-size: var(--fs-meta); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--c-cyan-text); }
.unit-card__name { margin: 0; font: var(--w-heading) var(--fs-h2)/var(--lh-h2) var(--font-display); color: var(--side-c); }
.unit-card__role { margin: 0; font-size: var(--reading-size); line-height: 1.4; }
.unit-card__desc { margin: 0; line-height: 1.4; color: var(--c-cyan-text); }


.sides__control { display: grid; justify-items: center; gap: 4px; }
.sides__choice { min-height: 56px; display: grid; place-items: center; text-align: center; }
.sides__hint, .sides__yours, .sides__error { margin: 0; }
.sides__hint { color: var(--c-cyan-text); }
.sides__yours { display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px; border: 1px solid var(--c-gold); color: var(--c-gold-lit); font-family: var(--font-display); font-size: var(--fs-label); }
.sides[data-state="dark"] .sides__yours { border-color: var(--c-blood); color: var(--c-blood-accent); }
.seal-mini { width: 12px; height: 12px; rotate: 45deg; background: currentColor; }
.sides__error { color: var(--c-blood-accent); }
.tug { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(160px, 480px) minmax(max-content, 1fr); align-items: center; gap: 24px; width: min(100%, 800px); }
.tug__end--dark { justify-self: end; }
.tug__end--light { justify-self: start; }
.tug__end { font: inherit; font-family: var(--font-display); font-size: var(--fs-label); background: none; border: 0; padding: 8px 0; cursor: pointer; transition: text-shadow 240ms var(--ease); }
.tug__end--dark { color: var(--c-blood-accent); }
.tug__end--light { color: var(--c-gold-lit); }
.tug__end--dark:hover, .sides[data-state="dark"] .tug__end--dark { text-shadow: 0 0 12px var(--c-blood); }
.tug__end--light:hover, .sides[data-state="light"] .tug__end--light { text-shadow: 0 0 12px var(--c-gold); }
.tug__track { position: relative; height: 56px; cursor: grab; touch-action: none; --p: 0; --lean: 0; --tug-c: var(--c-gold-lit); }
.tug__track::after { content: ''; position: absolute; top: 50%; height: 2px; translate: 0 -50%; left: min(50%, calc(50% + var(--p) * 50%)); width: calc(max(var(--p), -1 * var(--p)) * 50%); background: var(--tug-c); box-shadow: 0 0 calc(max(var(--p), -1 * var(--p)) * 16px) var(--tug-c); pointer-events: none; }
.tug__track:active { cursor: grabbing; }
.tug__rail { position: absolute; left: 0; right: 0; top: 50%; height: 2px; translate: 0 -50%; background: linear-gradient(90deg, var(--c-blood), var(--c-border) 40%, var(--c-border) 60%, var(--c-gold)); }
.tug__notch { position: absolute; left: 50%; top: 12px; bottom: 12px; width: 1px; background: var(--c-border-interactive); }
.tug__handle { position: absolute; top: 50%; left: calc(50% + var(--p) * 50%); width: 32px; height: 48px; rotate: calc(var(--lean) * 1deg); transition: rotate 120ms var(--ease); translate: -50% -50%; border: 1px solid var(--c-gold-lit); background: var(--c-surface-base); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-surface-base) 60%, transparent); }
.tug__handle span { position: absolute; inset: 8px; border-inline: 1px solid var(--c-gold); }
.sides[data-state="dark"] .tug__handle { border-color: var(--c-blood-accent); }
.tug__track:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 4px; }
.sides.is-slam .sides__stage { animation: side-slam 420ms var(--ease) both; }
@keyframes side-slam { 0% { transform: translateX(calc(var(--slam) * 12px)); } 40% { transform: translateX(calc(var(--slam) * -4px)); } 100% { transform: none; } }


.sky__img { transition: filter 1200ms var(--ease); }
.rain { transition: opacity 1200ms var(--ease); }
.sky::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1200ms var(--ease); background: radial-gradient(ellipse 80% 60% at 70% 0%, color-mix(in srgb, var(--c-gold) 28%, transparent), transparent 70%); }
body[data-side="light"] .sky__img { filter: grayscale(.85) sepia(.3) brightness(1.2) contrast(.95); }
body[data-side="light"] .sky::after { opacity: 1; }
body[data-side="light"] .rain { opacity: 0; }
body[data-side="dark"] .sky__img { filter: saturate(1.4) brightness(.8) contrast(1.1); }
body[data-side="dark"] .rain { opacity: 1; }

@media (max-width: 63.9375rem) {
  .sides { height: auto; min-height: 0; }
  .side, .roster { overflow: visible; }
  .roster { container-type: inline-size; }
  .roster__rows { --tile: min(calc((100cqw - 40px) / 6), 96px); height: auto; }
  .sides__stage { grid-template-columns: 1fr; }
  .side, .roster { grid-column: 1; }
  .sides[data-state="center"] .side--light { grid-row: 2; }
  .sides[data-state="dark"] .roster--dark, .sides[data-state="light"] .roster--light { grid-row: 2; }
  .sides[data-state="light"] .side--light { grid-row: 1; }
  .side, .roster { display: none; }
  .sides[data-state="center"] .side, .sides[data-state="dark"] .side--dark, .sides[data-state="dark"] .roster--dark, .sides[data-state="light"] .side--light, .sides[data-state="light"] .roster--light { display: grid; }
  .unit-card { position: fixed; top: 50%; left: var(--safe); right: var(--safe); width: auto; z-index: 5; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .unit-card__img, .unit-card__ph { min-height: 152px; }
  .unit-card__name { font-size: var(--fs-label); line-height: var(--lh-label); }
  .sides__control { position: sticky; bottom: 0; padding: 16px 0; background: linear-gradient(transparent, var(--c-surface-base) 32%); }
  .tug { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; width: 100%; }
  .tug__end { font-size: var(--fs-body); }
}
@media (max-width: 42rem) {
  .roster__rows { grid-template-columns: 1fr; }
  .side { padding: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .side, .roster, .sky__img, .rain, .sky::after, .roster .unit { transition: none; }
  .sides.is-slam .sides__stage, .unit-card { animation: none; }
}

body[data-chapter="world"] .atmosphere::after { opacity: .4; }

/* ── demo.css ─────────────────────────────── */

.slides { display: grid; gap: 24px; }
.slides__bar { display: flex; justify-content: center; align-items: center; gap: 24px; }
.slides__tabs { display: flex; gap: 24px; }
.slides__tab { display: inline-flex; gap: 12px; align-items: baseline; font: inherit; font-family: var(--font-display); font-size: var(--fs-label); color: var(--c-cyan-text); background: none; border: 0; border-bottom: 1px solid var(--c-border); padding: 8px 4px; cursor: pointer; transition: color 200ms var(--ease), border-color 200ms var(--ease); }
.slides__tab .num { color: var(--c-gold); }
.slides__tab[aria-selected="true"] { color: var(--c-gold-lit); border-bottom-color: var(--c-gold); }
.slides__arrow { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--c-gold-lit); cursor: pointer; transition: transform 160ms var(--ease), color 160ms var(--ease); }
.slides__arrow:hover { color: var(--c-text-primary); }
.slides__arrow[data-slide-step="-1"]:hover { transform: translateX(-4px); }
.slides__arrow[data-slide-step="1"]:hover { transform: translateX(4px); }
.slides__arrow:disabled { opacity: .3; cursor: default; }
.slides__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides__track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; padding-right: 4px; }


.valley-layout { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 48px; align-items: center; }
.valley-steps__title { margin: 0 0 24px; }
.valley-steps__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.valley-step { display: grid; grid-template-columns: 32px 1fr; gap: 0 16px; width: 100%; text-align: left; font: inherit; color: var(--c-cyan-text); background: none; border: 0; border-left: 1px solid var(--c-border); padding: 8px 0 8px 16px; cursor: pointer; transition: color 240ms var(--ease), border-color 240ms var(--ease); }
.valley-step__num { color: var(--c-gold); grid-row: span 2; }
.valley-step__name { font-family: var(--font-display); font-size: var(--fs-label); line-height: var(--lh-label); }
.valley-step__text { display: grid; grid-template-rows: 0fr; overflow: hidden; color: var(--c-text-primary); line-height: 1.4; transition: grid-template-rows 320ms var(--ease), margin 320ms var(--ease); }
.valley-step[aria-current="step"] { color: var(--c-gold-lit); border-left-color: var(--c-gold); }
.valley-step[aria-current="step"] .valley-step__text { grid-template-rows: 1fr; margin-top: 8px; }
.valley-step:not([aria-current="step"]) .valley-step__text { height: 0; }
.valley-play { margin-top: 16px; }

.valley { position: relative; margin: 0; display: grid; gap: 8px; }
.valley__viewport { position: relative; height: max(360px, calc(100svh - 344px)); min-height: 360px; cursor: grab; touch-action: none; }
.valley__viewport:active { cursor: grabbing; }
.valley__viewport::before { content: ''; position: absolute; inset: 12% 8% 4%; background: radial-gradient(ellipse at 50% 60%, var(--c-surface-void), transparent 70%); opacity: .9; pointer-events: none; }
.valley__gl, .valley__fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.valley__fx { pointer-events: none; }
.valley--flat .valley__viewport { background: url("/assets/map/terrain.ec94765e.webp") center / contain no-repeat; }
.valley__marks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vmark { position: absolute; left: 0; top: 0; will-change: transform; opacity: 0; transition: opacity 400ms var(--ease); }
.vmark.is-on { opacity: 1; }
.vmark--capital { display: grid; justify-items: center; gap: 4px; translate: -50% -100%; }
.vmark--capital svg { width: 32px; height: 32px; fill: var(--c-surface-base); stroke: currentColor; stroke-width: 1.5; filter: drop-shadow(0 4px 8px var(--c-surface-void)); transform: translateY(16px) scale(.6); transition: transform 600ms var(--ease); }
.vmark--capital.is-on svg { transform: none; }
.vmark--capital span { order: -1; font-family: var(--font-display); font-size: var(--fs-label); line-height: var(--lh-label); text-shadow: 0 2px 8px var(--c-surface-void), 0 0 4px var(--c-surface-void); white-space: nowrap; }
.vmark--dark { color: var(--c-blood-accent); }
.vmark--light { color: var(--c-gold-lit); }
.vmark--bastion { translate: -50% -100%; display: grid; justify-items: center; }
.vmark--bastion i { width: 16px; height: 16px; rotate: 45deg; background: var(--c-gold); border: 1px solid var(--c-gold-lit); box-shadow: 0 0 12px color-mix(in srgb, var(--c-gold) 60%, transparent); transition: background 400ms var(--ease), border-color 400ms var(--ease), box-shadow 400ms var(--ease); transform: translateY(-24px) scale(.2); }
.vmark--bastion b { width: 1px; height: 24px; background: linear-gradient(var(--c-gold-lit), transparent); }
.vmark--bastion.is-on i { animation: bastion-drop 520ms var(--ease) both; }
.vmark--bastion.is-dark i { background: var(--c-blood); border-color: var(--c-blood-accent); box-shadow: 0 0 12px var(--c-blood); }
.vmark--bastion.is-dark b { background: linear-gradient(var(--c-blood-accent), transparent); }
@keyframes bastion-drop { from { transform: translateY(-24px) scale(.2); } 70% { transform: translateY(4px) scale(1.1); } to { transform: none; } }
.vres { position: absolute; left: 0; top: 0; width: 32px; height: 32px; margin: -16px 0 0 -16px; display: grid; place-items: center; border-radius: 50%; background: var(--c-surface-raised); border: 1px solid var(--c-gold-lit); color: var(--c-gold-lit); box-shadow: 0 4px 12px var(--c-surface-void); will-change: transform, opacity; opacity: 0; }
.vres svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vstock { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; max-width: 90%; padding: 8px 16px; background: color-mix(in srgb, var(--c-surface-raised) 92%, transparent); border: 1px solid var(--c-border-interactive); border-top-color: var(--c-gold); font-size: var(--fs-body); }
.vstock[hidden] { display: none; }
.vstock__title { width: 100%; text-align: center; font-size: var(--fs-meta); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--c-cyan-text); }
.vstock__item { display: inline-flex; gap: 4px; align-items: center; animation: stock-in 320ms var(--ease) both; }
@keyframes stock-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vstock__item svg { width: 20px; height: 20px; fill: none; stroke: var(--c-gold-lit); stroke-width: 1.5; }
.vstock__item b { font-family: var(--font-num); font-weight: 400; color: var(--c-gold-lit); }
.valley__tip { position: absolute; z-index: 2; margin: 0; padding: 8px 12px; pointer-events: none; background: var(--c-surface-raised); border: 1px solid var(--c-border-interactive); border-top-color: var(--c-gold); font-size: var(--fs-body); line-height: var(--lh-body); white-space: nowrap; translate: 16px 16px; }
.valley__caption { min-height: 56px; margin: 0; text-align: center; font-size: var(--reading-size); line-height: 1.4; color: var(--c-text-primary); transition: opacity 240ms var(--ease), filter 240ms var(--ease); }
.valley__caption.is-leaving { opacity: 0; filter: blur(8px); }
.vline { display: inline; animation: vline-in 700ms var(--ease) both; }
@keyframes vline-in { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
.valley__hint { text-align: center; color: var(--c-cyan-text); font-size: var(--fs-meta); }

@media (max-width: 63.9375rem) {
  .valley-layout { grid-template-columns: 1fr; }
  .valley__viewport { height: 416px; min-height: 0; }
  .valley-step__name { font-size: var(--reading-size); }
}
@media (max-width: 42rem) {
  .slides__bar { gap: 8px; }
  .slides__tabs { gap: 8px; }
  .slides__tab { font-size: var(--fs-body); gap: 8px; }
  .slides__arrow { width: 40px; height: 40px; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vmark, .vmark--capital svg { transition: none; }
  .vmark--bastion.is-on i, .vline { animation: none; }
}

/* ── scroll.css ─────────────────────────────── */

.scrollzone { overscroll-behavior: contain; }
.scrollzone::-webkit-scrollbar { width: 12px; height: 12px; }
.scrollzone::-webkit-scrollbar-track { background: linear-gradient(90deg, transparent 5px, var(--c-border) 5px 6px, transparent 6px); }
.scrollzone--x::-webkit-scrollbar-track { background: linear-gradient(180deg, transparent 5px, var(--c-border) 5px 6px, transparent 6px); }
.scrollzone::-webkit-scrollbar-thumb { border: 4px solid transparent; background: linear-gradient(180deg, var(--c-gold-lit), var(--c-gold) 22%, var(--c-gold-deep)) padding-box; min-height: 48px; min-width: 48px; }
.scrollzone--x::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--c-gold-lit), var(--c-gold) 22%, var(--c-gold-deep)) padding-box; }
.scrollzone::-webkit-scrollbar-thumb:hover { border-width: 3px; background: linear-gradient(180deg, var(--c-gold-lit), var(--c-gold)) padding-box; }
.scrollzone::-webkit-scrollbar-thumb:active { border-width: 3px; background: linear-gradient(180deg, var(--c-blood-accent), var(--c-blood)) padding-box; }
.scrollzone::-webkit-scrollbar-button { display: none; }
.scrollzone::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { .scrollzone { scrollbar-width: thin; scrollbar-color: var(--c-gold) transparent; } }