:root {
  color-scheme: dark;
  font-family: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
  background: #0c0d0d;
  color: #e7e4de;
  font-size: 14px;
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body { min-height: 100vh; overflow-x: hidden; background: #0c0d0d; }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible { outline: 1px solid #f5f0e7; outline-offset: 4px; }

.residual {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 620ms ease-out, transform 760ms ease-out;
  pointer-events: none;
}
.residual.is-visible { opacity: .075; transform: scale(1); }

.stage {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.35rem, 4vw, 4rem);
  overflow: hidden;
  background: var(--surface, #0c0d0d);
  transition: background-color 450ms ease;
}
.route-control, .audio-status {
  position: fixed;
  z-index: 10;
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .59rem;
  letter-spacing: -.02em;
  line-height: 1;
}
.route-control { right: clamp(1rem, 2vw, 2rem); }
.route-control span { opacity: .45; }
.route-button, .audio-status button, .text-action, .external-link, .enter-button, .coordinate, .same-half, .world, .inspect-dialog button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.route-button { opacity: .72; }
.route-button:hover { opacity: 1; }
.route-button + span { margin-left: .15rem; }
.audio-status {
  left: clamp(1rem, 2vw, 2rem);
  max-width: min(75vw, 37rem);
  padding: .42rem .54rem;
  background: color-mix(in srgb, #080909 87%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent);
}
.audio-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.audio-status button { border-left: 1px solid color-mix(in srgb, currentColor 28%, transparent); padding-left: .5rem; }
.audio-status button:hover { color: #fff; }

.state-open { --surface: #0d0e0f; display: block; padding: 0; }
.opener-work { position: absolute; inset: 0; overflow: hidden; background: #0d0e0f; }
.open-image {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: center;
  opacity: 0; clip-path: circle(0% at 50% 53%); transform: scale(1.055);
  filter: brightness(.18) contrast(1.4) saturate(.7);
  animation: portal-grow 3.65s cubic-bezier(.16,.72,.18,1) .35s forwards;
}
@keyframes portal-grow {
  0% { opacity: 0; clip-path: circle(0% at 50% 53%); transform: scale(1.075); filter: brightness(.08) contrast(1.55) saturate(.6); }
  30% { opacity: .62; }
  100% { opacity: 1; clip-path: circle(125% at 50% 53%); transform: scale(1); filter: brightness(1) contrast(1) saturate(1); }
}
.roman-mark {
  position: absolute; z-index: 1; bottom: 15%; left: clamp(1.2rem, 7vw, 7rem);
  width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font-size: .72rem;
  letter-spacing: .62em; color: #e1e0dc; text-shadow: 0 1px 12px #050505;
  animation: roman-print 1.05s steps(5, end) 3.42s forwards;
}
.roman-mark::after, .enter-button::after { content: ""; display: inline-block; width: 1px; height: .95em; margin-left: .25em; background: currentColor; vertical-align: -.1em; animation: cursor-blink 700ms step-end infinite; }
@keyframes roman-print { from { width: 0; opacity: 1; } to { width: 12.5em; opacity: 1; } }
@keyframes cursor-blink { 50% { opacity: 0; } }
.enter-button {
  position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; color: #e1e0dc; font-size: .66rem; opacity: 0;
  text-shadow: 0 1px 12px #050505; animation: portal-enter-ready 1ms linear 4.45s forwards;
}
.enter-copy { display: inline-block; width: 0; overflow: hidden; white-space: nowrap; animation: portal-enter-type 1.1s steps(11, end) 4.5s forwards; }
.enter-button:hover { color: #fff; }
@keyframes portal-enter-ready { to { opacity: .88; } }
@keyframes portal-enter-type { to { width: 11ch; } }

.state-work { --surface: #302932; padding: 0; place-items: stretch; }
.protected-work { position: relative; width: 100%; height: 100svh; overflow: hidden; }
.work-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.work-caption { position: absolute; right: clamp(1.2rem, 7vw, 7rem); bottom: 15%; display: flex; flex-direction: column; gap: .4rem; font-size: .67rem; text-shadow: 0 1px 12px #050505; }
.work-caption strong { font-weight: 500; }
.work-caption span { font-size: .54rem; opacity: .56; }
.state-work.phantom { --surface: #111718; }
.protected-work.phantom .work-image {
  object-position: 42% 50%;
  transform-origin: 47% 52%;
  animation: phantom-living-still 18s ease-in-out infinite alternate;
  will-change: transform, filter;
}
@keyframes phantom-living-still {
  from { transform: translate3d(0, 0, 0) scale(1); filter: brightness(1) saturate(1); }
  to { transform: translate3d(-.14%, .1%, 0) scale(1.018); filter: brightness(1.018) saturate(1.012); }
}
.protected-work.dune .work-caption { left: clamp(1.2rem, 7vw, 7rem); right: auto; bottom: 15%; z-index: 1; }
@media (min-width: 701px) {
  .protected-work.dune .work-image {
    position: absolute; top: 50%; left: 50%; width: 100svh; height: 100vw; min-width: 100%; min-height: 100%;
    transform: translate(-50%, -50%) rotate(90deg) scale(1.035); transform-origin: center;
    opacity: 0; clip-path: circle(0% at 50% 52%); filter: brightness(.14) contrast(1.35);
    animation: dune-from-void 2.45s cubic-bezier(.16,.78,.19,1) .2s forwards;
  }
  @keyframes dune-from-void {
    0% { opacity: 0; clip-path: circle(0% at 50% 52%); transform: translate(-50%, -50%) rotate(90deg) scale(1.16); filter: brightness(.05) contrast(1.5); }
    100% { opacity: 1; clip-path: circle(105% at 50% 52%); transform: translate(-50%, -50%) rotate(90deg) scale(1.035); filter: brightness(1) contrast(1); }
  }
}

.state-social { --surface: #0e0d0c; padding: 0; place-items: stretch; }
.social-field { position: relative; width: 100%; height: 100svh; overflow: hidden; background: #181210; }
.social-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; transition: object-position 550ms ease, filter 550ms ease, transform 650ms cubic-bezier(.22,.61,.36,1); }
.social-field[data-focus="instagram"] .social-image { object-position: 34% 42%; transform: scale(1.55); transform-origin: 29% 44%; filter: brightness(1.08); }
.social-field[data-focus="telegram"] .social-image { object-position: 64% 78%; transform: scale(1.48); transform-origin: 63% 77%; filter: brightness(.94) saturate(1.08); }
.social-coordinates { position: absolute; inset: 0; font-size: clamp(.6rem, .9vw, .76rem); }
.coordinate { position: absolute; color: #f3ede5; text-shadow: 0 1px 12px #060504; opacity: .92; }
.coordinate:hover, .coordinate:focus { opacity: 1; }
.coordinate-instagram { left: 17%; top: 39%; }
.coordinate-telegram { left: 56%; bottom: 23%; }
.mobile-link-hint { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.state-music { --surface: #111010; }
.music-selector { width: min(100%, 112rem); }
.music-intro { margin: 0 0 1.1rem; font-size: .61rem; opacity: .68; }
.worlds { display: grid; grid-template-columns: repeat(3, 1fr); min-height: min(48vw, 30rem); overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.world { position: relative; min-height: 20rem; overflow: hidden; isolation: isolate; color: #f0ece5; }
.world + .world { border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.world-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .18; filter: brightness(.62); transition: opacity 360ms ease, transform 600ms ease, filter 360ms ease; z-index: 0; animation: settled-cover 2.8s ease-out var(--slot-delay, 0ms) forwards; }
.world:hover .world-image, .world:focus .world-image { opacity: .9; filter: brightness(.95); transform: scale(1.04); }
.world > span:last-child { position: absolute; z-index: 2; left: 1.25rem; top: 50%; transform: translateY(-50%); font-size: clamp(.75rem, 1.15vw, 1rem); }
.slot-strip { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-rows: repeat(5, 20%); height: 500%; transform: translateY(0); pointer-events: none; animation: slot-stop 2.45s cubic-bezier(.23,.71,.25,1) var(--slot-delay, 0ms) both, slot-release 2.75s linear var(--slot-delay, 0ms) forwards; }
.slot-cell { display: block; width: 100%; height: 100%; background-position: center; background-size: cover; filter: brightness(.72) saturate(.82); }
@keyframes slot-stop {
  0% { transform: translateY(0); }
  55% { transform: translateY(-61%); }
  76% { transform: translateY(-83%); }
  89% { transform: translateY(-77.5%); }
  100% { transform: translateY(-80%); }
}
@keyframes slot-release { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes settled-cover { 0%, 82% { opacity: .18; filter: brightness(.62); } 100% { opacity: .76; filter: brightness(.82); } }
.state-cover, .state-mood { padding: 0; place-items: stretch; }
.music-tunnel { position: relative; width: 100%; height: 100svh; overflow: hidden; }
.tunnel-image { position: absolute; inset: 0; background: #090909; }
.tunnel-photo { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.tunnel-copy { position: absolute; z-index: 1; left: clamp(1.2rem, 7vw, 7rem); bottom: 15%; display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; padding: .7rem .78rem; background: color-mix(in srgb, #080909 78%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 17%, transparent); font-size: .61rem; }
.tunnel-copy > span { opacity: .6; }
.tunnel-copy strong { font-size: .75rem; font-weight: 500; }
.text-action, .external-link { font-size: .61rem; line-height: 1.45; }
.text-action:hover, .external-link:hover { text-decoration: underline; text-underline-offset: .24em; }
.text-action.muted { opacity: .55; margin-top: .55rem; }
.play-action { margin-top: .4rem; }
.external-link { color: inherit; opacity: .88; text-decoration: none; }
.tone-soundcloud { --surface: #151112; }
.tone-spotify { --surface: #0d261d; }
.tone-yandex { --surface: #271b11; }
.audio-error { margin: 0; font-size: .59rem; color: #f3c8c4; }

.state-same { --surface: #dfdcd1; color: #111415; }
.same-work { width: min(100%, 82rem); }
.same-pair { display: grid; grid-template-columns: 1fr 1fr; align-items: start; justify-content: center; gap: clamp(.7rem, 3vw, 3.5rem); }
.same-half { position: relative; display: block; min-width: 0; will-change: transform; }
.same-half:first-child { animation: same-left-arrive 1.18s cubic-bezier(.16,.78,.2,1) 90ms both, same-left-pulse 720ms ease-in-out 1.38s 2; }
.same-half:nth-child(2) { animation: same-right-arrive 1.18s cubic-bezier(.16,.78,.2,1) 90ms both, same-right-pulse 720ms ease-in-out 1.38s 2; }
@keyframes same-left-arrive { from { transform: translateX(-118vw); } to { transform: translateX(0); } }
@keyframes same-right-arrive { from { transform: translateX(118vw); } to { transform: translateX(0); } }
@keyframes same-left-pulse { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-.52rem); } 58% { transform: translateX(.18rem); } }
@keyframes same-right-pulse { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(.52rem); } 58% { transform: translateX(-.18rem); } }
.same-image { width: 100%; height: auto; max-height: 67svh; display: block; object-fit: contain; }
.same-half span { position: absolute; right: .35rem; bottom: .35rem; font-size: .52rem; padding: .22rem .28rem; background: color-mix(in srgb, #e9e5da 75%, transparent); opacity: 0; transition: opacity 180ms ease; }
.same-half:hover span, .same-half:focus span { opacity: 1; }
.same-caption { display: flex; flex-direction: column; align-items: flex-start; gap: .32rem; margin-top: 1rem; font-size: .62rem; }
.same-caption strong { font-size: .73rem; font-weight: 500; }
.same-caption span { font-size: .54rem; opacity: .62; }
.mobile-instruction { display: none; }
.state-same .route-control, .state-same .audio-status { color: #111415; }
.state-same .audio-status { background: color-mix(in srgb, #dfdcd1 87%, transparent); }

.state-networking { --surface: #0b0c0d; padding: 0; place-items: stretch; }
.networking-work { position: relative; min-height: 100svh; }
.networking-image { width: 100%; height: 100svh; object-fit: cover; object-position: 50% 60%; display: block; }
.wire-field { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.wire { position: absolute; display: block; width: 58vw; height: 32vh; border: 1px solid transparent; border-bottom-color: color-mix(in srgb, #d7f6d2 68%, transparent); border-radius: 50%; opacity: .56; filter: drop-shadow(0 0 4px rgba(114, 238, 239, .42)); }
.wire::after { content: ""; position: absolute; width: .42rem; height: .42rem; border-radius: 50%; background: #e4fff1; box-shadow: 0 0 5px 2px rgba(123, 255, 235, .75), 0 0 16px 5px rgba(26, 207, 226, .32); animation: wire-spark 4.3s ease-in-out infinite; }
.wire-one { left: -18vw; bottom: 8vh; transform: rotate(-11deg); }
.wire-one::after { right: 22%; bottom: -.27rem; animation-delay: .4s; }
.wire-two { right: -26vw; top: 17vh; width: 63vw; transform: rotate(14deg); opacity: .38; }
.wire-two::after { left: 37%; bottom: -.27rem; animation-delay: 1.8s; }
.wire-three { left: 20vw; bottom: -17vh; width: 43vw; height: 25vh; transform: rotate(4deg); opacity: .33; }
.wire-three::after { left: 49%; bottom: -.27rem; animation-delay: 3.1s; }
@keyframes wire-spark { 0%, 65%, 100% { opacity: .12; transform: scale(.35); } 71% { opacity: 1; transform: scale(1.35); } 77% { opacity: .3; transform: scale(.6); } }
.networking-copy { position: absolute; z-index: 2; left: clamp(1.2rem, 4vw, 4.5rem); bottom: clamp(5rem, 15vh, 10rem); display: flex; flex-direction: column; gap: .55rem; font-size: .65rem; }
.networking-copy > span { font-size: .5rem; opacity: .65; }
.networking-link { font-size: .8rem; }

.inspect-dialog { width: min(94vw, 58rem); height: min(94svh, 62rem); border: 0; padding: 1rem; background: #dfdcd1; color: #111415; }
.inspect-dialog::backdrop { background: rgba(5, 6, 6, .84); }
.inspect-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .75rem; }
.inspect-top, .inspect-bottom { display: flex; justify-content: space-between; font-size: .61rem; }
.inspect-image { width: 100%; max-height: 100%; height: 100%; object-fit: contain; }

@media (max-width: 700px) {
  :root { font-size: 13px; }
  .stage { padding: 1rem; padding-bottom: 4.2rem; }
  .route-control { right: 1rem; bottom: max(.8rem, env(safe-area-inset-bottom)); }
  .audio-status { left: 1rem; bottom: max(.8rem, env(safe-area-inset-bottom)); max-width: 61vw; }
  .state-open, .state-work, .state-social, .state-cover, .state-mood { padding: 0; }
  .opener-work { width: auto; min-width: 0; }
  .roman-mark { bottom: 14%; left: 10%; font-size: .62rem; }
  .enter-button { top: 50%; right: auto; bottom: auto; left: 50%; }
  .work-caption { right: 10%; bottom: 14%; }
  .protected-work.dune .work-caption { left: 10%; right: auto; bottom: 14%; }
  .protected-work.dune .work-image {
    object-position: 50% 50%; opacity: 0; clip-path: circle(0% at 50% 52%);
    animation: dune-mobile-from-void 2.15s cubic-bezier(.16,.78,.2,1) .2s forwards;
  }
  @keyframes dune-mobile-from-void {
    0% { opacity: 0; clip-path: circle(0% at 50% 52%); transform: scale(1.12); filter: brightness(.05) contrast(1.5); }
    100% { opacity: 1; clip-path: circle(110% at 50% 52%); transform: scale(1); filter: brightness(1) contrast(1); }
  }
  .social-field { width: 100%; height: 100svh; }
  .social-image { object-position: 49% 54%; }
  .social-field[data-focus="instagram"] .social-image { transform: scale(1.72); transform-origin: 29% 43%; }
  .social-field[data-focus="telegram"] .social-image { transform: scale(1.66); transform-origin: 63% 78%; }
  .coordinate-instagram { left: 10%; top: 38%; }
  .coordinate-telegram { left: 46%; bottom: 25%; }
  .mobile-link-hint { position: absolute; display: none; font-size: .52rem; color: #f3ede5; text-shadow: 0 1px 12px #060504; }
  .social-field[data-tap-selection="instagram"] .mobile-link-hint { display: block; left: 10%; top: calc(38% + 1.25rem); }
  .social-field[data-tap-selection="telegram"] .mobile-link-hint { display: block; left: 46%; bottom: calc(25% - 1.25rem); }
  .worlds { min-height: 58svh; grid-template-columns: repeat(3, 1fr); }
  .world { min-height: 0; }
  .world > span:last-child { left: .75rem; top: auto; bottom: 1.2rem; transform: none; writing-mode: vertical-rl; }
  .world-image { opacity: .47; }
  .music-tunnel { width: 100%; height: 100svh; }
  .tunnel-image { max-height: none; }
  .tunnel-photo { max-height: none; object-fit: cover; }
  .tunnel-copy { left: 1rem; bottom: 14%; gap: .58rem; }
  .same-work { width: min(100%, 32rem); }
  .same-pair { gap: .45rem; }
  .same-image { max-height: 53svh; }
  .same-half span { opacity: 1; }
  .mobile-instruction { display: block; }
  .networking-image { object-position: 56% 60%; }
  .networking-copy { left: 1.2rem; bottom: 18%; }
  .wire { width: 112vw; height: 19vh; }
  .wire-one { left: -42vw; bottom: 12vh; }
  .wire-two { right: -55vw; top: 19vh; }
  .wire-three { left: -8vw; bottom: -8vh; width: 90vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .residual { display: none; }
  .open-image { opacity: 1; clip-path: none; transform: none; filter: none; animation: none !important; }
  .roman-mark { width: auto; opacity: 1; animation: none !important; }
  .enter-button { opacity: .88; animation: none !important; }
  .enter-copy { width: auto; animation: none !important; }
  .slot-strip { opacity: 0; transform: translateY(-80%); animation: none !important; }
  .world-image { opacity: .76; filter: brightness(.82); animation: none !important; }
  .protected-work.dune .work-image { opacity: 1; clip-path: none; filter: none; animation: none !important; }
  .same-half { animation: none !important; transform: none !important; }
}