:root{
 --ink:#12142B;--ink-soft:#3A3A4D;--muted:#6B6B80;
 --violet:#6D4AFF;--violet-tint:#EEEAFF;--violet-ink:#4B32C3;
 --mint:#00C48C;--mint-tint:#E0FAF1;--mint-ink:#007A57;
 --canvas:#F7F7FB;--surface:#FFF;--border:#E3E3EC;--radius:10px;
 --fh:'Outfit',system-ui,sans-serif;--fb:'Inter',system-ui,sans-serif;
 --sh:0 1px 2px rgba(18,20,43,.04);
}
[data-theme="dark"]{
 --ink:#EDEDF5;--ink-soft:#C4C4D4;--muted:#8A8AA3;
 --violet:#8A6BFF;--violet-tint:#2E2358;--violet-ink:#C4B5FF;
 --mint:#00C48C;--mint-tint:#10322A;--mint-ink:#5DE0B8;
 --canvas:#0C0D1C;--surface:#191B33;--border:#2C2F4D;--sh:none;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}








.narrow{max-width:900px;margin:0 auto}





.ltx{font-family:var(--fh);font-weight:600;font-size:19px;color:var(--ink);letter-spacing:-.3px}
.ltx em{font-style:normal;color:var(--violet)}

.ni{position:relative}



.dd{display:none;position:absolute;top:100%;left:0;min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 8px 26px rgba(18,20,43,.1);margin-top:4px}
[data-theme="dark"] .dd{box-shadow:0 8px 26px rgba(0,0,0,.4)}
.ni:hover .dd{display:block}
.dd a{display:block;padding:7px 10px;border-radius:7px;font-size:14px;color:var(--ink-soft)}
.dd a:hover{background:var(--violet-tint);color:var(--violet-ink);text-decoration:none}






.mnav.open{display:block}




.hero.c{text-align:center}

.hero.c p{margin-inline:auto}

/* INPUT — no overlays, nothing inside the textarea */
.tool{margin-bottom:38px}
.inp textarea{
 width:100%;min-height:82px;resize:vertical;display:block;
 font-family:var(--fb);font-size:16px;color:var(--ink);line-height:1.5;
 background:var(--surface);border:1.5px solid var(--border);border-radius:12px;
 padding:14px 16px;outline:none;transition:border-color .15s,box-shadow .15s;
}
.inp textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-tint)}
.inp textarea::placeholder{color:var(--muted)}
.ibar{display:flex;align-items:center;gap:14px;margin-top:8px;margin-bottom:20px;min-height:30px}
.cnt{font-size:13px;color:var(--muted)}
.ibtn{
 font-family:var(--fb);font-size:13px;font-weight:500;
 background:var(--surface);color:var(--ink-soft);border:1px solid var(--border);
 border-radius:8px;padding:6px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
}
.ibtn:hover{border-color:var(--violet);color:var(--violet)}
.ibtn svg{width:13px;height:13px}
.ibar .right{display:flex;gap:7px}
.ibar .size{margin-left:auto}

/* SEARCH */
.srch{position:relative;margin-bottom:10px}
.srch input{
 width:100%;font-family:var(--fb);font-size:14px;color:var(--ink);
 background:var(--surface);border:1px solid var(--border);border-radius:9px;
 padding:9px 34px 9px 34px;outline:none;
}
.srch input:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-tint)}
.srch>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted);pointer-events:none}
.qx{
 position:absolute;right:8px;top:50%;transform:translateY(-50%);
 width:22px;height:22px;border:none;background:var(--canvas);border-radius:50%;
 cursor:pointer;color:var(--muted);align-items:center;justify-content:center;padding:0;display:flex;
}
.qx:hover{color:var(--ink);background:var(--border)}
.qx svg{width:11px;height:11px}

/* TOOL SUGGESTIONS from homepage search */
.sugg{display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:var(--violet-tint);border-radius:10px;padding:9px 12px;margin-bottom:10px}
.sugg .sl{font-size:12px;color:var(--violet-ink);font-weight:600;opacity:.75}
.stool{font-size:13px;font-weight:500;color:var(--violet-ink);background:var(--surface);border-radius:16px;padding:4px 11px;white-space:nowrap}
.stool:hover{text-decoration:none;background:#fff;box-shadow:0 1px 4px rgba(109,74,255,.2)}
[data-theme="dark"] .stool{background:var(--surface)}

/* SECTION TABS */
.tabs{display:flex;gap:6px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.tab{font-family:var(--fb);font-size:14px;font-weight:500;color:var(--muted);
 background:none;border:none;border-bottom:2px solid transparent;padding:9px 3px;margin-bottom:-1px;
 cursor:pointer;display:flex;align-items:center;gap:6px;margin-right:14px}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--violet);border-bottom-color:var(--violet)}
.tab span{font-size:12px;font-weight:400;opacity:.6;background:var(--canvas);
 border-radius:10px;padding:1px 7px}
.tab.on span{background:var(--violet-tint);opacity:1;color:var(--violet-ink)}
[data-theme="dark"] .tab span{background:var(--surface)}

/* "more styles" link in group heading */
.gmore{font-family:var(--fb);font-size:11px;font-weight:500;color:var(--violet);
 text-transform:none;letter-spacing:0;white-space:nowrap;flex-shrink:0}
.gmore:hover{text-decoration:underline}

/* FILTER BAR — search + count on one line, no duplicate heading */
.filterbar{display:flex;align-items:center;gap:12px;margin:16px 0 10px}
.filterbar .srch{flex:1;margin-bottom:0}
.filterbar .n{font-size:12px;color:var(--muted);white-space:nowrap;flex-shrink:0;
 font-variant-numeric:tabular-nums}
.filterbar .n:empty{display:none}

/* APPLY-TO row — visible chips, not a hidden dropdown */
.applyrow{display:flex;align-items:center;gap:9px;margin:18px 0 14px;flex-wrap:wrap}
.applyrow .al{font-size:12px;color:var(--muted);font-weight:500;white-space:nowrap;flex-shrink:0}
.applyrow .chips{margin-bottom:0;flex:1}
/* APPLY-TO chips (what is actively transforming output) = solid violet — a mode, not a filter */
.chip.ap{border-style:dashed}
.chip.ap.on{border-style:solid;background:var(--violet);color:#fff;border-color:transparent;
 box-shadow:0 1px 4px rgba(109,74,255,.3)}
[data-theme="dark"] .chip.ap.on{color:#0C0D1C}
.chip.sty{font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols2','Symbola','DejaVu Sans',sans-serif;
 font-size:13px;padding:5px 10px}
.chip.ap.sty{min-width:52px;text-align:center;font-size:15px}

/* CHIPS — fixed buckets */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{
 font-family:var(--fb);font-size:13px;font-weight:500;
 background:var(--surface);color:var(--muted);border:1px solid var(--border);
 border-radius:18px;padding:5px 12px;cursor:pointer;white-space:nowrap;
 transition:all .12s;display:inline-block;
}
.chip:hover{border-color:var(--violet);color:var(--violet);text-decoration:none}
/* FILTER chips (what you are browsing) = light violet */
.chip.on{background:var(--violet-tint);color:var(--violet-ink);border-color:transparent;font-weight:600}
.chip.dim{opacity:.4}
/* pin chips inherit the standard chip states — only the icon distinguishes them */
.chip.pin{display:inline-flex;align-items:center;gap:5px}
.chip.pin svg{width:12px;height:12px;flex-shrink:0}
.chip.pin .ic-fav{fill:currentColor;stroke:none}
.chip.pin .ic-rec{fill:none;stroke:currentColor}
.chip .c{opacity:.5;margin-left:3px;font-weight:400;font-size:12px}

/* NAV CHIPS on tool pages */
.nchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.nchip{
 font-size:14px;background:var(--surface);border:1px solid var(--border);
 border-radius:18px;padding:5px 13px;white-space:nowrap;color:var(--ink-soft);
 font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols2','Symbola','DejaVu Sans',sans-serif;
}
.nchip:hover{border-color:var(--violet);text-decoration:none}
.nchip.on{background:var(--violet-tint);border-color:transparent;color:var(--violet-ink)}
.nchip.more{font-family:var(--fb);font-size:13px;font-weight:500;color:var(--violet)}

/* RESULTS */
.res{display:flex;flex-direction:column;gap:7px}
.row{
 background:var(--surface);border:1px solid var(--border);border-radius:11px;
 padding:11px 13px;display:flex;align-items:center;gap:11px;box-shadow:var(--sh);
 cursor:pointer;transition:border-color .1s,background .1s;
}
.row:hover{border-color:var(--violet);background:var(--violet-tint)}
[data-theme="dark"] .row:hover{border-color:var(--violet);background:var(--violet-tint)}
.row:hover .cp{background:#5C3AE8}
[data-theme="dark"] .row:hover .cp{background:#9B80FF}
.row:active{transform:scale(.998)}
.row.ph2{cursor:default}
.row.ph2:hover{border-color:var(--border);background:var(--surface)}
.row.ph2:hover .cp{background:var(--canvas);color:var(--muted)}
[data-theme="dark"] .row.ph2:hover .cp{background:var(--surface);color:var(--muted)}
.row.ph2:active{transform:none}
.row.fav{background:var(--violet-tint);border-color:transparent}
.rl{flex:1;min-width:0}
.rn{font-size:11px;color:var(--muted);margin-bottom:2px}
/* group headings inside results */
.ghead{display:flex;align-items:center;gap:7px;font-family:var(--fh);font-size:12px;font-weight:600;
 text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:16px 0 7px;padding-top:2px}
.ghead:first-child{margin-top:0}
.ghead span{font-family:var(--fb);font-weight:400;font-size:11px;opacity:.6;letter-spacing:0;text-transform:none}
.ghead .rule{flex:1;height:1px;background:var(--border);min-width:14px}

/* load more */
.lmore{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
 margin:18px 0 4px;padding:13px;font-family:var(--fb);font-size:14px;font-weight:600;
 color:#fff;background:var(--violet);border:none;border-radius:11px;cursor:pointer;
 box-shadow:0 2px 8px rgba(109,74,255,.28);transition:background .12s,transform .06s}
.lmore:hover{background:#5C3AE8}
.lmore:active{transform:scale(.995)}
[data-theme="dark"] .lmore{color:#0C0D1C}
[data-theme="dark"] .lmore:hover{background:#9B80FF}
.lmore svg{width:15px;height:15px;stroke-width:2.4}

/* preview size */
.size{display:flex;align-items:center;gap:9px;color:var(--muted)}
.size .sl2{font-size:13px;white-space:nowrap;font-weight:500}
.size .spx{font-size:12px;min-width:34px;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-weight:500}
.size input[type=range]{width:150px;height:5px;-webkit-appearance:none;appearance:none;
 background:var(--border);border-radius:3px;outline:none;cursor:pointer}
.size input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;
 border-radius:50%;background:var(--violet);cursor:pointer;border:2px solid var(--surface);
 box-shadow:0 1px 3px rgba(18,20,43,.25)}
.size input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
 background:var(--violet);cursor:pointer;border:2px solid var(--surface)}
.ibtn:disabled{opacity:.4;cursor:default}
.ibtn:disabled:hover{border-color:var(--border);color:var(--ink-soft)}


.out{
 font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols2','Noto Sans Symbols','Symbola','DejaVu Sans','FreeSerif',sans-serif;
 font-size:var(--psize,18px);color:var(--ink);line-height:1.45;word-break:break-word;overflow-wrap:anywhere;
}
.out.ph{color:var(--ink-soft);opacity:.55}
.st{background:none;border:none;cursor:pointer;padding:5px;color:var(--muted);display:flex;align-items:center;flex-shrink:0;border-radius:6px}
.st:hover{color:var(--violet);background:var(--canvas)}
.st svg{width:16px;height:16px}
.st.on{color:var(--violet)}
.st.on svg{fill:currentColor}
.cp{
 font-family:var(--fb);font-size:13px;font-weight:500;background:var(--violet);color:#fff;
 border:none;border-radius:8px;padding:7px 15px;cursor:pointer;flex-shrink:0;min-width:74px;
 transition:background .12s,transform .06s;
}
.cp:hover{background:#5C3AE8}
[data-theme="dark"] .cp{color:#0C0D1C}
[data-theme="dark"] .cp:hover{background:#9B80FF}
.cp:active{transform:scale(.97)}
.cp.done{background:var(--mint);color:#fff}
[data-theme="dark"] .cp.done{color:#0C0D1C}
.cp:disabled{background:var(--canvas);color:var(--muted);cursor:default;box-shadow:none;
 border:1px solid var(--border)}
[data-theme="dark"] .cp:disabled{background:var(--surface);color:var(--muted)}
.cp:disabled:hover{background:var(--canvas)}
[data-theme="dark"] .cp:disabled:hover{background:var(--surface)}
.none{text-align:center;padding:28px 18px;color:var(--muted);font-size:14px;background:var(--surface);border:1px dashed var(--border);border-radius:11px}

/* CARDS */
.sec{margin-bottom:40px}
.sub{color:var(--muted);font-size:14px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:13px 14px;display:block;box-shadow:var(--sh);transition:all .12s}
.card:hover{border-color:var(--violet);text-decoration:none;transform:translateY(-1px)}
.card .nm{font-family:var(--fh);font-weight:600;font-size:14px;color:var(--ink);margin-bottom:4px}
.card .pv{font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols2','Symbola','DejaVu Sans',sans-serif;font-size:15px;color:var(--violet)}
.hubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:9px}
.hub{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:16px 17px;display:block}
.hub:hover{border-color:var(--violet);text-decoration:none}
.hub .nm{font-family:var(--fh);font-weight:600;font-size:15px;color:var(--ink);margin-bottom:2px}
.hub .ds{font-size:13px;color:var(--muted);line-height:1.4}

/* CONTENT */
.cnt2{max-width:700px}
.cnt2 h2{margin-top:30px}
.cnt2 h3{margin-top:20px}
.cnt2 p{margin-bottom:12px}
.cnt2 ul{margin:0 0 12px 19px}
.cnt2 li{margin-bottom:5px}
.note{background:var(--violet-tint);border-radius:var(--radius);padding:13px 15px;margin:15px 0;font-size:14px;color:var(--violet-ink)}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:15px 0}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:480px}
th{text-align:left;padding:9px 10px;background:var(--canvas);color:var(--ink);font-weight:600;font-size:13px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--border)}
.y{color:var(--mint-ink);font-weight:500}
.m{color:#B45309;font-weight:500}
[data-theme="dark"] .m{color:#FAC775}
.n{color:#B91C1C;font-weight:500}
[data-theme="dark"] .n{color:#F09595}








.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:24px;margin-bottom:24px}
.fc h4{font-family:var(--fh);font-size:13px;font-weight:600;color:var(--ink);margin-bottom:10px}
.fc a{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.fc a:hover{color:var(--violet)}
.fc p{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5}
.fb{border-top:1px solid var(--border);padding-top:16px;display:flex;justify-content:space-between;font-size:13px;color:var(--muted);flex-wrap:wrap;gap:8px}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(70px);background:var(--ink);color:var(--canvas);padding:10px 19px;border-radius:22px;font-size:14px;font-weight:500;opacity:0;transition:all .25s;z-index:200;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}








@media(max-width:840px){
 
 
 
 
 .fg{grid-template-columns:1fr 1fr;gap:18px}
 
 .row{padding:10px 11px;gap:8px}
 .cp{padding:7px 12px;min-width:62px;font-size:12px}
 .out{font-size:17px}
 .st{padding:4px}
 .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
 .ibar{flex-wrap:wrap;gap:8px}
 .size{order:3;width:100%;justify-content:flex-start}
 .size input[type=range]{flex:1;max-width:none;width:auto;min-width:100px}
 .ibar .right{margin-left:auto}
 .ghead{margin:14px 0 6px}
 .slab{flex-wrap:wrap;gap:6px}
 .applyrow{gap:6px}
 .applyrow .al{width:100%}
 
}
@media(max-width:420px){
 .chip{font-size:12px;padding:4px 9px}
 .chip.sty{padding:4px 8px;font-size:12px}
 .nchip{font-size:13px;padding:5px 11px}
}


/* ==========================================================================
   Static-site overrides.

   site.css defines its own .chips, .row .out and .cp.done for page content.
   Those rules load after this file and were overriding the tool, which broke
   chip alignment, the font-size slider and the green copy confirmation.
   Scoping to #fontclip-tool wins on specificity without touching site.css.
   ========================================================================== */

/* chips and filter rows sit left, as in the source build */
#fontclip-tool .chips{justify-content:flex-start;gap:6px;margin-bottom:12px}
#fontclip-tool .applyrow .chips{margin-bottom:0}

/* the preview size slider drives --psize; site.css pinned .out to 18px */
#fontclip-tool .row .out{
  font-size:var(--psize,18px);
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.45;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* copied state uses the reserved mint; site.css used mint-tint with !important */
#fontclip-tool .cp.done,
#fontclip-tool .row:hover .cp.done{
  background:var(--mint)!important;
  color:#fff!important;
  border-color:var(--mint)!important;
}

/* The tool sits directly under the page hero. Two sources of dead space:
   the hero's own bottom padding and .tool's 26px margin-top. Tighten both,
   but only when a hero is immediately followed by the tool, so heroes on
   pages without a tool (About, Blog, policies) keep their original spacing. */
#fontclip-tool .tool{margin-top:0}


/* Fallback for browsers without :has() */
@supports not (selector(:has(*))){
  #fontclip-tool{margin-top:-18px}
}

/* Hero-to-tool spacing. Scoped with :has() so it only tightens where a hero
   is immediately followed by the tool; heroes on About/Blog/policy pages keep
   their original site.css spacing. */
.hero:has(+ #fontclip-tool){padding-bottom:10px}

@media(max-width:720px){
  .hero:has(+ #fontclip-tool){padding-bottom:8px}
}

/* ==========================================================================
   Reserved space for the tool (Cumulative Layout Shift).

   The mount is empty until fontclip-tool.js runs, then fills to ~3.5-4.1k px
   and shoves every section below it down the page. That single jump measured
   CLS 0.686 - Google's "good" threshold is 0.10.

   The initial render is deterministic (PAGE_SIZE=40 rows in each of the two
   sections), so the height is predictable. Reserve it up front; the :empty
   selector drops the reservation the instant real content is inserted, so
   the tool is never capped once it grows.
   ========================================================================== */
#fontclip-tool:empty{
  display:block;
  min-height:3640px;
}
@media(max-width:720px){
  #fontclip-tool:empty{min-height:3840px}
}

/* A faint skeleton so the reserved area does not read as a blank gap */
#fontclip-tool:empty::before{
  content:"";
  display:block;
  height:132px;
  margin-bottom:12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
}