:root{--font-family-sans-serif:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;--font-family-sans-serif-heading:var(--font-family-sans-serif);--font-family-serif:serif;--font-size-xlarge-24:24px;--font-size-medium-16:16px;--font-size-small-12:12px;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--line-height-normal:1.2;--line-height-large:1.4;--spacer-2:2px;--spacer-4:4px;--spacer-6:6px;--spacer-8:8px;--spacer-10:10px;--spacer-12:12px;--spacer-16:16px;--spacer-20:20px;--spacer-24:24px;--spacer-28:28px;--spacer-32:32px;--spacer-36:36px;--border-radius-2:2px;--border-radius-4:4px;--border-radius-6:6px;--border-radius-8:8px;--border-radius-10:10px;--border-radius-12:12px;--border-radius-16:16px;--border-radius-rounded:999px;--color-text-primary:hsla(0,0%,12%,1);--color-text-secondary:hsla(0,0%,12%,0.8);--color-text-secondary-hover:hsla(0,0%,12%,0.9);--color-text-tertiary:hsla(0,0%,12%,0.6);--color-text-tertiary-hover:hsla(0,0%,12%,0.7);--color-text-placeholder:hsla(0,0%,12%,0.4);--color-text-inverse-primary:hsla(0,0%,100%,1);--color-text-inverse-secondary:hsla(0,0%,100%,0.85);--color-text-inverse-secondary-hover:hsla(0,0%,100%,0.95);--color-text-inverse-tertiary:hsla(0,0%,100%,0.65);--color-text-inverse-tertiary-hover:hsla(0,0%,100%,0.75);--color-text-inverse-placeholder:hsla(0,0%,100%,0.45);--color-accent-blue:hsl(216,90%,66%);--color-accent-blue-light:hsl(215,92%,93%);--color-accent-green:hsl(102,68%,40%);--color-accent-green-light:hsl(99,56%,84%);--color-accent-purple:hsl(296,40%,55%);--color-accent-purple-light:hsl(296,72%,93%);--color-accent-blue-hover:hsl(216,81%,64%);--color-accent-blue-light-hover:hsl(219,78%,91%);--color-accent-green-hover:hsl(102,74%,38%);--color-accent-green-light-hover:hsl(100,50%,82%);--color-accent-purple-hover:hsl(295,39%,54%);--color-accent-purple-light-hover:hsl(294,56%,91%);--color-bg:hsla(0,0%,100%,1);--color-bg-grey:hsla(0,0%,20%,0.06);--color-bg-grey-hover:hsla(0,0%,20%,0.08);--color-active-on-bg-grey:hsla(0,0%,100%,1);--color-bg-inverse:hsla(0,0%,8%,1);--color-active-on-bg-inverse:hsla(0,0%,100%,0.12);--color-bg-overlay:hsla(0,0%,100%,1);--color-bg-mask:hsla(0,0%,100%,0.8);--color-border:hsla(0,0%,0%,0.08);--color-border-hover:hsla(0,0%,0%,0.12);--shadow-light:0px 1px 2px rgba(0,0,0,0.05);--shadow-heavy:0px 4px 12px rgba(0,0,0,0.1);--always-color-white:hsla(0,0%,100%,1);--always-shadow-light:0px 1px 2px rgba(0,0,0,0.05)}[data-theme=dark]{--color-text-primary:hsla(0,0%,100%,1);--color-text-secondary:hsla(0,0%,100%,0.8);--color-text-secondary-hover:hsla(0,0%,100%,0.9);--color-text-tertiary:hsla(0,0%,100%,0.6);--color-text-tertiary-hover:hsla(0,0%,100%,0.7);--color-text-placeholder:hsla(0,0%,100%,0.4);--color-text-inverse-primary:hsla(0,0%,0%,1);--color-text-inverse-secondary:hsla(0,0%,0%,0.8);--color-text-inverse-secondary-hover:hsla(0,0%,0%,0.9);--color-text-inverse-tertiary:hsla(0,0%,0%,0.6);--color-text-inverse-tertiary-hover:hsla(0,0%,0%,0.7);--color-text-inverse-placeholder:hsla(0,0%,0%,0.4);--color-accent-blue:hsl(216,90%,67%);--color-accent-blue-light:hsl(221,35%,26%);--color-accent-green:hsl(100,53%,48%);--color-accent-green-light:hsl(101,48%,18%);--color-accent-purple:hsl(296,44%,62%);--color-accent-purple-light:hsl(295,30%,25%);--color-accent-blue-hover:hsl(216,97%,69%);--color-accent-blue-light-hover:hsl(223,32%,28%);--color-accent-green-hover:hsl(100,52%,50%);--color-accent-green-light-hover:hsl(102,41%,20%);--color-accent-purple-hover:hsl(296,46%,63%);--color-accent-purple-light-hover:hsl(296,28%,27%);--color-bg:hsla(0,0%,8%,1);--color-bg-grey:hsla(0,0%,100%,0.06);--color-bg-grey-hover:hsla(0,0%,100%,0.08);--color-active-on-bg-grey:hsla(0,0%,100%,0.1);--color-bg-inverse:hsla(0,0%,95%,1);--color-active-on-bg-inverse:hsla(0,0%,0%,0.06);--color-bg-overlay:hsla(0,0%,16%,1);--color-bg-mask:hsla(0,0%,8%,0.9);--color-border:hsla(0,0%,100%,0.12);--color-border-hover:hsla(0,0%,100%,0.16);--shadow-light:0px 0 2px rgba(255,255,255,0.05),inset 0px 0 0 0.5px rgba(255,255,255,0.05);--shadow-heavy:0px 0 12px rgba(255,255,255,0.05),inset 0px 0 0 1px rgba(255,255,255,0.05)}@supports(color:color(display-p3 1 1 1)){:root{--color-accent-blue:color(display-p3 0.36 0.6 0.96);--color-accent-blue-light:color(display-p3 0.87 0.92 0.99);--color-accent-green:color(display-p3 0.29 0.68 0.13);--color-accent-green-light:color(display-p3 0.81 0.93 0.75);--color-accent-purple:color(display-p3 0.71 0.38 0.73);--color-accent-purple-light:color(display-p3 0.97 0.88 0.98);--color-accent-blue-hover:color(display-p3 0.34 0.58 0.93);--color-accent-blue-light-hover:color(display-p3 0.84 0.89 0.98);--color-accent-green-hover:color(display-p3 0.27 0.66 0.1);--color-accent-green-light-hover:color(display-p3 0.79 0.91 0.73);--color-accent-purple-hover:color(display-p3 0.69 0.36 0.72);--color-accent-purple-light-hover:color(display-p3 0.95 0.86 0.96)}[data-theme=dark]{--color-accent-blue:color(display-p3 0.37 0.61 0.97);--color-accent-blue-light:color(display-p3 0.17 0.23 0.35);--color-accent-green:color(display-p3 0.4 0.74 0.23);--color-accent-green-light:color(display-p3 0.15 0.27 0.09);--color-accent-purple:color(display-p3 0.76 0.45 0.78);--color-accent-purple-light:color(display-p3 0.32 0.18 0.33);--color-accent-blue-hover:color(display-p3 0.39 0.63 0.99);--color-accent-blue-light-hover:color(display-p3 0.19 0.24 0.37);--color-accent-green-hover:color(display-p3 0.42 0.76 0.25);--color-accent-green-light-hover:color(display-p3 0.17 0.29 0.12);--color-accent-purple-hover:color(display-p3 0.78 0.46 0.8);--color-accent-purple-light-hover:color(display-p3 0.33 0.19 0.34)}}@font-face{font-family:fn-ui;src:url(/ui-minified.woff2) format("woff2");font-weight:400;font-style:normal}html[lang=zh]{--font-family-sans-serif-heading:"fn-ui",system-ui,-apple-system,sans-serif}*,:after,:before{box-sizing:border-box}*,ol,ul{margin:0}ol,ul{list-style:none;padding:0}canvas,img,picture,svg,video{display:block;max-width:100%}[contenteditable=true],input,textarea{caret-color:var(--color-accent-blue)}button,input,select,textarea{font:inherit}button,input{border:0;outline:0;background-color:rgba(0,0,0,0)}button{padding:0;cursor:pointer}textarea{border:0;outline:0;background-color:rgba(0,0,0,0)}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-semibold);text-wrap:balance}#__next,#root{isolation:isolate}a{color:var(--color-text-secondary);text-decoration:none}a:hover{color:var(--color-text-secondary-hover)}body{display:flex}body main{flex:1 1;position:relative;min-width:640px}body .body-divider,body .sidebar{position:-webkit-sticky;position:sticky;top:0;height:100dvh}body .sidebar{flex-shrink:0;width:368px;overflow-y:auto}body{background-color:var(--color-bg);font-family:var(--font-family-sans-serif);font-size:var(--font-size-medium-16);line-height:var(--line-height-normal);color:var(--color-primary);-webkit-font-smoothing:antialiased;font-synthesis:none}body main{padding:var(--spacer-36)}body main header{margin:-8px 0;display:flex;align-items:center;justify-content:space-between;gap:var(--spacer-28)}body main header .logo{font-family:var(--font-family-sans-serif-heading);font-size:var(--font-size-xlarge-24);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}body main header .search-bar{cursor:text;flex:1 1;height:48px;background-color:var(--color-bg-grey);border-radius:var(--border-radius-rounded);position:relative;display:flex;align-items:center;justify-content:center}body main header .search-bar.is-input-focused,body main header .search-bar:hover{background:var(--color-bg-grey-hover)}body main header .search-bar .search-placeholder{display:flex;align-items:center;justify-content:center;gap:var(--spacer-6);color:var(--color-text-tertiary)}body main header .search-bar .search-placeholder svg{height:20px;width:20px}body main header .search-bar .search-input-container{position:relative;height:100%;width:100%;display:flex;align-items:center}body main header .search-bar .search-input-container input{flex:1 1;height:100%;border-radius:var(--border-radius-rounded);padding-left:var(--spacer-20)}body main header .search-bar .search-input-container input::placeholder{color:var(--color-text-placeholder)}body main header .search-bar .search-input-container .search-buttons{position:absolute;right:0;margin:0 var(--spacer-8);display:flex;align-items:center;gap:var(--spacer-8)}body main header .search-bar .search-input-container .search-buttons .search-btn{cursor:pointer;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--color-text-secondary)}body main header .search-bar .search-input-container .search-buttons .search-btn svg{width:20px;height:20px}body main header .search-bar .search-input-container .search-buttons .search-btn:hover{color:var(--color-text-secondary-hover)}body main header .search-bar.search-mode-active{background:var(--color-accent-blue-light);color:var(--color-accent-blue)}body main header .search-bar.search-mode-active .search-buttons .search-btn,body main header .search-bar.search-mode-active input{color:var(--color-accent-blue)}body main header .search-bar.search-mode-active.is-input-focused:not(.page-blurred),body main header .search-bar.search-mode-active.is-input-focused:not(.page-blurred) .search-buttons .search-btn,body main header .search-bar.search-mode-active.is-input-focused:not(.page-blurred) input{color:var(--color-primary)}body main header .settings{display:flex;align-items:center;gap:var(--spacer-12)}body .body-divider{padding:var(--spacer-28) var(--spacer-8)}body .body-divider .divider-line{background-color:var(--color-border);width:1px;height:100%}body .sidebar{padding:var(--spacer-24);display:flex;flex-direction:column;gap:var(--spacer-24)}body .sidebar .sidebar-header{height:36px;margin:0 var(--spacer-12);height:56px;display:flex;align-items:center;justify-content:space-between}body .sidebar .test-text-content{padding:var(--spacer-4) 0;display:flex;flex-direction:column;gap:var(--spacer-12)}body .sidebar .test-text-content .test-text-input{position:relative;display:flex}body .sidebar .test-text-content .test-text-input .load-button{cursor:pointer;--inset:var(--spacer-4);position:absolute;bottom:var(--inset);left:var(--inset);right:var(--inset);display:flex;align-items:center;justify-content:center;gap:var(--spacer-6);height:32px;padding:0 var(--spacer-6);border-radius:var(--border-radius-8);background-color:var(--color-bg-grey);color:var(--color-text-tertiary);font-size:var(--font-size-small-12);font-weight:var(--font-weight-medium)}body .sidebar .test-text-content .test-text-input .load-button.load-button-focused{background-color:var(--color-accent-blue-light);color:var(--color-accent-blue)}body .sidebar .test-text-content .test-text-input .load-button svg{width:14px;height:14px}body .sidebar .test-text-content .test-text-input .load-button:hover{background-color:var(--color-accent-blue-light-hover)}body .sidebar footer{padding:var(--spacer-12);margin-top:auto;font-size:var(--font-size-small-12);color:var(--color-text-tertiary)}body .sidebar footer .copyright{margin-bottom:var(--spacer-6)}body .sidebar footer .copyright a{color:var(--color-text-tertiary)}body .sidebar footer .copyright a:hover{color:var(--color-text-tertiary-hover)}body .sidebar footer .note{color:var(--color-text-placeholder)}.banner{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:48px;padding-top:88px;padding-bottom:64px}.banner .tagline{font-size:36px;font-weight:var(--font-weight-semibold);text-align:center;text-wrap:balance}.banner .tagline svg{width:auto;height:92px}.banner .subscription-form{display:flex;flex-direction:column;align-items:center}.banner .subscription-form form.subscription-form-group{width:360px;display:flex;align-items:center;background-color:var(--color-bg-grey);border-radius:var(--border-radius-rounded)}.banner .subscription-form form.subscription-form-group.focus,.banner .subscription-form form.subscription-form-group.loading,.banner .subscription-form form.subscription-form-group:active{background-color:var(--color-bg);box-shadow:0 0 0 2px var(--color-accent-blue)}.banner .subscription-form form.subscription-form-group.focus .subscription-form-button-wrapper button,.banner .subscription-form form.subscription-form-group.loading .subscription-form-button-wrapper button,.banner .subscription-form form.subscription-form-group:active .subscription-form-button-wrapper button{background-color:var(--color-accent-blue);color:var(--always-color-white)}.banner .subscription-form form.subscription-form-group.focus .subscription-form-button-wrapper button:hover,.banner .subscription-form form.subscription-form-group.loading .subscription-form-button-wrapper button:hover,.banner .subscription-form form.subscription-form-group:active .subscription-form-button-wrapper button:hover{background-color:var(--color-accent-blue-hover)}.banner .subscription-form form.subscription-form-group input{outline:0}.banner .subscription-form form.subscription-form-group .subscription-form-input-wrapper{flex:1 1}.banner .subscription-form form.subscription-form-group .subscription-form-input-wrapper input{border-radius:var(--border-radius-rounded);background-color:rgba(0,0,0,0);padding:0 20px}.banner .subscription-form form.subscription-form-group .subscription-form-input-wrapper input:focus{box-shadow:none}.banner .subscription-form form.subscription-form-group .subscription-form-button-wrapper{padding:4px}.banner .subscription-form form.subscription-form-group .subscription-form-button-wrapper button{flex-shrink:0;border-radius:var(--border-radius-rounded);background-color:var(--color-bg-inverse);color:var(--color-text-inverse-primary);height:40px;padding:0 20px;font-size:var(--font-size-medium-16);font-weight:var(--font-weight-medium);display:flex;align-items:center;justify-content:center}.banner .subscription-form form.subscription-form-group .subscription-form-button-wrapper button[disabled]{cursor:not-allowed;opacity:.5}.banner .subscription-form .subscription-description{margin-top:16px;font-size:var(--font-size-small-12);color:var(--color-text-tertiary)}.banner .subscription-form .subscription-description.message{color:var(--color-accent-blue)}.heading{font-family:var(--font-family-sans-serif-heading);font-size:var(--font-size-xlarge-24);font-weight:var(--font-weight-semibold);position:relative}.heading .deco{display:inline-block;width:8px;height:8px;background-color:var(--color-text-primary);margin-right:var(--spacer-12);position:absolute;left:-20px;top:50%;transform:translateY(-50%)}input[type=email],input[type=number],input[type=password],input[type=text],textarea{width:100%;background-color:var(--color-bg-grey);border-radius:var(--border-radius-12);padding:0 var(--spacer-12)}input[type=email]:hover,input[type=number]:hover,input[type=password]:hover,input[type=text]:hover,textarea:hover{background-color:var(--color-bg-grey-hover)}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=text]:focus,textarea:focus{background-color:var(--color-bg);outline:solid 2px var(--color-accent-blue);outline-offset:0}input[type=email],input[type=number],input[type=password],input[type=text]{min-height:40px}textarea{resize:none;padding:var(--spacer-8) var(--spacer-12);line-height:var(--line-height-large)}.icon-button,.icon-button-with-text,.trigger{cursor:pointer;height:32px;border-radius:var(--border-radius-8);background-color:var(--color-bg-grey);color:var(--color-text-tertiary)}.icon-button svg,.icon-button-with-text svg,.trigger svg{width:18px;height:18px}.icon-button-with-text:hover,.icon-button:hover,.trigger:hover{background-color:var(--color-bg-grey-hover);color:var(--color-text-tertiary-hover)}.icon-button-with-text.light-accent,.icon-button.light-accent,.trigger.light-accent{background-color:var(--color-accent-blue-light);color:var(--color-accent-blue)}.icon-button-with-text.light-accent:hover,.icon-button.light-accent:hover,.trigger.light-accent:hover{background-color:var(--color-accent-blue-light-hover);color:var(--color-accent-blue-hover)}.icon-button-with-text.accent,.icon-button.accent,.trigger.accent{background-color:var(--color-accent-blue);font-weight:var(--font-weight-medium);color:var(--always-color-white)}.icon-button-with-text.accent:hover,.icon-button.accent:hover,.trigger.accent:hover{background-color:var(--color-accent-blue-hover)}.icon-button-with-text.inverse,.icon-button.inverse,.trigger.inverse{background-color:var(--color-text-primary);font-weight:var(--font-weight-medium);color:var(--color-text-inverse-primary)}.icon-button{cursor:pointer;height:32px;width:32px;display:inline-flex}.icon-button,.icon-button-with-text{align-items:center;justify-content:center}.icon-button-with-text{display:flex;gap:var(--spacer-6);padding:0 var(--spacer-12) 0 var(--spacer-10);height:36px;border-radius:var(--border-radius-10)}.text-button{color:var(--color-text-tertiary)}.text-button:hover{color:var(--color-text-tertiary-hover)}.segment-buttons-group{display:flex;align-items:center;gap:var(--spacer-12)}.segment-buttons-group .segment-buttons{height:32px;padding:var(--spacer-2);border-radius:var(--border-radius-10);border:1px solid var(--color-border);display:flex;align-items:center;gap:var(--spacer-2)}.segment-buttons-group .segment-buttons .segment-button{cursor:pointer;padding:0 var(--spacer-8);border-radius:var(--border-radius-8);height:100%;min-width:28px;font-size:var(--font-size-small-12);font-weight:var(--font-weight-medium);color:var(--color-text-tertiary)}.segment-buttons-group .segment-buttons .segment-button:hover{color:var(--color-text-tertiary-hover)}.segment-buttons-group .segment-buttons .segment-button.active{background-color:var(--color-bg-grey-hover);color:var(--color-text-secondary)}.bar-button{cursor:pointer;padding:0 var(--spacer-16);height:48px;border-radius:var(--border-radius-12);border:1px solid var(--color-border);box-shadow:var(--shadow-light);text-align:center;color:var(--color-text-secondary)}.bar-button:hover{border-color:var(--color-border-hover);color:var(--color-text-secondary-hover)}.tabs{--tab-item-border-radius:var(--border-radius-10);--tabs-container-padding:var(--spacer-4);--tabs-container-border-radius:calc(var(--tab-item-border-radius) + var(--tabs-container-padding));margin:calc(var(--tabs-container-padding)*-1);padding:var(--tabs-container-padding);border-radius:var(--tabs-container-border-radius);background-color:var(--color-bg-grey);display:flex;gap:var(--spacer-2)}.tabs .tab{cursor:pointer;height:36px;padding:0 var(--spacer-12) 0 var(--spacer-10);display:flex;align-items:center;justify-content:center;gap:var(--spacer-6);border-radius:var(--tab-item-border-radius);font-weight:var(--font-weight-medium);color:var(--color-text-tertiary)}.tabs .tab svg{width:18px;height:18px}.tabs .tab:hover{color:var(--color-text-tertiary-hover)}.tabs .tab.active{box-shadow:var(--shadow-light);background-color:var(--color-active-on-bg-grey);color:var(--color-text-primary)}.slider-container{cursor:-webkit-grab;cursor:grab;position:relative;width:100%;height:36px;overflow:hidden;background-color:var(--color-bg-grey);border-radius:var(--border-radius-12);--slider-theme-color:var(--color-accent-blue);--slider-theme-color-hover:var(--color-accent-blue-hover);--slider-theme-color-light:var(--color-accent-blue-light);--slider-theme-color-light-hover:var(--color-accent-blue-light-hover)}.slider-container.dragging{cursor:-webkit-grabbing;cursor:grabbing}.slider-container .label,.slider-container .value-display{font-size:var(--font-size-small-12);font-weight:var(--font-weight-semibold);color:var(--color-text-tertiary)}.slider-container .label{position:absolute;left:var(--spacer-12);top:50%;transform:translateY(-50%)}.slider-container .value-display{position:absolute;right:var(--spacer-12);top:50%;transform:translateY(-50%)}.slider-container .handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:6px;height:100%;background-color:var(--color-border)}.slider-container .disabled{opacity:.5;pointer-events:none}.slider-container.modified{background-color:var(--slider-theme-color-light)}.slider-container.modified .label,.slider-container.modified .value-display{color:var(--slider-theme-color)}.slider-container.modified .handle{background-color:var(--slider-theme-color)}.slider-container.dragging,.slider-container:hover{background-color:var(--slider-theme-color-light-hover)}.slider-container.dragging .label,.slider-container.dragging .value-display,.slider-container:hover .label,.slider-container:hover .value-display{color:var(--slider-theme-color-hover)}.slider-container.dragging .handle,.slider-container:hover .handle{background-color:var(--slider-theme-color-hover)}.slider-container.variable-theme{--slider-theme-color:var(--color-accent-purple);--slider-theme-color-hover:var(--color-accent-purple-hover);--slider-theme-color-light:var(--color-accent-purple-light);--slider-theme-color-light-hover:var(--color-accent-purple-light-hover)}.breadcrumb{margin-top:var(--spacer-36);display:flex;align-items:center;gap:var(--spacer-6)}.breadcrumb .breadcrumb-separator{color:var(--color-text-placeholder)}.breadcrumb .breadcrumb-separator svg{width:16px;height:16px}.breadcrumb .breadcrumb-current{color:var(--color-text-tertiary)}.font-tags{display:flex;align-items:center;gap:var(--spacer-6)}.font-tag-item{padding:0 var(--spacer-8);height:28px;border:1px solid var(--color-border);border-radius:var(--border-radius-rounded);display:inline-flex;align-items:center;justify-content:center;font-size:var(--font-size-small-12);font-weight:var(--font-weight-semibold);color:var(--color-text-tertiary)}.font-tag-item.highlight{background-color:var(--color-accent-purple-light);color:var(--color-accent-purple);border-color:rgba(0,0,0,0)}hr{border:0;border-top:1px solid var(--color-border)}.home-font-list-container{display:flex;flex-direction:column;gap:var(--spacer-16)}.component-header{display:flex;align-items:center;justify-content:space-between}.font-list.list{display:flex;flex-direction:column;gap:var(--spacer-12)}.font-list.list .font-item .font-info{display:flex;align-items:center;justify-content:space-between}.font-list.list .font-item .font-info .font-info-left{display:flex;align-items:center;gap:var(--spacer-8)}.font-list.list .font-item .font-info .font-info-left .font-name-container{display:flex;align-items:center;gap:var(--spacer-6)}.font-list.list .font-item .font-info .font-info-left .font-name-container .font-name{color:var(--color-text-tertiary)}.font-list.list .font-item .font-info .font-info-left .font-name-container .font-name:hover{color:var(--color-text-tertiary-hover)}.font-list.list .font-item .font-info .font-info-right{display:flex;align-items:center;gap:var(--spacer-16)}.font-list.list .font-item .font-info .font-info-right .font-actions{display:flex;align-items:center;gap:var(--spacer-12)}.font-list.list .font-item .preview{margin:var(--spacer-16) 0;color:var(--color-text-primary);line-height:var(--line-height-normal)}.font-list.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-gap:var(--spacer-16)}.font-list.grid hr{display:none}.font-list.grid .bar-button{grid-column:1/-1}.font-list.grid .font-item{border-radius:var(--border-radius-12);background-color:var(--color-bg-grey);display:flex;flex-direction:column;gap:var(--spacer-12)}.font-list.grid .font-item .font-info{padding:0 var(--spacer-20);padding-top:var(--spacer-16);display:flex;align-items:center;justify-content:space-between}.font-list.grid .font-item .font-info .font-info-right,.font-list.grid .font-item .font-info .font-tag-item{display:none}.font-list.grid .font-item .font-info .font-info-left{display:flex;align-items:center;gap:var(--spacer-8)}.font-list.grid .font-item .font-info .font-info-left .font-name-container{display:flex;align-items:center;gap:var(--spacer-6)}.font-list.grid .font-item .font-info .font-info-left .font-name-container .font-name{font-size:var(--font-size-small-12);color:var(--color-text-tertiary)}.font-list.grid .font-item .font-info .font-info-left .font-name-container .font-name:hover{color:var(--color-text-tertiary-hover)}.font-list.grid .font-item .preview{padding:var(--spacer-20);padding-top:0;color:var(--color-text-primary);line-height:var(--line-height-normal)}.font-list .font-item{cursor:pointer}.font-list .font-item .preview.loading{color:var(--color-text-placeholder);animation:loading-animation 2s infinite}@keyframes loading-animation{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.font-list-end{text-align:center;color:var(--color-text-placeholder)}.font-list-empty-state{margin:var(--spacer-36);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacer-24)}.font-list-empty-state .font-list-empty-state-icon svg{width:64px;height:64px}.font-list-empty-state .font-list-empty-state-message{font-size:var(--font-size-xlarge-24);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.font-page .font-page-hero{margin-top:56px;display:flex;flex-direction:column;gap:var(--spacer-32)}.font-page .font-page-hero .font-name{font-size:72px;font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);color:var(--color-text-primary)}.font-page .font-page-hero .font-meta{display:flex;align-items:center;justify-content:space-between}.font-page .font-page-hero .font-meta .font-designer-info{display:flex;align-items:center;gap:var(--spacer-4);color:var(--color-text-tertiary)}.font-page .font-page-hero .font-meta .font-designer-info .font-designer-info-name-group{display:flex;align-items:center;gap:var(--spacer-4)}.font-page .font-page-hero .font-meta .font-designer-info .font-designer-info-name-group .font-designer-info-name{color:var(--color-text-secondary)}.font-page .font-page-hero .font-meta .font-designer-info .font-designer-info-name-group .font-designer-info-name-divider{color:var(--color-text-placeholder)}.font-page .font-page-hero .font-actions{display:flex;align-items:center;gap:var(--spacer-12)}.font-page .font-page-hero .font-actions .no-download{color:var(--color-text-placeholder)}.font-page .font-details{margin-top:var(--spacer-24);--font-details-inner-padding:36px;padding:calc(var(--font-details-inner-padding) - 2px) var(--font-details-inner-padding);border-radius:var(--border-radius-16);box-shadow:var(--shadow-heavy);background-color:var(--color-bg-overlay);position:relative;display:flex;flex-direction:column;color:var(--color-text-secondary)}.font-page .font-details hr{margin:var(--spacer-28) 0}.font-page .font-details .font-details-about{line-height:var(--line-height-large)}.font-page .font-details .font-details-about.font-details-about-long-default{cursor:pointer}.font-page .font-details .font-details-about.font-details-about-long-default:hover{color:var(--color-text-secondary-hover)}.font-page .font-details .font-details-about.font-details-about-long-expanded{cursor:text}.font-page .font-details .font-details-about .font-details-more{cursor:pointer;color:var(--color-text-tertiary)}.font-page .font-details .font-details-about .font-details-more:hover{color:var(--color-text-tertiary-hover)}.font-page .font-details .font-details-license .license-table{display:flex;gap:var(--spacer-16)}.font-page .font-details .font-details-license .license-table .license-item{flex:1 1;display:flex;flex-direction:column;gap:var(--spacer-12)}.font-page .font-details .font-details-license .license-table .license-item .label{font-size:var(--font-size-small-12);color:var(--color-text-tertiary)}.font-page .font-details .font-details-license .license-table .license-item .value{display:flex;align-items:center;gap:var(--spacer-8)}.font-page .font-details .font-details-license .license-table .license-item .value .dot{--dot-size:6px;width:var(--dot-size);height:var(--dot-size);border-radius:50%}.font-page .font-details .font-details-license .license-table .license-item .value .positive{background-color:var(--color-accent-green)}.font-page .font-details .font-details-license .license-table .license-item .value .negative{background-color:red}.font-page .font-details .font-details-license .license-table .license-item .value a{display:flex;align-items:center;gap:var(--spacer-4)}.font-page .font-details .font-details-license-ai-info{font-size:var(--font-size-small-12);color:var(--color-text-placeholder)}.font-page .font-preview{margin-top:48px;display:flex;flex-direction:column;gap:48px}.font-page .font-preview .font-preview-weights .font-preview-weights-list{margin-top:var(--spacer-20);display:flex;flex-direction:column;gap:var(--spacer-12)}.font-page .font-preview .font-preview-weights .font-preview-weights-list .font-preview-weight .font-preview-weight-name{color:var(--color-text-tertiary);display:flex;align-items:center;gap:var(--spacer-8)}.font-page .font-preview .font-preview-weights .font-preview-weights-list .font-preview-weight .font-preview-weight-preview{padding:var(--spacer-16) 0;line-height:var(--line-height-normal)}.font-page .font-preview .font-preview-specimen{display:flex;flex-direction:column;gap:var(--spacer-24)}.font-page .font-preview .font-preview-specimen .font-preview-specimen-blocks{display:flex;gap:var(--spacer-36);--row-gap:var(--spacer-36)}.font-page .font-preview .font-preview-specimen .font-preview-specimen-blocks .left,.font-page .font-preview .font-preview-specimen .font-preview-specimen-blocks .right{flex:1 1;display:flex;flex-direction:column}.font-page .font-preview .font-preview-specimen .font-preview-specimen-blocks .specimen-demo-block .specimen-demo-block-title{margin-bottom:var(--spacer-8);font-size:var(--font-size-small-12);font-weight:var(--font-weight-normal);color:var(--color-text-tertiary)}.font-page .font-preview .font-preview-specimen .font-preview-specimen-blocks .left{gap:var(--spacer-36)}.font-page .font-preview .font-preview-specimen .font-preview-specimen-blocks .right{gap:var(--spacer-28)}.font-page .font-preview .font-preview-specimen .font-preview-specimen-blocks .right .specimen-demo-block-preview{line-height:var(--line-height-large)}.font-page .font-preview .font-preview-specimen .font-preview-specimen-blocks.alphabet,.font-page .font-preview .font-preview-specimen .font-preview-specimen-blocks.vertical{flex-direction:column;gap:var(--row-gap)}.font-page .font-preview .font-preview-specimen .font-preview-specimen-blocks.vertical .specimen-demo-block .specimen-demo-block-title{text-align:right}.font-page .font-preview .font-preview-specimen .font-preview-specimen-blocks.vertical .specimen-demo-block .specimen-demo-block-preview{width:100%;height:240px;writing-mode:vertical-rl;word-break:break-all;line-height:var(--line-height-normal)}.latest-updates{border-top:1px solid var(--color-border);margin-top:1rem}.filter-content{display:flex;flex-direction:column;gap:var(--spacer-24)}.filter-content .filter-group{display:flex;flex-direction:column;gap:var(--spacer-12)}.filter-content .filter-group .filter-group-title{padding:0 var(--spacer-12);font-size:var(--font-size-small-12);font-weight:var(--font-weight-semibold);color:var(--color-text-tertiary)}.filter-content .filter-group .filter-list{display:flex;flex-wrap:wrap;gap:var(--spacer-10)}.filter-content .filter-group .filter-list li{cursor:pointer;height:36px;border:1px solid var(--color-border);box-shadow:var(--shadow-light);border-radius:var(--border-radius-10);display:flex;align-items:center;justify-content:center;padding:0 var(--spacer-12);color:var(--color-text-secondary)}.filter-content .filter-group .filter-list li:hover{border-color:var(--color-border-hover);color:var(--color-text-secondary-hover)}.filter-content .filter-group .filter-list li.active{border-color:rgba(0,0,0,0);box-shadow:none;background-color:var(--color-accent-green-light);color:var(--color-accent-green)}.filter-content .filter-group .filter-list li.active:hover{background-color:var(--color-accent-green-light-hover);color:var(--color-accent-green-hover)}.filter-content .filter-group .filter-list.large{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));grid-gap:var(--spacer-12)}.filter-content .filter-group .filter-list.large li{border-radius:var(--border-radius-12);height:56px;font-size:var(--font-size-xlarge-24)}[lang=en] .filter-content .filter-group .filter-list.large{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}[lang=en] .filter-content .filter-group .filter-list.large li{font-size:var(--font-size-large-16)}.language-switcher{z-index:1;position:relative;display:inline-block}.language-switcher .trigger{cursor:pointer;display:flex;align-items:center}.language-switcher .trigger svg{margin:0 7px}.language-switcher .trigger .trigger-divider{width:1.5px;height:100%;background:var(--color-bg)}.language-switcher .trigger .locale{margin:0 8px}.language-switcher .dropdown{padding:var(--spacer-4);background:var(--color-bg-inverse);border-radius:var(--border-radius-12);box-shadow:var(--shadow-heavy);display:flex;gap:var(--spacer-2);white-space:nowrap;font-weight:var(--font-weight-medium);color:var(--color-text-inverse-primary)}.language-switcher .dropdown .item{cursor:pointer;background:rgba(0,0,0,0);height:32px;padding:0 var(--spacer-10);border-radius:var(--border-radius-8);color:var(--color-text-inverse-tertiary)}.language-switcher .dropdown .item:hover{color:var(--color-text-inverse-tertiary-hover)}.language-switcher .dropdown .item.active{background-color:var(--color-active-on-bg-inverse);color:var(--color-text-inverse-primary)}.search-results{margin-top:var(--spacer-24);display:flex;flex-direction:column;gap:var(--spacer-16)}.search-results .heading{font-family:var(--font-family-sans-serif)}.mask{position:fixed;top:0;left:0;z-index:999;width:100%;height:100%;background:var(--color-bg-mask);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.modal{display:flex;justify-content:center;align-items:center}.modal .modal-content{background:var(--color-bg-overlay);box-shadow:var(--shadow-heavy);padding:var(--spacer-24);border-radius:var(--border-radius-16);width:400px;position:relative;display:flex;flex-direction:column;gap:var(--spacer-16)}.modal .modal-content .modal-header{padding:var(--spacer-12);display:flex;flex-direction:column;gap:var(--spacer-16)}.modal .modal-content .modal-header .modal-title{font-size:28px}.modal .modal-content .close-button{cursor:pointer;position:absolute;top:0;right:0;padding:var(--spacer-20);color:var(--color-text-tertiary)}.modal .modal-content .close-button:hover{color:var(--color-text-tertiary-hover)}.modal .modal-content .close-button svg{width:20px;height:20px}.modal .modal-content form{display:flex;flex-direction:column;gap:var(--spacer-20)}.modal .modal-content form .group{display:flex;flex-direction:column;gap:var(--spacer-12)}.modal .modal-content form .group .group-header{padding:0 var(--spacer-12);display:flex;justify-content:space-between;align-items:center}.modal .modal-content form .group .group-header label{font-size:var(--font-size-small-12);font-weight:var(--font-weight-semibold);color:var(--color-text-tertiary)}.modal .modal-content form .group .group-header .error-message{font-size:var(--font-size-small-12);font-weight:var(--font-weight-medium);color:var(--color-accent-blue);text-align:right}.modal .modal-content form .submit{margin-top:var(--spacer-16);height:40px;width:100%}.state{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacer-24);text-align:center}.state .state-icon{width:72px;height:72px}.state .state-icon svg{width:100%;height:100%;color:var(--color-accent-green)}.state .state-content{display:flex;flex-direction:column;gap:var(--spacer-16)}.state .state-content .state-title{font-size:var(--font-size-xlarge-24);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.state .state-content .state-message{font-size:var(--font-size-medium-16);line-height:var(--line-height-large);color:var(--color-text-secondary);text-wrap:balance}.single-page-main{margin:0 auto;max-width:640px;padding:64px 0;display:flex;flex-direction:column;gap:var(--spacer-36)}.single-page-main .page-heading{font-family:var(--font-family-sans-serif-heading);font-size:52px}.single-page-main .page-content{display:flex;flex-direction:column;gap:var(--spacer-24)}.single-page-main .page-content p{line-height:var(--line-height-large);color:var(--color-text-secondary)}.share-modal .share-modal-title{font-size:var(--font-size-xlarge-24);font-weight:var(--font-weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{z-index:1000;border-radius:var(--border-radius-rounded);background-color:var(--color-bg-inverse);color:var(--color-text-inverse-primary);height:40px;padding-left:var(--spacer-10);padding-right:var(--spacer-16);display:flex;align-items:center;gap:var(--spacer-8);font-weight:var(--font-weight-medium)}.toast svg{width:20px;height:20px}.unsubscribe-page{padding:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacer-24)}.unsubscribe-page .unsubscribe-page-message{font-size:var(--font-size-xlarge-24);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.scroll-to-top-container{position:absolute;top:0;left:0;right:0;z-index:9999;height:0;display:flex;justify-content:center}.scroll-to-top{cursor:pointer;position:fixed;width:32px;height:32px;background-color:var(--color-bg-overlay);border-radius:var(--border-radius-rounded);box-shadow:var(--shadow-heavy);display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary)}.scroll-to-top svg{width:18px;height:18px}.scroll-to-top:hover{color:var(--color-text-secondary-hover)}