/* ============================================================================
   交互组件专属样式
   ========================================================================== */

/* ============================================================================
   djhh 排版全覆盖补丁（重建组件补课）
   §12.2 keep-all 必须覆盖所有文字元素,不只 h/p/li;悬停详情防出框
   ========================================================================== */
#track, #track * { word-break: keep-all; overflow-wrap: break-word; }

/* 标题/短语类载体:balance */
.rt-title, .next-hook, .wf-node b, .closing-grid b, .oss-card b,
.learn-day b, .account-example b, .rt-peek, .qc-hint, .if-step,
.pick-card, .source-card, .choice-btn { text-wrap: balance; }

/* 正文类载体(span/div,不在 p 选择器里):pretty 防孤字 */
.rt-detail p, .wf-node span, .oss-card span, .learn-day span,
.account-example span, .closing-grid span, .mini-stats span,
.stat-label, .pipe-detail p, .if-detail p, .pick-answer p,
.source-feedback p, .oss-feedback p, .risk-feedback, .risk-scenario,
.action-grid label, .hn-verdict, .act-sub { text-wrap: pretty; }

/* 数字单元不断行 */
.mini-stats b, .rt-ico, .stat-num, .bill-big, .route-chain span { white-space: nowrap; }

/* 悬停详情防出框:内容短时居中、超长时字号收敛 + 兜底滚动(不裁字) */
.rtile .rt-detail { justify-content: flex-start; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ffffff55 transparent; }
.rtile .rt-detail::before, .rtile .rt-detail::after { content: ""; flex: 1 0 6px; }
.rtile .rt-detail .rd-cap { flex: none; }
.rtile .rt-detail p { font-size: clamp(.8rem, .95vw, .95rem); line-height: 1.6; max-width: 48ch; }

/* 钩子行与工作流板宽度纪律 */
.next-hook { max-width: 62ch; text-wrap: balance; }
@media (max-width: 860px){
  .workflow-board { grid-template-columns: 1fr; }
  .workflow-board .wf-arrow { justify-self: center; transform: rotate(90deg); }
}

/* --- 来源屏（附录）--- */
.slide .sources { max-width: 880px; text-align: left; font-size: .8rem; columns: 2; column-gap: 2em; }
@media (max-width: 640px){ .slide .sources { columns: 1; } }
.slide .sources a { display: block; margin-bottom: .4em; color: var(--ink-3); text-decoration: none; }
.slide .sources a:hover { color: var(--coral-deep); }

/* --- 认知四象限 --- */
.quad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quad-cell {
  position: relative; padding: 18px 16px; min-height: 118px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper-card);
  transition: .2s; display: flex; flex-direction: column; justify-content: space-between;
}
.quad-cell:hover { border-color: var(--coral); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.quad-cell.sel { border-color: var(--coral); background: linear-gradient(160deg,#fff6ec,var(--paper-card)); box-shadow: var(--shadow-md); }
.quad-cell[data-q="uu"] { background: linear-gradient(160deg,#2c2822,#211d18); border-color:#3a352c; color:#efe6d5; }
.quad-cell[data-q="uu"].sel { border-color: var(--coral); }
.quad-cell[data-q="uu"] .qc-en { color:#b9a }
.quad-cell .qc-en { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.quad-cell .qc-t { font-weight: 700; font-size: 1.12rem; margin-top: .2em; }
.quad-cell .qc-hint { font-size: .8rem; color: var(--ink-3); }
.quad-cell[data-q="uu"] .qc-hint { color:#b8ab93; }
.quad-detail { margin-top: 14px; padding: 18px 20px; border-radius: 12px; background: var(--paper-2); border: 1px dashed var(--line-2); min-height: 130px; }
.quad-detail.empty { display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: .9rem; }
.quad-detail.empty::before { content: "← 点任意一格，看它在 AI 时代该怎么用"; }
.quad-detail .qd-head { display: flex; align-items: baseline; gap: .7em; }
.quad-detail .qd-en { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); font-weight: 700; }
.quad-detail h4 { margin: 0; }
.quad-detail .qd-desc { margin: .4em 0 .8em; color: var(--ink-2); }
.quad-detail .qd-up { display: flex; gap: .8em; padding: .8em 1em; background: #fff; border-radius: 10px; border: 1px solid var(--line); }
.quad-detail .qd-uptag { flex-shrink: 0; font-size: .72rem; font-weight: 700; color: var(--coral-deep); background: var(--coral-soft); padding: .2em .6em; border-radius: 99px; height: fit-content; }
.quad-detail .qd-up p { margin: 0; font-size: .92rem; }

/* --- 下一个词预测 --- */
.nt-sentence { font-size: 1.15rem; font-weight: 600; line-height: 1.7; padding: 16px 18px; background: var(--paper-2); border-radius: 12px; border: 1px solid var(--line); min-height: 2em; }
.nt-sentence::after { content: "▊"; color: var(--coral); animation: ntblink 1s steps(2) infinite; }
@keyframes ntblink { 50% { opacity: 0; } }
.nt-bars { display: grid; gap: 8px; margin: 14px 0; }
.nt-bar { display: grid; grid-template-columns: 9em 1fr 3em; align-items: center; gap: 10px; background: var(--paper-card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; font: inherit; text-align: left; transition: .16s; }
.nt-bar:hover { border-color: var(--coral); transform: translateX(2px); }
.nt-bar.top { border-color: var(--coral); background: #fff8ef; }
.nt-bar .ntw { font-weight: 600; }
.nt-bar .ntbar { height: 8px; background: var(--paper-sink); border-radius: 99px; overflow: hidden; }
.nt-bar .ntbar > span { display: block; height: 100%; background: linear-gradient(90deg,var(--coral),var(--gold)); border-radius: 99px; }
.nt-bar .ntp { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--ink-3); text-align: right; }
.nt-done { padding: 14px; background: #fff8ef; border: 1px dashed var(--coral); border-radius: 10px; font-size: .92rem; color: var(--ink-2); }

/* --- 扩散去噪 --- */
.df-stage { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.df-canvas-wrap { border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow-md); background: #2a2620; line-height: 0; }
.df-canvas-wrap canvas { width: min(420px, 70vw); height: auto; display: block; }
.df-controls { flex: 1; min-width: 220px; }
.df-label { font-weight: 700; color: var(--coral-deep); margin-bottom: .6em; }
.df-slider { margin: 10px 0; }

/* --- 调用≠满血 --- */
.hn-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; align-items: center; }
@media (max-width: 760px){ .hn-wrap { grid-template-columns: 1fr; } }
.hn-toggles { display: grid; gap: 10px; }
.hn-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-card); cursor: pointer; transition: .18s; }
.hn-toggle:hover { border-color: var(--coral); }
.hn-toggle .hnl { font-weight: 600; font-size: .95rem; }
.hn-toggle .hnl small { display: block; font-weight: 400; color: var(--ink-3); font-size: .8rem; }
.hn-toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.hn-toggle .tk { flex-shrink: 0; width: 44px; height: 25px; border-radius: 99px; background: var(--paper-sink); border: 1px solid var(--line-2); position: relative; transition: .2s; }
.hn-toggle .tk::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: .2s; }
.hn-toggle input:checked ~ .tk { background: var(--coral); border-color: var(--coral); }
.hn-toggle input:checked ~ .tk::after { transform: translateX(19px); }
.hn-gauge { text-align: center; }
.hn-score { font-family: var(--serif); font-size: clamp(3rem,9vw,5rem); font-weight: 700; color: var(--coral-deep); line-height: 1; }
.hn-score::after { content: "/100"; font-size: .28em; color: var(--ink-faint); vertical-align: super; }
.hn-meter { height: 14px; margin: 14px 0; }
.hn-verdict { font-size: .95rem; color: var(--ink-2); min-height: 3em; max-width: 34ch; margin-inline: auto; }

/* --- Agent 循环 --- */
.al-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center; }
@media (max-width: 760px){ .al-wrap { grid-template-columns: 1fr; } }
.al-ring { position: relative; width: 260px; height: 260px; margin: 0 auto; }
.al-ring .al-center { position: absolute; inset: 34%; border-radius: 50%; background: linear-gradient(160deg,#2c2822,#211d18); color: #f0e8d8; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; text-align: center; box-shadow: var(--shadow-md); }
.al-stage { position: absolute; width: 96px; padding: 9px 6px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper-card); text-align: center; font-weight: 700; font-size: .86rem; transition: .25s; }
.al-stage small { display: block; font-weight: 400; font-size: .68rem; color: var(--ink-3); }
.al-stage[data-s="sense"]   { top: -6px; left: 50%; transform: translateX(-50%); }
.al-stage[data-s="plan"]    { top: 50%; right: -14px; transform: translateY(-50%); }
.al-stage[data-s="act"]     { bottom: -6px; left: 50%; transform: translateX(-50%); }
.al-stage[data-s="observe"] { top: 50%; left: -14px; transform: translateY(-50%); }
.al-stage.on { border-color: var(--coral); background: var(--coral); color: #fff; box-shadow: 0 6px 20px var(--coral-glow); transform: scale(1.08) translateX(-50%); }
.al-stage[data-s="plan"].on, .al-stage[data-s="observe"].on { transform: scale(1.08) translateY(-50%); }
.al-log { height: 230px; overflow-y: auto; background: #211d18; border-radius: 12px; padding: 14px; font-family: var(--mono); font-size: .8rem; line-height: 1.7; color: #d8cdb8; }
.al-line { opacity: 0; animation: alin .3s forwards; margin-bottom: .3em; }
@keyframes alin { to { opacity: 1; } }
.al-line .al-tag { display: inline-block; min-width: 3.4em; font-weight: 700; }
.al-line.sense .al-tag { color: #8fb0d6; } .al-line.plan .al-tag { color: #d9b96a; }
.al-line.act .al-tag { color: #e5896b; } .al-line.observe .al-tag { color: #93c08a; }

/* --- 成本路由 --- */
.cr-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
@media (max-width:620px){ .cr-controls{ grid-template-columns:1fr; } }
.cr-ctrl label { font-size: .88rem; font-weight: 600; display: flex; justify-content: space-between; margin-bottom: 8px; }
.cr-ctrl label b { color: var(--coral-deep); font-variant-numeric: tabular-nums; }
.cr-bars { display: grid; gap: 12px; }
.cr-row { display: grid; grid-template-columns: 12em 1fr 6.5em; gap: 14px; align-items: center; }
@media (max-width:620px){ .cr-row{ grid-template-columns: 1fr; gap:4px; } }
.cr-row.routed .cr-k { color: var(--ink); font-weight: 700; }
.cr-k { font-size: .9rem; font-weight: 600; }
.cr-k .cr-q { display: block; font-weight: 400; font-size: .74rem; color: var(--ink-3); }
.cr-track { height: 22px; background: var(--paper-sink); border-radius: 8px; overflow: hidden; }
.cr-track > span { display: block; height: 100%; border-radius: 8px; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.cr-row.routed .cr-track { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 10px; }
.cr-cost { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-cost span { display: block; font-size: .68rem; font-weight: 400; color: var(--ink-faint); }
.cr-note { margin-top: 20px; padding: 14px 16px; background: #fff8ef; border: 1px solid var(--line); border-radius: 12px; font-size: .95rem; }

/* --- Token 计费 --- */
.bill-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width:720px){ .bill-wrap{ grid-template-columns:1fr; } }
.bill-meter-card { padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper-card); }
.bill-meter-card h5 { margin: 0 0 4px; font-size: .95rem; }
.bill-meter-card .bm-sub { font-size: .78rem; color: var(--ink-3); margin-bottom: 14px; }
.bill-big { font-family: var(--serif); font-size: 2.4rem; font-weight: 700; color: var(--coral-deep); line-height: 1; }
.bill-sub { height: 16px; margin-top: 12px; }
.bill-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.bill-log { height: 150px; overflow-y: auto; font-size: .84rem; display: grid; gap: 6px; align-content: start; }
.bl-line { padding: 8px 10px; border-radius: 8px; background: var(--paper-2); border-left: 3px solid var(--line-2); }
.bl-line.img { border-color: var(--coral); } .bl-line.api { border-color: var(--dusty); }
.bl-line.warn { border-color: var(--gold); background: #fbf3df; font-weight: 600; }

/* --- 模块 hero 横幅（竖图裁成宽幅） --- */
.mod-hero { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); margin: 0 0 clamp(28px,4vw,44px); max-height: 300px; position: relative; }
.mod-hero img { width: 100%; height: 300px; object-fit: cover; object-position: center 26%; display: block; }
.mod-hero .mh-cap { position: absolute; left: 18px; bottom: 14px; color: #fff; font-size: .9rem; font-weight: 600; text-shadow: 0 2px 12px #2a2620aa; background: linear-gradient(0deg,#2a262055,transparent); padding: 8px 12px; border-radius: 10px; }

/* --- 概念相册 --- */
.concept-gallery { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
@media (max-width: 860px){ .concept-gallery { grid-template-columns: repeat(2,1fr); } }
.concept-gallery figure { margin: 0; }
.concept-gallery .cg-img { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); aspect-ratio: 1/1; background: var(--paper-2); }
.concept-gallery .cg-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.concept-gallery figure:hover .cg-img img { transform: scale(1.05); }
.concept-gallery figcaption { border: none; padding: 0; margin-top: .5em; text-align: center; font-size: .82rem; }
.concept-gallery figcaption b { display: block; color: var(--ink); font-size: .9rem; }

/* ============================================================================
   渐进披露卡（reveal tile）：默认「大字 + 图」，悬停 / 点触浮出细节
   —— 多图少字、字大、但信息不丢（细节留在 DOM，按需显示）
   ========================================================================== */
.rtiles { display: grid; gap: clamp(12px, 1.6vw, 18px); }
.rtiles.c2 { grid-template-columns: repeat(2, 1fr); }
.rtiles.c3 { grid-template-columns: repeat(3, 1fr); }
.rtiles.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .rtiles.c3, .rtiles.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .rtiles.c2, .rtiles.c3, .rtiles.c4 { grid-template-columns: 1fr; } }

.rtile {
  position: relative; overflow: hidden; border-radius: 18px;
  border: 1px solid var(--line); background: var(--paper-sink);
  min-height: clamp(240px, 40vh, 340px); cursor: pointer; text-align: left;
  font: inherit; color: inherit; display: block; width: 100%; padding: 0;
  box-shadow: var(--shadow-sm);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s;
  -webkit-tap-highlight-color: transparent;
}
.rtile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--coral); }
.rtile .rt-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s ease; }
.rtile:hover .rt-img { transform: scale(1.05); }
.rtile .rt-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(175deg, #2a262000 28%, #2a2620ee); }
.rtile .rt-face { position: relative; z-index: 2; height: 100%; min-height: inherit; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 2vw, 26px); color: #fff; gap: .1em; }
.rtile .rt-ico { font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: 1; filter: drop-shadow(0 2px 8px #0007); }
.rtile .rt-title { color: #fff; font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem, 1.9vw, 1.7rem); letter-spacing: -.01em; line-height: 1.25; margin: .3em 0 .1em; text-shadow: 0 2px 16px #000b; }
.rtile .rt-more { display: inline-flex; align-items: center; gap: .35em; font-size: .82rem; font-weight: 600; opacity: .92; color: #fff; }
.rtile .rt-more::after { content: "›"; transition: transform .2s; font-size: 1.1em; }
.rtile:hover .rt-more::after { transform: translateX(4px); }
.rtile .rt-detail {
  position: absolute; inset: 0; z-index: 3; padding: clamp(20px, 2.2vw, 30px);
  background: linear-gradient(158deg, var(--coral-deep), #a5401f);
  color: #fff; display: flex; flex-direction: column; justify-content: center; gap: .55em;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.rtile:hover .rt-detail, .rtile:focus-visible .rt-detail, .rtile.open .rt-detail { opacity: 1; transform: none; }
.rtile .rt-detail .rd-cap { font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.rtile .rt-detail p { margin: 0; font-size: clamp(.98rem, 1.15vw, 1.1rem); line-height: 1.72; }
.rtile .rt-detail strong, .rtile .rt-detail mark { color: #fff; background: none; }
.rtile .rt-detail mark { box-shadow: inset 0 -.55em 0 #ffffff30; padding: 0 .05em; }

/* 无图版渐进披露卡：暖底 + 大图标 + 大标题，悬停浮细节（卡片 grid 用，省出图） */
.rtile.plain { background: linear-gradient(158deg, #fff8ef, var(--paper-sink)); border-color: var(--line-2); }
.rtile.plain .rt-face { color: var(--ink); justify-content: flex-start; }
.rtile.plain .rt-ico { filter: none; margin-bottom: .1em; }
.rtile.plain .rt-title { color: var(--ink); text-shadow: none; }
.rtile.plain .rt-more { color: var(--coral-deep); opacity: .85; }
.rtile.plain .rt-peek { position: relative; z-index: 2; margin-top: auto; padding: 0 clamp(18px,2vw,26px) clamp(16px,2vw,22px); color: var(--ink-3); font-size: .9rem; line-height: 1.65; }
.rtile.plain .rt-detail { background: linear-gradient(158deg, var(--ink), #1c1915); }

/* 大字陈述 + 悬停副文（用于「一句话」类屏） */
.statement-big { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; line-height: 1.32; font-size: clamp(1.7rem, 3.4vw, 2.9rem); color: var(--ink); }
.statement-big mark { background: linear-gradient(180deg, transparent 52%, var(--coral-soft) 52%); padding: 0 .08em; }

/* --- 需求→工作流：以图搜图 pipeline 交互 --- */
.if-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
@media (max-width: 620px){ .if-steps { grid-template-columns: repeat(2, 1fr); } }
.if-step { font: inherit; text-align: left; cursor: pointer; border: 1px solid var(--line-2); background: var(--paper-card); border-radius: 12px; padding: 10px 12px; font-weight: 700; font-size: .9rem; transition: .16s; color: var(--ink); }
.if-step small { display: block; font-weight: 400; font-size: .74rem; color: var(--ink-3); margin-top: 2px; }
.if-step:hover { border-color: var(--coral); }
.if-step.on { background: var(--coral); color: #fff; border-color: var(--coral); }
.if-step.on small { color: #ffffffcc; }
.if-stage { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: center; }
@media (max-width: 760px){ .if-stage { grid-template-columns: 1fr; } }
.if-visual { min-height: 190px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; align-items: center; justify-content: center; }
.if-detail b { display: block; margin-bottom: .3em; font-size: 1.02rem; color: var(--ink); }
.if-detail p { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.7; }
.ifm-flow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ifm-arrow { color: var(--coral); font-weight: 700; font-size: 1.15rem; }
.ifm-thumb { width: 62px; height: 62px; border-radius: 10px; background-size: cover; background-position: center; border: 1px solid var(--line-2); flex: none; }
.ifm-prompt { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; max-width: 175px; }
.ifm-prompt.sm { max-width: 120px; }
.ifm-prompt b { font-size: .78rem; color: var(--coral-deep); }
.ifm-prompt span { display: block; font-size: .72rem; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.ifm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ifm-rank { position: relative; }
.ifm-score { position: absolute; right: 3px; bottom: 3px; background: #2a2620cc; color: #fff; font-size: .64rem; font-weight: 700; padding: 1px 5px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.ifm-grid.ranked .ifm-rank:first-child .ifm-thumb { border-color: var(--coral); box-shadow: 0 0 0 2px var(--coral-soft); }
.ifm-best { position: relative; }
.ifm-badge { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); white-space: nowrap; background: var(--coral); color: #fff; font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; }
.ifm-regen { text-align: center; color: var(--ink-2); }
.ifm-regen span { font-size: 1.5rem; display: block; color: var(--coral); line-height: 1.2; }
.ifm-regen b { font-size: .82rem; }

/* --- 模型全景 taxonomy --- */
.tx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tx-chip { font: inherit; font-size: .84rem; font-weight: 600; padding: .5em 1em; border-radius: 99px; border: 1px solid var(--line-2); background: var(--paper-card); cursor: pointer; transition: .16s; }
.tx-chip:hover { border-color: var(--coral); }
.tx-chip.on { background: var(--coral); color: #fff; border-color: var(--coral); }
.tx-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width:860px){ .tx-cards{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .tx-cards{ grid-template-columns: 1fr;} }
.tx-card { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper-card); transition: .25s; }
.tx-card.dim { opacity: .32; filter: grayscale(.4); }
.tx-card.hit { border-color: var(--coral); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tx-card .txi { font-size: 1.6rem; }
.tx-card h5 { margin: .3em 0 .1em; font-size: 1rem; }
.tx-card .txe { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.tx-card p { margin: .5em 0 0; font-size: .84rem; color: var(--ink-2); }
.tx-card .txm { margin-top: .6em; font-size: .78rem; color: var(--coral-deep); font-weight: 600; }

/* --- 新增轻量课堂互动 --- */
.pick-grid,
.source-grid,
.oss-grid,
.action-grid { display: grid; gap: 10px; }
.pick-grid { grid-template-columns: repeat(2, 1fr); }
.source-grid { grid-template-columns: repeat(4, 1fr); }
.oss-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
  .pick-grid, .source-grid, .oss-grid { grid-template-columns: 1fr; }
}

.pick-card,
.source-card,
.oss-card,
.choice-btn {
  border: 1px solid var(--line-2);
  background: var(--paper-card);
  color: var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: .16s;
}
.pick-card:hover,
.source-card:hover,
.oss-card:hover,
.choice-btn:hover { border-color: var(--coral); transform: translateY(-1px); }
.pick-card.sel,
.source-card.sel,
.oss-card.sel,
.choice-btn.good { border-color: var(--coral); background: #fff8ef; box-shadow: var(--shadow-sm); }
.choice-btn.bad { border-color: #b44; background: #fff0ec; }

.pick-answer,
.risk-feedback,
.source-feedback,
.oss-feedback {
  margin-top: 14px;
  border: 1px dashed var(--line-2);
  background: var(--paper-2);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--ink-2);
}
.pick-answer b,
.source-feedback b,
.oss-feedback b { color: var(--coral-deep); display: block; margin-bottom: 4px; }
.pick-answer p,
.source-feedback p,
.oss-feedback p { margin: 0; }

.risk-scenario {
  padding: 14px 16px;
  border-radius: 12px;
  background: #211d18;
  color: #f4ecdd;
  font-weight: 700;
  margin-bottom: 12px;
}
.risk-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 720px) { .risk-options { grid-template-columns: 1fr; } }

.source-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.source-steps span {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
}
.source-steps b { color: var(--coral); }

.oss-card b { display: block; color: var(--ink); margin-bottom: 5px; }
.oss-card span { display: block; color: var(--ink-3); font-size: .82rem; line-height: 1.45; font-weight: 500; }

.learn-input-row { display: flex; gap: 10px; flex-wrap: wrap; }
.learn-topic {
  flex: 1 1 220px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: .65em 1em;
  font: inherit;
  background: var(--paper-card);
  color: var(--ink);
}
.learn-plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
@media (max-width: 780px) { .learn-plan { grid-template-columns: 1fr; } }
.learn-day {
  border: 1px solid var(--line);
  background: var(--paper-card);
  border-radius: 12px;
  padding: 14px;
}
.learn-day b { display: block; color: var(--coral-deep); margin-bottom: 6px; }
.learn-day span { color: var(--ink-2); font-size: .92rem; line-height: 1.55; }

.mini-lab .lab-body { padding: 18px; }
.action-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 680px) { .action-grid { grid-template-columns: 1fr; } }
.action-grid label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-card);
  cursor: pointer;
  font-size: .92rem;
}
.action-grid input { accent-color: var(--coral); }
.action-feedback {
  margin-top: 12px;
  color: var(--coral-deep);
  font-weight: 700;
}

/* --- Deck 改版补充：封面、钩子、工作流与紧凑卡 --- */
.cover-wrap {
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}
.cover-copy h1 { font-size: clamp(2.4rem, 6vw, 4.8rem); margin: .12em 0 .2em; }
.cover-media { max-height: min(62vh, 560px); }
.cover-media video { width: 100%; height: min(62vh, 560px); object-fit: cover; display: block; }
@media (max-width: 860px) { .cover-wrap { grid-template-columns: 1fr; } .cover-media video { height: min(42vh, 420px); } }

.route-chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.route-chain span {
  border: 1px solid var(--line);
  background: var(--paper-card);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 700;
  font-size: .9rem;
}
.route-chain b { color: var(--coral); }
.route-chain.big span { font-size: 1rem; padding: 9px 14px; }

.next-hook {
  margin-top: clamp(14px, 2vw, 22px);
  padding: .9em 1.1em;
  border-left: 4px solid var(--coral);
  background: linear-gradient(90deg, var(--coral-soft), transparent);
  border-radius: 0 12px 12px 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.45;
  color: var(--ink);
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.mini-stats div {
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-card);
}
.mini-stats b {
  display: block;
  color: var(--coral-deep);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.05;
}
.mini-stats span {
  display: block;
  color: var(--ink-3);
  font-size: .82rem;
  margin-top: 6px;
  line-height: 1.45;
}
@media (max-width: 760px) { .mini-stats { grid-template-columns: 1fr; } }

.account-example {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: #fff8ef;
}
.account-example b {
  display: block;
  color: var(--coral-deep);
  margin-bottom: 4px;
}
.account-example span {
  color: var(--ink-2);
  line-height: 1.65;
}

.tight-tiles .rtile { min-height: clamp(190px, 30vh, 260px); }
.mini-rtiles .rtile { min-height: clamp(160px, 24vh, 210px); }

.workflow-board {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
  margin: 22px 0;
}
.wf-node {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-card);
  padding: 18px;
  min-height: 142px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wf-node b {
  color: var(--coral-deep);
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.wf-node span {
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.55;
}
.wf-arrow {
  align-self: center;
  color: var(--coral);
  font-weight: 800;
  font-size: 1.3rem;
}
@media (max-width: 900px) {
  .workflow-board { grid-template-columns: 1fr; }
  .wf-arrow { transform: rotate(90deg); justify-self: center; }
}

.pipe-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.pipe-step {
  border: 1px solid var(--line-2);
  background: var(--paper-card);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: .16s;
}
.pipe-step:hover { border-color: var(--coral); transform: translateY(-1px); }
.pipe-step.on { background: var(--coral); border-color: var(--coral); color: #fff; }
.pipe-panel {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 18px;
  align-items: center;
}
.pipe-panel .figuromo video { width: 100%; height: 260px; object-fit: cover; display: block; }
.pipe-detail {
  border: 1px dashed var(--line-2);
  background: var(--paper-2);
  border-radius: 14px;
  padding: 18px 20px;
  color: var(--ink-2);
  min-height: 150px;
}
.pipe-detail b {
  display: block;
  color: var(--coral-deep);
  margin-bottom: 7px;
  font-size: 1.15rem;
}
.pipe-detail p { margin: 0; line-height: 1.7; }
@media (max-width: 780px) {
  .pipe-steps { grid-template-columns: repeat(2, 1fr); }
  .pipe-panel { grid-template-columns: 1fr; }
  .pipe-panel .figuromo video { height: 210px; }
}

.closing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 22px 0;
}
.closing-grid div {
  border: 1px solid var(--line);
  background: var(--paper-card);
  border-radius: 14px;
  padding: 16px;
}
.closing-grid b {
  display: block;
  color: var(--coral-deep);
  margin-bottom: 6px;
}
.closing-grid span {
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.55;
}
.sources-mini {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.sources-mini a {
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--paper-card);
  border-radius: 999px;
  padding: 8px 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.sources-mini a:hover {
  border-color: var(--coral);
  color: var(--coral-deep);
}
@media (max-width: 860px) { .closing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .closing-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   2026-07 论证式对外 AI 培训 deck rebuild
   仅作用于 body.rebuild；插画是证据题图，数据一律代码画。
   ========================================================================== */
body.rebuild #track,
body.rebuild #track * {
  word-break: keep-all;
  overflow-wrap: break-word;
}

body.rebuild .slide > .wrap {
  max-width: 1180px;
}

body.rebuild .lede {
  max-width: 58ch;
}

body.rebuild .deck-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--coral-deep);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

body.rebuild .deck-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--coral);
  border-radius: 99px;
}

body.rebuild .slide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
}

body.rebuild .slide-grid.wide-left {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
}

body.rebuild .slide-grid.wide-right {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}

body.rebuild .stack {
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
}

body.rebuild .stack.tight {
  gap: 10px;
}

body.rebuild .art-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--coral);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaf2, var(--paper-card));
  min-height: clamp(230px, 42vh, 420px);
  box-shadow: var(--shadow-md);
  display: grid;
  align-content: stretch;
}

body.rebuild .art-card.small {
  min-height: clamp(160px, 28vh, 260px);
}

body.rebuild .art-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  display: block;
}

body.rebuild .art-card.contain img {
  object-fit: contain;
  padding: 14px;
  background: var(--paper-card);
}

body.rebuild .art-card figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-card) 88%, transparent);
  color: var(--ink-2);
  padding: 6px 11px;
  font-size: .78rem;
  backdrop-filter: blur(8px);
}

body.rebuild .art-fallback {
  display: none;
  padding: 22px;
  min-height: inherit;
  align-content: center;
}

body.rebuild .missing-art img,
body.rebuild .missing-art figcaption {
  display: none;
}

body.rebuild .missing-art .art-fallback {
  display: grid;
}

body.rebuild .fallback-title {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.25;
  color: var(--ink);
}

body.rebuild .fallback-lines {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

body.rebuild .fallback-lines span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-card);
  padding: 8px 11px;
  color: var(--ink-2);
  font-weight: 700;
}

body.rebuild .fallback-lines b {
  color: var(--coral-deep);
}

body.rebuild .code-panel,
body.rebuild .argument-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-card);
  padding: clamp(16px, 2vw, 24px);
  box-shadow: var(--shadow-sm);
}

body.rebuild .argument-card.accent {
  border-color: var(--coral);
  background: linear-gradient(180deg, #fff8ef, var(--paper-card));
}

body.rebuild .argument-card.dark {
  background: linear-gradient(160deg, #2b261f, #1e1a16);
  border-color: #3a3128;
  color: #f4ecdd;
}

body.rebuild .argument-card.dark p,
body.rebuild .argument-card.dark span,
body.rebuild .argument-card.dark strong {
  color: #f4ecdd;
}

body.rebuild .code-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.rebuild .code-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.rebuild .code-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.rebuild .code-grid .argument-card {
  min-height: 124px;
}

body.rebuild .card-k {
  color: var(--coral-deep);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.rebuild .card-title {
  display: block;
  margin-top: 5px;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  line-height: 1.25;
}

body.rebuild .card-copy {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: .94rem;
  line-height: 1.62;
}

body.rebuild .big-stat {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}

body.rebuild .big-stat .stat-box {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper-card);
  padding: 18px;
  text-align: center;
}

body.rebuild .big-stat .stat-box.em {
  border-color: var(--coral);
  background: #fff8ef;
}

body.rebuild .big-stat .num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 5.2rem);
  font-weight: 700;
  line-height: .95;
  color: var(--coral-deep);
  letter-spacing: 0;
}

body.rebuild .big-stat .vs {
  color: var(--ink-faint);
  font-weight: 900;
  font-size: 1rem;
}

body.rebuild .big-stat small {
  display: block;
  margin-top: 8px;
  color: var(--ink-3);
  font-weight: 700;
}

body.rebuild .map-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.rebuild .map-cell {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-card);
  padding: 16px;
  min-height: 132px;
}

body.rebuild .map-cell.dark {
  background: linear-gradient(160deg, #2c2822, #211d18);
  border-color: #3b342b;
  color: #f4ecdd;
}

body.rebuild .map-cell b {
  display: block;
  color: var(--coral-deep);
  margin-bottom: 5px;
}

body.rebuild .map-cell.dark b,
body.rebuild .map-cell.dark span {
  color: #f4ecdd;
}

body.rebuild .pill-ladder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.rebuild .pill-step {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-card);
  padding: 15px;
}

body.rebuild .pill-step b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 32px;
  border-radius: 999px;
  background: var(--coral-soft);
  color: var(--coral-deep);
  margin-bottom: 8px;
}

/* §3: cred-row */
body.rebuild .cred-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.rebuild .cred-card {
  position: relative;
  min-height: 250px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-rows: 120px 1fr;
}

body.rebuild .cred-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}

body.rebuild .cred-card .art-fallback {
  min-height: 120px;
  padding: 14px;
  background: #fff8ef;
  border-bottom: 1px solid var(--line);
}

body.rebuild .cred-body {
  padding: 14px;
}

body.rebuild .cred-body b {
  display: block;
  color: var(--ink);
  font-size: 1.02rem;
}

body.rebuild .cred-body .num {
  display: block;
  margin: 8px 0 4px;
  color: var(--coral-deep);
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

body.rebuild .cred-body span {
  color: var(--ink-2);
  font-size: .86rem;
  line-height: 1.45;
}

/* §3: harness-bars */
body.rebuild .harness-bars {
  display: grid;
  gap: 20px;
}

body.rebuild .hb-row {
  display: grid;
  grid-template-columns: 11em 1fr 6em;
  gap: 14px;
  align-items: center;
}

body.rebuild .hb-label {
  font-weight: 800;
  color: var(--ink);
}

body.rebuild .hb-track {
  position: relative;
  height: 38px;
  border-radius: 999px;
  background: var(--paper-sink);
  overflow: hidden;
}

body.rebuild .hb-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coral), var(--gold));
}

body.rebuild .hb-track .base {
  position: absolute;
  inset-block: 0;
  left: 0;
  background: color-mix(in srgb, var(--dusty) 78%, white);
}

body.rebuild .hb-value {
  text-align: right;
  color: var(--coral-deep);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 800;
}

body.rebuild .hb-note {
  color: var(--ink-3);
  font-size: .88rem;
}

/* §3: cost-ladder */
body.rebuild .cost-ladder {
  display: grid;
  gap: 9px;
}

body.rebuild .cost-tier {
  display: grid;
  grid-template-columns: 8.5em 1fr 6em;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-card);
  padding: 10px 12px;
}

body.rebuild .cost-tier b {
  color: var(--ink);
}

body.rebuild .cost-tier .bar {
  height: 14px;
  border-radius: 999px;
  background: var(--paper-sink);
  overflow: hidden;
}

body.rebuild .cost-tier .bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sage), var(--coral));
}

body.rebuild .cost-tier .num {
  color: var(--coral-deep);
  font-weight: 800;
  text-align: right;
}

/* §3: license-cards */
body.rebuild .license-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.rebuild .license-card {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-card);
  padding: 16px;
}

body.rebuild .license-card::before {
  content: "";
  position: absolute;
  inset: auto -20px -34px auto;
  width: 92px;
  height: 92px;
  border-radius: 24px;
  rotate: 14deg;
  background: var(--coral-soft);
}

body.rebuild .license-card.apache::before {
  background: #6b84a02a;
}

body.rebuild .license-card.gpl::before {
  background: #d9a44133;
}

body.rebuild .license-card.none::before {
  background: #2a262018;
}

body.rebuild .license-card b {
  display: block;
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--ink);
}

body.rebuild .license-card .tagline {
  display: inline-flex;
  margin: 8px 0 12px;
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--coral-soft);
  color: var(--coral-deep);
  font-weight: 800;
  font-size: .76rem;
}

body.rebuild .license-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.56;
}

/* §3: stat-wall */
body.rebuild .stat-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.rebuild .stat-wall .wall-item {
  position: relative;
  min-height: 160px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-card);
  padding: 17px;
  overflow: hidden;
}

body.rebuild .stat-wall .wall-item.primary {
  grid-column: span 2;
  background: linear-gradient(160deg, #fff8ef, var(--paper-card));
  border-color: var(--coral);
}

body.rebuild .stat-wall .wall-num {
  display: block;
  color: var(--coral-deep);
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.9rem);
  line-height: .92;
  font-weight: 800;
}

body.rebuild .stat-wall p {
  margin: 9px 0 0;
  color: var(--ink-2);
  line-height: 1.55;
}

body.rebuild .stat-wall .src {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: var(--ink-faint);
  font-size: .72rem;
  font-weight: 800;
}

/* §3: versus-table */
body.rebuild .versus-table {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper-card);
  box-shadow: var(--shadow-sm);
}

body.rebuild .versus-row {
  display: grid;
  grid-template-columns: 9em 1fr 1fr;
}

body.rebuild .versus-row + .versus-row {
  border-top: 1px solid var(--line);
}

body.rebuild .versus-row > div {
  padding: 16px;
  border-left: 1px solid var(--line);
}

body.rebuild .versus-row > div:first-child {
  border-left: none;
  background: var(--paper-sink);
  font-weight: 900;
  color: var(--ink);
}

body.rebuild .versus-row.head > div {
  background: #2b261f;
  color: #f4ecdd;
  font-weight: 900;
}

body.rebuild .versus-row .good {
  background: #fff8ef;
}

body.rebuild .versus-row b {
  color: var(--coral-deep);
}

/* §3: why-now */
body.rebuild .why-now {
  display: grid;
  gap: 12px;
  position: relative;
}

body.rebuild .why-now::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--line-2);
}

body.rebuild .why-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
}

body.rebuild .why-dot {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

body.rebuild .why-copy {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-card);
  padding: 13px 15px;
}

body.rebuild .why-copy b {
  display: block;
  color: var(--ink);
}

body.rebuild .why-copy span {
  color: var(--ink-2);
  font-size: .9rem;
}

body.rebuild .ratio-table {
  display: grid;
  gap: 10px;
}

body.rebuild .ratio-row {
  display: grid;
  grid-template-columns: 8em 1fr 5em;
  align-items: center;
  gap: 12px;
}

body.rebuild .ratio-row .ratio-bar {
  display: grid;
  grid-template-columns: var(--reuse, 50%) 1fr;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper-sink);
}

body.rebuild .ratio-row .ratio-bar span:first-child {
  background: var(--dusty);
}

body.rebuild .ratio-row .ratio-bar span:last-child {
  background: var(--coral);
}

body.rebuild .ratio-row b,
body.rebuild .ratio-row .num {
  font-weight: 900;
}

body.rebuild .compact-table table.data {
  font-size: .78rem;
  min-width: 0;
}

body.rebuild .compact-table table.data th,
body.rebuild .compact-table table.data td {
  padding: .55em .65em;
}

body.rebuild .split-lab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

body.rebuild .mini-lab .lab-head {
  padding: 10px 13px;
}

body.rebuild .mini-lab .lab-body {
  padding: 14px;
}

body.rebuild .mini-lab .pick-card,
body.rebuild .mini-lab .source-card,
body.rebuild .mini-lab .oss-card,
body.rebuild .mini-lab .choice-btn {
  padding: 9px 11px;
  font-size: .86rem;
}

body.rebuild .mini-lab .pick-answer,
body.rebuild .mini-lab .source-feedback,
body.rebuild .mini-lab .oss-feedback {
  padding: 10px 12px;
}

body.rebuild .mini-lab .learn-plan {
  grid-template-columns: repeat(3, 1fr);
}

body.rebuild .df-stage.rebuild-inline {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
}

body.rebuild .df-stage.rebuild-inline canvas {
  width: 180px;
}

body.rebuild .df-stage.rebuild-inline .df-controls h3 {
  margin: 0 0 6px;
}

body.rebuild .df-stage.rebuild-inline .df-controls p {
  margin: 0 0 8px;
  color: var(--ink-2);
  font-size: .9rem;
}

body.rebuild .rebuild-note {
  color: var(--ink-3);
  font-size: .84rem;
  line-height: 1.5;
}

body.rebuild .al-log,
body.rebuild .bill-log,
body.rebuild .rtile .rt-detail {
  overflow-y: hidden;
}

body.rebuild .rtile .rt-img {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: 120px;
  background-size: cover;
  background-position: center;
}

body.rebuild .rtile .rt-img::after {
  display: none;
}

body.rebuild .rtile .rt-face {
  color: var(--ink);
  text-shadow: none;
}

body.rebuild .rtile .rt-title,
body.rebuild .rtile .rt-more {
  color: var(--ink);
  text-shadow: none;
}

@media (max-width: 900px) {
  body.rebuild .slide-grid,
  body.rebuild .slide-grid.wide-left,
  body.rebuild .slide-grid.wide-right,
  body.rebuild .split-lab {
    grid-template-columns: 1fr;
  }
  body.rebuild .code-grid,
  body.rebuild .code-grid.cols-3,
  body.rebuild .code-grid.cols-2,
  body.rebuild .cred-row,
  body.rebuild .license-cards,
  body.rebuild .stat-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.rebuild .stat-wall .wall-item.primary {
    grid-column: span 1;
  }
}

@media (max-width: 620px) {
  body.rebuild .code-grid,
  body.rebuild .code-grid.cols-3,
  body.rebuild .code-grid.cols-2,
  body.rebuild .cred-row,
  body.rebuild .license-cards,
  body.rebuild .stat-wall,
  body.rebuild .pill-ladder,
  body.rebuild .mini-lab .learn-plan {
    grid-template-columns: 1fr;
  }
  body.rebuild .big-stat,
  body.rebuild .hb-row,
  body.rebuild .cost-tier,
  body.rebuild .versus-row,
  body.rebuild .ratio-row {
    grid-template-columns: 1fr;
  }
  body.rebuild .versus-row > div {
    border-left: none;
    border-top: 1px solid var(--line);
  }
  body.rebuild .versus-row > div:first-child {
    border-top: none;
  }
}