@layer components{.nav-pagination{--nav-pagination-font-color: var(--text-color);--nav-pagination-bg-color: var(--bg-color);--nav-pagination-border-color: var(--border-color);--nav-pagination-current-font-color: var(--accent-text-color);--nav-pagination-current-bg-color: var(--accent-bg-color);--nav-pagination-hover-font-color: var(--accent-hover-text-color);--nav-pagination-hover-bg-color: var(--accent-hover-bg-color);--nav-pagination-disabled-alpha: .6;--nav-pagination-ellipsis-alpha: .7;--nav-pagination-gap: var(--space-xs);--nav-pagination-transition: var(--transition-base)}.nav-pagination>.current{--btn-font-color: var(--nav-pagination-current-font-color);--btn-bg-color: var(--nav-pagination-current-bg-color);pointer-events:none;cursor:default}.nav-pagination>.btn{--btn-font-color: var(--nav-pagination-font-color);--btn-bg-color: var(--nav-pagination-bg-color);--btn-hover-font-color: var(--nav-pagination-hover-font-color);--btn-hover-bg-color: var(--nav-pagination-hover-bg-color);border:1px solid rgb(var(--nav-pagination-border-color))}.nav-pagination>.ellipsis{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;padding:calc(var(--space-unit) * var(--btn-py-space)) calc(var(--space-unit) * var(--btn-px-space));color:rgb(var(--nav-pagination-font-color) / var(--nav-pagination-ellipsis-alpha))}.nav-pagination>.btn:disabled,.nav-pagination>.btn[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:var(--nav-pagination-disabled-alpha)}.nav-pagination>.btn:focus{z-index:1;outline:2px solid rgb(var(--accent-color));outline-offset:2px}.nav-pagination>.btn:hover:not([disabled]):not([aria-disabled=true]):not(.current){transform:translateY(-1px);box-shadow:0 2px 4px rgb(var(--shadow-color) / var(--shadow-alpha));transition:transform var(--nav-pagination-transition) ease,box-shadow var(--nav-pagination-transition) ease}@media(prefers-contrast:more){.nav-pagination>.btn{border-width:2px}.nav-pagination>.current{border:2px solid rgb(var(--nav-pagination-current-bg-color))}.nav-pagination>.btn:focus{outline-width:3px;outline-offset:3px}}@media(prefers-reduced-motion:reduce){.nav-pagination>.btn{transition:none}.nav-pagination>.btn:hover:not([disabled]):not([aria-disabled=true]):not(.current){transform:none;box-shadow:none}}@media(max-width:480px){.nav-pagination>.first,.nav-pagination>.last{display:none}.nav-pagination>.btn{--btn-px-space: var(--space-xs);--btn-py-space: var(--space-xxs);min-width:2.5rem}}}:root{--color-success-primary: 34 197 94;--color-success-dark: 22 163 74;--color-success-light: 240 253 244;--color-warning-primary: 249 115 22;--color-warning-dark: 234 88 12;--color-warning-light: 255 247 237;--color-info-primary: 59 130 246;--color-info-dark: 37 99 235;--color-info-light: 239 246 255}@layer utilities{.cs-success{--font-color: var(--color-white);--bg-color: var(--color-success-primary);--border-color: var(--color-success-dark);--shadow-color: var(--color-success-primary);--shadow-alpha: .1;--accent-color: var(--color-white);--accent-font-color: var(--color-success-primary);--accent-bg-color: var(--color-white);--accent-hover-font-color: var(--color-success-primary);--accent-hover-bg-color: var(--color-success-light);--selection-color: var(--color-success-primary);--selection-bg-color: var(--color-white)}.cs-warning{--font-color: var(--color-white);--bg-color: var(--color-warning-primary);--border-color: var(--color-warning-dark);--shadow-color: var(--color-warning-primary);--shadow-alpha: .1;--accent-color: var(--color-white);--accent-font-color: var(--color-warning-primary);--accent-bg-color: var(--color-white);--accent-hover-font-color: var(--color-warning-primary);--accent-hover-bg-color: var(--color-warning-light);--selection-color: var(--color-warning-primary);--selection-bg-color: var(--color-white)}.cs-info{--font-color: var(--color-white);--bg-color: var(--color-info-primary);--border-color: var(--color-info-dark);--shadow-color: var(--color-info-primary);--shadow-alpha: .1;--accent-color: var(--color-white);--accent-font-color: var(--color-info-primary);--accent-bg-color: var(--color-white);--accent-hover-font-color: var(--color-info-primary);--accent-hover-bg-color: var(--color-info-light);--selection-color: var(--color-info-primary);--selection-bg-color: var(--color-white)}}@layer components{#keyboard-pagination{transition:border-color var(--transition-base) ease,background-color var(--transition-base) ease}#keyboard-pagination:focus-within{border-color:rgb(var(--accent-color))!important;background-color:rgb(var(--accent-color) / 5%)!important;outline:none}.small{font-size:var(--font-size-sm, .875em);font-style:italic}section{scroll-margin-top:var(--space-lg)}pre{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:.875em;line-height:1.5}pre code{color:rgb(var(--font-color) / 90%)}.boundary-demo{padding:var(--space-sm);border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-base);background:rgb(var(--bg-color) / 2%)}.highlight-box{padding:var(--space-sm) var(--space-base);border-left:4px solid rgb(var(--accent-color));border-radius:0 var(--border-radius-base) var(--border-radius-base) 0;background:rgb(var(--accent-color) / 5%)}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:var(--space-md);gap:var(--space-md);align-items:start}.demo-grid>div{padding:var(--space-sm);border:1px solid rgb(var(--border-color) / 30%);border-radius:var(--border-radius-base);background:rgb(var(--bg-color) / 2%)}.console-indicator{position:relative}.console-indicator:after{content:"🔍 Check Console";position:absolute;top:-.5rem;right:0;font-size:.75rem;font-weight:500;color:rgb(var(--accent-color));opacity:.8}.accessibility-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:var(--space-md);gap:var(--space-md);margin-top:var(--space-base)}.accessibility-grid>div{padding:var(--space-sm);border:1px solid rgb(var(--border-color) / 20%);border-radius:var(--border-radius-base)}.accessibility-grid h5{margin-bottom:var(--space-xs);color:rgb(var(--accent-color))}.accessibility-grid ul{margin:0;padding-left:var(--space-base)}.accessibility-grid li{margin-bottom:var(--space-xxs)}.accessibility-grid code{padding:.1em .3em;border-radius:2px;font-size:.85em;background:rgb(var(--bg-color) / 10%)}@media(max-width:768px){.grid.cols{--grid-cols: 1}.flex.wrap{flex-direction:column}pre{font-size:.8em}.nav-pagination{overflow-x:auto;max-width:100%!important}}}