:root{--tag-pass:#1a8917;--tag-fail:#e63946;--bg:#fffbe6}.ccc-wrapper{background:var(--bg)}.preview{text-align:center;margin-bottom:25px}.text-sample{font-size:6rem;font-weight:bold;margin-bottom:1rem;margin-top:1rem}.ratio{font-size:2rem;margin-bottom:1rem}.status{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.tag{padding:0.5rem 1rem;border-radius:5px;background:#ddd;font-weight:bold}.pass{background:var(--tag-pass);color:white}.fail{background:var(--tag-fail);color:white}.controls{display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:25px}.color-box{flex:1;min-width:280px;display:flex;flex-direction:column;gap:0.5rem}.input-group{display:flex;gap:0.5rem}input[type="text"]{flex:1;padding:0.5rem;font-size:1rem;margin:0}.copy-btn{padding:0.5rem;cursor:pointer}.actions{display:flex;gap:1rem;justify-content:center;margin-bottom:25px}.actions
button{padding:0.7rem 1.5rem;font-size:1rem;cursor:pointer}