/* ==========================================================================
   天天向上 · 官网共用样式（首页 / 英文页 / 法律页 / 404）
   结构：@layer reset → tokens → base → shell（顶栏/页脚/底部胶囊）→ components → legal
   设计总纲：一本为你写的英文书 · 全站唯一强调手法 = 荧光笔
   ========================================================================== */
@layer reset, tokens, base, shell, components, legal, home, motion;

/* ---------- 自托管英文衬线（Newsreader · OFL）---------- */
@font-face{
  font-family:"Newsreader";
  src:url("/fonts/newsreader-5.2.10-latin-wght.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}

/* ==========================================================================
   reset
   ========================================================================== */
@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-padding-top:80px}
  body{margin:0}
  h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
  ul[role="list"],ol[role="list"]{list-style:none;padding:0}
  img,svg,video{display:block;max-width:100%;height:auto}
  button,input{font:inherit;color:inherit}
  button{cursor:pointer;background:none;border:0;padding:0}
  a{color:inherit}
  dialog{color:inherit}
}

/* ==========================================================================
   tokens · 浅色「象牙纸」/ 深色「夜读台灯」
   ========================================================================== */
@layer tokens{
  :root{
    color-scheme:light dark;
    /* 纸 */
    --paper:#FBF6EE; --paper-2:#F4ECDF; --card:#FFFDF9; --rule:#E7DCCB;
    /* 墨（四档） */
    --ink:#1E1B18; --ink-2:#4A443D; --ink-3:#736A60; --ink-4:#B3A898;
    /* 品牌 */
    --brand:#FF5E3A; --brand-ink:#C9401F; --brand-soft:#FFE6DC; --on-brand:#fff; --brand-btn:#D2401D; --brand-btn-hover:#DD4B27;
    --hl:rgba(255,94,58,.22); --hl-strong:rgba(255,94,58,.38); --hl-faint:rgba(255,94,58,.10);
    /* 宠物辅色（只做光晕 / 描边 / 点缀） */
    --pet-dragon:#3E9C8F; --pet-fox:#E9853A; --pet-monster:#6F87A6; --pet-phoenix:#E2A63B;
    /* 阴影 */
    --shadow-1:0 1px 0 rgba(255,255,255,.7) inset,0 1px 2px rgba(60,40,20,.06),0 4px 12px rgba(60,40,20,.05);
    --shadow-2:0 1px 0 rgba(255,255,255,.7) inset,0 2px 4px rgba(60,40,20,.06),0 12px 32px rgba(60,40,20,.08);
    --shadow-3:0 1px 0 rgba(255,255,255,.8) inset,0 8px 16px rgba(60,40,20,.08),0 32px 64px rgba(60,40,20,.10);
    --spine:inset 18px 0 24px -18px rgba(60,40,20,.18);
    /* 纸纹 / 光晕 */
    --grain-blend:multiply; --grain-opacity:.30;
    --glow:radial-gradient(1200px 560px at 50% -10%,rgba(255,170,120,.28),transparent 70%);
    --glass:color-mix(in oklab,var(--paper) 72%,transparent);

    /* 字体 */
    --font-serif-zh:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","Microsoft YaHei",serif;
    --font-serif-en:"Newsreader","Iowan Old Style","Georgia",serif;
    --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Segoe UI",sans-serif;
    --font-mono:ui-monospace,"SF Mono","Menlo","Consolas",monospace;
    --font-display:var(--font-serif-en),var(--font-serif-zh);

    /* 字号 */
    --fs-display:clamp(36px,5vw,72px);   /* 章节大标题；首屏 H1 和 CH.09 收尾单独更大 */
    --fs-h2:clamp(28px,4vw,52px);
    --fs-h3:clamp(19px,1.8vw,24px);
    --fs-num:clamp(64px,13vw,160px);
    --fs-lede:clamp(17px,1.4vw,20px);
    --fs-body:16px;
    --fs-book:clamp(18px,1.6vw,22px);
    --fs-label:12.5px;
    --fs-small:13px;

    /* 8pt 网格 */
    --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
    --r1:10px;--r2:16px;--r3:24px;--r4:32px;--pill:999px;
    --wrap:1200px; --gutter:clamp(16px,4vw,48px); --measure:34em;
    --chapter-pad:clamp(72px,10vh,128px);

    /* 缓动与时长（全站只用这四条曲线） */
    --ease-out:cubic-bezier(.2,.8,.2,1);
    --ease-spring:cubic-bezier(.34,1.4,.5,1);
    --ease-morph:cubic-bezier(.2,.9,.1,1);
    --ease-stage:cubic-bezier(.65,0,.35,1);
    --t-hover:180ms;--t-press:250ms;--t-hl:350ms;--t-img:500ms;--t-morph:550ms;--t-in:600ms;
  }
  @supports (color:oklch(0 0 0)){
    :root{--brand:oklch(68.5% .205 36);--brand-ink:oklch(52% .17 36)}
  }

  /* 深色 · 夜读台灯（系统深色 且 没有手动选浅色） */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --paper:#14110F;--paper-2:#1B1714;--card:#221D19;--rule:#3A322B;
      --ink:#F3EBDF;--ink-2:#CFC4B5;--ink-3:#A69A8C;--ink-4:#6B6258;
      --brand:#FF7452;--brand-ink:#FF9A7E;--brand-soft:#3A221A;--on-brand:#1E1B18;--brand-btn:#FF7452;--brand-btn-hover:#FF8968;
      --hl:rgba(255,116,82,.26);--hl-strong:rgba(255,116,82,.44);--hl-faint:rgba(255,116,82,.12);
      --shadow-1:0 1px 0 rgba(255,255,255,.04) inset,0 2px 6px rgba(0,0,0,.4);
      --shadow-2:0 1px 0 rgba(255,255,255,.05) inset,0 12px 32px rgba(0,0,0,.45);
      --shadow-3:0 1px 0 rgba(255,255,255,.06) inset,0 32px 64px rgba(0,0,0,.55);
      --spine:inset 18px 0 24px -18px rgba(0,0,0,.6);
      --grain-blend:screen;--grain-opacity:.12;
      --glow:radial-gradient(900px 520px at 50% -8%,rgba(255,170,90,.16),transparent 70%);
    }
  }
  /* 深色 · 手动选择（内容与上面相同） */
  :root[data-theme="dark"]{
    --paper:#14110F;--paper-2:#1B1714;--card:#221D19;--rule:#3A322B;
    --ink:#F3EBDF;--ink-2:#CFC4B5;--ink-3:#A69A8C;--ink-4:#6B6258;
    --brand:#FF7452;--brand-ink:#FF9A7E;--brand-soft:#3A221A;--on-brand:#1E1B18;--brand-btn:#FF7452;--brand-btn-hover:#FF8968;
    --hl:rgba(255,116,82,.26);--hl-strong:rgba(255,116,82,.44);--hl-faint:rgba(255,116,82,.12);
    --shadow-1:0 1px 0 rgba(255,255,255,.04) inset,0 2px 6px rgba(0,0,0,.4);
    --shadow-2:0 1px 0 rgba(255,255,255,.05) inset,0 12px 32px rgba(0,0,0,.45);
    --shadow-3:0 1px 0 rgba(255,255,255,.06) inset,0 32px 64px rgba(0,0,0,.55);
    --spine:inset 18px 0 24px -18px rgba(0,0,0,.6);
    --grain-blend:screen;--grain-opacity:.12;
    --glow:radial-gradient(900px 520px at 50% -8%,rgba(255,170,90,.16),transparent 70%);
    color-scheme:dark;
  }
  :root[data-theme="light"]{color-scheme:light}
  /* 英文页：拉丁字母先走系统西文字体（否则 Windows 会用雅黑的全角弯引号） */
  :root:lang(en){--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif}
}

/* ==========================================================================
   base · 排版
   ========================================================================== */
@layer base{
  html{background:var(--paper)}
  body{
    background:var(--glow) no-repeat,var(--paper);
    color:var(--ink);font:var(--fs-body)/1.7 var(--font-sans);
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    font-synthesis:none;text-rendering:optimizeLegibility;
    min-height:100vh;
  }
  /* 纸纹：一张固定的噪点，乘到纸色上 */
  body::before{
    content:"";position:fixed;inset:0;z-index:100;pointer-events:none;
    mix-blend-mode:var(--grain-blend);opacity:var(--grain-opacity);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  ::selection{background:var(--hl-strong);color:inherit}
  :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
  a{text-decoration-color:color-mix(in oklab,currentColor 35%,transparent);text-underline-offset:.2em}

  .wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
  .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:var(--pill);text-decoration:none;font-weight:600;transition:top var(--t-hover) var(--ease-out)}
  .skip:focus{top:12px}

  /* 章节标签 CH.01 · 读 */
  .label{display:inline-flex;align-items:center;gap:10px;font:600 var(--fs-label)/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  .label::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}

  /* 大标题：拉丁走 Newsreader，汉字走宋体 */
  .display{font:700 var(--fs-display)/1.08 var(--font-display);letter-spacing:-.02em;text-wrap:pretty}  /* 不用 balance：首次排版代价翻倍；断行靠 .nb / .line 手动控制 */
  .h2{font:700 var(--fs-h2)/1.12 var(--font-display);letter-spacing:-.015em;text-wrap:pretty}
  .h3{font:650 var(--fs-h3)/1.3 var(--font-sans)}
  :lang(en) .display,:lang(en) .h2{font-weight:560;letter-spacing:-.025em}
  .label + :is(.display,.h2){margin-top:var(--s5)}
  .nb{display:inline-block}
  .lede{font-size:var(--fs-lede);line-height:1.65;color:var(--ink-2);max-width:var(--measure);text-wrap:pretty}
  .small{font-size:var(--fs-small);line-height:1.55;color:var(--ink-3)}
  .num{font:500 var(--fs-num)/1 var(--font-serif-en);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.04em}
  .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
  .serif-en{font-family:var(--font-serif-en)}
}

/* ==========================================================================
   shell · 顶栏、目录抽屉、页脚（版权页）、手机底部下载胶囊
   ========================================================================== */
@layer shell{
  .masthead{
    position:sticky;top:0;z-index:50;height:64px;
    view-transition-name:masthead;
    transition:background-color var(--t-in) var(--ease-out),box-shadow var(--t-in) var(--ease-out);
  }
  .masthead.is-scrolled{
    background:var(--paper);box-shadow:0 1px 0 var(--rule);
  }
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .masthead.is-scrolled{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
  }
  .masthead__in{height:100%;display:flex;align-items:center;gap:var(--s4)}
  .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 19px/1 var(--font-display);letter-spacing:.02em;white-space:nowrap;min-height:44px}
  .brand img{width:30px;height:30px;border-radius:7px;box-shadow:0 0 0 1px color-mix(in oklab,var(--ink) 8%,transparent)}

  /* 章节目录 + 荧光指示条 */
  .toc-inline{position:relative;margin-inline:auto;display:none}
  .toc-inline ol{display:flex;gap:2px;list-style:none;margin:0;padding:0}
  .toc-inline a{position:relative;z-index:1;display:block;padding:8px 10px;font-size:14px;color:var(--ink-2);text-decoration:none;border-radius:8px;transition:color var(--t-hover) var(--ease-out)}
  .toc-inline a[aria-current="true"]{color:var(--ink)}
  @media (hover:hover){.toc-inline a:hover{color:var(--ink)}}
  .toc-inline__bar{position:absolute;left:0;bottom:9px;height:7px;width:100px;border-radius:2px;background:var(--hl-strong);opacity:0;transform-origin:0 50%;transform:translateX(0) scaleX(0);
    transition:transform var(--t-in) var(--ease-out),opacity var(--t-hover) var(--ease-out)}
  @media (min-width:900px){.toc-inline{display:block}.toc-btn{display:none!important}}

  .tools{display:flex;align-items:center;gap:6px;margin-left:auto}
  @media (min-width:900px){.tools{margin-left:0}}
  .seg{display:inline-flex;align-items:center;padding:3px;border-radius:var(--pill);background:color-mix(in oklab,var(--ink) 6%,transparent)}
  .seg a,.seg button{min-width:34px;height:30px;padding:0 9px;display:inline-grid;place-items:center;border-radius:var(--pill);font-size:13px;color:var(--ink-2);text-decoration:none;transition:background-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out)}
  .seg a,.seg button,.icon-btn{position:relative}
  .seg a::after,.seg button::after{content:"";position:absolute;inset:-7px -1px}
  .icon-btn::after{content:"";position:absolute;inset:-2px}
  .seg [aria-current="true"],.seg [aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow-1)}
  .icon-btn{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:var(--pill);color:var(--ink-2);transition:background-color var(--t-hover) var(--ease-out)}
  @media (hover:hover){.icon-btn:hover{background:color-mix(in oklab,var(--ink) 7%,transparent)}}
  .icon-btn svg{width:20px;height:20px}
  .theme-btn [data-icon]{display:none}
  .theme-btn[data-mode="light"] [data-icon="light"],.theme-btn[data-mode="dark"] [data-icon="dark"],.theme-btn[data-mode="system"] [data-icon="system"]{display:block}
  .get-btn{height:36px;padding:0 16px;font-size:14px}
  /* 手机：底部已有下载胶囊 → 顶栏的「下载」藏起来，留出品牌名 */
  @media (max-width:899px){body:has(.dock) .get-btn{display:none!important}}
  @media (max-width:419px){
    .masthead{height:56px}
    .brand{font-size:17px;gap:8px}
    .brand img{width:28px;height:28px}
    .get-btn{padding:0 12px}
    .seg a,.seg button{min-width:32px;padding:0 7px}
    .tools{gap:2px}
  }
  @media (max-width:899px){.masthead{height:56px}}

  /* 目录抽屉（手机）· 一本书的目录页 */
  .toc-drawer{border:0;padding:0;margin:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;background:var(--paper);color:var(--ink)}
  .toc-drawer::backdrop{background:rgba(20,15,10,.3)}
  .toc-drawer__in{min-height:100%;padding:20px var(--gutter) 40px;display:flex;flex-direction:column}
  .toc-drawer__head{display:flex;align-items:center;justify-content:space-between;min-height:44px}
  .toc-drawer ol{list-style:none;padding:0;margin:var(--s6) 0 0;counter-reset:ch}
  .toc-drawer li{border-top:1px solid var(--rule)}
  .toc-drawer li:last-child{border-bottom:1px solid var(--rule)}
  .toc-drawer a{display:flex;align-items:baseline;gap:16px;padding:16px 0;text-decoration:none;font:700 26px/1.2 var(--font-display)}
  .toc-drawer a::before{counter-increment:ch;content:"0" counter(ch);font:500 12px/1 var(--font-mono);color:var(--ink-3);width:24px}
  .toc-drawer a::after{content:"";flex:1;border-bottom:1px dotted var(--ink-4);transform:translateY(-6px)}

  /* 页脚 · 版权页 */
  .colophon{border-top:1px solid var(--rule);padding:var(--s8) 0 calc(var(--s8) + env(safe-area-inset-bottom));color:var(--ink-3);font-size:14px;line-height:1.8}
  .colophon__grid{display:grid;gap:var(--s6)}
  @media (min-width:900px){.colophon__grid{grid-template-columns:1.2fr 1fr;align-items:end}}
  .colophon__title{font:700 20px/1.3 var(--font-display);color:var(--ink);margin-bottom:var(--s2)}
  .colophon nav{display:flex;flex-wrap:wrap;gap:4px 18px}
  .colophon nav a{color:var(--ink-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
  .colophon a[href^="mailto"]{display:inline-block;padding-block:12px;margin-block:-12px}
  @media (hover:hover){.colophon nav a:hover{color:var(--brand-ink);text-decoration:underline}}
  .colophon__rule{height:1px;background:var(--rule);margin:var(--s3) 0}
  .colophon__fine{font-size:12.5px;color:var(--ink-3)}

  /* 手机底部下载胶囊 */
  .dock{
    position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;
    display:none;align-items:center;gap:8px;height:56px;padding:6px;border-radius:var(--pill);
    background:var(--card);box-shadow:var(--shadow-3);border:1px solid var(--rule);
    transform:translateY(160%);visibility:hidden;transition:transform var(--t-in) var(--ease-out),visibility 0s linear var(--t-in);
  }
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .dock{background:color-mix(in oklab,var(--card) 80%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
  }
  .dock.is-shown{transform:none;visibility:visible;transition:transform var(--t-in) var(--ease-out),visibility 0s}
  .dock .btn{flex:1;height:44px;padding:0 12px;font-size:14px}
  @media (max-width:899px){.dock{display:flex}}
}

/* ==========================================================================
   components · 按钮、荧光笔、徽章、iPhone 线框
   ========================================================================== */
@layer components{
  /* 荧光笔（全站唯一强调手法）· 从左往右划过 */
  .hl{
    background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 92%,transparent 92%) no-repeat 0 0/0% 100%;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
    transition:background-size var(--t-hl) var(--ease-out);
  }
  .hl.is-on{background-size:100% 100%}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;
    border-radius:var(--pill);font:600 15px/1 var(--font-sans);text-decoration:none;white-space:nowrap;
    transition:transform var(--t-press) var(--ease-spring),background-color var(--t-hover) var(--ease-out),box-shadow var(--t-hover) var(--ease-out);
    -webkit-tap-highlight-color:transparent;
  }
  .btn:active{transform:scale(.96)}
  .btn--brand{background:var(--brand-btn);color:var(--on-brand);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px -6px color-mix(in oklab,var(--brand) 70%,transparent)}
  @media (hover:hover){.btn--brand:hover{background:var(--brand-btn-hover);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 24px -8px color-mix(in oklab,var(--brand) 80%,transparent)}}
  .btn--ghost{background:color-mix(in oklab,var(--ink) 6%,transparent);color:var(--ink)}
  @media (hover:hover){.btn--ghost:hover{background:color-mix(in oklab,var(--ink) 10%,transparent)}}
  .btn--line{border:1px solid var(--rule);background:var(--card);color:var(--ink);box-shadow:var(--shadow-1)}
  .btn svg{width:18px;height:18px;flex:none}

  /* App Store 徽章：hover 时荧光从左扫过底部 */
  .badge{position:relative;display:inline-block;border-radius:10px;line-height:0;transition:transform var(--t-press) var(--ease-spring)}
  .badge img{height:52px;width:auto}
  .badge::after{content:"";position:absolute;left:6px;right:6px;bottom:-9px;height:5px;border-radius:2px;background:var(--hl-strong);transform:scaleX(0);transform-origin:left;transition:transform var(--t-hl) var(--ease-out)}
  @media (hover:hover){.badge:hover::after{transform:scaleX(1)}}
  .badge:active{transform:scale(.97)}

  .tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--pill);border:1px solid color-mix(in oklab,var(--brand) 60%,transparent);color:var(--brand-ink);font:600 12px/1 var(--font-sans);letter-spacing:.04em;white-space:nowrap;vertical-align:middle}
  .tag--quiet{border-color:var(--rule);color:var(--ink-3)}

  /* CSS 画的 iPhone 线框（不用苹果设备图） */
  .phone{position:relative;width:min(100%,280px);aspect-ratio:640/1387;border-radius:42px;padding:9px;background:var(--ink);box-shadow:var(--shadow-3);flex:none}
  :root[data-theme="dark"] .phone{background:#3b332c}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone{background:#3b332c}}
  .phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:34px;background:#fff}
  .phone::after{content:"";position:absolute;top:18px;left:50%;width:30%;height:22px;border-radius:12px;background:#000;transform:translateX(-50%)}
  .phone figcaption{position:absolute;left:0;right:0;bottom:-30px;text-align:center}

  /* 贴在本子上的插画（jpg 米白底 → 外加白边） */
  .plate{background:var(--card);padding:6px;border-radius:14px;box-shadow:var(--shadow-2)}
  .plate img{border-radius:9px;width:100%;height:auto;aspect-ratio:1}

  .tick{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink)}
  .tick svg{width:13px;height:13px}
}

/* ==========================================================================
   legal · 法律页「阅读模式」+ 404
   ========================================================================== */
@layer legal{
  .legal{display:grid;gap:var(--s7);padding:var(--s8) 0 var(--s9)}
  @media (min-width:1100px){.legal{grid-template-columns:220px minmax(0,68ch);justify-content:start;gap:var(--s8)}}  /* 目录和顶栏 logo 同一条纵线（同一个 1200 容器左边）*/
  .legal-toc{display:none}
  @media (min-width:1100px){
    .legal-toc{display:block;position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow:auto;font-size:13.5px;line-height:1.5}
    .legal-toc p{font:600 var(--fs-label)/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s4)}
    .legal-toc ol{list-style:none;padding:0;margin:0;border-left:1px solid var(--rule)}
    .legal-toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--ink-3);text-decoration:none}
    .legal-toc a.is-current{color:var(--ink);border-left-color:var(--brand)}
    @media (hover:hover){.legal-toc a:hover{color:var(--ink)}}
  }
  .prose{max-width:68ch;min-width:0;color:var(--ink-2);font-size:16px;line-height:1.8;overflow-wrap:anywhere}
  .prose h1{font:700 clamp(34px,5vw,56px)/1.1 var(--font-display);color:var(--ink);letter-spacing:-.02em;margin:0 0 var(--s4)}
  .prose h2{font:700 clamp(22px,2.4vw,28px)/1.3 var(--font-display);color:var(--ink);margin:var(--s8) 0 var(--s4);padding-top:var(--s5);border-top:1px solid var(--rule)}
  .prose h3{font:650 18px/1.4 var(--font-sans);color:var(--ink);margin:var(--s6) 0 var(--s3)}
  .prose p,.prose li{margin:0 0 var(--s3)}
  .prose ul,.prose ol{padding-left:1.4em;margin:0 0 var(--s4)}
  .prose li::marker{color:var(--ink-4)}
  .prose strong{color:var(--ink);font-weight:650}
  .prose a{color:var(--brand-ink);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--brand) 45%,transparent)}
  .prose hr{border:0;border-top:1px solid var(--rule);margin:var(--s7) 0}
  .prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 var(--s5);display:block;overflow-x:auto}
  .prose th,.prose td{border:1px solid var(--rule);padding:8px 10px;text-align:left;vertical-align:top}
  .prose th{background:var(--paper-2);color:var(--ink)}
  .prose code{font-family:var(--font-mono);font-size:.9em;background:var(--paper-2);padding:1px 5px;border-radius:5px}
  .prose blockquote{border-left:3px solid var(--rule);padding-left:var(--s4);color:var(--ink-3)}
  /* 原法律页里用于强调的提示框 → 换成纸色卡片 */
  .prose [class*="bg-"]{background:var(--paper-2)!important;border-color:var(--rule)!important;border-radius:var(--r2);padding:var(--s4) var(--s5)}
  /* 原 i18n-toggle.js 自带的悬浮切换按钮：新外壳里由顶栏接管，视觉上隐藏 */
  #lang-toggle-btn{display:none!important}
  /* 法律页英文模式：正文保持中文，标题下一条说明 */
  .legal-en-note{margin:calc(-1 * var(--s2)) 0 var(--s5);padding:10px 14px;border-left:3px solid var(--brand);border-radius:0 var(--r2) var(--r2) 0;background:var(--paper-2);font-size:14px;line-height:1.55;color:var(--ink-2)}
  .notfound__get{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s3) var(--s4);margin-top:var(--s6)}
  .notfound__get .btn{margin:0}

  .notfound{min-height:calc(100vh - 64px - 220px);display:grid;place-items:center;text-align:center;padding:var(--s8) 0}
  .notfound img{width:240px;height:240px;margin:0 auto var(--s5)}
  .notfound .btn{margin:var(--s5) 6px 0}
}

/* ==========================================================================
   跨页转场（View Transitions）· 顶栏不动，其余淡入
   ========================================================================== */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:320ms;animation-timing-function:cubic-bezier(.2,.8,.2,1)}

@layer motion{
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  }
}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- 法律页顶栏的「首页 / 联系我们」 ---------- */
@layer shell{
  .legal-nav{display:flex;gap:4px;margin-left:var(--s4)}
  .legal-nav a{padding:8px 10px;border-radius:8px;font-size:14px;color:var(--ink-2);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
  @media (hover:hover){.legal-nav a:hover{color:var(--ink);background:color-mix(in oklab,var(--ink) 6%,transparent)}}
  body[data-page="legal"] .tools{margin-left:auto}
  @media (max-width:520px){.legal-nav a:last-child{display:none}}
  @media (max-width:439px){.legal-nav{display:none}}
  .legal-nav a{white-space:nowrap}
  .cta__search strong{color:var(--ink);font-weight:600}
}
/* 深色模式：白底截图稍微压暗，不刺眼 */
@layer components{
  :root[data-theme="dark"] .phone{background:var(--card);box-shadow:0 0 0 1px var(--rule),var(--shadow-3)}
  :root[data-theme="dark"] .phone img{filter:brightness(.94)}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone{background:var(--card);box-shadow:0 0 0 1px var(--rule),var(--shadow-3)}:root:not([data-theme="light"]) .phone img{filter:brightness(.94)}}
}

@layer tokens{
  @media (max-width:899px){:root{--chapter-pad:clamp(56px,12vw,88px)}}
}

/* ==========================================================================
   第 2 轮评审修订（10/31）· 外壳
   ========================================================================== */
@layer shell{
  /* 顶栏：更不透明 + 降饱和，下面的彩色插画不会糊成色斑 */
  .masthead.is-scrolled{background:color-mix(in oklab,var(--paper) 92%,transparent)}
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .masthead.is-scrolled{background:color-mix(in oklab,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.1);backdrop-filter:blur(20px) saturate(1.1)}
  }
  /* 简 / 繁 / EN：点击区至少 40×44 */
  .seg a,.seg button{min-width:40px}
  .seg a::after,.seg button::after{inset:-7px -2px}
  @media (max-width:419px){.seg{gap:0;padding:2px}.seg a,.seg button{min-width:40px;padding:0 6px}}
  /* 页脚：书的尾页 */
  .colophon__brand{display:flex;align-items:center;gap:12px;margin-bottom:var(--s2)}
  .colophon__brand img{width:44px;height:44px;border-radius:11px;box-shadow:0 0 0 1px color-mix(in oklab,var(--ink) 8%,transparent)}
  .colophon__brand .colophon__title{margin:0;font-size:22px}
  .colophon__end{font-style:italic;font-size:17px;color:var(--ink-2);margin-bottom:var(--s4)}
  .colophon nav a{font:600 var(--fs-label)/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase}
}
@layer components{
  .hl{padding-inline:.05em}
}
@layer legal{
  /* 法律页 · 手机目录（默认收起，复用侧栏链接）*/
  .legal-toc-m{margin:var(--s5) 0 var(--s6);border:1px solid var(--rule);border-radius:var(--r2);background:var(--card)}
  .legal-toc-m summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 var(--s4);cursor:pointer;font:600 var(--fs-label)/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  .legal-toc-m summary::-webkit-details-marker{display:none}
  .legal-toc-m summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:translateY(-2px) rotate(45deg);transition:transform var(--t-hover) var(--ease-out)}
  .legal-toc-m[open] summary::after{transform:translateY(2px) rotate(-135deg)}
  .legal-toc-m ol{list-style:none;margin:0;padding:0 var(--s4) var(--s3);border-top:1px solid var(--rule)}
  .legal-toc-m a{display:block;padding:10px 0;color:var(--ink-2);text-decoration:none;border-bottom:1px dotted var(--rule)}
  .legal-toc-m li:last-child a{border-bottom:0}
  @media (min-width:1100px){.legal-toc-m{display:none}}
}

/* ===== 第 5 轮：英文浏览器访问中文首页时的提示条 + 触控区 ===== */
@layer shell{
  .lang-hint{background:var(--surface,var(--paper-2));border-bottom:1px solid var(--rule)}
  .lang-hint[hidden]{display:none}
  .lang-hint__in{display:flex;align-items:center;gap:12px;min-height:44px}
  .lang-hint p{margin:0;font-size:14.5px;color:var(--ink-2)}
  .lang-hint a{color:var(--brand-ink,var(--brand));font-weight:600;text-underline-offset:3px}
  .lang-hint__x{margin-left:auto;width:44px;height:44px;display:inline-grid;place-items:center;border-radius:var(--pill);color:var(--ink-3);background:none;border:0;cursor:pointer}
  .lang-hint__x svg{width:18px;height:18px}
  @media (hover:hover){.lang-hint__x:hover{background:color-mix(in oklab,var(--ink) 7%,transparent)}}
  .seg a::after,.seg button::after{inset:-7px -2px}
}
@layer legal{.legal-nav a{min-height:44px;padding-inline:10px}}
@layer shell{
  /* 页脚链接：一行排开，细点分隔（手机上「English」不再单独掉一行） */
  .colophon nav{gap:0;column-gap:0}
  .colophon nav a + a::before{content:"·";display:inline-block;margin:0 7px;color:var(--ink-4);text-decoration:none}
  .colophon nav a[lang="en"]{text-transform:none;letter-spacing:0}
}

/* 繁体回访者：查表换完字之前先藏住正文（core.js 换完或 800ms 兜底后移除 .hant-pending），避免先闪一下简体 */
.hant-pending main, .hant-pending .colophon, .hant-pending .dock { visibility: hidden; }

/* ── 地区切换（js/region.js 给 <html> 设 data-region = cn | eu | other）· 放文件末尾、不在 @layer 内，优先级最高 ──
   rg-store：只对能下载 App 的地区显示（other）；rg-web：只对 cn / eu 显示；rg-alt：「或直接用网页版」小入口，只对 other 显示 */
.rg-web{display:none!important}
html[data-region="cn"] .rg-web,html[data-region="eu"] .rg-web{display:inline-flex!important}
html[data-region="cn"] .rg-store,html[data-region="eu"] .rg-store{display:none!important}
html[data-region="cn"] .rg-alt,html[data-region="eu"] .rg-alt{display:none!important}
.login-btn{height:36px;min-height:0;padding:0 14px;font-size:14px;box-shadow:none;background:transparent;border:1px solid var(--rule)}
@media (hover:hover){.login-btn:hover{background:color-mix(in oklab,var(--ink) 7%,transparent)}}
@media (max-width:899px){.masthead .login-btn{display:none}}   /* 手机顶栏太挤：登录入口放在目录抽屉和底部胶囊里 */
.get-btn.rg-web{height:36px;padding:0 16px;font-size:14px}
.web-alt{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;padding:10px 4px;min-height:44px}
@media (hover:hover){.web-alt:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}}
.cta .web-cta,.download__btns .web-cta{min-height:52px;padding:0 28px;font-size:17px}
.toc-drawer .toc-login{display:flex;gap:10px;margin-top:var(--s6)}
.toc-drawer .toc-login .btn{flex:1;font:600 15px/1 var(--font-sans);padding:0 16px}
.toc-drawer .toc-login .btn::before,.toc-drawer .toc-login .btn::after{content:none}
.download__fine .rg-web{display:none!important}
html[data-region="cn"] .download__fine .rg-web,html[data-region="eu"] .download__fine .rg-web{display:list-item!important}
html[data-region="cn"] .hero__fine.rg-web,html[data-region="eu"] .hero__fine.rg-web{display:block!important}
@media (max-width:899px){html[data-region="cn"] .dock .rg-web,html[data-region="eu"] .dock .rg-web{display:inline-flex!important}}