:root { --bg:#fafaf8; --text:#171816; --muted:#62655d; --line:#dadbd5; --green:#b7ee38; --term:#151613; --mono:"SFMono-Regular",Menlo,Consolas,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; line-height:1.6; }
a { color:inherit; text-underline-offset:4px; }
code,pre { font-family:var(--mono); }
header,main,footer { width:min(880px,calc(100% - 36px)); margin:auto; }
header { height:64px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-size:14px; }
header nav { display:flex; gap:22px; }
header nav a { text-decoration:none; color:var(--muted); }
header nav a:hover { color:var(--text); }
.brand { display:flex; gap:9px; align-items:center; text-decoration:none; font-size:16px; font-weight:700; }
.brand i { width:11px; height:11px; border:1px solid var(--text); border-radius:50%; background:var(--green); }
section { padding:84px 0; border-bottom:1px solid var(--line); }
section:last-child { border-bottom:0; }
.hero { padding-top:96px; }
.eyebrow { margin:0 0 18px; color:var(--muted); font:11px var(--mono); text-transform:uppercase; letter-spacing:.1em; }
h1,h2 { margin:0; line-height:1.08; letter-spacing:-.04em; }
h1 { max-width:760px; font-size:clamp(42px,7.5vw,72px); }
h2 { max-width:720px; font-size:clamp(30px,5vw,44px); }
.lead { max-width:660px; margin:28px 0 36px; color:var(--muted); font-size:19px; }
.sub { max-width:660px; margin:18px 0 36px; color:var(--muted); font-size:16px; }
.actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.button { display:inline-block; padding:12px 20px; border:1px solid var(--text); background:var(--green); font-size:14px; font-weight:700; text-decoration:none; }
.link { font-size:14px; font-weight:600; }

/* Claude Code transcript */
.terminal { overflow:hidden; background:var(--term); color:#e6e8e1; border-radius:8px; box-shadow:0 20px 50px -25px rgba(0,0,0,.45); }
.terminal-bar { height:38px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 16px; border-bottom:1px solid #2f312a; color:#7d8076; font:11px var(--mono); }
.terminal-body { padding:26px 28px 30px; font:13px/1.7 var(--mono); }
.line { margin:0 0 4px; }
.line + .line:not(.indent), .call + .line, .line + .call { margin-top:16px; }
.line.user { padding:10px 14px; margin-bottom:18px; border:1px solid #3a3d34; border-radius:6px; color:#fff; }
.line.user b { color:#9a9d93; margin-right:8px; }
.indent { padding-left:22px; }
.dim { color:#8a8d83; }
.dot { color:#e6e8e1; margin-right:6px; }
.dot.accent { color:var(--green); }
.tool { color:#fff; font-weight:700; }
.str { color:#c9e98a; }
.call { position:relative; margin:18px -12px; padding:16px 12px 14px; border:1px solid #4d5a2a; border-radius:6px; background:#1d1f19; }
.call .tag { position:absolute; top:-10px; right:12px; padding:1px 8px; background:var(--green); color:var(--term); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; border-radius:3px; }
.reply { margin:10px 0 0 22px; padding-left:14px; border-left:2px solid #4d5a2a; }
.reply p { margin:0 0 6px; }
.reply .who { color:var(--green); font-weight:700; }
.reply code { color:#fff; }
.reply .meta { margin:10px 0 0; color:#7d8076; font-size:11px; }

/* How it works */
.steps { list-style:none; counter-reset:step; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.steps li { counter-increment:step; padding:26px 24px; background:var(--bg); }
.steps li::before { content:counter(step); display:inline-grid; place-items:center; width:26px; height:26px; margin-bottom:14px; border:1px solid var(--text); border-radius:50%; background:var(--green); font:700 12px var(--mono); }
.steps b { display:block; margin-bottom:6px; font-size:17px; }
.steps span { color:var(--muted); font-size:15px; }
.steps code { font-size:13px; color:var(--text); }

/* Install */
.install { background:var(--term); color:#f4f5f0; border-radius:8px; overflow:hidden; }
.install-title { height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid #363831; font:11px var(--mono); color:#7d8076; }
.install-title button { border:0; background:none; color:var(--green); font:inherit; cursor:pointer; }
.install pre { margin:0; padding:22px 24px; overflow:auto; font-size:13px; line-height:2; }
.note { margin:16px 0 40px; font-size:15px; }
.note code, .commands code { padding:2px 6px; background:#e8e9e3; border-radius:3px; font-size:13px; }
.commands { width:100%; margin:0 0 28px; border-collapse:collapse; font-size:15px; }
.commands td { padding:12px 0; border-top:1px solid var(--line); }
.commands td:first-child { width:48%; padding-right:16px; }
.commands td:last-child { color:var(--muted); }

footer { min-height:100px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }

@media(max-width:640px){
  section{padding:60px 0}.hero{padding-top:64px}.lead{font-size:17px}
  header nav a:not(:last-child){display:none}
  .terminal-body{padding:20px 16px;font-size:11.5px}.call{margin:16px -6px;padding:14px 8px 12px}.reply{margin-left:8px}
  .steps{grid-template-columns:1fr}
  .install pre{padding:18px 16px;font-size:10.5px}
  .commands td{display:block;padding:4px 0}.commands td:first-child{width:auto;padding-top:14px}.commands td:last-child{border-top:0}
  footer{flex-direction:column;justify-content:center;gap:8px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}