*{box-sizing:border-box}body{margin:0;font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif;color:#1f2937;background:#f7f7f4}main{max-width:1180px;margin:0 auto;padding:24px}header{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}h1{font-size:28px;margin:0}h2{font-size:18px;margin:28px 0 10px}input,select{height:36px;border:1px solid #c9c9c2;border-radius:6px;background:white;padding:0 10px}button{height:34px;border:1px solid #b9bab2;border-radius:6px;background:white;padding:0 12px;cursor:pointer}button:hover{border-color:#3b82f6}#q{min-width:min(460px,100%)}.toolbar{display:flex;gap:10px;margin:18px 0;flex-wrap:wrap}.count{color:#667085}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}.font-card{display:block;text-decoration:none;color:inherit;background:white;border:1px solid #ddded6;border-radius:8px;padding:10px;min-height:122px}.font-card[hidden]{display:none}.font-card:hover{border-color:#3b82f6}.preview{height:64px;display:flex;align-items:center;overflow:hidden;background:#111;margin:-2px -2px 8px;border-radius:5px;padding:4px;color:white}.preview img{max-height:100%;width:auto;max-width:none;image-rendering:auto}.preview span{font-size:20px;white-space:nowrap}.font-card strong{display:block;font-size:16px;line-height:1.2;font-weight:750;overflow-wrap:anywhere}.font-card small{display:block;color:#667085;margin-top:6px}.notice{margin-top:36px;border-top:1px solid #ddded6;padding-top:18px;color:#667085}.notice h2{color:#1f2937}.notice p{max-width:760px}.detail header{display:block}.detail table{border-collapse:collapse;background:white;border:1px solid #ddded6}.detail td{border-bottom:1px solid #e8e8e2;padding:7px 10px}.detail td:last-child{text-align:right;font-variant-numeric:tabular-nums}.specimen{display:block;max-width:100%;background:#111;border-radius:6px;padding:8px;margin:16px 0}.fallback-specimen{font-size:28px;background:white;border:1px solid #ddded6;border-radius:6px;padding:16px;margin:16px 0;white-space:pre-line}.note{color:#667085}#copy-chars{display:block;width:100%;min-height:120px;resize:vertical;border:1px solid #ddded6;border-radius:6px;background:white;padding:10px;font:16px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.copy-status{margin-left:10px;color:#667085}.chars{display:flex;flex-wrap:wrap;gap:5px}.glyph{display:inline-flex;gap:4px;align-items:baseline;border:1px solid #e0e0da;background:white;border-radius:5px;padding:3px 5px}.glyph small{color:#667085;font-size:10px}footer{max-width:1180px;margin:0 auto;padding:24px;color:#667085}