:root{--ink:#e5f3ff;--muted:#b8ccdf;--accent:#87d3ff;--line:rgba(180,224,255,.27)}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:#030b16;color:var(--ink);font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}body{overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.sr-only,.skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link:focus{z-index:40;width:auto;height:auto;top:12px;left:12px;padding:12px;background:var(--ink);color:#06101b;clip:auto}
.experience{position:relative;width:100%;height:100dvh;min-height:460px;overflow:hidden;isolation:isolate}.poster,#scene,.vignette,.grain,.intro-shade{position:absolute;inset:0;width:100%;height:100%}.poster{z-index:0;background:#030b16 url('./assets/poster.webp') center/cover no-repeat;transition:opacity .8s}.poster.hidden{opacity:0;pointer-events:none}#scene{z-index:1;display:block;touch-action:none}.vignette{z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(1,8,17,.58),transparent 32%),linear-gradient(0deg,rgba(2,9,18,.82),transparent 31%),radial-gradient(ellipse at 50% 46%,transparent 42%,rgba(2,9,18,.32) 100%)}.grain{z-index:10;pointer-events:none;opacity:.026;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.intro-shade{z-index:3;pointer-events:none;background:radial-gradient(ellipse at 55% 50%,rgba(3,11,23,.03),rgba(3,11,23,.54) 100%);opacity:1;transition:opacity 1s}.intro-shade.gone{opacity:0}
.hud-top{position:absolute;z-index:7;left:clamp(20px,3.2vw,56px);right:clamp(20px,3.2vw,56px);top:clamp(20px,3.6vh,40px);display:flex;justify-content:space-between;align-items:center;gap:15px}.brand{display:flex;align-items:center;gap:13px;font-size:14px;font-weight:650;letter-spacing:.12em;white-space:nowrap;text-shadow:0 2px 14px #03101b}.brand-symbol{font-size:29px;font-weight:200;line-height:1;color:var(--accent)}.brand small{color:#9bbbd3;font-size:9px;font-weight:450;letter-spacing:.19em;margin-left:8px}.top-right{display:flex;align-items:center;gap:16px}.status{font-size:10px;color:#c1d5e7;letter-spacing:.14em;white-space:nowrap}.status::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 11px var(--accent);vertical-align:middle;margin-right:10px}.top-right button{width:42px;height:42px;display:grid;place-items:center;background:rgba(4,18,33,.46);border:1px solid var(--line);font-size:20px}.top-right button:hover{background:rgba(135,211,255,.14)}
.eyebrow{font-family:Consolas,monospace;font-size:10px;letter-spacing:.24em;color:var(--accent)}.intro-caption{position:absolute;z-index:5;left:clamp(32px,8vw,150px);top:50%;transform:translateY(-50%);transition:opacity .9s,transform .9s;pointer-events:none}.intro-caption.gone{opacity:0;transform:translateY(-40%)}.intro-caption h1{font-size:clamp(56px,8.5vw,142px);line-height:.94;letter-spacing:-.075em;font-weight:620;margin:27px 0 35px;text-shadow:0 7px 30px rgba(2,9,18,.42)}.intro-line{display:block;width:80px;height:1px;background:var(--accent);box-shadow:0 0 15px var(--accent)}.skip-button{position:absolute;z-index:7;right:clamp(24px,4vw,72px);bottom:clamp(40px,6vw,80px);display:flex;gap:20px;align-items:center;min-height:44px;padding:0 2px;background:none;border:0;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.15em}.skip-button:hover{border-color:var(--accent);color:var(--accent)}.skip-button.gone{display:none}
.chapter-copy{position:absolute;z-index:5;left:clamp(25px,5vw,84px);bottom:clamp(95px,12vh,142px);opacity:0;transform:translateY(17px);pointer-events:none;transition:opacity .7s,transform .7s;text-shadow:0 3px 18px #030b16}.chapter-copy.visible{opacity:1;transform:none}.chapter-copy h2{font-size:clamp(40px,5.6vw,86px);line-height:.95;letter-spacing:-.065em;font-weight:630;margin:16px 0 15px}.chapter-copy p{font-size:clamp(12px,1vw,15px);color:#d5e4f0;letter-spacing:.07em;margin:0}.chapter-nav{position:absolute;z-index:6;right:clamp(23px,3.4vw,62px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1px}.chapter-nav button{width:44px;height:35px;border:0;background:transparent;display:grid;place-items:center}.chapter-nav span{display:block;width:3px;height:14px;background:rgba(195,224,245,.45);transition:height .3s,background .3s,box-shadow .3s}.chapter-nav button:hover span{background:var(--ink)}.chapter-nav button.active span{height:28px;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.hud-bottom{position:absolute;z-index:5;left:clamp(25px,5vw,84px);right:clamp(25px,5vw,84px);bottom:clamp(24px,4vh,42px);display:flex;align-items:center;justify-content:space-between;color:#bdd3e4;font-size:11px;letter-spacing:.12em}.interaction-hint{display:flex;align-items:center;gap:14px}.interaction-hint i{display:block;width:24px;height:1px;background:var(--line)}.hint-icon{font-size:20px;color:var(--accent);line-height:1}.scene-position{font-family:Consolas,monospace;color:var(--accent);white-space:nowrap}.touch-nav{display:none}
.object-card{position:absolute;z-index:9;left:clamp(25px,5vw,84px);top:clamp(90px,16vh,160px);width:min(300px,calc(100vw - 50px));padding:24px 25px;background:rgba(4,19,34,.92);border:1px solid var(--line);backdrop-filter:blur(12px)}.object-card[hidden],.error[hidden]{display:none}.object-card h3{font-size:27px;letter-spacing:-.05em;margin:16px 0 6px}.object-card p{font-size:12px;line-height:1.8;color:#c8dbea;margin:0}.object-card button{position:absolute;top:7px;right:9px;width:38px;height:38px;border:0;background:none;font-size:24px}.error{position:absolute;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:10px;background:#0b1e30;border:1px solid var(--line);padding:24px;max-width:350px;font-size:13px}.error span{line-height:1.7;color:var(--muted)}
@media(max-width:650px){.brand small,.status{display:none}.brand{font-size:12px;gap:6px}.brand-symbol{font-size:23px}.top-right{gap:6px}.top-right button{width:40px;height:40px}.intro-caption{left:28px}.intro-caption h1{font-size:clamp(50px,13vw,82px)}.chapter-copy{bottom:124px;left:25px}.chapter-copy h2{font-size:clamp(44px,12vw,66px)}.chapter-nav{right:7px}.chapter-nav button{width:36px;height:31px}.hud-bottom{bottom:82px;left:25px;right:25px}.interaction-hint{font-size:10px;gap:8px}.interaction-hint i,.interaction-hint span:last-child,.scene-position{display:none}.touch-nav{position:absolute;z-index:7;bottom:20px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;color:#a8bfd2;font-size:11px;letter-spacing:.12em}.touch-nav button{height:44px;width:54px;background:rgba(4,18,33,.7);border:1px solid var(--line);font-size:19px}.skip-button{right:28px;bottom:45px}.object-card{top:90px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}