:root{--selected-color:#0f766e}.colorconv-page{color:#172033}.colorconv-heading{margin-bottom:28px}.colorconv-eyebrow{margin:0 0 8px;color:#087d70;font-size:.78rem;font-weight:900}.colorconv-heading h1{margin:0 0 12px;color:#111827;font-size:2.15rem;line-height:1.25;letter-spacing:0}.colorconv-heading>p:last-child{max-width:800px;margin:0;color:#5c697d;font-size:.92rem;line-height:1.75}.colorconv-tool{overflow:hidden;border:1px solid #d8e1eb;border-radius:8px;background:#fff}.colorconv-picker{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(150px,.42fr);gap:14px;align-items:end;padding:22px;border-bottom:1px solid #e1e7ee;background:#f8fafc}.colorconv-picker h2,.colorconv-panel h2{margin:0 0 5px;color:#1d2a3d;font-size:1.08rem;letter-spacing:0}.colorconv-picker p{margin:0;color:#718096;font-size:.76rem;line-height:1.6}.colorconv-color,.colorconv-hex{display:grid;gap:6px;color:#2d3b50;font-size:.73rem;font-weight:900}.colorconv-color{grid-template-columns:46px auto;align-items:center}.colorconv-color input{width:46px;height:44px;margin:0;padding:3px;border-radius:7px;cursor:pointer}.colorconv-color span{white-space:nowrap}.colorconv-hex input{width:100%;height:44px;margin:0;text-transform:uppercase}.colorconv-preview{position:relative;display:grid;place-items:end start;min-height:168px;padding:22px;background:var(--selected-color);transition:background-color .15s}.colorconv-preview:after{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.38),transparent 65%);content:""}.colorconv-preview div{position:relative;z-index:1;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.32)}.colorconv-preview span,.colorconv-preview strong{display:block}.colorconv-preview span{font-size:.7rem}.colorconv-preview strong{margin-top:3px;font-size:1.25rem}.colorconv-panels{display:grid;grid-template-columns:1fr 1fr}.colorconv-panel{min-width:0;padding:22px}.colorconv-panel+section{border-left:1px solid #e1e7ee}.colorconv-panel header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}.colorconv-panel header span{color:#718096;font-size:.67rem}.colorconv-panel header p{margin:0;padding:5px 8px;border-radius:6px;background:#f0f4f7;color:#637187;font-size:.67rem;font-weight:900}.colorconv-channels{display:grid;gap:15px}.colorconv-channels label{display:grid;grid-template-columns:85px minmax(0,1fr) 72px;gap:10px;align-items:center;margin:0}.colorconv-channels label>span{color:#536176;font-size:.68rem}.colorconv-channels label strong{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:5px;border-radius:5px;color:#fff}.channel-r strong{background:#d8514a}.channel-g strong{background:#359568}.channel-b strong{background:#387db6}.channel-c strong{background:#159eb5}.channel-m strong{background:#c54586}.channel-y strong{background:#d7a800}.channel-k strong{background:#343b45}.colorconv-channels input[type=range]{width:100%;margin:0;accent-color:var(--selected-color)}.colorconv-channels input[type=number]{width:100%;height:40px;margin:0;padding:0 9px}.colorconv-value{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center;margin-top:20px;padding:8px;border:1px solid #dce4ec;border-radius:7px;background:#f8fafc}.colorconv-value code{overflow:auto;padding-left:4px;color:#29384d;font-size:.68rem;white-space:nowrap}.colorconv-value button,.colorconv-footer button{min-height:36px;margin:0;padding:0 10px;border:1px solid #d3dde7;border-radius:6px;background:#fff;color:#3c4c61;font-size:.67rem}.colorconv-footer{display:flex;align-items:center;gap:8px;padding:16px 22px;border-top:1px solid #e1e7ee;background:#f8fafc}.colorconv-footer div{min-width:0;margin-right:auto}.colorconv-footer strong,.colorconv-footer span{display:block}.colorconv-footer strong{color:#26354a;font-size:.76rem}.colorconv-footer span{color:#788599;font-size:.65rem}.colorconv-status{min-height:22px;margin:0;padding:0 22px 18px;background:#f8fafc;color:#637187;font-size:.71rem}.colorconv-guide{margin-top:42px;padding-top:30px;border-top:1px solid #dde4ec}.colorconv-guide>header h2{margin:0 0 10px;color:#172033;font-size:1.45rem;letter-spacing:0}.colorconv-guide>header p{max-width:820px;margin:0;color:#5d6b7f;font-size:.87rem;line-height:1.75}.colorconv-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin-top:8px}.colorconv-guide-grid section{padding:22px 0;border-bottom:1px solid #e2e7ee}.colorconv-guide-grid h3{margin:0 0 8px;color:#213047;font-size:.95rem;letter-spacing:0}.colorconv-guide-grid p{margin:0;color:#5f6d80;font-size:.81rem;line-height:1.78}.colorconv-note{margin-top:20px;padding:16px 17px;border:1px solid #dce3ec;border-radius:8px;background:#f8fafc;color:#526477;font-size:.77rem;line-height:1.7}@media screen and (max-width:980px){.colorconv-picker{grid-template-columns:1fr auto minmax(150px,.5fr)}}@media screen and (max-width:700px){.colorconv-heading h1{font-size:1.65rem}.colorconv-picker{grid-template-columns:1fr}.colorconv-color{grid-template-columns:46px 1fr}.colorconv-panels,.colorconv-guide-grid{grid-template-columns:1fr}.colorconv-panel+section{border-top:1px solid #e1e7ee;border-left:0}.colorconv-preview{min-height:135px}.colorconv-footer{display:grid;grid-template-columns:1fr 1fr}.colorconv-footer div{grid-column:1/-1}.colorconv-footer button{width:100%}}@media screen and (max-width:480px){.colorconv-picker,.colorconv-panel{padding:16px}.colorconv-channels label{grid-template-columns:78px minmax(0,1fr) 64px;gap:7px}.colorconv-value{grid-template-columns:1fr}.colorconv-value button{width:100%}}
.colorconv-preview span,.colorconv-preview strong{color:#fff!important}