:root { --bg:#090d12; --surface:#101720; --surface-2:#151e29; --line:#273443; --text:#edf3f7; --muted:#9aabba; --dim:#6d7d8d; --cyan:#4cd3c2; --amber:#e8ad55; --red:#ed6f72; --max:1180px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--text); background:var(--bg); font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; } a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; } a:hover { color:var(--cyan); } :focus-visible { outline:3px solid var(--amber); outline-offset:4px; }
.skip { position:absolute; left:1rem; top:-5rem; background:var(--amber); color:#111; padding:.7rem 1rem; z-index:10; font-weight:800; } .skip:focus { top:1rem; }
.wrap { width:min(calc(100% - 2.4rem),var(--max)); margin:auto; } .eyebrow,.kicker { color:var(--cyan); font:600 .72rem/1.2 SFMono-Regular,Consolas,"Liberation Mono",monospace; letter-spacing:.12em; text-transform:uppercase; } .muted { color:var(--muted); }
.site-header { border-bottom:1px solid rgba(255,255,255,.1); background:rgba(9,13,18,.9); position:sticky; top:0; z-index:5; backdrop-filter:blur(13px); } .nav { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .brand { font-weight:800; letter-spacing:-.04em; text-decoration:none; font-size:1.15rem; } .brand::before { content:'//'; color:var(--cyan); margin-right:.35rem; font-family:SFMono-Regular,Consolas,"Liberation Mono",monospace; } .nav-links { display:flex; gap:1rem; align-items:center; font-size:.88rem; } .nav-links a { text-decoration:none; } .nav-cta,.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--cyan); padding:.65rem 1rem; text-decoration:none; font-weight:700; background:var(--cyan); color:#071114; } .button:hover,.nav-cta:hover { background:transparent; color:var(--cyan); }
.hero { padding:clamp(4rem,10vw,8rem) 0 4rem; background:linear-gradient(180deg,#101924 0%,var(--bg) 93%); border-bottom:1px solid var(--line); } .hero-grid { display:grid; gap:3rem; align-items:center; } h1,h2,h3 { line-height:1.08; letter-spacing:-.045em; margin:0; } h1 { font-size:clamp(2.85rem,7vw,6.2rem); max-width:13ch; } h2 { font-size:clamp(2rem,4vw,3.65rem); max-width:19ch; } h3 { font-size:1.25rem; } .lead { font-size:clamp(1.06rem,2.2vw,1.32rem); max-width:58ch; color:#c7d3dc; margin:1.6rem 0 2rem; } .hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; } .button.secondary { background:transparent; color:var(--text); border-color:var(--line); } .button.secondary:hover { border-color:var(--cyan); color:var(--cyan); }
.signal-panel { padding:1.2rem; border:1px solid var(--line); background:#0a1017; box-shadow:12px 12px 0 #05080c; } .panel-top { display:flex; justify-content:space-between; font:500 .7rem SFMono-Regular,Consolas,"Liberation Mono",monospace; color:var(--muted); letter-spacing:.06em; } .metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; margin:1.4rem 0; } .metric { border-top:1px solid var(--line); padding-top:.55rem; font:.75rem 'IBM Plex Mono'; color:var(--muted); } .metric b { display:block; margin-top:.3rem; color:var(--cyan); } .chart { width:100%; height:auto; overflow:visible; } .chart path { fill:none; stroke:var(--red); stroke-width:3; stroke-dasharray:220; animation:draw 2.2s ease both; } .chart path.recovery-fast { stroke:var(--cyan); } .chart path.recovery-slow { stroke:var(--red); } .chart .grid { stroke:var(--line); stroke-width:1; } .chart text { fill:var(--muted); font:9px 'IBM Plex Mono'; } .chart-note { border-top:1px solid var(--line); padding-top:.85rem; color:var(--muted); font-size:.85rem; }
section { padding:clamp(3.8rem,8vw,7rem) 0; border-bottom:1px solid var(--line); } .section-head { display:grid; gap:1rem; margin-bottom:2.3rem; } .section-head p { max-width:58ch; margin:0; color:var(--muted); } .compare { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); } .compare article { background:var(--surface); padding:1.4rem; } .compare ul,.steps ol,.plain-list { padding-left:1.15rem; color:var(--muted); } .compare li,.steps li,.plain-list li { margin:.45rem 0; } .compare .resilience { background:#10241f; } .number { font:600 .72rem 'IBM Plex Mono'; color:var(--cyan); } .steps { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); counter-reset:step; } .step { padding:1.4rem; background:var(--surface); } .step .number::after { content:' / 04'; color:var(--dim); }
.frame { border:1px solid var(--line); background:var(--surface); padding:clamp(1rem,3vw,2rem); } .annotation { border-left:2px solid var(--cyan); padding:.5rem 0 .5rem 1rem; color:#d2e3e1; margin:1.2rem 0 0; } .index-grid { display:grid; gap:1rem; } .score { font:800 clamp(4rem,10vw,7rem)/.8 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; letter-spacing:-.1em; } .score small { font-size:1.1rem; letter-spacing:0; color:var(--muted); } .bars { display:grid; gap:.8rem; } .bar-label { display:flex; justify-content:space-between; color:var(--muted); font:.78rem 'IBM Plex Mono'; margin-bottom:.28rem; } .bar { height:6px; background:#263342; } .bar i { display:block; height:100%; background:var(--cyan); } .bar i.warn { background:var(--amber); } .bar i.score-81 { width:81%; } .bar i.score-62 { width:62%; } .bar i.score-68 { width:68%; } .bar i.score-89 { width:89%; } .bar i.alert { background:var(--red); }
.graph-box { min-height:280px; position:relative; overflow:hidden; background:radial-gradient(circle at 30% 30%,#172d34,transparent 45%),#0a1017; } .network { width:100%; height:300px; } .network line { stroke:#36535e; stroke-width:2; } .network circle { fill:#10242a; stroke:var(--cyan); stroke-width:2; } .network text { fill:#dfeaf1; font:12px 'IBM Plex Mono'; } .network .risk { stroke:var(--amber); fill:#2a2115; } .network .cascade { stroke:var(--red); fill:#301719; } .network .pulse { fill:var(--cyan); opacity:.7; animation:pulse 1.8s infinite; }
.pill { display:inline-block; border:1px solid var(--line); color:var(--muted); border-radius:20px; padding:.32rem .65rem; font:.73rem 'IBM Plex Mono'; margin:.2rem .2rem 0 0; } .callout { border:1px solid var(--cyan); padding:1.25rem; color:#dceeea; } .science { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); } .science article { padding:1.25rem; background:var(--surface); } .science p { color:var(--muted); margin-bottom:0; } .cta { background:#10241f; } .cta h2 { max-width:15ch; } .cta p { color:#c7ded8; max-width:55ch; }
.footer { padding:2.5rem 0; color:var(--muted); font-size:.86rem; } .footer-grid { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; } .footer p { margin:0; }
.article-shell { padding:clamp(3rem,7vw,6rem) 0; } .article-head { max-width:820px; border-bottom:1px solid var(--line); padding-bottom:2rem; margin-bottom:2rem; } .article-head h1 { max-width:16ch; font-size:clamp(2.5rem,5vw,4.8rem); } .article-head p { color:var(--muted); max-width:65ch; } .article { max-width:820px; color:#d6e0e7; } .article h2 { font-size:clamp(1.9rem,3vw,2.8rem); margin:3.2rem 0 1.15rem; max-width:none; } .article h3 { font-size:1.35rem; margin:2.1rem 0 .8rem; } .article h4 { font-size:1.04rem; margin:1.5rem 0 .5rem; } .article p { margin:0 0 1rem; } .article ul,.article ol { padding-left:1.3rem; margin:.5rem 0 1.2rem; } .article li { margin:.3rem 0; } blockquote { margin:1.5rem 0; border-left:3px solid var(--cyan); padding:.4rem 0 .4rem 1rem; color:#e7f1f5; font-size:1.08rem; } hr { border:0; border-top:1px solid var(--line); margin:2rem 0; } .code-block,.equation { overflow:auto; border:1px solid var(--line); background:#070b10; padding:1rem; color:#bdced9; font:.83rem/1.5 'IBM Plex Mono',monospace; white-space:pre; } .equation { color:var(--amber); margin:1rem 0; } .table-wrap { overflow:auto; border:1px solid var(--line); margin:1.2rem 0; } table { border-collapse:collapse; min-width:590px; width:100%; } th,td { padding:.8rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; } th { color:var(--cyan); font:.75rem 'IBM Plex Mono'; }
@keyframes draw { from { stroke-dashoffset:220; } to { stroke-dashoffset:0; } } @keyframes pulse { 50% { opacity:.1; transform:scale(1.7); transform-origin:center; } } @media (min-width:760px) { .hero-grid { grid-template-columns:1.08fr .92fr; } .compare { grid-template-columns:1fr 1fr; } .steps { grid-template-columns:repeat(4,1fr); } .index-grid { grid-template-columns:.7fr 1.3fr; align-items:center; } .science { grid-template-columns:repeat(3,1fr); } } @media (max-width:620px) { .nav-links a:not(.nav-cta) { display:none; } .hero { padding-top:3.2rem; } .metric-grid { gap:.4rem; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }