.ff-tool{background:radial-gradient(circle at 0 0,rgba(124,58,237,.09),transparent 32%),radial-gradient(circle at 100% 0,rgba(37,99,235,.08),transparent 30%),var(--color-bg-secondary);border:1px solid color-mix(in srgb,var(--color-primary) 22%,var(--color-border));border-radius:24px;box-shadow:0 18px 50px rgba(15,23,42,.08);margin-bottom:var(--space-8);overflow:hidden;padding:clamp(18px,3vw,28px);position:relative}.ff-heading{align-items:flex-start;display:flex;gap:20px;justify-content:space-between;margin-bottom:20px}.ff-heading h2{color:var(--color-text);font-size:clamp(1.25rem,2.5vw,1.65rem);letter-spacing:-.03em;line-height:1.25;margin:5px 0}.ff-heading p{color:var(--color-text-secondary);font-size:.9rem;margin:0}.ff-eyebrow{color:var(--color-primary);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.ff-total{background:color-mix(in srgb,var(--color-primary) 8%,var(--color-bg));border:1px solid rgba(79,70,229,.16);border-radius:999px;color:var(--color-text-secondary);flex:0 0 auto;font-size:.78rem;padding:8px 12px;white-space:nowrap}.ff-total strong{color:var(--color-primary);font-size:.92rem}.ff-input-shell{background:linear-gradient(var(--color-bg),var(--color-bg)) padding-box,linear-gradient(120deg,#7c3aed,#2563eb,#ec4899) border-box;border:2px solid transparent;border-radius:18px;box-shadow:0 10px 28px rgba(79,70,229,.12);overflow:hidden;position:relative;transition:box-shadow .2s ease,transform .2s ease}.ff-input-shell:focus-within{box-shadow:0 14px 34px rgba(79,70,229,.19);transform:translateY(-1px)}.ff-input-label{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ff-textarea{background:transparent;border:0;color:var(--color-text);display:block;font:inherit;font-size:1rem;line-height:1.65;min-height:118px;outline:0;padding:18px 52px 38px 18px;resize:vertical;width:100%}.ff-textarea::placeholder{color:var(--color-text-muted)}.ff-clear-btn{background:var(--color-bg-tertiary);border:0;border-radius:50%;color:var(--color-text-secondary);cursor:pointer;display:grid;height:34px;place-items:center;position:absolute;right:13px;top:13px;transition:background .15s ease,color .15s ease,transform .15s ease;width:34px}.ff-clear-btn[hidden],.ff-empty[hidden],.ff-fonts-list[hidden]{display:none}.ff-clear-btn:hover{background:var(--color-primary);color:#fff;transform:rotate(6deg)}.ff-input-meta{bottom:11px;color:var(--color-text-muted);display:flex;font-size:.72rem;gap:12px;justify-content:space-between;left:18px;pointer-events:none;position:absolute;right:16px}.ff-controls{gap:12px;margin:18px 0}.ff-controls,.ff-search{align-items:center;display:flex}.ff-search{background:var(--color-bg);border:1px solid var(--color-border);border-radius:12px;color:var(--color-text-muted);flex:1 1 270px;gap:9px;min-width:190px;padding:0 13px}.ff-search:focus-within{border-color:var(--color-primary);box-shadow:var(--shadow-focus)}.ff-search input{background:transparent;border:0;color:var(--color-text);font:inherit;font-size:.82rem;height:42px;outline:0;width:100%}.ff-filters{display:flex;flex:0 0 auto;gap:6px}.ff-filter{background:var(--color-bg);border:1px solid var(--color-border);border-radius:999px;color:var(--color-text-secondary);cursor:pointer;font:inherit;font-size:.76rem;font-weight:650;height:38px;padding:0 12px;transition:all .15s ease}.ff-filter:hover{border-color:var(--color-primary);color:var(--color-primary)}.ff-filter.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.ff-results-heading{color:var(--color-text-secondary);display:flex;font-size:.78rem;font-weight:700;gap:16px;justify-content:space-between;margin:4px 2px 10px}.ff-fonts-list{display:grid;gap:10px}.ff-font-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:16px;cursor:pointer;display:grid;gap:7px 18px;grid-template-areas:"name copy" "sample copy";grid-template-columns:minmax(0,1fr) auto;min-height:104px;padding:16px 16px 16px 20px;position:relative;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.ff-font-card:before{background:linear-gradient(#7c3aed,#2563eb);border-radius:0 4px 4px 0;bottom:13px;content:"";left:0;opacity:0;position:absolute;top:13px;transform:scaleY(.55);transition:opacity .18s ease,transform .18s ease;width:3px}.ff-font-card:focus-within,.ff-font-card:hover{border-color:color-mix(in srgb,var(--color-primary) 50%,var(--color-border));box-shadow:0 10px 26px rgba(79,70,229,.1);transform:translateY(-2px)}.ff-font-card.is-copied:before,.ff-font-card:focus-within:before,.ff-font-card:hover:before{opacity:1;transform:scaleY(1)}.ff-font-name{align-items:center;color:var(--color-text-secondary);display:flex;font-size:.76rem;font-weight:700;gap:7px;grid-area:name}.ff-popular-badge{background:#fff7ed;border-radius:999px;color:#c2410c;font-size:.62rem;font-weight:800;letter-spacing:.04em;padding:3px 7px;text-transform:uppercase}.ff-font-sample{color:var(--color-text);font-family:Segoe UI Symbol,Noto Sans Math,Arial Unicode MS,sans-serif;font-size:clamp(1.05rem,2vw,1.3rem);grid-area:sample;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap}.ff-copy-btn{align-items:center;align-self:center;background:color-mix(in srgb,var(--color-primary) 10%,var(--color-bg));border:0;border-radius:11px;color:var(--color-primary);cursor:pointer;display:inline-flex;font:inherit;font-size:.78rem;font-weight:750;gap:7px;grid-area:copy;height:40px;justify-content:center;min-width:104px;padding:0 14px;transition:background .15s ease,color .15s ease,transform .15s ease}.ff-copy-btn:hover{background:var(--color-primary);color:#fff;transform:scale(1.02)}.ff-font-card.is-copied .ff-copy-btn{background:var(--color-success);color:#fff}.ff-empty{border:1px dashed var(--color-border-strong);border-radius:16px;color:var(--color-text-secondary);padding:28px 18px;text-align:center}[data-theme=dark] .ff-popular-badge{background:rgba(249,115,22,.15);color:#fdba74}@media (max-width:820px){.ff-controls{align-items:stretch;flex-direction:column}.ff-search{flex-basis:auto}.ff-filters{overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.ff-filters::-webkit-scrollbar{display:none}.ff-filter{flex:0 0 auto}}@media (max-width:560px){.ff-tool{border-radius:18px;padding:16px 12px}.ff-heading{gap:10px}.ff-heading p{display:none}.ff-total{padding:7px 9px}.ff-input-meta span:first-child{display:none}.ff-input-meta{justify-content:flex-end}.ff-font-card{gap:7px 10px;grid-template-columns:minmax(0,1fr) 42px;min-height:98px;padding:14px 11px 14px 15px}.ff-copy-btn{min-width:42px;padding:0;width:42px}.ff-copy-btn span{display:none}.ff-font-sample{font-size:1rem}}@media (prefers-reduced-motion:reduce){.ff-tool *,.ff-tool :before{scroll-behavior:auto!important;transition:none!important}}