*{box-sizing:border-box}body{margin:0;background:#101117;color:#e8e9ef;font-family:system-ui,"Microsoft YaHei",sans-serif}header{min-height:88px;padding:18px 4vw;display:flex;gap:16px;justify-content:space-between;align-items:center}header strong{display:block;font-size:17px}header span{display:block;color:#9396a5;font-size:12px;margin-top:6px}nav{display:flex;gap:8px;flex-wrap:wrap}button{background:#242735;color:#e9ecff;border:1px solid #45495d;border-radius:6px;padding:10px 14px;cursor:pointer}button:hover{background:#393e56}button:focus-visible,input:focus-visible{outline:2px solid #99b6ff;outline-offset:3px}main{display:flex;justify-content:center}#viewport{position:relative;overflow:hidden;background:#000;width:min(96vw,calc((100dvh - 220px)*16/9));aspect-ratio:16/9}#world{position:absolute;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden}#video,#still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#video{visibility:hidden}#screen{position:absolute;left:520px;top:130px;width:854px;height:718px;overflow:hidden;opacity:0;clip-path:polygon(2% 1%,26% 0%,54% 0%,78% 1%,98% 3%,99% 7%,100% 52%,99% 97%,96% 99%,60% 100%,22% 100%,1% 98%,0% 94%,0% 8%);background:#030613}#cover{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}#blue{position:absolute;inset:0;background:radial-gradient(ellipse,#14295c,#02040b 80%);opacity:0}#beam{position:absolute;inset:0;background:#ccddff;transform:scale(.03,.003);box-shadow:0 0 30px #aabbff;opacity:0}#glass{position:absolute;inset:0;background:linear-gradient(120deg,#ffffff09,transparent 35%),radial-gradient(ellipse,transparent 65%,#0008);pointer-events:none}#hand{position:absolute;left:1182px;top:875px;width:480px;height:320px;opacity:0;transform-origin:58px 115px;filter:drop-shadow(-4px 8px 5px #0005)}#hand img{width:100%;height:100%;display:block}#led{position:absolute;left:1178px;top:978px;width:6px;height:6px;border-radius:50%;background:#b9ecff;box-shadow:0 0 10px #64b7ff;opacity:0}footer{max-width:1100px;margin:18px auto;padding:0 20px;display:flex;flex-direction:column;align-items:center;gap:9px;font-size:13px;color:#b8bdcf}footer label{display:flex;gap:14px;align-items:center}input{width:250px;accent-color:#a5b5f5}small{color:#777f97;font-size:11px}@media(max-width:700px){header{align-items:flex-start;flex-direction:column}button{font-size:12px;padding:8px}#viewport{width:100vw}footer{line-height:1.6;text-align:center}input{width:160px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
