.readability-container{display:grid;grid-template-columns:1fr;gap:2rem;max-width:1200px;margin:0 auto;padding:1.5rem}@media(min-width:1024px){.readability-container{grid-template-columns:1fr 1fr}}.glass-card{background:#ffffffb3;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.4);border-radius:1.5rem;padding:2.5rem;display:flex;flex-direction:column;gap:2rem;box-shadow:0 4px 6px -1px #0000000d,0 10px 15px -3px #0000000d,inset 0 0 0 1px #ffffff80}.dark .glass-card{background:#0f172a99;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 25px -5px #0003}.control-section{display:flex;flex-direction:column;gap:2rem}.group-title{font-size:.75rem;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.group-title i{font-size:1.1rem;color:#0ea5e9}.inputs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.input-wrapper{display:flex;flex-direction:column;gap:.75rem}.label-mini{font-size:.875rem;font-weight:600;color:#1e293b}.dark .label-mini{color:#f1f5f9}.color-input-container{display:flex;align-items:center;gap:.75rem;background:#ffffff80;border:1px solid #e2e8f0;padding:.5rem;border-radius:.75rem;transition:all .2s ease}.dark .color-input-container{background:#1e293b80;border-color:#334155}.color-picker{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:2.5rem;height:2.5rem;border:none;border-radius:.5rem;cursor:pointer;background:none}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:1px solid rgba(0,0,0,.1);border-radius:.4rem}.dark .color-picker::-webkit-color-swatch{border:1px solid rgba(255,255,255,.2)}.hex-text{font-size:.875rem;font-weight:600;color:#475569;flex:1}.dark .hex-text{color:#94a3b8}.sliders-stack{display:flex;flex-direction:column;gap:1.5rem}.slider-group{display:flex;flex-direction:column;gap:.75rem}.slider-header{display:flex;justify-content:space-between;align-items:center}.slider-value{background:#0ea5e9;color:#fff;font-size:.75rem;font-weight:700;padding:.15rem .5rem;border-radius:1rem}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:#e2e8f0;border-radius:3px;outline:none}.dark input[type=range]{background:#334155}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:#0ea5e9;border-radius:50%;cursor:pointer;box-shadow:0 0 0 4px #0ea5e91a;transition:all .2s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 0 6px #0ea5e933}.comparison-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.score-card{padding:1.25rem;border-radius:1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;background:#fff6;border:1px solid rgba(0,0,0,.05)}.dark .score-card{background:#ffffff08;border-color:#ffffff0d}.score-label{font-size:.65rem;font-weight:800;text-transform:uppercase;color:#64748b}.score-value{font-size:1.5rem;font-weight:800}.score-status{font-size:.75rem;font-weight:700;padding:.2rem .6rem;border-radius:.5rem;text-transform:uppercase}.status-pass{background:#dcfce7;color:#166534}.status-fail{background:#fee2e2;color:#991b1b}.preview-container{flex:1;display:flex;flex-direction:column;gap:1.5rem}.main-preview-box{padding:2.5rem;border-radius:1.25rem;transition:all .3s ease;border:1px solid rgba(0,0,0,.05);min-height:200px;display:flex;flex-direction:column;justify-content:center}.preview-text-main{line-height:1.5;margin-bottom:1.5rem}.preview-grid-small{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.preview-sub-box{display:flex;flex-direction:column;gap:.5rem}.sub-label{font-size:.65rem;font-weight:700;color:#64748b;text-transform:uppercase}.apca-breakdown{background:#0ea5e90d;padding:1.5rem;border-radius:1rem;border:1px solid rgba(14,165,233,.1)}.breakdown-list{display:flex;flex-direction:column;gap:.75rem}.breakdown-item{display:flex;justify-content:space-between;font-size:.875rem}.item-label{color:#475569;font-weight:600}.dark .item-label{color:#94a3b8}.item-check{font-weight:700;display:flex;align-items:center;gap:.4rem}.check-yes{color:#10b981}.check-no{color:#ef4444}.educational-footer{grid-column:1 / -1;padding:2rem;background:linear-gradient(135deg,#0ea5e9,#2563eb);border-radius:1.5rem;color:#fff;display:flex;flex-direction:column;gap:1rem}.edu-title{font-size:1.25rem;font-weight:800;display:flex;align-items:center;gap:.75rem}.edu-text{font-size:.95rem;line-height:1.6;opacity:.9}
