/* ===== Neon 10X: Bold neon on a pure black canvas ===== */
:root{
  --bg: #000000;
  --fg: #EEEEFF;
  --neon1: #00F5FF;   /* electric cyan */
  --neon2: #9A00FF;   /* ultraviolet */
  --neon3: #FF00A8;   /* magenta */
  --accent: #19FF6D;  /* lime neon */
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  display:grid;
  place-items:center;
}

.wrap{
  width:min(920px, 92vw);
  padding: clamp(16px, 4vw, 40px);
}

.neon-title{
  margin:0 0 clamp(16px, 3vw, 28px);
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--fg);
  text-shadow:
    0 0 0.3rem var(--fg),
    0 0 1.2rem var(--neon1),
    0 0 2.4rem var(--neon1),
    0 0 3.8rem var(--neon2),
    0 0 5rem var(--neon3);
  animation: glowPulse 3.5s ease-in-out infinite;
}
.neon-title span{
  color: var(--neon1);
  text-shadow:
    0 0 0.2rem #fff,
    0 0 1rem var(--neon1),
    0 0 2.2rem var(--neon1),
    0 0 3.4rem var(--neon2),
    0 0 4.6rem var(--neon3);
}

.controls{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin: 8px 0 8px;
}

input[type="number"]{
  background: rgba(255,255,255,0.03);
  border: 2px solid var(--neon1);
  color: var(--fg);
  padding: 12px 14px;
  border-radius: 14px;
  min-width: 240px;
  font-size: clamp(16px, 2.6vw, 24px);
  outline: none;
  box-shadow:
    0 0 0.3rem var(--neon1),
    inset 0 0 0.6rem rgba(0,255,255,0.25);
  transition: box-shadow .25s ease, transform .1s ease, border-color .25s ease;
}
input[type="number"]::placeholder{color:#99A; opacity: .8;}
input[type="number"]:focus{
  border-color: var(--accent);
  box-shadow:
    0 0 0.4rem var(--accent),
    0 0 1.2rem var(--accent),
    inset 0 0 0.8rem rgba(25,255,109,0.25);
  transform: translateY(-1px);
}

.neon-btn{
  --btnGlow: var(--neon3);
  appearance:none;
  background: linear-gradient(135deg, rgba(255,0,168,0.15), rgba(154,0,255,0.15));
  border:2px solid var(--btnGlow);
  color:#fff;
  padding: 12px 22px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(14px, 2.2vw, 20px);
  cursor:pointer;
  box-shadow:
    0 0 0.4rem var(--btnGlow),
    0 0 1.2rem var(--btnGlow),
    inset 0 0 .6rem rgba(255,0,168,.25);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.neon-btn:hover{
  filter: brightness(1.15);
  box-shadow:
    0 0 0.6rem var(--btnGlow),
    0 0 1.6rem var(--btnGlow),
    inset 0 0 .9rem rgba(255,0,168,.35);
}
.neon-btn:active{ transform: translateY(1px) scale(0.98); }

.result-card{
  margin-top: 18px;
  background: radial-gradient(1200px 300px at 50% -20%, rgba(0,245,255,0.14), rgba(0,0,0,0)) ,
              rgba(255,255,255,0.02);
  border: 2px solid var(--neon1);
  border-radius: 18px;
  padding: 16px 18px 20px;
  position: relative;
  overflow:hidden;
  box-shadow:
    0 0 .4rem var(--neon1),
    0 0 1.2rem rgba(0,245,255,0.6),
    inset 0 0 1.2rem rgba(0,245,255,0.15);
}
.result-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.04) 0px,
    rgba(255,255,255,0.04) 2px,
    rgba(255,255,255,0.0) 4px
  );
  pointer-events:none;
  mix-blend-mode: screen;
}

.result-label{
  margin:0 0 8px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size: clamp(12px, 1.8vw, 14px);
  color: #CFE;
  opacity:.85;
}

.result-value{
  font-size: clamp(32px, 6.5vw, 88px);
  font-weight: 900;
  line-height: 1.1;
  color: var(--accent);
  text-shadow:
    0 0 .2rem #fff,
    0 0 1rem var(--accent),
    0 0 2.4rem var(--accent);
  min-height: 1.2em;
  letter-spacing:.03em;
  word-break: break-word;
}

.hint{
  margin: 0 0 10px;
  opacity:.7;
  font-size: .95rem;
}

.footer{
  margin-top: 26px;
  text-align:center;
  opacity:.7;
}

/* Flicker effect on the title for that neon sign vibe */
@keyframes glowPulse{
  0%, 100% {
    filter: drop-shadow(0 0 0.5rem var(--neon1));
    opacity: 1;
  }
  55% { filter: drop-shadow(0 0 0.9rem var(--neon2)); }
  70% { opacity: .95; }
  72% { opacity: .7; }
  74% { opacity: 1; }
}

/* Accessible offscreen label helper */
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}