button,input{font:inherit}button{color:inherit}img{max-width:100%;display:block}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--gold:#d8ba78;--ink:#101816;font-family:STKaiti,KaiTi,Kaiti SC,Noto Serif CJK SC,SimSun,serif}*{box-sizing:border-box}body{color:#f2dfb6;background:#101816;margin:0}a{color:inherit;text-decoration:none}.scene{isolation:isolate;flex-direction:column;min-height:100svh;display:flex;position:relative;overflow:hidden}.backdrop{z-index:-4;background:url(/qunyinglu/perf-images-v1/gate.webp) 50% 37%/cover no-repeat;animation:1.8s ease-out both reveal;position:absolute;inset:0}.vignette{z-index:-3;background:linear-gradient(#07131440,#0000 32%,#08111142 45%,#071010e3 91%,#101716),linear-gradient(90deg,#06121459,#0000 50%,#0612141f);position:absolute;inset:0}header{justify-content:flex-end;align-items:center;padding:30px 4.2vw;display:flex}.brand{letter-spacing:6px;text-shadow:0 2px 10px #000;align-items:center;gap:15px;font-size:26px;display:flex}.seal{letter-spacing:2px;writing-mode:vertical-rl;outline-offset:3px;color:#ebcf9b;background:#7f3027;border:1px solid #bd7f54;outline:1px solid #af7244;place-content:center;width:45px;height:49px;font-size:20px;display:grid}.brand small{letter-spacing:3.1px;color:#cdb990;font:8px/1.8 Georgia,serif;display:block}.chapter{letter-spacing:5px;align-items:center;gap:16px;font-size:13px;display:flex}.chapter b{background:#d7bc8266;width:40px;height:1px}.heading{text-align:center;text-shadow:0 3px 26px #122123,0 2px 5px #18242280;margin-top:1vh}.eyebrow{letter-spacing:7px;color:#f2dab1;justify-content:center;align-items:center;gap:18px;font-size:12px;display:flex}.eyebrow span{background:linear-gradient(90deg,#0000,#cdb47c);width:50px;height:1px}.eyebrow span:last-child{transform:rotate(180deg)}h1{letter-spacing:12px;margin:14px 0 8px;font-size:clamp(38px,4.5vw,68px);font-weight:400}h1 span{margin-left:16px}.heading p{letter-spacing:9px;color:#dfd1b7;margin:0;font-size:14px}.vertical-note{writing-mode:vertical-rl;letter-spacing:7px;color:#e8d5ae99;font-size:12px;position:absolute;top:28%;left:4.2%}.vertical-note span{padding-top:28px}.selection{margin-top:auto;padding:55px 6vw 0}.selection-label{color:#e1c795;letter-spacing:5px;justify-content:center;align-items:center;gap:16px;margin-bottom:30px;font-size:13px;display:flex}.line{background:linear-gradient(90deg,#0000,#c6aa6855);width:min(21vw,250px);height:1px}.line:last-child{transform:rotate(180deg)}.english{letter-spacing:3px;font:9px Georgia,serif}.diamond{color:#ac8b4b;font-size:7px}.cards{justify-content:center;gap:clamp(14px,2.1vw,34px);max-width:1180px;margin:0 auto;display:flex}.card-slot{perspective:1000px;flex:1;min-width:0;max-width:208px;position:relative}.card-slot.is-active{z-index:10}.card{aspect-ratio:816/1456;will-change:transform;background:linear-gradient(135deg,#dfc58a,#5c4525 22%,#bb9354 48%,#ead5a0 65%,#634b2b 86%,#d2b474);border:1px solid #d4b773;border-radius:9px 9px 5px 5px;outline:none;padding:6px;transition:transform .65s cubic-bezier(.16,1,.3,1),box-shadow .65s,filter .65s;display:block;position:relative;transform:translateY(0)rotateX(0)rotateY(0);box-shadow:0 10px 30px #0009,0 0 0 2px #30291e,0 0 0 3px #ab844e66,inset 0 0 0 2px #312d21}.art{border-radius:4px 4px 1px 1px;position:absolute;inset:6px;overflow:hidden}.art img{object-fit:cover;filter:saturate(.86);width:100%;height:100%;transition:transform 1.1s cubic-bezier(.16,1,.3,1);display:block}.card-shade{background:linear-gradient(#080e1122,#0000 45%,#09141144 63%,#06110ce8 90%,#0d1611);position:absolute;inset:6px}.inner-border{pointer-events:none;border:1px solid #e2c47e77;border-radius:2px;position:absolute;inset:11px}.corner{fill:none;stroke:#e5c98b;stroke-width:1.6px;filter:drop-shadow(0 1px 1px #000);pointer-events:none;width:43px;height:43px;position:absolute}.tl{top:1px;left:1px}.tr{top:1px;right:1px;transform:rotate(90deg)}.bl{bottom:1px;left:1px;transform:rotate(-90deg)}.br{bottom:1px;right:1px;transform:rotate(180deg)}.faction{color:#edd7a7;text-align:center;clip-path:polygon(0 0,100% 0,100% 85%,50% 100%,0 85%);background:#18231ecc;border:1px solid #d3ba7d99;width:26px;font-size:15px;line-height:30px;position:absolute;top:19px;left:20px}.card-caption{text-align:center;position:absolute;bottom:21px;left:12px;right:12px}.hero-title{letter-spacing:5px;color:#e1c68a;font-size:10px}h2{letter-spacing:12px;text-indent:12px;color:#ffebbf;text-shadow:0 2px 5px #000;margin:4px 0 2px;font-size:clamp(26px,2.65vw,40px);font-weight:400;line-height:1.4}.courtesy{letter-spacing:3px;color:#d9c49b;justify-content:center;align-items:center;gap:8px;font-size:10px;display:flex}.courtesy span{background:#af935377;width:16px;height:1px}.enter{letter-spacing:3px;opacity:0;color:#ffe7a9;height:0;font-size:10px;transition:all .5s cubic-bezier(.16,1,.3,1);transform:translateY(8px)}.enter span{margin-left:12px}.glint{pointer-events:none;background:radial-gradient(ellipse at var(--shine,50%) 20%,#ffe6a733,transparent 64%);opacity:0;mix-blend-mode:screen;transition:opacity .6s;position:absolute;inset:6px}.card-slot.is-active .card{transform:translateY(-30px) scale(1.11) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:0 30px 55px #000b,0 0 0 2px #493b24,0 0 0 3px #ecd395aa,0 0 38px #d5b77638}.card-slot.is-active .art img{transform:scale(1.035)}.card-slot.is-active .enter{opacity:1;height:19px;margin-top:9px;transform:translateY(0)}.card-slot.is-active .glint{opacity:1}.card:focus-visible{outline-offset:6px;outline:2px solid #ffe7b3}.card-quote{text-align:center;letter-spacing:2px;color:#ddcfa8;opacity:0;margin:13px -15px 0;font-size:11px;transition:opacity .45s,transform .45s;transform:translateY(0)}.is-active .card-quote{opacity:1;transform:translateY(5px)}footer{letter-spacing:3px;color:#aaad9977;justify-content:space-between;align-items:center;padding:23px 4.2vw 20px;font-size:10px;display:flex}footer p{color:#cbbfa29c;margin:0;font-size:11px}.dust{z-index:-1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.dust i{left:var(--x);width:2px;height:2px;animation:float var(--duration) var(--delay) linear infinite;background:#ffe1a0;border-radius:50%;position:absolute;bottom:-10px;box-shadow:0 0 7px #ffce7a}@keyframes float{0%{opacity:0;transform:translate(0)}15%{opacity:.6}80%{opacity:.4}to{opacity:0;transform:translate(55px,-85vh)}}@keyframes reveal{0%{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}@media (height>=950px){.selection{padding-bottom:3vh}.cards{max-width:1380px}.card-slot{max-width:230px}.heading{margin-top:5vh}}@media (height<=760px) and (width>=801px){header{padding-top:22px;padding-bottom:18px}.heading{margin-top:0}h1{font-size:43px}.selection{padding-top:35px}.selection-label{margin-bottom:23px}.card-slot{max-width:168px}footer{padding-top:14px}}@media (width<=800px){header{padding:24px}.brand{font-size:22px}.chapter{letter-spacing:2px;font-size:10px}.heading{margin-top:5vh}h1{letter-spacing:7px;font-size:40px}.heading p{letter-spacing:5px;font-size:12px}.vertical-note{display:none}.selection{padding:64px 0 0;overflow:visible}.selection-label{margin-bottom:22px}.cards{scroll-snap-type:x mandatory;scrollbar-width:none;justify-content:flex-start;gap:22px;max-width:none;padding:38px max(28px,50vw - 115px) 10px;overflow-x:auto}.cards::-webkit-scrollbar{display:none}.card-slot{scroll-snap-align:center;flex:0 0 210px;max-width:none}.card-slot.is-active .card{transform:translateY(-16px)scale(1.04)}h2{font-size:36px}.card-quote{font-size:11px}footer{padding:20px 24px}footer>span{display:inline}footer p{margin:auto}.english{letter-spacing:2px;font-size:8px}.selection-label{gap:10px}.line{width:12vw}.backdrop{background-position:52%}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}.card-slot.is-active .card{transform:translateY(-10px)}.dust{display:none}}.brand{letter-spacing:4px}.seal{writing-mode:horizontal-tb;background:#542b20}.seal svg{width:30px;height:35px}.card{isolation:isolate;background:#2b2117;border:0;border-radius:1px;padding:0;box-shadow:0 14px 32px #000a,2px 3px #120e0a,-1px -1px #82623a}.art,.card-shade,.glint{border-radius:0;inset:2px}.art img{object-fit:cover}.inner-border{border:0;border-radius:0;inset:5px;box-shadow:inset 0 0 3px 1px #100c0855}.timber-frame{pointer-events:none;z-index:3;filter:drop-shadow(0 1px 1px #09070588);width:100%;max-width:none;height:100%;position:absolute;inset:0}.faction{background:#30261bdb;border-color:#bba074;width:23px;font-size:13px;line-height:27px;top:8%;left:9%}.card-caption{z-index:2;bottom:6%;left:9%;right:9%}.hero-title{letter-spacing:4px;font-size:10px}.card-caption h2{margin:3px 0 1px}.glint{background:radial-gradient(ellipse at var(--shine,50%) 20%,#f7ce8522,transparent 64%)}.card-slot.is-active .card{box-shadow:0 30px 55px #000b,2px 4px #20180f,-1px -1px #c7a36c,0 0 28px #a3794333}.card.is-selected{box-shadow:0 0 0 1px #c5a16b,0 0 30px #b18a4344}@media (width<=800px){.brand{letter-spacing:3px;gap:12px;font-size:21px}.brand small{letter-spacing:2px;font-size:7px}.chapter{letter-spacing:1px}.chapter b{width:18px}}.depth-backdrop{pointer-events:none}.depth-backdrop canvas{opacity:0;width:100%;height:100%;transition:opacity 1.2s;display:block;position:absolute;inset:0}.depth-backdrop[data-ready=true] canvas{opacity:1}.guanyu-film{color:#eed5a4;isolation:isolate;background:#050705;border:0;outline:none;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;font-family:inherit;position:fixed;inset:0;overflow:hidden}.guanyu-film::backdrop{background:#050705}.guanyu-film:not([open]){display:none}.scene-access-help{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.film-picture{position:absolute;inset:0;overflow:hidden;transform:none}.film-stage{width:max(100vw,177.778dvh);height:max(100dvh,56.25vw);position:absolute;top:42%;left:50%;transform:translate(-50%,-42%)}.film-stage video,.film-last-frame{object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;max-width:none;height:100%;display:block;position:absolute;inset:0}.film-last-frame{opacity:0}.guanyu-film[data-phase=ended] .film-last-frame{opacity:1}.guanyu-film[open][data-phase=ended] .film-picture{will-change:transform;animation:9s ease-in-out infinite film-breath}.scene-hotspot{z-index:3;position:absolute;top:53%;left:50%;transform:translate(-50%,-50%)}.scene-command-reveal{animation:.85s cubic-bezier(.16,1,.3,1) both scene-command-enter;position:relative}.scene-muster{color:#fff0c2;cursor:pointer;isolation:isolate;text-shadow:0 2px 5px #000,0 0 12px #ae813644;background:radial-gradient(#08110ed9 0%,#0a120d8c 30%,#0000 64%);border:0;place-items:center;width:226px;height:82px;padding:0;font-family:inherit;transition:transform .35s,filter .35s;display:grid;position:relative}.muster-dragon-frame{object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 3px #000b)saturate(.8);width:100%;max-width:none;height:100%;position:absolute;inset:0}.scene-muster-label{z-index:2;letter-spacing:10px;text-indent:10px;white-space:nowrap;margin-top:1px;font-size:29px;line-height:1;animation:1.2s .12s both muster-words-light;position:relative}.muster-gilding{pointer-events:none;mix-blend-mode:screen;background:linear-gradient(110deg,#0000 37%,#ffeab875 44%,#fff4da 49%,#ffeab880 53%,#0000 61%) 0 0/300% 100%;animation:5s .15s infinite muster-gold-pass;position:absolute;inset:0;-webkit-mask:url(/qunyinglu/films/guanyu/muster-dragon-frame.png) 50%/100% 100% no-repeat;mask:url(/qunyinglu/films/guanyu/muster-dragon-frame.png) 50%/100% 100% no-repeat}.muster-bloom{pointer-events:none;mix-blend-mode:screen;opacity:0;background:radial-gradient(#fff0c077 0%,#e7ad4133 20%,#0000 60%);animation:.95s ease-out both muster-bloom;position:absolute;inset:-60%}.scene-muster:hover{filter:drop-shadow(0 0 12px #f3bf5a55);transform:scale(1.045)}.scene-muster:active{transform:scale(.985)}.scene-muster:disabled{cursor:default}.scene-muster:focus-visible{outline-offset:5px;outline:1px solid #efd697}.film-transition{pointer-events:none;z-index:4;position:absolute;inset:0;overflow:hidden}.entry-shroud{will-change:transform;background:#070c09;width:56%;position:absolute;top:-8%;bottom:-8%}.entry-shroud-left{clip-path:polygon(0 0,100% 0,91% 18%,100% 32%,90% 46%,98% 60%,88% 80%,94% 100%,0 100%);left:-4%}.entry-shroud-right{clip-path:polygon(6% 0,100% 0,100% 100%,0 100%,9% 78%,1% 59%,10% 43%,0 27%);right:-4%}.guanyu-film[open] .entry-shroud-left{animation:.95s cubic-bezier(.16,.85,.2,1) both entry-curtain-left}.guanyu-film[open] .entry-shroud-right{animation:.95s cubic-bezier(.16,.85,.2,1) both entry-curtain-right}.entry-halo{opacity:0;mix-blend-mode:screen;background:radial-gradient(#e4bd6d42 0%,#a0752422 27%,#0000 57%);position:absolute;inset:-20%}.guanyu-film[open] .entry-halo{animation:.95s ease-out 80ms both entry-halo}.entry-slash{opacity:0;transform-origin:50%;mix-blend-mode:screen;background:linear-gradient(90deg,#0000 5%,#c58a33 24%,#fff3cf 49%,#fff 50%,#d9aa52 66%,#0000 90%);width:145vmax;height:3px;position:absolute;top:50%;left:50%;box-shadow:0 0 10px #ffe9b9,0 0 34px #d39a4288}.guanyu-film[open] .entry-slash{animation:.7s cubic-bezier(.15,.7,.25,1) 30ms both entry-blade}.guanyu-film[open] .entry-slash-second{height:1px;animation:.65s cubic-bezier(.15,.7,.25,1) .13s both entry-blade-return}.entry-flash{mix-blend-mode:screen;opacity:0;background:radial-gradient(at 50% 49%,#fff5d6ba 0%,#ebcc8055 34%,#0000 73%);position:absolute;inset:0}.guanyu-film[open] .entry-flash{animation:.65s ease-out .13s both entry-impact}.entry-embers{position:absolute;inset:0;overflow:hidden}.entry-embers b{opacity:0;will-change:transform;background:#ffe1a0;border-radius:50%;width:9px;height:2px;position:absolute;top:50%;left:50%;box-shadow:0 0 8px #eab250}.guanyu-film[open] .entry-embers b{animation:entry-spark .9s var(--delay) cubic-bezier(.12,.66,.23,1) both}.guanyu-film[open] .film-stage{animation:1.05s cubic-bezier(.16,1,.3,1) both scene-arrival-camera}.scene-departure{z-index:10;opacity:0;pointer-events:none;background:#080b08;position:absolute;inset:0}.guanyu-film[data-leaving=true] .scene-departure{animation:.48s cubic-bezier(.4,0,.2,1) both depart-hall}.guanyu-film[data-leaving=true] .scene-muster{filter:drop-shadow(0 0 22px #ffe4a6);transform:scale(1.08)}.film-loading{letter-spacing:5px;text-shadow:0 2px 8px #000;pointer-events:none;font-size:14px;animation:.4s 1s both loading-prompt;position:absolute;bottom:12%;left:50%;transform:translate(-50%)}.film-error{color:#ead1a1;text-align:center;letter-spacing:3px;background:#090e0ee8;border:1px solid #967343;padding:18px 28px;font-family:inherit;font-size:16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.film-error button{color:inherit;font:inherit;cursor:pointer;background:#372c20;border:1px solid #b99458;margin:4px;padding:9px 20px}@keyframes film-breath{0%,to{transform:scale(1.007)translate(-.06%,.04%)rotate(-.025deg)}40%{transform:scale(1.008)translate(.08%,-.07%)rotate(.025deg)}72%{transform:scale(1.007)translate(-.04%,-.015%)rotate(-.012deg)}}@keyframes ink-pass{0%{transform:translate(0)skew(-14deg)}to{transform:translate(125%)skew(-14deg)}}@keyframes blade-flash{0%{opacity:0;transform:translate(-18%,8%)}32%{opacity:.8}to{opacity:0;transform:translate(18%,-8%)}}@keyframes scene-command-enter{0%{opacity:0;transform:translateY(6px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes scene-target-breathe{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.8;transform:scale(1.13)}}@keyframes loading-prompt{0%{opacity:0}to{opacity:.75}}@media (width<=700px){.scene-muster{gap:15px;min-width:135px;padding:12px 17px}.scene-muster-label{letter-spacing:7px;text-indent:7px;font-size:25px}.scene-target{flex-basis:19px;width:19px;height:19px}.scene-target i{inset:6px}}@media (prefers-reduced-motion:reduce){.guanyu-film[open] .film-picture{animation:none;transform:none}.film-transition{display:none}.scene-command-reveal,.scene-target:before{animation:none}}@keyframes entry-curtain-left{0%,8%{transform:translate(0)skew(-8deg)}to{transform:translate(-112%)skew(-8deg)}}@keyframes entry-curtain-right{0%,8%{transform:translate(0)skew(-8deg)}to{transform:translate(112%)skew(-8deg)}}@keyframes entry-blade{0%{opacity:0;transform:translate(-78%,55%)rotate(-23deg)scaleX(.3)}18%{opacity:1}52%{opacity:.95}to{opacity:0;transform:translate(-23%,-50%)rotate(-23deg)scaleX(1.2)}}@keyframes entry-blade-return{0%{opacity:0;transform:translate(-20%,-55%)rotate(19deg)scaleX(.4)}20%{opacity:.8}to{opacity:0;transform:translate(-76%,-50%)rotate(19deg)scaleX(1.2)}}@keyframes entry-impact{0%{opacity:0}18%{opacity:.8}to{opacity:0}}@keyframes entry-halo{0%{opacity:0;transform:scale(.7)}24%{opacity:1}to{opacity:0;transform:scale(1.2)}}@keyframes entry-spark{0%{opacity:0;transform:translate(0,0) rotate(var(--angle)) scaleX(.2)}15%{opacity:1}to{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--angle)) scaleX(.1)}}@keyframes scene-arrival-camera{0%{filter:blur(3px)brightness(.65);transform:translate(-50%,-42%)scale(1.065)}to{filter:none;transform:translate(-50%,-42%)scale(1)}}@keyframes muster-words-light{0%{opacity:0;filter:blur(3px);text-shadow:0 0 28px #ffe4a2}35%{opacity:1;filter:blur();text-shadow:0 0 24px #fff0bc,0 0 10px #d7a343}to{opacity:1;filter:blur();text-shadow:0 2px 5px #000,0 0 12px #ae813644}}@keyframes muster-bloom{0%{opacity:0;transform:scale(.7)}23%{opacity:1}to{opacity:0;transform:scale(1.16)}}@keyframes muster-gold-pass{0%,70%{opacity:0;background-position:140% 0}73%{opacity:.9}97%,to{opacity:0;background-position:-30% 0}}@keyframes depart-hall{0%{opacity:0}to{opacity:1}}@media (width<=700px){.scene-muster{gap:0;width:196px;height:71px;padding:0}.scene-muster-label{letter-spacing:9px;text-indent:9px;font-size:27px}}@media (prefers-reduced-motion:reduce){.guanyu-film[open] .film-stage{animation:none}.entry-embers,.entry-flash,.muster-bloom,.muster-gilding{display:none}.scene-muster-label{animation:none}.scene-departure{transition:none}}.journey-back{top:max(20px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));z-index:90;color:#f1e8d4;cursor:pointer;filter:drop-shadow(0 1px 3px #0008);background:0 0;border:0;place-items:center;width:46px;height:40px;padding:5px;display:grid;position:fixed}.journey-back svg{fill:none;stroke:currentColor;stroke-width:1.4px;width:36px}.journey-back:hover{color:#fff}.journey-back:focus-visible{outline-offset:3px;outline:1px solid #cbb982}