:root {
  color-scheme: dark;
  --bg: #0b0f16;
  --panel: #121925;
  --line: #2a3545;
  --text: #f3f6fa;
  --muted: #97a5b7;
  --danger: #ff665e;
  --safe: #5cdda2;
}
* { box-sizing: border-box; }
body { min-width: 300px; margin: 0; color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.embed-shell { width: min(760px, 100%); margin: 0 auto; border: 1px solid var(--line); background: var(--panel); }
.embed-topbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 750; letter-spacing: -.01em; }
.brand span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--bg); background: var(--text); font-size: 11px; font-weight: 900; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #0b111a; }
.tabs button { padding: 7px 12px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .06em; }
.tabs button[aria-selected="true"] { color: var(--text); background: #253044; }
.tabs button:focus-visible, .complete-link:focus-visible { outline: 2px solid #86baff; outline-offset: 2px; }
.result-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; padding: 22px 20px; }
.kicker { margin: 0 0 5px; color: var(--muted); font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .1em; }
h1 { margin: 0; font-size: 22px; letter-spacing: -.035em; }
.status { padding: 7px 9px; border: 1px solid; border-radius: 999px; font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .08em; }
.status.failed { color: #ffaaa6; border-color: rgba(255,102,94,.38); background: rgba(255,102,94,.1); }
.status.passed { color: #9aebc5; border-color: rgba(92,221,162,.35); background: rgba(92,221,162,.1); }
.milestones { margin: 0; padding: 0 20px; list-style: none; }
.milestone { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.milestone-index { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; }
.milestone strong { display: block; color: #dbe4ef; font-size: 12px; line-height: 1.45; font-weight: 700; }
.invariant { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; margin: 18px 20px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #0c121b; }
.invariant h2 { margin: 0; font-size: 12px; }
.metric { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.metric strong { display: block; margin-top: 4px; color: var(--text); font: 800 15px ui-monospace, SFMono-Regular, Menlo, monospace; }
.embed-footer { display: flex; justify-content: flex-end; padding: 0 20px 18px; }
.complete-link { color: #d9e8fb; font-size: 11px; font-weight: 750; text-decoration: none; }
.complete-link:hover { text-decoration: underline; }
.error { margin: 20px; color: #ffaaa6; font-size: 12px; }
@media (max-width: 520px) {
  .embed-topbar, .result-head { align-items: stretch; flex-direction: column; }
  .tabs { width: 100%; }
  .invariant { grid-template-columns: 1fr 1fr; }
  .invariant h2 { grid-column: 1 / -1; }
}