@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Mono:wght@400;700&display=swap');

:root { --paper:#f6f0df; --ink:#20242c; --muted:#69655e; --line:#20242c; --yellow:#f4b84b; --coral:#e57b60; --mint:#a8d6c4; --purple:#7165a2; --white:#fffaf0; --on-color:#20242c; --cream:#fff4d4; --shadow:7px 7px 0 var(--ink); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background-color:var(--paper); font-family:'DM Mono', monospace; line-height:1.6; background-image:linear-gradient(rgba(32,36,44,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(32,36,44,.05) 1px,transparent 1px); background-size:32px 32px; }
body.dark { --paper:#171921; --ink:#fff4d4; --muted:#c0b8a3; --line:#fff4d4; --white:#222631; --shadow:7px 7px 0 #090a0e; background-image:linear-gradient(rgba(248,237,207,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(248,237,207,.06) 1px,transparent 1px); }
a { color:inherit; text-decoration:none; }
.shell { width:min(1160px, calc(100% - 48px)); margin-inline:auto; }
.scanlines { position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.035; background:repeating-linear-gradient(0deg,transparent 0 3px,#000 4px); }
.topbar { min-height:86px; display:flex; align-items:center; gap:42px; border-bottom:2px solid var(--line); }
.brand { font:700 20px 'Space Mono',monospace; letter-spacing:-1px; white-space:nowrap; }.brand-mark { color:var(--coral); font-size:24px; }.cursor { color:var(--coral); animation:blink 1s steps(2) infinite; } nav { display:flex; gap:28px; margin-left:auto; font-size:12px; text-transform:uppercase; } nav a:hover,.text-link:hover { color:var(--coral); }.theme-toggle { width:64px; height:32px; border:2px solid var(--line); border-radius:18px; color:var(--ink); background:transparent; cursor:pointer; font-size:16px; display:flex; justify-content:space-around; align-items:center; }.theme-toggle .sun { color:var(--yellow); }
.hero { min-height:650px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:80px 0 88px; }.eyebrow { margin:0 0 22px; font-size:11px; letter-spacing:1.4px; font-weight:500; }.status-dot { display:inline-block; width:8px; height:8px; margin-right:8px; background:#63ba82; border:1px solid var(--ink); border-radius:50%; box-shadow:0 0 0 3px rgba(99,186,130,.2); }h1,h2,h3,p { margin-top:0; }h1,h2,h3 { font-family:'Space Mono',monospace; line-height:1.1; letter-spacing:-2px; }h1 { max-width:600px; font-size:clamp(48px,7vw,82px); margin-bottom:26px; }h1 em,h2 span { color:var(--coral); font-style:normal; }.hero-text { max-width:500px; color:var(--muted); font-size:15px; }.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin:32px 0 24px; }.button { display:inline-flex; align-items:center; gap:20px; min-height:49px; padding:0 18px; border:2px solid var(--line); font:700 12px 'Space Mono',monospace; text-transform:uppercase; box-shadow:4px 4px 0 var(--line); transition:transform .15s,box-shadow .15s; }.button:hover { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--line); }.button-primary { background:var(--yellow); }.button-ghost { background:transparent; box-shadow:none; }.microcopy { color:var(--muted); font-size:9px; letter-spacing:1px; }
.hero-stage { height:445px; position:relative; overflow:hidden; background:var(--purple); border:3px solid var(--line); box-shadow:var(--shadow); image-rendering:pixelated; }.stage-floor { position:absolute; bottom:48px; left:8%; right:8%; height:4px; background:#20242c; box-shadow:0 8px 0 rgba(32,36,44,.25); }.hero-cat { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }.stage-label { position:absolute; z-index:2; color:var(--cream); font-size:9px; letter-spacing:1px; }.label-top { top:18px; left:20px; }.label-bottom { bottom:18px; left:20px; }.speech-bubble { position:absolute; z-index:3; top:84px; left:50%; color:var(--on-color); transform:translateX(-15%); padding:13px 16px; background:#fffaf0; border:3px solid var(--on-color); box-shadow:4px 4px 0 var(--on-color); font:700 11px 'Space Mono',monospace; line-height:1.35; }.speech-bubble:after { content:''; position:absolute; left:22px; bottom:-13px; width:14px; height:14px; background:#fffaf0; border-right:3px solid var(--on-color); border-bottom:3px solid var(--on-color); transform:skewY(35deg); }.speech-bubble span { color:#b84f3b; font-size:9px; }.spark { position:absolute; z-index:2; color:var(--yellow); font-size:24px; }.spark-one { top:156px; left:21%; }.spark-two { top:233px; right:18%; color:var(--mint); }.spark-three { bottom:124px; right:29%; font-size:16px; }
.ticker { overflow:hidden; color:var(--on-color); border-top:2px solid var(--line); border-bottom:2px solid var(--line); background:var(--yellow); white-space:nowrap; }.ticker-inner { width:max-content; padding:13px 0; font:700 12px 'Space Mono',monospace; animation:marquee 24s linear infinite; }.ticker span { margin:0 32px; color:#a94332; }
.section { padding:120px 0; }.section-heading { max-width:570px; }.section-heading h2,.split-copy h2,.install-inner h2 { font-size:clamp(38px,5vw,58px); margin-bottom:20px; }.section-heading > p:last-child,.split-copy > p:not(.eyebrow),.install-inner > div:first-child > p:last-child { color:var(--muted); font-size:14px; max-width:480px; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:60px; }.feature-card { position:relative; min-height:350px; padding:23px; color:var(--on-color); border:3px solid var(--line); box-shadow:var(--shadow); overflow:hidden; }.card-yellow { background:var(--yellow); }.card-coral { background:var(--coral); }.card-mint { background:var(--mint); }.card-icon { font:700 26px 'Space Mono'; }.card-number { position:absolute; top:24px; right:24px; margin:0; font-size:11px; }.feature-card h3 { margin:66px 0 15px; font-size:24px; }.feature-card > p:not(.card-number) { max-width:250px; font-size:12px; }.card-cat { position:absolute; right:5px; bottom:0; }.card-cat video { display:block; width:96px; height:96px; image-rendering:pixelated; }
.split-section { display:grid; grid-template-columns:1.1fr .9fr; gap:88px; align-items:center; }.desktop-demo { position:relative; min-height:370px; overflow:hidden; color:#575b74; background:#ebeef5; border:3px solid var(--line); box-shadow:var(--shadow); }.desktop-bar { position:relative; z-index:2; height:36px; padding:0 12px; display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid #cdd2dd; font-size:8px; letter-spacing:.4px; }.workspaces { word-spacing:7px; }.active-workspace { display:inline-grid; width:17px; height:17px; color:#ebeef5; background:#575b74; place-items:center; }.desktop-wordmark { position:absolute; z-index:1; top:49%; left:50%; transform:translate(-50%,-50%); color:#2867e8; font:700 clamp(34px,5vw,58px) 'Space Mono',monospace; letter-spacing:-5px; }.desktop-ground { position:absolute; z-index:3; right:0; bottom:20px; left:0; height:2px; background:#575b74; }.walking-cat { --cat-size:72px; position:absolute; z-index:4; bottom:22px; left:0; width:var(--cat-size); height:var(--cat-size); transform-origin:center; animation:cat-walk 18s linear infinite; }.walking-cat video { display:block; width:100%; height:100%; image-rendering:pixelated; }.desktop-label { position:absolute; z-index:5; right:12px; bottom:7px; font-size:8px; letter-spacing:1px; }.text-link { display:inline-block; margin-top:22px; color:var(--coral); font:700 12px 'Space Mono'; text-transform:uppercase; border-bottom:2px solid var(--coral); padding-bottom:5px; }.text-link span { margin-left:18px; }.install-section { padding:100px 0; color:var(--on-color); background:var(--coral); border-top:3px solid var(--line); border-bottom:3px solid var(--line); }.install-section h2 span { color:#59457f; }.install-inner { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }.install-inner h2 { margin-top:0; }.install-inner > div:first-child > p:last-child { color:#3f2f2d; }.install-card { padding:25px; color:var(--ink); border:3px solid var(--line); background:var(--white); box-shadow:var(--shadow); }.install-card-top { display:flex; justify-content:space-between; gap:20px; font-size:10px; padding-bottom:21px; border-bottom:2px solid var(--line); margin-bottom:28px; }.status-waiting { color:#a84d3d; }.coming-soon { display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:0 20px; color:var(--paper); background:var(--ink); font:700 clamp(18px,3vw,28px) 'Space Mono',monospace; letter-spacing:1px; }.coming-soon span:last-child { color:var(--yellow); animation:blink 1.2s steps(2) infinite; }.install-note { color:var(--muted); font-size:11px; margin:20px 0 0; }.footer { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:10px; }.footer p { margin:0; color:var(--muted); }.creator-link,.asset-credit a { color:var(--coral); font-weight:700; border-bottom:1px solid currentColor; }.creator-link:hover,.asset-credit a:hover { color:var(--ink); }
@keyframes blink { 50% { opacity:0; } } @keyframes marquee { to { transform:translateX(-50%); } } @keyframes cat-walk { 0% { left:0; transform:scaleX(1); } 49.99% { left:calc(100% - var(--cat-size)); transform:scaleX(1); } 50% { left:calc(100% - var(--cat-size)); transform:scaleX(-1); } 99.99% { left:0; transform:scaleX(-1); } 100% { left:0; transform:scaleX(1); } }
@media (max-width:1000px) { .hero { gap:36px; }.feature-grid { grid-template-columns:repeat(2,1fr); }.feature-card:last-child { grid-column:1 / -1; }.split-section { gap:48px; }.desktop-wordmark { font-size:38px; } }
@media (max-width:800px) { .topbar { gap:18px; }.topbar nav { display:none; }.theme-toggle { margin-left:auto; }.hero,.split-section,.install-inner { grid-template-columns:1fr; }.hero { padding-top:55px; min-height:auto; gap:60px; }.hero-stage { height:380px; }.feature-grid { grid-template-columns:1fr; }.feature-card:last-child { grid-column:auto; }.feature-card { min-height:300px; }.section { padding:85px 0; }.split-section { gap:50px; }.desktop-demo { min-height:330px; }.desktop-wordmark { font-size:clamp(34px,10vw,58px); }.install-inner { gap:45px; }.footer { flex-wrap:wrap; padding:30px 0; }.footer p { order:3; width:100%; } }
@media (max-width:480px) { .shell { width:min(100% - 28px,1160px); }.hero { padding-bottom:64px; }.hero-stage { height:330px; }.speech-bubble { left:42%; transform:translateX(-25%) scale(.9); }.desktop-demo { min-height:250px; }.desktop-bar span:nth-child(2) { display:none; }.desktop-wordmark { font-size:30px; letter-spacing:-3px; }.walking-cat { --cat-size:56px; bottom:22px; }.button { width:100%; justify-content:space-between; }.hero-actions { align-items:stretch; }.install-card { padding:18px; }.footer > a:last-child { margin-left:auto; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.cursor,.ticker-inner,.walking-cat { animation:none; }.walking-cat { left:calc(100% - var(--cat-size)); } }