:root { color-scheme: dark; --green: #38ff78; --dim: #179446; --black: #000; --red: #ff4f68; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: #000; }
body { min-height: 100vh; min-height: 100dvh; overflow: hidden; color: var(--green); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
#matrix { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .54; filter: contrast(1.15) saturate(1.3); }
body::after { position: fixed; inset: 0; pointer-events: none; content: ""; background: radial-gradient(circle at center, transparent 0 20%, #0008 68%, #000 100%), repeating-linear-gradient(0deg, #0000 0 3px, #0005 4px); }
main { position: relative; z-index: 2; display: grid; min-height: 100vh; min-height: 100dvh; place-items: center; padding: 22px; }
form { width: min(520px, 100%); border: 1px solid #25ca5c; background: #000e; box-shadow: 0 0 0 1px #031c0b, 0 0 70px #00ff4133, inset 0 0 55px #00ff4009; }
.terminal-head { display: flex; align-items: center; gap: 7px; height: 39px; padding: 0 13px; border-bottom: 1px solid #176e36; color: #1ca14a; background: #041208; font-size: 9px; letter-spacing: .1em; }
.terminal-head span { color: #23ad51; font-size: 11px; }
.terminal-head b { margin-left: 8px; }
section { padding: clamp(24px, 6vw, 42px); }
.boot { margin: 0 0 30px; color: #168d42; font-size: 9px; line-height: 1.7; letter-spacing: .08em; }
h1 { margin: 0; color: #eaffef; font: 950 clamp(39px, 10vw, 62px)/.86 Arial, sans-serif; letter-spacing: -.055em; }
h1 em { color: var(--green); font-style: normal; text-shadow: 0 0 18px #2fff6d80; }
.challenge { min-height: 42px; margin: 26px 0 24px; color: #28d75f; font-size: 11px; line-height: 1.5; }
.cursor { margin-left: 4px; animation: blink .8s steps(1) infinite; }
label { display: grid; grid-template-columns: 88px 1fr; align-items: center; margin-top: 10px; border: 1px solid #176c34; background: #010a04; }
label:focus-within { border-color: var(--green); box-shadow: 0 0 19px #2cff6822; }
label span { padding-left: 13px; color: #1ebd52; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
input { min-width: 0; height: 54px; padding: 0 15px; border: 0; border-left: 1px solid #124f28; outline: 0; color: #effff2; background: transparent; font: 700 15px/1 ui-monospace, monospace; caret-color: var(--green); }
input::placeholder { color: #315b3e; }
#error { min-height: 21px; margin: 12px 0 4px; color: var(--red); font-size: 11px; font-weight: 800; }
button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 61px; padding: 0 18px; border: 1px solid var(--green); color: #001406; background: var(--green); font: 950 12px/1 Arial, sans-serif; cursor: pointer; box-shadow: 6px 6px 0 #135f2c; }
button:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 #135f2c; }
button:disabled { cursor: wait; filter: grayscale(.6); opacity: .65; transform: none; }
button b { font: 900 10px/1 ui-monospace, monospace; }
section > small { display: block; margin-top: 20px; color: #145f30; font-size: 8px; letter-spacing: .08em; text-align: center; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 540px) {
  main { padding: 12px; }
  section { padding: 25px 19px 27px; }
  .boot { margin-bottom: 24px; }
  label { grid-template-columns: 76px 1fr; }
  input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }