:root {
  --bg: #f4f5fa; --surface: rgba(255, 255, 255, .72); --ink: #0e1220; --ink-2: #555c70; --rule: rgba(14, 18, 32, .09);
  --a1: #5b4cf0; --a2: #0fb5a6; --glow1: rgba(91, 76, 240, .22); --glow2: rgba(15, 181, 166, .2); --link: #4a3de0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0a0c13; --surface: rgba(22, 25, 38, .7); --ink: #eef0f7; --ink-2: #9aa1b5; --rule: rgba(255, 255, 255, .09);
  --a1: #8b7dff; --a2: #3ee0cf; --glow1: rgba(110, 92, 255, .28); --glow2: rgba(30, 210, 190, .18); --link: #a99fff; color-scheme: dark; } }
[data-theme="dark"]:root {
  --bg: #0a0c13; --surface: rgba(22, 25, 38, .7); --ink: #eef0f7; --ink-2: #9aa1b5; --rule: rgba(255, 255, 255, .09);
  --a1: #8b7dff; --a2: #3ee0cf; --glow1: rgba(110, 92, 255, .28); --glow2: rgba(30, 210, 190, .18); --link: #a99fff; color-scheme: dark; }

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.65 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; }
body::before, body::after { content: ""; position: fixed; z-index: -1; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(70px); pointer-events: none; }
body::before { top: -28vmax; left: -18vmax; background: radial-gradient(circle, var(--glow1), transparent 65%); }
body::after { bottom: -32vmax; right: -20vmax; background: radial-gradient(circle, var(--glow2), transparent 65%); }

.wrap { max-width: 44rem; margin: 0 auto; padding-inline: 1.25rem; }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 2; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid var(--rule); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; flex-wrap: wrap; }
.mark { display: inline-flex; align-items: center; gap: .55rem; font: 700 1.1rem/1 "Bricolage Grotesque", "Inter", system-ui, sans-serif; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.mark i { width: 1.35rem; height: 1.35rem; border-radius: .45rem; background: conic-gradient(from 210deg, var(--a1), var(--a2), var(--a1)); box-shadow: 0 0 0 1px var(--rule), 0 6px 18px var(--glow1); }
nav { display: flex; gap: .3rem; font-size: .9rem; }
nav a { color: var(--ink-2); text-decoration: none; padding: .35rem .75rem; border-radius: 999px; transition: background .2s, color .2s; }
nav a:hover { color: var(--ink); background: var(--rule); }
nav a[aria-current] { color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--rule); }

main { padding-block: 3rem 1rem; }
.hero { padding-block: 3rem 1rem; }
.pill { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule); background: var(--surface); padding: .3rem .75rem; border-radius: 999px; }
.pill::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--a2); box-shadow: 0 0 10px var(--a2); }
h1 { font: 700 clamp(2.4rem, 7vw, 4.25rem)/1.02 "Bricolage Grotesque", "Inter", system-ui, sans-serif; letter-spacing: -.035em; margin: 1.1rem 0 1rem; text-wrap: balance; }
.grad { background: linear-gradient(100deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: 1.15rem; color: var(--ink-2); max-width: 34rem; margin: 0 0 1rem; } .lede + .cards, .hero .lede:last-of-type { margin-bottom: 2.5rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.card { display: block; padding: 1.25rem 1.35rem; border-radius: 1rem; background: var(--surface); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px var(--glow1); }
.card b { display: block; font: 600 1.05rem/1.3 "Bricolage Grotesque", "Inter", system-ui, sans-serif; margin-bottom: .25rem; }
.card span { color: var(--ink-2); font-size: .92rem; } .card b::after { content: " →"; color: var(--a1); }

.doc { background: var(--surface); border: 1px solid var(--rule); border-radius: 1.25rem; padding: clamp(1.5rem, 5vw, 2.75rem); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.doc h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-top: 0; }
.meta { color: var(--ink-2); font-size: .85rem; margin: 0 0 1.75rem; }
.doc p { margin: 0 0 1rem; max-width: 36rem; }
a { color: var(--link); text-underline-offset: .2em; }
footer { color: var(--ink-2); font-size: .85rem; padding-block: 2.5rem 3rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
footer a { color: var(--ink-2); }