:root { --lab-ink:#0d1219; --lab-cyan:#27c7bf; --lab-blue:#527cff; --lab-warm:#ffca68; }
[hidden] { display:none !important; }
.lab-brand { color:var(--lab-ink); text-decoration:none; }
.lab-brand span { color:var(--teal); }
.lab-hero { padding:72px 0 58px; color:#fff; background:var(--lab-ink); border:0; }
.lab-hero-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:64px; align-items:end; }
.lab-hero h1 { max-width:820px; font-size:clamp(2.7rem,6vw,5.4rem); }
.lab-intro { max-width:500px; color:#b9c4d2; font-size:1.05rem; }
.lab-workspace { padding:0; background:#e8edf4; border:0; }
.workspace-grid { display:grid; grid-template-columns:1.45fr .55fr; min-height:570px; border-inline:1px solid #c6cfda; }
.intake-panel,.pipeline-panel { padding:clamp(24px,4vw,48px); }
.intake-panel { background:#fff; }
.pipeline-panel { color:#fff; background:#151c27; }
.panel-heading,.intake-footer,.result-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.panel-heading > div { display:flex; align-items:center; gap:14px; }
.panel-heading span,.panel-kicker { color:var(--teal); font-size:.75rem; font-weight:800; text-transform:uppercase; }
.panel-heading h2 { margin:0; }
.sample-button,.run-button { min-height:42px; border:1px solid #cbd3dc; border-radius:6px; padding:0 15px; font:inherit; font-weight:750; cursor:pointer; background:#fff; }
.run-button { color:#071312; border-color:var(--lab-cyan); background:var(--lab-cyan); }
.run-button:hover,.run-button:focus-visible { background:#58e2db; }
.intake-panel label { display:block; margin:34px 0 10px; font-size:.78rem; font-weight:800; text-transform:uppercase; }
.intake-panel textarea { width:100%; min-height:330px; resize:vertical; border:1px solid #bfc9d5; border-radius:6px; padding:22px; color:var(--lab-ink); background:#f8fafc; font:500 1rem/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; }
.intake-footer { margin-top:14px; color:#687384; font-size:.85rem; }
.trace-list { list-style:none; margin:28px 0 0; padding:0; }
.trace-list li { display:grid; grid-template-columns:34px 1fr auto; gap:13px; align-items:center; padding:18px 0; border-top:1px solid #313b49; opacity:.55; transition:opacity .2s ease,transform .2s ease; }
.trace-list li.is-active,.trace-list li.is-complete { opacity:1; }
.trace-list li.is-active { transform:translateX(5px); }
.trace-list li > span { color:var(--lab-cyan); font:800 .72rem ui-monospace,monospace; }
.trace-list strong,.trace-list small { display:block; }
.trace-list small { margin-top:3px; color:#8f9bad; }
.trace-list b { color:#7d8998; font-size:.7rem; text-transform:uppercase; }
.trace-list .is-active b { color:var(--lab-warm); }
.trace-list .is-complete b { color:var(--lab-cyan); }
.result-section { padding:74px 0; background:#f5f7fa; }
.result-heading { align-items:end; }
.result-heading h2 { margin:0; }
.result-stats { display:flex; gap:18px; flex-wrap:wrap; }
.result-stats span { min-width:104px; color:#667182; font-size:.76rem; text-transform:uppercase; }
.result-stats strong { display:block; color:var(--lab-ink); font-size:1.8rem; }
.map-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:30px; }
.map-card { min-width:0; border:1px solid #cbd3dc; border-top:4px solid var(--domain-color,var(--lab-blue)); border-radius:6px; padding:20px; background:#fff; }
.map-card header { position:static; display:flex; justify-content:space-between; gap:10px; border:0; background:transparent; backdrop-filter:none; }
.map-card header span { color:#778293; font:700 .68rem ui-monospace,monospace; }
.map-card h3 { font-size:1.1rem; }
.map-card ul { margin:18px 0 0; padding-left:18px; color:#505b6b; }
.map-card li + li { margin-top:8px; }
.empty-state { grid-column:1/-1; min-height:220px; display:grid; place-items:center; border:1px dashed #aeb9c6; color:#6d7887; text-align:center; padding:34px; }
.review-rail { display:grid; grid-template-columns:.42fr 1fr; gap:36px; margin-top:22px; padding:28px; color:#fff; background:var(--lab-ink); }
.review-rail h3 { margin:8px 0 0; font-size:1.45rem; }
.review-rail ul { margin:0; padding-left:20px; color:#c3cbd6; }
.review-rail li + li { margin-top:8px; }
.lab-boundary { color:#fff; background:#263348; }
.boundary-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:center; }
.boundary-grid h2 { margin:0; }
.boundary-grid > p { color:#c5ced9; }
@media (max-width:850px) {
  .lab-hero-grid,.workspace-grid,.boundary-grid,.review-rail { grid-template-columns:1fr; }
  .workspace-grid { border-inline:0; }
  .map-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:580px) {
  .map-grid { grid-template-columns:1fr; }
  .panel-heading,.intake-footer,.result-heading { align-items:stretch; flex-direction:column; }
  .result-stats { width:100%; justify-content:space-between; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }