:root {
  color-scheme: dark;
  --bg: #07101f;
  --panel: #0d1b31;
  --surface: #132641;
  --line: #29405f;
  --text: #f5f8ff;
  --muted: #a8b8cc;
  --cyan: #42e5d3;
  --blue: #6f91ff;
  --danger: #ff7e8e;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: radial-gradient(circle at 80% 0, #123552, transparent 35%), var(--bg); }
button, input, select { font: inherit; }
button, select, input { border: 1px solid var(--line); border-radius: 10px; }
button { padding: .75rem 1rem; color: var(--text); background: var(--surface); cursor: pointer; font-weight: 750; }
button:hover, button:focus-visible { border-color: var(--cyan); outline: none; }
button.primary { color: #041219; background: var(--cyan); border-color: var(--cyan); }

.topbar { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem clamp(1rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line); color: var(--muted); background: rgba(7, 16, 31, .88); }
.topbar a { color: var(--cyan); text-decoration: none; }
main { width: min(1440px, 100%); margin: auto; padding: clamp(1rem, 3vw, 2.5rem); }
.hero { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1.5rem; align-items: end; margin-bottom: 1.5rem; }
h1 { max-width: 720px; margin: .25rem 0 .8rem; font-size: clamp(2.2rem, 6vw, 4.8rem); line-height: .98; }
h2 { margin: 0; font-size: 1.15rem; }
.hero p:not(.eyebrow) { max-width: 700px; color: var(--muted); line-height: 1.7; }
.eyebrow { margin: 0 0 .35rem; color: var(--cyan); font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.process-card, .controls, .pipeline, .inspectors article, .code-panel, .log-panel { border: 1px solid var(--line); border-radius: 16px; background: rgba(13, 27, 49, .92); }
.process-card { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: 1.2rem; }
.process-card small { display: block; color: var(--muted); }
.process-card strong { font-size: 1.2rem; }
.process-dot { width: 12px; height: 12px; margin-top: .5rem; border-radius: 50%; background: #68768a; box-shadow: 0 0 0 5px rgba(104, 118, 138, .13); }
.process-dot.online { background: var(--cyan); box-shadow: 0 0 0 5px rgba(66, 229, 211, .13); }
dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); margin: .6rem 0 0; }
dl div { border-top: 1px solid var(--line); padding-top: .65rem; }
dt { color: var(--muted); font-size: .7rem; } dd { margin: .2rem 0 0; font-weight: 800; }

.workspace { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 1.2rem; align-items: start; }
.controls { position: sticky; top: 1rem; display: grid; gap: .7rem; padding: 1.2rem; }
.controls label { margin-top: .5rem; font-size: .8rem; font-weight: 800; }
.controls input, .controls select { width: 100%; padding: .7rem; color: var(--text); background: #09182b; }
.controls hr { width: 100%; margin: .7rem 0; border: 0; border-top: 1px solid var(--line); }
.hint, .feedback { margin: -.25rem 0 .2rem; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.feedback.error { color: var(--danger); }
.stage { display: grid; gap: 1.2rem; min-width: 0; }
.pipeline, .code-panel, .log-panel { padding: 1.2rem; }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.section-title > span { color: var(--muted); font: 700 .72rem ui-monospace, monospace; }
.pipeline ol { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.pipeline li { position: relative; min-height: 115px; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: #09182b; transition: 160ms ease; }
.pipeline li::after { content: "→"; position: absolute; top: 45%; right: -.55rem; z-index: 1; color: var(--muted); }
.pipeline li:last-child::after { content: none; }
.pipeline li.active { border-color: var(--cyan); background: #103548; transform: translateY(-3px); }
.pipeline li.failed { border-color: var(--danger); }
.pipeline li span, .pipeline li small { display: block; color: var(--muted); font-size: .68rem; }
.pipeline li strong { display: block; margin: 1.1rem 0 .25rem; font-size: .85rem; }
.inspectors { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.inspectors article { min-width: 0; padding: 1.2rem; }
pre { overflow: auto; margin: .7rem 0 0; color: #d8e6ff; font: .78rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }
.tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.tabs button[aria-selected="true"] { color: #041219; background: var(--cyan); border-color: var(--cyan); }
#code-view { min-height: 240px; padding: 1rem; border-radius: 10px; background: #06111f; }
#event-log { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
#event-log li { padding: .65rem .8rem; border-left: 3px solid var(--blue); color: var(--muted); background: #09182b; font: .74rem ui-monospace, monospace; }
#event-log li.error { border-color: var(--danger); color: #ffd6db; }

@media (max-width: 980px) {
  .hero, .workspace { grid-template-columns: 1fr; }
  .controls { position: static; }
  .pipeline ol { grid-template-columns: repeat(3, 1fr); }
  .pipeline li:nth-child(3)::after { content: none; }
}
@media (max-width: 620px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .pipeline ol, .inspectors { grid-template-columns: 1fr; }
  .pipeline li::after { content: "↓"; top: auto; right: 50%; bottom: -.75rem; }
  .pipeline li:nth-child(3)::after { content: "↓"; }
  dl { grid-template-columns: 1fr; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }