.color-contrast{--contrast-foreground: #18181b;--contrast-background: #ffffff;min-width:0}.color-contrast>h1{margin:0 0 24px;font-size:28px;font-weight:600;letter-spacing:-.03em}.color-contrast__workspace{display:grid;grid-template-columns:320px minmax(0,1fr);align-items:start;border-block:1px solid var(--border)}.color-contrast__controls{min-width:0}.color-contrast__picker-section,.color-contrast__results{padding:16px 20px}.color-contrast__picker-section{border-bottom:1px solid var(--border)}.color-inputs{display:grid;gap:14px}.color-input-row{min-width:0}.color-input-row>label{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:6px;font-size:13px;font-weight:500}.color-input-control{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:8px}.color-input-control__picker{width:38px;height:38px;padding:3px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}.color-input-control__picker::-webkit-color-swatch-wrapper{padding:0}.color-input-control__picker::-webkit-color-swatch{border:0;border-radius:var(--radius-xs)}.color-input-control__picker::-moz-color-swatch{border:0;border-radius:var(--radius-xs)}.color-input-control__text{width:100%;min-width:0;height:38px;padding:6px 9px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}.color-input-control__text[aria-invalid=true]{border-color:var(--danger)}.color-swap{display:flex;align-items:center;gap:7px;min-height:32px;margin-top:10px;padding:4px 0;border:0;background:transparent;color:var(--text);font-size:12px;cursor:pointer}.color-swap span{font-size:18px}.color-swap:disabled{color:var(--muted);cursor:default}.color-error{margin:6px 0 0;color:var(--danger);font-size:12px;line-height:1.5}.contrast-summary{margin-bottom:18px}.contrast-summary__label{margin:0 0 4px;color:var(--text);font-size:12px}.contrast-summary__ratio{display:block;font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.contrast-summary__meaning{margin:8px 0 0;color:var(--text);font-size:12px;line-height:1.5}.color-contrast[data-input-state=pending] .contrast-summary__meaning{color:var(--warning)}.compliance-heading{margin:0 0 12px;font-size:12px;font-weight:500;color:var(--text)}.compliance-group{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:start;column-gap:8px}.compliance-group+.compliance-group{margin-top:10px}.compliance-group h3{grid-row:1 / span 2;margin:0;padding-top:5px;font-size:13px;font-weight:600}.compliance-row{grid-column:2;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:baseline;gap:6px;min-height:28px;padding:5px 0;border-bottom:1px solid var(--border);font-size:12px}.compliance-row__requirement{color:var(--text)}.compliance-row strong{font-weight:500}.compliance-row[data-status=pass] strong{color:var(--success)}.compliance-row[data-status=fail] strong{color:var(--danger)}.contrast-help{margin-top:14px;color:var(--text);font-size:12px;line-height:1.6}.contrast-help summary{width:fit-content;padding:4px 0;cursor:pointer}.contrast-help p{margin:8px 0 0}.color-contrast__preview{position:sticky;top:74px;display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;height:clamp(560px,calc(100dvh - 180px),820px);border-left:1px solid var(--border)}.preview-header{padding:16px 24px;background:var(--contrast-background);color:var(--contrast-foreground)}.preview-header h2{margin:0;font-size:14px;font-weight:600}.preview-scroll{min-height:0;overflow-y:auto;background:var(--contrast-background);color:var(--contrast-foreground)}.cc-text-hero{display:flex;flex-direction:column;align-items:flex-start;min-height:100%;padding:40px 32px;overflow-wrap:anywhere}.cc-text-hero h3{max-width:16ch;margin:0;font-size:44px;font-weight:600;line-height:1.15;letter-spacing:-.035em;text-wrap:balance}.cc-text-hero__subtitle{margin:20px 0 0;font-size:20px;line-height:1.45}.cc-text-hero__body{max-width:46ch;margin:20px 0 0;font-size:16px;line-height:1.65;text-wrap:pretty}.cc-text-hero__caption{margin:auto 0 0;padding-top:36px;font-size:12px;line-height:1.5}.cc-demo-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 20px}.cc-demo-button{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:40px;padding:8px 16px;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--contrast-background);color:var(--contrast-foreground);font:inherit;font-size:14px;font-weight:500;line-height:1.4;text-align:center;cursor:pointer}.cc-demo-button--inverse{background:var(--contrast-foreground);color:var(--contrast-background)}.cc-demo-button--outline{border-color:var(--contrast-foreground)}.cc-demo-choice{display:flex;align-items:center;gap:9px;min-height:36px;font-size:14px;cursor:pointer}.cc-demo-switch{appearance:none;flex:0 0 auto;width:36px;height:22px;margin:0;border:1px solid var(--contrast-foreground);border-radius:999px;background:var(--contrast-background);cursor:pointer}.cc-demo-switch:after{content:"";display:block;width:14px;height:14px;margin:3px;border-radius:50%;background:var(--contrast-foreground)}.cc-demo-switch:checked:after{transform:translate(14px)}.color-contrast :is(button,input,select,summary,a,[tabindex="-1"]):focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--surface)}@media(max-width:900px){.color-contrast__workspace{display:block}.color-contrast__controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.color-contrast__picker-section{border-bottom:0}.color-contrast__results{border-left:1px solid var(--border)}.color-contrast__preview{position:static;display:block;height:auto;border-left:0;border-top:1px solid var(--border)}.preview-scroll{overflow:visible}}@media(max-width:560px){.color-contrast>h1{margin-bottom:20px;font-size:26px}.color-contrast__controls{display:block}.color-contrast__picker-section,.color-contrast__results{padding:16px 12px}.color-inputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.color-input-row>label{display:block}.color-input-control{grid-template-columns:32px minmax(0,1fr);gap:6px}.color-input-control__picker{width:32px}.color-input-control__text{padding-inline:6px;font-size:16px}.color-contrast__results{border-left:0;border-top:1px solid var(--border)}.contrast-summary__ratio{font-size:36px}.contrast-summary{margin-bottom:12px}.compliance-group+.compliance-group{margin-top:10px}.preview-header{padding:8px 12px}.preview-header h2{font-size:13px}.cc-text-hero{min-height:480px;padding:28px 20px}.cc-text-hero h3{font-size:32px}.cc-text-hero__subtitle{font-size:18px}.cc-demo-button{padding-inline:12px}}