/* Vista aurora / glass and crystal. The XP and lake previews are independent. */
:root { --muted: #305b71; --focus: #092e64; }
body { position: relative; display: flow-root; min-height: 100vh; background: #062d3f; }
body::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1180px;
  background: linear-gradient(180deg, #062d3f00 55%, #062d3f 100%),
    url("./assets/vista-aurora.webp") center top / cover no-repeat;
}
.page-shell { position: relative; margin-top: 25px; }
.site-header {
  min-height: 80px;
  padding: 12px 22px;
  border: 1px solid #c4f4fff0;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(#38768a 0%, #23566e 48%, #123e54 49%, #245a6b 100%);
  box-shadow: inset 0 2px 0 #ffffffb3, inset 0 -1px 0 #91d9e275,
    0 0 0 1px #001e39, 0 7px 25px #001c3a66;
}
.wordmark { text-shadow: 0 1px 3px #00364d; }
.wordmark-dot { color: #beed91; }
.site-header .wordmark:focus-visible { outline-color: #fff; }
.site-header nav a:focus-visible { outline-color: #fff; }
.brand-mark { width: 47px; height: 47px; box-shadow: inset 0 2px 3px #fff, inset 0 -4px 6px #0051828c, 0 2px 0 #1e597c, 0 4px 7px #1e597c40; }
.site-header nav { gap: 12px; }
.site-header nav a,
.site-header nav .nav-home {
  min-height: 42px;
  padding: 8px 20px;
  border: 1px solid #064a7a;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(#e3fcff 0%, #7dcced 6%, #2782b3 23%, #0e6599 48%, #004b7f 49%, #0875a2 81%, #68ddf0 100%);
  box-shadow: inset 0 1px 0 #fff, inset 1px 0 2px #c0ffffb3, inset -1px -1px 2px #00345f99,
    0 2px 0 #164c6a, 0 3px 6px #16547e40;
  text-shadow: 0 1px 1px #002c4e;
  transition: box-shadow 180ms, transform 180ms;
}
.site-header nav a:hover {
  background: linear-gradient(#fff 0%, #b2e9ff 6%, #328bb9 23%, #10699c 48%, #00517f 49%, #087aaa 81%, #9ff4ff 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 5px #b8faff99, 0 2px 0 #164c6a, 0 0 12px #bcfaffb3;
  transform: translateY(-1px);
}
.site-header nav a:active { transform: translateY(1px); box-shadow: inset 0 2px 6px #003b65a8, 0 1px 0 #fff; }
.hero {
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  min-height: 575px;
  padding: 22px 0;
  margin-top: 16px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero-copy {
  padding: 34px 42px 35px;
  border: 1px solid #efffffee;
  border-radius: 24px;
  background: linear-gradient(120deg, #f8fdff, #e0f1f4);
  box-shadow: inset 0 2px 1px #fff, inset 0 -1px 0 #77b6cb,
    0 0 0 6px #c9f4ff29, 0 0 0 7px #e0ffff7a, 0 16px 40px #001c3c66;
}
h1 { font-size: clamp(76px, 7.2vw, 100px); margin-top: 22px; }
.name { color: #0a709d; }
.title-dot { color: #34743d; }
.hero-subtitle { margin-top: 19px; }
.hero-description { font-size: 14px; }
.explore-link {
  min-height: 57px;
  gap: 30px;
  margin-top: 23px;
  padding: 8px 10px 8px 25px;
  border: 1px solid #1b652d;
  border-radius: 31px;
  background: radial-gradient(ellipse at 50% 130%, #c8ff8e70 0%, transparent 50%),
    linear-gradient(#f0ffe0 0%, #a6de7a 7%, #438c37 25%, #206a2a 48%, #0e4f1c 49%, #246f28 81%, #b5f181 100%);
  box-shadow: inset 0 1px 0 #fff, inset 2px 0 3px #deffbfa6, inset -2px -2px 3px #13451580,
    0 3px 0 #225c2f, 0 5px 0 #ffffff8c, 0 8px 13px #17452d38;
  color: #fff;
  font-size: 14px;
  text-shadow: 0 1px 2px #153e16;
}
.explore-link::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 11px;
  right: 11px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(#ffffffba, #ffffff00);
  pointer-events: none;
}
.explore-link > span {
  width: 36px;
  height: 36px;
  border: 1px solid #dcffbecc;
  background: radial-gradient(ellipse at 50% 0, #c5ffa680, transparent 50%), linear-gradient(#448c38, #124d22 55%, #5ea447);
  box-shadow: inset 0 1px 2px #efffcb, inset 0 -2px 3px #113d20, 0 1px 0 #124b21;
  font-size: 22px;
}
.explore-link:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, inset 0 0 7px #e6ffb9a8, 0 4px 0 #225c2f, 0 7px 15px #17452d4d, 0 0 14px #c7ffb078; }
.explore-link:active { transform: translateY(2px); box-shadow: inset 0 2px 7px #133e1a8c, 0 1px 0 #fff; }
.aero-art { max-width: 435px; margin: 0 auto; }
.aero-art::before {
  content: ""; position: absolute; inset: 22% -1%; z-index: -1;
  border: 1px solid #b9fff5a6; border-radius: 50%; transform: rotate(-28deg);
  background: linear-gradient(135deg, #b0ffdf14, transparent 50%);
  box-shadow: 0 0 16px #8eefff30, inset 0 1px 2px #fff6;
}
.orb-halo {
  bottom: 4%; height: 14%; border: 0;
  background: radial-gradient(ellipse, #8df9ee70, #6deed922 45%, transparent 70%);
}

.glass-orb {
  border-color: #ffffffed;
  background: radial-gradient(ellipse at 46% 78%, #c4ffd3b8, transparent 45%), radial-gradient(circle at 37% 28%, #e6ffff75 5%, #83e3ed4d 34%, #0c8fb987 69%, #9affee 95%);
  box-shadow: inset 11px 7px 14px #ffffffc4, inset -13px -12px 24px #005c978c, inset 2px -7px 6px #e8ffff, 13px 27px 35px #001e3e60, 0 0 65px #61f4df36;
}
.orb-shine { background: linear-gradient(#fff, #ffffff66 55%, #ffffff00); }
.green-orb { box-shadow: inset 0 -5px 8px #1c67468c, 3px 9px 13px #163c3f4d; }
.art-caption {
  left: 50%; right: auto; bottom: -3%; transform: translateX(-50%);
  width: max-content; padding: 5px 13px; border: 1px solid #ffffffdb; border-radius: 14px;
  background: #073c50e8; box-shadow: inset 0 1px 0 #ffffff45, 0 2px 5px #00203680; color: #e2fbff;
}
.space-section { padding-top: 12px; }
.section-heading {
  padding: 15px 24px;
  border: 1px solid #c9ffffe6;
  border-radius: 13px;
  background: linear-gradient(#f4fdff, #d7eeef);
  box-shadow: inset 0 2px 0 #fff, inset 0 -1px 0 #fafff9, 0 0 0 1px #ffffffb3, 0 5px 16px #16431a2b;
}
.space-card {
  padding: 20px 25px 0;
  border: 1px solid #367899;
  border-radius: 20px;
  background: linear-gradient(130deg, #f6fdff, #d0eaf5);
  box-shadow: inset 0 2px 0 #fff, inset 0 0 0 1px #f0ffffe6, 0 0 0 1px #ffffff9c, 0 7px 17px #073a5745;
}
.tasks-card { border-color: #4d7b3b; background: linear-gradient(130deg, #f8fff2, #daedc2); }
.space-card::before { top: 2px; height: 9px; border-radius: 50%; background: linear-gradient(#fff, #ffffff00); }
.space-card:hover { transform: translateY(-3px); box-shadow: inset 0 2px 0 #fff, inset 0 0 0 1px #f0ffffe6, 0 0 0 1px #ffffffd9, 0 10px 20px #083b5b59, 0 0 14px #c7efff59; }
.space-card:active { transform: translateY(1px); box-shadow: inset 0 2px 7px #194c596b, 0 2px 6px #12452c42; }
.space-card:focus-visible { outline: 3px solid #fff; outline-offset: 5px; box-shadow: 0 0 0 10px #063246, 0 0 28px #67eaff80; }
.card-content { padding: 25px 0 28px; }
.card-icon { border-width: 2px; box-shadow: inset 0 2px 1px #fff, inset 0 -5px 5px #003e7399, 0 2px 0 #155783, 0 6px 7px #14598047; }
.math-icon { background: linear-gradient(#a0ecff 0%, #399bd3 48%, #00578e 49%, #058ab8 89%, #83eff6 100%); }
.tasks-icon { background: linear-gradient(#e5ffc6 0%, #86c54c 48%, #3b8527 49%, #67a93b 89%, #c0f78b 100%); box-shadow: inset 0 2px 1px #fff, inset 0 -5px 5px #265e3499, 0 2px 0 #407135, 0 6px 7px #306a3547; }
.card-icon::after { height: 33%; background: linear-gradient(#fff, #ffffff26); }
.card-bottom {
  min-height: 58px;
  padding: 9px 19px 11px 25px;
  margin: auto -25px 0;
  border-top: 1px solid #176a91;
  border-radius: 0 0 19px 19px;
  background: linear-gradient(#c2f2ff 0%, #52b3d8 8%, #127198 27%, #096083 48%, #00486d 49%, #086b8c 80%, #6ed3df 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 1px #00486b80;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 1px #003c58;
}
.tasks-card .card-bottom {
  border-color: #38732c;
  background: linear-gradient(#edffd0 0%, #aad879 8%, #528435 27%, #3a6e2a 48%, #214f1c 49%, #3d702c 80%, #abd678 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 1px #284f2080;
  text-shadow: 0 1px 1px #29401d;
}
.card-arrow { flex-basis: 35px; width: 35px; height: 35px; border-color: #cef6ff; background: radial-gradient(ellipse at 50% 0, #dcffffc2, transparent 45%), linear-gradient(#379bc0, #075375 55%, #48bcd0); box-shadow: inset 0 1px 1px #fff, inset 0 -2px 3px #00477599, 0 1px 2px #003c5880; color: #fff; font-size: 22px; }
.tasks-card .card-arrow { border-color: #edffd0; background: radial-gradient(ellipse at 50% 0, #f0ffd2b3, transparent 45%), linear-gradient(#7eab4a, #385f28 55%, #85b354); box-shadow: inset 0 1px 1px #fff, inset 0 -2px 3px #31562999, 0 1px 2px #2f4d2580; }
.site-footer { min-height: 76px; margin: 23px 0 26px; padding: 18px 24px; border: 1px solid #ffffffe0; border-radius: 14px; background: #ebf6f6f2; box-shadow: inset 0 1px 0 #fff, 0 3px 12px #21471926; }

/* Decorative bubbles use only composited transforms and opacity. */
.bubble-field { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bubble {
  --size: 84px; --left: 6%; --duration: 30s; --delay: -9s; --drift: 45px;
  position: absolute; top: 0; left: var(--left); width: var(--size); height: var(--size);
  border: 1px solid #d5ffffb8; border-radius: 50%;
  background: radial-gradient(ellipse at 27% 18%, #ffffffb8 0%, #f1ffff54 5%, transparent 22%),
    radial-gradient(ellipse at 75% 82%, #96ffb84f, transparent 32%),
    radial-gradient(circle at 48% 48%, transparent 48%, #b1efff0d 66%, #b3faff5c 85%, #e5ffffa8 100%);
  box-shadow: inset 2px 2px 5px #ffffff5c, inset -3px -4px 6px #67e6ff26, 0 0 12px #63f5dd12;
  transform: translate3d(0, 70vh, 0);
}
.bubble::before {
  content: ""; position: absolute; top: 9%; left: 15%; width: 58%; height: 25%;
  border-top: 2px solid #ffffffbf; border-radius: 50%; transform: rotate(-31deg);
}
.bubble::after {
  content: ""; position: absolute; bottom: 9%; right: 18%; width: 39%; height: 19%;
  border-bottom: 1px solid #d5fffaa6; border-radius: 50%; transform: rotate(-29deg);
}
.bubble:nth-child(2) { --size: 43px; --left: 19%; --duration: 24s; --delay: -18s; --drift: -32px; }
.bubble:nth-child(3) { --size: 117px; --left: 31%; --duration: 37s; --delay: -5s; --drift: 65px; }
.bubble:nth-child(4) { --size: 58px; --left: 45%; --duration: 27s; --delay: -21s; --drift: -54px; }
.bubble:nth-child(5) { --size: 95px; --left: 58%; --duration: 32s; --delay: -13s; --drift: 40px; }
.bubble:nth-child(6) { --size: 36px; --left: 68%; --duration: 23s; --delay: -6s; --drift: 55px; }
.bubble:nth-child(7) { --size: 126px; --left: 80%; --duration: 39s; --delay: -27s; --drift: -45px; }
.bubble:nth-child(8) { --size: 64px; --left: 93%; --duration: 28s; --delay: -17s; --drift: -70px; }
.bubble:nth-child(9) { --size: 30px; --left: 3%; --duration: 21s; --delay: -3s; --drift: 42px; }
.bubble:nth-child(10) { --size: 52px; --left: 53%; --duration: 26s; --delay: -24s; --drift: -35px; }
.bubble:nth-child(11) { --size: 78px; --left: 74%; --duration: 34s; --delay: -2s; --drift: 55px; }
.bubble:nth-child(12) { --size: 40px; --left: 88%; --duration: 25s; --delay: -11s; --drift: -60px; }
@keyframes bubble-rise {
  0% { transform: translate3d(0, 110vh, 0); opacity: 0; }
  8% { opacity: .8; }
  85% { opacity: .8; }
  100% { transform: translate3d(var(--drift), -180px, 0); opacity: 0; }
}
.motion-control { display: none; }
/* Animate only where the CSS pause switch is supported. */
@supports selector(body:has(input:checked)) {
  .bubble { animation: bubble-rise var(--duration) var(--delay) linear infinite; }
  body:has(#pause-bubbles:checked) .bubble { animation-play-state: paused; }
  .motion-control { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 9px; border: 1px solid #78aaba; border-radius: 18px; background: linear-gradient(#fff, #d7ebee); box-shadow: inset 0 1px 0 #fff, 0 1px 2px #164e6033; cursor: pointer; font-size: 11px; white-space: nowrap; }
  .motion-control input { accent-color: #126d88; width: 14px; height: 14px; margin: 0; }
  .motion-control:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .site-header { background: linear-gradient(#b9ecff42 0%, #7cb6d538 48%, #032f4875 49%, #7dd9d542 100%); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  .hero-copy { background: linear-gradient(120deg, #f8fdfff5, #e5f6f3eb); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .section-heading { background: linear-gradient(#f4fdfff0, #d7eeefed); }
  .space-card { background: linear-gradient(130deg, #f6fdfff0, #d0eaf5ed); }
  .tasks-card { background: linear-gradient(130deg, #f8fff2f0, #daedc2ed); }
}
@media (max-width: 1000px) {
  .aero-art::before { inset: 25% 8%; }
  .hero { gap: 26px; min-height: 555px; }
  .hero-copy { padding: 31px 30px 32px; }
  h1 { font-size: 85px; }
  .hero-description { font-size: 13px; }
  .space-card { padding: 20px 21px 0; }
  .card-bottom { margin-left: -21px; margin-right: -21px; padding-left: 21px; padding-right: 16px; }
}
@media (max-width: 700px) {
  body::before { height: 1500px; background-position: 58% top; }
  .bubble:nth-child(n+8) { display: none; }
  .bubble { max-width: 85px; max-height: 85px; }
  .page-shell { margin-top: 16px; }
  .site-header { min-height: 72px; padding: 10px 12px; gap: 9px; }
  .brand-mark { width: 36px; height: 36px; font-size: 26px; }
  .wordmark { font-size: 20px; }
  .site-header nav { gap: 7px; }
  .site-header nav a, .site-header nav .nav-home { min-height: 36px; padding: 7px 11px; font-size: 11px; }
  .hero { gap: 16px; min-height: 0; margin-top: 18px; padding: 0 0 20px; }
  .hero-copy { padding: 29px 27px 33px; border-radius: 22px; }
  h1 { font-size: 84px; }
  .hero-subtitle { margin-top: 21px; }
  .hero-description { font-size: 13px; }
  .explore-link { min-height: 54px; padding-left: 22px; gap: 30px; font-size: 13px; }
  .aero-art { width: 89%; max-width: 315px; margin: 0 auto 10px; }
  .art-caption { bottom: -3%; font-size: 8px; letter-spacing: 1.8px; }
  .section-heading { padding: 16px 20px; }
  .space-card { padding: 21px 23px 0; }
  .card-bottom { margin-left: -23px; margin-right: -23px; padding-left: 23px; padding-right: 18px; font-size: 12px; }
  .site-footer { padding: 18px 17px; min-height: 0; margin-top: 20px; }
  .motion-control { order: 4; }
}
@media (max-width: 360px) {
  .page-shell { margin-top: 13px; }
  .site-header { padding: 10px; gap: 6px; }
  .brand-mark { width: 30px; height: 30px; font-size: 22px; }
  .wordmark { font-size: 17px; gap: 6px; }
  .site-header nav { gap: 5px; }
  .site-header nav a, .site-header nav .nav-home { padding: 6px 8px; font-size: 10px; }
  .hero-copy { padding: 29px 22px 33px; }
  h1 { font-size: 76px; }
  .hero-description { font-size: 12px; }
  .explore-link { gap: 24px; }
  .space-card { padding: 20px 18px 0; }
  .card-bottom { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .bubble-field, .motion-control { display: none; }
  .site-header nav a:hover, .site-header nav a:active,
  .explore-link:hover, .explore-link:active,
  .space-card:hover, .space-card:active,
  .space-card:hover .card-arrow { transform: none; }
}
@media print {
  body { background: #fff; }
  .bubble-field, .motion-control { display: none; }
  .site-header { color: var(--ink); }
  .page-shell { margin: 0; }
  .hero { min-height: 0; padding: 20px 0; }
  .hero-copy, .site-header, .section-heading, .space-card, .tasks-card, .site-footer { background: #fff; box-shadow: none; border: 1px solid #bccbd0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero-copy { padding: 25px; }
  h1 { font-size: 60px; }
  .card-bottom, .tasks-card .card-bottom { background: #fff; color: var(--ink); box-shadow: none; text-shadow: none; }
}