@font-face {
  font-family: Inter;
  src: url("/fonts/inter-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root { color-scheme: dark; background: #000; color: #f7f7f7; font-family: Inter, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #000; }
.scene { position: relative; width: 100%; height: 100svh; min-height: 420px; overflow: clip; isolation: isolate; }
.light-scene { z-index: 2; position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.light-scene path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gesture-halo { stroke-width: 5; opacity: .45; }
.gesture-core { stroke-width: 1.25; }
.gesture-sheen { stroke-width: 1.8; }
.video-position {
  position: absolute;
  z-index: 1;
  width: min(76.75vw, 1114px);
  aspect-ratio: 16 / 9;
  left: calc(50% - min(46.5vw, 675px));
  top: 47%;
  translate: 0 -50%;
  pointer-events: none;
}
.octopus-video, .poster { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.poster { position: absolute; inset: 0; }
.contact {
  z-index: 3;
  position: absolute;
  left: calc(50% + min(28vw, 400px));
  top: 48%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.contact-caption { margin: 0 0 14px; color: #a1a1a1; font-size: 12px; font-weight: 400; line-height: 18px; white-space: nowrap; }
.telegram {
  --arrival: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 24px;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 999px;
  background: linear-gradient(145deg, #171717, #070707 72%);
  color: #f5f5f5;
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 24px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07);
  -webkit-tap-highlight-color: transparent;
}
.telegram::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8px;
  border-radius: inherit;
  background: #2aabee;
  filter: blur(22px);
  opacity: calc(.06 + var(--arrival));
  transition: opacity 180ms ease;
  pointer-events: none;
}
.telegram-icon { flex: none; width: 22px; height: 22px; color: #2aabee; }
.telegram:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.telegram:focus-visible::before { opacity: .3; }
.telegram:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .telegram:hover { border-color: rgb(255 255 255 / .5); }
  .telegram:hover::before { opacity: .3; }
}
@media (max-width: 899px) {
  .video-position { width: 123.79vw; left: -6vw; top: 40%; }
  .contact { left: auto; right: 24px; top: 63%; transform: translateY(-50%); }
  .contact-caption { font-size: 11px; margin-bottom: 12px; }
  .telegram { min-height: 56px; padding: 0 22px; font-size: 16px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .telegram::before { transition: none; }
  .telegram:active { transform: none; }
}