:root {
    --color-bg: #F6F1E9;
    --color-surface: #FFFFFF;
    --color-text: #3E2723;
    --color-muted: #795548;
    --color-accent: #FC3;
    --color-border: rgba(121, 85, 72, 0.25);
    --color-shadow: rgba(62, 39, 35, 0.05);
    --color-toggle-active-bg: rgba(121, 85, 72, 0.12);
}

[data-theme="dark"] {
    --color-bg: #262626;
    --color-surface: #1B1B19;
    --color-text: #FAF9F5;
    --color-muted: #C2C0B6;
    --color-accent: #FFC107;
    --color-border: rgba(194, 192, 182, 0.25);
    --color-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.50);
    --color-toggle-active-bg: rgba(194, 192, 182, 0.12);
}

::selection {
    background: rgba(255, 204, 51, 0.25);
    /* 0.5 = 50% opacity, adjust as needed */
    color: var(--color-text);
}

::-moz-selection {
    background: rgba(255, 204, 51, 0.25);
    color: var(--color-text);
}

/* Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
}

body {
    background: var(--color-bg);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABjySURBVHgBnV2LruvGDRy6aArUq///0hRoUiCFg7MOPZoZrrPAuZb2QQ7JIVe2ZV3gs9XP3/p55THVn+YU9Tu5FeR2mV3eZdZUWNvPHZbrEDfgbXHyTrAu0b/lLIFNyYCYeyHHVzq6A1D9ySjl7BJrFz4Nd7p5jnOW61sBz573hA7qA3eHKl0LPkguKZS9yh4lR8ncxw9ac5n5H00ZpgJkWSTkTU5xQYbQ+xBrFf7eeub07LhwJ1QZ/CXwAz6Aqs9lpiOQSySWw7KV/ER6eeJKxz6fmAt45iWnq0xj4HsOMGcgY1NyeZ5zmjvmVocY1FyVCIq4LmEmQpWRG0Erw6dyPLES4fgkACdz2A4YO/o4VztHNuWv3X/Bk57nwvQ7m1QFVCTsshyOd4w4U53DJ3BllKeAAGeBZELt1+cga89TZRPBDtcH3P2g+qYKWZiJVc0+hUeRqsuHmCcJrRzr2K9Y5MA4h6jqoa5wWZYiY9Kt1p04jJ19wW8tkxxHKGVrsqv7qYJ+BF0Km+x4hEVO8WnwWd8eu4a5ajuxBhEGXuca4wHuyaCwJX0KL+Df0gH34PW+RALnt+n4Q8FubPCJA0EAHmbNLt1oxlxijWOvKp3s6CK5jiAguQUfNGVHx3AZDErvZeQ7+9j+VJllgKHt/bgGgFDG4E5aB5AyZztCXTTBGJP2RCYDcHd0CYwFva2d2OnscrK7buBs++r9T2h7gDn4toKx8U8Cdxr4LtQxD032hfv+X2ZOMmDaYoCcVUAO/sk852z2xzQGnJEUAiPLnUj4bqmMAJ6lZUAkVu/WK0O62OTgr0EWz1GvKTsW9N5cYd5ETkBXmIVMUpbrttQt8wp4nb3vDh7sC5VinpOUucCpLHgMcivo6OepqSA/gh4XuDqcn0ipguUuwvsrt4m8ar4++QHAV8HO8F2iMQBQRqk1CPqUnuRctkuN1YDLVSSex2uA86A7HxVyFYaQqSqNW/N+TeWJgXcD+YIklWKW0eeoj5YB7zQ2TG0hUzao7FL2M74y853PnO6O/Qq4eqI5Uk9Eg1mD/ZrY6QABOtCFbDgzNe1rDFphYp3pyyJFZmC2ue+tfT5wtwvwGJ1dykcOV7I/xSJhjU5yQBwYVRIdOAdKtTrAAWgbWK7Kal7r5rJ8F8AVcLFdJ2SeLnS3z9N3EMp3BfjyqwxOe1IKUh2ucY3xSEMwY3y1aatS+NLNGK5vIurGeErmyY+F+zWZw9J1jyVNMXTKOrUXJyc7h4LB4p5dDu+kbx+7D6t4PuPhC2XG8oQOIIxsRyilQzWuPIW5ChdUBzyrU9btvtOLMidzDf3OkSdOAu5kAs4I1Y/d28YlXr/Ro2QwBpi+yVejTA6SUpSUuD6lPFUGdsKCJwOGcyefnVBhfNrWAF2dFBHcFT+MvYwbAhdI92l1/FjvnMsAJidMjtst3WiRiKSI4wjA81ObZDmbL4Gzr01fbqkAnr7d27qV79xaIFSAlDFJCACbTe4tWQq2yx4lJ5VpFxSeA9L1HObu873/93sFUgLsPveBWPJDNZ1O/kRg9rk0ULEMZGhitVPY+0Fr3R09T5KlSuf1hR5XLvv4MlhchWIdijgwuBR2RY6OS5EMpv+EXO8WB6ENdKyetgEglyNnTKoMbAPLBO5X+uoTuHQPhNPDvmK9ilAOO6B9rxJOYelrFLmXsOsDmAt+IkVXtL/XT9UBuDsC8NsL41hCL5BtAM6zQmEENKm5iiSyotnHulQCJVwrYGOd6SaVtwxXWk5B9PWpGoAc0W8EUfMc6foY63Dv6VOJ3+R9jT8J3ySr43AkwgG+6U4oCNwdD+CroIpbxwzH4IVcelw5TF/p7tbvBDqpPI4gzmmOrL3/gq8oC3M1cfY5PCpJXACdbsamsKv1bt4DAsBjEPoYFLATXo332wv6djDgTiSFURmZ5veMdnIUfkU8NBlOzjrwAZBJ3FsJbBBzHXkU0W7CnfF9njp2fS5DuoPU9qMqy6nxzpHqog9tTDntXSLhncq4V8CRZDjcBe0nhPnXgR70OVt43/9gFCpiqMYGV+if+lLJS5mcnOVsU7am4PXXTrLT4LuKpPor4OzzrmC7xOSYwQFxP5DgNrH95OdNKvAp+CxXVZYS5wqzC4zCB8yExIADgCUj63bJkH4v2fH2sfcaVYJ7fwoEK1FGJvBTaUuBXEYuz5uCxfj7sdseeqal4LHcZfAiyHDJcnLMMm/9j59O9REofvp/pfN/U181GaDXDurXn789/jr+D8l5tT/avL3mD8Kw1+/Xvra/PmktB4tva+P2B+kvGoMYY7v7+a/tj+ei9XUf9rlbX/d3P+7ry8gE2zDdk7aP0z6lxibmp6rimK+ycSE/LUSt72t2Nk9bgMKY8PI5oH2SsvU69EPXwRe8QPafNEIZNZUiZ/Sek75DVw4p6ge84a6sqmAyYdw6GLtYtsNbAYNb6/zBCTQ9R8FtrSpJbgC4/2Tf7goS27oMwGdUklvwgVd6mZDp0SnO5uSX037Ak8xVC/UHIctd4Ckdar0NyElF6GPAfIEzMVmtcZmhnKI+XnbGOwIogik7FHmVDSxXyXE4U/Vj2Xy+BrmlQEzOScAL2ZjEZOfU7QD+JTHr7TKYJOlqfglbAE9Sxg14ovS57m10DVhOfM7+V7+7hJCzGAQDcJ8qnTyZQxHCVYfJ2DIGuaBVGIPBp/pPSVA4+16jDHbX5343qeTsOY74vOb96jKIgUMAxuAALvfqJ2eAdnIKAs87eQ4Ar9vYAI1bkRzQBKmADYNO1pGSqMtIBALJ5HUfupcQMt3LlrIV8EFUT7gC7mVeGYBD/VMWgrAlR7qtwQUhJYvyKzATFiTnEc6dTKd/sbFdmbt/bfq6lx3Sv/ZNwF3wugGAZ7lzPPBJPl63zPwJY5FsCDmphCus6hxmHdvhCOPIvGMslWHoY8dNjlXGA3ej3LjKwD4vlXNHLhdMFwSEc+cHJTMFfcETTNnNmHrSOb18v+WR0KncAZ6VJYxk2YDOlCX0qU8uU2Vx5VHJT4EENJGA2Q8nW9YSx+yP+kI+oCvBzYaCLxksBGKek7HXvgL2FEY6UI65W5YjCOCDy7YCviSD5mOwUelVcsrIUL8tcBUt2VRCH1cCCP03oc6pLFxlJwM6/QkVhvEtSz0GJQV1CuDCTCI1n3VZ57Z+55N+/aB+tTyRC7jbiiDzVuWUo5QwQDvf9XFg2UlsjCrH3Tk8xwWt4B3pMkXNSZmMYD/gM92Rh4kBIeebuOyWgr+CPNu2Icox27BkJDA7VwWBnQ6zXn17lqoZoB2zhrlAroCMdcE/aaTrcSQ4CZgKsrpeuul1hvKxY3uf5/YzDr4jgCt/rB/wpDolAOOc+ty6RNplbFZ2OJIyeVzj6gjM29RtUhkjWIEL1hqUnZRwCHmTvhR4Nb9j4T51b2SSrW4vd/v9CV7lh0vMAbyvupzJx9KQztoTgtRgMJCNncpewRNQOZsNBbTxKTtqmOdu1lB6nE2MBdBEVY/SBbLP9lqb+XtsKh0u4ED+cQXgb9R0snEoCzh3PIRciDEgB4GJnp7Ho3SuoJ/H+ivrSj+td4nEx31cOtBVBcCzzjnA/faNjUjkULKUjK53co5rzpH8aZyS73QqQgOfflbEdgmZfORsPPKBElzI7ErGufIM3B3FDi5oZ/a+C9mx3YHJeGWXs8U50vkNmEl1Cazqt5ML2qaJ6Iyn9380FQAV4MkhqYIAnrldnvvu38lIdiTynQQXZj0MHmWfO+8J8mr9go+xcPl3W0HHpGTd5rpAALMTXekDMhvT5wnf/P4Q4tVdLHVbOj4XXBVoiDWM0dk9nTMx3BwVI8CTsJOM7ZfBTfsZA0r34LmbEwGd4Q5w1+cMBc2f7px1QYSYr2xOBI3ZFmQr3KfyO7ZEoNvW8Xf2M54DeOYqw7/R6xzl3oZNWKvpd7KB7EBHHtaX7E1ETH6ZtpZ0LQWlrww4979z9A9K1PVC2kM5OM7wMrpBhqqLp+SkST/EGph1qZpw4AH9E3mFt8tA0FVNTjUd7C+OkySwMw7wwSgyxLEZAgiMnmVA89wp+4v0XkYO2+/6FPYi+a5qcXIA81bkfMNBZWxOVhFOQPhBscMB2X1PYSCvV0DUOIyeydAU1BNsDlMZWewnlcHT1+CKcEpnP3YkroN1zv4Fag/k0tcvQljgLsmgeVOQkzPSbc3OaDQMLjNUEPtxt4HXONmOYMpXytbkj17FMMhxdsWkcc50pa8LWwJk4Q5aKS5jBJ+zMe4TStaVCJ0e2ujkOYe67/p53Rrkujt809taJef0/N1WEMoOcUJVZTi5zRuDfP5z+lQp5jUqc+tgnQp+2pL2OKCD7/Sl9WXs6XLUW2uYuX3cKnTHDFyNuwqAIF/pT46enPs6Vk8dBTLpXRb3dx7sC26JOOwHriBAriRMQBjZU7V9N7dPJWE1rEuAlHH72F1Aucw5wakwuXv2J3vdR7XO0erjW+U/xvLNB2FqfCLoe75zMh875UqJK8fKARDy3DeIF7xRBY2VX0/I4Y7dD0WAuy2M7UQPgj5nqyLC9rN78stHU2XWKXm1k9uTVIYAmbEKRyqfzg4Mr0XzFSEA79zdr/6H1SmgwGwP+276rX8NOsbmBLDTpqxXspxcN6ZuIAHupVKRip3ex9TXxkqHIwCQA6B0OrxTcJVNiiRK1ynGDzmvf54BZBKigKC9uufvQ8jef+6tEGfG7ndfzCgS85hyHoQc59A+bx3K5qAqvyni40CnOmd5XdYF+DJ0qtQx0MlwctLVtQuCqkrdoembSleJ0I5TIiib+NjhZv2X0aH8mPQ4okU7p9LHjYU9kYMD6IC6Tw1PAs1z1sGc/er+XwDWD2Dca2EwcnMXtdsP6u2ys98l4IQLZlwOuk/JQMpTFqWnV/b5jy/WKkcrRzxJNstRV/PfPsWM2w6mqkqsU+Huc5fAzfPdZ/wwx06PHVSMm85PZCidyqkcLCBXCf5jOS47OmHYWa/Wy/PJzRrVsMqSi5yZp7acVsypmt0GIYxIBnEpd4AVUHX3ipv7aulR9ik7ITAB2snA3W4gkxXQpHDETtX1m4Ti/u4LwJPs5q+JNWWUp59rVzjeOi8CBHgiuazY5dA5BnTuKpjSBdyJqeaoNpFF6Qadu+sVtXbh7n9Okpvd/2iLX53/xV+B+P3n79WeP8d/tNfX/N9+zp8/x7/gr2frvsb/9dMPIevV/vlz/Avp5Of7rp+5v7S/LeN/P2O/0ViRrlfbRPlnm9f17TVdftHYbz94GEfHq+R0Wav56ilk7Nb9DcL7O639HTpmPaF/I93vlvbZVzv5WldlrdoenByVuYq5KrPUWMFfXbvs5GrSsTOuk59zp59nn1STVKGU/3kNVwSee7EyHCrrCoC/HPeEKDMHctwxzHxuzlFuD+S1ff7JxVxfW9DkfbXpzuTdl77GVTYB93sv0vrkU2sYMAdNAVBOZLkQ8txzAGGwYJANZMcrmQ6z0wn4fZcx7GNXYdw1mLuuUXpdVV5GZwFzGXMOcRdtJ2+VcGBECigO5zjcyjH1pR4lV2UiXzT39++AJ2YNulkv4C8Yle3vGCqQSiDMcQUD1NxkBFeSREx3W9hUfcroV44CdFCdPmV3ur8BoW9KwmXWQcgdK/LJXawqKLtNbJvKbx3oYbK4+Qk7wtqFnI3JVhc4tb2xXPX7AMbr/KGOEWxQ1eljwuSY9PWlAjw5OL3PZYOmjFDzAV0lHEGUk1huIlUip/pp+1QZAG0vjC1oeFwF7ZivvgCYg8QA+aYIQLNvv/Ln16C56sELHbxjsmoVXlN1+vZ7CBVcNDsvZPLhQMca5nJ80h3PMk77xN1ypYCfHLMMN+bmuEBPzpnkXsg2J7sWclVzwWYsyc4V8DpSArkCKT/cFKbbuPc8wDtDKVbOgdEBWjORYJlXJV8FXTmk9003p1TA9Pp7BuyOYDwO/OVntWU4GQj40Oe6fUkZ5JwAMeZYCTHf7WGJ7ZPxGOYqwnZ/nPgFOKuEp/imatLnJZ8C2V/9XDKPQToDeL8E7s5SPxlLDu86nT7nOMadqocjh7t/0Dm7Bh0TSZWOiWzqsbksy1UuxmYBOUPUOBvgAqQuKLkcA7OjnL7e3Acubt6JnVPZT3hZF4IM5QtFpoQ1+fRjbcEH71sGT9sHg+9OcfcEOn2pDLo/h/tEH5B9MpFDzYV5Zb8B3k6FUVVTG8ftSH6L5vawb0qOY+zWh9Z3DXoBH2jFbsBvSzAyIcZhbFD9gHd0IQe761K+SP6FwOrW8Zw//3FP+FzQpGCFPB/IpSsF2p0nYyZHu+cRAToAyfnpd3wwdio9e+7Jdc1JQsDo4z/gM04fi/mYF7uPNKe3S+pRLimonXjKGBc0ZdMOGjt4nzvyn9x+pmR03e616wKyPaxTEQlCL/tP+VMuBClmxzhnpsxJZbOMbnYCoLMD8KRIDu5t+uTMZSOCTNfY7onULlkmfey/cmud8GUAqPIE6KC6UvZq6bZxJQfQwQfh6OfuLd103O1R2ejGAB8c5xPno/XFGgSczq973odzAW/YLuWO/VMGWQDwT/JQWJyuPr6Dr2xSx6qlQDpyso0Fn2Aq0Xi9WuOwqRLPNiqS3AaTQ6YMTFnxag/MGeycUwdYuEI54ii8ZWxBwAWxXj0PIFUSh3ENmNQrY0nxen9Ad7JACYcBzmxW81VTGAo5oAln70sBYJ1KVhlcCi/gfZIydCGTzJ2nCq58wfbZktXbgmffVnwF41xzBqXMwyA3ZY3TpQK29XAWswz3cXgFO9K7EnXuSO3I17G7B34WDgEAOgBdCZB/5aMaA0rbA5ADpWS6c4Vvz3EfRqVgKueXwa4wperjxp0t07gjtFzM564CKHK4KuAcmcopghwXKKcvZfLr9Qrj3NflpecgOL1JftcxPWhL+VnJZl/1i+SjrPmmnJ8GAPCBTPO4r/8BfqtQGZNu2nR4EuFwMN/5F8g28Lz0a+TuGx7rdr8nO+C8100kUGsTORY0CZQulaEuEJvlZTB2ObyP842aU/VxNrBeFwxAkwhGTsfsYgdof/bxxz7Yg/1hDzACAW+EK7HsrNO5itGOYOtgfgpCdyxfz1SwUT070G17zpenTcnm/gprlZ/+bCefh/d2khWsuJ8D8wMTgJmA7qfpyrlq+4HQXcM8Z98SuAvZV8C8TSn/MCYM2MtgK8BnoFKAAdgE4oTBy+g8McY5dbLvNPhT0CafOMyKqMBcEQs+Xm5OsZ5UrhxwLoHOOOcQpysFANDE6cao6lJGPwi/IzrrL8z/fZ0KorI/EckRc7IHB3M+4qOE1wA4/VYAxgl8QaZKJpCD76pHhf4p41K/y06ls8tZZswFFQFDHwPOgrqGeR96mLU7WOr9p/rRhmrqfjx3BY9gjOsrws12lJhTQTYMloRh4SxDYcaVrhNcDpMip0uaj+svxVR186JiKAyY9NfnuqayaAps+kbxm6t0N8/ZqjJNBVoRB8iYFMEZA+NdAUuf+37rW8Go3o/Qx8YBumStQYcLJuvrhqrM6lj4plNVOVQV4cB+Q4TkA5WhDlPSX+K1MJPkRtp+ciGXUiVUlXqWy6AVcDbavTV1Dnfj6j19qgBuriqlN2cKmxLmE0wguTDzJ3xdxkeCqYCljxh3S/fMTQYAd8PVE0JOruZ5jMugK4uMV+EvsX73Ad7pbOOkdxpT/W7LS2SQ8eGOxEwIZX3NE57FKQP2+IlRjnAw46cOYXmqDMOsTaSYqqeTzX2v5n6eD3ifqm3oY60TosbRhLkSnOakwKVqAsxBB7QtU/ayfe4tLgxW61iBL2FDw/XE37dX+cvNfSusATC37hzlSO53jpoclwg0BdVtI1NwAe98mPGFnM2J7KkCKd+sMCeRxum8BS79fk211D8RYdLV+93/vTPNV6RDwAYEZyE71dnqng4C6CA64gEzcRinwv0xP5WzpBBmHoxityWk0u/ks1NZFwRORbiJpICvIGpM2XpiCwbZMLLVOm4lbPvApAxwCzpree30mfpUzlkW4Mk5bTvA3UGKaLu5m0J4HMjVJ2W1IisH7Rpkl/lLW9DC8CAqZhagyxnC+U0ofMCU4Qhr+7ibB4FvkuXWpiCq45OAqT63ZSRfdl1uvTpX/r8RhrNgevgDGwd8OkiRxDEVgwHO4ekpY6lP6WPd3/w/BSvIdkFMRAC0f7u9aovoN7Wqz3KUfhssBcA5lhtXk5F9Tb5y9jrAxvggbDqRcx3oWEJmsgW4kxi0foUxlsu27eCrT3LR5KnvRKSi6b0wQr8yUjmDDQF00B2bF3zAAU8iNJmAzl6H1+FzRFH3JC7cP57+1kcuEQv+95D2YjYFmBXAgON16YMM7uNx9ZFwMnjBZ5cyHMgE305MW4uSBYNF2e1sOHnOMq8/qWwLnlDvkxQg9UuWk8wB/JVtuqkk3YE8PXHTGVsGR4X1JdYDd/v5FeYc8KQrcQzCyDGZbO1YAVH+lXAW5L5LZ5DMyjLGqTH3LaRrznlOh8oKNfebsfS5vNOb5LqqthvrPKkW27cK45/H/wd7/xgBcLN/HQAAAABJRU5ErkJggg==);
    background-repeat: repeat;
    background-size: auto;
}

strong {
    font-weight: 700 !important;
}

i {
    font-style: italic !important;
}

nav {
    width: 100%;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1320px;
    margin: auto;
}

.nav-buttons {
    display: flex;
    align-items: center;
}

.nav-buttons a {
    color: var(--color-muted);
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    gap: 8px;
}

.nav-buttons a:hover {
    background-color: var(--color-toggle-active-bg);
}

.nav-buttons a.active,
.footer-buttons a.active {
    color: var(--color-text);
    font-weight: 700;
}

.togglers {
    display: flex;
    padding: 4px;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    /* transition: all .2s cubic-bezier(.49, 1.42, .25, 1.53); */
}

/* .togglers:hover {
    border: 2px solid var(--color-border);
} */

.togglers button {
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    width: 28px;
    height: 28px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
}

.togglers button.active {
    background: var(--color-toggle-active-bg);
}

main {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 96px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 60px;
    height: 100%;
    min-height: calc(100vh - 182px);
}

.word-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.title-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    max-width: 660px;
    width: 100%;
    margin: auto;
}

.title-group h1 {
    color: var(--color-text);
    text-align: center;
    font-family: Spectral;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
}

.title-group p {
    color: var(--color-muted);
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    line-height: 150%;
}

.title-group a {
    color: var(--color-muted);
    text-decoration: underline;
}

.title-group a:hover {
    text-decoration: none;
}

.title-group.left {
    align-items: flex-start;
}

.title-group.left h1,
.title-group.left p {
    text-align: left;
}

.word-cards {
    display: flex;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.word-card {
    display: flex;
    padding: 60px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0px 4px 12px 0px var(--color-shadow);
    transition: transform .2s cubic-bezier(.49, 1.42, .25, 1.53);
    position: relative;
    cursor: pointer;
}

.word-label {
    color: var(--color-muted);
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.word {
    color: var(--color-text);
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.word-cards-sm {
    display: flex;
    align-items: center;
    align-content: center;
    gap: 24px;
    align-self: stretch;
    flex-wrap: wrap;
}

.word-card-sm {
    display: flex;
    width: calc(33% - 16px);
    padding: 30px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: transform .2s cubic-bezier(.49, 1.42, .25, 1.53);
}

.speak-button {
    position: absolute;
    right: 24px;
    top: 24px;
    border: none;
    cursor: pointer;
    background: none;
    padding: 0;
    transition: all .2s cubic-bezier(.49, 1.42, .25, 1.53);
}

.arrow-icon {
    width: 24px;
    height: 24px;
}

.button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

#nextButton {
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 999px;
    background: var(--color-accent);
    color: #3E2723;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: fit-content;
    margin: auto;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 0 0 var(--color-accent);
    transition: all .2s cubic-bezier(.49, 1.42, .25, 1.53);
}

small {
    color: var(--color-muted);
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

footer {
    width: 100%;
    padding: 36px 20px;
    border-top: 1px solid var(--color-border);
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1320px;
    margin: auto;
}

.footer-buttons {
    display: flex;
    align-items: center;
    gap: 24px;
}

.footer-buttons p,
.footer-buttons a {
    color: var(--color-muted);
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}

.footer-buttons a:hover {
    text-decoration: underline;
}

@keyframes wobble-shake {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    15% {
        transform: translateX(-6px) rotate(-4deg);
    }

    30% {
        transform: translateX(5px) rotate(3deg);
    }

    45% {
        transform: translateX(-4px) rotate(-2deg);
    }

    60% {
        transform: translateX(3px) rotate(2deg);
    }

    75% {
        transform: translateX(-2px) rotate(-1deg);
    }

    100% {
        transform: translateX(0) rotate(0deg);
    }
}

.word-card.wobble {
    animation: wobble-shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

@media (max-width: 960px) {
    .word-card-sm {
        width: calc(50% - 12px);
    }

    .word-cards,
    .footer-container,
    .footer-buttons {
        flex-direction: column;
    }

    .footer-container {
        gap: 24px;
    }

    .footer-buttons {
        gap: 8px;
    }

    .footer-buttons p:nth-of-type(2) {
        display: none;
    }

    .word-card {
        width: 100%;
    }

    .arrow-icon {
        transform: rotate(90deg);
    }

    .button-group {
        position: fixed;
        left: 50%;
        bottom: 24px;
        transform: translateX(-50%);
        width: 100%;
    }

    .button-group p {
        display: none;
    }

    .index-footer {
        padding-bottom: calc(36px + 46px + 12px);
    }
}

@media (max-width: 600px) {
    .nav-buttons {
        gap: 16px;
    }

    .nav-buttons a {
        padding: 0;
    }

    main {
        padding: 72px 20px;
    }

    .title-group h1 {
        font-size: 48px;
    }

    .word-container {
        gap: 48px;
    }

    .word-card {
        padding: 30px;
    }

    .speak-button {
        right: 16px;
        top: 16px;
    }

    .speak-button img {
        width: 24px;
    }

    .word-card-sm {
        width: 100%;
        gap: 16px;
        padding: 16px;
    }
}