@font-face{
    font-family:"App Hentaigana";
    src:url("fonts/NotoSerifHentaigana-Regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

body{
    max-width:900px;
    margin:auto;
    padding:30px;
    font-family:sans-serif;
    -webkit-text-size-adjust:100%;
}

h1{
    text-align:center;
}

textarea{
    width:100%;
    min-height:180px;
    font-size:28px;
    margin-top:20px;
    box-sizing:border-box;
}

#output{
    display:none;
    font-family:"App Hentaigana", "Noto Serif Hentaigana", "HanaMinA", "BabelStone Han", "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size:40px;
    line-height:1.8;
}

#output.hiragana-output{
    font-family:sans-serif;
}

.output-preview{
    min-height:180px;
    margin-top:20px;
    padding:18px 20px;
    border:1px solid #bbb;
    border-radius:10px;
    background:#fff;
    font-family:"App Hentaigana", "Noto Serif Hentaigana", "HanaMinA", "BabelStone Han", "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size:40px;
    line-height:1.8;
    white-space:pre-wrap;
    word-break:break-word;
    overflow-wrap:anywhere;
}

.output-preview.hiragana-output{
    font-family:sans-serif;
}

.buttons{
    margin-top:20px;
    text-align:center;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

button{
    font-size:20px;
    padding:10px 20px;
}

button.active{
    background:#222;
    color:#fff;
}

#status{
    min-height:1.5em;
    margin-top:16px;
    text-align:center;
    color:#333;
}

@media (max-width:640px){
    body{
        padding:16px;
    }

    h1{
        font-size:28px;
    }

    textarea{
        min-height:140px;
        font-size:20px;
    }

    .output-preview,
    #output{
        min-height:140px;
        font-size:30px;
    }

    .buttons{
        justify-content:stretch;
    }

    button{
        flex:1 1 calc(50% - 12px);
        min-width:120px;
        font-size:18px;
        padding:12px 14px;
    }
}