/* context scene: no CSS transitions here, GSAP owns every animated property */
.sc-ctx { position: absolute; inset: 0; }
.sc-ctx-head { position: absolute; left: 0; top: 0; width: 560px; margin: 0; }
.sc-ctx-head .cap { font-family: var(--mono); font-size: 17px; font-weight: 400; }
.sc-ctx-n { color: var(--fg); font-weight: 700; display: inline-block; min-width: 1ch; text-align: right; }

/* where trimmed messages end up */
.sc-ctx-lane { position: absolute; left: 0; top: 46px; width: 560px; height: 58px; border-radius: 12px; border: 1.5px dashed rgba(255,91,79,.45);
  display: flex; align-items: center; padding-left: 16px; }
.sc-ctx-lane span { font-size: 17px; color: #ff8f86; }
.sc-ctx-lost { position: absolute; left: 112px; top: 54px; right: 618px; height: 42px; border-radius: 10px; background: rgba(255,91,79,.18);
  border: 1.5px solid var(--red); display: flex; align-items: center; gap: 12px; padding: 0 14px; font-family: var(--mono); font-size: 17px; color: #ffb3ad;
  white-space: nowrap; overflow: hidden; }
.sc-ctx-lost .x { color: var(--red); font-weight: 700; }

/* the window: solid, so trimmed messages leave through its top edge */
.sc-ctx-win { position: absolute; left: 0; top: 118px; width: 560px; height: 652px; border-radius: 18px; border: 2px solid var(--fg2);
  background: #1d1d1d; overflow: hidden; }
.sc-ctx-m { position: absolute; left: 10px; right: 10px; top: 6px; height: 72px; border-radius: 12px; padding: 8px 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px; background: rgba(255,255,255,.07); overflow: hidden; will-change: transform; }
.sc-ctx-m.a { background: rgba(47,127,224,.24); }
.sc-ctx-m .who { position: relative; font-family: var(--mono); font-size: 15px; color: var(--mute); display: flex; gap: 12px; }
.sc-ctx-m .who .imp { color: var(--amber); }
.sc-ctx-m .t { position: relative; font-size: 20px; line-height: 1.22; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ctx-ring { position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 2.5px var(--amber); pointer-events: none; }
.sc-ctx-flash { position: absolute; inset: 0; background: rgba(255,91,79,.42); box-shadow: inset 0 0 0 2.5px var(--red); }
.sc-ctx-m.pin { left: 12px; top: 126px; width: 536px; right: auto; background: #1f3a32; box-shadow: inset 0 0 0 2px var(--green); z-index: 2; }
.sc-ctx-m.pin .who { color: var(--green); }

/* right column */
.sc-ctx-stat, .sc-ctx-mem, .sc-ctx-ans { position: absolute; left: 600px; width: 570px; }
.sc-ctx-stat { top: 118px; }
.sc-ctx-big { display: flex; align-items: baseline; gap: 18px; margin: 4px 0 12px; }
.sc-ctx-big b { font-size: 80px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sc-ctx-big b.b2 { color: var(--red); }
.sc-ctx-big i { font-style: normal; font-size: 24px; color: var(--mute); }
.sc-ctx-track { height: 14px; border-radius: 7px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 22px; }
.sc-ctx-fill { display: block; height: 100%; width: 100%; background: #f4f4f4; border-radius: 7px; }
.sc-ctx-stat p { margin: 0; font-size: 22px; line-height: 1.45; color: var(--fg2); max-width: 34ch; }

.sc-ctx-mem { top: 118px; }
.sc-ctx-slot { position: relative; height: 150px; }
.sc-ctx-empty { position: absolute; inset: 0; border-radius: 16px; border: 2px dashed var(--line); display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--mute); }
.sc-ctx-fact { position: absolute; inset: 0; border-radius: 16px; border: 2px solid var(--green); background: rgba(63,212,155,.08); padding: 18px 22px;
  display: grid; align-content: center; gap: 6px; }
.sc-ctx-fact code { font-family: var(--mono); font-size: 19px; color: var(--green); font-weight: 700; }
.sc-ctx-fact span { font-size: 30px; font-weight: 700; }
.sc-ctx-fact small { font-family: var(--mono); font-size: 17px; color: var(--mute); }

.sc-ctx-ans { top: 392px; }
.sc-ctx-ans .vs { position: relative; display: inline-grid; font-family: var(--mono); font-size: 17px; font-weight: 700; }
.sc-ctx-ans .vs .v { grid-area: 1 / 1; text-align: right; }
.sc-ctx-ans .v.bad { color: #ff8f86; }
.sc-ctx-ans .v.good { color: var(--green); }
.sc-ctx-bubble { position: relative; display: grid; border-radius: 16px; padding: 22px 26px; background: linear-gradient(135deg, #2f7fe0, #1b55a8); color: #fff; }
.sc-ctx-bubble .txt { grid-area: 1 / 1; margin: 0; font-size: 27px; line-height: 1.4; }
.sc-ctx-oring { position: absolute; inset: 0; border-radius: 16px; pointer-events: none; }
.sc-ctx-oring.bad { box-shadow: 0 0 0 3px var(--red), 0 0 28px rgba(255,91,79,.35); }
.sc-ctx-oring.good { box-shadow: 0 0 0 3px var(--green), 0 0 28px rgba(63,212,155,.3); }

.sc-ctx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.sc-ctx-curve { fill: none; stroke: rgba(106,168,255,.55); stroke-width: 2.5; }