*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #080b0f; --accent: #4ecdc4; --text: #f0f2f5; --muted: #6e7888; --surface: #111519;
  --orb-bg: rgba(78,205,196,.18); --orb-bg2: rgba(78,205,196,.05);
  --ring: rgba(78,205,196,.08); --ring2: rgba(78,205,196,.05);
}
:root.light {
  --bg: #eaf0f6; --accent: #22a49c; --text: #1c2330; --muted: #7e8fa3; --surface: rgba(208,222,236,.7);
  --orb-bg: rgba(34,164,156,.13); --orb-bg2: rgba(34,164,156,.03);
  --ring: rgba(34,164,156,.1); --ring2: rgba(34,164,156,.06);
}
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Noto Sans', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  overflow: hidden;
  transition: background .5s, color .5s;
  user-select: none;
  -webkit-user-select: none;
}

.nebula { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
.neb1 { width: 700px; height: 700px; top: -180px; left: -180px; background: radial-gradient(circle, rgba(78,205,196,1), transparent 70%); opacity: .045; animation: nebDrift1 28s ease-in-out infinite; }
.neb2 { width: 500px; height: 500px; bottom: -120px; right: -100px; background: radial-gradient(circle, rgba(100,120,200,1), transparent 70%); opacity: .035; animation: nebDrift2 34s ease-in-out infinite; }
.neb3 { width: 350px; height: 350px; top: 40%; left: 62%; background: radial-gradient(circle, rgba(78,205,196,1), transparent 70%); opacity: .025; animation: nebDrift3 22s ease-in-out infinite; }

canvas { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

.page { position: relative; z-index: 4; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 0 3rem; }

.hero { text-align: center; margin-bottom: 3.6rem; opacity: 0; transform: translateY(14px); transition: opacity 1.2s ease, transform 1.2s ease; }
.hero.visible { opacity: 1; transform: none; }
.greeting { font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; }
.name { font-size: clamp(2.2rem, 5.5vw, 3.8rem); font-weight: 700; letter-spacing: -.025em; color: var(--text); }
.name span { color: var(--accent); }
.tagline { margin-top: .85rem; font-size: clamp(.78rem, 1.7vw, .9rem); color: var(--muted); letter-spacing: .05em; }

.status-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .9rem;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: #e8a84a;
  box-shadow: 0 0 6px rgba(232,168,74,.5);
  animation: dotPulse 2.8s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 2px rgba(232,168,74,.2); transform: scale(0.9); }
  50%       { box-shadow: 0 0 7px rgba(232,168,74,.6), 0 0 14px rgba(232,168,74,.15); transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .hero, .orb-wrap { opacity: 1; transform: none; transition: none; }
  .status-dot { animation: none; }
}

.status-hint {
  position: fixed; z-index: 7;
  transform: translate(-50%, -50%);
  padding: .55rem 1.1rem;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  background: rgba(17,21,25,.62); backdrop-filter: blur(8px);
  border: 1px solid rgba(78,205,196,.14);
  border-radius: 4px;
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
  white-space: nowrap;
}
:root.light .status-hint { background: rgba(208,222,236,.62); }
.status-hint.visible { opacity: 1; }

.orb-wrap { position: relative; width: 120px; height: 120px; cursor: pointer; opacity: 0; transform: translateY(14px); transition: opacity 1.2s .25s ease, transform 1.2s .25s ease; }
.orb-wrap.visible { opacity: 1; transform: none; }
.orb {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 36% 36%, var(--orb-bg) 0%, var(--orb-bg2) 55%, transparent 80%);
  border: 1px solid rgba(78,205,196,.25); display: flex; align-items: center; justify-content: center; font-size: 2.7rem;
  box-shadow: 0 0 24px rgba(78,205,196,.07), inset 0 0 20px rgba(78,205,196,.04);
  animation: orbIdle 6s ease-in-out infinite; transition: border-color .5s, background .5s; user-select: none;
}
.orb:hover { animation: orbHover 2.5s ease-in-out infinite; border-color: rgba(78,205,196,.5); }
.orb.active {
  border-color: rgba(78,205,196,.55); animation: orbIdle 6s ease-in-out infinite;
  box-shadow: 0 0 45px rgba(78,205,196,.18), inset 0 0 25px rgba(78,205,196,.07);
}
.ring { position: absolute; border-radius: 50%; pointer-events: none; }
.ring1 { inset: -16px; border: 1px solid var(--ring); animation: spin 22s linear infinite; }
.ring2 { inset: -30px; border: 1px solid var(--ring2); animation: spin 16s linear infinite reverse; }

.ripple {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 5;
  border: 1.5px solid rgba(78,205,196,.5); opacity: 0; width: 120px; height: 120px; transform: translate(-50%,-50%);
}
.ripple.go { animation: rippleOut .9s ease-out forwards; }

.node {
  position: fixed; z-index: 6; width: 84px; height: 84px;
  opacity: 0; pointer-events: none; transition: opacity .5s ease; transform: translate(-50%,-50%);
}
.node.visible { opacity: 1; pointer-events: auto; }
.node[aria-disabled="true"] { pointer-events: none; }
.node-btn {
  width: 84px; height: 84px; border-radius: 50%; background: var(--surface);
  border: 1px solid rgba(78,205,196,.22); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; color: var(--accent); text-decoration: none;
  box-shadow: 0 0 14px rgba(78,205,196,.08); transition: border-color .3s, box-shadow .3s, transform .3s;
}
.node-btn svg { width: 30px; height: 30px; fill: currentColor; }
.node-btn:hover { border-color: rgba(78,205,196,.6); box-shadow: 0 0 28px rgba(78,205,196,.25); transform: scale(1.1); }
.node[aria-disabled="true"] .node-btn { opacity: .3; cursor: not-allowed; }
.node[aria-disabled="true"] .node-btn:hover { border-color: rgba(78,205,196,.22); box-shadow: 0 0 14px rgba(78,205,196,.08); transform: none; }

.ui-tl, .ui-tr, .ui-br { position: fixed; z-index: 10; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ui-tl { top: 2rem; left: 2rem; display: flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; transition: color .2s; }
.ui-tl:hover { color: var(--accent); }
.theme-icon { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }
.ui-tr { top: 2rem; right: 2rem; display: flex; align-items: center; gap: .6rem; }
.ui-tr a { color: var(--muted); text-decoration: none; transition: color .2s; }
.ui-tr a:hover, .ui-tr a.active { color: var(--accent); }
.ui-tr .sep { opacity: .4; }
.home-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.8rem 2rem;
  padding-bottom: calc(1.8rem + env(safe-area-inset-bottom, 0px));
  font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
}
.home-nav a { color: var(--muted); text-decoration: none; font-weight: 500; transition: color .2s; }
.home-nav a:visited { color: var(--muted); }
.home-nav a:hover, .home-nav a.active { color: var(--accent); }
.home-nav a.active { font-weight: 700; }
.home-nav-home    { justify-self: start; }
.home-nav-about   { justify-self: center; }
.home-nav-imprint { justify-self: end; }

@keyframes spin { to { transform: rotate(360deg) } }
@keyframes orbIdle {
  0%,100% { box-shadow: 0 0 24px rgba(78,205,196,.07), inset 0 0 20px rgba(78,205,196,.04); transform: scale(1) }
  50% { box-shadow: 0 0 40px rgba(78,205,196,.14), inset 0 0 28px rgba(78,205,196,.07); transform: scale(1.018) }
}
@keyframes orbHover {
  0%,100% { box-shadow: 0 0 38px rgba(78,205,196,.2); transform: scale(1.03) }
  50% { box-shadow: 0 0 60px rgba(78,205,196,.35); transform: scale(1.07) }
}
@keyframes rippleOut { 0% { opacity: .5; width: 120px; height: 120px } 100% { opacity: 0; width: 320px; height: 320px } }
@keyframes nebDrift1 { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(40px,30px) scale(1.08) } }
@keyframes nebDrift2 { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(-35px,25px) scale(1.06) } }
@keyframes nebDrift3 { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(20px,-30px) scale(1.1) } }

@media (max-width: 768px) {
  .page { padding-bottom: 8rem; }
  .node { transform: translate(-50%,-50%) scale(0.90); }
}