.contrast_container{flex-direction:column;gap:32px;width:100%;min-width:0;display:flex}.contrast_kicker{font-family:var(--font-ui);letter-spacing:1.5px;color:var(--primary);opacity:.75;font-size:.7rem;font-weight:700}.contrast_controls-header,.contrast_preview-heading,.contrast_values-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.contrast_controls-header h2,.contrast_preview-heading h2,.contrast_values-header h2{font-family:var(--font-display);margin:2px 0 0;font-size:1.3rem;line-height:1.3}.contrast_controls{flex-direction:column;gap:24px;display:flex}.contrast_colors{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.contrast_color-control{flex-direction:column;gap:8px;display:flex}.contrast_color-control label{font-size:.85rem;font-weight:600}.contrast_color-input{align-items:center;gap:8px;display:flex}.contrast_color-input input[type=color]{cursor:pointer;border:1px solid var(--border);background:0 0;border-radius:8px;width:48px;height:44px;padding:3px}.contrast_color-input input[type=text]{box-sizing:border-box;width:100%;min-width:0;height:44px;color:inherit;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:0 12px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.88rem}.contrast_ratio-section{justify-content:space-between;align-items:center;gap:32px;display:flex}.contrast_ratio-heading{flex:none}.contrast_ratio-heading h2{margin:4px 0 0;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:2.6rem;line-height:1}.contrast_ratio-heading h2 span{opacity:.5;font-size:1.2rem}.contrast_ratio-section p{opacity:.7;max-width:560px;margin:0;font-size:.9rem;line-height:1.6}.contrast_results{flex-direction:column;gap:14px;display:flex}.contrast_results-heading{flex-direction:column;gap:2px;display:flex}.contrast_results-heading h2{font-family:var(--font-display);margin:0;font-size:1.3rem}.contrast_result-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.contrast_result-card{flex-direction:column;gap:8px;display:flex}.contrast_result-card>div{justify-content:space-between;align-items:center;gap:8px;display:flex}.contrast_result-card strong{font-size:.88rem}.contrast_result-card span{border:1px solid var(--border);opacity:.7;border-radius:999px;padding:3px 7px;font-size:.68rem;font-weight:700}.contrast_result-card p{font-family:var(--font-display);margin:4px 0 0;font-size:1.2rem}.contrast_result-card small{opacity:.55;font-size:.75rem}.contrast_preview-panel{flex-direction:column;gap:16px;display:flex}.contrast_preview{box-sizing:border-box;border:1px solid var(--border);border-radius:12px;flex-direction:column;justify-content:center;gap:16px;width:100%;min-height:280px;padding:40px;display:flex}.contrast_preview-large{font-size:2rem;font-weight:700;line-height:1.2}.contrast_preview-normal{max-width:700px;font-size:1rem;line-height:1.7}.contrast_values{flex-direction:column;gap:16px;display:flex}.contrast_value-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.contrast_value-list button{width:100%;color:inherit;background:var(--surface);border:1px solid var(--border);cursor:pointer;text-align:left;border-radius:8px;align-items:center;gap:10px;padding:12px 14px;display:flex}.contrast_value-list button span{font-size:.82rem}.contrast_value-list button code{opacity:.75;margin-left:auto;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.8rem}.tool-info{flex-direction:column;gap:28px;width:100%;display:flex}@media (max-width:900px){.contrast_result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.contrast_container{gap:28px}.contrast_controls{gap:20px}.contrast_controls-header,.contrast_preview-heading,.contrast_values-header{align-items:flex-start}.contrast_controls-header h2,.contrast_preview-heading h2,.contrast_values-header h2{font-size:1.15rem}.contrast_colors{grid-template-columns:1fr}.contrast_ratio-section{flex-direction:column;align-items:flex-start;gap:16px}.contrast_ratio-heading h2{font-size:2.2rem}.contrast_result-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.contrast_preview{min-height:230px;padding:28px 20px}.contrast_preview-large{font-size:1.6rem}.contrast_preview-normal{font-size:.9rem}.contrast_value-list{grid-template-columns:1fr}.tool-info{gap:24px}}@media (max-width:380px){.contrast_container{gap:24px}.contrast_controls-header,.contrast_preview-heading,.contrast_values-header{flex-direction:column;align-items:stretch}.contrast_controls-header button,.contrast_preview-heading button{align-self:flex-start}.contrast_result-grid{grid-template-columns:1fr}.contrast_preview{min-height:200px;padding:22px 16px}.contrast_preview-large{font-size:1.4rem}.contrast_ratio-heading h2{font-size:2rem}}@media (prefers-reduced-motion:reduce){.contrast_container *,.contrast_container :before,.contrast_container :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}