.cs { margin-top: clamp(32px, 4vw, 44px); }
.cs-window { border-radius: 6px; overflow: hidden; background: var(--surface); border: 1px solid var(--rule-2); }
.cs-top { display: flex; align-items: center; gap: 22px; height: 50px; padding: 0 18px; border-bottom: 1px solid var(--rule); }
.cs-brand { font: 700 16px/1 var(--sans); letter-spacing: .03em; color: var(--ink); }
.cs-brand b { color: var(--signal-fill); }
.cs-tabs { display: flex; gap: 2px; }
.cs-tabs span { font: 500 13px/1 var(--sans); color: var(--ink-3); padding: 8px 11px; border-radius: 5px; transition: color .3s, background-color .3s; }
.cs-tabs span.on { color: var(--ink); background: var(--bg-2); }
.cs-clock { margin-left: auto; font: 500 14px/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cs-body { display: grid; grid-template-columns: 220px minmax(0, 1fr) 280px; height: 420px; }

.cs-stream { border-right: 1px solid var(--rule); padding: 14px 12px; overflow: hidden; background: var(--surface-2); }
.cs-stream > b { display: block; font: 500 12px/1 var(--sans); color: var(--ink-3); margin-bottom: 12px; }
.cs-lines { display: grid; gap: 7px; }
.cs-ln { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 6px; font: 400 10.5px/1.35 var(--mono); color: var(--ink-3); opacity: 0; transition: opacity .4s; }
.cs-ln.in { opacity: 1; }
.cs-ln b { font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-ln i { grid-column: 2; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-ln.k1 b, .cs-ln.k1 i { color: var(--signal); }

.cs-stage { position: relative; padding: 20px 22px; overflow: hidden; transition: opacity .2s; }
.cs-stage.swap { opacity: 0; }
.cs-stage.dim .cs-evl:not(.cite) { color: var(--ink-3); }
.cs-ops { display: grid; gap: 14px; }
.cs-count { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--ink-2); }
.cs-count span { color: var(--ink-3); }
.cs-count b { font: 600 22px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.cs-count em { font-style: normal; }
.cs-card { opacity: 0; transition: opacity .6s; border-radius: 6px; border: 1px solid var(--rule-2); background: var(--surface); }
.cs-card.in { opacity: 1; }
.cs-sit { padding: 14px 16px; }
.cs-kind { font: 500 12.5px/1.3 var(--sans); color: var(--signal); }
.cs-title { margin: 6px 0 5px; font: 600 19px/1.3 var(--serif); color: var(--ink); }
.cs-sit p { margin: 0; font: 400 12px/1.45 var(--mono); color: var(--ink-3); }
.cs-keep { font-weight: 500; color: var(--ok); }

.cs-board__h, .cs-row { display: grid; grid-template-columns: minmax(0, 1fr) 60px; gap: 12px; }
.cs-board__h { font: 500 12px/1 var(--sans); color: var(--ink-3); padding: 0 10px 10px; border-bottom: 1px solid var(--rule-2); }
.cs-board__h span:last-child, .cs-row span { text-align: right; }
.cs-row { align-items: center; padding: 12px 10px; border-bottom: 1px solid var(--rule); transition: background-color .5s; opacity: 0; animation: rowin .45s ease forwards; }
.cs-row:nth-child(3) { animation-delay: .08s; } .cs-row:nth-child(4) { animation-delay: .16s; }
@keyframes rowin { from { opacity: 0; } to { opacity: 1; } }
.cs-row b { font: 500 14px/1.35 var(--sans); color: var(--ink); }
.cs-row span { font: 400 12px var(--mono); color: var(--ink-3); }
.cs-row.pick { background: var(--signal-tint); }

.cs-tiles { display: grid; margin-top: 14px; border-top: 1px solid var(--rule-2); }
.cs-tile { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); opacity: 0; transition: opacity .5s; }
.cs-tile.in { opacity: 1; }
.cs-tile span { grid-row: 1 / span 2; font: 500 12.5px/1.35 var(--sans); color: var(--ink-3); }
.cs-tile b { font: 500 13.5px/1.35 var(--sans); color: var(--ink); }
.cs-tile em { font: 400 11.5px/1.45 var(--mono); color: var(--ink-3); font-style: normal; }

.cs-ev { margin-top: 12px; display: grid; gap: 3px; }
.cs-evl { display: grid; grid-template-columns: 64px 104px minmax(0, 1fr) 26px; gap: 8px; align-items: center; padding: 6px 9px; border-radius: 4px; font: 400 11.5px/1.3 var(--mono); color: var(--ink-2); border: 1px solid transparent; transition: background-color .4s, border-color .4s; }
.cs-evl b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-evl i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-evl sup { color: var(--ink-2); font: 500 11px var(--mono); opacity: 0; transition: opacity .4s; }
.cs-evl.cite { background: var(--bg-2); border-color: var(--rule-2); color: var(--ink); }
.cs-evl.cite sup { opacity: 1; }

.cs-report { position: relative; height: 100%; display: grid; place-items: center; }
.cs-page { width: 250px; padding: 20px; display: grid; align-content: start; gap: 8px; border-radius: 4px; background: var(--surface); border: 1px solid var(--rule-2); opacity: 0; transition: opacity .5s; margin-bottom: 28px; }
.cs-report.built .cs-page { opacity: 1; }
.cs-rk { font: 500 11px/1 var(--sans); color: var(--signal); }
.cs-ptitle { font: 600 16px/1.3 var(--serif); color: var(--ink); }
.cs-page ul { margin: 4px 0; padding-left: 16px; font: 400 12px/1.7 var(--sans); color: var(--ink-2); }
.cs-page em { font: italic 400 11.5px/1.4 var(--sans); color: var(--ink-3); }
.cs-ready { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 18px; font: 500 12px/1 var(--sans); color: var(--ok); opacity: 0; transition: opacity .5s .5s; }
.cs-report.built .cs-ready { opacity: 1; }

.cs-raven { border-left: 1px solid var(--rule); padding: 16px; background: var(--surface-2); overflow: hidden; transition: background-color .5s; }
.cs-raven.focus { background: var(--bg-2); }
.rv-h { display: block; font: 600 13px/1 var(--sans); color: var(--ink); }
.rv-hi { margin: 8px 0 12px; font: 500 14px/1.4 var(--sans); color: var(--ink-2); }
.rv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-chips span { font: 400 12px/1 var(--sans); color: var(--ink-2); padding: 6px 9px; border-radius: 5px; border: 1px solid var(--rule-2); background: var(--surface); }
.rv-chips span.pick { color: var(--ink); border-color: var(--ink); font-weight: 500; }
.rv-a { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-2); font: 400 13px/1.55 var(--sans); color: var(--ink); }
.rv-a p { margin: 0; }
.rv-a sup { font: 500 10px var(--mono); color: var(--ink-3); margin-left: 1px; transition: color .3s, background-color .3s; border-radius: 2px; }
.rv-a sup.lit { color: var(--ink); background: var(--signal-tint); }
.rv-next { display: block; margin-top: 10px; font: 400 12px/1.45 var(--sans); color: var(--ink-2); }

.cs-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; margin-top: 14px; }
.cs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cs-steps li { display: flex; }
.cs-steps button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 3px; align-content: start; width: 100%; padding: 10px 12px 12px; border-radius: 6px; border: 1px solid var(--rule); background: var(--surface); position: relative; overflow: hidden; }
.cs-steps button:hover { border-color: var(--rule-2); }
.cs-steps button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.cs-steps .n { font: 400 12px/1 var(--mono); color: var(--ink-3); }
.cs-steps .t { font: 500 14px/1.3 var(--sans); color: var(--ink-2); }
.cs-steps .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--signal); }
.cs-steps button[aria-current] { border-color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--ink-3); }
.cs-steps button[aria-current] .t { color: var(--ink); }
.cs-play { font: 500 13px/1 var(--sans); color: var(--ink-2); background: transparent; border: 1px solid var(--rule-2); border-radius: 6px; padding: 9px 12px; cursor: pointer; white-space: nowrap; }
.cs-play:hover { color: var(--ink); border-color: var(--ink-3); }
.cs-play[hidden] { display: none; }

.console-text { margin: 32px 0 0; padding-left: 20px; color: var(--ink-2); display: grid; gap: 6px; }

@media (max-width: 1080px) { .cs-body { grid-template-columns: minmax(0, 1fr) 260px; } .cs-stream { display: none; } }
@media (max-width: 760px) {
  .cs-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .cs-stage { min-height: 360px; }
  .cs-raven { border-left: 0; border-top: 1px solid var(--rule); min-height: 220px; }
  .cs-tabs { display: none; }
  .cs-foot { grid-template-columns: minmax(0, 1fr); }
  .cs-play { justify-self: start; }
  .cs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-tile { grid-template-columns: minmax(0, 1fr); } .cs-tile span { grid-row: auto; }
  .cs-evl { grid-template-columns: 58px minmax(0, 1fr) 24px; } .cs-evl b { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cs-row { animation: none; opacity: 1; } .cs-card, .cs-tile, .cs-ln, .cs-page { transition: none; } }