@media (max-width: 900px) {
  html,
  body {
    overflow: auto !important;
    min-height: 100%;
  }

  body {
    min-height: 100vh;
  }

  .stage {
    width: 100%;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100vh;
    padding: 12px;
  }

  .stage::before {
    opacity: 0.26;
  }

  .ambient {
    opacity: 0.45;
  }

  .water-top {
    height: 96px;
    opacity: 0.42;
  }

  .water-bottom {
    height: 128px;
    opacity: 0.5;
  }

  .layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
    height: auto !important;
  }

  .map-area {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    border-radius: 22px;
    padding: 16px 12px 22px;
  }

  .map-area::before {
    opacity: 0.14;
  }

  .map-area::after {
    display: none !important;
  }

  #water-canvas,
  .lines,
  .top-mark,
  .philosophy-row {
    display: none !important;
  }

  .globe-wrap {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    order: 1 !important;
    width: min(82vw, 340px);
    height: min(82vw, 340px);
    margin: 4px auto 0;
    transform: none !important;
  }

  .globe-wrap::before {
    inset: 3%;
  }

  .globe-wrap::after {
    width: 70%;
    height: 76px;
  }

  .core-label {
    width: min(78vw, 310px);
    min-height: 74px;
    padding: 12px 14px;
    font-size: 18px;
  }

  .core-label .flow-line {
    gap: 6px;
  }

  .map-area > .cluster {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    width: 100%;
    margin: 0;
    transform: none !important;
    grid-template-columns: none !important;
  }

  .map-area > .cluster.problem {
    order: 2 !important;
  }

  .map-area > .cluster.work {
    order: 3 !important;
  }

  .map-area > .cluster.tech {
    order: 4 !important;
  }

  .map-area > .cluster.projects {
    order: 5 !important;
  }

  .map-area > .cluster::before {
    display: block;
    margin: 2px 4px -2px;
    color: var(--cyan);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-shadow: 0 0 10px rgba(77, 252, 255, 0.82);
  }

  .map-area > .cluster.problem::before {
    content: "01 / PROBLEM SENSING";
  }

  .map-area > .cluster.work::before {
    content: "02 / IMPROVEMENT & WORK STYLE";
  }

  .map-area > .cluster.tech::before {
    content: "03 / TECHNICAL IMPLEMENTATION";
  }

  .map-area > .cluster.projects::before {
    content: "04 / PROJECTS & PORTFOLIO";
  }

  .map-area > .cluster > .hub {
    order: 1 !important;
    width: 100%;
    height: auto;
    min-height: 76px;
    margin: 0;
    border-radius: 20px;
  }

  .hub::before {
    inset: -4px;
  }

  .hub::after {
    inset: 8px;
  }

  .hub .title {
    font-size: 18px;
  }

  .hub .icon {
    font-size: 23px;
  }

  .hub .num {
    font-size: 14px;
  }

  .map-area > .cluster > .items {
    order: 2 !important;
    display: grid !important;
    gap: 10px;
    width: 100%;
    overflow: visible;
  }

  .skill-card,
  .project-card {
    width: 100%;
    min-height: 58px;
    display: grid !important;
    grid-template-columns: 42px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 9px 14px 9px 9px;
    font-size: 14px;
    border-radius: 22px;
  }

  .skill-card::after,
  .project-card::after {
    animation-duration: 9s;
  }

  .card-icon {
    width: 39px;
    height: 39px;
    font-size: 18px;
  }

  .score {
    font-size: 22px;
  }

  .badge {
    right: 12px;
    bottom: -8px;
  }

  .mobile-card-detail {
    grid-column: 1 / -1;
    display: none;
    margin: 4px 4px 2px 50px;
    padding: 10px 12px;
    border: 1px solid rgba(77, 252, 255, 0.34);
    border-radius: 14px;
    color: #c9f7ff;
    background: rgba(2, 16, 30, 0.68);
    box-shadow:
      inset 0 0 12px rgba(77, 252, 255, 0.1),
      0 0 12px rgba(77, 252, 255, 0.18);
    font-size: 12.5px;
    line-height: 1.55;
  }

  .skill-card.active .mobile-card-detail,
  .project-card.active .mobile-card-detail {
    display: block !important;
  }

  .github-flyout {
    grid-column: 1 / -1;
    position: static !important;
    width: 100%;
    margin-top: 10px;
    opacity: 1 !important;
    pointer-events: auto;
    transform: none !important;
    filter: none !important;
    display: none;
  }

  .github-card.active .github-flyout,
  .github-card:hover .github-flyout,
  .github-card:focus-within .github-flyout {
    display: block !important;
  }

  .github-flyout::before {
    display: none !important;
  }

  .github-list a {
    min-height: 34px;
    font-size: 12px;
  }

  .detail-pop {
    display: none !important;
  }

  .side-panel {
    order: 2;
    margin-top: 0;
    border-radius: 20px;
  }

  .panel-title {
    font-size: 21px;
  }

  .side-panel ul {
    font-size: 13px;
  }
}