*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}*{font-family:sans-serif;max-inline-size:var(--measure, 60ch)}html,body,div,header,nav,main,footer,section,article,aside{max-inline-size:none}a,button{cursor:revert}ol,ul,menu{list-style:none}img{max-inline-size:100%;max-block-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert}::placeholder{color:unset}::marker{content:initial}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert}:root{--baseline: 0.5rem;--gutter: 1rem;--measure: 60ch;--font-size-xs: 0.875rem;--font-size-base: 1.125rem;--font-size-lg: 1.5rem;--font-size-xl: 2rem;--font-size-2xl: 2.25rem;--ss-5: calc(var(--ss-4) / 1.5);--ss-4: calc(var(--ss-3) / 1.5);--ss-3: calc(var(--ss-2) / 1.5);--ss-2: calc(var(--ss-1) / 1.5);--ss-1: calc(var(--ss0) / 1.5);--ss0: 1rem;--ss1: calc(var(--ss0) * 1.5);--ss2: calc(var(--ss1) * 1.5);--ss3: calc(var(--ss2) * 1.5);--ss4: calc(var(--ss3) * 1.5);--ss5: calc(var(--ss4) * 1.5);--rs-5: calc(var(--rs-4) / 1.5);--rs-4: calc(var(--rs-3) / 1.5);--rs-3: calc(var(--rs-2) / 1.5);--rs-2: calc(var(--rs-1) / 1.5);--rs-1: calc(var(--rs0) / 1.5);--rs0: 1rem;--rs1: calc(var(--rs0) * 1.5);--rs2: calc(var(--rs1) * 1.5);--rs3: calc(var(--rs2) * 1.5);--rs4: calc(var(--rs3) * 1.5);--rs5: calc(var(--rs4) * 1.5)}@media only screen and (min-width: 480px){:root{--rs-5: calc(var(--rs-4) / 1.65);--rs-4: calc(var(--rs-3) / 1.65);--rs-3: calc(var(--rs-2) / 1.65);--rs-2: calc(var(--rs-1) / 1.65);--rs-1: calc(var(--rs0) / 1.65);--rs0: 1rem;--rs1: calc(var(--rs0) * 1.65);--rs2: calc(var(--rs1) * 1.65);--rs3: calc(var(--rs2) * 1.65);--rs4: calc(var(--rs3) * 1.65);--rs5: calc(var(--rs4) * 1.65)}}@media only screen and (min-width: 960px){:root{--rs-5: calc(var(--rs-4) / 1.75);--rs-4: calc(var(--rs-3) / 1.75);--rs-3: calc(var(--rs-2) / 1.75);--rs-2: calc(var(--rs-1) / 1.75);--rs-1: calc(var(--rs0) / 1.75);--rs0: 1rem;--rs1: calc(var(--rs0) * 1.75);--rs2: calc(var(--rs1) * 1.75);--rs3: calc(var(--rs2) * 1.75);--rs4: calc(var(--rs3) * 1.75);--rs5: calc(var(--rs4) * 1.75)}}:root{--text-color: #1f1f1f;--text-selection-color: #eee;--text-selection-background-color: #1f1f1f;--muted-color: #4b5563;--accent-color: #a16207;--surface-color: #f5efe3;--surface-elevated: #fffdfa;--panel-background: rgba(255, 253, 250, 0.88);--panel-border: rgba(17, 24, 39, 0.1);--text-link-color: #494949;--text-link-color-hover: #444451;--brand-color: #e50050;--background-color-generic: #fff;--link-color: #1d4ed8;--link-hover-color: #0f172a;--selection-color: #f8fafc;--selection-background: #111827;--font-size-xs: 0.875rem;--font-size-base: 1rem;--font-size-lg: 1.5rem;--font-size-xl: 2rem;--font-size-2xl: 3.25rem;--text-font-family-regular: Open Sans, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, sans-serif;--text-font-family-code: Courier New, DejaVu Sans Mono, Bitstream Vera Sans Mono, Monaco, monospace}::selection{color:var(--selection-color);background:var(--selection-background)}h1{font-size:var(--font-size-2xl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}h4{font-size:var(--font-size-base)}h5{font-size:var(--font-size-xs)}:root{--page-background: #f8fafc;--page-text: #0f172a;--page-muted: #475569;--surface: rgba(255, 255, 255, 0.85);--surface-border: rgba(15, 23, 42, 0.08)}*{box-sizing:border-box}body.browser-detect-page,body.card-list-page,body.button-page,body.drag-n-drop-page,body.form-components-page,body.keyboard-keys-page,body.list-page,body.layouts-page,body.accordion-page,body.like-page,body.alert-page,body.loader-page,body.paint-page,body.pill-page,body.timer-page,body.toast-page,body.typography-page{margin:0;min-height:100vh;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;color:var(--page-text);background:radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 32%),linear-gradient(180deg, #fff, var(--page-background))}.page-shell{width:min(1100px,100% - 2rem);margin:0 auto;padding:3rem 0 4rem}.page-header{max-width:56rem;margin-bottom:2rem}.eyebrow,.demo-label{margin:0 0 .6rem;color:#1d4ed8;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}h1,h2,h3,p,span{margin:0}h1{font-size:clamp(2.4rem,5vw,4rem);line-height:.95}h2{font-size:1.45rem}.page-copy,.demo-copy{margin-top:.9rem;color:var(--page-muted);line-height:1.7}.demo-grid{display:grid;gap:1.25rem}.demo-card{display:grid;gap:1.2rem;padding:1.5rem;border:1px solid var(--surface-border);border-radius:1.25rem;background:var(--surface);box-shadow:0 20px 35px rgba(15,23,42,.08)}.demo-card--dark{background:linear-gradient(180deg, #111827, #0f172a);color:#fff}.demo-card--dark .demo-copy,.demo-card--dark .demo-label{color:rgba(241,245,249,.9)}.button-stage{display:flex;flex-wrap:wrap;gap:.75rem}.box{--box-color-light: #eee;--box-color-dark: #222;--box-padding: var(--ss1);--box-border: 2px solid var(--box-color-dark);padding:var(--box-padding);border:var(--box-border);color:var(--box-color-dark);background-color:var(--box-color-light);outline:.125rem solid rgba(0,0,0,0);outline-offset:-0.125rem}.box *{color:inherit}.box.invert{--box-border: 2px solid var(--box-color-light);color:var(--box-color-light);background-color:var(--box-color-dark)}[class^=stack]>*{margin-block:0}.stack{--stack-mt: 1rem;display:flex;flex-direction:column;justify-content:flex-start}.stack--successive>*+*{margin-block-start:var(--stack-mt)}.stack--recursive *+*{margin-block-start:var(--stack-mt)}.stack:only-child{block-size:100%}.with-sidebar{--sidebar-space: 1rem;--sidebar-width: 18rem;--sidebar-content-min: 50%;display:flex;flex-wrap:wrap;gap:var(--sidebar-space)}.with-sidebar>*{flex-grow:1;flex-basis:var(--sidebar-width)}.with-sidebar--left>:last-child,.with-sidebar--right>:first-child{flex-basis:0;flex-grow:999;min-inline-size:var(--sidebar-content-min)}.grid{--grid-col-min-width: 20ch;display:grid;grid-gap:1rem}@supports(width: min(var(--grid-col-min-width), 100%)){.grid{grid-template-columns:repeat(auto-fit, minmax(min(var(--grid-col-min-width), 100%), 1fr))}}.layout-sample{color:#334155}.layout-links{margin:0;padding-left:20px}.center{box-sizing:content-box;max-inline-size:var(--measure);margin-inline:auto;padding-inline-start:var(--ss1);padding-inline-end:var(--ss1)}.cluster{display:flex;flex-wrap:wrap;gap:var(--ss0, 1rem);justify-content:center;align-items:center}.cover{--space: var(--ss1);display:flex;flex-direction:column;min-block-size:100vh;padding:var(--space)}.cover>*{margin-block:var(--ss1)}.cover>:first-child:not(main){margin-block-start:0}.cover>:last-child:not(main){margin-block-end:0}.cover>main{margin-block:auto}.frame{--n: 16;--d: 9;aspect-ratio:var(--n)/var(--d);overflow:hidden;display:flex;justify-content:center;align-items:center}.frame>img,.frame>video{inline-size:100%;block-size:100%;object-fit:cover}.icon{height:.75em;height:1cap;width:.75em;width:1cap}.with-icon{display:inline-flex;align-items:baseline}.with-icon .icon{margin-inline-end:var(--space, 0.5em)}.holy-grail{display:grid;grid-template:auto 1fr auto/auto 1fr auto}.holy-grail__header{padding:2rem;grid-column:1/4}.holy-grail__left-side{grid-column:1/2}.holy-grail__main{grid-column:2/3}.holy-grail__right-side{grid-column:3/4}.imposter{position:var(--positioning, absolute);inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%, -50%)}.imposter.contain{--margin: 0px;overflow:auto;max-inline-size:calc(100% - var(--margin)*2);max-block-size:calc(100% - var(--margin)*2)}.reel{--space: 1rem;--color-light: #fff;--color-dark: #000;--reel-height: auto;--item-width: 50ch;display:flex;block-size:var(--reel-height);overflow-x:auto;overflow-y:hidden;scrollbar-color:var(--color-light) var(--color-dark)}.reel>*{flex:0 0 var(--item-width)}.reel>*+*{margin-inline-start:var(--space)}.reel.overflowing:not(.no-bar){padding-block-end:var(--space)}.reel.no-bar{scrollbar-width:none}.reel.no-bar::-webkit-scrollbar{display:none}.switcher{--switcher--threshold: 30rem;display:flex;flex-wrap:wrap;gap:var(--gutter, var(--ss1))}.switcher>*{flex-grow:1;flex-basis:calc((var(--switcher--threshold) - 100%)*999)}.switcher,.switcher>:nth-last-child(n+5),.switcher>:nth-last-child(n+5)~*{flex-basis:100%}