html_body = '''<!doctype html>
<head>
  <meta charset="utf-8">

  
  <title>This Japanese Word Does Not Exist</title>
  
    <style type="text/css">

    body %%
        background: #08082d;
        color: #fff;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        letter-spacing: .021em;
        font-display: swap
    &&

    body.urban %%
        background: #8b0000;
        color: #fff
    &&

    a,
    a:visited %%
        color: #51b8b8;
        text-decoration: none
    &&

    a:hover %%
        color: #ff69b4
    &&

    body.urban a,
    body.urban a:visited %%
        color: #ffa07a
    &&

    body.urban a:hover %%
        color: #a9a9a9
    &&

    a.disabled,
    a.disabled:hover,
    a.disabled:visited %%
        pointer-events: none;
        color: hsla(0, 0%, 100%, .5)
    &&

    #link-button %%
        padding-bottom: 0
    &&

    .site-wrapper %%
        width: 550px;
        margin: auto;
        padding: 10px
    &&

    .intro:after %%
        content: "";
        clear: both;
        display: table
    &&

    .intro-left %%
        float: left
    &&

    .intro-right %%
        float: right
    &&

    .intro-tweet-button %%
        width: 60px
    &&

    a.darken %%
        display: inline-block;
        padding: 0
    &&

    a.darken img %%
        display: block
    &&

    a.darken:hover img %%
        opacity: .7
    &&

    .definition-zone,
    .write-your-own %%
        margin: 20vh auto 50px;
        height: 50vh;
        color: #fff
    &&

    .grecaptcha-badge %%
        z-index: 100000000000000000
    &&

    .hint-text,
    .word-loading,
    .word-text %%
        font-size: small;
        color: hsla(0, 0%, 100%, .5);
        height: 30px;
        line-height: 30px
    &&

    .loading-spinner-out %%
        margin-left: -29px;
        animation: spin-back 1.5s linear infinite
    &&

    .loading-spinner-in %%
        margin-bottom: 5px;
        animation: spin-forward 1.5s linear infinite
    &&

    @keyframes spin-forward %%
        0% %%
            transform: rotate(0deg)
        &&
        to %%
            transform: rotate(1turn)
        &&
    &&

    @keyframes spin-back %%
        0% %%
            transform: rotate(1turn)
        &&
        to %%
            transform: rotate(0deg)
        &&
    &&

    .word-entry %%
        border: 0;
        color: #51b8b8;
        background-color: hsla(0, 0%, 100%, 0);
        resize: none;
        width: 100%;
        font-size: 4em;
        outline: none;
        padding: 0;
        margin: 0
    &&

    body.urban .word-entry %%
        color: #ffa07a
    &&

    .definition-zone ol %%
        padding-inline-start: 20px
    &&

    .definition-zone ol li %%
        margin-bottom: 20px;
        color: hsla(0, 0%, 100%, .5)
    &&

    .definition-section %%
        margin-left: 5px;
        color: #fff
    &&

    .definition-zone .syllables %%
        font-weight: 700;
        margin-bottom: .15em;
        margin-left: .1em
    &&

    .syllable-separator %%
        margin-left: .5em;
        margin-right: .5em
    &&

    .definition-zone .word %%
        font-weight: 700;
        font-size: 4em;
        margin-bottom: .15em
    &&

    .definition-zone .pos %%
        font-size: small;
        color: hsla(0, 0%, 100%, .5);
        margin-left: .1em
    &&

    .example %%
        margin-top: .25em;
        font-style: italic;
        color: hsla(0, 0%, 100%, .5)
    &&

    .attribution %%
        font-size: small;
        width: 100%;
        position: fixed;
        bottom: 22px;
        background: #08082d
    &&

    body.urban .attribution %%
        background: #8b0000
    &&

    .attribution-section %%
        margin-bottom: .2em
    &&

    .disclaimer %%
        font-size: x-small;
        color: hsla(0, 0%, 100%, .5);
        font-style: italic;
        margin-top: 4px
    &&

    @media only screen and (orientation:portrait) and (max-width:600px) %%
        .site-wrapper %%
            width: 95%
        &&
        .definition-zone .word,
        .word-entry %%
            font-size: 2.5em
        &&
        .definition-zone,
        .write-your-own %%
            margin-top: 10vh
        &&
    &&

    @media screen and (max-height:600px) %%
        .definition-zone,
        .write-your-own %%
            height: auto
        &&
        .attribution %%
            width: 100%;
            position: static
        &&
    &&

    #snackbar %%
        visibility: hidden;
        min-width: 250px;
        margin-left: -125px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        padding-top: 16px;
        padding-bottom: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px
    &&

    #snackbar.show %%
        visibility: visible;
        -webkit-animation: fadein .5s, fadeout .5s 2.5s;
        animation: fadein .5s, fadeout .5s 2.5s
    &&

    @-webkit-keyframes fadein %%
        0% %%
            bottom: 0;
            opacity: 0
        &&
        to %%
            bottom: 30px;
            opacity: 1
        &&
    &&

    @keyframes fadein %%
        0% %%
            bottom: 0;
            opacity: 0
        &&
        to %%
            bottom: 30px;
            opacity: 1
        &&
    &&

    @-webkit-keyframes fadeout %%
        0% %%
            bottom: 30px;
            opacity: 1
        &&
        to %%
            bottom: 0;
            opacity: 0
        &&
    &&

    @keyframes fadeout %%
        0% %%
            bottom: 30px;
            opacity: 1
        &&
        to %%
            bottom: 0;
            opacity: 0
        &&
    &&

    </style>


</head>

<body class="">
    <div class="site-wrapper">
        <div class="intro">
            <div class="intro-left">
            </div>


        </div>
        <div id="definition-zone" class="definition-zone">
            <div class="inner">

                <div id="definition-word" class="word">{}</div> 


                <div id="definition-syllables" class="syllables">
                    
                        {}
                    
                </div>

                <ol>
                    <li>
                        <div class="definition-section">
                            {}
                        </div>
                    </li>


                    <li>
                        <div class="definition-section">
                            <span id="definition-word-no-exist" >
                                
                                マシーンラーニングで創成されていて、実在しない単語。
                            </span>


                            
                            
        </div>


        <div class="attribution">
            
            <div class="attribution-section">
                This is the parody of the <a href="https://www.thisworddoesnotexist.com/"> ThisWordDoesNotExist</a>
            </div>
            <div class="attribution-section disclaimer">
                Words are not reviewed and may reflect bias in the training set.
            </div>
        </div>




        <div id="snackbar" style="display: none;"><div>
    </div>
</body>

</html>'''