:root { color-scheme: dark; color: #eee; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #b7d9ff; outline-offset: 6px; }
#viewport { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
#stage { pointer-events: none; }
.hole { display: grid; place-items: center; touch-action: none; }
.image {
  display: grid;
  place-items: center;
  background-repeat: no-repeat;
  background-position: center;
}
.image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--image-edge);
  background-image: inherit;
  background-repeat: no-repeat;
  background-size: auto 100vh;
  background-position: var(--image-x) var(--image-y);
  opacity: .88;
  pointer-events: none;
}
.image > a {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: block;
  border-radius: 50%;
  pointer-events: auto;
}
.shadow { position: absolute; inset: 0; pointer-events: none; }
.work .caption {
  position: relative;
  z-index: 2;
  padding: 8px 9% 0;
  color: #bcbcbc;
  pointer-events: none;
}
.caption h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.25; }
.caption p { font-size: 12px; line-height: 1.4; }
.image { background-color: #08090b; }
.art-member, .art-steps {
  --image-edge: #000;
  background-image: url('/assets/event-title.png');
}
.art-event, .art-contact {
  --image-edge: #404143;
  background-image: url('/assets/event-logo.png');
}
.shadow {
  opacity: .55;
  mix-blend-mode: multiply;
  background-repeat: no-repeat !important;
}
.shadow { z-index: 10; }
#reset-scene {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  width: 48px;
  height: 48px;
  border: 1px solid #666;
  border-radius: 50%;
  background: #242424;
  color: #eee;
}
#reset-scene svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
dialog {
  width: min(90vw, 540px);
  max-height: 80vh;
  padding: 30px;
  border: 1px solid #666;
  border-radius: 16px;
  background: #232426;
  color: #eee;
  user-select: text;
}
dialog::backdrop { background: #000b; }
dialog h2 { font-size: 24px; margin: 0 0 24px; }
dialog p, dialog li, dialog dl { font-size: 16px; line-height: 1.8; }
dialog p { margin: 18px 0; }
dialog dd { margin: 0 0 16px; }
dialog button { background: #eee; color: #222; padding: 12px 22px; border: 0; }
.multiline { white-space: pre-wrap; }
#notice { font-size: 14px; background: #382726; padding: 16px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}