*{box-sizing:border-box}body{background:var(--wasd-color-surface-canvas);color:var(--wasd-color-text-default);font-family:var(--wasd-typography-family-sans);margin:0}button,input,select,textarea{font:inherit}.contrast-checker{--contrast-tool-accent:#0f766e;--contrast-tool-warning:#b45309;--contrast-tool-panel-tint:color-mix(in srgb, var(--wasd-color-surface-canvas) 88%, #0f766e 12%);background:linear-gradient(135deg, color-mix(in srgb, var(--wasd-color-surface-raised) 90%, #0f766e 10%), var(--wasd-color-surface-raised) 52%), var(--wasd-color-surface-raised);border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-md);box-shadow:var(--wasd-shadow-sm);color:var(--wasd-color-text-default);inline-size:100%;padding:var(--wasd-spacing-4)}.contrast-checker--teaser{block-size:100%;overflow:hidden}.contrast-checker--teaser .contrast-checker__header{display:none}.contrast-checker__header h2,.contrast-checker__header p,.contrast-checker__panel h3,.contrast-checker__preview h3,.contrast-checker__preview p,.contrast-checker__status{margin:0}.contrast-checker__workspace{align-items:start;gap:var(--wasd-spacing-4);grid-template-columns:minmax(19rem,.9fr) minmax(22rem,1.1fr);display:grid}.contrast-checker__controls,.contrast-checker__results{min-inline-size:0}.contrast-checker__results{top:var(--wasd-spacing-4);position:sticky}.contrast-checker__panel,.contrast-checker__preview{background:var(--wasd-color-surface-canvas);border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-sm);gap:var(--wasd-spacing-3);min-inline-size:0;padding:var(--wasd-spacing-4);display:grid}.contrast-checker__field-grid{gap:var(--wasd-spacing-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.contrast-checker__field{gap:var(--wasd-spacing-2);min-inline-size:0;display:grid}.contrast-checker__field--wide,.contrast-checker__switch-row{grid-column:1/-1}.contrast-checker__field>span{color:var(--wasd-color-text-muted);font-size:var(--wasd-typography-text-style-label-sm-font-size);font-weight:var(--wasd-typography-weight-medium)}.contrast-checker__field .wasd-input-root,.contrast-checker__field .wasd-input-control{inline-size:100%;min-inline-size:0}.contrast-checker__color-control{align-items:center;gap:var(--wasd-spacing-2);grid-template-columns:3rem minmax(0,1fr);display:grid}.contrast-checker__color-input{appearance:none;border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-sm);cursor:pointer;background:0 0;block-size:2.75rem;inline-size:3rem;padding:.2rem}.contrast-checker__textarea{background:var(--wasd-color-surface-raised);border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-sm);color:var(--wasd-color-text-default);min-block-size:7rem;inline-size:100%;padding:var(--wasd-spacing-3);resize:vertical}.contrast-checker__textarea:focus,.contrast-checker__color-input:focus{outline:3px solid color-mix(in srgb, var(--contrast-tool-accent) 48%, transparent);outline-offset:2px}.contrast-checker__switch-row{background:var(--wasd-color-surface-raised);border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-sm);min-block-size:3.25rem;padding:var(--wasd-spacing-3);align-items:center;display:flex}.contrast-checker__status{color:var(--wasd-color-text-muted);min-block-size:1.35em}.contrast-checker__preview{background:var(--contrast-background);color:var(--contrast-foreground);gap:var(--wasd-spacing-4);min-block-size:17rem}.contrast-checker__preview h3,.contrast-checker__preview span{color:currentColor;opacity:.75}.contrast-checker__preview p{font-size:var(--contrast-font-size);font-weight:var(--contrast-font-weight);max-inline-size:32rem;line-height:1.35}.contrast-checker__ratio-hero{background:var(--contrast-tool-panel-tint);border:var(--wasd-border-width-thin) solid color-mix(in srgb, var(--contrast-tool-accent) 34%, var(--wasd-color-border-subtle));border-radius:var(--wasd-radius-sm);gap:var(--wasd-spacing-1);padding:var(--wasd-spacing-4);display:grid}.contrast-checker__ratio-hero span,.contrast-checker__result-card dt,.contrast-checker__suggestion span{color:var(--wasd-color-text-muted);font-size:var(--wasd-typography-size-label-sm);font-weight:var(--wasd-typography-weight-semibold)}.contrast-checker__ratio-hero strong{font-family:var(--wasd-typography-family-mono);font-size:clamp(2rem,9vw,4.5rem);line-height:1}.contrast-checker__results-grid,.contrast-checker__suggestions{gap:var(--wasd-spacing-3);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.contrast-checker__result-card,.contrast-checker__suggestion{border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-sm);gap:var(--wasd-spacing-2);min-inline-size:0;padding:var(--wasd-spacing-3);display:grid}.contrast-checker__result-card dd{gap:var(--wasd-spacing-2);margin:0;display:grid}.contrast-checker__result-card span{background:color-mix(in srgb, var(--contrast-tool-warning) 14%, var(--wasd-color-surface-raised));border-radius:var(--wasd-radius-xs);font-size:var(--wasd-typography-size-body-sm);font-weight:var(--wasd-typography-weight-semibold);padding:var(--wasd-spacing-2)}.contrast-checker__result-card span[data-pass=true]{background:color-mix(in srgb, var(--contrast-tool-accent) 18%, var(--wasd-color-surface-raised))}.contrast-checker__suggestion{background:var(--suggestion-background);color:var(--suggestion-foreground)}.contrast-checker__suggestion span,.contrast-checker__suggestion small{color:currentColor;opacity:.78}.contrast-checker__suggestion strong{font-family:var(--wasd-typography-family-mono);letter-spacing:0}@media (width<=64rem){.contrast-checker__workspace{grid-template-columns:1fr}.contrast-checker__results{position:static}}@media (width<=38rem){.contrast-checker{box-shadow:none;padding:var(--wasd-spacing-3);border-inline:0;border-radius:0}.contrast-checker__field-grid,.contrast-checker__results-grid,.contrast-checker__suggestions{grid-template-columns:1fr}}