:root{
  --bg:#0a0a18;
  --bg-2:#15132b;
  --fg:#f5e9d4;
  --fg-dim:#a8a3c2;
  --accent:#d8c79e;
  --glow:rgba(255,236,196,.35);
  --card:rgba(255,255,255,.04);
  --border:rgba(255,236,196,.18);
  --border-hover:rgba(255,236,196,.55);
  --track-fill:rgba(216,199,158,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  background:var(--bg);color:var(--fg);
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  min-height:100dvh;overflow-x:hidden;
}
body{
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(120,100,200,.25), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 110%, rgba(180,140,90,.18), transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  background-attachment:fixed;
  position:relative;
}
#stars{position:fixed;inset:0;pointer-events:none;z-index:0}
main{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 22px;max-width:440px;margin:0 auto;min-height:100dvh;
  text-align:center;
}

.moon-frame{
  position:relative;width:96px;height:96px;margin-bottom:30px;
  display:flex;align-items:center;justify-content:center;
}
.moon-frame::before{
  content:"";position:absolute;inset:-14px;border-radius:50%;
  background:radial-gradient(circle,var(--glow) 0%,transparent 65%);
  filter:blur(8px);opacity:.85;animation:pulse 6s ease-in-out infinite;
}
.moon{
  width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff8e8 0%, #f5e9d4 40%, #d8c79e 100%);
  box-shadow:inset -8px -10px 22px rgba(80,60,30,.35), 0 8px 32px rgba(0,0,0,.5);
  position:relative;z-index:1;
}

.headline{
  font-size:1.9rem;font-weight:500;letter-spacing:.02em;
  margin-bottom:8px;
  background:linear-gradient(180deg,#fff 0%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{
  color:var(--fg-dim);font-size:1rem;font-style:italic;
  margin-bottom:38px;letter-spacing:.04em;line-height:1.5;
  font-family:Georgia,serif;max-width:320px;
}

/* slider */
.gate{
  position:relative;height:62px;width:100%;max-width:340px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--border);
  user-select:none;-webkit-user-select:none;
  overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .25s ease, background .25s ease;
}
.gate.unlocked{
  border-color:var(--border-hover);
  background:rgba(216,199,158,.08);
}
.gate-fill{
  position:absolute;top:0;left:0;bottom:0;
  width:48px;
  background:var(--track-fill);
  transition:none;
  pointer-events:none;
}
.gate-label{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.86rem;font-weight:500;letter-spacing:.18em;
  color:var(--fg);opacity:.6;text-transform:uppercase;
  pointer-events:none;
  transition:opacity .2s ease;
}
.gate.unlocking .gate-label,
.gate.unlocked .gate-label{opacity:0}
.gate-thumb{
  position:absolute;top:5px;left:5px;
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(180deg,#fff 0%,var(--accent) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35), 0 0 18px rgba(255,236,196,.25);
  cursor:grab;touch-action:none;
  transition:none;
}
.gate-thumb:active{cursor:grabbing}
.gate-thumb svg{width:22px;height:22px;color:#0a0a18}

.legal{
  margin-top:28px;color:var(--fg-dim);font-size:.78rem;
  font-style:italic;opacity:.5;max-width:300px;line-height:1.5;
  font-family:Georgia,serif;
}

/* shared button */
.btn-primary{
  appearance:none;border:none;cursor:pointer;
  background:linear-gradient(180deg,#fff 0%,var(--accent) 100%);
  color:#0a0a18;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:.95rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:18px 56px;border-radius:999px;
  box-shadow:0 4px 18px rgba(0,0,0,.4), 0 0 24px rgba(255,236,196,.22);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(0,0,0,.45), 0 0 30px rgba(255,236,196,.32)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.6;cursor:default;transform:none}
.btn-primary svg{width:16px;height:16px;color:#0a0a18}

/* confirm card */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:18px;padding:22px 24px;max-width:340px;
  color:var(--fg);font-size:1rem;line-height:1.55;
  font-family:Georgia,serif;font-style:italic;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  margin-bottom:28px;
}

/* redirect frame */
#redirect{
  position:fixed;inset:0;z-index:10;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(120,100,200,.25), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 110%, rgba(180,140,90,.18), transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  padding:48px 22px;text-align:center;
  opacity:0;transition:opacity .4s ease;
}
#redirect.show{display:flex;opacity:1}
#redirect .moon-frame{margin-bottom:34px}
.redirect-headline{
  font-size:1.7rem;font-weight:500;letter-spacing:.02em;margin-bottom:14px;
  background:linear-gradient(180deg,#fff 0%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.redirect-sub{
  color:var(--fg-dim);font-size:.95rem;font-style:italic;
  letter-spacing:.04em;margin-bottom:28px;font-family:Georgia,serif;
}
.redirect-dots{display:flex;gap:8px;align-items:center;justify-content:center}
.redirect-dots span{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);opacity:.4;
  animation:dot 1.4s ease-in-out infinite;
}
.redirect-dots span:nth-child(2){animation-delay:.2s}
.redirect-dots span:nth-child(3){animation-delay:.4s}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes dot{0%,80%,100%{opacity:.25;transform:scale(.85)}40%{opacity:1;transform:scale(1.1)}}

.noscript{padding:24px;text-align:center;color:var(--fg-dim);font-style:italic}