@font-face{font-family:ChillHuo;src:url('side-assets/chill-huo-regular.woff2?v=12') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:SideSans;src:url('side-assets/sans-sub.woff2?v=12') format('woff2');font-weight:250 900;font-display:swap}
@font-face{font-family:Inter;src:url('assets/fonts/inter-sub.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--paper:#f5f2e9;--sheet:#f8f5ec;--ink:#27261f;--muted:#7a7366;--faint:#a39a87;--gold:#967c4b;--gold-fill:#a18c61;--line:#d6cfbe;--night:#232636;--bar:#292a27;--serif:ChillHuo,'Songti SC',serif;--sans:Inter,SideSans,'PingFang SC',sans-serif;--ease:cubic-bezier(.22,1,.36,1);--phone-col:clamp(280px,29vw,430px);--spine:94px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#ebe6d9 url('assets/paper.webp') center/1200px;font-family:var(--sans);font-size:15px;line-height:1.8;color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,figure,blockquote,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3,h4,blockquote{font-family:var(--serif);font-weight:400;font-synthesis:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* 舞台：左边是一本经折装的书，右边是手机 */
.scroll{position:relative}
.stage{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;--phone:0}
.book{position:absolute;inset:0 var(--spine) 0 0}

/* 完整纸页向右推出，由书脊遮住离场部分。 */
.panel{position:absolute;inset:0 var(--phone-col) 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto;background:var(--sheet);visibility:hidden}
.panel.is-open,.panel.is-in{visibility:visible}
.panel.is-in{z-index:1}
.paper-layer{position:absolute;inset:0 var(--spine) 0 0;z-index:12;pointer-events:none;visibility:hidden;overflow:hidden}
.paper-layer.is-moving{visibility:visible}
.paper-sheet{position:absolute;inset:0;background:var(--sheet) url('assets/paper.webp') center/1200px;border-left:1px solid var(--line);will-change:transform}
.paper-copy{position:absolute;top:0;left:0;width:var(--paper-w);height:var(--paper-h)}
.paper-copy>.panel{visibility:visible}
.paper-copy>.phone{right:0;opacity:1;transform:none}

/* 竖排标题列：在页面右侧，像奏折的题签 */
.panel-title{grid-column:2;grid-row:1;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:16px;writing-mode:vertical-rl;padding:9vh 3.4vw 9vh 2.6vw;border-left:1px solid var(--line);margin:6vh 0}
.panel-title{writing-mode:horizontal-tb}
.panel-title>*{writing-mode:vertical-rl;text-orientation:upright}
.panel-title p{font-size:13px;letter-spacing:.3em;color:var(--gold);font-family:var(--serif)}
.panel-title h2{font-size:clamp(48px,7.4svh,72px);line-height:1.1;letter-spacing:.14em}
.panel-title small{font-size:13px;letter-spacing:.2em;color:var(--muted);margin-top:auto;font-family:var(--serif)}

/* 横排正文：短句、留白 */
.panel-body{grid-column:1;grid-row:1;align-self:center;justify-self:end;width:min(100%,560px);padding:0 3.4vw 0 4vw}
.lead{font-family:var(--serif);font-size:clamp(24px,2vw,30px);line-height:1.6;letter-spacing:.03em}
.steps{margin-top:30px;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:62px 1fr;gap:4px;padding:18px 0;border-bottom:1px solid var(--line);opacity:.36;transition:opacity 220ms var(--ease)}
.steps li.is-active{opacity:1}
.steps time{font:500 13px/2 Inter,sans-serif;color:var(--gold);letter-spacing:.04em}
.steps h3{font-size:21px;line-height:1.5}
.steps p{font-size:14px;line-height:1.85;color:var(--muted);margin-top:4px}

.night{background:var(--night);color:#eee5d3}
.night .panel-title{border-color:#ffffff1a}
.night .panel-title p,.night .steps time{color:#cdb382}
.night .panel-title small,.night .steps p{color:#a9a294}
.night .steps,.night .steps li{border-color:#ffffff17}

.night-line{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px;font-size:12px;color:#a9a294}
.night-line time{display:block;font:26px/1.3 var(--serif);color:#d6bf8e;margin-bottom:2px}

/* 记忆锚点：第三折最后一步里可以直接试 */
.anchor{margin-top:14px;padding:16px 18px;border:1px solid var(--line);border-radius:6px;background:#fdfbf5}
.anchor label{font-size:13px;color:var(--muted)}
.anchor output{font-family:var(--serif);font-size:20px;color:var(--gold);margin:0 3px}
.anchor input{width:100%;accent-color:var(--gold);margin:6px 0 0;height:18px;cursor:pointer}
.anchor-at{display:flex;align-items:baseline;gap:12px;margin-top:6px}
.anchor-at time{font:30px/1.3 var(--serif);color:var(--gold)}
.anchor-at span{font-size:12px;color:var(--muted)}
.anchor blockquote{font-size:17px;line-height:1.8;margin-top:6px;min-height:3.6em}
.anchor-actions{display:flex;justify-content:space-between;margin-top:8px;font-size:13px}
.anchor-actions button{color:var(--gold)}
.anchor-actions button:disabled{opacity:.35;cursor:default}
.steps li:not(.is-active) .anchor{pointer-events:none}

/* 封面：整页，没有手机 */
.cover,.how,.end{right:0}
.cover{grid-template-columns:minmax(0,1fr) auto;background:var(--sheet)}
.cover-brand{grid-column:2;grid-row:1;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:28px;padding:8vh 5vw 8vh 3vw;border-left:1px solid var(--line);margin:5vh 0}
.cover-brand img{width:64px;height:64px;flex:none}
.cover-brand h1{writing-mode:vertical-rl;text-orientation:upright;font-size:clamp(84px,15svh,140px);line-height:1;letter-spacing:.1em}
.cover-slogan{display:flex;flex-direction:row-reverse;gap:14px;font-family:var(--serif);font-size:clamp(22px,3.2svh,30px);letter-spacing:.2em;margin-top:clamp(40px,9svh,90px)}
.cover-slogan span{writing-mode:vertical-rl;text-orientation:upright}
.cover-slogan span:last-child{color:var(--gold)}
.cover-main{grid-column:1;grid-row:1;align-self:center;padding:0 4vw 0 7vw}
.kicker{font-size:13px;letter-spacing:.2em;color:var(--gold)}
.cover-main h2{font-size:clamp(48px,5.6vw,88px);line-height:1.38;letter-spacing:.05em;margin-top:18px}
.cover-pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:6vh;max-width:820px;border-top:1px solid var(--line);padding-top:22px}
.cover-pains b{display:block;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.3}
.cover-pains span{display:block;font-size:14px;line-height:1.85;color:var(--muted);margin-top:8px}
.cover-hint{display:flex;align-items:center;gap:12px;margin-top:6vh;font-size:13px;letter-spacing:.1em;color:var(--muted)}
.cover-hint i{font-style:normal;color:var(--gold);font-size:18px;animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateY(4px)}}

/* 原理：手机已收起，整页讲技术 */
.how .panel-body{width:min(100%,1080px);justify-self:center;padding:0 3vw 0 4vw}
.how-note{font-size:14px;line-height:1.9;color:var(--muted);margin-top:10px;max-width:46em}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:4vh}
.card-group{display:grid;grid-template-rows:auto 1fr 1fr;gap:10px}
.card-group h3{display:flex;align-items:baseline;gap:10px;font-size:24px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.card-group h3 small{font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--faint)}
.card{display:grid;grid-template-columns:1fr auto;align-content:start;gap:4px 12px;text-align:left;padding:14px 16px 16px;border:1px solid var(--line);border-radius:6px;background:#fdfbf5;transition:border-color 150ms ease}
.card:hover{border-color:var(--gold-fill)}
.card b{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.4}
.card i{font-style:normal;width:24px;height:24px;border:1px solid #cdbf9f;border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:15px;line-height:1}
.card span{grid-column:1/-1;font-size:12.5px;line-height:1.75;color:var(--muted)}
.card em{font-style:normal;color:var(--gold)}
.proto-note{font-size:12px;line-height:1.8;color:var(--faint);margin-top:3vh}

/* 手机随章节轻移入场，正文翻页时保持稳定。 */
.phone{position:absolute;top:0;bottom:0;right:var(--spine);width:var(--phone-col);margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:var(--phone);transform:translateX(calc((1 - var(--phone)) * 24px));pointer-events:none}
.device{position:relative;height:min(calc(100svh - 120px),720px);aspect-ratio:900/1840}
.screens{position:absolute;left:5.333%;top:2.5%;width:89.333%;height:95%;border-radius:15%/7%;overflow:hidden;background:#111}
.screen{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 260ms var(--ease)}
.screen.is-active{opacity:1}
.frame{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 22px 26px #3a33221f)}
.phone figcaption{display:flex;gap:10px;align-items:baseline;font-size:11px;letter-spacing:.06em;color:var(--faint)}
.phone figcaption span{font:500 13px Inter,sans-serif;color:var(--gold)}

.progress{position:absolute;left:0;right:var(--spine);bottom:0;height:2px;background:#d5cbb430;z-index:9}
.progress i{display:block;height:100%;background:#baa374;transform-origin:left;transform:scaleX(0)}

.end{display:flex;align-items:center;justify-content:center;text-align:center}
.end-body{max-width:760px;padding:60px 32px}
.end img{margin:0 auto}
.end h2{font-size:clamp(34px,4.6vw,64px);letter-spacing:.08em;margin-top:24px;line-height:1.5}
.end p{font-size:12px;color:var(--muted);margin-top:24px;letter-spacing:.06em}
.end .fine{max-width:62em;margin:14px auto 0;color:var(--faint);line-height:1.9;letter-spacing:0}
.end-again{margin-top:32px;font-size:13px;color:var(--gold);letter-spacing:.08em}
.dream-fade{display:flex;justify-content:space-between;gap:6px;font-family:var(--serif);font-size:clamp(30px,3.8vw,54px);line-height:1.5;margin-bottom:14px}
.dream-fade span:nth-child(2){opacity:.85}.dream-fade span:nth-child(3){opacity:.66}.dream-fade span:nth-child(4){opacity:.45}.dream-fade span:nth-child(5){opacity:.23}.dream-fade span:nth-child(6){opacity:.09}
.dream-rule{height:1px;background:linear-gradient(90deg,var(--gold),#967c4b00);margin-bottom:24px}
/* 深色书脊固定在最右侧，目录、已读页和进度合在一起。 */
.book-spine{position:absolute;inset:0 0 0 auto;width:var(--spine);z-index:20;background:#242623;color:#b9b4a7;border-left:5px solid #171a17;display:flex;flex-direction:column;align-items:center;padding:28px 12px 20px;box-shadow:inset 3px 0 #494c40}
.spine-title{writing-mode:vertical-rl;font:19px/1.4 var(--serif);letter-spacing:.2em;color:#e8ddc4;margin-bottom:auto}
.spine-pages{display:grid;gap:4px;width:100%;margin:14px 0}
.spine-pages button{position:relative;display:grid;justify-items:center;gap:1px;padding:6px 4px;border:1px solid #ffffff15;color:#8e9187;transition:color 160ms,border-color 160ms,background-color 160ms}
.spine-pages button span{font:11px/1.3 Inter,sans-serif;letter-spacing:.12em}
.spine-pages button b{font:15px/1.5 var(--serif);letter-spacing:.1em}
.spine-pages button.is-read{color:#c4b997;border-color:#b69d6b33}
.spine-pages button.is-current{color:#f1e5c9;border-color:#bca474;background:#b59d6a20}
.spine-pages button i{position:absolute;left:-12px;top:12px;bottom:12px;width:3px;background:#c3ac7a;opacity:0}
.spine-pages button.is-current i{opacity:1}
.spine-meter{height:2px;width:100%;background:#ffffff13;margin-top:auto}
.spine-meter i{display:block;background:#c3ac7a;height:100%;transform-origin:left;transform:scaleX(0)}
.spine-step-controls{display:flex;gap:8px;margin-top:8px;color:#c3ac7a}
.spine-step-controls button{width:25px;height:25px;font-size:18px;line-height:1}
.spine-step-controls button:disabled{opacity:.25;cursor:default}
.spine-count{font:11px/1.5 Inter,sans-serif;color:#b3a990;margin-top:12px;letter-spacing:.08em}
@media(hover:hover) and (pointer:fine){.spine-pages button:hover{color:#f1e5c9;border-color:#bca474}}

.feature-dialog{width:min(640px,calc(100vw - 32px));max-height:min(86svh,780px);padding:0;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px #2b261a33}
.feature-dialog::backdrop{background:#24231e66;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dialog-inner{position:relative;padding:38px 42px 40px;overflow:auto;max-height:inherit}
.dialog-close{position:absolute;right:16px;top:12px;width:36px;height:36px;font-size:26px;line-height:1;color:var(--muted)}
.dialog-k{font-size:12px;letter-spacing:.14em;color:var(--gold)}
.feature-dialog h3{font-size:32px;line-height:1.4;margin-top:8px}
.dialog-body{font-size:14px;line-height:1.95;color:#5f584b}
.dialog-body h4{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--gold);margin:24px 0 8px}
.dialog-body ul{list-style:disc;padding-left:1.1em}
.dialog-body li+li{margin-top:6px}
.research{margin-top:24px;padding:18px 20px;border-left:2px solid #cbb78d;background:#ebe5d8;border-radius:0 6px 6px 0}
.research h4{margin-top:0!important}
.research p+p{margin-top:8px}
.research a{color:var(--gold);border-bottom:1px solid #aa8c5850;font-size:12px}
.api{display:flex;flex-wrap:wrap;gap:6px}
.api code{font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;background:#ebe5d8;border-radius:4px;padding:2px 8px;color:#5a4f3c}

.inline-shot{display:none}

@media(max-height:760px) and (min-width:821px){.steps li{padding:12px 0}.steps h3{font-size:19px}.lead{font-size:22px}.cards{gap:14px}.card span{display:none}.cover-pains{margin-top:4vh}}

/* 手机与窄屏：不做折页，按顺序往下读，截图跟在每一步下面 */
@media(max-width:820px){
  .scroll{height:auto!important}
  .stage{position:static;height:auto;min-height:0;overflow:visible;padding-right:54px;--spine:54px}
  .book{position:static;perspective:none;margin-right:0}
  .phone,.progress,.reader-nav,.paper-layer{display:none}
  .panel{position:relative;visibility:visible;display:block;transform:none!important;left:auto;right:auto;padding:56px 22px}
  .panel::after{display:none}
  .book-spine{position:fixed;padding:20px 7px 14px}
  .spine-title{font-size:16px}
  .spine-pages{gap:6px;margin:18px 0}
  .spine-pages button{padding:8px 2px}
  .spine-pages button b{font-size:12px;letter-spacing:0}
  .spine-pages button span{font-size:10px}
  .spine-pages button i{left:-7px;width:2px}
  .spine-count{font-size:9px;letter-spacing:0}
  .panel+.panel{border-top:1px solid var(--line)}
  .panel-title{display:flex;flex-direction:column;gap:6px;padding:0 0 18px;margin:0 0 22px;border-left:0;border-bottom:1px solid var(--line)}
  .panel-title>*{writing-mode:horizontal-tb}
  .panel-title h2{font-size:38px;letter-spacing:.08em}
  .panel-title small{margin-top:0}
  .panel-body,.how .panel-body{width:auto;padding:0}
  .steps li{opacity:1}
  .inline-shot{display:block;height:auto;width:min(230px,64%);margin:16px auto 4px;border-radius:12%/6%;box-shadow:0 14px 30px #2b241622}
  .cover{display:flex;flex-direction:column;gap:30px;min-height:100svh;justify-content:center}
  .cover-brand{flex-direction:row;align-items:center;padding:0;margin:0;border:0;gap:14px}
  .cover-brand img{width:40px;height:40px}
  .cover-brand h1{writing-mode:horizontal-tb;font-size:30px}
  .cover-slogan{display:none}
  .dream-fade{font-size:36px}
  .steps li:not(.is-active) .anchor{pointer-events:auto}
  .end{min-height:80svh}
  .end-body{padding:24px 0}
  .cover-main{padding:0}
  .cover-main h2{font-size:40px}
  .cover-pains{grid-template-columns:1fr;gap:16px}
  .cards{grid-template-columns:1fr;gap:30px}
  .dialog-inner{padding:30px 22px 32px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.paper-layer{display:none}.panel.is-out{visibility:visible;opacity:calc(1 - var(--t))}.panel.is-in{opacity:var(--t)}.phone{transform:none}.cover-hint i{animation:none}}