@font-face{font-family:Entry Grotesk;src:url('./SpaceGrotesk.woff2') format('woff2');font-weight:300 700;font-display:swap}
html{background:#202326;color:#efeee9;font-family:'Entry Grotesk','Segoe UI',Arial,sans-serif;color-scheme:dark}body{margin:0}*{box-sizing:border-box}[hidden]{display:none!important}button,input{font:inherit}
#gate{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#202326;color:#efeee9;overflow:auto;isolation:isolate}
#gate:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 37%,#373b3b55,transparent 57%)}
.entry-content{width:min(390px,calc(100vw - 48px));text-align:center;padding:38px 0;animation:entry-arrive 820ms cubic-bezier(.22,1,.36,1) both}
.entry-symbol{width:117px;height:64px;position:relative;margin:0 auto 38px;animation:mark-arrive 1020ms cubic-bezier(.22,1,.36,1) both}
.entry-symbol svg,.entry-flying-mark svg{display:block;width:100%;height:100%;overflow:visible}.entry-symbol path{transform-box:fill-box;transform-origin:center;animation:stripe-wave 16s cubic-bezier(.4,0,.2,1) infinite}
.entry-symbol path:nth-child(2){animation-delay:-.18s}.entry-symbol path:nth-child(3){animation-delay:-.36s}.entry-symbol path:nth-child(4){animation-delay:-.54s}
#gate[data-scene=shuffle] .entry-symbol path{animation-name:stripe-shuffle}#gate[data-scene=lean] .entry-symbol path{animation-name:stripe-lean}
#gate[data-phase=checking] .entry-symbol path,#gate[data-phase=loading] .entry-symbol path{animation:stripe-check 1.9s ease-in-out infinite}#gate[data-phase=checking] .entry-symbol path:nth-child(2),#gate[data-phase=loading] .entry-symbol path:nth-child(2){animation-delay:.12s}#gate[data-phase=checking] .entry-symbol path:nth-child(3),#gate[data-phase=loading] .entry-symbol path:nth-child(3){animation-delay:.24s}#gate[data-phase=checking] .entry-symbol path:nth-child(4),#gate[data-phase=loading] .entry-symbol path:nth-child(4){animation-delay:.36s}
#teaser{height:66px;margin:0 0 20px;position:relative;font-size:clamp(22px,5vw,26px);font-weight:400;line-height:1.25;letter-spacing:-.8px;text-wrap:balance}.teaser-line{position:absolute;inset:0;margin:0;display:grid;place-content:center}
#gate h1{font-size:10px;letter-spacing:2.1px;font-weight:500;text-transform:uppercase;color:#b7bcb7;margin:0 0 22px}.entry-label{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
.pin-control{position:relative;height:60px}.pin-slots{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;height:100%}.pin-slots i{position:relative;border:1px solid #696f6c;border-radius:8px;display:grid;place-items:center;font-style:normal;background:#ffffff03;transition:border-color .2s,background .2s,box-shadow .2s}
.pin-slots i:after{content:'';width:7px;height:7px;border-radius:50%;background:#f5f1e7;opacity:0;transform:scale(.4);transition:opacity .16s,transform .28s cubic-bezier(.18,.85,.28,1.4)}.pin-slots i.filled{border-color:#aeb6ad;background:#ffffff09}.pin-slots i.filled:after{opacity:1;transform:scale(1)}
.pin-control:focus-within .pin-slots i.active{border-color:#e7ece3;box-shadow:0 0 0 2px #eff7e711}.pin-slots i.active:before{content:'';position:absolute;bottom:10px;width:12px;height:2px;border-radius:2px;background:#b4bcb1;opacity:0}.pin-control:focus-within .pin-slots i.active:before{opacity:1}
#pin{position:absolute;inset:0;width:100%;height:100%;background:transparent;color:transparent;caret-color:transparent;border:0;outline:0;font-size:16px;letter-spacing:26px;opacity:.01}
#unlock-button{margin-top:16px;width:100%;display:flex;justify-content:space-between;align-items:center;background:#f5f1e7;color:#202326;border:1px solid #f5f1e7;border-radius:8px;min-height:52px;padding:14px 18px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
#unlock-button span{display:inline-block;transition:transform .25s}#unlock-button:hover{background:#fff}#unlock-button:hover span{transform:translate(2px,-2px)}#unlock-button:active{transform:scale(.99)}#unlock-button:disabled{background:#dcdfd7;border-color:#dcdfd7;cursor:wait}
#gate-status{min-height:42px;font-size:12px;line-height:1.5;margin:18px 0 4px;color:#c0c8bf}#pause-motion{background:none;border:0;color:#a7b0a8;font-size:11px;padding:12px;min-height:44px;cursor:pointer}#gate button:focus-visible{outline:2px solid #f5f1e7;outline-offset:4px}
#gate.departing{pointer-events:none}#gate.departing .entry-symbol{opacity:0}.entry-flying-mark{position:fixed;z-index:36;pointer-events:none;transform-origin:0 0}.entry-flying-mark path{animation:none!important;transform:none!important}
.entry-bridge{position:fixed;z-index:35;pointer-events:none;transform-origin:0 0;border:1px solid #a7aaa4;border-radius:8px;display:flex;justify-content:space-around;align-items:center}.entry-bridge i{width:7px;height:7px;border-radius:50%;background:#f5f1e7}
.entry-paused .entry-symbol path{animation-play-state:paused!important}.entry-reduced .entry-content,.entry-reduced .entry-symbol{animation:none!important}.entry-reduced .pin-slots i,.entry-reduced .pin-slots i:after,.entry-reduced #unlock-button,.entry-reduced #unlock-button span{transition:none}
@keyframes entry-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes mark-arrive{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes stripe-wave{0%,58%,100%{transform:translateY(0)}66%{transform:translateY(-12px)}74%{transform:translateY(3px)}82%{transform:translateY(0)}}
@keyframes stripe-shuffle{0%,58%,100%{transform:translate(0,0) rotate(0)}68%{transform:translate(5px,-9px) rotate(-8deg)}78%{transform:translate(-2px,3px) rotate(2deg)}88%{transform:translate(0,0) rotate(0)}}
@keyframes stripe-lean{0%,58%,100%{transform:translateY(0) skewY(0)}68%{transform:translateY(-5px) skewY(-14deg)}80%{transform:translateY(2px) skewY(4deg)}90%{transform:translateY(0) skewY(0)}}
@keyframes stripe-check{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.62;transform:translateY(-3px)}}
@media(max-height:600px){.entry-content{padding:22px 0}.entry-symbol{margin-bottom:20px;width:88px;height:48px}#teaser{height:56px;margin-bottom:14px;font-size:22px}#gate h1{margin-bottom:16px}#gate-status{margin-top:10px;min-height:28px}#pause-motion{padding:8px}.pin-control{height:52px}}
@media(max-height:420px){#gate{place-items:start center}.entry-content{padding:16px 0}.entry-symbol{margin-bottom:10px;width:64px;height:35px}#teaser{height:32px;margin-bottom:10px;font-size:18px}#gate h1{margin-bottom:12px}#unlock-button{margin-top:10px;min-height:44px}#gate-status{margin:7px 0 0;min-height:22px}.pin-control{height:44px}#pause-motion{min-height:32px}}
@media(prefers-reduced-motion:reduce){.entry-symbol,.entry-symbol path,.entry-content{animation:none!important}.pin-slots i,.pin-slots i:after,#unlock-button,#unlock-button span{transition:none!important}}
/* The entry reads as a quiet opening act, with the punchline arriving second. */
.entry-symbol{width:140px;height:76.58px;margin-bottom:32px}
#teaser{height:124px;margin-bottom:22px;font-size:32px;line-height:1.17;letter-spacing:-1.2px}
.teaser-line{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.teaser-title{display:block;width:100%;text-wrap:balance}.teaser-aside{display:block;max-width:100%;font-size:12px;line-height:1.5;letter-spacing:0;color:#b5bfb3;text-wrap:balance}
.entry-symbol path{animation-duration:9s}
@keyframes stripe-wave{0%,18%,100%{transform:translateY(0)}36%{transform:translateY(-12px)}50%{transform:translateY(3px)}64%{transform:translateY(0)}}
@keyframes stripe-shuffle{0%,18%,100%{transform:translate(0,0) rotate(0)}36%{transform:translate(5px,-9px) rotate(-8deg)}50%{transform:translate(-2px,3px) rotate(2deg)}64%{transform:translate(0,0) rotate(0)}}
@keyframes stripe-lean{0%,18%,100%{transform:translateY(0) skewY(0)}36%{transform:translateY(-5px) skewY(-14deg)}50%{transform:translateY(2px) skewY(4deg)}64%{transform:translateY(0) skewY(0)}}
@media(max-width:450px){#teaser{font-size:29px}}
@media(max-height:600px){.entry-symbol{width:88px;height:48px;margin-bottom:18px}#teaser{height:94px;font-size:25px;margin-bottom:16px}.teaser-line{gap:9px}.teaser-aside{font-size:11px}}
@media(max-height:420px){.entry-symbol{width:64px;height:35px;margin-bottom:10px}#teaser{height:72px;font-size:20px;margin-bottom:10px}.teaser-line{gap:6px}.teaser-aside{font-size:10px}#pause-motion{min-height:44px}}
#teaser{animation:entry-arrive 700ms cubic-bezier(.22,1,.36,1) 120ms both}
#gate h1,#unlock{animation:entry-arrive 700ms cubic-bezier(.22,1,.36,1) 190ms both}
#gate-status,#pause-motion{animation:entry-arrive 600ms cubic-bezier(.22,1,.36,1) 260ms both}
.entry-reduced #teaser,.entry-reduced h1,.entry-reduced #unlock,.entry-reduced #gate-status,.entry-reduced #pause-motion{animation:none!important}
@media(prefers-reduced-motion:reduce){#teaser,#gate h1,#unlock,#gate-status,#pause-motion{animation:none!important}}