:root {
  --paper: #f3f0e8;
  --paper-2: #fbfaf6;
  --ink: #101318;
  --muted: #617086;
  --line: #9aa7b5;
  --navy: #041426;
  --navy-2: #09233b;
  --blue: #1557ff;
  --cyan: #00cbe8;
  --purple: #a746ff;
  --green: #18d66b;
  --amber: #f5b82e;
  --red: #e95151;
  --shadow: 3px 3px 0 rgba(4,20,38,.15);
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: linear-gradient(180deg,#f7f4ed 0,#ece8df 100%); }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.skip-link { position: absolute; left:-9999px; }
.skip-link:focus { left:1rem; top:1rem; z-index:99; background:#fff; padding:.5rem; }
.system-bar { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.45rem 1rem; background:var(--navy); color:#d7e6f7; font: 700 .72rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; }
.status-dot { display:inline-block; width:.55rem; height:.55rem; background:var(--green); border-radius:50%; box-shadow:0 0 .6rem var(--green); }
.site-header { border-bottom:1px solid #536477; background:rgba(251,250,246,.96); }
.brand-row { min-height:6.2rem; display:flex; align-items:center; gap:1rem; padding:1rem 2vw; }
.wordmark { text-decoration:none; font: 900 clamp(2.3rem,5vw,4.9rem)/.9 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:-.08em; color:#090b0e; }
.wordmark b { color:var(--blue); }
.network-label { font:500 clamp(1rem,2.3vw,2rem)/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:#657289; }
.header-thesis { margin-left:auto; font:700 .72rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.main-nav { display:grid; grid-template-columns:repeat(6,minmax(100px,1fr)) minmax(260px,2fr); border-top:1px solid var(--line); }
.main-nav > a, .search-box { min-height:3.4rem; display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-right:1px solid var(--line); color:var(--ink); text-decoration:none; font:700 .85rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.main-nav > a:hover, .main-nav > a[aria-current="page"] { background:#e8edf3; color:var(--blue); }
.search-box { background:var(--navy-2); color:var(--cyan); }
.search-box input { width:100%; border:1px solid #4e6984; background:#071829; color:white; font:inherit; padding:.55rem .7rem; }
.page-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(320px,1fr); gap:.8rem; padding:.8rem; max-width:1600px; margin:0 auto; }
.panel { background:var(--paper-2); border:1px solid var(--line); box-shadow:var(--shadow); }
.panel-title { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.65rem .8rem; border-bottom:1px solid var(--line); }
.panel-title h2 { margin:0; font:900 .95rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; }
.hero-panel { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); min-height:410px; overflow:hidden; background:linear-gradient(180deg,#92dbff 0,#59bff0 52%,#4c9fc3 53%,#2d789f 100%); }
.hero-copy { padding:clamp(1.4rem,4vw,3.2rem); position:relative; z-index:2; max-width:760px; }
.eyebrow { font:800 .85rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.25em; }
.hero h1 { margin:.6rem 0; font:900 clamp(3.3rem,7vw,7rem)/.8 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:-.08em; }
.hero h1 span { color:var(--blue); }
.hero h1 small { display:block; margin:.75rem 0 0 1.7rem; font-size:.31em; letter-spacing:.08em; color:#244866; }
.strap { font:900 .95rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; }
.hero-copy > p:not(.strap) { max-width:620px; font-weight:650; line-height:1.45; }
.actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem; }
.button { display:inline-block; border:1px solid #2d4050; background:#eef7fb; padding:.72rem 1rem; text-decoration:none; color:var(--ink); font-weight:800; box-shadow:2px 2px 0 rgba(4,20,38,.25); }
.button.primary { background:var(--blue); color:#fff; border-color:#0d3cc2; }
.pixel-scene { position:relative; min-height:100%; overflow:hidden; }
.planet { position:absolute; width:210px; height:210px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#dff7ff 0 7%,#79d5ff 8% 28%,#4e9ee7 29% 52%,#3569b8 53% 70%,#1f407c 71%); right:16%; top:14%; box-shadow:0 0 0 6px rgba(255,255,255,.18); image-rendering:pixelated; }
.cloud { position:absolute; width:100px; height:24px; background:rgba(255,255,255,.8); box-shadow:24px -16px 0 rgba(255,255,255,.8),48px 0 0 rgba(255,255,255,.8); }
.c1 { left:5%; top:17%; }.c2 { right:2%; top:44%; transform:scale(.75); }
.cliff { position:absolute; left:5%; right:-5%; bottom:-1px; height:42%; background:linear-gradient(145deg,#1f4f63 0 20%,#55735c 21% 35%,#b4b075 36% 52%,#4e7d65 53% 70%,#23546c 71%); clip-path:polygon(0 72%,18% 48%,32% 55%,51% 30%,69% 38%,78% 20%,100% 0,100% 100%,0 100%); }
.terminal { position:absolute; right:7%; bottom:10%; border:2px solid var(--navy); background:#e8f6f8; padding:.7rem; font:900 .8rem/1.05 ui-monospace,SFMono-Regular,Menlo,monospace; box-shadow:4px 4px 0 var(--navy); }
.dark { background:var(--navy); color:#eaf6ff; border-color:#36526e; box-shadow:none; }
.dark .panel-title { border-color:#36526e; }
.healthy { color:var(--green); font:800 .75rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.metric-grid { display:grid; grid-template-columns:1fr 1fr; }
.metric-grid > div { min-height:105px; padding:1rem; border-right:1px solid #2e4e69; border-bottom:1px solid #2e4e69; }
.metric-grid span, .metric-grid small { display:block; font:600 .68rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; color:#9cb7cd; }
.metric-grid strong { display:block; margin:.35rem 0; font:900 1.45rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.source-line, .prototype-note { margin:.65rem .8rem; font:600 .64rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; color:#6f7e8e; }
.dark .source-line { color:#7ebcd5; }
.project-list { list-style:none; margin:0; padding:0; }
.project-list li { display:grid; grid-template-columns:2rem 1.1fr 1.2fr auto; align-items:center; gap:.6rem; padding:.62rem .8rem; border-bottom:1px solid #d8dfe6; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.project-list em { color:var(--muted); font-style:normal; font-size:.78rem; }
.project-list i { font-style:normal; font-weight:900; font-size:.72rem; }
.project-list .active { color:#0fae58; }.project-list .watch { color:#c98b00; }
.feature-grid { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.feature { padding:1rem; min-height:180px; }
.feature .icon { font-size:1.8rem; color:var(--blue); }
.feature h2 { font:900 1rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.feature p { line-height:1.45; }
.methodology { grid-column:1 / -1; }
.method-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:.8rem; padding:1rem; text-align:center; }
.method-flow div { border:1px solid var(--line); background:#fff; padding:1rem; font:900 .85rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; }
.method-flow small { color:var(--muted); font-weight:600; }
.site-footer { display:flex; justify-content:space-between; gap:1rem; padding:1rem; border-top:1px solid var(--line); font:700 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.footer-brand b { color:var(--blue); }
@media (max-width: 1050px) {
  .header-thesis { display:none; }
  .main-nav { grid-template-columns:repeat(3,1fr); }
  .search-box { grid-column:1 / -1; }
  .page-grid { grid-template-columns:1fr; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .hero-panel { grid-template-columns:1fr; }
  .pixel-scene { min-height:260px; }
}
@media (max-width: 640px) {
  .brand-row { min-height:auto; align-items:flex-start; flex-wrap:wrap; }
  .wordmark { font-size:2.7rem; }
  .network-label { font-size:1rem; }
  .main-nav { grid-template-columns:1fr 1fr; }
  .hero h1 { font-size:3.8rem; }
  .feature-grid { grid-template-columns:1fr; }
  .project-list li { grid-template-columns:2rem 1fr auto; }
  .project-list em { grid-column:2; }
  .method-flow { grid-template-columns:1fr; }
  .method-flow > span { transform:rotate(90deg); }
  .site-footer { flex-direction:column; }
}