body { margin:0; height:100svh; overflow:hidden; }
.center { width:max-content; max-width:calc(100vw - 40px); }
.arrow-button { all:unset; display:block; cursor:pointer; line-height:0; }
button,a { font:inherit; -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:1px solid #b6b6b6; outline-offset:5px; }
.ending { position:fixed; inset:0; display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .9s,visibility .9s; }
.ending.visible { opacity:1; visibility:visible; }
.destination { position:relative; width:240px; max-width:calc(100vw - 40px); }
.names { position:relative; isolation:isolate; display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:6px; border:1px solid #252525; border-radius:32px; background:#090909; }
.names:before { content:''; position:absolute; z-index:0; top:6px; bottom:6px; left:6px; width:calc(50% - 8px); border-radius:24px; background:#232323; pointer-events:none; transition:transform .35s cubic-bezier(.22,1,.36,1); }
[data-product="grace"] .names:before { transform:translateX(calc(100% + 4px)); }
.name { position:relative; z-index:1; box-sizing:border-box; background:transparent; border:0; border-radius:24px; padding:10px 12px; color:#909090; font-size:14px; font-weight:400; line-height:20px; text-align:center; text-decoration:none; cursor:pointer; transition:color .3s; }
.name[aria-pressed="true"],.name[aria-current="true"] { color:#dedede; }
.ela:hover { color:cyan; }.grace:hover { color:#fb4674; }
.links { display:grid; grid-template-columns:repeat(3,1fr); margin-top:12px; }
.links :is(button,a[data-policy]) { border:0; background:transparent; padding:10px 12px; color:#909090; font-size:14px; line-height:20px; cursor:pointer; transition:color .3s; }.links :is(button,a[data-policy]):hover { color:white; }
.product-bubble { position:absolute; z-index:3; left:50%; bottom:calc(100% + 14px); width:max-content; max-width:calc(100vw - 64px); box-sizing:border-box; padding:11px 15px; border:1px solid #252525; border-radius:16px; background:#090909; color:#dedede; font-size:14px; line-height:20px; text-align:center; opacity:0; visibility:hidden; transform:translate(-50%,6px); transition:opacity .2s,transform .2s,visibility .2s; }
.product-bubble.visible { opacity:1; visibility:visible; transform:translate(-50%,0); }
.product-bubble:after { content:''; position:absolute; left:calc(50% - 4px); bottom:-5px; width:8px; height:8px; border-right:1px solid #252525; border-bottom:1px solid #252525; background:#090909; transform:rotate(45deg); }
dialog { background:#0c0c0c; color:#999; border:1px solid #292929; border-radius:18px; padding:36px; width:min(360px,calc(100vw - 100px)); line-height:1.7; }
dialog::backdrop { background:#000b; backdrop-filter:blur(6px); }dialog h2 { color:#ddd; font-size:20px; font-weight:400; margin:0 0 16px; }dialog p { font-size:14px; margin:0; }
.close { position:absolute; right:12px; top:8px; border:0; background:none; color:#999; cursor:pointer; font-size:24px; }
@media(max-width:480px) { .text-3 { line-height:1.6; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }

.links a[data-policy] { text-decoration:none; display:inline-block; }

/* A short entrance on every page; visible without JavaScript or motion. */
@keyframes site-arrive { from { opacity:0; } to { opacity:1; } }
body { animation:site-arrive .6s ease-out backwards; }
@media (prefers-reduced-motion:reduce) { body { animation:none; } }