@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600&display=swap');
:root{--bg:#020612;--panel:#061126eF;--text:#eef5ff;--muted:#9aaeca;--blue:#55aaff;--ice:#b9e6ff;--red:#ff6685;--line:#19365c;--danger:#ff718b}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--text);font-family:"Cairo",sans-serif;background:radial-gradient(ellipse at 50% 12%,#102f63 0%,#06142e 37%,#020612 75%)}
.stars{position:fixed;inset:-20%;pointer-events:none;z-index:0;background-image:radial-gradient(2px 2px at 20px 30px,#c5eaff 50%,transparent 100%),radial-gradient(1px 1px at 90px 70px,#69b7ff 50%,transparent 100%),radial-gradient(1.5px 1.5px at 150px 130px,#fff 50%,transparent 100%);background-size:190px 170px;animation:drift 95s linear infinite;opacity:.52}.stars-b{background-size:270px 230px;opacity:.22;animation-duration:145s;animation-direction:reverse}.nebula{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 15% 40%,#123a6b38,transparent 38%),radial-gradient(ellipse at 85% 70%,#174c8030,transparent 40%);z-index:0}
.shell{position:relative;z-index:1;width:min(760px,100%);margin:auto;padding:28px 20px 20px;min-height:100vh;display:flex;flex-direction:column}.brand{display:flex;align-items:center;justify-content:center;gap:12px;color:#b9ddff;font:11px "Playfair Display",serif;letter-spacing:3px;margin:4px 0 30px;direction:ltr;text-shadow:0 0 16px #409cff}.brand-mark{font-size:20px;color:var(--blue);text-shadow:0 0 16px var(--blue)}
.panel{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(7,22,47,.94),rgba(3,11,27,.97));border:1px solid #2464a6;border-radius:24px;padding:clamp(24px,6vw,54px);box-shadow:0 0 0 1px #61b6ff14,0 0 45px #0867c526,0 25px 80px #0009;animation:appear .7s ease both}.panel:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(120deg,transparent,#54baff88,transparent,#2774d855);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hidden{display:none!important}.eyebrow{font:11px "Playfair Display",serif;letter-spacing:2px;color:#73bdff;text-align:right;direction:ltr;margin:0 0 15px;text-shadow:0 0 15px #218cff66}h1{font-size:clamp(27px,5vw,39px);line-height:1.55;font-weight:700;margin:0 0 17px;text-shadow:0 0 22px #409cff33}.rule{height:1px;background:linear-gradient(90deg,transparent,#54baff,transparent);margin:24px 0;box-shadow:0 0 12px #45a8ff}.message{white-space:pre-wrap;line-height:2.1;color:#dbeeff;font-size:16px;overflow-wrap:anywhere}.muted{color:var(--muted);line-height:1.9;font-size:14px}.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}.gallery:empty{display:none}.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:13px;border:1px solid #55aaff;box-shadow:0 0 20px #238aff40}
.button{width:100%;border:1px solid #8dd5ff;background:linear-gradient(135deg,#bceaff,#398ee9 58%,#2361b9);color:#031125;padding:15px 18px;border-radius:12px;font:800 15px "Cairo",sans-serif;cursor:pointer;margin-top:20px;box-shadow:0 0 24px #168cff3b;transition:transform .2s,filter .2s}.button:hover{filter:brightness(1.1);transform:translateY(-2px)}.button:disabled{opacity:.6;cursor:wait}.button span{margin-right:8px}
.progress-wrap{height:5px;background:#142743;border-radius:10px;overflow:hidden;margin:22px 0 8px}.progress-wrap div{height:100%;width:10%;background:linear-gradient(90deg,#2786f2,#a3e4ff);box-shadow:0 0 12px #49aaff;transition:width .35s}.progress-label{font-size:12px;color:#83c8ff;margin:0 0 20px}.question{padding:16px 0}.question label,label{display:block;font-weight:600;line-height:1.9;margin:12px 0 10px}.question input,input[type=password]{width:100%;padding:14px;border:1px solid #24507c;border-radius:11px;background:#030b1b;color:var(--text);font:15px "Cairo",sans-serif;outline:none}.question input:focus,input[type=password]:focus{border-color:#65bdff;box-shadow:0 0 0 3px #398eff25,0 0 18px #398eff18}.error{color:var(--danger);font-size:13px;line-height:1.8}.vault-panel{text-align:center}.vault{width:180px;height:180px;margin:8px auto 26px;position:relative;display:grid;place-items:center;border-radius:50%;border:2px solid #3e9df5;box-shadow:inset 0 0 30px #1266b944,0 0 35px #087aff3b;animation:vaultGlow 3s ease-in-out infinite}.vault-ring{position:absolute;inset:9px;border:1px solid #75caff;border-radius:50%;box-shadow:0 0 12px #238cff;animation:spin 12s linear infinite}.ring-two{inset:-8px;border-style:dashed;opacity:.65;animation:spin 22s linear infinite reverse}.heart{font-size:40px;color:#ff5e81;text-shadow:0 0 12px #ff315d,0 0 28px #ff315d;transform:translateY(-20px);animation:heartbeat 2.4s ease-in-out infinite}.vault-input-wrap{position:absolute;bottom:25px;left:22px;right:22px}.vault-input-wrap input{text-align:center;padding:8px 6px;letter-spacing:5px;border-radius:20px;background:#06152c;border-color:#4baaff;font-size:13px}.hint-toggle{border:0;background:transparent;color:#8fd2ff;font:600 14px "Cairo",sans-serif;cursor:pointer;text-shadow:0 0 14px #168cff}.hint-text{color:#d4eaff;line-height:1.9;border:1px solid #235588;border-radius:12px;padding:12px;background:#07162a}.final-panel{border-color:#3b8ee3;background:linear-gradient(145deg,#071a39f5,#030b1cf7);box-shadow:0 0 55px #087cff35,0 25px 80px #0009}.final-panel:after{content:"";position:absolute;inset:0;border:2px solid transparent;border-radius:inherit;border-image:linear-gradient(100deg,transparent,#70c8ff,#1764b9,transparent) 1;pointer-events:none;animation:frameLight 8s linear infinite}.final-star{text-align:center;color:#9edbff;font-size:32px;margin:8px 0 14px;text-shadow:0 0 22px #238cff}.final-panel h1{text-align:center;color:#b6e5ff;text-shadow:0 0 18px #168cff}.signature{text-align:center;color:#b7e5ff;margin-top:30px;font-size:clamp(14px,3vw,18px);text-shadow:0 0 15px #168cff;animation:signatureGlow 3s ease-in-out infinite}.signature:before{content:"♥";display:block;color:#ff6587;font-size:25px;margin-bottom:8px;text-shadow:0 0 15px #ff456b;animation:heartbeat 2.4s ease-in-out infinite}footer{margin-top:auto;padding:25px 0 4px;text-align:center;color:#5479a4;font:10px "Playfair Display",serif;letter-spacing:2px;direction:ltr}footer span{color:#69baff;margin-left:7px}.shake{animation:shake .35s ease}
@keyframes appear{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-110px,70px,0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes heartbeat{0%,100%{transform:scale(1) translateY(-20px)}50%{transform:scale(1.1) translateY(-20px)}}@keyframes vaultGlow{0%,100%{box-shadow:inset 0 0 25px #1266b933,0 0 22px #087aff2b}50%{box-shadow:inset 0 0 40px #1266b955,0 0 42px #087aff5c}}@keyframes frameLight{to{filter:hue-rotate(30deg)}}@keyframes signatureGlow{0%,100%{text-shadow:0 0 8px #168cff}50%{text-shadow:0 0 18px #168cff,0 0 28px #168cff66}}@keyframes shake{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
@media(max-width:480px){.shell{padding:20px 13px}.brand{margin-bottom:22px}.panel{border-radius:18px}.gallery{grid-template-columns:1fr}.message{font-size:15px}.vault{width:165px;height:165px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}/* Zooto cinematic finishing touches */
#final-view{background:linear-gradient(145deg,rgba(5,20,48,.98),rgba(1,7,20,.99));}
#final-view .message{color:#e4f3ff;text-shadow:0 0 12px #2d8bff26;}
#intro-message{animation:softReveal 1.4s ease both;}
@keyframes softReveal{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}
.zooto-signature-global {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  width: max-content;
  max-width: 94vw;
  box-sizing: border-box;
  padding: 8px 12px;
  color: #b9e4ff;
  font-size: clamp(10px, 2.2vw, 15px);
  text-align: center;
  text-shadow: 0 0 8px #399cff, 0 0 18px #176dff;
  background: rgba(3, 14, 36, 0.78);
  border: 1px solid rgba(85, 175, 255, 0.35);
  border-radius: 20px;
  pointer-events: none;
  white-space: normal;
  line-height: 1.7;
}
.zooto-signature-global {
  border: 1px solid rgba(100, 190, 255, 0.9);
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(12, 38, 78, 0.92),
    rgba(5, 14, 36, 0.95)
  );
  box-shadow:
    0 0 12px rgba(57, 163, 255, 0.75),
    0 0 28px rgba(57, 163, 255, 0.45),
    inset 0 0 15px rgba(57, 163, 255, 0.15);
  animation: zootoSignatureGlow 2s ease-in-out infinite alternate;
}

@keyframes zootoSignatureGlow {
  from {
    box-shadow: 0 0 8px rgba(57, 163, 255, 0.5),
      0 0 16px rgba(57, 163, 255, 0.25);
  }
  to {
    box-shadow: 0 0 16px rgba(90, 195, 255, 0.95),
      0 0 32px rgba(57, 163, 255, 0.65);
  }
}

.zooto-signature-global::before,
.zooto-signature-global::after {
  content: "💗";
  display: inline-block;
  margin: 0 8px;
  animation: zootoHeartFloat 1.8s ease-in-out infinite alternate;
}

.zooto-signature-global::after {
  animation-delay: 0.9s;
}

@keyframes zootoHeartFloat {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-5px) scale(1.2); }
}
/* Moving galaxy background */
body {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(20, 83, 170, 0.22), transparent 45%),
    radial-gradient(ellipse at 80% 70%, rgba(35, 95, 210, 0.18), transparent 42%),
    linear-gradient(150deg, #020817, #071a38, #020611);
  background-size: 150% 150%;
  animation: galaxyBreathing 18s ease-in-out infinite alternate;
  overflow-x: hidden;
}

@keyframes galaxyBreathing {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 60%;
  }
  100% {
    background-position: 20% 100%;
  }
}

/* Twinkling stars */
.stars {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(2px 2px at 10% 20%, #d8eeff 70%, transparent),
    radial-gradient(1px 1px at 30% 65%, #8bc8ff 70%, transparent),
    radial-gradient(2px 2px at 75% 25%, #ffffff 70%, transparent),
    radial-gradient(1px 1px at 60% 80%, #8bc8ff 70%, transparent),
    radial-gradient(2px 2px at 90% 55%, #d8eeff 70%, transparent),
    radial-gradient(1px 1px at 45% 40%, #ffffff 70%, transparent);
  background-size: 320px 280px;
  animation: starsDrift 35s linear infinite,
             starsTwinkle 4s ease-in-out infinite alternate;
}

@keyframes starsDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(100px, 80px, 0); }
}

@keyframes starsTwinkle {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

/* Slow blue nebula */
.nebula {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 25% 35%, rgba(24, 105, 220, 0.13), transparent 35%),
    radial-gradient(ellipse at 75% 65%, rgba(55, 125, 255, 0.10), transparent 38%);
  filter: blur(28px);
  animation: nebulaDrift 24s ease-in-out infinite alternate;
}

@keyframes nebulaDrift {
  from { transform: translate(-2%, -1%) scale(1); }
  to { transform: translate(3%, 2%) scale(1.12); }
}

/* Keep website content above the background */
main, header, .panel {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  body, .stars, .nebula {
    animation: none !important;
  }
}
/* 💗 Floating hearts across the galaxy */
body::before {
  content: "💙   💗      ♡       💜       💖      🤍";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  font-size: 24px;
  letter-spacing: 28px;
  line-height: 125px;
  overflow: hidden;
  opacity: 0.65;
  overflow-wrap: anywhere;
  animation: heartsRain 9s linear infinite;
}

@keyframes heartsRain {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  15% { opacity: 0.7; }
  85% { opacity: 0.7; }
  100% {
    transform: translateY(-110vh) translateX(35px);
    opacity: 0;
  }
}

/* ✨ Faster drifting stars */
.stars {
  animation: starsDrift 12s linear infinite,
             starsTwinkle 1.8s ease-in-out infinite alternate !important;
}

@keyframes starsDrift {
  from { transform: translate3d(-30px, -40px, 0); }
  to { transform: translate3d(120px, 100px, 0); }
}

/* ☄️ Blue shooting stars */
body::after {
  content: "✦";
  position: fixed;
  top: 15%;
  left: -10%;
  color: #a9ddff;
  font-size: 30px;
  text-shadow: 0 0 10px #38aaff, 0 0 28px #168bff;
  pointer-events: none;
  z-index: 0;
  animation: shootingStar 4s linear infinite;
}

@keyframes shootingStar {
  0% {
    left: -10%;
    top: 15%;
    opacity: 0;
    transform: rotate(25deg) scale(0.5);
  }
  10% { opacity: 1; }
  65% { opacity: 1; }
  100% {
    left: 110%;
    top: 65%;
    opacity: 0;
    transform: rotate(25deg) scale(1.4);
  }
}

/* 💫 Brighter, faster nebula */
.nebula {
  animation: nebulaDrift 10s ease-in-out infinite alternate !important;
}

@keyframes nebulaDrift {
  from { transform: translate(-4%, -2%) scale(0.95); }
  to { transform: translate(5%, 4%) scale(1.18); }
}
/* ⚡ HIGH ENERGY GALAXY */
body {
  background-size: 250% 250% !important;
  animation: actionGalaxy 5s ease-in-out infinite alternate !important;
}

@keyframes actionGalaxy {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 80%; }
  100% { background-position: 0% 100%; }
}

/* 💥 Fast shooting stars */
body::after {
  content: "💙  ✦  💗  ✧";
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: -100%;
  width: max-content;
  color: #bdeaff;
  font-size: 32px;
  text-shadow: 0 0 12px #168bff, 0 0 35px #58baff;
  pointer-events: none;
  z-index: 2;
  animation: fastComet 2.2s linear infinite !important;
}

@keyframes fastComet {
  0% {
    transform: translate(-10vw, 10vh) rotate(-12deg) scale(.6);
    opacity: 0;
  }
  10% { opacity: 1; }
  100% {
    transform: translate(120vw, 75vh) rotate(-12deg) scale(1.5);
    opacity: 0;
  }
}

/* ✨ Rapid star movement */
.stars {
  animation: starsDrift 4s linear infinite,
             starsTwinkle .65s ease-in-out infinite alternate !important;
}

@keyframes starsDrift {
  from { transform: translate(-70px, -50px); }
  to { transform: translate(180px, 130px); }
}

@keyframes starsTwinkle {
  from { opacity: .2; }
  to { opacity: 1; }
}

/* 💗 Floating heart decorations */
.zooto-signature-global::before,
.zooto-signature-global::after {
  animation: heartAction .55s ease-in-out infinite alternate !important;
}

@keyframes heartAction {
  from { transform: translateY(5px) scale(.8) rotate(-12deg); }
  to { transform: translateY(-9px) scale(1.45) rotate(12deg); }
}

/* 💫 Pulsing blue light */
.nebula {
  animation: nebulaAction 5s ease-in-out infinite alternate !important;
}

@keyframes nebulaAction {
  0% { transform: translate(-5%, -4%) scale(.8); opacity: .35; }
  100% { transform: translate(6%, 5%) scale(1.25); opacity: 1; }
}

/* ZOOTO — Fast floating background words */
.zooto-floater {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  white-space: nowrap;
  font-family: "Segoe UI", sans-serif;
  font-size: clamp(22px, 4vw, 42px);
  font-weight: 900;
  color: #b9e5ff;
  text-shadow:
    0 0 8px #39a9ff,
    0 0 20px #168bff,
    0 0 38px #176dff;
  opacity: 0;
  animation: zootoFly 7s linear infinite;
}

@keyframes zootoFly {
  0% {
    transform: translate(-15vw, 110vh) rotate(-12deg) scale(.7);
    opacity: 0;
  }
  12% { opacity: .85; }
  50% {
    transform: translate(48vw, 35vh) rotate(8deg) scale(1.15);
    opacity: .8;
  }
  88% { opacity: .75; }
  100% {
    transform: translate(115vw, -15vh) rotate(-8deg) scale(.85);
    opacity: 0;
  }
}

.zooto-floater:nth-child(2) {
  animation-duration: 5s;
  animation-delay: -2s;
  font-size: clamp(25px, 4.5vw, 48px);
  color: #ffd8f0;
  text-shadow: 0 0 10px #ff5fb7, 0 0 28px #d62991;
}

.zooto-floater:nth-child(3) {
  animation-duration: 6s;
  animation-delay: -4s;
}

.zooto-floater:nth-child(4) {
  animation-duration: 4.5s;
  animation-delay: -1s;
  color: #fff0fb;
}

.zooto-background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.zooto-background .zooto-floater {
  left: 0;
  top: 0;
}

/* Make ZOOTO background text bold and readable */
.zooto-floater {
  font-family: "Segoe UI", "Arial", sans-serif !important;
  font-size: clamp(30px, 5vw, 54px) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-stroke: 1px rgba(255, 180, 225, 0.8);
  text-shadow:
    0 0 3px #ffffff,
    0 0 8px #ff69c9,
    0 0 18px #ff38b8,
    0 0 32px #168bff !important;
  filter: drop-shadow(0 0 8px rgba(255, 75, 190, 0.9));
}

.zooto-background .zooto-floater {
  opacity: 1;
  background: rgba(2, 8, 25, 0.35);
  padding: 8px 14px;
  border: 1px solid rgba(255, 150, 220, 0.45);
  border-radius: 16px;
}