:root{--bg:oklch(95.5% .006 260);--panel:oklch(100% 0 0);--sidebar-bg:oklch(98.5% .004 260);--preview-bg:oklch(97% .005 260);--border:oklch(91% .008 260);--border-strong:oklch(80% .012 260);--border-focus:oklch(57% .2 272);--ink:oklch(16% .015 260);--sub:oklch(48% .012 260);--muted:oklch(65% .008 260);--accent:oklch(56% .22 272);--accent-hover:oklch(50% .24 272);--accent-soft:oklch(95.5% .022 272);--accent-text:oklch(44% .21 272);--ok:oklch(50% .17 150);--ok-bg:oklch(97.5% .022 150);--ok-border:oklch(87% .09 150);--danger:oklch(47% .21 25);--danger-bg:oklch(97.5% .022 25);--danger-border:oklch(87% .09 25);--shadow-xs:0 1px 2px oklch(16% .015 260/.05);--shadow-sm:0 1px 3px oklch(16% .015 260/.07), 0 2px 8px oklch(16% .015 260/.04);--shadow-md:0 4px 16px oklch(16% .015 260/.09), 0 1px 4px oklch(16% .015 260/.05);--radius-lg:12px;--radius-md:8px;--radius-sm:6px;--sidebar-w:240px;--ease-out-quart:cubic-bezier(.25, 1, .5, 1);--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--font-ui:"Plus Jakarta Sans", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif}html.dark{--bg:oklch(9% .014 270);--panel:oklch(12% .016 270);--sidebar-bg:oklch(10.5% .015 270);--preview-bg:oklch(8% .013 270);--border:oklch(19% .02 270);--border-strong:oklch(27% .025 270);--border-focus:oklch(62% .2 272);--ink:oklch(93% .006 272);--sub:oklch(62% .011 272);--muted:oklch(41% .01 272);--accent:oklch(64% .2 272);--accent-hover:oklch(58% .22 272);--accent-soft:oklch(18% .05 272);--accent-text:oklch(82% .1 272);--ok:oklch(72% .17 150);--ok-bg:oklch(15% .05 150);--ok-border:oklch(28% .11 150);--danger:oklch(70% .19 25);--danger-bg:oklch(14% .05 25);--danger-border:oklch(28% .12 25);--shadow-xs:0 1px 2px oklch(0% 0 0/.28);--shadow-sm:0 1px 3px oklch(0% 0 0/.34), 0 2px 8px oklch(0% 0 0/.24);--shadow-md:0 4px 16px oklch(0% 0 0/.42), 0 1px 4px oklch(0% 0 0/.28)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}html{background:var(--bg);height:100%}body{height:100%;color:var(--ink);font-family:var(--font-ui);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:13px;line-height:1.5;overflow:hidden}.app-shell{grid-template-columns:var(--sidebar-w) 1fr;height:100vh;display:grid;overflow:hidden}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes cardIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.sidebar{border-right:1px solid var(--border);background:var(--sidebar-bg);flex-direction:column;flex-shrink:0;height:100vh;display:flex;overflow:hidden}.sidebar-header{border-bottom:1px solid var(--border);padding:20px 16px 16px}.sidebar-brand{align-items:center;gap:8px;margin-bottom:8px;display:flex}.brand-icon{border-radius:var(--radius-sm);background:var(--accent);color:oklch(99% .003 265);flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;display:inline-flex}html.dark .brand-icon{color:oklch(14% .014 265)}.brand-name{color:var(--ink);letter-spacing:-.02em;font-size:14px;font-weight:700}.sidebar-desc{color:var(--muted);font-size:11.5px;line-height:1.45}.sidebar-section{padding:14px 16px}.sidebar-divider{background:var(--border);flex-shrink:0;height:1px;margin:0 16px}.filter-label{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;font-size:11px;font-weight:600}.filter-chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--border);border-radius:var(--radius-md);color:var(--sub);cursor:pointer;transition:border-color .15s var(--ease-out-quart), background .15s var(--ease-out-quart), color .15s var(--ease-out-quart), box-shadow .15s var(--ease-out-quart);background:0 0;padding:4px 12px;font-family:inherit;font-size:13px;font-weight:500;line-height:1.5}.chip:hover{color:var(--ink);background:var(--bg);border-color:var(--border-strong)}.chip.active{background:var(--panel);color:var(--ink);border-color:var(--border-strong);font-weight:600;box-shadow:0 1px 4px oklch(0% 0 0/.08),0 .5px 1.5px oklch(0% 0 0/.06)}@keyframes btnAttract{0%,to{transform:scale(1);box-shadow:0 0 oklch(58% .2 272/0)}50%{transform:scale(1.018);box-shadow:0 4px 18px oklch(58% .2 272/.38),0 0 0 4px oklch(58% .2 272/.12)}}.load-btn{background:var(--accent);color:oklch(99% .003 265);border-radius:var(--radius-md);cursor:pointer;text-align:center;width:100%;transition:background .2s var(--ease-out-quart), box-shadow .2s var(--ease-out-quart), transform .18s var(--ease-out-quart);border:none;margin-bottom:8px;padding:8px 14px;font-family:inherit;font-size:12.5px;font-weight:600;animation:2s ease-in-out 1s infinite both btnAttract;display:block}@media (prefers-reduced-motion:reduce){.load-btn{animation:none}}html.dark .load-btn{color:oklch(13% .014 265)}.load-btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px oklch(58% .2 272/.3)}.load-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;animation:none;transform:none}.load-btn.loaded{animation:none}.sidebar-footer{border-top:1px solid var(--border);align-items:center;gap:6px;margin-top:auto;padding:12px 16px;display:flex}.footer-credit{color:var(--muted);white-space:nowrap;margin-left:auto;font-size:11.5px}.footer-link{color:var(--muted);transition:color .15s var(--ease-out-quart);text-decoration:none}.footer-link:hover{color:var(--accent-text)}.util-btn{border:1px solid var(--border);color:var(--sub);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .15s var(--ease-out-quart), color .15s var(--ease-out-quart), background .15s var(--ease-out-quart);background:0 0;align-items:center;gap:5px;padding:5px 9px;font-family:inherit;font-size:12px;font-weight:500;line-height:1.5;display:inline-flex}.util-btn:hover{border-color:var(--border-strong);color:var(--ink);background:var(--bg)}.dark-toggle{border-color:#0000;padding:5px 7px;font-size:16px}.dark-toggle:hover{background:var(--bg);border-color:#0000}.dark-toggle i{line-height:1;display:inline-block}@keyframes iconExit{0%{opacity:1;transform:scale(1)rotate(0)}to{opacity:0;transform:scale(0)rotate(90deg)}}@keyframes iconEnter{0%{opacity:0;transform:scale(0)rotate(-90deg)}to{opacity:1;transform:scale(1)rotate(0)}}.dark-toggle i.icon-exit{animation:iconExit .18s var(--ease-out-quart) forwards}.dark-toggle i.icon-enter{animation:iconEnter .32s var(--ease-out-expo) both}.sidebar-scroll{flex:1;min-height:0;overflow:hidden auto}.sidebar-scroll::-webkit-scrollbar{width:4px}.sidebar-scroll::-webkit-scrollbar-track{background:0 0}.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}.sidebar-search{align-items:center;width:100%;display:flex;position:relative}.sidebar-search-icon{color:var(--muted);pointer-events:none;font-size:13px;line-height:1;position:absolute;left:9px}.sidebar-search-input{border:1px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--ink);background:var(--bg);transition:border-color .15s var(--ease-out-quart), box-shadow .15s var(--ease-out-quart), background .15s var(--ease-out-quart);outline:none;padding:7px 28px 7px 30px;font-family:inherit;font-size:12.5px}.sidebar-search-input:focus{border-color:var(--border-focus);background:var(--panel);box-shadow:0 0 0 3px oklch(56% .22 272/.12)}.sidebar-search-input::placeholder{color:var(--muted)}.search-clear{background:var(--border-strong);width:18px;height:18px;color:var(--panel);cursor:pointer;transition:background .12s var(--ease-out-quart);border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:11px;line-height:1;display:inline-flex;position:absolute;right:7px}html.dark .search-clear{color:var(--bg)}.search-clear:hover{background:var(--sub)}.sidebar-size-section .size-options{width:100%}.sidebar-size-section .size-option{text-align:center;flex:1}.main-area{background:var(--bg);flex-direction:column;height:100vh;display:flex;overflow:hidden}.size-options{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);align-items:center;gap:2px;padding:2px;display:flex}.size-option{border-radius:calc(var(--radius-md) - 3px);color:var(--sub);cursor:pointer;transition:background .12s var(--ease-out-quart), color .12s var(--ease-out-quart);background:0 0;border:none;padding:3px 9px;font-family:inherit;font-size:12px;font-weight:500}.size-option:hover{color:var(--ink);background:var(--panel)}.size-option.active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-xs);font-weight:600}.preview-bar{background:var(--panel);border-bottom:1px solid var(--border);z-index:99;min-height:48px;transition:box-shadow .2s var(--ease-out-quart);flex-shrink:0;align-items:flex-start;padding:0 20px;display:flex;position:relative}.preview-bar.is-stuck{box-shadow:var(--shadow-sm)}.preview-bar-icon{color:var(--muted);transition:color .15s var(--ease-out-quart);cursor:pointer;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-self:center;align-items:center;width:28px;height:28px;margin-right:10px;padding:0;font-size:15px;line-height:1;display:flex}.preview-bar-icon:hover{color:var(--accent-text);background:var(--hover)}@keyframes dice-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preview-bar-icon.spinning i{animation:dice-spin .4s var(--ease-out-quart)}.preview-bar:focus-within .preview-bar-icon{color:var(--accent-text)}.preview-bar-input{color:var(--ink);resize:none;field-sizing:content;background:0 0;border:none;outline:none;flex:1;padding:14px 0;font-family:inherit;font-size:15px;line-height:1.5;overflow:hidden}.preview-bar-input::placeholder{color:var(--muted)}.font-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-content:start;gap:10px;min-height:0;padding:16px 20px 32px;display:grid;overflow-y:auto}.font-grid::-webkit-scrollbar{width:6px}.font-grid::-webkit-scrollbar-track{background:0 0}.font-grid::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}.empty{text-align:center;color:var(--muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;padding:48px 20px;font-size:13px;display:flex}.span-6{grid-column:span 6}.span-4{grid-column:span 4}.span-3{grid-column:span 3}.span-2{grid-column:span 2}.span-12{grid-column:span 12}@media (width<=860px){:root{--sidebar-w:200px}.font-grid{padding:12px 14px 24px}.preview-bar{padding:0 14px}}@media (width<=640px){.app-shell{grid-template-rows:auto 1fr;grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--border);flex-flow:wrap;height:auto;overflow:visible}.sidebar-header{border-bottom:none;border-right:1px solid var(--border);flex:1;padding:12px}.sidebar-section,.sidebar-divider{display:none}.sidebar-footer{border-top:none;border-left:1px solid var(--border);padding:10px 12px}.main-area{height:calc(100vh - 64px)}.font-grid{grid-template-columns:1fr;padding:10px 12px}}body.mode-3d .main-area{background:var(--bg);position:relative;overflow:hidden}body.mode-3d .font-grid{perspective:1200px;perspective-origin:50%;transform-style:preserve-3d;height:100%;padding:0;transition:transform .3s cubic-bezier(.25,.46,.45,.94),perspective-origin .3s cubic-bezier(.25,.46,.45,.94);display:block;position:absolute;inset:0;overflow:clip}body.mode-3d .empty{z-index:10;position:relative}.font-card{background:var(--panel);border-radius:var(--radius-lg);animation:cardIn .2s var(--ease-out-quart);transition:box-shadow .2s var(--ease-out-quart), transform .2s var(--ease-out-quart);border:none;flex-direction:column;gap:12px;padding:16px;display:flex;position:relative}.font-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.font-name-row{align-items:center;gap:6px;display:flex}.font-name{color:var(--sub);word-break:break-all;min-width:0;transition:color .15s var(--ease-out-quart);flex:1;margin:0;font-size:12px;font-weight:500}.font-name:hover{color:var(--ink)}.svg-btn,.download-btn{opacity:0;pointer-events:none;flex-shrink:0;transition:opacity .15s}.font-card:hover .svg-btn,.font-card:focus-within .svg-btn,.font-card:hover .download-btn,.font-card:focus-within .download-btn{opacity:1;pointer-events:auto}.preview{color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;background:0 0;border-radius:10px;flex:1;padding:14px 16px;line-height:1.5}.meta{visibility:hidden;flex-wrap:wrap;gap:5px;height:0;margin:0;display:flex;overflow:hidden}.tag{background:var(--bg);color:var(--sub);border:1px solid var(--border);border-radius:5px;align-items:center;padding:2px 7px;font-size:11px;font-weight:500;display:inline-flex}.tag.favorite{color:oklch(44% .14 50);background:oklch(97% .025 68);border-color:oklch(88% .11 65)}.tag.favorite-icon{color:oklch(65% .17 60);background:oklch(96% .04 68);border-color:oklch(92% .12 65);justify-content:center;min-width:26px;padding:2px 6px}html.dark .tag.favorite{color:oklch(76% .12 65);background:oklch(22% .06 68);border-color:oklch(32% .1 65)}html.dark .tag.favorite-icon{color:oklch(74% .17 65);background:oklch(22% .06 68);border-color:oklch(28% .1 65)}.icon-btn{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--sub);cursor:pointer;width:24px;height:24px;transition:border-color .15s var(--ease-out-quart), color .15s var(--ease-out-quart), background .15s var(--ease-out-quart);background:0 0;justify-content:center;align-items:center;padding:0;font-size:13px;line-height:1;display:inline-flex}.icon-btn:hover{border-color:var(--border-strong);color:var(--ink);background:var(--bg)}.fav-btn{cursor:pointer;border-radius:var(--radius-sm);width:26px;height:26px;color:var(--border-strong);opacity:0;transition:color .2s var(--ease-out-quart), background .2s var(--ease-out-quart), opacity .15s var(--ease-out-quart);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:15px;display:inline-flex}.font-card:hover .fav-btn,.font-card:focus-within .fav-btn{opacity:1}.fav-btn:hover{color:oklch(72% .18 65);background:oklch(96% .04 68)}.fav-btn.active{color:oklch(82% .22 88);opacity:1}.fav-btn.active:hover{color:oklch(76% .2 85);background:oklch(96% .06 90)}html.dark .fav-btn:hover{color:oklch(76% .18 65);background:oklch(22% .06 68)}html.dark .fav-btn.active{color:oklch(82% .22 88)}html.dark .fav-btn.active:hover{color:oklch(88% .2 88);background:oklch(26% .08 90)}@media (hover:none){.card-toolbar{opacity:1;pointer-events:auto}.fav-btn{opacity:1}}body.mode-3d .font-card{width:320px;transform-style:preserve-3d;will-change:transform, opacity, filter;border:1px solid var(--border);box-shadow:var(--shadow-sm,0 4px 12px #0000000d);animation:linear infinite flyForward;position:absolute;top:50%;left:50%}body.mode-3d .font-card.is-focused-3d{cursor:pointer!important}body.mode-3d .font-grid.is-paused .font-card{animation-play-state:paused!important}body.mode-3d .font-card.is-selected-3d{border-color:var(--accent,oklch(58% .2 272))!important;box-shadow:0 0 0 2px oklch(58% .2 272/.35), var(--shadow-md,0 8px 24px #0000001a)!important;z-index:100!important;filter:none!important}body.mode-3d .font-card.is-selected-3d .fav-btn,body.mode-3d .font-card.is-selected-3d .svg-btn{opacity:1!important;pointer-events:auto!important}@keyframes flyForward{0%{transform:translate3d(var(--tx), var(--ty), -4000px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--scale,1));opacity:0;filter:blur(12px);margin-top:-100px;margin-left:-160px}15%{opacity:1;filter:blur(4px);margin-left:-160px}35%{filter:blur()}75%{opacity:1;filter:blur();margin-left:-160px}85%{opacity:0;filter:blur(10px);margin-left:-160px}85.1%{margin-left:9999px}to{transform:translate3d(var(--tx), var(--ty), 1000px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--scale,1));opacity:0;filter:blur(16px);margin-left:9999px}}body.mode-3d .main-area:after{content:"";pointer-events:none;background:radial-gradient(circle at center, transparent 30%, var(--bg) 110%);z-index:50;position:absolute;inset:0}@keyframes spin{to{transform:rotate(360deg)}}.load-btn .ri-loader-4-line{animation:.8s linear infinite spin;display:inline-block}.status{color:var(--muted);text-align:center;padding:3px 0;font-size:11.5px;line-height:1.45}.status.warn{color:var(--danger)}.status.ok{color:var(--accent-text)}.main-header-actions{z-index:1000;position:absolute;top:8px;right:2px}.switch-ui{cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--panel);transition:all .2s var(--ease-out-quart);border-radius:100px;align-items:center;gap:12px;padding:6px 12px;display:flex}.switch-label{color:var(--sub);align-items:center;gap:6px;font-size:13px;font-weight:500;transition:color .2s;display:flex}.switch-track{background:var(--border-strong);border-radius:100px;width:36px;height:20px;transition:background .3s,border-color .3s;position:relative;box-shadow:inset 0 2px 4px #0000000d}.switch-track input{opacity:0;width:0;height:0;position:absolute}.switch-thumb{background:var(--panel);border-radius:50%;width:16px;height:16px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0003,0 2px 5px #0000001a}.switch-track input:checked~.switch-thumb{background:#fff;transform:translate(16px)}.switch-track:has(input:checked){background:var(--accent,oklch(58% .2 272));border-color:var(--accent,oklch(58% .2 272))}.switch-ui:has(input:checked) .switch-label{color:var(--accent,oklch(58% .2 272))}.empty{text-align:center;color:var(--muted);padding:64px 24px;font-size:13px}.card-notice{z-index:120;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--panel);max-width:min(320px,100vw - 20px);color:var(--ink);box-shadow:var(--shadow-md);pointer-events:none;padding:7px 11px;font-size:12px;position:fixed}.card-notice.ok{color:var(--ok);border-color:var(--ok-border);background:var(--ok-bg)}.card-notice.warn{color:var(--danger);border-color:var(--danger-border);background:var(--danger-bg)}