@font-face { font-family: Geist; src: url(/fonts/geist-latin.woff2) format('woff2'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(/fonts/geist-mono-latin.woff2) format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Pixelify Sans'; src: url(/fonts/pixelify-sans-latin.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
:root { color-scheme: dark; --bg: #0a0a0b; --bg-2: #111113; --line: rgb(255 255 255 / 9%); --fg: #ededed; --fg-2: #a1a1aa; --fg-3: #6b6b73; --cream: #F2E9D8; --blush: #F6B9B3; --ink: #2A2118; --mono: 'Geist Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace; --sans: Geist, system-ui, -apple-system, "Segoe UI", sans-serif; --pixel: 'Pixelify Sans', 'Geist', sans-serif; --max: 1120px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px / 1.6 var(--sans); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01', 'cv11'; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
.wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
/* nav */
.nav { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgb(10 10 11 / 70%); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 18px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 20px / 1 var(--pixel); letter-spacing: 0.01em; }
.brand img { width: 26px; height: 26px; image-rendering: pixelated; }
.brand span { color: var(--fg-2); font-weight: 500; }
.nav nav { margin-inline-start: auto; display: flex; gap: 6px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; font-weight: 500; font-size: 15px; letter-spacing: -0.005em; border: 1px solid var(--line); color: var(--fg); transition: background 160ms, border-color 160ms, transform 160ms; }
.btn:hover { background: rgb(255 255 255 / 6%); border-color: rgb(255 255 255 / 18%); }
.btn.primary { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn.primary:hover { background: #fff; border-color: #fff; }
.btn.lg { height: 48px; padding: 0 22px; font-size: 16px; }
/* hover cards on the nav buttons: a looping preview of the site behind each */
.hover { position: relative; display: inline-flex; }
.card { position: absolute; top: calc(100% + 10px); right: 0; width: 300px; padding: 6px; border-radius: 14px; background: #141416; border: 1px solid rgb(255 255 255 / 12%); box-shadow: 0 30px 80px rgb(0 0 0 / 60%); opacity: 0; translate: 0 6px; scale: 0.98; pointer-events: none; transition: opacity 180ms ease, translate 180ms cubic-bezier(.2,.8,.2,1), scale 180ms cubic-bezier(.2,.8,.2,1); transform-origin: top right; z-index: 6; }
.card::before { content: ''; position: absolute; top: -11px; left: 0; right: 0; height: 12px; } /* the gap stays hoverable */
.card.up { top: auto; bottom: calc(100% + 10px); right: auto; left: 0; translate: 0 -6px; transform-origin: bottom left; }
.card.up::before { top: auto; bottom: -11px; }
footer .hover { display: inline-flex; }
.card video, .card img { width: 100%; aspect-ratio: 16 / 10; border-radius: 9px; background: #0a0a0b; object-fit: cover; display: block; }
.card .meta { display: grid; gap: 2px; padding: 10px 8px 6px; }
.card .meta b { font: 700 13px / 1.2 var(--pixel); color: var(--fg); }
.card .meta span { font-size: 13px; line-height: 1.4; color: var(--fg-2); }
@media (hover: hover) { .hover:hover .card, .hover:focus-within .card { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; } }
footer { overflow: visible; }
@media (max-width: 860px) { .card { display: none; } }
/* hero */
.hero { position: relative; padding: 96px 0 40px; text-align: center; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: -40% -20% auto; height: 120%; background: radial-gradient(ellipse at 50% 0%, rgb(246 185 179 / 16%), transparent 55%), radial-gradient(ellipse at 20% 30%, rgb(127 180 214 / 10%), transparent 50%); pointer-events: none; }
.hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 70%); pointer-events: none; opacity: 0.5; }
.hero > * { position: relative; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--line); background: rgb(255 255 255 / 4%); color: var(--fg-2); font-size: 13px; font-weight: 500; }
.eyebrow b { padding: 3px 8px 2px; border-radius: 999px; background: var(--blush); color: var(--ink); font: 700 12px / 1 var(--pixel); letter-spacing: 0.06em; }
h1 { margin: 22px auto 18px; max-width: 13ch; font: 700 clamp(46px, 8.6vw, 104px) / 0.98 var(--pixel); letter-spacing: 0.005em; text-wrap: balance; }
h1 em { font-style: normal; background: linear-gradient(90deg, var(--cream), var(--blush)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin: 0 auto; max-width: 54ch; color: var(--fg-2); font-size: clamp(17px, 2vw, 20px); font-weight: 400; letter-spacing: -0.005em; }
.ctas { display: flex; justify-content: center; gap: 12px; margin: 30px 0 56px; flex-wrap: wrap; }
.frame { margin: 0 auto; max-width: 1000px; border-radius: 18px; padding: 8px; background: linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 3%)); box-shadow: 0 40px 120px rgb(0 0 0 / 60%), 0 0 0 1px var(--line); }
.frame video { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; }
/* sections */
section { padding: 96px 0; border-top: 1px solid var(--line); }
.kicker { color: var(--blush); font: 700 13px / 1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 14px; }
h2 { margin: 0 0 14px; font: 700 clamp(32px, 4.8vw, 54px) / 1.04 var(--pixel); letter-spacing: 0.005em; max-width: 20ch; text-wrap: balance; }
.sub { color: var(--fg-2); max-width: 58ch; margin: 0; font-size: 18px; }
/* devices */
.devices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.device { position: relative; aspect-ratio: 1; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); display: grid; place-items: center; padding: 18px; overflow: hidden; transition: transform 240ms cubic-bezier(.2,.8,.2,1), border-color 240ms; }
.device:hover { transform: translateY(-4px); border-color: rgb(255 255 255 / 20%); }
.device img { max-height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 16px 24px rgb(0 0 0 / 45%)); }
.device span { position: absolute; left: 12px; bottom: 10px; font: 500 12px / 1 var(--mono); color: var(--fg-3); letter-spacing: 0.02em; }
.count { display: flex; gap: 40px; margin-top: 40px; flex-wrap: wrap; }
.count div b { display: block; font: 700 44px / 1 var(--pixel); }
.count div span { color: var(--fg-3); font-size: 14px; }
/* feature rows */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.row + .row { margin-top: 96px; }
.row:nth-child(even) .pic { order: -1; }
.pic { border-radius: 20px; background: radial-gradient(ellipse at 30% 20%, rgb(255 255 255 / 7%), transparent 60%), var(--bg-2); border: 1px solid var(--line); padding: 36px; display: grid; place-items: center; min-height: 380px; }
.pic img { max-height: 420px; width: auto; filter: drop-shadow(0 30px 40px rgb(0 0 0 / 55%)); }
.pic.phone { padding: 24px; }
.pic.phone video { height: 480px; width: auto; border-radius: 22px; box-shadow: 0 0 0 8px #1a1a1d, 0 0 0 9px rgb(255 255 255 / 12%), 0 30px 60px rgb(0 0 0 / 55%); }
.row ul { margin: 18px 0 0; padding: 0; list-style: none; color: var(--fg-2); display: grid; gap: 10px; }
.row li { display: flex; gap: 10px; align-items: baseline; }
.row li::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 6px; background: var(--blush); box-shadow: 2px 2px 0 var(--ink); }
/* terminal pet */
.term { border-radius: 14px; background: #1e1f24; border: 1px solid rgb(255 255 255 / 10%); box-shadow: 0 40px 100px rgb(0 0 0 / 55%); overflow: hidden; font: 500 14px / 1.5 var(--mono); color: #c9cbd3; }
.term .bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; background: #2b2c32; border-bottom: 1px solid #15161a; color: #9a9ca5; font-size: 12px; }
.term .bar i { width: 11px; height: 11px; border-radius: 50%; display: block; } .term .bar i:nth-child(1) { background: #ff5f57; } .term .bar i:nth-child(2) { background: #febc2e; } .term .bar i:nth-child(3) { background: #28c840; }
.term .bar span { flex: 1; text-align: center; }
.term .body { padding: 16px 18px 6px; display: grid; gap: 4px; }
.term .you { color: #8b8e99; } .term .you::before { content: '› '; }
.term .bot::before { content: '● '; color: #bd93f9; }
.term .pet { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 14px 18px 10px; border-top: 1px solid rgb(255 255 255 / 7%); }
.term canvas { width: 128px; height: 128px; image-rendering: pixelated; }
.term .words b { display: block; color: #f2f2f5; font: 700 15px / 1.3 var(--pixel); }
.term .words span { display: block; } .term .words .st { color: #c9cbd3; } .term .words .meter { color: #6a6d78; font-size: 13px; }
.term .prompt { display: flex; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid rgb(255 255 255 / 7%); color: #f2f2f5; } .term .prompt .ps { color: #bd93f9; font-weight: 700; } .term .prompt .cur { width: 8px; height: 17px; background: #bd93f9; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cmd { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 10px 14px; border-radius: 10px; background: #111113; border: 1px solid var(--line); font: 500 14px / 1.3 var(--mono); color: var(--fg); }
.cmd span { color: var(--fg-3); }
/* footer */
footer { border-top: 1px solid var(--line); padding: 48px 0 72px; color: var(--fg-3); font-size: 14px; }
footer .wrap { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
footer a:hover { color: var(--fg); }
footer .spacer { flex: 1; }
@media (max-width: 860px) {
  .devices { grid-template-columns: repeat(2, 1fr); }
  .row { grid-template-columns: 1fr; gap: 28px; } .row:nth-child(even) .pic { order: 0; }
  .pic { min-height: 0; padding: 24px; } .pic img { max-height: 300px; } .pic.phone video { height: 400px; }
  section { padding: 64px 0; } .hero { padding-top: 64px; }
  .nav .btn.ghost { display: none; }
}
@media (prefers-reduced-motion: reduce) { .device, .btn { transition: none; } .term .prompt .cur { animation: none; } }

/* the pet page */
.more { margin: 14px 0 0; } .more a { color: var(--blush); font-weight: 500; } .more a:hover { text-decoration: underline; }
.doc { max-width: 760px; }
.doc h1 { font: 700 clamp(40px, 7vw, 76px) / 1 var(--pixel); margin: 18px 0 16px; max-width: none; text-align: left; }
.doc h2 { font-size: clamp(26px, 3.6vw, 36px); margin-top: 56px; }
.doc p, .doc li { color: var(--fg-2); font-size: 17px; }
.doc li { margin: 6px 0; }
.doc code { font: 500 0.92em var(--mono); color: var(--fg); background: rgb(255 255 255 / 6%); padding: 1px 6px; border-radius: 6px; }
.doc pre { margin: 14px 0; padding: 14px 16px; border-radius: 12px; background: #111113; border: 1px solid var(--line); font: 500 14px / 1.6 var(--mono); color: var(--fg); overflow-x: auto; }
.doc pre b { color: var(--fg-3); font-weight: 500; }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--fg-2); }
.doc th { color: var(--fg); font-weight: 600; } .doc td:first-child { color: var(--fg); white-space: nowrap; font-family: var(--mono); font-size: 14px; }
.doc .steps { counter-reset: s; list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 14px; }
.doc .steps li { position: relative; padding: 16px 18px 16px 58px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); color: var(--fg-2); }
.doc .steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--cream); color: var(--ink); font: 700 15px / 1 var(--pixel); }
.doc .steps li b { display: block; color: var(--fg); margin-bottom: 4px; font-weight: 600; }
.pethero { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
@media (max-width: 860px) { .pethero { grid-template-columns: 1fr; } }
/* copy actions on command blocks */
.doc pre, .cmd { position: relative; }
.doc pre { padding-right: 96px; }
.cmd { padding-right: 10px; max-width: 100%; white-space: nowrap; overflow-x: auto; }
.copy { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: rgb(255 255 255 / 5%); color: var(--fg-2); font: 500 12px / 1 var(--sans); letter-spacing: 0; cursor: pointer; transition: background 160ms, color 160ms, border-color 160ms; }
.copy:hover { background: rgb(255 255 255 / 10%); color: var(--fg); }
.copy:focus-visible { outline: 2px solid var(--blush); outline-offset: 1px; }
.copy svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.copy.done { color: var(--ink); background: var(--cream); border-color: var(--cream); }
.cmd .copy { position: static; margin-left: 4px; }
.doc code.cp { cursor: pointer; position: relative; transition: background 160ms; }
.doc code.cp:hover { background: rgb(255 255 255 / 12%); }
.doc code.cp::after { content: 'copied'; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px); padding: 4px 8px; border-radius: 6px; background: var(--cream); color: var(--ink); font: 600 11px / 1 var(--sans); opacity: 0; pointer-events: none; transition: opacity 160ms, transform 160ms; white-space: nowrap; }
.doc code.cp.done::after { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) { .doc pre { padding-right: 16px; padding-top: 44px; } }