:root {
  --bg:#0b0b10;
  --card:#13131a;
  --fg:#f4f4fb;
  --muted:#a3a3b2;
  --acc:#7c2ae8;
  --acc-2:#21d4fd; 
  --acc-hover:#8a34d3;
  --shadow: 0 10px 35px rgba(44,28,53,.35);
}

html, body {
  overscroll-behavior: none;
  overflow: hidden;
  height: 100%;
}

body { overflow-x: hidden; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 10% 0%, #141421, transparent 60%),
    radial-gradient(900px 500px at 90% 20%, #141421, transparent 55%),
    linear-gradient(120deg, #0b0b10 0%, #0f0f18 55%, #0b0b10 100%);
  color: var(--fg);
  font: 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.wrap {
  max-width: 760px;
  margin: 0 auto 6vh;
  padding: 0;
}

.card {
  background: var(--card);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

h1 {
  margin: 0 0 12px;
  font-size: 28px;
}

p { margin: 12px 0; color: var(--fg); }

a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }

a.btn {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--acc);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
a.btn:hover {
  background: var(--acc-hover);
  text-decoration: none;
}

kbd, code {
  background: #222229;
  border-radius: 6px;
  padding: .2em .45em;
}

.muted { color: var(--muted); }
.footer { margin-top: 16px; font-size: 14px; }

/* ---------- Animated Aurora Layer ---------- */
.aurora{
  position:fixed; inset:-10vmax;
  background:
    radial-gradient(40vmax 35vmax at 15% 20%, rgba(124,42,232,.18), transparent 60%),
    radial-gradient(35vmax 30vmax at 85% 10%, rgba(33,212,253,.15), transparent 60%),
    radial-gradient(45vmax 40vmax at 70% 70%, rgba(255, 99, 235,.10), transparent 60%),
    radial-gradient(60vmax 50vmax at 20% 80%, rgba(98, 0, 255,.12), transparent 60%);
  filter: blur(40px) saturate(120%);
  animation: floaty 24s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes floaty{
  0%{ transform: translate3d(-2%, -1%, 0) scale(1); }
  100%{ transform: translate3d(2%, 1%, 0) scale(1.02); }
}

/* ---------- Banner (sticky top, rounded, masked fade) ---------- */
header{
  position:sticky; top:0; z-index:5;
  background: transparent;
  border: 0; box-shadow: none;
  padding-top: 10px;
}
.banner{
  max-width: 900px;
  margin: 14px auto 0;
  padding: 0 clamp(12px, 4vw, 18px);
}
.banner-media{
  position: relative;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
}
.banner-media img{
  display:block;
  width:100%;
  height:auto;
  transform: translateZ(0);
  filter: saturate(105%) contrast(102%) drop-shadow(0 10px 24px rgba(0,0,0,.35));
}
.banner-media::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:42%;
  background: linear-gradient(to bottom,
             rgba(11,11,16,0) 0%,
             rgba(11,11,16,.35) 55%,
             rgba(11,11,16,.75) 85%,
             rgba(11,11,16,1) 100%);
  pointer-events:none;
}
.banner-media::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60% 45% at 50% 0%, rgba(255,255,255,.10), transparent 60%);
  mix-blend-mode: screen;
  pointer-events:none;
}

/* ---------- Card glow (applies to your existing .card) ---------- */
.card{
  background: color-mix(in oklab, var(--card) 92%, black 8%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.card .glow{
  position:absolute; inset:-2px;
  background:
    radial-gradient(120% 80%  at 50%   0%,  rgba(124,42,232,.35), transparent 60%),
    radial-gradient(120% 90%  at 50% 100%,  rgba(33,212,253,.25), transparent 62%),
    radial-gradient(160% 120% at   0%  50%, rgba(124,42,232,.22), transparent 60%),
    radial-gradient(160% 120% at 100%  50%, rgba(33,212,253,.18), transparent 60%);
  filter: blur(26px) saturate(130%);
  opacity:.40;
  z-index:-1;
  transform: scale(1);
  animation: breathe 50s ease-in-out infinite;
  pointer-events:none;
}
@keyframes breathe {
  0%   { transform: scale(1);    opacity:.30; filter: blur(26px) saturate(130%) hue-rotate(0deg); }
  50%  { transform: scale(1.10); opacity:.65; filter: blur(30px) saturate(150%) hue-rotate(20deg); }
  100% { transform: scale(1);    opacity:.30; filter: blur(26px) saturate(130%) hue-rotate(0deg); }
}

/* ---------- Status & progress ---------- */
.status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 10px 14px;
  border-radius: 999px;
  margin: .25em 0 1.25em;
}
.status .dot{
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, white 0 15%, var(--acc) 16% 60%, rgba(124,42,232,.65) 61% 100%);
  box-shadow: 0 0 20px rgba(124,42,232,.65);
  animation: pulse 1.8s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); box-shadow: 0 0 16px rgba(124,42,232,.55); }
  50%{ transform: scale(1.12); box-shadow: 0 0 28px rgba(124,42,232,.9); }
}
.status span{ color: var(--fg); font-weight: 600; letter-spacing:.2px }

.bar{
  --h: 12px;
  position:relative;
  height: var(--h);
  width:min(520px, 100%);
  margin: 16px auto 0;
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.bar::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, var(--acc), var(--acc-2), var(--acc));
  background-size: 200% 100%;
  animation: slide 3.5s ease-in-out infinite;
}
@keyframes slide{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
.bar::after{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.12) 0 14px, transparent 14px 28px);
  mix-blend-mode: screen;
  opacity:.35;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 768px){
  .banner{ margin: 10px auto 0; }
  .banner-media{ border-radius: 18px 18px 0 0; box-shadow: 0 14px 36px rgba(0,0,0,.4); margin: auto; }
}
@media (max-width: 520px){
  .bar{ --h: 10px; }
}
@media (max-width: 360px){
  .banner-media{ border-radius: 14px 14px 0 0; }
}