:root{
  --bg:#06060e; --line:rgba(255,255,255,.14); --txt:#eef2ff; --muted:#9298b8;
  --acc:#7c5cff; --acc2:#00e5ff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--txt);background:var(--bg);
  min-height:100vh;overflow:hidden}
#field{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}

.wrap{position:relative;z-index:2;width:min(760px,100%);margin:0 auto;padding:70px 16px 40px;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;gap:24px}
.head{text-align:center;animation:up .7s cubic-bezier(.2,.8,.2,1) both}
.pill{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc2);
  border:1px solid var(--line);padding:7px 15px;border-radius:99px;background:rgba(255,255,255,.05)}
h1{font-size:clamp(34px,7vw,58px);margin:16px 0 8px;letter-spacing:-.02em;
  text-shadow:0 10px 50px rgba(0,0,0,.7)}
h1 span{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{color:#b9c0dd;font-size:15.5px;text-shadow:0 4px 22px rgba(0,0,0,.8)}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.glass{background:rgba(10,10,24,.6);border:1px solid var(--line);border-radius:24px;
  backdrop-filter:blur(18px) saturate(140%);box-shadow:0 30px 70px rgba(0,0,0,.6),
  inset 0 1px 0 rgba(255,255,255,.22)}
.panel{padding:26px;animation:up .7s .1s cubic-bezier(.2,.8,.2,1) both;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px 22px}
.ctrl label{display:flex;justify-content:space-between;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ctrl label b{color:var(--acc2);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(--acc),var(--acc2)) 0/var(--fill,50%) 100% no-repeat,
             rgba(255,255,255,.12);cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:#fff;border:4px solid var(--acc2);cursor:grab;box-shadow:0 6px 18px rgba(0,0,0,.6)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--acc2)}

.switches{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}
.tg{padding:11px 18px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:var(--muted);font-family:inherit;font-size:13.5px;cursor:pointer;transition:.3s;flex:1;min-width:140px}
.tg:hover{color:var(--txt);border-color:var(--acc);transform:translateY(-3px)}
.tg.on{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#06060e;border-color:transparent;font-weight:700}

.stats{grid-column:1/-1;display:flex;gap:14px;flex-wrap:wrap;padding-top:6px;
  border-top:1px dashed rgba(255,255,255,.14)}
.stats span{font-size:13px;color:var(--muted);padding-top:12px}
.stats b{color:var(--acc2);font-variant-numeric:tabular-nums}

.hint{text-align:center;color:#9aa2c4;font-size:13.5px;text-shadow:0 3px 16px rgba(0,0,0,.8)}

@media (max-width:760px){
  .panel{grid-template-columns:1fr;padding:20px}
  .wrap{padding:44px 14px 30px;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}