:root{
  --bg:#05060a; --cyan:#10d7ff; --mag:#ff2a6d; --fg:#eaf2ff; --muted:#94a3b8;
  --font: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:600 16px/1.4 var(--font);
  background-image:
    radial-gradient(1200px 520px at 110% 50%, #0c1130 0, transparent 60%),
    radial-gradient(1200px 520px at -10% 50%, #0a0f24 0, transparent 55%),
    linear-gradient(#060913,#04060d 60%, #03040a);
}
.wrap{min-height:100dvh; display:grid; place-items:center; padding:40px 20px; gap:28px}
.brand{display:grid; place-items:center; gap:16px; text-align:center}
.title{margin:0; font:800 clamp(18px,5vw,32px)/1.1 var(--font); letter-spacing:.08em; text-transform:uppercase}
.tag{margin:0; color:var(--muted); font-weight:500}

/* ===== GLITCH LOADING BAR (CSS-only) ===== */
.loader{ width:min(860px, 92vw) }
.bar{
  --p:37; /* fallback */
  position:relative; width:100%;
  height: clamp(22px, 5vw, 40px);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  box-shadow:
    0 10px 40px rgba(0,0,0,.6),
    0 0 120px rgba(16,215,255,.18),
    0 0 120px rgba(255,42,109,.12);
}
.bar .label{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font:700 12px/1 var(--font); letter-spacing:.18em; color:rgba(255,255,255,.85);
  user-select:none;
}
.bar .pct{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font:800 12px/1 var(--font); letter-spacing:.12em; color:#fff; user-select:none;
}
.bar .pct::after{ content: attr(data-val, "") }
.bar[data-progress] .pct::after{ content: attr(data-progress) "%" }

/* fill width by --p (0–100) */
.fill{
  position:absolute; inset:0; width: calc(var(--p) * 1%); height:100%;
  background:
    linear-gradient(90deg, rgba(16,215,255,0) 0%, rgba(16,215,255,.6) 10%, rgba(255,255,255,.9) 50%, rgba(255,42,109,.6) 90%, rgba(255,42,109,0) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 8px, rgba(255,255,255,.02) 8px 16px),
    linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.05));
  box-shadow:
    0 0 18px rgba(16,215,255,.45),
    0 0 28px rgba(255,42,109,.35),
    inset 0 0 18px rgba(255,255,255,.25);
  border-right:1px solid rgba(255,255,255,.35);
  filter: saturate(1.2);
}

/* RGB edge */
.fx.rgb{ pointer-events:none; position:absolute; inset:0; mix-blend-mode:screen; filter:blur(.6px) }
.fx.rgb::before,.fx.rgb::after{
  content:""; position:absolute; inset:0; border-radius:14px; border-right:1px solid transparent;
}
.fx.rgb::before{ box-shadow: inset calc((var(--p)*1%) - 2px) 0 0 0 var(--cyan) }
.fx.rgb::after { box-shadow: inset calc((var(--p)*1%) - 2px) 0 0 0 var(--mag) }

/* scanlines */
.fx.scan{ pointer-events:none; position:absolute; inset:0; mix-blend-mode:soft-light; opacity:.35 }
.fx.scan::before{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 2px, transparent 2px 4px);
}

/* noise */
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-1px,1px)} 50%{transform:translate(1px,-.5px)} 75%{transform:translate(.5px,.5px)} 100%{transform:translate(0,0)} }
.fx.noise{ position:absolute; inset:-20%; pointer-events:none; mix-blend-mode:overlay; opacity:.25; filter:contrast(160%) }
.fx.noise::before{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'160\' height=\'160\' viewBox=\'0 0 160 160\'%3E%3Cfilter id=\'n\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'.95\' numOctaves=\'2\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23n)\'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}

/* slices */
@keyframes slice { 0%{transform:translateX(0)} 50%{transform:translateX(6px)} 100%{transform:translateX(0)} }
.fx.slices{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen }
.fx.slices::before,.fx.slices::after{
  content:""; position:absolute; left:0; width:calc(var(--p) * 1%); height:18%;
  background:linear-gradient(90deg, rgba(16,215,255,0), rgba(16,215,255,.45), rgba(255,42,109,.35), rgba(255,42,109,0));
  filter: blur(1px); animation: slice 1.4s ease-in-out infinite;
}
.fx.slices::before{ top:22% }
.fx.slices::after { top:62%; animation-duration: 1s }

/* terminal */
.terminal{
  width:min(860px, 92vw); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(10,16,28,.9), rgba(5,6,10,.85));
  box-shadow:0 10px 40px rgba(0,0,0,.6), 0 0 80px rgba(16,215,255,.15), 0 0 80px rgba(255,42,109,.08);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  margin-top: 6px;
}
.term-head{
  height:40px; display:flex; align-items:center; gap:10px; padding:0 14px; background:rgba(255,255,255,.02);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.dot{width:10px; height:10px; border-radius:50%}
.red{background:#ff5f56}.yellow{background:#ffbd2e}.green{background:#27c93f}
.path{margin-left:auto; color:var(--muted); font-size:12px}
.term-body{padding:18px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:14px; line-height:1.5}
.term-body pre{margin:0 0 10px; white-space:pre-wrap; word-break:break-word}
.term-form{display:flex; align-items:center; gap:10px; padding:14px 18px; border-top:1px solid rgba(255,255,255,.06)}
.ps1{color:#9acbff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}
#cmd{ flex:1; background:transparent; border:none; outline:none; color:var(--fg); font-family: inherit; font-size:14px }
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.foot{display:flex; justify-content:center}
.cta{
  color:#fff; text-decoration:none; padding:10px 14px; border-radius:999px;
  background:linear-gradient(90deg, rgba(16,215,255,.25), rgba(255,42,109,.25));
  box-shadow: 0 0 24px rgba(16,215,255,.25), 0 0 24px rgba(255,42,109,.18);
  border:1px solid rgba(255,255,255,.1);
}