:root { color-scheme: dark; --art-accent: peachpuff; --art-muted: silver; --art-font: -apple-system, BlinkMacSystemFont, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; }
.orchestra { position: relative; width: 100%; height: 100%; isolation: isolate; user-select: none; }
.orchestra::before { content: ''; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--art-accent) 3%, transparent) 18%, color-mix(in srgb, var(--art-accent) 13%, transparent) 34%, color-mix(in srgb, var(--art-accent) 3%, transparent) 51%, transparent 70%); }
.orchestra::after { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 10% 18%; border: 1px solid color-mix(in srgb, var(--art-accent) 6%, transparent); border-radius: 50%; transform: rotate(-24deg); }
.orchestra > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.connections { color: var(--art-accent); }
.connection, .connection-glow { fill: none; stroke: currentColor; stroke-linecap: round; }
.connection-glow { stroke-width: 7; filter: blur(2px); }
.signal { fill: currentColor; filter: drop-shadow(0 0 2px color-mix(in srgb, var(--art-accent) 40%, transparent)); }
.labels text { fill: var(--art-muted); font: 400 .8125rem/1.3 var(--art-font); text-anchor: middle; }
.sculpture-pose { transform-box: fill-box; transform-origin: center; transform: perspective(650px) rotateX(var(--pitch, 0rad)) rotateY(var(--yaw, 0rad)); filter: brightness(var(--gleam, 1)); }
.orchestra[data-phase="settled"][data-motion-mode="interactive"] .sculpture[data-app="0"] image { animation: core-float 12s ease-in-out infinite; }
.orchestra[data-visible="false"] .sculpture image { animation-play-state: paused; }
@keyframes core-float { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-1.4px); } 75% { transform: translateY(1.4px); } }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .sculpture image { animation: none !important; } }
@media(max-width:400px) { .labels text { font-size: .75rem; } }