.contrast-checker-container{max-width:1240px}.contrast-checker-workspace{padding-top:1rem}.contrast-checker-panel{--contrast-canvas: #ffffff;--contrast-background: #171717;--contrast-foreground: #ff8c42;--contrast-resolved-background: #171717;--contrast-resolved-foreground: #ff8c42;padding:0;overflow:hidden;overflow:clip;border:0;background:#171717;box-shadow:0 16px 48px #0000006b}.contrast-checker-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(420px,1fr);align-items:start}.contrast-checker-stage,.contrast-checker-inspector{min-width:0;padding:clamp(1.25rem,2.5vw,2rem)}.contrast-checker-stage{position:sticky;top:0;background:#202020}.contrast-checker-inspector{border-inline-start:1px solid rgba(255,255,255,.09);background:#151515}.contrast-checker-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.contrast-checker-section-heading h2,.contrast-checker-section-heading h3{margin:0;color:#fff;font-family:var(--font-montserrat-semi-bold);letter-spacing:-.02em}.contrast-checker-section-heading h2{font-size:clamp(1rem,2vw,1.5rem)}.contrast-checker-section-heading h3{font-size:1rem}.contrast-checker-section-heading p{max-width:58ch;margin:.35rem 0 0;color:#ffffffb8;font-size:.875rem;line-height:1.5}.contrast-checker-heading-actions{display:flex;flex:0 0 auto;align-items:center;gap:.5rem}.contrast-checker-heading-actions .tool-btn-secondary,.contrast-checker-heading-actions .tool-btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;white-space:normal}.contrast-checker-panel .tool-input,.contrast-checker-panel .tool-select,.contrast-checker-panel button,.contrast-checker-panel a{min-height:44px}.contrast-checker-panel .tool-btn,.contrast-checker-phoenix-cta .primary-button{background:linear-gradient(90deg,#faaa47,#fa1801);color:#050505}.contrast-checker-panel .tool-btn:hover,.contrast-checker-panel .tool-btn:focus-visible,.contrast-checker-phoenix-cta .primary-button:hover,.contrast-checker-phoenix-cta .primary-button:focus-visible{background:linear-gradient(90deg,#f5a33f,#d96b12);color:#050505}.contrast-checker-phoenix-cta a:focus-visible{outline:2px solid #ffb15a;outline-offset:3px}.contrast-checker-panel .tool-input:focus,.contrast-checker-panel .tool-select:focus,.contrast-checker-panel input[type=color]:focus-visible,.contrast-checker-panel input[type=range]:focus-visible,.contrast-checker-panel button:focus-visible,.contrast-checker-panel a:focus-visible,.contrast-checker-panel textarea:focus-visible{outline:2px solid #ffb15a;outline-offset:3px}.contrast-checker-panel .tool-input[aria-invalid=true]{border-color:#fa1801}.contrast-checker-color-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.contrast-checker-canvas-group{display:grid;grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;column-gap:.75rem}.contrast-checker-canvas-group .contrast-checker-field-help{align-self:center;margin:0}.contrast-checker-canvas-group .contrast-checker-error{grid-column:1 / -1}.contrast-checker-color-group{min-width:0;margin:0;padding:.85rem;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#181818}.contrast-checker-color-group legend{width:auto;max-width:100%;min-width:0;margin:0;padding:0 .35rem;color:#fff;font-family:var(--font-montserrat-semi-bold);font-size:.875rem;line-height:1.2;overflow-wrap:anywhere}.contrast-checker-color-row{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:end;gap:.5rem}.contrast-checker-color-row>label{min-width:0;margin:0}.contrast-checker-color-row>label>span,.contrast-checker-alpha>span:first-child,.contrast-checker-target>span{display:block;margin-bottom:.45rem;color:#ffffffc7;font-family:var(--font-montserrat-semi-bold);font-size:.875rem;line-height:1.3}.contrast-checker-color-row>label>span,.contrast-checker-alpha>span:first-child>span,.contrast-checker-field-help{min-width:0;overflow-wrap:anywhere}.contrast-checker-color-row .tool-input{width:100%;min-width:0;border-color:#ffffff26;background:#0d0d0d;font-family:var(--font-monospace);font-size:.875rem}.contrast-checker-native-picker{align-self:end}.contrast-checker-native-picker input[type=color]{display:block;width:48px;height:44px;padding:4px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#0d0d0d;cursor:pointer}.contrast-checker-native-picker input[type=color]::-webkit-color-swatch-wrapper{padding:0}.contrast-checker-native-picker input[type=color]::-webkit-color-swatch,.contrast-checker-native-picker input[type=color]::-moz-color-swatch{border:0;border-radius:8px}.contrast-checker-alpha{display:block;margin:.65rem 0 0}.contrast-checker-alpha>span:first-child{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.contrast-checker-alpha output{color:#fff;font-family:var(--font-monospace);font-size:.875rem}.contrast-checker-alpha input[type=range]{width:100%;height:44px;margin:0;accent-color:#ff9d3d;cursor:pointer}.contrast-checker-field-help,.contrast-checker-last-valid{margin:.55rem 0 0;color:#ffffffb3;font-size:.875rem;line-height:1.5}.contrast-checker-last-valid{color:#ffb15a}.contrast-checker-panel .contrast-checker-error{min-height:0;margin-top:.55rem;color:#ffb4ab}.contrast-checker-panel .contrast-checker-error.visible{margin-bottom:0}.contrast-checker-preview{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.1)}.contrast-checker-preview-canvas{min-height:390px;padding:clamp(1rem,3vw,1.5rem);overflow:hidden;border-radius:16px;background:var(--contrast-canvas)}.contrast-checker-preview-surface{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,.85fr);gap:clamp(1rem,3vw,1.5rem);min-height:342px;padding:clamp(1.15rem,3vw,1.75rem);border-radius:12px;background:var(--contrast-background);color:var(--contrast-foreground)}.contrast-checker-preview-copy,.contrast-checker-preview-ui{min-width:0;overflow-wrap:anywhere}.contrast-checker-preview-copy{display:flex;flex-direction:column;justify-content:center}.contrast-checker-preview-ui{display:grid;grid-template-columns:minmax(108px,1fr) auto;align-content:center;align-items:center;gap:.65rem .75rem}.contrast-checker-preview-label{display:inline-flex;align-items:center;width:max-content;max-width:100%;min-width:0;min-height:28px;margin-bottom:.6rem;padding:.35rem .5rem;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:#101010;color:#fff;font-family:var(--font-montserrat-semi-bold);font-size:.875rem;line-height:1.2}.contrast-checker-preview-copy p{max-width:46ch;margin:0 0 1.65rem;color:inherit;font-size:1rem;line-height:1.6}.contrast-checker-preview-copy h3{max-width:18ch;margin:0;color:inherit;font-family:var(--font-montserrat-bold);font-size:clamp(1.5rem,3.3vw,2.5rem);line-height:1.15;letter-spacing:-.03em}.contrast-checker-preview-ui .contrast-checker-preview-label{margin:0}.contrast-checker-demo-button,.contrast-checker-demo-icon,.contrast-checker-demo-focus{display:inline-flex;align-items:center;justify-content:center;justify-self:end;min-height:44px;color:inherit;font-family:var(--font-montserrat-semi-bold);font-size:.875rem}.contrast-checker-demo-button{min-width:128px;padding:.65rem .9rem;border:2px solid currentColor;border-radius:8px}.contrast-checker-demo-icon{width:48px;min-width:48px;border:2px solid currentColor;border-radius:10px;font-size:1rem}.contrast-checker-demo-focus{min-width:128px;padding:.55rem .7rem;border-radius:8px;outline:3px solid currentColor;outline-offset:3px}.contrast-checker-panel.is-resolving .contrast-checker-preview-surface{animation:contrast-checker-resolve .34s cubic-bezier(.16,1,.3,1)}@keyframes contrast-checker-resolve{0%{filter:saturate(.76);box-shadow:inset 0 0 0 2px #ffb15a57;transform:scale(.995)}to{filter:saturate(1);box-shadow:inset 0 0 #ffb15a00;transform:scale(1)}}.contrast-checker-result,.contrast-checker-results,.contrast-checker-suggestions,.contrast-checker-artifact{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1)}.contrast-checker-result{margin-top:0;padding-top:0;border-top:0}.contrast-checker-ratio-block{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:0 0 1rem;border-bottom:1px solid rgba(255,255,255,.1)}.contrast-checker-ratio-block span{color:#ffffffbd;font-family:var(--font-montserrat-semi-bold);font-size:.875rem}.contrast-checker-ratio-block strong{color:#fff;font-family:var(--font-monospace);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:500;line-height:1;letter-spacing:-.03em}.contrast-checker-resolved-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.75rem}.contrast-checker-resolved-grid>div{min-width:0;padding:.75rem;border-radius:10px;background:#202020}.contrast-checker-resolved-grid span,.contrast-checker-resolved-grid strong{display:block}.contrast-checker-resolved-grid span{color:#ffffffb3;font-size:.875rem;line-height:1.35}.contrast-checker-resolved-grid strong{margin-top:.35rem;overflow-wrap:anywhere;color:#fff;font-family:var(--font-monospace);font-size:.875rem}.contrast-checker-results-grid{display:grid;gap:.5rem}.contrast-checker-result-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:48px;padding:.65rem .75rem;border:1px solid rgba(250,24,1,.75);border-radius:8px;background:#d6494024;color:#ffffffef}.contrast-checker-result-row[data-pass=true]{border-color:#3f936099;background:#3f936029}.contrast-checker-result-row[data-pass=true] strong{color:#b9f3cd}.contrast-checker-result-row[data-pass=false] strong{color:#ffd0cc}.contrast-checker-result-row span,.contrast-checker-result-row strong{color:inherit;font-size:.875rem;line-height:1.35}.contrast-checker-result-row strong{flex:0 0 auto;font-family:var(--font-montserrat-semi-bold);text-align:end}.contrast-checker-non-text-row{margin-top:.15rem}.contrast-checker-result-help{margin:.65rem 0 0;color:#ffffffad;font-size:.875rem;line-height:1.5}.contrast-checker-target{display:block;margin:0}.contrast-checker-target .tool-select{width:100%;background:#0d0d0d}.contrast-checker-suggestion-note,.contrast-checker-suggestion-empty{margin:.75rem 0 0;padding:.7rem .75rem;border-radius:8px;background:#202020;color:#ffffffc2;font-size:.875rem;line-height:1.5}.contrast-checker-suggestion-note:empty{display:none}.contrast-checker-suggestion-empty[hidden]{display:none}.contrast-checker-suggestion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.75rem}.contrast-checker-suggestion-card{min-width:0;margin:0;padding:.85rem;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#202020}.contrast-checker-suggestion-card[hidden]{display:none}.contrast-checker-suggestion-card[data-state=unavailable]{border-style:dashed;background:transparent}.contrast-checker-suggestion-card[data-state=unavailable] .contrast-checker-suggestion-swatch{background:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 4px,transparent 4px 8px)}.contrast-checker-suggestion-card[data-state=unavailable] .contrast-checker-suggestion-mode{color:#ffffffb8}.contrast-checker-suggestion-card[data-state=unavailable]>strong,.contrast-checker-suggestion-card[data-state=unavailable]>p{color:#fff6}.contrast-checker-suggestion-card[data-state=unavailable]>p strong{color:inherit}.contrast-checker-suggestion-card .tool-btn-secondary[hidden]{display:none}.contrast-checker-suggestion-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;min-width:0;color:#ffffffc2;font-family:var(--font-montserrat-semi-bold);font-size:.875rem}.contrast-checker-suggestion-swatch{flex:0 0 auto;width:34px;height:34px;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:var(--suggestion-color, #111111)}.contrast-checker-suggestion-card>strong{display:block;margin-top:.65rem;color:#fff;font-family:var(--font-monospace);font-size:1rem;overflow-wrap:anywhere}.contrast-checker-suggestion-mode{display:block;margin-top:.55rem;color:#ffb15a;font-size:.875rem;line-height:1.35}.contrast-checker-suggestion-card>p{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;min-width:0;margin:.45rem 0 .75rem;color:#ffffffb3;font-size:.875rem}.contrast-checker-suggestion-card>p strong{color:#fff;font-family:var(--font-monospace)}.contrast-checker-suggestion-card .tool-btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:100%;min-height:44px;white-space:normal}.contrast-checker-css-output{display:block;width:100%;min-height:166px;padding:.85rem;resize:vertical;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#0d0d0d;color:#f1f1f1;font-family:var(--font-monospace);font-size:.875rem;line-height:1.55;white-space:pre}.contrast-checker-artifact-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.7rem}.contrast-checker-artifact-actions .tool-btn,.contrast-checker-artifact-actions .tool-btn-secondary{display:inline-flex;flex:1 1 auto;align-items:center;justify-content:center;gap:.4rem;min-width:0;min-height:44px;padding-inline:.65rem;white-space:normal;text-align:center}.contrast-checker-status{min-height:42px;margin-top:.8rem;padding:.68rem .75rem;border:1px solid transparent;border-radius:8px;background:#202020;color:#ffffffc9;font-size:.875rem;line-height:1.5}.contrast-checker-status[data-state=success]{border-color:#3f93608c;background:#3f93602b;color:#b9f3cd}.contrast-checker-status[data-state=error]{border-color:#fa1801;background:#2a2a2a;color:#ffffffef}.contrast-checker-status[data-state=warning]{border-color:#ffb15a;background:#2a2a2a;color:#ffffffef}.contrast-checker-context-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;margin-top:1.2rem;padding:1rem;border-radius:12px;background:linear-gradient(120deg,#ff8c4233,#ffc14b14)}.contrast-checker-context-cta[hidden]{display:none}.contrast-checker-context-cta h3{margin:0 0 .35rem;color:#fff;font-family:var(--font-montserrat-semi-bold);font-size:1rem}.contrast-checker-context-cta p{max-width:52ch;margin:0;color:#ffffffc2;font-size:.875rem;line-height:1.5}.contrast-checker-context-actions{display:flex;flex-direction:column;gap:.5rem;min-width:176px}.contrast-checker-context-actions .tool-btn,.contrast-checker-context-actions .tool-btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;white-space:normal;text-align:center;text-decoration:none}.contrast-checker-guide .container{max-width:930px}.contrast-checker-steps{margin:0 0 2rem;padding-inline-start:1.35rem}.contrast-checker-steps li{margin-bottom:.65rem;color:#ffffffc7;line-height:1.65}.contrast-checker-cta-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:1.35rem}.contrast-checker-cta-actions .primary-button{text-decoration:none}.contrast-checker-cta-actions .tool-text-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;color:#ffb15a;font-family:var(--font-montserrat-semi-bold);text-decoration:underline;text-underline-offset:.24em}@media (max-width: 1080px){.contrast-checker-layout{display:flex;flex-direction:column;align-items:stretch;padding:clamp(1.25rem,2.5vw,2rem);background:#1c1c1c}.contrast-checker-stage,.contrast-checker-inspector{display:contents}.contrast-checker-stage>.contrast-checker-section-heading{order:-6}.contrast-checker-color-stack{order:-5}.contrast-checker-last-valid{order:-4}.contrast-checker-inspector>.contrast-checker-section-heading{order:-3;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.1)}.contrast-checker-result{order:-2}.contrast-checker-results{order:-1}}@media (min-width: 1081px) and (max-width: 1199px){.contrast-checker-preview-surface{grid-template-columns:minmax(0,1fr)}.contrast-checker-preview-ui{padding-top:1rem;border-top:1px solid currentColor}}@media (max-width: 760px){.contrast-checker-layout{padding:1.15rem}.contrast-checker-color-stack,.contrast-checker-canvas-group{grid-template-columns:minmax(0,1fr)}.contrast-checker-canvas-group{min-height:auto}.contrast-checker-canvas-group .contrast-checker-field-help{margin-top:.55rem}.contrast-checker-preview-surface{grid-template-columns:minmax(0,1fr)}.contrast-checker-preview-ui{grid-template-columns:minmax(0,1fr) auto;padding-top:1rem;border-top:1px solid currentColor}.contrast-checker-context-cta{grid-template-columns:minmax(0,1fr)}.contrast-checker-context-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}}@media (max-width: 560px){.contrast-checker-section-heading{align-items:stretch;flex-direction:column}.contrast-checker-heading-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.contrast-checker-heading-actions .tool-btn-secondary,.contrast-checker-heading-actions .tool-btn-icon{width:100%}.contrast-checker-preview-canvas{min-height:0;padding:.75rem;border-radius:12px}.contrast-checker-preview-surface{min-height:0;padding:1rem}.contrast-checker-preview-copy h3{font-size:1.5rem}.contrast-checker-resolved-grid,.contrast-checker-suggestion-grid,.contrast-checker-context-actions{grid-template-columns:minmax(0,1fr)}.contrast-checker-result-row{align-items:flex-start;flex-direction:column;gap:.25rem}.contrast-checker-result-row strong{text-align:start}.contrast-checker-cta-actions{align-items:stretch;flex-direction:column}.contrast-checker-cta-actions a{width:100%;text-align:center}}@media (max-width: 380px){.contrast-checker-layout,.contrast-checker-color-group{padding:12px}.contrast-checker-color-row{gap:8px}.contrast-checker-alpha>span:first-child{flex-wrap:wrap;gap:4px 8px}.contrast-checker-alpha output{max-width:100%;overflow-wrap:anywhere}.contrast-checker-heading-actions{grid-template-columns:minmax(0,1fr)}.contrast-checker-preview-surface{gap:12px;padding:12px}.contrast-checker-preview-copy p{margin-bottom:20px}.contrast-checker-preview-ui{grid-template-columns:minmax(0,1fr)}.contrast-checker-demo-button,.contrast-checker-demo-icon,.contrast-checker-demo-focus{justify-self:stretch;width:100%;min-width:0;overflow-wrap:anywhere}.contrast-checker-preview-ui .contrast-checker-preview-label{margin-top:.35rem}.contrast-checker-ratio-block{align-items:flex-start;flex-direction:column;gap:.6rem}}@media (prefers-reduced-motion: reduce){.contrast-checker-workspace *,.contrast-checker-workspace *:before,.contrast-checker-workspace *:after,.contrast-checker-phoenix-cta *,.contrast-checker-phoenix-cta *:before,.contrast-checker-phoenix-cta *:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.contrast-checker-panel .tool-btn:hover,.contrast-checker-phoenix-cta .primary-button:hover{transform:none}}@media (forced-colors: active){.contrast-checker-panel,.contrast-checker-color-group,.contrast-checker-preview-canvas,.contrast-checker-preview-surface,.contrast-checker-resolved-grid>div,.contrast-checker-result-row,.contrast-checker-suggestion-card,.contrast-checker-css-output,.contrast-checker-status,.contrast-checker-context-cta{border:1px solid CanvasText;forced-color-adjust:auto}.contrast-checker-preview-canvas,.contrast-checker-preview-surface,.contrast-checker-demo-button,.contrast-checker-demo-icon,.contrast-checker-demo-focus,.contrast-checker-suggestion-swatch,.contrast-checker-native-picker input[type=color]{forced-color-adjust:none}.contrast-checker-preview-label{border:1px solid #ffffff;forced-color-adjust:none}.contrast-checker-result-row[data-pass=true]{background:Highlight;color:HighlightText}.contrast-checker-result-row[data-pass=false]{background:Canvas;color:CanvasText}}