@layer css-starter.reset{*,:before,:after{box-sizing:border-box}:not(dialog){margin:0}@media (prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{-webkit-font-smoothing:antialiased;line-height:1.5}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}}@layer css-starter.reset-overrides{:where(:not(dialog)){padding:0}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-moz-tab-size:4;tab-size:4}body{min-height:100vh}ul,ol{list-style:none}a{color:inherit;text-decoration:none}input,textarea,select{color:inherit}table{border-collapse:collapse}:focus-visible{outline:2px solid var(--c-focus-ring,Highlight);outline-offset:2px}}@layer css-starter.base{:where(body){font-family:var(--ff-sans);font-size:var(--fs-base);font-weight:var(--fw-normal);line-height:var(--lh-base);color:var(--c-text);background-color:var(--c-bg)}:where(h1){font-size:var(--fs-2xl);font-weight:var(--fw-bold);line-height:var(--lh-tight)}:where(h2){font-size:var(--fs-xl);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}:where(h3){font-size:var(--fs-lg);font-weight:var(--fw-medium);line-height:var(--lh-tight)}:where(h4,h5,h6){font-size:var(--fs-base);font-weight:var(--fw-medium)}:where(p){margin-bottom:var(--sp-4);color:var(--c-text-secondary)}:where(p:last-child){margin-bottom:0}:where(strong){font-weight:var(--fw-semibold)}:where(em){font-style:italic}:where(small){color:var(--c-text-muted);font-size:.85em}:where(blockquote){margin:var(--sp-4) 0;padding-left:var(--sp-4);border-left:3px solid var(--c-primary);color:var(--c-text-secondary)}:where(ul,ol){padding-left:var(--sp-5);margin-bottom:var(--sp-4)}:where(li){margin-bottom:var(--sp-1)}:where(hr){background-color:var(--c-border);height:1px;margin:var(--sp-6) 0;border:none}:where(a){color:var(--c-primary);text-underline-offset:2px;transition:color var(--transition-fast);text-decoration:underline}:where(a:hover){color:var(--c-primary-hover)}:where(a:active){color:var(--c-primary-active)}:where(a)[aria-disabled=true],:where(a)[aria-disabled=true]:hover,:where(a)[aria-disabled=true]:active{color:var(--c-text-muted);cursor:not-allowed;opacity:var(--opacity-disabled);text-decoration:none}:where(button){font-family:inherit;font-size:inherit;padding:var(--btn-padding-y) var(--btn-padding-x);border-radius:var(--btn-radius);line-height:var(--btn-line-height);font-weight:var(--btn-font-weight);background-color:var(--btn-bg);border:1px solid var(--btn-border);color:var(--btn-color);cursor:pointer;transition:var(--btn-transition);transition-property:background-color,border-color,color,box-shadow,opacity}:where(button):hover{background-color:var(--btn-bg-hover);border-color:var(--btn-border-hover);color:var(--btn-color-hover)}:where(button):active{background-color:var(--btn-bg-active);border-color:var(--btn-border-active);color:var(--btn-color-active)}:where(button):focus-visible{outline:2px solid var(--btn-focus-ring);outline-offset:2px}:where(button):disabled{cursor:not-allowed;opacity:var(--btn-disabled-opacity)}:where(code,kbd,samp,pre){font-family:var(--ff-mono);font-size:.9em}:where(code){background-color:var(--c-bg-subtle);border-radius:var(--radius-sm);padding:.15em .3em}:where(pre){padding:var(--sp-4);background-color:var(--c-bg-subtle);border-radius:var(--radius-md);line-height:var(--lh-tight);overflow-x:auto}:where(pre code){background:0 0;padding:0}:where(kbd){background-color:var(--c-bg-muted);border:1px solid var(--c-border);border-radius:var(--radius-sm);box-shadow:0 1px 0 var(--c-border);padding:.1em .35em;font-size:.85em}:where(label){font-weight:var(--fw-medium);margin-bottom:var(--sp-1);display:block}:where(input,textarea,select){padding:var(--sp-2) var(--sp-3);font-family:inherit;font-size:var(--fs-base);color:var(--c-text);background-color:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast)}:where(input:focus,textarea:focus,select:focus){border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-focus-ring);outline:none}:where(textarea){resize:vertical;min-height:6ex}:where(select){cursor:pointer}:where(input[type=checkbox],input[type=radio]){-webkit-appearance:none;appearance:none;width:1.125rem;height:1.125rem;color:var(--c-text);background-color:var(--c-bg);border:1px solid var(--c-border);cursor:pointer;transition:background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;font-family:inherit;display:inline-flex}:where(input[type=checkbox]:focus-visible,input[type=radio]:focus-visible){border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-focus-ring);outline:none}:where(input[type=checkbox]){border-radius:var(--radius-sm)}:where(input[type=checkbox]:checked){background-color:var(--c-primary);border-color:var(--c-primary)}:where(input[type=checkbox]:checked):after{content:"";border:solid var(--c-text-inverse);border-width:0 2px 2px 0;width:5px;height:9px;display:block;transform:rotate(45deg)translateY(-1px)}:where(input[type=checkbox]:indeterminate){background-color:var(--c-primary);border-color:var(--c-primary)}:where(input[type=checkbox]:indeterminate):after{content:"";background-color:var(--c-text-inverse);border-radius:1px;width:8px;height:2px;display:block}:where(input[type=radio]){border-radius:var(--radius-full)}:where(input[type=radio]:checked){border-color:var(--c-primary)}:where(input[type=radio]:checked):after{content:"";background-color:var(--c-primary);border-radius:var(--radius-full);width:8px;height:8px;display:block}:where(input[type=checkbox]:disabled,input[type=radio]:disabled){opacity:.5;cursor:not-allowed}:where(input[type=checkbox]:disabled:checked,input[type=radio]:disabled:checked){background-color:var(--c-border);border-color:var(--c-border)}:where(input[type=checkbox]:disabled:checked):after{border-color:var(--c-text-muted)}:where(input[type=radio]:disabled:checked):after{background-color:var(--c-text-muted)}:where(input[type=checkbox]:disabled:indeterminate){background-color:var(--c-border);border-color:var(--c-border)}:where(input[type=checkbox]:disabled:indeterminate):after{background-color:var(--c-text-muted)}:where(label:has(input[type=checkbox],input[type=radio])){align-items:center;gap:var(--sp-2);font-weight:var(--fw-normal);cursor:pointer;margin-bottom:0;display:inline-flex}:where(fieldset){border:1px solid var(--c-border);border-radius:var(--radius-md);padding:var(--sp-4);margin:0}:where(legend){font-weight:var(--fw-medium);padding:0 var(--sp-2);color:var(--c-text)}:where(table){border-collapse:collapse;width:100%}:where(th,td){padding:var(--sp-2) var(--sp-3);text-align:left;border-bottom:1px solid var(--c-border-light)}:where(th){font-weight:var(--fw-semibold);background-color:var(--c-bg-subtle)}:where(.card){background-color:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);break-inside:avoid;margin:0;overflow:hidden;&>:where(img,video){width:100%;height:auto;display:block}&>:where(.card__caption){padding:var(--card-caption-padding);font-size:var(--card-caption-font-size);color:var(--card-caption-color)}}:where(.picker){gap:var(--picker-gap);border:0;flex-wrap:wrap;margin:0;padding:0;display:flex}:where(.picker__option){cursor:pointer;position:relative;&>:where(input){opacity:0;pointer-events:none;position:absolute}&>:where(span){padding:var(--picker-option-padding-y) var(--picker-option-padding-x);border:1px solid var(--picker-border);border-radius:var(--picker-radius);font-size:var(--picker-font-size);font-weight:var(--picker-font-weight);color:var(--picker-color);background-color:var(--picker-bg);transition:var(--picker-transition);transition-property:color,background-color,border-color;display:inline-block}&:where(:hover)>:where(span){border-color:var(--picker-border-hover);color:var(--picker-color-hover)}&:where(:has(input:checked))>:where(span){background-color:var(--picker-bg-checked);border-color:var(--picker-border-checked);color:var(--picker-color-checked)}&:where(:has(input:disabled)){cursor:not-allowed;opacity:var(--picker-disabled-opacity)}&:where(:has(input:focus-visible))>:where(span){outline:2px solid var(--picker-focus-ring);outline-offset:2px}}:where(.callout){align-items:flex-start;gap:var(--callout-gap);margin-block:var(--sp-4);padding:var(--callout-padding-block) var(--callout-padding-inline);border:var(--callout-border-width) solid var(--callout-border);border-radius:var(--callout-radius);background-color:var(--callout-bg);color:var(--callout-color);display:flex;&>:where(.callout__icon){font-size:var(--callout-icon-size);color:var(--callout-accent);flex:none;line-height:1;display:inline-flex;&>:where(svg){width:1em;height:1em;display:block}}&>:where(.callout__content){gap:var(--sp-1);flex-direction:column;min-width:0;display:flex}&>:where(.callout__content)>:where(.callout__title){font-weight:var(--callout-title-font-weight);color:var(--callout-title-color);margin:0}&>:where(.callout__content)>:where(.callout__body){color:var(--c-text-secondary);margin:0}&>:where(.callout__title,.callout__body){margin:0}}}@layer css-starter.tokens{:root{--c-primary:#42b883;--c-primary-hover:#38a070;--c-primary-active:#2e8c5e;--c-primary-subtle:#42b88314;--c-text:#1a1a1a;--c-text-secondary:#555;--c-text-muted:#888;--c-text-inverse:#fff;--c-bg:#fff;--c-bg-subtle:#f8f9fa;--c-bg-muted:#e9ecef;--c-border:#dee2e6;--c-border-light:#e9ecef;--c-focus-ring:#42b88359;--c-info:#2563eb;--c-success:#15803d;--c-warning:#b45309;--c-error:#dc2626}@media (prefers-color-scheme:dark){:root{--c-primary:#5cdba0;--c-primary-hover:#46c98a;--c-primary-active:#3bb37a;--c-primary-subtle:#5cdba01f;--c-text:#e4e4e4;--c-text-secondary:#a0a0a0;--c-text-muted:#6b6b6b;--c-text-inverse:#1a1a1a;--c-bg:#1a1b1e;--c-bg-subtle:#25262a;--c-bg-muted:#2e2f34;--c-border:#3a3b40;--c-border-light:#333438;--c-focus-ring:#5cdba066;--c-info:#60a5fa;--c-success:#4ade80;--c-warning:#fbbf24;--c-error:#f87171}}:root{--ff-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--ff-mono:ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;--fs-xs:.75rem;--fs-sm:.85rem;--fs-base:1rem;--fs-lg:1.15rem;--fs-xl:1.5rem;--fs-2xl:2rem;--lh-tight:1.25;--lh-base:1.6;--lh-loose:1.8;--fw-normal:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--sp-0:0;--sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;--sp-6:2rem;--sp-8:3rem;--sp-10:4rem;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-full:9999px;--shadow-sm:0 1px 2px #0000000f;--shadow-md:0 2px 8px #00000014;--shadow-lg:0 4px 24px #0000001a}@media (prefers-color-scheme:dark){:root{--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 2px 8px #00000059;--shadow-lg:0 4px 24px #0006}}:root{--transition-fast:.15s ease;--transition-base:.2s ease;--transition-slow:.3s ease;--max-width-narrow:720px;--max-width-wide:1200px;--opacity-disabled:.5;--btn-padding-x:var(--sp-4);--btn-padding-y:var(--sp-2);--btn-radius:var(--radius-md);--btn-font-weight:var(--fw-medium);--btn-line-height:var(--lh-tight);--btn-bg:var(--c-bg-subtle);--btn-bg-hover:var(--c-bg-muted);--btn-bg-active:var(--c-border-light);--btn-border:var(--c-border);--btn-border-hover:var(--c-text-muted);--btn-border-active:var(--c-text-secondary);--btn-color:var(--c-text);--btn-color-hover:var(--c-text);--btn-color-active:var(--c-text);--btn-disabled-opacity:var(--opacity-disabled);--btn-focus-ring:var(--c-focus-ring);--btn-transition:var(--transition-base);--card-bg:var(--c-bg);--card-border:var(--c-border);--card-radius:var(--radius-lg);--card-shadow:var(--shadow-sm);--card-caption-color:var(--c-text-secondary);--card-caption-font-size:var(--fs-sm);--card-caption-padding:var(--sp-2) var(--sp-3);--picker-gap:var(--sp-2);--picker-option-padding-x:var(--sp-3);--picker-option-padding-y:var(--sp-1);--picker-radius:var(--radius-full);--picker-font-size:var(--fs-sm);--picker-font-weight:var(--fw-medium);--picker-bg:var(--c-bg);--picker-border:var(--c-border);--picker-color:var(--c-text-secondary);--picker-border-hover:var(--c-primary);--picker-color-hover:var(--c-text);--picker-bg-checked:var(--c-primary);--picker-border-checked:var(--c-primary);--picker-color-checked:var(--c-text-inverse);--picker-disabled-opacity:var(--opacity-disabled);--picker-focus-ring:var(--c-focus-ring);--picker-transition:var(--transition-fast);--callout-accent:var(--c-info);--callout-border:var(--c-info);--callout-color:var(--c-text);--callout-bg:color-mix(in srgb, var(--callout-accent) 8%, var(--c-bg));--callout-gap:var(--sp-3);--callout-padding-block:var(--sp-3);--callout-padding-inline:var(--sp-4);--callout-radius:var(--radius-lg);--callout-border-width:1px;--callout-icon-size:1.25em;--callout-title-font-weight:var(--fw-bold,700);--callout-title-color:var(--c-text)}:where(.callout--info){--callout-accent:var(--c-info);--callout-border:var(--c-info)}:where(.callout--success){--callout-accent:var(--c-success);--callout-border:var(--c-success)}:where(.callout--warning){--callout-accent:var(--c-warning);--callout-border:var(--c-warning)}:where(.callout--error){--callout-accent:var(--c-error);--callout-border:var(--c-error)}@custom-media --mq-sm (min-width: 640px);@custom-media --mq-md (min-width: 768px);@custom-media --mq-lg (min-width: 1024px);@custom-media --mq-xl (min-width: 1280px);@custom-media --mq-2xl (min-width: 1536px);}@layer css-starter.utilities{.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}.callout[hidden]{display:none}body{font-family:var(--ff-sans);color:var(--c-text);background:var(--c-bg);max-width:75rem;padding-inline:var(--sp-4,1.5rem);margin-inline:auto}.site-header{padding-block:var(--sp-6,3rem) var(--sp-4,1.5rem);border-bottom:1px solid var(--c-border)}.site-header__tag{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--c-primary);font-weight:var(--fw-semibold);margin:0}.site-header__title{font-size:var(--fs-2xl);margin:var(--sp-2,.5rem) 0}.site-header__desc{color:var(--c-text-secondary);margin:0}.site-main>section{padding-block:var(--sp-6,3rem)}.example__title{font-size:var(--fs-xl);margin:0 0 var(--sp-2,.5rem)}.example__desc{color:var(--c-text-secondary);margin:0 0 var(--sp-4,1.5rem);max-width:60ch}.example__pre{font-family:var(--ff-mono);font-size:var(--fs-sm);background:var(--c-bg-subtle);border:1px solid var(--c-border-light);border-radius:var(--br-md,8px);padding:var(--sp-3,1rem) var(--sp-4,1.5rem);margin:0 0 var(--sp-4,1.5rem);line-height:var(--lh-base);overflow-x:auto}.picker{margin-block-end:var(--sp-4,1.5rem)}.ex-meta{display:none}body:has(#ex-supports:checked) .ex-meta--supports,body:has(#ex-media:checked) .ex-meta--media,body:has(#ex-style:checked) .ex-meta--style,body:has(#ex-boolean:checked) .ex-meta--boolean,body:has(#ex-branches:checked) .ex-meta--branches,body:has(#ex-nested:checked) .ex-meta--nested{display:block}.preview{max-width:34rem;margin-block:var(--sp-4,1.5rem);padding:var(--sp-6,2rem);background-color:var(--c-bg-subtle);border:1px solid var(--c-border);border-radius:var(--radius-lg);color:var(--c-text)}.preview__eyebrow{margin:0 0 var(--sp-2,.5rem);font-size:var(--fs-sm);font-family:var(--ff-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--c-primary)}.preview__title{margin:0 0 var(--sp-2,.5rem);font-size:1.25em;line-height:var(--lh-tight)}.preview__body{margin:0 0 var(--sp-4,1rem);color:inherit;opacity:.8}.preview__chip{border-radius:var(--radius-full);background-color:var(--c-primary-subtle);color:var(--c-primary);font-family:var(--ff-mono);font-size:var(--fs-sm);padding:.2rem .6rem;display:inline-block}body:has(#ex-supports:checked) .preview{background-color:if(supports(color: oklch(60% .2 250)): color-mix(in oklch, var(--c-primary) 20%, var(--c-bg)); else: #cfd8e3;)}body:has(#ex-media:checked) .preview{font-size:if(media(width >= 60rem): 1.75rem; else: 1.15rem;)}body:has(#ex-style:checked){--density:compact}body:has(#ex-style:checked) .preview{padding:if(style(--density: compact): 1rem; else: 2.5rem;)}body:has(#ex-boolean:checked) .preview{border:if(media(width >= 48rem) and supports(color: oklch(60% .2 250)): 4px solid var(--c-primary); else: 1px solid var(--c-border);)}body:has(#ex-branches:checked){--mood:alert}body:has(#ex-branches:checked) .preview{color:if(style(--mood: calm): color-mix(in oklch, oklch(60% .15 200) 60%, var(--c-text)); style(--mood: alert): color-mix(in oklch, oklch(60% .2 25) 60%, var(--c-text)); else: var(--c-text);)}body:has(#ex-nested:checked){--elevation:high}body:has(#ex-nested:checked) .preview{box-shadow:if(style(--elevation: high): if(media(prefers-color-scheme: dark): 0 10px 30px #000000b3; else: 0 10px 30px #0000002e;); else: none;)}@supports not (background-color:if(else: yellow)){.preview{margin-inline:auto}}.site-footer{border-top:1px solid var(--c-border);margin-top:var(--sp-6,3rem);padding-block:var(--sp-5,2.5rem);color:var(--c-text-secondary);font-size:var(--fs-sm)}