/* FancyTextFont.com — modern design system */
:root{
  --brand:#7c3aed;
  --brand-dark:#6d28d9;
  --brand-light:#ede9fe;
  --accent:#ec4899;
  --text:#18181b;
  --muted:#71717a;
  --bg:#fafafa;
  --card:#ffffff;
  --border:#e4e4e7;
  --radius:14px;
  --shadow:0 1px 2px rgba(24,24,27,.06),0 4px 16px rgba(24,24,27,.06);
  --shadow-lg:0 8px 30px rgba(124,58,237,.15);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.7;font-size:17px}
.container{max-width:980px;margin:0 auto;padding:0 18px}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}

/* Header */
header{background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.nav{display:flex;align-items:center;justify-content:space-between;height:62px;gap:12px}
.logo{font-size:1.18rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:9px;letter-spacing:-.02em;white-space:nowrap}
.logo:hover{text-decoration:none}
.logo-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;display:grid;place-items:center;font-weight:800;font-size:1rem;flex-shrink:0}
.nav-links{display:flex;gap:22px;list-style:none;align-items:center}
.nav-links a{color:var(--muted);font-weight:500;font-size:.94rem}
.nav-links a:hover{color:var(--brand);text-decoration:none}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--text)}
@media(max-width:840px){
  .menu-btn{display:block}
  .nav-links{display:none;position:absolute;top:62px;left:0;right:0;background:var(--card);flex-direction:column;padding:14px 18px 18px;border-bottom:1px solid var(--border);gap:14px;align-items:flex-start;box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
}

/* Hero */
.hero{background:linear-gradient(135deg,#4c1d95 0%,#7c3aed 50%,#db2777 100%);color:#fff;padding:44px 0 78px;text-align:center}
.hero h1{font-size:2.2rem;font-weight:800;margin-bottom:12px;letter-spacing:-.025em;line-height:1.25}
.hero p{font-size:1.06rem;opacity:.93;max-width:660px;margin:0 auto}
@media(max-width:600px){.hero h1{font-size:1.6rem}.hero{padding:32px 0 66px}}

/* Generator */
.gen-wrap{margin:-56px auto 34px;position:relative;z-index:5}
.gen-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:22px;border:1px solid var(--border)}
.gen-card label{display:block;font-weight:700;margin-bottom:8px;font-size:.95rem}
#inputText,textarea.ft-input{width:100%;min-height:96px;padding:14px 16px;border:2px solid var(--border);border-radius:11px;font-size:1.05rem;font-family:inherit;resize:vertical;background:#fff;color:var(--text);line-height:1.6}
#inputText:focus,textarea.ft-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.gen-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px}
.counter{font-size:.85rem;color:var(--muted)}
.btn{display:inline-block;background:var(--brand);color:#fff;border:none;padding:10px 20px;font-size:.95rem;font-weight:700;border-radius:9px;cursor:pointer;transition:background .15s;font-family:inherit}
.btn:hover{background:var(--brand-dark)}
.btn-ghost{background:#fff;color:var(--brand);border:1.5px solid var(--border)}
.btn-ghost:hover{background:var(--brand-light);color:var(--brand-dark)}

/* Font result list */
.font-list{display:grid;gap:11px;margin:22px 0}
.font-item{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:13px 15px;display:flex;align-items:center;gap:14px;transition:border-color .15s,box-shadow .15s}
.font-item:hover{border-color:#c4b5fd;box-shadow:var(--shadow)}
.font-out{flex:1;min-width:0;font-size:1.16rem;line-height:1.75;word-break:break-word;overflow-wrap:anywhere}
.font-name{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-bottom:2px}
.copy-btn{flex-shrink:0;background:var(--brand-light);color:var(--brand-dark);border:none;padding:8px 15px;border-radius:8px;font-size:.85rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s;min-width:74px}
.copy-btn:hover{background:#ddd6fe}
.copy-btn.copied{background:#dcfce7;color:#15803d}
.load-more{text-align:center;margin:16px 0 6px}

/* Symbol / face grids */
.sym-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:8px;margin:18px 0}
.sym-grid.wide{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.sym{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:11px 6px;text-align:center;font-size:1.15rem;cursor:pointer;transition:background .12s,border-color .12s;word-break:break-word;line-height:1.4}
.sym.wide{font-size:.95rem;padding:12px 8px}
.sym:hover{background:var(--brand-light);border-color:#c4b5fd}
.sym.copied{background:#dcfce7;border-color:#86efac}

/* Toast */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(90px);background:#18181b;color:#fff;padding:11px 22px;border-radius:999px;font-size:.9rem;font-weight:600;opacity:0;transition:transform .25s,opacity .25s;z-index:999;pointer-events:none}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* Tool cards */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px;margin:20px 0}
.tool-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:17px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s;color:var(--text)}
.tool-card:hover{transform:translateY(-2px);border-color:#c4b5fd;text-decoration:none}
.tool-card h3{margin:0 0 5px;font-size:1.02rem;color:var(--text)}
.tool-card p{font-size:.88rem;color:var(--muted);margin:0;line-height:1.55}
.tool-card .preview{font-size:1.05rem;color:var(--brand);margin-bottom:6px}

/* Content */
.content{padding:6px 0 44px}
.content h2{font-size:1.5rem;margin:34px 0 13px;letter-spacing:-.015em}
.content h3{font-size:1.14rem;margin:24px 0 9px}
.content p{margin-bottom:15px;color:#3f3f46}
.content ul,.content ol{margin:0 0 15px 22px;color:#3f3f46}
.content li{margin-bottom:7px}
.content table{width:100%;border-collapse:collapse;margin:16px 0;background:var(--card);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);font-size:.94rem}
.content th,.content td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--border)}
.content th{background:var(--brand);color:#fff;font-weight:600}
.content tr:last-child td{border-bottom:none}
.content code{background:#f4f4f5;padding:2px 6px;border-radius:5px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.example-box{background:#faf5ff;border-left:4px solid var(--brand);padding:15px 18px;border-radius:0 9px 9px 0;margin:16px 0}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0}
.step{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:17px}
.step .n{width:30px;height:30px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:9px;font-size:.9rem}
.step h3{margin:0 0 5px;font-size:1rem}
.step p{margin:0;font-size:.9rem;color:var(--muted)}

/* FAQ */
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:9px;overflow:hidden}
.faq-item summary{padding:14px 17px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.98rem}
.faq-item summary::after{content:"+";font-size:1.3rem;color:var(--brand);font-weight:400;flex-shrink:0}
.faq-item[open] summary::after{content:"−"}
.faq-item summary::-webkit-details-marker{display:none}
.faq-body{padding:0 17px 15px;color:#3f3f46;font-size:.96rem}

/* Article bits */
.article-meta{color:var(--muted);font-size:.88rem;margin-bottom:18px}
.breadcrumb{font-size:.86rem;color:var(--muted);padding:15px 0 0}
.breadcrumb a{color:var(--muted)}

/* Footer */
footer{background:#18181b;color:#a1a1aa;padding:38px 0 22px;margin-top:36px}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:26px;margin-bottom:26px}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
footer h4{color:#fff;font-size:.95rem;margin-bottom:11px}
footer ul{list-style:none}
footer li{margin-bottom:7px}
footer a{color:#a1a1aa;font-size:.89rem}
footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid #27272a;padding-top:18px;text-align:center;font-size:.83rem;color:#71717a}
.footer-desc{font-size:.89rem;color:#a1a1aa;line-height:1.6}