@font-face {
  font-family: "DynaPuff";
  src: url("../fonts/dynapuff/dynapuff-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --sky: #73b9ea;
  --deep-sky: #4d9edb;
  --cloud: #f6f8fa;
  --warm: #fff6f0;
  --ink: #1f2a2e;
  --muted-ink: #607078;
  --pink: #f3a6b8;
  --cream: #f4e8cf;
  --butter: #f1d46c;
  --mint: #a6cda7;
  --lavender: #c8b8e8;
  --tomato: #eb6d58;
  --leaf: #6d8c52;
  --content: min(1320px, calc(100vw - 96px));
  --display: "DynaPuff", "Trebuchet MS", "Arial Rounded MT Bold", sans-serif;
  --ui: "Avenir Next", "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  --hand: "Segoe Print", "Bradley Hand", cursive;
  color: var(--ink);
  background: var(--warm);
  font-family: var(--ui);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--warm);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--warm);
  color: var(--ink);
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  color: var(--ink);
  background: #fff;
  border-radius: 999px;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 50%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: var(--content);
  min-height: 84px;
  color: #fff;
  transform: translateX(-50%);
  transition: color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.site-header.is-scrolled {
  position: fixed;
  width: 100%;
  padding: 0 max(24px, calc((100vw - 1320px) / 2));
  color: var(--ink);
  background: rgba(255, 246, 240, 0.9);
  box-shadow: 0 1px 0 rgba(31, 42, 46, 0.08);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.wordmark {
  width: max-content;
  color: inherit;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
  text-decoration: none;
}

.site-nav,
.header-tools,
.site-footer nav {
  display: flex;
  align-items: center;
}

.site-nav {
  gap: 30px;
  font-size: 13px;
}

.site-nav a,
.site-footer a {
  text-decoration: none;
}

.site-nav a {
  opacity: 0.82;
  transition: opacity 140ms ease, transform 140ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

.header-tools {
  justify-content: flex-end;
  gap: 14px;
  font-size: 12px;
}

.icon-button,
.language-toggle,
.sound-toggle,
.menu-button {
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.icon-button {
  display: grid;
  width: 26px;
  height: 26px;
  padding: 4px;
  place-items: center;
}

.icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.language-toggle {
  padding: 5px 2px;
  letter-spacing: 0.06em;
}

.sound-toggle {
  padding: 6px 8px;
  color: inherit;
  font-size: 11px;
  letter-spacing: 0.02em;
  opacity: 0.78;
}

.sound-toggle[aria-pressed="true"] {
  opacity: 1;
}

.header-cta,
.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.header-cta {
  position: relative;
  min-height: 38px;
  padding: 0 16px;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.header-cta:hover,
.header-cta:focus-visible,
.pill-button:hover,
.pill-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(31, 42, 46, 0.13);
}

.header-cta__peek {
  position: absolute;
  right: 8px;
  display: grid;
  width: 16px;
  height: 16px;
  color: var(--pink);
  background: var(--pink);
  border-radius: 50%;
  place-items: center;
  font-size: 7px;
  transform: translateX(22px);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
}

.header-cta:hover .header-cta__peek,
.header-cta:focus-visible .header-cta__peek {
  transform: translateX(0);
}

.menu-button {
  display: none;
  width: 34px;
  height: 34px;
  padding: 8px;
}

.menu-button span {
  display: block;
  height: 1px;
  margin: 5px 0;
  background: currentColor;
  transition: transform 180ms ease;
}

.search-panel {
  position: fixed;
  z-index: 18;
  top: 84px;
  right: max(24px, calc((100vw - 1320px) / 2));
  width: min(360px, calc(100vw - 48px));
  padding: 18px;
  color: var(--ink);
  background: rgba(255, 246, 240, 0.97);
  border: 1px solid rgba(31, 42, 46, 0.12);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(31, 42, 46, 0.18);
}

.search-panel__form label {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 700;
}

.search-panel__field {
  display: flex;
  gap: 8px;
}

.search-panel__field input {
  min-width: 0;
  flex: 1;
  padding: 11px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(31, 42, 46, 0.16);
  border-radius: 999px;
  outline: none;
}

.search-panel__field input:focus {
  border-color: var(--deep-sky);
  box-shadow: 0 0 0 3px rgba(77, 158, 219, 0.2);
}

.search-panel__field button {
  padding: 0 16px;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  cursor: pointer;
}

.search-panel p {
  margin: 11px 0 0;
  color: var(--muted-ink);
  font-size: 12px;
}

.hero,
.world,
.sunset {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero {
  min-height: min(860px, 100vh);
  height: min(860px, 100vh);
  color: #fff;
  background: var(--sky);
}

.hero__art,
.world__art,
.sunset__art,
.hero__atmosphere,
.world__atmosphere,
.sunset__atmosphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__art,
.world__art,
.sunset__art {
  z-index: -3;
  object-fit: cover;
  object-position: center;
  transition: transform 1s cubic-bezier(.2,.8,.2,1), filter 700ms ease;
  will-change: transform;
}

.hero__art {
  object-position: center center;
  animation: art-breathe 8s ease-in-out infinite;
}

.hero-pom.is-blinking {
  animation: pom-blink 180ms ease-in-out;
}

.hero__atmosphere {
  z-index: -2;
  background: linear-gradient(90deg, rgba(55, 129, 194, 0.26), transparent 49%, rgba(255, 255, 255, 0.04)), linear-gradient(180deg, rgba(255,255,255,0.04), transparent 62%, rgba(32, 96, 144, 0.18));
}

.hero__copy {
  position: relative;
  z-index: 3;
  width: min(430px, 34vw);
  margin-left: max(48px, calc((100vw - 1320px) / 2));
  padding-top: clamp(160px, 21vh, 220px);
}

.hero h1,
.world h2,
.sunset h2,
.builder h2,
.gallery h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.07em;
}

.hero h1 {
  max-width: 450px;
  font-size: clamp(62px, 7.4vw, 108px);
  line-height: 0.91;
}

.hero h1 span {
  color: #fff;
}

.hero__copy > p {
  margin: 28px 0 22px;
  font-size: 17px;
  line-height: 1.65;
  text-shadow: 0 1px 16px rgba(33, 93, 139, 0.22);
}

.pill-button {
  min-height: 48px;
  padding: 0 19px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.pill-button--light {
  color: var(--ink);
  background: #fff;
}

.pill-button--dark {
  color: #fff;
  background: var(--ink);
}

.scroll-cue {
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  margin-top: 30px;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  opacity: 0.88;
}

.scroll-cue__line {
  display: block;
  width: 1px;
  height: 29px;
  background: currentColor;
  opacity: 0.8;
}

.hero__note,
.world__note,
.sunset__note {
  font-family: var(--hand);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

.hero__note {
  position: absolute;
  z-index: 3;
  top: 31%;
  right: max(42px, calc((100vw - 1320px) / 2));
  transform: rotate(-7deg);
}

.hero__note b,
.world__note b,
.sunset__note b {
  display: block;
  margin-top: 8px;
  font-size: 26px;
  font-weight: 400;
}

.hero-pom {
  position: absolute;
  z-index: 4;
  top: 46%;
  left: 58.5%;
  width: clamp(135px, 13vw, 205px);
  transform: translate3d(var(--pom-x, 0px), var(--pom-y, 0px), 0);
  animation: pom-breathe 3.1s ease-in-out infinite;
  cursor: pointer;
  filter: drop-shadow(0 18px 16px rgba(56, 74, 51, 0.23));
  will-change: transform;
}

.hero-pom img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-pom.is-bouncing {
  animation: pom-hop 620ms cubic-bezier(.2,.8,.2,1);
}

.hero__cloud {
  position: absolute;
  z-index: -1;
  display: block;
  width: 180px;
  height: 45px;
  background: rgba(255, 255, 255, 0.54);
  border-radius: 999px;
  filter: blur(5px);
  opacity: 0.75;
  pointer-events: none;
}

.hero__cloud::before,
.hero__cloud::after {
  position: absolute;
  bottom: 8px;
  background: inherit;
  border-radius: 50%;
  content: "";
}

.hero__cloud::before {
  left: 30px;
  width: 68px;
  height: 68px;
}

.hero__cloud::after {
  right: 26px;
  width: 48px;
  height: 48px;
}

.hero__cloud--one {
  top: 22%;
  left: 28%;
  animation: cloud-drift-one 27s ease-in-out infinite alternate;
}

.hero__cloud--two {
  top: 68%;
  left: 8%;
  width: 140px;
  transform: scale(.75);
  animation: cloud-drift-two 20s ease-in-out infinite alternate;
}

.hero__cloud--three {
  top: 14%;
  right: 3%;
  width: 135px;
  transform: scale(.6);
  animation: cloud-drift-three 34s ease-in-out infinite alternate;
}

.hero__flower {
  position: absolute;
  z-index: 1;
  color: #fff5a7;
  font-size: 26px;
  text-shadow: 0 5px 10px rgba(92, 139, 75, 0.35);
}

.hero__flower--one {
  right: 18%;
  bottom: 17%;
  animation: flower-sway 3.4s ease-in-out infinite;
}

.hero__flower--two {
  right: 31%;
  bottom: 13%;
  color: #f6c3d0;
  font-size: 19px;
  animation: flower-sway 4.1s ease-in-out infinite reverse;
}

.section--warm {
  background: var(--warm);
}

.section-kicker {
  margin: 0 0 13px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.section-lead {
  color: #526168;
  font-size: 16px;
  line-height: 1.8;
}

.builder {
  display: grid;
  grid-template-columns: minmax(270px, .72fr) minmax(0, 1.5fr);
  align-items: center;
  gap: clamp(34px, 6vw, 110px);
  min-height: 780px;
  padding: 105px max(48px, calc((100vw - 1320px) / 2));
}

.builder h2,
.gallery h2 {
  color: var(--ink);
  font-size: clamp(48px, 5.2vw, 76px);
  line-height: .98;
}

.builder__copy {
  align-self: start;
  padding-top: 24px;
}

.builder__copy > .pill-button {
  margin-top: 17px;
}

.builder__status {
  max-width: 240px;
  min-height: 42px;
  margin: 20px 0 0;
  color: var(--muted-ink);
  font-size: 12px;
  line-height: 1.5;
}

.builder__workspace {
  display: grid;
  grid-template-columns: minmax(270px, 1fr) minmax(300px, 1.08fr);
  align-items: center;
  gap: 30px;
}

.builder__visual {
  position: relative;
  display: grid;
  min-height: 500px;
  place-items: center;
  border-radius: 34px;
  outline: none;
}

.builder__visual:focus-visible {
  box-shadow: 0 0 0 4px rgba(77, 158, 219, .3);
}

.builder__halo {
  position: absolute;
  width: min(100%, 390px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(243, 166, 184, .30), rgba(255, 246, 240, 0) 68%);
  border-radius: 50%;
}

.builder-pom {
  position: relative;
  z-index: 2;
  width: min(100%, 340px);
  transform-origin: center bottom;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), filter 220ms ease;
  animation: builder-idle 3.3s ease-in-out infinite;
  cursor: grab;
}

.builder-pom:active {
  cursor: grabbing;
}

.builder-pom.is-recoloring {
  animation: color-pop 440ms cubic-bezier(.2,.8,.2,1);
}

.builder-pom.is-dragging {
  transform: translateY(-12px) rotate(-3deg) scale(1.06, .98);
}

.builder-pom.is-satisfied {
  animation: satisfied 620ms cubic-bezier(.2,.8,.2,1);
}

.builder-pom.is-blinking .builder-pom__face i {
  transform: scaleY(.08) !important;
}

.builder-pom[data-personality="calm"] { animation-duration: 5.6s; }
.builder-pom[data-personality="playful"] { animation-name: playful-idle; }
.builder-pom[data-personality="curious"] { animation-name: curious-idle; }
.builder-pom[data-personality="sleepy"] { animation-name: sleepy-idle; animation-duration: 5.8s; }
.builder-pom[data-personality="brave"] { animation-name: brave-idle; }
.builder-pom[data-personality="foodie"] { animation-name: foodie-idle; }

.builder-pom__image {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--fur-filter, none);
  transition: filter 220ms ease;
}

.builder-pom[data-color="white"] {
  --fur-filter: saturate(.15) brightness(1.16) contrast(.93);
  --pom-light: #fffaf2;
}

.builder-pom[data-color="pink"] {
  --fur-filter: none;
  --pom-light: #f8c0cc;
}

.builder-pom[data-color="sky"] {
  --fur-filter: hue-rotate(148deg) saturate(.55) brightness(1.08);
  --pom-light: #c9e4ef;
}

.builder-pom[data-color="butter"] {
  --fur-filter: hue-rotate(318deg) saturate(.56) brightness(1.13);
  --pom-light: #f5dc8b;
}

.builder-pom[data-color="mint"] {
  --fur-filter: hue-rotate(94deg) saturate(.56) brightness(1.07);
  --pom-light: #c3dfc6;
}

.builder-pom[data-color="lavender"] {
  --fur-filter: hue-rotate(218deg) saturate(.43) brightness(1.07);
  --pom-light: #d9ceef;
}

.builder-pom__face {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.builder-pom__face i {
  position: absolute;
  top: 41.4%;
  display: block;
  width: 10.5%;
  aspect-ratio: .82;
  background: radial-gradient(circle at 34% 28%, #fff 0 7%, transparent 8%), #20282b;
  border-radius: 50%;
  box-shadow: 0 3px 5px rgba(31,42,46,.18);
  transition: all 180ms ease;
}

.builder-pom__face i:first-child {
  left: 35.6%;
}

.builder-pom__face i:nth-child(2) {
  left: 54.8%;
}

.builder-pom__face b {
  position: absolute;
  top: 52.2%;
  left: 47.1%;
  width: 6%;
  height: 3.5%;
  border-bottom: 3px solid #2d2829;
  border-radius: 0 0 50% 50%;
  transition: all 180ms ease;
}

.builder-pom[data-eye="sleepy"] .builder-pom__face i {
  top: 44%;
  height: 2.5%;
  background: transparent;
  border-top: 3px solid #20282b;
  border-radius: 50%;
  box-shadow: none;
}

.builder-pom[data-eye="happy"] .builder-pom__face i {
  top: 43%;
  height: 8%;
  background: transparent;
  border-top: 4px solid #20282b;
  border-radius: 50% 50% 0 0;
  box-shadow: none;
}

.builder-pom[data-eye="sparkle"] .builder-pom__face i {
  display: grid;
  width: 13%;
  height: 13%;
  background: #20282b;
  place-items: center;
}

.builder-pom[data-eye="sparkle"] .builder-pom__face i::after {
  color: #fff;
  content: "✦";
  font-size: 16px;
}

.builder-pom[data-eye="curious"] .builder-pom__face i:first-child {
  top: 40%;
  transform: scale(1.16);
}

.builder-pom[data-eye="curious"] .builder-pom__face i:nth-child(2) {
  top: 44%;
  transform: scale(.82);
}

.builder-pom[data-eye="shy"] .builder-pom__face i {
  top: 44%;
  width: 8%;
  height: 5%;
  background: transparent;
  border-top: 3px solid #20282b;
  border-radius: 50%;
  box-shadow: none;
}

.builder-pom[data-eye="shy"] .builder-pom__face::after {
  position: absolute;
  top: 48%;
  left: 32%;
  width: 35%;
  height: 8%;
  background: linear-gradient(90deg, rgba(236, 109, 88, .32), transparent 22% 78%, rgba(236, 109, 88, .32));
  border-radius: 50%;
  content: "";
}

.builder-pom__mood {
  position: absolute;
  z-index: 5;
  top: 23%;
  right: 16%;
  color: var(--tomato);
  font-size: 20px;
  opacity: 0;
  transform: scale(.6) rotate(-10deg);
  transition: opacity 180ms ease, transform 180ms ease;
}

.builder-pom.is-satisfied .builder-pom__mood,
.builder-pom[data-personality="playful"] .builder-pom__mood {
  opacity: .72;
  transform: scale(1) rotate(8deg);
}

.builder-pom__accessory {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}

.builder-pom__accessory--leaf,
.builder-pom__accessory--beanie {
  top: -4%;
  left: 22%;
  width: 58%;
  height: 27%;
  border-radius: 55% 48% 35% 35%;
}

.builder-pom__accessory--leaf {
  background: linear-gradient(160deg, #a6cda7, #6d8c52);
  transform: rotate(-7deg);
}

.builder-pom__accessory--leaf::after {
  position: absolute;
  top: 3%;
  right: 17%;
  width: 30%;
  height: 60%;
  background: #d4e8b0;
  border-radius: 100% 0;
  content: "";
  transform: rotate(33deg);
}

.builder-pom__accessory--beanie {
  background: repeating-linear-gradient(90deg, #8a7666 0 8px, #a38d7a 8px 12px);
  box-shadow: 0 8px 0 -2px #6a5c53;
  transform: rotate(-3deg);
}

.builder-pom__accessory--flower {
  top: 4%;
  right: 17%;
  color: #eb6d58;
  font-size: 42px;
  text-shadow: 0 2px 0 #fff6f0;
  transform: rotate(10deg);
}

.builder-pom__accessory--glasses {
  top: 39%;
  left: 27%;
  width: 46%;
  height: 15%;
  border: 4px solid #4d5153;
  border-radius: 999px;
}

.builder-pom__accessory--glasses::after {
  position: absolute;
  top: 40%;
  left: 43%;
  width: 16%;
  height: 4px;
  background: #4d5153;
  content: "";
}

.builder-pom__accessory--bag {
  right: 7%;
  bottom: 16%;
  width: 20%;
  height: 22%;
  background: #75a6b6;
  border: 4px solid #4d7b8c;
  border-radius: 9px;
  transform: rotate(8deg);
}

.builder-pom__accessory--bag::before {
  position: absolute;
  top: -35%;
  left: 15%;
  width: 65%;
  height: 55%;
  border: 4px solid #4d7b8c;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  content: "";
}

.builder__drop-hint {
  position: absolute;
  right: 0;
  bottom: 10%;
  left: 0;
  color: var(--muted-ink);
  font-size: 11px;
  text-align: center;
  opacity: .7;
}

.builder__visual.is-drag-over .builder__drop-hint {
  color: var(--tomato);
  font-weight: 700;
  opacity: 1;
}

.builder__controls {
  display: grid;
  gap: 21px;
  padding: 24px 0;
}

.control-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.control-group legend {
  margin-bottom: 10px;
  color: var(--ink);
  font-family: var(--hand);
  font-size: 16px;
  font-weight: 600;
}

.control-group legend small {
  margin-left: 7px;
  color: var(--muted-ink);
  font-family: var(--ui);
  font-size: 9px;
  font-weight: 400;
}

.swatch-row,
.eye-row,
.accessory-row,
.personality-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--swatch);
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(31,42,46,.12);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.swatch:hover,
.swatch:focus-visible,
.swatch.is-selected {
  box-shadow: 0 0 0 3px var(--warm), 0 0 0 5px var(--ink);
  transform: scale(1.08);
}

.eye-option,
.accessory-option {
  position: relative;
  display: grid;
  padding: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.eye-option {
  width: 44px;
  height: 38px;
  border-radius: 50%;
  place-items: center;
}

.eye-option:hover,
.eye-option:focus-visible,
.eye-option.is-selected {
  background: rgba(243, 166, 184, .23);
}

.eye-preview {
  position: relative;
  display: block;
  width: 34px;
  height: 25px;
}

.eye-preview i {
  position: absolute;
  top: 7px;
  width: 9px;
  height: 12px;
  background: var(--ink);
  border-radius: 50%;
}

.eye-preview i:first-child { left: 5px; }
.eye-preview i:nth-child(2) { right: 5px; }

.eye-preview--sleepy i,
.eye-preview--shy i {
  height: 2px;
  top: 12px;
  background: transparent;
  border-top: 2px solid var(--ink);
  border-radius: 50%;
}

.eye-preview--happy i {
  height: 8px;
  top: 10px;
  background: transparent;
  border-top: 2px solid var(--ink);
  border-radius: 50% 50% 0 0;
}

.eye-preview--sparkle i {
  display: grid;
  width: 15px;
  height: 15px;
  color: var(--ink);
  background: transparent;
  place-items: center;
  font-size: 15px;
}

.eye-preview--sparkle i:first-child { left: 2px; }
.eye-preview--sparkle i:nth-child(2) { right: 2px; }

.eye-preview--curious i:first-child { transform: scale(1.2); }
.eye-preview--curious i:nth-child(2) { transform: scale(.72); }

.eye-preview--shy::after {
  position: absolute;
  top: 16px;
  left: 6px;
  width: 22px;
  height: 6px;
  background: linear-gradient(90deg, rgba(236,109,88,.45), transparent 20% 80%, rgba(236,109,88,.45));
  border-radius: 50%;
  content: "";
}

.accessory-row {
  align-items: flex-start;
  gap: 13px;
}

.accessory-option {
  justify-items: center;
  gap: 6px;
  min-width: 42px;
  color: var(--muted-ink);
  font-size: 9px;
}

.accessory-option:hover,
.accessory-option:focus-visible,
.accessory-option.is-selected {
  color: var(--ink);
}

.accessory-option.is-selected .accessory-preview {
  box-shadow: 0 0 0 3px var(--warm), 0 0 0 5px var(--pink);
}

.accessory-preview {
  position: relative;
  display: block;
  width: 40px;
  height: 34px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(31,42,46,.16);
  border-radius: 12px;
}

.accessory-preview--leaf::before,
.accessory-preview--beanie::before {
  position: absolute;
  top: 7px;
  left: 9px;
  width: 23px;
  height: 15px;
  border-radius: 60% 50% 30% 30%;
  content: "";
}

.accessory-preview--leaf::before { background: #84ae72; transform: rotate(-8deg); }
.accessory-preview--leaf::after { position: absolute; top: 9px; left: 22px; width: 11px; height: 7px; background: #d2e3a5; border-radius: 100% 0; content: ""; transform: rotate(25deg); }
.accessory-preview--beanie::before { background: repeating-linear-gradient(90deg, #977b69 0 5px, #b89a84 5px 8px); box-shadow: 0 5px 0 -1px #725e50; }
.accessory-preview--flower { color: #eb6d58; font-size: 27px; line-height: 32px; text-align: center; }
.accessory-preview--glasses::before { position: absolute; top: 11px; left: 5px; width: 11px; height: 9px; border: 2px solid #4d5153; border-radius: 50%; content: ""; box-shadow: 15px 0 0 -2px #fff6f0, 15px 0 0 0 #4d5153; }
.accessory-preview--bag::before { position: absolute; right: 8px; bottom: 5px; width: 17px; height: 16px; background: #75a6b6; border: 2px solid #4d7b8c; border-radius: 5px; content: ""; }
.accessory-preview--bag::after { position: absolute; right: 11px; bottom: 20px; width: 11px; height: 8px; border: 2px solid #4d7b8c; border-bottom: 0; border-radius: 50% 50% 0 0; content: ""; }

.personality-row {
  gap: 8px;
}

.personality-row button {
  min-width: 68px;
  padding: 7px 11px;
  color: var(--ink);
  background: transparent;
  border: 1px solid #718087;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.personality-row button:hover,
.personality-row button:focus-visible,
.personality-row button.is-selected {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.world {
  min-height: 800px;
  color: #fff;
  background: var(--sky);
}

.world__art {
  z-index: -3;
  object-position: center;
  transform: translate3d(var(--world-x, 0px), var(--world-y, 0px), 0) scale(1.03);
  animation: world-drift 22s ease-in-out infinite alternate;
}

.world__atmosphere {
  z-index: -2;
  background: linear-gradient(90deg, rgba(51, 131, 191, .7), rgba(51, 131, 191, .1) 52%, rgba(51, 131, 191, .05)), linear-gradient(180deg, rgba(20,82,122,.04), rgba(20,82,122,.16));
  transition: background 700ms ease;
}

.world[data-scene="beach"] .world__atmosphere { background: linear-gradient(90deg, rgba(52, 137, 182, .68), rgba(240, 211, 160, .1) 60%, transparent), linear-gradient(180deg, rgba(255, 224, 171, .12), rgba(20,82,122,.1)); }
.world[data-scene="snow"] .world__atmosphere { background: linear-gradient(90deg, rgba(81, 125, 174, .72), rgba(205, 224, 239, .18) 60%, transparent), linear-gradient(180deg, rgba(255,255,255,.16), rgba(20,82,122,.12)); }
.world[data-scene="city"] .world__atmosphere { background: linear-gradient(90deg, rgba(54, 100, 142, .7), rgba(153, 126, 159, .18) 60%, transparent), linear-gradient(180deg, rgba(255, 211, 158, .13), rgba(20,82,122,.18)); }

.world__copy {
  position: relative;
  z-index: 3;
  width: min(560px, 47vw);
  padding: 105px max(48px, calc((100vw - 1320px) / 2));
}

.world h2,
.sunset h2 {
  font-size: clamp(50px, 5.6vw, 82px);
  line-height: .98;
}

.world__copy > p {
  margin: 22px 0 28px;
  font-size: 15px;
  line-height: 1.75;
}

.world__actions {
  display: flex;
  gap: 13px;
}

.world-action {
  display: grid;
  gap: 8px;
  justify-items: center;
  color: #fff;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}

.world-action__icon {
  display: grid;
  width: 58px;
  height: 58px;
  color: #659bc4;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 50%;
  place-items: center;
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(22, 86, 127, .16);
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.world-action__icon--care { color: var(--tomato); }
.world-action__icon--play { color: #54677d; font-size: 39px; }
.world-action__icon--explore { color: #6a86a9; font-size: 34px; }

.world-action:hover .world-action__icon,
.world-action:focus-visible .world-action__icon,
.world-action.is-selected .world-action__icon {
  color: #fff;
  background: var(--ink);
  transform: translateY(-4px) scale(1.04);
}

.world__note {
  position: absolute;
  z-index: 3;
  top: 23%;
  right: 22%;
  transform: rotate(-7deg);
  animation: world-note-float 5.8s ease-in-out infinite;
}

.world__signpost {
  position: absolute;
  z-index: 4;
  right: max(48px, calc((100vw - 1320px) / 2));
  bottom: 19%;
  display: grid;
  gap: 6px;
  transform: rotate(-3deg);
  animation: signpost-sway 7.5s ease-in-out infinite;
}

.world__signpost::before {
  position: absolute;
  top: -8px;
  bottom: -22px;
  left: 50%;
  width: 8px;
  background: #8c654c;
  border-radius: 4px;
  box-shadow: inset 2px 0 rgba(255,255,255,.28);
  content: "";
  transform: translateX(-50%);
}

.world__signpost button {
  position: relative;
  z-index: 1;
  min-width: 108px;
  padding: 7px 18px 7px 12px;
  color: #fff9ed;
  background: #986c51;
  clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%, 10% 50%);
  font-family: var(--hand);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: filter 160ms ease, transform 160ms ease;
}

.world__signpost button:nth-child(2) { margin-left: 12px; background: #a97a5b; }
.world__signpost button:nth-child(3) { margin-left: -5px; background: #8f644b; }
.world__signpost button:nth-child(4) { margin-left: 8px; background: #a16e52; }
.world__signpost button:hover,
.world__signpost button:focus-visible,
.world__signpost button[aria-pressed="true"] { filter: brightness(1.14); transform: translateX(4px); }

.world__toy {
  position: absolute;
  z-index: 5;
  width: 34px;
  height: 34px;
  color: #fff;
  border: 3px solid rgba(255,255,255,.8);
  border-radius: 50%;
  box-shadow: 0 8px 16px rgba(22, 86, 127, .25);
  cursor: grab;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), background 180ms ease;
}

.world__toy:active { cursor: grabbing; }
.world__toy--food { right: 41%; bottom: 19%; background: var(--tomato); }
.world__toy--ball { right: 31%; bottom: 28%; background: var(--pink); opacity: 0; pointer-events: none; }
.world[data-action="feed"] .world__toy--food { animation: toy-pulse 2.2s ease-in-out infinite; }
.world[data-action="play"] .world__toy--ball { opacity: 1; pointer-events: auto; animation: ball-float 2.4s ease-in-out infinite; }
.world__reaction { position: absolute; z-index: 6; right: 42%; bottom: 27%; min-height: 28px; color: #fff; font-family: var(--display); font-size: 18px; text-shadow: 0 3px 10px rgba(22,86,127,.3); }
.world.is-reacting .world__art { animation: world-reaction 650ms cubic-bezier(.2,.8,.2,1); }
.world.is-offscreen .world__art,
.world.is-offscreen .world__note,
.world.is-offscreen .world__signpost { animation-play-state: paused; }

.gallery {
  display: grid;
  grid-template-columns: minmax(300px, .7fr) minmax(0, 1.65fr);
  align-items: center;
  gap: clamp(38px, 6vw, 100px);
  min-height: 650px;
  padding: 96px max(48px, calc((100vw - 1320px) / 2));
}

.gallery__copy {
  align-self: start;
  padding-top: 28px;
}

.gallery__copy > .pill-button {
  margin-top: 18px;
}

.gallery__caption {
  max-width: 280px;
  min-height: 38px;
  margin: 24px 0 0;
  color: var(--muted-ink);
  font-size: 12px;
  line-height: 1.5;
}

.gallery__rail-wrap {
  min-width: 0;
}

.gallery__rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 12px 4px 21px;
  scrollbar-color: rgba(31,42,46,.25) transparent;
  scrollbar-width: thin;
  cursor: grab;
  overscroll-behavior-x: contain;
}

.gallery__rail:active { cursor: grabbing; }
.gallery__rail::-webkit-scrollbar { height: 6px; }
.gallery__rail::-webkit-scrollbar-thumb { background: rgba(31,42,46,.2); border-radius: 99px; }

.gallery-card {
  flex: 0 0 clamp(190px, 17vw, 255px);
  min-width: 0;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}

.gallery-card:hover,
.gallery-card:focus-within,
.gallery-card.is-selected { transform: translateY(-5px); }

.gallery-card button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 0 12px;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  border-radius: 17px;
  box-shadow: 0 13px 30px rgba(84, 65, 57, .14);
  cursor: pointer;
  text-align: left;
}

.gallery-card button::after {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  transition: border-color 180ms ease;
}

.gallery-card.is-selected button::after,
.gallery-card button:focus-visible::after { border-color: var(--pink); }

.gallery-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(.2,.8,.2,1);
}

.gallery-card:hover img,
.gallery-card.is-selected img { transform: scale(1.02); }

.gallery-card span,
.gallery-card small {
  display: block;
  padding: 0 13px;
}

.gallery-card span {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
}

.gallery-card small {
  margin-top: 3px;
  color: var(--muted-ink);
  font-size: 9px;
}

.gallery-card b {
  position: absolute;
  right: 12px;
  bottom: 13px;
  color: var(--muted-ink);
  font-size: 17px;
  font-weight: 400;
}

.gallery__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  color: var(--muted-ink);
  font-size: 11px;
}

.gallery__controls button {
  width: 34px;
  height: 34px;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(31,42,46,.16);
  border-radius: 50%;
  cursor: pointer;
}

.gallery__controls button:hover,
.gallery__controls button:focus-visible { color: #fff; background: var(--ink); }

.sunset {
  min-height: 475px;
  color: #fff;
}

.sunset__art {
  z-index: -3;
  object-position: center center;
}

.sunset__atmosphere {
  z-index: -2;
  background: linear-gradient(90deg, rgba(81, 53, 75, .53), transparent 64%, rgba(75, 44, 55, .08));
}

.sunset__copy {
  position: relative;
  z-index: 3;
  width: min(600px, 55vw);
  padding: 86px max(48px, calc((100vw - 1320px) / 2));
}

.sunset__copy > p {
  margin: 18px 0 22px;
  font-size: 14px;
  line-height: 1.75;
}

.sunset__note {
  position: absolute;
  z-index: 3;
  top: 25%;
  right: max(70px, calc((100vw - 1320px) / 2));
  transform: rotate(-5deg);
}

.download {
  padding: 60px max(48px, calc((100vw - 1320px) / 2)) 32px;
}

.download__top {
  display: grid;
  grid-template-columns: 1fr auto minmax(250px, .9fr);
  align-items: start;
  gap: 38px;
  padding-bottom: 63px;
}

.download h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.download__top p {
  margin: 8px 0 0;
  color: var(--muted-ink);
  font-size: 12px;
}

.store-links {
  display: flex;
  gap: 8px;
}

.store-links button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 126px;
  padding: 10px 13px;
  color: #fff;
  background: var(--ink);
  border-radius: 8px;
  cursor: not-allowed;
  opacity: .96;
}

.store-links button strong {
  font-size: 22px;
  line-height: 1;
}

.store-links button span {
  display: grid;
  gap: 2px;
  font-size: 12px;
  text-align: left;
}

.store-links button small {
  color: rgba(255,255,255,.64);
  font-size: 7px;
  letter-spacing: .08em;
}

.newsletter {
  justify-self: end;
  width: min(100%, 320px);
}

.newsletter > label {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
}

.newsletter > div {
  display: flex;
  align-items: center;
  padding: 3px 4px 3px 15px;
  background: #fff;
  border: 1px solid rgba(31,42,46,.2);
  border-radius: 999px;
}

.newsletter input {
  min-width: 0;
  flex: 1;
  padding: 8px 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
  font-size: 12px;
}

.newsletter button {
  display: grid;
  width: 34px;
  height: 34px;
  color: #fff;
  background: #4a5b62;
  border-radius: 50%;
  place-items: center;
  cursor: pointer;
}

.newsletter > small {
  display: block;
  margin: 8px 0 0 12px;
  color: var(--muted-ink);
  font-size: 10px;
}

.site-footer {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 25px;
  padding-top: 30px;
  border-top: 1px solid rgba(31,42,46,.12);
  color: var(--ink);
  font-size: 11px;
}

.site-footer nav {
  gap: 20px;
}

.site-footer a:hover,
.site-footer a:focus-visible { text-decoration: underline; }

.wordmark--dark { font-size: 24px; }
.social-links { font-size: 16px; }
.copyright { color: var(--muted-ink); font-size: 10px; white-space: nowrap; }

@keyframes art-breathe {
  0%, 100% { transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) scale(1.01); }
  50% { transform: translate3d(var(--hero-x, 0px), calc(var(--hero-y, 0px) - 3px), 0) scale(1.026); }
}

@keyframes pom-breathe {
  0%, 100% { transform: translate3d(var(--pom-x, 0px), var(--pom-y, 0px), 0) scaleY(.985); }
  50% { transform: translate3d(var(--pom-x, 0px), var(--pom-y, 0px), 0) scaleY(1.015); }
}

@keyframes pom-hop {
  0% { transform: translate3d(var(--pom-x, 0px), var(--pom-y, 0px), 0) scale(.96, 1.08); }
  34% { transform: translate3d(var(--pom-x, 0px), calc(var(--pom-y, 0px) - 22px), 0) scale(1.02, .98) rotate(-3deg); }
  66% { transform: translate3d(var(--pom-x, 0px), calc(var(--pom-y, 0px) + 4px), 0) scale(1.1, .9); }
  100% { transform: translate3d(var(--pom-x, 0px), var(--pom-y, 0px), 0) scale(1); }
}

@keyframes pom-blink {
  0%, 100% { transform: translate3d(var(--pom-x, 0px), var(--pom-y, 0px), 0) scaleY(1); }
  50% { transform: translate3d(var(--pom-x, 0px), var(--pom-y, 0px), 0) scaleY(.95); }
}

@keyframes builder-idle {
  0%, 100% { transform: translateY(0) scaleY(.985); }
  50% { transform: translateY(-4px) scaleY(1.015); }
}

@keyframes playful-idle {
  0%, 100% { transform: translateY(0) scaleY(.985) rotate(0); }
  42% { transform: translateY(-7px) scaleY(1.02) rotate(-1deg); }
  50% { transform: translateY(-2px) scaleX(1.05) scaleY(.94) rotate(1deg); }
  62% { transform: translateY(-4px) scaleY(1.01) rotate(0); }
}

@keyframes curious-idle {
  0%, 100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-2px) rotate(-3deg); }
  65% { transform: translateY(-2px) rotate(3deg); }
}

@keyframes sleepy-idle {
  0%, 100% { transform: translateY(3px) scaleY(.98); }
  50% { transform: translateY(0) scaleY(1.01); }
}

@keyframes brave-idle {
  0%, 100% { transform: translateY(0) rotate(0) scaleY(1); }
  50% { transform: translateY(-4px) rotate(-2deg) scaleY(1.04); }
}

@keyframes foodie-idle {
  0%, 100% { transform: translateY(0) rotate(0); }
  48% { transform: translateY(-3px) rotate(1deg); }
  57% { transform: translateY(-1px) rotate(-1deg); }
}

@keyframes color-pop {
  0% { transform: scaleX(.96) scaleY(1.05); }
  45% { transform: scaleX(1.06) scaleY(.96) rotate(-2deg); }
  100% { transform: scale(1); }
}

@keyframes satisfied {
  0% { transform: scale(1); }
  30% { transform: scaleX(.94) scaleY(1.08); }
  63% { transform: translateY(-12px) scaleX(1.04) scaleY(.97); }
  100% { transform: scale(1); }
}

@keyframes cloud-drift-one { to { transform: translate3d(90px, 10px, 0); } }
@keyframes cloud-drift-two { to { transform: translate3d(70px, -12px, 0) scale(.75); } }
@keyframes cloud-drift-three { to { transform: translate3d(-85px, 8px, 0) scale(.6); } }
@keyframes flower-sway { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(10deg) translateY(-3px); } }
@keyframes toy-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes ball-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes world-reaction { 0% { transform: scale(1) translateY(0); } 35% { transform: scale(1.025) translateY(-5px); } 100% { transform: scale(1) translateY(0); } }
@keyframes world-drift {
  0% { transform: translate3d(var(--world-x, 0px), var(--world-y, 0px), 0) scale(1.03); }
  50% { transform: translate3d(calc(var(--world-x, 0px) - 5px), calc(var(--world-y, 0px) - 2px), 0) scale(1.045); }
  100% { transform: translate3d(calc(var(--world-x, 0px) + 7px), calc(var(--world-y, 0px) + 3px), 0) scale(1.06); }
}
@keyframes world-note-float {
  0%, 100% { transform: rotate(-7deg) translate3d(0, 0, 0); }
  50% { transform: rotate(-4deg) translate3d(0, -6px, 0); }
}
@keyframes signpost-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(-1.5deg) translateY(-2px); }
}

.is-offscreen {
  animation-play-state: paused !important;
}

:focus-visible {
  outline: 3px solid rgba(77, 158, 219, .82);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  :root { --content: calc(100vw - 56px); }
  .site-header { min-height: 74px; }
  .site-nav { gap: 18px; }
  .sound-toggle { display: none; }
  .hero__copy { margin-left: 28px; }
  .hero__note { right: 28px; }
  .builder { grid-template-columns: minmax(240px, .7fr) minmax(0, 1.4fr); padding-inline: 28px; }
  .builder__workspace { grid-template-columns: 1fr; }
  .builder__visual { min-height: 400px; }
  .builder__controls { padding-top: 0; }
  .world__copy { padding-inline: 28px; }
  .world__note { right: 17%; }
  .world__signpost { right: 28px; }
  .gallery { padding-inline: 28px; }
  .download { padding-inline: 28px; }
  .site-footer { grid-template-columns: auto 1fr auto; }
  .social-links { grid-column: 3; }
  .copyright { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  :root { --content: calc(100vw - 36px); }
  .site-header { min-height: 68px; }
  .site-header.is-scrolled { padding-inline: 18px; }
  .site-nav { position: absolute; top: 62px; right: 0; left: 0; display: none; padding: 18px; background: rgba(255,246,240,.97); border-radius: 16px; box-shadow: 0 18px 40px rgba(31,42,46,.14); }
  .site-header.is-menu-open .site-nav { display: grid; gap: 18px; color: var(--ink); }
  .menu-button { display: block; }
  .header-cta { min-height: 34px; padding-inline: 12px; font-size: 10px; }
  .language-toggle { display: none; }
  .hero { min-height: 740px; height: 740px; }
  .hero__art { object-position: 63% center; animation: none; }
  .hero__copy { width: calc(100% - 36px); margin-left: 18px; padding-top: 126px; }
  .hero h1 { max-width: 320px; font-size: clamp(52px, 15vw, 76px); }
  .hero__copy > p { margin-top: 20px; font-size: 14px; }
  .hero__note { top: 16%; right: 13px; font-size: 11px; }
  .hero-pom { top: 52%; left: 54%; width: 38vw; min-width: 126px; }
  .hero__cloud--one { left: 56%; }
  .hero__cloud--two { left: -20%; }
  .hero__flower--one { right: 5%; bottom: 11%; }
  .hero__flower--two { right: 29%; bottom: 9%; }
  .builder { display: block; min-height: 0; padding: 76px 18px 90px; }
  .builder__copy { padding-top: 0; }
  .builder h2,
  .gallery h2 { font-size: clamp(47px, 13vw, 66px); }
  .builder__workspace { margin-top: 30px; }
  .builder__visual { min-height: 350px; }
  .builder-pom { width: min(72vw, 290px); }
  .builder__controls { gap: 25px; }
  .world { min-height: 760px; }
  .world__art { object-position: 61% center; }
  .world__copy { width: 100%; padding: 74px 18px 0; }
  .world h2 { font-size: clamp(46px, 12vw, 68px); }
  .world__copy > p { font-size: 13px; }
  .world__actions { gap: 8px; }
  .world-action__icon { width: 49px; height: 49px; font-size: 24px; }
  .world-action__icon--play { font-size: 31px; }
  .world__note { top: 20%; right: 12%; font-size: 11px; }
  .world__signpost { right: 18px; bottom: 11%; transform: scale(.78) rotate(-3deg); transform-origin: right bottom; }
  .world__toy--food { right: 48%; bottom: 15%; }
  .world__toy--ball { right: 22%; bottom: 28%; }
  .world__reaction { right: 43%; bottom: 23%; }
  .gallery { display: block; min-height: 0; padding: 76px 18px 86px; }
  .gallery__copy { padding-top: 0; }
  .gallery__rail-wrap { margin-top: 33px; }
  .gallery__rail { margin-right: -18px; padding-right: 18px; }
  .gallery-card { flex-basis: 66vw; max-width: 260px; }
  .gallery__controls { margin-top: 4px; }
  .sunset { min-height: 630px; }
  .sunset__art { object-position: 64% center; }
  .sunset__copy { width: 100%; padding: 74px 18px; }
  .sunset h2 { font-size: clamp(48px, 13vw, 72px); }
  .sunset__copy > p { font-size: 13px; }
  .sunset__note { top: 26%; right: 12%; font-size: 11px; }
  .download { padding: 54px 18px 28px; }
  .download__top { grid-template-columns: 1fr; gap: 28px; padding-bottom: 42px; }
  .newsletter { justify-self: stretch; width: 100%; }
  .site-footer { grid-template-columns: 1fr 1fr; gap: 21px 14px; }
  .site-footer > span:not(.copyright) { grid-column: 1 / -1; }
  .site-footer nav { gap: 14px; }
  .site-footer .social-links { grid-column: 2; justify-self: end; }
  .site-footer .copyright { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .hero__art,
  .world__art,
  .sunset__art { transform: none !important; }
}

/* The builder uses transparent image layers so every selected state has a real visual asset. */
.builder-pom__face {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.builder-pom__face [data-eye-image] {
  position: absolute;
  top: 34%;
  left: 21%;
  display: block;
  width: 58%;
  height: auto;
  filter: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.builder-pom.is-blinking .builder-pom__face [data-eye-image] {
  opacity: .2;
  transform: scaleY(.12);
  transform-origin: center;
}

.builder-pom__accessory {
  position: absolute;
  z-index: 6;
  display: block;
  height: auto;
  line-height: 0;
  pointer-events: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font-size: inherit;
  text-shadow: none;
}

.builder-pom__accessory[hidden] {
  display: none !important;
}

.builder-pom__accessory img {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--accessory-filter, none) !important;
}

.builder-pom__accessory::before,
.builder-pom__accessory::after {
  display: none !important;
  content: none !important;
}

.builder-pom__accessory--beanie {
  top: -5%;
  left: 16%;
  width: 68%;
}

.builder-pom__accessory--leaf {
  top: -5%;
  right: 10%;
  width: 42%;
  transform: rotate(8deg);
}

.builder-pom__accessory--hairpin {
  top: 6%;
  right: 12%;
  width: 34%;
  transform: rotate(-8deg);
}

.builder-pom__accessory--flower {
  top: 2%;
  right: 11%;
  width: 34%;
  transform: rotate(8deg);
}

.builder-pom__accessory--glasses {
  top: 36%;
  left: 16%;
  width: 68%;
}

.builder-pom__accessory--bag {
  right: -1%;
  bottom: 12%;
  width: 38%;
  transform: rotate(7deg);
}

.eye-preview {
  position: relative;
  display: block;
  width: 34px;
  height: 25px;
  overflow: hidden;
}

.eye-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.accessory-preview {
  position: relative;
  display: grid;
  width: 40px;
  height: 34px;
  overflow: hidden;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(31,42,46,.16);
  border-radius: 12px;
  place-items: center;
}

.accessory-preview::before,
.accessory-preview::after {
  display: none !important;
  content: none !important;
}

.accessory-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}