:root {
  color: #dce7e8;
  background: #000;
  font-family: "Bahnschrift", "Arial", sans-serif;
  font-synthesis: none;
  --cold: #b8feff;
  --dim: #697476;
  --hairline: rgba(194, 235, 237, 0.22);
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

button {
  color: inherit;
  font: inherit;
}

#app {
  position: relative;
  isolation: isolate;
}

/* The opening hero belongs to the document after loading, but it is authored
   before #app so it can be the first scroll section. While the real loader is
   active, lift the original app/loading surface into a fixed top-level shield.
   This preserves the established loader exactly and prevents any future hero
   or transition section from becoming its accidental background. */
html.is-tectonic-interaction-booting #app,
html.is-tectonic-interaction-loading #app,
body.is-tectonic-interaction-loading #app {
  position: fixed;
  z-index: 10000;
  inset: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

#stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The core V1 scene becomes renderable before the interaction caches and
   media decoders are ready. Keep those GPU preparations alive but visually
   shield the stage until the real interaction hard gate reaches 100%. */
html.is-tectonic-interaction-booting #stage,
body.is-tectonic-interaction-loading #stage {
  opacity: 0;
  pointer-events: none;
}

/* The interaction typography sits above the WebGL stage. Keep every
   non-loader sibling at zero opacity until the real preload gate releases;
   otherwise the core loader's earlier `is-ready` milestone can flash the
   final layout above the still-running interaction preload. */
html.is-tectonic-interaction-booting
  #app > :not(#stage):not(#loading):not(#loading-guides),
body.is-tectonic-interaction-loading
  #app > :not(#stage):not(#loading):not(#loading-guides) {
  opacity: 0 !important;
  pointer-events: none !important;
}

#stage canvas {
  display: block;
  background: #000;
  outline: 1px solid rgba(255, 255, 255, 0.025);
}

/* Click-to-video, black-page loading and main-page reveal are one atomic
   interaction lock. The class is released only after the returning black
   surface has finished fading, so hidden hit proxies can never react early. */
body.is-piece-interaction-locked #stage canvas {
  pointer-events: none;
}

#stage .tectonic-settled-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: block;
  max-width: none;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

#stage .tectonic-settled-frame.is-active {
  opacity: 1;
}

.identity {
  position: absolute;
  top: 22px;
  left: 25px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 12px;
  pointer-events: none;
  letter-spacing: 0.11em;
}

.identity::after {
  content: "";
  position: absolute;
  top: -22px;
  left: 50px;
  width: 1px;
  height: 14px;
  background: var(--hairline);
}

.identity__index {
  grid-row: 1 / span 2;
  align-self: stretch;
  padding-right: 12px;
  border-right: 1px solid var(--hairline);
  color: var(--cold);
  font-size: 9px;
  writing-mode: vertical-rl;
}

.identity__name {
  font-family: "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: 0.18em;
}

.identity__mode {
  margin-top: 5px;
  color: var(--dim);
  font-size: 8px;
}

.loading {
  position: absolute;
  z-index: 100;
  top: 50%;
  left: 50%;
  width: min(560px, calc(100vw - 64px));
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 500ms ease, transform 500ms ease;
}

.loading.is-complete {
  opacity: 0;
  transform: translate3d(-50%, calc(-50% + 5px), 0);
  pointer-events: none;
}

.loading__guide-field {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
}

.loading__guide {
  position: absolute;
  display: block;
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: layout paint style;
}

.loading__guide b {
  position: absolute;
  display: block;
  background: rgba(202, 24, 38, 0.76);
  box-shadow: none;
}

.loading__guide b.loading__guide-line--main {
  box-shadow: 0 0 6px rgba(202, 24, 38, 0.24);
}

.loading__guide b.loading__guide-line--soft {
  opacity: 0.34;
}

.loading__guide b.loading__guide-line--hair {
  opacity: 0.18;
}

.loading__guide b.loading__guide-line--dash {
  opacity: 0.62;
  box-shadow: none;
}

.loading__guide b.loading__guide-line--dot {
  opacity: 0.52;
  box-shadow: none;
}

.loading__guide--horizontal {
  left: 0;
  width: 100%;
  height: 13px;
  transform: scaleX(0);
}

.loading__guide--horizontal b {
  left: 0;
  width: 100%;
  height: 1px;
}

.loading__guide--horizontal b:nth-child(1) {
  top: 0;
}

.loading__guide--left b:nth-child(2) {
  top: 3px;
}

.loading__guide--left b:nth-child(3) {
  top: 8px;
}

.loading__guide--left b:nth-child(4) {
  top: 12px;
}

.loading__guide--right {
  height: 8px;
}

.loading__guide--right b:nth-child(1) {
  top: 0;
}

.loading__guide--right b:nth-child(2) {
  top: 7px;
}

.loading__guide--horizontal .loading__guide-line--dash {
  background: repeating-linear-gradient(
    to right,
    rgba(202, 24, 38, 0.78) 0 13px,
    transparent 13px 24px
  );
}

.loading__guide--horizontal .loading__guide-line--dot {
  background: repeating-linear-gradient(
    to right,
    rgba(202, 24, 38, 0.74) 0 2px,
    transparent 2px 8px
  );
}

.loading__guide--vertical {
  top: 0;
  width: 13px;
  height: 100%;
  transform: scaleY(0);
}

.loading__guide--vertical b {
  top: 0;
  width: 1px;
  height: 100%;
}

.loading__guide--vertical b:nth-child(1) {
  left: 0;
}

.loading__guide--top {
  width: 10px;
}

.loading__guide--top b:nth-child(2) {
  left: 5px;
}

.loading__guide--top b:nth-child(3) {
  left: 9px;
}

.loading__guide--bottom b:nth-child(2) {
  left: 3px;
}

.loading__guide--bottom b:nth-child(3) {
  left: 7px;
}

.loading__guide--bottom b:nth-child(4) {
  left: 12px;
}

.loading__guide--vertical .loading__guide-line--dash {
  background: repeating-linear-gradient(
    to bottom,
    rgba(202, 24, 38, 0.78) 0 13px,
    transparent 13px 24px
  );
}

.loading__guide--vertical .loading__guide-line--dot {
  background: repeating-linear-gradient(
    to bottom,
    rgba(202, 24, 38, 0.74) 0 2px,
    transparent 2px 8px
  );
}

.loading__guide--left {
  top: calc(50% - 38px);
  transform-origin: left center;
  animation: tectonic-loading-guide-horizontal 15s cubic-bezier(0.4, 0, 0.2, 1) 0s infinite;
}

.loading__guide--right {
  top: calc(50% + 38px);
  transform-origin: right center;
  animation: tectonic-loading-guide-horizontal 15s cubic-bezier(0.4, 0, 0.2, 1) 1.05s infinite;
}

.loading__guide--top {
  left: calc(50% - min(310px, 31vw));
  transform-origin: center top;
  animation: tectonic-loading-guide-vertical 15s cubic-bezier(0.4, 0, 0.2, 1) 2.1s infinite;
}

.loading__guide--bottom {
  left: calc(50% + min(310px, 31vw));
  transform-origin: center bottom;
  animation: tectonic-loading-guide-vertical 15s cubic-bezier(0.4, 0, 0.2, 1) 3.15s infinite;
}

.loading.is-final-guide-cycle .loading__guide--left {
  animation: tectonic-loading-guide-horizontal-final
    15s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 both;
}

.loading.is-final-guide-cycle .loading__guide--right {
  animation: tectonic-loading-guide-horizontal-final
    15s cubic-bezier(0.4, 0, 0.2, 1) 0.7s 1 both;
}

.loading.is-final-guide-cycle .loading__guide--top {
  animation: tectonic-loading-guide-vertical-final
    15s cubic-bezier(0.4, 0, 0.2, 1) 1.4s 1 both;
}

.loading.is-final-guide-cycle .loading__guide--bottom {
  animation: tectonic-loading-guide-vertical-final
    15s cubic-bezier(0.4, 0, 0.2, 1) 2.1s 1 both;
}

.loading.is-guide-safe-to-complete .loading__guide {
  animation: none;
  opacity: 0;
}

@keyframes tectonic-loading-guide-horizontal {
  0%,
  4% {
    opacity: 0;
    transform: scaleX(0);
  }

  11% {
    opacity: 0.62;
    transform: scaleX(1);
  }

  17% {
    opacity: 0.42;
    transform: scaleX(1);
  }

  31%,
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes tectonic-loading-guide-vertical {
  0%,
  4% {
    opacity: 0;
    transform: scaleY(0);
  }

  11% {
    opacity: 0.58;
    transform: scaleY(1);
  }

  17% {
    opacity: 0.38;
    transform: scaleY(1);
  }

  31%,
  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}

@keyframes tectonic-loading-guide-horizontal-final {
  0%,
  4% {
    opacity: 0;
    transform: scaleX(0);
  }

  11% {
    opacity: 0.62;
    transform: scaleX(1);
  }

  17% {
    opacity: 0.42;
    transform: scaleX(1);
  }

  31%,
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes tectonic-loading-guide-vertical-final {
  0%,
  4% {
    opacity: 0;
    transform: scaleY(0);
  }

  11% {
    opacity: 0.58;
    transform: scaleY(1);
  }

  17% {
    opacity: 0.38;
    transform: scaleY(1);
  }

  31%,
  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}

.loading__rule {
  position: relative;
  z-index: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.loading__rule span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--cold);
  box-shadow: 0 0 8px rgba(184, 254, 255, 0.38);
  transition: width 160ms linear;
}

body.is-tectonic-interaction-loading #loading-bar {
  visibility: hidden;
}

#interaction-loading-bar {
  position: absolute;
  inset: 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 120ms linear;
  will-change: transform;
}

body.is-tectonic-interaction-loading .loading.is-complete[data-tectonic-progress-complete="false"] {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: auto;
}

.loading__copy {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: #8d999b;
  font-size: 8px;
  letter-spacing: 0.12em;
}

.diagnostics {
  position: absolute;
  top: 20px;
  right: 20px;
  width: min(390px, calc(100vw - 40px));
  max-height: calc(100vh - 78px);
  overflow: auto;
  border: 1px solid var(--hairline);
  background: rgba(2, 5, 5, 0.92);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px);
}

.diagnostics__heading {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(2, 5, 5, 0.96);
  color: var(--cold);
  font-size: 9px;
  letter-spacing: 0.14em;
}

.diagnostics__heading button,
.statusline button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.diagnostics dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  font-size: 9px;
}

.diagnostics dt,
.diagnostics dd {
  margin: 0;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(194, 235, 237, 0.08);
}

.diagnostics dt {
  color: #778385;
}

.diagnostics dd {
  color: #d7e2e3;
  text-align: right;
}

.statusline {
  position: absolute;
  right: 22px;
  bottom: 20px;
  display: flex;
  gap: 18px;
  color: #667173;
  font-size: 8px;
  letter-spacing: 0.12em;
}

.identity,
.statusline {
  transition: opacity 450ms ease;
}

body.is-ready .identity,
body.is-ready .statusline {
  opacity: 0;
  pointer-events: none;
}

.statusline button:hover,
.statusline button:focus-visible {
  color: var(--cold);
}

body[data-error] .loading__rule span {
  background: #ff6c5e;
}

@media (max-width: 720px) {
  .identity {
    top: 16px;
    left: 16px;
  }

  .loading {
    width: calc(100vw - 32px);
  }

  .statusline {
    right: 16px;
    bottom: 12px;
  }
}