@font-face{font-family:Geist;src:url('/fonts/geist-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url('/fonts/geist-mono-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
/* Inspector look (2026-10-22): flat ink background, solid hairlines, small corners,
   mono labels and keycap buttons with a hard bottom edge. */
:root{font-family:Geist,Arial,sans-serif;color-scheme:dark;--ft-bg:#0a0a0c;--ft-panel:#0d0d10;--ft-card:#111114;--ft-card2:#17171b;--ft-line:#222226;--ft-line2:#2e2e34;--ft-line3:#414149;--ft-text:#f5f4f7;--ft-dim:#a4a1ab;--ft-faint:#75727d;--ft-purple:#c4a5ed;--ft-sel:#b58df4;--ft-green:#8fd19e;--ft-red:#f08a8a;--ft-amber:#f0c674;--ft-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;--ft-edge:#000;--ft-ease:cubic-bezier(.2,.8,.2,1)}
html{overflow-x:clip}
body.free-tools-page{margin:0;background:var(--ft-bg);color:var(--ft-text);-webkit-font-smoothing:antialiased;overflow-x:clip}
.free-tools-page main{padding:0 var(--sp-page-gutter,24px)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ft{max-width:1240px;margin:0 auto}
.ft :where(a){color:inherit}
.ft .breadcrumb{display:flex;flex-wrap:wrap;gap:10px;font:500 11.5px var(--ft-mono);letter-spacing:.02em;color:var(--ft-faint);margin:0 0 22px}
.ft .breadcrumb a{text-decoration:none}.ft .breadcrumb a:hover{color:var(--ft-text)}
.ft-eyebrow{font:500 11.5px var(--ft-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ft-dim);margin:0 0 12px}
.ft-hero{padding:var(--sp-page-gap,40px) 0 28px}
.ft-hero h1{font-size:clamp(36px,5.6vw,64px);line-height:1.03;letter-spacing:-.05em;margin:0 0 16px;max-width:900px;font-weight:650}
.ft-hero-center{text-align:center}.ft-hero-center h1,.ft-hero-center .ft-lead{margin-left:auto;margin-right:auto}.ft-hero-center .breadcrumb{justify-content:center}
.ft-dot{color:inherit}
.ft-lead{font-size:17px;line-height:1.6;color:var(--ft-dim);max-width:660px;margin:0 0 24px}

/* Keycap buttons: solid border, a hard 2px bottom edge, lifts 1px on hover and presses flat. */
.ft-btn{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 14px;border-radius:8px;border:1px solid var(--kl-38383f,#38383f);background:var(--kb-1b1b1f,#1b1b1f);color:var(--ft-text);font:600 13.5px/1 Geist,Arial,sans-serif;letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:inset 0 1px 0 var(--ks-ffffff14,#ffffff14),0 2px 0 var(--ft-edge);transition:transform .09s var(--ft-ease),box-shadow .09s var(--ft-ease),background .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.ft-btn:hover{background:var(--kb-212126,#212126);border-color:var(--kl-4a4a53,#4a4a53);transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--ks-ffffff17,#ffffff17),0 3px 0 var(--ft-edge)}
.ft-btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 var(--ks-ffffff0d,#ffffff0d),0 0 0 var(--ft-edge);transition-duration:.04s}
.ft-btn:disabled,.ft-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:inset 0 1px 0 var(--ks-ffffff0d,#ffffff0d),0 2px 0 var(--ft-edge)}
.ft-btn-primary{background:#f3f1f6;color:#0c0b0f;border-color:#fff;box-shadow:inset 0 -1px 0 #d8d3e0,0 2px 0 #77708a}
.ft-btn-primary:hover{background:#fff;border-color:#fff;box-shadow:inset 0 -1px 0 #d8d3e0,0 3px 0 #77708a}
.ft-btn-primary:active{box-shadow:inset 0 1px 2px var(--ks-0002,#0002),0 0 0 #77708a}
.ft-btn-accent{background:var(--kb-c4a5ed,#c4a5ed);color:#170e22;border-color:var(--kl-dcc8f7,#dcc8f7);box-shadow:inset 0 1px 0 var(--ks-ffffff59,#ffffff59),0 2px 0 #5f4687}
.ft-btn-accent:hover{background:var(--kb-cfb4f2,#cfb4f2);border-color:var(--kl-e6d6fa,#e6d6fa);box-shadow:inset 0 1px 0 var(--ks-ffffff59,#ffffff59),0 3px 0 #5f4687}
.ft-btn-accent:active{box-shadow:inset 0 1px 2px var(--ks-0003,#0003),0 0 0 #5f4687}
.ft-btn-small{height:32px;padding:0 11px;border-radius:7px;font-size:12.5px}
.ft-btn-ghost{background:transparent;border-color:transparent;box-shadow:none}
.ft-btn-ghost:hover{background:var(--kb-ffffff0a,#ffffff0a);border-color:var(--ft-line2);box-shadow:none;transform:none}
.ft-btn svg,.ft-btn img{flex:none}
.ft-btn:focus-visible,.ft-seg button:focus-visible,.ft-tabs button:focus-visible,.rc-chip:focus-visible{outline:2px solid var(--ft-sel);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ft-btn,.ft-btn:hover,.ft-btn:active{transform:none;transition:none}}
kbd{display:inline-block;font:600 10.5px/1 var(--ft-mono);padding:3px 6px 2px;border-radius:5px;border:1px solid var(--kl-0000002e,#0000002e);border-bottom-width:2px;background:var(--kb-00000010,#00000010)}

/* Link form */
.ft-form{max-width:720px}
.ft-field{display:flex;align-items:center;gap:6px;height:58px;padding:0 6px 0 20px;border:1px solid var(--ft-line2);border-radius:16px;background:var(--kb-121115,#121115);transition:border-color .15s,box-shadow .15s}
.ft-field:focus-within{border-color:var(--kl-6b5a86,#6b5a86);box-shadow:0 0 0 4px var(--ks-c4a5ed1f,#c4a5ed1f)}
.ft-field input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ft-text);font:500 17px Geist,Arial,sans-serif;outline:0}
.ft-field input::placeholder{color:var(--kt-6f6a79,#6f6a79)}
.ft-field button{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border:0;border-radius:12px;background:var(--ft-text);color:#0b0a0d;font:650 15px Geist,Arial,sans-serif;cursor:pointer;white-space:nowrap}
.ft-field button:hover{background:#fff}
.ft-spinner{display:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--kl-0b0a0d33,#0b0a0d33);border-top-color:var(--kl-0b0a0d,#0b0a0d);animation:ft-spin .8s linear infinite}
[aria-busy=true] .ft-spinner{display:inline-block}
@keyframes ft-spin{to{transform:rotate(360deg)}}
.ft-form .form-challenge{margin-top:12px}
.ft-status{margin:12px 2px 0;font-size:14px;line-height:1.5;color:var(--ft-dim)}
.ft-status.error{color:var(--ft-red)}.ft-status.working{color:var(--ft-purple)}
.ft-seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--ft-line2);border-radius:9px;background:var(--ft-panel)}
.ft-seg-wrap{flex-wrap:wrap}
.ft-seg button{height:30px;padding:0 12px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ft-dim);font:550 12.5px Geist,Arial,sans-serif;cursor:pointer;transition:color .15s,background .15s}
.ft-seg button:hover{color:var(--ft-text)}
.ft-seg button[aria-checked=true],.ft-seg button[aria-selected=true],.ft-seg button[aria-pressed=true]{background:var(--kb-232328,#232328);border-color:var(--kl-3a3a42,#3a3a42);color:var(--ft-text);box-shadow:inset 0 1px 0 var(--ks-ffffff12,#ffffff12),0 1px 0 var(--ks-000,#000)}
.ft-tabs{display:flex;gap:2px;border-bottom:1px solid var(--ft-line);margin:8px 0 0}
.ft-tabs button{padding:11px 16px;background:none;border:0;border-bottom:2px solid transparent;color:var(--ft-dim);font:600 14px Geist,Arial,sans-serif;cursor:pointer;margin-bottom:-1px}
.ft-tabs button:hover{color:var(--ft-text)}
.ft-tabs button[aria-selected=true]{color:var(--ft-text);border-bottom-color:var(--ft-sel)}
select{height:32px;padding:0 10px;border-radius:7px;border:1px solid var(--ft-line2);background:var(--ft-panel);color:var(--ft-text);font:500 13px Geist,Arial,sans-serif}
.ft-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);padding:10px 14px;border-radius:8px;border:1px solid #fff;background:var(--ft-text);color:#0b0a0d;font-size:13px;font-weight:600;z-index:100;box-shadow:0 2px 0 #77708a}

/* Hub and related tools */
.ft-related{margin-top:56px;padding-top:36px;border-top:1px solid var(--ft-line)}
.ft-related h2,.ft-faq h2{font-size:20px;letter-spacing:-.02em;margin:0 0 14px}
.ft-faq{margin-top:48px;max-width:820px}
.ft-faq details{border-top:1px solid var(--ft-line);padding:14px 0}
.ft-faq summary{cursor:pointer;font-weight:600;font-size:15px}
.ft-faq p{margin:10px 0 0;color:var(--ft-dim);line-height:1.65;font-size:14.5px}
.ft-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:40px 0 0;padding:22px 24px;border-radius:16px;border:1px solid var(--kl-3b3150,#3b3150);background:linear-gradient(90deg,var(--kb-1b1624,#1b1624),var(--kb-131216,#131216))}
.ft-cta h2{margin:0 0 4px;font-size:18px;letter-spacing:-.02em}
.ft-cta p{margin:0;font-size:14px;color:var(--ft-dim);line-height:1.55;max-width:640px}
.ft-card{background:var(--ft-card);border:1px solid var(--ft-line);border-radius:16px;padding:18px;min-width:0}
.ft-card h2{font-size:16px;margin:0 0 4px;letter-spacing:-.01em}
.ft-sub{font-size:12.5px;color:var(--ft-dim);margin:0 0 14px;line-height:1.5}
.ft-site{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px;align-items:center;margin:8px 0 18px}
.ft-site img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:12px;border:1px solid var(--ft-line2)}
.ft-site h2{font-size:26px;letter-spacing:-.03em;margin:0 0 6px}
.ft-site p{margin:0 0 10px;color:var(--ft-dim);font-size:14px;line-height:1.55}
.ft-site .ft-links{display:flex;flex-wrap:wrap;gap:8px}
.ft-chip{display:inline-flex;align-items:center;gap:6px;font:500 11.5px var(--ft-mono);padding:3px 8px;border-radius:99px;border:1px solid var(--ft-line2);color:var(--ft-text)}

/* Font finder */
.ff-fonts{display:grid;gap:12px}
.ff-font{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;padding:20px;border:1px solid var(--ft-line);border-radius:16px;background:var(--ft-card)}
.ff-specimen{font-size:56px;line-height:1;letter-spacing:-.02em;margin:0 0 12px;word-break:break-word}
.ff-sample{font-size:18px;line-height:1.45;color:var(--kt-dcd8e3,#dcd8e3);margin:0;word-break:break-word}
.ff-meta h3{font-size:22px;margin:0 0 6px;letter-spacing:-.02em}
.ff-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ff-badge{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px;border:1px solid var(--ft-line2);color:var(--ft-dim)}
.ff-badge.google{color:var(--kt-9fd3a8,#9fd3a8);border-color:var(--kl-2c4a33,#2c4a33)}.ff-badge.adobe{color:var(--kt-ffa3a3,#ffa3a3);border-color:var(--kl-5a2a30,#5a2a30)}.ff-badge.self{color:var(--kt-cbbbe3,#cbbbe3);border-color:var(--kl-4b3e5e,#4b3e5e)}
.ff-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0;font-size:12.5px;color:var(--ft-dim)}
.ff-row span:first-child{min-width:62px;color:var(--ft-faint)}
.ff-usage{height:6px;border-radius:9px;background:var(--kb-1d1b21,#1d1b21);overflow:hidden;margin:10px 0}
.ff-usage i{display:block;height:100%;background:linear-gradient(90deg,var(--ft-purple),var(--kb-7f68aa,#7f68aa))}
.ff-code{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--ft-line);background:var(--kb-0f0e12,#0f0e12);font:12px var(--ft-mono)}
.ff-code code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* Color palette */
.cp{margin-top:14px}
.cp-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 8px 10px;border:1px solid var(--ft-line2);border-radius:10px;background:var(--ft-card);font-size:13px;color:var(--ft-dim)}
.cp-toolbar label{display:flex;gap:8px;align-items:center}
.cp-spacer{flex:1}
.cp-columns{display:flex;height:min(62vh,560px);min-height:340px;margin-top:12px;border-radius:10px;overflow:hidden;border:1px solid var(--ft-line2);box-shadow:0 2px 0 var(--ks-000,#000)}
.cp-col{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;padding:22px 8px;transition:flex .2s}
.cp-col:hover{flex:1.25}
.cp-hex{font:700 clamp(15px,1.8vw,22px) var(--ft-mono);letter-spacing:.02em;background:none;border:0;color:inherit;cursor:pointer}
.cp-name{font-size:12.5px;opacity:.8}
.cp-col-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s}
.cp-col:hover .cp-col-actions,.cp-col:focus-within .cp-col-actions{opacity:1}
.cp-col-actions button{width:34px;height:34px;border-radius:7px;border:1px solid var(--kl-0000002e,#0000002e);background:var(--kb-ffffff40,#ffffff40);color:inherit;cursor:pointer;font-size:15px}
.cp-col-actions button[aria-pressed=true]{background:var(--kb-00000055,#00000055)}
.cp-contrast{font-size:11px;opacity:.75}
.cp-shades{margin-top:12px;display:grid;gap:8px}
.cp-shade-row{display:grid;grid-template-columns:90px repeat(11,minmax(0,1fr));border-radius:8px;overflow:hidden;border:1px solid var(--ft-line2)}
.cp-shade-row b{display:flex;align-items:center;padding:0 10px;font:600 12px var(--ft-mono);background:var(--ft-card)}
.cp-shade-row button{height:54px;border:0;cursor:pointer;font:600 10px var(--ft-mono);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:6px;gap:2px}
.cp-roles{display:grid;gap:12px;margin-top:14px}
.cp-role h3{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ft-faint);margin:0 0 8px;font-weight:600}
.cp-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cp-swatch{border:1px solid var(--ft-line2);border-radius:8px;overflow:hidden;background:var(--kb-0f0e12,#0f0e12);text-align:left;padding:0;cursor:pointer;color:var(--ft-text)}
.cp-swatch i{display:block;height:58px}
.cp-swatch span{display:block;padding:8px 10px}
.cp-swatch b{display:block;font-size:12.5px}
.cp-swatch code{display:block;font:11.5px var(--ft-mono);margin-top:2px}
.cp-swatch small{display:block;font-size:10.5px;color:var(--ft-faint);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Built with */
.bw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.bw-item{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:9px 0;border-top:1px solid var(--ft-line);font-size:14px}
.bw-item:first-of-type{border-top:0}
.bw-item small{font:11px var(--ft-mono);color:var(--ft-faint);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
.bw-empty{color:var(--ft-faint);font-size:13px;margin:0}
.bw-swatches{display:flex;flex-wrap:wrap;gap:6px}
.bw-swatches span{display:inline-flex;align-items:center;gap:6px;font:11.5px var(--ft-mono);padding:4px 8px 4px 4px;border-radius:99px;border:1px solid var(--ft-line2)}
.bw-swatches i{width:18px;height:18px;border-radius:50%;border:1px solid var(--kl-ffffff24,#ffffff24)}

@media (prefers-reduced-motion:reduce){.ft-spinner{animation:none}.ft-tool,.ft-tool:hover{transform:none}}
@media (max-width:900px){.ff-font{grid-template-columns:1fr}.ft-site{grid-template-columns:1fr}}
@media (max-width:560px){.ft-field{height:auto;flex-wrap:wrap;padding:10px}.ft-field input{height:44px;flex-basis:100%}.ft-field button{width:100%;justify-content:center}.ft-cta{flex-direction:column;align-items:flex-start}.cp-columns{flex-direction:column;height:auto}.cp-col{min-height:92px;flex-direction:row;justify-content:space-between;padding:12px 16px}.cp-col-actions{opacity:1}.cp-shade-row{grid-template-columns:70px repeat(11,minmax(0,1fr))}.ff-specimen{font-size:42px}}