:root {
  --node-size: 96px;
  --panel-width: 360px;
  --panel-height: 280px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 16% 10%, var(--bg-spot-1), transparent 24%),
    radial-gradient(circle at 82% 14%, var(--bg-spot-2), transparent 24%),
    radial-gradient(circle at 58% 76%, var(--bg-spot-3), transparent 28%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg-accent) 84%, #2b5f90 16%) 100%);
  color: var(--text);
}

body {
  overflow: hidden;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 24%, var(--overlay-spot-1), transparent 14%),
    radial-gradient(circle at 74% 38%, var(--overlay-spot-2), transparent 16%),
    radial-gradient(circle at 50% 84%, var(--overlay-spot-3), transparent 18%);
  opacity: var(--bg-overlay-opacity, 0.4);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 18%, var(--glass-highlight-soft) 36%, transparent 56%),
    linear-gradient(180deg, var(--glass-frost), transparent 44%);
  opacity: var(--bg-glass-overlay-opacity, 0.12);
  mix-blend-mode: var(--bg-glass-overlay-blend, normal);
  pointer-events: none;
}

.app-shell {
  position: relative;
  min-height: 100vh;
}

.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 12;
  background:
    radial-gradient(ellipse 46% 16% at calc(10% + var(--cloud-drift-x, 0%)) 12%, var(--cloud-color-1), transparent 72%),
    radial-gradient(ellipse 36% 13% at calc(34% + var(--cloud-drift-x, 0%)) 18%, var(--cloud-color-2), transparent 74%),
    radial-gradient(ellipse 48% 17% at calc(70% + var(--cloud-drift-x, 0%)) 14%, var(--cloud-color-1), transparent 76%),
    radial-gradient(ellipse 40% 14% at calc(58% - var(--cloud-drift-x, 0%)) 28%, var(--cloud-color-3), transparent 74%),
    radial-gradient(ellipse 34% 12% at calc(20% - var(--cloud-drift-x, 0%)) 34%, var(--cloud-color-2), transparent 72%),
    radial-gradient(ellipse 30% 11% at calc(86% - var(--cloud-drift-x, 0%)) 28%, var(--cloud-color-3), transparent 76%),
    radial-gradient(ellipse 42% 15% at calc(42% + var(--cloud-drift-x, 0%)) 8%, var(--cloud-color-1), transparent 78%);
  opacity: var(--cloud-opacity, 0);
  filter: blur(var(--cloud-blur, 24px));
  transform: translate3d(0, var(--cloud-drift-y, 0px), 0) scale(var(--cloud-scale, 1));
  transform-origin: 50% 18%;
  transition:
    opacity 420ms ease,
    filter 420ms ease,
    transform 420ms ease;
  animation: cloud-pan var(--cloud-pan-duration, 90s) ease-in-out infinite alternate;
  pointer-events: none;
}

.app-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 11;
  background:
    radial-gradient(circle at var(--sun-x, 68%) 18%, var(--sun-glow), transparent 20%),
    linear-gradient(180deg, var(--upper-haze) 0%, transparent 34%),
    linear-gradient(180deg, transparent 0%, transparent 52%, var(--horizon-haze) 74%, transparent 100%),
    linear-gradient(180deg, transparent 0%, transparent 58%, var(--horizon-glow) 88%, transparent 100%);
  opacity: var(--atmosphere-opacity, 0.6);
  filter: blur(var(--atmosphere-blur, 18px));
  pointer-events: none;
}

@keyframes cloud-pan {
  0% {
    transform: translate3d(calc(var(--cloud-pan-x, 0%) * -0.45), var(--cloud-drift-y, 0px), 0)
      scale(var(--cloud-scale, 1));
  }

  100% {
    transform: translate3d(var(--cloud-pan-x, 0%), calc(var(--cloud-drift-y, 0px) + var(--cloud-pan-y, 0px)), 0)
      scale(calc(var(--cloud-scale, 1) + var(--cloud-pan-scale, 0)));
  }
}

.graph-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: 20;
}

.graph-lines,
.graph-nodes {
  position: absolute;
  inset: 0;
}

.graph-lines {
  width: 100%;
  height: 100%;
}

.node {
  position: absolute;
  width: var(--node-width, var(--node-size));
  height: var(--node-height, var(--node-size));
  padding: 0;
  --node-tint-strong: rgba(191, 214, 238, 0.18);
  --node-tint-soft: rgba(191, 214, 238, 0.08);
  --node-tint-shadow: rgba(135, 153, 176, 0.14);
  --node-base-radius: calc(var(--node-height, var(--node-size)) * 0.5);
  border: 1px solid var(--glass-border);
  border-radius:
    var(--node-radius-top-left, var(--node-base-radius))
    var(--node-radius-top-right, var(--node-base-radius))
    var(--node-radius-bottom-right, var(--node-base-radius))
    var(--node-radius-bottom-left, var(--node-base-radius));
  background:
    radial-gradient(
      circle at var(--impact-x, 50%) var(--impact-y, 50%),
      rgba(138, 158, 186, calc(var(--impact-alpha, 0) * 0.5)) 0%,
      rgba(138, 158, 186, calc(var(--impact-alpha, 0) * 0.28)) 18%,
      transparent 54%
    ),
    linear-gradient(180deg, var(--candy-highlight) 0%, transparent 26%),
    radial-gradient(circle at 72% 76%, var(--marble-shadow), transparent 56%),
    radial-gradient(circle at 32% 28%, var(--marble-specular) 0%, var(--marble-specular-soft) 12%, transparent 30%),
    radial-gradient(circle at 28% 24%, var(--node-tint-soft), transparent 44%),
    radial-gradient(circle at 66% 70%, var(--node-tint-strong), transparent 54%),
    radial-gradient(circle at 50% 48%, var(--marble-core), transparent 68%),
    linear-gradient(145deg, var(--marble-rim), transparent 30%, transparent 68%, var(--glass-reflection) 100%);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 var(--glass-border-strong),
    inset 0 10px 14px rgba(255, 255, 255, 0.08),
    inset -16px -18px 28px rgba(0, 0, 0, 0.04),
    0 18px 40px var(--glass-shadow),
    0 0 0 1px var(--node-tint-shadow),
    0 0 0 1px var(--glass-outline);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  cursor: grab;
  transform: translate(-50%, -50%);
  transition:
    width 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    height 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-radius 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 320ms ease,
    box-shadow 320ms ease,
    border-color 320ms ease;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}

.node--focus {
  filter: blur(0);
  opacity: 1;
}

.node--muted {
  filter: blur(8px) saturate(0.64);
  opacity: 0.36;
  pointer-events: none;
}

.node--focus-proxy {
  box-shadow:
    inset 0 1px 0 var(--glass-border-strong),
    inset 0 -12px 28px rgba(201, 214, 228, 0.22),
    0 22px 48px var(--glass-shadow-strong),
    0 0 0 1px var(--glass-outline);
}

.node--selected {
  border-color: rgba(255, 217, 156, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 229, 0.94),
    inset 0 -10px 24px rgba(230, 194, 126, 0.18),
    0 18px 42px rgba(176, 142, 86, 0.18),
    0 0 0 1px rgba(255, 224, 171, 0.18);
}

.node--selected .node__glow {
  opacity: 1;
}

.node--focus-child {
  border-style: dashed;
  border-color: rgba(235, 243, 252, var(--child-outline-alpha, 0.72));
  background:
    radial-gradient(circle at 50% 50%, rgba(245, 250, 255, var(--child-fill-alpha, 0.24)) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 28%),
    radial-gradient(circle at 50% 48%, rgba(218, 230, 244, 0.18), transparent 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    0 14px 28px rgba(110, 128, 154, 0.12),
    0 0 0 1px rgba(229, 239, 250, calc(var(--child-outline-alpha, 0.72) * 0.18));
}

.node--focus-child::after {
  border-style: dashed;
  border-color: rgba(241, 247, 255, calc(var(--child-outline-alpha, 0.72) * 0.9));
}

.node--source-hidden {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  pointer-events: none;
}

.node--utility.node--muted {
  filter: blur(2.5px) saturate(0.86);
  opacity: 0.7;
  pointer-events: auto;
}

.node--muted.node--ambient {
  opacity: 0.24;
}

.node--ambient {
  border-color: rgba(205, 226, 248, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    0 6px 14px rgba(84, 112, 138, 0.08);
  transition:
    background 320ms ease,
    box-shadow 320ms ease,
    border-color 320ms ease,
    transform 260ms ease,
    opacity 240ms ease,
    filter 260ms ease;
}

.node--ambient .node__glow {
  opacity: 0.34;
}

.node--ambient-active {
  transform: translate(-50%, -50%) scale(1.12);
  border-color: rgba(225, 240, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.64),
    0 8px 18px rgba(102, 141, 178, 0.14),
    0 0 0 1px rgba(238, 246, 255, 0.24);
  filter: saturate(1.12);
}

.node--ambient[data-ambient-hue="tidy"][data-ambient-state="active"] {
  border-color: rgba(176, 229, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(242, 251, 255, 0.74),
    0 8px 18px rgba(102, 172, 205, 0.16),
    0 0 0 1px rgba(198, 235, 255, 0.2);
  transform: translate(-50%, -50%) scale(1.16);
}

.node--ambient[data-ambient-hue="orbit"][data-ambient-state="active"] {
  border-color: rgba(194, 221, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(242, 246, 255, 0.74),
    0 8px 18px rgba(117, 143, 209, 0.16),
    0 0 0 1px rgba(204, 221, 255, 0.22);
  transform: translate(-50%, -50%) scale(1.18);
}

.node--ambient[data-ambient-hue="current"][data-ambient-state="active"] {
  border-color: rgba(143, 208, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(233, 245, 255, 0.74),
    0 8px 18px rgba(86, 141, 204, 0.16),
    0 0 0 1px rgba(180, 219, 255, 0.2);
  transform: translate(-50%, -50%) scale(1.14);
  filter: saturate(1.22);
}

.node--ambient[data-ambient-hue="hush"][data-ambient-state="active"] {
  border-color: rgba(255, 225, 188, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 235, 0.76),
    0 8px 18px rgba(189, 154, 94, 0.18),
    0 0 0 1px rgba(255, 228, 196, 0.22);
  transform: translate(-50%, -50%) scale(1.2);
  filter: saturate(1.18) brightness(1.05);
}

.node--ambient[data-ambient-hue="tidy"] {
  --node-tint-strong: rgba(154, 223, 255, 0.18);
  --node-tint-soft: rgba(224, 247, 255, 0.14);
}

.node--ambient[data-ambient-hue="orbit"] {
  --node-tint-strong: rgba(188, 212, 255, 0.18);
  --node-tint-soft: rgba(234, 243, 255, 0.13);
}

.node--ambient[data-ambient-hue="current"] {
  --node-tint-strong: rgba(130, 194, 255, 0.2);
  --node-tint-soft: rgba(214, 236, 255, 0.12);
}

.node--ambient[data-ambient-hue="hush"] {
  --node-tint-strong: rgba(255, 214, 160, 0.2);
  --node-tint-soft: rgba(255, 241, 220, 0.14);
}

.node--ambient[data-ambient-state="active"]::after {
  opacity: 0.84;
}

.node:hover {
  border-color: var(--glass-border-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-border-strong),
    inset -18px -22px 34px rgba(0, 0, 0, 0.1),
    0 22px 44px var(--glass-shadow-strong),
    0 0 0 1px var(--glass-outline);
}

.node:active {
  cursor: grabbing;
}

.node:focus-visible {
  outline: 2px solid rgba(118, 134, 158, 0.44);
  outline-offset: 4px;
}

.node__glow {
  position: absolute;
  inset: 9%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 34% 24%, var(--glow-core), transparent 38%),
    radial-gradient(circle at 64% 74%, var(--glow-accent), transparent 54%);
  opacity: 0.9;
  transition: opacity 220ms ease;
}

.node__ambient-icon {
  position: absolute;
  inset: 26%;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}

.node--ambient[data-ambient-state="active"] .node__ambient-icon {
  opacity: 0.94;
  transform: translateY(-1px) scale(1.04);
}

.node--ambient[data-ambient-icon="tidy"] .node__ambient-icon {
  opacity: 0.7;
  background:
    radial-gradient(circle at 50% 110%, transparent 0 48%, rgba(242, 248, 255, 0.64) 49% 56%, transparent 57% 100%),
    linear-gradient(180deg, transparent 56%, rgba(242, 248, 255, 0.34) 56% 61%, transparent 61% 100%);
}

.node--ambient[data-ambient-icon="orbit"] .node__ambient-icon {
  opacity: 0.68;
  background:
    radial-gradient(circle at 24% 34%, rgba(244, 247, 255, 0.9) 0 11%, transparent 13%),
    radial-gradient(circle at 72% 26%, rgba(244, 247, 255, 0.82) 0 10%, transparent 12%),
    radial-gradient(circle at 58% 72%, rgba(244, 247, 255, 0.76) 0 10%, transparent 12%),
    linear-gradient(145deg, transparent 0 31%, rgba(234, 241, 255, 0.42) 32% 34%, transparent 35% 60%, rgba(234, 241, 255, 0.38) 61% 63%, transparent 64% 100%);
}

.node--ambient[data-ambient-icon="current"] .node__ambient-icon {
  opacity: 0.7;
  background:
    radial-gradient(circle at 36% 32%, rgba(243, 248, 255, 0.28) 0 12%, transparent 13%),
    radial-gradient(circle at 66% 68%, rgba(243, 248, 255, 0.18) 0 14%, transparent 15%),
    linear-gradient(155deg, transparent 0 18%, rgba(236, 244, 255, 0.56) 19% 26%, transparent 27% 46%, rgba(236, 244, 255, 0.42) 47% 53%, transparent 54% 100%);
}

.node--ambient[data-ambient-icon="hush"] .node__ambient-icon {
  opacity: 0.74;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 244, 226, 0.74) 0 18%, transparent 32%),
    linear-gradient(180deg, transparent 0 12%, rgba(255, 240, 214, 0.34) 12% 22%, transparent 22% 26%, rgba(255, 240, 214, 0.58) 26% 66%, transparent 66% 72%, rgba(255, 240, 214, 0.32) 72% 82%, transparent 82% 100%);
}


.node::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: inherit;
  background:
    linear-gradient(135deg, var(--sheen-top), transparent 34%),
    radial-gradient(circle at 72% 72%, var(--sheen-accent), transparent 38%);
  opacity: 0.84;
  pointer-events: none;
}

.node::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: inherit;
  border: 1px solid var(--edge-highlight);
  opacity: 0.6;
  pointer-events: none;
}

.node[data-node-id="projects"] {
  --node-tint-strong: var(--node-projects-strong);
  --node-tint-soft: var(--node-projects-soft);
  --node-tint-shadow: var(--node-projects-shadow);
}

.node[data-node-id="services"] {
  --node-tint-strong: var(--node-services-strong);
  --node-tint-soft: var(--node-services-soft);
  --node-tint-shadow: var(--node-services-shadow);
}

.node[data-node-id="rentals"] {
  --node-tint-strong: var(--node-rentals-strong);
  --node-tint-soft: var(--node-rentals-soft);
  --node-tint-shadow: var(--node-rentals-shadow);
}

.node[data-node-id="about"] {
  --node-tint-strong: var(--node-about-strong);
  --node-tint-soft: var(--node-about-soft);
  --node-tint-shadow: var(--node-about-shadow);
}

.node[data-node-id="contact"] {
  --node-tint-strong: var(--node-contact-strong);
  --node-tint-soft: var(--node-contact-soft);
  --node-tint-shadow: var(--node-contact-shadow);
}

.node[data-node-id="live"] {
  --node-tint-strong: var(--node-live-strong);
  --node-tint-soft: var(--node-live-soft);
  --node-tint-shadow: var(--node-live-shadow);
}

.node[data-node-id="studio"] {
  --node-tint-strong: var(--node-studio-strong);
  --node-tint-soft: var(--node-studio-soft);
  --node-tint-shadow: var(--node-studio-shadow);
}

.node[data-node-id="camera"] {
  --node-tint-strong: var(--node-camera-strong);
  --node-tint-soft: var(--node-camera-soft);
  --node-tint-shadow: var(--node-camera-shadow);
}

.node[data-node-id="edit"] {
  --node-tint-strong: var(--node-edit-strong);
  --node-tint-soft: var(--node-edit-soft);
  --node-tint-shadow: var(--node-edit-shadow);
}

.node__label {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% - 28px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  min-height: auto;
  padding: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
  color: var(--node-label-fill);
  text-shadow:
    0 0 0.5px var(--node-label-shadow-top),
    0 1px 0 var(--node-label-shadow-top),
    0 -1px 0 var(--node-label-shadow-bottom);
  -webkit-text-stroke: 0.45px var(--node-label-stroke);
  filter: none;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.node:not(.node--active) .node__label {
  transform: translate(-50%, -50%);
}

.node:not(.node--active) .node__label::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(0, 0, 0, 0);
  text-shadow:
    0 0 1px var(--emboss-sheen),
    0 1px 5px var(--emboss-sheen),
    0 2px 0 var(--emboss-highlight),
    0 1px 0 var(--emboss-highlight),
    0 -1px 0 var(--emboss-shadow),
    0 -2px 10px rgba(0, 0, 0, 0.06);
  opacity: 1;
  pointer-events: none;
}

.node:not(.node--active):hover .node__label {
  text-shadow:
    0 0 0.5px var(--node-label-hover-stroke),
    0 0 10px rgba(255, 255, 255, 0.24),
    0 1px 0 var(--node-label-shadow-top),
    0 -1px 0 var(--node-label-shadow-bottom);
  -webkit-text-stroke: 0.5px var(--node-label-hover-stroke);
}

.node:not(.node--active):hover .node__label::before {
  text-shadow:
    0 0 1px var(--emboss-hover-outline),
    0 0 10px rgba(255, 255, 255, 0.22),
    0 1px 3px var(--emboss-sheen),
    0 2px 0 var(--emboss-highlight),
    0 1px 0 var(--emboss-highlight),
    0 -1px 0 var(--emboss-shadow),
    0 -2px 8px rgba(0, 0, 0, 0.08);
}

.node--muted .node__label {
  opacity: 0.72;
}

.node[data-node-id^="services-"],
.node[data-node-id^="projects-"],
.node[data-node-id^="rentals-"],
.node[data-node-id^="about-"],
.node[data-node-id^="contact-"],
.node[data-node-id^="live-"],
.node[data-node-id^="studio-"],
.node[data-node-id^="camera-"],
.node[data-node-id^="edit-"] {
  border-color: rgba(163, 175, 192, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 8px 18px rgba(134, 145, 160, 0.06);
}

.node--media-child {
  width: var(--media-child-width, 248px);
  height: var(--media-child-height, 144px);
  border-radius: 24px;
  border-color: rgba(230, 238, 246, 0.3);
  background:
    linear-gradient(180deg, rgba(16, 19, 25, 0.06), rgba(6, 8, 12, 0.22)),
    linear-gradient(145deg, rgba(255, 255, 255, 0.24) 0%, transparent 34%, rgba(255, 255, 255, 0.04) 100%),
    rgba(228, 236, 245, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -16px 26px rgba(5, 9, 16, 0.16),
    0 18px 36px rgba(48, 56, 70, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.node--media-child::before {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 34%);
  opacity: 1;
}

.node--media-child::after {
  inset: 10px;
  border-radius: 18px;
  border-color: rgba(255, 255, 255, 0.14);
  opacity: 0.72;
}

.node--media-child .node__glow,
.node--media-child .node__panel {
  display: none;
}

.node--media-child .node__label {
  top: auto;
  bottom: 14px;
  left: 16px;
  width: calc(100% - 32px);
  min-height: 0;
  justify-content: flex-start;
  padding: 0;
  transform: none;
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-align: left;
  color: rgba(247, 250, 255, 0.96);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.42);
  z-index: 2;
}

.node--media-child:hover {
  transform: translate(-50%, -50%) translateX(4px);
}

.node__media {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

.node__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 26%),
    linear-gradient(0deg, rgba(7, 9, 14, 0.56), transparent 46%);
}

.node__media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.node__media-resize {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 24px;
  height: 24px;
  border-radius: 10px;
  background: rgba(12, 16, 22, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 18px rgba(0, 0, 0, 0.22);
  cursor: nwse-resize;
  z-index: 3;
}

.node__media-resize::before,
.node__media-resize::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 8px;
  height: 1.5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  transform-origin: right center;
}

.node__media-resize::before {
  transform: rotate(-45deg);
}

.node__media-resize::after {
  width: 12px;
  right: 4px;
  bottom: 10px;
  transform: rotate(-45deg);
  opacity: 0.62;
}

.node[data-node-id="projects"] .node__label,
.node[data-node-id="services"] .node__label,
.node[data-node-id="rentals"] .node__label,
.node[data-node-id="contact"] .node__label,
.node[data-node-id="camera"] .node__label,
.node[data-node-id="live"] .node__label {
  width: calc(100% - 28px);
  font-size: 0.54rem;
}

.node--utility {
  isolation: isolate;
  border-color: var(--utility-border);
  box-shadow:
    inset 0 1px 0 var(--panel-border),
    inset 0 -12px 22px var(--panel-surface-bottom),
    0 14px 28px var(--core-shadow-soft),
    0 0 0 1px var(--glass-outline);
}

.node--utility .node__glow {
  opacity: 0.42;
}

.node--utility .node__label {
  z-index: 2;
  width: calc(100% - 18px);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  color: var(--utility-text);
  text-shadow:
    0 1px 0 var(--utility-text-shadow),
    0 -1px 0 rgba(0, 0, 0, 0.12);
}

.node__utility-ornament {
  position: absolute;
  inset: 18%;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

.node__utility-ornament::before,
.node__utility-ornament::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.node[data-node-id="ui-home"],
.node[data-node-id="ui-home"]::after,
.node[data-node-id="ui-mute"],
.node[data-node-id="ui-mute"] .node__utility-ornament,
.node[data-node-id="ui-mute"] .node__utility-ornament::before,
.node[data-node-id="ui-mute"] .node__utility-ornament::after,
.node[data-node-id="ui-effects"],
.node[data-node-id="ui-effects"] .node__utility-ornament,
.node[data-node-id="ui-effects"] .node__utility-ornament::before,
.node[data-node-id="ui-effects"] .node__utility-ornament::after,
.node[data-node-id="ui-shape"],
.node[data-node-id="ui-shape"] .node__utility-ornament,
.node[data-node-id="ui-shape"] .node__utility-ornament::before,
.node[data-node-id="ui-shape"] .node__utility-ornament::after,
.node[data-node-id="ui-theme"],
.node[data-node-id="ui-theme"] .node__utility-ornament,
.node[data-node-id="ui-theme"] .node__utility-ornament::before,
.node[data-node-id="ui-theme"] .node__utility-ornament::after {
  transition: none;
}

.node[data-node-id="ui-home"] .node__label {
  width: calc(100% - 14px);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.node[data-node-id="ui-home"] {
  width: 104px;
  height: 50px;
  border-radius: 19px;
  border-color: var(--core-frame);
  background:
    radial-gradient(circle at 24% 18%, var(--core-home-glint), transparent 24%),
    radial-gradient(circle at 76% 84%, rgba(188, 213, 241, 0.14), transparent 28%),
    linear-gradient(145deg, var(--glass-highlight-soft) 0%, transparent 42%, var(--glass-reflection) 100%),
    linear-gradient(180deg, var(--panel-surface-top), var(--panel-surface-bottom)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 var(--panel-border),
    inset 0 -10px 16px var(--core-home-shadow),
    0 12px 18px var(--panel-shadow),
    0 0 0 1px var(--glass-outline);
}

.node[data-node-id="ui-home"] .node__glow {
  inset: 12% 10%;
  opacity: 0.44;
}

.node[data-node-id="ui-home"] .node__utility-ornament {
  inset: 6px 7px 7px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 22% 18%, var(--core-home-glint), transparent 20%),
    linear-gradient(180deg, var(--core-home-surface), rgba(218, 231, 246, 0.04));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -6px 10px var(--core-home-shadow);
}

.node[data-node-id="ui-home"] .node__utility-ornament::before {
  inset: 6px 10px auto;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent);
}

.node[data-node-id="ui-home"] .node__utility-ornament::after {
  top: 8px;
  right: 12px;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, var(--core-home-spark), transparent 68%);
}

.node[data-node-id="ui-home"]::before {
  opacity: 0.7;
}

.node[data-node-id="ui-home"]::after {
  inset: 5px;
  border-radius: 13px;
  border: 1px solid var(--core-frame);
  opacity: 1;
}

.node[data-node-id="ui-home"]:hover {
  transform: translate(-50%, -50%);
}

.node[data-node-id="ui-home"]:hover::after {
  transform: none;
  border-color: var(--core-frame);
  box-shadow: none;
}

.node[data-node-id="ui-mute"],
.node[data-node-id="ui-effects"],
.node[data-node-id="ui-shape"],
.node[data-node-id="ui-weather"],
.node[data-node-id="ui-theme"] {
  border-color: var(--core-frame);
  background:
    radial-gradient(circle at 24% 18%, var(--core-home-glint), transparent 24%),
    radial-gradient(circle at 76% 84%, rgba(188, 213, 241, 0.12), transparent 28%),
    linear-gradient(145deg, var(--glass-highlight-soft) 0%, transparent 42%, var(--glass-reflection) 100%),
    linear-gradient(180deg, var(--panel-surface-top), var(--panel-surface-bottom)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 var(--panel-border),
    inset 0 -10px 16px var(--core-home-shadow),
    0 12px 18px var(--panel-shadow),
    0 0 0 1px var(--glass-outline);
}

.node[data-node-id="ui-mute"]::before,
.node[data-node-id="ui-effects"]::before,
.node[data-node-id="ui-shape"]::before,
.node[data-node-id="ui-weather"]::before,
.node[data-node-id="ui-theme"]::before {
  opacity: 0.7;
}

.node[data-node-id="ui-mute"]::after,
.node[data-node-id="ui-effects"]::after,
.node[data-node-id="ui-shape"]::after,
.node[data-node-id="ui-weather"]::after,
.node[data-node-id="ui-theme"]::after {
  inset: 5px;
  border-radius: 13px;
  border: 1px solid var(--core-frame);
  opacity: 1;
}

.node[data-node-id="ui-mute"]:hover,
.node[data-node-id="ui-effects"]:hover,
.node[data-node-id="ui-shape"]:hover,
.node[data-node-id="ui-weather"]:hover,
.node[data-node-id="ui-theme"]:hover {
  transform: translate(-50%, -50%);
}

.node[data-node-id="ui-mute"]:hover::after,
.node[data-node-id="ui-effects"]:hover::after,
.node[data-node-id="ui-shape"]:hover::after,
.node[data-node-id="ui-weather"]:hover::after,
.node[data-node-id="ui-theme"]:hover::after {
  transform: none;
  border-color: var(--core-frame);
  box-shadow: none;
}

.node[data-node-id="ui-mute"] .node__label {
  display: none;
}

.node[data-node-id="ui-mute"] {
  width: 52px;
  height: 44px;
  border-radius: 16px;
}

.node[data-node-id="ui-mute"] .node__utility-ornament {
  inset: 6px 7px 7px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 22% 18%, var(--core-home-glint), transparent 20%),
    linear-gradient(180deg, var(--core-home-surface), rgba(218, 231, 246, 0.04));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -6px 10px var(--core-home-shadow);
}

.node[data-node-id="ui-mute"] .node__utility-ornament::before {
  inset: 24% 18% 24% 18%;
  background:
    radial-gradient(circle, var(--core-icon) 0 62%, transparent 63%) 16% 66% / 12px 12px no-repeat,
    radial-gradient(circle, var(--core-icon) 0 62%, transparent 63%) 50% 66% / 12px 12px no-repeat,
    linear-gradient(var(--core-icon), var(--core-icon)) 28% 20% / 26% 4px no-repeat,
    linear-gradient(var(--core-icon), var(--core-icon)) 26% 24% / 4px 42% no-repeat,
    linear-gradient(var(--core-icon), var(--core-icon)) 54% 24% / 4px 42% no-repeat;
  border-radius: 10px;
  opacity: 1;
}

.node[data-node-id="ui-mute"] .node__utility-ornament::after {
  top: 50%;
  left: 12%;
  right: 10%;
  height: 2px;
  border-radius: 999px;
  background: var(--core-mute-slash);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  transform: rotate(-34deg);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}

.node[data-node-id="ui-theme"] .node__label {
  display: none;
}

.node[data-node-id="ui-weather"] {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  transition:
    left 430ms cubic-bezier(0.22, 0.72, 0.2, 1),
    top 430ms cubic-bezier(0.22, 0.72, 0.2, 1),
    width 500ms cubic-bezier(0.22, 0.72, 0.2, 1),
    height 500ms cubic-bezier(0.22, 0.72, 0.2, 1),
    border-radius 500ms cubic-bezier(0.22, 0.72, 0.2, 1),
    background 320ms ease,
    box-shadow 320ms ease,
    border-color 320ms ease;
}

.node[data-node-id="ui-weather"] .node__label {
  display: grid;
  top: auto;
  bottom: 8px;
  width: calc(100% - 10px);
  transform: translateX(-50%);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--utility-text);
  text-shadow:
    0 1px 0 var(--utility-text-shadow),
    0 -1px 0 rgba(0, 0, 0, 0.12);
}

.node[data-node-id="ui-weather"]:not(.node--active) .node__label {
  transform: translateX(-50%);
}

.node[data-node-id="ui-weather"] .node__label::after {
  content: attr(data-weather-text);
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.34rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--utility-text-soft);
  text-shadow:
    0 1px 0 var(--utility-text-shadow),
    0 -1px 0 rgba(0, 0, 0, 0.1);
  opacity: 0.88;
  pointer-events: none;
}

.node[data-node-id="ui-weather"] .node__utility-ornament {
  inset: 6px 6px 18px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 26% 18%, var(--core-home-glint), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(218, 231, 246, 0.03));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -5px 9px var(--core-home-shadow);
}

.node[data-node-id="ui-weather"] .node__utility-ornament::before {
  inset: 8px 9px 10px 9px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 42%, var(--emboss-highlight) 43% 49%, transparent 50%) 50% 36% / 14px 14px no-repeat,
    linear-gradient(180deg, transparent 0 68%, var(--emboss-shadow) 69% 74%, transparent 75%) 50% 50% / 20px 10px no-repeat;
  opacity: 0.98;
  filter: drop-shadow(0 1px 0 var(--emboss-highlight));
}

.node[data-node-id="ui-weather"] .node__utility-ornament::after {
  inset: 7px 8px 11px 8px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, var(--emboss-sheen) 0 34%, transparent 35%) 50% 32% / 8px 8px no-repeat;
  opacity: 0.92;
  pointer-events: none;
}

.node[data-node-id="ui-weather"][data-weather-state="waiting"] .node__utility-ornament::before {
  background:
    radial-gradient(circle at 50% 38%, transparent 0 30%, var(--emboss-highlight) 31% 36%, transparent 37%) 50% 50% / 14px 14px no-repeat,
    linear-gradient(180deg, transparent 0 62%, var(--emboss-shadow) 63% 68%, transparent 69%) 50% 66% / 16px 8px no-repeat;
}

.node[data-node-id="ui-weather"][data-weather-state="clear"] .node__utility-ornament::before,
.node[data-node-id="ui-weather"][data-weather-state="partly"] .node__utility-ornament::before {
  background:
    radial-gradient(circle at 50% 34%, transparent 0 34%, var(--emboss-highlight) 35% 41%, transparent 42%) 50% 34% / 16px 16px no-repeat,
    linear-gradient(90deg, transparent 0 38%, var(--emboss-shadow) 39% 41%, transparent 42%) 50% 34% / 18px 18px no-repeat,
    linear-gradient(0deg, transparent 0 38%, var(--emboss-shadow) 39% 41%, transparent 42%) 50% 34% / 18px 18px no-repeat;
}

.node[data-node-id="ui-weather"][data-weather-state="overcast"] .node__utility-ornament::before,
.node[data-node-id="ui-weather"][data-weather-state="fog"] .node__utility-ornament::before {
  background:
    radial-gradient(circle at 34% 54%, var(--emboss-highlight) 0 22%, transparent 23%) 36% 46% / 16px 16px no-repeat,
    radial-gradient(circle at 54% 46%, var(--emboss-highlight) 0 26%, transparent 27%) 54% 42% / 18px 18px no-repeat,
    radial-gradient(circle at 72% 56%, var(--emboss-highlight) 0 22%, transparent 23%) 70% 48% / 15px 15px no-repeat,
    linear-gradient(180deg, transparent 0 52%, var(--emboss-shadow) 53% 61%, transparent 62%) 50% 56% / 26px 14px no-repeat;
}

.node[data-node-id="ui-weather"][data-weather-state="rain"] .node__utility-ornament::before,
.node[data-node-id="ui-weather"][data-weather-state="storm"] .node__utility-ornament::before {
  background:
    radial-gradient(circle at 34% 46%, var(--emboss-highlight) 0 22%, transparent 23%) 36% 40% / 16px 16px no-repeat,
    radial-gradient(circle at 54% 38%, var(--emboss-highlight) 0 26%, transparent 27%) 54% 36% / 18px 18px no-repeat,
    radial-gradient(circle at 72% 48%, var(--emboss-highlight) 0 22%, transparent 23%) 70% 40% / 15px 15px no-repeat,
    linear-gradient(180deg, transparent 0 52%, var(--emboss-shadow) 53% 61%, transparent 62%) 50% 48% / 26px 14px no-repeat,
    linear-gradient(180deg, var(--emboss-shadow), var(--emboss-shadow)) 34% 84% / 2px 8px no-repeat,
    linear-gradient(180deg, var(--emboss-shadow), var(--emboss-shadow)) 50% 80% / 2px 10px no-repeat,
    linear-gradient(180deg, var(--emboss-shadow), var(--emboss-shadow)) 66% 84% / 2px 8px no-repeat;
}

.node[data-node-id="ui-weather"][data-weather-state="snow"] .node__utility-ornament::before {
  background:
    linear-gradient(90deg, transparent 0 46%, var(--emboss-highlight) 47% 53%, transparent 54%) 50% 44% / 16px 16px no-repeat,
    linear-gradient(0deg, transparent 0 46%, var(--emboss-highlight) 47% 53%, transparent 54%) 50% 44% / 16px 16px no-repeat,
    linear-gradient(45deg, transparent 0 47%, var(--emboss-shadow) 48% 52%, transparent 53%) 50% 44% / 16px 16px no-repeat,
    linear-gradient(-45deg, transparent 0 47%, var(--emboss-shadow) 48% 52%, transparent 53%) 50% 44% / 16px 16px no-repeat;
}

.node[data-node-id="ui-weather"][data-weather-state="partly"] .node__utility-ornament::after {
  background:
    radial-gradient(circle at 38% 34%, var(--emboss-sheen) 0 34%, transparent 35%) 36% 26% / 8px 8px no-repeat,
    radial-gradient(circle at 40% 52%, var(--emboss-highlight) 0 18%, transparent 19%) 42% 48% / 14px 14px no-repeat,
    radial-gradient(circle at 56% 42%, var(--emboss-highlight) 0 22%, transparent 23%) 58% 40% / 16px 16px no-repeat,
    linear-gradient(180deg, transparent 0 56%, var(--emboss-shadow) 57% 64%, transparent 65%) 54% 52% / 22px 12px no-repeat;
}

.node[data-node-id="ui-weather"][data-weather-state="storm"] .node__utility-ornament::after {
  background:
    linear-gradient(150deg, transparent 0 38%, var(--emboss-highlight) 39% 54%, transparent 55%) 56% 74% / 12px 14px no-repeat,
    radial-gradient(circle at 50% 34%, var(--emboss-sheen) 0 32%, transparent 33%) 50% 24% / 8px 8px no-repeat;
}

.node[data-node-id="ui-weather"][data-weather-state="fog"] .node__utility-ornament::after {
  background:
    linear-gradient(180deg, transparent 0 44%, var(--emboss-shadow) 45% 51%, transparent 52%) 50% 70% / 22px 8px no-repeat,
    linear-gradient(180deg, transparent 0 44%, var(--emboss-shadow) 45% 51%, transparent 52%) 50% 82% / 18px 8px no-repeat;
}

.node[data-node-id="ui-weather"].node--active {
  width: min(320px, 84vw);
  height: 316px;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34) 0%, transparent 38%, rgba(236, 247, 255, 0.28) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(223, 235, 247, 0.42)),
    rgba(255, 255, 255, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -16px 26px rgba(173, 194, 220, 0.12),
    0 24px 56px rgba(128, 146, 172, 0.18),
    0 0 0 1px rgba(186, 207, 230, 0.28);
}

.node[data-node-id="ui-weather"].node--active .node__utility-ornament,
.node[data-node-id="ui-weather"].node--active .node__label {
  opacity: 0;
}

.node[data-node-id="ui-weather"].node--active .node__panel {
  padding: 24px 24px 22px;
  gap: 6px;
}

.node__weather-grid {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}

.node[data-node-id="ui-weather"].node--active .node__kicker,
.node[data-node-id="ui-weather"].node--active .node__title,
.node[data-node-id="ui-weather"].node--active .node__summary,
.node[data-node-id="ui-weather"].node--active .node__compact-card-title,
.node[data-node-id="ui-weather"].node--active .node__weather-value {
  text-shadow: none;
}

.node[data-node-id="ui-weather"].node--active .node__kicker,
.node[data-node-id="ui-weather"].node--active .node__compact-card-title {
  color: rgba(72, 87, 107, 0.9);
  opacity: 1;
}

.node[data-node-id="ui-weather"].node--active .node__title {
  color: rgba(31, 39, 51, 0.94);
  font-size: 1.5rem;
  line-height: 0.98;
}

.node[data-node-id="ui-weather"].node--active .node__summary {
  display: none;
}

.node__weather-value {
  color: rgba(31, 39, 51, 0.92);
  font-size: 0.86rem;
  line-height: 1.24;
}

.node[data-node-id="ui-weather"].node--active .node__compact-card {
  min-height: 74px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(128, 146, 172, 0.08);
}

.node[data-node-id="ui-weather"].node--active .node__compact-card-title {
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

.node[data-node-id="ui-theme"] {
  width: 46px;
  height: 40px;
  border-radius: 14px;
}

.node[data-node-id="ui-theme"] .node__utility-ornament {
  inset: 6px 7px 7px;
  border-radius: 11px;
  background:
    radial-gradient(circle at 22% 18%, var(--core-home-glint), transparent 20%),
    linear-gradient(180deg, var(--core-home-surface), rgba(218, 231, 246, 0.04));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -6px 10px var(--core-home-shadow);
}

.node[data-node-id="ui-theme"] .node__utility-ornament::before {
  inset: 22% 22% 22% 22%;
  background:
    radial-gradient(circle at 38% 34%, var(--core-switch-icon-night) 0 46%, transparent 47%),
    radial-gradient(circle at 56% 34%, var(--core-home-surface) 0 54%, transparent 55%);
  box-shadow: none;
}

.node[data-node-id="ui-theme"] .node__utility-ornament::after {
  inset: 16% 16% auto;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent);
  transform: none;
}

.node[data-node-id="ui-mute"].node--sound-muted {
  border-color: var(--core-icon-muted);
  box-shadow:
    inset 0 1px 0 var(--surface-inset-top),
    inset 0 -10px 24px var(--surface-inset-bottom),
    0 12px 24px var(--core-shadow-soft);
  opacity: 0.9;
}

.node[data-node-id="ui-mute"][data-sound-state="muted"] .node__utility-ornament {
  background:
    radial-gradient(circle at 22% 18%, var(--core-home-glint), transparent 20%),
    linear-gradient(180deg, var(--core-home-surface), rgba(218, 231, 246, 0.04));
  filter: saturate(0.18);
}

.node[data-node-id="ui-mute"][data-sound-state="muted"] .node__utility-ornament::before {
  background:
    radial-gradient(circle, var(--core-icon-muted) 0 62%, transparent 63%) 16% 66% / 12px 12px no-repeat,
    radial-gradient(circle, var(--core-icon-muted) 0 62%, transparent 63%) 50% 66% / 12px 12px no-repeat,
    linear-gradient(var(--core-icon-muted), var(--core-icon-muted)) 28% 20% / 26% 4px no-repeat,
    linear-gradient(var(--core-icon-muted), var(--core-icon-muted)) 26% 24% / 4px 42% no-repeat,
    linear-gradient(var(--core-icon-muted), var(--core-icon-muted)) 54% 24% / 4px 42% no-repeat;
  opacity: 0.92;
}

.node[data-node-id="ui-mute"][data-sound-state="muted"] .node__utility-ornament::after {
  opacity: 1;
  transform: rotate(-34deg) scale(1.02);
}

.node[data-node-id="ui-effects"] .node__label {
  display: none;
}

.node[data-node-id="ui-effects"] {
  width: 46px;
  height: 40px;
  border-radius: 14px;
}

.node[data-node-id="ui-effects"] .node__utility-ornament {
  inset: 6px 7px 7px;
  border-radius: 11px;
  background:
    radial-gradient(circle at 22% 18%, var(--core-home-glint), transparent 20%),
    linear-gradient(180deg, var(--core-home-surface), rgba(218, 231, 246, 0.04));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -6px 10px var(--core-home-shadow);
}

.node[data-node-id="ui-effects"] .node__utility-ornament::before {
  inset: 24% 20% 24% 20%;
  background:
    linear-gradient(var(--core-icon), var(--core-icon)) 12% 44% / 26% 22% no-repeat,
    linear-gradient(var(--core-icon), var(--core-icon)) 30% 28% / 10% 54% no-repeat,
    linear-gradient(var(--core-icon), var(--core-icon)) 40% 22% / 16% 66% no-repeat,
    radial-gradient(circle at 70% 46%, transparent 42%, var(--core-icon) 43% 49%, transparent 50%) 0 0 / 100% 100% no-repeat;
}

.node[data-node-id="ui-effects"] .node__utility-ornament::after {
  top: 50%;
  left: 12%;
  right: 10%;
  height: 2px;
  border-radius: 999px;
  background: var(--core-mute-slash);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  transform: rotate(-34deg);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}

.node[data-node-id="ui-effects"].node--effects-muted {
  border-color: var(--core-icon-muted);
  box-shadow:
    inset 0 1px 0 var(--surface-inset-top),
    inset 0 -10px 24px var(--surface-inset-bottom),
    0 12px 24px var(--core-shadow-soft);
  opacity: 0.9;
}

.node[data-node-id="ui-effects"][data-effects-state="muted"] .node__utility-ornament::before {
  background:
    linear-gradient(var(--core-icon-muted), var(--core-icon-muted)) 12% 44% / 26% 22% no-repeat,
    linear-gradient(var(--core-icon-muted), var(--core-icon-muted)) 30% 28% / 10% 54% no-repeat,
    linear-gradient(var(--core-icon-muted), var(--core-icon-muted)) 40% 22% / 16% 66% no-repeat,
    radial-gradient(circle at 70% 46%, transparent 42%, var(--core-icon-muted) 43% 49%, transparent 50%) 0 0 / 100% 100% no-repeat;
  opacity: 0.92;
}

.node[data-node-id="ui-effects"][data-effects-state="muted"] .node__utility-ornament::after {
  opacity: 1;
  transform: rotate(-34deg) scale(1.02);
}

.node[data-node-id="ui-shape"] .node__label {
  display: none;
}

.node[data-node-id="ui-shape"] {
  width: 46px;
  height: 40px;
  border-radius: 14px;
}

.node[data-node-id="ui-shape"] .node__utility-ornament {
  inset: 6px 7px 7px;
  border-radius: 11px;
  background:
    radial-gradient(circle at 22% 18%, var(--core-home-glint), transparent 20%),
    linear-gradient(180deg, var(--core-home-surface), rgba(218, 231, 246, 0.04));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -6px 10px var(--core-home-shadow);
}

.node[data-node-id="ui-shape"] .node__utility-ornament::before {
  inset: 8px 9px 9px;
  background:
    radial-gradient(circle at 20% 50%, var(--core-icon) 0 8px, transparent 9px) 0 50% / 12px 12px no-repeat,
    radial-gradient(circle at 52% 50%, transparent 0 7px, var(--core-icon) 7px 9px, transparent 10px) 50% 50% / 14px 14px no-repeat,
    radial-gradient(circle at 82% 50%, transparent 0 6px, var(--core-icon) 6px 8px, transparent 9px) 100% 50% / 14px 14px no-repeat;
  opacity: 0.92;
}

.node[data-node-id="ui-shape"] .node__utility-ornament::after {
  inset: 8px 8px 9px;
  border-radius: 12px;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}

.node[data-node-id="ui-shape"][data-shape-mode="circle"] .node__utility-ornament::after {
  opacity: 0.9;
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.26) 0 3px, transparent 4px) 0 50% / 12px 12px no-repeat,
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.32) 0 4px, transparent 5px) 50% 50% / 14px 14px no-repeat;
}

.node[data-node-id="ui-shape"][data-shape-mode="pill"] .node__utility-ornament::after {
  opacity: 0.95;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08)) 56% 50% / 16px 8px no-repeat;
  border-radius: 999px;
}

.node[data-node-id="ui-shape"][data-shape-mode="elastic"] {
  border-color: rgba(236, 245, 255, 0.82);
  box-shadow:
    inset 0 1px 0 var(--surface-inset-top),
    inset 0 -10px 24px rgba(160, 192, 228, 0.22),
    0 14px 28px rgba(134, 164, 198, 0.18),
    0 0 0 1px rgba(208, 228, 248, 0.24);
}

.node[data-node-id="ui-shape"][data-shape-mode="elastic"] .node__utility-ornament::after {
  opacity: 1;
  background:
    radial-gradient(circle at 22% 52%, rgba(255, 255, 255, 0.24) 0 3px, transparent 4px) 0 50% / 12px 12px no-repeat,
    radial-gradient(circle at 52% 50%, rgba(255, 255, 255, 0.28) 0 4px, transparent 5px) 50% 50% / 14px 14px no-repeat,
    radial-gradient(circle at 84% 48%, rgba(255, 255, 255, 0.24) 0 3px, transparent 4px) 100% 50% / 12px 12px no-repeat;
  transform: skewX(-8deg) scaleY(0.9);
}

.node[data-node-id="ui-theme"].node--theme-night {
  box-shadow:
    inset 0 1px 0 var(--surface-inset-top),
    inset 0 -10px 24px var(--surface-inset-bottom),
    0 14px 30px var(--core-shadow-soft),
    0 0 0 1px rgba(132, 166, 203, 0.12);
}

.node[data-node-id="ui-theme"][data-theme-state="night"] .node__utility-ornament::after {
  opacity: 1;
}

.node[data-node-id="ui-theme"][data-theme-state="day"] .node__utility-ornament {
  background:
    radial-gradient(circle at 22% 18%, var(--core-home-glint), transparent 20%),
    linear-gradient(180deg, var(--core-home-surface), rgba(218, 231, 246, 0.04));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -6px 10px var(--core-home-shadow);
}

.node[data-node-id="ui-theme"][data-theme-state="day"] .node__utility-ornament::before {
  background:
    radial-gradient(circle, var(--core-switch-icon-day) 0 38%, transparent 39%),
    radial-gradient(circle, var(--core-switch-icon-day) 0 68%, transparent 69%);
}

.node[data-node-id="ui-theme"][data-theme-state="day"] .node__utility-ornament::after {
  opacity: 1;
}

.node__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  padding: 28px;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 180ms ease 120ms,
    transform 180ms ease 120ms;
  text-align: left;
  pointer-events: none;
}

.node__kicker {
  margin: 0;
  color: var(--panel-kicker);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.node__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 0.98;
  color: var(--panel-strong-text);
}

.node[data-node-id="projects"] .node__label,
.node[data-node-id="services"] .node__label,
.node[data-node-id="rentals"] .node__label,
.node[data-node-id="contact"] .node__label,
.node[data-node-id="camera"] .node__label,
.node[data-node-id="live"] .node__label {
  width: calc(100% - 28px);
  font-size: 0.56rem;
}

.node__summary {
  margin: 0;
  color: var(--panel-body);
  font-size: 0.82rem;
  line-height: 1.72;
}

.node__compact-strip,
.node__compact-grid {
  display: grid;
  gap: 8px;
}

.node__compact-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2px;
}

.node__compact-pill,
.node__compact-card,
.node__compact-note,
.node__compact-feature {
  border: 1px solid var(--glass-border);
  background: var(--action-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    inset 0 1px 0 var(--panel-border),
    0 8px 18px rgba(128, 146, 172, 0.06);
}

.node__compact-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--panel-strong-text);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.node__compact-feature {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
}

.node__compact-feature-label,
.node__compact-card-title {
  color: var(--panel-strong-text);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.node__compact-feature-name {
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 600;
  line-height: 1;
  color: var(--panel-strong-text);
}

.node__compact-feature-blurb,
.node__compact-card-note {
  color: var(--panel-body);
  font-size: 0.72rem;
  line-height: 1.45;
}

.node__compact-feature-blurb {
  margin: 0;
}

.node__compact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.node__compact-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 88px;
  padding: 12px;
  border-radius: 16px;
  color: var(--panel-strong-text);
  line-height: 1.25;
  text-align: left;
}

.node__compact-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  color: var(--panel-body);
  font-size: 0.76rem;
  line-height: 1.55;
}

.node__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.node__actions a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--panel-strong-text);
  text-decoration: none;
  font-size: 0.74rem;
  background: var(--action-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    inset 0 1px 0 var(--panel-border),
    0 10px 20px rgba(128, 146, 172, 0.08);
}

.node--active {
  width: var(--panel-width);
  height: var(--panel-height);
  border-radius: 26px;
  border-color: var(--panel-border);
  background:
    linear-gradient(145deg, var(--glass-highlight-soft) 0%, transparent 38%, var(--glass-reflection) 100%),
    linear-gradient(180deg, var(--panel-surface-top), var(--panel-surface-bottom)),
    var(--panel-strong);
  box-shadow:
    inset 0 1px 0 var(--panel-border),
    inset 0 -16px 26px rgba(173, 194, 220, 0.08),
    0 24px 56px var(--panel-shadow),
    0 0 0 1px var(--glass-outline);
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  z-index: 12;
}

.node--active .node__glow,
.node--active .node__label {
  opacity: 0;
  transform: translate(-50%, -58%);
}

.node--active .node__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.node[data-node-id="rentals"].node--active {
  width: min(440px, 86vw);
  height: 364px;
}

.node[data-node-id="rentals"] .node__panel {
  gap: 10px;
}

.node[data-node-id="rentals"] .node__title {
  font-size: 1.95rem;
}

.node[data-node-id="rentals"] .node__summary {
  font-size: 0.78rem;
  line-height: 1.58;
}

.node[data-node-id="rentals"] .node__actions {
  margin-top: 0;
}

.node[data-node-id="rentals"] .node__actions a {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.68rem;
}

.node--ambient {
  width: 34px;
  height: 34px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.7), rgba(219, 231, 244, 0.16) 40%, transparent 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 8px 18px rgba(134, 145, 160, 0.08);
}

.node--ambient .node__label,
.node--ambient .node__panel {
  display: none;
}

@media (max-width: 900px) {
  :root {
    --panel-width: min(86vw, 340px);
    --panel-height: 280px;
  }

  .node[data-node-id="rentals"].node--active {
    width: min(90vw, 360px);
    height: 392px;
  }

  .node__compact-strip,
  .node__compact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .node[data-node-id="ui-home"] {
    width: 96px;
    height: 46px;
    border-radius: 17px;
  }

  .node[data-node-id="ui-home"] .node__label {
    font-size: 0.48rem;
    letter-spacing: 0.16em;
  }

  .node[data-node-id="ui-home"] .node__utility-ornament {
    inset: 5px 6px 6px;
    border-radius: 12px;
  }

  .node[data-node-id="ui-mute"] .node__utility-ornament {
    inset: 5px 6px 6px;
  }

  .node[data-node-id="ui-effects"] .node__utility-ornament {
    inset: 5px 6px 6px;
  }

  .node[data-node-id="ui-shape"] .node__utility-ornament {
    inset: 5px 6px 6px;
  }

  .node[data-node-id="ui-weather"] {
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }

  .node[data-node-id="ui-weather"] .node__label {
    bottom: 7px;
    font-size: 0.54rem;
    letter-spacing: 0.06em;
  }

  .node[data-node-id="ui-weather"] .node__utility-ornament {
    inset: 6px 6px 17px;
  }

  .node[data-node-id="ui-weather"].node--active {
    width: min(332px, 84vw);
    height: 324px;
  }

  .node[data-node-id="ui-theme"] .node__utility-ornament {
    inset: 5px 6px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .node,
  .node__label,
  .node__panel,
  .node__glow,
  .node__utility-ornament,
  .node__utility-ornament::before,
  .node__utility-ornament::after {
    transition: none;
    animation: none;
  }

  .app-shell::before {
    animation: none;
  }
}