:root{--cyan:#63e9ff;--violet:#e184ff;--gold:#ffc75c;--green:#75ff70;--ink:#020814}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:white;background:#020814}body{overflow-x:hidden;position:relative;min-height:100vh}
#sky{position:fixed;inset:0;z-index:-2;overflow:hidden;background:linear-gradient(#031329,#071d39 50%,#020712)}
#sky:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,transparent 0 30%,rgba(0,0,0,.48) 82%);pointer-events:none}
#stars{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#8edfff 1px,transparent 1.5px);background-size:72px 72px,121px 121px;background-position:0 0,22px 35px;opacity:.85;animation:twinkle 4s ease-in-out infinite alternate}
.sun,.moon{position:absolute;border-radius:50%;transition:all 1.8s ease}.sun{width:120px;height:120px;left:50%;top:62%;transform:translate(-50%,-50%);background:#fff6b5;box-shadow:0 0 35px 12px #ffd56a,0 0 100px 42px rgba(255,146,43,.7)}.moon{width:82px;height:82px;right:9%;top:18%;background:radial-gradient(circle at 35% 30%,#fff,#cfd9e5 55%,#8996a9);box-shadow:0 0 35px rgba(185,221,255,.65);opacity:0}
.horizon{position:absolute;left:-5%;right:-5%;bottom:-8%;height:42%;background:linear-gradient(to top,#01060d 0 42%,transparent 43%),radial-gradient(ellipse at 50% 100%,rgba(52,135,184,.45),transparent 62%);clip-path:polygon(0 48%,10% 37%,21% 49%,34% 31%,45% 48%,56% 28%,69% 46%,82% 33%,100% 50%,100% 100%,0 100%)}
.topbar{height:72px;padding:14px 28px;display:flex;justify-content:space-between;align-items:center;background:rgba(0,7,18,.78);border-bottom:1px solid rgba(99,233,255,.25);backdrop-filter:blur(12px)}.brand{font-size:30px;font-weight:800}.brand span{display:block;font-size:10px;letter-spacing:3px;color:var(--cyan)}#status{font-size:13px;color:#d7e9ff;border:1px solid rgba(99,233,255,.35);border-radius:999px;padding:9px 14px}
.hero{text-align:center;padding:28px 24px 90px}.eyebrow{letter-spacing:5px;color:var(--cyan);font-size:12px;margin:0 0 10px}h1{font-size:clamp(46px,7vw,92px);margin:0;text-shadow:0 0 24px rgba(255,255,255,.45)}.subtitle{font-size:clamp(15px,2vw,24px);letter-spacing:3px;color:#dbe9ff}
.stage{max-width:1220px;margin:44px auto 0;display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:35px;align-items:center}.eye-card{margin:0}.eye-wrap{border-radius:44% 44% 50% 50%;overflow:hidden;filter:drop-shadow(0 0 25px rgba(90,210,255,.38));transform-origin:center;animation:blinkA 9s infinite}.tsch .eye-wrap{animation:blinkB 11s infinite}.eye-wrap img{display:block;width:100%;aspect-ratio:1.55/1;object-fit:cover}.eye-card strong{display:block;font-size:30px;color:var(--cyan);margin-top:14px}.tsch strong{color:var(--violet)}.eye-card span{display:block;color:#d7e4ef;margin-top:8px}
.centerpiece{display:flex;flex-direction:column;align-items:center}.centerpiece img{width:min(100%,430px);aspect-ratio:1/1;object-fit:cover;border-radius:50%;box-shadow:0 0 55px rgba(74,205,255,.42);opacity:.94}.portal-btn{margin-top:-55px;position:relative;text-decoration:none;color:#eaffdf;font-size:24px;font-weight:800;padding:18px 34px;border-radius:999px;border:2px solid #65ff69;background:linear-gradient(#287c32,#073f16);box-shadow:0 0 22px rgba(71,255,85,.7),inset 0 0 18px rgba(255,255,255,.12);transition:.25s}.portal-btn:hover{transform:scale(1.05);box-shadow:0 0 38px rgba(71,255,85,.9)}.portal-btn b{font-size:30px;margin-left:14px}.centerpiece small{margin-top:18px;color:#d7e9ff}
.mode-switch{position:fixed;left:18px;bottom:20px;display:flex;gap:7px;background:rgba(0,10,22,.8);padding:8px;border-radius:18px;border:1px solid rgba(99,233,255,.35);backdrop-filter:blur(12px);z-index:3}.mode-switch button{border:0;border-radius:12px;background:#102035;color:white;padding:9px 13px;cursor:pointer}.mode-switch button.active{background:#167a2a;box-shadow:0 0 15px #4aff64}footer{position:fixed;right:20px;bottom:20px;color:#9eb7ca;font-size:12px}
.shooting{position:absolute;width:180px;height:2px;background:linear-gradient(90deg,transparent,#fff);transform:rotate(-24deg);opacity:0}.shooting.one{left:15%;top:22%;animation:shoot 8s 2s infinite}.shooting.two{left:62%;top:34%;animation:shoot 11s 6s infinite}
body.morning #sky{background:linear-gradient(#17365f 0,#ef8955 52%,#16263b)}body.morning #stars{opacity:.12}body.morning .sun{top:70%;opacity:1}body.morning .moon{opacity:0}
body.day #sky{background:linear-gradient(#58a9e8,#bfe4ff 58%,#254c6c)}body.day #stars{opacity:0}body.day .sun{top:24%;left:68%;opacity:1}body.day .moon{opacity:0}
body.evening #sky{background:linear-gradient(#201447,#d24c43 54%,#120c1c)}body.evening #stars{opacity:.25}body.evening .sun{top:72%;left:20%;opacity:1}body.evening .moon{opacity:0}
body.night .sun{opacity:0}body.night .moon{opacity:1}body.night #stars{opacity:.9}
@keyframes twinkle{from{filter:brightness(.8)}to{filter:brightness(1.35)}}@keyframes shoot{0%,82%{opacity:0;transform:translate(0,0) rotate(-24deg)}84%{opacity:1}100%{opacity:0;transform:translate(360px,150px) rotate(-24deg)}}
@keyframes blinkA{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.08)}}@keyframes blinkB{0%,62%,66%,100%{transform:scaleY(1)}64%{transform:scaleY(.08)}}
@media(max-width:850px){.topbar{height:auto;gap:10px}.brand{font-size:23px}#status{font-size:11px}.hero{padding:22px 15px 110px}.stage{grid-template-columns:1fr;gap:28px;margin-top:28px}.centerpiece{order:-1}.centerpiece img{width:280px}.eye-card{max-width:420px;margin:auto}.portal-btn{font-size:19px}.mode-switch{left:50%;transform:translateX(-50%);bottom:12px}footer{display:none}}