.tracebox-title {
  position:relative;
  overflow:hidden;
  padding:38px 0 34px;
  background:
    radial-gradient(circle at 88% 12%,rgba(0,110,255,.12),transparent 27%),
    linear-gradient(145deg,#f4f7fb 0%,#fff 66%);
}

.tracebox-kicker,
.tracebox-section-number {
  margin:0 0 10px !important;
  color:#006eff !important;
  font-size:11px !important;
  font-weight:750 !important;
  letter-spacing:.12em;
  line-height:1.3 !important;
  text-transform:uppercase;
}

.tracebox-detail {
  padding:28px 0 64px;
  background:#fff;
}

.tracebox-release-bar {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
  padding-bottom:23px;
  border-bottom:1px solid var(--download-line);
}

.tracebox-release-meta {
  display:flex;
  flex-wrap:wrap;
  gap:17px 30px;
}

.tracebox-release-meta span {
  color:#252b31;
  font-size:13px;
  font-weight:650;
}

.tracebox-release-meta small,
.tracebox-settings-grid small,
.tracebox-sample-metrics small {
  display:block;
  margin-bottom:4px;
  color:#76808a;
  font-size:9px;
  font-weight:750;
  letter-spacing:.09em;
  line-height:1.3;
  text-transform:uppercase;
}

.tracebox-release-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

.tracebox-release-actions .download-checksums {
  text-align:right;
}

.tracebox-release-actions .download-checksums summary {
  margin-left:auto;
}

.tracebox-primary-action {
  min-width:132px;
}

.tracebox-overview-shot {
  margin:34px 0 0;
}

.tracebox-window-bar {
  display:flex;
  height:34px;
  align-items:center;
  gap:6px;
  padding:0 13px;
  border:1px solid #cfd6de;
  border-bottom:0;
  border-radius:9px 9px 0 0;
  background:#f4f6f8;
}

.tracebox-window-bar span {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#bac2ca;
}

.tracebox-window-bar b {
  margin-left:7px;
  color:#68727c;
  font-size:10px;
  font-weight:650;
}

.tracebox-overview-crop {
  height:clamp(390px,53vw,630px);
  overflow:hidden;
  border:1px solid #cfd6de;
  background:#fff;
  box-shadow:0 24px 55px rgba(21,31,45,.11);
}

.tracebox-overview-crop img {
  display:block;
  width:131.5%;
  max-width:none;
  height:auto;
  transform:translate(-10.6%,-9.2%);
}

.tracebox-overview-shot figcaption,
.tracebox-trend-shot figcaption {
  margin-top:9px;
  color:#737c85;
  font-size:11px;
  line-height:1.5;
  text-align:center;
}

.tracebox-feature {
  display:grid;
  grid-template-columns:minmax(230px,.7fr) minmax(0,1.3fr);
  align-items:center;
  gap:56px;
  margin-top:66px;
}

.tracebox-feature-copy h2,
.tracebox-settings-heading h2,
.tracebox-sample-heading h2 {
  margin:0;
  color:#15191e;
  font-size:clamp(27px,3vw,38px);
  font-weight:650;
  letter-spacing:-.035em;
  line-height:1.08;
}

.tracebox-feature-copy > p:not(.tracebox-section-number),
.tracebox-settings-heading > p,
.tracebox-sample-heading > div > p:not(.tracebox-section-number) {
  margin:16px 0 0;
  color:#5d6771;
  font-size:14px;
  line-height:1.7;
}

.tracebox-capability-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid #dce1e6;
  border-left:1px solid #dce1e6;
}

.tracebox-capability-list span {
  min-height:78px;
  display:flex;
  align-items:center;
  padding:17px;
  border-right:1px solid #dce1e6;
  border-bottom:1px solid #dce1e6;
  color:#293038;
  font-size:13px;
  font-weight:650;
}

.tracebox-trend-shot {
  margin:0;
}

.tracebox-trend-shot img {
  display:block;
  width:100%;
  height:auto;
  border:1px solid #cfd6de;
  background:#fff;
  box-shadow:0 20px 45px rgba(21,31,45,.09);
}

.tracebox-precision-note {
  padding-left:12px;
  border-left:2px solid #d7dde3;
  color:#77818b !important;
  font-size:11px !important;
  line-height:1.55 !important;
}

.tracebox-settings {
  margin-top:72px;
  padding:42px;
  border:1px solid #dbe2ea;
  background:linear-gradient(145deg,#f6f8fb,#eef4fb);
}

.tracebox-settings-heading {
  display:grid;
  grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr);
  gap:56px;
  align-items:end;
}

.tracebox-settings-heading > p {
  margin:0;
}

.tracebox-settings-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:31px;
}

.tracebox-settings-grid article {
  min-height:164px;
  padding:20px;
  border:1px solid #dce2e8;
  background:#fff;
}

.tracebox-settings-grid strong {
  display:block;
  color:#101820;
  font-size:20px;
  font-weight:680;
  letter-spacing:-.02em;
  line-height:1.25;
}

.tracebox-settings-grid p {
  margin:22px 0 0;
  color:#68727c;
  font-size:11px;
  line-height:1.55;
}

.tracebox-sample {
  padding:68px 0 72px;
  background:#0b0f19;
  color:#fff;
}

.tracebox-sample-heading {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:42px;
}

.tracebox-sample-heading h2 {
  color:#fff;
}

.tracebox-sample-heading > div > p:not(.tracebox-section-number) {
  max-width:760px;
  color:#aeb9c8;
}

.tracebox-report-link {
  display:inline-flex;
  min-height:42px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid #49729f;
  color:#fff;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.tracebox-report-link:hover {
  border-color:#72a9e4;
  color:#fff;
  background:#111c2b;
}

.tracebox-sample-metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:34px;
  border-top:1px solid #273345;
  border-left:1px solid #273345;
}

.tracebox-sample-metrics span {
  min-height:96px;
  padding:18px;
  border-right:1px solid #273345;
  border-bottom:1px solid #273345;
}

.tracebox-sample-metrics small {
  color:#8290a2;
}

.tracebox-sample-metrics strong {
  color:#fff;
  font-size:17px;
  font-weight:650;
  line-height:1.35;
}

.tracebox-report-preview {
  margin-top:24px;
  border-radius:10px;
  box-shadow:0 30px 65px rgba(0,0,0,.28);
}

.tracebox-window-bar-dark {
  border-color:#263347;
  background:#151d29;
}

.tracebox-window-bar-dark span {
  background:#4e5b6b;
}

.tracebox-window-bar-dark b {
  color:#9aa7b8;
}

.tracebox-report-viewport {
  position:relative;
  height:560px;
  overflow:hidden;
  border:1px solid #263347;
  border-top:0;
  background:#f4f7fb;
}

.tracebox-report-viewport iframe {
  width:166.667%;
  height:930px;
  border:0;
  transform:scale(.6);
  transform-origin:0 0;
}

.tracebox-package {
  display:grid;
  grid-template-columns:minmax(230px,.72fr) minmax(320px,1.28fr) 166px;
  gap:32px;
  align-items:center;
  margin-top:34px;
  padding-top:28px;
  border-top:1px solid #273345;
}

.tracebox-package-copy {
  min-width:0;
}

.tracebox-package h3 {
  margin:0;
  color:#fff;
  font-size:19px;
  font-weight:650;
}

.tracebox-package p {
  margin:8px 0 0;
  color:#98a5b6;
  font-size:12px;
  line-height:1.6;
}

.tracebox-package ul {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.tracebox-package li {
  padding:11px 13px;
  border:1px solid #2b394d;
  color:#d9e2ef;
  font-size:11px;
  font-weight:650;
}

.tracebox-package-shot {
  width:166px;
  margin:0;
  justify-self:end;
  overflow:hidden;
  border:1px solid #334258;
  border-radius:4px;
  background:#fff;
  box-shadow:0 18px 36px rgba(0,0,0,.22);
}

.tracebox-package-shot img {
  display:block;
  width:100%;
  height:auto;
}

.tracebox-report-link:focus-visible {
  outline:2px solid #67a7ff;
  outline-offset:3px;
}

@media (max-width:900px) {
  .tracebox-release-bar,
  .tracebox-feature,
  .tracebox-settings-heading,
  .tracebox-package {
    grid-template-columns:1fr;
  }

  .tracebox-release-actions {
    justify-content:flex-start;
  }

  .tracebox-release-actions .download-checksums {
    text-align:left;
  }

  .tracebox-release-actions .download-checksums summary {
    margin-left:0;
  }

  .tracebox-feature,
  .tracebox-settings-heading,
  .tracebox-package {
    gap:24px;
  }

  .tracebox-package-shot {
    width:156px;
    justify-self:center;
  }

  .tracebox-settings-grid,
  .tracebox-sample-metrics {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:620px) {
  .tracebox-title {
    padding:27px 0 25px;
  }

  .tracebox-detail {
    padding:22px 0 44px;
  }

  .tracebox-release-meta {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:14px;
  }

  .tracebox-release-actions {
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  .tracebox-release-actions .download-action {
    width:100%;
  }

  .tracebox-overview-shot {
    margin-top:24px;
  }

  .tracebox-overview-crop {
    height:300px;
  }

  .tracebox-overview-crop img {
    width:170%;
    max-width:none;
    transform:translate(-19%,-8%);
  }

  .tracebox-feature {
    gap:22px;
    margin-top:48px;
  }

  .tracebox-capability-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .tracebox-capability-list span {
    min-height:62px;
    padding:13px;
    font-size:11px;
  }

  .tracebox-feature-copy h2,
  .tracebox-settings-heading h2,
  .tracebox-sample-heading h2 {
    font-size:27px;
  }

  .tracebox-feature-copy > p:not(.tracebox-section-number),
  .tracebox-settings-heading > p,
  .tracebox-sample-heading > div > p:not(.tracebox-section-number) {
    font-size:12px;
  }

  .tracebox-settings {
    margin-top:50px;
    padding:25px 20px;
  }

  .tracebox-settings-grid,
  .tracebox-sample-metrics,
  .tracebox-package ul {
    grid-template-columns:1fr;
  }

  .tracebox-package-shot {
    width:148px;
  }

  .tracebox-settings-grid article {
    min-height:132px;
  }

  .tracebox-sample {
    padding:52px 0 55px;
  }

  .tracebox-sample-heading {
    grid-template-columns:1fr;
    align-items:start;
    gap:20px;
  }

  .tracebox-report-link {
    width:100%;
  }

  .tracebox-report-viewport {
    height:480px;
  }

  .tracebox-report-viewport iframe {
    width:250%;
    height:1200px;
    transform:scale(.4);
  }
}

@media (prefers-reduced-motion:reduce) {
  .tracebox-report-link {
    transition:none;
  }
}