:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  --ink: #fff;
  --quiet: #b8b8c0;
  --line: #ffffff26;
  --radius: 200px;
  --radius-y: 200px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-width: 320px; background: #000; color: var(--ink); }
body { height: 100svh; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.screen { position: fixed; inset: 0; min-height: 240px; }
.entry { display: grid; place-items: center; opacity: 1; transition: opacity 650ms ease, filter 650ms ease; }
.entry.leaving { opacity: 0; filter: blur(8px); pointer-events: none; }
#spiral { position: absolute; inset: 0; width: 100%; height: 100%; }
.enter {
  position: relative; border: 0; background: transparent; padding: 20px 30px;
  font-size: clamp(24px, 4vw, 32px); font-weight: 200; letter-spacing: .2em;
  text-indent: .2em; transition: letter-spacing 700ms ease;
  text-shadow: 0 0 24px #000;
}
.enter:hover { letter-spacing: .3em; }
.enter--logo {
  display: grid; place-items: center; isolation: isolate;
  width: clamp(210px, 32vw, 340px); height: auto;
  grid-template-columns: 100%; grid-template-rows: clamp(130px, 20vw, 210px) auto;
  row-gap: 16px;
  padding: 0; text-indent: 0;
}
.enter--logo img {
  grid-area: 1 / 1;
  position: relative; z-index: 1; display: block; pointer-events: none;
  width: 100%; height: 100%; object-fit: contain;
}
.enter--logo .entry-glow {
  grid-area: 1 / 1;
  inset: 15% 18%; opacity: 0; animation: none;
  transition: opacity 300ms ease; pointer-events: none;
}
.enter--logo:is(:hover, :focus-visible) .entry-glow { opacity: .65; }
.enter-label {
  grid-area: 2 / 1; position: relative; z-index: 1;
  display: grid; place-items: center; min-height: 44px;
  font-size: 20px; font-weight: 200; line-height: 1.3;
  letter-spacing: .2em; text-indent: .2em;
  transition: letter-spacing 700ms ease;
  animation: enter-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
.enter--logo:is(:hover, :focus-visible) .enter-label { letter-spacing: .3em; }
@keyframes enter-pulse { 50% { opacity: .5; } }
.products { display: grid; place-items: center; opacity: 0; transition: opacity 650ms ease; }
.products.visible { opacity: 1; }
.orbit { position: absolute; inset: 60px 0 80px; display: grid; place-items: center; perspective: 1000px; }
.core { position: absolute; display: grid; place-items: center; width: 100px; height: 100px; }
.core img { width: 96px; height: 56px; object-fit: cover; position: relative; z-index: 1; }
.core-halo { position: absolute; inset: 10px; border-radius: 50%; background: linear-gradient(135deg,#a855f7,#3b82f6,#14b8a6); filter: blur(28px); opacity: .65; animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; transform: scale(1.15); } }
.products.paused .core-halo { animation-play-state: paused; }
#nodes { position: absolute; left: 50%; top: 50%; }
.node {
  position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  padding: 0; border: 0; background: transparent; display: flex;
  flex-direction: column; align-items: center; gap: 9px;
  transition: transform 50ms linear;
}
.node-dot { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center;
  border: 0; background: transparent;
  transition: filter 250ms; }
.node-dot img { width: 48px; height: 48px; object-fit: contain; pointer-events: none; }
.node-label { position: absolute; top: 55px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; line-height: 1.3; text-align: center; white-space: normal; width: max-content; max-width: 128px; letter-spacing: .015em; }
.node:hover .node-dot, .node:focus-visible .node-dot, .node[aria-expanded="true"] .node-dot { filter: drop-shadow(0 0 10px #00cfff80); }
.node[aria-expanded="true"] { z-index: 201 !important; }
.description {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  position: fixed; z-index: 300; width: min(342px, calc(100vw - 24px));
  padding: 26px 24px 24px; background: #08080af5; border: 1px solid #ffffff4d;
  border-radius: 16px; box-shadow: 0 16px 60px #000a, 0 0 32px #ffffff0a;
  backdrop-filter: blur(18px); max-height: calc(100svh - 24px); overflow: hidden;
}
.description-content { margin: -7px; padding: 7px; max-height: calc(100svh - 62px); overflow-y: auto; }
.description h1 { margin: 0 28px 14px 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
.description p { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: #dddde4; white-space: pre-line; }
.description .status { margin: -4px 0 14px; font-size: 12px; color: var(--quiet); }
.close { position: absolute; right: 5px; top: 5px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 26px; font-weight: 200; }
.visit { min-height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid #fff; background: #fff; color: #000; font-size: 14px; font-weight: 600; text-decoration: none; }
.visit:hover { background: #ddd; }
.contact-email { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 10px; color: var(--quiet); font-size: 14px; text-underline-offset: 4px; user-select: text; }
.motion-control { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); min-height: 44px; max-width: calc(100vw - 24px); padding: 10px 18px; border: 1px solid #ffffff26; border-radius: 14px; background: #08080a; color: var(--quiet); font-size: 12px; white-space: nowrap; }
.motion-control:hover:not(:disabled) { border-color: #ffffff66; color: #fff; }
.motion-control:disabled { cursor: default; }
.no-script { position: fixed; z-index: 500; inset: auto 12px 70px; background: #000; padding: 12px; }
.no-script a { color: #fff; }
@media (max-width: 480px) { .core img { width: 76px; height: 44px; } .node-label { max-width: 100px; } }
@media (max-width: 350px) { .node-label { max-width: 82px; } }
@media (max-height: 480px) { .orbit { inset: 12px 0 84px; } .node-label { top: 50px; } .core img { width: 80px; height: 46px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}