.tool-page:has(.contrast-workspace) .tool-main{padding-block:24px 28px}.tool-page:has(.contrast-workspace) .tool-intro{border:1px solid var(--line);background:#0e0f16;border-bottom:0;align-items:center;margin-bottom:0;padding:14px 22px}.tool-page:has(.contrast-workspace) .tool-intro h1{letter-spacing:-.025em;font-size:clamp(1.8rem,2.5vw,2.5rem);line-height:1}.tool-page:has(.contrast-workspace) .tool-intro p{max-width:470px;margin:0;font-size:.82rem;line-height:1.4}.contrast-workspace{border:1px solid var(--line);background:var(--line);grid-template-columns:minmax(250px,1fr) minmax(330px,1.18fr) minmax(250px,1fr);gap:1px;display:grid}.contrast-editor,.contrast-result{background:#0e0f16;min-width:0;padding:26px}.contrast-editor-heading,.contrast-result-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:start;gap:16px;padding-bottom:23px;display:flex}.contrast-editor h2,.contrast-result h2{letter-spacing:-.025em;margin:5px 0 0;font-size:1.6rem;line-height:1.1}.contrast-editor{flex-direction:column;gap:24px;display:flex}.contrast-overline{color:var(--blue-bright);letter-spacing:.12em;text-transform:uppercase;font-size:.63rem;font-weight:800}.contrast-colour-chip{border:1px solid #ffffff47;border-radius:3px;flex:none;width:52px;height:52px}.contrast-hex-row{gap:9px;display:grid}.contrast-hex-row label{letter-spacing:.06em;text-transform:uppercase;margin:0;font-size:.72rem;font-weight:800}.contrast-hex-input{border:1px solid var(--line-strong);background:#090a0f;border-radius:3px;align-items:center;height:48px;font:1rem Courier New,monospace;display:flex}.contrast-hex-input:focus-within{border-color:var(--blue-bright)}.contrast-hex-input span{color:var(--muted);padding-left:15px}.contrast-hex-input input{width:100%;height:100%;color:var(--paper);font:inherit;text-transform:uppercase;background:0 0;border:0;outline:0;padding:0 12px 0 3px}.contrast-field-help{color:var(--muted);margin:-18px 0 0;font-size:.68rem}.contrast-control-group{border-top:1px solid var(--line);gap:14px;padding-top:21px;display:grid}.contrast-control-group h3{letter-spacing:.06em;text-transform:uppercase;margin:0;font-size:.72rem;font-weight:800}.contrast-group-heading{justify-content:space-between;align-items:center;gap:8px;display:flex}.contrast-slider-row{grid-template-columns:73px minmax(0,1fr) 42px;align-items:center;gap:10px;min-height:36px;display:grid}.contrast-slider-row label{color:var(--muted);font-size:.78rem}.contrast-slider-row output{text-align:right;font-variant-numeric:tabular-nums;font:.75rem Courier New,monospace}.contrast-slider-track{min-width:0;height:32px;display:block;position:relative}.contrast-slider-track:before{background:var(--slider-track);content:"";pointer-events:none;background-clip:padding-box;border:1px solid #f5f5f133;border-radius:3px;position:absolute;inset:11px 0}.contrast-slider-track input{appearance:none;cursor:pointer;background:0 0;width:100%;height:32px;margin:0;display:block;position:relative}.contrast-slider-track input::-webkit-slider-runnable-track{background:0 0;border:0;height:10px}.contrast-slider-track input::-moz-range-track{background:0 0;border:0;height:10px}.contrast-slider-track input::-webkit-slider-thumb{appearance:none;background:#f5f5f1;border:2px solid #101119;border-radius:3px;width:14px;height:22px;margin-top:-6px;transition:border-color .16s,transform .16s;box-shadow:0 2px 7px #00000080}.contrast-slider-track input::-moz-range-thumb{background:#f5f5f1;border:2px solid #101119;border-radius:3px;width:10px;height:18px;transition:border-color .16s,transform .16s;box-shadow:0 2px 7px #00000080}.contrast-slider-track input:hover::-webkit-slider-thumb{border-color:var(--blue-bright);transform:scale(1.08)}.contrast-slider-track input:focus-visible::-webkit-slider-thumb{border-color:var(--blue-bright);transform:scale(1.08)}.contrast-slider-track input:hover::-moz-range-thumb{border-color:var(--blue-bright);transform:scale(1.08)}.contrast-slider-track input:focus-visible::-moz-range-thumb{border-color:var(--blue-bright);transform:scale(1.08)}.contrast-slider-track input:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px;border-radius:3px}.contrast-model-switch{border:1px solid var(--line-strong);border-radius:3px;display:flex;overflow:hidden}.contrast-model-switch button{min-height:32px;color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0 9px;font-size:.64rem;font-weight:800}.contrast-model-switch button.active{background:var(--blue);color:#fff}.contrast-css{border-top:1px solid var(--line);margin-top:auto;padding-top:24px}.contrast-css>span{color:var(--muted);margin-bottom:10px;font-size:.68rem;display:block}.contrast-css>div{border:1px solid var(--line-strong);background:#090a0f;border-radius:3px;align-items:stretch;min-height:44px;display:flex}.contrast-css button{cursor:pointer}.contrast-css-value{min-width:0;color:var(--paper);text-align:left;overflow-wrap:anywhere;background:0 0;border:0;flex:1;padding:8px 12px;font:.78rem Courier New,monospace}.contrast-copy{border:0;border-left:1px solid var(--line-strong);color:var(--blue-bright);background:0 0;padding:0 10px;font-size:.68rem;font-weight:800}@property --glow-hue{syntax:"<number>";inherits:false;initial-value:228}.contrast-result{isolation:isolate;background:#101119;flex-direction:column;justify-content:space-between;transition:--glow-hue .7s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}.contrast-result:before{z-index:-1;background:radial-gradient(ellipse 78% 58% at 52% 13%, hsl(calc(var(--glow-hue) * 1deg) 95% 64% / .2), transparent 78%), radial-gradient(ellipse 85% 55% at 50% 100%, hsl(calc(var(--glow-hue) * 1deg) 90% 58% / .075), transparent 78%);content:"";pointer-events:none;position:absolute;inset:0}.contrast-result-flare{z-index:-1;background:linear-gradient(110deg, transparent 35%, hsl(calc(var(--glow-hue) * 1deg) 100% 75% / .1) 50%, transparent 65%);opacity:0;pointer-events:none;animation:.85s cubic-bezier(.16,1,.3,1) both contrast-signal;position:absolute;inset:-15% -30%;transform:translate(-35%)}@keyframes contrast-signal{15%{opacity:.75}to{opacity:0;transform:translate(35%)}}.contrast-result-head{align-items:center}.contrast-result-head h2{margin:0}.contrast-result-head span{color:var(--muted);white-space:nowrap;font:.65rem Courier New,monospace}.contrast-ratio{text-align:center;padding:35px 0 8px}.contrast-ratio strong{letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-size:clamp(4rem,6vw,6rem);font-weight:900;line-height:1}.contrast-ratio strong span{color:var(--blue-bright);font-size:.46em}.contrast-ratio p{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin:9px 0 0;font-size:.7rem;font-weight:800}.contrast-checks{border-block:1px solid var(--line)}.contrast-checks>div{justify-content:space-between;gap:10px;padding:11px 0;font-size:.76rem;display:flex}.contrast-checks>div+div{border-top:1px solid var(--line)}.contrast-checks small{color:var(--muted);white-space:nowrap;font-size:.68rem}.contrast-checks strong{text-align:right;min-width:48px}.contrast-checks strong.pass{color:#65d6a4}.contrast-checks strong.fail{color:#ff8da3}.contrast-previews{gap:10px;padding-top:28px;display:grid}.contrast-previews h3{letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px;font-size:.72rem;font-weight:800}.contrast-preview{border-radius:3px;min-height:132px;padding:16px;overflow:hidden}.contrast-preview strong{font-size:1.35rem;line-height:1.1}.contrast-preview p{margin:6px 0 0;font-size:.83rem;line-height:1.35}@media (min-width:1051px){.contrast-editor,.contrast-result{padding:18px 22px}.contrast-editor{gap:15px}.contrast-editor-heading,.contrast-result-head{padding-bottom:13px}.contrast-editor h2,.contrast-result h2{font-size:1.35rem}.contrast-colour-chip{width:42px;height:42px}.contrast-hex-input{height:42px}.contrast-field-help{margin-top:-11px}.contrast-control-group{gap:7px;padding-top:12px}.contrast-slider-row{min-height:32px}.contrast-css{padding-top:13px}.contrast-ratio{padding:18px 0 4px}.contrast-ratio strong{font-size:5rem}.contrast-checks>div{padding:10px 0}.contrast-previews{gap:8px;padding-top:16px}.contrast-preview{min-height:125px;padding:15px}.contrast-preview strong{font-size:1.15rem}.contrast-preview p{font-size:.76rem}}@media (max-width:1050px){.contrast-workspace{grid-template-columns:1fr 1fr}.contrast-result{grid-area:1/1/auto/-1}.contrast-editor{grid-row:2}.contrast-ratio{padding-top:20px}.contrast-previews{grid-template-columns:1fr 1fr}.contrast-previews h3{grid-column:1/-1}}@media (max-width:700px){.tool-page:has(.contrast-workspace) .tool-main{padding-block:18px 32px}.tool-page:has(.contrast-workspace) .tool-intro{padding:18px;display:block}.tool-page:has(.contrast-workspace) .tool-intro p{margin-top:9px}}@media (max-width:680px){.contrast-workspace{grid-template-columns:1fr}.contrast-editor,.contrast-result{grid-area:auto/1;padding:20px}.contrast-result{grid-row:1}.contrast-previews{grid-template-columns:1fr}.contrast-previews h3{grid-column:auto}.contrast-ratio strong{font-size:4.3rem}}@media (prefers-reduced-motion:reduce){.contrast-result{transition:none}.contrast-result-flare{animation:none}.contrast-slider-track input::-webkit-slider-thumb{transition:none}.contrast-slider-track input::-moz-range-thumb{transition:none}}