html,
body {
  background: #000;
}

body.home,
body.blog {
  background: #000;
}

.gg-home-puzzle-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  background: #000;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  font-family: "Funnel Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.gg-home-puzzle-stage {
  --gg-puzzle-ratio: 2.1223;
  --gg-stage-safe-space: 118px;
  --gg-puzzle-width: min(
    92vw,
    1120px,
    calc((100svh - var(--gg-stage-safe-space)) * var(--gg-puzzle-ratio))
  );

  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

body.admin-bar .gg-home-puzzle-page,
body.admin-bar .gg-home-puzzle-stage {
  min-height: calc(100vh - 32px);
  min-height: calc(100svh - 32px);
}

body.admin-bar .gg-home-puzzle-stage {
  --gg-stage-safe-space: 150px;
}

.gg-home-puzzle-shell {
  position: relative;
  z-index: 5;
  display: block;
  width: var(--gg-puzzle-width);
  max-width: var(--gg-puzzle-width);
  margin: 0 auto;
}

.gg-home-puzzle-svg {
  position: relative;
  z-index: 5;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  font-family: "Funnel Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.gg-home-puzzle-bg-title {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50%;
  width: var(--gg-puzzle-width);
  max-width: var(--gg-puzzle-width);
  height: auto;
  aspect-ratio: 1180 / 556;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  mix-blend-mode: normal;
  container-type: inline-size;
  transition:
    opacity 450ms ease,
    filter 450ms ease;
}

.gg-home-puzzle-title-lockup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: translateY(-20%);
  font-family: "Funnel Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.gg-home-puzzle-title-kicker {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.15em;
  font-size: clamp(13px, 1.4vw, 20px);
  font-size: clamp(12px, 1.55cqw, 20px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  opacity: 0.92;
  transition:
    opacity 450ms ease,
    filter 450ms ease;
}

.gg-home-puzzle-title-main {
  margin: 0;
  font-size: clamp(64px, 8.9vw, 132px);
  font-size: clamp(54px, 10.8cqw, 124px);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.055em;
  color: #fff;
  text-align: center;
  text-transform: none;
  opacity: 0.92;
  transition:
    opacity 450ms ease,
    filter 450ms ease;
}

.gg-home-puzzle-page.is-piece-active .gg-home-puzzle-bg-title {
  opacity: 1;
  filter: blur(4px);
}

.gg-home-puzzle-page.is-piece-active .gg-home-puzzle-title-main,
.gg-home-puzzle-page.is-piece-active .gg-home-puzzle-title-kicker {
  opacity: 0.16;
}

.gg-home-puzzle-page:not(.is-piece-active) .gg-home-puzzle-bg-title {
  opacity: 1;
  filter: blur(0);
}

.gg-home-puzzle-page:not(.is-piece-active) .gg-home-puzzle-title-main,
.gg-home-puzzle-page:not(.is-piece-active) .gg-home-puzzle-title-kicker {
  opacity: 0.92;
  filter: blur(0);
}

.gg-home-puzzle-link {
  cursor: pointer;
  outline: none;
  pointer-events: visiblePainted;
}

.gg-home-puzzle-link,
.gg-home-puzzle-link * {
  transform-box: fill-box;
  transform-origin: center;
}

.gg-home-puzzle-link * {
  pointer-events: visiblePainted;
}

.gg-home-puzzle-piece-base {
  fill: #1c1c1c;
  stroke: none;
  filter: url("#gg-piece-3d");
}

.gg-home-puzzle-piece-ambient {
  fill: none;
  stroke: url("#gg-rainbow-ambient");
  stroke-width: 1;
  opacity: 0.13;
  filter: url("#gg-crack-blur");
}

.gg-home-puzzle-piece-seam {
  fill: none;
  stroke: rgba(255, 255, 255, 0.02);
  stroke-width: 0.75;
}

.gg-home-puzzle-piece-inner-glow,
.gg-home-puzzle-piece-border-glow,
.gg-home-puzzle-piece-crisp-stroke {
  opacity: 0;
  transition: opacity 360ms ease;
}

.gg-home-puzzle-piece-inner-glow {
  fill: none;
  stroke: url("#gg-rainbow-hover");
  stroke-width: 55;
  filter: url("#gg-inner-glow-blur");
}

.gg-home-puzzle-piece-border-glow {
  fill: none;
  stroke: url("#gg-rainbow-hover");
  stroke-width: 2;
  filter: url("#gg-glow");
}

.gg-home-puzzle-piece-crisp-stroke {
  fill: none;
  stroke: url("#gg-rainbow-hover");
  stroke-width: 1;
}

.gg-home-puzzle-link:hover .gg-home-puzzle-piece-base,
.gg-home-puzzle-link.is-active .gg-home-puzzle-piece-base,
.gg-home-puzzle-link:focus-visible .gg-home-puzzle-piece-base {
  fill: #050505;
  stroke: none;
}

.gg-home-puzzle-link:hover .gg-home-puzzle-piece-border-glow,
.gg-home-puzzle-link:hover .gg-home-puzzle-piece-crisp-stroke,
.gg-home-puzzle-link.is-active .gg-home-puzzle-piece-border-glow,
.gg-home-puzzle-link.is-active .gg-home-puzzle-piece-crisp-stroke,
.gg-home-puzzle-link:focus-visible .gg-home-puzzle-piece-border-glow,
.gg-home-puzzle-link:focus-visible .gg-home-puzzle-piece-crisp-stroke {
  opacity: 1;
}

.gg-home-puzzle-link:hover .gg-home-puzzle-piece-inner-glow,
.gg-home-puzzle-link.is-active .gg-home-puzzle-piece-inner-glow,
.gg-home-puzzle-link:focus-visible .gg-home-puzzle-piece-inner-glow {
  opacity: 0.5;
}

.gg-home-puzzle-link:not(:hover):not(.is-active):not(:focus-visible) .gg-home-puzzle-piece-inner-glow,
.gg-home-puzzle-link:not(:hover):not(.is-active):not(:focus-visible) .gg-home-puzzle-piece-border-glow,
.gg-home-puzzle-link:not(:hover):not(.is-active):not(:focus-visible) .gg-home-puzzle-piece-crisp-stroke {
  opacity: 0;
}

.gg-home-puzzle-text-wrap {
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 360ms ease,
    transform 360ms ease;
}

.gg-home-puzzle-page:not(.is-piece-active) .gg-home-puzzle-text-wrap {
  opacity: 0;
}

.gg-home-puzzle-link:hover .gg-home-puzzle-text-wrap,
.gg-home-puzzle-link.is-active .gg-home-puzzle-text-wrap,
.gg-home-puzzle-link:focus-visible .gg-home-puzzle-text-wrap {
  opacity: 1;
  transform: translateY(0);
}

.gg-home-puzzle-svg-text {
  font-family: "Funnel Display", system-ui, sans-serif;
  fill: #ffffff;
  opacity: 1;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: -0.8px;
}

.gg-home-puzzle-hint,
.gg-home-puzzle-mobile-hint {
  position: relative;
  z-index: 6;
  font-family: "Funnel Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255, 255, 255);
  text-align: center;
  opacity: 0.9;
}

.gg-home-puzzle-hint {
  margin: 20px 0 0;
  font-size: 11px;
  letter-spacing: 0.25em;
}

.gg-home-puzzle-mobile-hint {
  display: none;
  margin: 10px 0 0;
  font-size: clamp(7px, 2vw, 9px);
  line-height: 1.25;
  letter-spacing: 0.14em;
}

@media (max-width: 1180px) and (min-width: 769px) {
  .gg-home-puzzle-stage {
    --gg-stage-safe-space: 108px;
    --gg-puzzle-width: min(
      94vw,
      1040px,
      calc((100svh - var(--gg-stage-safe-space)) * var(--gg-puzzle-ratio))
    );
  }

  body.admin-bar .gg-home-puzzle-stage {
    --gg-stage-safe-space: 140px;
  }

  .gg-home-puzzle-title-lockup {
    transform: translateY(-20%);
  }

  .gg-home-puzzle-hint {
    margin-top: 16px;
  }
}

@media (max-height: 640px) and (min-width: 769px) {
  .gg-home-puzzle-stage {
    --gg-stage-safe-space: 92px;
    --gg-puzzle-width: min(
      88vw,
      1040px,
      calc((100svh - var(--gg-stage-safe-space)) * var(--gg-puzzle-ratio))
    );
  }

  .gg-home-puzzle-hint {
    margin-top: 12px;
  }
}

.gg-home-puzzle-mobile-shell {
  display: none;
}

@media (max-width: 768px) {
  .gg-home-puzzle-page {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
  }

  .gg-home-puzzle-stage {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    overflow: hidden;
  }

  body.admin-bar .gg-home-puzzle-page,
  body.admin-bar .gg-home-puzzle-stage {
    height: calc(100vh - 46px);
    height: calc(100svh - 46px);
    min-height: calc(100vh - 46px);
    min-height: calc(100svh - 46px);
  }

  .gg-home-puzzle-stage > .gg-home-puzzle-bg-title,
  .gg-home-puzzle-shell {
    display: none;
  }

  .gg-home-puzzle-mobile-shell {
    --gg-mobile-puzzle-ratio: 0.6068;
    --gg-mobile-reserved-space: 34px;

    position: relative;
    display: block;
    width: min(
      98vw,
      510px,
      calc((100svh - var(--gg-mobile-reserved-space) - 20px) * var(--gg-mobile-puzzle-ratio))
    );
    margin: 0 auto;
    overflow: visible;
    contain: layout;
  }

  body.admin-bar .gg-home-puzzle-mobile-shell {
    width: min(
      98vw,
      510px,
      calc((100svh - 46px - var(--gg-mobile-reserved-space) - 20px) * var(--gg-mobile-puzzle-ratio))
    );
  }

  .gg-home-puzzle-mobile-svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    overflow: visible;
    transform: none;
    transform-origin: center center;
  }

  .gg-home-puzzle-mobile-shell .gg-home-puzzle-mobile-bg-title {
    position: absolute;
    inset: 0;
    z-index: 20;
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    left: auto;
    top: auto;
    transform: none;
    pointer-events: none;
    container-type: normal;
  }

  .gg-home-puzzle-mobile-bg-title .gg-home-puzzle-title-lockup {
    width: 84%;
    max-width: 84%;
    transform: translateY(-20%);
  }

  .gg-home-puzzle-mobile-bg-title .gg-home-puzzle-title-main {
    font-size: clamp(30px, 10.5vw, 52px);
    line-height: 0.94;
  }

  .gg-home-puzzle-mobile-bg-title .gg-home-puzzle-title-kicker {
    font-size: clamp(8px, 1.9vw, 12px);
    margin-bottom: 0.28em;
  }

  .gg-home-puzzle-mobile-svg .gg-home-puzzle-link,
  .gg-home-puzzle-mobile-svg .gg-home-puzzle-link > g,
  .gg-home-puzzle-mobile-svg clipPath g,
  .gg-home-puzzle-mobile-svg clippath g {
    transform-box: view-box;
    transform-origin: 0 0;
  }

  .gg-home-puzzle-mobile-svg .gg-home-puzzle-link * {
    transform-origin: 0 0;
  }

  .gg-home-puzzle-mobile-svg .gg-home-puzzle-text-wrap,
  .gg-home-puzzle-mobile-svg .gg-home-puzzle-text-wrap * {
    transform-box: fill-box;
    transform-origin: center;
  }

  .gg-home-puzzle-mobile-svg .gg-home-puzzle-piece-base {
    filter: url("#gg-mobile-piece-3d");
  }

  .gg-home-puzzle-mobile-svg .gg-home-puzzle-piece-ambient {
    stroke: url("#gg-mobile-rainbow-ambient");
    filter: url("#gg-mobile-crack-blur");
    stroke-width: 1;
    opacity: 0.13;
  }

  .gg-home-puzzle-mobile-svg .gg-home-puzzle-piece-inner-glow {
    stroke: url("#gg-mobile-rainbow-hover");
    stroke-width: 55;
    filter: url("#gg-mobile-inner-glow-blur");
  }

  .gg-home-puzzle-mobile-svg .gg-home-puzzle-piece-border-glow {
    stroke: url("#gg-mobile-rainbow-hover");
    stroke-width: 2;
    filter: url("#gg-mobile-glow");
  }

  .gg-home-puzzle-mobile-svg .gg-home-puzzle-piece-crisp-stroke {
    stroke: url("#gg-mobile-rainbow-hover");
    stroke-width: 1;
  }

  .gg-home-puzzle-mobile-svg-text {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.55px;
  }

  .gg-home-puzzle-mobile-svg .gg-home-puzzle-svg-text,
  .gg-home-puzzle-mobile-svg .gg-home-puzzle-svg-text tspan {
    transform: none;
    transform-box: fill-box;
    transform-origin: center center;
  }

  .gg-home-puzzle-mobile-link {
    touch-action: manipulation;
  }

  .gg-home-puzzle-mobile-shell,
  .gg-home-puzzle-mobile-shell *,
  .gg-home-puzzle-mobile-svg,
  .gg-home-puzzle-mobile-svg * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
  }

  .gg-home-puzzle-mobile-link,
  .gg-home-puzzle-mobile-link:focus,
  .gg-home-puzzle-mobile-link:focus-visible,
  .gg-home-puzzle-mobile-link:active {
    outline: none;
  }

  .gg-home-puzzle-mobile-svg text,
  .gg-home-puzzle-mobile-svg tspan {
    user-select: none;
    pointer-events: none;
  }

  .gg-home-puzzle-mobile-link:not(.is-active) .gg-home-puzzle-piece-inner-glow,
  .gg-home-puzzle-mobile-link:not(.is-active) .gg-home-puzzle-piece-border-glow,
  .gg-home-puzzle-mobile-link:not(.is-active) .gg-home-puzzle-piece-crisp-stroke,
  .gg-home-puzzle-mobile-link:not(.is-active) .gg-home-puzzle-text-wrap {
    opacity: 0 !important;
  }

  .gg-home-puzzle-mobile-link.is-active .gg-home-puzzle-piece-border-glow,
  .gg-home-puzzle-mobile-link.is-active .gg-home-puzzle-piece-crisp-stroke {
    opacity: 1 !important;
  }

  .gg-home-puzzle-mobile-link.is-active .gg-home-puzzle-piece-inner-glow {
    opacity: 0.156 !important;
  }

  .gg-home-puzzle-mobile-link.is-active .gg-home-puzzle-text-wrap {
    opacity: 1 !important;
    transform: translateY(0);
  }

  .gg-home-puzzle-page.is-piece-active .gg-home-puzzle-mobile-bg-title {
    opacity: 1;
    filter: blur(4px);
  }

  .gg-home-puzzle-page.is-piece-active .gg-home-puzzle-mobile-bg-title .gg-home-puzzle-title-main,
  .gg-home-puzzle-page.is-piece-active .gg-home-puzzle-mobile-bg-title .gg-home-puzzle-title-kicker {
    opacity: 0.16;
  }

  .gg-home-puzzle-page:not(.is-piece-active) .gg-home-puzzle-mobile-bg-title {
    opacity: 1;
    filter: blur(0);
  }

  .gg-home-puzzle-page:not(.is-piece-active) .gg-home-puzzle-mobile-bg-title .gg-home-puzzle-title-main,
  .gg-home-puzzle-page:not(.is-piece-active) .gg-home-puzzle-mobile-bg-title .gg-home-puzzle-title-kicker {
    opacity: 0.92;
    filter: blur(0);
  }

  .gg-home-puzzle-mobile-bg-title,
  .gg-home-puzzle-mobile-bg-title .gg-home-puzzle-title-main,
  .gg-home-puzzle-mobile-bg-title .gg-home-puzzle-title-kicker {
    will-change: opacity, filter;
  }

  .gg-home-puzzle-mobile-svg .gg-home-puzzle-piece-inner-glow,
  .gg-home-puzzle-mobile-svg .gg-home-puzzle-piece-border-glow,
  .gg-home-puzzle-mobile-svg .gg-home-puzzle-piece-crisp-stroke,
  .gg-home-puzzle-mobile-svg .gg-home-puzzle-text-wrap {
    will-change: opacity, transform;
  }

  .gg-home-puzzle-hint {
    display: none;
  }

  .gg-home-puzzle-mobile-hint {
    display: block;
  }
}

@media (max-width: 430px) {
  .gg-home-puzzle-mobile-shell {
    width: min(
      98vw,
      470px,
      calc((100svh - 34px - 18px) * 0.6068)
    );
  }

  body.admin-bar .gg-home-puzzle-mobile-shell {
    width: min(
      98vw,
      470px,
      calc((100svh - 46px - 34px - 18px) * 0.6068)
    );
  }

  .gg-home-puzzle-mobile-svg-text {
    font-size: 22px;
  }

  .gg-home-puzzle-mobile-bg-title .gg-home-puzzle-title-lockup {
    width: 82%;
    max-width: 82%;
  }

  .gg-home-puzzle-mobile-bg-title .gg-home-puzzle-title-main {
    font-size: clamp(28px, 10vw, 44px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gg-home-puzzle-bg-title,
  .gg-home-puzzle-title-main,
  .gg-home-puzzle-title-kicker,
  .gg-home-puzzle-piece-inner-glow,
  .gg-home-puzzle-piece-border-glow,
  .gg-home-puzzle-piece-crisp-stroke,
  .gg-home-puzzle-text-wrap {
    transition: none;
  }

  .gg-home-puzzle-bg-title {
    filter: none;
  }
}

@media (max-width: 781px) {
  .gg-home-puzzle-mobile-link .gg-home-puzzle-piece-base {
    fill: #151515 !important;
  }
}

.gg-home-puzzle-stage {

  --gg-about-align-width: min(
    85.8vw,
    1045px,
    calc((100svh - var(--gg-stage-safe-space)) * 1.9784)
  );

  position: relative !important;
}

.gg-home-about-link {
  position: absolute !important;

  top: 42px !important;
  left: calc(50% + (var(--gg-about-align-width) / 2)) !important;
  right: auto !important;
  transform: translateX(-100%) !important;

  z-index: 60 !important;

  display: inline-block !important;
  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: right !important;
  white-space: nowrap !important;

  font-family: "Funnel Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 500 !important;

  color: #ffffff !important;
  text-decoration: none !important;
}

.gg-home-about-link:hover,
.gg-home-about-link:focus-visible {
  color: #ffdd00 !important;
  text-decoration: underline !important;
  text-decoration-color: #ff7700 !important;
  text-underline-offset: 4px;
}

@media (max-width: 1180px) and (min-width: 769px) {
  .gg-home-about-link {
    top: 34px !important;
  }
}

@media (max-width: 768px) {
  .gg-home-puzzle-stage {
    --gg-about-align-width: min(
      78.2vw,
      407px,
      calc((100svh - 34px - 20px) * 0.4841)
    );
  }

  body.admin-bar .gg-home-puzzle-stage {
    --gg-about-align-width: min(
      78.2vw,
      407px,
      calc((100svh - 46px - 34px - 20px) * 0.4841)
    );
  }

  .gg-home-about-link {
    top: 14px !important;
    left: calc(50% + (var(--gg-about-align-width) / 2)) !important;
    right: auto !important;
    transform: translateX(-100%) !important;

    font-size: 13px !important;
  }
}

@media (max-width: 430px) {
  .gg-home-puzzle-stage {
    --gg-about-align-width: min(
      78.2vw,
      375px,
      calc((100svh - 34px - 18px) * 0.4841)
    );
  }

  body.admin-bar .gg-home-puzzle-stage {
    --gg-about-align-width: min(
      78.2vw,
      375px,
      calc((100svh - 46px - 34px - 18px) * 0.4841)
    );
  }
}

@media (max-width: 768px) {
  .gg-home-puzzle-mobile-svg .gg-home-puzzle-piece-seam {
    stroke: rgba(255, 221, 0, 0.14) !important;
    stroke-width: 1.1 !important;
    opacity: 1 !important;
  }
}


@property --gg-home-puzzle-frame-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes gg-home-puzzle-frame-flow {
  0% {
    --gg-home-puzzle-frame-angle: 0deg;
  }

  100% {
    --gg-home-puzzle-frame-angle: 360deg;
  }
}

/* =========================
   DESKTOP PUZZLE FRAME + INTRO TEXT
========================= */

@media (min-width: 769px) {
  .gg-home-puzzle-stage {
    --gg-stage-safe-space: 186px !important;
  }

  body.admin-bar .gg-home-puzzle-stage {
    --gg-stage-safe-space: 218px !important;
  }

  .gg-home-puzzle-shell {
    position: relative !important;
    z-index: 5 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: var(--gg-puzzle-width) !important;
    max-width: var(--gg-puzzle-width) !important;
    margin: 0 auto !important;

    gap: 24px !important;
  }

  .gg-home-puzzle-desktop-frame {
    position: relative !important;
    z-index: 5 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }

  .gg-home-puzzle-desktop-frame::before {
    content: "";
    position: absolute !important;

    /*
      Desktop SVG viewBox is -40 -40 1180 556.
      Visible puzzle area is approx. 1100 x 476.
      These insets align the animated border with the actual puzzle,
      not the full SVG padding.
    */
    left: 3.39% !important;
    right: 3.39% !important;
    top: 7.19% !important;
    bottom: 7.19% !important;

    z-index: 14 !important;

    padding: 1px !important;
    box-sizing: border-box !important;

    background: conic-gradient(
      from var(--gg-home-puzzle-frame-angle),
      var(--gg-accent-red) 0deg,
      #ff3b00 35deg,
      var(--gg-accent-orange) 90deg,
      #ffb000 145deg,
      var(--gg-accent-yellow) 180deg,
      #ffb000 215deg,
      var(--gg-accent-orange) 270deg,
      #ff3b00 325deg,
      var(--gg-accent-red) 360deg
    ) !important;

    animation: gg-home-puzzle-frame-flow 4s linear infinite !important;

    opacity: 1 !important;
    visibility: visible !important;

    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0) border-box;
    -webkit-mask-composite: xor;

    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0) border-box;
    mask-composite: exclude;

    pointer-events: none !important;
  }

  .gg-home-puzzle-desktop-frame::after {
    content: "";
    position: absolute !important;

    left: 3.39% !important;
    right: 3.39% !important;
    top: 7.19% !important;
    bottom: 7.19% !important;

    z-index: 13 !important;

    box-sizing: border-box !important;

    border: 2px solid rgba(255, 128, 0, 0.78) !important;

    box-shadow:
      0 0 10px rgba(255, 221, 0, 0.34),
      0 0 22px rgba(255, 119, 0, 0.38),
      0 0 38px rgba(255, 17, 0, 0.24) !important;

    filter: blur(1.5px) !important;
    opacity: 0.9 !important;

    pointer-events: none !important;
  }

  .gg-home-puzzle-desktop-frame > .gg-home-puzzle-bg-title {
    position: absolute !important;
    z-index: 20 !important;

    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;

    aspect-ratio: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transform: none !important;
    pointer-events: none !important;
  }

  .gg-home-puzzle-desktop-frame .gg-home-puzzle-title-lockup {
    transform: translateY(-10%) !important;
  }

  .gg-home-puzzle-desktop-frame .gg-home-puzzle-svg {
    position: relative !important;
    z-index: 5 !important;

    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;
  }

  .gg-home-puzzle-intro-box {
    position: relative !important;
    z-index: 8 !important;

    display: block !important;

    width: 93.2% !important;
    max-width: 93.2% !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    border: none !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
  }

  .gg-home-puzzle-intro-box::before {
    display: none !important;
    content: none !important;
  }

  .gg-home-puzzle-intro-box p {
    position: relative !important;
    z-index: 1 !important;

    max-width: 920px !important;
    margin: 0 auto !important;

    font-family: "Funnel Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: clamp(15px, 1.22vw, 18px) !important;
    line-height: 1.42 !important;
    font-weight: 400 !important;
    letter-spacing: -0.008em !important;
    text-align: center !important;

    color: rgba(242, 240, 234, 0.92) !important;
  }

  .gg-home-puzzle-intro-box strong {
    font-weight: 700 !important;
    color: #ffffff !important;
  }

  .gg-home-puzzle-hint {
    display: none !important;
  }
}

@media (max-width: 1180px) and (min-width: 769px) {
  .gg-home-puzzle-stage {
    --gg-stage-safe-space: 174px !important;
  }

  body.admin-bar .gg-home-puzzle-stage {
    --gg-stage-safe-space: 206px !important;
  }

  .gg-home-puzzle-shell {
    gap: 22px !important;
  }

  .gg-home-puzzle-intro-box {
    width: 93.2% !important;
    max-width: 93.2% !important;
  }

  .gg-home-puzzle-intro-box p {
    font-size: 15px !important;
    line-height: 1.38 !important;
  }
}

@media (max-height: 640px) and (min-width: 769px) {
  .gg-home-puzzle-stage {
    --gg-stage-safe-space: 150px !important;
  }

  .gg-home-puzzle-shell {
    gap: 16px !important;
  }

  .gg-home-puzzle-intro-box {
    width: 93.2% !important;
    max-width: 93.2% !important;
  }

  .gg-home-puzzle-intro-box p {
    font-size: 14px !important;
    line-height: 1.34 !important;
  }
}

/* =========================
   MOBILE PUZZLE FRAME
========================= */

@media (max-width: 768px) {
  .gg-home-puzzle-intro-box,
  .gg-home-puzzle-desktop-frame {
    display: none !important;
  }

  .gg-home-puzzle-mobile-frame {
    position: relative !important;
    z-index: 5 !important;

    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    overflow: visible !important;
  }

  .gg-home-puzzle-mobile-frame::before {
    content: "";
    position: absolute !important;

    /*
      Mobile SVG viewBox is -80 0 716 1180.
      Visible puzzle area is approx. x -7.6 to 563.6 and y 40 to 1140.
      These insets align the frame with the actual visible puzzle.
    */
    left: 10.11% !important;
    right: 10.11% !important;
    top: 3.39% !important;
    bottom: 3.39% !important;

    z-index: 14 !important;

    padding: 1px !important;
    box-sizing: border-box !important;

    background: conic-gradient(
      from var(--gg-home-puzzle-frame-angle),
      var(--gg-accent-red) 0deg,
      #ff3b00 35deg,
      var(--gg-accent-orange) 90deg,
      #ffb000 145deg,
      var(--gg-accent-yellow) 180deg,
      #ffb000 215deg,
      var(--gg-accent-orange) 270deg,
      #ff3b00 325deg,
      var(--gg-accent-red) 360deg
    ) !important;

    animation: gg-home-puzzle-frame-flow 4s linear infinite !important;

    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0) border-box;
    -webkit-mask-composite: xor;

    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0) border-box;
    mask-composite: exclude;

    pointer-events: none !important;
  }

  .gg-home-puzzle-mobile-frame::after {
    content: "";
    position: absolute !important;

    left: 10.11% !important;
    right: 10.11% !important;
    top: 3.39% !important;
    bottom: 3.39% !important;

    z-index: 13 !important;

    box-sizing: border-box !important;

    border: 2px solid rgba(255, 128, 0, 0.78) !important;

    box-shadow:
      0 0 10px rgba(255, 221, 0, 0.34),
      0 0 22px rgba(255, 119, 0, 0.38),
      0 0 38px rgba(255, 17, 0, 0.24) !important;

    filter: blur(1.5px) !important;
    opacity: 0.9 !important;

    pointer-events: none !important;
  }

  .gg-home-puzzle-mobile-frame .gg-home-puzzle-mobile-bg-title {
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    aspect-ratio: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    left: auto !important;
    top: auto !important;
    transform: none !important;

    pointer-events: none !important;
    container-type: normal !important;
  }

  .gg-home-puzzle-mobile-frame .gg-home-puzzle-mobile-svg {
    position: relative !important;
    z-index: 5 !important;
  }

  .gg-home-puzzle-mobile-hint {
    display: none !important;
  }
}

/* =========================
   MOBILE INTRO LIGHTBOX
========================= */

.gg-home-intro-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 22px !important;
  box-sizing: border-box !important;

  background: rgba(0, 0, 0, 0.68) !important;
  backdrop-filter: blur(4px) !important;

  opacity: 1 !important;
  visibility: visible !important;

  transition:
    opacity 280ms ease,
    visibility 280ms ease !important;
}

.gg-home-intro-lightbox.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.gg-home-intro-lightbox-card {
  position: relative !important;
  z-index: 1 !important;

  width: min(92vw, 520px) !important;
  max-width: 520px !important;

  padding: 34px 30px 24px !important;
  box-sizing: border-box !important;

  background: #000000 !important;
  color: #ffffff !important;

  border: none !important;
  border-radius: 0 !important;

  font-family: "Funnel Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;

  box-shadow:
    0 0 28px rgba(255, 119, 0, 0.18),
    0 0 58px rgba(255, 17, 0, 0.12) !important;
}

.gg-home-intro-lightbox-card::before {
  content: "";
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  padding: 1px !important;
  box-sizing: border-box !important;

  background: conic-gradient(
    from var(--gg-home-puzzle-frame-angle),
    var(--gg-accent-red) 0deg,
    #ff3b00 35deg,
    var(--gg-accent-orange) 90deg,
    #ffb000 145deg,
    var(--gg-accent-yellow) 180deg,
    #ffb000 215deg,
    var(--gg-accent-orange) 270deg,
    #ff3b00 325deg,
    var(--gg-accent-red) 360deg
  ) !important;

  animation: gg-home-puzzle-frame-flow 4s linear infinite !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) border-box;
  mask-composite: exclude;

  pointer-events: none !important;
}

.gg-home-intro-lightbox-card::after {
  content: "";
  position: absolute !important;
  inset: -2px !important;
  z-index: -1 !important;

  border: 2px solid rgba(255, 128, 0, 0.48) !important;

  box-shadow:
    0 0 12px rgba(255, 221, 0, 0.28),
    0 0 28px rgba(255, 119, 0, 0.30),
    0 0 52px rgba(255, 17, 0, 0.20) !important;

  filter: blur(1.4px) !important;
  pointer-events: none !important;
}

.gg-home-intro-lightbox-close {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  z-index: 2 !important;

  width: 28px !important;
  height: 28px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  border: none !important;
  background: transparent !important;

  font-family: "Funnel Display", system-ui, sans-serif !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 300 !important;

  color: rgba(255, 255, 255, 0.86) !important;
  cursor: pointer !important;
}

.gg-home-intro-lightbox-close:hover,
.gg-home-intro-lightbox-close:focus-visible {
  color: #ffdd00 !important;
  outline: none !important;
}

.gg-home-intro-lightbox-text {
  position: relative !important;
  z-index: 1 !important;

  margin: 0 auto !important;

  max-width: 440px !important;

  font-size: clamp(16px, 3.7vw, 20px) !important;
  line-height: 1.38 !important;
  font-weight: 400 !important;
  letter-spacing: -0.008em !important;
  text-align: center !important;
  text-transform: none !important;

  color: rgba(242, 240, 234, 0.94) !important;
}

.gg-home-intro-lightbox-text strong {
  font-weight: 700 !important;
  color: #ffffff !important;
}

.gg-home-intro-lightbox-counter {
  position: relative !important;
  z-index: 1 !important;

  margin: 18px auto 0 !important;

  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-align: center !important;

  color: rgba(255, 221, 0, 0.82) !important;
}

.gg-home-intro-lightbox-count {
  color: #ffffff !important;
}

@media (min-width: 769px) {
  .gg-home-intro-lightbox {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .gg-home-intro-lightbox {
    padding: 18px !important;
  }

  .gg-home-intro-lightbox-card {
    width: min(92vw, 390px) !important;
    padding: 32px 22px 22px !important;
  }

  .gg-home-intro-lightbox-text {
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.36 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gg-home-puzzle-desktop-frame::before,
  .gg-home-puzzle-mobile-frame::before,
  .gg-home-intro-lightbox-card::before {
    animation: none !important;
  }
}


@media (max-width: 768px) {
  .gg-home-puzzle-mobile-hint {
    display: block !important;

    max-width: 92% !important;
    margin: 12px auto 0 !important;

    font-family: "Funnel Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: clamp(11px, 2.7vw, 13px) !important;
    line-height: 1.25 !important;
    font-weight: 650 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: center !important;

    color: rgba(255, 255, 255, 0.92) !important;
    opacity: 1 !important;
  }
}

@media (max-width: 430px) {
  .gg-home-puzzle-mobile-hint {
    margin-top: 10px !important;
    font-size: clamp(10.5px, 2.6vw, 12px) !important;
    letter-spacing: 0.07em !important;
  }
}