:root{color:#d7efdf;font-synthesis:none;font-family:Courier New,monospace}*{box-sizing:border-box}body{place-items:center;min-width:280px;min-height:100svh;margin:0;display:grid}canvas{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}body:before{z-index:1;content:"";pointer-events:none;background:radial-gradient(#020604e8 0%,#020604ab 33%,#02060422 75%,#02060477 100%);width:100%;height:100%;position:fixed;inset:0}main{z-index:2;text-align:center;width:min(100%,760px);padding:64px 20px;position:relative}.eyebrow{color:#62ab7b;letter-spacing:.45em;margin:0 0 24px;font-size:11px}h1{letter-spacing:.13em;text-shadow:0 0 24px #74ffa333;margin:0;font-size:clamp(25px,5vw,46px);font-weight:400}.invitation{color:#9eb5a5;letter-spacing:.08em;margin:20px 0 36px;font-size:13px}nav{justify-content:center;gap:clamp(20px,8vw,100px);display:flex}.choice{color:#b5c7ba;outline-offset:5px;border-radius:8px;flex-direction:column;align-items:center;gap:36px;padding:30px 24px 20px;text-decoration:none;display:flex}.capsule{background:linear-gradient(#ffa0a5 0%,#ed495c 18%,#ab102a 49%,#66091a 83%,#a62837 100%);border-radius:100px;width:clamp(100px,16vw,154px);height:clamp(44px,7vw,66px);transition:transform .18s;display:block;position:relative;transform:rotate(-24deg);box-shadow:inset 0 1px 2px #ffe1e4aa,inset 0 -3px 5px #190007aa,0 10px 30px #0009,0 0 26px #e5243426}.capsule:before{content:"";background:#0002;border-left:1px solid #0005;border-radius:0 100px 100px 0;position:absolute;inset:0 0 0 49%}.capsule:after{content:"";background:linear-gradient(90deg,#fff0,#fff9,#fff0);border-radius:50%;width:65%;height:17%;position:absolute;top:12%;left:15%}.blue .capsule{background:linear-gradient(#9dcfff 0%,#428fed 18%,#1857b4 49%,#0a2457 83%,#27558c 100%);transform:rotate(24deg);box-shadow:inset 0 1px 2px #e1f4ffaa,inset 0 -3px 5px #000c29aa,0 10px 30px #0009,0 0 26px #2476e526}.choice:hover .capsule,.choice:focus-visible .capsule{transform:translateY(-7px)rotate(-16deg)}.blue:hover .capsule,.blue:focus-visible .capsule{transform:translateY(-7px)rotate(16deg)}.choice:focus-visible{outline:1px solid #a7e7bc}.label{letter-spacing:.18em;font-size:11px}.label span{margin-left:6px}.choice:hover .label,.choice:focus-visible .label{color:#fff}footer{z-index:2;color:#6d9179;letter-spacing:.25em;pointer-events:none;font-size:9px;position:fixed;bottom:24px}.curtain{z-index:3;opacity:0;pointer-events:none;background:#000;width:100%;height:100%;position:fixed;inset:0}body[data-choice] .curtain{opacity:1;pointer-events:auto;transition:opacity .38s}.breach{z-index:4;pointer-events:none;color:#a6f9c1;align-content:center;justify-items:center;gap:18px;width:100%;height:100%;display:none;position:fixed;inset:0}.breach:before{content:"";background:#9effbf;width:100%;height:2px;animation:.62s ease-in forwards scan;position:absolute;top:0;left:0;box-shadow:0 0 16px #43ff86}.breach-code{letter-spacing:.18em;font-size:10px}.breach-message{letter-spacing:.24em;font-size:clamp(28px,6vw,48px)}body[data-choice=red] .breach{animation:1.1s linear both signal;display:grid}body[data-choice=red] main{animation:.38s step-end forwards disconnect}body[data-choice=red] canvas{animation:.85s ease-in forwards collapse}body[data-choice=red] footer{opacity:0}body[data-choice=red] .curtain{transition:opacity .3s ease-in .76s}@keyframes disconnect{0%{opacity:1;transform:translate(0)}18%{transform:translate(-8px)skew(-3deg)}38%{opacity:.65;transform:translate(6px)}58%{opacity:.8;transform:translate(-3px)}80%,to{opacity:0;transform:translate(0)}}@keyframes collapse{0%{opacity:1;transform:scale(1)}30%{opacity:.8;transform:scaleX(1.025)}65%{opacity:.6;transform:scale(1.06,.012)}85%,to{opacity:0;transform:scale(.1,.002)}}@keyframes scan{0%{opacity:.5;transform:translateY(0)}to{opacity:0;transform:translateY(100vh)}}@keyframes signal{0%,28%{opacity:0}42%,76%{opacity:1}to{opacity:0}}@media (max-width:380px){.choice{padding-inline:12px}nav{gap:12px}}@media (max-height:480px){main{padding:28px 20px}.invitation{margin-bottom:10px}.eyebrow{margin-bottom:12px}footer{display:none}}@media (prefers-reduced-motion:reduce){.capsule,body[data-choice] .curtain{transition:none}body[data-choice=red] .breach{display:none}body[data-choice=red] main,body[data-choice=red] canvas{animation:none}}
