*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Inter,Arial,sans-serif;font-size:18px;line-height:1.4;}

@font-face{
  font-family:'Typewriter Sketch';
  src:url('https://yofont.com/fonts_users/8e296a067a37563370ded05f5a3bf3ec/0362389299b424bf993c33a10d3a2874/5.0/full/f5057b978e1c26d92120eea974c48bce_70376326ae4e616ab66188a3d76e54ce.otf?t=1762760840') format('opentype'),
       url('https://yofont.com/fonts_users/8e296a067a37563370ded05f5a3bf3ec/0362389299b424bf993c33a10d3a2874/5.0/full/f5057b978e1c26d92120eea974c48bce_70376326ae4e616ab66188a3d76e54ce.ttf?t=1762760840') format('truetype');
  font-weight:normal;
  font-style:normal;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family:Inter,system-ui,-apple-system,sans-serif;
}

footer {
    margin-top: auto;
}

:root{
    --border-clr:#111;
    --radius-pill:9999px;
    --radius-box:1.5rem;
    --background-img-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'><filter id='grain'><feTurbulence type='fractalNoise' baseFrequency='3.6' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23grain)' opacity='0.7'/></svg>");
}


.paper-bg{
    height:auto;position:relative;overflow-x:hidden;color:#111;
    background-color: #f8f8f8;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'><filter id='grain'><feTurbulence type='fractalNoise' baseFrequency='3.6' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23grain)' opacity='0.35'/></svg>");
}
.paper-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: overlay;
    opacity: 0.09;
    background-repeat: repeat;
    background-size: auto;
}

.tags{
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    cursor: pointer;
}
.tags:hover{
    opacity: 0.85;
}

#top {
    height: 100vh;
    min-height: 850px;
    display: flex;
    flex-direction: column;
    position: relative;
}
@media(max-width:1024px){
    #top{height: 98vh;}
}
@media(max-width:768px){
    #top{height: 90vh;}
}
#index-block{
    max-width:550px;
    position:absolute;
    top:445px;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    z-index:3;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

@media(max-width:1180px){
    #index-block{top:53%;}
}
@media(max-width:1024px){
    #index-block{top:53%;}
}
@media(max-width:992px){
    #index-block{top:52%;}
}
@media(max-width:768px){
    #index-block{top:50%;}
}
@media(max-width:575px){
    #index-block{top:50%;}
}
#font-list{
    background-color:#fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'><filter id='grain'><feTurbulence type='fractalNoise' baseFrequency='3.6' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23grain)' opacity='0.3'/></svg>");
    border-radius:38px 38px 0 0;
}
#banner_index{
    font-size: calc(1.425rem + 1.1vw);
}
.group_name{
    color:#181818;
    font-weight:600;
}

.list_lang_name{
    color:#181818;
    font-weight:600;
}

.lang_name{
    color:#888;
    font-weight:500;
    opacity:.6;
}

.lang-back{
    cursor:pointer;
    font-size: 1rem;
    font-weight:600;
    padding:5px 0;
    border-bottom: 1px solid #dadada;
    margin-bottom: 5px;
}
.lang-back:hover{
    opacity: 0.7;
}

#lang_btn:hover .group_name{
    color:#fff;
}


#main-header{min-height:72px;position:relative;z-index:10;padding:0 5px;}


.logo-text{
    color: #111;
    letter-spacing:-1px;
    font-size:clamp(1.5rem,2.7vw,2.2rem);
    text-decoration:none;
}


.main-menu{flex:1 1 auto;display:flex;justify-content:center;align-items:center}
.main-menu .nav{gap:1.8rem}
.main-menu .nav-link{
    color:#161616;font-weight:500;font-size:1rem;padding:7px 18px;border-radius:2rem;
    transition:background .15s,color .15s
}
.main-menu .nav-link.active,
.main-menu .nav-link:focus{background:rgba(0,0,0,.08);color:#000;text-decoration:none}
.main-menu .nav-link:hover:not(.active){background:#000;color:#fff}


.menu-dropdown-btn{
    display:flex;align-items:center;gap:.35rem;
    font-weight:600;
    font-size:clamp(.8rem,3.5vw,.95rem);
    padding:8px 24px;
    background:#fff;
    border:2px solid #181818;
    border-radius:9999px;
    transition:background .15s,border-color .15s
}
.menu-dropdown-btn:hover{background:#f2f2f2}


#mobileMenu{
    position: absolute;
    top: 65px;
    left: 0;
    width: 100%;
    background-color:#dcdcdc;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'><filter id='grain'><feTurbulence type='fractalNoise' baseFrequency='3.6' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23grain)' opacity='0.7'/></svg>");
    border-top:2px solid #111;
    border-bottom:2px solid #111;
    z-index: 7;
}
#mobileMenu .nav-link{
    font-size: clamp(0.85rem, 4vw, 1.1rem);font-weight:500;padding:6px 12px;border-radius:12px;white-space:nowrap;
    color:#161616;transition:background .15s,color .15s
}
#mobileMenu .nav-link.active,
#mobileMenu .nav-link:focus{background-color:#111;color:#fff;}
#mobileMenu .nav-link:hover:not(.active){background:#000;color:#fff}


@media(min-width:768px){.main-menu{display:block}.menu-dropdown-btn{display:none}#mobileMenu{display:none!important}}
@media(max-width:767.98px){.main-menu{display:none}.menu-dropdown-btn{display:inline-flex}}


.signin-btn, .gen-btn-texture {
    position:relative;
    z-index:1;
    font-weight:600;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'><filter id='grain'><feTurbulence type='fractalNoise' baseFrequency='3.6' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23grain)' opacity='0.4'/></svg>");
    background-size: 100%;
    background-color: #000;
    color: #fff;
    border:2px solid #111;
    border-radius:38px;
    font-size:1.1rem;
    transition:
        background-color 0.18s,
        background-image 0.18s,
        filter 0.18s;
}

.signin-btn:hover,
.gen-btn-texture:hover {
    background-color: #8B5CF6;
    border-color: #111;
}

.noisy-input{
    position:relative;z-index:1;box-shadow:0 2px 8px rgba(0,0,0,.09);border-radius: 38px;min-height: 300px; max-height: 400px;
}


.gen-btn-texture{padding:10px 0 22px 0;font-size:1.22rem;letter-spacing:.04em}
.signin-btn{padding:12px 30px;}


.noisy-input{
    width:100%;padding:16px 28px;font-size:1.1rem;background:#fff;color:#161616
}


.noisy-input::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
}

.noisy-input:focus{border-color:#000;box-shadow:0 3px 14px rgba(0,0,0,.12);outline:none}


#hero {
    flex: 1 1 auto;
    width: 100%;
    position: relative;
    text-align: center;
    height: auto;
}
#hero h1{font-weight:700;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-1.5px;margin-bottom:12px;position:relative;z-index:1}
#hero .container{position:relative;z-index:2}


.letter-pair{
    position:absolute;font-family:"Times New Roman",serif;
    font-size:clamp(1.3rem,2.5vw,3rem);opacity:.9;cursor:pointer;user-select:none;
    transition:transform .23s cubic-bezier(.5,1.5,.45,1.05),opacity .18s
}
.letter-pair:hover{transform:scale(1.14);opacity:1}

 #main-header .logo-text img{height: 60px;}

@media (max-width:600px){
    #hero h1{font-size:2.1rem}
    #main-header .logo-text img{height: 50px;}
}
@media (max-width:767px){
    .dropdown-menu{min-width:97vw;left:-16px}
    .menu-dropdown-btn{min-width:100px;padding:6px 10px;position: absolute;left: 50%;transform: translateX(-50%);}
    .signin-btn{font-size:clamp(.6rem,2.8vw,1rem);}
}
@media (max-width:340px){
    #main-header .logo-text img{height: 35px;}
}


.btn:focus,.btn:active{box-shadow:none!important}

.dropdown-item.active, .dropdown-item:active{
    background-color: #8B5CF6;
    color: #fff;
}


.filter-panel{
    border:2px solid var(--border-clr);
    border-radius:var(--radius-box);
    display:flex;flex-direction:column;gap:1rem;
    padding:1.1rem 1rem;
    position:relative;z-index:20;   
    overflow:visible;               
}


.global-tester{
    width:100%;
    font-size:clamp(1rem,4.6vw,1.3rem);
    border:2px solid var(--border-clr);
    border-radius:1rem;
    padding:.6rem 1.1rem;
    background:#fff;
}


.filter-scroll{
    overflow-x:auto;overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;margin-bottom:-4px;
    scrollbar-width:none;
}
.filter-scroll::-webkit-scrollbar{display:none}

.filter-bar{
    list-style:none;display:flex;gap:.5rem;
    margin:0;padding:0;flex-wrap:nowrap;
    justify-content: center;
}

.filter-btn{
    display:flex;align-items:center;gap:.25rem;
    padding:.45rem 1.2rem;
    border:2px solid var(--border-clr);
    border-radius:var(--radius-pill);
    background:#fff;font-weight:600;
    font-size:clamp(.8rem,3.7vw,1rem);
    white-space:nowrap;cursor:pointer;
    transition:background .15s,color .15s;
    color: #111;
}
.filter-btn:hover{background:#000;color:#fff}


.filter-item{    
    justify-content: center;
    display: flex;
}


.filter-options{
    display:none;
    position:absolute;               
    margin-top: 50px;
    min-width:180px;
    background:#fff;
    border:2px solid var(--border-clr);
    border-radius:1rem;
    box-shadow:0 10px 32px rgba(0,0,0,.09);
    list-style:none;
    padding:.3rem;
    z-index:9999;
    text-align: center;
}
.filter-options .option{
    padding:.35rem .8rem;
    margin-top: 3px;
    font-size:clamp(.8rem,3.3vw,1rem);
    border-radius:.6rem;cursor:pointer;
    transition:background .15s,color .15s;
}
.filter-options .option:hover,
.filter-options .option.active{background:#000;color:#fff}




@media(min-width:768px){
  .filter-item.open .filter-options{display:block}
  .preview-box{min-width:100px;min-height:100px;}
}
@media(max-width:768px){
  .filter-bar{justify-content:flex-start}
  .open .filter-options{display:none;}
}

.preview-box{
    min-width:150px;min-height:150px;
    border:2px solid var(--border-clr);
    border-radius:var(--radius-box);
    background-color:#fff;
    
    display:flex;align-items:center;justify-content:center;
}
.glyph{line-height:1}

.font-name{font-size:clamp(2.3rem,7vw,3.2rem);font-weight:unset;word-wrap: break-word;}
.font-demo{
    display:block;font-size:clamp(1rem,4.5vw,1.6rem);
    margin-top:.4rem;
    word-wrap: break-word;
}

.download-link{
    font-weight:600;font-size:clamp(1.25rem,3.5vw,1rem);
    text-decoration:none;padding:.45rem 1.2rem;
    border:2px solid var(--border-clr);border-radius:var(--radius-pill);
    transition:background .15s,color .15s;cursor:pointer;
    -webkit-user-select:none;-moz-user-select:none;user-select:none;
}
.download-link:hover{background:#000;color:#fff}
@media(min-width:768px){.download-link{margin-left:auto;margin-top:auto}}

@media(max-width:767.98px){.tester-wrapper{margin-bottom:.6rem}}

.buy-link {
    font-weight: 600;
    font-size: clamp(.85rem,3.5vw,1rem);
    text-decoration: none;
    padding: .45rem 1.2rem;
    border: 2px solid var(--border-clr);
    border-radius: var(--radius-pill);
    transition: background .15s, color .15s;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0.5rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.buy-link:hover {
    background: #000;
    color: #fff;
}
.sub-link {
    font-size: clamp(0.65rem, 1.2vw, 1rem);
    margin-top: 10px;
    color: #111;
    display: block;
    text-align: right;
}

@media (max-width: 1199.98px) {
    .sub-link {
        font-size: 0.80rem;
    }
    .sub-link .badge {
        font-size: 0.75em;
        padding: 3px 8px;
    }
}

@media (max-width: 991.98px) {
    .sub-link {
        text-align: center;
        font-size: 0.75rem;
    }
    .sub-link .badge {
        font-size: 0.75rem;
        margin-top: 3px;
        padding: 3px 8px;
    }
    .font-demo, .font-name{
        padding-left: 1rem;
        text-align: left;
    }
}

@media (max-width: 767.98px) {
    .sub-link {
        font-size: 0.8rem;
        margin-top: 7px;
    }
    .sub-link .badge {
        font-size: 0.8rem;
        padding: 3px 8px;
    }
    .font-demo, .font-name{
        padding-left: 0;
        text-align: center;
    }
}


.starter-badge{
    background-color:#06D6A0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'><filter id='grain'><feTurbulence type='fractalNoise' baseFrequency='3.6' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23grain)' opacity='0.5'/></svg>");
    color: #111;
}


#mobile-filter-result {
    background: #fff;
    border: 2px solid var(--border-clr);
    border-radius: 1rem;
    box-shadow: 0 10px 32px rgba(0,0,0,.08);
    list-style: none;
    padding: .4rem 0;
    margin: 1rem 0 0;
    text-align: center;
}

#mobile-filter-result li {
    padding: .4rem .8rem;
    font-size: clamp(.85rem, 3.4vw, 1rem);
    border-radius: .6rem;
    margin-top: 3px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

#mobile-filter-result li:hover,
#mobile-filter-result li.active {
    background: #000;
    color: #fff;
}

#globalTester:focus{
    border-color: #8B5CF6;
    box-shadow: 0 0 0 .25rem #8a5cf692;
}

a.badge{
    text-decoration: none;
}

.notify-box {
    position: fixed;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    width: 90vw;
    max-width: 550px;
    text-align: center;
    z-index: 100010;
    background: #fff;
    color: #222;
    border-radius: 18px;
    box-shadow: 0 6px 32px 0 rgba(0,0,0,.18);
    font-size: 1.09rem;
    font-weight: 500;
    padding: 17px 10px;
    gap: 10px;
    border: 2px solid #eee;
    opacity: 0;
    pointer-events: none;
    transition: opacity .23s, top .32s;
}
.notify-box.notify-show {
    opacity: 1;
    pointer-events: auto;
    top: 70px;
}
.notify-box i{
    text-align: center;
    margin-top: 4px;
}
@media (max-width: 767.98px) {
    .notify-box {
        font-size: 0.8rem;
    }
}

.notify-success {
    border-color: #06d6a0;
    color: #06b78a;
}
.notify-error {
    border-color: #ff3571;
    color: #d90038;
}
.notify-box .fa {
    font-size: 1.25em;
    opacity: .86;
}


.user-menu { position: relative; }
.user-menu-btn {
    display: flex; align-items: center; gap: .55rem;
    background: #fff; color: #111; border: 2px solid var(--border-clr);
    font-weight: 600; font-size: .95rem; padding: 8px 18px;
    border-radius: var(--radius-pill); cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}
.user-menu-btn:hover { background-color: #000; color:#fff; }
.user-menu-btn i { font-size: 1rem; }

.user-dropdown { position: absolute; right: 0; top: calc(100% + 10px); background: #fff; border: 2px solid var(--border-clr); border-radius: 1rem; box-shadow: 0 10px 32px rgba(0,0,0,.08); list-style: none; padding: .35rem 0; width: max-content; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .2s, transform .2s; z-index: 9999; }

.user-dropdown.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

.user-dropdown li { margin: 2px 0; padding: 0 .3rem; }

#glyphs_user{font-weight: 600;background: #111111; border-radius: 5px; color: #fff; padding: 5px 5px;}
.user-dropdown a, .user-dropdown .item { display: block; padding: .5rem 1rem; border-radius: .7rem; font-size: .92rem; color: #111; text-decoration: none; transition: background .15s,color .15s; cursor: pointer; }

.user-dropdown a:hover, .user-dropdown span:hover { background-color: #000; color: #fff; }

.user-dropdown li.glyph_count:hover, .user-dropdown li.glyph_count .item{
    background-color: transparent !important;  
    color: #111 !important;
    cursor: default !important;
}


.user-dropdown i { width: 1.1em; text-align: center; color: #666; transition: color 0.2s; }

.user-dropdown a:hover i, .user-dropdown span:hover i { color: #fff; }

.notice-bar {
    width: 100vw;
    background: #fff7e0;
    color: #a46c01;
    border-bottom: 1.5px solid #ffecbe;
    font-weight: 500;
    font-size: 1.06rem;
    text-align: center;
    padding: 0.74rem 0;
    z-index: 99999;
    position: relative;
    top: 0; left: 0;
    box-shadow: 0 2px 20px rgba(255,206,57,0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.17em;
}
.notice-bar-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.notice-bar .notice-btn {
    background: #ffd658;
    border: none;
    color: #a46c01;
    font-weight: 700;
    border-radius: 12px;
    padding: 7px 20px;
    margin-left: 0;
    cursor: pointer;
    box-shadow: 0 2px 4px #fff4bb70;
    transition: background .15s, box-shadow .15s;
    outline: none;
}
.notice-bar .notice-btn:hover {
    background: #ffeaa6;
    box-shadow: 0 3px 8px #fff7c3a5;
}
.notice-bar.notice-success {
    background: #e9ffe5;
    color: #008943;
    border-bottom: 1.5px solid #b7f6cc;
    box-shadow: 0 2px 18px rgba(62,255,147,0.10);
}
.notice-bar .notice-info {
    font-size: 0.95em;
    opacity: 0.8;
    margin-left: 10px;
}
@media (max-width: 600px) {
    .notice-bar { font-size: .99rem; padding: 0.5rem 0.2rem; }
    .notice-bar .notice-btn { padding: 7px 11px; }
    .notice-bar-content { flex-direction: column; gap: 4px; }
}


.prompt-settings{
    justify-content: center;
}
.prompt-settings .prompt-select{
    position: relative;
    width: 30%;
}
.prompt-btn{
    width:100%;height:50px;padding:.55rem 1.2rem;
    border:2px solid var(--border-clr);
    color: #111;
    border-radius:var(--radius-pill);
    background:#fff;font-weight:600;
    font-size:clamp(.9rem, 3rem, .5rem);
    display:flex;align-items:center;justify-content:center;
    gap:.25rem;cursor:pointer;transition:background .15s,color .15s;
}
.prompt-btn:hover{background:#000;color:#fff}


.prompt-options{
    display:none;position:absolute;left:0;top:calc(100% + .4rem);
    width:100%;background:#fff;border:2px solid var(--border-clr);
    border-radius:1rem;box-shadow:0 10px 32px rgba(0,0,0,.09);
    z-index:9999;padding: 0.25rem .2rem;text-align:center;
    -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.prompt-options .option{
    padding:.35rem .8rem;margin-top:3px;border-radius:.6rem;
    font-size:clamp(.55rem,3rem,1rem);cursor:pointer;
    transition:background .15s,color .15s;
    display:flex;align-items:center;justify-content:center;gap:.4rem;
    font-weight: 600;
}
.prompt-options .option:hover{
    color: #8B5CF6;
    background-color: #fff;
}
.prompt-options .option:not(.active):hover span{
    color: #8B5CF6;
    font-weight: 600;
}
.prompt-options .option.active{background-color: #8B5CF6; color: #111; font-weight: 600;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'><filter id='grain'><feTurbulence type='fractalNoise' baseFrequency='3.6' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23grain)' opacity='0.7'/></svg>");
}


.prompt-upload-wrap {
    position: relative;
}

.prompt-attach-btn {
    position: absolute;
    right: 20px;
    bottom: 10px;
    background: none;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
    z-index: 2;
}

.prompt-image-thumb {
    position: absolute;
    right: 20px;
    bottom: 10px;
    background: transparent;
    z-index: 2;
}

.prompt-thumb-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.prompt-thumb-img-index{
    border-radius: 6px 6px 18px 6px !important;
}

.prompt-thumb-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #eee;
    display: block;
    background: #fafafa;
}

.delete_img_index {
    background: transparent;
    height: 20px;
    width: 20px;
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 4px;
    margin-right: 3px;
}

.delete_img_index:hover, .delete_img_index:active {
    color: #d9534f !important;
    background: #fff !important;
    border-radius: 32px;
}

.delete_img {
    background: transparent;
    height: 28px;
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 4px;
    margin-right: 3px;
}

.delete_img:hover, .delete_img:active {
    color: #d9534f !important;
    background: #fff !important;
    border-radius: 32px;
}



.check-icon{opacity:0;transition:opacity .15s}
.option.active .check-icon{opacity:1}


.prompt-select.open .prompt-options{display:block}


@media(max-width:600px){
    .prompt-settings{gap:.4rem}
    .prompt-select{flex:1 1 30%}
    .prompt-btn{padding:.45rem .8rem;height: 40px; font-size: clamp(.6rem, 3rem, .5rem);}
    .prompt-options .option{font-size: clamp(.6rem, 3rem, .7rem);}
    .lang-back{font-size: clamp(.6rem, 3rem, .8rem);}
}

.prompt-select.disabled,
.prompt-btn.disabled,
#generate_start.disabled {
    pointer-events: none;
    opacity: 0.6;
}

#index_glyph_cost{
    position: absolute;
    width: 100%;
    left: 13px;
    bottom: 5px;
    font-size: 12px;
    color: #8c8c8c;
}

.gen-btn-texture:hover #index_glyph_cost{
    color: #111111ab;
}

#index_glyph_cost_value{
    background-color: #8B5CF6;
    padding: 5px 10px 5px ;
    border-radius: 5px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'><filter id='grain'><feTurbulence type='fractalNoise' baseFrequency='3.6' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23grain)' opacity='0.7'/></svg>");
}

.badge_black{
    padding: 7px 13px;
    border-radius: 10px;
    background-color: #111;
    color: #fff;
}
.badge_purple{
    padding: 7px 10px;
    border-radius: 10px;
    background-color: #8B5CF6;
    color: #fff !important;
    margin: 3px !important;
}
.badge_green{
    color: #111;
    background: #0bee64;
    padding: 5px 10px;
    border-radius: 9999px;
}

.br-mobile {
  display: none;
}


@media (min-width: 992px) {
  .br-mobile {
    display: inline;
  }
}


.site-footer { color: rgba(255,255,255,0.88); }
.footer-card {
    background: #000;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border-radius: 12px;
}
.footer-link {
  color: #000000cc;
  padding-bottom: 2px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.list-unstyled li{
    padding-bottom: 2px;
}
.footer-link:hover { color: #000; border-bottom: 1px solid #000000ba; }
.btn-ghost {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  padding: .45rem .8rem;
  border-radius: 999px;
}
.btn-ghost-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  padding: .45rem .8rem;
  border-radius: 999px;
}
.footer-social { color: rgba(255,255,255,0.85); font-size:1.05rem; }
.footer-social:hover { color: #fff; }


.font-card .font-name{
    word-break:break-word;  
}

.badge{margin:.4rem .35rem .2rem 0;font-weight:600}
.download-dropdown .btn{font-weight:600;border:2px solid #111;border-radius:9999px;
                        padding:.6rem 1.35rem;background:#fff;color:#111}
.download-dropdown .btn:hover{background:#000;color:#fff}
.download-dropdown .dropdown-menu{border:2px solid #111;border-radius:1.1rem;
                                  padding:.7rem;min-width:250px}
.download-dropdown .dropdown-item{font-weight: 600; border-radius: .55rem; padding: 8px; margin: 3px 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}
.download-dropdown .dropdown-item:hover{background:#000;color:#fff}
.dropdown-version-label{font-size:.82rem;font-weight:600;color:#666;margin:-.2rem 0 .5rem .35rem}


.btn_version{
    position: relative;
    top: 15px;
    color: #111;
    cursor: pointer;
    text-decoration: none !important;
    user-select: none !important;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    border-bottom: 1px solid transparent;
}
.btn_version:hover{
    border-bottom: 1px solid #111 !important;
}
.input-error {
    color: #b91c1c;
    font-size: 0.85rem;
    margin-top: 4px;         
}
.form-control:focus{
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 0 .25rem #8a5cf692 !important;
}

.link_box{
    color: #111;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}
.link_box:hover{
    color:#8B5CF6;
}

.link_title{
    color: #111;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    padding-bottom: 3px;
}
.link_title:hover{
    color:#8B5CF6;
}

.font-page {
    margin: 20px auto 80px !important;
    padding: 0 !important;
}