.d-flex[data-v-21c78b89]{display:flex}.flex-wrap[data-v-21c78b89]{flex-wrap:wrap}.screen-test__controls h3[data-v-21c78b89]{font-size:20px;font-weight:700;color:#17445c}.screen-test__controls .text-gray[data-v-21c78b89]{color:#7993a5;font-size:14px}.color-grid[data-v-21c78b89]{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}@media(max-width:576px){.color-grid[data-v-21c78b89]{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}}.color-swatch[data-v-21c78b89]{height:80px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 8px #0000001a;border:1px solid rgba(0,0,0,.05)}.color-swatch[data-v-21c78b89]:hover{transform:translateY(-3px);box-shadow:0 6px 16px #00000026}.color-swatch .swatch-label[data-v-21c78b89]{color:#fff;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none}.color-swatch .swatch-label.dark-text[data-v-21c78b89]{color:#333;text-shadow:0 1px 3px rgba(255,255,255,.8)}.color-swatch.is-pattern .swatch-label[data-v-21c78b89]{background:#0009;padding:4px 8px;border-radius:4px;color:#fff;text-shadow:none}.fullscreen-tester[data-v-21c78b89]{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999;cursor:pointer;display:flex;align-items:center;justify-content:center}.fullscreen-tester .screen-hint[data-v-21c78b89]{background:#0009;color:#fff;padding:16px 32px;border-radius:8px;text-align:center;font-size:18px;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.fullscreen-tester .screen-hint p[data-v-21c78b89]{margin:0 0 8px}.fullscreen-tester .screen-hint p[data-v-21c78b89]:last-child{margin:0}.fade-enter-active[data-v-21c78b89],.fade-leave-active[data-v-21c78b89]{transition:opacity .5s ease}.fade-enter-from[data-v-21c78b89],.fade-leave-to[data-v-21c78b89]{opacity:0}