/* ==========================================================================
   首页 9 章（index.html / en.html 共用）
   规则：内容按「终态」写；只有 .js-motion（JS 在 + 未开减少动态效果）才套起始态。
   动效只动 transform / translate / opacity / clip-path / background-size。
   组织：@layer home 按章节从上到下排，每个组件的样式（含响应式 / 深色）都写在它自己的段落里；
         @layer motion 只放动效（起始态 + keyframes + 滚动驱动）。motion 层排在 home 后面，同属性 motion 胜出。
   ========================================================================== */
@property --pet-glow{syntax:"<color>";inherits:true;initial-value:#3E9C8F}
:root{interpolate-size:allow-keywords}

@layer home{
  /* ---------- 章节通用 ---------- */
  @media (min-width:900px){:root{--chapter-pad:clamp(64px,8vh,104px)}}
  @media (max-width:760px){:root{--chapter-pad:clamp(48px,10vw,64px)}}
  .ch{padding-block:var(--chapter-pad);position:relative}
  .ch__head{display:grid;gap:0;margin-bottom:var(--s8);max-width:880px}
  .ch__head--center{margin-inline:auto;text-align:center;justify-items:center}
  .ch__head .lede{margin-top:var(--s5)}
  .ch__tagline{margin-top:var(--s5)}
  .ch__tagline + .lede{margin-top:var(--s3)}
  @media (max-width:600px){.ch__head--center .lede,.ch__head--center .ch__tagline{text-align:left;justify-self:stretch}}
  .act__note,.shelf__hint{margin-bottom:0}

  /* 中文大标题：行尾全角标点挤压（「，」「。」只占半格，荧光也不越过句号） */
  :lang(zh-Hans) :is(.display,.h2) .p{margin-right:-.46em}
  /* 带挤压标点的短语整体不断行（否则 inline-block 的宽度按挤压后算，会在短语中间折行）*/
  :is(.display,.h2) .nb:has(.p){white-space:nowrap}
  /* 可点的词和后面的标点不分家（按钮是原子行内元素，否则「hug」后的句号会单独掉到下一行）*/
  .nw{white-space:nowrap}

  /* 手机外框（CH.04 截图 / 家长截图）*/
  .phone{container-type:inline-size}
  /* 一个外框里放浅 / 深两张真实截图，按页面主题（手动切换 + 跟随系统）只显示一张；隐藏的那张 lazy 不会下载 */
  .shot-duo .shot--dark{display:none}
  :root[data-theme="dark"] .shot-duo .shot--light{display:none}
  :root[data-theme="dark"] .shot-duo .shot--dark{display:block}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .shot-duo .shot--light{display:none}:root:not([data-theme="light"]) .shot-duo .shot--dark{display:block}}

  /* 深色：插画像「暗室里的一张照片」—— 保留原图亮度（只压到 .9），外面一圈暖色相纸边 + 内阴影
     （首屏 / 一词四演 / 书架 / 词库 Fig.2 共用）*/
  :root[data-theme="dark"]{--mat-edge:#3a312b}
  :root[data-theme="dark"] :is(.plate img,.plate video,.act__img img,.cell img,.act__img .anim){filter:brightness(.9) contrast(1.02)}
  :root[data-theme="dark"] :is(.plate,.act__img){background:var(--mat);padding:8px;box-shadow:inset 0 0 0 2px var(--mat-edge),inset 0 2px 12px rgba(0,0,0,.45),var(--shadow-2)}
  :root[data-theme="dark"] .act__img img{border-radius:12px}
  :root[data-theme="dark"] .cell img{background:var(--mat);padding:6px;box-shadow:inset 0 0 0 2px var(--mat-edge),0 6px 16px rgba(0,0,0,.4)}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){--mat-edge:#3a312b}
    :root:not([data-theme="light"]) :is(.plate img,.plate video,.act__img img,.cell img,.act__img .anim){filter:brightness(.9) contrast(1.02)}
    :root:not([data-theme="light"]) :is(.plate,.act__img){background:var(--mat);padding:8px;box-shadow:inset 0 0 0 2px var(--mat-edge),inset 0 2px 12px rgba(0,0,0,.45),var(--shadow-2)}
    :root:not([data-theme="light"]) .act__img img{border-radius:12px}
    :root:not([data-theme="light"]) .cell img{background:var(--mat);padding:6px;box-shadow:inset 0 0 0 2px var(--mat-edge),0 6px 16px rgba(0,0,0,.4)}
  }

  /* 首屏之后的大章节先不排版，滚到附近才排（首帧布局从整页 → 首屏两章）· 成长章节较短，不加 */
  #act,#library,#for-you,#listen,#practice,#friends,#parents,#adults,#start{content-visibility:auto;contain-intrinsic-size:auto 1100px}
  /* 手机上这些章节真实高度 2000–3000px：占位估得太小，目录跳转后页面会被撑开、落点偏下（jumpTo 再逐帧校正）*/
  @media (max-width:760px){#act,#library,#for-you,#listen,#practice,#friends,#parents,#adults,#start{contain-intrinsic-size:auto 2400px}}
  /* 点过章节目录之后不再延后排版（core.js jumpTo 加 .cv-off）*/
  .cv-off :is(#act,#library,#for-you,#listen,#practice,#friends,#parents,#adults,#start){content-visibility:visible}

  /* ---------- 右侧细竖条（宽屏）：只亮刻度 + 编号；章名只在悬停 / 键盘聚焦时出现，带不透明底，永远不压内容 ---------- */
  .rail{display:none}
  @media (min-width:1360px){
    .rail{display:block;position:fixed;right:12px;top:50%;translate:0 -50%;z-index:40;transition:opacity var(--t-in) var(--ease-out),visibility 0s linear 0s}
    .rail ol{list-style:none;margin:0;padding:6px 0 6px 4px;display:grid;gap:2px;border-right:1px solid var(--rule);border-radius:12px 0 0 12px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
    .rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:30px;padding:0 10px 0 4px;margin-right:-1px;border-right:2px solid transparent;text-decoration:none;color:var(--ink-4);font-size:12.5px;transition:color var(--t-hover) var(--ease-out),border-color var(--t-hover) var(--ease-out)}
    .rail i{font:500 10.5px/1 var(--font-mono);font-style:normal}
    .rail span{position:absolute;right:calc(100% - 2px);top:50%;translate:0 -50%;white-space:nowrap;clip-path:inset(0 0 0 100%);opacity:0;transition:clip-path var(--t-in) var(--ease-out),opacity var(--t-in) var(--ease-out);
      background:var(--paper);color:var(--ink);padding:3px 8px;border-radius:6px;box-shadow:0 1px 0 var(--rule),0 4px 14px rgba(0,0,0,.08);margin-right:6px}
    .rail a[aria-current="true"]{color:var(--ink);border-right-color:var(--brand)}
    .rail:hover a span,.rail:focus-within a span{clip-path:inset(0);opacity:1}
    @media (hover:hover){.rail a:hover{color:var(--ink)}}
    .rail.is-hidden,.wcard-open .rail{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t-in) var(--ease-out),visibility 0s linear var(--t-in)}
  }
  @media (min-width:1600px){.rail{right:24px}}

  /* ======================= CH.01 首屏 · 书页 ======================= */
  .hero{padding-block:clamp(24px,4vh,56px);z-index:3}
  @media (min-width:900px){.hero{min-height:min(calc(100svh - 64px),860px);display:grid;align-content:center}}
  .hero__grid{display:grid;gap:var(--s8);align-items:center}
  /* 电脑：下载区 DOM 在书页之后（Tab 顺序 = 手机视觉顺序），用区域放回左栏 */
  @media (min-width:900px){
    .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(32px,4.5vw,72px);grid-template-areas:". book" "copy book" "act book" ". book";grid-template-rows:1fr auto auto 1fr;row-gap:0}
    .hero__copy{grid-area:copy}
    .book-wrap{grid-area:book;align-self:center}
    .hero__actions{grid-area:act}
  }
  .hero__copy{display:grid;gap:var(--s5);align-content:center}
  /* 开篇是全页最有力量的字：1440 宽约 75px（章节标题最大 72px）；中文电脑上排成三行「点一个单词，/ 你的宠物 / 演给你看。」 */
  .hero__title{font-size:clamp(40px,5.2vw,78px);line-height:1.04;letter-spacing:-.025em}
  :lang(en) .hero__title{font-size:clamp(40px,4.7vw,70px)}
  .hero__title .line{display:block}
  .hero__title .line-d{display:inline}
  @media (min-width:900px){.hero__title .line-d{display:block}}
  @media (max-width:899px){.hero__title{line-height:1.12}}
  .hero__labels{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .hero__labels + .display{margin-top:var(--s5)}
  .hero__hl{position:relative}
  .hero__lede{max-width:26em}
  .hero__lede-m{display:none}
  .hero__actions{display:grid;gap:var(--s5)}
  @media (min-width:900px){.hero__actions{margin-top:var(--s5)}}
  .cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4)}
  .hero__fine{margin-top:calc(-1 * var(--s2))}
  .copy-btn .nb{white-space:nowrap}
  @media (max-width:419px){
    .hero__title{font-size:33px}
    .copy-btn span{white-space:normal;text-align:left;line-height:1.3;text-wrap:balance}
    .download__btns .copy-btn{height:auto;padding:10px 18px}
    .cta .copy-btn{height:auto;padding:10px 16px}
  }
  /* 平板竖屏（iPad 820 等）：不当放大版手机 */
  @media (min-width:700px) and (max-width:899px){.hero__title{font-size:clamp(52px,7vw,62px)}}

  /* 书 */
  .book-wrap{position:relative;isolation:isolate;container-type:inline-size}
  .book-wrap::before{ /* 书下面的几页纸 */
    content:"";position:absolute;z-index:-1;inset:14px -10px -12px 12px;border-radius:8px 20px 20px 8px;
    background:var(--paper-2);box-shadow:var(--shadow-2);transform:rotate(1.6deg)
  }
  .book{
    position:relative;background:var(--card);border-radius:6px 18px 18px 6px;
    padding:clamp(24px,4cqi,44px) clamp(22px,5cqi,48px) clamp(22px,4cqi,36px) clamp(30px,6.5cqi,60px);
    box-shadow:var(--shadow-3),var(--spine);transform:rotate(-1.2deg);
  }
  @media (max-width:899px){.book{transform:none}.book-wrap::before{transform:rotate(1deg);inset:10px -4px -10px 6px}}
  .book__head{display:flex;justify-content:space-between;gap:16px;font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-bottom:14px;margin-bottom:clamp(14px,3cqi,24px);border-bottom:1px dotted var(--ink-4)}
  .book__text{font:400 var(--fs-book)/1.75 var(--font-serif-en);color:var(--ink);text-wrap:pretty;hyphens:manual}
  .book__text::first-letter{float:left;font-size:3.3em;line-height:.8;font-weight:600;margin:.08em .05em 0 -.04em;color:var(--ink)}

  /* 可点的生词：虚线下划线 + 荧光底 */
  .w{
    font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;padding:0 .06em;margin:0 -.06em;border-radius:3px;
    border-bottom:1.5px dashed color-mix(in oklab,var(--brand) 55%,transparent);
    transition:background-size var(--t-hl) var(--ease-out),border-color var(--t-hover) var(--ease-out);
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
  @media (hover:hover){.w:hover{border-bottom-style:solid;border-color:var(--brand)}}
  .w:focus-visible{border-bottom-style:solid}
  .w.is-seen{background-size:100% 100%}
  .w.is-active{--hl:var(--hl-strong);background-size:100% 100%;border-bottom-style:solid;border-color:var(--brand)}

  /* 书页插图（Fig.1） */
  .book__fig{display:grid;grid-template-columns:minmax(150px,min(54%,320px)) 1fr;gap:clamp(16px,4cqi,28px);align-items:end;margin-top:clamp(16px,3.5cqi,26px);transition:opacity 280ms var(--ease-out)}
  .book__plate{transform:rotate(1.6deg);max-width:320px}
  .book-wrap.is-card .book__fig{opacity:0}
  .book__plate img{transition:opacity var(--t-img) var(--ease-out)}
  .book__fig figcaption{display:grid;gap:4px;align-content:center}
  .book__figno{font-size:11px;color:var(--ink-3);letter-spacing:.1em}
  .book__figword{font:500 clamp(24px,5cqi,34px)/1.1 var(--font-serif-en);color:var(--ink)}
  .book__figzh{font-size:15px;color:var(--ink-2)}
  .book__hint{margin-top:10px;font-size:13px;line-height:1.5;color:var(--ink-3)}
  .book__corner{position:absolute;right:0;bottom:0;width:60px;height:60px;border-radius:0 0 18px 0;display:grid;place-items:end;padding:0 10px 8px 0;font-size:14px;color:var(--ink-3);text-decoration:none;
    background:linear-gradient(135deg,transparent 50%,var(--paper-2) 50%);box-shadow:-2px -2px 6px -4px rgba(60,40,20,.25);transform:scale(.8);transform-origin:100% 100%;transition:transform var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out)}
  @media (hover:hover){.book__corner:hover{transform:none;color:var(--brand-ink)}}

  /* 生词表：有 JS 时只给读屏；没 JS 时是可见的「本页生词」 */
  .glossary{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:var(--s5)}
  .glossary dl{display:grid;gap:10px 32px;margin-top:var(--s4);font-size:14.5px}
  @media (min-width:900px){.glossary dl{grid-template-columns:1fr 1fr}}
  .glossary dt{font:600 18px/1.3 var(--font-serif-en)}
  .glossary dd{color:var(--ink-2)}
  .js .glossary{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* 手机首屏：标题 → 一句话 → 书页（插图在前）→ 徽章；390×844 第一屏也能完整看到 App Store 徽章 */
  @media (max-width:600px){
    .hero{padding-block:6px 24px}
    .hero__grid{gap:0}
    .hero__copy,.hero__actions{display:contents}
    .hero__labels{order:1}
    .hero__title{order:2}
    .hero__labels + .display{margin-top:8px}
    .hero__lede{order:3;margin-top:8px;font-size:15.5px;line-height:1.6}
    .hero__lede-pre,.hero__lede-x{display:none}
    .hero__lede-m{display:inline}
    .book-wrap{order:4;margin-top:14px}
    .cta{order:5;margin-top:16px}
    .hero__fine{order:6;margin-top:10px}
    .glossary{order:7}
    .book{display:flex;flex-direction:column;padding:14px 18px 14px 26px}
    .book__head{order:-2;padding-bottom:10px;margin-bottom:12px}
    .book__fig{order:-1;margin:0 0 10px;grid-template-columns:148px 1fr;gap:14px}
    .book__plate{transform:rotate(-1deg)}
    .book__hint{font-size:12.5px}
  }

  /* 词卡 · 电脑：卡片收在书页里（右边不超出书页），插画是主角；手机：底部抽屉 */
  .wcard{
    position:absolute;inset:auto;z-index:5;top:var(--card-top,40%);right:clamp(-40px,-2.4vw,0px);
    width:min(560px,calc(100cqi + 24px));max-height:none;margin:0;padding:20px;border:1px solid var(--rule);border-radius:var(--r3);
    background:var(--card);color:var(--ink);box-shadow:var(--shadow-3);overflow:visible;
    view-transition-name:wcard;
  }
  @media (min-width:601px){.wcard{right:12px;width:min(560px,calc(100cqi - 24px))}}
  .wcard:focus{outline:none}
  .wcard[open]{display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);grid-template-areas:"art head" "art body" "pets pets";column-gap:20px;align-items:start}
  .wcard.is-entering{animation:cardIn 250ms var(--ease-out) both}
  .wcard__grip{display:none}
  .wcard__close{position:absolute;top:8px;right:8px;width:44px;height:44px;z-index:2}
  .wcard__art{grid-area:art;position:relative;transform:rotate(-1.5deg);align-self:start}
  .wcard__art img{width:100%;height:auto;aspect-ratio:1;border-radius:9px}
  .js-motion .wcard__art [data-wc-img]{animation:artIn 800ms var(--ease-out) both}
  .wcard__art [data-wc-anim]{position:absolute;inset:6px;width:calc(100% - 12px);opacity:0;transition:opacity var(--t-img) var(--ease-out)}
  .wcard__art.is-anim [data-wc-anim]{opacity:1}
  .wcard__head{grid-area:head;padding-right:34px;min-width:0}
  .wcard__word{font:560 40px/1 var(--font-serif-en);letter-spacing:-.02em;margin:2px 0 0}
  .wcard__ipa{margin-top:8px;font-size:13.5px;color:var(--ink-3)}
  .wcard__pos{margin-left:4px}
  .wcard__zh{margin-top:6px;font-size:17px;font-weight:650;line-height:1.45}
  .wcard__zh small{display:block;font-size:14px;font-weight:400;color:var(--ink-3)}
  .wcard__listen{margin-top:10px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--pill);border:1px dashed var(--ink-4);font-size:12.5px;color:var(--ink-3);cursor:not-allowed}
  .wcard__listen svg{width:15px;height:15px}
  .wcard__body{grid-area:body;margin-top:14px;display:grid;gap:4px;min-width:0}
  .wcard__ex{font:400 17px/1.5 var(--font-serif-en);color:var(--ink)}
  .wcard__ex mark{background:var(--hl-strong);color:inherit;border-radius:3px;padding:0 2px}
  .wcard__exzh{font-size:13.5px;color:var(--ink-3)}
  .wcard__tip{margin-top:8px;display:grid;gap:4px;padding:10px 12px;border-radius:var(--r2);background:var(--paper-2);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
  .wcard__tip .label::before{display:none}
  .wcard__pets{grid-area:pets;display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:12px;border-top:1px dotted var(--ink-4)}
  .wcard__pets button,.eggs button{display:grid;justify-items:center;gap:4px;flex:1;min-height:44px;padding:4px 2px;border-radius:var(--r2);font-size:12px;color:var(--ink-3);transition:background-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out)}
  .wcard__pets img{width:40px;height:40px;border-radius:50%;background:var(--paper-2);box-shadow:0 0 0 2px transparent;transition:box-shadow var(--t-hover) var(--ease-out)}
  .wcard__pets [aria-checked="true"]{color:var(--ink)}
  .wcard__petnote{flex-basis:100%;text-align:center;font-size:12px;line-height:1.4;color:var(--ink-3)}
  .wcard__pets [aria-checked="true"] img{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--c)}
  @media (hover:hover){.wcard__pets button:hover,.eggs button:hover{background:color-mix(in oklab,var(--ink) 5%,transparent)}}
  /* 电脑矮屏（≤960 高）：紧凑版，卡高 ≤ 400，底部换宠物条整条可见 */
  @media (min-width:900px) and (max-height:960px){
    .wcard[open]{grid-template-columns:minmax(0,180px) minmax(0,1fr);grid-template-areas:"art head" "art body" "art pets";padding:16px 18px;column-gap:18px}
    .wcard__word{font-size:34px}
    .wcard__ipa{margin-top:6px}
    .wcard__zh{margin-top:4px;font-size:16px}
    .wcard__listen{margin-top:8px;height:28px}
    .wcard__body{margin-top:10px}
    .wcard__ex{font-size:16px}
    .wcard__tip{display:block;margin-top:6px;padding:6px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .wcard__tip .label{margin-right:8px}
    .wcard__pets{margin-top:10px;padding-top:8px;align-self:end}
    .wcard__pets button{min-height:44px;gap:2px;font-size:11.5px}
    .wcard__pets img{width:32px;height:32px}
  }

  /* 手机：底部抽屉（showModal）· 插画 → 换宠物 → 词 → 例句（不用滑就能换宠物）*/
  .wcard:modal{
    position:fixed;inset:auto 0 0 0;top:auto;right:0;width:100%;max-width:100%;max-height:78dvh;overflow:auto;overscroll-behavior:contain;overscroll-behavior-y:none;
    border-radius:var(--r3) var(--r3) 0 0;border-bottom:0;padding:24px 18px calc(18px + env(safe-area-inset-bottom));
    grid-template-columns:minmax(0,1fr);grid-template-areas:"art" "pets" "head" "body";
  }
  .wcard:modal.is-entering{animation:sheetIn 320ms var(--ease-out) both}
  .wcard:modal .wcard__grip{display:block;position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--ink-4);touch-action:none}
  .wcard:modal .wcard__close{top:12px;right:12px}
  .wcard:modal .wcard__art{width:min(56vw,220px);justify-self:center;transform:none;margin-bottom:10px;touch-action:none}
  .wcard:modal .wcard__word{font-size:34px}
  .wcard:modal .wcard__head{padding-right:0}
  .wcard:modal .wcard__pets{margin:0 0 12px;padding:0 0 12px;border-top:0;border-bottom:1px dotted var(--ink-4)}
  .wcard:modal .wcard__pets img{width:34px;height:34px}
  .wcard::backdrop{background:rgba(20,14,10,.32)}
  @media (min-width:700px) and (max-width:899px){
    .wcard:modal{max-width:600px;margin-inline:auto;border-radius:var(--r3) var(--r3) 0 0}
    .wcard:modal .wcard__art{width:min(44vw,300px)}
  }

  /* ======================= CH.02 一词四演 ======================= */
  .act__tabs{display:flex;gap:4px;margin-bottom:var(--s6);overflow-x:auto;scrollbar-width:none;padding:2px;margin-inline:-2px;scroll-snap-type:x proximity}
  .act__tabs::-webkit-scrollbar{display:none}
  .act__tabs [role="tab"]{position:relative;flex:none;min-height:44px;padding:6px 14px 10px;font:500 21px/1.2 var(--font-serif-en);color:var(--ink-3);border-radius:10px 10px 0 0;scroll-snap-align:start;transition:color var(--t-hover) var(--ease-out)}
  .act__tabs [role="tab"]::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:9px;border-radius:2px;background:var(--hl-strong);transform:scaleX(0);transform-origin:left;transition:transform var(--t-hl) var(--ease-out)}
  .act__tabs [aria-selected="true"]{color:var(--ink)}
  .act__tabs [aria-selected="true"]::after{transform:none}
  @media (hover:hover){.act__tabs [role="tab"]:hover{color:var(--ink)}}
  @media (max-width:899px){.act__tabs{-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent);padding-right:48px}}
  .act__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,2vw,24px);perspective:1200px}
  @media (min-width:900px){.act__grid{grid-template-columns:repeat(4,1fr)}}
  .act__card{
    background:var(--card);border-radius:var(--r3);overflow:hidden;box-shadow:var(--shadow-2),inset 0 2px 0 var(--c);
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 400ms var(--ease-out);transform-style:preserve-3d;
  }
  .act__card.is-playing{box-shadow:var(--shadow-3),inset 0 3px 0 var(--c)}
  /* 四张演出图是按钮（键盘也能点开词卡）*/
  .act__img{position:relative;display:block;width:calc(100% - 12px);aspect-ratio:1;margin:6px 6px 0;border-radius:18px;overflow:hidden;background:var(--paper-2);cursor:pointer}
  .act__img:focus-visible{outline-offset:3px}
  .act__img img{width:100%;height:100%;object-fit:cover}
  .act__img .anim{position:absolute;inset:0;opacity:0;transition:opacity var(--t-img) var(--ease-out)}
  .act__img .anim.is-on{opacity:1}
  .act__card figcaption{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px 14px;font-weight:600;font-size:15px}
  .act__card figcaption .mono{font-size:13px;color:var(--ink-3);font-weight:400}
  .act__note{margin-top:var(--s5)}
  .on-touch{display:none}
  @media (hover:none){.on-touch{display:inline}.on-hover{display:none}}

  /* ======================= CH.03 宠物书架 ======================= */
  /* 版头：电脑上标题 8 栏不折行；右栏 Fig.2 插画压住画面 */
  .library__head{display:grid;gap:var(--s5);margin-bottom:var(--s6)}
  .library__aside{display:grid;gap:var(--s4)}
  @media (min-width:900px){
    .library__head{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:end;gap:var(--s8);margin-bottom:var(--s6)}
    .library__head > :first-child{order:0;text-align:left;justify-items:start;display:block}
    .library__aside{order:0;padding-bottom:.4em;gap:var(--s4)}
  }
  .library__title,.library__title > span{display:block;text-wrap:wrap}
  @media (min-width:900px){.library__pre,.library__num{white-space:nowrap}.library__post:not(:lang(en)){white-space:nowrap}}
  .library__num{line-height:.92;margin:.06em 0 .1em}
  .num-inline{font-family:var(--font-serif-en);font-variant-numeric:tabular-nums lining-nums;font-weight:500;letter-spacing:-.03em;color:var(--ink);white-space:nowrap;padding-inline:.06em;--hl:var(--hl-strong);transition-duration:700ms}
  .library__num .num-inline{font-size:var(--fs-num);letter-spacing:-.04em}
  .library__fig{display:none}
  @media (min-width:900px){
    .library__fig{display:grid;gap:10px;justify-items:start;margin:0 0 var(--s3)}
    .library__fig .plate{width:min(100%,260px);transform:rotate(2deg)}
    .library__fig figcaption{font-size:13px;color:var(--ink-3);display:flex;gap:8px;align-items:baseline}
    .library__fig .serif-en{font-size:20px;color:var(--ink)}
  }

  .shelf{position:relative;display:grid;gap:clamp(12px,1.6vw,20px);--cell:160px}
  @media (max-width:639px){.shelf{--cell:120px}}
  .shelf__row{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px var(--gutter) 10px;scroll-padding-inline:var(--gutter)}
  .shelf__row::-webkit-scrollbar{display:none}
  .shelf__track{display:flex;gap:clamp(10px,1.2vw,16px);width:max-content;margin:0;padding:0;list-style:none}
  .cell{display:grid;gap:8px;justify-items:center;width:var(--cell);scroll-snap-align:start;content-visibility:auto;contain-intrinsic-size:var(--cell) calc(var(--cell) + 30px)}
  .cell img{width:var(--cell);height:var(--cell);border-radius:18px;background:var(--card);padding:6px;box-shadow:var(--shadow-1);transition:filter var(--t-img) var(--ease-out),opacity var(--t-img) var(--ease-out),transform var(--t-press) var(--ease-spring)}
  .cell span{position:relative;font:500 16px/1.2 var(--font-serif-en);color:var(--ink-2);padding:0 4px;
    background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 92%,transparent 92%) no-repeat 0 0/0% 100%;transition:background-size var(--t-hl) var(--ease-out)}
  /* 动起来的书架（shelf.js 加 .is-loop）*/
  .shelf.is-loop .shelf__row{overflow:hidden;scroll-snap-type:none;touch-action:pan-y;cursor:grab;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .shelf.is-loop .shelf__row.is-drag{cursor:grabbing}
  .shelf.is-loop .shelf__track{will-change:transform;animation:marquee var(--dur,60s) linear infinite}
  .shelf.is-loop .shelf__row[data-reverse] .shelf__track{animation-direction:reverse}
  .shelf.is-loop .shelf__track.is-js{animation:none}
  .shelf.is-paused .shelf__track,.shelf.is-loop .shelf__row:focus-within .shelf__track{animation-play-state:paused}
  @media (hover:hover){.shelf.is-loop .shelf__row:hover .shelf__track{animation-play-state:paused}.cell:hover img{transform:scale(1.04)}.cell:hover span{background-size:100% 100%}}
  /* 插画默认全彩；点过的词 = 荧光 + 小勾（「读过」的记号） */
  .cell.is-read span,.cell:focus-visible span{background-size:100% 100%;color:var(--ink)}
  .cell.is-read span::after{content:"✓";position:absolute;right:-14px;top:-2px;font:700 12px/1 var(--font-sans);color:var(--brand-ink)}
  .shelf__hint{margin-top:var(--s3)}
  /* 暂停 / 播放（触屏没有悬停，需要一个看得见的开关）*/
  .shelf__toggle{position:absolute;z-index:3;top:-56px;right:max(var(--gutter),calc(50% - 600px));width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
    color:var(--ink-2);background:var(--card);box-shadow:0 0 0 1px var(--rule),var(--shadow-1);transition:background-color var(--t-hover) var(--ease-out)}
  .shelf__toggle svg{width:18px;height:18px}
  .shelf__toggle .i-play,.shelf__toggle[aria-pressed="true"] .i-pause{display:none}
  .shelf__toggle[aria-pressed="true"] .i-play{display:block}
  @media (hover:hover){.shelf__toggle:hover{background:var(--paper-2)}}
  @media (prefers-reduced-motion:reduce){.shelf__toggle{display:none}}

  /* ======================= CH.04 为你写 ======================= */
  .foryou__grid{display:grid;gap:var(--s8)}
  @media (min-width:900px){.foryou__grid{grid-template-columns:minmax(0,1fr) 270px;gap:clamp(40px,5vw,72px);align-items:start}}
  @media (max-width:760px){.foryou__grid{gap:var(--s6)}}
  .foryou__main{display:grid;gap:var(--s7);min-width:0}
  .foryou__cap{color:var(--ink-3);margin-top:calc(var(--s5) * -1)}
  /* 手机样机：电脑上贴右、不越出 1200 内容栏（旋转后也收在栏内）*/
  .foryou__phone{justify-self:center;width:min(78vw,300px)}
  @media (max-width:899px){.foryou__phone{width:min(62vw,240px);aspect-ratio:auto;height:min(420px,calc(min(62vw,240px) * 1.66));overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}.foryou__phone img{height:auto}}
  @media (min-width:900px){.foryou__phone{position:sticky;top:120px;width:100%;max-width:270px;justify-self:end;transform-origin:50% 50%;transform:rotate(1.5deg) translateX(-6px)}}
  /* 只有一张浅色截图时（/en）深色模式下压暗；有深色截图的（.shot-duo）直接换图 */
  :root[data-theme="dark"] .foryou__phone:not(.shot-duo) img{filter:brightness(.8)}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .foryou__phone:not(.shot-duo) img{filter:brightness(.8)}}
  .foryou__more{list-style:none;margin:0;padding:0 0 0 var(--s4);display:grid;gap:12px;border-left:3px solid var(--rule)}
  .foryou__more li{display:grid;gap:2px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
  .foryou__more strong{font-size:16.5px;color:var(--ink)}
  .genres{display:grid;gap:var(--s4);min-width:0}
  .genres__count{display:flex;align-items:baseline;gap:12px}
  .genres__count .num{font-size:clamp(64px,9vw,120px)}
  .genres__unit{font:700 22px/1 var(--font-display)}
  .spines{display:flex;align-items:flex-end;gap:4px;list-style:none;margin:0;padding:0 2px 0;overflow-x:auto;scrollbar-width:thin;
    border-bottom:10px solid color-mix(in oklab,var(--ink) 14%,var(--paper-2));border-radius:0 0 4px 4px;padding-top:8px;
    box-shadow:0 14px 18px -14px rgba(60,40,20,.35)}
  .spines li{
    flex:none;height:var(--h);width:var(--w);display:flex;align-items:center;justify-content:center;padding:18px 0;
    writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.18em;font:600 15px/1 var(--font-serif-zh);color:var(--ink);
    border-radius:4px 4px 2px 2px;background-color:var(--paper-2);
    background-image:linear-gradient(transparent 12px,rgba(60,40,20,.10) 12px 14px,transparent 14px calc(100% - 14px),rgba(60,40,20,.10) calc(100% - 14px) calc(100% - 12px),transparent calc(100% - 12px));
    box-shadow:inset -4px 0 0 rgba(60,40,20,.06),inset 1px 0 0 rgba(255,255,255,.4);
  }
  :lang(en) .spines li{text-orientation:mixed;letter-spacing:.04em;font:600 14px/1 var(--font-serif-en);white-space:nowrap}
  @media (min-width:900px){.spines{gap:3px}.spines li{width:calc(var(--w) * .8);height:calc(var(--h) * .9)}}
  @media (max-width:639px){.spines li{height:calc(var(--h) * .8);width:calc(var(--w) * .88);font-size:13.5px}}
  .sp-a{background-color:var(--paper-2)!important}
  .sp-b{background-color:var(--brand-soft)!important}
  .sp-c{background-color:color-mix(in oklab,var(--pet-dragon) 20%,var(--paper))!important}
  .sp-d{background-color:color-mix(in oklab,var(--pet-fox) 20%,var(--paper))!important}
  .sp-e{background-color:color-mix(in oklab,var(--pet-monster) 20%,var(--paper))!important}
  .sp-f{background-color:color-mix(in oklab,var(--pet-phoenix) 22%,var(--paper))!important}
  .sp-g{background-color:color-mix(in oklab,var(--ink) 9%,var(--paper))!important}
  .ruler{display:grid;gap:10px;max-width:560px}
  .ruler__scale{position:relative;container-type:inline-size;display:grid;grid-template-columns:repeat(6,1fr);font:500 13px/1 var(--font-mono);color:var(--ink-3);padding-top:26px;border-top:2px solid var(--ink-4)}
  .ruler__scale span{position:relative;text-align:left}
  .ruler__scale span::before{content:"";position:absolute;left:0;top:-26px;width:2px;height:12px;background:var(--ink-4)}
  .ruler__scale span:nth-child(4){color:var(--ink);font-weight:700}
  .ruler__dot{position:absolute;top:-9px;left:0;translate:calc(100cqi / 6 * 3) 0;width:16px;height:16px;margin-left:-7px;border-radius:50%;background:var(--card);border:4px solid var(--brand);box-shadow:var(--shadow-1)}

  /* ======================= CH.05 听 ======================= */
  /* 底色是一层 ::before，上下边缘渐隐进纸面，不是硬切的色块 */
  .listen{isolation:isolate}
  .listen::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--paper-2);
    -webkit-mask-image:linear-gradient(transparent,#000 120px,#000 calc(100% - 120px),transparent);mask-image:linear-gradient(transparent,#000 120px,#000 calc(100% - 120px),transparent)}
  :root[data-theme="dark"] .listen::before{background:radial-gradient(900px 420px at 50% 120px,rgba(255,170,90,.12),transparent 70%),var(--paper-2)}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .listen::before{background:radial-gradient(900px 420px at 50% 120px,rgba(255,170,90,.12),transparent 70%),var(--paper-2)}}
  .page{position:relative;width:min(780px,100%);margin-inline:auto;background:var(--card);border-radius:6px 18px 18px 6px;padding:clamp(24px,5vw,52px) clamp(22px,5vw,56px) clamp(22px,4vw,36px) clamp(30px,6vw,64px);box-shadow:var(--shadow-3),var(--spine)}
  .page__text{font:400 clamp(20px,2.1vw,27px)/1.75 var(--font-serif-en);color:var(--ink);text-wrap:pretty}
  /* 逐词高亮 = APP 听全文的样子（components/reading/ArticleBody.tsx · 颜色取 tailwind.config.js）：
     正在读的句子整句一道底色（浅 sun-200 #FFE58A / 深 sun-800 #63400A），正在读的词加粗 + 下划线；
     读过的词不留痕迹，切换瞬时无过渡。长按选中的句子 = 浅 sky-100 #DBEEFE / 深 sky-900 #061C36 */
  .listen{--speak-bg:#FFE58A;--pick-bg:#DBEEFE}
  :root[data-theme="dark"] .listen{--speak-bg:#63400A;--pick-bg:#061C36}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .listen{--speak-bg:#63400A;--pick-bg:#061C36}}
  .sent{cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline-offset:3px;padding-block:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .sent.is-explained{background:var(--pick-bg)}
  .sent.is-speaking{background:var(--speak-bg)}
  .lw.is-cur{font-weight:600;text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.14em}
  .explain{position:absolute;z-index:3;left:var(--x,24px);top:var(--y,50%);width:min(360px,calc(100% - 32px));padding:14px 16px;border-radius:var(--r2);background:var(--ink);color:var(--paper);box-shadow:var(--shadow-3);font-size:14.5px;line-height:1.6;animation:cardIn 220ms var(--ease-out) both}
  .explain::before{content:"";position:absolute;top:-6px;left:var(--ax,28px);width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:2px}
  .explain__gram{margin-top:8px;display:grid;gap:4px;color:color-mix(in oklab,var(--paper) 78%,transparent)}
  .explain__gram .label{color:inherit;opacity:.8}
  .explain__gram .label::before{display:none}
  /* 播放条：声音点 / 循环跟读是「标注」，不是按钮 */
  .player{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px 18px;margin-top:clamp(20px,4vw,32px);padding-top:18px;border-top:1px dotted var(--ink-4)}
  .player__play{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);transition:transform var(--t-press) var(--ease-spring)}
  .player__play:active{transform:scale(.94)}
  .player__play svg{width:20px;height:20px;margin-left:3px}
  .player__play .i-pause{display:none}
  .player__play[aria-pressed="true"] .i-play{display:none}
  .player__play[aria-pressed="true"] .i-pause{display:block;margin-left:0}
  /* 底部条第二排：当前句译文（APP 中文界面显示译文、英文界面显示原句）*/
  .player__zh{grid-column:1/-1;display:flex;gap:10px;align-items:baseline;min-height:3.2em;margin:0;font-size:16px;line-height:1.6;color:var(--ink)}
  :lang(en) .player__zh,.player__zh :lang(en){font-family:var(--font-serif-en)}
  .player__zhlab{flex:none;font:500 11px/1 var(--font-sans);letter-spacing:.08em;color:var(--ink-3);padding:3px 7px;border-radius:var(--pill);border:1px solid var(--rule);transform:translateY(-2px)}
  .player__track{height:4px;border-radius:2px;background:var(--rule);overflow:hidden}
  .player__track i{display:block;height:100%;width:100%;background:var(--brand);transform-origin:left;transform:scaleX(var(--p,0))}
  .player__voices{display:flex;gap:7px;align-items:center}
  .player__vlabel{margin-right:4px;font:500 12px/1 var(--font-sans);color:var(--ink-3);white-space:nowrap}
  .player__voices span{width:8px;height:8px;border-radius:50%;background:var(--ink-4);opacity:.6}
  .player__voices span.is-on{background:var(--ink);opacity:1}
  .player__chips{grid-column:1/-1;display:flex;gap:8px}
  .chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--pill);border:1px solid var(--rule);font-size:13px;color:var(--ink-3)}
  .chip.is-on{border-color:var(--ink-2);color:var(--ink)}
  .player__chips .chip{height:auto;padding:0;border:0;font-size:12.5px;color:var(--ink-3)}
  .player__chips .chip + .chip::before{content:"·";margin:0 8px;color:var(--ink-4)}
  .player__chips .chip.is-on{color:var(--ink-2)}
  @media (min-width:640px){.player{grid-template-columns:auto 1fr auto auto}.player__chips{grid-column:auto}}
  .listen__hint{text-align:center;margin-top:var(--s5)}

  /* ======================= CH.06 练 · Bento ======================= */
  .bento{display:grid;gap:clamp(12px,1.4vw,18px);grid-template-columns:repeat(2,minmax(0,1fr))}
  @media (min-width:900px){.bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(200px,auto)}}
  @media (max-width:520px){.bento > .tile:nth-child(3),.bento > .tile--cloze{grid-column:1/-1}}
  .tile{position:relative;container-type:inline-size;overflow:hidden;display:grid;align-content:start;gap:12px;padding:clamp(18px,2vw,26px);background:var(--card);border-radius:var(--r3);box-shadow:var(--shadow-1);border:1px solid color-mix(in oklab,var(--rule) 60%,transparent);min-width:0}
  .tile header{display:grid;gap:4px}
  .tile--speak,.tile--fsrs,.tile--dict,.tile--eight{grid-column:span 2}
  .tile__cap{margin-top:2px}
  .ico{width:20px;height:20px;display:inline-block;vertical-align:-3px;margin-right:6px}

  /* 朗读四环：同一暖色系的明度阶梯（外深内浅）· 深色模式反过来外亮内深，四环都看得清 */
  :root{--ring-1:#8A3A22;--ring-2:#C4553A;--ring-3:#FF5E3A;--ring-4:#FFB199;--mat:var(--card)}
  :root[data-theme="dark"]{--ring-1:#FFD2BF;--ring-2:#FF9A7E;--ring-3:#FF7452;--ring-4:#C4553A;--mat:#2a2420}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ring-1:#FFD2BF;--ring-2:#FF9A7E;--ring-3:#FF7452;--ring-4:#C4553A;--mat:#2a2420}}
  .tile--speak{align-content:center}
  @media (min-width:900px){.tile--speak{grid-row:span 2;grid-template-rows:auto 1fr auto}.tile--speak > .small:last-child{margin-top:auto}}
  /* 环 + 图例：窄卡（手机 ≤420）上环下图例；宽卡两栏、环放大、在卡内垂直居中 */
  .rings{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,270px) 1fr;gap:28px;align-items:center;align-self:center}
  .rings__svg{width:100%;max-width:270px;aspect-ratio:1;overflow:visible}
  .rings__total{position:absolute;left:min(135px,50%);top:50%;translate:-50% -50%;display:grid;justify-items:center;line-height:1;pointer-events:none;z-index:2}
  .rings__total span{font-size:44px;font-weight:500;letter-spacing:-.03em;color:var(--ink)}
  .rings__total small{margin-top:4px;font-size:11px;letter-spacing:.08em;color:var(--ink-3)}
  @container (max-width:420px){.rings{grid-template-columns:1fr;justify-items:center}.rings__svg{max-width:220px}.rings__legend{width:100%}.rings__total{left:50%;top:110px}}
  @container (min-width:421px){.rings{grid-template-columns:minmax(0,340px) 1fr;margin-block:auto}.rings__svg{max-width:340px}.rings__total{left:min(170px,50%)}.rings__total span{font-size:56px}}
  @container (min-width:560px){.rings{grid-template-columns:minmax(0,376px) 1fr}.rings__svg{max-width:376px}.rings__total{left:min(188px,50%)}.rings__total span{font-size:62px}}
  .rings__bg{stroke:color-mix(in oklab,var(--ink) 7%,transparent)}
  .ring{stroke:var(--c);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--v))}
  .rings__legend{position:relative;z-index:2;display:grid;gap:10px;background:var(--card);border-radius:12px}
  .rings__legend div{display:flex;align-items:center;gap:10px;font-size:15px}
  .rings__legend div::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
  .rings__legend dd{margin-left:auto;font-size:22px;font-weight:600}

  /* 翻卡 + 遗忘曲线（手机上翻卡占满整行）*/
  .fsrs{display:grid;grid-template-columns:minmax(0,200px) 1fr;gap:24px;align-items:center}
  .flip{position:relative;aspect-ratio:1;perspective:900px;min-height:190px}
  @container (max-width:420px){.fsrs{grid-template-columns:1fr}.flip{height:200px;width:100%;max-width:none}}   /* 宽高比 1 + 最小高 190 照旧 */
  .flip__face{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:5px;padding:30px 14px 16px;text-align:center;border-radius:16px;border:1px solid var(--rule);background:var(--card);box-shadow:var(--shadow-2);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform var(--t-morph) var(--ease-morph)}
  .flip__back{transform:rotateY(180deg);background:var(--paper-2)}
  .fc__tag{position:absolute;top:10px;left:12px;font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
  .fc__word{font:560 32px/1.1 var(--font-serif-en);letter-spacing:-.02em}
  .fc__ipa{font-size:12.5px;color:var(--ink-3)}
  .fc__hint{margin-top:6px;font-size:12.5px;color:var(--ink-3);border-top:1px dotted var(--ink-4);padding-top:6px}
  .fc__zh{font-size:15px;font-weight:650;line-height:1.4}
  .fc__ex{font:400 14.5px/1.45 var(--font-serif-en);color:var(--ink)}
  .fc__ex mark{background:var(--hl-strong);color:inherit;border-radius:3px;padding:0 2px}
  .fc__exzh{font-size:12.5px;color:var(--ink-3)}
  .curve{width:100%;overflow:visible}
  .curve__axis{fill:none;stroke:var(--ink-4);stroke-width:1.2}
  .curve__line{fill:none;stroke:var(--ink-2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
  .curve__pt{fill:var(--card);stroke:var(--brand);stroke-width:2.5}
  .curve__lab{font:500 10px/1 var(--font-sans);fill:var(--ink-3);letter-spacing:.02em}
  .curve__lab--rev{fill:var(--brand-ink)}

  /* 小格：题目 + 演示 */
  .tile--mini,.tile--dict{grid-template-rows:auto 1fr;align-content:stretch}
  .tile--mini > :not(header),.tile--dict > :not(header){align-self:center}
  .q{font:500 17px/1.4 var(--font-serif-en)}
  .opts{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14.5px;color:var(--ink-2)}
  .opts li{padding:6px 10px;border-radius:10px;background:var(--paper-2)}
  .opts--grid{grid-template-columns:1fr 1fr}
  .opts--grid li{white-space:nowrap;padding-inline:8px;text-align:center}   /* 「巨大的」不断成两行 */
  @container (max-width:200px){.opts--grid{grid-template-columns:1fr}}
  .demo-hl{background-size:100% 100%;color:var(--ink)}
  .gram{margin-top:12px;font:400 19px/2.2 var(--font-serif-en)}
  .gram__fix{position:relative;display:inline-block}
  .gram__fix s{text-decoration:none;position:relative;color:var(--ink-3)}
  .gram__fix s::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:var(--ink-2);transform-origin:left}
  .gram__fix .hl{position:absolute;left:50%;bottom:72%;transform:translateX(-50%);font-size:.9em;white-space:nowrap}
  .spell{display:flex;gap:clamp(3px,1.5cqi,6px);font-size:clamp(17px,7cqi,22px);min-width:0}
  .spell span{flex:1 1 0;max-width:30px;min-width:0;height:40px;display:grid;place-items:center;border-bottom:2px solid var(--ink-4)}
  .spell .drop{color:var(--brand-ink);font-weight:700}
  .match{width:100%;overflow:visible;font:500 17px var(--font-serif-en);fill:var(--ink)}
  .match__line{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.8}
  .cloze{font:400 18px/1.7 var(--font-serif-en)}
  .cloze__gap{display:inline-block;min-width:3.2em;border-bottom:2px solid var(--ink-4);text-align:center}
  .cloze__fill{display:inline-block;background:var(--hl-strong);border-radius:3px;padding:0 4px}
  .wave{width:150px;height:auto;fill:var(--ink-4)}
  .type{font-size:20px;border-bottom:1.5px solid var(--ink-4);padding-bottom:6px;margin-top:6px}
  .type__caret{display:inline-block;width:2px;height:1em;background:var(--ink-2);vertical-align:-2px;margin-left:2px;opacity:0}
  .tile--eight{display:grid;align-content:center;gap:12px;background:var(--paper-2);box-shadow:none}
  .mods{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
  .mods li{padding:6px 12px;border-radius:var(--pill);background:var(--card);border:1px solid var(--rule);font-size:14px;color:var(--ink-2)}

  /* ======================= CH.07 巧思 ======================= */
  /* 上：手势演示 —— 书页 + 两张 APP 底部弹层（查词卡 / 整句讲解），样子照 components/reading/WordCard.tsx、SentenceExplainSheet.tsx，
     颜色取 tailwind.config.js（深色同 APP 的 dark: 值）。品牌橙只给荧光笔，弹层里的按钮用浅橙底，不和「下载」抢。
     下：两组编号小纸条（编辑式清单，不再做卡片 —— 前后两章都是卡片，这里换个节奏）。 */
  .tips{--pick-bg:#DBEEFE;--sense-a:#FFF3C7;--sense-b:#F3E8FF;--k-phrase-bg:#D1F4E3;--k-phrase:#0F6442;--k-idiom-bg:#FFF3C7;--k-idiom:#935906;--k-gram-bg:#DBEEFE;--k-gram:#0F4380;--done:#158255}
  :root[data-theme="dark"] .tips{--pick-bg:#061C36;--sense-a:#3F2A0A;--sense-b:#581C87;--k-phrase-bg:#072F1F;--k-phrase:#6BD8A8;--k-idiom-bg:#3F2A0A;--k-idiom:#FFD04F;--k-gram-bg:#061C36;--k-gram:#7BBFFA;--done:#6BD8A8}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tips{--pick-bg:#061C36;--sense-a:#3F2A0A;--sense-b:#581C87;--k-phrase-bg:#072F1F;--k-phrase:#6BD8A8;--k-idiom-bg:#3F2A0A;--k-idiom:#FFD04F;--k-gram-bg:#061C36;--k-gram:#7BBFFA;--done:#6BD8A8}}

  /* 布局：≥1100 三栏（书页 | 查词卡 | 整句讲解）· 700–1099 书页在上、两张卡并排 · <700 全部竖排 */
  .tdemo{display:grid;gap:clamp(16px,2.4vw,28px);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);align-items:start}
  .tdemo__sheets{display:contents}
  @media (max-width:1099px){.tdemo{grid-template-columns:repeat(2,minmax(0,1fr))}.tdemo__page{grid-column:1/-1}}
  @media (max-width:699px){.tdemo{grid-template-columns:minmax(0,1fr)}}
  .tdemo__page{width:100%;margin:0;padding:clamp(22px,3vw,34px) clamp(20px,3vw,32px) clamp(18px,2.4vw,26px) clamp(26px,3.6vw,40px)}
  .tdemo__text{margin:0;font:400 clamp(21px,2vw,26px)/1.9 var(--font-serif-en);color:var(--ink);text-wrap:pretty;
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .tsent{border-radius:4px;padding-block:.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone;cursor:default}
  .tsent.is-picked{background-color:var(--pick-bg)}
  .tsent.is-pressing{background-color:color-mix(in oklab,var(--pick-bg) 70%,transparent)}
  /* 按钮是 inline-block：行高收到 1.3，荧光和底色才贴着字；下划线用 text-decoration（border 会掉到行距底部）*/
  .tw{font:inherit;color:inherit;letter-spacing:inherit;line-height:1.3;padding:0 .06em;margin:0 -.06em;border-radius:3px;cursor:pointer;
    text-decoration:underline dashed color-mix(in oklab,var(--brand) 55%,transparent);text-decoration-thickness:1.5px;text-underline-offset:.22em;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .tw.hl{background-color:transparent}
  .tw.is-mine{background-color:var(--sense-a)}
  .tw.is-on{--hl:var(--hl-strong);text-decoration-style:solid;text-decoration-color:var(--brand)}
  @media (hover:hover){.tw:hover{text-decoration-style:solid;text-decoration-color:var(--brand)}}
  .tw:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px}
  .tdemo__legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:clamp(16px,2.4vw,24px) 0 0;padding-top:14px;border-top:1px dotted var(--ink-4);font-size:13px;line-height:1.5;color:var(--ink-3)}
  .tdemo__legend span{display:inline-flex;align-items:center;gap:6px}
  .tdemo__legend svg{width:16px;height:16px;flex:none;color:var(--brand-ink)}
  .tdemo__mine{font:400 13.5px/1.3 var(--font-serif-en);font-style:normal;padding:0 5px;border-radius:4px;background:var(--sense-a);color:var(--ink)}

  /* APP 底部弹层 */
  .tpanel{min-width:0;display:grid;align-content:start;gap:10px}
  .tpanel__cap{display:flex;align-items:center;gap:8px;margin:0;font:600 13px/1.3 var(--font-sans);letter-spacing:.02em;color:var(--ink-2)}
  .tpanel__cap svg{width:18px;height:18px;flex:none;color:var(--brand-ink)}
  .tsheet{position:relative;padding:26px clamp(16px,1.8vw,22px) 20px;border-radius:24px 24px 18px 18px;background:var(--card);box-shadow:var(--shadow-2);
    border:1px solid color-mix(in oklab,var(--rule) 60%,transparent);font-family:var(--font-sans);color:var(--ink);container-type:inline-size}
  .tsheet::before{content:"";position:absolute;top:9px;left:50%;width:36px;height:4px;border-radius:2px;background:var(--ink-4);opacity:.6;translate:-50% 0}
  /* JS 接管后：几张卡叠在同一格，高度取最高那张 → 切换时不跳版面 */
  .tsheet.is-stack{display:grid}
  .tsheet.is-stack > *{grid-area:1/1}
  .tsheet.is-stack > [hidden]{display:block;visibility:hidden}
  :where(.tsheet) p{margin:0}
  .tsheet__lab{display:block;font:600 12px/1.3 var(--font-sans);letter-spacing:.02em;color:var(--ink-3)}
  .tw-card__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
  .tw-card__head b{font:800 clamp(26px,9cqi,32px)/1.1 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
  .tw-card__head span{font-size:14px;color:var(--ink-3)}
  .tw-card__infl{margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-3)}
  .tw-card__infl b{font-weight:600;color:var(--ink-2)}
  .tw-card__ipa{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:14px;color:var(--ink-2)}
  .tw-card__spk{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px 0 8px;border-radius:var(--pill);background:var(--paper-2);font-size:12.5px;color:var(--ink-2)}
  .tw-card__spk svg{width:15px;height:15px}
  .tw-card__def{display:grid;gap:4px;margin-top:14px;padding:13px 16px;border-radius:16px;background:var(--paper-2)}
  .tw-card__def b{font:700 18px/1.4 var(--font-sans);color:var(--ink);text-wrap:pretty}
  :lang(en) .tw-card__def b{font-size:16.5px;font-weight:650}
  .tw-card__phrase{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin-top:12px;padding:8px 12px;border-radius:14px;background:var(--k-gram-bg);color:var(--k-gram);font-size:13.5px;line-height:1.4}
  .tw-card__phrase svg{width:15px;height:15px;flex:none}
  .tw-card__cta{display:grid;place-items:center;height:46px;margin-top:16px;border-radius:var(--pill);background:var(--brand-soft);color:var(--brand-ink);font:650 15px/1 var(--font-sans)}
  .tw-card__cta--done{background:none;box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--done) 55%,transparent);color:var(--done)}
  .ts-card__en{margin-top:6px;font:500 17.5px/1.55 var(--font-sans);color:var(--ink);text-wrap:pretty}
  .ts-card__en b{font-weight:700;color:var(--brand-ink)}
  .ts-card__tr{display:grid;gap:4px;margin:12px 0 14px;padding:12px 16px;border-radius:16px;background:var(--paper-2);font-size:15.5px;line-height:1.6;color:var(--ink)}
  .tpoints{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
  .tpoints li{padding:11px 14px;border-radius:16px;border:1px solid var(--rule)}
  .tpoints li > p:first-child{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
  .tpoints b{font:700 15.5px/1.35 var(--font-sans);color:var(--ink)}
  .tpoints li > p:nth-child(2){margin-top:5px;font-size:14px;line-height:1.5;color:var(--ink-2)}
  .tpoints__note{margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
  .kind{display:inline-block;padding:3px 8px;border-radius:var(--pill);font:600 11px/1.2 var(--font-sans);white-space:nowrap}
  .kind--phrase{background:var(--k-phrase-bg);color:var(--k-phrase)}
  .kind--idiom{background:var(--k-idiom-bg);color:var(--k-idiom)}
  .kind--gram{background:var(--k-gram-bg);color:var(--k-gram)}
  .tdemo__hint{margin-top:var(--s5);max-width:58em}

  /* 小纸条：两栏编号清单 */
  .notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,72px);margin-top:clamp(56px,8vw,96px)}
  @media (max-width:899px){.notes{grid-template-columns:minmax(0,1fr);row-gap:var(--s7)}}
  .notes__h{margin:0;padding-bottom:12px;border-bottom:1px solid var(--rule)}
  .notes__list{list-style:none;margin:0;padding:0}
  .notes__list li{display:grid;grid-template-columns:2.6em minmax(0,1fr);gap:10px;padding:18px 0;border-bottom:1px dotted var(--ink-4)}
  .notes__no{font:500 12px/1.9 var(--font-mono);font-style:normal;letter-spacing:.06em;color:var(--brand-ink)}
  .notes__list strong{display:block;font:700 clamp(17px,1.5vw,19px)/1.4 var(--font-display);color:var(--ink)}
  .notes__list p{margin:5px 0 0;font-size:15px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
  .sense{padding:.05em .3em;margin:0 .1em;border-radius:4px;color:var(--ink);background:var(--sense-a);-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .sense--b{background:var(--sense-b)}

  /* ======================= CH.08 养 ======================= */
  /* 一条成长时间线：蛋 → 幼生 → 少年 → 成熟 四张图并排、一张比一张大，站在同一条地平线上。
     页面正常滚动（不钉住、不劫持滚轮）；进视口时依次浮现一次，动效关掉时就是完整的静态版。 */
  .grow{--pet-glow:var(--pet-dragon);transition:--pet-glow 600ms var(--ease-stage)}
  .grow[data-pet="fox"]{--pet-glow:var(--pet-fox)}
  .grow[data-pet="monster"]{--pet-glow:var(--pet-monster)}
  .grow[data-pet="phoenix"]{--pet-glow:var(--pet-phoenix)}
  .grow__stage{position:relative;isolation:isolate}
  .stage__glow{position:absolute;inset:-12% 0;background:radial-gradient(closest-side,color-mix(in oklab,var(--pet-glow) 30%,transparent),transparent);pointer-events:none;z-index:-1}
  .grow__line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:var(--s7)}
  .gs{display:grid;align-content:start;justify-items:center;text-align:center;padding-inline:clamp(6px,1.2vw,16px)}
  /* 图框等高、图贴底：同一条地平线（四格的下边框连成一条线），越往后的阶段越高 */
  .gs__fig{position:relative;justify-self:stretch;height:clamp(160px,19vw,270px);margin:0 calc(-1 * clamp(6px,1.2vw,16px));display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;border-bottom:2px solid var(--ink-4)}
  .gs__fig::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--paper);border:2px solid var(--ink-3)}
  .gs:last-child .gs__fig::after{background:var(--pet-glow);border-color:var(--ink-2)}
  .gs__fig img{height:var(--h,100%);width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(60,40,20,.14))}
  .gs[data-n="1"]{--h:50%}.gs[data-n="2"]{--h:66%}.gs[data-n="3"]{--h:83%}.gs[data-n="4"]{--h:100%}
  .gs__no{margin-top:var(--s5);font-size:12px;color:var(--ink-3)}
  .gs__name{margin-top:4px;font:700 clamp(21px,2vw,27px)/1.25 var(--font-display);color:var(--ink)}
  .gs__when{margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:16em;text-wrap:pretty}
  /* 手机 / 平板竖屏：2×2，两行各一条地平线 */
  @media (max-width:899px){
    .grow__line{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s6)}
    .gs__fig{height:clamp(120px,30vw,200px)}
    .gs__no{margin-top:var(--s4)}
    .gs__when{font-size:14.5px}
    /* 手机：标题和第一排图之间别空太多（蛋只占半高，上方本来就留白） */
    .grow .ch__head{margin-bottom:0}
  }
  .grow__foot{display:grid;justify-items:center;gap:var(--s3);margin-top:var(--s7)}
  .grow__note{text-align:center;color:var(--ink-2)}
  .eggs{display:flex;gap:6px;width:min(100%,420px)}
  .eggs img{width:44px;height:44px;object-fit:contain;transition:transform var(--t-press) var(--ease-spring)}
  .eggs [aria-checked="true"]{color:var(--ink);background:color-mix(in oklab,var(--c) 16%,transparent)}
  .eggs [aria-checked="true"] img{transform:scale(1.12) rotate(-6deg)}

  /* ======================= CH.09 朋友 ======================= */
  /* 六张小卡：上面一块纸色「演示区」（示例昵称 / 数字），下面标题 + 一句话；唯一动效 = 戳一戳的第一句被荧光划过 */
  .fgrid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.4vw,18px);grid-template-columns:repeat(3,minmax(0,1fr))}
  @media (max-width:899px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:600px){.fgrid{grid-template-columns:minmax(0,1fr)}}
  .fcard{display:grid;grid-template-rows:auto auto 1fr;align-content:start;gap:8px;padding:clamp(16px,1.8vw,22px);background:var(--card);border-radius:var(--r3);box-shadow:var(--shadow-1);border:1px solid color-mix(in oklab,var(--rule) 60%,transparent);min-width:0}
  .fcard .h3{margin-top:8px}
  .fcard > p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
  .fcard__demo{min-height:124px;display:grid;align-content:center;gap:10px;padding:14px;border-radius:var(--r2);background:var(--paper-2)}
  .fcard__meta{margin:0;font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}
  .poke__chips{margin:0;display:flex;flex-wrap:wrap;gap:6px}
  .poke__chip{padding:5px 11px;border-radius:var(--pill);background:var(--card);border:1px solid var(--rule);font-size:13.5px;line-height:1.3;color:var(--ink-2)}
  .poke__chip:first-child{color:var(--ink);border-color:var(--ink-4)}
  .poke__chip .hl{--hl:var(--hl-strong)}
  .poke__nobox{margin:0;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)}
  .poke__nobox::before{content:"";flex:none;width:44px;height:18px;border:1.5px dashed var(--ink-4);border-radius:5px;
    background:linear-gradient(to top right,transparent calc(50% - .8px),var(--ink-4) calc(50% - .8px) calc(50% + .8px),transparent calc(50% + .8px))}
  .fmini{display:grid;gap:12px}
  .fmini p{margin:0}
  .fmini__who{display:flex;align-items:center;gap:8px;font-size:15px}
  .fmini__av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink);font:600 14px/1 var(--font-sans);font-style:normal}
  .fmini__who small{margin-left:auto;font-size:11px;color:var(--ink-3)}
  .fmini__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;font-size:11px;line-height:1.3;color:var(--ink-3)}
  .fmini__stats span{display:grid;gap:3px}
  .fmini__stats b{font-size:19px;line-height:1;font-weight:500;color:var(--ink);white-space:nowrap}
  .pk{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;text-align:center;font-size:12px;line-height:1.35;color:var(--ink-3)}
  .pk__side{display:grid;gap:4px;padding:8px 6px;border-radius:12px;background:var(--card)}
  .pk__side b{font-size:26px;line-height:1;font-weight:500;color:var(--ink)}
  .pk__vs{font-size:20px;color:var(--brand-ink)}
  .board{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px}
  .board li{display:flex;align-items:center;gap:10px;padding:5px 10px;border-radius:10px;background:var(--card);color:var(--ink-2)}
  .board i{width:12px;font:500 12px/1 var(--font-mono);font-style:normal;color:var(--ink-3)}
  .board b{margin-left:auto;font-size:16px;font-weight:500;color:var(--ink)}
  .board .is-me{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink-4)}
  .fshare{margin:0;display:grid;gap:8px}
  .fshare__title{display:block;padding:10px 12px;border-radius:5px 12px 12px 5px;background:var(--card);box-shadow:var(--shadow-1),var(--spine);font-size:17px;line-height:1.3;color:var(--ink)}
  .fshare__to{font-size:13px;color:var(--ink-2)}
  .coop{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:center;font-size:13.5px;color:var(--ink-2)}
  .coop__bar{grid-column:1/-1;order:3;height:8px;border-radius:4px;background:var(--card);overflow:hidden}
  .coop__bar i{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--pet-dragon)}
  .coop__n{font-size:12px;color:var(--ink-3)}
  .friends__rule{margin:var(--s6) 0 0;display:flex;gap:16px;align-items:baseline;padding:16px 20px;border-radius:var(--r2);border:1px solid var(--rule);font-size:15px;line-height:1.75;color:var(--ink-2)}
  .friends__rule-k{flex:none;font:600 11.5px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  @media (max-width:600px){.friends__rule{flex-direction:column;gap:8px}}
  .friends__note{margin-top:var(--s3)}

  /* ======================= CH.10 家长 + 安全 ======================= */
  .parents__grid{display:grid;gap:var(--s7)}
  /* 构图：左边两部手机（滚动时停住），右边标题 + 功能 + 雷达；手机上标题在最前 */
  @media (min-width:900px){.parents__grid{grid-template-columns:1fr 1fr;align-items:start;gap:var(--s8)}.parents__phones{position:sticky;top:110px}}
  @media (max-width:899px){.parents__grid{display:flex;flex-direction:column}.parents__grid > .parents__side{display:contents}.parents__grid .parents__head{order:-1}}
  .parents__head{margin-bottom:0}
  :root[lang="en"] #t-parents{font-size:clamp(38px,4.4vw,66px)}   /* /en：两句各占一行（和中文「看得见进步，/ 不用天天催。」对等）*/
  @media (min-width:600px){:root[lang="en"] #t-parents .nb{white-space:nowrap}}
  .parents__phones{display:flex;justify-content:center;gap:0;padding-bottom:70px}
  .parents__phones .phone{width:min(44vw,250px)}
  .parents__phones .phone:first-child{transform:rotate(-2deg);z-index:1}
  .parents__phones .phone:last-child{margin-left:28px;transform:translateY(60px) rotate(3deg)}
  @media (max-width:899px){.parents__phones .phone{width:min(45vw,230px)}.parents__phones .phone:last-child{margin-left:0}}
  /* 深色模式下给外框一圈暖色描边 + 投影，轮廓不再融进底色 */
  :root[data-theme="dark"] .parents__phones .phone{box-shadow:0 0 0 1px rgba(255,240,225,.12),0 30px 60px rgba(0,0,0,.5)}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .parents__phones .phone{box-shadow:0 0 0 1px rgba(255,240,225,.12),0 30px 60px rgba(0,0,0,.5)}}
  .parents__phones .phone figcaption{bottom:-34px;color:var(--ink-2)}
  /* 周报截图只保留到正文第一段（隐私 + 第二段有已知错误说法），屏幕下半截是空的 →
     这台手机截短（只显示截图上部），底边用遮罩淡出到纸上；遮罩往下多留 44px 给说明文字。不加阴影（淡出处会露出阴影断边）*/
  .parents__phones .phone--fade{aspect-ratio:640/960;align-self:flex-start;box-shadow:none!important;
    -webkit-mask:linear-gradient(#000 0 calc((100% - 44px) * .74),transparent calc(100% - 50px),transparent calc(100% - 44px),#000 calc(100% - 40px)) 0 0/100% calc(100% + 44px) no-repeat;-webkit-mask-clip:no-clip;
    mask:linear-gradient(#000 0 calc((100% - 44px) * .74),transparent calc(100% - 50px),transparent calc(100% - 44px),#000 calc(100% - 40px)) 0 0/100% calc(100% + 44px) no-repeat;mask-clip:no-clip}
  .parents__side{display:grid;gap:var(--s6)}
  .feats{display:grid;gap:0;list-style:none;margin:0;padding:0}
  .feats li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
  .feats li:first-child{border-top:1px solid var(--rule)}
  .feats svg{width:22px;height:22px;flex:none;color:var(--ink-2);margin-top:2px}
  .feats strong{display:block;font-size:16px}
  .feats strong .tag{margin-left:6px;height:20px;font-size:11px}
  .feats span{font-size:14.5px;color:var(--ink-3)}
  .radar{display:grid;justify-items:center;gap:4px;width:min(100%,340px);justify-self:center}
  @media (max-width:899px){.radar{padding-bottom:72px}}
  .radar svg{width:100%;overflow:visible}
  .radar__grid{stroke:var(--rule);stroke-width:1.2}
  .radar__shape{fill:color-mix(in oklab,var(--brand) 18%,transparent);stroke:var(--ink-2);stroke-width:2;stroke-linejoin:round;transform-origin:120px 120px}
  .radar__labels{font:500 12.5px var(--font-sans);fill:var(--ink-2)}
  :lang(en) .radar__labels{font-size:11.5px}
  .radar figcaption,.parents figcaption.small{color:var(--ink-2)}
  .safety{margin-top:var(--s8);padding:clamp(28px,4vw,56px);border-radius:var(--r4);background:var(--card);box-shadow:var(--shadow-1);border:1px solid var(--rule)}
  .safety .h2{margin-bottom:var(--s6)}
  .safety__cols{display:grid;gap:var(--s6)}
  @media (min-width:900px){.safety__cols{grid-template-columns:1fr 1fr;gap:var(--s8)}}
  .safety h4{margin-bottom:var(--s3)}
  .checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55}
  .checks .tick{margin-top:1px}
  .checks svg path{stroke-dasharray:1;stroke-dashoffset:0}
  .safety__links{margin-top:var(--s5);display:flex;gap:var(--s5)}
  .safety__links a{min-height:44px;display:inline-flex;align-items:center;color:var(--brand-ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 78%/0% 1.5px;transition:background-size var(--t-hl) var(--ease-out);font-weight:600}
  .safety__links a:hover,.safety__links a:focus-visible{background-size:100% 1.5px}

  /* ======================= 分流卡 · 成人 ======================= */
  .adults{padding-block:var(--s4)}
  .adults__card{display:grid;gap:var(--s7);align-items:center;padding:clamp(28px,4vw,64px);border-radius:var(--r4);background:var(--paper-2);overflow:hidden}
  @media (min-width:900px){.adults__card{grid-template-columns:1fr 1.05fr;gap:var(--s8)}}
  .adults__copy{display:grid;gap:var(--s4)}
  .art-card{position:relative;display:grid;gap:10px;padding:clamp(22px,3vw,32px);background:var(--card);border:1px solid var(--rule);border-radius:6px 18px 18px 6px;box-shadow:var(--shadow-2),var(--spine);transform:rotate(-2deg);max-width:520px;justify-self:center}
  @media (max-width:899px){.art-card{transform:rotate(-1deg)}}
  .art__label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-bottom:10px;border-bottom:1px dotted var(--ink-4)}
  .art__title{font:560 clamp(22px,2.2vw,28px)/1.2 var(--font-serif-en);letter-spacing:-.015em;color:var(--ink)}
  .art__sub{font-size:14.5px;color:var(--ink-2);margin-top:-4px}
  .art__chips{display:flex;flex-wrap:wrap;gap:6px}
  .art__chips .chip{height:26px;font:500 12px/1 var(--font-mono);color:var(--ink-2)}
  .art__body{font:400 17px/1.7 var(--font-serif-en);color:var(--ink);max-height:7.4em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  .art__body .hl{--hl:var(--hl-strong)}
  .w-dash{border-bottom:1.5px dashed color-mix(in oklab,var(--brand) 55%,transparent)}

  /* ======================= CH.11 开始 ======================= */
  .start > .wrap > .hero__labels{justify-content:center}
  .start__title{margin-top:var(--s4);font-size:clamp(44px,8vw,112px);text-align:center}
  .start__title .line{display:block}
  .start > .wrap > .lede{margin:var(--s5) auto 0;text-align:center}
  .prices{display:grid;gap:var(--s5);margin-top:var(--s8)}
  @media (min-width:900px){.prices{grid-template-columns:1fr 1fr;max-width:960px;margin-inline:auto;margin-top:calc(var(--s8) + 48px)}}
  .price{position:relative;z-index:1;display:grid;align-content:start;gap:10px;padding:clamp(24px,3vw,36px);background:var(--card);border-radius:var(--r3);box-shadow:var(--shadow-2);border:1px solid var(--rule)}
  .price-wrap{position:relative;margin-top:104px}
  @media (min-width:900px){.price-wrap{margin-top:0}}
  .price-wrap > .price{height:100%}
  .price__sub{font-size:14px;color:var(--ink-3);margin-top:-6px}
  .price__amt{font-size:40px;line-height:1.1;margin-top:8px}
  .price__amt .serif-en{font-weight:500;letter-spacing:-.02em}
  .price__alt{font-size:15px;color:var(--ink-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .price__alt .serif-en{font-size:20px}
  .price .checks{margin-top:10px}
  /* Premium 卡：顶部荧光书签条 · 底部年付说明贴底 */
  .price--pro{box-shadow:var(--shadow-3);display:flex;flex-direction:column;gap:10px}
  .price__mark{position:absolute;top:-1px;right:28px;width:22px;height:40px;background:var(--brand);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}
  .price__foot{margin-top:auto;padding-top:14px;border-top:1px dotted var(--ink-4)}
  /* 凤凰探头：挪开丝带、露出整个头 */
  .price__peek{position:absolute;z-index:0;top:-96px;left:clamp(40px,22%,120px);width:112px;height:112px;object-fit:contain;pointer-events:none}
  .prices__note{margin:var(--s5) auto 0;max-width:640px;text-align:center}
  @media (max-width:600px){.start > .wrap > .lede,.prices__note{text-align:left}}
  /* 结尾页：书的最后一页 · 四只少年宠物站在书页上 */
  .finale{position:relative;margin:clamp(130px,15vw,210px) auto 0;max-width:960px}
  .finale__pets{position:absolute;left:0;right:0;top:0;translate:0 -80%;display:flex;justify-content:center;gap:clamp(4px,2vw,28px);z-index:2;pointer-events:none}
  .finale__pets img{width:clamp(72px,15vw,168px);height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(60,40,20,.16))}
  .finale__page{position:relative;isolation:isolate;display:grid;justify-items:center;gap:var(--s5);text-align:center;padding:clamp(40px,6vw,72px) clamp(20px,5vw,64px) clamp(32px,4vw,48px);background:var(--card);border-radius:6px 22px 22px 6px;box-shadow:var(--shadow-3),var(--spine);border:1px solid var(--rule)}
  .finale__page .book__head{width:100%;margin-bottom:0}
  .finale__title{font-size:clamp(40px,7vw,96px)}
  .finale .download__btns{justify-content:center}
  .download__btns{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
  @media (max-width:600px){
    .finale .copy-btn{width:100%;height:auto;min-height:44px;padding:10px 16px;white-space:normal;text-align:center}
    .finale .copy-btn span{text-align:center;text-wrap:wrap}
  }
  .badge--lg img{height:62px}
  .download__fine{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
  .seen{margin:var(--s7) auto 0;max-width:560px;padding:22px 26px;border-radius:6px 16px 16px 6px;background:var(--card);box-shadow:var(--shadow-2),var(--spine);opacity:.85;transform:rotate(-1deg)}
  .seen__page{font-size:15px;line-height:1.75;color:var(--ink-3)}
  .seen__page b{font-weight:400;color:var(--ink-3)}
  .seen__page b.is-seen{color:var(--ink);background:var(--hl-strong);border-radius:3px;padding:0 2px}
  .seen__note{margin-top:var(--s3);text-align:center}
  .faq{margin:var(--s9) auto 0;max-width:820px}
  .faq .h2{margin-bottom:var(--s5)}
  .faq details{border-bottom:1px solid var(--rule)}
  .faq details:first-of-type{border-top:1px solid var(--rule)}
  .faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;cursor:pointer;font-weight:650;font-size:17px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:translateY(-3px) rotate(45deg);transition:transform var(--t-hover) var(--ease-out)}
  .faq details[open] summary::after{transform:translateY(3px) rotate(-135deg)}
  .faq details p{padding:0 0 20px;color:var(--ink-2);max-width:64ch}
  .faq details::details-content{block-size:0;overflow-y:clip;transition:block-size 350ms var(--ease-out),content-visibility 350ms allow-discrete}
  .faq details[open]::details-content{block-size:auto}

  /* ======================= 页脚（首页专属的收尾）======================= */
  /* 「The End · 明天见」做成一页书的最后一句；顶部虚线 + 页码呼应书页 */
  @media (min-width:900px){.colophon__grid{align-items:start}}
  .colophon__folio{display:flex;align-items:center;gap:14px;margin:0 0 var(--s6);font:500 12px/1 var(--font-mono);letter-spacing:.12em;color:var(--ink-3)}
  .colophon__folio::before{content:"";flex:1;border-top:1px dashed var(--rule)}
  .colophon__end{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;font:italic 400 clamp(32px,4vw,56px)/1.08 var(--font-serif-en);color:var(--ink);letter-spacing:-.01em;margin:var(--s4) 0 var(--s5)}
  .colophon__end span{font-family:var(--font-serif-zh);font-style:normal;font-size:.8em}
  .colophon__pet{width:72px;height:72px;object-fit:contain;margin:0 0 -6px -6px;filter:drop-shadow(0 8px 10px rgba(60,40,20,.14))}

  /* 平板竖屏：下载胶囊不当放大版手机 */
  @media (min-width:700px) and (max-width:899px){.dock{max-width:520px;margin-inline:auto;left:0;right:0}}
}

/* ==========================================================================
   动效（只在 .js-motion 下生效）
   ========================================================================== */
@layer motion{
  @keyframes blurIn{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}  /* 不动 filter：大字号中文模糊在 iOS Safari 上逐帧重绘，只走合成线程的 opacity + translate */
  @keyframes hlSweep{from{background-size:0% 100%}to{background-size:100% 100%}}
  @keyframes cardIn{from{opacity:0;translate:0 10px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
  @keyframes sheetIn{from{translate:0 100%}to{translate:0 0}}
  @keyframes artIn{from{opacity:0;scale:1.02}to{opacity:1;scale:1}}
  @keyframes breathe{0%,100%{scale:1}50%{scale:1.02}}
  @keyframes rise{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
  @keyframes slideIn{from{opacity:0;translate:40px 0}to{opacity:1;translate:0 0}}
  @keyframes dotTo{from{translate:0 0}to{translate:calc(100cqi / 6 * 3) 0}}
  @keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
  @keyframes hop{0%,100%{translate:0 0}35%{translate:0 -22px}55%{translate:0 0}70%{translate:0 -6px}}
  @keyframes ringFill{from{stroke-dashoffset:100}}
  @keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes pop{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
  @keyframes flipOnce{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}
  @keyframes flipBack{0%{transform:rotateY(-180deg)}100%{transform:rotateY(0)}}
  @keyframes strike{from{scale:0 1}to{scale:1 1}}
  @keyframes fadeUp{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
  @keyframes dropIn{from{opacity:0;translate:0 -16px}to{opacity:1;translate:0 0}}
  @keyframes blink{50%{opacity:0}}
  @keyframes radarGrow{from{scale:0;opacity:0}to{scale:1;opacity:1}}
  @keyframes peek{from{translate:0 40%}to{translate:0 0}}
  @keyframes totalPop{0%{scale:1}45%{scale:1.12}100%{scale:1}}
  @keyframes figPar{from{translate:0 28px}to{translate:0 -28px}}

  /* 首屏：标题逐行从模糊到清晰 → 荧光划过「你的宠物」 */
  .js-motion .hero__title .line{animation:blurIn var(--t-in) var(--ease-out) both}
  .js-motion .hero__title .line:nth-child(2){animation-delay:80ms}
  .js-motion .hero__hl{animation:hlSweep 700ms var(--ease-out) 520ms both}
  .js-motion .w.is-hint{animation:hlSweep var(--t-hl) var(--ease-out) 1100ms both}
  .js-motion .wcard__art.is-breathe [data-wc-img]{animation:artIn 800ms var(--ease-out) both,breathe 4s var(--ease-stage) 800ms 1}

  /* 滚入：优先用 CSS 滚动驱动（view timeline），不支持时由 core.js 的 IO 加 .is-in */
  @supports (animation-timeline:view()){
    .js-motion [data-reveal]{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
    .js-motion .act__card{animation:rise linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
    .js-motion .act__card:nth-child(2){animation-range:entry 10% cover 31%}
    .js-motion .act__card:nth-child(3){animation-range:entry 15% cover 34%}
    .js-motion .act__card:nth-child(4){animation-range:entry 20% cover 37%}
    .js-motion .spines li{animation:slideIn linear both;animation-timeline:--spines;animation-range:entry calc(var(--i) * 1%) cover calc(12% + var(--i) * .8%)}
    .js-motion .spines{view-timeline:--spines block}
    .js-motion .ruler__dot{animation:dotTo linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
    .js-motion .library__fig .plate{animation:figPar linear both;animation-timeline:view();animation-range:cover}   /* CH.03 Fig.2 轻微视差 */
  }
  @supports not (animation-timeline:view()){
    .io-ready [data-reveal]:not(.is-in),.io-ready .act__grid:not(.is-in) .act__card{opacity:0;translate:0 24px}
    .io-ready [data-reveal],.io-ready .act__card{transition:opacity var(--t-in) var(--ease-out),translate var(--t-in) var(--ease-out)}
    .io-ready .act__card:nth-child(2){transition-delay:80ms}.io-ready .act__card:nth-child(3){transition-delay:160ms}.io-ready .act__card:nth-child(4){transition-delay:240ms}
    .io-ready .spines:not(.is-in) li{opacity:0;translate:40px 0}
    .io-ready .spines li{transition:opacity 500ms var(--ease-out),translate 500ms var(--ease-out);transition-delay:calc(var(--i) * 30ms)}
    .io-ready .ruler:not(.is-in) .ruler__dot{translate:0 0}
    .io-ready .ruler__dot{transition:translate 1s var(--ease-stage) .2s}
  }

  /* CH.07 巧思：弹层换卡时轻轻浮入（只这一个动效）；按住时整句底色慢慢浮出，提示「继续按」 */
  .js-motion .tsheet > .is-new{animation:cardIn 260ms var(--ease-out) both}
  .js-motion .tsent{transition:background-color 200ms var(--ease-out)}
  .js-motion .tsent.is-pressing{transition:background-color 450ms linear}

  /* 练习 Bento：bento.js 加 .is-armed 才设起始态；进视口加 .is-play 播一次 */
  .js-motion .bento.is-armed .tile:not(.is-play) .ring{stroke-dashoffset:100}
  .js-motion .tile.is-play .ring{animation:ringFill 700ms var(--ease-stage) both;animation-delay:calc(var(--i) * 150ms)}
  /* 四环填满后总分轻轻一弹（不放彩纸：中途截图像渲染残留）*/
  .js-motion .tile.is-play .rings__total span{animation:totalPop 420ms var(--ease-spring) 1150ms both}
  .js-motion .bento.is-armed .tile:not(.is-play) .flip__front{transform:rotateY(0)}
  .js-motion .bento.is-armed .tile:not(.is-play) .flip__back{transform:rotateY(180deg)}
  .js-motion .tile.is-play .flip__front{animation:flipOnce var(--t-morph) var(--ease-morph) 300ms both}
  .js-motion .tile.is-play .flip__back{animation:flipBack var(--t-morph) var(--ease-morph) 300ms both}
  .js-motion .bento.is-armed .tile:not(.is-play) .curve__line,.js-motion .bento.is-armed .tile:not(.is-play) .match__line{stroke-dashoffset:1}
  .js-motion .tile.is-play .curve__line{animation:draw 1.1s linear 500ms both}
  .js-motion .bento.is-armed .tile:not(.is-play) .curve__pt{opacity:0}
  .js-motion .tile.is-play .curve__pt{animation:pop 300ms var(--ease-spring) both;animation-delay:calc(500ms + 1100ms * var(--at,1))}   /* 曲线画到这个点的那一刻才弹出 */
  .js-motion .bento.is-armed .tile:not(.is-play) .demo-hl{background-size:0% 100%}
  .js-motion .tile.is-play .demo-hl{animation:hlSweep var(--t-hl) var(--ease-out) 400ms both}
  .js-motion .bento.is-armed .tile:not(.is-play) .gram__fix s::after{scale:0 1}
  .js-motion .tile.is-play .gram__fix s::after{animation:strike 300ms var(--ease-out) 200ms both}
  .js-motion .bento.is-armed .tile:not(.is-play) .gram__fix .hl{opacity:0}
  .js-motion .tile.is-play .gram__fix .hl{animation:fadeUp 300ms var(--ease-out) 500ms both,hlSweep var(--t-hl) var(--ease-out) 650ms both}
  .js-motion .bento.is-armed .tile:not(.is-play) .spell .drop{opacity:0}
  .js-motion .tile.is-play .spell .drop{animation:dropIn 380ms var(--ease-spring) both;animation-delay:calc(250ms + var(--i) * 220ms)}
  .js-motion .tile.is-play .match__line{animation:draw 600ms var(--ease-stage) both;animation-delay:calc(250ms + var(--i) * 300ms)}
  .js-motion .bento.is-armed .tile:not(.is-play) .cloze__fill{opacity:0}
  .js-motion .tile.is-play .cloze__fill{animation:dropIn 380ms var(--ease-spring) 300ms both}
  .js-motion .bento.is-armed .tile:not(.is-play) .type span{opacity:0}
  .js-motion .tile.is-play .type span{animation:fadeUp 200ms var(--ease-out) both;animation-delay:calc(200ms + var(--i) * 260ms)}
  .js-motion .tile.is-play .type__caret{animation:blink 1s steps(1) 3}

  /* 家长：雷达从中心长出 · 安全清单小勾依次描出 */
  .js-motion .radar.is-armed:not(.is-in) .radar__shape{scale:0;opacity:0}
  .js-motion .radar.is-in .radar__shape{animation:radarGrow 900ms var(--ease-stage) both}
  .js-motion .safety.is-armed:not(.is-in) .checks svg path{stroke-dashoffset:1}
  .js-motion .safety.is-in .checks svg path{animation:draw 380ms var(--ease-out) both}
  .js-motion .safety.is-in .checks li:nth-child(2) path{animation-delay:60ms}
  .js-motion .safety.is-in .checks li:nth-child(3) path{animation-delay:120ms}
  .js-motion .safety.is-in .checks li:nth-child(4) path{animation-delay:180ms}
  .js-motion .safety.is-in .checks li:nth-child(5) path{animation-delay:240ms}

  /* 结尾页：四只宠物依次 hop 一下 */
  .js-motion .finale.is-in .finale__pets img{animation:hop 700ms var(--ease-out) both;animation-delay:calc(200ms + var(--i) * 120ms)}

  /* 价格卡：凤凰探头一次 */
  .js-motion .price-wrap.is-armed:not(.is-in) .price__peek{translate:0 40%}
  .js-motion .price-wrap.is-in .price__peek{animation:peek var(--t-in) var(--ease-spring) both}

  /* CH.08 成长时间线：core.js 进视口前加 .is-armed、进视口加 .is-in · 四个阶段依次浮现一次（不影响滚动）*/
  .js-motion .grow__line.is-armed:not(.is-in) .gs{opacity:0;translate:0 18px}
  .js-motion .grow__line.is-armed:not(.is-in) .gs__fig img{scale:.9}
  .js-motion .grow__line.is-in .gs{transition:opacity 500ms var(--ease-out),translate 500ms var(--ease-out);transition-delay:calc(var(--i) * 130ms)}
  .js-motion .grow__line.is-in .gs__fig img{transition:scale 600ms var(--ease-spring);transition-delay:calc(80ms + var(--i) * 130ms)}
}

/* ==========================================================================
   招牌形变：只让「词」和「词卡」动（html.vt-word 只在书页点词时挂上）· 不进 layer（要盖过 UA 默认的 view-transition 动画）
   ========================================================================== */
/* 旧快照不画，下面就是实时的新页面：插图淡出、遮罩压暗按各自的过渡播放，不会在 550ms 时突然跳变 */
html.vt-word::view-transition-old(root){display:none}
html.vt-word::view-transition-new(root){animation:none}
/* 形变那 550ms 里点击照样落到真实的词上（否则会被覆盖层吃掉，后一次点击就丢了）*/
html.vt-word::view-transition{pointer-events:none}
html.vt-word .masthead{view-transition-name:none}
::view-transition-group(word-active){animation-duration:550ms;animation-timing-function:cubic-bezier(.2,.9,.1,1)}
::view-transition-old(word-active),::view-transition-new(word-active){height:100%;width:auto;object-fit:none;animation-duration:550ms;animation-timing-function:cubic-bezier(.2,.9,.1,1)}
html.vt-word::view-transition-new(wcard){animation:cardIn 450ms cubic-bezier(.2,.8,.2,1) both}
html.vt-word.vt-sheet::view-transition-new(wcard){animation:sheetIn 360ms cubic-bezier(.2,.8,.2,1) both}
html.vt-word::view-transition-old(wcard){animation:fadeOut 220ms cubic-bezier(.2,.8,.2,1) both}
html.vt-word.vt-sheet::view-transition-old(wcard){animation:sheetOut 260ms cubic-bezier(.2,.8,.2,1) both}
@keyframes fadeOut{to{opacity:0;translate:0 8px}}
@keyframes sheetOut{to{translate:0 100%}}

/* 宣传片 L3（首页第一屏下方） */
.film{padding-block:clamp(16px,3vw,40px)}
.film__frame{margin:0;border-radius:var(--r3);overflow:hidden;background:#000;box-shadow:var(--shadow-2);aspect-ratio:16/9}
.film__video{display:block;width:100%;height:100%;object-fit:cover}
.film__bar{display:flex;justify-content:center;margin-top:14px}
.film__off,.film.is-narr .film__on{display:none}
.film__bar .is-on .film__on{display:none}.film__bar .is-on .film__off{display:inline}

/* 手机外框：截图没加载好之前不画外框 / 阴影 / 刘海（尺寸保留）· 加载后淡入 */
.js .phone{transition:background-color .4s ease,box-shadow .4s ease}
.js .phone::after{transition:opacity .4s ease}
.js .phone:not(.is-loaded){background:transparent!important;box-shadow:none!important}
.js .phone:not(.is-loaded)::after{opacity:0}
.js .phone:not(.is-loaded) img{background:transparent;visibility:hidden}