.ftcl-converter-page h1{display:none!important}
.ftcl-converter-page .ftcl-cc-app h1{display:block!important}
.ftcl-cc-app,.ftcl-cc-app *{box-sizing:border-box}
.ftcl-cc-app{--ink:#211f20;--line:#dcd4d1;--paper:#f4f0ee;--brand:#998484;max-width:1240px;margin:0 auto;background:#fff;color:var(--ink);font:17px/1.3 Abel,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.ftcl-cc-app h1,.ftcl-cc-app h2,.ftcl-cc-app h3,.ftcl-cc-app p{margin:0;padding:0}
.ftcl-cc-app h1,.ftcl-cc-app h2,.ftcl-cc-app h3,.ftcl-cc-app button,.ftcl-cc-kicker,.ftcl-cc-number,.ftcl-cc-fields label>span{font-family:Oswald,Impact,sans-serif;font-weight:500}
.ftcl-cc-hero{padding:24px clamp(24px,5.8vw,72px) 26px;color:#fff;background:radial-gradient(circle at 85% 25%,#ffffff18 0 8%,transparent 8.2%),radial-gradient(circle at 77% 90%,#ffffff0b 0 22%,transparent 22.2%),linear-gradient(110deg,#514448,#776468)}
.ftcl-cc-app .ftcl-cc-hero h1{font-size:clamp(30px,3.5vw,48px);line-height:1.12;color:#fff!important;margin:18px 0 16px}
.ftcl-cc-hero>p:last-child{font-size:21px;line-height:1.3}
.ftcl-cc-kicker{font-size:12px;letter-spacing:.14em;color:#776264;margin-bottom:5px!important}
.ftcl-cc-hero .ftcl-cc-kicker{color:#fff}
.ftcl-cc-workbench{display:grid;grid-template-columns:1fr 1.15fr;gap:10px;padding:10px;background:#eae5e3}
.ftcl-cc-step{display:grid;grid-template-columns:43px minmax(0,1fr);border:1px solid var(--line)}
.ftcl-cc-number{font-size:18px;text-align:center;padding-top:24px;color:#786566;background:var(--paper);border-right:1px solid var(--line)}
.ftcl-cc-content{padding:22px;background:#fff;min-width:0}
.ftcl-cc-app h2{font-size:29px;line-height:1.12;color:var(--ink);margin-bottom:18px}
.ftcl-cc-app button{background:#fff;border:1px solid var(--line);color:var(--ink);min-height:44px;padding:9px 13px;font-size:14px;line-height:1.2;cursor:pointer}
.ftcl-cc-app button:hover{border-color:#57494b;background:#f4f0ee}
.ftcl-cc-app button:focus-visible,.ftcl-cc-app input:focus-visible,.ftcl-cc-app summary:focus-visible{outline:3px solid #80696e;outline-offset:3px}
.ftcl-cc-app button:disabled{opacity:.6;cursor:wait}
.ftcl-cc-modes{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px}
.ftcl-cc-app .ftcl-cc-modes button{padding:8px 11px}
.ftcl-cc-app .ftcl-cc-modes button[aria-pressed=true],.ftcl-cc-app .ftcl-cc-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.ftcl-cc-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ftcl-cc-fields[data-mode=hex]{grid-template-columns:1fr}
.ftcl-cc-fields[data-mode=cmyk]{grid-template-columns:repeat(2,minmax(0,1fr))}
.ftcl-cc-fields label>span{display:block;font-size:12px;letter-spacing:.02em;margin-bottom:6px}
.ftcl-cc-app .ftcl-cc-fields input{width:100%;min-width:0;border:1px solid #b4a5a5;background:#fff;color:var(--ink);font:22px/1.2 Abel,Arial,sans-serif;padding:10px;min-height:46px;border-radius:0}
.ftcl-cc-fields input[aria-invalid=true]{border-color:#a31622}
.ftcl-cc-help{font-size:14px;color:#675d60;margin:8px 0 12px!important}
.ftcl-cc-error{color:#9f1020;font-weight:bold;font-size:15px;margin-top:8px!important}
.ftcl-cc-error:empty{display:none}
.ftcl-cc-swatch{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:18px;background:#998484;min-height:96px}
.ftcl-cc-swatch strong{font:500 30px/1 Oswald,Impact,sans-serif}
.ftcl-cc-picker-label{display:flex;align-items:center;gap:8px;font-weight:bold;font-size:15px}
.ftcl-cc-app input[type=color]{padding:0;border:2px solid currentColor;background:transparent;width:44px;height:44px;cursor:pointer}
.ftcl-cc-examples{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:12px;font-size:14px}
.ftcl-cc-app .ftcl-cc-examples button{width:44px;padding:6px}
.ftcl-cc-examples i{display:block;width:28px;height:28px;border:1px solid #888;border-radius:50%}
.ftcl-cc-results{display:grid;gap:7px}
.ftcl-cc-result{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;background:var(--paper);padding:11px 12px}
.ftcl-cc-app .ftcl-cc-result h3{font-size:13px;letter-spacing:.04em;color:#67575a;line-height:1.2;margin-bottom:4px}
.ftcl-cc-result code{font:19px/1.3 Abel,Arial,sans-serif;overflow-wrap:anywhere;user-select:all;color:var(--ink);background:none;padding:0}
.ftcl-cc-result:last-child{border-left:3px solid #998484}
.ftcl-cc-app .ftcl-cc-note{border-left:3px solid var(--brand);padding-left:12px;margin-top:13px!important;font-size:14px;line-height:1.35}
.ftcl-cc-output{display:grid;grid-template-columns:43px minmax(0,1fr);background:var(--ink);color:#fff}
.ftcl-cc-output .ftcl-cc-number{background:transparent;color:#d3c4c4;border-color:#655758}
.ftcl-cc-output .ftcl-cc-content{background:transparent;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ftcl-cc-output .ftcl-cc-kicker{color:#d3c4c4}
.ftcl-cc-app .ftcl-cc-output h2{color:#fff!important;margin-bottom:7px}
.ftcl-cc-actions{display:flex;gap:8px;flex-wrap:wrap}
.ftcl-cc-app .ftcl-cc-output button{background:transparent;color:#fff;border-color:#a99799}
.ftcl-cc-app .ftcl-cc-output button:hover{background:#4c4043}
.ftcl-cc-status{font-size:15px;flex-basis:100%}
.ftcl-cc-foot{padding:18px 24px;background:var(--paper);border:1px solid var(--line);font-size:14px;color:#62575b}
.ftcl-cc-foot details{margin-bottom:12px}
.ftcl-cc-foot summary{cursor:pointer;font-weight:bold;color:var(--ink);min-height:28px}
.ftcl-cc-foot details p{margin:7px 0!important}
.ftcl-cc-foot a{color:#58454a;text-decoration:underline}
.ftcl-cc-signature{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:760px){.ftcl-cc-workbench{grid-template-columns:1fr;padding:6px;gap:6px}.ftcl-cc-hero{padding:18px 20px}.ftcl-cc-app .ftcl-cc-hero h1{font-size:32px;margin:12px 0}.ftcl-cc-hero>p:last-child{font-size:18px}.ftcl-cc-step,.ftcl-cc-output{grid-template-columns:29px minmax(0,1fr)}.ftcl-cc-number{font-size:15px;padding-top:17px}.ftcl-cc-content{padding:15px 12px}.ftcl-cc-app h2{font-size:25px;margin-bottom:12px}.ftcl-cc-modes{gap:3px}.ftcl-cc-app .ftcl-cc-modes button{font-size:13px;padding:7px 9px}.ftcl-cc-result{padding:8px}.ftcl-cc-result code{font-size:18px}.ftcl-cc-swatch{min-height:80px;padding:12px}.ftcl-cc-picker-label{font-size:13px}.ftcl-cc-foot{padding:16px}.ftcl-cc-output .ftcl-cc-content{gap:12px}.ftcl-cc-status{margin:0!important}}

@media(max-width:760px){.ftcl-cc-examples>span{flex-basis:100%}.ftcl-cc-examples{gap:5px}.ftcl-cc-app .ftcl-cc-examples button{width:44px;flex-shrink:0}}