@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');
:root { --ink: #17211f; --paper: #f4f0e8; --orange: #e85d35; --teal: #2e7470; --line: #c8c5bb; --mono: 'Space Mono', monospace; --sans: 'DM Sans', sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
a { color: inherit; }
.page-width { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.site-header { width: min(1120px, calc(100% - 48px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 28px 0; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 1.2rem; text-decoration: none; letter-spacing: .03em; }
.brand-mark { color: var(--orange); font-family: var(--mono); font-size: .9rem; margin-right: 6px; }
nav { display: flex; gap: 28px; font-size: .9rem; }
nav a, .text-link, .closing-links a { text-decoration: none; }
nav a:hover, nav a:focus-visible, .text-link:hover, .text-link:focus-visible, .closing-links a:hover, .closing-links a:focus-visible { color: var(--orange); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); gap: 72px; align-items: center; padding-top: 104px; padding-bottom: 112px; }
.eyebrow { margin: 0 0 18px; color: var(--teal); font: 700 .73rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { margin-bottom: 24px; font-weight: 500; line-height: 1.04; letter-spacing: -.025em; }
h1 { font-size: clamp(3.3rem, 7vw, 6.2rem); }
h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h1 em, h2 em { color: var(--orange); font-style: normal; }
.hero-lede { max-width: 510px; color: #46514d; font-size: 1.1rem; }
.hero-actions, .install-links { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin: 32px 0 22px; }
.button { display: inline-flex; align-items: center; gap: 12px; padding: 13px 18px; border: 1px solid transparent; font-weight: 700; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-primary { color: #fffaf2; background: var(--orange); }
.button-primary:hover, .button-primary:focus-visible { background: #c94c2a; }
.button-light { color: var(--ink); background: #f7db87; }
.text-link { font-weight: 700; }
.compatibility { color: #6d746d; font: .72rem var(--mono); }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--teal); }
.terminal-window { overflow: hidden; border: 1px solid #33413d; background: #17211f; box-shadow: 18px 18px 0 #d8d0c1; animation: lift-in .8s ease both; }
.terminal-bar { display: flex; gap: 7px; align-items: center; padding: 13px 16px; color: #91a69b; border-bottom: 1px solid #33413d; font: .68rem var(--mono); }
.terminal-bar span { width: 9px; height: 9px; border-radius: 50%; background: #df7652; }.terminal-bar span:nth-child(2) { background: #e6b84c; }.terminal-bar span:nth-child(3) { background: #6ba99c; }.terminal-bar b { margin-left: auto; font-weight: 400; }
.terminal-body { min-height: 350px; padding: 25px 28px; color: #eff0e8; font: .76rem/1.75 var(--mono); }
.terminal-body p { margin-bottom: 15px; }.prompt { color: #e6b84c; }.command { color: #fffaf2; }.muted { color: #82958a; }.answer { color: #a8d1bf; }.table { color: #d3c98e; }.cursor { color: var(--orange); animation: blink 1.1s steps(2) infinite; }
.signal-strip { color: #f7f2e9; background: var(--teal); }.signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); }.signal-grid > div { min-height: 210px; padding: 32px 28px; border-left: 1px solid rgba(244,240,232,.26); }.signal-grid > div:last-child { border-right: 1px solid rgba(244,240,232,.26); }.signal-grid strong { display: block; margin-bottom: 24px; color: #f4ce73; font: .72rem var(--mono); }.signal-grid span { display: block; font-size: 1.35rem; font-weight: 700; }.signal-grid p { max-width: 240px; margin: 8px 0 0; color: #c1d4ca; font-size: .9rem; }
.how { padding-top: 120px; padding-bottom: 130px; }.section-heading { display: grid; grid-template-columns: .75fr 1.25fr; align-items: start; margin-bottom: 70px; }.section-heading .eyebrow { padding-top: 14px; }.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }.numbered { border-top: 2px solid var(--orange); padding-top: 18px; }.numbered span { color: var(--orange); font: .72rem var(--mono); }.numbered h3 { margin: 35px 0 12px; font-size: 1.25rem; }.numbered p { color: #5d6862; font-size: .94rem; }
.install-band { color: #f7f2e9; background: var(--orange); }.install-content { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; padding-top: 92px; padding-bottom: 92px; }.install-band .eyebrow { color: #f7db87; }.install-band h2 em { color: #f7db87; }.install-details { max-width: 500px; }.install-details > p { color: #ffe5d3; font-size: 1.08rem; }.install-details code { color: #fffaf2; font-family: var(--mono); }.code-block { overflow-x: auto; margin: 28px 0; padding: 18px 20px; color: #f7db87; background: #17211f; font: .77rem/1.9 var(--mono); }.code-block code { white-space: nowrap; }.code-comment { color: #91a69b; }.code-command { color: #fffaf2; }.light-link { color: #fffaf2; }
.closing { padding-top: 120px; padding-bottom: 120px; text-align: center; }.closing h2 { margin-bottom: 18px; }.closing > p:not(.eyebrow) { color: #5d6862; }.closing-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; margin-top: 36px; font-weight: 700; }.closing-links a span, .site-footer a { color: var(--orange); }
.site-footer { display: flex; gap: 24px; align-items: center; padding: 26px 0 30px; border-top: 1px solid var(--line); color: #6d746d; font-size: .78rem; }.site-footer .brand { color: var(--ink); margin-right: auto; font-size: 1rem; }
.docs-page { padding-top: 86px; padding-bottom: 110px; }.docs-header { max-width: 760px; padding-bottom: 64px; border-bottom: 1px solid var(--line); }.docs-header h1 { margin-bottom: 18px; font-size: clamp(3rem, 7vw, 5.6rem); }.docs-header > p:not(.eyebrow) { max-width: 650px; color: #5d6862; font-size: 1.05rem; }.docs-header a, .docs-content a { color: var(--teal); font-weight: 700; }.docs-layout { display: grid; grid-template-columns: 190px minmax(0, 720px); gap: 72px; align-items: start; padding-top: 58px; }.docs-contents { position: sticky; top: 24px; display: grid; gap: 10px; color: #5d6862; font-size: .86rem; }.docs-contents strong { margin-bottom: 8px; color: var(--ink); font: .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }.docs-contents a { text-decoration: none; }.docs-contents a:hover, .docs-contents a:focus-visible { color: var(--orange); }.docs-content section { scroll-margin-top: 24px; padding-bottom: 48px; }.docs-content h2 { margin-bottom: 18px; color: var(--teal); font: 700 1.2rem var(--mono); letter-spacing: 0; }.docs-content p, .docs-content li, .docs-content dd { color: #46514d; }.docs-content p { max-width: 700px; }.docs-content pre { overflow-x: auto; margin: 20px 0 0; padding: 20px; color: #f7f2e9; background: #17211f; font: .78rem/1.8 var(--mono); }.docs-content dl { display: grid; grid-template-columns: minmax(150px, .34fr) 1fr; gap: 0 24px; margin: 0; }.docs-content dt, .docs-content dd { padding: 12px 0; border-top: 1px solid var(--line); }.docs-content dt { color: var(--ink); font-weight: 700; }.docs-content dd { margin: 0; }.docs-content ul { padding-left: 20px; }.docs-content li { margin-bottom: 8px; }.docs-source { padding-top: 24px; border-top: 1px solid var(--line); font: .78rem var(--mono); }
@keyframes lift-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; gap: 54px; padding-top: 68px; padding-bottom: 82px; }.terminal-window { max-width: 640px; width: 100%; }.section-heading, .install-content, .docs-layout { grid-template-columns: 1fr; gap: 20px; }.how { padding-top: 80px; padding-bottom: 85px; }.section-heading { margin-bottom: 46px; }.install-content { padding-top: 70px; padding-bottom: 70px; }.site-footer { flex-wrap: wrap; }.site-footer .brand { width: 100%; }.docs-page { padding-top: 60px; padding-bottom: 80px; }.docs-header { padding-bottom: 42px; }.docs-layout { padding-top: 42px; }.docs-contents { position: static; grid-template-columns: repeat(4, auto); gap: 8px 18px; }.docs-contents strong { grid-column: 1 / -1; } }
@media (max-width: 560px) { .page-width, .site-header { width: min(100% - 32px, 1120px); } nav { gap: 14px; font-size: .78rem; } nav a:first-child { display: none; } h1 { font-size: 3.35rem; }.hero-lede { font-size: 1rem; }.terminal-body { padding: 20px 16px; font-size: .65rem; min-height: 315px; }.signal-grid, .how-grid { grid-template-columns: 1fr; }.signal-grid > div { min-height: auto; border-right: 1px solid rgba(244,240,232,.26); }.signal-grid > div:last-child { border-top: 0; }.closing-links { align-items: flex-start; flex-direction: column; width: max-content; margin-right: auto; margin-left: auto; text-align: left; }.docs-contents { grid-template-columns: repeat(2, 1fr); }.docs-content dl { grid-template-columns: 1fr; }.docs-content dt { padding-bottom: 4px; border-bottom: 0; }.docs-content dd { padding-top: 0; padding-bottom: 14px; } }