:root {
  color-scheme: dark;
  --ink: #080305;
  --wine: #570b17;
  --red: #d4233d;
  --hot: #ff4f64;
  --mist: #e6bdc3;
  --line: rgba(255, 93, 113, .28);
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 50% 15%, #2d0710 0, var(--ink) 42%, #020102 100%);
  color: var(--mist);
  font-family: "Courier New", ui-monospace, monospace;
}

.shell { position: relative; isolation: isolate; min-height: 100vh; padding: 25px clamp(22px, 6vw, 96px); display: flex; flex-direction: column; }
.grid { position: fixed; z-index: -2; inset: 0; opacity: .2; background-image: linear-gradient(rgba(217, 35, 61, .23) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 35, 61, .18) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, transparent, #000 35%, transparent 90%); }
.noise { position: fixed; z-index: -1; inset: 0; pointer-events: none; opacity: .16; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.13) 4px); mix-blend-mode: soft-light; }

.topline, footer { display: flex; justify-content: space-between; gap: 20px; color: #a16f77; font-size: .67rem; letter-spacing: .14em; }
.topline { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.status { color: #db6170; }
.status i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 11px var(--hot); animation: blink 2.8s infinite; }

.hero { width: min(100%, 870px); margin: auto; padding: 70px 0 48px; text-align: center; }
.eyebrow { margin: 0 0 16px; color: #c6848f; font-size: .72rem; letter-spacing: .27em; }
h1 { position: relative; margin: 0; color: #f2cbd1; font-family: Impact, "Arial Black", sans-serif; font-size: clamp(4.7rem, 18vw, 11.5rem); line-height: .8; letter-spacing: -.055em; text-shadow: 0 0 4px #fff1f3, 0 0 18px var(--red), 0 0 45px var(--wine), 4px 0 0 rgba(96, 0, 16, .8); animation: breathe 4.8s ease-in-out infinite; }
h1::after { content: attr(data-text); position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 1px rgba(255, 93, 113, .72); transform: translate(3px, 2px); clip-path: inset(53% 0 36% 0); opacity: .75; }
.subtitle { max-width: 550px; margin: 28px auto 34px; color: #b98d94; font-size: clamp(.84rem, 1.8vw, 1rem); line-height: 1.7; }

.console { max-width: 480px; margin: auto; text-align: left; border: 1px solid var(--line); background: rgba(15, 3, 6, .76); box-shadow: 0 0 0 1px rgba(255, 80, 101, .05), 0 20px 60px rgba(0, 0, 0, .55); }
.console-bar { display: flex; justify-content: space-between; gap: 16px; padding: 11px 15px; border-bottom: 1px solid var(--line); color: #b87c84; font-size: .59rem; letter-spacing: .12em; }
form { padding: 20px; }
label { display: block; margin: 0 0 7px; color: #b77a83; font-size: .64rem; letter-spacing: .14em; }
input { width: 100%; margin-bottom: 16px; padding: 12px; border: 1px solid #70303c; border-radius: 0; outline: none; background: #0a0305; color: #ffe8eb; font: inherit; font-size: .9rem; }
input:focus { border-color: var(--hot); box-shadow: 0 0 16px rgba(255, 79, 100, .22); }
button { width: 100%; padding: 14px; cursor: pointer; border: 1px solid var(--red); border-radius: 0; background: linear-gradient(90deg, #7e101f, #c51e35); color: #fff5f5; font: bold .73rem "Courier New", monospace; letter-spacing: .16em; transition: .25s ease; }
button:hover:not(:disabled) { box-shadow: 0 0 24px rgba(255, 50, 77, .65); transform: translateY(-1px); }
button:disabled { cursor: wait; opacity: .65; }
.message { min-height: 1.3em; margin: 14px 0 0; color: #a6787d; font-size: .68rem; line-height: 1.45; }

.modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; width: min(100%, 700px); margin: 0 auto 48px; }
.module { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px; border: 1px solid rgba(199, 40, 60, .27); background: rgba(39, 5, 11, .34); color: inherit; text-decoration: none; transition: .25s ease; }
.module:hover { border-color: var(--hot); background: rgba(94, 10, 24, .48); box-shadow: 0 0 23px rgba(187, 23, 48, .15); }
.module-number { color: var(--hot); font-size: 1.25rem; }
.module strong, .module small { display: block; }
.module strong { color: #e5b5bc; font-size: .72rem; letter-spacing: .08em; }
.module small { margin-top: 5px; color: #a4737a; font-size: .65rem; }
.module b { color: var(--hot); font-size: 1.3rem; }
footer { margin-top: auto; padding-top: 17px; border-top: 1px solid var(--line); }

@keyframes breathe { 0%, 100% { filter: brightness(.85); text-shadow: 0 0 4px #fff1f3, 0 0 14px var(--red), 0 0 35px var(--wine), 4px 0 0 rgba(96,0,16,.8); } 50% { filter: brightness(1.18); text-shadow: 0 0 5px #fff1f3, 0 0 25px var(--hot), 0 0 65px #8e1429, 4px 0 0 rgba(96,0,16,.8); } }
@keyframes blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 560px) { .shell { padding: 18px; } .topline, footer { font-size: .55rem; } .topline > :first-child { max-width: 120px; } .hero { padding-top: 55px; } .modules { grid-template-columns: 1fr; } .console-bar { font-size: .5rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }