/* 本站专属样式。只放这个站才有的东西（装饰图案、首页插画等）；通用组件的样式在 assets/engine/style.css，不要在这里改。 */

[lang="ms"]{ font-family:var(--f-ms); }

/* ---------- 竹笋纹（pucuk rebung）---------- */
.rebung-rule{ height:16px; background:var(--accent); opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M0 16 8 0l8 16zM16 16l8-16 8 16z' fill='%23000'/%3E%3C/svg%3E") repeat-x left bottom/32px 16px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M0 16 8 0l8 16zM16 16l8-16 8 16z' fill='%23000'/%3E%3C/svg%3E") repeat-x left bottom/32px 16px; }

.hero-chat{ display:flex; flex-direction:column; gap:14px; }
.bubble{ position:relative; max-width:92%; padding:16px 20px; border-radius:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:3px; }
.bubble-you{ align-self:flex-start; background:var(--card); border-bottom-left-radius:6px; }
.bubble-me{ align-self:flex-end; background:var(--accent); color:var(--on-accent); border-bottom-right-radius:6px; }
.bubble-ms{ font-family:var(--f-ms); font-weight:700; font-size:1.3rem; line-height:1.4; display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.bubble-say{ font-size:.78rem; letter-spacing:.1em; opacity:.75; }
.bubble-zh{ font-size:.98rem; opacity:.9; }
.bubble-me .say{ background:rgba(255,255,255,.2); color:inherit; }
.chat-note{ margin:4px 4px 0; color:var(--ink-3); font-size:.88rem; text-align:center; }

/* ---------- 测验：每题的「提交」按钮（features.quiz_each）---------- */
.quiz-q-actions{ display:flex; justify-content:flex-start; margin-top:16px; }
.quiz-question .quiz-q-submit{ min-width:112px; min-height:48px; padding:0 1.8em; border:2px solid var(--accent); border-radius:999px; background:var(--accent); color:var(--on-accent); font:inherit; font-size:.98rem; font-weight:700; cursor:pointer; transition:background .15s,border-color .15s,transform .1s; }
.quiz-question .quiz-q-submit:hover:not(:disabled){ background:var(--accent-ink); border-color:var(--accent-ink); }
.quiz-question .quiz-q-submit:active:not(:disabled){ transform:scale(.97); }
.quiz-question .quiz-q-submit:disabled{ background:transparent; border-color:var(--line); color:var(--ink-3); cursor:not-allowed; }
@media (max-width:900px){ .quiz-question .quiz-q-submit{ width:100%; } }

/* =====================================================================
   视觉升级：方案 A · Batik Hijau 峇迪翡翠
   翡翠绿 + 辣椒红 + 金，Fraunces 粗衬线标题，峇迪菱形暗纹，按钮有「立体」按压感
   ===================================================================== */
:root{ --page-w:1500px; }   /* 页面宽度（含左右留白）；2026-10-29 起本站按用户要求用 1500px，手机和平板自动缩到屏幕宽度 */
:root{ --pat-gold:#F2B632; --card-shadow:0 1px 2px rgba(16,48,42,.07),0 10px 26px rgba(16,48,42,.08); --press:0 4px 0 var(--accent-ink); }
html[data-mode="dark"]{ --card-shadow:0 8px 24px rgba(0,0,0,.35); --press:0 4px 0 #1D7C68; }

h1,h2,h3{ font-weight:800; letter-spacing:-.012em; }
.brand-name{ font-weight:800; }

/* 按钮：立体按压 */
.btn-primary,.quiz-submit{ box-shadow:var(--press); }
.btn-primary:active,.quiz-submit:active:not(:disabled){ transform:translateY(3px); box-shadow:0 1px 0 var(--accent-ink); }
.quiz-submit:disabled{ box-shadow:none; }
.quiz-question .quiz-q-submit{ box-shadow:var(--press); }
.quiz-question .quiz-q-submit:active:not(:disabled){ transform:translateY(3px); box-shadow:0 1px 0 var(--accent-ink); }
.quiz-question .quiz-q-submit:disabled{ box-shadow:none; }

/* 首页首屏：峇迪菱形暗纹 + 金色圆点 */
.hero{ overflow:hidden; }
.hero::before,.hero::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.hero::before{ background:var(--accent); opacity:.07;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 4 52 28 28 52 4 28Z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0/56px 56px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 4 52 28 28 52 4 28Z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0/56px 56px; }
.hero::after{ background:var(--pat-gold); opacity:.26;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Ccircle cx='28' cy='28' r='3.6'/%3E%3C/svg%3E") 0 0/56px 56px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Ccircle cx='28' cy='28' r='3.6'/%3E%3C/svg%3E") 0 0/56px 56px; }
.hero-inner{ position:relative; z-index:1; }
.hero h1{ font-weight:900; }
.hero h1 mark{ background:none; color:var(--chili); position:relative; }
.hero h1 mark::after{ content:""; position:absolute; left:0; right:0; bottom:-.12em; height:.16em; border-radius:99px; background:var(--gold); opacity:.85; }
.eyebrow{ border:1.5px solid color-mix(in srgb,var(--accent) 30%,transparent); }

/* 卡片：更有层次 */
.level-card,.skill,.toc-row,.row-link,.day,.helper,.gloss-item,.faq details,.usage{ box-shadow:var(--card-shadow); border-color:transparent; }
.level-card:hover,.toc-row:hover,.row-link:hover,.day:hover{ box-shadow:0 2px 4px rgba(16,48,42,.08),0 16px 34px rgba(16,48,42,.14); }
.level-card{ position:relative; overflow:hidden; }
.level-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--accent); }
.level-card:nth-child(2)::before{ background:var(--chili); }
.level-card:nth-child(3)::before{ background:var(--gold); }
.level-card:nth-child(2) .level-code{ background:var(--chili); color:#fff; }
.level-card:nth-child(3) .level-code{ background:var(--gold); color:var(--on-gold); }
.level-name{ font-weight:800; }
.skill-word{ font-weight:800; }
.day.is-today{ box-shadow:0 0 0 4px var(--accent-soft),var(--card-shadow); }
.section-head h2{ display:flex; align-items:center; gap:.5em; }
.section-head h2::before{ content:""; flex:none; width:.5em; height:1em; border-radius:4px; background:var(--chili); }

/* 示意对话：更大、更像聊天 */
.bubble-ms{ font-size:1.45rem; font-weight:800; }
.bubble-you{ border:1.5px solid color-mix(in srgb,var(--accent) 18%,transparent); }
.bubble-me{ box-shadow:0 10px 26px rgba(11,107,88,.28); }

/* 笔记页 */
.note-main{ box-shadow:var(--card-shadow); border-color:transparent; border-radius:28px; }
.note-h1{ font-weight:800; }
.note-pos{ border:1.5px solid color-mix(in srgb,var(--accent) 30%,transparent); }
.note-body h2{ font-weight:800; font-size:1.6rem; padding-bottom:.35em; border-bottom:2px dashed var(--line); }
.note-body h2::before{ width:.7em; height:.7em; }
.note-body h3{ font-weight:700; }
.overview{ border:1.5px solid color-mix(in srgb,var(--accent) 25%,transparent); }
.callout{ border-left:6px solid transparent; }
.callout-tip{ border-left-color:var(--gold); }
.callout-note{ border-left-color:var(--accent); }
.callout-warn{ border-left-color:var(--chili); }
.example-card{ box-shadow:var(--card-shadow); border-color:transparent; border-left-color:var(--accent); }
.table-scroll{ box-shadow:var(--card-shadow); border-color:transparent; }
.vocab th{ font-weight:700; }
.side-title{ font-weight:800; }
.side-item.is-active{ box-shadow:0 4px 12px rgba(11,107,88,.25); }
.read-progress{ height:3px; }
.read-progress span{ background:var(--accent); border-radius:0 3px 3px 0; }   /* 阅读进度条：单一颜色，一眼看清 */

/* 页面切换纯淡入由引擎提供；这里只补手机上的触感 */
@media (max-width:900px){
  .note-main{ border-radius:22px; }
  .hero::after{ opacity:.18; }
}
@media (prefers-reduced-motion:reduce){ .btn-primary:active,.quiz-submit:active,.quiz-question .quiz-q-submit:active{ transform:none; } }

/* =====================================================================
   页头 / 页脚 / 链接 的精致化
   ===================================================================== */
:root{ --link-line:color-mix(in srgb,var(--accent) 45%,transparent); --foot-bg:#0D2B25; --foot-ink:#E8F0EB; --foot-mute:#9DB7AD; --foot-line:#1F4239; }
html[data-mode="dark"]{ --link-line:color-mix(in srgb,var(--accent) 55%,transparent); --foot-bg:#08140F; --foot-line:#183229; }

/* 页头（电脑）：品牌 | 导航（当前页底部一条细线）| 搜索框 + 设置。不用多色，靠留白、字重和一条线做出层次 */
.topbar{ position:sticky; background:color-mix(in srgb,var(--paper) 94%,transparent); }
.topbar-inner{ min-height:68px; padding-top:0; padding-bottom:0; gap:30px; }
.brand{ align-self:center; padding-right:30px; border-right:1px solid var(--line); }
.brand-name{ font-size:1.32rem; font-weight:800; letter-spacing:-.015em; }
.brand-sub{ font-size:.68rem; letter-spacing:.22em; margin-top:4px; }
.topnav{ align-self:stretch; margin-left:0; gap:4px; }
.topnav-link{ position:relative; display:flex; align-items:center; padding:0 14px; border-radius:0; background:none; font-weight:600; font-size:.97rem; letter-spacing:.02em; color:var(--ink-2); transition:color .15s; }
.topnav-link::after{ content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--accent); transform:scaleX(0); transform-origin:left center; transition:transform .22s ease; }
.topnav-link:hover{ background:none; color:var(--ink); }
.topnav-link:hover::after{ transform:scaleX(.45); }
.topnav-link.is-active{ background:none; color:var(--accent-ink); }
.topnav-link.is-active::after{ transform:scaleX(1); }
.tools{ margin-left:auto; align-items:center; gap:10px; }
.tool{ border:1px solid var(--line); background:var(--card); width:42px; height:42px; transition:border-color .15s,color .15s,background .15s; }
.tool:hover{ border-color:var(--accent); background:var(--card); color:var(--accent-ink); }
.tool[data-search-open]{ display:flex; align-items:center; justify-content:flex-start; gap:10px; width:auto; min-width:240px; padding:0 18px 0 14px; border-radius:999px; color:var(--ink-3); font-size:.9rem; }
.tool[data-search-open]::after{ content:"搜索笔记或单词"; }
@media (max-width:1180px){ .tool[data-search-open]{ min-width:0; width:42px; padding:0; justify-content:center; } .tool[data-search-open]::after{ display:none; } .topbar-inner{ gap:20px; } .brand{ padding-right:20px; } }
@media (max-width:900px){ .topbar-inner{ min-height:0; padding-top:10px; padding-bottom:10px; } .brand{ border-right:0; padding-right:0; } .tool{ border:0; background:transparent; } }
@media (prefers-reduced-motion:reduce){ .topnav-link::after{ transition:none; } }

/* =====================================================================
   让站「活」起来的效果（assets/site/site.js 配合；克制：入口页活泼，笔记正文安静）
   ===================================================================== */
/* 页头：滚动后收紧、阴影更明显 */
.topbar{ transition:box-shadow .25s ease; }
.topbar.is-scrolled{ box-shadow:0 1px 0 var(--line),0 10px 24px -16px rgba(16,48,42,.4); }
@media (min-width:901px){ .topbar-inner{ transition:min-height .25s ease; } .topbar.is-scrolled .topbar-inner{ min-height:58px; } }

/* 进场：淡入上浮（只在入口页；用 backwards 填充，结束后悬停等样式照常生效） */
.rv{ opacity:0; }
.rv.rv-in{ opacity:1; animation:rv-up .6s cubic-bezier(.2,.7,.2,1) var(--rv-d,0s) backwards; }
@keyframes rv-up{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.num-tab{ font-variant-numeric:tabular-nums; }

/* 首页：时间问候 */
.greet{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; width:max-content; max-width:100%; margin:0 0 16px; padding:6px 16px 6px 7px; border-radius:999px; background:var(--card); border:1px solid var(--line); box-shadow:var(--card-shadow); font-size:.92rem; color:var(--ink-2); }
.greet-ic{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--gold-soft); color:var(--on-gold); }
.greet-ic svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; animation:greet-bob 7s ease-in-out infinite; }
@keyframes greet-bob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-1.5px) rotate(8deg); } }
.greet-ms{ font-family:var(--f-ms); font-weight:800; font-size:1.05rem; color:var(--accent-ink); }
html[data-mode="dark"] .greet-ic{ background:var(--gold-soft); }

/* 首页：背景光晕，极慢极淡 */
.hero-glow{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.hero-glow i{ position:absolute; width:46vw; max-width:620px; aspect-ratio:1; border-radius:50%; filter:blur(70px); opacity:.34; }
.hero-glow i:nth-child(1){ left:-8%; top:-34%; background:radial-gradient(circle,var(--accent) 0,transparent 68%); animation:glow-a 28s ease-in-out infinite alternate; }
.hero-glow i:nth-child(2){ right:-10%; bottom:-44%; background:radial-gradient(circle,var(--gold) 0,transparent 68%); animation:glow-b 34s ease-in-out infinite alternate; }
@keyframes glow-a{ to{ transform:translate(12vw,10%) scale(1.15); } }
@keyframes glow-b{ to{ transform:translate(-10vw,-12%) scale(1.1); } }
html[data-mode="dark"] .hero-glow i{ opacity:.2; }
@media (max-width:900px){ .hero-glow i{ filter:blur(48px); opacity:.26; } }

/* 首页：今日一词 */
.daily{ margin-top:26px; }
.daily-card{ display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1.2fr) auto; gap:14px 28px; align-items:center; padding:18px 24px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--card-shadow); border-left:6px solid var(--gold); }
.daily-k{ display:flex; flex-direction:column; gap:2px; }
.daily-k span{ font-weight:800; color:var(--ink); }
.daily-k small{ font-family:var(--f-ms); font-style:italic; color:var(--ink-3); }
.daily-main{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; }
.daily-ms{ font-family:var(--f-ms); font-weight:800; font-size:1.9rem; line-height:1.2; color:var(--accent-ink); display:inline-flex; align-items:center; gap:2px; }
.daily-pron{ font:500 .8rem/1 "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; letter-spacing:.08em; color:var(--chili); }
.daily-zh{ flex-basis:100%; color:var(--ink-2); }
.daily-eg{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.daily-eg>span{ font-family:var(--f-ms); font-weight:700; font-size:1.08rem; display:inline-flex; align-items:center; flex-wrap:wrap; }
.daily-eg em{ font-style:normal; color:var(--ink-3); font-size:.92rem; }
.daily-next{ border:1.5px solid var(--line); background:transparent; color:var(--ink-2); border-radius:999px; min-height:40px; padding:0 16px; font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; transition:border-color .15s,color .15s,background .15s; }
.daily-next:hover{ border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft); }
.daily-flip{ animation:daily-flip .45s ease; }
@keyframes daily-flip{ from{ opacity:.25; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (max-width:900px){ .daily-card{ grid-template-columns:1fr; gap:8px; padding:16px 18px; } .daily-next{ justify-self:start; margin-top:4px; } }

/* 收藏、读完：点一下弹一下 */
.fav-btn.fx-pop svg,.ab-done.fx-pop svg,.done-btn.fx-pop .done-box{ animation:fx-pop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes fx-pop{ 0%{ transform:scale(.6); } 60%{ transform:scale(1.35); } 100%{ transform:scale(1); } }

/* 测验：刚提交的那一题，答对亮一下、答错抖一下 */
.quiz-question.fx-play .quiz-option.is-correct{ animation:fx-ok .6s ease; }
.quiz-question.fx-play .quiz-option.is-wrong{ animation:fx-shake .45s ease; }
@keyframes fx-ok{ 0%{ transform:scale(.98); box-shadow:0 0 0 0 color-mix(in srgb,var(--go) 50%,transparent); } 55%{ transform:scale(1.015); box-shadow:0 0 0 9px transparent; } 100%{ transform:none; box-shadow:0 0 0 0 transparent; } }
@keyframes fx-shake{ 20%{ transform:translateX(-5px); } 40%{ transform:translateX(5px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(3px); } 100%{ transform:none; } }

/* 触屏没有悬停：按下时轻轻缩一下 */
@media (hover:none){ .level-card:active,.skill:active,.dash-card:active,.day:active,.daily-next:active{ transform:scale(.985); } }

@media (prefers-reduced-motion:reduce){
  .rv,.rv.rv-in{ opacity:1; animation:none; }
  .hero-glow i,.greet-ic svg,.daily-flip{ animation:none; }
  .fav-btn.fx-pop svg,.ab-done.fx-pop svg,.done-btn.fx-pop .done-box,.quiz-question.fx-play .quiz-option{ animation:none; }
  .topbar,.topbar-inner{ transition:none; }
}
@media print{ .rv{ opacity:1; } .hero-glow,.greet,.daily{ display:none; } }

/* =====================================================================
   14 天路线：把 14 个格子换成一条「学习路线」
   电脑：蛇形（第一行从左到右 1→7，转个弯，第二行从右到左 8→14），圆点是每一天，虚线读完变实线
   手机：竖向时间线。用 :has() 给走过的线段上色（不支持的旧浏览器只是看不到颜色变化）
   ===================================================================== */
.cal .day{ background:none; border:0; box-shadow:none; border-radius:0; min-height:0; padding:0; overflow:visible; align-items:center; text-align:center; gap:2px; }
.cal .day:hover{ transform:none; border-color:transparent; }
.cal .day-no{ position:relative; z-index:1; display:grid; place-items:center; width:68px; height:68px; border-radius:50%; background:var(--card); border:3px solid var(--line); box-shadow:var(--card-shadow); font-size:1.7rem; font-weight:800; color:var(--accent-ink); transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.cal .day-no small{ font-size:0; margin:0; }   /* 「第」「天」只给读屏软件，视觉上只留数字 */
.cal .day:hover .day-no{ transform:translateY(-3px) scale(1.06); border-color:var(--accent); }
.cal .day-skill{ margin-top:8px; }
.cal .day-title{ max-width:150px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cal .day-check{ z-index:2; top:-4px; right:auto; left:calc(50% + 15px); width:26px; height:26px; border:3px solid var(--paper); }
.cal .day.is-done{ background:none; }
.cal .day.is-done .day-no{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.cal .day.is-today{ background:none; border:0; box-shadow:none; }
.cal .day.is-today .day-no{ border-color:var(--gold); background:var(--gold-soft); color:var(--on-gold); animation:day-pulse 2.6s ease-out infinite; }
html[data-mode="dark"] .cal .day.is-today .day-no{ color:var(--gold); }
@keyframes day-pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 55%,transparent); } 70%{ box-shadow:0 0 0 14px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
.cal li:last-child .day:not(.is-done) .day-no{ border-color:var(--chili); background:var(--chili-soft); color:var(--chili); }
.cal li{ position:relative; }
.cal li::before{ position:absolute; z-index:2; padding:2px 12px; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.06em; white-space:nowrap; }
.cal li:first-child::before{ content:"出发"; background:var(--accent); color:var(--on-accent); }
.cal li:last-child::before{ content:"开口！"; background:var(--chili); color:#fff; }
.cal-legend i{ border-radius:50%; width:16px; height:16px; }
.cal-legend .k-done{ background:var(--accent); border-color:var(--accent); }
.cal-legend .k-today{ border:3px solid var(--gold); background:var(--gold-soft); }

@media (min-width:901px){
  .cal{ grid-template-columns:repeat(7,1fr); gap:0; row-gap:58px; padding:30px 0 6px; }
  .cal li:nth-child(n+8){ grid-row:2; }
  .cal li:nth-child(8){ grid-column:7; } .cal li:nth-child(9){ grid-column:6; } .cal li:nth-child(10){ grid-column:5; }
  .cal li:nth-child(11){ grid-column:4; } .cal li:nth-child(12){ grid-column:3; } .cal li:nth-child(13){ grid-column:2; } .cal li:nth-child(14){ grid-column:1; }
  .cal li::before{ top:-30px; left:50%; transform:translateX(-50%); }
  /* 连接线：从本格圆点中心画到下一格圆点中心 */
  .cal li:not(:last-child)::after{ content:""; position:absolute; top:32px; left:50%; width:100%; height:4px; border-radius:4px; z-index:0;
    background:repeating-linear-gradient(90deg,var(--line) 0 9px,transparent 9px 16px); }
  .cal li:nth-child(n+8):not(:last-child)::after{ left:auto; right:50%; }
  /* 转弯：从第 7 天圆点向右伸出一小段，竖着绕到第 8 天，再横着回到第 8 天圆点（绕开标题文字） */
  .cal li:nth-child(7)::before,.cal li:nth-child(8)::before{ content:""; top:32px; left:50%; transform:none; width:82px; height:4px; padding:0; border-radius:4px; z-index:0;
    background:repeating-linear-gradient(90deg,var(--line) 0 9px,transparent 9px 16px); }
  .cal li:nth-child(7)::after{ left:calc(50% + 80px); top:32px; width:4px; height:calc(100% + 62px); background:repeating-linear-gradient(180deg,var(--line) 0 9px,transparent 9px 16px); }
  .cal li:has(> .day.is-done):not(:last-child)::after{ background:var(--accent); }
  .cal li:nth-child(7):has(> .day.is-done)::before,.cal li:nth-child(8):has(> .day.is-done)::before{ background:var(--accent); }
}
@media (max-width:900px){
  .cal{ display:grid; grid-template-columns:1fr; gap:0; overflow:visible; margin:0; padding:34px 0 0; scroll-snap-type:none; }
  .cal li{ width:auto; padding-bottom:20px; }
  .cal li:last-child{ padding-bottom:0; }
  .cal .day{ height:auto; display:grid; grid-template-columns:56px 1fr; column-gap:16px; row-gap:0; align-items:center; text-align:left; }
  .cal .day-no{ grid-row:1 / span 2; width:56px; height:56px; font-size:1.45rem; }
  .cal .day-skill{ align-self:end; margin:0; }
  .cal .day-title{ align-self:start; max-width:none; margin:0; }
  .cal .day-check{ left:36px; top:-6px; width:24px; height:24px; }
  .cal li::before{ top:16px; right:0; left:auto; }
  .cal li:not(:last-child)::after{ content:""; position:absolute; left:26px; top:58px; width:4px; height:calc(100% - 58px + 2px); border-radius:4px; z-index:0;
    background:repeating-linear-gradient(180deg,var(--line) 0 8px,transparent 8px 14px); }
  .cal li:has(> .day.is-done):not(:last-child)::after{ background:var(--accent); }
}
@media (prefers-reduced-motion:reduce){ .cal .day.is-today .day-no{ animation:none; } .cal .day-no{ transition:none; } }

/* 链接：细下划线 + 悬停时淡绿色底，外链带 ↗ */
.note-body a:not(.say):not(.btn):not(.mini-btn),.page-lead a,.hero-lead a,.group-note a,.faq p a,.steps li a,.soft-note a,.gloss-item a,.overview a,.callout a{
  color:var(--accent-ink); text-decoration:none; font-weight:600; padding:0 .12em; margin:0 -.12em; border-radius:4px;
  background:linear-gradient(var(--link-line),var(--link-line)) 0 100%/100% 1.5px no-repeat;
  transition:background-size .2s ease,color .2s ease,background-color .2s ease; }
.note-body a:not(.say):not(.btn):not(.mini-btn):hover,.page-lead a:hover,.hero-lead a:hover,.group-note a:hover,.faq p a:hover,.steps li a:hover,.soft-note a:hover,.gloss-item a:hover,.overview a:hover,.callout a:hover{
  color:var(--accent-ink); background-image:linear-gradient(var(--accent-soft),var(--accent-soft)); background-size:100% 100%; }
.note-body a[href^="http"]:not(.say):not(.btn):not(.mini-btn)::after{ content:"↗"; display:inline-block; margin-left:.25em; font-size:.8em; font-weight:700; opacity:.65; transform:translateY(-.05em); transition:transform .2s,opacity .2s; }
.note-body a[href^="http"]:not(.say):not(.btn):not(.mini-btn):hover::after{ opacity:1; transform:translate(.1em,-.15em); }
@media (prefers-reduced-motion:reduce){ .note-body a,.page-lead a,.hero-lead a,.group-note a,.faq p a,.steps li a,.soft-note a,.gloss-item a,.overview a,.callout a,.topnav-link,.note-body a::after{ transition:none; } }

/* 页脚：深绿底 + 竹笋纹上沿 + 品牌 / 三栏链接 / 版权署名 */
.site-foot-full{ position:relative; margin-top:88px; padding:0; background:var(--foot-bg); color:var(--foot-ink); border-top:0; font-size:.95rem; }
.site-foot-full::before{ content:""; position:absolute; left:0; right:0; top:-15px; height:16px; background:var(--foot-bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M0 16 8 0l8 16zM16 16l8-16 8 16z' fill='%23000'/%3E%3C/svg%3E") repeat-x left bottom/32px 16px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M0 16 8 0l8 16zM16 16l8-16 8 16z' fill='%23000'/%3E%3C/svg%3E") repeat-x left bottom/32px 16px; }
.site-foot-full .wrap{ display:block; }
.site-foot-full .foot-top{ display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:36px 56px; padding:60px 0 44px; }
.site-foot-full .foot-brand strong{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--f-head); font-size:1.7rem; font-weight:800; letter-spacing:-.01em; color:#fff; }
.site-foot-full .foot-brand strong::before{ content:""; flex:none; width:38px; height:36px;   /* 和页头同一个 logo（浅色版，配深色页脚） */
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 104'%3E%3Cpath d='M12 0h84a12 12 0 0 1 12 12v60a12 12 0 0 1-12 12H52L28 104V84h-16A12 12 0 0 1 0 72V12A12 12 0 0 1 12 0z' fill='%234FC3A8'/%3E%3Cpath d='M54 14 74 66H34z' fill='%230D2B25'/%3E%3Cpath d='M54 34 64 66H44z' fill='%23E4572E'/%3E%3C/svg%3E") center/contain no-repeat; }.site-foot-full .foot-brand p{ margin:16px 0 0; max-width:30em; font-size:.95rem; line-height:1.9; color:var(--foot-mute); }
.site-foot-full .foot-col h2{ margin:0 0 14px; font-family:var(--f-body); font-size:.76rem; font-weight:700; letter-spacing:.22em; color:var(--gold); }
.site-foot-full .foot-col ul{ list-style:none; margin:0; padding:0; }
.site-foot-full .foot-col a{ display:inline-block; padding:6px 0; color:var(--foot-ink); text-decoration:none; background:none; font-weight:400; transition:color .15s,transform .15s; }
.site-foot-full .foot-col a:hover{ color:var(--gold); transform:translateX(3px); }
.site-foot-full .foot-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding:20px 0 30px; border-top:1px solid var(--foot-line); font-size:.86rem; color:var(--foot-mute); }
.site-foot-full .foot-credit{ margin:0; padding:0 0 1px; color:var(--foot-ink); font-weight:700; text-decoration:none; background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 2px no-repeat; }
.site-foot-full .foot-credit:hover{ color:var(--gold); }
@media (max-width:900px){
  .site-foot-full{ margin-top:64px; padding-bottom:calc(var(--bar-h) + var(--safe-b)); }
  .site-foot-full .foot-top{ grid-template-columns:1fr 1fr; gap:30px 24px; padding:44px 0 30px; }
  .site-foot-full .foot-brand{ grid-column:1 / -1; }
  .site-foot-full .foot-bottom span:last-child{ display:block; }
}
@media (max-width:480px){ .site-foot-full .foot-top{ grid-template-columns:1fr; } }

/* =====================================================================
   图解卡（笔记里的 ::: figure 文件名 说明；文件在 content/figures/）
   风格取自 warehouse-ai-animation：深色「舞台」+ 点阵底纹 + 胶囊标签 + 等宽序号 + 依次弹出。
   舞台在亮暗两种主题下都是深色（像视频画面）；动画只在 JS 把图标成 .fig-armed 之后才有，没有 JS 就是完整静态图。
   ===================================================================== */
figure.fig{ margin:1.8rem 0; }
figure.fig figcaption{ margin-top:10px; font-size:.88rem; color:var(--ink-3); text-align:center; }
.jf{ --st-bg:#10201C; --st-panel:#183029; --st-line:#2C4A42; --st-ink:#EAF3EF; --st-muted:#93ADA4; --mint:#4FC3A8; --gold:#F2B632; --chili:#FF7A55; --sky:#7EB6FF;
  position:relative; padding:18px 22px 22px; border-radius:18px; color:var(--st-ink); background:var(--st-bg);
  background-image:radial-gradient(circle at 1px 1px,rgba(234,243,239,.07) 1px,transparent 0); background-size:22px 22px;
  box-shadow:0 12px 34px rgba(8,24,20,.28); overflow:hidden; line-height:1.5; }
.jf *{ box-sizing:border-box; }
.jf-head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:16px; }
.jf-no{ font:500 .78rem/1 "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; color:var(--st-muted); border:1px solid var(--st-line); border-radius:5px; padding:4px 7px; }
.jf-title{ margin:0; font-family:var(--f-head); font-weight:800; font-size:1.2rem; color:var(--st-ink); }
.jf-title small{ font-family:var(--f-body); font-weight:400; font-size:.78em; color:var(--st-muted); margin-left:.5em; }
.jf-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
.jf-bd{ --c:var(--mint); display:inline-flex; align-items:center; gap:.4em; padding:3px 12px 3px 9px; border-radius:999px; font-size:.78rem; font-weight:700; color:var(--c);
  background:color-mix(in srgb,var(--c) 15%,transparent); border:1px solid color-mix(in srgb,var(--c) 45%,transparent); white-space:nowrap; }
.jf-bd::before{ content:""; width:.5em; height:.5em; border-radius:50%; background:var(--c); }
.jf-bd.gold{ --c:var(--gold); } .jf-bd.chili{ --c:var(--chili); } .jf-bd.sky{ --c:var(--sky); }
.jf-ms{ font-family:var(--f-ms); font-weight:700; }
.jf-pron{ font:500 .74rem/1.3 "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; letter-spacing:.1em; color:var(--st-muted); }
.jf-zh{ color:var(--st-muted); font-size:.92rem; }
.jf .say{ background:rgba(79,195,168,.2); color:var(--mint); }
.jf-note{ margin-top:14px; padding:9px 14px; border-radius:10px; background:var(--st-panel); border:1px solid var(--st-line); border-left:3px solid var(--gold); font-size:.9rem; color:var(--st-ink); }
.jf-note small{ display:block; color:var(--st-muted); font-size:.85em; }
.jf-replay{ position:absolute; right:14px; bottom:12px; border:1px solid var(--st-line); background:transparent; color:var(--st-muted); border-radius:999px; padding:3px 12px; font-size:.78rem; cursor:pointer; }
.jf-replay:hover{ color:var(--st-ink); border-color:var(--st-muted); }
.jf-pad{ padding-bottom:54px; }

/* 对话泡泡 */
.jf-chat{ display:flex; flex-direction:column; gap:12px; }
.jf-row{ display:flex; align-items:flex-end; gap:10px; }
.jf-row.r{ flex-direction:row-reverse; }
.jf-av{ flex:none; width:46px; height:46px; }
.jf-bub{ max-width:min(520px,78%); padding:12px 16px; border-radius:18px; background:var(--st-panel); border:1px solid var(--st-line); border-bottom-left-radius:5px; }
.jf-row.r .jf-bub{ background:var(--mint); border-color:var(--mint); color:#06201A; border-bottom-left-radius:18px; border-bottom-right-radius:5px; }
.jf-row.r .jf-pron,.jf-row.r .jf-zh{ color:rgba(6,32,26,.72); }
.jf-row.r .say{ background:rgba(6,32,26,.15); color:#06201A; }
.jf-bub .jf-ms{ font-size:1.25rem; line-height:1.4; }

/* 一天四段 */
.jf-day{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.jf-slot{ --c:var(--gold); padding:14px 12px 14px; border-radius:14px; background:var(--st-panel); border:1px solid var(--st-line); border-top:4px solid var(--c); text-align:center; }
.jf-slot svg{ width:64px; height:64px; display:block; margin:0 auto 6px; }
.jf-slot .jf-ms{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 4px; font-size:1.15rem; line-height:1.3; margin-bottom:4px; }
.jf-slot .say,.jf-sw .say{ margin-left:0; }
.jf-sw .jf-ms{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 4px; }
.jf-slot .jf-t{ display:inline-block; margin:6px 0 4px; font:500 .8rem/1 "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; color:var(--c); background:color-mix(in srgb,var(--c) 14%,transparent); padding:4px 9px; border-radius:6px; }
.jf-bar{ position:relative; height:10px; margin:16px 4px 0; border-radius:99px; background:linear-gradient(90deg,#27407A 0%,#F5B94C 22%,#FFD84D 50%,#FF8A4C 72%,#27407A 88%,#16254A 100%); }
.jf-bar i{ position:absolute; top:-5px; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--st-bg); box-shadow:0 0 0 2px var(--gold); left:0; }
.jf-ticks{ display:flex; justify-content:space-between; margin:6px 4px 0; font:500 .72rem "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; color:var(--st-muted); }

/* 价格单 + 听音 */
.jf-price{ display:grid; grid-template-columns:minmax(0,230px) minmax(0,1fr); gap:20px; align-items:center; }
.jf-paper{ background:#F5F1E7; color:#29313A; border-radius:6px; padding:14px 16px; box-shadow:0 8px 20px rgba(0,0,0,.3); transform:rotate(-1.5deg); font-size:.9rem; }
.jf-paper b{ font:700 .95rem "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; }
.jf-paper .big{ display:block; margin:6px 0 2px; font:800 2rem/1.1 "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; color:#B4341A; }
.jf-wave{ display:flex; align-items:center; gap:3px; height:34px; margin-bottom:10px; }
.jf-wave i{ display:block; width:4px; height:var(--h); border-radius:2px; background:var(--mint); opacity:.9; }
.jf-eq{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0; }
.jf-chip{ padding:6px 12px; border-radius:10px; background:var(--st-panel); border:1px solid var(--st-line); font-weight:700; }
.jf-chip .jf-ms{ font-size:1.05rem; }
.jf-chip small{ display:block; font:500 .72rem "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; color:var(--st-muted); }
.jf-op{ font:500 1.3rem "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; color:var(--st-muted); }
.jf-res{ padding:6px 14px; border-radius:10px; background:var(--gold); color:#3A2A00; font:800 1.2rem "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; }
.jf-hl{ background:rgba(242,182,50,.3); color:#FFE9A8; border-radius:4px; padding:0 4px; }

/* 词序：两个词牌互换位置 */
.jf-swap{ position:relative; height:116px; max-width:420px; margin:0 auto 6px; }
.jf-card{ position:absolute; top:0; width:calc(50% - 8px); padding:10px 8px 12px; border-radius:14px; text-align:center; background:var(--st-panel); border:1px solid var(--st-line); }
.jf-card .jf-ms{ display:block; font-size:1.5rem; line-height:1.3; }
.jf-card.a{ right:0; border-top:4px solid var(--gold); } .jf-card.b{ left:0; border-top:4px solid var(--mint); }   /* 没有 JS 时直接显示换好之后的马来语顺序 */
.jf-card.a .jf-ms{ color:var(--gold); } .jf-card.b .jf-ms{ color:var(--mint); }
.jf-flow{ display:flex; align-items:center; justify-content:center; gap:10px; margin:2px 0 14px; font-size:.85rem; color:var(--st-muted); }
.jf-flow b{ color:var(--st-ink); }
.jf-grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.jf-ex{ padding:10px 14px; border-radius:12px; background:var(--st-panel); border:1px solid var(--st-line); }
.jf-ex .jf-ms{ font-size:1.1rem; } .jf-ex .jf-ms em{ font-style:normal; color:var(--mint); }

/* 颜色色卡 */
.jf-swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:12px; }
.jf-sw{ padding:12px 8px 10px; border-radius:14px; background:var(--st-panel); border:1px solid var(--st-line); text-align:center; }
.jf-dot{ display:block; width:52px; height:52px; margin:0 auto 8px; border-radius:50%; background:var(--c); box-shadow:inset 0 -6px 0 rgba(0,0,0,.16),0 6px 14px rgba(0,0,0,.35); border:2px solid rgba(255,255,255,.18); }
.jf-sw .jf-ms{ display:block; font-size:1.05rem; line-height:1.3; }

/* 方位罗盘（SVG） */
.jf-compass{ display:block; width:100%; max-width:560px; height:auto; margin:0 auto; }
.jf-compass text{ font-family:var(--f-ms); }
/* 数字积木 */
.jf-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:10px; }
.jf-tile{ padding:10px 6px 10px; border-radius:12px; text-align:center; background:var(--st-panel); border:1px solid var(--st-line); border-bottom:4px solid var(--mint); }
.jf-tile b{ display:block; font:800 1.7rem/1.1 var(--f-head); color:var(--gold); }
.jf-tile .jf-ms{ display:block; margin-top:2px; font-size:.95rem; }
.jf-build{ margin-top:16px; display:grid; gap:4px; }
.jf-sayline{ margin-left:6px; font-size:1.1rem; color:var(--st-ink); }
/* 疑问词 */
.jf-qgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.jf-q{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 14px; border-radius:14px; background:var(--st-panel); border:1px solid var(--st-line); }
.jf-ic{ width:34px; height:34px; margin-bottom:4px; fill:none; stroke:var(--mint); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.jf-q .jf-ms{ font-size:1.15rem; line-height:1.3; }

/* 星期 / 时间 / 月份 */
.jf-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.jf-wd{ padding:10px 4px; border-radius:12px; text-align:center; background:var(--st-panel); border:1px solid var(--st-line); border-top:4px solid var(--mint); }
.jf-wd.we{ border-top-color:var(--gold); }
.jf-wd b{ display:block; font:700 1rem/1.3 var(--f-ms); }
.jf-wd span{ display:block; font-size:.78rem; color:var(--st-muted); }
.jf-cap{ margin:12px 0 0; font-size:.92rem; color:var(--st-muted); }
.jf-cap b{ color:var(--gold); }
.jf-time{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:16px; }
.jf-tn{ padding:10px 4px; border-radius:12px; text-align:center; background:transparent; border:1px dashed var(--st-line); }
.jf-tn b{ display:block; font-size:1rem; line-height:1.3; }
.jf-tn span{ display:block; font-size:.78rem; color:var(--st-muted); }
.jf-tn.now{ background:var(--gold); border:1px solid var(--gold); color:#3A2A00; }
.jf-tn.now span{ color:#5A4310; }
.jf-months{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; margin-top:16px; }
.jf-mo{ padding:6px 10px; border-radius:10px; background:var(--st-panel); border:1px solid var(--st-line); font:600 .92rem var(--f-ms); }
.jf-mo i{ margin-right:6px; font:500 .72rem "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; font-style:normal; color:var(--st-muted); }
/* 示意图（脸、身体）和手指 */
.jf-svg{ display:block; width:100%; max-width:560px; height:auto; margin:0 auto; }
.jf-svg text{ font-family:var(--f-body); }
.jf-fingers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin-top:14px; }
.jf-fg{ padding:8px 12px; border-radius:12px; background:var(--st-panel); border:1px solid var(--st-line); }
.jf-fg b{ display:block; font-size:.98rem; }
.jf-fg span{ font-size:.78rem; color:var(--st-muted); }
.jf-eqn{ display:block; margin-top:2px; font:500 .72rem "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; color:var(--gold); }
@media (max-width:560px){ .jf-week{ grid-template-columns:repeat(4,1fr); } .jf-time{ grid-template-columns:repeat(3,1fr); } }

/* 语法图示：时间轴、时钟、成对代词、量词例句、柱状比较 */
.jf-axis{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:.85rem; color:var(--st-muted); }
.jf-axis i{ flex:1; height:2px; position:relative; background:linear-gradient(90deg,var(--st-line),var(--mint)); }
.jf-axis i::after{ content:""; position:absolute; right:-1px; top:50%; border:5px solid transparent; border-left:8px solid var(--mint); transform:translateY(-50%); }
.jf-g3{ grid-template-columns:repeat(3,1fr); }
.jf-q-wide{ margin-top:10px; }
.jf-big{ font:800 1.8rem/1.2 var(--f-head); }
.jf-mono{ font:500 1rem "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; color:var(--gold); }
.jf-eg{ margin-top:2px; font:500 .78rem "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; color:var(--gold); }
.jf-clock{ width:84px; height:84px; margin-bottom:4px; }
.jf-clock circle:first-child{ fill:#22403A; stroke:#4FC3A8; stroke-width:2; }
.jf-clock .tk{ fill:none; stroke:#93ADA4; stroke-width:2; stroke-linecap:round; }
.jf-clock .hh{ fill:none; stroke:#EAF3EF; stroke-width:4; stroke-linecap:round; }
.jf-clock .mm{ fill:none; stroke:#F2B632; stroke-width:3; stroke-linecap:round; }
.jf-clock .ct{ fill:#FF7A55; }
.jf-pairs,.jf-we{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.jf-we{ margin-top:12px; }
.jf-pair{ padding:14px 16px; border-radius:14px; background:var(--st-panel); border:1px solid var(--st-line); }
.jf-tag{ --c:var(--mint); display:inline-block; margin-bottom:8px; padding:2px 10px; border-radius:999px; font-size:.78rem; font-weight:700; color:var(--c); background:color-mix(in srgb,var(--c) 15%,transparent); border:1px solid color-mix(in srgb,var(--c) 45%,transparent); }
.jf-pr{ display:flex; align-items:center; gap:12px; margin-bottom:4px; font-size:1.55rem; }
.jf-wecard{ display:grid; grid-template-columns:120px 1fr; gap:0 12px; align-items:center; padding:10px 14px; border-radius:14px; background:var(--st-panel); border:1px solid var(--st-line); }
.jf-wecard svg{ grid-row:span 2; width:120px; height:auto; }
.jf-wecard b{ font-size:1.3rem; align-self:end; }
.jf-wecard u{ text-decoration:none; color:var(--gold); font-weight:700; }
.jf-bars{ display:flex; align-items:flex-end; gap:16px; height:230px; padding:0 6px; }
.jf-bc{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; }
.jf-bc .jf-ms{ font-size:.9rem; text-align:center; line-height:1.3; }
.jf-bar{ display:block; width:60%; max-width:84px; height:calc(var(--h) * .72); background:var(--mint); border-radius:8px 8px 0 0; transform-origin:bottom; }
.jf-bar.b2{ background:var(--gold); } .jf-bar.b3{ background:var(--chili); }
.jf-who{ margin-top:2px; font-weight:700; }
.fig-armed .jf-bar{ transform:scaleY(0); }
.fig-armed.is-in .jf-bar{ animation:jf-grow .7s cubic-bezier(.2,.8,.2,1) var(--d,0s) forwards; }
@keyframes jf-grow{ to{ transform:scaleY(1); } }
.jf-bars+.jf-grid3{ margin-top:16px; }
@media (max-width:640px){ .jf-g3,.jf-pairs,.jf-we{ grid-template-columns:1fr; } .jf-bars{ height:200px; gap:8px; } }

/* 听力专用图：广播信息、语音留言、服药说明、新闻结构、访谈填充词 */
.jf-rows{ display:grid; gap:12px; }
.jf-bx{ padding:14px 16px; border-radius:14px; background:var(--st-panel); border:1px solid var(--st-line); }
.jf-bx h5{ margin:0 0 10px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:1rem; font-family:var(--f-body); }
.jf-keys{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.jf-key{ --c:var(--mint); padding:8px 10px; border-radius:10px; background:color-mix(in srgb,var(--c) 10%,transparent); border:1px solid color-mix(in srgb,var(--c) 40%,transparent); }
.jf-key small{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--c); }
.jf-key b{ display:block; font:700 .95rem/1.35 var(--f-ms); }
.jf-cols2,.jf-cols3{ display:grid; gap:12px; }
.jf-cols2{ grid-template-columns:1fr 1fr; } .jf-cols3{ grid-template-columns:repeat(3,1fr); }
.jf-cols3 .jf-bx{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.jf-cols3 .jf-ic{ margin-bottom:6px; }
.jf-cols3 .jf-ms{ font-size:1.15rem; }
.jf-vn{ display:flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; border-radius:999px; background:var(--mint); color:#06201A; }
.jf-vn .play{ flex:none; width:30px; height:30px; border-radius:50%; background:#06201A; display:grid; place-items:center; }
.jf-vn .play svg{ width:12px; height:12px; }
.jf-vn .jf-wave{ flex:1; margin:0; height:26px; gap:3px; }
.jf-vn .jf-wave i{ flex:1; max-width:5px; background:#06201A; opacity:.85; }
.jf-vn time{ font:500 .8rem "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; }
.jf-lines2{ display:grid; gap:6px; }
.jf-li2{ display:grid; grid-template-columns:62px 1fr; gap:8px; align-items:baseline; font-size:.92rem; }
.jf-li2 small{ font-size:.74rem; font-weight:700; letter-spacing:.06em; color:var(--gold); }
.jf-li2 u{ text-decoration:none; color:var(--gold); font-weight:700; }
.jf-dose{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.jf-dose span{ padding:4px 10px; border-radius:8px; background:rgba(79,195,168,.12); border:1px solid rgba(79,195,168,.4); font-weight:700; font-size:.88rem; }
.jf-dose small{ display:block; font-size:.68rem; font-weight:500; color:var(--st-muted); }
.jf-warn{ margin:10px 0 0; padding:6px 10px; border-radius:8px; background:rgba(255,122,85,.13); border:1px solid rgba(255,122,85,.45); font-size:.82rem; color:#FFD2C4; }
.jf-news{ display:grid; gap:10px; }
.jf-ns{ display:grid; grid-template-columns:84px 1fr; gap:12px; padding:12px 14px; border-radius:14px; background:var(--st-panel); border:1px solid var(--st-line); border-left:4px solid var(--c,var(--mint)); }
.jf-ns p{ margin:0; }
.jf-ns .jf-ms{ font-size:1.02rem; line-height:1.5; }
.jf-stag{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-weight:700; color:var(--c); }
.jf-stag b{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--c); color:#10201C; font-size:.85rem; }
.jf-sent{ margin:0 0 8px; font-size:1.15rem; line-height:1.7; }
.jf-fill{ opacity:.4; text-decoration:line-through; }
.jf-pre{ color:var(--st-muted); } .jf-but{ color:var(--gold); font-weight:700; }
.jf-flowrow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.jf-stance{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.jf-st{ --c:var(--mint); padding:10px 12px; border-radius:12px; border:1px solid color-mix(in srgb,var(--c) 45%,transparent); background:color-mix(in srgb,var(--c) 10%,transparent); }
.jf-st small{ display:block; font-weight:700; color:var(--c); }
.jf-st .jf-ms{ font-size:.92rem; }
.fig-armed .jf-fill{ opacity:1; text-decoration:none; }
.fig-armed.is-in .jf-fill{ animation:jf-fillout .6s ease var(--d,0s) forwards; }
@keyframes jf-fillout{ to{ opacity:.4; text-decoration:line-through; } }
@media (max-width:760px){ .jf-keys{ grid-template-columns:1fr 1fr; } .jf-cols2,.jf-cols3,.jf-stance{ grid-template-columns:1fr; } .jf-ns{ grid-template-columns:1fr; gap:6px; } .jf-stag{ flex-direction:row; align-items:center; } }

/* 文件标注图（make_docs.py 生成）：左边一张纸，右边编号要点 */
.jf-docwrap{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:16px; align-items:start; }
.jf pre.jf-doc{ margin:0; padding:16px 18px; background:#F5F1E7; color:#29313A; border:0; border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,.3); font:.74rem/1.75 "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; max-height:560px; overflow:auto; }
.jf .code-copy{ display:none; }
.jf-doc mark{ position:relative; margin:0 1px; padding:0 3px 0 18px; border-radius:3px; background:#F6E2A8; color:#4A3300; }
.jf-doc mark::before{ content:attr(data-n); position:absolute; left:2px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; background:#B4341A; color:#fff; font:700 .62rem/14px "IBM Plex Mono",monospace; text-align:center; }
.fig-armed .jf-doc mark{ background:transparent; }
.fig-armed.is-in .jf-doc mark{ animation:jf-markin .4s ease var(--d,0s) forwards; }
@keyframes jf-markin{ to{ background:#F6E2A8; } }
.jf-ann,.jf ol.jf-ann{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.jf ol.jf-ann li{ margin:0; }
.jf ol.jf-ann li::marker{ content:""; }
.jf-cols2 .jf-ann{ margin-top:10px; }
.jf-ann li{ display:grid; grid-template-columns:26px 1fr; gap:10px; padding:8px 12px; border-radius:12px; background:var(--st-panel); border:1px solid var(--st-line); }
.jf-ann li i{ width:22px; height:22px; margin-top:2px; border-radius:50%; background:#B4341A; color:#fff; font:700 .72rem/22px "IBM Plex Mono",monospace; font-style:normal; text-align:center; }
.jf-ann b{ display:block; font:700 .92rem/1.4 var(--f-ms); word-break:break-word; }
.jf-ann span{ display:block; font-size:.82rem; line-height:1.55; color:var(--st-muted); }
@media (max-width:760px){ .jf-docwrap{ grid-template-columns:1fr; } .jf-doc{ max-height:420px; } }

/* 后缀 / 词缀公式的小件 */
.jf-sf{ --c:var(--mint); border-color:var(--c); background:color-mix(in srgb,var(--c) 14%,transparent); }
.jf-sf .jf-ms{ color:var(--c); font-size:1.15rem; }
.jf-rs{ border-color:var(--gold); background:rgba(242,182,50,.12); }
.jf-rs .jf-ms{ font-size:1.1rem; }

/* 词卡墙 / 例句墙（make_walls.py 生成） */
.jf-wgroup + .jf-wgroup{ margin-top:16px; }
.jf-gt{ display:inline-block; margin:0 0 10px; padding:3px 12px; border-radius:999px; font:700 .8rem/1.5 var(--f-body); letter-spacing:.04em; color:var(--gold); background:rgba(242,182,50,.12); border:1px solid rgba(242,182,50,.4); }
.jf-wgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.jf-wc{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px; background:var(--st-panel); border:1px solid var(--st-line); border-bottom:3px solid var(--mint); }
.jf-wc .jf-ms{ font-size:1.05rem; line-height:1.35; }
.jf-sxlist{ display:grid; gap:10px; }
.jf-sx{ display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start; padding:10px 14px; border-radius:12px; background:var(--st-panel); border:1px solid var(--st-line); }
.jf-sx>i{ width:24px; height:24px; margin-top:2px; border-radius:50%; background:var(--gold); color:#3A2A00; font:700 .78rem/24px "IBM Plex Mono",monospace; font-style:normal; text-align:center; }
.jf-sx .jf-ms{ font-size:1.08rem; line-height:1.5; }
.jf-sx .jf-ms em{ font-style:normal; color:var(--mint); }

/* 动画：只在 JS 就绪（.fig-armed）之后才先藏起来，进入视野（.is-in）后依次出现 */
.fig-armed .jf-fade{ opacity:0; }
.fig-armed.is-in .jf-fade{ animation:jf-fadein .55s ease var(--d,0s) both; }
@keyframes jf-fadein{ from{ opacity:0; } to{ opacity:1; } }
.fig-armed .jf-pop{ opacity:0; }
.fig-armed.is-in .jf-pop{ animation:jf-pop .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both; }
@keyframes jf-pop{ from{ opacity:0; transform:translateY(.7em) scale(.96); } to{ opacity:1; transform:none; } }
.fig-armed .jf-hl.jf-hl-anim{ background:transparent; color:inherit; }
.fig-armed.is-in .jf-hl.jf-hl-anim{ animation:jf-hl .4s var(--d,0s) forwards; }
@keyframes jf-hl{ to{ background:rgba(242,182,50,.3); color:#FFE9A8; } }
.fig-armed.is-in .jf-wave i{ animation:jf-wave 1s ease-in-out var(--d,0s) 3 alternate both; }
@keyframes jf-wave{ from{ transform:scaleY(.25); } to{ transform:scaleY(1); } }
.fig-armed.is-in .jf-bar i{ animation:jf-run 4s ease-in-out .3s both; }
@keyframes jf-run{ from{ left:0; } to{ left:calc(100% - 20px); } }
.fig-armed .jf-card.a{ left:0; right:auto; } .fig-armed .jf-card.b{ right:0; left:auto; }
.fig-armed.is-in .jf-card.a{ animation:jf-a 1.2s cubic-bezier(.6,0,.2,1) 1.2s both; }
.fig-armed.is-in .jf-card.b{ animation:jf-b 1.2s cubic-bezier(.6,0,.2,1) 1.2s both; }
@keyframes jf-a{ from{ transform:translateX(0); } to{ transform:translateX(calc(100% + 16px)); } }
@keyframes jf-b{ from{ transform:translateX(0); } to{ transform:translateX(calc(-100% - 16px)); } }
.jf-flow .stack{ display:grid; justify-items:center; }
.jf-flow .stack>*{ grid-area:1/1; }
.jf-swap-lbl-a{ display:none; }
.fig-armed .jf-swap-lbl-a{ display:block; }
.fig-armed .jf-swap-lbl-b{ opacity:0; }
.fig-armed.is-in .jf-swap-lbl-a{ animation:jf-out .3s 1.1s forwards; }
.fig-armed.is-in .jf-swap-lbl-b{ animation:jf-pop .5s 2.3s both; }
@keyframes jf-out{ to{ opacity:0; } }

@media (max-width:760px){
  .jf{ padding:14px 14px 18px; border-radius:16px; }
  .jf.jf-pad{ padding-bottom:58px; }   /* 给右下角的「重播」按钮留位置，别压住内容 */
  .jf-badges{ margin-left:0; }
  .jf-day{ grid-template-columns:repeat(2,1fr); }
  .jf-price{ grid-template-columns:1fr; }
  .jf-paper{ transform:none; }
  .jf-bub{ max-width:84%; }
}
@media (prefers-reduced-motion:reduce){
  .fig-armed .jf-pop{ opacity:1; animation:none !important; }
  .fig-armed .jf-fade{ opacity:1; animation:none !important; }
  .fig-armed .jf-bar{ transform:none; animation:none !important; }
  .fig-armed .jf-fill{ opacity:.4; text-decoration:line-through; animation:none !important; }
  .fig-armed.is-in .jf-pop,.fig-armed.is-in .jf-wave i,.fig-armed.is-in .jf-bar i,.fig-armed.is-in .jf-card,.fig-armed.is-in .jf-swap-lbl-a,.fig-armed.is-in .jf-swap-lbl-b,.fig-armed.is-in .jf-hl.jf-hl-anim{ animation-duration:1ms !important; animation-delay:0s !important; }
}