.viz-root {
    color-scheme: light;
    --surface-1:      #fcfcfb;
    --surface-2:      #f3f2ef;
    --text-primary:   #0b0b0b;
    --text-secondary: #52514e;
    --text-muted:     #83817a;
    --border:         #e3e1da;
    --series-1: #2a78d6; /* recon */
    --series-2: #eb6834; /* initial access */
    --series-3: #1baf7a; /* endpoint compromise */
    --series-4: #eda100; /* ransomware detonation */
    --series-5: #e87ba4; /* lateral impact */
}
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) .viz-root {
        color-scheme: dark;
        --surface-1:      #1a1a19;
        --surface-2:      #232321;
        --text-primary:   #ffffff;
        --text-secondary: #c3c2b7;
        --text-muted:     #8f8d84;
        --border:         #35342f;
        --series-1: #3987e5;
        --series-2: #d95926;
        --series-3: #199e70;
        --series-4: #c98500;
        --series-5: #d55181;
    }
}
:root[data-theme="dark"] .viz-root {
    color-scheme: dark;
    --surface-1:      #1a1a19;
    --surface-2:      #232321;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #8f8d84;
    --border:         #35342f;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
.viz-root { background: var(--surface-1); color: var(--text-primary); min-height: 100vh; padding: 40px 20px 80px; }
.wrap { max-width: 900px; margin: 0 auto; }
header { margin-bottom: 8px; }
h1 { font-size: 22px; margin: 0 0 6px; }
.subtitle { color: var(--text-secondary); font-size: 14px; margin: 0 0 4px; }
.meta { color: var(--text-muted); font-size: 12.5px; margin: 0 0 28px; }
.theme-toggle { position: absolute; top: 20px; right: 20px; font-size: 12px; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; cursor: pointer; }

.viz-nav { max-width: 900px; margin: 0 auto 24px; font-size: 13px; }
.viz-nav a { color: var(--text-secondary); text-decoration: none; }
.viz-nav a:hover { color: var(--text-primary); }
.back-link { display: inline-block; margin-top: 34px; font-size: 13px; color: var(--text-secondary); text-decoration: none; }
.back-link:hover { color: var(--text-primary); }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; font-size: 12.5px; color: var(--text-secondary); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.s-recon-bg    { background: var(--series-1); }
.s-recon-fg    { color: var(--series-1); }
.s-access-bg   { background: var(--series-2); }
.s-access-fg   { color: var(--series-2); }
.s-endpoint-bg { background: var(--series-3); }
.s-endpoint-fg { color: var(--series-3); }
.s-ransom-bg   { background: var(--series-4); }
.s-ransom-fg   { color: var(--series-4); }
.s-lateral-bg  { background: var(--series-5); }
.s-lateral-fg  { color: var(--series-5); }

.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }

.event { position: relative; padding-bottom: 34px; }
.event:last-child { padding-bottom: 0; }
.event-dot { position: absolute; left: -28px; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--surface-1); box-shadow: 0 0 0 1px var(--border); }
.event-time { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.event-phase { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.event-title { font-size: 15.5px; font-weight: 600; margin: 0 0 6px; }
.event-body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 8px; }
.event-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; transition: border-color .15s ease; }
.event-card:hover { border-color: var(--text-muted); }
.iocs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ioc { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: var(--surface-1); border: 1px solid var(--border); color: var(--text-secondary); padding: 3px 7px; border-radius: 5px; }
.spl { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text-muted); margin-top: 8px; padding: 8px 10px; background: var(--surface-1); border-radius: 6px; border: 1px solid var(--border); overflow-x: auto; white-space: pre; }
.deadend { margin-top: 30px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 10px; font-size: 13px; color: var(--text-secondary); }
.deadend h2 { font-size: 13px; margin: 0 0 8px; color: var(--text-primary); }
.deadend li { margin-bottom: 6px; }