.calendar-dialog {
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 32px;
  color: var(--ink);
  background: #101318;
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 24px 100px #0009;
}
.calendar-dialog::backdrop { background: #030508a8; backdrop-filter: blur(8px); }
.calendar-close { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--dim); font: 26px var(--serif); cursor: pointer; }
.calendar-eyebrow { color: var(--warm); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.calendar-dialog h2 { font: 36px/1.15 var(--serif); font-weight: 400; margin: 12px 0; }
#calendar-date { font-size: 14px; }
#calendar-date span { display: block; color: var(--dim); font-size: 12px; margin-top: 4px; }
.calendar-options { margin-top: 24px; border-top: 1px solid var(--rule); }
.calendar-options a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); font-size: 14px; transition: color .15s, background .15s; padding: 0 8px; margin: 0 -8px; }
.calendar-options a span:last-child { color: var(--dim); }
.calendar-options a:hover { color: var(--warm); background: #ffffff06; }
.calendar-dialog :focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; border-radius: 2px; }
.calendar-foot { margin-top: 20px; font-size: 11px; color: var(--dim); }
.calendar-foot a { color: inherit; text-underline-offset: 3px; float: right; }
@media(max-width: 420px) { .calendar-dialog { padding: 28px 24px; } }