@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;600&display=swap');
:root{--navy:#071c2d;--ink:#f4f0e4;--gold:#e6c477;--line:rgba(244,240,228,.2);--muted:rgba(244,240,228,.6)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--navy)}body{overflow:hidden;color:var(--ink);font-family:'Noto Sans SC',sans-serif}button{font:inherit;color:inherit}
.portal{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:28px clamp(22px,5vw,76px) 24px;background:radial-gradient(ellipse at 50% 42%,#16465b 0,#0d3046 34%,var(--navy) 78%)}
.portal::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.16;background-image:linear-gradient(90deg,rgba(244,240,228,.08) 1px,transparent 1px),linear-gradient(rgba(244,240,228,.08) 1px,transparent 1px);background-size:88px 88px;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.wash{position:absolute;z-index:-1;width:min(64vw,780px);height:min(64vw,780px);left:50%;top:41%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(28,90,108,.26),transparent 68%);filter:blur(10px);pointer-events:none}
.footer{display:flex;align-items:center;justify-content:space-between;gap:16px;font:500 10px/1.5 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.stage{position:relative;flex:1;min-height:400px;width:min(760px,100%);margin:0 auto;display:grid;place-items:center}.identity{position:relative;width:min(450px,62vw);aspect-ratio:1;display:grid;place-items:center;animation:arrive 1.1s cubic-bezier(.2,.8,.2,1) both,drift 6s ease-in-out 1.1s infinite}.xmu-seal{position:absolute;width:94%;height:94%;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 22px 24px rgba(0,0,0,.3));opacity:.92}.nailong{position:absolute;z-index:2;width:49%;height:49%;object-fit:contain;transform:translate(34%,25%);filter:drop-shadow(0 18px 15px rgba(0,0,0,.3));animation:nailongIn 1.2s .25s cubic-bezier(.2,.8,.2,1) both,nailongFloat 4.8s ease-in-out 1.45s infinite}
.seal-orbit{position:absolute;left:50%;top:50%;width:min(490px,68vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}.progress-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}.progress-track,.progress-value{fill:none;stroke-width:.65}.progress-track{stroke:rgba(244,240,228,.15)}.progress-value{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 5px var(--gold))}
.message{text-align:center;margin:-16px auto 0}.eyebrow{margin:0 0 14px;color:var(--gold);font:500 10px 'DM Mono',monospace;letter-spacing:.2em}.status-dot{display:inline-block;width:6px;height:6px;margin-right:9px;vertical-align:1px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(230,196,119,.13)}.destination{margin:0;color:var(--ink);font:500 clamp(15px,2vw,19px)/1.3 'DM Mono',monospace;letter-spacing:.03em}.status{min-height:1.4em;margin:10px 0 0;color:var(--muted);font-size:12px}
.handoff{width:min(620px,100%);margin:29px auto 24px;display:grid;grid-template-columns:1fr auto;gap:10px 18px;align-items:end}.handoff-line{grid-column:1;display:flex;justify-content:space-between;color:var(--muted);font:10px 'DM Mono',monospace;letter-spacing:.08em}.handoff-line span:first-child{color:var(--gold)}.bar{height:3px;grid-column:1;overflow:hidden;background:rgba(244,240,228,.15)}.bar span{display:block;width:0;height:100%;background:var(--gold);box-shadow:0 0 12px var(--gold)}.skip{grid-column:2;grid-row:1/span 2;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:11px 17px;background:rgba(7,28,45,.18);cursor:pointer;font-size:12px;transition:.25s ease}.skip:hover,.skip:focus-visible{border-color:var(--gold);background:var(--gold);color:var(--navy);outline:none}.skip span{margin-left:7px}
.footer{border-top:1px solid var(--line);padding-top:15px;color:rgba(244,240,228,.46)}.footer span:last-child{color:var(--muted)}
@keyframes arrive{from{opacity:0;transform:scale(.74) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes nailongIn{from{opacity:0;transform:translate(34%,33%) scale(.75)}to{opacity:1;transform:translate(34%,25%) scale(1)}}@keyframes drift{50%{transform:translateY(-7px)}}@keyframes nailongFloat{50%{transform:translate(34%,21%) rotate(1deg)}}@keyframes sealPulse{50%{opacity:.9;transform:scale(1.012)}}
@media(max-width:700px){body{overflow:auto}.portal{width:100vw;min-height:100svh;padding:20px 18px 17px}.footer{font-size:8px}.stage,.handoff{width:100%;max-width:100%;min-width:0}.stage{min-height:0;padding:40px 0 22px}.identity{width:min(330px,80vw);max-width:100%}.seal-orbit{width:min(360px,88vw);max-width:100%}.nailong{transform:translate(22%,25%)}.message{margin-top:0}.destination{font-size:13px}.handoff{grid-template-columns:1fr;margin-top:26px}.handoff-line,.bar,.skip{grid-column:1}.skip{grid-row:auto;justify-self:center;margin-top:4px}.footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.identity{animation:arrive .7s ease-out both}.xmu-seal{animation:none}.nailong{animation:nailongIn .75s .1s ease-out both}}