/* Chapter 08 only. Shared rules live in deck.css. */
.scene:is([aria-label="cloud-path"], [aria-label="cloud-holds"], [aria-label="cloud-moves"]) {
  & .dbox.ch08-dim { background: var(--tai-black); border-color: var(--lane-rule); color: #77777a; }
  & .dbox.ch08-still { transform: none !important; border-color: var(--connector-gray); }
  & .ch08-cardsub { color: var(--text-soft); }
  & .ch08-cardsub code { font-family: var(--mono); color: var(--tai-void); }
  & .ch08-amber { color: var(--tai-amber); font-weight: 600; }
  & .ch08-amber.center { text-align: center; font-size: 30px; }
  & .ch08-amber code, & .ch08-frame code, & .ch08-status code, & .ch08-step code { font-family: var(--mono); }
  & .ch08-clock { font: 700 48px/1.1 var(--display); }
  & .ch08-clock-note { margin-top: 8px; font: 400 28px/1.3 var(--body); color: var(--text-soft); }
  & .ch08-wm-title { font: 700 30px/1.2 var(--display); }
  & .ch08-wm-note { position: absolute; left: 0; bottom: 0; font: 400 28px/1.3 var(--body); color: var(--text-soft); }
  & .ch08-track { position: absolute; left: 0; right: 0; top: 190px; height: 2px; background: #6d6d70; }
  & .ch08-mark { position: absolute; top: -34px; width: 3px; height: 70px; background: var(--tai-amber); left: calc(50% + var(--v, 0) * 30%); }
  & .ch08-mark span { position: absolute; left: -60px; top: 80px; font: 600 26px/1 var(--body); color: var(--tai-amber); white-space: nowrap; }
  & .ch08-over { position: absolute; top: -18px; height: 36px; width: 240px; background: var(--lane-rule); left: calc(50% + var(--v, 0) * 30% - 240px); }
  & .ch08-over span { position: absolute; left: 0; top: -40px; font: 400 26px/1 var(--body); color: var(--text-soft); white-space: nowrap; }
  & .ch08-status { padding: 30px; background: #18181a; border: 2px solid var(--panel-rule); font: 400 34px/1.3 var(--body); transform: none !important; display: flex; align-items: center; gap: 12px; }
  & .ch08-status.ch08-fail { background: transparent; }
  & .ch08-time { font: 600 26px/1.15 var(--body); color: var(--tai-amber); white-space: nowrap; }
  & .ch08-time-tight { letter-spacing: -0.01em; }
  & .ch08-total { font-size: 96px; }
  & .ch08-bar { display: flex; background: #1b1b1d; }
  & .ch08-seg { height: 100%; flex: none; box-sizing: border-box; overflow: hidden; }
  & .ch08-seg span { display: block; padding: 18px 20px; font: 700 30px/1 var(--display); color: var(--tai-black); white-space: nowrap; }
  & .ch08-seg.one { background: var(--tai-amber); width: calc(min(var(--v, 0), 0.81739) * 100%); }
  & .ch08-seg.two { background: var(--connector-gray); width: calc((min(var(--v, 0), 0.94783) - min(var(--v, 0), 0.81739)) * 100%); }
  & .ch08-seg.three { background: var(--tai-void); width: calc((var(--v, 0) - min(var(--v, 0), 0.94783)) * 100%); }
  & .ch08-frame { border: 2px dashed #6d6d70; }
  & .ch08-frame span { position: absolute; left: 20px; top: 16px; font: 500 26px/1.2 var(--display); color: var(--text-soft); }
  & .ch08-scanner { padding: 18px; border: 2px dashed var(--tai-amber); display: flex; flex-direction: column; justify-content: center; }
  & .ch08-step { display: flex; align-items: center; }
  & .ch08-step .b-title { font-size: 28px; font-weight: 500; font-family: var(--body); }
  & .ch08-step .b-title code { font-weight: 600; }
  & .ch08-note .m-text { margin-top: 10px; font-size: 32px; line-height: 1.35; }
  & .ch08-note { padding: 18px 28px 20px; }
  & .ch08-u { background: linear-gradient(var(--tai-red), var(--tai-red)) 0 100% / 0 3px no-repeat; }
  & .ch08-u.u1 { background-size: calc(var(--u1, 0) * 100%) 3px; }
  & .ch08-u.u2 { background-size: calc(var(--u2, 0) * 100%) 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  & .ch08-react { display: block; margin-top: 6px; font-size: 28px; }
  & .m-label { background: var(--tai-black); }
  & .counter.ch08-reps { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 14px; }
  & .ch08-reps .c-n, & .ch08-reps .c-l { margin: 0; font: 600 40px/1.2 var(--mono); color: var(--tai-void); }
}
/* The panel behind ch08/approvals. */
.panel-content[aria-label="panel-ch08-approvals"] {
  & .c8-note { font-size: 28px; }
  & .c8-note code { font-family: var(--mono); }
}