/* Aldwin 官网 —— 一整块画面的滚动动画。
   结构只有三层：一条长滚动轨（.film）+ 一块定住的舞台（.stage）+ 舞台里的元素。
   没有分段版面、没有第二屏：开屏的字标收缩成角标，手机升进来，
   之后全部内容都在同一条会话里被替换掉。所有状态由全片进度 p 驱动。 */
:root{
  --n-hue:70;
  --paper:oklch(99.8% .0015 var(--n-hue));--paper-2:oklch(97.9% .003 var(--n-hue));--paper-3:oklch(95.6% .005 var(--n-hue));--paper-4:oklch(92.8% .007 var(--n-hue));
  --rule:oklch(93.5% .005 var(--n-hue));--rule-2:oklch(86% .007 var(--n-hue));
  --ink:oklch(21% .011 var(--n-hue));--ink-2:oklch(36% .011 var(--n-hue));--ink-3:oklch(44% .010 var(--n-hue));--ink-4:oklch(51% .009 var(--n-hue));
  --cream-2:oklch(99.8% .0015 var(--n-hue)/.66);--cream-3:oklch(99.8% .0015 var(--n-hue)/.42);--cream-r:oklch(99.8% .0015 var(--n-hue)/.22);
  --mark-fold:oklch(50% .135 31);
  --accent:#2e2b25;--accent-2:#17150f;--accent-soft:#f4f3f0;--accent-line:#cbc7bd;
  --serif:"Source Serif 4","Songti SC","Source Han Serif SC",ui-serif,Georgia,serif;
  --ui:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",system-ui,sans-serif;
  --mono:"Courier Prime",ui-monospace,Menlo,monospace;
  --fs-xl:24px;--fs-lg:20px;--fs-card:17px;--fs-strong:16px;--fs-body:15px;--fs-compact:14px;--fs-sub:13px;--fs-label:12px;--fs-meta:11px;--fs-caption:10px;--fs-micro:10px;
  --w-word:clamp(78px,15vw,210px);--w-h2:clamp(28px,3.4vw,50px);--w-lead:clamp(18px,1.5vw,24px);--w-num:clamp(38px,3.6vw,58px);
  --s-1:2px;--s-2:4px;--s-3:6px;--s-4:8px;--s-5:10px;--s-6:12px;--s-7:14px;--s-8:16px;--s-9:18px;--s-10:20px;--s-11:24px;--s-12:28px;--s-13:32px;--s-14:40px;--s-15:48px;--s-16:64px;--s-17:96px;
  --pad:clamp(20px,4.4vw,72px);
  --sc:1;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:var(--fs-body);line-height:1.5;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent-2)}
em{font-style:normal}
h1,h2,h3,p,ul,dl{margin:0}
/* 纸的物性：颗粒 + 帘纹，都压在 6% 以下 */
body::before{content:"";position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E")}
.mn{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.19em;text-transform:uppercase}
.blk{width:3px;height:13px;background:var(--accent);flex-shrink:0;display:inline-block}
.embermark .mk-fold{fill:var(--mark-fold)}
.embermark.is-boil .mk-f0,.embermark.is-boil .mk-f1,.embermark.is-boil .mk-f2{animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:.375s}
.embermark.is-boil .mk-f0{animation-name:mk-b0}.embermark.is-boil .mk-f1{animation-name:mk-b1}.embermark.is-boil .mk-f2{animation-name:mk-b2}
@keyframes mk-b0{0%,33.32%{opacity:1}33.33%,100%{opacity:0}}
@keyframes mk-b1{0%,33.32%{opacity:0}33.33%,66.65%{opacity:1}66.66%,100%{opacity:0}}
@keyframes mk-b2{0%,66.65%{opacity:0}66.66%,100%{opacity:1}}
i[data-mark],i[data-live]{display:inline-flex;line-height:0}

/* ---------- 舞台：一页一幕，app 永远在正中 ----------
   滚动只负责「翻到第几幕」（scroll-snap 吸附），幕内动画由定时器自己播 ——
   不是刮擦式连续动画。舞台底色用更深的纸（--paper-4），
   屏幕本身是 --paper 白，两层必须区分得开，否则 app 看不出边界。 */
html.snapping{scroll-snap-type:none}
.film{position:relative}
.snap{height:58vh}
.stage{position:fixed;inset:0;z-index:2;overflow:hidden;background:var(--paper-4);
  display:grid;grid-template-rows:1fr auto auto;align-items:center;justify-items:center;
  padding:calc(var(--pad) + 42px) var(--pad) var(--s-10);transition:background .42s cubic-bezier(.22,.61,.36,1)}
.stage.dark{background:var(--ink)}
.stage.away{opacity:0;pointer-events:none;transition:opacity .32s ease,background .42s}
.stage.dark .say-l{color:var(--cream-2)}
.stage.dark .say-l b,.stage.dark .say-l em{color:var(--paper)}
.stage.dark .hud{color:var(--cream-2)}
.stage.dark .hud-when{color:var(--cream-3)}
.stage.dark .lock b,.stage.dark .lock i[data-live]{color:var(--paper)}
.stage.dark .tl b{background:var(--cream-r)}
.stage.dark .tl b.on{background:var(--paper)}
.stage.dark .tl span{color:var(--cream-3)}
body[data-scene="0"] .stage{background:var(--paper)}

/* 开屏字标 —— 同一个元素，翻页后一路缩到左上角变角标（0.72s 一次性动画） */
.lock{position:absolute;left:50%;top:50%;z-index:6;display:flex;flex-direction:column;align-items:center;gap:var(--s-9);
  transform:translate(-50%,-50%);transform-origin:center;
  transition:transform .72s cubic-bezier(.22,.61,.36,1)}
.lock-row{display:flex;align-items:center;gap:clamp(var(--s-8),1.6vw,var(--s-13))}
.lock i[data-live]{color:var(--ink)}
.lock b{font-family:var(--serif);font-weight:300;font-size:clamp(64px,13vw,168px);letter-spacing:-.055em;line-height:.84;color:var(--ink);white-space:nowrap}
.lock-slogan{font-family:var(--serif);font-weight:300;font-size:clamp(17px,2.1vw,26px);letter-spacing:-.022em;color:var(--ink-2);text-align:center;
  transition:opacity .3s}
body:not([data-scene="0"]) .lock{transform:translate(calc(-50% + var(--dockx,0px)),calc(-50% + var(--docky,0px))) scale(var(--docks,.16))}
body:not([data-scene="0"]) .lock-slogan{opacity:0;position:absolute;pointer-events:none}
.hint{position:absolute;left:50%;bottom:var(--s-12);transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:var(--s-6);
  font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4);transition:opacity .3s}
body:not([data-scene="0"]) .hint{opacity:0;pointer-events:none}
.hint i{width:1px;height:clamp(34px,6vh,54px);background:linear-gradient(180deg,var(--rule-2),var(--ink));position:relative;overflow:hidden}
.hint i::after{content:"";position:absolute;left:0;top:0;width:1px;height:14px;background:var(--mark-fold);animation:drip 1.62s steps(9,end) infinite}
@keyframes drip{from{transform:translateY(-14px)}to{transform:translateY(54px)}}

/* 幕号 / 时间：原地替换 */
.hud{position:absolute;left:var(--pad);top:calc(var(--pad) + 44px);z-index:5;display:flex;flex-direction:column;gap:var(--s-4);
  font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);
  opacity:0;transition:opacity .3s}
.hud-when{font-weight:400;letter-spacing:.16em;color:var(--ink-4)}
body:not([data-scene="0"]) .hud,body:not([data-scene="0"]) .tl,body:not([data-scene="0"]) .top{opacity:1}

/* app：视觉正中 */
.dev{grid-row:1;align-self:center;justify-self:center;z-index:4;position:relative;
  width:calc(346px * var(--sc,1));height:calc(626px * var(--sc,1));
  transform:translateY(var(--dy,40vh)) scale(var(--ds,.92));opacity:var(--do,0);
  transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .5s ease}
.dev>.phone{position:absolute;left:0;top:0;transform-origin:top left;transform:scale(var(--sc,1))}
body:not([data-scene="0"]) .dev{--dy:0vh;--ds:1;--do:1}
.phone{box-shadow:0 24px 60px -30px oklch(21% .011 var(--n-hue)/.42),0 2px 4px -2px oklch(21% .011 var(--n-hue)/.24),inset 0 0 0 1px oklch(100% 0 0/.7)}

/* 解说：屏下方一条带，一次只有一句 */
.say{grid-row:2;position:relative;width:min(46em,88vw);min-height:5.2em;text-align:center;z-index:5}
.say-l{position:absolute;left:0;right:0;top:0;font-size:var(--fs-strong);line-height:1.78;color:var(--ink-2);text-wrap:pretty;
  opacity:0;transform:translateY(10px);transition:opacity .2s steps(2,end),transform .26s cubic-bezier(.2,.72,.24,1)}
.say-l.on{opacity:1;transform:none}
.say-l b{color:var(--ink);font-weight:600}
.say-l em{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(23px,2.5vw,36px);line-height:1.12;letter-spacing:-.036em;color:var(--ink);margin-bottom:var(--s-7)}
.say-l u{text-decoration:none;position:relative;white-space:nowrap}
.say-l u::after{content:"";position:absolute;left:-.03em;right:-.05em;bottom:.06em;height:.09em;background:var(--mark-fold);opacity:.62;border-radius:2px}

/* 时间线：六格 */
.tl{grid-row:3;position:relative;margin-top:var(--s-8);z-index:5;display:flex;align-items:center;gap:var(--s-7);opacity:0;transition:opacity .3s}
.tl-i{display:flex;align-items:center;gap:var(--s-5)}
.tl b{width:24px;height:2px;background:var(--rule-2);display:block;transition:background .12s steps(1,end)}
.tl b.on{background:var(--ink)}
.tl span{font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);opacity:0;transition:opacity .18s}
.tl-i.on span{opacity:1}

/* 顶栏 */
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:flex-end;gap:var(--s-10);padding:var(--s-6) var(--pad);opacity:0;transition:opacity .3s}
.top .lang{display:flex;border:1px solid var(--rule-2)}
.top .lang button{background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.11em;color:var(--ink-3);padding:var(--s-3) var(--s-5)}
.top .lang button.on{background:var(--ink);color:var(--paper)}
.top a{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.top a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-5);background:var(--ink);color:var(--paper);border:0;cursor:pointer;
  font-family:var(--ui);font-size:var(--fs-strong);font-weight:600;letter-spacing:-.006em;padding:var(--s-8) var(--s-12);transition:background .15s}
.btn:hover{background:var(--accent-2);color:var(--paper)}
.top a.btn,.top a.btn:hover{color:var(--paper);font-family:var(--ui);font-size:var(--fs-sub);letter-spacing:-.004em;text-transform:none;padding:var(--s-5) var(--s-9)}
.btn-2{display:inline-flex;align-items:baseline;gap:var(--s-5);color:var(--ink-2);box-shadow:0 1px 0 var(--rule-2);padding-bottom:var(--s-3);font-size:var(--fs-strong)}
.btn-2:hover{color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.blk{width:3px;height:13px;background:var(--accent);flex-shrink:0;display:inline-block}
.mn{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.19em;text-transform:uppercase}
/* 收尾那一屏在正片之后，正常流；舞台到那儿就让位 */
.close{position:relative;z-index:6}

/* ---------- 手机 / 屏幕 ---------- */
.phone{width:342px;flex-shrink:0;background:var(--paper);border:1px solid var(--rule-2);border-radius:42px;padding:2px;
  box-shadow:inset 0 0 0 1px oklch(100% 0 0/.7),0 2px 2px -1px oklch(21% .011 var(--n-hue)/.09);transform:scale(var(--sc,1));transform-origin:center}
.scr{height:var(--scrh,620px);border-radius:40px;overflow:hidden;background:var(--paper);display:flex;flex-direction:column;position:relative}
.scr-bar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:var(--s-6) var(--s-10) var(--s-2);font-family:var(--mono);font-size:var(--fs-caption);color:var(--ink-2);font-variant-numeric:tabular-nums}
.scr-bar em{display:flex;gap:3px;align-items:center}
.scr-bar i{width:3px;height:8px;background:var(--ink-3);display:block}
.scr-bar i:nth-child(2){height:10px}.scr-bar i:nth-child(3){height:12px}
.scr-top{flex-shrink:0;display:flex;align-items:center;gap:var(--s-6);padding:var(--s-5) var(--s-8) var(--s-7);border-bottom:1px solid var(--rule)}
.scr-menu{display:flex;flex-direction:column;gap:3px;width:16px}
.scr-menu i{height:1px;background:var(--ink-2);display:block}
.scr-menu i:nth-child(2){width:11px}
.scr-brand{display:flex;align-items:center;gap:var(--s-5);color:var(--ink)}
.scr-brand b{font-family:var(--serif);font-weight:300;font-size:var(--fs-strong);letter-spacing:-.03em}
.scr-r{margin-left:auto;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4)}
.reel-wrap{flex:1;min-height:0;position:relative;overflow:hidden;padding:var(--s-8) var(--s-8) 0}
.reel-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;pointer-events:none;background:linear-gradient(180deg,transparent,var(--paper))}
.reel{display:flex;flex-direction:column;gap:var(--s-9);will-change:transform;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.beat{display:flex;flex-direction:column;gap:var(--s-6);transition:opacity .18s steps(2,end),transform .18s cubic-bezier(.2,.72,.24,1)}
.reel.armed .beat{opacity:0;transform:translateY(10px)}
.reel.armed .beat.in{opacity:1;transform:none}
.b-when{font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.b-meta{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.b-meta.lock{color:var(--accent-2)}
.b-sys{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:var(--s-5) 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:center}
.msg{display:flex;gap:var(--s-6);align-items:flex-start}
.msg p{font-size:var(--fs-sub);line-height:1.6;color:var(--ink);letter-spacing:-.006em;background:var(--paper-2);padding:var(--s-6) var(--s-7);flex:1}
.msg.me{justify-content:flex-end}
.msg.me p{background:var(--ink);color:var(--paper);flex:0 1 auto;max-width:82%}
.mrow{display:flex;flex-direction:column;gap:var(--s-2);padding-bottom:var(--s-7);border-bottom:1px solid var(--rule)}
.mrow-h{display:flex;align-items:baseline;gap:var(--s-5)}
.mrow-h b{font-size:var(--fs-sub);font-weight:600;letter-spacing:-.01em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow-h span{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-4)}
.mrow p{font-size:var(--fs-meta);color:var(--ink-3);line-height:1.5}
.mrow .quote{font-family:var(--serif);font-weight:300;font-size:var(--fs-sub);line-height:1.6;color:var(--ink);margin-top:var(--s-3)}
.learn{display:flex;flex-direction:column;gap:var(--s-4)}
.learn-k{display:flex;align-items:center;gap:var(--s-4);font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.learn b{font-family:var(--serif);font-weight:400;font-size:var(--fs-lg);letter-spacing:-.02em;font-feature-settings:"onum"}
.learn span{font-size:var(--fs-meta);color:var(--ink-3)}
.bar{height:2px;background:var(--rule);margin-top:var(--s-3)}
.bar i{display:block;height:2px;background:var(--accent);width:0}
.steps-l{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-6)}
.steps-l li{display:flex;align-items:baseline;gap:var(--s-6);font-size:var(--fs-meta);line-height:1.5;color:var(--ink-3);letter-spacing:-.002em;
  opacity:0;transform:translateY(6px);transition:opacity .18s steps(2,end),transform .18s ease}
.steps-l li.on,.steps-l li.in{opacity:1;transform:none;color:var(--ink-2)}
.steps-l li em{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;color:var(--accent-2);flex-shrink:0}
/* 取值来自原型 .im-card / .im-card-kicker / .im-card-title / .im-card-why */
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule-2);border-bottom-left-radius:7px;
  padding:var(--s-6) var(--s-7);box-shadow:0 1px 1px oklch(40% .05 var(--n-hue)/.05),0 16px 38px -28px oklch(40% .05 var(--n-hue)/.55)}
.card-eb{display:inline-flex;align-items:center;gap:var(--s-3);align-self:flex-start;font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin-bottom:var(--s-3)}
.card-t{font-family:var(--serif);font-weight:500;font-size:var(--fs-body);letter-spacing:-.016em;line-height:1.38;color:var(--ink)}
.card.done{background:var(--paper-2);border-color:var(--rule);box-shadow:none}
.card.done .card-eb{color:var(--ink-4)}
.card.done .card-t{color:var(--ink-2)}
.why{list-style:none;padding:0;margin:var(--s-5) 0 0;display:grid;gap:var(--s-3)}
.why li{position:relative;padding-left:var(--s-7);font-size:var(--fs-meta);line-height:1.5;color:var(--ink-2);letter-spacing:-.003em}
.why li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:1px;background:color-mix(in oklab,var(--accent) 55%,transparent)}
/* 回信面板：原型里是 .im-draft-card —— 纸白面 + 一圈发丝线，不是左侧粗轨 */
.letter{margin-top:var(--s-5);background:color-mix(in oklab,#fff 70%,transparent);border:1px solid var(--rule);padding:var(--s-5) var(--s-6)}
.letter.edit{border-color:color-mix(in oklab,var(--mark-fold) 34%,var(--rule))}
.letter-h{display:flex;align-items:center;gap:var(--s-4);font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-4)}
.letter p{font-family:var(--serif);font-weight:300;font-size:var(--fs-sub);line-height:1.66;color:var(--ink);letter-spacing:-.006em}
.letter del{color:var(--ink-4);text-decoration-color:var(--mark-fold)}
.letter ins{text-decoration:none;box-shadow:0 1px 0 var(--mark-fold)}
.hold{height:46px;background:var(--paper-3);display:flex;align-items:center;padding:0 var(--s-4);position:relative;overflow:hidden}
.hold-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);z-index:0}
.hold-knob{position:relative;z-index:1;width:38px;height:38px;background:var(--accent);flex-shrink:0}
.hold-lb{position:relative;z-index:1;flex:1;text-align:center;font-size:var(--fs-label);font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.hold.arm .hold-lb{color:var(--paper)}
.after{display:flex;flex-direction:column;gap:var(--s-3);padding-top:var(--s-8);border-top:1px solid var(--rule)}
.after b{font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.after span{font-size:var(--fs-meta);line-height:1.55;color:var(--ink-3)}
.sent{display:flex;align-items:baseline;gap:var(--s-5);padding-top:var(--s-8);border-top:1px solid var(--rule);font-size:var(--fs-meta);color:var(--ink-3);margin-top:var(--s-9)}
.sent b{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--accent-2);font-weight:700;flex-shrink:0}
.undo{position:absolute;left:var(--s-8);right:var(--s-8);bottom:var(--s-9);z-index:3;display:none;align-items:center;gap:var(--s-6);padding:var(--s-6) var(--s-7);
  background:oklch(21% .011 var(--n-hue)/.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--paper)}
.scr.undo-on .undo{display:flex}
.undo span{font-size:var(--fs-meta)}
.undo em{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.11em;color:var(--cream-2);font-variant-numeric:tabular-nums}
.undo b{margin-left:auto;font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 1px 0 var(--cream-3)}
.quiet-note{display:flex;flex-direction:column;gap:var(--s-5);align-items:center;text-align:center;padding:var(--s-14) var(--s-8)}
.quiet-note b{font-family:var(--serif);font-weight:300;font-size:var(--fs-lg);letter-spacing:-.024em;color:var(--ink-2)}
.quiet-note span{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}

/* ---------- 收尾：品牌 + 申请 ---------- */
.close{background:var(--ink);color:var(--paper);padding:var(--s-17) 0;overflow:hidden;position:relative}
.close-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.8fr);gap:clamp(var(--s-13),5vw,var(--s-17));align-items:start;padding:0 var(--pad)}
.close-word{display:flex;align-items:flex-end;gap:var(--s-10);width:120%}
.close-word i[data-live]{color:var(--paper);margin-bottom:.06em}
.close-word b{font-family:var(--serif);font-weight:300;font-size:var(--w-word);letter-spacing:-.055em;line-height:.78;color:var(--paper);white-space:nowrap}
.slogan{font-family:var(--serif);font-weight:300;font-size:var(--w-h2);line-height:1.12;letter-spacing:-.04em;margin-top:var(--s-13);padding-top:var(--s-11);border-top:1px solid var(--cream-r);max-width:24em}
.close-p{font-size:var(--fs-strong);line-height:1.8;color:var(--cream-2);margin-top:var(--s-11);max-width:26em}
.apply{background:var(--paper);color:var(--ink);padding:clamp(var(--s-11),2vw,var(--s-15))}
.apply-eb{display:inline-flex;align-items:center;gap:var(--s-5);font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--accent-2)}
.apply-h{font-family:var(--serif);font-weight:300;font-size:clamp(25px,2.2vw,32px);letter-spacing:-.034em;line-height:1.14;margin-top:var(--s-8)}
.apply-sub{margin-top:var(--s-8);font-size:var(--fs-sub);line-height:1.74;color:var(--ink-3)}
.form{display:grid;gap:var(--s-9);margin-top:var(--s-12);padding-top:var(--s-12);border-top:1px solid var(--ink)}
.f{display:flex;flex-direction:column;gap:var(--s-4)}
.f label{font-family:var(--mono);font-size:var(--fs-caption);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.f input,.f select,.f textarea{font-family:var(--ui);font-size:var(--fs-body);color:var(--ink);background:var(--paper-2);border:1px solid var(--rule-2);border-radius:0;
  padding:var(--s-7) var(--s-8);outline:none;box-shadow:inset 0 1px 2px oklch(21% .011 var(--n-hue)/.05);width:100%}
.f textarea{resize:none;min-height:74px;font-family:var(--serif);font-weight:300;font-size:var(--fs-compact);line-height:1.66}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ink);background:var(--paper)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8)}
.form-note{font-size:var(--fs-meta);color:var(--ink-4);line-height:1.6}
.form.sent-ok{display:none}
.thanks{display:none;flex-direction:column;gap:var(--s-8);margin-top:var(--s-12);padding-top:var(--s-12);border-top:1px solid var(--ink)}
.thanks.on{display:flex}
.thanks h3{font-family:var(--serif);font-weight:300;font-size:var(--fs-xl);letter-spacing:-.03em}
.thanks p{font-size:var(--fs-body);line-height:1.76;color:var(--ink-2)}

/* ---------- 文书页 ---------- */
.prose{max-width:820px;margin:0 auto;padding:var(--s-17) var(--pad)}
.prose .eb{display:inline-flex;align-items:center;gap:var(--s-6);font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--accent-2)}
.prose h1{font-family:var(--serif);font-weight:300;font-size:var(--w-h2);letter-spacing:-.042em;line-height:1.06;margin-top:var(--s-11);padding-bottom:var(--s-12);border-bottom:1px solid var(--ink)}
.prose .draft{margin-top:var(--s-12);padding:var(--s-8) var(--s-10);background:var(--paper-2);border-left:2px solid var(--ink);font-size:var(--fs-sub);color:var(--ink-2);line-height:1.66}
.prose h2{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.034em;line-height:1.14;margin-top:var(--s-16);padding-bottom:var(--s-8);border-bottom:1px solid var(--rule-2)}
.prose p{margin-top:var(--s-10);font-size:var(--fs-strong);line-height:1.84;color:var(--ink-2);text-wrap:pretty}
.prose p b{color:var(--ink);font-weight:600}
.prose ul{margin-top:var(--s-11);padding-left:0;list-style:none;display:grid;gap:var(--s-9)}
.prose li{position:relative;padding-left:var(--s-13);font-size:var(--fs-strong);line-height:1.78;color:var(--ink-2)}
.prose li::before{content:"";position:absolute;left:0;top:14px;width:16px;height:1px;background:var(--rule-2)}
.prose .rows{margin-top:var(--s-12);display:grid}
.prose .rows>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s-13);padding:var(--s-11) 0;border-top:1px solid var(--ink)}
.prose .rows>div:last-child{border-bottom:1px solid var(--rule)}
.prose .rows dt{font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--accent-2)}
.prose .rows dd{margin:0;font-size:var(--fs-strong);line-height:1.8;color:var(--ink-2)}
.prose .cta{margin-top:var(--s-16);display:flex;gap:var(--s-13);flex-wrap:wrap;align-items:center}
.prose .upd{margin-top:var(--s-15);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-4)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding:var(--s-15) var(--pad) var(--s-12);display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:var(--s-16);align-items:start}
.foot-b{display:flex;flex-direction:column;gap:var(--s-8)}
.foot-lock{display:flex;align-items:center;gap:var(--s-7)}
.foot-lock b{font-family:var(--serif);font-weight:300;font-size:clamp(30px,2.6vw,42px);letter-spacing:-.048em;line-height:.9}
.foot-b p{font-size:var(--fs-sub);color:var(--cream-3);line-height:1.7;max-width:26em}
.foot-col{display:flex;flex-direction:column;gap:var(--s-6)}
.foot-col span{font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.17em;text-transform:uppercase;color:var(--cream-3)}
.foot-col a{font-size:var(--fs-sub);color:var(--cream-2)}
.foot-col a:hover{color:var(--paper)}
.foot-rule{grid-column:1/-1;margin-top:var(--s-9);padding-top:var(--s-9);border-top:1px solid var(--cream-r);display:flex;gap:var(--s-11);flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.15em;text-transform:uppercase;color:var(--cream-3)}
.foot-rule span:last-child{margin-left:auto}

[data-page]{display:none}
[data-page].on{display:block}

@media(max-width:1080px){
  .stage{padding:calc(var(--pad) + 38px) var(--pad) var(--s-9)}
  .say{width:92vw;min-height:6.4em}
  .tl{gap:var(--s-4)}
  .tl b{width:16px}
  .tl-i>span{display:none}
  .close-in{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .f-row{grid-template-columns:1fr}
  .prose .rows>div{grid-template-columns:1fr;gap:var(--s-6)}
  .foot{grid-template-columns:1fr;gap:var(--s-13)}
  .say{min-height:8.6em}
}
@media (prefers-reduced-motion:reduce){
  body::before{display:none}
  .hint i::after{animation:none}
}

/* 原型组件在原型里是全屏浮层：官网里让它铺满整块屏（脱离卷轴的流，
   否则它是 column flex 的 0 基准项，高度算出来是 0）。组件自身几何不动。 */
.cs-host{position:absolute;inset:0;z-index:2;pointer-events:none;display:none}
body[data-scene="1"] .cs-host{display:block}
body[data-scene="1"] .reel{visibility:hidden}
.cs-host .mkw{display:inline-flex;line-height:0}