@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=JetBrains+Mono:wght@400&display=swap');
:root{ --ink:#0A0A0B; --carbon:#17191D; --graphite:#4A4D52; --steel:#9CA0A8; --mist:#ECEDEF; --white:#FFFFFF; --coral:#FF4B26; --coral-deep:#C2330F; --pad:clamp(1.25rem, 3vw, 3rem); --maxw:960px; --radius:14px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body{ margin:0; background:var(--ink); color:var(--mist); font-family:'Inter','-apple-system',Arial,sans-serif; font-size:15px; line-height:1.6; }
header{ position:sticky; top:0; z-index:50; background:rgba(10,10,11,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--carbon); display:flex; align-items:center; gap:1rem; padding:.75rem var(--pad); }
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--white); }
.brand svg,.brand img{ height:28px; width:auto; }
nav{ display:flex; gap:.35rem; overflow-x:auto; margin-left:auto; scrollbar-width:none; }
nav::-webkit-scrollbar{ display:none; }
nav a{ flex:0 0 auto; padding:.45rem .7rem; border-radius:999px; font-size:12px; color:var(--steel); text-decoration:none; white-space:nowrap; font-family:'JetBrains Mono',monospace; text-transform:uppercase; }
nav a:hover, nav a.active{ background:var(--carbon); color:var(--white); }
main{ max-width:var(--maxw); margin:0 auto; padding:var(--pad); }
.hero{ padding:var(--pad) 0 2rem; border-bottom:1px solid var(--carbon); margin-bottom:2rem; }
.kicker{ color:var(--coral); font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.hero h1{ font-family:'Eurostile','Michroma',sans-serif; font-weight:200; font-size:clamp(36px,5vw,64px); line-height:1.05; color:var(--white); margin:.5rem 0 0; }
.card{ background:var(--carbon); border-radius:var(--radius); padding:1.5rem 2rem; margin:1.5rem 0; border:1px solid rgba(156,160,168,0.08); }
.card h1,.card h2{ font-family:'Eurostile','Michroma',sans-serif; font-weight:200; color:var(--white); margin-top:0; border-bottom:1px solid rgba(156,160,168,0.12); padding-bottom:.6rem; }
.card h2{ font-size:24px; }
.card h1{ font-size:28px; }
.card h3{ font-family:'Inter',sans-serif; font-weight:500; font-size:16px; color:var(--white); margin-top:1.5rem; }
.card h4{ color:var(--steel); font-weight:500; }
.card p,.card li,.card td{ color:var(--mist); }
.card a{ color:var(--coral); }
.card ul,.card ol{ padding-left:1.2rem; }
.card li{ margin:.3rem 0; }
.card table{ width:100%; border-collapse:collapse; font-size:13px; margin:1rem 0; background:rgba(10,10,11,0.35); border-radius:8px; overflow:hidden; }
.card th,.card td{ text-align:left; padding:.65rem .75rem; border-bottom:1px solid rgba(156,160,168,0.1); vertical-align:top; }
.card th{ background:rgba(10,10,11,0.55); color:var(--white); font-weight:500; font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; }
.card code{ background:rgba(10,10,11,0.45); color:var(--white); padding:.15rem .35rem; border-radius:4px; font-family:'JetBrains Mono',monospace; font-size:.9em; }
.card pre{ background:var(--ink); padding:1rem; border-radius:8px; overflow:auto; font-size:12px; border:1px solid rgba(156,160,168,0.1); }
.card pre code{ background:transparent; padding:0; }
.card blockquote{ margin:1rem 0; padding-left:1rem; border-left:3px solid var(--coral); color:var(--steel); font-style:normal; }
.swatch-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; margin:1.25rem 0; }
.swatch{ background:var(--ink); border-radius:10px; overflow:hidden; border:1px solid rgba(156,160,168,0.1); }
.swatch-color{ height:100px; }
.swatch-info{ padding:.75rem; }
.swatch-name{ color:var(--white); font-weight:500; font-size:13px; }
.swatch-meta{ color:var(--steel); font-size:11px; font-family:'JetBrains Mono',monospace; line-height:1.4; }
.type-card{ background:var(--ink); padding:1.25rem; border-radius:10px; border:1px solid rgba(156,160,168,0.1); margin:1rem 0; }
.type-label{ color:var(--steel); font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; margin-bottom:.5rem; }
.type-sample{ color:var(--white); }
.lockup-demo,.mark-demo{ background:var(--ink); border-radius:10px; padding:2rem; text-align:center; margin:1rem 0; }
.mark-demo svg{ max-width:120px; height:auto; }
.lockup-demo svg{ max-width:260px; height:auto; }
.actions{ display:flex; justify-content:space-between; margin-top:2rem; border-top:1px solid var(--carbon); padding-top:1.5rem; }
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:999px; background:var(--coral); color:var(--white); text-decoration:none; font-size:13px; font-weight:500; }
.btn.secondary{ background:var(--carbon); color:var(--white); }
.index-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin-top:2rem; }
.index-card{ background:var(--carbon); border-radius:var(--radius); padding:1.5rem; text-decoration:none; color:var(--mist); border:1px solid rgba(156,160,168,0.08); display:flex; flex-direction:column; gap:.5rem; }
.index-card:hover{ border-color:rgba(255,75,38,0.35); }
.index-card .num{ color:var(--coral); font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; }
.index-card .title{ color:var(--white); font-family:'Eurostile','Michroma',sans-serif; font-weight:200; font-size:20px; }
@media(max-width:720px){ header{ flex-wrap:wrap; } nav{ order:3; width:100%; margin-left:0; padding-top:.5rem; } }
@media print{ header,.actions{ display:none; } body{ background:#fff; color:#000; } .card,.index-card{ background:#f4f4f4; border:none; } .card code,.swatch,.type-card{ background:#e8e8e8; } }