.contrast-layout{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);gap:1rem;align-items:start}.contrast-controls,.contrast-results,.accessible-suggestion,.css-output-card{padding:1.2rem}.contrast-controls{display:grid;gap:1rem}.color-control{display:grid;gap:.45rem}.color-input-row{display:grid;grid-template-columns:3.4rem 1fr;gap:.65rem}.color-input-row input[type="color"]{height:3rem;padding:.2rem;cursor:pointer}.color-input-row input[type="text"]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;text-transform:uppercase}.swap-colors{justify-self:start}.ratio-panel{display:grid;gap:.2rem;padding:1rem;border:1px solid var(--border);border-radius:1rem;background:var(--soft)}.ratio-panel span,.ratio-panel p{color:var(--muted);margin:0}.ratio-panel strong{font-size:clamp(2.3rem,6vw,4.3rem);line-height:1;letter-spacing:-.06em}.contrast-preview{margin:1rem 0;padding:1.25rem;border-radius:1rem;border:1px solid rgba(127,127,127,.35);transition:color .15s,background .15s}.contrast-preview p{margin:.2rem 0}.preview-normal{font-size:1rem}.preview-large{font-size:1.6rem;font-weight:800}.contrast-preview button{margin-top:.7rem;border:2px solid currentColor;border-radius:.6rem;padding:.55rem .8rem;color:inherit;background:transparent;font-weight:800}.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.result-grid article{display:grid;gap:.15rem;padding:.8rem;border:1px solid var(--border);border-radius:.8rem;background:#fff}.result-grid article strong{font-size:1.1rem}.result-grid article small,.result-grid article span{color:var(--muted)}.result-grid article.pass{border-color:#8bd8bb;background:#effcf6}.result-grid article.pass strong{color:var(--success)}.result-grid article.fail{border-color:#ffc9c9;background:#fff5f5}.result-grid article.fail strong{color:var(--danger)}.contrast-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.accessible-suggestion{display:flex;align-items:center;justify-content:space-between;gap:1rem}.accessible-suggestion h3,.css-output-card h3{margin:.65rem 0 .2rem}.accessible-suggestion p{margin:0;color:var(--muted)}.css-output-card .json-output{min-height:8.5rem;margin-bottom:.75rem}.contrast-hero-preview{display:grid;gap:.8rem;color:#fff;background:#172033}.contrast-hero-preview span{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;letter-spacing:-.07em}.contrast-hero-preview strong{font-size:1.7rem}.contrast-hero-preview small{color:#dce5f6}@media(max-width:850px){.contrast-layout,.contrast-actions-grid{grid-template-columns:1fr}}@media(max-width:620px){.result-grid{grid-template-columns:1fr}.accessible-suggestion{align-items:stretch;flex-direction:column}.accessible-suggestion .button{width:100%}}