:root{--bg:#f6f8ee;--card:#fff;--ink:#171a10;--muted:#67705b;--accent:#889300;--line:#e1e7ce}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 Inter,system-ui,-apple-system,Segoe UI,sans-serif}
header{padding:14px 16px 12px;text-align:center;background:#faf8f1}
h1{font-size:clamp(30px,5vw,44px);margin:0 0 6px;letter-spacing:-1.5px}h1 span{color:var(--accent)}
header p{margin:4px 0 0;color:#626858} .brand-logo{display:block;width:min(240px,68%);height:auto;margin:auto}main{max-width:980px;margin:16px auto;padding:0 16px 60px}
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:18px 0}
button,.tab{font:inherit;cursor:pointer;border:1px solid var(--line);background:white;color:var(--ink);border-radius:12px;padding:10px 15px}
.tab.active{background:#d8e316;border-color:#d8e316;color:#101200}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 8px 30px #3540000a}
label{display:block;font-weight:650;margin-bottom:8px}.input{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:16px;outline-color:var(--accent)}
.hint{color:var(--muted);font-size:13px;margin:8px 0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px;margin-top:16px}
.item{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.item .sample{font-size:19px;overflow-wrap:anywhere}.item button{padding:7px 10px;color:var(--accent);font-size:13px}
.symbols{grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}
.font-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 4px;color:var(--muted);font-size:13px}.style-search{max-width:260px;padding:9px 12px;font-size:14px}.item .style-name{font-size:11px;color:var(--muted);display:block;margin-top:3px}.font-item{align-items:center}.font-item .sample-wrap{min-width:0;overflow:hidden}.font-item .sample{display:block;white-space:normal;overflow-wrap:anywhere}.font-item button{flex-shrink:0}
.symbols .item{justify-content:space-between;min-height:68px;min-width:0;gap:12px;padding:12px 14px}.symbols .sample{font-size:25px;flex:1;min-width:0;text-align:center}.symbols .item button{flex:0 0 auto;white-space:nowrap}
.hidden{display:none}.notice{font-size:13px;color:var(--muted);margin-top:18px;text-align:center}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#171a10;color:white;padding:10px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1}
@media(max-width:520px){.panel{padding:16px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.symbols{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}.symbols .item{padding:10px;gap:7px}}@media(max-width:360px){.symbols{grid-template-columns:1fr}}

/* Comfortable room for the font preview and its Copy button */
#fontResults{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
#fontResults .font-item{min-width:0;min-height:88px;padding:14px 16px;gap:16px}
#fontResults .sample-wrap{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
#fontResults .font-item button{flex:0 0 auto;min-width:65px;padding:10px 12px;white-space:nowrap}
@media(max-width:640px){#fontResults{grid-template-columns:1fr}}

/* Compact responsive symbol and emoji cards */
.symbols{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px}
.symbols .item{min-height:56px;padding:8px 10px;gap:7px}
.symbols .sample{font-size:23px;line-height:1.2}
.symbols .item button{padding:6px 9px;font-size:12px;flex-shrink:0}
@media(max-width:600px){
 .symbols{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .symbols .item{min-height:54px;padding:7px 8px;gap:5px}
 .symbols .sample{font-size:22px}
 .symbols .item button{padding:6px 8px;font-size:12px}
}
@media(max-width:340px){.symbols .item{padding:6px 5px}.symbols .item button{padding:5px 6px}}
.collection-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;color:var(--muted);font-size:13px;flex-wrap:wrap}
.collection-controls select{max-width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:white;color:var(--ink);font:inherit}
.more{display:block;margin:18px auto 0;background:#e4eb9b;border-color:#c8d571;font-weight:650}
.more[hidden]{display:none}
@media(max-width:520px){.symbols{grid-template-columns:repeat(2,minmax(0,1fr))}.symbols .item{padding:9px;gap:7px}.symbols .item button{padding:8px}.font-item{min-width:0}}
/* Search-friendly resource links and readable help */
.resource-links{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0}.resource-links a{padding:9px 13px;border:1px solid var(--line);border-radius:10px;background:white;color:#445000;text-decoration:none}.seo-content{margin-top:26px;color:var(--ink)}.seo-content h2{font-size:21px;margin-bottom:8px}.seo-content p{color:var(--muted)}footer{text-align:center;padding:22px;color:var(--muted);font-size:13px}
nav a.tab{text-decoration:none;} nav a.tab:hover{text-decoration:none;}
@font-face{font-family:FontedMath;src:url("unicode-math.woff") format("woff");font-display:swap;font-weight:400;font-style:normal;unicode-range:U+2100-214F,U+1D400-1D7FF}
.sample,#preview{font-family:FontedMath,"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",system-ui,sans-serif}
header .brand-logo{display:block;width:min(300px,78vw);height:auto;margin:0 auto;max-width:100%}
header .brand-home{display:block;width:fit-content;margin:auto}header{padding-top:20px;padding-bottom:16px}