*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#050000}
body{color:#fff;font-family:"Courier New",monospace;overflow:hidden}
.matrix-page{position:relative;isolation:isolate;min-height:100svh;display:grid;place-items:center;overflow:hidden;background:#050000}
.image-layer{position:absolute;z-index:-4;inset:0;background:url("assets/matrix-red-background.jpg") center/cover no-repeat;opacity:.68;animation:breathe 12s ease-in-out infinite alternate}
#matrix{position:absolute;z-index:-2;inset:0;width:100%;height:100%;opacity:.84}
.vignette{position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(7,0,1,.08),rgba(5,0,0,.38) 52%,rgba(0,0,0,.9)),linear-gradient(180deg,rgba(0,0,0,.2),transparent 30%,rgba(0,0,0,.4))}
.content{width:min(780px,calc(100% - 34px));padding:2rem 1rem 1.5rem;text-align:center;animation:rise 1s cubic-bezier(.2,.8,.2,1) both;text-shadow:0 2px 14px #000}
.code-label{margin-bottom:.1rem;color:#ff7785;font-size:clamp(.62rem,1.6vw,.78rem);font-weight:bold;letter-spacing:.42em}.code-label b{color:white;padding:0 .35em}
h1{margin:0;color:#fff2f3;font:900 clamp(8rem,30vw,17rem)/.92 Arial,sans-serif;letter-spacing:-.075em;text-shadow:0 0 3px white,0 0 12px #ff334e,0 0 32px #ff001f,0 0 75px #f06;animation:flicker 5s infinite}
h2{margin:.85rem 0 .65rem;font-size:clamp(.9rem,2.6vw,1.4rem);letter-spacing:.22em;line-height:1.5;text-shadow:0 0 14px #f34}
.content p{margin:0 auto 1.5rem;color:#f0c9ce;font:clamp(.86rem,1.8vw,1.02rem)/1.65 Arial,sans-serif}
.home-link{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:48px;padding:.8rem 1.3rem;border:1px solid #ff3e54;border-radius:3px;background:rgba(30,0,5,.83);color:white;text-decoration:none;font:bold .72rem "Courier New",monospace;letter-spacing:.16em;box-shadow:0 0 12px #f003,inset 0 0 16px #f002;transition:.22s}
.home-link:hover,.home-link:focus-visible{outline:none;border-color:white;background:rgba(104,0,18,.88);transform:translateY(-3px);box-shadow:0 0 12px #ff1838,0 0 32px #f007}
.home-link>span{font-size:1.25rem}.home-link>b{opacity:0;transform:translateX(-5px);transition:.2s}.home-link:hover>b,.home-link:focus-visible>b{opacity:1;transform:none}
.status{margin-top:1.35rem;color:#ffb4be99;font-size:.58rem;letter-spacing:.15em}.status i,.hud-top i{display:inline-block;width:6px;height:6px;margin-right:.45rem;border-radius:50%;background:#ff1e3d;box-shadow:0 0 9px #ff1e3d;animation:blink 1s steps(2,start) infinite}.status>span{margin:0 .5rem;color:#a52a3c}
.dots{display:inline-block;overflow:hidden;vertical-align:bottom;animation:dots 1.2s steps(4,end) infinite}
.hud{position:absolute;left:1.5rem;right:1.5rem;display:flex;align-items:center;justify-content:space-between;color:#ffabb0a6;font-size:.57rem;letter-spacing:.2em}
.hud-top{top:1.3rem;justify-content:flex-start}.hud-top span{margin-left:.8rem;color:#ffffff66}.hud-bottom{bottom:1.25rem}
@keyframes blink{50%{opacity:.2}}@keyframes breathe{to{transform:scale(1.08);filter:brightness(.95)}}@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes flicker{0%,96%,100%{opacity:1}97%{opacity:.78}98%{opacity:.96}99%{opacity:.84}}@keyframes dots{from{width:0}to{width:1.3em}}
@media(max-width:600px){.content{padding:1.2rem .2rem}h1{font-size:clamp(7rem,39vw,12rem)}h2{letter-spacing:.12em}.hud{left:.8rem;right:.8rem;font-size:.48rem}.status{font-size:.48rem;letter-spacing:.08em}.desktop{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}