@charset "UTF-8";
/* One atmosphere, from the launch tunnel through the reading room. */
:root{--signal:#b0e5ed;--signal-soft:#699da9;--field-ink:#dcebf1}
body{isolation:isolate}
.space-background{z-index:0;transition:opacity .9s;background:#000}
#galaxy-background{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.3s}
#galaxy-canvas,#glow-cursor-canvas{display:block;width:100%;height:100%;pointer-events:none}
body[data-scene="arrival"] #galaxy-background,body[data-scene="welcome"] #galaxy-background,body[data-scene="entering"] #galaxy-background,body[data-scene="reading"] #galaxy-background{opacity:1}
body.journey-arrived #galaxy-background{transition:opacity 2.6s .2s}
#glow-cursor{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden}
#glow-cursor-canvas{mix-blend-mode:screen}
body:not([data-scene="welcome"]):not([data-scene="entering"]):not([data-scene="reading"]) #glow-cursor,body.dialog-open #glow-cursor{visibility:hidden}
body[data-scene="tunnel"] .space-background,
body[data-scene="arrival"] .space-background,
body[data-scene="welcome"] .space-background,
body[data-scene="entering"] .space-background,
body[data-scene="reading"] .space-background{opacity:1}
body[data-scene="opening"] .space-background,
body[data-scene="blackout"] .space-background{opacity:0;transition:none}
#magazine{z-index:2}
.welcome-screen{background:transparent;overflow-x:hidden}
.nebula{background:radial-gradient(ellipse at 53% 54%,#1e5a7025,transparent 51%),radial-gradient(ellipse at 82% 20%,#28556813,transparent 38%);transform:none}
.planet-limb{transition:opacity 1.2s;opacity:.28}
body[data-scene="reading"] .planet-limb{opacity:.8}
#starfield{z-index:2}
#light-tunnel{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.orbital-line{border-color:#a1dbeb14;transition:opacity 1.2s;opacity:.7}
.orbit-one{width:115vw;height:43vw;left:-4vw;top:39vh;transform:rotate(-19deg)}
.orbit-two{width:109vw;height:39vw;left:2vw;top:42vh;transform:rotate(-19deg)}
.field-horizon{position:absolute;left:8%;right:8%;top:72%;height:1px;opacity:.35;background:linear-gradient(90deg,transparent,#8dc5d46b,transparent);transform:rotate(-19deg);transform-origin:50% 50%}
.field-corners{position:absolute;inset:19px;border:1px solid #8ab8c11c;clip-path:polygon(0 0,18px 0,18px 1px,1px 1px,1px 18px,0 18px,0 0,100% 0,100% 18px,calc(100% - 1px) 18px,calc(100% - 1px) 1px,calc(100% - 18px) 1px,calc(100% - 18px) 0,100% 0,100% 100%,calc(100% - 18px) 100%,calc(100% - 18px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 18px),100% calc(100% - 18px),100% 100%,0 100%,0 calc(100% - 18px),1px calc(100% - 18px),1px calc(100% - 1px),18px calc(100% - 1px),18px 100%,0 100%)}
.welcome-top,.welcome-bottom{left:4vw;right:4vw}
.welcome-top{top:25px}
.portal-brand{display:flex;align-items:baseline;font-size:29px;letter-spacing:-1.7px;color:#e6eff4;line-height:1;gap:5px}
.portal-brand>span{font-size:15px;letter-spacing:1px;font-weight:300}
.portal-brand>small{font:8px/1.2 Consolas,monospace;letter-spacing:1.4px;margin-left:20px;color:#71929d}
.welcome-tools{display:flex;align-items:center;gap:28px}
.welcome-tools button{color:#a7c2cb;font-size:10px}
.welcome-main{width:min(1040px,88vw);padding:102px 0 74px;user-select:none}
.welcome-kicker{margin-bottom:24px;color:#7eacb9;font:9px/1.5 Consolas,monospace;letter-spacing:3.7px}
.welcome-kicker i{background:#b2e6ee;box-shadow:0 0 12px #a1d9e666}
.welcome-main h1{font-size:clamp(34px,4.2vw,63px);font-weight:300;letter-spacing:1px;line-height:1.3;white-space:nowrap;color:#e3edf1}
.welcome-main h1>span{color:#b5dee9}
.welcome-line{margin:19px 0 17px;color:#93aab4;font-size:13px;letter-spacing:1.8px}
.duration-options{grid-template-columns:1fr 1fr;gap:clamp(35px,10vw,160px);width:min(760px,90%);max-width:none;margin:15px auto 0}
.duration-option{display:flex;flex-direction:column;gap:0;align-items:stretch;border:0;padding:0 0 15px;min-height:0;color:#dcebf1;position:relative;outline-offset:9px;isolation:isolate}
.duration-option:focus-visible{outline:1px solid #b7e9ef;outline-offset:9px}
.duration-option:not(:disabled):active .duration-meta{transform:translateY(2px)}
.duration-visual{display:block;width:100%;height:clamp(180px,25vh,260px);position:relative;pointer-events:none}
.number-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 clamp(145px,22vh,225px)/1 Arial,sans-serif;letter-spacing:-8px;color:#afdbe6;transition:opacity .3s}
.particles-ready .number-fallback{opacity:0}
.number-orbit{position:absolute;inset:6% -10%;border:1px solid #81c4d015;border-radius:50%;transform:rotate(-20deg) scaleY(.73);transition:border-color .6s,transform .8s;pointer-events:none}
.number-orbit:before{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#a7d6df;top:18%;left:9%;box-shadow:0 0 9px #a7d6df80}
.number-orbit:after{content:"";position:absolute;inset:13% -5%;border:1px solid #7ab4c118;border-radius:50%;transform:rotate(18deg)}
.duration-option:not(:disabled):hover .number-orbit,
.duration-option:not(:disabled):focus-visible .number-orbit{border-color:#81c4d04d;transform:rotate(-14deg) scaleY(.77)}
.duration-unit{font-size:11px;letter-spacing:2px;color:#a9c3cc;text-align:center;line-height:1.4;margin:0 0 24px}
.duration-unit i{font:8px/1 Consolas,monospace;letter-spacing:1px;font-style:normal;color:#547b89;margin-left:7px}
.duration-meta{display:flex;justify-content:space-between;align-items:center;padding:18px 1px 0;border-top:1px solid #85b6c541;position:relative;transition:transform .3s}
.duration-meta:before{content:"";height:1px;width:28px;position:absolute;top:-1px;left:0;background:#b8e4ed;transform-origin:left;transition:transform .6s}
.duration-option:not(:disabled):hover .duration-meta:before{transform:scaleX(2.2)}
.duration-copy{font-size:16px;font-weight:400;letter-spacing:1px}
.duration-copy small{color:#6f919e;font-size:10px;letter-spacing:.5px;margin-top:10px}
.duration-end{position:static;color:#acd8e4;font-size:24px}
.unavailable-duration{opacity:1;color:#94acb5}
.unavailable-duration .duration-meta{border-color:#7398a224}
.unavailable-duration .duration-meta:before{background:#658591}
.unavailable-duration .duration-copy small{color:#65808b}
.unavailable-duration .duration-unit{color:#7e9ba6}
.unavailable-duration .number-orbit{opacity:.55}
.unavailable-duration .number-fallback{color:#6e9baa}
.particle-hint{display:flex;justify-content:center;align-items:center;gap:17px;color:#5d7e8a;font-size:9px;letter-spacing:1.5px;margin-top:29px}
.particle-hint span{width:24px;height:1px;background:#72939c40}
.welcome-bottom{bottom:26px;font-size:8px;letter-spacing:1.6px;color:#658591}
.portal-signal{display:flex;gap:8px;align-items:center;font-size:10px;letter-spacing:.6px}
.portal-signal i{height:3px;width:3px;background:#a5dce7;border-radius:50%;animation:signal-breathe 3s ease-in-out infinite}
@keyframes signal-breathe{50%{opacity:.3;transform:scale(.75)}}
body[data-scene="welcome"] .welcome-kicker{animation:welcome-in 1s .1s both}
body[data-scene="welcome"] .welcome-main h1{animation:welcome-in 1.1s .25s both}
body[data-scene="welcome"] .welcome-line{animation:welcome-in 1s .4s both}
/* The canvased numbers are anchored to these boxes; never transform their parents. */
body[data-scene="welcome"] .duration-options{animation:choice-in 1.2s .55s both}
body[data-scene="welcome"] .particle-hint{animation:choice-in 1.2s 1.3s both}
@keyframes choice-in{from{opacity:0}to{opacity:1}}
body[data-scene="entering"] .welcome-main>h1,
body[data-scene="entering"] .welcome-kicker,
body[data-scene="entering"] .welcome-line,
body[data-scene="entering"] .duration-meta,
body[data-scene="entering"] .duration-unit,
body[data-scene="entering"] .number-orbit,
body[data-scene="entering"] .particle-hint,
body[data-scene="entering"] .welcome-top,
body[data-scene="entering"] .welcome-bottom{opacity:0;transition:opacity .35s}
body[data-scene="reading"] #magazine{animation:reading-arrival 1.35s cubic-bezier(.22,.65,.2,1) both}
@keyframes reading-arrival{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.topline{color:#7896a2}
.topline>span:first-child:before{content:"";display:inline-block;width:3px;height:3px;background:#aedbe4;border-radius:50%;margin-right:10px;vertical-align:middle;animation:signal-breathe 3s ease-in-out infinite}
.disc-shell.active:before,.disc-shell.active:after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1}
.disc-shell.active:before{inset:-19px;border:1px solid #9cd7e126;border-left-color:#b0e2ec6b;border-right-color:transparent;animation:disc-orbit 24s linear infinite}
.disc-shell.active:after{inset:-31px;border:1px dashed #76adb623;animation:disc-orbit 80s linear infinite reverse}
@keyframes disc-orbit{to{transform:rotate(360deg)}}
.disc-shell.active .disc-edge{box-shadow:2px 3px 0 #536575,3px 5px 0 #a9bac7,4px 6px 1px #475767,0 0 1px 1px #85b8dd55}
.open-chapter{border-color:#5b8b99;color:#b7dce6}
.nav-surface{border-color:#86c3d129;background:#07131ce6}
.nav-surface .brand span{font-family:Arial,sans-serif;letter-spacing:-2.5px;font-weight:400}
.nav-surface .brand b{font-family:var(--sans);font-size:14px}
.gallery-progress i{background:#abdce5;box-shadow:0 0 10px #89c6d066}
.chapter-info{background:linear-gradient(90deg,#040a11e8,#040a1190 80%,transparent)}
.reader-header{border-bottom-color:#7fbdca30}
.reader-header:after{content:"";position:absolute;bottom:-1px;left:4vw;width:80px;height:1px;background:#9bc9d1}
.reader-cover:after{content:"";position:absolute;inset:-10px;border:1px solid #8ebac52b;border-right-color:#9bceda75;border-radius:50%;pointer-events:none}
.space-motion-off *,.space-motion-off *:before,.space-motion-off *:after{animation:none!important;transition:none!important}
body.dialog-open .space-background *,body.dialog-open .disc-shell:before,body.dialog-open .disc-shell:after,body.page-inactive *{animation-play-state:paused!important}
.space-motion-off .number-orbit{transition:none}
@media(max-width:700px){
  .welcome-top,.welcome-bottom{left:7vw;right:7vw}
  .welcome-top{top:24px}
  .portal-brand{font-size:25px}
  .portal-brand>span{font-size:13px}
  .portal-brand>small{display:none}
  .welcome-tools{gap:17px}
  .welcome-tools button{font-size:9px}
  .welcome-main{width:86vw;padding:96px 0 90px}
  .welcome-main h1{font-size:clamp(28px,5.8vw,40px);white-space:normal;line-height:1.5;letter-spacing:.2px}
  .welcome-main h1>span{display:block}
  .welcome-kicker{font-size:8px;letter-spacing:2.5px;margin-bottom:20px}
  .welcome-line{font-size:11px;letter-spacing:1px;margin:18px 0 16px}
  .duration-options{width:100%;gap:27px;margin-top:8px}
  .duration-option{flex-wrap:nowrap}
  .duration-visual{height:clamp(155px,25vh,215px)}
  .number-fallback{font-size:140px;letter-spacing:-6px}
  .number-orbit{inset:16% 4%}
  .duration-unit{font-size:10px;letter-spacing:1px;margin-bottom:20px}
  .duration-unit i{font-size:7px;margin-left:4px}
  .duration-meta{padding-top:16px}
  .duration-copy{font-size:13px;letter-spacing:.5px}
  .duration-copy small{font-size:8px;letter-spacing:0;margin-top:9px}
  .duration-end{font-size:20px}
  .particle-hint{font-size:8px;letter-spacing:.4px;gap:10px;margin-top:26px}
  .particle-hint span{width:12px}
  .welcome-bottom{bottom:26px;font-size:6px;letter-spacing:.7px}
  .portal-signal{font-size:8px;letter-spacing:0}
  .field-corners{inset:12px;opacity:.6}
  .chapter-info{background:none}
  .disc-shell.active:before{inset:-12px}
  .disc-shell.active:after{inset:-22px}
}
@media(max-height:720px) and (min-width:701px){
  .welcome-main{padding:78px 0 62px}
  .welcome-kicker{margin-bottom:15px}
  .welcome-main h1{font-size:43px}
  .welcome-line{margin:14px 0 4px}
  .duration-visual{height:180px}
  .duration-unit{margin-bottom:14px}
  .duration-meta{padding-top:14px}
  .particle-hint{margin-top:16px}
}
@media(max-height:640px) and (max-width:700px){
  .welcome-main{padding:90px 0 85px}
  .welcome-kicker{margin-bottom:10px}
  .welcome-main h1{font-size:28px;line-height:1.3}
  .welcome-main h1>span{display:inline}
  .duration-visual{height:145px}
  .welcome-bottom{position:relative;margin:0 0 22px;left:auto;right:auto;justify-content:center}
  .welcome-bottom>span:first-child{display:none}
  .welcome-screen{display:block}
  .welcome-main{margin:auto;padding-bottom:22px}
}

/* The arrival is one overlapping sequence; nothing restarts on becoming interactive. */
body[data-scene="arrival"]{background:#000}
body.journey-arrived .welcome-main h1{animation:soft-emerge 1.8s 1s both}
body.journey-arrived .welcome-line{animation:soft-emerge 1.8s 1.3s both}
body.journey-arrived .duration-options{animation:soft-emerge 1.6s 1.25s both}
body.journey-arrived .welcome-controls{animation:soft-emerge 1.4s 1.6s both}
@keyframes soft-emerge{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){body.journey-arrived .welcome-main h1,body.journey-arrived .welcome-line,body.journey-arrived .duration-options,body.journey-arrived .welcome-controls{animation:none;filter:none}}
@media(hover:none){.particle-hint{visibility:hidden}}
@media(prefers-reduced-motion:reduce){
  .space-background,.planet-limb{transition:none}
  .particle-hint{visibility:hidden}
}

/* A quiet, typographic entrance after the spiral. Functional controls stay together. */
body[data-scene="tunnel"]{background:#000}
body[data-scene="tunnel"] .space-background{background:#000;transition:none}
body[data-scene="tunnel"] .space-background>:not(#starfield):not(#light-tunnel){opacity:0;transition:none}
.field-corners,.gallery-label{display:none}
.welcome-main{width:min(1000px,86vw);padding:65px 0 105px}
.welcome-main h1{font-family:"Microsoft YaHei UI","PingFang SC","Microsoft YaHei",sans-serif;white-space:normal;line-height:1.2;letter-spacing:0;font-weight:300}
.welcome-main h1>.welcome-pretitle{display:block;color:#99aeb8;font-size:19px;font-weight:300;letter-spacing:.35em;line-height:1.5;padding-left:.35em;margin-bottom:18px}
.welcome-main h1>.welcome-world{display:block;color:#d9eaf0;font-size:clamp(45px,5.1vw,72px);font-weight:300;letter-spacing:.07em;line-height:1.2}
.welcome-world b{font-family:Arial,sans-serif;font-weight:300;letter-spacing:-.055em;margin-right:.03em;color:#d9eaf0}
.welcome-line{font-size:12px;font-weight:300;letter-spacing:.18em;color:#7f9ba8;margin:24px 0 17px}
.duration-options{margin-top:16px}
.duration-unit{font-size:11px;letter-spacing:.2em;color:#a1c0cb;margin-bottom:13px}
.duration-meta{border:0;padding-top:9px;justify-content:center;text-align:center}
.duration-meta:before{display:none}
.duration-copy{font-size:14px;letter-spacing:.15em;line-height:1.5}
.duration-copy small{font-size:9px;letter-spacing:.06em;margin-top:7px;color:#658492}
.unavailable-duration .duration-copy{color:#8ca7b2}
.duration-option:not(:disabled):hover .duration-copy,.duration-option:not(:disabled):focus-visible .duration-copy{color:#d5f2f6}
.welcome-controls{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:23px;align-items:center;justify-content:center;white-space:nowrap}
.welcome-controls button{font-size:9px;letter-spacing:.08em;min-height:44px;color:#5d7a87;transition:color .25s}
.welcome-controls button:hover{color:#a9d1dd}
.welcome-controls>span{width:1px;height:9px;background:#35535e}
body[data-scene="entering"] .welcome-controls{opacity:0;transition:opacity .25s}
body[data-scene="welcome"] .welcome-main h1{animation:welcome-in 1.3s .2s both}
body[data-scene="welcome"] .welcome-line{animation:welcome-in 1.2s .45s both}
@media(max-width:700px){
  .welcome-main{padding:70px 0 120px}
  .welcome-main h1>.welcome-pretitle{font-size:17px;letter-spacing:.3em;margin-bottom:19px}
  .welcome-main h1>.welcome-world{font-size:clamp(40px,7.6vw,54px);letter-spacing:.045em}
  .welcome-line{font-size:11px;letter-spacing:.12em;margin:24px 0 24px}
  .duration-options{gap:27px;margin-top:12px}
  .duration-unit{font-size:10px;margin-bottom:14px}
  .duration-copy{font-size:13px;letter-spacing:.1em}
  .duration-copy small{font-size:8px;letter-spacing:0}
  .welcome-controls{bottom:28px}
}
@media(max-height:720px) and (min-width:701px){
  .welcome-main{padding:50px 0 100px}
  .welcome-main h1>.welcome-pretitle{font-size:16px;margin-bottom:13px}
  .welcome-main h1>.welcome-world{font-size:55px}
  .welcome-line{margin:20px 0 10px}
  .duration-visual{height:180px}
}
@media(max-height:640px) and (max-width:700px){
  .welcome-main{padding:50px 0 25px}
  .welcome-main h1>.welcome-pretitle{font-size:15px;margin-bottom:12px}
  .welcome-main h1>.welcome-world{font-size:38px}
  .welcome-line{margin:18px 0 8px}
  .welcome-controls{position:relative;left:auto;bottom:auto;transform:none;margin:0 auto 18px}
}