* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #0a0a0a;
    color: #e0e0e0;
    line-height: 1.6;
}

header {
    padding: 60px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: #080808;
}

.header-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 58% 62% at 50% 46%,
        #080808 0%,
        #080808 40%,
        rgba(8,8,8,0.5) 68%,
        rgba(8,8,8,0) 100%);
}

.terminal-header, .social-links {
    position: relative;
    z-index: 2;
}

header h1 {
    font-size: 3rem;
    color: #ffffff;
    font-family: monospace;
    letter-spacing: 3px;
    text-transform: uppercase;
}

header p {
    color: #888;
    margin-top: 8px;
    font-size: 1.1rem;
}

nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    background-color: #111;
    flex-wrap: wrap;
}

nav a {
    color: #a855f7;
    text-decoration: none;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

nav a:hover {
    color: #ffffff;
}

section {
    max-width: 800px;
    margin: 60px auto;
    padding: 0 20px;
}

section h2 {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 20px;
    border-bottom: 1px solid #222;
    padding-bottom: 10px;
}

section h3 {
    color: #ffffff;
    font-size: 1.1rem;
    margin-top: 30px;
    margin-bottom: 10px;
}

section p {
    color: #aaa;
    margin-bottom: 15px;
}

footer {
    text-align: center;
    padding: 40px 20px;
    color: #444;
    font-size: 0.85rem;
    border-top: 1px solid #222;
}

ul li {
  list-style: none;
  position: relative;        /* anchor for the marker */
  padding-left: 20px;        /* where all text aligns, wrapped lines included */
  color: #aaa;
}
ul li::before {
  content: ">";
  position: absolute;        /* was: margin-right: 8px */
  left: 0;
  color: #a855f7;
}
ul ul {
  padding-left: 24px;
  margin-top: 8px;
}
ul ul li::before {
  content: "-";
  color: #555;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #444;
    color: #e0e0e0;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.social-links a:hover {
    border-color: #a855f7;
    color: #a855f7;
}

.terminal-header {
    margin-bottom: 25px;
}

.prompt {
    color: #a855f7;
    font-family: monospace;
    font-size: 0.95rem;
    margin-bottom: 10px;
    min-height: 1.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tagline {
    color: #888;
    font-size: 1rem;
    margin-top: 8px;
    font-family: monospace;
    text-align: center;
    letter-spacing: 1px;
}

.cursor {
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

section a {
    color: #a855f7;
    text-decoration: none;
}

section a:hover {
    text-decoration: underline;
}

.skill-source {
    color: #555;
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    header h1 {
        font-size: 1.6rem;
    }

    nav {
        gap: 10px;
        padding: 12px 8px;
    }

    nav a {
        font-size: 0.7rem;
        letter-spacing: 0.5px;
    }
}

#circuit-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}

#docs-list {
    max-width: 800px;
    margin: 60px auto;
    padding: 0 20px;
}

.doc-card {
    display: block;
    border: 1px solid #222;
    border-left: 2px solid #a855f7;
    padding: 20px;
    margin: 24px 0;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.doc-card:hover {
    background: #111;
    border-color: #a855f7;
}

.doc-card h3 { color: #fff; margin-bottom: 6px; }
.doc-meta { color: #a855f7; font-family: monospace; font-size: 0.8rem; margin-bottom: 10px; }
.doc-summary { color: #aaa; margin: 0; }

article {
    max-width: 760px;
    margin: 50px auto;
    padding: 0 20px;
    line-height: 1.8;
}

article h2 {
    color: #fff;
    font-size: 1.4rem;
    margin: 40px 0 14px;
    border-bottom: 1px solid #222;
    padding-bottom: 8px;
}

article p { color: #ccc; margin-bottom: 16px; }

pre {
    background: #111;
    border: 1px solid #222;
    border-radius: 6px;
    padding: 16px;
    overflow-x: auto;
    margin: 20px 0;
}

pre code { color: #c3c3cc; }              /* base text */
.tok-cmt  { color: #6a6a76; font-style: italic; }  /* # comments */
.tok-var  { color: #a855f7; }             /* $variables — your accent */
.tok-fn   { color: #6fb3d6; }             /* cmdlets */
.tok-str  { color: #8fce9b; }             /* "strings" */
.tok-type { color: #e0bd7a; }             /* [System...] type accelerators */
.tok-param{ color: #9a9aa6; }             /* -Path, -Identity */
.tok-cmd  { color: #6fb3d6; }                      /* net (the command) */
.tok-punc { color: #8a8a94; }                      /* \ line continuations */
.tok-tag  { color: #6fb3d6; }   /* <rule>, <field>, <description> */
.tok-attr { color: #e0bd7a; }   /* id=, level=, name= */
.tok-op { color: #c99d5a; }   /* redirects: > < << and the EOF marker */
.tok-num { color: #d19a66; }


p code,
li code {
  background: #1a1a1a;
  color: #a855f7;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9rem;
}

figure { margin: 24px 0; }

figure img {
    max-width: 100%;
    border: 1px solid #222;
    border-radius: 6px;
    display: block;
}

figcaption {
    color: #777;
    font-size: 0.85rem;
    margin-top: 8px;
    text-align: center;
}

.back-link {
    display: inline-block;
    color: #a855f7;
    text-decoration: none;
    font-family: monospace;
    font-size: 0.9rem;
    margin: 20px 0;
}

.back-link:hover { text-decoration: underline; }

.img-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 24px 0;
}

.img-row figure {
    margin: 0;
}

.img-row img {
    width: 100%;
    height: 240px;
    object-fit: contain;
    display: block;
}

@media (max-width: 600px) {
    .img-row {
        grid-template-columns: 1fr;
    }
}

ol {
  list-style: none;
  counter-reset: item;
  padding-left: 0;
}
ol li {
  list-style: none;
  position: relative;        /* anchor for the number */
  padding-left: 28px;        /* gutter width = where all text aligns */
  color: #aaa;
  counter-increment: item;
}
ol li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  width: 20px;               /* number sits in the gutter... */
  text-align: right;         /* ...right-aligned so 1. and 10. line up */
  color: #a855f7;
  font-variant-numeric: tabular-nums;
}
ol ol {
  padding-left: 24px;
  margin-top: 8px;
  counter-reset: item;                   /* restart numbering per nested list */
}
ol ol li::before {
  content: counter(item, lower-alpha) ".";   /* a. b. c. for sub-items */
  color: #555;
}

.disclaimer {
    background: #1a1410;
    border-left: 3px solid #c4843c;
    color: #c9a87a;
    padding: 14px 18px;
    margin: 24px 0;
    font-size: 0.9rem;
    border-radius: 4px;
}

.disclaimer strong { color: #e0b780; }

.read-more {
    display: inline-block;
    color: #a855f7;
    text-decoration: none;
    font-family: monospace;
    font-size: 0.9rem;
    margin-top: 4px;
}

.read-more:hover { text-decoration: underline; }

/* Attacks table -------------------------------------------------- */
.table-scroll {
  --at-surface:       #16161b;
  --at-text:          #e7e7ec;
  --at-text-dim:      #9a9aa6;
  --at-border:        rgba(255,255,255,0.08);
  --at-border-strong: rgba(255,255,255,0.18);
  --at-accent:        #e5484d;   /* E-Corp red, used sparingly */
  --at-link:          #6fb3d6;
  --at-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--at-border);
  border-radius: 10px;
}

.attacks-table {
  width: 100%;
  min-width: 720px;              /* forces scroll instead of squish on mobile */
  border-collapse: collapse;
  font-size: 0.94rem;
}
.attacks-table.compact { min-width: 420px; }
.attacks-table thead th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--at-text-dim);
  padding: 14px 18px;
  border-bottom: 1px solid var(--at-border-strong);
  white-space: nowrap;
  background: rgba(255,255,255,0.02);
}
.attacks-table tbody td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--at-border);
  vertical-align: top;
}
.attacks-table tbody tr:last-child td { border-bottom: 0; }
.attacks-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.015); }
.attacks-table tbody tr:hover { background: var(--at-surface); }

.attacks-table .col-num {
  font-family: var(--at-mono);
  color: var(--at-accent);
  text-align: right;
  width: 1%;
  white-space: nowrap;
  padding-right: 22px;
}
.attacks-table .col-attack { font-weight: 600; white-space: nowrap; }
.attacks-table .mono { font-family: var(--at-mono); font-size: 0.86rem; }
.attacks-table .col-mitre a {
  color: var(--at-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.attacks-table .col-mitre a:hover { border-bottom-color: var(--at-link); }
.attacks-table .col-telemetry {
  color: var(--at-text-dim);
  font-family: var(--at-mono);
  font-size: 0.84rem;
  min-width: 220px;
}
.attacks-table .col-telemetry code { color: var(--at-text); }

.attacks-table .badge {
  display: inline-block;
  font-family: var(--at-mono);
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--at-border-strong);
  color: var(--at-text-dim);
  white-space: nowrap;
}
.attacks-table .badge.single      { border-color: rgba(111,179,214,.4); color: #9fcbe4; }
.attacks-table .badge.correlation { border-color: rgba(214,163,67,.45); color: #e0bd7a; }
.attacks-table .badge.twostage { border-color: rgba(167,139,250,.45); color: #b9a7f5; }

@media (prefers-reduced-motion: no-preference) {
  .attacks-table tbody tr { transition: background .12s ease; }
}

.filetree {
  background: #111114;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 18px 20px;
  overflow-x: auto;
  line-height: 1.7;
}
.filetree code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.9rem;
  color: #c3c3cc;                              /* base = files */
  background: none; padding: 0;                /* cancel any inline-code chip */
}
.filetree .root { color: #a855f7; font-weight: 700; }   /* repo / site root */
.filetree .dir  { color: #a855f7; font-weight: 600; }   /* folders */
.filetree .tree { color: #4b4b55; }                     /* the ├── │ └── lines */
.filetree .cmt  { color: #6a6a76; }                     /* (annotations) */