:root{color:#152033;font-synthesis:none;text-rendering:optimizeLegibility;background:#f3f6fb;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 100% 0,#dbeafe 0,#0000 28rem),#f3f6fb;min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.playground{width:min(1180px,100% - 32px);margin:0 auto;padding:48px 0 80px}.page-header{max-width:760px;margin-bottom:28px}.eyebrow{color:#2563eb;letter-spacing:.04em;margin-bottom:10px;font-size:13px;font-weight:700;display:inline-block}.page-header h1{margin:0 0 12px;font-size:clamp(30px,5vw,48px);line-height:1.2}.page-header p,.section-heading p,.example-heading p{color:#64748b;margin:0;line-height:1.8}.demo-section+.demo-section{margin-top:48px}.calendar-tabs{scrollbar-width:none;background:#ffffffd1;border:1px solid #dbe3ef;border-radius:14px;gap:8px;width:fit-content;max-width:100%;margin-bottom:28px;padding:6px;display:flex;overflow-x:auto;box-shadow:0 8px 24px #0f172a0d}.calendar-tabs::-webkit-scrollbar{display:none}.calendar-tab{color:#475569;white-space:nowrap;background:0 0;border:0;border-radius:9px;flex:none;min-height:40px;padding:8px 16px;font-weight:700;transition:color .15s,background .15s,box-shadow .15s}.calendar-tab:hover{color:#1d4ed8;background:#eff6ff}.calendar-tab.is-active{color:#fff;background:#2563eb;box-shadow:0 5px 14px #2563eb40}.section-heading{margin-bottom:18px}.section-heading h2{margin:0 0 5px;font-size:22px}.examples-grid{gap:18px;display:grid}.input-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.span-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.example-card{background:#fffffff0;border:1px solid #e2e8f0;border-radius:18px;align-self:start;min-width:0;padding:20px;box-shadow:0 10px 30px #0f172a0f}.example-heading{justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px;display:flex}.example-heading h2{margin:0 0 5px;font-size:16px}.example-heading p{font-size:13px}.example-heading code{color:#1d4ed8;direction:ltr;background:#eff6ff;border-radius:7px;flex:none;padding:5px 8px;font-size:11px}.target-row{align-items:stretch;gap:8px;display:flex}.date-target{color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:10px;outline:none;flex:1;min-width:0;min-height:46px;padding:11px 13px;transition:border-color .15s,box-shadow .15s}.date-target:hover,.date-target:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.date-target[aria-invalid=true]{border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}.input-error{color:#dc2626;margin:7px 2px 0;font-size:12px}.date-input{cursor:pointer}.calendar-input-group{direction:rtl;width:100%;display:flex}.calendar-group-input{color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-left:0;border-radius:0 10px 10px 0;outline:none;flex:1;min-width:0;min-height:46px;padding:11px 13px;transition:border-color .15s,box-shadow .15s}.calendar-icon-button{color:#2563eb;background:#eff6ff;border:1px solid #cbd5e1;border-radius:10px 0 0 10px;flex:0 0 46px;justify-content:center;align-items:center;min-height:46px;padding:0;display:inline-flex}.calendar-input-group:focus-within .calendar-group-input,.calendar-input-group:focus-within .calendar-icon-button{border-color:#2563eb}.calendar-input-group:focus-within{border-radius:10px;box-shadow:0 0 0 3px #2563eb1a}.calendar-icon-button:hover{color:#1d4ed8;background:#dbeafe}.date-span{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;display:flex}.clear-button{color:#475569;background:#f8fafc;border:1px solid #cbd5e1;border-radius:10px;flex:none;padding:0 12px}.clear-button:hover:not(:disabled){color:#dc2626;background:#fef2f2;border-color:#fca5a5}.clear-button:disabled{opacity:.45}.mode-badge{color:#475569;background:#f1f5f9;border-radius:999px;margin-top:12px;padding:4px 9px;font-size:11px;display:inline-flex}.other-examples{margin-bottom:18px}@media (max-width:900px){.span-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:680px){.playground{width:min(100% - 20px,520px);padding-top:28px}.input-grid,.span-grid{grid-template-columns:1fr}.page-header{margin-bottom:30px}.calendar-tabs{width:100%}}@media (max-width:420px){.example-card{padding:15px}.example-heading{display:block}.example-heading code{margin-top:10px;display:inline-block}.target-row{flex-wrap:wrap}.date-target{flex-basis:100%}.clear-button{min-height:38px}}