: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}.range-container{position:relative}.range-container input[type=range]{width:300px;margin:18px 0;-webkit-appearance:none}.range-container input[type=range]:focus{outline:none}.range-container input[type=range]::-webkit-slider-runnable-track{background:purple;border-radius:4px;width:100%;height:10px;cursor:pointer}.range-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:24px;width:24px;background:#fff;border-radius:50%;border:1px solid purple;margin-top:-7px;cursor:pointer}.range-container input[type=range]::-moz-range-track{background:purple;border-radius:4px;width:100%;height:13px;cursor:pointer}.range-container input[type=range]::-moz-range-thumb{appearance:none;height:24px;width:24px;background:#fff;border-radius:50%;border:1px solid purple;cursor:pointer}.range-container input[type=range]+label{background-color:#fff;position:absolute;top:-25px;left:110px;width:80px;padding:5px 0;text-align:center;border-radius:4px;box-shadow:0 0 5px rgba(0,0,0,.3)}.search-hidden__base{font-family:var(--text-font-family-regular);font-size:1.0625rem;line-height:1.4375rem;font-weight:400;letter-spacing:.03125rem}@media only screen and (min-width: 1280px){.search-hidden__base{font-size:1.1875rem;line-height:1.6875rem}}@media only screen and (min-width: 1920px){.search-hidden__base{font-size:1.25rem;line-height:1.75rem}}.search-hidden__base{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-inline:auto;padding:16px}.search-hidden__container{position:relative;height:50px}.search-hidden__container:hover{cursor:pointer}.search-hidden__input{outline:none}.search-hidden__btn{outline:none}.search-hidden__input{font-family:var(--text-font-family-regular);font-size:1.0625rem;line-height:1.4375rem;font-weight:400;letter-spacing:.03125rem}@media only screen and (min-width: 1280px){.search-hidden__input{font-size:1.1875rem;line-height:1.6875rem}}@media only screen and (min-width: 1920px){.search-hidden__input{font-size:1.25rem;line-height:1.75rem}}.search-hidden__input{background-color:#eee;border:0;padding:15px;height:50px;width:50px;transition:width .3s ease}.active .search-hidden__input{width:200px}.search-hidden__btn{position:absolute;top:0;left:0;display:flex;flex-direction:row;justify-content:center;align-items:center;background-color:#eee;border:0;cursor:pointer;height:50px;width:50px;transition:transform .3s ease}.active .search-hidden__btn{transform:translateX(198px)}.search-hidden__magnifying-icon{width:50%}.input__input{padding:16px;border-radius:3px;margin-bottom:16px;width:100%;border:1px solid #777}.input__input:focus{border-color:#7c7b9c;outline:0;box-shadow:0 .125rem .625rem rgba(0,0,0,.3)}.input__input.success{border-color:#198754}.input__input.error{border-color:#dc3545}.input__label{font-family:var(--text-font-family-regular);font-size:.9375rem;line-height:1.25rem;font-weight:400;letter-spacing:.03125rem}@media only screen and (min-width: 1280px){.input__label{font-size:1.0625rem;line-height:1.375rem}}.input__label{margin-bottom:8px;display:inline-block}