:root{color-scheme:light;--bg:#fbf6f1;--ink:#2a211b;--soft:#51443a;--muted:#8d8076;--card:#fff;--line:#e8dccf;--accent:#c4553f;--accent-ink:#fff;--coral:#e48a7a;--blue:#4f8eb3;--yellow:#eab65d;--code:#201a16;--code-ink:#f2e9e1}
:root[data-theme=dark]{color-scheme:dark;--bg:#141110;--ink:#f4ece5;--soft:#cdbfb3;--muted:#8f8277;--card:#1d1816;--line:#33292a;--accent:#e48a7a;--accent-ink:#1f0e0a;--coral:#e48a7a;--blue:#6fb0d6;--yellow:#eab65d;--code:#0e0c0b;--code-ink:#f2e9e1}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--soft);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
main{max-width:46rem;margin:0 auto;padding:5rem 16px 4rem}
a{color:var(--blue)}
code{font:.9em ui-monospace,SFMono-Regular,Menlo,monospace;background:color-mix(in srgb,var(--muted) 18%,transparent);padding:.1em .35em;border-radius:4px}
.hero{margin-bottom:3.5rem}
.logo{margin:0;font:clamp(.62rem,2.6vw,1.05rem)/1.05 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden}
.logo .f{color:var(--coral)}.logo .s{color:var(--yellow)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.subtitle{font-size:1.3rem;margin:1rem 0 0;color:var(--soft)}
.eyebrow{font-size:.8rem;letter-spacing:.18em;color:var(--muted);margin:0 0 1rem;font-weight:600}
section{margin-bottom:3.5rem}
.cmd{display:flex;align-items:center;gap:.75rem;background:var(--code);color:var(--code-ink);border-radius:12px;padding:.9rem .9rem .9rem 1.1rem}
.cmd code{flex:1;min-width:0;background:none;padding:0;color:inherit;font-size:.95rem;overflow-x:auto;white-space:nowrap}
.copy{flex:none;border:0;border-radius:8px;padding:.5rem .9rem;background:var(--accent);color:var(--accent-ink);font:600 .85rem inherit;font-family:inherit;cursor:pointer}
.copy:hover{filter:brightness(1.08)}
.note{font-size:.9rem;color:var(--muted);margin:.75rem 0 0}
.why{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.why li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;display:grid;gap:.15rem}
.why strong{color:var(--ink);font-size:1.05rem}
.why b{color:var(--ink)}
.why li{border-left:3px solid var(--coral)}
.why li:nth-child(3n+2){border-left-color:var(--blue)}.why li:nth-child(3n){border-left-color:var(--yellow)}
footer{color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);padding-top:1.5rem}
.theme-toggle{position:fixed;top:1rem;right:1rem;width:2.6rem;height:2.6rem;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer;padding:0}
.theme-toggle svg{width:1.15rem;height:1.15rem}
:root[data-theme=light] .icon-sun,:root[data-theme=dark] .icon-moon{display:none}
@media (max-width:520px){.cmd{flex-wrap:wrap}.copy{width:100%}}