:root {
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #1B62F1;
  --blue-900: #1E3A8A;
  --gray-200:#E5E5E5;
  --soft-gray-100: #F3F4F5;
  --soft-gray-200: #E4E4E7;
  --soft-gray-300: #D4D4D8;
  --soft-gray-500: #71717A;
  --soft-gray-900: #18181B;
  --green-700: #15803D;
  --red-800: #DF2A2A;
}

:root {
  font-family: 'Inter var', 'Inter', sans-serif;
  -webkit-font-feature-settings: 'liga' 1, 'calt' 1;
          font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}

@supports (font-variation-settings: normal) {
  *, :after, :before {
    font-optical-sizing: auto !important;
  }
}

*, :before, :after {
  box-sizing: border-box;
}


body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #EEEEF1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "case", "calt", "ccmp", "kern";
  -webkit-font-feature-settings: "case", "calt", "ccmp", "kern";
  -moz-font-feature-settings: "case", "calt", "ccmp", "kern";
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: 100%;
}

.tile {
  /* opacity: 0; */
  width: 980px;
  height: 520px;
  display: flex;
  background: #FFF;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.tile-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 48px 56px;
}

.tile-title {
  max-width: 500px;
  font-size: 36px;
  letter-spacing: -0.04em;
  margin-bottom: 32px;
  font-weight: 600;
  line-height: 120%;
  color: var(--soft-gray-900);
  margin-bottom: 64px;
}

.tile-copy {
  max-width: 620px;
  font-weight: 500;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: -.02em;
  color: var(--soft-gray-500);
}

.visual-wrapper {
  width: 100%;
  max-width: 746px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.time-units {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 16px;
  margin-top: 80px;
  border-radius: 16px;
  background: rgba(245, 245, 245, 0.57);
  box-shadow: 0px 40px 32px -24px rgba(11, 2, 62, 0.12);
}

.unit {
  flex-grow: 1;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--soft-gray-900);
  font-size: 18px;
  letter-spacing: 0;
  font-weight: 700;
  border-radius: 8px;
  opacity: 0;
}

.unit.m1 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 100%), #FF6E30;
}
.unit.m5 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 100%), #F90;
}
.unit.m15 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 100%), #FFC700;
}
.unit.H1 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 100%), #FFE600;
}
.unit.H4 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 100%), #B9FC2A;
}
.unit.D1 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 100%), #7AF51A;
}
.unit.W1 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 100%), #2FF05A;
}
.unit.M1 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 100%), #00CB45;
}

.time-ruler {
  --inline-space: 27px;
  --tickGap: 17px;
  overflow: hidden;
  width: calc(100% - var(--inline-space) * 2);
  margin-inline: var(--inline-space);
}

.ruler {
  width: 100%;
  display: flex;
  gap: var(--tickGap);

}

.tick-group {
  flex-shrink: 0;
  display: flex;
  gap: var(--tickGap);
  align-items: flex-end;
}

.tick {
  width: 1px;
  height: 12px;
  background: rgb(0 0 0 / 50%);
}

.tick.mark {
  width: 2px;
  height: 24px;
}

.tick.mark.high {
  height: 32px;
}