.tool-detail-main:has(.color-converter-app)>.tool-detail-heading{display:none}.tool-detail-workspace:has(.color-converter-app){overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}.color-converter-app{color:#111b34;font-size:.72rem}.color-converter-app :where(button,input){font:inherit}.color-converter-app svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.color-converter-app .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.converter-hero{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:14px;margin:0 -20px 12px;padding:5px 20px 12px;background:radial-gradient(circle at 85% 20%,rgba(101,66,238,.07),transparent 34%),#fff}.converter-wheel{display:grid;width:56px;height:56px;place-items:center;border:1px solid #c9bbff;border-radius:11px;background:#faf8ff}.converter-wheel svg{width:40px;height:40px;stroke:none}.converter-wheel path:nth-child(1){fill:#ff5b74}.converter-wheel path:nth-child(2){fill:#ffb347}.converter-wheel path:nth-child(3){fill:#13bfa1}.converter-wheel path:nth-child(4){fill:#6042ed}.converter-hero h1{margin:0 0 5px;font-size:1.4rem;line-height:1.1;letter-spacing:-.03em}.converter-hero p{margin:0;color:#34425b;font-size:.68rem}.converter-hero button{display:flex;min-height:36px;align-items:center;gap:7px;padding:7px 13px;border:1px solid #d6deea;border-radius:8px;color:#243148;background:#fff;font-weight:700;cursor:pointer}
.converter-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.converter-panel,.converter-summary,.converter-history,.converter-info-grid article{border:1px solid #dce3ed;border-radius:9px;background:#fff}.converter-panel{min-width:0;padding:13px}.converter-panel.is-green{border-color:#d9ece1;background:#fcfffd}.converter-panel.is-orange{border-color:#f1e2cb;background:#fffdfa}.converter-panel h2,.converter-summary h2,.converter-history h2,.converter-info-grid h2{margin:0;color:#172238;font-size:.75rem}.converter-panel h2{display:flex;align-items:center;gap:8px;margin-bottom:12px}.converter-panel h2 span{color:#542cf2;font-size:1.1rem}.converter-panel.is-green h2 span{color:#16a34a}.converter-panel.is-orange h2 span{color:#f07800}.converter-format-row{display:flex;align-items:flex-end;gap:6px}.converter-format-row label{display:grid;min-width:0;flex:1;gap:5px;color:#28354c;font-size:.55rem;font-weight:700}.converter-format-row input{width:100%;height:35px;min-width:0;padding:7px 8px;border:1px solid #d9e0eb;border-radius:6px;color:#172238;background:#fff;font-size:.62rem;font-weight:700}.converter-format-row small{color:#64728a;text-align:center;font-size:.45rem;font-weight:600}.converter-format-row>button,.converter-format-row>i{display:grid;flex:0 0 34px;width:34px;height:35px;place-items:center;border:1px solid #d9e0eb;border-radius:6px;background:#fff}.converter-format-row>button{color:#26344d;cursor:pointer}.converter-format-row>i{border:0;background:#6c5ce7}.converter-hex-row label{flex:1}.converter-triplet label:first-child:before,.converter-quad label:first-child:before{content:none}.converter-triplet label:not(:first-child),.converter-quad label:not(:first-child){padding-top:16px}.converter-swap{display:grid;width:33px;height:33px;place-items:center;margin:10px auto;border:1px solid #ded7ff;border-radius:7px;color:#5d34ef;background:#fff;cursor:pointer}.is-green .converter-swap{border-color:#d5ebdd;color:#109640}.is-orange .converter-swap{border-color:#f4dfc4;color:#ef7900}.converter-quad{gap:5px}.converter-quad input{padding-inline:4px;text-align:center}
.converter-summary{position:relative;display:grid;grid-template-columns:150px 1fr;align-items:center;gap:14px;margin-top:10px;padding:12px}.converter-summary h2{grid-column:1/-1;padding-bottom:9px;border-bottom:1px solid #edf0f5}.converter-preview{display:grid;min-height:56px;place-items:center;border-radius:7px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.28)}.converter-preview strong{font-size:1rem}.converter-summary dl{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0}.converter-summary dl div{min-width:0}.converter-summary dt{margin-bottom:6px;color:#5634ef;font-size:.55rem;font-weight:800}.converter-summary dl div:nth-child(2) dt{color:#129545}.converter-summary dl div:nth-child(3) dt{color:#ef7900}.converter-summary dd{overflow:hidden;margin:0;color:#172238;font:600 .51rem "IBM Plex Mono",monospace;text-overflow:ellipsis;white-space:nowrap}.converter-summary output{position:absolute;right:12px;top:12px;color:#64728a;font-size:.48rem}
.converter-history{margin-top:10px;padding:12px}.converter-history>div{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:11px}.converter-history button{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:8px;min-width:0;padding:7px;border:1px solid #dce3ed;border-radius:7px;color:#26344d;background:#fff;cursor:pointer}.converter-history i{display:block;width:34px;height:34px;border-radius:6px}.converter-history b{overflow:hidden;font:600 .48rem "IBM Plex Mono",monospace;text-overflow:ellipsis}.converter-history p{grid-column:1/-1;margin:0;color:#65738a;font-size:.58rem}.converter-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}.converter-info-grid article{padding:12px}.converter-info-grid h2{display:flex;align-items:center;gap:7px;margin-bottom:8px}.converter-info-grid h2 span{display:grid;width:25px;height:25px;place-items:center;border-radius:7px;color:#5634ef;background:#efecff}.converter-info-grid :is(ol,ul){display:grid;gap:5px;margin:0;padding:0;list-style:none;counter-reset:steps}.converter-info-grid li{color:#48566e;font-size:.58rem;line-height:1.4}.converter-info-grid ol li{position:relative;padding-left:21px;counter-increment:steps}.converter-info-grid ol li:before{position:absolute;left:0;display:grid;width:16px;height:16px;place-items:center;border-radius:5px;color:#5634ef;background:#efecff;font-size:.47rem;font-weight:800;content:counter(steps)}.converter-info-grid ul li:before{margin-right:8px;color:#0b9e49;font-weight:800;content:"✓"}.converter-info-grid .is-green{border-color:#d8ebdf;background:#fbfffc}.converter-info-grid .is-green h2{color:#087c3b}
@media(max-width:1050px){.converter-panels{grid-template-columns:1fr 1fr}.converter-panel:last-child{grid-column:1/-1}.converter-info-grid{grid-template-columns:1fr}}
@media(max-width:720px){.converter-hero{grid-template-columns:50px 1fr;margin:0;padding:2px 0 11px}.converter-wheel{width:48px;height:48px}.converter-hero h1{font-size:1.15rem}.converter-hero button{grid-column:1/-1;justify-self:end}.converter-panels{grid-template-columns:1fr}.converter-panel:last-child{grid-column:auto}.converter-summary{grid-template-columns:1fr}.converter-summary dl{grid-template-columns:1fr}.converter-history>div{grid-template-columns:1fr 1fr}}

/* Compact alignment pass */
.converter-panel{display:flex;min-height:270px;flex-direction:column;padding:13px 14px}
.converter-panel h2{min-height:22px;margin-bottom:10px}
.converter-format-row{min-height:67px;align-items:flex-start;gap:7px}
.converter-format-row>button{margin-top:16px}
.converter-swap{flex:0 0 32px;margin:4px auto 7px}
.converter-color-picker{display:block!important;flex:0 0 43px!important;width:43px!important;margin-top:16px}
.converter-color-picker input[type=color]{box-sizing:border-box;display:block;width:43px;height:35px;padding:3px;border:1px solid #d9e0eb;border-radius:7px;background:#fff;cursor:pointer}
.converter-color-picker input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.converter-color-picker input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}
.converter-color-picker input[type=color]::-moz-color-swatch{border:0;border-radius:5px}
.converter-summary{grid-template-columns:150px minmax(0,1fr);gap:14px;padding:9px 12px 10px}
.converter-summary h2{padding-bottom:7px}
.converter-preview{height:50px;min-height:50px}
.converter-summary dl{grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}
.converter-summary output{top:10px}
.converter-history{padding:9px 12px 10px}
.converter-history>div{margin-top:7px}
.converter-history button{grid-template-columns:30px max-content;justify-content:start;gap:9px;height:43px;padding:6px 9px;text-align:left}
.converter-history i{width:30px;height:30px}
.converter-history b{justify-self:start;text-align:left}
@media(max-width:720px){.converter-panel{min-height:0}.converter-summary{grid-template-columns:1fr}.converter-summary dl{grid-template-columns:1fr;gap:9px}}