body,html{margin:0;padding:0}label{font-weight:400;font-family:monospace!important;text-transform:uppercase;letter-spacing:.15em;font-size:10px!important}select{color:currentColor;background:transparent;borderColor:currentColor}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}:root{--header-bg: #f5f5f5;--border-color: rgba(0,0,0,.1);--text-color: #000;--bg-color: #fff;--primary-color: #000;--hover-color: #2563eb}@media (prefers-color-scheme: dark){:root{--header-bg: #f5f5f5;--border-color: rgba(0,0,0,.1);--text-color: #fff;--bg-color: #000;--primary-color: #000;--hover-color: #2563eb}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5;color:var(--text-color)}.app-container{width:100%;transition:background-color .3s ease,color .3s ease;min-height:100dvh}.filters{display:flex;gap:1.5rem;align-items:center}.filter-group{display:flex;align-items:center;gap:.5rem}label{font-weight:500}select,input{padding:.5rem;border:1px solid var(--border-color);border-radius:4px;font-size:1rem}select:focus,input:focus{outline:2px solid var(--primary-color);border-color:var(--primary-color)}.threshold-description{font-size:.875rem;color:#666;width:50px}.results-summary{margin-bottom:1rem;font-size:.75rem;color:var(--bg-color);background-color:var(--text-color);padding:.5rem 1rem}.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:4px;margin-top:1rem}.badge-container{display:flex;flex-direction:column;border:1px solid var(--border-color);border-radius:6px;overflow:hidden;transition:transform .2s ease-in-out}.badge-container:hover{transform:translateY(-3px);box-shadow:0 4px 6px #0000001a}.badge{font-weight:600;text-align:center;border-radius:4px;height:100px;display:flex;align-items:center;justify-content:center;font-size:10}.badge-info{padding:.75rem;background-color:#fff;font-size:.875rem;border-top:1px solid var(--border-color)}.contrast-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}.compliance-level{font-weight:600;font-size:.75rem;padding:.125rem .375rem;border-radius:4px;background-color:#f0f0f0}.compliance-level.aaa{background-color:#d1fae5;color:#047857}.compliance-level.aa{background-color:#e0f2fe;color:#0369a1}.compliance-level.a{background-color:#fef3c7;color:#b45309}.compliance-level.fail{background-color:#fee2e2;color:#b91c1c}.hue-info{display:flex;justify-content:space-between;font-size:.75rem;margin-bottom:.5rem;color:#666}.color-codes{margin-top:.5rem;display:flex;flex-direction:column;gap:.25rem;font-family:monospace;font-size:.75rem;color:#666}.load-more{display:block;margin:2rem auto;padding:.75rem 1.5rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s}.load-more:hover{background-color:var(--hover-color)}.loading{text-align:center;padding:2rem;font-size:1rem;color:#666;background-color:#f8f8f8;border-radius:6px;margin-top:1rem}.no-results{grid-column:1 / -1;text-align:center;padding:2rem;background-color:#f8f8f8;border-radius:6px;color:#666}.badge-filter{display:flex;flex-wrap:wrap;padding:1rem;border:1px solid var(--border-color)}.hue-options{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center}.hue-options button{padding:.25rem .5rem;background-color:#fff;border-radius:9999px;font-size:10px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;font-weight:600;border:0;box-shadow:inset 0 0 0 1px #0000001a}.hue-options button:hover{background-color:#f0f0f0}.hue-options button.active{background-color:var(--primary-color);color:#fff;border-color:none;box-shadow:inset 0 0 0 1px #0003}.content-layout{display:grid;grid-template-columns:1fr 240px;gap:2rem}@media (max-width: 1024px){.content-layout{grid-template-columns:1fr}}.compact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,96px));height:fit-content;overflow-y:auto;gap:16px}.badge-wrapper{cursor:pointer;transition:transform .15s ease-in-out;overflow:hidden}.badge-wrapper:hover{transform:scale(1.05);z-index:1;box-shadow:0 2px 6px #0000001a}.badge-wrapper.selected{outline:3px solid var(--primary-color);transform:scale(1.05);z-index:2}.badge-compact{font-size:8px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;text-align:center;overflow:hidden;padding:4px 8px;white-space:nowrap;border-radius:6px}.detail-panel{background-color:#fff;border-radius:8px;border:1px solid var(--border-color);padding:1.5rem;position:sticky;top:5rem}.detail-panel h3{margin-bottom:1rem;font-size:1.25rem;color:#333}.detail-panel h4{margin:1.5rem 0 .75rem;font-size:1rem;color:#555}.color-detail{margin-top:1.5rem}.ui-samples{border-radius:6px;padding:1.5rem;margin-top:.5rem}.sample-element{padding:1rem}.sample-element h5{margin-bottom:.75rem;font-size:1.125rem}.sample-element p{margin-bottom:1rem;font-size:.875rem}.sample-button{padding:.5rem 1rem;border-radius:4px;font-weight:500;font-size:.875rem;border:1px solid currentColor;background-color:transparent;cursor:pointer}.no-selection{display:flex;height:300px;align-items:center;justify-content:center;color:#666;text-align:center;font-style:italic;background-color:#f8f8f8;border-radius:6px}.threshold-group{flex-grow:2}.threshold-options{display:flex;gap:.5rem;align-items:center}.radio-label{display:flex;align-items:center;gap:.25rem;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:4px;transition:background-color .2s;font-family:monospace}.radio-label:hover{background-color:#f0f0f0}.radio-label input[type=radio]{margin:0;cursor:pointer}.radio-label span{font-size:.75rem;font-weight:500}@media (max-width: 900px){.site-header{flex-direction:column;align-items:flex-start;padding-bottom:1rem}.logo{margin-bottom:1rem}.filters{width:100%;flex-direction:column;gap:1rem}.filter-group{width:100%}.threshold-options{flex-wrap:wrap}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;overflow-y:auto;padding:16px}.modal-content{background-color:#fff;border-radius:8px;max-width:90vw;width:92%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 5px 20px #0003;overflow:hidden;padding:0}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);padding:0}.modal-header h2{margin:0;font-size:1.5rem}.close-button{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#666;padding:.25rem .5rem;border-radius:4px;line-height:1}.close-button:hover{background-color:#f0f0f0;color:#333}.modal-body{padding:1rem;overflow-y:auto;max-height:calc(90vh - 70px)}.color-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.5rem}.color-chip{padding:8px;border-radius:6px;display:flex;flex-direction:column;justify-content:space-between;font-family:monospace;box-shadow:0 2px 4px #0000001a;transition:transform .2s;overflow:hidden;white-space:nowrap}.color-chip:hover{transform:scale(1.02);box-shadow:0 4px 8px #00000026;position:relative;width:100%;overflow:visible!important;z-index:999}.color-index{font-size:12px;font-weight:400}.color-value{font-size:.75rem;word-break:break-all}.view-palette-button{position:fixed;bottom:20px;right:20px;padding:.75rem 1.25rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:30px;font-weight:600;cursor:pointer;box-shadow:0 4px 8px #00000026;transition:all .2s;z-index:100;display:flex;align-items:center;gap:.5rem}.view-palette-button:hover{background-color:var(--hover-color);transform:translateY(-2px);box-shadow:0 6px 12px #0003}.bg-hue-sections{display:flex;flex-direction:column;gap:2rem;width:100%}.bg-hue-section{width:100%}.bg-hue-title{text-transform:capitalize;font-size:1.2rem;color:#333;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.avatar{display:flex;align-items:center;justify-content:center;border-radius:9999px;font-weight:600;-webkit-user-select:none;user-select:none;transition:transform .2s,box-shadow .2s}.avatar:hover{transform:scale(1.05)}.avatar-sm{width:32px;height:32px;font-size:12px}.avatar-md{width:48px;height:48px;font-size:16px}.avatar-lg{width:64px;height:64px;font-size:20px}.avatar-xl{width:96px;height:96px;font-size:32px}.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:16px;margin-top:16px}.avatar-section{margin-top:1.5rem;margin-bottom:1.5rem}.avatar-section h4{margin:1.5rem 0 .75rem;font-size:1rem;color:#555}.avatar-sizes{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:24px}.avatar-item{display:flex;flex-direction:column;align-items:center;gap:8px}.avatar-item span{font-size:12px;color:#666}.filter-controls{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.component-type-filter{display:flex;gap:.5rem;justify-content:center}.component-type-filter label{font-weight:600;color:#555}.component-options{display:flex;flex-wrap:wrap;gap:.5rem}.component-options button{padding:4px 8px;background-color:#fff;border:1px solid #ddd;border-radius:9999px;font-size:10px;text-transform:uppercase;cursor:pointer;transition:all .2s ease}.component-options button:hover{background-color:#f0f0f0}.component-options button.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.ui-components-grid{display:flex;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:4px;flex-wrap:wrap}.ui-component-wrapper{cursor:pointer;transition:transform .15s ease-in-out;overflow:hidden}.ui-component-wrapper:hover{transform:scale(1.05);z-index:1;box-shadow:0 2px 6px #0000001a}.ui-component-wrapper.selected{outline:3px solid var(--primary-color);transform:scale(1.05);z-index:2}.ui-component-item{display:flex;flex-direction:column;align-items:center;gap:4px}.selected-components{display:flex;align-items:center;gap:16px;margin:1rem 0}.color-info{margin:1rem 0;background-color:#f8f8f8;padding:1rem;border-radius:6px;font-size:.875rem;line-height:1.6}.palette-group{margin-left:1rem}.palette-options select{padding:.4rem .6rem;border-radius:4px;border:1px solid #ccc;font-size:.75rem;background-color:#fff}.palette-options select:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e233}.theme-preview-container{width:100%;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a;margin-bottom:1.5rem}.theme-preview-tabs{display:flex;border-bottom:1px solid rgba(0,0,0,.1)}.theme-tab{padding:.75rem 1.25rem;border:none;background:transparent;cursor:pointer;font-weight:500;transition:all .2s ease;flex:1;text-align:center}.theme-tab.active{font-weight:600}.theme-preview-content{padding:1.5rem;min-height:300px}.card-preview{display:flex;flex-direction:column;height:100%}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.card-header h3{margin:0;font-size:1.25rem}.card-badge{padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600}.card-body{flex:1}.card-actions{display:flex;gap:.75rem;margin-top:1.5rem}.primary-button,.secondary-button{padding:.5rem 1rem;border-radius:4px;font-weight:500;cursor:pointer;border:none;transition:opacity .2s}.secondary-button{background-color:transparent;border:1px solid}.primary-button:hover,.secondary-button:hover{opacity:.9}.form-preview{display:flex;flex-direction:column;gap:1rem}.form-field{display:flex;flex-direction:column;gap:.35rem}.form-field label{font-weight:500;font-size:.9rem}.form-field input,.form-field textarea{padding:.75rem;border-radius:4px;border:1px solid;font-family:inherit;font-size:.9rem}.form-field textarea{min-height:100px;resize:vertical}.form-actions{margin-top:.5rem}.form-actions button{padding:.5rem 1rem;border-radius:4px;font-weight:500;cursor:pointer;border:none}.article-preview{max-width:38rem;margin:0 auto}.article-preview h2{font-size:1.75rem;margin-top:0;margin-bottom:.5rem}.article-meta{font-size:.85rem;opacity:.8;margin-bottom:1.5rem}.article-preview h3{font-size:1.35rem;margin:1.5rem 0 .75rem}.article-preview p{line-height:1.6;margin-bottom:1rem}.article-preview blockquote{border-left:4px solid;margin:1.5rem 0;padding:.5rem 0 .5rem 1.5rem;font-style:italic}.color-code-export{background-color:#f8f9fa;border-radius:8px;padding:1.5rem;margin-top:1.5rem}.format-selector{margin-bottom:1rem}.format-selector label{display:block;margin-bottom:.5rem;font-weight:500}.format-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.format-button{padding:.5rem .75rem;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer;font-size:.9rem;transition:all .2s ease}.format-button.active{background-color:#4a90e2;color:#fff;border-color:#4a90e2}.code-preview{background-color:#282c34;border-radius:4px;padding:1rem;margin-bottom:1rem;overflow-x:auto}.code-preview pre{margin:0}.code-preview code{color:#e6e6e6;font-family:Consolas,Monaco,Andale Mono,monospace;font-size:.9rem;line-height:1.5;white-space:pre}.copy-button{padding:.5rem 1rem;background-color:#4a90e2;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s}.copy-button:hover{background-color:#3a7bc8}.contrast-meter{margin:1.5rem 0;padding:1rem;border-radius:8px;background-color:#f8f9fa}.contrast-meter-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.contrast-rating{font-weight:600;font-size:1.1rem}.meter-container{height:12px;background-color:#e9ecef;border-radius:6px;position:relative;overflow:hidden;margin-bottom:1.5rem}.meter-fill{height:100%;border-radius:6px;transition:width .3s ease}.threshold-marker{position:absolute;top:0;height:100%}.marker-line{position:absolute;height:100%;width:2px;background-color:#0003}.marker-label{position:absolute;top:16px;transform:translate(-50%);font-size:.75rem;color:#666}.contrast-legend{display:flex;justify-content:space-between;margin-top:1.5rem}.legend-item{font-size:.8rem;padding:.25rem .5rem;border-radius:4px}.legend-item.fail{background-color:#fee2e2;color:#b91c1c}.legend-item.a,.legend-item.minimal{background-color:#fef3c7;color:#92400e}.legend-item.aa,.legend-item.good{background-color:#d1fae5;color:#065f46}.legend-item.aaa,.legend-item.excellent{background-color:#a7f3d0;color:#047857}.background-switcher{position:fixed;bottom:20px;left:20px;z-index:100;display:flex;flex-direction:column;align-items:flex-start;gap:8px}.bg-switcher-button{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:30px;border:1px solid;cursor:pointer;font-weight:500;font-size:.9rem;box-shadow:0 2px 10px #00000026;transition:transform .2s ease}.bg-switcher-button:hover{transform:translateY(-2px)}.switcher-icon{font-size:1.2rem}.background-mode-indicator{display:flex;gap:6px;padding:4px 8px;border-radius:20px;background-color:#fffc;box-shadow:0 2px 8px #0000001a}.mode-dot{width:16px;height:16px;border-radius:9999px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 0 0 1px #0000001a,inset 0 0 0 1px #fff}.mode-dot:hover{transform:scale(1.2)}.mode-dot.active{box-shadow:0 0 0 2px #4a90e2}.dark-mode .site-header,.dark-mode .filter-controls,.dark-mode .bg-hue-section{border-color:#ffffff1a}.dark-mode .bg-hue-title,.dark-mode .results-summary,.dark-mode .badge-filter-group label,.dark-mode .component-type-filter label,.dark-mode .filter-group label{color:#ffffffe6}.border-controls{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.border-toggle-label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;cursor:pointer}.border-toggle-label input[type=checkbox]{cursor:pointer}.border-level-options{display:flex;gap:1rem;margin-left:1.5rem}.background-variation-controls{background-color:#f8f9fa;border-radius:8px;padding:1.5rem;margin-top:1.5rem}.background-variation-controls h3{margin-top:0;margin-bottom:1rem;font-size:1.25rem}.control-section{margin-bottom:1.25rem}.control-section h4{font-size:1rem;margin-top:0;margin-bottom:.5rem;font-weight:500}.control-options{display:flex;flex-wrap:wrap;gap:.75rem}.direction-options{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;max-width:200px}.toggle-label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.hue-shift-slider{width:100%;max-width:300px;margin-top:.5rem;accent-color:#4a90e2}.gradient-preview{width:100%;height:40px;border-radius:4px;margin-top:.5rem;margin-bottom:1rem}.dark-mode .background-variation-controls{background-color:#1a1a1a;color:#ffffffe6}.dark-mode .control-section h4{color:#ffffffe6}