/* Shooting star animations */
    .shooting-star {
      position: absolute;
      height: 2px;
      background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 242, 254, 0.9), transparent);
      border-radius: 999px;
      filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.9));
      transform: rotate(-35deg);
      opacity: 0;
      pointer-events: none;
      z-index: 2;
    }

    @keyframes shoot1 {
      0% { transform: translate(0, 0) rotate(-35deg); width: 0; opacity: 0; }
      8% { width: 150px; opacity: 1; }
      25% { transform: translate(-420px, 310px) rotate(-35deg); width: 180px; opacity: 0.95; }
      35% { width: 0; opacity: 0; }
      100% { transform: translate(-500px, 370px) rotate(-35deg); width: 0; opacity: 0; }
    }

    @keyframes shoot2 {
      0% { transform: translate(0, 0) rotate(-38deg); width: 0; opacity: 0; }
      6% { width: 130px; opacity: 0.95; }
      22% { transform: translate(-360px, 270px) rotate(-38deg); width: 150px; opacity: 0.85; }
      30% { width: 0; opacity: 0; }
      100% { transform: translate(-420px, 320px) rotate(-38deg); width: 0; opacity: 0; }
    }

    @keyframes shoot3 {
      0% { transform: translate(0, 0) rotate(-42deg); width: 0; opacity: 0; }
      7% { width: 140px; opacity: 1; }
      20% { transform: translate(-380px, 320px) rotate(-42deg); width: 160px; opacity: 0.9; }
      32% { width: 0; opacity: 0; }
      100% { transform: translate(-460px, 380px) rotate(-42deg); width: 0; opacity: 0; }
    }

    .shooting-star-1 {
      top: 10%;
      right: 15%;
      animation: shoot1 10s infinite ease-out 1.5s;
    }

    .shooting-star-2 {
      top: 25%;
      right: 48%;
      animation: shoot2 14s infinite ease-out 6s;
    }

    .shooting-star-3 {
      top: 8%;
      right: 65%;
      animation: shoot3 18s infinite ease-out 10s;
    }

    /* Dynamic twinkling stars */
    #stars .twinkle-star {
      position: absolute;
      border-radius: 50%;
      background-color: #ffffff;
      animation: starTwinkle var(--twinkle-duration, 3s) infinite ease-in-out var(--twinkle-delay, 0s);
    }

    #stars .twinkle-star.bright-star {
      box-shadow: 0 0 10px 2px rgba(111, 246, 255, 0.85), 0 0 20px 4px rgba(147, 197, 253, 0.5), 0 0 30px 6px rgba(192, 132, 252, 0.3);
    }

    #stars .twinkle-star.super-star {
      box-shadow: 0 0 14px 3px rgba(255, 255, 255, 0.95), 0 0 24px 6px rgba(0, 242, 254, 0.75), 0 0 40px 10px rgba(168, 85, 247, 0.45);
    }

    /* Star four-point cross flare for standout stars */
    #stars .twinkle-star.flare::before,
    #stars .twinkle-star.flare::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
      border-radius: 999px;
      pointer-events: none;
    }
    #stars .twinkle-star.flare::before {
      width: 22px;
      height: 1.5px;
    }
    #stars .twinkle-star.flare::after {
      width: 1.5px;
      height: 22px;
    }

    #stars .twinkle-star.sparkle-cross {
      animation: starSparkleRotate var(--twinkle-duration, 3.5s) infinite ease-in-out var(--twinkle-delay, 0s);
    }
    #stars .twinkle-star.sparkle-cross::before,
    #stars .twinkle-star.sparkle-cross::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: linear-gradient(90deg, transparent, #00f2fe, #ffffff, #00f2fe, transparent);
      box-shadow: 0 0 6px rgba(0, 242, 254, 0.9);
      border-radius: 999px;
    }
    #stars .twinkle-star.sparkle-cross::before {
      width: 28px;
      height: 2px;
    }
    #stars .twinkle-star.sparkle-cross::after {
      width: 2px;
      height: 28px;
    }

    @keyframes starTwinkle {
      0%, 100% {
        opacity: var(--min-opacity, 0.15);
        transform: scale(0.8);
      }
      50% {
        opacity: var(--max-opacity, 1);
        transform: scale(1.35);
      }
    }

    @keyframes starSparkleRotate {
      0%, 100% {
        opacity: var(--min-opacity, 0.2);
        transform: scale(0.75) rotate(0deg);
      }
      50% {
        opacity: var(--max-opacity, 1);
        transform: scale(1.4) rotate(45deg);
      }
    }

    

/* Atmospheric effects restored from the user-provided Stitch prototype. */
body{isolation:isolate;transition:background-color .8s ease,color .8s ease}
#app{position:relative;z-index:1}
#stars,body.light #stars{z-index:0;background:none!important;opacity:1}
.night-sky,.day-sky,.starfield{position:absolute;inset:0;overflow:hidden}
.night-sky{background:#040711;opacity:1;transition:opacity .9s ease}
.day-sky{background:linear-gradient(180deg,#60a5fa 0%,#93c5fd 35%,#dbeafe 70%,#f0f7ff 100%);opacity:0;transition:opacity .9s ease}
body.light .night-sky{opacity:0}
body.light .day-sky{opacity:1}
.bg-aurora{position:absolute;inset:-4%;background:radial-gradient(ellipse at 15% 35%,#065f9647,transparent 65%),radial-gradient(ellipse at 85% 40%,#7e22ce3d,transparent 65%),radial-gradient(ellipse at 50% 18%,#0ea5e933,transparent 60%),radial-gradient(ellipse at 50% 80%,#5b21b62e,transparent 65%),radial-gradient(ellipse at 70% 85%,#00f2fe1f,transparent 60%);animation:nebula-breathe 14s ease-in-out infinite alternate}
@keyframes nebula-breathe{from{opacity:.75;transform:translate(-1%,-1%) scale(1)}to{opacity:1;transform:translate(1%,1%) scale(1.04)}}
.home-top{justify-content:flex-end;z-index:2}
.home-top .theme{min-height:40px;backdrop-filter:blur(16px)}
.home-main h1,.tagline,.home-intro,.stat,.button,.home-bottom,.avatar-orbit img{transition:color .8s ease,background-color .8s ease,border-color .8s ease,box-shadow .8s ease}
.avatar-orbit:after{animation:avatar-halo 6s ease-in-out infinite alternate;box-shadow:0 0 50px -5px #00f2fe73,0 0 100px -10px #7928ca59}
@keyframes avatar-halo{from{opacity:.7;transform:scale(.99)}to{opacity:1;transform:scale(1.04)}}
.avatar-orbit .orbiter{animation-duration:24s}
.avatar-orbit .orbiter.second{animation-duration:37s}
.stat{transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease,background-color .8s ease}
.stat:hover{transform:translateY(-5px);border-color:#00f2fe66;box-shadow:0 8px 35px #00f2fe15}
body.light{--bg:#eaf5ff;--text:#132a49;--muted:#365579;--cyan:#0369a1;--border:#b0cee5;--card:rgba(255,255,255,.72);--header:rgba(238,248,255,.88)}
body.light .home-main h1{color:#12345c;text-shadow:0 3px 15px #fff6}
body.light .home-intro strong{color:#183a62}
body.light .stat{background:linear-gradient(180deg,#ffffffbd,#ffffff80);border-color:#ffffffd9;box-shadow:0 10px 35px #5c99c21a}
body.light .stat:hover{background:#ffffffd6;border-color:#ffffff;box-shadow:0 12px 35px #0ea5e92e}
body.light .stat h3{color:#163252}
body.light .stat p{color:#3d5d7d}
body.light .avatar-orbit img{border-color:#fff;background:#e0f2fe;box-shadow:0 12px 40px #0ea5e940}
body.light .avatar-orbit:before{border-color:#0ea5e966}
body.light .avatar-orbit:after{border-color:#f59e0b55;box-shadow:0 10px 40px -5px #0ea5e959,0 20px 50px -10px #f59e0b33}
body.light .orbiter:before{background:#0ea5e9;box-shadow:0 0 12px #0ea5e988}
body.light .orbiter.second:before{background:#fbbf24;box-shadow:0 0 12px #fbbf2488}
body.light .home-cta .primary{background:#075985;border-color:#075985;color:white;box-shadow:0 10px 30px #0ea5e926}
body.light .home-cta .primary:hover{background:#0369a1;box-shadow:0 10px 35px #0ea5e947}
body.light .home-cta .button:not(.primary){background:#ffffffa6;border-color:#ffffffd9;color:#16446d}
body.light .theme{background:#ffffffc9;border-color:#ffffffc9;color:#1e3a5f;box-shadow:0 4px 20px #1e40af1a}
body.light .theme .icon{color:#d97706}
/* Photographic sky and alpha cloud layers keep natural detail at every size. */
.day-sky{background:#a1c8e8}
.day-sky-photo{position:absolute;inset:-3%;background:url('/assets/day-sky-v2.jpg') center top/cover no-repeat;animation:sky-pan 95s ease-in-out infinite alternate}
.real-cloud{position:absolute;max-width:none;height:auto;pointer-events:none;will-change:transform}
.real-cloud-a{width:52vw;min-width:480px;left:-15%;top:4%;opacity:.82;animation:cloud-near 70s ease-in-out infinite alternate -18s}
.real-cloud-b{width:43vw;min-width:390px;right:-12%;top:44%;opacity:.55;animation:cloud-far 100s ease-in-out infinite alternate -52s}
.day-atmosphere{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 47%,#e9f4ffa8 0%,#e9f4ff65 30%,transparent 70%),linear-gradient(180deg,transparent 5%,#eaf5ff14 36%,#eaf5ffbb 100%)}
@keyframes sky-pan{from{transform:translate(-.6%,0) scale(1)}to{transform:translate(.6%,.4%) scale(1.025)}}
@keyframes cloud-near{from{transform:translate(-3%,0)}to{transform:translate(18%,-3%)}}
@keyframes cloud-far{from{transform:translate(9%,0)}to{transform:translate(-18%,2%)}}
/* A labelled two-position switch makes the day/night interaction discoverable. */
.theme{gap:9px;padding:7px 12px;min-height:44px;font-weight:500}
.theme .theme-label{display:inline;font-size:12px;color:#9ba9c2;transition:color .3s ease}
.theme .theme-label:first-child{color:#e8f3ff}
.theme .theme-track{position:relative;display:flex!important;align-items:center;justify-content:space-between;flex-shrink:0;width:62px;height:32px;padding:0 8px;border-radius:18px;background:#22334c;border:1px solid #8199bd45;box-shadow:inset 0 2px 4px #0003}
.theme .theme-track>.icon{width:15px;height:15px;color:#a7b5ce}
.theme .theme-knob{position:absolute;display:flex!important;align-items:center;justify-content:center;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#daf5ff;box-shadow:0 2px 6px #0004;transform:translateX(0);transition:transform .35s ease,background-color .35s ease}
.theme .theme-knob .icon{width:15px;height:15px;color:#075985}
.theme[aria-checked="true"] .theme-knob{transform:translateX(30px);background:#fffaf0}
.theme[aria-checked="true"] .theme-knob .icon{color:#b46908}
body.light .theme .theme-track{background:#7bb7e0;border-color:#7faac766}
body.light .theme .theme-track>.icon{color:#174c78}
body.light .theme .theme-label{color:#57728c}
body.light .theme .theme-label:last-child{color:#123e66}
.theme:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
@media(max-width:767px){
  .day-sky-photo{background-position:right top}
  .real-cloud-a{min-width:340px;width:85vw;left:-43%;top:8%;opacity:.68}
  .real-cloud-b{min-width:320px;width:78vw;right:-42%;top:55%;opacity:.45}
  .day-atmosphere{background:radial-gradient(ellipse at 50% 42%,#e9f4ffc4,transparent 78%),linear-gradient(180deg,#eaf5ff00,#eaf5ffb8)}
  .header-actions .theme{padding:5px 7px;gap:0}
  .header-actions .theme .theme-label{display:none}
  .home-top .theme .theme-label{display:inline}
}
@media(prefers-reduced-motion:reduce){
  .day-sky-photo,.real-cloud{animation:none;will-change:auto}
  .theme .theme-knob{transition:none}
}
.shooting-star-1{animation-delay:-1s}
.shooting-star-2{animation-delay:-6s}
.shooting-star-3{animation-delay:-12s}
body.light .night-sky *,body:not(.light) .day-sky *{animation-play-state:paused!important}
@media(max-width:767px){
  .home-intro{font-size:15px;text-wrap:pretty}
  #stars .twinkle-star.super-star{box-shadow:0 0 10px 2px #fff9,0 0 20px 4px #00f2fe88}
}
@media(prefers-reduced-motion:reduce){
  .night-sky,.day-sky{transition:none}
  .shooting-star{display:none}
  #stars .twinkle-star{opacity:var(--max-opacity,.8)}
}