html[data-color-mode] .hero {
  min-height: min(900px, calc(100svh - 72px));
  padding: 76px 0 112px;
  isolation: isolate;
  overflow: hidden;
  background: #061019;
}

html[data-color-mode] .hero::before {
  z-index: -1;
  background: linear-gradient(90deg, rgba(4, 12, 19, .96) 0%, rgba(4, 12, 19, .88) 38%, rgba(4, 12, 19, .48) 68%, rgba(4, 12, 19, .18) 100%), linear-gradient(0deg, rgba(4, 12, 19, .58), transparent 36%);
}

.hero-backdrop img {
  object-fit: cover;
  object-position: center 48%;
  opacity: .9;
  filter: saturate(.86) brightness(.78);
}

html[data-color-mode] .hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  align-items: center;
  min-height: min(740px, calc(100svh - 188px));
  gap: clamp(20px, 4vw, 72px);
}

html[data-color-mode] .hero .hero-copy {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 660px;
}

.hero-threshold-label {
  margin: 0 0 18px;
  color: #88d9d4;
  font: 600 .78rem/1.4 system-ui, sans-serif;
  text-transform: uppercase;
}

.hero-threshold-label span { padding-inline: 7px; color: #d9b866; }

html[data-color-mode] .hero h1 {
  margin: 0;
  max-width: 700px;
  color: #f1e8d4;
  font-size: 4.5rem;
  line-height: 1.04;
}

.hero .hero-lead {
  max-width: 570px;
  margin: 15px 0 9px;
  color: #e4e9e5;
  font-size: 1.14rem;
  line-height: 1.6;
}

.hero .key-unveil-note {
  max-width: 510px;
  margin: 0 0 12px;
  color: #c8d7d7;
  font-size: .92rem;
  line-height: 1.6;
}

.hero .app-preview-note {
  max-width: 500px;
  margin: 0 0 15px;
  color: #b9d1d2;
  font-size: .84rem;
  line-height: 1.5;
}

.hero .app-preview-note strong { color: #f0d287; }

.hero-entry-actions { margin-top: 0; }
.hero-entry-actions .hero-preview-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 13px 20px;
  border: 1px solid #eed08a;
  border-radius: 4px;
  background: #d6ae53;
  color: #131813;
  font-weight: 700;
  text-decoration: none;
}

.hero-entry-actions .hero-preview-button:hover { background: #f0d287; }
.hero-entry-actions .hero-preview-button:focus-visible { outline: 3px solid #91e1db; outline-offset: 3px; }

.hero .hero-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 30px;
  max-width: 600px;
  margin: 21px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(159, 193, 197, .38);
}

.hero .hero-readout > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 9px; }
.hero .hero-readout dt { color: #f0d287; font: 600 1.14rem/1.2 var(--serif, Georgia, serif); }
.hero .hero-readout dd { margin: 0; color: #d1dddd; font-size: .76rem; }

.hero-threshold-guide {
  position: relative;
  z-index: 2;
  display: grid;
  align-self: stretch;
  justify-self: center;
  place-items: center;
  width: min(100%, 470px);
  height: min(72svh, 690px);
  min-height: 540px;
  margin: 0;
  isolation: isolate;
}

.hero-threshold-guide::before {
  position: absolute;
  z-index: -1;
  inset: 11% 5% 9%;
  border: 1px solid rgba(137, 204, 216, .26);
  border-radius: 50%;
  content: "";
  transform: rotate(-16deg) scaleX(.72);
}

.hero-threshold-guide::after {
  position: absolute;
  z-index: -1;
  inset: 20% 15% 16%;
  border: 1px solid rgba(222, 188, 106, .2);
  border-radius: 50%;
  content: "";
  transform: rotate(22deg) scaleX(.76);
}

.hero-threshold-guide img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: min(72svh, 690px);
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 12px 34px rgba(5, 19, 39, .74));
  animation: kftcThresholdGuideFloat 8s ease-in-out infinite;
}

.hero-threshold-guide figcaption {
  position: absolute;
  right: 0;
  bottom: 15px;
  display: grid;
  gap: 3px;
  padding: 9px 12px;
  border-left: 2px solid #d6b75f;
  background: rgba(4, 14, 21, .78);
  color: #f3eddd;
  font-size: .78rem;
}

.hero-threshold-guide figcaption span { color: #b8cdcf; font-size: .7rem; }

.hero-threshold-keys {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-threshold-key {
  position: absolute;
  width: 58px;
  height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(131, 197, 255, .44));
  opacity: .78;
  animation: kftcThresholdKeyDrift 11s ease-in-out infinite;
}

.hero-threshold-key--one { top: 11%; left: 56%; animation-delay: -2s; }
.hero-threshold-key--two { top: 38%; right: 1%; width: 46px; height: 174px; animation-delay: -7s; }
.hero-threshold-key--three { bottom: 7%; left: 63%; width: 42px; height: 160px; animation-delay: -4s; }

html[data-color-mode="light"] .hero::before {
  background: linear-gradient(90deg, rgba(8, 20, 26, .88), rgba(8, 20, 26, .7) 40%, rgba(8, 20, 26, .34) 72%, rgba(8, 20, 26, .12));
}

html[data-color-mode="light"] .hero-backdrop img { opacity: .68; filter: saturate(.7) brightness(1.05); }

@keyframes kftcThresholdGuideFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes kftcThresholdKeyDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50% { transform: translate3d(9px, -14px, 0) rotate(3deg); }
}

@media (max-width: 900px) {
  html[data-color-mode] .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr); gap: 12px; }
  html[data-color-mode] .hero h1 { font-size: 3.45rem; }
  .hero-threshold-guide { min-height: 480px; }
  .hero-threshold-key--one { left: 60%; }
}

@media (max-width: 680px) {
  html[data-color-mode] .hero { min-height: calc(100svh - 60px); padding: 80px 0 58px; }
  html[data-color-mode] .hero::before { background: linear-gradient(180deg, rgba(4, 12, 19, .78), rgba(4, 12, 19, .86) 48%, rgba(4, 12, 19, .43)); }
  .hero-backdrop img { object-position: center 45%; }
  html[data-color-mode] .hero-grid { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; }
  html[data-color-mode] .hero .hero-copy { max-width: 100%; }
  .hero-threshold-label { margin-bottom: 10px; font-size: .7rem; }
  html[data-color-mode] .hero h1 { font-size: 2.7rem; line-height: 1.06; }
  .hero .hero-lead { max-width: 36rem; margin-top: 12px; font-size: 1rem; }
  .hero .key-unveil-note { margin-bottom: 10px; font-size: .84rem; }
  .hero .app-preview-note { margin-bottom: 14px; }
  .hero-entry-actions .hero-preview-button { min-height: 48px; }
  .hero .hero-readout { gap: 8px 15px; margin-top: 17px; padding-top: 12px; }
  .hero .hero-readout > div { gap: 6px; }
  .hero .hero-readout dt { font-size: 1rem; }
  .hero .hero-readout dd { font-size: .67rem; }
  .hero-threshold-guide { position: absolute; right: -26px; bottom: -150px; width: min(58vw, 230px); min-height: 0; height: 300px; opacity: .7; }
  .hero-threshold-guide img { max-height: 340px; object-position: center bottom; }
  .hero-threshold-guide::before { inset: 16% -4% 14%; }
  .hero-threshold-guide::after { inset: 25% 7% 21%; }
  .hero-threshold-guide figcaption { display: none; }
  .hero-threshold-key { width: 32px; height: 128px; opacity: .58; }
  .hero-threshold-key--one { top: 50%; left: 2%; }
  .hero-threshold-key--two { top: 60%; right: 64%; width: 28px; height: 104px; }
  .hero-threshold-key--three { display: none; }
  .hero .hero-next { z-index: 4; }
}

@media (max-width: 380px) {
  html[data-color-mode] .hero h1 { font-size: 2.4rem; }
  .hero-threshold-guide { right: -45px; bottom: -190px; width: 58vw; opacity: .7; }
  .hero .hero-readout { gap: 7px 10px; }
  .hero .hero-readout dd { max-width: 78px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  html[data-color-mode] .hero { min-height: 0; padding: 56px 0 90px; }
  html[data-color-mode] .hero-grid { min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(180px, .62fr); align-items: center; gap: 8px; }
  html[data-color-mode] .hero .hero-copy { max-width: 100%; }
  .hero-threshold-label { margin-bottom: 7px; font-size: .63rem; }
  html[data-color-mode] .hero h1 { font-size: 2.2rem; line-height: 1.02; }
  .hero .hero-lead { margin: 7px 0 0; font-size: .78rem; line-height: 1.4; }
  .hero .key-unveil-note { display: none; }
  .hero .app-preview-note { margin: 7px 0 8px; font-size: .7rem; line-height: 1.35; }
  .hero-entry-actions .hero-preview-button { min-height: 40px; padding: 9px 13px; font-size: .8rem; }
  html[data-color-mode] .hero .hero-readout { display: none; }
  .hero-threshold-guide { width: min(100%, 230px); height: min(68svh, 265px); min-height: 0; opacity: .88; }
  .hero-threshold-guide img { max-height: min(68svh, 265px); }
  .hero-threshold-guide figcaption { display: none; }
  .hero-threshold-key { width: 28px; height: 106px; }
  .hero-threshold-key--one { top: 18%; left: 62%; }
  .hero-threshold-key--two { top: 48%; right: 1%; width: 24px; height: 90px; }
  .hero-threshold-key--three { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-threshold-guide img,
  .hero-threshold-key { animation: none !important; }
}

@media (forced-colors: active) {
  .hero-threshold-guide::before,
  .hero-threshold-guide::after,
  .hero-threshold-keys { display: none; }
  .hero-entry-actions .hero-preview-button { border: 2px solid ButtonText; }
}