:root{
  --bg:#070A0F;
  --text:#E5E7EB;
  --muted:#94A3B8;
  --border:rgba(148,163,184,.18);
  --primary:#22C55E;
  --primaryText:#07110A;
  --btnHover:#34D399;
  --shadow: 0 18px 55px rgba(0,0,0,.55);
  --radius:14px;

  --danger:#EF4444;
  --amber:#F59E0B;
  --cyan:#22D3EE;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 20% 15%, rgba(34,197,94,.10), transparent 55%),
    radial-gradient(900px 500px at 85% 75%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg, #05070C 0%, #070A0F 45%, #05070C 100%);
  color:var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow-x:hidden;
}

/* subtle film grain */
.noise{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.scanlines{
  position:fixed; inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03) 0px,
    rgba(255,255,255,.03) 1px,
    transparent 2px,
    transparent 6px
  );
  opacity:.12;
}

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}

.container{ width:min(640px, 94vw); }

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  color:var(--muted);
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(6px);
}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--danger);
  box-shadow: 0 0 0 3px rgba(239,68,68,.14), 0 0 18px rgba(239,68,68,.25);
}

.code{
  margin:18px 0 6px 0;
  font-size:72px;
  font-weight:900;
  letter-spacing:-.06em;
  line-height:1;
  text-shadow: 0 0 18px rgba(34,197,94,.25);
}

h1{
  margin:0;
  font-size:22px;
  letter-spacing:-.02em;
}

p{
  margin:12px 0 0 0;
  color:var(--muted);
  line-height:1.55;
  font-size:14.8px;
}

.lead{
  margin-top:14px;
  color:#D1D5DB;
}

.terminal{
  margin-top:16px;
  border:1px solid var(--border);
  border-radius: 16px;
  overflow:hidden;
  background: rgba(2,6,23,.60);
  box-shadow: var(--shadow);
  padding:14px 14px 12px;
}

.line{ font-size:13px; line-height:1.55; margin:2px 0; }
.dim{ color: rgba(148,163,184,.85); }
.ok{ color: rgba(34,197,94,.95); }
.warn{ color: rgba(245,158,11,.95); }
.accent{ color: var(--cyan); font-weight:700; }
.muted{ color: rgba(148,163,184,.75); }
.type{ color:#E5E7EB; }

.actions{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

button{
  appearance:none;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:12px 16px;
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  user-select:none;
}
button:active{ transform: scale(.98); }

.primary{
  background:var(--primary);
  color:var(--primaryText);
  border-color: rgba(34,197,94,.65);
  box-shadow: 0 12px 36px rgba(34,197,94,.12);
}
.primary:hover{
  background: var(--btnHover);
  border-color: rgba(52,211,153,.85);
  box-shadow: 0 16px 50px rgba(34,197,94,.18);
}

.secondary{
  background: rgba(2,6,23,.35);
  color:var(--text);
}
.secondary:hover{ border-color: rgba(148,163,184,.35); }

.footer{
  margin-top:18px;
  font-size:12.5px;
  color:rgba(148,163,184,.8);
  border-top:1px solid var(--border);
  padding-top:14px;
}

.fade-in{ animation: fadeIn .18s ease-out; }
@keyframes fadeIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

/* glitch effect */
.glitch{
  position:relative;
  display:inline-block;
}
.glitch::before,
.glitch::after{
  content: attr(data-text);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  overflow:hidden;
  opacity:.85;
}
.glitch::before{
  transform: translate(2px, 0);
  color: rgba(34,211,238,.9);
  clip-path: inset(0 0 55% 0);
  animation: glitchTop 2.2s infinite linear alternate-reverse;
}
.glitch::after{
  transform: translate(-2px, 0);
  color: rgba(239,68,68,.85);
  clip-path: inset(55% 0 0 0);
  animation: glitchBot 1.9s infinite linear alternate-reverse;
}
@keyframes glitchTop{
  0%{ clip-path: inset(0 0 65% 0); }
  10%{ clip-path: inset(0 0 40% 0); }
  20%{ clip-path: inset(0 0 75% 0); }
  30%{ clip-path: inset(0 0 55% 0); }
  40%{ clip-path: inset(0 0 80% 0); }
  50%{ clip-path: inset(0 0 50% 0); }
  60%{ clip-path: inset(0 0 70% 0); }
  70%{ clip-path: inset(0 0 45% 0); }
  80%{ clip-path: inset(0 0 85% 0); }
  90%{ clip-path: inset(0 0 60% 0); }
  100%{ clip-path: inset(0 0 75% 0); }
}
@keyframes glitchBot{
  0%{ clip-path: inset(60% 0 0 0); }
  10%{ clip-path: inset(45% 0 0 0); }
  20%{ clip-path: inset(70% 0 0 0); }
  30%{ clip-path: inset(55% 0 0 0); }
  40%{ clip-path: inset(80% 0 0 0); }
  50%{ clip-path: inset(50% 0 0 0); }
  60%{ clip-path: inset(75% 0 0 0); }
  70%{ clip-path: inset(58% 0 0 0); }
  80%{ clip-path: inset(85% 0 0 0); }
  90%{ clip-path: inset(62% 0 0 0); }
  100%{ clip-path: inset(78% 0 0 0); }
}

@media (max-width: 380px){
  .code{ font-size:60px; }
  h1{ font-size:20px; }
}