:root{
  --bg0:#070a12;
  --bg1:#0b1220;
  --card:#0f1a2f;
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.10);
  --brand1:var(--brand,#22d3ee);
  --brand2:var(--brand-2,#a78bfa);
  --brand3:var(--accent,#34d399);
  --warn:#fbbf24;
  --danger:#fb7185;
  --shadow:0 18px 45px rgba(0,0,0,.45);
  --shadow2:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --radius2:24px;
}
html{scroll-behavior:smooth}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  background:radial-gradient(1200px 700px at 12% 8%, rgba(34,211,238,.18), transparent 55%),
             radial-gradient(1100px 700px at 80% 10%, rgba(167,139,250,.18), transparent 55%),
             radial-gradient(900px 650px at 60% 90%, rgba(52,211,153,.14), transparent 60%),
             linear-gradient(180deg, var(--bg0), var(--bg1) 50%, #060815);
  color:#eaf0ff;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.6rem 1rem;background:#fff;color:#000;z-index:80;border-radius:12px}
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow2);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:var(--radius2);
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
}
.btn{
  border-radius:999px;
  padding:12px 16px;
  font-weight:700;
  letter-spacing:.2px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
  will-change:transform;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{
  background:linear-gradient(90deg, rgba(34,211,238,.95), rgba(167,139,250,.95));
  box-shadow:0 14px 30px rgba(34,211,238,.14), 0 16px 40px rgba(167,139,250,.10);
  color:#06101a;
  border:1px solid rgba(255,255,255,.18);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 40px rgba(34,211,238,.18),0 18px 46px rgba(167,139,250,.14)}
.btn-ghost{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#eaf0ff;
}
.btn-ghost:hover{background:rgba(255,255,255,.09);transform:translateY(-1px)}
.muted{color:var(--muted)}
.line{border-color:var(--line)}
.badge,.pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.22);font-weight:700;color:#f2f6ff;
}
.badge-dot,.spark{width:9px;height:9px;border-radius:999px;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.15)),linear-gradient(180deg, var(--brand1), var(--brand2));box-shadow:0 0 0 4px rgba(34,211,238,.12),0 0 22px rgba(34,211,238,.28)}
.grid-fade{position:absolute;inset:-1px;background-image:linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 60% 55% at 50% 35%, rgba(0,0,0,1) 0%, rgba(0,0,0,.65) 55%, transparent 78%);opacity:.22;pointer-events:none}
.nav-blur{background:rgba(7,10,18,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease, transform .7s ease}
.reveal.in,.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal.delay-1{transition-delay:.08s}.reveal.delay-2{transition-delay:.16s}.reveal.delay-3{transition-delay:.24s}.reveal.delay-4{transition-delay:.32s}
.field{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 12px;color:#eef3ff;outline:none;transition:border-color .18s ease, box-shadow .18s ease, background .18s ease}
.field:focus{border-color:rgba(34,211,238,.55);box-shadow:0 0 0 4px rgba(34,211,238,.12);background:rgba(255,255,255,.06)}
.help{font-size:12px;color:rgba(255,255,255,.62)}
.inline-link{color:#9deaff;text-decoration:underline;text-underline-offset:2px}
.cnc{width:100%;aspect-ratio:16/10;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));box-shadow:var(--shadow);position:relative;overflow:hidden}
.cnc::before{content:"";position:absolute;inset:-60px;background:radial-gradient(circle at 30% 20%, rgba(34,211,238,.26), transparent 55%),radial-gradient(circle at 70% 30%, rgba(167,139,250,.24), transparent 58%),radial-gradient(circle at 60% 80%, rgba(52,211,153,.16), transparent 60%);filter:blur(6px);opacity:.95}
.cnc .frame{position:absolute;inset:14px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(6,10,18,.34);overflow:hidden}
.cnc .frame:before{content:"";position:absolute;left:-25%;top:-35%;width:60%;height:120%;background:linear-gradient(110deg, transparent 15%, rgba(255,255,255,.14) 40%, transparent 62%);transform:rotate(10deg);opacity:.35;animation:sweep 5.2s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-10%) rotate(10deg);opacity:.10}30%{opacity:.38}60%{opacity:.18}100%{transform:translateX(135%) rotate(10deg);opacity:.10}}
.cnc .hud{position:absolute;inset:0;display:flex;align-items:stretch;gap:12px;padding:14px}
.cnc .panel{flex:0 0 38%;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);padding:12px}
.cnc .viewport{flex:1;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.34));position:relative;overflow:hidden}
.cnc .axis{position:absolute;left:16px;top:16px;display:flex;gap:8px;align-items:center;font-size:12px;color:rgba(255,255,255,.78);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);padding:6px 10px;border-radius:999px}
.path{position:absolute;inset:0}.path svg{width:100%;height:100%}.path .cut{stroke:rgba(34,211,238,.8);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-dasharray:6 10;animation:dash 3.2s linear infinite;filter:drop-shadow(0 0 10px rgba(34,211,238,.22))}.path .cut2{stroke:rgba(167,139,250,.78);stroke-width:2.0;fill:none;stroke-linecap:round;stroke-dasharray:4 12;animation:dash 2.6s linear infinite reverse;filter:drop-shadow(0 0 10px rgba(167,139,250,.18))}@keyframes dash{to{stroke-dashoffset:-180}}
.kbd{font-size:12px;padding:2px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.25);color:rgba(255,255,255,.85)}
.form-message{display:none;margin-top:1rem;padding:.95rem 1rem;border-radius:14px;font-size:.95rem;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.form-message.is-visible{display:block}.form-message.success{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.12);color:#d1fae5}.form-message.error{border-color:rgba(251,113,133,.35);background:rgba(251,113,133,.12);color:#ffe4ea}
.cookie-banner{position:fixed;right:1rem;bottom:1rem;z-index:70;max-width:520px;padding:1rem 1rem;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(12,18,32,.96), rgba(9,14,24,.94));box-shadow:var(--shadow);display:none;gap:1rem;flex-direction:column}
.cookie-banner.is-visible{display:flex}.cookie-text{font-size:.92rem;color:rgba(255,255,255,.82);line-height:1.6}.cookie-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.docs-main{padding-top:7rem;padding-bottom:4rem}.doc-card{max-width:980px;margin:0 auto;padding:2rem;border-radius:24px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));box-shadow:var(--shadow2)}.doc-card h1{font-size:2rem;font-weight:900;margin:.4rem 0 1rem}.doc-card h2,.doc-card h3{font-weight:800;margin-top:1.4rem;margin-bottom:.6rem}.doc-card p,.doc-card li{color:rgba(255,255,255,.82);line-height:1.75}.doc-card ul{padding-left:1.2rem}.doc-meta{margin-bottom:1rem;color:rgba(255,255,255,.62);font-size:.9rem}
@media (max-width: 640px){.cnc .hud{flex-direction:column}.cnc .panel{flex-basis:auto}.cookie-banner{left:1rem;right:1rem;max-width:none}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.reveal{transition:none;opacity:1;transform:none}.cnc .frame:before,.path .cut,.path .cut2{animation:none}.btn{transition:none}}