:root {
  color-scheme: dark;
  font-family: "DM Sans", system-ui, sans-serif;
  color: #f3efff;
  background: #0b0b14;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 50% 35%, #21162e 0, #11111b 44%, #0b0b14 78%); }
.welcome { display: flex; min-height: 100vh; flex-direction: column; align-items: center; padding: 30px 24px 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #f3efff; font-family: "Space Grotesk", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .05em; text-decoration: none; }
.brand-mark { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: linear-gradient(140deg, #ed43a7, #bb53e6 60%, #79c3fa); box-shadow: 0 4px 13px #de52b93b; }
.brand-dot { color: #e85eb3; }
.choice-card { width: min(100%, 520px); margin: auto; padding: clamp(26px, 6vw, 42px); border: 1px solid #30283c; border-radius: 20px; background: linear-gradient(145deg, #171420ed, #11111bd9); box-shadow: 0 25px 80px #0005; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; color: #bfb5cd; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.eyebrow span { width: 20px; height: 2px; background: linear-gradient(90deg, #e342a2, #70bdf7); }
h1 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(29px, 7vw, 38px); letter-spacing: -.055em; }
.intro { margin: 12px 0 27px; color: #aaa4bb; font-size: 14px; line-height: 1.7; }
.choices { display: grid; gap: 11px; }
.choice { display: flex; min-height: 78px; align-items: center; gap: 15px; padding: 14px; color: #f3efff; text-decoration: none; border: 1px solid #383043; border-radius: 12px; background: #ffffff04; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.choice:hover { transform: translateY(-2px); border-color: #895080; background: #ffffff09; box-shadow: 0 9px 24px #0003; }
.choice:focus-visible { outline: 2px solid #79c3fa; outline-offset: 3px; }
.choice-icon { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 12px; color: #ed79c2; background: #df41a51b; }
.choice-icon svg { width: 25px; height: 25px; }
.choice-web .choice-icon { color: #7bc5ef; background: #56c2e51a; }
.choice-copy { display: grid; gap: 5px; }
.choice-copy strong { font-size: 14px; font-weight: 700; }
.choice-copy small { color: #a59caf; font-size: 11px; }
.choice-arrow { margin-left: auto; color: #c9bad4; font-size: 19px; transition: transform .18s ease; }
.choice:hover .choice-arrow { transform: translate(2px, -2px); color: #fff; }
.card-note { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; color: #8f879c; font-size: 10px; }
.note-dot { width: 6px; height: 6px; border-radius: 50%; background: #74d4a0; box-shadow: 0 0 10px #74d4a077; }
footer { color: #817a90; font-size: 10px; letter-spacing: .03em; }
footer span { padding: 0 5px; color: #50495d; }
@media (max-width: 480px) { .welcome { padding: 22px 18px 17px; } .choice-card { padding: 25px 20px; border-radius: 16px; } .choice { gap: 12px; } .choice-copy small { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }