.date-field-trigger{color:#f4f4f4;text-align:left;width:100%;min-height:52px;font:inherit;cursor:pointer;background:#242424;border:1px solid #858585;border-radius:18px;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.date-field-trigger:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.date-field-calendar{color:#191919;--hero-ink:#191919;--hero-muted:#666;background:#fafafa;border-radius:24px;padding:12px}.date-field-calendar .date>span{aspect-ratio:1;width:min(36px,100%);height:auto}.date-field-calendar .date{min-width:0;container-type:inline-size}.date-field-calendar .month-title{margin:0 0 12px;font-size:15px}.date-field-calendar .weekdays{margin-bottom:6px}.date-field-close{color:#666;background:0 0;border:0;justify-content:center;align-items:center;gap:6px;width:100%;min-height:40px;font-size:13px;display:flex}.period-picker{gap:12px;min-width:0;display:grid}.period-caption{color:#bbb;font-size:13px}.period-picker .date-field-trigger{gap:6px;padding:14px 12px;font-size:13px}.period-picker .date-field-trigger svg{flex-shrink:0}.period-times{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;display:grid}.period-times .field{min-width:0}.period-overnight{align-items:center;gap:10px;font-size:13px;line-height:1.4;display:flex}.period-overnight input{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}.period-picker .period-summary{color:#bbb;margin:0;font-size:13px;line-height:1.4}.date-field-calendar .date.period-day{color:#202020;background:0 0}.date-field-calendar .date.period-day:before{content:"";pointer-events:none;--period-face-size:min(36px,100cqw);height:var(--period-face-size);background:var(--accent);position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.date-field-calendar .date.period-day>span{background:var(--accent);color:#202020;outline:0;position:relative}.date-field-calendar .date.period-day:is(.period-start,[data-date$="-01"],:nth-child(7n+1)):before{left:calc((100% - var(--period-face-size))/2);border-radius:999px 0 0 999px}.date-field-calendar .date.period-day:is(.period-end,:has(+span),:nth-child(7n)):before{right:calc((100% - var(--period-face-size))/2);border-top-right-radius:999px;border-bottom-right-radius:999px}