/* 2026-10-08补充页：关系与真实输入决定版式；不向第一课加入前端知识。 */
.sp { display: grid; gap: 24px; align-content: start; }
.sp .head { max-width: 960px; }
.sp .head .lede { max-width: 44em; }
.sp .prompt { align-self: start; }
.sp .prompt textarea { font-size: .89rem; line-height: 1.65; }
.sp h2 { font-size: 1.28rem; line-height: 1.4; }
.sp p, .sp dt, .sp dd { overflow-wrap: anywhere; }
.sp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 44px; align-items: start; }
.sp-split > div > .prompt { margin-top: 24px; }
.sp-split > div > .head + * { margin-top: 26px; }
.sp-footer { grid-column: 1 / -1; padding-top: 6px; border-top: 1px solid var(--line); }
.t-ink .sp-footer { border-color: var(--line-ink); }
.sp-footer .src { margin-top: 10px; }
.sp-status { display: flex; align-items: baseline; gap: 12px; font-size: .78rem; line-height: 1.6; color: var(--muted); }
.sp-status b { font-weight: 600; color: var(--text-2); white-space: nowrap; }
.t-ink .sp-status, .t-ink .sp-small, .t-ink .sp-note { color: var(--on-ink-muted); }
.t-ink .sp-status b { color: var(--on-ink-2); }
.sp-small { font-size: .78rem; line-height: 1.5; color: var(--muted); }
.sp-note { margin-top: 16px; font-size: .85rem; line-height: 1.65; color: var(--muted); }
.sp-rows { display: grid; }
.sp-rows > div { display: grid; grid-template-columns: 135px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.sp-rows dt { font-weight: 600; font-size: .94rem; }
.sp-rows dd { font-size: .9rem; line-height: 1.7; color: var(--text-2); }
.t-ink .sp-rows > div { border-color: var(--line-ink); }
.t-ink .sp-rows dd { color: var(--on-ink-2); }
.sp-steps { display: grid; counter-reset: sp-step; }
.sp-steps li { position: relative; counter-increment: sp-step; padding: 17px 0 17px 44px; border-top: 1px solid var(--line); }
.sp-steps li::before { content: counter(sp-step, decimal-leading-zero); position: absolute; left: 0; top: 20px; color: var(--muted); font: .8rem/1 var(--mono); }
.sp-steps b { font-size: 1.02rem; }
.sp-steps p { margin-top: 5px; color: var(--text-2); font-size: .9rem; line-height: 1.7; }
.t-ink .sp-steps li { border-color: var(--line-ink); }
.t-ink .sp-steps p { color: var(--on-ink-2); }
.sp-focus-map { display: grid; gap: 18px; padding-top: 24px; }
.sp-goal, .sp-result { display: grid; gap: 6px; padding: 26px; border: 1px solid var(--line-2); }
.sp-goal b { font-size: 1.45rem; }
.sp-goal span, .sp-result span { font-size: .88rem; color: var(--text-2); }
.sp-new { justify-self: end; display: flex; flex-direction: column; gap: 4px; width: 72%; padding: 20px; background: var(--mark); color: var(--ink); }
.sp-new span { font-size: .85rem; }
.sp-new b { font-size: 1.2rem; }
.sp-arrow { text-align: center; font-size: .88rem; }
.sp-focus-map .btn { justify-self: start; margin-top: 4px; }
.sp-result { border-width: 0 0 0 3px; background: rgba(18, 18, 20, .04); }
.sp-result b { font-size: 1.3rem; }
.sp-merge { display: grid; grid-template-columns: .65fr 1.35fr; gap: 40px; }
.sp-stack { display: grid; gap: 0; align-content: start; border-top: 1px solid var(--line-ink); }
.sp-stack p { display: flex; gap: 15px; padding: 25px 0; border-bottom: 1px solid var(--line-ink); font-size: 1.16rem; }
.sp-stack b { color: var(--mark); font: .82rem/1.8 var(--mono); }
.sp-compare { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-2); }
.sp-compare > div { padding: 22px 28px 22px 0; }
.sp-compare > div + div { border-left: 1px solid var(--line-2); padding-left: 28px; }
.sp-compare span { font-size: .78rem; color: var(--muted); }
.sp-compare blockquote { margin: 15px 0; font-size: 1.3rem; line-height: 1.65; }
.sp-compare h2 { margin: 14px 0 10px; }
.sp-compare p { font-size: .9rem; color: var(--text-2); }
.sp-rule-sheet { padding: 30px; border: 1px solid var(--line-2); }
.sp-rule-sheet .sp-fuzzy { text-align: center; margin: 32px 0 18px; font-size: 1.5rem; color: var(--muted); }
.sp-rule-sheet blockquote { font-size: 1.28rem; line-height: 1.8; margin: 22px 0 30px; }
.sp-two-sides { display: grid; grid-template-columns: 1fr .65fr 1fr; border-block: 1px solid var(--line-ink-2); }
.sp-two-sides > div { padding: 22px 28px; }
.sp-two-sides > div:first-child { padding-left: 0; }
.sp-two-sides > div:last-child { padding-right: 0; }
.sp-two-sides p { margin-top: 10px; font-size: .92rem; line-height: 1.8; color: var(--on-ink-2); }
.sp-assumption { border-inline: 1px solid var(--line-ink-2); }
.sp-assumption b { color: var(--mark); }
.sp-memory-bottom { display: grid; grid-template-columns: .8fr 1.2fr; gap: 36px; align-items: start; }
.sp-memory-bottom > blockquote { padding-left: 20px; border-left: 3px solid var(--mark); font-size: 1.13rem; line-height: 1.9; }
.sp-big-question { font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.7; max-width: 40em; padding: 0 0 0 26px; border-left: 4px solid var(--mark); }
.sp-hidden .prompt { max-width: 1000px; }
.sp-task-card { padding: 28px; background: rgba(18, 18, 20, .04); border-top: 3px solid var(--mark); }
.sp-task-card h2 { margin: 24px 0 20px; font-size: 1.5rem; line-height: 1.7; }
.sp-task-card > p:not(.sp-small):not(.sp-note) { margin-bottom: 24px; color: var(--text-2); font-size: .96rem; }
.sp-calendar { border-top: 1px solid var(--line-2); }
.sp-calendar > p:first-child { padding: 12px 0; }
.sp-calendar > p:not(:first-child) { display: flex; flex-direction: column; gap: 5px; padding: 18px 0; border-top: 1px solid var(--line); }
.sp-calendar b { font-size: 1.07rem; }
.sp-calendar span { font-size: .9rem; color: var(--text-2); }
.sp-three-stages { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--line-2); }
.sp-three-stages > div { padding: 22px 25px 0 0; }
.sp-three-stages > div + div { padding-left: 25px; border-left: 1px solid var(--line); }
.sp-three-stages b { font-size: 1.08rem; }
.sp-three-stages p { margin-top: 12px; font-size: .9rem; color: var(--text-2); }
.sp-boundary { display: grid; grid-template-columns: .85fr 1.15fr; gap: 14px 34px; padding-top: 20px; border-top: 1px solid var(--line); }
.sp-boundary > p { font-size: .9rem; color: var(--text-2); }
.sp-boundary > blockquote { grid-column: 1 / -1; padding: 18px 22px; border-left: 3px solid var(--mark); background: rgba(18, 18, 20, .04); font-size: .96rem; }
.sp-key-pair { display: grid; gap: 18px; }
.sp-key-pair > div { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sp-window-note { padding: 25px; border: 1px solid var(--line-2); }
.sp-window-note .sp-steps { margin-top: 15px; }
.sp-lab-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 36px; align-items: start; }
.sp-lab-grid .seg { margin-bottom: 15px; }
.sp-protocol { border-left: 1px solid var(--line); padding-left: 28px; }
.t-ink .sp-protocol { border-color: var(--line-ink); }
.sp-protocol .sp-rows > div { grid-template-columns: 55px minmax(0, 1fr); }
.sp-protocol .btn { margin-top: 20px; }
.sp-mail { display: grid; grid-template-columns: .75fr 1.25fr; gap: 36px; }
.sp-mail > blockquote { font-size: 1.45rem; line-height: 1.9; border-left: 3px solid var(--mark); padding-left: 24px; align-self: start; }
.sp-untried { border-top: 1px solid var(--line-2); padding: 24px 0; max-width: 960px; }
.sp-untried h2 { font-size: 1.5rem; margin: 20px 0 14px; }
.sp-untried > p:not(.sp-small) { max-width: 44em; font-size: .98rem; color: var(--text-2); }
.sp-untried .btn { margin-top: 22px; }
.sp-next-question { display: flex; gap: 30px; border-top: 1px solid var(--line); padding-top: 18px; font-size: .94rem; }
.sp-next-question > b { flex: none; }
.sp-risk-tabs > .seg { margin-bottom: 20px; }
.sp-risk-detail { display: grid; grid-template-columns: .8fr 1.2fr; gap: 14px 28px; padding: 24px 0; border-block: 1px solid var(--line-2); }
.sp-risk-detail > p { font-size: .94rem; color: var(--text-2); }
.sp-risk-detail > blockquote { grid-column: 1 / -1; padding: 16px 22px; border-left: 3px solid var(--mark); font-size: 1.02rem; background: rgba(18, 18, 20, .04); }
/* 投影与桌面先展示概念关系，再在输入框里阅读/编辑完整 Prompt。 */
@media (min-width: 1000px) {
  .sp { gap: 18px; }
  .sp .prompt textarea { height: 160px; }
  .sp-language, .sp-steelman, .sp-quality, #supplement-memory-speed .sp { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 22px 36px; }
  .sp-language > .head, .sp-steelman > .head, .sp-quality > .head, #supplement-memory-speed .sp > .head { grid-column: 1 / -1; }
  .sp-language .sp-compare { grid-template-columns: 1fr; }
  .sp-language .sp-compare > div, .sp-language .sp-compare > div + div { padding: 16px 0; border-left: 0; }
  .sp-language .sp-compare > div + div { border-top: 1px solid var(--line-2); }
  .sp-steelman .sp-two-sides { grid-template-columns: 1fr 1fr; align-self: start; }
  .sp-steelman .sp-two-sides > div { padding: 18px; }
  .sp-steelman .sp-assumption { order: 3; grid-column: 1 / -1; border-inline: 0; border-top: 1px solid var(--line-ink-2); }
  .sp-steelman .sp-two-sides > div:first-child { padding-left: 0; }
  .sp-steelman .sp-two-sides > div:last-child { padding-right: 0; }
  #supplement-memory-speed .sp-memory-bottom { grid-template-columns: 1fr; gap: 20px; }
  .sp-quality .sp-risk-detail { grid-template-columns: 1fr; padding: 18px 0; }
  .sp-quality .sp-risk-detail > blockquote { grid-column: auto; }
  #supplement-hidden-question .prompt textarea, #supplement-canvas .prompt textarea, #supplement-remote .prompt textarea { height: 140px; }
  #supplement-tools-experiment .sp-steps li { padding-block: 12px; }
  #supplement-remote .sp-rows > div { padding-block: 12px; }
}
@media (max-width: 980px) {
  .sp-split { gap: 24px 28px; }
  .sp-rows > div { grid-template-columns: 110px minmax(0, 1fr); }
  .sp-merge, .sp-lab-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .sp-key-pair > div { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .sp { gap: 24px; }
  .sp-split, .sp-merge, .sp-memory-bottom, .sp-lab-grid, .sp-mail, .sp-boundary, .sp-risk-detail { grid-template-columns: 1fr; }
  .sp-split > div > .head + * { margin-top: 22px; }
  .sp-status { flex-direction: column; gap: 3px; }
  .sp-compare, .sp-three-stages { grid-template-columns: 1fr; }
  .sp-compare > div, .sp-compare > div + div, .sp-three-stages > div, .sp-three-stages > div + div { padding: 18px 0; border-left: 0; }
  .sp-compare > div + div, .sp-three-stages > div + div { border-top: 1px solid var(--line); }
  .sp-two-sides { grid-template-columns: 1fr; }
  .sp-two-sides > div, .sp-two-sides > div:first-child, .sp-two-sides > div:last-child { padding: 18px 0; }
  .sp-assumption { border-inline: 0; border-block: 1px solid var(--line-ink); }
  .sp-protocol { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }
  .sp-rule-sheet, .sp-task-card, .sp-window-note { padding: 22px; }
  .sp-focus-map { padding-top: 0; }
  .sp-new { width: 86%; }
  .sp-rows > div { grid-template-columns: 1fr; gap: 5px; padding: 14px 0; }
  .sp-protocol .sp-rows > div { grid-template-columns: 55px minmax(0, 1fr); }
  .sp-next-question { flex-direction: column; gap: 8px; }
  .sp-big-question { padding-left: 18px; }
  .sp .prompt-label { flex-wrap: wrap; }
}