.pose-guide {
  display: grid;
  gap: 8px;
  padding: 10px;
  color: #30261e;
  background: #fffdf6;
  border: 1px solid #b8a68c;
  border-radius: 14px;
  font: 500 14px/1.4 Rounded, sans-serif;
}
body .pose-guide h2 {
  margin: 0 0 2px;
  font: 800 17px/1.4 Rounded,sans-serif !important;
  letter-spacing: -.045em;
}
.pose-guide b { font-weight: 800; }
.rail-right > .pose-guide { margin-top: 14px; }
.art {
  position: relative;
  display: block;
  flex: none;
  width: min(var(--art-max-w,92px), calc(var(--art-max-h,76px) * (var(--art-ratio))));
  aspect-ratio: var(--art-ratio);
}
.art img {
  position: absolute;
  display: block;
  top: var(--art-top);
  left: var(--art-left);
  width: var(--art-width);
  height: auto;
  max-width: none;
  user-select: none;
  pointer-events: none;
}
.art-stage {
  display: grid;
  place-items: center;
  isolation: isolate;
  position: relative;
}
@property --guide-rays-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.action-card { overflow: hidden; border: 1px solid #b8a68c; border-radius: 8px; }
.action-card summary {
  --guide-split-angle: 108deg;
  --guide-split-edge: 48%;
  --guide-left: #fffdf6;
  isolation: isolate;
  display: grid;
  position: relative;
  grid-template-columns: minmax(0,1fr) 70px 11px;
  align-items: center;
  min-height: 59px;
  padding: 0 7px 0 9px;
  gap: 3px;
  overflow: hidden;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(var(--guide-split-angle), var(--guide-left) var(--guide-split-edge), var(--tone) var(--guide-split-edge));
}
.action-card summary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-conic-gradient(from var(--guide-rays-angle, 0deg) at calc(100% - 56px) 50%,
    #fff6 0deg 10deg, transparent 10deg 22.5deg);
  mask-image: linear-gradient(var(--guide-split-angle), transparent var(--guide-split-edge), #000 var(--guide-split-edge));
  animation: guide-rays-turn 16s linear infinite;
}
@keyframes guide-rays-turn {
  to { --guide-rays-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .action-card summary::before { animation: none; }
}
.action-card summary::-webkit-details-marker { display: none; }
.action-card summary b { position: relative; z-index: 1; }
.action-card summary:focus-visible { outline: 2px solid var(--edge); outline-offset: -2px; }
.action-card summary .art-stage { height: 59px; --art-max-w: 70px; --art-max-h: 57px; transform: rotate(-5deg); }
.action-card:nth-of-type(even) summary .art-stage { transform: rotate(4deg); }
.action-card[open] summary { --guide-left: color-mix(in srgb, var(--tone) 45%, #fffdf6); }
.chev { width: 6px; height: 6px; border: solid #55463a; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.action-card[open] .chev { transform: translateY(1px) rotate(225deg); }
.guide-items { margin: 0; padding: 0 9px; list-style: none; }
.guide-items li { display: flex; min-height: 31px; align-items: center; justify-content: space-between; gap: 4px; }
.guide-items li + li { border-top: 1px solid #e0d2be; }
body .pose-guide .guide-items :is(a, span, small) { font-size: 12px !important; }
.guide-items a { display: flex; justify-content: space-between; align-items: center; width: 100%; color: #265e65; font-weight: 800; text-decoration: none; }
.guide-items small { color: #55463a; white-space: nowrap; }


/* Keep the guide reachable in shorter desktop viewports. */
@media (min-width: 1000px) {
  .rail-right {
    max-block-size: calc(100dvh - 44px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.guide-items a { min-height: 31px; padding-block: 6px; gap: 6px; }
.guide-items a > span[aria-hidden="true"] { flex: none; }
.guide-items a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* Fit the shared cap badge to each portrait's crown. */
.art[data-guide-pose]::after {
  content: "";
  position: absolute;
  left: var(--badge-x);
  top: var(--badge-y);
  width: var(--badge-size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(var(--badge-tilt)) scaleX(var(--badge-width));
  background: url("./assets/ea-badge-original.webp") center / contain no-repeat;
  mask: url("./assets/ea-hat-badge-v1.webp") center / contain no-repeat;
  pointer-events: none;
}
.art[data-guide-pose="researcher"] { --badge-x: 54.5%; --badge-y: 23%; --badge-size: 16%; --badge-tilt: 13deg; --badge-width: .85; }
.art[data-guide-pose="writer"] { --badge-x: 70.7%; --badge-y: 14%; --badge-size: 19%; --badge-tilt: 17deg; --badge-width: .82; }
.art[data-guide-pose="analyst"] { --badge-x: 55.7%; --badge-y: 10.4%; --badge-size: 16%; --badge-tilt: -17deg; --badge-width: .9; }
.art[data-guide-pose="engineer"] { --badge-x: 66.9%; --badge-y: 13.3%; --badge-size: 18%; --badge-tilt: 15deg; --badge-width: .83; }
.art[data-guide-pose="broker"] { --badge-x: 69.7%; --badge-y: 14.9%; --badge-size: 19%; --badge-tilt: 15deg; --badge-width: .85; }