@media (max-width: 390px) {
  .compass-header {
    grid-template-columns: 34px 1fr 128px;
    padding-inline: 14px;
  }

  .compass-header h1 {
    font-size: 21px;
  }

  .compass-header-actions {
    gap: 8px;
  }

  .compass-header-actions button {
    font-size: 13px;
  }

  .compass-scroll {
    gap: 8px;
    padding-inline: 13px;
  }

  .compass-summary span {
    font-size: 12px;
  }

  .compass-summary strong {
    font-size: 15px;
  }

  .compass-summary strong.is-green {
    font-size: 20px;
  }

  .compass-stage {
    min-height: 360px;
  }

  .compass-dial-wrap {
    top: 54px;
    width: clamp(244px, 70vw, 286px);
  }

  .compass-side {
    width: 46px;
    font-size: 12px;
  }

  .compass-side--switch {
    width: 55px;
  }

  .compass-mark--nw,
  .compass-mark--sw {
    left: 42px;
  }

  .compass-mark--ne,
  .compass-mark--se {
    right: 42px;
  }

  .compass-direction-list {
    grid-template-columns: 1fr;
  }

  .compass-direction-list article + article {
    border-top: 1px solid rgba(31, 31, 31, 0.08);
    border-left: 0;
  }

  .compass-tools > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compass-action-bar {
    padding-inline: 13px;
  }

  .compass-action-bar button {
    height: 50px;
    font-size: 15px;
  }
}

@media (max-height: 760px) {
  .compass-header {
    min-height: 51px;
  }

  .compass-scroll {
    gap: 7px;
    padding-top: 6px;
  }

  .compass-stage {
    min-height: 342px;
  }

  .compass-dial-wrap {
    top: 46px;
    width: clamp(238px, 66vw, 286px);
  }

  .compass-summary {
    min-height: 66px;
  }

  .compass-side {
    min-height: 45px;
  }

  .compass-mark--right,
  .compass-mark--left {
    top: 174px;
  }
}