@font-face {
  font-family: "Petrov Sans-Trial Regular";
  src: local("Petrov Sans Regular"), url("../font/PetrovSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Petrov Sans-Trial Regular Italic";
  src: local("Petrov Sans Regular Italic"), url("../font/PetrovSans-RegularItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Petrov Sans-Trial Bold Italic";
  src: local("Petrov Sans Bold Italic"), url("../font/PetrovSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

body {
  font-family: "Petrov Sans-Trial Regular", Arial, Helvetica, sans-serif;
}

/* Display titles */
.big-letters span,
.metric-letter,
.coords-value {
  font-family: "Petrov Sans-Trial Bold Italic", Arial, Helvetica, sans-serif;
}

.navigation-title,
.research-title,
.result-title,
.metric-value {
  font-family: "Petrov Sans-Trial Regular Italic", Arial, Helvetica, sans-serif;
}

/* Small text */
.note,
.guide-label,
.result-hint,
.footer-credits,
.footer-role {
  font-family: "Petrov Sans-Trial Regular", Arial, Helvetica, sans-serif;
}

/* Index numbers and coordinate/map captions */
.map-code,
.immersion-index,
.research-index,
.result-index,
.coords-label,
.result-copy,
.coords-brace {
  font-family: "Petrov Sans-Trial Regular Italic", Arial, Helvetica, sans-serif;
}


.index-badge {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.08em;
  line-height: 0.9;
  white-space: nowrap;
}

.index-mark {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 0 auto;
  width: 0.68em;
  margin-right: 0.02em;
}

.index-hash {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.index-digits {
  display: inline-block;
}

    :root {
      --picked: #0009FF;
      --accent: #0009FF;
      --light-text: #d7d7d7;
      --white-line: rgba(255, 255, 255, 0.92);
      --hero-height: 248px;
      --band-height: 45px;
      --full-height: 293px;
      --page-bg: #D0D0D0;
      --nav-fill: #D4FF00;
      --nav-center: #1CE6B9;
      --nav-hidden: #73f2cd;
      --immersion-rise: 527px;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
      background: var(--page-bg);
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      overflow-x: hidden;
      color: var(--accent);
    }

    .page {
      width: 100%;
    }

    .route-block {
      position: relative;
      width: 100%;
      height: var(--full-height);
      overflow: hidden;
      background: #0d0d14;
    }

    .hero {
      position: relative;
      height: var(--hero-height);
      background: var(--picked);
      overflow: hidden;
    }

    .big-letters {
      position: absolute;
      inset: 0;
      color: var(--light-text);
      pointer-events: none;
    }

    .big-letters span {
      position: absolute;
      top: -22px;
      font-weight: 700;
      font-style: italic;
      font-size: 173.53px;
      line-height: 1;
      letter-spacing: 0.06em;
      color: #d8d8d8;
      text-rendering: geometricPrecision;
      white-space: nowrap;
    }

    .l1 { left: 2.6895%; }
    .l2 { left: 18.2559%; }
    .l3 { left: 33.4963%; }
    .l4 { left: 46.4548%; }
    .l5 { left: 60.6357%; }
    .l6 { left: 75.6316%; }
    .l7 { left: 90.7905%; }

    .note,
    .metric {
      position: absolute;
      color: var(--light-text);
      z-index: 2;
      white-space: nowrap;
    }

    .note {
      top: 147px;
      font-weight: 400;
      font-style: normal;
      font-size: 19.15px;
      line-height: 1;
      color: rgba(236, 236, 236, 0.95);
    }

    .n1 { left: 2.8525%; }
    .n2 { left: 31.9478%; }
    .n3 { left: 60.6357%; }
    .n4 { left: 91.8500%; }

    .flow {
      position: absolute;
      top: 154px;
      height: 1px;
      background: var(--white-line);
      z-index: 2;
    }

    .flow::after {
      content: "";
      position: absolute;
      top: -2px;
      right: -2px;
      width: 0;
      height: 0;
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
      border-left: 6px solid var(--white-line);
    }

    .f1 { left: 12.5509%; width: 13.4474%; }
    .f2 { left: 41.1573%; width: 13.4474%; }
    .f3 { left: 72.4531%; width: 13.4474%; }

    .metric {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      top: 180px;
    }

    .m1 { left: 3.0155%; }
    .m2 { left: 46.4548%; }
    .m3 { left: 89.8941%; }

    .metric-letter {
      font-weight: 700;
      font-style: italic;
      font-size: 73.17px;
      line-height: 0.9;
      color: #d8d8d8;
      letter-spacing: 0.03em;
    }

    .metric-value {
      margin-top: 18px;
      font-weight: 400;
      font-style: italic;
      font-size: 25.58px;
      line-height: 1;
      color: #ececec;
      letter-spacing: 0.01em;
    }

    .band {
      position: relative;
      height: var(--band-height);
      overflow: hidden;
    }

    .spectrum {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        
        rgb(255, 0, 255) 0%,
        rgb(210, 0, 255) 8%,
        rgb(145, 0, 255) 16%,
        rgb(76, 0, 255) 24%,
        rgb(0, 0, 255) 30%,
        rgb(0, 0, 255) 38%,
        rgb(0, 96, 255) 46%,
        rgb(0, 190, 255) 54%,
        rgb(0, 235, 210) 62%,
        rgb(0, 255, 110) 70%,
        rgb(96, 255, 0) 78%,
        rgb(190, 255, 0) 86%,
        rgb(255, 235, 0) 92%,
        rgb(255, 120, 0) 96%,
        rgb(255, 0, 0) 98.5%,
        rgb(255, 0, 0) 100%
      
      );
    }

    .slider-hitbox {
      position: absolute;
      inset: 0;
      width: 100%;
      margin: 0;
      opacity: 0;
      cursor: pointer;
      z-index: 4;
    }

    .marker {
      position: absolute;
      top: 3px;
      left: 50%;
      width: 0;
      height: 0;
      border-left: 13px solid transparent;
      border-right: 13px solid transparent;
      border-bottom: 25px solid var(--picked);
      transform: translateX(-50%);
      z-index: 3;
      pointer-events: none;
      transition: left 40ms linear;
    }

    .navigation-section {
      width: 100%;
      padding: 34px 36px 26px;
      color: var(--accent);
    }

    .navigation-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(14px, 1.2vw, 24px);
      width: 100%;
      text-align: center;
      font-size: clamp(34px, 2.45vw, 48px);
      line-height: 1;
      margin-bottom: 26px;
      text-transform: none;
    }

    .navigation-title span {
      flex: 0 0 auto;
    }

    .navigation-guide {
      display: grid;
      grid-template-columns: 1.1fr 2.3fr 1.5fr 2.3fr 0.9fr 2.3fr 0.8fr;
      align-items: center;
      column-gap: 18px;
      margin-bottom: 38px;
      font-size: clamp(18px, 1.15vw, 24px);
      line-height: 1;
    }

    .guide-label {
      white-space: nowrap;
      text-align: left;
      font-weight: 400;
      font-style: normal;
      font-size: 19.15px;
      line-height: 1;
      color: rgba(0, 9, 255, 0.95);
    }

    .guide-label.center {
      text-align: center;
    }

    .guide-label.right {
      text-align: right;
    }

    .guide-arrow {
      position: relative;
      height: 1px;
      background: var(--accent);
    }

    .guide-arrow::after {
      content: "";
      position: absolute;
      top: -2px;
      right: -2px;
      width: 0;
      height: 0;
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
      border-left: 6px solid var(--accent);
    }

    .navigation-map {
      position: relative;
      width: 100%;
      height: clamp(420px, 43vw, 610px);
      border: 0;
      background: var(--nav-fill);
      overflow: hidden;
      user-select: none;
    }

    .navigation-map::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background:
        linear-gradient(var(--accent), var(--accent)) left top / clamp(132px, 14vw, 176px) 3px no-repeat,
        linear-gradient(var(--accent), var(--accent)) right top / clamp(132px, 14vw, 176px) 3px no-repeat,
        linear-gradient(var(--accent), var(--accent)) left bottom / clamp(132px, 14vw, 176px) 3px no-repeat,
        linear-gradient(var(--accent), var(--accent)) right bottom / clamp(132px, 14vw, 176px) 3px no-repeat,
        linear-gradient(var(--accent), var(--accent)) left top / 3px clamp(100px, 11vw, 138px) no-repeat,
        linear-gradient(var(--accent), var(--accent)) left bottom / 3px clamp(100px, 11vw, 138px) no-repeat,
        linear-gradient(var(--accent), var(--accent)) right top / 3px clamp(100px, 11vw, 138px) no-repeat,
        linear-gradient(var(--accent), var(--accent)) right bottom / 3px clamp(100px, 11vw, 138px) no-repeat;
    }

    .map-layer {
      position: absolute;
      inset: 0;
    }

    .map-layer-bottom {
      opacity: 0;
      pointer-events: none;
    }

    .map-hidden-scene {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        rgb(255, 29, 0) 0%,
        rgb(255, 132, 0) 14%,
        rgb(255, 210, 0) 28%,
        rgb(190, 255, 0) 38%,
        rgb(0, 255, 60) 50%,
        rgb(24, 224, 230) 66%,
        rgb(48, 112, 255) 79%,
        rgb(104, 0, 255) 90%,
        rgb(230, 0, 255) 100%
      );
    }

    .map-sign {
      position: absolute;
      left: 66%;
      top: 50%;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background: #ff1d00;
      box-shadow: none;
    }

    .map-sign::before,
    .map-sign::after {
      content: none;
    }

    .map-layer-top {
      background: var(--nav-fill);
      z-index: 1;
    }

    .map-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    .map-code {
      position: absolute;
      top: 34px;
      left: 28px;
      font-size: 100.7px;
      line-height: 0.9;
      font-weight: 400;
      font-style: italic;
      letter-spacing: -0.03em;
      color: var(--accent);
    }

    .map-side,
    .map-top,
    .map-bottom {
      position: absolute;
      font-size: clamp(24px, 1.8vw, 38px);
      font-weight: 700;
      line-height: 1;
    }

    .map-top {
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
    }

    .map-left {
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
    }

    .map-right {
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
    }

    .map-bottom {
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
    }

    .viewfinder {
      position: absolute;
      left: 0;
      top: 0;
      width: clamp(210px, 20vw, 266px);
      aspect-ratio: 266 / 202;
      height: auto;
      z-index: 4;
      cursor: grab;
      touch-action: none;
    }

    .viewfinder.dragging {
      cursor: grabbing;
    }

    .viewfinder-core {
      position: absolute;
      inset: 0;
      overflow: visible;
      background: transparent;
      z-index: 1;
    }

    .viewfinder-reveal {
      position: absolute;
      left: 16.19%;
      top: 10.77%;
      width: 67.26%;
      height: 78.90%;
      overflow: hidden;
    }

    .viewfinder-scene {
      position: absolute;
      left: 0;
      top: 0;
      will-change: transform;
    }

    .viewfinder-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
      pointer-events: none;
      overflow: visible;
    }

    .immersion-index {
      font-size: 100.7px;
    }

    .viewfinder-core::before,
    .viewfinder-core::after {
      content: none !important;
    }


    .viewfinder-corner {
      display: none;
    }

    .viewfinder-corner.tl,
    .viewfinder-corner.tr,
    .viewfinder-corner.bl,
    .viewfinder-corner.br {
      display: none;
    }


    .viewfinder-plus,
    .viewfinder-plus.p1,
    .viewfinder-plus.p2,
    .viewfinder-plus.p3,
    .viewfinder-plus.p4 {
      display: none;
    }

    .coords-row {
      display: grid;
      grid-template-columns: auto auto 1fr auto auto;
      align-items: end;
      column-gap: 24px;
      padding: 26px 0 0;
      color: var(--accent);
    }

    .coords-brace {
      font-size: clamp(86px, 6vw, 130px);
      line-height: 0.8;
      font-weight: 700;
      font-style: italic;
    }

    .coords-label {
      font-size: clamp(24px, 2vw, 44px);
      line-height: 1;
      font-style: italic;
      white-space: nowrap;
      padding-bottom: 12px;
    }

    .coords-label.left {
      margin-left: 14px;
    }

    .coords-label.right {
      text-align: right;
      margin-right: 14px;
    }

    .coords-value {
      text-align: center;
      font-size: clamp(52px, 5.15vw, 106px);
      line-height: 0.9;
      font-weight: 700;
      font-style: italic;
      letter-spacing: -0.04em;
      white-space: nowrap;
      transition: opacity 120ms linear;
    }

    .coords-value.is-blinking {
      animation: coordsBlink 0.72s steps(2, end) 3;
    }

    @keyframes coordsBlink {
      0% { opacity: 1; }
      50% { opacity: 0.14; }
      100% { opacity: 1; }
    }

    @keyframes targetPulse {
      0% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
      70% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
      100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
    }

    .map-sign-pulse {
      display: none;
    }



    .immersion-section {
      position: relative;
      width: 100%;
      min-height: 100vh;
      height: 100vh;
      color: var(--accent);
      overflow: hidden;
      background: var(--page-bg);
    }

    .immersion-sticky {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      background: var(--page-bg);
    }

    .immersion-stage {
      width: 100%;
      height: 100vh;
      max-height: none;
    }

    .immersion-svg {
      display: block;
      width: 100%;
      height: 100vh;
      max-height: none;
      touch-action: none;
      user-select: none;
    }


    .research-section {
      width: 100%;
      padding: 34px 0 34px;
      color: var(--accent);
      overflow: hidden;
      background: var(--page-bg);
    }

    .research-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(14px, 1.3vw, 26px);
      width: 100%;
      padding: 0 36px;
      text-align: center;
      font-size: clamp(34px, 2.45vw, 48px);
      line-height: 1;
      margin-bottom: 28px;
    }

    .research-title span {
      flex: 0 0 auto;
    }

    .research-guide-wrap {
      position: relative;
      margin-bottom: 30px;
      width: 100%;
      padding: 0 36px;
    }

    .research-guide {
      display: grid;
      grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
      align-items: center;
      column-gap: 18px;
      width: 100%;
      font-size: 19.15px;
      line-height: 1;
    }

    .research-index {
      position: absolute;
      top: 8px;
      right: 36px;
      font-size: 100.7px;
      font-weight: 700;
      font-style: italic;
      line-height: 0.9;
      color: var(--accent);
      letter-spacing: -0.03em;
      white-space: nowrap;
      z-index: 3;
      pointer-events: none;
    }

    .research-stage {
      position: relative;
      width: 100%;
      min-height: 660px;
      overflow: hidden;
      background: var(--page-bg);
      padding-top: 6px;
    }

    .research-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 17% 16%, rgba(0, 9, 255, 0.05), transparent 9%),
        radial-gradient(circle at 48% 28%, rgba(0, 9, 255, 0.035), transparent 10%),
        radial-gradient(circle at 83% 18%, rgba(0, 9, 255, 0.045), transparent 8%);
      pointer-events: none;
    }

    .stalactite,
    .stalagmite,
    .research-base,
    .research-shatter,
    .research-block-wrap {
      position: absolute;
    }

    .stalactite {
      top: 6px;
      width: clamp(200px, 22vw, 296px);
      height: clamp(150px, 20vw, 266px);
      background: #0009FF;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      opacity: 0.98;
      cursor: pointer;
      z-index: 2;
      transition: transform 140ms ease, opacity 120ms linear;
      touch-action: manipulation;
    }

    .stalactite.s1 {
      left: 2.4%;
    }

    .stalactite.s2 {
      left: 28.3%;
      background: transparent;
      clip-path: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 301 261' fill='none'%3E%3Cpath d='M177.691 1.1809L150.42 260.699L300.069 0.921788L177.691 1.1809Z' fill='%230009FF'/%3E%3Cpath d='M51.6751 91.4562L150.419 260.313L177.69 0.794552L51.6751 91.4562Z' fill='%230009FF'/%3E%3Cpath d='M177.694 0.791234L0.00013656 0L51.6791 91.4529L177.694 0.791234Z' fill='%230009FF'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }

    .stalactite.s3 {
      left: 54.2%;
    }

    .stalactite:hover {
      transform: translateY(2px);
    }

    .stalactite:active {
      transform: translateY(4px) scale(0.992);
    }

    .stalactite.is-hidden {
      opacity: 0;
      pointer-events: none;
    }

        .stalagmite {
      bottom: 34px;
      opacity: 0.98;
      overflow: visible;
      background: transparent;
      clip-path: none;
      pointer-events: none;
    }

    .stalagmite svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .stalagmite.g1 {
      left: 11.6%;
      width: clamp(150px, 17vw, 228px);
      height: clamp(196px, 22vw, 298px);
    }

    .stalagmite.g2 {
      left: 41.7%;
      width: clamp(96px, 10.9vw, 150px);
      height: clamp(126px, 14.2vw, 196px);
    }

    .stalagmite.g3 {
      right: 4.2%;
      width: clamp(190px, 22vw, 290px);
      height: clamp(266px, 31vw, 407px);
    }

    .research-base {
      left: 0;
      right: 0;
      bottom: 0;
      height: 34px;
      background: #D4FF00;
    }

    .research-block-wrap,
    .research-block,
    .research-block-hint {
      display: none;
    }

    .research-shatter {
      inset: 0;
      z-index: 5;
      pointer-events: none;
      overflow: visible;
    }

    .research-shatter-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
      display: block;
    }

    .research-shard-piece {
  opacity: 0;
  will-change: transform, opacity;
  transform: translate(0px, 0px) rotate(0deg);
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

.research-shard-piece path {
  stroke: none;
}

.research-shard-piece.is-active {
  opacity: 1;
  animation: researchShardFall var(--dur, 1800ms) cubic-bezier(0.2, 0.82, 0.24, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes researchShardFall {
  0% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg) scale(1);
    filter: saturate(1);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(var(--tx, 0px), var(--ty, 280px)) rotate(var(--rot, 0deg)) scale(0.96);
    filter: saturate(1.14);
  }
}


    .result-section {
      width: 100%;
      color: var(--accent);
      background: var(--page-bg);
      padding: 34px 0 0;
      overflow: hidden;
    }

    .result-inner {
      padding: 0 36px;
    }

    .result-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(14px, 1.3vw, 26px);
      width: 100%;
      text-align: center;
      font-size: clamp(34px, 2.45vw, 48px);
      line-height: 1;
      margin-bottom: 28px;
    }

    .result-title span {
      flex: 0 0 auto;
    }

    .result-guide {
      display: grid;
      grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
      align-items: center;
      column-gap: 18px;
      width: 100%;
      font-size: 19.15px;
      line-height: 1;
      margin-bottom: 28px;
    }

    .result-panel {
      position: relative;
      width: 100%;
      min-height: clamp(480px, 56vw, 706px);
      background: #0009FF;
      overflow: hidden;
    }

    .result-index {
      position: absolute;
      top: 28px;
      right: 34px;
      z-index: 4;
      font-size: 100.7px;
      font-weight: 400;
      font-style: italic;
      line-height: 0.9;
      letter-spacing: -0.04em;
      color: rgba(235, 235, 235, 0.92);
      pointer-events: none;
    }

    .result-visual {
      position: absolute;
      left: 2%;
      top: 6px;
      width: min(66vw, 900px);
      height: min(54vw, 630px);
      min-width: 560px;
      min-height: 420px;
      cursor: default;
      touch-action: none;
      user-select: none;
      outline: none;
      overflow: visible;
    }

    .result-visual:focus-visible {
      outline: 2px solid rgba(212, 255, 0, 0.9);
      outline-offset: 8px;
    }

    .result-visual.is-pressed {
      transform: scale(0.996);
    }

    .result-svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .result-state {
      opacity: 0;
      transition: opacity 220ms linear;
      pointer-events: none;
      transform-origin: center;
      transform-box: fill-box;
    }

    .result-state.is-active {
      opacity: 1;
      pointer-events: auto;
    }

    .result-state.is-rotating .result-prism {
      cursor: grabbing;
    }

    .result-bracket {
      fill: none;
      stroke: #D4FF00;
      stroke-width: 4;
      stroke-linecap: square;
      stroke-linejoin: miter;
    }

    .result-ray {
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      opacity: 0.95;
    }

    .result-prism {
      stroke: none;
      opacity: 1;
      filter: saturate(1.08);
      pointer-events: auto;
      cursor: grab;
    }

    .result-copy {
      position: absolute;
      top: 50%;
      right: 13.8%;
      transform: translateY(-50%);
      width: min(30vw, 390px);
      min-width: 280px;
      z-index: 3;
      color: rgba(235, 235, 235, 0.96);
      font-style: italic;
      line-height: 1.33;
    }

    .result-copy-item {
      display: none;
      font-size: 28.23px;
    }

    .result-copy-item.is-active {
      display: block;
    }

    .result-copy-title {
      margin-bottom: 22px;
      white-space: pre-line;
    }

    .result-copy-body {
      white-space: pre-line;
    }

    .result-hint {
      position: absolute;
      left: 36px;
      bottom: 22px;
      font-size: 16px;
      line-height: 1;
      color: rgba(235, 235, 235, 0.6);
      font-style: italic;
      opacity: 0;
      transition: opacity 180ms linear;
      pointer-events: none;
    }

    .result-panel:hover .result-hint,
    .result-visual:focus-visible + .result-hint {
      opacity: 1;
    }


    canvas {
      display: none;
    }

    @media (max-width: 900px) {
      .coords-brace {
        display: inline-flex;
        align-items: flex-end;
        justify-content: center;
        width: 0.5em;
        transform: scaleX(0.5);
        transform-origin: center;
      }

      .navigation-section {
        padding: 26px 20px 20px;
      }

      .navigation-guide {
        grid-template-columns: 1fr;
        row-gap: 14px;
      }

      .guide-label,
      .guide-label.center,
      .guide-label.right {
        text-align: left;
      }

      .coords-row {
        grid-template-columns: auto auto 1fr auto auto;
        row-gap: 0;
      }

      .coords-label.left {
        grid-column: auto;
        grid-row: auto;
        padding-bottom: 12px;
      }

      .coords-value {
        grid-column: auto;
        grid-row: auto;
      }

      .coords-label.right {
        grid-column: auto;
        grid-row: auto;
        padding-bottom: 12px;
      }

      .immersion-section {
        min-height: 100svh;
        height: 100svh;
      }

      .immersion-sticky,
      .immersion-stage,
      .immersion-svg {
        height: 100svh;
      }

      .research-section {
        padding: 26px 0 28px;
      }

      .research-title,
      .research-guide-wrap {
        padding-left: 20px;
        padding-right: 20px;
      }


      .research-guide {
        grid-template-columns: 1fr;
        row-gap: 14px;
      }

      .research-guide .guide-arrow {
        display: none;
      }

      .research-index {
        top: 10px;
        right: 20px;
      }

      .research-stage {
        min-height: 520px;
      }


      .stalactite.s1 {
        left: -6%;
      }

      .stalactite.s2 {
        left: 28%;
      }

      .stalactite.s3 {
        left: 62%;
      }

      .stalagmite.g1 {
        left: 8%;
      }

      .stalagmite.g2 {
        left: 42%;
      }

      .stalagmite.g3 {
        right: -4%;
      }

      .result-inner {
        padding: 0 20px;
      }

      .result-guide {
        grid-template-columns: 1fr;
        row-gap: 14px;
      }

      .result-guide .guide-arrow {
        display: none;
      }

      .result-panel {
        min-height: 640px;
      }

      .result-visual {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        min-width: 0;
        min-height: 360px;
        height: 360px;
      }

      .result-copy {
        position: relative;
        top: auto;
        right: auto;
        width: auto;
        min-width: 0;
        padding: 8px 20px 34px;
      }

      .result-index {
        top: 18px;
        right: 20px;
      }

    }


    .site-footer {
      width: 100%;
      background: #D4FF00;
      color: var(--accent);
      padding: 28px 50px;
    }

    .site-footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      width: 100%;
    }


    .footer-brand-svg {
      display: block;
      width: 178px;
      max-width: 100%;
      height: auto;
      flex: 0 0 auto;
      margin: 0;
    }

    .footer-brand {
      font-family: Arial Black, Arial, Helvetica, sans-serif;
      font-size: clamp(28px, 2.9vw, 44px);
      font-weight: 900;
      line-height: 0.82;
      letter-spacing: -0.04em;
      text-transform: uppercase;
      color: var(--accent);
      white-space: pre-line;
    }

    .footer-credits {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
      padding-top: 2px;
      text-align: right;
      color: var(--accent);
      font-size: clamp(16px, 1.22vw, 24px);
      font-style: italic;
      line-height: 0.98;
      white-space: nowrap;
    }

    .footer-role {
      display: block;
      font-weight: 700;
    }

    @media (max-width: 900px) {
      .site-footer {
        padding: 20px;
      }

      .site-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
      }

      .footer-credits {
        align-items: flex-start;
        text-align: left;
        white-space: normal;
      }
    }


    @media (max-width: 1279px) and (min-width: 1025px) {
      .navigation-section {
        padding-left: 18px;
        padding-right: 18px;
      }

      .research-title,
      .research-guide-wrap,
      .result-inner {
        padding-left: 18px;
        padding-right: 18px;
      }

      .navigation-title,
      .research-title,
      .result-title {
        gap: clamp(7px, 0.65vw, 13px);
      }

      .navigation-guide,
      .research-guide,
      .result-guide {
        column-gap: 9px;
      }

      .coords-label {
        font-size: 31.89px;
      }

      .coords-brace,
      .coords-value {
        font-size: 82.86px;
      }
    }

    @media (max-width: 1024px) and (min-width: 431px) {
      :root {
        --immersion-rise: 264px;
      }

      .big-letters {
        left: 20px;
        right: 20px;
      }

      .m1 {
        left: 20px;
      }

      .m2 {
        left: 50%;
        transform: translateX(-50%);
      }

      .m3 {
        left: auto;
        right: 20px;
      }

      .n1 {
        left: 20px;
      }

      .n4 {
        left: auto;
        right: 20px;
      }

      .note,
      .guide-label {
        font-size: 15.23px;
      }

      .big-letters span {
        font-size: 173.53px;
      }

      .navigation-section {
        padding: 28px 18px 22px;
      }

      .navigation-title,
      .research-title,
      .result-title {
        font-size: 30.83px;
        gap: 9px;
      }

      .research-title,
      .research-guide-wrap,
      .result-inner {
        padding-left: 18px;
        padding-right: 18px;
      }

      .navigation-guide {
        grid-template-columns: 1.1fr 2.3fr 1.5fr 2.3fr 0.9fr 2.3fr 0.8fr;
        column-gap: 9px;
        font-size: 15.23px;
        margin-bottom: 26px;
      }

      .research-guide {
        grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
        column-gap: 9px;
        font-size: 15.23px;
      }

      .result-guide {
        grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
        column-gap: 9px;
        font-size: 15.23px;
      }

      .navigation-map {
        width: min(100%, 760px);
        aspect-ratio: 1 / 1;
        height: auto;
        margin: 0 auto;
      }

      .viewfinder {
        width: clamp(120px, 18vw, 180px);
        height: clamp(120px, 18vw, 180px);
      }

      .coords-row {
        column-gap: 12px;
      }

      .coords-label.left {
        margin-left: 7px;
      }

      .coords-label.right {
        margin-right: 7px;
      }

      .immersion-section,
      .immersion-sticky,
      .immersion-stage,
      .immersion-svg {
        height: 50vh;
        min-height: 360px;
      }

      .research-section {
        padding: 28px 0 28px;
      }

      .research-guide-wrap {
        margin-bottom: 22px;
      }

      .research-stage {
        min-height: 515px;
      }

      .stalactite {
        top: 10px;
        width: clamp(168px, 20vw, 228px);
        height: clamp(126px, 15.5vw, 176px);
      }

      .stalactite.s1 {
        left: 22.4%;
      }

      .stalactite.s2 {
        left: 59.2%;
      }

      .stalactite.s3 {
        display: none;
      }

      .stalagmite.g1 {
        left: 6.4%;
        width: clamp(110px, 12vw, 154px);
        height: clamp(140px, 16.5vw, 212px);
      }

      .stalagmite.g2 {
        left: 41.0%;
        width: clamp(78px, 8.4vw, 112px);
        height: clamp(104px, 11.4vw, 154px);
      }

      .stalagmite.g3 {
        right: 3.8%;
        width: clamp(146px, 16vw, 226px);
        height: clamp(196px, 22.5vw, 300px);
      }

      .result-panel {
        min-height: 742px;
      }

      .result-index {
        top: 20px;
        right: 22px;
        font-size: clamp(72px, 7vw, 96px);
      }

      .result-visual {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: -4px;
        width: min(92vw, 840px);
        height: min(63vw, 560px);
        min-width: 0;
        min-height: 0;
      }

      .result-copy {
        top: auto;
        right: auto;
        left: 34.5%;
        bottom: 54px;
        width: min(39vw, 320px);
        min-width: 0;
      }

      .result-copy-item {
        font-size: 28.23px;
      }

      .result-copy-title {
        margin-bottom: 18px;
      }
    }

    @media (max-width: 1024px) and (min-width: 901px) {
      :root {
        --hero-height: 311px;
        --band-height: 45px;
        --full-height: 311px;
        --immersion-rise: 291px;
      }

      .route-block {
        height: 311px;
        background: var(--picked);
      }

      .hero {
        height: 311px;
        background: var(--picked);
      }

      .band {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 45px;
        z-index: 4;
      }

      .big-letters span {
        top: -16px;
        font-size: clamp(70.82px, calc(70.82px + 102.71 * ((100vw - 430px) / 594)), 173.53px);
      }

      .note {
        top: 154px;
        font-size: clamp(11.34px, calc(11.34px + 3.81 * ((100vw - 430px) / 594)), 15.15px);
      }

      .flow {
        top: 158px;
      }

      .metric {
        top: 192px;
      }

      .metric-letter {
        font-size: clamp(29.86px, calc(29.86px + 43.31 * ((100vw - 430px) / 594)), 73.17px);
      }

      .metric-value {
        font-size: clamp(10.39px, calc(10.39px + 15.19 * ((100vw - 430px) / 594)), 25.58px);
      }

      .navigation-section {
        padding: 40px 33px 52px;
      }

      .navigation-title,
      .research-title,
      .result-title {
        font-size: 42px;
        gap: 12px;
      }

      .navigation-guide,
      .research-guide,
      .result-guide {
        font-size: 17px;
        column-gap: 12px;
      }

      .navigation-guide {
        margin-bottom: 40px;
      }

      .navigation-map {
        width: min(961px, calc(100vw - 63px));
        max-width: min(961px, calc(100vw - 63px));
        height: 703px;
        aspect-ratio: auto;
        margin: 0 auto;
      }

      .navigation-map::before {
        background:
          linear-gradient(var(--accent), var(--accent)) left top / 169px 2.686px no-repeat,
          linear-gradient(var(--accent), var(--accent)) right top / 169px 2.686px no-repeat,
          linear-gradient(var(--accent), var(--accent)) left bottom / 169px 2.686px no-repeat,
          linear-gradient(var(--accent), var(--accent)) right bottom / 169px 2.686px no-repeat,
          linear-gradient(var(--accent), var(--accent)) left top / 2.686px 183px no-repeat,
          linear-gradient(var(--accent), var(--accent)) left bottom / 2.686px 183px no-repeat,
          linear-gradient(var(--accent), var(--accent)) right top / 2.686px 183px no-repeat,
          linear-gradient(var(--accent), var(--accent)) right bottom / 2.686px 183px no-repeat;
      }

      .map-code {
        top: 32px;
        left: 18px;
        font-size: 85.7px;
      }

      .map-side,
      .map-top,
      .map-bottom {
        font-size: 20px;
      }

      .viewfinder {
        width: 266px;
        aspect-ratio: 266 / 202;
        height: auto;
      }

      .coords-row {
        padding-top: 34px;
        column-gap: 18px;
      }

      .coords-brace {
        font-size: 82.86px;
      }

      .coords-label {
        font-size: 31.89px;
        padding-bottom: 10px;
      }

      .coords-value {
        font-size: 82.86px;
      }

      .immersion-section,
      .immersion-sticky,
      .immersion-stage,
      .immersion-svg {
        height: 1032px;
        min-height: 1032px;
      }

      .research-section {
        padding: 44px 0 40px;
      }

      .research-title,
      .research-guide-wrap,
      .result-inner {
        padding-left: 32px;
        padding-right: 32px;
      }

      .research-guide-wrap {
        margin-bottom: 30px;
      }

      .research-stage {
        min-height: 1110px;
        height: 1110px;
        padding-top: 12px;
      }

      .research-index {
        top: 18px;
        right: 30px;
        font-size: 85.7px;
        font-weight: 400;
        color: var(--accent);
      }

      .stalactite {
        top: 54px;
        width: 328px;
        height: 170px;
      }

      .stalactite.s1 {
        left: 3.7%;
      }

      .stalactite.s2 {
        left: 39.35%;
      }

      .stalactite.s3 {
        display: none;
      }

      .stalagmite {
        bottom: 0;
      }

      .stalagmite.g1 {
        left: 0;
        width: 200px;
        height: 427px;
      }

      .stalagmite.g2 {
        left: 335px;
        width: 145px;
        height: 309px;
      }

      .stalagmite.g3 {
        right: 72px;
        width: 279px;
        height: 642px;
      }

      .result-section {
        padding-top: 44px;
      }

      .result-guide {
        font-size: 17px;
        margin-bottom: 36px;
      }

      .result-panel {
        min-height: 1185px;
      }

      .result-index {
        top: 38px;
        right: 44px;
        font-size: 85.7px;
        font-weight: 400;
      }

      .immersion-index {
        font-size: 85.7px;
      }

      .result-visual {
        left: -2%;
        top: 18px;
        width: min(78vw, 798px);
        height: min(60vw, 610px);
        min-width: 680px;
        min-height: 520px;
      }

      .result-copy {
        top: calc(min(60vw, 610px) + 72px);
        right: 48px;
        width: min(40vw, 320px);
        min-width: 0;
      }

      .result-copy-item {
        font-size: 28.23px;
        line-height: 1.36;
      }

      .result-copy-title {
        margin-bottom: 16px;
      }

      .site-footer {
        min-height: 138px;
        padding: 29px 36px;
      }

      .site-footer-inner {
        align-items: center;
      }

      .footer-brand-svg {
        width: 178px;
        margin: 0;
      }

      .footer-credits {
        gap: 8px;
        font-size: 18.26px;
      }
    }


    @media (max-width: 900px) and (min-width: 431px) {
      .big-letters span {
        font-size: clamp(70.82px, calc(70.82px + 102.71 * ((100vw - 430px) / 594)), 173.53px);
      }

      .note {
        font-size: clamp(11.34px, calc(11.34px + 3.81 * ((100vw - 430px) / 594)), 15.15px);
      }

      .metric-letter {
        font-size: clamp(29.86px, calc(29.86px + 43.31 * ((100vw - 430px) / 594)), 73.17px);
      }

      .metric-value {
        font-size: clamp(10.39px, calc(10.39px + 15.19 * ((100vw - 430px) / 594)), 25.58px);
      }

      .coords-label {
        font-size: clamp(13.02px, calc(13.02px + 18.87 * ((100vw - 430px) / 470)), 31.89px);
      }

      .coords-brace,
      .coords-value {
        font-size: clamp(33.83px, calc(33.83px + 49.03 * ((100vw - 430px) / 470)), 82.86px);
      }
    }


    .guide-mobile {
      display: none;
      width: 100%;
      margin-bottom: 18px;
    }

    .guide-mobile-line {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
    }

    .guide-mobile-line + .guide-mobile-line {
      margin-top: 6px;
    }

    .guide-mobile-label {
      flex: 0 0 auto;
      font-size: 10px;
      line-height: 1;
      color: rgba(0, 9, 255, 0.95);
      white-space: nowrap;
      text-align: center;
    }

    .guide-mobile-arrow {
      position: relative;
      flex: 1 1 auto;
      min-width: 16px;
      height: 1px;
      background: var(--accent);
    }

    .guide-mobile-arrow::after {
      content: "";
      position: absolute;
      top: -2px;
      right: -2px;
      width: 0;
      height: 0;
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
      border-left: 6px solid var(--accent);
    }

    .route-guide-mobile {
      display: none;
      position: absolute;
      left: 5%;
      right: 5%;
      z-index: 3;
    }

    .route-guide-mobile .guide-mobile-label {
      color: rgba(236, 236, 236, 0.95);
    }

    .route-guide-mobile .guide-mobile-arrow {
      background: var(--white-line);
    }

    .route-guide-mobile .guide-mobile-arrow::after {
      border-left-color: var(--white-line);
    }

    @media (max-width: 900px) {
      .navigation-guide,
      .research-guide,
      .result-guide {
        display: none;
      }

      .navigation-guide-mobile,
      .research-guide-mobile,
      .result-guide-mobile {
        display: block;
      }

      .navigation-guide-mobile .guide-mobile-line:first-child {
        display: grid;
        grid-template-columns: auto minmax(28px, 1fr) auto;
        align-items: center;
        width: 100%;
      }

      .navigation-guide-mobile .guide-mobile-line:last-child {
        display: grid;
        grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr) auto;
        align-items: center;
        width: 100%;
      }

      .research-guide-mobile .guide-mobile-line:first-child {
        display: grid;
        grid-template-columns: auto minmax(28px, 1fr) auto minmax(28px, 1fr) auto;
        align-items: center;
        width: 100%;
      }

      .research-guide-mobile .guide-mobile-line:last-child {
        display: grid;
        grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr) auto;
        align-items: center;
        width: 100%;
      }

      .result-guide-mobile .guide-mobile-line {
        display: grid;
        grid-template-columns: auto minmax(28px, 1fr) auto;
        align-items: center;
        width: 100%;
      }

      .navigation-guide-mobile .guide-mobile-arrow,
      .research-guide-mobile .guide-mobile-arrow,
      .result-guide-mobile .guide-mobile-arrow {
        width: 100%;
        min-width: 28px;
      }
    }

    @media (max-width: 500px) {
      .route-block .note,
      .route-block .flow {
        display: none;
      }

      .route-guide-mobile {
        display: block;
      }

      .research-guide {
        display: none;
      }

      .research-guide-mobile {
        display: block;
      }
    }



    @media (max-width: 500px) and (min-width: 431px) {
      .route-guide-mobile {
        top: 128px;
      }
    }

    @media (max-width: 430px) {
      :root {
        --hero-height: 161px;
        --band-height: 27px;
        --full-height: 188px;
        --immersion-rise: 202px;
      }

      .big-letters {
        left: 20px;
        right: 20px;
      }

      .m1 {
        left: 20px;
      }

      .m2 {
        left: 50%;
        transform: translateX(-50%);
      }

      .m3 {
        left: auto;
        right: 20px;
      }

      .n1 {
        left: 20px;
      }

      .n4 {
        left: auto;
        right: 20px;
      }

      html,
      body {
        width: 100%;
        min-width: 320px;
        background: var(--page-bg);
      }

      body {
        overflow-x: hidden;
      }

      .page {
        width: 430px;
        max-width: 100%;
        margin: 0 auto;
        background: var(--page-bg);
      }

      .route-block {
        height: var(--full-height);
        background: var(--picked);
      }

      .hero {
        height: var(--hero-height);
      }

      .band {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--band-height);
        z-index: 4;
      }

      .big-letters span {
        top: 8px;
        font-size: 70.82px;
        letter-spacing: 0.05em;
      }

      .note {
        font-size: 11.34px;
      }

      .route-guide-mobile {
        top: 72px;
      }

      .flow::after {
        top: -2px;
        border-top-width: 2px;
        border-bottom-width: 2px;
        border-left-width: 5px;
      }

      .metric {
        top: 108px;
        gap: 6px;
      }

      .metric-letter {
        font-size: 29.86px;
      }

      .metric-value {
        margin-top: 8px;
        font-size: 10.39px;
      }

      .marker {
        top: 1px;
        border-left-width: 11px;
        border-right-width: 11px;
        border-bottom-width: 19px;
      }

      .navigation-section {
        padding: 24px 18px 16px;
      }

      .navigation-title,
      .research-title,
      .result-title {
        font-size: 23px;
        gap: 6px;
        margin-bottom: 16px;
      }

      .navigation-guide,
      .research-guide,
      .result-guide {
        display: none;
      }

      .guide-mobile {
        display: block;
      }

      .navigation-map {
        width: 392px;
        max-width: 392px;
        height: 562px;
        aspect-ratio: auto;
        margin: 0 auto;
      }

      .navigation-map::before {
        background:
          linear-gradient(var(--accent), var(--accent)) left top / 95px 1.34px no-repeat,
          linear-gradient(var(--accent), var(--accent)) right top / 95px 1.34px no-repeat,
          linear-gradient(var(--accent), var(--accent)) left bottom / 95px 1.34px no-repeat,
          linear-gradient(var(--accent), var(--accent)) right bottom / 95px 1.34px no-repeat,
          linear-gradient(var(--accent), var(--accent)) left top / 1.34px 103px no-repeat,
          linear-gradient(var(--accent), var(--accent)) left bottom / 1.34px 103px no-repeat,
          linear-gradient(var(--accent), var(--accent)) right top / 1.34px 103px no-repeat,
          linear-gradient(var(--accent), var(--accent)) right bottom / 1.34px 103px no-repeat;
      }

      .map-code {
        top: 40px;
        left: 12px;
        font-size: 46.25px;
      }

      .map-side,
      .map-top,
      .map-bottom {
        font-size: 20px;
      }

      .map-top {
        top: 14px;
      }

      .map-left {
        left: 10px;
      }

      .map-right {
        right: 10px;
      }

      .map-bottom {
        bottom: 10px;
      }

      .viewfinder {
        width: 131px;
        height: auto;
        aspect-ratio: 267 / 203;
      }

      .coords-row {
        grid-template-columns: auto auto 1fr auto auto;
        row-gap: 0;
        column-gap: 10px;
        padding-top: 16px;
      }

      .coords-brace {
        font-size: 33.83px;
      }

      .coords-label,
      .coords-label.left,
      .coords-label.right {
        margin: 0;
        padding-bottom: 7px;
        font-size: 13.02px;
        grid-column: auto;
        grid-row: auto;
        text-align: center;
      }

      .coords-value {
        grid-column: auto;
        grid-row: auto;
        font-size: 33.83px;
      }

      .immersion-section,
      .immersion-sticky,
      .immersion-stage,
      .immersion-svg {
        height: 612px;
        min-height: 612px;
      }

      .research-section {
        padding: 22px 0 0;
      }

      .research-title,
      .research-guide-wrap,
      .result-inner {
        padding-left: 18px;
        padding-right: 18px;
      }

      .research-guide-wrap {
        margin-bottom: 14px;
      }

      .research-index {
        top: 6px;
        right: 18px;
        font-size: 46.25px;
        font-weight: 400;
        color: var(--accent);
      }

      .research-stage {
        min-height: 940px;
        padding-top: 12px;
      }

      .stalactite {
        top: 12px;
        width: 178px;
        height: 92px;
      }

      .stalactite.s1 {
        left: 2%;
      }

      .stalactite.s2 {
        left: 31.5%;
      }

      .stalactite.s3 {
        display: block;
        left: 63%;
        width: 134px;
        height: 92px;
      }

      .stalagmite {
        bottom: 28px;
      }

      .stalagmite.g1 {
        left: -2%;
        width: 198px;
        height: 288px;
      }

      .stalagmite.g2 {
        left: 34.2%;
        width: 110px;
        height: 192px;
      }

      .stalagmite.g3 {
        right: -6%;
        width: 228px;
        height: 396px;
      }

      .research-base {
        height: 26px;
      }

      .result-section {
        padding-top: 18px;
      }

      .result-panel {
        min-height: 810px;
      }

      .result-index {
        top: 14px;
        right: 18px;
        font-size: 46.25px;
        font-weight: 400;
      }

      .immersion-index {
        font-size: 46.25px;
      }

      .result-visual {
        position: absolute;
        left: 50.5%;
        right: auto;
        margin-left: 0;
        margin-right: 0;
        top: 40px;
        width: 750px;
        height: 554px;
        min-width: 750px;
        min-height: 554px;
        transform: translateX(-40%);
      }

      .result-copy {
        position: absolute;
        left: auto;
        top: auto;
        right: 18px;
        bottom: 94px;
        width: 166px;
        min-width: 0;
        padding: 0;
      }

      .result-copy-item {
        font-size: 16px;
        line-height: 1.24;
      }

      .result-copy-title {
        margin-bottom: 10px;
      }

      .result-hint {
        left: 18px;
        bottom: 14px;
        font-size: 11px;
      }

      .site-footer {
        min-height: 77px;
        padding: 16px 18px;
      }

      .site-footer-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .footer-brand-svg {
        width: 116px;
        margin: 0;
      }

      .footer-credits {
        align-items: flex-end;
        text-align: right;
        gap: 4px;
        font-size: 11px;
        white-space: nowrap;
      }
    }

  


    @media (max-width: 768px) {
      .stalactite.s1,
      .stalactite.s3,
      .stalagmite.g1,
      .stalagmite.g2 {
        display: none;
      }

      .stalactite.s2 {
        display: block;
        left: 47%;
        top: 10px;
        width: clamp(210px, 38vw, 260px);
        height: clamp(182px, 32.9vw, 226px);
        transform: translateX(-50%);
      }

      .stalactite.s2:hover {
        transform: translateX(-50%) translateY(2px);
      }

      .stalactite.s2:active {
        transform: translateX(-50%) translateY(4px) scale(0.992);
      }

      .stalagmite.g3 {
        display: block;
        left: auto;
        right: 1.5%;
        width: clamp(210px, 33vw, 310px);
        height: clamp(290px, 47vw, 460px);
        transform: none;
      }
    }

    @media (max-width: 430px) {
      .research-stage {
        min-height: 660px;
        height: 660px;
      }

      .stalactite.s2 {
        left: 43%;
        top: 8px;
        width: 188px;
        height: 163px;
      }

      .stalagmite.g3 {
        right: 1%;
        bottom: 44px;
        width: 210px;
        height: 360px;
      }
    }

    @media (min-width: 1025px) {
      .result-visual {
        left: 0;
        top: 0;
        width: auto;
        height: 100%;
        min-width: 0;
        min-height: 0;
        aspect-ratio: 930 / 657;
      }

      .result-svg {
        width: auto;
        height: 100%;
        max-width: none;
        max-height: none;
      }
    }

.coords-label.left {
  padding-left: 200px;
}

.coords-label.right {
  padding-right: 200px;
}

@media (min-width: 1601px) {
  .coords-label.left {
    padding-left: 150px;
  }

  .coords-label.right {
    padding-right: 150px;
  }
}

@media (max-width: 900px) {
  .coords-label.left {
    padding-left: 50px;
  }

  .coords-label.right {
    padding-right: 50px;
  }
}

@media (max-width: 430px) {
  .coords-label.left,
  .coords-label.right {
    padding-left: 0;
    padding-right: 0;
  }
}


@media (max-width: 900px) {
  .index-badge {
    gap: 0.06em;
  }

  .index-mark {
    width: 0.64em;
    margin-right: 0.01em;
  }
}

@media (max-width: 430px) {
  .index-badge {
    gap: 0.05em;
  }

  .index-mark {
    width: 0.62em;
  }
}