:root {
  --color-bg: #000000;
  --color-surface: #000000;
  --color-surface-muted: #03070d;
  --color-text: #f8fbff;
  --color-text-muted: #b7e8ff;
  --color-border: #55e7ff;
  --color-primary: #36e8ff;
  --color-primary-hover: #7af2ff;
  --color-secondary: #16364a;
  --color-secondary-hover: #214d68;
  --animation-canvas-bg: #000000;
  --animation-canvas-border: rgba(88, 231, 255, 0.34);
  --animation-sphere-color: #46f1ff;
  --animation-sphere-grid-color: #e7fdff;
  --animation-sphere-front-opacity: 0.28;
  --animation-sphere-back-opacity: 0.5;
  --animation-status-color: #ffffff;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000000;
}

.hologram-body {
  color: #ffffff;
}

.hologram-stage {
  --hologram-size: min(50vmin, 520px);
  --hologram-spacing: min(27vmin, 300px);

  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000000;
}

.hologram-view {
  position: absolute;
  width: var(--hologram-size);
  height: var(--hologram-size);
  display: grid;
  place-items: center;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.hologram-view-top {
  left: calc(50% + var(--hologram-spacing));
  top: calc(50% - var(--hologram-spacing));
}

.hologram-view-left {
  left: calc(50% - var(--hologram-spacing));
  top: calc(50% - var(--hologram-spacing));
}

.hologram-view-right {
  left: calc(50% + var(--hologram-spacing));
  top: calc(50% + var(--hologram-spacing));
}

.hologram-view-bottom {
  left: calc(50% - var(--hologram-spacing));
  top: calc(50% + var(--hologram-spacing));
}

.hologram-center-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 1024px;
  height: 1024px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(54, 232, 255, 0.95));
}

.hologram-center-marker::before,
.hologram-center-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: #e9fbff;
  box-shadow: 0 0 12px rgba(54, 232, 255, 0.9);
  transform: translate(-50%, -50%);
}

.hologram-center-marker::before {
  width: 256px;
  height: 16px;
}

.hologram-center-marker::after {
  width: 16px;
  height: 256px;
}

.hologram-canvas {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.hologram-canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter: none;
}

.hologram-view-top .hologram-canvas {
  transform: rotate(45deg);
}

.hologram-view-left .hologram-canvas {
  transform: rotate(-45deg);
}

.hologram-view-right .hologram-canvas {
  transform: rotate(135deg);
}

.hologram-view-bottom .hologram-canvas {
  transform: rotate(-135deg);
}

.hologram-controls {
  position: absolute;
  right: min(2.4vmin, 28px);
  top: 50%;
  transform: translateY(-50%);
  width: 154px;
  display: grid;
  gap: 0.65rem;
  justify-items: center;
  padding: 0.75rem;
  border: 1px solid rgba(98, 235, 255, 0.36);
  border-radius: 10px;
  background: rgba(0, 10, 18, 0.78);
  box-shadow: none;
}

.hologram-tuning {
  position: absolute;
  left: min(2.4vmin, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 160px;
  display: grid;
  gap: 0.85rem;
  padding: 0.8rem;
  border: 1px solid rgba(98, 235, 255, 0.36);
  border-radius: 10px;
  background: rgba(0, 10, 18, 0.78);
  box-shadow: none;
}

.hologram-tuning label {
  display: grid;
  gap: 0.45rem;
}

.hologram-tuning span {
  color: #e9fbff;
  font-size: 0.78rem;
  font-weight: 800;
}

.hologram-tuning input {
  width: 100%;
  accent-color: #36e8ff;
}

.hologram-title {
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0;
}

.hologram-status {
  min-height: 1.1rem;
  margin: 0;
  color: #e9fbff;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.hologram-back {
  color: #9beeff;
  font-size: 0.75rem;
  font-weight: 800;
  text-decoration: none;
}

.hologram-back:hover {
  color: #ffffff;
}

.hologram-language-switcher {
  width: 76px;
  min-width: 76px;
  min-height: 30px;
  border-color: rgba(98, 235, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 760px) {
  .hologram-stage {
    --hologram-size: min(46vmin, 280px);
    --hologram-spacing: min(26vmin, 190px);
  }

  .hologram-controls {
    right: 0.55rem;
    width: 76px;
    padding: 0.55rem;
  }

  .hologram-tuning {
    left: 0.55rem;
    top: 50%;
    width: 82px;
    padding: 0.55rem;
  }

  .hologram-title,
  .hologram-status,
  .hologram-back {
    display: none;
  }

  .hologram-language-switcher {
    width: 64px;
    min-width: 64px;
    padding-inline: 7px;
    font-size: 0.68rem;
  }
}