:root{--bg:#050504;--ink:#f3efe7;--muted:#86837d;--gold:#caa968;--gold-bright:#e1bf77;--line:rgba(202,169,104,.22);--panel:#12100b;--serif:"Noto Serif SC","Songti SC",STSong,serif;--sans:Inter,"Helvetica Neue",Arial,"Microsoft YaHei",sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-snap-type:y proximity}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden}button,a{color:inherit}button{font:inherit}a{text-decoration:none}::selection{background:var(--gold);color:#080704}
#stars{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.04;background:repeating-radial-gradient(circle at 30% 20%,#fff 0 1px,transparent 1px 4px);background-size:7px 9px;mix-blend-mode:soft-light}
.topbar{position:fixed;z-index:20;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:28px clamp(24px,4vw,70px);mix-blend-mode:difference}.brand{font-size:11px;letter-spacing:.32em;font-weight:600}.brand i{display:inline-block;width:3px;height:3px;margin:0 9px;border-radius:50%;background:currentColor;vertical-align:middle}.controls{display:flex;align-items:center;gap:28px}.sound{border:0;background:none;padding:8px;display:flex;align-items:center;gap:9px;cursor:pointer;font-size:9px;letter-spacing:.18em}.sound-bars{height:12px;display:flex;align-items:flex-end;gap:2px}.sound-bars i{display:block;width:2px;background:currentColor;height:4px}.sound-bars i:nth-child(2){height:10px}.sound-bars i:nth-child(3){height:7px}.sound[aria-pressed=true] .sound-bars i{animation:bars .7s ease-in-out infinite alternate}.sound[aria-pressed=true] .sound-bars i:nth-child(2){animation-delay:-.4s}.sound[aria-pressed=true] .sound-bars i:nth-child(3){animation-delay:-.2s}@keyframes bars{to{height:2px}}.counter{font:10px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted)}.counter b{color:var(--ink);font-weight:400}
.rail{position:fixed;right:clamp(18px,2.4vw,42px);top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:15px;padding:6px}.rail:before{content:"";position:absolute;top:6px;bottom:6px;left:50%;width:1px;background:rgba(255,255,255,.1);transform:translateX(-50%)}.rail-progress{position:absolute;top:6px;left:50%;width:1px;height:0;background:var(--gold);transform:translateX(-50%);transition:height .45s ease}.rail a{position:relative;width:11px;height:11px;display:grid;place-items:center}.rail a i{width:3px;height:3px;border-radius:50%;background:#777;transition:.3s}.rail a.active i{width:9px;height:9px;background:var(--gold);box-shadow:0 0 14px var(--gold)}
.chapter{position:relative;z-index:2;min-height:100svh;padding:120px clamp(28px,9vw,150px) 70px;display:grid;place-items:center;scroll-snap-align:start;isolation:isolate}.chapter:after{content:"";position:absolute;inset:18% 10%;background:radial-gradient(circle,rgba(161,117,41,.045),transparent 55%);z-index:-1;pointer-events:none}.chapter-content{width:min(1120px,100%);text-align:center}.eyebrow{position:absolute;left:clamp(24px,4vw,70px);top:84px;font-size:11px;font-weight:600;letter-spacing:.38em;color:#aaa7a1}.chapter-no{font:10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.22em;color:var(--gold);margin:0 0 18px}.chapter h1,.chapter h2{font-family:var(--serif);font-weight:400;margin:0;color:var(--gold);line-height:1.12}.chapter h1{font-size:clamp(64px,10vw,142px);letter-spacing:.1em}.chapter h2{font-size:clamp(48px,7vw,92px);letter-spacing:.06em}.kicker{letter-spacing:.38em;font-size:12px;color:#c7c2b9;margin:0 0 25px}.subtitle,.lead{color:#9f9b94;font-family:var(--serif);font-size:clamp(15px,1.45vw,20px);line-height:1.9}.subtitle{margin:26px auto 40px}.lead{max-width:520px;margin:25px 0}.centered{margin-left:auto;margin-right:auto}.lead strong{color:var(--gold-bright);font-weight:500}.reveal{opacity:.12;transform:translateY(34px);filter:blur(5px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1),filter 1s ease}.chapter.in-view .reveal{opacity:1;transform:none;filter:none}
.hero{padding:0;background:#000}.hero:after{display:none}.start{position:absolute;left:50%;top:61.5%;transform:translateX(-50%);display:inline-grid;place-items:center;width:48px;height:64px;border-radius:30px;transition:color .3s,background .3s}.start:hover,.start:focus-visible{background:rgba(202,169,104,.1);color:var(--gold-bright);outline:1px solid var(--line)}.start span{font-size:25px;line-height:1;animation:arrowDown 1.6s ease-in-out infinite}@keyframes arrowDown{0%,100%{transform:translateY(-5px);opacity:.35}50%{transform:translateY(7px);opacity:1}}.at-home #stars,.at-home .grain,.at-home .topbar,.at-home .rail{opacity:0;pointer-events:none}.topbar,.rail,#stars,.grain{transition:opacity .45s ease}
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;align-items:center;text-align:left}.chat{display:flex;flex-direction:column;gap:23px}.chat article{align-self:flex-start}.chat article.mine{align-self:flex-end}.chat time{display:block;margin:0 0 8px;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;color:#66635f}.chat p{margin:0;padding:15px 19px;background:rgba(29,25,16,.82);border:1px solid rgba(202,169,104,.14);border-radius:5px 18px 18px 18px;font-family:var(--serif);box-shadow:0 16px 45px rgba(0,0,0,.25)}.chat .mine p{border-radius:18px 5px 18px 18px}
.heatmap-wrap{width:min(850px,100%);margin:46px auto 0}.heatmap-hours{display:flex;justify-content:space-between;margin-left:45px;color:#77736d;font:9px ui-monospace,SFMono-Regular,Consolas,monospace}.heatmap{margin-top:10px;display:grid;grid-template-columns:32px repeat(24,1fr);gap:4px}.heatmap .day{font:10px var(--serif);color:#77736d;display:flex;align-items:center}.heatmap .cell{aspect-ratio:1;border-radius:2px;background:rgba(202,169,104,var(--level));transition:transform .2s,filter .2s}.heatmap .cell:hover{transform:scale(1.25);filter:brightness(1.5)}.heatmap-scale{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:13px;color:#5f5c56;font-size:8px}.heatmap-scale i{width:14px;height:7px;background:rgba(202,169,104,var(--scale))}.heatmap-scale i:nth-of-type(1){--scale:.1}.heatmap-scale i:nth-of-type(2){--scale:.25}.heatmap-scale i:nth-of-type(3){--scale:.5}.heatmap-scale i:nth-of-type(4){--scale:.85}
.balance{display:grid;grid-template-columns:150px 1fr 150px;align-items:center;gap:34px;width:min(760px,100%);margin:70px auto 0}.person{display:grid;justify-items:center;gap:10px}.avatar{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font:24px var(--serif);border:1px solid var(--line);box-shadow:0 0 45px rgba(202,169,104,.08)}.avatar-a{background:linear-gradient(145deg,#27362c,#0f1913)}.avatar-b{background:linear-gradient(145deg,#e6d8bd,#786348);color:#171109}.person small{font:9px ui-monospace,SFMono-Regular,Consolas,monospace;color:#777}.person strong{font:30px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--gold);font-weight:400}.person b{font-weight:400}.balance-line{height:1px;background:linear-gradient(90deg,transparent,var(--line) 10%,var(--line) 90%,transparent);position:relative}.balance-line i{position:absolute;width:13px;height:13px;background:var(--gold);border-radius:50%;left:47.5%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 25px var(--gold)}
.response-dial{width:240px;aspect-ratio:1;margin:50px auto 20px;border:1px solid var(--line);border-radius:50%;display:grid;place-content:center;gap:16px;position:relative;box-shadow:inset 0 0 60px rgba(202,169,104,.025),0 0 60px rgba(202,169,104,.025)}.response-dial:before{content:"";position:absolute;inset:12px;border:1px dashed rgba(202,169,104,.12);border-radius:50%}.response-dial span,.fastest span{font-size:9px;letter-spacing:.22em;color:#8e8981}.response-dial strong{font:48px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--gold);font-weight:300}.response-dial strong b{font-weight:300}.response-dial small{font-size:10px;color:#aaa}.response-dial i{position:absolute;top:-4px;left:50%;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 18px var(--gold);transform:translateX(-50%)}.fastest{display:flex;flex-direction:column;gap:8px}.fastest strong{font:22px ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:300}
.streak{margin:50px auto 0;display:flex;flex-direction:column;align-items:center}.streak>strong{font:clamp(100px,15vw,170px) ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:200;color:var(--gold);line-height:.9;text-shadow:0 0 45px rgba(202,169,104,.16)}.streak>span{margin-top:25px;letter-spacing:.5em;font-size:13px}.date{display:flex;align-items:center;gap:20px;margin-top:55px;color:#777;font:11px ui-monospace,SFMono-Regular,Consolas,monospace}.date i{width:90px;height:1px;background:var(--line)}
.lex-tabs{display:flex;justify-content:center;gap:30px;margin:35px 0 25px}.lex-tabs button{border:0;background:none;padding:8px 3px;cursor:pointer;color:#777;font-size:12px;position:relative}.lex-tabs button:focus{outline:0}.lex-tabs button:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transition:.3s}.lex-tabs button:focus-visible:after,.lex-tabs button[aria-selected=true]:after{transform:scaleX(1)}.lex-tabs button[aria-selected=true]{color:var(--gold)}.word-cloud{position:relative;width:min(720px,90vw);height:330px;margin:auto;background:radial-gradient(ellipse,rgba(28,52,40,.45),rgba(82,55,26,.12) 45%,transparent 70%);overflow:hidden;container-type:inline-size}.word-cloud span{position:absolute;left:var(--x);top:var(--y);font-family:var(--serif);font-size:18px;font-size:calc(var(--size)*1cqw);opacity:var(--alpha);transform:translate(-50%,-50%);white-space:nowrap;animation:wordIn .65s both;animation-delay:var(--delay)}@keyframes wordIn{from{opacity:0;filter:blur(8px);transform:translate(-50%,-30%) scale(.7)}to{opacity:var(--alpha);filter:none;transform:translate(-50%,-50%)}}
.stats{display:grid;grid-template-columns:repeat(2,minmax(150px,220px));gap:55px 100px;justify-content:center;margin-top:65px}.stats article{display:flex;flex-direction:column;gap:10px}.stats strong{font:clamp(35px,4vw,54px) ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--gold);font-weight:300}.stats span{font-size:9px;letter-spacing:.2em;color:#777}.finale h2{font-family:var(--sans);font-size:clamp(56px,10vw,132px);font-weight:800;letter-spacing:-.06em;color:#f4f2ed}.archive-mark{display:flex;justify-content:center;align-items:center;gap:8px;margin:0 auto 32px}.archive-mark i{width:26px;height:1px;background:var(--gold)}.archive-mark i:last-child{width:5px;height:5px;border-radius:50%;box-shadow:0 0 16px var(--gold)}.complete{display:inline-block;border:1px solid var(--line);border-radius:40px;padding:16px 40px;margin-top:28px;color:var(--gold);font:10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.28em}.restart{display:block;width:max-content;margin:28px auto 0;color:#74716b;font-size:10px;letter-spacing:.15em;transition:.2s}.restart:hover{color:var(--ink)}footer{position:absolute;bottom:25px;color:#4e4b46;font-size:8px;letter-spacing:.2em}
.archive-subtitle{display:block;margin-top:2px;color:#aaa7a1;font:8px var(--sans);letter-spacing:0}
@media (max-width:720px){.topbar{padding:20px}.brand{font-size:9px;letter-spacing:.2em}.sound-label{display:none}.controls{gap:8px}.rail{right:8px}.chapter:not(.hero){padding:105px 32px 65px}.eyebrow{top:72px;left:24px;font-size:9px}.chapter h1{font-size:clamp(58px,21vw,90px)}.chapter h2{font-size:clamp(43px,13vw,70px)}.split{grid-template-columns:1fr;gap:36px}.split .lead{margin-left:auto;margin-right:auto}.split{text-align:center}.chat{width:100%;font-size:14px}.heatmap-wrap{overflow:hidden}.heatmap{gap:2px;grid-template-columns:22px repeat(24,1fr)}.heatmap .day{font-size:8px}.balance{grid-template-columns:95px 1fr 95px;gap:10px}.avatar{width:56px;height:56px}.person strong{font-size:21px}.word-cloud{height:350px}.stats{gap:45px 35px}.date{gap:10px}.date i{width:45px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.start span{animation:none}.reveal{transition:none;opacity:1;transform:none;filter:none}.sound-bars i,.word-cloud span{animation:none!important}}

/* One gesture, one page: fade upward / fade from below. */
html,body{width:100%;height:100%;overflow:hidden;scroll-behavior:auto;scroll-snap-type:none;overscroll-behavior:none}
main{position:fixed;inset:0;overflow:hidden}
.chapter{position:absolute;inset:0;z-index:0;width:100%;height:100%;min-height:0;opacity:0;pointer-events:none;transform:translate3d(0,10vh,0) scale(.99);transition:opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.chapter.is-before{z-index:1;opacity:0;transform:translate3d(0,-10vh,0) scale(.99)}
.chapter.is-active{z-index:2;opacity:1;pointer-events:auto;transform:translate3d(0,0,0) scale(1)}
.chapter.is-after{z-index:1;opacity:0;transform:translate3d(0,10vh,0) scale(.99)}
@media(prefers-reduced-motion:reduce){.chapter{transition-duration:.01ms;transform:none!important}}

/* Portrait-only edition: one vertical stage on every device. */
.mobile-hero-copy{display:none}
@media (min-width:0px){
  html,body{background:#000;touch-action:pan-y}
  main{inset:0 auto 0 50%;width:min(100vw,480px);transform:translateX(-50%)}
  #stars,.grain{display:block}
  .at-home #stars{opacity:1}
  .grain{opacity:.025}
  .topbar{display:flex;left:50%;right:auto;width:min(100vw,480px);transform:translateX(-50%);padding:max(19px,env(safe-area-inset-top)) 20px 0;mix-blend-mode:normal}
  .brand{font-size:8px;letter-spacing:.22em;color:#aaa7a1}
  .controls{gap:10px}.sound{display:none}.counter{font-size:9px}
  .rail{display:none}

  .chapter,.chapter:not(.hero){padding:max(88px,calc(env(safe-area-inset-top) + 64px)) 23px max(36px,env(safe-area-inset-bottom));background-image:none!important;background-color:transparent;overflow:hidden}
  .chapter:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 50% 58%,rgba(90,65,28,.1),transparent 45%)}
  .chapter:after{display:block;inset:20% -25%;background:radial-gradient(circle,rgba(161,117,41,.055),transparent 58%)}
  .chapter>div,.chapter>footer{visibility:visible;pointer-events:auto}
  .chapter>.hotspots{display:none}
  .chapter-content,#lexicon>.chapter-content{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:auto;transform:none;overflow:visible;text-align:center}
  #lexicon>.chapter-content:before{display:none}
  #lexicon>.chapter-content>.chapter-no,#lexicon>.chapter-content>h2{display:block}
  .eyebrow{left:23px;top:max(58px,calc(env(safe-area-inset-top) + 43px));font-size:8px;letter-spacing:.3em;color:#8b8882}
  .chapter-no{font-size:8px;margin-bottom:12px}
  .chapter h2{font-size:clamp(42px,13vw,58px);letter-spacing:.08em;line-height:1.14}
  .lead,.subtitle{font-size:14px;line-height:1.75}.lead{margin-top:18px;margin-bottom:18px}

  .hero{padding:0;background:radial-gradient(circle at 50% 48%,rgba(68,48,17,.13),transparent 43%)!important}
  .hero:before{background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 30%,transparent 70%,rgba(0,0,0,.4))}
  .mobile-hero-copy{display:block;position:absolute;inset:0;color:#eeeae3;font-family:var(--serif)}
  .mobile-hero-copy>p{position:absolute;left:24px;top:max(34px,calc(env(safe-area-inset-top) + 18px));margin:0;font:600 9px var(--sans);letter-spacing:.28em;color:#aaa7a1}
  .mobile-hero-copy>div{position:absolute;left:0;right:0;top:47%;transform:translateY(-50%);text-align:center}
  .mobile-hero-copy h1{font:400 clamp(39px,12vw,54px)/1.2 var(--serif);letter-spacing:.08em;color:#f0ede7}
  .mobile-hero-copy span{display:block;margin-top:14px;font:15px var(--serif);letter-spacing:.12em;color:#bdb8af}
  .start{top:auto;bottom:max(38px,calc(env(safe-area-inset-bottom) + 22px));width:48px;height:58px;transform:translateX(-50%)}
  .start span{font-size:28px}

  .split{display:grid;grid-template-columns:1fr;gap:28px;text-align:center}
  .split .lead{margin-left:auto;margin-right:auto}
  .chat{gap:14px;font-size:13px}.chat time{font-size:8px;margin-bottom:5px}.chat p{padding:11px 14px}

  .heatmap-wrap{width:100%;margin-top:34px;overflow:visible}
  .heatmap-hours{margin-left:25px;font-size:7px}
  .heatmap{grid-template-columns:20px repeat(24,minmax(0,1fr));gap:1px;margin-top:7px}
  .heatmap .day{font-size:7px}.heatmap .cell{border-radius:1px}
  .heatmap .cell:hover{transform:none}.heatmap-scale{margin-top:9px}

  .balance{grid-template-columns:82px 1fr 82px;gap:7px;margin-top:44px}
  .avatar{width:52px;height:52px;font-size:19px}.person{gap:7px}.person strong{font-size:19px}.person small{font-size:7px}
  .balance-line i{width:10px;height:10px}

  .response-dial{width:min(58vw,225px);margin:38px auto 18px;gap:12px}
  .response-dial strong{font-size:42px}.fastest strong{font-size:19px}

  .streak{margin-top:38px}.streak>strong{font-size:clamp(92px,31vw,132px)}
  .streak>span{margin-top:19px;font-size:10px}.date{margin-top:40px;font-size:9px}.date i{width:36px}

  #lexicon .lex-tabs{position:relative;left:auto;top:auto;transform:none;margin:30px 0 14px;gap:25px}
  #lexicon .lex-tabs button{font-size:13px;min-height:44px;padding:10px 4px}
  #lexicon .word-cloud{position:relative;left:auto;top:auto;width:100%;height:min(47vh,350px);margin:0;background:radial-gradient(ellipse,rgba(31,58,43,.62),rgba(87,62,29,.19) 48%,transparent 72%)}
  #lexicon .word-cloud span{font-size:calc(var(--size)*1cqw)}

  .stats{grid-template-columns:repeat(2,minmax(120px,1fr));gap:42px 20px;margin-top:50px}
  .stats strong{font-size:clamp(32px,10vw,45px)}
  .finale h2{font-size:clamp(42px,12vw,56px)}
  .archive-mark{margin-bottom:24px}.complete{margin-top:22px;padding:14px 28px}.restart{margin-top:24px}
  footer{bottom:max(18px,env(safe-area-inset-bottom))}
}

@media (max-height:700px){
  .chapter,.chapter:not(.hero){padding-top:max(72px,calc(env(safe-area-inset-top) + 55px));padding-bottom:24px}
  .eyebrow{top:max(48px,calc(env(safe-area-inset-top) + 35px))}
  .chapter h2{font-size:40px}.lead{font-size:12px;margin:12px 0}.split{gap:18px}.chat{gap:9px}
  .heatmap-wrap,.balance,.streak,.stats{margin-top:25px}
  .response-dial{width:190px;margin-top:24px}
  #lexicon .lex-tabs{margin-top:20px}.word-cloud,#lexicon .word-cloud{height:290px}
  .stats{gap:28px 18px}
}

.heatmap .cell{min-width:0;padding:0;border:0;cursor:pointer}
.heatmap .cell:focus-visible,.heatmap .cell.is-active{transform:scale(1.25);filter:brightness(1.5);outline:1px solid rgba(225,191,119,.7);z-index:2}
@media (min-width:0px){
  .heatmap .cell:focus-visible,.heatmap .cell.is-active{transform:translateY(-4px) scale(1.15)}
}

@media (orientation:landscape) and (max-height:600px){
  main,.topbar,#stars,.grain{visibility:hidden}
  body:after{content:"请旋转至竖屏浏览";position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#050504;color:#caa968;font:16px var(--serif);letter-spacing:.18em}
}