dialog.hp-transition{position:fixed;inset:0;width:100vw;max-width:none;height:100svh;max-height:none;margin:0;padding:0;border:0;background:#060c10;color:#f0f5ef;overflow:auto;--hp-accent:#9addec}dialog.hp-transition::backdrop{background:#050a0d}dialog.hp-transition[data-plane="2"]{--hp-accent:#ffc083;background:#100b09}.hp-scene{min-height:100%;position:relative;isolation:isolate;overflow:hidden;padding:40px 6vw;display:flex;flex-direction:column;justify-content:space-between;font-family:"PingFang SC",system-ui,sans-serif}.hp-scene:before{content:"";position:absolute;inset:-6%;z-index:-2;background:linear-gradient(90deg,#050a0eea,#050a0e70),url('../assets/haff-war/zhouchanchan-war-cinematic-v2.png') center 30%/cover;filter:saturate(.2);transform:scale(calc(1.08 - var(--hp-progress,0)*.08))}.hp-scene:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#050a0ef0,transparent 65%),repeating-linear-gradient(0deg,transparent 0 60px,#b6e4ee08 61px 62px);pointer-events:none}.hp-header{font:12px monospace;letter-spacing:3px;color:var(--hp-accent);border-top:2px solid var(--hp-accent);padding-top:16px}.hp-code{position:absolute;right:5vw;top:10%;font:900 clamp(160px,28vw,380px)/1 Arial;color:#d4e7e409;letter-spacing:-.08em;pointer-events:none}.hp-content{position:relative;margin:8vh 0 6vh;transition:opacity .3s,transform .5s}.hp-previous{font-size:14px;color:#a1b5bb;letter-spacing:3px;margin-bottom:35px}.hp-eyebrow{font:12px monospace;letter-spacing:5px;color:var(--hp-accent);margin:0 0 18px}.hp-name{font-size:clamp(44px,8vw,108px);font-weight:900;letter-spacing:.12em;margin:0;line-height:1.15}.hp-brief{font-size:16px;letter-spacing:3px;color:#c3cec9;margin-top:28px}.hp-route{list-style:none;display:flex;padding:0;gap:0;margin:0 0 30px;max-width:800px}.hp-route li{flex:1;border-top:2px solid #9bb5b933;padding-top:16px;font:14px monospace;color:#9aa9a6;position:relative}.hp-route li:before{content:"";position:absolute;left:0;top:-5px;width:8px;height:8px;background:#425756}.hp-route .passed{border-color:#8ca29a;color:#afc4bd}.hp-route .active{border-color:var(--hp-accent);color:var(--hp-accent)}.hp-route .active:before{background:var(--hp-accent);box-shadow:0 0 18px var(--hp-accent)}.hp-footer{display:flex;justify-content:space-between;gap:18px;align-items:center;font-size:14px;color:#b7c8c8}.hp-skip{background:#10202290;border:1px solid #8eafa76b;color:#f0f5ef;font:14px system-ui;min-height:46px;padding:12px 20px;border-radius:0;cursor:pointer}.hp-skip:hover{border-color:var(--hp-accent)}.hp-skip:focus-visible{outline:2px solid var(--hp-accent);outline-offset:4px}.hp-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#9addec15}.hp-progress i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:var(--hp-accent)}.hp-transition[data-stage="depart"] .hp-name{opacity:.18;transform:translateX(22px)}.hp-name{transition:opacity .7s,transform .7s}.hp-transition[data-stage="ready"] .hp-content{transform:translateY(-8px)}@media(max-width:600px){.hp-scene{padding:28px 24px}.hp-content{margin:8vh 0}.hp-eyebrow{letter-spacing:2px}.hp-brief{font-size:14px;letter-spacing:1px}.hp-route li{font-size:12px;line-height:1.7;padding-right:10px}.hp-header{letter-spacing:1px}}@media(prefers-reduced-motion:reduce){.hp-transition *{transition:none!important}.hp-scene:before{transform:none}.hp-transition[data-stage="depart"] .hp-name{opacity:1;transform:none}}