.appcloud-year {
  gap: clamp(var(--ts-space-120), 3vw, var(--ts-space-220, 2.2rem));
  align-items: center;
  grid-template-columns: minmax(0, 1.04fr) minmax(17rem, .72fr);
  margin-top: var(--ts-space-180);
  padding: clamp(var(--ts-space-100), 2.6vw, var(--ts-space-140));
  border: 1px solid var(--ts-rule, var(--ts-rule));
  border-radius: var(--ts-radius-md);
  background: linear-gradient(180deg, var(--ts-paper-lift), var(--ts-paper, var(--ts-paper)));
  box-shadow: 0 18px 44px -34px var(--ts-ink, var(--ts-ink));
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .appcloud-year {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ts-paper-lift) 94%, white), var(--ts-paper, var(--ts-paper)));
    box-shadow: 0 18px 44px -34px color-mix(in srgb, var(--ts-ink, var(--ts-ink)) 45%, transparent);
  }
}

.appcloud-year__visual {
  margin: 0;
}

.appcloud-year__visual figcaption {
  margin-top: var(--ts-space-60);
  color: var(--ts-muted, var(--ts-muted));
  font-size: var(--ts-text-md);
  line-height: 1.4;
}

.appcloud-year-shot {
  padding: var(--ts-space-80);
  border: 1px solid var(--ts-rule, var(--ts-rule));
  border-radius: var(--ts-radius-md);
  background: var(--ts-surface, white);
  overflow: hidden;
}

.appcloud-year-shot__bar {
  gap: var(--ts-space-30);
  align-items: center;
  padding-bottom: var(--ts-space-70);
  border-bottom: 1px solid var(--ts-rule-soft, var(--ts-rule-soft));
  display: flex;
}

.appcloud-year-shot__bar span {
  width: .46rem;
  height: .46rem;
  border-radius: 50%;
  background: var(--ts-rule, var(--ts-rule));
}

.appcloud-year-shot__bar strong {
  margin-left: auto;
  color: var(--ts-muted, var(--ts-muted));
  font: 750 var(--ts-text-xs) / 1 var(--ts-font-mono, monospace);
  text-transform: uppercase;
}

.appcloud-year-shot__head {
  gap: var(--ts-space-20);
  padding-block: var(--ts-space-80);
  display: grid;
}

.appcloud-year-shot__head span,
.appcloud-year-shot__note span {
  color: var(--ts-accent, var(--ts-accent));
  font-size: var(--ts-text-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.appcloud-year-shot__head strong {
  color: var(--ts-ink, var(--ts-ink));
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  line-height: 1.05;
}

.appcloud-year-shot__head em {
  color: var(--ts-muted, var(--ts-muted));
  font-size: var(--ts-text-sm);
  font-style: normal;
}

.appcloud-year-shot__stats {
  gap: var(--ts-space-50);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--ts-space-80);
  display: grid;
}

.appcloud-year-shot__stats div {
  min-height: 4.5rem;
  padding: var(--ts-space-60);
  border: 1px solid var(--ts-rule-soft, var(--ts-rule-soft));
  border-radius: var(--ts-radius-md);
  background: var(--ts-paper, var(--ts-paper));
  display: grid;
  align-content: center;
}

@supports (color: color-mix(in lab, red, red)) {
  .appcloud-year-shot__stats div {
    background: color-mix(in srgb, var(--ts-paper, var(--ts-paper)) 62%, white);
  }
}

.appcloud-year-shot__stats strong {
  color: var(--ts-ink, var(--ts-ink));
  font-variant-numeric: tabular-nums;
  font-size: 1.22rem;
  line-height: 1;
}

.appcloud-year-shot__stats span {
  margin-top: var(--ts-space-25);
  color: var(--ts-muted, var(--ts-muted));
  font-size: .62rem;
  font-weight: 750;
  line-height: 1.1;
  text-transform: uppercase;
}

.appcloud-year-shot__signature {
  gap: 3px;
  --ts-band-green: var(--ts-band-green-ink, var(--ts-band-green));
  --ts-band-yellow: var(--ts-band-yellow-ink, var(--ts-band-yellow-ink));
  --ts-band-orange: var(--ts-band-orange-ink, var(--ts-band-orange-ink));
  --ts-band-red: var(--ts-band-red-ink, var(--ts-danger));
  --ts-band-purple: var(--ts-band-purple-ink, var(--ts-band-purple-ink));
  --ts-band-maroon: var(--ts-band-maroon-ink, var(--ts-band-maroon));
  grid-template-columns: repeat(14, minmax(0, 1fr));
  padding: var(--ts-space-60);
  border: 1px solid var(--ts-rule-soft, var(--ts-rule-soft));
  border-radius: var(--ts-radius-md);
  background: var(--ts-instrument-surface, var(--ts-instrument-surface));
  display: grid;
}

.appcloud-year-shot__signature i {
  aspect-ratio: 1;
  border-radius: 2px;
  background-color: var(--signal-dot, var(--year-cell-color, var(--ts-band-green, var(--ts-band-green))));
  opacity: .86;
  transition: background-color 6.4s ease-in-out, opacity 6.4s ease-in-out;
}

.appcloud-year-shot__signature i[data-tone="1"],
.appcloud-year-shot__signature i[data-tone="4"] {
  --year-cell-color: var(--ts-band-green, var(--ts-band-green));
}

.appcloud-year-shot__signature i[data-tone="2"] {
  --year-cell-color: var(--ts-band-yellow, var(--ts-band-yellow));
}

.appcloud-year-shot__signature i[data-tone="3"] {
  --year-cell-color: var(--ts-band-orange, var(--ts-band-orange));
}

.appcloud-year-shot__signature i[data-tone="5"] {
  --year-cell-color: var(--ts-band-red, var(--ts-band-red));
}

.appcloud-year-shot__note {
  margin-top: var(--ts-space-80);
  padding: var(--ts-space-75);
  border-left: 3px solid var(--ts-accent, var(--ts-accent));
  border-radius: 0 var(--ts-radius-md) var(--ts-radius-md) 0;
  background: var(--ts-accent, var(--ts-accent));
}

@supports (color: color-mix(in lab, red, red)) {
  .appcloud-year-shot__note {
    background: color-mix(in srgb, var(--ts-accent, var(--ts-accent)) 8%, var(--ts-paper, var(--ts-paper)));
  }
}

.appcloud-year-shot__note p {
  margin: .35rem 0 0;
  color: var(--ts-ink-soft, var(--ts-ink-soft));
  font-size: var(--ts-text-sm);
  line-height: 1.45;
}

.appcloud-year__copy h3 {
  margin: 0 0 var(--ts-space-60);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.appcloud-year__copy > p:not(.appcloud-advice__label) {
  max-width: 40rem;
  margin: 0;
  color: var(--ts-ink-soft, var(--ts-ink-soft));
  font-size: var(--ts-text-lg);
  line-height: 1.5;
}

.appcloud-year__points {
  gap: var(--ts-space-70);
  margin: var(--ts-space-100) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.appcloud-year__points li {
  gap: var(--ts-space-60);
  align-items: start;
  display: grid;
  grid-template-columns: auto 1fr;
}

.appcloud-year__points i {
  color: var(--ts-accent, var(--ts-accent));
  font-size: 1.05rem;
  line-height: 1.35;
}

.appcloud-year__points span {
  color: var(--ts-ink-soft, var(--ts-ink-soft));
  font-size: var(--ts-text-base);
  line-height: 1.45;
}

.appcloud-year__points strong {
  color: var(--ts-ink, var(--ts-ink));
  display: block;
}

@media (hover: hover) {
  .appcloud-year {
    transition: border-color var(--ts-duration-med) var(--ts-ease-out, ease), box-shadow var(--ts-duration-med) var(--ts-ease-out, ease);
  }

  .appcloud-year:hover {
    border-color: var(--ts-accent, var(--ts-accent));
    box-shadow: 0 22px 52px -34px var(--ts-ink, var(--ts-ink));
  }
}

@media (max-width: 980px) {
  .appcloud-year {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .appcloud-year {
    padding: var(--ts-space-80);
  }

  .appcloud-year-shot__stats {
    grid-template-columns: 1fr;
  }

  .appcloud-year-shot__signature {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .appcloud-year-shot__signature i {
    transition: none;
  }
}