:root{
  --primary-50:  #f3f9ff;
  --primary-100: #e8f3ff;
  --primary-200: #d6ecff; /* base tile */
  --primary-300: #c1e2ff; /* hover */
  --primary-400: #a9d7ff;
  --primary-500: #8fcaff; /* cta/text accent */
  --primary-600: #67b6ff; /* focus/border */

  --bg:#ffffff; --bg-soft:#fafafa; --text:#1f2328; --muted:#606b77;
  --border: rgba(0,0,0,0.08);
  --tile:#ffffff; --tile-hover:#f7f8ff;
  --focus: 2px solid var(--primary-600);
  --shadow-soft: 0 6px 26px color-mix(in srgb, var(--primary-600) 14%, transparent);
  --shadow-hover: 0 10px 34px color-mix(in srgb, var(--primary-600) 22%, transparent);
}

html.dark{
  --primary-50:  #0c121b;
  --primary-100: #0f1823;
  --primary-200: #122034;
  --primary-300: #162943;
  --primary-400: #1c3153;
  --primary-500: #7bbdff;
  --primary-600: #4da2ff;

  --bg:#0a0d14;
  --bg-soft:#0e121b;
  --text:#e6ecf5;
  --muted:#9aa5c0;
  --border: rgba(255,255,255,0.06);
  --tile:#111722;
  --tile-hover:#162234;
  --focus: 2px solid var(--primary-600);
  --shadow-soft: 0 4px 18px rgba(0, 128, 255, 0.16);
  --shadow-hover: 0 6px 26px rgba(0, 128, 255, 0.22);
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  transition: background .2s, color .2s;
}
.container{width:min(1100px,92%); margin:0 auto; padding:24px}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible{outline:var(--focus); outline-offset:3px; border-radius:10px}
.skip-link{position:absolute; left:-999px}
.skip-link:focus{left:12px; top:12px; background:#fff; padding:8px 12px; border-radius:8px; border:1px solid var(--border)}

.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 90%, var(--primary-200) 10%);
  border-bottom:1px solid color-mix(in srgb, var(--primary-600) 12%, transparent);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:inline-flex; align-items:center; gap:10px; font-weight:700}
.brand svg{color: var(--primary-600)}
.theme-toggle{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--border);
  background:var(--tile);
  box-shadow: var(--shadow-soft);
  cursor:pointer; transition: all .18s;
}
.theme-toggle:hover{ background: var(--primary-50); box-shadow: var(--shadow-hover) }
#themeIcon {
  color: var(--text);
}

html.dark #themeIcon {
  color: #fff;
}
.welcome-screen{text-align:center; padding:80px 0}
.welcome-screen h1{font-size:clamp(2.3rem,4vw,3.4rem); margin:0 0 12px}
.lead{color:var(--muted); font-size:1.1rem; margin-bottom:40px}

.choice-grid{
  display:grid; grid-template-columns:repeat(2,minmax(260px,1fr));
  gap:22px; max-width:900px; margin:0 auto;
}
.choice-tile{
  background: var(--primary-200);
  border: 1px solid color-mix(in srgb, var(--primary-600) 18%, transparent);
  border-radius:22px; padding:28px;
  display:grid; gap:12px; text-align:left;
  box-shadow: var(--shadow-soft);
  transition: transform .18s, background-color .18s, box-shadow .18s, border-color .18s;
}
.choice-tile:hover{
  transform: translateY(-4px);
  background: var(--primary-300);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--primary-600) 28%, transparent);
}
.choice-tile:active{ transform: translateY(-1px) }

.tile-icon{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background: color-mix(in srgb, var(--primary-50) 70%, #fff 30%);
  border: 1px solid color-mix(in srgb, var(--primary-600) 15%, transparent);
}
html.dark .choice-tile {
  background: var(--primary-200) !important;
}

html.dark .choice-tile:hover {
  background: var(--primary-300) !important;
}

.choice-tile h2{margin:0; font-size:1.25rem; color:var(--text)}
.choice-tile p{margin:0 0 12px; color: color-mix(in srgb, var(--text) 78%, var(--muted) 22%); line-height:1.55}
.tile-cta{font-weight:600; color: color-mix(in srgb, var(--text) 84%, var(--primary-600) 16%)}

/* ==== Footer ==== */
.site-footer{border-top:1px solid var(--border); color:var(--muted); text-align:center; padding:22px 0}

/* ==== Responsive ==== */
@media (max-width:720px){ .choice-grid{ grid-template-columns:1fr } }
@media (prefers-reduced-motion: reduce){ .choice-tile{ transition:none } }

.social-links {
  margin-top: 30px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
}

.social-links a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color .2s ease;
}

.social-links a:hover {
  color: var(--primary-600);
}

.social-divider {
  margin: 0 8px;
  opacity: .6;
}