.learning-activity {
  --heat-empty: #edf1ed;
  --heat-one: #cfdfd1;
  --heat-two: #92c6a2;
  --heat-three: #3c916b;
  --heat-unknown: #dce3dc;
  --heat-selected: #155d48;
  margin-top: 37px;
}
.learning-activity__heading { margin-bottom: 14px; }
.learning-activity__demo-tag { display: inline-block; margin-left: 5px; color: var(--muted); font-size: 10px; font-weight: 530; letter-spacing: 0; vertical-align: 1px; }
.learning-activity__period { padding-bottom: 2px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.learning-activity__panel { padding: 25px 28px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 8px 25px #1b3d2710; }
.learning-activity__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
.learning-activity__stat { min-width: 0; }
.learning-activity__stat strong { display: block; overflow: hidden; color: var(--ink); font-size: clamp(19px, 2vw, 25px); font-weight: 690; font-variant-numeric: tabular-nums; letter-spacing: -.055em; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.learning-activity__stat span { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; font-weight: 520; }
.learning-activity__chart-scroll { max-width: 100%; margin-top: 27px; overflow-x: auto; overflow-y: hidden; padding: 2px 0 6px; scrollbar-color: var(--line) transparent; scrollbar-width: thin; }
.learning-activity__chart-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 5px; }
.learning-activity__chart-inner { width: max-content; min-width: 100%; }
.learning-activity__months { display: grid; grid-auto-columns: 12px; grid-auto-flow: column; column-gap: 2px; height: 22px; margin-left: 23px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.learning-activity__months span { grid-row: 1; align-self: start; white-space: nowrap; }
.learning-activity__plot { display: flex; align-items: start; gap: 11px; }
.learning-activity__weekdays { display: grid; grid-template-rows: repeat(7, 12px); gap: 2px; width: 12px; flex: none; color: var(--muted); font-size: 9px; line-height: 12px; }
.learning-activity__grid { display: grid; grid-auto-columns: 12px; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; gap: 2px; }
.learning-activity__cell, .learning-activity__legend i { display: block; width: 12px; height: 12px; border: 0; border-radius: 3px; background: var(--heat-empty); }
.learning-activity__cell { position: relative; padding: 0; outline: 0; transition: transform .18s ease, box-shadow .18s ease; }
.learning-activity__cell[data-level="1"], .learning-activity__legend i[data-level="1"] { background: var(--heat-one); }
.learning-activity__cell[data-level="2"], .learning-activity__legend i[data-level="2"] { background: var(--heat-two); }
.learning-activity__cell[data-level="3"], .learning-activity__legend i[data-level="3"] { background: var(--heat-three); }
.learning-activity__cell--unmeasured { background: repeating-linear-gradient(135deg, var(--heat-empty) 0 3px, var(--heat-unknown) 3px 5px) !important; }
.learning-activity__cell:is(:hover, :focus-visible) { z-index: 1; box-shadow: 0 0 0 2px var(--heat-selected); transform: scale(1.1); }
.learning-activity__cell[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--heat-selected); }
.learning-activity__cell--outside { visibility: hidden; pointer-events: none; }
.learning-activity__footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 30px; margin-top: 16px; }
.learning-activity__detail { min-width: 0; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.learning-activity__detail strong { color: var(--ink); font-weight: 650; }
.learning-activity__legend { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--muted); font-size: 10px; }
.learning-activity__legend span:first-child { margin-right: 2px; }
.learning-activity__legend span:last-child { margin-left: 2px; }
:root[data-theme="dark"] .learning-activity { --heat-empty: #343735; --heat-one: #3b5948; --heat-two: #5d9a73; --heat-three: #91caa5; --heat-unknown: #4a504a; --heat-selected: #c0e7cd; }
:root[data-theme="dark"] .learning-activity__panel { box-shadow: 0 9px 28px #0000003b; }
:root[data-theme="dark"] .learning-activity__cell[aria-pressed="true"], :root[data-theme="dark"] .learning-activity__cell:is(:hover, :focus-visible) { box-shadow: 0 0 0 2px var(--heat-selected); }
@media (max-width: 760px) {
  .learning-activity { margin-top: 33px; }
  .learning-activity__panel { padding: 22px 18px 17px; }
  .learning-activity__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 0; }
  .learning-activity__stat:nth-child(3) { padding-left: 0; }
  .learning-activity__stat:nth-child(2n) { padding-left: 19px; }
  .learning-activity__chart-scroll { margin-top: 24px; }
  .learning-activity__footer { align-items: start; flex-direction: column; gap: 10px; }
  .learning-activity__legend { align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .learning-activity__cell { transition: none; }
  .learning-activity__cell:is(:hover, :focus-visible) { transform: none; }
}