:root {
  color-scheme: dark;
  --bg: #05070a; --panel: #0b1117; --ink: #e7edf3; --muted: #7f8d99; --line: #25313a;
  --green: #5dff83; --cyan: #44d7ff; --magenta: #ff4f9a; --yellow: #ffd35a;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pixel: "Press Start 2P", var(--mono);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh; margin: 0; color: var(--ink); font-family: var(--mono);
  background: linear-gradient(rgba(93,255,131,.018) 1px,transparent 1px), linear-gradient(90deg,rgba(93,255,131,.018) 1px,transparent 1px), radial-gradient(circle at 18% 0%,rgba(68,215,255,.08),transparent 26rem), radial-gradient(circle at 90% 30%,rgba(255,79,154,.06),transparent 30rem), var(--bg);
  background-size: 32px 32px,32px 32px,auto,auto,auto;
}
body::after { content:""; position:fixed; inset:0; z-index:100; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 4px); mix-blend-mode:multiply; }
button,input { font:inherit; } a { color:inherit; }
.scan-progress { position:fixed; inset:0 auto auto 0; z-index:120; width:0; height:2px; background:linear-gradient(90deg,var(--green),var(--cyan),var(--magenta)); box-shadow:0 0 14px var(--green); }
.hud { position:sticky; top:0; z-index:80; display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:9px 22px; border-bottom:1px solid var(--line); background:rgba(5,7,10,.88); backdrop-filter:blur(12px); font-size:11px; letter-spacing:.04em; }
.hud-brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; }
.hud-brand b { color:var(--green); }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); animation:pulse 2s ease-in-out infinite; }
.hud-metrics { display:flex; gap:22px; color:var(--muted); }
.hud-metrics i { color:#56636e; font-style:normal; } .hud-metrics b { color:var(--ink); }
.hud-right { display:flex; align-items:center; gap:22px; }
.language-switch { display:inline-flex; align-items:center; gap:3px; color:#56636e; }
.language-switch button { min-width:34px; min-height:30px; padding:4px 7px; border:1px solid transparent; border-radius:4px; color:var(--muted); background:transparent; cursor:pointer; font-size:11px; }
.language-switch button.active { border-color:var(--green); color:var(--bg); background:var(--green); font-weight:800; }
.language-switch button:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.shell { width:min(1050px,calc(100% - 32px)); margin:0 auto; padding:64px 0 72px; }
.hero { padding:18px 0 60px; }
.command { margin:0 0 25px; color:var(--muted); font-size:13px; } .command span { color:var(--green); }
.glitch { position:relative; width:fit-content; margin:0; font-family:var(--pixel); font-size:clamp(31px,7vw,72px); line-height:1.22; letter-spacing:-.035em; text-shadow:0 0 28px rgba(93,255,131,.18); }
.glitch::before,.glitch::after { content:attr(data-text); position:absolute; inset:0; opacity:0; pointer-events:none; }
.glitch::before { color:var(--magenta); clip-path:inset(0 0 55%); animation:glitch-a 4.6s steps(1) infinite; }
.glitch::after { color:var(--cyan); clip-path:inset(58% 0 0); animation:glitch-b 3.8s steps(1) infinite; }
.intro { max-width:720px; margin:27px 0 0; color:var(--muted); font-size:15px; line-height:1.8; }
.hero-readout { display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:30px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.hero-readout b { color:var(--cyan); } .hero-readout .live b { color:var(--green); }
.console { overflow:hidden; border:1px solid var(--line); border-radius:10px; background:rgba(11,17,23,.93); box-shadow:0 22px 60px rgba(0,0,0,.36); }
.window-bar { display:flex; align-items:center; gap:12px; min-height:42px; padding:8px 13px; border-bottom:1px solid var(--line); background:#111820; }
.window-bar h2 { flex:1; min-width:0; overflow:hidden; margin:0; color:var(--muted); font-size:12px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.window-dots { display:inline-flex; gap:6px; }
.window-dots i { width:10px; height:10px; border-radius:50%; background:#ff6159; }
.window-dots i:nth-child(2) { background:#ffbd2e; } .window-dots i:nth-child(3) { background:#28c940; }
.text-button { min-height:30px; border:0; color:var(--green); background:transparent; cursor:pointer; font-size:11px; }
.text-button:hover,.text-button:focus-visible { text-decoration:underline; text-underline-offset:4px; }
.console-body { padding:22px; }
.console-label { margin:0 0 14px; color:var(--cyan); font-size:11px; letter-spacing:.08em; }
.filters { display:flex; flex-wrap:wrap; gap:9px; }
.filter { position:relative; } .filter input { position:absolute; opacity:0; pointer-events:none; }
.filter label { display:inline-flex; align-items:center; min-height:42px; gap:8px; padding:9px 12px; border:1px solid var(--line); border-radius:5px; color:var(--muted); background:#091016; cursor:pointer; font-size:11px; transition:140ms ease; }
.filter label::before { content:"[ ]"; color:#53606b; }
.filter input:checked + label { border-color:color-mix(in srgb,var(--layer) 70%,var(--line)); color:var(--layer); background:color-mix(in srgb,var(--layer) 8%,#091016); }
.filter input:checked + label::before { content:"[x]"; color:var(--layer); }
.filter input:focus-visible + label { outline:2px solid var(--ink); outline-offset:3px; }
.filter-count { color:#64717c; }
.query-line { display:flex; align-items:center; min-height:46px; gap:9px; margin-top:20px; padding:11px 13px; border:1px solid #1c292f; background:#05090c; color:#9eabb5; font-size:12px; }
.query-line .prompt { color:var(--magenta); } .cursor { width:8px; height:15px; background:var(--green); animation:blink 1s steps(1) infinite; }
.timeline-section { padding-top:68px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:34px; }
.eyebrow { margin:0 0 8px; color:var(--green); font-size:11px; letter-spacing:.1em; }
.section-head h2 { margin:0; font-size:clamp(25px,5vw,42px); letter-spacing:-.04em; } .visible-count { margin:0; color:var(--muted); font-size:12px; }
.section-tools { display:flex; flex-direction:column; align-items:end; gap:8px; }
.view-switch { display:inline-flex; align-items:center; gap:3px; color:#56636e; font-size:11px; white-space:nowrap; }
.view-switch button { min-height:30px; padding:4px 8px; border:1px solid transparent; border-radius:4px; color:var(--muted); background:transparent; cursor:pointer; font-size:11px; }
.view-switch button.active { border-color:var(--cyan); color:var(--bg); background:var(--cyan); font-weight:800; }
.view-switch button:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.timeline { position:relative; }
.timeline::before { content:""; position:absolute; top:0; bottom:0; left:151px; width:1px; background:linear-gradient(var(--green),var(--line) 18%,var(--line) 86%,var(--magenta)); box-shadow:0 0 12px rgba(93,255,131,.2); }
.event { --event-color:var(--green); display:grid; grid-template-columns:120px 62px minmax(0,1fr); align-items:start; min-height:190px; padding-bottom:28px; }
.event-date { padding-top:18px; text-align:right; } .event-year { display:block; color:var(--ink); font-family:var(--pixel); font-size:13px; }
.event-age { display:block; margin-top:8px; color:var(--muted); font-size:10px; text-transform:uppercase; }
.event-node { position:relative; z-index:2; width:13px; height:13px; margin:21px auto 0; border:2px solid var(--event-color); border-radius:50%; background:var(--bg); box-shadow:0 0 0 5px var(--bg),0 0 18px color-mix(in srgb,var(--event-color) 60%,transparent); }
.event-card { position:relative; padding:19px 20px 20px; border:1px solid var(--line); border-radius:8px; background:rgba(11,17,23,.9); transition:150ms ease; }
.event-card::before { content:""; position:absolute; left:-7px; top:20px; width:12px; height:12px; border-left:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel); transform:rotate(45deg); }
.event-card:hover { border-color:color-mix(in srgb,var(--event-color) 55%,var(--line)); transform:translateX(3px); }
.event.origin { --event-color:var(--green)!important; min-height:230px; }
.event.origin .event-node { width:21px; height:21px; margin-top:17px; border-width:3px; background:var(--green); box-shadow:0 0 0 7px var(--bg),0 0 28px rgba(93,255,131,.9); }
.event.origin .event-card { border-color:var(--green); background:linear-gradient(135deg,rgba(93,255,131,.09),rgba(11,17,23,.96) 42%); box-shadow:0 0 34px rgba(93,255,131,.08); }
.event.origin .event-card::after { content:attr(data-origin-label); position:absolute; right:18px; bottom:16px; color:var(--green); font-size:9px; font-weight:800; letter-spacing:.1em; opacity:.65; }
.event.origin .event-title::before { content:"> "; color:var(--green); }
.event.placeholder .event-card { border-style:dashed; background:rgba(11,17,23,.72); }
.event.placeholder .event-date { color:var(--yellow); }
.event.placeholder .event-year { color:var(--yellow); font-family:var(--mono); font-size:11px; }
.event.placeholder .event-node { background:var(--bg); box-shadow:0 0 0 5px var(--bg); }
.event-card-head { display:flex; align-items:start; justify-content:space-between; gap:14px; }
.event-categories { display:flex; flex-wrap:wrap; gap:6px; }
.category-tag { padding:4px 7px; border:1px solid color-mix(in srgb,var(--tag-color) 55%,var(--line)); border-radius:3px; color:var(--tag-color); background:color-mix(in srgb,var(--tag-color) 7%,transparent); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.event-precision { color:#58646e; font-size:9px; text-transform:uppercase; white-space:nowrap; }
.event-title { margin:15px 0 0; font-size:clamp(18px,3vw,24px); letter-spacing:-.025em; }
.event-summary { margin:11px 0 0; color:#a7b2bb; font-size:13px; line-height:1.7; }
.event-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin:15px 0 0; color:var(--muted); font-size:10px; }
.event-meta div { display:flex; gap:6px; } .event-meta dt { color:var(--cyan); } .event-meta dd { margin:0; }
.event-meta a { color:var(--green); text-decoration:none; }
.event-meta a:hover { text-decoration:underline; text-underline-offset:3px; }
.event-details { margin:14px 0 0; padding-top:13px; border-top:1px dashed var(--line); color:#74828d; font-size:11px; line-height:1.65; }
.timeline.view-compact .event { min-height:0; padding-bottom:8px; }
.timeline.view-compact .event-card { padding:5px 10px; border:0; background:transparent; }
.timeline.view-compact .event-card::before,.timeline.view-compact .event.origin .event-card::after { display:none; }
.timeline.view-compact .event-card:hover { transform:none; }
.timeline.view-compact .event-card-head,.timeline.view-compact .event-summary,.timeline.view-compact .event-meta,.timeline.view-compact .event-details,.timeline.view-compact .event-age { display:none; }
.timeline.view-compact .event-title { margin:0; font-size:12px; font-weight:600; letter-spacing:0; }
.timeline.view-compact .event-date { padding-top:7px; }
.timeline.view-compact .event-year { font-family:var(--mono); font-size:11px; }
.timeline.view-compact .event-node { width:11px; height:11px; margin-top:9px; }
.timeline.view-compact .event.origin { min-height:0; }
.timeline.view-compact .event.origin .event-node { width:15px; height:15px; margin-top:7px; }
.timeline.view-compact .event.origin .event-card { padding:5px 10px; border:0; background:transparent; box-shadow:none; }
.timeline.view-tracks::before { display:none; }
.tracks-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:rgba(11,17,23,.6); }
.tracks { display:grid; grid-template-columns:max-content repeat(var(--lane-count),minmax(118px,1fr)); min-width:fit-content; }
.tracks-head { padding:12px 10px 12px 9px; border-bottom:1px solid var(--line); background:#0b1117; color:var(--lane-color,var(--muted)); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }
.tracks-time { position:sticky; left:0; z-index:3; border-right:1px solid var(--line); color:var(--muted); text-align:right; padding-right:12px; }
.tracks-date { position:sticky; left:0; z-index:2; display:flex; align-items:center; justify-content:end; min-height:44px; padding:0 12px; border-right:1px solid var(--line); background:#0b1117; color:var(--ink); font-size:10px; white-space:nowrap; }
.tracks-date.placeholder { color:var(--yellow); }
.tracks-cell { display:flex; align-items:center; gap:8px; min-height:44px; padding-left:9px; background:linear-gradient(to right,transparent 14px,color-mix(in srgb,var(--lane-color) 24%,transparent) 14px,color-mix(in srgb,var(--lane-color) 24%,transparent) 15px,transparent 15px); }
.tracks-dot { flex:none; width:11px; height:11px; border:2px solid var(--lane-color); border-radius:50%; background:var(--bg); box-shadow:0 0 10px color-mix(in srgb,var(--lane-color) 55%,transparent); }
.tracks-dot.origin { width:15px; height:15px; background:var(--lane-color); }
.tracks-dot.placeholder { opacity:.75; }
.tracks-label { overflow:hidden; padding-right:10px; color:#9aa6b0; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.loading-state,.empty-state { padding:44px 20px; border:1px dashed var(--line); color:var(--muted); text-align:center; font-size:12px; }
.loading-dots { color:var(--green); } .empty-code { color:var(--magenta); font-family:var(--pixel); font-size:11px; }
.footer { display:flex; justify-content:space-between; gap:18px; margin-top:58px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.footer i { color:var(--green); font-style:normal; } .footer a { color:var(--green); text-decoration:none; } .footer a:hover { text-decoration:underline; text-underline-offset:4px; }
@keyframes blink { 50% { opacity:0; } } @keyframes pulse { 50% { opacity:.45; box-shadow:0 0 5px var(--green); } }
@keyframes glitch-a { 0%,92%,100% { opacity:0;transform:translate(0); } 93% { opacity:.7;transform:translate(-3px,-1px); } 95% { opacity:.6;transform:translate(2px,1px); } }
@keyframes glitch-b { 0%,86%,100% { opacity:0;transform:translate(0); } 87% { opacity:.65;transform:translate(3px,1px); } 89% { opacity:.5;transform:translate(-2px,-1px); } }
@media (max-width:720px) {
  .hud { padding-inline:14px; } .hud-right { gap:10px; } .hud-metrics span:first-child,.hud-metrics span:nth-child(2) { display:none; }
  .language-switch > span { display:none; }
  .shell { width:min(100% - 24px,1050px); padding-top:42px; } .hero { padding-bottom:44px; } .glitch { font-size:clamp(27px,10.5vw,50px); }
  .console-body { padding:16px 13px; } .filter { flex:1 1 calc(50% - 9px); } .filter label { width:100%; }
  .timeline::before { left:18px; } .event { grid-template-columns:38px minmax(0,1fr); min-height:0; padding-bottom:24px; }
  .event-date { grid-column:2; grid-row:1; padding:0 0 10px; text-align:left; } .event-year { display:inline; } .event-age { display:inline; margin-left:9px; }
  .event-node { grid-column:1; grid-row:1 / span 2; margin-top:5px; } .event-card { grid-column:2; grid-row:2; } .event-card::before { top:18px; }
  .event.origin .event-node { margin-top:1px; }
  .event.origin .event-card { padding-bottom:45px; }
  .section-head { flex-direction:column; align-items:start; } .section-tools { flex-direction:row; align-items:center; gap:14px; } .visible-count { padding-top:0; } .footer { flex-direction:column; }
  .tracks { grid-template-columns:max-content repeat(var(--lane-count),minmax(104px,1fr)); }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }