/* Approved direction: semantic outline smileys, not robot heads. */
.ratings button[data-rating="1"]{--icon-rest:#e99b94;--icon-active:#cf443c;--card-tint:#fff0ee}
.ratings button[data-rating="2"]{--icon-rest:#e7b18b;--icon-active:#c87837;--card-tint:#fff4e8}
.ratings button[data-rating="3"]{--icon-rest:#d6c471;--icon-active:#9a7f18;--card-tint:#fffbe7}
.ratings button[data-rating="4"]{--icon-rest:#93cda4;--icon-active:#27934b;--card-tint:#ecf9ef}
.ratings button[data-rating="5"]{--icon-rest:#8acdbb;--icon-active:#16876b;--card-tint:#eaf9f3}
.ratings button{background:#fff;border:1px solid #cfdef3;color:#133870;outline:none;box-shadow:0 3px 10px #1d67bb08;transition:background .2s,border-color .2s,color .2s}
.ratings .rating-icon{display:block;width:46px;height:46px;margin:0 auto 9px;color:var(--icon-rest);transition:color .18s}
.ratings .rating-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor}
.ratings button:is(:hover,:focus-visible) .rating-icon,.ratings button[aria-pressed=true] .rating-icon,.ratings button.demo-hover .rating-icon{color:var(--icon-active)}
.ratings button:is(:hover,:focus-visible):not([aria-pressed=true]){background:#fff;border-color:#cfdef3;color:#133870}
.ratings button[aria-pressed=true]{background:var(--card-tint);border-color:var(--icon-active);color:var(--icon-active);outline:none;box-shadow:0 3px 12px color-mix(in srgb,var(--icon-active) 12%,transparent)}
.ratings button:focus-visible{outline:2px solid #1c7ed8;outline-offset:3px}