body {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin: 0;
                width: 100vw;
                background: #121213;
                font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
                color: #d7dadc;
                overflow: auto;
            }

            button {
                cursor: pointer;
                outline: none;
                border: unset;
            }

            .slider {
                width: 32px;
                min-width: 32px;
                height: 20px;
                position: relative;
                border-radius: 50px;
                background: #565758;
                cursor: pointer;
            }

            .slider.on {
                background: #538d4e;
            }

            .slider::after {
                content: "";
                height: 16px;
                width: 16px;
                position: absolute;
                border-radius: 50px;
                background: white;
                top: 2px;
                transition: left 0.1s ease;
            }

            .slider.on::after {
                left: 14px;
            }

            .slider:not(.on)::after {
                left: 2px;
            }

            .header {
                display: flex;
                justify-content: space-between;
                align-items: end;
                height: 42px;
                padding-bottom: 16px;
                border-bottom: solid 1px #3a3a3c;
                min-width: 330px;
                max-width: 500px;
                width: 65vw;
                margin: 4px auto 16px auto;
                position: relative;
            }

            .header-actions button {
                background: transparent;
                color: #565758;
            }

            .title {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, calc(-50% - 2px));
                display: flex;
                flex-direction: column;
                align-items: center;
                text-transform: uppercase;
                font-weight: bold;
                letter-spacing: 0.2rem;
            }

            .title span:first-child {
                font-size: 36px;
                line-height: 40px;
            }

            .title span:last-child {
                font-size: 10px;
                letter-spacing: 11px;
                line-height: 12px;
            }

            @media (max-width: 360px) {
                .title span:first-child {
                    font-size: 24px;
                }

                .title span:last-child {
                    line-height: unset;
                }
            }

            .words {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .word {
                display: flex;
                margin-top: 5px;
            }

            .letter {
                display: flex;
                justify-content: center;
                align-items: center;
                border: solid 2px #3a3a3c;
                width: 58px;
                height: 58px;
                font-size: 2rem;
                font-weight: bold;
                transform-origin: center;
                user-select: none;
            }

            .letter:not(:last-child) {
                margin-right: 5px;
            }

            .letter.correct {
                background: #538d4e;
                border-color: #538d4e;
            }

            .letter.semi {
                background: #b59f3b;
                border-color: #b59f3b;
            }

            .letter.incorrect {
                background: #3a3a3c;
                border-color: #3a3a3c;
            }

            .word:not(.attempted) .letter:not(:empty) {
                border-color: #565758;
            }

            .game-over .keyboard {
                opacity: 0;
                pointer-events: none;
            }

            .keyboard {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: opacity 0.2s ease-in-out;
            }

            .keyboard-row {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .keyboard-button {
                font-family: inherit;
                text-transform: uppercase;
                font-weight: bold;
                height: 44px;
                min-width: 44px;
                margin: 2px;
                color: #d7dadc;
                background: #717374;
                border-radius: 4px;
                transition: background 0.1s ease-in;
            }

            @media (max-width: 490px) {
                .keyboard-button {
                    height: 52px;
                    min-width: 31px;
                }
            }

            .keyboard-button.correct {
                background: #538d4e !important;
            }

            .keyboard-button.semi {
                background: #b59f3b;
            }

            .keyboard-button.incorrect {
                background: #3a3a3c;
            }

            .keyboard-button.larger {
                padding: 0 18px;
            }

            @media (max-width: 360px) {
                .keyboard-button.larger {
                    padding: 0 6px;
                }
            }

            .end-actions {
                display: grid;
                grid-template-columns: auto auto;
                grid-template-rows: auto auto;
                grid-auto-flow: column;
                grid-column-gap: 32px;
                grid-row-gap: 2px;
                position: absolute;
                top: 16px;
                left: 50%;
                transform: translateX(-50%);
                opacity: 0;
                pointer-events: none;
                text-align: center;
            }

            .game-over .end-actions {
                opacity: 1;
                pointer-events: unset;
                transition: opacity 0.2s ease-in;
            }

            .end-actions > span:first-of-type {
                font-size: 28px;
                font-weight: bold;
            }

            .end-actions > span:last-of-type {
                font-size: 12px;
            }

            button#playagain {
                background: #44dd55;
                border-radius: 6px;
                padding: 12px 24px;
                text-transform: uppercase;
                font-weight: bolder;
                color: white;
                white-space: pre-wrap;
                grid-row: span 2;
            }

            .toast {
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                background: #d7dadc;
                color: black;
                padding: 16px;
                font-weight: bolder;
                border-radius: 4px;
                pointer-events: none;
                z-index: 1000;
                position: fixed;
                top: 15vh;
                left: 50vw;
                animation: toast-birth 0.2s forwards;
                transform-origin: center;
            }

            @keyframes toast-birth {
                0% {
                    transform: translateX(-50%);
                }

                80% {
                    transform: translateX(-50%) scale(1.1);
                }

                100% {
                    transform: translateX(-50%) scale(1);
                }
            }

            .backdrop {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: #000;
                opacity: 0;
                transition: opacity 0.2s ease-in-out;
                pointer-events: none;
                z-index: 2000;
            }

            .backdrop.show {
                pointer-events: unset;
                opacity: 0.75;
            }

            .modal {
                position: fixed;
                top: 40%;
                left: 50%;
                transform: translate(-50%, -50%);
                opacity: 0;
                background: #121213;
                border: solid 1px #444;
                transition: opacity 0.2s ease-in-out;
                pointer-events: none;
                z-index: 2500;
                padding: 20px 64px 44px 64px;
            }

            @media (max-width: 360px) {
                .modal {
                    padding: 20px 16px 44px 16px;
                }
            }

            .modal.show {
                pointer-events: unset;
                opacity: 1;
            }

            .modal-close, .howtoplay-close, .settings-close {
                position: absolute;
                top: 12px;
                right: 6px;
                background: transparent;
                color: #565758;
            }

            .modal-title {
                font-weight: bold;
                font-size: 14px;
                margin: 24px 0 12px 0;
                text-align: center;
                text-transform: uppercase;
                letter-spacing: 1px;
            }

            .modal-content {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .statistics {
                display: grid;
                grid-template-rows: repeat(2, auto);
                grid-template-columns: auto;
                grid-auto-flow: column;
                grid-column-gap: 24px;
                align-items: center;
                text-align: center;
                letter-spacing: 0.05rem;
                white-space: pre-wrap;
            }

            .statistics > span:nth-child(2n + 1) {
                font-size: 36px;
                font-weight: 400;
            }

            .statistics > span:nth-child(2n) {
                font-size: 12px;
            }

            .distribution {
                display: grid;
                grid-template-columns: auto 1fr;
                grid-gap: 4px 8px;
                width: 100%;
                margin-top: 32px;
                margin-bottom: 32px;
                padding-top: 32px;
                position: relative;
            }

            .distribution::after {
                content: "Guess Distribution";
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                text-transform: uppercase;
                white-space: nowrap;
                font-weight: bold;
            }

            .distribution >:nth-child(2n + 1) {
                font-size: 12px;
                align-self: center;
            }

            .distribution >:nth-child(2n) {
                display: flex;
                justify-content: end;
                align-items: center;
                padding: 2px 0;
            }

            .distribution >:nth-child(2n) span {
                margin: 0 6px;
                font-size: 14px;
            }

            .share-button {
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #3f7ad2;
                padding: 12px 40px;
                white-space: pre;
                text-transform: uppercase;
                font-weight: bold;
                color: white;
                font-size: 20px;
                font-family: inherit;
                border-radius: 4px;
            }

            .overlay {
                position: fixed;
                z-index: 3000;
                top: 0;
                bottom: 0;
                left: 15%;
                right: 15%;
                background: #121213;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.2s ease-in;
                padding: 0 20px;
            }

            @media (max-width: 740px) {
                .overlay {
                    left: 0;
                    right: 0;
                    padding: 0 20px;
                }
            }

            .overlay.show {
                opacity: 1;
                pointer-events: unset;
            }

            .howtoplay {
                display: flex;
                flex-direction: column;
                padding-top: 12px;
                font-size: 14px;
                position: relative;
            }

            .howtoplay:not(.show) {
                display: none;
            }

            .letters-example > div {
                margin-right: 2px;
                border: solid 1px #565758;
                width: 38px;
                height: 38px;
                color: #d7dadc;
                font-size: 2rem;
                line-height: 2rem;
                font-weight: bold;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 12px;
                margin-top: 32px;
            }

            .line-sep {
                width: 100%;
                height: 1px;
                background: #3a3a3c;
            }

            .settings {
                display: flex;
                flex-direction: column;
                padding-top: 12px;
                font-size: 14px;
                position: relative;
                user-select: none;
            }

            .settings:not(.show) {
                display: none;
            }

            .settings > div:not(.line-sep) {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 16px;
                padding: 0 12px;
            }

            /* Responsive header navigation */
            .main-nav {
                background: #1a1a1c;
                border-bottom: 1px solid #3a3a3c;
                width: 100vw;
                min-width: 0;
                margin-bottom: 24px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            }
            .main-nav ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .main-nav li {
                margin: 0 18px;
            }
            .main-nav a {
                color: #d7dadc;
                text-decoration: none;
                font-weight: bold;
                font-size: 1.1rem;
                padding: 12px 0;
                display: block;
                transition: color 0.2s;
            }
            .main-nav a:hover, .main-nav a:focus {
                color: #44dd55;
            }
            @media (max-width: 600px) {
                .main-nav ul {
                    flex-direction: column;
                }
                .main-nav li {
                    margin: 8px 0;
                }
            }

            /* Responsive main content for all pages */
            main {
                max-width: 600px;
                margin: 32px auto 0 auto;
                padding: 24px 16px;
                background: #18181a;
                border-radius: 10px;
                box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            }
            @media (max-width: 700px) {
                main {
                    margin-top: 16px;
                    padding: 12px 4vw;
                }
            }

            /* Contact form styling */
            .contact-form {
                display: flex;
                flex-direction: column;
                gap: 12px;
                background: #222226;
                padding: 18px 12px;
                border-radius: 8px;
                box-shadow: 0 1px 4px rgba(0,0,0,0.10);
            }
            .contact-form label {
                font-size: 1rem;
                color: #d7dadc;
            }
            .contact-form input,
            .contact-form textarea {
                background: #18181a;
                color: #d7dadc;
                border: 1px solid #3a3a3c;
                border-radius: 4px;
                padding: 8px;
                font-size: 1rem;
                resize: vertical;
            }
            .contact-form button[type="submit"] {
                background: #44dd55;
                color: #fff;
                border: none;
                border-radius: 4px;
                padding: 10px 0;
                font-size: 1.1rem;
                font-weight: bold;
                cursor: pointer;
                margin-top: 8px;
                transition: background 0.2s;
            }
            .contact-form button[type="submit"]:hover {
                background: #369c3a;
            }

            /* General page typography */
            h1, h2 {
                color: #44dd55;
                margin-bottom: 18px;
            }
            p, li {
                color: #d7dadc;
                line-height: 1.6;
            }

            /* Responsive article section and table for Wordle article */
.article-section {
    margin-top: 32px;
    margin-bottom: 32px;
    background: #18181a;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 24px 18px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.article-title {
    color: #44dd55;
    font-size: 2rem;
    margin-bottom: 18px;
    text-align: center;
}
.article-section h2, .article-section h3 {
    color: #44dd55;
    margin-top: 28px;
    margin-bottom: 12px;
}
.article-section ul, .article-section ol {
    color: #d7dadc;
    margin-bottom: 18px;
    margin-left: 18px;
}
.article-section p, .article-section li {
    color: #d7dadc;
    line-height: 1.7;
    font-size: 1.08rem;
}

/* Responsive table styles */
.responsive-table-wrapper {
    overflow-x: auto;
    margin: 18px 0;
}
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    background: #222226;
    color: #d7dadc;
    border-radius: 8px;
    overflow: hidden;
    min-width: 340px;
}
.responsive-table th, .responsive-table td {
    padding: 10px 8px;
    border: 1px solid #3a3a3c;
    text-align: center;
    font-size: 1rem;
}
.responsive-table th {
    background: #232323;
    color: #44dd55;
    font-weight: bold;
}
@media (max-width: 600px) {
    .article-section {
        padding: 12px 2vw;
    }
    .responsive-table th, .responsive-table td {
        font-size: 0.95rem;
        padding: 7px 4px;
    }
}
 /* Sidebar styles */
            .sidebar {
                position: fixed;
                top: 0;
                right: -260px;
                width: 250px;
                height: 100%;
                background: #222;
                color: #fff;
                box-shadow: -2px 0 8px rgba(0,0,0,0.15);
                z-index: 2000;
                transition: right 0.3s cubic-bezier(.4,0,.2,1);
                display: flex;
                flex-direction: column;
                padding-top: 60px;
            }
            .sidebar.open {
                right: 0;
            }
            .sidebar .close-btn {
                position: absolute;
                top: 16px;
                right: 16px;
                background: none;
                border: none;
                color: #fff;
                font-size: 2rem;
                cursor: pointer;
                z-index: 2200; /* Ensure above sidebar */
                pointer-events: auto;
            }
            .sidebar .close-btn:focus {
                outline: 2px solid #fff;
            }
            .sidebar ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .sidebar ul li {
                margin: 0 0 20px 0;
                text-align: right;
            }
            .sidebar ul li a {
                color: #fff;
                text-decoration: none;
                font-size: 1.1rem;
                padding: 8px 24px;
                display: block;
                border-radius: 4px 0 0 4px;
                transition: background 0.2s;
            }
            .sidebar ul li a:hover {
                background: #333;
            }
            /* Hamburger styles */
            .hamburger {
                display: none;
                position: absolute;
                top: 18px;
                right: 18px;
                width: 36px;
                height: 36px;
                background: none;
                border: none;
                z-index: 2100;
                cursor: pointer;
            }
            .hamburger span,
            .hamburger span:before,
            .hamburger span:after {
                display: block;
                position: absolute;
                width: 28px;
                height: 4px;
                background: #fff; /* Changed from #222 to white */
                border-radius: 2px;
                transition: all 0.3s;
            }
            .hamburger span {
                top: 16px;
                left: 4px;
            }
            .hamburger span:before {
                content: '';
                top: -10px;
                left: 0;
            }
            .hamburger span:after {
                content: '';
                top: 10px;
                left: 0;
            }
            /* Responsive: show hamburger, hide main nav on small screens */
            @media (max-width: 768px) {
                .main-nav {
                    display: none;
                }
                .hamburger {
                    display: block;
                }
            }
            /* Overlay for sidebar */
            .sidebar-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(0,0,0,0.3);
                z-index: 1999;
            }
            .sidebar-overlay.active {
                display: block;
            }
             @media (max-width: 768px) {
            footer.mobile-footer {
                display: block;
                background: #222;
                color: #fff;
                width: 100vw;
                margin: 0;
                box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
                position: static;
                padding-bottom: 0;
            }
            footer.mobile-footer nav {
                width: 100vw;
            }
            footer.mobile-footer ul {
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin: 0;
                padding: 10px 0 8px 0;
                list-style: none;
                flex-wrap: wrap;
            }
            footer.mobile-footer ul li {
                flex: 1 1 50%;
                text-align: center;
                margin-bottom: 6px;
            }
            footer.mobile-footer ul li a {
                color: #fff;
                text-decoration: none;
                font-size: 1.1rem;
                padding: 6px 10px;
                border-radius: 4px;
                transition: background 0.2s;
                display: inline-block;
                word-break: break-word;
            }
            footer.mobile-footer ul li a:hover {
                background: #333;
            }
            @media (max-width: 600px) {
                footer.mobile-footer ul li a {
                    font-size: 0.98rem;
                    padding: 5px 4px;
                }
                footer.mobile-footer ul li {
                    flex: 1 1 100%;
                }
            }
        }
        @media (min-width: 769px) {
            footer.mobile-footer {
                display: none !important;
            }
        }