:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202632;
  background: #ffffff;
  font-synthesis: none;
  --ink: #202632;
  --muted: #586273;
  --line: #dce1e8;
  --soft: #f6f7f9;
  --blue: #235bc3;
  --green: #176c43;
  --red: #ae302c;
  --amber: #865b0d;
  --radius: 5px;
  font-size: 15px;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; color: #717a88; background: #f0f2f5; border-color: #dce1e8; }
a { color: var(--blue); text-underline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #4c80dc; outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 1.8rem; font-weight: 670; line-height: 1.25; letter-spacing: -.6px; }
h2 { font-size: 1.05rem; font-weight: 650; line-height: 1.4; }
h3 { font-size: .95rem; font-weight: 650; line-height: 1.4; }
p { line-height: 1.6; }
button svg { pointer-events: none; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 30; background: white; padding: 12px 16px; border: 2px solid var(--blue); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.app-header { min-height: 64px; display: flex; align-items: center; gap: 38px; padding: 0 max(28px, calc((100vw - 1360px) / 2)); border-bottom: 1px solid var(--line); background: #fff; }
.brand { flex: none; color: var(--ink); font-size: 1.27rem; font-weight: 750; letter-spacing: -.65px; text-decoration: none; }
nav { display: flex; align-self: stretch; align-items: stretch; gap: 24px; }
nav a { display: inline-flex; align-items: center; padding: 0 2px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; font-size: .9rem; }
nav a:hover { color: var(--ink); }
nav a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); font-weight: 650; }
nav #demo-link { margin-left: 10px; }
.workspace-status { margin-left: auto; position: relative; min-width: 0; }
.workspace-status summary { font-size: .83rem; color: var(--muted); white-space: nowrap; padding: 12px 0; }
.workspace-status-body { position: absolute; right: 0; top: 100%; z-index: 20; width: 370px; max-width: calc(100vw - 32px); padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 6px 24px #20263212; font-size: .87rem; }
.workspace-status-body strong { display: block; font-weight: 650; margin-bottom: 8px; }
.workspace-status-body p { color: var(--muted); }
.error-banner { max-width: 1304px; margin: 18px auto; padding: 15px 18px; background: #fff4f2; color: #922b28; border: 1px solid #e7b7b3; border-radius: var(--radius); line-height: 1.6; }
.error-banner button { margin-left: 15px; border: 0; background: transparent; color: inherit; text-decoration: underline; padding: 7px; }
main { max-width: 1360px; padding: 28px 28px 48px; min-height: calc(100vh - 124px); margin: 0 auto; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 25px; }
.page-heading .lead { margin-top: 8px; font-size: .95rem; color: var(--muted); }
.back-link { display: inline-block; margin-bottom: 9px; font-size: .87rem; text-decoration: none; }
.text-link { font-size: .9rem; line-height: 1.5; }
.workspace-grid { display: grid; grid-template-columns: 288px minmax(0,1fr); gap: 36px; align-items: start; }
.task-panel { border-right: 1px solid var(--line); padding-right: 20px; min-width: 0; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 8px; }
.section-heading h2 { font-size: .9rem; }
.quiet { color: var(--muted); font-size: .83rem; }
.task-search-field { margin: 16px 0 10px; }
input[type="search"], select { color: var(--ink); border: 1px solid #bfc8d5; background: white; border-radius: var(--radius); min-height: 44px; padding: 9px 12px; max-width: 100%; }
input[type="search"] { width: 100%; font-size: .9rem; }
input::placeholder { color: #687386; opacity: 1; }
.task-list { max-height: calc(100vh - 264px); min-height: 320px; overflow-y: auto; scrollbar-width: thin; padding: 0 3px 6px 0; }
.task-group-label { color: var(--muted); font-size: .8rem; font-weight: 650; padding: 17px 10px 7px; }
.task-card { display: block; text-align: left; color: inherit; background: transparent; border: 1px solid transparent; border-left: 3px solid transparent; border-radius: 3px; width: 100%; padding: 12px 11px; margin: 0 0 3px; position: relative; }
.task-card:hover { background: var(--soft); }
.task-card[aria-pressed="true"] { background: #edf3fe; border-left-color: var(--blue); color: #173f87; }
.task-title { display: block; font-size: .91rem; line-height: 1.45; font-weight: 570; }
.task-meta { display: block; margin-top: 5px; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.selection-mark { display: none; }
.mobile-task-picker { display: none; }
.detail-panel { min-width: 0; padding: 0; }
.detail-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.detail-panel > h2, .task-intro h2 { font-size: 1.58rem; font-weight: 650; line-height: 1.3; letter-spacing: -.4px; }
.task-intro { max-width: 880px; }
.task-intro .eyebrow { color: var(--muted); font-size: .83rem; margin: 0 0 8px; line-height: 1.5; }
.task-description, .task-intro > p { color: var(--muted); font-size: .95rem; line-height: 1.65; margin-top: 13px; }
.actions, .task-actions { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid #b8c2d0; border-radius: var(--radius); background: #fff; color: var(--ink); padding: 10px 16px; text-decoration: none; font-size: .9rem; font-weight: 600; line-height: 1.4; }
.button:hover:enabled, a.button:hover { border-color: #71829b; background: var(--soft); }
.button.primary { color: white; background: var(--blue); border-color: var(--blue); }
.button.primary:hover:enabled, a.button.primary:hover { background: #194ba9; border-color: #194ba9; }
.button.primary:disabled { background: #eef1f5; border-color: #dce1e8; color: #687386; }
.button.subtle { border-color: transparent; background: transparent; color: var(--blue); padding-left: 0; padding-right: 0; }
.fine-print, .run-meta, .summary-meta, .stream-note { color: var(--muted); font-size: .85rem; line-height: 1.6; margin-top: 10px; overflow-wrap: anywhere; }
.task-actions + .fine-print { margin-top: 8px; }
.requirements-heading { margin: 30px 0 10px; font-size: .95rem; }
.requirements { list-style: none; margin: 0; padding: 0; }
.requirements li { display: flex; align-items: flex-start; gap: 14px; border-top: 1px solid var(--line); padding: 15px 0; font-size: .9rem; line-height: 1.6; }
.requirement-id { flex: none; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .81rem; color: var(--muted); line-height: 1.8; }
.disclosure { border-top: 1px solid var(--line); padding: 15px 0; margin-top: 21px; }
.disclosure > summary { font-size: .93rem; font-weight: 600; color: var(--ink); }
.disclosure[open] > summary { margin-bottom: 15px; }
.disclosure .requirements-heading { margin-top: 16px; }
summary { cursor: pointer; color: var(--blue); font-size: .87rem; line-height: 1.6; }
summary::marker { color: #64748a; }
.allowance { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 16px; }
.allowance-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .9rem; font-weight: 600; }
.allowance p { color: var(--muted); font-size: .86rem; margin-top: 9px; }
.model-name { overflow-wrap: anywhere; }
.pill { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: .81rem; font-weight: 600; line-height: 1.4; }
.pill.neutral { color: var(--muted); font-weight: 500; }
.pill.warn { color: var(--amber); }
.pill.fail { color: var(--red); }
.toolbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.toolbar > div { min-width: 0; }
.toolbar label, .mobile-task-picker label { display: block; font-size: .87rem; font-weight: 600; margin-bottom: 8px; }
.toolbar select { width: 540px; font-size: .9rem; }
.comparison-context { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: .9rem; color: var(--muted); line-height: 1.6; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.variant-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 24px 0; }
.variant-card { display: flex; flex-direction: column; border-right: 1px solid var(--line); padding: 0 24px; min-width: 0; }
.variant-card:first-child { padding-left: 0; }
.variant-card:last-child { border-right: 0; padding-right: 0; }
.variant-kicker { font-size: .83rem; color: var(--muted); margin-bottom: 8px; }
.variant-card h2 { font-size: 1.13rem; }
.variant-description { font-size: .89rem; color: var(--muted); margin: 10px 0 16px; min-height: 67px; }
.variant-card .outcome { margin-top: 13px; }
.variant-card .button { align-self: start; margin-top: 10px; }
.metric-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin: 18px 0 10px; }
.metric-list dt { color: var(--muted); font-size: .81rem; line-height: 1.4; margin-bottom: 4px; }
.metric-list dd { margin: 0; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.comparison-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.comparison-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .87rem; }
.comparison-table th, .comparison-table td { text-align: left; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.comparison-table thead { background: var(--soft); }
.comparison-table th { font-weight: 600; }
.comparison-table tr:last-child th, .comparison-table tr:last-child td { border-bottom: 0; }
.comparison-notice { color: var(--muted); font-size: .85rem; max-width: 940px; margin-top: 24px; }
.table-scroll-hint { display: none; }
.run-history { border-top: 1px solid var(--line); }
.history-row { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px 8px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; min-width: 0; }
a.history-row:hover { background: var(--soft); }
.history-main { min-width: 0; }
.history-main h2, .history-main > a { font-size: 1rem; font-weight: 600; line-height: 1.5; }
.history-main > a { text-decoration: none; }
.history-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; font-size: .85rem; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.history-row .outcome { font-size: .88rem; white-space: nowrap; }
.history-row .button { flex: none; }
.history-result { flex: none; max-width: 32%; text-align: right; }
.history-result .history-meta { justify-content: flex-end; }
.history-result .outcome { display: block; margin-top: 0; }
.run-switcher { margin: -9px 0 20px; }
.run-switcher > summary { display: inline list-item; }
.run-picker { margin-top: 10px; min-width: 0; }
.run-picker select { width: 100%; font-size: .87rem; }
.run-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 26px; padding: 0 0 24px; border-bottom: 1px solid var(--line); }
.run-summary > div:first-child { min-width: 0; }
.run-summary .result-heading { font-size: 1rem; letter-spacing: normal; margin: 0; }
.run-summary h2, .result-heading, .summary-title { font-size: 1.5rem; line-height: 1.35; letter-spacing: -.4px; margin: 9px 0; }
.run-summary .actions { margin-top: 2px; justify-content: flex-end; flex: none; }
.outcome { color: var(--green); font-weight: 600; font-size: .95rem; line-height: 1.5; margin-top: 12px; }
.outcome.warn { color: var(--amber); }
.outcome.fail { color: var(--red); }
.run-reason { color: var(--muted); font-size: .91rem; line-height: 1.6; margin-top: 8px; max-width: 800px; overflow-wrap: anywhere; }
.result-counts { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 13px 0; font-size: .93rem; line-height: 1.5; }
.result-counts .pass { color: var(--green); }
.result-counts .fail { color: var(--red); }
.result-counts .warn { color: var(--amber); }
.failure-summary, .failure-card { font-size: .93rem; line-height: 1.6; border-left: 3px solid #bd4e46; background: #fff6f4; padding: 16px 18px; margin: 15px 0 22px; }
.failure-summary h3, .failure-card h3 { color: #922b28; font-size: .93rem; }
.failure-summary p, .failure-card p { font-size: .88rem; line-height: 1.6; margin-top: 7px; overflow-wrap: anywhere; }
.failure-value { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; max-height: 150px; overflow: auto; }
.result-tabs { display: flex; align-items: stretch; gap: 27px; border-bottom: 1px solid var(--line); margin: 8px 0 0; overflow-x: auto; }
.result-tabs button { border-radius: 0; background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent; padding: 15px 1px 13px; min-height: 48px; font-size: .93rem; font-weight: 500; white-space: nowrap; }
.result-tabs button[aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); font-weight: 650; }
.result-tabs button.button:hover { color: var(--ink); background: transparent; border-bottom-color: transparent; }
.result-tabs button.button[aria-selected="true"]:hover { color: var(--blue); border-bottom-color: var(--blue); }
.result-panels { min-width: 0; max-width: 100%; }
.result-panel { padding-top: 24px; min-width: 0; max-width: 100%; }
.result-panel .diff { margin-top: 16px; }
.check-values { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; padding: 12px 14px; margin: 12px 0; border: 1px solid var(--line); background: var(--soft); color: #354154; font: 12px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; }
.availability-note { border-left: 3px solid #b17d20; padding: 10px 14px; background: #fff9eb; margin-top: 16px; color: #755111; font-size: .9rem; line-height: 1.6; }
.evidence-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(280px,1fr); gap: 28px; align-items: start; }
.evidence-grid > *, .evidence-main, .evidence-aside { min-width: 0; }
.panel { margin-bottom: 25px; min-width: 0; }
.panel-head, .panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 0 0 13px; border-bottom: 1px solid var(--line); }
.panel-head h2, .panel-heading h2 { font-size: 1rem; }
.panel-head p, .panel-heading p { color: var(--muted); font-size: .85rem; line-height: 1.6; margin-top: 5px; }
.panel-body { padding: 18px 0; }
.candidate-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; }
.candidate-tab { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: white; color: var(--muted); border-radius: var(--radius); padding: 9px 12px; font-size: .85rem; line-height: 1.4; }
.candidate-tab[aria-pressed="true"] { background: #eef4ff; border-color: #87a8e6; color: #194887; }
.candidate-dot { width: 6px; height: 6px; background: #a37827; border-radius: 50%; flex: none; }
.candidate-tab.accepted .candidate-dot { background: var(--green); }
.candidate-description { font-size: .93rem; line-height: 1.65; }
.candidate-caption { font-size: .83rem; color: var(--muted); margin-top: 9px; }
.diff-title { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; color: #434f61; padding: 12px 15px; background: var(--soft); border: 1px solid var(--line); border-bottom: 0; overflow-wrap: anywhere; }
.diff { margin: 0; overflow: auto; max-height: 650px; padding: 12px 0; border: 1px solid var(--line); background: #fff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; line-height: 1.7; tab-size: 4; }
.diff-line, .code-line { display: block; white-space: pre; min-width: max-content; padding: 0 16px; color: #354154; }
.diff-line.add, .code-line.add { background: #e7f5ec; color: #175c34; }
.diff-line.remove, .code-line.remove { background: #fdece9; color: #922d25; }
.diff-line.heading, .code-line.heading { background: #eef3fa; color: #516480; }
.code-line { display: flex; padding: 0; }
.line-number { display: inline-block; flex: 0 0 46px; width: 46px; padding-right: 12px; text-align: right; color: #718096; user-select: none; border-right: 1px solid #dce1e870; }
.line-text { padding: 0 14px; white-space: pre; }
.no-diff { padding: 22px 0; color: var(--muted); font-size: .9rem; }
.coverage-list { list-style: none; padding: 0; margin: 0; }
.coverage-row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.coverage-row-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 8px; }
.coverage-row p { font-size: .89rem; line-height: 1.65; }
.coverage-row .check-ids { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; margin-top: 9px; }
.coverage-count { font-size: .95rem; font-weight: 600; white-space: nowrap; }
.checks-group h3 { margin-bottom: 13px; font-size: .93rem; }
.checks-group + .checks-group { margin-top: 28px; }
.check-row { padding: 15px 0; border-top: 1px solid var(--line); }
.check-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }
.check-name { font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.check-row p { margin-top: 7px; font-size: .88rem; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.check-row details, .check-details { margin-top: 10px; }
.check-log { background: var(--soft); border: 1px solid var(--line); padding: 14px; font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; }
.event-list { list-style: none; margin: 0; padding: 0; }
.event-list li { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 18px; border-bottom: 1px solid #edf0f4; padding: 14px 0; }
.event-list li:first-child { padding-top: 0; }
.event-time { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--muted); font-size: .82rem; padding-top: 3px; }
.event-message { font-size: .9rem; line-height: 1.6; overflow-wrap: anywhere; }
.event-phase { display: block; font-size: .81rem; color: var(--muted); margin-bottom: 3px; }
.accounting { margin: 0; }
.accounting > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .88rem; line-height: 1.5; }
.accounting dt { color: var(--muted); }
.accounting dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.digest-list { margin: 0; }
.digest-list dt { font-size: .86rem; color: var(--muted); margin-top: 18px; }
.digest-list dt:first-child { margin-top: 0; }
.digest-list dd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .81rem; line-height: 1.7; margin: 5px 0 0; overflow-wrap: anywhere; }
.reproduce-command { display: block; border: 1px solid var(--line); background: var(--soft); padding: 12px; margin-top: 12px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; line-height: 1.6; overflow-wrap: anywhere; }
.run-progress { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: .85rem; color: var(--muted); }
.step { padding: 5px 0; }
.step.current { color: var(--blue); font-weight: 650; border-bottom: 2px solid var(--blue); }
.busy-indicator::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-right: 8px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.empty-state { padding: 45px 22px; text-align: center; }
.empty-state h2 { font-size: 1.2rem; margin-bottom: 12px; }
.empty-state p { color: var(--muted); font-size: .93rem; max-width: 540px; margin: 0 auto; }
.empty-state .button { margin-top: 20px; }
.empty-symbol { display: none; }
.empty-small { font-size: .9rem; color: var(--muted); line-height: 1.6; padding: 20px 8px; }
.callout { border-top: 1px solid var(--line); margin-top: 25px; padding-top: 18px; font-size: .88rem; line-height: 1.6; }
.callout strong { font-weight: 600; }
.callout p { color: var(--muted); margin-top: 6px; }
footer { max-width: 1304px; margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; padding: 18px 0 24px; border-top: 1px solid var(--line); font-size: .83rem; color: var(--muted); }
footer a { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .busy-indicator::before { animation: none; } }
@media (max-width: 1100px) {
  .app-header { padding: 0 24px; gap: 30px; }
  nav { gap: 20px; }
  .workspace-status summary { font-size: .78rem; }
  .workspace-grid { grid-template-columns: 260px minmax(0,1fr); gap: 25px; }
  .task-panel { padding-right: 16px; }
  .evidence-grid { grid-template-columns: minmax(0,1.45fr) minmax(270px,1fr); gap: 22px; }
  .variant-card { padding: 0 18px; }
  footer { margin: 0 28px; }
  .error-banner { margin: 18px 28px; }
}
@media (max-width: 900px) {
  .app-header { gap: 24px; flex-wrap: wrap; padding-top: 13px; }
  nav { min-height: 40px; }
  .workspace-status { order: 3; width: 100%; margin: 0; }
  .workspace-status summary { padding: 7px 0 11px; font-size: .82rem; }
  .workspace-status-body { left: 0; right: auto; }
  .evidence-grid { grid-template-columns: minmax(0,1fr); }
  .run-summary { flex-wrap: wrap; gap: 16px; }
  .run-summary .actions { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .app-header { padding: 12px 20px 0; gap: 22px; }
  .brand { font-size: 1.15rem; }
  nav { flex: 1; gap: 19px; min-height: 38px; }
  nav a { font-size: .87rem; }
  nav #demo-link { margin-left: auto; }
  main { padding: 23px 20px 38px; }
  h1 { font-size: 1.6rem; }
  .page-heading { margin-bottom: 22px; gap: 15px; }
  .page-heading > .text-link { font-size: .85rem; }
  .workspace-grid { display: block; }
  .task-panel { display: none; }
  .mobile-task-picker { display: block; margin-bottom: 23px; }
  .mobile-task-picker select { width: 100%; font-size: .91rem; }
  .mobile-task-picker label { font-size: .84rem; }
  .detail-panel > h2, .task-intro h2 { font-size: 1.43rem; }
  .task-description, .task-intro > p { font-size: .92rem; line-height: 1.6; }
  .task-actions { margin-top: 18px; }
  .detail-top { margin-bottom: 10px; }
  .requirements li { font-size: .9rem; gap: 12px; }
  .variant-grid { display: block; }
  .variant-card, .variant-card:first-child, .variant-card:last-child { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 0; }
  .variant-card:first-child { padding-top: 0; }
  .variant-description { min-height: 0; max-width: 540px; }
  .metric-list { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .variant-card .button { margin-top: 12px; }
  .table-scroll-hint { display: block; color: var(--muted); font-size: .83rem; margin: 22px 0 8px; }
  .toolbar { flex-wrap: wrap; gap: 13px; }
  .toolbar > div { flex: 1 1 100%; }
  .toolbar select { width: 100%; }
  .history-row { flex-wrap: wrap; align-items: flex-start; gap: 13px; padding: 18px 0; }
  .history-main { flex: 1 1 100%; }
  .history-result { width: 100%; max-width: none; text-align: left; }
  .history-result .history-meta { justify-content: flex-start; }
  .history-row .outcome { margin-top: 0; white-space: normal; flex: 1; }
  .history-row .button { min-height: 40px; padding: 8px 12px; }
  .run-summary h2, .result-heading, .summary-title { font-size: 1.4rem; }
  .result-tabs { gap: 23px; }
  .result-tabs button { font-size: .88rem; }
  .result-panel { padding-top: 22px; }
  .panel-head, .panel-heading { gap: 12px; }
  .diff { font-size: 12px; max-height: 560px; }
  .line-number { flex-basis: 36px; width: 36px; padding-right: 8px; }
  .line-text { padding: 0 10px; }
  .run-switcher { margin-bottom: 18px; }
  nav { min-height: 44px; }
  summary { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .run-switcher > summary { display: list-item; width: fit-content; }
  .disclosure { padding-top: 5px; padding-bottom: 5px; }
  .page-heading > .text-link, .back-link, .task-actions > .text-link, footer a { min-height: 44px; display: inline-flex; align-items: center; }
  .back-link { margin-bottom: 0; }
  footer { margin: 0 20px; }
  .error-banner { margin: 16px 20px; }
}
@media (max-width: 420px) {
  .app-header { padding-left: 16px; padding-right: 16px; gap: 21px; }
  .brand { font-size: 1.11rem; }
  nav { gap: 16px; }
  nav a { font-size: .84rem; }
  nav #demo-link { margin-left: 0; }
  .workspace-status summary { font-size: .8rem; }
  main { padding: 20px 16px 32px; }
  .page-heading { margin-bottom: 18px; }
  .mobile-task-picker { margin-bottom: 20px; }
  .task-actions { gap: 10px; }
  .task-actions .button.primary { flex: 1 1 auto; }
  .actions .button, .task-actions .button { padding-left: 12px; padding-right: 12px; font-size: .87rem; }
  .task-description, .task-intro > p { font-size: .9rem; }
  .requirements-heading { margin-top: 24px; }
  .allowance-title { flex-wrap: wrap; gap: 7px; }
  .result-tabs { gap: 20px; }
  .result-tabs button { font-size: .86rem; padding-left: 0; padding-right: 0; }
  .result-counts { gap: 8px 15px; }
  .failure-summary, .failure-card { padding: 14px 13px; }
  .candidate-tab { min-height: 44px; padding: 9px; font-size: .83rem; }
  .metric-list { grid-template-columns: 1fr 1fr; }
  .accounting > div { gap: 15px; }
  .event-list li { grid-template-columns: 61px minmax(0,1fr); gap: 13px; }
  .event-time { font-size: .77rem; }
  .review-page-heading { align-items: flex-end; }
  .review-page-heading > .text-link { max-width: 98px; font-size: .83rem; }
  footer { margin: 0 16px; }
  .error-banner { margin: 14px 16px; }
}
@media (max-width: 350px) {
  .app-header { gap: 13px; }
  .brand { font-size: 1rem; }
  nav { gap: 12px; }
  nav a { font-size: .8rem; }
  .workspace-status summary { font-size: .75rem; }
  .result-tabs { gap: 16px; }
  .result-tabs button { font-size: .83rem; }
  .page-heading > .text-link { font-size: .81rem; }
}

/* A first visit follows one recorded repair before entering the workbench. */
.story-introduction { max-width: 920px; margin: 6px 0 24px; }
.story-introduction h1 { max-width: 790px; font-size: clamp(1.7rem, 2.5vw, 2.15rem); line-height: 1.25; letter-spacing: -.7px; }
.story-introduction > p { max-width: 890px; margin-top: 12px; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.page-description { max-width: 890px; color: var(--muted); font-size: .95rem; line-height: 1.6; margin: -9px 0 24px; }
#story { max-width: 1120px; }
.story-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 18px; color: var(--muted); font-size: .85rem; line-height: 1.55; margin-bottom: 17px; }
.story-steps { display: flex; flex-wrap: wrap; gap: 0 25px; margin: 0 0 26px; border-bottom: 1px solid var(--line); }
.story-step { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 11px 1px; color: var(--muted); text-decoration: none; font-size: .91rem; line-height: 1.4; border: 0; border-bottom: 2px solid transparent; background: transparent; border-radius: 0; }
.story-step[aria-current="step"] { border-bottom-color: var(--blue); color: var(--blue); font-weight: 650; }
.story-step:hover { color: var(--ink); background: transparent; }
.story-step[aria-current="step"]:hover { color: var(--blue); border-bottom-color: var(--blue); }
.story-card { min-width: 0; padding: 0; }
.story-kicker { color: var(--muted); font-size: .86rem; line-height: 1.5; margin-bottom: 7px; }
.story-heading { font-size: 1.58rem; line-height: 1.35; letter-spacing: -.4px; max-width: 850px; }
.story-lead { margin-top: 12px; max-width: 860px; color: var(--muted); font-size: .97rem; line-height: 1.65; }
.story-values { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin: 24px 0 18px; align-items: stretch; }
.value-card { min-width: 0; padding: 17px 18px; border: 1px solid var(--line); border-top: 3px solid #8593a8; background: #fafbfd; }
.value-card > label, .value-card > .label, .value-card > strong { display: block; color: #4c596b; font-size: .86rem; font-weight: 600; line-height: 1.45; margin-bottom: 10px; }
.value-card pre { margin: 0; color: var(--ink); font: 13px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.value-card.bad, .story-values .bad { border-top-color: #b84237; background: #fff6f4; }
.value-card.good, .story-values .good { border-top-color: #338256; background: #f0f8f3; }
.value-card.bad > label, .value-card.bad > strong { color: #93382e; }
.value-card.good > label, .value-card.good > strong { color: #246740; }
.value-card mark { color: #872e26; background: #f9d4cf; border-radius: 2px; padding: 1px 3px; }
.value-card p { margin-top: 10px; font-size: .84rem; color: var(--muted); line-height: 1.5; }
.story-explanation { max-width: 850px; font-size: .95rem; line-height: 1.65; margin-top: 17px; }
.story-explanation code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .88em; background: var(--soft); padding: 2px 4px; }
.story-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 25px; padding-top: 21px; border-top: 1px solid var(--line); }
.story-actions .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.story-code-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 24px 0 18px; }
.story-code { min-width: 0; border: 1px solid var(--line); background: #fafbfd; }
.story-code > h3, .story-code > label, .story-code > strong { display: block; padding: 11px 15px; font-size: .87rem; font-weight: 600; line-height: 1.5; border-bottom: 1px solid var(--line); background: var(--soft); }
.story-code pre { max-width: 100%; overflow: auto; margin: 0; padding: 17px 15px; font: 13px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 4; }
.story-code.bad { border-left: 3px solid #b84237; }
.story-code.good { border-left: 3px solid #338256; }
.story-code code { font: inherit; }
.story-requirements { list-style: none; margin: 21px 0 0; padding: 0; max-width: 900px; }
.story-requirements li { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); font-size: .94rem; line-height: 1.6; }
.story-requirements li > :last-child { flex: none; }
.story-requirements .pass, .story-requirements .good { color: var(--green); font-weight: 600; }
.story-requirements .fail, .story-requirements .bad { color: var(--red); font-weight: 600; }
.story-verdict { margin-top: 22px; padding: 17px 20px; border-left: 3px solid var(--green); background: #f0f8f3; font-size: 1rem; line-height: 1.6; max-width: 900px; }
.story-verdict h3 { font-size: 1.08rem; margin-bottom: 7px; }
.story-verdict p + p { margin-top: 7px; }
.story-verdict.bad, .story-verdict.fail { border-left-color: var(--red); background: #fff6f4; }
.story-footnote { color: var(--muted); font-size: .85rem; line-height: 1.6; margin-top: 16px; max-width: 920px; overflow-wrap: anywhere; }
.story-footnote a { color: var(--blue); }
@media (max-width: 1100px) {
  .app-header { gap: 28px; }
  nav { gap: 20px; }
  .story-values { gap: 12px; }
  .value-card { padding: 15px; }
}
@media (max-width: 760px) {
  .app-header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 14px; align-items: center; padding-top: 6px; }
  .brand { grid-column: 1; grid-row: 1; padding: 10px 0; }
  .workspace-status { grid-column: 2; grid-row: 1; order: initial; width: auto; text-align: right; }
  .workspace-status summary { padding: 10px 0; }
  .workspace-status-body { left: auto; right: 0; text-align: left; }
  nav { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: space-between; gap: 12px; width: 100%; min-height: 47px; }
  nav a { min-height: 47px; font-size: .84rem; white-space: nowrap; }
  nav #demo-link { margin-left: 0; }
  .story-introduction { margin-top: 0; margin-bottom: 19px; }
  .story-introduction h1 { font-size: 1.65rem; line-height: 1.3; letter-spacing: -.45px; }
  .story-introduction > p { margin-top: 10px; font-size: .93rem; line-height: 1.6; }
  .story-meta { font-size: .82rem; gap: 4px 12px; margin-bottom: 11px; }
  .story-steps { flex-wrap: nowrap; gap: 18px; margin-bottom: 22px; overflow-x: auto; }
  .story-step { font-size: .85rem; min-height: 46px; white-space: nowrap; }
  .story-heading { font-size: 1.34rem; line-height: 1.35; }
  .story-lead { font-size: .92rem; line-height: 1.6; margin-top: 10px; }
  .story-values { grid-template-columns: 1fr; gap: 10px; margin: 18px 0 16px; }
  .value-card { padding: 11px 14px; border-top: 1px solid var(--line); border-left: 3px solid #8593a8; }
  .value-card.bad, .story-values .bad { border-top-color: var(--line); border-left-color: #b84237; }
  .value-card.good, .story-values .good { border-top-color: var(--line); border-left-color: #338256; }
  .value-card > label, .value-card > .label, .value-card > strong { margin-bottom: 5px; font-size: .83rem; }
  .value-card pre { font-size: 12px; line-height: 1.6; }
  .story-explanation { font-size: .92rem; }
  .story-actions { margin-top: 20px; padding-top: 18px; gap: 8px 16px; }
  .story-code-comparison { grid-template-columns: 1fr; gap: 14px; margin: 18px 0; }
  .story-code pre { font-size: 12px; padding: 14px; }
  .story-requirements li { font-size: .9rem; gap: 14px; }
  .story-verdict { padding: 14px 16px; font-size: .94rem; }
  .story-verdict h3 { font-size: 1rem; }
  .story-footnote { font-size: .83rem; }
  .page-description { font-size: .92rem; }
}
@media (max-width: 350px) {
  nav { gap: 9px; }
  nav a { font-size: .78rem; }
  .story-introduction h1 { font-size: 1.5rem; }
  .story-introduction > p { font-size: .9rem; }
  .story-steps { gap: 16px; }
  .story-step { font-size: .82rem; }
  .story-actions .button.primary { width: 100%; }
}
/* The renderer uses semantic headings and pre elements for the recorded values. */
.value-card > h3 { display: block; margin-bottom: 8px; font-size: .86rem; line-height: 1.45; color: #4c596b; }
.value-card.bad > h3 { color: #93382e; }
.value-card.good > h3 { color: #246740; }
.story-explanation h3 { font-size: .95rem; margin-bottom: 5px; }
.story-code-comparison > div { min-width: 0; }
.story-code-comparison > div > h3 { font-size: .9rem; line-height: 1.5; margin-bottom: 9px; }
pre.story-code { max-width: 100%; overflow: auto; margin: 0; padding: 17px 15px; font: 13px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; tab-size: 4; }
.story-values:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2,minmax(0,1fr)); }
.story-requirements > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding: 15px 0; }
.story-requirements > div:last-child { border-bottom: 1px solid var(--line); }
.story-requirements h3 { font-size: .94rem; font-weight: 550; line-height: 1.6; }
.story-requirements > div > p { flex: none; color: var(--green); font-size: .88rem; font-weight: 600; line-height: 1.6; }
@media (max-width: 760px) {
  .value-card > h3 { font-size: .83rem; margin-bottom: 5px; }
  .story-values:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
  pre.story-code { padding: 14px 12px; font-size: 12px; }
  .story-requirements > div { display: block; padding: 13px 0; }
  .story-requirements > div > p { margin-top: 5px; }
  #story-view:has(.story-step[aria-current="step"]:not([href="#story/bug"])) .story-introduction > p { display: none; }
  .story-actions::before { content: ""; position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; height: calc(70px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
  .story-actions .button.primary { position: fixed; z-index: 11; left: 20px; right: 20px; bottom: calc(13px + env(safe-area-inset-bottom)); width: calc(100% - 40px); min-height: 44px; }
  #story-view { padding-bottom: 15px; }
  body:has(#story-view:not([hidden])) footer { padding-bottom: calc(102px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .story-actions .button.primary { left: 16px; right: 16px; width: calc(100% - 32px); }
}
@media (max-width: 760px) {
  .story-introduction { margin-bottom: 16px; }
  .story-steps { margin-bottom: 16px; }
  .story-meta { margin-bottom: 9px; }
  .story-lead { margin-top: 8px; }
  .story-values { margin-top: 14px; }
}

/* Starting source and requested behavior stay adjacent while choosing a repair. */
.task-jump-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 18px 0 23px; }
.task-jump-links a { font-size: .86rem; min-height: 32px; display: inline-flex; align-items: center; }
.task-briefing { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.task-briefing section { min-width: 0; }
.task-briefing h3, .task-launch > h3 { font-size: 1.06rem; line-height: 1.45; }
.section-description { font-size: .88rem; color: var(--muted); line-height: 1.65; margin: 8px 0 16px; }
.source-browser { border: 1px solid #d0d7de; border-radius: 6px; min-width: 0; overflow: hidden; }
.source-files { display: flex; overflow-x: auto; background: #f6f8fa; border-bottom: 1px solid #d0d7de; }
.source-file { flex: none; padding: 12px 14px; min-height: 44px; color: var(--muted); background: transparent; border: 0; border-right: 1px solid #d0d7de; border-bottom: 2px solid transparent; border-radius: 0; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.source-file[aria-selected="true"] { color: var(--ink); border-bottom-color: #235bc3; background: white; }
.source-code { margin: 0; max-height: 420px; min-height: 180px; padding: 13px 0; overflow: auto; background: white; tab-size: 4; font: 12px/1.75 ui-monospace, SFMono-Regular, Consolas, monospace; }
.source-code > code { display: table; min-width: 100%; font: inherit; }
.source-line { display: table-row; }
.source-line-number { display: table-cell; width: 37px; padding: 0 12px 0 9px; text-align: right; color: #6e7781; user-select: none; }
.source-line-text { display: table-cell; padding-right: 15px; white-space: pre; }
.source-note { padding: 10px 12px; border-top: 1px solid #d0d7de; background: #f6f8fa; font-size: .77rem; color: var(--muted); line-height: 1.6; }
.example-picker { margin-bottom: 12px; }
.example-picker label { display: block; font-size: .81rem; font-weight: 600; margin-bottom: 6px; }
.example-picker select { font-size: .81rem; width: 100%; min-height: 42px; }
.task-example-values { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.example-value { min-width: 0; padding: 12px 14px; background: #f6f8fa; }
.example-value + .example-value { border-top: 1px solid #cfdcd3; }
.example-value.expected { background: #f0f8f3; }
.example-value h4 { margin: 0 0 8px; color: #4c596b; font-size: .81rem; font-weight: 600; line-height: 1.5; }
.example-value.expected h4 { color: #246740; }
.example-value pre { max-height: 230px; overflow: auto; margin: 0; font: 12px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.example-value code { font: inherit; }
.example-requirement { margin-top: 12px; font-size: .83rem; line-height: 1.65; color: var(--muted); }
.input-preservation { margin-top: 9px; font-size: .81rem; font-weight: 600; color: #344b3d; }
.task-contract { margin-top: 25px; }
.task-launch { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 23px; }
.task-launch .task-actions { margin-top: 15px; }
.task-launch .disclosure { margin-top: 18px; }
.task-launch .allowance { border: 0; margin-top: 0; padding-top: 0; }

/* A readable guide to the complete workflow, including its evidence limits. */
.how-page { max-width: 1190px; }
.how-intro { max-width: 835px; margin: 5px 0 30px; }
.how-intro > .eyebrow, .how-section > .eyebrow { color: var(--muted); font-size: .83rem; line-height: 1.5; margin-bottom: 10px; }
.how-intro > p:not(.eyebrow) { color: var(--muted); margin-top: 16px; font-size: 1.02rem; line-height: 1.75; }
.workflow-map { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); list-style: none; margin: 0 0 38px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #f8fafc; }
.workflow-map li { position: relative; padding: 19px 17px; min-width: 0; border-right: 1px solid var(--line); }
.workflow-map li:last-child { border-right: 0; }
.workflow-map span { display: block; color: var(--blue); font-size: .79rem; font-weight: 650; margin-bottom: 8px; }
.workflow-map strong { display: block; font-size: .89rem; line-height: 1.5; }
.workflow-map small { display: block; color: var(--muted); font-size: .79rem; line-height: 1.5; margin-top: 6px; }
.how-content { max-width: 900px; }
.how-section { border-top: 1px solid var(--line); padding: 28px 0 31px; }
.how-section h2 { font-size: 1.3rem; line-height: 1.45; letter-spacing: -.25px; margin-bottom: 15px; }
.how-section > p:not(.eyebrow) { color: var(--muted); font-size: .95rem; line-height: 1.8; margin-top: 13px; }
.how-runtime { padding: 17px 20px; background: #f5f8fe; border-left: 3px solid #527bc2; margin: 20px 0 0; }
.how-runtime h3 { margin-bottom: 7px; }
.how-runtime p { font-size: .89rem; color: var(--muted); line-height: 1.7; }
.outcome-guide { margin: 18px 0; }
.outcome-guide > div { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 20px; padding: 14px 0; border-top: 1px solid #edf0f4; font-size: .9rem; line-height: 1.7; }
.outcome-guide dt { font-weight: 600; }
.outcome-guide dd { margin: 0; color: var(--muted); }
.review-guide, .approach-guide { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 25px; margin: 20px 0; }
.review-guide article, .approach-guide article { border-left: 2px solid #d0d9e7; padding-left: 16px; }
.review-guide h3, .approach-guide h3 { margin-bottom: 6px; font-size: .92rem; }
.review-guide p, .approach-guide p { color: var(--muted); font-size: .88rem; line-height: 1.75; }
.approach-guide { grid-template-columns: repeat(3,minmax(0,1fr)); }
.how-section > .text-link { display: inline-flex; align-items: center; margin-top: 13px; min-height: 44px; }
.how-end { border-top: 1px solid var(--line); padding-top: 28px; max-width: 900px; }
.how-end h2 { font-size: 1.2rem; }
.how-end p { color: var(--muted); margin: 10px 0 18px; font-size: .95rem; }
@media (max-width: 1100px) {
  .task-briefing { grid-template-columns: 1fr; gap: 27px; }
  .task-example-values { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .example-value + .example-value { border-top: 0; border-left: 1px solid #cfdcd3; }
  .workflow-map li { padding: 16px 12px; }
}
@media (max-width: 760px) {
  .app-header > nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 16px; justify-content: start; }
  .app-header > nav a { min-height: 42px; padding: 0; font-size: .82rem; width: fit-content; }
  .task-jump-links { gap: 5px 20px; margin: 13px 0 21px; }
  .task-jump-links a { font-size: .83rem; min-height: 40px; }
  .task-briefing { gap: 27px; }
  .task-briefing h3, .task-launch > h3 { font-size: 1rem; }
  .section-description { font-size: .85rem; }
  .source-code { max-height: 330px; font-size: 11.5px; }
  .source-file { font-size: 11.5px; }
  .source-line-number { width: 32px; padding-right: 9px; padding-left: 7px; }
  .task-example-values { display: block; }
  .example-value + .example-value { border-left: 0; border-top: 1px solid #cfdcd3; }
  .example-requirement { font-size: .82rem; }
  .task-launch > .section-description { margin-bottom: 12px; }
  .workflow-map { grid-template-columns: 1fr; margin-bottom: 26px; }
  .workflow-map li { display: grid; grid-template-columns: 29px minmax(0,1fr); gap: 3px 12px; padding: 13px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .workflow-map li:last-child { border-bottom: 0; }
  .workflow-map span { grid-row: 1 / 3; margin: 3px 0 0; }
  .workflow-map small { margin: 0; }
  .how-intro { margin-top: 0; margin-bottom: 24px; }
  .how-intro > p:not(.eyebrow) { font-size: .94rem; margin-top: 12px; }
  .how-intro .actions { gap: 12px 18px; }
  .how-intro .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  .how-section { padding: 23px 0 25px; }
  .how-section h2 { font-size: 1.15rem; }
  .how-section > p:not(.eyebrow) { font-size: .9rem; line-height: 1.75; }
  .outcome-guide > div { grid-template-columns: 1fr; gap: 4px; font-size: .87rem; }
  .review-guide, .approach-guide { grid-template-columns: 1fr; gap: 18px; }
  .how-runtime { padding: 14px 16px; }
}

/* GitHub-style unified patch: unchanged code stays readable context. */
.github-diff { min-width: 0; margin-top: 20px; }
.diff-overview { color: var(--muted); font-size: .86rem; margin-bottom: 12px; }
.github-diff-file { min-width: 0; border: 1px solid #d0d7de; border-radius: 7px; overflow: hidden; margin-bottom: 18px; }
.github-diff-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #f6f8fa; border-bottom: 1px solid #d0d7de; padding: 12px 16px; font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.github-diff-header strong { overflow-wrap: anywhere; font-weight: 600; }
.diff-stats { white-space: nowrap; color: #57606a; }
.github-diff-scroll { max-height: 640px; overflow: auto; }
.github-diff-table { border-collapse: collapse; width: 100%; table-layout: auto; font: 12px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; }
.github-diff-table td { border: 0; padding: 0; vertical-align: top; }
.github-diff-table .diff-number { min-width: 38px; width: 1%; padding: 0 9px; text-align: right; color: #6e7781; user-select: none; background: #f6f8fa; }
.github-diff-table .diff-sign { width: 1%; min-width: 24px; text-align: center; user-select: none; }
.github-diff-table .diff-source { padding-right: 18px; white-space: pre; }
.diff-source code { font: inherit; background: none; padding: 0; }
.github-diff-row.add { background: #e6ffec; color: #1f2328; }
.github-diff-row.add .diff-number { background: #ccffd8; color: #116329; }
.github-diff-row.remove { background: #ffebe9; color: #1f2328; }
.github-diff-row.remove .diff-number { background: #ffd7d5; color: #82071e; }
.github-diff-row.context { background: #fff; color: #24292f; }
.github-diff-table .diff-hunk td { color: #57606a; background: #ddf4ff; padding: 7px 14px; white-space: pre; }
.github-diff-table .diff-fold td { background: #f6f8fa; text-align: center; }
.diff-fold button { border: 0; border-radius: 0; width: 100%; min-height: 38px; background: transparent; color: #0969da; font: inherit; cursor: pointer; }
.diff-fold button:hover { background: #ddf4ff; }
.diff-eof { display: block; color: #656d76; font-style: italic; padding-left: 12px; }
.diff-raw { overflow: auto; max-height: 600px; }
.story-cases { display: flex; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.story-case { padding: 9px 15px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: .9rem; text-decoration: none; }
.story-case[aria-current="true"] { border-color: var(--blue); color: var(--blue); background: #f2f7fd; font-weight: 600; }
.story-requirements > div > p.fail { color: var(--red); }
.story-source { max-height: 300px; overflow: auto; white-space: pre; background: #f6f8fa; border: 1px solid var(--line); border-radius: 6px; padding: 14px; font: 12px/1.7 ui-monospace, monospace; }
.story-attempts { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .9rem; }
.story-attempts th, .story-attempts td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); }
.story-values pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 285px; overflow: auto; }
@media (max-width: 600px) {
  .github-diff-header { padding: 10px; font-size: 12px; }
  .github-diff-table { font-size: 11px; }
  .github-diff-table .diff-number { padding: 0 6px; min-width: 28px; }
  .story-attempts th, .story-attempts td { padding: 9px 6px; font-size: .8rem; }
}

.source-function-picker { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line); }
.source-function-picker label { flex: none; font-size: .77rem; color: var(--muted); }
.source-function-picker select { min-width: 0; min-height: 32px; border-color: transparent; font: 11.5px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; padding: 5px; flex: 1; }
@media (max-width: 760px) {
  #tasks-view .task-actions:has(.button.primary)::before { content: ""; position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; height: calc(96px + env(safe-area-inset-bottom)); background: white; border-top: 1px solid var(--line); }
  #tasks-view .task-actions .button.primary { position: fixed; z-index: 11; left: 20px; right: 20px; bottom: calc(37px + env(safe-area-inset-bottom)); width: calc(100% - 40px); min-height: 44px; }
  #tasks-view .task-launch:has(.button.primary) .run-cost { position: fixed; z-index: 11; left: 16px; right: 16px; bottom: calc(11px + env(safe-area-inset-bottom)); text-align: center; font-size: .68rem; line-height: 1.5; white-space: nowrap; }
  body:has(#tasks-view:not([hidden])) footer { padding-bottom: calc(114px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  #tasks-view .task-actions .button.primary { left: 16px; right: 16px; width: calc(100% - 32px); }
}