* { box-sizing: border-box; }
:root {
  color-scheme: light;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #222d36;
  background: #e9eef3;
}
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(30px, 7vw, 90px) clamp(16px, 5vw, 56px);
  isolation: isolate;
  background: linear-gradient(145deg, #f8f9fc 0%, #dee7f2 70%, #f3eff1 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: -16%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 80% 21%, #ffe5bc 0%, transparent 50%),
    radial-gradient(ellipse at 14% 39%, #b8e0f1 0%, transparent 59%);
  animation: drift-light 16s ease-in-out -5s infinite alternate;
}
@keyframes drift-light {
  from { transform: translate3d(-8%, -3%, 0); }
  to { transform: translate3d(9%, 6%, 0); }
}
.portal { width: min(900px, 100%); }
.welcome { text-align: center; margin-bottom: clamp(28px, 5vw, 46px); }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 7px;
  border-radius: 999px;
  border: 1px solid #fff;
  background: #ffffff7a;
  box-shadow: 0 5px 20px #293f5714;
  font-weight: 650;
}
.brand img, .tile img { object-fit: contain; }
h1 {
  margin: 18px 0 8px;
  font-size: clamp(32px, 6.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.welcome p { color: #425461; margin: 0; font-size: clamp(16px, 2.5vw, 20px); }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.choice {
  --accent: #1675a5;
  --tint: #d4ecfa;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 4vw, 34px);
  text-decoration: none;
  color: inherit;
  border: 1px solid #ffffffed;
  border-radius: 28px;
  background: linear-gradient(146deg, #ffffffab, #b7c3ce56);
  backdrop-filter: blur(21px) saturate(130%);
  box-shadow: 0 20px 48px #344a6026, inset 0 1px 0 #ffffffc9, inset 0 -1px 0 #5a6c7c21;
  transition: transform 230ms ease, box-shadow 230ms ease;
}
.os { --accent: #775139; --tint: #f5e6d9; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tile {
  width: 62px;
  height: 62px;
  border-radius: 19px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffffffdf, var(--tint));
  border: 1px solid #fff;
  box-shadow: 0 8px 18px #283c5523;
  color: var(--accent);
}
.tile svg { width: 36px; height: 36px; }
.tag {
  color: #354654;
  border: 1px solid #ffffffb8;
  background: #ffffff60;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
}
.choice h2 { font-size: clamp(23px, 3.4vw, 32px); letter-spacing: -.035em; margin: 19px 0 7px; }
.choice p { margin: 0 0 21px; color: #374854; line-height: 1.55; }
.action {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 46px;
  border: 1px solid #ffffffdc;
  border-radius: 13px;
  padding: 9px 13px;
  background: #ffffff9f;
  color: var(--accent);
  font-size: 15px;
  font-weight: 650;
}
.action span { font-size: 20px; line-height: 1; transition: transform 230ms ease; }
.choice:focus-visible { outline: 3px solid #176993; outline-offset: 4px; }
@media (hover: hover) {
  .choice:hover { transform: translateY(-5px); box-shadow: 0 25px 55px #344a603b, inset 0 1px 0 #fff; }
  .choice:hover .action span { transform: translateX(4px); }
}
@media (max-width: 620px) {
  .choices { grid-template-columns: 1fr; gap: 14px; }
  .portal { max-width: 420px; }
  .choice { border-radius: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .choice, .action span { transition: none; }
  .choice:hover, .choice:hover .action span { transform: none; }
}