:root{
  --bg:#080a14; --card:rgba(255,255,255,.05); --line:rgba(255,255,255,.11);
  --txt:#eef2ff; --muted:#8f97b8; --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;display:grid;place-items:center;padding:50px 16px;overflow-x:hidden}
.bg-glow{position:fixed;inset:0;background:
  radial-gradient(640px 380px at 88% 8%, rgba(0,229,255,.22), transparent 65%),
  radial-gradient(640px 380px at 8% 92%, rgba(124,92,255,.3), transparent 65%);
  animation:drift 17s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.15) translate(-24px,18px)}}

.wrap{width:min(760px,100%);display:grid;gap:20px}
.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:var(--card)}
h1{font-size:clamp(32px,6.5vw,52px);margin:16px 0 8px;letter-spacing:-.02em}
h1 span{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{color:var(--muted);font-size:15px}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.glass{background:var(--card);border:1px solid var(--line);border-radius:24px;backdrop-filter:blur(18px);
  box-shadow:0 30px 70px rgba(0,0,0,.5)}

.rings{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:28px 20px;
  animation:up .7s .1s cubic-bezier(.2,.8,.2,1) both}
.r{position:relative;text-align:center}
.r svg{width:100%;max-width:150px;transform:rotate(-90deg)}
.r circle{fill:none;stroke-width:9;stroke-linecap:round}
.r .bgc{stroke:rgba(255,255,255,.08)}
.r .fg{stroke-dasharray:326.7;stroke-dashoffset:326.7;
  transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 0 8px rgba(124,92,255,.6))}
.center{position:absolute;top:calc(50% - 26px);left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:baseline;font-variant-numeric:tabular-nums}
.center b{font-size:clamp(19px,3.6vw,26px);letter-spacing:-.02em}
.center span{font-size:13px;color:var(--muted)}
.center.spin{font-size:30px;color:#ff6b9d;animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,-50%) scale(1.22) rotate(12deg)}}
.r.ind .fg{animation:ind 1.6s cubic-bezier(.5,0,.5,1) infinite;stroke-dasharray:80 246}
@keyframes ind{
  0%{stroke-dashoffset:0;transform:rotate(0)}
  50%{stroke-dashoffset:-140;transform:rotate(450deg)}
  100%{stroke-dashoffset:-326;transform:rotate(720deg)}
}
.r p{margin-top:10px;font-size:13.5px;color:var(--muted)}

.control{padding:26px;animation:up .7s .18s cubic-bezier(.2,.8,.2,1) both}
.row1{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.row1 label{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.row1 output{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:9px;border-radius:99px;outline:none;
  background:linear-gradient(90deg,var(--acc),var(--acc2)) 0/var(--fill,78%) 100% no-repeat,
             rgba(255,255,255,.1);cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:#fff;border:4px solid var(--acc2);cursor:grab;box-shadow:0 8px 20px rgba(0,0,0,.5);transition:.2s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--acc2)}

.btns{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.btns button{padding:11px 18px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:var(--txt);font-family:inherit;font-size:13.5px;cursor:pointer;transition:.3s;flex:1;min-width:78px}
.btns button:hover{background:linear-gradient(90deg,var(--acc),var(--acc2));border-color:transparent;color:#080a14;
  transform:translateY(-3px)}
.btns .ghost{border-style:dashed}
.linear{height:9px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:22px}
.linear i{display:block;height:100%;width:0;border-radius:99px;transition:width 1.2s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(90deg,var(--acc),var(--acc2));box-shadow:0 0 16px rgba(0,229,255,.5)}
.hint{margin-top:12px;font-size:13px;color:var(--muted);text-align:center}

@keyframes pulse{0%{filter:drop-shadow(0 0 8px rgba(124,92,255,.6))}
  50%{filter:drop-shadow(0 0 26px rgba(0,229,255,1)) brightness(1.4)}100%{filter:drop-shadow(0 0 8px rgba(124,92,255,.6))}}
.r.pulsing .fg{animation:pulse .8s ease-in-out 2}

@media (max-width:640px){
  .rings{grid-template-columns:1fr;gap:22px;padding:22px 14px}
  .r svg{max-width:130px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}