/* Trace replay: two recorded runs of one task, side by side, on the site's paper and sheet.
   Timeline colors: message violet, command/GUI input teal, edit amber, read/wait neutral;
   red is reserved for errors and always comes with a marker and a label. */
body[data-page="replays"] {
  --k-message: #6250d6; --k-action: #1baf7a; --k-edit: #eda100; --k-inspect: #c3c5d2; --k-error: var(--mark); --k-start: var(--ink); --k-end: var(--ink);
  --ok: #217752; --ok-wash: #e8f5ee; --warn: #9c5c0c; --warn-wash: #fbf1df; --bad: #b9372c; --bad-wash: #fbebe9;
  --mk: #6250d6; --term-ink: #e9e8f0; --term-faint: #8d8c9c;
  --stage-h: clamp(360px, calc(100vh - 410px), 680px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-page="replays"] {
    --k-message: #9085e9; --k-action: #199e70; --k-edit: #c98500; --k-inspect: #4a4a5a;
    --ok: #62c79b; --ok-wash: #142a20; --warn: #e2a55a; --warn-wash: #2d2314; --bad: #f0786c; --bad-wash: #2f1a18; --mk: #a99fe6;
  }
}
:root[data-theme="dark"] body[data-page="replays"] {
  --k-message: #9085e9; --k-action: #199e70; --k-edit: #c98500; --k-inspect: #4a4a5a;
  --ok: #62c79b; --ok-wash: #142a20; --warn: #e2a55a; --warn-wash: #2d2314; --bad: #f0786c; --bad-wash: #2f1a18; --mk: #a99fe6;
}
.i { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }
.k-message { --k: var(--k-message); } .k-action { --k: var(--k-action); } .k-edit { --k: var(--k-edit); }
.k-inspect { --k: var(--k-inspect); } .k-error { --k: var(--k-error); } .k-start, .k-end { --k: var(--k-start); }
/* Hypothesis Discovery steps: new hypothesis, revised version, version that anticipated later research. */
.k-hypothesis { --k: var(--cap-hd); } .k-revision { --k: color-mix(in srgb, var(--cap-hd) 45%, var(--sheet)); } .k-positive { --k: var(--ok); }
.tk { display: inline-block; background: var(--k); border-radius: 2px; }
.cap-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.cap-sc { background: var(--cap-sc); } .cap-gui { background: var(--cap-gui); } .cap-wd { background: var(--cap-wd); } .cap-ep { background: var(--cap-ep); } .cap-hd { background: var(--cap-hd); }
.logo { width: 20px; height: 20px; flex: none; }
.logo-s { width: 14px; height: 14px; flex: none; display: inline-block; vertical-align: -2px; }
:root[data-theme="dark"] .is-mono { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .is-mono { filter: invert(1); } }
.v-pass { --v: var(--ok); --v-wash: var(--ok-wash); } .v-partial { --v: var(--warn); --v-wash: var(--warn-wash); }
.v-fail, .v-timeout, .v-error { --v: var(--bad); --v-wash: var(--bad-wash); } .v-unscored { --v: var(--muted); --v-wash: var(--paper); }
.v-audited { --v: var(--cap-hd); --v-wash: color-mix(in srgb, var(--cap-hd) 9%, var(--sheet)); }
kbd { font: 500 11px/1 var(--mono); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--rule); border-bottom-width: 2px; background: var(--sheet); color: var(--ink); }

/* Shell and hero */
.tr-shell { max-width: 1480px; margin-inline: auto; padding-inline: max(24px, env(safe-area-inset-left, 0px)); }
.tr-hero { padding: 40px 0 26px; }
.tr-hero h1 { font: 400 clamp(2.3rem, 4.2vw, 3.2rem)/1.04 var(--serif); letter-spacing: -.02em; }
.tr-hero h1 em { font-style: italic; }
.tr-lede { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* Workspace */
.tr-workspace { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 24px; }
.tr-main { min-width: 0; }
#load-message { padding: 40px 4px; color: var(--muted); }
.tr-tasks { position: sticky; top: calc(var(--head-h) + 14px); }
.task-picker { display: flex; flex-direction: column; max-height: calc(100vh - var(--head-h) - 30px); overflow: hidden; border: 1px solid var(--rule); border-radius: 16px; background: var(--sheet); }
.task-picker-summary { display: none; }
.task-picker-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tasks-head, .task-key { flex: none; }
.tasks-head { display: grid; gap: 12px; padding: 14px; border-bottom: 1px solid var(--rule); }
.task-search { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: var(--faint); }
.task-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.task-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 13px var(--sans); }
.task-search input::-webkit-search-cancel-button { cursor: pointer; }
.task-filter { display: grid; gap: 7px; }
.filter-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.filter-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.filter-seg button { display: flex; align-items: baseline; justify-content: center; gap: 5px; min-width: 0; height: 30px; padding: 0 4px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 500 12px/30px var(--sans); cursor: pointer; white-space: nowrap; overflow: hidden; }
.filter-seg button span { font: 10px var(--mono); color: var(--faint); }
.filter-seg button:hover { color: var(--ink); }
.filter-seg button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgb(var(--shadow) / .12), 0 0 0 1px var(--rule); }
.filter-seg button[aria-pressed="true"] span { color: var(--accent); }
#task-tree { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 8px; scrollbar-width: thin; scrollbar-gutter: stable; }
.tasks-cols { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 30px; margin: 0 -8px; padding: 0 18px 0 18px; background: var(--sheet); border-bottom: 1px solid var(--rule); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.cols-models { display: flex; gap: 6px; }
.cols-models span { width: 24px; text-align: center; letter-spacing: 0; text-transform: none; font-size: 10.5px; }
.task-group { padding-top: 4px; }
.task-group + .task-group { margin-top: 4px; border-top: 1px solid var(--rule); }
.task-group > summary { position: sticky; top: 30px; z-index: 2; display: flex; align-items: center; gap: 8px; height: 34px; margin: 0 -8px; padding: 0 18px; background: var(--sheet); box-shadow: 0 1px 0 color-mix(in srgb, var(--rule) 60%, transparent); cursor: pointer; list-style: none; font: 600 12px/1 var(--sans); color: var(--muted); }
.task-group > summary::-webkit-details-marker { display: none; }
.task-group > summary:hover { color: var(--ink); }
.task-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 9px; }
.group-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-group .count { flex: none; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--paper); font: 10px/1.5 var(--mono); letter-spacing: 0; color: var(--faint); text-align: center; }
.group-chev { display: inline-grid; place-items: center; width: 24px; margin-left: auto; color: var(--faint); transition: transform .15s; }
.group-chev .i { width: 14px; height: 14px; }
.task-group:not([open]) .group-chev { transform: rotate(-90deg); }
.task-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; margin: 1px 0; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; position: relative; }
.task-row:hover { background: var(--paper); }
.task-row[aria-current="true"] { background: var(--accent-wash); }
.task-row[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--accent); }
.task-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.task-row-text { min-width: 0; }
.task-row-title { display: block; font: 500 13px/1.35 var(--sans); }
.task-row-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-row-pips { display: flex; gap: 6px; }
.pip { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--v-wash); color: var(--v); }
.pip .i { width: 13px; height: 13px; }
.task-key { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; padding: 10px 14px 12px; border-top: 1px solid var(--rule); font-size: 10.5px; color: var(--muted); }
.task-key span { display: inline-flex; align-items: center; gap: 4px; }
.task-key .i { width: 11px; height: 11px; color: var(--v); }
.empty { padding: 18px 10px; color: var(--muted); font-size: 13px; }

/* Segmented controls */
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 500 12.5px/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.seg button[aria-pressed="true"] .is-mono { filter: invert(1); }
:root[data-theme="dark"] .seg button[aria-pressed="true"] .is-mono { filter: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg button[aria-pressed="true"] .is-mono { filter: none; } }
.seg button span { font: 10px var(--mono); opacity: .6; }

/* Task header */
.tr-task { border: 1px solid var(--rule); border-radius: 18px; background: var(--sheet); padding: 22px 26px 18px; }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.5px; color: var(--muted); }
.cap-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 500; }
.sw { font: 11px/1 var(--mono); padding: 4px 6px; border: 1px solid var(--rule); border-radius: 5px; color: var(--muted); }
.task-title { margin-top: 10px; font: 400 clamp(1.6rem, 2.4vw, 2.05rem)/1.15 var(--serif); letter-spacing: -.015em; }
.task-summary { margin-top: 6px; color: var(--muted); font-size: 14.5px; max-width: 72ch; }
.task-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 14px; }
.link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--accent); font: 500 13px/1.4 var(--sans); text-decoration: none; cursor: pointer; }
.link-btn:hover span { text-decoration: underline; text-underline-offset: 3px; }
.link-btn[aria-expanded="true"] .i:last-child { transform: rotate(180deg); }
.task-id { margin-left: auto; font: 11px var(--mono); color: var(--faint); overflow-wrap: anywhere; }
.task-brief { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.task-brief h3 { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.brief-text, .brief-eval { max-height: 380px; overflow: auto; font-size: 13.5px; line-height: 1.65; color: var(--muted); padding-right: 8px; scrollbar-width: thin; }
.brief-eval p, .brief-eval ul { margin: 6px 0; } .brief-eval ul { padding-left: 18px; list-style: disc; }

/* Markdown subset */
.md p { margin: 0 0 .6em; } .md p:last-child { margin-bottom: 0; }
.md .md-h { font-weight: 600; color: var(--ink); margin-top: .8em; }
.md ul, .md ol { margin: .3em 0 .7em; padding-left: 1.3em; } .md ul { list-style: disc; } .md ol { list-style: decimal; }
.md code { font: .86em var(--mono); background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 0 3px; overflow-wrap: anywhere; }
.md .md-code { font: 11.5px/1.55 var(--mono); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; margin: .4em 0 .7em; }

/* Replay card */
.replay { margin-top: 16px; border: 1px solid var(--rule); border-radius: 18px; background: var(--sheet); }
.transport { position: sticky; top: calc(var(--head-h) + 6px); z-index: 8; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border-bottom: 1px solid var(--rule); border-radius: 18px 18px 0 0; background: color-mix(in srgb, var(--sheet) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.transport-main { display: flex; align-items: center; gap: 8px; }
.play-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; min-width: 124px; padding: 0 18px 0 15px; border: 0; border-radius: 999px; background: var(--ink); color: var(--on-ink); font: 600 14px/1 var(--sans); cursor: pointer; transition: background .15s; }
.play-btn:hover { background: var(--accent-ink); }
.play-btn .i { width: 15px; height: 15px; }
.ghost-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--muted); font: 500 13px/1 var(--sans); cursor: pointer; }
.ghost-btn:hover { color: var(--ink); border-color: var(--faint); }
.control { display: flex; align-items: center; gap: 8px; }
.control-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.control-show { margin-left: auto; }

/* Lanes */
.lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lanes[data-show="sol"], .lanes[data-show="opus"] { grid-template-columns: minmax(0, 1fr); }
.lane { min-width: 0; padding: 16px 18px 14px; }
.lanes[data-show="both"] .lane + .lane { border-left: 1px solid var(--rule); }
.lane-head { display: flex; align-items: center; gap: 10px; }
.lane-head .logo { width: 30px; height: 30px; padding: 6px; border: 1px solid var(--rule); border-radius: 50%; box-sizing: border-box; }
:root[data-theme="dark"] .lane-head .is-mono { border-color: #d3d4c9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lane-head .is-mono { border-color: #d3d4c9; } }
.lane-id { min-width: 0; margin-right: auto; }
.lane-id strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.lane-id span { display: block; font-size: 12px; color: var(--faint); }
.verdict { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; background: var(--v-wash); color: var(--v); font-size: 13px; white-space: nowrap; }
.verdict b { font-weight: 600; } .verdict span { font: 500 12px var(--mono); }
.lane-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 12px; color: var(--faint); }
.lane-facts b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.stage { position: relative; margin-top: 12px; }

/* CLI session */
.session { position: relative; height: var(--stage-h); overflow: auto; padding: 12px 12px 18px 6px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); scrollbar-width: thin; }
.session:focus-visible { outline-offset: 2px; }
.blk { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; margin-bottom: 10px; animation: blk-in .22s ease-out; }
@keyframes blk-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .blk { animation: none; } }
.blk-num { padding-top: 9px; text-align: right; font: 10.5px var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.blk-main { min-width: 0; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); box-shadow: inset 3px 0 0 var(--k); }
.blk.is-current .blk-main { border-color: color-mix(in srgb, var(--accent) 55%, var(--rule)); box-shadow: inset 3px 0 0 var(--k), 0 0 0 3px var(--accent-wash); }
.blk.is-current .blk-num { color: var(--accent); font-weight: 600; }
.blk-start, .blk-end { grid-template-columns: minmax(0, 1fr); margin-left: 34px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); }
.blk-start.is-current, .blk-end.is-current { box-shadow: 0 0 0 3px var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 55%, var(--rule)); }
.blk-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.blk-label span { font-weight: 400; color: var(--faint); }
.blk-label span::before { content: "· "; }
.clamp { position: relative; max-height: 9.6em; overflow: hidden; margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--muted); -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.blk-end { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; background: var(--v-wash); border-color: color-mix(in srgb, var(--v) 25%, var(--rule)); }
.end-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sheet); color: var(--v); }
.end-icon .i { width: 18px; height: 18px; }
.end-title { font-size: 14.5px; color: var(--ink); } .end-title b { color: var(--v); }
.end-sub { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.hd-papers { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 8px; }
.hd-papers li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; font-size: 13px; line-height: 1.45; }
.hd-papers li .more { grid-row: span 2; align-self: start; }
.hd-papers a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ok) 55%, transparent); text-underline-offset: 2px; overflow-wrap: anywhere; }
.hd-papers span { grid-column: 2; color: var(--muted); font-size: 12px; }
.msg { font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.msg + .call, .msg + .batch { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.msg-who { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.msg.is-user .msg-who { color: var(--warn); }
.batch { font-size: 11px; letter-spacing: .04em; color: var(--faint); margin-bottom: -2px; }
.call + .call { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.call-head { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; }
.call-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: color-mix(in srgb, var(--k) 16%, transparent); color: color-mix(in srgb, var(--k) 70%, var(--ink)); }
.call-icon .i { width: 14px; height: 14px; }
.call-head b { font-weight: 600; flex: none; }
.call-sum { min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flag { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-left: auto; padding: 2px 7px; border-radius: 999px; font: 500 11px/1.4 var(--mono); }
.flag + .flag { margin-left: 0; }
.flag .i { width: 12px; height: 12px; }
.flag.is-bad { background: var(--bad-wash); color: var(--bad); } .flag.is-warn { background: var(--warn-wash); color: var(--warn); }
.term { margin: 7px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--code-bg); color: var(--term-ink); font: 11.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.term .prompt { color: #5fd3a6; margin-right: 8px; user-select: none; }
.term .wd { display: block; color: var(--term-faint); font-size: 10.5px; }
.term + .term, .diff + .term, .term + .diff { margin-top: 5px; }
.call-path { margin-top: 5px; } .call-path code { font: 11.5px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.out { margin-top: 6px; }
.out-text { margin: 0; padding: 7px 10px; border-radius: 8px; background: var(--paper); border: 1px solid var(--rule); color: var(--muted); font: 11px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.out-text.is-empty { color: var(--faint); font-style: italic; }
.out-missing { font-size: 12.5px; color: var(--bad); }
.more { margin-top: 5px; padding: 0; border: 0; background: none; color: var(--accent); font: 500 12px var(--sans); cursor: pointer; }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.diff { margin-top: 7px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.diff-file { padding: 5px 10px; font-size: 11.5px; color: var(--muted); background: var(--paper); border-bottom: 1px solid var(--rule); }
.diff-file code { font: 11px var(--mono); overflow-wrap: anywhere; }
.diff pre { margin: 0; font: 11px/1.55 var(--mono); }
.diff pre span { display: block; padding: 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.d-add { background: var(--ok-wash); color: var(--ok); } .d-del { background: var(--bad-wash); color: var(--bad); } .d-hunk, .d-ctx { color: var(--faint); }
.diff + .more { display: block; }
.todos { margin-top: 6px; display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
.todos li { display: flex; gap: 7px; } .todos span { width: 14px; flex: none; color: var(--faint); }
.todo-completed { text-decoration: line-through; text-decoration-color: var(--rule); } .todo-in_progress { color: var(--ink); }
.raw { margin-top: 6px; font-size: 11.5px; color: var(--faint); }
.raw summary { cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.raw summary:hover { color: var(--muted); }
.raw pre { margin-top: 5px; padding: 8px 10px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; font: 10.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.call-shots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.shot { width: 120px; padding: 0; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: var(--plate-dark); cursor: zoom-in; }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shot-note { font-size: 11.5px; color: var(--faint); }
.follow-btn { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ink); color: var(--on-ink); font: 500 12.5px/1 var(--sans); cursor: pointer; box-shadow: 0 8px 20px -8px rgb(var(--shadow) / .45); z-index: 2; }

/* GUI screen */
.screen { display: grid; grid-template-rows: auto auto; gap: 10px; }
.lanes:not([data-show="both"]) .screen { grid-template-columns: minmax(0, 1fr) minmax(260px, 30%); grid-template-rows: auto; align-items: stretch; }
.screen-main { min-width: 0; }
.screen-frame, .screen-card { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--plate-dark); }
.screen-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.screen-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: #9d9cab; font-size: 13px; }
.screen-empty .i { width: 28px; height: 28px; }
.screen-card { background: var(--sheet); border: 1px solid var(--rule); padding: 14px 16px; overflow: auto; aspect-ratio: 16 / 9; }
.screen-card .clamp { max-height: none; -webkit-mask-image: none; mask-image: none; }
.markers { position: absolute; inset: 0; pointer-events: none; }
.mk { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2.5px solid var(--mk); background: color-mix(in srgb, var(--mk) 22%, transparent); box-shadow: 0 0 0 2px rgb(255 255 255 / .85), 0 2px 10px rgb(0 0 0 / .35); }
.mk::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--mk); }
.mk-click::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--mk); opacity: 0; animation: mk-pulse 1s ease-out .05s; }
@keyframes mk-pulse { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.2); } }
@media (prefers-reduced-motion: reduce) { .mk-click::before { animation: none; } }
.mk-move { border-style: dashed; background: transparent; }
.mk-to { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--mk); }
.mk-to::after { display: none; }
.mk b { position: absolute; left: 17px; top: -12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--mk); color: #fff; font: 600 11px/18px var(--sans); text-align: center; box-shadow: 0 0 0 1.5px #fff; }
.mk-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mk-line line { stroke: var(--mk); stroke-width: 3; stroke-dasharray: 7 5; filter: drop-shadow(0 0 1.5px rgb(255 255 255 / .9)); }
.chips { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 11px; border-radius: 999px; background: rgb(16 16 24 / .82); color: #f3f2f8; font: 500 12.5px/1.3 var(--sans); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgb(0 0 0 / .3); }
.chip > span { color: #c9c8d6; font-weight: 400; }
.chip .typed { font: 12px var(--mono); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip kbd { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .25); color: #fff; }
.chip i { font-style: normal; color: #9d9cab; }
.chip.is-bad { background: rgb(120 24 20 / .88); }
.screen-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.seg-mini { background: rgb(16 16 24 / .7); border-color: rgb(255 255 255 / .16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.seg-mini button { height: 24px; padding: 0 10px; color: #d6d5e0; font-size: 12px; }
.seg-mini button:hover { color: #fff; }
.seg-mini button[aria-pressed="true"] { background: #f3f2f8; color: #16151c; }
.tool-btn { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgb(255 255 255 / .16); border-radius: 50%; background: rgb(16 16 24 / .7); color: #f3f2f8; cursor: zoom-in; }
.end-banner { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--v-wash); color: var(--v); font-size: 14px; white-space: nowrap; box-shadow: 0 8px 24px rgb(0 0 0 / .35); }
.end-banner span { font: 500 12.5px var(--mono); }
.screen-notes { min-width: 0; height: 128px; overflow: auto; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); font-size: 13px; scrollbar-width: thin; }
.lanes:not([data-show="both"]) .screen-notes { height: auto; max-height: none; }
.screen-notes .msg { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--rule); }
.acts { display: grid; gap: 6px; }
.acts li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.acts b { font-weight: 600; }
.acts .n { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-right: 5px; border-radius: 9px; background: var(--mk); color: #fff; font-size: 10.5px; }
.res { color: var(--faint); font-size: 12.5px; }
.res.is-bad { color: var(--bad); }
.note-empty { color: var(--muted); font-size: 13px; line-height: 1.55; }
.screen-notes .call-shots { margin-top: 8px; }

/* GUI transcript */
.rows { display: grid; align-content: start; gap: 2px; padding: 6px; }
.row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 6px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; font: 13px/1.45 var(--sans); cursor: pointer; }
.row:hover { background: var(--sheet); }
.row.is-current { background: var(--sheet); border-color: color-mix(in srgb, var(--accent) 55%, var(--rule)); box-shadow: 0 0 0 3px var(--accent-wash); }
.row-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--plate-dark); color: #9d9cab; box-shadow: inset 3px 0 0 var(--k); }
.row-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.row-thumb.is-text { background: var(--sheet); border: 1px solid var(--rule); color: var(--faint); }
.row-thumb .mk, .tip-shot .mk { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-width: 2px; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .85); }
.row-thumb .mk::after, .row-thumb .mk::before, .tip-shot .mk::after, .tip-shot .mk::before { display: none; }
.row-thumb .mk b, .tip-shot .mk b { display: none; }
.row-thumb .mk-line line, .tip-shot .mk-line line { stroke-width: 2; }
.row-text { min-width: 0; padding-top: 2px; overflow-wrap: anywhere; }
.row-num { display: block; font: 10.5px var(--mono); color: var(--faint); }
.row-msg { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); font-style: italic; }
.rows.session { padding: 6px; }

/* Caption, timeline, chapters */
.caption { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.icon-step { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--rule); border-radius: 50%; background: var(--sheet); color: var(--ink); cursor: pointer; transition: border-color .15s; }
.icon-step:hover:not(:disabled) { border-color: var(--ink); }
.icon-step:disabled { opacity: .35; cursor: default; }
.caption-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.caption-text b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.caption-text .tk { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.caption-text span { min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline { position: relative; margin-top: 10px; }
.tl-marks { position: relative; height: 11px; }
.tl-mark { position: absolute; top: 1px; width: 8px; height: 8px; margin-left: -4px; padding: 0; border: 0; border-radius: 1.5px; background: var(--accent); transform: rotate(45deg); opacity: .5; cursor: pointer; transition: opacity .15s, transform .15s; z-index: 2; }
.tl-mark::before { content: ""; position: absolute; inset: -6px; }
.tl-mark.is-past { opacity: 1; }
.tl-mark:hover, .tl-mark:focus-visible { opacity: 1; transform: rotate(45deg) scale(1.3); }
.tl-err { position: absolute; top: 2px; width: 0; height: 0; margin-left: -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--k-error); pointer-events: none; }
.tl-track { position: relative; height: 24px; border-radius: 4px; }
.tl-track:has(.tl-range:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.tl-ticks { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 1px; align-items: end; height: 100%; }
.tl-ticks .tk { height: 100%; border-radius: 1.5px; }
.tl-ticks .k-action { height: 78%; } .tl-ticks .k-inspect { height: 52%; } .tl-ticks .k-start, .tl-ticks .k-end { height: 100%; opacity: .75; }
.tl-shade { position: absolute; top: -1px; bottom: -1px; right: -1px; background: color-mix(in srgb, var(--sheet) 62%, transparent); pointer-events: none; }
.tl-head { position: absolute; top: -5px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 1.5px var(--sheet); pointer-events: none; transition: left .12s linear; }
.tl-head::before { content: ""; position: absolute; left: 50%; top: -3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--sheet); }
.tl-range { position: absolute; inset: -6px 0 -4px; width: 100%; height: calc(100% + 10px); margin: 0; opacity: 0; cursor: pointer; }
.tl-tip { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 12; display: grid; gap: 6px; width: max-content; max-width: min(320px, 100%); padding: 6px; border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); box-shadow: 0 12px 28px -12px rgb(var(--shadow) / .45); pointer-events: none; }
.tip-shot { position: relative; display: block; width: 232px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--plate-dark); }
.tip-shot img { width: 100%; height: 100%; object-fit: cover; }
.tip-text { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 12px; color: var(--muted); }
.tip-text b { color: var(--ink); font-weight: 600; flex: none; }
.tip-text .tk { width: 8px; height: 8px; flex: none; }
.lane-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.chapter-menu { position: relative; flex: 1; min-width: 0; }
.chapter-btn { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 8px 4px 6px; margin-left: -6px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 13px/1.3 var(--sans); cursor: pointer; text-align: left; }
.chapter-btn:hover { background: var(--paper); }
.chapter-btn > .i:first-child { color: var(--accent); }
.chapter-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapter-label span { color: var(--faint); margin-right: 4px; }
.chapter-btn[aria-expanded="true"] > .i:last-child { transform: rotate(180deg); }
.chapter-pop { position: absolute; left: -6px; top: calc(100% + 4px); z-index: 14; width: min(460px, calc(100vw - 48px)); max-width: calc(100% + 60px); max-height: 340px; overflow: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); box-shadow: 0 18px 40px -16px rgb(var(--shadow) / .45); scrollbar-width: thin; }
.chapter-pop.is-up { top: auto; bottom: calc(100% + 4px); }
.chapter-pop button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 13px/1.4 var(--sans); text-align: left; cursor: pointer; }
.chapter-pop button:hover { background: var(--paper); }
.chapter-pop button[aria-current="true"] { background: var(--accent-wash); }
.ch-n { font: 11px var(--mono); color: var(--faint); text-align: right; }
.ch-r { font: 10.5px var(--mono); color: var(--faint); white-space: nowrap; }
.elapsed { flex: none; font: 11.5px var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 11px 18px 13px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); }
.legend-title { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item .tk { width: 10px; height: 10px; border-radius: 2.5px; }
.legend-mark { width: 8px; height: 8px; border-radius: 1.5px; background: var(--accent); transform: rotate(45deg); display: inline-block; }
.legend-keys { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--faint); }
.legend-keys kbd + kbd { margin-left: -2px; }

/* Records and notes */
.tr-records, .tr-about { margin-top: 34px; }
.tr-records h2, .tr-about h2 { font: 400 1.6rem/1.2 var(--serif); letter-spacing: -.01em; }
.records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.record { min-width: 0; display: grid; gap: 12px; align-content: start; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 16px; background: var(--sheet); }
.record header { display: flex; align-items: center; gap: 10px; }
.record header > div { margin-right: auto; } .record header strong { display: block; font-size: 15px; } .record header span { font-size: 12px; color: var(--faint); }
.record-error { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bad); }
.record-error code { font: 12px var(--mono); }
.record-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin: 0; padding: 12px 0; border-block: 1px solid var(--rule); }
.record-facts dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.record-facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.record details { font-size: 13px; }
.record summary { cursor: pointer; color: var(--accent); font-weight: 500; width: max-content; }
.record pre { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); font: 11px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; }
.record .report { margin-top: 8px; } .record .report summary { color: var(--muted); font-weight: 400; }
.records-note { grid-column: 1 / -1; font-size: 13px; color: var(--muted); max-width: 90ch; }
.tr-about { max-width: 820px; padding-bottom: 72px; }
.tr-about p { margin-top: 12px; font-size: 14.5px; line-height: 1.75; color: var(--muted); }
.tr-about code { font: 12.5px var(--mono); }

/* Enlarged screenshot */
#screen-dialog { width: min(1600px, 96vw); max-width: 96vw; max-height: 96vh; padding: 0; border: 1px solid var(--rule); border-radius: 16px; background: var(--sheet); color: var(--ink); }
#screen-dialog::backdrop { background: rgb(12 11 20 / .82); }
.dialog-bar { display: flex; align-items: center; gap: 18px; padding: 12px 16px; }
.dialog-bar p { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); }
.dialog-bar a { color: var(--accent); font-size: 13px; }
.dialog-bar button { height: 32px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink); font: 500 13px var(--sans); cursor: pointer; }
.dialog-body { padding: 0 16px 16px; }
.dialog-body .screen-frame { width: min(100%, calc((96vh - 90px) * 16 / 9)); margin-inline: auto; }
.dialog-body > img { max-height: calc(96vh - 90px); margin-inline: auto; object-fit: contain; }

#trace-content.is-loading { opacity: .5; pointer-events: none; transition: opacity .2s; }
.tr-shell button:focus-visible, .tr-shell a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Responsive */
@media (max-width: 1180px) {
  .tr-workspace { grid-template-columns: 252px minmax(0, 1fr); gap: 18px; }
  .lane { padding-inline: 14px; }
  .control-show { margin-left: 0; }
  .legend-keys { display: none; }
}
@media (max-width: 900px) {
  .tr-workspace { grid-template-columns: minmax(0, 1fr); }
  .tr-tasks { position: static; }
  .task-picker { max-height: none; }
  .task-picker-summary { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
  .task-picker[data-open="true"] .task-picker-summary { border-bottom: 1px solid var(--rule); }
  .task-picker[data-open="false"] .task-picker-body { display: none; }
  .task-picker-current { flex: 1; min-width: 0; display: grid; }
  .task-picker-current span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
  .task-picker-current strong { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .task-picker-toggle { flex: none; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; font-size: 12.5px; color: var(--muted); }
  .task-picker[data-open="true"] .task-picker-toggle { color: var(--ink); }
  #task-tree { max-height: 56vh; }
  .transport { position: static; gap: 10px 14px; border-radius: 18px 18px 0 0; }
  .show-both { display: none !important; }
  .lanes { grid-template-columns: minmax(0, 1fr) !important; }
  .lanes .lane + .lane { border-left: 0 !important; }
  .lanes:not([data-show="both"]) .screen { grid-template-columns: minmax(0, 1fr); }
  .lanes:not([data-show="both"]) .screen-notes { max-height: 220px; }
  .records { grid-template-columns: minmax(0, 1fr); }
  .task-brief { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .tr-shell { padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .tr-hero { padding-top: 28px; }
  .tr-task { padding: 18px; }
  .task-id { margin-left: 0; }
  .transport { padding: 12px; }
  .transport-main { width: 100%; }
  .play-btn { flex: 1; justify-content: center; }
  .control { width: 100%; justify-content: space-between; }
  .control .seg { overflow-x: auto; max-width: calc(100% - 56px); scrollbar-width: none; }
  .lane { padding: 14px 12px 12px; }
  .session { --stage-h: 64vh; padding-left: 2px; }
  .blk { grid-template-columns: 20px minmax(0, 1fr); gap: 6px; }
  .blk-start, .blk-end { margin-left: 26px; }
  .row { grid-template-columns: 96px minmax(0, 1fr); }
  .record-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legend { padding-inline: 12px; }
}