:root {
  --background: 270 82% 4%;
  --foreground: 190 100% 94%;
  --primary: 188 100% 55%;
  --secondary: 318 100% 63%;
  --muted: 252 32% 75%;
  --destructive: 0 95% 62%;
  --border: 288 55% 28%;
  --card: 268 66% 9%;
  --shadow-sm: 0 8px 24px hsl(188 100% 50% / 0.12);
  --shadow-md: 0 18px 48px hsl(318 100% 55% / 0.18);
  --shadow-lg: 0 28px 90px hsl(188 100% 50% / 0.25), 0 0 70px hsl(318 100% 60% / 0.18);
  --transition-fast: 160ms ease;
  --transition-smooth: 420ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
}
.dark {
  --background: 270 82% 4%;
  --foreground: 190 100% 94%;
  --primary: 184 100% 56%;
  --secondary: 321 100% 62%;
  --muted: 252 28% 76%;
  --destructive: 0 95% 62%;
  --border: 288 55% 28%;
  --card: 268 66% 9%;
}
* { box-sizing: border-box; scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: hsl(var(--background)); color: hsl(var(--foreground)); }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.bg-orb { background: radial-gradient(circle at 15% 10%, hsl(var(--secondary) / .35), transparent 26%), radial-gradient(circle at 80% 18%, hsl(var(--primary) / .32), transparent 24%), radial-gradient(circle at 50% 90%, hsl(52 100% 55% / .2), transparent 28%), linear-gradient(135deg, hsl(270 90% 4%), hsl(250 80% 7%) 45%, hsl(290 88% 5%)); }
.logo-mark { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; font-weight: 1000; color: #05020b; background: linear-gradient(135deg, #04f5ff, #ff38d1, #ffe45e); box-shadow: var(--shadow-md); }
.brand-text { font-weight: 1000; font-size: 1.1rem; background: linear-gradient(90deg, #fff, #00f7ff, #ff4fd8, #ffe45e); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .02em; }
.rainbow-btn, .download-btn { border: 0; border-radius: 999px; padding: 0 20px; min-width: 44px; font-weight: 1000; color: #07020f; background: linear-gradient(90deg, #04f5ff, #ff38d1, #ffe45e, #04f5ff); background-size: 250%; box-shadow: 0 0 30px hsl(var(--primary) / .3); transition: transform var(--transition-fast), filter var(--transition-fast); }
.rainbow-btn:hover, .download-btn:hover { transform: translateY(-2px) scale(1.03); filter: saturate(1.25); animation: rainbow 1.6s linear infinite; }
.glass-btn { display: inline-flex; align-items: center; padding: 0 20px; border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .6); color: hsl(var(--foreground)); font-weight: 900; }
.credit-pill, .badge { display: inline-flex; align-items: center; border: 1px solid hsl(var(--primary) / .35); background: hsl(var(--primary) / .12); color: hsl(var(--primary)); border-radius: 999px; padding: 8px 12px; font-weight: 900; font-size: .86rem; }
.hero-title { font-size: clamp(3rem, 13vw, 7rem); line-height: .88; font-weight: 1000; letter-spacing: -0.08em; color: white; text-shadow: 0 0 28px hsl(var(--primary) / .42); }
.hero-title span { display: block; background: linear-gradient(90deg, #00f7ff, #ff43d4, #ffe45e); -webkit-background-clip: text; background-clip: text; color: transparent; animation: glitch 2.4s infinite; }
.typing { width: 0; max-width: max-content; white-space: nowrap; overflow: hidden; border-right: 3px solid hsl(var(--secondary)); color: hsl(var(--secondary)); font-weight: 1000; font-size: clamp(1.1rem, 5vw, 2rem); animation: type 4s steps(34) infinite; }
.glass, .app-card, .tutorial-card { background: linear-gradient(145deg, hsl(var(--card) / .82), hsl(280 75% 13% / .58)); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-sm); backdrop-filter: blur(20px); }
.app-card { position: relative; padding: 18px; border-radius: var(--radius-lg); min-height: 330px; overflow: hidden; transform-style: preserve-3d; transition: transform var(--transition-smooth), box-shadow var(--transition-smooth); }
.app-card:hover, .magnetic:hover { transform: perspective(800px) rotateX(2deg) rotateY(-4deg) translateY(-6px); box-shadow: var(--shadow-lg); }
.falling-logo { width: 84px; height: 84px; border-radius: 27px; display: grid; place-items: center; color: white; font-size: 2rem; font-weight: 1000; box-shadow: inset 0 2px 8px rgb(255 255 255 / .65), 0 22px 50px rgb(0 0 0 / .45); animation: fallIn 1s cubic-bezier(.2,1.2,.2,1) both; }
.falling-logo span { text-shadow: 0 2px 10px rgb(0 0 0 / .45); }
.star { color: #ffe45e; text-shadow: 0 0 12px #ffe45e; }
.download-btn { display: flex; align-items: center; justify-content: center; }
.hero-stage { min-height: 390px; position: relative; perspective: 900px; }
.phone-3d { position: absolute; inset: 28px 18px; border-radius: 40px; background: linear-gradient(145deg, hsl(240 80% 8%), hsl(288 85% 16%)); border: 1px solid hsl(var(--primary) / .45); box-shadow: var(--shadow-lg); transform: rotateX(12deg) rotateY(-16deg) rotateZ(4deg); overflow: hidden; }
.screen-lines { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 24px, hsl(var(--primary) / .08) 25px 27px); }
.play-head { position: absolute; left: 50%; top: 12%; bottom: 12%; width: 3px; background: #ffe45e; box-shadow: 0 0 20px #ffe45e; animation: scan 2s infinite alternate; }
.clip { position: absolute; left: 12%; height: 48px; border-radius: 14px; background: linear-gradient(90deg, #04f5ff, #ff38d1); box-shadow: 0 0 24px hsl(var(--secondary) / .35); }
.c1 { top: 34%; width: 70%; } .c2 { top: 50%; width: 52%; background: linear-gradient(90deg, #ffe45e, #04f5ff); } .c3 { top: 66%; width: 80%; background: linear-gradient(90deg, #ff38d1, #8b5cf6); }
.timeline-sticker { position: absolute; z-index: 2; padding: 10px 14px; border-radius: 999px; background: hsl(var(--card) / .75); border: 1px solid hsl(var(--primary) / .35); color: white; font-weight: 1000; box-shadow: var(--shadow-md); animation: float 3s ease-in-out infinite; }
.s1 { top: 26px; left: 12px; } .s2 { right: 12px; top: 120px; animation-delay: .5s; } .s3 { left: 35px; bottom: 45px; animation-delay: 1s; }
.lens { position: absolute; border-radius: 50%; filter: blur(18px); pointer-events: none; } .lens-one { width: 160px; height: 160px; right: 8%; top: 10%; background: hsl(var(--primary) / .24); } .lens-two { width: 120px; height: 120px; left: 5%; bottom: 2%; background: hsl(var(--secondary) / .22); }
.cards-scroll { scrollbar-width: none; } .cards-scroll::-webkit-scrollbar { display: none; }
.marquee { overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--primary) / .08); white-space: nowrap; padding: 12px 0; color: hsl(var(--primary)); font-weight: 1000; }
.marquee span { display: inline-block; padding-left: 100%; animation: marquee 16s linear infinite; }
.tutorial-card { border-radius: var(--radius-lg); padding: 20px; min-height: 210px; }
.tutorial-card .step { color: hsl(var(--secondary)); font-weight: 1000; font-size: 2rem; }
.tutorial-card h3 { color: white; font-size: 1.25rem; font-weight: 1000; margin: 10px 0; }
.tutorial-card p { color: hsl(var(--muted)); }
.gallery-tile { min-height: 150px; border-radius: 26px; display: flex; align-items: end; padding: 14px; font-weight: 1000; color: white; background: linear-gradient(135deg, hsl(calc(185 + var(--i) * 18) 100% 50% / .75), hsl(calc(315 - var(--i) * 10) 100% 58% / .72)), radial-gradient(circle at 30% 20%, white, transparent 22%); box-shadow: var(--shadow-sm); }
.playlist-row { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 16px; background: hsl(var(--foreground) / .06); color: hsl(var(--foreground)); }
.bottom-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 18px; color: hsl(var(--muted)); font-weight: 900; }
.bottom-link span { font-size: 1.05rem; } .bottom-link small { font-size: .78rem; }
.bottom-link:hover { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }
.creator-banner { position: fixed; left: 50%; bottom: calc(78px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 45; white-space: nowrap; border-radius: 999px; padding: 8px 14px; background: linear-gradient(90deg, hsl(var(--primary) / .22), hsl(var(--secondary) / .22)); border: 1px solid hsl(var(--border)); backdrop-filter: blur(16px); color: white; font-weight: 1000; font-size: .82rem; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.skeleton { background: linear-gradient(90deg, hsl(var(--card)), hsl(var(--primary) / .16), hsl(var(--card))); background-size: 220%; animation: shimmer 1.2s infinite; }
.intro-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: radial-gradient(circle at 50% 25%, hsl(0 95% 35% / .22), transparent 28%), linear-gradient(145deg, #030006, #14001e 55%, #000); overflow: hidden; }
.uchiha-eyes { display: flex; gap: 34px; margin-bottom: 26px; filter: drop-shadow(0 0 28px #ff003c); animation: eyeOpen 1.4s ease both; }
.eye { width: 118px; height: 58px; border-radius: 100% 0 100% 0; transform: rotate(-8deg); background: radial-gradient(circle, #ff214f 0 18%, #120007 19% 31%, #ff002f 32% 52%, #150008 53% 100%); border: 2px solid #ff4b66; position: relative; box-shadow: inset 0 0 22px #000, 0 0 35px #ff003c; }
.eye:nth-child(2) { transform: scaleX(-1) rotate(-8deg); }
.eye span { position: absolute; inset: 16px 46px; border-radius: 50%; background: #050005; box-shadow: 0 0 12px #000; }
.eye i { position: absolute; inset: 10px 40px; border: 2px solid #160005; border-radius: 50%; animation: spin 2s linear infinite; }
.intro-title { font-size: clamp(2.8rem, 12vw, 6rem); font-weight: 1000; letter-spacing: -.06em; background: linear-gradient(90deg, #fff, #ff003c, #04f5ff, #ffe45e); -webkit-background-clip: text; background-clip: text; color: transparent; animation: glitch 1.8s infinite; }
.intro-copy { max-width: 620px; color: hsl(var(--muted)); margin: 14px auto 24px; line-height: 1.7; }
.intro-btn { display: inline-flex; align-items: center; }
.intro-flare { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: hsl(var(--secondary) / .18); filter: blur(45px); animation: pulse 2s infinite; }
.pulse-cta { animation: pulse 1.8s infinite; }
@keyframes rainbow { to { background-position: 250% center; } }
@keyframes glitch { 0%,100% { filter: hue-rotate(0); transform: translateX(0); } 45% { filter: hue-rotate(40deg); transform: translateX(1px); } 48% { transform: translateX(-2px) skewX(4deg); } 52% { transform: translateX(2px) skewX(-4deg); } }
@keyframes type { 0%, 12% { width: 0; } 55%, 82% { width: 100%; } 100% { width: 0; } }
@keyframes fallIn { 0% { transform: translateY(-360px) rotate(-35deg) scale(.8); opacity: 0; } 70% { transform: translateY(14px) rotate(5deg) scale(1.05); opacity: 1; } 100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; } }
@keyframes scan { from { left: 20%; } to { left: 78%; } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes shimmer { to { background-position: -220%; } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 18px hsl(var(--primary) / .25); transform: scale(1); } 50% { box-shadow: 0 0 45px hsl(var(--secondary) / .42); transform: scale(1.025); } }
@keyframes eyeOpen { 0% { transform: scaleY(.05); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 420px) { .hero-stage { min-height: 330px; } .eye { width: 96px; height: 48px; } .uchiha-eyes { gap: 20px; } .creator-banner { font-size: .74rem; } }