.contrast-page{--contrast-accent:#7447ef;--contrast-ink:#07183d;--contrast-foreground:#0b1b46;--contrast-background:#fff}.contrast-workflow{padding:clamp(24px,3vw,48px)}.contrast-workspace-grid{grid-template-columns:minmax(0,1fr) minmax(360px,.92fr);gap:22px;display:grid}.contrast-input-panel,.contrast-result-panel,.contrast-preview{background:#f9fbffeb;border:1px solid #d8e4f7;border-radius:26px;padding:clamp(22px,2.2vw,34px)}.contrast-input-hint{color:#52698f;margin:8px 0 22px;line-height:1.65}.contrast-color-fields{gap:14px;display:grid}.contrast-color-card{background:#fff;border:1px solid #d8e4f7;border-radius:19px;gap:14px;padding:17px;display:grid}.contrast-color-card>span:first-child{gap:4px;display:grid}.contrast-color-card strong{color:var(--contrast-ink);font-size:1.02rem}.contrast-color-card small{color:#60769b;line-height:1.45}.contrast-color-control{grid-template-columns:62px minmax(0,1fr);align-items:center;gap:13px;display:grid}.contrast-color-control>input[type=color]{cursor:pointer;background:#fff;border:1px solid #cbdaf1;border-radius:14px;width:62px;height:62px;padding:4px}.contrast-color-control>span{gap:5px;display:grid}.contrast-color-control em{color:#64799d;font-size:.75rem;font-style:normal;font-weight:800}.contrast-color-control input[type=text]{width:100%;min-width:0;min-height:48px;color:var(--contrast-ink);font:inherit;text-transform:uppercase;background:#fff;border:1px solid #cbdaf1;border-radius:13px;padding:0 13px;font-weight:900}.contrast-color-control input[type=text]:focus{border-color:var(--contrast-accent);outline:0;box-shadow:0 0 0 3px #7447ef21}.contrast-actions{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.contrast-actions button{flex:190px}.contrast-examples{border:0;min-width:0;margin:22px 0 0;padding:0}.contrast-examples legend{color:#243a63;margin-bottom:10px;font-weight:850}.contrast-examples>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;display:grid}.contrast-examples button{color:#263c65;cursor:pointer;min-width:0;min-height:48px;font:inherit;text-align:left;background:#fff;border:1px solid #d5e0f2;border-radius:13px;align-items:center;gap:9px;padding:8px 11px;font-size:.86rem;font-weight:800;display:flex}.contrast-examples button:hover{background:#f7f4ff;border-color:#a68ef5}.contrast-examples button>span{border:6px solid var(--example-background);background:var(--example-foreground);border-radius:8px;flex:none;width:34px;height:27px;box-shadow:0 0 0 1px #d5e0f2}.contrast-ratio-card{text-align:center;background:linear-gradient(135deg,#efeaff,#edf7ff);border-radius:22px;place-items:center;padding:24px;display:grid}.contrast-ratio-card span{color:#5d6f91;font-weight:800}.contrast-ratio-card strong{color:var(--contrast-ink);margin-top:3px;font-size:clamp(2.3rem,6vw,4rem);line-height:1}.contrast-check-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:15px 0 0;padding:0;list-style:none;display:grid}.contrast-check-list li{background:#fff;border:1px solid #dbe6f7;border-radius:15px;justify-content:space-between;align-items:center;gap:10px;min-width:0;padding:13px;display:flex}.contrast-check-list li>span{gap:3px;min-width:0;display:grid}.contrast-check-list strong{color:var(--contrast-ink);font-size:.88rem}.contrast-check-list small{color:#64799d;font-size:.75rem}.contrast-check-list em{border-radius:999px;flex:none;padding:6px 9px;font-size:.75rem;font-style:normal;font-weight:900}.contrast-check-list .is-pass em{color:#087c64;background:#e4f8f0}.contrast-check-list .is-fail em{color:#bc3345;background:#fff0f1}.contrast-copy{width:100%;margin-top:16px}.contrast-copy-status{color:#087c64;min-height:22px;margin:8px 0 0;font-weight:750}.contrast-preview{margin-top:22px}.contrast-preview-canvas{border:1px solid color-mix(in srgb, var(--contrast-foreground), transparent 65%);background:var(--contrast-background);min-height:240px;color:var(--contrast-foreground);border-radius:20px;align-content:center;gap:18px;margin-top:18px;padding:clamp(24px,4vw,48px);display:grid}.contrast-preview-canvas p{margin:0;font-size:1rem;line-height:1.65}.contrast-preview-canvas>strong{font-size:clamp(1.5rem,4vw,2rem)}.contrast-preview-row{align-items:center;gap:18px;display:flex}.contrast-preview-button{border:2px solid;border-radius:12px;padding:11px 17px;font-weight:850}.contrast-preview-row i{font-size:2rem}.contrast-scope-note{color:#52698f;background:#eef4ff;border-radius:14px;align-items:flex-start;gap:9px;margin:14px 0 0;padding:12px 14px;line-height:1.55;display:flex}@media (width<=1050px){.contrast-workspace-grid{grid-template-columns:1fr}}@media (width<=680px){.contrast-workflow{padding:20px 14px}.contrast-input-panel,.contrast-result-panel,.contrast-preview{border-radius:20px;padding:20px 16px}.contrast-check-list,.contrast-examples>div{grid-template-columns:1fr}}@media (width<=420px){.contrast-color-control{grid-template-columns:52px minmax(0,1fr)}.contrast-color-control>input[type=color]{width:52px;height:52px}.contrast-actions{grid-template-columns:1fr;display:grid}}