:root{
  --bg:#05060a; --fg:#eef2ff; --dim:#8b93b0; --accent:#5cf0d0; --accent2:#7a7bff;
  --warn:#ffb86b; --ok:#5cf0d0; --bad:#ff6b8a; --card:rgba(255,255,255,.05);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  overflow:hidden;overscroll-behavior:none}
#net{position:fixed;inset:0;z-index:0;opacity:.85}
#vibe{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 40%,rgba(122,123,255,.10),transparent 70%)}
#app{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:28px;text-align:center}

.screen{width:100%;max-width:520px;display:none;flex-direction:column;
  align-items:center;gap:22px;animation:in .5s ease both}
.screen.on{display:flex}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

h1{font-size:clamp(30px,9vw,46px);letter-spacing:.14em;font-weight:800}
h2{font-size:clamp(19px,5.4vw,25px);line-height:1.35;font-weight:700}
p{font-size:clamp(15px,4.2vw,18px);line-height:1.5;color:var(--dim)}
.big{font-size:clamp(20px,5.8vw,27px);line-height:1.3;font-weight:700;color:var(--fg)}
.glow{color:var(--accent);text-shadow:0 0 22px rgba(92,240,208,.45)}
.glow2{color:var(--accent2);text-shadow:0 0 22px rgba(122,123,255,.45)}

button.opt{width:100%;max-width:420px;background:var(--card);border:1px solid rgba(255,255,255,.12);
  color:var(--fg);padding:16px 18px;border-radius:16px;font-size:17px;font-weight:600;
  transition:.18s transform,.18s background,.18s border-color;cursor:pointer;backdrop-filter:blur(8px)}
button.opt:active{transform:scale(.97)}
button.opt.sel{background:rgba(92,240,208,.14);border-color:var(--accent)}
button.cta{margin-top:6px;background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#04121a;border:none;padding:16px 30px;border-radius:999px;font-size:18px;font-weight:800;
  box-shadow:0 8px 40px rgba(92,240,208,.28);cursor:pointer}
button.cta:active{transform:scale(.96)}
.hidden{display:none!important}
.opts{display:flex;flex-direction:column;gap:11px;width:100%;align-items:center}

.flow{display:flex;flex-direction:column;align-items:center;gap:9px;font-weight:700;letter-spacing:.05em}
.flow .step{padding:11px 18px;border-radius:13px;border:1px solid rgba(255,255,255,.14);
  background:var(--card);min-width:190px}
.arrow{color:var(--dim);font-size:18px;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

.card{width:100%;max-width:430px;background:var(--card);border:1px solid rgba(255,255,255,.13);
  border-radius:20px;padding:24px 20px;font-size:18px;line-height:1.45;backdrop-filter:blur(10px)}
.verdict{font-size:15px;font-weight:800;margin-top:14px;letter-spacing:.06em}
.verdict.ok{color:var(--ok)} .verdict.bad{color:var(--bad)}

.pulse-num{font-size:clamp(34px,11vw,54px);font-weight:800;color:var(--accent)}
.pulse-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%;max-width:430px}
.pulse-grid .cell{background:var(--card);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px}
.pulse-grid .n{font-size:30px;font-weight:800;color:var(--accent)}
.pulse-grid .l{font-size:12.5px;color:var(--dim);margin-top:5px}

.tagrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chain{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;font-size:13px;color:var(--dim)}
.chain span{background:var(--card);border:1px solid rgba(255,255,255,.1);padding:7px 11px;border-radius:999px}
.foot{position:fixed;bottom:16px;left:0;right:0;text-align:center;font-size:11px;
  letter-spacing:.28em;color:#4a5170;z-index:3}
.searching .dot{display:inline-block;animation:blink 1.2s infinite}
.searching .dot:nth-child(2){animation-delay:.2s}
.searching .dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}