:root {
  --fixed-control-edge: max(1rem, env(safe-area-inset-right));
  --fixed-control-start: max(1rem, env(safe-area-inset-left));
  --fixed-control-bottom: max(1rem, env(safe-area-inset-bottom));
  --consent-banner-offset: 0px;
  --composition-label-floor: .75rem;
  --composition-copy-floor: .875rem;
  --composition-control-floor: .8125rem;
}

html[dir="rtl"] {
  --fixed-control-edge: max(1rem, env(safe-area-inset-left));
  --fixed-control-start: max(1rem, env(safe-area-inset-right));
}

html,
body {
  max-inline-size: 100%;
  overflow-x: clip;
}

.site-brand {
  align-items: center;
  min-inline-size: 0;
  overflow: visible;
}

.site-emblem-frame {
  display: grid;
  flex: 0 0 3rem;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  max-inline-size: 3rem;
  max-block-size: 3rem;
  overflow: visible;
}

.site-brand img {
  display: block;
  flex: none;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  scale: 1;
  transform: none;
}

.threshold-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: clamp(.55rem, 1.4vw, 1.4rem);
  inline-size: min(48vw, 38rem);
  max-inline-size: min(48vw, 38rem);
  writing-mode: horizontal-tb;
}

.threshold-ledger > span {
  display: flex;
  align-items: center;
  direction: inherit;
  unicode-bidi: isolate;
  min-inline-size: 0;
  overflow-wrap: break-word;
  text-orientation: mixed;
  white-space: normal;
  word-break: normal;
  writing-mode: horizontal-tb;
}

html[dir="rtl"] .threshold-ledger > span {
  direction: rtl;
}

.threshold-ledger b {
  direction: ltr;
  unicode-bidi: isolate;
}

.scroll-cue-glyph {
  position: relative;
  inline-size: 1.15rem;
  block-size: 1.7rem;
  border: 1px solid rgb(255 230 204 / .58);
  border-radius: .65rem;
  background: rgb(7 10 10 / .32);
  box-shadow: 0 0 .65rem rgb(255 114 39 / .26), inset 0 0 .45rem rgb(93 221 241 / .08);
  animation: none;
}

.scroll-cue-glyph::before {
  position: absolute;
  inset: .3rem auto auto 50%;
  inline-size: .18rem;
  block-size: .38rem;
  border-radius: 1rem;
  background: var(--orange);
  box-shadow: 0 0 .45rem rgb(255 114 39 / .7);
  content: "";
  translate: -50% 0;
  animation: scroll-cue-wheel 1.8s ease-in-out infinite;
}

@keyframes scroll-cue-wheel {
  0%, 100% { opacity: .42; translate: -50% 0; }
  48% { opacity: 1; translate: -50% .42rem; }
  70% { opacity: 0; translate: -50% .55rem; }
}

.experience-controls,
.privacy-reopen,
.audio-preview-tooltip,
.privacy-banner:not([hidden]) {
  inset: auto;
}

html:not([dir="rtl"]) .experience-controls {
  right: var(--fixed-control-edge);
  left: auto;
}

html[dir="rtl"] .experience-controls {
  right: auto;
  left: var(--fixed-control-edge);
}

html:not([dir="rtl"]) .privacy-reopen {
  right: auto;
  left: var(--fixed-control-start);
}

html[dir="rtl"] .privacy-reopen {
  right: var(--fixed-control-start);
  left: auto;
}

.experience-controls,
.privacy-reopen {
  bottom: var(--fixed-control-bottom);
}

.experience-controls {
  z-index: 110;
  display: grid;
  block-size: 3.5rem;
  max-inline-size: calc(100vw - 2rem);
}

.experience-controls .experience-settings-button,
.persistent-audio-player,
.experience-controls .persistent-audio-toggle {
  min-inline-size: 0;
}

.persistent-audio-player {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  inline-size: 100%;
  direction: ltr;
}

html[dir="rtl"] .persistent-audio-copy {
  direction: rtl;
  text-align: start;
  unicode-bidi: isolate;
}

.audio-step-button,
.audio-track-index {
  direction: ltr;
  unicode-bidi: isolate;
}

.experience-controls .persistent-audio-toggle {
  inline-size: 100%;
}

.privacy-reopen {
  z-index: 111;
}

html:not([dir="rtl"]) .audio-preview-tooltip {
  right: var(--fixed-control-edge);
  left: auto;
}

html[dir="rtl"] .audio-preview-tooltip {
  right: auto;
  left: var(--fixed-control-edge);
}

.audio-preview-tooltip {
  position: fixed;
  z-index: 121;
  bottom: calc(var(--fixed-control-bottom) + 4.05rem);
  inline-size: min(24rem, calc(100vw - 2rem));
  max-inline-size: calc(100vw - 2rem);
  overflow: clip;
}

.audio-preview-tooltip p,
.solar-light-tooltip p {
  overflow-wrap: break-word;
  word-break: normal;
}

html:not([dir="rtl"]) .privacy-banner:not([hidden]) {
  right: auto;
  left: var(--fixed-control-start);
}

html[dir="rtl"] .privacy-banner:not([hidden]) {
  right: var(--fixed-control-start);
  left: auto;
}

.privacy-banner:not([hidden]) {
  bottom: calc(var(--fixed-control-bottom) + 4.25rem);
  inline-size: min(36rem, calc(100vw - 2rem));
  max-inline-size: calc(100vw - 2rem);
  margin: 0;
}

.privacy-dialog {
  inline-size: min(48rem, calc(100vw - 1rem));
  max-inline-size: calc(100vw - 1rem);
  max-block-size: calc(100dvh - 1rem);
  overflow: clip;
}

.privacy-dialog form,
.privacy-dialog header,
.privacy-dialog fieldset,
.privacy-dialog footer,
.privacy-choice {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.privacy-dialog form {
  grid-template-rows: auto auto auto;
  max-block-size: calc(100dvh - 1rem);
  overflow: clip;
}

.privacy-dialog fieldset {
  min-block-size: 0;
}

.privacy-dialog .privacy-choice {
  min-block-size: 0;
}

html:not([dir="rtl"]) .solar-map-controls,
html:not([dir="rtl"]) .solar-light-help {
  right: 1rem;
  left: auto;
}

html[dir="rtl"] .solar-map-controls,
html[dir="rtl"] .solar-light-help {
  right: auto;
  left: 1rem;
}

.solar-map-controls button,
.solar-light-help-toggle {
  min-inline-size: 0;
}

.solar-map-controls button {
  direction: inherit;
  text-align: start;
}

.solar-map-controls button > .solar-control-signal {
  align-self: center;
}

.solar-light-tooltip {
  max-inline-size: 100%;
  overflow: clip;
}

.solar-light-tooltip-close {
  touch-action: manipulation;
}

html[dir="rtl"] .solar-map figcaption,
html[dir="rtl"] .solar-light-tooltip {
  direction: rtl;
  text-align: start;
}

html[dir="rtl"] :is(
  .solar-chronometer strong,
  .threshold-ledger b,
  .audio-track-index
) {
  direction: ltr;
  unicode-bidi: isolate;
}

.solar-map canvas {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
}

.solar-cycle-selector {
  grid-template-columns: minmax(7.5rem, .18fr) minmax(0, .82fr);
  gap: .7rem 1.25rem;
  margin-block-start: clamp(1.25rem, 2.5vw, 2rem);
  padding: clamp(.75rem, 1.4vw, 1rem);
}

.solar-cycle-buttons {
  gap: .35rem;
}

.solar-cycle-buttons button {
  min-block-size: 2.8rem;
  padding: .55rem clamp(.45rem, .8vw, .72rem);
}

.solar-cycle {
  margin-block-start: clamp(1.4rem, 2.8vw, 2.25rem);
}

.solar-cycle > header {
  grid-template-columns: 3.75rem minmax(10rem, .7fr) minmax(16rem, 1.3fr);
  gap: .65rem 1.25rem;
  margin-block-end: .9rem;
}

.solar-cycle > header h3 {
  font-size: clamp(1.15rem, 1.65vw, 1.8rem);
}

.sun-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sun-card {
  min-block-size: 0;
  padding: clamp(.82rem, 1.3vw, 1.15rem);
}

.sun-card h4 {
  margin-block-start: .52rem;
  font-size: clamp(1.12rem, 1.55vw, 1.65rem);
  line-height: 1;
}

.sun-type {
  gap: .22rem .55rem;
  margin-block-start: .72rem;
  font-size: var(--composition-control-floor);
}

.sun-card dl {
  gap: .38rem;
  margin-block-start: .88rem;
}

.sun-card dl div {
  grid-template-columns: 3.55rem minmax(0, 1fr);
  gap: .5rem;
  padding-block-start: .42rem;
}

.sun-card dt {
  font-size: var(--composition-label-floor);
}

.sun-card dd {
  font-size: var(--composition-copy-floor);
  line-height: 1.32;
  overflow-wrap: break-word;
  word-break: normal;
}

.sun-role {
  margin-block-start: .8rem;
  font-size: var(--composition-copy-floor);
  line-height: 1.35;
}

.sun-role > span {
  margin-block-end: .25rem;
}

.krek-console {
  margin-block-start: clamp(1.25rem, 2.5vw, 2rem);
}

.krek-panels {
  min-block-size: 0;
  padding: clamp(1.15rem, 3vw, 2.5rem);
  text-align: center;
}

.krek-panels h3 {
  margin: .55rem 0;
  font-size: clamp(2rem, 4.2vw, 4.4rem);
  line-height: .92;
}

.krek-panels p {
  max-inline-size: 52ch;
  margin-inline: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

.krek-panels dl {
  margin-block-start: 1.2rem;
}

.krek-tabs button,
.process-card-caption,
.archive-card :is(span, h4, .archive-card-actions, a) {
  word-break: normal;
  writing-mode: horizontal-tb;
}

.archive-card :is(h4, .archive-card-actions a) {
  overflow-wrap: break-word;
}

html:not(:is([lang="x-binary"], [lang="binary"])) :is(
  .scene-index,
  .scene-kicker,
  .solar-cycle-selector-label,
  .solar-chronometer small,
  .solar-map figcaption,
  .solar-map figcaption small,
  .sun-card header > span,
  .sun-card dt,
  .sun-role > span,
  .threshold-ledger > span,
  .krek-tabs button
) {
  font-size: var(--composition-label-floor);
}

html:not(:is([lang="x-binary"], [lang="binary"])) :is(
  .solar-map-controls button strong,
  .solar-map-controls button small,
  .solar-cycle-buttons button
) {
  font-size: var(--composition-control-floor);
}

html:not(:is([lang="x-binary"], [lang="binary"])) :is(
  .solar-light-tooltip strong,
  .solar-light-tooltip p,
  .sun-card dd,
  .sun-role
) {
  font-size: var(--composition-copy-floor);
}

@media (min-width: 1600px) {
  .observatory-scene {
    padding-block-start: clamp(6.5rem, 6vw, 8rem);
    padding-block-end: clamp(4.5rem, 5vw, 6.5rem);
  }

  .observatory-heading {
    grid-template-columns: minmax(0, 1.15fr) minmax(24rem, .85fr);
    gap: 1.5rem clamp(3rem, 5vw, 6rem);
  }

  .observatory-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(27rem, .75fr);
    align-items: start;
    gap: clamp(1.5rem, 2.5vw, 3rem);
    margin-block-start: clamp(1.5rem, 2.5vw, 2.75rem);
  }

  .solar-map {
    aspect-ratio: 1.5;
  }

  .sun-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .experience-controls {
    grid-template-columns: minmax(13rem, 1fr) 18rem;
    inline-size: min(34rem, calc(100vw - 4rem));
  }

  .privacy-reopen-label {
    display: inline;
  }

  html:not([dir="rtl"]) .threshold-ledger {
    right: 4vw;
    left: auto;
  }

  html[dir="rtl"] .threshold-ledger {
    right: auto;
    left: 4vw;
  }

  .threshold-ledger {
    inset-block: auto max(4vw, calc(4.75rem + env(safe-area-inset-bottom)));
    grid-template-columns: repeat(3, minmax(8rem, 1fr));
    inline-size: min(48vw, 42rem);
    max-inline-size: min(48vw, 42rem);
  }
}

@media (min-width: 768px) and (max-width: 1599px) {
  main {
    padding-block-end: calc(5rem + env(safe-area-inset-bottom));
  }

  .experience-controls {
    grid-template-columns: minmax(11.5rem, 1fr) minmax(16rem, 18rem);
    inline-size: min(31rem, calc(100vw - 14rem));
  }

  .privacy-reopen {
    min-inline-size: 10.5rem;
    max-inline-size: min(13rem, calc(100vw - 33rem));
  }

  .privacy-reopen-label {
    display: inline;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .observatory-scene {
    padding-block-start: clamp(6rem, 8vw, 8rem);
    padding-block-end: clamp(4rem, 6vw, 6rem);
  }

  .observatory-heading {
    gap: 1.25rem clamp(2rem, 4vw, 4rem);
  }

  .observatory-layout {
    align-items: start;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
  }

  .solar-map {
    aspect-ratio: 1.4;
  }

  html:not([dir="rtl"]) .threshold-ledger {
    right: 4vw;
    left: auto;
  }

  html[dir="rtl"] .threshold-ledger {
    right: auto;
    left: 4vw;
  }

  .threshold-ledger {
    inset-block: auto max(4vw, calc(4.75rem + env(safe-area-inset-bottom)));
    grid-template-columns: repeat(3, minmax(7rem, 1fr));
    inline-size: min(52vw, 40rem);
    max-inline-size: min(52vw, 40rem);
  }
}

@media (min-width: 1100px) and (max-width: 1599px) {
  .observatory-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(22rem, .65fr);
  }

  .sun-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  :root {
    --composition-label-floor: .75rem;
    --composition-copy-floor: .875rem;
    --composition-control-floor: .8125rem;
  }

  .observatory-heading,
  .observatory-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .observatory-heading .scene-index {
    grid-column: 1;
  }

  .solar-consequences {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solar-map {
    aspect-ratio: auto;
    block-size: auto;
    min-block-size: 0;
    overflow: clip;
  }

  .solar-map-stage {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-rows: auto minmax(30rem, 68vw) auto auto auto;
    block-size: auto;
    min-block-size: 0;
  }

  .solar-map-controls,
  html[dir="rtl"] .solar-map-controls {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    grid-row: 1;
    inline-size: 100%;
    max-inline-size: none;
    gap: .4rem;
    padding: .55rem;
  }

  .solar-light-help,
  html[dir="rtl"] .solar-light-help {
    position: relative;
    inset: auto;
    grid-row: 5;
    inline-size: auto;
    max-inline-size: none;
    margin: .55rem;
    margin-block-end: calc(4rem + env(safe-area-inset-bottom));
  }

  .solar-light-tooltip {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
    inline-size: 100%;
    max-block-size: none;
    overflow: clip;
  }

  .solar-map canvas {
    grid-row: 2;
  }

  .solar-chronometer {
    position: relative;
    inset: auto;
    grid-row: 3;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    pointer-events: auto;
  }

  .solar-map figcaption {
    position: relative;
    inset: auto;
    grid-row: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    padding: .55rem;
  }

  .solar-map figcaption small {
    grid-column: 1 / -1;
    max-inline-size: none;
  }

  .threshold-ledger,
  html[dir="rtl"] .threshold-ledger {
    position: relative;
    inset: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
    inline-size: 100%;
    max-inline-size: 100%;
    margin-block-start: 1rem;
    padding-block: .55rem;
    border-block: 1px solid rgb(255 126 54 / .26);
  }

  .solar-cycle-selector {
    grid-template-columns: minmax(0, 1fr);
  }

  .solar-cycle-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
  }

  .solar-cycle-buttons button {
    min-block-size: 44px;
    padding: .55rem .45rem;
    line-height: 1.15;
    text-align: center;
  }

  .solar-cycle > header {
    grid-template-columns: 4rem minmax(0, 1fr);
  }

  .solar-cycle > header p {
    grid-column: 1 / -1;
  }

  .sun-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 431px) and (max-width: 767px) {
  :root {
    --fixed-control-edge: max(.5rem, env(safe-area-inset-right));
    --fixed-control-start: max(.5rem, env(safe-area-inset-left));
    --fixed-control-bottom: max(.5rem, env(safe-area-inset-bottom));
    --composition-label-floor: .6875rem;
    --composition-copy-floor: .8125rem;
    --composition-control-floor: .75rem;
  }

  html[dir="rtl"] {
    --fixed-control-edge: max(.5rem, env(safe-area-inset-left));
    --fixed-control-start: max(.5rem, env(safe-area-inset-right));
  }

  main {
    padding-block-end: calc(4.75rem + env(safe-area-inset-bottom));
  }

  html:not([dir="rtl"]) .experience-controls {
    right: var(--fixed-control-edge);
    left: calc(var(--fixed-control-start) + 44px + .4rem);
  }

  html[dir="rtl"] .experience-controls {
    right: calc(var(--fixed-control-start) + 44px + .4rem);
    left: var(--fixed-control-edge);
  }

  .experience-controls {
    grid-template-columns: 42px minmax(0, 1fr);
    inline-size: auto;
    block-size: 44px;
    gap: .32rem;
  }

  .experience-controls .experience-settings-button {
    inline-size: 42px;
    min-inline-size: 42px;
    padding: .35rem;
  }

  .experience-controls .experience-settings-button > span:not(.control-glyph) {
    display: none;
  }

  .persistent-audio-player {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
  }

  .experience-controls .audio-step-button {
    inline-size: 38px;
    min-inline-size: 38px;
  }

  .privacy-reopen {
    display: grid;
    place-items: center;
    inline-size: 44px;
    max-inline-size: 44px;
    min-block-size: 44px;
    overflow: hidden;
    padding: 0;
  }

  .privacy-reopen-label {
    display: none;
  }

  .audio-preview-tooltip {
    right: max(.5rem, env(safe-area-inset-right));
    bottom: calc(var(--fixed-control-bottom) + 44px + .55rem + var(--consent-banner-offset));
    left: max(.5rem, env(safe-area-inset-left));
    inline-size: auto;
    max-inline-size: none;
  }

  .privacy-banner:not([hidden]) {
    right: max(.5rem, env(safe-area-inset-right));
    bottom: calc(var(--fixed-control-bottom) + 44px + .55rem);
    left: max(.5rem, env(safe-area-inset-left));
    inline-size: auto;
    max-inline-size: none;
  }

  .observatory-heading,
  .observatory-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .observatory-heading .scene-index {
    grid-column: 1;
  }

  .observatory-layout {
    margin-block-start: 1.25rem;
  }

  .solar-map {
    aspect-ratio: auto;
    block-size: auto;
    min-block-size: 0;
    overflow: clip;
  }

  .solar-map-stage {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-rows: auto minmax(24rem, 72vw) auto auto auto;
    block-size: auto;
    min-block-size: 0;
  }

  .solar-map-controls {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    grid-row: 1;
    inline-size: 100%;
    max-inline-size: none;
    gap: .35rem;
    padding: .5rem;
  }

  .solar-map-controls button {
    min-block-size: 44px;
    padding: .45rem .55rem;
  }

  .solar-map canvas {
    grid-row: 2;
    min-block-size: 0;
  }

  .solar-chronometer {
    position: relative;
    inset: auto;
    grid-row: 3;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    pointer-events: auto;
  }

  .solar-map figcaption {
    position: relative;
    inset: auto;
    grid-row: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    padding: .55rem;
  }

  .solar-map figcaption span {
    min-inline-size: 0;
    justify-content: center;
    text-align: center;
  }

  .solar-map figcaption small {
    grid-column: 1 / -1;
    max-inline-size: none;
    text-align: start;
  }

  .solar-light-help {
    position: relative;
    inset: auto;
    grid-row: 5;
    inline-size: auto;
    max-inline-size: none;
    margin: .5rem;
    margin-block-end: calc(3.75rem + env(safe-area-inset-bottom));
  }

  .solar-light-tooltip {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem .58rem;
    inline-size: 100%;
    max-block-size: none;
    overflow: clip;
  }

  .solar-light-topic-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
  }

  .solar-light-topic {
    min-inline-size: 0;
  }

  .solar-light-tooltip > .solar-light-topic + .solar-light-topic {
    margin-block-start: 0;
  }

  .solar-consequences {
    grid-template-columns: 1fr;
  }

  .solar-cycle-selector {
    grid-template-columns: minmax(0, 1fr);
  }

  .solar-cycle-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
  }

  .solar-cycle-buttons button {
    min-block-size: 44px;
    padding: .5rem .35rem;
    line-height: 1.15;
    text-align: center;
  }

  .solar-cycle > header {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .solar-cycle > header p {
    grid-column: 1 / -1;
  }

  .sun-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  .process-card-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: .8rem .65rem;
  }

  .process-card {
    aspect-ratio: 4 / 5;
  }

  .process-card-caption {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: .4rem;
    padding: 2.8rem .55rem .58rem;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .process-card-caption > span {
    white-space: normal;
    overflow-wrap: break-word;
  }

  .krek-panels dl {
    grid-template-columns: 1fr;
  }

  .threshold-ledger,
  html[dir="rtl"] .threshold-ledger {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
    gap: .4rem;
    inline-size: 100%;
    max-inline-size: 100%;
    margin-block-start: 1rem;
    padding-block: .55rem;
    border-block: 1px solid rgb(255 126 54 / .26);
  }

  .threshold-ledger > span {
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }
}

@media (max-width: 430px) {
  :root {
    --fixed-control-edge: max(.45rem, env(safe-area-inset-right));
    --fixed-control-start: max(.45rem, env(safe-area-inset-left));
    --fixed-control-bottom: max(.45rem, env(safe-area-inset-bottom));
    --composition-label-floor: .6875rem;
    --composition-copy-floor: .75rem;
    --composition-control-floor: .75rem;
  }

  html[dir="rtl"] {
    --fixed-control-edge: max(.45rem, env(safe-area-inset-left));
    --fixed-control-start: max(.45rem, env(safe-area-inset-right));
  }

  main {
    padding-block-end: calc(4.5rem + env(safe-area-inset-bottom));
  }

  .experience-controls {
    bottom: var(--fixed-control-bottom);
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .3rem;
    inline-size: auto;
    max-inline-size: none;
    block-size: 44px;
  }

  html:not([dir="rtl"]) .experience-controls {
    right: max(.45rem, env(safe-area-inset-right));
    left: calc(max(.45rem, env(safe-area-inset-left)) + 44px + .3rem);
  }

  html[dir="rtl"] .experience-controls {
    right: calc(max(.45rem, env(safe-area-inset-right)) + 44px + .3rem);
    left: max(.45rem, env(safe-area-inset-left));
  }

  .experience-controls .experience-settings-button {
    inline-size: 42px;
    min-inline-size: 42px;
    padding: .35rem;
  }

  .experience-controls .experience-settings-button > span:not(.control-glyph) {
    display: none;
  }

  .persistent-audio-player {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
  }

  .experience-controls .audio-step-button {
    inline-size: 38px;
    min-inline-size: 38px;
    padding-inline: .3rem;
  }

  .experience-controls .persistent-audio-toggle {
    padding-inline: .38rem;
  }

  .experience-controls .persistent-audio-copy {
    font-size: clamp(.4rem, 2.7vw, .52rem);
    letter-spacing: .045em;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .privacy-reopen,
  html[dir="rtl"] .privacy-reopen {
    right: auto;
    bottom: var(--fixed-control-bottom);
    left: max(.45rem, env(safe-area-inset-left));
    display: grid;
    place-items: center;
    inline-size: 44px;
    max-inline-size: 44px;
    min-block-size: 44px;
    overflow: hidden;
    padding: 0;
  }

  html[dir="rtl"] .privacy-reopen {
    right: max(.45rem, env(safe-area-inset-right));
    left: auto;
  }

  .privacy-reopen-label {
    display: none;
  }

  .audio-preview-tooltip,
  html[dir="rtl"] .audio-preview-tooltip {
    right: max(.5rem, env(safe-area-inset-right));
    bottom: calc(var(--fixed-control-bottom) + 44px + .55rem + var(--consent-banner-offset));
    left: max(.5rem, env(safe-area-inset-left));
    inline-size: auto;
    max-inline-size: none;
    padding: .62rem .68rem;
    font-size: .58rem;
  }

  .privacy-banner:not([hidden]),
  html[dir="rtl"] .privacy-banner:not([hidden]) {
    right: max(.5rem, env(safe-area-inset-right));
    bottom: calc(var(--fixed-control-bottom) + 44px + .55rem);
    left: max(.5rem, env(safe-area-inset-left));
    inline-size: auto;
    max-inline-size: none;
  }

  .observatory-heading,
  .observatory-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .observatory-scene {
    padding-block-start: clamp(1rem, 4vw, 1.35rem);
  }

  .observatory-heading {
    gap: .75rem;
  }

  .observatory-heading .scene-index {
    grid-column: 1;
    margin-block-end: .25rem;
  }

  .observatory-heading > p:last-child {
    margin: 0;
  }

  .observatory-layout {
    margin-block-start: .75rem;
  }

  .solar-map {
    aspect-ratio: auto;
    block-size: auto;
    min-block-size: 0;
    overflow: clip;
  }

  .solar-map-stage {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-rows: auto clamp(14rem, 60vw, 16.25rem) auto auto auto;
    block-size: auto;
    min-block-size: 0;
  }

  .solar-map-controls,
  html[dir="rtl"] .solar-map-controls {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
    grid-row: 1;
    inline-size: 100%;
    max-inline-size: none;
    gap: .28rem;
    padding: .42rem;
  }

  .solar-map-controls button,
  .solar-light-help-toggle {
    min-block-size: 40px;
  }

  .solar-map-controls button {
    grid-template-columns: .55rem minmax(0, 1fr);
    gap: .32rem;
    padding: .38rem .42rem;
  }

  .solar-map-controls button strong {
    font-size: var(--composition-control-floor);
    letter-spacing: .045em;
    line-height: 1.06;
  }

  .solar-map-controls button small {
    display: none;
  }

  .solar-light-help-toggle {
    inline-size: 40px;
  }

  .solar-map canvas {
    grid-row: 2;
    min-block-size: 0;
  }

  .solar-chronometer {
    position: relative;
    inset: auto;
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    pointer-events: auto;
  }

  .solar-chronometer > span {
    padding: .38rem .45rem .42rem;
  }

  .solar-chronometer > span:nth-child(odd) {
    border-inline-start: 0;
  }

  .solar-chronometer > span:nth-child(n + 3) {
    border-block-start: 1px solid rgb(122 215 232 / .16);
  }

  .solar-chronometer small {
    font-size: var(--composition-label-floor);
    letter-spacing: .065em;
  }

  .solar-chronometer strong {
    font-size: var(--composition-control-floor);
  }

  .solar-map figcaption {
    position: relative;
    inset: auto;
    grid-row: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .3rem;
    padding: .42rem;
    font-size: var(--composition-label-floor);
    letter-spacing: .06em;
  }

  .solar-map figcaption span {
    min-inline-size: 0;
    justify-content: center;
    gap: .3rem;
    text-align: center;
  }

  .solar-map figcaption i {
    inline-size: min(1.1rem, 20%);
  }

  .solar-map figcaption small {
    grid-column: 1 / -1;
    max-inline-size: none;
    font-size: var(--composition-label-floor);
    text-align: start;
  }

  .solar-light-help,
  html[dir="rtl"] .solar-light-help {
    position: relative;
    inset: auto;
    grid-row: 5;
    inline-size: auto;
    max-inline-size: none;
    margin: .42rem;
    margin-block-end: .42rem;
    overflow-anchor: none;
  }

  .solar-light-tooltip {
    position: relative;
    inset: auto;
    inline-size: 100%;
    max-block-size: none;
    overflow: clip;
    padding: .78rem 2.75rem .82rem .78rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .58rem;
  }

  html[dir="rtl"] .solar-light-tooltip {
    padding-inline: .78rem 2.75rem;
  }

  .solar-light-topic-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
    margin-block-end: .58rem;
    padding-inline-end: 1.7rem;
    grid-column: 1 / -1;
  }

  html[dir="rtl"] .solar-light-topic-tabs {
    padding-inline: 1.7rem 0;
  }

  .solar-light-topic-tabs button {
    min-block-size: 42px;
    min-inline-size: 0;
    font-size: clamp(.54rem, 2.55vw, .64rem);
    line-height: 1.22;
    overflow-wrap: anywhere;
  }

  .solar-light-topic p {
    min-inline-size: 0;
    font-size: clamp(.5rem, 2.1vw, .56rem);
    line-height: 1.24;
    overflow-wrap: break-word;
  }

  .solar-light-topic[hidden] {
    display: block !important;
  }

  .solar-light-help .solar-light-tooltip-close {
    inline-size: 44px;
    block-size: 44px;
    min-inline-size: 44px;
    min-block-size: 44px;
  }

  body[data-solar-light-disclosure="open"] :is(
    .experience-controls,
    .privacy-reopen,
    .privacy-banner,
    .audio-preview-tooltip
  ) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .solar-consequences {
    grid-template-columns: 1fr;
  }

  .solar-cycle-selector {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
    padding: .65rem;
  }

  .solar-cycle-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .28rem;
  }

  .solar-cycle-buttons button {
    min-block-size: 44px;
    padding: .45rem .28rem;
    line-height: 1.12;
    text-align: center;
  }

  .solar-cycle > header {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: .45rem .7rem;
  }

  .solar-cycle > header p {
    grid-column: 1 / -1;
  }

  .sun-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .krek-panels dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .threshold-ledger,
  html[dir="rtl"] .threshold-ledger {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.75rem), 1fr));
    gap: .28rem;
    inline-size: 100%;
    max-inline-size: 100%;
    margin-block-start: .8rem;
    padding-block: .45rem;
    border-block: 1px solid rgb(255 126 54 / .26);
  }

  .threshold-ledger > span {
    justify-content: center;
    gap: .22rem;
    font-size: var(--composition-label-floor);
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .threshold-ledger b {
    font-size: .75rem;
  }

  .process-decks {
    gap: 1rem;
  }

  .process-deck {
    padding: .8rem .65rem 1rem;
  }

  .process-card-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: .7rem .58rem;
    padding: .35rem .12rem .55rem;
  }

  .process-card {
    aspect-ratio: 4 / 5;
  }

  .process-card-caption {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: end;
    align-items: end;
    gap: .35rem;
    padding: 2.6rem .5rem .52rem;
    font-size: clamp(.75rem, 2.8vw, .8125rem);
    line-height: 1.15;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    writing-mode: horizontal-tb;
  }

  html[dir="rtl"] .process-card-caption {
    direction: rtl;
  }

  .process-card-caption b {
    direction: ltr;
    unicode-bidi: isolate;
  }

  .process-card-caption > span {
    min-inline-size: 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    writing-mode: horizontal-tb;
  }

  .privacy-dialog {
    inline-size: calc(100vw - .6rem);
    max-inline-size: calc(100vw - .6rem);
    max-block-size: calc(100dvh - .6rem);
    overflow: clip;
  }

  .privacy-dialog form {
    grid-template-rows: auto auto auto;
    max-block-size: calc(100dvh - .6rem);
    overflow: clip;
  }

  .privacy-dialog header,
  .privacy-dialog fieldset,
  .privacy-dialog footer {
    padding-inline: .7rem;
  }

  .privacy-dialog header {
    padding-block: .65rem .5rem;
  }

  .privacy-dialog h2 {
    font-size: clamp(1.25rem, 8vw, 1.75rem);
    line-height: .95;
    overflow-wrap: anywhere;
  }

  .privacy-dialog p,
  .privacy-choice small {
    font-size: .6875rem;
    line-height: 1.28;
  }

  .privacy-choice strong {
    font-size: .75rem;
  }

  .privacy-choice {
    gap: .5rem;
    padding: .52rem .58rem;
  }

  .privacy-dialog footer {
    gap: .45rem;
    padding-block: .55rem;
  }

  .privacy-dialog header button,
  .privacy-dialog footer .privacy-primary {
    inline-size: auto;
    min-block-size: 44px;
  }

  .privacy-dialog header button {
    inline-size: 44px;
  }
}

@media (dynamic-range: high) {
  .site-header,
  .solar-map,
  .process-deck,
  .archive-card,
  .sun-card {
    border-color: color-mix(in srgb, var(--orange) 48%, var(--cyan) 18%, transparent);
  }

  .solar-map,
  .archive-card[data-card-active],
  .process-card[data-card-active] {
    box-shadow:
      0 1.6rem 4.5rem rgb(0 0 0 / .5),
      0 0 1.2rem rgb(255 115 42 / .18),
      0 0 1.8rem rgb(91 215 238 / .1);
  }
}

@media (max-width: 430px) and (max-height: 680px) {
  .privacy-dialog form {
    grid-template-rows: auto auto auto;
    overflow: clip;
  }

  .privacy-dialog header > span,
  .privacy-dialog header > p {
    display: block;
  }

  .privacy-dialog h2 {
    margin: .12rem 0 .22rem;
    font-size: clamp(1rem, 6.5vw, 1.35rem);
  }

  .privacy-dialog fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .privacy-choice-required {
    grid-column: 1 / -1;
  }

  .privacy-choice {
    align-content: start;
    gap: .28rem;
    padding: .38rem .48rem;
  }

  .privacy-dialog p,
  .privacy-choice small {
    display: block;
    overflow: visible;
    font-size: .6875rem;
    line-height: 1.2;
    -webkit-box-orient: initial;
    -webkit-line-clamp: unset;
  }
}

@media (max-height: 520px) {
  .privacy-dialog {
    inline-size: min(62rem, calc(100vw - .6rem));
    max-inline-size: calc(100vw - .6rem);
    max-block-size: calc(100dvh - .6rem);
    overflow: clip;
  }

  .privacy-dialog form {
    grid-template-rows: auto auto auto;
    max-block-size: calc(100dvh - .6rem);
    overflow: clip;
  }

  .privacy-dialog header {
    padding-block: .5rem .4rem;
    padding-inline: .7rem 3rem;
  }

  .privacy-dialog header > span,
  .privacy-dialog header > p {
    display: block;
  }

  .privacy-dialog h2 {
    margin: 0;
    font-size: clamp(1.1rem, 4.2vw, 1.6rem);
    line-height: 1;
  }

  .privacy-choice {
    align-content: start;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .3rem;
    padding: .45rem .55rem;
  }

  .privacy-choice strong {
    font-size: .6875rem;
  }

  .privacy-choice small {
    display: block;
    overflow: visible;
    font-size: .625rem;
    line-height: 1.16;
    -webkit-box-orient: initial;
    -webkit-line-clamp: unset;
  }

  .privacy-choice > b {
    font-size: .625rem;
  }

  .privacy-choice input {
    inline-size: 1.375rem;
    block-size: 1.375rem;
  }

  .privacy-dialog footer {
    gap: .45rem;
    padding: .42rem .7rem;
  }

  .privacy-dialog footer a {
    font-size: .625rem;
  }

  .privacy-dialog footer button {
    min-block-size: 44px;
    padding: .4rem .65rem;
    font-size: .6875rem;
  }
}

@media (max-width: 599px) and (max-height: 520px) {
  .privacy-dialog fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .privacy-choice-required {
    grid-column: 1 / -1;
  }
}

@media (min-width: 600px) and (max-height: 520px) {
  .privacy-dialog fieldset {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .privacy-choice {
    border-inline-end: 1px solid var(--line);
  }

  .privacy-choice:last-child {
    border-inline-end: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-brand img,
  .experience-controls,
  .privacy-reopen,
  .audio-preview-tooltip,
  .solar-map-stage {
    transition-duration: .01ms !important;
  }

  .scroll-cue-glyph::before {
    animation: none;
  }
}