.telemetry-pr-pair-first-look {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: clamp(10px, 1.5vw, 16px);
  border: 1px solid #6d9ca8;
  border-radius: 11px;
  color: #eaf6f7;
  background: linear-gradient(145deg, #143744, #102c3c);
}
.telemetry-pr-pair-first-look * { box-sizing: border-box; min-width: 0; }
.telemetry-pr-pair-first-look :is(h4, p) { margin: 0; }
.tpr-first-kicker { color: #9be7d1; font-size: .67rem; font-weight: 850; letter-spacing: .08em; }
.telemetry-pr-pair-first-look h4 { color: #f4fbf9; font-size: clamp(1.07rem, 1.8vw, 1.28rem); line-height: 1.25; }
.tpr-first-intro { color: #c9e1e4; font-size: .78rem; line-height: 1.34; }
.tpr-first-toolbar,
.tpr-first-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.telemetry-pr-pair-first-look :is(.tpr-first-tool, .tpr-first-check, .tpr-first-reset) {
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid #8db8bd;
  border-radius: 6px;
  color: #eef9f7;
  background: #285360;
  font: 750 .75rem/1.25 system-ui, sans-serif;
  white-space: normal;
  cursor: pointer;
}
.telemetry-pr-pair-first-look .tpr-first-check { border-color: #8ee0c9; background: #14655f; }
.telemetry-pr-pair-first-look .tpr-first-tool[aria-pressed="true"] { border-color: #ffe3a2; color: #182f38; background: #ffe0a0; }
.telemetry-pr-pair-first-look :is(button, input):focus-visible { outline: 3px solid #ffdf91; outline-offset: 2px; }
.tpr-first-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tpr-first-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #527e89;
  border-radius: 8px;
  background: #0d2735;
}
.tpr-first-card > strong { color: #f7faf5; font-size: .76rem; }
.tpr-first-card svg {
  display: block;
  width: 100%;
  height: 105px;
  border: 1px solid #315564;
  border-radius: 5px;
  background: #091d2a;
}
.tpr-first-grid line.minor { stroke: #284556; stroke-width: .25; }
.tpr-first-grid line.major { stroke: #4c7581; stroke-width: .4; }
.tpr-first-grid line.baseline { stroke: #63828b; stroke-width: .5; }
.tpr-first-trace { fill: none; stroke: #9ce6d6; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.tpr-first-user-guides line { stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.tpr-first-user-guides line.p { stroke: #ffd67c; }
.tpr-first-user-guides line.q { stroke: #ff9d8c; }
.tpr-first-model-guides line { stroke: #eaf8fc; stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.tpr-first-markers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tpr-first-marker { display: grid; align-content: center; gap: 2px; min-height: 44px; color: #d2e6e8; font-size: .69rem; font-weight: 700; }
.tpr-first-marker input { width: 100%; min-height: 28px; margin: 0; accent-color: #f1c96f; cursor: pointer; }
.tpr-first-span { color: #f3e4ba; font-size: .72rem; font-weight: 750; }
.tpr-first-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; color: #d2e5e8; font-size: .68rem; }
.tpr-first-key { display: inline-flex; align-items: center; gap: 5px; }
.tpr-first-key::before { content: ""; width: 12px; border-top: 2px solid; }
.tpr-first-key-p::before { border-color: #ffd67c; }
.tpr-first-key-q::before { border-color: #ff9d8c; }
.tpr-first-key-model::before { border-color: #eaf8fc; border-top-style: dashed; }
.tpr-first-readout { color: #d9efea; font-size: .75rem; font-weight: 700; }
.tpr-first-feedback { color: #f2dfb2; font-size: .75rem; line-height: 1.38; }
.tpr-first-feedback[data-reviewable="true"] { color: #b6f0d1; }
.tpr-first-boundary { padding-top: 6px; border-top: 1px solid #4e7884; color: #c2dade; font-size: .71rem; line-height: 1.38; }
@media (max-width: 850px) {
  .tpr-first-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .telemetry-pr-pair-first-look { gap: 6px; }
  .tpr-first-toolbar > button,
  .tpr-first-actions > button { flex: 1 1 44%; }
  .tpr-first-card svg { height: 88px; }
}