* { box-sizing: border-box; }
:root {
  --bg: #000000;
  --text: #ffffff;
  --muted: rgba(255,255,255,0.84);
  --soft: rgba(255,255,255,0.66);
  --line: rgba(255,255,255,0.18);
  --glow: rgba(180,220,255,0.34);
  --cardbg: rgba(7, 18, 38, 0.42);
  --cardbd: rgba(255,255,255,0.20);
  --earth-size: clamp(220px, 29vw, 370px);
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body { position: fixed; inset: 0; }
a { color: inherit; text-decoration: none; }
#stars {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none;
}
.page {
  position: relative; z-index: 2; width: min(1180px, 100vw); height: 100svh; margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) clamp(12px, 3vw, 34px) max(10px, env(safe-area-inset-bottom));
  display: grid; grid-template-rows: auto 1fr auto; align-items: center;
}
.hero { text-align: center; align-self: start; }
.hero-name {
  margin: 0;
  display: inline-block; font-size: clamp(2.2rem, 5.4vw, 4.8rem); font-weight: 830; line-height: 0.96;
  letter-spacing: -0.06em; color: #fff; text-shadow: 0 0 16px rgba(255,255,255,0.30), 0 0 38px rgba(166,203,255,0.18);
}
.hero-role { margin: 10px 0 0; font-size: clamp(1rem, 2.2vw, 1.56rem); color: var(--muted); text-shadow: 0 0 12px rgba(255,255,255,0.15); }
.hero-x {
  margin: 12px auto 0; width: fit-content; display: inline-flex; align-items: center; gap: 12px; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 0 24px rgba(255,255,255,0.04);
}
.hero-x img { width: 18px; height: 18px; display: block; }
.hero-x span { color: #fff; font-weight: 720; font-size: clamp(0.92rem, 1.4vw, 1rem); text-shadow: 0 0 10px rgba(255,255,255,0.14); }
.space-card {
  position: relative; width: min(960px, 100%); height: min(64svh, 560px); min-height: 360px; margin: 0 auto; align-self: center;
}
.orbit {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 50%; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); pointer-events: none;
}
.orbit-a { width: min(92%, 860px); height: min(72%, 390px); }
.orbit-b { width: min(78%, 700px); height: min(53%, 286px); transform: translate(-50%, -50%) rotate(14deg); opacity: 0.55; }
.planet-system {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.earth-glow {
  position: absolute; width: calc(var(--earth-size) * 1.55); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(103,165,255,0.34) 0%, rgba(103,165,255,0.14) 28%, rgba(56,94,180,0.06) 44%, transparent 70%);
  filter: blur(12px);
}
.earth {
  position: relative; width: var(--earth-size); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,0.20) 0%, transparent 17%),
    url("/assets/earth-texture-real.png");
  background-size: auto 100%;
  background-position: 0 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 0 36px rgba(117,171,255,0.24), inset -26px -20px 52px rgba(0,0,0,0.68), inset 16px 10px 24px rgba(255,255,255,0.10);
  animation: earthTextureSpin 28s linear infinite;
  transform-style: preserve-3d;
}
.earth::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 18%, rgba(255,255,255,0.18), transparent 26%), radial-gradient(circle at 70% 72%, rgba(0,0,0,0.18), transparent 28%);
  z-index: 6; mix-blend-mode: screen;
}
.earth-rotator { position: absolute; inset: 0; animation: landDrift 18s linear infinite; }
.earth-land {
  position: absolute; background: radial-gradient(circle at 40% 40%, rgba(104,175,92,0.95) 0%, rgba(69,156,90,0.98) 58%, rgba(38,93,45,0.96) 100%);
  filter: saturate(0.95) contrast(1.04) blur(0.2px); opacity: 0.98;
  box-shadow: inset -8px -8px 14px rgba(0,0,0,0.18);
}
.earth-land::after {
  content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 46% 42%, rgba(210,184,113,0.45) 0%, transparent 38%);
  mix-blend-mode: screen; opacity: 0.7;
}
.earth-land-a {
  width: 62%; height: 54%; left: 8%; top: 18%;
  clip-path: polygon(0 30%, 7% 18%, 16% 9%, 28% 6%, 38% 10%, 46% 5%, 56% 8%, 64% 14%, 73% 11%, 83% 18%, 90% 28%, 95% 37%, 91% 48%, 84% 53%, 82% 64%, 74% 70%, 64% 78%, 61% 89%, 55% 100%, 47% 95%, 44% 84%, 37% 78%, 28% 79%, 20% 73%, 17% 60%, 8% 58%, 0 49%, 2% 38%);
}
.earth-land-b {
  width: 48%; height: 37%; right: 2%; bottom: 18%;
  clip-path: polygon(0 38%, 12% 18%, 29% 8%, 43% 2%, 60% 8%, 71% 15%, 80% 26%, 94% 34%, 100% 47%, 89% 64%, 74% 76%, 57% 83%, 38% 87%, 23% 80%, 8% 66%);
}
.earth-cloud {
  position: absolute; background: rgba(255,255,255,0.82); filter: blur(7px); border-radius: 999px; opacity: 0.45; z-index: 4;
  animation: cloudMove 20s linear infinite;
}
.cloud-a { width: 40%; height: 8%; left: 16%; top: 28%; }
.cloud-b { width: 34%; height: 7%; left: 46%; top: 52%; animation-duration: 24s; }
.cloud-c { width: 28%; height: 6%; left: 24%; top: 68%; animation-duration: 22s; }
.earth-specular {
  position: absolute; inset: 0; border-radius: 50%; z-index: 5;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.20), transparent 18%), radial-gradient(circle at 38% 40%, rgba(255,255,255,0.10), transparent 26%);
  mix-blend-mode: screen;
}
.earth-night, .earth-specular { display:none; }
.moon-orbit {
  position: absolute; left: 50%; top: 50%; width: calc(var(--earth-size) * 1.9); height: calc(var(--earth-size) * 1.15);
  transform: translate(-50%, -50%); animation: moonOrbit 30s linear infinite;
}
.moon-glow {
  position: absolute; right: 8%; top: 8%; width: calc(var(--earth-size) * 0.30); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 62%); filter: blur(10px);
}
.moon {
  position: absolute; right: 10%; top: 10%; width: calc(var(--earth-size) * 0.273); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 34% 28%, #dedede 0%, #bbbbbb 42%, #8f8f8f 72%, #6f6f6f 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 18px rgba(255,255,255,0.15), inset -8px -8px 16px rgba(0,0,0,0.35);
}
.moon-rotator { position: absolute; inset: 0; animation: moonSpin 18s linear infinite; }
.crater { position: absolute; display: block; border-radius: 50%; background: rgba(110,110,110,0.42); box-shadow: inset 2px 2px 4px rgba(255,255,255,0.18), inset -2px -2px 4px rgba(0,0,0,0.20); }
.c1 { width: 26%; height: 20%; left: 16%; top: 20%; }
.c2 { width: 20%; height: 16%; left: 48%; top: 34%; }
.c3 { width: 14%; height: 12%; left: 28%; top: 58%; }
.c4 { width: 18%; height: 14%; left: 62%; top: 62%; }
.moon-shadow {
  position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 42%, rgba(0,0,0,0.48) 62%, rgba(0,0,0,0.88) 100%);
}
.nav-card {
  position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; min-width: 150px; padding: 13px 18px;
  border-radius: 18px; border: 1px solid var(--cardbd); background: linear-gradient(145deg, rgba(9,16,32,0.60), rgba(7,18,38,0.36));
  color: #fff; font-size: clamp(0.82rem, 1.5vw, 0.96rem); font-weight: 760; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.09), 0 0 24px rgba(255,255,255,0.03);
  text-shadow: 0 0 8px rgba(255,255,255,0.12); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.nav-card::after { content: "›"; font-size: 1.3em; opacity: 0.82; transform: translateY(-1px); }
.nav-card:hover, .nav-card:focus-visible {
  transform: translateY(-2px) scale(1.02); outline: none; border-color: rgba(255,255,255,0.35); box-shadow: 0 14px 36px rgba(0,0,0,0.34), 0 0 28px rgba(255,255,255,0.08);
}
.nav-icon {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); font-size: 0.95rem;
}
.li-icon { width: 22px; height: 22px; display: block; }
.about { left: 2%; top: 16%; transform: rotate(-5deg); }
.carbon { right: 2%; top: 16%; border-color: rgba(163,255,198,0.28); }
.linkedin { right: 4%; bottom: 24%; transform: rotate(-4deg); }
.email { left: 50%; bottom: 4%; transform: translateX(-50%); width: min(430px, 70vw); }
.footer {
  align-self: end; justify-self: center; display: flex; gap: 0.35rem; align-items: center; justify-content: center; flex-wrap: wrap;
  color: var(--soft); font-size: clamp(0.78rem, 1.45vw, 0.92rem); text-align: center; text-shadow: 0 0 8px rgba(255,255,255,0.12);
}
.footer a { color: #fff; font-weight: 800; }
.modal-layer { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 18px; }
.modal-layer.is-open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal {
  position: relative; width: min(92vw, 620px); max-height: min(78svh, 560px); overflow-y: auto; overflow-x: hidden; padding: clamp(22px, 4vw, 34px);
  border-radius: 28px; border: 1px solid rgba(255,255,255,0.16); background: linear-gradient(155deg, rgba(6,10,20,0.95), rgba(7,18,38,0.92));
  box-shadow: 0 24px 90px rgba(0,0,0,0.64), inset 0 1px 0 rgba(255,255,255,0.10); color: #fff;
}
.modal-close {
  position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); color: #fff; font-size: 1.6rem; cursor: pointer;
}
.modal-kicker { margin: 0 0 10px; color: rgba(255,255,255,0.72); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.modal-kicker:empty { display: none; }
.modal h2 { margin: 0 42px 14px 0; font-size: clamp(1.35rem, 3.1vw, 2rem); line-height: 1.1; letter-spacing: -0.035em; }
.modal-body { color: rgba(255,255,255,0.86); font-size: clamp(0.96rem, 1.9vw, 1.05rem); line-height: 1.6; overflow-wrap: break-word; }
.modal-body p { margin: 0 0 14px; }
.modal-body a { color: #fff; font-weight: 800; border-bottom: 1px solid rgba(255,255,255,0.28); }
.project-list { display: grid; gap: 10px; margin-top: 10px; min-width: 0; }
.project { display:block; min-width: 0; max-width: 100%; overflow: hidden; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); }
.project-clima { padding-bottom: 18px; }
.project strong { display:block; margin-bottom: 4px; }
.project-heading { display:flex; flex-wrap:nowrap; align-items:baseline; gap: 6px; max-width: 100%; min-width: 0; overflow: hidden; margin-bottom: 4px; font-size: clamp(0.78rem, 1.4vw, 0.9rem); line-height: 1.25; white-space: nowrap; }
.project-heading > a:first-child { min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-heading strong { display:inline; margin-bottom: 0; }
.project-heading .project-cta { flex: 0 0 auto; margin-top: 0; font-size: 0.9em; white-space: nowrap; }
.project-card-entry .project-heading { font-size: clamp(0.68rem, 1.12vw, 0.78rem); }
.project-separator { flex: 0 0 auto; color: rgba(255,255,255,0.48); font-weight: 800; }
.project-official { display:grid; gap: 5px; margin-top: 14px; padding-top: 10px; padding-bottom: 4px; line-height: 1.32; font-size: clamp(0.7rem, 1.13vw, 0.78rem); }
.project-official span { display:block; }
.meteor {
  position: fixed; z-index: 1; width: 150px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.75)); opacity: 0; transform: rotate(-28deg);
}
.m1 { top: 16%; left: 12%; animation: meteor1 8s ease-in-out infinite; }
.m2 { top: 28%; right: 10%; animation: meteor2 12s ease-in-out 2.4s infinite; }
.m3 { bottom: 26%; left: 68%; width: 100px; animation: meteor3 13s ease-in-out 5s infinite; }
@keyframes meteor1 { 0%,84%,100%{opacity:0;transform:translate3d(0,0,0) rotate(-28deg);} 88%{opacity:1;} 94%{opacity:0;transform:translate3d(320px,-140px,0) rotate(-28deg);} }
@keyframes meteor2 { 0%,80%,100%{opacity:0;transform:translate3d(0,0,0) rotate(-28deg);} 86%{opacity:1;} 93%{opacity:0;transform:translate3d(-290px,120px,0) rotate(-28deg);} }
@keyframes meteor3 { 0%,82%,100%{opacity:0;transform:translate3d(0,0,0) rotate(-28deg);} 88%{opacity:1;} 95%{opacity:0;transform:translate3d(-220px,90px,0) rotate(-28deg);} }
@keyframes earthSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes landDrift { from { transform: translateX(-2%) rotate(0.001deg); } 50% { transform: translateX(3%); } to { transform: translateX(-2%) rotate(0.001deg); } }
@keyframes cloudMove { from { transform: translateX(-3%); } 50% { transform: translateX(5%); } to { transform: translateX(-3%); } }
@keyframes moonOrbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes moonSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 780px) {
  :root { --earth-size: clamp(168px, 48vw, 250px); }
  .page { padding-left: 10px; padding-right: 10px; }
  .hero-x { margin-top: 10px; gap: 10px; padding: 6px 12px; }
  .hero-x img { width: 16px; height: 16px; }
  .space-card { height: min(66svh, 560px); min-height: 400px; }
  .orbit-a { width: 98%; height: 54%; }
  .orbit-b { width: 85%; height: 42%; }
  .nav-card { min-width: auto; min-height: 44px; padding: 10px 12px; border-radius: 15px; font-size: 0.77rem; gap: 8px; }
  .nav-icon { width: 24px; height: 24px; font-size: 0.85rem; }
  .li-icon { width: 19px; height: 19px; }
  .about { left: 1%; top: 11%; }
  .carbon { right: 1%; top: 11%; max-width: 148px; }
  .linkedin { right: 2%; bottom: 23%; }
  .email { width: min(92vw, 360px); bottom: 3%; }
  .moon-orbit { width: calc(var(--earth-size) * 2.2); height: calc(var(--earth-size) * 1.4); }
}
@media (max-width: 420px), (max-height: 660px) {
  .hero-name { font-size: clamp(1.9rem, 8vw, 2.35rem); }
  .hero-role { font-size: 0.92rem; }
  .hero-x span { font-size: 0.84rem; }
  .space-card { min-height: 360px; }
  .nav-card { padding: 8px 10px; min-height: 40px; font-size: 0.7rem; }
  .nav-icon { display:none; }
  .li-icon { display:none; }
  .carbon { max-width: 126px; }
  .email { width: 94vw; }
}
@media (prefers-reduced-motion: reduce) {
  .earth, .earth-rotator, .earth-cloud, .moon-orbit, .moon-rotator, .meteor { animation: none; }
  .nav-card { transition: none; }
}

.earth-rotator { display: none; }
.earth::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,0.16), transparent 18%),
    linear-gradient(90deg, rgba(0,0,0,0.04) 0%, transparent 35%, rgba(0,0,0,0.58) 74%, rgba(0,0,0,0.86) 100%);
  z-index: 8;
}
@keyframes earthTextureSpin {
  from { background-position: 0 50%; }
  to { background-position: -1600px 50%; }
}
.moon {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.32), transparent 20%),
    url("/assets/moon-texture-real.png");
  background-size: auto 100%;
  background-position: 0 50%;
  animation: moonTextureSpin 32s linear infinite;
}
.moon-rotator { display: none; }
@keyframes moonTextureSpin {
  from { background-position: 0 50%; }
  to { background-position: -900px 50%; }
}
.planet-system {
  pointer-events: none;
  z-index: 1;
}
.nav-card {
  z-index: 9;
  pointer-events: auto;
}
.nav-svg {
  width: 24px;
  height: 24px;
  display: block;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.22));
}
.experiences { left: 2%; bottom: 24%; transform: rotate(4deg); }
.project span { display:block; }
.project-cta {
  display: inline-block;
  margin-top: 8px;
  color: #fff;
  font-weight: 850;
  border-bottom: 1px solid rgba(255,255,255,0.34);
}
@media (max-width: 780px) {
  .experiences { left: 1%; bottom: 23%; }
}
@media (max-width: 420px), (max-height: 660px) {
  .nav-svg { display:none; }
}

.modal h2:empty { display:none; }
.nav-card { position:absolute; overflow:hidden; padding-right: 42px; }
.nav-card::after { position:absolute; right:16px; top:50%; transform:translateY(-54%); }
.email { width: min(430px, 70vw); display:flex; justify-content:center; align-items:center; gap: 10px; }
.email .nav-icon { flex: 0 0 auto; margin-right: 0; }
.email span:last-child { flex: 0 0 auto; }
.nav-card .nav-svg, .nav-card .nav-icon, .nav-card span { position:relative; z-index:1; }
.sustainability { right: 2%; top: 16%; border-color: rgba(163,255,198,0.28); }
.earth::before { display:none; }
.earth::after {
  content:""; position:absolute; inset:0; border-radius:50%; z-index:9;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.18), transparent 16%),
    radial-gradient(circle at 40% 42%, rgba(255,255,255,0.08), transparent 26%),
    linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.02) 28%, rgba(0,0,0,0.10) 44%, rgba(0,0,0,0.44) 62%, rgba(0,0,0,0.86) 82%, rgba(0,0,0,0.96) 100%);
}
.earth-clouds {
  position:absolute; inset:0; border-radius:50%; z-index:8; pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 30%, rgba(255,255,255,0.08), transparent 22%),
    radial-gradient(ellipse at 36% 52%, rgba(255,255,255,0.10), transparent 16%),
    radial-gradient(ellipse at 58% 34%, rgba(255,255,255,0.08), transparent 20%),
    radial-gradient(ellipse at 69% 61%, rgba(255,255,255,0.09), transparent 17%),
    radial-gradient(ellipse at 28% 70%, rgba(255,255,255,0.06), transparent 16%);
  filter: blur(4px);
}
.moon { box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 18px rgba(255,255,255,0.15), inset -9px -10px 18px rgba(0,0,0,0.38); }
.moon-shadow {
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,0.15), transparent 18%),
    linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 34%, rgba(0,0,0,0.38) 58%, rgba(0,0,0,0.82) 82%, rgba(0,0,0,0.96) 100%);
}
@media (max-width: 780px) {
  .email { width: min(92vw, 360px); }
  .sustainability { right: 1%; top: 11%; max-width: 148px; }
}
@media (max-width: 420px), (max-height: 660px) {
  .email { width: 94vw; }
  .sustainability { max-width: 126px; }
}

.hero-kicker {
  margin-top: 2px;
  margin-bottom: 8px;
  font-size: clamp(0.82rem, 1.55vw, 1rem);
  font-weight: 700;
  color: rgba(255,255,255,0.74);
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(255,255,255,0.10);
}
.sun-glow {
  position:absolute;
  left: 50%;
  top: 50%;
  width: min(780px, 82vw);
  height: min(520px, 58vh);
  transform: translate(-38%, -64%);
  pointer-events:none;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,238,180,0.23) 0%, rgba(255,221,120,0.10) 16%, rgba(255,210,120,0.05) 28%, transparent 58%);
  filter: blur(10px);
  z-index: 0;
}
.sustainability {
  border-color: rgba(255,255,255,0.20) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.09), 0 0 28px rgba(120,255,180,0.10);
}
.sustainability .nav-svg, .sustainability span { color:#fff; }
.sustainability:hover, .sustainability:focus-visible {
  border-color: rgba(255,255,255,0.34) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.34), 0 0 34px rgba(120,255,180,0.16);
}
.email {
  width: min(430px, 70vw);
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  justify-items:center;
  padding-left: 16px;
  padding-right: 16px;
}
.email-inner {
  grid-column: 2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}
.email-spacer {
  grid-column: 1;
  justify-self:start;
  width: 18px;
  height: 18px;
  opacity: 0;
}
.email::after { right: 16px; }
.email .nav-icon { margin:0; }
.earth {
  animation: earthTextureSpin 16s linear infinite, earthWobble 9s ease-in-out infinite;
  transform: rotate(-23.5deg);
  transform-origin: center center;
}
@keyframes earthWobble {
  0%,100% { transform: rotate(-23.5deg) translateY(0px) scale(1); }
  50% { transform: rotate(-23.5deg) translateY(-1px) scale(1.008); }
}
.earth::after {
  background:
    radial-gradient(circle at 21% 18%, rgba(255,252,230,0.28), transparent 10%),
    radial-gradient(circle at 33% 31%, rgba(255,255,255,0.10), transparent 22%),
    linear-gradient(110deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 18%, rgba(0,0,0,0.03) 38%, rgba(0,0,0,0.22) 56%, rgba(0,0,0,0.60) 74%, rgba(0,0,0,0.92) 100%);
}
.moon-orbit {
  animation: moonOrbit 30s linear infinite;
}
.moon {
  animation: moonTextureSpin 16s linear infinite, moonWobble 9s ease-in-out infinite;
}
@keyframes moonWobble {
  0%,100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(0deg) scale(1.01); }
}
.moon-shadow {
  background:
    radial-gradient(circle at 22% 22%, rgba(255,255,255,0.20), transparent 16%),
    linear-gradient(110deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 18%, rgba(0,0,0,0.12) 40%, rgba(0,0,0,0.46) 60%, rgba(0,0,0,0.84) 82%, rgba(0,0,0,0.96) 100%);
}
@media (max-width:780px){
  .email { width: min(92vw, 360px); }
}
@media (max-width:420px), (max-height:660px){
  .email { width: 94vw; }
}

/* v8 overrides */
.hero { padding-top: 6px; }
.hero-kicker { display:none !important; }
.space-card { height: min(62svh, 540px); }
.sun-glow {
  left: 0;
  top: 0;
  width: min(420px, 42vw);
  height: min(320px, 34vh);
  transform: translate(2%, 4%);
  background: radial-gradient(circle at 0% 0%, rgba(255,236,164,0.24) 0%, rgba(255,214,102,0.12) 20%, rgba(255,210,120,0.06) 34%, transparent 62%);
  filter: blur(14px);
}
.footer {
  align-self: end;
  justify-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
}
.footer-line1, .footer-line2, .footer-line3 { color: var(--soft); font-size: clamp(0.78rem, 1.45vw, 0.92rem); text-shadow: 0 0 8px rgba(255,255,255,0.12); }
.footer-name { color:#fff; font-weight:800; font-size: clamp(0.82rem, 1.55vw, 0.96rem); }
.linkedin-top { right: 2%; top: 16%; transform: rotate(-2deg); }
.sustainability-bottom { left: 50%; bottom: 4%; transform: translateX(-50%); width: min(430px, 70vw); }
.email-right { right: 4%; bottom: 24%; left: auto; transform: rotate(-4deg); width: auto; min-width: 160px; display: inline-flex; justify-content: center; align-items: center; padding-left: 18px; padding-right: 44px; }
.email-right .email-spacer { display:none; }
.email-right .email-inner { display:inline-flex; }
.linkedin { right: auto; bottom: auto; }
.email { left: auto; }
.sustainability { right: auto; top: auto; border-color: rgba(255,255,255,0.20) !important; box-shadow: 0 10px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.09), 0 0 28px rgba(120,255,180,0.10); }
.sustainability:hover, .sustainability:focus-visible { border-color: rgba(255,255,255,0.34) !important; box-shadow: 0 14px 36px rgba(0,0,0,0.34), 0 0 34px rgba(120,255,180,0.16); }
.earth {
  animation: earthTextureSpin 72s linear infinite;
  transform: rotate(-23.5deg) scale(1.01);
}
@keyframes earthTextureSpin { from { background-position: 0 50%; } to { background-position: -1600px 50%; } }
.earth-clouds {
  animation: earthCloudSpin 88s linear infinite;
  opacity: 0.9;
}
@keyframes earthCloudSpin { from { transform: translateX(0%); } to { transform: translateX(-18%); } }
.earth::after {
  background:
    radial-gradient(circle at 18% 16%, rgba(255,252,230,0.30), transparent 10%),
    radial-gradient(circle at 31% 28%, rgba(255,255,255,0.10), transparent 20%),
    linear-gradient(118deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 14%, rgba(0,0,0,0.03) 34%, rgba(0,0,0,0.18) 52%, rgba(0,0,0,0.54) 70%, rgba(0,0,0,0.92) 100%);
}
.moon-orbit { animation: moonOrbit 66s linear infinite; }
.moon {
  animation: moonTextureSpin 118s linear infinite;
}
@keyframes moonTextureSpin { from { background-position: 0 50%; } to { background-position: -900px 50%; } }
.moon-shadow {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 15%),
    linear-gradient(118deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 18%, rgba(0,0,0,0.14) 38%, rgba(0,0,0,0.44) 58%, rgba(0,0,0,0.84) 82%, rgba(0,0,0,0.97) 100%);
}
@media (max-width: 780px) {
  .linkedin-top { right: 1%; top: 11%; }
  .email-right { right: 2%; bottom: 23%; }
  .sustainability-bottom { width: min(92vw, 360px); bottom: 3%; }
}
@media (max-width: 420px), (max-height: 660px) {
  .sustainability-bottom { width: 94vw; }
}

/* v9 overrides */
.sun-glow {
  left: 0 !important;
  top: 0 !important;
  width: min(380px, 38vw) !important;
  height: min(280px, 30vh) !important;
  transform: translate(0%, 0%) !important;
  background: radial-gradient(circle at 0% 0%, rgba(255,236,164,0.26) 0%, rgba(255,214,102,0.14) 18%, rgba(255,210,120,0.07) 34%, transparent 64%) !important;
  filter: blur(14px) !important;
}
.footer {
  align-self: end;
  justify-self: center;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.18rem !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.25 !important;
}
.footer-line1, .footer-line2, .footer-line3 { color: var(--soft); font-size: clamp(0.78rem, 1.45vw, 0.92rem); text-shadow: 0 0 8px rgba(255,255,255,0.12); }
.footer-line2 { display: flex; flex-wrap: wrap; gap: 0.28rem; justify-content: center; }
.footer-line3 { display: flex; flex-wrap: wrap; gap: 0.28rem; justify-content: center; align-items: center; }
.footer-name { color:#fff; font-weight:800; }
.linkedin-top { right: 2% !important; top: 16% !important; bottom: auto !important; left: auto !important; transform: rotate(-2deg) !important; }
.sustainability-right { right: 4% !important; top: 50% !important; left: auto !important; bottom: auto !important; transform: translateY(-50%) rotate(-2deg) !important; width: auto !important; min-width: 190px; }
.email-right { right: 4% !important; bottom: 24% !important; left: auto !important; top: auto !important; transform: rotate(-4deg) !important; width: auto !important; min-width: 160px !important; display: inline-flex !important; justify-content: center !important; align-items: center !important; padding-left: 18px !important; padding-right: 44px !important; }
.email-right .email-spacer { display:none !important; }
.email-right .email-inner { display:inline-flex !important; }
.earth, .moon {
  background: none !important;
  animation: none !important;
  transform: none !important;
}
.planet-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  z-index: 2;
}
.earth-clouds, .earth-rotator, .earth-specular, .earth-night, .moon-rotator, .moon-shadow { display:none !important; }
.earth::before, .earth::after { display:none !important; }
.moon::before, .moon::after { display:none !important; }
.moon-orbit { animation: moonOrbit 84s linear infinite !important; }
@keyframes moonOrbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (max-width: 780px) {
  .linkedin-top { right: 1% !important; top: 11% !important; }
  .sustainability-right { right: 2% !important; top: 50% !important; }
  .email-right { right: 2% !important; bottom: 23% !important; }
}

/* v10 scene refinements */
.sun-glow {
  left: 0 !important;
  top: 0 !important;
  width: min(300px, 30vw) !important;
  height: min(240px, 24vw) !important;
  transform: translate(-4%, -4%) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,245,198,0.30) 0%, rgba(255,220,128,0.16) 18%, rgba(255,196,64,0.08) 34%, rgba(255,196,64,0.03) 48%, transparent 66%) !important;
  filter: blur(18px) !important;
  z-index: 0 !important;
}
.planet-system { z-index: 1; }
.earth-glow {
  background: radial-gradient(circle, rgba(84,140,255,0.20) 0%, rgba(84,140,255,0.08) 36%, rgba(56,94,180,0.03) 54%, transparent 72%) !important;
  filter: blur(10px) !important;
}
.moon-glow {
  background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 66%) !important;
  filter: blur(8px) !important;
}
.earth, .moon {
  background: none !important;
  animation: none !important;
  transform: none !important;
  overflow: hidden !important;
}
.planet-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  z-index: 4;
}
.earth-clouds, .earth-rotator, .earth-specular, .earth-night, .moon-rotator, .moon-shadow { display:none !important; }
.earth::before, .earth::after, .moon::before, .moon::after { display:none !important; }
.moon-orbit {
  animation: moonOrbit 176s linear infinite !important;
}
@keyframes moonOrbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* v11 scene polish */
.sun-glow {
  width: min(280px, 28vw) !important;
  height: min(220px, 22vw) !important;
  transform: translate(-5%, -6%) !important;
  background: radial-gradient(circle at 0% 0%, rgba(255,245,198,0.28) 0%, rgba(255,220,128,0.15) 16%, rgba(255,196,64,0.07) 30%, rgba(255,196,64,0.02) 44%, transparent 66%) !important;
}
.earth-glow { opacity: 0.88; }
.moon-glow { opacity: 0.82; }

/* v13 visibility + sun corner refinements */
.sun-glow {
  right: -4vw !important;
  top: -4vh !important;
  left: auto !important;
  width: min(760px, 46vw) !important;
  height: min(620px, 48vh) !important;
  transform: none !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,248,208,0.34) 0%, rgba(255,223,132,0.20) 14%, rgba(255,196,64,0.10) 28%, rgba(255,196,64,0.045) 42%, transparent 68%) !important;
  filter: blur(28px) !important;
  opacity: 1 !important;
}
.earth-glow {
  background: radial-gradient(circle, rgba(84,140,255,0.24) 0%, rgba(84,140,255,0.10) 38%, rgba(56,94,180,0.04) 58%, transparent 74%) !important;
  filter: blur(12px) !important;
  opacity: 0.96 !important;
}
.moon-glow {
  background: radial-gradient(circle, rgba(255,255,255,0.22), rgba(255,255,255,0.06) 40%, transparent 70%) !important;
  filter: blur(10px) !important;
  opacity: 0.9 !important;
}
.moon-orbit {
  animation: moonOrbit 192s linear infinite !important;
}


/* v14 viewport-corner solar glow fix */
.sun-glow {
  position: fixed !important;
  right: -10vw !important;
  top: -12vh !important;
  left: auto !important;
  bottom: auto !important;
  width: min(1100px, 62vw) !important;
  height: min(980px, 78vh) !important;
  pointer-events: none !important;
  transform: none !important;
  z-index: 0 !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,250,222,0.42) 0%, rgba(255,230,150,0.24) 12%, rgba(255,206,88,0.13) 24%, rgba(255,190,64,0.08) 36%, rgba(255,184,56,0.035) 48%, transparent 72%) !important;
  filter: blur(36px) !important;
}
@media (max-width: 900px) {
  .sun-glow {
    right: -16vw !important;
    top: -12vh !important;
    width: 86vw !important;
    height: 58vh !important;
  }
}


/* v15 remove card icons for PC/mobile consistency */
.nav-svg,
.li-icon,
.nav-icon,
.email-spacer { display: none !important; }

.nav-card {
  gap: 0 !important;
}

.linkedin-top,
.sustainability-right,
.email-right,
.about,
.experiences {
  justify-content: center !important;
}

.email-inner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

.email-right {
  min-width: 150px !important;
}


/* v16 Earth-Moon-Sun refinement */
.sun-glow {
  position: fixed !important;
  right: -12vw !important;
  top: -16vh !important;
  left: auto !important;
  bottom: auto !important;
  width: min(1280px, 74vw) !important;
  height: min(1180px, 90vh) !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,252,232,0.50) 0%, rgba(255,234,170,0.28) 10%, rgba(255,210,112,0.16) 21%, rgba(255,194,72,0.09) 33%, rgba(255,184,56,0.045) 46%, transparent 74%) !important;
  filter: blur(40px) !important;
}
.planet-system {
  pointer-events: none !important;
  z-index: 1 !important;
}
.earth-glow {
  width: calc(var(--earth-size) * 1.72) !important;
  background: radial-gradient(circle, rgba(84,140,255,0.28) 0%, rgba(84,140,255,0.12) 34%, rgba(56,94,180,0.05) 52%, transparent 74%) !important;
  filter: blur(14px) !important;
  opacity: 0.96 !important;
  z-index: 1 !important;
}
.earth {
  z-index: 3 !important;
}
.moon-orbit {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  transform: none !important;
  animation: none !important;
  z-index: 4 !important;
}
.moon,
.moon-glow {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
}
.moon {
  width: calc(var(--earth-size) * 0.225) !important;
  aspect-ratio: 1 !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 22px rgba(255,255,255,0.14), inset -10px -10px 20px rgba(0,0,0,0.40) !important;
  z-index: 2 !important;
}
.moon-glow {
  width: calc(var(--earth-size) * 0.34) !important;
  aspect-ratio: 1 !important;
  background: radial-gradient(circle, rgba(255,255,255,0.18), rgba(255,255,255,0.07) 42%, transparent 72%) !important;
  filter: blur(12px) !important;
  opacity: 0.88 !important;
  z-index: 1 !important;
}
@media (max-width: 900px) {
  .sun-glow {
    right: -22vw !important;
    top: -12vh !important;
    width: 96vw !important;
    height: 62vh !important;
  }
}


/* v17 fine realism pass */
.sun-glow {
  right: -14vw !important;
  top: -18vh !important;
  width: min(1380px, 78vw) !important;
  height: min(1260px, 96vh) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,252,236,0.54) 0%, rgba(255,236,176,0.30) 9%, rgba(255,214,120,0.17) 20%, rgba(255,194,72,0.095) 32%, rgba(255,182,52,0.050) 46%, transparent 75%) !important;
  filter: blur(42px) !important;
}
.earth-glow {
  width: calc(var(--earth-size) * 1.78) !important;
  background: radial-gradient(circle, rgba(84,140,255,0.30) 0%, rgba(84,140,255,0.13) 34%, rgba(56,94,180,0.05) 54%, transparent 76%) !important;
  filter: blur(16px) !important;
}
.moon {
  width: calc(var(--earth-size) * 0.215) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.09), 0 0 18px rgba(255,255,255,0.12), inset -11px -11px 22px rgba(0,0,0,0.42) !important;
}
.moon-glow {
  width: calc(var(--earth-size) * 0.30) !important;
  background: radial-gradient(circle, rgba(255,255,255,0.14), rgba(255,255,255,0.05) 42%, transparent 72%) !important;
  filter: blur(10px) !important;
}
@media (max-width: 900px) {
  .sun-glow {
    right: -24vw !important;
    top: -14vh !important;
    width: 102vw !important;
    height: 66vh !important;
  }
}


/* v18 share metadata + final solar corner polish */
.sun-glow {
  right: -16vw !important;
  top: -20vh !important;
  width: min(1440px, 82vw) !important;
  height: min(1320px, 100vh) !important;
  background: radial-gradient(circle at 100% 0%, rgba(255,252,236,0.56) 0%, rgba(255,236,176,0.31) 9%, rgba(255,214,120,0.175) 20%, rgba(255,194,72,0.098) 32%, rgba(255,182,52,0.052) 46%, transparent 76%) !important;
}


/* v19 orbit visibility polish */
.moon,
.moon-glow {
  transition: opacity 0.45s ease;
}

/* v20 fail-safe Moon placement + cleaner visual orbit */
.moon,
.moon-glow {
  left: 50% !important;
  top: 50% !important;
}

.moon {
  transform: translate(calc(-50% - (var(--earth-size) * 0.78)), calc(-50% + (var(--earth-size) * 0.30))) !important;
}

.moon-glow {
  transform: translate(calc(-50% - (var(--earth-size) * 0.78)), calc(-50% + (var(--earth-size) * 0.30))) !important;
}

/* The JS will override these transforms once running. This prevents the Moon appearing in the center of Earth during load/cache states. */


/* v22 card spacing refinement for desktop + mobile */
.nav-card {
  z-index: 6 !important;
}

.about {
  left: 0.6% !important;
  top: 16.5% !important;
  transform: rotate(-4deg) !important;
}

.experiences {
  left: 0.6% !important;
  bottom: 19% !important;
  transform: rotate(3deg) !important;
}

.linkedin-top {
  right: 0.8% !important;
  top: 13% !important;
  transform: rotate(-2deg) !important;
}

.sustainability-right {
  right: 0.8% !important;
  top: 42% !important;
  transform: rotate(-1deg) !important;
}

.email-right {
  right: 1.1% !important;
  bottom: 19% !important;
  transform: rotate(-3deg) !important;
}

/* keep the right side visually open and avoid overlap with the Moon */
.linkedin-top,
.sustainability-right,
.email-right {
  min-width: 170px !important;
}

@media (max-width: 1100px) {
  .about {
    left: 0.5% !important;
    top: 15% !important;
  }

  .experiences {
    left: 0.5% !important;
    bottom: 18% !important;
  }

  .linkedin-top {
    right: 0.5% !important;
    top: 11% !important;
  }

  .sustainability-right {
    right: 0.8% !important;
    top: 40% !important;
  }

  .email-right {
    right: 0.8% !important;
    bottom: 18% !important;
  }
}

@media (max-width: 780px) {
  .about {
    left: 1% !important;
    top: 12% !important;
  }

  .experiences {
    left: 1% !important;
    bottom: 16% !important;
  }

  .linkedin-top {
    right: 1% !important;
    top: 10% !important;
  }

  .sustainability-right {
    right: 1% !important;
    top: 38% !important;
  }

  .email-right {
    right: 1% !important;
    bottom: 16% !important;
  }

  .linkedin-top,
  .sustainability-right,
  .email-right,
  .about,
  .experiences {
    min-width: 146px !important;
    padding-left: 16px !important;
    padding-right: 38px !important;
  }
}

@media (max-width: 420px), (max-height: 660px) {
  .about {
    left: 1.5% !important;
    top: 11.5% !important;
  }

  .experiences {
    left: 1.5% !important;
    bottom: 15% !important;
  }

  .linkedin-top {
    right: 1.5% !important;
    top: 9.5% !important;
  }

  .sustainability-right {
    right: 1.5% !important;
    top: 36% !important;
  }

  .email-right {
    right: 1.5% !important;
    bottom: 15% !important;
  }

  .linkedin-top,
  .sustainability-right,
  .email-right,
  .about,
  .experiences {
    min-width: 138px !important;
    min-height: 48px !important;
    font-size: 0.86rem !important;
  }
}


/* v23 layout + time-of-day luminosity */
#stars { opacity: var(--stars-opacity, 1); transition: opacity 280ms ease, filter 280ms ease; }
body { transition: background 320ms ease, color 280ms ease; }
.page, .hero-name, .hero-role, .hero-x, .nav-card, .footer, .sun-glow, .earth-glow {
  transition: filter 280ms ease, box-shadow 280ms ease, text-shadow 280ms ease, opacity 280ms ease, background 320ms ease;
}

html[data-time="day"] {
  --stars-opacity: 0.78;
  --muted: rgba(255,255,255,0.92);
  --soft: rgba(255,255,255,0.76);
}
html[data-time="day"] body {
  background:
    radial-gradient(1200px 720px at 88% 6%, rgba(255,180,58,0.10), transparent 42%),
    radial-gradient(900px 620px at 18% 18%, rgba(72,130,255,0.06), transparent 44%),
    linear-gradient(180deg, #02060d 0%, #01050b 38%, #000000 100%);
}
html[data-time="day"] .hero-name { text-shadow: 0 0 18px rgba(255,255,255,0.34), 0 0 42px rgba(166,203,255,0.24); }
html[data-time="day"] .hero-role { text-shadow: 0 0 14px rgba(255,255,255,0.18); }
html[data-time="day"] .sun-glow { opacity: 1 !important; filter: blur(36px) !important; }
html[data-time="day"] .earth-glow { opacity: 1 !important; }
html[data-time="day"] .nav-card { box-shadow: 0 12px 36px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.11), 0 0 26px rgba(255,255,255,0.05); }

html[data-time="evening"] {
  --stars-opacity: 0.9;
  --muted: rgba(255,255,255,0.88);
  --soft: rgba(255,255,255,0.72);
}
html[data-time="evening"] body {
  background:
    radial-gradient(1200px 740px at 90% 7%, rgba(255,160,42,0.12), transparent 44%),
    linear-gradient(180deg, #01040a 0%, #000205 48%, #000000 100%);
}
html[data-time="evening"] .sun-glow { opacity: 1 !important; }

html[data-time="night"] {
  --stars-opacity: 1;
}
html[data-time="night"] body {
  background:
    radial-gradient(1100px 680px at 90% 8%, rgba(255,150,32,0.08), transparent 42%),
    linear-gradient(180deg, #000000 0%, #000000 100%);
}
html[data-time="night"] .sun-glow { opacity: 0.92 !important; }

/* desktop refinements */
.experiences {
  left: 0.4% !important;
  bottom: 12.2% !important;
  transform: rotate(3deg) !important;
}
.linkedin-top {
  right: 0.8% !important;
  top: 13.5% !important;
}
.sustainability-right {
  right: 1.1% !important;
  top: 43% !important;
}
.email-right {
  right: 1.2% !important;
  bottom: 18.2% !important;
}

/* tablet/mobile refinements */
@media (max-width: 780px) {
  .about {
    left: 1.5% !important;
    top: 22.2% !important;
  }
  .linkedin-top {
    right: 1.5% !important;
    top: 22.2% !important;
  }
  .sustainability-right {
    left: 50% !important;
    right: auto !important;
    top: 31.8% !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    min-width: 176px !important;
  }
  .experiences {
    left: 1.5% !important;
    bottom: 17.2% !important;
  }
  .email-right {
    right: 1.5% !important;
    bottom: 17.2% !important;
  }
}

@media (max-width: 420px), (max-height: 660px) {
  .about {
    top: 22% !important;
  }
  .linkedin-top {
    top: 22% !important;
  }
  .sustainability-right {
    top: 31.2% !important;
    min-width: 166px !important;
  }
  .experiences {
    bottom: 16.2% !important;
  }
  .email-right {
    bottom: 16.2% !important;
  }
}


/* v26 mobile position fix for Sostenibilidad */
@media (max-width: 780px) {
  .sustainability-right {
    left: 50% !important;
    right: auto !important;
    top: 18.8% !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    min-width: 178px !important;
    z-index: 7 !important;
  }
}

@media (max-width: 420px), (max-height: 660px) {
  .sustainability-right {
    left: 50% !important;
    right: auto !important;
    top: 18.6% !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    min-width: 168px !important;
    z-index: 7 !important;
  }
}


/* v27 mobile sustainability position refinement */
@media (max-width: 780px) {
  .sustainability-right {
    left: 50% !important;
    right: auto !important;
    top: 14.6% !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    min-width: 178px !important;
    z-index: 7 !important;
  }
}

@media (max-width: 420px), (max-height: 660px) {
  .sustainability-right {
    left: 50% !important;
    right: auto !important;
    top: 14.2% !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    min-width: 168px !important;
    z-index: 7 !important;
  }
}


/* v28 mobile sustainability lifted clearly between X and upper side cards */
@media (max-width: 780px) {
  .sustainability-right {
    left: 50% !important;
    right: auto !important;
    top: 8.4% !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    min-width: 178px !important;
    z-index: 8 !important;
  }
}

@media (max-width: 420px), (max-height: 660px) {
  .sustainability-right {
    left: 50% !important;
    right: auto !important;
    top: 8.1% !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    min-width: 168px !important;
    z-index: 8 !important;
  }
}


/* v29 mobile fine tune: lift upper cards to clear the Earth */
@media (max-width: 780px) {
  .about {
    top: 19.4% !important;
  }
  .linkedin-top {
    top: 19.4% !important;
  }
  .sustainability-right {
    left: 50% !important;
    right: auto !important;
    top: 6.8% !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    z-index: 8 !important;
  }
}

@media (max-width: 420px), (max-height: 660px) {
  .about {
    top: 19.1% !important;
  }
  .linkedin-top {
    top: 19.1% !important;
  }
  .sustainability-right {
    left: 50% !important;
    right: auto !important;
    top: 6.4% !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    z-index: 8 !important;
  }
}


/* v30 mobile layout: open cards outside the orbital line and lift Sustainability */
@media (max-width: 780px) {
  .about {
    left: -1.0% !important;
    top: 17.2% !important;
  }
  .linkedin-top {
    right: -1.0% !important;
    top: 17.2% !important;
  }
  .sustainability-right {
    left: 50% !important;
    right: auto !important;
    top: 4.8% !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    z-index: 9 !important;
  }
  .experiences {
    left: -0.8% !important;
    bottom: 13.4% !important;
  }
  .email-right {
    right: -0.8% !important;
    bottom: 13.4% !important;
  }
}

@media (max-width: 420px), (max-height: 660px) {
  .about {
    left: -1.6% !important;
    top: 16.8% !important;
  }
  .linkedin-top {
    right: -1.6% !important;
    top: 16.8% !important;
  }
  .sustainability-right {
    left: 50% !important;
    right: auto !important;
    top: 4.2% !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    z-index: 9 !important;
  }
  .experiences {
    left: -1.2% !important;
    bottom: 12.8% !important;
  }
  .email-right {
    right: -1.2% !important;
    bottom: 12.8% !important;
  }
}


/* v31 stronger mobile repositioning: upper cards higher, all cards further outside orbit */
@media (max-width: 780px) {
  .about {
    left: -2.4% !important;
    top: 14.8% !important;
  }
  .linkedin-top {
    right: -2.4% !important;
    top: 14.8% !important;
  }
  .sustainability-right {
    left: 50% !important;
    right: auto !important;
    top: 1.8% !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    z-index: 10 !important;
  }
  .experiences {
    left: -2.2% !important;
    bottom: 10.8% !important;
  }
  .email-right {
    right: -2.2% !important;
    bottom: 10.8% !important;
  }
}

@media (max-width: 420px), (max-height: 660px) {
  .about {
    left: -3.0% !important;
    top: 14.4% !important;
  }
  .linkedin-top {
    right: -3.0% !important;
    top: 14.4% !important;
  }
  .sustainability-right {
    left: 50% !important;
    right: auto !important;
    top: 1.2% !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    z-index: 10 !important;
  }
  .experiences {
    left: -2.6% !important;
    bottom: 10.0% !important;
  }
  .email-right {
    right: -2.6% !important;
    bottom: 10.0% !important;
  }
}


/* v32 mobile-only correction: upper cards clearly outside orbit, sustainability well above them */
@media (max-width: 780px) {
  .about {
    left: -5.2% !important;
    top: 12.2% !important;
    z-index: 9 !important;
  }
  .linkedin-top {
    right: -5.2% !important;
    top: 12.2% !important;
    z-index: 9 !important;
  }
  .sustainability-right {
    left: 50% !important;
    right: auto !important;
    top: -1.2% !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    z-index: 10 !important;
    min-width: 186px !important;
  }
}

@media (max-width: 420px), (max-height: 660px) {
  .about {
    left: -5.8% !important;
    top: 11.8% !important;
    z-index: 9 !important;
  }
  .linkedin-top {
    right: -5.8% !important;
    top: 11.8% !important;
    z-index: 9 !important;
  }
  .sustainability-right {
    left: 50% !important;
    right: auto !important;
    top: -1.8% !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    z-index: 10 !important;
    min-width: 176px !important;
  }
}


/* v33 mobile card size refinement: slightly smaller so side cards do not clip */
@media (max-width: 780px) {
  .about,
  .linkedin-top,
  .sustainability-right,
  .experiences,
  .email-right {
    min-width: 162px !important;
    min-height: 48px !important;
    padding-left: 15px !important;
    padding-right: 36px !important;
    font-size: 0.82rem !important;
    border-radius: 20px !important;
  }

  .about { left: -3.8% !important; }
  .linkedin-top { right: -3.8% !important; }
  .experiences { left: -1.2% !important; }
  .email-right { right: -1.2% !important; }
}

@media (max-width: 420px), (max-height: 660px) {
  .about,
  .linkedin-top,
  .sustainability-right,
  .experiences,
  .email-right {
    min-width: 154px !important;
    min-height: 46px !important;
    padding-left: 14px !important;
    padding-right: 34px !important;
    font-size: 0.79rem !important;
    border-radius: 19px !important;
  }

  .about { left: -2.8% !important; }
  .linkedin-top { right: -2.8% !important; }
  .experiences { left: -0.8% !important; }
  .email-right { right: -0.8% !important; }
}


/* v38 installable card action */
.bottom-actions {
  align-self: end;
  justify-self: center;
  width: min(100%, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.install-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  margin: 0 auto 2px;
}
.save-card-button {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045));
  color: #fff;
  min-height: 42px;
  padding: 10px 20px;
  font: inherit;
  font-size: clamp(0.82rem, 1.45vw, 0.94rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-shadow: 0 0 9px rgba(255,255,255,0.16);
  box-shadow: 0 10px 28px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.13), 0 0 22px rgba(160,205,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.save-card-button:hover,
.save-card-button:focus-visible {
  transform: translateY(-1px);
  outline: none;
  border-color: rgba(255,255,255,0.38);
  background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.065));
  box-shadow: 0 12px 34px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.15), 0 0 28px rgba(160,205,255,0.12);
}
.save-card-note {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: clamp(0.74rem, 1.35vw, 0.86rem);
  line-height: 1.25;
  text-shadow: 0 0 8px rgba(255,255,255,0.10);
}
.save-card-hint {
  max-width: min(92vw, 420px);
  margin: 3px 0 0;
  color: rgba(255,255,255,0.74);
  font-size: clamp(0.72rem, 1.25vw, 0.82rem);
  line-height: 1.3;
}
.is-standalone .install-card {
  display: none;
}
@media (max-width: 780px) {
  .bottom-actions {
    gap: 9px;
  }
  .save-card-button {
    min-height: 39px;
    padding: 9px 18px;
  }
}
@media (max-width: 420px), (max-height: 660px) {
  .bottom-actions {
    gap: 7px;
  }
  .install-card {
    gap: 3px;
  }
  .save-card-button {
    min-height: 36px;
    padding: 8px 16px;
    font-size: 0.8rem;
  }
  .save-card-note {
    font-size: 0.72rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .save-card-button {
    transition: none;
  }
  .save-card-button:hover,
  .save-card-button:focus-visible {
    transform: none;
  }
}


/* v39 footer centering correction */
.bottom-actions {
  grid-column: 1 / -1 !important;
  align-self: end !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding-inline: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.install-card {
  width: 100% !important;
  max-width: min(100%, 560px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.footer {
  width: 100% !important;
  max-width: min(100%, 560px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
  justify-self: center !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.footer-line1,
.footer-line2,
.footer-line3 {
  width: 100% !important;
  text-align: center !important;
}
.footer-line2 {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
}


/* v40 share card action */
.install-card {
  gap: 6px !important;
}
.share-card-button {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045));
  color: #fff;
  min-height: 42px;
  padding: 10px 20px;
  margin-top: 11px;
  font: inherit;
  font-size: clamp(0.82rem, 1.45vw, 0.94rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-shadow: 0 0 9px rgba(255,255,255,0.16);
  box-shadow: 0 10px 28px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.13), 0 0 22px rgba(160,205,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.share-card-button:hover,
.share-card-button:focus-visible {
  transform: translateY(-1px);
  outline: none;
  border-color: rgba(255,255,255,0.38);
  background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.065));
  box-shadow: 0 12px 34px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.15), 0 0 28px rgba(160,205,255,0.12);
}
.share-card-hint {
  max-width: min(92vw, 420px);
  margin: 2px 0 0;
  color: rgba(255,255,255,0.74);
  font-size: clamp(0.72rem, 1.25vw, 0.82rem);
  line-height: 1.3;
}
.is-standalone .install-card {
  display: flex !important;
}
.is-standalone #installButton,
.is-standalone .save-card-note {
  display: none !important;
}
@media (max-width: 420px), (max-height: 660px) {
  .share-card-button {
    min-height: 36px;
    padding: 8px 16px;
    margin-top: 9px;
    font-size: 0.8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .share-card-button {
    transition: none;
  }
  .share-card-button:hover,
  .share-card-button:focus-visible {
    transform: none;
  }
}


/* v41 installed-app action visibility */
.is-standalone #installButton,
.is-standalone .save-card-note,
.is-standalone #installHint {
  display: none !important;
}
.is-standalone .share-card-button {
  margin-top: 0 !important;
}

/* v42 mobile action/footer compaction + sustainability clearance */
@media (max-width: 780px) {
  .page {
    padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
  }

  .space-card {
    height: min(58svh, 500px) !important;
    min-height: 360px !important;
  }

  .sustainability-right {
    top: 2.6% !important;
  }

  .about,
  .linkedin-top {
    top: 14.0% !important;
  }

  .bottom-actions {
    gap: 6px !important;
  }

  .install-card {
    width: auto !important;
    max-width: min(96vw, 430px) !important;
    display: grid !important;
    grid-template-columns: max-content max-content !important;
    column-gap: 8px !important;
    row-gap: 3px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: left !important;
    margin-bottom: 0 !important;
  }

  .save-card-button,
  .share-card-button {
    min-height: 34px !important;
    padding: 7px 13px !important;
    margin: 0 !important;
    font-size: 0.76rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .save-card-button {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .share-card-button {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .save-card-note {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    text-align: left !important;
    margin: 0 0 0 2px !important;
    font-size: 0.64rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .save-card-hint,
  .share-card-hint {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    text-align: center !important;
    max-width: 92vw !important;
    margin: 1px 0 0 !important;
    font-size: 0.64rem !important;
    line-height: 1.18 !important;
  }

  .footer {
    gap: 0.08rem !important;
    line-height: 1.14 !important;
  }

  .footer-line1,
  .footer-line2,
  .footer-line3 {
    font-size: clamp(0.68rem, 2.55vw, 0.78rem) !important;
    line-height: 1.14 !important;
  }

  .footer-name {
    font-size: clamp(0.70rem, 2.65vw, 0.80rem) !important;
  }

  .is-standalone .install-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  .space-card {
    height: min(57svh, 470px) !important;
    min-height: 350px !important;
  }

  .sustainability-right {
    top: 2.2% !important;
  }

  .about,
  .linkedin-top {
    top: 13.8% !important;
  }

  .install-card {
    column-gap: 7px !important;
  }

  .save-card-button,
  .share-card-button {
    min-height: 32px !important;
    padding: 7px 11px !important;
    font-size: 0.72rem !important;
  }

  .save-card-note {
    font-size: 0.61rem !important;
  }
}

/* v43 mobile refinement: restore centered vertical actions, compact buttons, and lift Sustainability */
@media (max-width: 780px) {
  .sustainability-right {
    top: -3.6% !important;
  }

  .install-card {
    width: 100% !important;
    max-width: min(96vw, 430px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px !important;
    margin-bottom: 0 !important;
  }

  .save-card-button,
  .share-card-button {
    min-height: 32px !important;
    padding: 6px 15px !important;
    margin: 0 !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .save-card-note {
    margin: 0 0 4px !important;
    font-size: 0.63rem !important;
    line-height: 1.12 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .share-card-button {
    margin-top: 2px !important;
  }

  .save-card-hint,
  .share-card-hint {
    max-width: 92vw !important;
    margin: 1px 0 0 !important;
    font-size: 0.63rem !important;
    line-height: 1.16 !important;
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  .sustainability-right {
    top: -4.4% !important;
  }

  .save-card-button,
  .share-card-button {
    min-height: 31px !important;
    padding: 6px 14px !important;
    font-size: 0.70rem !important;
  }

  .save-card-note {
    margin-bottom: 3px !important;
    font-size: 0.61rem !important;
  }
}


/* v45 real-time earth/moon and night lights */
.moon-orbit {
  animation: none !important;
}
.planet-canvas {
  image-rendering: auto;
}
/* v45 moon positioning is driven by real-time JS, not CSS animation */
.moon,
.moon-glow {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
}


/* v47: remove decorative fixed sun glow; Earth illumination is calculated in JS from real date/time. */
.sun-glow {
  display: none !important;
  opacity: 0 !important;
}

html[data-time="day"] body,
html[data-time="evening"] body,
html[data-time="night"] body {
  background:
    radial-gradient(900px 620px at 50% 38%, rgba(72,130,255,0.045), transparent 50%),
    linear-gradient(180deg, #00030a 0%, #000000 52%, #000000 100%) !important;
}

.earth::before {
  display: none !important;
}

.earth {
  background: #000 !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 0 34px rgba(117,171,255,0.20) !important;
}

.earth-glow {
  background: radial-gradient(circle, rgba(84,140,255,0.22) 0%, rgba(84,140,255,0.09) 34%, rgba(56,94,180,0.035) 54%, transparent 76%) !important;
}


/* v48: prevent black first frame while planet textures and real-time light are initializing */
.earth,
.moon,
.earth-glow,
.moon-glow {
  transition: opacity 420ms ease;
}

body:not(.planets-ready) .earth,
body:not(.planets-ready) .moon,
body:not(.planets-ready) .earth-glow,
body:not(.planets-ready) .moon-glow {
  opacity: 0 !important;
}


/* v51: Moon keeps its own phase, with subtle minimum visibility so it never reads as a black disk. */

@media (max-width: 430px) {
  .modal {
    width: calc(100vw - 24px);
    max-height: min(82svh, 620px);
    padding: 18px 14px;
  }

  .project {
    padding: 12px 12px 14px;
  }

  .project-heading {
    display: block;
    font-size: 0.82rem;
    line-height: 1.32;
    white-space: normal;
    overflow: visible;
  }

  .project-heading > a:first-child {
    display: inline;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .project-heading strong {
    display: inline;
  }

  .project-separator {
    display: inline;
    margin: 0 4px;
  }

  .project-heading .project-cta {
    display: inline;
    white-space: nowrap;
    font-size: 0.92em;
  }

  .project-card-entry .project-heading {
    font-size: 0.72rem;
  }

  .project-official {
    font-size: 0.68rem;
    gap: 6px;
    margin-top: 16px;
    padding-top: 12px;
    padding-bottom: 8px;
    line-height: 1.42;
  }
}

/* v60 footer location and name emphasis */
.footer-line1,
.footer-line2,
.footer-line3 {
  font-weight: 400 !important;
}
.footer-line3 {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.28rem !important;
}
.footer-name {
  font-weight: 800 !important;
}


/* v63 static footer touch guard */
.footer,
.footer * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-user-drag: none !important;
  cursor: default !important;
  pointer-events: none !important;
}