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