:root{color-scheme:dark;--red:#e40000;--dim:#620000;--black:#020202;--paper:#eee7e7}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000;color:var(--paper);font-family:ui-monospace,"SFMono-Regular","Cascadia Mono","Microsoft YaHei",monospace}
body{min-height:100vh;overflow:hidden;background:radial-gradient(circle at 50% 42%,#210000 0,#080000 32%,#000 72%)}
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:0}
body::before{inset:-15%;background:repeating-conic-gradient(from 14deg at 50% 50%,transparent 0 8deg,rgba(255,0,0,.035) 8deg 9deg,transparent 9deg 22deg);animation:turn 26s linear infinite}
body::after{inset:0;background:linear-gradient(107deg,transparent 0 47%,rgba(255,0,0,.08) 47.2% 47.5%,transparent 47.7%),linear-gradient(73deg,transparent 0 62%,rgba(255,0,0,.06) 62.1% 62.4%,transparent 62.6%)}
.noise{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.12;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scan{position:fixed;inset:0;z-index:7;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,0,0,.025) 0 1px,transparent 1px 4px);animation:flicker 5s steps(1,end) infinite}
.gate-screen{position:relative;z-index:2;display:grid;place-items:center;width:100%;min-height:100vh;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
.watch-panel{position:relative;width:min(560px,100%);padding:clamp(30px,7vw,64px);border:1px solid #8e0000;background:linear-gradient(133deg,rgba(2,2,2,.96),rgba(24,0,0,.93));box-shadow:18px 18px 0 #120000,0 0 80px rgba(180,0,0,.18),inset 0 0 60px rgba(120,0,0,.12);clip-path:polygon(0 0,94% 0,100% 9%,99% 61%,100% 62%,100% 100%,7% 100%,0 90%,1% 38%,0 37%)}
.watch-panel::before{content:"";position:absolute;inset:9px;border:1px solid rgba(255,0,0,.13);clip-path:polygon(0 0,100% 0,100% 84%,88% 100%,0 100%)}
.fault-code{margin:0 0 24px;color:#aa2222;font-size:10px;line-height:1.5;letter-spacing:.18em}
h1{position:relative;width:max-content;max-width:100%;margin:0 0 46px;color:#fff;font-size:clamp(38px,10vw,72px);line-height:1;letter-spacing:0;text-shadow:4px 0 var(--red),-3px 0 #3a0000;animation:title-error 4.3s steps(1,end) infinite}
h1::before,h1::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;overflow:hidden}
h1::before{color:#ff1c1c;clip-path:inset(12% 0 62% 0);transform:translateX(5px);opacity:.7}
h1::after{color:#fff;clip-path:inset(66% 0 12% 0);transform:translateX(-4px);opacity:.65}
form{position:relative;z-index:2}
label{display:block;margin-bottom:11px;color:#c5aaaa;font-size:12px;letter-spacing:.16em}
.input-line{display:grid;grid-template-columns:1fr 52px;height:54px;border:1px solid #750000;background:#030000;box-shadow:inset 0 0 22px rgba(100,0,0,.22)}
input,button{border:0;border-radius:0;font:inherit}
input{min-width:0;padding:0 16px;outline:0;background:transparent;color:#fff;font-size:17px;letter-spacing:.08em;caret-color:#ff1b1b}
input:focus{box-shadow:inset 0 -2px #e00000}
button{display:grid;place-items:center;background:#a90000;color:#fff;font-size:24px;cursor:pointer;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
button:hover,button:focus-visible{background:#e00000;outline:1px solid #ff5c5c;outline-offset:3px}
.message{min-height:20px;margin:10px 0 0;color:#ef3030;font-size:12px;letter-spacing:.1em}
.watch-panel.denied{animation:denied .24s steps(2,end) 2}
.corner{position:absolute;width:28px;height:28px;border-color:#e00000}.corner-a{left:16px;top:16px;border-left:2px solid;border-top:2px solid}.corner-b{right:16px;bottom:16px;border-right:2px solid;border-bottom:2px solid}
body.unlocked{background:#000}
body.unlocked::before,body.unlocked::after,body.unlocked .noise,body.unlocked .scan{display:none}
.unlocked-content{display:grid;justify-items:center;width:min(520px,100%);gap:42px}
.late-message{margin:0;color:#f0eded;font-size:clamp(24px,6vw,42px);font-weight:400;letter-spacing:0;text-align:center}
.demo-entry{display:flex;align-items:center;justify-content:space-between;width:min(360px,100%);min-height:60px;padding:0 18px;border:1px solid #4b0000;color:#b8a9a9;background:#080000;text-decoration:none;font-size:14px;letter-spacing:.08em;clip-path:polygon(0 0,96% 0,100% 26%,99% 100%,4% 100%,0 74%);transition:border-color .16s ease,color .16s ease,background .16s ease}
.demo-entry:hover,.demo-entry:focus-visible{border-color:#d00000;color:#fff;background:#180000;outline:0}
.demo-entry i{color:#e30000;font-size:22px;font-style:normal}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes flicker{0%,89%,92%,100%{opacity:1}90%{opacity:.2}91%{opacity:.75}}
@keyframes title-error{0%,81%,84%,100%{transform:translateX(0)}82%{transform:translateX(8px) skewX(-5deg)}83%{transform:translateX(-5px)}}
@keyframes denied{0%{transform:translateX(0)}50%{transform:translateX(9px)}100%{transform:translateX(-7px)}}
@media (max-width:520px){.watch-panel{padding:34px 24px;box-shadow:10px 10px 0 #120000}h1{margin-bottom:38px}.fault-code{font-size:9px}.input-line{height:52px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}