:root { color-scheme: light; }
html.dark { color-scheme: dark; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: #7c5cff; color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124,92,255,.38); border: 3px solid transparent; border-radius: 99px; background-clip: content-box; }

.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 100; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.grad-text {
  color: transparent;
  background: linear-gradient(100deg,#957eff 0%,#7c5cff 32%,#16d9e3 74%,#7bf3f0 100%);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradient-shift 9s ease infinite;
}
.grid-bg {
  background-image: linear-gradient(to right,rgba(120,130,180,.13) 1px,transparent 1px),linear-gradient(to bottom,rgba(120,130,180,.13) 1px,transparent 1px);
  background-size: 58px 58px;
}
.dark .grid-bg {
  background-image: linear-gradient(to right,rgba(160,175,255,.075) 1px,transparent 1px),linear-gradient(to bottom,rgba(160,175,255,.075) 1px,transparent 1px);
}
.dot-bg { background-image: radial-gradient(circle,rgba(124,92,255,.22) 1px,transparent 1px); background-size: 19px 19px; }
.mask-fade { -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 45%,#000 32%,transparent 100%); mask-image: radial-gradient(ellipse 78% 72% at 50% 45%,#000 32%,transparent 100%); }
.mask-x { -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.noise::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.32; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E");
}
.hairline { position: relative; }
.hairline::after {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg,rgba(124,92,255,.75),rgba(22,217,227,.28) 42%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.65;
}
.spot { position: relative; isolation: isolate; }
.spot::before {
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(124,92,255,.21),transparent 62%);
  opacity:0; transition:opacity .3s ease;
}
.dark .spot::before { background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(124,92,255,.3),transparent 62%); }
.spot:hover::before { opacity:1; }
.spot > * { position:relative; z-index:1; }
.rv { opacity:1; transform:none; }
.js .rv { opacity:0; transform:translateY(24px); transition:opacity .72s cubic-bezier(.2,.7,.25,1),transform .72s cubic-bezier(.2,.7,.25,1); }
.js .rv.in { opacity:1; transform:none; }
.nav-current { color:#7c5cff !important; }
.nav-current::after { content:""; position:absolute; left:.9rem; right:.9rem; bottom:-19px; height:2px; border-radius:99px; background:linear-gradient(90deg,#7c5cff,#16d9e3); box-shadow:0 0 16px rgba(124,92,255,.8); }
.tab-active { color:#fff !important; background:linear-gradient(90deg,#6941f0,#7c5cff); box-shadow:0 10px 28px -15px rgba(124,92,255,.95); }
.acc-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.3,.8,.3,1); }
.acc.open .acc-body { grid-template-rows:1fr; }
.acc-inner { overflow:hidden; }
.acc.open .acc-icon { transform:rotate(45deg); }
.network-line { stroke-dasharray:8 10; animation:dash 14s linear infinite; }
.pulse-ring { transform-box:fill-box; transform-origin:center; animation:pulse-ring 2.8s ease-out infinite; }
.metric-line { stroke-dasharray:900; stroke-dashoffset:900; transition:stroke-dashoffset 1.8s ease; }
.in .metric-line { stroke-dashoffset:0; }
.article-card[hidden] { display:none; }
.console-caret { animation:blink 1.05s step-end infinite; }
.auth-input { transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease; }
.auth-input:focus { border-color:#7c5cff; box-shadow:0 0 0 4px rgba(124,92,255,.12); outline:none; }
.auth-input[aria-invalid="true"] { border-color:#ff6b4a; box-shadow:0 0 0 4px rgba(255,107,74,.1); }
.auth-status[data-state="success"] { color:#0f9f87; background:rgba(22,217,227,.08); border-color:rgba(22,217,227,.24); }
.auth-status[data-state="error"] { color:#e65638; background:rgba(255,107,74,.08); border-color:rgba(255,107,74,.24); }
.dark .auth-status[data-state="success"] { color:#7bf3f0; }
.dark .auth-status[data-state="error"] { color:#ff9e7a; }
.strength-segment { background:rgba(148,163,184,.22); transition:background-color .2s ease,transform .2s ease; }
.strength-segment.is-active { background:linear-gradient(90deg,#7c5cff,#16d9e3); transform:scaleY(1.2); }

@keyframes gradient-shift { 0%,100%{background-position:0 50%}50%{background-position:100% 50%} }
@keyframes floaty { 0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)} }
@keyframes floaty-slow { 0%,100%{transform:translate(0,0)}50%{transform:translate(10px,17px)} }
@keyframes dash { to{stroke-dashoffset:-180} }
@keyframes pulse-ring { 0%{transform:scale(.55);opacity:.9}100%{transform:scale(2.8);opacity:0} }
@keyframes blink { 0%,49%{opacity:1}50%,100%{opacity:0} }
@keyframes marquee { to{transform:translateX(-50%)} }
@keyframes scan { from{transform:translateY(-120%)}to{transform:translateY(900%)} }
.animate-floaty { animation:floaty 6s ease-in-out infinite; }
.animate-floaty-slow { animation:floaty-slow 11s ease-in-out infinite; }
.animate-marquee { animation:marquee 38s linear infinite; }
.animate-scan { animation:scan 5s linear infinite; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}