.contrast-checker{--accent:#145b80;--accent-bright:#28a8ea;--ink:#20394a;--surface:#fff;--panel:#f3f7fa;--soft:#edf3f7;--input:#f7fafc;--border:#dce5ec;--muted:#526879;--shadow:#234b6510;--success:#177245;--danger:#b42318;min-height:calc(100dvh - 68px);color:var(--ink);background:var(--panel);padding:36px clamp(16px,3vw,48px) 64px}:root[data-theme=dark] .contrast-checker{--accent:#72c6ec;--accent-bright:#38afe8;--ink:#e4edf3;--surface:#17232c;--panel:#101820;--soft:#1d2d38;--input:#14212a;--border:#2c3c48;--muted:#a9bac5;--shadow:#0003;--success:#69d79a;--danger:#ff8d86}.contrast-checker button,.contrast-checker input{font:inherit}.contrast-heading{justify-content:space-between;align-items:center;gap:20px;max-width:1480px;margin:0 auto 28px;display:flex}.contrast-heading h1{letter-spacing:-1.2px;margin:5px 0 8px;font-size:clamp(24px,2.5vw,34px)}.contrast-heading p{max-width:650px;color:var(--muted);margin:0;line-height:1.65}.contrast-heading .contrast-eyebrow{color:#1478a8;letter-spacing:2px;font-size:10px;font-weight:750}.contrast-share,.contrast-swap{border:1px solid var(--border);color:var(--ink);background:var(--surface);cursor:pointer;border-radius:9px;font-weight:700}.contrast-share{color:#fff;border-color:var(--accent);background:var(--accent);flex:none;padding:10px 14px;font-size:12px}.contrast-share:hover{background:#104869;border-color:#104869}.contrast-grid{grid-template-columns:minmax(0,1.7fr) minmax(260px,.7fr);gap:18px;max-width:1480px;margin:0 auto;display:grid}.contrast-controls,.contrast-summary,.contrast-preview,.contrast-result-card{border:1px solid var(--border);background:var(--surface);box-shadow:0 3px 12px var(--shadow);border-radius:16px}.contrast-controls{grid-template-columns:1fr 1fr;gap:22px 44px;padding:22px;display:grid;position:relative}.contrast-color-field>span,.contrast-opacity label{color:var(--muted);margin-bottom:9px;font-size:12px;font-weight:600;display:block}.contrast-color-control{border:1px solid var(--border);background:var(--input);border-radius:9px;align-items:center;height:52px;padding:6px 12px 6px 7px;font:700 17px ui-monospace,monospace;display:flex}.contrast-color-control:focus-within{outline:3px solid color-mix(in srgb, var(--accent-bright), transparent 65%);border-color:var(--accent-bright)}.contrast-color-control input[type=color]{cursor:pointer;background:0 0;border:0;border-radius:6px;width:38px;height:38px;padding:0}.contrast-color-control input[type=text]{width:100%;min-width:0;color:inherit;font:inherit;text-transform:uppercase;background:0 0;border:0;outline:0}.is-invalid .contrast-color-control{border-color:var(--danger)}.contrast-opacity>div{justify-content:space-between;display:flex}.contrast-opacity output{color:var(--muted);font-size:12px;font-weight:700}.contrast-opacity input{width:100%;accent-color:var(--accent-bright)}.contrast-swap{z-index:1;width:38px;height:38px;box-shadow:0 2px 8px var(--shadow);position:absolute;top:45px;left:50%;transform:translate(-50%)rotate(90deg)}.contrast-swap:hover{color:var(--accent);background:var(--soft);border-color:#93c5df}.contrast-swap span{width:1px;height:1px;position:absolute;overflow:hidden}.contrast-error{color:var(--danger);grid-column:1/-1;margin:-8px 0 0;font-size:11px}.contrast-summary{padding:22px;position:relative;overflow:hidden}.contrast-summary:before{content:"";background:linear-gradient(135deg,#28a8ea0d,#28a8ea2e);border-radius:0 0 0 100%;width:110px;height:110px;position:absolute;top:0;right:0}.contrast-summary p{color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin:0 0 10px;font-size:11px;font-weight:700}.contrast-summary>strong{color:var(--accent);letter-spacing:-.05em;margin-bottom:21px;font-size:44px;display:block;position:relative}.contrast-summary small{margin-left:3px;font-size:20px}.contrast-meter{background:var(--border);border-radius:10px;height:9px;overflow:hidden}.contrast-meter i{border-radius:inherit;background:linear-gradient(90deg,#e4574f,#ecaf3b 35%,#2f9d64 70%);height:100%;transition:width .2s;display:block}.contrast-summary>span{width:20%;color:var(--muted);margin-top:8px;font-size:10px;display:inline-block}.contrast-summary>span:last-child{text-align:right}.contrast-preview{max-width:1480px;margin:18px auto;padding:30px;transition:color .15s,background-color .15s}.contrast-preview p{letter-spacing:2px;text-transform:uppercase;opacity:.75;margin:0 0 28px;font-size:10px;font-weight:750}.contrast-preview strong{font-size:clamp(23px,4vw,36px);line-height:1.25;display:block}.contrast-preview span{margin-top:10px;font-size:14px;display:block}.contrast-results{grid-template-columns:repeat(3,1fr);gap:18px;max-width:1480px;margin:0 auto;display:grid}.contrast-result-card{flex-direction:column;justify-content:space-between;min-height:170px;padding:22px;display:flex;position:relative;overflow:hidden}.contrast-result-card:before{background:linear-gradient(90deg, var(--accent), var(--accent-bright));content:"";width:100%;height:3px;position:absolute;top:0;left:0}.contrast-result-card h3{margin:0 0 5px;font-size:15px;font-weight:650}.contrast-result-card p{color:var(--muted);margin:0;font-size:12px;line-height:1.6}.contrast-badges{flex-wrap:wrap;gap:7px;margin-top:22px;display:flex}.contrast-badges span{border-radius:6px;padding:6px 9px;font-size:11px;font-weight:700}.contrast-badges strong{margin-left:5px}.contrast-badges .is-pass{color:var(--success);background:color-mix(in srgb, var(--success), transparent 88%)}.contrast-badges .is-fail{color:var(--danger);background:color-mix(in srgb, var(--danger), transparent 90%)}.contrast-notice{z-index:10;color:#fff;background:#17232c;border-radius:9px;padding:12px 16px;position:fixed;bottom:24px;right:24px;box-shadow:0 8px 30px #0003}.contrast-notice:empty{display:none}.contrast-checker :focus-visible{outline:3px solid var(--accent-bright);outline-offset:3px}@media (width<=760px){.contrast-checker{padding:28px 16px 56px}.contrast-heading{display:block}.contrast-share{margin-top:20px}.contrast-grid,.contrast-controls{grid-template-columns:1fr}.contrast-swap{justify-self:center;margin:-8px 0;position:static;transform:none}.contrast-results{grid-template-columns:1fr}.contrast-result-card{min-height:0}}