:root {
  color-scheme: light dark;
  --bg: #0f172a;
  --panel: #111827;
  --panel-2: #1f2937;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --border: rgba(148, 163, 184, 0.25);
  --good: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
  --pending: #64748b;
  --accent: #38bdf8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, rgba(56, 189, 248, .18), transparent 36rem), var(--bg);
  color: var(--text);
  line-height: 1.55;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 28rem);
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.hero h1 { margin: .2rem 0 .6rem; line-height: 1.1; font-size: clamp(2rem, 4vw, 4rem); }
.hero p { color: var(--muted); max-width: 70rem; }
.eyebrow { color: var(--accent); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; font-size: .8rem; }
.hero-meta {
  display: grid;
  align-content: start;
  gap: .4rem;
  padding: 1rem;
  background: rgba(15, 23, 42, .72);
  border: 1px solid var(--border);
  border-radius: 1rem;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #bae6fd;
  word-break: break-all;
}

.debug-grid {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(8, minmax(10rem, 1fr));
  gap: .6rem;
  padding: .7rem;
  background: rgba(2, 6, 23, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.tile {
  min-height: 5.8rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  overflow: hidden;
}

.tile span { display: block; color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tile strong { display: block; margin: .25rem 0; font-size: 1.15rem; line-height: 1.15; word-break: break-all; }
.tile small { color: var(--muted); font-size: .72rem; }
.tile.good { border-color: color-mix(in srgb, var(--good), transparent 40%); box-shadow: inset 0 0 0 1px rgba(34,197,94,.2); }
.tile.warn { border-color: color-mix(in srgb, var(--warn), transparent 35%); box-shadow: inset 0 0 0 1px rgba(245,158,11,.22); }
.tile.bad { border-color: color-mix(in srgb, var(--bad), transparent 35%); box-shadow: inset 0 0 0 1px rgba(239,68,68,.22); }
.tile.pending { border-color: color-mix(in srgb, var(--pending), transparent 45%); }

main {
  width: min(112rem, calc(100% - 2rem));
  margin: 1rem auto 4rem;
  display: grid;
  gap: 1rem;
}

.content-block {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(15, 23, 42, .78);
}

.content-block h2 { margin-top: 0; }
.content-block.muted { opacity: .85; }
.hidden-probe { display: none; }
.noscript-block { background: #3f1d1d; color: #fff; }

.matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .7rem;
}

.stage-card,
.fetch-card {
  padding: .85rem;
  border: 1px solid rgba(56, 189, 248, .35);
  border-radius: .75rem;
  background: rgba(8, 47, 73, .4);
}

.stage-card strong,
.fetch-card strong { display: block; font-size: 1.1rem; }
.stage-card span,
.fetch-card span { display: block; color: var(--muted); }

.result-box {
  min-height: 4rem;
  display: grid;
  gap: .7rem;
}

iframe {
  width: 100%;
  min-height: 11rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: white;
}

.below-fold { margin-top: 80vh; }

footer {
  padding: 2rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

@media (max-width: 1280px) {
  .debug-grid { grid-template-columns: repeat(4, minmax(9rem, 1fr)); }
}

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .debug-grid { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { min-height: 5rem; }
}