/* ============================================================
   《划亮》 kesixu.com — 设计宪法见 ../AGENTS.md
   世界观：一间黑屋子，唯一光源是访客划亮的火柴。
   基线（无 JS / reduced-motion / JS 异常）：整页静态、完整可读；
   无 JS 时灯保持暗色可读，JS 基线路径会补 .lit 点亮。
   .fx 作用域：仅在 JS + 允许动效时才进入"待点亮"态。
   ============================================================ */

/* SVG <defs> 容器（姓名渐变）:CSP style-src 'self' 禁内联 style,类承载定位 */
.svg-defs { position: absolute; }

:root {
  --ink:   #0d0b09;
  --ember: #b33a1e;
  --flame: #ff6b35;
  --amber: #ffa94d;
  --gold:  #ffd28a;
  --paper: #f2ece1;
  --smoke: #8a8378;
  --smoke-dim: #6f695f;
  --char:  #2a2019;            /* 未点燃的引信/物件色 */
  --gutter: clamp(24px, 7vw, 52px);
  /* 手机排版使用固定标尺，不让视口宽度改变字面大小。 */
  --type-whisper: 20px;
  --type-hero-name: 92px;
  --type-latin: 17px;
  --type-tagline: 16px;
  --type-echo: 13px;
  --type-about: 22px;
  --type-section: 36px;
  --type-sub: 16px;
  --type-card-title: 28px;
  --type-card-body: 15px;
  --type-meta: 14px;
  --type-sky: 24px;
  --type-keep: 28px;
  --display: "LXGW WenKai", "Noto Serif SC", "Songti SC", serif;
  --echo-font: "EB Garamond", Georgia, "Times New Roman", serif;
  --body-font: "Segoe UI", -apple-system, "Helvetica Neue",
               "PingFang SC", "HarmonyOS Sans SC", "MiSans",
               "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

@font-face {
  font-family: "LXGW WenKai";
  src: url("/assets/portfolio-aidrug-runtime/wenkai-portfolio-2679ccfdc6f0.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/vibecoding/fonts/garamond-italic-subset.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--ink);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: geometricPrecision;
  overflow-x: clip;
}

body {
  background:
    radial-gradient(72% 48% at 73% 10%, rgba(179, 58, 30, .07), transparent 68%),
    radial-gradient(120% 90% at 50% 0%, #17110d 0%, var(--ink) 57%),
    radial-gradient(80% 45% at 18% 68%, rgba(255, 107, 53, .025), transparent 72%),
    var(--ink);
  color: var(--paper);
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

@media (min-width: 760px) and (min-height: 501px) {
  :root {
    --type-whisper: 26px;
    --type-hero-name: 154px;
    --type-latin: 22px;
    --type-tagline: 19px;
    --type-echo: 15px;
    --type-about: 36px;
    --type-section: 54px;
    --type-sub: 18px;
    --type-card-title: 30px;
    --type-card-body: 15.5px;
    --type-meta: 15px;
    --type-sky: 34px;
    --type-keep: 40px;
  }
}

/* 2% 级微噪点：打散近黑渐变与大半径辉光的 8-bit 色带（自托管 data URI，零请求） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .015;
  mix-blend-mode: normal;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAAAAAByaaZbAAAJO0lEQVR42gEwCc/2AKVNyhglMLsdbRMs3tYjey7ZHj9yH8sZcRdElNZJPJ1cNGC+MSAeaf7aoO7ouZl/XAB8KZn9r+WTJTzWVK9N+tcUJ6Cus/7pIy+K8iEfnuSRxbEL7LVWO/web5NCfsvI/ikAVeXNjkbcjtS3wnZNKlpNdncG+F2GkAJK1r2jQBvpyMvMyTX2zR9hImrhUziuGjQAAE0zug0kasBMgbG68j47+e71958rSTSvh/VSC2m5Sw2YLoW7VbZyqHJjes10Zvy2DgAOj/GEY7DksropcDR08GSsaPcA9bArPcZm9FveqizK7c0rUVdBDk3uSvKzT0MKBzQAR95jbA6AbJV7poTWQx+16tdCTQnhXQJMWEjyPR+m9zYdf2GNFTLnDiDipmaN5/R+AIRn5UbVPsjioSV72yVsmz5Pu0mBRu9wMMv5U3JS3M6t12S2oy+7Ca3q4QnEqZcgOQB1NSuHixRcikLYhM9M/actjh1d2SWJCC2FKnEihz7oBa3ViUIWejhShhlcZ5+caZQA5FuKsQmAEgcJYfN95Dbd/cmdbnWvZUfPsRtCBySC3FMcK8OQfJYX615QieQBhrqoAKV9EZ5vtl0Aq8Mq845mfwIuhy1JzBXJC5mbdytPx6b9TJFKFttHCHUrDxVEuDXA5wAZCX36hwHpIy8h8oEmh3hpduv8wyf1kxdlJ0upgptEBvYf+Ikyb/qUku3u7jxmnysA8giU6ifmicZrayYuSIa4Q485unb++MkMUQH75s+aSNWwwKE9qQCmrcs9ZAaUgb4hAMnHJ7jbjBiPNBqSTH+I36Fhv9sOzGgpGdLmRpL4GUFX8dSvkJiChc96mvfJPVVSJgBq/nDnqubaR2J8LlmvLqN6vIRnCtPE02vAiq0f/464QG4vin/EzOTdnwtBENny+gAAJcjv5X83ck9NN+orFABAdxObQYDfOTIkmWLGhXIABZrrjqF883h+DtKdHAtj/9cpAIN02b10/BGt17nKZQOVImn9Zp9jdu5xh5c3/V9y+NUcSskbbQxI1BoeXsnmoDkoVACoYV7vEJ/Bv6niVjcBKI8ps9c/asK2nt0sGfJkvuRipbryD9J+zxTAEe0gH4NjIK0AuYurFoaijZgBIQx3NvPuxYDc/EP+XQSbTXino+u5KGXIUX7QIRH2plLaNSSHK2oxANf/5Fh3RNXreD6Wlo+JvoKFZeB+X314TpBgpyHKgH12M+0SNALzduW/FJZ3PRlhYwAmvlvlhQM2s28TvK5IFmiCE2gFp9G+Xp8naBD99yDQM8pPLlPLitGRndUan7bU1QkAumTIz2gD3lDYOi7PuutTQgcaSMstvVdKspFSVyI3xPtlmkAW96EbxixScc9k8l1vABXMUMS3P0x+YhUTpTzH6ZzXnX/Zx7zk4FsLAfrueOTqW/LMNiJBt9y7LuIUFEIqoAAoG8FFDSE4Y0P7k1RxIbOBUaWM6UmC9WqGeaO+EmVdzlKOp8BWhzoYuOc1gcm+h8AAvEq4qSnidVoYl4GeoAARcUyU3dW6GEP6dBcLGwG1mza2ctOaRGi781FEB3xM5jEgAEqKzYcFHLPj/H9UABYfDM9feVEdNQZkSNNm1FmeIJkY9APA3+4p51lzNYV2Ez+rhgAaiN+Hl28rB1aFeGdRp2LHqHrC8PEDDd93nWzIJ1dKEA05NlKwSA4PFUYVIhchumYAIcQ2fmloORERLJP0M0MyaJajrNiFCrODkBi8pPOTD9MP3zKx8BhuLpNX3wBnkxsCALL7MPte/bGFUZFtdv9UOCn7Nae2MM3KLNgMvmmbhttXwnfrQBGyp0/mpVbt4IN2QACr7HliiJpPT36nslJ4p2CENFQ0ZMRNS5qY3oxkNzaPacbtEQbM33GX7QtIg88CfNwA13V1XD/o3aCFMtZ8zFCA2PfpCtFdpwXH+jYTgG9SZrIz6WjzCL2v0ulrXsg+thyBAIzDzB8GJtbXtIc3cpvNcMjsbFRCI2Lwc0q00++WQPC1dYjAgdpf9gGPt32apPX42wAruU6bxR0rpkewBwVrJJaAM0l3X+exTmrOVS6YZf1tKOA7PIfWd0fy/B3370n7fv8AVANSpO/+l+6/2tYmXLgOChepMPf4SRFt1ECtMLuu8muR3q/YgBqUlbX8zqqLsGj8ADypYqKZQSwUzM8ZzJk3Axdh8x7ASypsFOpZM1wS1zMGvEeehJpe1xGjCtwb/hQ81wDP5CIHxk/z0zQq8WxNB9oCBD4tbz5C8QmNfOZfGbtKK5b/64IaEAUfByjHn59U+R4Aobzg8FVKO7lT1fTF54uqlY8fqgdNntt+wMbAd+eRAKSGidhQFZNIS4z/sSv4w2Z3AJ4dyu5pggTF6yy1IHfLhKT0Z2BsYi9clLm3zkx+Fvy/Nr7tKU+hD7CPCjARaPhthQCP2jHkQ4ITrWZcwSoOGhG96vkgyz0ug6N3Lcld5VG9eHFYE4O0Hg4YhPccM0qiAmUAmOE18aW+g8c/v/bCVuF6SQbvYxJQcCe/R+QxxQsm562ld/Q7u0mpcR1c50rgTIjWANJ+Tw2Kl6tVhfs3oun3Ok4dbPSSPYNnut2Fenkxx5TUUx2WSQjirkfiAJJfuN4U0QBvjVxGXHVZZCgs/YxZaUZinWcFIdAcsauQ/C4H0fREiH9fuxJTvgK25CQ9tn2kwx8AlTf95A1ECnwtcl1VNJ+ADwkxY4UJ7XrjNLMwWxeLP+78jzg+Ps9GdHRL7MtUCcfXABLKGrmtzXur36TNG6ZLtH/YBbo3XyOm3WYKc0fXy+gXFBGIixIzgD4G3nkUkzmcsQBVPR6JK+5L4T9DltCTjHwsk+hxxWe765v08J4PfKpxYMTKBrRTeqWm+4qRbpcdC1EAIrLhH8bhtTdzT9WstEdnjTDziUHTNALSPP7LTNWPOMLn6pO0lbTIxKQD/8LjmV6bAErfwXYtqaV8pmjaBQ0Yg/6Zn9/cx+23FLPnBSJ1MtG/zU5g1/nN4a8vV7miuyafWQA4lq/XUJRqYNNdHja0FdIFAZ0Cm8syBw9kWf6ISWXSPkpQNg4zJlf779wfBqVJebUAjVYQiDIgsmLmxQobcMoW4Rt6f3IWUVihA+mb1oH9InzHcdOezPgLfCxYV7fCXwOUEiVswdF24vIAAAAASUVORK5CYII=") repeat;
}

::selection { background: rgba(255, 169, 77, .28); color: var(--paper); }

a { color: inherit; text-decoration: none; }
a:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: 4px;
  border-radius: 2px;
}

/* 中文小注：雅文在上，小注在下（或作诗余小字）。Garamond 只留给人名 .latin */
.echo {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  color: var(--smoke);
  letter-spacing: .18em;
}

/* 首屏：文字与物件各有自己的空间，火光不遮住内容。 */
#hero { position: relative; min-height: 720px; height: 100vh; height: 100svh; max-height: 1200px; overflow: hidden; isolation: isolate; padding: 0 clamp(28px, 6.5vw, 112px); }
.hero-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding-top: max(32px, env(safe-area-inset-top)); font-size: 14px; letter-spacing: .08em; }
.site-label { color: var(--paper); }
.top-works { color: #b9ad9c; }
.top-works span { padding-left: 12px; color: var(--amber); }
.hero-layout { height: calc(100% - 116px); max-width: 1320px; margin: auto; display: grid; grid-template-columns: 1.04fr 1fr; align-items: center; gap: 2vw; }
.hero-copy { z-index: 2; padding-bottom: 16px; }
.hero-kicker { font-family: var(--echo-font); font-size: 18px; font-style: italic; color: #b6a692; letter-spacing: .04em; margin-bottom: 30px; }
.hero-kicker span { margin: 0 12px; color: #706254; }
.hero-copy h1 { font-family: var(--display); font-size: clamp(46px, 4.7vw, 76px); font-weight: 500; line-height: 1.45; letter-spacing: .025em; color: var(--paper); }
.hero-intro { max-width: 410px; font-size: 15px; line-height: 2.1; text-wrap: pretty; color: #b6ad9f; margin-top: 28px; }
.hero-actions { display: flex; align-items: center; gap: 32px; margin-top: 32px; font-size: 14px; }
.browse-link { padding: 9px 0; border-bottom: 1px solid #9c7850; color: var(--gold); }
.browse-link span { display: inline-block; padding-left: 25px; transition: transform .25s; }
.browse-link:hover span { transform: translate(3px,-3px); }
.about-link { color: #a59a8b; }
.match-stage { container-type: inline-size; position: relative; width: 100%; height: min(68vh, 650px); margin: 0; }
#flame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.match-stage figcaption { position: absolute; top: 8%; bottom: auto; left: 10%; right: 3%; display: flex; flex-direction: column; gap: 4px; color: #a59886; font-size: 11px; letter-spacing: .12em; }
.match-stage figcaption span:first-child { color: #786c5c; font-size: 10px; letter-spacing: .18em; }
.match-static { position: absolute; width: 100%; height: 100%; inset: 0; }
.match-static img { position: absolute; width: 148.5%; max-width: none; height: auto; left: -5.539%; top: calc(57% - 48.224cqw); }
.scene-ready .match-static { display: none; }
.scroll-hint { position: absolute; left: clamp(28px,6.5vw,112px); bottom: 34px; color: #a29482; font-size: 11px; letter-spacing: .1em; }
.scroll-hint > span { display: inline-block; color: var(--amber); margin-right: 13px; }
.hint-gone .scroll-hint { opacity: 0; }
.section-label { font-size: 12px; letter-spacing: .16em; color: #bba88e; margin-bottom: 5vh; }
.section-label span { color: var(--smoke); padding-left: 8px; font-size: 10px; }
.about-note { max-width: 500px; margin: 0 0 4vh; font-size: 14px; line-height: 2; color: #a79d8e; }
#about, #lamps { scroll-margin-top: 46px; }
@media (max-width: 759px) {
  #hero { min-height: 620px; height: 100svh; padding: 0 26px; }
  .hero-top { padding-top: max(26px,env(safe-area-inset-top)); font-size: 12px; }
  .hero-layout { height: calc(100% - 95px); display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 0; padding-top: clamp(30px,5svh,60px); }
  .hero-copy { padding: 0; }
  .hero-kicker { font-size: 14px; margin-bottom: 13px; }
  .hero-copy h1 { font-size: clamp(36px,10.25vw,54px); line-height: 1.45; letter-spacing: .01em; }
  .hero-intro { max-width: 440px; font-size: 13px; line-height: 1.95; margin-top: 17px; }
  .hero-actions { margin-top: 16px; gap: 27px; font-size: 12px; }
  .browse-link { padding: 5px 0; }
  .match-stage { height: 100%; min-height: 225px; max-height: 350px; width: calc(100% + 22px); margin-left: -11px; }
  .match-stage figcaption { left: 9%; top: 7%; bottom: auto; font-size: 10px; gap: 0; }
  .match-stage figcaption span:first-child { font-size: 8px; }
  .scroll-hint { left: 26px; bottom: 19px; font-size: 10px; }
  #about .line { font-size: 22px; }
  .about-note { font-size: 13px; }
}
@media (max-height: 700px) and (min-width: 760px) {
  #hero { min-height: 560px; }
  .hero-top { padding-top: 22px; }
  .hero-copy h1 { font-size: 44px; }
  .hero-kicker { margin-bottom: 16px; }
  .hero-intro { margin-top: 16px; font-size: 13px; }
  .hero-actions { margin-top: 18px; }
  .scroll-hint { bottom: 20px; }
}
@media (max-height: 500px) and (orientation: landscape) and (any-pointer: coarse) {
  #hero { min-height: 100svh; height: 100svh; padding-inline: max(26px, env(safe-area-inset-left)); }
  .hero-top { padding-top: max(14px, env(safe-area-inset-top)); font-size: 11px; }
  .hero-layout { height: calc(100% - 68px); grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr; align-items: center; padding-top: 7px; gap: 2vw; }
  .hero-copy { padding-bottom: 10px; }
  .hero-kicker { font-size: 11px; margin-bottom: 6px; }
  .hero-copy h1 { font-size: clamp(25px, 3.8vw, 34px); line-height: 1.3; }
  .hero-intro { margin-top: 8px; font-size: 11px; line-height: 1.7; }
  .hero-actions { margin-top: 10px; gap: 22px; font-size: 11px; }
  .browse-link { padding-block: 4px; }
  .match-stage { width: 100%; height: 100%; min-height: 190px; max-height: 280px; margin-left: 0; }
  .match-stage figcaption { top: 2%; font-size: 9px; }
  .match-stage figcaption span:first-child { font-size: 8px; }
  .scroll-hint { bottom: 10px; font-size: 9px; }
}
@media (max-width: 759px) and (max-height: 620px) and (orientation: portrait) {
  #hero { min-height: 0; }
  .hero-top { padding-top: max(18px, env(safe-area-inset-top)); }
  .hero-layout { height: calc(100% - 72px); padding-top: 20px; }
  .hero-kicker { font-size: 12px; margin-bottom: 8px; }
  .hero-copy h1 { font-size: 32px; line-height: 1.35; }
  .hero-intro { font-size: 12px; line-height: 1.85; margin-top: 10px; }
  .hero-actions { margin-top: 10px; }
  .match-stage { min-height: 170px; max-height: 225px; }
  .scroll-hint { bottom: 12px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .browse-link span { transition: none; }
  .scene-ready .match-static { display: block; }
}

/* The object owns the viewport as the copy recedes; sparks stay in its safe center. */
#hero .match-stage { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; margin: 0; pointer-events: none; z-index: 1; }
#hero #flame { opacity: 0; }
.fx.scene-ready #hero #flame { opacity: 1; }
#hero .match-stage figcaption { z-index: 2; top: auto; bottom: 90px; left: 0; right: 0; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .06em; }
#hero .match-stage figcaption span:first-child { font-family: var(--echo-font); font-size: 16px; font-style: italic; color: #bc9772; letter-spacing: .06em; }
#hero .match-static img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
#heroName { transform-origin: center top; }
.scroll-hint { z-index: 5; display: flex; align-items: center; gap: 11px; min-height: 44px; bottom: 20px; transition: opacity .25s; }
.scroll-hint > span:first-child { margin: 0; font-size: 20px; line-height: 1; }
.scroll-hint .hint-label { margin: 0; font-size: 11px; color: #b7a58e; animation: none; }
.scroll-hint:focus-visible { outline: 1px solid var(--amber); outline-offset: 5px; }
.hint-gone .scroll-hint { pointer-events: none; }
.idea-anchor { position: absolute; top: 50%; pointer-events: none; }
@media (max-width: 759px) {
  #hero .match-stage figcaption { bottom: 72px; font-size: 11px; }
  #hero .match-stage figcaption span:first-child { font-size: 15px; }
  .scroll-hint { bottom: max(16px,env(safe-area-inset-bottom)); }
}
@media (min-width: 760px) {
  #hero .match-stage figcaption { left: 46%; }
}
@media (max-width: 759px) and (max-height: 740px) {
  .hero-layout { padding-top: 26px; }
  .hero-kicker { font-size: 12px; margin-bottom: 8px; }
  .hero-copy h1 { font-size: clamp(28px,8.8vw,34px); line-height: 1.36; }
  .hero-intro { font-size: 12px; line-height: 1.8; margin-top: 12px; }
  .hero-actions { font-size: 11px; margin-top: 10px; }
}
@media (max-height: 620px) {
  #hero .match-stage figcaption { bottom: 65px; gap: 5px; font-size: 10px; }
  .scroll-hint { bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #heroName { transform: none !important; opacity: 1 !important; visibility: visible !important; }
  .scroll-hint { transition: none; }
}

.match-handoff {
  position: absolute;
  top: -180px;
  left: 0;
  width: 100%;
  height: 280px;
  z-index: 2;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .match-handoff { display: none; } }

/* ------------------------------------------------------------
   引信（贯穿 #story 的光线）
   ------------------------------------------------------------ */

#story {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
  padding-top: 4vh;
  padding-right: max(22px, env(safe-area-inset-right));
  padding-bottom: 10vh;
  padding-left: max(calc(var(--gutter) + 26px), env(safe-area-inset-left));
}

#fuse {
  position: absolute;
  /* 向上多出 90px：起笔藏进上一幕，线像"从 hero 烧下来"。
     宽度覆盖整个 #story 区域，让引信曲线在整屏上游走穿梭。 */
  top: -90px;
  left: 0;
  width: 100%;
  height: calc(100% + 90px);
  overflow: visible;
  pointer-events: none;
}
#fuseBase {
  stroke: var(--char);
  stroke-width: 1.5;
  stroke-linecap: round;
}
#fuseLit  {
  stroke-width: 1.55;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 2px rgba(255, 210, 138, .88))
    drop-shadow(0 0 9px rgba(255, 107, 53, .48));
}

#fuseHead {
  /* 画布要给火星留足飞行余量：火星射程 ~70px，92px 画布会在方形
     边界处凭空消失。火焰头本体仍画在中心，只有余量变大。 */
  --spark-size: 184px;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--spark-size);
  height: var(--spark-size);
  margin: calc(var(--spark-size) * -.5);
  pointer-events: none;
  opacity: 0;
}
#fuseSpark { display: block; width: 100%; height: 100%; }

@media (max-width: 768px), (any-pointer: coarse) {
  #fuseHead { --spark-size: 152px; }
}

/* ------------------------------------------------------------
   章二 · 自述
   ------------------------------------------------------------ */

.chapter { position: relative; }

#about { padding: 11vh 0 5vh; }

#about .line {
  font-family: var(--display);
  font-size: var(--type-about);
  text-wrap: balance;
  font-weight: 500;
  line-height: 2.05;
  letter-spacing: .05em;
  color: var(--paper);
  text-shadow: 0 1px 0 rgba(255,255,255,.04), 0 18px 46px rgba(0,0,0,.58);
  margin-bottom: 7vh;
}

#about .line.strong {
  color: var(--gold);
  text-shadow: 0 0 18px rgba(255,169,77,.18), 0 20px 52px rgba(0,0,0,.64);
}

#about .echo { font-size: var(--type-echo); margin-top: -6vh; }

/* ------------------------------------------------------------
   章三 · 七盏灯
   ------------------------------------------------------------ */

#lamps { padding: 8vh 0 6vh; }

#lamps h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--type-section);
  letter-spacing: .14em;
  color: var(--paper);
  text-shadow: 0 0 28px rgba(255,169,77,.12), 0 18px 48px rgba(0,0,0,.56);
}

.chapter-sub {
  font-family: var(--display);
  font-size: var(--type-sub);
  color: var(--smoke);
  letter-spacing: .12em;
  line-height: 1.8;
  margin: 3.5vh 0 4vh;
}

/* ── 三盏主灯 ── */
.hero-lamps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 24px);
  margin-bottom: 6vh;
}

@media (min-width: 760px) {
  .hero-lamps {
    /* 四盏主灯:2×2,右列下沉,保留瀑布错落的气口 */
    grid-template-columns: 1fr 1fr;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-lamp:nth-child(even) { margin-top: clamp(72px, 7vw, 104px); }
}

/* 手机横屏虽有足够宽度，却没有三列长文所需的垂直呼吸；堆叠也让引信
   能按叙事顺序逐盏穿过灯芯。 */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-lamps { grid-template-columns: 1fr; }
}

.hero-lamp {
  position: relative;
  display: block;
  padding: 3.5vh 0 3.5vh clamp(18px, 4vw, 28px);
  border: 1px solid rgba(255, 210, 138, .14);
  border-radius: 10px;
  background:
    linear-gradient(112deg, rgba(255,210,138,.025), transparent 34%),
    rgba(13, 11, 9, .92);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 199, .035),
    inset 0 -1px 0 rgba(0, 0, 0, .7),
    0 24px 70px rgba(0, 0, 0, .28);
  text-decoration: none;
  color: inherit;
  transition: border-color .6s ease, background .6s ease;
  overflow: hidden;
  isolation: isolate;
}
.hero-lamp::before,
.hero-lamp::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.hero-lamp::before {
  left: -112px;
  top: -106px;
  width: 280px;
  height: 280px;
  border-radius: 46%;
  background:
    radial-gradient(circle at 48% 48%, rgba(255,244,213,.16) 0 3%, rgba(255,210,138,.17) 10%, rgba(255,107,53,.075) 40%, rgba(179,58,30,.022) 61%, transparent 73%);
  opacity: 0;
  transform: scale(.55);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.hero-lamp::after {
  inset: -45% auto -45% -36%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255,210,138,.28), rgba(255,107,53,.12), transparent);
  opacity: 0;
  transform: translateX(0) skewX(-13deg);
}
.hero-lamp.lit {
  border-color: rgba(255,210,138,.42);
  background:
    linear-gradient(112deg, rgba(255,169,77,.08), transparent 38%),
    rgba(24,17,12,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,240,207,.12),
    inset 18px 0 56px rgba(255,107,53,.055),
    inset 0 -28px 60px rgba(0,0,0,.2),
    -14px 22px 58px rgba(179,58,30,.075),
    0 30px 80px rgba(0,0,0,.42);
}
.hero-lamp.lit::before { opacity: 1; transform: scale(1); }
.hero-lamp.is-igniting::after { animation: lamp-heat-pass 1.35s cubic-bezier(.16,.72,.2,1) both; }
.hero-lamp.is-igniting { animation: lamp-arrival 1.15s cubic-bezier(.2,.8,.2,1); }
.hero-lamp:hover,
.hero-lamp:focus-visible {
  border-color: var(--amber);
  background:
    linear-gradient(112deg, rgba(255,169,77,.1), transparent 42%),
    rgba(29, 20, 14, .96);
}
.hero-lamp:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.hero-dot {
  position: absolute;
  left: -10px;
  top: calc(3.5vh + 1em);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--char);
  transition: background 1s ease, box-shadow 1.2s ease;
}
.hero-dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(255, 210, 138, .7);
  border-radius: 50%;
  opacity: 0;
}
.hero-lamp.lit .hero-dot {
  background: var(--gold);
  box-shadow:
    0 0 8px 2px rgba(255, 210, 138, .85),
    0 0 22px 8px rgba(255, 107, 53, .34),
    0 0 48px 18px rgba(179, 58, 30, .13);
}
.hero-lamp.lit h3 {
  text-shadow: 0 1px 0 rgba(255,255,255,.08), 0 0 22px rgba(255,169,77,.2), 0 16px 36px rgba(0,0,0,.48);
}

.project-kind { font-size: 10px; letter-spacing: .08em; color: #a79072; margin: 5px 0 6px; }
.hero-lamp h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--type-card-title);
  color: var(--paper);
  margin: 0 0 .6em;
}

.hero-lamp h3 .ext {
  font-family: var(--body-font);
  font-size: .6em;
  color: var(--amber);
  margin-left: .3em;
  vertical-align: super;
}
.hero-lamp:hover h3 .ext { color: var(--gold); }

.hero-lamp .lamp-desc {
  font-family: var(--body-font);
  font-size: var(--type-card-body);
  color: var(--smoke);
  line-height: 1.85;
}

/* ── 其余灯火 ── */
.rest-label {
  font-family: var(--display);
  font-size: var(--type-meta);
  color: var(--smoke-dim);
  letter-spacing: .15em;
  margin-bottom: 2.5vh;
}

.rest-lamps {
  list-style: none;
  padding: 0;
}
.rest-lamps li {
  position: relative;
  font-size: var(--type-meta);
  color: var(--smoke);
  line-height: 1.95;
  padding: .22em 0 .22em 16px;
  transition: color .65s ease;
}
.rest-lamps li::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 1.08em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--char);
  opacity: .65;
  transition: opacity .7s ease, transform .7s ease;
}
.rest-lamps li::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,169,77,.72), transparent 76%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
}
.rest-lamps li.lit {
  color: #b9b0a2;
  text-shadow: 0 14px 30px rgba(0,0,0,.42);
}
.rest-lamps li.lit::before {
  background: var(--gold);
  opacity: 1;
  transform: scale(1.3);
  box-shadow: 0 0 8px 2px rgba(255,210,138,.7), 0 0 18px 5px rgba(255,107,53,.18);
}
.rest-lamps li.is-igniting::after { animation: minor-heat-pass 1.15s cubic-bezier(.2,.8,.2,1) both; }
.rest-lamps li.lit strong {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255,210,138,.2), 0 0 26px rgba(255,107,53,.13);
}
.rest-lamps li > * {
  position: relative;
  z-index: 1;
}
.rest-lamps li strong {
  font-family: var(--display);
  font-weight: 500;
  color: var(--paper);
  margin-right: .4em;
}
.rest-lamps a {
  color: var(--amber);
  text-decoration: none;
}
.rest-lamps a:hover { text-decoration: underline; }

.project-lock {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 9px;
  margin-left: .28em;
  border: 1px solid rgba(138, 131, 120, .62);
  border-radius: 2px;
  vertical-align: .02em;
  color: var(--smoke);
  box-shadow: inset 0 0 5px rgba(255,169,77,.04), 0 0 9px rgba(0,0,0,.28);
  opacity: .72;
}
.project-lock::before {
  content: "";
  position: absolute;
  left: 2px;
  top: -6px;
  width: 5px;
  height: 6px;
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}
.project-lock i {
  position: absolute;
  left: 4px;
  top: 3px;
  width: 2px;
  height: 3px;
  border-radius: 50% 50% 1px 1px;
  background: currentColor;
  box-shadow: 0 0 5px rgba(255,169,77,.16);
}
.rest-lamps li.lit .project-lock {
  color: #b29b7f;
  border-color: rgba(255,169,77,.34);
  box-shadow: inset 0 0 6px rgba(255,107,53,.055), 0 0 10px rgba(255,107,53,.08);
}

/* ── 手机堆叠 ── */
@media (max-width: 540px) {
  .hero-lamps { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   章四 · 星图
   ------------------------------------------------------------ */

#sky {
  min-height: 120vh;
  min-height: 120svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  padding: 8vh 20px;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.fx #sky {
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
  padding: 5svh 20px 3svh;
  gap: 2.6svh;
  justify-content: flex-start;
  contain: paint;
}
.fx #sky[data-sky-layout="wide"] { padding-top: 6svh; gap: 3svh; }
#sky::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,rgba(13,11,9,.97) 25%,rgba(13,11,9,.82)),
    url("/vibecoding/assets/ending-cinema-v2-17a6f8dc89f8/coal-closeup-desktop.webp") center bottom / cover no-repeat;
}
.fx #sky::before { opacity: 0; }
#sky > * { position: relative; z-index: 2; }
#wildfire {
  position: absolute !important;
  inset: 0;
  z-index: 1 !important;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fx #wildfire { will-change: transform; transform: translateZ(0); }
#sky #dipper { width: min(88vw,960px); height: auto; flex: none; }
.fx #sky #dipper { transform: none; max-height: none; }
@media (min-width: 900px) {
  html:not(.fx) #sky #dipper { width: 62vw; }
}
#sky #dipperLines line { stroke: #b89a6b; stroke-width: .65; opacity: .44; }
#sky #dipperLines .core-line { stroke: #ffd28a; stroke-width: .85; opacity: .70; }
#sky #dipperStars circle { fill: #ffd28a; }
#sky #dipperStars .star text {
  fill: #b8ac95;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .35px;
}
#sky #dipperStars .core text { fill: #e6c58a; font-size: 14px; }
#sky #dipperStars a { cursor: pointer; }
#sky #dipperStars a:hover .star text, #sky #dipperStars a:focus .star text { fill: var(--gold); }
#sky #dipperStars a:focus { outline: none; }
#sky #dipperStars .bright circle { filter: drop-shadow(0 0 4px rgba(255,169,77,.55)); }
#sky #dipperStars .flare { stroke: #ffd28a; stroke-width: .8; opacity: .55; }
#sky #skyField circle { fill: #c9b798; }
#sky .sky-line {
  font-family: var(--display);
  font-size: var(--type-sky);
  letter-spacing: .1em;
  line-height: 2;
  color: var(--paper);
  text-wrap: balance;
  text-shadow: 0 0 24px rgba(255,169,77,.11),0 20px 48px rgba(0,0,0,.6);
}
#sky .echo { font-size: var(--type-echo); margin-top: 0; letter-spacing: .4em; text-indent: .4em; }
@media (max-width: 340px) {
  #sky .echo { letter-spacing: .18em; text-indent: .18em; }
}
@media (max-width: 540px) {
  #sky .sky-line { font-size: clamp(18px,5vw,22px); letter-spacing: .05em; }
}
@media (max-height: 500px) and (orientation: landscape) and (any-pointer: coarse) {
  .fx #sky {
    display: grid;
    grid-template-columns: minmax(0,.48fr) minmax(0,.52fr);
    grid-template-rows: 1fr 1fr;
    gap: 0 16px;
    align-items: center;
    justify-items: center;
    padding: 20px 24px;
  }
  .fx #sky #dipper { grid-column: 1; grid-row: 1 / 3; height: auto; }
  .fx #sky .sky-line {
    grid-column: 2; grid-row: 1; align-self: end;
    max-width: 360px; font-size: clamp(18px,2.3vw,21px);
    line-height: 1.8; letter-spacing: .03em; text-align: left;
  }
  .fx #sky .echo {
    grid-column: 2; grid-row: 2; align-self: start;
    width: 100%; max-width: 360px; margin-top: 12px;
    font-size: 12px; line-height: 1.8; letter-spacing: .08em;
    text-indent: 0; text-align: left;
  }
}

#ember .echo { font-size: var(--type-echo); letter-spacing: .22em; }

/* ------------------------------------------------------------
   章五 · 灯留着
   ------------------------------------------------------------ */

#ember {
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4.5vh;
  text-align: center;
  padding: 10vh 24px calc(8vh + env(safe-area-inset-bottom));
}

.ember-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow:
    0 0 5px 1px rgba(255, 248, 226, .98),
    0 0 15px 5px rgba(255, 169, 77, .5),
    0 0 42px 15px rgba(179, 58, 30, .13);
}
/* 呼吸光晕走伪元素，只动 opacity/transform（宪法纪律） */
.ember-dot::after {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(255, 210, 138, .38),
              rgba(255, 107, 53, .14) 55%, transparent);
  opacity: .7;
}

.keep {
  font-family: var(--display);
  font-size: var(--type-keep);
  letter-spacing: .12em;
  line-height: 1.6;
  color: var(--paper);
  text-shadow: 0 0 24px rgba(255,169,77,.13), 0 18px 46px rgba(0,0,0,.58);
}

.reach {
  display: flex;
  flex-direction: column;
  gap: 2.2vh;
  font-size: 15.5px;
  letter-spacing: .12em;
}
.reach a {
  color: var(--amber);
  border-bottom: 1px solid rgba(255, 169, 77, .35);
  padding-bottom: 3px;
  transition: color .4s ease, border-color .4s ease;
}
.reach a:hover { color: var(--gold); border-color: rgba(255, 210, 138, .7); }
.reach .mail i { font-style: normal; opacity: .75; }

.fine {
  font-size: 12.5px;
  line-height: 2.2;
  color: var(--smoke);
  letter-spacing: .1em;
}

.copyright {
  font-size: 12.5px;
  color: var(--smoke);
  letter-spacing: .1em;
  margin-top: -1vh;
}

/* ------------------------------------------------------------
   动效作用域 .fx —— 仅 JS + 允许动效时进入"待点亮"态。
   所有初始隐藏只允许写在这里；基线永远完整可读。
   ------------------------------------------------------------ */

.fx #fuse { visibility: hidden; opacity: 0; }
.fx.fuse-ready #fuse { visibility: visible; opacity: 1; transition: opacity .55s ease; }
.fx #about .line,
.fx #about .echo { opacity: 0; transform: translateY(28px); }
.fx #lamps h2,
.fx .chapter-sub { opacity: 0; transform: translateY(24px); }
.fx .hero-lamp,
.fx .rest-label,
.fx .rest-lamps li { opacity: 1; transform: translateY(12px); }
.fx .sky-line,
.fx #sky .echo { opacity: 0; }
.fx #dipperStars .star { opacity: 0; }
.fx #dipperLines line { opacity: 0; }
.fx #skyField circle { opacity: 0; }
.fx #ember > * { opacity: 0; transform: translateY(20px); }
.fx #fuseHead { opacity: 1; }
.fx:not(.fuse-ready) #fuseHead { visibility: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* 动画放在内层：外层透明度归 GSAP 管，两者互不打架。 */
  /* 火光不是恒定的：环境光晕以多拍不均的节奏轻微呼吸（只动 opacity） */
  .match-lit .calligraphy-lockup::before { animation: name-light-flicker 4.6s ease-in-out infinite; }
  @keyframes name-light-flicker {
    0%, 100% { opacity: .8; }
    23%      { opacity: .68; }
    41%      { opacity: .86; }
    58%      { opacity: .74; }
    79%      { opacity: .9; }
  }
  .scroll-hint span { display: inline-block; animation: hint-pulse 2.8s ease-in-out infinite; }
  .scroll-hint i b { animation: swipe-up 2s cubic-bezier(.45, 0, .4, 1) infinite; }
  .ember-dot::after { animation: ember-breathe 4.4s ease-in-out infinite; }
  .hero-lamp.lit .hero-dot::after { animation: dot-spark 1.1s ease-out 1; }
  @keyframes dot-spark {
    0%   { opacity: .95; transform: scale(.4); }
    100% { opacity: 0;   transform: scale(2.8); }
  }
  @keyframes hint-pulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
  }
  @keyframes swipe-up {
    0%   { opacity: 0; transform: translateY(0) scale(.7); }
    22%  { opacity: .95; transform: translateY(-3px) scale(1); }
    68%  { opacity: .85; }
    100% { opacity: 0; transform: translateY(-19px) scale(.8); }
  }
  @keyframes ember-breathe {
    0%, 100% { opacity: .5; transform: scale(.88); }
    50%      { opacity: 1;  transform: scale(1.12); }
  }
}

/* ------------------------------------------------------------
   桌面补全层 —— 仅 ≥1024px（且非横屏矮视口）生效。
   手机与平板竖屏规则零改动；叙事纪律不变（黑屋、单光源、
   scroll 唯一输入），桌面只是把同一幕布撑到相称的尺度。
   min-height 门槛与 760 档一致：横屏手机永远走手机布局。
   ------------------------------------------------------------ */
@media (min-width: 1024px) and (min-height: 501px) {
  /* 主叙事列从手机柱拓成桌面卷轴；引信路径按新几何自动重建 */
  #story { max-width: 920px; }

  .hero-lamps { gap: clamp(22px, 2.2vw, 30px); }

  .rest-label { margin-bottom: 3vh; }
  .rest-lamps li {
    font-size: 15.5px;
    line-height: 2.05;
    padding-top: .3em;
    padding-bottom: .3em;
  }

  /* 联系方式在桌面横排一行，余烬居中构图更稳 */
  .reach { flex-direction: row; justify-content: center; gap: 52px; }

  /* 星图撑到桌面尺度（SVG 等比，星名随之放大） */
  #dipper { width: min(58vw, 640px); }

  /* 滚动条融进黑屋（仅桌面有常驻滚动条） */
  html { scrollbar-color: #2e261c #0d0b09; scrollbar-width: thin; }
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: #0d0b09; }
  ::-webkit-scrollbar-thumb {
    background: #2a2019;
    border-radius: 5px;
    border: 2px solid #0d0b09;
  }
  ::-webkit-scrollbar-thumb:hover { background: #4a3a28; }
}

/* 大桌面（27"+）：字阶整体上一档，画幅同步加宽 */
@media (min-width: 1680px) and (min-height: 501px) {
  :root {
    --type-whisper: 28px;
    --type-hero-name: 168px;
    --type-latin: 23px;
    --type-tagline: 20px;
    --type-echo: 16px;
    --type-about: 40px;
    --type-section: 60px;
    --type-sub: 19px;
    --type-card-title: 32px;
    --type-card-body: 16px;
    --type-meta: 15.5px;
    --type-sky: 38px;
    --type-keep: 44px;
  }
  #story { max-width: 1010px; }
  #dipper { width: min(50vw, 720px); }
  .rest-lamps li { font-size: 16px; }
}

/* 打印：给一个体面的静态版本 */
@media print {
  body { background: #fff; color: #111; }
  #flame, #fuse, #fuseHead, #wildfire, .scroll-hint { display: none; }
}

/* ── 主灯 Logo ── */
.hero-logo {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: .6em;
  filter: grayscale(30%) brightness(.88) drop-shadow(0 12px 22px rgba(0,0,0,.42));
  transition: filter .6s ease;
}
.hero-lamp:hover .hero-logo,
.hero-lamp:focus-visible .hero-logo,
.hero-lamp.lit .hero-logo {
  filter:
    grayscale(0%) brightness(1.08)
    drop-shadow(0 0 9px rgba(255,169,77,.18))
    drop-shadow(0 14px 24px rgba(0,0,0,.5));
}

@keyframes lamp-heat-pass {
  0% { opacity: 0; transform: translateX(0) skewX(-13deg); }
  18% { opacity: 1; }
  72% { opacity: .62; }
  100% { opacity: 0; transform: translateX(650%) skewX(-13deg); }
}
@keyframes lamp-arrival {
  0%, 100% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-2px) scale(1.012); }
}
@keyframes minor-heat-pass {
  0% { opacity: 0; transform: scaleX(0); }
  34% { opacity: .9; }
  100% { opacity: 0; transform: scaleX(1); }
}

/* ── 点亮时的徽章光影:焰过之处,灯徽生辉 ── */
.hero-lamp .hero-logo { transition: filter 1.2s ease, transform 1.2s cubic-bezier(.22,1,.36,1); }
.hero-lamp.lit .hero-logo {
  filter: drop-shadow(0 0 7px rgba(255, 200, 120, .55)) drop-shadow(0 0 22px rgba(255, 170, 80, .3));
}
.hero-lamp.is-igniting .hero-logo { animation: logo-bloom 1.35s cubic-bezier(.2,.8,.2,1); }
@keyframes logo-bloom {
  0% { transform: scale(1); filter: none; }
  32% { transform: scale(1.14); filter: drop-shadow(0 0 14px rgba(255, 214, 140, .9)) drop-shadow(0 0 40px rgba(255, 170, 80, .55)); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .hero-lamp.is-igniting .hero-logo { animation: none; } .hero-logo, .hero-lamp .hero-logo { transition: none; } }

/* 灯火段:可点进提示(安静一行) */
.lamps-hint {
  margin: 10px 0 0; text-align: center;
  font-size: 12px; letter-spacing: .3em; text-indent: .3em;
  color: rgba(255, 210, 138, .5);
}

/* 桌面平滑滚动由本地 Lenis 驱动；移动端保留原生滚动。 */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* 原典与自己的话分开排，让引文有出处，也有可读的落点。 */
#about cite { display: block; margin-top: 10px; font-family: var(--body-font); font-size: 12px; font-weight: 400; font-style: normal; letter-spacing: .08em; color: #9e9383; }
#about .about-gloss { display: block; margin-top: 14px; font-family: var(--body-font); font-size: clamp(15px, 2vw, 18px); font-weight: 400; line-height: 2; letter-spacing: 0; color: #c2b7a8; }