.scenario-context { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 22px; border-top: 1px solid #b8c4ca; margin-top: 20px; padding-top: 18px; }
.scenario-context strong { display: block; color: var(--ink); font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.scenario-context span { display: block; font-size: 14.5px; line-height: 1.68; color: var(--body); }
.context-samples { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.trace-value { min-height: 46px; background: #ffffff; border: 1.5px solid #8ea3af; border-radius: 6px; color: var(--ink); padding: 13px 16px; display: grid; grid-template-columns: 1fr 18px; gap: 8px 12px; text-align: left; transition: background .15s, border-color .15s, box-shadow .15s; }
.trace-value:hover { border-color: var(--green); background: var(--soft-green); }
.trace-value-label { font-size: 13px; font-weight: 500; color: var(--body); grid-column: 1 / -1; line-height: 1.45; }
.trace-value-number { font: 500 30px/1.18 var(--serif); color: var(--green); letter-spacing: -.4px; }
.trace-value-number small { font: 500 13px var(--sans); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.trace-value-arrow { font: 600 16px var(--sans); color: var(--green); align-self: center; text-align: right; }
.context-samples .trace-value { display: flex; align-items: center; gap: 10px; padding: 8px 14px; min-height: 38px; }
.context-samples .trace-value-number { font: 600 14px var(--sans); color: var(--green); letter-spacing: 0; }.context-samples .trace-value-number small { font-size: 12.5px; }
.context-samples .trace-value-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.context-samples .trace-value-arrow { font-size: 14px; }
.concept-content { grid-template-columns: 1.5fr 1fr; }
.concept-explanation { padding: 28px; }
#step-copy h3 { font: 500 28px/1.25 var(--serif); letter-spacing: -.4px; color: var(--ink); margin: 14px 0; }
#step-copy > p:not(.micro-label) { font-size: 16px; line-height: 1.78; color: var(--body); margin-bottom: 18px; }
.desktop-concept { min-height: 300px; }
.quantity-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.quantity-hint { font-size: 13.5px; line-height: 1.68; color: var(--muted); margin: 14px 0 20px; }
.compute-illustration { width: 100%; padding: 20px; background: #ffffff; border: 1px solid #96a8b2; border-radius: 6px; }
.measurement-plot { width: 100%; height: auto; display: block; margin-top: 12px; }
.measurement-plot text { font: 600 13.5px var(--sans); fill: var(--ink); }.measurement-plot .plot-unit { font-size: 12.5px; font-weight: 500; fill: var(--muted); }
.plot-guide { fill: none; stroke: #9fb0b9; stroke-width: 1.2; }.plot-a { fill: #5b7f95; }.plot-b { fill: #124563; }
.compute-method-chain { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--green); }
.compute-method-chain i { font-style: normal; }
.compute-illustration > p { font-size: 13.5px; line-height: 1.7; color: var(--body); margin: 14px 0 0; }
.investigation-record { border-top: 1px solid #b8c4ca; margin-top: 24px; padding-top: 20px; }
.investigation-record h4 { margin: 0 0 16px; font-weight: 600; font-size: 12.5px; color: var(--green); }
.investigation-record ol { list-style: none; margin: 0; padding: 0; }
.investigation-record li { display: flex; gap: 12px; position: relative; padding-bottom: 18px; }
.investigation-record li::before { content: ''; position: absolute; width: 1.5px; background: #9fb0b9; top: 12px; bottom: 0; left: 3.5px; }
.investigation-record li:last-child { padding-bottom: 0; }.investigation-record li:last-child::before { display: none; }
.record-dot { display: block; flex: 0 0 8px; height: 8px; border: 1.5px solid #6b8290; border-radius: 50%; margin-top: 6px; position: relative; z-index: 1; background: #ffffff; }
.record-retained .record-dot { background: #4b6b7e; border-color: #4b6b7e; }.record-current .record-dot { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 3px #d8e6ed; }
.investigation-record li strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.investigation-record li div > span { display: block; color: var(--body); font-size: 13.5px; line-height: 1.65; }
.record-future strong { color: #5a6b77 !important; }.record-future div > span { font-size: 13px !important; color: #5a6b77 !important; }
.checkpoint-bar { display: flex; gap: 20px; align-items: center; border-top: 1px solid #b8c4ca; background: #f1f4f6; padding: 14px 28px; }
.checkpoint-button { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #8ea3af; background: #ffffff; border-radius: 6px; min-height: 42px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--green); flex-shrink: 0; }
.checkpoint-button:hover { background: var(--soft-green); border-color: var(--green); }
#checkpoint-status { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--body); }
.basis-dialog { width: min(780px, calc(100% - 36px)); }
.trace-result { display: flex; gap: 12px; align-items: baseline; padding: 16px 0 12px; color: var(--green); }
.trace-result strong { font: 500 52px var(--serif); letter-spacing: -1.2px; color: var(--ink); }.trace-result > span { font-size: 16px; font-weight: 600; color: var(--green); }
.trace-precision { color: var(--body); font-size: 14px; line-height: 1.7; margin: 0; }
.basis-dialog code { font: 500 13px/1.75 ui-monospace, SFMono-Regular, Consolas, monospace; background: #eef3f6; color: #0b1520; padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; }
.basis-dialog .basis-records dt { font-size: 14px; font-weight: 600; color: var(--ink); }.basis-dialog .basis-records dd { font-size: 15px; line-height: 1.75; color: var(--body); }
.basis-records .trace-limits { background: #fef7ea; padding: 16px; border: 1.5px dashed #c87312; border-radius: 6px; margin-top: 10px; color: #5c3100; }
.basis-records .trace-limits dd { color: #5c3100; }
.source-values { margin-top: 22px; border-block: 1px solid var(--line); padding-block: 18px; }
.source-values summary { color: var(--green); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.source-values p, .trace-bottom-note { color: var(--body); font-size: 13.5px; line-height: 1.75; margin-top: 14px; }
.source-values table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.source-values caption { text-align: left; color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.source-values th, .source-values td { border-bottom: 1px solid var(--line); padding: 11px 12px; text-align: right; }.source-values th:first-child { text-align: left; }
.source-values thead th { background: #e8eff2; color: var(--ink); font-weight: 600; }
.trace-bottom-note { margin-bottom: 0; }
.mobile-concept .mobile-checked { background: #e6eef2; border-color: #6b8c9e; }
@media (max-width: 1150px) {
  .concept-content { grid-template-columns: 1.35fr 1fr; }
}
@media (max-width: 850px) {
  .concept-content { grid-template-columns: 1fr; }.concept-explanation { padding: 26px; }
  .desktop-concept { min-height: 0; }.investigation-record ol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
  .investigation-record li { padding: 0; }.investigation-record li::before { display: none; }
}
@media (max-width: 600px) {
  .scenario-context { grid-template-columns: 1fr; gap: 12px; }.scenario-context > div { display: grid; grid-template-columns: 85px 1fr; gap: 10px; }
  .scenario-context strong { margin-bottom: 0; }.scenario-context span { font-size: 13.5px; }
  .context-samples { gap: 8px; }.context-samples .trace-value { padding: 8px 12px; gap: 8px; }.context-samples .trace-value-label { font-size: 12.5px; }
  .context-samples .trace-value-number { font-size: 13px; }.context-samples .trace-value-number small { font-size: 11.5px; }
  .quantity-panel { gap: 10px; }.quantity-panel .trace-value { padding: 12px; gap: 8px; }.quantity-panel .trace-value-number { font-size: 24px; }.quantity-panel .trace-value-label { font-size: 12px; }
  .quantity-panel .trace-value-number small { font-size: 11.5px; }.quantity-panel .trace-value-arrow { font-size: 14px; }
  .concept-explanation { padding: 22px 18px; }#step-copy h3 { font-size: 24px; }
  .investigation-record ol { grid-template-columns: 1fr; gap: 14px; }
  .checkpoint-bar { align-items: start; flex-direction: column; padding: 16px 18px; gap: 10px; }.checkpoint-button { min-height: 44px; }
  .basis-dialog { width: calc(100% - 24px); }.trace-result strong { font-size: 44px; }
  .source-values th, .source-values td { padding: 9px 8px; }
}
html[lang^="zh"] #step-copy h3 { font-size: 26px; line-height: 1.32; font-weight: 600; letter-spacing: 0; }
.scenario-context code { font: 500 12.5px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; background: #e8eff2; color: var(--green); padding: 2px 6px; border-radius: 4px; border: 1px solid #b8c4ca; }
.kg-panel { margin: 18px 0 20px; padding: 16px; background: #f1f5f7; border: 1px solid #96a8b2; border-radius: 6px; }
.kg-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.kg-badge { font-size: 12px; color: #6e3b00; background: #fef7ea; border: 1px solid #d4a55d; border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.kg-svg { width: 100%; height: auto; display: block; border-radius: 4px; background: #ffffff; border: 1px solid #b8c4ca; }
@media (max-width: 600px) {
  html[lang^="zh"] #step-copy h3 { font-size: 23px; }
  .kg-panel { padding: 12px 10px; }
}