/* ==========================================================================
   动效词汇表 · styles.css
   视觉方向：动效实验台（instrument panel）——深色仪表底、发丝网格、
   信号黄绿做“正在播放”的指示，等宽字体标注参数。
   ========================================================================== */

:root, [data-theme=paper] {
  /* 纸感工作台（light 为默认）：暖纸底、墨色正文、朱砂强调——编辑部质感 */
  --bg: #FAF7F1;
  --bg-2: #F3EDE2;
  --panel: #FFFDF9;
  --panel-2: #F5F0E6;
  --line: #E3DAC9;
  --line-soft: #EDE6D8;
  --ink: #211C15;
  --ink-2: #514940;
  --muted: #786F61;   /* 原 #8C8271 在纸感底上只有 3.54:1，10.5-13px 的次要文字不达 AA */
  --accent: #D9480F;
  --accent-strong: #C8420E;   /* 纸感底上 12-13.5px 的强调色文字：4.02 -> 4.63 */
  --accent-ink: #FFF8F3;
  --accent-2: #0B7285;
  --accent-3: #C2255C;
  --ok: #2B8A3E;
  --bad: #C92A2A;
  --secondary-container: #F9EADF;
  --grid-line: #ECE5D5;
  --obj-a: #E8590C;
  --obj-b: #FFC998;
  /* 间距 / 圆角 / 投影 / 动效曲线：一套令牌，别处只引用不写字面量 */
  --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 104px;
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-1: .16s; --dur-2: .28s; --dur-3: .45s;
  --shadow: 0 1px 2px rgba(64, 42, 20, .06), 0 4px 14px rgba(64, 42, 20, .07);
  --shadow-hover: 0 2px 5px rgba(64, 42, 20, .07), 0 14px 30px -10px rgba(64, 42, 20, .22);
  --shadow-float: 0 8px 30px rgba(50, 32, 14, .16);
  --pgw: min(1100px, calc(100vw - 168px));
  --col: 900px;
  --grid-img: linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px);
  --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* 显示字体用衬线：编辑部气质的大标题；正文保持无衬线 */
  --disp: 'Fraunces', 'Noto Serif SC', 'Songti SC', 'STSong', Georgia, serif;
  --body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
[data-theme=ember] {
  /* 暗房：近黑暖底，橙光做信号色 */
  --bg: #0D0C0A;
  --bg-2: #151310;
  --panel: #1C1915;
  --panel-2: #26221D;
  --line: #3E382E;
  --line-soft: #2A261F;
  --ink: #F2EDE3;
  --ink-2: #D2CBBB;
  --muted: #9A927F;
  --accent: #FFA057;
  --accent-strong: var(--accent);
  --accent-ink: #221304;
  --accent-2: #66D9C8;
  --accent-3: #F091B4;
  --ok: #74C982;
  --bad: #F09188;
  --secondary-container: #2E241B;
  --grid-line: #1B1914;
  --obj-a: #FFA057;
  --obj-b: #8A4D1E;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 22px -10px rgba(0, 0, 0, .65);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--topbar-offset, 86px); overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink); overflow-x: clip;
  font-family: var(--body); font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; letter-spacing: .006em;
}
.no-motion *, .no-motion *::before, .no-motion *::after { animation: none !important; transition: none !important; }
/* 离屏的循环动画一律停掉，省 CPU 也避免视觉噪声 */
.stage:not(.in-view) *, .stage:not(.in-view) *::after { animation-play-state: paused !important; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--disp); font-weight: 500; letter-spacing: -.011em; margin: 0; }
code, kbd { font-family: var(--mono); }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------------- 顶栏（M3 top app bar） ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 60; display: flex; gap: 14px; align-items: center;
  padding: 10px clamp(14px, 3vw, 32px); height: 64px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid var(--line-soft);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.mark { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.mark i { width: 4px; height: 8px; border-radius: 2px; background: var(--accent); animation: eq 1.1s ease-in-out infinite alternate; }
.mark i:nth-child(2) { animation-delay: .18s; height: 20px; background: var(--accent-2); }
.mark i:nth-child(3) { animation-delay: .36s; height: 13px; background: var(--accent-3); }
@keyframes eq { to { transform: scaleY(.25); } }
.brand-t { display: flex; flex-direction: column; line-height: 1.15; }
.brand-t .brand-name { font-family: var(--disp); font-size: 15px; font-weight: 500; }
.brand-t s { text-decoration: none; font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: .12em; }
.search { position: relative; flex: 1 1 auto; max-width: 520px; display: flex; align-items: center; }
.search-history {
  position: absolute; z-index: 100; top: calc(100% + 9px); left: 0; right: 0; max-height: min(62vh, 390px); overflow: auto;
  padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-float, 0 14px 38px rgba(24, 20, 35, .18));
}
.search-history-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px 7px; color: var(--muted); font-size: 11px; }
.search-history-hd button { border: 0; background: transparent; color: var(--accent); font-size: 11px; padding: 5px 7px; border-radius: 7px; }
.search-history ul { margin: 0; padding: 0; list-style: none; }
.search-history li { display: flex; align-items: center; gap: 4px; min-height: 38px; }
.search-history-query, .search-history-remove { min-height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); }
.search-history-query { flex: 1; min-width: 0; padding: 7px 9px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-history-remove { width: 36px; color: var(--muted); font-size: 18px; }
.search-history-query:hover, .search-history-remove:hover, .search-history-hd button:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.search-history-query:focus-visible, .search-history-remove:focus-visible, .search-history-hd button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-history-note { margin: 6px 8px 2px; color: var(--muted); font-size: 10.5px; }
.search .mag { position: absolute; left: 14px; color: var(--muted); font-size: 17px; pointer-events: none; }
#q {
  width: 100%; padding: 11px 74px 11px 38px; border-radius: var(--r-pill);
  border: 1px solid transparent; background: var(--panel); color: var(--ink); font-size: 14px;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
#q::placeholder { color: var(--muted); }
#q:focus { outline: none; background: var(--bg); border-color: var(--accent); box-shadow: 0 1px 3px rgba(32, 25, 52, .12); }
#q::-webkit-search-cancel-button { display: none; }
.search .mini { position: absolute; right: 8px; }
.top-tools { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.hit { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; padding-right: 4px; }
button { font: inherit; cursor: pointer; }
.mini, .ghost, .solid {
  border: 1px solid transparent; background: transparent; color: var(--accent);
  border-radius: var(--r-pill); padding: 8px 14px; min-height: 40px; font-size: 13.5px; font-weight: 500;
  transition: background .18s, box-shadow .18s, transform .12s, color .18s;
}
.ghost:hover, .mini:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.ghost:active, .mini:active { transform: scale(.97); }
.solid { background: var(--accent); color: var(--accent-ink); padding: 10px 20px; box-shadow: var(--shadow); }
.solid:hover { filter: brightness(1.05); }
.mini:focus-visible, .ghost:focus-visible, .solid:focus-visible,
.menu-btn:focus-visible, .menu-item:focus-visible, .pt:focus-visible,
.ltab:focus-visible, .tool.replay:focus-visible, .add:focus-visible,
.fav-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.recipe-open b { font-family: var(--mono); }
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--ink-2);
  font-size: 16px; display: grid; place-items: center; transition: background .18s;
}
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.icon-btn:disabled { opacity: .3; cursor: default; }
.icon-btn:disabled:hover { background: transparent; }
#page-fav svg path { transition: fill var(--dur-2), stroke var(--dur-2); }
#page-fav.on { color: var(--accent); }
#page-fav.on svg path { fill: currentColor; }
.fav-chip {
  display: inline-flex; align-items: center; gap: 6px; width: 100%; margin-top: var(--sp-3);
  padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  background: transparent; color: var(--ink-2); font-size: 12.5px; font-weight: 500;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.fav-chip b { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: auto; }
.fav-chip:hover { background: var(--panel); border-color: var(--line); }
.fav-chip[aria-pressed=true] { background: var(--secondary-container); border-color: transparent; color: var(--ink); }
.fav-chip[aria-pressed=true] svg path { fill: currentColor; }
.term.faved .open-mark::after { content: "★"; position: absolute; right: -1px; bottom: -13px; font-size: 11px; color: var(--accent); }

/* ---------------- 方言菜单（M3 menu，替掉无法美化的原生 select） ---------------- */
.menu { position: relative; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 11px 0 14px;
  border: 1px solid var(--line-soft); background: var(--panel); color: var(--ink);
  border-radius: var(--r-pill); font-size: 13px; transition: background .18s, border-color .18s, box-shadow .18s;
}
.menu-btn:hover { background: var(--panel-2); border-color: var(--line); }
.menu.open .menu-btn { background: var(--panel-2); border-color: var(--accent); }
.menu-cap { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.menu-btn b { font-weight: 500; min-width: 34px; text-align: left; font-family: var(--mono); font-size: 12.5px; }
.menu-btn .menu-caret { display: block; width: 14px; height: 14px; flex: 0 0 14px; color: var(--muted); transition: transform .24s cubic-bezier(.2, 0, 0, 1); }
.menu.open .menu-btn .menu-caret { transform: rotate(180deg); }
.menu-list {
  position: absolute; top: calc(100% + 18px); right: 0; min-width: min(226px, calc(100vw - 24px)); max-width: calc(100vw - 24px); z-index: 90;
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 6px;
  box-shadow: var(--shadow-float), 0 22px 54px -18px rgba(20, 16, 36, .3);
  display: grid; gap: 2px; transform-origin: top right;
  max-height: calc(100vh - var(--topbar-offset, 86px) - 16px);
  max-height: calc(100dvh - var(--topbar-offset, 86px) - 16px);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-8px) scale(.94); pointer-events: none;
  transition: opacity .18s cubic-bezier(.2, 0, 0, 1), transform .2s cubic-bezier(.2, 0, 0, 1);
}
.menu.open .menu-list { opacity: 1; transform: none; pointer-events: auto; }
.menu-list[hidden] { display: none !important; }
.menu-hd {
  margin: 2px 2px 6px; padding: 0 10px 8px; border-bottom: 1px solid var(--line-soft);
  font-size: 11px; line-height: 1.4; color: var(--muted); white-space: normal;
}
.menu-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
  border: 0; background: transparent; color: var(--ink-2); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 13.5px; text-align: left; transition: background .16s, color .16s;
}
.menu-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); }
.menu-item .menu-tick { display: block; width: 16px; height: 16px; flex: 0 0 16px; opacity: 0; color: var(--accent-strong); transition: opacity var(--dur-1); }
.menu-item.on { color: var(--ink); font-weight: 500; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.menu-item.on .menu-tick { opacity: 1; }
/* 主题样片：底色 + 字色 + 强调色三格。样片元素自带 data-theme，
   于是配色直接从上面那五套定义里取，不存在第二份颜色表。 */
.tsw { display: inline-flex; gap: 2px; flex: 0 0 auto; width: 34px; height: 18px;
  padding: 2px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); }
.tsw i { display: block; border-radius: 2px }
.tsw i:nth-child(1) { flex: 2; background: var(--ink) }
.tsw i:nth-child(2) { flex: 1; background: var(--accent) }
.tsw i:nth-child(3) { flex: 1; background: var(--muted) }
.menu-item .tname { flex: 1 1 auto }
#theme-list { min-width: min(208px, calc(100vw - 24px)) }

/* ---------------- 阅读进度（顺便就是 scroll-progress 的实例） ---------------- */
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.scroll-progress i {
  display: block; height: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ---------------- 导语 ---------------- */
/* 侧边留白跟着视口长：1500~1600 这段右栏会贴着窗口边，看起来像被裁掉 */
main { padding: 0 clamp(16px, 4.2vw, 64px) 80px; max-width: 1560px; margin: 0 auto; }
.lede {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 33vw, 420px);
  gap: 26px clamp(36px, 4vw, 64px); align-items: center;
  padding: clamp(32px, 3.6vw, 52px) 0 22px; border-bottom: 1px solid var(--line-soft);
}
.lede-txt { min-width: 0; max-width: 704px; padding-bottom: 8px; }
.lede h1 { font-size: clamp(64px, 6.4vw, 88px); line-height: 1.15; font-weight: 560; letter-spacing: -.025em; text-wrap: balance; }
.home-title-lead { display: block; font-size: .6em; line-height: 1.4; margin-bottom: 10px; }
.home-title-question { display: block; }
[data-lang=en] .lede h1 { font-size: clamp(54px, 5.5vw, 78px); }
.lede h1 em { font-style: normal; color: var(--accent-strong); white-space: nowrap; }
[data-lang=en] .lede h1 em { white-space: normal; }
.lede .home-intro { margin: 30px 0 0; color: var(--ink); font-size: 18px; line-height: 1.65; text-wrap: pretty; }
.lede .home-body { max-width: 33em; margin: 8px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.9; text-wrap: pretty; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 28px; }
.browse-link { display: inline-flex; align-items: center; gap: 30px; min-height: 52px; padding: 14px 22px; border-radius: var(--r-md); background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 500; text-decoration: none; transition: transform var(--dur-1), background var(--dur-1); }
.browse-link:hover { background: var(--accent-strong); transform: translateY(-2px); }
.browse-link:active { transform: translateY(0); }
.home-actions svg, .example-footer svg { flex: 0 0 auto; }
.home-recipe { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 0; border: 0; background: transparent; color: var(--ink-2); font-size: 14px; }
.home-recipe:hover { color: var(--accent-strong); }
.browse-link:focus-visible, .home-recipe:focus-visible, .example-control:focus-visible, .example-footer a:focus-visible, #home-copy:focus-visible, .lab-hd:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.home-discovery { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.scene-shortcuts { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font-size: 12px; }
.scene-shortcuts > span { margin-right: 2px; }
.scene-shortcuts button { min-height: 36px; padding: 6px 0; border: 0; border-radius: 0; background: transparent; color: var(--ink-2); font-size: 12px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color var(--dur-1), color var(--dur-1); }
.scene-shortcuts button:hover { color: var(--accent-strong); text-decoration-color: currentColor; }
.scene-shortcuts button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 0; color: var(--muted); font-size: 12px; }
.home-stats > span + span { padding-left: 16px; border-left: 1px solid var(--line); }
.home-stats b { color: var(--ink-2); font-size: 13px; font-weight: 500; margin-right: 3px; font-variant-numeric: tabular-nums; }
/* 固定总高和各行占位，随机抽取、长文案与语言切换都不会推动首屏。 */
.motion-example { display: grid; grid-template-rows: 56px 56px 236px minmax(0, 1fr); height: 518px; min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow: hidden; }
.example-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 20px 0; min-width: 0; }
.example-eyebrow { color: var(--ink); font-family: var(--disp); font-size: 16px; font-weight: 560; white-space: nowrap; }
.example-controls { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.example-control { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 9px; border: 0; border-radius: var(--r-sm); color: var(--ink-2); background: transparent; font-size: 12px; white-space: nowrap; transition: background var(--dur-1), transform var(--dur-1), color var(--dur-1); }
.example-control:hover { background: var(--bg-2); color: var(--accent-strong); }
.example-control:active { transform: scale(.96); }
.example-random { padding-inline: 12px; background: var(--accent-strong); color: var(--accent-ink); font-weight: 500; }
.example-random:hover { background: var(--ink); color: var(--bg); }
.example-random:hover svg { transform: rotate(-12deg); }
.example-random svg { transition: transform var(--dur-2) var(--ease-out); }
.example-control svg { flex: 0 0 auto; }
.example-vague { align-self: center; padding: 0 20px; margin: 0; font-family: var(--disp); font-size: 21px; line-height: 26px; color: var(--ink); text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.example-stage { perspective: 800px; background-color: color-mix(in srgb, var(--bg-2) 88%, var(--panel)); background-image: none; border-block: 1px solid var(--line-soft); }
.example-caption { display: grid; grid-template-rows: minmax(0, 1fr) 40px; gap: 8px; padding: 12px 20px 8px; min-height: 0; }
.example-description { min-height: 0; overflow: hidden; }
.example-term { min-width: 0; color: var(--ink); }
.example-term b { display: block; font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.example-term > span { color: var(--accent-strong); font-family: var(--mono); font-size: 12px; }
.example-spec, .example-note { margin: 0; font-size: 12px; line-height: 17px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.example-spec { margin-top: 2px; color: var(--muted); }
.example-note { margin-top: 5px; color: var(--ink-2); text-wrap: pretty; }
.example-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line-soft); }
.example-footer a, #home-copy { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 0; border: 0; background: transparent; text-decoration: none; color: var(--accent-strong); font-size: 12px; }
.example-footer a:hover, #home-copy:hover { color: var(--ink); }
@media (max-width: 1100px) and (min-width: 701px) {
  .lede { gap: 28px; }
  .lede h1, [data-lang=en] .lede h1 { font-size: clamp(46px, 5.8vw, 64px); }
  .lede .home-intro { font-size: 16px; margin-top: 22px; }
  .lede .home-body { font-size: 14px; line-height: 1.8; }
  .home-actions { gap: 6px 18px; margin-top: 20px; }
  .home-discovery { flex-wrap: wrap; }
}
@media (max-width: 900px) and (min-width: 701px) {
  .lede { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .scene-shortcuts > span { flex-basis: 100%; }
  .example-hd, .example-caption { padding-inline: 16px; }
  .example-vague { padding-inline: 16px; font-size: 18px; }
  #home-replay { width: 36px; justify-content: center; }
  #home-replay > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 700px) {
  .lede { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; padding-bottom: 28px; }
  .lede h1 { font-size: clamp(46px, 12vw, 64px); }
  [data-lang=en] .lede h1 { font-size: clamp(42px, 11.5vw, 62px); }
  .home-title-lead { font-size: .64em; margin-bottom: 8px; }
  .lede-txt { padding-bottom: 0; }
  .lede .home-intro { font-size: 17px; margin-top: 22px; }
  .lede .home-body { font-size: 14px; line-height: 1.85; }
  .home-actions { gap: 6px 20px; margin-top: 22px; }
  .browse-link { padding: 11px 18px; gap: 18px; }
  .home-recipe { font-size: 13px; }
  .home-discovery { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 14px; }
  .scene-shortcuts { gap: 2px 16px; }
  .scene-shortcuts button { min-height: 40px; }
  .home-stats { gap: 12px; }
  .home-stats > span + span { padding-left: 12px; }
  .motion-example { width: 100%; max-width: 460px; justify-self: center; }
  .scene-shortcuts > span { flex-basis: 100%; }
  .example-hd, .example-caption { padding-inline: 16px; }
  .example-vague { padding-inline: 16px; font-size: 18px; }
}
@media (max-width: 400px) {
  .example-eyebrow { font-size: 14px; }
  [data-lang=en] .example-eyebrow { font-size: 13px; }
  #home-replay { width: 36px; justify-content: center; }
  #home-replay > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------------- 缓动实验室 ---------------- */
.lab { padding: 0; border-bottom: 1px solid var(--line-soft); }
.lab[open] { padding-bottom: 32px; }
.lab-hd { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 16px 0; cursor: pointer; list-style: none; }
.lab-hd::-webkit-details-marker { display: none; }
.lab-hd::marker { content: ""; }
.lab-hd:hover .lab-toggle { color: var(--accent-strong); }
.lab-toggle { display: inline-flex; align-items: center; gap: 14px; color: var(--ink-2); font-size: 13px; margin-left: auto; }
.lab-chevron { font-family: var(--mono); font-size: 22px; line-height: 1; transition: transform var(--dur-2) var(--ease-out); }
.lab[open] .lab-chevron { transform: rotate(45deg); }
.lab-collapse, .lab[open] .lab-expand { display: none; }
.lab[open] .lab-collapse { display: inline; }
@media (max-width: 600px) { .lab-hd { gap: 8px 12px; } .lab-hd p { order: 3; flex-basis: 100%; } .lab-hd .cat-en { display: none; } .lab-hd h2 { font-size: 21px; } }
.lab-hd h2 { font-size: clamp(20px, 2vw, 24px); font-weight: 400; letter-spacing: -.015em; }
.cat-en { font-family: var(--body); font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: .04em; margin-left: 10px; }
.lab-hd p { margin: 0; color: var(--muted); font-size: 13.5px; flex: 1 1 320px; }
/* 三栏一行到底：曲线 + 代码那一栏掉到第二行，等于把「拖控制点 → 看它运动 → 抄代码」
   这条阅读顺序拆断了，所以宁可把列宽压到 900px 才允许换行。 */
.lab-grid { display: grid; grid-template-columns: minmax(178px, 240px) minmax(0, 1.15fr) minmax(268px, 400px); gap: 14px; }
.lab-col { background: var(--panel); border-radius: 24px; padding: 18px; }
.lab-col h4 { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .06em; margin-bottom: 12px; text-transform: uppercase; }
.hint-sm { font-size: 10.5px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.ease-list { display: grid; gap: 6px; max-height: 430px; overflow: auto; padding-right: 4px; }
.ease-p {
  display: grid; grid-template-columns: 1fr 46px; gap: 2px 8px; text-align: left; align-items: center;
  border: 1px solid transparent; border-radius: 14px; background: var(--bg); color: var(--ink-2); padding: 9px 11px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.ease-p:hover { box-shadow: var(--shadow); }
.ease-p.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--bg)); color: var(--ink); }
.ease-p b { font-size: 13px; font-weight: 500; }
.ease-p span { grid-column: 1; font-size: 11px; color: var(--muted); line-height: 1.45; }
.ease-p .ecurve { width: 44px; height: 30px; grid-row: 1 / span 2; grid-column: 2; background: none; border: none; padding: 0; }
.pv { --dist: 96px; position: relative; height: 104px; border-radius: 16px; background: var(--bg); overflow: hidden; margin-bottom: 14px; }
.pv-rail { position: absolute; left: 18px; top: 50%; width: var(--dist); height: 1px; background: var(--line); transition: width .18s linear; }
.pv::after { content: ""; position: absolute; left: calc(18px + var(--dist)); top: 50%; width: 1px; height: 26px; margin-top: -13px; background: var(--muted); opacity: .5; }
.pv::before { content: "终点"; position: absolute; left: calc(24px + var(--dist)); top: 50%; transform: translateY(-50%); font-size: 9px; color: var(--muted); }
.pv-dot { position: absolute; top: 50%; left: 18px; width: 30px; height: 30px; margin-top: -15px; border-radius: 10px; will-change: transform; }
.pv-dot.live { background: var(--accent); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.pv-dot.ref { background: var(--muted); opacity: .45; width: 10px; height: 10px; margin-top: 22px; border-radius: 3px; }
.pv-lbl { position: absolute; left: 18px; top: 10px; font-size: 9.5px; color: var(--muted); }
/* 缩放 / 旋转不走位移轨道：藏掉标尺，参照块并排放 */
.pv[data-prop=scale] .pv-rail, .pv[data-prop=rotate] .pv-rail,
.pv[data-prop=scale]::after, .pv[data-prop=rotate]::after,
.pv[data-prop=scale]::before, .pv[data-prop=rotate]::before { display: none; }
.pv[data-prop=scale] .pv-dot, .pv[data-prop=rotate] .pv-dot { left: auto; }
.pv[data-prop=scale] .pv-dot.live, .pv[data-prop=rotate] .pv-dot.live { left: calc(50% - 52px); }
.pv[data-prop=scale] .pv-dot.ref, .pv[data-prop=rotate] .pv-dot.ref {
  left: calc(50% + 22px); width: 30px; height: 30px; margin-top: -15px; border-radius: 10px; opacity: .3;
}
.pv[data-prop=y] .pv-rail { width: 1px; height: var(--dist); left: 50%; top: 18px; transition: height .18s linear; }
.pv[data-prop=y] { height: 176px; }
.pv[data-prop=y] .pv-dot.live { left: calc(50% - 15px); top: 18px; margin-top: 0; }
.pv[data-prop=y] .pv-dot.ref { left: calc(50% + 26px); top: 18px; margin-top: 0; }
.pv[data-prop=y]::after { left: calc(50% - 14px); top: calc(18px + var(--dist)); width: 28px; height: 1px; margin: 0; }
.pv[data-prop=y]::before { left: 50%; top: calc(24px + var(--dist)); transform: translateX(-50%); }
.lab-row { margin-bottom: 14px; }
.lab-row label { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.lab-row output { color: var(--accent); font-family: var(--mono); font-size: 11.5px; }
input[type=range] { width: 100%; accent-color: var(--accent); height: 20px; }
.pt-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pt { border: 1px solid var(--line); background: transparent; color: var(--ink-2); border-radius: 999px; padding: 5px 12px; font-size: 12px; }
.pt.on { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
.bezier { border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 12px; }
.bz-hd { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 10px; flex-wrap: wrap; }
.bz-hd b { font-size: 13px; font-weight: 500; color: var(--ink); }
.bz-hd code { font-size: 11.5px; color: var(--accent); }
.bz-row { display: grid; grid-template-columns: 26px 1fr 42px; gap: 8px; align-items: center; font-size: 11px; color: var(--muted); }
.bz-row output { text-align: right; color: var(--ink-2); font-family: var(--mono); }
.curve-out { display: grid; grid-template-rows: auto 1fr; gap: 14px; }
#lab-curve { width: 100%; height: 250px; background: var(--bg); border-radius: 16px; cursor: crosshair; touch-action: none; }
.code-out { position: relative; background: var(--bg); border-radius: 16px; padding: 12px 14px 50px; }
.ltabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.ltab { border: 1px solid transparent; background: none; color: var(--muted); font-size: 11.5px; padding: 4px 10px; border-radius: 999px; }
.ltab.on { color: var(--accent-ink); background: var(--accent); }
.code-out pre { margin: 0; }
.code-out code { font-size: 11.8px; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
#lab-copy { position: absolute; right: 12px; bottom: 12px; }

/* ---------------- 侧栏（M3 navigation rail） + 分类区 ---------------- */
.shell { display: grid; grid-template-columns: 226px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); padding-top: 40px; }
.content { min-width: 0; }
.side { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 108px); overflow: auto; padding-right: 4px; }
.side h3 { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }
.side h3 b { font-family: var(--mono); color: var(--accent); font-weight: 500; }
.nav { display: grid; gap: 2px; }
.nav a {
  display: flex; justify-content: space-between; gap: 8px; align-items: center; text-decoration: none;
  padding: 10px 16px; border-radius: 999px; font-size: 13.5px; color: var(--ink-2);
  transition: background .2s, color .2s;
}
.nav a:hover { background: var(--panel); color: var(--ink); }
.nav a.on { background: var(--secondary-container); color: var(--ink); font-weight: 500; }
.nav a.here { color: var(--ink); background: var(--panel); }
.nav a b { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.nav a.on b { color: var(--accent); }
.side-note { margin-top: var(--sp-4); background: var(--panel); border-radius: var(--r-md); padding: 13px 15px; }
.side-note b { font-size: 11px; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.side-note p { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
kbd { border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; font-size: 11px; background: var(--bg); }

.empty { color: var(--muted); background: var(--panel); padding: 24px; border-radius: 20px; text-align: center; }
.search-results { margin-bottom: var(--sp-6); padding: clamp(18px, 3vw, 30px); border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--panel-2) 72%, var(--panel))); box-shadow: var(--shadow); }
.search-results[hidden] { display: none; }
.search-results-hd { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.search-result-actions { display: flex; align-items: center; gap: 4px; }
.search-results-hd .eyebrow { margin: 0 0 2px; color: var(--accent); font: 600 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.search-results-hd h2 { font: 500 clamp(18px, 2.5vw, 24px)/1.3 var(--disp); }
.search-filter-status { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.search-results-hd button { flex: 0 0 auto; min-height: 40px; border: 1px solid var(--line); background: var(--bg); }
.search-result-list { display: grid; gap: 7px; }
.search-result { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 13px 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: color-mix(in srgb, var(--bg) 72%, transparent); color: var(--ink); text-align: left; transition: border-color .18s, transform .18s var(--ease-out), background .18s; }
.search-result:hover, .search-result:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--panel); transform: translateY(-1px); }
.search-result:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.result-index { color: var(--accent); font: 500 11px/1 var(--mono); }
.result-copy { display: grid; min-width: 0; gap: 4px; }
.result-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 600; }
.result-title i { color: var(--muted); font: 11px/1.3 var(--mono); font-style: normal; font-weight: 400; }
.result-desc { display: -webkit-box; overflow: hidden; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.result-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.result-meta b { color: var(--accent); font: 16px/1 var(--body); }
.search-results-hd button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cat { min-width: 0; padding: var(--sp-8) 0 var(--sp-3); border-top: 1px solid var(--line-soft); }
.cat:first-child { border-top: 0; padding-top: 0; }
.cat[hidden] { display: none; }
.cat-hd { display: grid; grid-template-columns: 34px 1fr; gap: var(--sp-3); align-items: start; margin-bottom: var(--sp-5); }
.cat-no { font-family: var(--mono); font-size: 12px; color: var(--accent); padding-top: 5px; }
.cat-hd h2 { font-size: clamp(21px, 2.2vw, 26px); font-weight: 400; letter-spacing: -.016em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.cat-tag { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; max-width: 70ch; }
.cat-n { margin: 2px 0 0; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ---------------- 术语卡片：动效 + 名称 + 一句话，等高 ---------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr)); gap: var(--sp-4); align-items: stretch; }
.term {
  position: relative; display: flex; flex-direction: column; height: 274px; padding: 8px;
  background: var(--panel); border: 1px solid transparent; border-radius: var(--r-lg); cursor: pointer;
  transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2);
}
.term:hover { background: var(--panel-2); box-shadow: var(--shadow); }
/* 长列表使用 content-visibility 跳过离屏绘制，并预留卡片的典型高度，减轻首次滚动时的布局开销。 */
.term:not(.term--detail) { content-visibility: auto; contain-intrinsic-size: auto 274px; }
.term:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.term[hidden] { display: none; }
/* 卡片入场：rise-in + 错峰（仅在 JS 就绪后启用，避免无脚本时内容不可见） */
.anim-ready .term:not(.term--detail):not(.shown) { opacity: 0; transform: translateY(16px); }
.term.shown { animation: cardin .55s cubic-bezier(.2, 0, 0, 1) both; }
@keyframes cardin { from { opacity: 0; transform: translateY(16px) scale(.988); } to { opacity: 1; transform: none; } }
.no-motion .term, .no-motion .term.shown { opacity: 1 !important; transform: none !important; animation: none !important; }
.stage {
  position: relative; height: 158px; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--r-md); background: var(--bg); background-image: var(--grid-img); background-size: 22px 22px;
  /* pan-y 而不是 none：触屏下手指落在卡片上也要能滚页，只有真正拖拽的元件才锁死 */
  padding: 12px; touch-action: pan-y;
}
.scrolly { touch-action: pan-y; }
.stage.kind-scroll, .stage.kind-list, .stage.kind-drag { padding: 8px; }
.stage-tools { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-3); background: var(--panel); border-top: 1px solid var(--line-soft); }
.hint { font-size: 10.5px; color: var(--muted); }
.tool.replay { border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); font-size: 11.5px; padding: 3px 12px; border-radius: 999px; }
.tool.replay:hover { color: var(--accent); border-color: var(--accent); }
.term-main { padding: 12px 8px 6px; display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.en { font-size: 15.5px; font-weight: 500; letter-spacing: -.006em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zh { margin: 1px 0 0; font-size: 12px; color: var(--accent); }
.brief { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.open-mark {
  position: absolute; right: 16px; top: 16px; width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(6px);
  color: var(--accent); font-size: 12px; opacity: 0; transform: translateY(-5px) scale(.85);
  transition: opacity .2s cubic-bezier(.2, 0, 0, 1), transform .2s cubic-bezier(.2, 0, 0, 1);
}
.term:hover .open-mark, .term:focus-visible .open-mark { opacity: 1; transform: none; }
.def { margin: 0 0 14px; font-size: 13.6px; color: var(--ink-2); }
.codewrap { position: relative; margin-bottom: 12px; }
.codewrap pre { margin: 0; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 12px 14px; overflow: auto; }
.codewrap code { font-size: 11.6px; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.copy { position: absolute; top: 8px; right: 8px; font-size: 11px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); border-radius: var(--r-pill); padding: 3px 12px; opacity: 0; transition: opacity .18s, color .18s, background .18s; }
.codewrap:hover .copy, .copy:focus-visible { opacity: 1; }
.copy:hover { color: var(--accent); background: var(--bg); }
.code-note { display: block; margin: 0 0 6px 2px; font-size: 11px; color: var(--muted); }
.editorial-note { margin: 12px 0; padding: 10px 12px; border-left: 2px solid var(--accent-2); background: color-mix(in srgb, var(--accent-2) 6%, var(--panel)); color: var(--ink-2); font-size: 12px; line-height: 1.6; }
.editorial-note b { color: var(--accent-strong); font-weight: 600; }
.refs-checked { margin: -4px 0 10px; color: var(--muted); font: 10px/1.5 var(--mono); }
.term .foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.alias { display: flex; flex-wrap: wrap; gap: 5px; }
.alias span { font-size: 11px; color: var(--ink-2); background: var(--bg); border-radius: var(--r-pill); padding: 3px 10px; }
.add { border: 1px solid var(--line); background: transparent; color: var(--accent); border-radius: var(--r-pill); padding: 7px 16px; font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: background .2s, border-color .2s; }
.add:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.add.on { background: var(--secondary-container, var(--panel-2)); border-color: transparent; color: var(--ink); }
.add.on::before { content: "✓ "; }

/* ---------------- 术语详情页（整页，可返回） ---------------- */
html.has-page { overflow: hidden; }
.page {
  position: fixed; inset: 0; z-index: 70; overflow: auto; overscroll-behavior: contain;
  background: var(--bg); color: var(--ink); scrollbar-width: thin;
  animation: page-in .34s var(--ease-out) both;
}
@keyframes page-in { from { opacity: 0; } }
/* #page 是被程序聚焦的整屏视图而非可操作控件，套上全局 :focus-visible 会画出一圈大描边 */
.page:focus-visible { outline: none; }
/* 详情页比列表窄一档，专门给两侧的翻页药丸留出真实留白；
   1240 的列表版心放到 1280 窗口里左右只剩 20px，药丸怎么算都会压到内容 */
.page-inner { max-width: var(--pgw); margin: 0 auto; padding: 0 clamp(16px, 3.4vw, 44px) var(--sp-9); }
.crumb-bar {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) 0; margin-bottom: var(--sp-5);
  background: color-mix(in srgb, var(--bg) 98%, transparent); backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid var(--line-soft);
}
.crumb-back {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px 0 11px;
  border: 1px solid var(--line-soft); border-radius: var(--r-pill); background: var(--panel);
  color: var(--ink); font-size: 13px; font-weight: 500;
  transition: background var(--dur-1), border-color var(--dur-1), transform var(--dur-1);
}
.crumb-back:hover { background: var(--panel-2); border-color: var(--line); }
.crumb-back:active { transform: translateX(-2px); }
.crumb-sep { color: var(--muted); }
.crumb-here { font-size: 13.5px; font-weight: 500; color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-acts { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.line-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border: 1px solid var(--line-soft); border-radius: var(--r-pill); background: transparent;
  color: var(--ink-2); font-size: 12.5px; font-weight: 500; transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.line-btn:hover { background: var(--panel); border-color: var(--line); color: var(--ink); }
.line-btn.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.line-btn.ok svg { display: none; }
.line-btn.ok::before { content: "✓"; }

.term--detail { height: auto; background: none; cursor: default; display: block; }
.term--detail:hover { background: none; box-shadow: none; }
.term--detail .brief, .term--detail .open-mark, .term--detail .term-main { display: none; }
.pg-kicker {
  margin: 0 0 var(--sp-3); font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.pg-title {
  font-family: var(--disp); font-weight: 700; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.14;
  letter-spacing: -.028em; margin: 0 0 var(--sp-6); display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px;
}
.pg-title em { font-style: normal; font-weight: 500; font-size: .58em; letter-spacing: -.01em; color: var(--accent); }
.pg-copy { max-width: 960px; margin: 0 auto; }
.pg-visual {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden;
  background: var(--panel); margin-bottom: var(--sp-7); box-shadow: var(--shadow);
}
.pg-visual .stage { height: 380px; background-color: var(--bg); border-radius: 0; }
/* 1240 宽的列配 340 高是 3.6:1 的信箱，演示再怎么放大也填不满；把舞台拉高比放大内容更有效 */
.pg-visual .stage.kind-compound { height: 440px; }
.pg-kicker { display: flex; align-items: center; gap: 9px; }
.pg-kicker::before { content: ""; width: 18px; height: 1px; background: var(--accent); opacity: .72; }
.pg-title { text-wrap: balance; }
.pg-visual { box-shadow: 0 18px 48px -34px color-mix(in srgb, var(--ink) 36%, transparent); }
/* 舞台下面这三段（提示 / 慢放循环 / 参数）原本是三条各自带分隔线的带子，
   叠在一起像三个独立面板；合并成一块连续区域，只留最上面那道线。 */
.term--detail .stage-tools { padding: 11px var(--sp-4) 9px; }
.term--detail .dt-ctl {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  /* 上下等距，内容才在条带里垂直居中（之前 0/11px 导致整行上浮） */
  padding: 6px var(--sp-4); background: var(--panel); border-top: 0;
}
.ctl-lbl { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.seg { display: inline-flex; background: var(--bg); border-radius: var(--r-pill); padding: 2px; }
.seg-b { border: 0; background: transparent; color: var(--ink-2); border-radius: var(--r-pill); padding: 5px 13px; font-size: 12px; font-family: var(--mono); transition: background var(--dur-1), color var(--dur-1); }
.seg-b.on { background: var(--accent); color: var(--accent-ink); }
.ctl-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.ctl-chk input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.callout {
  margin: 0 0 var(--sp-6); padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg); background: var(--secondary-container);
  position: relative; max-width: var(--col);
}
.callout::before {
  content: "\201C"; position: absolute; left: 14px; top: 6px; font-family: var(--disp);
  font-size: 42px; line-height: 1; color: var(--accent); opacity: .55;
}
.callout b { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.callout p { margin: 0; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.62; color: var(--ink); }
.pg-def { max-width: var(--col); margin: 0 0 var(--sp-6); font-size: clamp(15.5px, 1.55vw, 17.5px); line-height: 1.78; color: var(--ink-2); }
.pg-say {
  display: flex; align-items: flex-start; gap: var(--sp-3); max-width: var(--col);
  padding: var(--sp-4) var(--sp-5); border: 1px dashed color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 5%, transparent); margin-bottom: var(--sp-6);
}
.pg-say .sw { flex: 0 0 auto; }
.pg-say span { font-size: 15.5px; line-height: 1.66; color: var(--ink); }
.term--detail .codewrap { max-width: none; margin-bottom: var(--sp-6); }
.term--detail .codewrap pre { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); background: var(--panel); }
.term--detail .codewrap code { font-size: 13px; line-height: 1.72; }
.term--detail .foot { max-width: none; margin-top: 0; padding-top: var(--sp-5); border-top: 1px solid var(--line-soft); }
.term--detail .alias span { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 4px 12px; font-size: 12px; }
.term--detail .pg-copy > :last-child { margin-bottom: 0; }
.term--detail .pg-copy > .foot { margin-top: var(--sp-7); }
.term--detail .callout { max-width: none; padding: 22px 26px 22px 34px; border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 52%, transparent); }
.term--detail .callout::before { left: 12px; top: 5px; }
.term--detail .pg-def { max-width: 74ch; }
.term--detail .pg-say { max-width: none; border-style: solid; border-color: var(--line-soft); background: var(--panel); }
.term--detail .codewrap { overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--panel); }
.term--detail .codewrap pre { border: 0; border-radius: 0; padding: 20px; background: transparent; }
.term--detail .codewrap .copy { z-index: 1; }
.term--detail .refs { margin-top: var(--sp-7); }

/* 左右缘的翻页胶囊：跟着视口居中，标签就是目标术语名 */
.edge-nav {
  --pad: clamp(16px, 3.4vw, 44px);
  --gap: clamp(10px, 1.3vw, 22px);
  /* 内容列可见边缘是 border-box，padding 在它内部 */
  --colw: min(var(--pgw), 100vw);
  /* 视口边缘到内容列边缘的单侧留白 */
  --side: calc((100vw - var(--colw)) / 2);
  /* 药丸可用宽度 = 留白 - 间隙 - 页边距；下限取圆钮直径，
     否则窄屏算出负数会把圆钮压成 2px 宽 */
  --band: max(56px, calc(var(--side) - var(--gap) - var(--pad)));
  position: fixed; inset: 0; z-index: 71; pointer-events: none;
}
.edge-pill {
  position: absolute; top: 50%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 17px; border: 1px solid var(--line-soft);
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(10px); box-shadow: var(--shadow); color: var(--ink);
  font-size: 13px; font-weight: 500; pointer-events: auto; cursor: pointer;
  transform: translateY(-50%);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2), box-shadow var(--dur-2),
    transform var(--dur-2) var(--ease), padding var(--dur-2) var(--ease), width var(--dur-2) var(--ease);
}
.edge-pill i { font-style: normal; flex: 0 0 auto; color: var(--muted); font-size: 15px; line-height: 1; }
.edge-pill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 锚在内容列两侧而不是视口边缘：列宽 = min(--maxw, 100vw - 2*pad)，
   再用 fit-content + auto 外边距把药丸推到贴柱那一侧，标签只会往外长，不会压到内容。 */
/* abspos 的 fit-content 按包含块求值，不会自己收缩到左右偏移之间，
   所以 max-width 要显式给。锚点用 min() 取两个约束里更靠内的那个：
   正常情况下正好贴在列外侧留 gap 间隙；留白不够 56px 时自动往里挪，
   宁可压住一点版心也不跑出视口。 */
/* 这两个规则只负责定位；width 交给圆钮态和宽屏态各自声明，
   放在这里会盖掉圆钮的 56px，把药丸压成 17px 宽 */
.edge-pill.left { right: min(calc(100vw - var(--side) + var(--gap)), calc(100vw - var(--pad) - var(--band))); }
.edge-pill.right { left: min(calc(100vw - var(--side) + var(--gap)), calc(100vw - var(--pad) - var(--band))); }
/* 两侧必须同时切，否则一边有字一边没字反而更难看，所以用断点而不是逐个测量。
   --pgw 1100 + pad 44 + gap 22 时单侧留白 = (100vw - 1100)/2 - 66，
   要装得下最长标题（约 200px）需要 100vw >= 1632。 */
.edge-pill { width: 56px; height: 56px; padding: 0; gap: 0; border-radius: 50%; box-shadow: var(--shadow-float); max-width: 56px; }
.edge-pill span { width: 0; min-width: 0; opacity: 0; }
.edge-pill i { color: var(--ink-2); font-size: 17px; }
@media (min-width: 1632px) {
  .edge-pill { width: fit-content; height: auto; padding: 12px 17px; gap: 9px; border-radius: var(--r-pill); box-shadow: var(--shadow); max-width: var(--band); min-height: 47px; }
  .edge-pill span { width: auto; opacity: 1; }
  .edge-pill i { color: var(--muted); font-size: 15px; }
}
.edge-pill:hover { background: var(--panel-2); border-color: var(--line); transform: translateY(-50%) scale(1.05); }
.edge-pill.left:hover { transform: translateY(-50%) translateX(-3px) scale(1.05); }
.edge-pill.right:hover { transform: translateY(-50%) translateX(3px) scale(1.05); }
.edge-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.edge-pill:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
  .edge-nav { position: sticky; bottom: var(--sp-4); inset: auto; display: flex; gap: var(--sp-2); padding: 0 clamp(16px, 3.4vw, 44px); }
  .edge-pill { position: static; transform: none; max-width: none; flex: 1; justify-content: center; }
  .edge-pill:hover { transform: none; }
  .pg-visual .stage, .pg-visual .stage.kind-compound { height: 244px; }
  .crumb-acts .line-btn span { display: none; }
}

/* ---------------- 舞台通用物件 ---------------- */
.obj { position: relative; display: block; width: 66px; height: 46px; border-radius: 11px; background: linear-gradient(150deg, var(--obj-a), color-mix(in srgb, var(--obj-a) 45%, var(--obj-b))); flex: 0 0 auto; }
.obj.card { width: 74px; height: 52px; }
.obj.dot { width: 34px; height: 34px; border-radius: 50%; }
.obj.img { width: 108px; height: 70px; border-radius: 10px; background: linear-gradient(120deg, var(--obj-b), var(--obj-a) 120%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.obj.img.wide { width: 150px; height: 84px; }
.obj.chip { width: auto; height: 30px; padding: 0 12px; border-radius: 20px; display: grid; place-items: center; font-size: 12px; font-family: var(--mono); color: var(--accent-ink); }
.obj.btn { width: auto; height: 38px; padding: 0 16px; border-radius: 10px; display: grid; place-items: center; font-size: 12.5px; font-family: var(--body); color: var(--accent-ink); font-weight: 600; }
.obj.sheet { width: 122px; height: 82px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 12.5px; font-family: var(--mono); color: var(--ink-2); }
.obj.txt { width: auto; height: auto; background: none; font-family: var(--disp); font-size: 19px; color: var(--ink); }
.obj.field { width: 128px; height: 38px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.obj.toast { width: auto; height: 34px; padding: 0 13px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--accent); display: grid; place-items: center; font-size: 12px; color: var(--ink); }
.obj.blob { width: 62px; height: 62px; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; background: linear-gradient(140deg, var(--obj-a), var(--obj-b)); }
.obj.ball { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff8, transparent 42%), linear-gradient(150deg, var(--obj-a), var(--obj-b)); }
.obj.heart { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-3); }
.obj.arrow { width: 44px; height: 44px; border-radius: 50%; background: none; border: 3px solid var(--accent); border-right-color: transparent; border-bottom-color: transparent; transform: rotate(45deg); }
.obj.spinner { width: 40px; height: 40px; border-radius: 50%; background: none; border: 3px solid var(--line); border-top-color: var(--accent); }
.obj.grad { height: 74px; width: 150px; background: linear-gradient(60deg, var(--obj-a), var(--obj-b), var(--accent-3), var(--obj-a)); background-size: 300% 100%; }
.obj.o-bl { transform-origin: bottom left; }
.obj.persp { transform-style: preserve-3d; }
.stage:has(.persp), .substage { transform-style: preserve-3d; }
.stage { perspective: 700px; }
/* perspective 只作用于直接子级：3D 场景被包在 .stagein 里时，中间层默认 flat
   会把 translateZ 拍成 0，推镜 / 2.5D / 环绕运镜就会「完全不动」。 */
.stagein:has(.cam), .stagein:has(.d25), .stagein:has(.turn) { transform-style: preserve-3d; }
.stage:has(.cam) { perspective: 560px; }
.obj.link { font-size: 16px; }
.obj.link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: var(--accent); transform-origin: left; }
.obj.clip, .obj.masked, .obj.masked2 { clip-path: none; }
.obj.masked { mask-image: linear-gradient(100deg, transparent 20%, #000 45%, transparent 78%); mask-size: 220% 100%; mask-repeat: no-repeat; }
.obj.masked2 { mask-image: linear-gradient(#000 55%, transparent); mask-size: 100% 220%; mask-repeat: no-repeat; }
.obj.crop { overflow: hidden; }
.obj.crop .fill, .obj.crop > i { position: absolute; inset: 0; background: linear-gradient(120deg, var(--obj-b), var(--obj-a)); border-radius: inherit; }
.zoom-demo { isolation: isolate; background: var(--panel-2); color: var(--accent-ink); }
.zoom-demo .fill { transform: scale(1); transition: transform 420ms cubic-bezier(.16,1,.3,1); transform-origin: 50% 50%; will-change: transform; background:
  radial-gradient(circle at 22% 26%, rgba(255,255,255,.68) 0 4%, transparent 5%),
  repeating-linear-gradient(132deg, color-mix(in srgb, var(--accent) 82%, #fff 18%) 0 12px, color-mix(in srgb, var(--obj-b) 78%, #fff 22%) 12px 27px); }
.zoom-demo .fill::after { content: ""; position: absolute; inset: 12% 14%; border: 1px solid rgba(255,255,255,.52); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.zoom-demo b { position: absolute; left: 10px; bottom: 8px; z-index: 1; font: 600 9px var(--mono); letter-spacing: .1em; color: rgba(255,255,255,.9); text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.term--detail .zoom-demo { width: min(460px, 78vw); height: min(270px, 62vw); border-radius: 16px; }
.term--detail .zoom-demo b { left: 16px; bottom: 14px; font-size: 12px; }
.t-hover-zoom .zoom-demo:is(:hover, :focus-within) .fill,
.t-hover-zoom .stage.is-hovered .fill { transform: scale(1.3); }
.zoom-demo { cursor: zoom-in; }
.t-hover-zoom .stage:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.stagein { display: flex; gap: 8px; align-items: center; justify-content: center; width: 100%; height: 100%; }
.substage { display: flex; gap: 8px; align-items: center; justify-content: center; }
.stagein .obj + .obj { opacity: 1; }

/* ---------------- 各术语专属舞台 ---------------- */
.lane { position: absolute; inset: 12px; display: block; }
.lane .rail { position: absolute; left: 10px; right: 10px; top: 50%; height: 1px; background: var(--line); }
.lane .mk { position: absolute; top: 50%; left: 10px; width: 26px; height: 26px; margin-top: -13px; border-radius: 8px; will-change: transform; }
.lane .mk.live { background: var(--accent); box-shadow: 0 6px 18px -8px var(--accent); }
.lane .mk.ref { width: 9px; height: 9px; margin-top: 22px; border-radius: 3px; background: var(--muted); }
.lane .lane-lbl { position: absolute; left: 11px; bottom: 10px; font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.curvebox { position: absolute; inset: 12px; }
.curvebox .cv { width: 100%; height: 100%; display: block; }
.cprobe { position: absolute; inset: 0; pointer-events: none; }
.cprobe i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 22%, transparent); }
.springbox { position: absolute; inset: 14px 16px; display: grid; gap: 9px; align-content: center; }
.srow { position: relative; height: 38px; display: flex; align-items: center; }
.srow .scol { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); }
.srow .scol.alt { background: var(--muted); }
.srow b { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 9.5px; color: var(--muted); font-weight: 400; }
.springbox { cursor: pointer; }
/* 行程轨道与终点刻度：让弹簧的过冲 / 回弹有参照物 */
.srow::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line-soft); }
.srow::after {
  content: ""; position: absolute; left: var(--tgt, 78%); top: 50%; width: 2px; height: 24px;
  margin-top: -12px; border-radius: 1px; background: color-mix(in srgb, var(--accent) 42%, transparent);
}
.srow .scol { position: relative; z-index: 1; }

/* ---------------- 卡片内的核心参数控制（在舞台之外，不遮挡动效） ---------------- */
.term:not(.term--detail).has-ctl .stage { height: 132px; }
.pctl {
  display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; justify-content: space-between;
  height: 24px; margin: 2px 4px 0; overflow: hidden;
}
.pk-i { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pk-i > span { font-family: var(--mono); font-size: 9px; letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
.pk-i output { font-family: var(--mono); font-size: 9px; color: var(--accent); min-width: 24px; text-align: right; }
.pk-i input[type=range] { width: 42px; height: 14px; margin: 0; accent-color: var(--accent); cursor: ew-resize; }
.term--detail .pctl {
  height: auto; justify-content: flex-start; gap: 10px 22px; margin: 0; padding: 0 var(--sp-4) 14px;
  background: var(--panel); border-top: 0;
}
.term--detail .pk-i input[type=range] { width: 108px; }
.term--detail .pk-i output { min-width: 50px; font-size: 10.5px; }
.term--detail .pk-i > span { font-size: 10px; }
.twostage { position: absolute; inset: 10px 12px; display: grid; gap: 8px; }
.sub { display: grid; grid-template-columns: 1fr; gap: 3px; }
.sub .tag { font-family: var(--mono); font-size: 9.5px; color: var(--muted); font-style: normal; }
.sub .substage { min-height: 54px; border: 1px dashed var(--line-soft); border-radius: 9px; background: color-mix(in srgb, var(--panel) 60%, transparent); }
.sub .substage .obj { width: 54px; height: 36px; }
.wipebar { position: absolute; left: 50%; top: 50%; width: 150px; height: 74px; margin: -37px 0 0 -75px; background: var(--accent); border-radius: 10px; transform-origin: left; z-index: 2; }
/* 擦入要真的换内容：两块内容叠着，谁露出来由色块走到哪决定。
   换的瞬间落在色块完全盖住的那一格（step-end 保证是硬切不是渐变），
   所以观众只看到「扫过去之后底下换了」，看不见切换本身 */
.wipepair { position: relative; width: 150px; height: 74px; }
.wipepair .wp { position: absolute; left: 0; top: 0; width: 150px; height: 74px; display: grid; place-items: center; font-family: var(--mono); font-size: 15px; border-radius: 10px; }
.wipepair .wp-a { animation: wipeOld 1100ms step-end infinite both; }
.wipepair .wp-b { background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-3))); color: var(--accent-ink); animation: wipeNew 1100ms step-end infinite both; }
@keyframes wipeOld { 0%, 24.9% { opacity: 1 } 25%, 74.9% { opacity: 0 } 75%, 100% { opacity: 1 } }
@keyframes wipeNew { 0%, 24.9% { opacity: 0 } 25%, 74.9% { opacity: 1 } 75%, 100% { opacity: 0 } }
.diss { position: absolute !important; }
.diss.b { opacity: 0; }
.pulse { background: var(--accent) !important; }
.pulse .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); }
.marquee { display: flex; gap: 20px; width: max-content; align-items: center; font-family: var(--disp); font-size: 22px; color: var(--muted); white-space: nowrap; }
.marquee span:nth-child(odd) { color: var(--accent); }
.orbit-box { position: relative; width: 96px; height: 96px; }
.orbit-box .c { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; background: var(--accent); }
.orbit-box .o { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--obj-b); margin: -5px; }
.orbit-box .o1 { transform: translateX(38px); }
.orbit-box .o2 { width: 7px; background: var(--accent-3); transform: translate(-30px, 12px); }
.amb { position: relative; width: 150px; height: 90px; }
.amb i { position: absolute; width: 52px; height: 52px; border-radius: 50%; filter: blur(12px); background: var(--obj-a); opacity: .5; }
.amb i:nth-child(2) { left: 60px; top: 22px; background: var(--obj-b); }
.amb i:nth-child(3) { left: 20px; top: 34px; background: var(--accent-3); width: 34px; height: 34px; }
.burst { position: relative; width: 10px; height: 10px; }
.burst i { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); left: -4px; top: -4px; }
.burst i:nth-child(3n) { background: var(--obj-b); }
.burst i:nth-child(3n + 1) { background: var(--accent-3); }
.bokeh { position: relative; width: 150px; height: 92px; }
.bokeh i { position: absolute; width: 54px; height: 54px; border-radius: 50%; filter: blur(9px); opacity: .34; background: var(--accent); }
.bokeh i:nth-child(1) { left: 6px; top: 8px; background: var(--obj-b); }
.bokeh i:nth-child(2) { left: 66px; top: 30px; }
.bokeh i:nth-child(3) { left: 100px; top: 4px; width: 34px; height: 34px; background: var(--accent-3); }
.sk { width: min(100%, 286px); display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel-2); box-shadow: 0 14px 28px -20px rgba(0,0,0,.48); }
.sk i { display: block; flex: none; border-radius: 7px; background: linear-gradient(100deg, color-mix(in srgb, var(--muted) 24%, var(--panel)) 18%, color-mix(in srgb, var(--muted) 46%, var(--panel-2)) 42%, color-mix(in srgb, var(--muted) 24%, var(--panel)) 66%) 120% 0 / 260% 100%; }
.sk-top { display: flex; align-items: center; gap: 9px; }
.sk-avatar { width: 34px; height: 34px; border-radius: 50% !important; }
.sk-user { flex: 1; display: grid; gap: 6px; }
.sk-line { height: 8px; }
.sk-name { width: 42%; height: 9px !important; }
.sk-meta { width: 68%; height: 6px !important; opacity: .68; }
.sk-cover { width: 100%; height: 76px; border-radius: 10px !important; }
.sk-title { width: 74%; height: 10px !important; }
.sk-copy { width: 100%; height: 6px !important; opacity: .72; }
.sk-copy.short { width: 58%; }
.sk-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 2px; }
.sk-tag { width: 46px; height: 17px !important; border-radius: 99px !important; }
.sk-action { width: 58px; height: 21px !important; border-radius: 99px !important; }
.shine, .chip.shine { background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 45%, transparent 70%), linear-gradient(150deg, var(--obj-a), var(--obj-b)); background-size: 200% 100%, 100% 100%; }
.grained .noise { position: absolute; inset: -20%; background-image: repeating-conic-gradient(from 0deg, #fff 0 0.6deg, #000 0 1.2deg); opacity: .16; mix-blend-mode: overlay; }
.beam { position: absolute; inset: -20% -60%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); }
.sweep { overflow: hidden; }
.trackbar { width: 132px; height: 10px; border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.trackbar .fill { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.d25 { position: relative; width: 120px; height: 92px; transform-style: preserve-3d; }
.d25 .obj { position: absolute; inset: auto; }
.d25 .l { transform: translateZ(-30px) scale(.85); opacity: .5; }
.d25 .m { transform: translateZ(0); left: 18px; top: 16px; }
.d25 .f { transform: translateZ(40px); left: 40px; top: 34px; width: 44px; height: 30px; background: var(--accent); }
.cam { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.cam .obj { position: absolute; left: 50%; top: 50%; }
.cam .far { width: 120px; height: 80px; margin: -40px 0 0 -60px; transform: translateZ(-90px); opacity: .45; background: var(--obj-b); }
.cam .near { width: 62px; height: 44px; margin: -22px 0 0 -31px; transform: translateZ(30px); background: var(--accent); }
/* 弹窗舞台宽得多，镜头类场景按卡片尺寸画会显得又小又空。
   整体缩放 .stagein 而不是逐个改子元素，3D 关系与 translateZ 幅度都能等比保留。
   但缩放前得先把它收成场景实际大小：原本 100% 铺满舞台，1.6 倍后这个空盒子自己
   就顶穿舞台（scrollWidth 927 > 728）；3D 物件靠居中不靠铺满，收尺寸不改观感，
   也就不用再套一层 overflow 去裁掉动效 */
.term--detail .stage:has(.cam) .stagein,
.term--detail .stage:has(.d25) .stagein,
.term--detail .stage:has(.turn) .stagein { width: min(260px, 62%); height: min(150px, 44%); transform: scale(1.6); }
.panstrip { display: flex; gap: 10px; width: max-content; }
.panstrip i { width: 56px; height: 74px; border-radius: 9px; background: linear-gradient(160deg, var(--obj-b), var(--obj-a)); opacity: .85; }
.panstrip i:nth-child(even) { background: linear-gradient(160deg, var(--obj-a), var(--accent-3)); }
.turn { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; }
.turn .face { position: absolute; left: 20px; top: 20px; width: 60px; height: 60px; }
.turn .f1 { transform: translateZ(32px); background: var(--accent); }
.turn .f2 { transform: rotateY(120deg) translateZ(38px); background: var(--obj-b); opacity: .85; }
.turn .f3 { transform: rotateY(240deg) translateZ(38px); background: var(--accent-3); opacity: .8; }
/* 穿越式推进：第一层用 mask 挖出一个真窗口，第二层就摆在窗口后面。
   第一层放大淡出的后半程，第二层从窗口大小长到满幅——转场是「接上」的，
   不是把一个画面推没再看下一个。两层同一时长，所以永远同步 */
.zthrough { position: relative; width: 130px; height: 82px; }
.zthrough .znext {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: 5px; padding: 9px;
  border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-soft);
  transform-origin: 50% 50%; animation: znext-in 1600ms cubic-bezier(0.7, 0, 0.84, 0) infinite alternate both;
}
.zthrough .znext s { flex: 0 0 auto; width: 100%; height: 8px; border-radius: 4px; background: var(--accent); text-decoration: none; }
.zthrough .znext s:nth-child(2) { width: 74%; background: var(--obj-b); }
.zthrough .znext s:nth-child(3) { width: 52%; background: var(--line); }
.obj.img.zoomhole {
  width: 130px; height: 82px; z-index: 2;
  mask-image: radial-gradient(20px 14px at 50% 50%, transparent 98%, #000 100%);
}
.zoomhole .hole {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 28px; margin: -14px 0 0 -20px;
  border: 1.5px solid rgba(255, 255, 255, .62); border-radius: 9px;
}
@keyframes znext-in { 0%, 45% { opacity: 0; transform: scale(.5); } 100% { opacity: 1; transform: scale(1); } }
.scene-mini { position: relative; width: 120px; height: 84px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.scene-mini i { position: absolute; width: 20px; height: 20px; border-radius: 5px; background: var(--accent); }
.scene-mini i:nth-child(1) { left: 10px; top: 12px; }
.scene-mini i:nth-child(2) { left: 44px; top: 34px; background: var(--obj-b); }
.scene-mini i:nth-child(3) { left: 82px; top: 16px; background: var(--accent-3); }
.scene-mini i:nth-child(4) { left: 30px; top: 56px; background: var(--muted); }
.stack { position: relative; width: 82px; height: 62px; }
/* 「叠」的错位放在外层 .deck 上，动画只写 .obj 的 transform：
   两者不抢同一个属性，才既看得出是一叠，又看得出是一张张抽出来的 */
.stack .deck { position: absolute; left: 0; top: 0; width: 66px; height: 46px; display: block; }
.stack .deck:nth-child(2) { transform: translate(8px, -8px) scale(.96); opacity: .8; }
.stack .deck:nth-child(3) { transform: translate(16px, -16px) scale(.92); opacity: .6; }
.stack .obj { position: absolute; left: 0; top: 0; width: 66px; height: 46px; }
.glasswrap { position: relative; width: 210px; height: 104px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; }
.glasswrap .bg { position: absolute; inset: 0; background: linear-gradient(120deg, var(--obj-b), var(--accent) 55%, var(--accent-3)); opacity: .7; border-radius: 12px; }
.glasswrap .bg.blur-pattern { opacity: 1; background: linear-gradient(135deg, #f1c37d, #d76a51 48%, #7167a4); }
.glasswrap .bg.blur-pattern::after { content: "01   10   11   20"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(28,20,34,.84); font: 700 28px/1 var(--mono); letter-spacing: .13em; text-shadow: 0 1px rgba(255,255,255,.6); background: repeating-linear-gradient(90deg, rgba(255,255,255,.7) 0 2px, transparent 2px 13px), repeating-linear-gradient(0deg, transparent 0 14px, rgba(28,20,34,.55) 14px 17px); }
/* 玻璃后面必须放「认得出来的东西」：硬条纹缓慢横移，才一眼看出哪块被磨砂了。
   位移写在 ::after 的 background-position 上而不是 .bg 的 transform——app.js 的
   applyTiming 拿舞台上第一个带动画的元素当基准时长，多塞一条会把面板入场时长一起算歪 */
.glasswrap .bg.colorful { opacity: 1; }
.glasswrap .bg.colorful::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(74deg, rgba(255, 255, 255, .78) 0 9px, transparent 9px 30px),
              repeating-linear-gradient(90deg, rgba(18, 12, 30, .5) 0 3px, transparent 3px 34px);
  animation: glassdrift 4.2s linear infinite alternate;
}
@keyframes glassdrift { from { background-position: 0 0, 0 0; } to { background-position: 96px 0, -96px 0; } }
.obj.glass { width: 118px; height: 62px; display: grid; place-items: center; font-size: 12px; font-family: var(--mono); color: var(--ink); background: color-mix(in srgb, #fff 52%, transparent); backdrop-filter: blur(14px) saturate(1.5); border: 1px solid rgba(255, 255, 255, .8); border-radius: 14px; }
.obj.glass.blur-demo { width: 166px; height: 72px; gap: 5px; align-content: center; background: rgba(255,255,255,.34); backdrop-filter: blur(0px) saturate(1); color: #241c21; box-shadow: 0 12px 24px rgba(43,20,35,.18), inset 0 1px rgba(255,255,255,.8); }
.obj.glass.blur-demo span { font: 600 15px/1.2 var(--body); }
.obj.glass.blur-demo small { font: 7px/1.2 var(--mono); letter-spacing: .06em; opacity: .72; }
[data-theme=ember] .obj.glass { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }

/* 玻璃材质常驻：1px 描边 + 顶部内高光 + 底部内衬光，入场动画只管面板出现 */
.obj.glass.edge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 22px -14px rgba(12, 8, 24, .5); }
.dof { display: flex; gap: 8px; align-items: center; }
.dof .card { width: 54px; height: 40px; }
.dof .near { background: var(--accent); }
.dof .mid { background: var(--obj-b); }
.dof .far { background: var(--muted); }
.rack { display: flex; gap: 14px; align-items: center; font-family: var(--disp); font-size: 26px; }
.gl, .chroma { font-family: var(--disp); font-weight: 700; letter-spacing: .04em; }
/* 故障入场：偏色副本各切上半/下半、按入场进度反向错开，扫描线随进度一起退场。
   偏移量和透明度读的都是入场那条动画写下的自定义属性，所以伪元素不用另配一份时序，
   慢放、重播、时长滑块会自动一起生效 */
@property --glitch-x { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --glitch-a { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --glitch-line { syntax: '<number>'; inherits: true; initial-value: 0; }
.obj.txt.glitch {
  font-weight: 700;
  background-image: repeating-linear-gradient(0deg,
    color-mix(in srgb, currentColor calc(var(--glitch-line) * 46%), transparent) 0 1px, transparent 1px 4px);
}
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; left: 0; top: 0;
  opacity: var(--glitch-a); pointer-events: none;
}
.glitch::before { color: rgba(255, 60, 120, .82); clip-path: inset(0 0 52% 0); transform: translateX(var(--glitch-x)); }
.glitch::after { color: rgba(60, 200, 255, .82); clip-path: inset(48% 0 0 0); transform: translateX(calc(var(--glitch-x) * -.62)); }
.num { font-family: var(--mono); font-size: 22px; font-variant-numeric: tabular-nums; }
.num.notab { font-variant-numeric: proportional-nums; }
.num-card { width: auto !important; min-width: 212px; height: 72px !important; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 0 16px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); box-shadow: 0 12px 26px -18px rgba(0,0,0,.4); }
.num-card b { font: 600 24px/1 var(--mono); font-variant-numeric: inherit; letter-spacing: .02em; white-space: nowrap; }
.num-card small { font: 9px/1 var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.num-card.notab b { letter-spacing: .04em; }
.num-card.tab { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--panel-2)); }
.num-card.tab b { font-variant-numeric: tabular-nums; }
.caret-demo { display: flex; align-items: center; gap: 2px; }
.caret { display: inline-block; width: 2px; height: 1.1em; background: var(--accent); }
.obj.link::after { transform: scaleX(0); }
.obj.txt.hl { background: linear-gradient(var(--accent), var(--accent)) 0 76% / 0% 40% no-repeat; padding: 0 3px; }
.obj.field.focus-demo, .focus-demo { outline: 2px solid transparent; }
/* 焦点环的定义约束就是「只在 :focus-visible 出现」，所以引擎给的那份无条件循环
   改成停在 0% 备用：键盘焦点进来才放行这 180ms，离开时描边必须压回透明
   （!important 是必要的——已结束动画的 both 填充值优先级高于普通声明） */
.stage .obj.focus-demo:not(:focus-visible) {
  animation-play-state: paused;
}
.stage .obj.focus-demo:not(:focus-visible):not(:focus) {
  outline-color: transparent !important;
  outline-offset: 4px !important;
}
.stage .obj.focus-demo:focus-visible,
.stage[data-keyboard="true"] .obj.focus-demo:focus { animation-play-state: running; }
.focus-set { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 340px; padding: 22px 20px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel-2) 82%, transparent); box-shadow: 0 14px 30px -24px rgba(0,0,0,.42); }
.focus-caption { flex-basis: 100%; margin-bottom: 4px; color: var(--muted); font: 9px/1.2 var(--mono); letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.stage .focus-choice { min-width: 72px; height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); font: 12px var(--body); cursor: pointer; outline: 2px solid transparent; outline-offset: 4px; transition: outline-offset .18s var(--ease), background .18s var(--ease); }
.stage .focus-choice:focus-visible,
.stage[data-keyboard="true"] .focus-choice:focus { z-index: 1; outline: 3px solid var(--accent-2) !important; outline-offset: 4px !important; background: color-mix(in srgb, var(--accent-2) 9%, var(--panel)); }
.tilt-target { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.magnet { transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.origin-demo { transform-origin: center; }
.stage:has(.dfield), .stage:has(.thumbs), .stage:has(.scrolly), .stage:has(.sj), .stage:has(.cp) { cursor: inherit; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* 原则类舞台的附属部件 */
.follow { display: flex; align-items: center; }
.follow .head { width: 36px; height: 36px; border-radius: 11px; background: var(--accent); }
.follow .tail { width: 13px; height: 13px; border-radius: 50%; background: var(--obj-b); margin-left: -3px; opacity: .85; }
.follow .tail:nth-of-type(3) { width: 9px; background: var(--accent-3); }
.sec { position: relative; }
.sec .dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-3); right: -3px; top: -5px; }
.sec .dot + .dot { right: 14px; top: -12px; width: 8px; background: var(--obj-b); }
.stage3 { display: flex; gap: 8px; align-items: center; }
.stage3 .card { width: 46px; height: 34px; background: var(--muted); }
.stage3 .hot { background: linear-gradient(150deg, var(--accent), var(--obj-b)); }
.rack { display: flex; gap: 16px; align-items: center; font-family: var(--disp); font-size: 27px; }
.rack .a { color: var(--accent); }
.rack .b { color: var(--obj-b); }
.burst i, .amb i, .bokeh i { will-change: transform; }
.scrolly:focus-visible, .stage:focus-within { box-shadow: inset 0 0 0 1px var(--accent-2); }

/* ---------------- 滚动舞台 ---------------- */
.scrolly { position: relative; width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain; border-radius: 9px; background: var(--bg-2); scrollbar-width: thin; }
.scrolly::-webkit-scrollbar { width: 6px; height: 6px; }
.scrolly::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.sflow { display: grid; gap: 10px; padding: 12px; min-height: 340px; }
.srow-x { display: grid; place-items: center; height: 64px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--panel); font-size: 12.5px; color: var(--ink-2); }
.srow-x.enter { animation: kenter .42s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes kenter { from { opacity: 0; transform: translateY(14px); } }
.srow-x.skel { color: var(--muted); background: linear-gradient(90deg, var(--panel) 20%, var(--panel-2) 40%, var(--panel) 60%) 0 0 / 300% 100%; animation: shimm 1.3s linear infinite; }
@keyframes shimm { to { background-position: -220% 0; } }
.rv { display: grid; place-items: center; height: 62px; margin: 10px 12px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-2); opacity: 0; transform: translateY(22px); transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1); }
.rv.on { opacity: 1; transform: none; }
.scrolly[data-mode=driven] .rv { transition: none; }
/* 滚动监听开销：和 scroll-driven 共用一个舞台时读者看不出这条在讲什么，所以给它
   一个真对照组——同一个滚动进度驱动两条等长行程（46px，写死 px 才保证两边真的等长）
   的轨道：上条只改 transform（合成线程就能画完），下条每帧改 margin（每帧回主线程
   重排）。进度用 CSS 滚动驱动动画绑定，正好不挂 scroll 监听，是这条术语的正面答案。
   下条的 steps(6) 是「掉帧」的示意：真主线程被堵多久取决于机器，演示不能赌它。
   时长写 1s 而不是 auto：applyTiming 会把 parseFloat 失败的 'auto' 写成 0s。 */
.sj { position: relative; width: 100%; height: 100%; overflow: hidden auto; overscroll-behavior: contain; border-radius: 9px; background: var(--bg-2); scrollbar-width: thin; }
.sj::-webkit-scrollbar { width: 6px; }
.sj::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.sj-run { display: block; height: 420px; }
.sj-row {
  position: sticky; display: flex; align-items: center; width: 84px; height: 30px; padding: 0 9px;
  border-radius: 8px; font: 10px/1 var(--mono); font-style: normal; white-space: nowrap;
}
.sj-row.a { top: 10px; background: var(--accent); color: var(--accent-ink); }
.sj-row.b { top: 46px; background: var(--obj-b); color: var(--ink); }
@supports (animation-timeline: scroll()) {
  .sj-row { animation-duration: 1s; animation-fill-mode: both; animation-timeline: scroll(nearest block); }
  .sj-row.a { animation-name: sjx; animation-timing-function: linear; }
  .sj-row.b { animation-name: sjg; animation-timing-function: steps(6); }
}
@keyframes sjx { from { transform: translateX(0); } to { transform: translateX(46px); } }
@keyframes sjg { from { margin-left: 0; } to { margin-left: 46px; } }
.plx { position: absolute; left: 0; right: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; height: 60px; border-radius: 8px; }
.plx.far { top: 20px; background: color-mix(in srgb, var(--obj-b) 30%, transparent); color: var(--ink-2); }
.plx.mid { top: 110px; background: color-mix(in srgb, var(--obj-b) 60%, transparent); }
.plx.near { top: 210px; background: var(--accent); color: var(--accent-ink); }
.plxtall { height: 420px; }
.stick { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 9px 11px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
.stick b { font-size: 12.5px; }
.stick em { font-family: var(--mono); font-size: 11px; color: var(--accent); font-style: normal; }
.sflow.tight { padding: 8px; }
.sp-bar { position: sticky; top: 0; display: block; height: 4px; background: var(--accent); transform-origin: left; transform: scaleX(0); z-index: 3; }
.ssec { display: grid; place-items: center; height: 130px; margin: 8px; border-radius: 9px; background: linear-gradient(150deg, color-mix(in srgb, var(--obj-a) 30%, var(--panel)), var(--panel)); border: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-2); }
.mp-title { display: block; text-align: center; font-family: var(--disp); padding: 14px 0 4px; }
.scrolly.snap { overflow: hidden; }
.ios-wheel { display: grid; grid-template-rows: auto 1fr; gap: 8px; width: min(100%, 390px); height: 178px; margin-inline: auto; padding: 10px 14px 12px; border: 1px solid var(--line-soft); border-radius: 16px; background: linear-gradient(145deg, var(--panel), var(--panel-2)); box-shadow: 0 13px 34px -25px color-mix(in srgb, var(--ink) 35%, transparent), inset 0 1px #fff8; }
.wheel-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; }
.wheel-head > span { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.wheel-head > b { grid-column: 2; grid-row: 1 / span 2; color: var(--ink); font: 500 17px/1 var(--disp); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wheel-head > small { color: var(--muted); font: 8px var(--mono); }
.wheel-cols { position: relative; display: grid; grid-template-columns: .9fr .75fr 1.1fr; gap: 4px; min-height: 0; overflow: hidden; border-radius: 11px; background: color-mix(in srgb, var(--bg) 72%, transparent); }
.wheel-col { position: relative; z-index: 1; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; scroll-snap-type: y mandatory; scroll-padding-block: 52px; touch-action: pan-y; mask-image: linear-gradient(transparent, #000 21%, #000 79%, transparent); }
.wheel-col::-webkit-scrollbar { display: none; }
.wheel-list { display: grid; padding-block: 51px; }
.wheel-item { height: 42px; scroll-snap-align: center; border: 0; background: transparent; color: var(--muted); font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; opacity: calc(1 - min(.68, abs(var(--wheel-distance, 0)) * .25)); transform: perspective(150px) rotateX(calc(var(--wheel-distance, 0) * -14deg)) scale(calc(1 - min(.14, abs(var(--wheel-distance, 0)) * .045))); transition: color .16s, opacity .16s, transform .16s; }
.wheel-item.is-active { color: var(--accent); font-weight: 700; opacity: 1; transform: none; }
.wheel-focus { position: absolute; z-index: 0; inset: 50% 2px auto; height: 40px; transform: translateY(-50%); border-top: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 8px; pointer-events: none; }
.st-chart { position: sticky; top: 8px; display: flex; gap: 7px; align-items: flex-end; height: 84px; padding: 10px; }
.st-chart u { flex: 1; height: 100%; border-radius: 5px 5px 2px 2px; background: var(--accent); transform-origin: bottom; transform: scaleY(.2); transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.step { display: grid; place-items: center; height: 76px; margin: 10px; border-radius: 9px; border: 1px solid var(--line-soft); background: var(--panel); font-size: 12.5px; color: var(--muted); transition: all .35s ease-out; }
.step.on { border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.hijack { scroll-snap-type: y mandatory; height: 100%; }
.hj { display: grid; place-items: center; height: 100%; scroll-snap-align: start; font-family: var(--disp); font-size: 17px; }
.hj:nth-child(odd) { background: color-mix(in srgb, var(--accent) 14%, var(--bg-2)); }
.hj:nth-child(even) { background: color-mix(in srgb, var(--obj-b) 16%, var(--bg-2)); }
.lm-list { display: grid; gap: 10px; padding: 12px; }
.sentinel { display: block; height: 2px; }
.navrow { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.navrow.tight { position: sticky; top: 0; z-index: 3; margin: 0; padding: 8px; background: color-mix(in srgb, var(--bg-2) 90%, transparent); }
.bnote { font-size: 10.6px; font-family: var(--mono); color: var(--muted); margin: 6px 0 0; line-height: 1.5; }

/* ---------------- 列表类舞台 ---------------- */
.acc { width: 100%; display: grid; gap: 6px; }
.acc-i { border: 1px solid var(--line-soft); border-radius: 10px; background: var(--panel); overflow: hidden; }
.acc-h { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; padding: 9px 11px; text-align: left; }
.chev { display: inline-block; transition: transform .3s cubic-bezier(.16, 1, .3, 1); color: var(--accent); font-style: normal; font-family: var(--mono); }
.acc-i.open .chev { transform: rotate(90deg); }
.acc-p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.16, 1, .3, 1); }
.acc-i.open .acc-p { grid-template-rows: 1fr; }
.acc-p p { overflow: hidden; margin: 0; font-size: 12px; color: var(--muted); padding: 0 11px; }
.acc-i.open .acc-p p { padding-bottom: 11px; }
.flipcard { width: 116px; height: 82px; perspective: 800px; cursor: pointer; }
.fc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.fc-inner.flipped { transform: rotateY(180deg); }
.fc-face { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; border-radius: 11px; backface-visibility: hidden; }
.fc-face.front { background: linear-gradient(150deg, var(--obj-a), var(--obj-b)); color: var(--accent-ink); }
.fc-face.back { transform: rotateY(180deg); background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2); }
.lblock { width: 100%; display: grid; gap: 8px; }
.mini.add-item, .mini.shuffle { justify-self: start; }
.llist { display: grid; gap: 6px; }
.lrow { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line-soft); font-size: 12px; color: var(--ink-2); }
.tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.tile { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; background: linear-gradient(150deg, var(--obj-a), var(--obj-b)); color: var(--accent-ink); }
.tabs { width: 100%; }
.tabbar { position: relative; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--panel-2); }
.tab { position: relative; z-index: 1; flex: 1; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 12px; padding: 6px 10px; transition: color .22s ease; }
.tab.on { color: var(--accent-ink); }
.ind { position: absolute; z-index: 0; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 14px) / 3); height: auto; border-radius: 999px; background: var(--accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 25%, transparent); transition: transform .38s cubic-bezier(.2,.9,.25,1.04), width .38s cubic-bezier(.2,.9,.25,1.04); }
.tabpanel { font-size: 12.2px; color: var(--muted); padding: 9px 2px 0; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.fchip { border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); border-radius: 20px; padding: 2px 10px; font-size: 11.5px; }
.fchip.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.fgrid { display: flex; flex-wrap: wrap; gap: 6px; }
.ftile { padding: 6px 9px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line-soft); font-size: 11px; font-family: var(--mono); color: var(--ink-2); transition: opacity .28s; }
.ftile.off { display: none; }
.inline-card { width: 100%; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--panel); padding: 11px 12px; }
.inline-card h4 { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }
.exp-p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .36s cubic-bezier(.16, 1, .3, 1); }
.inline-card.open .exp-p { grid-template-rows: 1fr; }
.exp-p p { overflow: hidden; margin: 0; font-size: 12px; color: var(--muted); padding-top: 0; transition: padding .36s; }
.inline-card.open .exp-p p { padding-top: 9px; }

/* ---------------- 指针类舞台 ---------------- */
.dfield { position: relative; width: 100%; height: 100%; display: grid; place-items: center; border: 1px dashed var(--line-soft); border-radius: 10px; }
.drag-ball { width: 42px; height: 42px; border-radius: 12px; background: var(--accent); cursor: grab; touch-action: none; }
.drag-ball.dragging { cursor: grabbing; }
.dfield .tip { position: absolute; bottom: 7px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.dlist { width: 100%; display: grid; gap: 7px; }
.drow { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line-soft); font-size: 12.5px; cursor: grab; touch-action: none; }
.drow.dragging { position: relative; cursor: grabbing; user-select: none; }
.term:not(.term--detail) .dlist { gap: 4px; }
.term:not(.term--detail) .dlist .drow { height: 26px; padding-inline: 8px; font-size: 10.5px; }
.term:not(.term--detail) .rframe { height: 128px; }
.grip { color: var(--muted); font-style: normal; letter-spacing: -2px; }
.swipelane { position: relative; width: 100%; min-height: 260px; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 8px; overflow: hidden; }
.swipe-stack { position: relative; width: min(220px, 72%); height: 220px; isolation: isolate; }
.swipe-card { position: absolute; inset: 0; overflow: hidden; border: 1px solid #fff9; border-radius: 18px; background: var(--panel); box-shadow: 0 18px 42px -24px #2b1c1590, 0 3px 10px #2b1c151e; cursor: grab; touch-action: pan-y; user-select: none; transform: translateY(calc(var(--layer) * 7px)) scale(calc(1 - var(--layer) * .045)); transform-origin: center bottom; transition: transform .34s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.swipe-card:active { cursor: grabbing; }
.swipe-card.dragging { transition: none; }
.swipe-card:not(:last-child) { pointer-events: none; }
.swipe-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.swipe-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #15191542 0%, transparent 29%, transparent 42%, #171a16d9 100%); }
.swipe-kicker { position: absolute; top: 13px; left: 14px; color: #fff; font: 8px var(--mono); letter-spacing: .12em; text-shadow: 0 1px 8px #0008; }
.swipe-copy { position: absolute; right: 16px; bottom: 15px; left: 16px; display: grid; gap: 4px; color: #fff; text-shadow: 0 1px 12px #0008; }
.swipe-copy b { font: 600 20px/1.1 var(--disp); }
.swipe-copy span { color: #ffffffd9; font-size: 9px; }
.swipe-copy p { max-width: 28em; margin: 4px 0 0; color: #ffffffd0; font-size: 9px; line-height: 1.45; }
.swipe-stamp { position: absolute; top: 22px; padding: 4px 8px; border: 2px solid currentColor; border-radius: 5px; font: 800 12px var(--mono); letter-spacing: .1em; opacity: 0; transition: opacity .14s; }
.swipe-stamp--yes { left: 15px; color: #b8f0cc; transform: rotate(-12deg); }
.swipe-stamp--no { right: 15px; color: #ffd3c9; transform: rotate(12deg); }
.swipe-card.swipe-right .swipe-stamp--yes, .swipe-card.swipe-left .swipe-stamp--no { opacity: var(--swipe-progress, .2); }
.swipe-actions { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.swipe-hint { color: var(--muted); font: 8px var(--mono); }
.swipe-action { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line-soft); border-radius: 50%; background: var(--panel); color: var(--accent); font: 18px/1 var(--body); box-shadow: 0 4px 12px #34241412; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.swipe-action:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 7px 16px #34241422; }
.swipe-no { color: #9f776a; }
.swipe-yes { color: #b85d50; font-size: 19px; }
.swipe-end { position: absolute; inset: 15% 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line-soft); border-radius: 18px; background: linear-gradient(145deg, var(--panel), var(--panel-2)); text-align: center; box-shadow: 0 16px 35px -24px #32231466; }
.swipe-end > span { color: var(--muted); font: 8px var(--mono); letter-spacing: .12em; }
.swipe-end > b { color: var(--ink); font: 500 14px var(--disp); }
.swipe-restart { margin-top: 5px; padding: 7px 12px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--panel); color: var(--ink); font: 10px var(--body); cursor: pointer; }
.swipe-restart i { margin-left: 6px; color: var(--accent); font-style: normal; }
.term:not(.term--detail) .swipelane { min-height: 158px; gap: 4px; }
.term:not(.term--detail) .swipe-stack { width: min(145px, 70%); height: 128px; }
.term:not(.term--detail) .swipe-card { border-radius: 12px; }
.term:not(.term--detail) .swipe-copy { right: 9px; bottom: 9px; left: 9px; gap: 2px; }
.term:not(.term--detail) .swipe-copy b { font-size: 13px; }
.term:not(.term--detail) .swipe-copy span, .term:not(.term--detail) .swipe-copy p { font-size: 7px; }
.term:not(.term--detail) .swipe-kicker { top: 8px; left: 9px; font-size: 6px; }
.term:not(.term--detail) .swipe-actions { gap: 6px; }
.term:not(.term--detail) .swipe-action { width: 22px; height: 22px; font-size: 13px; }
.term:not(.term--detail) .swipe-hint { font-size: 6px; }
.rframe { position: relative; width: min(100%, 360px); height: 176px; border: 1px solid var(--line); border-radius: 15px; display: grid; place-items: center; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 7%, var(--panel-2)), var(--panel)); overflow: hidden; }
.rframe::before { content: "可移动范围 / REST LIMIT"; position: absolute; inset: 22px 28px; display: grid; place-items: start center; padding-top: 5px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 10px; color: var(--muted); font: 8px/1 var(--mono); letter-spacing: .1em; pointer-events: none; }
.rframe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.rpanel { z-index: 1; width: 100px; height: 62px; border: 0; border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 76%, white), var(--accent)); color: var(--accent-ink); display: grid; place-content: center; gap: 3px; text-align: center; font: 600 12px/1.2 var(--body); cursor: grab; touch-action: none; box-shadow: 0 9px 20px -10px color-mix(in srgb, var(--accent) 75%, transparent), inset 0 1px rgba(255,255,255,.4); user-select: none; }
.rpanel:active { cursor: grabbing; }
.rpanel small { font: 8px/1.2 var(--mono); opacity: .72; }
.rframe.is-resisting .rpanel { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-3) 70%, transparent), 0 9px 20px -10px color-mix(in srgb, var(--accent) 75%, transparent); }
.bigbtn { position: relative; overflow: hidden; width: 190px; height: 52px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; font-size: 13px; touch-action: none; }
.ripple-btn { cursor: pointer; }
.rp { position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--accent) 45%, transparent); transform: scale(0); animation: rpanim .62s cubic-bezier(.16, 1, .3, 1) forwards; pointer-events: none; }
@keyframes rpanim { to { transform: scale(1); opacity: 0; } }
.hold-btn { display: grid; place-items: center; }
.hfill { position: absolute; inset: 0; background: var(--accent-3); transform-origin: left; transform: scaleX(0); }
.hold-btn span { position: relative; }
.hold-btn.ok { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.ptr { position: relative; width: 100%; height: 100%; overflow: hidden; }
.ptr-ind { position: absolute; left: 50%; top: -22px; margin-left: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--accent); border-top-color: transparent; opacity: 0; }
.ptr-ind.spin { animation: rot .8s linear infinite; }
@keyframes rot { to { transform: translateY(18px) rotate(360deg); } }
.ptr-list { display: grid; gap: 7px; padding-top: 6px; touch-action: none; cursor: grab; }
.thumbs { display: flex; gap: 8px; width: 100%; align-items: flex-start; }
.thumb { flex: 1; height: 74px; border-radius: 10px; display: grid; place-items: center; font-size: 11.5px; background: linear-gradient(150deg, var(--obj-b), var(--obj-a)); color: var(--accent-ink); cursor: pointer; transition: box-shadow .3s; }
.thumb.big { position: absolute; inset: 6px; z-index: 4; flex: none; font-size: 15px; box-shadow: var(--shadow); }
.thumbs { position: relative; }
.stack2 { position: relative; width: 190px; height: 108px; overflow: hidden; border-radius: 11px; border: 1px solid var(--line); }
.pane { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; transition: transform .42s cubic-bezier(.16, 1, .3, 1); }
.p1 { background: var(--panel-2); }
.p2 { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 26%, var(--panel)), var(--panel-2)); transform: translateX(100%); }
.stack2[style*="translateX"] .p2 { transform: translateX(0); }

/* ---------------- 转场类舞台 ---------------- */
.xf { position: relative; width: 150px; height: 92px; }
.xf i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 11px; font-size: 13px; }
.xf-a { background: linear-gradient(150deg, var(--obj-b), var(--obj-a)); color: var(--accent-ink); }
.xf-b { background: linear-gradient(150deg, var(--accent-3), var(--accent)); color: var(--accent-ink); }
.cont { width: 100%; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--panel); padding: 10px 12px; }
.cont h5 { margin: 0 0 8px; font-size: 13px; font-family: var(--disp); }
.crow { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 5px 0; border-top: 1px dashed var(--line-soft); }
.crow em { font-style: normal; color: var(--accent); font-family: var(--mono); font-size: 11px; }
.mpathwrap { display: grid; gap: 4px; justify-items: center; }
.mp { width: 104px; height: 104px; }
.mp polygon { fill: color-mix(in srgb, var(--accent) 26%, transparent); stroke: var(--accent); stroke-width: 2; }
.note { font-family: var(--mono); font-size: 9.5px; color: var(--muted); font-style: normal; }
.vt { position: relative; }
.vt-demo { width: min(100%, 430px); min-height: 112px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 14px; background: linear-gradient(145deg, var(--panel), var(--panel-2)); box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 7%, transparent); }
.vt-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 0 1px 8px; font-size: 10px; color: var(--ink-2); }
.vt-toolbar span { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.vt-toolbar small, .vt-card small, .vt-info > small { font: 9px var(--mono); color: var(--muted); }
.vt-live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
.vt-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.vt-card { min-width: 0; padding: 4px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 10px; text-align: left; color: var(--ink); background: color-mix(in srgb, var(--bg) 75%, transparent); cursor: pointer; transition: transform .24s cubic-bezier(.2,.8,.2,1), border-color .24s, box-shadow .24s; }
.vt-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 7px 16px color-mix(in srgb, var(--ink) 10%, transparent); }
.vt-card b { display: block; overflow: hidden; margin: 5px 3px 1px; font-size: 10px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.vt-card small { display: block; margin: 0 3px 2px; font-size: 8px; }
.vt-photo { position: relative; display: block; width: 100%; height: 58px; overflow: hidden; border-radius: 7px; isolation: isolate; background: linear-gradient(160deg, #dce4dc 0 34%, #9bb2a4 35% 49%, #627b6f 50% 66%, #374c48 67%); }
.vt-photo::before, .vt-photo::after { content: ""; position: absolute; z-index: 0; inset: auto -8% 0; height: 65%; background: #738d7f; clip-path: polygon(0 100%, 28% 17%, 44% 68%, 67% 4%, 100% 100%); }
.vt-photo::after { height: 48%; opacity: .65; background: #405c52; clip-path: polygon(0 100%, 36% 5%, 56% 69%, 76% 18%, 100% 100%); }
.vt-photo.vt-photo--1 { background: linear-gradient(160deg, #d9d9ca 0 35%, #b9a886 36% 58%, #756d56 59%); }
.vt-photo.vt-photo--1::before { background: #ab9870; }
.vt-photo.vt-photo--1::after { background: #645f4e; }
.vt-photo.vt-photo--2 { background: linear-gradient(160deg, #d5e1df 0 38%, #829d91 39% 57%, #435e57 58%); }
.vt-photo.vt-photo--2::before { background: #8da99b; }
.vt-photo.vt-photo--2::after { background: #48665b; }
.vt-photo em { position: absolute; z-index: 1; top: 5px; left: 6px; color: rgba(255,255,255,.85); font: 8px var(--mono); font-style: normal; text-shadow: 0 1px 4px #27352e; }
.vt-detail { display: grid; grid-template-columns: 1.3fr .9fr; gap: 10px; align-items: stretch; min-height: 92px; }
.vt-gallery[hidden], .vt-detail[hidden] { display: none !important; }
.vt-detail-hero { min-width: 0; }
.vt-detail-hero .vt-photo { height: 100%; min-height: 92px; border-radius: 9px; }
.vt-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 9px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--bg); }
.vt-info h4 { margin: 4px 0 2px; font: 600 13px var(--disp); }
.vt-info p { margin: 0 0 7px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.vt-info .mini { padding: 4px 8px; font-size: 9px; }
.vt-demo[data-view="detail"] .vt-info { view-transition-name: vt-info; }
.vt-note { font: 8px var(--mono); letter-spacing: .08em; color: var(--accent); font-style: normal; }
.vt-hint { font-size: 9px; color: var(--muted); }
::view-transition-group(vt-hero) { animation-duration: 480ms; animation-timing-function: cubic-bezier(.2,.8,.2,1); z-index: 20; }
::view-transition-image-pair(vt-hero), ::view-transition-old(vt-hero), ::view-transition-new(vt-hero) { mix-blend-mode: normal; }
::view-transition-new(vt-info) { animation: vt-info-in 360ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-info-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.mc { position: relative; width: 100%; height: 100%; }
.mc i { position: absolute; inset: 0; display: grid; place-items: center; gap: 0; }
.mc b { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); }
.mc-a b { background: var(--obj-b); }
.mc s { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; text-decoration: none; font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.mc-b { opacity: 0; }
.cut { position: relative; width: 160px; height: 92px; }
.cut i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 11px; font-size: 13px; }
.cut-a { background: var(--panel-2); border: 1px solid var(--line-soft); }
.cut-b { background: linear-gradient(150deg, var(--accent-3), var(--accent)); color: var(--accent-ink); opacity: 0; }

/* ---------------- 文字类舞台 ---------------- */
.tw { font-family: var(--disp); font-size: 19px; display: flex; align-items: center; gap: 3px; min-height: 30px; }
.tw .caret, .caret-demo .caret { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tword { display: flex; font-family: var(--disp); font-weight: 700; font-size: 30px; letter-spacing: .02em; }
.tword span { display: inline-block; }
.lines i { display: block; overflow: hidden; font-style: normal; }
.lines { font-family: var(--disp); font-size: 19px; line-height: 1.34; }
.lines i { transform: translateY(105%); }
.kinetic { display: flex; gap: 8px; font-family: var(--disp); font-size: 22px; }
.kinetic b { display: inline-block; }
.tick { display: flex; gap: 2px; font-family: var(--mono); font-size: 26px; line-height: 1; font-style: normal; font-variant-numeric: tabular-nums; }
.tick .dg { position: relative; flex: 0 0 .66em; width: .66em; height: 1em; overflow: hidden; display: block; }
.tick { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); box-shadow: 0 12px 26px -18px rgba(0,0,0,.42); }
.tick .digit-strip { position: absolute; inset: 0 auto auto 0; display: flex; flex-direction: column; width: 100%; height: 10em; will-change: transform; }
.tick .digit-strip span { flex: 0 0 1em; width: 100%; height: 1em; display: grid; place-items: center; }
.cu { text-align: center; }
.cu b { display: block; font-family: var(--mono); font-size: 30px; color: var(--accent); font-variant-numeric: tabular-nums; }
.cu s { text-decoration: none; font-size: 11px; color: var(--muted); font-family: var(--mono); }
.num-compare { width: min(100%, 310px); display: grid; gap: 12px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); box-shadow: 0 12px 26px -18px rgba(0,0,0,.4); }
.num-row { display: grid; grid-template-columns: 70px minmax(110px, 1fr) 42px; align-items: center; gap: 7px 10px; }
.num-row small { grid-column: 1; grid-row: 1 / span 2; color: var(--muted); font: 10px/1.3 var(--body); }
.num-row b { grid-column: 2; grid-row: 1; justify-self: start; min-width: 0; text-align: left; font-size: 25px; line-height: 1; color: var(--ink); white-space: nowrap; }
.num-live.proportional { font-family: Georgia, "Times New Roman", serif; font-variant-numeric: proportional-nums; font-feature-settings: "pnum" 1; font-weight: 700; letter-spacing: -.035em; }
.num-live.tabular { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-size: 23px; font-weight: 650; letter-spacing: 0; }
.num-row .num-track { grid-column: 2; grid-row: 2; height: 2px; background: var(--line); border-radius: 2px; }
.num-row .num-track s { display: block; width: 1px; height: 2px; margin-top: 0; background: var(--accent); text-decoration: none; transition: width 100ms linear; }
.num-row em { grid-column: 3; grid-row: 1 / span 2; color: var(--muted); font: normal 9px/1.3 var(--mono); }
.gl { font-family: var(--disp); font-weight: 700; font-size: 30px; letter-spacing: .06em; }
.fw { position: relative; width: 116px; height: 34px; perspective: 600px; font-family: var(--disp); font-size: 22px; }
.fw span { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; }
/* 方向转场：两块面板 + 按钮，控制在舞台高度内 */
.stack2 { width: 186px; height: 82px; }
.navrow { margin-top: 6px; }

/* ---------------- 描边 / 性能 ---------------- */
.draw { width: 100%; height: 100%; }
.draw path, .draw circle { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.draw path { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); animation: drawing 2.6s cubic-bezier(.65, 0, .35, 1) infinite; }
.draw circle { stroke: var(--obj-b); animation: drawpop 2.6s ease-out infinite; }
@keyframes drawing { 0% { stroke-dashoffset: var(--len, 400); } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes drawpop { 0%, 45% { opacity: 0; transform: scale(.4); transform-origin: 82px 44px; } 60%, 100% { opacity: 1; transform: scale(1); transform-origin: 82px 44px; } }
.fps { text-align: center; width: 100%; }
.fps b { font-family: var(--mono); font-size: 34px; color: var(--accent); }
.fps s { font-family: var(--mono); font-size: 11px; color: var(--muted); text-decoration: none; margin-left: 4px; }
.fpsbar { display: block; height: 5px; margin: 8px auto 6px; width: 80%; border-radius: 3px; overflow: hidden; background: var(--panel-2); transform-origin: left; }
.fps-t { display: block; font-family: var(--mono); font-size: 9.5px; font-style: normal; color: var(--muted); text-align: center; }
.spark { display: flex; gap: 2px; height: 26px; align-items: flex-end; justify-content: center; }
.spark i { width: 3px; height: 100%; background: var(--accent); border-radius: 2px; transform-origin: bottom; transform: scaleY(var(--h, .5)); }
/* 感知性能：乐观更新。状态先变、服务器后到，两件事分开显示才讲得清「感知」 */
.opt { width: 100%; max-width: 340px; display: grid; gap: 8px; }
.orow {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; align-items: center;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2);
  transition: transform .18s var(--ease-out), border-color .2s, background .2s;
}
.orow:active { transform: scale(.985); }
.orow > b { font: 600 12.5px var(--body); }
.orow > s { color: var(--muted); font: 10.5px/1.4 var(--body); text-decoration: none; }
.orow .obtn { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.orow .ost { grid-column: 1 / -1; padding-top: 5px; color: var(--muted); font: 500 10px var(--mono); }
.orow.is-done { border-color: color-mix(in srgb, var(--ok) 42%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--panel-2)); }
.orow.is-synced .ost { color: var(--ok); }

/* 有目的的动效：同一次操作，左边带来源、右边只换字 */
.ppair { display: flex; gap: 12px; align-items: flex-start; }
.pcar {
  position: relative; flex: none; display: grid; gap: 7px; width: 148px; padding: 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
}
.pcar > em { color: var(--muted); font: 500 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; }
.pslot {
  display: grid; place-items: center; height: 44px; border: 1px dashed var(--line); border-radius: 9px;
  font: 600 12px var(--body); color: var(--ink-2);
}
.pslot.flash { animation: p-slot-flash .5s var(--ease-out); }
@keyframes p-slot-flash { from { background: color-mix(in srgb, var(--accent) 24%, transparent); } to { background: transparent; } }
.pitems { display: grid; gap: 5px; }
.pitems s {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  font: 500 11px var(--body); text-decoration: none; cursor: pointer;
}
.pghost {
  position: absolute; display: grid; place-items: center; padding: 6px 8px;
  border: 1px solid var(--accent); border-radius: 8px; background: var(--panel);
  font: 500 11px var(--body); color: var(--ink); pointer-events: none; will-change: transform;
}

.bench { width: 100%; display: grid; gap: 7px; }
.bench .run { justify-self: start; }
.brow { display: grid; grid-template-columns: 62px 1fr 54px; gap: 8px; align-items: center; font-size: 11px; }
.brow label { font-family: var(--mono); color: var(--muted); font-size: 10px; }
.brow em { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); font-style: normal; text-align: right; }
.bbar { display: block; height: 12px; border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.bbar b { display: block; height: 100%; transform: scaleX(.1); transform-origin: left; background: var(--muted); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.bbar.good b { background: var(--ok); }
.bbar.bad b { background: var(--bad); }
.ghost-cells { display: flex; flex-wrap: wrap; gap: 1px; max-height: 34px; overflow: hidden; }
.ghost-cells.flash .gc { background: var(--accent); }
.dropwrap { width: 100%; display: grid; gap: 9px; }
.droprow { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: center; }
.droprow label { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.frames { display: flex; gap: 2px; height: 22px; align-items: center; }
.frames u { display: block; width: 5px; height: 18px; border-radius: 2px; background: var(--ok); }
.frames u.miss { background: var(--line); height: 8px; }
.dropbar { display: block; height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.dropbar b { display: block; height: 100%; transform-origin: left; transform: scaleX(1); background: var(--ok); transition: transform .4s var(--ease-out), background .4s; }
.bnote { margin: 0; font-size: 9.5px; line-height: 1.45; color: var(--muted); }
.gc { width: 3px; height: 3px; background: var(--line); }
.jank { width: 100%; display: grid; gap: 9px; }
.jank i {
  position: relative; display: flex; align-items: center; height: 26px; width: 96px; padding-left: 8px;
  border-radius: 8px; background: var(--accent); font-size: 9.5px; font-family: var(--mono);
  color: var(--accent-ink); font-style: normal; white-space: nowrap;
}
.jank .j-b { background: var(--bad); color: #fff; }
.wc { width: 100%; display: grid; gap: 9px; }
.wc i {
  position: relative; display: flex; align-items: center; height: 26px; padding: 0 9px;
  border-radius: 8px; background: var(--accent); font-family: var(--mono); font-size: 10px;
  color: var(--accent-ink); font-style: normal; white-space: nowrap;
}
/* 行要跑 90px，就得先把这 90px 让出来：不留空档的话 translateX 直接把舞台撑出横向溢出 */
.wc i { max-width: calc(100% - 92px); }
.wc .wc-b { background: var(--obj-b); color: var(--ink); }
/* compositing 的 A 侧必须完全交给 CSS：JS 逐帧写就不算“留在合成线程” */
.stage.kind-perf .wc-a { animation: wc-slide 3s cubic-bezier(.37,0,.63,1) infinite alternate both; will-change: auto; }
.wc-perm { will-change: transform; }
@keyframes wc-slide { from { transform: translateX(0) } to { transform: translateX(90px) } }
.wc-timed { background: var(--accent-2) !important; color: var(--accent-ink) !important; }
.ladder { width: 100%; display: grid; gap: 6px; }
.lad { display: grid; grid-template-columns: 1fr 74px; gap: 2px 8px; align-items: center; border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 6px 8px; background: var(--panel); font-style: normal; }
.lad b { font-size: 11px; font-family: var(--mono); font-weight: 400; color: var(--ink-2); }
.lad s { grid-column: 1; font-size: 9px; text-decoration: none; color: var(--muted); }
/* 成本条：越贵越长越红，入场时就按这个长度画出来 */
.lad u.cost { grid-column: 2; grid-row: 1 / span 2; display: block; height: 100%; min-height: 26px; border-radius: 5px; background: var(--panel-2); overflow: hidden; position: relative; }
.lad u.cost i { position: absolute; inset: 0 auto 0 0; width: var(--cost, 100%); border-radius: 5px; background: var(--bad);
  animation: costin 1.4s var(--ease-out) both; }
.lad:nth-child(2) u.cost i { background: var(--accent-3); }
.lad:nth-child(3) u.cost i { background: var(--ok); }
@keyframes costin { from { transform: scaleX(0); } }
.safe { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; }
.safe i { display: grid; grid-template-columns: auto auto; gap: 4px; align-items: center; border-radius: 8px; padding: 4px 7px; background: var(--panel-2); border: 1px solid var(--line-soft); font-size: 10.5px; font-family: var(--mono); font-style: normal; }
.safe i b { font-weight: 400; color: var(--ink-2); }
.safe i s { text-decoration: none; letter-spacing: 1px; }
.safe i.ok s { color: var(--ok); }
.safe i.warn s { color: var(--accent-3); }
.safe i.bad s { color: var(--bad); }
.safe i s { font-size: 9px; }
.tokens { width: min(100%, 820px); margin-inline: auto; display: grid; gap: 24px; padding: 28px clamp(16px, 5vw, 68px); }
.tk { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: clamp(12px, 3vw, 32px); font-style: normal; }
.tk-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; white-space: nowrap; }
.tk-label b { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.tk-label span { font-family: var(--mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tk-track { position: relative; height: 24px; border: 1px solid var(--line-soft); border-radius: 999px; background: color-mix(in srgb, var(--panel-2) 76%, transparent); }
.tk-track::before { content: ""; position: absolute; left: 0; top: 50%; height: 4px; width: 100%; border-radius: inherit; transform: translateY(-50%); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--obj-b) 24%, transparent)); }
.tk-track i { position: absolute; left: 0; top: 50%; width: 18px; height: 18px; border: 3px solid var(--panel); border-radius: 50%; background: var(--accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent); transform: translateY(-50%); animation: tkrun var(--tk) var(--ease-standard) infinite alternate; }
.tk-note { margin: 4px 0 0 112px; color: var(--muted); font-size: 12px; line-height: 1.6; }
@keyframes tkrun { from { left: 0; } to { left: calc(100% - 18px); } }
.cvbox { padding: 0; background: none; }
.cvlist { width: 100%; display: grid; gap: 5px; padding: 6px; }
/* 一条规则搞定：后一份 .cvi 把 display 改回 grid 居中，标签被拆成两行居中，
   perf:cv 的「普通区块 vs CV」反而读不出来，高度也和 contain-intrinsic-size 对不上 */
.cvi {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 30px;
  padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--panel);
  font-size: 10.5px; font-style: normal; color: var(--muted);
}
.cvi b { font-weight: 400; font-family: var(--mono); font-size: 10px; color: var(--ink-2); }
.cvi s { text-decoration: none; color: var(--muted); font-size: 9.5px; white-space: nowrap; }
/* 真的挂上 CV：跳过渲染时这一格高度由 intrinsic-size 撑住，滚动条会出现可感知的跳动 */
.cvi.cv { contain-intrinsic-size: auto 30px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.stage:has(.cvbox) .cvi.cv { content-visibility: auto; }

/* ---------------- 配方抽屉 ---------------- */
.recipe {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 0 clamp(10px, 3vw, 30px) clamp(10px, 2vw, 20px);
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}
.recipe-in {
  max-width: 900px; margin: 0 auto; border-radius: 28px; background: var(--panel-2);
  box-shadow: 0 24px 48px -18px rgba(20, 16, 36, .38); padding: 18px 20px 20px; display: grid; gap: 12px;
  animation: recin .4s cubic-bezier(.2, 0, 0, 1) both;
}
@keyframes recin { from { transform: translateY(24px); opacity: 0; } }
.recipe-in header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.recipe-in header b { font-family: var(--disp); font-size: 16px; font-weight: 500; }
.recipe-in header #recipe-close { margin-left: auto; }
.rchip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.rchip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 6px 5px 12px; background: var(--bg); font-size: 12px; }
.rchip button { border: 0; background: none; color: var(--muted); font-size: 13px; line-height: 1; padding: 2px 5px; border-radius: 50%; }
.rchip button:hover { color: var(--bad); }
.recipe-steps { display: grid; gap: 8px; max-height: min(34vh, 300px); overflow: auto; padding-right: 3px; }
.recipe-step { min-width: 0; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--bg); }
.recipe-step-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.recipe-step-top > b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 550; }
.recipe-step-no { color: var(--accent); font: 10px var(--mono); }
.recipe-step-move, .recipe-step-remove { width: 30px; height: 30px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel); color: var(--ink-2); }
.recipe-step-remove:hover { color: var(--bad); }
.recipe-step-move:disabled { opacity: .35; cursor: default; }
.recipe-step-fields { display: grid; grid-template-columns: minmax(120px, 1.4fr) repeat(2, minmax(110px, 1fr)); gap: 8px; margin-top: 8px; }
.recipe-step-fields label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.recipe-step-fields input, .recipe-step-fields select { min-width: 0; width: 100%; min-height: 34px; padding: 5px 8px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel); color: var(--ink); font: 11px var(--body); }
.recipe-step-fields input:focus, .recipe-step-fields select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
#recipe-out { width: 100%; border: 0; background: var(--bg); color: var(--ink-2); border-radius: 16px; padding: 13px 15px; font-family: var(--mono); font-size: 12px; resize: vertical; }
#recipe-copy { justify-self: end; }

/* ---------------- 三维与运行时舞台 ---------------- */
.cube-scene { perspective: 800px; width: 66px; height: 66px; }
.cube { position: relative; width: 66px; height: 66px; transform-style: preserve-3d; will-change: transform; }
.cube i {
  position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--ink-2);
}
.cube .f1 { transform: translateZ(33px); }
.cube .f2 { transform: rotateY(90deg) translateZ(33px); }
.cube .f3 { transform: rotateY(180deg) translateZ(33px); }
.cube .f4 { transform: rotateY(-90deg) translateZ(33px); }
.cube .f5 { transform: rotateX(90deg) translateZ(33px); background: color-mix(in srgb, var(--obj-b) 22%, var(--panel)); }
.cube .f6 { transform: rotateX(-90deg) translateZ(33px); }
.stage.kind-cube { perspective: none; }
.no-gl { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.7; }
.glc, .c2d { position: absolute; inset: 8px 8px 26px; width: calc(100% - 16px); height: calc(100% - 34px); border-radius: 12px; }
/* ---- 精灵图：整条图 + 裁切窗口同屏，高亮格与播放格永远一致 ---- */
.sp2 { --fw: 31px; --fh: 38px; --n: 8; display: grid; gap: 9px; justify-items: center; width: 100%; }
.sp-strip {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), var(--fw)); width: calc(var(--fw) * var(--n)); height: var(--fh);
  border-radius: var(--r-xs); overflow: hidden; background-repeat: no-repeat; background-size: 100% 100%;
  border: 1px solid var(--line-soft); box-shadow: var(--shadow);
}
.sp-cell {
  display: grid; place-items: end center; align-content: end; justify-items: center; height: 100%; padding-bottom: 3px;
  font-family: var(--mono); font-size: 9px; font-style: normal;
  color: var(--muted); border-right: 1px dashed color-mix(in srgb, var(--ink) 14%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent); transition: background .1s linear;
}
.sp-cell:last-child { border-right: 0; }
.sp-cell.on { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); }
.sp-row { display: flex; align-items: center; gap: 12px; }
.sprite-el {
  width: var(--fw); height: var(--fh); background-repeat: no-repeat; flex: 0 0 auto; background-position-y: 0;
  background-size: calc(var(--fw) * var(--n)) var(--fh);
  background-position-x: calc(var(--f, 0) * var(--fw) * -1);
  border: 1.5px solid var(--accent); border-radius: var(--r-xs); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.sp-note { font-family: var(--mono); font-size: 9.5px; color: var(--muted); text-decoration: none; }
.sp2 .fr { font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.term--detail .sp2 { --fw: 74px; --fh: 86px; }
.lo { width: 100%; display: grid; gap: 9px; justify-items: center; }
.lo-shape { width: 44px; height: 44px; border-radius: 34% 66% 58% 42% / 48% 42% 58% 52%; background: linear-gradient(150deg, var(--accent), var(--obj-b)); }
.lo-track { position: relative; width: 100%; height: 22px; border: 1px solid var(--line-soft); border-radius: 7px; background: var(--panel-2); cursor: ew-resize; }
.lo-kf { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--accent); transform: rotate(45deg); }
.lo-head { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--accent-3); box-shadow: 0 0 8px var(--accent-3); }
.lo-val, .rig-out, .sc-val { font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.rivewrap { width: 100%; display: grid; gap: 6px; justify-items: center; }
.rv-fig { width: 62px; height: 62px; color: var(--accent); }
.rv-arm { transform-origin: 30px 34px; }
.rv-sm { display: flex; align-items: center; gap: 4px; }
.rv-node { font-family: var(--mono); font-size: 9.5px; padding: 2px 7px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); font-style: normal; transition: all .28s cubic-bezier(.16, 1, .3, 1); }
.rv-node.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.rv-edge { width: 14px; height: 1px; background: var(--line); position: relative; transition: background .3s; }
.rv-edge.hot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.rv-bar { display: flex; gap: 8px; align-items: center; }
.rv-out { font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.rigsvg { position: absolute; inset: 6px 10px 22px; color: var(--accent); }
.rigsvg g { stroke: currentColor; }
.rig-out { position: absolute; left: 11px; bottom: 8px; font-family: var(--mono); font-size: 9.5px; color: var(--muted); background: color-mix(in srgb, var(--bg) 82%, transparent); padding: 1px 6px; border-radius: 6px; }
.smil { width: 100%; height: 100px; color: var(--muted); }
.sc { width: 100%; display: grid; gap: 8px; justify-items: center; }
.sc-obj { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); }
.sc input { width: 82%; accent-color: var(--accent); }

/* ---------------- 三维与运行时：A/B 双联与上下文信息 ---------------- */
.ab2 { display: flex; gap: 10px; align-items: center; justify-content: center; width: 100%; height: 100%; }
.ab-cell { position: relative; display: grid; place-items: center; gap: 6px; flex: 1; min-width: 0; height: 100%; }
.ab-cell > u { position: absolute; bottom: 2px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--muted); text-decoration: none; }
.ab-cell + .ab-cell { border-left: 1px dashed var(--line-soft); }
.cube-sm { width: 46px; height: 46px; }
.cube-sm i { font-size: 9px; }
.cube-sm .f1, .cube-sm .f2, .cube-sm .f3, .cube-sm .f4, .cube-sm .f5, .cube-sm .f6 { border-radius: 4px; }
/* flat 一侧：子层被压平，六个面重成一个正方形 */
.flat3d { transform-style: flat; }

/* ---- 嵌套 3D 上下文 A/B：父板摆动，三块子板各带 translateZ ---- */
.ns-ab { gap: 4px; }
.ns-scene { display: grid; place-items: center; width: 100%; height: 78%; perspective: 420px; }
.ns-parent {
  position: relative; display: block; width: 108px; height: 74px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  animation: ns-turn 5.2s var(--ease-standard) infinite alternate;
  transform-origin: 50% 50%;
}
.ns-parent.keep3d { transform-style: preserve-3d; }
.ns-parent.flat3d { transform-style: flat; }
.ns-parent s {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center;
  width: 92px; height: 20px; margin: -10px 0 0 -46px; border-radius: 6px;
  background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 8.5px;
  text-decoration: none; transform: translateZ(var(--z));
  box-shadow: 0 2px 6px -3px rgba(20, 16, 36, .5);
}
.ns-parent s:nth-child(1) { background: var(--obj-a); }
.ns-parent s:nth-child(3) { background: var(--obj-b); }
/* flat 时三块全落在同一平面：用一点 y 偏移让它们仍然可见，但深度差被抹平 —— 对比点在“没有视差” */
.ns-parent.flat3d s { transform: translateZ(0) translateY(calc(var(--dy, 0px))); }
.ns-parent.flat3d s:nth-child(1) { --dy: -24px; }
.ns-parent.flat3d s:nth-child(2) { --dy: 0px; }
.ns-parent.flat3d s:nth-child(3) { --dy: 24px; }
@keyframes ns-turn { from { transform: rotateY(-38deg) rotateX(8deg); } to { transform: rotateY(38deg) rotateX(-4deg); } }
/* 详情页舞台有 320px 高、1300px 宽，卡片尺寸下画好的小东西放进去就成了中间一小坨 */
.term--detail .ns-ab { gap: 40px; }
.term--detail .ns-scene { height: 74%; perspective: 620px; }
.term--detail .ns-parent { width: 250px; height: 168px; border-radius: var(--r-md); }
.term--detail .ns-parent s { width: 214px; height: 38px; margin: -19px 0 0 -107px; border-radius: var(--r-sm); font-size: 12px; }
.term--detail .ns-parent.flat3d s:nth-child(1) { --dy: -54px; }
.term--detail .ns-parent.flat3d s:nth-child(3) { --dy: 54px; }
.term--detail .ab-cell > u { font-size: 12.5px; bottom: 0; }
.term--detail .ab-cell + .ab-cell { border-left: 1px dashed var(--line); }
.flipcard2 {
  position: relative; display: block; width: 62px; height: 62px; border-radius: 10px;
  transform-style: preserve-3d; will-change: transform;
}
.flipcard2 .fp, .flipcard2 .bp {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px;
  font-size: 11px; backface-visibility: hidden;
}
.flipcard2 .fp { background: linear-gradient(150deg, var(--obj-a), var(--obj-b)); color: var(--accent-ink); }
.flipcard2 .bp { transform: rotateY(180deg); background: var(--panel-2); border: 1px dashed var(--line); color: var(--muted); }
/* 关键：背面半透明才看得出 hidden / visible 的差别 */
.flipcard2.showback .bp { backface-visibility: visible; opacity: .82; }
.gl-info {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 5;
  font-family: var(--mono); font-size: 8.5px; line-height: 1.35; color: rgba(230, 224, 233, .72);
  background: rgba(10, 10, 16, .5); border-radius: 6px; padding: 3px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gl-ab { position: absolute; right: 6px; top: 30px; z-index: 6; font-size: 10.5px; padding: 4px 10px; background: rgba(10, 10, 16, .55); color: #E6E0E9; border: 1px solid rgba(255,255,255,.2); }
.gl-ab.off { color: rgba(230, 224, 233, .5); }
.glc.gl-lost { opacity: .2; filter: grayscale(1); }
.cn {
  position: absolute; left: 6px; right: 6px; bottom: 5px; z-index: 5;
  font-family: var(--mono); font-size: 9px; color: var(--muted); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------- 页脚 ---------------- */
.foot { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 30px; }
.foot h4 { font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.refs { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.refs li { display: grid; gap: 1px; font-size: 13px; }
.refs a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.refs a:hover { color: var(--accent); border-color: var(--accent); }
.refs span { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.foot-self p { margin: 0; font-size: 13px; color: var(--muted); }
.foot-self code { font-size: 11.5px; color: var(--accent-2); }

/* ==========================================================================
   组合范式（第 16 类）—— 指针 / 滚动 / 悬停 / 点击驱动的整屏编排
   ========================================================================== */
.stage.kind-compound { padding: 8px; }
/* 组合范式是「整屏编排」，256×132 的台子装不下层次：这一类单独放大 */
[data-cat=compound] .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 336px), 1fr)); gap: 18px; }
.term:not(.term--detail).cat-compound { height: 346px; }
.term:not(.term--detail).cat-compound .stage { height: 228px; }
.term:not(.term--detail).cat-compound.has-ctl .stage { height: 200px; }
.term:not(.term--detail).cat-compound .pctl { height: 26px; }
.term:not(.term--detail).cat-compound .term-main { padding: 14px 6px 0; }
.term:not(.term--detail).cat-compound .en { font-size: 16.5px; }
.cp { position: relative; width: 100%; height: 100%; }
.cp-cap {
  position: absolute; left: 9px; bottom: 6px; z-index: 6; pointer-events: none;
  font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: var(--muted);
}
.cp-cap::before { content: "▸ "; color: color-mix(in srgb, var(--accent) 60%, transparent); }
.scrolly.cp { background: none; border-radius: 10px; }
.cp .sflow { padding: 10px; gap: 8px; }
.cp .srow-x {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  height: 54px; padding: 0 12px; text-align: left; font-size: 11.5px; letter-spacing: .02em;
  background: linear-gradient(105deg, color-mix(in srgb, var(--panel) 92%, transparent), var(--panel-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 7px 16px -14px rgba(30, 20, 6, .7);
}
.cp .srow-x b {
  font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; color: var(--accent);
}
.cp .srow-x span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.cp .srow-x em {
  font-family: var(--mono); font-style: normal; font-size: 8px; letter-spacing: .08em; color: var(--muted); opacity: .72;
}

/* ---- 回吸自 scroll-shadows / shrinking-header-shadow 两个真实案例 ---- */
/* 上下边缘投影只在「那个方向还有内容」时出现：
   两层不透明的 cover 用 background-attachment: local 跟着内容走，
   两层 radial 阴影用 scroll 钉住不动 —— 滚到顶时 cover 正好把顶部阴影盖掉。纯 CSS，零 JS。 */
.stage.kind-compound .scrolly--ss {
  --ss-cover: color-mix(in srgb, var(--bg) 93%, transparent);
  --ss-ink: color-mix(in srgb, var(--ink) 26%, transparent);
  background-image:
    linear-gradient(var(--ss-cover) 32%, transparent),
    linear-gradient(transparent, var(--ss-cover) 68%),
    radial-gradient(farthest-side at 50% 0, var(--ss-ink), transparent),
    radial-gradient(farthest-side at 50% 100%, var(--ss-ink), transparent);
  background-repeat: no-repeat;
  background-size: 100% 30px, 100% 30px, 100% 15px, 100% 15px;
  background-position: 0 0, 0 100%, 0 0, 0 100%;
  background-attachment: local, local, scroll, scroll;
}
/* 头部收缩得越多，投影越实；没有这层材质反馈，收缩看着就像被硬裁掉一块 */
.pi-head { box-shadow: 0 10px 20px -12px rgba(20, 16, 36, var(--ss, 0)); }
.pk { transition: filter .1s linear; }

/* ---- 详情页舞台是 340px 高、约 1300px 宽；卡片尺寸下画好的固定像素要整体放大，
       否则演示就缩在画面正中间一小坨（用户原话：有点小、不知道干嘛的） ---- */
.term--detail .stage.kind-compound .srow-x { height: 92px; font-size: 15px; border-radius: var(--r-sm); }
.term--detail .stage.kind-compound .srow-x b { font-size: 11px; }
.term--detail .stage.kind-compound .srow-x em { font-size: 9px; }
.term--detail .stage.kind-compound .cp .sflow { padding: 16px; gap: 14px; }
.term--detail .stage.kind-compound .cp-cap { font-size: 12px; bottom: 8px; left: 14px; }
/* ---------- 光标驱动视线跟随 · 仪表脸 + 视线射线 ----------
   配色只从当前调色板推导（--panel / --panel-2 / --ink / --accent / --line / --bg-2），
   所以五套主题都成立。原先这里是三代样式叠加，最上面一层写死了 #f2f0fb 紫底 + !important，
   把主题色全压掉了。
   读法：圆环 = 指针要去的地方，射线 = 视线此刻真正的指向，两者错开多少就是滞后。 */
.stage.kind-compound:has(.cp-gaze) {
  background:
    radial-gradient(120% 92% at 50% -12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%),
    linear-gradient(155deg, color-mix(in srgb, var(--panel) 90%, var(--ink)), var(--bg-2));
}
.cp-gaze { position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate; cursor: crosshair; touch-action: none; }
.gz-field {
  position: absolute; inset: 7% 8%; z-index: 0; overflow: hidden; border-radius: 18px;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, transparent 49.7%, color-mix(in srgb, var(--ink) 7%, transparent) 50%, transparent 50.3%),
    linear-gradient(transparent 49.7%, color-mix(in srgb, var(--ink) 7%, transparent) 50%, transparent 50.3%);
}
.gz-field::before, .gz-field::after {
  content: ""; position: absolute; border: 1px dashed color-mix(in srgb, var(--ink) 11%, transparent); border-radius: 50%;
}
.gz-field::before { inset: 16%; }
.gz-field::after { inset: 31%; }
.gz-axis { position: absolute; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.gz-axis-x { left: 8%; right: 8%; top: 50%; height: 1px; }
.gz-axis-y { top: 8%; bottom: 8%; left: 50%; width: 1px; }
.gz-cross { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 30%, transparent); }
/* 射线：角度由 JS 每帧写进 --ray，起点在场地中心，末端的小点是视线落点 */
.gz-ray {
  position: absolute; left: 50%; top: 50%; width: 47%; height: 1.5px; margin-top: -.75px;
  transform-origin: 0 50%; transform: rotate(var(--ray, 0deg));
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 66%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
}
.gz-ray u { position: absolute; right: -3px; top: -2.5px; width: 6.5px; height: 6.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.gz-target {
  position: absolute; left: var(--gx, 50%); top: var(--gy, 50%); width: 22px; height: 22px; margin: -11px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, transparent); border-radius: 50%;
  opacity: .38; transform: scale(.82);
  transition: opacity .26s var(--ease-out), transform .26s var(--ease-out), border-color .26s var(--ease-out);
}
.gz-target::before, .gz-target::after { content: ""; position: absolute; background: color-mix(in srgb, var(--accent) 40%, transparent); }
.gz-target::before { left: 50%; top: -6px; width: 1px; height: 34px; }
.gz-target::after { top: 50%; left: -6px; width: 34px; height: 1px; }
.gz-field.is-live .gz-target { opacity: 1; transform: scale(1); border-color: var(--accent); }
/* 脸：只用面板色加一点点强调色，深浅底都不脏 */
.gz-body {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 15px;
  width: 152px; height: 104px; padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); border-radius: 24px;
  background: linear-gradient(168deg, color-mix(in srgb, var(--panel) 96%, var(--accent)), color-mix(in srgb, var(--panel-2) 90%, var(--ink)));
  box-shadow: 0 20px 32px -24px color-mix(in srgb, var(--ink) 62%, transparent),
              inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent);
  will-change: transform;
}
.gz-eye {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 17%, transparent);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--panel) 34%, #fff) 0 40%, color-mix(in srgb, var(--panel-2) 80%, var(--ink)) 100%);
  box-shadow: inset 0 -3px 7px color-mix(in srgb, var(--ink) 13%, transparent);
  transform-origin: center;
}
.gz-pupil {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 60%, var(--ink));
  background: radial-gradient(circle at 33% 30%, color-mix(in srgb, #fff 76%, transparent) 0 14%, var(--accent) 15% 44%, color-mix(in srgb, var(--ink) 86%, var(--accent)) 46%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent);
}
.gz-eye.blink { transform: scaleY(.08); }
.gz-body + .cp-cap { margin-top: 0; }
.term--detail .stage.kind-compound .gz-body { width: 236px; height: 152px; gap: 26px; padding: 0 28px; }
.term--detail .stage.kind-compound .gz-eye { width: 58px; height: 58px; }
.term--detail .stage.kind-compound .gz-pupil { width: 24px; height: 24px; }
.term--detail .stage.kind-compound .gz-ray { width: 44%; }
@media (max-width: 640px) {
  .term--detail .stage.kind-compound .gz-body { width: min(66vw, 214px); height: min(42vw, 136px); gap: 18px; padding-inline: 20px; }
  .term--detail .stage.kind-compound .gz-eye { width: min(15vw, 50px); height: min(15vw, 50px); }
  .term--detail .stage.kind-compound .gz-pupil { width: min(6vw, 21px); height: min(6vw, 21px); }
}

.term--detail .pi-head { height: calc(var(--hh, 46%) + 96px); gap: 12px; padding: 8px 8px 16px; }
.term--detail .pi-hero { min-height: 52px; border-radius: var(--r-lg); }
.term--detail .pi-hero s { font-size: 13px; }
.term--detail .pi-flow { height: 78px; gap: 14px; }
.term--detail .pi-c { width: 116px; height: 70px; border-radius: var(--r-md); font-size: 17px; }
.term--detail .pi-c u { font-size: 11px; }
.term--detail .pi-tall { min-height: 760px; }
.term--detail .pk { height: 210px; margin-bottom: 250px; padding: 0 34px; border-radius: var(--r-lg); }
.term--detail .pk b { font-size: 14px; }
.term--detail .pk em { font-size: 31px; }
.term--detail .pk span { font-size: 15px; }
.term--detail .pk-l { gap: 8px; margin-top: 16px; }
.term--detail .pk-l u { height: 9px; }
.term--detail .vx-space { perspective: 620px; border-radius: var(--r-lg); }
.term--detail .vx-field { width: 460px; height: 460px; }
.term--detail .vx-r { border-width: 3px; }
.term--detail .vx-st { width: 4px; height: 44px; margin: -22px 0 0 -2px; transform-origin: 50% 22px; }
.term--detail .vx-core { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.term--detail .hs-pin { border-radius: var(--r-lg); }
.term--detail .hs-track { gap: 18px; padding: 0 22px; }
.term--detail .hs-c { width: 216px; height: 268px; padding: 0 20px; gap: 12px; border-radius: var(--r-lg); }
.term--detail .hs-c em { font-size: 12px; }
.term--detail .hs-c b { font-size: 27px; }
.term--detail .hs-c small { font-size: 11px; }
.term--detail .hs-bar { height: 8px; }
.term--detail .hs-hint { font-size: 11.5px; bottom: 14px; }
.term--detail .cp-ts { gap: 22px; }
.term--detail .tb { height: 76px; width: 224px; border-radius: 38px; }
.term--detail .tb.load { width: 76px; }
.term--detail .tb.load .tb-spin { width: 40px; }
.term--detail .tb.load .tb-lbl { width: 0; }
.term--detail .tb-spin { height: 40px; border-width: 4px; }
.term--detail .tb-lbl { font-size: 21px; }
.term--detail .tb.done { width: 220px; gap: 12px; }
.term--detail .tb.done .tb-ok { width: 26px; font-size: 25px; }
.term--detail .ts-flow i b { width: 28px; height: 28px; font-size: 13px; }
.term--detail .ts-flow i s { font-size: 11.5px; }
.term--detail .ts-flow em { width: 34px; height: 2px; }
.term--detail .sp-title { font-size: 19px; }
.term--detail .sp-grid { gap: 14px; }
.term--detail .sp-under { padding: 22px; gap: 18px; }
.term--detail .sp-grid s { height: 128px; padding: 13px; border-radius: var(--r-md); }
.term--detail .sp-grid s u { height: 8px; }
.term--detail .sp-grid s em { font-size: 13px; }

/* 1. 光标驱动视线跟随 */

/* 2. 滚动驱动主视觉重组 */
/* 头部整体钉住并收缩，正文从它下面走；收缩量由 --hh 驱动，才不会露出缝 */
.pi-head {
  position: sticky; top: 0; z-index: 4; display: grid; gap: 7px; padding: 4px 4px 12px;
  height: calc(var(--hh, 46%) + 62px); background: linear-gradient(var(--bg) 76%, transparent);
}
.pi-hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--hh, 46%); min-height: 34px; border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(140deg, var(--obj-a), var(--obj-b)); color: var(--accent-ink);
}
.pi-hero b { font-family: var(--disp); letter-spacing: .14em; }
.pi-hero s { font-size: 10px; text-decoration: none; white-space: nowrap; }
.pi-flow { display: flex; justify-content: center; align-items: flex-start; gap: 7px; height: 46px; }
.pi-c {
  display: grid; place-items: center; align-content: center; gap: 1px; width: 62px; height: 44px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  font-family: var(--mono); font-size: 11px; transform-origin: center; will-change: transform, opacity;
}
.pi-c u { font-size: 8px; text-decoration: none; color: var(--muted); }
.pi-tall { min-height: 420px; }

/* 3. 滚动驱动章节覆盖堆叠 */
.cp-stack { padding: 2px; }

.pk {
  position: sticky; top: calc(4px + var(--i) * var(--step, 14px));
  display: flex; flex-direction: column; justify-content: center; gap: 1px; overflow: hidden;
  height: 100px; margin-bottom: 112px; padding: 0 16px; border-radius: var(--r-md); transform-origin: top center;
  font-family: var(--disp); color: var(--accent-ink); will-change: transform, filter;
}
.pk:last-child { margin-bottom: 4px; }
.pk b { font-family: var(--mono); font-size: 11px; opacity: .72; font-weight: 400; }
.pk em { font-style: normal; font-size: 17px; margin-top: 1px; }
.pk span { font-family: var(--body); font-size: 11.5px; opacity: .82; }
.pk-l { display: grid; gap: 4px; margin-top: 8px; text-decoration: none; }
.pk-l u { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .26); text-decoration: none; }
.pk-l u:last-child { width: 58%; background: rgba(255, 255, 255, .16); }
.pk-3 { background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); }
.pk-0 { background: linear-gradient(140deg, var(--obj-a), var(--obj-b)); }
.pk-1 { background: linear-gradient(140deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 60%, #000)); }
.pk-2 { background: linear-gradient(140deg, var(--accent-3), color-mix(in srgb, var(--accent-3) 60%, #000)); }

/* 4. 光标驱动微缩景观视差 */
.cp-dio {
  border-radius: 12px; perspective: 620px; transform-style: preserve-3d;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--bg)), var(--bg-2) 72%);
  transform: scale(1.04) rotateY(calc(var(--px, 0) * var(--rot, 5deg))) rotateX(calc(var(--py, 0) * var(--rot, 5deg) * -0.7));
  will-change: transform;
}
.cp-dio > * { position: absolute; display: block; }
.dl { transform: translate3d(calc(var(--px, 0) * var(--f, 1) * var(--fx, 9) * -1px), calc(var(--py, 0) * var(--f, 1) * var(--fx, 9) * -0.66px), 0); will-change: transform; }
.dl.sky { inset: -6%; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent-3) 30%, transparent), transparent 60%); --f: .12; }
.dl.moon { left: 26px; top: 16px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-3); --f: .5; }
.dl.l1 { left: -10%; right: -10%; bottom: 34px; height: 70px; border-radius: 50% 50% 0 0; background: color-mix(in srgb, var(--obj-b) 55%, var(--bg)); --f: .8; }
.dl.l2 { left: -14%; right: 34%; bottom: 12px; height: 76px; border-radius: 50% 46% 0 0; background: color-mix(in srgb, var(--obj-a) 62%, var(--bg)); --f: 1.25; }
.dl.l3 { left: 30%; right: -14%; bottom: -8px; height: 68px; border-radius: 44% 52% 0 0; background: color-mix(in srgb, var(--accent) 78%, #000); --f: 1.75; }
.dl.critter { left: 46%; bottom: 28px; width: 21px; height: 18px; border-radius: 8px 8px 4px 4px; background: var(--ink); --f: 1.5; }
.dl.critter s { position: absolute; left: 4px; top: -7px; width: 6px; height: 9px; border-radius: 3px; background: var(--ink); }
.dl.critter::after { content: ""; position: absolute; right: 4px; top: -7px; width: 6px; height: 9px; border-radius: 3px; background: var(--ink); }

/* 5. 滚动驱动角色环绕 */
.ob-pin {
  position: sticky; top: 0; z-index: 2; display: grid; place-items: center; height: 100%; perspective: 520px;
  background: var(--bg-2);
}
.ob-fig { position: relative; width: 68px; height: 68px; transform-style: preserve-3d; will-change: transform; }
.obf {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px;
  font-size: 15px; color: var(--accent-ink); backface-visibility: hidden;
  transform: rotateY(var(--r)) translateZ(39px);
}
.obf-0 { background: var(--accent); }
.obf-1 { background: var(--accent-2); }
.obf-2 { background: var(--accent-3); }
.obf-3 { background: var(--obj-b); color: var(--ink); }
.ob-sh { position: absolute; bottom: 20%; width: 78px; height: 11px; border-radius: 50%; background: rgba(20, 16, 36, .2); filter: blur(3px); }
.ob-val { position: absolute; right: 10px; bottom: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* 6. 悬停触发车门绽放 */
.cp-bloom { display: grid; place-items: center; perspective: 520px; }

/* 7. 滚动驱动涡旋穿隧 */
.vx-space { position: sticky; top: 0; display: grid; place-items: center; height: 100%; perspective: 460px; perspective-origin: 50% 50%; overflow: hidden; border-radius: var(--r-md); background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 22%, var(--bg-2)), var(--bg-2) 72%); }
.vx-field { position: relative; display: block; width: 260px; height: 260px; transform-style: preserve-3d; will-change: transform; }
/* 环径按场的百分比给（--rs 是卡片上的尺寸滑块）：卡片 260px、详情页 460px，
   写死像素就得为两个尺寸各维护一份 */
.vx-r {
  position: absolute; inset: 0; margin: auto; width: var(--rs, 76%); height: var(--rs, 76%); border-radius: 50%;
  border: 2px solid var(--accent-2); will-change: transform, opacity;
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--accent) 60%, transparent) inset;
}
.vx-r:nth-child(3n) { border-color: var(--accent); border-style: dashed; }
.vx-r:nth-child(3n+1) { border-color: var(--obj-b); }
/* 径向速度线：从中心往外拉长，隧道才有“飞”的方向感 */
.vx-st {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 26px; margin: -13px 0 0 -1.5px;
  border-radius: 2px; background: linear-gradient(var(--accent-3), transparent);
  transform-origin: 50% 13px; will-change: transform, opacity;
}
.vx-core {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--accent) 55%, transparent 72%);
  box-shadow: 0 0 34px 8px color-mix(in srgb, var(--accent) 55%, transparent);
}
.cp-float { display: block; cursor: pointer; }
.fl-ground {
  position: absolute; left: 14%; right: 14%; bottom: 15px; height: 9px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
}
/* margin-left 的百分比按容器宽算，和 px 的 width 混用会偏心；改用 translateX 居中 */
.fl-plant { position: absolute; left: 50%; bottom: 20px; width: min(74%, 460px); height: 74%; transform: translateX(-50%); overflow: visible; color: var(--accent-2); }
.fl-stem { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* 叶用茎的同色系浅一档、花心用强调色，才不会长成两种植物 */
.fl-leaf { fill: color-mix(in srgb, var(--accent-2) 55%, var(--accent-3)); opacity: 0; transform-box: fill-box; transform-origin: center; }
.fl-bud { fill: var(--accent); opacity: 0; transform-box: fill-box; transform-origin: center; stroke: var(--bg); stroke-width: 1.4; }
/* 落地涟漪：由 JS 在球压扁那一帧 animate()，这里只负责形状与初始不可见 */
.fl-rip {
  position: absolute; left: 50%; bottom: 21px; width: 96px; height: 20px; margin-left: -48px;
  border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent) 65%, transparent); opacity: 0; pointer-events: none;
}
.fl-ball {
  position: absolute; left: 50%; bottom: 24px; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 32% 28%, #fff9, transparent 45%), linear-gradient(150deg, var(--obj-a), var(--obj-b));
}

/* 9. 旋流光螺旋展示 */
.cp-hx { display: grid; place-items: center; cursor: grab; touch-action: none; }
.cp-hx.grabbing { cursor: grabbing; }
.hx-rot { position: relative; width: 4px; height: 4px; }
.hx-i {
  position: absolute; left: -13px; top: -18px; display: grid; place-items: center;
  width: 36px; height: 48px; border-radius: 10px; font-family: var(--mono); font-size: 13px; color: var(--accent-ink);
  background: linear-gradient(150deg, var(--obj-a), var(--obj-b));
  box-shadow: 0 8px 16px -10px rgba(20, 16, 36, .7); will-change: transform, opacity;
}

/* 10. 光标驱动辉光流转 */
.cp-lf { overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, #1b1528, #0c0a12); }
.lf-scene { position: absolute; inset: 0; display: block; will-change: transform; }
.lf-obj {
  position: absolute; left: 50%; top: 40%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 11px;
  background: linear-gradient(150deg, var(--obj-b), var(--obj-a)); box-shadow: 0 12px 26px -14px #000;
}
.lf-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .07)); }
.lf-beam {
  position: absolute; inset: -25%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle 92px at var(--lx, 50%) var(--ly, 45%), color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent) 44%, transparent 70%);
}
.lf-fog {
  position: absolute; left: -12%; right: -12%; height: 44px; border-radius: 50%; filter: blur(13px);
  background: rgba(230, 224, 233, .55);
  opacity: calc(var(--fog, 0) * .5 + .07); transform: translateY(calc(var(--fog, 0) * -15px));
}
.lf-fog.f1 { bottom: -12px; }
.lf-fog.f2 { bottom: -24px; opacity: calc(var(--fog, 0) * .38 + .04); }
.cp-lf .cp-cap { color: rgba(230, 224, 233, .55); }

/* ---- 驱动方式徽标：一眼看出这块舞台被什么输入 ---- */
.cp-chip {
  position: absolute; right: 8px; top: 8px; z-index: 8; pointer-events: none;
  display: inline-flex; align-items: center; gap: 4px; padding: 2.5px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2); border: 1px solid var(--line-soft);
}
.cp-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cp-chip.d-pointer { color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.cp-chip.d-scroll { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 11%, transparent); border-color: color-mix(in srgb, var(--accent-2) 28%, transparent); }
.cp-chip.d-hover { color: var(--accent-3); background: color-mix(in srgb, var(--accent-3) 13%, transparent); border-color: color-mix(in srgb, var(--accent-3) 28%, transparent); }
.cp-chip.d-tap, .cp-chip.d-drag { color: var(--ok); background: color-mix(in srgb, var(--ok) 11%, transparent); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.stage:has(.cp-lf) .cp-chip { color: var(--obj-b); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
/* 组合范式统一加一层顶光，别和术语卡的灰格子一个样 */
.stage.kind-compound {
  /* 组合舞台是一整屏编排：用独立的内框、顶光和内阴影把它从普通术语卡里“托”出来。 */
  background-image: var(--grid-img), radial-gradient(130% 90% at 50% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent),
    inset 0 -24px 36px color-mix(in srgb, var(--ink) 4%, transparent);
}
.cp-cap {
  color: var(--muted); padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 999px; background: color-mix(in srgb, var(--bg) 78%, transparent);
  box-shadow: 0 4px 12px -8px rgba(20, 16, 36, .48); backdrop-filter: blur(5px);
}

/* 组合卡允许按卡片宽度收放舞台，不再把 228px 写死在每个模式里。 */
.term.cat-compound { container-type: inline-size; }
.term:not(.term--detail).cat-compound .stage { height: var(--compound-stage-h, 228px); }
@container (max-width: 300px) {
  .term:not(.term--detail).cat-compound .stage { --compound-stage-h: 204px; }
  .term:not(.term--detail).cat-compound.has-ctl .stage { height: 182px; }
  .term:not(.term--detail).cat-compound { height: 326px; }
}
@media (max-width: 480px) {
  .recipe-step-fields { grid-template-columns: 1fr 1fr; }
  .recipe-step-fields label:first-child { grid-column: 1 / -1; }
  .recipe-in { max-height: 88vh; overflow: auto; }
  /* 详情页组合舞台需要给标题 + 主体画面留出完整呼吸空间。
     以前 78vw 在 390px 屏幕上只有约 304px，圆柱/环形画廊的图片会被标题挤到舞台外；
     用 clamp 随屏宽缩放，窄屏保底 460px，常见手机也能保留完整主体画面。 */
  .term--detail .pg-visual .stage.kind-compound { height: clamp(460px, 138vw, 560px); min-height: 460px; }
  /* 标题在窄屏会自然换成两到三行，主体空间同步收紧，避免整块视觉被裁成只剩标题。 */
  .term--detail .stage.kind-compound .cy-space { height: 320px; }
  .term--detail .stage.kind-compound .r3-space { height: 340px; }
}

/* gaze restore wins over the superseded v2 rules */
/* ---------- 光标驱动视线跟随 · 仪表脸 + 视线射线 ----------
   配色只从当前调色板推导（--panel / --panel-2 / --ink / --accent / --line / --bg-2），
   所以五套主题都成立。原先这里是三代样式叠加，最上面一层写死了 #f2f0fb 紫底 + !important，
   把主题色全压掉了。
   读法：圆环 = 指针要去的地方，射线 = 视线此刻真正的指向，两者错开多少就是滞后。 */
/* 射线：角度由 JS 每帧写进 --ray，起点在场地中心，末端的小点是视线落点 */
/* 脸：只用面板色加一点点强调色，深浅底都不脏 */
@media (max-width: 640px) {
  .term--detail .stage.kind-compound .gz-body { width: min(66vw, 214px); height: min(42vw, 136px); gap: 18px; padding-inline: 20px; }
  .term--detail .stage.kind-compound .gz-eye { width: min(15vw, 50px); height: min(15vw, 50px); }
  .term--detail .stage.kind-compound .gz-pupil { width: min(6vw, 21px); height: min(6vw, 21px); }
}
.toy { position: absolute; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; color: #fff; font-size: 34px; box-shadow: 0 18px 24px -18px rgba(56,48,104,.6); }
.toy-a { background: #7771be; transform: translate(-28px, 10px) rotate(calc(var(--tilt, 0deg) - 8deg)); } .toy-b { background: #e2a47d; transform: translate(36px, -18px) rotate(calc(var(--tilt, 0deg) + 7deg)); } .toy-c { background: #6d9db0; transform: translate(62px, 32px) rotate(calc(var(--tilt, 0deg) + 12deg)); } .toy-d { background: #c67fa7; transform: translate(-70px, -28px) rotate(calc(var(--tilt, 0deg) - 14deg)); }
@media (max-width: 760px) { }

/* ---------- demo 精修：光标驱动视线跟随 ---------- */

@media (max-width: 640px) {
  .term--detail .stage.kind-compound .gz-body { width: min(68vw, 246px); height: min(54vw, 188px); gap: 18px; padding-inline: 22px; }
  .term--detail .stage.kind-compound .gz-eye { width: min(16vw, 56px); height: min(13vw, 46px); }
  .term--detail .stage.kind-compound .gz-pupil { width: min(6vw, 22px); height: min(6vw, 22px); }
}

/* 视频参考的材质层：毛绒主体来自用户提供的参考帧，眼睛仍由运行时驱动。 */

@media (max-width: 640px) {
  .gz-body, .term--detail .stage.kind-compound .gz-body { width: min(88%, 430px); }
}

/* ---------- gaze v2: original sculpted character, no source-frame texture ---------- */
@media (prefers-reduced-motion: reduce) { .gz-body { transition: none !important; } .gz-body + .cp-cap { animation: none; } }
.toy { position: absolute; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; color: #fff; font-size: 34px; box-shadow: 0 18px 24px -18px rgba(56,48,104,.6); transform: rotate(var(--tilt, 0deg)); }
.toy-a { background: #7771be; transform: translate(-28px, 10px) rotate(calc(var(--tilt, 0deg) - 8deg)); } .toy-b { background: #e2a47d; transform: translate(36px, -18px) rotate(calc(var(--tilt, 0deg) + 7deg)); } .toy-c { background: #6d9db0; transform: translate(62px, 32px) rotate(calc(var(--tilt, 0deg) + 12deg)); } .toy-d { background: #c67fa7; transform: translate(-70px, -28px) rotate(calc(var(--tilt, 0deg) - 14deg)); }
@media (max-width: 760px) { }


/* ---- 11. 光标聚光揭示 ---- */
.cp-sp { overflow: hidden; border-radius: var(--r-md); background: var(--bg-2); }
.sp-under { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 14px; }
.sp-title { font-family: var(--disp); font-size: 15px; letter-spacing: .04em; color: var(--ink); }
.sp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; width: 100%; }
.sp-grid s {
  display: grid; place-items: end start; gap: 4px; padding: 7px; height: 52px; border-radius: var(--r-sm);
  background: var(--c); text-decoration: none; box-shadow: var(--shadow);
}
.sp-grid s u { display: block; width: 55%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .5); }
.sp-grid s em { font-style: normal; font-family: var(--mono); font-size: 10px; color: #fff; }
/* 遮罩留一点透明度，用户才看得见“这里本来有东西”；第二层是光圈本身的辉光 */
.sp-mask {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle var(--r, 150px) at var(--lx, 50%) var(--ly, 50%), transparent 0 46%, color-mix(in srgb, var(--bg-2) 93%, transparent) 66%),
    radial-gradient(circle calc(var(--r, 150px) * .92) at var(--lx, 50%) var(--ly, 50%), color-mix(in srgb, var(--accent) 20%, transparent) 0 74%, transparent 76%);
}

/* ---- 12. 光标拖尾 ---- */
.cp-tr { overflow: hidden; border-radius: 12px; background: radial-gradient(120% 100% at 50% 50%, color-mix(in srgb, var(--accent) 9%, var(--bg-2)), var(--bg-2)); }
.tr-path { position: absolute; inset: 0; }
.tr-d { position: absolute; left: 50%; top: 50%; width: var(--sz, 13px); height: var(--sz, 13px); margin: calc(var(--sz, 13px) / -2) 0 0 calc(var(--sz, 13px) / -2); border-radius: 50%; background: var(--accent); will-change: transform, opacity; }

/* ---- 13. 悬停扇形展开 ---- */
.cp-fan { display: grid; place-items: center; }
.fn-deck { position: relative; width: 86px; height: 116px; }
.fn-c {
  position: absolute; inset: 0; overflow: hidden; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: var(--panel);
  box-shadow: 0 10px 22px -14px rgba(20, 16, 36, .5);
  transform-origin: 50% 132%;
  transform: rotate(calc(var(--i) * 2deg)) translateY(calc(var(--i) * 1.5px));
  transition: transform .5s cubic-bezier(.2, 0, 0, 1), box-shadow .5s;
  transition-delay: calc((var(--i) + 2) * 14ms + 180ms);
}
.fn-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fn-c s {
  position: absolute; left: 7px; bottom: 6px; z-index: 1; text-decoration: none;
  font-size: 9.5px; letter-spacing: .06em; color: #fff; background: rgba(12, 10, 16, .55);
  padding: 2px 8px; border-radius: 999px; backdrop-filter: blur(4px);
}
.cp-fan:hover .fn-c, .fn-deck.open .fn-c {
  transform: rotate(calc(var(--i) * var(--rot, 13deg))) translateY(-15px) translateX(calc(var(--i) * var(--spread, 27px)));
  box-shadow: 0 20px 32px -16px rgba(20, 16, 36, .6);
  transition-delay: calc((var(--i) + 2) * 40ms);
}

/* ---- 14. 悬停揭角 ---- */
.cp-peel { display: grid; place-items: center; }
.pc {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  width: 186px; height: 132px; padding: 16px 18px; border-radius: 14px 14px 0 14px; overflow: hidden;
  background: linear-gradient(150deg, var(--obj-a), var(--obj-b)); color: var(--accent-ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path .42s cubic-bezier(.2, 0, 0, 1);
}
.pc b { font-family: var(--disp); font-size: 21px; }
.pc s { font-size: 12.5px; text-decoration: none; opacity: .85; }
.pc-c {
  position: absolute; right: 0; bottom: 0; width: 0; height: 0;
  background: linear-gradient(315deg, var(--bg) 0 42%, color-mix(in srgb, var(--obj-b) 72%, #fff) 42% 100%);
  box-shadow: -4px -4px 10px -4px rgba(20, 16, 36, .55);
  transition: width .42s cubic-bezier(.2, 0, 0, 1), height .42s cubic-bezier(.2, 0, 0, 1);
}
.cp-peel:hover .pc, .pc.open { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sz, 34px)), calc(100% - var(--sz, 34px)) 100%, 0 100%); }
.cp-peel:hover .pc-c, .pc.open .pc-c { width: var(--sz, 34px); height: var(--sz, 34px); }

/* ---- 15. 滚动转横向位移 ---- */
.hs-pin { position: sticky; top: 0; display: flex; align-items: center; height: 100%; overflow: hidden; border-radius: 12px; background: var(--bg-2); }
.hs-track { display: flex; gap: 10px; padding: 0 12px; will-change: transform; }
.hs-c {
  display: grid; align-content: center; justify-items: start; gap: 6px; flex: 0 0 auto;
  width: 132px; height: 86px; padding: 0 12px; border-radius: var(--r-md);
  font-family: var(--disp); color: var(--accent-ink);
  background: linear-gradient(150deg, var(--obj-a), var(--obj-b));
}
.hs-c em { font-family: var(--mono); font-size: 9.5px; font-style: normal; opacity: .72; text-decoration: none; }
.hs-c b { font-size: 17px; font-weight: 400; letter-spacing: .03em; }
.hs-c small { font-family: var(--mono); font-size: 8.5px; opacity: .7; }
.hs-bar { display: block; width: 100%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .26); overflow: hidden; }
.hs-bar i { display: block; height: 100%; width: var(--v); border-radius: 3px; background: rgba(255, 255, 255, .8); }
.hs-hint {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9px; color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: opacity .3s var(--ease);
}
.hs-c:nth-child(even) { background: linear-gradient(150deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 62%, #000)); }

/* ---- 16. 滚动抽帧 ---- */
.fr-pin { position: sticky; top: 0; display: grid; place-items: center; align-content: center; gap: 8px; height: 100%; background: var(--bg-2); }
.fr-bars { display: flex; align-items: flex-end; gap: 4px; height: 116px; }
.fr-bars > s {
  display: block; width: 9px; height: 100%; border-radius: 3px 3px 0 0; transform-origin: bottom;
  background: linear-gradient(180deg, var(--obj-b), var(--obj-a)); will-change: transform;
}
.fr-val { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

/* ---- 17. 钉住双栏 ---- */
.cp-2c { display: grid; grid-template-columns: 86px 1fr; gap: 10px; align-items: start; }
.tc-left {
  position: sticky; top: 4px; display: grid; align-content: center; justify-items: center; gap: 3px; height: 176px;
  border-radius: 12px; background: linear-gradient(150deg, var(--obj-a), var(--obj-b)); color: var(--accent-ink);
}
.tc-n { font-family: var(--disp); font-size: 40px; line-height: 1; }
.tc-t { font-size: 11px; opacity: .9; }
.tc-right { display: grid; gap: 8px; padding: 4px 0 44px; }
.tc-s {
  display: grid; align-content: center; justify-items: start; gap: 4px; height: 68px; padding: 0 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line-soft);
  background: var(--panel); color: var(--muted);
  transition: color .3s, border-color .3s, background .3s, transform .3s cubic-bezier(.2, 0, 0, 1);
}
.tc-s b { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.tc-s s { text-decoration: none; font-size: 10px; }
.tc-bar { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--panel-2); overflow: hidden; }
.tc-bar i { display: block; height: 100%; width: var(--v); border-radius: 2px; background: var(--accent); opacity: .35; transition: opacity .3s; }
.tc-s.on { color: var(--ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); transform: translateX(-3px); }
.tc-s.on b { color: var(--ink); }
.tc-s.on .tc-bar i { opacity: 1; }
/* 舞台被拉到 424 高，但内容只有 4×68 刚好等于它 —— 溢出量为 0，所以完全滚不动。
   详情页必须把行程一起放大。 */
.term--detail .cp-2c { grid-template-columns: 132px 1fr; gap: 16px; }
.term--detail .tc-left { height: 210px; border-radius: var(--r-md); }
.term--detail .tc-n { font-size: 58px; }
.term--detail .tc-t { font-size: 14px; }
.term--detail .tc-right { gap: 14px; padding: 4px 0 120px; }
.term--detail .tc-s { height: 116px; padding: 0 20px; gap: 7px; border-radius: var(--r-md); }
.term--detail .tc-s b { font-size: 16px; }
.term--detail .tc-s s { font-size: 12px; }
.term--detail .tc-bar { height: 6px; }

/* ---- 18. 滚动主题渐变 ---- */
.tm-pin { position: sticky; top: 0; display: grid; place-content: center; align-content: center; gap: 7px; height: 100%; border-radius: var(--r-md); text-align: center; }
.tm-pin b { font-family: var(--disp); font-size: 26px; letter-spacing: .04em; }
.tm-hex { font-family: var(--mono); font-size: 11px; opacity: .72; text-decoration: none; }
.tm-sw { display: flex; gap: 5px; justify-content: center; }
.tm-sw k { width: 26px; height: 15px; border-radius: 5px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); transition: background .12s linear; }
.tm-dots { display: flex; gap: 5px; justify-content: center; font-style: normal; }
.tm-dots b { width: 15px; height: 3px; border-radius: 2px; background: color-mix(in srgb, currentColor 26%, transparent); transition: background .3s var(--ease), transform .3s var(--ease); }
.tm-dots b.on { background: currentColor; transform: scaleX(1.5); }

/* ---- 19. 滚动进度环 ---- */
.rg-pin { position: sticky; top: 0; display: grid; place-items: center; height: 100%; background: var(--bg-2); }
.rg-pin svg { position: absolute; width: 116px; height: 116px; transform: rotate(-90deg); }
.rg-bg { fill: none; stroke: var(--line-soft); stroke-width: 6; }
.rg-fg { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; will-change: stroke-dashoffset; }
.rg-v { position: relative; font-family: var(--disp); font-size: 24px; color: var(--ink); }

/* ---- 20. FAB 展开面板 ---- */
.cp-fab { position: relative; display: grid; place-items: end end; padding: 10px; }
/* 展开前先让底层列表变暗、FAB 抬起，用户才知道这张纸是从哪个按钮长出来的 */
.fb-page { position: absolute; inset: 8px 8px 22px; display: grid; align-content: start; gap: 7px; padding: 9px; border-radius: var(--r-sm); background: var(--bg-2); }
.fb-row { display: flex; align-items: center; gap: 7px; height: 15px; border-radius: 5px; transition: filter .34s var(--ease), transform .34s var(--ease); }
.fb-row s { width: 15px; height: 15px; flex: 0 0 15px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 32%, var(--panel)); text-decoration: none; }
.fb-row u { flex: 1; height: 7px; border-radius: 4px; background: var(--line-soft); text-decoration: none; }
.cp-fab.open .fb-row { filter: brightness(.82); }
.cp-fab.open .fb-row:nth-child(1) { transform: translateY(2px); }
.cp-fab.open .fb-row:nth-child(4) { transform: translateY(-2px); }
.fb-scrim { position: absolute; inset: 8px 8px 22px; border-radius: var(--r-sm); background: rgba(20, 16, 36, .34); opacity: 0; pointer-events: none; transition: opacity .34s var(--ease); }
.cp-fab.open .fb-scrim { opacity: 1; }
.fb {
  position: relative; display: flex; align-items: flex-start; overflow: hidden; cursor: pointer;
  width: 44px; height: 44px; padding: 0; border-radius: 22px; background: var(--accent); color: var(--accent-ink);
  box-shadow: var(--shadow);
  transition: width .38s cubic-bezier(.2, 0, 0, 1), height .38s cubic-bezier(.2, 0, 0, 1),
    border-radius .38s cubic-bezier(.2, 0, 0, 1), box-shadow .38s var(--ease), transform .38s var(--ease);
}
.fb:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.fb.open { width: var(--w, 178px); height: var(--h, 106px); border-radius: 18px; }
.fb-plus { display: grid; place-items: center; flex: 0 0 44px; height: 44px; font-size: 22px; font-weight: 400; transition: transform .38s cubic-bezier(.2, 0, 0, 1); }
.fb.open .fb-plus { transform: rotate(45deg); }
.fb-rows { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 14px 0 0; height: 44px; flex: 1; }
.fb.open .fb-rows { height: 100%; padding: 0 16px 0 0; }
.fb-rows u { text-decoration: none; white-space: nowrap; font-size: 11.5px; opacity: 0; transform: translateX(12px); transition: opacity .26s, transform .3s cubic-bezier(.2, 0, 0, 1); }
.fb.open .fb-rows u { opacity: 1; transform: none; }
/* 说明文字留在底部，列表和遮罩已经给它让出了 22px */
.cp-fab .cp-cap { z-index: 7; }
.fb.open .fb-rows { height: 100%; padding: 6px 16px 0 0; justify-content: flex-start; }

/* ---- 21. 按钮三态形变 ---- */
.cp-ts { display: grid; place-content: center; justify-items: center; gap: 12px; }
.ts-flow { display: flex; align-items: center; gap: 4px; }
.ts-flow i { display: grid; justify-items: center; gap: 2px; font-style: normal; opacity: .42; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.ts-flow i b { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1.4px solid currentColor; font-size: 9px; font-weight: 400; }
.ts-flow i s { font-family: var(--mono); font-size: 8.5px; text-decoration: none; }
.ts-flow i.on { opacity: 1; transform: translateY(-2px); }
.ts-flow i.on b { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ts-flow em { width: 16px; height: 1.4px; border-radius: 1px; background: var(--line); }
.tb {
  display: flex; align-items: center; justify-content: center; gap: 0; overflow: hidden; cursor: pointer;
  height: 46px; width: 140px; border-radius: 20px; background: var(--accent); color: var(--accent-ink);
  transition: width .34s cubic-bezier(.2, 0, 0, 1), background .3s, gap .3s;
}
.tb-lbl { font-size: 13px; white-space: nowrap; transition: opacity .18s, width .3s cubic-bezier(.2, 0, 0, 1); }
/* width 为 0 时 border-radius:50% 画不出圆，只会得到一根旋转的透镜形斜线 —— 这就是「转得不对」 */
.tb-spin { box-sizing: border-box; flex: 0 0 auto; width: 0; height: 22px; border-radius: 50%; border: 2.6px solid color-mix(in srgb, #fff 34%, transparent); border-top-color: #fff; opacity: 0; }
.tb-ok { width: 0; overflow: hidden; font-size: 15px; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .34s cubic-bezier(.2, 0, 0, 1), width .3s; }
.tb.load { width: 46px; }
/* 只把 opacity 归 0 的话，标签还占着排版宽度，会把 spinner 挤出圆角外 —— 必须连盒子一起收掉 */
.tb.load .tb-lbl { width: 0; opacity: 0; overflow: hidden; }
.tb.load .tb-spin { width: 22px; opacity: 1; animation: tspin .7s linear infinite; }
.tb.done { width: 138px; gap: 7px; background: var(--ok); }
.tb.done .tb-ok { width: 16px; opacity: 1; transform: none; }

/* ---- 22. 拖拽擦除对比 ---- */
.cp-cp { overflow: hidden; border-radius: 12px; cursor: ew-resize; touch-action: none; isolation: isolate; user-select: none; -webkit-user-select: none; }
.cp-cp::after { content: none !important; }
.cp-after, .cp-before { position: absolute; inset: 0; }
/* 真实照片两层：下层调色后成品，上层压暗去饱和当原图 */
.cp-after img, .cp-before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-after img, .cp-before img { filter: none !important; pointer-events: none; -webkit-user-drag: none; }
.cp-tag { position: absolute; z-index: 2; top: 9px; bottom: auto; padding: 4px 8px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(14,18,24,.58); color: #fff; font: 500 9px/1 var(--mono); letter-spacing: .08em; text-shadow: none; backdrop-filter: blur(8px); pointer-events: none; }
.cp-tag.before-tag { left: 9px; }
.cp-tag.after-tag { right: 9px; }
.cp-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.cp-hd {
  position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-2); cursor: ew-resize;
}
.cp-hd:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cp-hd::after { content: "↔"; }

@keyframes tspin { to { transform: rotate(360deg); } }

/* ---- 23. 逐行遮罩揭示 ---- */
.lm-pin {
  position: sticky; top: 0; display: grid; align-content: center; gap: 5px; height: 100%; padding: 0 20px;
  background: var(--bg-2);
}
.lm-line { display: block; overflow: hidden; }
.lm-line > s {
  display: block; text-decoration: none; font-family: var(--disp); font-weight: 500;
  font-size: clamp(19px, 2.3vw, 27px); line-height: 1.24; letter-spacing: -.016em; color: var(--ink);
  will-change: transform, opacity;
}
.lm-rule { display: block; height: 2px; margin-top: 9px; border-radius: 2px; transform-origin: left; background: linear-gradient(90deg, var(--accent), transparent); }

/* ---- 24. 滚动速度倾斜跑马灯 ---- */
.vs-pin {
  position: sticky; top: 0; display: grid; align-content: center; gap: 12px; height: 100%;
  overflow: hidden; background: var(--bg-2);
}
.vs-row { display: flex; width: max-content; gap: 10px; will-change: transform; }
.vs-row s {
  display: grid; place-items: center; height: 40px; padding: 0 16px; border-radius: 11px; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line-soft); color: var(--ink-2);
}
.vs-row.a s { background: linear-gradient(140deg, var(--obj-a), var(--obj-b)); border-color: transparent; color: var(--accent-ink); }
.vs-v { position: absolute; right: 10px; bottom: 7px; z-index: 6; font-family: var(--mono); font-size: 10px; color: var(--muted); }

/* ---- 25. 光标邻近点亮网格 ---- */
.cp-pg { display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: var(--bg-2); }
.pg-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: 92%; height: 80%; }
.pg-t { position: relative; display: block; border-radius: 7px; background: var(--panel); transform: scale(calc(1 + var(--k, 0) * .22)); will-change: transform; }
.pg-t::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(150deg, var(--obj-b), var(--accent)); opacity: calc(var(--k, 0) * .95);
}

/* ---- 26. 液态黏附跟随 ---- */
.cp-lb { overflow: hidden; border-radius: 12px; background: radial-gradient(120% 100% at 50% 50%, color-mix(in srgb, var(--accent) 11%, var(--bg-2)), var(--bg-2)); }
.lb-well { position: absolute; inset: 0; }
.lb-pin { position: absolute; left: calc(11% + var(--i) * 19.5%); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 32%, transparent); }
.lb-trail { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 24%, transparent); filter: blur(11px); will-change: transform; }
.lb-drop {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%;
  background: linear-gradient(150deg, var(--obj-b), var(--accent)); box-shadow: 0 12px 26px -14px rgba(20, 16, 36, .7);
  will-change: transform;
}

/* ---- 27. 滚动驱动图表生长 ---- */
.cb-pin { position: sticky; top: 0; display: grid; align-content: center; height: 100%; padding: 0 16px; background: var(--bg-2); }
.cb-box { position: relative; display: block; height: 132px; }
.cb-box::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px dashed var(--line);
  opacity: .72; pointer-events: none;
}
.cb-box svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cb-line { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cb-area { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: none; }
.cb-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 10px; padding: 0 4px; }
.cb-bars > s {
  display: block; flex: 1; height: 100%; border-radius: 5px 5px 0 0; transform-origin: bottom; transform: scaleY(.06);
  background: linear-gradient(180deg, color-mix(in srgb, var(--obj-b) 55%, transparent), color-mix(in srgb, var(--obj-a) 40%, transparent));
}
.cb-v { position: absolute; right: 18px; top: 38px; font-family: var(--mono); font-size: 16px; font-style: normal; color: var(--accent); }

/* ---- 28. 悬停联动预览卡 ---- */
.cp-pf { display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 10px; padding: 0 12px; }
.pf-list { display: grid; gap: 7px; }
.pf-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 11px;
  border: 1px solid var(--line-soft); background: var(--panel); font-size: 12.5px; color: var(--ink-2); cursor: pointer;
  transition: background .22s, border-color .22s, color .22s, transform .3s cubic-bezier(.2, 0, 0, 1);
}
.pf-row em { font-style: normal; }
.pf-row s { text-decoration: none; opacity: .5; }
.pf-row.on { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-color: var(--accent); color: var(--ink); transform: translateX(5px); }
.pf-card {
  /* 卡片贴右缘时，跟随位移 + 倾斜会把右边 20px 裁进舞台边缘，留一点回缩空间 */
  position: relative; margin-inline-end: 18px;
  display: grid; gap: 5px; justify-items: center; padding: 8px; border-radius: 14px;
  border: 1px solid var(--line-soft); background: var(--bg); opacity: .96; box-shadow: 0 16px 32px -16px rgba(20, 16, 36, .55);
  will-change: transform; transition: opacity .26s;
}
.pf-thumb { position: relative; display: block; width: 76px; height: 54px; border-radius: 9px; overflow: hidden; background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #fff)); }
.pf-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-name { font-size: 10.5px; color: var(--muted); }

/* ---- 29. 速度抛掷丢弃 ---- */
.cp-th { display: grid; place-items: center; }
.th-deck { position: relative; width: 176px; height: 122px; }
.th-c {
  position: absolute; inset: 0; overflow: hidden; border-radius: 17px; cursor: grab; touch-action: none;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: var(--panel-2);
  box-shadow: 0 18px 34px -20px rgba(20, 16, 36, .75);
  transition: transform .34s cubic-bezier(.2, 0, 0, 1), opacity .34s;
}
.th-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.th-c s {
  position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); text-decoration: none;
  font-size: 10px; letter-spacing: .05em; color: #fff; background: rgba(12, 10, 16, .55);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; backdrop-filter: blur(4px);
}
.cp-th:active .th-c { cursor: grabbing; }

/* ---- 30. 乱码解码揭示 ---- */
.cp-sc {
  display: grid; place-content: center; justify-items: center; gap: 12px; cursor: pointer; border-radius: 12px;
  background: linear-gradient(180deg, var(--bg-2), var(--panel));
}
.sc-txt { font-family: var(--mono); font-size: clamp(17px, 2.1vw, 25px); letter-spacing: .1em; color: var(--accent); white-space: pre; }
.sc-sub { font-size: 12.5px; letter-spacing: .22em; color: var(--muted); }

/* ---- 31/32. 反向图带 & 纵深隧道：编辑部排版头 + 真实照片 ---- */
.cp-ed { display: grid; gap: 6px; justify-items: start; padding: 18px 22px 12px; }
.cp-kick { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--accent-2); }
.cp-kick::before { content: "|"; margin-right: 7px; opacity: .7; }
.ced-hd { font-family: var(--disp); font-weight: 500; font-size: 21px; letter-spacing: -.01em; color: var(--ink); }
.ced-hd em { font-style: italic; font-weight: 400; padding-left: 3px; color: color-mix(in srgb, var(--accent) 72%, var(--ink)); }
.cp-dots { display: inline-flex; gap: 5px; margin-top: 2px; }
.cp-dots i { width: 14px; height: 3px; border-radius: 2px; background: var(--line); }
.cp-dots i.on { background: var(--accent); }
.cp-sub { padding: 0 22px 14px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--muted); }

/* 反向图带：两行照片反向滚，次排小一号压暗一层，速度差读成深度 */
/* .scrolly.cp 把背景清掉了，这里要用同级特异性盖回来 */
.scrolly.cp-rl { background: linear-gradient(180deg, var(--bg-2), var(--panel)); }
.rl-pin { position: sticky; top: 0; min-height: 100%; display: grid; align-content: start; background: inherit; }
.rl-wrap {
  display: grid; gap: 10px; overflow: hidden; padding: 8px 0 12px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rl-row { display: flex; gap: 10px; width: max-content; will-change: transform; }
.rl-c {
  position: relative; flex: none; width: 106px; height: 76px; border-radius: 10px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: 0 8px 18px -12px rgba(20, 16, 36, .5);
  transition: transform .38s cubic-bezier(.2, 0, 0, 1), box-shadow .38s;
}
.rl-row.b .rl-c { width: 90px; height: 64px; margin-top: 7px; opacity: .92; }   /* 次排小一号 = 更远 */
.rl-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rl-c:hover { transform: translateY(-6px) scale(1.05); box-shadow: 0 16px 26px -14px rgba(20, 16, 36, .6); z-index: 2; }
.rl-row.a .rl-c:hover { rotate: -2deg; }
.rl-row.b .rl-c:hover { rotate: 2deg; }

/* 纵深隧道：近黑舞台，照片沿 z 排开，越远越暗 */
.scrolly.cp-tn { background: #060608; }
.cp-tn .cp-kick { color: #E8734A; }
.cp-tn .ced-hd { color: #F2EEE9; }
.cp-tn .ced-hd em { color: #E8734A; }
.cp-tn .cp-sub, .cp-tn .cp-cap { color: rgba(242, 238, 233, .42); }
.tn-pin { position: sticky; top: 0; min-height: 100%; display: grid; align-content: start; background: inherit; }
.tn-space {
  position: relative; display: block; height: 252px; margin: 4px 12px 12px; border-radius: 12px;
  background: radial-gradient(90% 70% at 50% 42%, rgba(64, 52, 80, .38), rgba(6, 6, 8, 0) 72%);
}
.tn-c {
  position: absolute; left: 50%; top: 50%; width: 126px; height: 166px; margin: -83px 0 0 -63px;
  border-radius: 10px; overflow: hidden; will-change: transform, opacity, filter;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .85);
}
.tn-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage:has(.cp-tn) .cp-chip { color: #E8734A; background: rgba(232, 115, 74, .1); border-color: rgba(232, 115, 74, .3); }

/* 详情页里给照片类舞台更大的版面 */
.term--detail .ced-hd { font-size: 30px; }
.term--detail .cp-ed { padding: 26px 30px 14px; gap: 8px; }
.term--detail .cp-sub { padding: 0 30px 16px; font-size: 11px; }
.term--detail .rl-wrap { gap: 14px; padding: 10px 0 16px; }
.term--detail .rl-row { gap: 14px; }
.term--detail .rl-c { width: 150px; height: 106px; border-radius: 12px; }
.term--detail .rl-row.b .rl-c { width: 126px; height: 90px; }
.term--detail .tn-space { height: 380px; margin: 6px 16px 16px; }
.term--detail .tn-c { width: 178px; height: 234px; margin: -117px 0 0 -89px; }
.term--detail .fn-deck { width: 118px; height: 160px; }
.term--detail .fn-c { border-radius: 15px; }
.term--detail .fn-c s { font-size: 11px; left: 10px; bottom: 9px; }
.term--detail .th-deck { width: 240px; height: 166px; }
.term--detail .th-c { border-radius: 20px; }
.term--detail .pf-thumb { width: 106px; height: 74px; }
.sc-bar { width: 62%; height: 2px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.sc-bar i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: var(--accent-2); }

/* ---------------- 真实落地参考 ---------------- */
/* 限定在详情页里：裸 .refs 会命中页脚的 <ul class="refs">，把页脚多撑出 48px */
.page .refs { margin: 0 0 var(--sp-7); }
.term--detail .refs { max-width: none; }
.refs-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--sp-3); font-size: 14px; font-weight: 500; }
.refs-hd span { font-family: var(--body); font-size: 11.5px; font-weight: 400; color: var(--muted); }
.ref-list { display: grid; gap: var(--sp-3); }
.ref { padding: var(--sp-4); border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--panel); }
.ref-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ref-top b { font-size: 14px; font-weight: 500; }
.ref-host { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.ref--embed { border-color: color-mix(in srgb, var(--accent) 30%, var(--line-soft)); }
.ref--embed .ref-host::before { content: "可实时嵌入 · "; color: var(--accent); }
.ref--link .ref-host::before { content: "外链 · "; color: var(--muted); }
.ref-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.ref-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ref-load, .ref-open {
  font: inherit; font-size: 11.5px; cursor: pointer; text-decoration: none;
  padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink-2); transition: background var(--dur-1) var(--ease), border-color var(--dur-1);
}
.ref-load { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ref-load:hover, .ref-open:hover { background: var(--panel-2); }
.ref-slot { display: grid; gap: 8px; }
.ref-frame { display: none; width: 100%; height: 460px; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }
.ref--on .ref-frame { display: block; }
.ref-fail { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* ---------------- View Transitions：卡片 ⇄ 详情页的共享元素形变 ----------------
   只让卡片主视觉扩展到详情尺寸，页面根层不做淡入淡出，避免整屏发灰。 */
::view-transition-group(ml-visual) {
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
  z-index: 40;
}
::view-transition-image-pair(ml-visual), ::view-transition-old(ml-visual), ::view-transition-new(ml-visual) { mix-blend-mode: normal; }
/* 页面根层不淡入淡出，详情文案由下方的分层入场动画承担 */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: none; }
@keyframes detail-copy-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.term--detail .pg-kicker { animation: detail-copy-in .36s var(--ease-out) .04s both; }
.term--detail .pg-title { animation: detail-copy-in .42s var(--ease-out) .08s both; }
.term--detail .pg-copy { animation: detail-copy-in .48s var(--ease-out) .12s both; }
.no-motion .term--detail .pg-kicker,
.no-motion .term--detail .pg-title,
.no-motion .term--detail .pg-copy { animation: none; }
/* 翻页：正文按方向横向交接，与参考站的 detail-body 一致 */
html.has-page[data-dir] #page-body { view-transition-name: ml-body; }
html[data-dir=next]::view-transition-old(ml-body) { animation: ml-out-l .3s var(--ease) both; }
html[data-dir=next]::view-transition-new(ml-body) { animation: ml-in-r .44s var(--ease) both; }
html[data-dir=prev]::view-transition-old(ml-body) { animation: ml-out-r .3s var(--ease) both; }
html[data-dir=prev]::view-transition-new(ml-body) { animation: ml-in-l .44s var(--ease) both; }
@keyframes ml-out-l { to { opacity: 0; transform: translateX(-6vw); } }
@keyframes ml-out-r { to { opacity: 0; transform: translateX(6vw); } }
@keyframes ml-in-r { from { opacity: 0; transform: translateX(6vw); } }
@keyframes ml-in-l { from { opacity: 0; transform: translateX(-6vw); } }
.ml-shared-stage-ghost { transition: left .48s var(--ease), top .48s var(--ease), width .48s var(--ease), height .48s var(--ease), border-radius .48s var(--ease); }
.page.page--morphing { animation: none !important; }
.page.page--morphing .term--detail .pg-visual { overflow: hidden; }
.ml-page-out-next { animation: ml-out-l .2s cubic-bezier(.4, 0, 1, 1) both; }
.ml-page-out-prev { animation: ml-out-r .2s cubic-bezier(.4, 0, 1, 1) both; }
.ml-page-in-next { animation: ml-in-r .44s var(--ease) both; }
.ml-page-in-prev { animation: ml-in-l .44s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .term--detail .pg-kicker, .term--detail .pg-title, .term--detail .pg-copy { animation: none !important; }
}
@media (hover: none) {
  .copy { opacity: 1; }
}

/* ---------------- 响应式 ---------------- */
/* 窄一点但仍要三栏：把右侧「曲线 + 代码」栏收一档让给中间那栏，
   否则中间（预览 + 时长/距离/动什么 + 四个控制点）会被挤到 248px，比右边还窄。 */
@media (max-width: 1180px) {
  .lab-grid { grid-template-columns: minmax(178px, 210px) minmax(0, 1.3fr) minmax(230px, 300px); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; }
  .nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .nav a { border: 1px solid var(--line); }
  .nav a b { display: none; }
  .lab-grid { grid-template-columns: 1fr; }
  .curve-out { grid-column: auto; }
  .foot { grid-template-columns: 1fr; }
  html { scroll-padding-top: var(--topbar-offset, 124px); }
  .topbar {
    height: auto; min-height: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center; gap: 8px 12px; padding-block: 10px;
  }
  .top-tools { min-width: 0; justify-content: flex-end; }
  .search { order: initial; grid-column: 1 / -1; max-width: none; width: 100%; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  /* 平板宽度下顶栏的控件总宽度已经超过一行，主动拆成「品牌/工具 + 搜索」两行，
     避免固定 64px 高度把搜索框压到正文上。 */
  html { scroll-padding-top: var(--topbar-offset, 124px); }
  .topbar {
    height: auto; min-height: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center; gap: 8px 12px; padding-block: 10px;
  }
  .top-tools { min-width: 0; justify-content: flex-end; }
  .search { grid-column: 1 / -1; max-width: none; width: 100%; }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
  /* 组合范式自己的 minmax 选择器更具体，必须显式覆盖，否则 336px 卡片会在手机上并排溢出。 */
  [data-cat=compound] .grid { grid-template-columns: 1fr; }
  .top-tools .hit { display: none; }
  .topbar { grid-template-columns: 1fr; gap: 6px; }
  .brand, .top-tools, .search { grid-column: 1; }
  .top-tools > .recipe-open { position: absolute; top: 7px; right: 14px; min-height: 36px; padding: 8px 10px; font-size: 12px; }
  .top-tools { justify-content: flex-start; flex-wrap: wrap; overflow: visible; padding-bottom: 2px; }
  .top-tools > *, .top-tools .menu, .top-tools button { flex: 0 0 auto; white-space: nowrap; }
  .menu-btn .menu-cap { display: none; }
  .top-tools > .ghost { padding-inline: 9px; font-size: 12.5px; }
  .top-tools .menu-btn { gap: 5px; padding-inline: 10px; }
  .top-tools .menu-btn b { min-width: 0; font-size: 12.5px; }
  .menu-list { max-width: calc(100vw - 28px); }
  .mini, .ghost, .menu-btn { min-height: 44px; }
  #q { font-size: 16px; }
  .nav a { min-height: 44px; }
  .search-result { grid-template-columns: 26px minmax(0, 1fr); gap: 9px; padding: 12px 10px; }
  .result-meta { grid-column: 2; }
  .search-results-hd { align-items: start; }
  .search-results-hd .ghost { white-space: normal; }
}
@media (min-width: 481px) and (max-width: 900px) {
  .top-tools { flex-wrap: wrap; justify-content: flex-end; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* CSS 层兜底：no-motion class 依赖 JS 生效，这里保证 JS 失败时系统「减弱动效」也管用。
     （JS 正常时走 .no-motion，能保留交互演示的完整性） */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 两张 3D 对照卡需要完整视宽才能比较；中等宽度以下改为上下排列，避免右侧被舞台裁掉。 */
@media (max-width: 900px) {
  .term--detail .stage:has(.ns-ab) { height: 400px; }
  .term--detail .stage:has(.zoom-demo) { height: 360px; }
  .term--detail .ns-ab { flex-direction: column; gap: 0; }
  .term--detail .ns-ab .ab-cell { flex: 1 1 50%; width: 100%; height: 50%; }
  .term--detail .ns-ab .ab-cell + .ab-cell { border-left: 0; border-top: 1px dashed var(--line); }
  .term--detail .ns-parent { width: min(190px, 70%); height: 112px; }
  .term--detail .ns-parent s { width: min(164px, 88%); height: 30px; margin: -15px 0 0 max(-82px, -44%); font-size: 10px; }
  .term--detail .ns-parent.flat3d s:nth-child(1) { --dy: -37px; }
  .term--detail .ns-parent.flat3d s:nth-child(3) { --dy: 37px; }
  .term--detail .ab-cell > u { font-size: 10px; }
}

/* final restore for gaze after all legacy detail rules */

/* ==========================================================================
   精修层 · 纸感质感 / 编辑部排版 / demo 精修
   视觉方向对齐源片：暖纸（暗房）大底 + 衬线大标题 + 斜体渐变强调词
   + 等宽小标注 + 极淡噪点。全部走晚规则覆盖，不动上游结构。
   ========================================================================== */

/* 噪点颗粒：一层极淡的 fractalNoise，纸感立刻出来 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.045'/></feComponentTransfer></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
[data-theme=ember] body::after { mix-blend-mode: screen; opacity: .3; }

/* 标题：衬线 + 斜体强调词走渐变（一条渐变只喂给这一处） */
h1, h2 { font-weight: 560; }
.pg-title em, .ced-hd em {
  font-style: italic; font-weight: 560;
  background: linear-gradient(94deg, var(--accent) 8%, var(--accent-3) 58%, var(--accent-2) 108%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .08em;
}
.pg-title { font-weight: 560; }
.pg-title em { font-size: .58em; }

/* 顶栏：玻璃纸 */
.topbar {
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line-soft);
}

/* 卡片：悬浮抬升 + 发丝描边 */
.term:not(.term--detail) { border-radius: 16px; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.term:not(.term--detail):hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); z-index: 2; }
.term .stage { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 5%, transparent); }

/* 按钮：统一更利落的按压反馈 */
.solid, .mini, .ghost, .seg-b { transition: transform .18s var(--ease-out), background var(--dur-1), color var(--dur-1), filter var(--dur-1); }
.solid:active, .mini:active, .ghost:active { transform: scale(.96); }

/* ---------- demo 精修：视线跟随 ---------- */

/* ---------- demo 精修：辉光流转（夜色 + 地面反光） ---------- */
.cp-lf .lf-scene {
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255, 240, 220, .9), transparent 60%),
    radial-gradient(1px 1px at 74% 14%, rgba(255, 240, 220, .8), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 30%, rgba(255, 240, 220, .7), transparent 60%),
    radial-gradient(1px 1px at 34% 10%, rgba(255, 240, 220, .8), transparent 60%),
    radial-gradient(120% 100% at 66% 8%, #2A2440 0%, #15111E 52%, #0B0910 100%);
  border-radius: 12px;
}
.lf-obj {
  border-radius: 13px;
  background:
    radial-gradient(90% 90% at 30% 22%, #FFE9CF, var(--accent) 58%, color-mix(in srgb, var(--accent) 55%, #7A2E00));
  box-shadow: 0 0 34px -4px color-mix(in srgb, var(--accent) 65%, transparent), 0 16px 30px -14px #000, inset 0 2px 6px rgba(255, 255, 255, .5);
}
.lf-floor { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 9%, transparent) 78%); }
.lf-fog { background: color-mix(in srgb, var(--accent) 26%, #D8CFC0); }

/* ---------- demo 精修：立体景深（暮色 + 月晕 + 雾隙） ---------- */
.cp-dio .dl.sky {
  background:
    radial-gradient(circle at 30% 22%, color-mix(in srgb, #FFD9A8 68%, transparent), transparent 42%),
    radial-gradient(circle at 78% 66%, color-mix(in srgb, var(--accent-3) 34%, transparent), transparent 55%),
    linear-gradient(178deg, #2C2440 0%, #6E3B2C 58%, #C96F2E 100%);
}
.dl.moon {
  background: radial-gradient(circle at 38% 34%, #FFF6E4, #F5C97E 62%, #E8A94E);
  box-shadow: 0 0 18px 6px rgba(255, 214, 150, .5), 0 0 60px 22px rgba(255, 190, 110, .22);
}
.dl.l1 { background: linear-gradient(180deg, #B3693B, #8A4A28); box-shadow: 0 -1px 0 rgba(255, 220, 170, .35) inset; }
.dl.l2 { background: linear-gradient(180deg, #7E4323, #552C15); }
.dl.l3 { background: linear-gradient(180deg, #47240F, #2B1608); }
.dl.l2, .dl.l1 { filter: saturate(1.02); }
.dl.critter { background: #170D05; box-shadow: 0 4px 8px -3px rgba(0, 0, 0, .6); }

/* ---------- 组合范式重绘：把抽象参数放回真实的视觉场景 ---------- */
/* 视线跟随：让瞳孔属于一个有表情的角色，而不是漂浮的两个眼球。 */
.gz-body,
.term--detail .stage.kind-compound .gz-body {
  width: 194px; height: 222px; padding: 76px 0 0; gap: 13px; align-items: flex-start;
  border-radius: 48% 48% 43% 43%;
  background:
    radial-gradient(ellipse at 32% 66%, color-mix(in srgb, #E98778 28%, transparent) 0 8%, transparent 15%),
    radial-gradient(ellipse at 68% 66%, color-mix(in srgb, #E98778 28%, transparent) 0 8%, transparent 15%),
    radial-gradient(ellipse at 50% 24%, color-mix(in srgb, #fff 58%, transparent), transparent 43%),
    linear-gradient(158deg, color-mix(in srgb, var(--panel) 90%, #F0C7A6), color-mix(in srgb, var(--panel-2) 72%, #D99C77));
  box-shadow: 0 30px 55px -34px color-mix(in srgb, var(--ink) 62%, transparent), inset 0 0 0 1px color-mix(in srgb, #fff 56%, transparent), inset 0 -14px 24px color-mix(in srgb, #9C593C 13%, transparent);
}
.gz-hair { position: absolute; z-index: 0; left: 13%; right: 13%; top: -7px; height: 76px; border-radius: 58% 58% 28% 28%; background: linear-gradient(145deg, color-mix(in srgb, var(--ink) 86%, #74543F), color-mix(in srgb, var(--ink) 70%, #241C19)); box-shadow: inset 0 2px 0 rgba(255,255,255,.18); }
.gz-eye { z-index: 1; width: 48px; height: 37px; overflow: visible; border: 1px solid color-mix(in srgb, #593F34 20%, transparent); background: linear-gradient(#fffdf7, #e9dfcf); box-shadow: 0 4px 8px -5px rgba(52,32,22,.45), inset 0 -2px 3px rgba(52,32,22,.08); }
.gz-eye::before { content: ""; position: absolute; z-index: 2; left: 5px; right: 5px; top: -10px; height: 8px; border-top: 3px solid color-mix(in srgb, var(--ink) 58%, #765C4A); border-radius: 50%; transform: rotate(-5deg); }
.gz-eye:last-of-type::before { transform: rotate(5deg); }
.gz-pupil { width: 17px; height: 17px; border-color: color-mix(in srgb, var(--accent) 68%, #2F2523); background: radial-gradient(circle at 34% 28%, #fff 0 12%, color-mix(in srgb, var(--accent) 85%, #352224) 14% 55%, #272124 57%); box-shadow: 0 0 0 2px rgba(255,255,255,.65); }
.gz-mouth { position: absolute; left: 50%; bottom: 34px; width: 27px; height: 11px; margin-left: -13.5px; border-bottom: 2px solid color-mix(in srgb, #9D514D 72%, var(--ink)); border-radius: 0 0 50% 50%; opacity: .82; }
.term--detail .stage.kind-compound .gz-eye { width: 54px; height: 41px; }
.term--detail .stage.kind-compound .gz-pupil { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .gz-body, .term--detail .stage.kind-compound .gz-body { width: min(194px, 52vw); height: min(222px, 60vw); padding-top: min(76px, 20vw); gap: min(13px, 3vw); }
  .gz-eye, .term--detail .stage.kind-compound .gz-eye { width: min(54px, 14vw); height: min(41px, 10.7vw); }
  .gz-pupil, .term--detail .stage.kind-compound .gz-pupil { width: min(20px, 5.2vw); height: min(20px, 5.2vw); }
}

/* 拖尾：前端是指针光点，后方逐颗衰减，静止自动巡游时也能看懂链式跟随。 */
.cp-tr { background: radial-gradient(ellipse at 50% 48%, color-mix(in srgb, var(--accent) 12%, var(--bg-2)), var(--bg-2) 68%); }
.tr-path::before { content: ""; position: absolute; inset: 16%; border: 1px solid color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 50%; transform: rotate(-18deg) scaleY(.58); }
.tr-d { width: calc(22px - var(--i) * .9px); height: calc(22px - var(--i) * .9px); background: radial-gradient(circle at 35% 30%, #fff 0 5%, var(--accent-2) 20%, var(--accent) 62%, color-mix(in srgb, var(--accent-3) 76%, transparent)); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 42%, transparent); }
.tr-d:first-child { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 28px color-mix(in srgb, var(--accent) 68%, transparent); }

/* 主题渐变：色彩变化发生在一张完整的编辑页上，文字、表面和色票一起换肤。 */
.tm-pin { background: var(--bg-2); transition: background-color .12s linear, color .12s linear; }
.tm-card { position: relative; display: grid; justify-items: start; align-content: center; gap: 15px; width: min(76%, 660px); min-height: 260px; margin: auto; padding: 32px 38px; text-align: left; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 20px; background: color-mix(in srgb, #fff 16%, transparent); box-shadow: 0 24px 60px -38px color-mix(in srgb, currentColor 42%, transparent), inset 0 1px 0 rgba(255,255,255,.38); backdrop-filter: blur(12px); }
.tm-kicker,.tm-foot { font: 10px/1.4 var(--mono); letter-spacing: .16em; opacity: .62; }
.tm-kicker i { padding-inline: 5px; font-style: normal; }
.tm-card .tm-hd { margin: 4px 0 0; font: 500 clamp(28px,4vw,48px)/1.1 var(--disp); letter-spacing: .03em; }
.tm-copy { margin: 0; font: 15px/1.8 var(--body); opacity: .76; }
.tm-sw { margin-top: 2px; gap: 8px; }
.tm-sw k { width: 36px; height: 22px; border-radius: 7px; box-shadow: 0 3px 8px rgba(24,18,24,.12); }
.tm-hex { font-size: 10px; letter-spacing: .12em; }
.tm-dots { margin-top: 2px; }
.tm-dots b { width: 24px; height: 2px; }
.tm-foot { justify-self: end; margin-top: 2px; }
@media (max-width: 640px) { .tm-card { width: 88%; min-height: 240px; padding: 24px; gap: 12px; } .tm-copy { font-size: 13px; } }

/* 进度环：将数字放在阅读封面里，滚动值就是这篇内容读到的位置。 */
.rg-pin { background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 11%, var(--bg-2)), var(--bg-2) 74%); }
.rg-cover { display: grid; justify-items: center; align-content: center; gap: 18px; width: min(82%, 720px); min-height: 330px; padding: 28px; text-align: center; border: 1px solid var(--line-soft); border-radius: 22px; background: color-mix(in srgb, var(--panel) 86%, transparent); box-shadow: 0 22px 54px -38px color-mix(in srgb, var(--ink) 36%, transparent); }
.rg-kicker,.rg-scroll { font: 10px/1.4 var(--mono); letter-spacing: .15em; color: var(--muted); }
.rg-kicker i { margin-inline: 5px; color: var(--accent); font-style: normal; }
.rg-cover h3 { margin: 0; font: 500 clamp(25px,4vw,42px)/1.2 var(--disp); letter-spacing: .02em; color: var(--ink); }
.rg-cover h3 em { color: var(--accent); font-weight: 400; }
.rg-cover p { margin: -5px 0 0; font-size: 13px; color: var(--muted); }
.rg-meter { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin: 2px 0; }
.rg-pin .rg-meter svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rg-pin .rg-bg { stroke-width: 4; }
.rg-pin .rg-fg { stroke-width: 4; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 36%, transparent)); }
.rg-v { font-size: 26px; color: var(--accent); }
.rg-scroll i { display: inline-block; margin-left: 6px; font-style: normal; color: var(--accent); animation: rg-nudge 1.6s ease-in-out infinite; }
@keyframes rg-nudge { 50% { transform: translateY(4px); } }
@media (max-width: 640px) { .rg-cover { width: 88%; min-height: 300px; padding: 20px 14px; gap: 15px; } .rg-cover p { font-size: 12px; } }

/* 图表生长：未滚动时先露出完整的淡色走势，滚动再将主线和面积逐步点亮。 */
.cb-pin { position: sticky; gap: 16px; padding: 30px 22px 18px; }
.cb-head { display: grid; gap: 6px; }
.cb-head span { font: 9px/1.4 var(--mono); letter-spacing: .15em; color: var(--muted); }
.cb-head span i { padding-inline: 4px; color: var(--accent); font-style: normal; }
.cb-head strong { font: 500 20px/1.2 var(--disp); color: var(--ink); }
.cb-head strong em { margin-left: 8px; font: normal 10px var(--mono); color: var(--muted); }
.cb-box { height: min(26vh, 174px); min-height: 104px; }
.cb-ghost-area { fill: color-mix(in srgb, var(--accent) 5%, transparent); }
.cb-ghost-line { fill: none; stroke: color-mix(in srgb, var(--accent) 24%, var(--line)); stroke-width: 1.4; stroke-dasharray: 3 5; stroke-linecap: round; stroke-linejoin: round; }
.cb-area,.cb-line { position: relative; }
.cb-line { filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--accent) 30%, transparent)); }
.cb-bars > s { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 20%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)); }

/* Final cascade: these presentation overrides stay after the legacy demo refinements. */
.gz-body, .term--detail .stage.kind-compound .gz-body { width: 194px !important; height: 222px !important; padding: 76px 0 0 !important; gap: 13px !important; align-items: flex-start; border-radius: 48% 48% 43% 43%; }
.gz-eye, .term--detail .stage.kind-compound .gz-eye { width: 54px !important; height: 41px !important; overflow: visible; }
.gz-pupil, .term--detail .stage.kind-compound .gz-pupil { width: 20px !important; height: 20px !important; }
@media (max-width: 640px) {
  .gz-body, .term--detail .stage.kind-compound .gz-body { width: min(194px, 52vw) !important; height: min(222px, 60vw) !important; padding-top: min(76px, 20vw) !important; gap: min(13px, 3vw) !important; }
  .gz-eye, .term--detail .stage.kind-compound .gz-eye { width: min(54px, 14vw) !important; height: min(41px, 10.7vw) !important; }
  .gz-pupil, .term--detail .stage.kind-compound .gz-pupil { width: min(20px, 5.2vw) !important; height: min(20px, 5.2vw) !important; }
}
.rg-pin { display: grid; place-items: center; }
.rg-pin .rg-meter svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rg-pin .rg-meter { position: relative; width: 112px; height: 112px; }
.rg-cover { position: relative; z-index: 1; }
.cb-pin { display: grid; align-content: center; }
.cb-box { width: 100%; }
.tr-d { background: radial-gradient(circle at 34% 30%, #fff5df 0 7%, var(--accent-2) 20%, var(--accent) 62%, color-mix(in srgb, var(--accent-3) 76%, transparent)) !important; }
.cp-dio { background: #211921; box-shadow: inset 0 0 48px rgba(19,11,15,.35); }
.cp-dio .dl.sky {
  background:
    radial-gradient(ellipse at 52% 92%, rgba(255,195,126,.5), transparent 54%),
    radial-gradient(ellipse at 78% 28%, rgba(151,83,120,.3), transparent 40%),
    linear-gradient(168deg, #25243A 0%, #65404B 55%, #D18650 100%);
}
.cp-dio .dl.sky::before { content:""; position:absolute; inset:0; opacity:.58; background-image:radial-gradient(1px 1px at 16% 24%,#fff 65%,transparent),radial-gradient(1px 1px at 32% 13%,#fff 65%,transparent),radial-gradient(1px 1px at 67% 20%,#fff 65%,transparent),radial-gradient(1px 1px at 86% 38%,#fff 65%,transparent),radial-gradient(1px 1px at 57% 39%,#fff 65%,transparent); }
.cp-dio .dl.moon { left: 12%; top: 12%; width: 38px; height: 38px; background: radial-gradient(circle at 34% 29%, #fff9df, #f9d28b 58%, #df9856); box-shadow:0 0 24px 8px rgba(255,213,148,.3),0 0 74px 28px rgba(255,194,126,.2); }
.cp-dio .dl.l1 { left:-8%; right:-8%; bottom:25%; height:52%; clip-path:polygon(0 78%,12% 54%,24% 65%,42% 20%,58% 55%,71% 29%,88% 68%,100% 54%,100% 100%,0 100%); background:linear-gradient(180deg,#B87662,#73505A); box-shadow:inset 0 1px rgba(255,233,196,.45); }
.cp-dio .dl.l2 { left:-12%; right:-10%; bottom:10%; height:55%; clip-path:polygon(0 66%,17% 35%,31% 62%,48% 19%,62% 57%,81% 30%,100% 62%,100% 100%,0 100%); background:linear-gradient(180deg,#6C4B50,#3D333C); }
.cp-dio .dl.l3 { left:-14%; right:-14%; bottom:-8%; height:48%; clip-path:polygon(0 42%,17% 20%,34% 44%,53% 15%,72% 39%,87% 24%,100% 46%,100% 100%,0 100%); background:linear-gradient(180deg,#44323A,#211A21); }
.cp-dio .dl.critter { left:49%; bottom:23%; width:18px; height:33px; border-radius:48% 48% 26% 26%; background:linear-gradient(90deg,#171319,#34252A 58%,#171319); box-shadow:0 0 16px rgba(255,187,128,.16); }
.cp-dio .dl.critter s { left:3px; top:-10px; width:12px; height:12px; border-radius:50%; background:#21191d; }
.cp-dio .dl.critter::after { right:-5px; top:22px; width:28px; height:9px; border-radius:50%; background:#21191d; box-shadow:0 0 11px rgba(255,187,128,.16); }
.cp-lf .lf-obj { width:78px; height:78px; margin:-39px 0 0 -39px; border-radius:48% 52% 46% 54%; background:radial-gradient(circle at 32% 24%,#fff4dc 0 4%,#ffd4a8 13%,#f0874d 40%,#a43832 76%,#492031 100%); box-shadow:0 0 36px 4px color-mix(in srgb,var(--accent) 45%,transparent),0 26px 38px -24px #000,inset -8px -10px 18px rgba(35,15,34,.42),inset 4px 5px 12px rgba(255,247,222,.62); }
.cp-lf .lf-obj::before { content:""; position:absolute; left:17%; top:15%; width:42%; height:21%; border-radius:50%; background:rgba(255,250,230,.56); filter:blur(4px); transform:rotate(-28deg); }
.cp-lf .lf-obj::after { content:""; position:absolute; inset:-20px; border:1px solid color-mix(in srgb,var(--accent-2) 68%,transparent); border-radius:50%; transform:rotate(-26deg) scaleY(.42); box-shadow:0 0 16px color-mix(in srgb,var(--accent) 24%,transparent); }
.cp-lf .lf-floor { height:45%; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 12%,transparent) 66%,rgba(255,255,255,.04)); }
.cp-lf .lf-floor::before { content:""; position:absolute; top:12%; left:43%; width:14%; height:76%; border-radius:50%; background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,transparent),transparent); filter:blur(10px); }
.term--detail .lf-obj { border-radius:48% 52% 46% 54% !important; }

/* The floating action expands from a real list instead of placeholder skeleton bars. */
.fb-page { display:block; padding:18px 20px; background:linear-gradient(145deg,var(--panel),var(--bg-2)); border:1px solid var(--line-soft); box-shadow:inset 0 1px 0 rgba(255,255,255,.65); }
.fb-head { display:grid; gap:5px; margin:2px 0 13px; }
.fb-head span { font:9px/1.4 var(--mono); letter-spacing:.15em; color:var(--muted); }
.fb-head span i { color:var(--accent); font-style:normal; }
.fb-head > b { font:500 21px/1.2 var(--disp); color:var(--ink); }
.fb-list { display:grid; gap:5px; }
.fb-row { display:flex; align-items:center; gap:10px; height:30px; padding:0 9px; border:1px solid color-mix(in srgb,var(--ink) 7%,transparent); border-radius:9px; background:color-mix(in srgb,var(--panel) 78%,transparent); }
.fb-row s { display:grid; place-items:center; width:20px; height:20px; flex:0 0 20px; border-radius:6px; color:var(--accent); background:color-mix(in srgb,var(--accent) 11%,var(--panel)); font:8px var(--mono); }
.fb-row u { height:auto; background:none; color:var(--ink-2); font:11px var(--body); }
.fb-row em { color:var(--muted); font:9px var(--mono); font-style:normal; }
.cp-fab.open .fb-row { filter:brightness(.78); }
.fb-page { padding:12px 14px 28px; }
.fb-head { gap:4px; margin:1px 0 7px; }
.fb-head > b { font-size:18px; }
.fb-list { gap:4px; }
.fb-row { height:24px; padding-inline:7px; }
.fb-row s { width:18px; height:18px; flex-basis:18px; }
.lm-pin::before { content:"STORY / ONE THOUGHT AT A TIME"; position:absolute; left:22px; top:20px; font:9px/1.4 var(--mono); letter-spacing:.14em; color:var(--muted); opacity:.78; }
.lm-pin::after { content:"01 — 04"; position:absolute; right:20px; bottom:17px; font:9px/1.4 var(--mono); letter-spacing:.12em; color:var(--accent); opacity:.72; }
.lm-line > s { font-size:clamp(22px,3vw,34px); }

/* Keep the chapter card and reading meter fully inside the short demo viewport. */
.term--detail .stage.kind-compound:has(.cp-tm) { height: 390px; }
.term--detail .stage.kind-compound:has(.cp-rg) { height: 390px; }
@media (max-width: 640px) {
  .term--detail .stage.kind-compound:has(.cp-tm) { height: 350px; }
  .term--detail .stage.kind-compound:has(.cp-rg) { height: 360px; }
}
.tr-path::before { content: none !important; }
.cp-tr { background: radial-gradient(ellipse at 50% 48%, color-mix(in srgb, var(--accent) 15%, var(--bg-2)), var(--bg-2) 70%); }
.tr-d { background: radial-gradient(circle at 34% 30%, #fff5df 0 7%, var(--accent-2) 20%, var(--accent) 62%, color-mix(in srgb, var(--accent-3) 76%, transparent)) !important; }

/* ---------- demo 精修：涡旋（星速线更亮、圈层发光） ---------- */
.vx-r { border-width: 1.5px; box-shadow: 0 0 18px -6px color-mix(in srgb, var(--accent) 55%, transparent) inset, 0 0 14px -8px color-mix(in srgb, var(--accent) 50%, transparent); }
.vx-st { background: linear-gradient(var(--accent), transparent); height: 30px; }
.vx-core { box-shadow: 0 0 44px 12px color-mix(in srgb, var(--accent) 60%, transparent); }

/* 轨道小球的落影统一成暖色 */
.ob-sh { background: rgba(60, 34, 8, .22); }

/* ==========================================================================
   调色板 · 2–5（点击顶栏主题按钮循环；paper/ember 是 :root 与 [data-theme=ember]）
   ========================================================================== */

/* 青瓷：瓷白底 + 缸豆青，配一抹柿橙 */
[data-theme=celadon] {
  --bg: #F7F6F0;
  --bg-2: #EEEEE5;
  --panel: #FEFDFB;
  --panel-2: #F1F0E6;
  --line: #DCDACB;
  --line-soft: #E9E7DB;
  --ink: #1D211E;
  --ink-2: #484E48;
  --muted: #6D7168;   /* 同 paper：次要文字要过 4.5:1 */
  --accent: #0E7C6B;
  --accent-strong: var(--accent);
  --accent-ink: #F2FBF8;
  --accent-2: #C25E00;
  --accent-3: #A83A7E;
  --ok: #2B8A3E;
  --bad: #C92A2A;
  --secondary-container: #E3F0EA;
  --grid-line: #E5E4D6;
  --obj-a: #12947E;
  --obj-b: #A8E0CB;
  --shadow: 0 1px 2px rgba(30, 52, 44, .06), 0 4px 14px rgba(30, 52, 44, .07);
  --shadow-hover: 0 2px 5px rgba(30, 52, 44, .07), 0 14px 30px -10px rgba(30, 52, 44, .22);
  --shadow-float: 0 8px 30px rgba(24, 44, 36, .15);
}

/* 石墨·电光：冷石墨暗底 + 电光青，副色琥珀 */
[data-theme=graphite] {
  --bg: #0B0D10;
  --bg-2: #12151A;
  --panel: #181C22;
  --panel-2: #222831;
  --line: #333B46;
  --line-soft: #252C35;
  --ink: #E8EDF3;
  --ink-2: #C2CBD7;
  --muted: #8B95A3;
  --accent: #3BC9DB;
  --accent-strong: var(--accent);
  --accent-ink: #06222A;
  --accent-2: #FFA94D;
  --accent-3: #DA77F2;
  --ok: #69DB7C;
  --bad: #FF8787;
  --secondary-container: #14262B;
  --grid-line: #181D24;
  --obj-a: #22B8CF;
  --obj-b: #1C5ED6;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 22px -10px rgba(0, 0, 0, .65);
}

/* 鸢尾·紫：站点的 Material 血统，原版紫罗兰完整保留 */
[data-theme=iris] {
  --bg: #FFFBFE;
  --bg-2: #F7F2FA;
  --panel: #F3EDF7;
  --panel-2: #ECE6F0;
  --line: #CAC4D0;
  --line-soft: #E7E0EC;
  --ink: #1D1B20;
  --ink-2: #49454F;
  --muted: #6E6A73;
  --accent: #6750A4;
  --accent-strong: var(--accent);
  --accent-ink: #FFFFFF;
  --accent-2: #00696E;
  --accent-3: #7D5260;
  --ok: #146C2E;
  --bad: #B3261E;
  --secondary-container: #E8DEF8;
  --grid-line: #F0EAF6;
  --obj-a: #6750A4;
  --obj-b: #D0BCFF;
  --shadow: 0 1px 2px rgba(28, 24, 44, .05), 0 4px 14px rgba(28, 24, 44, .06);
  --shadow-hover: 0 2px 5px rgba(28, 24, 44, .06), 0 14px 30px -10px rgba(28, 24, 44, .18);
  --shadow-float: 0 8px 30px rgba(20, 16, 36, .14);
}

/* ==========================================================================
   精修层 2 · 通用对象质感 + 33–35 号新 demo
   ========================================================================== */
/* .obj 全站通用：渐变球面 + 顶部高光 + 落影，几十个 demo 一起提质感 */
.obj {
  background: radial-gradient(120% 120% at 30% 22%, var(--obj-b), var(--obj-a) 64%, color-mix(in srgb, var(--obj-a) 68%, #000) 110%);
  box-shadow: 0 12px 24px -12px rgba(56, 30, 6, .5), inset 0 2px 5px rgba(255, 255, 255, .38), inset 0 -6px 12px rgba(10, 4, 0, .14);
}

/* ---- 33. 磁吸按钮 ---- */
.cp-mg { display: grid; place-items: center; }
.mg-btn {
  display: grid; place-items: center; width: 118px; height: 52px; border-radius: 999px;
  background: radial-gradient(120% 120% at 30% 22%, var(--obj-b), var(--accent) 66%, color-mix(in srgb, var(--accent) 62%, #000));
  color: var(--accent-ink); font-family: var(--disp); font-size: 17px; font-weight: 560; letter-spacing: .02em;
  box-shadow: 0 16px 30px -14px rgba(56, 30, 6, .6), inset 0 2px 5px rgba(255, 255, 255, .42), inset 0 -6px 12px rgba(10, 4, 0, .14);
  will-change: transform; user-select: none;
}
.mg-ring {
  position: absolute; width: 176px; height: 176px; border-radius: 50%; pointer-events: none;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 38%, transparent);
}

/* ---- 34. 指针倾斜卡 ---- */
.cp-tl { display: grid; place-items: center; perspective: 760px; }
.tl-card {
  position: relative; display: block; width: 168px; height: 220px; border-radius: 14px; overflow: hidden;
  transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 30px 54px -24px rgba(40, 18, 2, .62), 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
}
.tl-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tl-glare { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s; mix-blend-mode: soft-light; }
.tl-cap {
  position: absolute; left: 10px; bottom: 9px; z-index: 1; text-decoration: none;
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: #fff;
  background: rgba(12, 10, 16, .55); padding: 2px 8px; border-radius: 999px; backdrop-filter: blur(4px);
}

/* ---- 35. 数字滚动计数 ---- */
.cp-od { display: grid; place-items: center; gap: 16px; cursor: pointer; user-select: none; }
.od-n {
  display: inline-flex; gap: 5px; padding: 9px; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  box-shadow: inset 0 2px 10px rgba(30, 20, 6, .1), var(--shadow);
}
.od-d {
  position: relative; width: 32px; height: 46px; overflow: hidden; border-radius: 9px;
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-soft);
}
.od-d::before, .od-d::after { content: ""; position: absolute; left: 0; right: 0; height: 13px; z-index: 1; pointer-events: none; }
.od-d::before { top: 0; background: linear-gradient(var(--panel), transparent); }
.od-d::after { bottom: 0; background: linear-gradient(transparent, var(--panel)); }
.od-d b {
  position: absolute; left: 0; right: 0; top: 0; display: block; will-change: transform;
  font-family: var(--mono); font-size: 25px; line-height: 46px; font-weight: 500; color: var(--ink);
  text-align: center; transition: transform .62s cubic-bezier(.22, 1.4, .3, 1);
}
.od-d b i { display: block; height: 46px; font-style: normal; }
.od-btn {
  display: inline-grid; place-items: center; padding: 9px 20px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow); transition: transform .18s var(--ease-out);
}
.cp-od:active .od-btn { transform: scale(.94); }

/* 详情页放大 */
.term--detail .mg-btn { width: 156px; height: 64px; font-size: 20px; }
.term--detail .mg-ring { width: 230px; height: 230px; }
.term--detail .tl-card { width: 216px; height: 284px; border-radius: 17px; }
.term--detail .tl-cap { font-size: 10.5px; left: 13px; bottom: 12px; }
.term--detail .od-d { width: 42px; height: 60px; border-radius: 11px; }
.term--detail .od-d b { font-size: 32px; line-height: 60px; }
.term--detail .od-d b i { height: 60px; }
.term--detail .od-d::before, .term--detail .od-d::after { height: 16px; }
.term--detail .od-n { gap: 7px; padding: 12px; border-radius: 17px; }

/* ==========================================================================
   精修层 3 · 36–38 号新 demo（对齐 motion.dev 的演示质感）
   ========================================================================== */

/* ---- 36. 五彩纸屑 ---- */
.cp-cf { display: grid; place-items: center; }
.cf-stage { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; }
.cf-stage .cf-btn {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  display: inline-grid; place-items: center; padding: 13px 26px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 500;
  box-shadow: var(--shadow-hover); transition: transform .18s var(--ease-out); cursor: pointer;
}
.cp-cf:active .cf-btn { transform: translate(-50%, -50%) scale(.93); }
.cf-p {
  position: absolute; left: 0; top: 0; border-radius: 2px; pointer-events: none;
  box-shadow: 0 1px 2px rgba(30, 16, 0, .25); will-change: transform;
}

/* ---- 37. 滑动标签指示器 ---- */
.cp-tb2 { display: grid; place-content: center; gap: 16px; padding: 0 26px; }
.tb2-row {
  position: relative; display: flex; gap: 4px; width: max-content; margin: 0 auto;
  padding: 4px; border-radius: 999px; background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.tb2-it {
  position: relative; z-index: 1; padding: 9px 22px; border-radius: 999px; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  transition: color var(--dur-2); user-select: none;
}
.tb2-it.on { color: var(--accent-ink); }
.tb2-ind {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: 60px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: left .42s cubic-bezier(.3, 1.4, .35, 1), width .42s cubic-bezier(.3, 1.4, .35, 1);
}
.tb2-page {
  margin: 0; min-height: 44px; display: grid; place-items: center; text-align: center;
  font-size: 13.5px; color: var(--ink-2); max-width: 420px;
}

/* ---- 38. 3D 立体轮播 ---- */
.cp-cv { display: grid; place-items: center; perspective: 900px; }
.cv-stage { position: relative; width: 150px; height: 200px; transform-style: preserve-3d; }
.cv-c {
  position: absolute; inset: 0; border-radius: 14px; overflow: hidden; cursor: pointer;
  box-shadow: 0 26px 46px -22px rgba(40, 18, 2, .6), 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
  transition: transform .55s cubic-bezier(.22, 1, .3, 1), opacity .55s; will-change: transform, opacity;
}
.cv-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-c.focus { box-shadow: 0 34px 60px -24px rgba(40, 18, 2, .75), 0 0 0 2px var(--accent); }
.term--detail .cv-stage { width: 210px; height: 280px; }
.term--detail .cv-c { border-radius: 17px; }

/* ==========================================================================
   精修层 4 · 车门绽放（真门板铰链开合） + 沉浸式漂浮生长
   ========================================================================== */

/* ---- 悬停触发车门绽放：4 扇门板绕外缘铰链 rotateY 展开，舱内光晕增强 ---- */
.cp-bloom { display: grid; place-items: center; }
.dr-scene { position: relative; width: 196px; height: 152px; perspective: 820px; transform-style: preserve-3d; }
.dr-cabin {
  position: absolute; inset: 0; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background:
    radial-gradient(78% 60% at 50% 60%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 72%),
    linear-gradient(180deg, #17130E, #262012 78%, #191309);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 -14px 26px rgba(0, 0, 0, .5);
}
.dr-cabin .dr-brand {
  font-family: var(--disp); font-style: italic; font-weight: 560; font-size: 23px; color: var(--accent);
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 72%, transparent); transition: text-shadow .6s;
}
.dr-glow {
  position: absolute; inset: 10%; border-radius: 10px; opacity: .3; transition: opacity .65s;
  background: radial-gradient(60% 55% at 50% 56%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 74%);
}
.dr-console { position: absolute; left: 50%; bottom: 11px; width: 46%; height: 7px; margin-left: -23%; border-radius: 4px; background: rgba(255, 255, 255, .12); }
.dr-door {
  position: absolute; width: 50.5%; height: 50.5%; backface-visibility: hidden;
  background: linear-gradient(155deg, color-mix(in srgb, var(--obj-b) 88%, #FFFDF6), var(--obj-a) 56%, color-mix(in srgb, var(--obj-a) 66%, #2E1400));
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, .42), inset 0 -9px 15px rgba(30, 10, 0, .28), 0 12px 26px -12px rgba(40, 18, 2, .62);
  transition: transform .64s cubic-bezier(.22, 1, .3, 1);
}
/* 车窗 + 门把手 */
.dr-door::before { content: ""; position: absolute; inset: 13% 15% auto 15%; height: 30%; border-radius: 6px; background: linear-gradient(180deg, rgba(16, 10, 4, .52), rgba(16, 10, 4, .16)); }
.dr-door::after { content: ""; position: absolute; top: 53%; width: 15px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--accent-ink) 88%, transparent); }
.dr-door.tl { left: 0; top: 0; transform-origin: left center; border-radius: 14px 3px 3px 3px; }
.dr-door.tr { right: 0; top: 0; transform-origin: right center; border-radius: 3px 14px 3px 3px; }
.dr-door.bl { left: 0; bottom: 0; transform-origin: left center; border-radius: 3px 3px 3px 14px; transition-delay: var(--stg, 45ms); }
.dr-door.br { right: 0; bottom: 0; transform-origin: right center; border-radius: 3px 14px 3px 3px; transition-delay: var(--stg, 45ms); }
.dr-door.tl::after, .dr-door.bl::after { right: 13px; }
.dr-door.tr::after, .dr-door.br::after { left: 13px; }
/* 开度与错峰都是卡片上的滑块：app.js 的 initCtl 会把 <key> 直接写成 --<key>，
   所以这里读 var(--op) / var(--stg) 就够了，不需要再经一遍 JS */
.cp-bloom.open .dr-door.tl { transform: rotateY(calc(-1 * var(--op, 88deg))); }
.cp-bloom.open .dr-door.tr { transform: rotateY(var(--op, 88deg)); }
.cp-bloom.open .dr-door.bl { transform: rotateY(calc(-1 * var(--op, 88deg))); }
.cp-bloom.open .dr-door.br { transform: rotateY(var(--op, 88deg)); }
.cp-bloom.open .dr-glow { opacity: 1; }
.cp-bloom.open .dr-cabin .dr-brand { text-shadow: 0 0 38px var(--accent); }
.term--detail .dr-scene { width: 280px; height: 216px; }
.term--detail .dr-cabin .dr-brand { font-size: 30px; }

/* ---- 沉浸式漂浮生长：暮色天幕 + 漂浮孢子 + 点哪长哪 ---- */
.cp-im { display: block; }
.im-sky {
  position: absolute; inset: 0; border-radius: 12px; overflow: hidden;
  background:
    radial-gradient(1.6px 1.6px at 16% 18%, rgba(255, 238, 205, .95), transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 12%, rgba(255, 238, 205, .85), transparent 60%),
    radial-gradient(1.4px 1.4px at 56% 26%, rgba(255, 238, 205, .75), transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 8%, rgba(255, 238, 205, .8), transparent 60%),
    linear-gradient(180deg, #131728 0%, #2A3052 36%, #71506E 66%, #C97B4E 100%);
}
.im-spore {
  position: absolute; left: calc(6% + var(--i) * 13.5%); bottom: 20%; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 232, 190, .9); box-shadow: 0 0 9px 2px rgba(255, 214, 150, .38);
  animation: im-float 5.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.85s);
}
@keyframes im-float { from { transform: translateY(0) } to { transform: translateY(-27px) } }
.im-hill { position: absolute; border-radius: 50% 50% 0 0; }
.im-hill.h1 { left: -8%; right: 30%; bottom: -6%; height: 42%; background: linear-gradient(180deg, #3E2E52, #291E3A); }
.im-hill.h2 { left: 34%; right: -10%; bottom: -4%; height: 30%; background: linear-gradient(180deg, #503B2C, #34251C); }
.im-field { position: absolute; inset: 0; }
.im-pt { position: absolute; width: 0; transform-origin: bottom center; animation: im-sway var(--d, 3.4s) ease-in-out infinite alternate; }
@keyframes im-sway { from { transform: rotate(-2.4deg) } to { transform: rotate(2.4deg) } }
.im-plant { position: absolute; bottom: 0; left: -30px; width: 60px; height: 110px; overflow: visible; }
.im-stem { fill: none; stroke: #82B36C; stroke-width: 3.4; stroke-linecap: round; }
.im-leaf { fill: #93CC80; }
.im-bud { fill: var(--accent); }
.im-budin { fill: #FFE9C9; }
.term--detail .im-plant { left: -42px; width: 84px; height: 154px; }

/* ==========================================================================
   精修层 5 · 真实素材进 demo（钉住/堆叠/环绕/聚光/抽帧/双栏/邻近/螺旋/拖尾）
   ========================================================================== */

/* 钉住主视觉：照片当主视觉，收缩时跟着压暗 */
.pi-hero { position: relative; }
.pi-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; opacity: .92; }
.pi-hero b, .pi-hero s { position: relative; z-index: 1; }
.pi-hero b { text-shadow: 0 1px 10px rgba(10, 6, 0, .55); }
.pi-hero s { text-shadow: 0 1px 6px rgba(10, 6, 0, .5); }

/* 章节覆盖堆叠：卡片上部照片封面 */
.pk-ph { position: absolute; inset: 0 0 34%; background-size: cover; background-position: center; opacity: .5; transition: opacity .3s; }
.pk b, .pk em, .pk span, .pk-l { position: relative; z-index: 1; }

/* 角色环绕：照片当旋转面 */
.obf { overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.obf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.obf u {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); text-decoration: none; z-index: 1;
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: #fff;
  background: rgba(12, 10, 16, .55); padding: 2px 8px; border-radius: 999px; backdrop-filter: blur(4px);
}

/* 聚光揭示：遮罩下是照片墙 */
.sp-grid s { background: none; }
.sp-grid s img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-grid s em { position: absolute; left: 8px; bottom: 6px; z-index: 1; font-style: normal; font-family: var(--mono); font-size: 9.5px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.sp-grid s u { z-index: 1; background: none; }

/* 滚动抽帧：照片跟着逐帧横摇，轨道条做前景 */
.cp-fr { background: #101417; }
.fr-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit; will-change: object-position; filter: saturate(.92) contrast(1.08) brightness(.86);
}

/* 监看器外壳：先把“视频帧”从普通背景里框出来 */
.fr-pin {
  --frame-progress: 0;
  position: relative; display: block; overflow: hidden; color: #EAF2F0;
  background: radial-gradient(80% 100% at 50% 26%, rgba(55, 102, 104, .26), transparent 72%), linear-gradient(145deg, #13191B, #0B0E10 68%, #151114);
}
.fr-pin::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .38;
  background-image: linear-gradient(rgba(160, 208, 204, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 208, 204, .055) 1px, transparent 1px);
  background-size: 34px 34px;
}
.fr-pin::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(180deg, rgba(6, 10, 11, .42), transparent 22%, transparent 76%, rgba(6, 8, 9, .7));
}
.fr-monitor {
  position: absolute; z-index: 1; left: 7%; right: 7%; top: 8%; bottom: 27%; overflow: hidden;
  border: 1px solid rgba(208, 238, 232, .48); border-radius: 12px;
  background: #101719; box-shadow: 0 24px 50px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(0, 0, 0, .4);
}
.fr-monitor::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, rgba(12, 23, 24, .48), transparent 24%, transparent 72%, rgba(14, 8, 16, .2));
  mix-blend-mode: multiply;
}
.fr-grid { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .45; background: linear-gradient(90deg, transparent 33.18%, rgba(220, 244, 237, .28) 33.25%, rgba(220, 244, 237, .28) 33.38%, transparent 33.45%, transparent 66.55%, rgba(220, 244, 237, .28) 66.62%, rgba(220, 244, 237, .28) 66.75%, transparent 66.82%), linear-gradient(180deg, transparent 33.18%, rgba(220, 244, 237, .2) 33.25%, rgba(220, 244, 237, .2) 33.38%, transparent 33.45%, transparent 66.55%, rgba(220, 244, 237, .2) 66.62%, rgba(220, 244, 237, .2) 66.75%, transparent 66.82%); }
.fr-grid::before, .fr-grid::after { content: ""; display: none; } .fr-shot { position: absolute; z-index: 4; top: 12px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; font-style: normal; color: rgba(236, 246, 243, .9); text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.fr-shot { right: 14px; color: rgba(236, 246, 243, .62); }
.fr-console { position: absolute; z-index: 5; left: 7%; right: 7%; bottom: 8%; height: 54px; padding: 8px 10px 6px; border: 1px solid rgba(212, 236, 230, .18); border-radius: 9px; background: rgba(8, 12, 13, .82); box-shadow: 0 10px 24px rgba(0, 0, 0, .28); backdrop-filter: blur(10px); }
.fr-track-head { display: flex; justify-content: space-between; margin-bottom: 6px; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; color: rgba(212, 236, 230, .58); }
.fr-bars { position: relative; left: auto; bottom: auto; transform: none; width: 100%; height: 22px; display: flex; align-items: flex-end; gap: 3px; padding: 0; border-radius: 0; background: repeating-linear-gradient(90deg, rgba(190, 228, 221, .1) 0 1px, transparent 1px 10px); backdrop-filter: none; }
.fr-bars > s { flex: 1; min-width: 2px; border-radius: 1px; background: linear-gradient(180deg, #D9F2EB, #679F9A); transform-origin: bottom; opacity: .9; }
.fr-playhead { position: absolute; left: 8%; top: 24px; bottom: 5px; width: 1px; background: #F08B69; box-shadow: 0 0 9px rgba(240, 139, 105, .9); transition: left .12s steps(1, end); }
.fr-playhead::before { content: ""; position: absolute; left: -3px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: #F08B69; }

/* 钉住双栏：左栏照片随步骤交叉切换 */
.tc-left { position: relative; overflow: hidden; }
.tc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.tc-left .tc-n, .tc-left .tc-t { position: relative; z-index: 1; text-shadow: 0 1px 8px rgba(10, 6, 0, .6); }

/* 邻近点亮：照片马赛克，falloff 只调亮度与饱和 */
.pg-t { background-size: cover; background-position: center; border-radius: 8px; filter: brightness(calc(.3 + var(--k, 0) * .95)) saturate(calc(.45 + var(--k, 0) * .85)); box-shadow: 0 6px 14px -8px rgba(40, 18, 2, .5); }

/* 螺旋展示：照片沿螺旋排开 */
.hx-i { overflow: hidden; border-radius: 10px; padding: 0; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.hx-i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 光标拖尾：彗星渐变 + 辉光 */
.tr-d { background: radial-gradient(circle at 34% 30%, #FFEFD8, var(--accent) 62%, color-mix(in srgb, var(--accent) 55%, #6E2A00)); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--accent) 40%, transparent); }

/* 聚光揭示修复：每格照片以自身格子为定位容器 */
.sp-grid s { position: relative; overflow: hidden; }

/* ==========================================================================
   精修层 6 · 圆柱卡带 + 环形画廊（源片 03/04 同款）
   ========================================================================== */

/* ---- 圆柱卡带：一列照片卷成圆筒，相机在筒外 ---- */
.cp-cy { display: block; background: var(--bg-2); }
.cy-pin { position: sticky; top: 0; min-height: 100%; display: grid; align-content: start; background: inherit; }
.cy-space {
  position: relative; height: 236px; margin: 6px 14px 14px; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; perspective: 1150px; touch-action: pan-y; cursor: grab;
  background: radial-gradient(92% 84% at 50% 38%, color-mix(in srgb, var(--accent) 9%, var(--bg-2)), var(--bg-2) 76%);
}
.cp-cy:active .cy-space { cursor: grabbing; }
.cy-reel { position: relative; width: 112px; height: 158px; transform-style: preserve-3d; will-change: transform; }
.cy-c {
  position: absolute; inset: 0; border-radius: 10px; overflow: hidden; backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * 36deg)) translateZ(182px);
  box-shadow: 0 18px 40px -20px rgba(40, 18, 2, .55), 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
  will-change: transform, opacity;
}
.cy-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cy-hd { will-change: letter-spacing; }
.term--detail .cy-space { height: 400px; }
.term--detail .cy-reel { width: 148px; height: 208px; }
.term--detail .cy-c { transform: rotateY(calc(var(--i) * 36deg)) translateZ(238px); border-radius: 13px; }

/* ---- 环形画廊：暗场，相机在环外 ---- */
.scrolly.cp-r3, .cp-r3 { background: #0A0908; }
.cp-r3 { display: grid; align-content: start; height: 100%; color: #F2EEE9; }
.r3-space {
  position: relative; height: 208px; margin: 0 12px 12px; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; perspective: 1250px; touch-action: pan-y; cursor: grab;
  background: radial-gradient(82% 74% at 50% 44%, #1E1A15, #0A0908 78%);
}
.cp-r3:active .r3-space { cursor: grabbing; }
.r3-ring { position: relative; width: 148px; height: 206px; transform-style: preserve-3d; will-change: transform; }
.r3-c {
  position: absolute; inset: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(196px);
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .09);
  transition: box-shadow .3s; will-change: transform, opacity;
}
.r3-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-r3 .cp-kick { color: #E8734A; }
.cp-r3 .ced-hd { color: #F2EEE9; }
.cp-r3 .ced-hd em { color: #E8734A; }
.cp-r3 .cp-sub, .cp-r3 .cp-cap { color: rgba(242, 238, 233, .42); }
.term--detail .r3-space { height: 430px; }
.term--detail .r3-ring { width: 196px; height: 274px; }
.term--detail .r3-c { transform: rotateY(calc(var(--i) * 45deg)) translateZ(258px); border-radius: 15px; }

/* rail 的 hover 转角对齐源片 ±5° */
.rl-row.a .rl-c:hover { rotate: -5deg; }
.rl-row.b .rl-c:hover { rotate: 5deg; }

/* ==========================================================================
   精修层 7 · 六处反馈修复
   ========================================================================== */

/* 拖拽对比：一个清晰的图层堆栈，不叠加带色的全幅遮罩 */
.term--detail .cp-cp {
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-2);
  border: 0;
  box-shadow: none;
  --wipe: 50%;
}
.term--detail .cp-cp::after {
  content: none;
}
.term--detail .cp-cp .cp-after,
.term--detail .cp-cp .cp-before {
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.term--detail .cp-cp .cp-after img,
.term--detail .cp-cp .cp-before img {
  transform: none;
  backface-visibility: hidden;
  mix-blend-mode: normal;
  opacity: 1;
}
.term--detail .cp-cp .cp-after img,
.term--detail .cp-cp .cp-before img { filter: none; }
.term--detail .cp-cp .cp-line {
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(12,16,22,.16), 0 0 14px rgba(255,255,255,.28);
}
.term--detail .cp-cp .cp-hd {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid rgba(255,255,255,.82);
  background: rgba(255,255,255,.96);
  color: #29313a;
  box-shadow: 0 5px 16px rgba(12,18,24,.24);
}
.term--detail .cp-cp .cp-hd::after { content: "↔"; font-size: 13px; }
.term--detail .cp-cp .cp-cap {
  z-index: 4;
  left: 14px;
  bottom: 12px;
  border: 0;
  background: rgba(255,255,255,.92);
  color: #29313a;
  box-shadow: 0 4px 12px rgba(12,18,24,.16);
}

/* 修复层 8 · 对比滑块、数字可视化与悬停放大 */
.term--detail .cp-cp .cp-line { background: rgba(255,255,255,.92); }
.term--detail .cp-cp .cp-hd { touch-action: none; }
.term--detail .cp-cp .cp-before { clip-path: inset(0 calc(100% - var(--wipe, 50%)) 0 0); }
.term--detail .cp-cp .cp-tag {
  position: absolute; z-index: 2; top: 14px; bottom: auto; padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  background: rgba(14,18,24,.58); color: #fff; font: 500 9px/1 var(--mono);
  letter-spacing: .08em; text-shadow: none; backdrop-filter: blur(8px); pointer-events: none;
}
.term--detail .cp-cp .before-tag { left: 14px; }
.term--detail .cp-cp .after-tag { right: 14px; }
.term--detail .cp-cp .cp-before img,
.term--detail .cp-cp .cp-after img { filter: none !important; opacity: 1 !important; }
.num-compare { font-variant-numeric: lining-nums; }
.num-compare .num-live { transition: color .2s ease; }
.num-compare .num-live.proportional { color: color-mix(in srgb, var(--accent) 78%, var(--ink)); }
.num-compare .num-live.tabular { color: var(--ink); }
.num-note { display: block; padding-top: 2px; color: var(--muted); font: 9px/1.2 var(--mono); text-align: right; }
.term--detail .glasswrap { width: min(100%, 360px); height: 190px; border-radius: 18px; }
.term--detail .glasswrap .bg { border-radius: 16px; }
.term--detail .obj.glass.blur-demo { width: 210px; height: 92px; }
.term--detail .obj.glass.blur-demo span { font-size: 18px; }
.term--detail .obj.glass.blur-demo small { font-size: 8px; }
.t-hover-zoom .zoom-demo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 560px) {
  .num-compare { padding: 12px; }
  .num-row { grid-template-columns: 64px minmax(72px, 1fr) 38px; gap: 6px; }
  .num-row b { min-width: 98px; font-size: 21px; }
}

/* 2. 滚动抽帧：照片收进取景框，胶片条垫在下面——不再是满铺背景 */
.fr-pin { display: grid; justify-items: center; align-content: center; gap: 16px; padding: 18px 0; }
.fr-photo {
  position: relative; inset: auto; width: 66%; aspect-ratio: 16 / 9.4; height: auto;
  border-radius: 12px; box-shadow: 0 24px 48px -22px rgba(40, 18, 2, .55), 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.fr-bars { width: 66%; }

/* 4. 纵深隧道：详情页场景高度收进 pin，滚动到底不再下沉 */
.term--detail .tn-space { height: 348px; margin: 4px 14px 10px; }

/* 隧道说明固定在可视舞台内，滚到行程末尾也不会被图片/底缘压住。 */
.term--detail .tn-pin { position: sticky; top: 0; height: 100%; min-height: 100%; overflow: hidden; }
.term--detail .tn-pin > .cp-sub {
  position: absolute; z-index: 5; left: 16px; bottom: 12px; max-width: calc(100% - 32px);
  padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  background: rgba(10,9,12,.72); color: rgba(255,248,238,.82); font: 11px/1.45 var(--body);
  letter-spacing: .02em; backdrop-filter: blur(10px);
}
.term--detail .tn-space { margin-bottom: 44px; }
.term--detail .gz-field { z-index: auto; }
.term--detail .gz-target { z-index: 3; }

/* 视线跟随改为精致的双镜头追踪器，避免生硬的卡通人脸。 */
.gz-body, .term--detail .stage.kind-compound .gz-body {
  width: 244px !important; height: 138px !important; padding: 4px 0 0 !important; gap: 24px !important;
  align-items: center !important; border-radius: 42px !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(155deg, color-mix(in srgb, var(--ink) 82%, #776451), color-mix(in srgb, var(--ink) 94%, #211E1B)) !important;
  box-shadow: 0 28px 48px -32px rgba(20,15,12,.62), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -8px 18px rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,245,224,.22) !important;
}
.gz-hair { display: none !important; }
.gz-body::before, .gz-body::after {
  content: ""; position: absolute; z-index: 0; left: 50%; transform: translateX(-50%);
}
.gz-body::before { top: 14px; width: 42px; height: 3px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 80%, #F3B66B); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 36%, transparent); }
.gz-body::after { top: 24px; width: 5px; height: 5px; border-radius: 50%; background: #E9B779; box-shadow: 0 0 0 3px rgba(233,183,121,.12); }
.gz-eye, .term--detail .stage.kind-compound .gz-eye {
  width: 62px !important; height: 62px !important; border-radius: 50% !important; overflow: hidden !important;
  border: 2px solid rgba(236,204,157,.72) !important; background: radial-gradient(circle at 48% 40%, #75614C, #292522 72%) !important;
  box-shadow: 0 0 0 5px rgba(255,240,215,.08), inset 0 2px 6px rgba(255,255,255,.18), 0 5px 12px rgba(0,0,0,.26) !important;
}
.gz-eye::before { display: none !important; }
.gz-pupil, .term--detail .stage.kind-compound .gz-pupil {
  width: 25px !important; height: 25px !important; border: 1px solid rgba(255,245,224,.56) !important;
  background: radial-gradient(circle at 34% 28%, #FFF9E8 0 10%, #F0AD5E 13% 40%, #C96C39 43% 64%, #201A17 68%) !important;
  box-shadow: 0 0 0 2px rgba(240,173,94,.12), 0 0 12px rgba(240,173,94,.18) !important;
}
.gz-mouth { display: none !important; }
@media (max-width: 640px) {
  .gz-body, .term--detail .stage.kind-compound .gz-body { width: min(244px, 72vw) !important; height: min(138px, 41vw) !important; padding-top: 4px !important; gap: min(24px, 6vw) !important; }
  .gz-eye, .term--detail .stage.kind-compound .gz-eye { width: min(62px, 18vw) !important; height: min(62px, 18vw) !important; }
  .gz-pupil, .term--detail .stage.kind-compound .gz-pupil { width: min(25px, 7vw) !important; height: min(25px, 7vw) !important; }
}

/* 5+6. 圆柱：亮色鼓壁撑满画幅，卡片加高上下出画，和环拉开差异 */
.term--detail .cy-space { height: 430px; background: radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--accent) 12%, var(--bg-2)), var(--bg-2) 80%); }
.term--detail .cy-reel { width: 224px; height: 336px; }
.term--detail .cy-c { transform: rotateY(calc(var(--i) * 36deg)) translateZ(322px); border-radius: 14px; }
.term--detail .cy-c img { height: 112%; top: -6%; }

/* 环形画廊：深空悬浮 + 更大的对焦卡，和圆柱一个亮一个暗、一个满幅一个悬浮 */
.term--detail .r3-space { height: 470px; margin: 0 16px 16px; }
.term--detail .r3-ring { width: 260px; height: 364px; }
.term--detail .r3-c { transform: rotateY(calc(var(--i) * 45deg)) translateZ(340px); border-radius: 16px; }

/* 滚动抽帧：满幅画面 + 底部胶片条 + 角标计数，标准拖进度条式 */
.fr-pin { display: block; }
.fr-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0;
  box-shadow: none; will-change: object-position;
}
.fr-bars {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: min(58%, 430px); height: 44px; display: flex; align-items: flex-end; gap: 3px;
  padding: 6px 8px; border-radius: 10px; background: rgba(10, 8, 5, .42); backdrop-filter: blur(6px);
}
.fr-bars > s { flex: 1; border-radius: 1.5px; background: linear-gradient(180deg, #FFF6E6, color-mix(in srgb, var(--accent) 75%, #fff)); transform-origin: bottom; }
.fr-val {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: #fff;
  background: rgba(10, 8, 5, .45); backdrop-filter: blur(4px); padding: 3px 9px; border-radius: 999px;
}
/* 监看器时间轴覆盖上游的通用胶片条规则，避免 playhead 与缩略条错位 */
.fr-console .fr-bars {
  position: relative; left: auto; bottom: auto; transform: none; width: 100%; height: 22px;
  padding: 0; border-radius: 0; background: repeating-linear-gradient(90deg, rgba(190, 228, 221, .1) 0 1px, transparent 1px 10px);
  backdrop-filter: none;
}
.fr-console .fr-bars > s {
  min-width: 2px; border-radius: 1px; background: linear-gradient(180deg, #D9F2EB, #679F9A); opacity: .9;
}

/* 抽帧舞台最终视觉：与页面的纸张 / 淡紫色编辑感保持一致，避免变成黑色监控面板 */
.cp-fr { background: #F3EFF8; }
.fr-pin {
  position: sticky; top: 0; z-index: 2;
  color: #454052;
  background: radial-gradient(90% 120% at 50% 0%, rgba(255,255,255,.9), transparent 68%), linear-gradient(145deg, #FBF9FD, #ECE8F4);
}
.fr-pin::before {
  opacity: .5;
  background-image: linear-gradient(rgba(112, 92, 151, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(112, 92, 151, .045) 1px, transparent 1px);
  background-size: 34px 34px;
}
.fr-pin::after {
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 70%, rgba(102,82,141,.07));
}
.fr-monitor {
  left: 7%; right: 7%; top: 7%; bottom: 28%;
  border: 1px solid rgba(105, 80, 141, .2); border-radius: 14px;
  background: #D9E9E8; box-shadow: 0 18px 40px rgba(100, 77, 133, .16), 0 0 0 5px rgba(255,255,255,.46);
}
.fr-monitor::after {
  background: linear-gradient(90deg, rgba(44, 34, 70, .12), transparent 28%, transparent 73%, rgba(44, 34, 70, .08));
  mix-blend-mode: multiply;
}
.fr-photo { filter: saturate(.95) contrast(1.04) brightness(.98); transform-origin: 50% 50%; will-change: transform; }
.fr-grid {
  opacity: .24;
  background: linear-gradient(90deg, transparent 33.18%, rgba(255,255,255,.7) 33.25%, rgba(255,255,255,.7) 33.38%, transparent 33.45%, transparent 66.55%, rgba(255,255,255,.7) 66.62%, rgba(255,255,255,.7) 66.75%, transparent 66.82%), linear-gradient(180deg, transparent 33.18%, rgba(255,255,255,.55) 33.25%, rgba(255,255,255,.55) 33.38%, transparent 33.45%, transparent 66.55%, rgba(255,255,255,.55) 66.62%, rgba(255,255,255,.55) 66.75%, transparent 66.82%);
}
.fr-stamp, .fr-shot {
  position: absolute; z-index: 4; top: 12px; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; font-style: normal;
  color: rgba(255,255,255,.9); text-shadow: 0 1px 4px rgba(28, 18, 45, .35);
}
.fr-stamp { left: 14px; }
.fr-shot { right: 14px; color: rgba(255,255,255,.72); }
.fr-console {
  left: 7%; right: 7%; bottom: 8%; height: 54px; padding: 8px 10px 6px;
  border: 1px solid rgba(105, 80, 141, .15); border-radius: 10px;
  background: rgba(255,255,255,.7); box-shadow: 0 10px 24px rgba(100, 77, 133, .12); backdrop-filter: blur(10px);
}
.fr-track-head { color: rgba(81, 67, 105, .55); }
.fr-console .fr-bars {
  background: repeating-linear-gradient(90deg, rgba(107, 86, 144, .1) 0 1px, transparent 1px 10px);
}
.fr-console .fr-bars > s { background: linear-gradient(180deg, #B5A3D8, #7251B5); opacity: .82; }
.fr-playhead { background: #E8759D; box-shadow: 0 0 9px rgba(232,117,157,.55); }
.fr-playhead::before { background: #E8759D; }
.fr-val {
  top: 12px; right: 14px; color: #62527E; background: rgba(255,255,255,.7); border: 1px solid rgba(105,80,141,.12); box-shadow: 0 5px 12px rgba(100,77,133,.08);
}
.fr-scroll-range {
  min-height: 720px; display: grid; place-items: end center; padding: 0 16px 24px;
  color: rgba(87,70,116,.42); font: 9px var(--mono); letter-spacing: .12em;
}
/* “钉住双栏”必须真的保持左栏在视口内；后面的照片精修规则曾把 sticky 覆盖成 relative。 */
.term--detail .cp-2c .tc-left { position: sticky; top: 4px; z-index: 2; align-self: start; }
/* 通用：详情页大舞台里的主体全面放大（内容小、区域大不协调） */
.term--detail .tl-card { width: 252px; height: 330px; border-radius: 18px; }
.term--detail .cv-stage { width: 244px; height: 324px; }
.term--detail .cv-c { border-radius: 18px; }
.term--detail .th-deck { width: 292px; height: 202px; }
.term--detail .fn-deck { width: 152px; height: 206px; }
.term--detail .dr-scene { width: 330px; height: 254px; }
.term--detail .mg-btn { width: 172px; height: 70px; font-size: 22px; }
.term--detail .mg-ring { width: 260px; height: 260px; }
.term--detail .rl-c { width: 172px; height: 122px; }
.term--detail .rl-row.b .rl-c { width: 144px; height: 102px; }
.term--detail .ob-fig { width: 176px; height: 176px; }
.term--detail .obf { border-radius: 22px; transform: rotateY(var(--r)) translateZ(102px); font-size: 22px; }
.term--detail .ob-sh { width: 210px; height: 22px; bottom: 17%; filter: blur(7px); }
.term--detail .ob-val { right: 22px; bottom: 18px; font-size: 13px; }
.term--detail .hx-i { left: -38px; top: -54px; width: 76px; height: 108px; border-radius: 16px; }
.term--detail .lf-obj { width: 82px; height: 82px; margin: -41px 0 0 -41px; border-radius: 17px; }
.term--detail .ced-hd { font-size: 34px; }
.term--detail .od-d { width: 48px; height: 68px; border-radius: 12px; }
.term--detail .od-d b { font-size: 36px; line-height: 68px; }
.term--detail .od-d b i { height: 68px; }

/* 窄屏详情页：标题换行是必要的，但不能让标题吞掉照片舞台。 */
@media (max-width: 480px) {
  .page-inner { max-width: none; padding-inline: 16px; }
  .term--detail .stage.kind-compound[data-mode="cylinder"] .cp-ed,
  .term--detail .stage.kind-compound[data-mode="ring3d"] .cp-ed {
    padding: 20px 20px 10px;
    gap: 6px;
  }
  .term--detail .stage.kind-compound[data-mode="cylinder"] .ced-hd,
  .term--detail .stage.kind-compound[data-mode="ring3d"] .ced-hd {
    font-size: clamp(25px, 8vw, 32px);
    line-height: 1.08;
  }
  .term--detail .stage.kind-compound[data-mode="cylinder"] .cp-sub,
  .term--detail .stage.kind-compound[data-mode="ring3d"] .cp-sub {
    padding-inline: 20px;
    font-size: 9px;
  }
  .tokens { gap: 17px; padding: 20px 16px; }
  .tk { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
  .tk-label b { font-size: 12px; }
  .tk-label span { font-size: 11px; }
  .tk-note { margin-left: 0; font-size: 11px; }
  .term--detail .ns-ab { flex-direction: column; gap: 0; }
  .term--detail .ns-ab .ab-cell { flex: 1 1 50%; width: 100%; height: 50%; }
  .term--detail .ns-ab .ab-cell + .ab-cell { border-left: 0; border-top: 1px dashed var(--line); }
  .term--detail .ns-parent { width: min(190px, 70%); height: 112px; }
  .term--detail .ns-parent s { width: min(164px, 88%); height: 30px; margin: -15px 0 0 max(-82px, -44%); font-size: 10px; }
  .term--detail .ns-parent.flat3d s:nth-child(1) { --dy: -37px; }
  .term--detail .ns-parent.flat3d s:nth-child(3) { --dy: 37px; }
  .term--detail .ab-cell > u { font-size: 10px; }
}

/* final restore for gaze after all legacy detail rules */

/* Keyboard users can skip the persistent header and search controls. */
.skip-link {
  position: fixed;
  left: 1rem;
  top: .75rem;
  z-index: 1000;
  transform: translateY(-180%);
  padding: .55rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: 600 .78rem/1 var(--sans);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Detail-stage fit pass: keep intentionally large demos complete on tablet/mobile. */
@media (max-width: 900px) {
  .term--detail.t-exaggeration .stage,
  .term--detail.t-purposeful .stage { height: 272px; }
  .term--detail .stage:has(.sk) { height: 292px; }
  .term--detail .stage:has(.tokens) { height: 320px; }
  .term--detail .stage:has(.opt) { height: 340px; }
  .term--detail .stage:has(.dr-scene) { height: 292px; }
  .term--detail .stage:has(.tl-card),
  .term--detail .stage:has(.cv-stage) { height: 360px; }
  .term--detail .stage:has(.mg-ring) { height: 292px; }
  .term--detail .stage:has(.cp-cy),
  .term--detail .stage:has(.cp-r3) { height: 520px; }
  .term--detail .stage:has(.cp-cy) { height: 540px; }
  .term--detail .stage:has(.sj) { height: 300px; }
  .term--detail .stage:has(.sp2) { height: 280px; }
  .term--detail .stage:has(.rigsvg) { height: 292px; }
  .term--detail .stage:has(.cp-pf),
  .term--detail .stage:has(.cp-mg) { height: 280px; }
  .term--detail .stagein { min-width: 0; min-height: 0; }
  .term--detail .stagein:has(.zoom-demo) { box-sizing: border-box; padding: 12px; }
  .term--detail .zoom-demo { width: min(460px, 100%); height: min(270px, 42vw); }
  .term--detail .stagein:has(.sj) { align-items: stretch; }
  .term--detail .sj { min-height: 0; height: 100%; flex: 1 1 auto; }
  .term--detail .sp2 { --fw: clamp(30px, calc((100vw - 350px) / 8), 74px); --fh: clamp(42px, 11vw, 72px); }
  .term--detail .rigsvg { max-width: calc(100% - 20px); max-height: calc(100% - 32px); }
  .term--detail .cp-cy .cy-space { height: 330px; }
  .term--detail .cp-r3 .r3-space { height: 330px; margin-bottom: 10px; }
  .term--detail .cp-cy .cp-ed,
  .term--detail .cp-r3 .cp-ed { padding: 18px 20px 10px; gap: 6px; }
  .term--detail .cp-cy .ced-hd,
  .term--detail .cp-r3 .ced-hd { font-size: clamp(25px, 6vw, 32px); line-height: 1.08; }
  .term--detail.t-orchestration .stagein { gap: 6px; }
  .term--detail.t-orchestration .stagein > .obj { width: clamp(38px, 10vw, 54px); height: 42px; }
}
@media (max-width: 480px) {
  .term--detail .stage.kind-compound:has(.cp-cy),
  .term--detail .stage.kind-compound:has(.cp-r3) { height: clamp(500px, 145vw, 590px); }
  .term--detail .stage.kind-compound .cy-space,
  .term--detail .stage.kind-compound .r3-space { height: 320px; }
}

/* 手机窄屏时压缩隧道标题与卡片尺寸，完整留出可见的穿行窗口。 */
@media (max-width: 640px) {
  .term--detail .cp-tn .cp-ed { padding: 14px 18px 8px; gap: 5px; }
  .term--detail .cp-tn .ced-hd { font-size: 25px; line-height: 1.12; }
  .term--detail .tn-space { height: 148px; margin: 4px 14px 44px; }
  .term--detail .tn-c { width: 112px; height: 148px; margin: -74px 0 0 -56px; }
  .term--detail .tn-pin > .cp-sub { display: none; }
}

/* Reference-inspired demos: shared photo transitions, an image loupe, and elastic scroll edges. */
.term--detail .stage:has(.sh-demo) { height: 430px; }
.term--detail .stage:has(.iz-stage) { height: 390px; }
.term--detail .stage:has(.rb-frame) { height: 350px; }
.stagein:has(.sh-demo), .stagein:has(.iz-stage), .stagein:has(.rb-frame) { min-width: 0; min-height: 0; }
.sh-demo { position: relative; isolation: isolate; width: min(680px, 100%); height: 100%; min-height: 128px; padding: 12px; border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); border-radius: 20px; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 88%, white), var(--panel-2)); box-shadow: 0 24px 70px -48px color-mix(in srgb, var(--ink) 42%, transparent), inset 0 1px rgba(255,255,255,.7); }
.sh-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; height: 100%; align-content: stretch; }
.sh-gallery[hidden] { display: none !important; }
.sh-overline { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; color: var(--ink-2); font: 600 10px/1 var(--body); letter-spacing: .04em; }
.sh-overline small, .sh-detail-copy > small { color: var(--muted); font: 8px/1 var(--mono); letter-spacing: .16em; }
.sh-card { min-width: 0; align-self: stretch; display: flex; flex-direction: column; gap: 7px; padding: 6px; border: 1px solid color-mix(in srgb, var(--line) 62%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--ink); text-align: left; cursor: pointer; transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s, border-color .28s; }
.sh-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); box-shadow: 0 12px 28px -22px var(--ink); }
.sh-photo { position: relative; display: block; flex: 1 1 auto; min-height: 48px; overflow: hidden; border-radius: 9px; background: var(--panel-2); }
.sh-photo img, .sh-hero { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.sh-card-copy { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; padding: 1px 3px 2px; }
.sh-card-copy b { font: 600 11px/1.1 var(--disp); }
.sh-card-copy small { grid-column: 1; color: var(--muted); font: 8px/1.2 var(--body); }
.sh-card-copy i { grid-column: 2; grid-row: 1 / span 2; color: var(--accent); font: normal 13px var(--mono); }
.sh-detail { position: absolute; inset: 12px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(155px, .8fr); gap: 16px; align-items: stretch; }
.sh-detail[hidden] { display: none !important; }
.sh-detail-photo { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 14px; background: var(--panel-2); box-shadow: 0 16px 38px -28px var(--ink); }
.sh-detail-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(8px, 2vw, 22px); }
.sh-detail-copy h3 { margin: 12px 0 7px; color: var(--ink); font: 600 clamp(20px, 3vw, 30px)/1.08 var(--disp); }
.sh-detail-copy p { max-width: 25em; margin: 0 0 18px; color: var(--muted); font: 12px/1.75 var(--body); }
.sh-detail-copy .mini { border-color: var(--line); color: var(--ink-2); }
.sh-photo-index { position: absolute; left: 12px; bottom: 11px; z-index: 1; color: white; font: 9px var(--mono); letter-spacing: .14em; text-shadow: 0 1px 8px #0008; }
.sh-transition-ghost { position: absolute; z-index: 5; display: block; background-position: center; background-size: cover; box-shadow: 0 20px 55px -20px #19150f70; pointer-events: none; }
.sh-transition-ghost[hidden] { display: none; }
.sh-demo.is-transitioning .sh-card, .sh-demo.is-transitioning .sh-back { pointer-events: none; }
.sh-hint { position: absolute; right: 15px; bottom: 8px; z-index: 1; color: var(--muted); font: 8px/1.2 var(--mono); letter-spacing: .04em; }

/* SwiftUI_Demos inspiration: paper-like page curl, scratch reveal and a point-cloud morph.
   These are reimplemented as browser interactions rather than copied SwiftUI code. */
.cp-pagecurl, .cp-scratch, .cp-dotsphere { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 220px; overflow: hidden; border-radius: 18px; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--accent-3) 10%, var(--panel)), var(--panel-2) 76%); }
.pc-book { position: relative; width: min(360px, 88%); height: min(220px, 66%); min-height: 158px; perspective: 1250px; transform-style: preserve-3d; }
.pc-under, .pc-left, .pc-paper, .pc-back { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 9px; overflow: hidden; padding: clamp(14px, 2.4vw, 23px); box-sizing: border-box; border: 1px solid #d5c9b6; color: #332a20; }
.pc-left { z-index: 0; left: 0; width: 50%; border-radius: 14px 3px 3px 14px; background: linear-gradient(105deg, #eee7d9, #e5dece); box-shadow: inset -12px 0 17px -18px #36251788; }
.pc-under { z-index: 0; right: 0; width: 50%; border-radius: 3px 14px 14px 3px; background: linear-gradient(105deg, #d8e1d8, #f1e8d8 65%); box-shadow: inset 12px 0 17px -18px #36251788; }
.pc-under span, .pc-left span, .pc-paper > span, .pc-back > span { color: #938775; font: 7px var(--mono); letter-spacing: .12em; }
.pc-under b, .pc-left b, .pc-paper > b, .pc-back > b { font: 500 clamp(21px, 3vw, 30px)/1.12 var(--disp); letter-spacing: .01em; }
.pc-under small, .pc-left small, .pc-paper > small, .pc-back > small { max-width: 24em; color: #786d5d; font: 9px/1.6 var(--body); }
.pc-under i, .pc-left i, .pc-paper > i { color: #b56a46; font: normal 7px var(--mono); letter-spacing: .08em; }
.pc-page { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 50%; width: 50%; transform-origin: left center; transform-style: preserve-3d; backface-visibility: visible; }
.pc-page.is-turning { z-index: 3; }
.pc-paper, .pc-back { inset: 0; border-radius: 3px 14px 14px 3px; backface-visibility: hidden; box-shadow: inset 8px 0 14px -15px #362517aa, 0 10px 18px -18px #362517aa; }
.pc-paper { background: linear-gradient(90deg, #e5dccd, #fbf7ee 9%, #f8f2e7 100%); }
.pc-back { transform: rotateY(180deg); background: linear-gradient(270deg, #e4dacb, #f6eedf 10%, #ece2d1 100%); }
.pc-spine { position: absolute; z-index: 1; top: 2px; bottom: 2px; left: calc(50% - 3px); width: 6px; border-radius: 50%; background: linear-gradient(90deg, #77634c12, #705c4538 48%, #fff8 52%, #77634c10); pointer-events: none; }
.pc-corner { position: absolute; z-index: 2; right: 0; bottom: 0; width: 54px; height: 54px; border: 0; border-radius: 0 0 12px 0; background: linear-gradient(135deg, transparent 49%, #d1c4af 50%); cursor: grab; touch-action: none; }
.pc-corner::after { content: "↶"; position: absolute; right: 8px; bottom: 6px; color: #755c44; font: 17px var(--body); }
.pc-toggle { position: absolute; z-index: 4; top: 10px; right: 10px; bottom: auto; padding: 7px 11px; border: 1px solid #fff9; border-radius: 999px; background: #fbf7eddb; color: #5a4936; font: 9px var(--body); box-shadow: 0 4px 14px #46331b1c; cursor: pointer; backdrop-filter: blur(8px); transition: transform .22s, background .22s; }
.pc-toggle:hover { transform: translateY(-2px); background: #fffdf7; }
.pc-toggle span { margin-left: 7px; color: #b56a46; }
.pc-corner:focus-visible, .pc-toggle:focus-visible, .ds-toggle:focus-visible, .sr-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cp-scratch { min-height: 235px; }
.cp-island { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; box-sizing: border-box; background: radial-gradient(ellipse at 50% 44%, #e6dccd 0, #d9cbbc 56%, #c9baaa 100%); }
.cp-island > .cp-cap { display: none; }
.di-phone { container-type: size; position: relative; width: auto; height: min(192px, calc(100% - 18px)); max-width: calc(100% - 18px); aspect-ratio: 9 / 19.5; box-sizing: border-box; border: 5px solid #252421; border-radius: 30px; background: linear-gradient(155deg, #f7f2e9, #d8d6ca 68%, #b8c2bb); box-shadow: 0 22px 48px -24px #21180f99, inset 0 0 0 1px #fff9; }
.di-phone::before { content: ""; position: absolute; inset: 0; border-radius: 9cqh; background: radial-gradient(ellipse at 25% 62%, #efe3cb 0 12%, transparent 42%), radial-gradient(ellipse at 86% 38%, #bdcbc5 0 8%, transparent 38%); opacity: .9; }
.di-status { position: absolute; z-index: 1; top: 4cqh; left: 8cqw; right: 8cqw; display: flex; justify-content: space-between; color: #27251f; font: 700 clamp(5px, 3.5cqw, 8px) var(--mono); }
.di-island { position: absolute; z-index: 2; top: 6.5cqh; left: 50%; display: block; width: 68cqw; height: 9cqh; padding: 0; overflow: hidden; transform: translateX(-50%); border: 0; border-radius: 999px; background: #090a0b; color: white; box-shadow: 0 5px 14px #16161645; transition: width .42s cubic-bezier(.22,.8,.25,1), height .42s cubic-bezier(.22,.8,.25,1), border-radius .32s cubic-bezier(.22,.8,.25,1), box-shadow .3s; }
.di-island:hover { box-shadow: 0 8px 19px #16161655; }
.di-island.is-expanded { width: 88cqw; height: 25cqh; border-radius: clamp(16px,5.2cqh,34px); }
.di-compact { position: absolute; inset: 0; display: flex; width: 100%; height: 100%; align-items: center; gap: 3cqw; padding: 0 5cqw; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; opacity: 1; transition: opacity .12s; }
.di-compact > b { flex: 1; text-align: left; color: #f4f0e9; font: 600 clamp(5px, 3.6cqw, 8px) var(--body); white-space: nowrap; }
.di-cover, .di-art { display: grid; place-items: center; flex: 0 0 auto; width: 12cqw; height: 12cqw; border-radius: 3.4cqw; background: linear-gradient(135deg, #f4b48b, #d85c4f 52%, #523d61); color: white; font-style: normal; }
.di-cover { font-size: clamp(7px, 7cqw, 16px); }
.di-wave { display: flex; align-items: center; gap: 1cqw; height: 8cqw; }
.di-wave i { width: max(1px, .9cqw); height: 2.6cqw; border-radius: 3px; background: #a9d3b4; animation: di-wave .8s ease-in-out infinite alternate; }
.di-wave i:nth-child(2) { height: 11px; animation-delay: -.3s; }
.di-wave i:nth-child(3) { height: 7px; animation-delay: -.55s; }
.di-wave i:nth-child(4) { height: 13px; animation-delay: -.15s; }
@keyframes di-wave { to { transform: scaleY(.38); opacity: .65; } }
.di-island.is-expanded .di-compact { opacity: 0; pointer-events: none; }
.di-expanded { position: absolute; inset: 7cqh 7cqw 6cqh; display: grid; grid-template-columns: 1fr; grid-template-rows: auto max(2px,.8cqh) auto; gap: 2.5cqh; text-align: left; opacity: 0; visibility: hidden; transform: translateY(4px) scale(.985); transition: opacity .12s, transform .16s ease, visibility 0s .16s; }
.di-island.is-expanded:not(.is-collapsing) .di-expanded { opacity: 1; visibility: visible; transform: none; transition: opacity .2s .12s, transform .26s cubic-bezier(.2,.8,.2,1) .08s; }
.di-island.is-collapsing .di-expanded { opacity: 0; transform: translateY(-3px) scale(.98); visibility: hidden; }
.di-island.is-collapsing .di-compact { opacity: 1; transition-delay: .12s; }
.di-expanded-head { display: grid; grid-template-columns: 15cqw minmax(0,1fr) 8cqw; gap: 4cqw; align-items: center; min-width: 0; }
.di-art { width: 15cqw; height: 15cqw; border-radius: 4cqw; font-size: clamp(8px, 8cqw, 18px); }
.di-track { display: grid; gap: 3px; min-width: 0; }
.di-track b { overflow: hidden; color: white; font: 600 clamp(6px, 4.2cqw, 10px)/1.1 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.di-track small { color: #a9a9a9; font: clamp(5px, 3cqw, 7px) var(--body); }
.di-progress { display: block; height: max(2px, .8cqh); overflow: hidden; border-radius: 2px; background: #555; }
.di-progress s { display: block; width: 0; height: 100%; background: #e6e4df; }
.di-collapse, .di-controls button { display: grid; place-items: center; border: 0; color: #f1eee7; background: transparent; cursor: pointer; }
.di-collapse { width: 8cqw; height: 8cqw; border-radius: 50%; color: #bbb; font: 13px var(--body); }
.di-controls { display: flex; justify-content: center; align-items: center; gap: 10cqw; color: #f1eee7; }
.di-controls button { width: 8cqw; height: 8cqw; padding: 0; font: 600 clamp(6px,4cqw,9px) var(--mono); }
.di-controls .di-play { width: 11cqw; height: 11cqw; border-radius: 50%; background: #f3f1eb; color: #171717; font-size: clamp(6px,4cqw,9px); }
.di-island.is-paused .di-wave i { animation-play-state: paused; }
.di-island button:focus-visible { outline: 1px solid #f4c689; outline-offset: 1px; }
.di-home { position: absolute; right: 0; bottom: .5cqh; left: 0; display: grid; place-items: center; height: 2.5cqh; }
.di-home i { width: 28cqw; height: max(2px, .7cqh); border-radius: 9px; background: #242321; }
.sr-card { position: relative; width: min(330px, 78%); height: min(205px, 70%); min-height: 150px; overflow: hidden; border: 1px solid #fff9; border-radius: 16px; background: #32403b; box-shadow: 0 20px 45px -26px #23180e88; }
.sr-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-card::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, #15221dbc); pointer-events: none; }
.sr-copy { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px; color: white; text-shadow: 0 2px 15px #0008; }
.sr-copy small { font: 9px var(--mono); letter-spacing: .16em; }
.sr-copy b { font: 500 clamp(22px, 3.5vw, 32px)/1.18 var(--disp); }
.sr-copy span { margin-top: 4px; color: #fff9; font: 8px var(--mono); letter-spacing: .14em; }
.sr-foil { position: absolute; z-index: 2; inset: 0; display: block; cursor: crosshair; touch-action: none; }
.sr-reset { position: absolute; z-index: 3; right: 10px; bottom: 10px; padding: 6px 10px; border: 1px solid #ffffff80; border-radius: 999px; background: #1b211c99; color: white; font: 9px var(--body); opacity: 0; pointer-events: none; transition: opacity .2s; cursor: pointer; }
.sr-card.is-revealed .sr-reset { opacity: 1; pointer-events: auto; }
.cp-dotsphere { min-height: 245px; background: radial-gradient(ellipse at 50% 56%, #fffaf0 0, color-mix(in srgb, var(--accent-3) 8%, var(--panel-2)) 68%, var(--panel-2)); }
.ds-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.ds-canvas:active { cursor: grabbing; }
.ds-title { position: absolute; z-index: 1; top: 18px; left: 20px; display: grid; gap: 4px; pointer-events: none; }
.ds-title small { color: var(--muted); font: 8px var(--mono); letter-spacing: .16em; }
.ds-title b { color: var(--ink); font: 500 18px var(--disp); }
.ds-title em { color: var(--accent); font-style: italic; }
.ds-toggle { position: absolute; z-index: 2; right: 14px; bottom: 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 85%, transparent); color: var(--ink-2); font: 9px var(--body); cursor: pointer; backdrop-filter: blur(10px); }
.ds-toggle span { margin-left: 8px; color: var(--accent); }
.cp-pagecurl .cp-cap, .cp-scratch .cp-cap, .cp-dotsphere .cp-cap { position: absolute; left: 14px; bottom: 13px; color: var(--muted); font: 8px var(--mono); letter-spacing: .04em; pointer-events: none; }
.term--detail .stage:has(.cp-pagecurl), .term--detail .stage:has(.cp-scratch), .term--detail .stage:has(.cp-dotsphere) { height: 420px; }
.term--detail .stage:has(.cp-pagecurl) .stagein, .term--detail .stage:has(.cp-scratch) .stagein, .term--detail .stage:has(.cp-dotsphere) .stagein { padding: 14px; box-sizing: border-box; }
.term--detail .stage:has(.cp-island) .stagein { padding: 12px; box-sizing: border-box; }
.term--detail .stage:has(.cp-island) { height: 560px; }
.term--detail .stage:has(.cp-island) .di-phone { height: min(500px, calc(100% - 28px)); max-height: 100%; }
.term:not(.term--detail).cat-compound .cp-island .di-phone { height: min(192px, calc(100% - 18px)); }

/* Wise Motion references: overlapping patterns are cited from existing entries;
   the two genuinely absent studies below are reimplemented as small, live demos. */
.cp-pathweave, .cp-scanlock { position: relative; width: 100%; height: 100%; min-height: 260px; overflow: hidden; border-radius: 18px; box-sizing: border-box; }
.cp-pathweave { display: grid; grid-template-rows: auto minmax(100px,1fr) auto; padding: clamp(18px,4%,34px) clamp(20px,5%,52px); color: #30271f; background: radial-gradient(ellipse at 52% 56%, #fffdf7, #efe8db 74%); }
.pw-heading { display: grid; gap: 6px; }
.pw-heading small { color: #a58f75; font: 9px var(--mono); letter-spacing: .18em; }
.pw-heading b { font: 500 clamp(17px,2.3vw,25px)/1.2 var(--disp); }
.pw-heading span { color: #9b907f; font: 8px var(--mono); letter-spacing: .14em; }
.pw-svg { align-self: center; width: min(100%,760px); height: min(100%,290px); overflow: visible; justify-self: center; }
.pw-guide, .pw-shadow, .pw-under, .pw-cut, .pw-over, .pw-glint { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pw-guide { stroke: #d8cec0; stroke-width: 1; stroke-dasharray: 2 8; }
.pw-shadow { stroke: #54453612; stroke-width: 24; filter: blur(3px); }
.pw-shadow.pw-a { transform: translateY(4px); }
.pw-shadow.pw-b { transform: translateY(2px); }
.pw-under { stroke: #e66c45; stroke-width: 16; filter: drop-shadow(0 4px 5px #9f503122); }
.pw-cut { stroke: #f7f1e6; stroke-width: 24; }
.pw-over { stroke: #54888b; stroke-width: 16; filter: drop-shadow(0 6px 7px #315b6030); }
.pw-glint { stroke: #fff9; stroke-width: 1.5; stroke-dasharray: 1 22; opacity: .8; }
.pw-glint.pw-a { stroke: #fff0dc; }
.pw-glint.pw-b { stroke: #e3fff7; }
.pw-svg { filter: drop-shadow(0 12px 16px #493a2510); }
.pw-node { fill: #fffaf0; stroke-width: 3; }
.pw-node-a { stroke: #e7774e; }
.pw-node-b { stroke: #54888b; }
.cp-pathweave.is-replaying .pw-under, .cp-pathweave.is-replaying .pw-over { animation: pw-draw 2.3s cubic-bezier(.22,.7,.2,1) both; }
.cp-pathweave.is-replaying .pw-over { animation-delay: .34s; }
.cp-pathweave.is-replaying .pw-shadow { animation: pw-shadow-in 2.3s cubic-bezier(.22,.7,.2,1) both; }
.cp-pathweave.is-replaying .pw-shadow.pw-b { animation-delay: .34s; }
@keyframes pw-shadow-in { from { stroke-dasharray: 1 1200; stroke-dashoffset: 0; opacity: 0; } 8% { opacity: .8; } to { stroke-dasharray: 1200 0; stroke-dashoffset: 0; opacity: .8; } }
@keyframes pw-draw { from { stroke-dasharray: 1200; stroke-dashoffset: 1200; opacity: .18; } to { stroke-dasharray: 1200; stroke-dashoffset: 0; opacity: 1; } }
.pw-foot { display: flex; align-items: center; gap: 18px; color: #766b5c; font: 8px var(--mono); letter-spacing: .08em; }
.pw-foot > span { display: flex; align-items: center; gap: 6px; }
.pw-foot > span i { width: 7px; height: 7px; border-radius: 50%; background: #e7774e; }
.pw-foot > span:nth-child(2) i { background: #54888b; }
.pw-replay, .sl-replay { margin-left: auto; padding: 7px 11px; border: 1px solid #dcd2c3; border-radius: 999px; background: #fffdf8b8; color: #625747; font: 9px var(--body); cursor: pointer; transition: background .2s, transform .2s; }
.pw-replay:hover, .sl-replay:hover { background: #fff; transform: translateY(-1px); }
.pw-replay b { padding-left: 5px; color: #d96a45; }
.cp-pathweave .cp-cap, .cp-scanlock .cp-cap { position: absolute; left: 18px; bottom: 12px; color: #9b907f; font: 8px var(--mono); pointer-events: none; }
.cp-scanlock { display: grid; grid-template-rows: auto minmax(150px,1fr) auto auto; padding: clamp(18px,4%,34px) clamp(20px,5%,52px); color: #dfe9e4; background: radial-gradient(ellipse at 50% 48%, #203b3a, #101d21 76%); }
.sl-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.sl-top > span:first-child { display: grid; gap: 5px; }
.sl-top small { color: #8ba9a0; font: 8px var(--mono); letter-spacing: .16em; }
.sl-top > span:first-child b { font: 500 clamp(16px,2vw,22px) var(--disp); }
.sl-status { position: relative; display: flex; align-items: center; gap: 7px; min-width: 94px; color: #b8c6a5; font: 8px var(--mono); letter-spacing: .1em; }
.sl-status i { width: 6px; height: 6px; border-radius: 50%; background: #efa363; box-shadow: 0 0 12px #efa363aa; animation: sl-pulse 1s ease-in-out infinite alternate; }
.cp-scanlock.is-replaying .sl-status i { background: #71d2ad; box-shadow: 0 0 14px #71d2adaa; }
.sl-status b { position: absolute; right: 0; display: block; white-space: nowrap; opacity: 0; }
.sl-state-scan { animation: sl-status-scan 4.8s infinite; }
.sl-state-found { animation: sl-status-found 4.8s infinite; }
.sl-state-locked { animation: sl-status-locked 4.8s infinite; }
.sl-field { position: relative; align-self: stretch; min-height: 150px; margin: 14px 0; overflow: hidden; border: 1px solid #c5d7cd22; border-radius: 16px; background: linear-gradient(135deg,#f4f6e905,#99b1a50a); }
.sl-grid { position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(#c6ded011 1px,transparent 1px),linear-gradient(90deg,#c6ded011 1px,transparent 1px); background-size: 34px 34px; }
.sl-scan { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 2px; background: #f3c990; box-shadow: 0 0 22px 4px #e9b77888; animation: sl-sweep 4.8s cubic-bezier(.4,0,.2,1) infinite; }
.sl-scan::after { content: ""; position: absolute; top: 0; right: 0; width: min(170px,22vw); height: 100%; transform: translateX(100%); background: linear-gradient(90deg,#e9b77816,transparent); }
.sl-target { position: absolute; top: 52%; left: 64%; display: grid; align-content: center; justify-items: start; gap: 7px; width: min(190px,48%); min-height: 88px; padding: 16px 18px; box-sizing: border-box; border: 1px solid #e9b77855; border-radius: 11px; background: linear-gradient(135deg,#182727ee,#101d1ff2); box-shadow: 0 10px 28px #050d0d66, inset 0 0 24px #f0c99108; opacity: .3; transform: translate(-50%,-50%) scale(.88); animation: sl-detect 4.8s infinite; }
.sl-target b { color: #f5dfbc; font: 600 9px var(--mono); letter-spacing: .13em; }
.sl-target small { color: #c3c8b7; font: 8px var(--mono); }
.sl-bracket { position: absolute; inset: 0; background: linear-gradient(#e9b778 0 0) left top/12px 1px no-repeat,linear-gradient(#e9b778 0 0) left top/1px 12px no-repeat,linear-gradient(#e9b778 0 0) right top/12px 1px no-repeat,linear-gradient(#e9b778 0 0) right top/1px 12px no-repeat,linear-gradient(#e9b778 0 0) left bottom/12px 1px no-repeat,linear-gradient(#e9b778 0 0) left bottom/1px 12px no-repeat,linear-gradient(#e9b778 0 0) right bottom/12px 1px no-repeat,linear-gradient(#e9b778 0 0) right bottom/1px 12px no-repeat; }
.sl-cross { position: absolute; top: 50%; right: 19%; width: 15px; height: 15px; border: 1px solid #f1c48b; border-radius: 50%; transform: translate(50%,-50%); box-shadow: 0 0 12px #e9b77844; }
.sl-cross::before, .sl-cross::after { content: ""; position: absolute; background: #e9b77899; }
.sl-cross::before { top: 50%; left: -5px; right: -5px; height: 1px; }
.sl-cross::after { left: 50%; top: -5px; bottom: -5px; width: 1px; }
.sl-lock { position: absolute; top: 52%; left: 64%; display: flex; align-items: center; gap: 11px; opacity: 0; transform: translate(-50%,-50%) scale(.84); color: #c9e5d8; animation: sl-lock 4.8s infinite; }
.sl-lock > i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #78c3a0a8; border-radius: 50%; background: #3d81622b; color: #8be0b5; font: normal 14px var(--body); box-shadow: 0 0 20px #6dc89d30; }
.sl-lock span { display: grid; gap: 4px; white-space: nowrap; }
.sl-lock b { font: 500 12px var(--body); }
.sl-lock small { color: #8bb6a1; font: 7px var(--mono); letter-spacing: .12em; }
.sl-axis { position: absolute; color: #85a19888; font: 7px var(--mono); letter-spacing: .13em; }
.sl-axis-x { right: 12px; bottom: 10px; }.sl-axis-y { top: 10px; left: 12px; }
.sl-steps { display: flex; justify-content: center; align-items: center; gap: 12px; padding-bottom: 7px; color: #8da39a; font: 9px var(--body); }
.sl-steps span { display: flex; align-items: center; gap: 6px; transition: color .2s; }
.sl-steps i { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid #b6c9bd44; border-radius: 50%; color: #a0b4a9; font: normal 7px var(--mono); }
.sl-steps > b { width: 24px; height: 1px; background: #b6c9bd44; }
.sl-steps span:nth-of-type(1) { animation: sl-step-scan 4.8s infinite; }
.sl-steps span:nth-of-type(2) { animation: sl-step-found 4.8s infinite; }
.sl-steps span:nth-of-type(3) { animation: sl-step-locked 4.8s infinite; }
.sl-replay { position: static; justify-self: end; margin: 9px 0 0; border-color: #b6c9bd35; background: #0c1719a8; color: #c2d3cb; }
.cp-scanlock.is-replaying .sl-scan, .cp-scanlock.is-replaying .sl-target, .cp-scanlock.is-replaying .sl-lock,
.cp-scanlock.is-replaying .sl-steps span { animation-iteration-count: 1; }
.cp-scanlock.is-replaying .sl-scan { animation-name: sl-sweep-once; }
.cp-scanlock.is-replaying .sl-target { animation-name: sl-detect-once; }
.cp-scanlock.is-replaying .sl-lock { animation-name: sl-lock-once; }
.cp-scanlock.is-replaying .sl-status b { animation-iteration-count: 1; }
.cp-scanlock.is-replaying .sl-state-scan { animation-name: sl-status-scan-once; }
.cp-scanlock.is-replaying .sl-state-found { animation-name: sl-status-found-once; }
.cp-scanlock.is-replaying .sl-state-locked { animation-name: sl-status-locked-once; }
@keyframes sl-sweep { 0%,5% { left: 0; } 90%,100% { left: 100%; } }
@keyframes sl-sweep-once { 0%,5% { left: 0; } 90%,100% { left: 100%; } }
@keyframes sl-detect { 0%,54% { opacity: .18; transform: translate(-50%,-50%) scale(.88); } 62%,72% { opacity: .96; transform: translate(-50%,-50%) scale(1.03); } 80%,100% { opacity: 0; transform: translate(-50%,-50%) scale(1.08); } }
@keyframes sl-detect-once { 0%,54% { opacity: .18; transform: translate(-50%,-50%) scale(.88); } 62%,72% { opacity: .96; transform: translate(-50%,-50%) scale(1.03); } 80%,100% { opacity: 0; transform: translate(-50%,-50%) scale(1.08); } }
@keyframes sl-lock { 0%,70% { opacity: 0; transform: translate(-50%,-50%) scale(.84); } 77%,96% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; } }
@keyframes sl-lock-once { 0%,70% { opacity: 0; transform: translate(-50%,-50%) scale(.84); } 77%,96% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; } }
@keyframes sl-step-scan { 0%,58% { color: #f3c58e; } 59%,100% { color: #8da39a; } }
@keyframes sl-step-found { 0%,58%,75%,100% { color: #8da39a; } 59%,74% { color: #f2c38c; } }
@keyframes sl-step-locked { 0%,74% { color: #8da39a; } 75%,100% { color: #9bd6ba; } }
@keyframes sl-pulse { to { opacity: .4; transform: scale(.75); } }
@keyframes sl-status-scan { 0%,58%,100% { opacity: 1; } 59%,99% { opacity: 0; } }
@keyframes sl-status-found { 0%,58%,75%,100% { opacity: 0; } 59%,74% { opacity: 1; color: #f2c38c; } }
@keyframes sl-status-locked { 0%,74%,97%,100% { opacity: 0; } 75%,96% { opacity: 1; color: #91d4b4; } }
@keyframes sl-status-scan-once { 0%,58% { opacity: 1; } 59%,100% { opacity: 0; } }
@keyframes sl-status-found-once { 0%,58%,75%,100% { opacity: 0; } 59%,74% { opacity: 1; color: #f2c38c; } }
@keyframes sl-status-locked-once { 0%,74%,100% { opacity: 0; } 75%,99% { opacity: 1; color: #91d4b4; } }
.cp-scanlock { color: #edf4ef; background: radial-gradient(ellipse at 50% 48%, #254644, #142a2d 76%); }
.sl-top small { color: #a9c8bd; }
.sl-status { min-width: 110px; color: #b8d7c4; }
.sl-status i { width: 7px; height: 7px; background: #83d8ae; box-shadow: 0 0 12px #83d8ae88; animation: none; }
.sl-status b { opacity: 0; animation: none; }
.sl-state-locked { color: #9be3bb; }
.cp-scanlock.is-locked .sl-state-locked { opacity: 1; }
.sl-field { border-color: #9fc6b044; background: linear-gradient(135deg,#d8e6d90d,#a5c3b51a); }
.sl-grid { opacity: .8; background-image: linear-gradient(#b9d7c51c 1px,transparent 1px),linear-gradient(90deg,#b9d7c51c 1px,transparent 1px); }
.sl-scan { opacity: 0; animation: none; }
.sl-target { top: 52%; left: 58%; width: min(210px,52%); border-color: #efc98d9c; background: linear-gradient(135deg,#1b3030f5,#132526f7); opacity: 1; transform: translate(-50%,-50%) scale(1); animation: none; }
.sl-lock { top: 14px; right: 14px; left: auto; display: flex; gap: 9px; padding: 8px 11px; border: 1px solid #7bc29a70; border-radius: 999px; background: #143a33e8; opacity: 1; transform: none; animation: none; }
.sl-axis { color: #b1cfc188; }
.sl-steps { color: #b5c9c0; }
.sl-steps span, .sl-steps span:nth-of-type(1), .sl-steps span:nth-of-type(2), .sl-steps span:nth-of-type(3) { animation: none; }
.sl-steps .active, .cp-scanlock.is-locked .sl-steps span:nth-of-type(3) { color: #9be3bb; }
.sl-steps .active i, .cp-scanlock.is-locked .sl-steps span:nth-of-type(3) i { border-color: #83d8ae; background: #83d8ae20; color: #b7f0cf; }
.sl-replay { border-color: #b6c9bd70; background: #193332; color: #e0eee7; }
.sl-replay:disabled { opacity: .9; background: #193332 !important; color: #e0eee7 !important; cursor: progress; }
.cp-scanlock.is-replaying .sl-scan { opacity: 1; animation: sl-sweep-once 4.8s cubic-bezier(.4,0,.2,1) both; }
.cp-scanlock.is-replaying .sl-target { animation: sl-detect-once 4.8s ease both; }
.cp-scanlock.is-replaying .sl-lock { opacity: 0; animation: sl-lock-once 4.8s ease both; }
.cp-scanlock.is-replaying .sl-status i { background: #f6bd70; box-shadow: 0 0 12px #f6bd7088; }
.cp-scanlock.is-replaying .sl-status b { animation-duration: 4.8s; animation-fill-mode: both; }
.cp-scanlock.is-replaying .sl-state-scan { animation-name: sl-status-scan-once; }
.cp-scanlock.is-replaying .sl-state-found { animation-name: sl-status-found-once; }
.cp-scanlock.is-replaying .sl-state-locked { animation-name: sl-status-locked-once; }
.cp-scanlock.is-replaying .sl-steps span:nth-of-type(1) { animation: sl-step-scan 4.8s both; }
.cp-scanlock.is-replaying .sl-steps span:nth-of-type(2) { animation: sl-step-found 4.8s both; }
.cp-scanlock.is-replaying .sl-steps span:nth-of-type(3) { animation: sl-step-locked 4.8s both; }
.cp-scanlock.is-locked .sl-lock, .cp-scanlock.is-locked .sl-target { opacity: 1; }
@keyframes sl-detect-once { 0%,48% { opacity: .14; transform: translate(-50%,-50%) scale(.9); } 58%,70% { opacity: 1; transform: translate(-50%,-50%) scale(1.035); } 78%,100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes sl-lock-once { 0%,70% { opacity: 0; transform: translateY(5px) scale(.94); } 80%,100% { opacity: 1; transform: none; } }
@keyframes sl-step-scan { 0%,48% { color: #f6bd70; } 49%,100% { color: #b5c9c0; } }
@keyframes sl-step-found { 0%,48%,76%,100% { color: #b5c9c0; } 49%,75% { color: #f6bd70; } }
@keyframes sl-step-locked { 0%,75% { color: #b5c9c0; } 76%,100% { color: #9be3bb; } }
@keyframes sl-status-scan-once { 0%,48% { opacity: 1; } 49%,100% { opacity: 0; } }
@keyframes sl-status-found-once { 0%,48%,76%,100% { opacity: 0; } 49%,75% { opacity: 1; color: #f6bd70; } }
@keyframes sl-status-locked-once { 0%,75% { opacity: 0; } 76%,100% { opacity: 1; color: #9be3bb; } }
.term--detail .stage:has(.cp-pathweave), .term--detail .stage:has(.cp-scanlock) { height: 500px; }
.term--detail .stage:has(.cp-pathweave) .stagein, .term--detail .stage:has(.cp-scanlock) .stagein { padding: 12px; box-sizing: border-box; }
@media (max-width: 680px) {
  .term--detail .stage:has(.cp-island) { height: 490px; }
  .term--detail .stage:has(.cp-island) .di-phone { height: min(438px, calc(100% - 24px)); }
  .cp-pathweave, .cp-scanlock { min-height: 230px; }
  .pw-foot { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .di-wave i, .pw-node animateMotion { animation: none !important; }
  .cp-pathweave.is-replaying .pw-under, .cp-pathweave.is-replaying .pw-over,
  .cp-scanlock .sl-scan, .cp-scanlock .sl-target, .cp-scanlock .sl-lock, .cp-scanlock .sl-status i, .cp-scanlock .sl-steps span { animation-duration: .01ms !important; }
}

.iz-stage { position: relative; display: block; width: min(680px, 100%); height: min(100%, 340px); aspect-ratio: 1.72; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); border-radius: 20px; background: var(--panel-2); color: white; text-align: left; cursor: crosshair; touch-action: pan-y; box-shadow: 0 24px 68px -48px color-mix(in srgb, var(--ink) 55%, transparent); }
.iz-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.16,1,.3,1), filter .5s; }
.iz-stage::after { content: ""; position: absolute; inset: 35% 0 0; z-index: 1; background: linear-gradient(transparent, rgba(20,23,21,.58)); pointer-events: none; }
.iz-caption { position: absolute; z-index: 2; left: 20px; bottom: 17px; display: grid; gap: 5px; text-shadow: 0 2px 12px #0008; pointer-events: none; transition: opacity .2s, transform .3s; }
.iz-caption b { font: 600 18px/1 var(--disp); }
.iz-caption small { color: rgba(255,255,255,.78); font: 10px/1.4 var(--body); }
.iz-lens { position: absolute; z-index: 3; left: 50%; top: 50%; width: clamp(106px, 24%, 170px); aspect-ratio: 1; overflow: hidden; border: 2px solid rgba(255,255,255,.94); border-radius: 50%; opacity: 0; transform: translate(-50%,-50%) scale(.82); box-shadow: 0 9px 32px #10191670, inset 0 0 0 1px #fff6; transition: opacity .18s, transform .3s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.iz-lens img { position: absolute; max-width: none; object-fit: cover; }
.iz-cross { position: absolute; z-index: 2; left: var(--ix,50%); top: var(--iy,50%); width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.86); border-radius: 50%; opacity: 0; transform: translate(-50%,-50%); pointer-events: none; transition: opacity .18s; }
.iz-cross::before, .iz-cross::after { content: ""; position: absolute; background: #fff9; }
.iz-cross::before { width: 34px; height: 1px; left: -7px; top: 10px; }
.iz-cross::after { width: 1px; height: 34px; top: -7px; left: 10px; }
.iz-stage.is-zooming .iz-lens { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.iz-stage.is-zooming .iz-cross { opacity: .6; }
.iz-stage.is-zooming .iz-caption { opacity: .7; transform: translateY(3px); }
.iz-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.rb-frame { --pull: 0; position: relative; width: min(520px, 100%); height: min(100%, 260px); min-height: 112px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 19px; background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--accent-3) 13%, var(--panel)), transparent 66%), linear-gradient(155deg, var(--panel), var(--panel-2)); box-shadow: 0 24px 60px -48px color-mix(in srgb, var(--ink) 44%, transparent), inset 0 1px #fff9; }
.rb-viewport { position: absolute; inset: 27px 13px 24px; overflow: hidden; border-radius: 12px; touch-action: none; cursor: grab; user-select: none; outline: none; }
.rb-viewport.is-grabbing { cursor: grabbing; }
.rb-list { display: grid; gap: 5px; will-change: transform; }
.rb-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center; min-height: 38px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--line) 74%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--bg) 86%, transparent); box-shadow: 0 4px 13px -12px var(--ink); }
.rb-row > b { color: color-mix(in srgb, var(--accent) 74%, var(--ink)); font: 9px var(--mono); }
.rb-row span { display: grid; gap: 2px; }
.rb-row strong { color: var(--ink); font: 600 10px/1.1 var(--body); }
.rb-row small { color: var(--muted); font: 8px/1.1 var(--mono); }
.rb-row > i { color: var(--muted); font: normal 11px var(--mono); }
.rb-edge { position: absolute; z-index: 2; left: 15px; right: 15px; display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--muted); font: 7px/1 var(--mono); letter-spacing: .12em; opacity: .74; pointer-events: none; transition: color .18s, opacity .18s, transform .18s; }
.rb-edge--top { top: 8px; }
.rb-edge--bottom { bottom: 7px; }
.rb-edge i { width: 22px; height: 1px; background: currentColor; transform: scaleX(calc(.7 + var(--pull) * .6)); transition: transform .18s; }
.rb-edge.is-active { color: var(--accent); opacity: 1; }
.rb-edge--top.is-active { transform: translateY(2px); }
.rb-edge--bottom.is-active { transform: translateY(-2px); }
.rb-tension { position: absolute; z-index: 3; left: 50%; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: calc(var(--pull) * .8); transform: translateX(-50%) scale(calc(.7 + var(--pull) * 1.7)); transition: opacity .12s, transform .12s; pointer-events: none; }
.rb-frame.is-pulling .rb-viewport { box-shadow: inset 0 10px 22px -21px var(--accent); }
.rb-viewport:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

.vt-photo > img { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.vt-photo:has(> img)::before, .vt-photo:has(> img)::after { display: none; }
.vt-card:hover .vt-photo > img { transform: scale(1.045); }
.term--detail .stage:has(.sh-demo) .stagein { padding: 12px; box-sizing: border-box; }
.term--detail .stage:has(.iz-stage) .stagein { padding: 12px; box-sizing: border-box; }
@media (max-width: 640px) {
  .term--detail .stage:has(.sh-demo) { height: 410px; }
  .term--detail .stage:has(.iz-stage) { height: 320px; }
  .term--detail .stage:has(.rb-frame) { height: 310px; }
  .sh-demo { padding: 8px; border-radius: 15px; }
  .sh-gallery { gap: 5px; }
  .sh-card { gap: 5px; padding: 4px; border-radius: 10px; }
  .sh-photo { min-height: 38px; border-radius: 7px; }
  .sh-card-copy { gap: 3px; padding-inline: 1px; }
  .sh-card-copy b { font-size: 9px; }
  .sh-card-copy small { font-size: 7px; }
  .sh-detail { inset: 8px 7px 20px; grid-template-columns: 1fr; grid-template-rows: 1.1fr .8fr; gap: 6px; }
  .sh-detail-copy { padding: 6px 12px; }
  .sh-detail-copy h3 { margin: 7px 0 3px; font-size: 22px; }
  .sh-detail-copy p { margin-bottom: 8px; font-size: 10px; }
  .sh-detail-copy .mini { min-height: 32px; }
  .sh-hint { font-size: 7px; right: 8px; }
  .iz-stage { aspect-ratio: 1.3; border-radius: 15px; }
  .iz-caption { left: 13px; bottom: 12px; }
  .iz-caption b { font-size: 15px; }
  .rb-viewport { inset-inline: 9px; }
  .rb-row { grid-template-columns: 23px 1fr auto; min-height: 41px; gap: 7px; padding-inline: 8px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 基础动效演示使用真实内容；图鉴、详情、首页共用同一对象。 */
.obj.demo-content { background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 12px 24px -20px color-mix(in srgb, var(--ink) 35%, transparent); font-family: var(--body); }
.obj.demo-notice { display: flex; align-items: center; gap: 10px; width: min(228px, 88%); height: auto; min-height: 76px; padding: 14px; border-radius: 15px; text-align: left; }
.demo-notice-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 50%; background: var(--secondary-container); color: var(--accent-strong); }
.demo-notice-icon svg { width: 23px; height: 23px; }
.demo-notice-copy { display: grid; gap: 5px; min-width: 0; }
.demo-notice-copy b { font-size: 12px; font-weight: 500; line-height: 1.35; }
.demo-notice-copy small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.demo-notice-dot { flex: 0 0 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-left: auto; }
.obj.demo-photo { width: min(152px, 76%); height: 108px; display: flex; flex-direction: column; padding: 5px; border-radius: 12px; overflow: hidden; }
.demo-photo img { width: 100%; flex: 1 1 0; min-height: 0; object-fit: cover; object-position: 50% 42%; border-radius: 8px; }
.demo-photo-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; padding: 8px 5px 3px; }
.demo-photo-caption b { font-size: 9px; font-weight: 500; line-height: 1.3; }
.demo-photo-caption small { font: 12px var(--body); color: var(--accent-strong); }
.obj.demo-photo-portrait { width: 86px; height: 108px; }
.obj.demo-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 98px; height: 98px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--secondary-container); color: var(--accent-strong); outline: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); outline-offset: 5px; box-shadow: none; }
.demo-badge-star svg { display: block; width: 32px; height: 32px; }
.demo-badge b { font-size: 9px; font-weight: 500; line-height: 1.3; }
.demo-badge small { font-size: 8px; opacity: .6; }
.stagein:has(> .demo-sequence) { counter-reset: demo-sequence; }
.obj.demo-sequence { display: flex; flex-direction: column; gap: 6px; width: clamp(24px, 14%, 44px); height: 66px; padding: 3px; border-radius: 7px; counter-increment: demo-sequence; }
.demo-sequence-photo { flex: 1; min-height: 0; background: url('img/p13.jpg') center / cover; border-radius: 4px; }
.demo-sequence:nth-child(2) .demo-sequence-photo { background-image: url('img/p04.jpg'); }
.demo-sequence:nth-child(3) .demo-sequence-photo { background-image: url('img/p10.jpg'); }
.demo-sequence:nth-child(4) .demo-sequence-photo { background-image: url('img/p14.jpg'); }
.demo-sequence:nth-child(5) .demo-sequence-photo { background-image: url('img/p07.jpg'); }
.demo-sequence-number { color: var(--muted); font: 7px/1 var(--mono); padding: 0 2px 2px; }
.demo-sequence-number::before { content: counter(demo-sequence, decimal-leading-zero); }
.obj.demo-compass { width: 76px; height: 76px; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--accent-strong); }
.demo-compass svg { display: block; width: 100%; height: 100%; }
.obj.demo-beacon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border-color: color-mix(in srgb, var(--accent) 36%, var(--line)); background: var(--secondary-container); color: var(--accent-strong); }
.demo-beacon svg { width: 66%; height: 66%; }
.demo-wipe { width: min(152px, 76%); height: 108px; }
.demo-wipe .obj.wp { width: 100%; height: 100%; display: flex; border-radius: 12px; background: var(--panel); }
.demo-wipe .wipebar { inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 12px; }
.term--detail .demo-notice { width: min(300px, 88%); min-height: 94px; padding: 18px; gap: 14px; }
.term--detail .demo-notice-copy b { font-size: 15px; }
.term--detail .demo-notice-copy small { font-size: 11px; }
.term--detail .demo-notice-icon { flex-basis: 42px; height: 42px; }
.term--detail .obj.demo-photo, .term--detail .demo-wipe { width: min(288px, 80%); height: 216px; }
.term--detail .demo-wipe .obj.wp { width: 100%; height: 100%; }
.term--detail .obj.demo-photo-portrait { width: 184px; height: 248px; }
.term--detail .demo-photo-caption { padding: 12px 9px 7px; }
.term--detail .demo-photo-caption b { font-size: 13px; }
.term--detail .obj.demo-sequence { width: clamp(28px, 14%, 78px); height: 110px; padding: 5px; border-radius: 10px; }
.term--detail .demo-sequence-number { font-size: 10px; padding: 2px 4px 4px; }
.term--detail .obj.demo-badge { width: 150px; height: 150px; gap: 9px; }
.term--detail .demo-badge-star svg { width: 48px; height: 48px; }
.term--detail .demo-badge b { font-size: 12px; }
.term--detail .obj.demo-compass { width: 132px; height: 132px; }
.term--detail .obj.demo-beacon { width: 98px; height: 98px; }

/* 首页只覆盖舞台容器和显示尺寸，术语主体继续共用详情页样式。 */
.example-heading { display: grid; gap: 2px; min-width: 0; }
.example-pool { color: var(--muted); font-size: 10px; letter-spacing: .02em; }
#example-stage { position: relative; display: block; height: 236px; min-height: 236px; padding: 0; isolation: isolate; overflow: hidden; }
#example-stage .home-preview { position: relative; width: 100%; height: 100%; }
#example-stage .stage { width: 100%; height: 100%; padding: 16px 20px 34px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#example-stage .stage:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
#example-stage .stage.kind-compound { padding: 14px 20px 34px; }
#example-stage .cp-chip, #example-stage .cp-cap { display: none; }
#example-stage .stagein > .obj:only-child:not(.demo-content) { width: 132px; height: 92px; border-radius: 18px; }
#example-stage .stagein > .obj.dot:only-child:not(.demo-content) { width: 76px; height: 76px; border-radius: 50%; }
#example-stage .tl-card { width: 142px; height: 186px; }
#example-stage .th-deck { width: min(260px, 80%); height: 174px; }
#example-stage .mg-btn { width: 144px; height: 60px; font-size: 18px; }
#example-stage .mg-ring { width: 180px; height: 180px; }
#example-stage .scrolly { background: transparent; scrollbar-color: var(--accent) var(--bg-2); scrollbar-gutter: stable; }
#example-stage .scrolly::-webkit-scrollbar { width: 8px; }
#example-stage .scrolly::-webkit-scrollbar-track { background: var(--bg-2); border-radius: 8px; }
#example-stage .scrolly::-webkit-scrollbar-thumb { background: var(--accent); border: 2px solid var(--bg-2); border-radius: 8px; }
.example-hint { position: absolute; z-index: 6; right: 18px; bottom: 12px; max-width: calc(100% - 36px); color: var(--ink-2); font: 10px/1.5 var(--mono); pointer-events: none; }
#example-stage .obj.demo-notice { width: min(254px, 92%); min-height: 86px; padding: 16px; }
#example-stage .demo-notice-copy b { font-size: 14px; }
#example-stage .demo-notice-copy small { font-size: 10px; }
#example-stage .obj.demo-photo, #example-stage .demo-wipe { width: 212px; max-width: 84%; height: 158px; }
#example-stage .demo-wipe .obj.wp { width: 100%; max-width: none; height: 100%; }
#example-stage .demo-photo-caption { padding: 9px 7px 5px; }
#example-stage .demo-photo-caption b { font-size: 11px; }
#example-stage .obj.demo-photo-portrait { width: 128px; height: 174px; }
#example-stage .obj.demo-badge { width: 124px; height: 124px; gap: 7px; }
#example-stage .demo-badge-star svg { width: 40px; height: 40px; }
#example-stage .demo-badge b { font-size: 11px; }
#example-stage .obj.demo-sequence { width: clamp(32px, 14%, 54px); height: 82px; padding: 4px; }
#example-stage .demo-sequence-number { font-size: 8px; padding: 1px 3px 3px; }
#example-stage .obj.demo-compass { width: 108px; height: 108px; }
#example-stage .obj.demo-beacon { width: 82px; height: 82px; }
@media (max-width: 700px) {
  .term--detail .obj.demo-photo-portrait { width: 144px; height: 194px; }
  #example-stage { height: 236px; min-height: 236px; }
  #example-stage .stage, #example-stage .stage.kind-compound { padding: 14px 16px 34px; }
  .example-hint { right: 16px; bottom: 11px; font-size: 9px; }
}

/* Compound previews: measure against their own viewport, shared by cards and details. */
.stage.kind-compound :is(.cp-pin, .cp-2c, .cp-rg, .cp-rl, .cp-tn, .cp-tm, .cp-pagecurl, .cp-dotsphere) {
  container-type: size;
  min-height: 0;
  scrollbar-color: var(--accent) var(--panel-2);
  scrollbar-gutter: stable;
}
.stage.kind-compound :is(.cp-pin, .cp-2c, .cp-rg, .cp-rl, .cp-tn, .cp-tm) { overflow-x: hidden; overflow-y: auto; }

/* One tall content grid inside one scroll viewport keeps the left visual pinned.
   Clip instead of hidden prevents an invisible nested scroll box eating the wheel. */
.stage.kind-compound .cp-2c { display: block; }
.tc-layout { display: grid; grid-template-columns: clamp(78px, 24cqw, 190px) minmax(0, 1fr); gap: clamp(10px, 2cqw, 20px); align-items: start; }
.stage.kind-compound .cp-2c .tc-left { position: sticky; top: 4px; align-self: start; height: min(88cqh, 280px); overflow: clip; z-index: 2; }
.stage.kind-compound .cp-2c .tc-right { gap: clamp(8px, 3cqh, 14px); padding: 4px 2px max(16px, calc(100cqh - 27cqh)); }
.stage.kind-compound .cp-2c .tc-s { box-sizing: border-box; height: clamp(68px, 27cqh, 116px); padding: 0 clamp(10px, 2cqw, 20px); }
.stage.kind-compound .cp-2c .tc-s.on { transform: none; }

/* Pinned hero: the image and photo deck occupy a full, stable scene. */
.stage.kind-compound .cp-pin .pi-head { position: sticky; top: 0; height: 100cqh; padding: 0; display: block; background: var(--bg); box-shadow: none; overflow: clip; }
.stage.kind-compound .cp-pin .pi-hero { position: absolute; left: 6px; right: 6px; top: 6px; height: 64cqh; min-height: 0; transform-origin: left center; border-radius: 12px; color: #fff; }
.stage.kind-compound .cp-pin .pi-hero b { font-size: clamp(22px, 9cqh, 42px); letter-spacing: .04em; }
.stage.kind-compound .cp-pin .pi-hero s { font-size: clamp(9px, 3cqh, 13px); }
.stage.kind-compound .cp-pin .pi-flow { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: clamp(6px, 1.5cqw, 14px); height: 27cqh; align-items: stretch; }
.stage.kind-compound .cp-pin .pi-c { position: relative; flex: 1; min-width: 0; width: auto; height: 100%; overflow: hidden; padding: 0; border-radius: 8px; background: var(--panel); box-shadow: 0 7px 16px -10px #20180f80; }
.pi-c > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage.kind-compound .cp-pin .pi-c > u { position: absolute; inset: auto 0 0; display: flex; gap: 6px; align-items: baseline; padding: 16px 8px 6px; background: linear-gradient(transparent, #151918c9); color: #fff; font: 10px var(--body); text-decoration: none; }
.pi-c > u span { font: 8px var(--mono); opacity: .8; }
.pi-c > u b { font-weight: 500; }

/* Complete reading cover and colour sheet, including their live indicators. */
.stage.kind-compound .cp-rg .rg-pin, .stage.kind-compound .cp-tm .tm-pin { height: 100cqh; min-height: 0; box-sizing: border-box; }
.stage.kind-compound .cp-rg .rg-cover { box-sizing: border-box; width: min(94%, 720px); height: 94cqh; min-height: 0; padding: clamp(8px, 3cqh, 20px); gap: clamp(4px, 2cqh, 10px); border-radius: 12px; }
.stage.kind-compound .cp-rg .rg-cover h3 { font-size: clamp(18px, 8cqh, 36px); line-height: 1.2; }
.stage.kind-compound .cp-rg .rg-cover p { margin: 0; font-size: clamp(9px, 3cqh, 13px); }
.stage.kind-compound .cp-rg :is(.rg-kicker, .rg-scroll) { font-size: clamp(7px, 2cqh, 10px); letter-spacing: .06em; }
.stage.kind-compound .cp-rg .rg-meter { width: clamp(52px, 28cqh, 112px); height: clamp(52px, 28cqh, 112px); margin: 0; }
.stage.kind-compound .cp-rg .rg-v { font-size: clamp(15px, 7cqh, 26px); }
.stage.kind-compound .cp-tm .tm-card { box-sizing: border-box; width: min(90%, 660px); height: 94cqh; min-height: 0; padding: clamp(10px, 3cqh, 26px) clamp(14px, 4cqw, 38px); gap: clamp(4px, 2cqh, 12px); border-radius: 12px; }
.stage.kind-compound .cp-tm .tm-hd { font-size: clamp(24px, 11cqh, 48px); margin: 0; }
.stage.kind-compound .cp-tm .tm-copy { font-size: clamp(10px, 3.5cqh, 15px); line-height: 1.5; }
.stage.kind-compound .cp-tm :is(.tm-kicker, .tm-foot, .tm-hex) { font-size: clamp(7px, 2cqh, 10px); letter-spacing: .08em; }
.stage.kind-compound .cp-tm .tm-sw k { height: clamp(12px, 4cqh, 22px); }

/* Rails and tunnel: reserve space for both rows / the full depth field. */
.stage.kind-compound :is(.cp-rl .rl-pin, .cp-tn .tn-pin) { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; box-sizing: border-box; height: 100cqh; min-height: 0; overflow: clip; }
.stage.kind-compound :is(.cp-rl, .cp-tn) .cp-ed { padding: clamp(8px, 3cqh, 16px) clamp(12px, 4cqw, 26px) 6px; gap: 3px; }
.stage.kind-compound :is(.cp-rl, .cp-tn) .cp-kick { font-size: clamp(7px, 2cqh, 10px); }
.stage.kind-compound :is(.cp-rl, .cp-tn) .ced-hd { font-size: clamp(16px, 7cqh, 30px); line-height: 1.2; }
.stage.kind-compound :is(.cp-rl, .cp-tn) .cp-sub { display: block; padding: 6px 12px 8px; font-size: clamp(7px, 2cqh, 11px); line-height: 1.3; letter-spacing: .02em; }
.stage.kind-compound .cp-rl .cp-dots { display: none; }
.stage.kind-compound .cp-rl .rl-wrap { min-height: 0; grid-template-rows: 1fr .85fr; gap: clamp(6px, 3cqh, 14px); padding: 6px 0; }
.stage.kind-compound .cp-rl .rl-row { height: 100%; min-height: 0; }
.stage.kind-compound .cp-rl .rl-c { box-sizing: border-box; width: clamp(90px, 32cqw, 172px); height: 100%; min-height: 0; margin-top: 0; }
.stage.kind-compound .cp-rl .rl-row.b .rl-c { width: clamp(78px, 27cqw, 144px); height: 100%; margin: 0; }
.stage.kind-compound .cp-tn .tn-space { min-height: 0; height: auto; margin: 0 8px; overflow: clip; }
.stage.kind-compound .cp-tn .tn-c { width: clamp(62px, 23cqw, 160px); height: clamp(82px, 46cqh, 210px); margin: 0; translate: -50% -50%; }
.stage.kind-compound .cp-tn .tn-pin > .cp-sub { position: static; background: none; }

/* Page typography scales with the book, not with the browser width. */
.stage.kind-compound .cp-pagecurl { background: var(--panel-2); }
.stage.kind-compound .cp-pagecurl .pc-book { container-type: size; width: min(620px, 92%); height: min(280px, 78%); min-height: 0; }
.stage.kind-compound .cp-pagecurl :is(.pc-left, .pc-under, .pc-paper, .pc-back) { padding: 4cqw; gap: 2cqh; justify-content: center; }
.stage.kind-compound .cp-pagecurl :is(.pc-left, .pc-under, .pc-paper, .pc-back) > b { font-size: clamp(16px, 6cqw, 34px); line-height: 1.13; flex-shrink: 0; }
.stage.kind-compound .cp-pagecurl :is(.pc-left, .pc-under, .pc-paper, .pc-back) > span { font-size: clamp(6px, 1.4cqw, 8px); letter-spacing: .05em; }
.stage.kind-compound .cp-pagecurl :is(.pc-left, .pc-under, .pc-paper, .pc-back) > small { font-size: clamp(7px, 1.9cqw, 11px); line-height: 1.5; }
.stage.kind-compound .cp-pagecurl :is(.pc-left, .pc-under, .pc-paper, .pc-back) > i { color: #b56a46; font: normal clamp(6px, 1.4cqw, 8px)/1.4 var(--mono); letter-spacing: .02em; }
.stage.kind-compound .cp-pagecurl .pc-corner { z-index: 5; right: 0; bottom: 0; width: 30px; height: 30px; border-radius: 0 0 12px 0; }
.stage.kind-compound .cp-pagecurl .pc-book.is-flipped .pc-corner { right: auto; left: 0; scale: -1 1; }
.stage.kind-compound .cp-pagecurl .pc-toggle { top: auto; bottom: calc(100% + 5px); right: 0; padding: 5px 9px; font-size: 8px; backdrop-filter: none; }
.stage.kind-compound .cp-pagecurl .cp-cap { bottom: 4px; left: 8px; font-size: 7px; }

/* Seven indexed particle forms share a continuous point cloud. */
.stage.kind-compound .cp-dotsphere { display: block; background: var(--panel); }
.stage.kind-compound .cp-dotsphere .ds-canvas { top: 34px; bottom: 48px; height: calc(100% - 82px); }
.stage.kind-compound .cp-dotsphere .ds-title { top: 8px; left: 12px; display: flex; align-items: baseline; gap: 8px; }
.ds-title .ds-name { font-size: 16px; }
.ds-controls { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; }
.ds-shapes { display: flex; gap: 2px; align-items: center; }
.ds-shapes button { padding: 5px 5px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font: 9px var(--body); cursor: pointer; }
.ds-shapes button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.ds-shapes button:hover { background: var(--panel-2); color: var(--ink); }
.ds-shapes button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stage.kind-compound .cp-dotsphere .ds-toggle { position: static; padding: 5px 8px; font-size: 9px; backdrop-filter: none; }
.term--detail .cp-dotsphere .ds-controls { bottom: 18px; gap: 12px; }
.term--detail .cp-dotsphere .ds-shapes button { padding: 8px; font-size: 12px; }
.term--detail .stage.kind-compound .cp-dotsphere .ds-toggle { padding: 8px 12px; font-size: 12px; }
@media (max-width: 640px) {
  .term--detail .cp-dotsphere .ds-controls { bottom: 8px; gap: 4px; }
  .term--detail .cp-dotsphere .ds-shapes button { padding: 5px; font-size: 10px; }
}
/* A dark tunnel owns its surface; paper scroll shadows must not wash it out. */
.stage.kind-compound .cp-tn.scrolly--ss { background-image: none; }
@media (max-width: 640px) {
  .stage.kind-compound .cp-dotsphere .ds-canvas { bottom: 78px; height: calc(100% - 112px); }
  .term--detail .cp-dotsphere .ds-controls { min-height: 62px; }
  .stage.kind-compound .cp-pagecurl .pc-book { height: min(280px, 72%); }
}

/* Rich homepage picks keep the same 236px viewport and shared demo drivers. */
#example-stage :is(.cp-dotsphere, .cp-pagecurl) { background: transparent; }
#example-stage .cp-dotsphere .ds-canvas { top: 28px; bottom: 32px; height: calc(100% - 60px); }
#example-stage .cp-dotsphere .ds-title { top: 4px; }
#example-stage .cp-dotsphere .ds-controls { bottom: 2px; gap: 3px; }
#example-stage .cp-cb { container-type: size; }
#example-stage .cb-pin { box-sizing: border-box; height: 100cqh; padding: 10px 14px 18px; grid-template-rows: auto minmax(0, 1fr); align-content: stretch; gap: 10px; }
#example-stage .cb-head { gap: 3px; padding-right: 38px; }
#example-stage .cb-head span { font-size: 7px; letter-spacing: .08em; }
#example-stage .cb-head strong { font-size: 17px; }
#example-stage .cb-head strong em { font-size: 8px; }
#example-stage .cb-box { height: 100%; min-height: 0; }
#example-stage .cb-v { top: 28px; right: 12px; font-size: 13px; }
#example-stage .cp-sc { container-type: size; }
#example-stage .sc-txt { font-size: clamp(14px, 5cqw, 22px); letter-spacing: .06em; }
#example-stage .sh-demo { padding: 9px; border-radius: 14px; background: var(--panel); box-shadow: none; }
#example-stage .sh-gallery { gap: 7px; grid-template-rows: 12px minmax(0, 1fr); }
#example-stage .sh-card { padding: 4px; gap: 5px; border-radius: 10px; }
#example-stage .sh-detail { inset: 9px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr; gap: 10px; }
#example-stage .sh-detail-copy { min-width: 0; padding: 2px; }
#example-stage .sh-detail-copy > small { font-size: 6px; letter-spacing: .05em; }
#example-stage .sh-detail-copy h3 { margin: 8px 0 6px; font-size: 20px; }
#example-stage .sh-detail-copy p { margin-bottom: 10px; font-size: 10px; line-height: 1.6; }
#example-stage .sh-detail-copy .mini { min-height: 28px; padding: 5px 7px; font-size: 9px; }
#example-stage .sh-hint { display: none; }
#example-stage .cp-fan { container-type: size; --rot: 11deg; --spread: min(27px, 6cqw); }
#example-stage .fn-deck { width: min(86px, 24cqw); height: min(116px, 60cqh); translate: 0 -12px; }

/* A pinned chart owns its surface; only its scroll runway moves behind it. */
.stage.kind-compound .cp-cb { container-type: size; }
.stage.kind-compound .cb-pin { z-index: 2; box-sizing: border-box; height: 100cqh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); align-content: stretch; padding: clamp(10px, 5cqh, 30px) 18px 26px; gap: clamp(8px, 4cqh, 16px); background: var(--bg-2); }
.stage.kind-compound .cb-box { height: 100%; min-height: 0; }
.cb-scroll-range { height: 480px; pointer-events: none; }
.cb-bars > s { height: var(--bar-height, 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent) 9%, transparent)); }
.cb-box svg { z-index: 1; pointer-events: none; }
.cb-axis { position: absolute; left: 4px; right: 4px; top: calc(100% + 7px); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; color: var(--muted); font: 8px/1 var(--mono); text-align: center; }
#example-stage .cb-pin { background: color-mix(in srgb, var(--bg-2) 88%, var(--panel)); padding-bottom: 26px; }
#example-stage .cp-pf { grid-template-columns: minmax(0, 1fr) 110px; gap: 14px; padding: 8px 10px; }
#example-stage .pf-list { gap: 6px; }
#example-stage .pf-row { padding: 9px 10px; font-size: 11px; text-align: left; }
#example-stage .pf-card { margin-inline-end: 12px; padding: 7px; }
#example-stage .pf-thumb { width: 82px; height: 68px; }
#example-stage .pf-name { font-size: 10px; }
#example-stage .cp-lb { background: transparent; }
#example-stage .cp-tn { background: #060608; background-image: none; }
#example-stage .tn-pin { z-index: 2; background: #060608; }
#example-stage .tn-space { background: none; }
#example-stage .cp-cp .cp-tag { font-size: 8px; padding: 4px 6px; }
#example-stage .cp-cp .cp-hd { width: 34px; height: 34px; margin: -17px 0 0 -17px; }

/* Native paper-mesh book; the same viewport is used by cards, detail and home. */
.stage.kind-compound .native-page-book { min-height: 0; border-radius: 12px; background: var(--panel-2); display: block; isolation: isolate; }
.native-page-book canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.native-page-book canvas.dragging { cursor: grabbing; }
.native-page-book canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.native-page-book .loading, .native-page-book .fallback { position: absolute; left: 12px; right: 12px; top: 44%; text-align: center; color: var(--ink-2); font: 13px var(--body); pointer-events: none; }
.native-page-book .fallback:empty, .native-page-book.ready .loading { display: none; }
.term--detail .pg-visual .stage.kind-compound:has(.native-page-book) { height: clamp(420px, 45vw, 560px); }
.stage.kind-compound:has(.native-page-book) { padding: 12px 12px 30px; }
#example-stage .stage.kind-compound:has(.native-page-book) { padding: 8px 12px 28px; }
#example-stage .native-page-book { background: color-mix(in srgb, var(--bg-2) 88%, var(--panel)); }
@media (max-width:700px) {
 .term--detail .pg-visual .stage.kind-compound:has(.native-page-book) { height: 360px; min-height: 360px; }
}

/* Native implementation selector: keep tools separate from the readable code. */
.term--detail .codewrap { overflow: visible; }
.code-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px 9px; }
.code-label { color: var(--muted); font-size: 12px; }
.code-format { position: relative; }
.code-format summary { display: flex; align-items: center; gap: 22px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--bg); cursor: pointer; list-style: none; }
.code-format summary::-webkit-details-marker { display: none; }
.code-format summary b { font: 500 12px var(--mono); }
.code-format summary > span { color: var(--muted); line-height: 1; transition: transform .16s; }
.code-format[open] summary { border-color: var(--accent); }
.code-format[open] summary > span { transform: rotate(180deg); }
.code-format summary:focus-visible, .code-options button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.code-options { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: 256px; max-width: calc(100vw - 80px); padding: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-float); }
.code-options button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 0; border-radius: 8px; padding: 12px; background: transparent; color: var(--ink); text-align: left; }
.code-options button:hover, .code-options button[aria-pressed=true] { background: color-mix(in srgb,var(--accent) 9%,transparent); }
.code-options b, .dialect-choice b { display: block; font: 500 13px var(--mono); }
.code-options small, .dialect-choice small { display: block; margin-top: 4px; color: var(--muted); font: 11px/1.4 var(--body); }
.code-check { visibility: hidden; color: var(--accent); }
.code-options [aria-pressed=true] .code-check { visibility: visible; }
.codewrap .code-header .copy { position: static; margin-left: auto; opacity: 1; padding: 7px 12px; border-radius: 8px; flex-shrink: 0; }
.term--detail .codewrap .code-note { margin: 0; padding: 0 18px 13px; font: 11px/1.6 var(--body); border-bottom: 1px solid var(--line-soft); }
.term--detail .codewrap pre { max-height: 420px; padding: 18px; border-radius: 0 0 var(--r-md) var(--r-md); overscroll-behavior: auto; scrollbar-width: thin; }
.term--detail .codewrap code { font: 12px/1.8 var(--mono); white-space: pre; word-break: normal; }
@media (max-width: 600px) {
  .code-header { padding: 12px 12px 9px; gap: 9px; }
  .code-label { font-size: 11px; }
  .code-format summary { gap: 14px; }
  .code-options { left: -66px; max-width: calc(100vw - 64px); }
  .term--detail .codewrap .code-note { padding: 0 12px 12px; }
  .term--detail .codewrap pre { padding: 14px 12px; max-height: 340px; }
}

/* A browsable, uneven gallery: each column flows independently in DOM order. */
#sections .grid { display: block; columns: 258px; column-gap: var(--sp-4); }
#sections .grid > .term {
  display: inline-flex; vertical-align: top; width: 100%; height: auto;
  margin: 0 0 var(--sp-4); break-inside: avoid; page-break-inside: avoid;
  content-visibility: visible; contain-intrinsic-size: none; container-type: inline-size;
}
#sections .grid .term .stage { flex: none; height: 60cqw; min-height: 154px; }
#sections .grid .term[data-card-layout="portrait"] .stage { height: 90cqw; }
#sections .grid .term[data-card-layout="study"] .stage { height: 74cqw; }
/* Reserve the final stage size even before the lazy canvas mounts. */
#sections .grid .term .stage:is([data-mode="gaze"],[data-mode="dio"],[data-mode="bloom"],[data-mode="fan"],[data-mode="vortex"],[data-mode="float"],[data-mode="orbit"],[data-mode="thememorph"],[data-mode="vspeed"],[data-mode="chart"],[data-mode="tunnel"],[data-mode="fab"],[data-mode="tristate"],[data-mode="odometer"],[data-mode="tabs"],[data-mode="island"],[data-mode="scratch"],[data-mode="cylinder"],[data-mode="ring3d"],[data-mode="scanlock"]):is(.kind-compound) { height: calc(var(--atlas-preview-height, 60cqw) + 36px); min-height: 0; }
#sections .grid .term .stage.kind-compound[data-mode="fan"] { height: calc(var(--atlas-preview-height, 60cqw) + 76px); }
#sections .grid > .term[hidden] { display: none; }
#sections .grid .term .term-main { flex: none; padding: 14px 8px 12px; }
#sections .grid .term .en { white-space: normal; overflow: visible; line-height: 1.3; }
#sections .grid .term .term-main .en { display: block; flex: none; margin: 0; line-height: 1.35; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
#sections .grid .term .term-main .zh { display: block; flex: none; min-height: 1.45em; margin: 4px 0 0; line-height: 1.45; }
#sections .grid .term .brief { -webkit-line-clamp: 3; line-clamp: 3; }
@media(max-width:600px) { #sections .grid { columns: 1; } }