/* Kept beside captureArea so the controls are excluded from image exports. */
.image-style-selector {
  --style-icon-size: clamp(29.04px, 5.6628vh, 46.464px);
  --style-label-gap: 8.712px;
  --style-row-height: calc(var(--style-icon-size) + 11.616px);
  --style-index-color: rgb(0, 67, 255); /* ART at the blue end of its animation. */
  position: absolute;
  z-index: 21;
  right: calc(100% + var(--picture-expand-x, 0px));
  top: 0;
  width: min(162.624px, calc(var(--canvas-side-margin) - 8px));
  display: flex;
  flex-direction: column;
  row-gap: calc(3px / .81); /* Base gap before enlarging the group by 5%. */
  transform: scale(.8505);
  transform-origin: right top;
}
.image-style-button {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--style-icon-size);
  align-items: center;
  gap: var(--style-label-gap);
  width: 100%;
  height: var(--style-row-height);
  flex: none;
  padding: 5.808px var(--layout-gap) 5.808px 0;
  border: 0;
  background: transparent;
  color: #111;
  font: 500 clamp(9px, .8vw, 11px)/1.3 system-ui, "Malgun Gothic", sans-serif;
  cursor: pointer;
}
.image-style-hint {
  position: absolute;
  z-index: 3;
  top: 5.808px;
  right: calc(var(--layout-gap) + var(--style-icon-size) + 14px - 8px / .8505);
  padding: 10px 7px;
  border: 1px solid #d5d0ca;
  border-radius: 7px;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
  color: #4d4d4d;
  font: 400 14px/1.4 system-ui, "Malgun Gothic", sans-serif;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  transform: scale(.783552, .8904); /* Enlarge the current tooltip by 6%. */
  transform-origin: right top;
  pointer-events: none;
}
.image-style-hint::after {
  content: "";
  position: absolute;
  /* Align the arrow tip with the icon center, accounting for the tooltip's scale and border. */
  top: calc(var(--style-icon-size) / 1.7808 - 5px);
  right: -5px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #d5d0ca;
  border-right: 1px solid #d5d0ca;
  background: rgba(255, 255, 255, .6);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: scaleX(2) rotate(45deg);
}
.image-style-selector[data-hint-dismissed="true"] .image-style-hint { display: none; }
.image-style-icon {
  --style-hover-scale: .88;
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  display: block;
  width: var(--style-icon-size);
  height: var(--style-icon-size);
  background: #000;
  filter: grayscale(1);
  transform: translateX(3px) scale(calc(var(--style-art-scale, 1) * var(--style-hover-scale)));
  transform-origin: center;
  transition: filter 240ms ease, transform 240ms ease;
}
.image-style-button:hover .image-style-icon {
  --style-hover-scale: 1;
}
/* Match the visible silhouette area to the cube without changing button slots. */
.image-style-button[data-style-kind="0"] { --style-art-scale: .73; }
.image-style-button[data-style-kind="1"] { --style-art-scale: .73; }
.image-style-button[data-style-kind="4"] { --style-art-scale: .825; }
.image-style-button[data-style-kind="5"] { --style-art-scale: .82; }
.image-style-button[data-style-kind="6"] { --style-art-scale: 1; }
.image-style-button[data-style-kind="7"] { --style-art-scale: .858; }
.image-style-button[data-style-kind="8"] { --style-art-scale: .785; }
.image-style-button[data-style-kind="9"] { --style-art-scale: .86; }
/* Replace the black placeholder with the final artwork inside this span. */
.image-style-icon > img, .image-style-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.image-style-button[data-style-kind="0"] .image-style-icon {
  background: url("../images/style-icons/saekdong-grayscale.jpg") center / contain no-repeat;
  filter: none;
}
.image-style-button[data-style-kind="0"][aria-pressed="true"] .image-style-icon,
.image-style-button[data-style-kind="0"]:hover .image-style-icon {
  background-image: url("../images/style-icons/saekdong-color.jpg");
}
.image-style-button[data-style-kind="1"] .image-style-icon {
  background: url("../images/style-icons/jogakbo-grayscale.svg?v=3") center / contain no-repeat;
  filter: none;
}
.image-style-button[data-style-kind="1"][aria-pressed="true"] .image-style-icon,
.image-style-button[data-style-kind="1"]:hover .image-style-icon {
  background-image: url("../images/style-icons/jogakbo-color.svg?v=3");
}
.image-style-button[data-style-kind="4"] .image-style-icon {
  background: url("../images/style-icons/water-grayscale.svg?v=3") center / contain no-repeat;
  filter: none;
}
.image-style-button[data-style-kind="4"][aria-pressed="true"] .image-style-icon,
.image-style-button[data-style-kind="4"]:hover .image-style-icon {
  background-image: url("../images/style-icons/water-color.svg?v=2");
}
.image-style-button[data-style-kind="9"] .image-style-icon {
  background: url("../images/style-icons/triangle-grayscale.svg") center / contain no-repeat;
  filter: none;
}
.image-style-button[data-style-kind="9"][aria-pressed="true"] .image-style-icon,
.image-style-button[data-style-kind="9"]:hover .image-style-icon {
  background-image: url("../images/style-icons/triangle-color.svg");
}
.image-style-button[data-style-kind="7"] .image-style-icon {
  background: url("../images/style-icons/dancheong-color.png") center / 108.3% no-repeat;
  filter: url("#dancheong-white-opacity") grayscale(1);
}
.image-style-button[data-style-kind="7"]:hover .image-style-icon {
  filter: grayscale(0);
}
.image-style-button[data-style-kind="5"] .image-style-icon {
  background: url("../images/style-icons/bell.png") center / contain no-repeat,
    radial-gradient(circle closest-side, #fff 99%, transparent 100%);
}
.image-style-button[data-style-kind="5"]:hover .image-style-icon {
  filter: grayscale(0);
}
.image-style-button[data-style-kind="5"]:not([aria-pressed="true"]):not(:hover) .image-style-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-color: transparent;
  background-image: url("../images/style-icons/bell.png");
  filter: brightness(.25);
  /* Darken the initial center and final outer area, retaining the vowel rings. */
  mask-image: radial-gradient(circle closest-side, #000 48%, transparent 49%, transparent 78%, #000 79%);
}
.image-style-button[data-style-kind="6"] .image-style-icon {
  background: url("../images/style-icons/cube-grayscale.svg?v=5") center / contain no-repeat;
  filter: none;
}
.image-style-button[data-style-kind="6"][aria-pressed="true"] .image-style-icon,
.image-style-button[data-style-kind="6"]:hover .image-style-icon {
  background-image: url("../images/style-icons/cube-color.svg?v=3");
}
.image-style-button[data-style-kind="8"] .image-style-icon {
  background: url("../images/style-icons/kaleidoscope-grayscale.svg?v=5") center / contain no-repeat;
  filter: none;
}
.image-style-button[data-style-kind="8"][aria-pressed="true"] .image-style-icon,
.image-style-button[data-style-kind="8"]:hover .image-style-icon {
  background-image: url("../images/style-icons/kaleidoscope-color.svg?v=3");
}
.image-style-label {
  position: absolute;
  z-index: 0;
  left: calc(100% - var(--layout-gap) - var(--style-icon-size) / 2 + 3px);
  top: calc(50% + var(--style-icon-size) * var(--style-art-scale, 1) / 2);
  width: max-content;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -.025em;
  opacity: 0;
  transform-origin: center;
  /* Start at the icon center, then slide down into the caption position. */
  transform: translate(-50%, calc(-1 * var(--style-icon-size) * var(--style-art-scale, 1) / 2 - 50%)) scaleX(.96);
  transition: opacity 180ms ease, transform 280ms ease;
}
.image-style-button::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2.0328px;
  background: #b81b22;
  opacity: 0;
  transition: opacity 180ms ease;
}
.image-style-button[aria-pressed="true"] .image-style-icon { filter: grayscale(0); }
.image-style-button[aria-pressed="true"] .image-style-label {
  opacity: 1;
  transform: translate(-50%, 0) scaleX(.96);
}
.image-style-button[aria-pressed="true"]::after { opacity: 1; }
.image-style-button:focus-visible { outline: 2px solid var(--style-index-color); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .image-style-icon, .image-style-label, .image-style-button::after { transition: none; }
}