:root {
  color-scheme: dark;
  --bg: #070b0a;
  --panel: #111816;
  --panel-2: #18211e;
  --line: #31403b;
  --ink: #f4faf7;
  --muted: #9fb0aa;
  --green: #58d6bd;
  --yellow: #f3c969;
  --red: #ff8e86;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
a { color: inherit; }
h1, h2, p, dl, ol { margin: 0; }

.testnet-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding: 18px clamp(20px, 5vw, 72px);
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 44px; height: 44px; border-radius: 6px; }
.brand span { display: grid; gap: 2px; }
.brand strong { font-size: 1.05rem; }
.brand small { color: var(--muted); }
.source-link { border: 1px solid var(--line); border-radius: 6px; padding: 10px 13px; font-weight: 750; text-decoration: none; }
.source-link:hover, .source-link:focus-visible { border-color: var(--green); }

main { display: grid; gap: 28px; max-width: 1220px; margin: 0 auto; padding: 48px clamp(20px, 5vw, 72px) 64px; }
.testnet-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); gap: 40px; align-items: end; }
.eyebrow { margin-bottom: 8px; color: var(--green); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }
h1 { max-width: 840px; font-size: clamp(2.5rem, 5vw, 5.2rem); line-height: 0.96; letter-spacing: 0; }
h2 { font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.08; letter-spacing: 0; }
.lede { max-width: 760px; margin-top: 18px; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }

.network-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.network-facts div { min-width: 0; border-right: 1px solid var(--line); padding: 14px; }
.network-facts div:last-child { border-right: 0; }
dt { margin-bottom: 5px; color: var(--muted); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
dd { margin: 0; overflow-wrap: anywhere; font: 650 0.82rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }

.prover-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(370px, 0.9fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.proof-form { display: grid; gap: 22px; padding: clamp(22px, 4vw, 38px); background: #f4f7f5; color: #17201c; }
.form-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.proof-form .eyebrow { color: #0f766e; }
.scenario-control { width: min(230px, 100%); }
label { display: grid; gap: 7px; color: #59635f; font-size: 0.78rem; font-weight: 750; }
input, select { width: 100%; min-height: 44px; border: 1px solid #cbd5d1; border-radius: 6px; background: #ffffff; color: #17201c; padding: 0 11px; font: 650 0.92rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 50px; }
.input-suffix small { position: absolute; right: 12px; top: 13px; color: #78847f; }
.policy-strip { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #cbd5d1; }
.policy-strip div { display: grid; gap: 4px; border-right: 1px solid #cbd5d1; padding: 12px; }
.policy-strip div:last-child { border-right: 0; }
.policy-strip span { color: #68736e; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
.policy-strip strong { font: 700 0.82rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
button { min-height: 48px; border: 0; border-radius: 6px; background: #0f766e; color: #ffffff; font: 800 0.95rem inherit; cursor: pointer; }
button:hover, button:focus-visible { background: #115e59; }
button:disabled { cursor: wait; opacity: 0.72; }
.local-note { color: #68736e; font-size: 0.76rem; line-height: 1.5; }

.proof-console { display: grid; align-content: start; background: var(--panel); }
.console-heading { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding: 24px; }
.console-heading p { margin-bottom: 6px; color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.console-heading span { align-self: start; border-radius: 999px; padding: 6px 9px; font-size: 0.7rem; font-weight: 850; text-transform: uppercase; }
.status-ready { background: #27312e; color: #c9d4d0; }
.status-running { background: #342d17; color: var(--yellow); }
.status-verified { background: #12352e; color: var(--green); }
.status-rejected { background: #3a1917; color: var(--red); }
.proof-stages { display: grid; list-style: none; padding: 0; }
.proof-stages li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; border-bottom: 1px solid #27312e; padding: 14px 24px; color: #73817c; }
.proof-stages li > span { padding-top: 2px; font: 750 0.72rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.proof-stages div { display: grid; gap: 3px; }
.proof-stages strong { font-size: 0.86rem; }
.proof-stages small { color: #73817c; }
.proof-stages .active { color: var(--yellow); }
.proof-stages .complete { color: var(--green); }
.proof-stages .failed { color: var(--red); }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.result-grid div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 13px 24px; }
.result-grid div:nth-child(2n) { border-right: 0; }
.result-grid div:nth-last-child(-n + 2) { border-bottom: 0; }
.commitment-output { display: grid; gap: 8px; padding: 18px 24px; }
.commitment-output span { color: var(--muted); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
code { display: block; overflow: hidden; color: #c9fff4; font: 0.76rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.run-message { border-top: 1px solid var(--line); padding: 16px 24px; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }

.testnet-boundary { display: grid; grid-template-columns: 1fr 0.8fr; gap: 32px; border-top: 1px solid var(--line); padding-top: 28px; }
.testnet-boundary > p { color: var(--muted); line-height: 1.65; }

@media (max-width: 820px) {
  .testnet-intro, .prover-shell, .testnet-boundary { grid-template-columns: 1fr; }
  .form-heading { display: grid; }
  .scenario-control { width: 100%; }
}

@media (max-width: 560px) {
  .testnet-topbar { align-items: start; }
  .source-link { font-size: 0.78rem; }
  .network-facts, .input-grid, .policy-strip { grid-template-columns: 1fr; }
  .network-facts div, .policy-strip div { border-right: 0; border-bottom: 1px solid var(--line); }
  .network-facts div:last-child, .policy-strip div:last-child { border-bottom: 0; }
  h1 { font-size: 2.5rem; overflow-wrap: anywhere; }
}