.face {
  --skin: #c58d62;
  --hair: #31251d;
  --eye: #1d2024;
  --mouth: #6c2b2f;
  --collar: #252a2d;
  --head-w: 52px;
  --head-h: 58px;
  --head-left: 9px;
  --head-top: 8px;
  --head-radius: 12px 12px 16px 16px;
  --eye-left: 23px;
  --eye-right: 23px;
  --eye-top: 33px;
  --eye-w: 8px;
  --eye-h: 8px;
  --left-lens-x: 27px;
  --right-lens-x: 55px;
  --left-lens-left: 19px;
  --right-lens-left: 47px;
  --lens-top: 32px;
  --lens-y: 39px;
  --lens-w: 16px;
  --lens-h: 14px;
  --bridge-w: 10px;
  --monocle-size: 16px;
  --monocle-left: 47px;
  --monocle-top: 31px;
  --brow-left: 18px;
  --brow-right: 18px;
  --brow-top: 27px;
  --brow-w: 14px;
  --brow-h: 4px;
  --left-brow-left: 20px;
  --right-brow-left: 48px;
  --nose-left: 33px;
  --nose-top: 42px;
  --nose-w: 6px;
  --nose-h: 10px;
  --mouth-left: 27px;
  --mouth-top: 57px;
  --mouth-w: 18px;
  --neck-w: 15px;
  --neck-left: 27px;
  --shoulder-w: 56px;
  --shoulder-left: 7px;
  --shoulder-top: 65px;
  --ear-top: 31px;
  --gaze-x: 0px;
  --hair-left: 7px;
  --hair-top: 3px;
  --hair-w: 56px;
  --hair-h: 24px;
  --eye-line: 37px;
  --left-eye-x: 27px;
  --right-eye-x: 49px;
  --mouth-line: 60px;
  --mouth-center: 38px;
  --hair-line: 4px;
  --chin-line: 63px;
  position: relative;
  width: 82px;
  height: 96px;
  image-rendering: auto;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.28));
  border: 1px solid rgba(216, 180, 93, 0.24);
  border-radius: 8px;
  background: rgba(23, 20, 17, 0.28);
  overflow: visible;
}

.portrait-profile {
  scale: 1.12;
  transform-origin: center;
  margin-inline: 0.4rem;
}

.portrait-state-unseen {
  filter: saturate(0.78) brightness(0.9);
}

.portrait-state-followup {
  box-shadow:
    inset 0 0 0 2px rgba(140, 192, 183, 0.48),
    0 0 0 2px rgba(140, 192, 183, 0.12);
}

.portrait-state-resolved {
  filter: saturate(0.72);
}

@media (max-width: 680px) {
  .portrait-profile {
    scale: 1;
    margin-inline: 0;
  }
}

.face-formal {
  transform: translateY(-1px);
}

.face-stylish {
  transform: translateX(1px) rotate(-1deg);
}

.face-practical {
  transform: translateY(1px);
}

.face-eccentric {
  transform: translateX(-1px) rotate(1deg);
}

.pose-lean-left {
  transform: translateX(-2px) rotate(-2deg);
}

.pose-lean-right {
  transform: translateX(2px) rotate(2deg);
}

.pose-slump {
  transform: translateY(2px) rotate(-1deg);
}

.pose-rigid {
  transform: translateY(-2px);
}

.pose-side-eye {
  transform: translateX(-1px) rotate(-1deg);
}

.face::before {
  content: "";
  position: absolute;
  inset: 1px 2px 0;
  border: 2px solid rgba(238, 218, 168, 0.55);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), transparent 45%),
    rgba(78, 63, 43, 0.22);
  border-radius: 6px;
  z-index: 0;
}

.head {
  position: absolute;
  left: var(--head-left);
  top: var(--head-top);
  width: var(--head-w);
  height: var(--head-h);
  background: var(--skin);
  border: 3px solid #171411;
  border-radius: var(--head-radius);
  box-shadow: inset -5px -7px rgba(0,0,0,0.1);
  z-index: 1;
}

.jaw-shade {
  position: absolute;
  left: calc(var(--head-left) + 8px);
  top: calc(var(--chin-line) - 13px);
  width: calc(var(--head-w) - 16px);
  height: 13px;
  border-bottom: 2px solid rgba(45, 27, 21, 0.16);
  border-radius: 0 0 50% 50%;
  z-index: 2;
  pointer-events: none;
}

.shape-lantern .jaw-shade,
.shape-heavy-brow .jaw-shade,
.shape-square .jaw-shade {
  left: calc(var(--head-left) + 5px);
  width: calc(var(--head-w) - 10px);
  border-bottom-color: rgba(45, 27, 21, 0.24);
}

.shape-gaunt .jaw-shade,
.shape-diamond .jaw-shade {
  left: calc(var(--head-left) + 14px);
  width: calc(var(--head-w) - 28px);
}

.neck {
  position: absolute;
  left: var(--neck-left);
  top: 61px;
  width: var(--neck-w);
  height: 14px;
  background: var(--skin);
  border: 3px solid #171411;
  border-top: 0;
  border-radius: 0 0 5px 5px;
  z-index: 1;
}

.shoulders {
  position: absolute;
  left: var(--shoulder-left);
  top: var(--shoulder-top);
  width: var(--shoulder-w);
  height: 14px;
  background: var(--collar);
  border: 3px solid #171411;
  border-radius: 18px 18px 4px 4px;
  z-index: 0;
}

.face-formal .shoulders,
.pose-rigid .shoulders {
  background: #20242a;
  border-radius: 8px 8px 3px 3px;
}

.face-stylish .shoulders {
  background: #2c2431;
  border-radius: 20px 12px 4px 4px;
}

.face-practical .shoulders,
.pose-slump .shoulders {
  background: #2d2b25;
  border-radius: 22px 22px 5px 5px;
}

.face-eccentric .shoulders {
  background: #2b3440;
  border-radius: 12px 24px 4px 4px;
}

.ear {
  position: absolute;
  top: var(--ear-top);
  width: 8px;
  height: 14px;
  background: var(--skin);
  border: 3px solid #171411;
  border-radius: 8px;
  z-index: 1;
}

.ear.left { left: calc(var(--head-left) - 5px); }
.ear.right { left: calc(var(--head-left) + var(--head-w) - 3px); }

.shape-narrow .ear,
.shape-long .ear,
.shape-sharp .ear {
  height: 12px;
}

.shape-broad .ear,
.shape-round .ear {
  height: 16px;
  width: 9px;
}

.hair {
  position: absolute;
  left: var(--hair-left);
  top: var(--hair-top);
  width: var(--hair-w);
  height: var(--hair-h);
  background: var(--hair);
  border: 3px solid #171411;
  box-sizing: border-box;
  z-index: 3;
  --hair-style-transform: rotate(0deg);
  --hair-shape-transform: translate(0, 0) scale(1);
  transform: var(--hair-shape-transform) var(--hair-style-transform);
  transform-origin: 50% 12%;
}

.hair.hair-0 { border-radius: 14px 14px 5px 5px; }
.hair.hair-1 { border-radius: 6px 18px 4px 12px; --hair-style-transform: rotate(-2deg); }
.hair.hair-2 { height: 17px; border-radius: 2px; }
.hair.hair-3 { width: 42px; left: 17px; border-radius: 22px 8px 6px 6px; }
.hair.hair-4 { height: 28px; border-radius: 18px 18px 8px 8px; clip-path: polygon(0 0, 100% 0, 92% 75%, 75% 54%, 57% 82%, 39% 55%, 16% 83%, 5% 58%); }
.hair.hair-5 { height: 40px; top: 4px; border-radius: 18px 18px 12px 12px; clip-path: polygon(0 0, 100% 0, 96% 100%, 76% 82%, 61% 100%, 43% 80%, 25% 100%, 5% 78%); }
.hair.hair-6 { width: 62px; left: 4px; height: 34px; border-radius: 20px 20px 14px 14px; }
.hair.hair-7 { width: 48px; left: 12px; height: 18px; border-radius: 6px 18px 4px 4px; }
.hair.hair-8 { width: 58px; left: 6px; height: 15px; border-radius: 4px; clip-path: polygon(0 0, 100% 0, 88% 100%, 52% 55%, 18% 100%); }
.hair.hair-9 { width: 54px; left: 9px; height: 21px; border-radius: 16px 5px 8px 4px; clip-path: polygon(0 0, 100% 0, 92% 70%, 42% 50%, 22% 100%, 0 75%); }
.hair.hair-10 { width: 60px; left: 5px; height: 32px; border-radius: 20px 20px 8px 8px; clip-path: polygon(0 12%, 18% 0, 38% 18%, 58% 0, 80% 18%, 100% 4%, 92% 100%, 6% 100%); }
.hair.hair-11 { width: 60px; left: 5px; height: 38px; top: 5px; border-radius: 20px 20px 14px 14px; clip-path: polygon(0 0, 100% 0, 100% 80%, 86% 68%, 72% 100%, 54% 72%, 34% 100%, 18% 70%, 0 88%); }
.hair.hair-12 { width: 42px; left: 15px; height: 19px; border-radius: 18px 18px 4px 4px; clip-path: polygon(0 0, 100% 0, 84% 100%, 60% 58%, 40% 58%, 16% 100%); }
.hair.hair-13 { width: 48px; left: 11px; height: 10px; top: 12px; border-radius: 2px; }
.hair.hair-14 { width: 64px; left: 3px; height: 28px; border-radius: 24px 14px 12px 12px; clip-path: polygon(0 18%, 15% 0, 42% 6%, 56% 0, 100% 20%, 90% 82%, 70% 58%, 50% 92%, 28% 56%, 8% 86%); }
.hair.hair-15 { width: 56px; left: 7px; height: 24px; border-radius: 2px 18px 4px 10px; clip-path: polygon(0 0, 100% 0, 100% 64%, 72% 54%, 48% 100%, 24% 56%, 0 78%); }
.hair.hair-16 { border-radius: 28px 28px 12px 12px; clip-path: polygon(0 6%, 22% 0, 50% 8%, 78% 0, 100% 10%, 94% 100%, 78% 82%, 62% 100%, 47% 80%, 30% 100%, 12% 78%, 0 92%); }
.hair.hair-17 { border-radius: 24px 8px 20px 8px; clip-path: polygon(0 8%, 36% 0, 100% 10%, 92% 70%, 72% 60%, 56% 100%, 34% 65%, 14% 94%); }
.hair.hair-18 { border-radius: 16px 24px 8px 18px; clip-path: polygon(0 4%, 100% 0, 92% 100%, 62% 84%, 42% 100%, 20% 76%, 0 84%); }
.hair.hair-19 { border-radius: 30px 30px 20px 20px; clip-path: polygon(0 18%, 18% 0, 42% 12%, 64% 0, 88% 12%, 100% 30%, 84% 100%, 66% 72%, 50% 100%, 34% 72%, 18% 100%); }
.hair.hair-20 { border-radius: 8px 18px 4px 4px; clip-path: polygon(0 0, 100% 0, 90% 82%, 62% 52%, 38% 100%, 12% 66%); }
.hair.hair-21 { border-radius: 4px 4px 18px 18px; clip-path: polygon(0 10%, 28% 0, 70% 0, 100% 18%, 88% 82%, 52% 62%, 18% 100%); }
.hair.hair-22 { height: 14px; border-radius: 16px 16px 4px 4px; clip-path: polygon(0 0, 100% 0, 82% 100%, 64% 66%, 42% 100%, 20% 72%); }
.hair.hair-23 { border-radius: 18px 6px 4px 16px; clip-path: polygon(0 0, 100% 8%, 96% 70%, 76% 54%, 60% 100%, 42% 56%, 20% 86%, 0 64%); }
.hair.hair-24 { border-radius: 26px 12px 18px 10px; clip-path: polygon(0 10%, 30% 0, 72% 7%, 100% 22%, 90% 100%, 70% 74%, 50% 96%, 28% 70%, 8% 100%); }
.hair.hair-25 { border-radius: 18px 28px 10px 22px; clip-path: polygon(0 20%, 20% 0, 52% 10%, 84% 0, 100% 18%, 90% 78%, 74% 68%, 58% 100%, 38% 70%, 18% 96%, 0 72%); }
.hair.hair-26 { border-radius: 8px 24px 6px 18px; clip-path: polygon(0 0, 78% 0, 100% 16%, 92% 62%, 68% 58%, 50% 100%, 32% 58%, 8% 78%); }
.hair.hair-27 { border-radius: 24px 24px 22px 8px; clip-path: polygon(0 12%, 18% 0, 100% 4%, 96% 88%, 72% 62%, 54% 100%, 32% 68%, 8% 96%); }
.hair.hair-28 { border-radius: 4px 18px 5px 5px; clip-path: polygon(0 12%, 18% 0, 100% 0, 90% 84%, 62% 58%, 42% 96%, 18% 60%, 0 78%); }
.hair.hair-29 { border-radius: 22px 6px 18px 4px; clip-path: polygon(0 8%, 52% 0, 100% 12%, 96% 74%, 74% 58%, 56% 100%, 34% 62%, 12% 86%); }
.hair.hair-30 { border-radius: 3px 3px 10px 10px; clip-path: polygon(0 0, 100% 0, 94% 74%, 68% 54%, 42% 76%, 18% 58%, 0 82%); }
.hair.hair-31 { border-radius: 18px 12px 8px 18px; clip-path: polygon(0 4%, 86% 0, 100% 22%, 88% 86%, 62% 64%, 46% 100%, 26% 66%, 0 86%); }

.hair::before,
.hair::after {
  content: "";
  position: absolute;
  display: none;
  background: var(--hair);
  border: 3px solid #171411;
  pointer-events: none;
}

.hair.hair-16::before,
.hair.hair-17::before,
.hair.hair-19::before,
.hair.hair-24::before,
.hair.hair-25::before,
.hair.hair-27::before {
  display: block;
  left: 0;
  top: 9px;
  width: 12px;
  height: 22px;
  border-radius: 10px 3px 12px 8px;
}

.hair.hair-18::after,
.hair.hair-23::after,
.hair.hair-26::after,
.hair.hair-29::after,
.hair.hair-31::after {
  display: block;
  right: 0;
  top: 8px;
  width: 12px;
  height: 20px;
  border-radius: 3px 10px 8px 12px;
}

.hair {
  left: var(--hair-left);
  top: var(--hair-top);
  width: var(--hair-w);
  height: var(--hair-h);
}

.hair.hair-2,
.hair.hair-13,
.hair.hair-22 {
  top: calc(var(--hair-top) + 6px);
  height: max(12px, calc(var(--hair-h) - 12px));
}

.has-hat .hair {
  top: calc(var(--hair-top) + 6px);
  height: calc(var(--hair-h) - 5px);
  opacity: 0.9;
}

.shape-long .hair,
.shape-narrow .hair,
.shape-gaunt .hair,
.shape-high-forehead .hair {
  --hair-shape-transform: translateX(1px) scaleX(0.9);
}

.shape-broad .hair,
.shape-square .hair,
.shape-lantern .hair,
.shape-heavy-brow .hair {
  --hair-shape-transform: scaleX(1.08);
}

.shape-compact .hair,
.shape-pear .hair {
  --hair-shape-transform: translateY(2px) scaleX(1.04);
}

.shape-tired .hair {
  opacity: 0.94;
}

.shape-diamond .hair,
.shape-heart .hair {
  --hair-shape-transform: translateY(-1px) scaleX(0.96);
}

.eye {
  position: absolute;
  top: var(--eye-top);
  width: var(--eye-w);
  height: var(--eye-h);
  background: var(--eye);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
  z-index: 5;
  transform: translateX(var(--gaze-x));
}

.eye.left { left: var(--eye-left); }
.eye.right { right: var(--eye-right); }
.eye.wide { width: calc(var(--eye-w) + 2px); }
.eye.tiny { width: max(5px, calc(var(--eye-w) - 2px)); height: 5px; top: calc(var(--eye-top) + 2px); }
.eye.sleepy { height: 4px; top: calc(var(--eye-top) + 2px); }
.eye.lash::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -2px;
  width: 4px;
  height: 2px;
  background: var(--eye);
  box-shadow: -14px 0 0 var(--eye);
}

.brow {
  position: absolute;
  top: var(--brow-top);
  width: var(--brow-w);
  height: var(--brow-h);
  background: var(--hair);
  z-index: 6;
  transform-origin: 50% 50%;
}

.brow.left { left: var(--left-brow-left); }
.brow.right { left: var(--right-brow-left); }
.brow.angry-left { transform: rotate(13deg); }
.brow.angry-right { transform: rotate(-13deg); }

.expr-suspicious .brow.left,
.expr-irritated .brow.left,
.expr-guarded .brow.left,
.expr-stern .brow.left { transform: rotate(12deg); }
.expr-suspicious .brow.right,
.expr-irritated .brow.right,
.expr-guarded .brow.right,
.expr-stern .brow.right { transform: rotate(-12deg); }
.expr-nervous .brow.left,
.expr-anxious .brow.left,
.expr-worried .brow.left { transform: rotate(-10deg); top: calc(var(--brow-top) - 2px); }
.expr-nervous .brow.right,
.expr-anxious .brow.right,
.expr-worried .brow.right { transform: rotate(10deg); top: calc(var(--brow-top) + 1px); }
.expr-smug .brow.left,
.expr-overconfident .brow.left,
.expr-arrogant .brow.left { transform: rotate(-6deg); }
.expr-smug .brow.right,
.expr-overconfident .brow.right,
.expr-arrogant .brow.right { transform: rotate(-3deg); top: calc(var(--brow-top) - 2px); }
.expr-exhausted .brow,
.expr-detached .brow { height: 3px; opacity: 0.82; }

.expr-stern .brow {
  height: 5px;
}

.pose-side-eye .brow.left {
  width: 16px;
}

.pose-side-eye .brow.right {
  width: 11px;
}

.nose {
  position: absolute;
  top: var(--nose-top);
  left: var(--nose-left);
  width: var(--nose-w);
  height: var(--nose-h);
  background: rgba(0,0,0,0.18);
  border-radius: 0 0 4px 4px;
  z-index: 4;
}

.shape-sharp .nose,
.shape-aristocratic .nose {
  transform: skewX(-8deg);
}

.mouth {
  position: absolute;
  left: var(--mouth-left);
  top: var(--mouth-top);
  width: var(--mouth-w);
  height: 6px;
  border-bottom: 4px solid var(--mouth);
  border-radius: 0 0 16px 16px;
  z-index: 5;
}

.mouth.flat { border-radius: 0; height: 3px; border-bottom-width: 3px; }
.mouth.frown { transform: rotate(180deg); top: 60px; }
.mouth.soft { width: 16px; height: 8px; border-bottom-width: 3px; border-radius: 0 0 12px 12px; }
.mouth.smirk {
  height: 4px;
  border-bottom-width: 3px;
  border-radius: 0 0 16px 6px;
  transform: rotate(-7deg);
}

.eye-bag {
  position: absolute;
  top: calc(var(--eye-top) + 10px);
  width: 10px;
  border-top: 2px solid rgba(58, 37, 28, 0.22);
  z-index: 4;
}

.eye-bag.left { left: calc(var(--eye-left) - 1px); }
.eye-bag.right { right: calc(var(--eye-right) - 1px); }
.expr-exhausted .eye-bag,
.expr-anxious .eye-bag,
.expr-nervous .eye-bag,
.expr-worried .eye-bag {
  border-top-color: rgba(58, 37, 28, 0.38);
}
.expr-smug .eye-bag,
.expr-overconfident .eye-bag {
  opacity: 0.35;
}

.face-detail {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}

.face-detail.mole {
  left: calc(var(--head-left) + var(--head-w) - 15px);
  top: 48px;
  width: 4px;
  height: 4px;
  background: rgba(49, 27, 20, 0.58);
  border-radius: 50%;
}

.face-detail.scar {
  left: calc(var(--head-left) + 12px);
  top: 38px;
  width: 17px;
  height: 3px;
  border-top: 2px solid rgba(112, 52, 48, 0.48);
  transform: rotate(-24deg);
}

.face-detail.wrinkles {
  left: calc(var(--head-left) + 12px);
  top: 23px;
  width: 27px;
  height: 11px;
  border-top: 2px solid rgba(66, 42, 31, 0.24);
  border-bottom: 2px solid rgba(66, 42, 31, 0.18);
}

.face-detail.eye-bags {
  left: calc(var(--head-left) + 11px);
  top: 43px;
  width: calc(var(--head-w) - 22px);
  height: 4px;
  border-top: 2px dashed rgba(58, 37, 28, 0.24);
}

.face-detail.stubble,
.face-detail.beard-shadow {
  left: calc(var(--head-left) + 12px);
  top: 52px;
  width: calc(var(--head-w) - 24px);
  height: 13px;
  background:
    radial-gradient(circle, rgba(31,24,20,0.24) 1px, transparent 1.6px);
  background-size: 6px 5px;
  border-radius: 0 0 12px 12px;
  opacity: 0.48;
}

.face-detail.beard-shadow {
  top: 48px;
  height: 18px;
  opacity: 0.42;
}

.face-detail.freckles {
  left: calc(var(--head-left) + 13px);
  top: 45px;
  width: calc(var(--head-w) - 26px);
  height: 6px;
  background:
    radial-gradient(circle, rgba(70, 42, 28, 0.32) 1px, transparent 1.5px);
  background-size: 8px 4px;
  opacity: 0.58;
}

.face-detail.smile-lines {
  left: calc(var(--mouth-left) - 6px);
  top: calc(var(--mouth-top) - 2px);
  width: calc(var(--mouth-w) + 12px);
  height: 8px;
  border-left: 2px solid rgba(65, 37, 29, 0.24);
  border-right: 2px solid rgba(65, 37, 29, 0.24);
  border-radius: 50%;
}

.face-detail.crooked-nose {
  left: calc(var(--nose-left) + 3px);
  top: calc(var(--nose-top) - 1px);
  width: 7px;
  height: calc(var(--nose-h) + 2px);
  border-left: 2px solid rgba(34, 22, 16, 0.28);
  transform: rotate(9deg);
}

.accessory {
  position: absolute;
  z-index: 8;
}

.accessory.glasses,
.accessory.round-glasses {
  left: var(--left-lens-left);
  top: var(--lens-top);
  width: calc(var(--right-lens-x) - var(--left-lens-x) + var(--lens-w));
  height: var(--lens-h);
  border: 0;
  background: linear-gradient(rgba(17, 17, 17, 0.82), rgba(17, 17, 17, 0.82)) center / var(--bridge-w) 2px no-repeat;
  border-radius: 0;
}

.accessory.round-glasses {
  height: var(--lens-h);
}

.accessory.glasses::before,
.accessory.glasses::after,
.accessory.round-glasses::before,
.accessory.round-glasses::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--lens-w);
  height: var(--lens-h);
  border: 2px solid rgba(17, 17, 17, 0.82);
  box-sizing: border-box;
  background: rgba(238, 218, 168, 0.05);
  border-radius: 5px;
}

.accessory.glasses::before,
.accessory.round-glasses::before {
  left: 0;
}

.accessory.glasses::after,
.accessory.round-glasses::after {
  right: 0;
}

.accessory.round-glasses::before,
.accessory.round-glasses::after {
  border-radius: 999px;
}

.facial-hair {
  position: absolute;
  z-index: 7;
}

.facial-hair.mustache {
  left: calc(var(--mouth-center) - 12px);
  top: calc(var(--mouth-line) - 10px);
  width: 24px;
  height: 6px;
  background: var(--hair);
  border-radius: 50% 50% 46% 46%;
  box-shadow: 0 1px 0 rgba(0,0,0,0.28);
}

.facial-hair.goatee {
  left: calc(var(--mouth-center) - 7px);
  top: calc(var(--mouth-line) + 3px);
  width: 14px;
  height: 10px;
  background: var(--hair);
  border-radius: 30% 30% 50% 50%;
  opacity: 0.86;
}

.facial-hair.beard,
.facial-hair.stubble {
  left: calc(var(--head-left) + 10px);
  top: calc(var(--mouth-line) - 6px);
  width: calc(var(--head-w) - 20px);
  height: calc(var(--chin-line) - var(--mouth-line) + 8px);
  background:
    radial-gradient(circle, rgba(31,24,20,0.26) 1px, transparent 1.7px);
  background-size: 6px 5px;
  border-radius: 0 0 14px 14px;
  opacity: 0.5;
}

.facial-hair.beard {
  background: var(--hair);
  opacity: 0.72;
}

.profession-mark {
  position: absolute;
  z-index: 7;
  pointer-events: none;
}

.profession-mark.rank-bars {
  left: calc(var(--shoulder-left) + 8px);
  top: calc(var(--shoulder-top) + 4px);
  width: 16px;
  height: 5px;
  border-top: 1px solid #d8b45d;
  border-bottom: 1px solid #d8b45d;
}

.profession-mark.lapel-pin,
.profession-mark.leaf-pin,
.profession-mark.ledger-mark,
.profession-mark.driver-badge {
  left: calc(var(--shoulder-left) + var(--shoulder-w) - 13px);
  top: calc(var(--shoulder-top) + 4px);
  width: 6px;
  height: 6px;
  background: #d8b45d;
  border: 1px solid #171411;
  border-radius: 50%;
}

.profession-mark.leaf-pin {
  background: #8cc0b7;
  border-radius: 70% 0 70% 0;
  transform: rotate(-24deg);
}

.profession-mark.pencil {
  left: calc(var(--shoulder-left) + var(--shoulder-w) - 11px);
  top: calc(var(--shoulder-top) + 2px);
  width: 3px;
  height: 11px;
  background: #d8b45d;
  border: 1px solid #171411;
  transform: rotate(14deg);
  transform-origin: center;
}

.profession-mark.apron {
  left: calc(var(--mouth-center) - 11px);
  top: calc(var(--shoulder-top) + 2px);
  width: 22px;
  height: 11px;
  background: rgba(238, 218, 168, 0.68);
  border: 1px solid #171411;
  border-radius: 2px 2px 7px 7px;
}

.profession-mark.stage-star {
  left: calc(var(--shoulder-left) + 8px);
  top: calc(var(--shoulder-top) + 3px);
  width: 9px;
  height: 9px;
  background: #d8b45d;
  clip-path: polygon(50% 0, 62% 34%, 98% 35%, 68% 56%, 80% 92%, 50% 70%, 20% 92%, 32% 56%, 2% 35%, 38% 34%);
}

.profession-mark.bowtie {
  left: calc(var(--mouth-center) - 10px);
  top: calc(var(--shoulder-top) + 1px);
  width: 20px;
  height: 8px;
  background:
    linear-gradient(90deg, #171411 0 10%, transparent 10% 90%, #171411 90%),
    #8e302c;
  clip-path: polygon(0 0, 45% 34%, 50% 50%, 55% 34%, 100% 0, 100% 100%, 55% 66%, 50% 50%, 45% 66%, 0 100%);
}

.profession-mark.ledger-mark {
  border-radius: 2px;
}

.accessory.monocle {
  left: var(--monocle-left);
  top: var(--monocle-top);
  width: var(--monocle-size);
  height: var(--monocle-size);
  border: 2px solid #f6de9b;
  box-sizing: border-box;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #171411;
}

.accessory.monocle::after {
  content: "";
  position: absolute;
  left: 65%;
  top: 68%;
  width: 72%;
  border-top: 2px solid rgba(23,20,17,0.8);
  transform: rotate(48deg);
}

.accessory.scarf {
  left: calc(var(--head-left) + 3px);
  top: calc(var(--chin-line) + 2px);
  width: calc(var(--head-w) - 6px);
  height: 10px;
  background: var(--accent-2);
  border: 3px solid #171411;
  border-radius: 4px;
  z-index: 7;
}

.accessory.hat {
  left: calc(var(--head-left) + 2px);
  top: max(1px, calc(var(--hair-line) - 6px));
  width: calc(var(--head-w) - 4px);
  height: 12px;
  background: #2b2520;
  border: 3px solid #171411;
  border-radius: 12px 12px 4px 4px;
  box-shadow: 0 10px 0 -6px #171411;
  z-index: 9;
}

.accessory.hat::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 10px;
  width: calc(var(--head-w) + 8px);
  border-top: 3px solid #171411;
}

.accessory.necktie {
  left: calc(var(--mouth-center) - 4px);
  top: calc(var(--shoulder-top) + 1px);
  width: 8px;
  height: 11px;
  background: #263c51;
  border: 1px solid #171411;
  clip-path: polygon(50% 0, 100% 28%, 74% 100%, 26% 100%, 0 28%);
}

.accessory.brooch,
.accessory.pearl {
  left: calc(var(--shoulder-left) + var(--shoulder-w) - 12px);
  top: calc(var(--shoulder-top) + 4px);
  width: 6px;
  height: 6px;
  background: #f0d77a;
  border: 1px solid #171411;
  border-radius: 50%;
}

.accessory.pearl {
  left: calc(var(--mouth-center) - 2px);
  top: calc(var(--shoulder-top) + 2px);
  width: 4px;
  height: 4px;
}

.is-victim .face {
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.34)) contrast(1.06);
}

.is-victim .face::before {
  border-color: rgba(238, 218, 168, 0.88);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.12), transparent 46%),
    rgba(92, 67, 45, 0.28);
}

.is-victim .shoulders {
  border-color: #100d0a;
}

.accessory.earrings::before,
.accessory.earrings::after {
  content: "";
  position: absolute;
  top: 38px;
  width: 5px;
  height: 7px;
  background: #f0d77a;
  border: 2px solid #171411;
  border-radius: 50%;
  z-index: 7;
}

.accessory.earrings::before { left: calc(var(--head-left) - 4px); top: calc(var(--ear-top) + 5px); }
.accessory.earrings::after { left: calc(var(--head-left) + var(--head-w) - 1px); top: calc(var(--ear-top) + 5px); }

.is-victim .face::after {
  content: "CASE";
  position: absolute;
  left: 3px;
  top: 68px;
  padding: 0.08rem 0.28rem;
  background: var(--danger);
  color: #fff2ed;
  border: 2px solid #171411;
  font-size: 0.58rem;
  font-weight: 900;
  transform: rotate(-8deg);
}

/* Portrait rendering polish
   The identity generator still owns all geometry and variation. These layers
   give those shapes a softer, illustrated finish without introducing assets. */
.portrait-card {
  scale: 1.14;
  transform-origin: top center;
  margin-top: 0.18rem;
}

.portrait-profile {
  scale: 1.24;
}

.face {
  border: 1px solid rgba(238, 218, 168, 0.38);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 34%, rgba(218, 190, 124, 0.18), transparent 45%),
    linear-gradient(155deg, rgba(255,255,255,0.07), transparent 38%),
    #24231f;
  box-shadow:
    inset 0 0 0 1px rgba(8, 7, 6, 0.72),
    inset 0 0 24px rgba(0,0,0,0.35),
    0 5px 12px rgba(0,0,0,0.2);
  filter: none;
}

.face::before {
  inset: 3px;
  border: 1px solid rgba(238, 218, 168, 0.55);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.06), transparent 38%, rgba(0,0,0,0.08)),
    rgba(78, 63, 43, 0.14);
  box-shadow: inset 0 0 0 1px rgba(18, 15, 12, 0.42);
}

.portrait-state-unseen {
  filter: saturate(0.9) brightness(0.96);
}

.portrait-state-resolved {
  filter: saturate(0.82);
}

.head {
  border: 1.5px solid rgba(42, 29, 23, 0.92);
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,0.16), transparent 28%),
    linear-gradient(105deg, transparent 58%, rgba(54,31,24,0.13) 100%),
    var(--skin);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.06),
    inset -3px -6px 7px rgba(54,31,24,0.13),
    0 2px 3px rgba(0,0,0,0.16);
}

.head::before,
.head::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.head::before {
  left: 7%;
  top: 43%;
  width: 86%;
  height: 34%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 16% 52%, rgba(155,75,58,0.12), transparent 24%),
    radial-gradient(circle at 84% 52%, rgba(155,75,58,0.12), transparent 24%);
}

.head::after {
  right: 8%;
  bottom: 7%;
  width: 42%;
  height: 16%;
  border-bottom: 1px solid rgba(55,31,24,0.12);
  border-radius: 50%;
}

.jaw-shade {
  border-bottom-width: 1px;
  opacity: 0.7;
}

.neck {
  border: 1.5px solid rgba(42, 29, 23, 0.88);
  border-top: 0;
  background:
    linear-gradient(90deg, rgba(69,38,27,0.18), transparent 35%, rgba(255,255,255,0.08) 62%, rgba(69,38,27,0.22)),
    var(--skin);
  box-shadow: inset 0 -3px 4px rgba(45,24,18,0.16);
}

.shoulders {
  border: 1.5px solid rgba(22, 19, 17, 0.9);
  background:
    linear-gradient(115deg, rgba(255,255,255,0.13), transparent 34%, rgba(0,0,0,0.22)),
    var(--collar);
  box-shadow: inset 0 2px rgba(255,255,255,0.06);
}

.face-formal .shoulders,
.pose-rigid .shoulders,
.face-stylish .shoulders,
.face-practical .shoulders,
.pose-slump .shoulders,
.face-eccentric .shoulders {
  background-image: linear-gradient(115deg, rgba(255,255,255,0.14), transparent 36%, rgba(0,0,0,0.22));
}

.ear {
  border: 1.5px solid rgba(42, 29, 23, 0.82);
  background:
    linear-gradient(105deg, rgba(255,255,255,0.1), rgba(72,38,27,0.16)),
    var(--skin);
  box-shadow: inset 0 0 0 1px rgba(91,48,35,0.12);
}

.hair {
  border: 1.5px solid rgba(28, 21, 18, 0.9);
  background:
    linear-gradient(155deg, rgba(255,255,255,0.18), transparent 28%, rgba(0,0,0,0.22) 78%),
    var(--hair);
  box-shadow:
    inset 0 1px rgba(255,255,255,0.1),
    0 2px 3px rgba(0,0,0,0.14);
}

.hair::before,
.hair::after {
  border-width: 1.5px;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.14), transparent 40%, rgba(0,0,0,0.2)),
    var(--hair);
}

.eye {
  height: 4px;
  background: var(--eye);
  border: 0;
  border-radius: 55% 55% 48% 48%;
  box-sizing: border-box;
  box-shadow:
    inset 1px 1px rgba(255,255,255,0.26),
    0 1px 0 rgba(50,30,23,0.22);
  transform: none;
  overflow: visible;
}

.eye::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1px;
  width: 1.5px;
  height: 1.5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.62);
  box-shadow: none;
  transform: none;
}

.eye.wide {
  height: 5px;
}

.eye.tiny,
.eye.sleepy {
  height: 3px;
}

.eye.sleepy {
  border-radius: 50%;
  box-shadow: 0 1px 0 rgba(50,30,23,0.2);
}

.eye.lash::after {
  right: -2px;
  top: -1px;
  width: 2px;
  height: 1px;
  border-radius: 2px;
  box-shadow: -10px 0 0 var(--eye);
}

.brow {
  height: max(2px, calc(var(--brow-h) - 1px));
  border-radius: 70% 35% 40% 20%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1), transparent 50%),
    var(--hair);
  box-shadow: 0 1px rgba(25,17,14,0.18);
}

.nose {
  width: calc(var(--nose-w) + 1px);
  background: transparent;
  border-left: 1px solid rgba(68,39,29,0.32);
  border-bottom: 1.5px solid rgba(68,39,29,0.38);
  border-radius: 0 0 55% 45%;
  box-sizing: border-box;
  filter: drop-shadow(1px 0 rgba(255,255,255,0.06));
}

.mouth {
  height: 5px;
  border-bottom-width: 1.5px;
  border-radius: 0 0 60% 55%;
  filter: drop-shadow(0 1px rgba(53,25,22,0.16));
}

.mouth.flat {
  height: 2px;
  border-bottom-width: 1.5px;
  border-radius: 45%;
}

.mouth.frown {
  border-bottom-width: 1.5px;
}

.mouth.soft,
.mouth.smirk {
  border-bottom-width: 1.5px;
}

.eye-bag {
  border-top-width: 1px;
  opacity: 0.78;
}

.accessory.glasses::before,
.accessory.glasses::after,
.accessory.round-glasses::before,
.accessory.round-glasses::after {
  border-width: 1px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.1), transparent 45%),
    rgba(238, 218, 168, 0.015);
  box-shadow: 0 1px 1px rgba(0,0,0,0.14);
}

.accessory.glasses,
.accessory.round-glasses {
  background-size: var(--bridge-w) 1px;
}

.accessory.monocle {
  border-width: 1px;
  box-shadow: 0 0 0 1px rgba(23,20,17,0.55);
}

.accessory.monocle::after {
  border-top-width: 1px;
}

.accessory.scarf,
.accessory.hat {
  border-width: 1.5px;
}

.accessory.hat {
  box-shadow: 0 9px 0 -7px rgba(23,20,17,0.9);
}

.accessory.hat::after {
  border-top-width: 1.5px;
}

.accessory.earrings::before,
.accessory.earrings::after {
  border-width: 1px;
}

.expr-stern .brow {
  height: 3px;
}

@media (max-width: 680px) {
  .portrait-card {
    scale: 1.06;
  }

  .portrait-profile {
    scale: 1.1;
  }
}