/* HW Browser 业务落地页——纸、墨线、一根铅笔画的金线。现行规范见 docs/DESIGN.md「官网」 */

:root {
  --cream: #f4eee3;
  --cream-deep: #efe7d9;
  --blush: #ecdcd3;
  --sage: #e3e6d5;
  --night: #1c1a17;
  --night-sky: #101219;
  --ink: #2b2925;
  --ink-soft: #6d675d;
  --ink-faint: #a8a196;
  --ink-night: #e9e2d3;
  --ink-night-soft: #9b9385;
  --red: #b4472c;
  --blue: #40598a;
  --gold: #b18b45;
  --green: #6e7c55;

  --hand-cn: "Long Cang", "KaiTi", "STKaiti", "Kaiti SC", "楷体", serif;
  --hand-en: "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--hand-cn);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 贯穿全页的金线：随网页一样高，滚到哪画到哪 */
.thread {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.paper { position: relative; z-index: 1; }

/* 开场加载：整页画完之前盖住纸面；进度条是手画的歪框加铅笔斜线，文字同样走手写画布 */
.opening {
  position: fixed; inset: 0; z-index: 100;
  background: var(--cream); color: var(--ink);
  display: grid; place-items: center;
  transition: opacity .26s;
}
.opening.gone { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .26s, visibility 0s .26s; }
.opening-inner { text-align: center; width: 300px; max-width: 84vw; }
.opening-text { font-family: var(--hand-cn); font-size: 22px; line-height: 1.4; margin: 20px 0 22px; color: var(--ink-soft); }
.progress-sketch { height: 22px; position: relative; border: 1px solid #8c7753; border-radius: 9px 7px 11px 5px; transform: rotate(-.8deg); padding: 4px; }
.progress-sketch::after { content: ""; position: absolute; inset: 2px -2px -2px 2px; border: 1px solid #ad926444; border-radius: 4px 9px 6px 10px; transform: rotate(1.2deg); }
.progress-sketch i { display: block; height: 100%; width: 3%; background: repeating-linear-gradient(108deg, #947342 0px, #947342 1px, transparent 1px, transparent 4px); transition: width .17s; border-radius: 5px; }
.progress-meta { display: flex; justify-content: space-between; font-family: var(--hand-cn); font-size: 17px; line-height: 1.4; margin-top: 13px; color: var(--ink-soft); }
.opening-percent { font-family: var(--hand-en); }

/* 粉笔痕：盖在最上面，不挡鼠标 */
.chalk {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* 顶栏：左边标志、右边快捷入口，滚动时一直在；本身透明，只有字和线 */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 1.4vw, 28px) clamp(26px, 2vw, 40px);
  color: var(--ink);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar.on-night { color: var(--ink-night); }
/* 标志与文字按基线对齐：标志底边落在文字基线上，高度等于大写字母高（字体加载后由脚本按实际字形再量一次） */
.corner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.corner-mark { width: 28px; height: 10.6px; display: block; }
.corner-name { font-family: var(--hand-en); font-size: clamp(16px, 1.05vw, 21px); line-height: 1; letter-spacing: 0.08em; }
.topnav { display: flex; align-items: center; gap: clamp(26px, 2vw, 40px); }
.top-link {
  position: relative;
  background: none;
  border: 0;
  padding: 4px 2px 7px;
  font: inherit;
  font-family: var(--hand-cn);
  font-size: clamp(16px, 1.05vw, 21px);
  letter-spacing: 0.1em;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.top-link::after {
  content: "";
  position: absolute;
  left: -3px; right: -3px; bottom: 0;
  height: 7px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'><path d='M1 5 C 20 2, 40 7, 60 4 S 100 2, 119 5' fill='none' stroke='%23b18b45' stroke-width='1.2' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  opacity: 0;
  transition: opacity 200ms ease;
}
.top-link:hover::after, .top-link:focus-visible::after { opacity: 0.9; }
.top-link:focus-visible { outline: none; }
.top-link:hover { color: var(--red); }
.topbar.on-night .top-link:hover { color: var(--gold); }

/* 每一张纸：一个板块占满一整屏，内容垂直居中（维护者 2026-09-07：一屏只放一种东西） */
.sheet {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10vh 0;
  /* 裁切放宽 2px：撕纸毛边往上多盖 2px，压住上一张纸的底边。两张纸的边都在同一个半像素上抗锯齿时会漏出一道黑线（2026-09-09 维护者 768×1024 实机） */
  overflow: clip;
  overflow-clip-margin: 2px;
}
.sheet--cream { background: var(--cream); }
.sheet--blush { background: var(--blush); }
.sheet--sage  { background: var(--sage); }
.sheet--night { background: var(--night); color: var(--ink-night); }

.sheet--open { padding-top: 12vh; padding-bottom: 8vh; }
.sheet--draft { padding: 0; }
.sheet--close { padding-bottom: 8vh; }

/* 撕纸毛边 */
.tear {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  height: 22px;
  display: block;
  pointer-events: none;
}
.tear--top { top: -2px; }
/* 星图屏顶上的毛边：上一屏的暖夜色纸撕开，露出下面更蓝更深的夜空 */
.sheet--sky > .tear { z-index: 10; }

/* 内容宽度随屏幕放大：960px 起，最宽 1480px（宽屏上不再是一小块） */
.scene {
  position: relative;
  width: 100%;
  max-width: min(1480px, 92vw);
  margin: 0 auto;
  padding: 0 24px;
}
.scene--wide {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px;
  align-items: center;
}
.scene--stack { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.copy { position: relative; z-index: 2; }
.copy--left  { grid-column: 1; }
.copy--right { grid-column: 2; }
.copy--center { text-align: center; max-width: clamp(620px, 46vw, 940px); }
.copy--later { margin-top: 24px; }

.art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.art--open { max-width: clamp(460px, 38vw, 780px); margin: 0 auto; }
.art--edge { position: absolute; left: 0; right: 0; bottom: -2px; height: 160px; }
/* 草稿整屏：铺满所在板块，按实际像素现画，多出来的裁掉 */
.art--draft { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
/* 首屏与收尾两侧的空白：铺一层跟着屏幕大小现画的小画，不挡内容 */
.art--margin { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; }
.sheet--open .scene, .sheet--close .scene { z-index: 1; }

/* 手写字：所有可见文字都画在小画布上（维护者 2026-09-07：全部文字必须是手写，不能是选得中的字体） */
.hand-text { display: inline-block; vertical-align: baseline; max-width: 100%; }
.hand-src { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.art--grass { height: 140px; }
.art--close { max-width: clamp(520px, 34vw, 660px); }
.art--sampler, .art--ripples { max-width: clamp(900px, 66vw, 1360px); }

/* 星图屏：原站渲染画在夜色纸面上（叠一层夜色把纯黑抬成纸色、暖色环境光、纸纹），上面再铺一张铅笔星图 */
/* 两屏高、画面钉住：滚动进度由 astra-galaxy.js 写进 --hw-shape / --hw-copy-a / --hw-copy-b（0..1）。
   sheet 默认 overflow: hidden 会把 sticky 关在板块里，这里必须放开 */
.sheet--sky { display: block; padding: 0; z-index: 4; background: var(--night-sky); height: 200vh; min-height: 1080px; overflow: visible; }
.sheet--sky > .scene { position: sticky; top: 0; max-width: none; padding: 0; height: 100vh; min-height: 0; overflow: hidden; }
.sheet--sky[data-form="fallback"] .sky-foot .note--tiny { display: none; }
.sky-words { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.sky-words--galaxy { opacity: var(--hw-copy-a, 1); }
.sky-words--hw { opacity: var(--hw-copy-b, 0); }
.sheet--sky .copy { position: absolute; left: 0; right: 0; margin: 0 auto; top: clamp(92px, 11.5vh, 136px); padding: 0 24px; }
/* 脚注离底边远一点：入场观察器不看视口最下面 12%，贴底的字永远不会淡入 */
.sky-foot { position: absolute; bottom: max(100px, 13vh); left: clamp(150px, 9vw, 210px); right: 0; }
.sky-foot .note { margin: 0; text-align: left; }
.sky-foot .note--tiny { margin-top: 6px; }
/* 叠在星点上的手写字：底下垫一圈夜色，穿过星臂也读得清 */
.sheet--sky .copy .hand-text, .sky-foot .hand-text { filter: drop-shadow(0 0 3px rgba(20,18,15,0.95)) drop-shadow(0 0 10px rgba(20,18,15,0.8)); }
/* 容器底色留纯黑：夜色叠层用 screen 混合，黑 screen 夜色正好等于夜色，画布就绪前后颜色不跳 */
.astra-galaxy { position: absolute; inset: 0; isolation: isolate; overflow: hidden; background: #000; }
.astra-canvas, .astra-poster, .astra-tint, .astra-ambient, .astra-grain, .astra-vignette, .art--chart, .art--thread-loop { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.astra-canvas { opacity: 0; }
.astra-galaxy[data-state="ready"] .astra-canvas { opacity: 1; }
.astra-poster { display: none; object-fit: cover; }
.astra-galaxy[data-state="fallback"] .astra-poster { display: block; }
/* lighten：画布上比夜色暗的地方一律变成夜色本身，星点不受影响；这一屏的底色才与上下夜色纸面完全相同 */
.astra-tint { z-index: 1; background: var(--night-sky); mix-blend-mode: lighten; }
/* 环境光反过来：暖在中间、四边回到夜色，这一屏的上下边才和相邻夜色纸面接得上（2026-09-08 维护者指出边缘不自然） */
.astra-ambient { z-index: 2; opacity: 0; mix-blend-mode: plus-lighter; background: radial-gradient(ellipse 65% 45% at 50% 60%, rgb(26,34,56) 0%, rgba(26,34,56,0.45) 45%, rgba(26,34,56,0) 100%); }
.astra-galaxy[data-state="ready"] .astra-ambient { animation: astra-ambient-fade-in 5.5s ease-out both; }
.astra-galaxy[data-state="fallback"] .astra-ambient { opacity: 0.55; }
@keyframes astra-ambient-fade-in { to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .astra-galaxy[data-state="ready"] .astra-ambient { animation: none; opacity: 0.55; } }
.astra-grain { z-index: 3; opacity: 0.16; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.9 0 0 0 0 0.83 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 220px 220px; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
/* 暗角用夜色本身：只把边上的星点压暗，不把底色压得比相邻纸面更黑 */
.astra-vignette { z-index: 4; background: radial-gradient(ellipse at 50% 60%, transparent 50%, rgba(16,18,25,0.35) 75%, rgba(16,18,25,0.85) 100%); }
/* 聚成 HW 后星图连标注一起退干净（2026-09-08 维护者：HW 后面的字不能还在） */
.art--chart { z-index: 5; overflow: hidden; opacity: calc(1 - var(--hw-shape, 0)); }
.art--thread-loop { z-index: 5; overflow: hidden; }
.astra-galaxy[data-state="fallback"] .art--chart { opacity: 0.6; }
.astra-drag { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; border: 0; background: transparent; cursor: grab; touch-action: pan-y pinch-zoom; }
.astra-drag[data-dragging="true"] { cursor: grabbing; }
.astra-drag:focus-visible { outline: 1px dashed var(--gold); outline-offset: -6px; }
.astra-drag:disabled { visibility: hidden; }
@media (max-width: 760px) { .sheet.sheet--sky { padding: 0; } .sky-foot { left: 0; padding: 0 24px; } .sky-foot .note { text-align: center; } }

/* 文字：少、手写；字号随屏幕宽度放大（宽屏上不再显小） */
.brand {
  margin: -8px 0 0;
  text-align: center;
  font-family: var(--hand-en);
  font-weight: 400;
  font-size: clamp(30px, 2.5vw, 52px);
  letter-spacing: 0.06em;
  color: var(--ink);
}
.title {
  margin: 0 0 12px;
  font-weight: 400;
  font-size: clamp(28px, 2.2vw, 44px);
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.line {
  margin: 0 0 6px;
  font-size: clamp(17px, 1.25vw, 25px);
  color: var(--ink-soft);
}
.sheet--night .line { color: var(--ink-night-soft); }
.sheet--night .title { color: var(--ink-night); }
.note {
  margin: 10px 0 0;
  font-size: clamp(15px, 1.05vw, 21px);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.note--center { text-align: center; }
.note--tiny { font-size: clamp(13px, 0.9vw, 18px); color: var(--ink-faint); letter-spacing: 0.12em; }
.sheet--night .note { color: var(--ink-night-soft); }

.actions {
  display: flex;
  gap: clamp(40px, 3vw, 64px);
  margin-top: 14px;
}
.action {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: clamp(18px, 1.3vw, 26px);
  letter-spacing: 0.1em;
  padding: 6px 4px 8px;
}
.action::after {
  /* 手画的下划线：一条抖动的 SVG 线 */
  content: "";
  position: absolute;
  left: -4px; right: -4px; bottom: 0;
  height: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'><path d='M1 5 C 20 2, 40 7, 60 4 S 100 2, 119 5' fill='none' stroke='%23b18b45' stroke-width='1.2' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  opacity: 0.9;
}
.action:hover { color: var(--red); }

button.action {
  background: none;
  border: 0;
  font: inherit;
  font-family: var(--hand-cn);
  cursor: pointer;
}

/* 联系我们：一张纸卡片 */
.contact {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 41, 37, 0.35);
  opacity: 0;
  transition: opacity 200ms ease;
}
.contact[hidden] { display: none; }
.contact.is-open { opacity: 1; }
.contact-card {
  position: relative;
  width: min(clamp(360px, 26vw, 520px), calc(100vw - 40px));
  aspect-ratio: 360 / 220;
  background: var(--cream);
  box-shadow: 0 18px 40px rgba(43, 41, 37, 0.25);
  transform: rotate(-1deg) translateY(8px);
  transition: transform 220ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
}
.contact.is-open .contact-card { transform: rotate(-1deg) translateY(0); }
.contact-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.contact-close {
  position: absolute;
  top: 10px; right: 14px;
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1;
}
.close-x { width: 18px; height: 18px; display: block; }
.contact-close:hover, .contact-close:focus-visible { color: var(--red); }
/* KG1777 旁边一枚手画的复制按钮：两张叠着的小纸，点了变成一个勾 */
.contact-copy {
  align-self: center;
  width: clamp(40px, 2.6vw, 54px); height: auto; padding: 0; margin-left: 6px;
  background: none; border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  transition: transform 160ms ease;
}
.copy-icon { width: 100%; height: auto; display: block; }
.contact-copy:hover, .contact-copy:focus-visible { color: var(--red); transform: rotate(-6deg) scale(1.08); }
.contact-copy .copy-tick { display: none; }
.contact-copy.is-done .copy-tick { display: block; }
.contact-copy.is-done .copy-pages { display: none; }
.contact-copy.is-done { color: var(--green); }
.contact-title { margin: 0; font-size: clamp(20px, 1.4vw, 28px); letter-spacing: 0.2em; color: var(--ink); }
.contact-line { margin: 4px 0 0; display: flex; align-items: baseline; gap: 12px; }
.contact-label { font-family: var(--hand-en); font-size: clamp(18px, 1.25vw, 25px); color: var(--ink-soft); letter-spacing: 0.1em; }
.contact-value { font-family: var(--hand-en); font-size: clamp(34px, 2.3vw, 46px); color: var(--ink); letter-spacing: 0.12em; }
.contact-hint { margin: 2px 0 0; font-size: clamp(13px, 0.9vw, 18px); color: var(--ink-faint); letter-spacing: 0.08em; }
.contact-value--small { font-size: 22px; }
.contact-card.is-shaking { animation: card-shake 320ms ease; }
@keyframes card-shake {
  0%, 100% { transform: rotate(-1deg) translateX(0); }
  25% { transform: rotate(-1deg) translateX(-6px); }
  50% { transform: rotate(-1deg) translateX(5px); }
  75% { transform: rotate(-1deg) translateX(-3px); }
}

/* 下载前的访问密码 */
.gate-form { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 2px; }
.gate-form[hidden] { display: none; }
.gate-label { font-size: 14px; color: var(--ink-soft); letter-spacing: 0.16em; }
.gate-row { display: flex; align-items: flex-end; gap: 10px; }
.gate-input {
  width: 150px;
  padding: 4px 6px 2px;
  border: 0;
  border-bottom: 1.4px solid var(--ink);
  border-radius: 0;
  background: transparent;
  font-family: var(--hand-en);
  font-size: 22px;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-align: center;
  outline: none;
}
.gate-input:focus { border-bottom-color: var(--gold); }
.gate-submit {
  background: none;
  border: 1.4px solid var(--ink);
  border-radius: 40% 60% 50% 50% / 55% 45% 55% 45%;
  width: 36px; height: 36px;
  font-family: var(--hand-cn);
  font-size: 17px;
  color: var(--ink);
  cursor: pointer;
}
.gate-submit:hover { color: var(--red); border-color: var(--red); }
.gate-msg { min-height: 18px; margin: 2px 0 0; font-size: 13px; color: var(--red); letter-spacing: 0.1em; }
.gate-ok { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
.gate-check { width: 40px; height: 27px; display: block; }
.gate-ok[hidden] { display: none; }
.gate-link {
  position: relative;
  font-size: 20px;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-decoration: none;
  padding: 2px 4px 8px;
}
.gate-link::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px; bottom: 0;
  height: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'><path d='M1 5 C 20 2, 40 7, 60 4 S 100 2, 119 5' fill='none' stroke='%23b18b45' stroke-width='1.2' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}
.gate-link:hover { color: var(--red); }
.gate-link:focus-visible { outline: none; }

.sign {
  margin: 28px 0 0;
  font-size: clamp(15px, 1.05vw, 21px);
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

/* 画线动画：进入视口才开始画 */
.draw path, .draw circle, .draw line, .draw polyline {
  transition: none;
}
.reveal { opacity: 0; transform: translateY(6px); transition: opacity 900ms ease, transform 900ms ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .sheet { padding: 9vh 0; }
  .scene--wide { grid-template-columns: 1fr; gap: 12px; }
  .copy--left, .copy--right { grid-column: 1; }
  .art--lines { order: 2; }
  .title { font-size: 24px; }
  .line { font-size: 16px; }
  .actions { gap: 28px; }
  .topbar { padding: 14px 16px; }
  .corner-name { display: none; }
  .topnav { gap: 18px; }
  .top-link { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* 星图就是收尾：沿用 landing.css 的纸色、墨色、字号与手写绘制，不引入第二套字体。 */
.sheet--sky { height: 260vh; min-height: 1120px; }
.sheet--sky > .scene { height: 100vh; height: 100svh; }
.finale-paper {
  position: absolute; inset: 0; z-index: 8; overflow: hidden;
  background: var(--cream); color: var(--ink);
}
.finale-paper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' opacity='.7' filter='url(%23p)'/%3E%3C/svg%3E");
}
.finale-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.finale-heading { position: absolute; top: 17.3%; left: 20px; right: 20px; text-align: center; }
.sheet--sky .finale-paper .title { color: var(--ink); margin: 0; }
.sheet--sky .finale-paper .line, .sheet--sky .finale-paper .note { color: var(--ink-soft); }
.sheet--sky .finale-paper .hand-text { filter: none; }
.finale-details { position: absolute; inset: 0; pointer-events: none; }
.finale-caption { position: absolute; left: max(38px, 4.5%); top: 62%; }
.finale-caption--right { left: auto; right: 8%; top: 82%; }
.finale-copy { position: absolute; left: 21.7%; top: 70.5%; text-align: left; }
.finale-copy .brand { text-align: left; margin: 0; font-size: clamp(28px, 2.5vw, 48px); }
.finale-copy .line { margin-top: 4px; font-size: clamp(17px, 1.25vw, 25px); }
.finale-actions {
  position: absolute; left: 70%; top: 72.5%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px; width: 236px;
}
.finale-actions > * { pointer-events: auto; }
button.action.finale-download {
  position: relative; isolation: isolate; display: grid; place-items: center;
  width: 236px; height: 62px; padding: 5px 16px; margin: 0;
  font-family: var(--hand-cn); font-size: clamp(18px, 1.3vw, 26px); color: var(--cream);
}
.finale-download::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 236 62' preserveAspectRatio='none'%3E%3Cpath d='M4 5Q49 2 94 3L187 4L230 2Q234 22 233 37L231 57Q156 59 121 58L64 60L3 57Q1 31 4 5Z' fill='%232b2925'/%3E%3Cpath d='M1 7Q93 3 174 5L231 3L235 5M3 60Q101 62 190 60L233 59' fill='none' stroke='%232b2925' stroke-width='.8' opacity='.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transition: transform 160ms ease;
}
.finale-download:hover::before { transform: translateY(-1px) rotate(-.3deg); }
.finale-download::after { display: none; }
button.action.finale-contact { margin: 0; padding: 3px 5px 8px; font-size: clamp(17px, 1.15vw, 22px); color: var(--ink); }
.finale-actions button:focus-visible { outline: 2px dashed var(--gold); outline-offset: 5px; }
.finale-footer {
  position: absolute; left: 5%; right: 5%; bottom: 3%;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.finale-footer .sign, .finale-footer .note { margin: 0; font-size: clamp(13px, .9vw, 18px); letter-spacing: .09em; }
.finale-footer .sign { font-family: var(--hand-en); }
.finale-seal { position: absolute; width: 36px; height: 36px; left: 6%; top: 78%; opacity: .6; color: var(--red); }
.sheet--sky > .scene > .art--thread-loop { z-index: 9; pointer-events: none; }
.finale-fallback { position: absolute; bottom: 7%; right: 6%; font-size: 14px; }
.finale-fallback[hidden] { display: none; }
/* 增强未成功时，不用透明度藏掉最终内容。只有 mount 成功才启用滚动状态。 */
.sheet--sky:not(.finale-motion) .sky-words { display: none; }
.sheet--sky:not(.finale-motion) > .scene > .art--thread-loop { display: none; }
.finale-motion .finale-art { opacity: var(--finale-ink, 0); }
.finale-motion .finale-heading { opacity: var(--finale-title, 0); }
.finale-motion .finale-details { opacity: var(--finale-details, 0); }
.finale-motion .finale-details[inert] { pointer-events: none; }
.finale-motion .finale-details[inert] button { pointer-events: none; }
.finale-motion .art--chart { opacity: var(--finale-chart, 1); }
.finale-motion .sky-words--galaxy { opacity: var(--finale-night, 1); }
@media (min-width: 1750px) {
  .finale-actions, button.action.finale-download { width: 244px; }
  button.action.finale-download { height: 66px; }
}
@media (max-width: 1050px) and (min-width: 761px) {
  .finale-copy { left: 14%; top: 70.5%; }
  .finale-copy .brand { font-size: 29px; }
  .finale-copy .line { font-size: 17px; }
  .finale-actions { left: 76%; width: 188px; }
  button.action.finale-download { width: 188px; height: 54px; font-size: 20px; }
  .finale-caption, .finale-caption--right { display: none; }
}
@media (max-width: 760px) {
  .sheet--sky { height: 265vh; min-height: 1120px; }
  .finale-heading { top: 21%; left: 10px; right: 10px; }
  .sheet--sky .finale-heading .title { font-size: clamp(25px, 7.2vw, 34px); }
  .finale-copy { top: 56.7%; left: 16px; right: 16px; text-align: center; }
  .finale-copy .brand { text-align: center; font-size: 29px; }
  .finale-copy .line { font-size: clamp(17px, 4.7vw, 21px); }
  .finale-actions { left: 50%; top: 72.7%; gap: 10px; width: 216px; }
  button.action.finale-download { width: 216px; height: 57px; font-size: 22px; }
  button.action.finale-contact { font-size: 19px; }
  .finale-footer { bottom: 2.5%; justify-content: center; flex-wrap: wrap; gap: 5px 14px; }
  .finale-footer .sign { font-size: 14px; }
  .finale-footer .note { display: none; }
  .finale-caption, .finale-caption--right, .finale-seal { display: none; }
  .finale-fallback { bottom: 6%; left: 12px; right: 12px; text-align: center; }
}
@media (max-height: 630px) and (min-width: 761px) {
  .finale-heading { top: 15.5%; }
  .sheet--sky .finale-heading .title { font-size: 28px; }
  .finale-copy .brand { font-size: 29px; }
  .finale-copy .line { font-size: 17px; }
  .finale-actions { top: 72.5%; gap: 4px; }
  button.action.finale-download { height: 50px; font-size: 21px; }
  button.action.finale-contact { font-size: 17px; }
  .finale-footer { bottom: 2%; }
  .finale-caption { font-size: 16px; }
  .finale-seal { width: 29px; height: 29px; }
}
@media (max-height: 600px) and (max-width: 760px) {
  .finale-copy .brand { font-size: 24px; }
  .finale-copy .line { margin-top: 0; font-size: 16px; }
  .finale-actions { top: 72.2%; gap: 3px; }
  button.action.finale-download { height: 47px; font-size: 20px; }
  button.action.finale-contact { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .finale-download::before { transition: none; }
  .finale-download:hover::before { transform: none; }
}

/* ---------- 2026-09-09 并入的第二版规则：开场时序、首屏两侧小物、手绘滚动条、联系卡纸面、尾屏 HW Studio；写在前面的旧规则由这里覆盖 ---------- */
/* 开场时序（维护者 2026-09-09）：加载中不该出现的东西第一帧就藏着——html 标签自带 is-loading，这段样式内联在 head 里，
   不等任何脚本；landing.js 只按顺序放它们出来：open-topbar（顶栏）→ open-copy（标题与两行小字）→ open-dots（点线小箭头）→ 去掉 is-loading 解锁滚动 */
.opening { display: block; background: transparent; }
.opening.gone { transition: opacity .4s, visibility 0s .4s; }
html.is-loading { overflow: hidden; }
.topbar { transition: opacity .7s ease; }
html.is-loading:not(.open-topbar) .topbar { opacity: 0; transition: none; pointer-events: none; }
.sheet--open .brand, .sheet--open .note { transition: opacity .9s ease, transform .9s ease; }
.sheet--open .note { transition-delay: .2s; }
.sheet--open .note--tiny { transition-delay: .4s; }
html.is-loading:not(.open-copy) .sheet--open :is(.brand, .note) { opacity: 0; transform: translateY(6px); transition: none; }
.open-dots { transition: opacity .8s ease; }
html.is-loading:not(.open-dots) .open-dots { opacity: 0; transition: none; }
/* 红火花与金线：加载完成后火花先出现，金线再从它那里长出来（可见长度由 landing.js 推进） */
.open-spark { transition: opacity .5s ease; }
html.is-loading:not(.open-spark) .open-spark { opacity: 0; transition: none; }
#thread { transition: opacity .6s ease; }
html.is-loading:not(.open-thread) #thread { opacity: 0; transition: none; }
.hw-scrollbar { transition: opacity .6s ease; }
html.is-loading .hw-scrollbar { opacity: 0; pointer-events: none; }
/* 文字与金线排在首屏 HW 正下方（精确位置由 landing.js 量出来）；文字等真字体到了再显示 */
.opening-inner { position: fixed; left: 50%; top: 58vh; transform: translateX(-50%); width: 300px; max-width: 84vw; text-align: center; }
.opening-text { margin: 0 0 6px; transform: translate(var(--boil-x, 0), var(--boil-y, 0)); }
.progress-sketch { border: 0; padding: 0; height: 26px; transform: none; overflow: visible; }
.progress-sketch::after { display: none; }
.progress-crayon { display: block; position: relative; width: 100%; height: 100%; }
.progress-meta { margin-top: 4px; transform: translate(calc(var(--boil-x, 0) * -1), var(--boil-y, 0)); }
.opening-text, .progress-meta { opacity: 0; transition: opacity .5s ease; }
.opening.fonts-ready .opening-text, .opening.fonts-ready .progress-meta { opacity: 1; }

/* 联系卡与下载卡：纸面就是手画那圈黑线围起来的形状（填色画在 contact-frame 里），卡片本身不铺方底、不带方影 */
.contact-card { background: transparent; box-shadow: none; }
.contact-frame { filter: drop-shadow(0 14px 26px rgba(43, 41, 37, 0.35)); }
.contact-card > :not(.contact-frame) { position: relative; z-index: 1; }
.contact-card > .contact-close { position: absolute; }
.contact-plane { width: 50px; height: 32px; display: block; margin: 0 -2px -7px 0; }
/* TG 与号码改用中文手写字体的字形，跟下面提示里的号码一个写法（维护者 2026-09-09）；提示颜色加深 */
.contact-label, .contact-value { font-family: var(--hand-cn); }
.contact-hint { color: var(--ink-soft); }

/* 收尾纸面：HW 从纸团展开时字形里的折痕，展平后淡掉；墨迹按 --finale-ink 淡入 */
.finale-motion .finale-art { opacity: 1; }
.finale-motion .finale-art .finale-ink { opacity: var(--finale-ink, 0); }
.finale-art .finale-creases { opacity: var(--finale-crease, 0); }
/* 尾屏页脚只剩居中的 HW Studio @ 2026（维护者 2026-09-09）；窄屏上标志往上放、品牌行往下挪，两者不挤 */
.finale-footer { justify-content: center; }
@media (max-width: 760px) {
  .finale-copy { top: 54%; }
}

/* 星图屏拉到三屏高：滚两屏才走完，银河有时间成形（维护者 2026-09-09） */
.sheet--sky { height: 300vh; }

/* 手绘滚动条：有鼠标的设备藏掉系统滚动条，用自己画的 */
@media (hover: hover) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
  .hw-scrollbar { position: fixed; top: 18px; bottom: 18px; right: 6px; width: 14px; z-index: 40; display: none; }
  .hw-scrollbar.is-scrollable { display: block; }
  .hw-scrollbar-track { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hw-scrollbar-thumb { position: absolute; top: 0; left: 0; width: 14px; cursor: grab; touch-action: none; }
  .hw-scrollbar-thumb svg { display: block; width: 100%; height: 100%; }
  .hw-scrollbar.is-dragging .hw-scrollbar-thumb { cursor: grabbing; }
  .hw-scrollbar-thumb:hover svg, .hw-scrollbar.is-dragging svg { filter: drop-shadow(0 0 0.4px currentColor); }
}
#home .scene > .note, #gate .scene > .note { width: 100%; }
#gate .scene > .note { margin-top: 0; }
#gate .art--ripples { overflow: visible; }
[data-classic-layer] image { pointer-events: none; user-select: none; }
@media (max-width: 760px) {
  #gate .art--ripples { aspect-ratio: 705 / 500; }
}
@media (prefers-reduced-motion: reduce) { [data-classic-layer] { animation: none !important; transition: none !important; } }