:root {
  color-scheme: light dark;
  font-family: Inter, "SF Pro Display", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f7f5f1;
  color: #242321;
  font-synthesis: none;
  --page: #f7f5f1;
  --ink: #242321;
  --muted: #777570;
  --quiet: #8c8b87;
  --orbit: rgba(121, 139, 157, .14);
  --surface: rgba(255, 255, 255, .42);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 320px; min-height: 100%; }

body { overflow-x: hidden; background: var(--page); }

a { color: inherit; text-decoration: none; }

.universe {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 48%, rgba(246, 214, 154, .14), transparent 23%),
    linear-gradient(135deg, #faf9f6 0%, var(--page) 58%, #f9f8f5 100%);
  transition: color .35s ease, background-color .35s ease;
}

.masthead, footer {
  position: absolute;
  z-index: 20;
  left: clamp(22px, 3vw, 52px);
  right: clamp(22px, 3vw, 52px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.masthead { top: clamp(22px, 3vw, 42px); }
.masthead a { font-size: 15px; font-weight: 560; letter-spacing: -.01em; }
footer { bottom: clamp(20px, 3vw, 38px); font-size: 12px; }
footer { color: var(--quiet); }
.legal { display: grid; justify-items: end; gap: 4px; text-align: right; }
.legal a { transition: color .3s ease; }
.legal a:hover { color: var(--ink); }
.legal a:focus-visible { outline: 1px solid #718597; outline-offset: 3px; }

.theme-switcher { display: flex; align-items: center; gap: 7px; }
.theme-switcher button {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  padding: 0;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  font: inherit;
  font-size: 17px;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.theme-switcher button:hover { background: var(--surface); color: var(--ink); }
.theme-switcher button:focus-visible { outline: 1px solid #718597; outline-offset: 3px; }
html[data-theme-preference="light"] [data-set-theme="light"],
html[data-theme-preference="dark"] [data-set-theme="dark"],
html[data-theme-preference="system"] [data-set-theme="system"] { border-color: rgba(105, 119, 131, .45); color: var(--ink); }

.system { position: absolute; inset: 5vh 2vw 4vh; }

.orbit {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 48%;
  translate: -50% -50%;
  border: 1px solid var(--orbit);
  border-radius: 50%;
  pointer-events: none;
  mask-image: linear-gradient(100deg, transparent 2%, #000 18%, #000 83%, transparent 99%);
}

.orbit-1 { width: 39vw; height: 25vh; }
.orbit-2 { width: 58vw; height: 42vh; }
.orbit-3 { width: 76vw; height: 61vh; }
.orbit-4 { width: 94vw; height: 80vh; }

.sun {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 48%;
  width: min(440px, 84vw);
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  text-align: center;
}

.sun-halo {
  position: absolute;
  top: -82px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 203, 121, .22), rgba(245, 203, 121, .07) 42%, transparent 70%);
  filter: blur(10px);
  animation: breathe 10s ease-in-out infinite;
  pointer-events: none;
}

.sun img {
  position: relative;
  width: clamp(122px, 11vw, 168px);
  height: clamp(122px, 11vw, 168px);
  border-radius: 50%;
  border: 7px solid rgba(255, 255, 255, .88);
  box-shadow: 0 13px 42px rgba(98, 80, 50, .13);
  object-fit: cover;
}

.sun h1 { margin: 14px 0 8px; font-size: clamp(32px, 3vw, 44px); font-weight: 400; letter-spacing: -.035em; }
.sun p { margin: 0; color: var(--muted); font-size: clamp(13px, 1.15vw, 15px); }
.primary-link { margin-top: 18px; padding: 8px 12px; font-size: 14px; color: var(--ink); border-radius: 999px; }
.primary-link:hover { background: rgba(120, 112, 99, .07); }

.planet-node {
  position: absolute;
  z-index: 8;
  display: grid;
  justify-items: center;
  min-width: 148px;
  padding: 10px;
  text-align: center;
  border-radius: 24px;
  animation: float 18s ease-in-out var(--delay) infinite alternate;
}

a.planet-node { cursor: pointer; }
a.planet-node:hover .planet { scale: 1.06; filter: saturate(1.05); box-shadow: 0 18px 42px rgba(64, 62, 57, .13); }
a.planet-node:focus-visible { outline: 1px solid #6e7f8e; outline-offset: 5px; }
.planet-node strong { margin-top: 9px; font-size: 16px; font-weight: 500; }
.planet-node small { margin-top: 4px; color: var(--quiet); font-size: 11px; }
.dormant { opacity: .72; }

.planet {
  position: relative;
  display: block;
  width: var(--size, 74px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: visible;
  transition: scale .45s ease, filter .45s ease, box-shadow .45s ease;
  box-shadow: inset -15px -8px 22px rgba(70, 67, 60, .08), 0 12px 34px rgba(70, 67, 60, .08);
}

.planet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  opacity: .42;
  background: repeating-linear-gradient(168deg, transparent 0 10px, rgba(255,255,255,.45) 11px 15px, transparent 16px 24px);
  filter: blur(2px);
}

.tone-sand { background: radial-gradient(circle at 34% 27%, #fffaf1 0 9%, transparent 30%), linear-gradient(145deg, #eee7dc, #d9ccbb); }
.tone-teal { background: radial-gradient(circle at 30% 25%, #e4f1ef, transparent 38%), linear-gradient(145deg, #b8d7d3, #78aeb0); }
.tone-violet { background: radial-gradient(circle at 31% 25%, #ece9fb, transparent 38%), linear-gradient(145deg, #d9d2f0, #aaa1d4); }
.tone-blue { background: radial-gradient(circle at 31% 25%, #e4f3fa, transparent 38%), linear-gradient(145deg, #b8dcec, #75afd0); }
.tone-rose { background: radial-gradient(circle at 31% 25%, #fff0ee, transparent 38%), linear-gradient(145deg, #edc9c6, #d99b9c); }

.has-ring::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 42% -23%;
  border: 7px solid rgba(126, 158, 176, .24);
  border-left-color: rgba(255,255,255,.55);
  border-radius: 50%;
  transform: rotate(-13deg);
}

.blog { left: 27%; top: 13%; --size: 76px; }
.gitea { left: 9%; top: 38%; --size: 82px; }
.photos { left: 20%; top: 64%; --size: 66px; }
.music { right: 21%; top: 69%; --size: 68px; }
.notes { right: 25%; top: 15%; --size: 70px; }

.star { position: absolute; z-index: 2; width: 4px; height: 4px; border-radius: 50%; background: #9dbed1; opacity: .55; animation: drift 42s ease-in-out infinite alternate; }
.star:nth-child(3n) { border-radius: 1px; rotate: 45deg; background: #d6bd9d; }
.star:nth-child(4n) { background: #b5afd8; }
.star-1 { left: 7%; top: 27%; } .star-2 { left: 15%; top: 13%; } .star-3 { left: 28%; top: 8%; }
.star-4 { left: 39%; top: 22%; } .star-5 { left: 47%; top: 10%; } .star-6 { left: 62%; top: 18%; }
.star-7 { left: 76%; top: 10%; } .star-8 { left: 91%; top: 28%; } .star-9 { left: 87%; top: 51%; }
.star-10 { left: 95%; top: 67%; } .star-11 { left: 80%; top: 84%; } .star-12 { left: 65%; top: 90%; }
.star-13 { left: 53%; top: 82%; } .star-14 { left: 36%; top: 91%; } .star-15 { left: 22%; top: 82%; }
.star-16 { left: 8%; top: 73%; } .star-17 { left: 13%; top: 52%; } .star-18 { left: 42%; top: 65%; }
.star-19 { left: 70%; top: 56%; } .star-20 { left: 57%; top: 31%; }

@keyframes float { to { transform: translate3d(0, -7px, 0); } }
@keyframes breathe { 50% { scale: 1.035; opacity: .78; } }
@keyframes drift { to { transform: translate3d(6px, -5px, 0); } }

html[data-theme="dark"] {
  color-scheme: dark;
  --page: #15191d;
  --ink: #e7e6e1;
  --muted: #9a9da0;
  --quiet: #777d82;
  --orbit: rgba(157, 177, 194, .11);
  --surface: rgba(255, 255, 255, .055);
}

html[data-theme="dark"] .universe {
  background:
    radial-gradient(circle at 50% 48%, rgba(194, 149, 91, .13), transparent 24%),
    linear-gradient(135deg, #171b20 0%, #12171b 58%, #18171c 100%);
}
html[data-theme="dark"] .sun img { border-color: rgba(231, 228, 216, .76); box-shadow: 0 15px 46px rgba(0, 0, 0, .32); }
html[data-theme="dark"] .sun-halo { opacity: .72; }
html[data-theme="dark"] .tone-sand { background: radial-gradient(circle at 34% 27%, #8d8170, transparent 36%), linear-gradient(145deg, #70675c, #423c35); }
html[data-theme="dark"] .tone-teal { background: radial-gradient(circle at 30% 25%, #58817d, transparent 38%), linear-gradient(145deg, #426864, #263f3e); }
html[data-theme="dark"] .tone-violet { background: radial-gradient(circle at 31% 25%, #6d6887, transparent 38%), linear-gradient(145deg, #57516f, #39354b); }
html[data-theme="dark"] .tone-blue { background: radial-gradient(circle at 31% 25%, #587b90, transparent 38%), linear-gradient(145deg, #44687c, #293f4d); }
html[data-theme="dark"] .tone-rose { background: radial-gradient(circle at 31% 25%, #835f60, transparent 38%), linear-gradient(145deg, #6d4e51, #452f34); }
html[data-theme="dark"] .planet::before { opacity: .2; }
html[data-theme="dark"] .star { opacity: .48; }

@media (max-width: 760px) {
  .universe { min-height: 1050px; overflow: hidden; }
  .masthead .status { display: none; }
  footer { position: absolute; bottom: 22px; }
  footer { justify-content: flex-end; }
  footer > span:first-child { display: none; }
  .system { inset: 80px 12px 80px; }
  .orbit { left: 50%; top: 52%; width: 74vw; height: 870px; border-radius: 50%; opacity: .7; }
  .orbit-1, .orbit-2, .orbit-3 { display: none; }
  .sun { top: 28%; }
  .sun img { width: 126px; height: 126px; }
  .sun h1 { margin-top: 12px; }
  .sun p { max-width: 280px; line-height: 1.7; }
  .planet-node { min-width: 132px; }
  .blog { left: 2%; top: 4%; }
  .gitea { right: 1%; left: auto; top: 12%; }
  .photos { left: 1%; top: 58%; }
  .music { right: 0; top: 68%; }
  .notes { left: 50%; right: auto; top: 82%; translate: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}