:root { --void:#101a35; --surface:#17244a; --ink:#eefaff; --muted:#a9c8de; --line:#3567b5; --ice:#a8e1ff; --cyan:#60afea; --blue:#3978df; --pink:#e894bc; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-width:320px; margin:0; color:var(--ink); background-color:var(--void); background-image:linear-gradient(rgba(168,225,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(168,225,255,.045) 1px,transparent 1px); background-size:28px 28px; font-family:ui-monospace,"Cascadia Mono","DejaVu Sans Mono",Consolas,monospace; font-size:15px; line-height:1.7; } ::selection { color:var(--void); background:var(--ice); } a { color:inherit; text-decoration-color:var(--cyan); text-underline-offset:3px; } a:hover { color:var(--ice); } .skip-link { position:absolute; left:-999px; } .skip-link:focus { z-index:5; top:1rem; left:1rem; padding:.5rem .7rem; color:var(--void); background:var(--ice); }
.masthead,footer { display:flex; justify-content:space-between; gap:1rem; max-width:1120px; margin:0 auto; padding:1rem 2rem; color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .masthead { border-bottom:1px solid var(--line); } .masthead-center { color:var(--ice); } main { width:min(100% - 4rem,880px); margin:0 auto; } .intro { padding:clamp(4.5rem,11vw,8rem) 0 4rem; } .eyebrow,.nav-label { margin:0; color:var(--cyan); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; } .intro-grid { display:grid; grid-template-columns:1fr 145px; gap:3.5rem; align-items:end; } h1 { margin:.2rem 0 1.3rem; font-size:clamp(3rem,10vw,6rem); font-weight:500; line-height:.92; letter-spacing:-.1em; } .cursor { color:var(--ice); animation:blink 1s steps(2,start) infinite; } @keyframes blink { 50% { opacity:0; } } .lead { max-width:610px; margin:0; color:#d7eaf6; font-size:clamp(1rem,2.1vw,1.18rem); } .status { margin:2rem 0 0; color:var(--muted); font-size:.83rem; } .status-dot { display:inline-block; width:.55rem; height:.55rem; margin-right:.45rem; border-radius:50%; background:var(--ice); box-shadow:0 0 12px var(--ice); }
.wings { position:relative; margin:0; padding:7px; background:var(--line); transform:rotate(-3deg); } .wings::before { position:absolute; z-index:-1; inset:-3px; border:1px solid var(--ice); content:""; transform:translate(6px,6px); } .wings img { display:block; width:100%; height:auto; background:var(--blue); } .wings figcaption { position:absolute; right:0; bottom:-1.8rem; margin:0; color:var(--muted); font-size:.58rem; white-space:nowrap; }
nav { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem 1.05rem; padding:.85rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:.76rem; } nav a { text-decoration:none; } .nav-label { margin-right:.4rem; } article { padding:3.8rem 0 4.5rem; } section { margin-bottom:4rem; scroll-margin-top:1rem; } h2 { margin:0 0 1rem; color:var(--ice); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } p { max-width:700px; margin:0 0 1rem; }
.terminal { max-width:700px; padding:1.2rem 1.35rem; border:1px solid var(--line); border-left:3px solid var(--ice); background:rgba(23,36,74,.84); box-shadow:8px 8px 0 rgba(0,0,0,.18); } .terminal p { margin:0; } .prompt,.command { color:var(--ice); font-weight:700; } .terminal-output { padding-top:.55rem; color:#d7eaf6; } .note { display:flex; gap:.9rem; margin:1.5rem 0 0; color:var(--muted); font-size:.9rem; } .note span { color:var(--pink); font-weight:700; }
.facts { display:grid; grid-template-columns:1fr 1fr; max-width:700px; border-top:1px solid var(--line); } .facts div { display:grid; grid-template-columns:8rem 1fr; gap:.8rem; padding:.85rem 0; border-bottom:1px solid var(--line); } .facts div:nth-child(odd) { padding-right:1.25rem; } .facts div:nth-child(even) { padding-left:1.25rem; border-left:1px solid var(--line); } .fact-key { color:var(--cyan); font-size:.78rem; } .section-lead { margin-top:1rem; color:var(--muted); } .link-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); } .link-grid a { display:grid; grid-template-columns:2.2rem 1fr auto; column-gap:.65rem; align-items:baseline; min-height:5.4rem; padding:1rem 1.25rem 1rem 0; border-bottom:1px solid var(--line); text-decoration:none; } .link-grid a:nth-child(even) { padding-right:0; padding-left:1.25rem; border-left:1px solid var(--line); } .link-grid span { grid-row:span 2; color:var(--muted); font-size:.75rem; } .link-grid b { color:var(--ink); font-size:.95rem; } .link-grid small { grid-column:2; color:var(--muted); font-size:.75rem; } .link-grid i { grid-column:3; grid-row:span 2; color:var(--cyan); font-style:normal; } .link-grid a:hover b,.link-grid a:hover i { color:var(--ice); }
.contact-grid { display:grid; max-width:700px; border-top:1px solid var(--line); } .contact-grid a { display:grid; grid-template-columns:8rem 1fr; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line); text-decoration:none; } .contact-grid span { color:var(--cyan); font-size:.78rem; } .contact-grid a:hover { color:var(--ice); } .warning { margin-top:1.4rem; padding:.9rem 1rem; color:var(--muted); border-left:3px solid var(--pink); background:rgba(232,148,188,.08); font-size:.88rem; } code { color:var(--ice); font:inherit; } footer { border-top:1px solid var(--line); } footer a { color:var(--cyan); }
@media (max-width:650px) { body { font-size:14px; } .masthead,footer { padding-right:1.25rem; padding-left:1.25rem; } .masthead-center { display:none; } main { width:min(100% - 2.5rem,880px); } .intro { padding-top:4.5rem; } .intro-grid { grid-template-columns:1fr; gap:2.5rem; } .wings { width:120px; justify-self:end; } .facts,.link-grid { grid-template-columns:1fr; } .facts div,.facts div:nth-child(odd),.facts div:nth-child(even) { padding-right:0; padding-left:0; border-left:0; } .link-grid a:nth-child(even) { padding-left:0; border-left:0; } .contact-grid a { grid-template-columns:6.5rem 1fr; } footer { font-size:.65rem; } }