#cal { --cal-accent: #EC5121; --cal-on-accent: #fff; --cal-link: var(--mint); --cal-tint: rgba(236, 81, 33, .16); --cal-fg: var(--fg); --cal-muted: var(--muted); --cal-line: var(--line); --cal-surf: var(--surf); --cal-font: var(--sans); }
.hero > #cal { justify-self: center; align-self: center; z-index: 1; }
/* 日期站日历。颜色和字体走开头这组变量，各站只改这组 */
#cal { --cal-size: 36px; width: calc((var(--cal-size) + 2px) * 7 + 30px); font-family: var(--cal-font); color: var(--cal-fg); }
.cal-toggle { display: none; }
.cal-panel { padding: 14px; border: 1px solid var(--cal-line); border-radius: 16px; background: var(--cal-surf); }
.cal-head { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-bottom: 8px; }
.cal-head strong { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.cal-nav { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--cal-fg); cursor: pointer; }
.cal-nav svg { width: 14px; height: 14px; }
.cal-next svg { transform: scaleX(-1); }
.cal-nav:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.cal-nav:disabled { opacity: .25; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-week span { height: 28px; font-size: 12px; line-height: 28px; text-align: center; color: var(--cal-muted); }
.cal-days { min-height: calc((var(--cal-size) + 2px) * 6); align-content: start; }
.cal-d { display: block; position: relative; height: var(--cal-size); margin: 1px; border-radius: 9px; font-size: 14px; line-height: var(--cal-size); text-align: center; font-variant-numeric: tabular-nums; text-decoration: none; }
.cal-off { color: var(--cal-muted); opacity: .45; }
.cal-on { font-weight: 700; color: var(--cal-link); background: var(--cal-tint); }
.cal-on:hover { color: var(--cal-on-accent); background: var(--cal-accent); }
.cal-cur, .cal-cur:hover { color: var(--cal-on-accent); background: var(--cal-accent); }
.cal-on:focus-visible, .cal-nav:focus-visible, .cal-toggle:focus-visible { outline: 2px solid var(--cal-fg); outline-offset: 1px; }
.cal-today::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.cal-hint { margin: 8px 2px 0; font-size: 12px; line-height: 1.4; color: var(--cal-muted); }
@media (max-width: 720px) {
  #cal { width: 100%; }
  .cal-days { min-height: 0; }
  .cal-toggle { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--cal-line); border-radius: 12px; background: var(--cal-surf); color: var(--cal-fg); font: 500 14px/1 var(--cal-font); cursor: pointer; }
  .cal-toggle svg { width: 18px; height: 18px; flex: none; color: var(--cal-accent); }
  .cal-toggle b { margin-left: auto; font-weight: 500; color: var(--cal-muted); }
  .cal-panel { display: none; margin-top: 8px; }
  .cal-open .cal-panel { display: block; }
  .cal-d { height: 42px; line-height: 42px; }
}