.font-catalog[hidden],.font-dialog[hidden]{display:none!important}.font-catalog{padding:12px 0 36px}.font-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}.font-filters label{display:grid;gap:8px;font-size:14px}.font-filters select{font:inherit;width:100%;min-height:46px;border:1px solid #958f8466;background:var(--surface,#fff);color:inherit;padding:8px 12px;border-radius:8px}.font-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.font-card{display:flex;flex-direction:column;gap:12px;border:1px solid #958f8455;border-radius:12px;padding:16px;text-decoration:none;color:inherit;cursor:zoom-in}.font-card:hover{border-color:#a58b52}.font-card img{display:block;width:100%;aspect-ratio:4/1;object-fit:contain;background:transparent;border-radius:6px;padding:8px}.font-card strong{font-size:17px}.font-count{font-size:14px;margin:12px 0}.font-more,.font-dialog button,.font-dialog a{font:inherit;border:1px solid #958f8466;border-radius:8px;padding:10px 14px;background:var(--surface,#fff);color:inherit;cursor:pointer;text-decoration:none}.font-more{display:block;margin:24px auto}.font-dialog{position:fixed;inset:0;background:#000a;z-index:1500;display:flex;align-items:center;justify-content:center;padding:18px}.font-panel{width:min(100%,1000px);max-height:94dvh;overflow:auto;border-radius:16px;background:var(--surface,#fff);color:var(--ink,#222);padding:20px}.font-toolbar,.font-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.font-toolbar h2{margin:0;font-size:22px}.font-toolbar button{font-size:24px}.font-image-stage{background:transparent;padding:20px;overflow:auto;max-height:58dvh;margin:20px 0;border-radius:8px;touch-action:pan-x pan-y pinch-zoom}.font-image-stage img{display:block;width:100%;max-width:none;padding:20px}.font-actions a{background:#23814a;color:#fff}.font-dialog p{font-size:13px}.font-navigation{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.font-status{min-height:20px}.font-list:empty{display:none}@media(max-width:600px){.font-filters{gap:10px;grid-template-columns:1fr}.font-list{grid-template-columns:1fr;gap:12px}.font-card{padding:12px}.font-panel{padding:14px}.font-dialog{padding:10px}.font-toolbar h2{font-size:19px}.font-actions{justify-content:start}.font-dialog a,.font-dialog button{min-height:44px}.font-image-stage img{padding:10px}}

/* Draw the original outlined glyphs and numbers as normal theme-colored content. */
.font-sample{display:block;width:100%;color:var(--ink);background-color:currentColor;-webkit-mask-image:var(--font-image);mask-image:var(--font-image);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;forced-color-adjust:auto}.font-sample img{opacity:0;padding:0!important}.font-card .font-sample{aspect-ratio:4/1}.font-image-stage .font-sample{max-width:none}.font-image-stage .font-sample img{height:auto}.font-image-stage{color:var(--ink)}
@supports not (mask-image:url('/fonts/he-001-numbered.svg')){.font-sample{background:none}.font-sample img{opacity:1}html[data-theme="dark"] .font-sample img{filter:invert(1)}}

/* Opaque raster pairs keep glyphs readable when a mobile browser forces dark colors. */
.font-sample{background:none!important;mask-image:none!important;-webkit-mask-image:none!important}.font-sample img{opacity:1!important;filter:none!important;background:transparent;padding:0!important}

/* One-line number, language and optional owner-provided name. */
.font-card{min-width:0}.font-card strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}