/* Live illustrations retain the supplied drawing and move on the original stage. */
.three-site .character-scene .figurine {
  width: auto;
  height: min(68%, 620px);
  aspect-ratio: 2 / 3;
  min-height: 0;
  max-width: none;
  bottom: 15%;
  transform-origin: 50% 85%;
  filter: none;
}
.three-site .character-scene .figurine::after {
  content: '';
  position: absolute;
  left: 28%; right: 20%; bottom: 3%; height: 2%;
  background: #173f2c25;
  border-radius: 50%;
  filter: blur(8px);
  z-index: -1;
}
.character-full {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.character-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.actor-ready .character-canvas { opacity: 1; }
.actor-ready .character-full { opacity: 0; }
.actor-fallback .character-full { transform-origin: 50% 80%; animation: actor-breathing 4s ease-in-out infinite; }
@keyframes actor-breathing { 0%,100% {transform:rotate(-1deg) translateY(0)} 50% {transform:rotate(1deg) translateY(-5px)} }
.three-site .character-scene .flavor-word {
  top: 29%;
  font-size: clamp(76px, 11vw, 160px);
  letter-spacing: -.025em;
  line-height: 1;
}
.three-site .hero-stage::after { display: none; }
.three-site .hero-bottom { height: 88px; bottom: 18px; }
.three-site .flavor-controls {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 430px;
  height: 88px;
  gap: 10px;
  padding: 0;
}
.three-site .flavor-controls button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 4px;
  min-width: 0;
  min-height: 72px;
  opacity: 1;
  border: 0;
  border-radius: 10px;
  font-size: 12px;
}
.three-site .flavor-controls button img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 6px #173f2c0d;
}
.three-site .flavor-controls button[aria-pressed="true"] { background: #ffffff82; }
.three-site .flavor-controls button[aria-pressed="true"] img { outline: 2px solid var(--ink); outline-offset: 2px; }
.three-site .flavor-controls button:hover { background: #ffffff55; }
.three-site .flavor-controls button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.three-site .flavor-counter { display: none; }
.three-site .carousel-arrows { bottom: 31px; }
.three-site .skip-story { bottom: 40px; }
.three-site .stage-edition { display: none; }
.three-site .closing-friends {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 52%;
  max-width: 570px;
  min-height: 0;
  max-height: none;
  padding: 0;
  flex: 0 1 570px;
}
.three-site .closing-friends img,
.three-site .closing-friends img:nth-child(even) {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 1;
  object-fit: contain;
  margin: 0;
  transform: none;
  border-radius: 12px;
  background: #fff;
}
.three-site .three-closing { gap: clamp(28px, 5vw, 80px); padding-block: 70px; }
.three-site .product-info .round-link { width: auto; min-width: 52px; height: 40px; padding: 0 10px; border-radius: 20px; font: 14px var(--body-font, sans-serif); }
.three-site .catalog-price > a { width: auto; min-width: 48px; height: 36px; padding: 0 8px; flex: 0 0 auto; font-size: 13px; border-radius: 18px; }
.three-site .header-shop { gap: 0; }
.three-site .news-list > a { grid-template-columns: 120px minmax(0, 1fr); }
.three-site .news-list > .all-news { display: inline-flex; }
html:not(.js) .character-scene:not([data-flavor-scene="0"]) { display: none; }
@media (max-width: 1100px) and (min-width: 901px) {
  .three-site .flavor-controls { width: 370px; gap: 4px; }
  .three-site .skip-story > span { font-size: 23px; }
}
@media (max-width: 900px) {
  .three-site .character-scene .figurine {
    height: clamp(220px, calc(100% - 420px), 560px);
    width: auto;
    min-height: 0;
    max-height: none;
    bottom: 281px;
  }
  .three-site .character-scene .flavor-word { top: 24%; font-size: clamp(48px, 16vw, 110px); }
  .character-full { border-radius: 0; box-shadow: none; }
  .three-site .hero-bottom { height: 70px; bottom: 12px; }
  .three-site .flavor-controls { width: min(100%, 450px); height: 70px; gap: 3px; }
  .three-site .flavor-controls button { min-height: 64px; padding: 4px 1px; gap: 5px; font-size: 12px; }
  .three-site .flavor-controls button img { width: 36px; height: 36px; }
  .three-site .carousel-arrows { bottom: 91px; }
  .three-site .skip-story { bottom: 97px; }
  .three-site .skip-story > span { font-size: 19px; }
  .three-site .skip-story small { margin-top: 4px; }
  .three-site .flavor-caption { bottom: 153px; }
}
@media (max-width: 760px) {
  .three-site .closing-friends { width: 100%; max-width: 460px; flex: none; gap: 10px; }
  .three-site .three-closing { padding-block: 40px; gap: 24px; }
  .three-site .closing-copy { padding-top: 0; }
  .three-site .news-list > a { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .three-site .flavor-controls { gap: 2px; }
  .three-site .flavor-controls button { font-size: 11px; }
  .three-site .flavor-caption { bottom: 153px; }
}
@media (min-width: 901px) and (max-height: 720px) {
  .three-site .character-scene .figurine { height: 64%; bottom: 18%; }
  .three-site .flavor-caption { bottom: 118px; }
}
@media (prefers-reduced-motion: reduce) { .actor-fallback .character-full { animation: none; } }