/* 落地页专用。app.css 是应用内的，别互相引。
   深色不是主题是身份：照片是页面上唯一的光源（spec §5）。

   色值只在这两个 token 块里出现一次（hallmark 审计 2026-08-22，M6）：
   下面任何地方要一个颜色，都从 var() 里拿，透明度用 color-mix 调——
   不再满篇 rgba(216,163,90,.x)，改琥珀只改一处。 */
:root{
  --bg:#0d131d;--bg2:#101622;--line:rgba(242,237,228,.07);
  --amber:#d8a35a;--blue:#7e9ebd;--ink:#f2ede4;--mut:#94a7bc;
  --amber-hi:#e7bc79;          /* 琥珀的 hover 亮一档 */
  --danger:#d98a7e;            /* 全页唯一的警示色（和 app.css 同名） */
  --accent:var(--amber);       /* 品牌 SVG 的 stroke 走这个名字，和 app.css 对齐 */
  --btn-top:#e0ac60;--btn-bot:#c6913f;--btn-ink:#100c05;
  --ph-a:#1b2534;--ph-b:#141c28;            /* 暗格照片的兜底渐变 */
  --nb-a:#243043;--nb-b:#161e2a;            /* 笔记本里暗掉那张的兜底 */
  --warm-a:#e8b877;--warm-b:#c98f45;--warm-c:#7a5a30;  /* 亮着那张的兜底 */
  --ramen-a:#dfae67;--ramen-b:#96703a;
  /* Google 按钮：Google 的品牌规范给了 light / dark / neutral 三套，
     深色页面用 dark 那套是合规的——不是只有白底 */
  --g-bg:#131314;--g-ink:#e3e3e3;--g-line:#8e918f;--g-hover:#1e1f20;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
*{margin:0;box-sizing:border-box}
html{color-scheme:dark}
/* 任何宽度都不许横向滚：clip 不是 hidden，不会杀掉后代的 sticky/fixed */
html,body{overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* 非源语言用户等词典到位再显示；类由 head 里的内联脚本按需加，无 JS 就永远不加 */
html.i18n-wait body{visibility:hidden}
body{background:var(--bg);color:var(--ink);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased}
::selection{background:color-mix(in srgb,var(--amber) 30%,transparent);color:var(--ink)}
:focus-visible{outline:2px solid color-mix(in srgb,var(--amber) 65%,transparent);outline-offset:3px;border-radius:4px}
/* 胶片噪点：feTurbulence data-uri，唯一允许的"装饰"（spec §5） */
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:960px;margin:0 auto;padding:0 32px;position:relative}
/* 段落呼吸不再一刀切 110：默认 96，证据段（#proof）给最多，FAQ 最紧 */
section{padding:96px 0;border-bottom:1px solid var(--line)}
#proof{padding:120px 0}
#faq{padding:80px 0 96px}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;overflow-wrap:anywhere;min-width:0}
h2{font-size:clamp(28px,1.03vw + 24.2px,34px);line-height:1.22;text-wrap:balance}
main section h2{margin-top:24px}
.mut{color:var(--mut)}
/* 眉题只留 hero 一个（hallmark：眉题默认 OFF，全页 ≤2），装饰线去掉。
   其余段落的标题就是标题——h2.sec，字号比正文 h2 小一档 */
.eyebrow{font:600 11px/1 ui-sans-serif;letter-spacing:.26em;color:var(--blue);text-transform:uppercase}
h2.sec{font-size:clamp(24px,1vw + 20px,28px);margin:0 0 8px}
nav.top{display:flex;align-items:center;padding:26px 0;font-size:13px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;color:var(--ink);text-decoration:none}
.brand svg{display:block}
nav.top .links{margin-left:auto;display:flex;gap:30px;align-items:center}
nav.top .links a{color:var(--mut);text-decoration:none;letter-spacing:.02em;transition:color .2s}
nav.top .links a:hover{color:var(--ink)}
nav.top .links a.cta{color:var(--amber)}
nav.top .links a.cta:hover{color:var(--amber-hi)}
/* 按钮：一种 hover 信号就够（主按钮变投影、幽灵按钮变描边），不再同时上浮。
   统一 44px 高，表单里的输入框也是 44——同一张表单三种高度是最常见的调表单 slop */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 26px;border-radius:10px;
  font:600 14px/1 ui-sans-serif;letter-spacing:.02em;text-decoration:none;
  transition:box-shadow .2s ease,border-color .2s ease,background-color .2s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));color:var(--btn-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 28px color-mix(in srgb,var(--amber) 16%,transparent)}
.btn.primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 34px color-mix(in srgb,var(--amber) 22%,transparent)}
.btn.ghost{color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.btn.ghost:hover{border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.btn.ghost .icon{transition:transform .2s ease}
.btn.ghost:hover .icon{transform:translateX(3px)}
/* 禁用要三个通道一起说：属性 + 透明度 + 光标 */
.btn:disabled,.linklike:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.icon{width:18px;height:18px;flex-shrink:0}
footer{padding:46px 0 70px;font-size:13px;color:var(--mut);display:flex;gap:26px;align-items:center;flex-wrap:wrap}
footer a{color:var(--mut);text-decoration:none;transition:color .2s}
footer a:hover{color:var(--ink)}

/* 登录区（老页面整段搬来，样式因为不再引 app.css 在这里重给） */
#login .card{background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:30px;max-width:420px}
#login h2{font-size:24px;margin-bottom:10px}
#login .hint{font-size:14px;color:var(--mut);margin-bottom:20px}
#login label{display:block;font-size:13px;color:var(--mut);margin-bottom:6px}
#login input{width:100%;height:44px;padding:0 14px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font:16px/1 ui-sans-serif;transition:border-color .2s}
#login input::placeholder{color:color-mix(in srgb,var(--mut) 70%,transparent)}
#login input:focus{outline:none;border-color:color-mix(in srgb,var(--amber) 50%,transparent)}
#login input:focus-visible{outline:2px solid color-mix(in srgb,var(--amber) 40%,transparent);outline-offset:2px}
#login .field{margin-bottom:16px}
/* Turnstile 的落点：空着不占位；真弹出来时和按钮留一行距 */
.turnstile-slot:not(:empty){margin-bottom:14px}
#login .btn{border:0;cursor:pointer}
.linklike{background:none;border:0;padding:0;color:var(--blue);cursor:pointer;
  font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.linklike:hover{color:var(--ink)}
/* 提示行预留一行高：报错出现时不把下面顶开 */
#login .status{font-size:13px;color:var(--mut);margin-top:14px;min-height:1lh}
#login .status[data-state="error"]{color:var(--danger)}
#login .status .muted{display:block;color:var(--mut);margin-top:4px}
.mail-links{display:flex;gap:16px;margin-top:14px;font-size:13px}
/* display:flex 会压过 hidden 属性的 UA 样式——不补这条，发码前链接就露出来 */
.mail-links[hidden]{display:none}
.mail-links a{color:var(--blue)}
.dev-link{display:block;font-size:13px;color:var(--amber);margin-top:8px}
/* Google 按钮：Google 规范的 dark 主题（深底、灰描边、浅字、左侧四色 G），
   浅色模式下换回 light 主题的白底——两套都在 token 块里。
   #login .btn 把 border 抹成 0，这一条选择器更具体，把边框加回来 */
#login .btn.google{width:100%;background:var(--g-bg);color:var(--g-ink);
  border:1px solid var(--g-line);font-weight:500;font-size:15px;margin-bottom:2px}
#login .btn.google:hover{background:var(--g-hover)}
#login .btn.google svg{width:18px;height:18px;flex:0 0 auto}
/* display:inline-flex 会压过 hidden 的 UA 样式——不补这条，没配 Google 的部署
   会看到一个死按钮（.mail-links 上面栽过同一个坑） */
#login .btn.google[hidden]{display:none}
/* 分隔线：两侧各一条细线夹住一个「or」 */
#login .login-or{display:flex;align-items:center;gap:12px;margin:18px 0;
  font-size:13px;color:var(--mut)}
#login .login-or::before,#login .login-or::after{content:"";flex:1;height:1px;background:var(--line)}
#login .login-or[hidden]{display:none}
#login .login-alert{font-size:13px;color:var(--danger);line-height:1.55;margin-bottom:18px}
#login .login-terms{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--ink)}
#login .login-terms a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
#login .login-terms b{font-weight:600}
#login .login-alert.info{color:var(--ink);border-left:3px solid var(--accent);padding-left:12px}
#login .login-alert .muted{display:block;color:var(--mut);margin-top:4px}
.lang-picker{background:none;border:0;color:var(--mut);font:inherit;font-size:13px;cursor:pointer}
.lang-picker option{background:var(--bg2);color:var(--ink)}
/* hero：下边距重于上边距（≥1.3×），整块才坐进页面里而不是浮着；
   标题上限 50px，1280 宽两到三行收住 */
.hero{padding:72px 0 96px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(37px,2.6vw + 26px,50px);line-height:1.12;margin:26px 0 0;max-width:820px}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero .sub{font-size:17px;line-height:1.7;max-width:520px;margin-top:26px;color:var(--mut)}
.ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:38px;align-items:center}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:52px}
.strip .ph{aspect-ratio:4/3;border-radius:8px;background:linear-gradient(150deg,var(--ph-a),var(--ph-b));
  background-size:cover;background-position:center;
  /* 暗格压灰：相册里沉睡的那些。图挂在渐变上层，加载失败自动露出渐变兜底 */
  filter:grayscale(.65) brightness(.5);transition:filter .45s ease}
.strip .ph:hover{filter:grayscale(.35) brightness(.68)}
.strip .ph.p-porto{background-image:url('/img/porto-ribeira.jpg'),linear-gradient(150deg,var(--ph-a),var(--ph-b))}
.strip .ph.p-coast{background-image:url('/img/italy-coast.jpg'),linear-gradient(150deg,var(--ph-a),var(--ph-b))}
.strip .ph.p-alps{background-image:url('/img/alps.jpg'),linear-gradient(150deg,var(--ph-a),var(--ph-b))}
.strip .ph.p-kyoto{background-image:url('/img/kyoto-lane.jpg'),linear-gradient(160deg,var(--warm-a),var(--warm-b) 45%,var(--warm-c))}
.strip .ph.lit,.strip .ph.lit:hover{filter:none}
/* 照片的光晕是这一页的论点（照片是唯一光源），留着；其它任何东西都不许发光 */
.strip .ph.lit{background-size:cover;background-position:center;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--amber) 35%,transparent),0 0 52px color-mix(in srgb,var(--amber) 22%,transparent);
  transform:rotate(-1.2deg) scale(1.04)}
.strip-cap{margin-top:26px;font:italic 14px/1.5 var(--serif);color:var(--mut)}
.strip-cap em{color:var(--amber)}
.defblock{border:1px solid var(--line);border-radius:12px;padding:30px 34px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 5%,transparent),transparent);
  font-size:15.5px;line-height:1.75;color:var(--mut);max-width:760px}
.defblock strong{color:var(--ink);font-weight:600}
.defblock .agents{margin-top:14px;font:600 12px/1 ui-sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue)}
@media (max-width:720px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wrap{padding:0 24px}
  section{padding:78px 0}
  .strip{margin-top:56px}
  .eyebrow{font-size:10px;letter-spacing:.22em}
  .ctas .btn{flex:1 1 100%}
  nav.top{flex-wrap:wrap;row-gap:10px}
  nav.top .links{gap:16px;flex-wrap:wrap;justify-content:flex-end}
  nav.top .links a{white-space:nowrap}}
.graveyard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:44px 0 52px}
.gpage{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:18px;min-height:130px}
.gpage .d{font:600 10px/1 ui-sans-serif;letter-spacing:.18em;color:var(--blue);margin-bottom:13px}
.gpage i{display:block;height:5px;border-radius:2.5px;background:color-mix(in srgb,var(--mut) 28%,transparent);margin-bottom:8px}
.gpage .dash{color:color-mix(in srgb,var(--mut) 30%,transparent);font-size:18px}
.absol .body{max-width:580px;margin-top:18px;font-size:16px}
.absol h2 em{font-style:normal;color:var(--amber)}
/* 两件事并排：纯排版的两栏，一条发丝线起头，图标和标题同一行——不是两张图标卡片 */
.gest{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:46px}
.gcard{padding:22px 0 26px;border-top:1px solid var(--line)}
.gcard h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:19px;font-family:var(--serif);font-weight:600;line-height:1}
.gcard .gicon{width:20px;height:20px;color:var(--amber);flex:none}
.gcard p{font-size:14px;color:var(--mut);max-width:36em}
.verbatim{grid-column:1/-1;margin-top:12px;border:1px solid color-mix(in srgb,var(--amber) 22%,transparent);border-radius:12px;
  padding:28px 32px;background:linear-gradient(180deg,color-mix(in srgb,var(--amber) 5%,transparent),transparent)}
.verbatim .q{font:italic 19px/1.5 var(--serif);color:var(--ink)}
.verbatim .a{font-size:14px;color:var(--mut);margin-top:10px;max-width:640px}
.notebook{border:1px solid var(--line);background:var(--bg2);border-radius:14px;padding:38px;margin-top:46px}
.nb-day{font:600 11px/1 ui-sans-serif;letter-spacing:.22em;color:var(--blue);margin-bottom:22px}
.nb-row{display:flex;gap:22px;margin-bottom:24px;align-items:flex-start}
.nb-ph{width:180px;aspect-ratio:3/2;border-radius:8px;flex-shrink:0;
  background:linear-gradient(150deg,var(--nb-a),var(--nb-b));background-size:cover;background-position:center}
.nb-ph.lit{background-image:url('/img/ramen.jpg'),linear-gradient(150deg,var(--ramen-a),var(--ramen-b));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--amber) 30%,transparent),0 0 40px color-mix(in srgb,var(--amber) 28%,transparent)}
/* 「暗掉」只压照片，不压文字——文字压到 55% 就读不出来了 */
.nb-ph.dim{background-image:url('/img/pagoda-evening.jpg'),linear-gradient(150deg,var(--nb-a),var(--nb-b));
  filter:grayscale(.55) brightness(.55)}
.nb-tx{font:15.5px/1.75 var(--serif);color:var(--mut);padding-top:4px}
.nb-tx em{color:var(--ink)}
.tuesday{margin-top:10px;font:italic 15px/1.5 var(--serif);color:var(--amber);text-align:right}
/* 示意笔记本下面那行「打开真的看看」：和 .tuesday 同一格调，链接琥珀下划线 */
.nb-open{margin-top:26px;font-size:14.5px;color:var(--ink-dim);text-align:right}
.nb-open a{color:var(--amber);border-bottom:1px solid color-mix(in srgb,var(--amber) 45%,transparent)}
.nb-open a:hover{border-bottom-color:currentColor}
.nb-open .dot{margin:0 6px;color:var(--ink-dim)}
@media (max-width:720px){.gest{grid-template-columns:1fr;gap:0}.graveyard{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nb-row{flex-direction:column;gap:14px;margin-bottom:28px}.nb-ph{width:100%}
  .notebook{padding:26px 20px}
  .verbatim{padding:24px 20px}
  .plan{padding:26px 24px}}
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px;max-width:660px}
.plan{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:30px}
/* Plus 只靠描边说自己是 Plus，不发光——发光是留给照片的 */
.plan.plus{border-color:color-mix(in srgb,var(--amber) 35%,transparent)}
.plan .pname{font:600 11px/1 ui-sans-serif;letter-spacing:.2em;color:var(--blue)}
.plan.plus .pname{color:var(--amber)}
.plan .price{font:500 34px/1 var(--serif);margin:16px 0 18px}
.plan .price span{font:400 14px/1 ui-sans-serif;color:var(--mut)}
/* 年付折扣标：真实算术（$6.9×12 对 $39.9）。34px 大字旁垂直抬一点对齐光学中线 */
.plan .save-tag{font:500 10.5px/1 "SF Mono",ui-monospace,Menlo,monospace;font-style:normal;letter-spacing:.06em;border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);border-radius:999px;padding:2px 8px;color:var(--amber);white-space:nowrap;vertical-align:4px}
.plan ul{margin:0;padding:0;list-style:none;font-size:14px;color:var(--mut)}
.plan li{margin-bottom:9px;display:flex;gap:8px;align-items:flex-start}
/* 接入三步：有序的就竖着排成有序列表，序号在左栏——不是三张并排的图标卡 */
.steps{list-style:none;margin:36px 0 0;padding:0;max-width:640px;counter-reset:step}
.step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;padding:22px 0;border-top:1px solid var(--line);counter-increment:step}
.step::before{content:counter(step,decimal-leading-zero);grid-row:1/span 2;font:500 22px/1 var(--serif);color:var(--amber);padding-top:2px}
.step>p{grid-column:2}
.step h3{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:17px;font-family:var(--serif);line-height:1.2}
.sicon{width:18px;height:18px;color:var(--amber);flex:none}
.step p{font-size:14px;color:var(--mut);max-width:40em}
.faq{max-width:720px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--amber);font-weight:400;font-size:18px;flex-shrink:0;transition:transform .2s,color .2s}
.faq summary:hover::after{color:var(--amber-hi)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:12px;font-size:14px;color:var(--mut)}
@media (max-width:720px){.pricing{grid-template-columns:1fr}}

/* 动效是点缀不是内容：系统要求少动就全部退回瞬时 */
@media (prefers-reduced-motion:reduce){
  .btn,.btn.ghost .icon,.strip .ph,.faq summary::after,.mode-btn,.linklike,nav.top .links a,footer a,#login input{transition:none}
  .btn:active,.btn.ghost:hover .icon,.faq details[open] summary::after{transform:none}
}

/* ── 中文版式（复审二 C-1/I-1）──
   CJK 行高 1.12 会贴行、负字距会挤字；合成斜体（fake oblique 宋体）是版式硬伤，
   这四处恰是全页情绪最重的句子——强调交给已有的琥珀变色和「」引号。 */
h1{text-wrap:balance}
:lang(zh) h1{line-height:1.28;letter-spacing:0}
:lang(zh) h2{line-height:1.4}
:lang(zh) .verbatim .q,:lang(zh) .strip-cap,:lang(zh) .tuesday,:lang(zh) .nb-tx em,:lang(zh) .absol h2 em{font-style:normal}
/* M-2 主按钮焦点环别 amber-on-amber */
.btn.primary:focus-visible{outline-color:color-mix(in srgb,var(--ink) 70%,transparent)}
/* M-5 页脚换行后语言选择器占整行、左对齐，别悬在右上 */
footer{row-gap:10px}
.plan-cta{display:inline-block;margin-top:18px;font:600 13px/1 ui-sans-serif;color:var(--amber);text-decoration:none}
.plan-cta:hover{text-decoration:underline}

/* ── 移动端整体优化（2026-08-20，实测驱动）──
   数据：中文 h1 在 375 宽 37.6px×6 行占 289px 且破词折行；hero 顶部空 96px，
   签名照片条被推到 808（折叠线 812）整条出屏；输入框 15px 触发 iOS 聚焦
   自动放大；导航 21px / FAQ 30px / 价格卡 CTA 13px 全部低于 44px 触控标准。 */
@media (max-width:720px){
  /* 首屏预算：顶部空砍半 + 中文标题缩号，让照片条半条入屏当下滚诱饵 */
  .hero{padding:44px 0 64px}
  .hero h1{font-size:clamp(30px,8.6vw,38px)}
  :lang(zh) .hero h1{font-size:clamp(25px,7.2vw,34px);line-height:1.34}
  .hero .sub{margin-top:20px;font-size:16px}
  .ctas{margin-top:26px}
  .strip{margin-top:40px}
  /* 全页呼吸：110→78 之后再收一档，7100px 的长页在手机上每一段都该更紧 */
  section,#proof,#faq{padding:64px 0}
  .notebook{padding:24px}
  .defblock{padding:22px 24px}
  .plan{padding:22px}
  .verbatim{padding:20px 22px}
  .step{grid-template-columns:36px minmax(0,1fr);column-gap:12px}
}
/* 触控目标 ≥44px：不改视觉字号，用内边距把可点区域撑起来 */
nav.top .links a{padding:12px 2px;margin:-12px -2px}
.faq summary{padding-top:16px;padding-bottom:16px;margin:-16px 0;position:relative;z-index:1}
.faq details{padding:20px 0}
.plan-cta{padding:12px 0;margin-top:10px;display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
footer a{padding:12px 4px;margin:-12px -4px}
.linklike{padding:10px 4px;margin:-10px -4px}

/* ── 浅色主题（tn-mode 全站契约，2026-08-20 恢复）──
   深色仍是默认与身份；浅色是「白天在咖啡馆翻笔记」——纸色底、墨色字。
   琥珀 #8a5d08：在 #f5f1e8 / #fdfaf3 上 5.1 / 5.5，13px 的小字也过 4.5
   （之前的 #a8730f 只有 3.6 / 3.9，定价卡的 CTA 和「某个周二」都挂）。 */
:root[data-mode="light"]{
  --bg:#f5f1e8;--bg2:#fdfaf3;--line:rgba(33,44,59,.12);
  --amber:#8a5d08;--blue:#51677f;--ink:#212c3b;--mut:#5b6c80;
  --amber-hi:#a8730f;--danger:#a4402c;
  --btn-top:#d9a453;--btn-bot:#c08c35;--btn-ink:#241a08;
  --g-bg:#fdfaf3;--g-ink:#1f1f1f;--g-line:#dadce0;--g-hover:#f3efe4;
}
:root[data-mode="light"] body::before{opacity:.5}
:root[data-mode="light"] .btn.primary{box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 6px 20px color-mix(in srgb,var(--amber) 18%,transparent)}
:root[data-mode="light"] .btn.ghost{border-color:color-mix(in srgb,var(--ink) 25%,transparent)}
:root[data-mode="light"] .strip .ph{filter:grayscale(.5) brightness(.96) opacity(.75)}
:root[data-mode="light"] .strip .ph.lit{filter:none;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--amber) 40%,transparent),0 8px 30px color-mix(in srgb,var(--ink) 18%,transparent)}
:root[data-mode="light"] .nb-ph.dim{filter:grayscale(.45) brightness(.95) opacity(.8)}
:root[data-mode="light"] .nb-ph.lit{box-shadow:0 0 0 1px color-mix(in srgb,var(--amber) 35%,transparent),0 6px 24px color-mix(in srgb,var(--ink) 15%,transparent)}
:root[data-mode="light"] .hero h1 em{text-shadow:none}
:root[data-mode="light"] .defblock{background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 6%,transparent),transparent)}
:root[data-mode="light"] .verbatim{background:linear-gradient(180deg,color-mix(in srgb,var(--amber) 5%,transparent),transparent);border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
:root[data-mode="light"] .plan.plus{border-color:color-mix(in srgb,var(--amber) 40%,transparent)}
:root[data-mode="light"] #login input{background:var(--bg2)}
/* 主题钮：借 app 的形，但样式自带（落地页不引 app.css） */
.mode-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  margin:-10px 0;border:1px solid var(--line);border-radius:9px;background:transparent;
  color:var(--mut);cursor:pointer;font:inherit;transition:color .2s,border-color .2s}
.mode-btn:hover{color:var(--ink);border-color:color-mix(in srgb,var(--mut) 40%,transparent)}
.mode-btn svg{width:17px;height:17px}
/* 语言选择器进导航后的形 */
nav.top .lang-picker{background:transparent;border:1px solid var(--line);border-radius:8px;
  color:var(--mut);font:inherit;padding:8px 6px;margin:-8px 0;cursor:pointer}
nav.top .lang-picker:hover{color:var(--ink)}
@media (max-width:720px){
  /* 移动端导航两行制：第一行 品牌 + 语言 + 主题钮（控件靠右），第二行 四个链接。
     display:contents 把 .links 的孩子提升为 nav 的直接 flex 项才能重排序 */
  nav.top{flex-wrap:wrap;row-gap:6px;column-gap:14px}
  nav.top .links{display:contents}
  nav.top .links a{order:4}
  nav.top #lang-slot{order:2;margin-left:auto}
  nav.top .mode-btn{order:2}
  /* 显式换行符：不然中文标签短，「怎么用」会挤上第一行 */
  nav.top::after{content:"";order:3;flex-basis:100%;height:0}
}