.card.deploy-preview {
  --_card-stage-track-min:320px; aspect-ratio:auto;
  & > .card-heading { text-wrap:balance; }
  & .card-stage { display:grid; grid-template-rows:minmax(245px,1fr) auto; padding:0 24px; }
  & .deploy-window { align-self:center; width:100%; overflow:hidden; background:var(--card-panel); border:1px solid color-mix(in oklab,var(--card-ink) 14%,var(--card-panel)); border-radius:10px; box-shadow:0 8px 18px #18243206; }
  & .deploy-window-bar { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; padding:13px 15px; font:10px/1.4 ui-monospace,monospace; color:var(--card-muted); background:var(--card-wash); border-bottom:1px solid var(--card-line); overflow-wrap:anywhere; }
  & .deploy-branch { padding:2px 5px; border:1px solid var(--card-line); border-radius:4px; }
  & .deploy-commit { display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:8px; align-items:center; padding:18px 15px 14px; }
  & .deploy-commit > svg { width:22px; height:22px; fill:none; stroke:var(--card-muted); stroke-width:1.3; }
  & .deploy-commit strong { font-size:12px; line-height:1.5; font-weight:550; overflow-wrap:anywhere; }
  & .deploy-status { color:var(--_card-accent-ink); background:color-mix(in oklab,var(--card-accent) 8%,var(--card-panel)); font-size:9px; padding:4px 6px; border-radius:20px; white-space:nowrap; }
  & .deploy-progress { margin:0 16px; height:2px; background:var(--card-line); overflow:hidden; }
  & .deploy-progress > span { display:block; width:100%; height:100%; background:var(--card-accent); transform:scaleX(var(--build-progress,1)); transform-origin:left; }
  & .deploy-steps { display:flex; justify-content:space-between; gap:8px; padding:9px 16px 15px; color:var(--card-muted); font-size:9px; line-height:1.5; }
  & .deploy-steps > span[data-ready="true"] { color:var(--_card-accent-ink); }
  & .deploy-result { display:grid; grid-template-columns:86px minmax(0,1fr); gap:15px; padding:16px; border-top:1px solid var(--card-line); align-items:center; opacity:calc(.2 + .8*var(--preview-ready,1)); transform:translateY(calc((1 - var(--preview-ready,1))*6px)); }
  & .deploy-mini { height:82px; background:var(--card-wash); border:1px solid var(--card-line); border-radius:4px; padding:9px; }
  & .deploy-mini > i { display:block; width:35%; height:3px; background:var(--card-muted); opacity:.35; }
  & .deploy-mini > div { display:flex; gap:4px; margin:7px 0; }
  & .deploy-mini b { width:50%; height:33px; border-radius:1px; background:color-mix(in oklab,var(--card-accent) 12%,var(--card-panel)); }
  & .deploy-mini b:first-child { background:color-mix(in oklab,var(--card-accent) 32%,var(--card-panel)); }
  & .deploy-mini > span { display:block; height:2px; width:80%; margin-top:4px; background:var(--card-line); }
  & .deploy-result-copy { display:grid; gap:7px; min-width:0; }
  & .deploy-result-copy small { color:var(--card-muted); font-size:9px; }
  & .deploy-result-copy strong { font:11px/1.4 ui-monospace,monospace; overflow-wrap:anywhere; }
  & .deploy-result-copy > span { color:var(--card-muted); font-size:10px; line-height:1.6; overflow-wrap:anywhere; }
  & .deploy-history { display:flex; gap:18px; padding:18px 0 24px; }
  & .deploy-history button { display:flex; gap:7px; align-items:center; padding:0; border:0; background:transparent; color:var(--card-muted); font-size:11px; cursor:pointer; }
  & .deploy-history i { width:7px; height:7px; border:1px solid var(--card-muted); border-radius:50%; }
  & .deploy-history button[aria-pressed="true"] { color:var(--card-ink); }
  & .deploy-history button[aria-pressed="true"] i { background:var(--card-accent); border-color:var(--card-accent); }
}