:root {
  color-scheme: dark;
  --bg: #07050d;
  --panel: #120b20;
  --panel-2: #1b102d;
  --ink: #faf8ff;
  --muted: #b8afc5;
  --pink: #ff4bd8;
  --cyan: #35e9ff;
  --violet: #8c63ff;
  --yellow: #ffe052;
  --green: #59ff9a;
  --red: #ff5a70;
  --line: rgba(140, 99, 255, .36);
  --display: "Arial Black", Impact, Haettenschweiler, "Trebuchet MS", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  font-family: var(--body);
  background:
    radial-gradient(circle at 80% 4%, rgba(140,99,255,.19), transparent 28rem),
    radial-gradient(circle at 12% 32%, rgba(255,75,216,.09), transparent 24rem),
    linear-gradient(rgba(53,233,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,233,255,.025) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 64px 64px, 64px 64px, auto;
}
body::after { content:""; position:fixed; inset:0; z-index:1000; pointer-events:none; opacity:.08; background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.7) 4px); }
a { color: inherit; }
button { font: inherit; }
::selection { color:#07050d; background:var(--cyan); }
:focus-visible { outline:3px solid var(--yellow); outline-offset:4px; }
.skip-link { position:fixed; top:-60px; left:14px; z-index:1100; padding:11px 15px; color:#06040a; background:var(--yellow); font-weight:900; }
.skip-link:focus { top:14px; }

.lab-header { position:sticky; top:0; z-index:100; min-height:70px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:10px max(20px,calc((100vw - var(--max))/2)); border-bottom:1px solid rgba(53,233,255,.2); background:rgba(7,5,13,.9); backdrop-filter:blur(18px); }
.back-link { justify-self:start; color:var(--cyan); font:800 .7rem/1 var(--mono); text-decoration:none; text-transform:uppercase; letter-spacing:.08em; }
.lab-brand { display:flex; align-items:center; gap:10px; }
.lab-brand span { display:grid; place-items:center; width:39px; height:39px; border:2px solid var(--cyan); color:var(--cyan); box-shadow:0 0 16px rgba(53,233,255,.3); font:900 .8rem/1 var(--mono); }
.lab-brand strong { font:900 .7rem/1.2 var(--mono); letter-spacing:.12em; }
.lab-header > p { justify-self:end; margin:0; color:var(--green); font:800 .58rem/1 var(--mono); letter-spacing:.1em; }
.lab-header > p i { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:currentColor; box-shadow:0 0 9px currentColor; }

main { width:min(calc(100% - 40px),var(--max)); margin-inline:auto; }
.lab-hero { min-height:650px; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:70px; align-items:center; padding-block:78px; }
.eyebrow { margin:0 0 18px; color:var(--cyan); font:800 .7rem/1.5 var(--mono); letter-spacing:.16em; }
h1,h2 { font-family:var(--display); text-transform:uppercase; letter-spacing:-.035em; }
h1 { max-width:850px; margin:0; font-size:clamp(3rem,7.5vw,6.8rem); line-height:.88; }
h1 span { color:transparent; -webkit-text-stroke:2px var(--pink); text-shadow:5px 5px 0 rgba(140,99,255,.55),0 0 28px rgba(255,75,216,.28); }
.lede { max-width:750px; margin:30px 0 0; color:#ddd7e7; font-size:clamp(1rem,1.8vw,1.24rem); line-height:1.7; }
.lab-hero aside { padding:24px; border:1px solid rgba(53,233,255,.45); background:rgba(10,13,22,.78); box-shadow:8px 8px 0 rgba(140,99,255,.17); }
.lab-hero aside span { color:var(--yellow); font:900 .66rem/1 var(--mono); letter-spacing:.1em; }
.lab-hero aside p { margin:15px 0 0; color:#d8d2e1; line-height:1.7; }

.scenario-picker,.run-section,.review-section,.evidence-section { padding-block:82px; border-top:1px solid var(--line); }
.section-label { display:grid; grid-template-columns:54px 1fr; gap:15px; align-items:start; margin-bottom:36px; }
.section-label > span { display:grid; place-items:center; width:45px; height:32px; color:#080511; background:var(--cyan); box-shadow:4px 4px 0 var(--pink); font:900 .72rem/1 var(--mono); }
.section-label p { margin:0 0 8px; color:var(--pink); font:800 .63rem/1 var(--mono); letter-spacing:.14em; }
.section-label h2 { margin:0; font-size:clamp(2rem,4.5vw,4rem); line-height:.95; }

.scenario-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.scenario-tabs button { min-width:0; display:grid; gap:8px; padding:18px; border:1px solid rgba(140,99,255,.3); color:var(--ink); background:rgba(18,11,32,.7); text-align:left; cursor:pointer; transition:.18s ease; }
.scenario-tabs button:hover { border-color:var(--cyan); transform:translateY(-2px); }
.scenario-tabs button[aria-selected="true"] { border-color:var(--cyan); background:rgba(53,233,255,.07); box-shadow:5px 5px 0 rgba(53,233,255,.11); }
.scenario-tabs span { color:var(--pink); font:800 .57rem/1 var(--mono); letter-spacing:.12em; }
.scenario-tabs strong { font:900 .86rem/1.3 var(--mono); }
.scenario-tabs small { color:var(--muted); line-height:1.4; }
.scenario-panel { margin-top:14px; padding:clamp(24px,4vw,42px); border:1px solid rgba(255,75,216,.35); background:linear-gradient(135deg,rgba(28,14,45,.9),rgba(9,7,16,.86)); }
.scenario-panel > div { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.scenario-panel > div span { padding:6px 8px; color:#0a0509; background:var(--red); font:900 .62rem/1 var(--mono); }
.scenario-panel > div small { color:var(--cyan); font:800 .62rem/1 var(--mono); letter-spacing:.1em; }
.scenario-panel h3 { margin:20px 0 12px; font:900 clamp(1.4rem,3vw,2.25rem)/1.15 var(--mono); text-transform:uppercase; }
.scenario-panel > p { max-width:850px; color:#d8d1e1; line-height:1.7; }
.scenario-panel dl { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:24px 0 0; }
.scenario-panel dl div { padding:16px; border:1px solid rgba(53,233,255,.18); background:rgba(53,233,255,.025); }
.scenario-panel dt { margin-bottom:8px; color:var(--yellow); font:800 .61rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.scenario-panel dd { margin:0; color:var(--muted); font-size:.9rem; line-height:1.6; }

.run-console { border:1px solid rgba(53,233,255,.36); background:#070910; box-shadow:9px 9px 0 rgba(53,233,255,.07); }
.pipeline { display:grid; grid-template-columns:repeat(5,1fr); margin:0; padding:0; list-style:none; border-bottom:1px solid rgba(53,233,255,.18); }
.pipeline li { position:relative; display:grid; gap:7px; padding:18px; border-right:1px solid rgba(53,233,255,.15); }
.pipeline li:last-child { border:0; }
.pipeline li:not(:last-child)::after { content:"▶"; position:absolute; right:-7px; top:23px; z-index:2; color:var(--pink); font-size:.7rem; }
.pipeline span { color:var(--cyan); font:800 .63rem/1 var(--mono); }.pipeline strong { font:900 .75rem/1.2 var(--mono); text-transform:uppercase; }.pipeline small { color:#81798d; font-size:.68rem; }
.pipeline li.active { background:rgba(255,224,82,.06); }.pipeline li.active span,.pipeline li.active strong { color:var(--yellow); text-shadow:0 0 10px rgba(255,224,82,.45); }
.pipeline li.done { background:rgba(89,255,154,.045); }.pipeline li.done span,.pipeline li.done strong { color:var(--green); }
.console-body { display:grid; grid-template-columns:1fr 260px; min-height:330px; }
.terminal { min-width:0; border-right:1px solid rgba(53,233,255,.18); }
.terminal-top { display:flex; align-items:center; gap:6px; min-height:40px; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.06); color:#8f879b; font:700 .6rem/1 var(--mono); }
.terminal-top span { margin-right:auto; }.terminal-top i { width:7px; height:7px; border-radius:50%; background:#352d3e; }
#terminal-output { max-height:330px; overflow:auto; padding:20px; font:500 .74rem/1.7 var(--mono); }
#terminal-output p { margin:0 0 7px; color:#d8d3de; }#terminal-output b { color:var(--green); }#terminal-output .warn { color:var(--yellow); }#terminal-output .fail { color:var(--red); }#terminal-output .info { color:var(--cyan); }#terminal-output .muted { color:#756d82; }
.run-controls { display:flex; flex-direction:column; justify-content:center; gap:12px; padding:22px; }
.run-button,.reset-button { min-height:48px; border:2px solid; cursor:pointer; font:900 .65rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.run-button { color:#06090c; border-color:var(--cyan); background:var(--cyan); box-shadow:5px 5px 0 var(--violet); }.run-button:disabled { opacity:.5; cursor:wait; }
.reset-button { color:var(--ink); border-color:rgba(255,255,255,.23); background:transparent; }
.run-controls > p { display:grid; gap:6px; margin:12px 0 0; }.run-controls > p span { color:var(--yellow); font:900 .72rem/1 var(--mono); }.run-controls > p small { color:var(--muted); }

.reviewer-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.reviewer-grid article { padding:20px; border:1px solid rgba(140,99,255,.28); background:rgba(18,11,32,.72); }
.reviewer-grid header { display:grid; grid-template-columns:45px 1fr auto; gap:12px; align-items:center; }
.reviewer-grid header > span { display:grid; place-items:center; width:43px; height:34px; color:#080511; background:var(--violet); font:900 .65rem/1 var(--mono); }
.reviewer-grid header p { margin:0 0 4px; font:900 .76rem/1.2 var(--mono); text-transform:uppercase; }.reviewer-grid header small { color:var(--muted); }.reviewer-grid header b { color:#7d7589; font:900 .59rem/1 var(--mono); }
.reviewer-grid article > p { margin:18px 0 0; color:var(--muted); font-size:.88rem; line-height:1.6; }
.reviewer-grid article.finding { border-color:rgba(255,90,112,.55); }.reviewer-grid article.finding header b { color:var(--red); }.reviewer-grid article.finding header > span { background:var(--red); }
.reviewer-grid article.pass { border-color:rgba(89,255,154,.42); }.reviewer-grid article.pass header b { color:var(--green); }.reviewer-grid article.pass header > span { background:var(--green); }

.evidence-layout { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:14px; }
.evidence-layout article { padding:24px; border:1px solid rgba(53,233,255,.22); background:rgba(10,9,18,.75); }
.card-label { margin:0 0 16px; color:var(--cyan); font:900 .61rem/1 var(--mono); letter-spacing:.12em; }
.evidence-layout h3 { margin:0 0 13px; font:900 1rem/1.45 var(--mono); text-transform:uppercase; }
.evidence-layout article > p:last-child { color:var(--muted); line-height:1.65; }
.evidence-layout ul { display:grid; gap:10px; padding:0; margin:0; list-style:none; }.evidence-layout li { position:relative; padding-left:19px; color:#cfc8d7; font-size:.84rem; line-height:1.55; }.evidence-layout li::before { content:"□"; position:absolute; left:0; color:var(--yellow); }.evidence-layout.complete li::before { content:"✓"; color:var(--green); }

.explain-section { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; padding-block:110px; border-top:1px solid var(--line); }
.explain-section h2 { margin:0; font-size:clamp(2.2rem,5vw,4.6rem); line-height:.94; }
.explain-section > div:last-child p { margin:0 0 18px; color:var(--muted); line-height:1.75; }.explain-section a { display:inline-block; margin-top:12px; color:var(--cyan); font:800 .75rem/1.4 var(--mono); text-underline-offset:5px; }
footer { display:flex; justify-content:space-between; gap:25px; padding:24px max(20px,calc((100vw - var(--max))/2)); border-top:1px solid rgba(53,233,255,.16); color:#81798d; background:#05040a; font:700 .59rem/1.4 var(--mono); letter-spacing:.06em; }footer p{margin:0}

@media (max-width:850px){
  .lab-hero{grid-template-columns:1fr;min-height:auto;gap:35px}.scenario-tabs{grid-template-columns:1fr 1fr}.console-body{grid-template-columns:1fr}.terminal{border-right:0;border-bottom:1px solid rgba(53,233,255,.18)}.evidence-layout{grid-template-columns:1fr 1fr}.evidence-layout article:first-child{grid-column:1/-1}.explain-section{grid-template-columns:1fr;gap:30px}
}
@media (max-width:620px){
  main{width:min(calc(100% - 28px),var(--max))}.lab-header{grid-template-columns:auto 1fr;padding-inline:14px}.lab-brand{justify-self:end}.lab-brand strong,.lab-header>p{display:none}.lab-hero{padding-block:60px}.lab-hero h1{font-size:clamp(2.8rem,14vw,4.4rem)}.scenario-picker,.run-section,.review-section,.evidence-section{padding-block:65px}.scenario-tabs{grid-template-columns:1fr}.scenario-panel dl{grid-template-columns:1fr}.pipeline{grid-template-columns:1fr}.pipeline li{grid-template-columns:32px 90px 1fr;align-items:center;border-right:0;border-bottom:1px solid rgba(53,233,255,.15)}.pipeline li:not(:last-child)::after{content:"▼";right:17px;top:auto;bottom:-8px}.reviewer-grid,.evidence-layout{grid-template-columns:1fr}.evidence-layout article:first-child{grid-column:auto}.reviewer-grid header{grid-template-columns:42px 1fr}.reviewer-grid header b{grid-column:2}.section-label{grid-template-columns:45px 1fr}.section-label h2{font-size:2rem}footer{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}