.accessibility-page{min-height:100vh;background:#f9fafb}.contrast-container{max-width:1200px;margin:0 auto;padding:5rem 1rem 12rem;min-height:100vh}.page-header{text-align:center;margin-bottom:3rem;padding-top:4rem}.page-header h1{font-size:2.5rem;font-weight:800;color:#1f2937;margin-bottom:.5rem}.page-header p{font-size:1.125rem;color:#6b7280;max-width:600px;margin:0 auto}.contrast-layout{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}.settings-card,.preview-card{background:#fff;border:1px solid #e5e7eb;box-shadow:0 1px 3px #0000001a;height:540px;display:flex;flex-direction:column;overflow:hidden}.settings-card{border-radius:12px 0 0 12px;border-right:none}.preview-card{border-radius:0 12px 12px 0;border-left:none}.card-body{padding:1rem;flex:1;display:flex;flex-direction:column}.settings-row{display:flex;gap:1rem;margin-bottom:1rem;padding-bottom:1rem}.settings-row:nth-child(1){border-bottom:1px solid #f3f4f6}.settings-row:nth-child(2){border-bottom:none}.settings-row:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.color-input-group{flex:1}.color-input-group label{display:block;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.5rem}.color-input-field{display:flex;align-items:center;border:1px solid #e5e7eb;border-radius:8px;background:#fff;transition:all .2s ease;padding:.25rem;height:42px}.color-input-field:focus-within{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.color-picker{width:32px;height:32px;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;background:none;flex-shrink:0;overflow:hidden}.color-picker::-webkit-color-swatch-wrapper{padding:0;border-radius:6px;border:none;width:32px;height:32px;overflow:hidden}.color-picker::-webkit-color-swatch{border:1px solid rgba(0,0,0,.1);border-radius:6px;width:100%;height:100%;box-sizing:border-box}.color-picker::-moz-color-swatch{border:1px solid rgba(0,0,0,.1);border-radius:6px;width:32px;height:32px;box-sizing:border-box}.hex-input-field{border:none;background:none;padding:0;margin:0 .75rem;font-size:.875rem;font-weight:600;color:#1f2937;flex:1;text-align:left;outline:none;box-shadow:none;font-family:SF Mono,Monaco,Consolas,monospace;letter-spacing:.025em;appearance:none;-webkit-appearance:none;-moz-appearance:none}.hex-input-field:focus{outline:none;border:none;box-shadow:none;background:none}.hex-input-field:active{outline:none;border:none;box-shadow:none;background:none}.font-control-family{flex:2;min-width:200px}.font-control-size{flex:1.5;min-width:180px}.font-control-weight{flex:1;min-width:140px}.font-control-family label,.font-control-size label,.font-control-weight label{display:block;font-size:.75rem;font-weight:600;color:#6b7280;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.font-select{width:100%;padding:.75rem .875rem;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#1f2937;font-size:.875rem;font-weight:500;transition:all .2s ease;cursor:pointer}.font-select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.font-select optgroup{font-weight:600;color:#6b7280;background:#f8fafc;padding:.25rem 0;font-size:.75rem;text-transform:uppercase;letter-spacing:.025em}.font-select option{font-weight:400;color:#1f2937;padding:.25rem;font-size:.875rem;text-transform:none;letter-spacing:normal}.size-controls{display:flex;flex-direction:column;gap:.5rem}.size-input-wrapper{display:flex;align-items:center;border:1px solid #e5e7eb;border-radius:8px;background:#fff;padding:.125rem;transition:all .2s ease}.size-input-wrapper:focus-within{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.size-number-input{border:none;background:transparent;padding:.625rem .5rem;font-size:.875rem;font-weight:600;color:#1f2937;width:45px;text-align:right;outline:none;flex:1}.size-unit{font-size:.75rem;font-weight:500;color:#9ca3af;padding:0 .5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;min-width:20px}.size-range-input{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:#f1f5f9;border-radius:2px;outline:none;cursor:pointer;transition:all .2s ease}.size-range-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#6366f1;border-radius:50%;cursor:pointer;box-shadow:0 1px 3px #6366f14d;-webkit-transition:all .2s ease;transition:all .2s ease}.size-range-input::-webkit-slider-thumb:hover{background:#4f46e5;transform:scale(1.1);box-shadow:0 2px 6px #6366f166}.size-range-input::-moz-range-thumb{width:16px;height:16px;background:#6366f1;border:none;border-radius:50%;cursor:pointer;box-shadow:0 1px 3px #6366f14d;-moz-transition:all .2s ease;transition:all .2s ease}.size-range-input::-moz-range-thumb:hover{background:#4f46e5;transform:scale(1.1);box-shadow:0 2px 6px #6366f166}.weight-select{width:100%;padding:.75rem .875rem;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#1f2937;font-size:.875rem;font-weight:500;transition:all .2s ease;cursor:pointer}.weight-select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.control-group{flex:1}.control-group label{display:block;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.5rem}.results-row{align-items:flex-start;padding-top:.25rem;margin-top:-.5rem}.contrast-results-container{width:100%;background:#fafafa;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;height:240px;max-height:240px}.results-inner-grid{display:flex;flex-direction:column;height:100%}.score-box{background:#f8f9fa;border:none;border-radius:0;padding:1rem 1.25rem;transition:all .2s ease;border-bottom:1px solid #e5e7eb;flex-shrink:0;height:80px}.score-box.aaa{background:linear-gradient(90deg,#f0fdf4,#dcfce7)}.score-box.aa{background:linear-gradient(90deg,#eff6ff,#dbeafe)}.score-box.aa-large{background:linear-gradient(90deg,#fffbeb,#fef3c7)}.score-box.fail{background:linear-gradient(90deg,#fef2f2,#fee2e2)}.score-content{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.score-left{display:flex;align-items:baseline;gap:.1rem}.score-value{font-size:1.75rem;font-weight:800;color:#1f2937;line-height:1}.score-colon{font-size:1.25rem;font-weight:400;color:#6b7280;line-height:1}.score-one{font-size:1rem;font-weight:600;color:#6b7280;line-height:1}.score-right{display:flex;flex-direction:column;align-items:flex-end;gap:.125rem}.grade-indicator{display:flex;align-items:center;gap:.25rem;padding:.125rem .375rem;border-radius:6px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.025em}.grade-indicator.grade-aaa{background:#22c55e33;color:#15803d}.grade-indicator.grade-aa{background:#3b82f633;color:#1d4ed8}.grade-indicator.grade-aa-large{background:#fbbf2433;color:#d97706}.grade-indicator.grade-fail{background:#ef444433;color:#dc2626}.score-subtitle{font-size:.55rem;font-weight:500;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em}.wcag-boxes{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:0;flex:1;height:160px}.wcag-box{background:#fff;border:none;border-radius:0;padding:1rem;transition:all .2s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;height:80px}.wcag-box:nth-child(1),.wcag-box:nth-child(2){border-bottom:1px solid #e5e7eb}.wcag-box:nth-child(odd){border-right:1px solid #e5e7eb}.wcag-box:before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;transition:all .2s ease}.wcag-box.pass{background:#f0fdf480}.wcag-box.pass:before{background:#22c55e}.wcag-box.fail{background:#fef2f280}.wcag-box.fail:before{background:#ef4444}.wcag-box-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;width:100%}.wcag-level{font-size:.875rem;font-weight:800;color:#1f2937;background:#6366f114;padding:.25rem .5rem;border-radius:4px;line-height:1.2;flex-shrink:0}.wcag-icon{display:flex;align-items:center;flex-shrink:0}.wcag-icon svg{width:18px;height:18px}.wcag-box.pass .wcag-icon{color:#22c55e}.wcag-box.fail .wcag-icon{color:#ef4444}.wcag-box-body{display:flex;flex-direction:column;gap:.25rem;width:100%}.wcag-text-type{font-size:.875rem;font-weight:600;color:#374151;line-height:1.2;margin-bottom:.25rem}.wcag-min-ratio{font-size:.75rem;font-weight:500;color:#9ca3af;font-family:Monaco,Consolas,monospace;line-height:1.2}.results-summary{flex:1}.wcag-blog-section{margin-top:4rem;display:flex;justify-content:center}.blog-simple-button{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 1.5rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;text-decoration:none;font-size:.95rem;font-weight:600;border-radius:12px;transition:all .3s ease;border:none;cursor:pointer;box-shadow:0 4px 14px #6366f14d;letter-spacing:-.01em}.blog-simple-button:hover{background:linear-gradient(135deg,#4f46e5,#7c3aed);transform:translateY(-1px);box-shadow:0 6px 20px #6366f166}.blog-arrow{transition:transform .3s ease;flex-shrink:0}.blog-simple-button:hover .blog-arrow{transform:translate(2px)}.contrast-output{position:relative}.preview-controls-top{position:absolute;top:-50px;left:0;right:0;z-index:10;pointer-events:none;padding:0 1rem}.preview-controls-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;pointer-events:auto}.love-gradient-btn{width:36px;height:36px;border:1px solid rgba(0,0,0,.1);border-radius:8px;background:#fffffff2;color:#666;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 8px #0000001a}.love-gradient-btn:hover{background:#fff;border-color:#00000026;color:#ff6b35;transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.love-gradient-btn.saved{background:#ff6b351a;border-color:#ff6b35;color:#ff6b35}.love-gradient-btn.saved:hover{background:#ff6b3533}.actions-menu{position:relative}.actions-menu-toggle{width:36px;height:36px;border:1px solid rgba(0,0,0,.1);border-radius:8px;background:#fffffff2;color:#666;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 8px #0000001a}.actions-menu-toggle:hover{background:#fff;border-color:#00000026;color:#333;transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.actions-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;box-shadow:0 8px 32px #00000026;padding:8px;min-width:180px;z-index:20;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.dropdown-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:none;background:transparent;color:#374151;font-size:14px;font-weight:500;width:100%;text-align:left;cursor:pointer;border-radius:6px;transition:all .2s ease}.dropdown-item:hover{background:#6366f10f;color:#6366f1}.dropdown-item:active{transform:scale(.98)}.export-dropdown-container{position:absolute;top:calc(100% + 8px);right:0;z-index:100}.preview-card{position:relative}.fullscreen-toggle{position:absolute;top:1rem;right:1rem;z-index:2;background:#ffffffe6;border:1px solid rgba(0,0,0,.1);border-radius:8px;padding:.75rem;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#6b7280}.fullscreen-toggle:hover{background:#fffffff2;border-color:#0003;transform:scale(1.05);color:#374151}.setting-select{width:100%;padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#1f2937;font-size:.875rem;transition:all .2s ease}.setting-select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.setting-range{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background:#e5e7eb;border-radius:3px;outline:none}.setting-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#6366f1;border-radius:50%;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease}.setting-range::-webkit-slider-thumb:hover{background:#4f46e5;transform:scale(1.1)}.setting-range::-moz-range-thumb{width:20px;height:20px;background:#6366f1;border-radius:50%;border:none;cursor:pointer;-moz-transition:all .2s ease;transition:all .2s ease}.setting-range::-moz-range-thumb:hover{background:#4f46e5;transform:scale(1.1)}.sample-text-input{width:100%;padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#1f2937;font-size:.875rem;resize:vertical;transition:all .2s ease}.sample-text-input.compact,.setting-select.compact{padding:.5rem .75rem;font-size:.8rem}.sample-text-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.copy-button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;background:#10b981;border:1px solid #10b981;border-radius:8px;color:#fff;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.copy-button:hover{background:#059669;border-color:#059669}.copy-button.success{background:#22c55e;border-color:#22c55e}.contrast-preview-full{width:100%;height:100%;border-radius:0 12px 12px 0;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem;transition:all .3s ease;line-height:1.6;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.fullscreen-modal{position:fixed;inset:0;z-index:1000}.fullscreen-overlay{position:absolute;inset:0;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.fullscreen-content{position:relative;width:100vw;height:100vh;border-radius:0;overflow:hidden}.fullscreen-preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:4rem;transition:all .3s ease;line-height:1.6;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;font-size:clamp(1.5rem,4vw,3rem)}.fullscreen-close{position:absolute;top:1.5rem;right:1.5rem;z-index:10;background:#ffffffe6;border:1px solid rgba(0,0,0,.1);border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#6b7280}.fullscreen-close:hover{background:#fffffff2;border-color:#0003;transform:scale(1.1);color:#374151}.ratio-display{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem}.ratio-number{font-size:1.5rem;font-weight:700;color:#1f2937}.grade-badge{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;font-size:.875rem;font-weight:600;text-transform:uppercase}.compliance-results{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.compliance-item{display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;transition:all .2s ease}.compliance-item.pass{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}.compliance-item.fail{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}@media (max-width: 768px){.contrast-layout{grid-template-columns:1fr;gap:1.5rem}.contrast-container{padding:4rem 1rem 3rem}.page-header h1{font-size:2rem}.settings-card,.preview-card{height:auto;min-height:400px}.settings-card{border-radius:12px 12px 0 0;border-right:1px solid #e5e7eb;border-bottom:none}.preview-card{border-radius:0 0 12px 12px;border-left:1px solid #e5e7eb;border-top:none}.contrast-preview-full{border-radius:0 0 12px 12px}.settings-row{flex-direction:column;gap:1rem;margin-bottom:1rem;padding-bottom:1rem}.font-control-family,.font-control-size,.font-control-weight{flex:1;min-width:unset}.size-controls{gap:.75rem}.size-input-wrapper{justify-content:center}.color-input-field{padding:.2rem;height:38px}.color-picker{width:28px;height:28px}.hex-input-field{padding:0;margin:0 .5rem}.results-row{align-items:stretch}.contrast-results-container{padding:.5rem}.score-box{padding:.5rem .625rem}.score-content{flex-direction:column;align-items:center;gap:.375rem}.score-value{font-size:1.25rem}.score-right{align-items:center}.wcag-boxes{grid-template-columns:1fr 1fr;padding-top:.375rem}.wcag-box{padding:.5rem;height:60px}.wcag-text-type{font-size:.7rem;margin-bottom:.2rem}.wcag-min-ratio{font-size:.6rem}.wcag-level{font-size:.7rem;padding:.15rem .3rem}.wcag-blog-section{margin-top:3rem}.blog-link-card{padding:1.5rem}.blog-title{font-size:1.125rem}.blog-description{font-size:.875rem}.blog-link-button{padding:.75rem 1.25rem;font-size:.875rem}}@media (max-width: 480px){.settings-card,.preview-card{height:auto;min-height:300px}.ratio-display{flex-direction:column;gap:.75rem}.ratio-number{font-size:1.25rem}.card-body{padding:.75rem}.wcag-blog-section{margin-top:2.5rem;padding:0 1rem}.blog-link-card{padding:1.25rem}.blog-title{font-size:1rem}.blog-description{font-size:.8rem}.blog-link-button{padding:.625rem 1rem;font-size:.8rem}}.setting-select:focus,.setting-range:focus,.color-picker:focus,.hex-input-field:focus,.copy-button:focus,.fullscreen-toggle:focus,.fullscreen-close:focus{outline:2px solid #6366f1;outline-offset:2px}.contrast-preview-full{transition:background-color .3s ease,color .3s ease}