:root { --ink:#101213; --paper:#f4f2ea; --lime:#c9ff57; --red:#ff5268; --muted:#6b7377; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
nav, main, footer { width:min(1160px,calc(100% - 40px)); margin:auto; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #c9c7c0; font-size:13px; }
nav a { color:inherit; text-decoration:none; }
.brand { font-weight:900; font-size:18px; letter-spacing:-.04em; }
.hero { padding:94px 0 68px; max-width:950px; }
.eyebrow { margin:0 0 16px; color:#667000; font-size:12px; font-weight:900; letter-spacing:.16em; }
h1 { margin:0; max-width:1000px; font-size:clamp(48px,6.4vw,78px); line-height:.94; letter-spacing:-.055em; }
h1 span { display:block; color:#7d8588; }
.lede { max-width:700px; margin:32px 0; color:#41484b; font-size:clamp(19px,2.3vw,27px); line-height:1.4; letter-spacing:-.025em; }
.cta { display:flex; align-items:center; gap:24px; }
.button { display:inline-flex; min-height:52px; padding:0 22px; align-items:center; justify-content:center; color:#101213; background:var(--lime); border:2px solid #101213; box-shadow:5px 5px 0 #101213; text-decoration:none; font-weight:900; }
.button:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 #101213; }
.text-link { color:inherit; font-weight:800; text-decoration:none; }
.micro { margin-top:18px; color:var(--muted); font-size:12px; }
.product { display:grid; grid-template-columns:minmax(0,1fr) 310px; min-height:500px; background:#111416; border:1px solid #111; box-shadow:10px 10px 0 var(--lime); color:#f5f5f0; }
.browser { border-right:1px solid #34393c; }
.chrome { height:52px; display:flex; align-items:center; gap:7px; padding:0 17px; border-bottom:1px solid #34393c; }
.chrome i { width:10px; height:10px; border-radius:50%; background:#62696d; }
.chrome i:first-child { background:var(--red); }.chrome i:nth-child(2){background:#f5c959}.chrome i:nth-child(3){background:#74d47c}
.chrome span { margin-left:13px; padding:7px 14px; min-width:290px; color:#a8afb3; background:#202428; border-radius:7px; font:11px ui-monospace,monospace; }
.app { display:grid; grid-template-columns:180px 1fr; min-height:448px; }
.side { display:flex; flex-direction:column; gap:17px; padding:30px 24px; border-right:1px solid #34393c; color:#8f979b; font-size:13px; }
.side b { color:#fff; margin-bottom:13px; }.side span:last-child { color:var(--lime); }
.panel { padding:48px; }.panel small{color:#7d8589;font-weight:800}.panel h2{font-size:35px;letter-spacing:-.04em;margin:9px 0 36px}
.field { position:relative; display:grid; grid-template-columns:1fr 150px; gap:28px; align-items:center; margin:0 0 22px; padding:22px; border:1px solid #3b4145; border-radius:10px; }.field button{height:38px;border:0;border-radius:6px;font-weight:800}.field .broken{white-space:nowrap;overflow:hidden;outline:3px solid var(--red)}.field em{position:absolute;right:20px;bottom:-9px;background:var(--red);color:#fff;padding:3px 7px;font:normal 10px ui-monospace,monospace}
aside { padding:25px 20px; }.aside-title{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:25px}.aside-title span{color:var(--red);font-size:11px}.finding{padding:17px 0;border-top:1px solid #353a3d}.finding b{color:#ff8796;font-size:10px}.finding code,.finding span{display:block;margin-top:5px}.finding code{color:var(--lime);font-size:11px}.finding span{color:#969ea2;font-size:11px}
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:110px 0; border:1px solid #bdbbb4; background:#bdbbb4; }.steps article{padding:35px;background:var(--paper)}.steps article>b{color:#7e8b00;font:900 13px ui-monospace,monospace}.steps h3{margin:35px 0 10px;font-size:22px;letter-spacing:-.035em}.steps p{color:#596165;line-height:1.55;font-size:14px}
.difference { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding:80px 0; border-top:1px solid #bdbbb4; }.difference h2,.install h2{font-size:clamp(36px,5vw,62px);line-height:1;letter-spacing:-.055em;margin:0}.difference ul{list-style:none;margin:0;padding:0}.difference li{padding:20px 0;border-top:1px solid #bdbbb4}.difference li:first-child{border-top:0}.difference li b,.difference li span{display:block}.difference li span{margin-top:5px;color:#62696d;font-size:14px}
.install { margin:70px 0 110px; padding:70px; background:#171a1c; color:#f7f7f2; }.install h2{max-width:800px}.install ol{margin:35px 0 38px;padding-left:20px;color:#c1c7c9;line-height:2}.install code{color:var(--lime)}
footer { display:flex;justify-content:space-between;padding:30px 0;border-top:1px solid #bdbbb4;color:#70777a;font-size:12px }
@media(max-width:800px){.product{grid-template-columns:1fr}.browser{border-right:0}.product aside{display:none}.app{grid-template-columns:1fr}.side{display:none}.panel{padding:30px 20px}.field{grid-template-columns:1fr}.steps,.difference{grid-template-columns:1fr}.difference{gap:35px}.install{padding:40px 25px}.cta{align-items:flex-start;flex-direction:column}}