:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f8f7ff;
  background: #100d1e;
  line-height: 1.6;
}

* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 80% 0, #33216c 0, transparent 32rem), #100d1e; }
a { color: #c9b8ff; }
a:focus-visible { outline: .2rem solid #e2c15f; outline-offset: .2rem; }
.skip-link { position: fixed; z-index: 20; top: .75rem; left: .75rem; padding: .75rem 1rem; color: #100d1e; background: #f8f7ff; border-radius: .6rem; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; top: 0; z-index: 10; width: 100%; border-bottom: 1px solid #ffffff20; background: #100d1ee8; backdrop-filter: blur(18px); }
.header-inner { width: min(calc(100% - 2rem), 70rem); min-height: 4.25rem; margin-inline: auto; display: flex; align-items: center; gap: .8rem; }
.brand { display: inline-flex; align-items: center; gap: .72rem; margin-right: auto; color: #fff; font-weight: 800; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.brand-mark { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: .65rem; color: #140e25; background: #c9b8ff; box-shadow: 0 .5rem 1.8rem #aa8dff40; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem; }
.main-nav, .language-nav { display: flex; align-items: center; gap: .25rem; }
.main-nav a, .language-nav a { padding: .42rem .68rem; color: #aaa3bd; border-radius: .55rem; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.main-nav a:hover, .language-nav a:hover { color: #fff; background: #ffffff10; }
.github-link { display: inline-flex; min-height: 2.3rem; align-items: center; gap: .48rem; padding: .38rem .68rem; color: #aaa3bd; background: #ffffff08; border: 1px solid #ffffff20; border-radius: .65rem; font-size: .86rem; font-weight: 700; text-decoration: none; }
.github-link img { width: 1.18rem; height: 1.18rem; opacity: .8; filter: invert(1); }
.github-link:hover { color: #fff; background: #ffffff12; border-color: #c9b8ff80; }
.github-link:hover img { opacity: 1; }
.language-nav { padding-left: .65rem; border-left: 1px solid #ffffff20; }
.language-nav a[aria-current="page"] { color: #fff; background: #ffffff0d; box-shadow: inset 0 0 0 1px #ffffff20; }
main { max-width: 70rem; margin: auto; padding: 0 1.25rem 5rem; }
section { padding: 5rem 0; border-bottom: 1px solid #ffffff18; }
.hero { min-height: 32rem; display: grid; align-content: center; }
.eyebrow { color: #aa8dff; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2 { line-height: 1.05; letter-spacing: -.035em; }
h1 { max-width: 13ch; font-size: clamp(3rem, 8vw, 6.5rem); margin: .35rem 0 1rem; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.lede { max-width: 46rem; color: #c9c3da; font-size: 1.25rem; }
.signal { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.signal span, .signal b { padding: .7rem 1rem; border: 1px solid #ffffff30; border-radius: 999px; background: #ffffff0d; }
.signal b { color: #140e25; background: #c9b8ff; }
.signal i { font-style: normal; font-size: 1.5rem; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 0; list-style-position: inside; }
.steps li, article, .warning { border: 1px solid #ffffff20; border-radius: 1rem; padding: 1.25rem; background: #ffffff08; }
pre { overflow-x: auto; padding: 1rem; border-radius: .8rem; background: #070510; border: 1px solid #ffffff20; }
.warning { border-color: #e2c15f70; background: #e2c15f12; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
article h3 { margin-top: 0; }
article code { color: #d9ccff; }
footer { padding: 2rem 1.25rem; text-align: center; color: #aaa3bd; }
@media (max-width: 52rem) {
  .main-nav { display: none; }
}
@media (max-width: 44rem) {
  .header-inner { gap: .4rem; }
  .brand-name { display: none; }
  .language-nav { margin-left: 0; padding-left: .4rem; }
  .github-link { width: 2.35rem; padding: .4rem; justify-content: center; }
  .github-link-label { display: none; }
  .steps, .cards { grid-template-columns: 1fr; }
  section { padding: 3.5rem 0; }
}

:root{color-scheme:light dark}
@media (prefers-color-scheme:light){
  :root{color:#17132a;background:#faf9ff}
  body{background:radial-gradient(circle at 80% 0,#e7ddff 0,transparent 32rem),#faf9ff}
  a{color:#6f4fd8}
  .skip-link{color:#faf9ff;background:#17132a}
  .site-header{border-bottom-color:#17132a1f;background:#faf9ffe8}
  .brand{color:#17132a}
  .brand-mark{color:#faf9ff;background:#6f4fd8}
  .main-nav a,.language-nav a{color:#5a5370}
  .main-nav a:hover,.language-nav a:hover{color:#17132a;background:#17132a0d}
  .github-link{color:#5a5370;background:#17132a08;border-color:#17132a1f}
  .github-link:hover{color:#17132a;background:#17132a12;border-color:#6f4fd880}
  .language-nav{border-left-color:#17132a1f}
  .language-nav a[aria-current="page"]{color:#17132a;background:#17132a0d}
  section{border-bottom-color:#17132a14}
  .eyebrow{color:#6f4fd8}
  .lede{color:#4a4460}
  .signal span,.signal b{border-color:#17132a26;background:#17132a0a}
  .signal b{color:#faf9ff;background:#6f4fd8}
  .steps li,article,.warning{border-color:#17132a1a;background:#17132a06}
  pre{background:#f2f0fa;border-color:#17132a1a}
  .warning{border-color:#b8902a70;background:#f8e9b812}
  article code{color:#4a3a8a}
}