:root{--w:720px;--h:200px}
*{box-sizing:border-box}
html,body{margin:0;background:#000}
body{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;font-family:Arial,Helvetica,sans-serif;color:#ddd}
.header{position:relative;width:var(--w);height:var(--h);overflow:hidden;background:#020303;isolation:isolate;box-shadow:0 0 35px #000}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.25) 65%,rgba(0,0,0,.92) 100%)}
.portal{position:absolute;left:260px;top:44px;width:200px;height:110px;z-index:3;pointer-events:none;filter:drop-shadow(0 0 7px rgba(180,190,200,.18))}
.portal-frame{position:absolute;inset:0;width:200px;height:110px;opacity:.78}
.portal-piece{position:absolute;width:200px;height:110px;opacity:.8;display:none}
.portal-left{left:0;top:0}.portal-right{left:0;top:0}.portal-top{left:0;top:0}.portal-bottom{left:0;top:0}
.logo{position:absolute;left:10px;right:10px;top:40px;text-align:center;color:#eee;font-size:20px;font-weight:700;letter-spacing:5px;text-shadow:0 0 6px #fff,0 0 20px rgba(170,190,210,.35)}
.tagline{position:absolute;left:0;right:0;top:66px;text-align:center;color:#9ca4aa;font-size:6px;letter-spacing:3px;opacity:.75}
.main-nav{position:absolute;left:0;right:0;top:142px;height:28px;z-index:5;display:flex;align-items:center;justify-content:center;gap:3px;padding:0 7px}
.main-nav a,.utility-nav a{position:relative;display:flex;align-items:center;justify-content:center;height:22px;padding:0 7px;color:#9b9da0;text-decoration:none;font-size:7px;letter-spacing:1px;white-space:nowrap;border:1px solid transparent;text-shadow:0 1px 2px #000;transition:color .16s,background .16s,border-color .16s,transform .16s}
.main-nav a:before{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:linear-gradient(90deg,transparent,#777,transparent);opacity:0;transition:opacity .16s}
.main-nav a:hover,.main-nav a.active{color:#fff;background:linear-gradient(#25292b,#080909);border-color:#555;transform:translateY(-1px)}
.main-nav a:hover:before,.main-nav a.active:before{opacity:.8}
.utility-nav{position:absolute;right:57px;top:58px;z-index:6;display:flex;gap:5px}
.utility-nav a{height:15px;padding:0 5px;font-size:6px;letter-spacing:1.5px;color:#777}
.utility-nav a:hover{color:#ddd}
.audio-toggle{position:absolute;right:7px;top:7px;z-index:7;border:0;background:transparent;color:#555;font:6px/1 Arial;letter-spacing:1px;padding:3px;cursor:pointer}
.audio-toggle:hover{color:#bbb}
.intro{position:absolute;inset:0;z-index:20;background:#000;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;animation:introOut 2.1s cubic-bezier(.7,0,.2,1) 1.4s forwards}
.intro-mark{font-size:18px;font-weight:700;letter-spacing:8px;color:#e5e5e5;opacity:0;transform:scale(1.06);animation:introMark 1.5s ease-out .25s forwards;text-shadow:0 0 14px rgba(255,255,255,.4)}
.intro-line{margin-top:8px;width:0;height:1px;background:#aaa;animation:introLine 1s ease-out .55s forwards}
@keyframes introMark{to{opacity:1;transform:scale(1)}}
@keyframes introLine{to{width:180px}}
@keyframes introOut{0%{opacity:1}65%{opacity:1}100%{opacity:0;visibility:hidden}}
@media(max-width:720px){body{width:100%;overflow-x:hidden}.header{width:100vw;height:27.7778vw;transform-origin:top left}.header{font-size:calc(100vw / 720)}.main-nav{top:19.72vw;height:4vw;gap:.35vw;padding:0 1vw}.main-nav a{height:3.05vw;padding:0 1vw;font-size:1vw;letter-spacing:.14vw}.utility-nav{top:8.05vw;right:7.9vw;gap:.7vw}.utility-nav a{height:2.1vw;padding:0 .7vw;font-size:.85vw}.portal{left:36.1vw;top:6.1vw;width:27.78vw;height:15.28vw}.portal-frame{width:100%;height:100%}.logo{top:5.55vw;font-size:2.7vw;letter-spacing:.7vw}.tagline{top:9.2vw;font-size:.83vw;letter-spacing:.42vw}.audio-toggle{top:1vw;right:1vw;font-size:.8vw}}