:root{
  --bg:#05070d;
  --ink:#f7f9ff;
  --muted:#aeb8d7;
  --blue:#6aa8ff;
  --violet:#8a7dff;
  --cyan:#6be4ff;
  --line:rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}
.shaal-app{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 46%,#0b1022 0%,#05070d 58%,#020309 100%)}
.shaal-bg,.shaal-vignette,.shaal-grid,.shaal-scan,.shaal-noise{position:absolute;inset:0;pointer-events:none}
#shaal-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.82}
.shaal-grid{
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at center,rgba(0,0,0,.8),transparent 76%);
  opacity:.32;
  transform:perspective(900px) rotateX(60deg) scale(1.65) translateY(22%);
  transform-origin:center 60%;
  animation:gridFloat 16s ease-in-out infinite alternate;
}
.shaal-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.22;mix-blend-mode:screen}
.shaal-glow-a{width:42vw;height:42vw;min-width:360px;min-height:360px;left:-8vw;top:-12vw;background:radial-gradient(circle,#507fff 0%,transparent 68%);animation:glowA 14s ease-in-out infinite alternate}
.shaal-glow-b{width:38vw;height:38vw;min-width:320px;min-height:320px;right:-10vw;bottom:-16vw;background:radial-gradient(circle,#6b5cff 0%,transparent 68%);animation:glowB 18s ease-in-out infinite alternate}
.shaal-scan{background:linear-gradient(to bottom,transparent 0%,rgba(107,228,255,.018) 50%,transparent 100%);transform:translateY(-100%);animation:scan 9s linear infinite}
.shaal-vignette{background:radial-gradient(circle at center,transparent 30%,rgba(0,0,0,.68) 100%);z-index:3}
.shaal-stage{position:relative;z-index:5;display:grid;place-items:center;min-height:100svh;padding:28px}
.shaal-mark{position:relative;display:inline-flex;align-items:center;justify-content:center;transform:translateY(-1vh);animation:enter .9s cubic-bezier(.16,1,.3,1) both}
.shaal-wordmark{
  position:relative;
  display:inline-block;
  font-size:clamp(58px,10vw,148px);
  line-height:.92;
  letter-spacing:-.065em;
  font-weight:760;
  color:var(--ink);
  text-shadow:0 0 24px rgba(106,168,255,.08),0 10px 50px rgba(0,0,0,.46);
  user-select:none;
}
.shaal-dot{color:var(--blue);text-shadow:0 0 24px rgba(106,168,255,.54)}
.shaal-tld{font-weight:520;color:#dce5ff}
.shaal-wordmark::before{
  content:"";
  position:absolute;
  left:2%;right:2%;bottom:-19px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(106,168,255,.7),rgba(138,125,255,.7),transparent);
  box-shadow:0 0 18px rgba(106,168,255,.44);
  transform:scaleX(.15);
  opacity:.35;
  animation:linePulse 5.4s ease-in-out infinite;
}
.shaal-cursor{width:4px;height:clamp(44px,7vw,92px);margin-left:clamp(12px,1.5vw,24px);border-radius:4px;background:linear-gradient(to bottom,var(--cyan),var(--blue));box-shadow:0 0 24px rgba(107,228,255,.52);animation:cursorBlink 1.15s steps(1) infinite, cursorFloat 5s ease-in-out infinite}
.shaal-noise{z-index:10;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
@keyframes enter{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(10px)}to{opacity:1;transform:translateY(-1vh) scale(1);filter:blur(0)}}
@keyframes cursorBlink{0%,46%{opacity:1}47%,100%{opacity:.12}}
@keyframes cursorFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes linePulse{0%,100%{transform:scaleX(.18);opacity:.18}50%{transform:scaleX(.95);opacity:.58}}
@keyframes gridFloat{from{transform:perspective(900px) rotateX(60deg) scale(1.65) translateY(22%)}to{transform:perspective(900px) rotateX(58deg) scale(1.72) translateY(25%)}}
@keyframes glowA{to{transform:translate(8vw,7vh) scale(1.12)}}
@keyframes glowB{to{transform:translate(-8vw,-6vh) scale(1.1)}}
@keyframes scan{to{transform:translateY(100%)}}
@media (max-width:700px){
  .shaal-wordmark{font-size:clamp(52px,16vw,92px)}
  .shaal-grid{background-size:40px 40px;opacity:.24}
  .shaal-cursor{width:3px;margin-left:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
  #shaal-canvas{opacity:.5}
}