:root {
            color-scheme: light dark;

            --background: #f4f4f1;
            --panel: #ffffff;
            --panel-secondary: #f8f8f5;
            --text: #222222;
            --muted: #666666;
            --border: #d8d8d2;
            --accent: #f7da21;
            --accent-dark: #d0b600;
            --center-text: #111111;
            --link: #185fa7;
            --success: #26734d;
            --danger: #a62929;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --background: #171717;
                --panel: #222222;
                --panel-secondary: #292929;
                --text: #eeeeee;
                --muted: #b2b2b2;
                --border: #444444;
                --link: #78b7ef;
                --shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
            }
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background: var(--background);
            color: var(--text);
            font-family:
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;
            line-height: 1.45;
        }

        a {
            color: var(--link);
        }

        .page {
            width: min(1120px, calc(100% - 32px));
            margin: 0 auto;
            padding: 24px 0 60px;
        }

        .site-header {
            margin-bottom: 24px;
        }

        .site-header h1 {
            margin: 0;
            font-family: Georgia, "Times New Roman", serif; 
            font-size: clamp(2rem, 6vw, 3.0rem);
            line-height: 1;
        }

        .site-header p {
            margin: 8px 0 0;
            color: var(--muted);
            font-size: 0.95rem;
        }

        .toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin: 22px 0;
            padding: 14px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--panel);
            box-shadow: var(--shadow);
        }

        .toolbar form {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
        }

        .toolbar label {
            font-weight: 700;
        }

        input[type="date"],
        button,
        .button {
            min-height: 38px;
            padding: 7px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--panel-secondary);
            color: var(--text);
            font: inherit;
        }

        button,
        .button {
            cursor: pointer;
            text-decoration: none;
            font-weight: 700;
        }

        button:hover,
        .button:hover {
            filter: brightness(0.96);
        }

        .button.disabled {
            opacity: 0.45;
            pointer-events: none;
        }

        .navigation {
            display: flex;
            gap: 8px;
            margin-left: auto;
        }

        .error {
            padding: 18px;
            border: 1px solid var(--danger);
            border-radius: 8px;
            background: var(--panel);
            color: var(--danger);
        }

        .hero {
            display: grid;
            grid-template-columns: minmax(250px, 360px) 1fr;
            gap: 24px;
            align-items: start;
        }

        .panel {
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--panel);
            box-shadow: var(--shadow);
        }

        .panel-body {
            padding: 20px;
        }

        .panel-title {
            margin: 0 0 16px;
/*            font-family: Georgia, "Times New Roman", serif; */
            font-size: 1.5rem;
        }

        .puzzle-date {
            margin: 0 0 4px;
/*            font-family: Georgia, "Times New Roman", serif; */
            font-size: clamp(1.6rem, 4vw, 1.8rem);
            line-height: 1.1;
        }

        .editor {
            margin: 0 0 20px;
            color: var(--muted);
        }

.bee-grid {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 8px auto 6px;
}

.letter {
    position: absolute;
    left: 50%;
    top: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 88px;
    height: 88px;

    transform: translate(-50%, -50%);

    clip-path: polygon(
        25% 6.7%,
        75% 6.7%,
        100% 50%,
        75% 93.3%,
        25% 93.3%,
        0% 50%
    );

/*    background: #e6e6e6; */
    background: var(--accent);
    color: #121212;

    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;

    user-select: none;
}

.letter.center {
/*    background: var(--accent); */
    background: #CCAA00;
    color: var(--center-text);
    z-index: 2;
}

/*
 * Positions match the Word Hive layout.
 *
 * The six outside letters form a ring around the center.
 */

.letter-1 {
    transform:
        translate(-50%, -50%)
        translate(0, -84px);
}

.letter-2 {
    transform:
        translate(-50%, -50%)
        translate(72px, -42px);
}

.letter-3 {
    transform:
        translate(-50%, -50%)
        translate(72px, 42px);
}

.letter-4 {
    transform:
        translate(-50%, -50%)
        translate(0, 84px);
}

.letter-5 {
    transform:
        translate(-50%, -50%)
        translate(-72px, 42px);
}

.letter-6 {
    transform:
        translate(-50%, -50%)
        translate(-72px, -42px);
}

.letter-center {
    transform: translate(-50%, -50%);
}
        .stats-grid {
            display: grid;
            grid-template-columns:
                repeat(auto-fit, minmax(145px, 1fr));
            gap: 12px;
        }

        .stat {
            padding: 15px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--panel-secondary);
        }

        .stat-value {
            display: block;
/*            font-family: Georgia, "Times New Roman", serif; */
            font-size: 1.85rem;
            font-weight: 700;
            line-height: 1.1;
        }

        .stat-label {
            display: block;
            margin-top: 5px;
            color: var(--muted);
            font-size: 0.9rem;
        }

        .section {
            margin-top: 24px;
        }

        .pangram-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .pangram {
            padding: 8px 12px;
            border: 1px solid var(--accent-dark);
            border-radius: 999px;
            background: var(--accent);
/*            color: var(--center-text); */
            color: blue;
            font-weight: 800;
        }

        .pangram-score {
            margin-left: 5px;
            font-weight: 600;
            color: black;
        }

        .initial-table,
        .answers-table {
            width: 100%;
            border-collapse: collapse;
        }

        .initial-table th,
        .initial-table td,
        .answers-table th,
        .answers-table td {
            padding: 10px 12px;
            border-bottom: 1px solid var(--border);
            text-align: left;
        }

        .initial-table th,
        .answers-table th {
            background: var(--panel-secondary);
            font-size: 0.9rem;
        }

        .initial-table td:not(:first-child),
        .initial-table th:not(:first-child),
        .answers-table td.score,
        .answers-table th.score {
            text-align: right;
        }

        .table-wrapper {
            overflow-x: auto;
        }

        details summary {
            cursor: pointer;
            padding: 17px 20px;
            font-weight: 800;
            font-size: 1.1rem;
        }

        details[open] summary {
            border-bottom: 1px solid var(--border);
        }

	.answers-grid {
	    column-width: 230px;
	    column-gap: 20px;
	    padding: 20px;
	}

        .answer-card {
	    break-inside: avoid;
	    margin: 0 0 10px;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--panel-secondary);
        }

        .answer-card.pangram-answer {
            border-color: var(--accent-dark);
            box-shadow: inset 4px 0 0 var(--accent);
        }

        .answer-word {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            font-size: 1.05rem;
            font-weight: 800;
        }

        .answer-score {
            color: var(--muted);
            font-size: 0.9rem;
            white-space: nowrap;
        }

        .answer-flags {
            margin-top: 4px;
            color: var(--muted);
            font-size: 0.8rem;
        }

        .definition {
            margin-top: 8px;
            color: var(--muted);
            font-size: 0.9rem;
        }

        .footer-note {
            margin-top: 28px;
            color: var(--muted);
            font-size: 0.85rem;
            text-align: center;
        }

        @media (max-width: 760px) {
            .hero {
                grid-template-columns: 1fr;
            }

            .navigation {
                width: 100%;
                margin-left: 0;
            }

            .navigation .button {
                flex: 1;
                text-align: center;
            }

.bee-grid {
    width: 286px;
    height: 286px;
}

.letter {
    width: 80px;
    height: 80px;
    font-size: 1.8rem;
}

.letter-1 {
    transform:
        translate(-50%, -50%)
        translate(0, -76px);
}

.letter-2 {
    transform:
        translate(-50%, -50%)
        translate(65px, -38px);
}

.letter-3 {
    transform:
        translate(-50%, -50%)
        translate(65px, 38px);
}

.letter-4 {
    transform:
        translate(-50%, -50%)
        translate(0, 76px);
}

.letter-5 {
    transform:
        translate(-50%, -50%)
        translate(-65px, 38px);
}

.letter-6 {
    transform:
        translate(-50%, -50%)
        translate(-65px, -38px);
}

.letter-center {
    transform: translate(-50%, -50%);
}

        }

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.dictionary-summary {
    margin: 0 0 16px;
    color: var(--muted);
}

.dictionary-groups {
    display: grid;
    gap: 18px;
}

.dictionary-group {
    padding-top: 4px;
}

.dictionary-group + .dictionary-group {
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.dictionary-initial {
    margin: 0 0 10px;
/*    font-family: Georgia, "Times New Roman", serif; */
    font-size: 1.3rem;
}

.dictionary-word-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dictionary-word {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel-secondary);
    font-size: 0.92rem;
    text-transform: uppercase;
}

.dictionary-warning {
    padding: 12px 14px;
    border-left: 4px solid var(--accent-dark);
    background: var(--panel-secondary);
    color: var(--muted);
    font-size: 0.9rem;
}

.word-link {
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    text-transform: inherit;
}

.word-link:hover,
.word-link:focus-visible {
    color: inherit;
    text-decoration: underline;
}

.stat-details {
    margin-top: 10px;
    font-size: 0.85rem;
}

.stat-details summary {
    padding: 0;
    border: 0;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 600;
}

.stat-details[open] summary {
    margin-bottom: 6px;
    border: 0;
}

.stat-detail-text {
    color: var(--muted);
    line-height: 1.35;
    font-size: 0.65rem;
}


.puzzle-letter-list {
    display: flex;
    justify-content: center;
    gap: 0.45em;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.puzzle-center-letter {
    color: var(--text);
    font-weight: 800;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}