/* One gallery, two clear actions: change the sculpture, or enter the site. */
.intro-gateway{--opening-margin:clamp(24px,5vw,88px);background:#111214;border:0;border-radius:0;cursor:default}
.intro-gateway::before{background:radial-gradient(ellipse at 65% 43%,#3d3b4526,transparent 53%)}
.intro-top{top:38px;left:var(--opening-margin);right:var(--opening-margin);color:#b5b4bd;letter-spacing:.11em;font-size:10px}
.intro-top>span:last-child{font-size:9px;color:#787781}
.intro-scene{left:66%;top:46%;width:min(800px,62vw);height:min(700px,77svh);transform:translate(-50%,-50%)}
.intro-scene #intro-canvas{cursor:pointer;touch-action:pan-y pinch-zoom}
.intro-stage h2.intro-wordmark{left:calc(var(--opening-margin) - 12px);bottom:43%;transform:none;width:clamp(240px,25vw,380px);height:clamp(125px,14vw,180px);font-size:120px;pointer-events:auto}
.intro-wordmark-replay{touch-action:pan-y pinch-zoom;border-radius:8px}
.intro-bottom{left:var(--opening-margin);right:var(--opening-margin);bottom:40px;display:block;pointer-events:none;z-index:6}
.intro-bottom .intro-statement{position:fixed;left:var(--opening-margin);top:58%;font-size:clamp(16px,1.5vw,21px);font-weight:400;line-height:1.55;letter-spacing:-.025em;color:#a6a5af;margin:0;max-width:270px}
.intro-entry{position:fixed;left:var(--opening-margin);top:calc(58% + 94px);display:flex;flex-direction:column;align-items:flex-start;gap:15px;pointer-events:auto}
.intro-bottom #intro-enter{display:flex;align-items:center;justify-content:center;gap:0;min-width:168px;min-height:56px;margin:0;padding:0 28px;color:#242328;background:#f3f1f6;border:1px solid #ffffff8c;border-radius:999px;box-shadow:inset 0 1px 1px #fff,0 6px 26px #0002;transition:transform .28s,background .28s,box-shadow .28s;font-size:14px;font-weight:500;letter-spacing:-.02em;cursor:pointer}
.intro-bottom #intro-enter:hover{transform:translateY(-2px);background:#fff;box-shadow:inset 0 1px 1px #fff,0 10px 30px #0003}
.intro-bottom #intro-enter:active{transform:translateY(0) scale(.98)}
.intro-bottom #intro-enter:focus-visible{outline:2px solid #c4b3de;outline-offset:6px}
.intro-bottom #intro-enter>span:first-child{font-size:14px;line-height:1.2}
.intro-entry-mark{display:none}
.intro-entry-mark i{width:8px;height:18px;background:#776585;border-radius:2px;transform:rotateY(-26deg);transition:transform .35s,background .35s}
.intro-entry-mark i:last-child{background:#bcb0c9;transform:rotateY(26deg)}
#intro-enter:hover .intro-entry-mark i:first-child{transform:translateX(-2px) rotateY(-40deg)}
#intro-enter:hover .intro-entry-mark i:last-child{transform:translateX(2px) rotateY(40deg)}
.intro-entry>small{padding:0 0 0 8px;border:0;color:#96939f;font-size:11px;line-height:1.3;letter-spacing:.01em}
.intro-bottom-right{display:block;text-align:right;color:#777781;font-size:9px;letter-spacing:.14em;padding:0}
#intro-form-toggle{left:50%;right:auto;bottom:1%;transform:translateX(-50%);gap:16px;white-space:nowrap;padding:4px 12px;color:#aaa5b6;border-radius:8px;font-size:10px;font-weight:400;min-height:44px}
#intro-form-toggle>span:last-child{border:0;padding:0}
#intro-form-toggle::after{content:'+';font-size:19px;font-weight:300;line-height:1;color:#b5a4ce;margin-left:10px}
#intro-form-toggle:hover{color:#f4f1f8;background:#ffffff07}
#intro-form-toggle:focus-visible,#intro-canvas:focus-visible{outline:1px solid #ac97c4;outline-offset:-4px;border-radius:8px}
.intro-form-counter{color:#777481;font-size:9px;letter-spacing:.04em}
.intro-gateway.is-entering .intro-stage{transform:translateY(-8px) scale(1.035)}
@media(min-width:801px) and (max-height:650px){.intro-stage h2.intro-wordmark{bottom:43%;height:112px;width:260px}.intro-bottom .intro-statement{top:57%;font-size:16px}.intro-entry{top:calc(57% + 71px)}.intro-top{top:24px}.intro-bottom{bottom:25px}.intro-scene{height:78svh;top:47%}}
@media(max-width:800px){.intro-top{top:27px;font-size:8px}.intro-top>span:last-child{font-size:7px}.intro-scene{left:50%;top:34%;width:min(670px,100vw);height:52svh}.intro-stage h2.intro-wordmark{left:50%;bottom:25%;transform:translateX(-50%);width:240px;height:116px;font-size:96px}.intro-bottom .intro-statement{display:none}.intro-entry{position:fixed;left:50%;top:auto;bottom:11%;transform:translateX(-50%);align-items:center;gap:13px}.intro-entry>small{padding:0;font-size:10px}.intro-bottom{left:24px;right:24px;bottom:26px}.intro-bottom-right{text-align:center;font-size:8px}.intro-bottom #intro-enter{min-height:54px;min-width:184px}#intro-form-toggle{bottom:0}.intro-gateway::before{background:radial-gradient(ellipse at 50% 35%,#3d3b4530,transparent 60%)}}
@media(max-width:480px){.intro-scene{top:32%;height:49svh;width:100vw}.intro-stage h2.intro-wordmark{bottom:26%;width:218px;height:104px}.intro-top{left:22px;right:22px;font-size:7px}.intro-top>span:last-child{font-size:6px}.intro-entry{bottom:11%}.intro-bottom{bottom:max(24px,env(safe-area-inset-bottom))}#intro-form-toggle{font-size:9px;gap:12px}.intro-form-counter{font-size:8px}}
@media(max-width:480px) and (max-height:700px){.intro-scene{top:31%;height:46svh}.intro-stage h2.intro-wordmark{width:200px;height:90px;bottom:26%}.intro-top{top:20px}.intro-bottom #intro-enter{min-height:48px}.intro-entry{gap:10px}}
@media(max-width:800px) and (max-height:500px){.intro-top{top:20px}.intro-scene{left:69%;top:50%;width:58vw;height:84svh}.intro-stage h2.intro-wordmark{left:22px;bottom:43%;transform:none;width:205px;height:90px}.intro-entry{left:28px;bottom:13%;transform:none;gap:10px}.intro-bottom #intro-enter{min-width:166px;min-height:46px}.intro-bottom-right{display:none}.intro-bottom{bottom:15px}#intro-form-toggle{bottom:-2%;font-size:8px}.intro-gateway::before{background:none}}
@media(prefers-reduced-motion:reduce){.intro-bottom #intro-enter,.intro-entry-mark i{transition:none}}
.intro-scene-ready .intro-static-form{visibility:hidden;transition:none}
/* Four technology stories use a quiet caption rather than an unlabeled object. */
#intro-form-toggle{bottom:29px;font-size:13px}
#intro-scene-description{position:absolute;bottom:0;left:5%;width:90%;margin:0;text-align:center;color:#88868f;font-size:12px;line-height:1.6;letter-spacing:0;pointer-events:none;text-wrap:balance}
html[lang="zh-CN"] #intro-scene-description{font-family:"DOT UI","DOT Chinese",sans-serif;letter-spacing:.02em;line-height:1.7}
@media(max-width:800px){#intro-form-toggle{bottom:22px;font-size:11px;gap:12px}#intro-scene-description{font-size:10px;bottom:0;left:4%;width:92%}}
@media(max-width:800px) and (max-height:500px){#intro-form-toggle{bottom:12px}#intro-scene-description{font-size:9px;bottom:-7px}}