.disco-layer { position: fixed; inset: 0; z-index: 1200; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at 15% 0%, hsl(var(--disco-hue) 85% 65% / .18), transparent 55%); }
.disco-dismiss { position: absolute; right: 16px; top: max(16px, env(safe-area-inset-top)); pointer-events: auto; border: 1px solid #ddd; border-radius: 24px; background: white; color: #26342e; padding: 10px 16px; font: inherit; box-shadow: 0 4px 20px #0002; }
.disco-pendulum { position: absolute; inset: 0; }
.disco-pendulum[hidden] { display: none; }
.disco-rope { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.disco-rope-shadow { stroke: #222c3d; stroke-width: 2.8; }
.disco-rope-light { stroke: #d4dce9; stroke-width: 1; }
.disco-ball { display: block; position: absolute; top: 0; left: 0; width: 120px; height: 120px; padding: 0; border: 1px solid #8996a6; border-radius: 50%; overflow: hidden; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; background: #30394b; box-shadow: 0 12px 18px #1118, 0 0 28px hsl(var(--disco-hue) 85% 65% / .45); will-change: transform; }
.disco-mirrors, .disco-glass { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.disco-mirrors svg { display: block; width: 100%; height: 100%; }
.disco-glass { background: radial-gradient(ellipse at 28% 22%, #fff 0%, #ffffffa0 2%, transparent 13%), radial-gradient(ellipse at 70% 70%, hsl(var(--disco-hue) 80% 60% / .4), transparent 45%); box-shadow: inset -10px -8px 16px #03091688, inset 3px 3px 7px #fff7; }
.disco-ball:active { cursor: grabbing; }
.disco-ball:focus-visible { outline: 4px solid #894bdd; outline-offset: 4px; }
.disco-dismiss { z-index: 2; }