*{box-sizing:border-box}
html,body,main{width:100%;height:100%;margin:0;overflow:hidden;background:#05090d}
[hidden]{display:none!important}
main{position:relative;color:#e7f3f6;font-family:Arial,"Microsoft YaHei",sans-serif}
#display,#welcome{position:absolute;inset:0;width:100%;height:100%}
.sr{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
#start{position:absolute;inset:0;border:0;background:transparent;color:#e4bd71;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding-top:27vmin;font:500 14px/1.3 system-ui;letter-spacing:.34em}
#start small{font:8px ui-monospace,monospace;letter-spacing:.22em;color:#8b999f}
#start:focus-visible{outline:1px solid #bc9654;outline-offset:-10px}
#welcome{--unit:min(0.0891266vw,0.138889vh);background:radial-gradient(ellipse at 70% 45%,#102729 0%,#081416 36%,#04090c 70%);isolation:isolate;overflow:hidden;animation:reveal .52s ease-out both}
#welcome:after{content:"";position:absolute;inset:1.4%;border:1px solid #78959b20;pointer-events:none}
.portrait{position:absolute;inset:0;pointer-events:none}
.portrait img{position:absolute;left:calc(50% - 198 * var(--unit));top:50%;width:calc(542 * var(--unit));height:calc(720 * var(--unit));transform:translateY(-50%);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 90%,transparent);animation:armor-in 1s ease-out both}
#welcome header,#welcome footer,.signature,.console{position:absolute;left:7.1%;z-index:1}
#welcome header{top:6%;font:700 max(8px,calc(9 * var(--unit))) monospace;letter-spacing:.24em}
#welcome small,#welcome footer{display:block;color:#637277;font:600 max(6px,calc(6 * var(--unit))) monospace;letter-spacing:.26em}
#welcome header small{margin-top:.6em}
.signature{top:40%;animation:signature-in 1s .18s both}
.signature h1{font:800 calc(90 * var(--unit))/.95 Arial,sans-serif;letter-spacing:-.035em;margin:0;color:#eef8ff;text-shadow:0 0 22px #91d9ff21}
.signature:before{content:"";position:absolute;top:2%;left:-1.4vw;height:61%;width:1px;background:linear-gradient(transparent,#a4d7ea66,transparent)}
.rule{display:flex;align-items:center;gap:.75em;color:#71888d;font:10px monospace;margin:1em 0}
.rule:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,#8ca6ad55,transparent)}
.signature p{font:600 max(9px,calc(12 * var(--unit))) monospace;letter-spacing:.18em;margin:.5em 0 .6em}.signature i{font:normal 7px monospace;color:#dfc077;margin:0 .4em}
.console{top:70%;color:#84a1a5;font: max(7px,calc(8 * var(--unit))) /1.8 monospace;letter-spacing:.12em;animation:signature-in 1s .65s both}
.console span{display:block}.console b{display:block;width:.65em;height:.85em;background:#8bebac;box-shadow:0 0 8px #6fdc96;animation:cursor 1.1s steps(1) infinite}
#welcome footer{bottom:6%}
@keyframes cursor{50%{opacity:.18}}
@keyframes reveal{from{opacity:0}to{opacity:1}}
@keyframes armor-in{from{transform:translateY(-50%) scale(1.025);filter:brightness(.55)}to{transform:translateY(-50%) scale(1);filter:brightness(1)}}
@keyframes signature-in{from{opacity:0;translate:-8px 0}to{opacity:1;translate:0 0}}
@media(max-aspect-ratio:4/5){#welcome{--unit:0.145vw}.portrait img{height:74%;width:auto;left:12%;top:43%}.signature{top:63%}.console{top:82%}#welcome header{top:5%}}