.metrics-page {
  --ink: #283346;
  --muted: #627089;
  --accent: #a65737;
  --link: #b44c2b;
  --heading: #202d42;
  --body: #60728b;
  display: flow-root;
  min-height: 100vh;
  background:
    radial-gradient(1152px 1013px at 13% 1189px, rgb(132 182 228 / 0.45), rgb(154 190 227 / 0)),
    radial-gradient(1152px 1277px at 95% 1761px, rgb(232 189 176 / 0.35), rgb(232 189 176 / 0)),
    radial-gradient(1296px 1101px at 80% 3744px, rgb(132 182 228 / 0.45), rgb(154 190 227 / 0)),
    linear-gradient(180deg, #dae5f3, #eff3f9 50%, #dfe9f5);
  color: var(--ink);
}
.metrics-page .wallpaper {
  display: none;
}

.metrics-page .glass,
.metrics-page .segmented,
.metrics-page .segmented button[aria-pressed="true"],
.metrics-page .model-control select,
.metrics-page .table-footer button,
.metrics-page .cli-command {
  position: relative;
  background:
    radial-gradient(120% 120% at 50% 0%, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0)),
    linear-gradient(135deg, rgb(255 255 255 / 0.68), rgb(255 255 255 / 0.25) 55%, rgb(247 252 255 / 0.46));
  border: 1px solid #fff;
  box-shadow:
    0 4px 12px rgb(116 142 168 / 0.12),
    inset 0 1px 2px rgb(255 255 255 / 0.7);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.metrics-page .glass {
  box-shadow:
    0 8px 24px rgb(116 142 168 / 0.15),
    inset 0 1px 2px rgb(255 255 255 / 0.65);
}
.metrics-page .glass::before,
.metrics-page .cli-command::before {
  content: "";
  position: absolute;
  inset: 1px;
  padding: 2px;
  border: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    #fff,
    rgb(255 255 255 / 0.1) 30%,
    rgb(130 154 184 / 0.24) 50%,
    rgb(255 255 255 / 0.9) 75%,
    rgb(255 255 255 / 0.2)
  );
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
}

.metrics-page .display-number,
.metrics-page .support-readings dd,
.metrics-page .medium-number,
.metrics-page .share-number,
.metrics-page .success-stat > span,
.metrics-page .outcome-list dd,
.metrics-page td {
  font-variant-numeric: normal;
}
.metrics-page h2 {
  font-weight: 400;
}
.metrics-page .eyebrow {
  font-weight: 400;
}

.metrics-page .metrics-back {
  margin-top: 2px;
  font-size: 18px;
  line-height: 25px;
  color: var(--link);
}
.metrics-page .metrics-back-bottom {
  margin: 39px 3px 0;
}

.metrics-page .intro {
  padding: 29px 0 0;
  align-items: flex-start;
  gap: 80px;
}
.metrics-page .intro h1 {
  font-family: Unbounded, sans-serif;
  font-size: 52px;
  line-height: 73px;
  letter-spacing: 0;
  color: var(--heading);
}
.metrics-page .intro-copy {
  margin-top: 10px;
  font-size: 22px;
  line-height: 31px;
  color: var(--body);
}
.metrics-page .snapshot-label {
  width: 340px;
  min-width: 0;
  padding: 10px 0 0;
  gap: 8px;
  font-size: 15px;
  line-height: 21px;
  color: var(--body);
}
.metrics-page .snapshot-status {
  color: var(--link);
}
.metrics-page .snapshot-status::before {
  display: none;
}
.metrics-page .snapshot-label strong {
  font-size: 25px;
  line-height: 35px;
  font-weight: 400;
  color: var(--heading);
}

.metrics-page .page-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: 32px;
  font-size: 18px;
  line-height: 25px;
}
.metrics-page .page-jumps a {
  color: var(--link);
}
.metrics-page .page-jumps a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.metrics-page .period-bar {
  margin: 44px 0 22px;
}
.metrics-page .segmented {
  padding: 4px;
  border-radius: 999px;
  gap: 2px;
}
.metrics-page .segmented button {
  border-radius: 999px;
  color: #57677f;
  border: 1px solid transparent;
}
.metrics-page .segmented button[aria-pressed="true"] {
  color: var(--ink);
}
.metrics-page .segmented.small button {
  padding: 7px 14px;
}

.metrics-page .latency-panel {
  border-radius: 32px;
  padding: 40px 44px 0;
}
.metrics-page .panel-top .eyebrow {
  font-weight: 400;
  margin-bottom: 9px;
}
.metrics-page .model-control select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 226px;
  padding: 14px 44px 14px 19px;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23627089' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 20px center/10px 6px no-repeat,
    radial-gradient(120% 120% at 50% 0%, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0)),
    linear-gradient(135deg, rgb(255 255 255 / 0.68), rgb(255 255 255 / 0.25) 55%, rgb(247 252 255 / 0.46));
  color: var(--muted);
}
.metrics-page .latency-overview {
  margin: 25px 0 34px;
}
.metrics-page .panel-foot {
  background: rgb(255 255 255 / 0.31);
  border-top: 0;
}

.metrics-page .traffic-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.metrics-page .traffic-panel,
.metrics-page .outcomes-panel {
  border-radius: 32px;
}
.metrics-page .traffic-panel {
  display: flex;
  flex-direction: column;
}
.metrics-page .rate-readings {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  padding: 0;
}
.metrics-page .rate-readings > div {
  padding: 0 0 28px;
}
.metrics-page .rate-readings > div + div {
  padding-top: 28px;
  border-top: 0.8px solid rgb(193 204 218 / 0.4);
}
.metrics-page .rate-readings .medium-number {
  display: block;
  font-size: 64px;
  line-height: 1.15;
  letter-spacing: -3px;
}
.metrics-page .rate-readings .eyebrow {
  margin: 0 0 17px;
  font-size: 15px;
  line-height: 19px;
  color: var(--muted);
}
.metrics-page .traffic-panel .fine {
  margin-top: 22px;
}
.metrics-page .traffic-panel .fine a {
  color: var(--accent);
}
.metrics-page .success-stat {
  border-bottom-width: 0.8px;
}

.metrics-page .model-table-panel {
  border-radius: 32px;
}
.metrics-page td button {
  font-weight: 400;
}
.metrics-page .table-footer {
  border-top: 0;
}
.metrics-page .table-footer button {
  border-radius: 999px;
  padding: 8px 14px;
}

.metrics-page .method-section .section-heading {
  margin: 72px 3px 35px;
}
.metrics-page .method-grid {
  gap: 0 56px;
}
.metrics-page .method-grid details {
  border-top: 0.8px solid rgb(175 189 207 / 0.47);
}
.metrics-page .method-grid summary {
  font-size: 19px;
  line-height: 24px;
  font-weight: 400;
  color: var(--ink);
}
.metrics-page .method-grid summary::after {
  font-size: 24px;
  line-height: 24px;
}
.metrics-page .method-grid p {
  font-size: 18px;
  line-height: 25px;
  color: var(--body);
}

.metrics-page .self-check {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  margin-top: 70px;
  padding: 44px;
  border-radius: 32px;
  scroll-margin-top: 24px;
}
.metrics-page .self-check h2 {
  font-size: 42px;
  line-height: 59px;
  letter-spacing: 0;
  color: var(--heading);
}
.metrics-page .self-check p:not(.eyebrow) {
  margin: 0;
}
.metrics-page .self-check-head p {
  margin-top: 10px !important;
  font-size: 20px;
  line-height: 28px;
  color: var(--body);
}
.metrics-page .self-check-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.metrics-page .self-check-steps li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.metrics-page .step-number {
  font-size: 28px;
  line-height: 39px;
  color: var(--link);
}
.metrics-page .self-check-steps h3 {
  margin: 0;
  font-size: 24px;
  line-height: 34px;
  font-weight: 400;
  color: var(--heading);
}
.metrics-page .self-check-steps p {
  font-size: 18px;
  line-height: 25px;
  color: var(--body);
}
.metrics-page .self-check-steps .step-note {
  font-size: 16px;
  line-height: 22px;
}
.metrics-page .step-note code {
  font: inherit;
  white-space: nowrap;
}
.metrics-page .cli-command {
  display: block;
  align-self: stretch;
  padding: 15px 16px;
  border-radius: 16px;
  font-family: inherit;
  font-size: 18px;
  line-height: 25px;
  color: var(--heading);
  overflow-wrap: anywhere;
}
.metrics-page .self-check-steps a {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--link);
}
.metrics-page .self-check-steps a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.metrics-page a.cli-source-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: 400 16px/22px Onest, sans-serif;
  color: var(--link);
}
.metrics-page a.cli-source-link:hover {
  background: none;
  color: var(--link);
}
.metrics-page .cli-source-link > span:first-child {
  display: none;
}
.metrics-page .cli-source-link > span:last-child {
  margin-left: 0.3em;
}
.metrics-page .self-check-results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding-top: 28px;
  border-top: 1px solid rgb(176 191 209 / 0.35);
}
.metrics-page .self-check-results h3 {
  margin: 0;
  font-size: 26px;
  line-height: 36px;
  font-weight: 400;
  color: var(--heading);
}
.metrics-page .self-check-results p {
  margin-top: 8px !important;
  font-size: 18px;
  line-height: 25px;
  color: var(--body);
}
.metrics-page .self-check .primary {
  margin: 0;
  padding: 15px 24px;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 999px;
  background: linear-gradient(180deg, #bc694a, #ac4f31 55%, #973c24);
  box-shadow:
    0 8px 20px rgb(151 60 36 / 0.22),
    inset 0 1px 2px rgb(255 255 255 / 0.45);
  font-size: 18px;
  line-height: 25px;
  color: #fff;
}

.metrics-page .cgpt-footer {
  margin-top: 0;
  border-top: 0;
  justify-content: flex-start;
  width: min(1164px, calc(100% - 32px));
  padding-top: 65px;
}

@media (max-width: 1100px) {
  .metrics-page .intro {
    gap: 40px;
  }
  .metrics-page .snapshot-label {
    width: 280px;
  }
  .metrics-page .rate-readings .medium-number {
    font-size: 52px;
  }
}

@media (max-width: 850px) {
  .metrics-page .intro {
    flex-direction: column;
    gap: 22px;
    padding: 24px 0 0;
  }
  .metrics-page .intro h1 {
    font-size: 44px;
    line-height: 60px;
  }
  .metrics-page .intro-copy {
    font-size: 19px;
    line-height: 27px;
  }
  .metrics-page .snapshot-label {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 0;
    gap: 4px;
  }
  .metrics-page .snapshot-label strong {
    grid-row: auto;
    grid-column: auto;
    text-align: left;
    font-size: 21px;
    line-height: 29px;
  }
  .metrics-page .page-jumps {
    margin-top: 24px;
  }
  .metrics-page .period-bar {
    margin-top: 32px;
  }
  .metrics-page .traffic-grid {
    grid-template-columns: 1fr;
  }
  .metrics-page .rate-readings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 24px;
  }
  .metrics-page .rate-readings > div,
  .metrics-page .rate-readings > div + div {
    padding: 0;
    border-top: 0;
  }
  .metrics-page .rate-readings .medium-number {
    font-size: 44px;
    letter-spacing: -1.8px;
  }
  .metrics-page .self-check {
    padding: 32px 28px;
  }
  .metrics-page .self-check h2 {
    font-size: 34px;
    line-height: 44px;
  }
  .metrics-page .self-check-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .metrics-page .self-check-results {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

@media (max-width: 560px) {
  .metrics-page .cgpt-footer {
    flex-direction: row;
    align-items: center;
    gap: 12px 16px;
    margin-top: 0;
    padding-top: 40px;
  }
  .metrics-page .metrics-back {
    font-size: 16px;
    line-height: 22px;
  }
  .metrics-page .intro {
    padding: 22px 0 0;
  }
  .metrics-page .intro h1 {
    font-size: 36px;
    line-height: 50px;
  }
  .metrics-page .intro-copy {
    font-size: 17px;
    line-height: 25px;
  }
  .metrics-page .snapshot-label {
    font-size: 13px;
    line-height: 19px;
  }
  .metrics-page .snapshot-label strong {
    font-size: 19px;
    line-height: 26px;
  }
  .metrics-page .page-jumps {
    flex-direction: column;
    gap: 10px;
    font-size: 16px;
    line-height: 22px;
  }
  .metrics-page .period-bar {
    margin-top: 28px;
  }
  .metrics-page .latency-panel {
    border-radius: 28px;
    padding: 25px 21px 0;
  }
  .metrics-page .model-control select {
    min-width: 0;
  }
  .metrics-page .traffic-panel,
  .metrics-page .outcomes-panel,
  .metrics-page .model-table-panel {
    border-radius: 28px;
  }
  .metrics-page .rate-readings {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .metrics-page .rate-readings > div {
    display: block;
  }
  .metrics-page .rate-readings > div + div {
    padding-top: 20px;
    border-top: 0.8px solid rgb(193 204 218 / 0.4);
  }
  .metrics-page .rate-readings .medium-number {
    font-size: 42px;
  }
  .metrics-page .rate-readings .eyebrow {
    margin-bottom: 10px;
    font-size: 13px;
  }
  .metrics-page .method-section .section-heading {
    margin: 50px 4px 22px;
  }
  .metrics-page .method-grid summary {
    font-size: 17px;
  }
  .metrics-page .method-grid p {
    font-size: 15px;
    line-height: 23px;
  }
  .metrics-page .self-check {
    margin-top: 50px;
    padding: 26px 21px;
    border-radius: 28px;
    gap: 24px;
  }
  .metrics-page .self-check h2 {
    font-size: 27px;
    line-height: 35px;
    letter-spacing: -0.5px;
  }
  .metrics-page .self-check-head p {
    font-size: 16px;
    line-height: 23px;
  }
  .metrics-page .step-number {
    font-size: 22px;
    line-height: 30px;
  }
  .metrics-page .self-check-steps li {
    gap: 9px;
  }
  .metrics-page .self-check-steps h3 {
    font-size: 20px;
    line-height: 28px;
  }
  .metrics-page .self-check-steps p {
    font-size: 15px;
    line-height: 22px;
  }
  .metrics-page .cli-command {
    font-size: 15px;
    padding: 13px 14px;
  }
  .metrics-page .self-check-results h3 {
    font-size: 22px;
    line-height: 30px;
  }
  .metrics-page .self-check-results p {
    font-size: 15px;
    line-height: 22px;
  }
  .metrics-page .self-check .primary {
    width: 100%;
    text-align: center;
    font-size: 16px;
  }
}
.metrics-page .provider-mark.google{background:#e1e9f7;color:#3d5f9e}
.metrics-page .latency-table-scroll{overflow-x:auto;margin:32px -8px 0;padding:0 8px}
.metrics-page .latency-table{width:100%;border-collapse:collapse;font-size:16px}
.metrics-page .latency-table thead th{font-size:13px;font-weight:400;color:#627089;padding:0 14px 16px;text-align:right;white-space:nowrap}
.metrics-page .latency-table thead th:first-child{text-align:left;padding-left:0}
.metrics-page .latency-table tbody th{text-align:left;font-size:16px;font-weight:500;color:#202d42;padding:18px 14px 18px 0;border-top:1px solid #b4c3d42b;white-space:nowrap}
.metrics-page .latency-table td{padding:18px 14px;text-align:right;border-top:1px solid #b4c3d42b;white-space:nowrap;font-variant-numeric:tabular-nums;color:#202d42}
.metrics-page .latency-table tr.total th,.metrics-page .latency-table tr.total td{font-weight:600}
.metrics-page .latency-table .or-col{color:#627089;background:#ffffff38}
.metrics-page .latency-table thead .or-col{background:none;color:#a7472c}
.metrics-page .latency-table thead tr:not(.or-group) th.or-col:nth-last-child(3),.metrics-page .latency-table td.or-col:nth-last-child(3),.metrics-page .latency-table tr.or-group th{border-left:1px solid #b4c3d44d}
.metrics-page .latency-table td.missing{color:#9aa6b7}
.metrics-page .latency-note{font-size:13px;line-height:1.55;color:#627089;margin:18px 0 26px;max-width:860px}
@media(max-width:560px){.metrics-page .latency-table{font-size:14px}.metrics-page .latency-table td{padding:14px 10px}.metrics-page .latency-table tbody th{padding:14px 10px 14px 0}.metrics-page .latency-table thead th{padding:0 10px 12px;font-size:11px}}
.metrics-page .prompt-size{margin-top:28px}
.metrics-page .latency-table thead th.or-col span{display:block;font-size:11px;color:#8a96a8;margin-top:2px}
.metrics-page .latency-table tr.or-group th,.metrics-page .latency-table tr.or-group td{padding-bottom:6px;font-size:13px;text-align:center;border:0}