/* SysSimulator shared design system — imported by all static pages */
:root {
  --bg:        #0f0f23;
  --bg2:       #1a1a2e;
  --bghov:     #2a2a4a;
  --border:    #1e1e3a;
  --border-hi: #2a2a5a;
  --primary:   #6366f1;
  --priml:     #818cf8;
  --accent:    #8b5cf6;
  --accentl:   #a78bfa;
  --violet:    #8b5cf6;
  --text:      #e2e8f0;
  --text2:     #94a3b8;
  --muted:     #64748b;
  --rose:      #f43f5e;
  --amber:     #f59e0b;
  --green:     #22c55e;
  --cyan:      #06b6d2;
  --emerald:   #10b981;
  --eout:      cubic-bezier(.23,1,.32,1);
  --mono:      'Space Mono', monospace;
  --sans:      'Inter', -apple-system, sans-serif;
  --display:   'Fraunces', Georgia, serif;
  --grid-line: rgba(99,102,241,.12);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }

body {
  background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

body::before {
  content:''; position:fixed; inset:0;
  background-image:radial-gradient(circle,rgba(99,102,241,.12) 1px,transparent 1px);
  background-size:28px 28px; pointer-events:none; z-index:0;
}

body::after {
  content:''; position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:800px; height:600px; border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(99,102,241,.08) 0%,rgba(139,92,246,.04) 40%,transparent 70%);
  filter:blur(40px); pointer-events:none; z-index:0;
}

/* ── SCROLL PROGRESS ── */
.scroll-progress {
  position:fixed; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  transform-origin:0% 50%; transform:scaleX(0); z-index:101; will-change:transform;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:0 2rem; height:56px; display:flex; align-items:center; justify-content:space-between;
  background:rgba(15,15,35,.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border); transition:background 200ms ease;
}
nav.nav-scrolled { background:rgba(15,15,35,.96) }

.nav-logo {
  font-family:'Space Mono',monospace; font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--priml); text-decoration:none; display:flex; align-items:center; gap:.6rem;
}

.logo-svg { width:22px; height:22px; flex-shrink:0 }
.logo-svg .node { fill:var(--primary); opacity:0; animation:nodeIn .4s var(--eout) forwards }
.logo-svg .node:nth-child(1){animation-delay:.1s}
.logo-svg .node:nth-child(2){animation-delay:.2s}
.logo-svg .node:nth-child(3){animation-delay:.3s}
.logo-svg .node:nth-child(4){animation-delay:.15s}
.logo-svg .node:nth-child(5){animation-delay:.25s}
.logo-svg .wire {
  stroke:url(#logo-grad); stroke-width:1.5; fill:none;
  stroke-dasharray:30; stroke-dashoffset:30;
  animation:wireIn .6s var(--eout) .35s forwards;
}
.logo-svg .wire:nth-child(6){animation-delay:.4s}
.logo-svg .wire:nth-child(7){animation-delay:.5s}
.logo-svg .wire:nth-child(8){animation-delay:.45s}
.logo-svg .wire:nth-child(9){animation-delay:.55s}
.logo-svg .pulse { fill:var(--accentl); opacity:0; animation:logoPulse 2.5s ease-in-out 1s infinite }

@keyframes nodeIn { to { opacity:1 } }
@keyframes wireIn { to { stroke-dashoffset:0 } }
@keyframes logoPulse { 0%,100%{opacity:0;r:1.5}50%{opacity:.8;r:2.5} }

.nav-links { display:flex; gap:24px; list-style:none; margin-left:auto; align-items:center }
.nav-links a {
  color:var(--text2); text-decoration:none;
  font-family:'Space Mono',monospace; font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; transition:color 160ms ease;
}
.nav-links a:hover { color:var(--text) }

.nav-cta {
  font-family:'Space Mono',monospace; font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#fff !important;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  padding:.45rem 1.2rem; text-decoration:none; border-radius:2px;
  transition:transform 160ms var(--eout),box-shadow 160ms ease;
}
@media(hover:hover)and(pointer:fine){
  .nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,.25)}
}
.nav-cta:active{transform:scale(.97)}

/* ── PAGE LAYOUT ── */
.page { position:relative; z-index:1; max-width:720px; margin:0 auto; padding:7rem 2rem 5rem }

.breadcrumb {
  font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:2rem;
}
.breadcrumb a { color:rgba(99,102,241,.65); text-decoration:none; transition:color 150ms ease }
.breadcrumb a:hover { color:var(--text) }

/* ── TYPOGRAPHY ── */
h1 {
  font-family:'Fraunces',Georgia,serif; font-optical-sizing:auto;
  font-size:clamp(1.75rem,4vw,2.5rem); font-weight:700; line-height:1.15; margin-bottom:1rem;
}
h1 em {
  font-style:italic;
  background:linear-gradient(135deg,var(--primary),var(--accentl));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
h2 {
  font-family:'Fraunces',Georgia,serif; font-optical-sizing:auto;
  font-size:1.35rem; margin:2rem 0 .75rem;
}
h2 em {
  font-style:italic;
  background:linear-gradient(135deg,var(--primary),var(--accentl));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
h3 {
  font-family:'Space Mono',monospace; font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--priml); margin-bottom:.5rem;
}

p,li { font-size:.95rem; line-height:1.75; color:var(--text2); margin-bottom:1rem }
ul,ol { padding-left:1.25rem; margin-bottom:1.5rem }
strong { color:var(--text) }
a { color:var(--priml) }

.page .accent,  .doc-body .accent  { color:var(--priml); font-weight:inherit }
.page .cyan,    .doc-body .cyan    { color:rgba(6,182,212,.92); font-weight:inherit }
.page .violet,  .doc-body .violet  { color:rgba(139,92,246,.92); font-weight:inherit }
.page .amber,   .doc-body .amber   { color:rgba(245,158,11,.9); font-weight:inherit }
.page .emerald, .doc-body .emerald { color:rgba(16,185,129,.9); font-weight:inherit }

/* ── TABLE CHECK / CROSS / PARTIAL ── */
.check   { color:#34d399; font-weight:700 }
.cross   { color:#f87171; font-weight:700 }
.partial { color:var(--accentl); font-weight:600 }

/* ── CTA BUTTONS ── */
.cta,.cta-inline {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Space Mono',monospace; font-size:.73rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:linear-gradient(135deg,var(--primary),var(--accent));
  padding:.85rem 1.6rem; text-decoration:none; border-radius:2px; margin-top:.5rem;
  transition:transform 160ms var(--eout),box-shadow 160ms ease;
}
@media(hover:hover)and(pointer:fine){
  .cta:hover,.cta-inline:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,.25)}
}
.cta:active,.cta-inline:active { transform:scale(.97) }

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s var(--eout),transform .6s var(--eout) }
.reveal.vis { opacity:1; transform:translateY(0) }

/* ── DIVIDERS ── */
.divider { border:none; border-top:1px solid var(--border); margin:3rem 0 }
hr { border:0; border-top:1px solid var(--border); margin:1.6rem 0 }

/* ── FOOTER ── */
footer {
  position:relative; z-index:1; border-top:1px solid var(--border);
  padding:1.75rem 2rem; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.foot-l {
  font-family:'Space Mono',monospace; font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text2);
}
.foot-links { display:flex; flex-wrap:wrap; gap:1.25rem }
.foot-link {
  font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text2); text-decoration:none;
  text-decoration-color:transparent; transition:color 150ms ease,text-decoration-color 150ms ease;
  text-underline-offset:4px;
}
@media(hover:hover)and(pointer:fine){
  .foot-link:hover{color:var(--text);text-decoration:underline;text-decoration-color:rgba(226,232,240,.4)}
}

/* ── DOC TWO-COLUMN LAYOUT ── */
.doc-layout {
  position:relative; z-index:1;
  max-width:1160px; margin:0 auto; padding:0 2rem;
  display:grid; grid-template-columns:1fr 280px; gap:0; align-items:start;
}
.doc-body {
  border-right:1px solid var(--border);
  padding:7rem 4rem 5rem 0; min-width:0;
}
.doc-sidebar {
  padding:1.5rem 0 5rem 2.5rem;
  position:sticky; top:76px; align-self:start;
}

/* ── SIDEBAR & STICKY TOC ── */
.side-block { margin-bottom:36px }
.side-title {
  font-family:'Space Mono',monospace; font-size:.63rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
  margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border);
}
.toc-sticky { /* sticky is now on .doc-sidebar; this is just a container */ }
.toc-list { list-style:none; margin:0; padding:0 }
.toc-list li { border-bottom:1px solid var(--border) }
.toc-list a {
  display:flex; align-items:center; gap:6px;
  padding:7px 8px 7px 10px; margin-left:-10px;
  color:var(--text2); text-decoration:none; font-size:.63rem;
  border-left:2px solid transparent; border-radius:0 3px 3px 0;
  transition:color 150ms ease,background 150ms ease,border-color 150ms ease;
}
.toc-list a:hover { color:var(--text); background:rgba(99,102,241,.07) }
.toc-list a.active {
  color:var(--priml); border-left-color:var(--priml);
  background:rgba(99,102,241,.18); font-weight:600;
}
.toc-num { font-family:'Space Mono',monospace; font-size:.58rem; color:var(--muted); font-weight:700; flex-shrink:0 }
.toc-list a.active .toc-num { color:var(--priml) }

/* ── NUMBERED SECTION LABELS ── */
.section { margin-bottom:64px }
.section-num {
  font-family:'Space Mono',monospace; font-size:.63rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(99,102,241,.7);
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.section-num::after { content:''; flex:1; height:1px; background:var(--border) }

/* ── CALLOUT ── */
.callout {
  border-left:3px solid var(--primary); background:rgba(99,102,241,.08);
  padding:16px 20px; border-radius:0 3px 3px 0; margin:24px 0;
}
.callout p { margin:0; font-size:.875rem; color:var(--text2) }
.callout-label {
  font-size:.63rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--priml); margin-bottom:6px;
}

@media(max-width:860px){
  .doc-layout { grid-template-columns:1fr; padding:0 1.5rem }
  .doc-body { border-right:none; padding-right:0; padding-bottom:0 }
  .doc-sidebar { display:none }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}