.fontypo-single-font{

    padding-top:180px;
    padding-bottom:120px;

}

.fontypo-single-header{

    display:flex;
    justify-content:space-between;
    gap:40px;
    margin-bottom:80px;

}

.fontypo-single-info{

    max-width:800px;

}

.fontypo-single-badge{

    display:inline-flex;
    padding:12px 18px;
    border-radius:999px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--fontypo-border);
    margin-bottom:30px;
    color:var(--fontypo-primary);
    font-weight:700;

}

.fontypo-single-info h1{

    font-size:82px;
    line-height:1;
    margin-bottom:30px;

}

.fontypo-single-info p{

    font-size:22px;
    line-height:1.8;
    color:var(--fontypo-muted);

}

.fontypo-preview-wrapper{

    background:var(--fontypo-card);
    border:1px solid var(--fontypo-border);
    border-radius:32px;
    padding:40px;
    margin-bottom:60px;

}

.fontypo-preview-controls{

    display:flex;
    gap:30px;
    margin-bottom:40px;

}

.fontypo-preview-field{

    flex:1;

}

.fontypo-preview-field label{

    display:block;
    margin-bottom:14px;
    font-weight:700;

}

.fontypo-preview-field input[type=\"text\"]{

    width:100%;
    height:60px;
    border:none;
    border-radius:16px;
    background:#111111;
    color:#fff;
    padding:0 20px;
    font-size:18px;

}

.fontypo-preview-field input[type=\"range\"]{

    width:100%;

}

.fontypo-live-preview{

    min-height:300px;
    background:#090909;
    border-radius:24px;
    padding:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:72px;
    word-break:break-word;
    overflow-wrap:break-word;

}

.fontypo-font-meta{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-bottom:80px;

}

.fontypo-meta-card{

    background:var(--fontypo-card);
    border:1px solid var(--fontypo-border);
    border-radius:24px;
    padding:30px;

}

.fontypo-meta-card strong{

    display:block;
    margin-bottom:10px;
    color:var(--fontypo-primary);

}

.fontypo-meta-card span{

    color:#fff;
    font-size:18px;

}

.fontypo-single-content{

    max-width:900px;
    font-size:20px;
    line-height:2;
    color:var(--fontypo-muted);

}