:root {
  --paper: #f5f7f3;
  --white: #ffffff;
  --ink: #11120f;
  --muted: #60655d;
  --line: #11120f;
  --acid: #deff22;
  --cobalt: #3157e6;
  --vermilion: #ff5c42;
  --mint: #63e2b1;
  --soft: #e6eae3;
  --header-height: 58px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: Outfit, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}
button, textarea, input { font: inherit; letter-spacing: 0; }
button, label, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.identity-rail {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  min-height: var(--header-height);
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.brand-mark {
  flex: 0 0 18px;
  width: 18px;
  height: 20px;
  border: 1px solid var(--ink);
  background: var(--acid);
  box-shadow: inset 8px 0 0 var(--cobalt);
}
.brand-compact { display: none; }
.runtime-visual {
  padding: 5px 12px;
  font: 600 9px/1.2 Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
}
.live-status {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  font: 700 10px/1.25 Menlo, Monaco, Consolas, monospace;
  text-align: right;
}
.live-status::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--ink);
  background: var(--acid);
}
.live-status[data-level="error"]::before { background: var(--vermilion); }

main { width: 100%; max-width: 100%; overflow-x: clip; }
.workbench {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 38px 28px 120px;
}
.hero-copy {
  width: min(1100px, 100%);
  margin: 0 auto 28px;
  text-align: center;
}
.kicker,
.proof-product,
.metric > span,
.pattern-strip > div > span,
.occurrence-carousel span,
.step-position,
.method-accordions summary span {
  margin: 0;
  font: 700 9px/1.3 Menlo, Monaco, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0;
}
.hero-copy h1 {
  width: min(1100px, 100%);
  margin: 8px auto 10px;
  font-size: clamp(2.75rem, 5vw, 5.25rem);
  line-height: 0.94;
  font-weight: 800;
  letter-spacing: 0;
  text-wrap: balance;
}
.hero-copy > p:last-child {
  width: min(720px, 100%);
  margin: 0 auto;
  color: #383c36;
  font-size: 16px;
  line-height: 1.45;
}

.command-row {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  grid-auto-flow: dense;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.command,
.icon-command {
  min-height: 44px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}
.command { padding: 0 16px; }
.command:hover, .icon-command:hover { transform: translateY(-2px); }
.command:disabled { cursor: not-allowed; opacity: 0.48; transform: none; }
.command-acid { background: var(--acid); color: var(--ink); }
.command-dark { background: var(--ink); color: var(--white); }
.command-light { background: var(--white); color: var(--ink); }
.command-mint { background: var(--mint); color: var(--ink); }
.file-command { display: inline-flex; align-items: center; justify-content: center; }

.editor-panel {
  width: min(1144px, 100%);
  margin: 0 auto 12px;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 14px;
}
.editor-panel > label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 800; }
.editor-panel textarea {
  display: block;
  width: 100%;
  min-height: 210px;
  resize: vertical;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 12px;
  background: #fbfcfa;
  color: var(--ink);
  font: 11px/1.45 Menlo, Monaco, Consolas, monospace;
}
.editor-panel p { margin: 8px 0 0; color: var(--muted); font: 10px/1.4 Menlo, Monaco, Consolas, monospace; }

.proof-surface {
  width: min(1144px, 100%);
  margin: 0 auto;
  border: 1px solid var(--line);
  background: var(--white);
  scroll-margin-top: calc(var(--header-height) + 2px);
}
.proof-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
  gap: 24px;
  align-items: end;
  min-height: 70px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.proof-heading h2 {
  margin: 4px 0 0;
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: 0;
}
.proof-state {
  margin: 0;
  justify-self: end;
  color: var(--muted);
  font: 10px/1.35 Menlo, Monaco, Consolas, monospace;
  text-align: right;
}
.proof-state.error { color: #b52e1d; font-weight: 700; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  border-bottom: 1px solid var(--line);
}
.metric {
  min-width: 0;
  min-height: 88px;
  padding: 11px 13px;
  border-right: 1px solid #aeb3aa;
  overflow-wrap: anywhere;
}
.metric:last-child { border-right: 0; }
.metric strong {
  display: block;
  margin: 4px 0 2px;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}
.metric small { display: block; color: var(--muted); font: 9px/1.35 Menlo, Monaco, Consolas, monospace; }
.metric-coverage { background: #efffd0; }
.metric-pattern { background: #fff0eb; }
.metric-exposure { background: #f1f2ef; }

.pattern-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 24px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #f3f5f0;
}
.pattern-strip strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  font: 700 12px/1.35 Menlo, Monaco, Consolas, monospace;
}
.pattern-strip p {
  margin: 0;
  justify-self: end;
  color: var(--muted);
  font: 10px/1.4 Menlo, Monaco, Consolas, monospace;
  text-align: right;
}

.occurrence-carousel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff7f4;
}
.icon-command {
  width: 44px;
  min-width: 44px;
  padding: 0;
  background: var(--white);
  color: var(--ink);
  font-size: 20px;
}
.occurrence-carousel > div { min-width: 0; text-align: center; }
.occurrence-carousel strong,
.occurrence-carousel small { display: block; overflow-wrap: anywhere; }
.occurrence-carousel strong { margin: 2px 0; font-size: 13px; }
.occurrence-carousel small { color: var(--muted); font: 10px/1.3 Menlo, Monaco, Consolas, monospace; }

.trace-ledger { width: 100%; }
.trace-empty { min-height: 170px; display: grid; place-items: center; padding: 20px; color: var(--muted); font: 11px/1.5 Menlo, Monaco, Consolas, monospace; text-align: center; }
.session-band {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  min-width: 0;
  border-bottom: 1px solid #aeb3aa;
}
.session-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid var(--line);
  background: var(--ink);
  color: var(--white);
}
.session-label strong { overflow-wrap: anywhere; font-size: 11px; }
.session-label small { margin-top: 3px; color: #c8cdc4; font: 8px/1.3 Menlo, Monaco, Consolas, monospace; }
.step-grid {
  display: grid;
  grid-template-columns: repeat(var(--step-count), minmax(0, 1fr));
  min-width: 0;
}
.trace-step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 68px;
  padding: 7px 8px;
  border-right: 1px solid #aeb3aa;
  overflow: hidden;
}
.trace-step:last-child { border-right: 0; }
.trace-step.covered { background: var(--mint); }
.trace-step.candidate { background: var(--vermilion); }
.trace-step.unique { background: var(--cobalt); color: var(--white); }
.trace-step strong {
  display: block;
  margin: 3px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 10px/1.25 Menlo, Monaco, Consolas, monospace;
}
.trace-step small { opacity: 0.82; font: 8px/1.25 Menlo, Monaco, Consolas, monospace; }

.proof-footer {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 1.2fr);
  gap: 20px;
  align-items: center;
  min-height: 54px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}
.legend { font: 700 9px/1.3 Menlo, Monaco, Consolas, monospace; text-transform: uppercase; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 10px; height: 10px; border: 1px solid var(--ink); }
.swatch.covered { background: var(--mint); }
.swatch.candidate { background: var(--vermilion); }
.swatch.unique { background: var(--cobalt); }
.proof-footer > strong { justify-self: end; font: 700 10px/1.4 Outfit, "Avenir Next", sans-serif; text-align: right; }

.result-actions {
  display: grid;
  grid-template-columns: max-content max-content max-content max-content minmax(160px, 1fr);
  grid-auto-flow: dense;
  gap: 8px;
  align-items: center;
  padding: 9px 13px;
}
#export-status {
  min-width: 0;
  color: var(--muted);
  font: 9px/1.35 Menlo, Monaco, Consolas, monospace;
  text-align: right;
  overflow-wrap: anywhere;
}

.method-section {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(50px, 8vw, 120px);
  width: min(1200px, calc(100% - 56px));
  margin: 0 auto;
  padding: 150px 0 180px;
}
.method-intro { align-self: start; }
.method-intro h2 { margin: 10px 0 20px; font-size: clamp(2.1rem, 4.5vw, 4.4rem); line-height: 0.98; letter-spacing: 0; }
.method-intro > p:last-child { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.method-accordions { border-top: 1px solid var(--line); }
.method-accordions details { border-bottom: 1px solid var(--line); }
.method-accordions summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  min-height: 74px;
  cursor: pointer;
  font-size: 22px;
  font-weight: 800;
  list-style: none;
}
.method-accordions summary::-webkit-details-marker { display: none; }
.method-accordions details p { margin: 0; padding: 0 0 28px; max-width: 620px; color: var(--muted); font-size: 15px; line-height: 1.55; }

@media (min-width: 861px) {
  .method-accordions {
    display: flex;
    min-width: 0;
    min-height: 330px;
    border-left: 1px solid var(--line);
  }
  .method-accordions details {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 18px;
    border-right: 1px solid var(--line);
    transition: flex 420ms ease;
  }
  .method-accordions details[open],
  .method-accordions details:hover { flex: 1.8 1 0; }
  .method-accordions summary { align-items: flex-start; flex-direction: column; justify-content: center; }
}

.term-marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--acid);
  white-space: nowrap;
}
.term-marquee div {
  display: inline-block;
  min-width: max-content;
  padding: 16px 0;
  font: 800 12px/1 Menlo, Monaco, Consolas, monospace;
  animation: marquee 34s linear infinite;
}
@keyframes marquee { to { transform: translateX(-50%); } }

footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 28px;
  align-items: center;
  min-height: 110px;
  padding: 28px;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
}
footer span { color: #c9cec6; }
footer a { color: var(--acid); text-decoration: none; font-weight: 800; }

@media (max-width: 860px) {
  :root { --header-height: 64px; }
  .identity-rail {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 36px 27px;
    padding: 0 14px;
  }
  .brand { font-size: 9px; }
  .brand-full { display: none; }
  .brand-compact { display: inline; }
  .brand-mark { flex-basis: 16px; width: 16px; height: 18px; }
  .live-status { grid-column: 2; grid-row: 1; max-width: 148px; font-size: 8px; }
  .runtime-visual { grid-column: 1 / -1; grid-row: 2; padding: 0; font-size: 7px; white-space: nowrap; }
  .workbench { padding: 28px 14px 100px; }
  .hero-copy { margin-bottom: 22px; }
  .hero-copy h1 { font-size: clamp(2.7rem, 13vw, 3.45rem); }
  .hero-copy > p:last-child { font-size: 14px; }
  .command-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .command-row .command { width: 100%; padding: 0 9px; }
  .proof-heading { grid-template-columns: 1fr; gap: 6px; align-items: start; min-height: 84px; }
  .proof-state { justify-self: start; text-align: left; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { min-height: 92px; border-bottom: 1px solid #aeb3aa; }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(3), .metric:nth-child(4) { border-bottom: 0; }
  .metric strong { font-size: 1.8rem; }
  .pattern-strip { grid-template-columns: 1fr; gap: 7px; }
  .pattern-strip p { justify-self: start; text-align: left; }
  .session-band { grid-template-columns: 1fr; }
  .session-label { flex-direction: row; justify-content: space-between; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
  .step-grid { grid-template-columns: 1fr; }
  .trace-step { min-height: 54px; border-right: 0; border-bottom: 1px solid #aeb3aa; }
  .trace-step:last-child { border-bottom: 0; }
  .trace-step strong { white-space: normal; overflow-wrap: anywhere; }
  .proof-footer { grid-template-columns: 1fr; gap: 9px; }
  .proof-footer > strong { justify-self: start; text-align: left; }
  .result-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-actions .command { width: 100%; padding: 0 8px; }
  #register-button { grid-column: 1 / -1; }
  #export-status { grid-column: 1 / -1; text-align: left; }
  .method-section { grid-template-columns: 1fr; width: calc(100% - 28px); padding: 120px 0 140px; }
  footer { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 420px) {
  .hero-copy h1 { font-size: 2.65rem; }
  .command { font-size: 10px; }
  .proof-heading h2 { font-size: 1.35rem; }
  .occurrence-carousel { padding-left: 9px; padding-right: 9px; }
  .legend { display: grid; grid-template-columns: 1fr 1fr; }
  .legend span:last-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}