:root { --bg:#05060a; --ink:#e9ecf5; --mute:#a3aabd; --line:rgba(255,255,255,.08); --glass:rgba(18,21,32,.6); --acc:#6fd3ff; --acc2:#b88bff;
  --ui:"Inter Tight",system-ui,sans-serif; --disp:"Instrument Serif",Georgia,serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; }
* { box-sizing:border-box } html { color-scheme:dark; scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--ui); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden }
a { color:var(--acc) } code { font-family:var(--mono); font-size:.9em; background:rgba(255,255,255,.06); padding:1px 6px; border-radius:5px }
.aurora { position:fixed; inset:-20vmax; z-index:0; pointer-events:none; filter:blur(90px); opacity:.5 }
.aurora i { position:absolute; width:60vmax; height:60vmax; border-radius:50%; animation:drift 30s ease-in-out infinite alternate }
.aurora i:nth-child(1){ left:5%; top:0; background:radial-gradient(closest-side,rgba(60,140,255,.5),transparent) }
.aurora i:nth-child(2){ right:0; top:30%; background:radial-gradient(closest-side,rgba(150,90,255,.4),transparent); animation-delay:-10s }
.aurora i:nth-child(3){ left:30%; bottom:-10%; background:radial-gradient(closest-side,rgba(40,200,200,.3),transparent); animation-delay:-20s }
@keyframes drift { to { transform:translate(6vmax,-5vmax) scale(1.1) } }
.nav, main, .foot { position:relative; z-index:1 }
.nav { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px clamp(16px,4vw,48px); flex-wrap:wrap }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:600 }
.mark { display:grid; grid-template-columns:1fr 1fr; gap:3px; width:24px; height:24px }
.mark b { border-radius:3px; background:var(--acc) } .mark b:nth-child(2){opacity:.55} .mark b:nth-child(3){opacity:.35} .mark b:nth-child(4){opacity:.85}
.nav nav { display:flex; gap:18px; flex-wrap:wrap } .nav nav a { color:var(--mute); text-decoration:none; font-size:15px } .nav nav a:hover { color:var(--ink) }
.nav .gh { color:var(--ink)!important; border:1px solid var(--line); padding:4px 12px; border-radius:99px }
main { max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,32px) }
.hero { text-align:center; padding:64px 0 28px }
.kicker { font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--mute) }
h1 { font-family:var(--disp); font-weight:400; font-size:clamp(44px,7vw,92px); line-height:1; margin:.2em 0 .3em; letter-spacing:-.01em }
h1 em { background:linear-gradient(90deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent }
.lede { max-width:720px; margin:0 auto; color:#c8cddb; font-size:clamp(17px,1.6vw,20px) }
.cta { display:flex; gap:12px; justify-content:center; margin:28px 0 8px; flex-wrap:wrap }
.btn { display:inline-block; padding:12px 22px; border-radius:12px; font-weight:600; text-decoration:none; color:#05060a; background:linear-gradient(90deg,var(--acc),var(--acc2)) }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,.2) }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:820px; margin:36px auto 0 }
.stats div { background:var(--glass); border:1px solid var(--line); border-radius:14px; padding:12px }
.stats dt { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--mute) }
.stats dd { margin:2px 0 0; font-family:var(--mono); font-size:28px; font-weight:500 } .stats small { font-size:13px; color:var(--mute); margin-left:3px }
.demo { margin:40px 0 }
.frame { border-radius:20px; padding:2px; background:linear-gradient(120deg,rgba(111,211,255,.7),rgba(184,139,255,.5),rgba(111,211,255,.15)); box-shadow:0 40px 100px -40px rgba(80,140,255,.6) }
.frame video { display:block; width:100%; border-radius:18px; background:#000; aspect-ratio:16/9 }
.cap { text-align:center; color:var(--mute); font-size:14px }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:56px 0 }
.grid3 article, .sets li { background:var(--glass); border:1px solid var(--line); border-radius:16px; padding:20px 22px }
.grid3 h3 { margin:0 0 6px; font-size:19px } .grid3 p { margin:0; color:#c3c8d6; font-size:15.5px }
.shots { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.shots figure { margin:0; background:var(--glass); border:1px solid var(--line); border-radius:16px; overflow:hidden }
.shots img { display:block; width:100%; height:auto } .shots figcaption { padding:10px 14px; font-size:14px; color:var(--mute) } .shots b { color:var(--ink) }
h2 { font-family:var(--disp); font-weight:400; font-size:clamp(32px,4vw,48px); margin:0 0 6px; text-align:center }
.sub { text-align:center; color:var(--mute); max-width:720px; margin:0 auto 22px }
.sets, .start { margin:72px 0 }
.sets ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:12px }
.sets li { flex:0 1 340px }
.sets li { border-left:3px solid hsl(var(--h) 90% 65%) } .sets li b { display:block; font-size:17px } .sets li span { color:var(--mute); font-size:15px }
pre { background:rgba(0,0,0,.45); border:1px solid var(--line); border-radius:14px; padding:18px 22px; overflow-x:auto; max-width:760px; margin:0 auto 18px; font-size:15px; line-height:1.7 }
pre code { background:none; padding:0 } pre .c { color:#6b728a }
.foot { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:28px clamp(16px,4vw,48px) 40px; color:var(--mute); font-size:14px; border-top:1px solid var(--line); margin-top:40px }
@media (max-width:820px){ .stats{grid-template-columns:1fr 1fr} .grid3,.shots{grid-template-columns:1fr} .nav nav a:not(.gh){display:none} }
@media (prefers-reduced-motion:reduce){ .aurora i{animation:none} }

.hero .disclaim { font-size: 13px; color: var(--mute, #9aa1b5); margin: -6px 0 22px; }