.runtime-hero { padding-bottom: 62px; padding-top: 64px; }.runtime-hero h1 { font-size: clamp(42px, 6vw, 76px); letter-spacing: -.055em; line-height: .98; margin: 12px 0 19px; }.runtime-hero h1 em { color: var(--blue); font-family: "Source Serif 4 Deck", Georgia, serif; font-style: italic; font-weight: 400; }.runtime-hero > p { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0; max-width: 620px; }.source-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 25px; }.source-tags span { background: var(--white); border: 1px solid var(--line); color: var(--muted); font: 9px var(--mono); padding: 7px 9px; }
.runtime-loop-section, .evidence-section { background: var(--blue-soft); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); padding: 48px 0 54px; }.runtime-status { align-items: center; color: var(--muted); display: inline-flex; font: 9px var(--mono); gap: 8px; }.runtime-status i { background: var(--teal); border-radius: 50%; height: 7px; width: 7px; }.runtime-loop { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 25px; }.runtime-stage { background: var(--white); border: 1px solid var(--line); border-right: 0; cursor: pointer; display: flex; flex-direction: column; min-height: 116px; padding: 14px; text-align: left; }.runtime-stage:last-child { border-right: 1px solid var(--line); }.runtime-stage b { color: var(--blue); font: 9px var(--mono); }.runtime-stage strong { font-size: 13px; margin: 21px 0 3px; }.runtime-stage span { color: var(--muted); font-size: 9px; }.runtime-stage.active { background: var(--ink); color: var(--paper); }.runtime-stage.active b { color: var(--amber); }.runtime-stage.active span { color: oklch(76% .02 235); }.stage-detail { background: var(--white); border: 1px solid var(--ink); margin-top: 14px; padding: 20px 22px; }.stage-detail h3 { font-size: 20px; letter-spacing: -.05em; margin: 4px 0 4px; }.stage-detail p { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 0; max-width: 650px; }.detail-meta { border-top: 1px solid var(--line); display: flex; gap: 30px; margin-top: 16px; padding-top: 11px; }.detail-meta span { color: var(--muted); font: 9px var(--mono); }.detail-meta b { color: var(--ink); font-weight: 500; margin-left: 5px; }
.try-section { padding-bottom: 66px; padding-top: 63px; }.run-id { color: var(--muted); font: 9px var(--mono); }.try-grid { display: grid; gap: 20px; grid-template-columns: 1.1fr .9fr; margin-top: 24px; }.run-console, .comparison-card { background: var(--white); border: 1px solid var(--line); }.console-head { align-items: center; background: var(--ink); color: var(--paper); display: flex; font: 10px var(--mono); justify-content: space-between; padding: 12px 15px; }.console-head span:last-child { color: var(--amber); }.objective-picker { padding: 19px; }.field-label { color: var(--blue); display: block; font: 9px var(--mono); font-weight: 900; text-transform: uppercase; }.objective-options { display: grid; gap: 7px; grid-template-columns: repeat(3, 1fr); margin-top: 11px; }.objective-option { background: var(--paper); border: 1px solid var(--line); cursor: pointer; padding: 10px; text-align: left; }.objective-option strong { display: block; font-size: 11px; }.objective-option small { color: var(--muted); display: block; font-size: 9px; line-height: 1.4; margin-top: 4px; }.objective-option.active { background: var(--teal-soft); border-color: var(--teal); }.run-button { background: var(--blue); border: 0; color: var(--paper); cursor: pointer; font-size: 11px; font-weight: 800; margin-top: 14px; padding: 11px 14px; }.run-button:hover { background: var(--ink); }.run-button:disabled { cursor: wait; opacity: .65; }.run-button span { color: var(--amber); margin-left: 9px; }.run-progress { border-top: 1px solid var(--line); padding: 15px 19px 12px; }.progress-track { background: var(--paper-2); height: 5px; }.progress-track span { background: var(--teal); display: block; height: 100%; transition: width .35s ease; width: 0; }.progress-copy { color: var(--muted); display: flex; font: 9px var(--mono); justify-content: space-between; margin-top: 8px; }.console-log { border-top: 1px solid var(--line); min-height: 115px; padding: 10px 19px; }.console-log div { display: flex; font: 9px var(--mono); gap: 13px; padding: 5px 0; }.console-log span { color: var(--blue); min-width: 38px; }.console-log b { font-weight: 400; }.comparison-card { padding: 20px; }.comparison-card h3 { font-size: 18px; letter-spacing: -.05em; margin: 5px 0 23px; }.comparison-row { display: grid; grid-template-columns: 95px 1fr 75px; align-items: center; gap: 11px; margin-top: 17px; }.comparison-label span, .comparison-label small { display: block; }.comparison-label span { font-size: 11px; font-weight: 700; }.comparison-label small { color: var(--muted); font-size: 8px; margin-top: 2px; }.bar-track { background: var(--paper-2); height: 10px; position: relative; }.bar-track i { display: block; height: 5px; position: absolute; left: 0; }.human-bar { background: var(--muted); top: 0; }.agent-bar { background: var(--teal); bottom: 0; }.comparison-values { display: flex; flex-direction: column; font: 9px var(--mono); text-align: right; }.comparison-values span { color: var(--muted); }.comparison-values strong { color: var(--teal); font-weight: 500; }.comparison-legend { border-top: 1px solid var(--line); color: var(--muted); display: flex; font: 9px var(--mono); gap: 14px; margin-top: 22px; padding-top: 13px; }.comparison-legend span { align-items: center; display: inline-flex; gap: 6px; }.comparison-legend i { display: inline-block; height: 5px; width: 12px; }.legend-human { background: var(--muted); }.legend-agent { background: var(--teal); }
.evidence-section h2 { font-size: 27px; letter-spacing: -.06em; margin: 5px 0 0; }.evidence-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 26px; }.evidence-grid > div { border-right: 1px solid var(--line); min-height: 135px; padding: 0 17px 0 0; }.evidence-grid > div + div { padding-left: 17px; }.evidence-grid > div:last-child { border-right: 0; }.evidence-grid b { color: var(--blue); font: 9px var(--mono); }.evidence-grid h3 { font-size: 14px; margin: 19px 0 6px; }.evidence-grid p { color: var(--muted); font-size: 10px; line-height: 1.55; margin: 0; }
@media (max-width: 800px) { .runtime-loop { grid-template-columns: repeat(3, 1fr); }.runtime-stage:nth-child(3) { border-right: 1px solid var(--line); }.runtime-stage:nth-child(n+4) { border-top: 0; }.try-grid { grid-template-columns: 1fr; }.evidence-grid { grid-template-columns: 1fr 1fr; }.evidence-grid > div:nth-child(2) { border-right: 0; }.evidence-grid > div:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 18px; } }
@media (max-width: 520px) { .runtime-hero { padding-top: 42px; }.runtime-hero h1 { font-size: 45px; }.runtime-loop { grid-template-columns: 1fr 1fr; }.runtime-stage:nth-child(odd) { border-right: 0; }.runtime-stage:nth-child(n+3) { border-top: 0; }.detail-meta { flex-direction: column; gap: 8px; }.objective-options { grid-template-columns: 1fr; }.comparison-row { grid-template-columns: 80px 1fr 54px; }.evidence-grid { grid-template-columns: 1fr; }.evidence-grid > div { border-bottom: 1px solid var(--line); border-right: 0; min-height: auto; padding: 0 0 18px; }.evidence-grid > div + div { padding: 18px 0; }.evidence-grid > div:last-child { border-bottom: 0; } }