:root{--bg:#0a0a0a;--bg-2:#141414;--line:#2a2a2a;--line-2:#3a3a3a;--fg:#ffffff;--muted:#9a9a9a;--muted-2:#6a6a6a;--accent:#ffffff}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--fg);font-family:Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}header.top{padding:56px 48px 32px;border-bottom:1px solid var(--line)}.back{display:inline-block;font-size:11px;letter-spacing:3px;color:var(--muted);font-weight:700;margin-bottom:24px;transition:color .12s ease}.back:hover{color:var(--fg)}.eyebrow{display:inline-block;background:var(--accent);color:#0a0a0a;padding:6px 12px;font-size:11px;letter-spacing:3px;font-weight:700;margin-bottom:24px}header.top h1{font-size:56px;font-weight:900;letter-spacing:-1px;margin-bottom:16px;line-height:1}header.top p{color:var(--muted);max-width:640px;font-size:15px;line-height:1.6}section{padding:80px 48px;border-bottom:1px solid var(--line)}.section-head{margin-bottom:48px}.section-head .label{font-size:11px;letter-spacing:4px;color:var(--muted);font-weight:700;margin-bottom:12px}.section-head h2{font-size:32px;font-weight:900;letter-spacing:-.5px;line-height:1.1;margin-bottom:8px}.section-head .lede{color:var(--muted);font-size:14px;max-width:520px}.logo-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:1px;gap:1px;background:var(--line);border:1px solid var(--line)}.logo-cell{padding:56px 32px;display:flex;align-items:center;justify-content:center;min-height:240px;position:relative}.logo-cell--dark{background:#0a0a0a}.logo-cell--light{background:#f4f4f4}.logo-cell .tag{position:absolute;top:16px;left:16px;font-size:10px;letter-spacing:3px;color:var(--muted);font-weight:700}.logo-cell--light .tag{color:#6a6a6a}.logo-cell img{max-width:80%;max-height:160px;width:auto;height:auto}.logo-cell--light img{filter:invert(1) hue-rotate(180deg)}.mark-row{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:1px;gap:1px;background:var(--line);border:1px solid var(--line)}.mark-cell{background:var(--bg);padding:48px 24px;text-align:center;color:var(--fg)}.mark-cell:nth-child(2){background:#f4f4f4;color:#0a0a0a}.mark-cell .label{font-size:10px;letter-spacing:3px;color:var(--muted);font-weight:700;margin-top:24px}.mark-cell:nth-child(2) .label{color:#6a6a6a}.mark-cell svg{margin:0 auto}.favicons{display:flex;gap:32px;align-items:flex-end;flex-wrap:wrap}.favicon-item{display:flex;flex-direction:column;align-items:center;gap:12px}.favicon-item img{image-rendering:pixelated}.favicon-item .label{font-size:11px;letter-spacing:2px;color:var(--muted);font-weight:700}.social-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:16px;gap:16px;align-items:end}.social-card{background:var(--bg-2);border:1px solid var(--line)}.social-card img{width:100%;height:auto;display:block}.social-card .meta{padding:12px 16px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;color:var(--muted);font-weight:700;border-top:1px solid var(--line)}.social-card .meta strong{color:var(--fg)}.palette{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:0;gap:0;border:1px solid var(--line)}.swatch{padding:32px 24px;min-height:140px;display:flex;flex-direction:column;justify-content:flex-end;border-right:1px solid var(--line)}.swatch:last-child{border-right:none}.swatch.s1{background:#0a0a0a;color:#fff}.swatch.s2{background:#141414;color:#fff}.swatch.s3{background:#2a2a2a;color:#fff}.swatch.s4{background:#9a9a9a;color:#000}.swatch.s5{background:#f4f4f4;color:#000}.swatch .hex{font-size:13px;font-weight:700;letter-spacing:2px}.swatch .name{font-size:10px;letter-spacing:3px;opacity:.6;margin-top:4px}.typo-row{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px}.typo{border:1px solid var(--line);padding:32px}.typo .label{font-size:10px;letter-spacing:3px;color:var(--muted);margin-bottom:16px}.typo .display{font-size:40px;font-weight:900;letter-spacing:1px;line-height:1}.typo .body{font-size:14px;font-weight:400;color:var(--muted);line-height:1.6}.typo .mono{font-family:JetBrains Mono,Menlo,monospace;font-size:13px;color:#d4d4d4;line-height:1.6}.usage{display:grid;grid-template-columns:1fr 1fr;grid-gap:1px;gap:1px;background:var(--line);border:1px solid var(--line)}.usage-cell{background:var(--bg);padding:32px}.usage-cell h3{font-size:14px;letter-spacing:3px;font-weight:800;margin-bottom:16px;text-transform:uppercase}.usage-cell.do h3{color:#ffffff}.usage-cell.dont h3{color:var(--muted)}.usage-cell ul{list-style:none}.usage-cell li{font-size:14px;color:var(--muted);padding:8px 0;border-bottom:1px solid var(--line)}.usage-cell li:last-child{border-bottom:none}.usage-cell li:before{display:inline-block;width:18px;margin-right:4px;font-weight:900}.usage-cell.do li:before{content:"+";color:#ffffff}.usage-cell.dont li:before{content:"—";color:var(--muted-2)}.downloads{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1px;gap:1px;background:var(--line);border:1px solid var(--line)}.download{background:var(--bg);padding:24px 28px;display:flex;justify-content:space-between;align-items:center;transition:background .16s ease}.download:hover{background:var(--bg-2)}.download .title{font-size:14px;font-weight:700;letter-spacing:1px}.download .meta{font-size:11px;color:var(--muted);letter-spacing:2px;font-weight:700}.download .icon{color:var(--muted);transition:color .12s ease}.download:hover .icon{color:var(--fg)}footer{padding:48px;color:var(--muted);font-size:11px;letter-spacing:3px;text-align:center;font-weight:700}@media (max-width:900px){header.top{padding:40px 24px 28px}header.top h1{font-size:40px}section{padding:56px 24px}.section-head h2{font-size:26px}.logo-grid{grid-template-columns:1fr}.mark-row{grid-template-columns:repeat(2,1fr)}.social-grid{grid-template-columns:1fr}.palette{grid-template-columns:repeat(5,1fr)}.swatch{padding:24px 12px;min-height:100px}.swatch .hex{font-size:11px}.downloads,.typo-row,.usage{grid-template-columns:1fr}}@media (max-width:600px){header.top{padding:32px 20px 24px}header.top h1{font-size:32px}section{padding:48px 20px}.section-head{margin-bottom:32px}.section-head h2{font-size:22px}.logo-cell{padding:40px 20px;min-height:180px}.mark-row{grid-template-columns:1fr 1fr}.mark-cell{padding:32px 16px}.palette{grid-template-columns:1fr}.swatch{border-right:none;border-bottom:1px solid var(--line)}.swatch:last-child{border-bottom:none}.typo{padding:24px 20px}.typo .display{font-size:28px}.favicons{gap:20px}footer{padding:32px 20px}}@media (hover:none){.download:hover{background:var(--bg)}}