/* 穹鉴 / OPTICAL ASSEMBLY — vector surfaces, compositor motion */
.qj-intro{--lens-size:min(100vw,92vh);--look-x:0deg;--look-y:0deg;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;margin:0;padding:0;overflow:hidden;box-shadow:none;border-radius:0;isolation:isolate;background:#060b11;color:#d7e3e7;font-family:inherit;z-index:10000;opacity:1;transition:opacity .45s ease}
.qj-intro:not([open]){display:none}.qj-intro::backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}.qj-intro.is-leaving{opacity:0;pointer-events:none}
.qj-ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,#25424e70 0,#101f2c80 29%,#070d16 66%);pointer-events:none}
.qj-ambient:after{content:"";position:absolute;inset:0;background:linear-gradient(116deg,transparent 22%,#577d8b08 40%,transparent 55%);box-shadow:inset 0 0 15vw #02060b80}
.qj-drafting{position:absolute;inset:8% 5%;pointer-events:none;opacity:.35;background:linear-gradient(90deg,transparent calc(50% - .5px),#56727f26 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#56727f26 50%,transparent calc(50% + .5px))}
.qj-drafting i{position:absolute;width:65px;height:65px;border-style:solid;border-color:#7799a13d}.qj-drafting i:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}.qj-drafting i:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}.qj-drafting i:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}.qj-drafting i:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}
.qj-camera{position:absolute;left:50%;top:46%;width:min(100vw,92vh);aspect-ratio:1;transform-style:flat;transform:translate(-50%,-50%) scaleY(1) skewX(0deg) rotateZ(0deg) scale(.82);pointer-events:none;will-change:transform,opacity}
.qj-tilt{position:absolute;inset:0;transform-style:flat;transform:rotate(var(--look-x));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.qj-layer{position:absolute;inset:0;will-change:transform,opacity;backface-visibility:hidden}.qj-layer img{display:block;width:100%;height:100%;overflow:visible}
.qj-housing{transform:translateZ(0)}.qj-tracks{transform:translateZ(0)}.qj-blades{transform:translateZ(0)}.qj-inner{transform:translateZ(0)}
.qj-sensor{position:absolute;inset:31.5%;border-radius:50%;overflow:hidden;transform:translateZ(0);background:radial-gradient(circle at 40% 30%,#1c414b88,#050b12 65%);border:1px solid #82adb52b}
.qj-sensor-grid{position:absolute;inset:0;opacity:.33;background-image:radial-gradient(#7eaeb7 1px,transparent 1px);background-size:11px 11px}
.qj-scan{position:absolute;left:0;right:0;top:0;height:20%;background:linear-gradient(0deg,#b7ecec80,#598d9920 20%,transparent);border-bottom:1px solid #b5e2e5;opacity:0;will-change:transform,opacity}
.qj-horizon{position:absolute;top:46%;left:0;width:100%;height:1px;opacity:0;background:linear-gradient(90deg,transparent,#8ad0dc30 24%,#d8fcff 50%,#8ad0dc30 76%,transparent);pointer-events:none;will-change:transform,opacity}
.qj-horizon:after{content:"";position:absolute;inset:-28px 12%;background:radial-gradient(ellipse,#94d8e62b,transparent 67%)}
.qj-mark{container-type:inline-size;position:absolute;left:50%;top:46%;width:var(--lens-size);aspect-ratio:1;transform:translate(-50%,-50%) scale(.82);color:#c9e7e9;opacity:0;pointer-events:none;will-change:opacity}
.qj-mark svg{display:block;width:100%;height:100%;overflow:visible}
.mark-core{opacity:0}
.qj-signature{position:absolute;left:0;right:0;top:calc(46% + var(--lens-size)*.12 + 30px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;opacity:0;pointer-events:none;will-change:transform,opacity}
.qj-signature h2{font-size:clamp(28px,2.7vw,42px);font-weight:300;letter-spacing:.22em;text-indent:.22em;margin:0;line-height:1.1}.qj-signature>span{font-size:10px;letter-spacing:.48em;text-indent:.48em;color:#9ab3bf}
.qj-corner{position:absolute;left:5%;right:5%;display:flex;align-items:center;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px;letter-spacing:.16em;color:#6e8998;pointer-events:none}
.qj-corner-top{top:4%;justify-content:space-between}.qj-signal{width:5px;height:5px;background:#b0d8d5;box-shadow:0 0 9px #9dd7d44d;border-radius:50%}
.qj-corner-bottom{bottom:4.5%;gap:14px;font-size:8px}.qj-progress{width:42px;height:1px;background:#7fa3ae33}.qj-progress i{display:block;height:1px;width:100%;background:#b9d6d9;transform-origin:left;transform:scaleX(0)}
#introSkip{position:absolute;z-index:5;right:4.5%;bottom:3%;display:flex;align-items:center;gap:14px;border:0;color:#a8bec8;background:transparent;font:inherit;font-size:10px;letter-spacing:2px;padding:8px;cursor:pointer}.intro-arrow{display:grid;place-items:center;width:30px;height:30px;border:1px solid #8aacb333;border-radius:50%;font-size:17px;transition:background .2s,border-color .2s}#introSkip:hover .intro-arrow{background:#9bd9e315;border-color:#9bd9e3}#introSkip:focus-visible{outline:1px solid #9bd9e3;outline-offset:2px;border-radius:30px}#introReplay{color:#8daeb8}
/* The entire camera move and ring turns run on compositor layers. */
.qj-intro.is-playing .qj-camera{animation:qj-camera 7.8s cubic-bezier(.25,.6,.25,1) both}
@keyframes qj-camera{0%{transform:translate(-50%,-48%) scaleY(.58) skewX(-10deg) rotateZ(-36deg) scale(1.9);opacity:0}8.08%{opacity:1}22.44%{transform:translate(-50%,-50%) scaleY(.8) skewX(-5deg) rotateZ(-20deg) scale(1.24)}34.1%{transform:translate(-50%,-50%) scaleY(1) skewX(0deg) rotateZ(0deg) scale(.82);opacity:1}36.79%{opacity:1}47.56%,100%{transform:translate(-50%,-50%) scaleY(1) skewX(0deg) rotateZ(0deg) scale(.8);opacity:0}}
.qj-intro.is-playing .qj-tilt{animation:qj-settle .35s 2.4s ease both}
@keyframes qj-settle{to{transform:rotate(0deg)}}
.qj-intro.is-playing .qj-outer{animation:qj-outer 7s cubic-bezier(.2,.55,.3,1) both}
@keyframes qj-outer{from{transform:translateZ(0) rotate(-70deg)}to{transform:translateZ(0) rotate(30deg)}}
.qj-intro.is-playing .qj-housing{animation:qj-housing 7s cubic-bezier(.2,.55,.3,1) both}
@keyframes qj-housing{0%{transform:translateZ(0) rotate(-48deg)}38%,100%{transform:translateZ(0) rotate(11.25deg)}}
.qj-intro.is-playing .qj-tracks{animation:qj-tracks 7s ease-out both}
@keyframes qj-tracks{from{transform:translateZ(0) rotate(-160deg)}to{transform:translateZ(0) rotate(40deg)}}
.qj-intro.is-playing .qj-blades{animation:qj-blades 7s cubic-bezier(.2,.65,.25,1) both}
@keyframes qj-blades{0%{transform:translateZ(0) rotate(70deg) scale(.66)}38%,100%{transform:translateZ(0) rotate(-26deg) scale(1)}}
.qj-intro.is-playing .qj-inner{animation:qj-inner 7s ease-out both}
@keyframes qj-inner{from{transform:translateZ(0) rotate(-90deg) scale(.8)}to{transform:translateZ(0) rotate(45deg) scale(1)}}
.qj-intro.is-playing .qj-scan{animation:qj-scan 1.6s .75s ease-in-out both}
@keyframes qj-scan{0%{opacity:0;transform:translateY(-100%)}25%{opacity:1}90%{opacity:.7}100%{opacity:0;transform:translateY(600%)}}
.qj-intro.is-playing .qj-horizon{animation:qj-horizon 1.7s 1.9s ease both}
@keyframes qj-horizon{0%{transform:scaleX(.05);opacity:0}30%{opacity:.8}65%{transform:scaleX(1);opacity:.35}100%{transform:scaleX(1);opacity:0}}
.qj-intro.is-playing .qj-mark{animation:qj-mark .25s 2.5s ease both}
@keyframes qj-mark{from{opacity:0}to{opacity:1}}
.qj-piece{position:absolute;left:50%;top:50%;height:2cqw;margin-top:-1cqw;background:currentColor;transform-origin:center;will-change:transform}.qj-assembly{position:absolute;inset:0}
.qj-assembly{opacity:0}.qj-dock-guides,.qj-iris-lock,.qj-lock-echo{opacity:0}
.qj-intro.is-playing .qj-assembly{animation:qj-assembly .3s 2.5s linear both}
@keyframes qj-assembly{from{opacity:0}to{opacity:1}}
.qj-intro.is-playing .qj-piece-0{animation:qj-piece-0 2.3s 2.80s linear both}
@keyframes qj-piece-0{0%{transform:translate(-32.176500cqw,-26.406625cqw) rotate(129.375deg) scaleX(0.900) scaleY(.375)}10%{transform:translate(-33.141750cqw,-27.198875cqw) rotate(129.375deg) scaleX(0.900) scaleY(.344);animation-timing-function:cubic-bezier(.33,.25,.67,.75)}100%{transform:translate(-11.875000cqw,-14.375000cqw) rotate(180.000deg) scaleX(1) scaleY(1.000)}}
.qj-intro.is-playing .qj-piece-1{animation:qj-piece-1 2.3s 2.84s linear both}
@keyframes qj-piece-1{0%{transform:translate(-41.424625cqw,-4.080000cqw) rotate(95.625deg) scaleX(0.261) scaleY(.375)}10%{transform:translate(-42.667375cqw,-4.202375cqw) rotate(95.625deg) scaleX(0.261) scaleY(.344);animation-timing-function:cubic-bezier(.33,.25,.67,.75)}100%{transform:translate(-14.375000cqw,0.000000cqw) rotate(90.000deg) scaleX(1) scaleY(1.000)}}
.qj-intro.is-playing .qj-piece-2{animation:qj-piece-2 2.3s 2.88s linear both}
@keyframes qj-piece-2{0%{transform:translate(-12.083125cqw,39.832625cqw) rotate(16.875deg) scaleX(0.387) scaleY(.375)}10%{transform:translate(-12.445625cqw,41.027625cqw) rotate(16.875deg) scaleX(0.387) scaleY(.344);animation-timing-function:cubic-bezier(.33,.25,.67,.75)}100%{transform:translate(-4.687500cqw,14.375000cqw) rotate(0.000deg) scaleX(1) scaleY(1.000)}}
.qj-intro.is-playing .qj-piece-3{animation:qj-piece-3 2.3s 2.92s linear both}
@keyframes qj-piece-3{0%{transform:translate(26.406625cqw,32.176500cqw) rotate(-39.375deg) scaleX(0.849) scaleY(.375)}10%{transform:translate(27.198875cqw,33.141750cqw) rotate(-39.375deg) scaleX(0.849) scaleY(.344);animation-timing-function:cubic-bezier(.33,.25,.67,.75)}100%{transform:translate(8.125000cqw,11.250000cqw) rotate(-45.000deg) scaleX(1) scaleY(1.000)}}
.qj-intro.is-playing .qj-piece-4{animation:qj-piece-4 2.3s 2.80s linear both}
@keyframes qj-piece-4{0%{transform:translate(32.176500cqw,26.406625cqw) rotate(-50.625deg) scaleX(0.900) scaleY(.375)}10%{transform:translate(33.141750cqw,27.198875cqw) rotate(-50.625deg) scaleX(0.900) scaleY(.344);animation-timing-function:cubic-bezier(.33,.25,.67,.75)}100%{transform:translate(11.875000cqw,14.375000cqw) rotate(0.000deg) scaleX(1) scaleY(1.000)}}
.qj-intro.is-playing .qj-piece-5{animation:qj-piece-5 2.3s 2.84s linear both}
@keyframes qj-piece-5{0%{transform:translate(41.424625cqw,4.080000cqw) rotate(-84.375deg) scaleX(0.261) scaleY(.375)}10%{transform:translate(42.667375cqw,4.202375cqw) rotate(-84.375deg) scaleX(0.261) scaleY(.344);animation-timing-function:cubic-bezier(.33,.25,.67,.75)}100%{transform:translate(14.375000cqw,0.000000cqw) rotate(-90.000deg) scaleX(1) scaleY(1.000)}}
.qj-intro.is-playing .qj-piece-6{animation:qj-piece-6 2.3s 2.88s linear both}
@keyframes qj-piece-6{0%{transform:translate(12.083125cqw,-39.832625cqw) rotate(196.875deg) scaleX(0.387) scaleY(.375)}10%{transform:translate(12.445625cqw,-41.027625cqw) rotate(196.875deg) scaleX(0.387) scaleY(.344);animation-timing-function:cubic-bezier(.33,.25,.67,.75)}100%{transform:translate(4.687500cqw,-14.375000cqw) rotate(180.000deg) scaleX(1) scaleY(1.000)}}
.qj-intro.is-playing .qj-piece-7{animation:qj-piece-7 2.3s 2.92s linear both}
@keyframes qj-piece-7{0%{transform:translate(-26.406625cqw,-32.176500cqw) rotate(140.625deg) scaleX(0.849) scaleY(.375)}10%{transform:translate(-27.198875cqw,-33.141750cqw) rotate(140.625deg) scaleX(0.849) scaleY(.344);animation-timing-function:cubic-bezier(.33,.25,.67,.75)}100%{transform:translate(-8.125000cqw,-11.250000cqw) rotate(135.000deg) scaleX(1) scaleY(1.000)}}
.qj-intro.is-playing .qj-piece-8{animation:qj-piece-8 2.2s 2.98s linear both}
@keyframes qj-piece-8{0%{transform:translate(-23.141000cqw,-16.203500cqw) rotate(125.000deg) scaleX(0.580) scaleY(.375)}10%{transform:translate(-23.835250cqw,-16.689625cqw) rotate(125.000deg) scaleX(0.580) scaleY(.344);animation-timing-function:cubic-bezier(.33,.25,.67,.75)}100%{transform:translate(-6.562500cqw,-3.593750cqw) rotate(136.042deg) scaleX(1) scaleY(1.000)}}
.qj-intro.is-playing .qj-piece-9{animation:qj-piece-9 2.2s 3.04s linear both}
@keyframes qj-piece-9{0%{transform:translate(-23.141000cqw,16.203500cqw) rotate(55.000deg) scaleX(0.580) scaleY(.375)}10%{transform:translate(-23.835250cqw,16.689625cqw) rotate(55.000deg) scaleX(0.580) scaleY(.344);animation-timing-function:cubic-bezier(.33,.25,.67,.75)}100%{transform:translate(-5.468750cqw,6.093750cqw) rotate(45.000deg) scaleX(1) scaleY(1.000)}}
.qj-intro.is-playing .qj-piece-10{animation:qj-piece-10 2.2s 2.98s linear both}
@keyframes qj-piece-10{0%{transform:translate(23.141000cqw,-16.203500cqw) rotate(55.000deg) scaleX(0.580) scaleY(.375)}10%{transform:translate(23.835250cqw,-16.689625cqw) rotate(55.000deg) scaleX(0.580) scaleY(.344);animation-timing-function:cubic-bezier(.33,.25,.67,.75)}100%{transform:translate(4.843750cqw,-4.843750cqw) rotate(45.000deg) scaleX(1) scaleY(1.000)}}
.qj-intro.is-playing .qj-piece-11{animation:qj-piece-11 2.2s 3.04s linear both}
@keyframes qj-piece-11{0%{transform:translate(23.141000cqw,16.203500cqw) rotate(125.000deg) scaleX(0.580) scaleY(.375)}10%{transform:translate(23.835250cqw,16.689625cqw) rotate(125.000deg) scaleX(0.580) scaleY(.344);animation-timing-function:cubic-bezier(.33,.25,.67,.75)}100%{transform:translate(6.250000cqw,4.687500cqw) rotate(135.000deg) scaleX(1) scaleY(1.000)}}
.qj-intro.is-playing .qj-dock-guides{animation:qj-dock 1.5s 3.8s ease both}
@keyframes qj-dock{0%,100%{opacity:0}30%,70%{opacity:.3}}
.qj-iris-lock,.qj-lock-echo,.mark-core{transform-box:fill-box;transform-origin:center}
.qj-intro.is-playing .qj-iris-lock{animation:qj-iris-lock 1.55s 3.6s cubic-bezier(.6,0,.2,1) both}
@keyframes qj-iris-lock{0%{opacity:0;transform:scale(1)}20%{opacity:.45}80%{opacity:.7}100%{opacity:0;transform:scale(.1)}}
.qj-intro.is-playing .mark-core{animation:qj-core .3s 4.94s cubic-bezier(.2,.7,.2,1) both}
@keyframes qj-core{0%{opacity:0;transform:rotate(-45deg) scale(.2)}70%{opacity:1;transform:rotate(0deg) scale(1.12)}100%{opacity:1;transform:rotate(0deg) scale(1)}}
.qj-intro.is-playing .qj-lock-echo{animation:qj-lock-echo .55s 5.25s ease-out both}
@keyframes qj-lock-echo{0%{opacity:.35;transform:scale(.5)}100%{opacity:0;transform:scale(3)}}
.qj-intro.is-playing .qj-signature{animation:qj-signature .7s 5.45s cubic-bezier(.2,.7,.2,1) both}
@keyframes qj-signature{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.qj-intro.is-playing .qj-progress i{animation:qj-progress 7.8s linear both}@keyframes qj-progress{to{transform:scaleX(1)}}
@media(max-width:600px){.qj-intro{--lens-size:min(125vw,86vh)}.qj-camera{width:var(--lens-size);top:46%}.qj-signature{top:calc(46% + var(--lens-size)*.12 + 24px);gap:12px}.qj-signature h2{font-size:32px}.qj-signature>span{font-size:9px;letter-spacing:.38em}.qj-drafting{inset:9% 5%}.qj-drafting i{width:30px;height:30px}.qj-corner-bottom>span:last-child{display:none}.qj-corner-top{top:5%}#introSkip{bottom:3.5%}.qj-corner-bottom{bottom:6.5%}}
@media(max-height:500px){.qj-signature{top:calc(46% + var(--lens-size)*.12 + 20px);gap:9px}.qj-signature h2{font-size:26px}.qj-signature>span{font-size:8px}.qj-corner-bottom{bottom:5%}#introSkip{bottom:1%}}
.qj-intro.is-static .qj-camera{opacity:0}.qj-intro.is-static .qj-mark,.qj-intro.is-static .qj-signature{opacity:1}.qj-intro.is-static .mark-outer,.qj-intro.is-static .mark-inner{stroke-dashoffset:0}.qj-intro.is-static .mark-core{opacity:1;transform:scale(1)}.qj-intro.is-static .qj-progress i{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.qj-intro,.qj-intro *{animation:none!important;transition:none!important}.qj-tilt{transform:none}}

/* Keep layout measurable for scene initialization, but suspend hidden UI paint. */
body.qj-intro-active > :not(#qjIntro){visibility:hidden}
body.qj-intro-active > :not(#qjIntro) *{animation-play-state:paused!important}



.qj-intro.is-static .qj-assembly{opacity:1}

/* Programmatic entry target only; interactive keyboard focus remains visible. */
main.workspace[tabindex="-1"]:focus{outline:none}