/* LUMÉA · 系列 03
   色：纸 #EFE8DA / 墨 #14110E / 石绿 #0F5D4E（对纸 6.28:1）
   字：正文系统无衬线；标题系统衬线（Georgia 带拉丁，宋体带中文），不外挂字体文件 */

:root{
  --paper:#EFE8DA;
  --ink:#14110E;
  --muted:#5F5A53;          /* 对纸 5.6:1 */
  --accent:#0F5D4E;         /* 对纸 6.28:1 */
  --accent-soft:rgba(15,93,78,.14);
  --rule:rgba(20,17,14,.16);
  --rule-soft:rgba(20,17,14,.09);
  --paper-solid:#EFE8DA;
  --serif:Georgia,"Songti SC","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans","MiSans","Microsoft YaHei","Noto Sans",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font:400 17px/1.75 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--serif);font-weight:600}
em{font-style:normal;color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.skip{position:fixed;left:16px;top:-64px;z-index:99;background:var(--ink);color:var(--paper);
      padding:12px 16px;border-radius:4px;font-size:14px;transition:top .2s}
.skip:focus{top:16px}

/* 顶部进度线 */
.prog{position:fixed;inset:0 0 auto 0;height:2px;background:var(--accent);transform:scaleX(0);
      transform-origin:0 50%;z-index:60}

/* 顶栏 */
.top{position:fixed;inset:0 0 auto;z-index:50;height:72px;display:flex;align-items:center;
     background:rgba(239,232,218,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
     border-bottom:1px solid var(--rule-soft)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:16px;min-height:44px}
.mono{font-family:var(--serif);font-size:22px;letter-spacing:.22em;line-height:1}
.tag{font-size:14px;line-height:1.5;color:var(--muted);border-left:1px solid var(--rule);padding-left:16px}
.links{display:flex;gap:8px;font-size:14px}
.links a{position:relative;display:inline-flex;align-items:center;justify-content:center;
         min-width:44px;padding:12px 8px;color:var(--muted);transition:color .25s}
.links a:hover,.links a:focus-visible{color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 24px;
      border:1px solid var(--rule);border-radius:999px;font-size:17px;transition:.3s var(--ease)}
.pill:hover,.pill:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* 首屏 */
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;
      padding:96px 0 64px;scroll-margin-top:72px}
.eyebrow{font-size:14px;letter-spacing:.28em;color:var(--accent);margin-bottom:24px}
h1{font-size:64px;line-height:1.25;letter-spacing:-.01em}
.lede{margin-top:24px;max-width:22em;color:var(--muted)}
.hint{margin-top:32px;font-size:14px;letter-spacing:.12em;color:var(--muted)}
.hero-go{margin-top:32px}
.ghost{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;
       border:1px solid var(--rule);border-radius:999px;font-size:17px;transition:.3s var(--ease)}
.ghost:hover,.ghost:focus-visible{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* 平面图 */
.plan-box{position:relative}
.plan{width:100%;height:auto;overflow:hidden}
.plan .facet{fill:none;stroke:rgba(20,17,14,.22);stroke-width:1;vector-effect:non-scaling-stroke}
.plan .edge{fill:none;stroke:rgba(20,17,14,.5);stroke-width:1;vector-effect:non-scaling-stroke}
.plan .face{stroke:rgba(20,17,14,.22);stroke-width:1;vector-effect:non-scaling-stroke}
.plan .sel{fill:var(--accent);fill-opacity:.16;stroke:var(--accent);stroke-opacity:.5;stroke-width:1;
           vector-effect:non-scaling-stroke;transition:opacity .4s}
.plan .claw{fill:var(--paper-solid);stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.plan .claw-line{stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.plan .label{font:400 11px/1 var(--sans);fill:var(--muted);letter-spacing:.1em}

.plate .plan{border:1px solid var(--rule)}
.plate .cap,.cap{font-size:14px;color:var(--muted);margin-top:16px;text-align:center;line-height:1.6}

/* 8 个可点热区 */
.pins{position:absolute;inset:0}
.pins button{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);
             display:grid;place-items:center;border-radius:50%}
.pins button::after{content:"";width:12px;height:12px;border-radius:50%;
                    background:var(--paper);border:1.5px solid var(--accent);transition:.25s var(--ease)}
.pins button:hover::after,.pins button:focus-visible::after{background:var(--accent);transform:scale(1.25)}
.pins button[aria-current="true"]::after{background:var(--accent)}
.pins button .n{position:absolute;font-size:11px;letter-spacing:.1em;color:var(--muted);
                font-family:var(--sans)}
.pins button[data-pos="out"] .n{display:none}

/* 通用段落 */
.sec{padding:96px 0;scroll-margin-top:72px}
.sec.two,.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.kicker{font-size:14px;letter-spacing:.26em;color:var(--accent);margin-bottom:24px}
h2{font-size:36px;line-height:1.35;letter-spacing:-.01em}
.body{margin-top:24px;color:var(--muted);max-width:24em}
.foot-note{margin-top:32px;font-size:14px;line-height:1.6;color:var(--muted)}

/* 2 八枚 */
.index{border-top:1px solid var(--rule)}
.readout .lot{font-size:14px;letter-spacing:.18em;color:var(--muted)}
.readout h2{font-size:36px;margin-top:8px}
.line{margin-top:16px;color:var(--muted)}
.specs{margin-top:32px;display:grid;gap:8px}
.specs div{display:flex;justify-content:space-between;align-items:baseline;
           border-bottom:1px solid var(--rule);padding-bottom:8px}
.specs dt{font-size:14px;color:var(--muted)}
.specs dd b{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.tabs button{min-height:44px;padding:0 16px;border:1px solid var(--rule);border-radius:999px;
             font-size:14px;color:var(--muted);transition:.25s var(--ease)}
.tabs button:hover{color:var(--ink);border-color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* 3 数 */
.numbers{border-top:1px solid var(--rule)}
.bars{display:grid;gap:32px}
.bar .row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;margin-bottom:8px}
.bar .row b{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.bar .row small{font-size:14px;color:var(--muted);margin-left:4px}
.track{height:3px;background:var(--rule-soft);position:relative;overflow:hidden}
.track i{position:absolute;inset:0 auto 0 0;background:var(--accent);width:0;
         transition:width 1s var(--ease)}
.in .track i{width:var(--w)}
.ref{margin-top:8px;font-size:14px;color:var(--muted)}
.angles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;
        border-top:1px solid var(--rule);padding-top:24px}
.angles dt{font-size:14px;color:var(--muted)}
.angles dd{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;margin-top:4px}

/* 4 造石 */
.cut{border-top:1px solid var(--rule)}
/* 桌面：图钉住不动，右侧文字走完四段 */
.cut .wrap{min-height:calc(100vh + 640px)}
.cut .sticky{position:sticky;top:96px;align-self:start}
.cut .steps{align-self:center}
.steps .body{max-width:22em}
.counter{margin-top:8px;display:flex;align-items:baseline;gap:8px;justify-content:center}
.counter #count{font-family:var(--serif);font-size:40px;line-height:1.1;font-weight:500;
                font-variant-numeric:tabular-nums;color:var(--accent);min-width:2ch}
.counter .unit{font-size:14px;color:var(--muted)}
.phases{margin-top:24px;list-style:none;display:grid;gap:8px}
.phases li{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:baseline;
           padding:16px 16px;border-left:2px solid var(--rule-soft);transition:.35s var(--ease)}
.phases li b{font-weight:500;font-size:22px;font-family:var(--serif)}
.phases li span{font-size:14px;color:var(--muted)}
.phases li.done{border-left-color:var(--accent);opacity:.55}
.phases li.on{border-left-color:var(--accent);background:rgba(15,93,78,.06)}
.phases li.on b{color:var(--accent)}

/* 5 光 */
.light{border-top:1px solid var(--rule)}
.ray{width:100%;height:auto}
.ray-stone path{fill:none;stroke:rgba(20,17,14,.45);stroke-width:1}
.ray-stone path.thin{stroke:rgba(20,17,14,.22)}
.ray-path{stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
          stroke-dasharray:1;stroke-dashoffset:1}
.ray-dot{fill:var(--accent);opacity:0}

/* 6 镶 */
.setting{border-top:1px solid var(--rule)}
.prongs{list-style:none;margin-top:32px;display:grid;gap:16px}
.prongs li{display:grid;grid-template-columns:1fr;gap:4px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.prongs b{font-weight:500;font-size:22px;font-family:var(--serif)}
.prongs span{font-size:14px;color:var(--muted)}

/* 7 收 */
.close{border-top:1px solid var(--rule);text-align:center}
.close .body{margin:24px auto 0;max-width:22em}
.close-plan{width:min(360px,72vw);margin:48px auto 0}
.close .ghost{margin-top:48px}
.close h2{font-size:36px}

/* 页脚 */
footer{border-top:1px solid var(--rule);padding:48px 0 64px;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:16px}
footer .disc{max-width:34em}

/* 入场 */
.js .rise{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rise.in{opacity:1;transform:none}

@media (max-width:860px){
  body{font-size:16px}
  .links,.tag{display:none}
  h1{font-size:40px}
  h2,.readout h2,.close h2{font-size:26px}
  .hero{grid-template-columns:1fr;min-height:0;padding:120px 0 48px;gap:32px}
  .sec{padding:64px 0}
  .sec.two,.two{grid-template-columns:1fr;gap:32px}
  .cut .wrap{min-height:0}
  .cut .sticky{position:static}
  .cut .steps{align-self:start}
  .counter #count{font-size:30px}
  .phases li b,.prongs b,.specs dd b,.bar .row b,.angles dd{font-size:18px}
  footer .wrap{flex-direction:column;gap:8px}
  .close-plan{width:min(300px,80vw)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .js .rise{opacity:1;transform:none}
}