.intro { padding: 62px 0 58px; }
.intro-heading { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 46px; margin: 19px 0 32px; }
.intro h1 { margin: 0; font-size: clamp(36px, 4.2vw, 49px); line-height: 1.1; letter-spacing: -.04em; }
.intro h1 span { color: var(--ink); }
.intro .lead { font-size: 15px; line-height: 1.55; }
.hero-detail { margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.intro .actions { margin-top: 24px; }

.bench-demo {
  --demo-surface: #fff;
  --demo-line: #e3e7dc;
  --demo-text: #343930;
  --demo-muted: #65705d;
  --demo-green: #47693c;
  --demo-negative: #805c3d;
  --demo-ease: cubic-bezier(.22, 1, .36, 1);
  color: var(--demo-text);
}
.bench-demo button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bench-demo button:focus-visible { outline: 2px solid #537643; outline-offset: 3px; }
.bench-demo .demo-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; }
.bench-demo .demo-tabs { display: flex; gap: 4px; background: #f0f1ed; border-radius: 8px; padding: 4px; }
.bench-demo .demo-tabs button { min-height: 40px; padding: 6px 16px; border: 0; border-radius: 5px; background: transparent; color: #606a56; font-size: 13px; }
.bench-demo .demo-tabs button span { color: #626d57; margin-right: 6px; font-size: 11px; font-variant-numeric: tabular-nums; }
.bench-demo .demo-tabs button[aria-selected="true"] { color: #2f392b; background: #fff; box-shadow: 0 1px 4px #222b2212, 0 0 0 1px #242d2010; font-weight: 600; }
.bench-demo .demo-example-note { color: var(--demo-muted); font-size: 12px; }
.bench-demo .demo-tabs, .bench-demo .demo-replay { visibility: hidden; }
.bench-demo[data-enhanced="true"] .demo-tabs, .bench-demo[data-enhanced="true"] .demo-replay { visibility: visible; }
.bench-demo .demo-stage { position: relative; height: 510px; overflow: clip; isolation: isolate; }
.bench-demo .demo-scene { position: absolute; inset: 0; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 200ms ease, visibility 200ms; }
.bench-demo .demo-scene[data-active="true"] { opacity: 1; pointer-events: auto; visibility: visible; }
.bench-demo .demo-window { position: absolute; left: 0; top: 12px; width: calc(100% - 120px); height: 550px; overflow: hidden; border: 1px solid #e2e5dc; border-radius: 11px; background: var(--demo-surface); box-shadow: 0 4px 18px #30382c08; }
.bench-demo .demo-window-bar { display: flex; align-items: center; gap: 24px; height: 38px; padding: 0 22px; border-bottom: 1px solid var(--demo-line); background: #f7f8f5; font-size: 12px; }
.bench-demo .demo-file { font-weight: 600; }
.bench-demo .demo-file-meta { color: var(--demo-muted); font-size: 11px; }
.bench-demo .demo-file-meta span { margin: 0 6px; }
.bench-demo .demo-task { padding: 20px 26px 16px; }
.bench-demo .demo-task-label { margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .055em; color: var(--demo-muted); }
.bench-demo .demo-task-title { font-size: 16px; line-height: 1.4; letter-spacing: -.015em; font-weight: 600; }
.bench-demo .demo-task p { margin-top: 4px; font-size: 12px; color: var(--demo-muted); }
.bench-demo .demo-workspace { display: grid; grid-template-columns: 225px 330px; gap: 26px; padding: 0 26px; }
.bench-demo .pane-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 500; color: var(--demo-muted); }
.bench-demo .pane-label > span { font-size: 11px; font-weight: 400; }
.bench-demo .tensor-pane, .bench-demo .network-pane { padding-top: 10px; }
.bench-demo .weight-table { width: 100%; margin: 15px 0 16px; table-layout: fixed; border-collapse: separate; border-spacing: 3px; text-align: center; }
.bench-demo .weight-table th { font-size: 12px; height: 21px; padding: 0; font-weight: 400; color: #5f7052; text-align: center; }
.bench-demo .weight-table th:first-child { width: 26px; }
.bench-demo .weight-table td { height: 52px; border-radius: 5px; border: 1px solid #e3e8dd; background: #f7f9f4; color: #56634c; font-size: 21px; font-variant-numeric: tabular-nums; }
.bench-demo .weight-table .weight-edited { background: #e9f1e5; border-color: #cbdac0; color: var(--demo-green); font-weight: 600; }
.bench-demo .patch-label { text-align: right; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #586c4d; min-height: 17px; }
.bench-demo .network-body { position: relative; margin-top: 10px; }
.bench-demo .demo-network { display: block; width: 100%; height: 170px; }
.bench-demo .network-wires { stroke: #9aab8d; stroke-width: 1.3; }
.bench-demo .network-wires .zero-wire { stroke: #bec8b4; stroke-dasharray: 3 4; }
.bench-demo .network-wires .edit-wire { stroke: #76915f; stroke-width: 2; }
.bench-demo .network-nodes circle { fill: #fff; stroke: #9eae90; stroke-width: 1.3; }
.bench-demo .network-text { fill: #4f6242; font-size: 16px; font-family: inherit; }
.bench-demo .edit-label rect { fill: #edf3e9; stroke: #dbe6d2; }
.bench-demo .edge-value { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 13px; color: var(--demo-green); font-weight: 600; }
.bench-demo .network-foot { font-size: 11px; color: var(--demo-muted); text-align: center; }
.bench-demo .demo-source-note { padding: 21px 26px; font-size: 11px; color: var(--demo-muted); }
.bench-demo .demo-receipt { position: absolute; right: 0; top: 124px; width: 264px; padding: 19px 21px; background: #fff; border: 1px solid #dce3d3; border-radius: 11px; box-shadow: 0 4px 8px #34402a05, 0 14px 32px #34402a0e; }
.bench-demo .receipt-label { font-size: 12px; color: var(--demo-muted); margin-bottom: 9px; }
.bench-demo .receipt-rule { display: grid; position: relative; margin-bottom: 15px; font-size: 17px; line-height: 1.5; letter-spacing: -.02em; color: #35482b; }
.bench-demo .rule-answer { display: flex; flex-direction: column; gap: 2px; }
.bench-demo .rule-pending { display: flex; align-items: center; color: var(--demo-muted); font-size: 14px; }
.bench-demo .rule-answer, .bench-demo .rule-pending { grid-area: 1 / 1; transition: opacity 240ms ease, transform 350ms var(--demo-ease); }
.bench-demo .receipt-test { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--demo-line); margin-bottom: 5px; color: var(--demo-muted); font-size: 12px; }
.bench-demo .receipt-test code { color: #5e704e; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.bench-demo .receipt-output { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; min-height: 40px; font-size: 13px; }
.bench-demo .receipt-output > span:first-child { color: var(--demo-muted); }
.bench-demo .output-values { display: inline-flex; align-items: baseline; gap: 8px; }
.bench-demo .output-values > .value-roll { font-size: 27px; color: #405e32; }
.bench-demo .secondary-output { min-height: 32px; }
.bench-demo .secondary-output .output-values > .value-roll { font-size: 19px; color: #5d714d; }
.bench-demo .prior-output { font-size: 13px; color: var(--demo-muted); transition: opacity 250ms ease; }
.bench-demo .output-note { display: grid; color: var(--demo-muted); font-size: 11px; text-align: right; }
.bench-demo .output-note > span { grid-area: 1 / 1; transition: opacity 200ms ease; }
.bench-demo .receipt-explainer { display: grid; border-top: 1px solid var(--demo-line); padding-top: 11px; margin-top: 9px; font-size: 12px; line-height: 1.5; color: var(--demo-muted); }
.bench-demo .receipt-explainer > p { grid-area: 1 / 1; transition: opacity 240ms ease, transform 350ms var(--demo-ease); }
.bench-demo .receipt-explainer [aria-hidden="true"], .bench-demo .output-note [aria-hidden="true"], .bench-demo .prior-output[aria-hidden="true"], .bench-demo .receipt-rule [aria-hidden="true"] { opacity: 0; pointer-events: none; }
.bench-demo .receipt-explainer [aria-hidden="true"], .bench-demo .receipt-rule [aria-hidden="true"] { transform: translateY(5px); }
.bench-demo .value-roll { display: inline-grid; overflow: hidden; line-height: 1.3; vertical-align: middle; }
.bench-demo .value-roll > span { grid-area: 1 / 1; transition: transform 450ms var(--demo-ease), opacity 260ms ease; }
.bench-demo .value-before { transform: translateY(-105%); opacity: 0; }
.bench-demo .value-after { transform: translateY(0); opacity: 1; }
.bench-demo .demo-scene[data-phase="start"] .value-before, .bench-demo .demo-scene[data-phase="inspect"] .value-before, .bench-demo .demo-scene[data-phase="patched"] .receipt-output .value-before { transform: translateY(0); opacity: 1; }
.bench-demo .demo-scene[data-phase="start"] .value-after, .bench-demo .demo-scene[data-phase="inspect"] .value-after, .bench-demo .demo-scene[data-phase="patched"] .receipt-output .value-after { transform: translateY(105%); opacity: 0; }
.bench-demo .demo-scene .value-roll[data-unchanged="true"] .value-before { display: none; }
.bench-demo .demo-scene .value-roll[data-unchanged="true"] .value-after { transform: none; opacity: 1; transition: none; }
.bench-demo .demo-scene[data-phase="inspect"] .weight-edited { box-shadow: inset 0 0 0 1px #6f875e; }
.bench-demo .demo-scene[data-phase="start"] .weight-edited, .bench-demo .demo-scene[data-phase="inspect"] .weight-edited { color: var(--demo-negative); background: #f7f1e8; border-color: #e2d4bd; }
.bench-demo .demo-scene[data-scene="repair"][data-phase="start"] .edit-wire, .bench-demo .demo-scene[data-scene="repair"][data-phase="inspect"] .edit-wire { stroke: #987449; }
.bench-demo .demo-scene[data-scene="write"][data-phase="start"] .network-wires, .bench-demo .demo-scene[data-scene="write"][data-phase="inspect"] .network-wires { stroke-dasharray: 3 4; }
.bench-demo .demo-scene[data-scene="read"][data-phase="inspect"] .weight-cell { background: #e9f1e5; }
.bench-demo .demo-playback { position: absolute; bottom: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--bg); border-top: 1px solid var(--demo-line); }
.bench-demo .demo-beats { display: flex; align-items: center; gap: 11px; color: var(--demo-muted); font-size: 11px; }
.bench-demo .demo-beats > i { height: 1px; width: 18px; background: #c6d0bc; }
.bench-demo .demo-scene[data-phase="start"] [data-beat="1"], .bench-demo .demo-scene[data-phase="inspect"] [data-beat="2"], .bench-demo .demo-scene[data-phase="patched"] [data-beat="2"], .bench-demo .demo-scene[data-phase="checked"] [data-beat="3"] { color: #3e5b30; font-weight: 600; }
.bench-demo .demo-replay { min-height: 44px; min-width: 146px; border: 0; border-radius: 5px; padding: 5px 6px 5px 10px; background: transparent; color: #536f43; font-size: 12px; white-space: nowrap; text-align: right; }
.bench-demo .demo-replay > span:last-child { margin-left: 8px; }
.bench-demo .demo-replay:focus-visible { outline-offset: -3px; }
.bench-demo .demo-replay:hover { color: #344e27; }
.bench-demo .demo-caption, .bench-demo .motion-note { font-size: 12px; color: var(--demo-muted); line-height: 1.6; }
.bench-demo .demo-caption { margin-top: 10px; max-width: 690px; }
.bench-demo[data-reduced-motion="true"] .demo-replay { display: none; }

@media (max-width: 900px) and (min-width: 701px) {
  .bench-demo .demo-window { width: calc(100% - 85px); }
  .bench-demo .demo-workspace { grid-template-columns: 175px 230px; gap: 17px; padding: 0 20px; }
  .bench-demo .demo-receipt { width: 230px; padding: 18px; }
  .bench-demo .demo-source-note { max-width: 430px; }
}
@media (max-width: 700px) {
  .intro { padding: 42px 0; }
  .intro-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
  .intro h1 { font-size: clamp(33px, 7vw, 44px); }
  .intro .lead, .hero-detail { max-width: 470px; }
  .bench-demo .demo-example-note { display: none; }
  .bench-demo .demo-tabs { width: 100%; }
  .bench-demo .demo-tabs button { flex: 1; min-height: 44px; padding: 6px 8px; }
  .bench-demo .demo-stage { height: 680px; }
  .bench-demo .demo-window { top: 8px; width: 100%; height: 750px; }
  .bench-demo .demo-window-bar { padding: 0 16px; justify-content: space-between; gap: 12px; }
  .bench-demo .demo-file-meta { font-size: 10px; white-space: nowrap; }
  .bench-demo .demo-task { padding: 18px 16px 12px; }
  .bench-demo .demo-task-title { font-size: 15px; max-width: 300px; }
  .bench-demo .demo-task p { max-width: 280px; line-height: 1.5; }
  .bench-demo .demo-workspace { grid-template-columns: 155px minmax(0, 1fr); gap: 16px; padding: 0 16px; }
  .bench-demo .pane-label { font-size: 11px; }
  .bench-demo .pane-label > span { display: none; }
  .bench-demo .weight-table { margin-top: 12px; border-spacing: 3px; }
  .bench-demo .weight-table td { height: 40px; font-size: 18px; }
  .bench-demo .weight-table th:first-child { width: 20px; }
  .bench-demo .network-body { margin-top: 24px; }
  .bench-demo .demo-network { height: 111px; }
  .bench-demo .network-text { font-size: 28px; }
  .bench-demo .network-nodes circle { r: 27px; }
  .bench-demo .network-wires path, .bench-demo .network-nodes circle { vector-effect: non-scaling-stroke; }
  .bench-demo .network-foot, .bench-demo .demo-source-note { display: none; }
  .bench-demo .edge-value { font-size: 12px; }
  .bench-demo .patch-label { font-size: 10px; white-space: nowrap; text-align: left; padding-left: 12px; }
  .bench-demo .demo-receipt { top: 355px; right: 16px; width: calc(100% - 32px); padding: 17px 18px; box-shadow: 0 2px 4px #34402a05, 0 9px 20px #34402a0c; }
  .bench-demo .rule-answer { flex-direction: row; flex-wrap: wrap; gap: 6px 24px; }
  .bench-demo .receipt-rule { margin-bottom: 11px; font-size: 16px; }
  .bench-demo .receipt-label { margin-bottom: 6px; }
  .bench-demo .receipt-output { min-height: 34px; }
  .bench-demo .secondary-output { min-height: 28px; }
  .bench-demo .receipt-explainer { margin-top: 6px; padding-top: 9px; }
  .bench-demo .demo-beats > i, .bench-demo .demo-beats > span { display: none; }
  .bench-demo .demo-beats > span[data-beat="3"] { display: block; }
}
@media (max-width: 365px) {
  .bench-demo .demo-stage { height: 750px; }
  .bench-demo .demo-file-meta { display: none; }
  .bench-demo .demo-workspace { grid-template-columns: 140px minmax(0, 1fr); gap: 9px; padding: 0 13px; }
  .bench-demo .demo-receipt { top: 405px; left: 13px; width: calc(100% - 26px); padding: 16px; }
  .bench-demo .rule-answer { font-size: 15px; gap: 6px 14px; }
  .bench-demo .network-text { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .bench-demo *, .bench-demo *::before, .bench-demo *::after { transition: none; animation: none; }
}