.dw-brand-face-host {
  --dw-brand-face-size: 40px;
  --dw-brand-face-head: #f2f1ed;
  --dw-brand-face-ink: #121212;
  --dw-brand-face-cheek: rgba(255, 140, 120, 0.35);
  --dw-brand-face-lens: rgba(255, 255, 255, 0.22);
  --dw-brand-face-sclera: #ffffff;
  --dw-brand-face-pupil: #121212;
  --dw-brand-face-shine: #ffffff;

  display: inline-grid;
  width: var(--dw-brand-face-size);
  height: var(--dw-brand-face-size);
  place-items: center;
  line-height: 0;
}

.dw-brand-face {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dw-brand-face__head {
  fill: var(--dw-brand-face-head);
  stroke: var(--dw-brand-face-ink);
  stroke-width: 2.25;
}

.dw-brand-face__cheek {
  fill: var(--dw-brand-face-cheek);
}

.dw-brand-face__glasses {
  fill: none;
  stroke: var(--dw-brand-face-ink);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dw-brand-face__lens {
  fill: var(--dw-brand-face-lens);
}

.dw-brand-face__sclera {
  fill: var(--dw-brand-face-sclera);
  stroke: var(--dw-brand-face-ink);
  stroke-width: 0.75;
}

.dw-brand-face__pupil {
  fill: var(--dw-brand-face-pupil);
  will-change: transform;
}

.dw-brand-face__shine {
  fill: var(--dw-brand-face-shine);
  pointer-events: none;
}

.dw-brand-face__mouth,
.dw-brand-face__brow {
  fill: none;
  stroke: var(--dw-brand-face-ink);
  stroke-linecap: round;
}

.dw-brand-face__mouth {
  stroke-width: 1.6;
}

.dw-brand-face__brow {
  stroke-width: 1.5;
}

.dw-brand-face-host[data-brand-face-theme="dark"] {
  --dw-brand-face-head: #1a1a1a;
  --dw-brand-face-ink: #f2f1ed;
  --dw-brand-face-cheek: rgba(255, 140, 120, 0.22);
  --dw-brand-face-lens: rgba(255, 255, 255, 0.08);
  --dw-brand-face-pupil: #0a0a0a;
}

@media (prefers-color-scheme: dark) {
  .dw-brand-face-host:not([data-brand-face-theme]) {
    --dw-brand-face-head: #1a1a1a;
    --dw-brand-face-ink: #f2f1ed;
    --dw-brand-face-cheek: rgba(255, 140, 120, 0.22);
    --dw-brand-face-lens: rgba(255, 255, 255, 0.08);
    --dw-brand-face-pupil: #0a0a0a;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dw-brand-face__pupil-wrap {
    transform: none !important;
  }
}