:root {
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --bg:#faf7fa; --panel:#ffffff; --fg:#1b1020; --muted:#6c6272; --line:#e7dfe9;
  --accent:#6b2a73; --mint:#14a37f; --key:#6b2a73; --str:#0d7f63; --on-accent:#ffffff;
  --dot:rgba(107,42,115,.13);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#120a14; --panel:#1a1020; --fg:#f2eaf4; --muted:#a395a8; --line:#2d1f33; --accent:#d6a2e0; --mint:#5fd0a5; --key:#d6a2e0; --str:#5fd0a5; --on-accent:#120a14; --dot:rgba(214,162,224,.10); }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.7 var(--sans); min-height:100vh; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(var(--dot) 1px, transparent 1px); background-size:26px 26px; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(to bottom, transparent 0, var(--bg) 85%); pointer-events:none; }
.wrap { width:100%; max-width:1000px; margin:0 auto; padding:0 24px; }
a { color:var(--accent); }
::selection { background:var(--mint); color:#04150f; }

nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:26px 0; flex-wrap:wrap; font-family:var(--mono); font-size:.82rem; }
.brand { font-weight:600; color:var(--fg); text-decoration:none; letter-spacing:-.01em; }
.brand i { font-style:normal; color:var(--mint); }
.brand::after { content:"▌"; color:var(--mint); margin-left:3px; animation:blink 1.1s steps(1) infinite; }
nav .links { display:flex; gap:20px; flex-wrap:wrap; }
nav .links a { color:var(--muted); text-decoration:none; transition:color .2s; }
nav .links a:hover { color:var(--fg); }
nav .links b { color:var(--accent); font-weight:500; }
main { flex:1; }

.hero { padding:72px 0 56px; }
.eyebrow { font-family:var(--mono); font-size:.85rem; color:var(--muted); margin:0 0 22px; min-height:1.7em; }
.eyebrow .p { color:var(--mint); }
.eyebrow .cur { display:inline-block; width:.55em; height:1em; background:var(--mint); vertical-align:-2px; margin-left:3px; animation:blink 1.1s steps(1) infinite; }
h1 { font-size:clamp(2.4rem, 7.2vw, 4.6rem); line-height:1.03; letter-spacing:-.04em; font-weight:700; margin:0 0 22px; max-width:14ch; }
h1 em { font-style:normal; color:var(--accent); }
.hero p.lead { font-size:1.15rem; color:var(--muted); max-width:52ch; margin:0 0 30px; }
.cta { display:inline-flex; gap:10px; align-items:center; font-family:var(--mono); font-size:.88rem; background:var(--fg); color:var(--bg); padding:12px 18px; border-radius:8px; text-decoration:none; transition:transform .2s, box-shadow .2s; }
.cta:hover { transform:translateY(-2px); box-shadow:0 10px 28px -12px var(--accent); }
.cta span { color:var(--mint); }

h2.sec { font-family:var(--mono); font-size:.78rem; font-weight:500; color:var(--muted); letter-spacing:.04em; margin:0 0 18px; }
h2.sec::before { content:"// "; color:var(--mint); }
section { scroll-margin-top:16px; padding-bottom:72px; }

.term { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 24px 60px -36px var(--accent); }
.term .bar { display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.76rem; color:var(--muted); }
.term .bar i { width:10px; height:10px; border-radius:50%; background:var(--line); display:inline-block; }
.term .bar span { margin-left:8px; }
.term pre { margin:0; padding:20px 22px; overflow-x:auto; font:400 .88rem/1.85 var(--mono); }
.term .k { color:var(--key); } .term .s { color:var(--str); } .term .d { color:var(--muted); }
.term a { color:var(--str); }

.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:14px; }
.card { position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:24px; min-height:176px; display:flex; flex-direction:column;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card::before { content:""; position:absolute; inset:0; background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--mint) 18%, transparent), transparent 62%); opacity:0; transition:opacity .3s; pointer-events:none; }
.card:hover { transform:translateY(-4px); border-color:var(--mint); }
.card:hover::before { opacity:1; }
.card .tag { position:relative; font-family:var(--mono); font-size:.76rem; color:var(--mint); margin-bottom:auto; padding-bottom:28px; }
.card h3 { position:relative; margin:0 0 6px; font-size:1.1rem; letter-spacing:-.01em; }
.card p { position:relative; margin:0; color:var(--muted); font-size:.95rem; line-height:1.55; }
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease, border-color .25s ease; }
.reveal.in { opacity:1; transform:none; }
.reveal.in:hover { transform:translateY(-4px); }

.about { max-width:60ch; }
.about p { color:var(--muted); margin:0 0 14px; }

.contact dl { display:grid; grid-template-columns:max-content 1fr; gap:0; margin:0; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.contact dt, .contact dd { padding:13px 20px; border-bottom:1px solid var(--line); margin:0; }
.contact dt { font-family:var(--mono); font-size:.8rem; color:var(--mint); padding-right:34px; }
.contact dd { font-size:.95rem; }
.contact dt:last-of-type, .contact dd:last-of-type { border-bottom:0; }
.contact small { color:var(--muted); }
@media (max-width:560px) { .contact dl { grid-template-columns:1fr; } .contact dt { border-bottom:0; padding-bottom:0; } }

footer { border-top:1px solid var(--line); padding:26px 0 34px; font-size:.84rem; color:var(--muted); background:var(--bg); }
footer .wrap { display:flex; flex-wrap:wrap; gap:14px 36px; justify-content:space-between; }
footer p { margin:2px 0; }
footer strong { color:var(--fg); font-weight:600; }
footer a { color:var(--muted); text-decoration:none; }
footer a:hover { color:var(--fg); }
:focus-visible { outline:2px solid var(--mint); outline-offset:3px; border-radius:4px; }

.doc { padding:44px 0 72px; max-width:68ch; }
.doc h1 { font-size:clamp(1.9rem, 5vw, 2.6rem); max-width:none; margin-bottom:8px; letter-spacing:-.03em; }
.doc .upd { color:var(--muted); margin:0 0 26px; font:400 .82rem var(--mono); }
.doc h2 { font-size:1.1rem; margin:30px 0 6px; letter-spacing:-.01em; }
.doc p, .doc li { color:var(--muted); }

@keyframes blink { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .brand::after, .eyebrow .cur { animation:none; }
  .card, .card::before, .reveal, .cta { transition:none; }
  .reveal { opacity:1; transform:none; }
}