.contrast-studio{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 16px 45px rgba(28,44,70,.09)}.contrast-preview{min-height:390px;display:grid;place-items:center;padding:42px;transition:background .2s,color .2s}.contrast-preview-content{max-width:690px;text-align:center}.contrast-kicker{font-size:12px!important;font-weight:800;letter-spacing:.14em;margin:0 0 18px!important;opacity:.72}.contrast-preview h2{font-size:clamp(42px,7vw,78px);line-height:.97;letter-spacing:-.06em;margin:0 0 22px}.contrast-preview-content>p:not(.contrast-kicker){font-size:18px;line-height:1.55;margin:0 auto 24px!important;max-width:570px}.contrast-label{display:inline-block;padding:8px 11px;border:1px solid currentColor;border-radius:999px;font:700 12px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;opacity:.8}.contrast-controls{display:grid;grid-template-columns:1fr 50px 1fr;align-items:center;gap:14px;padding:25px 28px;border-bottom:1px solid var(--line)}.contrast-color-control{display:grid;grid-template-columns:1fr 48px minmax(105px,130px);align-items:center;gap:12px}.contrast-color-control span{display:block;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}.contrast-color-control strong{font:750 19px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace}.contrast-color-control input[type=color]{width:48px;height:42px;padding:2px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer}.contrast-color-control input[type=text],.contrast-color-control input:not([type]){width:100%;height:42px;border:1px solid var(--line);border-radius:9px;padding:0 10px;text-transform:uppercase;font:700 14px ui-monospace,SFMono-Regular,Consolas,monospace}.contrast-swap{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#f6f8fb;color:var(--ink);font-size:24px;cursor:pointer}.contrast-swap:hover{background:#e8eefc;color:var(--brand)}.contrast-results{display:grid;grid-template-columns:210px 1fr;gap:30px;padding:29px 28px}.contrast-score{display:flex;flex-direction:column;justify-content:center;padding-right:28px;border-right:1px solid var(--line)}.contrast-score>span{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.contrast-score strong{font-size:44px;letter-spacing:-.05em;line-height:1.05;margin:7px 0}.contrast-score strong span{font-size:22px}.contrast-score small{font-weight:700}.wcag-grid{display:grid;align-content:center;gap:12px}.wcag-row{display:grid;grid-template-columns:1fr 76px 76px;align-items:center;gap:10px}.wcag-row>span{font-weight:750}.wcag-row small{display:block;color:var(--muted);font-size:12px;font-weight:500;margin-top:3px}.wcag-row b{padding:9px;border-radius:8px;text-align:center;font-size:13px;background:#f2f4f7;color:#738092}.wcag-row b.pass{background:#dcfce7;color:#166534}.wcag-row b.fail{background:#fee2e2;color:#b91c1c}.contrast-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 28px;background:#f8fafc;border-top:1px solid var(--line)}.contrast-footer p{margin:0;color:var(--muted);font-size:14px}@media(max-width:680px){.contrast-preview{min-height:330px;padding:28px 20px}.contrast-controls{grid-template-columns:1fr;gap:16px}.contrast-swap{justify-self:center;transform:rotate(90deg)}.contrast-color-control{grid-template-columns:1fr 48px 118px}.contrast-results{grid-template-columns:1fr;gap:22px}.contrast-score{padding:0 0 20px;border-right:0;border-bottom:1px solid var(--line)}.contrast-footer{align-items:flex-start;flex-direction:column}.wcag-row{grid-template-columns:1fr 62px 62px}}
.coolors-contrast{overflow:hidden;border:1px solid #dbe4ec;border-radius:18px;background:#fff;box-shadow:0 16px 48px #17255412}.coolors-preview{display:grid;min-height:370px;place-items:center;padding:44px;transition:background .2s,color .2s}.coolors-preview-content{max-width:710px;text-align:center}.coolors-kicker{margin:0 0 16px!important;font-size:12px!important;font-weight:800;letter-spacing:.16em;opacity:.7}.coolors-preview h2{margin:0 0 18px;font-size:clamp(42px,7vw,74px);line-height:.98;letter-spacing:-.065em}.coolors-preview-content>p:not(.coolors-kicker){max-width:570px;margin:0 auto 24px!important;font-size:18px;line-height:1.55}.coolors-controls{display:grid;grid-template-columns:1fr 56px 1fr;gap:18px;align-items:end;padding:24px 28px;border-top:1px solid #e5ebf2;border-bottom:1px solid #e5ebf2}.coolors-color-control>label{display:block;margin:0 0 8px;color:#607089;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.coolors-color-input{display:grid;grid-template-columns:48px minmax(90px,1fr) auto;gap:10px;align-items:center}.coolors-color-input input[type=color]{width:48px;height:46px;padding:3px;border:1px solid #d4e0ec;border-radius:10px;background:#fff;cursor:pointer}.coolors-color-input input:not([type=color]){width:100%;height:46px;border:1px solid #d4e0ec;border-radius:10px;padding:0 11px;text-transform:uppercase;font:800 15px ui-monospace,SFMono-Regular,Consolas,monospace}.coolors-color-input strong{color:#607089;font:700 12px ui-monospace,SFMono-Regular,Consolas,monospace}.coolors-swap{align-self:center;width:44px;height:44px;border:1px solid #d4e0ec;border-radius:50%;background:#f7faff;color:#1d4ed8;font-size:24px;cursor:pointer;transition:transform .18s,background .18s}.coolors-swap:hover{transform:rotate(180deg);background:#e8f0ff}.coolors-results{display:grid;grid-template-columns:235px 1fr;gap:28px;padding:28px}.coolors-ratio{display:flex;flex-direction:column;justify-content:center;padding-right:28px;border-right:1px solid #e5ebf2}.coolors-ratio>span{color:#607089;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.coolors-ratio strong{margin:5px 0 7px;font-size:52px;line-height:1;letter-spacing:-.065em}.coolors-ratio strong span{font-size:24px}.coolors-ratio small{font-weight:800}.coolors-readability{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.coolors-text-card{min-width:0;padding:17px;border:1px solid #dfe8f1;border-radius:13px;background:#fbfdff}.coolors-text-card>div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:baseline}.coolors-text-card strong{font-size:15px}.coolors-text-card span{color:#748399;font-size:12px;white-space:nowrap}.coolors-text-card p{margin:15px 0 14px;overflow:hidden;color:inherit;line-height:1.35;font-size:15px}.coolors-large-text p{font-size:22px;font-weight:800;line-height:1.08;letter-spacing:-.03em}.coolors-grades{display:flex;gap:8px}.coolors-grades b{min-width:52px;padding:7px 9px;border-radius:7px;background:#eef2f6;color:#708096;text-align:center;font-size:12px}.coolors-grades b.pass{background:#dcfce7;color:#166534}.coolors-grades b.fail{background:#fee2e2;color:#b91c1c}.coolors-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 28px;border-top:1px solid #e5ebf2;background:#f8fafc}.coolors-footer p{margin:0;color:#607089;font-size:14px}@media(max-width:700px){.coolors-preview{min-height:320px;padding:30px 20px}.coolors-controls{grid-template-columns:1fr;gap:15px}.coolors-swap{justify-self:center;transform:rotate(90deg)}.coolors-swap:hover{transform:rotate(270deg)}.coolors-results{grid-template-columns:1fr;gap:22px}.coolors-ratio{padding:0 0 20px;border-right:0;border-bottom:1px solid #e5ebf2}.coolors-readability{grid-template-columns:1fr}.coolors-footer{align-items:flex-start;flex-direction:column}}@media(max-width:440px){.coolors-controls,.coolors-results,.coolors-footer{padding-left:18px;padding-right:18px}.coolors-color-input{grid-template-columns:48px minmax(0,1fr)}.coolors-color-input strong{display:none}}
.coolors-contrast .coolors-results{display:block;padding:34px 28px}.coolors-contrast .coolors-ratio{align-items:center;padding:0;border:0;text-align:center}.coolors-contrast .coolors-ratio strong{margin:7px 0 10px;font-size:clamp(58px,9vw,82px)}.contrast-stars{color:#f59e0b;font-size:27px;line-height:1;letter-spacing:5px;text-shadow:0 2px 0 #fef3c7}@media(max-width:700px){.coolors-contrast .coolors-ratio{padding:0;border:0}.coolors-contrast .coolors-results{padding:30px 20px}}