.small{font-size:.82rem;line-height:1.7}.color-hero{height:150px;display:flex;align-items:flex-end;justify-content:space-between;border-radius:12px;padding:20px;background:#245bd6;color:white}.color-hero strong{font-size:1.5rem;letter-spacing:.04em}.color-form{display:flex;gap:10px;align-items:end}.color-form label{flex:1;min-width:0}.color-form button{flex-shrink:0}.color-pair{grid-template-columns:1fr 1fr}.coordinate{grid-template-columns:1fr 1fr}.coordinate button{grid-column:1/-1}input[type=color]{width:100%;height:44px;padding:4px;border:1px solid var(--border);border-radius:8px;background:white}.canvas-wrap{max-height:480px;overflow:auto;border-radius:8px}canvas{width:100%;height:auto;cursor:crosshair;border:1px solid var(--border)}#contrastPreview{padding:24px 18px;border:1px solid var(--border);border-radius:8px}#contrastPreview strong{font-size:1.25rem}#contrastPreview p{font-size:.85rem;margin:8px 0 0}.ratio{font-size:2rem;font-weight:750;font-variant-numeric:tabular-nums}.palette{display:flex;flex-wrap:wrap;gap:8px}.palette button{width:calc(50% - 4px);border:1px solid var(--border);font-size:.8rem;min-width:0}h1,h2{text-wrap:balance;scroll-margin-top:20px}button,a,input,select{touch-action:manipulation}.pass{color:#17654f}.fail{color:#a8333b}@media(max-width:400px){.color-form{flex-wrap:wrap}.color-form label{flex-basis:100%}.color-form button{width:100%}}