@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800&display=swap");

/* tc-scoped:tc-wp-tool-root */

.tc-wp-tool-root{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flow-root;
  isolation: isolate;
  position: relative;
}.wpc-scope-82 .tc-wp-tool-root img, .wpc-scope-82 .tc-wp-tool-root video, .wpc-scope-82 .tc-wp-tool-root svg, .wpc-scope-82 .tc-wp-tool-root iframe{
  max-width: 100%;
  height: auto;
}.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper *{
                box-sizing: border-box;
                margin: 0;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper{
                font-family:
                    "Inter",
                    system-ui,
                    -apple-system,
                    sans-serif;
                background: var(--background);
                color: var(--foreground);
                min-height: 100vh;
                line-height: 1.6;
                -webkit-font-smoothing: antialiased;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-intro{
                position: fixed;
                inset: 0;
                z-index: 9999;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 2rem;
                overflow: hidden;
                transition: opacity 0.6s ease;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-intro-bg{
                position: absolute;
                inset: -20%;
                background: linear-gradient(
                    160deg,
                    #1e3a5f 0%,
                    #0f172a 45%,
                    #1e293b 100%
                );
                pointer-events: none;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-intro-bg::before{
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(
                    180deg,
                    rgba(0, 0, 0, 0.12) 0%,
                    transparent 50%,
                    rgba(0, 0, 0, 0.08) 100%
                );
                pointer-events: none;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-orbs{
                position: absolute;
                inset: 0;
                pointer-events: none;
                display: none;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-orb{
                display: none;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-intro-wrap{
                position: relative;
                z-index: 2;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 2rem;
                text-align: center;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-intro-title{
                font-family: "DM Serif Display", serif;
                font-size: clamp(2rem, 6vw, 3.5rem);
                font-weight: 400;
                color: #fff;
                text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
                margin: 0;
                letter-spacing: -0.02em;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-intro-sub{
                font-family: "Inter", sans-serif;
                font-size: 1.1rem;
                color: rgba(255, 255, 255, 0.9);
                margin: -1rem 0 0 0;
                font-weight: 500;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-play-btn{
                position: relative;
                padding: 1rem 2.5rem;
                font-size: 1.25rem;
                font-weight: 700;
                letter-spacing: 0.06em;
                text-transform: uppercase;
                border: none;
                border-radius: 999px;
                background: transparent;
                color: #1e293b;
                cursor: pointer;
                font-family: inherit;
                transition:
                    transform 0.2s ease,
                    box-shadow 0.2s ease;
                z-index: 1;
                animation: playBtnRgbGlow 3s linear infinite;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-play-btn::before{
                content: "";
                position: absolute;
                inset: -3px;
                border-radius: inherit;
                background: linear-gradient(
                    90deg,
                    #ff0080,
                    #ff8c00,
                    #40e0d0,
                    #6366f1,
                    #a855f7,
                    #ff0080
                );
                background-size: 400% 100%;
                z-index: -2;
                animation: playBtnRgbBorder 2.5s linear infinite;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-play-btn::after{
                content: "";
                position: absolute;
                inset: 3px;
                border-radius: 999px;
                background: rgba(255, 255, 255, 0.96);
                z-index: -1;
            }@keyframes playBtnRgbBorder{
                0% {
                    background-position: 0% 50%;
                }
                100% {
                    background-position: 400% 50%;
                }
            }@keyframes playBtnRgbGlow{
                0%,
                100% {
                    box-shadow: 0 0 14px rgba(255, 0, 128, 0.4);
                }
                25% {
                    box-shadow: 0 0 18px rgba(255, 140, 0, 0.45);
                }
                50% {
                    box-shadow: 0 0 18px rgba(64, 224, 208, 0.45);
                }
                75% {
                    box-shadow: 0 0 18px rgba(99, 102, 241, 0.45);
                }
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-play-btn:hover{
                transform: scale(1.06);
                box-shadow: 0 0 24px rgba(168, 85, 247, 0.5);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-play-btn:active{
                transform: scale(0.98);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-intro.leaving{
                opacity: 0;
                pointer-events: none;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-intro.leaving .color-quiz-intro-wrap{
                animation: colorIntroShrink 0.5s ease forwards;
            }@keyframes colorIntroShrink{
                to {
                    transform: scale(0.9);
                    opacity: 0;
                }
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper:not(.intro-done) .color-quiz-main{
                opacity: 0;
                pointer-events: none;
                visibility: hidden;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.intro-done .color-quiz-main{
                opacity: 1;
                pointer-events: auto;
                visibility: visible;
                transition: opacity 0.4s ease;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper{
                --background: #f8fafc;
                --foreground: #0f172a;
                --text-secondary: #475569;
                --card: #ffffff;
                --border: #e2e8f0;
                --radius: 0.75rem;
                --correct: #059669;
                --correct-dark: #047857;
                --wrong: #dc2626;
                --primary: #6366f1;
                --shadow-lg:
                    0 10px 25px -3px rgb(0 0 0 / 0.08),
                    0 4px 6px -4px rgb(0 0 0 / 0.05);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.intro-done{
                background: linear-gradient(
                    180deg,
                    #f1f5f9 0%,
                    #e2e8f0 50%,
                    #f8fafc 100%
                );
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.intro-done::before{
                content: "";
                position: fixed;
                inset: 0;
                background: linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.6) 0%,
                    transparent 50%,
                    rgba(241, 245, 249, 0.4) 100%
                );
                pointer-events: none;
                z-index: 0;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.intro-done .color-quiz-main::before{
                content: "";
                position: fixed;
                inset: 0;
                z-index: 0;
                pointer-events: none;
                background: transparent;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-main{
                position: relative;
                z-index: 1;
                max-width: 1100px;
                margin: 0 auto;
                padding: 2rem 1.5rem;
                display: flex;
                gap: 1.5rem;
                align-items: start;
                flex-wrap: wrap;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-game-wrap{
                flex: 1;
                min-width: 0;
                max-width: 560px;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-sidebar{
                width: 340px;
                flex-shrink: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1rem;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-sidebar-top{
                display: flex;
                align-items: center;
                gap: 0.5rem;
                width: 100%;
                max-width: 320px;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-sidebar .color-quiz-btn-how{
                flex: 1;
                padding: 0.5rem 0.75rem;
                font-size: 0.875rem;
                font-weight: 600;
                font-family: inherit;
                color: var(--foreground);
                background: var(--card);
                border: 1px solid var(--border);
                border-radius: var(--radius);
                cursor: pointer;
                box-shadow: var(--shadow-sm);
                transition:
                    box-shadow 0.2s ease,
                    border-color 0.2s ease;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-sidebar .color-quiz-btn-how:hover{
                border-color: var(--primary);
                box-shadow: 0 2px 10px rgba(99, 102, 241, 0.15);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-sidebar .color-quiz-btn-theme{
                width: 40px;
                height: 40px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 1.25rem;
                background: var(--card);
                border: 1px solid var(--border);
                border-radius: 50%;
                cursor: pointer;
                box-shadow: var(--shadow-sm);
                transition:
                    transform 0.2s ease,
                    box-shadow 0.2s ease;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-sidebar .color-quiz-btn-theme:hover{
                transform: scale(1.05);
                box-shadow: var(--shadow-md);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-sidebar-card{
                background: var(--card);
                border: 1px solid var(--border);
                border-radius: var(--radius);
                padding: 1rem;
                box-shadow: var(--shadow-sm);
                width: 100%;
                max-width: 320px;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-sidebar-card-title{
                font-size: 0.9375rem;
                font-weight: 700;
                color: var(--foreground);
                margin: 0 0 0.5rem 0;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-sidebar-card .color-quiz-text{
                font-size: 0.8125rem;
                color: var(--text-secondary);
                line-height: 1.5;
                margin: 0 0 0.5rem 0;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-sidebar-card .color-quiz-link{
                font-size: 0.8125rem;
                font-weight: 600;
                color: var(--primary);
                text-decoration: none;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-sidebar-card .color-quiz-link:hover{
                text-decoration: underline;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-session-stats{
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0.5rem;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-session-stat{
                background: var(--background);
                border: 1px solid var(--border);
                border-radius: var(--radius);
                padding: 0.75rem;
                text-align: center;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-session-stat-value{
                font-size: 1.5rem;
                font-weight: 800;
                color: var(--foreground);
                line-height: 1.2;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-session-stat-label{
                font-size: 0.6875rem;
                font-weight: 700;
                color: var(--text-secondary);
                letter-spacing: 0.05em;
                text-transform: uppercase;
                margin-top: 0.25rem;
            }@media (max-width: 992px){.tc-wp-tool-root .color-quiz-main{
                    padding: 1.5rem 1.25rem;
                    gap: 1.25rem;
                }.tc-wp-tool-root .color-quiz-game-wrap{
                    max-width: 100%;
                }.tc-wp-tool-root .color-quiz-sidebar{
                    width: 300px;
                }.tc-wp-tool-root .color-quiz-sidebar-card, .tc-wp-tool-root .color-quiz-sidebar-top{
                    max-width: 280px;
                }.tc-wp-tool-root .color-quiz-game-card{
                    padding: 1.75rem 1.5rem;
                    gap: 1.5rem;
                }.tc-wp-tool-root .color-quiz-game-title{
                    font-size: 2rem;
                }.tc-wp-tool-root .color-quiz-game-stats{
                    gap: 0.75rem 1.25rem;
                }.tc-wp-tool-root .color-quiz-color-swatch{
                    width: min(200px, 65vw);
                    height: min(165px, 52vw);
                }.tc-wp-tool-root .color-quiz-quiz-choice-btn{
                    padding: 0.85rem 0.9rem;
                    font-size: 0.9375rem;
                }.tc-wp-tool-root .color-quiz-intro{
                    padding: 1.75rem;
                }.tc-wp-tool-root .color-quiz-intro-wrap{
                    gap: 1.75rem;
                }.tc-wp-tool-root .color-quiz-intro-title{
                    font-size: clamp(1.8rem, 5vw, 3rem);
                }.tc-wp-tool-root .color-quiz-intro-sub{
                    font-size: 1.05rem;
                }.tc-wp-tool-root .color-quiz-play-btn{
                    padding: 0.9rem 2.25rem;
                    font-size: 1.15rem;
                }.tc-wp-tool-root .color-quiz-rules-overlay{
                    padding: 1.25rem;
                }.tc-wp-tool-root .color-quiz-rules-modal{
                    max-width: 380px;
                    padding: 1.35rem;
                }.tc-wp-tool-root .color-quiz-rules-modal-title{
                    font-size: 1.15rem;
                }.tc-wp-tool-root .color-quiz-result-overlay{
                    padding: 1.25rem;
                }.tc-wp-tool-root .color-quiz-result-modal{
                    max-width: 340px;
                    padding: 1.75rem;
                }.tc-wp-tool-root .color-quiz-result-modal .color-quiz-result-title{
                    font-size: 1.6rem;
                }}@media (max-width: 768px){.tc-wp-tool-root .color-quiz-main{
                    flex-direction: column;
                    padding: 1.25rem 1rem;
                    gap: 1rem;
                    align-items: stretch;
                }.tc-wp-tool-root .color-quiz-game-wrap{
                    max-width: 100%;
                }.tc-wp-tool-root .color-quiz-sidebar{
                    width: 100%;
                    max-width: 100%;
                    padding: 0.9rem;
                }.tc-wp-tool-root .color-quiz-sidebar-top{
                    max-width: 100%;
                }.tc-wp-tool-root .color-quiz-sidebar-card{
                    max-width: 100%;
                }.tc-wp-tool-root .color-quiz-game-card{
                    padding: 1.5rem 1.25rem;
                    gap: 1.35rem;
                }.tc-wp-tool-root .color-quiz-game-title{
                    font-size: 1.85rem;
                }.tc-wp-tool-root .color-quiz-game-description{
                    font-size: 0.875rem;
                }.tc-wp-tool-root .color-quiz-game-stats{
                    font-size: 0.875rem;
                    gap: 0.6rem 1rem;
                }.tc-wp-tool-root .color-quiz-session-stat-value{
                    font-size: 1.35rem;
                }.tc-wp-tool-root .color-quiz-session-stat-label{
                    font-size: 0.625rem;
                }.tc-wp-tool-root .color-quiz-color-swatch{
                    width: min(180px, 60vw);
                    height: min(150px, 48vw);
                }.tc-wp-tool-root .color-quiz-quiz-prompt{
                    font-size: 1rem;
                }.tc-wp-tool-root .color-quiz-quiz-choices{
                    gap: 0.65rem;
                }.tc-wp-tool-root .color-quiz-quiz-choice-btn{
                    padding: 0.8rem 0.85rem;
                    font-size: 0.9rem;
                }.tc-wp-tool-root .color-quiz-intro{
                    padding: 1.5rem 1.25rem;
                }.tc-wp-tool-root .color-quiz-intro-wrap{
                    gap: 1.5rem;
                }.tc-wp-tool-root .color-quiz-intro-title{
                    font-size: clamp(1.5rem, 4.5vw, 2.5rem);
                }.tc-wp-tool-root .color-quiz-intro-sub{
                    font-size: 1rem;
                }.tc-wp-tool-root .color-quiz-play-btn{
                    padding: 0.8rem 2rem;
                    font-size: 1.1rem;
                }.tc-wp-tool-root .color-quiz-rules-modal{
                    max-width: 100%;
                    padding: 1.25rem;
                }.tc-wp-tool-root .color-quiz-rules-modal-title{
                    font-size: 1.1rem;
                }.tc-wp-tool-root .color-quiz-rules-modal .color-quiz-text{
                    font-size: 0.875rem;
                }.tc-wp-tool-root .color-quiz-result-modal{
                    max-width: 100%;
                    padding: 1.5rem;
                }.tc-wp-tool-root .color-quiz-result-modal .color-quiz-result-title{
                    font-size: 1.5rem;
                }.tc-wp-tool-root .color-quiz-result-modal .color-quiz-text{
                    font-size: 0.9375rem;
                }}@media (max-width: 600px){.tc-wp-tool-root .color-quiz-main{
                    padding: 1rem 0.9rem;
                    gap: 0.9rem;
                }.tc-wp-tool-root .color-quiz-sidebar{
                    padding: 0.8rem;
                }.tc-wp-tool-root .color-quiz-sidebar-card{
                    padding: 0.9rem;
                }.tc-wp-tool-root .color-quiz-sidebar-card-title{
                    font-size: 0.875rem;
                }.tc-wp-tool-root .color-quiz-sidebar-card .color-quiz-text{
                    font-size: 0.75rem;
                }.tc-wp-tool-root .color-quiz-session-stat{
                    padding: 0.6rem;
                }.tc-wp-tool-root .color-quiz-session-stat-value{
                    font-size: 1.25rem;
                }.tc-wp-tool-root .color-quiz-session-stat-label{
                    font-size: 0.6rem;
                }.tc-wp-tool-root .color-quiz-game-card{
                    padding: 1.25rem 1rem;
                    gap: 1.15rem;
                }.tc-wp-tool-root .color-quiz-game-header{
                    padding-bottom: 0.85rem;
                }.tc-wp-tool-root .color-quiz-game-title{
                    font-size: 1.65rem;
                }.tc-wp-tool-root .color-quiz-game-description{
                    font-size: 0.8125rem;
                }.tc-wp-tool-root .color-quiz-game-stats{
                    font-size: 0.8125rem;
                }.tc-wp-tool-root .color-quiz-color-swatch-wrap{
                    padding: 0.75rem 0;
                }.tc-wp-tool-root .color-quiz-color-swatch{
                    width: min(160px, 55vw);
                    height: min(132px, 44vw);
                }.tc-wp-tool-root .color-quiz-quiz-prompt{
                    font-size: 0.9375rem;
                }.tc-wp-tool-root .color-quiz-quiz-choices{
                    grid-template-columns: 1fr;
                    gap: 0.6rem;
                }.tc-wp-tool-root .color-quiz-quiz-choice-btn{
                    padding: 0.75rem 1rem;
                    font-size: 0.875rem;
                }.tc-wp-tool-root .color-quiz-intro{
                    padding: 1.25rem 1rem;
                }.tc-wp-tool-root .color-quiz-intro-wrap{
                    gap: 1.25rem;
                }.tc-wp-tool-root .color-quiz-intro-title{
                    font-size: clamp(1.35rem, 4.2vw, 2.2rem);
                }.tc-wp-tool-root .color-quiz-intro-sub{
                    font-size: 0.95rem;
                }.tc-wp-tool-root .color-quiz-play-btn{
                    padding: 0.75rem 1.75rem;
                    font-size: 1rem;
                }.tc-wp-tool-root .color-quiz-rules-overlay{
                    padding: 1rem;
                }.tc-wp-tool-root .color-quiz-rules-modal{
                    padding: 1.15rem;
                }.tc-wp-tool-root .color-quiz-rules-modal-title{
                    font-size: 1.05rem;
                }.tc-wp-tool-root .color-quiz-result-overlay{
                    padding: 1rem;
                }.tc-wp-tool-root .color-quiz-result-modal{
                    padding: 1.35rem;
                }.tc-wp-tool-root .color-quiz-result-modal .color-quiz-result-title{
                    font-size: 1.4rem;
                }}@media (max-width: 400px){.tc-wp-tool-root .color-quiz-main{
                    padding: 0.9rem 0.65rem;
                    gap: 0.75rem;
                }.tc-wp-tool-root .color-quiz-sidebar{
                    padding: 0.65rem;
                }.tc-wp-tool-root .color-quiz-sidebar .color-quiz-btn-how{
                    padding: 0.45rem 0.6rem;
                    font-size: 0.8125rem;
                }.tc-wp-tool-root .color-quiz-sidebar .color-quiz-btn-theme{
                    width: 36px;
                    height: 36px;
                    font-size: 1.1rem;
                }.tc-wp-tool-root .color-quiz-sidebar-card{
                    padding: 0.75rem;
                }.tc-wp-tool-root .color-quiz-sidebar-card-title{
                    font-size: 0.8125rem;
                }.tc-wp-tool-root .color-quiz-session-stats{
                    gap: 0.4rem;
                }.tc-wp-tool-root .color-quiz-session-stat{
                    padding: 0.5rem;
                }.tc-wp-tool-root .color-quiz-session-stat-value{
                    font-size: 1.15rem;
                }.tc-wp-tool-root .color-quiz-session-stat-label{
                    font-size: 0.5625rem;
                }.tc-wp-tool-root .color-quiz-game-card{
                    padding: 1rem 0.85rem;
                    gap: 1rem;
                }.tc-wp-tool-root .color-quiz-game-title{
                    font-size: 1.5rem;
                }.tc-wp-tool-root .color-quiz-game-description{
                    font-size: 0.75rem;
                }.tc-wp-tool-root .color-quiz-color-swatch{
                    width: min(140px, 50vw);
                    height: min(115px, 40vw);
                }.tc-wp-tool-root .color-quiz-quiz-choice-btn{
                    padding: 0.7rem 0.85rem;
                    font-size: 0.8125rem;
                }.tc-wp-tool-root .color-quiz-intro{
                    padding: 1rem 0.75rem;
                }.tc-wp-tool-root .color-quiz-intro-title{
                    font-size: clamp(1.2rem, 3.8vw, 1.85rem);
                }.tc-wp-tool-root .color-quiz-intro-sub{
                    font-size: 0.9rem;
                }.tc-wp-tool-root .color-quiz-play-btn{
                    padding: 0.65rem 1.5rem;
                    font-size: 0.9375rem;
                }.tc-wp-tool-root .color-quiz-rules-modal{
                    padding: 1rem;
                }.tc-wp-tool-root .color-quiz-rules-modal-title{
                    font-size: 1rem;
                }.tc-wp-tool-root .color-quiz-rules-modal .color-quiz-text{
                    font-size: 0.8125rem;
                }.tc-wp-tool-root .color-quiz-btn-close-rules{
                    padding: 0.45rem 0.9rem;
                    font-size: 0.875rem;
                }.tc-wp-tool-root .color-quiz-result-modal{
                    padding: 1.15rem;
                }.tc-wp-tool-root .color-quiz-result-modal .color-quiz-result-title{
                    font-size: 1.25rem;
                }.tc-wp-tool-root .color-quiz-result-modal .color-quiz-text{
                    font-size: 0.875rem;
                }.tc-wp-tool-root .color-quiz-result-modal .color-quiz-btn{
                    padding: 0.55rem 1.25rem;
                    font-size: 0.9rem;
                }}@media (max-width: 375px){.tc-wp-tool-root .color-quiz-main{
                    padding: 0.75rem 0.5rem;
                    gap: 0.65rem;
                }.tc-wp-tool-root .color-quiz-sidebar{
                    padding: 0.5rem;
                }.tc-wp-tool-root .color-quiz-game-card{
                    padding: 0.9rem 0.75rem;
                    gap: 0.9rem;
                }.tc-wp-tool-root .color-quiz-game-title{
                    font-size: 1.35rem;
                }.tc-wp-tool-root .color-quiz-color-swatch{
                    width: min(130px, 48vw);
                    height: min(106px, 38vw);
                }.tc-wp-tool-root .color-quiz-quiz-choice-btn{
                    padding: 0.65rem 0.75rem;
                    font-size: 0.75rem;
                }.tc-wp-tool-root .color-quiz-intro{
                    padding: 0.9rem 0.65rem;
                }.tc-wp-tool-root .color-quiz-intro-wrap{
                    gap: 1rem;
                }.tc-wp-tool-root .color-quiz-intro-title{
                    font-size: clamp(1.1rem, 3.5vw, 1.65rem);
                }.tc-wp-tool-root .color-quiz-intro-sub{
                    font-size: 0.8125rem;
                }.tc-wp-tool-root .color-quiz-play-btn{
                    padding: 0.55rem 1.25rem;
                    font-size: 0.875rem;
                }.tc-wp-tool-root .color-quiz-result-modal .color-quiz-result-title{
                    font-size: 1.15rem;
                }}.wpc-scope-82 .tc-wp-tool-root .color-quiz-rules-overlay{
                position: fixed;
                inset: 0;
                z-index: 10000;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 1.5rem;
                background: rgba(0, 0, 0, 0.4);
                opacity: 0;
                visibility: hidden;
                transition:
                    opacity 0.25s ease,
                    visibility 0.25s ease;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-rules-overlay.is-visible{
                opacity: 1;
                visibility: visible;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-rules-modal{
                background: var(--card);
                border-radius: var(--radius);
                padding: 1.5rem;
                max-width: 400px;
                width: 100%;
                box-shadow: var(--shadow-lg);
                border: 1px solid var(--border);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-rules-modal-title{
                font-size: 1.25rem;
                font-weight: 700;
                margin: 0 0 0.75rem 0;
                color: var(--foreground);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-rules-modal .color-quiz-text{
                font-size: 0.9375rem;
                color: var(--text-secondary);
                line-height: 1.5;
                margin: 0 0 0.5rem 0;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-btn-close-rules{
                margin-top: 1rem;
                padding: 0.5rem 1rem;
                font-size: 0.9375rem;
                font-weight: 600;
                font-family: inherit;
                color: #fff;
                background: var(--primary);
                border-radius: var(--radius);
                cursor: pointer;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-btn-close-rules:hover{
                opacity: 0.9;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode{
                --background: #1e293b;
                --foreground: #f1f5f9;
                --text-secondary: #94a3b8;
                --card: #334155;
                --border: #475569;
                --primary: #818cf8;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-intro-bg{
                filter: brightness(0.7) saturate(0.9);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-intro-title, .wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-intro-sub{
                color: rgba(255, 255, 255, 0.95);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-play-btn::after{
                background: #334155;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-play-btn{
                color: #f1f5f9;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode.intro-done{
                background: linear-gradient(
                    125deg,
                    #1e1b2e 0%,
                    #312e81 30%,
                    #1e3a5f 60%,
                    #1e293b 100%
                );
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode.intro-done::before{
                background: linear-gradient(
                    180deg,
                    rgba(0, 0, 0, 0.3) 0%,
                    rgba(0, 0, 0, 0.2) 50%,
                    rgba(0, 0, 0, 0.35) 100%
                );
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode.intro-done .color-quiz-main::before{
                background-image:
                    radial-gradient(
                        circle at 20% 30%,
                        rgba(99, 102, 241, 0.2) 0%,
                        transparent 40%
                    ),
                    radial-gradient(
                        circle at 80% 70%,
                        rgba(129, 140, 248, 0.15) 0%,
                        transparent 45%
                    );
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-game-card{
                background: rgba(51, 65, 85, 0.95);
                border-color: rgba(71, 85, 105, 0.8);
                box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-game-title, .wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-game-description, .wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-game-stats, .wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-game-question-count, .wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-game-prompt, .wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-quiz-prompt{
                color: var(--foreground);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-game-score{
                color: #a5b4fc;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-game-timer-value{
                color: var(--foreground);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-choice-btn{
                background: rgba(51, 65, 85, 0.9);
                border-color: var(--border);
                color: var(--foreground);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-choice-btn:hover:not(:disabled){
                background: #475569;
                border-color: var(--primary);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-result-overlay{
                background: rgba(0, 0, 0, 0.65);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-result-modal{
                background: var(--card);
                border-color: var(--border);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-result-title, .wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-result-score, .wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-result-message, .wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-result-best{
                color: var(--foreground);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-result-message{
                color: var(--text-secondary);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-result-best{
                color: #a5b4fc;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-rules-overlay{
                background: rgba(0, 0, 0, 0.65);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-rules-modal{
                background: var(--card);
                border-color: var(--border);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-rules-modal-title{
                color: var(--foreground);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-rules-modal .color-quiz-text{
                color: var(--text-secondary);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-btn-close-rules{
                background: var(--primary);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-sidebar{
                background-color: rgba(30, 41, 59, 0.6);
                background-image: radial-gradient(
                    circle,
                    rgba(71, 85, 105, 0.5) 1px,
                    transparent 1px
                );
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-sidebar-card{
                background: var(--card);
                border-color: var(--border);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-sidebar-card-title{
                color: var(--foreground);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-sidebar-card .color-quiz-text, .wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-session-stat-label{
                color: var(--text-secondary);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-session-stat{
                background: var(--background);
                border-color: var(--border);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-session-stat-value{
                color: var(--foreground);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-btn-how, .wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-btn-theme{
                background: var(--card);
                border-color: var(--border);
                color: var(--foreground);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-wrapper.dark-mode .color-quiz-btn-secondary{
                background: rgba(71, 85, 105, 0.5);
                color: var(--foreground);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-sidebar{
                background-image: radial-gradient(
                    circle,
                    var(--border) 1px,
                    transparent 1px
                );
                background-size: 12px 12px;
                background-position: 0 0;
                padding: 1rem;
                border-radius: var(--radius);
                background-color: rgba(255, 255, 255, 0.5);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-game-card{
                background: rgba(255, 255, 255, 0.92);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border-radius: calc(var(--radius) * 2);
                padding: 2rem;
                box-shadow:
                    0 20px 50px rgba(0, 0, 0, 0.15),
                    0 0 0 1px rgba(255, 255, 255, 0.5);
                border: 1px solid rgba(255, 255, 255, 0.6);
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1.75rem;
                position: relative;
                z-index: 1;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-game-header{
                text-align: center;
                width: 100%;
                padding-bottom: 1rem;
                border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-game-title{
                font-family: "Outfit", "Inter", sans-serif;
                font-size: 2.25rem;
                font-weight: 800;
                margin: 0 0 0.35rem 0;
                letter-spacing: -0.03em;
                background: linear-gradient(
                    90deg,
                    #ff0080,
                    #ff8c00,
                    #40e0d0,
                    #6366f1,
                    #a855f7,
                    #ff0080
                );
                background-size: 300% 100%;
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                animation: titleRgbText 4s linear infinite;
            }@keyframes titleRgbText{
                0% {
                    background-position: 0% 50%;
                }
                100% {
                    background-position: 300% 50%;
                }
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-game-description{
                font-family: "Outfit", "Inter", sans-serif;
                font-size: 0.9375rem;
                font-weight: 500;
                color: var(--text-secondary);
                margin: 0;
                letter-spacing: 0.01em;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-game-stats{
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                gap: 1rem 1.5rem;
                width: 100%;
                font-family: "Outfit", "Inter", sans-serif;
                font-size: 0.9375rem;
                font-weight: 600;
                color: var(--text-secondary);
                letter-spacing: 0.02em;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-game-timer{
                display: inline-flex;
                align-items: center;
                gap: 0.35rem;
                padding: 0.35rem 0.65rem;
                border-radius: var(--radius);
                background: rgba(255, 255, 255, 0.9);
                color: var(--primary);
                font-family: "Outfit", "Inter", sans-serif;
                font-weight: 700;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-game-timer.low{
                background: rgba(255, 255, 255, 0.95);
                color: var(--wrong);
                box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-color-swatch-wrap{
                width: 100%;
                display: flex;
                justify-content: center;
                padding: 1rem 0;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-color-swatch{
                width: min(220px, 70vw);
                height: min(180px, 55vw);
                border-radius: var(--radius);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
                border: 3px solid var(--border);
                transition: background-color 0.3s ease;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-quiz-prompt{
                font-family: "Outfit", "Inter", sans-serif;
                font-size: 1.1rem;
                font-weight: 700;
                margin: 0;
                letter-spacing: 0.02em;
                background: linear-gradient(
                    90deg,
                    #6366f1,
                    #a855f7,
                    #ec4899,
                    #6366f1
                );
                background-size: 200% 100%;
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                animation: promptRgbText 3s linear infinite;
            }@keyframes promptRgbText{
                0% {
                    background-position: 0% 50%;
                }
                100% {
                    background-position: 200% 50%;
                }
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-quiz-choices{
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0.75rem;
                width: 100%;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-quiz-choice-btn{
                position: relative;
                padding: 0.9rem 1rem;
                font-family: "Outfit", "Inter", sans-serif;
                font-size: 1rem;
                font-weight: 700;
                letter-spacing: 0.02em;
                border: none;
                border-radius: var(--radius);
                background: transparent;
                cursor: pointer;
                transition: transform 0.15s ease;
                z-index: 1;
                overflow: hidden;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-quiz-choice-btn::before{
                content: "";
                position: absolute;
                inset: -2px;
                border-radius: inherit;
                background: linear-gradient(
                    90deg,
                    #ff0080,
                    #ff8c00,
                    #40e0d0,
                    #6366f1,
                    #a855f7,
                    #ff0080
                );
                background-size: 300% 100%;
                z-index: -2;
                animation: choiceRgbBorder 3s linear infinite;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-quiz-choice-btn::after{
                content: "";
                position: absolute;
                inset: 2px;
                border-radius: calc(var(--radius) - 2px);
                background: rgba(255, 255, 255, 0.95);
                z-index: -1;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-quiz-choice-btn .color-quiz-choice-text{
                position: relative;
                z-index: 1;
                background: linear-gradient(
                    90deg,
                    #ff0080,
                    #ff8c00,
                    #40e0d0,
                    #6366f1,
                    #a855f7,
                    #ff0080
                );
                background-size: 300% 100%;
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                animation: choiceRgbText 3s linear infinite;
            }@keyframes choiceRgbBorder{
                0% {
                    background-position: 0% 50%;
                }
                100% {
                    background-position: 300% 50%;
                }
            }@keyframes choiceRgbText{
                0% {
                    background-position: 0% 50%;
                }
                100% {
                    background-position: 300% 50%;
                }
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-quiz-choice-btn:hover:not(:disabled){
                transform: scale(1.03);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-quiz-choice-btn:disabled{
                cursor: default;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-quiz-choice-btn.correct::before{
                animation: none;
                background: linear-gradient(
                    135deg,
                    var(--correct),
                    var(--correct-dark)
                );
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-quiz-choice-btn.correct .color-quiz-choice-text{
                animation: none;
                background: none;
                color: var(--correct-dark);
                -webkit-background-clip: unset;
                background-clip: unset;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-quiz-choice-btn.wrong::before{
                animation: none;
                background: linear-gradient(135deg, var(--wrong), #b91c1c);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-quiz-choice-btn.wrong .color-quiz-choice-text{
                animation: none;
                background: none;
                color: var(--wrong);
                -webkit-background-clip: unset;
                background-clip: unset;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-result-overlay{
                position: fixed;
                inset: 0;
                z-index: 10000;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 1.5rem;
                opacity: 0;
                visibility: hidden;
                transition:
                    opacity 0.3s ease,
                    visibility 0.3s ease;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-result-overlay.show{
                opacity: 1;
                visibility: visible;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-result-modal{
                background: var(--card);
                border-radius: calc(var(--radius) * 2);
                padding: 2rem;
                max-width: 360px;
                width: 100%;
                text-align: center;
                box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-result-modal .color-quiz-result-title{
                font-family: "DM Serif Display", serif;
                font-size: 1.75rem;
                margin: 0 0 0.75rem 0;
                color: var(--foreground);
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-result-modal .color-quiz-text{
                font-size: 1rem;
                color: var(--text-secondary);
                margin: 0 0 1.25rem 0;
                line-height: 1.6;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-result-modal .color-quiz-btn{
                padding: 0.65rem 1.5rem;
                font-size: 1rem;
                font-weight: 600;
                font-family: inherit;
                border: none;
                border-radius: var(--radius);
                background: var(--primary);
                color: #fff;
                cursor: pointer;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-result-modal .color-quiz-btn:hover{
                opacity: 0.9;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-confetti{
                position: fixed;
                inset: 0;
                pointer-events: none;
                z-index: 10001;
            }.wpc-scope-82 .tc-wp-tool-root .color-quiz-confetti-piece{
                position: absolute;
                width: 10px;
                height: 10px;
                top: -20px;
                border-radius: 2px;
                animation: confettiDrop 4s ease-out forwards;
            }@keyframes confettiDrop{
                0% {
                    transform: translateY(0) rotate(0deg);
                    opacity: 1;
                }
                100% {
                    transform: translateY(100vh) translateX(var(--dx, 0))
                        rotate(720deg);
                    opacity: 0;
                }
            }.wpc-scope-82 /* tc-layout-guard: stay in page body flow — do not overlap theme header/nav */
.tc-wp-tool-root{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  z-index: 0 !important;
}

.wpc-scope-82 .tc-wp-tool-root .color-quiz-game-title {
	color:black !important;
}