*,:before,:after{box-sizing:border-box}body{background:var(--gray-1,#f1f5f9);min-height:100dvh;font-family:var(--font-sans,system-ui, sans-serif);color:var(--gray-9,#0f172a);margin:0;line-height:1.5}.docs-shell{grid-template-columns:220px minmax(0,1fr);min-height:100dvh;display:grid}.docs-nav{background:var(--gray-0,#fff);border-right:1px solid var(--gray-3,#e2e8f0);padding:var(--size-5,1.25rem) var(--size-4,1rem);height:100dvh;position:sticky;top:0;overflow-y:auto}.docs-nav__brand{letter-spacing:-.02em;margin:0 0 var(--size-4,1rem);color:inherit;font-size:1.1rem;font-weight:800;text-decoration:none}.docs-nav__brand span{color:var(--indigo-6,#4f46e5)}.docs-nav a{padding:var(--size-2,.5rem) var(--size-3,.75rem);border-radius:var(--radius-2,6px);color:var(--gray-7,#334155);font-size:var(--font-size-1,.9rem);margin-bottom:2px;text-decoration:none;display:block}.docs-nav a:hover{background:var(--gray-1,#f1f5f9);color:var(--gray-9,#0f172a)}.docs-nav a.is-active{background:var(--indigo-1,#eef2ff);color:var(--indigo-7,#4338ca);font-weight:600}.docs-main{padding:var(--size-7,1.75rem) var(--size-8,2rem);width:100%;max-width:960px}.docs-main h1{letter-spacing:-.03em;margin:0 0 var(--size-3,.75rem);font-size:clamp(1.75rem,4vw,2.25rem);font-weight:800}.docs-main h2{margin:var(--size-8,2rem) 0 var(--size-3,.75rem);padding-top:var(--size-2,.5rem);border-top:1px solid var(--gray-3,#e2e8f0);font-size:1.25rem;font-weight:700}.docs-main h2:first-of-type{border-top:none;padding-top:0}.docs-main h3{margin:var(--size-6,1.5rem) 0 var(--size-2,.5rem);color:var(--gray-8,#1e293b);font-size:1.05rem;font-weight:700}.docs-main p,.docs-main li{color:var(--gray-7,#334155)}.docs-main :not(pre)>code{font-family:var(--font-mono,ui-monospace, monospace);background:var(--gray-2,#f8fafc);border:1px solid var(--gray-3,#e2e8f0);color:var(--gray-9,#0f172a);border-radius:4px;padding:.1em .35em;font-size:.88em}.lead{max-width:60ch;font-size:1.05rem}.demo-card{background:var(--gray-0,#fff);border:1px solid var(--gray-3,#e2e8f0);border-radius:var(--radius-3,10px);margin:var(--size-5,1.25rem) 0;overflow:visible}.demo-card__header{padding:var(--size-4,1rem) var(--size-5,1.25rem);border-bottom:1px solid var(--gray-2,#f1f5f9)}.demo-card__title{margin:0;font-size:1rem;font-weight:700}.demo-card__desc{color:var(--gray-6,#64748b);font-size:var(--font-size-0,.8rem);margin:.25rem 0 0}.demo-card__hints{align-items:center;gap:var(--size-2,.5rem);padding:var(--size-4,1rem) var(--size-5,1.25rem);border-bottom:1px solid var(--gray-2,#f1f5f9);background:var(--gray-1,#f8fafc);flex-wrap:wrap;display:flex}.demo-card__hints-label{text-transform:uppercase;letter-spacing:.06em;color:var(--gray-6,#64748b);margin-right:var(--size-2,.5rem);flex-shrink:0;font-size:.68rem;font-weight:700}.demo-card__playground{grid-template-columns:minmax(260px,1fr) minmax(200px,1fr);align-items:stretch;min-height:132px;display:grid}.demo-playground__cell{padding:var(--size-5,1.25rem);flex-direction:column;justify-content:center;min-height:100%;display:flex}.demo-playground__cell--picker{border-right:1px solid var(--gray-2,#f1f5f9);align-items:center}.demo-playground__cell--picker magic-datetime{width:100%;max-width:360px}.demo-playground__cell--output{background:var(--gray-1,#f8fafc)}.output-panel__label{text-transform:uppercase;letter-spacing:.06em;color:var(--gray-6,#64748b);padding-bottom:var(--size-3,.75rem);margin-bottom:var(--size-3,.75rem);border-bottom:1px solid var(--gray-3,#e2e8f0);flex-shrink:0;font-size:.68rem;font-weight:700}.output-panel__value{font-family:var(--font-mono,ui-monospace, monospace);font-size:var(--font-size-0,.8rem);color:var(--gray-8,#1e293b);word-break:break-word;white-space:pre-wrap;flex:1;align-self:stretch;margin:0;line-height:1.45}.demo-card__body{padding:var(--size-5,1.25rem);grid-template-columns:minmax(260px,1fr) minmax(200px,1fr);align-items:stretch;gap:0;min-height:132px;display:grid}.demo-card__body>magic-datetime{padding-right:var(--size-5,1.25rem);border-right:1px solid var(--gray-2,#f1f5f9);flex-direction:column;justify-content:center;display:flex}.demo-card__body>.output,.demo-card__body>.output-panel{background:var(--gray-1,#f8fafc);padding:var(--size-5,1.25rem);flex-direction:column;min-height:100%;display:flex}.output{font-family:var(--font-mono,ui-monospace, monospace);font-size:var(--font-size-0,.8rem);color:var(--gray-8,#1e293b);word-break:break-word;white-space:pre-wrap;flex:1;margin:0;line-height:1.45}.nl-hints{display:contents}.nl-hint{background:var(--gray-0,#fff);border:1px solid var(--indigo-3,#a5b4fc);color:var(--indigo-8,#3730a3);border-radius:var(--radius-round,999px);font-family:var(--font-mono,ui-monospace, monospace);font-size:var(--font-size-0,.78rem);cursor:pointer;align-items:center;gap:.35rem;padding:.35rem .75rem;font-weight:500;transition:background .12s,border-color .12s,box-shadow .12s;display:inline-flex;box-shadow:0 1px 2px #0f172a0a}.nl-hint:before{content:"✦";color:var(--indigo-5,#6366f1);font-size:.65rem;line-height:1}.nl-hint:hover{background:var(--indigo-0,#eef2ff);border-color:var(--indigo-5,#6366f1);box-shadow:0 2px 6px #4f46e51f}.docs-table{border-collapse:collapse;width:100%;font-size:var(--font-size-1,.9rem);margin:var(--size-4,1rem) 0}.docs-table th,.docs-table td{border:1px solid var(--gray-3,#e2e8f0);padding:var(--size-2,.5rem) var(--size-3,.75rem);text-align:left;vertical-align:top}.docs-table th{background:var(--gray-1,#f8fafc);font-weight:600}.docs-table code{font-size:.85em}.docs-tabs{margin:var(--size-4,1rem) 0 var(--size-6,1.5rem)}.docs-tabs__list{border-bottom:1px solid var(--gray-3,#e2e8f0);flex-wrap:wrap;gap:0;margin-bottom:0;display:flex}.docs-tabs__tab{padding:var(--size-2,.5rem) var(--size-4,1rem);border-radius:var(--radius-2,6px) var(--radius-2,6px) 0 0;color:var(--gray-7,#334155);cursor:pointer;font-size:var(--font-size-0,.875rem);background:0 0;border:none;border-bottom:2px solid #0000;margin:0 0 -1px;font-family:inherit;font-weight:500}.docs-tabs__tab:hover{color:var(--gray-9,#0f172a);background:var(--gray-1,#f8fafc)}.docs-tabs__tab.is-active{color:var(--indigo-7,#4338ca);border-bottom-color:var(--indigo-6,#4f46e5);background:var(--gray-0,#fff)}.docs-tabs__panels{border:1px solid var(--gray-3,#e2e8f0);border-radius:0 0 var(--radius-2,6px) var(--radius-2,6px);background:var(--gray-0,#fff);border-top:none}.docs-tabs__panel{padding:var(--size-4,1rem);display:none}.docs-tabs__panel.is-active{display:block}.docs-tabs__panel .css-preview{margin:0}.docs-tabs__lead{margin:0 0 var(--size-3,.75rem);font-size:var(--font-size-0,.875rem);color:var(--gray-7,#334155);line-height:1.5}.theme-scope-tabs{gap:var(--size-2,.5rem);margin-bottom:var(--size-4,1rem);flex-wrap:wrap;display:flex}.theme-scope-tabs button{padding:var(--size-2,.5rem) var(--size-3,.75rem);border-radius:var(--radius-2,6px);border:1px solid var(--gray-3,#e2e8f0);background:var(--gray-0,#fff);cursor:pointer;font-size:var(--font-size-0,.8rem)}.theme-scope-tabs button.is-active{background:var(--indigo-6,#4f46e5);color:#fff;border-color:var(--indigo-6,#4f46e5)}.token-override-input{width:100%;min-width:120px;font-family:var(--font-mono,ui-monospace, monospace);border:1px solid var(--gray-3,#e2e8f0);border-radius:4px;padding:4px 6px;font-size:.8rem}pre.css-preview,.css-preview{color:#f1f5f9;font-family:var(--font-mono,ui-monospace, monospace);padding:var(--size-4,1rem);border-radius:var(--radius-2,6px);white-space:pre-wrap;margin:var(--size-4,1rem) 0;background:#0f172a;border:1px solid #334155;font-size:.82rem;line-height:1.55;overflow-x:auto}pre.css-preview code,.css-preview code{color:inherit;font-size:inherit;background:0 0;border:none;padding:0}.theme-preview-row{align-items:center;gap:var(--size-5,1.25rem);padding:var(--size-5,1.25rem);border:1px dashed var(--gray-4,#cbd5e1);border-radius:var(--radius-2,6px);margin:var(--size-4,1rem) 0;flex-wrap:wrap;display:flex}.theme-dark-wrap{background:var(--gray-9,#0f172a);padding:var(--size-4,1rem);border-radius:var(--radius-2,6px)}@media (width<=720px){.docs-shell{grid-template-columns:1fr}.docs-nav{border-right:none;border-bottom:1px solid var(--gray-3,#e2e8f0);height:auto;position:static}.demo-card__playground,.demo-card__body{grid-template-columns:1fr}.demo-playground__cell--picker,.demo-card__body>magic-datetime{border-right:none;border-bottom:1px solid var(--gray-2,#f1f5f9)}}