:root{
  --c1:#7c5cff; --c2:#00e5ff; --c3:#ff2d95;
  --blur:70px; --tempo:1; --waveH:1;
  --line:rgba(255,255,255,.16); --txt:#fbfaff; --muted:rgba(251,250,255,.7);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--txt);
  min-height:100vh;overflow-x:hidden;background:#07060d;
  padding:0 16px 70px}
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(120deg, #0a0716, #120a24 60%, #071019)}

.mesh{position:absolute;inset:-10%;filter:blur(var(--blur))}
.m{position:absolute;border-radius:50%;mix-blend-mode:screen;opacity:.85;
  animation-duration:calc(22s / var(--tempo));animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;animation-direction:alternate}
.m1{width:56vw;height:56vw;left:-10%;top:-14%;background:radial-gradient(circle at 35% 35%, var(--c1), transparent 68%)}
.m2{width:52vw;height:52vw;right:-12%;top:6%;background:radial-gradient(circle at 60% 40%, var(--c2), transparent 68%);
  animation-name:drift2;animation-delay:-6s}
.m3{width:60vw;height:60vw;left:16%;bottom:-24%;background:radial-gradient(circle at 50% 50%, var(--c3), transparent 68%);
  animation-name:drift3;animation-delay:-11s}
.m4{width:34vw;height:34vw;right:16%;bottom:-10%;background:radial-gradient(circle at 40% 60%, var(--c1), transparent 70%);
  animation-name:drift4;animation-delay:-3s}
@keyframes drift1{to{transform:translate3d(18vw,10vh,0) scale(1.25)}}
@keyframes drift2{to{transform:translate3d(-22vw,16vh,0) scale(.85)}}
@keyframes drift3{to{transform:translate3d(16vw,-18vh,0) scale(1.15)}}
@keyframes drift4{to{transform:translate3d(-14vw,-12vh,0) scale(1.3)}}
.m1{animation-name:drift1}

body.noAnim .m{animation-play-state:paused}

/* Wellen */
.waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:44vh}
.w{opacity:.5}
.w1{fill:var(--c1);opacity:.55;animation:wave 12s ease-in-out infinite alternate}
.w2{fill:var(--c2);opacity:.45;animation:wave 9s ease-in-out infinite alternate-reverse}
.w3{fill:var(--c3);opacity:.6;animation:wave 15s ease-in-out infinite alternate}
@keyframes wave{
  from{transform:translateX(0) scaleY(var(--waveH))}
  to{transform:translateX(-90px) scaleY(calc(var(--waveH) * 1.25))}
}
body.noAnim .w{animation-play-state:paused}

.wrap{position:relative;z-index:3;width:min(760px,100%);margin:0 auto;padding-top:78px}
.head{text-align:center;margin-bottom:30px;animation:up .7s cubic-bezier(.2,.8,.2,1) both}
.pill{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#ffe4f4;
  border:1px solid var(--line);padding:7px 15px;border-radius:99px;background:rgba(10,7,22,.4);
  backdrop-filter:blur(12px)}
h1{font-size:clamp(36px,7.5vw,62px);margin:16px 0 8px;letter-spacing:-.025em;
  text-shadow:0 12px 50px rgba(0,0,0,.6)}
h1 span{color:#fff;text-shadow:0 0 26px rgba(255,255,255,.55),0 0 70px var(--c2)}
.head p{color:var(--muted);font-size:15.5px;text-shadow:0 4px 24px rgba(0,0,0,.7)}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.glass{background:rgba(9,7,20,.5);border:1px solid var(--line);border-radius:24px;
  backdrop-filter:blur(20px) saturate(150%);box-shadow:0 30px 70px rgba(0,0,0,.55),
  inset 0 1px 0 rgba(255,255,255,.25)}
.panel{padding:26px;animation:up .7s .1s cubic-bezier(.2,.8,.2,1) both;
  display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.presets{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}
.p{flex:1;min-width:130px;padding:13px 14px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(135deg, color-mix(in srgb, var(--c1) 55%, transparent),
    color-mix(in srgb, var(--c2) 45%, transparent));
  color:#fff;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.3s;
  text-shadow:0 2px 10px rgba(0,0,0,.55)}
.p:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.5)}
.p.on{outline:2px solid #fff;outline-offset:2px}

.ctrl label{display:flex;justify-content:space-between;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.ctrl label b{color:#fff;text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;outline:none;
  background:linear-gradient(90deg,var(--c1),var(--c2)) 0/var(--fill,50%) 100% no-repeat,
             rgba(255,255,255,.18);cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:#fff;border:4px solid var(--c3);cursor:grab;box-shadow:0 6px 18px rgba(0,0,0,.55)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--c3)}

.actions{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  border-top:1px dashed rgba(255,255,255,.18);padding-top:18px}
.tg{padding:12px 20px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.1);
  color:#fff;font-family:inherit;font-size:14px;cursor:pointer;transition:.3s}
.tg:hover{transform:translateY(-3px);background:rgba(255,255,255,.2)}
.tg.on{background:#fff;color:#0b0718;font-weight:700}
.tg.ghost{border-style:dashed}
.name{margin-left:auto;font-size:14px;font-weight:700;letter-spacing:.06em;
  padding:9px 16px;border-radius:99px;background:rgba(9,7,20,.55);border:1px solid var(--line)}

@media (max-width:640px){
  .panel{grid-template-columns:1fr;padding:20px}
  .wrap{padding-top:56px}
  .waves{height:36vh}
}
@media (prefers-reduced-motion:reduce){.m,.w{animation:none!important}}