.types{background:#eee6d8;color:var(--ink)}
.types .eyebrow,.type small{color:var(--clay)}
.type{background:var(--paper);border-color:#d8cfc0;box-shadow:0 12px 32px #4b352010}
.type:hover{background:#fff;box-shadow:0 18px 38px #4b352020}
.type .ico{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#f2dfca;filter:drop-shadow(0 4px 5px #6e482030)}
.preview,.result-head{background:#292332}
.preview .animal,.result-hero .animal{display:inline-grid;place-items:center;width:112px;height:112px;border-radius:50%;background:#fff8e8;box-shadow:0 0 0 10px #ffffff12,0 18px 45px #0004}
.preview .code,.result-code{color:#fffdf8}
.result-tag{color:#d9cfdc}
.test{background:#ffefd5;color:var(--ink)}
.test .brand{color:var(--ink)}
.test .brand i{border-color:#bda98c;background:#fff8e8}
.test .count,.test .back{color:#776b59}
.test .progress{background:#dfcfb6}
.test .bar{background:var(--clay)}
.test .answer{background:#fffaf1;color:var(--ink);border-color:#dcc9aa;box-shadow:0 12px 28px #6d4b2012}
.test .answer b{color:var(--clay)}
.test .answer:hover{background:var(--clay);color:#fff;border-color:var(--clay);box-shadow:0 16px 32px #c9664535}
.test .answer:hover b{color:#ffe8c7}
.share .dark{background:#25d366;color:#102b1b;box-shadow:0 10px 24px #25d36640}
.share .dark:before{content:'◉';font-size:16px;margin-right:8px}
.share .dark:hover{background:#20bd5a}