/* Four independent app compositions. Shared disclosure/message proportions derive
   from DeepSeek Harness (MIT); see vendor/deepseek-harness/LICENSE and UPSTREAM.md. */
.cc-artboard { position: relative; height: 360px; flex-shrink: 0; margin: 10px -32px -32px -12px; overflow: hidden; isolation: isolate; color: #f4f4f5; --cc-surface: #242529; --cc-layer: #2d2e32; --cc-muted: #9c9fa8; --cc-line: #ffffff12; --cc-blue: #91b5ff; --cc-green: #a3d4b8; --cc-ease: cubic-bezier(.22,1,.36,1); }
.cc-composition { position: absolute; inset: 10px 0 24px; container-type: inline-size; font: 14px/1.5 var(--font-body, 'Geist',sans-serif); }
.cc-composition *, .cc-artboard * { box-sizing: border-box; }
.cc-composition .map-icon { width: 17px; height: 17px; flex-shrink: 0; }
.cc-window { position: absolute; background: #1c1d21; border: .5px solid #ffffff18; border-radius: 16px; box-shadow: 0 10px 34px #00000024; }
.cc-install-terminal, .cc-operator-app, .cc-install-catalog { overflow: hidden; }
.cc-chrome { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 14px; color: #c3c5cb; font-size: 12px; border-bottom: .5px solid var(--cc-line); }
.cc-traffic { display: flex; align-items: center; gap: 4px; }
.cc-traffic i { width: 5px; height: 5px; background: #666872; border-radius: 50%; }
.cc-chrome-right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--cc-muted); }
.cc-online { width: 5px; height: 5px; border-radius: 50%; background: var(--cc-green); }
.cc-caption { color: var(--cc-muted); font-size: 11px; }
.cc-package { display: flex; align-items: center; min-width: 0; gap: 10px; }
.cc-package > div { min-width: 0; display: grid; gap: 2px; }
.cc-package-name { color: #f4f4f5; font-size: 17px; letter-spacing: -.025em; }
.cc-composition .ecosystem { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: #31527638; color: #7aaad4; padding: 7px; }
.cc-composition .ecosystem svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.cc-composition .ecosystem-npm { color: #dc7d7d; background: #8d3e3e2b; }
.cc-composition .ecosystem-ubuntu { color: #df8b6e; background: transparent; }
.cc-user-message { padding: 12px 16px; border-radius: 16px; color: #f6f6f7; background: #323338; font-size: 17px; line-height: 1.5; letter-spacing: -.02em; }
.cc-input-cursor { display: inline-block; width: 1px; height: 1em; background: currentColor; vertical-align: -.1em; margin-left: 2px; }
.cc-playback { position: absolute; z-index: 9; right: 12px; bottom: 6px; width: 36px; height: 36px; border: 0; padding: 10px; border-radius: 50%; background: #ffffff12; color: var(--text); cursor: pointer; opacity: 0; transition: opacity 150ms ease; }
.product-feature:hover .cc-playback, .product-feature:focus-within .cc-playback { opacity: 1; }
.cc-playback svg { display: block; width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.cc-playback[hidden], .cc-playback [hidden] { display: none !important; }
.cc-playback:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.cc-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 1. A close-up of the action and its result, without an application shell.
   Main sentence 26px; receipt name 27px; state 16px. No scale transform. */
.cc-request { inset: 10px 0 24px; display: flex; flex-direction: column; padding-top: 8px; }
.cc-request-message { position: relative; flex-shrink: 0; margin: 0 7% 0 13%; word-break: keep-all; padding: 18px 48px 18px 22px; border-radius: 22px; font-size: clamp(22px, 5.2cqw, 26px); line-height: 1.35; transform:none; }
.cc-send { position: absolute; bottom: 17px; right: 14px; display: grid; place-items: center; height: 30px; width: 30px; border-radius: 50%; background: #ededef; color: #252529; font-size: 23px; line-height: 1; opacity: calc(1 - var(--send,0)); transform: translateY(calc(-5px * var(--send,0))); }
.cc-request-message .cc-input-cursor { opacity: calc(1 - var(--send,0)); }
.cc-request-response { position: relative; flex-shrink: 0; margin: 24px 7% 0 6%; display: flex; align-items: center; gap: 12px; color: var(--text); font-size: 21px; line-height: 1.4; opacity: var(--reply,0); transform: translateY(calc(8px * (1 - var(--reply,0)))); }
.cc-request-response .cc-spark { color: var(--cc-blue); font-size: 29px; line-height: 1; }
.cc-request-result { position: relative; flex-shrink: 0; margin: 16px 6% 0; opacity: var(--receipt,0); transform: translateY(calc(16px * (1 - var(--receipt,0)))); }
.cc-request-result-label { color: var(--muted); font-size: 13px; line-height: 1.4; margin: 0 0 10px 3px; }
.cc-request-receipt { display: flex; align-items: center; gap: 16px; min-height: 94px; padding: 17px 20px; border-radius: 18px; background: #24262b; }
.cc-request-receipt .ecosystem { width: 50px; height: 50px; flex-basis: 50px; padding: 9px; border-radius: 14px; }
.cc-request-identity { display: grid; gap: 4px; min-width: 0; }
.cc-request-name { font-size: 27px; letter-spacing: -.025em; line-height: 1.2; }
.cc-request-status { color: #adb5c3; font-size: 16px; line-height: 1.4; }
.cc-request-check { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; margin-left: auto; border-radius: 50%; color: var(--cc-green); background: #91c4a812; font-size: 18px; opacity: var(--receipt-done,0); }
/* 2. A large selected file and its evidence, with no window frame or toolbar. */
.cc-review-files { position: absolute; top: 8px; left: 6%; right: 6%; height: 96px; overflow: hidden; border-radius: 18px; }
.cc-file-lane { display: grid; gap: 14px; transform: translateY(calc(-1px * var(--file-offset,0))); }
.cc-file { height: 96px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; background: #24262b; border-radius: 18px; }
.cc-file > div { min-width: 0; font-size: 22px; line-height: 1.25; color: #f4f4f5; }
.cc-file > div > span { display: block; overflow-wrap: anywhere; }
.cc-file small { display: block; color: #adb5c3; font-size: 14px; line-height: 1.4; margin-top: 4px; }
.cc-file-icon { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; color: #a3b7dd; background: #7997d119; }
.cc-file-icon .ecosystem { width: 46px; height: 46px; flex-basis: 46px; padding: 8px; border-radius: 12px; }
.cc-file-icon .map-icon { width: 25px; height: 25px; }
.cc-file-json { color: #b09bdd; background: #9b7dc41a; }
.cc-file-report { color: #a2c6b2; background: #7db49c1a; }
.cc-review-evidence { position: absolute; top: 128px; left: 6%; right: 7%; color: var(--text); }
.cc-evidence-caption { color: var(--muted); font-size: 14px; line-height: 1.4; margin-bottom: 8px; }
.cc-evidence-heading { display: flex; align-items: flex-start; gap: 10px; font-size: 24px; line-height: 1.3; letter-spacing: -.025em; }
.cc-evidence-heading > span:first-child { color: #82af95; }
.cc-evidence-details { display: grid; gap: 8px; margin-top: 18px; font-size: 17px; line-height: 1.4; }
.cc-evidence-details > div { display: grid; grid-template-columns: 100px 1fr; gap: 12px; }
.cc-evidence-details > div > span:first-child { color: var(--muted); font-size: 15px; }
.cc-evidence-details > div > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.cc-review-human { display: flex; align-items: flex-start; gap: 9px; margin-top: 22px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.cc-review-human .map-icon { width: 19px; height: 19px; }
/* 3. The install command and its durable result, without a terminal window. */
.cc-install { padding: 8px 6% 0; }
.cc-install-source { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:15px; }
.cc-install-source .ecosystem { width:28px; height:28px; flex-basis:28px; padding:4px; background:transparent; }
.cc-shell-command { margin-top:22px; min-height:76px; color:var(--text); font:23px/1.5 var(--font-mono,'Geist Mono',monospace); overflow-wrap:anywhere; letter-spacing:-.035em; }
.cc-dollar { color:var(--muted); }
.cc-install .cc-input-cursor { opacity:calc(1 - var(--logs,0)); }
.cc-install-output { min-height:96px; margin-top:8px; font:17px/1.7 var(--font-mono,'Geist Mono',monospace); color:var(--muted); }
.cc-install-log { display:flex; gap:10px; opacity:var(--log,0); transform:translateY(calc(8px * (1 - var(--log,0)))); }
.cc-install-log > span:first-child { color:#82af95; }
.cc-install-result { display:flex; align-items:center; gap:14px; margin-top:14px; color:var(--text); opacity:var(--result-visible,0); transform:translateY(calc(10px * (1 - var(--result-visible,0)))); }
.cc-result-check { color:#82af95; font-size:28px; }
.cc-install-result > div { display:grid; gap:3px; }
.cc-result-title { font-size:24px; line-height:1.3; letter-spacing:-.025em; }
.cc-result-package { color:var(--muted); font-size:16px; }
/* 4. The operator's question opens one finding, its evidence and next action. */
.cc-operator { padding:4px 6% 0; }
.cc-operator-question { min-height:100px; margin-left:7%; padding:17px 20px; font-size:25px; line-height:1.35; word-break:keep-all; }
.cc-operator-question .cc-input-cursor { opacity:calc(1 - var(--answer,0)); }
.cc-operator-working { display:flex; flex-wrap:wrap; gap:6px 14px; min-height:24px; margin:10px 0 6px; color:var(--muted); font-size:13px; }
.cc-operator-working > span { opacity:var(--event,0); }
.cc-operator-finding { opacity:var(--finding,0); transform:translateY(calc(12px * (1 - var(--finding,0)))); color:var(--text); }
.cc-operator-answer { display:flex; align-items:flex-start; gap:10px; font-size:24px; line-height:1.3; letter-spacing:-.025em; }
.cc-operator-answer > span:first-child { color:#91b5ff; font-size:28px; }
.cc-operator-evidence { display:flex; align-items:center; gap:12px; margin:20px 0 18px 2px; }
.cc-operator-evidence .map-icon { width:29px; height:29px; color:var(--muted); }
.cc-operator-evidence > div { display:grid; gap:3px; font-size:20px; line-height:1.3; }
.cc-operator-evidence small { font-size:15px; color:var(--muted); }
.cc-operator-next { display:grid; gap:5px; font-size:17px; line-height:1.4; }
.cc-operator-next > span:first-child { font-size:13px; color:var(--muted); }
.cc-operator-context { display:block; margin-top:10px; color:var(--muted); font-size:13px; }
@media (max-width:760px) {
 .cc-artboard { margin-inline: -12px -24px; margin-bottom: -24px; height: 366px; }
 .cc-composition { top: 12px; }
 .cc-chrome { font-size: 10px; padding-inline: 10px; gap: 8px; }
 .cc-chrome-right { font-size: 9px; }
 .cc-request { padding-top: 0; }
 .cc-request-message { margin-inline: 9% 7%; font-size: 23px; padding: 16px 38px 16px 18px; border-radius: 20px; }
 .cc-send { width: 27px; height: 27px; right: 9px; bottom: 13px; font-size: 21px; }
 .cc-request-response { margin-inline: 5% 7%; gap: 9px; font-size: 18px; }
 .cc-request-response .cc-spark { font-size: 25px; }
 .cc-request-result { margin-inline: 5% 6%; }
 .cc-request-receipt { gap: 12px; padding: 16px; min-height: 96px; }
 .cc-request-receipt .ecosystem { width: 42px; height: 42px; flex-basis: 42px; padding: 7px; border-radius: 12px; }
 .cc-request-name { font-size: 25px; }
 .cc-request-status { font-size: 14px; }
 .cc-request-check { flex-basis: 22px; width: 22px; height: 22px; font-size: 15px; }
 .cc-file { padding: 12px 14px; gap: 10px; }
 .cc-file > div { font-size: 20px; }
 .cc-file small { font-size: 13px; }
 .cc-file-icon, .cc-file-icon .ecosystem { width: 40px; height: 40px; flex-basis: 40px; }
 .cc-review-evidence { top: 126px; }
 .cc-evidence-heading { font-size: 22px; }
 .cc-evidence-details { font-size: 15px; gap: 7px; margin-top: 15px; }
 .cc-evidence-details > div { grid-template-columns: 76px 1fr; gap: 8px; }
 .cc-evidence-details > div > span:first-child { font-size: 14px; }
 .cc-review-human { font-size: 14px; margin-top: 18px; }
 .cc-shell-command { font-size:20px; margin-top:20px; }
 .cc-install-source { font-size:13px; }
 .cc-install-output { font-size:15px; }
 .cc-result-title { font-size:22px; }
 .cc-result-package { font-size:14px; }
 .cc-operator-question { font-size:23px; padding:16px 18px; }
 .cc-operator-answer { font-size:22px; }
 .cc-operator-evidence > div { font-size:20px; }
 .cc-operator-evidence { margin-block:16px; }
 .cc-operator-next { font-size:15px; }

}
@media (hover:none) { .cc-playback { opacity: 1; } }
@media (prefers-reduced-motion:reduce) { .cc-artboard * { transition: none !important; animation: none !important; } }

/* Adapted product primitives: FileCard's icon/name/meta stack and
   DisclosureRow's leading/title row. Static MIT SVG artwork is in harness_display.py. */
.cc-product-icon { width:24px; height:24px; display:block; flex:none; }
.cc-product-file-icon { width:36px; height:36px; display:block; flex:none; }
.cc-file-icon { background:transparent; }
.cc-file-icon .cc-product-file-icon { width:40px; height:40px; }
.cc-result-check .cc-product-icon { width:28px; height:28px; }
.cc-operator-answer > span:first-child { padding-top:3px; }
.cc-operator-answer .cc-product-icon { width:25px; height:25px; }
.cc-operator-working { align-items:center; gap:7px; }
.cc-operator-working > .cc-product-icon { width:16px; height:16px; }
.cc-operator-working > div { position:relative; flex:1; height:22px; min-width:0; }
.cc-operator-working [data-cap-event] { position:absolute; inset:0; opacity:var(--event,0); }
.cc-operator-evidence { min-height:70px; padding:12px 14px; gap:12px; border:.5px solid #ffffff18; border-radius:16px; background:#24262b; margin:16px 0; color:#f4f4f5; }
.cc-operator-evidence small { color:#adb5c3; }
.cc-operator-evidence .cc-product-file-icon { width:36px; height:36px; }
@media (max-width:760px) {
 .cc-operator-evidence { margin-block:12px; }
 .cc-operator-evidence > div { font-size:20px; }
 .cc-operator-evidence small { font-size:14px; }
 .cc-operator-working { font-size:13px; }
}

/* One product vocabulary across all four close-ups. */
.cc-artboard { --cc-attachment-bg:#24262b; --cc-attachment-border:#ffffff18; --cc-attachment-text:#f4f4f5; --cc-attachment-meta:#adb5c3; --cc-message-bg:#323338; --cc-radius:18px; }
.cc-user-message { background:var(--cc-message-bg); border-radius:22px; }
.cc-request-message, .cc-operator-question { font-size:25px; line-height:1.35; min-height:100px; }
.cc-request-message { padding:18px 48px 18px 20px; }
.cc-send .cc-product-icon { width:18px; height:18px; }
.cc-request-response { font-size:24px; line-height:1.3; gap:10px; }
.cc-request-response .cc-spark { padding-top:3px; }
.cc-request-response .cc-product-icon { width:25px; height:25px; }
.cc-attachment { background:var(--cc-attachment-bg); border:.5px solid var(--cc-attachment-border); border-radius:var(--cc-radius); color:var(--cc-attachment-text); }
.cc-request-receipt { min-height:96px; padding:16px 18px; gap:14px; }
.cc-request-receipt .ecosystem { width:40px; height:40px; flex-basis:40px; border-radius:12px; padding:6px; }
.cc-request-name { font-size:26px; }
.cc-request-status, .cc-file small, .cc-operator-evidence small { color:var(--cc-attachment-meta); font-size:15px; }
.cc-request-check { background:transparent; width:28px; height:28px; flex-basis:28px; }
.cc-request-check .cc-product-icon, .cc-evidence-heading .cc-product-icon { width:25px; height:25px; }
.cc-evidence-heading > span:first-child { padding-top:2px; }
.cc-review-human .cc-product-icon { width:19px; height:19px; }
.cc-file { gap:14px; }
.cc-file-icon { flex-basis:40px; width:40px; height:40px; }
.cc-operator-evidence { border-radius:var(--cc-radius); }
@media (max-width:760px) {
 .cc-request-message, .cc-operator-question { font-size:23px; }
 .cc-request-message { padding:16px 38px 16px 18px; }
 .cc-request-response { font-size:22px; }
 .cc-request-name { font-size:24px; }
 .cc-request-status, .cc-file small, .cc-operator-evidence small { font-size:14px; }
 .cc-request-receipt { padding:14px; gap:12px; }
 .cc-request-check { flex-basis:25px; }
 .cc-file { gap:12px; }
}
.cc-artboard { --cc-assistant:#91b5ff; --cc-success:#82af95; }
html[data-theme="light"] .cc-artboard { --cc-assistant:#466aa7; --cc-success:#48745c; }
.cc-request-response .cc-spark, .cc-operator-answer > span:first-child { color:var(--cc-assistant); }
.cc-request-check, .cc-evidence-heading > span:first-child, .cc-result-check, .cc-install-log > span:first-child { color:var(--cc-success); }
.cc-attachment { --cc-success:#a3d4b8; }

/* Finish -> readable result -> collapse details -> next whole work item.
   Two panes crossfade as whole work items; no completed state is played backwards. */
.cc-composition { transform:translateY(calc(var(--pane-y,0) * 1px)); opacity:var(--pane-opacity,1); will-change:transform,opacity; }
.cc-review-evidence { opacity:var(--evidence-opacity,1); }
.cc-install-output { min-height:0; height:calc(96px * (1 - var(--collapse,0))); overflow:hidden; opacity:var(--details-opacity,1); }
.cc-operator-working { min-height:0; height:calc(24px * (1 - var(--collapse,0))); overflow:hidden; opacity:var(--details-opacity,1); margin-top:calc(10px * (1 - var(--settle,0))); margin-bottom:calc(6px * (1 - var(--settle,0))); }
.cc-request-message { opacity:var(--details-opacity,1); }
.cc-request-response { margin-top:calc(24px - 16px * var(--settle,0)); }

.cc-request-compose { display:grid; grid-template-rows:var(--detail-rows,1fr); flex-shrink:0; }
.cc-request-compose > div { min-height:0; overflow:hidden; }

[data-cap-log][hidden] { display:none!important; }