@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Orbitron:wght@500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root { --bg:#030712; --surface:rgba(9,18,41,.73); --border:rgba(255,255,255,.1); --cyan:#00f0ff; --violet:#8b5cf6; --green:#37f2a4; --yellow:#f7c85d; --red:#ff6174; --text:#effbff; --muted:#8798b1; --display:"Orbitron",sans-serif; --heading:"Space Grotesk",sans-serif; --body:"Inter",sans-serif; }
* { box-sizing:border-box; } body { min-width:320px; margin:0; color:var(--text); background:var(--bg); font-family:var(--body); } button,a { font:inherit; } button { color:inherit; }
.space { position:fixed; inset:0; z-index:-1; overflow:hidden; background:radial-gradient(circle at 83% 5%,rgba(139,92,246,.22),transparent 24%),radial-gradient(circle at 8% 57%,rgba(0,240,255,.12),transparent 30%),linear-gradient(140deg,#030712,#071025 58%,#030712); }
.space div { width:100%; height:100%; opacity:.17; background-image:linear-gradient(rgba(0,240,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.12) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(black,transparent 82%); }
.glass { border:1px solid var(--border); background:linear-gradient(145deg,rgba(12,26,55,.72),rgba(3,7,18,.58)); box-shadow:0 0 24px rgba(0,240,255,.06),inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter:blur(16px); }
.header { width:min(1240px,calc(100% - 32px)); min-height:65px; margin:16px auto 0; padding:0 19px; display:flex; align-items:center; gap:30px; border-radius:14px; border-color:rgba(0,240,255,.17); }
.brand { color:var(--text); text-decoration:none; font-family:var(--display); font-weight:700; letter-spacing:.05em; }.brand span { color:var(--cyan); text-shadow:0 0 12px var(--cyan); }.header nav { margin-right:auto; display:flex; gap:22px; }.header nav a { color:#a8b6cc; text-decoration:none; font-family:var(--heading); font-size:.79rem; }.header nav a:hover { color:var(--cyan); }.header-actions,.language { display:flex; align-items:center; }.header-actions { gap:16px; }.hosted-badge { padding:7px 9px; color:#c9baff; border:1px solid rgba(139,92,246,.36); border-radius:5px; background:rgba(139,92,246,.08); font-family:var(--display); font-size:.49rem; letter-spacing:.1em; }.language { gap:5px; color:#52617a; font-family:var(--display); font-size:.61rem; }.language button { padding:3px 2px; color:#6b7b93; border:0; background:none; cursor:pointer; }.language button.active { color:var(--cyan); text-shadow:0 0 8px var(--cyan); }
main { width:min(1180px,calc(100% - 32px)); margin:0 auto; }.hero { padding:82px 0 46px; }.eyebrow,.section-head>span { color:var(--cyan); font-family:var(--display); font-size:.57rem; letter-spacing:.16em; }.hero h1 { max-width:760px; margin:12px 0; color:transparent; background:linear-gradient(100deg,#fff,#79f7ff 50%,#b393ff); -webkit-background-clip:text; background-clip:text; font-family:var(--heading); font-size:clamp(2.5rem,6vw,5rem); line-height:.99; letter-spacing:-.05em; }.hero>p { max-width:780px; margin:0; color:var(--muted); line-height:1.7; }.mode-note { max-width:700px; margin-top:25px; padding:14px 16px; display:flex; gap:13px; border-radius:8px; border-color:rgba(55,242,164,.22); }.mode-note strong { color:var(--green); font-family:var(--heading); font-size:.78rem; }.mode-note span { color:var(--muted); font-size:.72rem; }
.workspace { display:grid; grid-template-columns:280px 1fr; align-items:start; gap:14px; }.run-list,.detail-header,.findings,.bob-trace,.safety { border-radius:12px; }.run-list { position:sticky; top:16px; padding:21px; }.section-head h2 { margin:7px 0 0; font-family:var(--heading); font-size:1.2rem; }.replay-list { margin-top:21px; display:grid; gap:8px; }.run-card { width:100%; padding:13px; color:var(--text); text-align:left; border:1px solid rgba(255,255,255,.08); border-left:3px solid var(--accent,var(--cyan)); border-radius:7px; background:rgba(1,6,18,.35); cursor:pointer; }.run-card.active { border-color:var(--accent,var(--cyan)); box-shadow:0 0 17px color-mix(in srgb,var(--accent,var(--cyan)) 18%,transparent); }.run-card strong,.run-card small { display:block; }.run-card strong { font-family:var(--heading); font-size:.75rem; }.run-card small { margin-top:5px; color:#70819b; font-family:var(--display); font-size:.48rem; letter-spacing:.07em; }.run-card[data-risk="low"] { --accent:var(--green); }.run-card[data-risk="medium"] { --accent:var(--yellow); }.run-card[data-risk="high"] { --accent:var(--red); }
.detail { min-width:0; display:grid; gap:14px; }.detail-header { padding:28px; display:flex; align-items:center; justify-content:space-between; gap:25px; }.source-label { color:#cbbdff; font-family:var(--display); font-size:.51rem; letter-spacing:.1em; }.detail-header h2 { margin:8px 0 6px; font-family:var(--heading); font-size:clamp(1.6rem,4vw,2.4rem); }.detail-header p { max-width:700px; margin:0; color:var(--muted); font-size:.8rem; line-height:1.55; }.risk { min-width:110px; text-align:center; }.risk strong { color:var(--risk,var(--cyan)); font-family:var(--display); font-size:2.6rem; }.risk span { color:var(--muted); font-size:.65rem; }.risk small { display:block; margin-top:6px; color:var(--risk,var(--cyan)); font-family:var(--display); font-size:.51rem; letter-spacing:.12em; text-transform:uppercase; }
.findings,.bob-trace { padding:27px; }.finding-list,.recommendation-list { margin-top:22px; display:grid; gap:10px; }.finding { padding:17px; border:1px solid rgba(255,97,116,.2); border-left:3px solid var(--risk,var(--cyan)); border-radius:7px; background:rgba(2,7,19,.35); }.finding strong { display:block; color:#c9f9ff; font-family:var(--heading); font-size:.94rem; }.finding p { margin:7px 0 0; color:var(--muted); font-size:.76rem; line-height:1.55; }.difference { margin-top:12px; padding:9px; overflow:auto; color:#b9c9dd; border:1px solid rgba(255,255,255,.07); border-radius:5px; background:rgba(0,0,0,.22); font-family:Consolas,monospace; font-size:.62rem; }.divider { margin:30px 0 0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; }.divider span { height:1px; background:linear-gradient(90deg,transparent,rgba(0,240,255,.25)); }.divider span:last-child { background:linear-gradient(90deg,rgba(0,240,255,.25),transparent); }.divider strong { color:#a9f8ff; font-family:var(--display); font-size:.57rem; letter-spacing:.11em; text-transform:uppercase; }.recommendation-list { grid-template-columns:repeat(3,1fr); }.recommendation { padding:15px; border:1px solid rgba(0,240,255,.12); border-radius:7px; background:rgba(0,240,255,.025); }.recommendation b { display:block; font-family:var(--heading); font-size:.79rem; }.recommendation p { margin:8px 0 0; color:var(--muted); font-size:.7rem; line-height:1.55; }.recommendation small { display:block; margin-top:10px; color:#7791af; font-family:var(--display); font-size:.45rem; letter-spacing:.08em; }
.disclosure { margin:14px 0 0; color:var(--muted); font-size:.76rem; line-height:1.55; }.phases { margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.phase { padding:12px; border:1px solid rgba(139,92,246,.23); border-radius:6px; background:rgba(139,92,246,.045); }.phase strong,.phase small { display:block; }.phase strong { color:#d8ceff; font-family:var(--display); font-size:.56rem; letter-spacing:.09em; }.phase small { margin-top:5px; color:#7486a1; font-size:.66rem; }.events { min-height:66px; max-height:250px; margin-top:10px; padding:13px; overflow:auto; color:#bdccde; border:1px solid rgba(139,92,246,.17); border-radius:7px; background:rgba(0,0,0,.27); font-family:Consolas,monospace; font-size:.65rem; line-height:1.6; }.event { display:grid; grid-template-columns:54px 1fr; gap:8px; padding:2px 0; }.event span { color:#ad94ff; text-transform:uppercase; }.empty { color:#71819a; font-family:var(--body); }.safety { padding:17px 20px; display:flex; align-items:center; gap:14px; border-color:rgba(55,242,164,.18); }.safety-mark { color:var(--green); font-size:1.4rem; }.safety p { flex:1; margin:0; color:var(--muted); font-size:.73rem; line-height:1.5; }.safety a { padding:9px 12px; color:var(--cyan); border:1px solid rgba(0,240,255,.3); border-radius:5px; text-decoration:none; font-family:var(--heading); font-size:.68rem; } footer { width:min(1180px,calc(100% - 32px)); margin:72px auto 0; padding:24px 0 35px; color:#53637e; border-top:1px solid rgba(255,255,255,.07); font-family:var(--display); font-size:.48rem; letter-spacing:.1em; }
@media (max-width:900px) { .workspace { grid-template-columns:1fr; }.run-list { position:static; }.replay-list { grid-template-columns:repeat(3,1fr); }.recommendation-list { grid-template-columns:1fr 1fr; } }
@media (max-width:650px) { .header { flex-wrap:wrap; padding:13px 16px; }.header nav { order:3; width:100%; }.hosted-badge { display:none; }.hero { padding-top:55px; }.mode-note,.detail-header,.safety { align-items:flex-start; flex-direction:column; }.replay-list,.recommendation-list,.phases { grid-template-columns:1fr; }.risk { text-align:left; } }