.pp-art { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; padding: 10px 0; }
.pp-phone {
  width: 160px; flex: none; position: relative; z-index: 2;
  border-radius: 20px; border: 5px solid var(--navy);
  box-shadow: 0 30px 50px -20px rgba(22, 29, 57, .5); transform: rotate(-3deg);
}

.embed {
  margin: 0 0 0 -24px; padding: 18px 20px 20px 44px; min-width: 0; max-width: 380px;
  background: var(--navy); color: #fff; border-radius: 10px;
  box-shadow: 0 24px 40px -20px rgba(22, 29, 57, .55);
}
.embed figcaption { color: var(--sky); text-transform: uppercase; letter-spacing: .08em; font: 700 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-bottom: 10px; }

.embed pre span { white-space: nowrap; }
.embed pre { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #c9d6f5; }
@media (max-width: 600px) {
  .pp-art { flex-direction: column; }
  .pp-phone { width: 120px; }
  .embed { margin: -30px 0 0; padding: 40px 18px 18px; max-width: none; width: 100%; }

  .embed pre { font-size: 12px; }
}

.monitor-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.monitor-grid > * { min-width: 0; }
.monitor-grid p { margin: 14px 0 24px; }
.monitor-grid .checks { margin-bottom: 0; }
.alert-log { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; box-shadow: 0 24px 40px -28px rgba(22, 29, 57, .35); }
.alert-log figcaption { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 12px; }
.alert-log ol { list-style: none; margin: 0; padding: 0; }
.alert-log li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; font-size: 15px; color: var(--navy); }
.alert-log li + li { border-top: 1px solid var(--line); }
.alert-log li span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; }

.alert-log .down span { background: #c0392b; }
.alert-log .up span { background: #1e7e45; }
.alert-log time { font: 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); }
@media (max-width: 860px) { .monitor-grid { grid-template-columns: 1fr; gap: 36px; } }

.paste { margin-top: 30px; }
.paste p { margin: 0; font-size: 16px; }
.paste b { color: var(--navy); }

#compare + .compare-scroll { max-width: 900px; margin-top: 30px; }

.uptime { padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.uptime p { display: flex; justify-content: space-between; margin: 0; font-size: 15px; color: var(--navy); }
.uptime p span { color: var(--sky-text); font-weight: 700; }
.uptime .bars { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; height: 30px; margin: 10px 0 6px; }
.uptime .bars i { border-radius: 2px; background: var(--teal); }

.uptime .bars i.dip { background: linear-gradient(var(--teal) 55%, #c0392b 55%); }
.uptime .ends { font-size: 12px; }
.uptime .ends span { color: var(--muted); font-weight: 400; }

.tags a { color: inherit; text-decoration: none; }
.tags a:hover { color: var(--blue); }