:root {
  --bg: #0c0c10;
  --bg-elevated: #16161d;
  --bg-card: #1c1c26;
  --border: #2a2a37;
  --text: #f4f4f7;
  --text-muted: #a2a2b0;
  --red: #ff0000;
  --peak-red: #dd0000;
  --purple: #800066;
  --logo-rest-75: #d60000;
  --logo-crimson-75: #d30035;
  --logo-hybrid-75: #da006d;
  --logo-aura-75: #d3009e;
  --logo-power-75: #930080;
  --homepage-power-highlight: #9a0080;
  --homepage-tone-spectrum: var(--logo-rest-75) 0%,
    var(--logo-crimson-75) 12.5%, var(--logo-hybrid-75) 25%,
    var(--logo-aura-75) 37.5%, var(--homepage-power-highlight) 50%,
    var(--logo-aura-75) 62.5%, var(--logo-hybrid-75) 75%,
    var(--logo-crimson-75) 87.5%, var(--logo-rest-75) 100%;
  --homepage-tone-spectrum-banner: rgb(214 0 0 / 12%) 0%,
    rgb(211 0 53 / 12%) 12.5%, rgb(218 0 109 / 12%) 25%,
    rgb(211 0 158 / 12%) 37.5%, rgb(154 0 128 / 12%) 50%,
    rgb(211 0 158 / 12%) 62.5%, rgb(218 0 109 / 12%) 75%,
    rgb(211 0 53 / 12%) 87.5%, rgb(214 0 0 / 12%) 100%;
  --homepage-tone-spectrum-card: rgb(214 0 0 / 7%) 0%,
    rgb(211 0 53 / 7%) 12.5%, rgb(218 0 109 / 7%) 25%,
    rgb(211 0 158 / 7%) 37.5%, rgb(154 0 128 / 7%) 50%,
    rgb(211 0 158 / 7%) 62.5%, rgb(218 0 109 / 7%) 75%,
    rgb(211 0 53 / 7%) 87.5%, rgb(214 0 0 / 7%) 100%;
  --radius: 18px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --home-brand-size: clamp(2.65rem, 5.65vw, 3.35rem);
  --home-title-size: clamp(2.45rem, 5.15vw, 3.25rem);
  --home-subtitle-size: clamp(0.875rem, 2.05vw, 1.15rem);
  --home-card-swatch-width: 50%;
  --tone-value-size: 1.1rem;
  --tone-body-size: 1.22rem;
  --tone-description-size: 1.1rem;
  --tone-card-gap: 0.75rem;
  --tone-section-gap: 2.75rem;
  --tone-category-divider-gap: 1.4rem;
  --home-tone-panel-background: rgba(60, 0, 40, 0.45);
  /* Extra breathing room on both sides of content dividers. */
  --shared-divider-extra-space: clamp(13px, 1.25vw, 18px);
  /* Compensate for the divider canvas's 6% fade at each edge. */
  --home-divider-width: calc(50vw + 64%);
  --home-divider-margin-left: calc(18% - 25vw);
  --home-pyramid-divider-clearance: calc(
    var(--tone-section-gap) * 0.7125 + var(--shared-divider-extra-space)
  );
  --home-main-divider-clearance: clamp(4rem, 7vw, 7rem);
}

html.tone-route-pending,
html.tone-route-pending body {
  background: #28091e !important;
  background-image: none !important;
  overflow: hidden;
}

html.tone-route-pending body.home-page {
  zoom: 1;
}

.tone-route-loading {
  display: none;
}

html.tone-route-pending .tone-route-loading {
  display: block;
}

html.tone-route-pending body > :not(#lightOverlay):not(#toneRouteLoading) {
  visibility: hidden !important;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Tall/wide windows (Safari full browser) — Cursor's short panel keeps 16px above */
@media (min-height: 820px) and (min-width: 768px) {
  html {
    font-size: 17px;
  }

  html:has(.light-overlay:not([hidden])) {
    font-size: 16px;
  }

  :root {
    --home-brand-size: clamp(2.95rem, 5.9vw, 3.7rem);
    --home-title-size: clamp(2.75rem, 5.55vw, 3.6rem);
    --home-subtitle-size: clamp(1rem, 2.25vw, 1.3rem);
    --tone-value-size: 1.12rem;
    --tone-body-size: 1.25rem;
    --tone-description-size: 1.12rem;
    --tone-card-gap: 1rem;
    --tone-category-divider-gap: 1.225rem;
  }

  .page {
    max-width: 960px;
  }

  .site-header {
    max-width: 960px;
    padding: 0.65rem 1.25rem 0.2rem;
  }

  .intro {
    margin: 0 0 2.53125rem;
  }

  .intro__subtitle {
    max-width: min(46rem, 100%);
  }

  .color-grid {
    margin-bottom: 1.5rem;
  }

  .color-card__title {
    font-size: 1.65rem;
  }

  .color-card__hex {
    font-size: 1.12rem;
  }

  .color-card__desc {
    font-size: var(--tone-description-size);
  }
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: radial-gradient(
      1200px 600px at 80% -10%,
      rgba(128, 0, 128, 0.18),
      transparent 60%
    ),
    radial-gradient(
      1000px 500px at 0% 0%,
      rgba(255, 0, 0, 0.14),
      transparent 55%
    ),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.home-page {
  --bg: #28091E;
  --text: #f55a96;
  --text-muted: #f55a96;
  --homepage-star-tile-height: 100vh;
  --homepage-tone-stars-start: 46vh;
  --homepage-pyramid-stars-start: 132vh;
  --homepage-scale: 0.75;
  --homepage-full-viewport-width: 133.3333vw;
  zoom: var(--homepage-scale);
  position: relative;
  isolation: isolate;
  background-color: #28091E;
  background-image: none;
}

body.home-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #28091E;
  transform: translateZ(0);
}

.homepage-star-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.48;
  mix-blend-mode: screen;
  transform: translateZ(0);
}

.homepage-star-field__zone {
  position: absolute;
  right: 0;
  left: 0;
  background-repeat: repeat;
  background-size: auto var(--homepage-star-tile-height);
}

.tone-cloud-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.other-tones-page .tone-cloud-sky--other,
.custom-tone-page .tone-cloud-sky--custom,
.info-page--cloud-background .tone-cloud-sky--info {
  display: block;
}

.other-tones-page .tone-cloud-sky--other,
.custom-tone-page .tone-cloud-sky--custom,
.info-page--cloud-background .tone-cloud-sky--info {
  opacity: 0.68;
}

.tone-cloud {
  position: absolute;
  display: block;
  width: 220px;
  height: 72px;
  border-radius: 52% 48% 45% 55% / 68% 72% 28% 32%;
  background: var(--tone-cloud-color);
  filter: blur(0.65px) drop-shadow(0 0 10px var(--tone-cloud-color))
    drop-shadow(0 0 24px var(--tone-cloud-color));
  opacity: 0.74;
  animation: tone-cloud-drift var(--tone-cloud-duration) linear
    var(--tone-cloud-delay) infinite;
  will-change: transform;
}

.tone-cloud::before,
.tone-cloud::after {
  content: "";
  position: absolute;
  bottom: 5%;
  background: inherit;
  border-radius: 50%;
}

.tone-cloud::before {
  left: 14%;
  width: 42%;
  height: 138%;
}

.tone-cloud::after {
  right: 12%;
  width: 37%;
  height: 118%;
}

.tone-cloud--crimson {
  --tone-cloud-color: #ad0000;
  --tone-cloud-duration: 58s;
  --tone-cloud-delay: -36s;
  --tone-cloud-rotation: -1deg;
  top: 10%;
  width: 238px;
  height: 78px;
}

.tone-cloud--rose {
  --tone-cloud-color: #b40048;
  --tone-cloud-duration: 66s;
  --tone-cloud-delay: -52s;
  --tone-cloud-rotation: 0.75deg;
  top: 29%;
  width: 276px;
  height: 88px;
}

.tone-cloud--magenta {
  --tone-cloud-color: #d3009e;
  --tone-cloud-duration: 54s;
  --tone-cloud-delay: -17s;
  --tone-cloud-rotation: -0.5deg;
  top: 49%;
  width: 196px;
  height: 64px;
}

.tone-cloud--violet {
  --tone-cloud-color: #800066;
  --tone-cloud-duration: 70s;
  --tone-cloud-delay: -44s;
  --tone-cloud-rotation: 1deg;
  top: 68%;
  width: 258px;
  height: 82px;
}

.tone-cloud--red {
  --tone-cloud-color: #ff0033;
  --tone-cloud-duration: 61s;
  --tone-cloud-delay: -29s;
  --tone-cloud-rotation: 0.25deg;
  top: 84%;
  width: 184px;
  height: 60px;
}

@keyframes tone-cloud-drift {
  from {
    transform: translate3d(112vw, 0, 0) rotate(var(--tone-cloud-rotation));
  }

  to {
    transform: translate3d(calc(-100% - 12vw), 0, 0)
      rotate(var(--tone-cloud-rotation));
  }
}

@media (prefers-reduced-motion: reduce) {
  .tone-cloud {
    animation: none;
  }
}

.homepage-star-field__zone--warning {
  top: 0;
  height: var(--homepage-tone-stars-start);
  background-image: url("media/stimuly-stars-background-soft-75-colored-core.png?v=20261025-2");
  background-position: center top;
}

.homepage-star-field__zone--tones {
  top: var(--homepage-tone-stars-start);
  height: calc(
    var(--homepage-pyramid-stars-start) - var(--homepage-tone-stars-start)
  );
  background-image: url("media/stimuly-stars-background-soft-colored-core.png?v=20261025-2");
  background-position: center calc(-1 * var(--homepage-tone-stars-start));
}

.homepage-star-field__zone--pyramid {
  top: var(--homepage-pyramid-stars-start);
  bottom: 0;
  background-image:
    url("media/stimuly-stars-background-soft-colored-core.png?v=20261025-2"),
    url("media/stimuly-stars-background-soft-75-colored-core.png?v=20261025-2");
  background-position:
    center calc(-1 * var(--homepage-pyramid-stars-start)),
    calc(50% + 397px)
      calc(-1 * var(--homepage-pyramid-stars-start) + 211px);
  background-blend-mode: screen;
}

.homepage-star-shine {
  display: none;
}

body.home-page .page {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

body.home-page .scroll-header {
  width: var(--homepage-full-viewport-width);
  max-width: none;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.home-page .site-header {
  --site-header-inline-padding: 1.25rem;
  position: relative;
  isolation: isolate;
  background: transparent;
}

/* Safari centers the header inside the 133.3333vw zoom-compensation wrapper.
   Recenter it on the visible 100vw viewport so the brand and header divider
   align with the warning card and the content dividers below. */
@media (min-width: 701px) {
  .safari-rendering body.home-page .site-header {
    left: calc((100vw - var(--homepage-full-viewport-width)) / 2);
  }
}

body.home-page .site-header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: var(--homepage-full-viewport-width);
  border-radius: 16px;
  background: linear-gradient(
    90deg,
    rgb(60 0 40 / 38%) 0%,
    rgb(60 0 40 / 58%) 50%,
    rgb(60 0 40 / 38%) 100%
  );
  -webkit-backdrop-filter: blur(3px) saturate(112%);
  backdrop-filter: blur(3px) saturate(112%);
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 35%) 4%,
      #000 10%,
      #000 94%,
      rgb(0 0 0 / 35%) 98%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      #000 0%,
      #000 68%,
      rgb(0 0 0 / 34%) 100%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 35%) 4%,
      #000 10%,
      #000 94%,
      rgb(0 0 0 / 35%) 98%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      #000 0%,
      #000 68%,
      rgb(0 0 0 / 34%) 100%
    );
  mask-composite: intersect;
  transform: translateX(-50%);
  pointer-events: none;
}

body.home-page .site-header .brand,
body.home-page .site-header .spectrum-divider {
  position: relative;
  z-index: 1;
}

body.home-page .site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 1.25rem 1rem 1.5rem;
  background: rgba(45, 33, 35, 0.5);
}

/* Animated red-to-purple warning spectrum */
@keyframes warning-spectrum-flow {
  0% {
    background-position: 200% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes warning-card-tone {
  0%,
  100% {
    background-color: rgb(214 0 0 / 7%);
    border-color: rgb(214 0 0 / 38%);
  }
  12.5%,
  87.5% {
    background-color: rgb(211 0 53 / 7%);
    border-color: rgb(211 0 53 / 38%);
  }
  25%,
  75% {
    background-color: rgb(218 0 109 / 7%);
    border-color: rgb(218 0 109 / 38%);
  }
  37.5%,
  62.5% {
    background-color: rgb(211 0 158 / 7%);
    border-color: rgb(211 0 158 / 38%);
  }
  50% {
    background-color: rgb(154 0 128 / 7%);
    border-color: rgb(154 0 128 / 38%);
  }
}

@keyframes halo-divider-tone {
  0%,
  100% {
    color: var(--logo-rest-75);
  }
  12.5%,
  87.5% {
    color: var(--logo-crimson-75);
  }
  25%,
  75% {
    color: var(--logo-hybrid-75);
  }
  37.5%,
  62.5% {
    color: var(--logo-aura-75);
  }
  50% {
    color: var(--homepage-power-highlight);
  }
}

@keyframes tone-explorer-border-tone {
  0%,
  100% {
    border-color: var(--logo-rest-75);
  }
  12.5%,
  87.5% {
    border-color: var(--logo-crimson-75);
  }
  25%,
  75% {
    border-color: var(--logo-hybrid-75);
  }
  37.5%,
  62.5% {
    border-color: var(--logo-aura-75);
  }
  50% {
    border-color: var(--homepage-power-highlight);
  }
}

.brand__name.warning-spectrum-text,
.intro__title.warning-spectrum-text,
.intro__title.warning-spectrum-text .intro__title-text,
.warning-card__title.warning-spectrum-text {
  background: linear-gradient(90deg, var(--homepage-tone-spectrum));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.warning-spectrum-text,
.warning-spectrum-text > * {
  background: linear-gradient(90deg, var(--homepage-tone-spectrum));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: warning-spectrum-flow 12s linear infinite;
}

/* JavaScript applies this only while an animated section is outside the viewport. */
.viewport-animation-paused,
.viewport-animation-paused *,
.viewport-animation-paused::before,
.viewport-animation-paused::after,
.viewport-animation-paused *::before,
.viewport-animation-paused *::after {
  -webkit-animation-play-state: paused !important;
  animation-play-state: paused !important;
}

/* Border traces share one phase even while their sections are offscreen. */
.viewport-animation-paused .tone-border-light,
.viewport-animation-paused .tone-border-light__path {
  -webkit-animation-play-state: running !important;
  animation-play-state: running !important;
}

.brand__name.warning-spectrum-text {
  animation-duration: 12s;
  background-image: linear-gradient(
    90deg,
    var(--logo-rest-75) 0%,
    var(--logo-crimson-75) 12.5%,
    var(--logo-hybrid-75) 25%,
    var(--logo-aura-75) 37.5%,
    var(--homepage-power-highlight) 50%,
    var(--logo-aura-75) 62.5%,
    var(--logo-hybrid-75) 75%,
    var(--logo-crimson-75) 87.5%,
    var(--logo-rest-75) 100%
  );
}

.intro__title-text {
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .warning-spectrum-text,
  .warning-spectrum-text > * {
    animation: none;
    background: none;
    -webkit-text-fill-color: #cc0044;
    color: #cc0044;
  }
}

/* Disclaimer banner */
.scroll-header {
  position: sticky;
  top: 0;
  z-index: 80;
  width: 100vw;
  background: #161216;
  box-shadow: 0 0 0 rgb(0 0 0 / 0%);
  transform: translateY(0);
  transition: transform 220ms ease, box-shadow 220ms ease;
  will-change: transform;
}

.scroll-header--floating {
  box-shadow: 0 12px 30px rgb(0 0 0 / 34%);
}

.scroll-header--hidden {
  pointer-events: none;
  transform: translateY(calc(-100% - 2px));
}

.disclaimer-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(
    90deg,
    rgb(42 2 9 / 58%) 0%,
    rgb(84 8 18 / 50%) 50%,
    rgb(42 2 9 / 58%) 100%
  );
  -webkit-backdrop-filter: blur(3px) saturate(112%);
  backdrop-filter: blur(3px) saturate(112%);
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: #be0000;
  color: #be0000;
  animation: none;
  border-bottom: 1px solid #be0000;
  font-size: min(0.6875rem, 2.58vw);
  font-weight: 500;
  line-height: 1.2;
  padding: 0.65rem clamp(0.25rem, 1.5vw, 1rem);
  text-align: center;
}

.disclaimer-banner > span {
  white-space: nowrap;
  background: none;
  -webkit-text-fill-color: #be0000;
  color: #be0000;
  animation: none;
}

/* Header */
.site-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
  padding: 0.6rem 1.25rem 0.15rem;
  text-align: left;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.brand__dot {
  width: clamp(30px, 4vw, 40px);
  height: clamp(30px, 4vw, 40px);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--logo-rest-75) 0deg,
    var(--logo-crimson-75) 72deg,
    var(--logo-hybrid-75) 144deg,
    var(--logo-aura-75) 216deg,
    var(--logo-power-75) 288deg,
    var(--logo-rest-75) 360deg
  );
  box-shadow: 0 0 14px rgba(214, 0, 0, 0.34),
    0 0 16px rgba(211, 0, 53, 0.3),
    0 0 18px rgba(218, 0, 109, 0.28),
    0 0 20px rgba(211, 0, 158, 0.26),
    0 0 24px rgba(147, 0, 128, 0.34);
  position: relative;
  animation: ring-spin 4s linear infinite;
}

.brand__dot::after {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: #3c0028;
}

@keyframes ring-spin {
  from {
    transform: translate3d(
        var(--ring-drag-x, 0px),
        var(--ring-drag-y, 0px),
        0
      )
      rotate(0deg);
  }
  to {
    transform: translate3d(
        var(--ring-drag-x, 0px),
        var(--ring-drag-y, 0px),
        0
      )
      rotate(360deg);
  }
}

@keyframes ring-spin-ccw {
  from {
    transform: translate3d(
        var(--ring-drag-x, 0px),
        var(--ring-drag-y, 0px),
        0
      )
      rotate(360deg);
  }
  to {
    transform: translate3d(
        var(--ring-drag-x, 0px),
        var(--ring-drag-y, 0px),
        0
      )
      rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand__dot,
  .disclaimer-banner,
  .warning-card {
    animation: none;
  }
}

.brand__name {
  position: relative;
  isolation: isolate;
  font-family: "Berkshire Swash", "Eagle Lake", cursive;
  font-size: var(--home-brand-size);
  font-weight: 400;
  letter-spacing: 0.17em;
  filter: drop-shadow(0 0 2px rgb(218 0 109 / 28%))
    drop-shadow(0 0 6px rgb(211 0 109 / 12%));
}

.brand__name::before,
.brand__name::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--homepage-tone-spectrum));
  background-size: 200% auto;
  background-position: 200% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font: inherit;
  letter-spacing: inherit;
  pointer-events: none;
  animation: warning-spectrum-flow 12s linear infinite;
}

.brand__name::before {
  opacity: 0.28;
  filter: blur(2.5px);
}

.brand__name::after {
  opacity: 0.12;
  filter: blur(7px);
}

@media (prefers-reduced-motion: reduce) {
  .brand__name::before,
  .brand__name::after {
    animation: none;
    background-position: 50% 50%;
  }
}

.brand__name-final {
  display: inline-block;
  margin-left: 0;
  background: none;
  animation: none;
}

/* Page layout */
.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 1.25rem 2.5rem;
}

.intro {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Keep a 24px gap between the Find Your Tone intro and its tone panel on every layout. */
  padding: 0 0 1.5rem;
  text-align: center;
  margin: 0;
}

.tone-explorer {
  --tone-explorer-corner-offset: calc(var(--radius) - 1.35rem);
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 1.25rem 1.35rem;
  border: 2px solid var(--logo-rest-75);
  border-radius: var(--radius);
  background: var(--home-tone-panel-background);
  animation: tone-explorer-border-tone 12s linear infinite;
  /* Keep the divider equally spaced from the tone and pyramid panels. */
  margin: 0 0
    calc(
      var(--tone-section-gap) * 0.7125 + var(--shared-divider-extra-space)
    );
}

.tone-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 0.75rem;
}

.tone-list-heading__title {
  margin-left: calc(var(--tone-explorer-corner-offset) + 0.7em);
  color: var(--text);
  font-family: "Berkshire Swash", "Eagle Lake", cursive;
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1.15;
}

.tone-list-heading__title.warning-spectrum-text {
  background: linear-gradient(90deg, var(--homepage-tone-spectrum));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.intro__light-pause {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  margin-left: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(216, 212, 220, 0.38);
  border-radius: 999px;
  background: var(--bg-card);
  color: #d8d4dc;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
}

.intro__light-pause svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.intro__light-pause-icon--pause,
.intro__light-pause[aria-pressed="true"] .intro__light-pause-icon--play {
  display: none;
}

.intro__light-pause[aria-pressed="true"] .intro__light-pause-icon--pause {
  display: inline;
}

.intro__light-pause:hover,
.intro__light-pause:focus-visible {
  border-color: var(--logo-aura-75);
  background: rgba(128, 0, 128, 0.18);
  color: #fff;
}

body:not(.border-lights-started) .tone-border-light {
  visibility: hidden;
}

body:not(.border-lights-started) .tone-border-light__path,
body.border-lights-paused .tone-border-light__path {
  -webkit-animation-play-state: paused !important;
  animation-play-state: paused !important;
}

.site-header .spectrum-divider {
  height: clamp(10px, 1.2vw, 15px);
  margin-top: 0;
}

.spectrum-divider {
  position: relative;
  /* Keep the visibly bright stroke at least as wide as the content boxes. */
  width: var(--home-divider-width);
  height: clamp(82px, 8.5vw, 110px);
  margin-left: var(--home-divider-margin-left);
  overflow: visible;
}

/* Keep the safety and tone panels equally spaced from their shared divider. */
.warning-card + .content-divider {
  margin-top: var(--home-pyramid-divider-clearance);
}

.content-divider + .intro {
  margin-top: var(--home-pyramid-divider-clearance);
}

.content-divider + .site-access-message {
  margin-top: var(--home-pyramid-divider-clearance);
}

.site-access-message {
  width: 100%;
  padding: 1.25rem 1.35rem;
  border: 1px solid rgba(168, 82, 168, 0.42);
  border-radius: var(--radius);
  background: var(--home-tone-panel-background);
  color: var(--text);
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.site-access-message[hidden] {
  display: none;
}

.intro[hidden],
.tone-explorer[hidden],
.site-experience-divider[hidden],
.info-links-panel[hidden] {
  display: none;
}

.aurora-divider__canvas {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: clamp(190px, 20vw, 250px);
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0.96;
  filter: saturate(1.16) brightness(1.04);
  -webkit-transform: translate(-50%, -50%);
  pointer-events: none;
}

.site-header .aurora-divider__canvas {
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.aurora-divider__canvas--safari {
  -webkit-filter: drop-shadow(0 0 12px rgb(211 0 109 / 35%));
  filter: drop-shadow(0 0 12px rgb(211 0 109 / 35%));
}

.safari-rendering .spectrum-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 100%;
  height: 3.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--homepage-tone-spectrum));
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgb(211 0 109 / 70%),
    0 0 22px rgb(211 0 109 / 50%), 0 0 40px rgb(211 0 109 / 34%),
    0 0 60px rgb(211 0 109 / 20%);
  transform: translate3d(-50%, -50%, 0);
  animation: warning-spectrum-flow 12s linear infinite;
  pointer-events: none;
}

.safari-rendering .site-header .spectrum-divider::before {
  top: 50%;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-header {
    transition: none;
  }
}

.safari-rendering .brand__name {
  -webkit-filter: drop-shadow(0 0 2px rgb(218 0 109 / 28%))
    drop-shadow(0 0 6px rgb(211 0 109 / 12%));
  filter: drop-shadow(0 0 2px rgb(218 0 109 / 28%))
    drop-shadow(0 0 6px rgb(211 0 109 / 12%));
  transform: translateZ(0);
}

.safari-rendering .brand__name::before,
.safari-rendering .brand__name::after {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: rgb(211 0 109 / 42%);
  color: rgb(211 0 109 / 42%);
}

.safari-rendering .brand__name::before {
  -webkit-filter: blur(2.5px);
  filter: blur(2.5px);
}

.safari-rendering .brand__name::after {
  -webkit-filter: blur(7px);
  filter: blur(7px);
}

@media (prefers-reduced-motion: reduce) {
  .safari-rendering .spectrum-divider::before {
    animation: none;
    background-position: 50% 50%;
  }
}

.spectrum-divider__svg {
  display: none;
}

.spectrum-divider__halo-track {
  --aurora-curtain-mask:
    radial-gradient(ellipse 20% 108% at 17% 33%, black 0%, rgb(0 0 0 / 78%) 44%, transparent 78%),
    radial-gradient(ellipse 23% 120% at 50% 58%, black 0%, rgb(0 0 0 / 82%) 46%, transparent 80%),
    radial-gradient(ellipse 20% 110% at 83% 36%, black 0%, rgb(0 0 0 / 78%) 44%, transparent 78%);
  --aurora-glow-mask:
    radial-gradient(ellipse 30% 125% at 16% 48%, black 0%, transparent 82%),
    radial-gradient(ellipse 34% 135% at 50% 52%, black 0%, transparent 84%),
    radial-gradient(ellipse 30% 125% at 84% 48%, black 0%, transparent 82%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100%;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  isolation: isolate;
}

.spectrum-divider__halo-track {
  display: none;
}

.spectrum-divider__halo-track::before {
  content: "";
  position: absolute;
  inset: 0;
  width: min(94vw, 1180px);
  height: 100%;
  margin: auto;
  background:
    repeating-linear-gradient(
      96deg,
      transparent 0 4%,
      rgb(255 255 255 / 42%) 7%,
      rgb(255 255 255 / 12%) 11%,
      transparent 17%
    ),
    linear-gradient(90deg, var(--homepage-tone-spectrum));
  background-size: 165% 100%, 200% 100%;
  background-blend-mode: screen, normal;
  -webkit-mask-image: var(--aurora-curtain-mask);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--aurora-curtain-mask);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  opacity: 0.62;
  filter: blur(9px) saturate(1.2) brightness(1.1);
  mix-blend-mode: screen;
  animation:
    warning-spectrum-flow 12s linear infinite,
    aurora-curtain-drift 8s ease-in-out infinite alternate;
}

.spectrum-divider__halo-track::after {
  content: "";
  position: absolute;
  inset: 0;
  width: min(94vw, 1180px);
  height: 100%;
  margin: auto;
  background:
    repeating-linear-gradient(
      84deg,
      transparent 0 6%,
      rgb(255 255 255 / 18%) 10%,
      transparent 18%
    ),
    linear-gradient(90deg, var(--homepage-tone-spectrum));
  background-size: 190% 100%, 200% 100%;
  background-blend-mode: screen, normal;
  -webkit-mask-image: var(--aurora-glow-mask);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--aurora-glow-mask);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  opacity: 0.32;
  filter: blur(24px) saturate(1.28) brightness(1.16);
  mix-blend-mode: screen;
  animation:
    warning-spectrum-flow 12s linear infinite,
    aurora-curtain-drift 8s ease-in-out -1.6s infinite alternate;
}

@keyframes aurora-curtain-drift {
  from {
    transform: translateX(-0.8%) skewX(-1.4deg) scaleY(0.92);
  }
  to {
    transform: translateX(0.8%) skewX(1.4deg) scaleY(1.06);
  }
}

.spectrum-divider__halo {
  position: relative;
  flex: 0 0 auto;
  margin-left: clamp(-8px, -0.5vw, -2px);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--homepage-tone-spectrum));
  background-size: 200% 100%;
  color: var(--logo-rest-75);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 42%),
    0 0 3px color-mix(in srgb, currentColor 42%, transparent),
    inset 0 1px 1px rgb(255 255 255 / 14%);
  animation: warning-spectrum-flow 12s linear infinite;
}

.spectrum-divider__halo {
  display: none;
}

.spectrum-divider__halo::after {
  content: "";
  position: absolute;
  inset: clamp(3px, 0.42vw, 5px);
  border-radius: inherit;
  background: var(--bg);
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 50%);
}

.spectrum-divider__halo:nth-child(odd) {
  z-index: 3;
  width: clamp(14px, 3.7vw, 50px);
  height: clamp(8px, 1.1vw, 14px);
  transform: none;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 48%),
    0 0 3px color-mix(in srgb, currentColor 46%, transparent),
    inset 0 1px 1px rgb(255 255 255 / 16%);
}

.spectrum-divider__halo:nth-child(even) {
  z-index: 1;
  width: clamp(20px, 5vw, 66px);
  height: clamp(18px, 3.05vw, 39px);
  transform: none;
}

.spectrum-divider__halo:nth-child(odd)::after {
  display: block;
  inset: clamp(1.5px, 0.22vw, 3px);
}

.spectrum-divider__halo:nth-child(10n + 1),
.spectrum-divider__halo:nth-child(10n + 2) {
  color: var(--logo-rest-75);
}

.spectrum-divider__halo:nth-child(10n + 3),
.spectrum-divider__halo:nth-child(10n + 4) {
  color: var(--logo-crimson-75);
}

.spectrum-divider__halo:nth-child(10n + 5),
.spectrum-divider__halo:nth-child(10n + 6) {
  color: var(--logo-hybrid-75);
}

.spectrum-divider__halo:nth-child(10n + 7),
.spectrum-divider__halo:nth-child(10n + 8) {
  color: var(--logo-aura-75);
}

.spectrum-divider__halo:nth-child(10n + 9),
.spectrum-divider__halo:nth-child(10n + 10) {
  color: var(--homepage-power-highlight);
}

.spectrum-divider__halo:first-child {
  margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .spectrum-divider__halo-track::before,
  .spectrum-divider__halo-track::after,
  .spectrum-divider__halo {
    animation: none;
  }
}

.spectrum-divider__path {
  stroke-width: 7;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}

.tone-explorer + .spectrum-divider {
  margin-top: 0;
  margin-bottom: calc(
    2.75rem * 0.7125 + var(--shared-divider-extra-space)
  );
}

:fullscreen .intro,
:fullscreen .intro__subtitle,
:fullscreen .intro__line,
:fullscreen .intro__sentence,
html:fullscreen .intro,
html:-webkit-full-screen .intro,
html:fullscreen .intro__subtitle,
html:-webkit-full-screen .intro__subtitle,
html:fullscreen .intro__line,
html:-webkit-full-screen .intro__line,
html:fullscreen .intro__sentence,
html:-webkit-full-screen .intro__sentence {
  text-align: center;
}

:fullscreen .intro,
html:fullscreen .intro,
html:-webkit-full-screen .intro {
  align-items: center;
  width: 100%;
}

:fullscreen .intro__subtitle,
html:fullscreen .intro__subtitle,
html:-webkit-full-screen .intro__subtitle {
  align-items: center;
  max-width: min(46rem, calc(100% - 2.5rem));
}

.intro__title {
  font-family: "Berkshire Swash", "Eagle Lake", cursive;
  font-size: var(--home-title-size);
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
  display: inline-block;
  position: relative;
}

#siteExperience .intro__title {
  font-size: clamp(2.2rem, 4.65vw, 2.9rem);
  font-weight: 700;
}

.intro__title-text {
  display: inline-block;
  clip-path: none;
  white-space: nowrap;
  animation: warning-spectrum-flow 12s linear infinite;
}

.intro__title.warning-spectrum-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--logo-rest-75);
  animation: halo-divider-tone 12s linear infinite;
}

.intro__title.warning-spectrum-text .intro__title-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: inherit;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .intro__title-text {
    animation: none;
    clip-path: none;
  }

}

.intro__subtitle {
  font-family: "Eagle Lake", cursive;
  color: var(--text-muted);
  width: 100%;
  max-width: min(42rem, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: var(--home-subtitle-size);
  font-weight: 400;
  line-height: 1.5;
  text-shadow: 0 0 10px rgba(128, 0, 128, 0.35),
    0 0 18px rgba(255, 0, 0, 0.16);
}

.intro__line,
.intro__sentence {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

.intro__sentence-end {
  white-space: nowrap;
}

/* Color grid */
@keyframes tone-border-trace {
  0% {
    stroke-dashoffset: 0;
  }
  10% {
    stroke-dashoffset: var(--tone-border-left-offset, 25);
  }
  50% {
    stroke-dashoffset: 50;
  }
  60% {
    stroke-dashoffset: var(--tone-border-right-offset, 75);
  }
  to {
    stroke-dashoffset: 100;
  }
}

@keyframes custom-tone-border-spectrum {
  0%,
  100% {
    color: var(--logo-rest-75);
  }
  12.5%,
  87.5% {
    color: var(--logo-crimson-75);
  }
  25%,
  75% {
    color: var(--logo-hybrid-75);
  }
  37.5%,
  62.5% {
    color: var(--logo-aura-75);
  }
  50% {
    color: var(--homepage-power-highlight);
  }
}

.color-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 0;
}

.color-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease,
    border-color 0.22s ease;
  outline: none;
}

/* Treat the primary tones as one continuous stack: only its outside has a border. */
.color-grid > .color-card {
  border-width: 0 1px;
  border-radius: 0;
}

.color-grid > .color-card:first-of-type {
  border-top-width: 1px;
  border-radius: var(--radius) var(--radius) 0 0;
}

.color-grid > .color-card:last-of-type {
  border-bottom-width: 1px;
  border-radius: 0 0 var(--radius) var(--radius);
}

.tone-border-light {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  z-index: 5;
  overflow: visible;
  color: var(--logo-rest-75);
  pointer-events: none;
}

.tone-border-light__path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 9 91;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
  animation: tone-border-trace 12s linear infinite;
}

.tone-border-light__path--glow {
  stroke-width: 11px;
  opacity: 0.48;
  filter: blur(3px) drop-shadow(0 0 8px currentColor)
    drop-shadow(0 0 13px currentColor);
}

.tone-border-light__path--core {
  stroke-width: 5.5px;
  opacity: 1;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 85%))
    drop-shadow(0 0 3px currentColor)
    drop-shadow(0 0 7px currentColor);
}

.color-card__swatch > .tone-border-light {
  color: var(--spectrum-end);
  animation: card-spectrum-border-opposite 10s ease-in-out infinite;
}

.color-card:hover,
.color-card:focus-visible {
  z-index: 6;
  transform: scale(1.02);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55),
    0 0 18px color-mix(in srgb, var(--swatch) 30%, transparent);
  border-color: rgba(255, 255, 255, 0.18);
}

@keyframes card-spectrum-fill {
  0%,
  100% {
    background-color: var(--spectrum-start);
  }
  50% {
    background-color: var(--spectrum-end);
  }
}

@keyframes card-spectrum-border-opposite {
  0%,
  100% {
    color: var(--spectrum-end);
  }
  50% {
    color: var(--spectrum-start);
  }
}

@keyframes card-spectrum-text {
  0%,
  100% {
    color: var(--spectrum-start);
  }
  50% {
    color: var(--spectrum-end);
  }
}

.color-card__swatch {
  flex: 0 0 var(--home-card-swatch-width);
  width: var(--home-card-swatch-width);
  min-height: 88px;
  align-self: stretch;
  background: var(--swatch);
  animation: card-spectrum-fill 10s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.color-card__swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgb(255 255 255 / 10%) 0%,
      transparent 46%,
      rgb(0 0 0 / 12%) 100%
    ),
    linear-gradient(to right, transparent 55%, rgba(0, 0, 0, 0.35));
}

.color-card__heartbeat {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  overflow: visible;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 38%,
    rgba(0, 0, 0, 0.1) 52%,
    rgba(0, 0, 0, 0.4) 68%,
    rgba(0, 0, 0, 0.78) 80%,
    #000 90%,
    #000 100%
  );
  -webkit-mask-size: 34% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: -34% 0;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 38%,
    rgba(0, 0, 0, 0.1) 52%,
    rgba(0, 0, 0, 0.4) 68%,
    rgba(0, 0, 0, 0.78) 80%,
    #000 90%,
    #000 100%
  );
  mask-size: 34% 100%;
  mask-repeat: no-repeat;
  mask-position: -34% 0;
  animation: color-card-heartbeat-sweep 8s linear infinite;
}

.color-card--crimson .color-card__heartbeat,
.color-card--hybrid .color-card__heartbeat {
  animation-name: color-card-heartbeat-sweep-hybrid;
}

.color-card--power .color-card__heartbeat {
  animation-name: color-card-heartbeat-sweep-power;
}

@keyframes color-card-heartbeat-sweep {
  0% {
    -webkit-mask-position: -34% 0;
    mask-position: -34% 0;
  }

  100% {
    -webkit-mask-position: 134% 0;
    mask-position: 134% 0;
  }
}

@keyframes color-card-heartbeat-sweep-hybrid {
  0% {
    -webkit-mask-position: -34% 0;
    mask-position: -34% 0;
  }

  65%,
  100% {
    -webkit-mask-position: 134% 0;
    mask-position: 134% 0;
  }
}

@keyframes color-card-heartbeat-sweep-power {
  0% {
    -webkit-mask-position: -34% 0;
    mask-position: -34% 0;
  }

  50%,
  100% {
    -webkit-mask-position: 134% 0;
    mask-position: 134% 0;
  }
}

.color-card__heartbeat-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 1;
  overflow: visible;
  transform: scale(1, 3);
  transform-origin: center center;
}

.color-card__heartbeat-path {
  fill: none;
  stroke: color-mix(in srgb, var(--heartbeat, var(--swatch)) 72%, white 28%);
  stroke-width: 0.42;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 1px var(--heartbeat, var(--swatch)))
    drop-shadow(0 0 5px color-mix(in srgb, var(--heartbeat, var(--swatch)) 75%, transparent))
    drop-shadow(0 0 11px color-mix(in srgb, var(--heartbeat, var(--swatch)) 45%, transparent));
}

.color-card__body {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Keep the shared copy panel and divide descriptions with their matching tone. */
.tone-explorer .color-card__body {
  background: #331125;
}

.tone-explorer .color-grid > .color-card:not(:first-of-type) .color-card__body {
  box-shadow: inset 0 1px
    color-mix(in srgb, #331125 65%, var(--swatch) 35%);
}

.tone-explorer .color-card {
  border-color: #331125;
}

.color-card__title {
  color: var(--swatch);
  animation: card-spectrum-text 10s ease-in-out infinite;
  font-size: var(--tone-card-title-size, 1.55rem);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.color-card__title.color-card__title--haven-red,
.color-card__title.color-card__title--serene-blush,
.color-card__title.color-card__title--jolly-pink,
.color-card__title.color-card__title--ascend-magenta,
.color-card__title.color-card__title--elevate-violet {
  font-family: "Berkshire Swash", "Eagle Lake", cursive;
  font-size: clamp(1.5625rem, 5vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 1px;
}

@media (max-width: 700px) {
  .color-card__title.color-card__title--haven-red,
  .color-card__title.color-card__title--serene-blush,
  .color-card__title.color-card__title--jolly-pink,
  .color-card__title.color-card__title--ascend-magenta,
  .color-card__title.color-card__title--elevate-violet {
    font-size: clamp(0.9375rem, 4.8vw, 2rem);
    letter-spacing: 0.5px;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .color-card__swatch,
  .color-card__title,
  .custom-tone__preview {
    animation: none;
  }

  .tone-border-light,
  .tone-border-light__path {
    animation: none;
  }

  .color-card__heartbeat-path {
    filter: none;
  }

  .color-card__heartbeat {
    animation: none;
    mask-image: none;
    -webkit-mask-image: none;
    opacity: 0.7;
  }
}

.color-card__hex {
  color: var(--text-muted);
  font-size: var(--tone-value-size);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.color-card__desc {
  color: var(--text-muted);
  font-size: var(--tone-description-size);
  line-height: 1.35;
}

.tone-explorer .color-grid .color-card__desc {
  font-family: "Eagle Lake", cursive;
}

.custom-tone {
  --custom-tone-color: #c80000;
  --custom-tone-preview-color: #c80000;
  --custom-tone-light: #d8d4dc;
  --custom-tone-contrast: var(--custom-tone-light);
  --spectrum-start: #880000;
  --spectrum-end: #c80000;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(216, 212, 220, 0.2);
  margin-top: calc(var(--tone-section-gap) - var(--tone-card-gap));
}

.tone-category-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: var(--tone-category-divider-gap);
  padding-top: 1rem;
  border-top: 2px solid var(--logo-rest-75);
  animation: tone-explorer-border-tone 12s linear infinite;
}

.tone-category-link {
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 0.8rem 1rem;
  border: 2px solid var(--logo-rest-75);
  border-radius: var(--radius);
  background: linear-gradient(
    135deg,
    rgba(128, 0, 128, 0.16),
    rgba(255, 0, 0, 0.1)
  );
  color: var(--text-muted);
  font-family: "Berkshire Swash", "Eagle Lake", cursive;
  font-size: clamp(1.4rem, 3.64vw, 1.82rem);
  font-weight: 400;
  letter-spacing: 2px;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  animation: tone-explorer-border-tone 12s linear infinite;
  transition: transform 0.2s ease, border-color 0.2s ease,
    background-color 0.2s ease, box-shadow 0.2s ease;
}

.tone-category-link__label {
  display: grid;
  line-height: 0.902;
}

.tone-category-link:hover,
.tone-category-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(218, 0, 109, 0.72);
  background-color: rgba(211, 0, 109, 0.1);
  box-shadow: 0 8px 22px rgba(211, 0, 109, 0.18);
  outline: none;
}

.info-page--origin.other-tones-page .info-page__title.warning-spectrum-text,
.info-page--origin.custom-tone-page .info-page__title.warning-spectrum-text {
  background-image: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

.other-tones-page .other-tones-page__message {
  background: #331125;
}

.other-tones-page .other-tones-page__message p {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: #f55a96;
}

.other-tones-page .other-tones-page__message p > span {
  flex: 1 1 auto;
  min-width: 0;
}

.other-tones-page__custom-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: #f55a96;
  font-size: 1.4em;
  line-height: 1;
  text-decoration: none;
  vertical-align: -0.08em;
}

.other-tones-page__custom-link:hover,
.other-tones-page__custom-link:focus-visible {
  color: #fff;
  outline: none;
}

.custom-tone-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
}

.custom-tone-modal[hidden] {
  display: none;
}

.custom-tone-picker-button[hidden] {
  display: none;
}

.custom-tone-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(8, 5, 9, 0.76);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  cursor: default;
}

.custom-tone-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  max-height: calc(100dvh - 2rem);
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid rgba(218, 0, 109, 0.5);
  border-radius: var(--radius);
  background: linear-gradient(
      135deg,
      rgba(128, 0, 128, 0.14),
      rgba(255, 0, 0, 0.08)
    ),
    #161216;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62),
    0 0 30px rgba(211, 0, 109, 0.15);
  overflow-y: auto;
}

.custom-tone-modal__dialog .custom-tone {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.custom-tone-modal__close {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(216, 212, 220, 0.28);
  border-radius: 50%;
  background: rgba(12, 12, 16, 0.72);
  color: #fff;
  font: inherit;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.custom-tone-modal__close:hover,
.custom-tone-modal__close:focus-visible {
  border-color: rgba(218, 0, 109, 0.75);
  background: rgba(72, 0, 42, 0.88);
  outline: none;
}

.custom-tone__heading,
.custom-tone__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.custom-tone__title {
  --tone-card-title-size: 1.66rem;
  margin-bottom: 0.2rem;
  color: var(--custom-tone-color);
  animation: card-spectrum-text 10s ease-in-out infinite;
}

.custom-tone__intro,
.custom-tone__note {
  color: var(--text-muted);
  font-size: var(--tone-body-size);
  line-height: 1.35;
}

.custom-tone__intro {
  margin-top: 0.1rem;
  font-size: calc(var(--tone-body-size) * 0.978);
}

.custom-tone__preview {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border: 2px solid rgb(216 212 220 / 72%);
  border-radius: 14px;
  background: var(--custom-tone-preview-color);
  box-shadow: 0 0 18px
    color-mix(in srgb, var(--custom-tone-preview-color) 52%, transparent);
  animation: none;
  transition: none;
}

.custom-tone__spectrum-control {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.25rem 0.15rem;
}

.custom-tone__spectrum {
  --custom-tone-spectrum-thumb: #ff0000;
  width: 100%;
  height: 44px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.custom-tone__spectrum::-webkit-slider-runnable-track {
  height: 18px;
  border: 1px solid rgb(216 212 220 / 28%);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #0c000f 0%,
    #1a001d 2.5%,
    #2a002a 5%,
    #560052 7.5%,
    #800066 10%,
    #660064 12.5%,
    #4a0038 15%,
    #a8007a 17.5%,
    #d3009e 21%,
    #a9006c 24.5%,
    #56002b 28%,
    #aa0050 31.5%,
    #da006d 35%,
    #9e003a 38.5%,
    #5b0000 42%,
    #c00019 45.5%,
    #ff0000 49%,
    #e53700 52%,
    #7a2800 55%,
    #963500 58%,
    #b84700 61%,
    #d95600 64%,
    #e86600 67%,
    #ff7a00 70%,
    #ff9400 73%,
    #c68100 76%,
    #806400 79%,
    #d6a500 82.5%,
    #ffd500 86%,
    #856e12 89.5%,
    #1e6b42 93%,
    #145c3b 96.5%,
    #006c43 100%
  );
  box-shadow: 0 0 10px rgb(211 0 109 / 24%);
}

.custom-tone__spectrum::-moz-range-track {
  height: 18px;
  border: 1px solid rgb(216 212 220 / 28%);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #0c000f 0%,
    #1a001d 2.5%,
    #2a002a 5%,
    #560052 7.5%,
    #800066 10%,
    #660064 12.5%,
    #4a0038 15%,
    #a8007a 17.5%,
    #d3009e 21%,
    #a9006c 24.5%,
    #56002b 28%,
    #aa0050 31.5%,
    #da006d 35%,
    #9e003a 38.5%,
    #5b0000 42%,
    #c00019 45.5%,
    #ff0000 49%,
    #e53700 52%,
    #7a2800 55%,
    #963500 58%,
    #b84700 61%,
    #d95600 64%,
    #e86600 67%,
    #ff7a00 70%,
    #ff9400 73%,
    #c68100 76%,
    #806400 79%,
    #d6a500 82.5%,
    #ffd500 86%,
    #856e12 89.5%,
    #1e6b42 93%,
    #145c3b 96.5%,
    #006c43 100%
  );
  box-shadow: 0 0 10px rgb(211 0 109 / 24%);
}

.custom-tone__spectrum::-webkit-slider-thumb {
  width: 32px;
  height: 32px;
  margin-top: -7px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 50%;
  background: var(--custom-tone-spectrum-thumb);
  box-shadow: 0 0 0 2px rgb(12 12 16 / 68%),
    0 0 12px var(--custom-tone-spectrum-thumb);
}

.custom-tone__spectrum::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--custom-tone-spectrum-thumb);
  box-shadow: 0 0 0 2px rgb(12 12 16 / 68%),
    0 0 12px var(--custom-tone-spectrum-thumb);
}

.custom-tone__spectrum:focus-visible {
  outline: 3px solid rgb(216 212 220 / 78%);
  outline-offset: 3px;
  border-radius: 999px;
}

.custom-tone__form {
  margin-top: 0.55rem;
}

.custom-tone__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.custom-tone__field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  color: var(--custom-tone-light);
  font-size: var(--tone-value-size);
  font-weight: 600;
}

.custom-tone__field input {
  min-width: 0;
  width: 100%;
  min-height: 42px;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgb(216 212 220 / 20%);
  border-radius: 10px;
  background: rgb(216 212 220 / 7%);
  color: var(--custom-tone-light);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.custom-tone__field input::placeholder,
.custom-tone__hex-input::placeholder,
.custom-tone__name-input::placeholder {
  color: rgb(216 212 220 / 62%);
  opacity: 1;
}

.custom-tone__field input:focus-visible {
  outline: 3px solid rgba(214, 118, 214, 0.72);
  outline-offset: 2px;
}

.custom-tone__actions {
  display: grid;
  align-items: stretch;
  justify-content: initial;
  gap: 0.7rem;
  margin-top: 0.75rem;
}

.custom-tone__code-tools {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  min-width: 0;
}

.custom-tone__hex-input,
.custom-tone__name-input {
  min-width: 0;
  width: 100%;
  min-height: 42px;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgb(216 212 220 / 20%);
  border-radius: 10px;
  background: rgb(216 212 220 / 7%);
  color: var(--custom-tone-light);
  font: inherit;
  font-size: var(--tone-value-size);
  font-variant-numeric: tabular-nums;
}

.custom-tone__hex-input {
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.custom-tone__name-input {
  letter-spacing: normal;
}

.custom-tone__hex-input:focus-visible,
.custom-tone__name-input:focus-visible {
  outline: 3px solid rgba(214, 118, 214, 0.72);
  outline-offset: 2px;
}

.custom-tone__button-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
}

.custom-tone__save-column {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  grid-column: 1 / -1;
  grid-row: 3;
}

.custom-tone__start-options {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  gap: 0.45rem;
  min-width: 0;
}

.custom-tone__save-column--actions {
  grid-column: 2;
  grid-row: 2;
}

.custom-tone__start {
  min-width: 0;
}

.custom-tone__save {
  grid-column: 2;
  grid-row: 2;
}

.custom-tone__start,
.custom-tone__save,
.custom-tone__saved-toggle {
  width: 100%;
  min-height: 42px;
  padding: 0.65rem 1rem;
  border: 1px solid rgb(216 212 220 / 22%);
  border-radius: 999px;
  font: inherit;
  font-size: var(--tone-value-size);
  font-weight: 700;
  cursor: pointer;
}

.custom-tone__start {
  background: var(--custom-tone-color);
  color: var(--custom-tone-contrast);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--custom-tone-color) 32%, transparent);
}

.custom-tone__save,
.custom-tone__saved-toggle {
  background: rgb(216 212 220 / 8%);
  color: var(--custom-tone-light);
}

.custom-tone__save:hover,
.custom-tone__saved-toggle:hover,
.custom-tone__saved-toggle[aria-expanded="true"] {
  background: rgb(216 212 220 / 15%);
}

.custom-tone__start:disabled,
.custom-tone__save:disabled {
  background: #4b424d;
  color: rgb(216 212 220 / 52%);
  cursor: not-allowed;
  box-shadow: none;
}

@keyframes custom-tone-button-spectrum {
  0%,
  100% {
    background-color: var(--logo-rest-75);
  }
  12.5%,
  87.5% {
    background-color: var(--logo-crimson-75);
  }
  25%,
  75% {
    background-color: var(--logo-hybrid-75);
  }
  37.5%,
  62.5% {
    background-color: var(--logo-aura-75);
  }
  50% {
    background-color: var(--homepage-power-highlight);
  }
}

.custom-tone--unselected .custom-tone__start:disabled,
.custom-tone--unselected .custom-tone__save:disabled {
  background-color: var(--logo-rest-75);
  color: #fff;
  box-shadow: 0 4px 14px rgba(204, 0, 68, 0.24);
  animation: custom-tone-button-spectrum 12s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .custom-tone--unselected .custom-tone__start:disabled,
  .custom-tone--unselected .custom-tone__save:disabled {
    background-color: var(--logo-rest-75);
    animation: none;
  }
}

.custom-tone__start:focus-visible,
.custom-tone__save:focus-visible,
.custom-tone__saved-toggle:focus-visible,
.custom-tone__saved-load:focus-visible,
.custom-tone__saved-delete:focus-visible {
  outline: 3px solid rgb(216 212 220 / 90%);
  outline-offset: 3px;
}

.custom-tone__saved-panel {
  width: 100%;
  padding: 0.45rem;
  border: 1px solid rgb(216 212 220 / 18%);
  border-radius: 12px;
  background: rgba(10, 8, 12, 0.86);
  overflow: hidden;
}

.custom-tone__saved-panel[hidden] {
  display: none;
}

.custom-tone__saved-list {
  --saved-code-row-height: 2.75rem;
  --saved-code-gap: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: var(--saved-code-gap);
  max-height: 10rem;
  padding: 0.1rem 0.2rem 0.1rem 0.1rem;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgb(216 212 220 / 42%) transparent;
  scrollbar-width: thin;
}

.custom-tone__saved-list::-webkit-scrollbar {
  width: 7px;
}

.custom-tone__saved-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgb(216 212 220 / 42%);
}

.custom-tone__saved-list::-webkit-scrollbar-track {
  background: transparent;
}

.custom-tone__saved-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  align-items: center;
  flex: 0 0 var(--saved-code-row-height);
  min-height: var(--saved-code-row-height);
  border: 1px solid color-mix(in srgb, var(--saved-tone-contrast) 34%, transparent);
  border-radius: 9px;
  overflow: hidden;
  background: var(--saved-tone-color);
  color: var(--saved-tone-contrast);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--saved-tone-contrast) 16%, transparent);
}

.custom-tone__saved-load {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  row-gap: 0.05rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0.35rem 0.4rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: clamp(0.68rem, 1.6vw, 0.85rem);
  text-align: left;
  cursor: pointer;
}

.custom-tone__saved-load:hover {
  background: color-mix(in srgb, var(--saved-tone-contrast) 12%, transparent);
}

.custom-tone__saved-code {
  flex: 0 0 auto;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.custom-tone__saved-rgb {
  flex: 1 1 6.5rem;
  min-width: 0;
  font-size: 0.88em;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
}

.custom-tone__saved-delete {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--saved-tone-contrast) 28%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--saved-tone-contrast) 8%, transparent);
  color: inherit;
  font: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.custom-tone__saved-delete:hover {
  background: color-mix(in srgb, var(--saved-tone-contrast) 20%, transparent);
}

.custom-tone__saved-empty {
  color: var(--text-muted);
  font-size: calc(var(--tone-value-size) * 0.85);
  line-height: 1.35;
  text-align: center;
}

.custom-tone__saved-empty[hidden] {
  display: none;
}

.custom-tone__error {
  margin-top: 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(255, 104, 104, 0.52);
  border-radius: 10px;
  background: rgba(132, 0, 0, 0.3);
  color: #ffb5b5;
  font-size: var(--tone-body-size);
  font-weight: 600;
}

.custom-tone__error[hidden] {
  display: none;
}

.custom-tone__note {
  margin-top: 0.65rem;
  font-size: calc(var(--tone-value-size) * 0.9);
  text-align: right;
}

@media (max-width: 700px) {
  :root {
    --tone-value-size: clamp(0.85rem, 2.8vw, 1.05rem);
    --tone-body-size: clamp(1rem, 3vw, 1.2rem);
    --tone-description-size: clamp(0.88rem, 2.7vw, 1.08rem);
    --tone-card-gap: 0.65rem;
    --tone-category-divider-gap: 1.47rem;
  }

  .color-card {
    border-radius: 0;
  }

  .color-grid > .color-card:first-of-type {
    border-radius: 12px 12px 0 0;
  }

  .color-grid > .color-card:last-of-type {
    border-radius: 0 0 12px 12px;
  }

  .tone-border-light__path {
    rx: 9px;
  }

  .color-card__swatch {
    min-height: 72px;
  }

  .color-card__body {
    padding: 0.75rem 0.85rem;
  }

  .color-card__title {
    font-size: clamp(1.15rem, 4vw, 1.55rem);
  }

  .color-card__hex {
    margin-bottom: 0.5rem;
  }

  .color-card__desc {
    line-height: 1.35;
  }

  .custom-tone {
    padding-top: 0.85rem;
  }

  .intro {
    padding: 0 0 1.5rem;
  }

  .tone-explorer {
    --tone-explorer-corner-offset: calc(12px - 0.8rem);
    padding: 1rem 0.8rem;
    border-radius: 12px;
  }

  .intro__light-pause {
    width: 34px;
    height: 34px;
  }

  .intro__sentence {
    white-space: normal;
  }

  .custom-tone__actions {
    align-items: stretch;
  }

  .custom-tone__code-tools {
    width: 100%;
  }

  .custom-tone__hex-input {
    width: 100%;
  }

  .custom-tone__name-input {
    width: 100%;
  }

  .custom-tone__button-row {
    gap: 0.5rem;
  }

  .custom-tone__start,
  .custom-tone__save,
  .custom-tone__saved-toggle {
    padding-right: 0.65rem;
    padding-left: 0.65rem;
  }
}

@media (max-width: 480px) {
  .custom-tone__code-tools {
    grid-template-columns: 1fr;
  }
}

/* Dedicated phone page: safer viewport behavior and touch-friendly controls. */
@media (max-width: 700px) {
  body.mobile-home-page .scroll-header {
    width: var(--homepage-full-viewport-width);
    max-width: none;
  }

  body.mobile-home-page .disclaimer-banner {
    min-height: 36px;
    padding-top: max(0.65rem, env(safe-area-inset-top));
  }

  body.mobile-home-page .disclaimer-banner > span {
    white-space: normal;
  }

  body.mobile-home-page .site-header {
    --site-header-inline-padding: 0.65rem;
    padding-right: 0.65rem;
    padding-left: 0.65rem;
  }

  body.mobile-home-page .page {
    width: 100%;
    max-width: none;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  /* Keep the mobile Origin tier within the same edges as the tone box. */
  body.mobile-home-page .info-links__button--peace {
    width: calc(var(--homepage-full-viewport-width) - 1.5rem);
    max-width: calc(var(--homepage-full-viewport-width) - 1.5rem);
  }

  /* Align content dividers to the mobile boxes, then fade at those edges. */
  body.mobile-home-page .content-divider,
  body.mobile-home-page .site-experience-divider {
    width: 100%;
    margin-left: 0;
  }

  body.home-page .spectrum-divider .aurora-divider__canvas {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 18%) 5%,
      #000 18%,
      #000 82%,
      rgb(0 0 0 / 18%) 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 18%) 5%,
      #000 18%,
      #000 82%,
      rgb(0 0 0 / 18%) 95%,
      transparent 100%
    );
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  body.mobile-home-page .content-divider .aurora-divider__canvas,
  body.mobile-home-page .site-experience-divider .aurora-divider__canvas {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 32%) 8%,
      #000 18%,
      #000 82%,
      rgb(0 0 0 / 32%) 92%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 32%) 8%,
      #000 18%,
      #000 82%,
      rgb(0 0 0 / 32%) 92%,
      transparent 100%
    );
  }

  .safari-rendering body.home-page .spectrum-divider::before {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 18%) 5%,
      #000 18%,
      #000 82%,
      rgb(0 0 0 / 18%) 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 18%) 5%,
      #000 18%,
      #000 82%,
      rgb(0 0 0 / 18%) 95%,
      transparent 100%
    );
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .safari-rendering body.mobile-home-page .content-divider::before,
  .safari-rendering body.mobile-home-page .site-experience-divider::before {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 32%) 8%,
      #000 18%,
      #000 82%,
      rgb(0 0 0 / 32%) 92%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgb(0 0 0 / 32%) 8%,
      #000 18%,
      #000 82%,
      rgb(0 0 0 / 32%) 92%,
      transparent 100%
    );
  }

  body.home-page .homepage-star-field {
    transform: none;
  }

  body.mobile-home-page .homepage-star-field {
    mix-blend-mode: normal;
  }

  body.mobile-home-page .homepage-star-field__zone {
    background-color: #28091E;
    background-blend-mode: screen;
  }

  body.mobile-home-page .warning-card__control-btn,
  body.mobile-home-page .intro__light-pause {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  body.mobile-home-page .color-card,
  body.mobile-home-page .info-links__button {
    touch-action: manipulation;
  }
}

@media (max-width: 390px) {
  body.mobile-home-page {
    --home-brand-size: clamp(2.2rem, 13vw, 2.75rem);
    --home-title-size: clamp(2rem, 11vw, 2.55rem);
    --home-card-swatch-width: 44%;
  }

  body.mobile-home-page .page {
    padding-right: 0.55rem;
    padding-left: 0.55rem;
  }
}

/* Warning card */
.warning-card {
  --warning-video-aspect: 16 / 9;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--warning-video-aspect);
  background: #331125;
  animation: none;
  border: 1px solid rgba(221, 0, 0, 0.38);
  border-radius: calc(var(--radius) * 0.5);
  padding: 0;
  margin: 1rem 0 0;
}

/* Match the warning card's divider clearance to the pyramid section. */
body.home-page .warning-card {
  margin-top: calc(var(--home-pyramid-divider-clearance) + 1.8rem);
}

.warning-card__info-controls {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  max-width: calc(100% - 1.7rem);
}

.warning-card__info-controls[hidden] {
  display: none;
}

.warning-card__media-controls {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  max-width: calc(100% - 1.7rem);
}

.warning-card__control-btn {
  width: 2.0625rem;
  height: 2.0625rem;
  padding: 0;
  border: 1px solid rgba(221, 0, 0, 0.45);
  border-radius: 6px;
  background: rgba(12, 12, 16, 0.9);
  cursor: pointer;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease,
    background 0.25s ease;
}

#warningMediaBtn,
.warning-card--video #warningMediaBtn {
  background: var(--home-tone-panel-background);
}

.warning-card__control-btn:hover {
  transform: scale(1.06);
  border-color: rgba(180, 0, 72, 0.65);
  box-shadow: 0 0 12px rgba(128, 0, 128, 0.35);
}

.warning-card__control-btn:focus-visible {
  outline: 3px solid rgba(204, 0, 68, 0.55);
  outline-offset: 2px;
}

.warning-card__control-btn-icon {
  display: block;
  width: 72%;
  height: 72%;
  overflow: visible;
}

.warning-card__control-btn-icon-path {
  vector-effect: non-scaling-stroke;
}

.warning-card__credit {
  margin: 0;
  padding: 0.375rem 0.5625rem;
  border-radius: 5px;
  border: 1px solid rgba(221, 0, 0, 0.35);
  background: rgba(12, 12, 16, 0.9);
  color: #c8b8cf;
  font-size: 0.775rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
  transition: background 0.25s ease;
}

.warning-card__credit[hidden] {
  display: none;
}

.warning-card__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  filter: brightness(0.75);
}

.warning-card__content {
  --warning-text-scale: 1;
  --warning-text-base-size: 8.9375px;
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: start;
  font-size: calc(var(--warning-text-base-size) * var(--warning-text-scale));
  padding: 1.25% 3.5% 1.5%;
  padding-right: clamp(2.75rem, 8vw, 3.25rem);
  overflow: hidden;
  transition: opacity 0.35s ease;
}

:fullscreen .warning-card__content,
html:fullscreen .warning-card__content,
html:-webkit-full-screen .warning-card__content {
  --warning-text-base-size: 10.75px;
}

.warning-card--video {
  animation: none;
}

.warning-card--video .warning-card__video {
  opacity: 1;
  pointer-events: auto;
}

.warning-card--video .warning-card__content {
  opacity: 0;
  pointer-events: none;
}

.warning-card--video .warning-card__control-btn {
  border-color: rgba(180, 0, 72, 0.55);
  box-shadow: 0 0 10px rgba(128, 0, 128, 0.28);
  background: rgba(12, 12, 16, 0.28);
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
}

.warning-card--video .warning-card__credit {
  border-color: rgba(221, 0, 0, 0.28);
  background: rgba(12, 12, 16, 0.34);
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
}

.warning-card__title {
  font-size: clamp(1rem, 1.45em, 1.5rem);
  font-weight: 600;
  margin: 0 0 0.25em;
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.warning-card__title.warning-spectrum-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--logo-rest-75);
  animation: halo-divider-tone 12s linear infinite;
}

.warning-card__title.warning-spectrum-text > * {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: inherit;
  animation: none;
}

.warning-card__title-icon {
  flex: 0 0 auto;
  width: 0.95em;
  height: 0.95em;
  background: none;
  color: inherit;
  filter: drop-shadow(0 0 5px currentColor);
  -webkit-text-fill-color: currentColor;
}

.warning-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5em;
  min-height: 0;
  height: 100%;
  width: 100%;
}

.warning-card__list li {
  position: relative;
  padding-left: 1.1em;
  color: var(--text-muted);
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.18;
}

.warning-card__list li::before {
  content: "\2022";
  position: absolute;
  top: 0.59em;
  left: 0;
  transform: translateY(-50%) scale(0.72);
  transform-origin: center;
  width: 1.1em;
  text-align: left;
  font-weight: 700;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--logo-rest-75);
  animation: halo-divider-tone 12s linear infinite;
}

.warning-card__acknowledgment {
  position: relative;
  overflow: hidden;
  display: block;
  margin-top: 0.75em;
  padding: 0.65em 0.85em;
  border: 1px solid rgba(168, 82, 168, 0.42);
  border-radius: 10px;
  background: var(--home-tone-panel-background);
  color: #f55a96;
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color 0.55s ease, background 0.55s ease,
    box-shadow 0.55s ease, color 0.55s ease;
}

.warning-card__acknowledgment input {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-content: center;
  width: 1.15em;
  height: 1.15em;
  margin: 0 0 0 0.65em;
  padding: 0;
  border: 0;
  border-radius: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: #fa78ac;
  color: #26242c;
  cursor: pointer;
  vertical-align: middle;
  transition: opacity 0.35s ease, filter 0.35s ease,
    transform 0.35s ease, background-color 0.2s ease,
    border-color 0.2s ease;
}

.warning-card__acknowledgment input:checked {
  background: #fa78ac;
}

.warning-card__acknowledgment input:checked::after {
  content: "";
  width: 0.3em;
  height: 0.58em;
  border: solid currentColor;
  border-width: 0 0.16em 0.16em 0;
  transform: rotate(45deg) translate(-0.04em, -0.08em);
}

.warning-card__acknowledgment-copy {
  position: relative;
  z-index: 1;
  transition: opacity 0.35s ease, filter 0.35s ease,
    transform 0.35s ease;
}

.warning-card__acknowledgment-thanks {
  position: absolute;
  inset: 0.65em 1.8em 0;
  z-index: 1;
  display: grid;
  place-items: start center;
  opacity: 0;
  color: #f55a96;
  letter-spacing: 0.055em;
  text-align: center;
  text-shadow: 0 0 8px rgba(255, 0, 128, 0.72);
  filter: blur(5px);
  transform: scale(0.82) translateY(0.45em);
  transition: opacity 0.6s ease 0.16s, filter 0.7s ease 0.12s,
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
  pointer-events: none;
}

.warning-card__acknowledgment--complete {
  border-color: #ff0000;
  box-shadow: inset 0 0 14px rgba(211, 0, 158, 0.16),
    0 0 14px rgba(211, 0, 158, 0.2);
  color: #f55a96;
  cursor: default;
}

.warning-card__acknowledgment--complete input,
.warning-card__acknowledgment--complete
  .warning-card__acknowledgment-copy {
  opacity: 0;
  filter: blur(4px);
  transform: scale(0.86);
  pointer-events: none;
}

.warning-card__acknowledgment--complete
  .warning-card__acknowledgment-thanks {
  opacity: 1;
  filter: blur(0);
  transform: scale(1) translateY(0);
}

.warning-card__acknowledgment input:focus-visible {
  outline: 2px solid rgba(204, 0, 68, 0.72);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .warning-card__title.warning-spectrum-text,
  .warning-card__list li::before {
    animation: none;
    background: none;
    -webkit-text-fill-color: #cc0044;
    color: #cc0044;
  }

  .warning-card__acknowledgment,
  .warning-card__acknowledgment input,
  .warning-card__acknowledgment-copy,
  .warning-card__acknowledgment-thanks {
    animation: none;
    transition: none;
  }

}

/* Info links — pyramid aligned to the full divider width. */
.info-links-panel {
  position: relative;
  isolation: isolate;
  width: var(--home-divider-width);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  margin: 0 0 2rem;
  margin-left: var(--home-divider-margin-left);
}

.pyramid-heading {
  display: block;
  width: 100%;
  margin: 0 0 1rem;
  text-align: center;
}

.info-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0;
  width: 100%;
}

.info-links__button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  padding: 3px;
  border: none;
  border-radius: 999px;
  background: transparent;
  background-size: 200% auto;
  font: inherit;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  animation: mode-link-shade-flow 10s linear infinite;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.info-links__button::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  padding: 5px;
  border-radius: inherit;
  background-image: var(--info-link-gradient);
  background-position: inherit;
  background-size: inherit;
  animation: inherit;
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.info-links__button--boost {
  width: 36%;
  max-width: 36%;
  min-height: 40px;
  --info-link-gradient: linear-gradient(
    90deg,
    #5a0048,
    #800066,
    #a60085,
    #800066,
    #5a0048
  );
}

.info-links__button--aura {
  width: 52%;
  max-width: 52%;
  min-height: 46px;
  --info-link-gradient: linear-gradient(
    90deg,
    #760047,
    #a80065,
    #ff0099,
    #a80065,
    #760047
  );
}

.info-links__button--hybrid {
  width: 69%;
  max-width: 69%;
  min-height: 52px;
  --info-link-gradient: linear-gradient(
    90deg,
    #7e0032,
    #b40048,
    #ff0066,
    #b40048,
    #7e0032
  );
}

.info-links__button--crimson {
  width: 85%;
  max-width: 85%;
  min-height: 58px;
  --info-link-gradient: linear-gradient(
    90deg,
    #600013,
    #a80022,
    #ff0033,
    #a80022,
    #600013
  );
}

.info-links__button--peace {
  width: 100%;
  max-width: 100%;
  min-height: 64px;
  --spectrum-start: #ad0000;
  --spectrum-end: #ff0000;
  animation: none;
}

.info-links__button--peace::before {
  background-color: var(--spectrum-start);
  background-image: none;
  animation: card-spectrum-fill 10s ease-in-out infinite;
}

.info-links__button-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(128, 0, 128, 0.16),
    rgba(255, 0, 0, 0.1)
  );
}

.info-links__button-text {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.35;
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: mode-link-shade-flow 10s linear infinite;
}

.info-links__button--boost .info-links__button-label {
  min-height: 36px;
  padding: 0.55rem 1rem;
}

.info-links__button--boost .info-links__button-text {
  font-size: 0.82rem;
  background-image: linear-gradient(
    90deg,
    #5a0048,
    #800066,
    #a60085,
    #800066,
    #5a0048
  );
}

.info-links__button--aura .info-links__button-label {
  min-height: 42px;
  padding: 0.65rem 1.2rem;
}

.info-links__button--aura .info-links__button-text {
  font-size: 0.86rem;
  background-image: linear-gradient(
    90deg,
    #760047,
    #a80065,
    #ff0099,
    #a80065,
    #760047
  );
}

.info-links__button--hybrid .info-links__button-label {
  min-height: 48px;
  padding: 0.8rem 1.35rem;
}

.info-links__button--hybrid .info-links__button-text {
  font-size: 0.9rem;
  background-image: linear-gradient(
    90deg,
    #7e0032,
    #b40048,
    #ff0066,
    #b40048,
    #7e0032
  );
}

.info-links__button--crimson .info-links__button-label {
  min-height: 54px;
  padding: 0.9rem 1.5rem;
}

.info-links__button--crimson .info-links__button-text {
  font-size: 0.94rem;
  background-image: linear-gradient(
    90deg,
    #600013,
    #a80022,
    #ff0033,
    #a80022,
    #600013
  );
}

.info-links__button--peace .info-links__button-label {
  min-height: 60px;
  padding: 1rem 1.6rem;
}

.info-links__button--peace .info-links__button-text {
  font-size: 0.98rem;
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: var(--spectrum-start);
  animation: card-spectrum-text 10s ease-in-out infinite;
}

/* Preserve the stepped pyramid silhouette while keeping every tier equally thick. */
.info-links__button {
  height: 64px;
  min-height: 64px;
}

.info-links__button-label {
  height: 58px;
  min-height: 58px;
}

.info-links__button .info-links__button-label {
  height: 58px;
  min-height: 58px;
  padding-block: 0;
}

.info-links__button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.info-links__button:active {
  transform: scale(0.98);
}

.info-links__button:focus-visible {
  outline: 3px solid rgba(204, 0, 68, 0.55);
  outline-offset: 3px;
}

.info-links__button--placeholder {
  cursor: default;
  pointer-events: none;
}

@keyframes mode-link-shade-flow {
  0% {
    background-position: 200% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .info-links__button,
  .info-links__button-text {
    animation: none;
  }

  .info-links__button--peace {
    background-image: none;
    background-color: #ad0000;
  }

  .info-links__button--peace::before {
    background-color: #ad0000;
    animation: none;
  }

  .info-links__button--hybrid {
    background-image: none;
    background-color: #b40048;
  }

  .info-links__button--crimson {
    background-image: none;
    background-color: #a80022;
  }

  .info-links__button--aura {
    background-image: none;
    background-color: #a80065;
  }

  .info-links__button--boost {
    background-image: none;
    background-color: #800066;
  }

  .info-links__button-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
  }

  .info-links__button--peace .info-links__button-text {
    color: #ad0000;
    animation: none;
  }

  .info-links__button--hybrid .info-links__button-text {
    color: #b40048;
  }

  .info-links__button--crimson .info-links__button-text {
    color: #a80022;
  }

  .info-links__button--aura .info-links__button-text {
    color: #a80065;
  }

  .info-links__button--boost .info-links__button-text {
    color: #800066;
  }
}

@media (max-width: 480px) {
  :root {
    --tone-value-size: clamp(0.68rem, 2.6vw, 0.82rem);
    --tone-body-size: clamp(0.72rem, 3vw, 0.88rem);
    --tone-description-size: clamp(0.66rem, 2.4vw, 0.78rem);
    --tone-card-gap: 0.4rem;
    --tone-category-divider-gap: 1.645rem;
  }

  .info-links {
    gap: 0.55rem;
  }

  .info-links-panel {
    padding: 0;
    border-radius: 0;
  }

  .info-links__button--boost {
    width: 42%;
    max-width: 42%;
    min-height: 36px;
  }

  .info-links__button--aura {
    width: 58%;
    max-width: 58%;
    min-height: 40px;
  }

  .info-links__button--hybrid {
    width: 74%;
    max-width: 74%;
    min-height: 44px;
  }

  .info-links__button--crimson {
    width: 88%;
    max-width: 88%;
    min-height: 48px;
  }

  .info-links__button--peace {
    width: 100%;
    max-width: 100%;
    min-height: 52px;
  }

  .info-links__button--boost .info-links__button-label {
    min-height: 32px;
    padding: 0.5rem 0.8rem;
  }

  .info-links__button--aura .info-links__button-label {
    min-height: 36px;
    padding: 0.55rem 0.9rem;
  }

  .info-links__button--hybrid .info-links__button-label {
    min-height: 40px;
    padding: 0.65rem 1.1rem;
  }

  .info-links__button--crimson .info-links__button-label {
    min-height: 44px;
    padding: 0.7rem 1.2rem;
  }

  .info-links__button--peace .info-links__button-label {
    min-height: 48px;
    padding: 0.8rem 1.25rem;
  }

  .info-links__button-text {
    font-size: 0.92rem;
  }

  .info-links__button--boost .info-links__button-text {
    font-size: 0.75rem;
  }

  .info-links__button--aura .info-links__button-text {
    font-size: 0.78rem;
  }

  .info-links__button--hybrid .info-links__button-text {
    font-size: 0.82rem;
  }

  .info-links__button--crimson .info-links__button-text {
    font-size: 0.86rem;
  }

  .info-links__button--peace .info-links__button-text {
    font-size: 0.9rem;
  }

  .info-links__button {
    height: 58px;
    min-height: 58px;
  }

  .info-links__button .info-links__button-label {
    height: 52px;
    min-height: 52px;
  }
}

.info-links__button .info-links__button-text {
  font-size: clamp(0.95rem, 3.5vw, 1.55rem);
  font-weight: 700;
}

.info-links__button--pyramid-top .info-links__button-text,
.info-links__button--pyramid-second .info-links__button-text,
.info-links__button--hybrid .info-links__button-text,
.info-links__button--crimson .info-links__button-text {
  font-family: "Berkshire Swash", "Eagle Lake", cursive;
  font-weight: 400;
}

.info-links__button--pyramid-top .info-links__button-text,
.info-links__button--pyramid-second .info-links__button-text,
.info-links__button--hybrid .info-links__button-text,
.info-links__button--crimson .info-links__button-text {
  letter-spacing: 4.4px;
}

.info-links__button--peace .info-links__button-text {
  font-family: "Eagle Lake", cursive;
  font-weight: 400;
}

.info-links__button--pyramid-second .info-links__button-text {
  font-size: clamp(1.1rem, 4vw, 1.65rem);
  letter-spacing: 6px;
}

.info-links__button--pyramid-top .info-links__button-text,
.info-links__button--pyramid-second .info-links__button-text,
.info-links__button--hybrid .info-links__button-text,
.info-links__button--crimson .info-links__button-text,
.info-links__button--peace .info-links__button-text {
  font-family: "Berkshire Swash", "Eagle Lake", cursive;
  font-size: clamp(1.1rem, 4vw, 1.65rem);
  font-weight: 700;
  letter-spacing: 6px;
}

.info-links__button--pyramid-top {
  width: 36%;
  max-width: 36%;
}

.info-links__button--pyramid-second {
  width: 52%;
  max-width: 52%;
}

@media (max-width: 480px) {
  .info-links__button--pyramid-top {
    width: 42%;
    max-width: 42%;
  }

  .info-links__button--pyramid-second {
    width: 58%;
    max-width: 58%;
  }
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 2rem 1rem 2.5rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  border-top: 1px solid var(--border);
}

.site-footer a {
  color: #d7a7c6;
  text-underline-offset: 0.18em;
}

.site-footer a.site-footer__beta-build {
  display: block;
  margin-top: 0.35rem;
  color: #ff0000;
}

/* Full-screen light overlay */
.light-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 2rem 1rem 5.25rem;
  transition: background-color 0.35s ease;
}

.light-overlay.light-overlay--guide-entering {
  transition: none;
}

.light-overlay--peace-guide,
.light-overlay--crimson-guide,
.light-overlay--hybrid-guide,
.light-overlay--aura-guide,
.light-overlay--boost-guide,
.light-overlay--custom-guide {
  align-items: center;
  --guide-bg: #260000;
  --guide-ring-dark: #5f0000;
  --guide-ring-bright: #ff0000;
  --guide-ring-dark-current: var(--guide-ring-dark);
  --guide-ring-bright-current: var(--guide-ring-bright);
  --guide-ring-dark-rgb: 95, 0, 0;
  --guide-ring-bright-rgb: 255, 0, 0;
  --guide-instructions-color: #ff7474;
  --guide-ring-dark-stop: 270deg;
  background: var(--guide-bg) !important;
}

.light-overlay--hybrid-guide {
  --guide-bg: #18000a;
  --guide-ring-dark: #68002A;
  --guide-ring-bright: #b40048;
  --guide-ring-dark-rgb: 104, 0, 42;
  --guide-ring-bright-rgb: 180, 0, 72;
  --guide-instructions-color: color-mix(in srgb, #ff0066 55%, white);
  --guide-ring-dark-stop: 234deg;
}

.light-overlay--crimson-guide {
  --guide-bg: rgb(12, 0, 2);
  --guide-ring-dark: rgb(30, 0, 6);
  --guide-ring-bright: rgb(80, 0, 16);
  --guide-ring-dark-rgb: 30, 0, 6;
  --guide-ring-bright-rgb: 80, 0, 16;
  --guide-instructions-color: color-mix(in srgb, #ff0033 55%, white);
  --guide-ring-dark-stop: 234deg;
}

.light-overlay--aura-guide {
  --guide-bg: rgb(12, 0, 7);
  --guide-ring-dark: rgb(30, 0, 18);
  --guide-ring-bright: rgb(80, 0, 48);
  --guide-ring-dark-rgb: 30, 0, 18;
  --guide-ring-bright-rgb: 80, 0, 48;
  --guide-instructions-color: color-mix(in srgb, #ff0099 55%, white);
  --guide-ring-dark-stop: 234deg;
}

.light-overlay--boost-guide {
  --guide-bg: #160012;
  --guide-ring-dark: #4b003c;
  --guide-ring-bright: #800066;
  --guide-ring-dark-rgb: 75, 0, 60;
  --guide-ring-bright-rgb: 128, 0, 102;
  --guide-instructions-color: color-mix(in srgb, #a60085 55%, white);
  --guide-ring-dark-stop: 234deg;
}

.light-overlay--custom-guide {
  --guide-bg: #260000;
  --guide-ring-dark: #5f0000;
  --guide-ring-bright: #ff0000;
  --guide-ring-dark-rgb: 95, 0, 0;
  --guide-ring-bright-rgb: 255, 0, 0;
  --guide-instructions-color: var(--guide-ring-bright-current);
  --guide-ring-dark-stop: 234deg;
}

.light-overlay[hidden] {
  display: none;
}

.light-overlay:fullscreen,
.light-overlay:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
}

html.tone-pseudo-fullscreen,
html.tone-pseudo-fullscreen body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* Viewport-filling fallback for phone browsers without element fullscreen. */
.light-overlay--pseudo-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  box-sizing: border-box;
}

.btn--light-exit {
  position: absolute;
  top: max(0.9rem, env(safe-area-inset-top));
  left: max(0.9rem, env(safe-area-inset-left));
  z-index: 5;
  width: auto;
  min-width: 88px;
  min-height: 42px;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(12, 12, 16, 0.42);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn--light-exit:hover {
  background: rgba(12, 12, 16, 0.58);
}

.light-custom-tone-button {
  top: calc(max(0.9rem, env(safe-area-inset-top)) + 52px);
}

.light-overlay__haven-nav {
  position: absolute;
  top: calc(max(0.9rem, env(safe-area-inset-top)) + 52px);
  left: max(0.9rem, env(safe-area-inset-left));
  z-index: 5;
  display: none;
  flex-direction: column;
  gap: 10px;
}

.light-overlay__haven-nav .btn--light-exit {
  position: static;
}

.light-overlay__haven-nav a.btn--light-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.light-overlay--haven-red .light-overlay__haven-nav {
  display: flex;
}

.light-overlay--haven-red {
  --guide-bg: #260000;
  --wall-control-bg: #3a0505;
  --guide-ring-bright-current: #ff0000;
  --guide-ring-bright-rgb: 255, 0, 0;
  --guide-instructions-color: #ff7474;
}

/* Haven Wall keeps its working light surface and shade bar intact while its
   navigation adopts the Ring page's dark, illuminated control language. */
.light-overlay--haven-red .wall-ring-control {
  border-color: transparent;
  background: var(--wall-control-bg);
  box-shadow: 0 0 16px rgba(var(--guide-ring-bright-rgb), 0.45),
    0 4px 14px rgba(var(--guide-ring-bright-rgb), 0.3);
  color: var(--guide-ring-bright-current);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.light-overlay--haven-red .wall-ring-control:hover,
.light-overlay--haven-red .wall-ring-control:focus-visible,
.light-overlay--haven-red .wall-ring-control[aria-expanded="true"],
.light-overlay--haven-red .wall-ring-control[aria-pressed="true"] {
  background: var(--wall-control-bg);
  box-shadow: 0 0 20px rgba(var(--guide-ring-bright-rgb), 0.62),
    0 5px 17px rgba(var(--guide-ring-bright-rgb), 0.42);
  filter: brightness(1.14) saturate(1.08);
}

.light-overlay--haven-red .haven-marquee-dot {
  position: absolute;
  z-index: 0;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--guide-ring-bright-current);
  box-shadow: 0 0 8px rgba(var(--guide-ring-bright-rgb), 0.96);
  opacity: 1;
  filter: brightness(1.45);
  pointer-events: none;
  animation: none;
}

.wall-page-menu {
  position: relative;
  display: flex;
}

.wall-page-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 32;
  display: grid;
  gap: 6px;
  width: 150px;
  padding: 12px;
  border: 0;
  border-radius: 14px;
  background: var(--guide-bg, #260000);
  box-shadow: 0 0 16px rgba(var(--guide-ring-bright-rgb), 0.45),
    0 4px 14px rgba(var(--guide-ring-bright-rgb), 0.3);
  overflow: visible;
}

.wall-page-menu__panel[hidden] {
  display: none;
}

.light-overlay__haven-nav
  .wall-page-menu__panel
  .wall-page-menu__item {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.72rem;
  font-size: 0.72rem;
}

.wall-instructions-panel {
  position: absolute;
  top: 0;
  right: auto;
  left: 0;
  z-index: 8;
  width: min(455px, calc(100vw - 2rem));
  max-height: min(calc(100dvh - 1rem), 720px);
  padding: 1.25rem 1.35rem;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  border: 0;
  border-radius: 18px;
  background: var(--guide-bg, #260000);
  box-shadow: 0 0 24px rgba(var(--guide-ring-bright-rgb), 0.52),
    0 18px 48px rgba(0, 0, 0, 0.42);
  color: var(--guide-instructions-color, #ff7474);
  transform: none;
}

.wall-instructions-panel[hidden] {
  display: none;
}

.wall-instructions-panel h2 {
  margin: 0 0 0.8rem;
  color: var(--guide-instructions-color, #ff7474);
  font-family: Inter, sans-serif;
  font-size: clamp(1.1rem, 3.4vmin, 1.35rem);
  font-weight: 700;
  text-align: left;
}

.wall-instructions-panel .mode-instructions {
  display: block;
  margin: 0;
  padding-left: 1.35rem;
  color: var(--guide-instructions-color, #ff7474);
  font-family: Inter, sans-serif;
  font-size: clamp(0.95rem, 2.8vmin, 1.1rem);
  font-weight: 400;
  line-height: 1.5;
}

.wall-instructions-panel li + li {
  margin-top: 0.6rem;
}

.wall-instructions-panel__compatible {
  margin: 0.75rem 0 0;
  color: var(--guide-instructions-color, #ff7474);
  font-family: Inter, sans-serif;
  font-size: clamp(0.95rem, 2.8vmin, 1.1rem);
  font-weight: 700;
  line-height: 1.5;
}

.wall-instructions-panel > .haven-marquee-dot {
  width: 4.5px;
  height: 4.5px;
}

.wall-instructions-panel--scrolling {
  scrollbar-color: var(--guide-instructions-color, #ff7474) transparent;
}

.wall-instructions-panel::-webkit-scrollbar {
  width: 4px;
}

.wall-instructions-panel::-webkit-scrollbar-track {
  background: transparent;
}

.wall-instructions-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: transparent;
  transition: background-color 150ms linear;
}

.wall-instructions-panel--scrolling::-webkit-scrollbar-thumb {
  background: var(--guide-instructions-color, #ff7474);
}

.light-overlay--haven-red .light-overlay__view-links {
  display: none;
}

/* Reserve the former instruction block's 11rem height plus 1.1rem margin as
   external space, plus the moved code row's 3.13rem, keeping the Shade bar at
   its original screen position. */
.light-overlay--haven-red .light-overlay__controls {
  margin-bottom: 15.23rem;
}

.wall-top-actions {
  position: absolute;
  top: max(0.9rem, env(safe-area-inset-top));
  right: max(0.9rem, env(safe-area-inset-right));
  z-index: 5;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: start;
  justify-items: end;
  gap: 10px;
}

.wall-top-actions .btn--light-exit {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
}

.wall-code-control {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: flex;
}

.wall-top-actions .tone-fullscreen-button--light {
  grid-column: 2;
  grid-row: 1;
}

.wall-sleep-button {
  grid-column: 2;
  grid-row: 2;
}

.wall-color-code-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 32;
  display: grid;
  gap: 10px;
  width: min(260px, calc(100vw - 1.8rem));
  padding: 12px;
  border: 0;
  border-radius: 14px;
  background: var(--guide-bg, #260000);
  box-shadow: 0 0 16px rgba(var(--guide-ring-bright-rgb), 0.45),
    0 4px 14px rgba(var(--guide-ring-bright-rgb), 0.3);
  color: var(--guide-ring-bright-current, #ff0000);
}

.wall-color-code-panel[hidden] {
  display: none;
}

.wall-color-code-panel__current {
  color: var(--guide-ring-bright-current, #ff0000);
  font-family: "Courier New", "SFMono-Regular", Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;
}

.tone-fullscreen-button--light {
  left: auto;
  right: max(0.9rem, env(safe-area-inset-right));
}

.light-paint-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
  cursor: crosshair;
}

.light-paint-canvas.is-active {
  pointer-events: auto;
}

.light-paint-button {
  top: calc(max(0.9rem, env(safe-area-inset-top)) + 52px);
  left: auto;
  right: max(0.9rem, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.light-paint-button[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(12, 12, 16, 0.68);
}

.light-overlay--haven-red
  .wall-page-menu__item.light-paint-button[aria-pressed="true"] {
  border-color: transparent;
  background: var(--wall-control-bg);
}

.light-paint-panel {
  position: absolute;
  top: calc(max(0.9rem, env(safe-area-inset-top)) + 104px);
  right: max(0.9rem, env(safe-area-inset-right));
  z-index: 7;
  display: grid;
  gap: 0.85rem;
  width: min(360px, calc(100vw - 1.8rem));
  max-height: calc(100dvh - 130px);
  padding: 1rem;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 16px;
  background: rgba(12, 12, 16, 0.88);
  color: #fff;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.light-paint-panel[hidden] {
  display: none;
}

.light-paint-panel.is-collapsed {
  display: block;
  width: auto;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.light-paint-panel.is-collapsed > :not(.light-paint-panel__expand) {
  display: none;
}

.light-paint-panel__expand {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  background: rgba(12, 12, 16, 0.88);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
  color: #fff;
  font: 700 0.9rem/1 Inter, sans-serif;
  cursor: pointer;
}

.light-paint-panel.is-collapsed .light-paint-panel__expand {
  display: inline-flex;
}

.light-paint-panel__heading,
.light-paint-range > span,
.light-paint-rgb__apply-row,
.light-paint-history {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.light-paint-panel__heading > div {
  display: grid;
  gap: 0.12rem;
}

.light-paint-panel__heading strong {
  font-size: 1rem;
}

.light-paint-panel__heading span,
.light-paint-color-section > span,
.light-paint-saved > span,
.light-paint-rgb__title {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 700;
}

.light-paint-panel__actions {
  display: flex;
  gap: 0.35rem;
}

.light-paint-panel__actions button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: 700 1.15rem/1 Inter, sans-serif;
  cursor: pointer;
}

.light-paint-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.light-paint-tools button,
.light-paint-history button,
.light-paint-rgb__apply-row button {
  min-height: 36px;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.light-paint-tools button[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.2);
}

.light-paint-range,
.light-paint-saved,
.light-paint-color-section,
.light-paint-rgb {
  display: grid;
  gap: 0.45rem;
}

.light-paint-range output {
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.light-paint-range input {
  width: 100%;
  accent-color: var(--paint-color, #ff0000);
}

.light-paint-swatches {
  display: grid;
  grid-template-columns: repeat(5, 34px);
  gap: 0.5rem;
}

.light-paint-swatches button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: var(--paint-swatch);
  cursor: pointer;
}

.light-paint-swatches button[data-paint-color="#FF0000"] {
  --paint-swatch: #ff0000;
}

.light-paint-swatches button[data-paint-color="#500010"] {
  --paint-swatch: #500010;
}

.light-paint-swatches button[data-paint-color="#B40048"] {
  --paint-swatch: #b40048;
}

.light-paint-swatches button[data-paint-color="#500030"] {
  --paint-swatch: #500030;
}

.light-paint-swatches button[data-paint-color="#800066"] {
  --paint-swatch: #800066;
}

.light-paint-swatches button[aria-pressed="true"] {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.light-paint-saved select,
.light-paint-rgb input {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  font: inherit;
}

.light-paint-saved select {
  width: 100%;
  padding: 0.45rem 0.6rem;
}

.light-paint-rgb__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.light-paint-rgb__fields label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
}

.light-paint-rgb input {
  width: 100%;
  padding: 0.4rem;
  text-align: center;
}

.light-paint-color-preview {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.66);
  border-radius: 50%;
  background: var(--paint-color, #ff0000);
}

.light-paint-rgb__apply-row strong {
  margin-right: auto;
  font-family: "Courier New", "SFMono-Regular", Consolas, monospace;
  font-size: 0.74rem;
}

.light-paint-error {
  margin: 0;
  color: #ffd6df;
  font-size: 0.68rem;
  line-height: 1.35;
}

.light-paint-history button {
  flex: 1;
}

.light-paint-history button:disabled {
  opacity: 0.38;
  cursor: default;
}

.light-overlay__controls {
  position: relative;
  z-index: 4;
}

.light-overlay--peace-guide .light-paint-button,
.light-overlay--crimson-guide .light-paint-button,
.light-overlay--hybrid-guide .light-paint-button,
.light-overlay--aura-guide .light-paint-button,
.light-overlay--boost-guide .light-paint-button,
.light-overlay--custom-guide .light-paint-button,
.light-overlay--peace-guide .light-paint-panel,
.light-overlay--crimson-guide .light-paint-panel,
.light-overlay--hybrid-guide .light-paint-panel,
.light-overlay--aura-guide .light-paint-panel,
.light-overlay--boost-guide .light-paint-panel,
.light-overlay--custom-guide .light-paint-panel,
.light-overlay--peace-guide .light-paint-canvas,
.light-overlay--crimson-guide .light-paint-canvas,
.light-overlay--hybrid-guide .light-paint-canvas,
.light-overlay--aura-guide .light-paint-canvas,
.light-overlay--boost-guide .light-paint-canvas,
.light-overlay--custom-guide .light-paint-canvas {
  display: none;
}

.light-overlay--peace-guide .wall-top-actions,
.light-overlay--crimson-guide .wall-top-actions,
.light-overlay--hybrid-guide .wall-top-actions,
.light-overlay--aura-guide .wall-top-actions,
.light-overlay--boost-guide .wall-top-actions,
.light-overlay--custom-guide .wall-top-actions {
  display: none;
}

.light-overlay--peace-guide .light-overlay__haven-nav,
.light-overlay--crimson-guide .light-overlay__haven-nav,
.light-overlay--hybrid-guide .light-overlay__haven-nav,
.light-overlay--aura-guide .light-overlay__haven-nav,
.light-overlay--boost-guide .light-overlay__haven-nav,
.light-overlay--custom-guide .light-overlay__haven-nav {
  display: none;
}

[data-fullscreen-toggle][aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.42);
}

.light-overlay--peace-guide .btn--light-exit,
.light-overlay--crimson-guide .btn--light-exit,
.light-overlay--hybrid-guide .btn--light-exit,
.light-overlay--aura-guide .btn--light-exit,
.light-overlay--boost-guide .btn--light-exit,
.light-overlay--custom-guide .btn--light-exit {
  display: none;
}

.light-overlay__controls {
  width: min(520px, 100%);
  background: rgba(12, 12, 16, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.6rem;
  box-shadow: var(--shadow);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.light-overlay__controls--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
}

.light-overlay__haven-nav,
.wall-top-actions {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.light-overlay--wall-actions-hidden #exitBtn,
.light-overlay--wall-actions-hidden .light-overlay__haven-nav,
.light-overlay--wall-actions-hidden .wall-top-actions {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-14px);
}

.light-overlay--peace-guide .light-overlay__controls,
.light-overlay--crimson-guide .light-overlay__controls,
.light-overlay--hybrid-guide .light-overlay__controls,
.light-overlay--aura-guide .light-overlay__controls,
.light-overlay--boost-guide .light-overlay__controls,
.light-overlay--custom-guide .light-overlay__controls {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-24px);
}

.peace-guide-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.peace-guide-page[aria-hidden="true"] *,
.orb-page[aria-hidden="true"] * {
  pointer-events: none !important;
}

.light-overlay--peace-guide .peace-guide-page,
.light-overlay--crimson-guide .peace-guide-page,
.light-overlay--hybrid-guide .peace-guide-page,
.light-overlay--aura-guide .peace-guide-page,
.light-overlay--boost-guide .peace-guide-page,
.light-overlay--custom-guide .peace-guide-page {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.orb-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.light-overlay--orb-view {
  background: var(--orb-bg, #190000) !important;
}

.light-overlay--orb-view .peace-guide-page {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-24px);
}

.light-overlay--orb-view .orb-page {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.orb-page-actions {
  position: absolute;
  top: max(clamp(0.5rem, min(2.4vw, 2.2vh), 0.9rem), env(safe-area-inset-top));
  left: max(clamp(0.5rem, min(2.4vw, 2.2vh), 0.9rem), env(safe-area-inset-left));
  right: max(clamp(0.5rem, min(2.4vw, 2.2vh), 0.9rem), env(safe-area-inset-right));
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.3rem, 1.4vmin, 0.6rem);
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.28s ease, transform 0.28s ease,
    visibility 0s linear;
}

.orb-page__exit,
.orb-page__shape,
.orb-page__tones,
.orb-page__template,
.orb-page__color-code,
.orb-page__fullscreen,
.orb-page__instructions {
  background: var(--orb-color, #ff0000);
  box-shadow: 0 4px 14px rgba(var(--orb-rgb, 255, 0, 0), 0.28);
}

.orb-page-actions__right {
  display: flex;
  align-self: flex-start;
  gap: clamp(0.18rem, min(1.2vw, 1.2vh), 0.55rem);
}

.orb-shape-panel,
.orb-tone-panel {
  position: absolute;
  z-index: 7;
  width: min(190px, calc(100% - 1rem));
  padding: 0.65rem;
  border: 1px solid rgba(var(--orb-rgb, 255, 0, 0), 0.42);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.78);
  box-shadow: var(--shadow);
  color: var(--orb-color, #ff0000);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.orb-shape-panel[hidden],
.orb-tone-panel[hidden] {
  display: none;
}

.orb-shape-panel__choices {
  display: grid;
  gap: 0.3rem;
}

.orb-shape-panel__choice,
.orb-shape-panel__glow {
  width: 100%;
  min-height: 34px;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(var(--orb-rgb, 255, 0, 0), 0.5);
  border-radius: 9px;
  background: transparent;
  color: var(--orb-color, #ff0000);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.orb-shape-panel__choice[aria-pressed="true"],
.orb-shape-panel__glow[aria-pressed="true"] {
  background: var(--orb-color, #ff0000);
  color: var(--orb-bg, #190000);
}

.orb-shape-panel__glow {
  margin-top: 0.5rem;
  text-align: center;
}

.orb-shape-panel__choice:focus-visible,
.orb-shape-panel__glow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.orb-tone-panel {
  display: grid;
  gap: 0.3rem;
}

.orb-tone-panel .tone-menu__choice,
.orb-tone-panel .tone-menu__action {
  width: 100%;
  min-height: 34px;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(var(--orb-rgb, 255, 0, 0), 0.5);
  border-radius: 9px;
  background: transparent;
  color: var(--orb-color, #ff0000);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.orb-tone-panel .tone-menu__choice[aria-pressed="true"] {
  background: var(--orb-color, #ff0000);
  color: var(--orb-bg, #190000);
}

.orb-tone-panel .tone-menu__action {
  border-style: dashed;
  font-size: 0.76rem;
}

.orb-tone-panel .tone-menu__choice:focus-visible,
.orb-tone-panel .tone-menu__action:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.tone-menu__divider {
  height: 1px;
  margin: 0.1rem 0;
  background: currentColor;
  opacity: 0.35;
}

.orb-template-panel {
  position: absolute;
  top: max(clamp(3.7rem, min(16vw, 10vh), 4.8rem), calc(env(safe-area-inset-top) + 3.2rem));
  left: 50%;
  right: auto;
  z-index: 6;
  width: min(178px, calc(100% - 1rem));
  padding: 0.65rem 0.7rem 0.7rem;
  border: 1px solid rgba(var(--orb-rgb, 255, 0, 0), 0.42);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: var(--shadow);
  color: var(--orb-color, #ff0000);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.orb-template-panel[hidden] {
  display: none;
}

.orb-template-panel__toggle {
  display: block;
  width: fit-content;
  min-width: 108px;
  margin: 0 auto;
  padding-right: 0.9rem;
  padding-left: 0.9rem;
  background: var(--orb-color, #ff0000);
  box-shadow: 0 4px 14px rgba(var(--orb-rgb, 255, 0, 0), 0.28);
}

.orb-template-panel__sliders {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.6rem;
}

.orb-template-panel__control {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.orb-template-panel__slider {
  width: 30px;
  height: clamp(105px, 20vh, 145px);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  direction: rtl;
  writing-mode: vertical-lr;
  cursor: pointer;
}

.orb-template-panel__slider::-webkit-slider-runnable-track {
  width: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}

.orb-template-panel__slider::-moz-range-track {
  width: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}

.orb-template-panel__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-left: -5px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--orb-bg, #190000);
  border-radius: 50%;
  background: var(--orb-color, #ff0000);
  box-shadow: 0 0 10px rgba(var(--orb-rgb, 255, 0, 0), 0.65);
}

.orb-template-panel__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--orb-bg, #190000);
  border-radius: 50%;
  background: var(--orb-color, #ff0000);
  box-shadow: 0 0 10px rgba(var(--orb-rgb, 255, 0, 0), 0.65);
}

.orb-color-code-display {
  position: absolute;
  top: max(clamp(3.7rem, min(16vw, 10vh), 4.8rem), calc(env(safe-area-inset-top) + 3.2rem));
  right: max(clamp(0.5rem, min(2.4vw, 2.2vh), 0.9rem), env(safe-area-inset-right));
  z-index: 5;
  min-width: clamp(170px, 42vmin, 230px);
  padding: clamp(0.5rem, 1.8vmin, 0.75rem)
    clamp(0.65rem, 2.4vmin, 1rem);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: rgba(8, 8, 12, 0.72);
  color: var(--orb-color, #ff0000);
  font-family: "Courier New", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(0.68rem, 2.6vmin, 0.88rem);
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-line;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.28s ease, transform 0.28s ease,
    visibility 0s linear;
}

.orb-color-code-display[hidden] {
  display: none;
}

.orb-stage {
  position: absolute;
  inset: clamp(3.4rem, 8vh, 4.5rem) 0 clamp(12.5rem, 28vh, 15rem);
  overflow: visible;
  touch-action: none;
}

.orb-motion-template {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: var(--orb-template-size, 480px);
  max-width: calc(100% - 1rem);
  max-height: calc(100% - 1rem);
  aspect-ratio: 1;
  color: var(--orb-color, #ff0000);
  filter: drop-shadow(0 0 5px rgba(var(--orb-rgb, 255, 0, 0), 0.4));
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.orb-motion-template #orbMotionTemplateCircle {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.72;
  stroke-linecap: round;
  pointer-events: none;
}

.orb-motion-template__hit-area {
  fill: none;
  stroke: rgba(0, 0, 0, 0.001);
  stroke-width: 7;
  cursor: grab;
  pointer-events: stroke;
}

.orb-motion-template__drawing {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.orb-motion-template__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: var(--orb-template-dot-size, 14px);
  aspect-ratio: 1;
  border: 1px solid var(--orb-bg, #190000);
  border-radius: 50%;
  background: var(--orb-color, #ff0000);
  box-shadow: 0 0 10px rgba(var(--orb-rgb, 255, 0, 0), 0.72);
  transform: translate(-50%, -50%);
  cursor: grab;
  pointer-events: auto;
}

.orb-motion-template--dragging .orb-motion-template__hit-area,
.orb-motion-template--dragging + .orb-motion-template__dot {
  cursor: grabbing;
}

.orb-motion-template[hidden],
.orb-motion-template__dot[hidden] {
  display: none;
}

.tone-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: var(--orb-render-size, 218px);
  aspect-ratio: 1;
  border: 1px solid rgba(var(--orb-rgb, 255, 0, 0), 0.95);
  border-radius: 50%;
  background: var(--orb-color, #ff0000);
  box-shadow:
    0 0 clamp(16px, 4vmin, 34px)
      rgba(var(--orb-glow-rgb, 255, 0, 0), var(--orb-glow-near-alpha, 0.82)),
    0 0 clamp(34px, 9vmin, 82px)
      rgba(var(--orb-glow-rgb, 255, 0, 0), var(--orb-glow-mid-alpha, 0.5)),
    0 0 clamp(70px, 17vmin, 150px)
      rgba(var(--orb-glow-rgb, 255, 0, 0), var(--orb-glow-far-alpha, 0.24));
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: left, top;
}

.tone-orb--dragging {
  cursor: grabbing;
}

.tone-orb--shaped {
  --orb-shape-light: color-mix(in srgb, var(--orb-color, #ff0000) 76%, white);
  --orb-shape-dark: color-mix(in srgb, var(--orb-color, #ff0000) 72%, black);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: translate(-50%, -50%) rotate(var(--flight-heading, 0deg));
  transition: left 95ms linear, top 95ms linear, transform 160ms ease-out;
  will-change: left, top, transform;
}

.tone-orb[data-shape="butterfly"] {
  --orb-shape-dark: color-mix(in srgb, var(--orb-color, #ff0000) 33%, black);
}

.tone-orb[data-shape="eagle"] {
  --orb-shape-dark: color-mix(in srgb, var(--orb-color, #ff0000) 38%, black);
  transform: translate(-50%, -50%) rotate(var(--eagle-pitch, 0deg)) scaleX(var(--eagle-facing, 1));
}

.tone-orb[data-shape="bird"] {
  --owl-outline: color-mix(in srgb, var(--orb-color, #ff0000) 30%, #24100d);
  --owl-highlight: color-mix(in srgb, var(--orb-color, #ff0000) 72%, #ffd180);
  --owl-shadow: color-mix(in srgb, var(--orb-color, #ff0000) 82%, #5d2219);
  transform: translate(-50%, -50%) rotate(var(--owl-pitch, 0deg)) scaleX(var(--owl-facing, 1));
  transition: left 95ms linear, top 95ms linear;
}

.tone-orb__blob {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 94%;
  height: 68%;
  border: 1px solid rgba(var(--orb-rgb, 255, 0, 0), 0.92);
  border-radius: 68% 32% 59% 41% / 38% 63% 37% 62%;
  background:
    radial-gradient(
      circle at 68% 30%,
      color-mix(in srgb, var(--orb-color, #ff0000) 84%, white) 0 5%,
      transparent 22%
    ),
    radial-gradient(
      circle at 25% 74%,
      color-mix(in srgb, var(--orb-color, #ff0000) 82%, black) 0 7%,
      transparent 28%
    ),
    var(--orb-color, #ff0000);
  box-shadow:
    0 0 clamp(16px, 4vmin, 34px)
      rgba(var(--orb-glow-rgb, 255, 0, 0), var(--orb-glow-near-alpha, 0.82)),
    0 0 clamp(34px, 9vmin, 82px)
      rgba(var(--orb-glow-rgb, 255, 0, 0), var(--orb-glow-mid-alpha, 0.5)),
    0 0 clamp(70px, 17vmin, 150px)
      rgba(var(--orb-glow-rgb, 255, 0, 0), var(--orb-glow-far-alpha, 0.24));
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
  will-change: border-radius, transform;
}

.tone-orb__blob::before,
.tone-orb__blob::after {
  content: "";
  position: absolute;
  background: var(--orb-color, #ff0000);
  pointer-events: none;
}

.tone-orb__blob::before {
  left: 18%;
  bottom: -19%;
  width: 23%;
  height: 40%;
  border-radius: 38% 62% 57% 43% / 24% 34% 66% 76%;
  transform: rotate(13deg);
}

.tone-orb__blob::after {
  right: -5%;
  top: 35%;
  width: 24%;
  height: 33%;
  border-radius: 72% 28% 61% 39% / 46% 72% 28% 54%;
  transform: rotate(-11deg);
}

.tone-orb[data-shape="blob"] .tone-orb__blob {
  display: block;
}

.tone-orb__art {
  display: none;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 0 clamp(8px, 2vmin, 18px) rgba(var(--orb-glow-rgb, 255, 0, 0), var(--orb-glow-near-alpha, 0.82)))
    drop-shadow(0 0 clamp(18px, 5vmin, 42px) rgba(var(--orb-glow-rgb, 255, 0, 0), var(--orb-glow-mid-alpha, 0.5)));
  pointer-events: none;
}

.tone-orb[data-shape="bird"] .tone-orb__art--owl,
.tone-orb[data-shape="butterfly"] .tone-orb__art--butterfly,
.tone-orb[data-shape="flower"] .tone-orb__art--flower,
.tone-orb[data-shape="eagle"] .tone-orb__art--eagle {
  display: block;
}

.tone-orb__flower-petal {
  fill: color-mix(in srgb, var(--orb-color, #ff0000) 96%, white);
  stroke: color-mix(in srgb, var(--orb-color, #ff0000) 94%, black);
  stroke-width: 1.5;
}

.tone-orb__flower-center {
  fill: var(--orb-color, #ff0000);
  stroke: color-mix(in srgb, var(--orb-color, #ff0000) 92%, black);
  stroke-width: 2;
}

.tone-orb__main {
  fill: var(--orb-color, #ff0000);
}

.tone-orb__light {
  fill: var(--orb-shape-light, #ff5555);
}

.tone-orb__detail {
  fill: var(--orb-shape-dark, #990000);
}

.tone-orb__owl-face {
  fill: var(--orb-owl-face, #fff1f1);
  stroke: var(--owl-outline, #30100d);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.tone-orb__owl-body {
  fill: url(#owlToneBodyGradient);
  stroke: var(--owl-outline, #30100d);
  stroke-width: 3.5;
  stroke-linejoin: round;
}

.tone-orb__owl-gradient-top {
  stop-color: var(--owl-highlight, #ff8c44);
}

.tone-orb__owl-gradient-middle {
  stop-color: var(--orb-color, #ff0000);
}

.tone-orb__owl-gradient-bottom {
  stop-color: var(--owl-shadow, #d80c05);
}

.tone-orb__owl-belly {
  fill: var(--owl-shadow, #d80c05);
  opacity: 0.58;
}

.tone-orb__owl-wing {
  fill: var(--owl-highlight, #ff8c44);
  stroke: var(--owl-outline, #30100d);
  stroke-width: 2.8;
  stroke-linejoin: round;
}

.tone-orb__owl-forehead {
  fill: var(--owl-highlight, #ff8c44);
}

.tone-orb__owl-brow-lines {
  fill: none;
  stroke: var(--owl-shadow, #b52011);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.tone-orb__owl-eye {
  fill: #fffaf0;
  stroke: var(--owl-outline, #30100d);
  stroke-width: 2.6;
}

.tone-orb__owl-iris {
  fill: color-mix(in srgb, var(--orb-color, #ff0000) 38%, #985118);
}

.tone-orb__owl-pupil {
  fill: #24100d;
}

.tone-orb__owl-eye-glint {
  fill: #ffffff;
}

.tone-orb__owl-glasses {
  fill: none;
  stroke: var(--orb-color, #ff0000);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 1.2px 0 var(--owl-outline, #30100d))
    drop-shadow(0 -1.2px 0 var(--owl-outline, #30100d));
}

.tone-orb__owl-flight .tone-orb__owl-glasses {
  stroke-width: 3;
  filter:
    drop-shadow(0 0.8px 0 var(--owl-outline, #30100d))
    drop-shadow(0 -0.8px 0 var(--owl-outline, #30100d));
}

.tone-orb__owl-beak {
  fill: color-mix(in srgb, var(--orb-color, #ff0000) 30%, #e99a20);
  stroke: var(--owl-outline, #30100d);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.tone-orb__owl-feathers {
  fill: none;
  stroke: var(--owl-highlight, #ff8c44);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tone-orb__owl-feet {
  fill: color-mix(in srgb, var(--orb-color, #ff0000) 30%, #e99a20);
  stroke: var(--owl-outline, #30100d);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.tone-orb__owl-wing-lines {
  fill: none;
  stroke: var(--owl-shadow, #b52011);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.tone-orb__owl-flight,
.tone-orb--flying .tone-orb__owl-perched {
  display: none;
}

.tone-orb--flying .tone-orb__owl-flight {
  display: block;
}

.tone-orb__eagle-accent {
  fill: var(--orb-eagle-accent, var(--orb-color, #ff0000));
}

.tone-orb__eagle-foot {
  fill: var(--orb-eagle-accent, var(--orb-color, #ff0000));
  stroke: color-mix(in srgb, var(--orb-color, #ff0000) 72%, black);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.tone-orb__eagle-wing {
  fill: color-mix(in srgb, var(--orb-color, #ff0000) 84%, black);
}

.tone-orb__eagle-beak {
  fill: var(--orb-eagle-accent, var(--orb-color, #ff0000));
  stroke: var(--orb-shape-dark);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.tone-orb__eagle-feathers {
  fill: none;
  stroke: var(--orb-shape-dark);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.5;
}

.tone-orb__eagle-flight,
.tone-orb--flying .tone-orb__eagle-perched {
  display: none;
}

.tone-orb--flying .tone-orb__eagle-flight {
  display: block;
}

.tone-orb--glow-off {
  box-shadow: none;
}

.tone-orb--glow-off .tone-orb__art {
  filter: none;
}

.tone-orb--glow-off .tone-orb__blob {
  box-shadow: none;
}

.tone-orb__wing {
  transform-box: fill-box;
}

.tone-orb--flying .tone-orb__wing--owl-flight-near {
  transform-origin: left center;
  animation: orb-owl-flight-wing-near 1s ease-in-out infinite;
}

.tone-orb--flying .tone-orb__wing--owl-flight-far {
  transform-origin: right center;
  animation: orb-owl-flight-wing-far 1s ease-in-out -0.5s infinite;
}

.tone-orb--flying .tone-orb__wing--butterfly-left {
  transform-origin: right center;
  animation: orb-butterfly-flap 0.28s ease-in-out infinite alternate;
}

.tone-orb--flying .tone-orb__wing--butterfly-right {
  transform-origin: left center;
  animation: orb-butterfly-flap 0.28s ease-in-out infinite alternate;
}

.tone-orb--flying .tone-orb__wing--eagle-near,
.tone-orb--flying .tone-orb__wing--eagle-far {
  transform-box: view-box;
  transform-origin: 128px 124px;
  animation: orb-eagle-flap 0.64s ease-in-out infinite;
}

.tone-orb--flying .tone-orb__wing--eagle-far {
  animation-delay: -0.08s;
  opacity: 0.8;
}

.tone-orb--flying .tone-orb__blob {
  animation: orb-blob-flow 0.62s ease-in-out infinite alternate;
}

@keyframes orb-owl-flight-wing-near {
  0%, 100% { transform: rotate(8deg) scaleX(0.96) scaleY(0.82); }
  50% { transform: rotate(-16deg) scaleX(1.22) scaleY(1.14); }
}

@keyframes orb-owl-flight-wing-far {
  0%, 100% { transform: rotate(-10deg) scaleX(0.9) scaleY(0.72); }
  50% { transform: rotate(13deg) scaleX(1.18) scaleY(1.12); }
}

@keyframes orb-butterfly-flap {
  to { transform: scaleX(0.48); }
}

@keyframes orb-eagle-flap {
  0%, 100% { transform: rotate(8deg) scaleY(1); }
  50% { transform: rotate(-12deg) scaleY(-0.7); }
}

@keyframes orb-blob-flow {
  0% {
    border-radius: 72% 28% 48% 52% / 32% 68% 31% 69%;
    transform: translate(-50%, -50%) scaleX(1.08) scaleY(0.92) skewX(-2deg) rotate(-2deg);
  }
  100% {
    border-radius: 55% 45% 69% 31% / 61% 35% 65% 39%;
    transform: translate(-50%, -50%) scaleX(1.16) scaleY(0.84) skewX(3deg) rotate(2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tone-orb--shaped {
    transition: none;
  }

  .tone-orb--flying .tone-orb__wing {
    animation: none;
  }

  .tone-orb--flying .tone-orb__blob {
    animation: none;
  }
}

html.orb-dragging,
html.orb-dragging * {
  cursor: none !important;
}

.orb-controls {
  position: absolute;
  left: 50%;
  bottom: clamp(3.6rem, min(15vw, 11vh), 4.9rem);
  z-index: 4;
  width: min(640px, calc(100% - 1rem));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.35rem, min(1.7vw, 1.5vh), 0.65rem);
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  transition: opacity 0.28s ease, transform 0.28s ease,
    visibility 0s linear;
}

.orb-controls .peace-ring-control {
  color: var(--orb-color, #ff0000);
  background: rgba(0, 0, 0, 0.22);
}

/* Match the ring controls: the track uses the live page background color. */
.orb-controls .peace-ring-control__slider {
  background: var(--orb-bg, #190000);
}

.orb-controls .peace-ring-control__slider::-webkit-slider-runnable-track {
  background: var(--orb-bg, #190000);
  border-radius: 999px;
}

.orb-controls .peace-ring-control__slider::-moz-range-track {
  background: var(--orb-bg, #190000);
  border-radius: 999px;
}

@supports (background: color-mix(in srgb, black, white)) {
  .orb-shape-panel,
  .orb-tone-panel,
  .orb-template-panel {
    background: color-mix(in srgb, var(--orb-bg, #190000) 88%, black);
  }

  .orb-controls .peace-ring-control {
    background: color-mix(in srgb, var(--orb-bg, #190000) 80%, black);
  }
}

.orb-controls .peace-ring-control__slider::-webkit-slider-thumb {
  background: var(--orb-color, #ff0000);
  border-color: var(--orb-bg, #190000);
  box-shadow: 0 0 12px rgba(var(--orb-rgb, 255, 0, 0), 0.65);
}

.orb-controls .peace-ring-control__slider::-moz-range-thumb {
  background: var(--orb-color, #ff0000);
  border-color: var(--orb-bg, #190000);
  box-shadow: 0 0 12px rgba(var(--orb-rgb, 255, 0, 0), 0.65);
}

.orb-page-nav {
  position: absolute;
  top: calc(
    max(clamp(0.5rem, min(2.4vw, 2.2vh), 0.9rem), env(safe-area-inset-top)) +
      clamp(34px, min(9vw, 6vh), 42px) + clamp(0.35rem, 1.8vmin, 0.7rem)
  );
  left: max(clamp(0.5rem, min(2.4vw, 2.2vh), 0.9rem), env(safe-area-inset-left));
  bottom: auto;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.35rem, 1.8vmin, 0.7rem);
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.28s ease, transform 0.28s ease,
    visibility 0s linear;
}

.orb-page--controls-hidden .orb-page-actions,
.orb-page--controls-hidden .orb-shape-panel,
.orb-page--controls-hidden .orb-tone-panel,
.orb-page--controls-hidden .orb-template-panel,
.orb-page--controls-hidden .orb-color-code-display,
.orb-page--controls-hidden .orb-instructions-panel,
.orb-page--controls-hidden .orb-controls,
.orb-page--controls-hidden .orb-page-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease,
    visibility 0s linear 0.28s;
}

.orb-page--controls-hidden .orb-page-actions,
.orb-page--controls-hidden .orb-shape-panel,
.orb-page--controls-hidden .orb-tone-panel,
.orb-page--controls-hidden .orb-template-panel,
.orb-page--controls-hidden .orb-color-code-display,
.orb-page--controls-hidden .orb-instructions-panel {
  transform: translateY(-8px);
}

.orb-page--controls-hidden .orb-controls,
.orb-page--controls-hidden .orb-page-nav {
  transform: translateY(8px);
}

.orb-page--controls-hidden .ring-page-button {
  pointer-events: none;
}

.ring-page-actions {
  position: absolute;
  top: max(clamp(0.5rem, min(2.4vw, 2.2vh), 0.9rem), env(safe-area-inset-top));
  left: max(clamp(0.5rem, min(2.4vw, 2.2vh), 0.9rem), env(safe-area-inset-left));
  right: max(clamp(0.5rem, min(2.4vw, 2.2vh), 0.9rem), env(safe-area-inset-right));
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear;
}

.ring-page-actions__right {
  display: flex;
  gap: clamp(0.18rem, min(1.2vw, 1.2vh), 0.55rem);
  pointer-events: auto;
}

.orb-page-actions__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.26rem, min(1.1vw, 1vh), 0.45rem);
}

.haven-page-return {
  display: none;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view) .haven-page-return {
  display: inline-flex;
}

.ring-shape-menu,
.ring-tone-menu {
  position: relative;
  display: inline-flex;
}

.haven-ring-menu {
  position: relative;
  display: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view) .haven-ring-menu {
  display: inline-flex;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  #ringCustomToneBtn {
  display: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view) .ring-shape-menu,
.light-overlay--peace-guide:not(.light-overlay--orb-view) .ring-tone-menu {
  display: contents;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view) #ringShapeBtn,
.light-overlay--peace-guide:not(.light-overlay--orb-view) #ringToneBtn,
.light-overlay--peace-guide:not(.light-overlay--orb-view) #ringDirectionBtn,
.light-overlay--peace-guide:not(.light-overlay--orb-view) #ringCountBtn,
.light-overlay--peace-guide:not(.light-overlay--orb-view) #ringInstructionsBtn,
.light-overlay--peace-guide:not(.light-overlay--orb-view) #ringPresetsToggle {
  display: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view) .ring-page-actions__right {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: repeat(3, auto);
  align-items: start;
  justify-items: end;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view) .ring-page-actions {
  align-items: flex-start;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view) #ringColorCodeBtn {
  grid-column: 1;
  grid-row: 1;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view) #ringFullscreenBtn {
  grid-column: 2;
  grid-row: 1;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view) #ringSleepBtn {
  grid-column: 2;
  grid-row: 2;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view) #ringPauseBtn {
  grid-column: 2;
  grid-row: 3;
}

.haven-ring-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  z-index: 32;
  display: grid;
  gap: 6px;
  width: 150px;
  padding: 12px;
  border: 0;
  border-radius: 14px;
  background: var(--guide-bg);
  box-shadow: 0 4px 14px rgba(var(--guide-ring-bright-rgb), 0.3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

.haven-ring-menu__panel[hidden] {
  display: none;
}

.haven-ring-menu__panel > button {
  position: relative;
  z-index: 1;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
}

.haven-ring-menu__panel > button:hover,
.haven-ring-menu__panel > button:focus-visible {
  border-color: rgba(var(--guide-ring-bright-rgb), 0.78);
  background: rgba(var(--guide-ring-bright-rgb), 0.32);
}

.haven-ring-menu__panel > button:active,
.haven-ring-menu__panel > button[aria-expanded="true"] {
  border-color: var(--guide-ring-bright-current);
  background: rgba(var(--guide-ring-bright-rgb), 0.12);
  box-shadow: 0 0 16px rgba(var(--guide-ring-bright-rgb), 0.42);
  color: #fff;
}

.light-overlay--peace-guide .ring-menu-linked-panel {
  position: fixed;
  top: var(--ring-menu-panel-top);
  z-index: 34;
}

.light-overlay--peace-guide .ring-menu-linked-panel[data-ring-menu-side="left"] {
  right: var(--ring-menu-panel-right);
  left: auto;
}

.light-overlay--peace-guide .ring-menu-linked-panel[data-ring-menu-side="right"] {
  right: auto;
  left: var(--ring-menu-panel-left);
}

.light-overlay--peace-guide .ring-instructions-panel.ring-menu-linked-panel {
  width: min(330px, calc(100vw - 180px));
}

.light-overlay--peace-guide .ring-presets-panel.ring-menu-linked-panel {
  width: min(260px, calc(100vw - 180px));
  max-height: min(360px, calc(100dvh - 16px));
}

.ring-layers-panel {
  display: grid;
  gap: 10px;
  width: min(240px, calc(100vw - 180px));
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
}

.ring-layers-panel[hidden] {
  display: none;
}

.ring-layers-panel__list {
  display: grid;
  gap: 6px;
}

.ring-layers-panel__ring,
.ring-layers-panel__add {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(var(--guide-ring-bright-rgb), 0.24);
  border-radius: 999px;
  background: var(--guide-bg);
  box-shadow: 0 0 12px rgba(var(--guide-ring-bright-rgb), 0.3);
  color: var(--guide-ring-bright-current);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.ring-layers-panel__ring[hidden],
.ring-layers-panel__add[hidden] {
  display: none;
}

.ring-layers-panel__ring::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: var(--ring-layer-swatch, var(--guide-ring-bright-current));
  box-shadow: 0 0 8px var(--ring-layer-swatch, var(--guide-ring-bright-current));
}

.ring-layers-panel__ring[aria-pressed="true"] {
  border-color: rgba(var(--guide-ring-bright-rgb), 0.72);
  box-shadow: 0 0 18px rgba(var(--guide-ring-bright-rgb), 0.58);
}

.ring-layers-panel__ring:hover,
.ring-layers-panel__ring:focus-visible,
.ring-layers-panel__add:hover,
.ring-layers-panel__add:focus-visible {
  filter: brightness(1.14) saturate(1.08);
  outline: none;
  box-shadow: 0 0 16px rgba(var(--guide-ring-bright-rgb), 0.5);
}

.ring-layers-panel__code {
  margin-left: auto;
  font-family: "Courier New", "SFMono-Regular", Consolas, monospace;
  font-size: 0.62rem;
  white-space: nowrap;
  opacity: 0.82;
}

.ring-layers-panel__add {
  justify-content: center;
  border-style: dashed;
}

.ring-layer-rgb {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(var(--guide-ring-bright-rgb), 0.28);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.ring-layer-rgb[hidden] {
  display: none;
}

.ring-layer-rgb__heading,
.ring-layer-rgb__channel {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 7px;
}

.ring-layer-rgb__heading {
  grid-template-columns: minmax(0, 1fr) auto;
  color: var(--guide-ring-bright-current);
  font-size: 0.7rem;
}

.ring-layer-rgb__heading output,
.ring-layer-rgb__channel output {
  font-family: "Courier New", "SFMono-Regular", Consolas, monospace;
}

.ring-layer-rgb__channel {
  color: var(--guide-ring-bright-current);
  font-size: 0.7rem;
  font-weight: 700;
}

.ring-layer-rgb__channel input {
  width: 100%;
  height: 4px;
  margin: 0;
  border-radius: 999px;
  accent-color: var(--ring-layer-editor-color, var(--guide-ring-bright-current));
  cursor: pointer;
}

.ring-layer-rgb__channel output {
  text-align: right;
}

.ring-shape-panel,
.ring-tone-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 0.35rem;
  width: max-content;
  min-width: 132px;
  padding: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ring-shape-panel[hidden],
.ring-tone-panel[hidden] {
  display: none;
}

.ring-shape-panel__choice {
  min-height: 34px;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.ring-shape-panel__choice:hover {
  background: rgba(255, 255, 255, 0.16);
}

.ring-shape-panel__choice[aria-pressed="true"] {
  border-color: var(--guide-ring-bright-current);
  background: rgba(var(--guide-ring-bright-rgb), 0.3);
  box-shadow: 0 0 12px rgba(var(--guide-ring-bright-rgb), 0.22);
}

.ring-tone-panel .tone-menu__choice,
.ring-tone-panel .tone-menu__action {
  min-height: 34px;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.ring-tone-panel .tone-menu__choice:hover,
.ring-tone-panel .tone-menu__action:hover {
  background: rgba(255, 255, 255, 0.16);
}

.ring-tone-panel .tone-menu__choice[aria-pressed="true"] {
  border-color: var(--guide-ring-bright-current);
  background: rgba(var(--guide-ring-bright-rgb), 0.3);
  box-shadow: 0 0 12px rgba(var(--guide-ring-bright-rgb), 0.22);
}

.ring-tone-panel .tone-menu__action {
  border-style: dashed;
  font-size: 0.68rem;
}

.ring-tone-panel .tone-menu__choice:focus-visible,
.ring-tone-panel .tone-menu__action:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.ring-page-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(34px, min(9vw, 6vh), 42px);
  padding: clamp(0.35rem, min(1.8vw, 1.5vh), 0.65rem)
    clamp(0.42rem, min(2.2vw, 1.8vh), 0.85rem);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: var(--guide-ring-bright-current);
  box-shadow: 0 4px 14px rgba(var(--guide-ring-bright-rgb), 0.28);
  color: var(--guide-bg, #160012);
  font: inherit;
  font-size: clamp(0.62rem, min(3vw, 1.8vh), 0.82rem);
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  transition: background-color 0.15s ease, box-shadow 0.15s ease,
    filter 0.15s ease, transform 0.15s ease;
}

.ring-page-button:hover {
  filter: brightness(1.12);
}

.ring-page-button:active {
  transform: scale(0.97);
}

.ring-page-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.ring-page-button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55),
    0 4px 14px rgba(var(--guide-ring-bright-rgb), 0.28);
}

/* Ring controls echo Haven's rounded marquee: the ring-page background colors
   both the face and rim, while the live tone colors the type and rim bulbs. */
.light-overlay--peace-guide:not(.light-overlay--orb-view) .ring-page-button,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-menu__panel
  > button {
  min-height: clamp(42px, min(10vw, 6.5vh), 48px);
  padding: clamp(0.5rem, min(2vw, 1.7vh), 0.68rem)
    clamp(0.72rem, min(2.8vw, 2.2vh), 1rem);
  border: 0;
  border-radius: 999px;
  background: var(--guide-bg);
  box-shadow: 0 4px 14px rgba(var(--guide-ring-bright-rgb), 0.3);
  color: var(--guide-ring-bright-current);
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
  overflow: hidden;
  transition: box-shadow 0.18s ease, filter 0.18s ease,
    transform 0.18s ease;
}

/* Scale every Ring page by device state without changing any Orb page.
   Desktop and desktop fullscreen are 150%; phone is 110%
   of the established Ring control size. */
.light-overlay--peace-guide:not(.light-overlay--orb-view) {
  --haven-ring-control-scale: 1.5;
  --haven-ring-nav-extra-offset: 24px;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view) .ring-page-button,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-menu__panel
  > button {
  zoom: var(--haven-ring-control-scale);
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-marquee-dot {
  position: absolute;
  z-index: 0;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--guide-ring-bright-current);
  box-shadow: 0 0 2.5px rgba(var(--guide-ring-bright-rgb), 0.58);
  opacity: 0.55;
  filter: brightness(0.92);
  pointer-events: none;
  animation: haven-marquee-dot-counterclockwise 4.2s linear infinite;
  animation-delay: var(--haven-marquee-delay, 0s);
}

@keyframes haven-marquee-dot-counterclockwise {
  0%,
  2% {
    opacity: 1;
    filter: brightness(1.45);
    box-shadow: 0 0 8px rgba(var(--guide-ring-bright-rgb), 0.96);
  }
  8%,
  100% {
    opacity: 0.55;
    filter: brightness(0.92);
    box-shadow: 0 0 2.5px rgba(var(--guide-ring-bright-rgb), 0.58);
  }
}

.light-overlay--haven-marquee-paused .haven-marquee-dot {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .light-overlay--peace-guide:not(.light-overlay--orb-view)
    .haven-marquee-dot {
    animation: none;
    opacity: 1;
    filter: none;
    box-shadow: 0 0 4px rgba(var(--guide-ring-bright-rgb), 0.78);
  }
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-menu__panel
  > button {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(var(--guide-ring-bright-rgb), 0.24);
  font-size: 0.72rem;
  box-shadow: 0 0 12px rgba(var(--guide-ring-bright-rgb), 0.38);
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-menu__panel
  > button[data-haven-ring-action="instructions"] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 0;
  padding-left: 0;
  text-align: center;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .ring-menu-linked-panel {
  padding: 12px;
  border: 0;
  border-radius: 14px;
  background: var(--guide-bg);
  box-shadow: 0 4px 14px rgba(var(--guide-ring-bright-rgb), 0.3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .ring-shape-panel.ring-menu-linked-panel,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .ring-tone-panel.ring-menu-linked-panel {
  gap: 6px;
  width: 150px;
  min-width: 150px;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
    .ring-shape-panel.ring-menu-linked-panel
    .ring-shape-panel__choice,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
    .ring-tone-panel.ring-menu-linked-panel
    .tone-menu__choice,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
    .ring-tone-panel.ring-menu-linked-panel
    .tone-menu__action {
  min-height: 44px;
  padding: 0.5rem 0.72rem;
  border: 1px solid rgba(var(--guide-ring-bright-rgb), 0.24);
  border-radius: 999px;
  background: var(--guide-bg);
  box-shadow: 0 0 12px rgba(var(--guide-ring-bright-rgb), 0.38);
  color: var(--guide-ring-bright-current);
  font-size: 0.72rem;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
    .ring-shape-panel.ring-menu-linked-panel
    .ring-shape-panel__choice:hover,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
    .ring-shape-panel.ring-menu-linked-panel
    .ring-shape-panel__choice:focus-visible,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
    .ring-tone-panel.ring-menu-linked-panel
    .tone-menu__choice:hover,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
    .ring-tone-panel.ring-menu-linked-panel
    .tone-menu__choice:focus-visible,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
    .ring-tone-panel.ring-menu-linked-panel
    .tone-menu__action:hover,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
    .ring-tone-panel.ring-menu-linked-panel
    .tone-menu__action:focus-visible {
  filter: brightness(1.14) saturate(1.08);
  box-shadow: 0 0 16px rgba(var(--guide-ring-bright-rgb), 0.5);
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
    .ring-shape-panel.ring-menu-linked-panel
    .ring-shape-panel__choice[aria-pressed="true"],
.light-overlay--peace-guide:not(.light-overlay--orb-view)
    .ring-tone-panel.ring-menu-linked-panel
    .tone-menu__choice[aria-pressed="true"] {
  border-color: rgba(var(--guide-ring-bright-rgb), 0.7);
  filter: brightness(1.2) saturate(1.12);
  box-shadow: 0 0 20px rgba(var(--guide-ring-bright-rgb), 0.62);
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
    .ring-page-button:hover,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-menu__panel
  > button:hover,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-menu__panel
  > button:focus-visible {
  filter: brightness(1.14) saturate(1.08);
  box-shadow: 0 5px 17px rgba(var(--guide-ring-bright-rgb), 0.42);
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
    .ring-page-button[aria-pressed="true"],
.light-overlay--peace-guide:not(.light-overlay--orb-view)
    .ring-page-button[aria-expanded="true"],
.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-menu__panel
  > button[aria-expanded="true"] {
  filter: brightness(1.2) saturate(1.12);
  box-shadow: 0 6px 20px rgba(var(--guide-ring-bright-rgb), 0.5);
  animation: none;
}

/* Fullscreen is an action, not a persistent selected menu choice. */
.light-overlay--peace-guide:not(.light-overlay--orb-view)
  #ringFullscreenBtn[aria-pressed="true"] {
  filter: none;
  box-shadow: 0 4px 14px rgba(var(--guide-ring-bright-rgb), 0.3);
}

/* Keep the menu panel marquee, but leave its Orb and Wall choices plain. */
.light-overlay--peace-guide:not(.light-overlay--orb-view)
  #havenRingMenuPanel
  > #ringOrbPageBtn
  > .haven-marquee-dot,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
  #havenRingMenuPanel
  > #peacePageToggle
  > .haven-marquee-dot {
  display: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-menu__panel
  > button:hover,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-menu__panel
  > button:focus-visible {
  border-color: rgba(var(--guide-ring-bright-rgb), 0.48);
  box-shadow: 0 0 16px rgba(var(--guide-ring-bright-rgb), 0.5);
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-menu__panel
  > button:active,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-menu__panel
  > button[aria-expanded="true"] {
  border-color: rgba(var(--guide-ring-bright-rgb), 0.7);
  box-shadow: 0 0 20px rgba(var(--guide-ring-bright-rgb), 0.62);
}

.ring-page-button.orb-page__exit {
  background: var(--orb-color, #ff0000);
  box-shadow: 0 4px 14px rgba(var(--orb-rgb, 255, 0, 0), 0.28);
}

.light-overlay--orb-view .ring-page-button {
  color: var(--orb-bg, #190000);
}

.light-overlay--orb-view .ring-page-button.orb-template-panel__toggle {
  background: var(--orb-color, #ff0000);
  box-shadow: 0 4px 14px rgba(var(--orb-rgb, 255, 0, 0), 0.28);
}

.orb-page-actions__right .ring-page-button {
  background: var(--orb-color, #ff0000);
  box-shadow: 0 4px 14px rgba(var(--orb-rgb, 255, 0, 0), 0.28);
}

@media (max-width: 480px) {
  .orb-page-actions {
    align-items: flex-start;
  }

  .orb-page-actions__right {
    max-width: calc(100% - 55px);
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .orb-page-actions__right .ring-page-button {
    padding-inline: 0.35rem;
    font-size: clamp(0.57rem, 2.7vw, 0.7rem);
  }
}

.ring-instructions-panel {
  position: absolute;
  top: max(clamp(3.7rem, min(16vw, 10vh), 4.8rem), calc(env(safe-area-inset-top) + 3.2rem));
  right: max(clamp(0.5rem, 2.4vw, 0.9rem), env(safe-area-inset-right));
  z-index: 3;
  width: min(clamp(250px, 60vw, 330px), calc(100% - 1rem));
  max-height: min(520px, calc(100dvh - 1rem));
  padding: clamp(0.65rem, 2.4vmin, 1rem)
    clamp(0.75rem, 2.8vmin, 1.15rem);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: clamp(10px, 2.2vmin, 16px);
  background: rgba(0, 0, 0, 0.76);
  box-shadow: var(--shadow);
  color: var(--guide-instructions-color, #ff7474);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ring-instructions-panel--scrolling {
  scrollbar-color: var(--guide-instructions-color, #ff7474) transparent;
}

.ring-instructions-panel::-webkit-scrollbar {
  width: 4px;
}

.ring-instructions-panel::-webkit-scrollbar-track {
  background: transparent;
}

.ring-instructions-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: transparent;
  transition: background-color 150ms linear;
}

.ring-instructions-panel--scrolling::-webkit-scrollbar-thumb {
  background: var(--guide-instructions-color, #ff7474);
}

.ring-instructions-panel[hidden] {
  display: none;
}

.orb-instructions-panel h2 {
  color: var(--guide-instructions-color, #ff7474);
}

.orb-instructions-panel {
  color: var(--guide-instructions-color, #ff7474);
}

.orb-instructions-panel li {
  font-size: 13.5px;
}

.ring-presets {
  position: absolute;
  top: calc(
    max(clamp(0.5rem, min(2.4vw, 2.2vh), 0.9rem), env(safe-area-inset-top)) +
      clamp(34px, min(9vw, 6vh), 42px) * 3 +
      clamp(0.35rem, 1.8vmin, 0.7rem) * 3
  );
  left: max(clamp(0.5rem, 2.4vw, 0.9rem), env(safe-area-inset-left));
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(0.25rem, 1.2vmin, 0.45rem);
  width: min(clamp(104px, 22vmin, 148px), calc(100% - 1rem));
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear;
}

.peace-guide-page--controls-hidden .ring-page-actions,
.peace-guide-page--controls-hidden .peace-page-nav,
.peace-guide-page--controls-hidden .ring-presets,
.peace-guide-page--controls-hidden .ring-instructions-panel,
.peace-guide-page--controls-hidden .ring-color-code-display {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease,
    visibility 0s linear 0.3s;
}

.peace-guide-page--controls-hidden .ring-page-button,
.peace-page-nav--hidden .ring-page-button {
  pointer-events: none;
}

.ring-presets__toggle {
  align-self: flex-start;
}

.peace-page-nav .ring-presets {
  position: static;
  z-index: auto;
  width: auto;
  max-width: 100%;
  gap: clamp(0.25rem, 1.2vmin, 0.45rem);
  transform: none;
}

.peace-page-nav .ring-presets-panel {
  width: min(clamp(148px, 28vmin, 220px), calc(100vw - 1rem));
  max-height: min(360px, calc(100vh - 15rem));
}

.ring-presets-panel {
  width: 100%;
  max-height: calc(100vh - 12rem);
  padding: clamp(0.55rem, 2vmin, 0.85rem)
    clamp(0.5rem, 1.8vmin, 0.75rem);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: clamp(10px, 2.2vmin, 16px);
  background: rgba(0, 0, 0, 0.76);
  box-shadow: var(--shadow);
  color: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow-y: auto;
}

.ring-presets-panel[hidden] {
  display: none;
}

.ring-presets-panel__title {
  margin-bottom: 0.65rem;
  color: var(--guide-ring-bright-current);
  font-size: 0.92rem;
}

.ring-presets-panel__save {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.ring-presets-panel__label {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ring-presets-panel__input {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
}

.ring-presets-panel__input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.ring-presets-panel__input:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 2px;
}

.ring-presets-panel__count {
  font-size: 0.64rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: right;
}

.ring-presets-panel__save-btn {
  width: 100%;
  min-height: 34px;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: var(--guide-ring-bright-current);
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.ring-presets-panel__save-btn:hover {
  filter: brightness(1.1);
}

.ring-presets-panel__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ring-presets-panel__item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.ring-presets-panel__load-btn,
.ring-presets-panel__delete-btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.ring-presets-panel__load-btn {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  padding: 0.4rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ring-presets-panel__load-btn:hover,
.ring-presets-panel__delete-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.ring-presets-panel__load-btn--active {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(var(--guide-ring-bright-rgb), 0.28);
}

.ring-presets-panel__delete-btn {
  flex-shrink: 0;
  width: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1;
}

.ring-presets-panel__empty {
  font-size: 0.68rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.58);
}

.ring-color-code-display {
  position: absolute;
  top: max(clamp(3.7rem, min(16vw, 10vh), 4.8rem), calc(env(safe-area-inset-top) + 3.2rem));
  right: max(clamp(0.5rem, 2.4vw, 0.9rem), env(safe-area-inset-right));
  z-index: 3;
  width: min(520px, calc(100% - 1.8rem));
  padding: clamp(0.5rem, 1.8vmin, 0.75rem)
    clamp(0.65rem, 2.4vmin, 1rem);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.76);
  box-shadow: var(--shadow);
  color: #fff;
  font-family: "Courier New", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(0.62rem, 2.5vmin, 0.78rem);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.45rem, 1.8vmin, 0.75rem);
  text-align: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ring-color-code-display[hidden] {
  display: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view) .ring-color-code-display {
  top: var(--haven-ring-code-panel-top);
  right: var(--haven-ring-code-panel-right);
}

.ring-color-code-display__current {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-line;
}

.haven-ring-code-bubbles {
  display: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view) .ring-color-code-display {
  width: min(300px, calc(100% - 1.25rem));
  height: 168px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .ring-color-code-display__fallback {
  display: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .ring-color-code-display__current {
  flex: none;
  width: 100%;
  height: 100%;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-code-bubbles {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-code-bubbles__code,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-code-bubbles__channel {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  border: 2px solid rgba(var(--guide-ring-bright-rgb), 0.42);
  background: var(--guide-bg);
  box-shadow: 0 0 16px rgba(var(--guide-ring-bright-rgb), 0.24);
  color: var(--guide-ring-bright-current);
  text-shadow: none;
  transform: translate3d(
    var(--haven-code-collision-x, var(--haven-code-start-x, 0)),
    var(--haven-code-collision-y, var(--haven-code-start-y, 0)),
    0
  );
  will-change: transform;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-code-bubbles__code {
  grid-template-columns: auto auto;
  gap: 8px;
  width: 296px;
  min-height: 58px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.92rem;
  --haven-code-start-x: calc(50% - 148px);
  --haven-code-start-y: 0;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-code-bubbles__rgb {
  display: contents;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-code-bubbles__channel {
  align-content: center;
  width: var(--haven-code-channel-size);
  height: var(--haven-code-channel-size);
  padding: 7px;
  border-radius: 50%;
  font-size: 0.82rem;
  line-height: 1.05;
  --haven-code-channel-size: clamp(72px, 19vmin, 88px);
  --haven-code-start-y: calc(100% - var(--haven-code-channel-size));
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-code-bubbles__channel:nth-child(1) {
  --haven-code-start-x: 0;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-code-bubbles__channel:nth-child(2) {
  --haven-code-start-x: calc(50% - var(--haven-code-channel-size) / 2);
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-code-bubbles__channel:nth-child(3) {
  --haven-code-start-x: calc(100% - var(--haven-code-channel-size));
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-code-bubbles__label {
  font-weight: 700;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .haven-ring-code-bubbles__percent {
  margin-top: 3px;
  font-size: 0.64rem;
  font-weight: 600;
  opacity: 0.78;
}

.ring-instructions-panel h2 {
  margin-bottom: 0.65rem;
  color: var(--guide-instructions-color, #ff7474);
  font-size: clamp(0.78rem, 3vmin, 1rem);
}

.ring-instructions-panel ul {
  padding-left: 1.15rem;
  font-size: clamp(0.65rem, 2.5vmin, 0.82rem);
  line-height: 1.5;
}

.ring-instructions-panel li + li {
  margin-top: 0.35rem;
}

.ring-instructions-panel__compatible {
  margin: 0.75rem 0 0;
  font-size: clamp(0.65rem, 2.5vmin, 0.82rem);
  font-weight: 700;
  line-height: 1.5;
}

.peace-guide-rings {
  position: absolute;
  left: 50%;
  top: calc((100% - 15.5rem) / 2);
  width: 0;
  height: 0;
  overflow: visible;
  z-index: 1;
  --ring-animation-duration: 0.93s;
}

.peace-guide-ring {
  width: var(--peace-ring-size, 218px);
  height: var(--peace-ring-size, 218px);
  border-radius: 50%;
  background: conic-gradient(
    var(--ring-layer-bright-current, var(--guide-ring-bright-current)) 0deg var(--guide-ring-bright-stop, 90deg),
    var(--ring-layer-dark-current, var(--guide-ring-dark-current)) var(--guide-ring-bright-stop, 90deg) 360deg
  );
  box-shadow: 0 0 18px rgba(var(--ring-layer-dark-rgb, var(--guide-ring-dark-rgb)), 0.18),
    0 0 22px rgba(var(--ring-layer-bright-rgb, var(--guide-ring-bright-rgb)), 0.18);
  position: absolute;
  top: 0;
  margin-left: calc(var(--peace-ring-size, 218px) / -2);
  margin-top: calc(var(--peace-ring-size, 218px) / -2);
  animation: ring-spin var(--ring-animation-duration, 0.93s) linear infinite;
  backface-visibility: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}

.peace-guide-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at var(--ring-cap-start-x, 109px) var(--ring-cap-start-y, 30px),
      var(--ring-layer-bright-current, var(--guide-ring-bright-current)) 0 var(--ring-cap-radius, 30px),
      transparent calc(var(--ring-cap-radius, 30px) + 0.75px)
    ),
    radial-gradient(
      circle at var(--ring-cap-end-x, 188px) var(--ring-cap-end-y, 109px),
      var(--ring-layer-bright-current, var(--guide-ring-bright-current)) 0 var(--ring-cap-radius, 30px),
      transparent calc(var(--ring-cap-radius, 30px) + 0.75px)
    );
  pointer-events: none;
}

.peace-guide-ring__cap {
  position: absolute;
  display: none;
  width: calc(var(--ring-cap-radius, 30px) * 2);
  height: calc(var(--ring-cap-radius, 30px) * 2);
  border-radius: 50%;
  background: var(
    --ring-layer-bright-current,
    var(--guide-ring-bright-current)
  );
  pointer-events: none;
}

/* WebKit can separate the gradient caps from the conic arc while it spins. */
.safari-rendering .peace-guide-ring::before {
  display: none;
}

.safari-rendering .peace-guide-ring__cap {
  display: block;
}

.safari-rendering .peace-guide-ring__cap--start {
  left: calc(var(--ring-cap-start-x, 109px) - var(--ring-cap-radius, 30px));
  top: calc(var(--ring-cap-start-y, 30px) - var(--ring-cap-radius, 30px));
}

.safari-rendering .peace-guide-ring__cap--end {
  left: calc(var(--ring-cap-end-x, 188px) - var(--ring-cap-radius, 30px));
  top: calc(var(--ring-cap-end-y, 109px) - var(--ring-cap-radius, 30px));
}

.peace-guide-ring[hidden] {
  display: none !important;
}

.peace-guide-ring--layer-1 {
  left: 0;
  z-index: 3;
}

.peace-guide-ring--layer-2 {
  left: var(--peace-ring-size, 218px);
  z-index: 2;
}

.peace-guide-ring--layer-3 {
  left: calc(var(--peace-ring-size, 218px) * 2);
  z-index: 1;
}

.peace-guide-ring--dragging {
  cursor: grabbing;
}

.peace-guide-rings--paused .peace-guide-ring,
.peace-guide-rings--paused .peace-guide-ring__nodules--bright {
  animation-play-state: paused;
}

.peace-guide-rings:not(.peace-guide-rings--clockwise) .peace-guide-ring {
  animation-name: ring-spin-ccw;
}

.peace-guide-rings--clockwise .peace-guide-ring {
  animation-name: ring-spin;
}

.peace-guide-ring::after {
  content: "";
  position: absolute;
  inset: calc(
    var(--peace-ring-size, 218px) * var(--ring-inner-inset, 0.28)
  );
  border-radius: 50%;
  background: var(--guide-bg);
}

.peace-guide-ring__nodules {
  position: absolute;
  inset: 0;
  display: none;
  border-radius: 50%;
  pointer-events: none;
}

.peace-guide-ring__nodules--bright {
  animation: ring-nodule-spin var(--ring-animation-duration, 0.93s)
    steps(32, end) infinite;
  will-change: transform;
}

.peace-guide-ring__nodule {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ring-nodule-size, 11px);
  height: var(--ring-nodule-size, 11px);
  margin-top: calc(var(--ring-nodule-size, 11px) / -2);
  margin-left: calc(var(--ring-nodule-size, 11px) / -2);
  border: 1px solid var(--ring-layer-dark-current, var(--guide-ring-dark-current));
  border-radius: 50%;
  background: var(--ring-layer-dark-current, var(--guide-ring-dark-current));
  box-shadow: 0 0 6px rgba(var(--ring-layer-dark-rgb, var(--guide-ring-dark-rgb)), 0.52);
  transform: rotate(var(--ring-nodule-angle))
    translateY(calc(var(--peace-ring-size, 218px) / -2));
}

.peace-guide-ring__nodule--bright {
  z-index: 1;
  border-color: var(--ring-layer-dark-current, var(--guide-ring-dark-current));
  background: var(--ring-layer-bright-current, var(--guide-ring-bright-current));
  box-shadow: 0 0 9px rgba(var(--ring-layer-bright-rgb, var(--guide-ring-bright-rgb)), 0.9),
    0 0 18px rgba(var(--ring-layer-bright-rgb, var(--guide-ring-bright-rgb)), 0.62);
}

.peace-guide-ring__nodules--bright .peace-guide-ring__nodule {
  opacity: 0;
}

.peace-guide-ring__nodules--bright
  .peace-guide-ring__nodule--bright {
  opacity: 1;
}

.peace-guide-rings--nodules .peace-guide-ring {
  animation: none;
  background: transparent;
  box-shadow: none;
  transform: translate3d(
    var(--ring-drag-x, 0px),
    var(--ring-drag-y, 0px),
    0
  );
}

.peace-guide-rings--nodules .peace-guide-ring::after {
  display: none;
}

.peace-guide-rings--nodules .peace-guide-ring::before {
  display: none;
}

.peace-guide-rings--nodules .peace-guide-ring__nodules {
  display: block;
}

.peace-guide-rings--nodules:not(.peace-guide-rings--clockwise)
  .peace-guide-ring__nodules--bright {
  animation-name: ring-nodule-spin-ccw;
}

.peace-guide-rings--nodules.peace-guide-rings--clockwise
  .peace-guide-ring__nodules--bright {
  animation-name: ring-nodule-spin;
}

@keyframes ring-nodule-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes ring-nodule-spin-ccw {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.peace-guide-controls {
  position: absolute;
  left: 50%;
  bottom: clamp(3.6rem, min(15vw, 11vh), 4.9rem);
  width: min(clamp(340px, 68vw, 580px), calc(100% - 1.25rem));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.35rem, min(1.7vw, 1.5vh), 0.65rem);
  z-index: 4;
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.peace-guide-controls--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
}

.peace-ring-control {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: clamp(10px, 2.2vmin, 16px);
  color: var(--guide-ring-dark);
  padding: clamp(0.45rem, min(2vw, 1.7vh), 0.85rem)
    clamp(0.6rem, min(2.5vw, 2vh), 1rem);
}

.peace-guide-controls .peace-ring-control {
  color: var(--guide-ring-bright-current);
}

.peace-ring-control__bubble {
  display: none;
}

.peace-ring-control__name-arc {
  display: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls
  .peace-ring-control {
  border: 2px solid rgba(var(--guide-ring-bright-rgb), 0.42);
  border-radius: 999px;
  background: rgba(var(--guide-ring-bright-rgb), 0.1);
  box-shadow: 0 0 16px rgba(var(--guide-ring-bright-rgb), 0.22);
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls
  .peace-ring-control__header {
  display: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-ring-control__bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  padding: 7px;
  border: 2px solid rgba(var(--guide-ring-bright-rgb), 0.42);
  border-radius: 50%;
  background: var(--guide-bg);
  box-shadow: 0 0 16px rgba(var(--guide-ring-bright-rgb), 0.24);
  color: var(--guide-ring-bright-current);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-shadow: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: filter 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-ring-control__name,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-ring-control__percentage {
  display: block;
  transform: scaleY(1.15);
  transform-origin: center;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-ring-control__percentage {
  margin-top: 2.5px;
  font-size: 0.56rem;
  font-weight: 600;
  opacity: 0.78;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-ring-control__percentage[hidden] {
  display: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls:is(
    [data-haven-controls-view="chooser"],
    [data-haven-controls-view="all"]
  )
  .peace-ring-control__name {
  display: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls:is(
    [data-haven-controls-view="chooser"],
    [data-haven-controls-view="all"]
  )
  .peace-ring-control__name-arc {
  display: block;
  flex: 0 0 30px;
  width: calc(100% + 4px);
  height: 30px;
  overflow: visible;
  color: currentColor;
  pointer-events: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-ring-control__name-arc path {
  fill: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-ring-control__name-arc text {
  fill: currentColor;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.35px;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  transform: scaleY(1.15);
  transform-box: fill-box;
  transform-origin: center;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"]
  .peace-ring-control__name-arc text {
  font-size: 19px;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"]
  .peace-ring-control:nth-child(3)
  .peace-ring-control__name-arc text,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"]
  .peace-ring-control:nth-child(4)
  .peace-ring-control__name-arc text,
.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"]
  .peace-ring-control:nth-child(6)
  .peace-ring-control__name-arc text {
  font-size: 15.5px;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"]
  .peace-ring-control:nth-child(5)
  .peace-ring-control__name-arc text {
  font-size: 16.5px;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-ring-control:nth-child(2)
  .peace-ring-control__name-arc text {
  letter-spacing: 1.25px;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-ring-control__bubble:hover {
  filter: brightness(1.14) saturate(1.08);
  box-shadow: 0 0 20px rgba(var(--guide-ring-bright-rgb), 0.36);
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-ring-control__bubble:focus-visible {
  outline: 2px solid var(--guide-ring-bright-current);
  outline-offset: 3px;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-ring-control__bubble:active {
  transform: scale(0.96);
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"] {
  display: block;
  width: min(300px, calc(100% - 1.25rem));
  height: 188px;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"]
  .peace-ring-control {
  display: grid;
  place-items: center;
  position: absolute;
  top: var(--haven-bubble-top);
  left: var(--haven-bubble-left);
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateX(-50%);
  animation: haven-setting-bubble-roam
    var(--haven-roam-duration, 30s) ease-in-out infinite;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"]
  .peace-ring-control__bubble {
  width: clamp(72px, 19vmin, 88px);
  height: clamp(72px, 19vmin, 88px);
  padding: 9px;
  font-size: clamp(0.62rem, 2.5vmin, 0.72rem);
  animation: haven-setting-bubble-float
    var(--haven-bubble-duration, 3.2s) ease-in-out infinite;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"]
  .peace-ring-control:nth-child(1) {
  --haven-bubble-left: 24%;
  --haven-bubble-top: 22px;
  --haven-bubble-drift-x: 7px;
  --haven-bubble-drift-y: -6px;
  --haven-bubble-scale: 1.04;
  --haven-bubble-duration: 3.4s;
  --haven-roam-x-1: 78px;
  --haven-roam-y-1: -22px;
  --haven-bump-x-1: 39px;
  --haven-bump-y-1: -11px;
  --haven-recoil-x-1: 23px;
  --haven-recoil-y-1: -6px;
  --haven-roam-x-2: 156px;
  --haven-roam-y-2: 0px;
  --haven-bump-x-2: 117px;
  --haven-bump-y-2: -11px;
  --haven-recoil-x-2: 96px;
  --haven-recoil-y-2: -17px;
  --haven-roam-duration: 28s;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"]
  .peace-ring-control:nth-child(2) {
  --haven-bubble-left: 50%;
  --haven-bubble-top: 0;
  --haven-bubble-drift-x: -6px;
  --haven-bubble-drift-y: 5px;
  --haven-bubble-scale: 0.97;
  --haven-bubble-duration: 3.8s;
  --haven-roam-x-1: 78px;
  --haven-roam-y-1: 22px;
  --haven-bump-x-1: 39px;
  --haven-bump-y-1: 11px;
  --haven-recoil-x-1: 23px;
  --haven-recoil-y-1: 6px;
  --haven-roam-x-2: -78px;
  --haven-roam-y-2: 22px;
  --haven-bump-x-2: 0px;
  --haven-bump-y-2: 22px;
  --haven-recoil-x-2: 19px;
  --haven-recoil-y-2: 22px;
  --haven-roam-duration: 30s;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"]
  .peace-ring-control:nth-child(3) {
  --haven-bubble-left: 76%;
  --haven-bubble-top: 22px;
  --haven-bubble-drift-x: 5px;
  --haven-bubble-drift-y: 7px;
  --haven-bubble-scale: 1.03;
  --haven-bubble-duration: 3.6s;
  --haven-roam-x-1: -156px;
  --haven-roam-y-1: 0px;
  --haven-bump-x-1: -78px;
  --haven-bump-y-1: 0px;
  --haven-recoil-x-1: -58px;
  --haven-recoil-y-1: 4px;
  --haven-roam-x-2: -78px;
  --haven-roam-y-2: -22px;
  --haven-bump-x-2: -117px;
  --haven-bump-y-2: -11px;
  --haven-recoil-x-2: -96px;
  --haven-recoil-y-2: -17px;
  --haven-roam-duration: 29s;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"]
  .peace-ring-control:nth-child(4) {
  --haven-bubble-left: 22%;
  --haven-bubble-top: 100px;
  --haven-bubble-drift-x: -5px;
  --haven-bubble-drift-y: -7px;
  --haven-bubble-scale: 0.98;
  --haven-bubble-duration: 3.7s;
  --haven-roam-x-1: 84px;
  --haven-roam-y-1: -22px;
  --haven-bump-x-1: 42px;
  --haven-bump-y-1: -11px;
  --haven-recoil-x-1: 25px;
  --haven-recoil-y-1: -6px;
  --haven-roam-x-2: 168px;
  --haven-roam-y-2: 0px;
  --haven-bump-x-2: 126px;
  --haven-bump-y-2: -11px;
  --haven-recoil-x-2: 104px;
  --haven-recoil-y-2: -17px;
  --haven-roam-duration: 31s;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"]
  .peace-ring-control:nth-child(5) {
  --haven-bubble-left: 50%;
  --haven-bubble-top: 78px;
  --haven-bubble-drift-x: 6px;
  --haven-bubble-drift-y: 6px;
  --haven-bubble-scale: 1.05;
  --haven-bubble-duration: 4s;
  --haven-roam-x-1: 84px;
  --haven-roam-y-1: 22px;
  --haven-bump-x-1: 42px;
  --haven-bump-y-1: 11px;
  --haven-recoil-x-1: 25px;
  --haven-recoil-y-1: 6px;
  --haven-roam-x-2: -84px;
  --haven-roam-y-2: 22px;
  --haven-bump-x-2: 0px;
  --haven-bump-y-2: 22px;
  --haven-recoil-x-2: 21px;
  --haven-recoil-y-2: 22px;
  --haven-roam-duration: 32s;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"]
  .peace-ring-control:nth-child(6) {
  --haven-bubble-left: 78%;
  --haven-bubble-top: 100px;
  --haven-bubble-drift-x: -7px;
  --haven-bubble-drift-y: -5px;
  --haven-bubble-scale: 1.02;
  --haven-bubble-duration: 3.5s;
  --haven-roam-x-1: -168px;
  --haven-roam-y-1: 0px;
  --haven-bump-x-1: -84px;
  --haven-bump-y-1: 0px;
  --haven-recoil-x-1: -63px;
  --haven-recoil-y-1: 4px;
  --haven-roam-x-2: -84px;
  --haven-roam-y-2: -22px;
  --haven-bump-x-2: -126px;
  --haven-bump-y-2: -11px;
  --haven-recoil-x-2: -104px;
  --haven-recoil-y-2: -17px;
  --haven-roam-duration: 30s;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"]
  .peace-ring-control__slider {
  display: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="single"] {
  grid-template-columns: minmax(0, 1fr);
  width: min(475px, calc(100% - 1.25rem));
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="single"]
  .peace-ring-control:not(.peace-ring-control--selected) {
  display: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="single"]
  .peace-ring-control--selected {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  gap: 13px;
  padding: 12px 20px;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="single"]
  .peace-ring-control__bubble {
  flex-direction: row;
  gap: 0.35rem;
  width: fit-content;
  min-width: 0;
  height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="single"]
  .peace-ring-control__percentage {
  margin-top: 0;
  font-size: 0.75em;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="single"]
  .peace-ring-control__slider {
  width: 100%;
  height: 10px;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="single"]
  .peace-ring-control__slider::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="single"]
  .peace-ring-control__slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="all"]
  .peace-ring-control {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-always-all="true"]
  .peace-ring-control__bubble {
  display: none;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-always-all="true"]
  .peace-ring-control__header {
  display: flex;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-always-all="true"]
  .peace-ring-control {
  display: block;
  padding: clamp(0.45rem, min(2vw, 1.7vh), 0.85rem)
    clamp(0.6rem, min(2.5vw, 2vh), 1rem);
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"] {
  width: min(450px, calc(100% - 1.25rem));
  height: 282px;
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"]
  .peace-ring-control__bubble {
  scale: var(--haven-ring-control-scale);
}

@media (max-width: 700px) {
  .light-overlay--peace-guide:not(.light-overlay--orb-view) {
    --haven-ring-control-scale: 1.1;
    --haven-ring-nav-extra-offset: 8px;
  }

  .light-overlay--peace-guide:not(.light-overlay--orb-view)::before {
    content: "";
    position: absolute;
    top: -120px;
    right: 0;
    left: 0;
    height: 121px;
    background: var(--guide-bg);
    pointer-events: none;
  }

  .light-overlay--peace-guide:not(.light-overlay--orb-view)
    .peace-guide-controls[data-haven-controls-view="chooser"] {
    width: min(330px, calc(100% - 1.25rem));
    height: 206.8px;
  }
}

@media (min-width: 701px) {
  .light-overlay--peace-guide:not(.light-overlay--orb-view):fullscreen,
  .light-overlay--peace-guide:not(.light-overlay--orb-view):-webkit-full-screen,
  .light-overlay--peace-guide:not(.light-overlay--orb-view).light-overlay--pseudo-fullscreen {
    --haven-ring-control-scale: 1.5;
  }

  .light-overlay--peace-guide:not(.light-overlay--orb-view):fullscreen
    .peace-guide-controls[data-haven-controls-view="chooser"],
  .light-overlay--peace-guide:not(.light-overlay--orb-view):-webkit-full-screen
    .peace-guide-controls[data-haven-controls-view="chooser"],
  .light-overlay--peace-guide:not(.light-overlay--orb-view).light-overlay--pseudo-fullscreen
    .peace-guide-controls[data-haven-controls-view="chooser"] {
    width: min(450px, calc(100% - 1.25rem));
    height: 282px;
  }
}

@keyframes haven-setting-bubble-float {
  0%,
  100% {
    transform: scale(0.97);
  }
  50% {
    transform: scale(var(--haven-bubble-scale, 1.04));
  }
}

@keyframes haven-setting-bubble-roam {
  0%,
  100% {
    transform: translateX(-50%);
  }
  15% {
    transform: translate(
      calc(-50% + var(--haven-bump-x-1, 0px)),
      var(--haven-bump-y-1, 0px)
    );
  }
  19% {
    transform: translate(
      calc(-50% + var(--haven-recoil-x-1, 0px)),
      var(--haven-recoil-y-1, 0px)
    );
  }
  34% {
    transform: translate(
      calc(-50% + var(--haven-roam-x-1, 0px)),
      var(--haven-roam-y-1, 0px)
    );
  }
  50% {
    transform: translate(
      calc(-50% + var(--haven-bump-x-2, 0px)),
      var(--haven-bump-y-2, 0px)
    );
  }
  54% {
    transform: translate(
      calc(-50% + var(--haven-recoil-x-2, 0px)),
      var(--haven-recoil-y-2, 0px)
    );
  }
  69% {
    transform: translate(
      calc(-50% + var(--haven-roam-x-2, 0px)),
      var(--haven-roam-y-2, 0px)
    );
  }
}

.light-overlay--peace-guide:not(.light-overlay--orb-view)
  .peace-guide-controls[data-haven-controls-view="chooser"].peace-guide-controls--bubble-collisions
  .peace-ring-control {
  top: 0;
  left: 0;
  transform: translate3d(
    var(--haven-collision-x, 0),
    var(--haven-collision-y, 0),
    0
  );
  animation: none;
  will-change: transform;
}

.peace-guide-controls--paused
  .peace-ring-control,
.peace-guide-controls--paused
  .peace-ring-control__bubble {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .light-overlay--peace-guide:not(.light-overlay--orb-view)
    .peace-guide-controls[data-haven-controls-view="chooser"]
    .peace-ring-control,
  .light-overlay--peace-guide:not(.light-overlay--orb-view)
    .peace-guide-controls[data-haven-controls-view="chooser"]
    .peace-ring-control__bubble {
    animation: none;
  }
}

.peace-guide-controls .peace-ring-control__slider {
  background: var(--guide-bg);
}

.peace-ring-control__header {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.peace-ring-control__header {
  font-size: clamp(0.68rem, min(2.7vw, 1.8vh), 0.9rem);
  font-weight: 600;
  margin-bottom: clamp(0.3rem, min(1.7vw, 1.4vh), 0.65rem);
}

.peace-ring-control__slider {
  width: 100%;
  height: clamp(5px, min(1.2vw, 1vh), 8px);
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  outline: none;
}

.peace-ring-control__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: clamp(17px, min(3.3vw, 2.8vh), 22px);
  height: clamp(17px, min(3.3vw, 2.8vh), 22px);
  border-radius: 50%;
  background: var(--guide-ring-bright-current);
  border: 3px solid var(--guide-bg);
  box-shadow: 0 0 9px rgba(var(--guide-ring-bright-rgb), 0.52),
    0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.peace-ring-control__slider::-moz-range-thumb {
  width: clamp(17px, min(3.3vw, 2.8vh), 22px);
  height: clamp(17px, min(3.3vw, 2.8vh), 22px);
  border-radius: 50%;
  background: var(--guide-ring-bright-current);
  border: 3px solid var(--guide-bg);
  box-shadow: 0 0 9px rgba(var(--guide-ring-bright-rgb), 0.52),
    0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.peace-page-nav {
  position: absolute;
  top: calc(
    max(clamp(0.5rem, min(2.4vw, 2.2vh), 0.9rem), env(safe-area-inset-top)) +
      clamp(34px, min(9vw, 6vh), 42px) + clamp(0.35rem, 1.8vmin, 0.7rem)
      + var(--haven-ring-nav-extra-offset, 0px)
  );
  left: max(clamp(0.5rem, min(2.4vw, 2.2vh), 0.9rem), env(safe-area-inset-left));
  bottom: auto;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.35rem, 1.8vmin, 0.7rem);
  opacity: 1;
  transform: none;
  transition: opacity 0.3s ease;
}

.peace-page-nav[hidden] {
  display: none;
}

.peace-page-nav--hidden {
  opacity: 0;
  pointer-events: none;
}

.screen-sleep {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #000;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.screen-sleep[hidden] {
  display: none;
}

.screen-sleep:focus,
.screen-sleep:focus-visible {
  outline: none;
}

html.stimuly-screen-asleep .screen-sleep {
  cursor: none;
}

html.stimuly-screen-asleep,
html.stimuly-screen-asleep body {
  overflow: hidden;
  overscroll-behavior: none;
}

html.stimuly-controls-no-transition .peace-guide-page .ring-page-actions,
html.stimuly-controls-no-transition .peace-page-nav,
html.stimuly-controls-no-transition .peace-guide-page .peace-guide-controls,
html.stimuly-controls-no-transition .orb-page .orb-page-actions,
html.stimuly-controls-no-transition .orb-page .orb-shape-panel,
html.stimuly-controls-no-transition .orb-page .orb-tone-panel,
html.stimuly-controls-no-transition .orb-page .orb-template-panel,
html.stimuly-controls-no-transition .orb-page .orb-color-code-display,
html.stimuly-controls-no-transition .orb-page .orb-instructions-panel,
html.stimuly-controls-no-transition .orb-page .orb-controls,
html.stimuly-controls-no-transition .orb-page .orb-page-nav {
  transition: none !important;
}

.btn--peace-nav {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  min-width: clamp(112px, 22vmin, 150px);
  padding: clamp(0.45rem, 1.8vmin, 0.65rem)
    clamp(0.7rem, 2.5vmin, 1rem);
  font-size: clamp(0.7rem, 2.8vmin, 0.95rem);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn--peace-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.light-overlay__view-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.light-overlay__ring-link {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

.light-overlay__ring-link:hover {
  background: rgba(255, 255, 255, 0.13);
}

.light-overlay__label {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  margin-bottom: 1.2rem;
}

.shade-control {
  margin-bottom: 1.2rem;
}

.shade-control__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.6rem;
}

.shade-control__slider {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.25);
  outline: none;
  cursor: pointer;
}

.shade-control__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.shade-control__slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.shade-control__slider--peace::-webkit-slider-thumb {
  background: var(--peace-orb-color, #ff0000);
  border: 2px solid #ff0000;
  box-shadow: 0 0 6px #ff0000, 0 0 14px rgba(255, 0, 0, 0.85),
    0 0 24px rgba(255, 0, 0, 0.55);
}

.shade-control__slider--peace::-moz-range-thumb {
  background: var(--peace-orb-color, #ff0000);
  border: 2px solid #ff0000;
  box-shadow: 0 0 6px #ff0000, 0 0 14px rgba(255, 0, 0, 0.85),
    0 0 24px rgba(255, 0, 0, 0.55);
}

.shade-control__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.color-code-tools {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.8rem;
}

.color-code-button {
  display: block;
  flex: 0 1 auto;
  min-width: 150px;
  max-width: 100%;
  margin: 0;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.color-code-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.color-code-button[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.42);
  font-family: "Courier New", "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.04em;
  white-space: pre-line;
}

.color-code-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

.color-code-editor {
  display: grid;
  grid-template-columns: minmax(108px, 142px) auto;
  align-items: center;
  gap: 0.35rem;
}

.color-code-editor[hidden] {
  display: none;
}

.color-code-editor__input,
.color-code-editor__apply {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-family: "Courier New", "SFMono-Regular", Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 700;
}

.color-code-editor__input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  text-transform: uppercase;
}

.color-code-editor__input::placeholder {
  color: rgba(255, 255, 255, 0.52);
}

.color-code-editor__input:focus-visible,
.color-code-editor__apply:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.color-code-editor__apply {
  padding: 0.5rem 0.7rem;
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
}

.color-code-editor__apply:hover {
  background: rgba(255, 255, 255, 0.22);
}

.color-code-editor__error {
  grid-column: 1 / -1;
  margin: 0;
  color: #ffd6df;
  font-family: inherit;
  font-size: 0.68rem;
  line-height: 1.3;
  text-align: center;
}

.color-code-editor__error[hidden] {
  display: none;
}

.color-code-editor--ring {
  flex: 0 0 auto;
}

.light-overlay__risk {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  max-height: 11rem;
  overflow-y: scroll;
  scrollbar-color: rgba(255, 255, 255, 0.45) rgba(255, 255, 255, 0.12);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  text-align: left;
  margin-bottom: 1.1rem;
}

.light-overlay__risk::-webkit-scrollbar {
  width: 8px;
}

.light-overlay__risk::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

.light-overlay__risk::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 999px;
}

.mode-instructions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: disc;
  padding-left: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Courier New", "SFMono-Regular", Consolas, monospace;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

/* Buttons */
.btn {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  padding: 0.8rem 1.4rem;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn:active {
  transform: scale(0.97);
}

@media (max-width: 480px) {
  .light-paint-panel {
    top: calc(max(0.7rem, env(safe-area-inset-top)) + 98px);
    right: max(0.7rem, env(safe-area-inset-right));
    width: calc(100vw - 1.4rem);
    max-height: calc(100dvh - 112px);
    padding: 0.8rem;
  }

  .light-paint-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.home-page .site-header::before {
    border-radius: 12px;
  }

  .peace-guide-controls {
    width: calc(100% - 1rem);
    bottom: 2.9rem;
    gap: 0.3rem;
  }

  .peace-ring-control {
    padding: 0.4rem 0.45rem;
  }

  .peace-ring-control__header {
    font-size: 0.65rem;
  }

  .site-header {
    padding-top: 0.55rem;
  }

  .page {
    padding-right: 0.6rem;
    padding-left: 0.6rem;
  }

  .color-card__swatch {
    min-height: 64px;
  }

  .color-card__body {
    padding: 0.65rem 0.55rem 0.75rem;
  }

  .color-card__title {
    font-size: clamp(0.88rem, 3.8vw, 1.1rem);
  }

  .color-card__hex {
    overflow-wrap: anywhere;
  }

  .ring-page-actions__right {
    gap: 0.3rem;
    max-width: calc(100% - 55px);
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .ring-shape-panel {
    right: 0;
    left: auto;
  }

  .ring-page-button {
    min-height: 34px;
    padding: 0.4rem 0.48rem;
    font-size: 0.64rem;
  }

  .ring-direction-prefix {
    display: none;
  }

  .ring-presets {
    width: min(104px, calc(46vw - 0.5rem));
  }

  .ring-presets-panel {
    padding: 0.65rem 0.55rem;
  }

  .ring-presets-panel__title {
    font-size: 0.78rem;
  }

  .ring-presets-panel__input,
  .ring-presets-panel__save-btn,
  .ring-presets-panel__load-btn {
    font-size: 0.64rem;
  }

  .ring-color-code-display {
    align-items: stretch;
    flex-direction: column;
    border-radius: 16px;
  }

  .light-overlay--peace-guide:not(.light-overlay--orb-view)
    .ring-color-code-display {
    width: 184px;
    height: 110px;
  }

  .light-overlay--peace-guide:not(.light-overlay--orb-view)
    .haven-ring-code-bubbles__code {
    gap: 5px;
    width: 180px;
    min-height: 40px;
    padding: 5px 10px;
    font-size: 0.68rem;
    --haven-code-start-x: calc(50% - 90px);
  }

  .light-overlay--peace-guide:not(.light-overlay--orb-view)
    .haven-ring-code-bubbles__channel {
    --haven-code-channel-size: 48px;
    padding: 4px;
    border-width: 1.5px;
    font-size: 0.62rem;
  }

  .light-overlay--peace-guide:not(.light-overlay--orb-view)
    .haven-ring-code-bubbles__percent {
    margin-top: 1px;
    font-size: 0.52rem;
  }

  .color-code-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .color-code-button {
    width: 100%;
  }

  .color-code-editor {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-height: 650px) {
  .peace-guide-controls,
  .orb-controls {
    bottom: 3.2rem;
    width: min(380px, calc(100% - 1.25rem));
    gap: 0.3rem;
  }

  .peace-ring-control {
    padding: 0.35rem 0.7rem;
  }

  .peace-ring-control__header {
    margin-bottom: 0.25rem;
    font-size: 0.66rem;
  }

  .peace-ring-control__slider {
    height: 5px;
  }

  .peace-ring-control__slider::-webkit-slider-thumb,
  .peace-ring-control__slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
  }

  .orb-stage {
    bottom: 10.75rem;
  }
}

/* Every Orb keeps its tone-specific variables and behavior while sharing the
   Haven Ring page's dark, glowing visual language. */
.light-overlay--peace-guide.light-overlay--orb-view
  .orb-page
  .ring-page-button {
  min-height: clamp(42px, min(10vw, 6.5vh), 48px);
  padding: clamp(0.5rem, min(2vw, 1.7vh), 0.68rem)
    clamp(0.72rem, min(2.8vw, 2.2vh), 1rem);
  border: 0;
  background: var(--guide-bg);
  box-shadow: 0 0 16px rgba(var(--guide-ring-bright-rgb), 0.45),
    0 4px 14px rgba(var(--guide-ring-bright-rgb), 0.3);
  color: var(--guide-ring-bright-current);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.orb-page-menu {
  position: relative;
  display: none;
}

.light-overlay--peace-guide.light-overlay--orb-view .orb-page-menu {
  display: inline-flex;
}

.light-overlay--peace-guide.light-overlay--orb-view #orbShapeBtn,
.light-overlay--peace-guide.light-overlay--orb-view #orbToneBtn,
.light-overlay--peace-guide.light-overlay--orb-view #orbTemplateBtn,
.light-overlay--peace-guide.light-overlay--orb-view #orbInstructionsBtn,
.light-overlay--peace-guide.light-overlay--orb-view #orbRingPageBtn,
.light-overlay--peace-guide.light-overlay--orb-view #orbPageToggle {
  display: none;
}

.orb-page-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 32;
  display: grid;
  gap: 6px;
  width: 150px;
  padding: 12px;
  border: 0;
  border-radius: 14px;
  background: var(--guide-bg);
  box-shadow: 0 0 16px rgba(var(--guide-ring-bright-rgb), 0.45),
    0 4px 14px rgba(var(--guide-ring-bright-rgb), 0.3);
  overflow: visible;
}

.orb-page-menu__panel[hidden] {
  display: none;
}

.orb-page-menu__panel > button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.72rem;
  border: 1px solid rgba(var(--guide-ring-bright-rgb), 0.42);
  border-radius: 999px;
  background: var(--guide-bg);
  box-shadow: 0 0 12px rgba(var(--guide-ring-bright-rgb), 0.38);
  color: var(--guide-ring-bright-current);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.orb-page-menu__panel > button:hover,
.orb-page-menu__panel > button:focus-visible {
  border-color: rgba(var(--guide-ring-bright-rgb), 0.7);
  box-shadow: 0 0 18px rgba(var(--guide-ring-bright-rgb), 0.62);
  filter: brightness(1.14) saturate(1.08);
}

.light-overlay--peace-guide.light-overlay--orb-view
  .orb-page
  .ring-page-button:hover,
.light-overlay--peace-guide.light-overlay--orb-view
  .orb-page
  .ring-page-button:focus-visible,
.light-overlay--peace-guide.light-overlay--orb-view
  .orb-page
  .ring-page-button[aria-expanded="true"],
.light-overlay--peace-guide.light-overlay--orb-view
  .orb-page
  .ring-page-button[aria-pressed="true"] {
  box-shadow: 0 0 20px rgba(var(--guide-ring-bright-rgb), 0.62),
    0 5px 17px rgba(var(--guide-ring-bright-rgb), 0.42);
}

.light-overlay--peace-guide.light-overlay--orb-view .haven-marquee-dot {
  position: absolute;
  z-index: 0;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--guide-ring-bright-current);
  box-shadow: 0 0 8px rgba(var(--guide-ring-bright-rgb), 0.96);
  opacity: 1;
  filter: brightness(1.45);
  pointer-events: none;
  animation: none;
}

.light-overlay--peace-guide.light-overlay--orb-view .orb-shape-panel,
.light-overlay--peace-guide.light-overlay--orb-view .orb-tone-panel,
.light-overlay--peace-guide.light-overlay--orb-view .orb-template-panel,
.light-overlay--peace-guide.light-overlay--orb-view
  .orb-color-code-display,
.light-overlay--peace-guide.light-overlay--orb-view
  .orb-instructions-panel {
  border-color: rgba(var(--guide-ring-bright-rgb), 0.48);
  background: var(--guide-bg);
  box-shadow: 0 0 18px rgba(var(--guide-ring-bright-rgb), 0.38);
  color: var(--guide-instructions-color, #ff7474);
}

.light-overlay--peace-guide.light-overlay--orb-view .orb-controls {
  width: min(236px, calc(100% - 1rem));
  grid-template-columns: repeat(2, 112px);
  justify-content: center;
  gap: 8px 12px;
}

.light-overlay--peace-guide.light-overlay--orb-view
  .orb-controls
  .peace-ring-control {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 112px;
  height: 112px;
  padding: 13px;
  border: 2px solid rgba(var(--guide-ring-bright-rgb), 0.62);
  border-radius: 50%;
  background: var(--guide-bg);
  box-shadow: 0 0 16px rgba(var(--guide-ring-bright-rgb), 0.34);
  animation: haven-orb-setting-drift var(--haven-orb-drift-duration, 96s)
    ease-in-out infinite;
  will-change: transform;
}

.light-overlay--peace-guide.light-overlay--orb-view
  .orb-controls
  .peace-ring-control:nth-child(1) {
  --haven-orb-drift-x: 5px;
  --haven-orb-drift-y: -3px;
  --haven-orb-drift-duration: 96s;
}

.light-overlay--peace-guide.light-overlay--orb-view
  .orb-controls
  .peace-ring-control:nth-child(2) {
  --haven-orb-drift-x: -4px;
  --haven-orb-drift-y: 3px;
  --haven-orb-drift-duration: 108s;
}

.light-overlay--peace-guide.light-overlay--orb-view
  .orb-controls
  .peace-ring-control:nth-child(3) {
  --haven-orb-drift-x: 3px;
  --haven-orb-drift-y: 4px;
  --haven-orb-drift-duration: 102s;
}

.light-overlay--peace-guide.light-overlay--orb-view
  .orb-controls
  .peace-ring-control:nth-child(4) {
  --haven-orb-drift-x: -5px;
  --haven-orb-drift-y: -2px;
  --haven-orb-drift-duration: 114s;
}

.light-overlay--peace-guide.light-overlay--orb-view
  .orb-controls
  .peace-ring-control:hover,
.light-overlay--peace-guide.light-overlay--orb-view
  .orb-controls
  .peace-ring-control:focus-within {
  animation-play-state: paused;
  box-shadow: 0 0 20px rgba(var(--guide-ring-bright-rgb), 0.5);
}

.light-overlay--peace-guide.light-overlay--orb-view
  .orb-controls
  .peace-ring-control__header {
  margin-bottom: 10px;
  font-size: 0.68rem;
}

.light-overlay--peace-guide.light-overlay--orb-view
  .orb-controls
  .peace-ring-control__slider {
  width: 84px;
}

@keyframes haven-orb-setting-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(
      var(--haven-orb-drift-x, 4px),
      var(--haven-orb-drift-y, -3px),
      0
    );
  }
  50% {
    transform: translate3d(
      calc(var(--haven-orb-drift-x, 4px) * -0.5),
      calc(var(--haven-orb-drift-y, -3px) * -0.5),
      0
    );
  }
  75% {
    transform: translate3d(
      calc(var(--haven-orb-drift-x, 4px) * 0.35),
      calc(var(--haven-orb-drift-y, -3px) * -0.35),
      0
    );
  }
}

@media (max-width: 480px) {
  .light-overlay--peace-guide.light-overlay--orb-view .orb-controls {
    width: min(244px, calc(100% - 1rem));
    grid-template-columns: repeat(2, 120px);
    gap: 4px;
  }

  .light-overlay--peace-guide.light-overlay--orb-view
    .orb-controls
    .peace-ring-control {
    width: 120px;
    height: 120px;
    padding: 11px;
  }

  .light-overlay--peace-guide.light-overlay--orb-view
    .orb-controls
    .peace-ring-control__slider {
    width: 78px;
  }
}

@media (max-height: 650px) {
  .light-overlay--peace-guide.light-overlay--orb-view .orb-controls {
    width: min(208px, calc(100% - 1rem));
    grid-template-columns: repeat(2, 96px);
    gap: 8px 12px;
  }

  .light-overlay--peace-guide.light-overlay--orb-view
    .orb-controls
    .peace-ring-control {
    width: 96px;
    height: 96px;
    padding: 9px;
  }

  .light-overlay--peace-guide.light-overlay--orb-view
    .orb-controls
    .peace-ring-control__slider {
    width: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .light-overlay--peace-guide.light-overlay--orb-view
    .orb-controls
    .peace-ring-control {
    animation: none;
  }
}