:root {
            --ok: #16a34a;
            --bad: #dc2626;
            --hint: #2563eb;
            --ink: #111827;
            --muted: #6b7280;
            --bg: #f9fafb;
        }

        body {
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            background: var(--bg);
            color: var(--ink);
        }

        .wrap {
            max-width: 800px;
            margin: 6rem auto;
            padding: 0 1rem;
        }

        h1 {
            font-size: 1.25rem;
            margin: 0 0 .5rem;
        }

        .panel {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, .04);
            padding: 1rem 1.25rem;
        }

        .controls {
            display: flex;
            gap: .75rem;
            align-items: center;
            margin-bottom: .75rem;
            flex-wrap: wrap;
        }

        .target {
            font-weight: 700;
            color: var(--hint);
        }

        button {
            border: 1px solid #d1d5db;
            background: #fff;
            border-radius: 12px;
            padding: .5rem .9rem;
            cursor: pointer;
            font-weight: 600;
        }

        button:hover {
            background: #f3f4f6;
        }

        .para {
            font-size: 1.125rem;
            border: 1px solid black;
        }

        .word {
            cursor: pointer;
            padding: .05rem .2rem;
            border-radius: .35rem;
            transition: transform .08s ease, background .15s ease, color .15s ease;
        }

        .word:active {
            transform: scale(.98);
        }

        .word.correct {
            background: #dcfce7;
            color: var(--ok);
            box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .25);
        }

        .word.incorrect {
            background: #fee2e2;
            color: var(--bad);
            box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .25);
        }

        .feedback {
            min-height: 1.25rem;
            font-weight: 700;
        }

        .feedback.ok {
            color: var(--ok);
        }

        .feedback.bad {
            color: var(--bad);
        }

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