.site-look-toggle {
  min-height: 44px;
  padding: 6px 10px;
  flex: none;
  border: 1px solid #b8bec5;
  background: #171c20;
  color: #f4f5f1;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.site-look-toggle:hover { border-color: #b8f34b; }
.site-look-toggle:focus-visible { outline: 2px solid #b8f34b; outline-offset: 3px; }
.site-look-toggle[aria-pressed="true"] {
  border-color: #b8f34b;
  background: #b8f34b;
  color: #101319;
  box-shadow: 0 0 16px #b8f34b55;
}
.contact-card > .site-look-toggle { display: block; margin: 0 0 18px auto; }
@media (max-width: 1080px) {
  .site-header > .site-look-toggle { margin-left: auto; }
}
@media (max-width: 360px) {
  .site-header > .site-look-toggle { padding-inline: 7px; }
  .site-header .site-menu-label { display: none; }
}
@media (1081px <= width <= 1180px) {
  .site-header { gap: 12px; }
  .site-header .site-nav { gap: 12px; }
}

[data-site-look="neon"] {
  --site-neon-lime: #b8f34b;
  --site-neon-orange: #ff641a;
  --site-neon-ink: #101319;
  --site-neon-panel: #171c20;
}
[data-site-look="neon"] .site-header {
  border-top-color: var(--site-neon-lime);
  box-shadow: 0 0 22px #b8f34b38, 0 14px 40px #0005;
}
[data-site-look="neon"] .midnight-backdrop::before {
  background:
    radial-gradient(ellipse at 16% 32%, #ff641a42, transparent 48%),
    radial-gradient(ellipse at 83% 31%, #b8f34b34, transparent 48%),
    radial-gradient(ellipse at 76% 86%, #ff641a28, transparent 44%);
  animation: none;
  will-change: auto;
}
[data-site-look="neon"] .midnight-pointer { display: none; }
[data-site-look="neon"] :is(.brand-hero, .home-pixelguide, .pixelguide-intro, .model-hero,
                            .model-overview, .clarity-hero, .story-hero, .customer-guide, .fave-connection)
                            :is(h1, h2) :is(.orange, .lime, em) {
  text-shadow: 0 0 .36em currentColor;
}
[data-site-look="neon"] :is(.site-contact, .button.primary, .contact-card .button.save) {
  box-shadow: 0 0 18px #ff641a55;
}
[data-site-look="neon"] :is(.choice-pixelguide, .model-card, .usage-result, .contact-card) {
  border-color: #ff641aaa;
  box-shadow: 0 0 22px #ff641a30;
}

/* Light surfaces use solid ink and carry the brand colors on their edges. */
[data-site-look="neon"] :is(.fave-page main > section:not(.fave-connection), #fave,
                            .choice-fave, .calculator-options, .calculator-section) {
  background:
    radial-gradient(circle at center, transparent 53%, #b8f34b80 54% 61%, transparent 62%)
      right -7rem top -8rem / 22rem 22rem no-repeat,
    radial-gradient(ellipse at 1% 100%, #ff641a18, transparent 45%) #f4f5f1;
  box-shadow: inset 0 3px var(--site-neon-lime);
}
[data-site-look="neon"] :is(.fave-page main > section:not(.fave-connection), #fave, .choice-fave)
                            :is(h1, h2) :is(em, .lime, .orange, .fave-rust) {
  color: #3e5b10;
  text-shadow: none;
  text-decoration: underline;
  text-decoration-color: var(--site-neon-lime);
  text-decoration-thickness: .09em;
  text-underline-offset: .13em;
}
[data-site-look="neon"] :is(.fave-page main > section:not(.fave-connection), #fave, .choice-fave) .button {
  border-color: #527415;
  background: var(--site-neon-lime);
  color: var(--site-neon-ink);
  box-shadow: 0 0 20px #80ad2f55;
}
[data-site-look="neon"] :is(.fave-page main > section:not(.fave-connection), #fave, .choice-fave) .button:hover {
  background: var(--site-neon-orange);
}
[data-site-look="neon"] :is(.fave-hero-photo, .fave-topics > a, .fave-options > a, .consulting-steps > li) {
  outline: 1px solid #7d9d48;
  outline-offset: -1px;
  box-shadow: 0 0 20px #9dc63f3d;
}
[data-site-look="neon"] .calculator-options { background-color: #fafbf8; }
[data-site-look="neon"] .calculator-options button[aria-pressed="true"] {
  box-shadow: inset 4px 0 var(--site-neon-orange);
}
@media print {
  .site-look-toggle { display: none !important; }
}

/* 90s poster shapes, concentrated away from the headline. */
[data-site-look="neon"] :is(.brand-hero, .pixelguide-intro, .studio-intro, .model-hero, .clarity-hero) {
  --poster-ring-position: right -7rem top -9rem;
  --poster-triangle-position: right 20% bottom 7%;
  position: relative;
  isolation: isolate;
  border-bottom: 2px solid var(--site-neon-orange);
  background:
    radial-gradient(circle at center, transparent 57%, #b8f34b94 57.5% 62%, transparent 62.5%)
      var(--poster-ring-position) / clamp(20rem, 37vw, 38rem) clamp(20rem, 37vw, 38rem) no-repeat,
    conic-gradient(from 150deg at 50% 14%, #ff641a99 60deg, transparent 60deg)
      var(--poster-triangle-position) / clamp(7rem, 16vw, 14rem) clamp(6rem, 12vw, 11rem) no-repeat,
    radial-gradient(ellipse at 84% 72%, #342219, transparent 46%),
    #101319;
}
[data-site-look="neon"] :is(.brand-hero, .pixelguide-intro, .studio-intro, .model-hero, .clarity-hero) .eyebrow {
  color: var(--site-neon-lime);
}
[data-site-look="neon"] .pixelguide-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, #b8f34bb0 1.5px, transparent 2px) 0 0 / 12px 12px;
  mask: radial-gradient(ellipse at 77% 81%, #000 0%, transparent 29%);
}
[data-site-look="neon"] .pixelguide-intro h1 .orange {
  color: var(--site-neon-lime);
  text-shadow: 0 0 .24em #b8f34b99, .035em .035em 0 #ff641a;
}
[data-site-look="neon"] .pixelguide-intro .portrait-window {
  outline: 2px solid var(--site-neon-lime);
  outline-offset: 3px;
  box-shadow: 10px 10px 0 #ff641a, 0 0 40px #b8f34b70;
}
[data-site-look="neon"] .pixelguide-page .button.primary {
  background: var(--site-neon-lime);
  color: var(--site-neon-ink);
  border-color: var(--site-neon-lime);
  box-shadow: 4px 4px 0 var(--site-neon-orange), 0 0 22px #b8f34b55;
}
[data-site-look="neon"] .pixelguide-page .button.primary:hover {
  background: var(--site-neon-orange);
  border-color: var(--site-neon-orange);
  box-shadow: 4px 4px 0 var(--site-neon-lime), 0 0 22px #ff641a66;
}
[data-site-look="neon"] .pixelguide-page :is(.price-card, .real-project, .extras-grid > article) {
  border-color: #b8f34b80;
  box-shadow: inset 0 3px var(--site-neon-lime), 0 0 22px #b8f34b24;
}
[data-site-look="neon"] .pixelguide-page :is(.price-card, .real-project, .extras-grid > article):is(:hover, :focus-within) {
  border-color: var(--site-neon-orange);
  box-shadow: inset 0 3px var(--site-neon-orange), 0 0 26px #ff641a55;
}
@media (max-width: 800px) {
  [data-site-look="neon"] :is(.brand-hero, .pixelguide-intro, .studio-intro, .model-hero, .clarity-hero) {
    --poster-ring-position: right -12rem bottom -8rem;
    --poster-triangle-position: right -4rem bottom 1rem;
  }
  [data-site-look="neon"] .pixelguide-intro::before {
    mask: radial-gradient(ellipse at 12% 82%, #000 0%, transparent 24%);
  }
}


/* Carry the poster shapes below the hero without adding layout boxes. */
[data-site-look="neon"] :is(.home-pixelguide, .personal, .engagement, .services, .pricing,
                            .customer-extras, .contact, .fave-connection, .model-overview,
                            .source-section, .clarity-example, .clarity-check, .clarity-outro,
                            .guide-next, .studio-main, .studio-outro, .story-finale) {
  background-image:
    radial-gradient(circle at center, transparent 54%, #b8f34b65 55% 61%, transparent 62%),
    radial-gradient(ellipse at 91% 15%, #b8f34b20, transparent 44%),
    radial-gradient(ellipse at 2% 88%, #ff641a27, transparent 48%);
  background-position: right -8rem top -9rem, center, center;
  background-size: clamp(18rem, 29vw, 29rem) clamp(18rem, 29vw, 29rem), auto, auto;
  background-repeat: no-repeat;
  box-shadow: inset 0 2px #b8f34b70;
}
[data-site-look="neon"] :is(.personal, .pricing, .customer-extras, .clarity-outro, .studio-outro, .story-finale) {
  background-image:
    conic-gradient(from 150deg at 50% 12%, #ff641a65 60deg, transparent 60deg),
    radial-gradient(circle at center, transparent 53%, #ff641a55 54% 60%, transparent 61%),
    radial-gradient(ellipse at 0% 20%, #ff641a20, transparent 42%);
  background-position: right -2rem bottom 1rem, left -9rem top -10rem, center;
  background-size: 9rem 7rem, 25rem 25rem, auto;
  box-shadow: inset 0 2px #ff641a90;
}
[data-site-look="neon"] :is(.home-pixelguide, .engagement, .services, .pricing, .project-gallery,
                            .customer-extras, .contact, .model-overview, .studio-outro, .story-finale)
                            h2 :is(.orange, .lime, em) {
  text-shadow: .045em .045em 0 #ff641a, 0 0 .26em #b8f34b45;
  color: var(--site-neon-lime);
}
[data-site-look="neon"] :is(.midnight-scene, .pixelguide-page) .project-rail-stage,
[data-site-look="neon"] .midnight-scene .rail-pinned .project-rail-stage {
  background:
    radial-gradient(circle at center, transparent 54%, #b8f34b8c 55% 61%, transparent 62%)
      right -8rem top -10rem / 27rem 27rem no-repeat,
    conic-gradient(from 150deg at 50% 12%, #ff641a80 60deg, transparent 60deg)
      right 16% top 13% / 9rem 7rem no-repeat,
    radial-gradient(ellipse at 88% 8%, #b8f34b28, transparent 47%),
    radial-gradient(ellipse at 3% 100%, #ff641a36, transparent 55%),
    #101319;
  box-shadow: inset 0 2px var(--site-neon-lime);
}
[data-site-look="neon"] .project-rail-progress > i {
  background: linear-gradient(90deg, var(--site-neon-orange), var(--site-neon-lime));
}
[data-site-look="neon"] .pixelguide-page :is(.real-project, .price-card, .extras-grid > article),
[data-site-look="neon"] :is(.model-card, .guide-download) {
  box-shadow: inset 0 3px var(--site-neon-lime), 4px 4px 0 #ff641a95, 0 0 18px #b8f34b25;
}
[data-site-look="neon"] .story-chapter {
  border-top: 2px solid #b8f34b75;
}
[data-site-look="neon"] .story-chapter:nth-of-type(even) {
  border-top-color: #ff641a8c;
}
@media (max-width: 800px) {
  [data-site-look="neon"] :is(.midnight-scene, .pixelguide-page) .project-rail-stage,
  [data-site-look="neon"] .midnight-scene .rail-pinned .project-rail-stage {
    background-position: right -15rem top -15rem, right -5rem top 5%, center, center;
  }
}