:root {
  color-scheme:dark;
  --bg:#0b1016;
  --panel:#121a24;
  --border:#273342;
  --text:#edf3fa;
  --muted:#94a5b8;
  --accent:#73e2be;
  --purple:#b4a0ff;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.55;
}
button,input,textarea {
  font:inherit;
}
button {
  cursor:pointer;
}
button:disabled {
  opacity:.55;
  cursor:wait;
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}
input:focus,textarea:focus {
  outline:2px solid var(--accent);
  outline-offset:-2px;
}
button {
  border:1px solid var(--border);
  border-radius:7px;
  color:var(--text);
  background:#1b2633;
  padding:8px 13px;
}
button:hover {
  border-color:var(--accent);
}
.topbar {
  height:76px;
  border-bottom:1px solid var(--border);
  padding:0 4%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  font-size:19px;
  letter-spacing:-.5px;
}
.brand-mark {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--accent);
  color:var(--accent);
  border-radius:10px;
  font-size:25px;
  font-family:serif;
}
.version {
  font-size:10px;
  letter-spacing:1.6px;
  color:var(--muted);
  margin-left:5px;
}
.engine-indicator {
  font-size:12px;
  color:var(--muted);
}
.engine-indicator>span {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%;
  margin-right:7px;
}
main {
  max-width:1520px;
  margin:auto;
  padding:40px 4% 20px;
}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:32px;
}
.eyebrow {
  color:var(--accent);
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  margin:0 0 10px;
}
h1 {
  font-size:clamp(26px,3vw,40px);
  line-height:1.2;
  letter-spacing:-1.3px;
  margin:0 0 12px;
}
.intro p:last-child {
  color:var(--muted);
  margin:0;
}
.formula {
  font-family:Georgia,serif;
  font-size:22px;
  color:var(--purple);
  white-space:nowrap;
}
.formula span {
  color:#d7d0ec;
}
.workspace {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:start;
  gap:22px;
}
.panel {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 22px;
  border-bottom:1px solid var(--border);
}
.panel-heading>div {
  display:flex;
  gap:12px;
  align-items:center;
}
h2 {
  font-size:16px;
  margin:0;
  font-weight:600;
}
.section-number {
  color:var(--accent);
  font-family:monospace;
  font-size:12px;
}
.subtle,.caption {
  color:var(--muted);
  font-size:12px;
}
.example-row {
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.example-row>span {
  font-size:11px;
  color:var(--muted);
  width:100%;
  margin-bottom:2px;
}
.example-row button {
  font-size:12px;
  padding:7px 11px;
}
.example-row button.active {
  color:var(--accent);
  border-color:#418e78;
  background:#17322d;
}
small {
  opacity:.6;
  margin-left:4px;
}
form {
  padding:0 22px;
}
.settings {
  display:grid;
  grid-template-columns:1fr 1fr 1.4fr;
  gap:12px;
  margin:0 0 24px;
}
label {
  font-size:12px;
  color:#bac9d9;
}
input {
  display:block;
  width:100%;
  background:#0c131d;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:6px;
  padding:9px 11px;
  margin-top:6px;
}
.optional {
  color:var(--muted);
  font-size:10px;
  float:right;
}
.editor-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#17212e;
  border:1px solid var(--border);
  border-bottom:0;
  border-radius:7px 7px 0 0;
  padding:7px 12px;
  font-size:10px;
  letter-spacing:1px;
  color:var(--muted);
}
.editor-heading button {
  padding:3px 6px;
  background:none;
  border:0;
  color:var(--muted);
  font-size:11px;
  letter-spacing:0;
}
textarea {
  width:100%;
  display:block;
  min-height:310px;
  resize:vertical;
  background:#0a111b;
  color:#bbdfd6;
  border:1px solid var(--border);
  border-bottom:0;
  border-top:0;
  padding:18px 16px;
  line-height:1.85;
  font:13px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;
  tab-size:2;
}
.editor-footer {
  display:flex;
  justify-content:space-between;
  padding:8px 12px;
  background:#0a111b;
  border:1px solid var(--border);
  border-top:0;
  border-radius:0 0 7px 7px;
  font-size:10px;
  color:var(--muted);
}
.run-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:20px 0;
}
.run-row p {
  color:var(--muted);
  font-size:11px;
  max-width:200px;
}
.run-row strong {
  font-weight:500;
  color:#c1d0df;
}
.primary {
  background:var(--accent);
  border-color:var(--accent);
  color:#0c2920;
  font-weight:700;
  padding:12px 17px;
  white-space:nowrap;
}
.primary:hover {
  background:#96edcf;
}
.primary span {
  margin-right:8px;
  font-size:11px;
}
.reference {
  border-top:1px solid var(--border);
  padding:16px 22px;
  font-size:12px;
  color:var(--muted);
}
summary {
  cursor:pointer;
  color:#b9c8d8;
}
.gate-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:20px;
}
.gate-grid div {
  display:flex;
  flex-direction:column;
  gap:3px;
}
.gate-grid code {
  color:var(--accent);
  font-size:11px;
}
.gate-grid span {
  font-size:11px;
}
.status {
  border:1px solid var(--border);
  border-radius:20px;
  padding:3px 10px;
  font-size:10px;
  color:var(--muted);
}
.status.success {
  color:var(--accent);
  border-color:#376957;
}
.status.error {
  color:#ffadad;
  border-color:#7f4c4c;
}
.empty {
  min-height:540px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:35px;
}
.empty h3 {
  font-size:16px;
  margin:30px 0 8px;
}
.empty p {
  font-size:13px;
  color:var(--muted);
  margin:0;
}
.orbital {
  width:85px;
  height:85px;
  border:1px solid #315448;
  border-radius:50%;
  position:relative;
  transform:rotate(-35deg);
}
.orbital:after {
  content:"";
  position:absolute;
  inset:10px -15px;
  border:1px solid #4f4568;
  border-radius:50%;
  transform:rotate(70deg);
}
.orbital span {
  position:absolute;
  left:36px;
  top:36px;
  width:12px;
  height:12px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 22px #73e2be44;
}
.metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--border);
  padding:20px 22px;
  gap:10px;
}
.metrics span {
  color:var(--muted);
  font-size:10px;
  display:block;
}
.metrics strong {
  display:block;
  font-size:24px;
  font-weight:500;
  letter-spacing:-.5px;
  margin-top:3px;
}
.result-section {
  padding:20px 22px;
  border-bottom:1px solid var(--border);
}
h3 {
  font-size:13px;
  font-weight:600;
  margin:0 0 8px;
}
.caption {
  font-size:11px;
  margin:0 0 15px;
}
.tag {
  float:right;
  font-size:9px;
  font-weight:400;
  letter-spacing:.3px;
  color:var(--muted);
  padding:2px 6px;
  border-radius:4px;
  background:#202b39;
}
.hist-row {
  display:grid;
  grid-template-columns:minmax(55px,auto) 1fr 58px;
  align-items:center;
  gap:12px;
  margin:13px 0;
}
.outcome {
  font:12px ui-monospace,monospace;
  color:var(--accent);
  overflow-wrap:anywhere;
  max-width:150px;
}
.bar-track {
  background:#202c38;
  border-radius:4px;
  height:9px;
  overflow:hidden;
}
.bar-fill {
  height:100%;
  background:var(--accent);
  border-radius:4px;
}
.hist-count {
  font-size:11px;
  text-align:right;
  color:var(--muted);
}
.state-card {
  border:1px solid var(--border);
  border-radius:7px;
  padding:12px;
  margin:9px 0;
  background:#101823;
}
.state-heading {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
}
.state-heading strong {
  color:var(--purple);
  font-weight:500;
}
.state-heading span {
  font-size:10px;
  color:var(--muted);
}
.probability-track {
  display:flex;
  margin:12px 0 6px;
  height:6px;
  background:var(--purple);
  border-radius:3px;
  overflow:hidden;
}
.probability-zero {
  background:var(--accent);
}
.probability-labels {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
}
.state-card details {
  margin-top:9px;
  font-size:10px;
}
.state-card code {
  display:block;
  color:var(--muted);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin-top:7px;
}
.measurement-list {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.measurement {
  background:#1c2937;
  border:1px solid var(--border);
  border-radius:5px;
  padding:5px 8px;
  font:11px ui-monospace,monospace;
  color:#c2d2e2;
}
.measurement strong {
  color:var(--accent);
}
#used-seed {
  margin:13px 0 0;
  overflow-wrap:anywhere;
}
.raw-output {
  padding:16px 22px;
  font-size:12px;
}
.raw-output pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:11px/1.8 ui-monospace,monospace;
  color:var(--muted);
  max-height:350px;
  overflow:auto;
}
#error {
  margin:18px 22px;
  background:#352025;
  border:1px solid #70414b;
  color:#ffbcc3;
  border-radius:7px;
  padding:12px;
  font-size:12px;
  white-space:pre-wrap;
}
footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:10px;
  color:#6e8195;
  margin-top:25px;
}
[hidden] {
  display:none!important;
}
@media(min-width:1350px) {
  textarea {
    min-height:360px;
  }
}
@media(max-width:1000px) {
  .formula {
    display:none;
  }
  .workspace {
    grid-template-columns:1fr;
  }
  .empty {
    min-height:260px;
  }
  .intro {
    margin-bottom:25px;
  }
}
@media(max-width:550px) {
  main {
    padding-top:28px;
  }
  .topbar {
    height:62px;
  }
  .engine-indicator {
    display:none;
  }
  .panel-heading,.example-row,.result-section,.metrics {
    padding-left:16px;
    padding-right:16px;
  }
  form {
    padding:0 16px;
  }
  .settings {
    grid-template-columns:1fr 1fr;
  }
  .seed-label {
    grid-column:1/-1;
  }
  .run-row {
    align-items:stretch;
    flex-direction:column;
  }
  .run-row p {
    max-width:none;
    margin:0;
  }
  .gate-grid {
    grid-template-columns:1fr;
  }
  .subtle {
    font-size:10px;
  }
  .editor-footer span:last-child {
    display:none;
  }
  .tag {
    float:none;
    display:inline-block;
    margin-left:5px;
  }
  footer {
    flex-direction:column;
    gap:4px;
  }
  .hist-row {
    grid-template-columns:minmax(40px,auto) 1fr 58px;
  }
  .outcome {
    max-width:95px;
  }
  h1 {
    letter-spacing:-.7px;
  }
}

#example-description {
  margin: 0 22px 20px;
}
.maze-summary {
  color: var(--accent);
  font-size: 12px;
  margin: 8px 0 16px;
}
.maze-summary.invalid { color: #ffb5b5; }
#maze-board {
  background: #0a111b;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}
#maze-board svg { display: block; width: 100%; height: auto; }
.maze-wall { fill: #2a3747; stroke: #0a111b; stroke-width: .8; }
.maze-floor { fill: #0a111b; }
.maze-route-preview { fill: none; stroke: #73e2be; stroke-width: 3; opacity: .25; stroke-linejoin: round; }
.maze-route { fill: none; stroke: #73e2be; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.maze-start { fill: #73e2be; }
.maze-exit { fill: #b4a0ff; }
.maze-cell-label { fill: #0b1016; text-anchor: middle; font: bold 11px system-ui; }
.maze-marker { fill: white; stroke: #176e54; stroke-width: 1.5; }
.maze-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 10px; color: var(--muted); margin: 12px 0 18px; }
.legend-start { color: var(--accent); }
.legend-exit { color: var(--purple); }
.maze-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.maze-controls button { font-size: 11px; }
#maze-play { color: var(--accent); border-color: #418e78; }
.maze-slider-label { font-size: 10px; }
#maze-step { accent-color: var(--accent); padding: 0; border: 0; background: none; cursor: pointer; }
.maze-position { color: #c4d8e9; font-size: 12px; min-height: 38px; }
.maze-directions { margin: 18px 0; font-size: 12px; }
.maze-directions .caption { margin: 12px 0; }
#maze-moves { display: flex; flex-wrap: wrap; gap: 7px; }
.maze-move { font-size: 11px; padding: 5px 8px; }
.maze-move.active { color: var(--accent); border-color: var(--accent); }
.maze-note { margin-bottom: 0; }
.maze-comparison { margin: 16px 0 20px; }
.maze-comparison h4 { font-size: 12px; font-weight: 600; margin: 0 0 10px; }
.maze-comparison table { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.maze-comparison th, .maze-comparison td { text-align: left; padding: 9px 7px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; vertical-align: top; }
.maze-comparison thead th { color: var(--purple); font-weight: 500; background: #17212e; }
.maze-comparison tbody th { color: var(--muted); font-weight: 400; }
.maze-comparison .caption { margin: 12px 0 0; }
#maze-agreement { color: var(--accent); }
.maze-overlay-label { display: flex; align-items: center; gap: 8px; font-size: 11px; margin: 0 0 12px; }
#maze-bfs-overlay { display: inline-block; width: auto; margin: 0; accent-color: var(--purple); }
.maze-classic-route { fill: none; stroke: #b4a0ff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
#grover-search { margin-bottom: 20px; padding: 14px; border: 1px solid #405845; border-radius: 8px; }
#grover-search h4 { margin: 0 0 10px; font-size: 13px; }
#grover-search .caption { margin: 12px 0 0; }
#grover-chart svg { width: 100%; height: auto; display: block; }
.grover-axis { fill: none; stroke: #506073; stroke-width: 1; }
.grover-label { fill: #94a5b8; font: 10px system-ui; }
#grover-description { color: var(--accent); font-size: 12px; min-height: 54px; }
#grover-step, #bfs-step { padding: 0; accent-color: var(--purple); }
.maze-bfs-cell { fill: #b4a0ff; opacity: .35; }
.shared-nav { display: flex; gap: 22px; font-size: 12px; }
.shared-nav a, .shared-footer a, .catalog-note a { color: var(--muted); text-decoration: none; }
.shared-nav a:hover, .catalog-note a:hover { color: var(--accent); }
.shared-footer { max-width: 1520px; margin: 20px auto; padding: 0 4%; }
.example-catalog { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.example-card { display: flex; flex-direction: column; min-height: 235px; border: 1px solid var(--border); border-radius: 12px; padding: 26px; background: var(--panel); color: var(--text); text-decoration: none; }
.example-card:hover { border-color: var(--accent); background: #17232d; }
.example-card h2 { margin: 15px 0 10px; font-size: 20px; }
.example-card p { color: var(--muted); font-size: 13px; }
.card-open { color: var(--accent); margin-top: auto; padding-top: 18px; font-size: 12px; }
.catalog-note { margin-top: 25px; color: var(--muted); }
@media(max-width:950px) { .example-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:550px) { .example-catalog { grid-template-columns:1fr; } .shared-nav { gap:10px; font-size:10px; } .topbar .brand { font-size:15px; gap:7px; } .version { display:none; } }