:root { color-scheme: light; font-family: system-ui, -apple-system, sans-serif; color: #263746; background: #edf0f2; }
* { box-sizing: border-box; }
body { margin: 0; }
header { padding: 1.6rem max(1rem, 5vw); color: white; border-bottom: .35rem solid #c8202f; background: linear-gradient(120deg, #142f4f, #075b8c); }
header h1 { margin: .15rem 0 .35rem; font-size: clamp(1.7rem, 4vw, 2.8rem); }
header p { margin: 0; opacity: .9; }
.eyebrow { font-weight: 800; letter-spacing: .14em; font-size: .78rem; }
main { width: min(1600px, 97%); margin: 1rem auto 2rem; }
.toolbar { display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; padding: .7rem .9rem; background: white; border-radius: .6rem; border-left: .3rem solid #c8202f; }
.toolbar label { font-weight: 700; color: #142f4f; }
.toolbar select { min-width: 13rem; padding: .4rem .6rem; border: 1px solid #aeb9c2; border-radius: .35rem; background: white; }
.status { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.status time { margin-left: .8rem; font-variant-numeric: tabular-nums; }
#dot { width: .7rem; height: .7rem; border-radius: 50%; background: #d18c00; }
#dot.ok { background: #16834a; }
#dot.bad { background: #b3261e; }
#traces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.trace { padding: .65rem; border-radius: .55rem; background: white; box-shadow: 0 2px 8px #142f4f14; border-top: 2px solid #d7dde2; }
.trace-head { display: flex; justify-content: space-between; margin-bottom: .4rem; font-size: .92rem; }
.trace-head strong { color: #142f4f; }
.latency.bad { color: #b3261e; font-weight: 700; }
canvas { display: block; width: 100%; height: 95px; background: #fbfcfd; border: 1px solid #dce2e7; }
footer { padding: 1.2rem; text-align: center; color: #52636b; font-size: .85rem; }
body.embed header, body.embed footer { display: none; }
body.embed main { margin-top: .35rem; margin-bottom: .35rem; }
@media (max-width: 850px) {
  #traces { grid-template-columns: 1fr; }
  .toolbar { align-items: flex-start; flex-wrap: wrap; }
  .status { width: 100%; margin-left: 0; }
  .status time { margin-left: auto; }
}