/* =====================
   ROOTSNODE V16 STYLE
===================== */


*{
    box-sizing:border-box;
}



body{

    margin:0;

    padding:30px;

    background:#f2f5f9;

    color:#1f2937;

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

}



#result{

    max-width:1000px;

    margin:30px auto;

    background:white;

    padding:35px;

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}





/* =====================
   TREE
===================== */


.tree{

    text-align:center;

}



.word{

    font-size:42px;

    font-weight:800;

    letter-spacing:1px;

    margin-bottom:15px;

    color:#111827;

}



.line{

    font-size:35px;

    color:#9ca3af;

    height:50px;

}





.branches{

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:25px;

    flex-wrap:wrap;

}





.branch{

    min-width:150px;

    padding:22px;

    background:
    linear-gradient(
        145deg,
        #ffffff,
        #f8fafc
    );


    border-radius:18px;


    border:1px solid #e5e7eb;


    box-shadow:
    0 5px 15px rgba(0,0,0,.06);


    transition:.25s;

}



.branch:hover{

    transform:
    translateY(-8px);


    box-shadow:
    0 15px 30px rgba(0,0,0,.12);

}



.part{

    font-size:28px;

    font-weight:800;

    color:#2563eb;

}



.meaning{

    margin-top:12px;

    font-size:17px;

    color:#4b5563;

}





/* =====================
   MEANING
===================== */


h3{

    color:#111827;

    font-size:22px;

}



#result p{

    font-size:20px;

    line-height:1.7;

}



hr{

    margin:35px 0;

    border:0;

    border-top:1px solid #e5e7eb;

}





/* =====================
   SEARCH
===================== */


#search{

    display:block;

    width:70%;

    max-width:600px;

    margin:0 auto;

    padding:15px 20px;

    font-size:20px;


    border-radius:14px;

    border:1px solid #d1d5db;


    outline:none;

}



#search:focus{

    border-color:#2563eb;

    box-shadow:
    0 0 0 4px rgba(37,99,235,.15);

}



button{

    display:block;

    margin:15px auto;

    padding:14px 35px;

    font-size:18px;

    font-weight:600;


    border:0;

    border-radius:14px;


    background:#2563eb;

    color:white;


    cursor:pointer;

}



button:hover{

    background:#1d4ed8;

}





/* =====================
   MOBILE
===================== */


@media(max-width:700px){


body{

    padding:15px;

}



#result{

    padding:20px;

}



.word{

    font-size:32px;

}



.branches{

    flex-direction:column;

    align-items:center;

}



.branch{

    width:90%;

}



#search{

    width:100%;

}


}

header{

    text-align:center;

    max-width:1000px;

    margin:0 auto 30px auto;

}


header h1{

    text-align:center;

    margin:0;

}