:root{font-family:Arial,Helvetica,sans-serif;color-scheme:dark;font-synthesis:none;--bg:#000000;--surface:#111113;--text:#f2f2f7;--muted:#98989e;--accent:#73baff;--button:#2876b8;--button-text:#fff;--edge:color-mix(in srgb,var(--surface) 80%,var(--muted));--overlay:var(--bg);--compact-preview-height:104px;--preview-dock-height:280px;--app-height:var(--tg-viewport-stable-height,100svh);--safe-top:calc(max(env(safe-area-inset-top,0px),var(--tg-safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px));--safe-bottom:calc(max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px)) + var(--tg-content-safe-area-inset-bottom,0px));color:var(--text);background:var(--bg)}
*{box-sizing:border-box}html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}html{overflow-anchor:none;scrollbar-color:#343438 #000}body{margin:0;background:var(--bg)}body::before{content:"";position:fixed;inset:0 0 auto;height:var(--safe-top);background:var(--bg);z-index:4;pointer-events:none}.app-scroll{position:fixed;inset:0 0 auto;height:var(--app-height);overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;overflow-anchor:none;touch-action:manipulation;scroll-padding-top:calc(var(--safe-top) + var(--preview-dock-height) + 12px)}main{max-width:760px;min-height:calc(var(--app-height) + 80px);margin:auto;padding:calc(var(--safe-top) + 24px) 22px calc(var(--safe-bottom) + 152px)}button,input,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:25px}.brand{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:800;letter-spacing:1px}
.preview-dock{position:sticky;top:var(--safe-top);z-index:3;margin:-8px -2px 18px;padding:8px 2px 0;background:var(--bg);isolation:isolate}.preview-section{margin:0;padding:0;background:var(--bg)}.preview-details{display:flow-root}.sample-reveal{display:grid;grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows 340ms cubic-bezier(.22,1,.36,1),opacity 220ms ease,visibility 0s}.sample-reveal-inner{min-height:0;overflow:hidden}.is-compact .sample-reveal{grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows 340ms cubic-bezier(.22,1,.36,1),opacity 160ms ease,visibility 0s 340ms}.stage{container-type:inline-size;position:relative;isolation:isolate;aspect-ratio:1.7;width:100%;height:var(--expanded-preview-height,auto);max-height:330px;margin:auto;border:1px solid #202023;border-radius:22px;overflow:hidden;color:#fff;background:#0b0b0d}.preview-ready .stage{transition:height 340ms cubic-bezier(.22,1,.36,1),border-radius 340ms cubic-bezier(.22,1,.36,1)}.preview-section.is-compact .stage{height:var(--compact-preview-height);border-radius:14px}.preview-caption{position:absolute;inset:12% 7%;display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.16;font-size:40px;font-weight:700;text-shadow:0 2px 18px #0003}.sample-input{display:flex;align-items:center;gap:9px;margin:12px 0 0;background:var(--surface);border:1px solid var(--edge);border-radius:12px;padding:0 13px}.sample-input svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}.sample-input input{width:100%;border:0;outline:none;background:transparent;padding:13px 0;font-size:16px;color:var(--text)}.sample-input:focus-within{outline:2px solid var(--accent);outline-offset:-2px}.sample-input input:focus-visible{outline:none}.sample-input input::placeholder{color:var(--muted)}.preview-note{font-size:11px;color:var(--muted);line-height:1.5;margin:9px 0 0}.preview-note.warning{color:#e8bd78}
.catalog-toolbar{position:relative;margin:0;padding:10px 0;background:var(--bg);border-bottom:1px solid var(--edge)}.search-wrap{display:flex;align-items:center;position:relative;gap:9px;border:1px solid var(--edge);background:var(--surface);border-radius:12px;padding:0 12px}.search-wrap svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.7;flex:none}.search-wrap input{width:100%;min-width:0;padding:14px 0;border:0;background:transparent;outline:none;font-size:16px;color:var(--text)}.search-wrap input::placeholder{color:var(--muted)}.search-wrap:focus-within{outline:2px solid var(--accent);outline-offset:2px}.search-wrap input:focus-visible{outline:none}.search-wrap input::-webkit-search-cancel-button{display:none}#clear-search{border:0;background:var(--edge);color:var(--muted);border-radius:50%;font-size:20px;width:26px;height:26px;flex:none;padding:0}.categories{display:flex;gap:7px;overflow-x:auto;padding:12px 1px 10px;scrollbar-width:none}.categories::-webkit-scrollbar{display:none}.category{display:flex;align-items:center;gap:6px;flex:none;border:1px solid var(--edge);background:var(--surface);padding:9px 12px;border-radius:22px;font-size:12px;white-space:nowrap;color:var(--muted)}.category svg{width:14px;height:14px}.category[aria-pressed=true]{color:var(--button-text);background:var(--button);border-color:var(--button)}.catalog-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:2px;font-size:11px}.script-toggle{position:relative;display:flex;align-items:center;gap:8px;min-height:30px;color:var(--muted);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.script-toggle input{position:absolute;width:1px;height:1px;opacity:0;margin:0}.script-check{display:grid;place-items:center;flex:none;width:19px;height:19px;border:1.5px solid #49494f;border-radius:6px;background:var(--surface);transition:background-color 160ms ease,border-color 160ms ease}.script-check svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.65);transition:opacity 160ms ease,transform 180ms ease}.script-toggle input:checked + .script-check{border-color:var(--button);background:var(--button)}.script-toggle input:checked + .script-check svg{opacity:1;transform:scale(1)}.script-toggle input:focus-visible + .script-check{outline:2px solid var(--accent);outline-offset:3px}.sort-label select{border:0;background:var(--bg);color:var(--muted);font-size:11px;padding:7px 2px;max-width:170px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.heading-label{display:flex;align-items:center;gap:4px}.section-heading h2{font-size:19px;letter-spacing:-.4px;margin:0}.section-heading>span{font-size:11px;color:var(--muted)}#ranking-info{display:grid;place-items:center;width:28px;height:28px;border:0;background:transparent;color:var(--muted);border-radius:50%}#ranking-info svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;fill:none}.ranking-note{font-size:11px;line-height:1.5;color:var(--muted);margin:-4px 0 16px}
.font-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.font-card{scroll-margin-top:12px;position:relative;border:1px solid var(--edge);border-radius:16px;background:var(--surface);min-width:0;overflow:hidden;transition:border-color .15s,box-shadow .15s}.font-card.selected{border-color:var(--accent);box-shadow:inset 0 0 0 .5px var(--accent);background:color-mix(in srgb,var(--surface) 88%,var(--button))}.font-select{display:block;text-align:left;width:100%;min-height:139px;padding:16px 16px 15px;background:none;border:0;color:var(--text)}.font-name{display:block;font-size:12px;font-weight:600;padding-right:27px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.font-sample{display:block;font-size:34px;line-height:1.3;margin:12px 0 9px;white-space:nowrap;overflow:hidden;min-height:44px}.font-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;color:var(--muted);font-size:10px}.font-check{font-size:10px;color:var(--accent);font-weight:bold;opacity:0}.selected .font-check{opacity:1}.favorite{position:absolute;display:grid;place-items:center;top:2px;right:2px;border:0;background:transparent;color:var(--muted);width:44px;height:44px;border-radius:14px}.favorite svg{width:20px;height:20px;fill:transparent;transform-origin:center;transition:fill 160ms ease,color 160ms ease}.favorite[aria-pressed=true]{color:#f4c76b}.favorite[aria-pressed=true] svg{fill:currentColor}.favorite.celebrate svg{animation:star-snap 480ms cubic-bezier(.22,1,.36,1)}.favorite.celebrate::after{content:"";position:absolute;inset:10px;border:1.5px solid #f4c76b;pointer-events:none;border-radius:50%;animation:star-ring 480ms ease-out both}@keyframes star-snap{0%{transform:scale(.65) rotate(-22deg)}40%{transform:scale(1.3) rotate(9deg)}68%{transform:scale(.93) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}@keyframes star-ring{0%{transform:scale(.45);opacity:.75}100%{transform:scale(1.7);opacity:0}}.font-card.loading .font-sample{opacity:.45}.load-more{display:block;width:100%;border:1px solid var(--edge);border-radius:12px;background:var(--surface);color:var(--accent);padding:15px;margin:16px 0;font-size:13px;font-weight:bold}.empty{text-align:center;border:1px dashed var(--edge);border-radius:16px;padding:32px 18px;background:var(--surface)}.empty-symbol{font-size:45px;font-family:Georgia,serif;color:var(--muted)}.empty h3{font-size:18px;margin:8px}.empty p{font-size:12px;color:var(--muted);line-height:1.6}.empty button{border:0;border-radius:10px;background:var(--edge);color:var(--accent);padding:11px 15px;font-size:12px}.fineprint{color:var(--muted);font-size:11px;line-height:1.65;margin-top:22px}
footer{position:fixed;top:calc(var(--app-height) - var(--safe-bottom) - 28px);left:0;right:0;z-index:5;padding:0 22px;pointer-events:none;transform:translate3d(0,-100%,0);backface-visibility:hidden;isolation:isolate}.footer-inner{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:716px;margin:auto}#status{display:flex;align-items:center;justify-content:center;gap:7px;max-width:100%;padding:8px 13px;border-radius:18px;background:var(--surface);box-shadow:0 3px 16px #0006;font-size:12px;line-height:1.4;text-align:center;color:var(--muted);pointer-events:auto}#saved-icon{display:none;flex:none;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#status.is-success{color:#79dfa6;background:#0a2114;animation:saved-appear 240ms ease-out}#status.is-success #saved-icon{display:block}#status.is-success #saved-icon path{stroke-dasharray:14;stroke-dashoffset:0;animation:check-draw 300ms ease-out}@keyframes saved-appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes check-draw{from{stroke-dashoffset:14}to{stroke-dashoffset:0}}#save{display:flex;align-items:center;justify-content:center;width:fit-content;max-width:100%;min-height:52px;appearance:none;-webkit-appearance:none;border:0;border-radius:999px;background-color:var(--button);background-image:none;box-shadow:0 5px 20px #0005;color:var(--button-text);font-size:15px;font-weight:700;line-height:1.3;text-align:center;padding:15px 24px;pointer-events:auto;overflow:hidden;isolation:isolate;transform:translateZ(0);backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}#save:disabled{background:#252528;color:var(--muted);box-shadow:none}.font-select:disabled{opacity:.65}
@media(hover:hover){.font-card:hover,.category:hover{border-color:var(--accent)}.favorite:hover{background:var(--edge)}}@media(max-width:520px){main{padding-top:calc(var(--safe-top) + 20px)}.font-grid{grid-template-columns:1fr}.font-select{min-height:142px}.font-sample{font-size:38px;min-height:49px}.stage{aspect-ratio:1.6}}@media(max-width:350px){main{padding-left:15px;padding-right:15px}.brand{font-size:13px}.preview-caption{font-size:34px}.font-sample{font-size:34px}footer{padding-left:15px;padding-right:15px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after,.preview-ready .stage{animation:none!important;transition:none!important;scroll-behavior:auto!important}.favorite.celebrate::after{display:none}}