:root {
  --tectonic-ui-ink: #f4f4f1;
  --tectonic-ui-muted: #7b7b78;
  --tectonic-ui-dim: rgba(244, 244, 241, 0.28);
  --tectonic-ui-hairline: rgba(244, 244, 241, 0.36);
  --tectonic-ui-accent: #ffffff;
  --tectonic-ui-band: max(0px, calc((100vh - min(100vh, 41.453488vw)) * 0.5));
  --tectonic-ui-gutter: clamp(30px, 3.35vw, 68px);
  --tectonic-ui-sans: "Bahnschrift", "Arial", sans-serif;
  --tectonic-ui-small-en: "Bahnschrift", "Arial", sans-serif;
  --tectonic-ui-mono: var(--tectonic-ui-small-en);
  --tectonic-ui-han: "Microsoft JhengHei UI", "Microsoft JhengHei", "Microsoft YaHei UI", sans-serif;
}

.tectonic-interface,
.piece-context {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tectonic-interface {
  --idle-choreo-opacity: 1;
  --idle-left-shift-x: 0px;
  --idle-right-shift-x: 0px;
  --idle-top-shift-y: 0vh;
  --idle-bottom-shift-y: 0vh;
  --idle-primary-opacity: 1;
  --idle-secondary-opacity: 1;
  z-index: 3;
  overflow: hidden;
  color: var(--tectonic-ui-ink);
  font-family: var(--tectonic-ui-sans);
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-interaction-ready .tectonic-interface {
  opacity: 1;
}

.tectonic-interface__band,
.piece-context__band {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--tectonic-ui-band);
  overflow: hidden;
}

.tectonic-interface__band--top,
.piece-context__band--top {
  top: 0;
}

.tectonic-interface__band--bottom,
.piece-context__band--bottom {
  bottom: 0;
}

.tectonic-interface__idle-mark,
.tectonic-interface__idle-register {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  color: var(--tectonic-ui-muted);
  font-size: clamp(6px, 0.43vw, 9px);
  font-weight: 600;
  letter-spacing: 0.145em;
  line-height: 1;
  opacity: var(--idle-choreo-opacity);
  will-change: opacity, transform;
}

.tectonic-interface__idle-mark--top-left {
  transform: translate3d(
    var(--idle-left-shift-x),
    calc(-50% + var(--idle-top-shift-y)),
    0
  );
}

.tectonic-interface__idle-register--top-right {
  transform: translate3d(
    var(--idle-right-shift-x),
    calc(-50% + var(--idle-top-shift-y)),
    0
  );
}

.tectonic-interface__idle-mark--bottom-left {
  transform: translate3d(
    var(--idle-left-shift-x),
    calc(-50% + var(--idle-bottom-shift-y)),
    0
  );
}

.tectonic-interface__idle-register--bottom-right {
  transform: translate3d(
    var(--idle-right-shift-x),
    calc(-50% + var(--idle-bottom-shift-y)),
    0
  );
}

.tectonic-interface__idle-mark {
  left: var(--tectonic-ui-gutter);
  gap: clamp(9px, 0.7vw, 14px);
}

.tectonic-interface__idle-mark i {
  display: block;
  width: 4px;
  height: 4px;
  background: var(--tectonic-ui-accent);
}

.tectonic-interface__idle-mark strong {
  color: rgba(244, 244, 241, 0.72);
  font-size: inherit;
  font-weight: 650;
}

.tectonic-interface__idle-mark span {
  opacity: calc(0.58 * var(--idle-secondary-opacity));
}

.tectonic-interface__idle-mark i,
.tectonic-interface__idle-mark strong,
.tectonic-interface__idle-register span:first-child {
  opacity: var(--idle-primary-opacity);
}

.tectonic-interface__idle-register span:not(:first-child) {
  opacity: var(--idle-secondary-opacity);
}

.tectonic-interface__idle-register {
  right: var(--tectonic-ui-gutter);
  gap: clamp(17px, 1.55vw, 32px);
  font-family: var(--tectonic-ui-mono);
  text-align: right;
}

.tectonic-interface__idle-register span:last-child {
  color: rgba(244, 244, 241, 0.64);
  font-family: var(--tectonic-ui-han);
  letter-spacing: 0.18em;
}

.piece-context {
  --context-progress: 0;
  --context-visibility: 0;
  --context-frame-scale: 0;
  --context-title-opacity: 0;
  --context-title-shift-x: 0px;
  --context-title-shift-y: -28vh;
  --context-title-reveal: 0%;
  --context-meta-opacity: 0;
  --context-signal-shift-x: 0px;
  --context-signal-shift-y: 0vh;
  --context-signal-index-opacity: 0;
  --context-signal-index-shift-y: -18vh;
  --context-signal-code-opacity: 0;
  --context-signal-code-shift: -18px;
  --context-detail-opacity: 0;
  --context-detail-shift-x: -156px;
  --context-detail-shift-y: 0vh;
  --context-detail-sub-opacity: 0;
  --context-detail-sub-shift: 0px;
  --context-detail-sub-shift-y: 14vh;
  --context-frame-top-x: 0px;
  --context-frame-top-y: -20vh;
  --context-frame-bottom-x: 88px;
  --context-frame-bottom-y: 0vh;
  --context-data-shift-x: 0px;
  --context-data-shift-y: 0vh;
  --context-data-1: 0;
  --context-data-2: 0;
  --context-data-3: 0;
  --context-data-4: 0;
  --context-data-1-shift: 148px;
  --context-data-2-shift: 126px;
  --context-data-3-shift: 104px;
  --context-data-4-shift: 82px;
  --context-data-1-shift-y: 16px;
  --context-data-2-shift-y: -14px;
  --context-data-3-shift-y: 12px;
  --context-data-4-shift-y: 0px;
  z-index: 4;
  color: var(--tectonic-ui-ink);
  font-family: var(--tectonic-ui-sans);
  font-feature-settings: "kern" 1, "tnum" 1, "zero" 1;
  opacity: var(--context-visibility);
}

.piece-context__band {
  contain: layout paint style;
}

.piece-context__signal,
.piece-context__hero,
.piece-context__thesis,
.piece-context__telemetry,
.piece-context__axis {
  position: absolute;
  will-change: opacity, transform;
}

.piece-context__signal {
  top: 50%;
  left: var(--tectonic-ui-gutter);
  display: grid;
  grid-template-columns: clamp(48px, 3.35vw, 64px) auto;
  align-items: center;
  gap: clamp(15px, 1.2vw, 24px);
  opacity: var(--context-meta-opacity);
  transform: translate3d(
    var(--context-signal-shift-x),
    calc(-50% + var(--context-signal-shift-y)),
    0
  );
}

.piece-context__signal-index {
  display: grid;
  width: clamp(46px, 3.15vw, 60px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(244, 244, 241, 0.48);
  color: var(--tectonic-ui-accent);
  font-size: clamp(24px, 1.85vw, 35px);
  font-weight: 550;
  letter-spacing: -0.075em;
  line-height: 1;
  opacity: var(--context-signal-index-opacity);
  transform: translate3d(0, var(--context-signal-index-shift-y), 0);
  will-change: opacity, transform;
}

.piece-context__signal-index::after {
  position: absolute;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--tectonic-ui-accent);
  border-left: 1px solid var(--tectonic-ui-accent);
  transform: translate(-21px, -21px);
  content: "";
}

.piece-context__signal-code {
  color: var(--tectonic-ui-muted);
  font-family: var(--tectonic-ui-mono);
  font-size: clamp(6px, 0.46vw, 9px);
  letter-spacing: 0.13em;
  line-height: 1.65;
  opacity: var(--context-signal-code-opacity);
  transform: translate3d(var(--context-signal-code-shift), 0, 0);
  will-change: opacity, transform;
}

.piece-context__signal-code b {
  color: rgba(244, 244, 241, 0.8);
  font-weight: 500;
}

.piece-context__hero {
  top: 50%;
  right: var(--tectonic-ui-gutter);
  display: grid;
  width: min(47vw, 790px);
  justify-items: end;
  opacity: var(--context-title-opacity);
  clip-path: inset(0 0 calc(100% - var(--context-title-reveal)) 0);
  transform: translate3d(
    var(--context-title-shift-x),
    calc(-50% + var(--context-title-shift-y)),
    0
  );
}

.piece-context__hero-lockup {
  display: grid;
  width: max-content;
  max-width: 100%;
  justify-items: stretch;
}

.piece-context__thesis-en,
.piece-context__telemetry dt {
  color: var(--tectonic-ui-muted);
  font-family: var(--tectonic-ui-mono);
  font-size: clamp(6px, 0.45vw, 9px);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
}

.piece-context__title {
  display: block;
  color: var(--tectonic-ui-ink);
  font-size: clamp(42px, 4.55vw, 82px);
  font-weight: 650;
  letter-spacing: -0.068em;
  line-height: 0.72;
  text-align: left;
  white-space: nowrap;
}

.piece-context__axis {
  display: flex;
  align-items: center;
  gap: clamp(7px, 0.55vw, 11px);
  opacity: var(--context-meta-opacity);
  transform: scaleX(var(--context-frame-scale));
}

.piece-context__axis span {
  display: block;
  width: 1px;
  height: 9px;
  background: var(--tectonic-ui-dim);
}

.piece-context__axis span:nth-child(3n + 1) {
  height: 18px;
  background: rgba(244, 244, 241, 0.68);
}

.piece-context__axis--top {
  top: 50%;
  left: 38%;
  transform-origin: left center;
  transform: translate3d(
    var(--context-frame-top-x),
    var(--context-frame-top-y),
    0
  ) scaleX(var(--context-frame-scale));
}

.piece-context__thesis {
  top: 50%;
  left: var(--tectonic-ui-gutter);
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  gap: clamp(14px, 1.35vw, 28px);
  transform: translate3d(0, -50%, 0);
}

.piece-context__thesis-han {
  font-family: var(--tectonic-ui-han);
  font-size: clamp(27px, 2.5vw, 47px);
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 0.82;
  opacity: var(--context-detail-opacity);
  transform: translate3d(var(--context-detail-shift-x), 0, 0);
  white-space: nowrap;
  will-change: opacity, transform;
}

.piece-context__thesis-en {
  margin-bottom: 2px;
  opacity: var(--context-detail-sub-opacity);
  transform: translate3d(
    var(--context-detail-sub-shift),
    var(--context-detail-sub-shift-y),
    0
  );
  white-space: nowrap;
  will-change: opacity, transform;
}

.piece-context__telemetry {
  top: 50%;
  right: var(--tectonic-ui-gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(86px, 1fr));
  gap: clamp(16px, 1.65vw, 34px);
  transform: translate3d(
    var(--context-data-shift-x),
    calc(-50% + var(--context-data-shift-y)),
    0
  );
}

.piece-context__telemetry dl {
  position: relative;
  display: grid;
  gap: clamp(9px, 0.8vh, 13px);
  min-width: 0;
  margin: 0;
  padding-top: 11px;
  will-change: opacity, transform;
}

.piece-context__telemetry dl:nth-child(1) {
  opacity: var(--context-data-1);
  transform: translate3d(
    var(--context-data-1-shift),
    var(--context-data-1-shift-y),
    0
  );
}

.piece-context__telemetry dl:nth-child(2) {
  opacity: var(--context-data-2);
  transform: translate3d(
    var(--context-data-2-shift),
    var(--context-data-2-shift-y),
    0
  );
}

.piece-context__telemetry dl:nth-child(3) {
  opacity: var(--context-data-3);
  transform: translate3d(
    var(--context-data-3-shift),
    var(--context-data-3-shift-y),
    0
  );
}

.piece-context__telemetry dl:nth-child(4) {
  opacity: var(--context-data-4);
  transform: translate3d(
    var(--context-data-4-shift),
    var(--context-data-4-shift-y),
    0
  );
}

.piece-context__telemetry dl::before {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(24px, 2.1vw, 42px);
  height: 1px;
  background: var(--tectonic-ui-hairline);
  content: "";
}

.piece-context__telemetry dt,
.piece-context__telemetry dd {
  margin: 0;
  white-space: nowrap;
}

.piece-context__telemetry dd {
  color: rgba(244, 244, 241, 0.86);
  font-family: var(--tectonic-ui-mono);
  font-size: clamp(9px, 0.78vw, 15px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.piece-context__axis--bottom {
  top: 50%;
  left: 42%;
  transform-origin: center center;
  transform: translate3d(
    var(--context-frame-bottom-x),
    var(--context-frame-bottom-y),
    0
  ) scaleX(var(--context-frame-scale));
}

@media (max-width: 1120px) {
  .piece-context__axis,
  .piece-context__telemetry dl:nth-child(n + 3) {
    display: none;
  }

  .piece-context__hero {
    width: 55vw;
  }

  .piece-context__telemetry {
    grid-template-columns: repeat(2, minmax(80px, 1fr));
  }
}

@media (max-width: 760px) {
  .tectonic-interface__idle-mark span,
  .tectonic-interface__idle-register span:not(:last-child),
  .piece-context__signal,
  .piece-context__telemetry,
  .piece-context__thesis-en {
    display: none;
  }

  .piece-context__hero {
    width: calc(100vw - 2 * var(--tectonic-ui-gutter));
  }

  .piece-context__title {
    font-size: clamp(38px, 9vw, 68px);
  }
}

@media (max-height: 720px) {
  .piece-context__thesis-en,
  .piece-context__signal-code,
  .piece-context__telemetry dt {
    display: none;
  }
}

@media (min-aspect-ratio: 2.413 / 1) {
  .tectonic-interface,
  .piece-context {
    display: none;
  }
}

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

  .piece-context__signal,
  .piece-context__hero,
  .piece-context__thesis,
  .piece-context__telemetry {
    transform: translate3d(0, -50%, 0);
  }
}