:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #eee;
  background: #fff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
body[data-theme="black"] { background: #000; }
body[data-theme="white"] { background: #fff; color: #222; }
#space { position: relative; outline: none; min-height: 100svh; }
a { color: inherit; }
.home-space { height: 100svh; min-height: 520px !important; }
.home-title {
  position: absolute; left: 36%; top: 20%; margin: 0;
  font-size: clamp(16px, 1.6vw, 23px); line-height: 1.25;
  font-weight: 400; letter-spacing: .075em;
}
/* Frame the handwritten marks without changing the source PNGs' transparent canvas. */
.title-word { display: block; position: relative; overflow: hidden; }
.title-word img { display: block; position: absolute; max-width: none; height: auto; }
.title-xinlu { width: clamp(106px, 10.6vw, 138px); aspect-ratio: 363 / 139; transform: translate(38px, 40px) rotate(-2.5deg); }
.title-xinlu img { width: 650.137741%; left: -260.606061%; top: -224.460432%; }
.title-nowhere {
  position: fixed; left: calc(53% + min(8vw, 108px)); top: calc(55% + min(12.8vw, 173px) + 12px);
  width: clamp(127px, 12.65vw, 166px); aspect-ratio: 555 / 109; margin-top: 0;
  transform: translate(-57px, 15px);
}
.title-nowhere img { width: 425.225225%; left: -268.648649%; top: -1055.963303%; }
.paper-object {
  display: block; position: absolute; text-decoration: none; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  width: var(--size, 100px); height: var(--size, 100px);
  outline: none; border: 0; background: none;
}
.paper-object:focus-visible { outline: 1px dotted currentColor; outline-offset: 9px; }
.drawing { display: block; position: relative; width: 100%; height: 100%; }
.drawing img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; }
img[data-artwork] { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }
.active-image { visibility: hidden; }
[data-state="active"] .default-image { visibility: hidden; }
[data-state="active"] .active-image { visibility: visible; }
.main-door { --size: clamp(180px, 20vw, 270px); left: 53%; top: 55%; transform: translate(-50%, -50%); height: calc(var(--size) * 1.28); }
.black-space { height: 100svh; min-height: 660px !important; max-width: 1600px; margin: 0 auto; }
.world-object, .about-object { left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.world-animal-world { --x: 21%; --y: 43%; --size: clamp(112px, 12vw, 168px); }
.world-rabbit-hole { --x: 74%; --y: 29%; --size: clamp(102px, 11vw, 150px); }
.world-carnival { --x: 44%; --y: 21%; --size: clamp(125px, 13vw, 182px); }
.world-na { --x: 38%; --y: 68%; --size: clamp(76px, 7.5vw, 105px); }
.world-live-museum { --x: 79%; --y: 62%; --size: clamp(86px, 8.5vw, 119px); }
.world-three-birds { --x: 56%; --y: 79%; --size: clamp(75px, 7vw, 98px); }
.world-eye { --x: 90%; --y: 83%; --size: clamp(45px, 4vw, 57px); }
.about-object { --x: 24%; --y: 86%; --size: 43px; min-width: 44px; min-height: 44px; }
.back-object { --size: 46px; position: fixed; left: max(25px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 3; }
.object-label {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  opacity: 0; white-space: nowrap; font-size: 10px; font-weight: 400;
  letter-spacing: .12em; line-height: 1.4; pointer-events: none;
}
@media (hover: hover) { .paper-object:hover .object-label { opacity: .72; } }
.paper-object:focus-visible .object-label { opacity: .8; }
#white-light { position: fixed; inset: 0; z-index: 10; background: #fff; opacity: 0; pointer-events: none; }
.studio { width: min(54vw, 740px); margin: 0 auto; padding: 13svh 0 110px; }
.studio-photo { display: block; max-width: 100%; max-height: 60svh; width: auto; height: auto; margin: 0 auto 5px; }
.studio h1 { font-size: 13px; letter-spacing: .14em; font-weight: 400; margin: 0 0 5px; }
.studio a { font-size: 12px; text-decoration: none; letter-spacing: .02em; }
/* Keep the text on the lower-right edge of the unchanged 3:4 studio photo. */
.studio h1, .studio > a {
  display: block; width: max-content; max-width: none;
  margin-left: calc(50% + min(22.5svh, 50%) + 8px); margin-right: 0;
  position: relative; top: 38px;
}
.studio a:focus-visible { outline: 1px dotted currentColor; outline-offset: 5px; }
@media (max-width: 650px) {
  .home-title { left: 25%; top: 23%; font-size: 17px; }
  .main-door { --size: 178px; left: 56%; top: 55%; }
  .title-nowhere { left: 60%; top: calc(55% + 126px); }
  .black-space { height: 100svh; min-height: 0 !important; }
  .world-carnival { --x: 34%; --y: 14%; --size: 114px; }
  .world-rabbit-hole { --x: 77%; --y: 30%; --size: 98px; }
  .world-animal-world { --x: 26%; --y: 43%; --size: 113px; }
  .world-na { --x: 62%; --y: 57%; --size: 77px; }
  .world-live-museum { --x: 25%; --y: 70%; --size: 87px; }
  .world-three-birds { --x: 70%; --y: 79%; --size: 74px; }
  .world-eye { --x: 86%; --y: 93%; --size: 47px; }
  .about-object { --x: 41%; --y: 90%; --size: 44px; }
  .back-object { left: 18px; bottom: max(18px, env(safe-area-inset-bottom)); --size: 44px; }
  .black-space .back-object { position: fixed; }
  .object-label { font-size: 9px; letter-spacing: .08em; }
  .studio { width: 78vw; padding-top: 16svh; }
  .studio h1, .studio > a { margin-left: calc(100% - 135px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } }

/* Animal World: two separate presences, with room between them. */
.animal-space { height: 100svh; min-height: 600px !important; max-width: 1600px; margin: 0 auto; }
.animal-entrance { transform: translate(-50%, -50%); }
.animal-bird { left: 31%; top: 36%; --size: clamp(108px, 12vw, 170px); }
.animal-a-seal { left: 68%; top: 64%; --size: clamp(170px, 21vw, 290px); }
.animal-project-space { padding: 16svh 0 22svh; }
.animal-artwork { display: block; width: 38%; height: auto; margin: 0 0 22svh 18%; }
.animal-artwork:nth-child(4n + 2) { width: 31%; margin-left: 57%; margin-bottom: 30svh; }
.animal-artwork:nth-child(4n + 3) { width: 44%; margin-left: 27%; margin-bottom: 26svh; }
.animal-artwork:nth-child(4n + 4) { width: 29%; margin-left: 14%; margin-bottom: 34svh; }
@media (max-width: 650px) {
  .animal-bird { left: 29%; top: 31%; --size: 112px; }
  .animal-a-seal { left: 65%; top: 63%; --size: 174px; }
  .animal-project-space { padding-top: 15svh; }
  .animal-artwork { width: 62%; margin-left: 19%; margin-bottom: 18svh; }
  .animal-artwork:nth-child(4n + 2) { width: 57%; margin-left: 36%; margin-bottom: 24svh; }
  .animal-artwork:nth-child(4n + 3) { width: 70%; margin-left: 22%; margin-bottom: 20svh; }
  .animal-artwork:nth-child(4n + 4) { width: 59%; margin-left: 19%; margin-bottom: 26svh; }
}

/* Rabbit Hole is denser than Animal World, while each entrance remains isolated. */
.rabbit-space { height: max(100svh, 760px); min-height: 760px !important; max-width: 1600px; margin: 0 auto; }
.rabbit-entrance { transform: translate(-50%, -50%); }
.rabbit-long-run { left: 17%; top: 24%; --size: clamp(86px, 9vw, 128px); }
.rabbit-red-one { left: 47%; top: 17%; --size: clamp(72px, 7.5vw, 106px); }
.rabbit-night-bride { left: 78%; top: 29%; --size: clamp(110px, 12vw, 170px); }
.rabbit-on-chair { left: 33%; top: 49%; --size: clamp(100px, 11vw, 154px); }
.rabbit-in-supermarket { left: 86%; top: 68%; --size: clamp(72px, 8vw, 112px); }
.rabbit-parallel-lives { left: 56%; top: 72%; --size: clamp(122px, 14vw, 194px); }
.rabbit-with-my-friend { left: 18%; top: 82%; --size: clamp(92px, 10vw, 142px); }
.rabbit-project-space { padding: 14svh 0 22svh; }
.rabbit-artwork { display: block; width: 40%; height: auto; margin: 0 0 22svh 16%; }
@media (min-width: 651px) {
  .rabbit-project-space[data-route="/rabbit-hole/long-run"] .rabbit-artwork {
    width: min(78vw, 1240px); margin-left: auto; margin-right: auto;
  }
}
.rabbit-artwork:nth-child(4n + 2) { width: 33%; margin-left: 56%; margin-bottom: 28svh; }
.rabbit-artwork:nth-child(4n + 3) { width: 45%; margin-left: 31%; margin-bottom: 19svh; }
.rabbit-artwork:nth-child(4n + 4) { width: 30%; margin-left: 13%; margin-bottom: 31svh; }
@media (max-width: 650px) {
  .rabbit-space { height: 1000px; min-height: 1000px !important; }
  .rabbit-long-run { left: 24%; top: 12%; --size: 88px; }
  .rabbit-red-one { left: 71%; top: 21%; --size: 73px; }
  .rabbit-night-bride { left: 31%; top: 35%; --size: 112px; }
  .rabbit-on-chair { left: 72%; top: 47%; --size: 101px; }
  .rabbit-parallel-lives { left: 32%; top: 62%; --size: 126px; }
  .rabbit-in-supermarket { left: 78%; top: 74%; --size: 76px; }
  .rabbit-with-my-friend { left: 28%; top: 87%; --size: 94px; }
  .rabbit-project-space { padding-top: 14svh; }
  .rabbit-artwork { width: 66%; margin-left: 17%; margin-bottom: 18svh; }
  .rabbit-artwork:nth-child(4n + 2) { width: 56%; margin-left: 37%; margin-bottom: 23svh; }
  .rabbit-artwork:nth-child(4n + 3) { width: 73%; margin-left: 19%; margin-bottom: 17svh; }
  .rabbit-artwork:nth-child(4n + 4) { width: 58%; margin-left: 14%; margin-bottom: 25svh; }
}

/* Live Museum: three quiet objects with an intentionally uneven balance. */
.live-museum-space { height: 100svh; min-height: 620px !important; max-width: 1600px; margin: 0 auto; }
.museum-entrance { transform: translate(-50%, -50%); }
.museum-big-family { left: 25%; top: 33%; --size: clamp(132px, 16vw, 220px); }
.museum-stone-museum { left: 72%; top: 38%; --size: clamp(94px, 11vw, 152px); }
.museum-big-bird { left: 48%; top: 72%; --size: clamp(106px, 13vw, 180px); }
.museum-project-space { padding: 15svh 0 24svh; }
.museum-artwork { display: block; width: 41%; height: auto; margin: 0 0 25svh 17%; }
.museum-artwork:nth-child(4n + 2) { width: 32%; margin-left: 57%; margin-bottom: 29svh; }
.museum-artwork:nth-child(4n + 3) { width: 46%; margin-left: 29%; margin-bottom: 21svh; }
.museum-artwork:nth-child(4n + 4) { width: 30%; margin-left: 14%; margin-bottom: 33svh; }
.museum-project-space[data-route="/live-museum/big-family"] .museum-artwork {
  width: min(72vw, 1120px); margin-left: auto; margin-right: auto;
}
@media (max-width: 650px) {
  .live-museum-space { height: 880px; min-height: 880px !important; }
  .museum-big-family { left: 31%; top: 24%; --size: 138px; }
  .museum-stone-museum { left: 70%; top: 49%; --size: 100px; }
  .museum-big-bird { left: 35%; top: 75%; --size: 112px; }
  .museum-project-space { padding-top: 15svh; }
  .museum-artwork { width: 65%; margin-left: 17%; margin-bottom: 20svh; }
  .museum-artwork:nth-child(4n + 2) { width: 56%; margin-left: 36%; margin-bottom: 25svh; }
  .museum-artwork:nth-child(4n + 3) { width: 72%; margin-left: 20%; margin-bottom: 18svh; }
  .museum-artwork:nth-child(4n + 4) { width: 57%; margin-left: 14%; margin-bottom: 27svh; }
  .museum-project-space[data-route="/live-museum/big-family"] .museum-artwork { width: 78vw; }
}

/* NA uses the supplied paper-room photograph as its quiet shared environment. */
.na-space { height: 100svh; min-height: 0 !important; overflow: hidden; }
.na-environment {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.na-entrance { transform: translate(-50%, -50%); }
.na-na-with-me { left: 30%; top: 36%; --size: clamp(92px, 10vw, 142px); }
.na-dodos-room { left: 70%; top: 39%; --size: clamp(106px, 13vw, 180px); }
.na-the-heart { left: 49%; top: 71%; --size: clamp(82px, 9vw, 126px); }
.na-project-space { padding: 15svh 0 24svh; }
.na-artwork { display: block; width: 40%; height: auto; margin: 0 0 25svh 17%; }
.na-artwork:nth-child(4n + 2) { width: 32%; margin-left: 57%; margin-bottom: 30svh; }
.na-artwork:nth-child(4n + 3) { width: 45%; margin-left: 30%; margin-bottom: 22svh; }
.na-artwork:nth-child(4n + 4) { width: 29%; margin-left: 15%; margin-bottom: 34svh; }
@media (max-width: 650px) {
  .na-space { height: 100svh; min-height: 0 !important; }
  .na-na-with-me { left: 29%; top: 29%; --size: 92px; }
  .na-dodos-room { left: 70%; top: 45%; --size: 112px; }
  .na-the-heart { left: 38%; top: 69%; --size: 84px; }
  .na-project-space { padding-top: 15svh; }
  .na-artwork { width: 66%; margin-left: 17%; margin-bottom: 20svh; }
  .na-artwork:nth-child(4n + 2) { width: 56%; margin-left: 36%; margin-bottom: 25svh; }
  .na-artwork:nth-child(4n + 3) { width: 72%; margin-left: 20%; margin-bottom: 18svh; }
  .na-artwork:nth-child(4n + 4) { width: 57%; margin-left: 14%; margin-bottom: 27svh; }
}

/* EYE keeps place entrances as unframed type in open black space. */
.eye-space { height: 100svh; min-height: 620px !important; max-width: 1600px; margin: 0 auto; }
.eye-place {
  position: absolute; color: #eee; text-decoration: none; font-size: clamp(11px, 1.05vw, 15px);
  font-weight: 400; letter-spacing: .13em; line-height: 1; cursor: pointer; outline: none;
}
.eye-place:focus-visible { outline: 1px dotted currentColor; outline-offset: 7px; }
.eye-egypt { left: 18%; top: 27%; }
.eye-xiamen { left: 62%; top: 19%; }
.eye-europe { left: 43%; top: 47%; }
.eye-edinburgh { left: 77%; top: 67%; }
.eye-portobello { left: 25%; top: 76%; }
.eye-project-space { padding: 15svh 0 24svh; }
.eye-artwork { display: block; width: 40%; height: auto; margin: 0 0 25svh 17%; }
.eye-artwork:nth-child(4n + 2) { width: 32%; margin-left: 57%; margin-bottom: 30svh; }
.eye-artwork:nth-child(4n + 3) { width: 46%; margin-left: 29%; margin-bottom: 21svh; }
.eye-artwork:nth-child(4n + 4) { width: 30%; margin-left: 14%; margin-bottom: 34svh; }
@media (max-width: 650px) {
  .eye-space { height: 880px; min-height: 880px !important; }
  .eye-place { font-size: 12px; letter-spacing: .11em; }
  .eye-egypt { left: 15%; top: 18%; }
  .eye-xiamen { left: 56%; top: 31%; }
  .eye-europe { left: 28%; top: 47%; }
  .eye-edinburgh { left: 55%; top: 63%; }
  .eye-portobello { left: 18%; top: 80%; }
  .eye-project-space { padding-top: 15svh; }
  .eye-artwork { width: 66%; margin-left: 17%; margin-bottom: 20svh; }
  .eye-artwork:nth-child(4n + 2) { width: 56%; margin-left: 36%; margin-bottom: 25svh; }
  .eye-artwork:nth-child(4n + 3) { width: 72%; margin-left: 20%; margin-bottom: 18svh; }
  .eye-artwork:nth-child(4n + 4) { width: 57%; margin-left: 14%; margin-bottom: 27svh; }
}

/* Three Birds is a sparse sequence of its supplied artwork photographs. */
.three-birds-project-space { padding: 15svh 0 24svh; }
.three-birds-artwork { display: block; width: 41%; height: auto; margin: 0 0 25svh 17%; }
.three-birds-artwork:nth-child(4n + 2) { width: 32%; margin-left: 57%; margin-bottom: 30svh; }
.three-birds-artwork:nth-child(4n + 3) { width: 46%; margin-left: 29%; margin-bottom: 21svh; }
.three-birds-artwork:nth-child(4n + 4) { width: 30%; margin-left: 14%; margin-bottom: 34svh; }
@media (max-width: 650px) {
  .three-birds-project-space { padding-top: 15svh; }
  .three-birds-artwork { width: 66%; margin-left: 17%; margin-bottom: 20svh; }
  .three-birds-artwork:nth-child(4n + 2) { width: 56%; margin-left: 36%; margin-bottom: 25svh; }
  .three-birds-artwork:nth-child(4n + 3) { width: 72%; margin-left: 20%; margin-bottom: 18svh; }
  .three-birds-artwork:nth-child(4n + 4) { width: 57%; margin-left: 14%; margin-bottom: 27svh; }
}

/* Carnival is a sparse stage of uneven character objects. */
.carnival-space { height: max(100svh, 780px); min-height: 780px !important; max-width: 1600px; margin: 0 auto; }
.carnival-entrance, .party-entrance { transform: translate(-50%, -50%); }
.carnival-deer { left: 18%; top: 25%; --size: clamp(105px, 12vw, 172px); }
.carnival-goat { left: 49%; top: 17%; --size: clamp(76px, 8vw, 114px); }
.carnival-shaman { left: 77%; top: 29%; --size: clamp(116px, 14vw, 190px); }
.carnival-fish { left: 31%; top: 52%; --size: clamp(84px, 9vw, 130px); }
.carnival-shell { left: 66%; top: 51%; --size: clamp(94px, 10vw, 146px); }
.carnival-cloud { left: 17%; top: 78%; --size: clamp(72px, 8vw, 112px); }
.carnival-party { left: 49%; top: 75%; --size: clamp(118px, 15vw, 205px); }
.carnival-archive { left: 84%; top: 77%; --size: clamp(62px, 7vw, 98px); }
.carnival-project-space { padding: 15svh 0 24svh; }
.carnival-artwork { display: block; width: 41%; height: auto; margin: 0 0 25svh 17%; }
.carnival-artwork:nth-child(4n + 2) { width: 32%; margin-left: 57%; margin-bottom: 30svh; }
.carnival-artwork:nth-child(4n + 3) { width: 46%; margin-left: 29%; margin-bottom: 21svh; }
.carnival-artwork:nth-child(4n + 4) { width: 30%; margin-left: 14%; margin-bottom: 34svh; }
.party-space { height: 100svh; min-height: 620px !important; max-width: 1600px; margin: 0 auto; }
.party-a-play { left: 31%; top: 36%; --size: clamp(142px, 18vw, 250px); }
.party-office-party { left: 68%; top: 66%; --size: clamp(112px, 14vw, 194px); }
.carnival-archive-space { height: 100svh; min-height: 620px !important; overflow: hidden; }
.archive-field { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: none; }
.archive-character {
  position: absolute; left: var(--archive-x); top: var(--archive-y);
  width: clamp(76px, var(--archive-size), 190px); height: auto; max-height: 24svh;
  object-fit: contain; opacity: .025; transform: translate(-50%, -50%);
  user-select: none; pointer-events: none; transition: opacity 850ms ease-out;
}
.archive-character.is-selected {
  left: 50%; top: 50%; width: auto; height: 80svh; max-width: 90vw; max-height: 80svh;
  opacity: 1; transform: translate(-50%, -50%); z-index: 100;
  transition: opacity 180ms ease-out;
}
.archive-character.is-large:not(.is-selected):not(.is-closing) { width: clamp(150px, var(--archive-size), 720px); max-height: 76svh; }
.archive-character.is-large.is-original-large:not(.is-selected):not(.is-closing) { max-width: 360px; max-height: 38svh; }
.archive-character.is-closing {
  left: 50%; top: 50%; width: auto; height: 80svh; max-width: 90vw; max-height: 80svh;
  opacity: 0; transform: translate(-50%, -50%); z-index: 100;
  transition: opacity 700ms ease-out;
}
@media (max-width: 650px) {
  .carnival-space { height: 1100px; min-height: 1100px !important; }
  .carnival-deer { left: 25%; top: 12%; --size: 108px; }
  .carnival-goat { left: 69%; top: 20%; --size: 77px; }
  .carnival-shaman { left: 35%; top: 34%; --size: 120px; }
  .carnival-fish { left: 74%; top: 46%; --size: 88px; }
  .carnival-shell { left: 29%; top: 59%; --size: 98px; }
  .carnival-party { left: 66%; top: 69%; --size: 122px; }
  .carnival-cloud { left: 27%; top: 82%; --size: 76px; }
  .carnival-archive { left: 72%; top: 89%; --size: 65px; }
  .carnival-project-space { padding-top: 15svh; }
  .carnival-artwork { width: 66%; margin-left: 17%; margin-bottom: 20svh; }
  .carnival-artwork:nth-child(4n + 2) { width: 56%; margin-left: 36%; margin-bottom: 25svh; }
  .carnival-artwork:nth-child(4n + 3) { width: 72%; margin-left: 20%; margin-bottom: 18svh; }
  .carnival-artwork:nth-child(4n + 4) { width: 57%; margin-left: 14%; margin-bottom: 27svh; }
  .party-space { height: 760px; min-height: 760px !important; }
  .party-a-play { left: 32%; top: 31%; --size: 150px; }
  .party-office-party { left: 65%; top: 66%; --size: 116px; }
  .carnival-archive-space { min-height: 560px !important; }
  .archive-character { width: clamp(62px, var(--archive-mobile-size), 110px); max-height: 27svh; }
  .archive-character.is-large:not(.is-selected):not(.is-closing) { width: clamp(124px, var(--archive-size), 360px); max-height: 76svh; }
  .archive-character.is-large.is-original-large:not(.is-selected):not(.is-closing) { max-width: 180px; max-height: 38svh; }
}