html { scroll-behavior:smooth; } body { margin:0; } a { color:var(--color-accent-400); text-decoration:none; } a:hover { color:var(--color-accent-200); } button,summary { cursor:pointer; } :focus-visible { outline:2px solid var(--color-accent); outline-offset:4px; }
.wrap { max-width:1280px; margin:auto; padding-inline:48px; } .top { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:20px; } .brand { display:flex; align-items:center; gap:12px; color:var(--color-text); font-size:22px; } .brand svg { width:28px; height:28px; } .pill { font-size:12px; color:var(--color-neutral-400); border:1px solid var(--color-neutral-800); border-radius:99px; padding:2px 9px; }
nav,.actions,.langs { display:flex; flex-wrap:wrap; align-items:center; gap:16px; } nav { font-size:14px; } .langs { gap:2px; border:1px solid var(--color-neutral-800); border-radius:var(--radius-md); padding:3px; } .langs button { font:inherit; border:0; border-radius:var(--radius-sm); padding:7px 10px; } details { position:relative; } summary { color:var(--color-neutral-400); } .dropdown { position:absolute; right:0; top:30px; z-index:10; min-width:210px; padding:12px; background:var(--color-surface); box-shadow:var(--shadow-md); border-radius:var(--radius-md); display:grid; gap:12px; }
section { padding-block:76px; border-top:1px solid var(--color-neutral-800); scroll-margin-top:20px; } .hero { padding-block:92px; background:radial-gradient(ellipse at 85% 30%,var(--color-accent-900),transparent 60%); } .hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:42px; align-items:center; } h1 { font-size:clamp(44px,5.1vw,68px); line-height:1.06; margin:0 0 26px; text-wrap:balance; } h2 { font-size:clamp(28px,3.2vw,38px); margin:0 0 16px; } h3 { font-size:21px; margin:0 0 12px; } p { color:var(--color-neutral-400); line-height:1.7; } .lead { max-width:760px; margin:0 0 36px; font-size:17px; } .hero p { font-size:18px; margin-bottom:28px; } .band { background:linear-gradient(180deg,var(--color-section),var(--color-bg)); border-color:var(--color-section-ghost); } .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .two { grid-template-columns:repeat(2,minmax(0,1fr)); } .four { grid-template-columns:repeat(4,minmax(0,1fr)); } .card { padding:26px; min-width:0; } .band .card { background:var(--color-bg); border:1px solid var(--color-section-ghost); } .card p { font-size:15px; margin:0; } .card h3 { line-height:1.35; } .actions { margin-top:24px; } .actions .btn { padding:12px 19px; } code,pre { font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--color-accent-300); } pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.9; } .codebox { background:var(--color-surface); border:1px solid var(--color-neutral-800); border-radius:var(--radius-md); padding:24px; min-width:0; } .codebox p { margin:0 0 14px; font-size:13px; } .note { margin:24px 0 0; font-size:14px; max-width:900px; } .compare-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:24px; padding-block:18px; border-bottom:1px solid var(--color-neutral-800); } .compare-row p { margin:0; } .table-scroll { overflow:auto; border:1px solid var(--color-section-ghost); border-radius:var(--radius-md); } table { border-collapse:collapse; width:100%; text-align:left; } th,td { padding:18px; border-bottom:1px solid var(--color-section-ghost); vertical-align:top; } th { color:var(--color-accent-300); font-weight:500; } td:first-child { min-width:190px; } td pre { white-space:pre; } .step-number { display:block; color:var(--color-neutral-500); font-size:12px; margin-bottom:4px; } .pipeline { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-block:28px; } .pipeline code { padding:12px 16px; border:1px solid var(--color-accent-700); border-radius:var(--radius-md); } .family a { font-family:'JetBrains Mono',monospace; font-size:16px; overflow-wrap:anywhere; } .family p { margin-top:10px; } footer { padding-block:32px; color:var(--color-neutral-400); border-top:1px solid var(--color-neutral-800); } .footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:13px; } figure { margin:0; min-width:0; } figure svg { display:block; width:100%; height:auto; } figcaption { font-size:13px; color:var(--color-neutral-400); margin-top:16px; } .legend { display:flex; flex-wrap:wrap; gap:18px; margin-top:14px; font-size:12px; color:var(--color-neutral-400); } .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--color-accent); margin-right:6px; } .muted-dot { background:var(--color-neutral-700); } .node rect { fill:var(--color-bg); stroke:var(--color-accent); stroke-width:1.5; animation:repoPulse 5s ease-in-out infinite; } .node text { fill:var(--color-accent-300); font-family:'JetBrains Mono',monospace; font-size:15px; } .node.dim rect { stroke:var(--color-neutral-700); animation:none; } .node.dim text { fill:var(--color-neutral-500); } @keyframes repoPulse { 0%,18%,100% { stroke:var(--color-accent); } 9% { stroke:var(--color-accent-200); fill:var(--color-accent-800); } } .skip { position:absolute; left:16px; top:-100px; z-index:20; padding:12px; background:var(--color-bg); } .skip:focus { top:8px; }
@media(max-width:1000px) { .top { align-items:flex-start; } nav { justify-content:flex-end; gap:12px; } .four { grid-template-columns:repeat(2,minmax(0,1fr)); } .hero-grid { gap:24px; } }
@media(max-width:760px) { .wrap { padding-inline:24px; } .top { flex-wrap:wrap; } nav { justify-content:flex-start; } .hero-grid,.grid,.two { grid-template-columns:minmax(0,1fr); } .hero { padding-block:52px; } section { padding-block:52px; } figure { max-width:530px; } .compare-row { grid-template-columns:minmax(0,1fr); gap:10px; } .compare-head { grid-template-columns:1fr 1fr; } .dropdown { right:auto; left:0; } }
@media(max-width:420px) { .wrap { padding-inline:16px; } .card,.codebox { padding:20px; } nav { gap:10px 14px; } .four { grid-template-columns:minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .node rect { animation:none; } }