:root{color-scheme:dark}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}
*{box-sizing:border-box}
html{background:light-dark(#fbf6ee,#14110e);color:light-dark(#14212c,#f1ebe2)}
body{margin:0;min-height:100vh;min-height:100svh;display:grid;place-items:center;font-family:Outfit,system-ui,sans-serif;padding:48px 24px;
  background:radial-gradient(ellipse 60% 45% at 50% 30%,light-dark(rgba(239,116,75,.16),rgba(240,138,93,.12)),transparent 70%),radial-gradient(ellipse 40% 35% at 80% 90%,light-dark(rgba(255,196,120,.14),rgba(255,196,120,.06)),transparent 70%)}
.entrance{width:100%;max-width:620px;text-align:center;padding-bottom:2vh}
.entrance .helloape-brand{gap:8px;line-height:1;color:light-dark(#14212c,#f1ebe2)}
.entrance .helloape-mark{width:64px}
.entrance .helloape-wordmark{font-size:42px;letter-spacing:-1.4px}
h1{font-size:clamp(40px,min(7vw,10vh),76px);line-height:1.02;font-weight:700;letter-spacing:-.04em;margin:clamp(20px,6vh,56px) 0 clamp(12px,3vh,24px)}
.introduction{font:400 21px/1.55 Outfit,system-ui,sans-serif;color:light-dark(#4a5761,#cfc6b9);max-width:470px;margin:0 auto}
.account-note{font-size:17px;line-height:1.6;font-weight:500;color:light-dark(#b4532f,#f3a27c);margin:14px 0 0}
.entrance-actions{display:flex;gap:14px;justify-content:center;margin:clamp(20px,4.5vh,40px) 0 0}
.entrance-button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;min-width:156px;padding:0 28px;border:1px solid light-dark(#e6dccf,#2a2520);border-radius:999px;font-size:19px;font-weight:600;text-decoration:none;color:light-dark(#14212c,#f1ebe2);background:light-dark(#fff,#1d1915);box-shadow:0 1px 2px light-dark(rgba(20,33,44,.06),rgba(0,0,0,.35));transition:background .15s,transform .15s,box-shadow .15s}
.entrance-button:hover{background:light-dark(#fffaf4,#26211c);transform:translateY(-1px)}
.entrance-button.primary{background:light-dark(#e0633a,#f08a5d);border-color:light-dark(#e0633a,#f08a5d);color:light-dark(#fff,#14110e);font-weight:700;box-shadow:0 8px 24px -8px light-dark(rgba(239,116,75,.7),rgba(240,138,93,.4))}
.entrance-button.primary:hover{background:light-dark(#cf5328,#f6a07a);border-color:light-dark(#cf5328,#f6a07a)}
a:focus-visible{outline:3px solid light-dark(#d65c35,#f6a07a);outline-offset:5px;border-radius:999px}
.invitation-note{display:inline-block;margin:28px 0 0;padding:7px 16px;border-radius:999px;background:light-dark(rgba(255,255,255,.7),rgba(255,255,255,.06));border:1px solid light-dark(#efe4d6,#2a2520);font-size:14px;line-height:1.5;color:light-dark(#6b6258,#a39a8e)}
@media(max-width:480px){body{padding:32px 20px}.entrance .helloape-mark{width:52px}.entrance .helloape-wordmark{font-size:34px;letter-spacing:-1.2px}h1{letter-spacing:-.03em}.introduction{font-size:18px}.entrance-actions{gap:10px}.entrance-button{flex:1;min-width:0}}
@media(prefers-reduced-motion:reduce){.entrance-button{transition:none}.entrance-button:hover{transform:none}}

.theme-switch{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line,light-dark(#e6dccf,#2a2520));border-radius:999px;background:light-dark(rgba(255,255,255,.6),rgba(255,255,255,.05))}.theme-switch button{border:0;background:none;border-radius:999px;padding:3px 10px;font:inherit;font-size:12px;font-weight:600;color:light-dark(#6b6258,#a39a8e);cursor:pointer;min-height:26px}.theme-switch button:hover{color:light-dark(#14212c,#f1ebe2)}.theme-switch button[aria-pressed=true]{background:light-dark(#fff,#3a332c);color:light-dark(#14212c,#f1ebe2);box-shadow:0 1px 2px light-dark(rgba(20,33,44,.08),rgba(0,0,0,.4))}
.entrance .theme-switch{display:flex;width:fit-content;margin:22px auto 0}
.entrance-promise{margin:40px 0 0;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:light-dark(#6b6259,#a39a8e)}
