:root{
  --ink:#fffaff;
  --pink:#ffc4eb;
  --pink2:#ff9bdc;
  --lilac:#d8c7ff;
  --cyan:#b8f9ff;
  --violet:#b998ff;
  --glass:rgba(18,8,34,.30);
  --line:rgba(255,255,255,.18);
  --shadow:0 30px 100px rgba(50,0,70,.38);
}

.maker-credit,.music-credit{position:fixed;z-index:12;color:rgba(255,221,242,.52);font-size:12px;letter-spacing:.08em;text-decoration:none;text-shadow:0 0 10px rgba(255,175,226,.42);opacity:.58;backdrop-filter:blur(3px);transition:opacity .25s ease,transform .25s ease,color .25s ease;animation:creditFloat 6s ease-in-out infinite}
.maker-credit{left:18px;top:16px}.music-credit{right:18px;bottom:16px;animation-delay:-2.8s}
.maker-credit:hover,.music-credit:hover{opacity:.95;color:rgba(255,235,249,.9);transform:translateY(-2px)}
#bgMusic{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none}
.matrix-col{filter:drop-shadow(0 0 6px rgba(255,174,224,.35));animation-name:matrixFall,matrixGlitch;animation-duration:var(--fall),var(--glitch);animation-timing-function:linear,steps(2,end);animation-iteration-count:infinite,infinite}
@keyframes matrixGlitch{0%,100%{opacity:.55;transform:translate3d(0,0,0) skewX(0deg)}25%{opacity:.8;transform:translate3d(1px,0,0) skewX(-1deg)}50%{opacity:.48;transform:translate3d(-2px,0,0) skewX(1deg)}75%{opacity:.72;transform:translate3d(1px,0,0) skewX(0deg)}}
@keyframes creditFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{
  min-height:100svh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#12061e;
  overflow:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-8;
  background:url('/static/background.png') center/cover no-repeat;
  opacity:.50;
  transform:scale(1.02);
  filter:saturate(1.05) contrast(1.02);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-7;
  pointer-events:none;
  background:
    radial-gradient(circle at 68% 22%,rgba(255,235,255,.24),transparent 24%),
    radial-gradient(circle at 20% 78%,rgba(186,125,255,.17),transparent 28%),
    linear-gradient(125deg,rgba(12,3,28,.28),rgba(35,6,46,.08) 38%,rgba(9,14,40,.24));
}
#space{position:fixed;inset:0;z-index:-6;pointer-events:none;overflow:hidden}
.star{position:absolute;width:2px;height:2px;border-radius:999px;background:#fff;box-shadow:0 0 12px #fff;opacity:.72;animation:twinkle var(--t) ease-in-out infinite;animation-delay:var(--d)}
.matrix{position:fixed;inset:-12vh 0 0 auto;width:42vw;min-width:280px;z-index:-4;pointer-events:none;opacity:.12;overflow:hidden;mask-image:linear-gradient(to left,transparent,black 16%,black 70%,transparent)}
.matrix-col{position:absolute;top:-120vh;white-space:pre-line;color:#ffd0ec;font:700 12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;text-shadow:0 0 10px rgba(255,177,227,.58);animation:matrixFall var(--fall) linear infinite;animation-delay:var(--delay)}
.sakura-layer{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.petal{position:absolute;width:13px;height:19px;border-radius:80% 15% 80% 15%;background:linear-gradient(135deg,rgba(255,230,248,.95),rgba(255,167,217,.58));box-shadow:0 0 14px rgba(255,178,226,.45);animation:petalFall var(--fall) linear infinite;animation-delay:var(--delay)}

.shell{position:fixed;inset:0;z-index:3;display:grid;place-items:center;padding:20px;pointer-events:none}
main{position:relative;width:min(700px,92vw);min-height:380px;display:grid;place-items:center;pointer-events:none}
main::before{content:"";position:absolute;inset:24% 14%;border-radius:50%;background:radial-gradient(circle,rgba(255,190,230,.10),rgba(183,155,255,.04) 42%,transparent 72%);filter:blur(8px);opacity:.8;pointer-events:none;animation:haloPulse 7s ease-in-out infinite}

/* One hero sakura control: no panel, no rectangular button. */
.hero-launch{position:relative;width:190px;height:190px;border:0;background:transparent;padding:0;display:grid;place-items:center;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 0 30px rgba(255,184,226,.28));animation:heroFloat 8.5s ease-in-out infinite}
.hero-launch::before{content:"";position:absolute;inset:19px;border-radius:50%;background:radial-gradient(circle,rgba(255,245,251,.16),rgba(255,187,230,.06) 38%,transparent 70%);box-shadow:0 0 70px rgba(255,175,225,.16),0 0 120px rgba(183,154,255,.12);animation:heroGlow 4.6s ease-in-out infinite}
.hero-launch:focus-visible{outline:none;filter:drop-shadow(0 0 38px rgba(255,225,247,.48))}
.hero-flower{position:relative;width:98px;height:98px;display:block;transform:rotate(-8deg);animation:flowerSpin 16s linear infinite}
.hero-flower i{position:absolute;left:50%;top:50%;width:42px;height:58px;margin:-58px 0 0 -21px;border-radius:70% 42% 72% 42%;background:linear-gradient(180deg,rgba(255,237,249,.80),rgba(255,155,215,.34));border:1px solid rgba(255,255,255,.26);box-shadow:0 0 16px rgba(255,192,228,.24),inset 0 0 18px rgba(255,255,255,.15);transform-origin:50% 100%;}
.hero-flower i:nth-child(1){transform:rotate(0deg)}
.hero-flower i:nth-child(2){transform:rotate(72deg)}
.hero-flower i:nth-child(3){transform:rotate(144deg)}
.hero-flower i:nth-child(4){transform:rotate(216deg)}
.hero-flower i:nth-child(5){transform:rotate(288deg)}
.hero-flower b{position:absolute;left:50%;top:50%;width:25px;height:25px;margin:-12.5px;transform:none;border-radius:50%;background:radial-gradient(circle at 38% 30%,#fff8ff,rgba(255,196,231,.9) 36%,rgba(210,166,255,.42) 68%,transparent 72%);box-shadow:0 0 24px rgba(255,208,239,.6);}
.hero-spark{position:absolute;inset:0;pointer-events:none}
.hero-spark::before,.hero-spark::after{content:"✦";position:absolute;color:rgba(255,239,250,.82);text-shadow:0 0 16px rgba(255,186,229,.75);font-size:14px;animation:sparkOrbit 5.8s ease-in-out infinite}
.hero-spark::before{left:15px;top:40px}
.hero-spark::after{right:12px;bottom:39px;animation-delay:-2.5s}

/* Reveal the working controls only after the flower is clicked. */
#flow{display:none;position:absolute;inset:0;place-items:center;pointer-events:none}
#flow.active{display:grid}
.flow-card{width:min(470px,88vw);display:grid;gap:14px;padding:24px 24px 22px;border-radius:28px;background:transparent;border:0;backdrop-filter:none;box-shadow:none;pointer-events:auto;animation:flowIn .65s cubic-bezier(.2,.8,.2,1) both}
.flow-card::before{content:"";position:absolute;inset:-1px;border-radius:29px;background:linear-gradient(120deg,rgba(255,190,229,.5),rgba(183,247,255,.16),rgba(185,151,255,.36),rgba(255,188,227,.5));opacity:.22;filter:blur(6px);pointer-events:none}
.field{position:relative;display:grid;gap:8px}
input{width:100%;height:56px;padding:14px 18px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(7,4,18,.30);color:#fff;font-size:16px;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 30px rgba(0,0,0,.10);transition:.25s ease}
input::placeholder{color:rgba(255,255,255,.50)}
input:focus{border-color:rgba(193,247,255,.65);box-shadow:0 0 0 4px rgba(145,238,255,.08),0 0 34px rgba(164,134,255,.12)}
.action-row{display:flex;justify-content:center;gap:15px;align-items:center}
.icon-btn{position:relative;width:74px;height:74px;flex:0 0 74px;border:1px solid rgba(255,255,255,.18);background:transparent;border-radius:50%;display:grid;place-items:center;padding:0;color:#fff;cursor:pointer;backdrop-filter:blur(9px);box-shadow:0 16px 40px rgba(14,1,28,.16);animation:buttonFloat 6.6s ease-in-out infinite;transition:transform .22s ease,box-shadow .22s ease}
.icon-btn::before{content:"";position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(circle,rgba(255,196,231,.12),transparent 64%);animation:buttonAura 4.5s ease-in-out infinite}
.icon-btn:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 22px 50px rgba(16,0,34,.30),0 0 34px rgba(255,184,230,.18)}
.icon-sakura{width:34px;height:34px;position:relative;display:block;transform:rotate(-10deg);filter:drop-shadow(0 0 12px rgba(255,198,229,.30))}
.icon-sakura::before,.icon-sakura::after{content:"";position:absolute;inset:6px;border-radius:70% 40% 70% 40%;border:1px solid rgba(255,255,255,.22);background:linear-gradient(180deg,rgba(255,240,249,.76),rgba(255,165,217,.26))}
.icon-sakura::after{transform:rotate(72deg)}

.step{display:none;gap:14px;animation:flowIn .5s ease both}
.step.active{display:grid}
.small-note{font-size:0;height:0;overflow:hidden;position:absolute}

#downloads{display:none;position:absolute;inset:0;place-items:center;pointer-events:none}
#downloads.active{display:grid}
.download-orbit{position:relative;width:min(560px,90vw);height:300px;display:grid;place-items:center;pointer-events:none}
.download-petal{position:absolute;width:104px;height:104px;border:0;background:transparent;padding:0;display:grid;place-items:center;cursor:pointer;pointer-events:auto;animation:downloadFloat var(--fd) ease-in-out infinite;animation-delay:var(--dd);filter:drop-shadow(0 0 24px rgba(255,185,228,.28));}
.download-petal .petal-flower{position:relative;width:74px;height:74px;transform:rotate(var(--rr));transition:transform .22s ease,filter .22s ease}
.download-petal .petal-flower i{position:absolute;left:50%;top:50%;width:30px;height:42px;margin:-42px 0 0 -15px;border-radius:70% 42% 72% 42%;background:linear-gradient(180deg,rgba(255,235,248,.72),rgba(255,164,216,.23));border:1px solid rgba(255,255,255,.20);transform-origin:50% 100%;box-shadow:0 0 14px rgba(255,188,228,.20)}
.download-petal .petal-flower i:nth-child(1){transform:rotate(0deg)}
.download-petal .petal-flower i:nth-child(2){transform:rotate(72deg)}
.download-petal .petal-flower i:nth-child(3){transform:rotate(144deg)}
.download-petal .petal-flower i:nth-child(4){transform:rotate(216deg)}
.download-petal .petal-flower i:nth-child(5){transform:rotate(288deg)}
.download-petal .petal-flower b{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;transform:none;border-radius:50%;background:radial-gradient(circle at 38% 30%,#fff8ff,rgba(255,198,232,.82) 42%,rgba(190,155,255,.38) 72%);box-shadow:0 0 18px rgba(255,211,238,.56)}
.download-petal:hover .petal-flower{transform:rotate(var(--rr)) scale(1.12);filter:drop-shadow(0 0 18px rgba(255,208,238,.48))}
.download-petal:nth-child(1){left:8%;top:24%;--fd:8.8s;--dd:-2.4s;--rr:-8deg}
.download-petal:nth-child(2){right:8%;top:22%;--fd:9.6s;--dd:-5.2s;--rr:13deg}
.download-petal:nth-child(3){left:42%;bottom:2%;--fd:10.2s;--dd:-1.3s;--rr:-18deg}

[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes twinkle{0%,100%{opacity:.18;transform:scale(.7)}50%{opacity:1;transform:scale(1.45)}}
@keyframes matrixFall{to{transform:translateY(240vh)}}
@keyframes petalFall{0%{transform:translate3d(0,-15vh,0) rotate(0deg)}50%{transform:translate3d(70px,50vh,0) rotate(180deg)}100%{transform:translate3d(-50px,115vh,0) rotate(360deg)}}
@keyframes heroFloat{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(0,-13px,0) rotate(2deg)}}
@keyframes flowerSpin{to{transform:rotate(352deg)}}
@keyframes heroGlow{0%,100%{transform:scale(.92);opacity:.55}50%{transform:scale(1.08);opacity:.95}}
@keyframes haloPulse{0%,100%{transform:scale(.92);opacity:.28}50%{transform:scale(1.08);opacity:.62}}
@keyframes sparkOrbit{0%,100%{transform:translate3d(0,0,0) scale(.8);opacity:.35}50%{transform:translate3d(7px,-12px,0) scale(1.18);opacity:1}}
@keyframes flowIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes buttonFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes buttonAura{0%,100%{opacity:.18;transform:scale(.92)}50%{opacity:.72;transform:scale(1.12)}}
@keyframes downloadFloat{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(0,-13px,0) rotate(5deg)}}

@media (max-width:720px){
  .hero-launch{width:160px;height:160px}
  .flow-card{width:min(430px,92vw);padding:20px 18px}
  .download-orbit{height:260px}
  .download-petal{width:94px;height:94px}
  .download-petal:nth-child(1){left:0}
  .download-petal:nth-child(2){right:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
  .matrix,.sakura-layer,.floating-glyph{display:none}
}

.status-error{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;max-width:min(92vw,720px);padding:10px 16px;border-radius:14px;background:rgba(20,8,25,.82);border:1px solid rgba(255,140,210,.42);color:#ffe7f6;backdrop-filter:blur(10px);font-size:13px;letter-spacing:.02em;pointer-events:none}


/* Shiny kawaii creator mark */
.maker-credit{left:18px;top:14px;display:inline-flex;align-items:center;gap:9px;padding:8px 12px 8px 8px;border:1px solid rgba(255,235,249,.20);border-radius:999px;background:linear-gradient(120deg,rgba(255,170,220,.16),rgba(186,239,255,.06),rgba(196,165,255,.14));box-shadow:0 0 24px rgba(255,172,226,.13),inset 0 0 18px rgba(255,255,255,.05);opacity:.94;overflow:visible}
.maker-credit strong{font-weight:800;color:#fff2fb;text-shadow:0 0 11px rgba(255,186,229,.80)}
.maker-kawaii{position:relative;width:30px;height:30px;display:inline-block;filter:drop-shadow(0 0 10px rgba(255,191,229,.62));animation:kawaiiBob 4.4s ease-in-out infinite}
.maker-kawaii i{position:absolute;left:50%;top:50%;width:12px;height:18px;margin:-18px 0 0 -6px;border-radius:72% 42% 72% 42%;background:linear-gradient(180deg,rgba(255,250,255,.96),rgba(255,131,207,.56));border:1px solid rgba(255,255,255,.42);transform-origin:50% 100%;box-shadow:0 0 9px rgba(255,191,229,.40);animation:kawaiiGrow 2.8s ease-in-out infinite}
.maker-kawaii i:nth-child(1){transform:rotate(0deg)}.maker-kawaii i:nth-child(2){transform:rotate(72deg);animation-delay:-.5s}.maker-kawaii i:nth-child(3){transform:rotate(144deg);animation-delay:-1s}.maker-kawaii i:nth-child(4){transform:rotate(216deg);animation-delay:-1.5s}.maker-kawaii i:nth-child(5){transform:rotate(288deg);animation-delay:-2s}
.maker-kawaii b{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;transform:none;border-radius:50%;background:#fff3fb;box-shadow:0 0 12px #ffd8ef}

/* Flying privacy flower at lower left */
.privacy-flyer{position:fixed;left:18px;bottom:18px;z-index:18;display:flex;align-items:center;gap:11px;min-width:130px;height:58px;padding:7px 15px 7px 8px;border:1px solid rgba(255,234,249,.28);border-radius:999px;background:linear-gradient(120deg,rgba(19,5,34,.38),rgba(255,155,216,.11),rgba(184,236,255,.08));color:#fff;cursor:pointer;backdrop-filter:blur(10px);box-shadow:0 18px 42px rgba(12,0,24,.28),0 0 24px rgba(255,180,224,.16),inset 0 0 20px rgba(255,255,255,.05);animation:privacyFly 6.8s ease-in-out infinite;transition:transform .24s ease,box-shadow .24s ease}
.privacy-flyer:hover{transform:translateY(-7px) scale(1.04);box-shadow:0 24px 54px rgba(12,0,24,.34),0 0 32px rgba(255,180,224,.28),inset 0 0 24px rgba(255,255,255,.07)}
.privacy-word{font-size:12px;letter-spacing:.22em;font-weight:900;text-shadow:0 0 12px rgba(255,208,238,.75);animation:privacyGlitch 3.7s steps(2,end) infinite}
.privacy-flower{position:relative;width:34px;height:34px;display:block;flex:0 0 34px;filter:drop-shadow(0 0 12px rgba(255,206,238,.72));animation:privacyGrow 3.2s ease-in-out infinite}
.privacy-flower i{position:absolute;left:50%;top:50%;width:13px;height:19px;margin:-19px 0 0 -6.5px;border-radius:72% 42% 72% 42%;background:linear-gradient(180deg,rgba(255,252,255,.98),rgba(255,122,205,.58));border:1px solid rgba(255,255,255,.48);transform-origin:50% 100%;box-shadow:0 0 11px rgba(255,181,226,.54),inset 0 0 8px rgba(255,255,255,.25)}
.privacy-flower i:nth-child(1){transform:rotate(0deg)}.privacy-flower i:nth-child(2){transform:rotate(72deg)}.privacy-flower i:nth-child(3){transform:rotate(144deg)}.privacy-flower i:nth-child(4){transform:rotate(216deg)}.privacy-flower i:nth-child(5){transform:rotate(288deg)}
.privacy-flower b{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;transform:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,rgba(255,205,235,.95) 50%,rgba(183,137,255,.55));box-shadow:0 0 15px rgba(255,230,245,.92)}
.privacy-sparkle{font-size:14px;opacity:.8;animation:sparkOrbit 2.9s ease-in-out infinite}

.privacy-panel{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:22px;background:rgba(6,1,16,.56);backdrop-filter:blur(16px);overflow:auto}
.privacy-card{position:relative;width:min(860px,94vw);max-height:min(88svh,900px);overflow:auto;padding:30px 30px 24px;border:1px solid rgba(255,228,246,.24);border-radius:30px;background:linear-gradient(145deg,rgba(22,7,36,.94),rgba(25,10,45,.88));box-shadow:0 34px 120px rgba(0,0,0,.52),0 0 60px rgba(255,175,226,.12),inset 0 0 40px rgba(255,255,255,.02);animation:privacyIn .38s cubic-bezier(.2,.85,.2,1) both}
.privacy-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.06);color:#fff;font-size:25px;line-height:1;cursor:pointer}
.privacy-kicker{font-size:10px;letter-spacing:.18em;color:rgba(255,197,231,.72);margin-right:48px}.privacy-card h2{margin:10px 0 12px;font-size:clamp(26px,4vw,42px);line-height:1.05;text-shadow:0 0 20px rgba(255,191,226,.16)}
.privacy-lead{font-size:15px;line-height:1.7;color:rgba(255,241,248,.84);max-width:760px}.privacy-card section{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}.privacy-card h3{margin:0 0 8px;font-size:15px;letter-spacing:.07em;color:#ffe9f6}.privacy-card p{margin:8px 0;color:rgba(255,241,248,.76);font-size:13px;line-height:1.7}.privacy-card code,.audit-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.audit-code{padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.07);color:#ffdcef}.creator-button{display:inline-flex;align-items:center;justify-content:center;margin-top:6px;padding:12px 16px;border-radius:999px;border:1px solid rgba(255,214,239,.30);background:linear-gradient(110deg,rgba(255,154,213,.19),rgba(184,237,255,.08),rgba(193,158,255,.15));color:#fff;text-decoration:none;font-weight:800;letter-spacing:.08em;box-shadow:0 0 22px rgba(255,173,223,.16);animation:creatorShine 3.2s ease-in-out infinite}.creator-button:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(255,173,223,.28)}
.audit-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);font-size:9px;letter-spacing:.14em;color:rgba(255,212,237,.46)}
body.privacy-open{overflow:hidden}
@keyframes privacyFly{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(8px,-10px,0) rotate(2deg)}}
@keyframes privacyGrow{0%,100%{transform:scale(.84) rotate(-4deg)}50%{transform:scale(1.16) rotate(5deg)}}
@keyframes privacyGlitch{0%,96%,100%{filter:none;transform:none}97%{transform:translateX(1px);filter:drop-shadow(2px 0 rgba(255,126,206,.9))}98%{transform:translateX(-1px);filter:drop-shadow(-2px 0 rgba(142,236,255,.85))}}
@keyframes kawaiiBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
@keyframes kawaiiGrow{0%,100%{scale:.88}50%{scale:1.08}}
@keyframes privacyIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes creatorShine{0%,100%{box-shadow:0 0 18px rgba(255,173,223,.12)}50%{box-shadow:0 0 32px rgba(255,183,227,.28)}}
@media (max-width:720px){.privacy-flyer{left:12px;bottom:12px;min-width:122px}.privacy-card{padding:24px 18px 20px}.maker-credit{left:10px;top:10px}.maker-credit span:last-child{font-size:10px}}
@media (prefers-reduced-motion:reduce){.privacy-flyer,.maker-kawaii,.privacy-flower,.privacy-word,.creator-button{animation:none!important}}