@font-face{ font-family:'Be Vietnam Pro'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/be-vietnam-pro-latin-400.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Be Vietnam Pro'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/be-vietnam-pro-vietnamese-400.woff2') format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face{ font-family:'Be Vietnam Pro'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/be-vietnam-pro-latin-500.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Be Vietnam Pro'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/be-vietnam-pro-vietnamese-500.woff2') format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face{ font-family:'Be Vietnam Pro'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/be-vietnam-pro-latin-600.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Be Vietnam Pro'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/be-vietnam-pro-vietnamese-600.woff2') format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face{ font-family:'Be Vietnam Pro'; font-style:normal; font-weight:700 900; font-display:swap; src:url('../fonts/be-vietnam-pro-latin-700.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Be Vietnam Pro'; font-style:normal; font-weight:700 900; font-display:swap; src:url('../fonts/be-vietnam-pro-vietnamese-700.woff2') format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

:root{
  --disp: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
  --mono: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;

  --uiA: 1;

  --edge: clamp(18px, 3.4vw, 56px);
  --hair: 1px;

  --t-title:   clamp(58px, 7.9vw, 138px);
  --t-body:    clamp(19px, 1.58vw, 27px);
  --t-sub:     clamp(14px, 1.14vw, 20px);
  --t-meta:    clamp(14px, 1.02vw, 18px);
  --t-nav:     clamp(14px, 1.06vw, 18px);
  --t-alt:     clamp(44px, 4.9vw, 78px);

  --zone-high: 15vh;
  --zone-mid:  50%;
  --zone-low:  13vh;

  --shA: .46;

  --e-out: cubic-bezier(.16,.84,.3,1);
  --e-in : cubic-bezier(.7,0,.84,0);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; overscroll-behavior:none; }
html{
  background:#070b10;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  position:fixed; inset:0; width:100%;
  font-family:var(--disp);
  color:rgb(255 255 255 / .96);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{ background:rgb(255 255 255 / .85); color:#070b10; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:focus-visible{
  outline:2px solid rgb(255 255 255 / .92);
  outline-offset:5px;
}

#stage{
  position:fixed; inset:0;
  z-index:0;
  background:linear-gradient(#0d151f, #060a0f 70%);
}
#gl{ display:block; width:100%; height:100%; }

#scroll{
  position:fixed; inset:0;
  z-index:1;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:none;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
#scroll::-webkit-scrollbar{ display:none; width:0; height:0; }
#scroll > section{
  height:calc(var(--len, 1000vh) / 6);
  position:relative;
}
.sr{
  position:absolute; width:1px; height:1px;
  padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

#ui{
  position:fixed; inset:0; z-index:3;
  pointer-events:none;
  opacity:var(--uiA);
  transition:opacity .5s linear;
  will-change:opacity;
}
.halo{
  text-shadow:
    0 2px 14px rgb(4 8 14 / var(--shA)),
    0 0 34px rgb(4 8 14 / calc(var(--shA) * .55)),
    0 1px 2px rgb(4 8 14 / calc(var(--shA) + .22));
}

#alt{
  position:absolute;
  top:var(--edge); left:var(--edge);
  display:flex; flex-direction:column;
  gap:.2em;
}
#altN{
  display:block;
  font-family:var(--mono);
  font-weight:250;
  font-size:var(--t-alt);
  line-height:.92;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.alt-row{
  display:flex; align-items:baseline; gap:1.2em;
  font-family:var(--mono);
  font-size:var(--t-meta);
  font-weight:300;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:rgb(255 255 255 / .80);
  padding-left:.16em;
  margin-top:.35em;
}
#altG{ letter-spacing:.18em; }
#altO2{
  letter-spacing:.24em;
  opacity:0;
}

#tag{
  position:absolute;
  top:var(--edge); right:var(--edge);
  display:flex; align-items:center; gap:1em;
  font-family:var(--mono);
  font-size:var(--t-meta);
  font-weight:300;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgb(255 255 255 / .82);
}
#tag i{ display:block; width:26px; height:var(--hair); background:currentColor; opacity:.6; }
#tagT{ transition:opacity .35s linear; }

#route{
  position:fixed;
  z-index:4;
  pointer-events:none;
  right:var(--edge);
  top:50%;
  transform:translateY(-50%);
  width:152px;
  height:min(52vh, 520px);
  opacity:var(--uiA);
  transition:opacity .5s linear;
}
#route svg{ position:absolute; inset:0 auto 0 0; width:56px; height:100%; overflow:visible; }
#routeLine{ fill:none; stroke:rgb(255 255 255 / .30); stroke-width:1.2; vector-effect:non-scaling-stroke; }
#routeDone{ fill:none; stroke:rgb(255 255 255 / .95); stroke-width:2; vector-effect:non-scaling-stroke;
            stroke-linecap:round;
            filter:drop-shadow(0 1px 3px rgb(4 8 14 / .55)); }

#routeBtns{ position:absolute; inset:0; pointer-events:none; }
#routeBtns a{
  position:absolute;
  right:0;
  transform:translateY(-50%);
  display:flex; align-items:center; justify-content:flex-end;
  gap:.95em;
  height:30px;
  padding-right:2px;
  font-family:var(--mono);
  font-size:var(--t-nav); font-weight:300;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  color:rgb(255 255 255 / .62);
  pointer-events:auto;
  transition:color .35s linear;
  white-space:nowrap;
  text-shadow:0 1px 3px rgb(4 8 14 / calc(var(--shA) + .18)), 0 0 16px rgb(4 8 14 / var(--shA));
}
#routeBtns a .tick{
  display:block; width:12px; height:2px;
  background:currentColor; flex:none;
  transition:width .4s var(--e-out);
}
#routeBtns a:hover,
#routeBtns a:focus-visible{ color:rgb(255 255 255 / .98); }
#routeBtns a:hover .tick{ width:24px; }
#routeBtns a[data-on="1"]{ color:rgb(255 255 255 / 1); }
#routeBtns a[data-on="1"] .tick{ width:26px; height:2px; }

#routeMark{
  position:absolute; right:0; width:34px; height:2px;
  background:rgb(255 255 255 / .98);
  box-shadow:0 1px 4px rgb(4 8 14 / .6);
  transform:translateY(-50%);
  will-change:top;
}

#chapters{ position:absolute; inset:0; }
.ch{
  position:absolute; inset:0;
  opacity:0;
  will-change:opacity;
}
.blk{
  position:absolute;
  left:var(--edge);
  width:clamp(320px, 34vw, 640px);
  padding:0.34em clamp(20px, 3vw, 72px) 0.34em 0;
}
.ch .blk{ bottom:var(--zone-low); top:auto; transform:none; }

.ch-idx{
  font-family:var(--mono);
  font-size:var(--t-meta);
  font-weight:300;
  letter-spacing:.42em;
  color:rgb(255 255 255 / .72);
  margin-bottom:1.35em;
}
.ch-t{
  display:block;
  font-family:var(--disp);
  font-weight:420;
  font-stretch:88%;
  font-size:var(--t-title);
  letter-spacing:.008em;
  line-height:.92;
  text-transform:uppercase;
  white-space:nowrap;
  color:rgb(255 255 255 / .96);
}
.ch-t .l{ display:inline-block; will-change:transform, opacity, filter; }
.ch-t .sp{ display:inline-block; width:.3em; }
.ch-s{
  font-family:var(--mono);
  font-size:var(--t-sub);
  font-weight:300;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:rgb(255 255 255 / .86);
  margin-top:1.15em;
  text-wrap:nowrap;
}
.ch-p{
  font-family:var(--disp);
  font-weight:360;
  font-size:var(--t-body);
  line-height:1.52;
  letter-spacing:.004em;
  max-width:40ch;
  color:rgb(255 255 255 / .86);
  margin-top:1.5em;
  text-wrap:balance;
}

#hint{
  position:absolute; left:50%; bottom:calc(var(--edge) + .4vh);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:1em;
  font-family:var(--mono); font-size:var(--t-meta); font-weight:300;
  letter-spacing:.38em; text-transform:uppercase;
  color:rgb(255 255 255 / .80);
  opacity:0; transition:opacity .9s linear;
}
#hint b{ font-weight:300; text-indent:.42em; }
#hint .stem{ display:block; width:var(--hair); height:26px; background:currentColor;
  transform-origin:top; animation:stem 3.4s var(--e-out) infinite; }
@keyframes stem{ 0%,100%{ transform:scaleY(.25); opacity:.25 } 45%{ transform:scaleY(1); opacity:.85 } 72%{ transform:scaleY(1); opacity:.1 } }

#descend{
  position:fixed; z-index:5;
  left:50%; bottom:calc(var(--edge) + .4vh);
  transform:translateX(-50%);
  display:flex; align-items:center; gap:1em;
  font-family:var(--mono); font-size:var(--t-nav); font-weight:300;
  letter-spacing:.34em; text-transform:uppercase;
  color:rgb(255 255 255 / .72);
  padding:.9em 1.2em;
  opacity:0; pointer-events:none;
  transition:opacity .8s linear, color .3s linear;
}
#descend[data-on="1"]{ opacity:1; pointer-events:auto; }
#descend:hover, #descend:focus-visible{ color:rgb(255 255 255 / 1); }
#descend .arr{ display:block; width:2px; height:18px; background:currentColor; }

#boot{
  position:fixed; inset:0; z-index:20;
  background:#070b10;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2.4em;
  transition:opacity 1.1s var(--e-out), visibility 0s linear 1.1s;
}
#boot[data-done="1"]{ opacity:0; visibility:hidden; pointer-events:none; }
#bootT{
  font-family:var(--disp); font-weight:400; font-stretch:82%;
  font-size:clamp(34px, 7vw, 92px);
  letter-spacing:.34em; text-indent:.34em;
  text-transform:uppercase;
  color:#dde7f0;
  opacity:.94;
}
#bootBar{ width:min(220px, 42vw); height:var(--hair); background:rgb(221 231 240 / .16); position:relative; overflow:hidden; }
#bootBar i{ position:absolute; inset:0 auto 0 0; width:0%; background:#dde7f0; transition:width .35s linear; }
#bootS{
  font-family:var(--mono); font-size:9px; font-weight:300;
  letter-spacing:.36em; text-transform:uppercase;
  color:rgb(221 231 240 / .42);
  min-height:1.2em;
}

#nogl{
  position:fixed; inset:0; z-index:30; overflow-y:auto;
  background:linear-gradient(#101a26, #070b10 60%);
  padding:clamp(24px,7vw,90px);
  color:#dde7f0;
}
#nogl h1{ font-weight:400; font-stretch:82%; letter-spacing:.3em; text-transform:uppercase;
  font-size:clamp(28px,6vw,64px); margin-bottom:1.4em; }
#nogl section{ max-width:62ch; margin-bottom:3em; }
#nogl h2{ font-family:var(--mono); font-size:11px; font-weight:300; letter-spacing:.34em;
  text-transform:uppercase; opacity:.6; margin-bottom:.9em; }
#nogl p{ font-size:17px; line-height:1.6; opacity:.82; }

@media (max-width: 1100px){
  :root{ --t-title: clamp(46px, 8.2vw, 96px); }
  #route{ width:126px; height:min(48vh, 400px); }
  #route svg{ width:44px; }
  .blk{ width:clamp(300px, 62vw, 560px); padding-right:clamp(16px, 4vw, 48px); }
}
@media (max-width: 820px){
  :root{
    --t-title: clamp(46px, 9.6vw, 86px);
    --t-body:  clamp(18px, 2.4vw, 23px);
    --t-sub:   clamp(13px, 1.8vw, 17px);
    --t-meta:  clamp(13px, 1.7vw, 16px);
    --t-nav:   clamp(13px, 1.7vw, 16px);
    --t-alt:   clamp(40px, 7.6vw, 62px);
    --zone-high: 13vh;
    --zone-low:  11vh;
  }
  #route{ width:104px; height:min(44vh, 340px); }
  #route svg{ width:34px; }
  #routeBtns a{ gap:.7em; letter-spacing:.16em; }
  .blk{ width:min(84vw, 520px); padding-right:clamp(12px, 4vw, 32px); }
  .ch-p{ max-width:34ch; }
  .ch-s{ text-wrap:wrap; }
}
@media (max-width: 560px){
  :root{
    --edge: clamp(16px, 5vw, 26px);
    --t-title: clamp(40px, 12.6vw, 66px);
    --t-body:  clamp(17px, 4.4vw, 20px);
    --t-sub:   clamp(12.5px, 3.3vw, 15px);
    --t-meta:  clamp(12px, 3.1vw, 14px);
    --t-nav:   clamp(12px, 3.1vw, 14px);
    --t-alt:   clamp(36px, 11vw, 50px);
    --zone-high: 15vh;
    --zone-low:  16vh;
  }
  #route{ width:78px; height:min(40vh, 320px); }
  #route svg{ width:24px; }
  #routeBtns a{ gap:.6em; letter-spacing:.1em; height:26px; }
  #routeBtns a .tick{ width:11px; }
  #routeBtns a:hover .tick,
  #routeBtns a[data-on="1"] .tick{ width:20px; }
  #routeMark{ width:24px; }

  .blk{ width:auto; right:calc(var(--edge) + 76px); padding-right:0; }
  .ch-p{ max-width:32ch; }
  .ch-s{ letter-spacing:.22em; }
  .ch-idx{ margin-bottom:1em; }
  .ch-s{ margin-top:.9em; }
  .ch-p{ margin-top:1.15em; }

  #hint{ bottom:calc(var(--edge) + .4vh); }
  #hint .stem{ height:22px; }
  #descend{ bottom:calc(var(--edge) + 1.4vh); }
}
@media (max-height: 620px){
  :root{ --zone-high: 10vh; --zone-low: 9vh; --t-title: clamp(38px, 6vw, 76px); }
  #route{ height:min(60vh, 300px); }
}

@media (prefers-reduced-motion: reduce){
  #scroll{ scroll-behavior:auto; }
  #hint .stem{ animation:none; opacity:.5; transform:scaleY(1); }
}