/* ============================================================
   EasyCode 落地页 · 「编辑部校样」
   契约：docs/landing-pages/easycode/DESIGN.md（唯一事实源）
   世界观：整页是一份正被导师批改的校样稿。
   纸=校样纸 · 墨=排印正文 · 红笔=校对红(导师) ·
   面板内=产品的陶橙世界（指纹避让：landing 红笔 ≠ 产品陶橙）。
   DNA：claude(ring 阴影/衬线行高) + notion(耳语发丝线/多层淡阴影/lnum)。
   动效底座在 main.js（GSAP+Lenis，方向感知的双向可重演法则）。
   ============================================================ */

/* ---------- 字体（自托管，零外部请求；正文/UI 永远系统栈） ----------
   两权重均已按页面实际用字子集化（819 字：HTML/JS/CSS 渲染文案 + ASCII + 常用标点）。
   改文案引入新字后需重跑子集，缺字会静默落到 Songti/STSong 系统兜底。 */
@font-face{
  font-family:"Noto Serif SC";
  src:url("../fonts/NotoSerifSC-Regular-subset.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Noto Serif SC";
  src:url("../fonts/NotoSerifSC-Bold-subset.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
/* 手写批注体：马善政毛笔字（OFL，子集化仅本页手写文案的 ~170 字）。
   单一字重——笔触本就重，永远以 400 使用并禁合成粗体（见 --kai 用点）。 */
@font-face{
  font-family:"Ma Shan Zheng";
  src:url("../fonts/MaShanZheng-subset.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  /* 纸与墨 */
  --bg:#ffffff;            /* 页面底色：纯白，与插画白底一致（暖底会让白底配图透出方块，故换回白） */
  --bg-soft:#f4f1ea;       /* 纸背：唯一换底档（陈列桌） */
  --bg-elevated:#ffffff;
  --ink:#1c1b18;
  --ink-muted:#6f6b61;
  --line:#e6e3da;
  --hairline:rgba(28,27,24,.09);  /* notion 耳语线：卡内分隔 */
  /* 红笔与产品橙（指纹避让） */
  --red:#b3402a;           /* 校对红：landing 唯一主 accent（批注/圈划/CTA/手写章） */
  --red-muted:#e5c4ba;
  --accent:#c04a1a;        /* 产品陶橙：只活在 demo 面板内部（产品 UI 的世界） */
  --accent-muted:#e9c8b6;
  /* 评级 tone（只出现在 demo 内部真实 UI） */
  --ok:#246b31;
  --warn:#8a5f00;
  --danger:#a3361a;
  /* 字体分工 */
  --serif:"Noto Serif SC","Songti SC","STSong",Georgia,serif;   /* display 专用 */
  --kai:"Ma Shan Zheng","Kaiti SC","STKaiti","KaiTi","Noto Serif SC",serif;  /* 红笔批注：自托管毛笔手写，系统楷体兜底（可丢失信息） */
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",Roboto,sans-serif;
  --mono:"JetBrains Mono",Menlo,Consolas,ui-monospace,monospace;
  /* 流式 clamp 字阶 */
  --d1:clamp(48px,8.8vw,124px);
  --d2:clamp(34px,5.6vw,80px);
  --dh:clamp(28px,3.8vw,50px);
  --body:17px;
  --sub-size:clamp(19px,1.9vw,22px);   /* 4.2:窄屏 19px 起步,与正文 17px 保持一档差 */
  --small:14px;
  --tiny:12px;
  /* 动效 token（产品原值 + Emil 强化曲线） */
  --t-fast:120ms;
  --t-medium:180ms;
  --t-slow:240ms;
  /* 签名曲线(6.1 收敛):全页唯一叙事缓动,统治入场/描画/揭幕/微交互;
     与 main.js 的 CustomEase("sig") 同源。例外仅两类:盖章/雷达点的过冲仪式、scrub 的 linear。 */
  --ease:cubic-bezier(.22,1,.36,1);
  --story-pad:clamp(72px,10vh,132px);
  /* 阴影（DNA：claude ring + notion 多层淡染色，全部染墨色调） */
  --shadow-ring:0 0 0 1px rgba(28,27,24,.06);
  --shadow-card:0 0 0 1px rgba(28,27,24,.055),0 2px 7px rgba(28,27,24,.04),0 8px 22px -8px rgba(28,27,24,.08);
  --shadow-exhibit:0 4px 18px rgba(28,27,24,.05),0 2px 8px rgba(28,27,24,.03),0 34px 80px -34px rgba(28,27,24,.22);
  /* 细颗粒校样纸噪点 */
  --paper-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ---------- 基底 ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.lenis{height:auto;scroll-behavior:auto !important}
body{
  background-color:var(--bg);
  color:var(--ink);
  font-family:var(--sans);font-size:var(--body);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* 页面底色统一纯白：撤掉固定视口纸噪层与 multiply 柔光慢层(.wash)——
   这两层只染页面、染不到不透明白底插画，会让插画凸成更亮的白方块。去掉后全页匀质纯白，
   插画白底无缝融入。(--paper-noise 仍供 #daily 陈列桌局部纹理用。) */
/* sda 显影的 scale 变换溢出不得撑出横向滚动(契约 §8);clip 不建立滚动容器,内部 sticky/pin 不受影响 */
main{overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
/* 工艺：品牌 focus 环 + 选区红笔淡底 */
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}
::selection{background:var(--red-muted)}
section{scroll-margin-top:124px}   /* 3.4:双吸顶 nav(60)+stepper(60) 之下,锚点标题不再被盖 */
/* 工艺：细窄品牌滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--red) 32%,var(--line));border-radius:999px;border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

.wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(20px,4.5vw,48px)}
.wrap-narrow{max-width:760px;margin-inline:auto;padding-inline:clamp(20px,4.5vw,48px)}
.wrap-stage{max-width:1480px;margin-inline:auto;padding-inline:clamp(20px,3.5vw,56px)}

/* ---------- 顶栏（与 JourneyPilot 同构；校对红暖纸配色） ---------- */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 clamp(20px,4.5vw,48px);border-bottom:1px solid var(--line);background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand svg{display:block}
/* 顶栏品牌=蓝图裁决 logo（制图夹具+朱红勾）+ 制图字 wordmark，透明底直接坐暖纸 */
.brand-logo{height:30px;width:auto;display:block}
/* 字标 EASYCODE 放大到字母高度≈图标高度:字标图内字母仅占图高 78%、图标占 97%，
   故图标 30px→字母约 29px，字标图需约 37px 才让 EASYCODE 字母与图标等高。 */
.brand-word{height:37px;width:auto;display:block}
/* 窄屏收敛品牌锁定尺寸，给右侧导航留出余地、且导航项不折行 */
@media (max-width:560px){
  .brand-logo{height:24px}
  .brand-word{height:17px}
  .brand{gap:8px}
  .nav-doc,.nav-proj-btn{white-space:nowrap}
  .nav-doc{padding:7px 8px}
}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-doc{font-family:var(--sans);font-size:14px;color:var(--ink-muted);text-decoration:none;padding:7px 12px;border-radius:8px;transition:color var(--t-medium) var(--ease),background var(--t-medium) var(--ease)}
.nav-doc:hover{color:var(--ink);background:rgba(28,27,24,.05)}
.nav-proj{position:relative}
.nav-proj-btn{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:14px;color:var(--ink);background:rgba(28,27,24,.03);border:1px solid var(--line);border-radius:8px;padding:7px 13px;cursor:pointer;transition:border-color var(--t-medium) var(--ease),background var(--t-medium) var(--ease)}
.nav-proj-btn:hover{border-color:var(--ink-muted);background:rgba(28,27,24,.06)}
.nav-proj-btn .chev{transition:transform var(--t-slow) var(--ease)}
.nav-proj.open .nav-proj-btn .chev{transform:rotate(180deg)}@media (hover:hover) and (pointer:fine){.nav-proj:hover .nav-proj-btn .chev{transform:rotate(180deg)}}
.nav-proj-menu{position:absolute;top:calc(100% + 10px);right:0;width:288px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:13px;padding:7px;box-shadow:var(--shadow-card);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease),visibility var(--t-slow);z-index:70}
.nav-proj.open .nav-proj-menu{opacity:1;visibility:visible;transform:none}@media (hover:hover) and (pointer:fine){.nav-proj:hover .nav-proj-menu{opacity:1;visibility:visible;transform:none}}
/* 2026-07-19 二审：菜单条目样式（缩影卡/晕染/当前签）全量收拢到文件尾部的统一块；
   本处 round-7 光晕/圆点/线环规则退役删除。 */

/* ---------- tone 词汇表（产品 globals.css 移植；评级色永不与红笔混用） ---------- */
.tone-ok{--tone-fg:var(--ok);--tone-mark:var(--ok);--tone-border:color-mix(in srgb,var(--ok) 36%,var(--line));--tone-surface:color-mix(in srgb,var(--ok) 6%,var(--bg-elevated))}
.tone-ok-soft{--tone-fg:var(--ok);--tone-mark:color-mix(in srgb,var(--ok) 48%,var(--bg));--tone-border:color-mix(in srgb,var(--ok) 36%,var(--line));--tone-surface:color-mix(in srgb,var(--ok) 6%,var(--bg-elevated))}
.tone-warn{--tone-fg:var(--warn);--tone-mark:var(--warn);--tone-border:color-mix(in srgb,var(--warn) 36%,var(--line));--tone-surface:color-mix(in srgb,var(--warn) 6%,var(--bg-elevated))}
.tone-danger{--tone-fg:var(--danger);--tone-mark:var(--danger);--tone-border:color-mix(in srgb,var(--danger) 36%,var(--line));--tone-surface:color-mix(in srgb,var(--danger) 6%,var(--bg-elevated))}
.tone-neutral{--tone-fg:var(--ink-muted);--tone-mark:var(--ink-muted);--tone-border:var(--line);--tone-surface:var(--bg-elevated)}

/* ---------- 版式原子(4.7:内联 style 收拢——text-align/max-width/margin 类微调进类,
   保留确属一次性的内联,如 npm-item 的 --proj 配色变量) ---------- */
.center{text-align:center}
.mx-auto{margin-inline:auto}
.panel--narrow{max-width:860px}
.panel-title{font-size:22px;font-weight:700;margin-bottom:12px}
.prose+.code.plain{margin-top:14px}
.code.plain+.code.plain{margin-top:10px}
#replay-slider{flex:1}
#test .panel{position:relative}
.duo--middle{align-items:center}
.stamp-row{display:flex;gap:16px;align-items:center;margin-top:18px}
.stamp-row .hint{max-width:22em}
.review-actions{margin-top:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.review-note .mk-note{margin-top:0}
.srs-lead{margin-right:10px}
#srs-reset{margin-left:auto}
.closing-call{font-size:clamp(22px,3vw,32px);color:var(--ink);font-weight:600;margin-top:14px}

/* ---------- 版式原子 ---------- */
.kicker{font-family:var(--mono);font-size:var(--tiny);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
/* 中文 kicker 分流(4.5/4.6):uppercase 对中文空转,字距单独调;拉丁 kicker 保留上一行原样 */
.kicker--zh{text-transform:none;letter-spacing:.1em}
.kicker .star{color:var(--accent)}
.headline{
  font-family:var(--serif);font-weight:700;font-size:var(--d2);
  line-height:1.26;letter-spacing:-.01em;text-wrap:balance;
  font-feature-settings:"lnum" 1;
}
/* 手动 <br> 断句的标题：balance 在部分引擎下会跨越强制换行重新分配文字，
   与作者写定的断句位置冲突；这类标题的断句已由 <br> 定死，不需要再平衡。 */
.headline:has(br){text-wrap:wrap}
/* SplitText 的 mask 行盒用 overflow:clip 按 line-height 收边，会裁掉拉丁降部
   （如 "bug," 的 g 与逗号，实测下探约 3px）。overflow-clip-margin 只外扩裁剪区、
   不改任何布局，补回降部空间；留量远小于入场位移，行揭幕遮罩不受影响。 */
.headline > div{overflow-clip-margin:0.12em}
.sub{font-size:var(--sub-size);color:var(--ink-muted);max-width:32em;margin-top:20px;text-wrap:pretty;line-height:1.75}
.sub strong{color:var(--ink);font-weight:600}
.prose{max-width:38em;color:var(--ink-muted);text-wrap:pretty}
.prose strong{color:var(--ink);font-weight:600}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* 无脚本提示:仅 <noscript> 内出现 */
.noscript-note{max-width:720px;margin:14px auto 0;padding:12px 18px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:10px;font-family:var(--sans);font-size:14px;line-height:1.7;color:var(--ink-muted)}
.hint{font-family:var(--sans);font-size:var(--tiny);color:var(--ink-muted);line-height:1.6}
/* 每章校对符号母题（手绘批注，读作页边记号） */
.plate{display:block;margin-bottom:16px;line-height:0}
.plate svg{width:38px;height:38px;display:inline-block;color:var(--ink-muted);opacity:.5}

/* ---------- 批注系统（D 骨架核心；楷体=红笔的手） ----------
   .mk-note 行间批：内联在 .sub 之后、居中于窄栏，任何宽度都成立。
   批注只承载可丢失的情绪信息（无障碍：aria-hidden）。 */
.mk-note{
  display:inline-block;
  font-family:var(--kai);font-weight:400;font-synthesis:none;
  font-size:clamp(16px,1.7vw,20px);line-height:1.65;letter-spacing:.02em;
  color:var(--red);
  transform:rotate(-1.5deg);transform-origin:left bottom;
  margin-top:18px;
}
.mk-note.ink{color:var(--ink-muted)}
.mk-note .sym{font-family:var(--mono);font-size:.82em;margin-right:8px;font-style:normal}
/* 红笔笔迹：内联 SVG 手绘路径，描画由 JS 驱动（dashoffset），永远最上层、不吃点击 */
.mk-strokes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
.mk-strokes path{fill:none;stroke:var(--red);stroke-linecap:round;stroke-linejoin:round}
/* 手写评级圈（页面级记忆点，与 demo 内方形章分工） */
.mk-grade{position:relative;width:72px;height:72px;flex:none}
.mk-grade b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--kai);font-weight:400;font-synthesis:none;font-size:46px;color:var(--red);transform:rotate(-4deg)}
.mk-grade svg{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);overflow:visible}
.mk-grade svg path{fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round}

/* ---------- 按钮（实心校对红 / 发丝线幽灵） ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:var(--small);font-weight:500;
  padding:10px 18px;border-radius:6px;border:1px solid transparent;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
  user-select:none;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:color-mix(in srgb,var(--red) 86%,var(--ink));text-decoration:none}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--bg-elevated)}
.btn-ghost:hover{border-color:var(--ink-muted);background:var(--bg-soft);text-decoration:none}
.btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
.btn .btn-icon{width:1.12em;height:1.12em;flex:none;display:block}

/* ---------- 序幕：头版即批改现场 ----------
   开场序列（load 驱动，≤2.5s，滚动即跳过；回到顶部重演——全局重演法则）：
   ① 宋体大标题逐字排上（SplitText mask 升入）
   ② 红笔划掉「刷题」+ 插入符 + 楷体批「这两个字，该改改了」（描画）
   ③ 副题/CTA/产品照依次升入（产品照批注层承 A 血统）
   初始隐藏由 .boot 门控（JS 就绪前无闪烁；JS 失效 3s 后自动揭幕）。 */
.hero{min-height:100svh;text-align:center;padding-top:clamp(48px,9vh,110px);padding-bottom:0;position:relative}
.hero-copy{margin-bottom:clamp(40px,7vh,72px);position:relative}
.hero h1{
  font-family:var(--serif);font-size:var(--d1);line-height:1.12;letter-spacing:-.012em;font-weight:700;
  font-feature-settings:"lnum" 1;text-wrap:balance;
  margin-top:clamp(30px,5vh,54px);  /* 楷体眉批悬在标题上方,给它的落笔留出空间 */
}
.hero-strike{position:relative;display:inline-block}
.hero-strike .strike-path{position:absolute;left:-.06em;right:-.06em;top:0;height:100%;overflow:visible;pointer-events:none}
/* 楷体眉批：老师用红笔在标题上方写下的批语（比正文大，微微手写侧倾） */
.hero-remark{
  position:absolute;left:50%;top:-1.55em;
  font-family:var(--kai);font-weight:400;font-synthesis:none;
  font-size:clamp(24px,3.4vw,42px);line-height:1.05;letter-spacing:.04em;
  color:var(--red);white-space:nowrap;
  transform:translateX(-50%) rotate(-3deg);transform-origin:center bottom;
}
.hero-sub{margin-inline:auto;margin-top:clamp(20px,3vh,34px)}
.hero-cta{margin-top:clamp(26px,4vh,40px);display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* 产品照=展品（唯一投影层）；批注层坐标系随图缩放 */
.hero-shot{width:min(1280px,88vw);margin-inline:auto;position:relative}
.hero-shot img{
  width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:8px;
  background:var(--bg-elevated);
  box-shadow:var(--shadow-exhibit);
}
.hero-shot .mk-strokes path{stroke:#d0543c} /* 批注是导师的笔：暗底适配校对红（截图里产品自己的陶橙只属于产品 UI） */
/* ---------- 一幕过场：红灯，绿灯（水波纹仪式） ----------
   入视时两枚判定丸各自「从内到外」荡开水波纹（未通过完成后再通过）；不再洗屏变色。双向重演。 */
#verdict-beat{min-height:60svh;display:grid;align-content:center}
#verdict-beat .headline{font-size:clamp(30px,4.4vw,60px)}
.verdict-pills{display:flex;gap:20px;justify-content:center;margin-bottom:clamp(36px,6vh,56px)}
.pill{
  position:relative;
  font-family:var(--mono);font-size:clamp(15px,1.8vw,20px);
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 26px;border-radius:999px;
  border:1.5px solid var(--tone-border);color:var(--tone-fg);background:var(--tone-surface);
}
/* 水波纹：从判定丸内部向外荡开的环（JS 驱动 scale/opacity；置于丸底，读作「从按钮里荡出来」） */
.pill .ripple{
  position:absolute;inset:0;z-index:-1;
  border-radius:999px;border:2px solid var(--tone-mark);
  opacity:0;pointer-events:none;
}

/* ---------- 主张：被批注的稿纸（版画 A 血统） ---------- */
.thesis{padding-block:var(--story-pad);text-align:center;border-top:1px solid var(--line)}
/* 收窄字阶封顶(80→68px)：窄栏(.wrap-narrow 内容宽约 664px)里，9 个全角字在 80px 下达约 720px，
   会撑破窄栏、把作者用 <br> 定死的每一行二次回绕成两行。68px 让每段 <br> 各自单行、严格两行。
   同一处方施于：主张(.thesis)/过场(验证·卡壳)/复习(SRS)——凡窄栏里最长行达 9 全角字的叙事标题。 */
.thesis .headline,
#verify-beat .headline,#stuck-beat .headline,#srs .headline{font-size:clamp(34px,5.6vw,68px)}
.thesis-art{max-width:640px;margin:clamp(44px,7vh,76px) auto 0;padding-inline:clamp(20px,4.5vw,48px)} /* 竖版稿纸收敛为标本尺度 */
.thesis-art img{width:100%;height:auto;mix-blend-mode:multiply}
/* 版画 figure 维持同色纸底，multiply 融纸不受影响 */
.thesis-art,.chapter-art,.tailpiece,.closing .seal{background:var(--bg)}

/* ---------- 故事跨度：六阶段 stepper（真实状态机） ---------- */
.stage-span{position:relative}
.stepper{
  position:sticky;top:60px;z-index:40;   /* 吸顶在顶栏(60px)之下,不与其重叠 */
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.stepper .row{display:flex;gap:clamp(10px,3vw,34px);justify-content:center;padding-block:12px}
.step{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:var(--tiny);color:var(--ink-muted);transition:color var(--t-medium) var(--ease)}
.step .dot{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--ink-muted);background:transparent;transition:background var(--t-medium) var(--ease),border-color var(--t-medium) var(--ease),transform var(--t-medium) var(--ease)}
.step.is-done .dot{background:var(--red-muted);border-color:var(--red-muted)}
.step.is-active{color:var(--red);font-weight:600}
.step.is-active .dot{background:var(--red);border-color:var(--red);transform:scale(1.25)}
@media (max-width:640px){.step span{display:none}.step.is-active span{display:inline}}

/* ---------- 章节骨架与三速 ---------- */
.story{padding-block:var(--story-pad)}
.story + .story{border-top:1px solid var(--line)}
#submit-beat{min-height:60svh;display:grid;align-content:center}
#submit-beat .headline{font-size:clamp(30px,4.4vw,60px)}
.story-head{margin-bottom:clamp(36px,6vh,64px)}
.story-head .kicker{display:block;margin-bottom:14px}
.duo{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5.5vw,96px);align-items:start}
.duo-text,.duo-demo{min-width:0}
.duo.flip .duo-text{order:2}
.duo.flip .duo-demo{order:1}
@media (max-width:860px){
  .duo{grid-template-columns:1fr}
  .duo.flip .duo-text{order:1}
  .duo.flip .duo-demo{order:2}
}
.duo-text .headline{font-size:var(--dh)}
.chapter-art{margin-top:clamp(28px,4.5vh,48px);line-height:0}
.chapter-art img{width:min(420px,88%);height:auto;mix-blend-mode:multiply}
.chapter-art.axis-art{margin-top:clamp(20px,3vh,32px);margin-bottom:clamp(24px,3.5vh,40px)}
.chapter-art.axis-art img{width:min(620px,96%)}
/* 「你的时间，自动流向薄弱题。」浮在数轴插画正上方（红笔手写，居中）。
   绝对定位=不占流,故上方「复习间隔」正文与横线图之间的间隔保持不变;
   bottom:100% 把批注抬到图片上边缘之上,不再与横线重叠。
   图片在 figure 内左对齐,故批注取与图片相同的左起点+宽度再文字居中,才与图心对齐。 */
.axis-art{position:relative}
.axis-art .mk-over{
  position:absolute;left:0;bottom:100%;width:min(620px,96%);
  display:block;text-align:center;white-space:nowrap;
  transform:rotate(-1.5deg);transform-origin:center bottom;
  margin:0 0 2px;pointer-events:none;
}

/* ---------- demo 面板（面板内=产品的陶橙世界） ---------- */
.panel{background:var(--bg-elevated);border:none;border-radius:8px;overflow:clip;box-shadow:var(--shadow-card)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hairline)}
.panel-head .kicker{margin:0}
.panel-body{padding:clamp(16px,1.4vw,22px)}
.panel-foot{padding:12px 16px;border-top:1px solid var(--hairline);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* 面板内的主按钮/滑杆等回到产品陶橙 */
.panel .btn-primary{background:var(--accent)}
.panel .btn-primary:hover{background:color-mix(in srgb,var(--accent) 88%,var(--ink))}
.panel input[type="range"]{accent-color:var(--accent)}

/* 代码块（近 Monaco vs-light） */
.code{
  font-family:var(--mono);font-size:clamp(13.5px,0.95vw,15px);line-height:1.75;
  background:var(--bg-soft);border-radius:6px;padding:14px 16px;overflow-x:auto;
  counter-reset:ln;
}
.code .cl{display:block;white-space:pre;counter-increment:ln;position:relative;padding-left:34px;border-radius:3px}
.code .cl::before{content:counter(ln);position:absolute;left:0;width:24px;text-align:right;color:color-mix(in srgb,var(--ink-muted) 55%,transparent);font-size:12px}
.code .cl.is-new{background:color-mix(in srgb,var(--ok) 12%,transparent)}
.code.plain .cl{padding-left:0}
.code.plain .cl::before{content:none}
.tk-kw{color:#0000ff}.tk-str{color:#a31515}.tk-cm{color:#008000}.tk-num{color:#098658}.tk-ty{color:#267f99}
/* EC-2 · 回放代码窄屏横溢出:最长行 ~58ch≈470px 远超 ~340px 面板,diff 行尾在画外。
   ≤480px 字号降到 12px + 压缩行号列(padding-left 34→26,行号宽 24→17),让更多行完整落屏。 */
@media (max-width:480px){
  .code{font-size:12px;line-height:1.7}
  .code .cl{padding-left:26px}
  .code .cl::before{width:17px;font-size:10.5px}
}

/* 判题装置：待修行（亲手修 bug 的那一行） */
.code .cl.is-target{cursor:pointer;outline:1.5px dashed color-mix(in srgb,var(--red) 55%,transparent);outline-offset:-1.5px}
@media (hover:hover) and (pointer:fine){
  .code .cl.is-target:hover{background:color-mix(in srgb,var(--red) 8%,transparent)}
}
.code .cl.is-fixed{background:color-mix(in srgb,var(--ok) 12%,transparent);outline:none;cursor:default}
.fix-hint{display:inline-flex;align-items:center;gap:8px;font-family:var(--kai);font-size:15px;color:var(--red)}

/* verdict 徽章 + 用例行（P-38：整块 tone 底 + 全边框，无左竖线） */
.verdict{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:var(--small);font-weight:600;
  padding:5px 12px;border-radius:6px;
  color:var(--tone-fg);background:var(--tone-surface);border:1px solid var(--tone-border);
}
.case-row{
  border:1px solid var(--tone-border);
  background:var(--tone-surface);
  border-radius:6px;
  padding:10px 14px;margin-top:10px;
  font-family:var(--mono);font-size:13px;line-height:1.8;
}
.case-row .lbl{color:var(--ink-muted);margin-right:10px;font-family:var(--sans);font-size:var(--tiny)}
.case-row .st{font-family:var(--sans);font-size:var(--tiny);font-weight:600;color:var(--tone-fg)}

/* 评级盖章（demo 内方形章：产品 RatingBadge 语法） */
.stamp{
  display:inline-grid;place-content:center;
  width:64px;height:64px;border-radius:8px;flex:none;
  font-family:var(--mono);font-size:34px;font-weight:700;
  border:2px solid var(--tone-border);color:var(--tone-fg);background:var(--tone-surface);
}
.stamp.solid{background:var(--tone-mark);color:var(--bg-elevated);border-color:var(--tone-mark)}
@keyframes gradeStamp{
  from{box-shadow:0 0 0 0 color-mix(in srgb,var(--tone-mark,currentColor) 24%,transparent);transform:scale(1.08) rotate(-1deg)}
  to{box-shadow:0 0 0 3px transparent;transform:none}
}
@keyframes gradeLetter{
  from{opacity:.72;transform:translateY(1px)}
  to{opacity:1;transform:none}
}
.stamp.is-stamping{animation:gradeStamp var(--t-slow) var(--ease) both}
.stamp.is-stamping .letter{display:block;animation:gradeLetter var(--t-slow) var(--ease) both}

/* 消息气泡（导师衬线，学生无衬线） */
.chat{display:flex;flex-direction:column;gap:12px}
/* 面试对话框（#interview）：可点(非分镜)模式也定高·内部滚动，页面不随对话变长；分镜模式由 .is-cine 覆盖高度 */
.chat-body{height:clamp(340px,52vh,520px);overflow-y:auto;overscroll-behavior:contain}
.msg{max-width:90%;padding:10px 14px;border-radius:8px;font-size:15px;line-height:1.7}
.msg.tutor{align-self:flex-start;background:var(--bg-soft);font-family:var(--serif)}
.msg.student{align-self:flex-end;background:var(--accent-muted);font-family:var(--sans);color:var(--ink)}
.msg .tier-tag{display:block;font-family:var(--mono);font-size:var(--tiny);color:var(--ink-muted);margin-bottom:6px}
.msg .msg-code{font-family:var(--mono);font-size:12.5px;line-height:1.7;background:var(--bg-elevated);border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin-top:8px;overflow-x:auto;white-space:pre}
.typing{display:inline-flex;gap:4px;padding:12px 14px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-muted);animation:blink 1s infinite var(--ease)}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,70%,100%{opacity:.25}35%{opacity:1}}

/* 求助装置：你来追问 —— 左＝对话誊本（定高·内部滚动），右＝可追问的台阶 */
#help .wrap{max-width:1000px}
.tutor-cols{display:grid;grid-template-columns:1.5fr 1fr;align-items:stretch}
.tutor-transcript{
  height:clamp(360px,54vh,520px);overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(16px,1.4vw,22px);border-right:1px solid var(--hairline);
}
.tutor-asks{align-self:start;padding:clamp(14px,1.2vw,20px)}
/* 空态：还没求助时，誊本里立一句引导语 */
#tutor-chat:empty{min-height:100%;justify-content:center;text-align:center}
#tutor-chat:empty::before{
  content:"点一个问题，看它把你往前推一层。";
  font-family:var(--serif);color:var(--ink-muted);font-size:15px;line-height:1.75;
  max-width:32ch;margin-inline:auto;
}
.ask-options{display:grid;gap:10px}
.ask-btn{
  text-align:left;font-family:var(--sans);font-size:var(--small);line-height:1.6;
  padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg-elevated);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.ask-btn .tier{display:block;font-family:var(--mono);font-size:var(--tiny);color:var(--ink-muted);margin-bottom:4px}
@media (hover:hover) and (pointer:fine){
  .ask-btn:not([disabled]):hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--bg-elevated))}
}
.ask-btn:active{transform:translateY(1px)}
.ask-btn.is-asked{opacity:.5;cursor:default}
/* 第 4 层：参考解不解锁——把「它不给答案」摆成台阶顶端的一格 */
.ask-btn.is-locked{border-style:dashed;background:transparent;cursor:not-allowed;opacity:1}
.ask-btn.is-locked .lock-line{display:block;font-family:var(--kai);color:var(--red);font-size:var(--small);line-height:1.5}
@media (max-width:760px){
  .tutor-cols{grid-template-columns:1fr}
  .tutor-asks{order:1;align-self:auto;border-bottom:1px solid var(--hairline)}
  .tutor-transcript{order:2;border-right:none;height:clamp(300px,46vh,420px)}
}
/* 触屏(pointer:coarse):取消定高内滚,随内容自然增高,页面滚动接管——消灭滚动陷阱(3.1)。
   分镜模式例外:.is-cine .chat-body 的定高在后方以更高优先级保留(分镜从不拦截页面滚动,无陷阱)。 */
@media (pointer:coarse){
  .chat-body,.tutor-transcript{height:auto;overflow-y:visible;overscroll-behavior:auto}
  #tutor-chat:empty{min-height:140px}   /* 空态引导语:父级取消定高后 min-height:100% 会塌,给个底 */
}

/* ---------- 五维雷达（demo 内产品世界：陶橙；参数移植 ReviewRadar） ---------- */
.radar-wrap{display:grid;place-items:center;padding-block:8px}
.radar-svg{width:min(340px,76vw);height:auto;overflow:visible}
.rgrid{fill:none;stroke:var(--line);stroke-width:1;opacity:.78}
.raxis{stroke:var(--line);stroke-width:1;opacity:.68}
.rfill{fill:color-mix(in srgb,var(--accent) 16%,transparent);stroke:none;transform-box:fill-box;transform-origin:center;opacity:0}
.rline{fill:none;stroke:var(--accent);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:560;stroke-dashoffset:560}
.rdot{fill:var(--bg-elevated);stroke:var(--tone-mark,var(--ink-muted));stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.rlabel{fill:var(--ink-muted);font-family:var(--sans);font-size:11px;opacity:0}
.radar-svg.is-in .rfill{animation:radarFill 1200ms var(--ease) var(--t-fast) both}
.radar-svg.is-in .rline{animation:radarLine 1500ms var(--ease) both}
.radar-svg.is-in .rdot{animation:radarDot 720ms cubic-bezier(.34,1.56,.64,1) both}
.radar-svg.is-in .rlabel{animation:radarLabel 540ms var(--ease) both}
@keyframes radarFill{from{opacity:0;transform:scale(.62)}60%{opacity:1}to{opacity:1;transform:scale(1)}}
@keyframes radarLine{from{stroke-dashoffset:560}to{stroke-dashoffset:0}}
@keyframes radarDot{0%{opacity:0;transform:scale(0)}55%{opacity:1;transform:scale(1.22)}100%{opacity:1;transform:scale(1)}}
@keyframes radarLabel{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}

.review-rail{display:grid}
.review-sec{padding-block:14px}
.review-sec + .review-sec{border-top:1px solid var(--hairline)}
.review-sec .kicker{display:block;margin-bottom:6px}
.review-sec .big{font-family:var(--mono);font-size:26px;font-weight:700}
.review-sec .big small{font-size:14px;color:var(--ink-muted);font-weight:400}
.review-sec p{font-size:var(--small);color:var(--ink-muted)}
.review-sec p.strong{color:var(--ink)}
.review-note{display:flex;gap:16px;align-items:center;margin-top:20px}

/* ---------- SRS 数轴 ---------- */
.srs-axis{position:relative;height:92px;margin-block:26px 10px;margin-inline:12px 28px}
.srs-line{position:absolute;left:0;right:0;top:36px;height:1px;background:var(--line)}
.srs-tick{position:absolute;top:30px;width:1px;height:13px;background:var(--line)}
.srs-tick i{position:absolute;top:20px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:var(--tiny);color:var(--ink-muted);font-style:normal}
/* EC-3 · SRS 数轴 8 档对数刻度窄屏碰撞(112/180 间距 ~27px):≤480px 隐去 28、112 两档 */
@media (max-width:480px){
  .srs-tick[data-d="28"],.srs-tick[data-d="112"]{display:none}
}
.srs-marker{position:absolute;top:36px;width:14px;height:14px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);transition:left 620ms cubic-bezier(.34,1.56,.64,1)}
.srs-log{margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline)}
.srs-log .kicker{display:block;margin-bottom:10px}
.srs-chips{display:flex;gap:8px;flex-wrap:wrap;min-height:30px}
.srs-chip{font-family:var(--mono);font-size:var(--tiny);padding:3px 9px;border-radius:999px;color:var(--tone-fg);background:var(--tone-surface);border:1px solid var(--tone-border)}
.srs-read{font-family:var(--sans);font-size:var(--small);margin-top:14px;padding:12px 14px;border-radius:6px;background:var(--tone-surface);color:var(--tone-fg);border:1px solid var(--tone-border);line-height:1.65}
.srs-grades{display:flex;gap:6px;flex-wrap:nowrap}
.srs-grades .btn{min-width:44px;justify-content:center;padding-inline:0}
.srs-grades .btn[data-srs]:hover,.srs-grades .btn[data-srs]:focus-visible{border-color:var(--tone-border);color:var(--tone-fg)}
.srs-grades .btn[data-srs]:active{background:var(--tone-surface)}

/* ---------- 滚动分镜（GSAP pin；轨道高度由 JS 设定） ----------
   .is-cine 由 JS 在桌面且视口足够时挂上；否则保持按钮交互版。 */
.cine-track{position:relative}
.cine-stage{display:grid;align-content:center}
.is-cine .cine-stage{min-height:100svh;padding:72px 0 24px}
.cine-foot-interactive{display:contents}
.is-cine .cine-foot-interactive{display:none}
.cine-scrub{display:none}
.is-cine .cine-scrub{
  display:block;height:2px;flex:1;border-radius:999px;
  background:var(--line);position:relative;overflow:clip;
}
.is-cine .cine-scrub i{
  position:absolute;inset:0;transform-origin:left center;
  transform:scaleX(0);background:var(--accent);
}
.cine-hint{display:none}
.is-cine .cine-hint{display:inline}
.is-cine .chat-body{height:min(56vh,560px);overflow-y:auto}
#replay-note{min-height:calc(2 * 1.6em)}
#interview.is-cine .chapter-art img{width:min(280px,60%)}
@media (max-height:820px){ #interview.is-cine .chapter-art{display:none} }

/* ---------- 三幕：一天的训练桌（陈列桌换底，纸的颗粒不断） ---------- */
#daily{
  background-color:var(--bg-soft);
  background-image:var(--paper-noise);
  background-size:200px 200px;
}
.pano-hero{margin-block:clamp(28px,4.5vh,48px)}
.pano-hero + .pano-duo,.pano-duo + .pano-hero,.pano-hero + .pano-trio{margin-top:clamp(28px,4.5vh,48px)}
.pano-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px)}
@media (max-width:820px){.pano-duo{grid-template-columns:1fr}}
/* 三幕四图:一天的动线(队列→复盘→成长)三联排 */
.pano-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
@media (max-width:900px){.pano-trio{grid-template-columns:1fr}}
#daily figure{margin:0}
#daily img{
  width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:8px;
  background:var(--bg-elevated);
  box-shadow:var(--shadow-exhibit);
}
#daily figcaption{
  font-family:var(--sans);font-size:15px;color:var(--ink-muted);
  line-height:1.6;margin-top:14px;max-width:60ch;
}
/* 处方总览题注:整句一行读完(60ch≈30 汉字会把这句 ~39 字断行);窄屏仍自然回绕 */
#daily .pano-hero figcaption{max-width:none}

/* ---------- 四幕：你的桌子你做主（三主张 + 用户向数字墙） ----------
   编辑部条目式(4.4 拍板 2026-07-17):kicker｜主张｜证据 三列行、hairline 分隔,
   替代三栏并排的「功能卡」结构回声;窄屏退化为纵向条目。 */
.claims{margin-top:clamp(36px,6vh,64px);border-top:1px solid var(--line)}
.claim{
  display:grid;grid-template-columns:172px 1fr 1.55fr;gap:clamp(16px,2.6vw,44px);
  align-items:baseline;padding-block:clamp(20px,3.4vh,34px);border-bottom:1px solid var(--hairline);
}
.claim h3{font-family:var(--serif);font-weight:700;font-size:clamp(20px,1.8vw,26px);line-height:1.3}
.claim p{margin-top:0;font-size:var(--small);color:var(--ink-muted);line-height:1.75}
.claim p strong{color:var(--ink);font-weight:600}
.claim .kicker{display:block;padding-top:2px}
@media (max-width:860px){
  .claim{grid-template-columns:1fr;gap:6px;padding-block:22px}
  .claim p{margin-top:6px}
}
.numwall{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:8px;overflow:clip;margin-top:clamp(48px,8vh,88px);background:var(--bg-elevated)}
.numcell{padding:clamp(26px,4vw,52px);border:0 solid var(--line)}
.numcell:not(:nth-child(3n+1)){border-left-width:1px}
.numcell:nth-child(n+4){border-top-width:1px}
@media (max-width:720px){
  .numwall{grid-template-columns:1fr 1fr}
  .numcell{border-left-width:0!important;border-top-width:0!important}
  .numcell:nth-child(2n){border-left-width:1px!important}
  .numcell:nth-child(n+3){border-top-width:1px!important}
}
.numcell .n{font-family:var(--mono);font-size:clamp(40px,6.6vw,100px);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1.05}
.numcell .n small{font-size:.45em;font-weight:500;color:var(--ink-muted);margin-left:2px}
.numcell .d{font-family:var(--sans);font-size:var(--tiny);color:var(--ink-muted);margin-top:6px}

/* ---------- 尾花 / 终章 / 页脚 ---------- */
.tailpiece{display:grid;place-items:center;padding-block:clamp(28px,4.5vh,56px);margin:0}
.tailpiece img{width:min(160px,36vw);height:auto;mix-blend-mode:multiply}
.tailpiece figcaption{margin-top:14px;text-align:center;letter-spacing:.04em;font-size:clamp(16px,1.9vw,21px);color:var(--ink)}
.closing{padding-block:var(--story-pad);text-align:center;border-top:1px solid var(--line)}
.closing .seal{margin:0 auto 30px;width:min(200px,44vw)}
.closing .seal img{width:100%;height:auto;mix-blend-mode:multiply}
/* 终章标题两行(各 10–12 字):收窄字阶,让「今天开始，志逐算法之巅。」整句同一行不再回绕 */
.closing .headline{font-size:clamp(28px,6.2vw,54px)}
.closing .sub{margin-inline:auto}
.steps3{
  margin:34px auto 0;max-width:520px;text-align:left;
  font-family:var(--mono);font-size:var(--small);line-height:2.1;color:var(--ink-muted);
  border:1px solid var(--line);border-radius:8px;background:var(--bg-elevated);
  padding:18px 22px;box-shadow:var(--shadow-ring)
}
.steps3 b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}/* EC-5 · 终章 git clone URL ≤330px 溢出:长串按需断行 */
.steps3 .n{color:var(--red);margin-right:10px;font-weight:700}
.closing .cta{margin-top:36px;display:flex;gap:12px 18px;align-items:center;justify-content:center;flex-wrap:wrap}
.closing .cta .mk-note{margin-top:0}
/* ---------- 页面最底部：安静的一行（仿 JourneyPilot microfoot：署名 + 回到顶部） ---------- */
.microfoot{
  margin-top:clamp(40px,7vh,88px);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--sans);font-size:var(--tiny);color:var(--ink-muted)
}
.foot-credit{line-height:1.85;max-width:64ch}
/* 回到顶部 = 一枚红笔钤印(圈 + 上行箭头),呼应全页校对红/手写母题;
   印章本身够大即达意,不再配文字。图为真透明底(白底已抠),任何页面底色都不衬方块。
   hover 时印章上提,像刚要起章。 */
.foot-top{display:inline-flex;align-items:center;flex:none;text-decoration:none}
.foot-top-stamp{display:block;width:72px;height:72px;object-fit:contain;transition:transform var(--t-medium) var(--ease)}
.foot-top:hover .foot-top-stamp{transform:translateY(-3px) rotate(-4deg)}

/* ---------- 显影层（CSS scroll-driven 增强：天然双向可重演） ----------
   仅图像类走 view() timeline；文本/标题的重演由 GSAP 层负责。 */
@supports (animation-timeline: view()){
  .sda-img{
    animation:sdaImg linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  /* 只淡入、出现即留住(去掉离场淡出,消除滚动时的忽隐忽现) */
  @keyframes sdaImg{
    0%{opacity:0;transform:scale(1.045) translateY(30px)}
    22%{opacity:1;transform:none}
    100%{opacity:1;transform:none}
  }
  /* 三幕头图（查收练习工作台）：入场更明显——更大的升起与推近，落定更靠后 */
  .pano-hero.sda-img{animation-name:sdaHero}
  @keyframes sdaHero{
    0%{opacity:0;transform:scale(1.09) translateY(78px)}
    10%{opacity:.2}
    46%{opacity:1;transform:none}
    100%{opacity:1;transform:none}
  }
  /* multiply 版画：动画必须留在 img 自身（父级 transform 会隔离 blend） */
  .sda-art{
    animation:sdaArt linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  @keyframes sdaArt{
    0%{opacity:0;transform:translateY(2.4%)}
    15%{opacity:1}
    100%{opacity:1}
  }
}
@supports not (animation-timeline: view()){
  .sda-img,.sda-art{opacity:1}
}

/* ---------- JS 预隐藏门（.boot 就绪前止闪；no-js 3s 自动揭幕见 main.js/inline） ---------- */
html.boot [data-rv],
html.boot [data-split],
html.boot .mk-note,
html.boot .hero-copy,
html.boot .hero-shot{visibility:hidden}

/* ---------- reduced-motion 兜底（零成本层：不做专门设计，只保可用） ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sda-img,.sda-art{animation:none;opacity:1;transform:none}
  .typing i{animation:none;opacity:.6}
  .srs-marker{transition:none}
  .wash{animation:none;opacity:.6}
}

/* ── 2026-07-19 二审：三页统一项目菜单重构 ──
   面板仍取主站暖纸底；条目=各自 landing 的「缩影卡」（EC 校样蓝图细格 / JP 夜航破晓 / 海龟汤陈年卷宗）；
   品牌 icon+字标图取代圆点纯文字；左色带/圆点退役；涟漪由线环改水彩晕染面（.np-wash，js 同步改）。
   背景一律 .npm-item.npm-xx 双类写（压过同特异性的 .npm-item:hover 背景类规则，三页同一份） */
.nav-proj-menu{position:absolute;top:calc(100% + 10px);right:0;width:328px;max-width:calc(100vw - 32px);background:#f7f1e3;border:1px solid rgba(122,102,66,.34);border-radius:14px;padding:6px;box-shadow:0 22px 48px rgba(10,8,5,.42),0 3px 10px rgba(10,8,5,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .24s cubic-bezier(.23,1,.32,1),transform .24s cubic-bezier(.23,1,.32,1),visibility .24s;z-index:70}
.nav-proj.open .nav-proj-menu{opacity:1;visibility:visible;transform:none}@media (hover:hover) and (pointer:fine){.nav-proj:hover .nav-proj-menu{opacity:1;visibility:visible;transform:none}}
/* 2026-07-20 顶栏站点跳转：主页/摄影/博客 居技术拆解左侧；窄屏(<=760px)折进菜单底行 .npm-foot */
.nav-sep{flex:none;width:1px;height:16px;background:var(--line);margin:0 2px}
.npm-foot{display:none;margin-top:5px;padding:8px 4px 4px;border-top:1px solid rgba(122,102,66,.22);gap:4px}
.npm-foot a{flex:1;text-align:center;font-family:var(--sans);font-size:13.5px;letter-spacing:.04em;color:#5a4a35;text-decoration:none;padding:8px 0;border-radius:7px;transition:color .18s,background .18s}
.npm-foot a:hover{color:#2a2016;background:rgba(122,102,66,.1)}
@media (max-width:760px){.nav-site,.nav-sep{display:none}.npm-foot{display:flex}}
.npm-item{position:relative;overflow:hidden;isolation:isolate;display:flex;gap:13px;align-items:center;padding:16px 15px;border-radius:9px;text-decoration:none;box-shadow:inset 0 0 0 1px var(--edge,rgba(122,102,66,.16));transition:box-shadow .32s cubic-bezier(.32,.72,0,1),transform .32s cubic-bezier(.32,.72,0,1)}
.npm-item+.npm-item{margin-top:5px}
.npm-item:hover{background:transparent;transform:translateY(-1px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w1) 52%,transparent),0 6px 16px rgba(40,26,12,.16)}
.npm-item:active{transform:scale(.985)}
.npm-item:focus-visible{outline:2px solid var(--w1);outline-offset:1px}
.npm-item::before{content:"";position:absolute;inset:0;width:auto;height:auto;margin:0;border-radius:0;transform:none;z-index:0;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--w1) 10%,transparent),transparent 70%);opacity:0;transition:opacity .32s cubic-bezier(.32,.72,0,1)}
.npm-item:hover::before,.npm-item:focus-visible::before{opacity:1}
.npm-item.npm-ec{--edge:rgba(28,27,24,.13);--w1:#b3402a;--w2:#8a3020;--w3:#423a31;background:linear-gradient(90deg,rgba(252,251,248,0) 42%,rgba(252,251,248,.9) 80%),linear-gradient(rgba(120,60,44,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(120,60,44,.08) 1px,transparent 1px),#fcfbf8;background-size:auto,13px 13px,13px 13px,auto}
.npm-item.npm-jp{--edge:rgba(242,233,216,.18);--w1:#e4571f;--w2:#f2a05f;--w3:#f2e9d8;--wash-blend:screen;--wash-o:.5;background:radial-gradient(1.5px 1.5px at 82% 22%,rgba(242,233,216,.9),transparent),radial-gradient(1px 1px at 63% 55%,rgba(242,233,216,.62),transparent),radial-gradient(1.2px 1.2px at 71% 30%,rgba(242,233,216,.45),transparent),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Cpath d='M4 40C34 10 78 4 116 13' fill='none' stroke='%23f2e9d8' stroke-opacity='.4' stroke-width='1.4' stroke-dasharray='1 6' stroke-linecap='round'/%3E%3C/svg%3E") right 10px top 7px/116px auto no-repeat,radial-gradient(135% 210% at 102% 118%,rgba(228,87,31,.5),rgba(228,87,31,0) 55%),linear-gradient(103deg,#101c33,#0d1f3c 55%,#142b52)}
.npm-item.npm-ts{--edge:rgba(122,102,66,.3);--w1:#b89968;--w2:#b91c1c;--w3:#8b7a4e;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .18 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E"),radial-gradient(130% 180% at 12% -12%,#faf5e8,#f0e5c8 55%,#e2d2a8 108%)}
.npm-ico{flex:none;width:40px;height:40px;object-fit:contain;position:relative;z-index:2;transition:transform .5s cubic-bezier(.32,.72,0,1)}
.npm-item:hover .npm-ico{transform:translateY(-1.5px) rotate(-4deg)}
.npm-item.npm-jp:hover .npm-ico{transform:translate(2px,-2px) rotate(8deg)}
.npm-txt{display:flex;flex-direction:column;gap:6px;min-width:0;position:relative;z-index:2}
.npm-word{display:block;height:15px;width:auto;align-self:flex-start}
.npm-jp .npm-word{height:14px}
.npm-txt .npm-name{font-family:Georgia,"Songti SC","Noto Serif SC",serif;font-size:16.5px;line-height:1;font-weight:700;color:#33291b;letter-spacing:.045em;transition:color .24s ease}
.npm-item.npm-ts:hover .npm-txt .npm-name{color:#8f1d15}
.npm-txt i{font-family:ui-sans-serif,system-ui,"PingFang SC",sans-serif;font-size:12px;color:#6b6154;font-style:normal;line-height:1.45;letter-spacing:.02em}
.npm-jp .npm-txt i{color:rgba(242,233,216,.78)}
.npm-ts .npm-txt i{color:#6e5f42}
.npm-item.is-current::after{content:"当前";position:absolute;top:8px;right:9px;z-index:2;font-family:ui-sans-serif,system-ui,"PingFang SC",sans-serif;font-size:9.5px;line-height:1;letter-spacing:.14em;padding:3px 6px 3px 7.5px;border-radius:999px;color:var(--cur-ink,#86683c);box-shadow:inset 0 0 0 1px var(--cur-ring,rgba(139,116,64,.4))}
.npm-ec.is-current::after{--cur-ink:#b3402a;--cur-ring:rgba(179,64,42,.32)}
.npm-jp.is-current::after{--cur-ink:rgba(242,233,216,.9);--cur-ring:rgba(242,233,216,.32)}
.np-wash{position:absolute;left:0;top:0;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;pointer-events:none;z-index:1;opacity:0;background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 88%,#fff) 0%,var(--rc) 30%,color-mix(in srgb,var(--rc) 42%,transparent) 62%,transparent 100%);mix-blend-mode:var(--wash-blend,multiply);filter:blur(9px);will-change:transform,opacity}
@keyframes np-wash{0%{transform:translate(var(--rx),var(--ry)) scale(.1);opacity:0}14%{opacity:var(--wash-o,.42)}100%{transform:translate(var(--rx),var(--ry)) scale(3.6);opacity:0}}