:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

.site-head { margin-bottom: -61px; background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .35s ease, border-color .35s ease; }
.site-head.solid { background: rgba(12, 22, 96, 0.82); border-bottom-color: var(--rule); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); }
.brand { font-size: 21px; letter-spacing: -0.035em; }
.site-head .brand { display: none; }
.site-head .wrap { justify-content: flex-end; }
.journey .close { display: none; }
.journey .hero { height: 1200vh; }

.journey .site-foot { padding-block: 18px 22px; border-top: 1px solid rgba(255,255,255,.18); }
.journey .site-foot .wrap { row-gap: 6px; align-items: baseline; }
@media (max-width: 900px) {   
  .journey .site-foot { padding-block: 13px 15px; }
  .journey .site-foot .wrap { row-gap: 4px; font-size: 11px; }
  .journey .site-foot .brand { grid-column: 1 / 7; font-size: 15px; }
  .journey .site-foot .copy { grid-column: 7 / 13; text-align: right; }
  .journey .site-foot .sec { grid-column: 1 / -1; order: 3; }
}
.hero, .stage { overflow-anchor: none; }      

.hero { position: relative; height: 2000vh; border-bottom: 0; background: #1230c4; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background:
  radial-gradient(70% 80% at 12% 24%, #38e6e0 0%, rgba(56,230,224,0) 60%),
  radial-gradient(70% 70% at 90% 36%, #ff4d94 0%, rgba(255,77,148,0) 62%),
  radial-gradient(80% 70% at 60% 104%, #7f43fa 0%, rgba(127,67,250,0) 62%),
  #1736e6; }
@supports (height: 1dvh) { .stage { height: 100dvh; } }
.backdrop { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
.backdrop.gl-on { opacity: 1; }

.world { position: absolute; inset: 0; visibility: hidden; opacity: 0; will-change: opacity; background: radial-gradient(80% 80% at 20% 20%, #38e6e0 0%, rgba(56,230,224,0) 60%), radial-gradient(80% 80% at 90% 80%, #ff4d94 0%, rgba(255,77,148,0) 62%), #2a44f0; }
.world-img, .world-gl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.world-img { object-fit: cover; object-position: 50% 50%; opacity: 0; }
.world-img[data-scene="0"] { opacity: 1; }
.world-gl { opacity: 0; transition: opacity .5s ease; }
.world-film { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; visibility: hidden; }
.gl-scene .world-gl { opacity: 1; }
.world-shade { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; background:
  linear-gradient(90deg, rgba(3,6,12,.62) 0%, rgba(3,6,12,.28) 34%, rgba(3,6,12,0) 60%),
  linear-gradient(0deg, rgba(3,6,12,.6) 0%, rgba(3,6,12,0) 26%),
  linear-gradient(180deg, rgba(3,6,12,.42) 0%, rgba(3,6,12,0) 18%); }

.stage { --deep: 0; --dock: 0; --line: 1; }
.canvas-light { position: absolute; inset: 0; overflow: hidden; background: #8ea4ff; opacity: calc(1 - var(--deep)); }
.canvas-light::before { content: ""; position: absolute; inset: -12%; background:
    radial-gradient(70% 80% at 12% 24%, #7fefe8 0%, rgba(127,239,232,0) 60%),
    radial-gradient(70% 70% at 90% 36%, #ff9ccb 0%, rgba(255,156,203,0) 62%),
    radial-gradient(80% 70% at 60% 104%, #b89dff 0%, rgba(184,157,255,0) 62%);
  animation: canvas-drift 22s ease-in-out infinite alternate; }
@keyframes canvas-drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2.5%, 0) scale(1.06); } }

.wm-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; will-change: transform, opacity; }
.stage.run .wm-wrap { left: 0; top: 0; transform-origin: 0 0; }
.wm { position: relative; margin: 0; font-family: var(--brand); font-weight: 700; letter-spacing: -0.035em; line-height: 1; white-space: nowrap;
  font-size: clamp(64px, 17.5vw, 300px);
  animation: wm-float 7s ease-in-out infinite alternate; }

.wm-g { display: block; position: relative; will-change: opacity; opacity: calc(1 - var(--dock));
  filter: drop-shadow(0 .16em .16em rgba(92, 64, 220, .34)) drop-shadow(0 .03em .03em rgba(40, 60, 200, .30)); }

.stage.wm-hold .wm, .stage.wm-hold .wm .ink, .stage.wm-hold .canvas-light::before { animation-play-state: paused; }
@keyframes wm-float { from { transform: translateY(-.014em); } to { transform: translateY(.014em); } }
.ink { display: block; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ink + .ink { position: absolute; left: 0; top: 0; }
.ink-d1 { --i: 1; } .ink-d2 { --i: 2; } .ink-d3 { --i: 3; } .ink-d4 { --i: 4; } .ink-d5 { --i: 5; } .ink-d6 { --i: 6; } .ink-d7 { --i: 7; }
.wm .ink { --ink: linear-gradient(100deg, #00c9c2 0%, #1f5cff 17%, #7c3aff 33%, #ff2f86 50%, #7c3aff 67%, #1f5cff 83%, #00c9c2 100%); }
.wm .ink-depth, .wm .ink-face { background-image: var(--ink); background-size: 200% 100%; animation: wm-ink 16s ease-in-out infinite alternate; }
@keyframes wm-ink { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.ink-depth { filter: brightness(.74) saturate(1.25); transform: translateY(calc(var(--i) * .0105em)); }
.ink-shine { background-image: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.20) 24%, rgba(255,255,255,0) 46%, rgba(255,255,255,0) 78%, rgba(255,255,255,.26) 100%); }
.ink-sweep { background-image: linear-gradient(105deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 64%); background-size: 300% 100%; background-repeat: no-repeat; animation: wm-sweep 13s ease-in-out infinite; }
@keyframes wm-sweep { 0% { background-position: 150% 0; } 62%, 100% { background-position: -50% 0; } }
.ink-edge { background: none; -webkit-text-stroke: .009em rgba(255,255,255,.9); }
.ink-white { position: absolute; left: 0; top: 0; background: none; color: #fff; -webkit-text-fill-color: #fff; opacity: var(--dock); will-change: opacity; }
.wm-line { position: absolute; left: 50%; top: calc(50% + 11vw); margin: 0; width: max-content; max-width: 86vw; text-align: center; text-wrap: balance; transform: translateX(-50%); opacity: var(--line); z-index: 6; pointer-events: none;
  font-family: var(--ui); font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; font-size: clamp(16px, 2.2vw, 28px); color: #4b3fd6; }

.rig { position: absolute; inset: 0; display: grid; grid-template: 100% / 100%; place-items: center; perspective: 1400px; z-index: 4; pointer-events: none; }   
.ph { --k: 1; --w: calc(min(56vw, 43vh, 520px) * var(--k)); --r: calc(var(--w) * .168); --t: calc(var(--w) * .112);
  position: relative; width: var(--w); aspect-ratio: 78 / 163.4; transform-style: preserve-3d; will-change: transform, opacity; opacity: 0; visibility: hidden; }
.ph.live { pointer-events: auto; }
.ph > * { position: absolute; box-sizing: border-box; }
.ph-full { inset: 0; border-radius: var(--r); }
.ph-cast { inset: 4% -10% -8% 14%; border-radius: 46%; background: rgba(6, 8, 70, .62); filter: blur(calc(var(--w) * .11)); transform: translateZ(calc(var(--t) * -3.6)) translateY(7%); }
.ph-slice { transform: translateZ(calc(var(--t) * var(--z) * -1)); background: linear-gradient(100deg, hsl(225 6% calc(var(--l) + 7%)) 0%, hsl(225 6% var(--l)) 52%, hsl(228 8% calc(var(--l) - 3%)) 100%); }
.ph-backplate { transform: translateZ(calc(var(--t) * -1)); background: linear-gradient(135deg, #2b2d33 0%, #101114 45%, #07080a 100%); }
.ph-lip { background: linear-gradient(128deg, #8b8f99 0%, #34363c 10%, #111215 46%, #2c2e34 86%, #777b85 100%); }
.ph-bezel { inset: calc(var(--w) * .011); border-radius: calc(var(--r) - var(--w) * .011); background: #020203; transform: translateZ(.6px); }
.ph-display { inset: calc(var(--w) * .031); border-radius: calc(var(--r) - var(--w) * .031); overflow: hidden; transform: translateZ(1.2px); color: #fff; background:
    radial-gradient(64% 40% at 14% 12%, #46efe8 0%, rgba(70,239,232,0) 64%),
    radial-gradient(60% 40% at 96% 30%, #ff5c9d 0%, rgba(255,92,157,0) 66%),
    radial-gradient(80% 46% at 34% 76%, #8e56ff 0%, rgba(142,86,255,0) 68%),
    radial-gradient(60% 36% at 100% 100%, #33b5ff 0%, rgba(51,181,255,0) 64%),
    linear-gradient(170deg, #2a52ff 0%, #2334d8 100%); }
.ph-display::before, .ph-display::after { content: ""; position: absolute; border-radius: 50%; filter: blur(calc(var(--w) * .075)); opacity: .82; }
.ph-display::before { left: -34%; top: 24%; width: 160%; height: 20%; transform: rotate(-26deg); background: linear-gradient(90deg, rgba(56,230,224,0), #7df7f1 30%, #86a2ff 62%, rgba(127,67,250,0)); }
.ph-display::after { left: -24%; top: 55%; width: 160%; height: 17%; transform: rotate(19deg); background: linear-gradient(90deg, rgba(255,77,148,0), #ff86ba 34%, #c29bff 70%, rgba(127,67,250,0)); }
.ph-status { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--w) * .14); display: flex; align-items: center; justify-content: space-between; padding: 0 9.5% 0 11%; z-index: 5;
  font-family: var(--ui); font-weight: 700; font-size: calc(var(--w) * .046); letter-spacing: -0.01em; color: #fff; transition: color .25s ease; }
.ph-display.app-on .ph-status { color: #f2f5ff; }
.ph-icons { display: flex; align-items: center; gap: calc(var(--w) * .016); }
.ph-sig { display: flex; align-items: flex-end; gap: calc(var(--w) * .0055); height: calc(var(--w) * .032); }
.ph-sig i { width: calc(var(--w) * .0085); background: currentColor; border-radius: 1px; }
.ph-sig i:nth-child(1) { height: 40%; } .ph-sig i:nth-child(2) { height: 60%; } .ph-sig i:nth-child(3) { height: 80%; } .ph-sig i:nth-child(4) { height: 100%; }
.ph-batt { width: calc(var(--w) * .066); height: calc(var(--w) * .032); border-radius: calc(var(--w) * .01); border: 1px solid currentColor; position: relative; opacity: .9; }
.ph-batt::before { content: ""; position: absolute; inset: 1px; right: 22%; border-radius: calc(var(--w) * .006); background: currentColor; }
.ph-island { position: absolute; left: 50%; top: calc(var(--w) * .028); width: 29%; height: calc(var(--w) * .084); margin-left: -14.5%; border-radius: 99px; background: #020203; z-index: 6; }
.ph-island::after { content: ""; position: absolute; right: 12%; top: 50%; width: calc(var(--w) * .028); height: calc(var(--w) * .028); margin-top: calc(var(--w) * -.014); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2c4a7a, #070b16 70%); }
.ph-homebar { position: absolute; left: 50%; bottom: calc(var(--w) * .02); width: 34%; height: calc(var(--w) * .012); margin-left: -17%; border-radius: 99px; background: currentColor; opacity: .9; z-index: 5; color: #fff; transition: color .25s ease; }
.ph-display.app-on .ph-homebar { color: #f2f5ff; }
.ph-glare { inset: calc(var(--w) * .011); border-radius: calc(var(--r) - var(--w) * .011); transform: translateZ(1.8px); pointer-events: none;
  background: linear-gradient(116deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 20%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 78%, rgba(255,255,255,.07) 100%); }
.ph-key { right: 0; width: calc(var(--t) * .36); border-radius: calc(var(--t) * .16); transform-origin: right center;
  transform: translateX(1.6px) translateZ(calc(var(--t) * -.32)) rotateY(-90deg); background: linear-gradient(180deg, #70747d 0%, #2b2d33 22%, #1d1f23 78%, #5b5f68 100%); }
.ph-key-power { top: 27.5%; height: 11%; }
.ph-key-cam { top: 57%; height: 6.6%; transform: translateX(.4px) translateZ(calc(var(--t) * -.32)) rotateY(-90deg); background: linear-gradient(180deg, #3a3c42 0%, #0c0d10 30%, #0c0d10 70%, #34363c 100%); }
.ph-app { position: absolute; inset: 0; z-index: 2; color: #f2f5ff; opacity: 0; will-change: clip-path, opacity;
  background: radial-gradient(90% 50% at 100% 0%, rgba(255,92,157,.20) 0%, rgba(255,92,157,0) 60%), radial-gradient(90% 50% at 0% 100%, rgba(70,239,232,.26) 0%, rgba(70,239,232,0) 60%), linear-gradient(170deg, #0a0c16 0%, #0c1022 60%, #10152e 100%); }

.ph-app-body { position: absolute; left: 8%; right: 8%; top: calc(var(--w) * .36); display: grid; gap: calc(var(--w) * .03); opacity: 0; visibility: hidden; color: inherit; }
.ph-app-body p { margin: 0; }
.ph-app-q { font-family: var(--display); font-weight: 600; font-size: calc(var(--w) * .118); line-height: 1.02; letter-spacing: -0.035em; }
.ph-app-sub { font-family: var(--ui); font-weight: 500; font-size: calc(var(--w) * .054); line-height: 1.3; color: #fff; }
.ph-app-field, .ph-app-in { display: block; width: 100%; min-width: 0; margin: 0; border: 2px solid rgba(255,255,255,.62); background: rgba(255,255,255,.13); color: #fff; outline: 0; resize: none;
  font-family: var(--ui); font-weight: 500; font-size: calc(var(--w) * .054); line-height: 1.3; transition: border-color .2s ease, box-shadow .2s ease; }
.ph-app-field { border-radius: calc(var(--w) * .05); padding: calc(var(--w) * .038) calc(var(--w) * .042); height: calc(var(--w) * .26); box-shadow: 0 calc(var(--w) * .03) calc(var(--w) * .07) rgba(0,0,0,.30); }
.ph-app-in { border-radius: calc(var(--w) * .04); padding: calc(var(--w) * .03) calc(var(--w) * .042); }
.ph-app-field::placeholder, .ph-app-in::placeholder { color: #fff; opacity: .92; }
.ph-app-field:focus-visible, .ph-app-in:focus-visible { border-color: #fff; background: rgba(255,255,255,.2); box-shadow: 0 0 0 3px rgba(255,255,255,.32); }
.ph-app-field[aria-invalid="true"], .ph-app-in[aria-invalid="true"] { border-color: #ff7fb0; box-shadow: 0 0 0 3px rgba(255,127,176,.35); }
.ph-app-status { min-height: 2.6em; font-family: var(--ui); font-weight: 500; font-size: calc(var(--w) * .042); line-height: 1.3; color: #fff; }
.ph-app-status.err { color: #ffc2da; font-weight: 700; }

@media (hover: none) and (pointer: coarse) { .ph-app-field, .ph-app-in { font-size: max(16px, calc(var(--w) * .054)); } }
.ph-app-send { justify-self: stretch; text-align: center; border: 0; cursor: pointer; border-radius: 99px; padding: calc(var(--w) * .044) calc(var(--w) * .06); color: #fff; font-family: var(--ui); font-weight: 700; font-size: calc(var(--w) * .062);
  background: linear-gradient(100deg, #1f5cff 0%, #7c3aff 60%, #ff2f86 100%); box-shadow: 0 calc(var(--w) * .025) calc(var(--w) * .06) rgba(90,60,220,.35); transition: transform .15s ease, filter .15s ease; }
.ph-app-send:hover { filter: brightness(1.12); }
.ph-app-send:active { transform: scale(.97); }
.ph-app-send:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ph-logo { position: absolute; left: 0; top: 0; z-index: 4; transform-origin: 0 0; will-change: transform; border: 0; background: none; font: inherit; cursor: pointer; padding: calc(var(--w) * .032) calc(var(--w) * .046) calc(var(--w) * .04); }
.ph-logo::before { content: ""; position: absolute; inset: 0; border-radius: calc(var(--w) * .062); opacity: var(--plate, 1);
  background: linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.66)); border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 calc(var(--w) * .022) calc(var(--w) * .055) rgba(20, 20, 120, .30), inset 0 1px 0 rgba(255,255,255,.95); }
.ph-mark { position: relative; display: block; margin: 0; font-family: var(--brand); font-weight: 700; letter-spacing: -0.035em; line-height: 1; white-space: nowrap;
  font-size: calc(var(--w) * .128); filter: drop-shadow(0 .09em .08em rgba(92, 64, 220, .30)); }
.ph-mark .ink { --ink: linear-gradient(100deg, #00c9c2 0%, #1f5cff 34%, #7c3aff 66%, #ff2f86 100%); }
.ph-mark .ink-depth, .ph-mark .ink-face { background-image: var(--ink); }

.ph-chat { position: absolute; left: 7%; right: 7%; top: calc(var(--w) * .30); bottom: calc(var(--w) * .34); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--w) * .03); opacity: 0; visibility: hidden; font-family: var(--ui); }
.ph-greet { margin: 0 0 auto; padding-top: calc(var(--w) * .14); font-family: var(--display); font-weight: 500; font-size: calc(var(--w) * .092); line-height: 1.08; letter-spacing: -0.03em; text-align: center; }
.ph-chat.talking .ph-greet { display: none; }
.ph-msg { max-width: 88%; margin: 0; padding: calc(var(--w) * .032) calc(var(--w) * .042); border-radius: calc(var(--w) * .05); font-weight: 500; font-size: calc(var(--w) * .052); line-height: 1.3; }
.ph-me { align-self: flex-end; color: #fff; background: linear-gradient(100deg, #1f5cff 0%, #7c3aff 100%); border-bottom-right-radius: calc(var(--w) * .014); }
.ph-it { align-self: flex-start; background: #161b2d; border: 1px solid #2a3350; border-bottom-left-radius: calc(var(--w) * .014); box-shadow: 0 calc(var(--w) * .014) calc(var(--w) * .04) rgba(0,0,0,.30); }
.ph-dots { display: inline-flex; gap: calc(var(--w) * .012); align-items: center; height: 1.3em; }
.ph-dots i { width: calc(var(--w) * .017); height: calc(var(--w) * .017); border-radius: 50%; background: #8c96c8; animation: ph-dot 1s ease-in-out infinite; }
.ph-dots i:nth-child(2) { animation-delay: .15s; } .ph-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ph-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-18%); } }
.ph-composer { position: absolute; left: 6%; right: 6%; bottom: calc(var(--w) * .075); display: flex; align-items: flex-end; gap: calc(var(--w) * .02); padding: calc(var(--w) * .03) calc(var(--w) * .03) calc(var(--w) * .03) calc(var(--w) * .045);
  border-radius: calc(var(--w) * .075); background: #141829; border: 1px solid #2a3350; box-shadow: 0 calc(var(--w) * .03) calc(var(--w) * .07) rgba(0,0,0,.35); opacity: 0; visibility: hidden; }
.ph-composer textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; background: transparent; color: #f2f5ff; padding: calc(var(--w) * .014) 0; min-height: calc(var(--w) * .12);
  font-family: var(--ui); font-weight: 500; font-size: calc(var(--w) * .052); line-height: 1.3; }
.ph-composer textarea::placeholder { color: #fff; opacity: .9; }

@media (hover: none) and (pointer: coarse) { .ph-composer textarea { font-size: max(16px, calc(var(--w) * .052)); } }
.ph-send { flex: none; width: calc(var(--w) * .1); height: calc(var(--w) * .1); min-width: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; display: grid; place-items: center; background: linear-gradient(120deg, #1f5cff 0%, #7c3aff 60%, #ff2f86 100%); }
.ph-send svg { width: 46%; height: 46%; }
.ph-hint { position: absolute; left: 0; right: 0; bottom: 17%; z-index: 3; margin: 0; text-align: center; pointer-events: none; font-family: var(--mono); font-size: calc(var(--w) * .042); letter-spacing: .12em; text-transform: uppercase; color: #fff; }

.chapters { position: absolute; inset: 0; pointer-events: none; }

.chapter { position: absolute; left: var(--edge); right: var(--edge); top: clamp(92px, 15vh, 170px); max-width: 1100px; visibility: hidden; transition: visibility 0s .6s; }
.chapter.on { visibility: visible; transition: visibility 0s; }

.ch-num { font-family: var(--ui); font-weight: 600; font-size: clamp(13px, 1.04vw, 15.5px); letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.94); display: flex; align-items: center; margin-bottom: clamp(16px, 1.6vw, 24px); opacity: 0; transition: opacity .5s ease; }
.ch-num b { display: flex; align-items: center; font-family: var(--display); font-weight: 420; font-size: clamp(30px, 2.7vw, 44px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums; color: #fff; text-shadow: 0 2px 24px rgba(3,6,12,.3); }
.ch-num b::after { content: ""; display: block; width: clamp(40px, 4.6vw, 76px); height: 1px; margin: 0 clamp(14px, 1.3vw, 20px); background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.3)); }
.ch-title { font-family: var(--display); font-weight: 560; color: #fff; font-size: clamp(42px, min(6.2vw, 12.5vh), 120px); line-height: 1; letter-spacing: -0.022em; margin: 0; text-shadow: 0 2px 40px rgba(3,6,12,.35); }

.ch-title .ln { display: block; padding: .09em 0 .16em; margin: -.02em 0 -.16em; }
.ch-title .ln > span { display: block; opacity: 0; transform: translateY(.22em); transition: opacity .55s ease, transform .85s var(--ease-out); }
.ch-title .ln:nth-child(2) > span { transition-delay: .07s; }
.ch-title .ln:nth-child(3) > span { transition-delay: .14s; }
.chapter.was { visibility: hidden; transition: visibility 0s .6s; }

.ch-cap { margin-top: 22px; font-size: clamp(18px, 1.52vw, 22.5px); font-weight: 700; line-height: 1.4; color: #fff; max-width: 34ch; opacity: 0; transform: translateY(10px); transition: opacity .6s ease .2s, transform .8s var(--ease-out) .2s; }
.chapter.on .ch-num { opacity: 1; }
.chapter.on .ln > span { opacity: 1; transform: none; }
.chapter.on .ch-cap { opacity: 1; transform: none; }
.chapter.was .ln > span { opacity: 0; transform: translateY(-.14em); transition-duration: .4s; transition-delay: 0s; }

.hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.hud-cue { position: absolute; left: var(--edge); bottom: 34px; display: flex; align-items: center; gap: 12px; transition: opacity .4s ease; }
.hud-cue i { width: 1px; height: 34px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; display: block; }
.hud-cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: #fff; animation: cue 2.2s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes cue { 0% { transform: translateY(-14px); } 100% { transform: translateY(34px); } }
.stage:not([data-chapter="idea"]) .hud-cue { opacity: 0; }
.stage[data-chapter="idea"] .hud-cue { opacity: var(--line); color: rgba(70,60,190,.85); }
.stage[data-chapter="idea"] .hud-cue i { background: rgba(70,60,190,.35); }
.stage[data-chapter="idea"] .hud-cue i::after { background: #4b3fd6; }
.hud-idea { position: absolute; left: var(--edge); bottom: 34px; max-width: min(520px, 62vw); display: flex; gap: 14px; align-items: baseline; opacity: 0; transition: opacity .5s ease; }
.hud-idea b { font-weight: 500; color: rgba(255,255,255,.6); flex: none; }
.hud-idea span { text-transform: none; letter-spacing: .01em; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage:not([data-chapter="idea"]) .hud-idea { opacity: 1; }
.hud-idea[hidden] { display: none; }
.stage[data-chapter="end"] .hud-idea { opacity: 0; }
.rail { opacity: var(--deep); position: absolute; right: var(--edge); top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; justify-items: end; }
.rail li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.5); transition: color .3s ease; }
.rail li span { font-size: 10.5px; opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .4s var(--ease-out); }
.rail li::after { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .4s var(--ease-out); }
.rail li.on { color: #fff; }
.rail li.on span { opacity: 1; transform: none; }
.rail li.on::after { width: 34px; }

.close { position: relative; z-index: 2; margin-top: -100vh; min-height: 100vh; display: grid; align-items: center; padding-block: clamp(96px, 12vw, 160px);
  border-top: 1px solid rgba(255,255,255,.18); box-shadow: 0 -40px 80px rgba(6,10,60,.45);
  background: radial-gradient(60% 70% at 100% 0%, rgba(255,77,148,.5) 0%, rgba(255,77,148,0) 62%), radial-gradient(55% 70% at 0% 100%, rgba(56,230,224,.4) 0%, rgba(56,230,224,0) 62%), linear-gradient(160deg, #1736e6 0%, #2a1fb4 52%, #5a2bd6 100%); }
.close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.close-head { display: grid; gap: 22px; }
.close-head h2 { font-family: var(--display); font-size: clamp(40px, 5.4vw, 92px); line-height: 1; letter-spacing: -0.02em; }
.close form.book { grid-column: auto; }
.proof { margin: 0; max-width: 34ch; padding: 4px 0 4px 16px; border-left: 2px solid var(--signal); font-family: var(--ui); font-weight: 500; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; color: var(--ink); }
.close-by { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 900px) { .close-grid { grid-template-columns: 1fr; } }

@media (max-aspect-ratio: 4/5) {
  .ph { --w: calc(min(82vw, 43vh, 520px) * var(--k)); }
  @supports (height: 1dvh) { .ph { --w: calc(min(82vw, 43dvh, 520px) * var(--k)); } }
  .world-shade { background: linear-gradient(180deg, rgba(3,6,12,.38) 0%, rgba(3,6,12,0) 14%), linear-gradient(0deg, rgba(10,20,70,.82) 0%, rgba(10,20,70,.5) 24%, rgba(10,20,70,0) 48%); }
  .chapter { top: auto; bottom: 96px; }
  .ch-title { font-size: clamp(34px, 10.4vw, 80px); }
  .ch-cap { margin-top: 14px; }
  .rail { top: 30%; }
  .hud-idea { bottom: 28px; max-width: 78vw; }
  .hud-cue { bottom: 28px; }
}
@media (max-width: 640px) {
  .rail li span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .stage { position: relative; height: auto; min-height: 100vh; display: grid; }
  .stage { --deep: 1; --dock: 1; --line: 1; }
  .canvas-light, .rig { display: none; }
  .wm-wrap { position: relative; left: auto; top: auto; transform: none; padding: 120px var(--gutter) 0; }
  .wm { animation: none; font-size: clamp(48px, 13vw, 160px); }
  .wm .ink-depth, .wm .ink-face, .ink-sweep { animation: none; }
  .wm-line { position: relative; left: auto; top: auto; transform: none; width: auto; max-width: 30ch; text-align: left; margin: 18px var(--gutter) 56px; color: #fff; }
  .world { position: relative; inset: auto; visibility: visible; opacity: 1; height: 80vh; }
  .world-shade { opacity: 1; }
  .chapters { position: relative; inset: auto; display: grid; gap: 48px; padding: 56px var(--gutter) 72px; background: #1230c4; }
  .chapter { position: relative; left: auto; right: auto; top: auto; bottom: auto; visibility: visible; }
  .ch-num, .ch-cap { opacity: 1; transform: none; }
  .ch-title .ln > span { opacity: 1; transform: none; }
  .hud { display: none; }
  .close { margin-top: 0; }
  .hud-cue i::after { animation: none; }
}

.plabel { display: none !important; }