.month-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 24px 0 16px; }
.month-toolbar small { color: #c8c8c8; }
.month-scroller { position: relative; height: clamp(400px, 66dvh, 850px); overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #ffffff50 transparent; --month-scale: 1; }
.month-scroller:focus-visible { outline: 2px solid #fff9; outline-offset: 5px; border-radius: 8px; }
.scroll-month { padding: 12px 8px 44px; transform: scaleX(var(--month-scale)); transform-origin: center; }
.scroll-month h2 { margin: 0 0 20px; font-size: 25px; }
.month-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); text-align: center; margin-bottom: 12px; color: #bbb; font-size: 13px; }
.scroll-month .monthgrid { grid-template-columns: repeat(7, minmax(0,1fr)); }
.scroll-month .monthgrid > button { min-width: 0; height: clamp(80px, 12dvh, 125px); overflow: hidden; }
.scroll-month .monthgrid small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-blank { border: solid #fff2; border-width: 0 1px 1px 0; background: #0002; }
.scroll-month [aria-current="date"] > span { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #fff; color: #171717; }
@media (max-width: 600px) {
  .month-toolbar { gap: 8px; }
  .month-toolbar small { font-size: 11px; }
  .month-toolbar button { flex-shrink: 0; padding: 9px 12px; }
  .month-scroller { height: 62dvh; min-height: 360px; }
  .scroll-month { padding-inline: 2px; }
  .scroll-month h2 { font-size: 21px; }
  .scroll-month .monthgrid > button { height: 76px; padding: 7px 4px; }
}
@media (prefers-reduced-motion: reduce) { .scroll-month { transform: none; } }