:root {
  --paper: #f6f1e6;
  --ink: #111114;
  --muted: #6a665f;
  --violet: #7f4cff;
  --acid: #bdff16;
  --coral: #e22a59;
  --chrome: #c5cbd2;
  --line: rgba(17, 17, 20, 0.18);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  --font-display: "Archivo Black", Impact, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --happly-banner-height: 34px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  letter-spacing: 0;
  overflow-x: hidden;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

@media (pointer: fine) {
  html.has-space-cursor,
  html.has-space-cursor body,
  html.has-space-cursor body *,
  html.has-space-cursor a,
  html.has-space-cursor button,
  html.has-space-cursor [role="button"],
  html.has-space-cursor summary,
  html.has-space-cursor label,
  html.has-space-cursor .gate-piece,
  html.has-space-cursor [data-draggable] {
    cursor: none !important;
  }

  html.has-space-cursor .zrm-cursor,
  html.has-space-cursor .zw-cursor-orbit {
    display: none !important;
  }
}

.space-cursor,
.space-cursor-trails {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
}

.space-cursor {
  z-index: 30000;
  width: 28px;
  height: 36px;
  opacity: 0;
  transform: translate3d(-120px, -120px, 0);
  transform-origin: 50% 50%;
  transition: opacity 160ms ease;
  contain: layout paint style;
}

html.is-space-cursor-active .space-cursor {
  opacity: 1;
}

html.is-space-cursor-over-text .space-cursor {
  opacity: 0.28;
}

.space-cursor-trails {
  inset: 0;
  z-index: 29999;
  overflow: hidden;
}

.space-cursor-helmet,
.space-cursor-body,
.space-cursor-pack,
.space-cursor-arm,
.space-cursor-leg,
.space-cursor-jet {
  position: absolute;
  display: block;
}

.space-cursor-helmet {
  left: 3px;
  top: 0;
  z-index: 5;
  width: 22px;
  height: 26px;
  border: 1px solid #baff67;
  border-radius: 54% 54% 48% 48% / 62% 62% 38% 38%;
  background:
    radial-gradient(circle at 34% 20%, rgba(232, 255, 188, 0.9) 0 10%, transparent 11%),
    radial-gradient(circle at 70% 78%, rgba(4, 70, 30, 0.32) 0 18%, transparent 19%),
    linear-gradient(150deg, #b9ff58 0%, #49df52 48%, #118b3b 100%);
  box-shadow:
    inset -3px -4px 6px rgba(4, 72, 28, 0.26),
    0 2px 0 rgba(5, 5, 5, 0.12),
    0 0 10px rgba(102, 255, 98, 0.28);
}

.space-cursor-helmet::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 5px;
  height: 1px;
  border-radius: 999px;
  background: rgba(4, 55, 27, 0.58);
  transform: translateX(-50%);
}

.space-cursor-visor {
  position: absolute;
  left: 5px;
  top: 9px;
  width: 5px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 26%, rgba(204, 255, 176, 0.78) 0 13%, transparent 14%),
    linear-gradient(180deg, #05210f 0%, #082a15 100%);
  box-shadow: 7px 0 0 #071f10;
}

.space-cursor-visor::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  width: 5px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 26%, rgba(204, 255, 176, 0.6) 0 11%, transparent 12%);
}

.space-cursor-body {
  display: none;
}

.space-cursor-pack,
.space-cursor-arm,
.space-cursor-leg,
.space-cursor-jet {
  display: none;
}

.space-cursor-trail {
  position: fixed;
  left: var(--trail-x);
  top: var(--trail-y);
  width: var(--trail-size);
  height: var(--trail-size);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 30%, rgba(236, 255, 229, 0.95) 0 11%, transparent 12%),
    radial-gradient(circle, rgba(102, 255, 128, 0.88) 0 28%, rgba(52, 239, 96, 0.46) 46%, rgba(18, 180, 68, 0) 76%);
  filter: blur(0.35px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.62);
  animation: spaceCursorTrail 640ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.space-cursor-trail::after {
  content: "";
  position: absolute;
  left: 56%;
  top: 12%;
  width: 36%;
  height: 36%;
  border-radius: 999px;
  background: rgba(207, 255, 197, 0.62);
  transform: translate(-50%, -50%);
}

@keyframes spaceCursorTrail {
  0% {
    opacity: 0.86;
    transform: translate(-50%, -50%) scale(0.58);
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--trail-drift-x)), calc(-50% + var(--trail-drift-y))) scale(1.8);
  }
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .space-cursor,
  .space-cursor-trails {
    display: none;
  }
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px);
  mix-blend-mode: multiply;
}

.happly-top-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 13000;
  height: var(--happly-banner-height);
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: #050505;
  color: #fff;
  font-family: "Karla", "Inter", Arial, sans-serif;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 800;
  line-height: var(--happly-banner-height);
  letter-spacing: 0.01em;
  text-transform: lowercase;
  pointer-events: none;
}

.happly-top-banner-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: happlyTopBannerMarquee 18s linear infinite;
  will-change: transform;
}

.happly-top-banner-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 100%;
}

.happly-top-banner span {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 clamp(22px, 3.2vw, 48px);
  white-space: nowrap;
}

.happly-top-banner span::after {
  content: "\1F4A5";
  position: absolute;
  right: -7px;
  top: 50%;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1em;
  line-height: 1;
  transform: translateY(-50%);
}

@keyframes happlyTopBannerMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .happly-top-banner-track {
    animation: none;
  }
}

.entry {
  position: fixed;
  inset: 0;
  z-index: 40;
  min-height: 100vh;
  overflow: hidden;
  background: #10100f;
  transition: transform 760ms cubic-bezier(0.76, 0, 0.24, 1), opacity 520ms ease;
}

/* ZUNGK Readymag-style world canvas */
body[data-view="zungk"] {
  background: #050505;
}

body[data-view="zungk"] .gate-menu.app-menu {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 12000;
  width: min(96vw, 620px);
  transform: translateX(-50%);
}

body[data-view="zungk"] .gate-menu.app-menu button {
  background: rgba(255, 255, 255, 0.92);
  color: #090909;
  border-color: #090909;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.92);
}

body[data-view="zungk"] .gate-menu.app-menu button.is-active {
  background: #fef019;
  color: #050505;
}

.zungk-view {
  background: #050505;
}

.zungk-readymag {
  --zrm-black: #050505;
  --zrm-paper: #f2eee2;
  --zrm-yellow: #fef019;
  --zrm-red: #b70e18;
  --zrm-hot: #ff3232;
  --zrm-blue: #2457af;
  --zrm-acid: #c8ff00;
  position: relative;
  min-height: 100svh;
  overflow-x: clip;
  background:
    radial-gradient(circle at 72% 18%, rgba(183, 14, 24, 0.12), transparent 28vw),
    linear-gradient(180deg, #020202 0%, #080808 54%, #020202 100%);
  color: var(--zrm-paper);
  font-family: "Inter", Arial, sans-serif;
  cursor: none;
}

.zrm-legacy[hidden] {
  display: none !important;
}

.zrm-noise,
.zrm-scanline {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.zrm-noise {
  opacity: 0.22;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 9px 9px, 13px 13px, 3px 100%;
}

.zrm-scanline {
  opacity: 0.16;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255, 255, 255, 0.09) 4px);
}

.zrm-cursor {
  position: fixed;
  left: var(--zrm-cursor-x, 50vw);
  top: var(--zrm-cursor-y, 50vh);
  z-index: 13000;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--zrm-acid);
  border-radius: 50%;
  color: var(--zrm-acid);
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
  display: grid;
  place-items: center;
  pointer-events: none;
  mix-blend-mode: difference;
}

.zrm-fixed-ui {
  position: fixed;
  top: 66px;
  left: 8px;
  right: 8px;
  z-index: 11000;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--zrm-paper);
  font-family: "Press Start 2P", monospace;
  font-size: clamp(7px, 0.9vw, 10px);
  letter-spacing: 0;
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 1px 0 #000;
  mix-blend-mode: difference;
}

.zrm-fixed-ui i {
  font-style: normal;
  color: var(--zrm-yellow);
}

.zrm-page-rail {
  position: fixed;
  left: 10px;
  top: 132px;
  z-index: 11000;
  display: grid;
  gap: 8px;
}

.zrm-page-rail button {
  width: 78px;
  min-height: 24px;
  padding: 5px 6px;
  border: 1px solid rgba(242, 238, 226, 0.72);
  background: rgba(5, 5, 5, 0.72);
  color: var(--zrm-paper);
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
  text-align: left;
  cursor: pointer;
}

.zrm-page-rail button.is-active,
.zrm-page-rail button:hover {
  background: var(--zrm-yellow);
  color: #050505;
  border-color: var(--zrm-yellow);
}

.zrm-scroll-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
}

.zrm-panel {
  --p: 0;
  position: relative;
  min-height: 185svh;
  overflow: clip;
  background: var(--zrm-black);
}

.zrm-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background:
    linear-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: translateY(calc(var(--p) * -38px));
  pointer-events: none;
}

.zrm-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
}

.zrm-grid {
  position: absolute;
  inset: 18vh 8vw 15vh 9vw;
  border: 1px solid rgba(242, 238, 226, 0.2);
  opacity: calc(0.45 + var(--p) * 0.35);
  background:
    linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 36px 36px;
}

.zrm-small {
  position: absolute;
  z-index: 5;
  max-width: 420px;
  margin: 0;
  color: var(--zrm-paper);
  font-family: "Press Start 2P", monospace;
  font-size: clamp(7px, 0.85vw, 11px);
  line-height: 1.7;
  text-transform: uppercase;
}

.zrm-small-a {
  top: 30vh;
  right: 9vw;
}

.zrm-small-b {
  right: 12vw;
  bottom: 18vh;
}

.zrm-title,
.zrm-mega,
.zrm-map-title,
.zrm-end-title {
  position: absolute;
  z-index: 3;
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.78;
}

.zrm-title {
  left: -3vw;
  top: 24vh;
  color: rgba(242, 238, 226, 0.04);
  font-size: clamp(118px, 20vw, 310px);
  -webkit-text-stroke: 1px rgba(242, 238, 226, 0.28);
  text-shadow: 0 0 24px rgba(246, 216, 48, 0.11);
  transform: translate3d(calc(var(--p) * -7vw), calc(var(--p) * -5vh), 0);
}

.zrm-title span {
  display: block;
}

.zrm-intro-copy,
.zrm-feed-copy,
.zrm-vrown-copy,
.zrm-caption,
.zrm-end-copy,
.zrm-readout,
.zrm-zone-readout {
  position: absolute;
  z-index: 8;
  margin: 0;
  color: var(--zrm-paper);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(13px, 1.25vw, 17px);
  font-weight: 800;
  line-height: 1.36;
  text-transform: uppercase;
}

.zrm-intro-copy {
  right: 7vw;
  bottom: 24vh;
  width: min(42vw, 560px);
  font-family: "Press Start 2P", monospace;
  font-size: clamp(8px, 0.8vw, 12px);
  z-index: 12;
  text-shadow: 0 2px 0 #000, 0 0 12px #000;
}

.zrm-yellow-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 20vh;
  background: var(--zrm-yellow);
  transform: translateY(calc(var(--p) * 22vh));
}

.zrm-layer,
.zrm-obj,
.zrm-inspect {
  position: absolute;
  z-index: 7;
  transform:
    translate3d(calc(var(--p) * var(--dx, 0px)), calc(var(--p) * var(--dy, 0px)), 0)
    rotate(var(--r, 0deg))
    scale(var(--s, 1));
  will-change: transform;
}

.zrm-obj {
  height: auto;
  object-fit: contain;
  filter: saturate(0.88) contrast(1.1) drop-shadow(0 22px 26px rgba(0, 0, 0, 0.42));
  user-select: none;
  pointer-events: none;
}

.zrm-i01 { left: 8vw; top: 17vh; width: min(19vw, 260px); --dx: -80px; --dy: 70px; --r: -7deg; }
.zrm-i02 { right: 13vw; top: 17vh; width: min(16vw, 210px); --dx: 60px; --dy: -80px; --r: 12deg; }
.zrm-i03 { left: 20vw; top: 44vh; width: min(22vw, 300px); --dx: 130px; --dy: 40px; --r: -13deg; }
.zrm-i04 { right: 5vw; top: 36vh; width: min(20vw, 270px); --dx: -110px; --dy: 110px; --r: -6deg; }
.zrm-i05 { right: 18vw; bottom: 12vh; width: min(14vw, 180px); --dx: 90px; --dy: -70px; --r: 18deg; }

.zrm-feed {
  background: #070707;
}

.zrm-red-photo {
  position: absolute;
  top: 8vh;
  left: 27vw;
  z-index: 4;
  width: min(42vw, 600px);
  height: 24vh;
  overflow: hidden;
  background: var(--zrm-red);
  transform: translateY(calc(var(--p) * -18vh));
  mix-blend-mode: screen;
}

.zrm-red-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.4);
  opacity: 0.68;
  mix-blend-mode: multiply;
}

.zrm-mega {
  left: -3vw;
  top: 25vh;
  font-size: clamp(74px, 12vw, 190px);
}

.zrm-mega-red {
  color: rgba(183, 14, 24, 0.76);
  text-shadow: 0 0 22px rgba(183, 14, 24, 0.35);
  transform: translateX(calc(var(--p) * -12vw));
}

.zrm-feed-copy {
  right: 8vw;
  top: 42vh;
  width: min(35vw, 440px);
  color: #f5f1e8;
}

.zrm-tags span,
.zrm-receipts span,
.zrm-strips span {
  position: absolute;
  z-index: 9;
  display: inline-block;
  padding: 7px 9px;
  border: 1px solid #0a0a0a;
  background: var(--zrm-paper);
  color: #0a0a0a;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(7px, 0.75vw, 10px);
  line-height: 1.4;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.72);
}

.zrm-tags span:nth-child(1) { left: 9vw; top: 15vh; transform: rotate(-3deg) translateY(calc(var(--p) * 90px)); }
.zrm-tags span:nth-child(2) { right: 18vw; top: 19vh; transform: rotate(5deg) translateY(calc(var(--p) * -80px)); }
.zrm-tags span:nth-child(3) { left: 12vw; bottom: 24vh; transform: rotate(8deg) translateY(calc(var(--p) * -120px)); }
.zrm-tags span:nth-child(4) { right: 9vw; bottom: 22vh; transform: rotate(-5deg) translateY(calc(var(--p) * 110px)); }
.zrm-tags span:nth-child(5) { left: 38vw; top: 57vh; transform: rotate(3deg) translateY(calc(var(--p) * -85px)); }
.zrm-tags span:nth-child(6) { left: 54vw; bottom: 12vh; transform: rotate(-6deg) translateY(calc(var(--p) * 130px)); }
.zrm-tags span:nth-child(7) { left: 24vw; top: 26vh; transform: rotate(2deg) translateY(calc(var(--p) * -70px)); }
.zrm-tags span:nth-child(8) { right: 28vw; bottom: 38vh; transform: rotate(-8deg) translateY(calc(var(--p) * 95px)); }

.zrm-outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 238, 226, 0.88);
  transform: translateX(calc(var(--p) * 7vw));
}

.zrm-caption-left {
  left: 8vw;
  top: 18vh;
  width: min(30vw, 420px);
}

.zrm-inspect {
  padding: 0;
  border: 1px solid rgba(242, 238, 226, 0.7);
  background: #111;
  color: var(--zrm-paper);
  cursor: pointer;
  box-shadow: 0 18px 24px rgba(0, 0, 0, 0.45);
}

.zrm-inspect img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.zrm-inspect span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 5px 7px;
  background: #050505;
  color: var(--zrm-yellow);
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
}

.zrm-inspect:hover,
.zrm-inspect.is-active {
  border-color: var(--zrm-yellow);
  filter: saturate(1.2);
  box-shadow: 8px 8px 0 var(--zrm-yellow);
}

.zrm-card-a { left: 49vw; top: 17vh; width: min(21vw, 290px); --dx: -110px; --dy: 80px; --r: -6deg; }
.zrm-card-b { left: 19vw; bottom: 14vh; width: min(18vw, 250px); --dx: 120px; --dy: -100px; --r: 7deg; }
.zrm-card-c { right: 10vw; bottom: 19vh; width: min(22vw, 310px); --dx: -90px; --dy: -60px; --r: -4deg; }

.zrm-readout {
  right: 8vw;
  top: 70vh;
  width: min(36vw, 460px);
  color: var(--zrm-yellow);
  font-family: "Press Start 2P", monospace;
  font-size: clamp(8px, 0.78vw, 11px);
}

.zrm-vrown {
  background: var(--zrm-paper);
  color: #050505;
}

.zrm-vrown::before {
  opacity: 0.18;
  background:
    linear-gradient(#000 1px, transparent 1px),
    linear-gradient(90deg, #000 1px, transparent 1px);
  background-size: 42px 42px;
}

.zrm-paper-block {
  position: absolute;
  inset: 16vh 8vw 14vh 8vw;
  z-index: 1;
  background: #f6f1e3;
  border: 1px solid rgba(5, 5, 5, 0.18);
  transform: rotate(calc((var(--p) - 0.4) * -1deg));
}

.zrm-vrown-small {
  top: 18vh;
  left: 9vw;
  color: #050505;
}

.zrm-vrown-title {
  z-index: 5;
  left: 7vw;
  top: 26vh;
  color: #050505;
  transform: translateX(calc(var(--p) * -9vw));
}

.zrm-vrown-copy {
  right: 10vw;
  top: 25vh;
  width: min(32vw, 460px);
  color: #050505;
}

.zrm-receipts span:nth-child(1) { right: 9vw; top: 52vh; transform: rotate(5deg) translateY(calc(var(--p) * 90px)); background: var(--zrm-yellow); }
.zrm-receipts span:nth-child(2) { right: 17vw; top: 65vh; transform: rotate(-4deg) translateY(calc(var(--p) * -70px)); }
.zrm-receipts span:nth-child(3) { left: 39vw; bottom: 13vh; transform: rotate(7deg) translateY(calc(var(--p) * 110px)); background: #ff4bb8; }
.zrm-receipts span:nth-child(4) { right: 4vw; bottom: 12vh; transform: rotate(-8deg) translateY(calc(var(--p) * -90px)); background: #99c7ff; }

.zrm-v01 { left: 12vw; bottom: 10vh; width: min(17vw, 220px); --dx: 100px; --dy: -60px; --r: -11deg; }
.zrm-v02 { right: 14vw; bottom: 16vh; width: min(15vw, 190px); --dx: -110px; --dy: -80px; --r: 14deg; }

.zrm-junk {
  background:
    linear-gradient(90deg, rgba(183, 14, 24, 0.38), transparent 38%),
    #040404;
}

.zrm-junk-title {
  left: -2vw;
  top: 20vh;
  color: rgba(246, 216, 48, 0.92);
  transform: translate3d(calc(var(--p) * 10vw), calc(var(--p) * -4vh), 0);
}

.zrm-caption-right {
  right: 7vw;
  top: 19vh;
  width: min(31vw, 430px);
  color: var(--zrm-paper);
}

.zrm-j01 { left: 12vw; top: 15vh; width: min(20vw, 270px); --dx: -100px; --dy: 90px; --r: -14deg; }
.zrm-j02 { right: 10vw; top: 45vh; width: min(16vw, 220px); --dx: 80px; --dy: -120px; --r: 10deg; }
.zrm-j03 { left: 34vw; bottom: 10vh; width: min(16vw, 210px); --dx: -80px; --dy: -90px; --r: -8deg; }
.zrm-j04 { right: 30vw; top: 13vh; width: min(13vw, 170px); --dx: 110px; --dy: 100px; --r: 18deg; }

.zrm-strips span:nth-child(1) { left: 9vw; bottom: 20vh; background: var(--zrm-red); color: var(--zrm-paper); transform: rotate(-5deg) translateY(calc(var(--p) * -90px)); }
.zrm-strips span:nth-child(2) { right: 14vw; bottom: 18vh; background: var(--zrm-acid); transform: rotate(4deg) translateY(calc(var(--p) * 80px)); }
.zrm-strips span:nth-child(3) { left: 47vw; top: 56vh; background: var(--zrm-paper); transform: rotate(8deg) translateY(calc(var(--p) * -110px)); }

.zrm-map {
  min-height: 165svh;
  background: #090909;
}

.zrm-map-small {
  left: 9vw;
  top: 17vh;
}

.zrm-map-title {
  left: -1vw;
  top: 22vh;
  font-size: clamp(110px, 18vw, 270px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 238, 226, 0.9);
  transform: translateX(calc(var(--p) * -6vw));
}

.zrm-zone-board {
  position: absolute;
  z-index: 9;
  right: 7vw;
  top: 25vh;
  display: grid;
  width: min(42vw, 560px);
  border-top: 1px solid rgba(242, 238, 226, 0.7);
}

.zrm-zone-board button {
  min-height: 58px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid rgba(242, 238, 226, 0.7);
  background: rgba(5, 5, 5, 0.78);
  color: var(--zrm-paper);
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(18px, 2.2vw, 34px);
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}

.zrm-zone-board button:hover,
.zrm-zone-board button.is-active {
  background: var(--zrm-yellow);
  color: #050505;
}

.zrm-zone-readout {
  right: 7vw;
  bottom: 11vh;
  width: min(42vw, 560px);
  color: var(--zrm-yellow);
  font-family: "Press Start 2P", monospace;
  font-size: clamp(8px, 0.8vw, 12px);
}

.zrm-end {
  min-height: 145svh;
  background: #050505;
}

.zrm-end-title {
  left: -2vw;
  top: 18vh;
  font-size: clamp(88px, 15vw, 240px);
  color: var(--zrm-paper);
  transform: translateX(calc(var(--p) * -6vw));
}

.zrm-end-copy {
  right: 8vw;
  bottom: 18vh;
  width: min(37vw, 470px);
  color: var(--zrm-yellow);
  font-family: "Press Start 2P", monospace;
  font-size: clamp(8px, 0.8vw, 12px);
}

.zrm-e01 { right: 9vw; top: 12vh; width: min(24vw, 330px); --dx: -90px; --dy: 80px; --r: 7deg; }
.zrm-e02 { left: 12vw; bottom: 12vh; width: min(18vw, 250px); --dx: 120px; --dy: -70px; --r: -9deg; }
.zrm-e03 { right: 34vw; bottom: 9vh; width: min(22vw, 300px); --dx: -70px; --dy: -120px; --r: 3deg; }

@media (max-width: 760px) {
  body[data-view="zungk"] .gate-menu.app-menu {
    top: 8px;
    width: calc(100vw - 12px);
  }

  body[data-view="zungk"] .gate-menu.app-menu button {
    min-width: 0;
    padding: 8px 7px;
    font-size: 11px;
  }

  .zungk-readymag {
    cursor: auto;
  }

  .zrm-cursor {
    display: none;
  }

  .zrm-fixed-ui {
    top: 61px;
    font-size: 6px;
  }

  .zrm-fixed-ui span:nth-child(2) {
    display: none;
  }

  .zrm-page-rail {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 8px;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
  }

  .zrm-page-rail button {
    width: auto;
    min-height: 22px;
    padding: 5px 3px;
    font-size: 5.5px;
    text-align: center;
  }

  .zrm-panel {
    min-height: 175svh;
  }

  .zrm-stage {
    min-height: 620px;
  }

  .zrm-title {
    left: -7vw;
    top: 23vh;
    font-size: clamp(76px, 25vw, 126px);
  }

  .zrm-mega,
  .zrm-end-title {
    left: -5vw;
    top: 24vh;
    font-size: clamp(54px, 18vw, 90px);
  }

  .zrm-map-title {
    left: -4vw;
    top: 21vh;
    font-size: clamp(74px, 24vw, 118px);
  }

  .zrm-intro-copy,
  .zrm-feed-copy,
  .zrm-vrown-copy,
  .zrm-caption,
  .zrm-end-copy,
  .zrm-readout,
  .zrm-zone-readout {
    width: calc(100vw - 42px);
    left: 22px;
    right: auto;
    font-size: 11px;
  }

  .zrm-intro-copy,
  .zrm-end-copy {
    bottom: 20vh;
  }

  .zrm-feed-copy,
  .zrm-caption-right,
  .zrm-vrown-copy {
    top: 13vh;
  }

  .zrm-caption-left {
    top: 14vh;
  }

  .zrm-readout {
    top: auto;
    bottom: 13vh;
    font-size: 8px;
  }

  .zrm-small {
    font-size: 6px;
  }

  .zrm-small-a,
  .zrm-vrown-small,
  .zrm-map-small {
    left: 22px;
    right: auto;
    top: 12vh;
  }

  .zrm-small-b {
    right: 18px;
    bottom: 17vh;
  }

  .zrm-red-photo {
    left: 21vw;
    width: 72vw;
    height: 18vh;
  }

  .zrm-tags span,
  .zrm-receipts span,
  .zrm-strips span {
    font-size: 6px;
    padding: 5px 6px;
  }

  .zrm-i01 { left: 6vw; top: 16vh; width: 34vw; }
  .zrm-i02 { right: 2vw; top: 17vh; width: 31vw; }
  .zrm-i03 { left: 14vw; top: 49vh; width: 44vw; }
  .zrm-i04 { right: -3vw; top: 38vh; width: 43vw; }
  .zrm-i05 { right: 16vw; bottom: 12vh; width: 30vw; }

  .zrm-card-a { left: 39vw; top: 31vh; width: 48vw; }
  .zrm-card-b { left: 7vw; bottom: 28vh; width: 42vw; }
  .zrm-card-c { right: 6vw; bottom: 14vh; width: 46vw; }

  .zrm-v01 { left: 6vw; bottom: 12vh; width: 35vw; }
  .zrm-v02 { right: 6vw; bottom: 21vh; width: 32vw; }
  .zrm-j01 { left: 4vw; top: 38vh; width: 41vw; }
  .zrm-j02 { right: 4vw; top: 47vh; width: 34vw; }
  .zrm-j03 { left: 28vw; bottom: 14vh; width: 36vw; }
  .zrm-j04 { right: 13vw; top: 26vh; width: 28vw; }

  .zrm-zone-board {
    left: 22px;
    right: 22px;
    top: 35vh;
    width: auto;
  }

  .zrm-zone-board button {
    min-height: 46px;
    font-size: clamp(16px, 5.8vw, 24px);
  }

  .zrm-zone-readout {
    bottom: 13vh;
    font-size: 8px;
  }

  .zrm-e01 { right: 4vw; top: 14vh; width: 44vw; }
  .zrm-e02 { left: 6vw; bottom: 13vh; width: 36vw; }
  .zrm-e03 { right: 19vw; bottom: 27vh; width: 42vw; }
}

@media (prefers-reduced-motion: reduce) {
  .zrm-layer,
  .zrm-title,
  .zrm-mega,
  .zrm-map-title,
  .zrm-end-title,
  .zrm-tags span,
  .zrm-receipts span,
  .zrm-strips span {
    transform: none !important;
  }
}

.entry.is-hidden {
  transform: translateY(-105%);
  opacity: 0;
  pointer-events: none;
}

@keyframes menuViewExit {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-105%);
    opacity: 0;
  }
}

html.is-menu-transitioning::view-transition-group(root) {
  animation-duration: 760ms;
}

html.is-menu-transitioning::view-transition-old(root) {
  animation: menuViewExit 760ms cubic-bezier(0.76, 0, 0.24, 1) both;
}

html.is-menu-transitioning::view-transition-new(root) {
  animation: none;
}

.menu-transition-fallback {
  position: fixed;
  inset: 0;
  z-index: 240;
  pointer-events: none;
  opacity: 0;
  transform: translateY(105%);
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 244, 210, 0.05), transparent 28%),
    radial-gradient(circle at 78% 34%, rgba(255, 151, 189, 0.05), transparent 24%),
    #10100f;
  transition: transform 360ms cubic-bezier(0.76, 0, 0.24, 1), opacity 260ms ease;
}

.menu-transition-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.14) 0 1px, transparent 1.5px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px);
  background-size: 25px 25px, auto;
  mix-blend-mode: screen;
  opacity: 0.22;
}

.menu-transition-fallback.is-covering {
  opacity: 1;
  transform: translateY(0);
}

.menu-transition-fallback.is-leaving {
  opacity: 0;
  transform: translateY(-105%);
  transition-duration: 760ms, 520ms;
}

.kicker {
  margin: 0 0 12px;
  color: var(--coral);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.hero-copy h2,
.archive-copy h2,
.letter-head h2,
.game-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(52px, 12vw, 158px);
  line-height: 0.86;
  text-transform: uppercase;
  text-wrap: balance;
}

.scroll-chip,
.send-button,
.text-button {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--acid);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.send-button {
  padding: 14px 20px;
}

.scroll-chip:hover,
.send-button:hover,
.text-button:hover {
  transform: translate(4px, 4px);
  box-shadow: 3px 3px 0 var(--ink);
  background: #fff;
}

.gate-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 244, 210, 0.05), transparent 28%),
    radial-gradient(circle at 78% 34%, rgba(255, 151, 189, 0.05), transparent 24%),
    #10100f;
}

.gate-canvas {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: max(100svh, 700px);
  min-height: 700px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
}

.gate-canvas::before,
.gate-canvas::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.gate-canvas::before {
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  background:
    linear-gradient(115deg, transparent 0 54%, rgba(255, 255, 255, 0.035) 54.2% 54.6%, transparent 55%),
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.045), transparent 36%);
  opacity: 1;
  transform: none;
}

.gate-canvas::after {
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.14) 0 1px, transparent 1.5px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px);
  background-size: 25px 25px, auto;
  mix-blend-mode: screen;
  opacity: 0.22;
}

.gate-piece {
  --drag-x: 0px;
  --drag-y: 0px;
  --r: 0deg;
  --s: 1;
  position: absolute;
  z-index: var(--z, 10);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transform: translate3d(var(--drag-x), var(--drag-y), 0) rotate(var(--r)) scale(var(--s));
  transform-origin: center;
  transition: filter 160ms ease, box-shadow 160ms ease, translate 160ms ease;
  will-change: transform;
}

.gate-piece:not(.is-dragging):hover {
  translate: 0 -4px;
  filter: contrast(1.08) saturate(1.12) drop-shadow(0 14px 12px rgba(0, 0, 0, 0.35));
}

.gate-piece.is-dragging {
  z-index: 90;
  cursor: grabbing;
  filter: contrast(1.12) saturate(1.12) drop-shadow(0 18px 16px rgba(0, 0, 0, 0.42));
}

.gate-cutout {
  display: block;
  max-width: none;
  height: auto;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 14px 9px rgba(0, 0, 0, 0.42)) contrast(1.03) saturate(1.05);
}

.gate-menu {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  max-width: calc(100vw - 24px);
  z-index: 80;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  transform: none;
}

.gate-menu button,
.gate-menu a,
.gate-brand {
  border: 2px solid rgba(17, 17, 20, 0.88);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.gate-menu button,
.gate-menu a {
  display: grid;
  place-items: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 50px;
  padding: 8px 13px;
  font-size: clamp(18px, 1.75vw, 28px);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.22);
  text-shadow: 0.6px 0 0 currentColor;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}

.gate-menu button:hover,
.gate-menu a:hover,
.gate-brand:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(1px);
}

.gate-brand {
  position: absolute;
  left: 50%;
  top: clamp(568px, 88vh, 630px);
  z-index: 65;
  min-width: 162px;
  min-height: 54px;
  padding: 8px 22px;
  font-size: clamp(18px, 1.6vw, 25px);
  line-height: 1;
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.38);
}

.gate-brand:hover {
  transform: translateX(-50%) translateY(1px) rotate(-3deg);
}

.gate-thread {
  position: absolute;
  left: 40%;
  top: 0;
  z-index: 8;
  width: 560px;
  height: 125px;
  pointer-events: none;
  border-top: 4px solid #ed786d;
  border-radius: 52% 48% 0 0;
  transform: rotate(7deg);
}

.gate-thread::before,
.gate-thread::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 76px;
  height: 42px;
  border: 4px solid #ed786d;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.gate-thread::before {
  left: 40px;
  transform: rotate(-31deg);
}

.gate-thread::after {
  right: 36px;
  transform: rotate(34deg);
}

.gate-title {
  position: absolute;
  left: 49.6%;
  top: 277px;
  z-index: 40;
  width: min(280px, 28vw);
  color: #fffaf2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 5.2vw, 74px);
  font-weight: 400;
  line-height: 0.76;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.44);
  transform: translateX(-50%);
}

.gate-title span {
  display: block;
}

.gate-beads {
  --r: -9deg;
  --z: 30;
  left: 7.5%;
  top: 145px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 296px;
}

.gate-beads span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f6f4ef;
  color: #191919;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.16), 0 3px 8px rgba(0, 0, 0, 0.35);
}

.gate-sticky {
  --r: -10deg;
  --z: 34;
  left: 32.8%;
  top: 82px;
  display: grid;
  place-items: end start;
  width: 185px;
  height: 190px;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 35%),
    #d8c85f;
  color: rgba(45, 40, 18, 0.82);
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 0.92;
  text-transform: uppercase;
  box-shadow: 18px 18px 0 rgba(0, 0, 0, 0.34);
}

.gate-envelope {
  --r: 9deg;
  --z: 18;
  right: 27.5%;
  top: 70px;
  width: 270px;
  height: 180px;
  background:
    linear-gradient(145deg, transparent 49%, rgba(255, 255, 255, 0.82) 50% 73%, transparent 74%),
    linear-gradient(37deg, transparent 50%, rgba(215, 118, 157, 0.68) 51%),
    linear-gradient(-37deg, transparent 50%, rgba(236, 190, 207, 0.86) 51%),
    #e8b2cb;
  box-shadow: 18px 20px 0 rgba(0, 0, 0, 0.34);
}

.gate-envelope span {
  position: absolute;
  inset: 38px 30px auto auto;
  width: 150px;
  height: 112px;
  background: rgba(245, 244, 224, 0.92);
  transform: rotate(7deg);
  box-shadow: 0 8px 11px rgba(0, 0, 0, 0.22);
}

.gate-record {
  --r: -2deg;
  --z: 28;
  right: 31.5%;
  top: 268px;
  display: grid;
  place-items: center;
  width: 238px;
  height: 238px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f5eee2 0 17px, #111 18px 28px, transparent 29px),
    repeating-radial-gradient(circle, #141414 0 7px, #242424 8px 10px, #101010 11px 17px);
  box-shadow: 18px 18px 0 rgba(0, 0, 0, 0.28);
}

.gate-record span {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fef019;
  color: #111;
  font-family: var(--font-display);
  font-size: 14px;
}

.gate-dish {
  --r: 12deg;
  --z: 34;
  left: 8.2%;
  top: 422px;
  width: 205px;
  height: 150px;
  border-radius: 48% 52% 46% 54%;
  background:
    radial-gradient(ellipse at 40% 44%, rgba(82, 98, 206, 0.95) 0 16px, transparent 17px),
    radial-gradient(ellipse at 59% 52%, rgba(218, 69, 55, 0.95) 0 12px, transparent 13px),
    radial-gradient(ellipse at 48% 62%, rgba(50, 102, 64, 0.95) 0 17px, transparent 18px),
    #eee6d8;
  box-shadow: inset 0 0 0 13px rgba(255, 255, 255, 0.55), 16px 16px 0 rgba(0, 0, 0, 0.28);
}

.gate-flower {
  display: block;
  width: 128px;
  height: 128px;
  filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.36));
}

.gate-flower::before,
.gate-flower::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 10%, var(--petal) 0 18%, transparent 19%),
    radial-gradient(ellipse at 50% 90%, var(--petal) 0 18%, transparent 19%),
    radial-gradient(ellipse at 10% 50%, var(--petal) 0 18%, transparent 19%),
    radial-gradient(ellipse at 90% 50%, var(--petal) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 50%, #d8b765 0 9%, transparent 10%);
}

.gate-flower::after {
  transform: rotate(45deg);
  opacity: 0.72;
}

.gate-flower-blue {
  --r: -14deg;
  --z: 22;
  --petal: rgba(98, 114, 199, 0.92);
  left: 6%;
  top: 280px;
}

.gate-flower-yellow {
  --r: 11deg;
  --z: 20;
  --petal: rgba(224, 202, 113, 0.9);
  right: 9%;
  top: 205px;
}

.gate-cherries {
  --r: 9deg;
  --z: 42;
  left: 52.5%;
  top: 500px;
  width: 120px;
  height: 112px;
}

.gate-cherries::before,
.gate-cherries::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 31% 28%, #ff9292 0 7px, #b90f2b 8px 100%);
  box-shadow: 0 11px 10px rgba(0, 0, 0, 0.36);
}

.gate-cherries::before {
  left: 17px;
}

.gate-cherries::after {
  right: 9px;
}

.gate-cherries span::before,
.gate-cherries span::after {
  content: "";
  position: absolute;
  left: 49px;
  top: 6px;
  width: 42px;
  height: 78px;
  border-left: 3px solid #62b749;
  border-radius: 50%;
  transform-origin: top;
}

.gate-cherries span::before {
  transform: rotate(-25deg);
}

.gate-cherries span::after {
  transform: rotate(23deg);
}

.gate-ticket {
  --r: -7deg;
  --z: 48;
  left: 28%;
  top: 470px;
  display: grid;
  gap: 5px;
  width: 248px;
  padding: 14px 18px;
  border-top: 8px solid #e05638;
  background:
    repeating-linear-gradient(0deg, rgba(17, 17, 20, 0.18) 0 1px, transparent 1px 13px),
    #f3d9ad;
  color: #351e16;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
  box-shadow: 12px 15px 0 rgba(0, 0, 0, 0.3);
}

.gate-ticket b {
  font-family: var(--font-display);
  font-size: 18px;
}

.gate-ticket span {
  font-size: 13px;
  font-weight: 900;
}

.gate-grid-paper {
  --r: 5deg;
  --z: 26;
  right: 6.5%;
  top: 430px;
  width: 225px;
  height: 190px;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(17, 17, 20, 0.85) 23px 27px),
    repeating-linear-gradient(90deg, #e5dbb8 0 22px, rgba(17, 17, 20, 0.85) 23px 27px);
  box-shadow: 15px 16px 0 rgba(0, 0, 0, 0.3);
}

.gate-keyboard {
  --r: -18deg;
  --z: 4;
  left: clamp(-198px, -11vw, -92px);
  top: -70px;
  display: grid;
  grid-template-columns: repeat(4, 92px);
  gap: 9px;
  padding: 12px;
  color: var(--ink);
}

.gate-keyboard span {
  display: grid;
  place-items: center;
  width: 92px;
  height: 70px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
}

.gate-starfield {
  --r: -7deg;
  --z: 18;
  left: clamp(375px, 43vw, 620px);
  top: -18px;
  width: 410px;
  height: 210px;
}

.gate-starfield span {
  position: absolute;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 86px;
  line-height: 1;
}

.gate-starfield span:nth-child(1) { left: 0; top: 46px; }
.gate-starfield span:nth-child(2) { left: 80px; top: 8px; }
.gate-starfield span:nth-child(3) { left: 145px; top: 64px; }
.gate-starfield span:nth-child(4) { left: 220px; top: 22px; }
.gate-starfield span:nth-child(5) { left: 275px; top: 110px; }
.gate-starfield span:nth-child(6) { left: 330px; top: 0; }

.gate-poster,
.gate-flyer,
.gate-shirt,
.gate-badge,
.gate-typewriter,
.gate-disc,
.gate-tape {
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35);
}

.gate-poster {
  border: 5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  text-transform: uppercase;
}

.gate-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.28) saturate(1.55);
}

.gate-poster b,
.gate-poster span {
  position: absolute;
  left: 14px;
  right: 14px;
  z-index: 2;
}

.gate-poster b {
  bottom: 34px;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 0.9;
}

.gate-poster span {
  bottom: 13px;
  font-size: 11px;
  font-weight: 900;
}

.gate-poster-vrown {
  --r: 5deg;
  --z: 22;
  left: clamp(36px, 7vw, 100px);
  top: 390px;
  width: 330px;
  height: 325px;
}

.gate-poster-zungk {
  --r: -8deg;
  --z: 24;
  right: clamp(-20px, 2vw, 48px);
  top: 770px;
  width: 430px;
  height: 300px;
}

.gate-flyer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 4px solid var(--ink);
  padding: 18px;
  color: var(--ink);
  text-transform: uppercase;
}

.gate-flyer small,
.gate-flyer span {
  font-weight: 900;
  line-height: 1;
}

.gate-flyer b {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.8vw, 68px);
  line-height: 0.84;
}

.gate-flyer-blue {
  --r: -9deg;
  --z: 25;
  left: clamp(340px, 36vw, 540px);
  top: 450px;
  width: 290px;
  height: 330px;
  background: #b9d8e1;
}

.gate-flyer-blue i {
  display: block;
  width: 130px;
  height: 80px;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 7px no-repeat,
    repeating-linear-gradient(0deg, rgba(17, 17, 20, 0.4) 0 2px, transparent 2px 14px);
}

.gate-flyer-pink {
  --r: 6deg;
  --z: 30;
  left: clamp(600px, 55vw, 780px);
  top: 350px;
  width: 285px;
  height: 330px;
  background: #e5b6ce;
}

.gate-flyer-green {
  --r: 12deg;
  --z: 19;
  left: clamp(520px, 48vw, 690px);
  top: 880px;
  width: 250px;
  height: 290px;
  background: #bcff12;
}

.gate-shirt {
  display: grid;
  place-items: center;
  text-align: center;
  clip-path: polygon(28% 0, 40% 9%, 60% 9%, 72% 0, 100% 18%, 87% 45%, 78% 38%, 78% 100%, 22% 100%, 22% 38%, 13% 45%, 0 18%);
  text-transform: uppercase;
}

.gate-shirt-red {
  --r: 6deg;
  --z: 27;
  right: clamp(92px, 11vw, 175px);
  top: 330px;
  width: 300px;
  height: 275px;
  background: #d92d54;
}

.gate-shirt-red span {
  color: #fef019;
  font-family: var(--font-display);
  font-size: 54px;
}

.gate-shirt-red b {
  color: #fef019;
  font-size: 19px;
}

.gate-shirt-white {
  --r: 7deg;
  --z: 28;
  left: clamp(590px, 53vw, 760px);
  top: 990px;
  width: 390px;
  height: 330px;
  background: #eeeae0;
}

.gate-shirt-white b {
  font-family: var(--font-display);
  font-size: 27px;
}

.gate-shirt-white span {
  font-family: var(--font-display);
  font-size: 58px;
}

.gate-badge {
  --r: -12deg;
  --z: 32;
  right: clamp(52px, 6vw, 90px);
  top: 235px;
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--ink);
  color: #fef019;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 0.94;
  text-align: center;
  text-transform: lowercase;
}

.gate-typewriter {
  --r: 18deg;
  --z: 16;
  right: clamp(160px, 19vw, 280px);
  top: 72px;
  display: grid;
  grid-template-columns: repeat(4, 38px);
  gap: 3px;
  padding: 9px;
  border: 4px solid var(--ink);
  background: #e8e1ce;
}

.gate-typewriter span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 35px;
  border: 2px solid var(--ink);
  font-weight: 900;
}

.gate-disc {
  --r: -15deg;
  --z: 18;
  left: clamp(790px, 65vw, 980px);
  top: 650px;
  display: grid;
  place-items: center;
  width: 210px;
  height: 210px;
  border: 8px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle, #fef019 0 18px, var(--ink) 19px 26px, transparent 27px),
    conic-gradient(#ff315f, #fef019, #5d54ff, #ff315f);
  color: var(--ink);
  font-family: var(--font-display);
  text-transform: uppercase;
}

.gate-tape {
  --r: -4deg;
  --z: 21;
  left: clamp(150px, 18vw, 260px);
  top: 900px;
  width: 380px;
  height: 185px;
  border: 4px solid var(--ink);
  background:
    radial-gradient(circle at 30% 48%, transparent 0 35px, var(--ink) 36px 40px, transparent 41px),
    radial-gradient(circle at 70% 48%, transparent 0 35px, var(--ink) 36px 40px, transparent 41px),
    linear-gradient(#2f57be, #2f57be);
  color: #fef019;
}

.gate-tape span {
  position: absolute;
  left: 22px;
  bottom: 20px;
  font-family: var(--font-display);
  font-size: 29px;
  text-transform: uppercase;
}

.gate-photo-stack {
  --r: 8deg;
  --z: 36;
  left: 20.5%;
  top: 232px;
  width: min(255px, 21vw);
}

.gate-vrown-poster {
  --r: -9deg;
  --z: 44;
  right: 21%;
  top: 338px;
  width: min(255px, 21vw);
}

.gate-setlist-flyer {
  --r: 4deg;
  --z: 50;
  left: 33%;
  top: 394px;
  width: min(255px, 21vw);
}

.gate-szv-social-poster {
  --r: 8deg;
  --z: 46;
  right: 19%;
  top: 300px;
  width: min(235px, 19vw);
}

.gate-red-shirt {
  --r: 5deg;
  --z: 27;
  right: clamp(112px, 12vw, 190px);
  top: 344px;
  width: 285px;
  box-shadow: 12px 16px 0 rgba(0, 0, 0, 0.2);
}

.gate-blue-shirt {
  --r: 7deg;
  --z: 24;
  left: 5%;
  top: 548px;
  width: min(290px, 24vw);
  box-shadow: none;
}

.gate-band-photo {
  --r: -6deg;
  --z: 32;
  right: -1%;
  top: 525px;
  width: min(345px, 28vw);
}

.gate-purple-poster {
  --r: -12deg;
  --z: 30;
  left: 66%;
  top: 210px;
  width: min(190px, 16vw);
}

.gate-white-shirt {
  --r: -5deg;
  --z: 29;
  left: 70%;
  top: 400px;
  width: min(255px, 21vw);
  box-shadow: none;
}

.gate-orange-poster {
  --r: 5deg;
  --z: 35;
  right: 4%;
  top: 325px;
  width: min(250px, 20vw);
}

.gate-badge {
  --z: 50;
  right: clamp(62px, 7vw, 110px);
  top: 292px;
}

.gate-cutout.gate-typewriter {
  --r: -14deg;
  --z: 54;
  left: 46.5%;
  top: 388px;
  display: block;
  width: min(98px, 8vw);
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.gate-disc {
  --z: 22;
  left: clamp(720px, 62vw, 930px);
  top: 585px;
}

.gate-tape {
  --z: 24;
  left: clamp(360px, 33vw, 500px);
  top: 806px;
}

.site-shell {
  min-height: 100vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease 180ms;
}

.site-shell.is-live {
  opacity: 1;
  pointer-events: auto;
}

.topbar {
  position: fixed;
  top: 6px;
  left: 6px;
  right: 6px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 4px;
  padding: 0;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}

.brand {
  flex: 0 0 clamp(112px, 15vw, 220px);
  min-height: 60px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(21px, 2.1vw, 34px);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 2px 0 rgba(17, 17, 20, 0.22);
  transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}

.brand span {
  display: inline;
  padding: 0;
  background: transparent;
  color: inherit;
}

.brand:hover,
.nav-link:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(1px);
}

.nav {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: stretch;
  gap: 4px;
}

.topbar .nav-link {
  flex: 1 1 0;
  min-width: 0;
  min-height: 60px;
  padding: 8px 14px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(21px, 2.1vw, 34px);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 2px 0 rgba(17, 17, 20, 0.22);
  transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}

.topbar .nav-link.is-active {
  background: #fff;
  color: var(--ink);
}

.topbar .nav-link:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(1px);
}

.nav-link,
.tab {
  min-height: 38px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.nav-link {
  padding: 8px 12px;
}

.nav-link.is-active,
.tab.is-active {
  background: var(--ink);
  color: var(--paper);
}

.view {
  display: none;
  min-height: 100vh;
  padding-top: 68px;
}

.view.is-active {
  display: block;
}

.site-shell[data-view="vrown"] .topbar {
  opacity: 0;
  pointer-events: none;
}

.vrown-view {
  min-height: 100svh;
  padding-top: 0;
  overflow: visible;
  background: #fa2a2d;
}

.vrown-supari {
  position: relative;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: visible;
  background:
    linear-gradient(180deg, #fb9c21 0%, #fa2a2d 19%, #120809 35%, #f18b2b 50%, #050506 72%, #b95623 90%, #fa292c 100%);
  color: #fff;
  font-family: "Karla", var(--font-body);
  isolation: isolate;
}

.vrown-supari::before,
.vrown-supari::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vrown-supari::before {
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 3%, rgba(255, 238, 142, 0.42) 0 9%, transparent 27%),
    radial-gradient(ellipse at 47% 92%, rgba(255, 184, 82, 0.28) 0 11%, transparent 34%);
}

.vrown-supari::after {
  z-index: 3;
  opacity: 0.28;
  mix-blend-mode: screen;
  background:
    linear-gradient(104deg, transparent 0 42%, rgba(255, 243, 178, 0.44) 43%, rgba(255, 160, 70, 0.18) 47%, transparent 52%),
    radial-gradient(ellipse at 52% 14%, rgba(255, 230, 120, 0.42) 0 4%, transparent 16%),
    radial-gradient(ellipse at 46% 39%, rgba(255, 99, 38, 0.26) 0 6%, transparent 20%),
    radial-gradient(ellipse at 58% 73%, rgba(255, 70, 45, 0.24) 0 7%, transparent 22%);
  background-size: 100% 100%, 90vw 120svh, 80vw 160svh, 70vw 170svh;
  background-position: center top, center 0, center 32%, center 72%;
  filter: blur(0.5px);
  animation: vrownDescentPulse 8s ease-in-out infinite;
}

.vrown-loader {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  background: #fa292c;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.vrown-supari.is-intro .vrown-loader {
  visibility: visible;
  animation: vrownLoaderOut 1800ms cubic-bezier(0.76, 0, 0.24, 1) both;
}

.vrown-loader-mark {
  position: relative;
  display: grid;
  place-items: center;
  min-width: clamp(250px, 36vw, 520px);
  min-height: clamp(132px, 18vw, 235px);
  transform: rotate(-2deg);
}

.vrown-loader-mark::before {
  content: "";
  position: absolute;
  inset: 10% 1%;
  border: clamp(7px, 0.8vw, 12px) solid currentColor;
  clip-path: polygon(2% 50%, 24% 39%, 7% 4%, 42% 26%, 50% 10%, 58% 27%, 96% 8%, 76% 40%, 99% 49%, 77% 58%, 92% 96%, 58% 74%, 50% 90%, 42% 74%, 7% 96%, 24% 60%);
}

.vrown-loader-mark span {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 150px);
  font-style: italic;
  line-height: 0.78;
  text-transform: uppercase;
}

.vrown-loader-mark small {
  position: absolute;
  right: 6%;
  bottom: 19%;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 42px);
  letter-spacing: 0.08em;
}

.vrown-loader p {
  position: fixed;
  left: 50%;
  bottom: 8vh;
  margin: 0;
  transform: translateX(-50%);
  font-weight: 900;
  text-transform: uppercase;
}

.vrown-edge-nav {
  position: fixed;
  inset: 0;
  z-index: 92;
  pointer-events: none;
}

.vrown-edge-link {
  position: fixed;
  z-index: 93;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: "Karla", var(--font-body);
  font-size: clamp(11px, 1vw, 16px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 0.88;
  text-transform: uppercase;
  pointer-events: auto;
  text-shadow: 0 2px 0 rgba(110, 39, 17, 0.24), 0 0 14px rgba(110, 39, 17, 0.26);
  filter: drop-shadow(0 4px 0 rgba(134, 35, 21, 0.12));
}

.vrown-edge-link.is-home {
  top: 18px;
  left: 20px;
  flex-direction: column;
}

.vrown-edge-link.is-vrown {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column-reverse;
  font-size: clamp(18px, 2.5vw, 38px);
  letter-spacing: 0;
}

.vrown-edge-link.is-zungk {
  top: 18px;
  right: 20px;
  flex-direction: column;
}

.vrown-edge-link.is-letter {
  left: 20px;
  bottom: 18px;
  flex-direction: column;
}

.vrown-edge-link.is-game {
  right: 20px;
  bottom: 18px;
  flex-direction: column-reverse;
}

.vrown-edge-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(40px, 4.9vw, 66px);
  height: clamp(40px, 4.9vw, 66px);
}

.vrown-edge-link.is-vrown .vrown-edge-icon {
  width: clamp(56px, 6.8vw, 94px);
  height: clamp(38px, 4.8vw, 70px);
}

.vrown-edge-icon img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity 160ms ease, transform 160ms ease;
}

.vrown-edge-icon .is-hover {
  opacity: 0;
  transform: scale(0.9);
}

.vrown-edge-link:hover .vrown-edge-icon img:first-child {
  opacity: 0;
  transform: scale(1.08) rotate(-6deg);
}

.vrown-edge-link:hover .vrown-edge-icon .is-hover {
  opacity: 1;
  transform: scale(1.05);
}

.vrown-edge-link:hover span:last-child,
.vrown-edge-link:hover > span:first-child {
  transform: translateY(-2px);
}

.vrown-game-glyph {
  position: relative;
  display: block;
  width: clamp(46px, 5vw, 70px);
  height: clamp(46px, 5vw, 70px);
  border: 6px solid #fff;
  border-radius: 50%;
  transform: rotate(-8deg);
  transition: transform 160ms ease;
}

.vrown-game-glyph::before {
  content: "";
  position: absolute;
  left: 34%;
  top: 26%;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 24px solid #fff;
}

.vrown-edge-link:hover .vrown-game-glyph {
  transform: rotate(10deg) scale(1.08);
}

.vrown-film-grain {
  position: fixed;
  inset: 0;
  z-index: 120;
  opacity: 0.14;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 5px);
}

.vrown-hero-screen {
  position: relative;
  min-height: 156svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 17%, rgba(255, 244, 181, 0.72) 0 10%, transparent 25%),
    linear-gradient(180deg, #fb9c21 0 38%, #fb5c1d 64%, #fa2a2d 100%);
}

.vrown-hero-screen::before {
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(86px, 15vh, 158px);
  z-index: 5;
  width: min(760px, 68vw);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%) rotate(-8deg);
  background:
    radial-gradient(circle at 40% 35%, rgba(255, 255, 226, 0.95) 0 7%, rgba(255, 223, 122, 0.96) 8% 18%, transparent 19%),
    radial-gradient(circle at 62% 68%, rgba(130, 35, 47, 0.48) 0 13%, transparent 14%),
    radial-gradient(circle at 34% 72%, rgba(255, 126, 42, 0.5) 0 10%, transparent 11%),
    radial-gradient(circle at 50% 50%, #ffb63c 0 23%, #f26722 44%, #c83327 70%, #6c1922 100%);
  box-shadow:
    0 0 0 clamp(14px, 2vw, 28px) rgba(255, 248, 197, 0.09),
    0 0 0 clamp(46px, 6vw, 84px) rgba(255, 145, 55, 0.12),
    0 38px 110px rgba(103, 28, 28, 0.34);
  opacity: 0.95;
  filter: saturate(1.08);
}

.vrown-hero-screen::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 22%;
  z-index: 6;
  width: min(230px, 21vw);
  height: 96%;
  transform: translateX(-50%) rotate(-7deg);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 250, 194, 0.84) 0%, rgba(255, 174, 70, 0.46) 32%, rgba(255, 81, 41, 0.2) 66%, transparent 100%);
  filter: blur(10px);
  opacity: 0.62;
  pointer-events: none;
}

.vrown-bg-clouds {
  position: absolute;
  left: 50%;
  top: 34%;
  z-index: 9;
  width: 1500px;
  max-width: 140vw;
  height: 450px;
  transform: translateX(-50%);
  opacity: 0.9;
  animation: vrownCloudRise 1200ms 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vrown-cloud-bg {
  position: absolute;
  width: 100%;
  min-width: 900px;
  opacity: 0.96;
  animation: vrownCloudDrift 16s linear infinite;
}

.vrown-cloud-bg.one {
  left: -16%;
  top: 0;
}

.vrown-cloud-bg.two {
  left: 52%;
  top: 26%;
  animation-duration: 20s;
  animation-direction: reverse;
}

.vrown-top-cloud {
  position: absolute;
  z-index: 12;
  width: auto;
  height: clamp(86px, 10vw, 185px);
  object-fit: contain;
  opacity: 0.98;
  filter: drop-shadow(0 12px 0 rgba(179, 57, 20, 0.1));
  animation: vrownCloudRise 1050ms cubic-bezier(0.16, 1, 0.3, 1) both, vrownCloudFloat 6s ease-in-out infinite;
}

.vrown-top-cloud.left {
  left: 9%;
  top: 5%;
  animation-delay: 500ms, 1600ms;
}

.vrown-top-cloud.right {
  right: 22%;
  top: 0;
  animation-delay: 620ms, 1700ms;
}

.vrown-top-cloud.lower {
  right: 5%;
  top: 28%;
  width: min(560px, 42vw);
  height: auto;
  animation-delay: 760ms, 1800ms;
}

.vrown-rock-wrap {
  position: absolute;
  inset: 0;
  z-index: 16;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.vrown-rock {
  --rock-y: 31%;
  width: min(1560px, 112vw);
  min-width: 900px;
  max-width: none;
  transform-origin: 50% 100%;
  transform: translate3d(var(--mx, 0px), var(--rock-y), 0) scale(1);
  animation: vrownRockIn 1100ms 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vrown-headline {
  position: absolute;
  left: 50%;
  bottom: clamp(400px, 62vh, 500px);
  z-index: 34;
  width: min(760px, 82vw);
  text-align: center;
  transform: translateX(-50%) scale(0);
  transform-origin: 50% 50%;
  animation: vrownHeadlinePop 820ms 950ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.vrown-headline-kicker {
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.25vw, 18px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vrown-headline h1 {
  margin: 0;
  color: #fff;
  font-family: "Londrina Solid", var(--font-display);
  font-size: clamp(92px, 12vw, 190px);
  font-weight: 900;
  line-height: 0.72;
  text-transform: uppercase;
  text-shadow: 0 9px 0 rgba(126, 40, 22, 0.16);
}

.vrown-spark {
  position: absolute;
  display: block;
  width: 72px;
  height: 72px;
  pointer-events: none;
  opacity: 0.9;
  animation: vrownSpark 560ms steps(2) infinite;
}

.vrown-spark::before,
.vrown-spark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 100%;
  border-radius: 999px;
  background: #fff;
  transform: translateX(-50%);
}

.vrown-spark::after {
  transform: translateX(-50%) rotate(90deg);
}

.vrown-spark.one {
  left: 7%;
  top: 17%;
  transform: rotate(12deg);
}

.vrown-spark.two {
  right: 4%;
  top: 34%;
  transform: rotate(-20deg) scale(0.78);
  animation-delay: 180ms;
}

.vrown-spark.three {
  left: 50%;
  bottom: -12%;
  transform: rotate(29deg) scale(0.66);
  animation-delay: 340ms;
}

.vrown-foreground-cloud {
  position: absolute;
  left: 50%;
  bottom: -19%;
  z-index: 22;
  width: min(1420px, 120vw);
  transform: translateX(-50%);
  pointer-events: none;
  animation: vrownForegroundRise 1000ms 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vrown-foreground-cloud img {
  display: block;
  width: 100%;
  height: auto;
}

.vrown-showreel-section {
  position: relative;
  min-height: 175svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -3%, rgba(255, 218, 124, 0.54) 0 12%, transparent 38%),
    radial-gradient(ellipse at 50% 34%, rgba(255, 67, 36, 0.26) 0 14%, transparent 42%),
    linear-gradient(180deg, #fa2a2d 0%, #b74121 17%, #35120e 48%, #120809 100%);
  color: #fff;
}

.vrown-showreel-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -138px;
  z-index: 7;
  width: 132vw;
  height: 310px;
  transform: translateX(-50%);
  background: url("assets/vrown-supari/cloud-bg.webp") center top / 1180px auto repeat-x;
  opacity: 0.9;
  filter: brightness(1.08);
  mask-image: linear-gradient(180deg, #000 0 54%, rgba(0, 0, 0, 0.78) 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 54%, rgba(0, 0, 0, 0.78) 70%, transparent 100%);
  pointer-events: none;
}

.vrown-showreel-section::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -16%;
  z-index: 5;
  width: min(620px, 58vw);
  height: 112%;
  transform: translateX(-50%) rotate(-6deg);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255, 231, 153, 0.5) 0 7%, transparent 18%),
    linear-gradient(180deg, rgba(255, 207, 112, 0.3), rgba(255, 88, 45, 0.22) 36%, rgba(255, 244, 217, 0.1) 54%, transparent 82%);
  filter: blur(13px);
  opacity: 0.72;
  pointer-events: none;
}

.vrown-cave-frame {
  position: absolute;
  inset: -2% -4% auto;
  z-index: 4;
  height: 96%;
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 83%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 83%, transparent 100%);
  pointer-events: none;
}

.vrown-cave-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(1.12) contrast(1.08);
}

.vrown-showreel-card {
  position: absolute;
  left: 50%;
  top: 29%;
  z-index: 8;
  width: min(660px, 52vw);
  aspect-ratio: 4 / 3;
  transform: translateX(-50%);
  background: #050506;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
}

.vrown-showreel-card,
.vrown-about-copy,
.vrown-about-characters,
.vrown-project-card,
.vrown-allies-copy,
.vrown-cta-copy {
  opacity: 0;
  translate: 0 44px;
  transition: opacity 680ms ease, translate 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vrown-showreel-card.is-visible,
.vrown-about-copy.is-visible,
.vrown-about-characters.is-visible,
.vrown-project-card.is-visible,
.vrown-allies-copy.is-visible,
.vrown-cta-copy.is-visible {
  opacity: 1;
  translate: 0 0;
}

.vrown-showreel-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.vrown-showreel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(5, 5, 6, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.vrown-showreel-card.is-paused::before {
  opacity: 1;
}

.vrown-showreel-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 43%;
  filter: saturate(1.08) contrast(1.05);
}

.vrown-play-toggle {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 2vw, 24px);
  z-index: 10;
  display: grid;
  place-items: center;
  min-width: 116px;
  min-height: 48px;
  transform: translateX(-50%);
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  background: rgba(5, 5, 6, 0.52);
  color: #fff;
  font-family: "Londrina Solid", var(--font-display);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 0.8;
  text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
}

.vrown-play-toggle:hover {
  transform: translateX(-50%) scale(1.08);
}

.vrown-about-section {
  position: relative;
  min-height: 144svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 48% 7%, rgba(255, 209, 119, 0.28) 0 13%, transparent 43%),
    linear-gradient(180deg, #120809 0%, #3b1710 10%, #b94a20 31%, #f18b2b 63%, #25150f 100%);
  color: #fff;
}

.vrown-about-section::before,
.vrown-about-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.vrown-about-section::before {
  top: 0;
  z-index: 9;
  height: 26%;
  background:
    radial-gradient(circle at 10% 12%, #24493b 0 7%, transparent 8%),
    radial-gradient(circle at 24% 4%, #2d5747 0 10%, transparent 11%),
    radial-gradient(circle at 42% 8%, #1f4438 0 11%, transparent 12%),
    radial-gradient(circle at 62% 2%, #315f4c 0 12%, transparent 13%),
    radial-gradient(circle at 84% 10%, #21483c 0 11%, transparent 12%);
  filter: saturate(0.95);
}

.vrown-about-section::after {
  bottom: -2px;
  z-index: 16;
  height: 30%;
  background:
    radial-gradient(ellipse at 7% 102%, #050506 0 21%, transparent 22%),
    radial-gradient(ellipse at 24% 104%, #050506 0 19%, transparent 20%),
    radial-gradient(ellipse at 46% 106%, #050506 0 22%, transparent 23%),
    radial-gradient(ellipse at 68% 102%, #050506 0 18%, transparent 19%),
    radial-gradient(ellipse at 91% 105%, #050506 0 21%, transparent 22%),
    linear-gradient(0deg, #050506 0 58%, transparent 59%);
}

.vrown-about-tree,
.vrown-about-leaves,
.vrown-about-stone,
.vrown-about-ground,
.vrown-about-characters {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.vrown-about-tree.left {
  left: -9%;
  top: -4%;
  z-index: 11;
  width: min(610px, 49vw);
}

.vrown-about-tree.right {
  right: -8%;
  top: -5%;
  z-index: 11;
  width: min(640px, 51vw);
}

.vrown-about-leaves {
  left: 0;
  right: 0;
  top: -5%;
  z-index: 12;
  width: 100%;
  height: 30%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.28;
  mix-blend-mode: normal;
  mask-image: linear-gradient(180deg, #000 0 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 70%, transparent 100%);
}

.vrown-about-stone.left {
  left: -2%;
  bottom: 6%;
  z-index: 7;
  width: min(250px, 18vw);
}

.vrown-about-stone.right {
  right: -1%;
  bottom: 7%;
  z-index: 7;
  width: min(260px, 19vw);
}

.vrown-about-ground {
  left: 50%;
  bottom: -4%;
  z-index: 15;
  width: min(1460px, 118vw);
  height: 31%;
  object-fit: cover;
  object-position: center bottom;
  transform: translateX(-50%);
}

.vrown-about-copy {
  position: absolute;
  right: clamp(28px, 5vw, 72px);
  top: 43%;
  z-index: 18;
  width: min(390px, 32vw);
  padding: 0;
  text-align: right;
}

.vrown-about-copy span {
  display: block;
  margin-bottom: 0;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 900;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.vrown-about-copy h2 {
  margin: 0 0 0 auto;
  font-family: "Londrina Solid", var(--font-display);
  font-size: clamp(28px, 3.4vw, 58px);
  line-height: 0.86;
  text-transform: uppercase;
  text-shadow: 0 6px 0 rgba(116, 38, 18, 0.18);
}

.vrown-about-copy p {
  margin: 18px 0 0 auto;
  max-width: 340px;
  font-size: clamp(13px, 1.2vw, 18px);
  font-weight: 800;
  line-height: 1.35;
}

.vrown-about-characters {
  right: 13%;
  bottom: 22%;
  z-index: 17;
  width: min(470px, 37vw);
}

.vrown-projects-section {
  position: relative;
  display: grid;
  gap: min(29vh, 230px);
  padding: 78vh clamp(22px, 7vw, 98px) 42vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 52% 0%, rgba(96, 33, 18, 0.56) 0 10%, transparent 34%),
    linear-gradient(180deg, #050506 0%, #090607 18%, #050506 46%, #170909 73%, #050506 100%);
  color: #fff;
}

.vrown-projects-section::before,
.vrown-projects-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.vrown-projects-section::before {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 14% 16%, rgba(255, 95, 44, 0.12) 0 8%, transparent 26%),
    radial-gradient(ellipse at 88% 42%, rgba(255, 180, 89, 0.11) 0 9%, transparent 30%),
    radial-gradient(ellipse at 48% 82%, rgba(250, 42, 45, 0.14) 0 10%, transparent 32%);
}

.vrown-projects-section::after {
  left: 50%;
  top: -8%;
  z-index: 1;
  width: min(360px, 42vw);
  height: 112%;
  transform: translateX(-50%) rotate(4deg);
  background:
    linear-gradient(180deg, transparent 0%, rgba(255, 229, 155, 0.15) 14%, rgba(255, 86, 46, 0.1) 40%, transparent 78%),
    repeating-linear-gradient(180deg, transparent 0 170px, rgba(255, 255, 255, 0.05) 170px 173px, transparent 173px 320px);
  filter: blur(7px);
  opacity: 0.8;
}

.vrown-project-logo {
  position: sticky;
  top: 16px;
  z-index: 20;
  width: fit-content;
  color: #fff;
  font-family: "Londrina Solid", var(--font-display);
  font-size: clamp(24px, 3vw, 48px);
  line-height: 0.8;
  text-transform: uppercase;
}

.vrown-project-card {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  min-height: 112svh;
}

.vrown-project-card.is-large {
  min-height: 118svh;
}

.vrown-project-card img {
  width: min(650px, 51vw);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  align-self: start;
  filter: saturate(1.05) contrast(1.08);
}

.vrown-project-card span {
  display: block;
  margin-bottom: 16px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vrown-project-card h2 {
  margin: 0;
  font-family: "Londrina Solid", var(--font-display);
  font-size: clamp(58px, 7.1vw, 118px);
  line-height: 0.82;
  text-transform: uppercase;
}

.vrown-project-card:nth-of-type(even) {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
}

.vrown-project-card:nth-of-type(even) img {
  order: 2;
}

.vrown-project-card:hover img {
  transform: rotate(-1deg) scale(1.02);
}

.vrown-project-card img {
  transition: transform 220ms ease;
}

.vrown-allies-section {
  position: relative;
  min-height: 154svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 48% 68%, rgba(251, 111, 43, 0.28) 0 12%, transparent 36%),
    linear-gradient(180deg, #050506 0 22%, rgba(5, 5, 6, 0.86) 42%, rgba(86, 35, 20, 0.94) 66%, #b95623 100%);
  color: #fff;
  padding: clamp(190px, 33vh, 330px) clamp(22px, 7vw, 112px) 18vh;
}

.vrown-allies-section::before {
  content: "";
  position: absolute;
  inset: auto -8% -18%;
  height: 62%;
  background:
    radial-gradient(ellipse at 12% 100%, rgba(5, 5, 6, 0.92) 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 102%, rgba(5, 5, 6, 0.52) 0 18%, transparent 19%),
    radial-gradient(ellipse at 74% 100%, rgba(5, 5, 6, 0.54) 0 18%, transparent 19%),
    linear-gradient(0deg, rgba(5, 5, 6, 0.38), transparent 68%);
  pointer-events: none;
}

.vrown-allies-section::after {
  content: "";
  position: absolute;
  right: -5%;
  bottom: -6%;
  width: min(470px, 38vw);
  aspect-ratio: 1;
  border: 28px solid rgba(5, 5, 6, 0.42);
  border-radius: 50%;
  transform: rotate(-18deg);
  pointer-events: none;
}

.vrown-allies-copy {
  position: relative;
  z-index: 4;
  width: min(920px, 76vw);
}

.vrown-allies-copy h2 {
  margin: 0;
  color: rgba(255, 255, 255, 0.32);
  font-family: "Londrina Solid", var(--font-display);
  font-size: clamp(88px, 12vw, 190px);
  line-height: 0.76;
  text-transform: uppercase;
}

.vrown-allies-copy p {
  display: inline-block;
  width: min(330px, 32vw);
  margin: 38px 34px 0 0;
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 900;
  line-height: 1.12;
}

.vrown-allies-copy span {
  display: block;
  margin-top: 34px;
  font-family: "Londrina Solid", var(--font-display);
  font-size: clamp(26px, 3vw, 46px);
  text-transform: uppercase;
}

.vrown-cta-section {
  position: relative;
  min-height: 179svh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 58% 78%, rgba(255, 231, 154, 0.32) 0 9%, transparent 32%),
    linear-gradient(180deg, #b95623 0%, #fa292c 24%, #fb411f 58%, #fa292c 100%);
  color: #fff;
  padding: clamp(180px, 30vh, 300px) clamp(22px, 7vw, 112px) clamp(70px, 10vw, 130px);
}

.vrown-cta-section::before,
.vrown-cta-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.vrown-cta-section::before {
  left: -8%;
  right: -8%;
  bottom: -20%;
  height: 58%;
  background:
    radial-gradient(ellipse at 50% 24%, rgba(255, 244, 201, 0.26) 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 62%, rgba(83, 17, 14, 0.3) 0 19%, transparent 20%),
    radial-gradient(ellipse at 18% 100%, rgba(82, 20, 14, 0.24) 0 18%, transparent 19%),
    linear-gradient(0deg, rgba(96, 22, 14, 0.36), transparent 72%);
}

.vrown-cta-section::after {
  right: clamp(-80px, -3vw, -24px);
  bottom: clamp(80px, 13vh, 180px);
  width: min(520px, 42vw);
  aspect-ratio: 1.5 / 1;
  border: clamp(12px, 1.7vw, 24px) solid rgba(255, 244, 201, 0.28);
  border-radius: 50%;
  transform: rotate(-13deg);
  opacity: 0.72;
}

.vrown-cta-copy {
  position: relative;
  z-index: 4;
  width: min(1120px, 92vw);
}

.vrown-cta-copy h2 {
  margin: 0;
  font-family: "Londrina Solid", var(--font-display);
  font-size: clamp(76px, 9.7vw, 158px);
  line-height: 0.82;
  text-transform: uppercase;
}

.vrown-cta-button {
  display: inline-grid;
  place-items: center;
  width: clamp(80px, 8.4vw, 136px);
  aspect-ratio: 1;
  margin-left: 10px;
  border: 7px solid #fff;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-family: "Londrina Solid", var(--font-display);
  font-size: clamp(44px, 5vw, 74px);
  line-height: 0.8;
  vertical-align: baseline;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.vrown-cta-button:hover {
  transform: rotate(-6deg) scale(1.08);
  background: #fff;
  color: #fa292c;
}

@keyframes vrownLoaderOut {
  0%,
  62% {
    opacity: 1;
  }

  99% {
    opacity: 0;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes vrownCloudRise {
  from {
    opacity: 0;
    transform: translate3d(0, 75vh, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes vrownCloudDrift {
  from {
    transform: translateX(-4%);
  }

  to {
    transform: translateX(6%);
  }
}

@keyframes vrownCloudFloat {
  50% {
    translate: 0 -13px;
  }
}

@keyframes vrownRockIn {
  from {
    transform: translate3d(var(--mx, 0px), 100%, 0) scale(0.14);
  }

  to {
    transform: translate3d(var(--mx, 0px), var(--rock-y), 0) scale(1);
  }
}

@keyframes vrownHeadlinePop {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes vrownSpark {
  50% {
    opacity: 0.18;
    scale: 0.72;
  }
}

@keyframes vrownForegroundRise {
  from {
    transform: translate3d(-50%, 80vh, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes vrownDescentPulse {
  0%,
  100% {
    opacity: 0.24;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0.34;
    transform: translate3d(0, 18px, 0);
  }
}

@media (max-width: 920px) {
  .vrown-edge-link {
    gap: 7px;
    font-size: clamp(15px, 3.4vw, 24px);
  }

  .vrown-edge-icon,
  .vrown-game-glyph {
    width: clamp(42px, 8vw, 70px);
    height: clamp(42px, 8vw, 70px);
  }

  .vrown-edge-link.is-vrown {
    top: 72px;
  }

  .vrown-bg-clouds {
    top: 26%;
    max-width: 170vw;
  }

  .vrown-hero-screen::before {
    top: clamp(98px, 17vh, 148px);
    width: min(700px, 88vw);
  }

  .vrown-hero-screen::after {
    top: 24%;
    width: min(220px, 30vw);
  }

  .vrown-top-cloud.left {
    left: -2%;
    top: 11%;
  }

  .vrown-top-cloud.right {
    right: 1%;
    top: 8%;
  }

  .vrown-top-cloud.lower {
    right: -22%;
    top: 34%;
    width: 560px;
  }

  .vrown-rock {
    --rock-y: 35%;
    width: 1280px;
    min-width: 860px;
  }

  .vrown-headline {
    bottom: clamp(380px, 60vh, 490px);
    width: min(590px, 86vw);
  }

  .vrown-showreel-section {
    min-height: 150svh;
  }

  .vrown-cave-frame {
    inset: -6% -18% auto;
  }

  .vrown-showreel-card {
    top: 31%;
    width: min(620px, 72vw);
  }

  .vrown-about-section {
    min-height: 128svh;
  }

  .vrown-about-copy {
    width: min(360px, 36vw);
  }

  .vrown-about-characters {
    right: -2%;
    width: min(440px, 48vw);
  }

  .vrown-project-card,
  .vrown-project-card:nth-of-type(even) {
    grid-template-columns: 1fr;
    gap: 26px;
    min-height: 108svh;
  }

  .vrown-project-card:nth-of-type(even) img {
    order: 0;
  }

  .vrown-project-card img {
    width: min(720px, 78vw);
  }

  .vrown-allies-copy {
    width: min(720px, 82vw);
  }

  .vrown-allies-copy p {
    width: min(310px, 44vw);
  }
}

@media (max-width: 640px) {
  .vrown-hero-screen {
    min-height: 112svh;
  }

  .vrown-supari::after {
    opacity: 0.2;
    background-size: 125% 100%, 160vw 120svh, 150vw 150svh, 120vw 150svh;
  }

  .vrown-edge-link {
    gap: 4px;
    font-size: clamp(12px, 3.9vw, 16px);
  }

  .vrown-edge-link.is-home {
    top: 9px;
    left: 8px;
  }

  .vrown-edge-link.is-vrown {
    top: 9px;
    left: 50%;
  }

  .vrown-edge-link.is-zungk {
    top: 9px;
    right: 8px;
  }

  .vrown-edge-link.is-letter {
    left: 8px;
    bottom: 9px;
  }

  .vrown-edge-link.is-game {
    right: 8px;
    bottom: 9px;
  }

  .vrown-edge-icon,
  .vrown-game-glyph {
    width: 38px;
    height: 38px;
  }

  .vrown-game-glyph {
    border-width: 5px;
  }

  .vrown-game-glyph::before {
    border-top-width: 9px;
    border-bottom-width: 9px;
    border-left-width: 15px;
  }

  .vrown-loader-mark {
    min-width: 295px;
    min-height: 150px;
    transform: translateX(20%) rotate(-2deg);
  }

  .vrown-loader-mark span {
    font-size: 72px;
  }

  .vrown-loader-mark small {
    right: 5%;
    bottom: 21%;
    font-size: 22px;
  }

  .vrown-top-cloud {
    height: 74px;
  }

  .vrown-top-cloud.left {
    left: -20%;
    top: 12%;
  }

  .vrown-top-cloud.right {
    right: -30%;
    top: 16%;
  }

  .vrown-top-cloud.lower {
    right: -70%;
    top: 37%;
    width: 520px;
  }

  .vrown-bg-clouds {
    top: 33%;
    max-width: 230vw;
  }

  .vrown-hero-screen::before {
    top: 98px;
    width: 116vw;
  }

  .vrown-hero-screen::after {
    top: 28%;
    width: 38vw;
    height: 72%;
    opacity: 0.52;
  }

  .vrown-rock {
    --rock-y: 44%;
    min-width: 760px;
  }

  .vrown-headline {
    bottom: 28vh;
    width: 88vw;
  }

  .vrown-headline-kicker {
    font-size: 12px;
  }

  .vrown-headline h1 {
    font-size: clamp(62px, 18vw, 88px);
  }

  .vrown-spark {
    width: 48px;
    height: 48px;
  }

  .vrown-foreground-cloud {
    bottom: -18%;
    width: 170vw;
  }

  .vrown-showreel-section {
    min-height: 124svh;
  }

  .vrown-showreel-section::after {
    top: -7%;
    width: 88vw;
  }

  .vrown-cave-frame {
    inset: -4% -72% auto;
    height: 92%;
  }

  .vrown-showreel-card {
    top: 34%;
    width: 88vw;
  }

  .vrown-play-toggle {
    bottom: 12px;
    min-width: 96px;
    min-height: 42px;
    font-size: 30px;
  }

  .vrown-about-section {
    min-height: 112svh;
  }

  .vrown-about-tree.left {
    left: -36%;
    width: 86vw;
  }

  .vrown-about-tree.right {
    right: -42%;
    width: 90vw;
  }

  .vrown-about-leaves {
    height: 32%;
  }

  .vrown-about-copy {
    width: 92vw;
    top: 16%;
    right: 18px;
    text-align: left;
  }

  .vrown-about-copy span {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .vrown-about-copy h2 {
    font-size: clamp(44px, 12.8vw, 62px);
    line-height: 0.88;
  }

  .vrown-about-copy p {
    font-size: 15px;
  }

  .vrown-about-characters {
    right: -18%;
    bottom: 8%;
    width: 82vw;
  }

  .vrown-about-ground {
    bottom: -1%;
    width: 170vw;
  }

  .vrown-projects-section {
    gap: 58px;
    padding: 44vh 18px 96px;
  }

  .vrown-projects-section::after {
    width: 70vw;
    opacity: 0.58;
  }

  .vrown-project-logo {
    top: 11px;
    font-size: 24px;
  }

  .vrown-project-card,
  .vrown-project-card:nth-of-type(even) {
    min-height: 92svh;
    grid-template-columns: 1fr;
  }

  .vrown-project-card img {
    width: 100%;
  }

  .vrown-project-card h2 {
    font-size: clamp(56px, 16vw, 82px);
  }

  .vrown-allies-section {
    min-height: 126svh;
    padding: 112px 18px 88px;
  }

  .vrown-allies-section::after {
    width: 78vw;
    border-width: 18px;
  }

  .vrown-allies-copy {
    width: 92vw;
  }

  .vrown-allies-copy h2 {
    font-size: clamp(68px, 18vw, 98px);
  }

  .vrown-allies-copy p {
    display: block;
    width: 82vw;
    margin: 28px 0 0;
    font-size: 15px;
  }

  .vrown-cta-section {
    min-height: 124svh;
    padding: 112px 18px 66px;
  }

  .vrown-cta-section::after {
    right: -28vw;
    width: 86vw;
  }

  .vrown-cta-copy h2 {
    font-size: clamp(66px, 17vw, 92px);
  }

  .vrown-cta-button {
    width: 88px;
    border-width: 5px;
    font-size: 42px;
  }
}

.hero {
  position: relative;
  min-height: 94vh;
  display: flex;
  align-items: end;
  padding: clamp(80px, 10vw, 150px) clamp(18px, 5vw, 76px) 48px;
  overflow: hidden;
  background: #09090b;
  color: var(--paper);
}

.hero img,
.archive-hero img,
.game-room img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after,
.archive-hero::after,
.game-room::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.14) 58%, rgba(0, 0, 0, 0.45)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.68), transparent 46%);
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 950px;
}

.hero-copy h2 {
  max-width: 920px;
  color: var(--paper);
}

.hero-copy p:last-child,
.archive-copy p:last-child,
.letter-head p,
.game-head p {
  max-width: 690px;
  font-size: clamp(16px, 2vw, 23px);
  line-height: 1.45;
  font-weight: 700;
}

.artist-signal {
  position: absolute;
  top: 118px;
  right: clamp(18px, 6vw, 86px);
  z-index: 2;
  display: grid;
  gap: 8px;
  width: clamp(128px, 16vw, 220px);
  color: var(--paper);
  transform: rotate(5deg);
}

.signal-frame {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border: 2px solid var(--paper);
  background:
    linear-gradient(145deg, rgba(189, 255, 22, 0.18), rgba(127, 76, 255, 0.16)),
    rgba(17, 17, 20, 0.72);
  box-shadow: 9px 9px 0 rgba(246, 241, 230, 0.9);
  overflow: hidden;
}

.signal-frame::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(246, 241, 230, 0.45);
}

.signal-head,
.signal-body,
.signal-flash {
  position: absolute;
  display: block;
}

.signal-head {
  left: 50%;
  top: 20%;
  width: 30%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 40px rgba(189, 255, 22, 0.42);
}

.signal-body {
  left: 28%;
  right: 28%;
  bottom: 16%;
  height: 42%;
  border-radius: 46% 46% 8% 8%;
  background: var(--paper);
}

.signal-flash {
  left: -16%;
  right: -16%;
  top: 46%;
  height: 10px;
  transform: rotate(-16deg);
  background: var(--coral);
}

.signal-caption {
  display: inline-block;
  justify-self: end;
  padding: 6px 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 var(--ink);
}

.scroll-chip {
  position: absolute;
  right: clamp(16px, 4vw, 58px);
  bottom: 42px;
  z-index: 2;
  padding: 12px 16px;
}

.statement-band {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: clamp(24px, 6vw, 80px);
  align-items: end;
  padding: clamp(42px, 8vw, 105px) clamp(18px, 5vw, 76px);
  background: var(--paper);
  border-bottom: 2px solid var(--line);
}

.large-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 8vw, 118px);
  line-height: 0.9;
  text-transform: uppercase;
}

.statement-band p:last-child {
  margin: 0;
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.5;
  font-weight: 700;
}

.media-reel {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(150px, 0.48fr));
  gap: 14px;
  padding: clamp(18px, 4vw, 52px);
  background: #f6f1e6;
  border-bottom: 2px solid var(--line);
}

.reel-card {
  position: relative;
  min-height: 220px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  overflow: hidden;
}

.reel-main {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1fr);
  gap: 22px;
  align-items: end;
  padding: 18px;
  background: #111114;
  color: var(--paper);
}

.video-loop {
  position: relative;
  min-height: 330px;
  border: 2px solid var(--paper);
  background:
    linear-gradient(rgba(246, 241, 230, 0.09) 1px, transparent 1px),
    radial-gradient(circle at 50% 26%, rgba(189, 255, 22, 0.28), transparent 24%),
    linear-gradient(150deg, rgba(127, 76, 255, 0.32), rgba(226, 42, 89, 0.24)),
    #08080a;
  background-size: 100% 5px, auto, auto, auto;
  overflow: hidden;
}

.video-loop::before,
.video-loop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.video-loop::before {
  background:
    linear-gradient(90deg, transparent 0 46%, rgba(246, 241, 230, 0.14) 47% 51%, transparent 52%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.65), transparent 34%, rgba(0, 0, 0, 0.72));
  animation: loopPulse 2.6s steps(2) infinite;
}

.video-loop::after {
  background: linear-gradient(120deg, transparent 42%, rgba(255, 255, 255, 0.36) 48%, transparent 55%);
  transform: translateX(-140%);
  animation: scanFlash 3.8s ease-in-out infinite;
}

.loop-silhouette {
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: 42%;
  height: 68%;
  transform: translateX(-50%);
  border-radius: 48% 48% 12% 12%;
  background:
    radial-gradient(circle at 50% 16%, var(--paper) 0 17%, transparent 18%),
    linear-gradient(var(--paper), var(--paper)) 50% 61% / 68% 72% no-repeat;
  filter: drop-shadow(0 0 24px rgba(189, 255, 22, 0.42));
}

.loop-flash {
  position: absolute;
  left: -20%;
  right: -20%;
  top: 44%;
  height: 12px;
  transform: rotate(-12deg);
  background: var(--coral);
  animation: loopFlash 2.6s steps(2) infinite;
}

.loop-timer {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 5px 7px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.reel-main h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(42px, 7vw, 92px);
  line-height: 0.9;
  text-transform: uppercase;
}

.reel-main p:last-child,
.reel-small p {
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
}

.reel-small {
  display: grid;
  align-content: space-between;
  padding: 12px;
}

.media-thumb {
  position: relative;
  display: block;
  min-height: 150px;
  border: 2px solid var(--ink);
  background: #111114;
  overflow: hidden;
}

.thumb-eye {
  background:
    radial-gradient(ellipse at 50% 50%, var(--acid) 0 12%, var(--ink) 13% 18%, transparent 19%),
    radial-gradient(ellipse at 50% 50%, transparent 0 34%, var(--paper) 35% 46%, transparent 47%),
    #111114;
}

.thumb-hand {
  background:
    linear-gradient(115deg, transparent 30%, var(--paper) 31% 40%, transparent 41%),
    linear-gradient(138deg, transparent 34%, var(--paper) 35% 43%, transparent 44%),
    linear-gradient(160deg, transparent 36%, var(--paper) 37% 45%, transparent 46%),
    var(--violet);
}

.thumb-room {
  background:
    linear-gradient(90deg, var(--ink) 0 18%, transparent 18% 82%, var(--ink) 82%),
    radial-gradient(circle at 50% 58%, var(--acid) 0 18%, transparent 19%),
    #2a2435;
}

@keyframes loopPulse {
  50% {
    opacity: 0.72;
    filter: contrast(1.8);
  }
}

@keyframes scanFlash {
  48%,
  100% {
    transform: translateX(140%);
  }
}

@keyframes loopFlash {
  50% {
    opacity: 0;
  }
}

.vrown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: clamp(18px, 4vw, 52px);
  background: #111114;
}

.feature-tile {
  min-height: 260px;
  padding: 26px;
  background: var(--paper);
  border: 2px solid var(--paper);
  color: var(--ink);
}

.feature-tile:nth-child(2) {
  background: var(--acid);
}

.feature-tile:nth-child(3) {
  background: var(--violet);
  color: #fff;
}

.feature-tile span {
  font-family: var(--font-display);
  font-size: 18px;
}

.feature-tile h3 {
  margin: 62px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 64px);
  line-height: 0.9;
  text-transform: uppercase;
}

.feature-tile p {
  margin: 0;
  max-width: 320px;
  font-weight: 700;
  line-height: 1.45;
}

.archive-hero {
  position: relative;
  min-height: 76vh;
  display: flex;
  align-items: end;
  padding: clamp(76px, 10vw, 128px) clamp(18px, 5vw, 76px) 44px;
  overflow: hidden;
  background: #111114;
  color: var(--paper);
}

.archive-copy {
  position: relative;
  z-index: 1;
  max-width: 1000px;
}

.archive-copy h2 {
  max-width: 1100px;
  font-size: clamp(44px, 9vw, 128px);
}

.fragment-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 18px;
  min-height: 640px;
  padding: clamp(18px, 4vw, 54px);
  background:
    linear-gradient(180deg, #f6f1e6 0, #e6e0d5 100%);
}

.fragment-board {
  position: relative;
  min-height: 560px;
  border: 2px solid var(--ink);
  background:
    linear-gradient(rgba(17, 17, 20, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 20, 0.04) 1px, transparent 1px),
    #f9f5ed;
  background-size: 34px 34px;
  overflow: hidden;
}

.fragment-board::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(115deg, transparent 0 58%, rgba(226, 42, 89, 0.11) 59% 61%, transparent 62%),
    radial-gradient(circle at 16% 82%, rgba(127, 76, 255, 0.18), transparent 18%),
    radial-gradient(circle at 82% 20%, rgba(189, 255, 22, 0.2), transparent 16%);
  pointer-events: none;
  opacity: 0.7;
}

.fragment-board.is-overloaded::after {
  opacity: 1;
  background:
    repeating-linear-gradient(8deg, rgba(17, 17, 20, 0.08) 0 2px, transparent 2px 14px),
    radial-gradient(circle at 50% 50%, rgba(226, 42, 89, 0.2), transparent 28%),
    radial-gradient(circle at 16% 82%, rgba(127, 76, 255, 0.22), transparent 18%),
    radial-gradient(circle at 82% 20%, rgba(189, 255, 22, 0.24), transparent 16%);
}

.collection-pile {
  position: absolute;
  left: 50%;
  bottom: 7%;
  z-index: 2;
  width: min(520px, 72%);
  min-height: 150px;
  transform: translateX(-50%);
  pointer-events: none;
}

.collected-file {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 180px;
  min-height: 82px;
  padding: 11px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 6px 6px 0 rgba(17, 17, 20, 0.88);
  transform: rotate(var(--r));
  animation: fileDrop 240ms ease-out both;
}

.collected-file b,
.collected-file small {
  display: block;
  overflow-wrap: anywhere;
}

.collected-file b {
  font-size: 11px;
  line-height: 1.1;
  text-transform: uppercase;
}

.collected-file small {
  margin-top: 7px;
  font-weight: 900;
  color: var(--coral);
}

.sealed-folder {
  position: absolute;
  left: 50%;
  top: 10%;
  z-index: 3;
  width: 170px;
  min-height: 122px;
  padding: 18px 14px 14px;
  border: 2px solid var(--ink);
  background: var(--acid);
  box-shadow: 9px 9px 0 var(--ink);
  transform: translateX(-50%) rotate(-4deg);
  transition: transform 240ms ease, background 240ms ease;
}

.sealed-folder::before {
  content: "";
  position: absolute;
  left: 15px;
  top: -16px;
  width: 72px;
  height: 17px;
  border: 2px solid var(--ink);
  border-bottom: 0;
  background: var(--acid);
}

.sealed-folder span {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 0.9;
  text-transform: uppercase;
}

.sealed-folder.is-open {
  transform: translateX(-50%) translateY(-22px) rotate(7deg);
  background: var(--paper);
}

.seal-button {
  width: 100%;
  border: 2px solid var(--ink);
  background: var(--coral);
  color: #fff;
  padding: 8px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.fragment {
  position: absolute;
  z-index: 4;
  width: clamp(138px, 20vw, 230px);
  min-height: 146px;
  padding: 18px 16px 14px;
  border: 2px solid var(--ink);
  background:
    radial-gradient(circle at 16px 16px, rgba(255, 255, 255, 0.8) 0 5px, transparent 6px),
    #fff;
  color: var(--ink);
  box-shadow: 9px 9px 0 var(--ink);
  text-align: center;
  transform: rotate(var(--tilt));
  transition: transform 170ms ease, background 170ms ease, opacity 170ms ease;
}

.fragment:hover,
.fragment.is-found {
  background: var(--acid);
  transform: rotate(var(--tilt)) scale(1.04);
}

.fragment.is-found {
  opacity: 0.72;
}

.fragment.is-open {
  background:
    radial-gradient(circle at 16px 16px, rgba(255, 255, 255, 0.8) 0 5px, transparent 6px),
    repeating-linear-gradient(0deg, rgba(17, 17, 20, 0.12) 0 2px, transparent 2px 13px),
    var(--acid);
  transform: rotate(var(--tilt)) scale(1.08);
}

.fragment-icon {
  position: relative;
  display: block;
  width: 82px;
  height: 62px;
  margin: 0 auto 12px;
}

.mirror-icon {
  width: 68px;
  height: 68px;
  border: 5px solid var(--ink);
  border-radius: 50% 50% 44% 44%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(190, 197, 205, 0.4)),
    var(--chrome);
}

.mirror-icon::after {
  content: "";
  position: absolute;
  left: 19px;
  right: 19px;
  bottom: -18px;
  height: 18px;
  border-left: 5px solid var(--ink);
  border-right: 5px solid var(--ink);
}

.key-icon::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  width: 26px;
  height: 26px;
  border: 7px solid var(--ink);
  border-radius: 50%;
  background: var(--acid);
}

.key-icon::after {
  content: "";
  position: absolute;
  left: 34px;
  top: 31px;
  width: 48px;
  height: 8px;
  background: var(--ink);
  box-shadow: 22px 0 0 var(--ink), 34px 12px 0 -2px var(--ink);
}

.file-icon {
  width: 80px;
  height: 56px;
  margin-top: 8px;
  border: 4px solid var(--ink);
  background: var(--chrome);
  transform: skewX(-6deg);
}

.file-icon::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -16px;
  width: 38px;
  height: 16px;
  border: 4px solid var(--ink);
  border-bottom: 0;
  background: var(--chrome);
}

.tape-icon {
  width: 82px;
  height: 54px;
  margin-top: 8px;
  border: 4px solid var(--ink);
  border-radius: 6px;
  background: var(--coral);
}

.tape-icon::before,
.tape-icon::after {
  content: "";
  position: absolute;
  top: 15px;
  width: 22px;
  height: 22px;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

.tape-icon::before {
  left: 11px;
}

.tape-icon::after {
  right: 11px;
}

.clock-icon {
  width: 66px;
  height: 66px;
  border: 5px solid var(--paper);
  border-radius: 50%;
  background: var(--violet);
  box-shadow: inset 0 0 0 5px var(--ink), 0 0 0 3px var(--ink);
}

.clock-icon::before,
.clock-icon::after {
  content: "";
  position: absolute;
  left: 31px;
  top: 31px;
  width: 4px;
  height: 20px;
  background: var(--paper);
  transform-origin: 2px 2px;
}

.clock-icon::after {
  height: 16px;
  transform: rotate(70deg);
}

.fragment b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 0.94;
  text-transform: uppercase;
}

.fragment small {
  display: block;
  margin-top: 14px;
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  line-height: 1.1;
}

@keyframes fileDrop {
  from {
    opacity: 0;
    transform: translateY(-36px) rotate(var(--r)) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--r)) scale(1);
  }
}

.note-one {
  --tilt: -8deg;
  top: 10%;
  left: 8%;
}

.note-two {
  --tilt: 12deg;
  top: 21%;
  right: 12%;
  background: var(--acid);
}

.note-three {
  --tilt: -15deg;
  left: 37%;
  top: 44%;
  background: var(--chrome);
}

.note-four {
  --tilt: 7deg;
  bottom: 10%;
  left: 12%;
  background: var(--coral);
  color: #fff;
}

.note-five {
  --tilt: -5deg;
  right: 14%;
  bottom: 12%;
  background: var(--violet);
  color: #fff;
}

.fragment-log,
.room-status,
.inventory {
  align-self: stretch;
  padding: 24px;
  border: 2px solid var(--ink);
  background: #111114;
  color: var(--paper);
}

.fragment-log strong,
.inventory strong {
  display: block;
  margin: 8px 0 20px;
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 86px);
  line-height: 0.9;
}

.fragment-log p,
.room-status p,
.inventory p {
  line-height: 1.5;
  font-weight: 700;
}

.fragment-meta {
  display: grid;
  gap: 8px;
  margin: 20px 0 0;
}

.fragment-meta div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(246, 241, 230, 0.22);
}

.fragment-meta dt,
.fragment-meta dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
}

.fragment-meta dt {
  color: var(--chrome);
  font-weight: 900;
  text-transform: uppercase;
}

.fragment-meta dd {
  color: var(--paper);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.text-button {
  margin-top: 18px;
  padding: 12px 14px;
}

.text-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
  box-shadow: 7px 7px 0 var(--ink);
}

.letter-view {
  background: #fff;
  color: #5e6674;
}

.letter-unsent-shell {
  min-height: 100vh;
  padding: clamp(88px, 10vw, 132px) clamp(18px, 3vw, 30px) 74px;
  background: #fff;
}

.letter-panel {
  max-width: 1240px;
  margin: 0 auto;
}

.letter-panel[data-mode="archive"] .letter-submit-form {
  display: none;
}

.letter-panel[data-mode="submit"] .letter-archive-head,
.letter-panel[data-mode="submit"] .letter-search-bar,
.letter-panel[data-mode="submit"] .letter-color-filters,
.letter-panel[data-mode="submit"] .letter-feed {
  display: none;
}

.letter-archive-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0 26px;
  text-align: center;
}

.letter-archive-head > div {
  flex: 1;
}

.letter-site-mark {
  margin: 0 auto 18px;
  color: #606979;
  font-size: clamp(44px, 8vw, 96px);
  font-weight: 300;
  line-height: 0.9;
  text-transform: uppercase;
}

.letter-archive-head h1 {
  margin: 0;
  color: #606979;
  font-size: clamp(23px, 3.1vw, 38px);
  font-weight: 400;
  line-height: 1.08;
}

.letter-post-count {
  margin: 12px 0 0;
  color: #606979;
  font-size: clamp(19px, 2.6vw, 31px);
  font-weight: 400;
}

.letter-submit-link,
.letter-back-button {
  flex: 0 0 auto;
  border: 1px solid #535d6c;
  border-radius: 6px;
  background: #535d6c;
  color: #fff;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.letter-back-button {
  background: #fff;
  color: #535d6c;
}

.letter-search-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px 98px;
  margin: 0 0 34px;
  border: 1px solid #d8dde5;
}

.letter-search-bar label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.letter-search-bar input,
.letter-search-bar button {
  min-height: 52px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #606979;
}

.letter-search-bar input {
  min-width: 0;
  padding: 0 14px;
  border-right: 1px solid #d8dde5;
  font-size: 17px;
}

.letter-search-bar input::placeholder {
  color: #b4bbc6;
}

.letter-search-bar button {
  border-left: 1px solid #d8dde5;
  font-size: 16px;
}

.letter-filter-toggle::before {
  content: "??;
  display: inline-block;
  margin-right: 7px;
  transform: rotate(90deg);
}

.letter-color-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -20px 0 28px;
  padding: 14px;
  border: 1px solid #d8dde5;
}

.letter-color-filters[hidden] {
  display: none;
}

.letter-filter-chip {
  min-width: 34px;
  min-height: 28px;
  border: 1px solid #6f7887;
  border-radius: 0;
  background: var(--swatch-bg);
  color: var(--swatch-fg);
  font-size: 0;
}

.letter-filter-chip[data-color="all"] {
  width: auto;
  padding: 0 12px;
  background: #fff;
  color: #606979;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.letter-filter-chip.is-active {
  outline: 3px solid #535d6c;
  outline-offset: 2px;
}

.letter-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
}

.message.letter-card {
  width: 100%;
  max-width: none;
  padding: 7px;
  border: 4px solid #5d6675;
  background: #f7f8f8;
  color: #5d6675;
  box-shadow: none;
}

.message.letter-card:nth-child(even) {
  align-self: auto;
}

.letter-card-window {
  display: grid;
  gap: 6px;
}

.letter-card-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 72px;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.letter-card-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 30px;
  background: #5d6675;
  color: #e8ebee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.letter-card-to {
  min-width: 0;
  color: #5d6675;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.letter-card-envelope {
  position: relative;
  display: block;
  width: 100%;
  height: 31px;
  border: 3px solid #5d6675;
  background: #5d6675;
}

.letter-card-envelope::before,
.letter-card-envelope::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.letter-card-envelope::before {
  background:
    linear-gradient(37deg, transparent 49%, #aeb5bf 50%, transparent 52%),
    linear-gradient(-37deg, transparent 49%, #aeb5bf 50%, transparent 52%);
}

.letter-card-envelope::after {
  border-top: 2px solid #aeb5bf;
  transform: translateY(13px);
}

.letter-card-body {
  min-height: clamp(240px, 32vw, 360px);
  padding: clamp(15px, 2.2vw, 25px);
  background: var(--card-bg);
  color: var(--card-fg);
  overflow: hidden;
}

.letter-card-body p {
  margin: 0;
  font-size: clamp(30px, 3.7vw, 50px);
  font-weight: 400;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.letter-card-reply {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 2px solid currentColor;
  font-size: 15px;
  line-height: 1.35;
}

.letter-empty {
  grid-column: 1 / -1;
  padding: 60px 18px;
  border: 1px solid #d8dde5;
  color: #606979;
  text-align: center;
  font-size: 22px;
}

.letter-submit-form {
  display: grid;
  gap: 18px;
  width: min(680px, 100%);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 40px) 0 80px;
  background: #fff;
  color: #606979;
}

.letter-submit-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
}

.letter-submit-head h2 {
  margin: 0;
  color: #606979;
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 400;
  text-align: center;
}

.draft-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #aeb5bf;
  background: #f4f5f7;
  color: #535d6c;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.draft-context[hidden] {
  display: none;
}

.mini-action {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.letter-to-label {
  font-size: 28px;
  line-height: 1;
}

.letter-submit-form input[type="text"],
.letter-submit-form input:not([type]),
.letter-submit-form textarea {
  width: 100%;
  border: 1px solid #aeb5bf;
  border-radius: 0;
  background: #fff;
  color: #606979;
  padding: 14px;
  font-size: 18px;
  font-weight: 400;
}

.letter-submit-form textarea {
  min-height: 250px;
  resize: vertical;
}

.letter-submit-form input::placeholder,
.letter-submit-form textarea::placeholder {
  color: #aeb5bf;
}

.letter-color-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(30px, 1fr));
  gap: 8px;
}

.letter-color-swatch {
  aspect-ratio: 1;
  min-height: 34px;
  border: 1px solid #8c95a2;
  border-radius: 0;
  background: var(--swatch-bg);
  color: var(--swatch-fg);
}

.letter-color-swatch.is-active {
  outline: 3px solid #535d6c;
  outline-offset: 2px;
}

.letter-submit-message {
  min-height: 50px;
  border: 4px solid #aeb5bf;
  border-radius: 0;
  background: #eef0f3;
  color: #9da5b1;
  font-size: 23px;
  font-weight: 700;
}

.letter-submit-message:not(:disabled) {
  border-color: #535d6c;
  background: #535d6c;
  color: #fff;
}

.letter-terms {
  display: flex;
  justify-content: center;
  gap: 6px;
  color: #606979;
  font-size: 15px;
}

.letter-terms input {
  width: 14px;
  height: 14px;
}

.letter-terms a {
  color: #4f6e98;
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (max-width: 760px) {
  .letter-unsent-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .letter-archive-head {
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .letter-search-bar {
    grid-template-columns: 1fr;
  }

  .letter-search-bar input,
  .letter-search-bar button {
    border: 0;
    border-top: 1px solid #d8dde5;
  }

  .letter-search-bar input {
    border-top: 0;
    border-right: 0;
  }

  .letter-feed {
    grid-template-columns: 1fr;
  }

  .letter-card-body {
    min-height: 260px;
  }

  .letter-submit-head {
    grid-template-columns: 1fr;
  }

  .letter-back-button {
    justify-self: start;
  }

  .letter-color-grid {
    grid-template-columns: repeat(4, minmax(36px, 1fr));
  }
}

/* Analogue work-page inspired LETTER refresh. */
.letter-view {
  background: #f4f2ed;
  color: #171717;
}

.letter-unsent-shell {
  min-height: 100vh;
  padding: clamp(88px, 9vw, 128px) clamp(18px, 3.8vw, 58px) clamp(78px, 9vw, 132px);
  background:
    linear-gradient(90deg, rgba(23, 23, 23, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(23, 23, 23, 0.035) 1px, transparent 1px),
    #f4f2ed;
  background-size: 25vw 100%, 100% 140px, auto;
}

.letter-panel {
  width: min(1680px, 100%);
  max-width: none;
  margin: 0 auto;
}

.letter-archive-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 250px);
  align-items: end;
  gap: clamp(24px, 6vw, 96px);
  min-height: auto;
  padding: 0 0 clamp(28px, 4.2vw, 58px);
  text-align: left;
}

.letter-title-stack {
  display: grid;
  gap: clamp(13px, 2vw, 22px);
}

.letter-section-label {
  margin: 0;
  color: #171717;
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.letter-archive-head h1 {
  max-width: 1280px;
  margin: 0;
  color: #171717;
  font-size: clamp(44px, 7.4vw, 126px);
  font-weight: 900;
  line-height: 0.8;
  text-transform: uppercase;
  text-wrap: balance;
}

.letter-post-count {
  margin: 0;
  color: #171717;
  font-size: clamp(18px, 2.1vw, 32px);
  font-weight: 700;
}

.letter-action-stack {
  display: grid;
  justify-items: end;
  gap: 14px;
  color: rgba(23, 23, 23, 0.62);
  font-size: 13px;
  line-height: 1.35;
  text-align: right;
}

.letter-submit-link,
.letter-back-button {
  min-height: 46px;
  border: 1px solid #171717;
  border-radius: 999px;
  background: #171717;
  color: #f4f2ed;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.letter-back-button {
  width: fit-content;
  background: transparent;
  color: #171717;
}

.letter-search-bar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 0;
  margin: 0 0 0;
  border: 0;
  border-top: 1px solid rgba(23, 23, 23, 0.18);
  border-bottom: 1px solid rgba(23, 23, 23, 0.18);
}

.letter-search-bar input,
.letter-search-bar button {
  min-height: 64px;
  border: 0;
  background: transparent;
  color: #171717;
}

.letter-search-bar input {
  padding: 0;
  border-right: 0;
  font-size: clamp(17px, 1.6vw, 24px);
  font-weight: 700;
}

.letter-search-bar input::placeholder {
  color: rgba(23, 23, 23, 0.38);
}

.letter-search-bar button {
  padding: 0 0 0 clamp(18px, 2.6vw, 42px);
  border-left: 0;
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 800;
  text-transform: uppercase;
}

.letter-filter-toggle::before {
  content: "";
  display: none;
}

.letter-color-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(34px, 5vw, 74px);
  padding: 16px 0 18px;
  border: 0;
  border-bottom: 1px solid rgba(23, 23, 23, 0.18);
}

.letter-filter-chip {
  min-width: 22px;
  min-height: 22px;
  border: 1px solid rgba(23, 23, 23, 0.3);
  border-radius: 50%;
  background: var(--swatch-bg);
  color: var(--swatch-fg);
  font-size: 0;
}

.letter-filter-chip[data-color="all"] {
  min-width: auto;
  min-height: 28px;
  border: 0;
  border-radius: 0;
  padding: 0 8px 0 0;
  background: transparent;
  color: #171717;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
}

.letter-filter-chip.is-active {
  outline: 2px solid #171717;
  outline-offset: 3px;
}

.letter-feed {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(32px, 4vw, 68px) clamp(22px, 3vw, 46px);
  align-items: start;
}

.message.letter-card {
  grid-column: span 4;
  display: grid;
  gap: 13px;
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: #171717;
  box-shadow: none;
}

.message.letter-card.is-wide {
  grid-column: span 6;
}

.message.letter-card.is-tall {
  grid-column: span 3;
}

.message.letter-card:nth-child(8n + 4) {
  grid-column: span 5;
}

.message.letter-card:nth-child(8n + 7) {
  grid-column: span 7;
}

.letter-card-media {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: clamp(260px, 30vw, 520px);
  aspect-ratio: 1 / 1.06;
  overflow: hidden;
  padding: clamp(18px, 3vw, 44px);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 7px),
    var(--card-bg);
  color: var(--card-fg);
}

.letter-card.is-wide .letter-card-media {
  aspect-ratio: 1.72 / 1;
}

.letter-card.is-tall .letter-card-media {
  aspect-ratio: 0.78 / 1;
}

.letter-card-number {
  position: absolute;
  top: 14px;
  left: 14px;
  color: currentColor;
  font-size: 12px;
  font-weight: 900;
  opacity: 0.72;
}

.letter-card-media p {
  position: relative;
  z-index: 1;
  max-width: 13ch;
  margin: 0;
  font-size: clamp(30px, 3.7vw, 70px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.letter-card.is-wide .letter-card-media p {
  max-width: 18ch;
  font-size: clamp(34px, 4.2vw, 82px);
}

.letter-card.is-tall .letter-card-media p {
  font-size: clamp(26px, 3.1vw, 54px);
}

.letter-card-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.letter-card-caption h2 {
  margin: 0;
  color: #171717;
  font-size: clamp(17px, 1.7vw, 25px);
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
}

.letter-card-caption p {
  margin: 0;
  color: rgba(23, 23, 23, 0.58);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.letter-card-reply {
  padding-top: 2px;
  border-top: 0;
}

.letter-empty {
  grid-column: 1 / -1;
  padding: 72px 0;
  border: 0;
  border-top: 1px solid rgba(23, 23, 23, 0.18);
  border-bottom: 1px solid rgba(23, 23, 23, 0.18);
  color: rgba(23, 23, 23, 0.55);
  text-align: left;
  font-size: clamp(24px, 4vw, 54px);
  font-weight: 900;
  text-transform: uppercase;
}

.letter-submit-form {
  width: min(1120px, 100%);
  margin: 0;
  padding: clamp(14px, 2vw, 28px) 0 clamp(78px, 9vw, 132px);
  background: transparent;
  color: #171717;
}

.letter-submit-head {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: clamp(18px, 4vw, 58px);
  padding-bottom: clamp(28px, 5vw, 76px);
}

.letter-submit-head h2 {
  margin: 0;
  color: #171717;
  font-size: clamp(56px, 9vw, 140px);
  font-weight: 900;
  line-height: 0.82;
  text-align: left;
  text-transform: uppercase;
}

.draft-context {
  border: 1px solid rgba(23, 23, 23, 0.22);
  background: rgba(255, 255, 255, 0.38);
  color: #171717;
}

.letter-to-label {
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
}

.letter-submit-form input[type="text"],
.letter-submit-form input:not([type]),
.letter-submit-form textarea {
  border: 0;
  border-bottom: 1px solid rgba(23, 23, 23, 0.25);
  background: transparent;
  color: #171717;
  padding: 16px 0;
  font-size: clamp(22px, 3vw, 42px);
  font-weight: 800;
}

.letter-submit-form textarea {
  min-height: 260px;
}

.letter-submit-form input::placeholder,
.letter-submit-form textarea::placeholder {
  color: rgba(23, 23, 23, 0.32);
}

.letter-color-grid {
  grid-template-columns: repeat(16, minmax(28px, 1fr));
  gap: 9px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(23, 23, 23, 0.16);
}

.letter-color-swatch {
  min-height: 34px;
  border: 1px solid rgba(23, 23, 23, 0.25);
  border-radius: 999px;
}

.letter-color-swatch.is-active {
  outline: 2px solid #171717;
  outline-offset: 3px;
}

.letter-submit-message {
  min-height: 58px;
  border: 1px solid rgba(23, 23, 23, 0.2);
  border-radius: 999px;
  background: transparent;
  color: rgba(23, 23, 23, 0.42);
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
}

.letter-submit-message:not(:disabled) {
  border-color: #171717;
  background: #171717;
  color: #f4f2ed;
}

.letter-terms {
  justify-content: flex-start;
  color: rgba(23, 23, 23, 0.68);
  font-size: 14px;
  font-weight: 700;
}

.letter-terms a {
  color: #171717;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1100px) {
  .message.letter-card,
  .message.letter-card.is-tall,
  .message.letter-card:nth-child(8n + 4) {
    grid-column: span 6;
  }

  .message.letter-card.is-wide,
  .message.letter-card:nth-child(8n + 7) {
    grid-column: span 12;
  }

  .letter-color-grid {
    grid-template-columns: repeat(8, minmax(32px, 1fr));
  }
}

@media (max-width: 760px) {
  .letter-unsent-shell {
    padding: 104px 14px 72px;
  }

  .letter-archive-head {
    grid-template-columns: 1fr;
    min-height: auto;
    justify-items: stretch;
    text-align: left;
  }

  .letter-action-stack {
    justify-items: start;
    text-align: left;
  }

  .letter-search-bar {
    grid-template-columns: 1fr;
    padding: 14px 0;
  }

  .letter-search-bar input,
  .letter-search-bar button {
    min-height: 42px;
    padding: 0;
    border-top: 0;
  }

  .letter-color-filters {
    gap: 9px;
  }

  .letter-feed {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .message.letter-card,
  .message.letter-card.is-wide,
  .message.letter-card.is-tall,
  .message.letter-card:nth-child(8n + 4),
  .message.letter-card:nth-child(8n + 7) {
    grid-column: 1;
  }

  .letter-card-media,
  .letter-card.is-wide .letter-card-media,
  .letter-card.is-tall .letter-card-media {
    min-height: 340px;
    aspect-ratio: 1 / 1.02;
  }

  .letter-card-media p {
    font-size: clamp(42px, 13vw, 72px);
  }

  .letter-submit-head {
    grid-template-columns: 1fr;
  }

  .letter-color-grid {
    grid-template-columns: repeat(4, minmax(36px, 1fr));
  }
}

/* LETTER pass 2: closer to Analogue's Work page structure. */
.site-shell[data-view="letter"] .topbar {
  top: 22px;
  left: clamp(28px, 4.7vw, 60px);
  right: clamp(28px, 4.7vw, 60px);
  gap: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.site-shell[data-view="letter"] .topbar .nav {
  justify-content: flex-end;
  gap: clamp(18px, 3vw, 42px);
}

.site-shell[data-view="letter"] .topbar .nav-link {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-shadow: none;
}

.site-shell[data-view="letter"] .topbar .nav-link.is-active {
  min-width: 66px;
  min-height: 28px;
  border: 2px solid #000;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.site-shell[data-view="letter"] .topbar .nav-link:hover {
  background: transparent;
  color: #000;
  transform: none;
}

.letter-view {
  background: #fff;
  color: #000;
}

.letter-unsent-shell {
  padding: clamp(110px, 11vw, 152px) clamp(28px, 4.7vw, 60px) clamp(80px, 8vw, 128px);
  background: #fff;
  background-image: none;
}

.letter-panel {
  width: min(1440px, 100%);
  max-width: none;
}

.letter-archive-head {
  position: relative;
  display: block;
  padding: 0 0 22px;
}

.letter-title-stack {
  gap: 12px;
}

.letter-archive-head h1 {
  max-width: none;
  margin: 0;
  color: #000;
  font-size: clamp(58px, 7.2vw, 112px);
  font-weight: 400;
  line-height: 0.9;
  white-space: nowrap;
  text-transform: uppercase;
}

.letter-section-label {
  order: 2;
  margin: 0;
  color: #000;
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
}

.letter-post-count {
  order: 3;
  margin: 0;
  color: #000;
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 500;
}

.letter-action-stack {
  position: absolute;
  right: 0;
  bottom: 24px;
  justify-items: end;
  gap: 10px;
  color: #000;
  font-size: 12px;
  text-align: right;
}

.letter-submit-link,
.letter-back-button {
  min-height: 34px;
  border: 2px solid #000;
  border-radius: 999px;
  background: #fff;
  color: #000;
  padding: 7px 18px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}

.letter-submit-link:hover,
.letter-back-button:hover {
  background: #000;
  color: #fff;
}

.letter-search-bar {
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: clamp(22px, 4vw, 52px);
  margin: 0;
  padding: 0;
  border: 0;
}

.letter-search-bar input,
.letter-search-bar button {
  min-height: 42px;
  background: transparent;
  color: #000;
}

.letter-search-bar input {
  max-width: 340px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.22);
  font-size: 16px;
  font-weight: 400;
}

.letter-search-bar input::placeholder {
  color: rgba(0, 0, 0, 0.42);
}

.letter-search-bar button {
  padding: 0;
  border: 0;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
}

.letter-color-filters {
  flex-wrap: nowrap;
  gap: clamp(18px, 3vw, 40px);
  margin: 0 0 24px;
  padding: 0 0 24px;
  border: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.letter-color-filters::-webkit-scrollbar {
  display: none;
}

.letter-filter-chip,
.letter-filter-chip[data-color="all"] {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 32px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #000;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.letter-filter-chip.is-active {
  border: 2px solid #000;
  border-radius: 999px;
  outline: 0;
  padding: 0 16px;
}

.letter-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 38px) clamp(16px, 2vw, 24px);
  align-items: start;
}

.message.letter-card,
.message.letter-card.is-wide,
.message.letter-card.is-tall,
.message.letter-card.is-left,
.message.letter-card.is-right,
.message.letter-card:nth-child(8n + 4),
.message.letter-card:nth-child(8n + 7) {
  grid-column: auto;
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.letter-card-media,
.letter-card.is-wide .letter-card-media,
.letter-card.is-tall .letter-card-media {
  position: relative;
  display: block;
  width: 100%;
  min-height: auto;
  aspect-ratio: 1.75 / 1;
  overflow: hidden;
  border-radius: 8px;
  padding: clamp(18px, 2.6vw, 34px);
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.8) 0 8%, transparent 8.4%),
    radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.18) 0 18%, transparent 18.4%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 46%),
    var(--card-bg);
  color: var(--card-fg);
}

.letter-card-media::before {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    linear-gradient(90deg, transparent 0 42%, rgba(255, 255, 255, 0.32) 42.3% 43%, transparent 43.3% 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 10px);
  transform: rotate(-8deg);
}

.letter-card-number {
  position: absolute;
  left: 18px;
  top: 16px;
  z-index: 2;
  font-size: 12px;
  font-weight: 600;
}

.letter-card-preview {
  position: absolute;
  left: clamp(18px, 2.6vw, 34px);
  right: clamp(18px, 2.6vw, 34px);
  bottom: clamp(18px, 2.6vw, 34px);
  z-index: 2;
  display: block;
  max-width: 12ch;
  color: currentColor;
  font-size: clamp(36px, 4.2vw, 72px);
  font-weight: 800;
  line-height: 0.92;
  text-transform: uppercase;
}

.letter-card-mark {
  position: absolute;
  right: clamp(18px, 2.4vw, 32px);
  top: clamp(18px, 2.4vw, 32px);
  z-index: 2;
  width: clamp(42px, 6vw, 86px);
  aspect-ratio: 1;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.7;
}

.letter-card-caption {
  display: grid;
  gap: 5px;
}

.letter-card-caption h2 {
  margin: 0;
  color: #000;
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 600;
  line-height: 1.1;
  text-transform: none;
}

.letter-card-caption p {
  margin: 0;
  color: #000;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
}

.letter-card-reply {
  color: rgba(0, 0, 0, 0.58) !important;
  font-style: normal !important;
}

.letter-empty {
  grid-column: 1 / -1;
  padding: 70px 0;
  border: 0;
  color: #000;
  font-size: clamp(42px, 6vw, 96px);
  font-weight: 400;
  text-align: left;
  text-transform: uppercase;
}

.letter-submit-form {
  width: min(1080px, 100%);
  margin: 0;
  background: #fff;
}

.letter-submit-head h2 {
  color: #000;
  font-size: clamp(58px, 8vw, 126px);
  font-weight: 400;
  line-height: 0.9;
}

.letter-submit-form input[type="text"],
.letter-submit-form input:not([type]),
.letter-submit-form textarea {
  border-bottom-color: rgba(0, 0, 0, 0.22);
  color: #000;
  font-size: clamp(20px, 2.3vw, 34px);
  font-weight: 400;
}

.letter-color-grid {
  grid-template-columns: repeat(8, minmax(42px, 1fr));
}

@media (max-width: 760px) {
  .letter-unsent-shell {
    padding: 100px 14px 72px;
  }

  .letter-archive-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .letter-archive-head h1 {
    font-size: clamp(48px, 18vw, 72px);
    white-space: normal;
  }

  .letter-action-stack {
    position: static;
    justify-items: start;
    text-align: left;
  }

  .letter-search-bar {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
  }

  .letter-color-filters {
    gap: 14px 20px;
  }

  .letter-feed {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .letter-card-media,
  .letter-card.is-wide .letter-card-media,
  .letter-card.is-tall .letter-card-media {
    aspect-ratio: 1.2 / 1;
  }

  .letter-card-preview {
    font-size: clamp(36px, 12vw, 60px);
  }

  .letter-color-grid {
    grid-template-columns: repeat(4, minmax(42px, 1fr));
  }
}

.game-head {
  padding: clamp(86px, 11vw, 150px) clamp(18px, 5vw, 76px) 34px;
  border-bottom: 2px solid var(--line);
}

.game-head h2 {
  max-width: 1120px;
  font-size: clamp(46px, 9vw, 126px);
}

.admin-console {
  display: grid;
  gap: 9px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 2px solid rgba(246, 241, 230, 0.28);
}

.admin-label {
  display: inline-block;
  width: fit-content;
  margin: 0;
  padding: 5px 7px;
  background: var(--paper);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-console label {
  color: var(--chrome);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-console select,
.admin-console textarea {
  width: 100%;
  border: 2px solid var(--paper);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  padding: 10px;
  font-weight: 800;
}

.admin-console textarea {
  min-height: 92px;
  resize: vertical;
}

.game-view {
  background: #111114;
  color: var(--paper);
}

.game-head {
  border-bottom-color: rgba(246, 241, 230, 0.18);
}

.game-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  gap: 18px;
  padding: clamp(18px, 4vw, 54px);
}

.game-room {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  border: 2px solid var(--paper);
  background: #050507;
}

.game-room::after {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.04)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 44%, rgba(0, 0, 0, 0.42));
  pointer-events: none;
}

.game-object {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 86px;
  min-height: 82px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--acid);
  color: var(--ink);
  box-shadow: 5px 5px 0 #000;
  font-size: 0;
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 160ms ease, opacity 160ms ease;
}

.game-object::before {
  content: "";
  position: relative;
  display: block;
}

.game-object::after {
  content: attr(data-item);
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 5px;
  padding: 3px 4px;
  background: var(--ink);
  color: var(--paper);
  font-size: 9px;
  line-height: 1;
  text-align: center;
}

.game-object:hover {
  transform: scale(1.12);
}

.game-object.is-found {
  opacity: 0;
  pointer-events: none;
}

.object-key {
  top: 25%;
  left: 17%;
}

.object-key::before {
  width: 52px;
  height: 38px;
  background:
    radial-gradient(circle at 15px 17px, transparent 0 7px, var(--ink) 8px 13px, transparent 14px),
    linear-gradient(var(--ink), var(--ink)) 28px 18px / 30px 7px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 50px 25px / 8px 12px no-repeat;
}

.object-envelope {
  top: 43%;
  left: 49%;
  background: #fff;
}

.object-envelope::before {
  width: 54px;
  height: 36px;
  border: 3px solid var(--ink);
  background:
    linear-gradient(27deg, transparent 48%, var(--ink) 49% 53%, transparent 54%),
    linear-gradient(153deg, transparent 48%, var(--ink) 49% 53%, transparent 54%),
    var(--paper);
}

.object-star {
  top: 18%;
  right: 18%;
  background: var(--coral);
  color: #fff;
}

.object-star::before {
  width: 46px;
  height: 46px;
  background: var(--paper);
  clip-path: polygon(50% 0, 61% 34%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 20% 92%, 32% 56%, 2% 35%, 39% 34%);
}

.object-cassette {
  bottom: 19%;
  left: 28%;
  background: var(--chrome);
}

.object-cassette::before {
  width: 58px;
  height: 36px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  background:
    radial-gradient(circle at 18px 18px, var(--paper) 0 7px, var(--ink) 8px 11px, transparent 12px),
    radial-gradient(circle at 40px 18px, var(--paper) 0 7px, var(--ink) 8px 11px, transparent 12px),
    var(--coral);
}

.object-heart {
  right: 16%;
  bottom: 22%;
  background: var(--violet);
  color: #fff;
}

.object-heart::before {
  width: 46px;
  height: 42px;
  background: var(--paper);
  clip-path: polygon(50% 90%, 10% 52%, 8% 25%, 28% 6%, 50% 24%, 72% 6%, 92% 25%, 90% 52%);
}

.inventory {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink);
}

.inventory ul {
  min-height: 160px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inventory li {
  margin-bottom: 8px;
  padding: 9px 10px;
  border: 2px solid var(--ink);
  background: #fff;
  font-weight: 900;
  text-transform: uppercase;
}

.ending {
  min-height: 80px;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
}

.reward-card {
  display: grid;
  gap: 9px;
  margin-top: 16px;
  padding: 14px;
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
}

.reward-card.is-unlocked {
  background: var(--acid);
}

.reward-mark {
  position: relative;
  width: 58px;
  height: 58px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 7px, transparent 8px),
    conic-gradient(var(--coral), var(--violet), var(--chrome), var(--acid), var(--coral));
}

.reward-card b {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 0.95;
  text-transform: uppercase;
}

.reward-card p {
  margin: 0;
  font-size: 14px;
}

.reward-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.reward-actions[hidden] {
  display: none;
}

.admin-page {
  background: #111114;
  color: var(--paper);
}

.admin-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 70px;
}

.admin-header {
  padding: 34px 0 28px;
}

.admin-back {
  display: inline-grid;
  place-items: center;
  margin-bottom: 28px;
  min-height: 56px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 8px 32px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2vw, 30px);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.28);
  transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}

.admin-back:hover {
  background: var(--ink);
  color: #fff;
  border-color: #fff;
  transform: translateY(1px);
}

.admin-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(52px, 11vw, 132px);
  line-height: 0.86;
  text-transform: uppercase;
}

.admin-header > p:last-child {
  max-width: 720px;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 800;
}

.admin-key-row {
  display: grid;
  grid-template-columns: auto minmax(180px, 320px) auto;
  gap: 10px;
  align-items: center;
  width: fit-content;
  margin-top: 22px;
  padding: 12px;
  border: 2px solid rgba(246, 241, 230, 0.32);
  background: rgba(246, 241, 230, 0.08);
}

.admin-key-row label {
  color: var(--chrome);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-key-row input {
  border: 2px solid var(--paper);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  padding: 9px 10px;
  font-weight: 800;
}

.admin-status {
  margin: 12px 0 0;
  color: var(--acid);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
}

.admin-card {
  padding: 20px;
  border: 2px solid var(--paper);
  background: #19191f;
  color: var(--paper);
}

.admin-card label {
  display: block;
  margin: 14px 0 7px;
  color: var(--chrome);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-card select,
.admin-card textarea {
  width: 100%;
  border: 2px solid var(--paper);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  padding: 11px;
  font-weight: 800;
}

.admin-card textarea {
  min-height: 150px;
  resize: vertical;
}

.admin-preview,
.admin-answer {
  margin-top: 14px;
  padding: 14px;
  border: 2px solid rgba(246, 241, 230, 0.3);
  background: rgba(246, 241, 230, 0.08);
}

.admin-preview strong,
.admin-answer strong {
  display: block;
  margin-bottom: 9px;
  text-transform: uppercase;
}

.admin-preview p,
.admin-answer p {
  margin: 0;
  line-height: 1.45;
  font-weight: 700;
}

.admin-preview small {
  display: block;
  margin-top: 10px;
  color: var(--acid);
  font-weight: 900;
  text-transform: uppercase;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-list {
  display: grid;
  gap: 12px;
}

@media (max-width: 920px) {
  .gate-canvas {
    min-height: 1360px;
  }

  .gate-menu {
    top: 6px;
    left: 6px;
    right: 6px;
    flex-wrap: wrap;
  }

  .gate-menu button,
  .gate-menu a {
    min-height: 54px;
    font-size: clamp(18px, 3.4vw, 28px);
  }

  .gate-keyboard {
    --s: 0.78;
    left: -160px;
    top: -18px;
  }

  .gate-starfield {
    --s: 0.76;
    left: 48vw;
  }

  .gate-poster-vrown {
    left: 20px;
    top: 390px;
    width: 290px;
    height: 295px;
  }

  .gate-flyer-blue {
    left: 34vw;
    top: 455px;
  }

  .gate-flyer-pink {
    left: 54vw;
    top: 345px;
  }

  .gate-shirt-red {
    right: -48px;
    top: 330px;
  }

  .gate-badge {
    right: 18px;
    top: 220px;
  }

  .gate-photo-stack {
    left: 50vw;
    width: 310px;
  }

  .gate-vrown-poster {
    left: 24px;
    width: 290px;
  }

  .gate-setlist-flyer {
    left: 34vw;
    width: 275px;
  }

  .gate-szv-social-poster {
    left: 55vw;
    width: 250px;
  }

  .gate-red-shirt {
    right: -24px;
    width: 255px;
  }

  .gate-blue-shirt {
    left: -6px;
    width: 330px;
  }

  .gate-band-photo {
    right: -42px;
    width: 360px;
  }

  .gate-white-shirt {
    left: 48vw;
    width: 385px;
  }

  .topbar {
    align-items: center;
    flex-wrap: wrap;
  }

  .brand {
    flex: 1 1 100%;
    min-height: 54px;
    font-size: clamp(18px, 3.4vw, 28px);
  }

  .nav {
    flex: 1 1 100%;
  }

  .topbar .nav-link {
    min-height: 54px;
    font-size: clamp(18px, 3.4vw, 28px);
  }

  .view {
    padding-top: 68px;
  }

  .statement-band,
  .media-reel,
  .fragment-stage,
  .letter-layout,
  .game-shell,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .vrown-grid {
    grid-template-columns: 1fr;
  }

  .composer {
    grid-template-columns: 1fr;
  }

  .scroll-chip {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 22px;
  }

  .hero {
    display: block;
    padding-top: 160px;
  }

  .hero-copy {
    margin-top: 30vh;
  }

  .artist-signal {
    position: relative;
    top: auto;
    right: auto;
    width: 150px;
    margin: 24px 0 0 auto;
  }

  .reel-main {
    grid-template-columns: 1fr;
  }

  .admin-key-row {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .entry {
    padding: 0;
  }

  .gate-canvas {
    min-height: 1240px;
  }

  .gate-menu {
    top: 6px;
    left: 6px;
    right: 6px;
    gap: 3px;
  }

  .gate-menu button,
  .gate-menu a {
    flex: 1 1 calc(50% - 3px);
    min-height: 44px;
    padding: 6px 8px;
    font-size: clamp(16px, 5vw, 22px);
  }

  .gate-brand {
    top: 20px;
    right: 20px;
  }

  .gate-keyboard {
    --s: 0.58;
    left: -178px;
    top: -32px;
  }

  .gate-starfield {
    --s: 0.52;
    left: 42vw;
    top: 8px;
  }

  .gate-typewriter {
    --s: 0.62;
    right: -34px;
    top: 84px;
  }

  .gate-badge {
    width: 118px;
    height: 118px;
    right: 4px;
    top: 240px;
    font-size: 17px;
  }

  .gate-poster-vrown {
    left: -10px;
    top: 392px;
    width: 250px;
    height: 260px;
  }

  .gate-flyer-blue {
    left: 32vw;
    top: 450px;
    width: 220px;
    height: 260px;
  }

  .gate-flyer-pink {
    left: 45vw;
    top: 330px;
    width: 205px;
    height: 255px;
  }

  .gate-flyer-green {
    left: 10vw;
    top: 760px;
    width: 210px;
    height: 240px;
  }

  .gate-shirt-red {
    right: -94px;
    top: 375px;
    width: 240px;
    height: 225px;
  }

  .gate-shirt-white {
    left: 22vw;
    top: 890px;
    width: 300px;
    height: 270px;
  }

  .gate-disc {
    left: 58vw;
    top: 672px;
    width: 145px;
    height: 145px;
    font-size: 12px;
  }

  .gate-tape {
    left: -26px;
    top: 1020px;
    width: 270px;
    height: 145px;
  }

  .gate-tape span {
    font-size: 20px;
  }

  .gate-poster-zungk {
    right: -110px;
    top: 1015px;
    width: 300px;
    height: 230px;
  }

  .gate-photo-stack {
    left: 46vw;
    top: 58px;
    width: 240px;
  }

  .gate-vrown-poster {
    left: 4px;
    top: 330px;
    width: 230px;
  }

  .gate-setlist-flyer {
    left: 31vw;
    top: 390px;
    width: 235px;
  }

  .gate-szv-social-poster {
    left: 44vw;
    top: 308px;
    width: 205px;
  }

  .gate-red-shirt {
    right: -92px;
    top: 390px;
    width: 235px;
  }

  .gate-blue-shirt {
    left: -48px;
    top: 590px;
    width: 300px;
  }

  .gate-band-photo {
    right: -120px;
    top: 605px;
    width: 330px;
  }

  .gate-purple-poster {
    left: 0;
    top: 795px;
    width: 250px;
  }

  .gate-white-shirt {
    left: 40vw;
    top: 760px;
    width: 315px;
  }

  .gate-orange-poster {
    right: -105px;
    top: 905px;
    width: 250px;
  }

  .topbar {
    top: 6px;
    left: 6px;
    right: 6px;
    gap: 3px;
    padding: 0;
  }

  .brand {
    flex: 1 1 100%;
    min-height: 44px;
    font-size: clamp(16px, 5vw, 22px);
  }

  .nav {
    gap: 3px;
  }

  .topbar .nav-link {
    min-height: 44px;
    padding: 6px 8px;
    font-size: clamp(15px, 4.4vw, 20px);
  }

  .view {
    padding-top: 68px;
  }

  .hero,
  .archive-hero {
    min-height: 78vh;
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-copy h2,
  .archive-copy h2,
  .letter-head h2,
  .game-head h2 {
    font-size: clamp(42px, 15vw, 74px);
  }

  .fragment-board {
    min-height: 820px;
  }

  .fragment {
    width: 150px;
    min-height: 132px;
  }

  .note-three {
    left: 25%;
  }

  .sealed-folder {
    width: 138px;
    min-height: 108px;
    top: 6%;
  }

  .sealed-folder span {
    font-size: 18px;
  }

  .collection-pile {
    width: 82%;
  }

  .collected-file {
    width: 138px;
  }

  .game-room {
    min-height: 520px;
  }

  .game-object {
    width: 72px;
    min-height: 72px;
  }

  .game-object::after {
    font-size: 8px;
  }

  .message:not(.letter-card) {
    max-width: calc(100% - 8px);
  }

  .message:not(.letter-card):nth-child(even) {
    align-self: flex-start;
  }
}

@media (max-width: 920px) {
  .gate-canvas {
    height: max(100svh, 700px);
    min-height: 700px;
  }

  .gate-menu {
    top: 10px;
    left: 10px;
    right: 10px;
    flex-wrap: nowrap;
  }

  .gate-menu button,
  .gate-menu a {
    min-height: 48px;
    padding: 7px 9px;
    font-size: clamp(15px, 2.4vw, 22px);
  }

  .gate-title {
    top: 285px;
    width: 250px;
    font-size: clamp(48px, 8vw, 64px);
  }

  .gate-thread {
    left: 36%;
    width: 430px;
  }

  .gate-brand {
    left: 50%;
    top: 618px;
    right: auto;
    min-width: 145px;
    min-height: 50px;
    font-size: 18px;
    transform: translateX(-50%) rotate(-3deg);
  }

  .gate-brand:hover {
    transform: translateX(-50%) translateY(1px) rotate(-3deg);
  }

  .gate-beads {
    left: 7%;
    top: 150px;
    width: 230px;
  }

  .gate-beads span {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .gate-sticky {
    left: 37%;
    top: 96px;
    width: 150px;
    height: 154px;
    font-size: 18px;
  }

  .gate-envelope {
    right: 7%;
    top: 105px;
    width: 220px;
    height: 146px;
  }

  .gate-record {
    right: 23%;
    top: 286px;
    width: 190px;
    height: 190px;
  }

  .gate-flower-blue {
    left: 5%;
    top: 274px;
  }

  .gate-flower-yellow {
    right: 6%;
    top: 246px;
  }

  .gate-dish {
    left: 7%;
    top: 430px;
    width: 170px;
    height: 126px;
  }

  .gate-ticket {
    left: 25%;
    top: 496px;
    width: 215px;
  }

  .gate-grid-paper {
    right: 4%;
    top: 458px;
    width: 180px;
    height: 154px;
  }

  .gate-cherries {
    left: 51%;
    top: 503px;
  }

  .gate-photo-stack {
    left: 20%;
    top: 255px;
    width: 210px;
  }

  .gate-vrown-poster {
    right: 17%;
    top: 344px;
    width: 205px;
  }

  .gate-setlist-flyer {
    left: 33%;
    top: 418px;
    width: 215px;
  }

  .gate-szv-social-poster {
    right: 16%;
    top: 330px;
    width: 190px;
  }

  .gate-blue-shirt {
    left: 2%;
    top: 560px;
    width: 240px;
  }

  .gate-band-photo {
    right: -6%;
    top: 545px;
    width: 300px;
  }

  .gate-purple-poster {
    left: 64%;
    top: 230px;
    width: 155px;
  }

  .gate-white-shirt {
    left: 68%;
    top: 425px;
    width: 225px;
  }

  .gate-orange-poster {
    right: 1%;
    top: 350px;
    width: 210px;
  }

  .gate-cutout.gate-typewriter {
    left: 47%;
    top: 402px;
    right: auto;
    width: 82px;
  }
}

@media (max-width: 640px) {
  .gate-canvas {
    height: max(100svh, 760px);
    min-height: 760px;
  }

  .gate-menu {
    top: 8px;
    left: 6px;
    right: auto;
    width: min(378px, calc(100vw - 12px));
    max-width: calc(100vw - 12px);
    gap: 3px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .gate-menu button,
  .gate-menu a {
    width: 100%;
    min-width: 0;
    min-height: 39px;
    padding: 5px 2px;
    overflow: hidden;
    font-size: clamp(10px, 3.1vw, 13px);
    white-space: nowrap;
  }

  .gate-title {
    top: 328px;
    z-index: 57;
    width: 184px;
    font-size: clamp(42px, 12vw, 52px);
  }

  .gate-thread {
    left: 47%;
    top: 10px;
    width: 300px;
    height: 85px;
    border-top-width: 3px;
  }

  .gate-thread::before,
  .gate-thread::after {
    width: 46px;
    height: 28px;
    border-width: 3px;
  }

  .gate-brand {
    top: calc(100svh - 82px);
    min-width: 128px;
    min-height: 44px;
    font-size: 16px;
  }

  .gate-beads {
    left: 8%;
    top: 150px;
    width: 190px;
    gap: 4px;
  }

  .gate-beads span {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .gate-sticky {
    left: 43%;
    top: 102px;
    width: 118px;
    height: 122px;
    padding: 13px;
    font-size: 14px;
  }

  .gate-envelope {
    right: -22%;
    top: 142px;
    width: 192px;
    height: 126px;
  }

  .gate-envelope span {
    inset: 28px 22px auto auto;
    width: 105px;
    height: 78px;
  }

  .gate-record {
    right: 16%;
    top: 348px;
    width: 145px;
    height: 145px;
  }

  .gate-record span {
    width: 42px;
    height: 42px;
    font-size: 11px;
  }

  .gate-flower {
    width: 92px;
    height: 92px;
  }

  .gate-flower-blue {
    left: 4%;
    top: 265px;
  }

  .gate-flower-yellow {
    right: -2%;
    top: 280px;
  }

  .gate-dish {
    left: 5%;
    top: 445px;
    width: 132px;
    height: 100px;
  }

  .gate-ticket {
    left: 27%;
    top: 510px;
    width: 172px;
    padding: 11px 13px;
  }

  .gate-ticket b {
    font-size: 14px;
  }

  .gate-ticket span {
    font-size: 10px;
  }

  .gate-grid-paper {
    right: -9%;
    top: 488px;
    width: 144px;
    height: 126px;
  }

  .gate-cherries {
    left: 54%;
    top: 494px;
    width: 88px;
    height: 86px;
  }

  .gate-cherries::before,
  .gate-cherries::after {
    width: 39px;
    height: 39px;
  }

  .gate-photo-stack {
    left: 22%;
    top: 250px;
    width: 155px;
  }

  .gate-vrown-poster {
    right: 6%;
    top: 375px;
    width: 150px;
  }

  .gate-setlist-flyer {
    left: 29%;
    top: 425px;
    width: 158px;
  }

  .gate-szv-social-poster {
    right: 6%;
    top: 345px;
    width: 145px;
  }

  .gate-blue-shirt {
    left: -8%;
    top: 585px;
    width: 190px;
  }

  .gate-band-photo {
    right: -25%;
    top: 588px;
    width: 235px;
  }

  .gate-purple-poster {
    left: 62%;
    top: 232px;
    width: 122px;
  }

  .gate-white-shirt {
    left: 62%;
    top: 442px;
    width: 168px;
  }

  .gate-orange-poster {
    right: -13%;
    top: 405px;
    width: 160px;
  }

  .gate-cutout.gate-typewriter {
    left: 45%;
    top: 414px;
    width: 64px;
  }
}

/* Readymag paper-archive inspired SZV Gate refresh */
.gate-scroll {
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.055), transparent 34%),
    radial-gradient(circle at 82% 24%, rgba(248, 153, 185, 0.045), transparent 22%),
    #070707;
}

.gate-canvas {
  max-width: 1366px;
  height: max(100svh, 720px);
  min-height: 720px;
}

.gate-canvas::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.055), transparent 31%);
  opacity: 0.9;
}

.gate-canvas::after {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.11) 0 1px, transparent 1.4px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 5px);
  background-size: 28px 28px, auto;
  opacity: 0.16;
}

.gate-cutout {
  filter:
    drop-shadow(0 13px 8px rgba(0, 0, 0, 0.42))
    contrast(1.02)
    saturate(1.03);
}

.gate-piece:not(.is-dragging):hover {
  filter:
    drop-shadow(0 17px 12px rgba(0, 0, 0, 0.46))
    contrast(1.06)
    saturate(1.07);
}

.gate-title {
  left: 49.2%;
  top: 276px;
  z-index: 64;
  width: min(350px, 32vw);
  color: #fffdf5;
  font-size: clamp(58px, 6.1vw, 86px);
  line-height: 0.72;
  text-shadow: 0 5px 12px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.gate-brand {
  z-index: 78;
  top: 416px;
  background: rgba(255, 255, 255, 0.95);
}

.gate-ref-thread {
  --r: 6deg;
  --z: 12;
  left: 42.5%;
  top: 10px;
  width: min(560px, 43vw);
}

.gate-ref-beads {
  --r: -7deg;
  --z: 34;
  left: 7.2%;
  top: 132px;
  width: min(284px, 22vw);
  height: 270px;
  filter: drop-shadow(0 15px 11px rgba(0, 0, 0, 0.4));
}

.gate-bead {
  position: absolute;
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.44));
  pointer-events: none;
}

.gate-bead-s {
  left: 12px;
  top: 18px;
  transform: rotate(-19deg);
}

.gate-bead-z {
  left: 74px;
  top: 0;
  transform: rotate(10deg);
}

.gate-bead-v {
  left: 146px;
  top: 14px;
  transform: rotate(-11deg);
}

.gate-bead-heart {
  left: 48px;
  top: 72px;
  transform: rotate(-8deg);
}

.gate-bead-r {
  left: 116px;
  top: 88px;
  transform: rotate(7deg);
}

.gate-bead-o1 {
  left: 188px;
  top: 76px;
  transform: rotate(-10deg);
}

.gate-bead-o2 {
  left: 28px;
  top: 142px;
  transform: rotate(11deg);
}

.gate-bead-m {
  left: 96px;
  top: 160px;
  transform: rotate(-5deg);
}

.gate-bead-star {
  left: 166px;
  top: 146px;
  transform: rotate(12deg);
}

.gate-ref-bunny-polaroid {
  --r: -6deg;
  --z: 27;
  left: 23.5%;
  top: 82px;
  width: min(174px, 13vw);
}

.gate-ref-sticky-note {
  --r: -8deg;
  --z: 37;
  left: 37.2%;
  top: 86px;
  width: min(152px, 12vw);
}

.gate-ref-envelope {
  --r: 8deg;
  --z: 19;
  right: 21.5%;
  top: 60px;
  width: min(286px, 22vw);
}

.gate-ref-price-tag {
  --r: -8deg;
  --z: 33;
  right: 8%;
  top: 126px;
  width: min(166px, 13vw);
}

.gate-ref-camera {
  --r: -3deg;
  --z: 48;
  left: 21.2%;
  top: 250px;
  width: min(258px, 20vw);
}

.gate-ref-blue-flower-a {
  --r: -9deg;
  --z: 28;
  left: 6.8%;
  top: 262px;
  width: min(118px, 9.2vw);
}

.gate-ref-blue-flower-b {
  --r: 8deg;
  --z: 29;
  left: 8.4%;
  top: 342px;
  width: min(112px, 8.7vw);
}

.gate-ref-vinyl {
  --r: -3deg;
  --z: 35;
  right: 28%;
  top: 250px;
  width: min(238px, 18vw);
}

.gate-ref-pink-card {
  --r: 5deg;
  --z: 41;
  right: 15.6%;
  top: 284px;
  width: min(260px, 20vw);
}

.gate-ref-yellow-flower {
  --r: 8deg;
  --z: 54;
  right: 8.7%;
  top: 238px;
  width: min(132px, 10vw);
}

.gate-ref-dish {
  --r: 12deg;
  --z: 42;
  left: 7.1%;
  top: 438px;
  width: min(212px, 16vw);
}

.gate-ref-ticket {
  --r: -7deg;
  --z: 56;
  left: 29%;
  top: 474px;
  width: min(196px, 15.2vw);
}

.gate-ref-cherries {
  --r: 8deg;
  --z: 61;
  left: 50.8%;
  top: 492px;
  width: min(128px, 10vw);
}

.gate-ref-crossword {
  --r: 6deg;
  --z: 31;
  right: 3.4%;
  top: 446px;
  width: min(226px, 17.5vw);
}

.gate-ref-dark-polaroid {
  --r: -4deg;
  --z: 50;
  left: 56.5%;
  top: 516px;
  width: min(112px, 8.6vw);
}

.gate-ref-cherry-polaroid {
  --r: -8deg;
  --z: 58;
  right: 18%;
  top: 478px;
  width: min(152px, 12vw);
}

.gate-ref-postcard-field {
  --r: -3deg;
  --z: 25;
  left: 13%;
  top: 596px;
  width: min(240px, 18.5vw);
}

.gate-ref-greetings-card {
  --r: 4deg;
  --z: 23;
  right: 29%;
  top: 610px;
  width: min(194px, 15vw);
}

.gate-ref-photo-strip {
  --r: 7deg;
  --z: 45;
  right: 5.2%;
  top: 606px;
  width: min(96px, 7.3vw);
}

.gate-ref-postcard-note {
  --r: -3deg;
  --z: 28;
  left: 39%;
  top: 610px;
  width: min(204px, 15.8vw);
}

@media (max-width: 920px) {
  .gate-canvas {
    height: max(100svh, 720px);
    min-height: 720px;
  }

  .gate-title {
    top: 286px;
    width: 268px;
    font-size: clamp(52px, 8.3vw, 70px);
  }

  .gate-brand {
    top: 420px;
  }

  .gate-ref-thread {
    left: 37%;
    top: 22px;
    width: 430px;
  }

  .gate-ref-beads {
    left: 4.8%;
    top: 128px;
    width: 250px;
    height: 230px;
  }

  .gate-ref-bunny-polaroid {
    left: 26.5%;
    top: 106px;
    width: 136px;
  }

  .gate-ref-sticky-note {
    left: 42.5%;
    top: 102px;
    width: 122px;
  }

  .gate-ref-envelope {
    right: 5%;
    top: 104px;
    width: 226px;
  }

  .gate-ref-price-tag {
    right: 2.5%;
    top: 236px;
    width: 126px;
  }

  .gate-ref-camera {
    left: 18.5%;
    top: 264px;
    width: 204px;
  }

  .gate-ref-blue-flower-a {
    left: 4%;
    top: 284px;
    width: 98px;
  }

  .gate-ref-blue-flower-b {
    left: 6%;
    top: 352px;
    width: 92px;
  }

  .gate-ref-vinyl {
    right: 23%;
    top: 286px;
    width: 194px;
  }

  .gate-ref-pink-card {
    right: 7%;
    top: 330px;
    width: 214px;
  }

  .gate-ref-yellow-flower {
    right: 3.5%;
    top: 285px;
    width: 102px;
  }

  .gate-ref-dish {
    left: 4.5%;
    top: 448px;
    width: 170px;
  }

  .gate-ref-ticket {
    left: 28%;
    top: 502px;
    width: 158px;
  }

  .gate-ref-cherries {
    left: 51%;
    top: 506px;
    width: 104px;
  }

  .gate-ref-crossword {
    right: 2%;
    top: 468px;
    width: 182px;
  }

  .gate-ref-dark-polaroid {
    left: 57%;
    top: 515px;
    width: 98px;
  }

  .gate-ref-cherry-polaroid {
    right: 16%;
    top: 498px;
    width: 124px;
  }

  .gate-ref-postcard-field {
    left: 10%;
    top: 610px;
    width: 190px;
  }

  .gate-ref-greetings-card {
    right: 31%;
    top: 612px;
    width: 158px;
  }

  .gate-ref-photo-strip {
    right: 2.5%;
    top: 614px;
    width: 76px;
  }

  .gate-ref-postcard-note {
    left: 40%;
    top: 616px;
    width: 164px;
  }
}

@media (max-width: 640px) {
  .gate-canvas {
    height: max(100svh, 820px);
    min-height: 820px;
  }

  .gate-title {
    top: 326px;
    z-index: 68;
    width: 200px;
    font-size: clamp(44px, 12.6vw, 56px);
  }

  .gate-brand {
    top: 438px;
  }

  .gate-ref-thread {
    left: 39%;
    top: 58px;
    width: 278px;
  }

  .gate-ref-beads {
    --s: 0.78;
    left: -8%;
    top: 126px;
    width: 250px;
    height: 220px;
  }

  .gate-ref-bunny-polaroid {
    left: 49%;
    top: 124px;
    width: 122px;
  }

  .gate-ref-sticky-note {
    left: 38%;
    top: 92px;
    width: 106px;
  }

  .gate-ref-envelope {
    right: -19%;
    top: 156px;
    width: 174px;
  }

  .gate-ref-price-tag {
    right: 2%;
    top: 254px;
    width: 88px;
  }

  .gate-ref-camera {
    left: -1%;
    top: 276px;
    width: 176px;
  }

  .gate-ref-blue-flower-a {
    left: -8%;
    top: 330px;
    width: 90px;
  }

  .gate-ref-blue-flower-b {
    left: -5%;
    top: 398px;
    width: 84px;
  }

  .gate-ref-vinyl {
    right: -22%;
    top: 360px;
    width: 156px;
  }

  .gate-ref-pink-card {
    right: -30%;
    top: 448px;
    width: 170px;
  }

  .gate-ref-yellow-flower {
    right: 5%;
    top: 285px;
    width: 86px;
  }

  .gate-ref-dish {
    left: -6%;
    top: 512px;
    width: 150px;
  }

  .gate-ref-ticket {
    left: 31%;
    top: 535px;
    width: 144px;
  }

  .gate-ref-cherries {
    left: 58%;
    top: 508px;
    width: 86px;
  }

  .gate-ref-crossword {
    right: -10%;
    top: 606px;
    width: 132px;
  }

  .gate-ref-dark-polaroid,
  .gate-ref-postcard-field,
  .gate-ref-greetings-card,
  .gate-ref-photo-strip,
  .gate-ref-postcard-note {
    display: none;
  }

  .gate-ref-cherry-polaroid {
    left: 36%;
    right: auto;
    top: 634px;
    width: 110px;
  }
}

.gate-brand,
.gate-brand:hover {
  display: grid;
  place-items: center;
  font-style: normal;
  transform: translateX(-50%);
}

.gate-brand:hover {
  transform: translateX(-50%) translateY(1px);
}

.topbar {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(100vw - 24px);
  gap: 4px;
  padding: 0;
  border-bottom: 0;
  background: transparent;
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: none;
}

.site-shell[data-view="vrown"] .topbar {
  opacity: 1;
  pointer-events: auto;
}

.topbar .nav {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
}

.topbar .nav-link {
  display: grid;
  flex: 1 1 0;
  place-items: center;
  min-width: 0;
  min-height: 50px;
  padding: 8px 13px;
  border: 2px solid rgba(17, 17, 20, 0.88);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2.3vw, 32px);
  font-style: normal;
  font-weight: 900;
  line-height: 0.86;
  text-align: center;
  text-decoration: none;
  text-shadow: 0.6px 0 0 currentColor;
  text-transform: uppercase;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.22);
  cursor: pointer;
}

.topbar .nav-link.is-active {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}

.topbar .nav-link:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(1px);
}

.vrown-edge-nav {
  display: none;
}

@media (max-width: 920px) {
  .topbar {
    top: 10px;
    left: 10px;
    right: 10px;
    max-width: calc(100vw - 20px);
    flex-wrap: nowrap;
  }

  .topbar .nav {
    flex-wrap: nowrap;
  }

  .topbar .nav-link {
    min-height: 48px;
    padding: 7px 9px;
    font-size: clamp(15px, 2.4vw, 22px);
  }
}

@media (max-width: 640px) {
  .topbar {
    top: 8px;
    left: 6px;
    right: 6px;
    width: auto;
    max-width: none;
    gap: 3px;
  }

  .topbar .nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
  }

  .topbar .nav-link {
    width: 100%;
    min-width: 0;
    min-height: 39px;
    padding: 5px 2px;
    overflow: hidden;
    font-size: clamp(9px, 2.7vw, 11px);
    white-space: nowrap;
  }
}

/* VROWN planetary descent redesign */
.vrown-view {
  background: #07070e;
}

.vrown-supari {
  background: #07070e;
  color: #fffaf0;
}

.vrown-supari::before,
.vrown-supari::after {
  content: none;
  display: none;
}

.vrown-planetary-world {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 5%, rgba(253, 221, 132, 0.25) 0 8%, transparent 25%),
    linear-gradient(180deg, #070816 0%, #17113a 12%, #cf3b31 26%, #f27625 39%, #8d2f24 51%, #08080d 68%, #11090a 82%, #fb3225 100%);
}

.vrown-planetary-world::before,
.vrown-planetary-world::after,
.vrown-planetary-world span {
  position: absolute;
  display: block;
  pointer-events: none;
}

.vrown-planetary-world::before {
  content: "";
  inset: 0;
  opacity: 0.82;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.76) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 198, 126, 0.62) 0 1px, transparent 2px);
  background-position: 0 0, 34px 58px;
  background-size: 112px 144px, 178px 216px;
  mask-image: linear-gradient(180deg, #000 0 21%, transparent 46%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 21%, transparent 46%);
}

.vrown-planetary-world::after {
  content: "";
  left: 50%;
  top: 7%;
  width: min(520px, 48vw);
  height: 78%;
  transform: translate3d(-50%, var(--vrown-trail-y, 0px), 0) rotate(-5deg);
  border-radius: 999px;
  opacity: var(--vrown-fall-opacity, 0.58);
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255, 250, 201, 0.88) 0 7%, transparent 21%),
    linear-gradient(180deg, rgba(255, 246, 185, 0.42) 0%, rgba(255, 163, 68, 0.28) 28%, rgba(255, 80, 42, 0.16) 60%, transparent 100%);
  filter: blur(16px);
  mix-blend-mode: screen;
}

.vrown-world-planet {
  left: 50%;
  top: clamp(86px, 11vh, 134px);
  z-index: 2;
  width: min(1020px, 78vw);
  aspect-ratio: 1;
  transform: translate3d(-50%, var(--vrown-planet-y, 0px), 0) rotate(-10deg);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 31%, rgba(255, 255, 220, 0.96) 0 6%, rgba(255, 223, 125, 0.72) 7% 13%, transparent 14%),
    radial-gradient(circle at 69% 60%, rgba(78, 22, 45, 0.52) 0 12%, transparent 13%),
    radial-gradient(circle at 32% 74%, rgba(255, 103, 43, 0.55) 0 11%, transparent 12%),
    radial-gradient(circle at 50% 50%, #ffbd4a 0 28%, #f15a27 51%, #ae2732 76%, #3e1530 100%);
  box-shadow:
    0 0 0 26px rgba(255, 238, 175, 0.08),
    0 0 0 88px rgba(255, 138, 57, 0.08),
    0 72px 180px rgba(255, 80, 48, 0.34);
  filter: saturate(1.14) contrast(1.04);
  animation: vrownWorldFloat 11s ease-in-out infinite;
}

.vrown-world-orbit {
  left: 50%;
  top: clamp(98px, 13vh, 168px);
  z-index: 3;
  border: 2px solid rgba(255, 239, 186, 0.32);
  border-radius: 50%;
  transform: translateX(-50%) rotate(-11deg);
  mix-blend-mode: screen;
}

.vrown-world-orbit.one {
  width: min(1180px, 92vw);
  height: min(350px, 25vw);
}

.vrown-world-orbit.two {
  width: min(880px, 72vw);
  height: min(236px, 17vw);
  top: clamp(150px, 20vh, 240px);
  opacity: 0.54;
  transform: translateX(-50%) rotate(9deg);
}

.vrown-world-trail {
  left: 50%;
  top: 18%;
  z-index: 4;
  width: min(210px, 20vw);
  height: 58%;
  transform: translate3d(-50%, var(--vrown-trail-y, 0px), 0) rotate(-4deg);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 251, 206, 0.78), rgba(255, 135, 61, 0.36) 38%, rgba(255, 62, 41, 0.18) 68%, transparent 100%);
  filter: blur(8px);
  mix-blend-mode: screen;
}

.vrown-world-clouds {
  left: 50%;
  top: 22%;
  z-index: 5;
  width: 130vw;
  height: 32%;
  transform: translate3d(-50%, var(--vrown-cloud-y, 0px), 0);
  background:
    radial-gradient(ellipse at 10% 33%, rgba(255, 242, 205, 0.88) 0 9%, transparent 10%),
    radial-gradient(ellipse at 28% 24%, rgba(255, 238, 198, 0.76) 0 12%, transparent 13%),
    radial-gradient(ellipse at 49% 37%, rgba(255, 214, 165, 0.8) 0 15%, transparent 16%),
    radial-gradient(ellipse at 70% 30%, rgba(255, 239, 205, 0.74) 0 11%, transparent 12%),
    radial-gradient(ellipse at 90% 40%, rgba(255, 218, 165, 0.62) 0 10%, transparent 11%),
    linear-gradient(180deg, transparent 0%, rgba(255, 194, 118, 0.18) 42%, transparent 100%);
  opacity: 0.7;
  filter: blur(1px);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
}

.vrown-world-ground {
  left: -10%;
  right: -10%;
  bottom: -7%;
  z-index: 6;
  height: 32%;
  transform: translate3d(0, var(--vrown-ground-y, 0px), 0);
  background:
    radial-gradient(ellipse at 50% 2%, rgba(255, 238, 169, 0.4) 0 8%, transparent 9%),
    radial-gradient(ellipse at 22% 100%, rgba(37, 9, 11, 0.98) 0 20%, transparent 21%),
    radial-gradient(ellipse at 48% 101%, rgba(29, 7, 9, 0.94) 0 25%, transparent 26%),
    radial-gradient(ellipse at 76% 102%, rgba(42, 10, 8, 0.94) 0 22%, transparent 23%),
    linear-gradient(0deg, #07070e 0 56%, rgba(111, 29, 18, 0.72) 57%, transparent 100%);
}

.vrown-bg-clouds,
.vrown-top-cloud,
.vrown-rock-wrap,
.vrown-foreground-cloud,
.vrown-cave-frame,
.vrown-about-tree,
.vrown-about-leaves,
.vrown-about-stone,
.vrown-about-ground,
.vrown-about-characters {
  display: none;
}

.vrown-hero-screen,
.vrown-showreel-section,
.vrown-about-section,
.vrown-projects-section,
.vrown-allies-section,
.vrown-cta-section {
  position: relative;
  z-index: 2;
  background: transparent;
}

.vrown-hero-screen {
  min-height: 156svh;
  overflow: hidden;
}

.vrown-hero-screen::before {
  left: 50%;
  top: auto;
  bottom: -4%;
  z-index: 1;
  width: 118vw;
  height: 38%;
  transform: translateX(-50%);
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 2%, rgba(255, 245, 196, 0.36) 0 7%, transparent 8%),
    radial-gradient(ellipse at 12% 100%, rgba(116, 25, 23, 0.62) 0 16%, transparent 17%),
    radial-gradient(ellipse at 48% 103%, rgba(78, 17, 22, 0.7) 0 24%, transparent 25%),
    radial-gradient(ellipse at 82% 100%, rgba(137, 34, 23, 0.58) 0 17%, transparent 18%),
    linear-gradient(0deg, rgba(6, 6, 12, 0.72), transparent 74%);
  box-shadow: none;
  filter: none;
  opacity: 1;
}

.vrown-hero-screen::after {
  left: 50%;
  top: 19%;
  z-index: 2;
  width: min(260px, 20vw);
  height: 72%;
  transform: translate3d(-50%, var(--vrown-trail-y, 0px), 0) rotate(-5deg);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 250, 210, 0.52), rgba(255, 142, 64, 0.28) 47%, transparent 100%);
  filter: blur(10px);
  opacity: 0.74;
  mix-blend-mode: screen;
}

.vrown-headline {
  top: clamp(190px, 31vh, 260px);
  bottom: auto;
  z-index: 8;
  width: min(920px, 86vw);
  filter: drop-shadow(0 24px 42px rgba(16, 5, 8, 0.42));
}

.vrown-headline-kicker {
  color: #ffe8a8;
  text-shadow: 0 2px 14px rgba(255, 138, 52, 0.48);
}

.vrown-headline h1 {
  color: #fffaf0;
  font-size: clamp(92px, 12vw, 190px);
  text-shadow:
    0 8px 0 rgba(93, 18, 24, 0.34),
    0 0 38px rgba(255, 221, 150, 0.38);
}

.vrown-spark {
  color: #ffe9a8;
  filter: drop-shadow(0 0 16px rgba(255, 216, 125, 0.58));
}

.vrown-showreel-section {
  min-height: 172svh;
  overflow: hidden;
}

.vrown-showreel-section::before {
  left: 50%;
  top: 0;
  z-index: 1;
  width: 132vw;
  height: 56%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 6%, rgba(255, 246, 202, 0.46) 0 7%, transparent 8%),
    radial-gradient(ellipse at 18% 38%, rgba(255, 185, 100, 0.28) 0 14%, transparent 15%),
    radial-gradient(ellipse at 82% 34%, rgba(255, 102, 55, 0.3) 0 13%, transparent 14%),
    linear-gradient(180deg, transparent 0%, rgba(254, 93, 41, 0.16) 56%, rgba(5, 5, 10, 0.72) 100%);
  opacity: 1;
  filter: none;
  mask-image: none;
  -webkit-mask-image: none;
}

.vrown-showreel-section::after {
  left: 50%;
  top: 16%;
  z-index: 2;
  width: min(980px, 86vw);
  height: 58%;
  transform: translateX(-50%) rotate(-2deg);
  border: 1px solid rgba(255, 231, 171, 0.16);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 173, 91, 0.2) 0 9%, transparent 28%),
    radial-gradient(ellipse at 50% 60%, rgba(6, 6, 12, 0.55) 0 22%, transparent 23%);
  filter: blur(0.2px);
  opacity: 0.88;
}

.vrown-showreel-card {
  z-index: 7;
  border: 1px solid rgba(255, 238, 184, 0.52);
  border-radius: 22px;
  background: rgba(4, 5, 9, 0.88);
  box-shadow:
    0 0 0 10px rgba(255, 160, 68, 0.08),
    0 34px 120px rgba(0, 0, 0, 0.58),
    0 0 86px rgba(255, 91, 43, 0.3);
}

.vrown-showreel-card::after {
  border-color: rgba(255, 244, 203, 0.25);
  border-radius: 22px;
}

.vrown-play-toggle {
  border-color: rgba(255, 240, 199, 0.94);
  background: rgba(9, 8, 14, 0.78);
  box-shadow: 0 0 28px rgba(255, 135, 56, 0.28);
}

.vrown-about-section {
  min-height: 148svh;
  overflow: hidden;
}

.vrown-about-section::before {
  top: -4%;
  z-index: 1;
  height: 66%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 234, 162, 0.3) 0 10%, transparent 11%),
    linear-gradient(180deg, rgba(5, 5, 11, 0.86), rgba(250, 111, 35, 0.08) 54%, transparent 100%),
    radial-gradient(ellipse at 0 74%, rgba(10, 18, 21, 0.9) 0 21%, transparent 22%),
    radial-gradient(ellipse at 100% 72%, rgba(10, 18, 21, 0.88) 0 21%, transparent 22%);
}

.vrown-about-section::after {
  bottom: -4%;
  z-index: 2;
  height: 48%;
  background:
    radial-gradient(ellipse at 18% 100%, #06070b 0 23%, transparent 24%),
    radial-gradient(ellipse at 50% 103%, #06070b 0 31%, transparent 32%),
    radial-gradient(ellipse at 83% 100%, #06070b 0 22%, transparent 23%),
    linear-gradient(0deg, #06070b 0 56%, rgba(31, 12, 10, 0.88) 57%, transparent 100%);
}

.vrown-about-copy {
  z-index: 6;
  top: 36%;
  width: min(470px, 36vw);
  color: #fffaf0;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.vrown-about-copy h2 {
  text-shadow:
    0 6px 0 rgba(81, 20, 19, 0.32),
    0 0 24px rgba(255, 184, 95, 0.18);
}

.vrown-projects-section {
  gap: min(26vh, 220px);
  padding-top: 66vh;
  background:
    radial-gradient(ellipse at 50% 0, rgba(255, 123, 53, 0.15) 0 10%, transparent 34%),
    linear-gradient(180deg, rgba(6, 7, 11, 0.74) 0%, #06070b 23%, #10080c 64%, #06070b 100%);
}

.vrown-projects-section::before {
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 8% 16%, rgba(255, 115, 55, 0.17) 0 9%, transparent 29%),
    radial-gradient(ellipse at 93% 38%, rgba(255, 214, 128, 0.12) 0 8%, transparent 28%),
    repeating-linear-gradient(115deg, transparent 0 150px, rgba(255, 255, 255, 0.035) 151px 152px, transparent 153px 290px);
  opacity: 0.92;
}

.vrown-projects-section::after {
  left: 50%;
  top: -5%;
  z-index: 2;
  width: min(640px, 62vw);
  height: 112%;
  transform: translateX(-50%) rotate(3deg);
  background:
    linear-gradient(180deg, transparent 0%, rgba(255, 216, 141, 0.14) 16%, rgba(255, 74, 43, 0.08) 42%, transparent 78%);
  filter: blur(14px);
  opacity: 0.9;
}

.vrown-project-logo {
  top: 82px;
  z-index: 8;
  color: #ffe7a3;
  text-shadow: 0 0 22px rgba(255, 171, 80, 0.4);
}

.vrown-project-card {
  z-index: 5;
}

.vrown-project-card img {
  border: 1px solid rgba(255, 238, 186, 0.28);
  border-radius: 18px;
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.45),
    0 0 44px rgba(255, 94, 47, 0.12);
}

.vrown-project-card h2 {
  color: #fffaf0;
  text-shadow: 0 9px 0 rgba(70, 17, 19, 0.32);
}

.vrown-project-card span {
  color: #ffe4a2;
}

.vrown-allies-section {
  background:
    radial-gradient(ellipse at 58% 28%, rgba(255, 207, 130, 0.22) 0 10%, transparent 34%),
    linear-gradient(180deg, #06070b 0%, #15090b 44%, #85291d 78%, #d34b22 100%);
}

.vrown-allies-section::before {
  inset: auto -10% -16%;
  z-index: 1;
  height: 65%;
  background:
    radial-gradient(ellipse at 24% 100%, rgba(6, 7, 11, 0.94) 0 24%, transparent 25%),
    radial-gradient(ellipse at 58% 105%, rgba(6, 7, 11, 0.62) 0 21%, transparent 22%),
    radial-gradient(ellipse at 82% 100%, rgba(6, 7, 11, 0.76) 0 17%, transparent 18%);
}

.vrown-allies-section::after {
  right: -9%;
  bottom: 2%;
  z-index: 2;
  width: min(610px, 46vw);
  border-color: rgba(255, 232, 168, 0.22);
  box-shadow: inset 0 0 42px rgba(255, 114, 50, 0.22);
}

.vrown-allies-copy {
  z-index: 5;
}

.vrown-allies-copy h2 {
  color: rgba(255, 246, 213, 0.34);
}

.vrown-cta-section {
  align-items: flex-start;
  background:
    radial-gradient(ellipse at 66% 72%, rgba(255, 246, 187, 0.34) 0 9%, transparent 30%),
    linear-gradient(180deg, #d34b22 0%, #fb3225 30%, #ff4c21 68%, #fb3225 100%);
}

.vrown-cta-section::before {
  left: -14%;
  right: -14%;
  bottom: -18%;
  z-index: 1;
  height: 58%;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255, 247, 207, 0.26) 0 8%, transparent 9%),
    radial-gradient(ellipse at 52% 63%, rgba(62, 13, 12, 0.3) 0 22%, transparent 23%),
    radial-gradient(ellipse at 18% 100%, rgba(67, 14, 11, 0.24) 0 19%, transparent 20%),
    radial-gradient(ellipse at 83% 100%, rgba(67, 14, 11, 0.24) 0 19%, transparent 20%);
}

.vrown-cta-section::after {
  right: clamp(-100px, -6vw, -32px);
  bottom: clamp(92px, 14vh, 184px);
  z-index: 2;
  width: min(620px, 48vw);
  border-color: rgba(255, 244, 204, 0.32);
  box-shadow:
    inset 0 0 46px rgba(255, 248, 207, 0.14),
    0 0 60px rgba(255, 120, 55, 0.22);
}

.vrown-cta-copy {
  z-index: 5;
}

@keyframes vrownWorldFloat {
  0%,
  100% {
    margin-top: 0;
  }

  50% {
    margin-top: -18px;
  }
}

@media (max-width: 920px) {
  .vrown-world-planet {
    top: 104px;
    width: 106vw;
  }

  .vrown-world-orbit.one {
    width: 122vw;
    height: 34vw;
  }

  .vrown-world-orbit.two {
    width: 92vw;
    height: 27vw;
  }

  .vrown-headline {
    top: clamp(190px, 28vh, 250px);
    bottom: auto;
  }

  .vrown-about-copy {
    width: min(420px, 46vw);
  }
}

@media (max-width: 640px) {
  .vrown-planetary-world {
    background:
      radial-gradient(circle at 50% 4%, rgba(253, 221, 132, 0.22) 0 8%, transparent 25%),
      linear-gradient(180deg, #070816 0%, #17113a 10%, #cf3b31 25%, #f27625 40%, #8d2f24 52%, #08080d 69%, #11090a 83%, #fb3225 100%);
  }

  .vrown-world-planet {
    top: 122px;
    width: 156vw;
  }

  .vrown-world-orbit.one {
    top: 180px;
    width: 166vw;
    height: 48vw;
  }

  .vrown-world-orbit.two {
    top: 236px;
    width: 132vw;
    height: 38vw;
  }

  .vrown-world-trail {
    top: 21%;
    width: 34vw;
  }

  .vrown-world-clouds {
    top: 27%;
    width: 180vw;
    opacity: 0.56;
  }

  .vrown-hero-screen {
    min-height: 118svh;
  }

  .vrown-hero-screen::before {
    height: 34%;
  }

  .vrown-hero-screen::after {
    width: 42vw;
    opacity: 0.58;
  }

  .vrown-headline {
    top: 56vh;
    bottom: auto;
    width: 90vw;
  }

  .vrown-headline h1 {
    font-size: clamp(62px, 18vw, 88px);
  }

  .vrown-showreel-section {
    min-height: 126svh;
  }

  .vrown-showreel-card {
    top: 33%;
    border-radius: 16px;
  }

  .vrown-showreel-card::after {
    border-radius: 16px;
  }

  .vrown-about-section {
    min-height: 114svh;
  }

  .vrown-about-copy {
    top: 18%;
    width: 88vw;
  }

  .vrown-projects-section {
    padding-top: 38vh;
  }

  .vrown-project-logo {
    top: 56px;
  }

  .vrown-project-card img {
    border-radius: 14px;
  }

  .vrown-allies-section::after,
  .vrown-cta-section::after {
    width: 92vw;
  }
}

/* ZUNGK save-for-later page */
.zungk-view {
  padding-top: 0;
  background: #ededeb;
  color: #050505;
}

.zungk-page {
  --save-shift: 0px;
  min-height: 100svh;
  background: #ededeb;
  color: #050505;
  font-family: var(--font-body);
  overflow: hidden;
}

.zungk-hero {
  position: relative;
  min-height: 100svh;
  padding: 20px clamp(18px, 5vw, 48px) 28px;
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(216, 234, 238, 0.72), rgba(237, 237, 235, 0.9) 50%, rgba(244, 229, 211, 0.84)),
    #ededeb;
  transition: background 360ms ease;
}

.zungk-hero-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.68;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 86px,
      rgba(5, 5, 5, 0.18) 87px,
      rgba(5, 5, 5, 0.18) 88px
    );
}

.zungk-question {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 210px;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
}

.zungk-question span {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #050505;
}

.zungk-question.is-left {
  left: 18px;
  text-align: left;
}

.zungk-question.is-right {
  right: 18px;
  justify-content: flex-end;
  text-align: right;
}

.zungk-question.is-top {
  top: 94px;
}

.zungk-question.is-low {
  top: 190px;
}

.zungk-title {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(8.4rem, 16vw, 13rem);
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
}

.zungk-title span {
  display: block;
  white-space: nowrap;
}

.zungk-chaos-cloud {
  position: absolute;
  inset: 80px 24px 64px;
  z-index: 5;
  pointer-events: none;
}

.zungk-mini-card {
  position: absolute;
  display: grid;
  place-items: center;
  width: 112px;
  height: 92px;
  overflow: hidden;
  border: 1px solid rgba(5, 5, 5, 0.12);
  background: #fff;
  color: #050505;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 0.9;
  opacity: 1;
  box-shadow: 0 8px 22px rgba(5, 5, 5, 0.12);
  transform: translateY(0) scale(1) rotate(var(--r, 0deg));
  transition: opacity 220ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.zungk-mini-card img,
.zungk-media-tile img,
.zungk-bottom-strip img,
.zungk-mosaic img,
.zungk-floating-files img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.zungk-mini-card.one {
  --r: -5deg;
  left: 16%;
  top: 18%;
}

.zungk-mini-card.two {
  --r: 3deg;
  left: 34%;
  top: 13%;
  background: #111;
  color: #fff;
}

.zungk-mini-card.three {
  --r: 8deg;
  left: 49%;
  top: 22%;
  width: 146px;
  height: 118px;
}

.zungk-mini-card.four {
  --r: -4deg;
  right: 15%;
  top: 23%;
  width: 150px;
  height: 130px;
  background: #ff35c9;
}

.zungk-mini-card.five {
  --r: 5deg;
  left: 23%;
  top: 48%;
  width: 132px;
  height: 132px;
}

.zungk-mini-card.six {
  --r: -2deg;
  left: 43%;
  top: 43%;
  background: #fef019;
}

.zungk-mini-card.seven {
  --r: 6deg;
  right: 22%;
  top: 48%;
  width: 120px;
  height: 120px;
}

.zungk-mini-card.eight {
  --r: -7deg;
  right: 7%;
  top: 45%;
  background: #245dff;
  color: #fff;
}

.zungk-mini-card.nine {
  --r: 2deg;
  left: 57%;
  bottom: 17%;
  width: 158px;
  height: 110px;
}

.zungk-mini-card.ten {
  --r: 4deg;
  left: 18%;
  bottom: 18%;
  background: #f05a28;
  color: #fff;
}

.zungk-info-folder {
  position: absolute;
  right: 22px;
  bottom: 20px;
  z-index: 7;
  display: grid;
  gap: 2px;
  place-items: center;
  min-width: 82px;
  border: 0;
  background: transparent;
  color: rgba(5, 5, 5, 0.42);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.zungk-folder-icon {
  position: relative;
  display: block;
  width: 66px;
  height: 44px;
  border: 2px solid #2f94c8;
  border-radius: 7px;
  background: #59c3ee;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.28), 0 3px 9px rgba(0, 0, 0, 0.15);
}

.zungk-folder-icon::before {
  content: "";
  position: absolute;
  left: 5px;
  top: -9px;
  width: 30px;
  height: 12px;
  border: 2px solid #2f94c8;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #59c3ee;
}

.zungk-info-panel {
  position: absolute;
  right: clamp(18px, 5vw, 60px);
  bottom: 96px;
  z-index: 9;
  width: min(520px, calc(100% - 36px));
  padding: 22px;
  border: 2px solid #050505;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 10px 10px 0 #050505;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.zungk-info-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.zungk-info-panel h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 0.95;
  text-transform: uppercase;
}

.zungk-info-panel p {
  margin: 0 0 12px;
  font-weight: 700;
  line-height: 1.45;
}

.zungk-info-close {
  position: absolute;
  right: 12px;
  top: 12px;
  min-height: 32px;
  border: 2px solid #050505;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  font-weight: 900;
}

.zungk-text-scene {
  position: relative;
  min-height: 126svh;
  padding: 78px 22px 180px;
  overflow: hidden;
  background: #ededeb;
}

.zungk-text-wall {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  font-family: var(--font-display);
  font-size: 76px;
  line-height: 0.96;
  text-transform: none;
}

.zungk-text-wall span {
  display: inline;
  text-decoration-thickness: 4px;
}

.zungk-text-wall span:nth-child(4),
.zungk-text-wall span:nth-child(6) {
  text-decoration-line: underline;
}

.zungk-scribble {
  position: absolute;
  right: 7%;
  top: 26%;
  z-index: 2;
  width: 300px;
  height: 96px;
  border: 3px solid #050505;
  border-color: #050505 transparent #050505 #050505;
  border-radius: 50%;
  transform: rotate(-8deg);
  pointer-events: none;
}

.zungk-scribble::before,
.zungk-scribble::after {
  content: "";
  position: absolute;
  left: -24px;
  right: -24px;
  top: 44px;
  height: 2px;
  background: #050505;
  transform: rotate(8deg);
}

.zungk-scribble::after {
  top: 56px;
  transform: rotate(-7deg);
}

.zungk-bottom-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 164px;
  overflow: hidden;
}

.zungk-save-scene {
  background: #ededeb;
}

.zungk-breath {
  position: relative;
  min-height: 44svh;
  display: grid;
  align-items: center;
  padding: 44px 24px;
  border-top: 1px solid rgba(5, 5, 5, 0.18);
  border-bottom: 1px solid rgba(5, 5, 5, 0.18);
}

.zungk-breath h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 92px;
  line-height: 0.9;
  text-transform: uppercase;
}

.zungk-breath h2 span {
  display: block;
}

.zungk-breath p {
  position: absolute;
  right: 24px;
  bottom: 28px;
  max-width: 280px;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.zungk-fragment-stage {
  position: relative;
  display: block;
  min-height: 840px;
  padding: 0;
  background: #050505;
}

.zungk-save-field {
  width: 100%;
  min-height: 840px;
  border: 0;
  background:
    linear-gradient(90deg, rgba(237, 237, 235, 0.86), rgba(237, 237, 235, 0.12) 58%, rgba(237, 237, 235, 0.55)),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(5, 5, 5, 0.06) 39px 40px),
    #f1f1ef;
}

.zungk-save-field::after {
  background:
    linear-gradient(180deg, transparent 0 54%, #050505 54% 100%),
    repeating-linear-gradient(0deg, rgba(5, 5, 5, 0.05) 0 1px, transparent 1px 5px);
  opacity: 0.94;
}

.zungk-counter-card {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 18;
  display: grid;
  gap: 2px;
  min-width: 236px;
  padding: 12px 16px;
  border: 1px solid rgba(5, 5, 5, 0.14);
  border-radius: 8px;
  background: rgba(239, 239, 239, 0.82);
  color: #050505;
  font-weight: 800;
  line-height: 1.15;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 24px rgba(5, 5, 5, 0.18);
  backdrop-filter: blur(10px);
}

.zungk-counter-card strong {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
}

.zungk-save-button {
  position: absolute;
  left: 50%;
  top: calc(38% - 62px);
  bottom: auto;
  z-index: 22;
  min-height: 44px;
  padding: 10px 22px;
  border: 2px solid #050505;
  border-radius: 999px;
  background: #fff;
  color: #050505;
  font-weight: 900;
  transform: translateX(-50%);
}

.zungk-save-button:hover {
  background: #fef019;
}

.zungk-save-marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 74px;
  z-index: 17;
  display: flex;
  gap: 20px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
  animation: zungkMarquee 16s linear infinite;
}

.zungk-media-tile,
.zungk-generated-save {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  color: #050505;
  font-family: var(--font-display);
  font-size: 16px;
  text-align: center;
  box-shadow: 0 8px 28px rgba(5, 5, 5, 0.2);
}

.zungk-generated-save {
  width: var(--w, 118px);
  height: var(--h, 96px);
  left: var(--x, 50%);
  top: var(--y, 20%);
  z-index: 13;
  border: 1px solid rgba(5, 5, 5, 0.12);
  background: var(--bg, #fff);
  color: var(--fg, #050505);
  transform: rotate(var(--r, 0deg)) scale(0.8);
  animation: zungkSavedIn 320ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.tile-one {
  left: 0;
  top: 0;
  width: 260px;
  height: 260px;
  transform: rotate(-3deg);
}

.tile-two {
  left: 16%;
  top: 4%;
  width: 230px;
  height: 170px;
  transform: rotate(2deg);
}

.tile-three {
  left: 3%;
  top: 31%;
  width: 230px;
  height: 104px;
  background: #050505;
  color: #fff;
  transform: rotate(-1deg);
}

.tile-four {
  right: 30%;
  top: 2%;
  width: 270px;
  height: 284px;
  background: #fef019;
  transform: rotate(4deg);
}

.tile-five {
  right: 0;
  top: 0;
  width: 420px;
  height: 390px;
  transform: rotate(0deg);
}

.tile-six {
  left: 13%;
  top: 39%;
  width: 310px;
  height: 210px;
  transform: rotate(-4deg);
}

.tile-seven {
  right: 32%;
  top: 45%;
  width: 230px;
  height: 146px;
  background: #ff35c9;
  transform: rotate(1deg);
}

.tile-eight {
  right: 12%;
  bottom: 16%;
  width: 190px;
  height: 170px;
  transform: rotate(-3deg);
}

.zungk-save-field .collection-pile {
  left: 12%;
  bottom: 30%;
  width: 300px;
  min-height: 170px;
  transform: none;
  z-index: 16;
}

.zungk-save-field .collected-file {
  width: 148px;
  min-height: 70px;
  padding: 9px;
  font-size: 11px;
}

.zungk-save-field .sealed-folder {
  left: 52%;
  top: 9%;
  width: 132px;
  min-height: 96px;
  z-index: 19;
  box-shadow: 6px 6px 0 #050505;
}

.zungk-save-field .sealed-folder span {
  margin-bottom: 10px;
  font-size: 19px;
}

.zungk-save-field .seal-button {
  padding: 6px;
  font-size: 10px;
}

.zungk-save-field .fragment {
  width: 130px;
  min-height: 112px;
  padding: 12px 10px 10px;
  box-shadow: 5px 5px 0 rgba(5, 5, 5, 0.9);
}

.zungk-save-field .fragment-icon {
  width: 58px;
  height: 46px;
  margin-bottom: 8px;
  transform: scale(0.74);
}

.zungk-save-field .fragment b {
  font-size: 18px;
}

.zungk-save-field .fragment small {
  margin-top: 8px;
  font-size: 9px;
}

.zungk-save-field .note-one {
  top: 24%;
  left: 18%;
}

.zungk-save-field .note-two {
  top: 29%;
  right: 24%;
}

.zungk-save-field .note-three {
  left: 34%;
  top: 54%;
}

.zungk-save-field .note-four {
  bottom: 16%;
  left: 20%;
}

.zungk-save-field .note-five {
  right: 18%;
  bottom: 19%;
}

.zungk-signal-log {
  position: absolute;
  right: 22px;
  top: 270px;
  z-index: 36;
  width: min(310px, calc(100% - 44px));
  min-height: auto;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 5px),
    rgba(5, 5, 5, 0.78);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
}

.zungk-signal-log strong {
  margin: 4px 0 12px;
  font-size: 42px;
}

.zungk-signal-log p {
  font-size: 13px;
}

.zungk-signal-log .fragment-meta {
  gap: 2px;
  margin-top: 10px;
}

.zungk-signal-log .fragment-meta div {
  grid-template-columns: 58px minmax(0, 1fr);
  padding: 6px 0;
}

.zungk-signal-log .text-button {
  width: 100%;
  margin-top: 12px;
  padding: 10px 9px;
  font-size: 11px;
}

.zungk-black-scene {
  min-height: 112svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 60px;
  padding: 112px 22px 164px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
    #050505;
  color: #fff;
}

.zungk-black-scene h2 {
  max-width: 1220px;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(48px, 5.4vw, 70px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: 0;
}

.zungk-see-saved {
  align-self: stretch;
  min-height: 116px;
  border: 0;
  border-bottom: 8px solid #fff;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: clamp(58px, 10vw, 126px);
  font-weight: 500;
  line-height: 0.88;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 7px;
  text-underline-offset: 10px;
}

.zungk-overload-wall {
  min-height: 115svh;
  padding: 0;
  overflow: hidden;
  background: #ededeb;
}

.zungk-mosaic {
  position: relative;
  display: block;
  width: 100%;
  min-height: 115svh;
  transform: none;
}

.zungk-mosaic img {
  position: absolute;
  width: var(--w);
  height: var(--h);
  left: var(--x);
  top: var(--y);
  z-index: var(--z, 1);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  transform: rotate(var(--r, 0deg));
  filter: saturate(1.08) contrast(1.03);
}

.zungk-mosaic img:nth-child(1) {
  --x: -4%;
  --y: -2%;
  --w: 33%;
  --h: 44%;
  --r: -2deg;
  --z: 2;
}

.zungk-mosaic img:nth-child(2) {
  --x: 21%;
  --y: 0%;
  --w: 36%;
  --h: 34%;
  --r: 1deg;
  --z: 3;
}

.zungk-mosaic img:nth-child(3) {
  --x: 52%;
  --y: -1%;
  --w: 25%;
  --h: 49%;
  --r: -1deg;
  --z: 5;
}

.zungk-mosaic img:nth-child(4) {
  --x: 76%;
  --y: 4%;
  --w: 27%;
  --h: 37%;
  --r: 2deg;
  --z: 2;
}

.zungk-mosaic img:nth-child(5) {
  --x: 6%;
  --y: 34%;
  --w: 22%;
  --h: 36%;
  --r: 3deg;
  --z: 6;
}

.zungk-mosaic img:nth-child(6) {
  --x: 25%;
  --y: 28%;
  --w: 28%;
  --h: 42%;
  --r: -3deg;
  --z: 4;
}

.zungk-mosaic img:nth-child(7) {
  --x: 48%;
  --y: 38%;
  --w: 22%;
  --h: 34%;
  --r: 2deg;
  --z: 7;
}

.zungk-mosaic img:nth-child(8) {
  --x: 64%;
  --y: 30%;
  --w: 34%;
  --h: 44%;
  --r: -2deg;
  --z: 5;
}

.zungk-mosaic img:nth-child(9) {
  --x: -5%;
  --y: 62%;
  --w: 30%;
  --h: 38%;
  --r: -1deg;
  --z: 1;
}

.zungk-mosaic img:nth-child(10) {
  --x: 18%;
  --y: 64%;
  --w: 30%;
  --h: 40%;
  --r: 2deg;
  --z: 8;
}

.zungk-mosaic img:nth-child(11) {
  --x: 45%;
  --y: 68%;
  --w: 25%;
  --h: 36%;
  --r: -3deg;
  --z: 3;
}

.zungk-mosaic img:nth-child(12) {
  --x: 68%;
  --y: 63%;
  --w: 35%;
  --h: 42%;
  --r: 1deg;
  --z: 6;
}

.zungk-release-scene {
  position: relative;
  min-height: 138svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background:
    linear-gradient(110deg, rgba(186, 219, 225, 0.8), rgba(237, 237, 235, 0.94) 48%, rgba(240, 225, 200, 0.86));
}

.zungk-floating-files {
  position: absolute;
  inset: 0 0 42%;
  pointer-events: none;
}

.zungk-floating-files span {
  position: absolute;
  display: block;
  width: 92px;
  height: 92px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.7);
  transform: rotate(var(--r, 0deg));
  opacity: 0.72;
  animation: zungkFloat 8s ease-in-out infinite;
}

.zungk-floating-files span:nth-child(1) {
  --r: -12deg;
  left: 18%;
  top: 18%;
}

.zungk-floating-files span:nth-child(2) {
  --r: 7deg;
  left: 54%;
  top: 30%;
  animation-delay: -2s;
}

.zungk-floating-files span:nth-child(3) {
  --r: 14deg;
  right: 22%;
  top: 16%;
  animation-delay: -4s;
}

.zungk-floating-files span:nth-child(4) {
  --r: -8deg;
  right: 12%;
  top: 40%;
  animation-delay: -1s;
}

.zungk-floating-files span:nth-child(5) {
  --r: 5deg;
  left: 33%;
  top: 48%;
  animation-delay: -3s;
}

.zungk-final-question {
  position: relative;
  z-index: 2;
  min-height: 70svh;
  padding: 34px 22px 136px;
  background: #050505;
  color: #fff;
}

.zungk-final-question h2 {
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.92;
}

.zungk-final-question p {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 270px;
  margin: 0 52px 0 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.zungk-final-question p span {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  margin-top: 2px;
  border-radius: 50%;
  background: #fff;
}

@keyframes zungkMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-280px);
  }
}

@keyframes zungkSavedIn {
  to {
    transform: rotate(var(--r, 0deg)) scale(1);
  }
}

@keyframes zungkFloat {
  0%,
  100% {
    transform: translateY(0) rotate(var(--r, 0deg));
  }

  50% {
    transform: translateY(-24px) rotate(calc(var(--r, 0deg) + 6deg));
  }
}

@media (max-width: 980px) {
  .zungk-title {
    font-size: 5.8rem;
  }

  .zungk-text-wall {
    font-size: 54px;
  }

  .zungk-fragment-stage {
    grid-template-columns: 1fr;
  }

  .zungk-signal-log {
    position: relative;
    min-height: auto;
    border-left: 0;
  }

  .zungk-black-scene h2 {
    font-size: 52px;
  }

  .zungk-see-saved {
    min-height: 84px;
    font-size: 52px;
  }

  .zungk-mosaic {
    grid-template-columns: repeat(4, 1fr);
  }

  .zungk-final-question h2 {
    font-size: 70px;
  }
}

@media (max-width: 640px) {
  .zungk-hero {
    padding-inline: 14px;
  }

  .zungk-question {
    max-width: 142px;
    gap: 8px;
    font-size: 11px;
  }

  .zungk-question.is-low {
    top: 166px;
  }

  .zungk-title {
    left: 14px;
    right: 14px;
    bottom: 38px;
    font-size: 3.4rem;
  }

  .zungk-info-folder {
    right: 12px;
    bottom: 126px;
  }

  .zungk-mini-card {
    width: 82px;
    height: 72px;
    font-size: 13px;
  }

  .zungk-mini-card.three,
  .zungk-mini-card.four,
  .zungk-mini-card.nine {
    width: 96px;
    height: 82px;
  }

  .zungk-text-scene {
    min-height: 112svh;
    padding: 66px 14px 142px;
  }

  .zungk-text-wall {
    padding-right: 0;
    font-size: 38px;
  }

  .zungk-scribble {
    right: -48px;
    top: 35%;
    width: 210px;
  }

  .zungk-bottom-strip {
    grid-template-columns: repeat(3, 1fr);
    height: 126px;
  }

  .zungk-breath h2 {
    font-size: 52px;
  }

  .zungk-breath p {
    position: static;
    max-width: 100%;
    margin-top: 18px;
  }

  .zungk-save-field {
    min-height: 720px;
  }

  .zungk-save-field .fragment {
    width: 104px;
    min-height: 96px;
    padding: 8px;
  }

  .zungk-save-field .fragment-icon {
    margin-bottom: 2px;
    transform: scale(0.56);
  }

  .zungk-save-field .fragment b {
    font-size: 14px;
  }

  .zungk-save-field .fragment small {
    font-size: 8px;
  }

  .zungk-save-field .note-one {
    left: 6%;
    top: 24%;
  }

  .zungk-save-field .note-two {
    right: 7%;
    top: 24%;
  }

  .zungk-save-field .note-three {
    left: 35%;
    top: 62%;
  }

  .zungk-save-field .note-four {
    left: 8%;
    bottom: 13%;
  }

  .zungk-save-field .note-five {
    right: 8%;
    bottom: 15%;
  }

  .tile-one,
  .tile-four,
  .tile-five,
  .tile-six {
    width: 150px;
    height: 150px;
  }

  .tile-two,
  .tile-three,
  .tile-seven,
  .tile-eight {
    width: 116px;
    height: 96px;
  }

  .zungk-counter-card {
    min-width: 210px;
  }

  .zungk-save-button {
    top: calc(38% - 180px);
  }

  .zungk-save-field .sealed-folder {
    left: 50%;
    width: 112px;
  }

  .zungk-black-scene h2,
  .zungk-see-saved {
    font-size: 40px;
  }

  .zungk-mosaic {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 136px;
  }

  .zungk-final-question {
    padding-bottom: 132px;
  }

  .zungk-final-question h2 {
    font-size: 46px;
  }

  .zungk-final-question p {
    display: flex;
    margin: 0 0 14px;
  }
}

/* VROWN background-only repair: keep the original sections and assets intact. */
.vrown-view {
  background: #fa2a2d;
}

.vrown-supari {
  overflow-x: hidden;
  overflow-y: visible;
  background:
    linear-gradient(180deg, #fb9c21 0%, #fb5c1d 18%, #fa2a2d 32%, #120809 53%, #050506 78%, #fa292c 100%);
  color: #fff;
}

.vrown-planetary-world {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 6%, rgba(255, 236, 154, 0.42) 0 6%, transparent 22%),
    linear-gradient(180deg, rgba(6, 8, 20, 0.72) 0 12%, rgba(251, 142, 32, 0.38) 17%, rgba(250, 42, 45, 0.18) 34%, rgba(5, 5, 8, 0.24) 58%, rgba(5, 5, 6, 0.42) 77%, rgba(250, 41, 44, 0.32) 100%);
}

.vrown-planetary-world::before,
.vrown-planetary-world::after,
.vrown-planetary-world span {
  position: absolute;
  display: block;
  pointer-events: none;
}

.vrown-planetary-world::before {
  content: "";
  inset: 0;
  opacity: 0.52;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255, 203, 116, 0.5) 0 1px, transparent 2px);
  background-position: 0 0, 38px 62px;
  background-size: 116px 148px, 186px 222px;
  mask-image: linear-gradient(180deg, #000 0 23%, transparent 58%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 23%, transparent 58%);
}

.vrown-planetary-world::after {
  content: "";
  left: 50%;
  top: 8%;
  width: min(480px, 45vw);
  height: 82%;
  transform: translate3d(-50%, var(--vrown-trail-y, 0px), 0) rotate(-5deg);
  border-radius: 999px;
  opacity: var(--vrown-fall-opacity, 0.54);
  background:
    radial-gradient(ellipse at 50% 3%, rgba(255, 250, 205, 0.62) 0 7%, transparent 20%),
    linear-gradient(180deg, rgba(255, 245, 178, 0.22), rgba(255, 143, 61, 0.18) 32%, rgba(255, 66, 43, 0.11) 66%, transparent 100%);
  filter: blur(18px);
  mix-blend-mode: screen;
}

.vrown-world-planet {
  left: 50%;
  top: clamp(86px, 12vh, 148px);
  z-index: 1;
  width: min(1040px, 78vw);
  aspect-ratio: 1;
  transform: translate3d(-50%, var(--vrown-planet-y, 0px), 0) rotate(-10deg);
  border-radius: 50%;
  opacity: 0.58;
  background:
    radial-gradient(circle at 36% 34%, rgba(255, 255, 225, 0.92) 0 6%, rgba(255, 223, 125, 0.66) 7% 13%, transparent 14%),
    radial-gradient(circle at 69% 61%, rgba(77, 20, 45, 0.46) 0 12%, transparent 13%),
    radial-gradient(circle at 50% 50%, #ffbd4a 0 28%, #f15a27 51%, #ae2732 76%, #3e1530 100%);
  box-shadow:
    0 0 0 28px rgba(255, 238, 175, 0.06),
    0 0 0 88px rgba(255, 138, 57, 0.06),
    0 72px 180px rgba(255, 80, 48, 0.22);
  filter: saturate(1.08);
  animation: vrownWorldFloat 11s ease-in-out infinite;
}

.vrown-world-orbit {
  left: 50%;
  top: clamp(100px, 14vh, 178px);
  z-index: 2;
  border: 2px solid rgba(255, 239, 186, 0.18);
  border-radius: 50%;
  transform: translateX(-50%) rotate(-11deg);
  mix-blend-mode: screen;
}

.vrown-world-orbit.one {
  width: min(1180px, 92vw);
  height: min(350px, 25vw);
}

.vrown-world-orbit.two {
  top: clamp(150px, 20vh, 240px);
  width: min(880px, 72vw);
  height: min(236px, 17vw);
  opacity: 0.48;
  transform: translateX(-50%) rotate(9deg);
}

.vrown-world-trail {
  left: 50%;
  top: 17%;
  z-index: 2;
  width: min(220px, 20vw);
  height: 70%;
  transform: translate3d(-50%, var(--vrown-trail-y, 0px), 0) rotate(-4deg);
  border-radius: 999px;
  opacity: 0.48;
  background:
    linear-gradient(180deg, rgba(255, 251, 206, 0.52), rgba(255, 135, 61, 0.2) 38%, rgba(255, 62, 41, 0.1) 68%, transparent 100%);
  filter: blur(10px);
  mix-blend-mode: screen;
}

.vrown-world-clouds {
  left: 50%;
  top: 23%;
  z-index: 2;
  width: 132vw;
  height: 29%;
  transform: translate3d(-50%, var(--vrown-cloud-y, 0px), 0);
  opacity: 0.24;
  background:
    radial-gradient(ellipse at 10% 33%, rgba(255, 242, 205, 0.84) 0 9%, transparent 10%),
    radial-gradient(ellipse at 28% 24%, rgba(255, 238, 198, 0.66) 0 12%, transparent 13%),
    radial-gradient(ellipse at 49% 37%, rgba(255, 214, 165, 0.7) 0 15%, transparent 16%),
    radial-gradient(ellipse at 70% 30%, rgba(255, 239, 205, 0.62) 0 11%, transparent 12%),
    radial-gradient(ellipse at 90% 40%, rgba(255, 218, 165, 0.5) 0 10%, transparent 11%);
  filter: blur(2px);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
}

.vrown-world-ground {
  left: -10%;
  right: -10%;
  bottom: -7%;
  z-index: 1;
  height: 30%;
  transform: translate3d(0, var(--vrown-ground-y, 0px), 0);
  opacity: 0.5;
  background:
    radial-gradient(ellipse at 50% 2%, rgba(255, 238, 169, 0.3) 0 8%, transparent 9%),
    radial-gradient(ellipse at 22% 100%, rgba(37, 9, 11, 0.72) 0 20%, transparent 21%),
    radial-gradient(ellipse at 50% 101%, rgba(29, 7, 9, 0.72) 0 26%, transparent 27%),
    radial-gradient(ellipse at 78% 102%, rgba(42, 10, 8, 0.7) 0 22%, transparent 23%);
}

.vrown-bg-clouds,
.vrown-top-cloud,
.vrown-foreground-cloud,
.vrown-cave-frame,
.vrown-about-tree,
.vrown-about-leaves,
.vrown-about-stone,
.vrown-about-ground,
.vrown-about-characters {
  display: block;
}

.vrown-rock-wrap {
  display: flex;
}

.vrown-hero-screen,
.vrown-showreel-section,
.vrown-about-section,
.vrown-projects-section,
.vrown-allies-section,
.vrown-cta-section {
  position: relative;
  z-index: 2;
}

.vrown-hero-screen {
  min-height: 156svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 17%, rgba(255, 244, 181, 0.56) 0 10%, transparent 25%),
    linear-gradient(180deg, rgba(251, 156, 33, 0.94) 0 38%, rgba(251, 92, 29, 0.92) 64%, rgba(250, 42, 45, 0.88) 100%);
}

.vrown-hero-screen::before {
  left: 50%;
  top: clamp(86px, 15vh, 158px);
  bottom: auto;
  z-index: 5;
  width: min(760px, 68vw);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%) rotate(-8deg);
  opacity: 0.46;
  background:
    radial-gradient(circle at 40% 35%, rgba(255, 255, 226, 0.78) 0 7%, rgba(255, 223, 122, 0.74) 8% 18%, transparent 19%),
    radial-gradient(circle at 62% 68%, rgba(130, 35, 47, 0.38) 0 13%, transparent 14%),
    radial-gradient(circle at 50% 50%, #ffb63c 0 23%, #f26722 44%, #c83327 70%, #6c1922 100%);
  box-shadow:
    0 0 0 clamp(14px, 2vw, 28px) rgba(255, 248, 197, 0.07),
    0 0 0 clamp(46px, 6vw, 84px) rgba(255, 145, 55, 0.08),
    0 38px 110px rgba(103, 28, 28, 0.2);
  filter: saturate(1.05);
}

.vrown-hero-screen::after {
  left: 50%;
  top: 22%;
  z-index: 6;
  width: min(230px, 21vw);
  height: 96%;
  transform: translateX(-50%) rotate(-7deg);
  border-radius: 999px;
  opacity: 0.44;
  background:
    linear-gradient(180deg, rgba(255, 250, 194, 0.55) 0%, rgba(255, 174, 70, 0.3) 32%, rgba(255, 81, 41, 0.12) 66%, transparent 100%);
  filter: blur(12px);
  mix-blend-mode: screen;
}

.vrown-headline {
  top: auto;
  bottom: clamp(400px, 62vh, 500px);
  z-index: 34;
  width: min(760px, 82vw);
  filter: none;
}

.vrown-headline-kicker {
  color: #fff;
  text-shadow: none;
}

.vrown-headline h1 {
  color: #fff;
  font-size: clamp(92px, 12vw, 190px);
  text-shadow: 0 9px 0 rgba(126, 40, 22, 0.16);
}

.vrown-showreel-section {
  min-height: 175svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -3%, rgba(255, 218, 124, 0.42) 0 12%, transparent 38%),
    radial-gradient(ellipse at 50% 34%, rgba(255, 67, 36, 0.2) 0 14%, transparent 42%),
    linear-gradient(180deg, rgba(250, 42, 45, 0.92) 0%, rgba(183, 65, 33, 0.9) 17%, rgba(53, 18, 14, 0.9) 48%, #120809 100%);
}

.vrown-showreel-section::before {
  left: 50%;
  top: -138px;
  z-index: 7;
  width: 132vw;
  height: 310px;
  transform: translateX(-50%);
  background: url("assets/vrown-supari/cloud-bg.webp") center top / 1180px auto repeat-x;
  opacity: 0.9;
  filter: brightness(1.08);
  mask-image: linear-gradient(180deg, #000 0 54%, rgba(0, 0, 0, 0.78) 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 54%, rgba(0, 0, 0, 0.78) 70%, transparent 100%);
}

.vrown-showreel-section::after {
  left: 50%;
  top: -16%;
  z-index: 5;
  width: min(620px, 58vw);
  height: 112%;
  transform: translateX(-50%) rotate(-6deg);
  border: 0;
  border-radius: 999px;
  opacity: 0.52;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255, 231, 153, 0.32) 0 7%, transparent 18%),
    linear-gradient(180deg, rgba(255, 207, 112, 0.2), rgba(255, 88, 45, 0.14) 36%, rgba(255, 244, 217, 0.08) 54%, transparent 82%);
  filter: blur(13px);
}

.vrown-cave-frame {
  display: block;
  inset: -2% -4% auto;
  z-index: 4;
  height: 96%;
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 83%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 83%, transparent 100%);
}

.vrown-showreel-card {
  top: 29%;
  z-index: 8;
  width: min(660px, 52vw);
  border: 0;
  border-radius: 0;
  background: #050506;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
}

.vrown-showreel-card::after {
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
}

.vrown-play-toggle {
  border-color: rgba(255, 255, 255, 0.88);
  background: rgba(5, 5, 6, 0.52);
  box-shadow: none;
}

.vrown-about-section {
  min-height: 144svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 48% 7%, rgba(255, 209, 119, 0.2) 0 13%, transparent 43%),
    linear-gradient(180deg, #120809 0%, #3b1710 10%, #b94a20 31%, #f18b2b 63%, #25150f 100%);
}

.vrown-about-section::before {
  top: 0;
  z-index: 9;
  height: 26%;
  background:
    radial-gradient(circle at 10% 12%, #24493b 0 7%, transparent 8%),
    radial-gradient(circle at 24% 4%, #2d5747 0 10%, transparent 11%),
    radial-gradient(circle at 42% 8%, #1f4438 0 11%, transparent 12%),
    radial-gradient(circle at 62% 2%, #315f4c 0 12%, transparent 13%),
    radial-gradient(circle at 84% 10%, #21483c 0 11%, transparent 12%);
}

.vrown-about-section::after {
  bottom: -2px;
  z-index: 16;
  height: 30%;
  background:
    radial-gradient(ellipse at 7% 102%, #050506 0 21%, transparent 22%),
    radial-gradient(ellipse at 24% 104%, #050506 0 19%, transparent 20%),
    radial-gradient(ellipse at 46% 106%, #050506 0 22%, transparent 23%),
    radial-gradient(ellipse at 68% 102%, #050506 0 18%, transparent 19%),
    radial-gradient(ellipse at 91% 105%, #050506 0 21%, transparent 22%),
    linear-gradient(0deg, #050506 0 58%, transparent 59%);
}

.vrown-about-copy {
  top: 43%;
  z-index: 18;
  width: min(390px, 32vw);
  color: #fff;
  text-shadow: none;
}

.vrown-about-copy h2 {
  text-shadow: 0 6px 0 rgba(116, 38, 18, 0.18);
}

.vrown-projects-section {
  gap: min(29vh, 230px);
  padding: 78vh clamp(22px, 7vw, 98px) 42vh;
  background:
    radial-gradient(ellipse at 52% 0%, rgba(96, 33, 18, 0.48) 0 10%, transparent 34%),
    linear-gradient(180deg, #050506 0%, #090607 18%, #050506 46%, #170909 73%, #050506 100%);
}

.vrown-projects-section::before {
  inset: 0;
  z-index: 0;
  opacity: 1;
  background:
    radial-gradient(ellipse at 14% 16%, rgba(255, 95, 44, 0.1) 0 8%, transparent 26%),
    radial-gradient(ellipse at 88% 42%, rgba(255, 180, 89, 0.08) 0 9%, transparent 30%),
    radial-gradient(ellipse at 48% 82%, rgba(250, 42, 45, 0.11) 0 10%, transparent 32%);
}

.vrown-projects-section::after {
  left: 50%;
  top: -8%;
  z-index: 1;
  width: min(360px, 42vw);
  height: 112%;
  transform: translateX(-50%) rotate(4deg);
  opacity: 0.64;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255, 229, 155, 0.1) 14%, rgba(255, 86, 46, 0.07) 40%, transparent 78%),
    repeating-linear-gradient(180deg, transparent 0 170px, rgba(255, 255, 255, 0.035) 170px 173px, transparent 173px 320px);
  filter: blur(7px);
}

.vrown-project-logo {
  top: 16px;
  z-index: 20;
  color: #fff;
  text-shadow: none;
}

.vrown-project-card {
  z-index: 4;
}

.vrown-project-card img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.vrown-project-card h2 {
  color: #fff;
  text-shadow: none;
}

.vrown-project-card span {
  color: #fff;
}

.vrown-allies-section {
  min-height: 154svh;
  background:
    radial-gradient(ellipse at 48% 68%, rgba(251, 111, 43, 0.22) 0 12%, transparent 36%),
    linear-gradient(180deg, #050506 0 22%, rgba(5, 5, 6, 0.86) 42%, rgba(86, 35, 20, 0.94) 66%, #b95623 100%);
  padding: clamp(190px, 33vh, 330px) clamp(22px, 7vw, 112px) 18vh;
}

.vrown-allies-section::before {
  inset: auto -8% -18%;
  z-index: 1;
  height: 62%;
  background:
    radial-gradient(ellipse at 12% 100%, rgba(5, 5, 6, 0.92) 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 102%, rgba(5, 5, 6, 0.52) 0 18%, transparent 19%),
    radial-gradient(ellipse at 74% 100%, rgba(5, 5, 6, 0.54) 0 18%, transparent 19%),
    linear-gradient(0deg, rgba(5, 5, 6, 0.38), transparent 68%);
}

.vrown-allies-section::after {
  right: -5%;
  bottom: -6%;
  z-index: 2;
  width: min(470px, 38vw);
  border-color: rgba(5, 5, 6, 0.42);
  box-shadow: none;
}

.vrown-allies-copy {
  z-index: 4;
}

.vrown-allies-copy h2 {
  color: rgba(255, 255, 255, 0.32);
}

.vrown-cta-section {
  min-height: 179svh;
  align-items: flex-start;
  background:
    radial-gradient(ellipse at 58% 78%, rgba(255, 231, 154, 0.26) 0 9%, transparent 32%),
    linear-gradient(180deg, #b95623 0%, #fa292c 24%, #fb411f 58%, #fa292c 100%);
  padding: clamp(180px, 30vh, 300px) clamp(22px, 7vw, 112px) clamp(70px, 10vw, 130px);
}

.vrown-cta-section::before {
  left: -8%;
  right: -8%;
  bottom: -20%;
  z-index: 1;
  height: 58%;
  background:
    radial-gradient(ellipse at 50% 24%, rgba(255, 244, 201, 0.22) 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 62%, rgba(83, 17, 14, 0.3) 0 19%, transparent 20%),
    radial-gradient(ellipse at 18% 100%, rgba(82, 20, 14, 0.24) 0 18%, transparent 19%),
    linear-gradient(0deg, rgba(96, 22, 14, 0.36), transparent 72%);
}

.vrown-cta-section::after {
  right: clamp(-80px, -3vw, -24px);
  bottom: clamp(80px, 13vh, 180px);
  z-index: 2;
  width: min(520px, 42vw);
  border-color: rgba(255, 244, 201, 0.28);
  box-shadow: none;
}

.vrown-cta-copy {
  z-index: 4;
}

@media (max-width: 920px) {
  .vrown-world-planet {
    top: 112px;
    width: 118vw;
  }

  .vrown-world-orbit.one {
    width: 128vw;
    height: 35vw;
  }

  .vrown-world-orbit.two {
    width: 96vw;
    height: 28vw;
  }

  .vrown-headline {
    top: auto;
    bottom: clamp(380px, 60vh, 490px);
    width: min(590px, 86vw);
  }

  .vrown-showreel-section {
    min-height: 150svh;
  }

  .vrown-cave-frame {
    inset: -6% -18% auto;
  }

  .vrown-showreel-card {
    top: 31%;
    width: min(620px, 72vw);
  }

  .vrown-about-section {
    min-height: 128svh;
  }

  .vrown-about-copy {
    top: 43%;
    width: min(360px, 36vw);
  }
}

@media (max-width: 640px) {
  .vrown-planetary-world {
    background:
      radial-gradient(circle at 50% 4%, rgba(253, 221, 132, 0.2) 0 8%, transparent 25%),
      linear-gradient(180deg, rgba(7, 8, 22, 0.7) 0%, rgba(23, 17, 58, 0.54) 10%, rgba(207, 59, 49, 0.28) 25%, rgba(242, 118, 37, 0.2) 40%, rgba(141, 47, 36, 0.28) 52%, rgba(8, 8, 13, 0.38) 69%, rgba(17, 9, 10, 0.42) 83%, rgba(251, 50, 37, 0.26) 100%);
  }

  .vrown-world-planet {
    top: 132px;
    width: 150vw;
    opacity: 0.38;
  }

  .vrown-world-orbit.one {
    top: 188px;
    width: 166vw;
    height: 48vw;
  }

  .vrown-world-orbit.two {
    top: 244px;
    width: 132vw;
    height: 38vw;
  }

  .vrown-world-trail {
    top: 21%;
    width: 34vw;
  }

  .vrown-world-clouds {
    top: 27%;
    width: 180vw;
    opacity: 0.16;
  }

  .vrown-hero-screen {
    min-height: 112svh;
  }

  .vrown-hero-screen::before {
    top: 98px;
    width: 116vw;
  }

  .vrown-hero-screen::after {
    top: 28%;
    width: 38vw;
    height: 72%;
    opacity: 0.42;
  }

  .vrown-headline {
    top: auto;
    bottom: 28vh;
    width: 88vw;
  }

  .vrown-headline h1 {
    font-size: clamp(62px, 18vw, 88px);
  }

  .vrown-showreel-section {
    min-height: 124svh;
  }

  .vrown-cave-frame {
    inset: -4% -72% auto;
    height: 92%;
  }

  .vrown-showreel-card {
    top: 34%;
    width: 88vw;
    border-radius: 0;
  }

  .vrown-showreel-card::after {
    border-radius: 0;
  }

  .vrown-about-section {
    min-height: 112svh;
  }

  .vrown-about-copy {
    top: 16%;
    width: 92vw;
  }

  .vrown-projects-section {
    gap: 58px;
    padding: 44vh 18px 96px;
  }

  .vrown-project-logo {
    top: 11px;
  }

  .vrown-allies-section {
    min-height: 126svh;
    padding: 112px 18px 88px;
  }

  .vrown-allies-section::after {
    width: 78vw;
  }

  .vrown-cta-section {
    min-height: 124svh;
    padding: 112px 18px 66px;
  }

  .vrown-cta-section::after {
    right: -28vw;
    width: 86vw;
  }
}

/* VROWN Pro Mode backdrop: background-only cockpit layer, content positions stay intact. */
.vrown-view {
  background: #02030a;
}

.vrown-supari {
  background:
    linear-gradient(180deg, #040713 0%, #070a16 14%, #12080d 32%, #050507 58%, #0b0506 80%, #210808 100%);
  isolation: isolate;
}

.vrown-planetary-world {
  inset: 0;
  z-index: 0;
  opacity: 1;
  background:
    radial-gradient(circle at 50% 5%, rgba(255, 190, 82, 0.34) 0 7%, rgba(255, 86, 52, 0.16) 12%, transparent 27%),
    radial-gradient(ellipse at 50% 17%, rgba(60, 220, 230, 0.13) 0 9%, transparent 31%),
    radial-gradient(ellipse at 50% 42%, rgba(255, 65, 41, 0.13) 0 14%, transparent 38%),
    linear-gradient(180deg, #040713 0%, #070b18 18%, #190a10 35%, #06070b 56%, #020307 78%, #190607 100%);
}

.vrown-planetary-world::before {
  inset: 0;
  opacity: 0.64;
  background-image:
    linear-gradient(rgba(96, 234, 238, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 234, 238, 0.07) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 168, 80, 0.72) 0 1px, transparent 2px);
  background-position: center top, center top, 0 0, 48px 80px;
  background-size: 118px 118px, 118px 118px, 128px 164px, 212px 260px;
  mask-image:
    linear-gradient(180deg, #000 0 62%, transparent 91%),
    radial-gradient(ellipse at 50% 18%, #000 0 33%, transparent 70%);
  -webkit-mask-image:
    linear-gradient(180deg, #000 0 62%, transparent 91%),
    radial-gradient(ellipse at 50% 18%, #000 0 33%, transparent 70%);
}

.vrown-planetary-world::after {
  left: 50%;
  top: clamp(78px, 8vh, 118px);
  width: min(1120px, 88vw);
  height: min(650px, 48vw);
  transform: translate3d(-50%, calc(var(--vrown-trail-y, 0px) * 0.1), 0) perspective(900px) rotateX(62deg);
  border: 1px solid rgba(107, 242, 243, 0.2);
  border-radius: 50%;
  opacity: 0.72;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 47%, rgba(91, 234, 240, 0.24) 48% 49%, transparent 50%),
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 52px, rgba(91, 234, 240, 0.09) 54px 56px, transparent 58px 106px),
    linear-gradient(90deg, transparent 0 49.5%, rgba(255, 211, 112, 0.24) 49.7% 50.3%, transparent 50.5% 100%),
    linear-gradient(0deg, transparent 0 49.5%, rgba(91, 234, 240, 0.18) 49.7% 50.3%, transparent 50.5% 100%);
  box-shadow:
    0 0 42px rgba(68, 221, 232, 0.14),
    inset 0 0 70px rgba(68, 221, 232, 0.13);
  filter: none;
  mix-blend-mode: screen;
}

.vrown-world-planet {
  left: 50%;
  top: clamp(52px, 7vh, 110px);
  width: min(980px, 75vw);
  transform: translate3d(-50%, calc(var(--vrown-planet-y, 0px) * 0.56), 0) rotate(-7deg);
  opacity: 0.78;
  background:
    radial-gradient(circle at 37% 30%, rgba(255, 245, 187, 0.95) 0 5%, rgba(255, 176, 67, 0.72) 6% 12%, transparent 13%),
    radial-gradient(circle at 67% 65%, rgba(94, 28, 46, 0.58) 0 11%, transparent 12%),
    radial-gradient(circle at 44% 56%, rgba(255, 117, 59, 0.82) 0 25%, rgba(171, 43, 50, 0.78) 45%, rgba(42, 23, 55, 0.88) 70%, rgba(8, 9, 22, 0.98) 100%);
  box-shadow:
    0 0 0 18px rgba(95, 237, 240, 0.05),
    0 0 0 76px rgba(95, 237, 240, 0.035),
    0 38px 170px rgba(255, 75, 50, 0.28),
    inset -72px -90px 120px rgba(3, 4, 13, 0.78),
    inset 42px 36px 90px rgba(255, 198, 92, 0.16);
  filter: saturate(1.08) contrast(1.04);
}

.vrown-world-planet::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(96, 234, 238, 0.2);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 0 49.5%, rgba(96, 234, 238, 0.22) 49.7% 50.3%, transparent 50.5%),
    linear-gradient(0deg, transparent 0 49.5%, rgba(96, 234, 238, 0.18) 49.7% 50.3%, transparent 50.5%);
  opacity: 0.48;
  mix-blend-mode: screen;
}

.vrown-world-orbit {
  left: 50%;
  z-index: 3;
  border-color: rgba(91, 234, 240, 0.2);
  box-shadow: 0 0 34px rgba(91, 234, 240, 0.08);
}

.vrown-world-orbit.one {
  top: clamp(120px, 15vh, 190px);
  width: min(1280px, 96vw);
  height: min(420px, 29vw);
  transform: translateX(-50%) perspective(900px) rotateX(64deg) rotateZ(-7deg);
}

.vrown-world-orbit.two {
  top: clamp(190px, 24vh, 280px);
  width: min(820px, 72vw);
  height: min(280px, 21vw);
  opacity: 0.66;
  transform: translateX(-50%) perspective(820px) rotateX(66deg) rotateZ(10deg);
}

.vrown-world-trail {
  left: 50%;
  top: 13%;
  width: min(300px, 23vw);
  height: 82%;
  transform: translate3d(-50%, calc(var(--vrown-trail-y, 0px) * 0.55), 0) rotate(-2deg);
  opacity: 0.58;
  background:
    linear-gradient(180deg, rgba(255, 226, 151, 0.66) 0%, rgba(96, 234, 238, 0.18) 22%, rgba(255, 78, 42, 0.18) 55%, transparent 100%),
    repeating-linear-gradient(180deg, transparent 0 38px, rgba(255, 255, 255, 0.12) 39px 40px, transparent 41px 82px);
  filter: blur(10px);
}

.vrown-world-clouds {
  left: 50%;
  top: 26%;
  width: 142vw;
  height: 52%;
  transform: translate3d(-50%, calc(var(--vrown-cloud-y, 0px) * 0.46), 0);
  opacity: 0.48;
  background:
    radial-gradient(ellipse at 18% 22%, rgba(95, 237, 240, 0.12) 0 8%, transparent 24%),
    radial-gradient(ellipse at 82% 34%, rgba(255, 191, 87, 0.14) 0 9%, transparent 28%),
    linear-gradient(105deg, transparent 0 28%, rgba(95, 237, 240, 0.1) 29% 29.6%, transparent 30.3% 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 14px);
  filter: blur(0.5px);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
}

.vrown-world-ground {
  left: -12%;
  right: -12%;
  bottom: -8%;
  height: 38%;
  transform: translate3d(0, calc(var(--vrown-ground-y, 0px) * 0.7), 0);
  opacity: 0.78;
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255, 206, 113, 0.32) 0 8%, transparent 27%),
    radial-gradient(ellipse at 50% 68%, rgba(255, 54, 37, 0.24) 0 16%, transparent 44%),
    linear-gradient(115deg, transparent 0 47%, rgba(96, 234, 238, 0.13) 47.2% 47.8%, transparent 48% 100%),
    linear-gradient(245deg, transparent 0 43%, rgba(255, 190, 82, 0.13) 43.2% 43.8%, transparent 44% 100%),
    repeating-linear-gradient(0deg, rgba(96, 234, 238, 0.08) 0 1px, transparent 1px 44px),
    radial-gradient(ellipse at 18% 100%, rgba(6, 4, 8, 0.96) 0 23%, transparent 24%),
    radial-gradient(ellipse at 50% 105%, rgba(8, 5, 9, 0.96) 0 28%, transparent 29%),
    radial-gradient(ellipse at 82% 100%, rgba(6, 4, 8, 0.96) 0 23%, transparent 24%);
}

.vrown-hero-screen {
  background:
    radial-gradient(circle at 50% 13%, rgba(255, 197, 91, 0.24) 0 9%, transparent 31%),
    radial-gradient(ellipse at 50% 68%, rgba(96, 234, 238, 0.08) 0 18%, transparent 54%),
    linear-gradient(180deg, rgba(3, 5, 15, 0.1) 0%, rgba(8, 10, 20, 0.22) 42%, rgba(35, 9, 12, 0.35) 100%);
}

.vrown-hero-screen::before {
  top: clamp(80px, 13vh, 150px);
  opacity: 0.38;
  background:
    radial-gradient(circle at 37% 31%, rgba(255, 244, 197, 0.88) 0 7%, rgba(255, 178, 73, 0.7) 8% 15%, transparent 16%),
    radial-gradient(circle at 62% 68%, rgba(95, 237, 240, 0.18) 0 8%, transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(255, 116, 51, 0.88) 0 25%, rgba(147, 41, 50, 0.86) 49%, rgba(16, 14, 32, 0.95) 100%);
  box-shadow:
    0 0 0 clamp(14px, 2vw, 30px) rgba(95, 237, 240, 0.05),
    0 0 0 clamp(52px, 7vw, 96px) rgba(95, 237, 240, 0.035),
    0 48px 160px rgba(255, 73, 49, 0.2);
}

.vrown-hero-screen::after {
  top: 20%;
  width: min(520px, 45vw);
  height: 112%;
  transform: translateX(-50%) perspective(760px) rotateX(64deg) rotateZ(-4deg);
  border: 1px solid rgba(96, 234, 238, 0.18);
  opacity: 0.6;
  background:
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 54px, rgba(96, 234, 238, 0.12) 56px 58px, transparent 59px 112px),
    linear-gradient(180deg, rgba(255, 218, 132, 0.18), rgba(96, 234, 238, 0.08) 28%, rgba(255, 67, 41, 0.1) 68%, transparent 100%);
  filter: blur(0.2px);
}

.vrown-headline {
  bottom: clamp(420px, 64vh, 530px);
}

.vrown-showreel-section {
  background:
    radial-gradient(ellipse at 50% -12%, rgba(255, 168, 74, 0.22) 0 18%, transparent 44%),
    radial-gradient(ellipse at 50% 45%, rgba(96, 234, 238, 0.08) 0 17%, transparent 43%),
    linear-gradient(180deg, rgba(36, 8, 12, 0.44) 0%, rgba(6, 7, 12, 0.75) 50%, rgba(3, 3, 6, 0.86) 100%);
}

.vrown-showreel-section::before {
  opacity: 0.54;
  filter: brightness(0.72) saturate(0.88) hue-rotate(18deg);
}

.vrown-showreel-section::after {
  top: -10%;
  width: min(880px, 76vw);
  height: 120%;
  transform: translateX(-50%) perspective(900px) rotateX(62deg) rotateZ(2deg);
  border: 1px solid rgba(96, 234, 238, 0.15);
  opacity: 0.58;
  background:
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 68px, rgba(96, 234, 238, 0.08) 69px 71px, transparent 72px 146px),
    linear-gradient(90deg, transparent 0 49.6%, rgba(255, 214, 128, 0.18) 49.8% 50.2%, transparent 50.4% 100%),
    linear-gradient(180deg, rgba(96, 234, 238, 0.1), rgba(255, 75, 43, 0.08) 55%, transparent 100%);
  filter: none;
}

.vrown-about-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(96, 234, 238, 0.12) 0 12%, transparent 38%),
    radial-gradient(ellipse at 44% 58%, rgba(255, 170, 78, 0.15) 0 18%, transparent 48%),
    linear-gradient(180deg, rgba(3, 3, 7, 0.92) 0%, rgba(17, 8, 10, 0.78) 34%, rgba(74, 26, 18, 0.64) 68%, rgba(9, 7, 8, 0.86) 100%);
}

.vrown-about-section::before {
  opacity: 0.82;
  background:
    linear-gradient(180deg, rgba(3, 4, 10, 0.96), rgba(3, 4, 10, 0.22) 72%, transparent),
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(96, 234, 238, 0.08) 65px 66px, transparent 67px 130px);
}

.vrown-about-section::after {
  background:
    radial-gradient(ellipse at 50% 62%, rgba(255, 149, 71, 0.15) 0 18%, transparent 40%),
    repeating-linear-gradient(0deg, rgba(96, 234, 238, 0.08) 0 1px, transparent 1px 42px),
    linear-gradient(0deg, rgba(3, 3, 6, 0.96) 0 52%, transparent 76%);
}

.vrown-projects-section {
  background:
    radial-gradient(ellipse at 18% 8%, rgba(96, 234, 238, 0.1) 0 8%, transparent 28%),
    radial-gradient(ellipse at 78% 36%, rgba(255, 184, 84, 0.12) 0 10%, transparent 32%),
    radial-gradient(ellipse at 50% 82%, rgba(255, 64, 42, 0.13) 0 14%, transparent 36%),
    linear-gradient(180deg, rgba(3, 3, 7, 0.95) 0%, rgba(4, 5, 9, 0.94) 44%, rgba(17, 7, 8, 0.9) 100%);
}

.vrown-projects-section::before {
  background:
    linear-gradient(90deg, transparent 0 49.4%, rgba(96, 234, 238, 0.12) 49.6% 50.4%, transparent 50.6% 100%),
    repeating-linear-gradient(180deg, transparent 0 112px, rgba(96, 234, 238, 0.08) 113px 114px, transparent 115px 228px),
    repeating-linear-gradient(90deg, transparent 0 136px, rgba(255, 202, 106, 0.07) 137px 138px, transparent 139px 276px);
}

.vrown-projects-section::after {
  width: min(760px, 64vw);
  transform: translateX(-50%) perspective(900px) rotateX(64deg) rotateZ(4deg);
  opacity: 0.58;
  background:
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 76px, rgba(96, 234, 238, 0.08) 77px 79px, transparent 80px 158px),
    linear-gradient(180deg, rgba(255, 213, 126, 0.1), rgba(255, 67, 42, 0.08) 42%, transparent 86%);
  filter: none;
}

.vrown-allies-section {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(96, 234, 238, 0.09) 0 12%, transparent 38%),
    radial-gradient(ellipse at 50% 68%, rgba(255, 82, 43, 0.18) 0 13%, transparent 38%),
    linear-gradient(180deg, rgba(3, 3, 7, 0.95) 0%, rgba(8, 6, 8, 0.9) 45%, rgba(58, 19, 13, 0.78) 78%, rgba(133, 38, 20, 0.72) 100%);
}

.vrown-allies-section::before {
  background:
    radial-gradient(ellipse at 50% 82%, rgba(255, 200, 112, 0.16) 0 9%, transparent 28%),
    repeating-linear-gradient(0deg, rgba(96, 234, 238, 0.07) 0 1px, transparent 1px 56px),
    linear-gradient(0deg, rgba(2, 2, 5, 0.84), transparent 72%);
}

.vrown-allies-section::after,
.vrown-cta-section::after {
  border-color: rgba(96, 234, 238, 0.22);
  box-shadow:
    0 0 0 1px rgba(255, 209, 115, 0.08),
    0 0 70px rgba(96, 234, 238, 0.11);
}

.vrown-cta-section {
  background:
    radial-gradient(ellipse at 50% 76%, rgba(255, 216, 126, 0.23) 0 9%, transparent 31%),
    radial-gradient(ellipse at 42% 60%, rgba(96, 234, 238, 0.1) 0 10%, transparent 32%),
    linear-gradient(180deg, rgba(133, 38, 20, 0.72) 0%, rgba(66, 14, 12, 0.82) 28%, rgba(23, 7, 9, 0.9) 60%, rgba(185, 40, 24, 0.78) 100%);
}

.vrown-cta-section::before {
  background:
    radial-gradient(ellipse at 50% 25%, rgba(255, 229, 156, 0.25) 0 8%, transparent 23%),
    radial-gradient(ellipse at 50% 72%, rgba(255, 54, 37, 0.24) 0 18%, transparent 44%),
    repeating-linear-gradient(0deg, rgba(96, 234, 238, 0.09) 0 1px, transparent 1px 48px),
    linear-gradient(0deg, rgba(3, 3, 6, 0.54), transparent 76%);
}

@media (max-width: 920px) {
  .vrown-planetary-world::after {
    top: 112px;
    width: 112vw;
    height: 58vw;
  }

  .vrown-world-planet {
    top: 92px;
    width: 112vw;
  }

  .vrown-world-orbit.one {
    top: 160px;
    width: 132vw;
    height: 38vw;
  }

  .vrown-world-orbit.two {
    top: 218px;
    width: 104vw;
    height: 32vw;
  }
}

@media (max-width: 640px) {
  .vrown-planetary-world {
    background:
      radial-gradient(circle at 50% 4%, rgba(255, 184, 76, 0.28) 0 8%, transparent 27%),
      radial-gradient(ellipse at 50% 18%, rgba(96, 234, 238, 0.1) 0 12%, transparent 38%),
      linear-gradient(180deg, #040713 0%, #080a15 18%, #17080d 38%, #050507 64%, #190607 100%);
  }

  .vrown-planetary-world::after {
    top: 128px;
    width: 150vw;
    height: 76vw;
    opacity: 0.48;
  }

  .vrown-world-planet {
    top: 110px;
    width: 150vw;
    opacity: 0.52;
  }

  .vrown-world-orbit.one {
    top: 174px;
    width: 172vw;
    height: 52vw;
  }

  .vrown-world-orbit.two {
    top: 230px;
    width: 136vw;
    height: 42vw;
  }

  .vrown-world-trail {
    top: 19%;
    width: 42vw;
    opacity: 0.42;
  }

  .vrown-world-clouds {
    width: 180vw;
    opacity: 0.28;
  }

  .vrown-hero-screen::after,
  .vrown-showreel-section::after,
  .vrown-projects-section::after {
    width: 118vw;
    opacity: 0.44;
  }
}

/* VROWN visible cockpit restyle: keep layout, retone the existing art, surface the HUD layer. */
.vrown-supari {
  --vrown-cockpit-cyan: rgba(96, 234, 238, 0.62);
  --vrown-cockpit-cyan-soft: rgba(96, 234, 238, 0.16);
  --vrown-cockpit-amber: rgba(255, 198, 92, 0.5);
  --vrown-cockpit-red: rgba(255, 50, 38, 0.34);
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 176, 72, 0.28) 0 8%, transparent 28%),
    radial-gradient(ellipse at 50% 44%, rgba(96, 234, 238, 0.14) 0 11%, transparent 34%),
    linear-gradient(180deg, #02030a 0%, #07101b 22%, #10070b 46%, #020306 72%, #1a0507 100%);
}

.vrown-film-grain {
  z-index: 32;
  opacity: 1;
  mix-blend-mode: screen;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 52%, rgba(96, 234, 238, 0.08) 0 14%, transparent 44%);
}

.vrown-film-grain::before,
.vrown-film-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vrown-film-grain::before {
  opacity: 0.74;
  background:
    linear-gradient(90deg, transparent 0 9%, var(--vrown-cockpit-cyan-soft) 9.12% 9.35%, transparent 9.55% 90.45%, var(--vrown-cockpit-cyan-soft) 90.65% 90.88%, transparent 91% 100%),
    linear-gradient(180deg, transparent 0 13%, rgba(96, 234, 238, 0.12) 13.1% 13.35%, transparent 13.55% 72%, rgba(255, 198, 92, 0.11) 72.1% 72.35%, transparent 72.55% 100%),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(96, 234, 238, 0.07) 39px 40px, transparent 41px 80px),
    radial-gradient(ellipse at 50% 110%, rgba(96, 234, 238, 0.22) 0 9%, transparent 34%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 92%, transparent 100%);
}

.vrown-film-grain::after {
  opacity: 0.82;
  background:
    repeating-radial-gradient(ellipse at 50% 103%, transparent 0 114px, rgba(96, 234, 238, 0.18) 116px 118px, transparent 120px 228px),
    radial-gradient(ellipse at 50% 50%, transparent 0 45%, rgba(96, 234, 238, 0.1) 46%, transparent 47% 100%),
    linear-gradient(115deg, transparent 0 48%, rgba(255, 198, 92, 0.13) 48.1% 48.35%, transparent 48.55% 100%),
    linear-gradient(245deg, transparent 0 47%, rgba(96, 234, 238, 0.12) 47.1% 47.35%, transparent 47.55% 100%);
}

.vrown-hero-screen {
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 166, 62, 0.22) 0 9%, transparent 29%),
    radial-gradient(ellipse at 50% 54%, rgba(96, 234, 238, 0.15) 0 15%, transparent 44%),
    linear-gradient(180deg, rgba(2, 3, 10, 0.62) 0%, rgba(3, 7, 16, 0.68) 46%, rgba(28, 6, 8, 0.78) 100%);
}

.vrown-hero-screen::before {
  z-index: 7;
  opacity: 0.72;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 238, 174, 0.96) 0 6%, rgba(255, 149, 53, 0.74) 7% 13%, transparent 14%),
    radial-gradient(circle at 70% 64%, rgba(96, 234, 238, 0.18) 0 11%, transparent 12%),
    radial-gradient(circle at 50% 50%, rgba(255, 93, 46, 0.9) 0 24%, rgba(112, 33, 55, 0.9) 50%, rgba(3, 6, 18, 0.98) 100%);
  box-shadow:
    0 0 0 clamp(16px, 2.2vw, 32px) rgba(96, 234, 238, 0.08),
    0 0 0 clamp(58px, 7vw, 104px) rgba(96, 234, 238, 0.055),
    0 0 120px rgba(255, 63, 40, 0.28),
    inset -64px -80px 140px rgba(2, 3, 10, 0.74);
}

.vrown-hero-screen::after {
  z-index: 28;
  top: 10%;
  width: min(1040px, 86vw);
  height: 118%;
  transform: translateX(-50%) perspective(860px) rotateX(64deg) rotateZ(-3deg);
  border: 1px solid rgba(96, 234, 238, 0.36);
  opacity: 0.88;
  background:
    repeating-radial-gradient(ellipse at 50% 52%, transparent 0 58px, rgba(96, 234, 238, 0.17) 60px 62px, transparent 64px 124px),
    linear-gradient(90deg, transparent 0 49.7%, rgba(255, 211, 112, 0.32) 49.85% 50.15%, transparent 50.3% 100%),
    linear-gradient(180deg, rgba(96, 234, 238, 0.16), rgba(255, 64, 42, 0.12) 54%, transparent 100%);
  box-shadow:
    0 0 70px rgba(96, 234, 238, 0.16),
    inset 0 0 90px rgba(96, 234, 238, 0.12);
}

.vrown-bg-clouds {
  opacity: 0.24;
  mix-blend-mode: screen;
  filter: brightness(0.42) saturate(0.75) hue-rotate(158deg) contrast(1.2);
}

.vrown-top-cloud {
  opacity: 0.38;
  mix-blend-mode: screen;
  filter:
    brightness(0.48)
    sepia(0.85)
    hue-rotate(148deg)
    saturate(1.8)
    drop-shadow(0 0 24px rgba(96, 234, 238, 0.26));
}

.vrown-top-cloud.lower {
  opacity: 0.2;
}

.vrown-rock-wrap {
  isolation: isolate;
}

.vrown-rock-wrap::before,
.vrown-rock-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.vrown-rock-wrap::before {
  background:
    radial-gradient(ellipse at 50% 62%, transparent 0 28%, rgba(96, 234, 238, 0.16) 29%, transparent 30% 100%),
    repeating-radial-gradient(ellipse at 50% 82%, transparent 0 88px, rgba(96, 234, 238, 0.12) 90px 92px, transparent 94px 176px),
    linear-gradient(90deg, transparent 0 18%, rgba(96, 234, 238, 0.13) 18.1% 18.35%, transparent 18.55% 81.45%, rgba(96, 234, 238, 0.13) 81.65% 81.9%, transparent 82.1% 100%);
  mix-blend-mode: screen;
  opacity: 0.86;
}

.vrown-rock-wrap::after {
  z-index: 4;
  background:
    radial-gradient(ellipse at 50% 52%, transparent 0 34%, rgba(2, 4, 12, 0.18) 57%, rgba(2, 4, 12, 0.78) 100%),
    linear-gradient(180deg, rgba(2, 3, 10, 0.52) 0%, transparent 23%, transparent 62%, rgba(2, 3, 10, 0.58) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 7px);
}

.vrown-rock {
  position: relative;
  z-index: 1;
  opacity: 0.82;
  filter:
    brightness(0.56)
    saturate(0.78)
    hue-rotate(188deg)
    contrast(1.16)
    drop-shadow(0 -26px 70px rgba(96, 234, 238, 0.12));
}

.vrown-foreground-cloud {
  opacity: 0.34;
  mix-blend-mode: screen;
  filter: brightness(0.36) hue-rotate(160deg) saturate(1.8) contrast(1.2);
}

.vrown-headline {
  z-index: 44;
  text-shadow: 0 0 22px rgba(96, 234, 238, 0.18);
}

.vrown-headline-kicker {
  color: rgba(202, 253, 255, 0.92);
  text-shadow: 0 0 18px rgba(96, 234, 238, 0.42);
}

.vrown-headline h1 {
  text-shadow:
    0 8px 0 rgba(0, 0, 0, 0.26),
    0 0 32px rgba(96, 234, 238, 0.18),
    0 0 60px rgba(255, 60, 40, 0.18);
}

.vrown-spark {
  opacity: 0.74;
  filter: drop-shadow(0 0 14px rgba(96, 234, 238, 0.64));
}

.vrown-cave-frame {
  opacity: 0.78;
  filter: brightness(0.56) saturate(0.72) hue-rotate(180deg) contrast(1.24);
}

.vrown-cave-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 52%, transparent 0 35%, rgba(96, 234, 238, 0.11) 36%, transparent 37% 100%),
    linear-gradient(115deg, transparent 0 48%, rgba(96, 234, 238, 0.14) 48.1% 48.35%, transparent 48.55% 100%),
    linear-gradient(245deg, transparent 0 47%, rgba(255, 198, 92, 0.13) 47.1% 47.35%, transparent 47.55% 100%),
    linear-gradient(180deg, rgba(2, 3, 10, 0.54), transparent 42%, rgba(2, 3, 10, 0.62));
  mix-blend-mode: screen;
  pointer-events: none;
}

.vrown-showreel-card {
  box-shadow:
    0 0 0 1px rgba(96, 234, 238, 0.22),
    0 24px 80px rgba(0, 0, 0, 0.58),
    0 0 70px rgba(96, 234, 238, 0.13);
}

.vrown-showreel-card::after {
  border-color: rgba(96, 234, 238, 0.4);
  box-shadow: inset 0 0 44px rgba(96, 234, 238, 0.12);
}

.vrown-showreel-video {
  filter: brightness(0.78) saturate(0.88) contrast(1.12);
}

.vrown-about-tree,
.vrown-about-leaves,
.vrown-about-stone,
.vrown-about-ground {
  opacity: 0.76;
  filter: brightness(0.46) saturate(0.76) hue-rotate(168deg) contrast(1.12);
}

.vrown-about-characters {
  filter: brightness(0.72) saturate(0.82) hue-rotate(172deg) contrast(1.08) drop-shadow(0 0 34px rgba(96, 234, 238, 0.14));
}

.vrown-about-copy,
.vrown-allies-copy,
.vrown-cta-copy,
.vrown-project-card div {
  text-shadow:
    0 4px 18px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(96, 234, 238, 0.12);
}

.vrown-projects-section::before {
  opacity: 0.95;
  background:
    linear-gradient(90deg, transparent 0 49.4%, rgba(96, 234, 238, 0.24) 49.6% 50.4%, transparent 50.6% 100%),
    repeating-linear-gradient(180deg, transparent 0 106px, rgba(96, 234, 238, 0.14) 107px 108px, transparent 109px 214px),
    repeating-linear-gradient(90deg, transparent 0 132px, rgba(255, 202, 106, 0.1) 133px 134px, transparent 135px 268px),
    radial-gradient(ellipse at 50% 28%, rgba(96, 234, 238, 0.11) 0 9%, transparent 34%);
}

.vrown-projects-section::after {
  z-index: 2;
  opacity: 0.86;
  box-shadow: 0 0 80px rgba(96, 234, 238, 0.14);
}

.vrown-project-card {
  z-index: 5;
}

.vrown-project-card img {
  border: 1px solid rgba(96, 234, 238, 0.22);
  filter: brightness(0.82) saturate(0.86) contrast(1.12);
  box-shadow:
    0 0 0 1px rgba(255, 198, 92, 0.08),
    0 24px 90px rgba(0, 0, 0, 0.48),
    0 0 46px rgba(96, 234, 238, 0.12);
}

.vrown-project-logo,
.vrown-project-card span {
  color: rgba(202, 253, 255, 0.9);
  text-shadow: 0 0 20px rgba(96, 234, 238, 0.32);
}

.vrown-allies-section::before,
.vrown-cta-section::before {
  opacity: 0.95;
  mix-blend-mode: screen;
}

.vrown-allies-section::after,
.vrown-cta-section::after {
  opacity: 0.88;
  border-color: rgba(96, 234, 238, 0.34);
  box-shadow:
    0 0 0 1px rgba(255, 209, 115, 0.12),
    0 0 90px rgba(96, 234, 238, 0.18),
    inset 0 0 64px rgba(96, 234, 238, 0.1);
}

@media (max-width: 640px) {
  .vrown-film-grain {
    z-index: 30;
  }

  .vrown-film-grain::before {
    opacity: 0.5;
  }

  .vrown-film-grain::after {
    opacity: 0.58;
  }

  .vrown-hero-screen::after {
    width: 146vw;
    opacity: 0.58;
  }

  .vrown-top-cloud {
    opacity: 0.28;
  }

  .vrown-rock {
    opacity: 0.88;
    filter: brightness(0.62) saturate(0.82) hue-rotate(182deg) contrast(1.08);
  }

  .vrown-foreground-cloud {
    opacity: 0.24;
  }
}

/* VROWN gate-black reset: plain HOME/GATE background, no background characters. */
.vrown-view,
.vrown-supari,
.vrown-hero-screen,
.vrown-showreel-section,
.vrown-about-section,
.vrown-projects-section,
.vrown-allies-section,
.vrown-cta-section {
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 244, 210, 0.05), transparent 28%),
    radial-gradient(circle at 78% 34%, rgba(255, 151, 189, 0.05), transparent 24%),
    #10100f;
}

.vrown-planetary-world,
.vrown-bg-clouds,
.vrown-top-cloud,
.vrown-rock-wrap,
.vrown-foreground-cloud,
.vrown-cave-frame,
.vrown-about-tree,
.vrown-about-leaves,
.vrown-about-stone,
.vrown-about-ground,
.vrown-about-characters {
  display: none;
}

.vrown-film-grain {
  z-index: 32;
  opacity: 0.18;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.14) 0 1px, transparent 1.5px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px);
  background-size: 25px 25px, auto;
}

.vrown-film-grain::before,
.vrown-film-grain::after,
.vrown-hero-screen::before,
.vrown-hero-screen::after,
.vrown-showreel-section::before,
.vrown-showreel-section::after,
.vrown-about-section::before,
.vrown-about-section::after,
.vrown-projects-section::before,
.vrown-projects-section::after,
.vrown-allies-section::before,
.vrown-allies-section::after,
.vrown-cta-section::before,
.vrown-cta-section::after {
  display: none;
}

.vrown-headline,
.vrown-showreel-card,
.vrown-about-copy,
.vrown-project-card,
.vrown-allies-copy,
.vrown-cta-copy {
  filter: none;
  text-shadow: none;
}

.vrown-headline-kicker,
.vrown-project-logo,
.vrown-project-card span {
  color: #fff;
  text-shadow: none;
}

.vrown-headline h1,
.vrown-about-copy h2,
.vrown-project-card h2,
.vrown-allies-copy h2,
.vrown-cta-copy h2 {
  color: #fff;
  text-shadow: none;
}

.vrown-headline h1 {
  line-height: 0.86;
}

.vrown-showreel-card {
  background: #050506;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
}

.vrown-showreel-card::after {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.vrown-showreel-video,
.vrown-project-card img {
  filter: none;
}

.vrown-project-card img {
  border: 0;
  box-shadow: none;
}

.vrown-cta-section {
  min-height: auto;
  padding-top: clamp(140px, 22vh, 220px);
  padding-bottom: clamp(72px, 10vh, 120px);
}

@media (max-width: 640px) {
  .vrown-cta-section {
    min-height: auto;
    padding-top: 96px;
    padding-bottom: 72px;
  }

  .vrown-headline h1 {
    line-height: 0.9;
  }
}

.site-shell[data-view="game"] .topbar {
  opacity: 0;
  pointer-events: none;
}

.game-view {
  min-height: 100svh;
  padding-top: 0;
  overflow: hidden;
  background: #3130ff;
  color: #fff;
}

.jumpmax {
  --jm-blue: #342cff;
  --jm-deep-blue: #202cc9;
  --jm-sky: #8eb1ff;
  --jm-pink: #ff4e73;
  --jm-cream: #f5ff9c;
  --jm-white: #fff7f7;
  --jm-shadow: rgba(25, 22, 141, 0.4);
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: var(--jm-blue);
  color: var(--jm-white);
  font-family: "Londrina Solid", "Archivo Black", Impact, sans-serif;
  isolation: isolate;
  touch-action: manipulation;
}

.jumpmax-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #526dff;
}

.jumpmax-hud {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.jumpmax-icon,
.jumpmax-sound,
.jumpmax-close {
  border: 0;
  background: transparent;
  color: #fff;
  pointer-events: auto;
}

.jumpmax-icon {
  position: absolute;
  top: clamp(18px, 3vw, 34px);
  left: clamp(18px, 3vw, 34px);
  width: clamp(44px, 5vw, 64px);
  height: clamp(44px, 5vw, 64px);
  display: grid;
  place-items: center;
  filter: drop-shadow(3px 5px 0 rgba(39, 32, 176, 0.38));
}

.jumpmax-menu-button {
  gap: 7px;
}

.jumpmax-menu-button span {
  display: block;
  width: 42px;
  max-width: 84%;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  transform: rotate(-4deg);
}

.jumpmax-pause-button {
  display: none;
  grid-template-columns: repeat(2, 12px);
  gap: 8px;
}

.jumpmax-pause-button span {
  width: 12px;
  height: 42px;
  border-radius: 5px;
  background: #fff;
}

.jumpmax[data-jumpmax-state="playing"] .jumpmax-menu-button {
  display: none;
}

.jumpmax[data-jumpmax-state="menu"] .jumpmax-menu-button,
.jumpmax[data-jumpmax-state="lots"] .jumpmax-menu-button,
.jumpmax[data-jumpmax-state="legal"] .jumpmax-menu-button {
  display: none;
}

.jumpmax[data-jumpmax-state="playing"] .jumpmax-pause-button {
  display: grid;
}

.jumpmax-score {
  position: absolute;
  top: clamp(18px, 3vw, 34px);
  left: 50%;
  min-width: clamp(116px, 12vw, 142px);
  padding: 11px 18px 13px;
  border-radius: 10px;
  background: #fff;
  color: var(--jm-blue);
  font-family: "Londrina Solid", "Archivo Black", Impact, sans-serif;
  font-size: clamp(39px, 4.2vw, 58px);
  font-weight: 900;
  line-height: 0.8;
  text-align: center;
  text-shadow: 2px 2px 0 rgba(255, 75, 116, 0.18);
  box-shadow: 0 8px 0 rgba(30, 27, 152, 0.34);
  transform: translateX(-50%);
  opacity: 0;
}

.jumpmax[data-jumpmax-state="playing"] .jumpmax-score,
.jumpmax[data-jumpmax-state="gameover"] .jumpmax-score {
  opacity: 1;
}

.jumpmax-sound {
  position: absolute;
  top: clamp(20px, 3vw, 36px);
  right: clamp(18px, 3vw, 34px);
  width: clamp(46px, 5vw, 68px);
  height: clamp(42px, 5vw, 60px);
  filter: drop-shadow(3px 5px 0 rgba(39, 32, 176, 0.38));
}

.jumpmax-sound::before,
.jumpmax-sound::after,
.jumpmax-sound span::before,
.jumpmax-sound span::after {
  content: "";
  position: absolute;
  background: #fff;
}

.jumpmax-sound::before {
  left: 4px;
  top: 16px;
  width: 13px;
  height: 19px;
  border-radius: 2px;
}

.jumpmax-sound::after {
  left: 17px;
  top: 9px;
  width: 22px;
  height: 33px;
  clip-path: polygon(0 29%, 100% 0, 100% 100%, 0 71%);
}

.jumpmax-sound span::before,
.jumpmax-sound span::after {
  right: 3px;
  width: 18px;
  height: 6px;
  border-radius: 999px;
  transform-origin: left center;
}

.jumpmax-sound span::before {
  top: 13px;
  transform: rotate(28deg);
}

.jumpmax-sound span::after {
  bottom: 13px;
  transform: rotate(-28deg);
}

.jumpmax.is-muted .jumpmax-sound {
  opacity: 0.45;
}

.jumpmax-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  place-items: center;
  min-height: 100svh;
  padding: clamp(20px, 4vw, 56px);
  text-align: center;
}

.jumpmax[data-jumpmax-state="intro"] [data-jumpmax-panel="intro"],
.jumpmax[data-jumpmax-state="tutorial"] [data-jumpmax-panel="tutorial"],
.jumpmax[data-jumpmax-state="menu"] [data-jumpmax-panel="menu"],
.jumpmax[data-jumpmax-state="lots"] [data-jumpmax-panel="lots"],
.jumpmax[data-jumpmax-state="legal"] [data-jumpmax-panel="legal"],
.jumpmax[data-jumpmax-state="gameover"] [data-jumpmax-panel="gameover"] {
  display: grid;
}

.jumpmax-intro,
.jumpmax-menu,
.jumpmax-lots,
.jumpmax-legal {
  overflow: hidden;
  background:
    linear-gradient(168deg, transparent 0 70%, rgba(255, 78, 115, 0.95) 70.2% 100%),
    radial-gradient(circle at 48% 82%, rgba(255, 255, 255, 0.19), transparent 30%),
    var(--jm-blue);
}

.jumpmax-menu,
.jumpmax-lots,
.jumpmax-legal {
  background:
    linear-gradient(172deg, transparent 0 72%, rgba(255, 78, 115, 0.96) 72.2% 100%),
    #f5a3f3;
}

.jumpmax-ended {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  padding: 14px 38px 15px;
  border-radius: 0 0 9px 9px;
  background: var(--jm-pink);
  color: #fff;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(13px, 1.4vw, 18px);
  transform: translateX(-50%);
  box-shadow: 0 6px 0 rgba(35, 28, 168, 0.3);
}

.jumpmax-logo {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 0;
  margin-top: clamp(12px, 4vh, 56px);
  color: var(--jm-cream);
  font-family: "Londrina Solid", "Archivo Black", Impact, sans-serif;
  font-weight: 900;
  line-height: 0.76;
  text-transform: uppercase;
  text-shadow: 7px 8px 0 rgba(17, 22, 98, 0.32);
  transform: rotate(-2deg);
}

.jumpmax-logo span {
  font-size: clamp(62px, 11vw, 150px);
}

.jumpmax-logo b {
  margin-top: -0.07em;
  color: var(--jm-pink);
  font-size: clamp(58px, 8vw, 112px);
}

.jumpmax-logo small {
  margin-top: 0.08em;
  color: #fff;
  font-size: clamp(24px, 4.2vw, 58px);
  line-height: 0.8;
  text-transform: lowercase;
  text-shadow: 4px 5px 0 rgba(17, 22, 98, 0.28);
}

.jumpmax-logo-menu {
  align-self: start;
  margin-top: 0;
}

.jumpmax-logo-small {
  align-self: start;
  margin-top: 0;
  transform: rotate(-1.5deg) scale(0.82);
}

.jumpmax-tagline {
  position: relative;
  z-index: 2;
  max-width: min(520px, calc(100vw - 34px));
  margin: clamp(12px, 2vh, 24px) auto 0;
  color: #fff;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(18px, 2vw, 27px);
  line-height: 1.12;
  text-shadow: 3px 4px 0 rgba(31, 30, 152, 0.28);
}

.jumpmax-character-preview {
  position: relative;
  z-index: 2;
  width: clamp(118px, 14vw, 190px);
  height: clamp(128px, 16vw, 205px);
  margin: 12px auto -4px;
  filter: drop-shadow(0 18px 22px rgba(20, 28, 140, 0.36));
}

.max-head,
.max-body,
.max-megaphone {
  position: absolute;
  display: block;
}

.max-head {
  left: 39%;
  top: 8%;
  width: 38%;
  height: 37%;
  border-radius: 26% 36% 32% 28%;
  background:
    radial-gradient(circle at 72% 49%, #3b31ff 0 5%, transparent 6%),
    linear-gradient(90deg, #8b4429 0 29%, #ffb180 30% 100%);
  box-shadow: -11px 6px 0 #682e22;
}

.max-body {
  left: 36%;
  top: 43%;
  width: 34%;
  height: 38%;
  border-radius: 24% 26% 20% 20%;
  background: #2346ff;
  transform: rotate(-4deg);
}

.max-body::before,
.max-body::after {
  content: "";
  position: absolute;
  background: #ffb180;
}

.max-body::before {
  left: 18%;
  bottom: -22%;
  width: 17%;
  height: 34%;
  border-radius: 999px;
  box-shadow: 34px -1px 0 #ffb180;
  transform: rotate(18deg);
}

.max-body::after {
  right: -11%;
  top: 18%;
  width: 18%;
  height: 32%;
  border-radius: 999px;
  transform: rotate(-27deg);
}

.max-megaphone {
  right: 6%;
  top: 39%;
  width: 32%;
  height: 25%;
  transform: rotate(-18deg);
}

.max-megaphone::before,
.max-megaphone::after {
  content: "";
  position: absolute;
}

.max-megaphone::before {
  left: 0;
  top: 33%;
  width: 54%;
  height: 30%;
  border-radius: 999px;
  background: #fff;
}

.max-megaphone::after {
  right: 0;
  top: 4%;
  width: 58%;
  height: 86%;
  border: 5px solid #1e32c9;
  border-radius: 50%;
  background: #dff4ff;
  clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 72%);
}

.jumpmax-primary,
.jumpmax-secondary,
.jumpmax-link,
.jumpmax-keycap {
  position: relative;
  z-index: 2;
  min-width: min(260px, calc(100vw - 68px));
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-family: "Londrina Solid", "Archivo Black", Impact, sans-serif;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 900;
  line-height: 0.88;
  text-align: center;
  text-decoration: none;
  text-shadow: 2px 3px 0 rgba(31, 24, 139, 0.24);
  box-shadow: 0 8px 0 rgba(36, 28, 144, 0.34);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.jumpmax-primary {
  margin-top: 0;
  padding: 17px 34px 19px;
  background: var(--jm-pink);
}

.jumpmax-secondary {
  padding: 16px 34px 18px;
  background: var(--jm-cream);
  color: var(--jm-pink);
}

.jumpmax-link {
  display: inline-grid;
  place-items: center;
  padding: 16px 34px 18px;
  background: #fff;
  color: var(--jm-blue);
}

.jumpmax-primary:hover,
.jumpmax-secondary:hover,
.jumpmax-link:hover,
.jumpmax-keycap:hover {
  transform: translateY(5px);
  box-shadow: 0 3px 0 rgba(36, 28, 144, 0.34);
}

.jumpmax-prize {
  position: absolute;
  z-index: 1;
  display: block;
  filter: drop-shadow(10px 18px 20px rgba(20, 28, 140, 0.22));
}

.prize-suitcase {
  left: 7%;
  top: 18%;
  width: clamp(88px, 14vw, 178px);
  height: clamp(126px, 20vw, 255px);
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(32, 50, 130, 0.2) 0 2px, transparent 2px 8px),
    #f6f3f6;
  transform: rotate(7deg);
}

.prize-suitcase::before,
.prize-suitcase::after {
  content: "";
  position: absolute;
}

.prize-suitcase::before {
  left: 24%;
  top: -25%;
  width: 38%;
  height: 26%;
  border: 9px solid #1d2248;
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
}

.prize-suitcase::after {
  left: 13%;
  right: 13%;
  bottom: -10px;
  height: 14px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 16% 50%, #fff 0 5px, #1d2248 6px 10px, transparent 11px),
    radial-gradient(circle at 84% 50%, #fff 0 5px, #1d2248 6px 10px, transparent 11px);
}

.prize-console {
  right: 6%;
  top: 7%;
  width: clamp(126px, 18vw, 240px);
  height: clamp(74px, 10vw, 142px);
  border-radius: 22px;
  background: linear-gradient(145deg, #39404f, #161b25);
  transform: rotate(5deg);
}

.prize-console::before,
.prize-console::after {
  content: "";
  position: absolute;
  top: 0;
  width: 21%;
  height: 100%;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 27%, #59c0ff 0 8%, transparent 9%),
    radial-gradient(circle at 50% 73%, #ff5c60 0 8%, transparent 9%),
    #232a35;
}

.prize-console::before {
  left: -13%;
}

.prize-console::after {
  right: -13%;
}

.prize-phone {
  left: 14%;
  bottom: -5%;
  width: clamp(98px, 14vw, 178px);
  height: clamp(170px, 24vw, 304px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 27% 15%, #111 0 8px, transparent 9px),
    radial-gradient(circle at 47% 15%, #111 0 8px, transparent 9px),
    radial-gradient(circle at 36% 27%, #111 0 8px, transparent 9px),
    #f18a39;
  transform: rotate(-18deg);
}

.prize-speaker {
  right: 19%;
  top: 38%;
  width: clamp(82px, 12vw, 152px);
  height: clamp(64px, 9vw, 118px);
  border-radius: 20px;
  background:
    radial-gradient(circle at 32% 52%, #ff6f83 0 16%, transparent 17%),
    radial-gradient(circle at 68% 52%, #ff6f83 0 16%, transparent 17%),
    #7357c7;
  transform: rotate(12deg);
}

.prize-speaker::before {
  content: "";
  position: absolute;
  left: 38%;
  top: -20%;
  width: 22%;
  height: 32%;
  border: 8px solid #4d3b95;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.prize-cooker {
  right: 4%;
  bottom: 9%;
  width: clamp(116px, 18vw, 238px);
  height: clamp(112px, 17vw, 220px);
  border-radius: 42% 42% 28% 28%;
  background:
    radial-gradient(circle at 50% 59%, #1a1b28 0 20%, transparent 21%),
    linear-gradient(#dfe9e9, #1d2c31);
  transform: rotate(-4deg);
}

.prize-cooker::before {
  content: "";
  position: absolute;
  left: 24%;
  top: -14%;
  width: 52%;
  height: 27%;
  border-radius: 50%;
  background: #1d2c31;
}

.jumpmax-tutorial {
  align-content: start;
  padding-top: clamp(88px, 14vh, 116px);
  background: rgba(61, 75, 255, 0.38);
  pointer-events: none;
}

.jumpmax-tutorial-copy {
  max-width: min(820px, calc(100vw - 38px));
  margin: 0 auto;
  color: #fff;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(21px, 3.1vw, 39px);
  line-height: 1.08;
  text-shadow: 3px 5px 0 rgba(38, 31, 155, 0.3);
  text-wrap: balance;
}

.jumpmax-keycap {
  position: absolute;
  left: 50%;
  bottom: clamp(66px, 10vh, 94px);
  min-width: 180px;
  padding: 14px 30px 16px;
  background: #fff;
  color: var(--jm-pink);
  pointer-events: auto;
  transform: translateX(-50%) rotate(-2deg);
}

.jumpmax-keycap::before {
  content: "";
  position: absolute;
  inset: auto 16% -9px 16%;
  height: 9px;
  border-radius: 0 0 999px 999px;
  background: rgba(45, 42, 150, 0.42);
}

.jumpmax-keycap.is-arrow {
  color: var(--jm-blue);
  font-size: 0;
}

.jumpmax-keycap.is-arrow::after {
  content: "";
  display: block;
  width: 118px;
  height: 44px;
  margin: 0 auto;
  background: var(--jm-blue);
  clip-path: polygon(0 38%, 66% 38%, 66% 15%, 100% 50%, 66% 85%, 66% 62%, 0 62%);
}

.jumpmax-collect-card {
  position: relative;
  display: grid;
  grid-template-columns: 120px 90px;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: center;
  gap: 0 24px;
  width: min(430px, calc(100vw - 42px));
  min-height: 150px;
  margin-top: clamp(70px, 16vh, 120px);
  padding: 18px 26px;
  border-radius: 999px;
  background: var(--jm-pink);
  box-shadow: 0 10px 0 rgba(38, 31, 155, 0.35);
  transform: rotate(-8deg);
}

.jumpmax-collect-card::before,
.jumpmax-collect-card::after {
  content: "";
  position: absolute;
  inset: 49% -30px auto -30px;
  height: 38px;
  background: var(--jm-pink);
  transform: rotate(-10deg);
  z-index: -1;
}

.jumpmax-collect-card::after {
  transform: rotate(10deg);
}

.jumpmax-collect-card[hidden] {
  display: none;
}

.jumpmax-collect-card b {
  color: var(--jm-pink);
  font-size: 56px;
  line-height: 0.78;
}

.jumpmax-collect-card small {
  grid-column: 2;
  color: var(--jm-pink);
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 15px;
}

.jumpmax-megaphone {
  position: relative;
  display: block;
  width: 118px;
  height: 72px;
  filter: drop-shadow(5px 9px 0 rgba(24, 27, 129, 0.2));
}

.jumpmax-megaphone::before,
.jumpmax-megaphone::after {
  content: "";
  position: absolute;
}

.jumpmax-megaphone::before {
  left: 8px;
  top: 28px;
  width: 48px;
  height: 19px;
  border-radius: 999px;
  background: #fff;
}

.jumpmax-megaphone::after {
  right: 6px;
  top: 7px;
  width: 70px;
  height: 58px;
  border: 5px solid #dbd8de;
  border-radius: 50%;
  background: #fff;
  clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 72%);
}

.jumpmax-menu,
.jumpmax-lots,
.jumpmax-legal,
.jumpmax-gameover {
  align-content: center;
  justify-items: center;
  gap: clamp(22px, 3.5vh, 34px);
}

.jumpmax-close {
  position: absolute;
  top: clamp(20px, 3vw, 34px);
  left: clamp(22px, 3vw, 38px);
  z-index: 8;
  width: 44px;
  height: 44px;
  color: transparent;
  filter: drop-shadow(3px 5px 0 rgba(39, 32, 176, 0.2));
}

.jumpmax-close::before,
.jumpmax-close::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 18px;
  width: 39px;
  height: 9px;
  border-radius: 999px;
  background: #fff;
}

.jumpmax-close::before {
  transform: rotate(45deg);
}

.jumpmax-close::after {
  transform: rotate(-45deg);
}

.jumpmax-menu-actions {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 19px;
  justify-items: center;
}

.jumpmax-legal-link {
  z-index: 2;
  border: 0;
  border-top: 2px solid var(--jm-cream);
  background: transparent;
  color: var(--jm-cream);
  padding: 12px 4px 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(17px, 2vw, 24px);
  text-shadow: 2px 3px 0 rgba(31, 24, 139, 0.16);
}

.jumpmax-prize-list {
  z-index: 2;
  display: grid;
  gap: 14px;
  width: min(520px, calc(100vw - 42px));
}

.jumpmax-prize-list article {
  display: grid;
  grid-template-columns: 92px 1fr 92px;
  align-items: center;
  min-height: 88px;
  padding: 10px 18px 10px 28px;
  border: 3px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.62);
  box-shadow: 0 7px 0 rgba(47, 40, 138, 0.28);
}

.jumpmax-prize-list article.is-active,
.jumpmax-prize-list article.is-unlocked {
  background: var(--jm-blue);
  color: #fff;
}

.jumpmax-prize-list strong {
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: center;
  color: inherit;
  font-size: 34px;
  line-height: 0.75;
}

.jumpmax-prize-list span {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 10px;
}

.jumpmax-prize-list b {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: start;
  font-size: clamp(24px, 3.6vw, 36px);
  line-height: 0.82;
}

.jumpmax-prize-list i {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.prize-mini {
  position: relative;
  display: block;
  width: 74px;
  height: 54px;
}

.prize-mini-tray {
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 45%, #f3e4a9 0 8px, transparent 9px),
    radial-gradient(circle at 61% 42%, #e44c50 0 9px, transparent 10px),
    #bf2538;
  transform: rotate(-8deg);
}

.prize-mini-tower {
  width: 58px;
  height: 70px;
  border-left: 8px solid #202035;
  border-bottom: 8px solid #202035;
}

.prize-mini-tower::before,
.prize-mini-tower::after {
  content: "";
  position: absolute;
  left: 6px;
  width: 46px;
  height: 9px;
  border-radius: 999px;
  background: #202035;
}

.prize-mini-tower::before {
  top: 10px;
}

.prize-mini-tower::after {
  top: 42px;
}

.prize-mini-speaker {
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 48%, #202035 0 14px, transparent 15px),
    #dedce6;
}

.jumpmax-legal-copy {
  z-index: 2;
  width: min(680px, calc(100vw - 42px));
  padding: clamp(22px, 4vw, 42px);
  border: 4px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  background: rgba(52, 44, 255, 0.78);
  color: #fff;
  text-align: left;
  box-shadow: 0 10px 0 rgba(48, 40, 143, 0.3);
}

.jumpmax-legal-copy h2 {
  margin: 0 0 16px;
  font-size: clamp(42px, 7vw, 80px);
  line-height: 0.82;
}

.jumpmax-legal-copy p {
  margin: 12px 0 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
}

.jumpmax-gameover {
  background: var(--jm-pink);
}

.jumpmax-score-final {
  position: relative;
  top: auto;
  left: auto;
  z-index: 2;
  opacity: 1;
  transform: none;
}

.jumpmax[data-jumpmax-state="gameover"] .jumpmax-hud .jumpmax-score {
  opacity: 0;
}

.jumpmax-gameover .jumpmax-score-final {
  opacity: 1;
}

.jumpmax-gameover-copy {
  z-index: 2;
  max-width: min(680px, calc(100vw - 42px));
  margin: 0;
  color: #fff;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.12;
  text-shadow: 2px 3px 0 rgba(31, 24, 139, 0.16);
}

.jumpmax-prize-list-final {
  margin-bottom: -6px;
}

@media (max-width: 780px) {
  .jumpmax-overlay {
    padding: 18px;
  }

  .jumpmax-ended {
    width: min(86vw, 390px);
    padding-left: 16px;
    padding-right: 16px;
  }

  .jumpmax-logo {
    margin-top: 38px;
  }

  .jumpmax-logo span {
    font-size: clamp(55px, 18vw, 104px);
  }

  .jumpmax-logo b {
    font-size: clamp(52px, 15vw, 88px);
  }

  .jumpmax-tagline {
    font-size: clamp(17px, 5.4vw, 24px);
  }

  .jumpmax-character-preview {
    margin-top: 6px;
  }

  .jumpmax-prize {
    opacity: 0.55;
  }

  .prize-suitcase {
    left: -4%;
    top: 22%;
  }

  .prize-console {
    right: -9%;
    top: 10%;
  }

  .prize-phone {
    left: -6%;
    bottom: 1%;
  }

  .prize-speaker {
    right: 4%;
    top: 47%;
  }

  .prize-cooker {
    right: -8%;
    bottom: 5%;
  }

  .jumpmax-prize-list article {
    grid-template-columns: 74px 1fr 62px;
    min-height: 74px;
    padding: 9px 12px 9px 18px;
  }

  .jumpmax-prize-list strong {
    font-size: 27px;
  }

  .jumpmax-prize-list b {
    font-size: 24px;
  }

  .jumpmax-prize-list .jumpmax-megaphone {
    width: 76px;
    height: 50px;
    transform: scale(0.72);
    transform-origin: center;
  }

  .prize-mini {
    transform: scale(0.78);
    transform-origin: center;
  }
}

@media (max-width: 540px) {
  .jumpmax-ended {
    top: 10px;
    width: min(65vw, 260px);
    padding: 8px 12px 9px;
    font-size: 10px;
  }

  .jumpmax-score {
    min-width: 96px;
    padding: 10px 12px 12px;
    font-size: 36px;
  }

  .jumpmax-menu-button span {
    width: 34px;
    height: 7px;
  }

  .jumpmax-pause-button {
    grid-template-columns: repeat(2, 10px);
  }

  .jumpmax-pause-button span {
    width: 10px;
    height: 34px;
  }

  .jumpmax-sound {
    transform: scale(0.84);
    transform-origin: right top;
  }

  .jumpmax-tutorial {
    padding-top: 86px;
  }

  .jumpmax-tutorial-copy {
    font-size: clamp(20px, 6.4vw, 29px);
  }

  .jumpmax-keycap {
    min-width: 156px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 28px;
  }

  .jumpmax-collect-card {
    grid-template-columns: 92px 70px;
    min-height: 120px;
    margin-top: 84px;
  }

  .jumpmax-collect-card b {
    font-size: 42px;
  }

  .jumpmax-menu-actions {
    gap: 14px;
  }

  .jumpmax-primary,
  .jumpmax-secondary,
  .jumpmax-link {
    min-width: min(235px, calc(100vw - 50px));
    font-size: 32px;
  }
}

/* ZUNGK click-to-keep clone pass */
.site-shell[data-view="zungk"] .topbar {
  top: 10px;
  opacity: 0.86;
}

.site-shell[data-view="zungk"] .topbar .nav-link {
  min-height: 42px;
  background: rgba(237, 237, 235, 0.82);
  backdrop-filter: blur(8px);
  font-size: clamp(18px, 2.25vw, 29px);
}

.site-shell[data-view="zungk"] .topbar .nav-link.is-active {
  background: rgba(255, 255, 255, 0.86);
}

.zungk-page {
  --save-shift: 0px;
  --zungk-paper: #ededeb;
  --zungk-acid: #fef019;
  background: var(--zungk-paper);
}

.zungk-hero {
  min-height: 100svh;
  padding: 82px 18px 18px;
  background:
    linear-gradient(105deg, rgba(203, 224, 229, 0.8), rgba(237, 237, 235, 0.94) 51%, rgba(239, 226, 207, 0.84)),
    var(--zungk-paper);
}

.zungk-page.is-overloaded .zungk-hero {
  background:
    linear-gradient(100deg, rgba(176, 207, 216, 0.92), rgba(231, 233, 225, 0.88) 48%, rgba(240, 224, 197, 0.9)),
    var(--zungk-paper);
}

.zungk-chaos-toggle {
  position: absolute;
  top: 74px;
  left: 50%;
  z-index: 22;
  min-width: 120px;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid #050505;
  border-radius: 999px;
  background: rgba(237, 237, 235, 0.88);
  color: #050505;
  font: 800 16px/1 var(--font-body);
  transform: translateX(-50%);
  box-shadow: 0 1px 0 #050505;
  cursor: pointer;
}

.zungk-chaos-toggle:hover {
  background: #fff;
}

.zungk-chaos-toggle[aria-pressed="true"] {
  background: rgba(212, 229, 232, 0.9);
}

.zungk-question {
  z-index: 6;
  max-width: 222px;
  font-size: 14px;
  font-weight: 800;
}

.zungk-question.is-top {
  top: 116px;
}

.zungk-question.is-low {
  top: 204px;
}

.zungk-title {
  z-index: 3;
  bottom: 10px;
  font-size: clamp(8rem, 15.9vw, 13.6rem);
  line-height: 0.98;
  transform: translateY(0);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.zungk-page.is-overloaded .zungk-title {
  transform: translateY(10px);
}

.zungk-chaos-cloud {
  inset: 126px 24px 18px;
  z-index: 8;
}

.zungk-mini-card {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 28px, 0) scale(0.82) rotate(var(--r, 0deg));
  transition:
    opacity 260ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.zungk-page.is-overloaded .zungk-mini-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(var(--r, 0deg));
}

.zungk-page.is-overloaded .zungk-mini-card:nth-child(3n) {
  transition-delay: 55ms;
}

.zungk-page.is-overloaded .zungk-mini-card:nth-child(4n) {
  transition-delay: 95ms;
}

.zungk-page.is-overloaded .zungk-mini-card:nth-child(5n) {
  transition-delay: 130ms;
}

.zungk-mini-card.one {
  left: 19%;
  top: 24%;
  width: 110px;
  height: 126px;
}

.zungk-mini-card.two {
  left: 34%;
  top: 11%;
}

.zungk-mini-card.three {
  left: 47%;
  top: 18%;
}

.zungk-mini-card.four {
  right: 15%;
  top: 26%;
}

.zungk-mini-card.five {
  left: 18%;
  top: 47%;
}

.zungk-mini-card.six {
  left: 40%;
  top: 39%;
}

.zungk-mini-card.seven {
  right: 23%;
  top: 43%;
}

.zungk-mini-card.eight {
  right: 7%;
  top: 47%;
}

.zungk-mini-card.nine {
  left: 55%;
  bottom: 13%;
}

.zungk-mini-card.ten {
  left: 27%;
  bottom: 13%;
}

.zungk-mini-card.eleven {
  --r: -9deg;
  left: 8%;
  top: 34%;
  width: 126px;
  height: 132px;
}

.zungk-mini-card.twelve {
  --r: 5deg;
  right: 31%;
  top: 12%;
  background: #f05a28;
  color: #fff;
}

.zungk-mini-card.thirteen {
  --r: -5deg;
  left: 50%;
  top: 54%;
  width: 150px;
  height: 150px;
}

.zungk-mini-card.fourteen {
  --r: 6deg;
  right: 10%;
  bottom: 18%;
  width: 140px;
  background: #245dff;
  color: #fff;
}

.zungk-mini-card.fifteen {
  --r: -3deg;
  left: 6%;
  bottom: 12%;
  width: 164px;
}

.zungk-mini-card.sixteen {
  --r: 4deg;
  left: 62%;
  top: 28%;
  width: 132px;
  height: 126px;
}

.zungk-mini-card.seventeen {
  --r: -8deg;
  right: 26%;
  bottom: 10%;
  background: #ff35c9;
}

.zungk-mini-card.eighteen {
  --r: 2deg;
  right: 4%;
  top: 26%;
  width: 112px;
  height: 154px;
}

.zungk-mini-card.nineteen {
  --r: -4deg;
  left: 37%;
  bottom: 31%;
  background: #050505;
  color: #fff;
}

.zungk-mini-card.twenty {
  --r: 7deg;
  left: 70%;
  bottom: 29%;
  width: 134px;
  height: 110px;
}

.zungk-info-folder {
  bottom: 18px;
  z-index: 24;
}

.zungk-info-panel {
  z-index: 30;
  width: min(590px, calc(100vw - 56px));
  background: rgba(237, 237, 235, 0.96);
}

.zungk-text-scene {
  min-height: 128svh;
  padding-top: 86px;
}

.zungk-text-wall {
  max-width: 1160px;
  font-size: clamp(54px, 6vw, 86px);
}

.zungk-bottom-strip {
  height: 178px;
}

.zungk-breath {
  min-height: 54svh;
  padding: 66px 22px;
  background: var(--zungk-paper);
}

.zungk-breath h2 {
  font-size: clamp(72px, 11vw, 158px);
  line-height: 0.9;
}

.zungk-breath .zungk-stat {
  position: absolute;
  bottom: 44px;
  width: min(250px, 24vw);
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.zungk-breath .zungk-stat.is-left {
  left: 28px;
}

.zungk-breath .zungk-stat.is-right {
  right: 28px;
  text-align: right;
}

.zungk-fragment-stage {
  min-height: 1020px;
  background: var(--zungk-paper);
}

.zungk-save-field {
  min-height: 1020px;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(5, 5, 5, 0.055) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, transparent 0 37px, rgba(5, 5, 5, 0.045) 38px 39px),
    var(--zungk-paper);
}

.zungk-save-field::after {
  z-index: 2;
  background: linear-gradient(180deg, transparent 0 64%, #050505 64% 100%);
  opacity: 0.95;
}

.zungk-counter-card {
  left: 50%;
  top: 42%;
  z-index: 34;
  min-width: 224px;
  border: 0;
  border-radius: 8px;
  background: rgba(237, 237, 235, 0.72);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.2);
}

.zungk-counter-card strong {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 900;
}

.zungk-save-button {
  top: calc(42% - 54px);
  z-index: 35;
  min-width: 148px;
  min-height: 42px;
  border-radius: 999px;
  background: rgba(237, 237, 235, 0.92);
}

.zungk-save-marquee {
  z-index: 28;
  bottom: 36px;
  color: #fff;
}

.zungk-media-tile,
.zungk-generated-save,
.zungk-file-chip,
.zungk-save-field .sealed-folder {
  z-index: 10;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: saturate(1.12) contrast(1.04);
}

.zungk-media-tile {
  font-size: 18px;
}

.zungk-media-tile.tile-one {
  left: -1%;
  top: 16%;
  width: 220px;
  height: 210px;
}

.zungk-media-tile.tile-two {
  left: 14%;
  top: 19%;
  width: 250px;
  height: 158px;
}

.zungk-media-tile.tile-three {
  left: 2%;
  top: 49%;
  width: 230px;
  height: 108px;
}

.zungk-media-tile.tile-four {
  left: 48%;
  top: 12%;
  width: 270px;
  height: 270px;
}

.zungk-media-tile.tile-five {
  right: -2%;
  top: 16%;
  width: 350px;
  height: 270px;
}

.zungk-media-tile.tile-six {
  left: 14%;
  bottom: 6%;
  width: 320px;
  height: 210px;
}

.zungk-media-tile.tile-seven {
  right: 18%;
  bottom: 9%;
  width: 220px;
  height: 150px;
}

.zungk-media-tile.tile-eight {
  right: 2%;
  bottom: 17%;
  width: 170px;
  height: 170px;
}

.zungk-media-tile.tile-nine {
  left: 34%;
  top: 26%;
  width: 150px;
  height: 148px;
  transform: rotate(-7deg);
}

.zungk-media-tile.tile-ten {
  left: 62%;
  top: 26%;
  width: 154px;
  height: 154px;
  transform: rotate(5deg);
}

.zungk-media-tile.tile-eleven {
  left: 74%;
  top: 8%;
  width: 146px;
  height: 78px;
  background: #050505;
  color: #fff;
}

.zungk-media-tile.tile-twelve {
  left: 38%;
  bottom: 13%;
  width: 178px;
  height: 220px;
}

.zungk-media-tile.tile-thirteen {
  right: 31%;
  bottom: 0;
  width: 300px;
  height: 190px;
}

.zungk-media-tile.tile-fourteen {
  left: 34%;
  top: 8%;
  width: 236px;
  height: 136px;
  background: #ff35c9;
}

.zungk-media-tile.tile-fifteen {
  left: -2%;
  bottom: 0;
  width: 230px;
  height: 170px;
}

.zungk-media-tile.tile-sixteen {
  right: 4%;
  top: 47%;
  width: 186px;
  height: 92px;
  background: #fef019;
}

.zungk-save-field .collection-pile {
  z-index: 31;
  left: 5%;
  bottom: 32%;
}

.zungk-save-field .collected-file,
.zungk-generated-save {
  border: 0;
  background: var(--bg, #fff);
  color: var(--fg, #050505);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.zungk-save-field .sealed-folder {
  left: 46%;
  top: 16%;
  width: 150px;
  min-height: 104px;
  padding: 12px;
  background: #fef019;
  color: #050505;
  transform: rotate(-6deg);
}

.zungk-save-field .sealed-folder::before {
  display: none;
}

.zungk-save-field .sealed-folder span {
  font-size: 19px;
}

.zungk-file-chip {
  min-height: 76px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.88);
  color: #050505;
  text-align: left;
  transform: rotate(var(--file-r, 0deg));
}

.zungk-file-chip .fragment-icon {
  display: none;
}

.zungk-file-chip b {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1;
}

.zungk-file-chip small {
  display: block;
  margin-top: 8px;
  font-size: 11px;
}

.zungk-save-field .note-one {
  --file-r: -5deg;
  left: 10%;
  top: 35%;
}

.zungk-save-field .note-two {
  --file-r: 4deg;
  right: 21%;
  top: 34%;
  background: #245dff;
  color: #fff;
}

.zungk-save-field .note-three {
  --file-r: -3deg;
  left: 22%;
  top: 58%;
  background: #050505;
  color: #fff;
}

.zungk-save-field .note-four {
  --file-r: 6deg;
  left: 58%;
  bottom: 19%;
  background: #ff35c9;
}

.zungk-save-field .note-five {
  --file-r: -2deg;
  right: 8%;
  bottom: 31%;
  background: #fef019;
}

.zungk-signal-log {
  top: 42%;
  right: 18px;
  z-index: 33;
  width: min(300px, 24vw);
  border: 0;
  background: rgba(5, 5, 5, 0.78);
  color: #fff;
}

.zungk-signal-log strong {
  font-family: var(--font-body);
  font-size: 34px;
}

.zungk-signal-log .fragment-meta div {
  border-color: rgba(255, 255, 255, 0.22);
}

.zungk-black-scene {
  min-height: 114svh;
  padding-top: 124px;
}

.zungk-black-scene h2 {
  font-size: clamp(54px, 6.25vw, 88px);
  font-weight: 500;
  line-height: 0.96;
}

.zungk-see-saved {
  min-height: 156px;
  font-size: clamp(58px, 10vw, 146px);
  line-height: 0.86;
}

.zungk-overload-wall {
  min-height: 140svh;
}

.zungk-mosaic {
  min-height: 140svh;
}

.zungk-mosaic img {
  object-fit: cover;
}

.zungk-mosaic img:nth-child(13) {
  --x: 2%;
  --y: 8%;
  --w: 18%;
  --h: 26%;
  --r: 4deg;
  --z: 9;
}

.zungk-mosaic img:nth-child(14) {
  --x: 34%;
  --y: 12%;
  --w: 18%;
  --h: 24%;
  --r: -6deg;
  --z: 10;
}

.zungk-mosaic img:nth-child(15) {
  --x: 71%;
  --y: 10%;
  --w: 18%;
  --h: 26%;
  --r: 5deg;
  --z: 9;
}

.zungk-mosaic img:nth-child(16) {
  --x: 14%;
  --y: 43%;
  --w: 20%;
  --h: 27%;
  --r: -4deg;
  --z: 11;
}

.zungk-mosaic img:nth-child(17) {
  --x: 80%;
  --y: 40%;
  --w: 22%;
  --h: 31%;
  --r: 3deg;
  --z: 10;
}

.zungk-mosaic img:nth-child(18) {
  --x: 0%;
  --y: 78%;
  --w: 24%;
  --h: 27%;
  --r: 2deg;
  --z: 9;
}

.zungk-mosaic img:nth-child(19) {
  --x: 36%;
  --y: 82%;
  --w: 25%;
  --h: 27%;
  --r: -2deg;
  --z: 10;
}

.zungk-mosaic img:nth-child(20) {
  --x: 57%;
  --y: 76%;
  --w: 22%;
  --h: 29%;
  --r: 3deg;
  --z: 12;
}

.zungk-mosaic img:nth-child(21) {
  --x: 16%;
  --y: 24%;
  --w: 31%;
  --h: 26%;
  --r: -1deg;
  --z: 4;
}

.zungk-mosaic img:nth-child(22) {
  --x: 63%;
  --y: 18%;
  --w: 31%;
  --h: 32%;
  --r: 1deg;
  --z: 3;
}

@media (max-width: 980px) {
  .zungk-chaos-toggle {
    top: 72px;
  }

  .zungk-question.is-top {
    top: 122px;
  }

  .zungk-question.is-low {
    top: 204px;
  }

  .zungk-title {
    font-size: clamp(5.8rem, 15vw, 9rem);
  }

  .zungk-signal-log {
    position: absolute;
    width: min(280px, 34vw);
  }
}

@media (max-width: 640px) {
  .zungk-hero {
    padding-top: 70px;
  }

  .zungk-chaos-toggle {
    top: 64px;
    min-width: 104px;
    min-height: 40px;
    font-size: 14px;
  }

  .zungk-question {
    max-width: 150px;
    font-size: 10px;
  }

  .zungk-question.is-top {
    top: 112px;
  }

  .zungk-question.is-low {
    top: 174px;
  }

  .zungk-title {
    bottom: 28px;
    font-size: clamp(3.3rem, 17vw, 5.2rem);
  }

  .zungk-chaos-cloud {
    inset: 116px 10px 28px;
  }

  .zungk-mini-card {
    width: 76px;
    height: 68px;
    font-size: 11px;
  }

  .zungk-mini-card.three,
  .zungk-mini-card.four,
  .zungk-mini-card.nine,
  .zungk-mini-card.fifteen,
  .zungk-mini-card.twenty {
    width: 92px;
    height: 78px;
  }

  .zungk-info-folder {
    bottom: 104px;
  }

  .zungk-breath {
    min-height: 58svh;
    padding: 48px 14px 120px;
  }

  .zungk-breath .zungk-stat {
    bottom: 34px;
    width: 42vw;
    font-size: 11px;
  }

  .zungk-fragment-stage,
  .zungk-save-field {
    min-height: 820px;
  }

  .zungk-counter-card {
    top: 44%;
    min-width: 194px;
  }

  .zungk-save-button {
    top: calc(44% - 52px);
  }

  .zungk-signal-log {
    top: auto;
    right: 12px;
    bottom: 76px;
    width: min(260px, calc(100vw - 24px));
  }

  .zungk-media-tile {
    transform: scale(0.74);
    transform-origin: center;
  }

  .zungk-file-chip {
    width: 106px;
    min-height: 68px;
  }

  .zungk-save-field .note-two {
    right: 6%;
  }

  .zungk-black-scene {
    padding-top: 104px;
  }

  .zungk-black-scene h2,
  .zungk-see-saved {
    font-size: clamp(39px, 11vw, 54px);
  }

  .zungk-see-saved {
    min-height: 108px;
  }
}

.site-shell[data-view="game"] .topbar {
  opacity: 0;
  pointer-events: none;
}

.analogue-trends-view {
  min-height: 100svh;
  padding-top: 0;
  overflow: visible;
  background: #fff;
  color: #000;
  font-family: "MetroSans", Arial, sans-serif;
}

.trends-page {
  min-height: 100svh;
  overflow: hidden;
  background: #fff;
  color: #000;
  font-family: "MetroSans", Arial, sans-serif;
  letter-spacing: 0;
}

.trends-page *,
.trends-page *::before,
.trends-page *::after {
  box-sizing: border-box;
  letter-spacing: 0;
}

.trends-page a,
.trends-page button {
  color: inherit;
  font-family: inherit;
  text-decoration: none;
}

.trends-page button {
  cursor: pointer;
}

.trends-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 260;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 75px;
  padding: 13px 8px 10px;
  background: #fff;
  color: #000;
}

.trends-brand,
.trends-connect {
  border: 0;
  background: transparent;
}

.trends-brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
}

.trends-brand b {
  font-weight: 800;
}

.trends-brand-mark {
  position: relative;
  display: block;
  width: 31px;
  height: 32px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #000;
}

.trends-brand-mark::before {
  content: "";
  position: absolute;
  inset: 3px 4px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #fff;
}

.trends-brand-eye,
.trends-brand-mouth {
  position: absolute;
  z-index: 1;
  display: block;
}

.trends-brand-eye {
  top: 18px;
  width: 3px;
  height: 5px;
  border-radius: 50%;
  background: #000;
}

.trends-brand-eye-left {
  left: 11px;
}

.trends-brand-eye-right {
  right: 11px;
}

.trends-brand-mouth {
  left: 9px;
  bottom: 7px;
  width: 13px;
  height: 6px;
  border-bottom: 2px solid #000;
  border-radius: 0 0 999px 999px;
}

.trends-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 29px;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.trends-links::-webkit-scrollbar {
  display: none;
}

.trends-links a,
.trends-connect {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  height: 23px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 23px;
  text-transform: none;
}

.trends-links a span,
.trends-connect span {
  display: block;
  height: 23px;
  transition: transform 190ms cubic-bezier(0.16, 1, 0.3, 1);
}

.trends-links a:hover span,
.trends-connect:hover span {
  transform: translateY(-23px);
}

.trends-connect {
  justify-self: end;
  min-width: 112px;
  height: 39px;
  padding: 8px 20px;
  place-items: start center;
  border: 2px solid #000;
  border-radius: 7px;
  background: #fff;
  box-shadow: 9px 9px 0 #000;
  font-size: 16px;
  line-height: 23px;
  text-transform: none;
}

.trends-connect:hover {
  transform: translate(4px, 4px);
  box-shadow: 5px 5px 0 #000;
}

.trends-main {
  background: #fff;
}

.trends-hero {
  display: grid;
  min-height: 525px;
  padding: 75px 60px 68px;
  place-items: center;
  background: #fff;
}

.trends-hero h1 {
  width: 100%;
  max-width: 1160px;
  margin: 0;
  font-size: 88px;
  font-weight: 400;
  line-height: 0.9;
  text-align: center;
}

.trends-posts {
  display: grid;
  gap: 64px;
  width: min(1100px, calc(100% - 120px));
  margin: 132px auto 76px;
}

.trends-post-card {
  display: grid;
  justify-items: center;
  animation: trends-card-rise 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 90ms;
}

.trends-post-media {
  position: relative;
  display: block;
  width: min(820px, 100%);
  height: 430px;
  overflow: hidden;
  border: 2px solid #000;
  border-radius: 10px;
  background: #f4f4f4;
  box-shadow: 12px 12px 0 #000;
  transform: translateZ(0);
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.trends-post-media img,
.trends-post-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: saturate(1.18) contrast(1.05);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.trends-post-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.38) 52%, rgba(255, 255, 255, 0.72)),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 16px);
  pointer-events: none;
}

.trends-post-media::after {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 2;
  border: 2px solid rgba(0, 0, 0, 0.88);
  border-radius: 6px;
  pointer-events: none;
}

.trends-post-media:hover {
  transform: translate(4px, 4px);
  box-shadow: 8px 8px 0 #000;
}

.trends-post-media:hover img,
.trends-post-media:hover video {
  transform: scale(1.055);
}

.trends-post-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 4;
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border: 2px solid #000;
  border-radius: 50%;
  background: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.trends-cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  padding: 45px 54px 43px;
  pointer-events: none;
}

.trends-cover span,
.trends-cover em {
  position: relative;
  z-index: 2;
  display: block;
  font-family: "ItalianMono", "Courier New", monospace;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}

.trends-cover span {
  justify-self: end;
}

.trends-cover strong {
  position: relative;
  z-index: 2;
  display: block;
  width: min(610px, 82%);
  font-size: clamp(66px, 8vw, 106px);
  font-weight: 800;
  line-height: 0.82;
  text-transform: uppercase;
}

.trends-cover-escapism {
  background:
    radial-gradient(circle at 78% 35%, rgba(255, 167, 240, 0.62), transparent 0 18%, transparent 19%),
    radial-gradient(circle at 69% 67%, rgba(255, 226, 69, 0.58), transparent 0 12%, transparent 13%),
    linear-gradient(135deg, rgba(255, 167, 240, 0.34), rgba(255, 255, 255, 0) 52%);
}

.trends-cover-orb {
  position: absolute;
  z-index: 2;
  display: block;
  border: 2px solid #000;
  border-radius: 50%;
  pointer-events: none;
}

.trends-cover-orb-one {
  right: 78px;
  bottom: 76px;
  width: 84px;
  height: 84px;
  background: #ffa7f0;
}

.trends-cover-orb-two {
  right: 177px;
  top: 85px;
  width: 38px;
  height: 38px;
  background: #fef019;
}

.trends-post-content {
  width: min(820px, 100%);
  padding-top: 28px;
}

.trends-post-content h2 {
  margin: 0 0 19px;
  font-size: 49px;
  font-weight: 600;
  line-height: 0.98;
}

.trends-post-meta {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  font-size: 20px;
  line-height: 1.2;
}

.trends-post-meta span {
  font-family: "ItalianMono", "Courier New", monospace;
  font-weight: 500;
}

.trends-post-meta p {
  margin: 0;
}

.trends-membership {
  background: #fff;
}

.trends-marquee {
  display: flex;
  width: 100%;
  height: 44px;
  overflow: hidden;
  align-items: center;
  background: #000;
  color: #fff;
}

.trends-marquee div {
  display: flex;
  min-width: max-content;
  animation: trends-marquee 19s linear infinite;
}

.trends-marquee span {
  display: grid;
  width: 250px;
  height: 44px;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.trends-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  width: min(1160px, calc(100% - 120px));
  margin: 0 auto;
  padding: 0 0 54px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

@keyframes trends-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes trends-card-rise {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .trends-header {
    grid-template-columns: 1fr auto;
  }

  .trends-links {
    grid-column: 1 / -1;
    order: 3;
    justify-content: flex-start;
    gap: 24px;
    overflow-x: auto;
    padding: 4px 0 0;
  }

  .trends-hero {
    min-height: 520px;
    padding-top: 116px;
  }
}

@media (max-width: 760px) {
  .trends-header {
    min-height: 98px;
    padding: 12px;
  }

  .trends-brand {
    font-size: 14px;
  }

  .trends-connect {
    min-width: 98px;
    height: 36px;
    padding: 6px 16px;
    box-shadow: 6px 6px 0 #000;
    font-size: 14px;
  }

  .trends-links {
    gap: 15px;
    overflow: hidden;
  }

  .trends-links a:nth-last-child(-n + 2) {
    display: none;
  }

  .trends-hero {
    min-height: 394px;
    padding: 118px 22px 46px;
  }

  .trends-hero h1 {
    font-size: 58px;
  }

  .trends-posts,
  .trends-footer {
    width: calc(100% - 32px);
  }

  .trends-posts {
    gap: 54px;
    margin-top: 136px;
  }

  .trends-post-media {
    height: 302px;
    box-shadow: 7px 7px 0 #000;
  }

  .trends-cover {
    padding: 39px 28px 30px;
  }

  .trends-cover span,
  .trends-cover em {
    font-size: 12px;
  }

  .trends-cover strong {
    width: 92%;
    font-size: 49px;
  }

  .trends-cover-orb-one {
    right: 31px;
    bottom: 56px;
    width: 54px;
    height: 54px;
  }

  .trends-cover-orb-two {
    right: 105px;
    top: 76px;
    width: 28px;
    height: 28px;
  }

  .trends-post-content h2 {
    font-size: 34px;
  }

  .trends-post-meta {
    grid-template-columns: 56px minmax(0, 1fr);
    font-size: 16px;
  }

}

/* VROWN Analogue clone pass. The previous VROWN scene is visually replaced here. */
.site-shell[data-view="vrown"] .topbar,
.site-shell[data-view="zungk"] .topbar,
.site-shell[data-view="letter"] .topbar {
  top: 10px;
  display: flex;
  opacity: 0.86;
  pointer-events: auto;
}

.site-shell[data-view="vrown"] .topbar .nav-link,
.site-shell[data-view="zungk"] .topbar .nav-link,
.site-shell[data-view="letter"] .topbar .nav-link {
  min-height: 42px;
  background: rgba(237, 237, 235, 0.82);
  backdrop-filter: blur(8px);
  font-size: clamp(18px, 2.25vw, 29px);
}

.site-shell[data-view="vrown"] .topbar .nav-link.is-active,
.site-shell[data-view="zungk"] .topbar .nav-link.is-active,
.site-shell[data-view="letter"] .topbar .nav-link.is-active {
  background: rgba(255, 255, 255, 0.86);
}

.site-shell[data-view="vrown"] .va-nav {
  display: none;
}

.vrown-view {
  min-height: 100svh;
  background: #fff;
  color: #050505;
}

.vrown-supari {
  min-height: 100svh;
  overflow-x: hidden;
  background: #fff;
  color: #050505;
  font-family: "Inter", Arial, sans-serif;
  isolation: isolate;
}

.vrown-supari::before,
.vrown-supari::after {
  display: none;
}

.vrown-supari > :not(.vrown-analogue-stage) {
  display: none !important;
}

.vrown-analogue-stage {
  position: relative;
  z-index: 60;
  min-height: 100svh;
  padding-top: 72px;
  background: #fff;
  color: #050505;
}

.va-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: 22px;
  padding: 14px clamp(10px, 1.4vw, 18px) 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #050505;
}

.va-brand,
.va-links button,
.va-connect,
.va-section-head button,
.va-play button {
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.va-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  justify-self: start;
  font-size: clamp(13px, 1.15vw, 16px);
}

.va-brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  aspect-ratio: 1;
  border: 2px solid #050505;
  border-radius: 50% 50% 46% 46%;
}

.va-brand-mark span {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 15px solid #050505;
  transform: translateY(-1px);
}

.va-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 42px);
}

.va-links button {
  position: relative;
  padding: 8px 0;
  font-size: clamp(12px, 0.95vw, 14px);
}

.va-links button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: currentColor;
  transition: transform 160ms ease;
}

.va-links button:hover::after {
  transform: scaleX(1);
}

.va-connect {
  justify-self: end;
  min-width: 120px;
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid #050505;
  border-radius: 7px;
  background: #fff;
  box-shadow: 8px 8px 0 #050505;
  font-size: clamp(15px, 1.3vw, 18px);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.va-connect:hover,
.va-play button:hover {
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0 #050505;
}

.va-main {
  background: #fff;
}

.va-hero {
  position: relative;
  display: grid;
  align-content: center;
  min-height: clamp(560px, 84svh, 820px);
  padding: clamp(72px, 9vh, 108px) clamp(18px, 4.8vw, 72px) clamp(54px, 7vh, 78px);
  overflow: hidden;
}

.va-logo {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0px, 0.24vw, 5px);
  margin: 0 auto clamp(46px, 7vh, 82px);
  width: min(1160px, 93vw);
  color: #000;
  font-family: "Archivo Black", Impact, "Arial Black", sans-serif;
  font-size: clamp(106px, 18.2vw, 268px);
  line-height: 0.58;
  letter-spacing: 0;
  text-transform: lowercase;
}

.va-logo::after {
  content: "";
  position: absolute;
  right: 10.5%;
  bottom: -0.11em;
  width: 0.26em;
  height: 0.08em;
  border-radius: 999px;
  background: #050505;
  transform: rotate(-9deg);
}

.va-glyph {
  position: relative;
  display: inline-grid;
  place-items: end center;
  height: 0.74em;
  color: #000;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.58;
  transform-origin: 50% 88%;
}

.va-glyph-v {
  width: 0.78em;
  height: 0.68em;
  clip-path: polygon(50% 0, 99% 100%, 1% 100%);
  border-radius: 24% 24% 5% 5%;
  background: #000;
  transform: translateY(0.035em) rotate(-2deg);
}

.va-glyph-v::before,
.va-glyph-v::after {
  content: "";
  position: absolute;
  top: 55%;
  width: 0.055em;
  height: 0.055em;
  border-radius: 50%;
  background: #fff;
}

.va-glyph-v::before {
  left: 34%;
}

.va-glyph-v::after {
  right: 34%;
}

.va-glyph-v i {
  position: absolute;
  left: 50%;
  bottom: 0.105em;
  width: 0.2em;
  height: 0.08em;
  border-bottom: 0.025em solid #fff;
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
}

.va-glyph-r {
  width: 0.48em;
  margin-left: -0.055em;
  font-size: 1.02em;
  font-style: italic;
  transform: translateY(-0.02em) rotate(-8deg) skewX(-7deg);
}

.va-glyph-o {
  width: 0.64em;
  height: 0.58em;
  margin-left: -0.035em;
  border: 0.105em solid #000;
  border-radius: 55% 45% 48% 52%;
  transform: translateY(-0.045em) rotate(7deg);
}

.va-glyph-o::before {
  content: "";
  position: absolute;
  left: 47%;
  top: 49%;
  width: 0.16em;
  height: 0.12em;
  border-radius: 50%;
  background: #000;
  transform: translate(-50%, -50%) rotate(-10deg);
}

.va-glyph-o i {
  position: absolute;
  right: 0.04em;
  bottom: 0.03em;
  width: 0.16em;
  height: 0.05em;
  border-radius: 999px;
  background: #000;
  transform: rotate(-18deg);
}

.va-glyph-w {
  width: 0.84em;
  margin-left: -0.07em;
  font-size: 1.04em;
  transform: translateY(0.006em) scaleX(1.17) rotate(3deg);
}

.va-glyph-n {
  width: 0.54em;
  margin-left: -0.035em;
  font-size: 1.02em;
  transform: translateY(-0.01em) scaleX(0.92) rotate(-4deg);
}

.va-sticker {
  position: absolute;
  top: clamp(78px, 13vh, 136px);
  right: clamp(54px, 11.6vw, 170px);
  z-index: 2;
  display: grid;
  gap: 5px;
  width: clamp(118px, 12.5vw, 172px);
  min-height: clamp(90px, 9vw, 122px);
  padding: 13px 13px 10px;
  transform: rotate(8deg);
  border: 3px solid #050505;
  border-radius: 12px 9px 15px 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.52) 0 16%, transparent 16% 100%),
    #fef019;
  color: #050505;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(16px, 2vw, 28px);
  line-height: 0.76;
  text-transform: uppercase;
  box-shadow: 8px 8px 0 #050505;
}

.va-sticker::before {
  content: "";
  position: absolute;
  right: -17px;
  top: -15px;
  z-index: -1;
  width: 54px;
  height: 54px;
  border: 3px solid #050505;
  border-radius: 50%;
  background: #ff5fc9;
}

.va-sticker::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 31px;
  height: 5px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, #5f39ff 0 8px, #050505 8px 12px, #ff5fc9 12px 18px);
}

.va-sticker b {
  color: #5a32ff;
  text-shadow: 1px 1px 0 #fff;
}

.va-sticker-tag {
  position: absolute;
  right: -12px;
  top: -11px;
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  border: 3px solid #050505;
  border-radius: 50%;
  background: #fff;
  color: #ff4abd;
  font-size: 13px;
  line-height: 1;
}

.va-sticker small {
  color: #050505;
  font-family: "Inter", Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.va-sticker-code {
  align-self: end;
  width: max-content;
  margin-top: 4px;
  padding: 4px 7px 3px;
  border: 2px solid #050505;
  border-radius: 999px;
  background: #fff;
  font-family: "Inter", Arial, sans-serif;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.va-sticker-dot {
  position: absolute;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #050505;
}

.va-sticker-dot.one {
  right: 18px;
  bottom: 13px;
}

.va-sticker-dot.two {
  right: 33px;
  bottom: 13px;
  background: #ff5fc9;
}

.va-manifesto {
  width: min(1080px, 80vw);
  margin: 0 auto;
  text-align: center;
  font-size: clamp(30px, 3.75vw, 55px);
  font-weight: 800;
  line-height: 1.02;
  text-transform: uppercase;
}

.va-manifesto mark {
  display: inline-block;
  margin: 0 0.08em;
  padding: 0 0.28em 0.04em;
  border: 2px solid #050505;
  border-radius: 999px;
  background: #fff;
  color: inherit;
  box-shadow: 5px 5px 0 #050505;
}

.va-mark-play {
  margin-right: 0.18em !important;
  transform: rotate(-2deg);
}

.va-mark-signal {
  border-radius: 13px 999px 999px 13px;
  background: #fef019 !important;
  transform: rotate(1.5deg);
}

.va-smile {
  display: inline-block;
  width: 0.84em;
  height: 0.84em;
  margin-right: 0.16em;
  border: 0.065em solid #050505;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 40%, #050505 0 7%, transparent 8%),
    radial-gradient(circle at 66% 40%, #050505 0 7%, transparent 8%),
    radial-gradient(ellipse at 50% 62%, transparent 0 31%, #050505 32% 38%, transparent 39%);
  transform: translateY(0.12em) rotate(-8deg);
}

.va-burst {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin: 0 0.04em;
  clip-path: polygon(50% 0, 60% 34%, 100% 24%, 70% 50%, 100% 77%, 60% 66%, 50% 100%, 40% 66%, 0 77%, 30% 50%, 0 24%, 40% 34%);
  background: #ff5fc9;
  transform: translateY(0.1em) rotate(14deg);
}

.va-orbit {
  display: inline-block;
  width: 0.96em;
  height: 0.48em;
  margin-left: 0.12em;
  border: 0.055em solid #050505;
  border-radius: 50%;
  transform: translateY(0.07em) rotate(-14deg);
}

.va-gem {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.1em;
  border: 0.055em solid #050505;
  background: #fff;
  transform: translateY(0.08em) rotate(-9deg);
}

.va-rights {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.va-banner {
  position: relative;
  min-height: clamp(370px, 55vw, 680px);
  overflow: hidden;
  background: #ff60c9;
}

.va-banner::before {
  content: "";
  position: absolute;
  inset: -2%;
  background: url("assets/vrown-supari/analogue-pink-banner.svg") center / cover no-repeat;
  transform: scale(1.02);
}

.va-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.24), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.2)),
    radial-gradient(circle at 42% 16%, rgba(255, 255, 255, 0.24), transparent 17%);
  mix-blend-mode: soft-light;
}

.va-banner-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: clamp(370px, 55vw, 680px);
  pointer-events: none;
}

.va-banner-face::before {
  content: "";
  position: absolute;
  left: 6%;
  top: 12%;
  width: 24%;
  height: 22%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  filter: blur(26px);
}

.va-banner-face::after {
  content: "";
  position: absolute;
  right: 9%;
  bottom: 10%;
  width: 22%;
  height: 24%;
  border-radius: 50%;
  background: rgba(34, 0, 102, 0.18);
  filter: blur(30px);
}

.va-intro {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.4fr);
  gap: clamp(28px, 8vw, 120px);
  padding: clamp(76px, 10vw, 138px) clamp(18px, 14vw, 196px) clamp(68px, 9vw, 122px);
  background: #fff;
}

.va-intro p,
.va-services p {
  margin: 0;
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.08;
}

.va-intro h2 {
  margin: 0;
  font-size: clamp(64px, 9vw, 138px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.78;
}

.va-services {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(360px, 1.28fr);
  gap: clamp(28px, 7vw, 110px);
  padding: 22px clamp(18px, 15vw, 205px) clamp(86px, 12vw, 150px);
}

.va-service-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.va-service-grid span {
  display: inline-grid;
  place-items: center;
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid #050505;
  border-radius: 999px;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 800;
  text-transform: uppercase;
}

.va-work {
  padding: clamp(62px, 8vw, 110px) clamp(18px, 4.8vw, 72px) clamp(76px, 11vw, 150px);
  background: #fff;
}

.va-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.va-section-head h2 {
  margin: 0;
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.va-section-head button {
  padding: 12px 0;
  font-size: 14px;
  text-transform: none;
}

.va-work-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(360px, 38vw);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 18px;
  margin-right: calc(clamp(18px, 4.8vw, 72px) * -1);
  padding-right: clamp(18px, 4.8vw, 72px);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.va-work-rail::-webkit-scrollbar {
  display: none;
}

.va-work-card {
  scroll-snap-align: start;
}

.va-work-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1.25 / 1;
  object-fit: cover;
  border-radius: 6px;
  filter: saturate(1.08) contrast(1.03);
  transition: transform 220ms ease, filter 220ms ease;
}

.va-work-card:hover img {
  transform: translateY(-6px);
  filter: saturate(1.18) contrast(1.08);
}

.va-work-card h3 {
  margin: 22px 0 8px;
  font-size: clamp(27px, 2.6vw, 42px);
  font-weight: 500;
  letter-spacing: -0.06em;
}

.va-work-card p {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 18px);
}

.va-proof {
  padding: clamp(80px, 12vw, 160px) clamp(18px, 11vw, 150px);
  background: #050505;
  color: #fff;
}

.va-proof > p {
  width: min(940px, 80vw);
  margin: 0 auto 60px;
  text-align: center;
  font-size: clamp(30px, 4.3vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.va-quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.va-quote-grid blockquote {
  min-height: 180px;
  margin: 0;
  padding: 24px;
  border: 2px solid #fff;
  border-radius: 8px;
  font-size: clamp(27px, 3vw, 46px);
  line-height: 0.9;
}

.va-quote-grid small {
  display: block;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.1;
}

.va-play {
  position: relative;
  display: grid;
  align-content: center;
  min-height: clamp(560px, 80svh, 760px);
  padding: clamp(70px, 10vw, 130px) clamp(18px, 6vw, 86px);
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 48%, #ff72ce 0 14%, transparent 15%),
    radial-gradient(circle at 22% 70%, #fef019 0 10%, transparent 11%),
    #fff;
}

.va-play h2 {
  margin: 0;
  font-size: clamp(110px, 20vw, 290px);
  line-height: 0.72;
  letter-spacing: -0.08em;
}

.va-play button {
  justify-self: start;
  min-height: 58px;
  margin-top: 34px;
  padding: 14px 22px;
  border: 2px solid #050505;
  border-radius: 7px;
  background: #fff;
  box-shadow: 8px 8px 0 #050505;
  font-size: clamp(18px, 2vw, 28px);
}

.va-play p {
  max-width: 420px;
  margin: 28px 0 0;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.05;
}

@media (max-width: 860px) {
  .site-shell[data-view="vrown"] .topbar,
  .site-shell[data-view="zungk"] .topbar,
  .site-shell[data-view="letter"] .topbar {
    top: 10px;
  }

  .site-shell[data-view="vrown"] .topbar .nav-link,
  .site-shell[data-view="zungk"] .topbar .nav-link,
  .site-shell[data-view="letter"] .topbar .nav-link {
    min-height: 48px;
    font-size: clamp(15px, 2.4vw, 22px);
  }

  .vrown-analogue-stage {
    padding-top: 66px;
  }

  .va-nav {
    grid-template-columns: 1fr auto;
    row-gap: 10px;
  }

  .va-links {
    grid-column: 1 / -1;
    order: 3;
    justify-content: space-between;
    gap: 10px;
    overflow-x: auto;
  }

  .va-connect {
    min-width: 104px;
    min-height: 42px;
    box-shadow: 5px 5px 0 #050505;
  }

  .va-hero {
    align-content: start;
    min-height: 720px;
    padding-top: 86px;
  }

  .va-logo {
    width: 94vw;
    font-size: clamp(68px, 21vw, 120px);
    letter-spacing: -0.09em;
  }

  .va-sticker {
    top: 128px;
    right: 24px;
  }

  .va-manifesto {
    width: min(650px, 92vw);
    font-size: clamp(25px, 8.4vw, 42px);
  }

  .va-rights {
    right: 10px;
  }

  .va-intro,
  .va-services {
    grid-template-columns: 1fr;
    padding-left: 18px;
    padding-right: 18px;
  }

  .va-work-rail {
    grid-auto-columns: minmax(280px, 78vw);
  }

  .va-quote-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .site-shell[data-view="vrown"] .topbar,
  .site-shell[data-view="zungk"] .topbar,
  .site-shell[data-view="letter"] .topbar {
    top: 8px;
  }

  .site-shell[data-view="vrown"] .topbar .nav-link,
  .site-shell[data-view="zungk"] .topbar .nav-link,
  .site-shell[data-view="letter"] .topbar .nav-link {
    min-height: 39px;
    padding: 5px 2px;
    font-size: clamp(9px, 2.7vw, 11px);
  }

  .vrown-analogue-stage {
    padding-top: 54px;
  }

  .va-brand {
    gap: 8px;
    font-size: 12px;
  }

  .va-brand-mark {
    width: 24px;
  }

  .va-links button {
    font-size: 11px;
  }

  .va-hero {
    min-height: 640px;
    padding-top: 54px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .va-logo {
    width: 94vw;
    font-size: clamp(66px, 21vw, 92px);
    margin-bottom: 38px;
    transform: translateX(-3px);
  }

  .va-sticker {
    top: 88px;
    right: 16px;
    padding: 7px 9px 6px;
    transform: rotate(7deg) scale(0.74);
    transform-origin: top right;
    box-shadow: 4px 4px 0 #050505;
  }

  .va-manifesto {
    width: 90vw;
    font-size: clamp(22px, 7.1vw, 31px);
    line-height: 1.12;
  }

  .va-manifesto mark {
    box-shadow: 3px 3px 0 #050505;
  }

  .va-rights {
    display: none;
  }

  .va-sticker {
    font-size: 14px;
  }

  .va-banner,
  .va-banner-face {
    min-height: 420px;
  }

  .va-intro h2 {
    font-size: clamp(48px, 15vw, 76px);
  }

  .va-proof > p {
    width: 100%;
    font-size: clamp(36px, 10vw, 52px);
  }
}

/* Keep every fixed top menu visually aligned with the HOME gate menu. */
.gate-menu,
.site-shell .topbar,
.site-shell[data-view="vrown"] .topbar,
.site-shell[data-view="zungk"] .topbar,
.site-shell[data-view="letter"] .topbar,
.site-shell[data-view="game"] .topbar {
  top: calc(var(--happly-banner-height) + 12px);
  left: 12px;
  right: 12px;
  width: auto;
  max-width: calc(100vw - 24px);
  gap: 4px;
  z-index: 13010;
}

.site-shell .topbar,
.site-shell[data-view="vrown"] .topbar,
.site-shell[data-view="zungk"] .topbar,
.site-shell[data-view="letter"] .topbar,
.site-shell[data-view="game"] .topbar {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.gate-menu button,
.gate-menu a,
.site-shell .topbar .nav-link,
.site-shell[data-view="vrown"] .topbar .nav-link,
.site-shell[data-view="zungk"] .topbar .nav-link,
.site-shell[data-view="letter"] .topbar .nav-link,
.site-shell[data-view="game"] .topbar .nav-link {
  display: grid;
  place-items: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 50px;
  padding: 8px 13px;
  border: 2px solid rgba(17, 17, 20, 0.88);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.75vw, 28px);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-shadow: 0.6px 0 0 currentColor;
  text-transform: uppercase;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: none;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}

.site-shell .topbar .nav-link.is-active,
.site-shell[data-view="vrown"] .topbar .nav-link.is-active,
.site-shell[data-view="zungk"] .topbar .nav-link.is-active,
.site-shell[data-view="letter"] .topbar .nav-link.is-active,
.site-shell[data-view="game"] .topbar .nav-link.is-active {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}

.gate-menu button:hover,
.gate-menu a:hover,
.site-shell .topbar .nav-link:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(1px);
}

@media (max-width: 920px) {
  .gate-menu,
  .site-shell .topbar,
  .site-shell[data-view="vrown"] .topbar,
  .site-shell[data-view="zungk"] .topbar,
  .site-shell[data-view="letter"] .topbar,
  .site-shell[data-view="game"] .topbar {
    top: calc(var(--happly-banner-height) + 10px);
    left: 10px;
    right: 10px;
    max-width: calc(100vw - 20px);
    flex-wrap: nowrap;
  }

  .gate-menu button,
  .gate-menu a,
  .site-shell .topbar .nav-link,
  .site-shell[data-view="vrown"] .topbar .nav-link,
  .site-shell[data-view="zungk"] .topbar .nav-link,
  .site-shell[data-view="letter"] .topbar .nav-link,
  .site-shell[data-view="game"] .topbar .nav-link {
    min-height: 48px;
    padding: 7px 9px;
    font-size: clamp(15px, 2.4vw, 22px);
  }
}

@media (max-width: 640px) {
  .gate-menu,
  .site-shell .topbar,
  .site-shell[data-view="vrown"] .topbar,
  .site-shell[data-view="zungk"] .topbar,
  .site-shell[data-view="letter"] .topbar,
  .site-shell[data-view="game"] .topbar {
    top: 8px;
    left: 6px;
    right: 6px;
    width: auto;
    max-width: none;
    gap: 3px;
  }

  .gate-menu,
  .site-shell .topbar .nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
  }

  .gate-menu button,
  .gate-menu a,
  .site-shell .topbar .nav-link,
  .site-shell[data-view="vrown"] .topbar .nav-link,
  .site-shell[data-view="zungk"] .topbar .nav-link,
  .site-shell[data-view="letter"] .topbar .nav-link,
  .site-shell[data-view="game"] .topbar .nav-link {
    width: 100%;
    min-width: 0;
    min-height: 39px;
    padding: 5px 2px;
    overflow: hidden;
    font-size: clamp(9px, 2.7vw, 11px);
    white-space: nowrap;
  }
}

/* VROWN Analogue fidelity pass. */
.site-shell[data-view="vrown"] > .topbar {
  display: none !important;
}

.site-shell[data-view="vrown"] .vrown-analogue-stage {
  padding-top: 0;
}

.site-shell[data-view="vrown"] .va-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 220;
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) auto minmax(146px, 1fr);
  align-items: center;
  gap: clamp(14px, 2vw, 32px);
  padding: 13px clamp(14px, 1.6vw, 22px) 9px;
  background: rgba(255, 255, 255, 0.92);
  color: #050505;
}

.site-shell[data-view="vrown"] .va-brand {
  gap: 12px;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(13px, 1vw, 16px);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.site-shell[data-view="vrown"] .va-brand-mark {
  width: 29px;
  border-color: #050505;
  border-radius: 50%;
}

.site-shell[data-view="vrown"] .va-links {
  gap: clamp(14px, 2.15vw, 34px);
}

.site-shell[data-view="vrown"] .va-links a,
.site-shell[data-view="vrown"] .va-connect {
  position: relative;
  display: inline-grid;
  align-items: start;
  min-height: auto;
  height: 22px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #050505;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(11px, 0.82vw, 13px);
  font-style: normal;
  font-weight: 900;
  line-height: 22px;
  text-decoration: none;
  text-transform: uppercase;
}

.site-shell[data-view="vrown"] .va-links a span,
.site-shell[data-view="vrown"] .va-connect span {
  display: block;
  height: 22px;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-shell[data-view="vrown"] .va-links a:hover span,
.site-shell[data-view="vrown"] .va-connect:hover span {
  transform: translateY(-22px);
}

.site-shell[data-view="vrown"] .va-connect {
  justify-self: end;
  display: grid;
  min-width: 122px;
  height: 48px;
  place-items: start center;
  padding: 12px 18px;
  border: 2px solid #050505;
  border-radius: 7px;
  background: #fff;
  box-shadow: 8px 8px 0 #050505;
  font-size: clamp(14px, 1.18vw, 17px);
  line-height: 22px;
}

.site-shell[data-view="vrown"] .va-connect:hover {
  transform: translate(3px, 3px);
  box-shadow: 5px 5px 0 #050505;
}

.site-shell[data-view="vrown"] .va-hero {
  min-height: clamp(650px, 93svh, 900px);
  padding-top: clamp(116px, 14vh, 154px);
}

.site-shell[data-view="vrown"] .va-logo {
  width: min(1210px, 94vw);
  margin-bottom: clamp(42px, 7.4vh, 84px);
  line-height: 1;
}

.site-shell[data-view="vrown"] .va-logo::after {
  display: none;
}

.site-shell[data-view="vrown"] .va-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.site-shell[data-view="vrown"] .va-sticker {
  animation: vaStickerFloat 4.4s ease-in-out infinite;
}

.site-shell[data-view="vrown"] .va-manifesto {
  width: min(1110px, 82vw);
}

.site-shell[data-view="vrown"] .va-banner::before {
  animation: vaBannerDrift 9s ease-in-out infinite alternate;
}

.site-shell[data-view="vrown"] .va-work-rail {
  grid-auto-columns: minmax(340px, 31vw);
}

.va-client-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 34px;
}

.va-client-strip span {
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 900;
}

.va-proof-media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 auto clamp(42px, 6vw, 80px);
}

.va-proof-media img {
  display: block;
  width: 100%;
  border-radius: 10px;
  transform: rotate(-1.5deg);
}

.va-proof-media img:nth-child(2) {
  transform: rotate(2deg) translateY(18px);
}

.va-proof-media img:nth-child(3) {
  transform: rotate(-2.5deg);
}

.site-shell[data-view="vrown"] .va-quote-grid {
  grid-template-columns: repeat(4, 1fr);
}

.site-shell[data-view="vrown"] .va-play {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(360px, 1.05fr);
  gap: clamp(24px, 5vw, 74px);
  align-items: center;
  background:
    radial-gradient(circle at 78% 40%, rgba(255, 114, 206, 0.95) 0 12%, transparent 13%),
    radial-gradient(circle at 28% 74%, #fef019 0 10%, transparent 11%),
    linear-gradient(115deg, #fff 0 56%, #ffbde7 56% 100%);
}

.va-play-copy {
  position: relative;
  z-index: 1;
}

.va-play-copy h2 {
  pointer-events: none;
}

.va-play-copy button {
  position: relative;
  z-index: 3;
}

.va-play-machine {
  position: relative;
  z-index: 4;
  min-height: clamp(380px, 42vw, 560px);
  border: 3px solid #050505;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 28%, #fef019 0 12%, transparent 13%),
    radial-gradient(circle at 78% 68%, #6a5cff 0 16%, transparent 17%),
    #fff;
  box-shadow: 14px 14px 0 #050505;
  overflow: hidden;
}

.va-play-machine strong {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 2;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1;
  text-transform: uppercase;
}

.va-play-machine small {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.va-pop-target {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: clamp(92px, 10vw, 142px);
  aspect-ratio: 1;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 3px solid #050505 !important;
  border-radius: 50% !important;
  background: #ff5fc9 !important;
  box-shadow: 8px 8px 0 #050505 !important;
  color: #050505;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(18px, 2vw, 29px) !important;
  transition: transform 160ms ease, opacity 160ms ease;
}

.va-pop-target.one { left: 12%; top: 28%; }
.va-pop-target.two { right: 15%; top: 18%; background: #fef019 !important; }
.va-pop-target.three { left: 30%; bottom: 18%; background: #6a5cff !important; color: #fff; }
.va-pop-target.four { right: 19%; bottom: 23%; background: #b5ff64 !important; }

.va-pop-target:hover,
.va-pop-target.is-popped {
  transform: translate(5px, 5px) scale(0.92) rotate(-4deg);
  box-shadow: 3px 3px 0 #050505 !important;
}

.va-membership {
  overflow: hidden;
  background: #050505;
  color: #fff;
}

.va-membership-marquee {
  display: flex;
  width: max-content;
  gap: clamp(28px, 5vw, 78px);
  padding: clamp(28px, 5vw, 70px) 0;
  animation: vaMembershipMarquee 18s linear infinite;
}

.va-membership-marquee span {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(66px, 12vw, 180px);
  line-height: 0.8;
  letter-spacing: 0;
  text-transform: uppercase;
}

.va-community {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(240px, 0.5fr) auto;
  align-items: end;
  gap: 24px;
  padding: clamp(44px, 7vw, 90px) clamp(18px, 5vw, 72px);
  border-top: 2px solid #fff;
}

.va-community h2 {
  margin: 0;
  font-size: clamp(44px, 7vw, 112px);
  line-height: 0.86;
  letter-spacing: -0.06em;
}

.va-community p {
  margin: 0;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.05;
}

.va-community button {
  min-width: 118px;
  min-height: 56px;
  border: 2px solid #fff;
  border-radius: 7px;
  background: #fff;
  color: #050505;
  box-shadow: 8px 8px 0 #ff5fc9;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 900;
}

.va-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding: 0 clamp(18px, 5vw, 72px) 38px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

@keyframes vaStickerFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes vaBannerDrift {
  from { transform: scale(1.04) translateX(-1.5%); }
  to { transform: scale(1.08) translateX(1.5%); }
}

@keyframes vaMembershipMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 980px) {
  .site-shell[data-view="vrown"] .va-nav {
    grid-template-columns: 1fr auto;
    row-gap: 10px;
  }

  .site-shell[data-view="vrown"] .va-links {
    grid-column: 1 / -1;
    order: 3;
    justify-content: start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .site-shell[data-view="vrown"] .va-hero {
    padding-top: 148px;
  }

  .site-shell[data-view="vrown"] .va-quote-grid,
  .va-proof-media,
  .site-shell[data-view="vrown"] .va-play,
  .va-community {
    grid-template-columns: 1fr;
  }

  .va-play-machine {
    min-height: 420px;
  }
}

@media (max-width: 560px) {
  .site-shell[data-view="vrown"] .va-nav {
    padding: 10px 12px 8px;
  }

  .site-shell[data-view="vrown"] .va-brand {
    font-size: 12px;
  }

  .site-shell[data-view="vrown"] .va-brand-mark {
    width: 24px;
  }

  .site-shell[data-view="vrown"] .va-connect {
    min-width: 96px;
    height: 40px;
    padding: 8px 12px;
    box-shadow: 5px 5px 0 #050505;
  }

  .site-shell[data-view="vrown"] .va-links a {
    font-size: 11px;
  }

  .site-shell[data-view="vrown"] .va-hero {
    min-height: 680px;
    padding-top: 150px;
  }

  .site-shell[data-view="vrown"] .va-logo {
    width: 96vw;
    margin-bottom: 36px;
  }

  .site-shell[data-view="vrown"] .va-sticker {
    top: 148px;
    right: 12px;
    transform: rotate(7deg) scale(0.72);
  }

  .site-shell[data-view="vrown"] .va-manifesto {
    width: 92vw;
    font-size: clamp(23px, 7vw, 31px);
  }

  .site-shell[data-view="vrown"] .va-work-rail {
    grid-auto-columns: minmax(282px, 78vw);
  }

  .va-membership-marquee span {
    font-size: clamp(52px, 18vw, 88px);
  }
}

/* Analogue Studio clone for the ZUNGK route */
.site-shell[data-view="zungk"] > .topbar {
  display: none;
}

body:has(.site-shell[data-view="zungk"]) .app-menu {
  display: none;
}

body.is-as-tour-open {
  overflow: hidden;
}

.zungk-view {
  padding-top: 0;
  background: #fff;
  color: #050505;
}

.analogue-studio {
  min-height: 100svh;
  overflow-x: hidden;
  background: #fff;
  color: #050505;
  font-family: "MetroSans", Inter, Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

.analogue-studio button,
.analogue-studio a {
  font: inherit;
}

.as-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(520px, 1.8fr) auto;
  align-items: center;
  gap: 28px;
  padding: 18px 10px 0;
  letter-spacing: 0;
}

.analogue-studio .as-nav {
  display: grid;
}

.as-brand,
.as-connect,
.as-links a,
.as-tour-link,
.as-job button,
.as-play-connect,
.as-pop-target,
.as-game-start,
.as-game-add,
.as-game-back,
.as-game-quit {
  color: #050505;
  text-decoration: none;
}

.as-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.as-brand-mark {
  position: relative;
  width: 30px;
  height: 27px;
  border: 1.5px solid #050505;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.as-brand-mark::before,
.as-brand-mark::after {
  content: "";
  position: absolute;
  top: 13px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #050505;
}

.as-brand-mark::before {
  left: 9px;
}

.as-brand-mark::after {
  right: 9px;
}

.as-links {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 32px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.as-links a {
  display: grid;
  place-items: start center;
  height: 26px;
  padding: 3px 0;
  overflow: hidden;
  border: 1.5px solid transparent;
  border-radius: 999px;
  line-height: 20px;
  text-transform: uppercase;
}

.as-links a span,
.as-connect span {
  display: block;
  height: 22px;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.as-links a:hover span,
.as-connect:hover span {
  transform: translateY(-22px);
}

.as-links a.is-active {
  padding-inline: 14px;
  border-color: #050505;
}

.as-connect {
  justify-self: end;
  position: relative;
  display: block;
  min-width: 122px;
  height: 48px;
  min-height: 0;
  padding: 12px 20px;
  overflow: hidden;
  border: 2px solid #050505;
  border-radius: 8px;
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  box-shadow: 9px 7px 0 #050505;
  cursor: pointer;
}

.analogue-studio .as-connect span {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: auto;
  text-align: center;
  transform: translateY(-50%);
}

.analogue-studio .as-connect span + span {
  transform: translateY(160%);
}

.analogue-studio .as-connect:hover span {
  transform: translateY(-220%);
}

.analogue-studio .as-connect:hover span + span {
  transform: translateY(-50%);
}

.as-main {
  position: relative;
}

.as-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 96px 24px 40px;
}

.as-hero h1 {
  margin: 0;
  width: min(1120px, 92vw);
  font-size: 13rem;
  font-weight: 500;
  line-height: 0.86;
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
}

.as-hero h1 span {
  display: block;
}

.as-services-hero {
  position: relative;
  place-items: stretch;
  align-items: start;
  min-height: 100svh;
  overflow: hidden;
  padding: 250px 22px 92px;
}

.as-services-hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: start;
  width: min(1320px, calc(100% - 120px));
  margin: 0 auto;
}

.as-services-hero h1 {
  width: 100%;
  margin: 0;
  font-size: 72px !important;
  font-weight: 700;
  line-height: 0.95;
  text-align: left;
  text-transform: uppercase;
}

.as-services-hero h1 span {
  display: block;
  white-space: nowrap;
}

.as-inline-icon {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  color: #050505;
  line-height: 1;
}

.as-globe {
  position: relative;
  width: 0.86em;
  height: 0.86em;
  margin-right: 0.08em;
  transform: translateY(-0.05em);
}

.as-globe lottie-player {
  width: 100%;
  height: 100%;
}

.as-globe-fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 8;
}

.as-arrow {
  width: 0.72em;
  height: 0.52em;
  margin-left: 0.1em;
  transform: translateY(-0.04em);
}

.as-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.as-services-support {
  position: absolute;
  left: clamp(48px, 4.2vw, 60px);
  bottom: clamp(54px, 6vh, 72px);
  z-index: 2;
  width: min(560px, 45vw);
  margin: 0;
}

.as-services-support p {
  width: 100%;
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
}

.as-services-support p span {
  display: block;
}

.as-services-media {
  position: absolute;
  z-index: 1;
  width: min(640px, 46vw);
  aspect-ratio: 1;
  opacity: 1;
  pointer-events: none;
}

.as-services-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.as-services-media.one {
  top: clamp(76px, 9vh, 112px);
  right: 0;
  transform: scale(1.25);
  transform-origin: top right;
}

.as-rights {
  position: fixed;
  top: 50%;
  right: 19px;
  z-index: 15;
  margin: 0;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.as-studio-intro,
.as-people,
.as-jobs,
.as-team,
.as-play,
.as-membership {
  position: relative;
  width: min(1160px, calc(100% - 120px));
  margin: 0 auto;
}

.as-studio-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  gap: clamp(60px, 11vw, 160px);
  padding: 72px 0 120px;
}

.as-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 10px;
  border: 1.4px solid #050505;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
}

.as-studio-intro h2,
.as-people h2,
.as-jobs > h2,
.as-play h2 {
  margin: 28px 0 0;
  font-size: 6rem;
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: 0;
  text-transform: uppercase;
}

.as-intro-copy {
  padding-top: 44px;
}

.as-intro-copy p,
.as-process p,
.as-play p {
  margin: 0 0 22px;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: 0;
}

.as-tour-link {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25em;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  cursor: pointer;
}

.as-tour-frame {
  grid-column: 1 / -1;
  position: relative;
  min-height: 575px;
  margin: 58px auto 0;
  width: min(1000px, 88vw);
  overflow: hidden;
  border-radius: 8px;
  background: #050505;
}

.as-tour-close {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 5;
  display: none;
  width: 56px !important;
  height: 56px !important;
  inline-size: 56px;
  block-size: 56px;
  min-width: 56px;
  min-height: 56px;
  padding: 0;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #050505;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.as-tour-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 260ms ease;
}

.as-tour-frame::before {
  content: "PLAY";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease, transform 220ms ease;
}

.as-tour-frame.is-playing::before {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
}

.as-tour-frame.is-playing {
  position: fixed;
  inset: 0;
  z-index: 70;
  width: 100vw;
  min-height: 100svh;
  margin: 0;
  border-radius: 0;
}

.as-tour-frame.is-playing .as-tour-close {
  display: grid;
}

.as-tour-frame.is-playing .as-tour-video {
  opacity: 0.34;
}

.as-tour-strip {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  transform: translate(-50%, -50%) rotate(-4deg);
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.as-tour-frame.is-playing .as-tour-strip {
  animation: asTour 18s linear infinite;
}

.as-tour-strip img {
  width: min(520px, 44vw);
  height: 330px;
  object-fit: cover;
  display: block;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.as-tour-strip img:nth-child(3n) {
  height: 390px;
  transform: rotate(5deg);
}

.as-tour-strip img:nth-child(4n) {
  width: min(390px, 34vw);
  transform: rotate(-7deg);
}

.as-tour-strip img:nth-child(5n) {
  transform: translateY(46px) rotate(3deg);
}

.as-people {
  padding: 40px 0 120px;
}

.as-people-head {
  position: relative;
  min-height: 390px;
}

.as-puff {
  position: absolute;
  right: 8%;
  top: 54px;
  width: min(350px, 28vw);
  height: auto;
  object-fit: contain;
}

.as-people-photo {
  display: block;
  width: 100%;
  height: min(650px, 52vw);
  object-fit: cover;
  border-radius: 7px;
}

.as-process {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 0.9fr);
  gap: clamp(70px, 12vw, 170px);
  align-items: start;
  padding: 90px 0 0;
}

.as-process .as-puff.small {
  position: static;
  width: min(380px, 34vw);
}

.as-process h3 {
  margin: 24px 0 0;
  font-size: 4.25rem;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0;
}

.as-jobs {
  padding: 40px 0 120px;
}

.as-jobs > h2 {
  margin: 0 auto 150px;
  max-width: 960px;
  text-align: center;
}

.as-section-title {
  margin: 84px 0 34px;
  font-size: 28px;
  font-weight: 500;
  text-transform: uppercase;
}

.as-job {
  border-top: 1.5px solid #050505;
}

.as-job:last-child {
  border-bottom: 1.5px solid #050505;
}

.as-job-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 44px 0;
}

.as-job h3 {
  margin: 0;
  font-size: 5rem;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0;
}

.as-job-head p {
  margin: 14px 0 0;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: 0;
}

.as-job button {
  min-width: 144px;
  min-height: 54px;
  border: 2px solid #050505;
  border-radius: 999px;
  background: #fff;
  font-size: 26px;
  text-transform: uppercase;
  cursor: pointer;
}

.as-job-body {
  display: none;
  padding: 8px 0 54px;
}

.as-job.is-open .as-job-body {
  display: block;
}

.as-job-body h4 {
  margin: 0 0 22px;
  font-size: 4rem;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0;
}

.as-job-body p,
.as-job-body a {
  max-width: 900px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: #050505;
}

.as-team {
  width: 100%;
  padding: 30px 0 190px;
  border-top: 1px solid #050505;
  border-bottom: 1px solid #050505;
}

.as-team .as-pill {
  margin-left: 60px;
}

.as-team-marquee {
  display: flex;
  gap: 28px;
  overflow: hidden;
  margin-top: 40px;
  white-space: nowrap;
}

.as-team-marquee span {
  flex: 0 0 auto;
  font-size: 3.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  animation: asMarquee 28s linear infinite;
}

.as-play {
  min-height: 920px;
  padding: 120px 0;
}

.as-play-word {
  position: relative;
  min-height: 520px;
}

.as-play h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 14rem;
  line-height: 0.78;
}

.as-play h2:last-child {
  margin-left: 43%;
}

.as-play-word img {
  position: absolute;
  left: 13%;
  top: 42%;
  width: min(360px, 28vw);
  transform: rotate(-12deg);
}

.as-play-connect {
  min-height: 54px;
  padding: 0 24px;
  border: 2px solid #050505;
  border-radius: 999px;
  background: #fff;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
}

.as-play-connect {
  display: inline-flex;
  gap: 22px;
  overflow: hidden;
}

.as-play p {
  width: min(360px, 70vw);
  margin-top: 24px;
}

.as-play-machine {
  position: relative;
  width: min(620px, 82vw);
  min-height: 430px;
  margin: 84px auto 0;
  border: 3px solid #050505;
  border-radius: 8px;
  background:
    radial-gradient(circle at 28% 35%, #baff00 0 14%, transparent 15%),
    radial-gradient(circle at 74% 67%, #ff64cb 0 17%, transparent 18%),
    #fff;
  box-shadow: 14px 14px 0 #050505;
  transform: rotate(-1deg);
}

.as-play-machine strong {
  position: absolute;
  left: 22px;
  top: 20px;
  font-size: 28px;
  font-weight: 600;
}

.as-game-start,
.as-game-add,
.as-game-back,
.as-game-quit {
  position: absolute;
  z-index: 3;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid #050505;
  border-radius: 999px;
  background: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.as-game-start {
  left: 22px;
  top: 64px;
  background: #baff00;
}

.as-game-add {
  right: 24px;
  top: 22px;
}

.as-game-back {
  left: 50%;
  bottom: 82px;
  transform: translateX(-50%);
}

.as-game-quit {
  right: 22px;
  bottom: 22px;
  background: #050505;
  color: #fff;
}

.as-game-result {
  position: absolute;
  left: 22px;
  bottom: 116px;
  display: grid;
  gap: 4px;
  font-size: 18px;
}

.as-game-result b {
  font-size: 25px;
}

.as-play-machine small,
.as-play-machine em {
  position: absolute;
  left: 22px;
  z-index: 3;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
}

.as-play-machine small {
  bottom: 52px;
}

.as-play-machine em {
  bottom: 24px;
}

.as-pop-target {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(92px, 11vw, 138px);
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 3px solid #050505;
  border-radius: 50%;
  background: #ff64cb;
  box-shadow: 8px 8px 0 #050505;
  font-size: clamp(17px, 1.65vw, 25px);
  font-weight: 700;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
  cursor: pointer;
}

.as-pop-target.one {
  left: 16%;
  top: 28%;
}

.as-pop-target.two {
  right: 13%;
  top: 24%;
  background: #fef019;
}

.as-pop-target.three {
  left: 42%;
  bottom: 24%;
  background: #6e61ff;
  color: #fff;
}

.as-pop-target:hover,
.as-pop-target.is-popped {
  transform: translate(4px, 4px) scale(0.94);
  box-shadow: 4px 4px 0 #050505;
}

.as-play-machine.is-quiet .as-pop-target {
  opacity: 0.38;
}

.as-membership {
  width: 100%;
  min-height: 760px;
  padding: 80px 0 38px;
  background: #050505;
  color: #fff;
}

.as-membership-marquee {
  display: flex;
  overflow: hidden;
  gap: 18px;
  white-space: nowrap;
}

.as-membership-marquee span {
  flex: 0 0 auto;
  font-size: 9rem;
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: 0;
  animation: asMarquee 22s linear infinite reverse;
}

.as-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  width: min(1120px, calc(100% - 80px));
  margin: 96px auto 0;
  font-size: 14px;
  letter-spacing: 0;
}

@keyframes asTour {
  from {
    transform: translate(-42%, -50%) rotate(-4deg);
  }

  to {
    transform: translate(-64%, -50%) rotate(-4deg);
  }
}

@keyframes asMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% - 28px));
  }
}

@media (max-width: 920px) {
  .as-nav {
    grid-template-columns: 1fr auto;
    gap: 16px;
  }

  .as-links {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .as-links::-webkit-scrollbar {
    display: none;
  }

  .as-connect {
    grid-column: 2;
    grid-row: 1;
  }

  .as-hero h1 {
    font-size: 7.5rem;
  }

  .as-services-hero {
    padding: 132px 18px 64px;
  }

  .as-services-hero-copy {
    width: min(100% - 28px, 820px);
  }

  .as-services-hero h1 {
    font-size: 58px !important;
    line-height: 0.88;
  }

  .as-services-hero h1 span {
    white-space: normal;
  }

  .as-services-support {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(100% - 28px, 720px);
    margin-top: 44px;
  }

  .as-services-support p {
    max-width: 410px;
    font-size: 23px;
  }

  .as-services-media {
    width: min(480px, 70vw);
    opacity: 0.84;
  }

  .as-services-media.one {
    top: 124px;
    right: -52px;
    transform: scale(1.14);
  }

  .as-studio-intro h2,
  .as-people h2,
  .as-jobs > h2,
  .as-play h2 {
    font-size: 4.6rem;
  }

  .as-process h3,
  .as-job-body h4 {
    font-size: 3.6rem;
  }

  .as-job h3 {
    font-size: 4.1rem;
  }

  .as-play h2 {
    font-size: 8rem;
  }

  .as-membership-marquee span {
    font-size: 5.2rem;
  }

  .as-studio-intro,
  .as-process {
    grid-template-columns: 1fr;
  }

  .as-puff {
    right: 0;
    width: min(280px, 42vw);
  }
}

@media (max-width: 640px) {
  .as-nav {
    padding: 12px 10px 0;
  }

  .as-brand {
    font-size: 12px;
  }

  .as-connect {
    height: 38px;
    min-height: 0;
    padding-inline: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 12px;
    box-shadow: 5px 5px 0 #050505;
  }

  .analogue-studio .as-connect {
    width: 90px;
    min-width: 90px;
    height: 38px;
    min-height: 0;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 22px;
  }

  .as-links {
    gap: 14px;
    font-size: 11px;
  }

  .as-hero h1 {
    font-size: 56px;
  }

  .as-services-hero {
    min-height: 100svh;
    padding-top: 86px;
    padding-bottom: 54px;
  }

  .as-services-hero-copy {
    width: min(100% - 18px, 360px);
  }

  .as-services-hero h1 {
    font-size: 39px !important;
    line-height: 0.94;
    text-align: left;
  }

  .as-services-hero h1 span {
    display: inline;
  }

  .as-services-support {
    width: min(100% - 18px, 360px);
    margin-top: 142px;
  }

  .as-services-support p {
    width: min(300px, 82vw);
    font-size: 19px;
    line-height: 1.08;
  }

  .as-globe {
    width: 0.72em;
    height: 0.72em;
  }

  .as-arrow {
    width: 0.62em;
    height: 0.46em;
  }

  .as-services-media {
    width: 390px;
    opacity: 0.9;
  }

  .as-services-media.one {
    top: 120px;
    right: -140px;
    transform: scale(1.16);
  }

  .as-rights {
    right: 8px;
    font-size: 9px;
  }

  .as-studio-intro,
  .as-people,
  .as-jobs,
  .as-play {
    width: min(100% - 28px, 620px);
  }

  .as-studio-intro {
    padding-top: 40px;
    gap: 28px;
  }

  .as-tour-frame {
    width: 100%;
    min-height: 360px;
  }

  .as-tour-frame.is-playing {
    width: 100vw;
    min-height: 100svh;
  }

  .as-tour-close {
    top: 14px;
    right: 14px;
    width: 46px !important;
    height: 46px !important;
    inline-size: 46px;
    block-size: 46px;
    min-width: 46px;
    min-height: 46px;
    font-size: 28px;
  }

  .as-tour-strip img {
    width: 280px;
    height: 210px;
  }

  .as-people-head {
    min-height: 360px;
  }

  .as-people-photo {
    height: 360px;
  }

  .as-process .as-puff.small {
    width: 220px;
  }

  .as-jobs > h2 {
    margin-bottom: 90px;
  }

  .as-studio-intro h2,
  .as-people h2,
  .as-jobs > h2,
  .as-play h2 {
    font-size: 3.3rem;
  }

  .as-intro-copy p,
  .as-process p,
  .as-play p {
    font-size: 1.35rem;
  }

  .as-process h3,
  .as-job-body h4 {
    font-size: 2.8rem;
  }

  .as-job-head {
    grid-template-columns: 1fr;
    padding: 32px 0;
  }

  .as-job button {
    width: 126px;
    min-height: 46px;
    font-size: 20px;
  }

  .as-job h3 {
    font-size: 3rem;
  }

  .as-job-head p,
  .as-job-body p,
  .as-job-body a {
    font-size: 1.25rem;
  }

  .as-team .as-pill {
    margin-left: 14px;
  }

  .as-play {
    min-height: 680px;
  }

  .as-play-word {
    min-height: 360px;
  }

  .as-play h2 {
    font-size: 5.4rem;
  }

  .as-play h2:last-child {
    margin-left: 18%;
  }

  .as-play-word img {
    left: 8%;
    width: 190px;
  }

  .as-play-machine {
    width: 100%;
    min-height: 390px;
    margin-top: 56px;
    box-shadow: 8px 8px 0 #050505;
  }

  .as-play-machine strong {
    font-size: 22px;
  }

  .as-game-start,
  .as-game-add,
  .as-game-back,
  .as-game-quit {
    min-height: 38px;
    padding-inline: 11px;
    font-size: 13px;
  }

  .as-game-add {
    right: 14px;
  }

  .as-pop-target {
    width: 82px;
    font-size: 16px;
    box-shadow: 5px 5px 0 #050505;
  }

  .as-pop-target.one {
    left: 8%;
    top: 31%;
  }

  .as-pop-target.two {
    right: 8%;
    top: 30%;
  }

  .as-pop-target.three {
    left: 35%;
    bottom: 27%;
  }

  .as-game-result {
    bottom: 105px;
    font-size: 15px;
  }

  .as-game-result b {
    font-size: 20px;
  }

  .as-footer {
    width: calc(100% - 28px);
  }

  .as-membership-marquee span {
    font-size: 4.2rem;
  }

}

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

/* VROWN exact Analogue clone pass. */
@font-face {
  font-family: "MetroSans";
  src: url("assets/analogue-clone/MetroSansRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MetroSans";
  src: url("assets/analogue-clone/MetroSansMedium.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MetroSans";
  src: url("assets/analogue-clone/MetroSansSemiBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MetroSans";
  src: url("assets/analogue-clone/MetroSansBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ItalianMono";
  src: url("assets/analogue-clone/ItalianPlateNo1MonoMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.site-shell[data-view="vrown"] .va-old-stage {
  display: none !important;
}

.site-shell[data-view="vrown"] .vrown-supari {
  background: #fff;
  color: #050505;
  font-family: "MetroSans", Arial, sans-serif;
}

.site-shell[data-view="vrown"] .va-clone-stage {
  position: relative;
  min-height: 100svh;
  padding-top: 0;
  overflow: visible;
  background: #fff;
  color: #050505;
  font-family: "MetroSans", Arial, sans-serif;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 240;
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: 22px;
  min-height: 72px;
  padding: 13px 12px 10px 9px;
  background: #fff;
  color: #050505;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-brand,
.site-shell[data-view="vrown"] .va-clone-stage .va-links a,
.site-shell[data-view="vrown"] .va-clone-stage .va-connect,
.site-shell[data-view="vrown"] .va-clone-stage .va-section-head button,
.site-shell[data-view="vrown"] .va-clone-stage .va-play button,
.site-shell[data-view="vrown"] .va-clone-stage .va-community button {
  border: 0;
  background: transparent;
  color: inherit;
  font-family: "MetroSans", Arial, sans-serif;
  letter-spacing: 0;
  text-decoration: none;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-brand b {
  font-weight: 700;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-brand-mark {
  position: relative;
  display: block;
  width: 30px;
  height: 31px;
  border: 0;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #050505;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-brand-mark::before {
  content: "";
  position: absolute;
  inset: 3px 4px 3px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #fff;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-brand-eye,
.site-shell[data-view="vrown"] .va-clone-stage .va-brand-mouth {
  position: absolute;
  z-index: 1;
  display: block;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-brand-eye {
  top: 17px;
  width: 3px;
  height: 5px;
  border-radius: 50%;
  background: #050505;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-brand-eye-left {
  left: 11px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-brand-eye-right {
  right: 11px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-brand-mouth {
  left: 9px;
  bottom: 7px;
  width: 12px;
  height: 6px;
  border-bottom: 1.5px solid #050505;
  border-radius: 0 0 999px 999px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.55vw, 36px);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-links a,
.site-shell[data-view="vrown"] .va-clone-stage .va-connect {
  position: relative;
  display: inline-grid;
  height: 23px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 23px;
  text-transform: uppercase;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-links a span,
.site-shell[data-view="vrown"] .va-clone-stage .va-connect span,
.site-shell[data-view="vrown"] .va-clone-stage .va-play button span {
  display: block;
  height: 23px;
  transition: transform 190ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-links a:hover span,
.site-shell[data-view="vrown"] .va-clone-stage .va-connect:hover span,
.site-shell[data-view="vrown"] .va-clone-stage .va-play button:hover span {
  transform: translateY(-23px);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-connect {
  justify-self: end;
  display: grid;
  min-width: 121px;
  height: 48px;
  place-items: start center;
  padding: 12px 20px;
  overflow: hidden;
  border: 2px solid #050505;
  border-radius: 7px;
  background: #fff;
  box-shadow: 10px 10px 0 #050505;
  font-size: 18px;
  line-height: 23px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-connect:hover {
  transform: translate(4px, 4px);
  box-shadow: 6px 6px 0 #050505;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-main {
  background: #fff;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-hero {
  position: relative;
  display: flex;
  min-height: 613px;
  padding: 98px 22px 70px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  background: #fff;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: min(820px, 73vw);
  height: 195px;
  margin: 0 auto 34px;
  color: #000;
  line-height: 0.72;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo::after {
  display: none;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-triangle {
  position: relative;
  display: block;
  flex: 0 0 148px;
  width: 150px;
  height: 132px;
  margin-right: 12px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #000;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-triangle::before,
.site-shell[data-view="vrown"] .va-clone-stage .va-logo-triangle::after {
  content: "";
  position: absolute;
  top: 73px;
  z-index: 2;
  width: 10px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-triangle::before {
  left: 51px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-triangle::after {
  right: 51px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-triangle span {
  position: absolute;
  left: 36px;
  bottom: 28px;
  z-index: 2;
  width: 78px;
  height: 33px;
  border-bottom: 7px solid #fff;
  border-radius: 0 0 999px 999px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-zig {
  position: relative;
  z-index: 2;
  display: block;
  flex: 0 0 70px;
  width: 78px;
  height: 94px;
  margin: 0 8px 6px -4px;
  background:
    linear-gradient(90deg, #000 0 16px, transparent 16px 100%) 0 0 / 16px 100%,
    linear-gradient(#000 0 0) 0 0 / 78px 16px,
    linear-gradient(#000 0 0) 16px 16px / 62px 16px,
    linear-gradient(#000 0 0) 32px 32px / 46px 16px,
    linear-gradient(#000 0 0) 48px 48px / 30px 16px,
    linear-gradient(#000 0 0) 64px 64px / 14px 16px;
  background-repeat: no-repeat;
  transform: skewX(2deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-word {
  display: block;
  flex: 0 1 auto;
  font-family: "Arial Black", "MetroSans", sans-serif;
  font-size: clamp(100px, 12.2vw, 166px);
  font-weight: 900;
  line-height: 0.72;
  letter-spacing: 0;
  text-transform: lowercase;
  transform: scaleX(0.94);
  transform-origin: left bottom;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-sticker {
  position: absolute;
  right: -8px;
  top: 21px;
  z-index: 5;
  width: 132px;
  transform: rotate(7deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-sticker img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-manifesto {
  width: min(930px, 82vw);
  margin: 0 auto;
  color: #050505;
  font-size: clamp(31px, 3.18vw, 43px);
  font-weight: 400;
  line-height: 1.16;
  text-align: center;
  text-transform: uppercase;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-manifesto sup {
  display: inline-block;
  margin-left: 2px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  vertical-align: top;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-word-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 42px;
  padding: 0 12px 3px;
  border: 2px solid #050505;
  border-radius: 7px;
  background: #fff;
  box-shadow: 6px 7px 0 #050505;
  color: #050505;
  font-size: 0.92em;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: 0.06em;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-pill {
  display: inline-block;
  padding: 0 12px 3px;
  border: 2px solid #050505;
  border-radius: 999px;
  line-height: 0.92;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-under {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-outline {
  color: transparent;
  -webkit-text-stroke: 1.4px #050505;
  text-decoration: underline;
  text-decoration-color: #050505;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-plus {
  display: inline-block;
  font-weight: 700;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-smile,
.site-shell[data-view="vrown"] .va-clone-stage .va-diamond,
.site-shell[data-view="vrown"] .va-clone-stage .va-globe,
.site-shell[data-view="vrown"] .va-clone-stage .va-fist,
.site-shell[data-view="vrown"] .va-clone-stage .va-forward {
  display: inline-block;
  vertical-align: -0.12em;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-smile {
  width: 42px;
  height: 23px;
  border-bottom: 4px solid #050505;
  border-radius: 0 0 999px 999px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-smile::before,
.site-shell[data-view="vrown"] .va-clone-stage .va-smile::after {
  width: 5px;
  height: 9px;
  background: #050505;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-forward {
  width: 44px;
  height: 22px;
  background:
    linear-gradient(90deg, transparent 0 8px, #050505 8px 11px, transparent 11px 16px, #050505 16px 19px, transparent 19px),
    linear-gradient(90deg, #050505 0 24px, transparent 24px),
    linear-gradient(45deg, transparent 0 45%, #050505 45% 55%, transparent 55%);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-diamond {
  width: 31px;
  height: 27px;
  border: 2px solid #050505;
  clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-fist {
  width: 38px;
  height: 42px;
  border: 3px solid #050505;
  border-radius: 44% 44% 46% 46%;
  transform: rotate(-8deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-globe {
  width: 34px;
  height: 34px;
  border: 3px solid #050505;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 43%, #050505 43% 50%, transparent 50%),
    linear-gradient(0deg, transparent 43%, #050505 43% 50%, transparent 50%);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-rights {
  position: fixed;
  right: 24px;
  top: 50%;
  z-index: 210;
  font-family: "ItalianMono", monospace;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-banner {
  position: relative;
  height: clamp(520px, 76vw, 780px);
  min-height: 0;
  overflow: hidden;
  background: #ffb1db;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-banner::before,
.site-shell[data-view="vrown"] .va-clone-stage .va-banner::after,
.site-shell[data-view="vrown"] .va-clone-stage .va-banner-face {
  display: none;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-banner video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-intro {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(480px, 1.25fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: center;
  min-height: 690px;
  padding: 112px clamp(58px, 10vw, 132px) 92px;
  background: #fff;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-intro-copy p {
  margin: 0 0 24px;
  font-size: clamp(24px, 2.35vw, 34px);
  font-weight: 400;
  line-height: 1.1;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-intro-copy video {
  display: block;
  width: min(260px, 32vw);
  margin: 12px auto 0;
  border-radius: 8px;
  transform: rotate(13deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-intro-statement h2 {
  margin: 0 0 42px;
  font-size: clamp(56px, 5.25vw, 86px);
  font-weight: 400;
  line-height: 0.98;
  text-transform: uppercase;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-intro-statement h2 span {
  display: inline-block;
  padding: 0 18px 6px;
  border: 2px solid #050505;
  border-radius: 999px;
  line-height: 0.9;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-intro-statement p {
  max-width: 690px;
  margin: 0;
  font-size: clamp(23px, 2.15vw, 32px);
  line-height: 1.22;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-intro-statement a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-work {
  min-height: 770px;
  padding: 56px 0 84px;
  background: #fff;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(60px, 5vw, 72px) 30px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-section-head h2 {
  margin: 0;
  font-size: clamp(42px, 4vw, 58px);
  font-weight: 400;
  line-height: 1;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-section-head button {
  padding: 0 0 4px;
  border-bottom: 1px solid #050505;
  font-size: 16px;
  font-weight: 400;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-work-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(330px, 37.5vw);
  gap: 10px;
  padding: 0 60px 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-work-card {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 8px;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  background: transparent;
  box-shadow: none;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-work-card img,
.site-shell[data-view="vrown"] .va-clone-stage .va-work-card video {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 7px;
  background: #e8e8e8;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-work-card:hover img,
.site-shell[data-view="vrown"] .va-clone-stage .va-work-card:hover video {
  transform: scale(1.018);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-work-card h3,
.site-shell[data-view="vrown"] .va-clone-stage .va-work-card p {
  margin: 0;
  color: #050505;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  line-height: 1.05;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-work-card p {
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 400;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-proof {
  position: relative;
  min-height: 800px;
  padding: 150px 56px 120px;
  overflow: hidden;
  background: #fff;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-proof > p {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  color: #050505;
  font-size: clamp(39px, 4.15vw, 64px);
  font-weight: 600;
  line-height: 1.04;
  text-align: center;
  text-transform: uppercase;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-proof-media {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  pointer-events: none;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-proof-media img {
  position: absolute;
  display: block;
  width: auto;
  max-width: none;
  border-radius: 0;
  transform: none;
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-1 {
  left: 8%;
  top: 11%;
  height: clamp(110px, 12vw, 170px);
  transform: rotate(-8deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-2 {
  left: 40%;
  top: 7%;
  height: clamp(118px, 13vw, 178px);
  transform: rotate(8deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-3 {
  right: 8%;
  top: 12%;
  height: clamp(88px, 9vw, 128px);
  transform: rotate(16deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-4 {
  left: 14%;
  bottom: 13%;
  height: clamp(90px, 10vw, 142px);
  transform: rotate(11deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-5 {
  left: 46%;
  bottom: 7%;
  height: clamp(92px, 11vw, 150px);
  transform: rotate(-6deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-6 {
  right: 8%;
  bottom: 12%;
  height: clamp(92px, 10vw, 145px);
  transform: rotate(7deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-reviews {
  position: relative;
  min-height: 1180px;
  padding: 110px 70px 160px;
  overflow: hidden;
  background: #fff;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review {
  position: absolute;
  z-index: 2;
  background: #fff;
  color: #050505;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-large {
  left: 8%;
  top: 120px;
  width: 360px;
  padding: 28px 30px;
  border: 3px solid #050505;
  border-radius: 8px;
  box-shadow: 12px 12px 0 #050505;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.02;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-window {
  left: 31%;
  top: 250px;
  width: 440px;
  min-height: 240px;
  padding: 72px 38px 32px;
  border: 3px solid #050505;
  border-radius: 8px;
  box-shadow: 14px 14px 0 #050505;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-window::before,
.site-shell[data-view="vrown"] .va-clone-stage .va-review-quote::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 42px;
  border-bottom: 3px solid #050505;
  border-radius: 6px 6px 0 0;
  background: #050505;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-window strong {
  display: block;
  margin-bottom: 28px;
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 400;
  line-height: 0.98;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review small {
  display: block;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.08;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-puff {
  position: absolute;
  z-index: 4;
  width: 220px;
  height: auto;
  pointer-events: none;
}

.site-shell[data-view="vrown"] .va-clone-stage .puff-one {
  left: 10%;
  top: 170px;
  transform: rotate(-8deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .puff-two {
  right: 11%;
  top: 300px;
  transform: rotate(13deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-quote {
  right: 10%;
  top: 555px;
  width: 410px;
  min-height: 250px;
  padding: 72px 32px 32px;
  border: 3px solid #050505;
  border-radius: 8px;
  box-shadow: 12px 12px 0 #050505;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-quote strong {
  display: block;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.04;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-magic {
  left: 9%;
  top: 700px;
  width: 340px;
  font-size: 44px;
  font-weight: 400;
  line-height: 0.98;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
  left: 41%;
  bottom: 95px;
  width: 470px;
  padding: 28px 32px;
  border: 3px solid #050505;
  border-radius: 8px;
  box-shadow: 12px 12px 0 #050505;
  font-size: 27px;
  line-height: 1.05;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-play {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 560px;
  padding: 94px clamp(34px, 6vw, 90px) 105px;
  overflow: hidden;
  background: #fff;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-play-copy {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr minmax(230px, 0.45fr) 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 50px);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-play-copy h2 {
  margin: 0;
  font-size: clamp(118px, 16vw, 230px);
  font-weight: 600;
  line-height: 0.82;
  text-align: center;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-play-copy img {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-play-copy button {
  position: absolute;
  left: 50%;
  bottom: -96px;
  display: grid;
  width: 240px;
  height: 66px;
  place-items: start center;
  padding: 18px 24px;
  overflow: hidden;
  border: 2px solid #050505;
  border-radius: 7px;
  background: #fff;
  box-shadow: 10px 10px 0 #050505;
  font-size: 25px;
  font-weight: 600;
  line-height: 23px;
  transform: translateX(-50%) rotate(-4deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-play-copy p {
  grid-column: 1 / -1;
  margin: 132px auto 0;
  max-width: 520px;
  font-size: 27px;
  line-height: 1.08;
  text-align: center;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-play-machine {
  position: relative;
  z-index: 2;
  width: min(570px, 78vw);
  min-height: 420px;
  margin: 80px auto 0;
  border: 3px solid #050505;
  border-radius: 8px;
  background:
    radial-gradient(circle at 28% 35%, #baff00 0 14%, transparent 15%),
    radial-gradient(circle at 74% 67%, #ff64cb 0 17%, transparent 18%),
    #fff;
  box-shadow: 14px 14px 0 #050505;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-play-machine strong {
  position: absolute;
  left: 20px;
  top: 18px;
  z-index: 3;
  font-size: 28px;
  font-weight: 600;
  text-transform: none;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-play-machine small {
  position: absolute;
  left: 20px;
  bottom: 48px;
  z-index: 3;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-play-machine em {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 3;
  font-style: normal;
  font-size: 15px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-pop-target {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(92px, 11vw, 138px);
  min-height: 0 !important;
  aspect-ratio: 1;
  padding: 0 !important;
  border: 3px solid #050505 !important;
  border-radius: 50% !important;
  background: #ff64cb !important;
  box-shadow: 8px 8px 0 #050505 !important;
  color: #050505;
  font-size: clamp(17px, 1.65vw, 25px) !important;
  font-weight: 600;
  line-height: 0.95;
  text-align: center;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-pop-target.one {
  left: 14%;
  top: 28%;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-pop-target.two {
  right: 12%;
  top: 19%;
  background: #fef019 !important;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-pop-target.three {
  left: 34%;
  bottom: 21%;
  background: #baff00 !important;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-pop-target.four {
  right: 17%;
  bottom: 22%;
  background: #6e61ff !important;
  color: #fff;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-pop-target:hover,
.site-shell[data-view="vrown"] .va-clone-stage .va-pop-target.is-popped {
  transform: translate(4px, 4px) scale(0.94);
  box-shadow: 4px 4px 0 #050505 !important;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-membership {
  overflow: hidden;
  background: #050505;
  color: #fff;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-membership-marquee {
  display: flex;
  width: max-content;
  gap: clamp(30px, 5vw, 80px);
  padding: clamp(34px, 5vw, 68px) 0;
  animation: vaMembershipMarquee 18s linear infinite;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-membership-marquee span {
  font-size: clamp(72px, 12vw, 190px);
  font-weight: 700;
  line-height: 0.8;
  text-transform: uppercase;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-community {
  display: grid;
  grid-template-columns: minmax(340px, 0.88fr) minmax(220px, 0.45fr) auto;
  gap: 28px;
  align-items: end;
  padding: 62px clamp(36px, 6vw, 82px) 48px;
  border-top: 2px solid #fff;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-community h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 6.6vw, 108px);
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: 0;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-community p {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.04;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-community button {
  min-width: 112px;
  min-height: 58px;
  border: 2px solid #fff;
  border-radius: 7px;
  background: #fff;
  color: #050505;
  box-shadow: 8px 8px 0 #ff64cb;
  font-size: 26px;
  font-weight: 600;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding: 0 clamp(36px, 6vw, 82px) 38px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
}

@media (max-width: 980px) {
  .site-shell[data-view="vrown"] .va-clone-stage .va-nav {
    grid-template-columns: 1fr auto;
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-links {
    grid-column: 1 / -1;
    order: 3;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-hero {
    min-height: 710px;
    padding-top: 132px;
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-logo {
    width: 92vw;
    height: 145px;
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-logo-triangle {
    width: 104px;
    height: 92px;
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-logo-zig {
    width: 54px;
    height: 68px;
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-logo-word {
    font-size: clamp(70px, 15vw, 132px);
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-intro,
  .site-shell[data-view="vrown"] .va-clone-stage .va-community {
    grid-template-columns: 1fr;
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-play-copy {
    grid-template-columns: 1fr;
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-reviews {
    display: grid;
    gap: 18px;
    min-height: 0;
    padding: 80px 22px;
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-review,
  .site-shell[data-view="vrown"] .va-clone-stage .va-review-puff {
    position: relative;
    inset: auto;
    width: auto;
    transform: none;
  }
}

@media (max-width: 560px) {
  .site-shell[data-view="vrown"] .va-clone-stage .va-connect {
    min-width: 102px;
    height: 43px;
    padding: 10px 14px;
    font-size: 15px;
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-manifesto {
    width: 92vw;
    font-size: clamp(24px, 7.4vw, 34px);
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-logo-sticker {
    right: 0;
    top: 0;
    width: 84px;
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-work-rail {
    grid-auto-columns: minmax(280px, 82vw);
    padding-inline: 18px;
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-section-head {
    padding-inline: 18px;
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-proof {
    padding-inline: 18px;
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media img {
    opacity: 0.55;
  }

  .site-shell[data-view="vrown"] .va-clone-stage .va-rights {
    right: 8px;
    font-size: 10px;
  }
}

/* VROWN Analogue polish pass: tighter logo, hero rhythm, and editorial overlap. */
.site-shell[data-view="vrown"] .va-clone-stage .va-hero {
  min-height: 613px;
  padding: 96px 22px 34px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo {
  width: min(812px, 70vw);
  height: 194px;
  margin-bottom: 25px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-lottie {
  display: block;
  width: 100%;
  height: 100%;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-triangle,
.site-shell[data-view="vrown"] .va-clone-stage .va-logo-zig,
.site-shell[data-view="vrown"] .va-clone-stage .va-logo-word {
  display: none;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-sticker {
  right: -26px;
  top: 18px;
  width: 124px;
  transform: rotate(8deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-manifesto {
  width: min(995px, 82vw);
  font-size: clamp(30px, 2.82vw, 40px);
  line-height: 1.08;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-word-button {
  min-height: 38px;
  padding: 0 12px 3px;
  box-shadow: 7px 8px 0 #050505;
  transform: rotate(-0.4deg) translateY(-2px);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-pill {
  padding: 0 14px 4px;
  transform: rotate(-1.6deg) translateY(-1px);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-pill:nth-of-type(2) {
  transform: rotate(1.4deg) translateY(2px);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-under {
  text-underline-offset: 4px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-outline {
  -webkit-text-stroke: 1px #050505;
  text-underline-offset: 4px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-forward {
  width: 39px;
  height: 19px;
  transform: translateY(1px) rotate(3deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-diamond {
  transform: translateY(2px) rotate(-3deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-fist {
  transform: translateY(8px) rotate(-8deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-globe {
  transform: translateY(5px) rotate(-8deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-banner {
  height: clamp(520px, 63vw, 705px);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-banner video {
  object-position: 50% 45%;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-intro {
  min-height: 670px;
  padding-top: 102px;
  padding-bottom: 82px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-intro-copy p {
  font-size: clamp(23px, 2.05vw, 30px);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-intro-copy video {
  width: min(230px, 27vw);
  margin-top: 8px;
  transform: rotate(12deg) translateX(16px);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-intro-statement h2 {
  font-size: clamp(54px, 5vw, 78px);
  line-height: 0.98;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-work {
  padding-top: 42px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-work-rail {
  grid-auto-columns: minmax(332px, 38.4vw);
  gap: 10px;
  padding-left: 60px;
  padding-right: 38px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-work-card {
  gap: 7px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-work-card h3 {
  font-size: clamp(20px, 1.75vw, 25px);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-proof {
  min-height: 760px;
  padding-top: 130px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-proof > p {
  font-size: clamp(38px, 3.9vw, 60px);
  line-height: 1.03;
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-1 {
  left: 4%;
  top: 10%;
  height: clamp(120px, 14vw, 188px);
  transform: rotate(-15deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-2 {
  left: 39%;
  top: 4%;
  height: clamp(112px, 12vw, 166px);
  transform: rotate(0deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-3 {
  right: 7%;
  top: 8%;
  height: clamp(96px, 10vw, 142px);
  transform: rotate(45deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-4 {
  left: 10%;
  bottom: 12%;
  height: clamp(92px, 10vw, 140px);
  transform: rotate(-5deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-5 {
  left: 46%;
  bottom: 5%;
  height: clamp(108px, 12vw, 160px);
  transform: rotate(15deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-6 {
  right: 5%;
  bottom: 20%;
  height: clamp(92px, 10vw, 144px);
  transform: rotate(0deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-reviews {
  min-height: 1080px;
  padding-top: 86px;
  padding-bottom: 120px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-large {
  left: 7%;
  top: 92px;
  transform: rotate(-3deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-window {
  left: 31%;
  top: 206px;
  transform: rotate(0.4deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .puff-one {
  left: 8%;
  top: 128px;
  width: 245px;
  transform: rotate(-11deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .puff-two {
  right: 10%;
  top: 246px;
  width: 255px;
  transform: rotate(15deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-quote {
  right: 9%;
  top: 500px;
  transform: rotate(2deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-magic {
  left: 8%;
  top: 645px;
  transform: rotate(-4deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
  left: 42%;
  bottom: 76px;
  transform: rotate(-1deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-play {
  min-height: 940px;
  padding-top: 78px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-play-copy {
  grid-template-columns: 1fr minmax(235px, 0.38fr) 1fr;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-play-copy h2 {
  font-size: clamp(132px, 17.4vw, 250px);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-play-copy img {
  transform: rotate(5deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-play-machine {
  width: min(610px, 80vw);
  margin-top: 72px;
  transform: rotate(-1deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-hero {
  padding-top: 100px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo {
  width: min(842px, 72vw);
  margin-bottom: 42px;
  overflow: visible;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-lottie {
  transform: scale(1.14);
  transform-origin: 50% 58%;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-sticker {
  right: 18px;
  top: 18px;
  width: 118px;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-manifesto {
  font-size: clamp(30px, 2.72vw, 39px);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-banner video {
  object-position: 50% 40%;
}

/* VROWN interaction pass: keep it scoped to the cloned VROWN page only. */
.site-shell[data-view="vrown"] .va-clone-stage .va-logo {
  isolation: isolate;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-lottie {
  transition:
    opacity 260ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 260ms ease;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-logo-inflate {
  position: absolute;
  inset: -30px -62px -24px;
  z-index: 5;
  width: calc(100% + 124px);
  height: calc(100% + 54px);
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9) rotate(-1deg);
  transition:
    opacity 220ms ease,
    transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-shell[data-view="vrown"] .va-clone-stage.is-logo-inflated .va-logo-lottie {
  opacity: 0.08;
  filter: blur(0.8px) saturate(0.8);
  transform: scale(1.02);
}

.site-shell[data-view="vrown"] .va-clone-stage.is-logo-inflated .va-logo-inflate {
  opacity: 1;
  transform: scale(1.035) rotate(0deg);
}

.site-shell[data-view="vrown"] .va-clone-stage.is-logo-popped .va-word-button {
  animation: vaButtonPop 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-connect,
.site-shell[data-view="vrown"] .va-clone-stage .va-play-copy button,
.site-shell[data-view="vrown"] .va-clone-stage .va-community button {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    color 180ms ease;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-connect.is-pressing,
.site-shell[data-view="vrown"] .va-clone-stage .va-play-copy button.is-pressing,
.site-shell[data-view="vrown"] .va-clone-stage .va-community button.is-pressing {
  box-shadow: 4px 4px 0 #050505;
  transform: translate(5px, 5px) rotate(-3deg);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-banner video {
  transform: scale(1);
  transition:
    filter 900ms ease,
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-shell[data-view="vrown"] .va-clone-stage.is-reel-live .va-banner video {
  filter: saturate(1.1) contrast(1.04);
  transform: scale(1.025);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-work-card {
  transform:
    translateY(var(--card-reveal-y, 0px))
    rotateX(var(--card-tilt-y, 0deg))
    rotateY(var(--card-tilt-x, 0deg));
  transform-style: preserve-3d;
  transition:
    opacity 520ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-work-card img,
.site-shell[data-view="vrown"] .va-clone-stage .va-work-card video {
  transition:
    filter 260ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-work-card.is-card-active {
  z-index: 3;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-work-card.is-card-active img,
.site-shell[data-view="vrown"] .va-clone-stage .va-work-card.is-card-active video {
  filter: saturate(1.14) contrast(1.05);
  transform: scale(1.045);
}

.site-shell[data-view="vrown"] .va-clone-stage [data-vrown-drag] {
  --drag-x: 0px;
  --drag-y: 0px;
  --reveal-scale: 1;
  -webkit-user-drag: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition:
    opacity 520ms ease,
    filter 220ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.site-shell[data-view="vrown"] .va-clone-stage [data-vrown-drag].is-hovered {
  filter: saturate(1.12) contrast(1.04) drop-shadow(6px 8px 0 rgba(5, 5, 5, 0.12));
  z-index: 36;
}

.site-shell[data-view="vrown"] .va-clone-stage [data-vrown-drag].is-dragging {
  cursor: grabbing;
  filter: saturate(1.18) contrast(1.08) drop-shadow(10px 14px 0 rgba(5, 5, 5, 0.18));
  transition: none;
  z-index: 90 !important;
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-1 {
  --va-rotate: -15deg;
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-2 {
  --va-rotate: 0deg;
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-3 {
  --va-rotate: 45deg;
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-4 {
  --va-rotate: -5deg;
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-5 {
  --va-rotate: 15deg;
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-6 {
  --va-rotate: 0deg;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-large {
  --va-rotate: -3deg;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-window {
  --va-rotate: 0.4deg;
}

.site-shell[data-view="vrown"] .va-clone-stage .puff-one {
  --va-rotate: -11deg;
}

.site-shell[data-view="vrown"] .va-clone-stage .puff-two {
  --va-rotate: 15deg;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-quote {
  --va-rotate: 2deg;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-magic {
  --va-rotate: -4deg;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
  --va-rotate: -1deg;
}

.site-shell[data-view="vrown"] .va-clone-stage .client-logo-1,
.site-shell[data-view="vrown"] .va-clone-stage .client-logo-2,
.site-shell[data-view="vrown"] .va-clone-stage .client-logo-3,
.site-shell[data-view="vrown"] .va-clone-stage .client-logo-4,
.site-shell[data-view="vrown"] .va-clone-stage .client-logo-5,
.site-shell[data-view="vrown"] .va-clone-stage .client-logo-6,
.site-shell[data-view="vrown"] .va-clone-stage .va-review-large,
.site-shell[data-view="vrown"] .va-clone-stage .va-review-window,
.site-shell[data-view="vrown"] .va-clone-stage .puff-one,
.site-shell[data-view="vrown"] .va-clone-stage .puff-two,
.site-shell[data-view="vrown"] .va-clone-stage .va-review-quote,
.site-shell[data-view="vrown"] .va-clone-stage .va-review-magic,
.site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
  transform:
    translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0)
    rotate(var(--va-rotate, 0deg))
    scale(var(--reveal-scale, 1));
}

.site-shell[data-view="vrown"] .va-clone-stage .va-proof-media [data-vrown-drag],
.site-shell[data-view="vrown"] .va-clone-stage .va-reviews [data-vrown-drag] {
  transform:
    translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0)
    rotate(var(--va-rotate, 0deg))
    scale(var(--reveal-scale, 1));
}

.site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-banner,
.site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-intro,
.site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-play-machine,
.site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-membership {
  opacity: 0;
  transform: translateY(30px) rotate(var(--va-reveal-rotate, 0deg));
  transition:
    opacity 620ms ease,
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-banner.is-in-view,
.site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-intro.is-in-view,
.site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-play-machine.is-in-view,
.site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-membership.is-in-view {
  opacity: 1;
  transform: translateY(0) rotate(var(--va-reveal-rotate, 0deg));
}

.site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-play-machine {
  --va-reveal-rotate: -1deg;
}

.site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-work-card {
  --card-reveal-y: 28px;
  opacity: 0;
}

.site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-work-card.is-in-view {
  --card-reveal-y: 0px;
  opacity: 1;
}

.site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready [data-vrown-drag] {
  --reveal-scale: 0.88;
  opacity: 0;
}

.site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready [data-vrown-drag].is-in-view,
.site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready [data-vrown-drag].is-dragging {
  --reveal-scale: 1;
  opacity: 1;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-pop-burst {
  position: absolute;
  width: 18px;
  height: 18px;
  z-index: 320;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-pop-burst span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid #050505;
  border-radius: 999px;
  background: var(--burst-color);
  animation: vaPopBurst 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--burst-i) * 51deg))
    translateY(0)
    scale(0.8);
}

.site-shell[data-view="vrown"] .va-clone-stage .va-pop-burst b {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 2px 6px 3px;
  border: 2px solid #050505;
  border-radius: 999px;
  background: #fff;
  color: #050505;
  font-family: "Italian Plate", "Arial Black", sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  animation: vaPopLabel 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform: translate(-50%, -50%) rotate(8deg);
  white-space: nowrap;
}

.site-shell[data-view="vrown"] .va-clone-stage .va-pop-target.is-popped {
  box-shadow: 4px 4px 0 #050505;
  transform:
    translate(5px, 5px)
    rotate(var(--pop-spin, -4deg))
    scale(0.92);
}

.site-shell[data-view="vrown"] .va-clone-stage.is-playroom-hit .va-play-machine {
  animation: vaMachineHit 260ms ease;
}

@keyframes vaButtonPop {
  0% {
    transform: translate(-50%, 0) rotate(-4deg) scale(1);
  }
  45% {
    transform: translate(-50%, -7px) rotate(4deg) scale(1.06);
  }
  100% {
    transform: translate(-50%, 0) rotate(-4deg) scale(1);
  }
}

@keyframes vaPopBurst {
  0% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--burst-i) * 51deg))
      translateY(0)
      scale(0.7);
  }
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--burst-i) * 51deg))
      translateY(-76px)
      scale(1.25);
  }
}

@keyframes vaPopLabel {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(8deg) scale(0.72);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -94%) rotate(-7deg) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -130%) rotate(-12deg) scale(0.96);
  }
}

@keyframes vaMachineHit {
  0%,
  100% {
    transform: rotate(-1deg) translate(0, 0);
  }
  40% {
    transform: rotate(1deg) translate(4px, -4px);
  }
  70% {
    transform: rotate(-2deg) translate(-3px, 2px);
  }
}

/* Single shared HOME-style menu. Page-specific top menus are intentionally retired. */
.app-menu {
  z-index: 260;
}

.app-menu button.is-active {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}

.site-shell .topbar,
.vrown-view .va-nav,
.site-shell[data-view="vrown"] .va-clone-stage .va-nav,
.site-shell[data-view="vrown"] .va-old-stage .va-nav,
.vrown-edge-nav,
.game-view .trends-header {
  display: none !important;
}

/* HOME surface color pass. Shared menu styles are intentionally untouched. */
.entry {
  background: #fef019;
  color: #050505;
}

.gate-scroll {
  background: #fef019;
  background-blend-mode: normal;
}

.gate-canvas::before {
  background: none;
}

.gate-canvas::after {
  background-image: none;
  mix-blend-mode: normal;
  opacity: 0;
}

.gate-title {
  top: 228px;
  z-index: 64;
  width: min(560px, calc(100% - 40px));
  color: #050505;
  font-family: Inter, Arial, sans-serif;
  font-size: 80px;
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: 0;
  text-shadow: none;
  text-transform: uppercase;
}

.gate-title span:first-child {
  font-size: 0.52em;
  line-height: 0.96;
}

.gate-title span:nth-child(2),
.gate-title span:nth-child(3) {
  line-height: 0.84;
}

@media (max-width: 920px) {
  .gate-title {
    top: 248px;
    width: min(460px, calc(100% - 32px));
    font-size: 66px;
  }
}

@media (max-width: 640px) {
  .gate-title {
    top: 304px;
    width: min(328px, calc(100% - 28px));
    font-size: 48px;
  }
}

/* HOME sticker collage: each source image is separated into its own draggable sticker. */
.home-sticker {
  filter:
    drop-shadow(0 12px 9px rgba(5, 5, 5, 0.18))
    saturate(1.06)
    contrast(1.02);
}

.home-sticker-01 { --r: -8deg; --z: 22; left: 4.2%; top: 78px; width: clamp(86px, 10vw, 148px); }
.home-sticker-02 { --r: 4deg; --z: 29; left: 30.4%; top: 72px; width: clamp(118px, 13.5vw, 178px); }
.home-sticker-03 { --r: -3deg; --z: 18; left: 19%; top: 42px; width: clamp(64px, 7vw, 94px); }
.home-sticker-04 { --r: 6deg; --z: 20; right: 4.6%; top: 54px; width: clamp(184px, 23vw, 286px); }
.home-sticker-05 { --r: -2deg; --z: 24; left: 48.2%; top: 72px; width: clamp(104px, 12vw, 148px); }
.home-sticker-06 { --r: -9deg; --z: 25; left: 4.2%; top: 246px; width: clamp(168px, 20vw, 246px); }
.home-sticker-07 { --r: -5deg; --z: 31; left: 41.8%; top: 172px; width: clamp(112px, 13vw, 158px); }
.home-sticker-08 { --r: 7deg; --z: 34; right: 8.4%; top: 276px; width: clamp(98px, 11vw, 136px); }
.home-sticker-09 { --r: 3deg; --z: 30; left: 31.4%; top: 236px; width: clamp(62px, 7vw, 82px); }
.home-sticker-10 { --r: -5deg; --z: 28; right: 21.4%; top: 260px; width: clamp(132px, 15vw, 184px); }
.home-sticker-11 { --r: 4deg; --z: 26; right: 5.7%; top: 354px; width: clamp(122px, 14vw, 168px); }
.home-sticker-12 { --r: -7deg; --z: 36; right: 29%; top: 360px; width: clamp(110px, 12vw, 144px); }
.home-sticker-13 { --r: 5deg; --z: 37; left: 45.6%; top: 404px; width: clamp(92px, 10vw, 124px); }
.home-sticker-14 { --r: -2deg; --z: 43; left: 27.2%; top: 370px; width: clamp(142px, 16vw, 184px); }
.home-sticker-15 { --r: -2deg; --z: 32; left: 8%; top: 430px; width: clamp(138px, 16vw, 188px); }
.home-sticker-16 { --r: 7deg; --z: 45; right: 30.5%; top: 504px; width: clamp(176px, 19vw, 222px); }
.home-sticker-17 { --r: -8deg; --z: 27; left: 24.2%; top: 514px; width: clamp(128px, 14vw, 168px); }
.home-sticker-18 { --r: -1deg; --z: 23; right: 14%; top: 468px; width: clamp(126px, 14vw, 168px); }
.home-sticker-19 { --r: 2deg; --z: 42; left: 3.5%; top: 584px; width: clamp(166px, 19vw, 218px); }
.home-sticker-20 { --r: 5deg; --z: 35; left: 42.2%; top: 560px; width: clamp(138px, 16vw, 182px); }
.home-sticker-21 { --r: 4deg; --z: 44; left: 18.4%; top: 500px; width: clamp(72px, 8vw, 96px); }
.home-sticker-22 { --r: -4deg; --z: 39; left: 20.4%; top: 612px; width: clamp(116px, 13vw, 152px); }
.home-sticker-23 { --r: -8deg; --z: 49; left: 32.4%; top: 574px; width: clamp(80px, 9vw, 108px); }
.home-sticker-24 { --r: 2deg; --z: 33; left: 39.6%; top: 586px; width: clamp(82px, 9vw, 112px); }
.home-sticker-25 { --r: 3deg; --z: 29; right: 37%; top: 546px; width: clamp(104px, 12vw, 132px); }
.home-sticker-26 { --r: -3deg; --z: 50; right: 3.5%; top: 574px; width: clamp(148px, 17vw, 190px); }
.home-sticker-27 { --r: 9deg; --z: 52; left: 48%; top: 612px; width: clamp(68px, 7vw, 88px); }
.home-sticker-28 { --r: -3deg; --z: 38; left: 0.9%; top: 556px; width: clamp(112px, 13vw, 148px); }
.home-sticker-29 { --r: -4deg; --z: 51; left: 18.8%; top: 632px; width: clamp(174px, 20vw, 226px); }
.home-sticker-30 { --r: -14deg; --z: 41; left: 37.2%; top: 642px; width: clamp(154px, 18vw, 200px); }
.home-sticker-31 { --r: 5deg; --z: 47; right: 43.4%; top: 556px; width: clamp(102px, 12vw, 136px); }
.home-sticker-32 { --r: -1deg; --z: 40; right: 13.4%; top: 636px; width: clamp(210px, 24vw, 270px); }
.home-sticker-33 { --r: 8deg; --z: 48; right: 39.8%; top: 642px; width: clamp(126px, 15vw, 166px); }
.home-sticker-34 { --r: 8deg; --z: 46; left: 1.5%; top: 616px; width: clamp(116px, 14vw, 156px); }
.home-sticker-35 { --r: -1deg; --z: 21; right: 34.2%; top: 674px; width: clamp(188px, 22vw, 244px); }
.home-sticker-36 { --r: 2deg; --z: 19; right: 4.5%; top: 630px; width: clamp(196px, 24vw, 270px); }

@media (max-width: 920px) {
  .home-sticker-04 { right: -5%; width: 236px; }
  .home-sticker-06 { left: -2%; width: 214px; }
  .home-sticker-11 { right: -2%; width: 142px; }
  .home-sticker-15 { left: 3%; width: 164px; }
  .home-sticker-16 { right: 22%; width: 194px; }
  .home-sticker-18 { right: 5%; width: 146px; }
  .home-sticker-26 { right: -9%; width: 168px; }
  .home-sticker-32 { right: 8%; width: 226px; }
  .home-sticker-36 { right: -5%; width: 232px; }
}

@media (max-width: 640px) {
  .home-sticker-01 { left: 3%; top: 82px; width: 104px; }
  .home-sticker-02 { left: 41%; top: 96px; width: 122px; }
  .home-sticker-03 { left: 23%; top: 52px; width: 58px; }
  .home-sticker-04 { right: -34%; top: 156px; width: 208px; }
  .home-sticker-05 { left: 36%; top: 188px; width: 108px; }
  .home-sticker-06 { left: -22%; top: 236px; width: 188px; }
  .home-sticker-07 { left: 56%; top: 268px; width: 118px; }
  .home-sticker-08 { right: 4%; top: 340px; width: 92px; }
  .home-sticker-09 { left: 30%; top: 292px; width: 56px; }
  .home-sticker-10 { right: 19%; top: 382px; width: 120px; }
  .home-sticker-11 { right: -13%; top: 438px; width: 124px; }
  .home-sticker-12 { right: 19%; top: 484px; width: 108px; }
  .home-sticker-13 { left: 50%; top: 518px; width: 82px; }
  .home-sticker-14 { left: 4%; top: 402px; width: 142px; }
  .home-sticker-15 { left: -8%; top: 492px; width: 142px; }
  .home-sticker-16 { right: 8%; top: 604px; width: 172px; }
  .home-sticker-17 { left: 28%; top: 596px; width: 116px; }
  .home-sticker-18 { display: none; }
  .home-sticker-19 { left: -9%; top: 684px; width: 166px; }
  .home-sticker-20 { left: 48%; top: 692px; width: 120px; }
  .home-sticker-21 { left: 3%; top: 618px; width: 66px; }
  .home-sticker-22 { left: 21%; top: 730px; width: 106px; }
  .home-sticker-23 { left: 48%; top: 744px; width: 80px; }
  .home-sticker-24 { display: none; }
  .home-sticker-25 { right: 1%; top: 726px; width: 92px; }
  .home-sticker-26 { right: -18%; top: 658px; width: 152px; }
  .home-sticker-27 { left: 69%; top: 596px; width: 66px; }
  .home-sticker-28 { display: none; }
  .home-sticker-29 { left: 18%; top: 784px; width: 166px; }
  .home-sticker-30 { left: 55%; top: 798px; width: 138px; }
  .home-sticker-31 { display: none; }
  .home-sticker-32 { right: -18%; top: 792px; width: 202px; }
  .home-sticker-33 { display: none; }
  .home-sticker-34 { left: -12%; top: 748px; width: 126px; }
  .home-sticker-35 { display: none; }
  .home-sticker-36 { display: none; }
}

/* Readymag-inspired HOME clone. The shared top menu is intentionally untouched. */
.entry {
  background: #fef019;
  color: #050505;
}

.gate-scroll {
  overflow: hidden;
  background: #fef019;
  background-blend-mode: normal;
}

.gate-canvas {
  max-width: 1280px;
  height: max(100svh, 720px);
  min-height: 720px;
}

.gate-canvas::before {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 242, 134, 0.62), transparent 24%),
    radial-gradient(circle at 86% 78%, rgba(245, 164, 36, 0.28), transparent 28%),
    linear-gradient(180deg, rgba(255, 232, 70, 0.55), rgba(255, 207, 38, 0));
  opacity: 0.88;
}

.gate-canvas::after {
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(circle, rgba(0, 0, 0, 0.18) 0 0.7px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  opacity: 0.12;
}

.rm-black-panel {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 66px;
  bottom: 34px;
  z-index: 2;
  border-radius: 9px;
  background: #050505;
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.gate-title {
  left: 50%;
  top: 164px;
  z-index: 74;
  width: 740px;
  max-width: calc(100% - 72px);
  color: #fef019;
  font-family: Inter, Arial, sans-serif;
  font-size: 112px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0;
  text-align: center;
  text-shadow: none;
  text-transform: uppercase;
  pointer-events: none;
}

.gate-title span:first-child {
  font-size: 0.52em;
  line-height: 0.95;
  text-transform: uppercase;
}

.gate-title span {
  text-transform: uppercase;
}

.gate-title span:nth-child(2),
.gate-title span:nth-child(3) {
  line-height: 0.86;
  text-transform: uppercase;
}

.gate-brand,
.gate-brand:hover {
  left: auto;
  right: 24px;
  top: auto;
  bottom: 20px;
  z-index: 86;
  min-width: 154px;
  min-height: 58px;
  padding: 8px 24px;
  border-color: transparent;
  border-radius: 30px;
  background: #4b4b4b;
  color: #fff;
  font-family: Inter, Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.22);
  transform: rotate(0deg);
}

.gate-brand:hover {
  background: #111;
  color: #fef019;
  transform: translateY(1px);
}

.rm-sticker {
  box-sizing: border-box;
  color: #111;
  font-family: Inter, Arial, sans-serif;
  filter:
    drop-shadow(0 14px 10px rgba(0, 0, 0, 0.42))
    saturate(1.05)
    contrast(1.04);
}

.rm-sticker *,
.rm-sticker::before,
.rm-sticker::after {
  box-sizing: border-box;
  pointer-events: none;
}

.rm-tape {
  --r: -7deg;
  --z: 34;
  left: 12px;
  top: 72px;
  width: 174px;
  height: 94px;
  border: 3px solid #101014;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, 0.08) 18px 21px, transparent 21px),
    #191b24;
}

.rm-tape::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 9px;
  height: 28px;
  background: #962536;
}

.rm-tape::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 48px;
  width: 42px;
  height: 28px;
  border: 7px solid #040405;
  border-radius: 50%;
  box-shadow: 74px 0 0 -7px #d8d6ce, 74px 0 0 0 #040405;
  background: #c8c6bd;
}

.rm-tape span,
.rm-tape b {
  position: absolute;
  z-index: 2;
  color: #e3d5c4;
  line-height: 1;
}

.rm-tape span {
  right: 13px;
  top: 10px;
  font-size: 32px;
  font-weight: 800;
}

.rm-tape b {
  left: 15px;
  bottom: 11px;
  font-size: 13px;
  text-transform: uppercase;
}

.rm-pass-card {
  --r: 15deg;
  --z: 38;
  left: 142px;
  top: 56px;
  width: 148px;
  height: 100px;
  border: 3px solid rgba(5, 5, 5, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.38), transparent 42%),
    linear-gradient(45deg, #174a39, #8fd3b1);
  overflow: hidden;
}

.rm-pass-card span {
  position: absolute;
  left: 18px;
  top: 14px;
  width: 68px;
  height: 62px;
  border: 3px solid rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.32) 0 12px, transparent 12px 18px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.26) 0 4px, transparent 4px 9px);
}

.rm-pass-card::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 11px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, #111 0 9px, #e6eef1 10px 13px, transparent 14px);
}

.rm-ticket-top {
  --r: -4deg;
  --z: 52;
  left: 264px;
  top: 128px;
  width: 262px;
  height: 42px;
  padding: 9px 16px;
  background: #fef019;
  color: #17120b;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
}

.rm-bus-ticket {
  --r: 8deg;
  --z: 40;
  left: 470px;
  top: 62px;
  display: grid;
  gap: 5px;
  width: 230px;
  min-height: 112px;
  padding: 14px 16px;
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(0, 0, 0, 0.12) 12px 13px),
    #fef019;
  color: #2f170b;
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.rm-bus-ticket::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 48px;
  height: 28px;
  background:
    repeating-linear-gradient(90deg, #111 0 3px, transparent 3px 6px);
}

.rm-card-photo {
  --r: 8deg;
  --z: 37;
  right: 218px;
  top: 56px;
  width: 148px;
  height: 122px;
  padding: 9px;
  border: 3px solid #222;
  background: #e6d4b6;
}

.rm-card-photo span {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 65% 34%, #d0bd77 0 13px, transparent 14px),
    linear-gradient(135deg, #254447 0 40%, #7e9d6d 40% 58%, #2c2821 58%);
}

.rm-card-photo::after {
  content: "";
  position: absolute;
  right: -28px;
  top: 34px;
  width: 52px;
  height: 34px;
  border: 10px solid #1f1f1f;
  border-left-color: transparent;
  border-radius: 50%;
}

.rm-receipt-a {
  --r: -17deg;
  --z: 33;
  left: 74px;
  top: 158px;
  display: grid;
  gap: 8px;
  width: 124px;
  height: 236px;
  padding: 18px 14px;
  background:
    repeating-linear-gradient(0deg, transparent 0 19px, rgba(0, 0, 0, 0.14) 19px 20px),
    #efe8d3;
  color: #111;
  font-family: "Courier New", monospace;
  font-size: 12px;
  text-transform: uppercase;
}

.rm-receipt-a::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 16px;
  height: 38px;
  background: repeating-linear-gradient(90deg, #101010 0 3px, transparent 3px 7px);
}

.rm-currency {
  --r: -6deg;
  --z: 32;
  left: -10px;
  top: 306px;
  width: 258px;
  height: 128px;
  padding: 20px;
  border: 2px solid #1e332d;
  background:
    radial-gradient(ellipse at 52% 52%, transparent 0 42px, rgba(27, 82, 68, 0.25) 43px 47px, transparent 48px),
    repeating-linear-gradient(45deg, rgba(19, 77, 65, 0.12) 0 8px, transparent 8px 15px),
    #d7d3a9;
  color: #233f35;
  font-family: "Courier New", monospace;
  font-weight: 800;
}

.rm-currency b {
  display: block;
  font-size: 32px;
}

.rm-currency span {
  display: block;
  margin-top: 32px;
  font-size: 12px;
}

.rm-tea-tag {
  --r: -10deg;
  --z: 54;
  left: 236px;
  top: 358px;
  display: grid;
  place-items: center;
  width: 112px;
  height: 128px;
  padding: 16px;
  clip-path: polygon(16% 0, 84% 0, 100% 28%, 82% 100%, 18% 100%, 0 28%);
  background: #1d573e;
  color: #f4e8c1;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.rm-matchbox {
  --r: -15deg;
  --z: 57;
  left: 286px;
  top: 334px;
  display: grid;
  place-items: center;
  width: 118px;
  height: 154px;
  padding: 15px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 38%),
    #c83c31;
  color: #f6dfcf;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}

.rm-matchbox span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e7d2bf;
  color: #c83c31;
  font-size: 18px;
}

.rm-palette {
  --r: 14deg;
  --z: 60;
  left: 2px;
  bottom: 54px;
  width: 218px;
  height: 154px;
  border: 3px solid rgba(62, 51, 38, 0.42);
  border-radius: 52% 46% 54% 41%;
  background: #d8d5bd;
}

.rm-palette::before {
  content: "";
  position: absolute;
  left: 126px;
  top: 38px;
  width: 48px;
  height: 34px;
  border-radius: 50%;
  background: #171513;
}

.rm-palette::after {
  content: "";
  position: absolute;
  left: 38px;
  top: 34px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #d0e8c8;
  box-shadow:
    42px 8px 0 #eef2d5,
    36px 54px 0 #e0caae,
    83px 64px 0 #e8ded3;
}

.rm-blue-bottle {
  --r: -21deg;
  --z: 58;
  left: 150px;
  bottom: -24px;
  width: 178px;
  height: 222px;
  border-radius: 44% 40% 18% 18%;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.35), transparent 24% 66%, rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg, #0b61b6, #0b86d4 55%, #1853a3);
  opacity: 0.92;
}

.rm-blue-bottle span {
  position: absolute;
  left: 42px;
  top: 82px;
  width: 100px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #163566;
  color: #f3f3f3;
  font-size: 15px;
  font-weight: 800;
}

.rm-coin {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #d2a56c 0 10px, transparent 11px),
    radial-gradient(circle, #875f33, #3f2f1d 70%);
}

.rm-coin-a {
  --r: 9deg;
  --z: 41;
  left: 398px;
  top: 412px;
}

.rm-coin-b {
  --r: -12deg;
  --z: 28;
  right: 322px;
  top: 142px;
  width: 94px;
  height: 94px;
}

.rm-paint-tube {
  --r: 6deg;
  --z: 62;
  right: 198px;
  top: 126px;
  display: grid;
  place-items: center;
  width: 66px;
  height: 238px;
  border-radius: 10px 10px 4px 4px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.54), transparent 36% 68%, rgba(0, 0, 0, 0.34)),
    repeating-linear-gradient(0deg, #f5f6ee 0 26px, #ced4d1 26px 29px);
  color: #111;
  font-family: "Courier New", monospace;
  font-size: 11px;
  text-align: center;
}

.rm-paint-tube::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 16px;
  width: 34px;
  height: 20px;
  border-radius: 6px;
  background: #dfe3dc;
}

.rm-keytag {
  --r: -1deg;
  --z: 66;
  right: 280px;
  top: 312px;
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #f2f0dc 0 34px, #2b55bb 35px 51px, transparent 52px);
}

.rm-keytag::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 23px;
  width: 38px;
  height: 38px;
  border: 9px solid #111;
  border-right-color: transparent;
  border-radius: 50%;
}

.rm-phone-card {
  --r: 7deg;
  --z: 46;
  right: -2px;
  top: 238px;
  display: grid;
  place-items: center;
  width: 102px;
  height: 146px;
  border-radius: 6px;
  background: #20a441;
  color: #6a38a0;
  font-size: 48px;
  font-weight: 900;
}

.rm-phone-card::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 30px;
  width: 52px;
  height: 42px;
  border: 7px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
}

.rm-crumple {
  --r: 12deg;
  --z: 55;
  right: 18px;
  top: 62px;
  width: 184px;
  height: 132px;
  clip-path: polygon(9% 22%, 28% 0, 44% 18%, 61% 4%, 78% 18%, 95% 14%, 88% 45%, 100% 67%, 72% 78%, 58% 100%, 35% 82%, 12% 91%, 16% 60%, 0 42%);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 24%),
    linear-gradient(35deg, #8b7f5f, #c7b887 46%, #62553c);
}

.rm-white-strip {
  --r: -6deg;
  --z: 63;
  right: 258px;
  bottom: 166px;
  width: 276px;
  height: 52px;
  padding-left: 72px;
  background: #f3f1eb;
  color: #92df8e;
  font-size: 30px;
  font-weight: 900;
  line-height: 52px;
}

.rm-white-strip::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 10px;
  width: 92px;
  height: 28px;
  background: repeating-linear-gradient(45deg, #111 0 5px, transparent 5px 10px);
}

.rm-receipt-b {
  --r: 7deg;
  --z: 51;
  left: 478px;
  bottom: 2px;
  display: grid;
  gap: 8px;
  width: 202px;
  min-height: 152px;
  padding: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(0, 0, 0, 0.1) 17px 18px),
    #f1e7d5;
  color: #4b311b;
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 800;
}

.rm-receipt-b small {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: repeating-linear-gradient(45deg, #111 0 4px, #fff 4px 8px);
  color: transparent;
}

.rm-vaccine-card {
  --r: 15deg;
  --z: 35;
  right: 6px;
  bottom: 70px;
  display: grid;
  gap: 10px;
  width: 184px;
  min-height: 220px;
  padding: 18px;
  border: 2px solid #c8932a;
  background: #fef019;
  color: #23150c;
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 900;
}

.rm-vaccine-card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 68px;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0 2px, transparent 2px 10px);
}

.rm-potato {
  --r: -9deg;
  --z: 50;
  right: 334px;
  bottom: 42px;
  width: 164px;
  height: 124px;
  border-radius: 54% 45% 50% 46%;
  background:
    radial-gradient(circle at 28% 36%, rgba(97, 63, 31, 0.32) 0 5px, transparent 6px),
    radial-gradient(circle at 68% 57%, rgba(97, 63, 31, 0.32) 0 6px, transparent 7px),
    linear-gradient(135deg, #c6ad67, #928039);
}

.rm-green-token {
  --r: -9deg;
  --z: 59;
  right: 424px;
  bottom: 20px;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #e3e8d2 0 19px, transparent 20px),
    #c82d34;
  color: #178445;
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 920px) {
  .gate-canvas {
    height: max(100svh, 740px);
    min-height: 740px;
  }

  .rm-black-panel {
    left: 5%;
    right: 5%;
    top: 72px;
    bottom: 48px;
  }

  .gate-title {
    top: 188px;
    width: 560px;
    max-width: calc(100% - 52px);
    font-size: 84px;
  }

  .rm-tape { left: -24px; top: 88px; width: 156px; height: 86px; }
  .rm-pass-card { left: 102px; top: 74px; width: 122px; height: 86px; }
  .rm-ticket-top { left: 204px; top: 130px; width: 220px; }
  .rm-bus-ticket { left: 310px; top: 82px; width: 184px; }
  .rm-card-photo { right: 70px; top: 80px; width: 124px; height: 102px; }
  .rm-receipt-a { left: -12px; top: 196px; }
  .rm-currency { left: -82px; top: 320px; width: 226px; }
  .rm-tea-tag { left: 132px; top: 370px; }
  .rm-matchbox { left: 210px; top: 350px; }
  .rm-palette { left: -30px; bottom: 70px; width: 186px; height: 130px; }
  .rm-blue-bottle { left: 105px; bottom: -16px; width: 150px; height: 190px; }
  .rm-paint-tube { right: 128px; top: 174px; }
  .rm-keytag { right: 162px; top: 334px; width: 90px; height: 90px; }
  .rm-phone-card { right: -34px; top: 258px; }
  .rm-crumple { right: -44px; top: 88px; width: 156px; height: 112px; }
  .rm-white-strip { right: 104px; bottom: 194px; width: 222px; }
  .rm-receipt-b { left: 298px; bottom: 4px; width: 178px; }
  .rm-vaccine-card { right: -40px; bottom: 82px; width: 152px; min-height: 188px; }
  .rm-potato { right: 182px; bottom: 68px; width: 132px; height: 104px; }
  .rm-green-token { right: 258px; bottom: 24px; width: 78px; height: 78px; }
}

@media (max-width: 640px) {
  .gate-canvas {
    height: max(100svh, 760px);
    min-height: 760px;
  }

  .rm-black-panel {
    left: 5%;
    right: 5%;
    top: 74px;
    bottom: 66px;
  }

  .gate-title {
    top: 202px;
    width: 360px;
    max-width: calc(100% - 38px);
    font-size: 62px;
  }

  .gate-title span:first-child {
    font-size: 0.5em;
  }

  .gate-brand,
  .gate-brand:hover {
    right: 14px;
    bottom: 14px;
    min-width: 126px;
    min-height: 48px;
    padding: 7px 18px;
    font-size: 15px;
  }

  .rm-tape { left: -18px; top: 74px; width: 132px; height: 76px; }
  .rm-pass-card { left: 88px; top: 72px; width: 100px; height: 72px; }
  .rm-ticket-top { left: 168px; top: 122px; width: 184px; height: 36px; font-size: 15px; }
  .rm-bus-ticket { left: 226px; top: 78px; width: 156px; min-height: 92px; padding: 10px; font-size: 10px; }
  .rm-card-photo { right: -36px; top: 98px; width: 112px; height: 94px; }
  .rm-receipt-a { left: -50px; top: 190px; width: 112px; height: 210px; }
  .rm-currency { left: -118px; top: 314px; width: 214px; height: 112px; }
  .rm-tea-tag { left: 74px; top: 390px; width: 90px; height: 106px; font-size: 12px; }
  .rm-matchbox { left: 142px; top: 368px; width: 94px; height: 126px; font-size: 13px; }
  .rm-palette { left: -46px; bottom: 92px; width: 164px; height: 116px; }
  .rm-blue-bottle { left: 80px; bottom: 12px; width: 118px; height: 152px; }
  .rm-coin-a { left: 230px; top: 426px; width: 62px; height: 62px; }
  .rm-coin-b { right: 90px; top: 158px; width: 66px; height: 66px; }
  .rm-paint-tube { right: 78px; top: 174px; width: 52px; height: 186px; font-size: 9px; }
  .rm-keytag { right: 84px; top: 342px; width: 72px; height: 72px; }
  .rm-phone-card { right: -36px; top: 276px; width: 74px; height: 108px; font-size: 34px; }
  .rm-crumple { right: -56px; top: 72px; width: 126px; height: 94px; }
  .rm-white-strip { right: 28px; bottom: 220px; width: 172px; height: 42px; line-height: 42px; font-size: 22px; }
  .rm-receipt-b { left: 196px; bottom: 24px; width: 146px; min-height: 126px; padding: 14px; font-size: 10px; }
  .rm-vaccine-card { right: -70px; bottom: 96px; width: 132px; min-height: 166px; padding: 13px; font-size: 10px; }
  .rm-potato { right: 98px; bottom: 84px; width: 104px; height: 82px; }
  .rm-green-token { right: 166px; bottom: 38px; width: 66px; height: 66px; font-size: 10px; }
}

/* Readymag clone fidelity pass: denser scan-cutout collage. */
.rm-black-panel {
  left: 4%;
  right: 4%;
  top: 62px;
  bottom: 34px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 207, 38, 0.035), transparent 38%),
    #050505;
}

.gate-title {
  top: 146px;
  width: 860px;
  max-width: calc(100% - 90px);
  font-size: 128px;
  line-height: 0.86;
  z-index: 72;
}

.gate-title span:first-child {
  font-size: 0.72em;
  line-height: 0.9;
}

.rm-sticker {
  transform-origin: 50% 50%;
  filter:
    drop-shadow(0 16px 9px rgba(0, 0, 0, 0.48))
    saturate(1.16)
    contrast(1.08);
}

.rm-bus-ticket,
.rm-receipt-a,
.rm-receipt-b,
.rm-vaccine-card,
.rm-ripped-receipt,
.rm-map-slip,
.rm-white-strip,
.rm-ticket-top {
  border: 1px solid rgba(22, 16, 8, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.rm-bus-ticket,
.rm-receipt-a,
.rm-ripped-receipt,
.rm-vaccine-card {
  clip-path: polygon(0 4%, 6% 0, 16% 3%, 30% 0, 44% 3%, 62% 1%, 77% 4%, 92% 1%, 100% 5%, 98% 94%, 88% 100%, 72% 97%, 55% 100%, 40% 97%, 22% 100%, 8% 96%, 0 99%);
}

.rm-comic-card {
  --r: -10deg;
  --z: 49;
  left: 4px;
  top: 222px;
  width: 112px;
  height: 132px;
  padding: 8px;
  border: 2px solid #30291c;
  background: #f0e3a8;
}

.rm-comic-card span {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 28% 30%, #c7362f 0 12px, transparent 13px),
    radial-gradient(circle at 67% 32%, #2b70ba 0 12px, transparent 13px),
    radial-gradient(circle at 50% 70%, #fef019 0 24px, transparent 25px),
    repeating-linear-gradient(90deg, #111 0 1px, transparent 1px 9px),
    #e9d1a1;
}

.rm-map-slip {
  --r: 66deg;
  --z: 56;
  left: 196px;
  top: 70px;
  width: 94px;
  height: 224px;
  padding: 18px 12px;
  background:
    repeating-linear-gradient(0deg, rgba(31, 108, 96, 0.34) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(90deg, rgba(31, 108, 96, 0.22) 0 2px, transparent 2px 12px),
    #efe8d1;
  color: #143d36;
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.rm-metal-ring {
  --r: 12deg;
  --z: 67;
  left: 318px;
  top: 40px;
  width: 96px;
  height: 96px;
  border: 11px solid #050505;
  border-left-color: #d7d2c5;
  border-bottom-color: #d7d2c5;
  border-radius: 50%;
  background: transparent;
}

.rm-metal-ring::after {
  content: "";
  position: absolute;
  right: -28px;
  top: 26px;
  width: 58px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(90deg, #dfd9c8, #101010);
  transform: rotate(16deg);
}

.rm-figure {
  --r: 14deg;
  --z: 71;
  right: 444px;
  top: 48px;
  width: 122px;
  height: 176px;
}

.rm-figure::before {
  content: "";
  position: absolute;
  left: 41px;
  top: 0;
  width: 52px;
  height: 62px;
  border-radius: 24px 24px 18px 18px;
  background:
    radial-gradient(circle at 18px 28px, #171717 0 4px, transparent 5px),
    radial-gradient(circle at 34px 28px, #171717 0 4px, transparent 5px),
    linear-gradient(#c89a68, #b27848);
}

.rm-figure::after {
  content: "";
  position: absolute;
  left: 44px;
  top: 58px;
  width: 54px;
  height: 82px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, 0.22) 12px 18px, transparent 18px),
    #956538;
  box-shadow:
    -25px 13px 0 -9px #c89a68,
    25px 13px 0 -9px #c89a68,
    -12px 76px 0 -8px #4b2b19,
    18px 76px 0 -8px #4b2b19;
}

.rm-blue-tray {
  --r: 8deg;
  --z: 64;
  right: 138px;
  top: 100px;
  width: 104px;
  height: 272px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 32px, #101010 0 18px, transparent 19px),
    radial-gradient(circle at 50% 84px, #101010 0 18px, transparent 19px),
    radial-gradient(circle at 50% 136px, #101010 0 18px, transparent 19px),
    radial-gradient(circle at 50% 188px, #101010 0 18px, transparent 19px),
    radial-gradient(circle at 50% 240px, #101010 0 18px, transparent 19px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.32), transparent 35%),
    #1f77d2;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.rm-ripped-receipt {
  --r: 12deg;
  --z: 61;
  right: 292px;
  top: 338px;
  display: grid;
  gap: 8px;
  width: 150px;
  min-height: 196px;
  padding: 16px 14px;
  background:
    repeating-linear-gradient(0deg, transparent 0 19px, rgba(0, 0, 0, 0.12) 19px 20px),
    #eee8dc;
  color: #31241a;
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: 800;
}

.rm-ripped-receipt::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 62px;
  height: 62px;
  background:
    linear-gradient(90deg, #111 0 5px, transparent 5px 9px),
    linear-gradient(#fff, #fff);
}

.rm-shell {
  --r: -8deg;
  --z: 70;
  right: 112px;
  bottom: 134px;
  width: 132px;
  height: 86px;
  clip-path: polygon(2% 56%, 8% 30%, 27% 20%, 45% 3%, 64% 17%, 78% 8%, 94% 32%, 98% 62%, 82% 78%, 58% 89%, 34% 82%, 18% 95%);
  background:
    radial-gradient(circle at 72% 40%, rgba(51, 32, 20, 0.32) 0 8px, transparent 9px),
    linear-gradient(135deg, #eee4c5, #ad9166 48%, #604a34);
}

.rm-red-seal {
  --r: -16deg;
  --z: 75;
  right: 432px;
  bottom: 78px;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #d9e3c5 0 20px, transparent 21px),
    #d5272f;
  color: #18884c;
  font-size: 12px;
  font-weight: 900;
}

.rm-barcode-tag {
  --r: -6deg;
  --z: 76;
  right: 252px;
  bottom: 146px;
  width: 184px;
  height: 56px;
  padding: 10px 12px;
  background:
    linear-gradient(90deg, transparent 0 34%, rgba(0, 0, 0, 0.12) 34% 35%, transparent 35%),
    #f3f0e8;
  color: #111;
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 900;
}

.rm-barcode-tag::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 9px;
  width: 86px;
  height: 34px;
  background: repeating-linear-gradient(90deg, #111 0 5px, transparent 5px 9px);
}

.rm-ripped-paper {
  --r: 16deg;
  --z: 69;
  right: 16px;
  top: 50px;
  width: 182px;
  height: 138px;
  clip-path: polygon(4% 12%, 24% 1%, 42% 10%, 57% 0, 74% 18%, 94% 8%, 88% 32%, 100% 48%, 85% 61%, 91% 84%, 69% 78%, 54% 100%, 33% 83%, 11% 91%, 16% 65%, 0 49%);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.44), transparent 28%),
    linear-gradient(40deg, #a49772, #d1c392 52%, #6d5e42);
}

.rm-little-card {
  --r: 3deg;
  --z: 73;
  right: 4px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 72px;
  height: 48px;
  background: transparent;
  color: #111;
  font-size: 22px;
  font-weight: 900;
}

.rm-little-card span {
  display: block;
}

.rm-ticket-top { left: 258px; top: 122px; z-index: 58; }
.rm-bus-ticket { left: 438px; top: 54px; z-index: 53; }
.rm-card-photo { right: 288px; top: 44px; z-index: 57; }
.rm-paint-tube { right: 230px; top: 104px; z-index: 68; }
.rm-phone-card { right: -4px; top: 216px; z-index: 63; }
.rm-vaccine-card { right: 10px; bottom: 64px; z-index: 45; }
.rm-potato { right: 318px; bottom: 42px; z-index: 48; }
.rm-green-token { right: 428px; bottom: 20px; z-index: 74; }
.rm-receipt-b { left: 486px; bottom: 0; z-index: 47; }
.rm-white-strip { right: 284px; bottom: 156px; z-index: 72; }
.rm-keytag { right: 336px; top: 304px; z-index: 65; }
.rm-palette { left: 0; bottom: 32px; z-index: 78; }
.rm-blue-bottle { left: 146px; bottom: -36px; z-index: 50; }
.rm-comic-card { left: 0; top: 218px; }
.rm-map-slip { left: 206px; top: 72px; }
.rm-metal-ring { left: 322px; top: 36px; }
.rm-figure { right: 486px; top: 42px; }
.rm-blue-tray { right: 158px; top: 88px; }
.rm-ripped-receipt { right: 294px; top: 336px; }
.rm-shell { right: 126px; bottom: 136px; }
.rm-red-seal { right: 430px; bottom: 72px; }
.rm-barcode-tag { right: 260px; bottom: 154px; }
.rm-ripped-paper { right: 0; top: 52px; }
.rm-little-card { right: 18px; top: 74px; z-index: 43; }

@media (max-width: 920px) {
  .gate-title {
    top: 172px;
    width: 650px;
    max-width: calc(100% - 52px);
    font-size: 96px;
  }

  .rm-comic-card { left: -22px; top: 202px; width: 100px; height: 118px; }
  .rm-map-slip { left: 136px; top: 80px; width: 78px; height: 188px; }
  .rm-metal-ring { left: 226px; top: 42px; width: 76px; height: 76px; }
  .rm-figure { right: 312px; top: 56px; width: 96px; height: 144px; }
  .rm-blue-tray { right: 72px; top: 128px; width: 86px; height: 226px; }
  .rm-ripped-receipt { right: 162px; top: 338px; width: 128px; min-height: 164px; }
  .rm-shell { right: 46px; bottom: 156px; width: 110px; height: 72px; }
  .rm-red-seal { right: 248px; bottom: 88px; width: 74px; height: 74px; }
  .rm-barcode-tag { right: 88px; bottom: 178px; width: 156px; }
  .rm-ripped-paper { right: -38px; top: 74px; width: 150px; height: 112px; }
}

@media (max-width: 640px) {
  .rm-black-panel {
    top: 72px;
    bottom: 52px;
  }

  .gate-title {
    top: 188px;
    width: 400px;
    max-width: calc(100% - 36px);
    font-size: 68px;
  }

  .gate-title span:first-child {
    font-size: 0.64em;
  }

  .rm-comic-card { left: -44px; top: 210px; width: 86px; height: 102px; }
  .rm-map-slip { left: 92px; top: 84px; width: 64px; height: 164px; }
  .rm-metal-ring { left: 170px; top: 38px; width: 60px; height: 60px; border-width: 8px; }
  .rm-figure { right: 132px; top: 54px; width: 78px; height: 116px; }
  .rm-blue-tray { right: -18px; top: 184px; width: 62px; height: 184px; }
  .rm-paint-tube { right: -8px; top: 128px; width: 52px; height: 186px; font-size: 9px; }
  .rm-ripped-receipt { right: 80px; top: 342px; width: 112px; min-height: 144px; padding: 12px; font-size: 10px; }
  .rm-shell { right: 16px; bottom: 168px; width: 92px; height: 62px; }
  .rm-red-seal { right: 160px; bottom: 84px; width: 62px; height: 62px; font-size: 10px; }
  .rm-barcode-tag { right: 22px; bottom: 206px; width: 134px; height: 44px; }
  .rm-ripped-paper { right: -44px; top: 70px; width: 120px; height: 92px; }
  .rm-little-card { right: 8px; top: 82px; width: 52px; height: 34px; font-size: 16px; }
}

/* Exact reference sticker asset pass. */
.rm-sticker.rm-ref-sticker {
  display: block;
  max-width: none;
  width: var(--w);
  height: var(--h);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  clip-path: none;
  object-fit: fill;
  transform: translate3d(var(--drag-x), var(--drag-y), 0) rotate(var(--r)) scale(var(--s, 1));
  transform-origin: center center;
  z-index: var(--z);
  filter:
    drop-shadow(0 13px 8px rgba(0, 0, 0, 0.42))
    saturate(1.04)
    contrast(1.03);
}

.rm-ref-01 { --r: -9deg; --z: 83; --w: 158.75px; --h: 116.25px; left: 22.5px; top: 48.75px; }
.rm-ref-02 { --r: 67deg; --z: 69; --w: 127.5px; --h: 258.75px; left: 243.75px; top: -35px; }
.rm-ref-03 { --r: -121deg; --z: 67; --w: 196.25px; --h: 122.5px; left: 111.25px; top: 185px; }
.rm-ref-04 { --r: -11deg; --z: 70; --w: 198.75px; --h: 33.75px; left: 245px; top: 173.75px; }
.rm-ref-05 { --r: 5deg; --z: 68; --w: 222.5px; --h: 137.5px; left: 422.5px; top: 46.25px; }
.rm-ref-06 { --r: 72deg; --z: 76; --w: 112.5px; --h: 225px; left: 708.75px; top: -10px; }
.rm-ref-07 { --r: 14deg; --z: 80; --w: 101.25px; --h: 141.25px; left: 892.5px; top: 47.5px; }
.rm-ref-08 { --r: -56deg; --z: 84; --w: 147.5px; --h: 225px; left: 1072.5px; top: 10px; }
.rm-ref-09 { --r: -10deg; --z: 59; --w: 117.5px; --h: 273.75px; left: 1038.75px; top: 101.25px; }
.rm-ref-10 { --r: -8deg; --z: 87; --w: 72.5px; --h: 253.75px; left: 968.75px; top: 142.5px; }
.rm-ref-11 { --r: -24deg; --z: 61; --w: 101.25px; --h: 100px; left: 815px; top: 125px; }
.rm-ref-12 { --r: 8deg; --z: 79; --w: 107.5px; --h: 135px; left: 1163.75px; top: 256.25px; }
.rm-ref-13 { --r: 14deg; --z: 58; --w: 128.75px; --h: 192.5px; left: 28.75px; top: 151.25px; }
.rm-ref-14 { --r: -5deg; --z: 60; --w: 336.25px; --h: 161.25px; left: -13.75px; top: 316.25px; }
.rm-ref-15 { --r: -20deg; --z: 81; --w: 165px; --h: 86.25px; left: 290px; top: 288.75px; }
.rm-ref-16 { --r: -12deg; --z: 62; --w: 130px; --h: 176.25px; left: 256.25px; top: 330px; }
.rm-ref-17 { --r: 52deg; --z: 78; --w: 101.25px; --h: 193.75px; left: 878.75px; top: 248.75px; }
.rm-ref-18 { --r: -15deg; --z: 64; --w: 136.25px; --h: 183.75px; left: 925px; top: 382.5px; }
.rm-ref-19 { --r: 132deg; --z: 73; --w: 188.75px; --h: 263.75px; left: 36.25px; top: 462.5px; }
.rm-ref-20 { --r: -62deg; --z: 71; --w: 213.75px; --h: 225px; left: 226.25px; top: 521.25px; }
.rm-ref-21 { --r: -82deg; --z: 66; --w: 121.25px; --h: 207.5px; left: 517.5px; top: 545px; }
.rm-ref-22 { --r: -9deg; --z: 74; --w: 360px; --h: 63.75px; left: 651.25px; top: 521.25px; }
.rm-ref-23 { --r: 18deg; --z: 63; --w: 210px; --h: 291.25px; left: 1031.25px; top: 420px; }
.rm-ref-24 { --r: -10deg; --z: 85; --w: 163.75px; --h: 100px; left: 1011.25px; top: 532.5px; }
.rm-ref-25 { --r: 80deg; --z: 75; --w: 140px; --h: 188.75px; left: 791.25px; top: 540px; }
.rm-ref-26 { --r: -19deg; --z: 56; --w: 97.5px; --h: 128.75px; left: 287.5px; top: 581.25px; }
.rm-ref-27 { --r: -68deg; --z: 86; --w: 76.25px; --h: 97.5px; left: 712.5px; top: 630px; }
.rm-ref-28 { --r: -75deg; --z: 82; --w: 80px; --h: 276.25px; left: 1086.25px; top: 2.5px; }
.rm-ref-29 { --r: 17deg; --z: 65; --w: 162.5px; --h: 121.25px; left: 987.5px; top: 351.25px; }
.rm-ref-30 { --r: -221deg; --z: 77; --w: 131.25px; --h: 176.25px; left: 190px; top: 403.75px; }
.rm-ref-31 { --r: 12deg; --z: 72; --w: 116.25px; --h: 133.75px; left: 87.5px; top: 417.5px; }
.rm-ref-32 { --r: 27deg; --z: 55; --w: 103.75px; --h: 102.5px; left: 402.5px; top: 512.5px; }

.gate-title {
  top: calc(62px + (100% - 96px) / 2);
  z-index: 75;
  width: 800px;
  max-width: calc(100% - 110px);
  font-size: 108px;
  transform: translate(-50%, -50%);
}

.gate-title span:first-child {
  font-size: 0.68em;
}

@media (max-width: 920px) {
  .rm-sticker.rm-ref-sticker {
    translate: -18px 20px;
    scale: 0.76;
  }

  .gate-title {
    top: calc(62px + (100% - 96px) / 2);
    max-width: calc(100% - 60px);
    font-size: 84px;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 640px) {
  .rm-sticker.rm-ref-sticker {
    translate: -18px 28px;
    scale: 0.54;
  }

  .gate-title {
    top: calc(72px + (100% - 124px) / 2);
    width: 410px;
    max-width: calc(100% - 32px);
    font-size: 70px;
    transform: translate(-50%, -50%);
    z-index: 75;
  }

  .gate-title span:first-child {
    font-size: 0.62em;
  }
}

/* VROWN clone-tight pass: match the Analogue reference frame and density. */
body[data-view="vrown"] .app-menu {
  display: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-nav {
  display: grid !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage {
  overflow: hidden;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-hero {
  height: 613px;
  min-height: 613px;
  padding: 96px 22px 0;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-logo {
  width: min(860px, 74vw);
  height: 214px;
  margin-bottom: 26px;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-logo-lottie {
  transform: scale(1.1);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-logo-sticker {
  --logo-sticker-rotate: 7deg;
  right: -42px;
  top: -2px;
  z-index: 8;
  width: 184px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transform:
    translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0)
    rotate(var(--logo-sticker-rotate));
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-logo-sticker-secondary {
  --logo-sticker-rotate: 8deg;
  right: -48px;
  top: 88px;
  z-index: 9;
  width: 108px;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-logo-sticker.is-dragging {
  z-index: 1000;
  cursor: grabbing;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-logo-sticker img {
  pointer-events: none;
  -webkit-user-drag: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-connect {
  position: relative;
  display: block;
  overflow: hidden;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-connect span {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 23px;
  text-align: center;
  transform: translateY(-50%);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-connect span + span {
  display: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-connect:hover span {
  transform: translateY(-50%);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-manifesto {
  width: min(918px, 74vw);
  font-size: clamp(31px, 2.62vw, 37px);
  line-height: 1.08;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-banner {
  height: 720px;
  margin-top: 0;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-banner,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-intro,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-work-card,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-play-machine,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-membership {
  --card-reveal-y: 0px;
  opacity: 1;
  transform: translateY(0) rotate(var(--va-reveal-rotate, 0deg));
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-work-card {
  transform:
    translateY(0)
    rotateX(var(--card-tilt-y, 0deg))
    rotateY(var(--card-tilt-x, 0deg));
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-banner video {
  object-position: 50% 43%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-card img[src*="vrown-featured-sj-"] {
  object-position: 50% 24%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-card:nth-child(1) img[src*="vrown-featured-sj-"],
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-card:nth-child(2) img[src*="vrown-featured-sj-"],
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-card:nth-child(5) img[src*="vrown-featured-sj-"],
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-card:nth-child(7) img[src*="vrown-featured-sj-"] {
  object-position: 50% 16%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-card:nth-child(3) img[src*="vrown-featured-sj-"],
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-card:nth-child(6) img[src*="vrown-featured-sj-"] {
  object-position: 50% 45%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-intro {
  min-height: 610px;
  padding-top: 84px;
  padding-bottom: 74px;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work {
  min-height: 690px;
  padding: 58px 0 70px;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-section-head {
  padding: 0 65px 58px 66px;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-section-head h2 {
  font-size: clamp(44px, 4.08vw, 58px);
  line-height: 0.95;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-rail {
  grid-auto-columns: clamp(330px, 37.25vw, 477px);
  gap: 10px;
  padding: 0 0 30px;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-card img,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-card video {
  aspect-ratio: 477 / 382;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-card h3 {
  font-size: clamp(20px, 1.6vw, 23px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-card p {
  font-size: clamp(16px, 1.32vw, 19px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-object-rail {
  grid-auto-columns: clamp(260px, 28vw, 380px);
  gap: 14px;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-v-object-card img {
  aspect-ratio: 4 / 5;
  object-position: 50% 50%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-v-object-card h3 {
  font-size: clamp(19px, 1.45vw, 22px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof {
  min-height: 760px;
  padding-top: 112px;
  padding-bottom: 94px;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof > p {
  max-width: 910px;
  font-size: clamp(42px, 4vw, 60px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready [data-vrown-drag] {
  --reveal-scale: 1;
  opacity: 1;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-reviews {
  min-height: 1060px;
  padding: 98px 0 120px;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-reviews::before {
  content: "??????;
  position: absolute;
  left: 70%;
  top: 58px;
  z-index: 5;
  color: #050505;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0;
  transform: rotate(1deg);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-large {
  left: 19%;
  top: 92px;
  width: 608px;
  min-height: 205px;
  padding: 38px 40px;
  font-size: clamp(42px, 4.2vw, 57px);
  line-height: 1.02;
  transform: rotate(-2deg);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window {
  left: 34%;
  top: 300px;
  width: 545px;
  min-height: 374px;
  padding: 76px 38px 34px;
  transform: rotate(0.4deg);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window strong {
  font-size: clamp(58px, 5.7vw, 82px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .puff-one {
  left: 15%;
  top: 260px;
  width: 250px;
  transform: rotate(-12deg);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .puff-two {
  right: 11%;
  top: 410px;
  width: 260px;
  transform: rotate(15deg);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote {
  right: 7%;
  top: 570px;
  width: 505px;
  min-height: 245px;
  transform: rotate(2deg);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic {
  left: 6%;
  top: 690px;
  width: 355px;
  transform: rotate(-3deg);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
  left: 45%;
  bottom: 56px;
  width: 520px;
  transform: rotate(-1deg);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-play {
  min-height: 560px;
  padding-top: 72px;
}

@media (max-width: 980px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-hero {
    height: auto;
    min-height: 680px;
    padding-top: 132px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-logo-sticker {
    width: 116px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-logo-sticker-secondary {
    width: 74px;
  }
}

/* Final global navigation pass: keep the HOME menu as the only top menu. */
body .app-menu,
body[data-view="home"] .app-menu,
body[data-view="vrown"] .app-menu,
body[data-view="zungk"] .app-menu,
body[data-view="letter"] .app-menu,
body[data-view="game"] .app-menu,
body:has(.site-shell[data-view="zungk"]) .app-menu {
  display: flex !important;
  z-index: 260;
}

.site-shell .topbar,
.vrown-view .va-nav,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-nav,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-nav,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-old-stage .va-nav,
.vrown-edge-nav,
.zungk-view .as-nav,
.analogue-studio .as-nav,
.game-view .trends-header {
  display: none !important;
}

@media (max-width: 640px) {
  body .app-menu,
  body[data-view="home"] .app-menu,
  body[data-view="vrown"] .app-menu,
  body[data-view="zungk"] .app-menu,
  body[data-view="letter"] .app-menu,
  body[data-view="game"] .app-menu,
  body:has(.site-shell[data-view="zungk"]) .app-menu {
    display: grid !important;
  }
}

/* VROWN lower interaction pass: drag carousel, spin objects, and review windows. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-carousel {
  position: relative;
  cursor: grab;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-carousel.is-dragging,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-rail.is-dragging {
  cursor: grabbing;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-rail {
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  user-select: none;
  touch-action: pan-y;
  cursor: grab;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-rail::-webkit-scrollbar {
  display: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-rail.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-card {
  cursor: grab;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-rail.is-dragging .va-work-card {
  cursor: grabbing;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-carousel-control {
  position: absolute;
  top: 38%;
  z-index: 12;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 2px solid #050505;
  border-radius: 999px;
  background: #fff;
  box-shadow: 7px 7px 0 #050505;
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-carousel-control::before {
  content: "";
  width: 17px;
  height: 17px;
  border-top: 3px solid #050505;
  border-left: 3px solid #050505;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-carousel-prev {
  left: 28px;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-carousel-prev::before {
  transform: translateX(4px) rotate(-45deg);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-carousel-next {
  right: 28px;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-carousel-next::before {
  transform: translateX(-4px) rotate(135deg);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-carousel-control:hover {
  background: #ff64cb;
  transform: translate(-2px, -2px) rotate(-4deg);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-carousel-control:active {
  box-shadow: 3px 3px 0 #050505;
  transform: translate(4px, 4px) rotate(2deg);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage [data-vrown-drag] {
  --spin-rotate: 0deg;
  cursor: grab;
  pointer-events: auto;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage [data-vrown-drag].is-dragging {
  cursor: grabbing;
  transition: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage [data-vrown-drag].is-settling {
  transition:
    filter 220ms ease,
    opacity 420ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .client-logo-1,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .client-logo-2,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .client-logo-3,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .client-logo-4,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .client-logo-5,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .client-logo-6,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-large,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .puff-one,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .puff-two,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-play-word,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-play-phone,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-play-machine[data-vrown-drag] {
  transform:
    translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0)
    rotate(calc(var(--va-rotate, 0deg) + var(--spin-rotate, 0deg)))
    scale(var(--reveal-scale, 1));
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-play-wanna {
  --va-rotate: -2deg;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-play-phone {
  --va-rotate: 2deg;
  z-index: 5;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-play-play {
  --va-rotate: 1deg;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-play-copy .va-play-connect[data-vrown-drag] {
  --va-rotate: -4deg;
  transform:
    translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0)
    translateX(-50%)
    rotate(calc(var(--va-rotate, 0deg) + var(--spin-rotate, 0deg)))
    scale(var(--reveal-scale, 1));
  cursor: grab;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-play-copy .va-play-connect[data-vrown-drag].is-dragging {
  cursor: grabbing;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-play-machine[data-vrown-drag] {
  --va-rotate: -1deg;
  cursor: grab;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review {
  z-index: var(--review-z, 2);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window::before,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote::before {
  display: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-large,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
  overflow: hidden;
  padding-top: 74px;
  border: 3px solid #050505;
  border-radius: 8px;
  box-shadow: 12px 12px 0 #050505;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-controls {
  position: absolute;
  inset: 0 0 auto;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border-bottom: 3px solid #050505;
  background: #050505;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-control {
  display: block;
  width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
  border: 2px solid #050505;
  border-radius: 999px;
  background: #ff64cb;
  cursor: pointer;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-control.is-minimise {
  background: #fef019;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-control.is-fullscreen {
  background: #baff00;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-control:hover {
  transform: scale(1.2);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review.is-review-minimized {
  width: 285px !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review.is-review-minimized > :not(.va-review-controls) {
  opacity: 0;
  pointer-events: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review.is-review-expanded {
  left: clamp(24px, 18vw, 260px) !important;
  right: auto !important;
  top: 135px !important;
  bottom: auto !important;
  z-index: 190 !important;
  width: min(760px, calc(100vw - 90px)) !important;
  min-height: 430px !important;
  transform:
    translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0)
    rotate(var(--spin-rotate, 0deg))
    scale(1.03) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review.is-review-closed {
  opacity: 0 !important;
  pointer-events: none;
  transform:
    translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0)
    rotate(calc(var(--va-rotate, 0deg) + var(--spin-rotate, 0deg)))
    scale(0.8) !important;
}

@media (max-width: 760px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-carousel-control {
    width: 52px;
    height: 52px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-carousel-prev {
    left: 14px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-carousel-next {
    right: 14px;
  }
}

/* VROWN hero logo swap: keep the Analogue clone effects, replace the mark. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-logo {
  width: min(940px, 76vw);
  height: clamp(168px, 18.8vw, 238px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-logo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 9px 0 rgba(5, 5, 5, 0.08));
  transform: scale(1.03);
  transition:
    opacity 260ms ease,
    filter 260ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-logo-inflate-image {
  inset: -18px -46px -18px;
  width: calc(100% + 92px);
  height: calc(100% + 36px);
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 14px 0 rgba(255, 100, 203, 0.22))
    drop-shadow(0 -6px 0 rgba(186, 255, 0, 0.16));
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage.is-logo-inflated .va-logo-image {
  opacity: 0.12;
  filter: blur(0.8px) saturate(0.82);
  transform: scale(0.99);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage.is-logo-inflated .va-logo-inflate-image {
  opacity: 1;
  transform: scale(1.07) rotate(-1deg);
}

@media (max-width: 760px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-logo {
    width: min(92vw, 620px);
    height: clamp(112px, 26vw, 168px);
  }
}

/* VROWN client sticker pass: match the Analogue scroll-in sticker behavior. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof {
  min-height: 766px;
  padding-top: 112px;
  padding-bottom: 96px;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof > p {
  pointer-events: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media {
  left: 50%;
  right: auto;
  width: min(1160px, calc(100% - 120px));
  height: 766px;
  overflow: visible;
  transform: translateX(-50%);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .va-client-sticker {
  --client-delay: 0ms;
  --client-inner-scale: 0.02;
  --client-pop-y: 34px;
  position: absolute;
  z-index: 5;
  display: block;
  width: var(--client-width);
  height: auto;
  cursor: grab;
  opacity: 0;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  transform:
    translate3d(var(--drag-x, 0px), calc(var(--drag-y, 0px) + var(--client-pop-y)), 0)
    rotate(calc(var(--va-rotate, 0deg) + var(--spin-rotate, 0deg)))
    scale(var(--reveal-scale, 0.82));
  transition:
    opacity 260ms ease var(--client-delay),
    filter 180ms ease,
    transform 300ms linear;
  will-change: transform, opacity;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .va-client-sticker .inner--zoom {
  display: block;
  width: 100%;
  transform: scale(var(--client-inner-scale));
  transform-origin: 50% 50%;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1) var(--client-delay);
  will-change: transform;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .va-client-sticker img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
  filter: saturate(1.06) contrast(1.02);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-proof-media .va-client-sticker {
  --reveal-scale: 0.82;
  opacity: 0;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-proof-media .va-client-sticker.is-in-view,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-proof-media .va-client-sticker.is-dragging {
  --client-inner-scale: 1;
  --client-pop-y: 0px;
  --reveal-scale: 1;
  opacity: 1;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .va-client-sticker:hover,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .va-client-sticker.is-hovered {
  filter: drop-shadow(8px 10px 0 rgba(5, 5, 5, 0.12));
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .va-client-sticker:hover .inner--zoom,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .va-client-sticker.is-hovered .inner--zoom {
  transform: scale(1.045);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .va-client-sticker.is-dragging {
  --client-inner-scale: 1;
  --client-pop-y: 0px;
  z-index: 1000;
  cursor: grabbing;
  opacity: 1;
  filter: drop-shadow(12px 16px 0 rgba(5, 5, 5, 0.16));
  transition:
    filter 180ms ease,
    transform 120ms linear !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .va-client-sticker.is-settling {
  transition:
    filter 180ms ease,
    transform 300ms linear !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .va-client-sticker.is-dragging .inner--zoom {
  transform: scale(1);
  transition: transform 120ms linear;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .client-logo-1 {
  --client-width: clamp(258px, 25.4vw, 325px);
  --va-rotate: -1deg;
  --client-delay: 0ms;
  left: 4%;
  top: 14.5%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .client-logo-2 {
  --client-width: clamp(176px, 16.4vw, 210px);
  --va-rotate: 0deg;
  --client-delay: 80ms;
  left: 38%;
  top: 10%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .client-logo-3 {
  --client-width: clamp(232px, 22.6vw, 290px);
  --va-rotate: 1deg;
  --client-delay: 150ms;
  right: 8%;
  top: 11%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .client-logo-4 {
  --client-width: clamp(232px, 22.6vw, 290px);
  --va-rotate: -1deg;
  --client-delay: 230ms;
  left: 10%;
  bottom: 10.5%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .client-logo-5 {
  --client-width: clamp(278px, 27.2vw, 348px);
  --va-rotate: 0.5deg;
  --client-delay: 300ms;
  left: 46%;
  bottom: 6%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .client-logo-6 {
  --client-width: clamp(172px, 16.4vw, 210px);
  --va-rotate: 0deg;
  --client-delay: 380ms;
  right: 5%;
  bottom: 19%;
}

@media (max-width: 760px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media {
    left: 0;
    width: 100%;
    transform: none;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .client-logo-1 {
    left: -6%;
    top: 14%;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .client-logo-2 {
    left: 43%;
    top: 5%;
  }

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media .client-logo-3 {
    right: -7%;
    top: 19%;
  }
}

/* LETTER keeps Analogue's slimmer work-page navigation, overriding global pill menus. */
.site-shell[data-view="letter"] .topbar {
  top: 24px;
  left: clamp(28px, 4.7vw, 60px);
  right: clamp(28px, 4.7vw, 60px);
  width: auto;
  max-width: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.site-shell[data-view="letter"] .topbar .nav {
  display: flex;
  justify-content: flex-end;
  gap: clamp(18px, 3vw, 42px);
}

.site-shell[data-view="letter"] .topbar .nav-link {
  display: inline-grid;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-shadow: none;
}

.site-shell[data-view="letter"] .topbar .nav-link.is-active {
  min-width: 66px;
  min-height: 28px;
  border: 2px solid #000;
  border-radius: 999px;
  background: transparent;
  color: #000;
}

.site-shell[data-view="letter"] .topbar .nav-link:hover {
  background: transparent;
  color: #000;
  transform: none;
}

@media (max-width: 640px) {
  .site-shell[data-view="letter"] .topbar {
    top: 8px;
    left: 6px;
    right: 6px;
  }

  .site-shell[data-view="letter"] .topbar .nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
  }

  .site-shell[data-view="letter"] .topbar .nav-link {
    min-height: 34px;
    font-size: 10px;
  }

  .site-shell[data-view="letter"] .topbar .nav-link.is-active {
    min-width: 0;
    min-height: 34px;
  }
}

body[data-view="letter"] .app-menu {
  top: 24px;
  left: clamp(28px, 4.7vw, 60px);
  right: clamp(28px, 4.7vw, 60px);
  width: auto;
  max-width: none;
  justify-content: flex-end;
  gap: clamp(18px, 3vw, 42px);
  background: transparent;
  box-shadow: none;
}

body[data-view="letter"] .app-menu button,
body[data-view="letter"] .app-menu a {
  flex: 0 0 auto;
  min-height: 28px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-shadow: none;
}

body[data-view="letter"] .app-menu button[data-target="letter"] {
  min-width: 66px;
  min-height: 28px;
  border: 2px solid #000;
  border-radius: 999px;
}

body[data-view="letter"] .app-menu button:hover,
body[data-view="letter"] .app-menu a:hover {
  background: transparent;
  color: #000;
  transform: none;
}

@media (max-width: 640px) {
  body[data-view="letter"] .app-menu {
    top: 8px;
    left: 6px;
    right: 6px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
  }

  body[data-view="letter"] .app-menu button,
  body[data-view="letter"] .app-menu a,
  body[data-view="letter"] .app-menu button[data-target="letter"] {
    min-width: 0;
    min-height: 34px;
    font-size: 10px;
  }
}

/* LETTER pass 3: keep the Analogue work-page shell, restore the original letter posts. */
body[data-view="letter"] .letter-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.8vw, 36px);
  align-items: start;
}

body[data-view="letter"] .message.letter-card,
body[data-view="letter"] .message.letter-card.is-wide,
body[data-view="letter"] .message.letter-card.is-tall,
body[data-view="letter"] .message.letter-card.is-left,
body[data-view="letter"] .message.letter-card.is-right,
body[data-view="letter"] .message.letter-card:nth-child(8n + 4),
body[data-view="letter"] .message.letter-card:nth-child(8n + 7) {
  grid-column: auto;
  display: block;
  width: 100%;
  max-width: none;
  padding: 7px;
  border: 4px solid #5d6675;
  border-radius: 0;
  background: #f7f8f8;
  color: #5d6675;
  box-shadow: none;
}

body[data-view="letter"] .message.letter-card.is-right {
  margin-top: clamp(24px, 4.6vw, 72px);
}

body[data-view="letter"] .letter-card-window {
  display: grid;
  gap: 6px;
}

body[data-view="letter"] .letter-card-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 72px;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

body[data-view="letter"] .letter-card-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 30px;
  background: #5d6675;
  color: #e8ebee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

body[data-view="letter"] .letter-card-to {
  min-width: 0;
  color: #5d6675;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="letter"] .letter-card-envelope {
  position: relative;
  display: block;
  width: 100%;
  height: 31px;
  border: 3px solid #5d6675;
  background: #5d6675;
}

body[data-view="letter"] .letter-card-envelope::before,
body[data-view="letter"] .letter-card-envelope::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body[data-view="letter"] .letter-card-envelope::before {
  background:
    linear-gradient(37deg, transparent 49%, #aeb5bf 50%, transparent 52%),
    linear-gradient(-37deg, transparent 49%, #aeb5bf 50%, transparent 52%);
}

body[data-view="letter"] .letter-card-envelope::after {
  border-top: 2px solid #aeb5bf;
  transform: translateY(13px);
}

body[data-view="letter"] .letter-card-body {
  min-height: clamp(250px, 30vw, 390px);
  padding: clamp(15px, 2.2vw, 25px);
  background: var(--card-bg);
  color: var(--card-fg);
  overflow: hidden;
}

body[data-view="letter"] .letter-card-body p {
  margin: 0;
  color: currentColor;
  font-size: clamp(30px, 3.7vw, 50px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-transform: none;
}

body[data-view="letter"] .letter-card-reply {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 2px solid currentColor;
  color: currentColor !important;
  font-size: 15px;
  font-style: normal !important;
  line-height: 1.35;
}

body[data-view="letter"] .letter-card-media,
body[data-view="letter"] .letter-card-caption,
body[data-view="letter"] .letter-card-number,
body[data-view="letter"] .letter-card-preview,
body[data-view="letter"] .letter-card-mark {
  display: none;
}

@media (max-width: 760px) {
  body[data-view="letter"] .letter-feed {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body[data-view="letter"] .message.letter-card,
  body[data-view="letter"] .message.letter-card.is-wide,
  body[data-view="letter"] .message.letter-card.is-tall,
  body[data-view="letter"] .message.letter-card.is-left,
  body[data-view="letter"] .message.letter-card.is-right,
  body[data-view="letter"] .message.letter-card:nth-child(8n + 4),
  body[data-view="letter"] .message.letter-card:nth-child(8n + 7) {
    grid-column: 1;
    margin-top: 0;
  }

  body[data-view="letter"] .letter-card-body {
    min-height: 260px;
  }
}

/* LETTER pass 4: return to the pre-reference 3-up letter card sizing. */
body[data-view="letter"] .letter-unsent-shell {
  padding-right: clamp(18px, 3vw, 30px);
  padding-left: clamp(18px, 3vw, 30px);
}

body[data-view="letter"] .letter-panel {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

body[data-view="letter"] .letter-feed {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 32px);
}

body[data-view="letter"] .message.letter-card,
body[data-view="letter"] .message.letter-card.is-left,
body[data-view="letter"] .message.letter-card.is-right {
  margin-top: 0;
}

body[data-view="letter"] .letter-card-body {
  min-height: clamp(240px, 32vw, 360px);
}

@media (max-width: 980px) {
  body[data-view="letter"] .letter-feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-view="letter"] .letter-unsent-shell {
    padding-right: 14px;
    padding-left: 14px;
  }

  body[data-view="letter"] .letter-feed {
    grid-template-columns: 1fr;
  }
}

/* LETTER pass 5: use the exact HOME top menu treatment on LETTER. */
body[data-view="letter"] .app-menu {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  width: auto;
  max-width: calc(100vw - 24px);
  z-index: 260;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body[data-view="letter"] .app-menu button,
body[data-view="letter"] .app-menu a,
body[data-view="letter"] .app-menu button[data-target="letter"] {
  display: grid;
  place-items: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 50px;
  padding: 8px 13px;
  border: 2px solid rgba(17, 17, 20, 0.88);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.22);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.75vw, 28px);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-shadow: 0.6px 0 0 currentColor;
  text-transform: uppercase;
}

body[data-view="letter"] .app-menu button.is-active,
body[data-view="letter"] .app-menu button[data-target="letter"],
body[data-view="letter"] .app-menu button:hover,
body[data-view="letter"] .app-menu a:hover {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}

body[data-view="letter"] .app-menu button:hover,
body[data-view="letter"] .app-menu a:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(1px);
}

/* LETTER pass 6: color filters are swatches, not text labels. */
body[data-view="letter"] .letter-color-filters {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
  padding: 14px 0 18px;
}

body[data-view="letter"] .letter-filter-chip {
  flex: 0 0 auto;
  width: 34px;
  min-width: 34px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid rgba(17, 17, 20, 0.72);
  border-radius: 0;
  outline: 0;
  background: var(--swatch-bg);
  color: var(--swatch-fg);
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
}

body[data-view="letter"] .letter-filter-chip[data-color="all"] {
  width: 38px;
  min-width: 38px;
  background:
    linear-gradient(90deg, transparent 49%, rgba(17, 17, 20, 0.38) 49% 51%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(17, 17, 20, 0.38) 49% 51%, transparent 51%),
    conic-gradient(#f7f8f4 0 12.5%, #cfd3da 0 25%, #1f2329 0 37.5%, #fef019 0 50%, #44b9ae 0 62.5%, #7061a8 0 75%, #bf4d57 0 87.5%, #62a56a 0);
}

body[data-view="letter"] .letter-filter-chip.is-active {
  border-color: #111114;
  border-radius: 0;
  outline: 3px solid #111114;
  outline-offset: 2px;
  padding: 0;
}

body[data-view="letter"] .letter-filter-chip:focus-visible {
  outline: 3px solid #111114;
  outline-offset: 3px;
}

/* VROWN review section visual pass: make the collage cards match LETTER cards. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-reviews {
  background:
    radial-gradient(circle at 16% 26%, rgba(93, 102, 117, 0.06), transparent 22%),
    radial-gradient(circle at 86% 78%, rgba(93, 102, 117, 0.05), transparent 24%),
    #f7f8f8;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review {
  --letter-line: #5d6675;
  --letter-bg: #f7f8f4;
  --letter-fg: #5d6675;
  overflow: hidden;
  padding: 7px !important;
  border: 4px solid var(--letter-line) !important;
  border-radius: 0 !important;
  background: #f7f8f8 !important;
  color: var(--letter-fg) !important;
  box-shadow: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review::before {
  content: "";
  position: absolute;
  inset: 49px 7px 7px;
  z-index: 0;
  display: block !important;
  border-radius: 0;
  background: var(--letter-bg);
  pointer-events: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-large {
  --letter-bg: #f7f8f4;
  --letter-fg: #5d6675;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window {
  --letter-bg: #f4c7d7;
  --letter-fg: #5d6675;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote {
  --letter-bg: #cfd3da;
  --letter-fg: #5d6675;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic {
  --letter-bg: #d9659f;
  --letter-fg: #f5f6f8;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
  --letter-bg: #fef019;
  --letter-fg: #5d6675;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-controls {
  position: relative !important;
  inset: auto !important;
  z-index: 3;
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 8px;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-controls::before {
  content: "ABC";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 30px;
  background: var(--letter-line);
  color: #e8ebee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-controls::after {
  content: "";
  position: relative;
  display: block;
  width: 72px;
  height: 31px;
  border: 3px solid var(--letter-line);
  background:
    linear-gradient(37deg, transparent 49%, #aeb5bf 50%, transparent 52%),
    linear-gradient(-37deg, transparent 49%, #aeb5bf 50%, transparent 52%),
    linear-gradient(0deg, transparent 42%, #aeb5bf 42% 48%, transparent 48%),
    var(--letter-line);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-control {
  display: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-control.is-minimise {
  display: block !important;
  width: 100%;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--letter-line);
  font-size: 0;
  line-height: 0;
  text-align: left;
  pointer-events: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-control.is-minimise::after {
  display: block;
  overflow: hidden;
  color: var(--letter-line);
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 400;
  line-height: 30px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-large .va-review-control.is-minimise::after {
  content: "To: STILL SAVED";
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window .va-review-control.is-minimise::after {
  content: "To: Suzie Kim";
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote .va-review-control.is-minimise::after {
  content: "To: SZV Room";
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic .va-review-control.is-minimise::after {
  content: "To: July Fifteen";
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary .va-review-control.is-minimise::after {
  content: "To: The Room";
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review > span,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review > strong,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review > small {
  position: relative;
  z-index: 2;
  color: var(--letter-fg) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review > span,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review > strong {
  display: block;
  margin: 0;
  padding: clamp(18px, 2.4vw, 32px) clamp(16px, 2.8vw, 36px) 0;
  font-family: Inter, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  text-transform: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review > small {
  display: block;
  margin: 0 !important;
  padding: clamp(12px, 1.8vw, 24px) clamp(16px, 2.8vw, 36px) clamp(18px, 2.4vw, 32px);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.08;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-large > span {
  font-size: clamp(42px, 4.4vw, 72px);
  line-height: 1.05;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window > strong {
  max-width: 9.4ch;
  font-size: clamp(58px, 6.1vw, 104px);
  line-height: 0.92;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote > strong,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary > span {
  font-size: clamp(27px, 2.9vw, 48px);
  line-height: 1.04;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic > strong {
  font-size: clamp(35px, 4vw, 64px);
  line-height: 0.94;
}

@media (max-width: 640px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review {
    box-shadow: none !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-controls {
    grid-template-columns: 64px minmax(0, 1fr) 62px;
    gap: 6px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-controls::before {
    width: 64px;
    font-size: 22px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-controls::after {
    width: 62px;
  }
}

/* VROWN LETTER collage: varied window scale and layered scrapbook placement. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-reviews {
  min-height: clamp(880px, 76vw, 1060px);
  padding: clamp(68px, 7vw, 96px) 0 clamp(72px, 8vw, 118px);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 23%, rgba(255, 100, 203, 0.08), transparent 19%),
    radial-gradient(circle at 86% 72%, rgba(186, 255, 0, 0.08), transparent 22%),
    #fff;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-reviews::before {
  content: "LETTER";
  left: auto;
  right: clamp(28px, 7vw, 104px);
  top: clamp(34px, 4vw, 58px);
  z-index: 11;
  color: #050505;
  font-size: clamp(26px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
  transform: rotate(1deg);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-large {
  --va-rotate: -3.8deg;
  left: clamp(34px, 15vw, 255px);
  top: clamp(30px, 4.5vw, 72px);
  z-index: 2;
  width: clamp(500px, 45vw, 780px);
  min-height: clamp(230px, 20vw, 318px);
  padding: clamp(74px, 6vw, 92px) clamp(34px, 4.2vw, 58px) clamp(30px, 3.6vw, 46px);
  font-size: clamp(44px, 4.5vw, 78px);
  line-height: 0.98;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window {
  --va-rotate: 0.2deg;
  left: clamp(280px, 34vw, 590px);
  top: clamp(210px, 18vw, 284px);
  z-index: 7;
  width: clamp(520px, 42vw, 720px);
  min-height: clamp(390px, 34vw, 520px);
  padding: clamp(90px, 8vw, 118px) clamp(36px, 4.6vw, 68px) clamp(32px, 4vw, 54px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window strong {
  max-width: 9.5ch;
  font-size: clamp(68px, 6.8vw, 116px);
  line-height: 0.88;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window small {
  margin-top: clamp(32px, 4.5vw, 64px);
  font-size: clamp(16px, 1.5vw, 22px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .puff-one {
  --va-rotate: -24deg;
  left: clamp(54px, 16.8vw, 292px);
  top: clamp(224px, 19vw, 316px);
  z-index: 9;
  width: clamp(126px, 12vw, 192px);
  pointer-events: auto;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .puff-two {
  --va-rotate: 18deg;
  right: clamp(32px, 10vw, 158px);
  top: clamp(500px, 43vw, 620px);
  z-index: 12;
  width: clamp(132px, 13vw, 214px);
  pointer-events: auto;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote {
  --va-rotate: 1.8deg;
  right: clamp(-88px, 2vw, 38px);
  top: clamp(560px, 48vw, 650px);
  z-index: 8;
  width: clamp(440px, 39vw, 670px);
  min-height: clamp(235px, 21vw, 330px);
  padding: clamp(82px, 7vw, 104px) clamp(28px, 4vw, 52px) clamp(28px, 3vw, 40px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote strong {
  font-size: clamp(29px, 3vw, 52px);
  line-height: 1.03;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic {
  --va-rotate: -4deg;
  left: clamp(-110px, 3vw, 42px);
  top: clamp(705px, 59vw, 800px);
  z-index: 4;
  width: clamp(330px, 31vw, 510px);
  min-height: clamp(220px, 20vw, 318px);
  padding: clamp(78px, 7vw, 96px) clamp(24px, 3.4vw, 42px) clamp(26px, 3vw, 42px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic strong {
  font-size: clamp(35px, 4vw, 66px);
  line-height: 0.92;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
  --va-rotate: -1.5deg;
  left: clamp(330px, 40vw, 690px);
  bottom: clamp(28px, 4vw, 66px);
  z-index: 3;
  width: clamp(430px, 41vw, 660px);
  min-height: clamp(180px, 17vw, 260px);
  padding: clamp(76px, 7vw, 92px) clamp(28px, 4vw, 54px) clamp(28px, 3vw, 42px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary span {
  display: block;
  font-size: clamp(25px, 2.8vw, 46px);
  line-height: 1.02;
}

@media (max-width: 980px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-reviews {
    min-height: 1180px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-large {
    left: 7vw;
    top: 78px;
    width: min(78vw, 660px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window {
    left: 18vw;
    top: 290px;
    width: min(72vw, 610px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .puff-one {
    left: 6vw;
    top: 276px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .puff-two {
    right: 4vw;
    top: 630px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote {
    right: -8vw;
    top: 700px;
    width: min(68vw, 560px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic {
    left: -7vw;
    top: 860px;
    width: min(46vw, 420px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
    left: 31vw;
    bottom: 46px;
    width: min(62vw, 560px);
  }
}

@media (max-width: 640px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-reviews {
    min-height: 1160px;
    padding-top: 72px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-reviews::before {
    right: 20px;
    top: 24px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-large,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
    right: auto;
    bottom: auto;
    width: calc(100vw - 34px);
    max-width: none;
    box-shadow: 8px 8px 0 #050505;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-large {
    left: 14px;
    top: 82px;
    min-height: 210px;
    font-size: clamp(35px, 10vw, 50px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window {
    left: 18px;
    top: 280px;
    min-height: 340px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window strong {
    font-size: clamp(58px, 16vw, 86px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .puff-one {
    left: 9px;
    top: 236px;
    width: 118px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .puff-two {
    right: 6px;
    top: 596px;
    width: 132px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote {
    left: 18px;
    top: 660px;
    min-height: 210px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic {
    left: -38px;
    top: 835px;
    width: min(78vw, 320px);
    min-height: 190px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
    left: 34px;
    top: 940px;
    width: calc(100vw - 54px);
    min-height: 190px;
  }
}

/* ZUNGK World scroll experience. */
body[data-view="zungk"] {
  background: #080807;
}

body[data-view="zungk"] .app-menu button {
  background: rgba(246, 243, 232, 0.92);
  color: #080807;
}

body[data-view="zungk"] .app-menu button.is-active,
body[data-view="zungk"] .app-menu button:hover {
  background: #b6ff00;
  color: #080807;
}

.zungk-view {
  padding-top: 0;
  background: #080807;
  color: #f4efe3;
}

.zungk-view .analogue-studio[hidden],
.zungk-view .zungk-page[hidden] {
  display: none !important;
}

.zungk-world {
  --zw-black: #080807;
  --zw-paper: #f4efe3;
  --zw-ink: #151515;
  --zw-acid: #b6ff00;
  --zw-pink: #ff4bb8;
  --zw-red: #ff2f1f;
  --zw-blue: #99c7ff;
  position: relative;
  min-height: 100svh;
  overflow: clip;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    var(--zw-black);
  background-size: 32px 32px;
  color: var(--zw-paper);
  font-family: "Inter", Arial, sans-serif;
  isolation: isolate;
}

.zw-fixed-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.46;
  background:
    repeating-radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
}

.zw-cursor-orbit {
  position: fixed;
  left: var(--zw-cursor-x, 50vw);
  top: var(--zw-cursor-y, 50vh);
  z-index: 5;
  width: 160px;
  aspect-ratio: 1;
  pointer-events: none;
  border: 1px solid rgba(182, 255, 0, 0.56);
  border-radius: 50%;
  opacity: 0.38;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease;
}

.zw-cursor-orbit::before,
.zw-cursor-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid currentColor;
  color: var(--zw-acid);
}

.zw-cursor-orbit::before {
  inset: 36px;
  border-radius: 50%;
}

.zw-cursor-orbit::after {
  left: 50%;
  top: -10px;
  width: 18px;
  height: 18px;
  background: var(--zw-acid);
  transform: translateX(-50%) rotate(9deg);
}

.zw-corner-nav {
  position: fixed;
  left: 18px;
  right: 18px;
  top: 76px;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
  color: rgba(244, 239, 227, 0.76);
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  line-height: 1.35;
  text-transform: uppercase;
}

.zw-scene {
  position: relative;
  z-index: 1;
}

.zw-sticky {
  position: sticky;
  top: 0;
  display: grid;
  align-content: center;
  min-height: 100svh;
  overflow: hidden;
}

.zw-kicker {
  margin: 0;
  color: var(--zw-acid);
  font-family: "Press Start 2P", monospace;
  font-size: clamp(10px, 0.9vw, 13px);
  line-height: 1.55;
  text-transform: uppercase;
}

.zw-hero {
  min-height: 280svh;
}

.zw-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(153, 199, 255, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153, 199, 255, 0.13) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: calc(0.2 + (var(--zw-progress, 0) * 0.42));
}

.zw-hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: calc(0.34 + (var(--zw-progress, 0) * 0.56));
  filter: saturate(calc(0.7 + (var(--zw-progress, 0) * 0.9))) contrast(1.08);
}

.zw-asset {
  position: absolute;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.42));
  transform:
    translate3d(calc(var(--zw-progress, 0) * var(--mx, 0px)), calc(var(--zw-progress, 0) * var(--my, 0px)), 0)
    rotate(var(--r, 0deg));
}

.asset-polaroid {
  --mx: -40px;
  --my: 80px;
  --r: -7deg;
  left: 8%;
  top: 19%;
  width: min(220px, 17vw);
}

.asset-note {
  --mx: 120px;
  --my: 54px;
  --r: 4deg;
  right: 29%;
  top: 13%;
  width: min(190px, 15vw);
}

.asset-ticket {
  --mx: -86px;
  --my: 95px;
  --r: 11deg;
  right: 9%;
  top: 45%;
  width: min(210px, 16vw);
}

.asset-vinyl {
  --mx: 70px;
  --my: -40px;
  --r: -12deg;
  left: 16%;
  bottom: 13%;
  width: min(270px, 20vw);
}

.asset-archive {
  --mx: -110px;
  --my: -80px;
  --r: 2deg;
  right: 7%;
  bottom: 4%;
  width: min(410px, 30vw);
  opacity: 0.78;
}

.zw-hero-copy {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 64px));
  margin: 0 auto;
  padding-top: 54px;
}

.zw-hero h1 {
  margin: 10px 0 0;
  color: rgba(244, 239, 227, calc(0.2 + (var(--zw-progress, 0) * 0.7)));
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(86px, 18vw, 270px);
  line-height: 0.72;
  letter-spacing: 0;
  text-transform: uppercase;
  -webkit-text-stroke: clamp(1px, 0.14vw, 2px) rgba(244, 239, 227, 0.88);
  text-shadow: calc(var(--zw-progress, 0) * 10px) 0 0 rgba(255, 75, 184, 0.42);
}

.zw-hero h1 span {
  display: block;
}

.zw-hero-line {
  width: min(560px, 54vw);
  margin: 26px 0 0;
  color: rgba(244, 239, 227, 0.82);
  font-size: clamp(18px, 2.2vw, 34px);
  font-weight: 800;
  line-height: 1.02;
}

.zw-hero-caption {
  position: absolute;
  left: clamp(20px, 4vw, 58px);
  right: clamp(20px, 4vw, 58px);
  bottom: 34px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: rgba(244, 239, 227, 0.72);
  font-family: "Press Start 2P", monospace;
  font-size: clamp(8px, 0.8vw, 11px);
  text-transform: uppercase;
}

.zw-algorithm {
  min-height: 230svh;
}

.zw-red-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 28% 36%, rgba(255, 75, 184, 0.5), transparent 24%),
    radial-gradient(circle at 72% 62%, rgba(182, 255, 0, 0.42), transparent 25%),
    linear-gradient(180deg, #191a16 0%, #ff2f1f 46%, #120f0f 100%);
  opacity: calc(0.28 + (var(--zw-progress, 0) * 0.72));
}

.zw-algorithm h2 {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
  color: #080807;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(60px, 12vw, 174px);
  line-height: 0.78;
  text-transform: uppercase;
}

.zw-algorithm p {
  position: relative;
  z-index: 3;
  width: min(760px, calc(100% - 42px));
  margin: 38px auto 0;
  color: #fff8e9;
  font-size: clamp(20px, 2.6vw, 42px);
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.zw-tag-cloud {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.zw-tag-cloud span {
  position: absolute;
  display: inline-grid;
  place-items: center;
  min-height: 36px;
  padding: 8px 14px;
  border: 2px solid #080807;
  background: rgba(244, 239, 227, 0.86);
  color: #080807;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(8px, 0.9vw, 12px);
  box-shadow: 6px 6px 0 rgba(8, 8, 7, 0.88);
  transform: translateY(calc((var(--zw-progress, 0) - 0.5) * var(--float, 90px))) rotate(var(--rot, 0deg));
}

.zw-tag-cloud span:nth-child(1) { left: 5%; top: 18%; --float: 140px; --rot: -4deg; }
.zw-tag-cloud span:nth-child(2) { left: 31%; top: 14%; --float: -90px; --rot: 2deg; }
.zw-tag-cloud span:nth-child(3) { right: 12%; top: 22%; --float: 120px; --rot: 5deg; }
.zw-tag-cloud span:nth-child(4) { left: 15%; top: 45%; --float: -120px; --rot: 8deg; }
.zw-tag-cloud span:nth-child(5) { right: 20%; top: 43%; --float: 160px; --rot: -5deg; }
.zw-tag-cloud span:nth-child(6) { left: 42%; top: 55%; --float: -70px; --rot: -2deg; }
.zw-tag-cloud span:nth-child(7) { right: 6%; top: 60%; --float: -130px; --rot: 8deg; }
.zw-tag-cloud span:nth-child(8) { left: 9%; bottom: 18%; --float: 110px; --rot: -8deg; }
.zw-tag-cloud span:nth-child(9) { right: 28%; bottom: 13%; --float: -110px; --rot: 5deg; }
.zw-tag-cloud span:nth-child(10) { left: 47%; bottom: 28%; --float: 80px; --rot: -3deg; }
.zw-tag-cloud span:nth-child(11) { left: 23%; bottom: 8%; --float: -150px; --rot: 4deg; }
.zw-tag-cloud span:nth-child(12) { right: 4%; bottom: 27%; --float: 120px; --rot: -5deg; }
.zw-tag-cloud span:nth-child(13) { left: 2%; top: 68%; --float: -80px; --rot: 4deg; }
.zw-tag-cloud span:nth-child(14) { right: 38%; top: 30%; --float: 100px; --rot: -6deg; }
.zw-tag-cloud span:nth-child(15) { left: 61%; top: 75%; --float: -100px; --rot: 7deg; }
.zw-tag-cloud span:nth-child(16) { left: 2%; top: 31%; --float: 130px; --rot: 2deg; }

.zw-collector {
  min-height: 150svh;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: clamp(120px, 15vw, 210px) clamp(22px, 5vw, 72px);
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 75, 184, 0.15), transparent 30%),
    radial-gradient(circle at 88% 84%, rgba(182, 255, 0, 0.16), transparent 30%),
    #11110f;
}

.zw-split {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(390px, 1.1fr);
  gap: clamp(36px, 8vw, 120px);
  align-items: center;
  width: min(1260px, 100%);
}

.zw-large-type span,
.zw-large-type strong {
  display: block;
}

.zw-large-type span {
  color: var(--zw-pink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(66px, 11vw, 164px);
  font-style: italic;
  font-weight: 900;
  line-height: 0.82;
}

.zw-large-type strong {
  margin-top: 20px;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(58px, 8vw, 120px);
  line-height: 0.8;
}

.zw-archive-stack {
  position: relative;
  min-height: 680px;
}

.zw-memory-card {
  position: absolute;
  display: grid;
  gap: 10px;
  width: clamp(150px, 18vw, 235px);
  padding: 10px;
  border: 2px solid #080807;
  border-radius: 6px;
  background: var(--zw-paper);
  color: #080807;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.74);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.zw-memory-card:hover,
.zw-memory-card.is-open {
  transform: translate(5px, 5px) rotate(0deg) !important;
  box-shadow: 4px 4px 0 var(--zw-acid);
  filter: saturate(1.14);
}

.zw-memory-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1.18 / 1;
  object-fit: cover;
  border: 1px solid rgba(8, 8, 7, 0.36);
}

.zw-memory-card span {
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  text-align: right;
}

.zw-memory-card.card-one { left: 2%; top: 8%; transform: rotate(-8deg); }
.zw-memory-card.card-two { right: 5%; top: 18%; transform: rotate(7deg); }
.zw-memory-card.card-three { left: 24%; top: 42%; transform: rotate(4deg); }
.zw-memory-card.card-four { right: 18%; bottom: 8%; transform: rotate(-6deg); }

.zw-card-readout {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 94px;
  margin: 0;
  padding: 22px;
  border: 2px solid rgba(244, 239, 227, 0.86);
  background: rgba(8, 8, 7, 0.74);
  color: var(--zw-paper);
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.02;
}

.zw-trader {
  min-height: 220svh;
  background: var(--zw-paper);
  color: #080807;
}

.zw-trader .zw-sticky {
  padding: 104px clamp(20px, 5vw, 76px) 54px;
  background:
    linear-gradient(rgba(8, 8, 7, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 8, 7, 0.065) 1px, transparent 1px),
    var(--zw-paper);
  background-size: 30px 30px;
}

.zw-trader-copy {
  position: relative;
  z-index: 2;
  width: min(1100px, 92vw);
}

.zw-trader h2 {
  margin: 14px 0 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(58px, 10.8vw, 160px);
  line-height: 0.78;
  letter-spacing: 0;
}

.zw-trader-copy > p:last-child {
  width: min(580px, 76vw);
  margin: 28px 0 0;
  font-size: clamp(18px, 2.2vw, 32px);
  font-weight: 800;
  line-height: 1;
}

.zw-receipts {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.zw-receipts span {
  position: absolute;
  display: block;
  width: min(360px, 32vw);
  min-height: 86px;
  padding: 16px;
  border: 2px solid #080807;
  background: #fff;
  color: #080807;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(9px, 0.86vw, 12px);
  line-height: 1.45;
  box-shadow: 8px 8px 0 #080807;
  transform: rotate(var(--r, 0deg)) translateY(calc((var(--zw-progress, 0) - 0.5) * var(--y, 80px)));
}

.zw-receipts span:nth-child(1) { right: 7%; top: 15%; --r: 5deg; --y: 120px; }
.zw-receipts span:nth-child(2) { right: 16%; top: 42%; --r: -4deg; --y: -90px; background: var(--zw-acid); }
.zw-receipts span:nth-child(3) { left: 58%; bottom: 10%; --r: 7deg; --y: 150px; }
.zw-receipts span:nth-child(4) { right: 4%; bottom: 31%; --r: -7deg; --y: -140px; background: var(--zw-pink); }
.zw-receipts span:nth-child(5) { left: 35%; top: 8%; --r: -5deg; --y: 90px; background: var(--zw-blue); }

.zw-leak {
  min-height: 130svh;
  display: grid;
  place-items: center;
  padding: clamp(110px, 14vw, 190px) clamp(20px, 5vw, 72px);
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 32%, rgba(153, 199, 255, 0.2), transparent 28%),
    radial-gradient(circle at 34% 70%, rgba(255, 75, 184, 0.22), transparent 26%),
    #050505;
}

.zw-leak-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.zw-leak-layer img {
  position: absolute;
  width: clamp(110px, 18vw, 250px);
  filter: saturate(1.1) contrast(1.05) drop-shadow(0 18px 28px rgba(0, 0, 0, 0.48));
  opacity: 0.9;
}

.zw-leak-layer img:nth-child(1) { left: 5%; top: 16%; transform: rotate(-13deg); }
.zw-leak-layer img:nth-child(2) { right: 12%; top: 9%; transform: rotate(10deg); }
.zw-leak-layer img:nth-child(3) { left: 23%; bottom: 17%; transform: rotate(8deg); }
.zw-leak-layer img:nth-child(4) { right: 18%; bottom: 14%; transform: rotate(-8deg); }
.zw-leak-layer img:nth-child(5) { left: 48%; top: 42%; transform: rotate(12deg); }

.zw-leak-copy {
  position: relative;
  z-index: 1;
  width: min(1040px, 92vw);
  padding: clamp(26px, 4vw, 54px);
  border: 2px solid rgba(244, 239, 227, 0.82);
  background: rgba(8, 8, 7, 0.72);
  backdrop-filter: blur(3px);
}

.zw-leak h2 {
  margin: 10px 0 22px;
  color: var(--zw-red);
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(62px, 11vw, 170px);
  line-height: 0.78;
}

.zw-leak-copy p:last-child {
  max-width: 700px;
  margin: 0;
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 800;
  line-height: 1;
}

.zw-map {
  min-height: 120svh;
  padding: clamp(112px, 13vw, 180px) clamp(20px, 5vw, 72px);
  background: #d9d6c9;
  color: #080807;
}

.zw-map-head {
  max-width: 1080px;
  margin-bottom: clamp(34px, 5vw, 70px);
}

.zw-map h2 {
  margin: 12px 0 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(58px, 9vw, 144px);
  line-height: 0.78;
}

.zw-zone-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.zw-zone {
  display: grid;
  align-content: space-between;
  min-height: 240px;
  padding: 18px;
  border: 2px solid #080807;
  border-radius: 6px;
  background: #f4efe3;
  color: #080807;
  text-align: left;
  box-shadow: 8px 8px 0 rgba(8, 8, 7, 0.92);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.zw-zone:hover,
.zw-zone.is-active {
  transform: translate(4px, 4px);
  background: var(--zw-acid);
  box-shadow: 3px 3px 0 #080807;
}

.zw-zone span,
.zw-zone em {
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  line-height: 1.45;
  text-transform: uppercase;
}

.zw-zone strong {
  display: block;
  margin: 28px 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 0.86;
}

.zw-zone em {
  font-style: normal;
}

.zw-zone-readout {
  width: min(980px, 100%);
  min-height: 106px;
  margin: clamp(28px, 4vw, 52px) 0 0;
  padding: 22px;
  border: 2px solid #080807;
  background: #080807;
  color: #f4efe3;
  font-size: clamp(20px, 2.5vw, 38px);
  font-weight: 800;
  line-height: 1;
}

.zw-ending {
  min-height: 120svh;
  display: grid;
  place-items: center;
  padding: 120px 22px;
  overflow: hidden;
  background: #080807;
  color: #f4efe3;
  text-align: center;
}

.zw-ending-collage {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.28;
}

.zw-ending-collage img {
  position: absolute;
  width: clamp(190px, 28vw, 420px);
  filter: grayscale(0.25) contrast(1.08);
}

.zw-ending-collage img:nth-child(1) { left: 6%; top: 16%; transform: rotate(-9deg); }
.zw-ending-collage img:nth-child(2) { right: 8%; top: 24%; transform: rotate(8deg); }
.zw-ending-collage img:nth-child(3) { left: 34%; bottom: 4%; transform: rotate(-2deg); }

.zw-ending h2 {
  position: relative;
  z-index: 1;
  width: min(1180px, 94vw);
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(66px, 13vw, 190px);
  line-height: 0.8;
}

.zw-ending p {
  position: relative;
  z-index: 1;
  margin: 30px 0 0;
  color: var(--zw-acid);
  font-size: clamp(18px, 2.4vw, 34px);
  font-weight: 900;
}

@media (max-width: 920px) {
  .zw-corner-nav {
    top: 66px;
    font-size: 8px;
  }

  .zw-hero-copy,
  .zw-algorithm h2 {
    width: min(100% - 32px, 860px);
  }

  .zw-split {
    grid-template-columns: 1fr;
  }

  .zw-archive-stack {
    min-height: 620px;
  }

  .zw-zone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zw-receipts span {
    width: min(310px, 42vw);
  }
}

@media (max-width: 640px) {
  .zw-cursor-orbit {
    display: none;
  }

  .zw-corner-nav {
    top: 55px;
    left: 9px;
    right: 9px;
    font-size: 6px;
  }

  .zw-corner-nav span:nth-child(2) {
    display: none;
  }

  .zw-hero {
    min-height: 210svh;
  }

  .zw-hero-copy {
    width: min(100% - 26px, 390px);
    padding-top: 40px;
  }

  .zw-hero h1 {
    font-size: clamp(62px, 21vw, 96px);
    line-height: 0.82;
  }

  .zw-hero-line {
    width: 92%;
    font-size: 20px;
  }

  .zw-asset {
    opacity: 0.88;
  }

  .asset-polaroid {
    left: 4%;
    top: 58%;
    width: 142px;
  }

  .asset-note {
    right: 3%;
    top: 20%;
    width: 118px;
  }

  .asset-ticket {
    right: -12%;
    top: 45%;
    width: 136px;
  }

  .asset-vinyl {
    left: 0;
    bottom: 14%;
    width: 152px;
  }

  .asset-archive {
    right: -20%;
    bottom: 7%;
    width: 210px;
  }

  .zw-hero-caption {
    left: 14px;
    right: 14px;
    bottom: 18px;
    font-size: 6px;
  }

  .zw-algorithm {
    min-height: 190svh;
  }

  .zw-algorithm h2 {
    width: min(100% - 28px, 390px);
    font-size: clamp(42px, 16vw, 70px);
  }

  .zw-algorithm p {
    font-size: 20px;
    text-align: left;
  }

  .zw-tag-cloud span {
    min-height: 30px;
    padding: 6px 9px;
    font-size: 6px;
  }

  .zw-collector,
  .zw-leak,
  .zw-map {
    padding-left: 16px;
    padding-right: 16px;
  }

  .zw-large-type span {
    font-size: clamp(58px, 18vw, 78px);
  }

  .zw-large-type strong {
    font-size: clamp(44px, 15vw, 64px);
  }

  .zw-archive-stack {
    min-height: 520px;
  }

  .zw-memory-card {
    width: 142px;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.74);
  }

  .zw-memory-card.card-one { left: 0; top: 10%; }
  .zw-memory-card.card-two { right: 0; top: 8%; }
  .zw-memory-card.card-three { left: 12%; top: 43%; }
  .zw-memory-card.card-four { right: 4%; bottom: 14%; }

  .zw-card-readout {
    min-height: 84px;
    padding: 16px;
    font-size: 17px;
  }

  .zw-trader .zw-sticky {
    padding: 86px 16px 48px;
  }

  .zw-trader h2,
  .zw-leak h2,
  .zw-map h2,
  .zw-ending h2 {
    font-size: clamp(44px, 15vw, 70px);
  }

  .zw-receipts span {
    width: 180px;
    min-height: 66px;
    padding: 10px;
    font-size: 6px;
    box-shadow: 5px 5px 0 #080807;
  }

  .zw-leak-copy {
    padding: 18px;
  }

  .zw-leak-copy p:last-child,
  .zw-trader-copy > p:last-child {
    font-size: 19px;
  }

  .zw-zone-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .zw-zone {
    min-height: 156px;
    padding: 14px;
    box-shadow: 5px 5px 0 rgba(8, 8, 7, 0.92);
  }

  .zw-zone strong {
    margin: 18px 0;
    font-size: 34px;
  }

  .zw-zone-readout {
    min-height: 96px;
    padding: 16px;
    font-size: 19px;
  }
}

/* Final VROWN LETTER-card skin: keep collage geometry, force LETTER visual language. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-reviews {
  background:
    radial-gradient(circle at 16% 26%, rgba(93, 102, 117, 0.06), transparent 22%),
    radial-gradient(circle at 86% 78%, rgba(93, 102, 117, 0.05), transparent 24%),
    #f7f8f8;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review {
  --letter-line: #5d6675;
  --letter-bg: #f7f8f4;
  --letter-fg: #5d6675;
  overflow: hidden;
  padding: 7px !important;
  border: 4px solid var(--letter-line) !important;
  border-radius: 0 !important;
  background: #f7f8f8 !important;
  color: var(--letter-fg) !important;
  box-shadow: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review::before {
  content: "";
  position: absolute;
  inset: 49px 7px 7px;
  z-index: 0;
  display: block !important;
  border: 0;
  border-radius: 0;
  background: var(--letter-bg);
  pointer-events: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-large {
  --letter-bg: #f7f8f4;
  --letter-fg: #5d6675;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window {
  --letter-bg: #f4c7d7;
  --letter-fg: #5d6675;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote {
  --letter-bg: #cfd3da;
  --letter-fg: #5d6675;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic {
  --letter-bg: #d9659f;
  --letter-fg: #f5f6f8;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
  --letter-bg: #fef019;
  --letter-fg: #5d6675;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-controls {
  position: relative !important;
  inset: auto !important;
  z-index: 3;
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 8px;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-controls::before {
  content: "ABC";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 30px;
  background: var(--letter-line);
  color: #e8ebee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-controls::after {
  content: "";
  display: block;
  width: 72px;
  height: 31px;
  border: 3px solid var(--letter-line);
  background:
    linear-gradient(37deg, transparent 49%, #aeb5bf 50%, transparent 52%),
    linear-gradient(-37deg, transparent 49%, #aeb5bf 50%, transparent 52%),
    linear-gradient(0deg, transparent 42%, #aeb5bf 42% 48%, transparent 48%),
    var(--letter-line);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-control {
  display: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-control.is-minimise {
  display: block !important;
  width: 100%;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--letter-line);
  font-size: 0;
  line-height: 0;
  text-align: left;
  pointer-events: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-control.is-minimise::after {
  display: block;
  overflow: hidden;
  color: var(--letter-line);
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 400;
  line-height: 30px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-large .va-review-control.is-minimise::after {
  content: "To: STILL SAVED";
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window .va-review-control.is-minimise::after {
  content: "To: Suzie Kim";
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote .va-review-control.is-minimise::after {
  content: "To: SZV Room";
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic .va-review-control.is-minimise::after {
  content: "To: July Fifteen";
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary .va-review-control.is-minimise::after {
  content: "To: The Room";
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review > span,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review > strong,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review > small {
  position: relative;
  z-index: 2;
  color: var(--letter-fg) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review > span,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review > strong {
  display: block;
  margin: 0;
  padding: clamp(18px, 2.4vw, 32px) clamp(16px, 2.8vw, 36px) 0;
  font-family: Inter, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  text-transform: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review > small {
  display: block;
  margin: 0 !important;
  padding: clamp(12px, 1.8vw, 24px) clamp(16px, 2.8vw, 36px) clamp(18px, 2.4vw, 32px);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.08;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-large > span {
  font-size: clamp(42px, 4.4vw, 72px) !important;
  line-height: 1.05 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window > strong {
  max-width: 9.4ch !important;
  font-size: clamp(58px, 6.1vw, 104px) !important;
  line-height: 0.92 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote > strong,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary > span {
  font-size: clamp(27px, 2.9vw, 48px) !important;
  line-height: 1.04 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic > strong {
  font-size: clamp(35px, 4vw, 64px) !important;
  line-height: 0.94 !important;
}

@media (max-width: 640px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-controls {
    grid-template-columns: 64px minmax(0, 1fr) 62px;
    gap: 6px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-controls::before {
    width: 64px;
    font-size: 22px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-controls::after {
    width: 62px;
  }
}

/* LETTER pass 7: archive cards become New Instant Message windows. */
body[data-view="letter"] .message.letter-card,
body[data-view="letter"] .message.letter-card.is-wide,
body[data-view="letter"] .message.letter-card.is-tall,
body[data-view="letter"] .message.letter-card.is-left,
body[data-view="letter"] .message.letter-card.is-right,
body[data-view="letter"] .message.letter-card:nth-child(8n + 4),
body[data-view="letter"] .message.letter-card:nth-child(8n + 7) {
  padding: 0;
  border: 0;
  background: transparent;
  color: #111114;
}

body[data-view="letter"] .aim-window {
  --aim-ink: #111114;
  --aim-paper: #f4f0e9;
  --aim-purple: #8d7df4;
  display: grid;
  gap: 8px;
  overflow: hidden;
  padding: 8px;
  border: 4px solid var(--aim-ink);
  border-radius: 18px;
  background: var(--aim-paper);
  box-shadow:
    inset 0 0 0 2px #fff,
    0 2px 0 rgba(17, 17, 20, 0.12);
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
}

body[data-view="letter"] .aim-titlebar {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 4px 6px 4px 8px;
  border: 3px solid var(--aim-ink);
  background: linear-gradient(90deg, #6f63e8, #a49af7);
  color: #fff;
}

body[data-view="letter"] .aim-runner {
  position: relative;
  display: block;
  width: 24px;
  height: 27px;
}

body[data-view="letter"] .aim-runner::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  width: 10px;
  height: 10px;
  border: 3px solid var(--aim-ink);
  border-radius: 50%;
  background: #fef019;
}

body[data-view="letter"] .aim-runner::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 23px;
  height: 17px;
  background:
    linear-gradient(132deg, transparent 0 38%, var(--aim-ink) 38% 50%, transparent 50%),
    linear-gradient(35deg, transparent 0 36%, var(--aim-ink) 36% 49%, transparent 49%),
    linear-gradient(90deg, transparent 0 31%, var(--aim-ink) 31% 44%, #fef019 44% 68%, var(--aim-ink) 68% 80%, transparent 80%);
}

body[data-view="letter"] .aim-title {
  overflow: hidden;
  color: #fff;
  font-size: clamp(19px, 1.8vw, 28px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow:
    1px 0 0 var(--aim-ink),
    -1px 0 0 var(--aim-ink),
    0 1px 0 var(--aim-ink),
    0 -1px 0 var(--aim-ink);
  white-space: nowrap;
}

body[data-view="letter"] .aim-window-controls {
  display: flex;
  gap: 4px;
}

body[data-view="letter"] .aim-window-controls span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 3px solid var(--aim-ink);
  background: #f7f5f8;
  color: var(--aim-ink);
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

body[data-view="letter"] .aim-window-controls span:last-child {
  background: #f6cadf;
}

body[data-view="letter"] .aim-menu-row {
  display: grid;
  grid-template-columns: repeat(5, auto) minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 1.8vw, 24px);
  padding: 2px 4px 4px;
  color: var(--aim-ink);
  font-size: clamp(13px, 1.25vw, 20px);
  font-weight: 900;
  line-height: 1.1;
}

body[data-view="letter"] .aim-menu-row strong {
  justify-self: end;
  font-size: 0.92em;
  white-space: nowrap;
}

body[data-view="letter"] .aim-address-stack {
  display: grid;
  gap: 6px;
  padding: 6px 0 0;
  border-top: 2px solid var(--aim-ink);
}

body[data-view="letter"] .aim-field-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

body[data-view="letter"] .aim-side-icon {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  border: 3px solid var(--aim-ink);
  background: #f7f5f8;
}

body[data-view="letter"] .aim-icon-user::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 5px;
  width: 11px;
  height: 11px;
  border: 3px solid var(--aim-ink);
  border-radius: 50%;
  background: #74d2f4;
}

body[data-view="letter"] .aim-icon-user::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 17px;
  width: 20px;
  height: 11px;
  border: 3px solid var(--aim-ink);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: #74d2f4;
}

body[data-view="letter"] .aim-icon-smile {
  background: #d9c6ff;
}

body[data-view="letter"] .aim-icon-smile::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 3px solid var(--aim-ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 40%, var(--aim-ink) 0 2px, transparent 3px),
    radial-gradient(circle at 65% 40%, var(--aim-ink) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 68%, transparent 0 6px, var(--aim-ink) 7px 8px, transparent 9px);
}

body[data-view="letter"] .aim-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 34px;
  align-items: center;
  min-height: 38px;
  border: 3px solid var(--aim-ink);
  background: #fff;
}

body[data-view="letter"] .aim-field strong,
body[data-view="letter"] .aim-field span {
  overflow: hidden;
  padding: 0 9px;
  color: var(--aim-ink);
  font-size: clamp(16px, 1.55vw, 24px);
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="letter"] .aim-field i {
  position: relative;
  align-self: stretch;
  border-left: 3px solid var(--aim-ink);
  background: #e8e3ff;
}

body[data-view="letter"] .aim-field i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 7px solid transparent;
  border-top-color: var(--aim-ink);
  transform: translate(-50%, -20%);
}

body[data-view="letter"] .letter-card-body.aim-message-pane {
  position: relative;
  min-height: clamp(190px, 24vw, 300px);
  padding: clamp(14px, 1.8vw, 22px) 34px clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 22px);
  border: 3px solid var(--aim-ink);
  background: var(--card-bg);
  color: var(--card-fg);
  overflow: hidden;
}

body[data-view="letter"] .letter-card-body.aim-message-pane::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 25px;
  border-left: 3px solid var(--aim-ink);
  background:
    linear-gradient(#e8e3ff 0 26px, transparent 26px calc(100% - 26px), #e8e3ff calc(100% - 26px)),
    #f0ecff;
}

body[data-view="letter"] .letter-card-body.aim-message-pane::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  width: 14px;
  height: 48px;
  border: 3px solid var(--aim-ink);
  background: repeating-linear-gradient(135deg, transparent 0 5px, var(--aim-ink) 5px 8px);
  transform: translateY(-50%);
}

body[data-view="letter"] .letter-card-body.aim-message-pane p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: currentColor;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(17px, 1.38vw, 22px);
  font-weight: 800;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

body[data-view="letter"] .letter-card-reply {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px dashed currentColor;
  color: currentColor !important;
  font-size: 13px;
}

body[data-view="letter"] .aim-formatbar {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, auto));
  align-items: center;
  justify-content: space-around;
  gap: 8px;
  min-height: 40px;
  padding: 4px 8px;
  border: 3px solid var(--aim-ink);
  background: #f7f3ed;
  color: var(--aim-ink);
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 900;
  line-height: 1;
}

body[data-view="letter"] .aim-formatbar .is-blue,
body[data-view="letter"] .aim-formatbar .is-link {
  color: #2138ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-view="letter"] .aim-formatbar .is-boxed {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 2px solid var(--aim-ink);
  background: #8e55f2;
  color: #fff;
}

body[data-view="letter"] .aim-formatbar .aim-divider {
  width: 2px;
  height: 27px;
  background: var(--aim-ink);
}

body[data-view="letter"] .aim-formatbar .aim-caret {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: var(--aim-ink);
  transform: translateY(4px);
}

body[data-view="letter"] .aim-image-icon,
body[data-view="letter"] .aim-face-icon,
body[data-view="letter"] .aim-flower-icon {
  display: block;
  width: 27px;
  height: 27px;
}

body[data-view="letter"] .aim-image-icon {
  border: 3px solid var(--aim-ink);
  background:
    radial-gradient(circle at 72% 24%, #fef019 0 3px, transparent 4px),
    linear-gradient(135deg, transparent 0 48%, var(--aim-ink) 49% 54%, transparent 55%),
    linear-gradient(45deg, transparent 0 43%, #8fc7d8 44% 72%, transparent 73%),
    #dff4f6;
}

body[data-view="letter"] .aim-face-icon {
  border: 3px solid var(--aim-ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 40%, var(--aim-ink) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 40%, var(--aim-ink) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 66%, transparent 0 6px, var(--aim-ink) 7px 8px, transparent 9px),
    #fef019;
}

body[data-view="letter"] .aim-flower-icon {
  background:
    radial-gradient(circle at 50% 50%, #fef019 0 4px, var(--aim-ink) 5px 6px, transparent 7px),
    radial-gradient(circle at 50% 18%, #f5a7c6 0 6px, var(--aim-ink) 7px 8px, transparent 9px),
    radial-gradient(circle at 80% 50%, #f5a7c6 0 6px, var(--aim-ink) 7px 8px, transparent 9px),
    radial-gradient(circle at 50% 82%, #f5a7c6 0 6px, var(--aim-ink) 7px 8px, transparent 9px),
    radial-gradient(circle at 20% 50%, #f5a7c6 0 6px, var(--aim-ink) 7px 8px, transparent 9px);
}

body[data-view="letter"] .letter-submit-form {
  --composer-message-bg: #e3f3fb;
  --composer-message-fg: #111114;
}

body[data-view="letter"] .letter-submit-form textarea {
  border: 3px solid #111114;
  background: var(--composer-message-bg);
  color: var(--composer-message-fg);
  padding: clamp(16px, 2vw, 24px);
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(19px, 2.1vw, 28px);
  font-weight: 800;
  line-height: 1.18;
}

/* LETTER composer: write directly into the supplied ZUNGK WORLD message frame. */
body[data-view="letter"] .letter-panel[data-mode="submit"] {
  max-width: min(1480px, calc(100vw - 56px));
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-form {
  --composer-frame-width: min(100%, 1120px);
  position: relative;
  display: block;
  width: var(--composer-frame-width);
  aspect-ratio: 1448 / 1086;
  margin: 0 auto clamp(110px, 10vw, 150px);
  padding: 0;
  background: url("assets/letter/szv-composer-frame.png?v=20260624-composer-frame") center / 100% 100% no-repeat;
  color: #111114;
  font-family: "Press Start 2P", "Courier New", monospace;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-form::before,
body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-form::after {
  content: none;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-chat-question,
body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-chat-you {
  position: absolute;
  left: 4.5%;
  right: 8%;
  z-index: 4;
  color: #111114;
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Comic Sans MS", Arial, sans-serif;
  font-size: clamp(15px, 1.58vw, 24px);
  line-height: 1.22;
  letter-spacing: 0;
  pointer-events: none;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-chat-question {
  top: 34.5%;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-chat-speaker {
  color: #003399;
  font-weight: 900;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-chat-text {
  color: #000;
  font-weight: 400;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-chat-you {
  top: 42.2%;
  font-weight: 900;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-head {
  position: absolute;
  left: 2.5%;
  right: 2.5%;
  top: calc(100% + 16px);
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 0;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-head h2 {
  display: none;
  margin: 0;
  color: #111114;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-back-button {
  min-height: 34px;
  border: 2px solid #777;
  border-top-color: #fff;
  border-left-color: #fff;
  border-radius: 0;
  background: #d9d9d9;
  color: #111114;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 10px;
  box-shadow: 2px 2px 0 #111114;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .draft-context {
  display: none !important;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .draft-context[hidden] {
  display: none;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .mini-action {
  padding: 4px 6px;
  border: 1px solid #111114;
  background: #d9d9d9;
  color: #111114;
  font-family: inherit;
  font-size: 8px;
  text-transform: uppercase;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-to-label,
body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-from-label {
  position: absolute;
  left: 11.9%;
  z-index: 3;
  width: 7.3%;
  color: #111114;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(8px, 1.5vw, 27px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
  transform: translateY(-50%);
  white-space: nowrap;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-to-label {
  top: 20.5%;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-from-label {
  top: 28.1%;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] #letterName,
body[data-view="letter"] .letter-panel[data-mode="submit"] #letterFrom {
  position: absolute;
  left: 21.2%;
  right: 9.4%;
  z-index: 3;
  width: auto;
  height: 5.7%;
  min-height: 0;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #111114;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(8px, 1.25vw, 22px);
  font-weight: 400;
  line-height: 1;
  outline: none;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] #letterName {
  top: 17.7%;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] #letterFrom {
  left: 23.4%;
  top: 25.3%;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] #letterName::placeholder,
body[data-view="letter"] .letter-panel[data-mode="submit"] #letterFrom::placeholder {
  color: rgba(17, 17, 20, 0.35);
  font-size: 0.78em;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] label[for="letterText"] {
  display: none;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] #letterText {
  position: absolute;
  left: 2.7%;
  right: 6.7%;
  top: 45.2%;
  bottom: 14.3%;
  z-index: 2;
  width: auto;
  min-height: 0;
  height: auto;
  border: 0;
  background: var(--composer-message-bg);
  color: var(--composer-message-fg);
  padding: clamp(10px, 1.5vw, 20px) clamp(40px, 4vw, 58px) clamp(14px, 2vw, 28px) clamp(16px, 2.2vw, 32px);
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(18px, 2.15vw, 34px);
  font-weight: 900;
  line-height: 1.14;
  outline: none;
  resize: none;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] #letterText::placeholder {
  color: rgba(17, 17, 20, 0.34);
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-color-grid {
  position: absolute;
  left: 2.5%;
  right: 2.5%;
  top: calc(100% + 62px);
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(32, minmax(14px, 1fr));
  gap: 5px;
  padding: 0;
  border: 0;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-color-swatch {
  min-height: 22px;
  aspect-ratio: 1;
  border: 2px solid #777;
  border-top-color: #fff;
  border-left-color: #fff;
  border-radius: 0;
  background: var(--swatch-bg);
  box-shadow: 1px 1px 0 #111114;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-color-swatch.is-active {
  outline: 3px solid #111114;
  outline-offset: 2px;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-message {
  position: absolute;
  right: 2.5%;
  top: calc(100% + 112px);
  z-index: 4;
  min-height: 42px;
  padding: 0 18px;
  border: 2px solid #777;
  border-top-color: #fff;
  border-left-color: #fff;
  border-radius: 0;
  background: #d9d9d9;
  color: #6f6f6f;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 #111114;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-message:not(:disabled) {
  background: #d9d9d9;
  color: #111114;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-terms {
  position: absolute;
  left: 2.5%;
  right: 34%;
  top: calc(100% + 118px);
  z-index: 4;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  color: #111114;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(8px, 0.82vw, 10px);
  line-height: 1.45;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-terms input {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-terms a {
  color: #0019d8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 980px) {
  body[data-view="letter"] .letter-panel[data-mode="submit"] {
    max-width: min(760px, calc(100vw - 32px));
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-form {
    margin-bottom: 260px;
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-color-grid {
    grid-template-columns: repeat(16, minmax(20px, 1fr));
    top: calc(100% + 60px);
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-terms {
    right: 2.5%;
    top: calc(100% + 160px);
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-message {
    left: 2.5%;
    right: auto;
    top: calc(100% + 204px);
  }
}

@media (max-width: 560px) {
  body[data-view="letter"] .letter-panel[data-mode="submit"] {
    max-width: calc(100vw - 20px);
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-form {
    margin-bottom: 360px;
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-back-button {
    justify-self: start;
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-to-label,
  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-from-label,
  body[data-view="letter"] .letter-panel[data-mode="submit"] #letterName,
  body[data-view="letter"] .letter-panel[data-mode="submit"] #letterFrom {
    font-size: clamp(7px, 2.5vw, 12px);
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] #letterText {
    padding: 10px 24px 10px 12px;
    font-size: clamp(14px, 4.3vw, 20px);
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-color-grid {
    grid-template-columns: repeat(8, minmax(24px, 1fr));
    gap: 6px;
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-terms {
    top: calc(100% + 252px);
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-message {
    top: calc(100% + 306px);
  }
}

@media (max-width: 980px) {
  body[data-view="letter"] .letter-card-body.aim-message-pane {
    min-height: 240px;
  }
}

@media (max-width: 760px) {
  body[data-view="letter"] .aim-window {
    border-width: 3px;
    border-radius: 15px;
    padding: 7px;
  }

  body[data-view="letter"] .aim-titlebar {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    min-height: 36px;
  }

  body[data-view="letter"] .aim-title {
    font-size: clamp(18px, 6vw, 24px);
  }

  body[data-view="letter"] .aim-window-controls span {
    width: 25px;
    height: 25px;
    font-size: 19px;
  }

  body[data-view="letter"] .aim-menu-row {
    grid-template-columns: repeat(5, auto);
    gap: 10px;
    font-size: 13px;
  }

  body[data-view="letter"] .aim-menu-row strong {
    grid-column: 1 / -1;
    justify-self: end;
  }

  body[data-view="letter"] .letter-card-body.aim-message-pane {
    min-height: 220px;
  }

  body[data-view="letter"] .aim-formatbar {
    grid-template-columns: repeat(8, minmax(0, auto));
  }
}

/* ZUNGK exact Readymag reference pass */
body[data-view="zungk"] {
  background: #000;
}

body[data-view="zungk"] .noise {
  mix-blend-mode: screen;
  opacity: 0.08;
}

.zungk-readymag {
  --zrm-total-progress: 0;
  --zrm-page-width: 1028px;
  background: #000;
  font-family: "Press Start 2P", "Courier New", monospace;
}

.zungk-readymag::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12001;
  width: 4px;
  height: calc(var(--zrm-total-progress) * 100vh);
  min-height: 72px;
  background: #ff0000;
  pointer-events: none;
}

.zungk-readymag::after {
  content: "??026, ZUNGK WORLD";
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 12001;
  color: rgba(255, 255, 255, 0.82);
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 7px;
  pointer-events: none;
}

.zrm-noise {
  opacity: 0.32;
  background-image:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px),
    radial-gradient(circle at 76% 34%, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px);
  background-size: 7px 7px, 11px 11px, 100% 4px;
}

.zrm-scanline {
  opacity: 0.23;
  mix-blend-mode: soft-light;
}

.zrm-fixed-ui {
  top: 64px;
  left: 9px;
  right: 9px;
  font-size: 8px;
  color: #fff;
  mix-blend-mode: normal;
  text-shadow: 0 1px 0 #000, 0 0 8px #000;
}

.zrm-fixed-ui span:nth-child(2) {
  margin-top: 1px;
}

.zrm-page-rail {
  display: none;
}

.zrm-panel {
  min-height: 1000vh;
  background: #000;
  overflow: visible;
}

.zungk-readymag .zrm-panel {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

body[data-view="zungk"] .zrm-panel .zrm-stage {
  visibility: hidden;
}

body[data-view="zungk"] .zrm-panel.is-active-panel .zrm-stage {
  position: fixed;
  inset: 0;
  z-index: 5;
  visibility: visible;
}

.zrm-feed {
  min-height: 1099vh;
}

.zrm-intro {
  min-height: 1500vh;
}

.zrm-jungk {
  min-height: 1300vh;
}

.zrm-vrown {
  min-height: 964vh;
}

.zrm-junk {
  min-height: 1200vh;
}

.zrm-map {
  min-height: 1000vh;
}

.zrm-end {
  min-height: 850vh;
}

.zrm-stage {
  height: 100svh;
  min-height: 720px;
  background: #000;
}

.zrm-panel::before {
  opacity: 0.34;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 36px 36px;
}

.zrm-intro .zrm-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 17vh;
  z-index: 0;
  width: min(100vw, var(--zrm-page-width));
  height: 67vh;
  transform: translateX(-50%);
  border-top: 28px solid rgba(255, 255, 255, 0.82);
  background:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px),
    #101010;
  background-size: 36px 36px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  opacity: calc(0.72 + var(--p) * 0.2);
}

.zrm-intro::after {
  content: "ZUNGK\A WORLD";
  white-space: pre;
  position: sticky;
  display: block;
  left: calc(50% - min(50vw, 514px) - 60px);
  top: 22vh;
  z-index: 0;
  width: min(100vw, var(--zrm-page-width));
  height: 0;
  color: rgba(255, 255, 255, 0.025);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.09);
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(104px, 16.7vw, 160px);
  line-height: 0.86;
  letter-spacing: 0;
  pointer-events: none;
}

.zrm-grid {
  inset: 17vh max(0px, calc((100vw - var(--zrm-page-width)) / 2)) 16vh max(0px, calc((100vw - var(--zrm-page-width)) / 2));
  border: 0;
  opacity: 0.45;
  background-size: 36px 36px;
}

.zrm-title {
  left: calc(50% - min(50vw, 514px) - 42px);
  top: 23vh;
  z-index: 2;
  color: rgba(0, 0, 0, 0.34);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.16);
  text-shadow: none;
  font-size: clamp(104px, 16.7vw, 160px);
  line-height: 0.86;
  transform:
    translate3d(calc(var(--p) * -64px), calc(var(--p) * -210px), 0)
    scale(calc(1 + var(--p) * 0.06));
}

.zrm-small {
  color: #fff;
  font-size: clamp(7px, 0.64vw, 10px);
  line-height: 1.55;
  text-shadow: 0 1px 0 #000, 0 0 6px #000;
}

.zrm-small-a {
  top: 32vh;
  right: calc(50% - min(50vw, 514px) + 30px);
}

.zrm-small-b {
  right: calc(50% - min(50vw, 514px) + 72px);
  bottom: 18vh;
}

.zrm-intro-copy {
  right: calc(50% - min(50vw, 514px) + 78px);
  bottom: 24vh;
  width: min(380px, 36vw);
  color: #fff;
  font-size: clamp(8px, 0.78vw, 11px);
  line-height: 1.48;
  text-shadow: 0 2px 0 #000, 0 0 12px #000;
}

.zrm-yellow-band {
  height: 25vh;
  background: #fef019;
  transform: translateY(calc((1 - var(--p)) * 18vh));
}

.zrm-obj {
  filter: saturate(0.82) contrast(1.12) drop-shadow(0 18px 20px rgba(0, 0, 0, 0.56));
}

.zrm-i01 {
  left: calc(50% - min(50vw, 514px) + 42px);
  top: 21vh;
  width: min(19vw, 245px);
  --dx: -110px;
  --dy: 420px;
  --r: -2deg;
}

.zrm-i02 {
  right: calc(50% - min(50vw, 514px) + 64px);
  top: 18vh;
  width: min(17vw, 220px);
  --dx: 42px;
  --dy: 220px;
  --r: 8deg;
}

.zrm-i03 {
  left: calc(50% - 210px);
  top: 45vh;
  width: min(28vw, 360px);
  --dx: -90px;
  --dy: -160px;
  --r: -12deg;
}

.zrm-i04 {
  right: calc(50% - min(50vw, 514px) + 32px);
  top: 40vh;
  width: min(22vw, 300px);
  --dx: 30px;
  --dy: -220px;
  --r: -4deg;
}

.zrm-i05 {
  right: calc(50% - min(50vw, 514px) + 125px);
  bottom: 10vh;
  width: min(17vw, 220px);
  --dx: 84px;
  --dy: -320px;
  --r: 14deg;
}

.zrm-feed .zrm-stage,
.zrm-jungk .zrm-stage,
.zrm-junk .zrm-stage,
.zrm-map .zrm-stage,
.zrm-end .zrm-stage {
  background:
    radial-gradient(circle at 12% 12%, rgba(183, 14, 24, 0.2), transparent 26vw),
    #000;
}

.zrm-red-photo {
  left: calc(50% - 300px);
  top: 7vh;
  width: min(46vw, 600px);
  height: 24vh;
  background: #f00000;
  transform: translate3d(0, calc((0.35 - var(--p)) * 520px), 0);
}

.zrm-red-photo img {
  opacity: 0.62;
  filter: grayscale(1) contrast(1.6) brightness(1.2);
}

.zrm-mega {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(72px, 10.6vw, 154px);
  line-height: 0.9;
}

.zrm-mega-red {
  left: calc(50% - min(50vw, 514px) - 12px);
  top: 30vh;
  color: rgba(150, 0, 0, 0.84);
  transform: translate3d(calc((0.45 - var(--p)) * 280px), calc((0.2 - var(--p)) * 180px), 0);
}

.zrm-feed-copy,
.zrm-caption,
.zrm-vrown-copy,
.zrm-end-copy,
.zrm-zone-readout {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(8px, 0.72vw, 11px);
  line-height: 1.48;
}

.zrm-feed-copy {
  right: calc(50% - min(50vw, 514px) + 34px);
  top: 64vh;
  width: min(390px, 34vw);
}

.zrm-jungk .zrm-stage::after,
.zrm-junk .zrm-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.zrm-outline {
  left: calc(50% - min(50vw, 514px) - 18px);
  top: 47vh;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.78);
  transform: translate3d(calc((var(--p) - 0.4) * 190px), calc((0.5 - var(--p)) * 160px), 0);
}

.zrm-caption-left {
  left: calc(50% - min(50vw, 514px) + 66px);
  top: 20vh;
  width: min(390px, 34vw);
}

.zrm-inspect {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.zrm-inspect:hover,
.zrm-inspect.is-active {
  border: 0;
  box-shadow: none;
  filter: saturate(1.08) contrast(1.08);
}

.zrm-inspect span {
  background: #000;
  color: #fef019;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
}

.zrm-card-a {
  left: calc(50% + 130px);
  top: 22vh;
  width: min(22vw, 290px);
  --dx: -240px;
  --dy: 280px;
  --r: 4deg;
}

.zrm-card-b {
  left: calc(50% - 400px);
  bottom: 17vh;
  width: min(21vw, 280px);
  --dx: 250px;
  --dy: -260px;
  --r: -6deg;
}

.zrm-card-c {
  right: calc(50% - min(50vw, 514px) + 68px);
  bottom: 10vh;
  width: min(22vw, 300px);
  --dx: -190px;
  --dy: -180px;
  --r: 3deg;
}

.zrm-readout {
  right: calc(50% - min(50vw, 514px) + 38px);
  bottom: 10vh;
  top: auto;
  width: min(420px, 38vw);
  font-size: clamp(8px, 0.7vw, 11px);
}

.zrm-vrown {
  background: #000;
  color: #000;
}

.zrm-vrown .zrm-stage {
  background:
    linear-gradient(#000 0 16vh, transparent 16vh),
    #f2eee2;
}

.zrm-paper-block {
  inset: 16vh calc(50% - min(50vw, 514px) + 55px) 12vh calc(50% - min(50vw, 514px) + 55px);
  background: #f2eee2;
  transform: none;
}

.zrm-vrown-title {
  left: calc(50% - min(50vw, 514px) + 20px);
  top: 25vh;
  font-size: clamp(70px, 10.5vw, 150px);
  transform: translate3d(calc((0.45 - var(--p)) * 230px), 0, 0);
}

.zrm-vrown-small {
  left: calc(50% - min(50vw, 514px) + 85px);
  top: 20vh;
}

.zrm-vrown-copy {
  right: calc(50% - min(50vw, 514px) + 85px);
  top: 28vh;
  width: min(390px, 34vw);
}

.zrm-junk-title {
  left: calc(50% - min(50vw, 514px) - 18px);
  top: 28vh;
  color: rgba(240, 208, 70, 0.95);
  transform: translate3d(calc((var(--p) - 0.35) * 260px), calc((0.4 - var(--p)) * 160px), 0);
}

.zrm-caption-right {
  right: calc(50% - min(50vw, 514px) + 48px);
  top: 22vh;
  width: min(390px, 34vw);
}

.zrm-map-title {
  left: calc(50% - min(50vw, 514px) - 30px);
  top: 34vh;
  font-size: clamp(94px, 15vw, 210px);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.78);
}

.zrm-zone-board {
  right: calc(50% - min(50vw, 514px) + 74px);
  top: 32vh;
  width: min(430px, 40vw);
  z-index: 11;
}

.zrm-zone-board button {
  min-height: 52px;
  font-size: clamp(22px, 2.1vw, 31px);
}

.zrm-zone-readout {
  right: calc(50% - min(50vw, 514px) + 74px);
  bottom: 15vh;
  width: min(430px, 40vw);
}

.zrm-end-title {
  left: calc(50% - min(50vw, 514px) - 20px);
  top: 25vh;
  font-size: clamp(84px, 12vw, 178px);
}

.zrm-end-copy {
  right: calc(50% - min(50vw, 514px) + 72px);
  bottom: 20vh;
  width: min(410px, 38vw);
}

@media (max-width: 760px) {
  .zungk-readymag::before {
    width: 3px;
  }

  .zungk-readymag::after {
    font-size: 5px;
  }

  .zrm-fixed-ui {
    top: 57px;
    font-size: 5.5px;
  }

  .zrm-panel,
  .zrm-feed,
  .zrm-jungk,
  .zrm-vrown,
  .zrm-junk,
  .zrm-map,
  .zrm-end {
    min-height: 900vh;
  }

  .zrm-stage {
    min-height: 844px;
  }

  .zrm-intro .zrm-stage::before {
    top: 18vh;
    height: 68vh;
    border-top-width: 20px;
  }

  .zrm-title {
    left: -7vw;
    top: 24vh;
    font-size: clamp(82px, 31vw, 128px);
  }

  .zrm-intro-copy {
    left: 22px;
    right: auto;
    bottom: 24vh;
    width: calc(100vw - 44px);
    font-size: 8px;
  }

  .zrm-small-a {
    left: 22px;
    right: auto;
    top: 13vh;
  }

  .zrm-small-b {
    right: 20px;
    bottom: 19vh;
  }

  .zrm-i01 { left: -4vw; top: 19vh; width: 44vw; }
  .zrm-i02 { right: -10vw; top: 17vh; width: 45vw; }
  .zrm-i03 { left: 20vw; top: 47vh; width: 55vw; }
  .zrm-i04 { right: -10vw; top: 40vh; width: 50vw; }
  .zrm-i05 { right: 10vw; bottom: 12vh; width: 42vw; }

  .zrm-mega,
  .zrm-vrown-title,
  .zrm-junk-title,
  .zrm-end-title {
    left: -9vw;
    font-size: clamp(58px, 22vw, 96px);
  }

  .zrm-feed-copy,
  .zrm-caption,
  .zrm-vrown-copy,
  .zrm-end-copy,
  .zrm-readout,
  .zrm-zone-readout {
    left: 22px;
    right: auto;
    width: calc(100vw - 44px);
    font-size: 8px;
  }

  .zrm-card-a { left: 38vw; top: 31vh; width: 50vw; }
  .zrm-card-b { left: 6vw; bottom: 28vh; width: 48vw; }
  .zrm-card-c { right: 4vw; bottom: 13vh; width: 52vw; }

  .zrm-zone-board {
    left: 22px;
    right: 22px;
    top: 35vh;
    width: auto;
  }
}

/* Keep first Readymag page populated through the long scroll. */
.zrm-title {
  transform:
    translate3d(calc(var(--p) * -36px), calc(var(--p) * -78px), 0)
    scale(calc(1 + var(--p) * 0.035));
}

.zrm-i01 {
  --dx: -52px;
  --dy: 130px;
}

.zrm-i02 {
  --dx: 24px;
  --dy: 82px;
}

.zrm-i03 {
  --dx: -42px;
  --dy: -54px;
}

.zrm-i04 {
  --dx: 24px;
  --dy: -82px;
}

.zrm-i05 {
  --dx: 42px;
  --dy: -115px;
}

.zrm-yellow-band {
  transform: translateY(calc((1 - var(--p)) * 8vh));
}

.zrm-intro-copy {
  transform: translateY(calc(var(--p) * -26px));
}

/* ZUNGK Readymag rebuild: long scroll pages with fixed coordinate canvases. */
@font-face {
  font-family: "ZRM Metro";
  src: url("assets/analogue-clone/MetroSansBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body[data-view="zungk"] {
  background: #000;
  overflow-x: hidden;
}

body[data-view="zungk"] .gate-menu.app-menu {
  position: fixed;
  top: 8px;
  left: 50%;
  z-index: 14020;
  display: flex;
  width: auto;
  max-width: calc(100vw - 18px);
  min-height: 30px;
  padding: 3px;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.62);
  box-shadow: none;
  transform: translateX(-50%);
  backdrop-filter: blur(5px);
}

body[data-view="zungk"] .gate-menu.app-menu button {
  min-width: 0;
  min-height: 24px;
  padding: 5px 8px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-family: "ZRM Metro", "Inter", Arial, sans-serif;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: none;
}

body[data-view="zungk"] .gate-menu.app-menu button.is-active,
body[data-view="zungk"] .gate-menu.app-menu button:hover {
  background: #fef019;
  color: #050505;
}

body[data-view="zungk"] .zungk-view {
  background: #000;
}

.zungk-readymag {
  --zrm-total-progress: 0;
  --zrm-page-progress: 0;
  --zrm-scale: 1;
  --zrm-canvas-w: 1028;
  --zrm-canvas-h: 768;
  min-height: 100svh;
  overflow-x: hidden;
  background: #000;
  color: #fff;
  font-family: "ZRM Metro", "Inter", Arial, sans-serif;
  cursor: none;
}

.zungk-readymag::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  z-index: 14010;
  width: 4px;
  height: calc(var(--zrm-total-progress) * 100vh);
  min-height: 50px;
  background: #f00000;
  pointer-events: none;
}

.zungk-readymag::after {
  content: "�?026, ZUNGK WORLD";
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 14010;
  color: rgba(255, 255, 255, 0.72);
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 6px;
  line-height: 1;
  pointer-events: none;
}

.zrm-noise,
.zrm-scanline {
  position: fixed;
  inset: 0;
  z-index: 14000;
  pointer-events: none;
}

.zrm-noise {
  opacity: 0.26;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px),
    radial-gradient(circle at 64% 58%, rgba(215, 255, 0, 0.18) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 24%, rgba(240, 0, 0, 0.18) 0 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px, 13px 13px;
}

.zrm-scanline {
  opacity: 0.18;
  background:
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(255, 255, 255, 0.08) 3px 4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 12%, transparent 88%, rgba(255, 255, 255, 0.08));
  mix-blend-mode: soft-light;
}

.zrm-cursor {
  position: fixed;
  left: var(--zrm-cursor-x, 50vw);
  top: var(--zrm-cursor-y, 50vh);
  z-index: 15000;
  width: 38px;
  height: 38px;
  border: 1px solid #fef019;
  border-radius: 50%;
  color: #fef019;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 5px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  pointer-events: none;
}

.zrm-fixed-ui {
  position: fixed;
  top: 46px;
  left: 9px;
  right: 9px;
  z-index: 14010;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  color: rgba(255, 255, 255, 0.86);
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 7px;
  line-height: 1.5;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000, 0 0 10px #000;
  pointer-events: none;
}

.zrm-fixed-ui span:nth-child(2) {
  text-align: center;
}

.zrm-fixed-ui span:nth-child(3) {
  text-align: right;
}

.zrm-fixed-ui i {
  font-style: normal;
  color: #fef019;
}

.zrm-page-rail {
  display: none !important;
}

.zrm-scroll-canvas.zrm-rm-project {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: visible;
  background: #000;
}

.zrm-rm-page {
  --page-progress: 0;
  position: relative;
  height: var(--page-height);
  min-height: 100svh;
  overflow: visible;
  background: #000;
}

.zrm-rm-page::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}

.zrm-rm-stage {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  visibility: hidden;
  isolation: isolate;
  background: #000;
}

body[data-view="zungk"] .zrm-rm-page.is-active-page .zrm-rm-stage {
  position: fixed;
  inset: 0;
  z-index: 5;
  visibility: visible;
}

.zrm-rm-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.06), transparent 30%),
    #000;
}

.zrm-rm-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 12%, transparent 82%, rgba(255, 255, 255, 0.05)),
    radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(0, 0, 0, 0.22) 75%);
  pointer-events: none;
}

.zrm-rm-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--zrm-canvas-w) * 1px);
  height: calc(var(--zrm-canvas-h) * 1px);
  transform: translate(-50%, -50%) scale(var(--zrm-scale));
  transform-origin: center center;
  will-change: transform;
}

.zrm-widget {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  z-index: var(--z, 1);
  width: calc(var(--w) * 1px);
  margin: 0;
  transform:
    translate3d(
      calc(var(--page-progress) * var(--move-x, 0px)),
      calc(var(--page-progress) * var(--move-y, 0px)),
      0
    )
    rotate(var(--rot, 0deg));
  transform-origin: center center;
  will-change: transform;
}

.zrm-grid-plane,
.zrm-top-paper,
.zrm-yellow-floor,
.zrm-red-image,
.zrm-paper-page {
  height: calc(var(--h) * 1px);
}

.zrm-grid-plane {
  border-top: 28px solid rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px),
    #111;
  background-size: 36px 36px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.zrm-top-paper {
  background: rgba(255, 255, 255, 0.8);
}

.zrm-yellow-floor {
  background: #fef019;
}

.zrm-type-giant {
  color: rgba(0, 0, 0, 0.36);
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 155px;
  font-weight: 900;
  line-height: 0.83;
  letter-spacing: 0;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.18);
  text-shadow: none;
}

.zrm-type-giant span {
  display: block;
}

.zrm-intro-title {
  font-size: 174px;
}

.zrm-red-title {
  color: rgba(176, 0, 0, 0.86);
  -webkit-text-stroke: 0;
  text-shadow: 0 0 20px rgba(176, 0, 0, 0.24);
}

.zrm-outline-title {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.76);
}

.zrm-paper-title {
  color: #050505;
  -webkit-text-stroke: 0;
}

.zrm-yellow-title {
  color: #fef019;
  -webkit-text-stroke: 0;
}

.zrm-credit-title {
  color: rgba(255, 255, 255, 0.9);
  -webkit-text-stroke: 0;
}

.zrm-copy,
.zrm-micro {
  color: #fff;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000, 0 0 9px #000;
}

.zrm-copy {
  font-size: 10px;
  line-height: 1.55;
}

.zrm-micro {
  font-size: 7px;
  line-height: 1.6;
}

.zrm-copy.is-dark,
.zrm-micro.is-dark {
  color: #050505;
  text-shadow: none;
}

.zrm-asset {
  display: block;
  height: auto;
  object-fit: contain;
  filter: saturate(0.86) contrast(1.12) drop-shadow(0 18px 20px rgba(0, 0, 0, 0.54));
  user-select: none;
  pointer-events: none;
}

.zrm-red-image {
  overflow: hidden;
  background: #e60000;
  mix-blend-mode: screen;
}

.zrm-red-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.5) brightness(1.1);
  opacity: 0.65;
  mix-blend-mode: multiply;
}

.zrm-sticker {
  display: grid;
  min-height: 32px;
  padding: 8px 10px 7px;
  place-items: center;
  border: 1px solid #050505;
  background: #f3eee3;
  color: #050505;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 7px;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.78);
}

.zrm-sticker.is-acid {
  background: #fef019;
}

.zrm-sticker.is-red {
  background: #e60030;
  color: #fff;
}

.zrm-sticker.is-blue {
  background: #2465ff;
  color: #fff;
}

.zrm-sticker.is-pink {
  background: #ff4bc0;
}

.zrm-paper-page {
  background:
    linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.38)),
    #f2eee2;
  box-shadow:
    inset 0 0 0 1px rgba(5, 5, 5, 0.16),
    0 26px 48px rgba(0, 0, 0, 0.28);
}

.zrm-rm-vrown .zrm-rm-stage {
  background: #f2eee2;
}

.zrm-rm-vrown .zrm-rm-stage::before {
  background:
    linear-gradient(#000 0 90px, transparent 90px),
    linear-gradient(rgba(5, 5, 5, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 5, 5, 0.12) 1px, transparent 1px),
    #f2eee2;
  background-size: 100% 100%, 42px 42px, 42px 42px, 100% 100%;
}

.zrm-rm-feed .zrm-rm-stage::before,
.zrm-rm-jungk .zrm-rm-stage::before,
.zrm-rm-junk .zrm-rm-stage::before,
.zrm-rm-credits .zrm-rm-stage::before {
  background:
    radial-gradient(circle at 17% 12%, rgba(176, 0, 0, 0.18), transparent 27%),
    radial-gradient(circle at 72% 70%, rgba(215, 255, 0, 0.08), transparent 24%),
    #000;
}

.zrm-rm-page.is-leaving .zrm-rm-canvas {
  opacity: calc(1 - var(--page-progress) * 0.25);
}

@media (max-width: 760px) {
  body[data-view="zungk"] .gate-menu.app-menu {
    top: 6px;
    max-width: calc(100vw - 10px);
    overflow-x: auto;
  }

  body[data-view="zungk"] .gate-menu.app-menu button {
    padding: 5px 7px 4px;
    font-size: 8px;
    white-space: nowrap;
  }

  .zungk-readymag {
    cursor: auto;
  }

  .zungk-readymag::before {
    width: 3px;
  }

  .zungk-readymag::after {
    font-size: 5px;
  }

  .zrm-cursor {
    display: none;
  }

  .zrm-fixed-ui {
    top: 42px;
    grid-template-columns: 1fr auto;
    font-size: 5px;
  }

  .zrm-fixed-ui span:nth-child(2) {
    display: none;
  }

  .zrm-rm-stage {
    min-height: 100svh;
  }

  .zrm-rm-canvas {
    left: 50%;
    top: 50%;
  }

  .zrm-type-giant {
    font-size: 126px;
  }

  .zrm-intro-title {
    font-size: 148px;
  }

  .zrm-copy {
    font-size: 9px;
  }

  .zrm-intro-title {
    --x: 230 !important;
    --y: 202 !important;
  }

  .zrm-intro-copy {
    --x: 430 !important;
    --y: 470 !important;
    --w: 286 !important;
  }

  .zrm-intro-note-a {
    --x: 432 !important;
    --y: 172 !important;
    --w: 260 !important;
  }

  .zrm-intro-note-b {
    --x: 466 !important;
    --y: 622 !important;
    --w: 238 !important;
  }

  .zrm-rm-intro .zrm-asset-a {
    --x: 124 !important;
    --y: 128 !important;
    --w: 210 !important;
  }

  .zrm-rm-intro .zrm-asset-b {
    --x: 612 !important;
    --y: 130 !important;
    --w: 170 !important;
  }

  .zrm-rm-intro .zrm-asset-c {
    --x: 260 !important;
    --y: 386 !important;
    --w: 344 !important;
  }

  .zrm-rm-intro .zrm-asset-d {
    --x: 578 !important;
    --y: 358 !important;
    --w: 220 !important;
  }

  .zrm-rm-intro .zrm-asset-e {
    --x: 620 !important;
    --y: 594 !important;
    --w: 146 !important;
  }
}

/* LETTER pass 8: fixed artist question entry point. */
body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-artist-prompt {
  display: none;
}

body[data-view="letter"] .letter-artist-prompt {
  width: min(100%, 1080px);
  margin: clamp(10px, 1.8vw, 22px) auto clamp(24px, 3.4vw, 44px);
  background: #f4f0e9;
}

body[data-view="letter"] .letter-artist-prompt .aim-menu-row strong {
  color: #111114;
}

body[data-view="letter"] .letter-artist-prompt-pane {
  position: relative;
  min-height: clamp(178px, 20vw, 280px);
  padding: clamp(18px, 2.8vw, 36px) clamp(42px, 5vw, 70px) clamp(18px, 2.6vw, 32px) clamp(18px, 3vw, 36px);
  border: 3px solid var(--aim-ink);
  background:
    linear-gradient(rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.46)),
    #eefbfb;
  color: #111114;
  overflow: hidden;
}

body[data-view="letter"] .letter-artist-prompt-pane::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  border-left: 3px solid var(--aim-ink);
  background:
    linear-gradient(#e8e3ff 0 30px, transparent 30px calc(100% - 30px), #e8e3ff calc(100% - 30px)),
    #f0ecff;
}

body[data-view="letter"] .letter-artist-prompt-pane::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 16px;
  height: 58px;
  border: 3px solid var(--aim-ink);
  background: repeating-linear-gradient(135deg, transparent 0 5px, var(--aim-ink) 5px 8px);
  transform: translateY(-50%);
}

body[data-view="letter"] .letter-artist-prompt-pane p {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0;
  color: currentColor;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(31px, 4.2vw, 62px);
  font-weight: 900;
  line-height: 1.04;
  overflow-wrap: anywhere;
}

body[data-view="letter"] .letter-artist-prompt-pane small {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 720px;
  margin-top: clamp(14px, 1.8vw, 22px);
  color: rgba(17, 17, 20, 0.72);
  font-size: clamp(15px, 1.45vw, 20px);
  font-weight: 900;
  line-height: 1.25;
}

body[data-view="letter"] .letter-artist-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 2px 2px;
}

/* ZUNGK impact.ideo inspired report */
body[data-view="zungk"] {
  background: #121015;
  overflow: hidden;
}

body[data-view="zungk"] .zungk-view {
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  background: #121015;
}

body[data-view="zungk"] .gate-menu.app-menu {
  top: auto;
  right: auto;
  bottom: 10px;
  left: 50%;
  z-index: 16000;
  width: auto;
  max-width: calc(100vw - 18px);
  min-height: 30px;
  padding: 3px;
  gap: 3px;
  border: 1px solid rgba(245, 242, 238, 0.28);
  border-radius: 0;
  background: rgba(18, 16, 21, 0.78);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}

body[data-view="zungk"] .gate-menu.app-menu button {
  min-width: 0;
  min-height: 24px;
  padding: 5px 8px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f5f2ee;
  font-family: "Inter", Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: none;
}

body[data-view="zungk"] .gate-menu.app-menu button.is-active,
body[data-view="zungk"] .gate-menu.app-menu button:hover {
  background: #d5fa52;
  color: #121015;
}

.zungk-impact {
  --zi-dark: #121015;
  --zi-paper: #f5f2ee;
  --zi-ink: #282828;
  --zi-acid: #d5fa52;
  --zi-copper: #b8704d;
  --zi-orange: #ff5a1f;
  --zi-purple: #c94dde;
  --zi-teal: #006a64;
  --zi-progress: 0;
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--zi-dark);
  color: var(--zi-paper);
  font-family: "Inter", Arial, sans-serif;
}

.zungk-impact[hidden],
.zungk-readymag[hidden] {
  display: none !important;
}

.zi-close button {
  border: 0;
  background: transparent;
  color: inherit;
  font-family: "Inter", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.zi-scroll {
  height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  background: var(--zi-dark);
  scrollbar-color: rgba(245, 242, 238, 0.9) transparent;
  scrollbar-width: thin;
}

.zi-scroll::-webkit-scrollbar {
  width: 10px;
}

.zi-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.zi-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 99px;
  background: rgba(245, 242, 238, 0.82);
  background-clip: content-box;
}

.zi-report {
  position: relative;
  overflow: hidden;
}

.zi-section {
  --section-progress: 0;
  position: relative;
  min-height: 100svh;
  padding: clamp(82px, 9vw, 120px) clamp(28px, 7vw, 96px);
  overflow: hidden;
  isolation: isolate;
}

.zi-section.is-visible .zi-evidence-card,
.zi-section.is-visible .zi-measure-grid article,
.zi-section.is-visible .zi-process-grid article {
  opacity: 1;
  transform: translateY(0);
}

.zi-hero {
  min-height: 100svh;
  padding-top: 38px;
  background: #121015;
}

.zi-hero-collage {
  position: absolute;
  inset: 38px 0 0;
  z-index: 1;
  transform:
    translate3d(0, calc(var(--section-progress) * -80px), 0)
    scale(calc(1 + var(--section-progress) * 0.04));
  transform-origin: center center;
}

.zi-ten {
  position: absolute;
  left: 50%;
  top: 48%;
  display: grid;
  grid-template-columns: 0.78fr 1fr;
  width: min(54vw, 690px);
  height: min(52vw, 610px);
  color: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(280px, 43vw, 620px);
  line-height: 0.8;
  transform: translate(-50%, -50%);
}

.zi-ten span {
  position: relative;
  display: grid;
  place-items: center;
}

.zi-ten span:first-child {
  background:
    linear-gradient(90deg, var(--zi-acid) 0 28%, #ff65cc 28% 45%, #ff5a1f 45% 62%, var(--zi-teal) 62%),
    #f5f2ee;
  -webkit-background-clip: text;
  background-clip: text;
}

.zi-ten span:last-child {
  background:
    conic-gradient(from 12deg, var(--zi-teal), var(--zi-purple), var(--zi-acid), var(--zi-copper), var(--zi-teal));
  -webkit-background-clip: text;
  background-clip: text;
}

.zi-shape,
.zi-cut {
  position: absolute;
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.28));
  will-change: transform;
}

.zi-shape {
  z-index: 2;
}

.zi-shape-a {
  left: 32%;
  top: 19%;
  width: 155px;
  height: 132px;
  background: #fef019;
  clip-path: polygon(10% 32%, 62% 10%, 100% 36%, 82% 92%, 14% 88%);
  transform: rotate(-7deg) translateY(calc(var(--section-progress) * 44px));
}

.zi-shape-b {
  left: 54%;
  top: 21%;
  width: 280px;
  height: 114px;
  background: #006a64;
  clip-path: polygon(7% 20%, 88% 0, 100% 96%, 0 82%);
  transform: rotate(2deg) translateY(calc(var(--section-progress) * -68px));
}

.zi-shape-c {
  left: 58%;
  top: 48%;
  width: 292px;
  height: 170px;
  background: #ff765e;
  clip-path: polygon(0 22%, 100% 0, 82% 100%, 18% 86%);
  transform: rotate(-8deg) translateX(calc(var(--section-progress) * -44px));
}

.zi-cut {
  z-index: 4;
  object-fit: contain;
}

.zi-cut-a {
  left: 29%;
  top: 19%;
  width: min(14vw, 155px);
  transform: rotate(-3deg) translateY(calc(var(--section-progress) * 75px));
}

.zi-cut-b {
  left: 47%;
  top: 23%;
  width: min(18vw, 224px);
  filter: grayscale(1) contrast(1.2) drop-shadow(0 20px 22px rgba(0, 0, 0, 0.32));
  transform: rotate(-5deg) translateY(calc(var(--section-progress) * -90px));
}

.zi-cut-c {
  right: 25%;
  top: 48%;
  width: min(16vw, 190px);
  transform: rotate(6deg) translateX(calc(var(--section-progress) * 60px));
}

.zi-cut-d {
  left: 33%;
  top: 63%;
  width: min(13vw, 150px);
  filter: grayscale(1) contrast(1.15) drop-shadow(0 18px 20px rgba(0, 0, 0, 0.36));
  transform: rotate(-2deg) translateY(calc(var(--section-progress) * -60px));
}

.zi-cut-e {
  left: 58%;
  top: 66%;
  width: min(17vw, 220px);
  transform: rotate(6deg) translateY(calc(var(--section-progress) * 54px));
}

.zi-hero-title {
  position: absolute;
  inset: 38px 0 0;
  z-index: 5;
  margin: 0;
  color: #f5f2ee;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  pointer-events: none;
}

.zi-hero-title span {
  position: absolute;
  display: block;
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.82;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.zi-hero-title span:nth-child(1) {
  right: 18%;
  top: 13%;
}

.zi-hero-title span:nth-child(2) {
  left: 19%;
  top: 41%;
}

.zi-hero-title span:nth-child(3) {
  left: 50%;
  top: 44%;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245, 242, 238, 0.38);
  transform: translateX(-50%);
}

.zi-hero-title span:nth-child(4) {
  right: 19%;
  bottom: 13%;
}

.zi-hero-question {
  position: absolute;
  left: 50%;
  bottom: 10vh;
  z-index: 8;
  width: min(480px, calc(100vw - 52px));
  margin: 0;
  color: rgba(245, 242, 238, 0.88);
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 0 rgba(18, 16, 21, 0.9), 0 0 18px rgba(18, 16, 21, 0.9);
  transform: translateX(-50%);
}

.zi-evidence {
  min-height: 112svh;
  background: var(--zi-paper);
  color: var(--zi-ink);
}

.zi-evidence h2,
.zi-map h2,
.zi-process h2,
.zi-close h2 {
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
}

.zi-evidence h2 {
  max-width: 820px;
  font-size: clamp(58px, 8.8vw, 128px);
  line-height: 0.92;
}

.zi-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 7vw, 100px);
  width: min(950px, 100%);
  margin: clamp(74px, 11vw, 150px) auto 0;
}

.zi-evidence-card {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.zi-card-icon {
  display: grid;
  place-items: center;
  width: 150px;
  height: 112px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: #f1ded2;
}

.zi-card-icon img {
  max-width: 108px;
  max-height: 92px;
  object-fit: contain;
  transform: rotate(-8deg);
}

.zi-evidence-card:nth-child(2) .zi-card-icon img {
  transform: rotate(5deg);
}

.zi-evidence-card:nth-child(3) .zi-card-icon img {
  transform: rotate(14deg);
}

.zi-evidence-card p {
  margin: 0;
  color: #202020;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 700;
  line-height: 1.45;
}

.zi-measures {
  min-height: 100svh;
  background: #121015;
  color: var(--zi-paper);
}

.zi-kicker {
  margin: 0 0 18px;
  color: var(--zi-acid);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
}

.zi-measure-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  width: min(1080px, 100%);
  margin: clamp(70px, 10vw, 130px) auto 0;
  background: rgba(245, 242, 238, 0.18);
}

.zi-measure-grid article {
  min-height: 330px;
  padding: 34px 24px;
  background: #121015;
  opacity: 0;
  transform: translateY(52px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.zi-measure-grid strong {
  display: block;
  margin-bottom: 26px;
  color: var(--zi-acid);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(50px, 6vw, 84px);
  font-weight: 400;
  line-height: 0.9;
}

.zi-measure-grid span {
  display: block;
  color: rgba(245, 242, 238, 0.82);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.42;
}

.zi-map {
  min-height: 120svh;
  background: #121015;
  color: var(--zi-paper);
}

.zi-map h2 {
  max-width: 680px;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.12;
}

.zi-map-field {
  position: relative;
  width: min(1120px, 100%);
  height: clamp(340px, 47vw, 560px);
  margin: clamp(56px, 8vw, 100px) auto 0;
}

.zi-map-field::before {
  content: "";
  position: absolute;
  inset: 8% 2% 0;
  opacity: 0.24;
  background:
    radial-gradient(circle at 12% 44%, rgba(245, 242, 238, 0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 32%, rgba(245, 242, 238, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 58%, rgba(245, 242, 238, 0.24) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 46%, rgba(245, 242, 238, 0.16) 0 1px, transparent 2px);
  background-size: 42px 42px, 53px 53px, 36px 36px, 45px 45px;
}

.zi-map-field svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.34;
}

.zi-map-field path {
  fill: none;
  stroke: rgba(245, 242, 238, 0.22);
  stroke-width: 2;
}

.zi-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--zi-acid);
  box-shadow: 0 0 0 7px rgba(213, 250, 82, 0.08), 0 0 22px rgba(213, 250, 82, 0.45);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.zi-dot::after {
  content: attr(data-zi-place);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  width: max-content;
  max-width: 170px;
  color: #f5f2ee;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.zi-dot.is-active {
  background: #fff;
  box-shadow: 0 0 0 8px rgba(213, 250, 82, 0.28), 0 0 34px rgba(213, 250, 82, 0.7);
}

.zi-map-readout {
  display: grid;
  gap: 8px;
  width: min(560px, 100%);
  min-height: 90px;
  margin: 26px auto 0;
  color: #f5f2ee;
  text-align: center;
}

.zi-map-readout strong {
  color: var(--zi-acid);
  font-size: 14px;
  letter-spacing: 0.18em;
}

.zi-map-readout span {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.zi-story {
  min-height: 112svh;
  color: var(--zi-acid);
}

.zi-story-a {
  background: var(--zi-copper);
}

.zi-story-b {
  background: #101010;
}

.zi-story-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 73% 49%, rgba(255, 210, 190, 0.56) 0 92px, transparent 93px),
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
}

.zi-story-number {
  position: relative;
  z-index: 3;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1;
  text-align: center;
}

.zi-story h2 {
  position: relative;
  z-index: 4;
  margin: 8px auto 0;
  color: var(--zi-acid);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(74px, 8vw, 120px);
  font-weight: 400;
  line-height: 0.9;
  text-align: center;
}

.zi-story-media {
  position: relative;
  z-index: 2;
  width: min(440px, 52vw);
  height: min(380px, 44vw);
  margin: -10px auto 0;
  overflow: hidden;
  background: #006a64;
}

.zi-story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.04);
}

.zi-poster {
  position: absolute;
  right: clamp(96px, 15vw, 210px);
  top: 46%;
  z-index: 5;
  display: grid;
  gap: 12px;
  width: 136px;
  min-height: 222px;
  padding: 16px 12px;
  background: #f6ded6;
  color: #d06033;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 0.88;
  text-transform: uppercase;
}

.zi-poster img {
  width: 80px;
  justify-self: end;
  filter: grayscale(1) contrast(1.2);
  transform: rotate(-8deg);
}

.zi-photo-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 4vw, 58px);
  margin-top: clamp(40px, 6vw, 80px);
}

.zi-photo-strip img {
  width: min(26vw, 320px);
  max-height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.4));
}

.zi-photo-strip img:nth-child(1) {
  transform: rotate(-9deg) translateY(calc(var(--section-progress) * 40px));
}

.zi-photo-strip img:nth-child(2) {
  transform: rotate(5deg) translateY(calc(var(--section-progress) * -50px));
}

.zi-photo-strip img:nth-child(3) {
  transform: rotate(-4deg) translateY(calc(var(--section-progress) * 60px));
}

.zi-process {
  min-height: 104svh;
  background: var(--zi-paper);
  color: var(--zi-ink);
}

.zi-process .zi-kicker {
  color: #121015;
}

.zi-process h2 {
  max-width: 900px;
  font-size: clamp(48px, 6.5vw, 94px);
  line-height: 0.98;
}

.zi-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(1040px, 100%);
  margin: clamp(58px, 8vw, 100px) auto 0;
  background: rgba(18, 16, 21, 0.24);
}

.zi-process-grid article {
  min-height: 285px;
  padding: 30px;
  background: var(--zi-paper);
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 650ms ease, transform 650ms ease, background 220ms ease, color 220ms ease;
}

.zi-process-grid article:hover {
  background: #121015;
  color: #f5f2ee;
}

.zi-process-grid span {
  color: var(--zi-copper);
  font-size: 12px;
  font-weight: 900;
}

.zi-process-grid h3 {
  margin: 28px 0 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 3.2vw, 43px);
  font-weight: 400;
  line-height: 0.96;
}

.zi-process-grid p {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.42;
}

.zi-close {
  display: grid;
  min-height: 100svh;
  place-items: center;
  background: #121015;
  color: #f5f2ee;
  text-align: center;
}

.zi-close h2 {
  max-width: 940px;
  font-size: clamp(50px, 7vw, 104px);
  line-height: 0.95;
}

.zi-close button {
  margin-top: 28px;
  padding: 12px 18px;
  border: 1px solid rgba(245, 242, 238, 0.36);
  background: #d5fa52;
  color: #121015;
  font-size: 10px;
}

@media (max-width: 820px) {
  body[data-view="zungk"] .gate-menu.app-menu {
    bottom: 7px;
    max-width: calc(100vw - 12px);
    overflow-x: auto;
  }

  body[data-view="zungk"] .gate-menu.app-menu button {
    padding: 5px 7px;
    font-size: 7px;
    white-space: nowrap;
  }

  .zi-section {
    padding: 78px 20px 92px;
  }

  .zi-ten {
    top: 45%;
    width: 520px;
    height: 520px;
    font-size: 390px;
  }

  .zi-hero-title span {
    font-size: clamp(56px, 18vw, 92px);
  }

  .zi-hero-title span:nth-child(1) {
    right: 9%;
    top: 17%;
  }

  .zi-hero-title span:nth-child(2) {
    left: 7%;
    top: 39%;
  }

  .zi-hero-title span:nth-child(3) {
    top: 50%;
  }

  .zi-hero-title span:nth-child(4) {
    right: 8%;
    bottom: 18%;
  }

  .zi-hero-question {
    bottom: 13vh;
    font-size: 17px;
  }

  .zi-shape-a {
    left: 18%;
    top: 24%;
  }

  .zi-shape-b {
    left: 42%;
    top: 25%;
    width: 240px;
  }

  .zi-shape-c {
    left: 50%;
    top: 54%;
    width: 230px;
  }

  .zi-cut-a {
    left: 16%;
    top: 20%;
    width: 86px;
  }

  .zi-cut-b {
    left: 40%;
    top: 27%;
    width: 128px;
  }

  .zi-cut-c {
    right: 6%;
    top: 48%;
    width: 120px;
  }

  .zi-cut-d {
    left: 21%;
    top: 64%;
    width: 100px;
  }

  .zi-cut-e {
    left: 50%;
    top: 70%;
    width: 135px;
  }

  .zi-evidence-grid,
  .zi-measure-grid,
  .zi-process-grid {
    grid-template-columns: 1fr;
  }

  .zi-measure-grid article,
  .zi-process-grid article {
    min-height: 0;
  }

  .zi-map-field {
    height: 500px;
  }

  .zi-dot::after {
    display: none;
  }

  .zi-story h2 {
    font-size: clamp(48px, 15vw, 74px);
  }

  .zi-story-media {
    width: min(86vw, 430px);
    height: 320px;
  }

  .zi-poster {
    right: 22px;
    top: 58%;
    width: 118px;
    min-height: 190px;
    font-size: 15px;
  }

  .zi-photo-strip {
    flex-direction: column;
  }

  .zi-photo-strip img {
    width: min(72vw, 280px);
  }
}

/* ZUNGK impact.ideo clone pass: align the opening viewport to the live reference. */
body[data-view="zungk"] .gate-menu.app-menu {
  display: none !important;
}

body[data-view="zungk"] .zi-hero-collage {
  inset: 38px 0 0;
  transform: none;
}

body[data-view="zungk"] .zi-hero-art {
  position: absolute;
  left: 50%;
  top: 67px;
  display: block;
  width: 656px;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  filter: none;
}

body[data-view="zungk"] .zi-ten,
body[data-view="zungk"] .zi-shape,
body[data-view="zungk"] .zi-cut {
  display: none;
}

body[data-view="zungk"] .zi-hero-title span {
  font-size: clamp(70px, 7.35vw, 94px);
  line-height: 0.83;
  text-shadow: none;
}

body[data-view="zungk"] .zi-hero-title span:nth-child(1) {
  right: 14.5%;
  top: 13.4%;
}

body[data-view="zungk"] .zi-hero-title span:nth-child(2) {
  left: 18.7%;
  top: 41.1%;
}

body[data-view="zungk"] .zi-hero-title span:nth-child(3) {
  right: 15.2%;
  bottom: 15.6%;
  left: auto;
  top: auto;
  color: #f5f2ee;
  -webkit-text-stroke: 0;
  transform: none;
}

body[data-view="zungk"] .zi-hero-title span:nth-child(4) {
  display: none;
}

body[data-view="zungk"] .zi-hero-question {
  display: none;
}

body[data-view="zungk"] .zi-evidence {
  background: #f5f2ee;
}

body[data-view="zungk"] .zi-measures {
  background: #121015;
}

body[data-view="zungk"] .zi-card-icon {
  width: min(210px, 100%);
  height: 150px;
  margin-bottom: 30px;
  border-radius: 0;
  background: transparent;
}

body[data-view="zungk"] .zi-card-icon img {
  max-width: 100%;
  max-height: 150px;
  transform: none;
}

body[data-view="zungk"] .zi-evidence-card:nth-child(2) .zi-card-icon img,
body[data-view="zungk"] .zi-evidence-card:nth-child(3) .zi-card-icon img {
  transform: none;
}

body[data-view="zungk"] .zi-map {
  background: #121015;
}

body[data-view="zungk"] .zi-map-field {
  width: min(1188px, 100%);
  height: clamp(420px, 52vw, 660px);
  background: #486a6d url("https://d2kq0urxkarztv.cloudfront.net/5fb92c1c162f3700bb421e19/2772355/upload-4bf4d072-8d7a-4cf6-b1bd-516e6ae6807d.png?w=1890&cX=0&cY=0&cW=4128&cH=2062") center / contain no-repeat;
}

body[data-view="zungk"] .zi-map-field::before,
body[data-view="zungk"] .zi-map-field svg {
  display: none;
}

body[data-view="zungk"] .zi-dot {
  width: 13px;
  height: 13px;
  background: #d5fa52;
  box-shadow: 0 0 0 5px rgba(213, 250, 82, 0.12), 0 0 18px rgba(213, 250, 82, 0.55);
}

body[data-view="zungk"] .zi-story-media {
  width: min(70vw, 980px);
  height: auto;
  background: transparent;
  box-shadow: none;
}

body[data-view="zungk"] .zi-story-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: none;
}

@media (max-width: 820px) {
  body[data-view="zungk"] .zi-hero-art {
    top: 74px;
    width: 560px;
  }

  body[data-view="zungk"] .zi-hero-title span {
    font-size: clamp(52px, 16vw, 88px);
  }

  body[data-view="zungk"] .zi-hero-title span:nth-child(1) {
    right: 6%;
    top: 18%;
  }

  body[data-view="zungk"] .zi-hero-title span:nth-child(2) {
    left: 6%;
    top: 43%;
  }

  body[data-view="zungk"] .zi-hero-title span:nth-child(3) {
    right: 6%;
    bottom: 17%;
  }
}

/* ZUNGK rebuild: long Readymag-style report flow with scroll-triggered widgets. */
@keyframes ziWidgetIn {
  from {
    opacity: 0;
    transform: translate3d(var(--zi-from-x, 0), var(--zi-from-y, 44px), 0) scale(var(--zi-from-scale, 1));
  }

  to {
    opacity: 1;
    transform: translate3d(var(--zi-parallax-x, 0px), var(--zi-parallax-y, 0px), 0) scale(1);
  }
}

@keyframes ziDotPulse {
  0%,
  100% {
    box-shadow: 0 0 0 5px rgba(213, 250, 82, 0.12), 0 0 18px rgba(213, 250, 82, 0.45);
  }

  50% {
    box-shadow: 0 0 0 12px rgba(213, 250, 82, 0.02), 0 0 34px rgba(213, 250, 82, 0.7);
  }
}

body[data-view="zungk"] .zi-report {
  min-height: 12800px;
  background: #121015;
}

body[data-view="zungk"] .zungk-impact::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 14990;
  background: #121015;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

body[data-view="zungk"] .zungk-impact.is-switching::after {
  opacity: 0.18;
}

body[data-view="zungk"] .zi-section {
  padding: 38px 0 0;
  overflow: hidden;
}

body[data-view="zungk"] [data-zi-reveal] {
  --zi-from-x: 0px;
  --zi-from-y: 54px;
  --zi-from-scale: 1;
  --zi-parallax-x: 0px;
  --zi-parallax-y: 0px;
  opacity: 0;
  transform: translate3d(var(--zi-from-x), var(--zi-from-y), 0) scale(var(--zi-from-scale));
  transition:
    opacity 720ms ease,
    transform 900ms cubic-bezier(0.2, 0.72, 0.12, 1);
  will-change: opacity, transform;
}

body[data-view="zungk"] [data-zi-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(var(--zi-parallax-x), var(--zi-parallax-y), 0) scale(1);
}

body[data-view="zungk"] .zi-section.is-visible [data-zi-reveal].is-revealed {
  animation: ziWidgetIn 760ms cubic-bezier(0.2, 0.72, 0.12, 1) both;
}

body[data-view="zungk"] .zi-question {
  min-height: 1280px;
  background: #121015;
}

body[data-view="zungk"] .zi-question-media {
  position: absolute;
  left: 11%;
  top: 340px;
  width: 459px;
  max-width: 42vw;
  height: auto;
}

body[data-view="zungk"] .zi-question h2 {
  position: absolute;
  left: 27.4%;
  top: 250px;
  width: min(585px, 55vw);
  margin: 0;
  color: #f5f2ee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(58px, 7.3vw, 104px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: 0;
  text-align: center;
}

body[data-view="zungk"] .zi-evidence {
  min-height: 1120px;
  padding-top: 118px;
  background: #f5f2ee;
}

body[data-view="zungk"] .zi-evidence h2 {
  max-width: 625px;
  font-size: clamp(58px, 7.4vw, 106px);
  line-height: 0.94;
}

body[data-view="zungk"] .zi-evidence-grid {
  width: min(950px, calc(100% - 160px));
  margin-top: 120px;
  gap: 86px;
}

body[data-view="zungk"] .zi-evidence-card:nth-child(1) {
  --zi-from-y: 72px;
}

body[data-view="zungk"] .zi-evidence-card:nth-child(2) {
  --zi-from-y: 96px;
  transition-delay: 120ms;
}

body[data-view="zungk"] .zi-evidence-card:nth-child(3) {
  --zi-from-y: 120px;
  transition-delay: 240ms;
}

body[data-view="zungk"] .zi-card-icon {
  width: 234px;
  height: 234px;
  margin-bottom: 42px;
}

body[data-view="zungk"] .zi-card-icon img {
  width: 100%;
  max-width: none;
  max-height: none;
}

body[data-view="zungk"] .zi-evidence-card:nth-child(1) .zi-card-icon,
body[data-view="zungk"] .zi-evidence-card:nth-child(3) .zi-card-icon {
  width: 202px;
  height: 202px;
  margin-top: 34px;
}

body[data-view="zungk"] .zi-evidence-card p {
  color: #282828;
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 800;
  line-height: 1.38;
}

body[data-view="zungk"] .zi-impact-note {
  min-height: 1120px;
  background: #121015;
}

body[data-view="zungk"] .zi-note-media {
  position: absolute;
  left: 11%;
  bottom: -12px;
  width: min(411px, 36vw);
  height: auto;
}

body[data-view="zungk"] .zi-impact-note p {
  position: absolute;
  left: 34.6%;
  top: 210px;
  width: min(666px, 54vw);
  margin: 0;
  color: #f5f2ee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(52px, 6.7vw, 96px);
  font-weight: 400;
  line-height: 1.04;
}

body[data-view="zungk"] .zi-measures {
  min-height: 900px;
  padding-top: 150px;
}

body[data-view="zungk"] .zi-measure-grid {
  width: min(1080px, calc(100% - 180px));
  margin-top: 82px;
}

body[data-view="zungk"] .zi-measure-grid article {
  min-height: 360px;
  padding: 38px 26px;
}

body[data-view="zungk"] .zi-map {
  min-height: 1340px;
  padding-top: 120px;
}

body[data-view="zungk"] .zi-map h2 {
  width: min(690px, calc(100% - 80px));
  font-size: clamp(40px, 5.1vw, 72px);
  line-height: 1.04;
}

body[data-view="zungk"] .zi-map-field {
  width: min(1181px, calc(100% - 76px));
  height: min(590px, 48vw);
  margin-top: 94px;
  background-image: url("https://i-p.rmcdn.net/5fb92c1c162f3700bb421e19/2772355/upload-4bf4d072-8d7a-4cf6-b1bd-516e6ae6807d.png?w=2363&e=webp&nll=true&cX=0&cY=0&cW=4128&cH=2062");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

body[data-view="zungk"] .zi-map-readout {
  margin-top: 52px;
}

body[data-view="zungk"] .zi-dot {
  width: 12px;
  height: 12px;
  animation: ziDotPulse 2.4s ease-in-out infinite;
}

body[data-view="zungk"] .zi-dot:hover,
body[data-view="zungk"] .zi-dot:focus-visible,
body[data-view="zungk"] .zi-dot.is-active {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.5);
}

body[data-view="zungk"] .zi-story {
  min-height: 1120px;
}

body[data-view="zungk"] .zi-story-a {
  padding-top: 104px;
  background: #b8704d;
}

body[data-view="zungk"] .zi-story-number {
  font-size: clamp(36px, 4vw, 58px);
}

body[data-view="zungk"] .zi-story h2 {
  font-size: clamp(76px, 9.2vw, 142px);
}

body[data-view="zungk"] .zi-story-a .zi-story-media {
  width: min(970px, 76vw);
  margin-top: 28px;
}

body[data-view="zungk"] .zi-poster {
  right: 11%;
  top: 49%;
  width: 158px;
  min-height: 230px;
  background: #f5f2ee;
  color: #121015;
}

body[data-view="zungk"] .zi-story-photo {
  min-height: 1080px;
  background: #121015;
}

body[data-view="zungk"] .zi-story-main-photo {
  position: absolute;
  left: 50%;
  top: 152px;
  width: min(583px, 52vw);
  transform: translateX(-50%);
}

body[data-view="zungk"] .zi-story-orbit {
  position: absolute;
  width: 160px;
  height: auto;
}

body[data-view="zungk"] .zi-story-orbit-a {
  right: 12%;
  top: 320px;
}

body[data-view="zungk"] .zi-story-orbit-b {
  left: 16%;
  top: 340px;
}

body[data-view="zungk"] .zi-story-photo p {
  position: absolute;
  left: 50%;
  bottom: 120px;
  width: min(620px, calc(100% - 80px));
  margin: 0;
  color: #f5f2ee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.08;
  text-align: center;
  transform: translateX(-50%);
}

body[data-view="zungk"] .zi-story-b {
  min-height: 1180px;
  padding-top: 108px;
  background: #101010;
}

body[data-view="zungk"] .zi-photo-strip {
  justify-content: center;
  align-items: center;
  gap: 34px;
  margin-top: 92px;
}

body[data-view="zungk"] .zi-photo-strip img {
  width: min(27vw, 350px);
  height: auto;
  object-fit: contain;
}

body[data-view="zungk"] .zi-photo-strip img:nth-child(2) {
  margin-top: -90px;
}

body[data-view="zungk"] .zi-process {
  background: #f5f2ee;
  color: #282828;
}

body[data-view="zungk"] .zi-process-cover {
  min-height: 980px;
  padding-top: 118px;
}

body[data-view="zungk"] .zi-process-cover h2 {
  width: min(780px, calc(100% - 80px));
  color: #282828;
  font-size: clamp(48px, 6vw, 90px);
  line-height: 1.02;
}

body[data-view="zungk"] .zi-process-visuals {
  position: relative;
  width: min(900px, calc(100% - 110px));
  height: 390px;
  margin: 72px auto 0;
}

body[data-view="zungk"] .zi-process-visuals img {
  position: absolute;
  max-width: 40%;
  height: auto;
}

body[data-view="zungk"] .zi-process-visuals img:nth-child(1) {
  left: 0;
  top: 54px;
}

body[data-view="zungk"] .zi-process-visuals img:nth-child(2) {
  left: 34%;
  top: 0;
}

body[data-view="zungk"] .zi-process-visuals img:nth-child(3) {
  right: 0;
  top: 92px;
}

body[data-view="zungk"] .zi-process-lab {
  min-height: 1060px;
  padding-top: 120px;
}

body[data-view="zungk"] .zi-process-grid {
  width: min(980px, calc(100% - 140px));
}

body[data-view="zungk"] .zi-process-grid article {
  background: #f5f2ee;
  color: #282828;
  border-color: rgba(40, 40, 40, 0.38);
}

body[data-view="zungk"] .zi-process-device {
  display: block;
  width: min(456px, 44vw);
  margin: 86px auto 0;
}

body[data-view="zungk"] .zi-close {
  min-height: 880px;
}

@media (max-width: 820px) {
  body[data-view="zungk"] .zi-report {
    min-height: 11200px;
  }

  body[data-view="zungk"] .zi-question-media,
  body[data-view="zungk"] .zi-note-media {
    left: 8%;
    width: 54vw;
    max-width: 54vw;
  }

  body[data-view="zungk"] .zi-question h2,
  body[data-view="zungk"] .zi-impact-note p {
    left: 8%;
    width: 84vw;
    font-size: clamp(46px, 13vw, 72px);
    text-align: left;
  }

  body[data-view="zungk"] .zi-evidence-grid,
  body[data-view="zungk"] .zi-measure-grid,
  body[data-view="zungk"] .zi-process-grid {
    width: calc(100% - 40px);
  }

  body[data-view="zungk"] .zi-map-field {
    width: calc(100% - 28px);
  }

  body[data-view="zungk"] .zi-story-main-photo {
    width: 70vw;
  }

  body[data-view="zungk"] .zi-story-orbit {
    width: 120px;
  }
}

body[data-view="letter"] .letter-artist-actions button {
  min-height: 42px;
  border: 3px solid var(--aim-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--aim-ink);
  padding: 9px 16px 8px;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(14px, 1.18vw, 18px);
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 -2px 0 rgba(17, 17, 20, 0.12);
}

body[data-view="letter"] .letter-artist-actions button:hover,
body[data-view="letter"] .letter-artist-actions button:focus-visible {
  background: #111114;
  color: #fff;
}

body[data-view="letter"] .letter-artist-actions button:first-child {
  background: #8d7df4;
  color: #fff;
}

body[data-view="letter"] .letter-artist-actions button:first-child:hover,
body[data-view="letter"] .letter-artist-actions button:first-child:focus-visible {
  background: #111114;
}

@media (max-width: 760px) {
  body[data-view="letter"] .letter-artist-prompt {
    margin-bottom: 28px;
  }

  body[data-view="letter"] .letter-artist-prompt-pane {
    min-height: 230px;
    padding-right: 42px;
  }

  body[data-view="letter"] .letter-artist-actions {
    justify-content: stretch;
  }

  body[data-view="letter"] .letter-artist-actions button {
    flex: 1 1 150px;
  }
}

/* LETTER pass 9: use the supplied ZUNGK WORLD message image as the board frame. */
body[data-view="letter"] .letter-panel {
  max-width: min(1480px, calc(100vw - 56px));
}

body[data-view="letter"] .letter-feed {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.8vw, 42px);
  align-items: start;
}

body[data-view="letter"] .message.letter-card,
body[data-view="letter"] .message.letter-card.is-wide,
body[data-view="letter"] .message.letter-card.is-tall,
body[data-view="letter"] .message.letter-card.is-left,
body[data-view="letter"] .message.letter-card.is-right,
body[data-view="letter"] .message.letter-card:nth-child(8n + 4),
body[data-view="letter"] .message.letter-card:nth-child(8n + 7) {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-view="letter"] .szv-letter-window {
  position: relative;
  width: 100%;
  aspect-ratio: 1448 / 1086;
  overflow: hidden;
  background: url("assets/letter/szv-letter-frame-clean.png?v=20260624-clean-fields") center / 100% 100% no-repeat;
  color: #111114;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
}

body[data-view="letter"] .szv-letter-to,
body[data-view="letter"] .szv-letter-from {
  position: absolute;
  z-index: 2;
  left: 11.8%;
  right: 9.6%;
  overflow: hidden;
  color: #111114;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(7px, 0.78vw, 11px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  white-space: nowrap;
}

body[data-view="letter"] .szv-letter-field {
  display: flex;
  align-items: center;
  gap: 1.28em;
}

body[data-view="letter"] .szv-letter-field strong {
  flex: 0 0 auto;
  font: inherit;
  font-weight: 900;
}

body[data-view="letter"] .szv-letter-field span {
  min-width: 0;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="letter"] .szv-letter-to {
  top: 20.55%;
}

body[data-view="letter"] .szv-letter-from {
  top: 28.1%;
}

body[data-view="letter"] .szv-letter-message-pane {
  position: absolute;
  left: 2.7%;
  right: 6.7%;
  top: 31.8%;
  bottom: 14.3%;
  z-index: 1;
  min-height: 0;
  padding: clamp(14px, 2vw, 28px) clamp(16px, 2.2vw, 32px);
  border: 0;
  background: var(--card-bg);
  color: var(--card-fg);
  overflow: hidden;
}

body[data-view="letter"] .szv-letter-message-pane p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: currentColor;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(17px, 2.18vw, 34px);
  font-weight: 400;
  line-height: 1.14;
  overflow-wrap: anywhere;
}

body[data-view="letter"] .szv-letter-window .letter-card-reply {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px dashed currentColor;
  color: currentColor !important;
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.25;
}

@media (max-width: 980px) {
  body[data-view="letter"] .letter-panel {
    max-width: min(760px, calc(100vw - 32px));
  }

  body[data-view="letter"] .letter-feed {
    grid-template-columns: 1fr;
  }

  body[data-view="letter"] .szv-letter-to,
  body[data-view="letter"] .szv-letter-from {
    font-size: clamp(6px, 1.8vw, 10px);
  }

  body[data-view="letter"] .szv-letter-message-pane p {
    font-size: clamp(18px, 4vw, 31px);
  }
}

@media (max-width: 560px) {
  body[data-view="letter"] .letter-panel {
    max-width: calc(100vw - 20px);
  }

  body[data-view="letter"] .letter-feed {
    gap: 22px;
  }

  body[data-view="letter"] .szv-letter-message-pane {
    padding: 10px 12px;
  }

body[data-view="letter"] .szv-letter-message-pane p {
  font-size: clamp(14px, 4.4vw, 20px);
  }
}

/* LETTER pass 10: replace Suzy's top question with the supplied SZV message dialog. */
body[data-view="letter"] .letter-panel[data-mode="submit"] .szv-artist-dialog {
  display: none;
}

body[data-view="letter"] .szv-artist-dialog {
  position: relative;
  display: block;
  width: min(92vw, 520px);
  aspect-ratio: 1090 / 640;
  margin: clamp(6px, 1.3vw, 16px) auto clamp(18px, 2.5vw, 34px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("assets/letter/szv-message-reply-dialog.png?v=20260624-szv-reply-dialog") center / 134% auto no-repeat;
  box-shadow: none;
  overflow: hidden;
  font-family: "Press Start 2P", "Courier New", monospace;
}

body[data-view="letter"] .szv-artist-dialog > :not(.letter-artist-actions) {
  display: none !important;
}

body[data-view="letter"] .szv-artist-dialog::after {
  content: "?�즘 ?�떻�?지??";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 43%;
  z-index: 1;
  color: #000;
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Inter", Arial, sans-serif;
  font-size: clamp(15px, 1.45vw, 22px);
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

body[data-view="letter"] .szv-artist-dialog .letter-artist-actions {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  padding: 0;
  pointer-events: none;
}

body[data-view="letter"] .szv-artist-dialog .letter-artist-actions button {
  position: absolute;
  top: 73.6%;
  height: 13.2%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
}

body[data-view="letter"] .szv-artist-dialog #answerArtistQuestion {
  left: 35.5%;
  width: 29%;
}

body[data-view="letter"] .szv-artist-dialog .letter-artist-actions button:hover,
body[data-view="letter"] .szv-artist-dialog .letter-artist-actions button:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  body[data-view="letter"] .szv-artist-dialog {
    width: min(88vw, 420px);
    margin-bottom: 22px;
  }

  body[data-view="letter"] .szv-artist-dialog::after {
    left: 14%;
    right: 14%;
    top: 43%;
    font-size: clamp(12px, 4vw, 17px);
    line-height: 1.5;
  }
}

/* HOME final guard: keep the Melt Dome yellow outer background and black center panel stable. */
body #app #entry.entry,
body #app #entry.entry .gate-scroll,
body #app #entry.entry .gate-scroll .gate-canvas {
  background-color: #fef019 !important;
  background-image: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body #app #entry.entry .gate-scroll .gate-canvas::before,
body #app #entry.entry .gate-scroll .gate-canvas::after {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

body #app #entry.entry .gate-scroll .gate-canvas > .rm-black-panel.home-black-panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  left: 4% !important;
  right: 4% !important;
  top: 62px !important;
  bottom: 34px !important;
  z-index: 2 !important;
  border-radius: 8px !important;
  background: #050505 !important;
  background-color: #050505 !important;
  background-image: none !important;
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.18) !important;
  pointer-events: none !important;
}

@media (max-width: 920px) {
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-black-panel.home-black-panel {
    left: 5% !important;
    right: 5% !important;
    top: 72px !important;
    bottom: 48px !important;
  }
}

@media (max-width: 640px) {
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-black-panel.home-black-panel {
    top: 72px !important;
    bottom: 52px !important;
  }
}

/* VROWN opening: Readymag-style type intro. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-menu-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 100svh !important;
  height: auto !important;
  padding: clamp(84px, 8.5vw, 116px) clamp(20px, 7vw, 112px) clamp(48px, 6vw, 84px) !important;
  background: #fff !important;
  color: #050505 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-menu-intro {
  width: min(1140px, 100%);
  margin: 0 auto;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-menu-intro p,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-menu-intro a {
  display: block;
  margin: 0 0 clamp(10px, 1.45vw, 20px);
  color: inherit;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(50px, 7.25vw, 118px);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: lowercase;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-menu-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 32px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-menu-name span {
  display: inline-block;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-menu-name-logo {
  display: inline-block;
  width: clamp(190px, 24vw, 350px);
  height: clamp(64px, 7.6vw, 112px);
  object-fit: cover;
  object-position: center;
  vertical-align: middle;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-menu-scroll {
  width: fit-content;
  border-bottom: 0.055em solid currentColor;
  cursor: pointer;
}

@media (max-width: 760px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-menu-hero {
    min-height: 92svh !important;
    padding: 96px 18px 64px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-menu-intro p,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-menu-intro a {
    margin-bottom: clamp(10px, 3vw, 18px);
    font-size: clamp(46px, 14.5vw, 82px);
    line-height: 0.9;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-menu-name {
    gap: 12px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-menu-name-logo {
    width: clamp(160px, 48vw, 260px);
    height: clamp(58px, 17vw, 92px);
  }
}

/* HOME title copy pass: two equal hero lines. */
body #app #entry.entry .gate-scroll .gate-canvas > .gate-title.home-title {
  top: calc(62px + (100% - 96px) / 2) !important;
  z-index: 75 !important;
  width: 800px !important;
  max-width: calc(100% - 110px) !important;
  color: #fef019 !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: clamp(88px, 9vw, 124px) !important;
  font-weight: 800 !important;
  line-height: 0.86 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  transform: translate(-50%, -50%) !important;
}

body #app #entry.entry .gate-scroll .gate-canvas > .gate-title.home-title span,
body #app #entry.entry .gate-scroll .gate-canvas > .gate-title.home-title span:first-child,
body #app #entry.entry .gate-scroll .gate-canvas > .gate-title.home-title span:nth-child(2) {
  display: block !important;
  font-size: 1em !important;
  line-height: 0.86 !important;
  text-transform: uppercase !important;
}

@media (max-width: 920px) {
  body #app #entry.entry .gate-scroll .gate-canvas > .gate-title.home-title {
    top: calc(62px + (100% - 96px) / 2) !important;
    max-width: calc(100% - 60px) !important;
    font-size: clamp(76px, 11vw, 98px) !important;
  }
}

@media (max-width: 640px) {
  body #app #entry.entry .gate-scroll .gate-canvas > .gate-title.home-title {
    top: calc(72px + (100% - 124px) / 2) !important;
    width: 410px !important;
    max-width: calc(100% - 32px) !important;
    font-size: clamp(58px, 17vw, 76px) !important;
  }
}

/* VROWN opening pass: portrait beside name only. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-dazed-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100svh !important;
  height: auto !important;
  padding: clamp(88px, 9vw, 126px) clamp(22px, 4vw, 52px) clamp(44px, 6vw, 82px) !important;
  background: #fff !important;
  color: #050505 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-dazed-nameplate {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.86fr);
  align-items: stretch;
  width: min(1180px, 100%);
  height: clamp(330px, 48vh, 460px);
  min-height: 0;
  background: #fff;
  overflow: hidden;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-dazed-face {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #f3efeb;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-dazed-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  filter: saturate(1.05) contrast(1.05);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-dazed-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  margin: 0 0 0 -0.035em;
  color: #000;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", Arial, sans-serif;
  font-size: clamp(72px, 10.8vw, 164px);
  font-style: normal;
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-dazed-title span {
  display: block;
  white-space: nowrap;
}

@media (max-width: 900px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-dazed-nameplate {
    grid-template-columns: 1fr;
    width: min(680px, 100%);
    min-height: 0;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-dazed-face {
    height: clamp(250px, 48vw, 420px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-dazed-title {
    margin: -0.08em 0 0;
    font-size: clamp(78px, 20vw, 146px);
  }
}

@media (max-width: 560px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-dazed-hero {
    padding: 94px 16px 48px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-dazed-face {
    height: clamp(230px, 68vw, 330px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-dazed-title {
    font-size: clamp(66px, 21vw, 112px);
  }
}

/* VROWN opening pass: crossed portrait and name rows. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100svh !important;
  height: auto !important;
  padding: clamp(86px, 8vw, 118px) clamp(16px, 4vw, 54px) clamp(38px, 5vw, 72px) !important;
  background: #fff !important;
  color: #000 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-nameplate {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  width: min(1180px, 100%);
  height: clamp(500px, 74vh, 650px);
  overflow: hidden;
  background: #fff;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-title {
  display: contents;
  margin: 0;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-photo {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #f4f0ec;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.05);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-photo-first {
  grid-column: 1;
  grid-row: 1;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-photo-first img {
  object-position: 50% 25%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-photo-second {
  grid-column: 2;
  grid-row: 2;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-photo-second img {
  object-position: 50% 21%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word {
  display: flex;
  align-items: center;
  min-width: 0;
  color: #000;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", Arial, sans-serif;
  font-size: clamp(168px, 25.8vw, 334px);
  font-style: normal;
  font-weight: 900;
  line-height: 0.72;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word-suzie {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-start;
  margin-left: -0.03em;
  transform: scaleX(0.7) scaleY(1.12);
  transform-origin: left center;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word-vrown {
  grid-column: 1;
  grid-row: 2;
  justify-content: flex-end;
  margin-right: 0;
  transform: scaleX(0.7) scaleY(1.12);
  transform-origin: right center;
}

@media (max-width: 900px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-nameplate {
    height: clamp(440px, 66vh, 560px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word {
    font-size: clamp(112px, 24vw, 202px);
    transform: scaleX(0.68) scaleY(1.1);
  }
}

@media (max-width: 560px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-hero {
    padding: 92px 12px 42px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-nameplate {
    height: clamp(390px, 68vh, 510px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word {
    font-size: clamp(86px, 29vw, 138px);
    transform: scaleX(0.64) scaleY(1.06);
  }
}

/* Final navigation pass: fixed black hamburger menu. */
body .gate-menu.app-menu,
body[data-view="home"] .gate-menu.app-menu,
body[data-view="vrown"] .gate-menu.app-menu,
body[data-view="zungk"] .gate-menu.app-menu,
body[data-view="letter"] .gate-menu.app-menu,
body[data-view="game"] .gate-menu.app-menu,
body:has(.site-shell[data-view="zungk"]) .gate-menu.app-menu {
  position: fixed !important;
  top: 18px !important;
  right: 20px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 5000 !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body .gate-menu.app-menu .app-menu-toggle {
  position: relative !important;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #050505 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transform: none !important;
}

body .gate-menu.app-menu .app-menu-toggle span {
  display: block !important;
  width: 36px !important;
  height: 4px !important;
  border-radius: 0 !important;
  background: #050505 !important;
  box-shadow: none !important;
  transform-origin: center !important;
  transition: transform 160ms ease, opacity 160ms ease, width 160ms ease !important;
}

body .gate-menu.app-menu .app-menu-toggle:hover,
body .gate-menu.app-menu .app-menu-toggle:focus-visible {
  background: transparent !important;
  color: #050505 !important;
  transform: none !important;
}

body .gate-menu.app-menu .app-menu-toggle:focus-visible {
  outline: 2px solid #050505 !important;
  outline-offset: 4px !important;
}

body .gate-menu.app-menu.is-open .app-menu-toggle span:nth-child(1) {
  transform: translateY(10px) rotate(45deg) !important;
}

body .gate-menu.app-menu.is-open .app-menu-toggle span:nth-child(2) {
  opacity: 0 !important;
  width: 18px !important;
}

body .gate-menu.app-menu.is-open .app-menu-toggle span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg) !important;
}

body .gate-menu.app-menu .app-menu-items {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  z-index: 5001 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 156px !important;
  min-width: 156px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 10px !important;
  gap: 6px !important;
  border: 2px solid #050505 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.2) !important;
}

body .gate-menu.app-menu .app-menu-items[hidden] {
  display: none !important;
}

body .gate-menu.app-menu .app-menu-items button,
body[data-view="home"] .gate-menu.app-menu .app-menu-items button,
body[data-view="vrown"] .gate-menu.app-menu .app-menu-items button,
body[data-view="zungk"] .gate-menu.app-menu .app-menu-items button,
body[data-view="letter"] .gate-menu.app-menu .app-menu-items button,
body[data-view="game"] .gate-menu.app-menu .app-menu-items button {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border: 2px solid #050505 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #050505 !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transform: none !important;
}

body .gate-menu.app-menu .app-menu-items button.is-active,
body .gate-menu.app-menu .app-menu-items button:hover,
body .gate-menu.app-menu .app-menu-items button:focus-visible {
  background: #050505 !important;
  color: #fff !important;
  transform: none !important;
}

@media (max-width: 640px) {
  body .gate-menu.app-menu,
  body[data-view="home"] .gate-menu.app-menu,
  body[data-view="vrown"] .gate-menu.app-menu,
  body[data-view="zungk"] .gate-menu.app-menu,
  body[data-view="letter"] .gate-menu.app-menu,
  body[data-view="game"] .gate-menu.app-menu,
  body:has(.site-shell[data-view="zungk"]) .gate-menu.app-menu {
    top: 14px !important;
    right: 14px !important;
    display: block !important;
  }

  body .gate-menu.app-menu .app-menu-toggle {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  body .gate-menu.app-menu .app-menu-toggle span {
    width: 32px !important;
    height: 4px !important;
  }

  body .gate-menu.app-menu .app-menu-items {
    width: 148px !important;
    min-width: 148px !important;
  }
}

/* HOME enter button pass: keep ENTER directly under the VROWN title line. */
body #app #entry.entry .gate-scroll .gate-canvas > .gate-brand {
  left: 50% !important;
  right: auto !important;
  top: calc(62px + (100% - 96px) / 2 + clamp(124px, 11vw, 158px)) !important;
  bottom: auto !important;
  z-index: 76 !important;
  transform: translateX(-50%) !important;
}

body #app #entry.entry .gate-scroll .gate-canvas > .gate-brand:hover {
  transform: translateX(-50%) translateY(1px) !important;
}

@media (max-width: 920px) {
  body #app #entry.entry .gate-scroll .gate-canvas > .gate-brand {
    top: calc(62px + (100% - 96px) / 2 + clamp(100px, 13vw, 126px)) !important;
  }
}

@media (max-width: 640px) {
  body #app #entry.entry .gate-scroll .gate-canvas > .gate-brand {
    top: calc(72px + (100% - 124px) / 2 + clamp(82px, 24vw, 104px)) !important;
    min-width: 126px !important;
  }
}

/* VROWN cross hero polish: stronger face crops, less compressed type, tighter top impact. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-hero {
  align-items: flex-start !important;
  padding-top: clamp(74px, 6.2vw, 92px) !important;
  padding-bottom: clamp(36px, 4.5vw, 64px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-nameplate {
  height: clamp(500px, 72vh, 620px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-photo {
  background: #f1eee9 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-photo img {
  transform-origin: center center !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-photo-first img {
  object-position: 50% 21% !important;
  transform: scale(1.22) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-photo-second img {
  object-position: 50% 18% !important;
  transform: scale(1.08) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word {
  font-size: clamp(154px, 24vw, 312px) !important;
  line-height: 0.72 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word-suzie {
  margin-left: -0.02em !important;
  transform: scaleX(0.78) scaleY(1.08) !important;
  transform-origin: left center !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word-vrown {
  margin-right: 0 !important;
  font-size: clamp(130px, 20vw, 260px) !important;
  letter-spacing: 0 !important;
  justify-content: flex-start !important;
  transform: scaleX(0.86) scaleY(1.28) !important;
  transform-origin: left center !important;
}

@media (max-width: 900px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-hero {
    padding-top: 82px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-nameplate {
    height: clamp(430px, 65vh, 540px) !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word {
    font-size: clamp(104px, 23vw, 190px) !important;
  }
}

@media (max-width: 560px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-hero {
    padding-top: 88px !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-nameplate {
    height: clamp(380px, 66vh, 500px) !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word {
    font-size: clamp(78px, 27vw, 128px) !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word-suzie,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word-vrown {
    transform: scaleX(0.68) scaleY(1.06) !important;
  }
}

/* Menu open pass: thicker hamburger, original top-bar menu on reveal. */
body .gate-menu.app-menu .app-menu-toggle,
body[data-view="home"] .gate-menu.app-menu .app-menu-toggle,
body[data-view="vrown"] .gate-menu.app-menu .app-menu-toggle,
body[data-view="zungk"] .gate-menu.app-menu .app-menu-toggle,
body[data-view="letter"] .gate-menu.app-menu .app-menu-toggle,
body[data-view="game"] .gate-menu.app-menu .app-menu-toggle {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  height: 52px !important;
  min-height: 52px !important;
  gap: 7px !important;
}

body .gate-menu.app-menu .app-menu-toggle span,
body[data-view="home"] .gate-menu.app-menu .app-menu-toggle span,
body[data-view="vrown"] .gate-menu.app-menu .app-menu-toggle span,
body[data-view="zungk"] .gate-menu.app-menu .app-menu-toggle span,
body[data-view="letter"] .gate-menu.app-menu .app-menu-toggle span,
body[data-view="game"] .gate-menu.app-menu .app-menu-toggle span {
  width: 46px !important;
  height: 7px !important;
  background: #050505 !important;
}

body .gate-menu.app-menu.is-open .app-menu-toggle span:nth-child(1) {
  transform: translateY(14px) rotate(45deg) !important;
}

body .gate-menu.app-menu.is-open .app-menu-toggle span:nth-child(2) {
  width: 24px !important;
}

body .gate-menu.app-menu.is-open .app-menu-toggle span:nth-child(3) {
  transform: translateY(-14px) rotate(-45deg) !important;
}

body .gate-menu.app-menu .app-menu-items,
body[data-view="home"] .gate-menu.app-menu .app-menu-items,
body[data-view="vrown"] .gate-menu.app-menu .app-menu-items,
body[data-view="zungk"] .gate-menu.app-menu .app-menu-items,
body[data-view="letter"] .gate-menu.app-menu .app-menu-items,
body[data-view="game"] .gate-menu.app-menu .app-menu-items {
  position: fixed !important;
  top: 12px !important;
  right: 92px !important;
  left: 12px !important;
  z-index: 4999 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  padding: 0 !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="home"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="vrown"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="zungk"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="letter"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="game"] .gate-menu.app-menu .app-menu-items[hidden] {
  display: none !important;
}

body .gate-menu.app-menu .app-menu-items button,
body[data-view="home"] .gate-menu.app-menu .app-menu-items button,
body[data-view="vrown"] .gate-menu.app-menu .app-menu-items button,
body[data-view="zungk"] .gate-menu.app-menu .app-menu-items button,
body[data-view="letter"] .gate-menu.app-menu .app-menu-items button,
body[data-view="game"] .gate-menu.app-menu .app-menu-items button {
  display: grid !important;
  flex: 1 1 0 !important;
  place-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 50px !important;
  padding: 8px 13px !important;
  border: 2px solid rgba(17, 17, 20, 0.88) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(18px, 1.75vw, 28px) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: 0.6px 0 0 currentColor !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: none !important;
  cursor: pointer !important;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease !important;
}

body .gate-menu.app-menu .app-menu-items button.is-active,
body[data-view="home"] .gate-menu.app-menu .app-menu-items button.is-active,
body[data-view="vrown"] .gate-menu.app-menu .app-menu-items button.is-active,
body[data-view="zungk"] .gate-menu.app-menu .app-menu-items button.is-active,
body[data-view="letter"] .gate-menu.app-menu .app-menu-items button.is-active,
body[data-view="game"] .gate-menu.app-menu .app-menu-items button.is-active {
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--ink) !important;
  transform: none !important;
}

body .gate-menu.app-menu .app-menu-items button:hover,
body .gate-menu.app-menu .app-menu-items button:focus-visible {
  background: var(--ink) !important;
  color: #fff !important;
  transform: translateY(1px) !important;
}

@media (max-width: 920px) {
  body .gate-menu.app-menu .app-menu-items,
  body[data-view="home"] .gate-menu.app-menu .app-menu-items,
  body[data-view="vrown"] .gate-menu.app-menu .app-menu-items,
  body[data-view="zungk"] .gate-menu.app-menu .app-menu-items,
  body[data-view="letter"] .gate-menu.app-menu .app-menu-items,
  body[data-view="game"] .gate-menu.app-menu .app-menu-items {
    top: 68px !important;
    right: 10px !important;
    left: 10px !important;
  }

  body .gate-menu.app-menu .app-menu-items button,
  body[data-view="home"] .gate-menu.app-menu .app-menu-items button,
  body[data-view="vrown"] .gate-menu.app-menu .app-menu-items button,
  body[data-view="zungk"] .gate-menu.app-menu .app-menu-items button,
  body[data-view="letter"] .gate-menu.app-menu .app-menu-items button,
  body[data-view="game"] .gate-menu.app-menu .app-menu-items button {
    min-height: 48px !important;
    padding: 7px 9px !important;
    font-size: clamp(15px, 2.4vw, 22px) !important;
  }
}

@media (max-width: 640px) {
  body .gate-menu.app-menu .app-menu-toggle,
  body[data-view="home"] .gate-menu.app-menu .app-menu-toggle,
  body[data-view="vrown"] .gate-menu.app-menu .app-menu-toggle,
  body[data-view="zungk"] .gate-menu.app-menu .app-menu-toggle,
  body[data-view="letter"] .gate-menu.app-menu .app-menu-toggle,
  body[data-view="game"] .gate-menu.app-menu .app-menu-toggle {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 46px !important;
    min-height: 46px !important;
    gap: 6px !important;
  }

  body .gate-menu.app-menu .app-menu-toggle span,
  body[data-view="home"] .gate-menu.app-menu .app-menu-toggle span,
  body[data-view="vrown"] .gate-menu.app-menu .app-menu-toggle span,
  body[data-view="zungk"] .gate-menu.app-menu .app-menu-toggle span,
  body[data-view="letter"] .gate-menu.app-menu .app-menu-toggle span,
  body[data-view="game"] .gate-menu.app-menu .app-menu-toggle span {
    width: 40px !important;
    height: 6px !important;
  }

  body .gate-menu.app-menu.is-open .app-menu-toggle span:nth-child(1) {
    transform: translateY(12px) rotate(45deg) !important;
  }

  body .gate-menu.app-menu.is-open .app-menu-toggle span:nth-child(3) {
    transform: translateY(-12px) rotate(-45deg) !important;
  }

  body .gate-menu.app-menu .app-menu-items,
  body[data-view="home"] .gate-menu.app-menu .app-menu-items,
  body[data-view="vrown"] .gate-menu.app-menu .app-menu-items,
  body[data-view="zungk"] .gate-menu.app-menu .app-menu-items,
  body[data-view="letter"] .gate-menu.app-menu .app-menu-items,
  body[data-view="game"] .gate-menu.app-menu .app-menu-items {
    top: 62px !important;
    right: 6px !important;
    left: 6px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  body .gate-menu.app-menu .app-menu-items[hidden],
  body[data-view="home"] .gate-menu.app-menu .app-menu-items[hidden],
  body[data-view="vrown"] .gate-menu.app-menu .app-menu-items[hidden],
  body[data-view="zungk"] .gate-menu.app-menu .app-menu-items[hidden],
  body[data-view="letter"] .gate-menu.app-menu .app-menu-items[hidden],
  body[data-view="game"] .gate-menu.app-menu .app-menu-items[hidden] {
    display: none !important;
  }

  body .gate-menu.app-menu .app-menu-items button,
  body[data-view="home"] .gate-menu.app-menu .app-menu-items button,
  body[data-view="vrown"] .gate-menu.app-menu .app-menu-items button,
  body[data-view="zungk"] .gate-menu.app-menu .app-menu-items button,
  body[data-view="letter"] .gate-menu.app-menu .app-menu-items button,
  body[data-view="game"] .gate-menu.app-menu .app-menu-items button {
    min-height: 42px !important;
    padding: 6px 3px !important;
    font-size: clamp(11px, 3vw, 15px) !important;
  }
}

/* LETTER board polish: keep fixed nav from floating over message cards. */
body[data-view="letter"] .gate-menu.app-menu {
  position: absolute !important;
}

/* Menu dropdown pass: keep the pill design, open below the hamburger. */
body .gate-menu.app-menu,
body[data-view="home"] .gate-menu.app-menu,
body[data-view="vrown"] .gate-menu.app-menu,
body[data-view="zungk"] .gate-menu.app-menu,
body[data-view="letter"] .gate-menu.app-menu,
body[data-view="game"] .gate-menu.app-menu,
body:has(.site-shell[data-view="zungk"]) .gate-menu.app-menu {
  position: fixed !important;
  top: 18px !important;
  right: 20px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 5000 !important;
}

body .gate-menu.app-menu .app-menu-items,
body[data-view="home"] .gate-menu.app-menu .app-menu-items,
body[data-view="vrown"] .gate-menu.app-menu .app-menu-items,
body[data-view="zungk"] .gate-menu.app-menu .app-menu-items,
body[data-view="letter"] .gate-menu.app-menu .app-menu-items,
body[data-view="game"] .gate-menu.app-menu .app-menu-items {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 5001 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: clamp(174px, 16vw, 220px) !important;
  min-width: 174px !important;
  max-width: calc(100vw - 28px) !important;
  padding: 0 !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="home"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="vrown"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="zungk"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="letter"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="game"] .gate-menu.app-menu .app-menu-items[hidden] {
  display: none !important;
}

body .gate-menu.app-menu .app-menu-items button,
body[data-view="home"] .gate-menu.app-menu .app-menu-items button,
body[data-view="vrown"] .gate-menu.app-menu .app-menu-items button,
body[data-view="zungk"] .gate-menu.app-menu .app-menu-items button,
body[data-view="letter"] .gate-menu.app-menu .app-menu-items button,
body[data-view="game"] .gate-menu.app-menu .app-menu-items button {
  width: 100% !important;
  min-height: 50px !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
}

@media (max-width: 640px) {
  body .gate-menu.app-menu,
  body[data-view="home"] .gate-menu.app-menu,
  body[data-view="vrown"] .gate-menu.app-menu,
  body[data-view="zungk"] .gate-menu.app-menu,
  body[data-view="letter"] .gate-menu.app-menu,
  body[data-view="game"] .gate-menu.app-menu,
  body:has(.site-shell[data-view="zungk"]) .gate-menu.app-menu {
    top: 14px !important;
    right: 14px !important;
  }

  body .gate-menu.app-menu .app-menu-items,
  body[data-view="home"] .gate-menu.app-menu .app-menu-items,
  body[data-view="vrown"] .gate-menu.app-menu .app-menu-items,
  body[data-view="zungk"] .gate-menu.app-menu .app-menu-items,
  body[data-view="letter"] .gate-menu.app-menu .app-menu-items,
  body[data-view="game"] .gate-menu.app-menu .app-menu-items {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: 164px !important;
    min-width: 164px !important;
    max-width: calc(100vw - 28px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  body .gate-menu.app-menu .app-menu-items[hidden],
  body[data-view="home"] .gate-menu.app-menu .app-menu-items[hidden],
  body[data-view="vrown"] .gate-menu.app-menu .app-menu-items[hidden],
  body[data-view="zungk"] .gate-menu.app-menu .app-menu-items[hidden],
  body[data-view="letter"] .gate-menu.app-menu .app-menu-items[hidden],
  body[data-view="game"] .gate-menu.app-menu .app-menu-items[hidden] {
    display: none !important;
  }

  body .gate-menu.app-menu .app-menu-items button,
  body[data-view="home"] .gate-menu.app-menu .app-menu-items button,
  body[data-view="vrown"] .gate-menu.app-menu .app-menu-items button,
  body[data-view="zungk"] .gate-menu.app-menu .app-menu-items button,
  body[data-view="letter"] .gate-menu.app-menu .app-menu-items button,
  body[data-view="game"] .gate-menu.app-menu .app-menu-items button {
    min-height: 42px !important;
    padding: 6px 12px !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
  }
}

/* VROWN final cross band: reference-like wide ratio with even margins and uncropped type. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-hero {
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 100svh !important;
  padding: clamp(76px, 6.6vw, 94px) clamp(26px, 4vw, 44px) clamp(36px, 5vw, 70px) !important;
  background: #fff !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-nameplate {
  grid-template-columns: minmax(0, 52%) minmax(0, 48%) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  width: min(1220px, calc(100vw - clamp(52px, 8vw, 88px))) !important;
  height: clamp(430px, 63vh, 560px) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  gap: 0 !important;
  background: #fff !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-photo {
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #f2eee9 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(1.08) contrast(1.06) !important;
  transform-origin: center !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-photo-first img {
  object-position: 50% 19% !important;
  transform: scale(1.24) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-photo-second img {
  object-position: 50% 17% !important;
  transform: scale(1.08) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  color: #000 !important;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 0.76 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transform: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word-suzie {
  justify-content: flex-start !important;
  margin: 0 0 0 clamp(28px, 2.95vw, 38px) !important;
  font-size: clamp(122px, 18.2vw, 236px) !important;
  transform: scaleX(0.92) scaleY(1.08) !important;
  transform-origin: left center !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word-vrown {
  justify-content: flex-start !important;
  margin: 0 !important;
  font-size: clamp(112px, 17.2vw, 222px) !important;
  transform: scaleX(0.92) scaleY(1.1) !important;
  transform-origin: left center !important;
}

@media (max-width: 900px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-hero {
    padding: 82px 18px 44px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-nameplate {
    width: calc(100vw - 36px) !important;
    height: clamp(390px, 59vh, 510px) !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word-suzie {
    font-size: clamp(72px, 18.4vw, 142px) !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word-vrown {
    font-size: clamp(68px, 17.2vw, 132px) !important;
  }
}

@media (max-width: 560px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-hero {
    padding: 88px 12px 38px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-nameplate {
    width: calc(100vw - 24px) !important;
    height: clamp(360px, 60vh, 470px) !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word-suzie {
    font-size: clamp(48px, 17.6vw, 88px) !important;
  }

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-cross-word-vrown {
    font-size: clamp(46px, 16.8vw, 84px) !important;
  }
}

/* LETTER clean board guard: menu button should not cover message cards. */
body[data-view="letter"] .gate-menu.app-menu,
body[data-view="letter"] nav.gate-menu.app-menu,
body:has(.site-shell[data-view="letter"]) .gate-menu.app-menu {
  position: absolute !important;
}

/* VROWN opening: Readymag lucone.work text clone. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-readymag-hello-hero {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 100svh !important;
  height: auto !important;
  padding: clamp(106px, 10vw, 120px) 24px 60px clamp(44px, 12.5vw, 160px) !important;
  background: #fff !important;
  color: #000 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-readymag-hello-copy {
  width: min(920px, calc(100vw - clamp(70px, 17vw, 220px)));
  margin: 0;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-readymag-hello-copy h1 {
  margin: 0;
  color: #000;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: clamp(70px, 7.85vw, 100px);
  font-style: normal;
  font-weight: 900;
  line-height: 0.74;
  letter-spacing: 0;
  text-transform: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-rm-line {
  display: block;
  white-space: nowrap;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-rm-line-hello {
  display: block;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-rm-slash {
  display: inline-block;
  color: #ff008c;
  font-weight: 900;
  letter-spacing: 0;
  transform: translateY(-0.01em);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-rm-zungk {
  color: #b6ff00;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-rm-scroll {
  display: block;
  width: fit-content;
  margin-top: -0.02em;
  color: #c7c7c7;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: clamp(70px, 7.85vw, 100px);
  font-style: normal;
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}

@media (max-width: 900px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-readymag-hello-hero {
    padding: 104px 20px 54px clamp(28px, 8vw, 72px) !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-readymag-hello-copy {
    width: min(680px, calc(100vw - clamp(56px, 13vw, 110px)));
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-readymag-hello-copy h1,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-rm-scroll {
    font-size: clamp(54px, 11vw, 86px);
  }
}

@media (max-width: 560px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-readymag-hello-hero {
    padding: 92px 14px 42px 18px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-readymag-hello-copy {
    width: 100%;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-readymag-hello-copy h1,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-rm-scroll {
    font-size: clamp(38px, 13.3vw, 64px);
    letter-spacing: 0;
    line-height: 0.78;
  }
}

/* VROWN LETTER section: reuse the current LETTER page message-frame design. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-reviews {
  position: relative !important;
  min-height: clamp(980px, 82vw, 1220px) !important;
  padding: clamp(74px, 7vw, 104px) 0 clamp(88px, 9vw, 130px) !important;
  overflow: hidden !important;
  background: #f7f8f8 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-reviews::before {
  content: none !important;
  position: absolute !important;
  left: auto !important;
  right: clamp(28px, 7vw, 104px) !important;
  top: clamp(32px, 4vw, 58px) !important;
  z-index: 20 !important;
  color: #050505 !important;
  font-family: "Press Start 2P", "Courier New", monospace !important;
  font-size: clamp(13px, 1.45vw, 19px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  transform: rotate(1deg) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card.message.letter-card {
  position: absolute !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #111114 !important;
  overflow: visible !important;
  transform: rotate(var(--va-rotate, 0deg)) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card::before,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card::after {
  display: none !important;
  content: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card .szv-letter-window {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1448 / 1086 !important;
  overflow: hidden !important;
  background: url("assets/letter/szv-letter-frame-clean.png?v=20260624-clean-fields") center / 100% 100% no-repeat !important;
  color: #111114 !important;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif !important;
  box-shadow: 0 12px 24px rgba(17, 17, 20, 0.12) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card .szv-letter-to,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card .szv-letter-from {
  position: absolute !important;
  z-index: 2 !important;
  left: 11.8% !important;
  right: 9.6% !important;
  overflow: hidden !important;
  color: #111114 !important;
  font-family: "Press Start 2P", "Courier New", monospace !important;
  font-size: clamp(6px, 0.72vw, 11px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  transform: translateY(-50%) !important;
  white-space: nowrap !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card .szv-letter-field {
  display: flex !important;
  align-items: center !important;
  gap: 1.28em !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card .szv-letter-field strong {
  flex: 0 0 auto !important;
  font: inherit !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card .szv-letter-field span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card .szv-letter-to {
  top: 20.55% !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card .szv-letter-from {
  top: 28.1% !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card .szv-letter-message-pane {
  position: absolute !important;
  left: 2.7% !important;
  right: 6.7% !important;
  top: 31.8% !important;
  bottom: 14.3% !important;
  z-index: 1 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(12px, 1.65vw, 26px) clamp(14px, 1.9vw, 30px) !important;
  border: 0 !important;
  background: var(--card-bg) !important;
  color: var(--card-fg) !important;
  overflow: hidden !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card .szv-letter-message-pane p {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  color: currentColor !important;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif !important;
  font-size: clamp(16px, 1.9vw, 33px) !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
  text-transform: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card .letter-card-reply {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 2px dashed currentColor !important;
  color: currentColor !important;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif !important;
  font-size: clamp(11px, 0.98vw, 16px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-transform: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-puff {
  display: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-large {
  --va-rotate: -3deg;
  left: clamp(28px, 7vw, 118px) !important;
  top: clamp(84px, 8vw, 126px) !important;
  z-index: 4 !important;
  width: clamp(500px, 45vw, 730px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window {
  --va-rotate: 2deg;
  left: clamp(320px, 43vw, 690px) !important;
  top: clamp(210px, 18vw, 286px) !important;
  z-index: 8 !important;
  width: clamp(430px, 36vw, 590px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote {
  --va-rotate: -2deg;
  right: clamp(20px, 5vw, 92px) !important;
  top: clamp(565px, 47vw, 668px) !important;
  z-index: 7 !important;
  width: clamp(430px, 38vw, 620px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic {
  --va-rotate: 4deg;
  left: clamp(24px, 8vw, 130px) !important;
  top: clamp(690px, 57vw, 805px) !important;
  z-index: 5 !important;
  width: clamp(350px, 30vw, 500px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
  --va-rotate: -1deg;
  left: clamp(390px, 39vw, 700px) !important;
  bottom: clamp(46px, 5vw, 78px) !important;
  z-index: 6 !important;
  width: clamp(420px, 35vw, 580px) !important;
}

@media (max-width: 980px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-reviews {
    min-height: auto !important;
    display: grid !important;
    gap: clamp(18px, 4vw, 34px) !important;
    padding: 78px 18px 86px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-large,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
    position: relative !important;
    inset: auto !important;
    justify-self: center !important;
    width: min(720px, calc(100vw - 36px)) !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic {
    justify-self: end !important;
    width: min(640px, calc(100vw - 60px)) !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
    justify-self: start !important;
    width: min(650px, calc(100vw - 54px)) !important;
  }
}

@media (max-width: 560px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-reviews {
    gap: 22px !important;
    padding: 70px 10px 70px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-window,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-magic,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-quote,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-review-boundary {
    justify-self: center !important;
    width: calc(100vw - 20px) !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card .szv-letter-to,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card .szv-letter-from {
    font-size: clamp(6px, 1.72vw, 10px) !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card .szv-letter-message-pane {
    padding: 10px 12px !important;
  }

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-letter-card .szv-letter-message-pane p {
    font-size: clamp(14px, 4.15vw, 20px) !important;
  }
}

/* VROWN opening poster: Meltdome-inspired sticker collage. */
body[data-view="vrown"]::before {
  content: none;
}

body[data-view="vrown"] {
  background: #fff !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"],
body[data-view="vrown"] .site-shell[data-view="vrown"] .vrown-supari,
body[data-view="vrown"] .site-shell[data-view="vrown"] .vrown-analogue-stage,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main {
  background: #fff !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-banner,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-intro,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-reviews,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-play,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-membership,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-community,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-footer {
  background: #fff !important;
  color: #050505 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-membership,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-community,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-footer {
  border-color: #050505 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-membership-marquee,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-community h2,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-community p,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-footer {
  color: #050505 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-meltdome-hero {
  display: block !important;
  min-height: 100svh !important;
  height: auto !important;
  padding: clamp(38px, 5.55vw, 40px) clamp(34px, 3vw, 42px) clamp(38px, 5.55vw, 40px) !important;
  overflow: hidden !important;
  background: #fff !important;
  color: #050505 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-poster {
  position: relative;
  min-height: calc(100svh - clamp(76px, 11.1vw, 80px));
  overflow: hidden;
  border: 2px solid #050505;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    #fef019;
  background-size: 34px 34px;
  box-shadow: none;
  isolation: isolate;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-titlebar {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  min-height: clamp(74px, 8.3vw, 124px);
  border-bottom: 2px solid #050505;
  background: #fff;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-titlebar h1 {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 clamp(8px, 1.1vw, 18px);
  color: #050505;
  font-family: "Archivo Black", Impact, Haettenschweiler, "Arial Black", Arial, sans-serif;
  font-size: clamp(42px, 7.05vw, 118px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
  transform: scaleX(0.68);
  transform-origin: left center;
  width: calc(100% / 0.68);
  white-space: nowrap;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-kicker {
  position: absolute;
  left: clamp(18px, 2.2vw, 34px);
  bottom: clamp(14px, 2vw, 28px);
  z-index: 12;
  margin: 0;
  padding: 8px 12px 7px;
  border: 2px solid #050505;
  background: #fef019;
  color: #050505;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(8px, 0.9vw, 13px);
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 #050505;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-kicker strong {
  font: inherit;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-collage {
  position: absolute;
  inset: clamp(98px, 9.5vw, 145px) 0 0;
  z-index: 5;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker {
  --drag-x: 0px;
  --drag-y: 0px;
  --spin-rotate: 0deg;
  --reveal-scale: 1;
  position: absolute;
  z-index: var(--md-z, 3);
  box-sizing: border-box;
  margin: 0;
  padding: clamp(16px, 1.55vw, 28px);
  background: #fff;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 0 0 #fff)
    drop-shadow(10px 14px 0 rgba(5, 5, 5, 0.18));
  transform:
    translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0)
    rotate(calc(var(--va-rotate, 0deg) + var(--spin-rotate, 0deg)))
    scale(var(--reveal-scale, 1));
  transition:
    filter 220ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker::before {
  content: "";
  position: absolute;
  inset: clamp(16px, 1.55vw, 28px);
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.76);
  pointer-events: none;
  mix-blend-mode: screen;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: saturate(0.92) contrast(1.08);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker-left {
  --va-rotate: -4deg;
  --md-z: 5;
  left: clamp(18px, 3.8vw, 70px);
  top: clamp(16px, 2.2vw, 34px);
  width: clamp(360px, 33vw, 560px);
  height: clamp(360px, 37vw, 610px);
  clip-path: polygon(5% 8%, 18% 3%, 35% 6%, 47% 2%, 60% 8%, 78% 5%, 96% 15%, 91% 45%, 98% 76%, 89% 96%, 34% 97%, 7% 91%, 1% 68%, 5% 42%);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker-left img {
  object-position: 50% 22%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker-center {
  --va-rotate: -7deg;
  --md-z: 4;
  left: clamp(420px, 34vw, 660px);
  top: clamp(74px, 8vw, 130px);
  width: clamp(380px, 37vw, 650px);
  height: clamp(190px, 20vw, 330px);
  clip-path: polygon(2% 31%, 24% 9%, 61% 1%, 88% 14%, 99% 37%, 94% 92%, 50% 97%, 19% 87%, 0 64%);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker-center img {
  object-position: 47% 48%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker-right {
  --va-rotate: 3deg;
  --md-z: 6;
  right: clamp(14px, 3vw, 58px);
  top: clamp(24px, 2.8vw, 48px);
  width: clamp(360px, 32vw, 560px);
  height: clamp(360px, 36vw, 600px);
  clip-path: polygon(7% 13%, 18% 4%, 39% 7%, 52% 2%, 67% 8%, 83% 5%, 96% 17%, 92% 44%, 99% 75%, 92% 96%, 28% 97%, 4% 92%, 0 68%, 5% 39%);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker-right img {
  object-position: 48% 18%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker.is-hovered {
  filter:
    drop-shadow(0 0 0 #fff)
    drop-shadow(13px 17px 0 rgba(5, 5, 5, 0.24))
    saturate(1.08);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker.is-dragging {
  cursor: grabbing;
  filter:
    drop-shadow(0 0 0 #fff)
    drop-shadow(18px 22px 0 rgba(5, 5, 5, 0.28))
    saturate(1.15);
  transition: none !important;
  z-index: 100 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-md-sticker {
  --reveal-scale: 1;
  opacity: 1;
}

@media (max-width: 980px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-meltdome-hero {
    padding-top: 82px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-titlebar h1 {
    font-size: clamp(32px, 8vw, 76px);
    transform: none;
    width: 100%;
    white-space: normal;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-collage {
    top: clamp(120px, 17vw, 170px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker-left {
    left: 2vw;
    width: min(58vw, 430px);
    height: min(64vw, 520px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker-center {
    left: 34vw;
    top: 28vw;
    width: min(58vw, 520px);
    height: min(30vw, 270px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker-right {
    right: -8vw;
    top: 7vw;
    width: min(55vw, 410px);
    height: min(62vw, 500px);
  }
}

@media (max-width: 820px) {
  body[data-view="vrown"]::before {
    content: none;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-meltdome-hero {
    padding: 44px 16px 30px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-poster {
    min-height: calc(100svh - 74px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-titlebar {
    min-height: 112px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-titlebar h1 {
    font-size: clamp(34px, 13vw, 62px);
    line-height: 0.92;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-kicker {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    font-size: 8px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-collage {
    inset: 122px 0 0;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker-left {
    left: -9vw;
    top: 20px;
    width: 78vw;
    height: 82vw;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker-center {
    left: 15vw;
    top: 62vw;
    width: 78vw;
    height: 42vw;
  }

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-md-sticker-right {
    right: -16vw;
    top: 92vw;
    width: 78vw;
    height: 82vw;
  }
}

/* VROWN opening: restore the madebyanalogue-style logo and manifesto hero. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: auto !important;
  min-height: clamp(650px, 78svh, 820px) !important;
  padding: clamp(92px, 8vw, 122px) clamp(18px, 2vw, 28px) clamp(72px, 7vw, 108px) !important;
  overflow: visible;
  background: #fff !important;
  color: #050505 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-logo {
  width: min(500px, 68vw);
  height: min(500px, 68vw);
  margin: 0 auto clamp(18px, 2.2vw, 28px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-logo-image,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-logo-inflate-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-logo-image {
  filter: drop-shadow(0 8px 0 rgba(5, 5, 5, 0.06));
  transform: scale(1.02);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-logo-inflate,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-logo-inflate-image {
  display: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage.is-logo-inflated .va-analogue-hero .va-logo-image {
  opacity: 1 !important;
  filter: drop-shadow(0 8px 0 rgba(5, 5, 5, 0.06)) !important;
  transform: scale(1.02) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-logo-sticker {
  right: clamp(-48px, -3.2vw, -20px);
  top: clamp(6px, 1.1vw, 18px);
  width: clamp(112px, 11vw, 164px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-logo-sticker-secondary {
  right: clamp(-36px, -2.7vw, -16px);
  top: clamp(78px, 9vw, 118px);
  width: clamp(74px, 7.4vw, 112px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-manifesto {
  width: min(1050px, 86vw);
  margin: 0 auto;
  font-size: clamp(31px, 3.05vw, 46px);
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-happly-copy {
  width: min(1160px, 88vw);
  margin: 0 auto;
  color: #050505;
  font-family: "MetroSans", "Inter", Arial, sans-serif;
  font-size: clamp(42px, 5.9vw, 92px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0;
  text-align: center;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-happly-inline {
  display: inline-block;
  width: clamp(96px, 11.5vw, 178px);
  aspect-ratio: 89 / 46;
  margin: 0 0.08em;
  overflow: hidden;
  border: 1px solid rgba(5, 5, 5, 0.14);
  border-radius: 999px;
  vertical-align: -0.16em;
  background: #f6f1e7;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-happly-inline-water {
  width: clamp(110px, 12.7vw, 196px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-happly-inline img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .vrown-supari,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage {
  overflow: visible !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-about {
  --oddly-first-opacity: 1;
  --oddly-first-y: 0px;
  --oddly-second-opacity: 0;
  --oddly-second-y: 80px;
  --oddly-left-y: 160px;
  --oddly-left-scale: 0.82;
  --oddly-right-y: 240px;
  --oddly-right-scale: 0.9;
  --oddly-bottom-y: 520px;
  --oddly-bottom-scale: 0.86;
  --oddly-far-y: 620px;
  --oddly-far-scale: 0.88;
  position: relative;
  min-height: 255svh;
  overflow: visible;
  background: #fff !important;
  color: #050505;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-sticky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  background: #fff;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-about.is-oddly-fixed .va-oddly-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-about.is-oddly-after .va-oddly-sticky {
  position: absolute;
  top: auto;
  bottom: 0;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-heading {
  position: absolute;
  left: 50%;
  z-index: 5;
  width: min(1060px, 92vw);
  margin: 0;
  color: #050505;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(58px, 8vw, 126px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0;
  text-align: center;
  pointer-events: none;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-heading span {
  display: block;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-heading-one {
  top: 50%;
  opacity: var(--oddly-first-opacity);
  transform: translate(-50%, calc(-50% + var(--oddly-first-y)));
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-heading-one span:first-child::first-letter,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-heading-one span:nth-child(2)::first-letter {
  color: #8ce6de;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-heading-two {
  top: 55%;
  opacity: var(--oddly-second-opacity);
  transform: translate(-50%, calc(-50% + var(--oddly-second-y)));
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-heading-two::after {
  content: "Where Bold Choices Create\A Lasting Impact";
  position: absolute;
  inset: 0;
  z-index: -1;
  white-space: pre;
  color: rgba(5, 5, 5, 0.18);
  transform: translateY(0.34em);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-image {
  position: absolute;
  z-index: 3;
  margin: 0;
  overflow: hidden;
  background: #f2f2f2;
  opacity: var(--oddly-second-opacity);
  will-change: transform, opacity;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-image-left {
  left: max(26px, 14vw);
  top: 53%;
  width: clamp(170px, 20vw, 280px);
  height: clamp(250px, 30vw, 420px);
  transform:
    translate3d(0, var(--oddly-left-y), 0)
    scale(var(--oddly-left-scale));
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-image-left img {
  object-position: 52% 20%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-image-right {
  right: max(28px, 5vw);
  top: 35%;
  z-index: 4;
  width: clamp(310px, 41vw, 520px);
  height: clamp(230px, 31vw, 390px);
  transform:
    translate3d(0, var(--oddly-right-y), 0)
    scale(var(--oddly-right-scale));
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-image-right img {
  object-position: 50% 38%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-image-bottom {
  left: max(24px, 15vw);
  top: 82%;
  width: clamp(280px, 38vw, 520px);
  height: clamp(240px, 36vw, 460px);
  transform:
    translate3d(0, var(--oddly-bottom-y), 0)
    scale(var(--oddly-bottom-scale));
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-image-bottom img {
  object-position: 46% 50%;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-image-far {
  right: max(24px, 8vw);
  top: 96%;
  width: clamp(300px, 40vw, 540px);
  height: clamp(230px, 31vw, 400px);
  transform:
    translate3d(0, var(--oddly-far-y), 0)
    scale(var(--oddly-far-scale));
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-image-far img {
  object-position: 50% 22%;
}

@media (max-width: 760px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero {
    min-height: 640px !important;
    padding-top: 92px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-logo {
    width: min(74vw, 380px);
    height: min(74vw, 380px);
    margin-bottom: 22px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-logo-sticker {
    right: -16px;
    width: 82px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-logo-sticker-secondary {
    right: -10px;
    top: 64px;
    width: 58px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-manifesto {
    width: min(92vw, 560px);
    font-size: clamp(24px, 7vw, 38px);
    line-height: 1.13;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-happly-copy {
    width: min(92vw, 560px);
    font-size: clamp(31px, 10.2vw, 54px);
    line-height: 1.04;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-happly-inline,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero .va-happly-inline-water {
    width: clamp(82px, 28vw, 130px);
    vertical-align: -0.13em;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-about {
    min-height: 245svh;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-sticky {
    min-height: 620px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-heading {
    width: min(92vw, 560px);
    font-size: clamp(43px, 14vw, 72px);
    line-height: 0.92;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-heading-two {
    top: 48%;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-image-left {
    left: 6vw;
    top: 56%;
    width: 34vw;
    height: 45vw;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-image-right {
    right: 5vw;
    top: 64%;
    width: 58vw;
    height: 43vw;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-image-bottom {
    left: 8vw;
    top: 92%;
    width: 66vw;
    height: 56vw;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-image-far {
    right: 8vw;
    top: 111%;
    width: 66vw;
    height: 52vw;
  }
}

/* LETTER photo-note composer and archive. */
body[data-view="letter"] .letter-panel {
  max-width: min(1440px, calc(100vw - 40px));
}

body[data-view="letter"] .letter-section-label {
  max-width: 58ch;
}

body[data-view="letter"] .letter-feed {
  display: block !important;
  columns: 3 280px;
  column-gap: clamp(10px, 1.35vw, 18px);
  width: 100%;
}


body[data-view="letter"] .letter-empty {
  column-span: all;
  margin: 30px 0;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] {
  max-width: min(1240px, calc(100vw - 40px));
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-form.letter-photo-composer {
  --composer-message-bg: #e3f3fb;
  --composer-message-fg: #111114;
  position: relative !important;
  display: block !important;
  width: min(100%, 1180px) !important;
  aspect-ratio: auto !important;
  margin: 0 auto clamp(70px, 8vw, 110px) !important;
  padding: clamp(14px, 2vw, 26px) !important;
  border: 2px solid #111114;
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
    #f6f0e4 !important;
  color: #111114;
  box-shadow: 8px 8px 0 rgba(17, 17, 20, 0.18);
  font-family: "Inter", "Karla", Arial, sans-serif !important;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-submit-head {
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 clamp(14px, 2vw, 24px);
  padding: 0;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-submit-head h2 {
  display: block !important;
  margin: 0;
  color: #111114;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: right;
  text-transform: uppercase;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-back-button,
body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .mini-action {
  min-height: 34px;
  border: 2px solid #777;
  border-top-color: #fff;
  border-left-color: #fff;
  border-radius: 0;
  background: #d9d9d9;
  color: #111114;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 #111114;
}

body[data-view="letter"] .letter-composer-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(16px, 2.3vw, 34px);
  align-items: start;
}

body[data-view="letter"] .letter-note-preview {
  min-width: 0;
}

body[data-view="letter"] .letter-preview-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 2px solid #111114;
  border-radius: 3px;
  background: #e6e0d2;
  box-shadow: 6px 6px 0 rgba(17, 17, 20, 0.22);
  touch-action: none;
}

body[data-view="letter"] .letter-preview-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-view="letter"] .letter-empty-photo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(120deg, rgba(168, 198, 217, 0.7), transparent 58%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.055) 1px, transparent 1px) 0 0 / 24px 24px,
    #ece7da;
  color: rgba(17, 17, 20, 0.48);
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(11px, 1.4vw, 16px);
  letter-spacing: 0;
  text-align: center;
}

body[data-view="letter"] .letter-empty-photo[hidden],
body[data-view="letter"] .letter-preview-image[hidden] {
  display: none;
}

body[data-view="letter"] .letter-preview-note {
  position: absolute;
  left: var(--note-x, 58%);
  top: var(--note-y, 46%);
  z-index: 2;
  width: min(58%, 360px);
  min-height: clamp(112px, 14vw, 170px);
  padding: clamp(15px, 2vw, 24px) clamp(18px, 2.2vw, 28px);
  border: 0;
  border-radius: 1px;
  background: var(--note-bg, var(--composer-message-bg));
  color: var(--note-fg, var(--composer-message-fg));
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.45) inset,
    0 12px 24px rgba(0, 0, 0, 0.22);
  cursor: grab;
  touch-action: none;
  transform: translate(-50%, -50%) rotate(var(--note-rotation, -1.2deg));
  user-select: none;
}

body[data-view="letter"] .letter-preview-note::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: -8px;
  height: 15px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transform: rotate(-1deg);
}

body[data-view="letter"] .letter-preview-note:focus-visible {
  outline: 3px solid #0019d8;
  outline-offset: 4px;
}

body[data-view="letter"] .letter-preview-note.is-dragging {
  cursor: grabbing;
  transition: none;
}

body[data-view="letter"] .letter-preview-note p {
  margin: 0;
  color: currentColor;
  font-family: "Caveat", "Gaegu", "Comic Sans MS", cursive;
  font-size: clamp(31px, 3.4vw, 52px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

body[data-view="letter"] .letter-preview-note.is-empty p {
  opacity: 0.44;
}

body[data-view="letter"] .letter-editor-fields {
  display: grid;
  min-width: 0;
  gap: 9px;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-to-label,
body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-from-label,
body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-photo-label,
body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-message-label {
  position: static !important;
  display: block !important;
  width: auto !important;
  margin: 8px 0 0;
  color: #111114;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 9px !important;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  pointer-events: auto !important;
  text-transform: uppercase;
  transform: none !important;
  white-space: normal !important;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer #letterName,
body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer #letterFrom {
  position: static !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  border: 2px solid #111114 !important;
  border-radius: 0;
  background: #fffdf7 !important;
  color: #111114 !important;
  font-family: "Press Start 2P", "Courier New", monospace !important;
  font-size: 11px !important;
  font-weight: 400;
  line-height: 1.2;
  outline: none;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer #letterName[readonly] {
  background: #e8e2d3 !important;
}

body[data-view="letter"] .letter-photo-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

body[data-view="letter"] .letter-photo-actions input[type="file"] {
  min-width: 0;
  width: 100%;
  padding: 9px;
  border: 2px solid #111114;
  background: #fffdf7;
  color: #111114;
  font-family: "Karla", Arial, sans-serif;
  font-size: 14px;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer label[for="letterText"] {
  display: block !important;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer #letterText {
  position: static !important;
  width: 100% !important;
  min-height: 168px !important;
  height: auto !important;
  padding: 15px 16px !important;
  border: 2px solid #111114 !important;
  border-radius: 0;
  background: #fffdf7 !important;
  color: #111114 !important;
  font-family: "Caveat", "Gaegu", "Comic Sans MS", cursive !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  outline: none;
  resize: vertical;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer #letterText::placeholder {
  color: rgba(17, 17, 20, 0.38);
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-color-grid {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(24px, 1fr)) !important;
  gap: 6px !important;
  padding: 4px 0 0 !important;
  border: 0 !important;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-color-swatch {
  width: 100%;
  min-height: 28px;
  aspect-ratio: 1;
}

body[data-view="letter"] .letter-note-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 2px;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-submit-message {
  position: static !important;
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  padding: 0 18px;
  border: 2px solid #777;
  border-top-color: #fff;
  border-left-color: #fff;
  border-radius: 0;
  background: #d9d9d9;
  color: #777;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(10px, 1vw, 13px);
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 #111114;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-submit-message:not(:disabled) {
  background: #fef019;
  color: #111114;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-terms {
  position: static !important;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  color: #111114;
  font-family: "Karla", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-terms input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-terms a {
  color: #0019d8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 980px) {
  body[data-view="letter"] .letter-panel {
    max-width: min(760px, calc(100vw - 28px));
  }

  body[data-view="letter"] .letter-feed {
    columns: 2 260px;
  }

  body[data-view="letter"] .letter-composer-grid {
    grid-template-columns: 1fr;
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-form.letter-photo-composer {
    margin-bottom: 70px !important;
  }
}

@media (max-width: 620px) {
  body[data-view="letter"] .letter-panel {
    max-width: calc(100vw - 20px);
  }

  body[data-view="letter"] .letter-feed {
    columns: 1;
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-submit-head {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-submit-head h2 {
    text-align: left;
  }

  body[data-view="letter"] .letter-preview-note {
    width: min(70%, 290px);
    min-height: 104px;
  }

  body[data-view="letter"] .letter-preview-note p {
    font-size: clamp(30px, 9vw, 43px);
  }

  body[data-view="letter"] .letter-photo-actions {
    grid-template-columns: 1fr;
  }

  body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-photo-composer .letter-color-grid {
    grid-template-columns: repeat(6, minmax(24px, 1fr)) !important;
  }
}

body[data-view="letter"] .letter-panel[data-mode="archive"] .letter-submit-form {
  display: none !important;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-archive-head,
body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-artist-prompt,
body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-search-bar,
body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-color-filters,
body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-feed {
  display: none !important;
}

/* VROWN: Happly bottom CTA clone inserted below the signal statement. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof {
  position: relative;
  min-height: clamp(1840px, 154vw, 2310px);
  padding-top: clamp(92px, 8vw, 124px);
  padding-bottom: clamp(96px, 8vw, 140px);
  overflow: hidden;
  background: #fff !important;
  color: #050505 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof > p {
  position: relative;
  z-index: 8;
  max-width: 910px;
  margin-bottom: clamp(42px, 6vw, 86px);
  color: #050505;
  font-size: clamp(42px, 4vw, 60px);
  line-height: 0.96;
  letter-spacing: 0;
  text-align: center;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta {
  --hcta-progress: 0;
  position: relative;
  z-index: 6;
  display: grid;
  place-items: center;
  width: min(1280px, calc(100vw - clamp(26px, 5vw, 82px)));
  min-height: clamp(720px, 64vw, 940px);
  margin: 0 auto clamp(92px, 9vw, 136px);
  overflow: hidden;
  border-radius: clamp(28px, 4vw, 58px);
  background:
    radial-gradient(circle at 22% 14%, rgba(255, 146, 65, 0.34), transparent 24%),
    radial-gradient(circle at 80% 22%, rgba(113, 205, 249, 0.33), transparent 25%),
    radial-gradient(circle at 50% 86%, rgba(255, 224, 80, 0.42), transparent 26%),
    #f8f1df;
  isolation: isolate;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(5, 5, 5, 0.028) 1px, transparent 1px);
  background-size: 52px 52px;
  mix-blend-mode: multiply;
  opacity: 0.42;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-copy {
  position: relative;
  z-index: 8;
  width: min(630px, 76vw);
  margin: 0 auto;
  color: #121212;
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 76px, 0) scale(0.92);
  transition:
    opacity 640ms ease,
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 100ms;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta.is-happly-live .va-happly-cta-copy {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-copy h2 {
  margin: 0 0 clamp(18px, 2vw, 26px);
  color: #101010;
  font-family: "Arial Black", "Archivo Black", Arial, sans-serif;
  font-size: clamp(64px, 8.5vw, 136px);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: 0;
  text-transform: lowercase;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-copy > p:last-of-type {
  width: min(575px, 100%);
  margin: 0 auto clamp(24px, 2.4vw, 34px);
  color: rgba(18, 18, 18, 0.78);
  font-family: "Karla", Arial, sans-serif;
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(144px, 15vw, 194px);
  height: clamp(48px, 4.7vw, 62px);
  overflow: hidden;
  border: 2px solid #101010;
  border-radius: 999px;
  background: #101010;
  color: #fff;
  font-family: "Karla", Arial, sans-serif;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(5, 5, 5, 0.16);
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-button::after,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-button span {
  display: block;
  transform: translateY(0);
  transition: transform 230ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-button::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 145%);
  white-space: nowrap;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-button:hover,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-button:focus-visible {
  background: #fff;
  color: #101010;
  transform: translateY(-3px);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-button:hover span:first-child,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-button:focus-visible span:first-child {
  transform: translateY(-115%);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-button:hover::after,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-button:focus-visible::after {
  transform: translate(-50%, -50%);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-photo {
  position: absolute;
  z-index: 3;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(5, 5, 5, 0.1);
  border-radius: clamp(18px, 2.8vw, 34px);
  background: #ece7da;
  box-shadow: 0 22px 46px rgba(5, 5, 5, 0.16);
  opacity: 0;
  transform:
    translate3d(
      var(--hcta-x),
      calc(var(--hcta-y) + 92px),
      0
    )
    rotate(var(--hcta-rotate))
    scale(0.82);
  transition:
    opacity 600ms ease,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta.is-happly-live .va-happly-cta-photo {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-photo:hover img {
  transform: scale(1.055);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-photo-bed {
  left: clamp(26px, 5vw, 72px);
  top: clamp(50px, 7vw, 94px);
  width: clamp(150px, 16vw, 230px);
  height: clamp(230px, 24vw, 350px);
  transition-delay: 80ms;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-photo-sky {
  right: clamp(22px, 5vw, 78px);
  top: clamp(54px, 6vw, 86px);
  width: clamp(230px, 30vw, 420px);
  height: clamp(190px, 24vw, 330px);
  transition-delay: 160ms;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-photo-gummies {
  left: clamp(70px, 10vw, 148px);
  bottom: clamp(50px, 7vw, 100px);
  width: clamp(190px, 22vw, 310px);
  height: clamp(175px, 20vw, 276px);
  transition-delay: 230ms;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-photo-heels {
  right: clamp(80px, 11vw, 164px);
  bottom: clamp(58px, 8vw, 112px);
  width: clamp(210px, 25vw, 360px);
  height: clamp(180px, 21vw, 304px);
  transition-delay: 300ms;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-photo-cubes {
  left: 50%;
  bottom: clamp(20px, 4vw, 56px);
  z-index: 2;
  width: clamp(130px, 16vw, 218px);
  height: clamp(178px, 22vw, 300px);
  transform:
    translate3d(
      calc(-50% + var(--hcta-x)),
      calc(var(--hcta-y) + 92px),
      0
    )
    rotate(var(--hcta-rotate))
    scale(0.82);
  transition-delay: 360ms;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta.is-happly-live .va-happly-cta-photo-cubes {
  transform: translate3d(-50%, 0, 0) rotate(0deg) scale(1);
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media {
  top: auto;
  bottom: clamp(92px, 8vw, 138px);
  height: clamp(640px, 57vw, 766px);
}

@media (max-width: 900px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof {
    min-height: 2200px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta {
    min-height: 850px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-copy {
    width: min(520px, 82vw);
  }
}

@media (max-width: 620px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof {
    min-height: 2130px;
    padding-top: 74px;
    padding-bottom: 86px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof > p {
    width: min(90vw, 520px);
    font-size: clamp(33px, 10vw, 46px);
    line-height: 1;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta {
    width: calc(100vw - 24px);
    min-height: 780px;
    border-radius: 28px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-copy {
    width: min(78vw, 380px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-copy h2 {
    font-size: clamp(54px, 16vw, 88px);
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-copy > p:last-of-type {
    font-size: 16px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-photo-bed {
    left: -8px;
    top: 34px;
    width: 132px;
    height: 198px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-photo-sky {
    right: -36px;
    top: 42px;
    width: 230px;
    height: 178px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-photo-gummies {
    left: -18px;
    bottom: 62px;
    width: 170px;
    height: 154px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-photo-heels {
    right: -28px;
    bottom: 72px;
    width: 208px;
    height: 176px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-photo-cubes {
    width: 110px;
    height: 150px;
    bottom: 24px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof-media {
    bottom: 72px;
    height: 650px;
  }
}

/* VROWN Happly CTA cleanup: statement and CTA are separate, clean sections. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof {
  position: relative !important;
  min-height: 0 !important;
  padding: clamp(88px, 9vw, 132px) clamp(20px, 8vw, 120px) clamp(74px, 7vw, 112px) !important;
  overflow: visible !important;
  background: #fff !important;
  color: #050505 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof > p {
  width: min(980px, 86vw) !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  color: #050505 !important;
  font-family: "Karla", Arial, sans-serif !important;
  font-size: clamp(42px, 4.35vw, 70px) !important;
  font-weight: 400 !important;
  line-height: 0.96 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof .va-proof-media {
  display: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta {
  position: relative !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: clamp(690px, 72vw, 920px) !important;
  margin: 0 !important;
  padding: clamp(70px, 7vw, 112px) clamp(22px, 5.4vw, 78px) !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 146, 65, 0.28), transparent 24%),
    radial-gradient(circle at 83% 25%, rgba(117, 203, 244, 0.36), transparent 26%),
    radial-gradient(circle at 50% 92%, rgba(255, 232, 100, 0.44), transparent 28%),
    #f8f1df !important;
  color: #101010 !important;
  isolation: isolate !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.026) 1px, transparent 1px),
    linear-gradient(0deg, rgba(5, 5, 5, 0.02) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  opacity: 0.58 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-copy {
  position: relative !important;
  z-index: 8 !important;
  width: min(650px, 82vw) !important;
  margin: 0 auto !important;
  color: #111 !important;
  text-align: center !important;
  opacity: 0 !important;
  transform: translate3d(0, 48px, 0) scale(0.96) !important;
  transition:
    opacity 650ms ease,
    transform 840ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta.is-happly-live .va-happly-cta-copy {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-copy h2 {
  margin: 0 0 clamp(18px, 2vw, 28px) !important;
  color: #101010 !important;
  font-family: "Arial Black", "Archivo Black", Arial, sans-serif !important;
  font-size: clamp(68px, 9.25vw, 142px) !important;
  font-weight: 900 !important;
  line-height: 0.78 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-copy > p {
  width: min(560px, 100%) !important;
  margin: 0 auto clamp(24px, 2.5vw, 36px) !important;
  color: rgba(16, 16, 16, 0.78) !important;
  font-family: "Karla", Arial, sans-serif !important;
  font-size: clamp(18px, 1.7vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: clamp(156px, 15vw, 206px) !important;
  height: clamp(50px, 4.6vw, 64px) !important;
  overflow: hidden !important;
  border: 2px solid #101010 !important;
  border-radius: 999px !important;
  background: #101010 !important;
  color: #fff !important;
  font-family: "Karla", Arial, sans-serif !important;
  font-size: clamp(15px, 1.35vw, 18px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 14px 30px rgba(5, 5, 5, 0.16) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-button span,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-button::after {
  display: block !important;
  transition: transform 230ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-button::after {
  content: attr(data-label) !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  white-space: nowrap !important;
  transform: translate(-50%, 145%) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-button:hover,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-button:focus-visible {
  background: #fff !important;
  color: #101010 !important;
  transform: translateY(-3px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-button:hover span,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-button:focus-visible span {
  transform: translateY(-120%) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-button:hover::after,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-button:focus-visible::after {
  transform: translate(-50%, -50%) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo {
  position: absolute !important;
  z-index: 3 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(5, 5, 5, 0.1) !important;
  border-radius: clamp(20px, 2.5vw, 36px) !important;
  background: #ece7da !important;
  box-shadow: 0 22px 44px rgba(5, 5, 5, 0.14) !important;
  opacity: 0 !important;
  transform: translate3d(var(--hcta-start-x), var(--hcta-start-y), 0) rotate(var(--hcta-start-rotate)) scale(0.88) !important;
  transition:
    opacity 620ms ease,
    transform 920ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, opacity !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta.is-happly-live .va-happly-cta-photo {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-bed {
  --hcta-start-x: -12vw;
  --hcta-start-y: 8vh;
  --hcta-start-rotate: -6deg;
  left: clamp(28px, 6vw, 92px) !important;
  top: clamp(42px, 6vw, 86px) !important;
  width: clamp(150px, 16vw, 230px) !important;
  height: clamp(226px, 24vw, 350px) !important;
  transition-delay: 60ms !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-sky {
  --hcta-start-x: 12vw;
  --hcta-start-y: 7vh;
  --hcta-start-rotate: 5deg;
  right: clamp(-86px, -4vw, -26px) !important;
  top: clamp(46px, 5.6vw, 84px) !important;
  width: clamp(220px, 27vw, 370px) !important;
  height: clamp(182px, 21vw, 292px) !important;
  transition-delay: 130ms !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-gummies {
  --hcta-start-x: -11vw;
  --hcta-start-y: -7vh;
  --hcta-start-rotate: 7deg;
  left: clamp(72px, 12vw, 170px) !important;
  bottom: clamp(-18px, 3.8vw, 58px) !important;
  width: clamp(188px, 23vw, 320px) !important;
  height: clamp(172px, 20vw, 282px) !important;
  transition-delay: 220ms !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-heels {
  --hcta-start-x: 12vw;
  --hcta-start-y: -7vh;
  --hcta-start-rotate: -5deg;
  right: clamp(78px, 11vw, 162px) !important;
  bottom: clamp(-20px, 4.2vw, 62px) !important;
  width: clamp(210px, 25vw, 360px) !important;
  height: clamp(180px, 21vw, 304px) !important;
  transition-delay: 290ms !important;
}

@media (max-width: 760px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof {
    padding: 72px 18px 58px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof > p {
    width: min(91vw, 520px) !important;
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1 !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta {
    min-height: 780px !important;
    padding: 76px 18px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-copy {
    width: min(78vw, 380px) !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-copy h2 {
    font-size: clamp(58px, 18vw, 92px) !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-copy > p {
    font-size: 16px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-bed {
    left: -14px !important;
    top: 32px !important;
    width: 132px !important;
    height: 198px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-sky {
    right: -42px !important;
    top: 44px !important;
    width: 230px !important;
    height: 178px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-gummies {
    left: -22px !important;
    bottom: 58px !important;
    width: 170px !important;
    height: 154px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-heels {
    right: -32px !important;
    bottom: 70px !important;
    width: 208px !important;
    height: 176px !important;
  }
}

/* Global Happly-style top ticker alignment pass. */
body .gate-menu.app-menu,
body[data-view="home"] .gate-menu.app-menu,
body[data-view="vrown"] .gate-menu.app-menu,
body[data-view="game"] .gate-menu.app-menu,
body:has(.site-shell[data-view="zungk"]) .gate-menu.app-menu,
body:has(.site-shell[data-view="letter"]) .gate-menu.app-menu,
body[data-view="zungk"] .gate-menu.app-menu,
body[data-view="letter"] .gate-menu.app-menu,
.site-shell .topbar,
.site-shell[data-view="vrown"] .topbar,
.site-shell[data-view="zungk"] .topbar,
.site-shell[data-view="letter"] .topbar,
.site-shell[data-view="game"] .topbar {
  top: calc(var(--happly-banner-height) + 12px) !important;
  z-index: 13010 !important;
}

body .gate-menu.app-menu .app-menu-items,
body[data-view="home"] .gate-menu.app-menu .app-menu-items,
body[data-view="vrown"] .gate-menu.app-menu .app-menu-items,
body[data-view="zungk"] .gate-menu.app-menu .app-menu-items,
body[data-view="letter"] .gate-menu.app-menu .app-menu-items,
body[data-view="game"] .gate-menu.app-menu .app-menu-items {
  top: calc(var(--happly-banner-height) + 12px) !important;
  z-index: 13009 !important;
}

@media (max-width: 920px) {
  body .gate-menu.app-menu,
  body[data-view="home"] .gate-menu.app-menu,
  body[data-view="vrown"] .gate-menu.app-menu,
  body[data-view="game"] .gate-menu.app-menu,
  body:has(.site-shell[data-view="zungk"]) .gate-menu.app-menu,
  body:has(.site-shell[data-view="letter"]) .gate-menu.app-menu,
  body[data-view="zungk"] .gate-menu.app-menu,
  body[data-view="letter"] .gate-menu.app-menu,
  .site-shell .topbar,
  .site-shell[data-view="vrown"] .topbar,
  .site-shell[data-view="zungk"] .topbar,
  .site-shell[data-view="letter"] .topbar,
  .site-shell[data-view="game"] .topbar {
    top: calc(var(--happly-banner-height) + 10px) !important;
  }

  body .gate-menu.app-menu .app-menu-items,
  body[data-view="home"] .gate-menu.app-menu .app-menu-items,
  body[data-view="vrown"] .gate-menu.app-menu .app-menu-items,
  body[data-view="zungk"] .gate-menu.app-menu .app-menu-items,
  body[data-view="letter"] .gate-menu.app-menu .app-menu-items,
  body[data-view="game"] .gate-menu.app-menu .app-menu-items {
    top: calc(var(--happly-banner-height) + 10px) !important;
  }
}

/* VROWN page background aligned with HOME yellow. */
body[data-view="vrown"] {
  --vrown-page-yellow: #fef019;
  background: var(--vrown-page-yellow) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"],
body[data-view="vrown"] .site-shell[data-view="vrown"] .vrown-supari,
body[data-view="vrown"] .site-shell[data-view="vrown"] .vrown-analogue-stage,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-hero,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-banner,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-about,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-sticky,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-reviews,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-membership,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-community,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-footer {
  background: var(--vrown-page-yellow) !important;
}

/* VROWN top video hero: Happly-style full first-screen media. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-top-video-hero {
  position: relative !important;
  width: 100% !important;
  height: calc(100svh - var(--happly-banner-height)) !important;
  min-height: 560px !important;
  margin: var(--happly-banner-height) 0 0 !important;
  overflow: hidden !important;
  background: #050505 !important;
  opacity: 1 !important;
  transform: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage.is-interaction-ready .va-main > .va-top-video-hero {
  opacity: 1 !important;
  transform: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-top-video-hero video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-top-video-hero .va-top-video-logo {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 4 !important;
  width: min(100vw, 1600px) !important;
  max-width: none !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-top-video-hero .va-top-video-logo img {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-top-video-hero .va-top-video-logo::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  background: #fef019 !important;
  -webkit-mask: url("assets/analogue-clone/vrown-hero-logo.png") center / contain no-repeat !important;
  mask: url("assets/analogue-clone/vrown-hero-logo.png") center / contain no-repeat !important;
  pointer-events: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-analogue-hero > .va-logo {
  display: none !important;
}

@media (max-width: 760px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-top-video-hero {
    min-height: 520px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-top-video-hero .va-top-video-logo {
    width: 104vw !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* VROWN Oddlymade clone pass: long sticky copy with images scrolling behind it. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about {
  --oddly-first-opacity: 1;
  --oddly-first-y: 0px;
  --oddly-second-opacity: 0;
  --oddly-second-y: 0px;
  position: relative !important;
  min-height: 300svh !important;
  overflow: hidden !important;
  background: #fff !important;
  color: #050505 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-sticky,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about.is-oddly-fixed .va-oddly-sticky,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about.is-oddly-after .va-oddly-sticky {
  left: 0 !important;
  right: auto !important;
  z-index: 5 !important;
  width: 100% !important;
  height: 100svh !important;
  min-height: 680px !important;
  overflow: visible !important;
  background: transparent !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-sticky {
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about.is-oddly-fixed .va-oddly-sticky {
  position: fixed !important;
  top: 0 !important;
  bottom: auto !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about.is-oddly-after .va-oddly-sticky {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-heading {
  left: 50% !important;
  top: 50% !important;
  z-index: 7 !important;
  width: min(1200px, calc(100vw - 64px)) !important;
  color: #050505 !important;
  font-family: "Times New Roman", Georgia, serif !important;
  font-size: clamp(56px, 7.5vw, 96px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  transform: translate(-50%, calc(-50% + var(--oddly-first-y))) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-heading-one {
  opacity: var(--oddly-first-opacity) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-heading-two {
  opacity: var(--oddly-second-opacity) !important;
  transform: translate(-50%, calc(-50% + var(--oddly-second-y))) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-heading-two::after {
  display: none !important;
  content: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-heading-one span:first-child::first-letter,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-heading-one span:nth-child(2)::first-letter {
  color: inherit !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-image {
  position: absolute !important;
  z-index: 3 !important;
  display: block !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #f2f2f2 !important;
  opacity: 1 !important;
  transform: none !important;
  will-change: transform !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-image-left {
  left: 10vw !important;
  top: 85svh !important;
  width: clamp(260px, 25vw, 320px) !important;
  height: clamp(300px, 28.75vw, 368px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-image-right {
  left: 53.85vw !important;
  right: auto !important;
  top: 85svh !important;
  width: clamp(410px, 40vw, 512px) !important;
  height: clamp(470px, 46vw, 589px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-image-bottom {
  left: 15vw !important;
  top: 180svh !important;
  width: clamp(260px, 25vw, 320px) !important;
  height: clamp(300px, 28.75vw, 368px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-image-far {
  left: 48.85vw !important;
  right: auto !important;
  top: 220svh !important;
  width: clamp(410px, 40vw, 512px) !important;
  height: clamp(470px, 46vw, 589px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-image-left img,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-image-right img,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-image-bottom img,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-image-far img {
  object-position: 50% 50% !important;
}

@media (max-width: 760px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about {
    min-height: 315svh !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-sticky,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about.is-oddly-fixed .va-oddly-sticky,
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about.is-oddly-after .va-oddly-sticky {
    min-height: 620px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-heading {
    width: min(92vw, 560px) !important;
    font-size: clamp(42px, 13.5vw, 72px) !important;
    line-height: 0.96 !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-image-left {
    left: 6vw !important;
    top: 80svh !important;
    width: 42vw !important;
    height: 52vw !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-image-right {
    left: 37vw !important;
    top: 102svh !important;
    width: 58vw !important;
    height: 70vw !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-image-bottom {
    left: 8vw !important;
    top: 188svh !important;
    width: 54vw !important;
    height: 66vw !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-image-far {
    left: 34vw !important;
    top: 230svh !important;
    width: 62vw !important;
    height: 76vw !important;
  }
}

/* ZUNGK object board */
body[data-view="zungk"] {
  background: #131211;
}

body[data-view="zungk"] .happly-top-banner {
  display: none !important;
}

body[data-view="zungk"] .zungk-view {
  min-height: 100svh;
  overflow: hidden;
  background: #131211;
}

body[data-view="zungk"] .zungk-impact[hidden] {
  display: none !important;
}

.wf-clone {
  --wf-bg: #131211;
  --wf-panel: #191817;
  --wf-card: rgba(28, 27, 25, 0.92);
  --wf-card-strong: #f4f2ee;
  --wf-muted: rgba(244, 242, 238, 0.55);
  --wf-border: rgba(244, 242, 238, 0.12);
  --wf-gold: #d9b15f;
  --wf-tile: 180px;
  --wf-icon: 138px;
  --wf-gap: 34px;
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.035), transparent 34%), #131211;
  color: #f4f2ee;
  font-family: "Inter", Arial, sans-serif;
  isolation: isolate;
}

.wf-clone.is-light {
  --wf-bg: #f2eee7;
  --wf-panel: #f7f3eb;
  --wf-card: rgba(248, 244, 237, 0.94);
  --wf-card-strong: #181716;
  --wf-muted: rgba(24, 23, 22, 0.58);
  --wf-border: rgba(24, 23, 22, 0.14);
  background: radial-gradient(circle at 50% 52%, rgba(0, 0, 0, 0.035), transparent 34%), #f2eee7;
  color: #181716;
}

.wf-clone[data-wf-size="s"] {
  --wf-tile: 140px;
  --wf-icon: 108px;
  --wf-gap: 30px;
}

.wf-clone[data-wf-size="l"] {
  --wf-tile: 220px;
  --wf-icon: 162px;
  --wf-gap: 44px;
}

.wf-board-shell {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.wf-board-shell:active {
  cursor: grabbing;
}

.wf-board-shell::before,
.wf-board-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.wf-board-shell::before {
  background:
    linear-gradient(90deg, var(--wf-bg) 0, transparent 13%, transparent 87%, var(--wf-bg) 100%),
    linear-gradient(180deg, var(--wf-bg) 0, transparent 18%, transparent 78%, var(--wf-bg) 100%);
}

.wf-board-shell::after {
  background:
    linear-gradient(180deg, transparent 0 78%, rgba(0, 0, 0, 0.36) 100%),
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.18) 100%);
  mix-blend-mode: multiply;
}

.wf-board {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.wf-tile {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--wf-tile);
  height: var(--wf-tile);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: inherit;
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  animation: wfTileIn 540ms cubic-bezier(0.2, 0.72, 0.12, 1) forwards;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.wf-clone.is-infinite-ready .wf-tile {
  opacity: 1;
  animation: none;
  transform: translateY(0) scale(1);
}

.wf-tile:hover,
.wf-tile.is-selected {
  border-color: rgba(217, 177, 95, 0.84);
  background: rgba(217, 177, 95, 0.045);
  transform: translateY(0) scale(1);
}

.wf-object {
  --object-rotate: 0deg;
  --object-scale: 1;
  --object-glow: rgba(217, 177, 95, 0.32);
  position: relative;
  display: grid;
  width: var(--wf-icon);
  height: var(--wf-icon);
  margin-top: calc(var(--wf-tile) * -0.05);
  place-items: center;
  filter:
    drop-shadow(0 19px 16px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px color-mix(in srgb, var(--object-glow) 34%, transparent));
  transform: rotate(var(--object-rotate)) scale(var(--object-scale));
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.wf-object::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 4%;
  height: 28%;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.42), transparent 72%);
  filter: blur(8px);
  opacity: 0.72;
  transform: rotate(calc(var(--object-rotate) * -1));
}

.wf-object-fit {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wf-object-fit img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  user-select: none;
  -webkit-user-drag: none;
}

.wf-tile:hover .wf-object,
.wf-tile.is-selected .wf-object {
  filter:
    drop-shadow(0 22px 18px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 20px color-mix(in srgb, var(--object-glow) 58%, transparent));
  transform: rotate(var(--object-rotate)) scale(calc(var(--object-scale) * 1.04));
}

.wf-tile.is-picked .wf-object {
  filter:
    drop-shadow(0 20px 17px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 22px rgba(217, 177, 95, 0.56));
}

.wf-tile-label {
  position: absolute;
  left: 50%;
  top: calc(50% + calc(var(--wf-tile) * 0.34));
  width: calc(var(--wf-tile) - 16px);
  color: var(--wf-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.wf-tile:hover .wf-tile-label,
.wf-tile.is-selected .wf-tile-label {
  color: var(--wf-card-strong);
}

.wf-topbar,
.wf-top-actions {
  position: fixed;
  z-index: 55;
}

.wf-topbar {
  left: 20px;
  right: 20px;
  top: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.wf-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.wf-brand h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.wf-brand span {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border: 1px solid var(--wf-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--wf-muted);
  font-size: 12px;
  backdrop-filter: blur(12px);
}

.wf-top-actions {
  right: 20px;
  top: 20px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.wf-icon-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--wf-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--wf-card-strong);
  font-size: 18px;
  backdrop-filter: blur(12px);
}

.wf-download-button,
.wf-pack-button,
.wf-menu-cta button,
.wf-award-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.wf-detail,
.wf-award {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(1px);
}

.wf-detail[hidden],
.wf-award[aria-hidden="true"] {
  display: none;
}

.wf-detail-card {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: min(420px, calc(100vw - 42px));
  min-height: 636px;
  padding: 44px 34px 32px;
  border: 1px solid var(--wf-border);
  border-radius: 22px;
  background: var(--wf-card);
  color: var(--wf-card-strong);
  box-shadow: 0 36px 80px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%);
}

.wf-close,
.wf-award-close,
.wf-menu-close {
  position: absolute;
  right: 22px;
  top: 22px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: var(--wf-muted);
  font-size: 22px;
}

.wf-detail-visual {
  display: grid;
  height: 315px;
  place-items: center;
}

.wf-detail-visual .wf-object {
  --wf-icon: 310px;
  margin-top: 0;
  transform: translateY(6px) rotate(var(--object-rotate)) scale(var(--object-scale));
}

.wf-detail-kicker {
  margin: 8px 0 4px;
  color: var(--wf-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.wf-detail-card h2 {
  margin: 0 0 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.05;
}

.wf-detail-note {
  min-height: 44px;
  margin: -8px 0 14px;
  color: color-mix(in srgb, var(--wf-card-strong) 76%, transparent);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
}

.wf-download-button,
.wf-pack-button {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
}

.wf-download-button {
  background: #f4f2ee;
  color: #111;
}

.wf-download-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.wf-pack-button {
  border: 1px solid var(--wf-border);
  background: transparent;
  color: var(--wf-card-strong);
}

.wf-detail-count {
  margin-top: 16px;
  color: var(--wf-muted);
  font-size: 12px;
  text-align: center;
}

.wf-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--wf-border);
  border-radius: 999px;
  background: rgba(28, 27, 25, 0.86);
  color: #f4f2ee;
  font-size: 30px;
  transform: translateY(-50%);
}

.wf-arrow-left {
  left: 32px;
}

.wf-arrow-right {
  right: 32px;
}

.wf-award {
  z-index: 88;
  display: grid;
  place-items: center;
  background: transparent;
  pointer-events: none;
  backdrop-filter: none;
}

.wf-award-card {
  position: relative;
  width: min(448px, calc(100vw - 42px));
  padding: 28px 24px 26px;
  border: 1px solid var(--wf-border);
  border-radius: 10px;
  background: var(--wf-card);
  color: var(--wf-card-strong);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
  pointer-events: auto;
}

.wf-award-card h2 {
  margin: 0 38px 14px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.05;
}

.wf-award-card p {
  width: 330px;
  max-width: 100%;
  margin: 0 0 24px;
  color: var(--wf-card-strong);
  font-size: 16px;
  line-height: 1.45;
}

.wf-award-card button:not(.wf-award-close) {
  min-width: 116px;
  padding: 0 18px;
  background: #f4f2ee;
  color: #111;
}

.wf-menu-panel {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 95;
  display: flex;
  width: min(448px, 100vw);
  height: 100svh;
  flex-direction: column;
  gap: 24px;
  padding: 30px 31px;
  border-left: 1px solid var(--wf-border);
  background: #1a1917;
  color: #f4f2ee;
  box-shadow: -28px 0 80px rgba(0, 0, 0, 0.52);
  transform: translateX(100%);
  transition: transform 420ms cubic-bezier(0.2, 0.72, 0.12, 1);
}

.wf-clone.is-menu-open .wf-menu-panel {
  transform: translateX(0);
}

.wf-clone.is-menu-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 94;
  background: rgba(0, 0, 0, 0.72);
}

.wf-menu-panel h2 {
  margin: 0 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 900;
}

.wf-menu-panel nav {
  display: grid;
  gap: 8px;
}

.wf-menu-panel nav button,
.wf-menu-panel section button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  padding: 0 12px;
  border-radius: 11px;
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 900;
  text-align: left;
}

.wf-menu-panel nav button.is-focused {
  outline: 2px solid var(--wf-gold);
  box-shadow: 0 0 0 1px rgba(217, 177, 95, 0.52) inset;
}

.wf-menu-cta {
  display: grid;
  gap: 8px;
}

.wf-menu-cta button:first-child {
  background: rgba(255, 255, 255, 0.08);
  color: #f4f2ee;
}

.wf-menu-cta button:last-child {
  background: #f4f2ee;
  color: #111;
}

.wf-menu-panel section {
  display: grid;
  gap: 8px;
}

.wf-menu-panel section p {
  margin: 8px 0 2px;
  color: rgba(244, 242, 238, 0.48);
  font-size: 10px;
  letter-spacing: 0.22em;
}

.wf-menu-panel section button {
  min-height: 32px;
  padding: 0;
  border-radius: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgba(244, 242, 238, 0.7);
}

.wf-menu-panel small {
  margin-top: auto;
  color: rgba(244, 242, 238, 0.44);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.5;
}

@keyframes wfTileIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 820px) {
  .wf-clone {
    --wf-tile: 148px;
    --wf-icon: 106px;
    --wf-gap: 28px;
  }

  .wf-brand {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .wf-brand h1 {
    font-size: 19px;
  }

  .wf-top-actions {
    right: 14px;
    top: 14px;
  }

  .wf-detail-card {
    min-height: 600px;
    padding-right: 22px;
    padding-left: 22px;
  }

  .wf-detail-visual .wf-object {
    --wf-icon: 245px;
  }

  .wf-arrow {
    display: none;
  }
}

/* LETTER final rebuild: me2DAY-inspired fan feed. */
body[data-view="letter"] {
  background: #f8fafb;
  color: #28323c;
}

body[data-view="letter"] .letter-me2day-shell {
  display: grid;
  grid-template-columns: 156px minmax(0, 720px);
  gap: 24px;
  width: min(940px, calc(100vw - 32px));
  margin: 34px auto 80px;
  padding: 0;
  background: transparent;
  color: #2f3a44;
  font-family: "Inter", "Malgun Gothic", "Apple SD Gothic Neo", Arial, sans-serif;
}

body[data-view="letter"] .letter-me2day-sidebar {
  min-width: 0;
  padding-top: 6px;
}

body[data-view="letter"] .letter-me2day-logo {
  display: inline-block;
  margin: 0 0 16px 2px;
  color: #35a7df;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
}

body[data-view="letter"] .letter-profile-card {
  width: 128px;
  height: 128px;
  margin: 0 0 10px;
  overflow: hidden;
  border: 1px solid #d5dfe6;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

body[data-view="letter"] .letter-profile-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: saturate(1.02) contrast(1.02);
}

body[data-view="letter"] .letter-profile-copy {
  margin-bottom: 22px;
  color: #7a8792;
  font-size: 11px;
  line-height: 1.45;
}

body[data-view="letter"] .letter-profile-copy strong {
  display: block;
  margin-bottom: 3px;
  color: #37a6d9;
  font-size: 14px;
  font-weight: 800;
}

body[data-view="letter"] .letter-profile-copy p {
  max-width: 118px;
  margin: 0;
}

body[data-view="letter"] .letter-board-menu {
  display: grid;
  width: 128px;
  border-top: 1px solid #e3e8ec;
  background: #fff;
}

body[data-view="letter"] .letter-board-menu button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 9px;
  border: 0;
  border-bottom: 1px solid #e3e8ec;
  background: #fff;
  color: #7a8792;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}

body[data-view="letter"] .letter-board-menu button.is-active {
  background: #f4f7f9;
  color: #2d3944;
}

body[data-view="letter"] .letter-board-menu span {
  color: #9daab4;
  font-size: 14px;
  text-align: center;
}

body[data-view="letter"] .letter-board-menu b {
  font-weight: 800;
}

body[data-view="letter"] .letter-me2day-panel {
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2f3a44;
}

body[data-view="letter"] .letter-me2day-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

body[data-view="letter"] .letter-me2day-topbar h1 {
  margin: 0;
  color: #35a7df;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

body[data-view="letter"] .letter-me2day-topbar p {
  margin: 5px 0 0;
  color: #90a0aa;
  font-size: 12px;
}

body[data-view="letter"] .letter-panel[data-mode="archive"] .letter-submit-form,
body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-form,
body[data-view="letter"] .letter-me2day-composer {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: 1px solid #dce5eb !important;
  border-radius: 5px !important;
  background: #f0f2f4 !important;
  box-shadow: none !important;
  color: #2f3a44 !important;
  font-family: "Inter", "Malgun Gothic", "Apple SD Gothic Neo", Arial, sans-serif !important;
}

body[data-view="letter"] .letter-composer-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 14px 16px 8px;
  color: #343c44;
  font-size: 13px;
  line-height: 1;
}

body[data-view="letter"] .letter-composer-head strong {
  font-weight: 900;
}

body[data-view="letter"] .letter-composer-head span {
  padding: 4px 18px 4px 8px;
  border: 1px solid #d4dce2;
  border-radius: 3px;
  background: #fff;
  color: #88949d;
  font-size: 11px;
}

body[data-view="letter"] #letterCharCount {
  justify-self: end;
  color: #d8dde1;
  font-size: 30px;
  font-weight: 700;
}

body[data-view="letter"] .letter-composer-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 78px;
  gap: 8px;
  align-items: stretch;
  padding: 0 16px 16px;
}

body[data-view="letter"] .letter-sticker-picker {
  position: relative;
  display: block;
  width: 42px;
  padding-top: 2px;
}

body[data-view="letter"] .letter-sticker-picker button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #d6e1e8;
  border-radius: 3px;
  background: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

body[data-view="letter"] .letter-sticker-current {
  grid-template-columns: minmax(0, 1fr) auto;
  width: 42px !important;
  height: 42px !important;
  padding: 0 5px 0 7px !important;
  font-size: 18px !important;
}

body[data-view="letter"] .letter-sticker-caret {
  color: #9ba8b1;
  font-size: 9px;
  line-height: 1;
}

body[data-view="letter"] .letter-sticker-options {
  position: absolute;
  left: 0;
  top: 48px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 32px);
  gap: 5px;
  padding: 6px;
  border: 1px solid #d6e1e8;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(47, 58, 68, 0.14);
}

body[data-view="letter"] .letter-sticker-options[hidden] {
  display: none !important;
}

body[data-view="letter"] .letter-sticker-picker button.is-active {
  border-color: #f0b45d;
  background: #fff7e8;
  box-shadow: 0 0 0 2px rgba(240, 180, 93, 0.2);
}

body[data-view="letter"] .letter-write-box {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 6px 8px;
  min-width: 0;
}

body[data-view="letter"] .letter-write-box .letter-from-label {
  position: static !important;
  display: grid !important;
  align-items: center;
  width: auto !important;
  color: #90a0aa;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

body[data-view="letter"] .letter-write-box #letterFrom {
  position: static !important;
  width: 100% !important;
  height: 26px !important;
  min-height: 0 !important;
  padding: 0 8px !important;
  border: 1px solid #d8e0e6 !important;
  border-radius: 3px !important;
  background: #fff !important;
  color: #34414b !important;
  font: inherit !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

body[data-view="letter"] .letter-write-box #letterText {
  position: static !important;
  grid-column: 1 / -1;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 10px 12px !important;
  border: 1px solid #d8e0e6 !important;
  border-radius: 3px !important;
  background: #fff !important;
  color: #2f3a44 !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  outline: none;
  resize: none;
}

body[data-view="letter"] .letter-write-box #letterText::placeholder,
body[data-view="letter"] .letter-write-box #letterFrom::placeholder {
  color: #b6c1c9;
}

body[data-view="letter"] .letter-me2day-composer .letter-submit-message {
  position: static !important;
  align-self: stretch;
  width: 78px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #d6dde2 !important;
  border-radius: 3px !important;
  background: #fff !important;
  color: #96a1a9 !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center;
  cursor: pointer;
}

body[data-view="letter"] .letter-me2day-composer .letter-submit-message:not(:disabled) {
  border-color: #9dcde8 !important;
  background: #ffffff !important;
  color: #2e9ed1 !important;
}

body[data-view="letter"] .letter-me2day-composer .letter-submit-message:disabled {
  cursor: default;
  opacity: 0.74;
}

body[data-view="letter"] .letter-feed-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
  color: #8a98a2;
  font-size: 12px;
}

body[data-view="letter"] .letter-feed-summary strong {
  color: #53616d;
  font-weight: 800;
}

body[data-view="letter"] .letter-feed {
  display: block !important;
  width: 100% !important;
  columns: auto !important;
  column-gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-view="letter"] .letter-me2day-post {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: start;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 15px 0 14px !important;
  border: 0 !important;
  border-top: 1px solid #edf1f3 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #36444f !important;
  break-inside: auto !important;
  transform: none !important;
}

body[data-view="letter"] .letter-post-sticker {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: 6px;
  border: 1px solid #dce5eb;
  border-radius: 4px;
  background: #fff;
  color: #35a7df;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

body[data-view="letter"] .letter-me2day-post.is-szv .letter-post-sticker {
  background: #eaf7fd;
  color: #2d9ccc;
  font-size: 12px;
}

body[data-view="letter"] .letter-post-body {
  min-width: 0;
}

body[data-view="letter"] .letter-post-body p {
  margin: 0;
  color: #3b4852;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

body[data-view="letter"] .letter-post-body p strong {
  color: #e57e36;
  font-weight: 800;
}

body[data-view="letter"] .letter-me2day-post.is-szv .letter-post-body p strong {
  color: #2fa3d2;
}

body[data-view="letter"] .letter-me2day-reply {
  margin-top: 6px !important;
  color: #82909a !important;
  font-size: 12px !important;
}

body[data-view="letter"] .letter-post-body small {
  display: block;
  margin-top: 5px;
  color: #9da9b1;
  font-size: 11px;
  line-height: 1.35;
}

body[data-view="letter"] .letter-comment-count {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: end;
  width: 30px;
  height: 34px;
  border: 1px solid #d7e0e6;
  border-radius: 15px;
  background: #fff;
  color: #9aa7af;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

body[data-view="letter"] .letter-comment-count::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 1px;
  width: 7px;
  height: 7px;
  border-right: 1px solid #d7e0e6;
  border-bottom: 1px solid #d7e0e6;
  background: #fff;
  transform: rotate(42deg);
}

body[data-view="letter"] .letter-empty {
  margin: 28px 0;
  padding: 22px;
  border-top: 1px solid #edf1f3;
  color: #97a4ad;
  font-size: 13px;
  text-align: center;
}

body[data-view="letter"] .letter-archive-head,
body[data-view="letter"] .letter-search-bar,
body[data-view="letter"] .letter-color-filters,
body[data-view="letter"] .letter-artist-prompt,
body[data-view="letter"] .draft-context,
body[data-view="letter"] .letter-color-grid,
body[data-view="letter"] .letter-terms,
body[data-view="letter"] .letter-submit-head {
  display: none !important;
}

.wf-top-actions {
  display: none !important;
}

@media (max-width: 820px) {
  body[data-view="letter"] .letter-me2day-shell {
    grid-template-columns: 1fr;
    gap: 18px;
    width: min(640px, calc(100vw - 24px));
    margin-top: 22px;
  }

  body[data-view="letter"] .letter-me2day-sidebar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 14px;
    align-items: start;
    padding-top: 0;
  }

  body[data-view="letter"] .letter-me2day-logo {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  body[data-view="letter"] .letter-profile-card {
    width: min(128px, 34vw);
    height: auto;
    aspect-ratio: 1;
  }

  body[data-view="letter"] .letter-board-menu {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  body[data-view="letter"] .letter-board-menu button {
    border-right: 1px solid #e3e8ec;
  }

  body[data-view="letter"] .letter-me2day-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 560px) {
  body[data-view="letter"] .letter-composer-row {
    grid-template-columns: 1fr;
  }

  body[data-view="letter"] .letter-sticker-picker {
    width: 100%;
  }

  body[data-view="letter"] .letter-sticker-current {
    width: 100% !important;
  }

  body[data-view="letter"] .letter-sticker-options {
    top: 46px;
    grid-template-columns: repeat(5, 32px);
  }

  body[data-view="letter"] .letter-me2day-composer .letter-submit-message {
    width: 100% !important;
    min-height: 38px !important;
  }

body[data-view="letter"] .letter-me2day-post {
    grid-template-columns: 48px minmax(0, 1fr) 38px;
  }

  body[data-view="letter"] .letter-post-sticker {
    width: 36px;
    height: 36px;
    margin-left: 0;
  }
}

/* VROWN final background pass: keep every page band on the HOME yellow. */
body[data-view="vrown"] {
  --vrown-page-yellow: #fef019;
  background: var(--vrown-page-yellow) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"],
body[data-view="vrown"] .site-shell[data-view="vrown"] .vrown-view,
body[data-view="vrown"] .site-shell[data-view="vrown"] .vrown-supari,
body[data-view="vrown"] .site-shell[data-view="vrown"] .vrown-analogue-stage,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > section,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-about,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-sticky,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-rail,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-work-card,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-proof,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-membership,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-community,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-footer {
  background: var(--vrown-page-yellow) !important;
  background-color: var(--vrown-page-yellow) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta::before {
  display: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-oddly-image,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-happly-cta-photo {
  background: var(--vrown-page-yellow) !important;
  background-color: var(--vrown-page-yellow) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-top-video-hero,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-proof,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta {
  background: var(--vrown-page-yellow) !important;
  background-color: var(--vrown-page-yellow) !important;
  background-image: none !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-carousel-control {
  background: var(--vrown-page-yellow) !important;
  background-color: var(--vrown-page-yellow) !important;
}

/* VROWN performance pass: avoid permanent compositor layers. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-image {
  will-change: auto !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-copy,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo {
  will-change: auto !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta.is-happly-live .va-happly-cta-copy,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta.is-happly-live .va-happly-cta-photo {
  will-change: transform, opacity !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-oddly-about .va-oddly-heading {
  font-family: "Londrina Solid", "Cooper Black", Georgia, serif !important;
  font-weight: 400 !important;
  line-height: 0.95 !important;
}

/* VROWN Happly CTA motion pass: scroll-scrubbed collage spread. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta {
  min-height: clamp(780px, 100vh, 980px) !important;
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
  overflow: hidden !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-copy {
  opacity: var(--hcta-copy-opacity, 0) !important;
  transform: var(--hcta-copy-transform, translate3d(0, 42px, 0) scale(0.94)) !important;
  transition: none !important;
  will-change: transform, opacity !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo {
  opacity: var(--hcta-opacity, 0) !important;
  transform: var(--hcta-transform, translate3d(0, 0, 0) rotate(0deg) scale(1)) !important;
  transition: none !important;
  border: 0 !important;
  border-radius: clamp(12px, 1.7vw, 24px) !important;
  box-shadow: 0 18px 38px rgba(5, 5, 5, 0.16) !important;
  will-change: transform, opacity !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo img {
  filter: saturate(1.02) contrast(1.02) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-bed {
  left: clamp(-22px, 3.2vw, 42px) !important;
  top: clamp(32px, 5vw, 64px) !important;
  width: clamp(142px, 15vw, 214px) !important;
  height: clamp(220px, 24vw, 332px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-sky {
  right: clamp(-108px, -4.6vw, -36px) !important;
  top: clamp(28px, 4.5vw, 58px) !important;
  width: clamp(248px, 31vw, 408px) !important;
  height: clamp(180px, 21vw, 278px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-gummies {
  left: clamp(-38px, 4vw, 58px) !important;
  bottom: clamp(56px, 10vw, 128px) !important;
  width: clamp(176px, 22vw, 294px) !important;
  height: clamp(172px, 20vw, 266px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-heels {
  right: clamp(-36px, 2.8vw, 42px) !important;
  bottom: clamp(42px, 8vw, 106px) !important;
  width: clamp(208px, 25vw, 350px) !important;
  height: clamp(178px, 21vw, 292px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-cam {
  left: clamp(228px, 24vw, 342px) !important;
  top: clamp(-62px, -2vw, -18px) !important;
  width: clamp(160px, 17vw, 238px) !important;
  height: clamp(222px, 23vw, 320px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-blue {
  right: clamp(220px, 23vw, 326px) !important;
  top: clamp(-58px, -1.8vw, -16px) !important;
  width: clamp(152px, 16vw, 228px) !important;
  height: clamp(218px, 23vw, 316px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-clear {
  left: clamp(48%, 52vw, 58%) !important;
  bottom: clamp(-92px, -4vw, -34px) !important;
  width: clamp(180px, 20vw, 280px) !important;
  height: clamp(218px, 23vw, 324px) !important;
  margin-left: 0 !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-echo {
  left: clamp(122px, 13vw, 188px) !important;
  bottom: clamp(-86px, -3.5vw, -30px) !important;
  width: clamp(174px, 19vw, 262px) !important;
  height: clamp(206px, 22vw, 304px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-word-bird {
  position: relative;
  display: grid;
  min-height: 675px;
  place-items: center;
  padding: 84px 82px 76px;
  overflow: hidden;
  border-top: 3px solid #050505;
  background: var(--vrown-page-yellow) !important;
  color: #050505;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-word-bird blockquote {
  position: relative;
  z-index: 2;
  display: grid;
  max-width: 1220px;
  justify-items: center;
  margin: 0;
  text-align: center;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-word-bird blockquote p {
  margin: 0;
  font-family: "Londrina Solid", "Cooper Black", Georgia, serif;
  font-size: 94px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.95;
  white-space: pre-line;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-word-bird-arrow {
  position: absolute;
  top: 55%;
  z-index: 3;
  display: grid;
  width: 86px;
  height: 62px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #050505;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 54px;
  line-height: 1;
  transition: transform 140ms ease;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-word-bird-arrow:hover,
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-word-bird-arrow:focus-visible {
  transform: translateX(var(--word-arrow-nudge, 0));
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-word-bird-prev {
  --word-arrow-nudge: -8px;
  left: 0;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-word-bird-next {
  --word-arrow-nudge: 8px;
  right: 0;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-word-bird.is-word-switching blockquote {
  animation: vaWordPop 220ms ease both;
}

@media (max-width: 1120px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-word-bird blockquote p {
    font-size: 72px;
  }
}

@keyframes vaWordPop {
  from {
    opacity: 0.36;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 760px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta {
    min-height: 820px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-word-bird {
    min-height: 560px;
    padding: 76px 32px 58px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-word-bird blockquote p {
    font-size: 50px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-word-bird-arrow {
    top: auto;
    bottom: 34px;
    width: 64px;
    height: 48px;
    font-size: 40px;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-cam {
    left: 34vw !important;
    top: -26px !important;
    width: 130px !important;
    height: 178px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-blue {
    right: 26vw !important;
    top: 18px !important;
    width: 128px !important;
    height: 174px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-clear {
    left: 50% !important;
    bottom: -44px !important;
    width: 146px !important;
    height: 196px !important;
    margin-left: -73px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-main > .va-happly-cta .va-happly-cta-photo-echo {
    left: 10vw !important;
    bottom: -30px !important;
    width: 140px !important;
    height: 188px !important;
  }
}

/* VROWN object carousel intro: large centered V-friends statement. */
body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-v-friends-section {
  padding-top: clamp(46px, 5.2vw, 72px) !important;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-v-friends-section .va-v-friends-head {
  display: block !important;
  padding: 0 clamp(22px, 5vw, 86px) clamp(12px, 1.2vw, 18px) !important;
  text-align: center;
}

body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-v-friends-section .va-v-friends-head h2 {
  max-width: min(1680px, 94vw);
  margin: 0 auto;
  color: #050505;
  font-size: clamp(38px, 5.55vw, 82px) !important;
  font-weight: 500;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 760px) {
  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-v-friends-section {
    padding-top: 38px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-v-friends-section .va-v-friends-head {
    padding: 0 18px 16px !important;
  }

  body[data-view="vrown"] .site-shell[data-view="vrown"] .va-clone-stage .va-v-friends-section .va-v-friends-head h2 {
    font-size: clamp(33px, 11vw, 52px) !important;
    line-height: 1.05 !important;
  }
}

/* LETTER Cyworld mini-home skin. Scoped to LETTER only. */
body[data-view="letter"] {
  --letter-cy-blue: #71b9e8;
  --letter-cy-blue-dark: #2f7eba;
  --letter-cy-blue-soft: #dff3ff;
  --letter-cy-panel: #ffffff;
  --letter-cy-cream: #fffdf4;
  --letter-cy-yellow: #fef019;
  --letter-cy-pink: #ff8cc6;
  --letter-cy-text: #30506d;
  --letter-cy-muted: #7f9aae;
  background-color: #cceeff !important;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(71, 145, 198, 0.28) 1px, transparent 1.5px),
    linear-gradient(180deg, #d8f3ff 0%, #f7fcff 58%, #e8f8ff 100%) !important;
  background-size: 12px 12px, 100% 100% !important;
  color: var(--letter-cy-text);
}

body[data-view="letter"] .happly-top-banner {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: #050505 !important;
  color: #ffffff;
  font-family: "Inter", "Malgun Gothic", Arial, sans-serif;
  font-size: 12px;
  text-shadow: none;
}

body[data-view="letter"] .gate-menu.app-menu {
  border: 1px solid #8ccbed !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 8px 18px rgba(49, 119, 166, 0.16) !important;
}

body[data-view="letter"] .gate-menu.app-menu .app-menu-toggle span {
  background: #4a97c9 !important;
}

body[data-view="letter"] .gate-menu.app-menu .app-menu-items {
  border: 1px solid #8ccbed !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 14px 28px rgba(49, 119, 166, 0.18) !important;
}

body[data-view="letter"] .gate-menu.app-menu .app-menu-items button {
  color: #4a7da1 !important;
}

body[data-view="letter"] .letter-me2day-shell {
  position: relative;
  grid-template-columns: 168px minmax(0, 720px);
  gap: 18px;
  width: min(960px, calc(100vw - 34px));
  margin-top: 42px;
  padding: 18px;
  border: 2px solid #8ccbed;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(234, 248, 255, 0.96) 0 190px, rgba(255, 255, 255, 0.95) 190px 100%),
    var(--letter-cy-panel);
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.78),
    0 18px 45px rgba(56, 124, 171, 0.2);
  color: var(--letter-cy-text);
}

body[data-view="letter"] .letter-me2day-shell::before {
  content: "mini home";
  position: absolute;
  left: 18px;
  top: -24px;
  padding: 4px 12px 5px;
  border: 1px solid #8ccbed;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: #ffffff;
  color: var(--letter-cy-blue-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body[data-view="letter"] .letter-me2day-sidebar {
  display: block;
  padding: 12px;
  border: 1px solid #addaf1;
  border-radius: 14px;
  background: linear-gradient(180deg, #fafdff 0%, #eaf8ff 100%);
  box-shadow: inset 0 0 0 2px #ffffff;
}

body[data-view="letter"] .letter-profile-card {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0 0 12px;
  padding: 7px;
  border: 1px solid #8ccbed;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(222, 246, 255, 0.92) 100%),
    var(--letter-cy-panel);
  box-shadow:
    inset 0 0 0 3px #ffffff,
    0 7px 12px rgba(77, 138, 178, 0.14);
}

body[data-view="letter"] .letter-profile-card img {
  object-fit: contain;
  image-rendering: pixelated;
  filter: saturate(1.06) contrast(1.02);
}

body[data-view="letter"] .letter-profile-copy {
  margin: 0 0 14px;
  padding: 10px 10px 11px;
  border: 1px solid #b6def4;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: inset 0 0 0 2px #f2fbff;
}

body[data-view="letter"] .letter-profile-copy strong {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--letter-cy-blue-dark);
  font-size: 13px;
  font-weight: 800;
}

body[data-view="letter"] .letter-profile-copy strong::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--letter-cy-pink);
  box-shadow: 0 0 0 2px #ffe3f1;
}

body[data-view="letter"] .letter-profile-copy p {
  margin-top: 7px;
  color: #6d8698;
  font-size: 11px;
  line-height: 1.45;
}

body[data-view="letter"] .letter-board-menu {
  width: 100%;
  overflow: hidden;
  border: 1px solid #9fd2ee;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: inset 0 0 0 2px #f1fbff;
}

body[data-view="letter"] .letter-board-menu button {
  grid-template-columns: 22px minmax(0, 1fr);
  min-height: 35px;
  border-bottom: 1px dashed #c8e8f8;
  background: linear-gradient(180deg, #ffffff 0%, #f2fbff 100%);
  color: #66879d;
  font-size: 12px;
}

body[data-view="letter"] .letter-board-menu button:last-child {
  border-bottom: 0;
}

body[data-view="letter"] .letter-board-menu button.is-active {
  background: linear-gradient(180deg, #fffbe1 0%, #fff4a9 100%);
  color: #356f9b;
}

body[data-view="letter"] .letter-board-menu button.is-active span {
  color: #f59ec7;
}

body[data-view="letter"] .letter-me2day-panel {
  padding: 0;
  border: 1px solid #addaf1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 2px #ffffff;
}

body[data-view="letter"] .letter-me2day-topbar {
  align-items: center;
  margin: 0 0 12px;
  padding: 13px 16px;
  border: 1px solid #9fd2ee;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff 0%, #e6f8ff 100%);
  box-shadow: 0 7px 16px rgba(77, 138, 178, 0.12);
}

body[data-view="letter"] .letter-me2day-topbar h1 {
  color: #3787bd;
  font-family: "Inter", "Malgun Gothic", Arial, sans-serif;
  font-size: 20px;
  text-shadow: 0 1px 0 #ffffff;
}

body[data-view="letter"] .letter-me2day-topbar p {
  color: #7d9aae;
  font-size: 11px;
}

body[data-view="letter"] .letter-me2day-composer {
  margin-bottom: 18px !important;
  border: 1px solid #9fd2ee !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fafdff 0%, #e7f8ff 100%) !important;
  box-shadow:
    inset 0 0 0 2px #ffffff,
    0 8px 18px rgba(77, 138, 178, 0.14) !important;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-form.letter-me2day-composer,
body[data-view="letter"] .letter-panel[data-mode="archive"] .letter-submit-form.letter-me2day-composer {
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 1px solid #9fd2ee !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fafdff 0%, #e7f8ff 100%) !important;
  box-shadow:
    inset 0 0 0 2px #ffffff,
    0 8px 18px rgba(77, 138, 178, 0.14) !important;
}

body[data-view="letter"] .letter-composer-head {
  grid-template-columns: auto auto minmax(0, 1fr);
  padding: 12px 14px 8px;
  border-bottom: 1px dashed #b8e0f3;
  color: #4f7f9e;
}

body[data-view="letter"] .letter-composer-head strong {
  position: relative;
  padding-left: 17px;
  color: #356f9b;
  font-size: 12px;
}

body[data-view="letter"] .letter-composer-head strong::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--letter-cy-yellow);
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #b7dff3;
  transform: translateY(-50%);
}

body[data-view="letter"] .letter-composer-head span {
  border: 1px solid #cde7f6;
  border-radius: 999px;
  background: #ffffff;
  color: #7c98aa;
}

body[data-view="letter"] #letterCharCount {
  color: rgba(81, 153, 198, 0.28);
}

body[data-view="letter"] .letter-composer-row {
  grid-template-columns: 46px minmax(0, 1fr) 72px;
  padding: 0 14px 14px;
}

body[data-view="letter"] .letter-sticker-current,
body[data-view="letter"] .letter-sticker-options button {
  border: 1px solid #addaf1;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: inset 0 0 0 2px #f3fbff;
}

body[data-view="letter"] .letter-sticker-options {
  border: 1px solid #9fd2ee;
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(77, 138, 178, 0.18);
}

body[data-view="letter"] .letter-sticker-picker button.is-active {
  border-color: #f7bad7;
  background: #fff4bf;
  box-shadow: inset 0 0 0 2px #fffceb;
}

body[data-view="letter"] .letter-write-box .letter-from-label {
  color: #5e8ba8;
}

body[data-view="letter"] .letter-write-box #letterFrom,
body[data-view="letter"] .letter-write-box #letterText {
  border: 1px solid #b8def2 !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #36586e !important;
  box-shadow: inset 0 1px 3px rgba(72, 128, 168, 0.12) !important;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-form.letter-me2day-composer .letter-write-box #letterFrom {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 26px !important;
  min-height: 0 !important;
  padding: 0 8px !important;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-form.letter-me2day-composer .letter-write-box #letterText {
  position: static !important;
  inset: auto !important;
  grid-column: 1 / -1;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

body[data-view="letter"] .letter-me2day-composer .letter-submit-message {
  width: 72px !important;
  border: 1px solid #7dbde5 !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, #ffffff 0%, #d7f3ff 100%) !important;
  color: #3d85b5 !important;
  box-shadow: inset 0 0 0 2px #f1fbff !important;
  font-size: 11px !important;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-form.letter-me2day-composer .letter-submit-message {
  position: static !important;
  align-self: stretch;
  width: 72px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #7dbde5 !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, #ffffff 0%, #d7f3ff 100%) !important;
  color: #3d85b5 !important;
  box-shadow: inset 0 0 0 2px #f1fbff !important;
  font-family: "Inter", "Malgun Gothic", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body[data-view="letter"] .letter-me2day-composer .letter-submit-message:not(:disabled) {
  border-color: #eda5cb !important;
  background: linear-gradient(180deg, #fffdf0 0%, #fff1a3 100%) !important;
  color: #3279aa !important;
}

body[data-view="letter"] .letter-panel[data-mode="submit"] .letter-submit-form.letter-me2day-composer .letter-submit-message:not(:disabled) {
  border-color: #eda5cb !important;
  background: linear-gradient(180deg, #fffdf0 0%, #fff1a3 100%) !important;
  color: #3279aa !important;
}

body[data-view="letter"] .letter-feed-summary {
  margin-bottom: 10px;
  padding: 8px 11px;
  border: 1px solid #b9e0f3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  color: #7d9aae;
}

body[data-view="letter"] .letter-feed-summary strong {
  color: #3f85b7;
}

body[data-view="letter"] .letter-me2day-post {
  grid-template-columns: 54px minmax(0, 1fr) 36px;
  margin: 0 0 10px !important;
  padding: 12px !important;
  border: 1px solid #b9e0f3 !important;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f4fbff 100%) !important;
  box-shadow: 0 5px 14px rgba(77, 138, 178, 0.11) !important;
}

body[data-view="letter"] .letter-post-sticker {
  width: 40px;
  height: 40px;
  margin-left: 0;
  border: 1px solid #b9e0f3;
  border-radius: 12px;
  background: #f7fdff;
  box-shadow: inset 0 0 0 2px #ffffff;
}

body[data-view="letter"] .letter-post-body p {
  color: #3c5366;
  font-size: 13px;
}

body[data-view="letter"] .letter-post-body p strong {
  color: #e28aac;
}

body[data-view="letter"] .letter-me2day-post.is-szv .letter-post-body p strong {
  color: #3286b8;
}

body[data-view="letter"] .letter-post-body small,
body[data-view="letter"] .letter-me2day-reply {
  color: #8aa3b4 !important;
}

body[data-view="letter"] .letter-comment-count {
  width: 28px;
  height: 30px;
  border: 1px solid #b9e0f3;
  border-radius: 12px;
  background: #ffffff;
  color: #80a3b7;
  box-shadow: inset 0 0 0 2px #f2fbff;
}

body[data-view="letter"] .letter-comment-count::after {
  right: 3px;
  bottom: -1px;
  border-color: #b9e0f3;
}

@media (max-width: 820px) {
  body[data-view="letter"] .letter-me2day-shell {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  body[data-view="letter"] .letter-me2day-sidebar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body[data-view="letter"] .letter-profile-card {
    width: 128px;
    max-width: 34vw;
  }

  body[data-view="letter"] .letter-board-menu {
    grid-column: 1 / -1;
  }
}

/* VROWN 3 isolated import from the legacy internal vrownnnn view. */
/* VROWN top entry: Touchy Coffee-inspired text pop, rebuilt with local type. */
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-hero {
  display: grid;
  min-height: 100svh;
  padding: clamp(58px, 6.4vw, 84px) clamp(14px, 3vw, 44px) clamp(28px, 5vw, 58px);
  place-items: start center;
  overflow: hidden;
  background: #fef019 !important;
  color: #050505 !important;
  isolation: isolate;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-logo {
  --touchy-size: clamp(118px, 22.2vw, 330px);
  width: min(1180px, 96vw);
  margin: 0;
  color: #050505;
  font-family: "Caveat", "Gaegu", "Londrina Solid", cursive;
  font-size: 0;
  font-weight: 700;
  line-height: 0.52;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  cursor: default;
  filter: saturate(1.1);
  user-select: none;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-line {
  display: block;
  white-space: nowrap;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-line-suzie {
  transform: translateX(-0.012em) rotate(-1deg);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-line-vrown {
  margin-top: -0.1em;
  transform: translateX(0.02em) translateY(22px) rotate(0.8deg);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-letter {
  display: inline-block;
  margin: 0 0.008em;
  color: #050505;
  font-size: var(--touchy-size);
  line-height: 0.78;
  -webkit-text-stroke: 0.018em #050505;
  paint-order: stroke fill;
  text-shadow:
    0.012em 0 0 #050505,
    -0.012em 0 0 #050505,
    0 0.012em 0 #050505,
    0 -0.012em 0 #050505,
    0.018em 0.018em 0 #050505;
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)) scaleX(var(--sx, 1)) scaleY(var(--sy, 1));
  transform-origin: 50% 58%;
  animation: va-touchy-pop 560ms cubic-bezier(0.17, 0.84, 0.44, 1) both;
  animation-delay: calc(110ms + (var(--i, 0) * 82ms));
  will-change: transform, opacity;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-letter:hover {
  animation: va-touchy-tap 360ms cubic-bezier(0.17, 0.84, 0.44, 1) both;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-mobile-intro {
  display: none;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-vrown-intro-strip {
  display: grid;
  min-height: clamp(330px, 46svh, 520px);
  padding: clamp(46px, 6.5vw, 82px) clamp(18px, 3.75vw, 48px) clamp(48px, 6.6vw, 84px);
  place-items: center;
  border-top: 3px solid #050505;
  background: #fef019 !important;
  color: #050505 !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-vrown-intro-strip p {
  max-width: 1184px;
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(32px, 4.75vw, 61px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yellowbird-tv {
  padding: clamp(18px, 2.2vw, 30px) clamp(10px, 1.5vw, 18px) 0;
  background: #fef019 !important;
  color: #050505;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-word-bird {
  border-bottom: 3px solid #050505;
  background: #fef019 !important;
  background-color: #fef019 !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-word-bird-with-title {
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  row-gap: clamp(48px, 4.6vw, 72px);
  padding: clamp(64px, 6vw, 88px) clamp(40px, 6.4vw, 82px) clamp(82px, 7vw, 112px);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-title {
  position: relative;
  left: auto;
  top: auto;
  z-index: 4;
  width: min(760px, calc(100vw - 40px));
  margin: 0;
  color: #050505;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  transform: none;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title blockquote {
  align-self: start;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title blockquote p {
  max-width: min(980px, calc(100vw - 156px));
  font-size: clamp(62px, 6.2vw, 82px);
  line-height: 1.04;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-frame {
  position: relative;
  width: min(1252px, calc(100vw - 28px));
  aspect-ratio: 16 / 8.9;
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid #050505;
  border-radius: clamp(22px, 3vw, 38px);
  background: #050505;
  box-shadow: 0 0 0 1px #050505;
  isolation: isolate;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-video-stage {
  position: absolute;
  inset: 0 10.7% clamp(148px, 13vw, 168px);
  z-index: 1;
  overflow: hidden;
  background: #050505;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-player-card {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 1.7vw, 22px);
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "copy controls"
    "progress progress";
  align-items: center;
  width: min(1040px, calc(100% - clamp(34px, 7vw, 88px)));
  min-height: 0;
  padding: clamp(14px, 1.55vw, 20px) clamp(17px, 2.4vw, 30px) clamp(12px, 1.45vw, 18px);
  border: 3px solid #050505;
  border-radius: clamp(18px, 2.15vw, 28px);
  background: #fef019;
  color: #050505;
  column-gap: clamp(18px, 3vw, 46px);
  row-gap: clamp(10px, 1vw, 14px);
  transform: translateX(-50%);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-player-copy {
  grid-area: copy;
  min-width: 0;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-player-card p {
  margin: 0 0 clamp(5px, 0.65vw, 8px);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-player-card h2 {
  margin: 0;
  overflow: hidden;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(26px, 3.25vw, 46px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-controls {
  grid-area: controls;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(10px, 1.45vw, 18px);
  margin: 0;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-progress {
  grid-area: progress;
  position: relative;
  height: clamp(7px, 0.8vw, 10px);
  overflow: hidden;
  border: 2px solid #050505;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.16);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #050505;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 160ms linear;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-toggle,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-skip {
  position: relative;
  display: grid;
  min-height: 0;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: #050505;
  cursor: pointer;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-toggle {
  width: clamp(44px, 4.65vw, 58px);
  height: clamp(44px, 4.65vw, 58px);
  border: 3px solid #050505;
  border-radius: 12px;
  background: #fef019;
  box-shadow: 0 4px 0 #050505;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-toggle::before,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 6px;
  height: 21px;
  border-radius: 2px;
  background: #050505;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-toggle::before {
  transform: translate(-8px, -50%);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-toggle::after {
  transform: translate(4px, -50%);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-frame.is-paused .va-yb-toggle::before {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #050505;
  border-radius: 0;
  background: transparent;
  transform: translate(-36%, -50%);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-frame.is-paused .va-yb-toggle::after {
  display: none;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-skip-controls {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-skip {
  width: clamp(38px, 4vw, 50px);
  height: clamp(38px, 4vw, 50px);
  border: 3px solid #050505;
  border-radius: 10px;
  background: #fef019;
  box-shadow: 0 4px 0 #050505;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-skip::before,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-skip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-forward::before,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-forward::after {
  border-left: 12px solid #050505;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-forward::before {
  transform: translate(-11px, -50%);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-forward::after {
  transform: translate(0, -50%);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-back::before,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-back::after {
  border-right: 12px solid #050505;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-back::before {
  transform: translate(-12px, -50%);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-back::after {
  transform: translate(-1px, -50%);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-toggle:hover,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-skip:hover {
  transform: scale(1.08);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-badge {
  position: absolute;
  right: clamp(45px, 5.2vw, 72px);
  top: clamp(26px, 3.5vw, 42px);
  z-index: 3;
  width: clamp(57px, 6.1vw, 80px);
  aspect-ratio: 1;
  background: #050505;
  clip-path: polygon(50% 0, 59% 18%, 78% 9%, 76% 30%, 98% 34%, 82% 49%, 96% 67%, 75% 68%, 74% 91%, 57% 80%, 43% 100%, 37% 78%, 15% 87%, 24% 65%, 2% 57%, 20% 45%, 5% 27%, 28% 29%, 31% 7%);
  transform: rotate(-8deg);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-badge::before {
  content: "";
  position: absolute;
  inset: 4px;
  background:
    radial-gradient(circle at 37% 34%, #050505 0 4px, transparent 4.5px),
    radial-gradient(circle at 60% 31%, #050505 0 4px, transparent 4.5px),
    radial-gradient(circle at 34% 31%, #fef019 0 1.5px, transparent 2px),
    radial-gradient(circle at 57% 28%, #fef019 0 1.5px, transparent 2px),
    #fef019;
  clip-path: inherit;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-badge::after {
  content: "";
  position: absolute;
  left: 55%;
  top: 54%;
  width: 0;
  height: 0;
  border-top: clamp(6px, 0.82vw, 9px) solid transparent;
  border-bottom: clamp(6px, 0.82vw, 9px) solid transparent;
  border-left: clamp(10px, 1.1vw, 14px) solid #050505;
  transform: translate(-45%, -50%);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote {
  --yb-quote-yellow: #fef019;
  position: relative;
  display: grid;
  min-height: clamp(620px, 55vw, 700px);
  padding: clamp(18px, 2.1vw, 28px) clamp(10px, 1.8vw, 24px) clamp(104px, 9vw, 128px);
  place-items: start center;
  overflow: hidden;
  background: var(--yb-quote-yellow) !important;
  color: #050505;
  isolation: isolate;
  z-index: 6000 !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote figure {
  position: relative;
  z-index: 2;
  width: min(1240px, 100%);
  margin: 0;
  text-align: center;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote blockquote {
  margin: 0;
  font-family: "Cooper Black", "Cooper Std Black", "Londrina Solid", Georgia, "Times New Roman", serif;
  font-size: clamp(62px, 8.35vw, 112px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote figcaption {
  margin-top: clamp(30px, 3.6vw, 46px);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote-arrow {
  position: absolute;
  top: 43%;
  z-index: 3;
  color: #050505;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 4.5vw, 65px);
  font-weight: 900;
  line-height: 1;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote-arrow-left {
  left: clamp(-22px, -1.2vw, -10px);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote-arrow-right {
  right: clamp(-22px, -1.2vw, -10px);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote-badge {
  position: absolute;
  right: clamp(-18px, -1.2vw, -10px);
  top: clamp(-38px, -2.4vw, -22px);
  z-index: 1;
  width: clamp(98px, 10.6vw, 142px);
  aspect-ratio: 1;
  background: #050505;
  clip-path: polygon(50% 0, 59% 18%, 78% 9%, 76% 30%, 98% 34%, 82% 49%, 96% 67%, 75% 68%, 74% 91%, 57% 80%, 43% 100%, 37% 78%, 15% 87%, 24% 65%, 2% 57%, 20% 45%, 5% 27%, 28% 29%, 31% 7%);
  transform: rotate(8deg);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote-badge::before {
  content: "";
  position: absolute;
  inset: 6px;
  background:
    radial-gradient(circle at 39% 33%, #050505 0 7px, transparent 7.5px),
    radial-gradient(circle at 63% 30%, #050505 0 7px, transparent 7.5px),
    radial-gradient(circle at 36% 29%, var(--yb-quote-yellow) 0 2px, transparent 2.5px),
    radial-gradient(circle at 59% 26%, var(--yb-quote-yellow) 0 2px, transparent 2.5px),
    var(--yb-quote-yellow);
  clip-path: inherit;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote-badge::after {
  content: "";
  position: absolute;
  left: 58%;
  top: 55%;
  width: 0;
  height: 0;
  border-top: clamp(10px, 1.25vw, 15px) solid transparent;
  border-bottom: clamp(10px, 1.25vw, 15px) solid transparent;
  border-left: clamp(15px, 1.65vw, 22px) solid #050505;
  transform: translate(-50%, -50%) rotate(3deg);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote-dots {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 3;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote-dots span {
  display: block;
  width: 14px;
  height: 14px;
  border: 3px solid #050505;
  border-radius: 999px;
  background: #050505;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about {
  --yb-about-yellow: #fef019;
  position: relative;
  z-index: 6000 !important;
  display: grid;
  grid-template-columns: minmax(440px, 0.98fr) minmax(390px, 1.02fr);
  align-items: start;
  gap: clamp(26px, 4vw, 58px);
  min-height: clamp(610px, 55vw, 710px);
  padding: clamp(20px, 3.1vw, 38px) clamp(22px, 4.4vw, 62px) clamp(118px, 10vw, 146px);
  overflow: hidden;
  border-bottom: 3px solid #050505;
  background: var(--yb-about-yellow) !important;
  color: #050505;
  isolation: isolate;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-art {
  width: min(520px, 100%);
  justify-self: start;
  margin-left: clamp(8px, 3vw, 44px);
  transform: translateY(clamp(-18px, -1.4vw, -8px));
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-art svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-art .va-yb-born-character {
  display: block;
  width: min(430px, 100%);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-art .va-yb-line {
  fill: none;
  stroke: #050505;
  stroke-width: 6.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-copy {
  display: grid;
  align-self: end;
  justify-items: center;
  padding-top: clamp(64px, 8vw, 96px);
  text-align: center;
  transform: translateY(-18px);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-copy p {
  max-width: 580px;
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(31px, 3.45vw, 46px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-button {
  display: inline-grid;
  min-width: 218px;
  min-height: 72px;
  margin-top: clamp(28px, 3.2vw, 42px);
  padding: 0 34px;
  place-items: center;
  background: #050505;
  clip-path: polygon(0 18%, 7% 12%, 14% 18%, 21% 10%, 28% 18%, 35% 11%, 42% 18%, 49% 10%, 56% 18%, 63% 11%, 70% 18%, 77% 10%, 84% 18%, 91% 12%, 100% 18%, 100% 82%, 93% 88%, 86% 82%, 79% 90%, 72% 82%, 65% 89%, 58% 82%, 51% 90%, 44% 82%, 37% 89%, 30% 82%, 23% 90%, 16% 82%, 9% 88%, 0 82%);
  color: var(--yb-about-yellow);
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(25px, 2.35vw, 31px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-button:hover,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-button:focus-visible {
  transform: translateY(-2px);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word {
  position: relative;
  z-index: 6000 !important;
  padding: clamp(10px, 1.4vw, 18px) clamp(22px, 2.2vw, 30px) clamp(60px, 6vw, 86px);
  overflow: hidden;
  background: #f7f7f2 !important;
  color: #050505;
  isolation: isolate;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word-header {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: clamp(108px, 11.6vw, 148px);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word h2 {
  position: relative;
  z-index: 2;
  width: min(1240px, 100%);
  margin: 0;
  font-family: "Cooper Black", "Cooper Std Black", "Londrina Solid", Georgia, "Times New Roman", serif;
  font-size: clamp(64px, 7.8vw, 112px);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word h2 span {
  color: #fef019;
  text-shadow:
    -3px -3px 0 #050505,
    0 -3px 0 #050505,
    3px -3px 0 #050505,
    -3px 0 0 #050505,
    3px 0 0 #050505,
    -3px 3px 0 #050505,
    0 3px 0 #050505,
    3px 3px 0 #050505;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word-badge {
  position: absolute;
  right: clamp(0px, 2vw, 24px);
  top: clamp(42px, 5.5vw, 70px);
  z-index: 3;
  display: grid;
  box-sizing: border-box;
  width: clamp(84px, 8.8vw, 118px);
  aspect-ratio: 1;
  place-items: center;
  padding: 24px 16px 18px;
  background: #050505;
  clip-path: polygon(50% 0, 59% 18%, 78% 9%, 76% 30%, 98% 34%, 82% 49%, 96% 67%, 75% 68%, 74% 91%, 57% 80%, 43% 100%, 37% 78%, 15% 87%, 24% 65%, 2% 57%, 20% 45%, 5% 27%, 28% 29%, 31% 7%);
  color: #050505;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  transform: rotate(12deg);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word-badge::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  background: #fef019;
  clip-path: inherit;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word-badge span {
  display: block;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 4vw, 54px) clamp(30px, 4vw, 52px);
  width: min(1220px, 100%);
  margin: clamp(0px, 0.5vw, 8px) auto 0;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word-card {
  min-width: 0;
  perspective: 1100px;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-card {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.12;
  padding: 0;
  border: 3px solid #050505;
  border-radius: clamp(20px, 2.25vw, 28px);
  background: #fef019;
  color: #050505;
  appearance: none;
  cursor: pointer;
  perspective: inherit;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-card:focus-visible {
  outline: 3px solid #050505;
  outline-offset: 6px;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform 680ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-card:hover .va-yb-flip-inner,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-card:focus-visible .va-yb-flip-inner,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-card:focus .va-yb-flip-inner {
  transform: rotateY(180deg);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-front {
  background: #fef019;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-front img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(11px, 1.2vw, 16px);
  padding: clamp(22px, 3vw, 36px);
  background: #fef019;
  text-align: center;
  transform: rotateY(180deg);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-kicker,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-title,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-copy {
  display: block;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-kicker {
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-title {
  max-width: 96%;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(29px, 3vw, 46px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0;
  text-align: center;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-copy {
  max-width: 90%;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0;
  text-align: center;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends {
  --yb-about-yellow: #fef019;
  position: relative;
  z-index: 6000 !important;
  min-height: clamp(760px, 62vw, 860px);
  padding: clamp(220px, 19vw, 252px) clamp(18px, 11vw, 150px) clamp(230px, 18vw, 280px);
  border-top: 3px solid #050505;
  overflow: hidden;
  background: #fef019 !important;
  color: #050505 !important;
  isolation: isolate;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends > p {
  position: relative;
  z-index: 4;
  width: min(860px, 82vw);
  margin: 0 auto;
  color: #050505 !important;
  font-size: clamp(31px, 3.18vw, 43px);
  line-height: 1.08;
  letter-spacing: 0;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-yb-about-button {
  position: relative;
  z-index: 5;
  display: grid;
  width: max-content;
  margin: clamp(28px, 3.2vw, 42px) auto 0;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-proof-media {
  position: absolute;
  display: block !important;
  inset: 0 auto auto 50%;
  z-index: 2;
  width: min(1120px, calc(100% - 96px));
  height: 100%;
  margin: 0;
  overflow: visible;
  pointer-events: none;
  transform: translateX(-50%);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker {
  --sticker-x: 0;
  --sticker-scale: 1;
  --sticker-rotate: 0deg;
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--sticker-size, 160px);
  min-height: var(--sticker-min-height, 0);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  transform: translate3d(var(--sticker-x), 0, 0) rotate(var(--sticker-rotate)) scale(var(--sticker-scale));
  transform-origin: 50% 50%;
  box-shadow: none;
  filter: drop-shadow(0 16px 18px rgba(5, 5, 5, 0.22));
  animation: vaZungkStickerFloat 5.8s ease-in-out infinite;
  animation-delay: var(--sticker-delay, 0s);
}
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker.is-dragging {
  z-index: 8;
  cursor: grabbing;
  animation: none;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker img {
  position: static !important;
  display: block;
  width: 100% !important;
  max-width: 100%;
  max-height: var(--sticker-image-max, none);
  height: auto;
  border-radius: 0;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-one {
  --sticker-size: clamp(150px, 15vw, 215px);
  --sticker-rotate: -10deg;
  --sticker-delay: -0.3s;
  left: 2%;
  top: 12%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-two {
  --sticker-size: clamp(170px, 18vw, 250px);
  --sticker-rotate: 6deg;
  --sticker-delay: -2.2s;
  right: 1%;
  top: 13%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-three {
  --sticker-size: clamp(112px, 12vw, 165px);
  --sticker-image-max: clamp(130px, 14vw, 190px);
  --sticker-rotate: 12deg;
  --sticker-delay: -1.5s;
  left: 13%;
  bottom: 10%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-four {
  --sticker-size: clamp(116px, 11vw, 154px);
  --sticker-rotate: -6deg;
  --sticker-delay: -3.1s;
  right: 17%;
  bottom: 12%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-five {
  --sticker-size: clamp(128px, 13vw, 178px);
  --sticker-x: -50%;
  --sticker-rotate: 3deg;
  --sticker-delay: -4.4s;
  left: 50%;
  top: 4%;
}
@keyframes vaZungkStickerFloat {
  0%,
  100% {
    transform: translate3d(var(--sticker-x), 0, 0) rotate(var(--sticker-rotate)) scale(var(--sticker-scale));
  }

  50% {
    transform: translate3d(var(--sticker-x), -12px, 0) rotate(calc(var(--sticker-rotate) + 2deg)) scale(var(--sticker-scale));
  }
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-client-sticker {
  --client-inner-scale: 1;
  --client-pop-y: 0px;
  --reveal-scale: 1;
  opacity: 1;
  pointer-events: auto;
  transition:
    filter 180ms ease,
    transform 260ms linear;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .client-logo-1 {
  --client-width: clamp(218px, 21vw, 286px);
  --va-rotate: -6deg;
  left: 2%;
  top: 13%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .client-logo-2 {
  --client-width: clamp(142px, 13.2vw, 182px);
  --va-rotate: 0deg;
  left: 42%;
  top: 5%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .client-logo-3 {
  --client-width: clamp(218px, 21vw, 286px);
  --va-rotate: 11deg;
  right: 2%;
  top: 10%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .client-logo-4 {
  --client-width: clamp(188px, 18vw, 244px);
  --va-rotate: -2deg;
  left: 7%;
  bottom: 13%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .client-logo-5 {
  --client-width: clamp(238px, 23.8vw, 318px);
  --va-rotate: 0deg;
  left: 46%;
  bottom: 8%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .client-logo-6 {
  --client-width: clamp(148px, 14.6vw, 196px);
  --va-rotate: 0deg;
  right: 8%;
  bottom: 24%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise {
  position: relative;
  z-index: 6000 !important;
  min-height: clamp(880px, 76vw, 1100px);
  padding: clamp(54px, 7vw, 86px) 0 clamp(92px, 9vw, 132px);
  overflow: hidden;
  border-top: 3px solid #050505;
  background: #ffffff !important;
  color: #050505;
  isolation: isolate;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise h2 {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  font-family: "Cooper Black", "Cooper Std Black", "Londrina Solid", Georgia, "Times New Roman", serif;
  font-size: clamp(62px, 9.1vw, 156px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: 0;
  text-align: center;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card {
  --base-x: 0px;
  --promise-hover-y: 0px;
  --va-rotate: 0deg;
  position: absolute;
  z-index: 3;
  display: grid;
  width: clamp(430px, 42vw, 660px);
  min-height: clamp(280px, 27vw, 392px);
  place-items: center;
  padding: clamp(58px, 6.5vw, 96px) clamp(52px, 6vw, 88px);
  color: #050505;
  cursor: grab;
  pointer-events: auto;
  transform:
    translateX(var(--base-x))
    translate3d(var(--drag-x, 0px), calc(var(--drag-y, 0px) + var(--promise-hover-y)), 0)
    rotate(calc(var(--va-rotate, 0deg) + var(--spin-rotate, 0deg)))
    scale(var(--reveal-scale, 1));
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card:focus-visible {
  outline: 4px solid #050505;
  outline-offset: 10px;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card.is-hovered {
  --promise-hover-y: -12px;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card.is-dragging {
  --promise-hover-y: 0px;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-shape {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-shape path {
  fill: var(--vrown3-home-yellow, #fef019);
  stroke: #050505;
  stroke-linejoin: round;
  stroke-width: 5.5;
  vector-effect: non-scaling-stroke;
  transition: fill 180ms ease;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card.is-hovered .va-yb-promise-shape path,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card:focus-visible .va-yb-promise-shape path {
  fill: #fef019;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-copy {
  position: relative;
  z-index: 1;
  max-width: min(390px, 78%);
  text-align: center;
  pointer-events: none;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-copy h3 {
  margin: 0 0 clamp(18px, 2vw, 28px);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(24px, 2.35vw, 39px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-copy p {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(16px, 1.35vw, 22px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card-one {
  left: clamp(18px, 4.8vw, 86px);
  top: clamp(248px, 21vw, 330px);
  --va-rotate: -3deg;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card-two {
  right: clamp(-210px, -9vw, -96px);
  top: clamp(305px, 28vw, 430px);
  --va-rotate: 2deg;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card-three {
  left: 50%;
  bottom: clamp(110px, 9vw, 146px);
  width: clamp(460px, 44vw, 700px);
  --base-x: -50%;
  --va-rotate: 0deg;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-cta {
  position: absolute;
  left: 50%;
  bottom: clamp(34px, 4.5vw, 58px);
  z-index: 5;
  min-width: clamp(142px, 12vw, 176px);
  min-height: clamp(48px, 4.5vw, 58px);
  padding: 8px 28px;
  border: 2px solid #050505;
  border-radius: 999px;
  background: var(--vrown3-home-yellow, #fef019);
  color: #050505;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.6vw, 25px);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 0 #050505;
  transform: translateX(-50%);
  transition:
    background 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-cta:hover,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-cta:focus-visible {
  background: #050505;
  color: var(--vrown3-home-yellow, #fef019);
  box-shadow: 0 2px 0 var(--vrown3-home-yellow, #fef019);
  transform: translateX(-50%) translateY(2px);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-cta:focus-visible {
  outline: 3px solid var(--vrown3-home-yellow, #fef019);
  outline-offset: 4px;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage.is-interaction-ready .va-yb-promise-card {
  --reveal-scale: 0.9;
  opacity: 0;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage.is-interaction-ready .va-yb-promise-card.is-in-view,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage.is-interaction-ready .va-yb-promise-card.is-dragging {
  --reveal-scale: 1;
  opacity: 1;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-services {
  position: relative;
  z-index: 6000 !important;
  overflow: hidden;
  background: #050505;
  color: #050505;
  isolation: isolate;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-services::after {
  content: "";
  display: block;
  height: clamp(54px, 5.1vw, 82px);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 68%, rgba(255, 255, 255, 0.1) 0 1px, transparent 2px),
    linear-gradient(180deg, #050505 0 calc(100% - clamp(14px, 1.45vw, 22px)), #fef019 calc(100% - clamp(14px, 1.45vw, 22px)) 100%);
  background-size: 19px 19px, 31px 31px, auto;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 47.6vw) minmax(340px, 1fr);
  min-height: clamp(144px, 12.2vw, 156px);
  padding: 0 clamp(24px, 2.5vw, 32px);
  overflow: hidden;
  color: #050505;
  isolation: isolate;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background:
    radial-gradient(circle at 12% 28%, rgba(5, 5, 5, 0.12) 0 1px, transparent 1.7px),
    radial-gradient(circle at 64% 72%, rgba(5, 5, 5, 0.08) 0 1px, transparent 1.9px),
    radial-gradient(circle at 84% 32%, rgba(255, 255, 255, 0.2) 0 1px, transparent 2px);
  background-size: 13px 13px, 21px 21px, 34px 34px;
  mix-blend-mode: multiply;
  pointer-events: none;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band-yellow {
  background: #fef019;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band-blue {
  background: #b8ff1a;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band-pink {
  background: #ffc6e8;
  min-height: clamp(158px, 13.45vw, 172px);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band-coral {
  background: #ff7f5c;
  min-height: clamp(158px, 13.45vw, 172px);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band-green {
  color: #fef019;
  background: #050505;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band-green::before {
  opacity: 0.34;
  background:
    radial-gradient(circle at 12% 28%, rgba(240, 226, 38, 0.32) 0 1px, transparent 1.7px),
    radial-gradient(circle at 64% 72%, rgba(255, 255, 255, 0.12) 0 1px, transparent 1.9px),
    radial-gradient(circle at 84% 32%, rgba(184, 255, 26, 0.22) 0 1px, transparent 2px);
  background-size: 13px 13px, 21px 21px, 34px 34px;
  mix-blend-mode: screen;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band-green .va-cassette-icon {
  color: #fef019;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-left {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-width: 0;
  padding-top: clamp(42px, 4.15vw, 53px);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-icon {
  display: block;
  width: clamp(22px, 2.5vw, 32px);
  height: clamp(22px, 2.5vw, 32px);
  flex: 0 0 auto;
  color: #050505;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-icon-bean {
  width: clamp(24px, 2.5vw, 32px);
  height: clamp(17px, 1.72vw, 22px);
  transform: translateY(-1px);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-mini-nav {
  position: absolute;
  left: clamp(84px, 7.7vw, 98px);
  top: clamp(42px, 4.15vw, 53px);
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 2.65vw, 34px);
  align-items: flex-start;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-nav-row {
  display: flex;
  gap: clamp(24px, 2.2vw, 28px);
  align-items: center;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-mini-nav a {
  color: #050505;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  min-width: 0;
  padding: clamp(18px, 2.25vw, 29px) 0 clamp(16px, 2vw, 26px);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-copy h2 {
  margin: 0 0 clamp(4px, 0.55vw, 7px);
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(34px, 2.9vw, 58px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  white-space: nowrap;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-copy p {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(14px, 1.45vw, 22px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer {
  position: relative;
  z-index: 6000 !important;
  min-height: clamp(680px, 100vh, 820px);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(86px, 10vw, 128px) 24px clamp(118px, 14vw, 168px);
  color: #f6f2e8;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 238, 0, 0.1) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.08) 0 1px, transparent 2px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 46%),
    #171819;
  background-size: 22px 22px, 31px 31px, auto, auto;
  isolation: isolate;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer::before {
  content: "";
  position: absolute;
  inset: -12% -8% -8%;
  z-index: -2;
  opacity: 0.28;
  background:
    linear-gradient(90deg, transparent 0 15%, rgba(255, 255, 255, 0.11) 15% 21%, transparent 21% 36%, rgba(255, 255, 255, 0.08) 36% 42%, transparent 42% 58%, rgba(255, 255, 255, 0.08) 58% 64%, transparent 64% 79%, rgba(255, 255, 255, 0.11) 79% 85%, transparent 85%),
    radial-gradient(ellipse at center, transparent 0 35%, rgba(255, 255, 255, 0.12) 36% 42%, transparent 43% 100%);
  filter: blur(0.2px);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.18;
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 255, 255, 0.08) 8px),
    repeating-linear-gradient(90deg, transparent 0 19px, rgba(255, 238, 0, 0.08) 20px);
  mix-blend-mode: screen;
  pointer-events: none;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(760px, 92vw);
  text-align: center;
  transform: translateY(clamp(-34px, -4vw, -24px));
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-copy h2 {
  margin: 0 0 clamp(34px, 5vw, 58px);
  color: #f5f1e8;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(42px, 5.1vw, 67px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 22px;
  color: #fef019;
  border: 1.5px solid #fef019;
  border-radius: 999px;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
  background: rgba(5, 5, 5, 0.28);
  box-shadow: 0 0 0 1px rgba(240, 226, 38, 0.08);
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-button:hover {
  transform: translateY(-2px);
  color: #171819;
  background: #fef019;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-word {
  position: absolute;
  left: 50%;
  bottom: clamp(-35px, -2.8vw, -18px);
  z-index: 1;
  width: 118vw;
  margin: 0;
  transform: translateX(-50%);
  color: #fef019;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(94px, 15.3vw, 196px);
  font-weight: 900;
  line-height: 0.72;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 0 10px 3px;
  color: rgba(245, 241, 232, 0.92);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(11px, 1.05vw, 14px);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-marks {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-footer-mark {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(240, 226, 38, 0.9);
  border: 1px solid rgba(240, 226, 38, 0.45);
  border-radius: 999px;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  background: rgba(5, 5, 5, 0.24);
  animation: va-footer-signal 7s ease-in-out infinite;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-footer-mark-one {
  left: 12%;
  top: 18%;
  width: 48px;
  height: 48px;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-footer-mark-two {
  right: 13%;
  top: 17%;
  padding: 10px 15px;
  animation-delay: -1.8s;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-footer-mark-three {
  right: 19%;
  bottom: 28%;
  width: 38px;
  height: 38px;
  animation-delay: -3.2s;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-footer-mark-four {
  left: 17%;
  bottom: 29%;
  padding: 9px 13px;
  animation-delay: -4.5s;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-footer-mark-five {
  left: 51%;
  top: 11%;
  width: 34px;
  height: 34px;
  animation-delay: -5.8s;
}

@keyframes va-footer-signal {
  0%,
  100% {
    opacity: 0.38;
    transform: translate3d(0, 0, 0);
  }

  45% {
    opacity: 0.95;
    transform: translate3d(0, -10px, 0);
  }
}

@media (max-width: 760px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends {
    min-height: 720px;
    padding: 210px 18px 210px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends > p {
    width: min(680px, 92vw);
    font-size: clamp(27px, 6vw, 38px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-proof-media {
    width: calc(100% - 24px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-one {
    --sticker-size: clamp(96px, 24vw, 140px);
    left: -1%;
    top: 12%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-two {
    --sticker-size: clamp(118px, 31vw, 172px);
    right: -4%;
    top: 14%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-three {
    --sticker-size: clamp(98px, 26vw, 146px);
    left: 2%;
    bottom: 12%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-four {
    --sticker-size: clamp(92px, 24vw, 138px);
    right: 4%;
    bottom: 16%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-five {
    --sticker-size: clamp(122px, 34vw, 180px);
    top: 1%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .client-logo-1 {
    --client-width: clamp(150px, 33vw, 210px);
    left: -2%;
    top: 12%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .client-logo-2 {
    --client-width: clamp(118px, 24vw, 154px);
    left: 40%;
    top: 5%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .client-logo-3 {
    --client-width: clamp(150px, 32vw, 210px);
    right: -1%;
    top: 13%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .client-logo-4 {
    --client-width: clamp(132px, 29vw, 188px);
    left: 2%;
    bottom: 14%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .client-logo-5 {
    --client-width: clamp(166px, 36vw, 230px);
    left: 39%;
    bottom: 8%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .client-logo-6 {
    --client-width: clamp(108px, 23vw, 150px);
    right: 3%;
    bottom: 24%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise {
    min-height: 1040px;
    padding-top: 58px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise h2 {
    width: min(620px, calc(100% - 26px));
    font-size: clamp(50px, 12.5vw, 90px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card {
    width: clamp(340px, 76vw, 470px);
    min-height: clamp(246px, 52vw, 326px);
    padding: 54px 42px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-copy {
    max-width: min(310px, 76%);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-copy h3 {
    font-size: clamp(21px, 5.1vw, 30px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-copy p {
    font-size: clamp(14px, 3.25vw, 18px);
    line-height: 1.34;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card-one {
    left: -36px;
    top: 204px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card-two {
    right: -170px;
    top: 392px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card-three {
    bottom: 118px;
    width: clamp(350px, 78vw, 480px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-cta {
    bottom: 34px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band {
    grid-template-columns: minmax(72px, 20vw) 1fr;
    min-height: 156px;
    padding: 0 20px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band-pink,
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band-coral {
    min-height: 172px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-mini-nav {
    left: clamp(52px, 14vw, 84px);
    gap: 24px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-nav-row:first-child {
    display: none;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-copy h2 {
    font-size: clamp(30px, 5.8vw, 42px);
    white-space: normal;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer {
    min-height: 620px;
    padding: 100px 18px 132px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-copy {
    transform: none;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-copy h2 {
    font-size: clamp(36px, 9vw, 56px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-word {
    bottom: -14px;
    font-size: clamp(72px, 18vw, 132px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-footer-mark-two,
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-footer-mark-four {
    display: none;
  }
}

@media (max-width: 620px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends {
    min-height: 680px;
    padding: 182px 14px 188px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends > p {
    width: min(94vw, 420px);
    font-size: clamp(24px, 7.2vw, 32px);
    line-height: 1.1;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-one {
    left: -8%;
    top: 10%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-two {
    right: -10%;
    top: 16%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-three {
    left: -2%;
    bottom: 13%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-four {
    right: -1%;
    bottom: 18%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-five {
    --sticker-size: clamp(110px, 36vw, 154px);
    top: 2%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .client-logo-1 {
    left: -7%;
    top: 12%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .client-logo-2 {
    left: 35%;
    top: 4%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .client-logo-3 {
    right: -8%;
    top: 15%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise {
    min-height: 1030px;
    padding-top: 48px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise h2 {
    font-size: clamp(44px, 13.6vw, 72px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card {
    width: min(390px, 86vw);
    min-height: 248px;
    padding: 48px 34px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card-one {
    left: -62px;
    top: 174px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card-two {
    right: -178px;
    top: 374px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card-three {
    bottom: 120px;
    width: min(400px, 88vw);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-cta {
    bottom: 34px;
    min-width: 128px;
    min-height: 46px;
    padding: 8px 24px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band {
    grid-template-columns: 48px 1fr;
    min-height: 160px;
    padding: 0 16px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band-pink,
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band-coral {
    min-height: 178px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-left {
    padding-top: 34px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-mini-nav {
    left: 48px;
    top: 18px;
    gap: 12px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-nav-row {
    gap: 12px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-mini-nav a {
    font-size: 10px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-copy {
    padding-top: 44px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-copy h2 {
    font-size: clamp(27px, 8vw, 36px);
    white-space: normal;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-copy p {
    font-size: 11px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer {
    min-height: 560px;
    padding: 86px 14px 104px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-copy h2 {
    font-size: clamp(32px, 11vw, 46px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-button {
    min-height: 38px;
    padding: 0 18px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-word {
    width: 145vw;
    font-size: clamp(58px, 22vw, 104px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-meta {
    font-size: 10px;
  }
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-work-after-intro {
  min-height: auto;
  padding: 0 0 70px;
  background: #fef019 !important;
  background-color: #fef019 !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-work-after-intro .va-work-carousel,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-work-after-intro .va-work-rail,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-work-after-intro .va-work-card {
  background: #fef019 !important;
  background-color: #fef019 !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-work-after-intro .va-v-object-slide img {
  object-fit: contain !important;
  object-position: center !important;
  background: #fef019 !important;
  background-color: #fef019 !important;
  filter: drop-shadow(0 14px 18px rgba(5, 5, 5, 0.16));
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-work-after-intro .va-v-photo-slide img {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #e8e8e8 !important;
  background-color: #e8e8e8 !important;
  filter: saturate(1.04) contrast(1.02);
}

@keyframes va-touchy-pop {
  0% {
    opacity: 0;
    transform: translateY(0.22em) rotate(calc(var(--r, 0deg) - 8deg)) scaleX(calc(var(--sx, 1) * 0.72)) scaleY(calc(var(--sy, 1) * 0.72));
  }

  52% {
    opacity: 1;
    transform: translateY(calc(var(--y, 0) - 0.035em)) rotate(var(--r, 0deg)) scaleX(calc(var(--sx, 1) * 1.12)) scaleY(calc(var(--sy, 1) * 1.12));
  }

  100% {
    opacity: 1;
    transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)) scaleX(var(--sx, 1)) scaleY(var(--sy, 1));
  }
}

@keyframes va-touchy-tap {
  0%,
  100% {
    transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)) scaleX(var(--sx, 1)) scaleY(var(--sy, 1));
  }

  50% {
    transform: translateY(calc(var(--y, 0) - 0.045em)) rotate(var(--r, 0deg)) scaleX(calc(var(--sx, 1) * 1.14)) scaleY(calc(var(--sy, 1) * 1.14));
  }
}

@media (max-width: 980px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-hero {
    min-height: 100svh;
    padding-top: 86px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-logo {
    --touchy-size: clamp(112px, 21vw, 190px);
    width: min(760px, 96vw);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-vrown-intro-strip {
    min-height: auto;
    padding: 54px 24px 58px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-vrown-intro-strip p {
    font-size: clamp(30px, 5.2vw, 50px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-frame {
    aspect-ratio: 16 / 9.6;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-video-stage {
    inset: 0 7% 148px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-player-card {
    width: min(680px, calc(100% - 36px));
    bottom: 14px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote {
    min-height: clamp(540px, 74vw, 640px);
    padding: 28px 18px 94px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote blockquote {
    font-size: clamp(48px, 10.2vw, 82px);
    line-height: 0.94;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote-badge {
    width: clamp(78px, 13vw, 110px);
    right: -10px;
    top: -20px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: auto;
    padding: 42px 24px 76px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-art {
    width: min(540px, 88vw);
    justify-self: center;
    margin-left: 0;
    transform: none;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-art .va-yb-born-character {
    width: min(390px, 78vw);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-copy {
    padding-top: 0;
    transform: none;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-copy p {
    font-size: clamp(30px, 5.2vw, 42px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word {
    padding: 18px 24px 72px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word-header {
    min-height: 130px;
    align-items: flex-start;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word h2 {
    font-size: clamp(54px, 9.4vw, 82px);
    line-height: 0.9;
    white-space: normal;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word-badge {
    right: -6px;
    top: 58px;
    width: 84px;
    font-size: 11px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 26px;
    margin-top: 20px;
  }
}

@media (max-width: 620px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-hero {
    min-height: 100svh;
    padding: 128px 10px 42px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-logo {
    --touchy-size: clamp(96px, 25.4vw, 124px);
    width: 100%;
    line-height: 0.56;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-line-suzie {
    transform: translateX(-0.01em) rotate(-1deg);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-line-vrown {
    margin-top: -0.06em;
    transform: translateX(0.015em) translateY(12px) rotate(0.8deg);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-vrown-intro-strip {
    min-height: auto;
    padding: 42px 18px 46px;
    border-top-width: 2px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-vrown-intro-strip p {
    font-size: clamp(25px, 6.9vw, 30px);
    line-height: 1.2;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yellowbird-tv {
    padding: 14px 9px 48px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-frame {
    width: 100%;
    aspect-ratio: 16 / 9.6;
    border-width: 2px;
    border-radius: 24px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-video-stage {
    inset: 0 0 106px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-player-card {
    left: 50%;
    top: auto;
    bottom: 10px;
    width: calc(100% - 22px);
    min-height: 0;
    padding: 12px 13px 10px;
    border-width: 2px;
    border-radius: 18px;
    column-gap: 12px;
    row-gap: 8px;
    transform: translateX(-50%);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-player-card h2 {
    font-size: clamp(20px, 6vw, 28px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-controls {
    gap: 8px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-toggle {
    width: 38px;
    height: 38px;
    border-width: 2px;
    border-radius: 9px;
    box-shadow: 0 3px 0 #050505;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-skip {
    width: 34px;
    height: 34px;
    border-width: 2px;
    border-radius: 8px;
    box-shadow: 0 3px 0 #050505;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-badge {
    right: 18px;
    top: 24px;
    width: 52px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote {
    min-height: 520px;
    padding: 28px 12px 84px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote blockquote {
    font-size: clamp(35px, 10.8vw, 48px);
    line-height: 1.02;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote figcaption {
    margin-top: 28px;
    font-size: 12px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote-arrow {
    top: 48%;
    font-size: 36px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote-badge {
    right: -12px;
    top: -20px;
    width: 76px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote-dots {
    bottom: 20px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote-dots span {
    width: 12px;
    height: 12px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about {
    padding: 38px 14px 68px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-art {
    width: min(390px, 94vw);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-art .va-yb-born-character {
    width: min(320px, 82vw);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-art .va-yb-line {
    stroke-width: 8;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-copy p {
    font-size: clamp(25px, 7.4vw, 34px);
    line-height: 1.1;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about-button {
    min-width: 158px;
    min-height: 54px;
    margin-top: 24px;
    font-size: 22px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word {
    padding: 18px 16px 58px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word-header {
    min-height: 164px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word h2 {
    font-size: clamp(40px, 14vw, 58px);
    line-height: 0.94;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word h2 span {
    text-shadow:
      -2px -2px 0 #050505,
      0 -2px 0 #050505,
      2px -2px 0 #050505,
      -2px 0 0 #050505,
      2px 0 0 #050505,
      -2px 2px 0 #050505,
      0 2px 0 #050505,
      2px 2px 0 #050505;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word-badge {
    top: 88px;
    width: 72px;
    padding: 22px 14px 18px;
    font-size: 10px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 10px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-card {
    border-width: 2px;
    border-radius: 22px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-title {
    font-size: clamp(24px, 7vw, 30px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-copy {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-letter,
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-letter:hover {
    animation: none;
    opacity: 1;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-inner {
    transition: none;
  }
}

body[data-view="vrown"] .gate-menu.app-menu .app-menu-toggle {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 34px !important;
  min-height: 34px !important;
  gap: 5px !important;
}

body[data-view="vrown"] .gate-menu.app-menu .app-menu-toggle span {
  width: 30px !important;
  height: 4px !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-meltdome-hero {
  display: block !important;
  min-height: 100svh !important;
  height: auto !important;
  padding: clamp(38px, 5.55vw, 40px) clamp(34px, 3vw, 42px) clamp(38px, 5.55vw, 40px) !important;
  overflow: hidden !important;
  background: #fff !important;
  color: #050505 !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-poster {
  position: relative;
  min-height: calc(100svh - clamp(76px, 11.1vw, 80px));
  overflow: hidden;
  border: 2px solid #050505;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    #a8845f;
  background-size: 34px 34px;
  box-shadow: none;
  isolation: isolate;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-titlebar {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  min-height: clamp(74px, 8.3vw, 124px);
  border-bottom: 2px solid #050505;
  background: #fff;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-titlebar h1 {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 clamp(8px, 1.1vw, 18px);
  color: #050505;
  font-family: "Archivo Black", Impact, Haettenschweiler, "Arial Black", Arial, sans-serif;
  font-size: clamp(42px, 7.05vw, 118px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
  transform: scaleX(0.68);
  transform-origin: left center;
  width: calc(100% / 0.68);
  white-space: nowrap;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-kicker {
  position: absolute;
  left: clamp(18px, 2.2vw, 34px);
  bottom: clamp(14px, 2vw, 28px);
  z-index: 12;
  margin: 0;
  padding: 8px 12px 7px;
  border: 2px solid #050505;
  background: #fef019;
  color: #050505;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(8px, 0.9vw, 13px);
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 #050505;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-kicker strong {
  font: inherit;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-collage {
  position: absolute;
  inset: clamp(98px, 9.5vw, 145px) 0 0;
  z-index: 5;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker {
  --drag-x: 0px;
  --drag-y: 0px;
  --spin-rotate: 0deg;
  --reveal-scale: 1;
  position: absolute;
  z-index: var(--md-z, 3);
  margin: 0;
  padding: clamp(10px, 1.1vw, 18px);
  background: #fff;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(10px 14px 0 rgba(5, 5, 5, 0.18));
  transform:
    translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0)
    rotate(calc(var(--va-rotate, 0deg) + var(--spin-rotate, 0deg)))
    scale(var(--reveal-scale, 1));
  transition:
    filter 220ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker::before {
  content: "";
  position: absolute;
  inset: clamp(10px, 1.1vw, 18px);
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.76);
  pointer-events: none;
  mix-blend-mode: screen;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: saturate(0.92) contrast(1.08);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker-left {
  --va-rotate: -4deg;
  --md-z: 5;
  left: clamp(18px, 3.8vw, 70px);
  top: clamp(16px, 2.2vw, 34px);
  width: clamp(360px, 33vw, 560px);
  height: clamp(360px, 37vw, 610px);
  clip-path: polygon(5% 8%, 18% 3%, 35% 6%, 47% 2%, 60% 8%, 78% 5%, 96% 15%, 91% 45%, 98% 76%, 89% 96%, 34% 97%, 7% 91%, 1% 68%, 5% 42%);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker-left img {
  object-position: 50% 22%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker-center {
  --va-rotate: -7deg;
  --md-z: 4;
  left: clamp(420px, 34vw, 660px);
  top: clamp(74px, 8vw, 130px);
  width: clamp(380px, 37vw, 650px);
  height: clamp(190px, 20vw, 330px);
  clip-path: polygon(2% 31%, 24% 9%, 61% 1%, 88% 14%, 99% 37%, 94% 92%, 50% 97%, 19% 87%, 0 64%);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker-center img {
  object-position: 47% 48%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker-right {
  --va-rotate: 3deg;
  --md-z: 6;
  right: clamp(14px, 3vw, 58px);
  top: clamp(24px, 2.8vw, 48px);
  width: clamp(360px, 32vw, 560px);
  height: clamp(360px, 36vw, 600px);
  clip-path: polygon(7% 13%, 18% 4%, 39% 7%, 52% 2%, 67% 8%, 83% 5%, 96% 17%, 92% 44%, 99% 75%, 92% 96%, 28% 97%, 4% 92%, 0 68%, 5% 39%);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker-right img {
  object-position: 48% 18%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker.is-hovered {
  filter: drop-shadow(13px 17px 0 rgba(5, 5, 5, 0.24)) saturate(1.08);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker.is-dragging {
  cursor: grabbing;
  filter: drop-shadow(18px 22px 0 rgba(5, 5, 5, 0.28)) saturate(1.15);
  transition: none !important;
  z-index: 100 !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage.is-interaction-ready .va-md-sticker {
  --reveal-scale: 1;
  opacity: 1;
}

@media (max-width: 980px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-meltdome-hero {
    padding-top: 82px !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-titlebar h1 {
    font-size: clamp(32px, 8vw, 76px);
    transform: none;
    width: 100%;
    white-space: normal;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-collage {
    top: clamp(120px, 17vw, 170px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker-left {
    left: 2vw;
    width: min(58vw, 430px);
    height: min(64vw, 520px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker-center {
    left: 34vw;
    top: 28vw;
    width: min(58vw, 520px);
    height: min(30vw, 270px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker-right {
    right: -8vw;
    top: 7vw;
    width: min(55vw, 410px);
    height: min(62vw, 500px);
  }
}

@media (max-width: 620px) {
  body[data-view="vrown"][data-active-view="vrownnnn"]::before {
    content: none;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-meltdome-hero {
    padding: 44px 16px 30px !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-poster {
    min-height: calc(100svh - 74px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-titlebar {
    min-height: 112px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-titlebar h1 {
    font-size: clamp(34px, 13vw, 62px);
    line-height: 0.92;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-kicker {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    font-size: 8px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-collage {
    inset: 122px 0 0;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker-left {
    left: -9vw;
    top: 20px;
    width: 78vw;
    height: 82vw;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker-center {
    left: 15vw;
    top: 62vw;
    width: 78vw;
    height: 42vw;
  }

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-sticker-right {
    right: -16vw;
    top: 92vw;
    width: 78vw;
    height: 82vw;
  }
}

/* Global guard: the shared hamburger must stay fixed and visible on every page. */
body .gate-menu.app-menu,
body[data-view="home"] .gate-menu.app-menu,
body[data-view="vrown"] .gate-menu.app-menu,
body[data-view="zungk"] .gate-menu.app-menu,
body[data-view="letter"] .gate-menu.app-menu,
body[data-view="game"] .gate-menu.app-menu,
body:has(.site-shell[data-view="zungk"]) .gate-menu.app-menu,
body:has(.site-shell[data-view="letter"]) .gate-menu.app-menu,
body[data-view="vrown"][data-active-view="vrownnnn"].is-yb-about-in-view .gate-menu.app-menu {
  position: fixed !important;
  top: calc(var(--happly-banner-height) + 12px) !important;
  right: 20px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 40000 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

body .gate-menu.app-menu .app-menu-items,
body[data-view="home"] .gate-menu.app-menu .app-menu-items,
body[data-view="vrown"] .gate-menu.app-menu .app-menu-items,
body[data-view="zungk"] .gate-menu.app-menu .app-menu-items,
body[data-view="letter"] .gate-menu.app-menu .app-menu-items,
body[data-view="game"] .gate-menu.app-menu .app-menu-items {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 40001 !important;
}

body .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="home"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="vrown"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="zungk"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="letter"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="game"] .gate-menu.app-menu .app-menu-items[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  body .gate-menu.app-menu,
  body[data-view="home"] .gate-menu.app-menu,
  body[data-view="vrown"] .gate-menu.app-menu,
  body[data-view="zungk"] .gate-menu.app-menu,
  body[data-view="letter"] .gate-menu.app-menu,
  body[data-view="game"] .gate-menu.app-menu,
  body:has(.site-shell[data-view="zungk"]) .gate-menu.app-menu,
  body:has(.site-shell[data-view="letter"]) .gate-menu.app-menu,
  body[data-view="vrown"][data-active-view="vrownnnn"].is-yb-about-in-view .gate-menu.app-menu {
    top: calc(var(--happly-banner-height) + 10px) !important;
    right: 14px !important;
  }

  body .gate-menu.app-menu .app-menu-items,
  body[data-view="home"] .gate-menu.app-menu .app-menu-items,
  body[data-view="vrown"] .gate-menu.app-menu .app-menu-items,
  body[data-view="zungk"] .gate-menu.app-menu .app-menu-items,
  body[data-view="letter"] .gate-menu.app-menu .app-menu-items,
  body[data-view="game"] .gate-menu.app-menu .app-menu-items {
    top: calc(100% + 8px) !important;
  }
}

/* Hamburger dropdown direction lock: menu items always open downward. */
body .gate-menu.app-menu,
body[data-view="home"] .gate-menu.app-menu,
body[data-view="vrown"] .gate-menu.app-menu,
body[data-view="zungk"] .gate-menu.app-menu,
body[data-view="letter"] .gate-menu.app-menu,
body[data-view="game"] .gate-menu.app-menu,
body:has(.site-shell[data-view="zungk"]) .gate-menu.app-menu,
body:has(.site-shell[data-view="letter"]) .gate-menu.app-menu {
  position: fixed !important;
  top: calc(var(--happly-banner-height) + 12px) !important;
  right: 20px !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  width: clamp(174px, 16vw, 220px) !important;
  min-width: 174px !important;
  max-width: calc(100vw - 28px) !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
}

body .gate-menu.app-menu .app-menu-toggle {
  flex: 0 0 auto !important;
  pointer-events: auto !important;
}

body .gate-menu.app-menu .app-menu-items,
body[data-view="home"] .gate-menu.app-menu .app-menu-items,
body[data-view="vrown"] .gate-menu.app-menu .app-menu-items,
body[data-view="zungk"] .gate-menu.app-menu .app-menu-items,
body[data-view="letter"] .gate-menu.app-menu .app-menu-items,
body[data-view="game"] .gate-menu.app-menu .app-menu-items {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  transform: none !important;
}

body .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="home"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="vrown"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="zungk"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="letter"] .gate-menu.app-menu .app-menu-items[hidden],
body[data-view="game"] .gate-menu.app-menu .app-menu-items[hidden] {
  display: none !important;
}

body .gate-menu.app-menu .app-menu-items button,
body[data-view="home"] .gate-menu.app-menu .app-menu-items button,
body[data-view="vrown"] .gate-menu.app-menu .app-menu-items button,
body[data-view="zungk"] .gate-menu.app-menu .app-menu-items button,
body[data-view="letter"] .gate-menu.app-menu .app-menu-items button,
body[data-view="game"] .gate-menu.app-menu .app-menu-items button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 42px !important;
  justify-content: center !important;
  text-align: center !important;
}

@media (max-width: 640px) {
  body .gate-menu.app-menu,
  body[data-view="home"] .gate-menu.app-menu,
  body[data-view="vrown"] .gate-menu.app-menu,
  body[data-view="zungk"] .gate-menu.app-menu,
  body[data-view="letter"] .gate-menu.app-menu,
  body[data-view="game"] .gate-menu.app-menu,
  body:has(.site-shell[data-view="zungk"]) .gate-menu.app-menu,
  body:has(.site-shell[data-view="letter"]) .gate-menu.app-menu {
    top: calc(var(--happly-banner-height) + 10px) !important;
    right: 14px !important;
    width: 164px !important;
    min-width: 164px !important;
  }

  body .gate-menu.app-menu .app-menu-items,
  body[data-view="home"] .gate-menu.app-menu .app-menu-items,
  body[data-view="vrown"] .gate-menu.app-menu .app-menu-items,
  body[data-view="zungk"] .gate-menu.app-menu .app-menu-items,
  body[data-view="letter"] .gate-menu.app-menu .app-menu-items,
  body[data-view="game"] .gate-menu.app-menu .app-menu-items {
    margin-top: 8px !important;
    gap: 6px !important;
  }
}

body #app #entry.entry .gate-scroll .gate-canvas {
  width: 100% !important;
  max-width: 1720px !important;
  height: max(100svh, 760px) !important;
  min-height: 760px !important;
}

body #app #entry.entry .gate-scroll .gate-canvas > .rm-sticker.rm-ref-sticker {
  width: var(--home-w, var(--w)) !important;
  height: auto !important;
  translate: 0 0 !important;
  scale: 1 !important;
  transform: translate3d(var(--drag-x), var(--drag-y), 0) rotate(var(--r)) scale(var(--home-s, 1)) !important;
  z-index: var(--z, 10) !important;
}

body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-01 { --home-w: clamp(132px, 10vw, 190px); --z: 55; left: 2.2% !important; right: auto !important; top: 9% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-02 { --home-w: clamp(120px, 8vw, 158px); --z: 50; left: 15.8% !important; right: auto !important; top: 3% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-03 { --home-w: clamp(158px, 11vw, 216px); --z: 48; left: 28.4% !important; right: auto !important; top: 11.5% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-04 { --home-w: clamp(184px, 14vw, 246px); --z: 54; left: 44.6% !important; right: auto !important; top: 8% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-05 { --home-w: clamp(206px, 16vw, 290px); --z: 45; left: 59.5% !important; right: auto !important; top: 6.2% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-06 { --home-w: clamp(104px, 7.4vw, 144px); --z: 57; left: auto !important; right: 17.4% !important; top: 2.2% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-07 { --home-w: clamp(102px, 7.2vw, 142px); --z: 61; left: auto !important; right: 5.2% !important; top: 9.6% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-08 { --home-w: clamp(132px, 9vw, 184px); --z: 52; left: auto !important; right: 0.2% !important; top: 24.2% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-09 { --home-w: clamp(102px, 7vw, 144px); --z: 42; left: auto !important; right: 10.8% !important; top: 23.2% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-10 { --home-w: clamp(74px, 5.6vw, 112px); --z: 66; left: auto !important; right: 24.5% !important; top: 21% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-11 { --home-w: clamp(96px, 7vw, 132px); --z: 59; left: 70.6% !important; right: auto !important; top: 28.4% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-12 { --home-w: clamp(106px, 7.5vw, 148px); --z: 64; left: auto !important; right: 2.8% !important; top: 43% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-13 { --home-w: clamp(132px, 9vw, 182px); --z: 44; left: 0.6% !important; right: auto !important; top: 25.4% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-14 { --home-w: clamp(272px, 20vw, 390px); --z: 43; left: -2.6% !important; right: auto !important; top: 40.2% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-15 { --home-w: clamp(154px, 11vw, 214px); --z: 58; left: 21.2% !important; right: auto !important; top: 35% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-16 { --home-w: clamp(124px, 8vw, 168px); --z: 46; left: 18.6% !important; right: auto !important; top: 45.4% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-17 { --home-w: clamp(96px, 7vw, 136px); --z: 63; left: 66% !important; right: auto !important; top: 39.6% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-18 { --home-w: clamp(132px, 9vw, 174px); --z: 47; left: auto !important; right: 19% !important; top: 49.2% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-19 { --home-w: clamp(168px, 12vw, 236px); --z: 51; left: -1.2% !important; right: auto !important; top: 62.6% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-20 { --home-w: clamp(208px, 15vw, 292px); --z: 49; left: 14.7% !important; right: auto !important; top: 65.8% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-21 { --home-w: clamp(108px, 7.5vw, 146px); --z: 40; left: 34.8% !important; right: auto !important; top: 66% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-22 { --home-w: clamp(308px, 23vw, 440px); --z: 56; left: 45.2% !important; right: auto !important; top: 66% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-23 { --home-w: clamp(176px, 13vw, 246px); --z: 41; left: auto !important; right: 1.8% !important; top: 58.8% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-24 { --home-w: clamp(142px, 10vw, 204px); --z: 67; left: auto !important; right: 7.6% !important; top: 70.4% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-25 { --home-w: clamp(132px, 9vw, 180px); --z: 53; left: auto !important; right: 26.4% !important; top: 71.4% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-26 { --home-w: clamp(88px, 6vw, 122px); --z: 62; left: 27.2% !important; right: auto !important; top: 75.6% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-27 { --home-w: clamp(80px, 5.4vw, 108px); --z: 68; left: 57.8% !important; right: auto !important; top: 78% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-28 { --home-w: clamp(74px, 5.2vw, 102px); --z: 65; left: auto !important; right: 0.8% !important; top: 7.5% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-29 { --home-w: clamp(154px, 11vw, 214px); --z: 52; left: auto !important; right: 10.8% !important; top: 37.6% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-30 { --home-w: clamp(122px, 8vw, 170px); --z: 60; left: 10.4% !important; right: auto !important; top: 50.4% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-31 { --home-w: clamp(112px, 7.5vw, 156px); --z: 57; left: 4.2% !important; right: auto !important; top: 53.4% !important; }
body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-32 { --home-w: clamp(104px, 7vw, 144px); --z: 39; left: 32.5% !important; right: auto !important; top: 57.6% !important; }

@media (min-width: 1500px) {
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-sticker.rm-ref-sticker {
    --home-s: 1.08;
  }

  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-01 { left: 1.4% !important; top: 8.5% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-05 { left: 57.4% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-07 { right: 3.4% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-14 { left: -3.5% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-22 { left: 43.6% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-23 { right: 0.8% !important; }
}

@media (max-width: 920px) {
  body #app #entry.entry .gate-scroll .gate-canvas {
    max-width: 100vw !important;
    height: max(100svh, 740px) !important;
    min-height: 740px !important;
  }

  body #app #entry.entry .gate-scroll .gate-canvas > .rm-sticker.rm-ref-sticker {
    --home-s: 1;
  }

  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-01 { --home-w: clamp(112px, 18vw, 150px); left: -1% !important; top: 9% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-02 { --home-w: clamp(112px, 16vw, 140px); left: 16% !important; top: 3.5% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-03 { --home-w: clamp(138px, 21vw, 178px); left: 31% !important; top: 10.4% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-04 { --home-w: clamp(166px, 26vw, 230px); left: 52% !important; top: 7% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-05 { --home-w: clamp(182px, 28vw, 248px); left: auto !important; right: -8% !important; top: 16% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-06 { --home-w: clamp(96px, 14vw, 126px); right: 19% !important; top: 1.4% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-07 { --home-w: clamp(92px, 14vw, 118px); right: 3% !important; top: 4.4% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-08 { --home-w: clamp(128px, 20vw, 174px); right: -8% !important; top: 31% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-09 { --home-w: clamp(104px, 16vw, 138px); right: 7.6% !important; top: 25% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-10 { --home-w: clamp(72px, 11vw, 94px); right: 26% !important; top: 23% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-11 { --home-w: clamp(94px, 15vw, 122px); left: 64% !important; top: 36% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-12 { --home-w: clamp(104px, 16vw, 132px); right: 0.4% !important; top: 48.5% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-13 { --home-w: clamp(124px, 19vw, 158px); left: -3% !important; top: 24% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-14 { --home-w: clamp(232px, 36vw, 310px); left: -8% !important; top: 41% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-15 { --home-w: clamp(134px, 21vw, 172px); left: 22% !important; top: 34% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-16 { --home-w: clamp(108px, 17vw, 140px); left: 18% !important; top: 48.8% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-17 { --home-w: clamp(96px, 15vw, 122px); left: 61% !important; top: 43% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-18 { --home-w: clamp(116px, 18vw, 150px); right: 16% !important; top: 53% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-19 { --home-w: clamp(150px, 24vw, 198px); left: -8% !important; top: 63% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-20 { --home-w: clamp(188px, 30vw, 248px); left: 13% !important; top: 66% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-21 { --home-w: clamp(98px, 15vw, 126px); left: 35% !important; top: 65.5% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-22 { --home-w: clamp(250px, 40vw, 340px); left: 48% !important; top: 67% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-23 { --home-w: clamp(150px, 24vw, 198px); right: -5% !important; top: 58.2% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-24 { --home-w: clamp(132px, 21vw, 172px); right: 5% !important; top: 73.4% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-25 { --home-w: clamp(114px, 18vw, 150px); right: 27% !important; top: 76% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-26 { --home-w: clamp(82px, 13vw, 108px); left: 26% !important; top: 78% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-27 { --home-w: clamp(72px, 11vw, 94px); left: 57% !important; top: 80% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-28 { --home-w: clamp(70px, 11vw, 92px); right: 1% !important; top: 10% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-29 { --home-w: clamp(138px, 21vw, 178px); right: 7% !important; top: 37.6% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-30 { --home-w: clamp(112px, 17vw, 146px); left: 8% !important; top: 52% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-31 { --home-w: clamp(102px, 16vw, 134px); left: 1% !important; top: 54% !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-32 { --home-w: clamp(94px, 15vw, 126px); left: 33% !important; top: 56.4% !important; }
}

@media (max-width: 640px) {
  body #app #entry.entry .gate-scroll .gate-canvas {
    height: max(100svh, 720px) !important;
    min-height: 720px !important;
  }

  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-01 { --home-w: 106px; left: -24px !important; top: 76px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-02 { --home-w: 102px; left: 67px !important; top: 32px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-03 { --home-w: 132px; left: 150px !important; top: 90px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-04 { --home-w: 162px; left: 220px !important; top: 42px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-05 { --home-w: 170px; left: auto !important; right: -76px !important; top: 140px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-06 { --home-w: 86px; left: auto !important; right: 96px !important; top: 14px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-07 { --home-w: 88px; left: auto !important; right: -10px !important; top: 40px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-08 { --home-w: 112px; left: auto !important; right: -54px !important; top: 262px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-09 { --home-w: 92px; left: auto !important; right: 12px !important; top: 224px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-10 { --home-w: 66px; left: auto !important; right: 112px !important; top: 200px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-11 { --home-w: 82px; left: 235px !important; top: 298px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-12 { --home-w: 88px; left: auto !important; right: -18px !important; top: 382px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-13 { --home-w: 104px; left: -34px !important; top: 198px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-14 { --home-w: 208px; left: -62px !important; top: 324px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-15 { --home-w: 118px; left: 78px !important; top: 292px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-16 { --home-w: 92px; left: 70px !important; top: 386px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-17 { --home-w: 82px; left: 218px !important; top: 366px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-18 { --home-w: 98px; left: auto !important; right: 64px !important; top: 426px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-19 { --home-w: 128px; left: -48px !important; top: 488px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-20 { --home-w: 158px; left: 58px !important; top: 516px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-21 { --home-w: 86px; left: 150px !important; top: 514px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-22 { --home-w: 224px; left: 194px !important; top: 528px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-23 { --home-w: 132px; left: auto !important; right: -46px !important; top: 480px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-24 { --home-w: 116px; left: auto !important; right: 8px !important; top: 594px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-25 { --home-w: 98px; left: auto !important; right: 96px !important; top: 604px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-26 { --home-w: 72px; left: 96px !important; top: 616px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-27 { --home-w: 62px; left: 228px !important; top: 640px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-28 { --home-w: 62px; left: auto !important; right: 5px !important; top: 88px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-29 { --home-w: 116px; left: auto !important; right: 22px !important; top: 318px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-30 { --home-w: 98px; left: 10px !important; top: 426px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-31 { --home-w: 88px; left: -10px !important; top: 450px !important; }
  body #app #entry.entry .gate-scroll .gate-canvas > .rm-ref-32 { --home-w: 82px; left: 128px !important; top: 446px !important; }
}

/* ZUNGK: keep the shared hamburger clean and give it the HOME yellow accent. */
body[data-view="zungk"] .gate-menu.app-menu {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-view="zungk"] .gate-menu.app-menu:not(.is-open) {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
}

body[data-view="zungk"] .gate-menu.app-menu.is-open {
  width: clamp(174px, 16vw, 220px) !important;
  min-width: 174px !important;
  max-width: calc(100vw - 28px) !important;
}

body[data-view="zungk"] .gate-menu.app-menu .app-menu-toggle {
  border-color: transparent !important;
  background: transparent !important;
  color: #fef019 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-view="zungk"] .gate-menu.app-menu .app-menu-toggle:hover,
body[data-view="zungk"] .gate-menu.app-menu .app-menu-toggle:focus-visible,
body[data-view="zungk"] .gate-menu.app-menu.is-open .app-menu-toggle {
  border-color: transparent !important;
  background: transparent !important;
  color: #fef019 !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-view="zungk"] .gate-menu.app-menu .app-menu-toggle span {
  background: #fef019 !important;
}

@media (max-width: 640px) {
  body[data-view="zungk"] .gate-menu.app-menu:not(.is-open) {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
  }

  body[data-view="zungk"] .gate-menu.app-menu.is-open {
    width: 164px !important;
    min-width: 164px !important;
    max-width: calc(100vw - 28px) !important;
  }
}

/* Responsive hamburger position pass: keep the shared menu inside the usable viewport. */
body .gate-menu.app-menu,
body[data-view="home"] .gate-menu.app-menu,
body[data-view="vrown"] .gate-menu.app-menu,
body[data-view="zungk"] .gate-menu.app-menu,
body[data-view="letter"] .gate-menu.app-menu,
body[data-view="game"] .gate-menu.app-menu,
body:has(.site-shell[data-view="zungk"]) .gate-menu.app-menu,
body:has(.site-shell[data-view="letter"]) .gate-menu.app-menu,
body[data-view="vrown"][data-active-view="vrownnnn"].is-yb-about-in-view .gate-menu.app-menu {
  --app-menu-top-gap: clamp(10px, 1.1vw, 16px);
  --app-menu-edge-gap: clamp(14px, 2vw, 34px);
  --app-menu-right: calc(env(safe-area-inset-right, 0px) + var(--app-menu-edge-gap));
  top: calc(var(--happly-banner-height, 0px) + env(safe-area-inset-top, 0px) + var(--app-menu-top-gap)) !important;
  right: var(--app-menu-right) !important;
  width: clamp(176px, 14vw, 224px) !important;
  min-width: 176px !important;
  max-width: calc(100vw - 28px) !important;
}

body[data-view="zungk"] .gate-menu.app-menu:not(.is-open) {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
}

body[data-view="zungk"] .gate-menu.app-menu.is-open {
  width: clamp(176px, 14vw, 224px) !important;
  min-width: 176px !important;
  max-width: calc(100vw - 28px) !important;
}

body .gate-menu.app-menu .app-menu-items,
body[data-view="home"] .gate-menu.app-menu .app-menu-items,
body[data-view="vrown"] .gate-menu.app-menu .app-menu-items,
body[data-view="zungk"] .gate-menu.app-menu .app-menu-items,
body[data-view="letter"] .gate-menu.app-menu .app-menu-items,
body[data-view="game"] .gate-menu.app-menu .app-menu-items {
  max-height: calc(100svh - var(--happly-banner-height, 0px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 88px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
}

@media (max-width: 900px) {
  body .gate-menu.app-menu,
  body[data-view="home"] .gate-menu.app-menu,
  body[data-view="vrown"] .gate-menu.app-menu,
  body[data-view="zungk"] .gate-menu.app-menu,
  body[data-view="letter"] .gate-menu.app-menu,
  body[data-view="game"] .gate-menu.app-menu,
  body:has(.site-shell[data-view="zungk"]) .gate-menu.app-menu,
  body:has(.site-shell[data-view="letter"]) .gate-menu.app-menu,
  body[data-view="vrown"][data-active-view="vrownnnn"].is-yb-about-in-view .gate-menu.app-menu {
    --app-menu-top-gap: clamp(10px, 2vw, 14px);
    --app-menu-edge-gap: clamp(12px, 2.4vw, 20px);
    --app-menu-right: calc(env(safe-area-inset-right, 0px) + var(--app-menu-edge-gap));
    width: clamp(166px, 28vw, 200px) !important;
    min-width: 166px !important;
  }

  body[data-view="zungk"] .gate-menu.app-menu:not(.is-open) {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
  }

  body[data-view="zungk"] .gate-menu.app-menu.is-open {
    width: clamp(166px, 28vw, 200px) !important;
    min-width: 166px !important;
    max-width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 640px) {
  body .gate-menu.app-menu,
  body[data-view="home"] .gate-menu.app-menu,
  body[data-view="vrown"] .gate-menu.app-menu,
  body[data-view="zungk"] .gate-menu.app-menu,
  body[data-view="letter"] .gate-menu.app-menu,
  body[data-view="game"] .gate-menu.app-menu,
  body:has(.site-shell[data-view="zungk"]) .gate-menu.app-menu,
  body:has(.site-shell[data-view="letter"]) .gate-menu.app-menu,
  body[data-view="vrown"][data-active-view="vrownnnn"].is-yb-about-in-view .gate-menu.app-menu {
    --app-menu-top-gap: 10px;
    --app-menu-edge-gap: 12px;
    width: min(164px, calc(100vw - 24px - env(safe-area-inset-right, 0px))) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px - env(safe-area-inset-right, 0px)) !important;
  }

  body[data-view="zungk"] .gate-menu.app-menu:not(.is-open) {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
  }

  body[data-view="zungk"] .gate-menu.app-menu.is-open {
    width: min(164px, calc(100vw - 24px - env(safe-area-inset-right, 0px))) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px - env(safe-area-inset-right, 0px)) !important;
  }

  body .gate-menu.app-menu .app-menu-items,
  body[data-view="home"] .gate-menu.app-menu .app-menu-items,
  body[data-view="vrown"] .gate-menu.app-menu .app-menu-items,
  body[data-view="zungk"] .gate-menu.app-menu .app-menu-items,
  body[data-view="letter"] .gate-menu.app-menu .app-menu-items,
  body[data-view="game"] .gate-menu.app-menu .app-menu-items {
    max-height: calc(100svh - var(--happly-banner-height, 0px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 76px) !important;
  }
}

/* VROWN 3 mobile top spacing pass: reduce the oversized opening gap. */
@media (max-width: 620px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-hero {
    align-content: start !important;
    gap: clamp(28px, 7.2vw, 34px) !important;
    min-height: clamp(510px, 62svh, 560px) !important;
    padding: calc(env(safe-area-inset-top, 0px) + 104px) 18px 26px !important;
    place-items: start center !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-logo {
    --touchy-size: clamp(88px, 24vw, 116px);
    width: min(352px, 100%);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-mobile-intro {
    display: block;
    max-width: min(326px, 100%);
    margin: 0 auto;
    font-family: Inter, Arial, sans-serif;
    font-size: clamp(14px, 3.85vw, 16px);
    font-weight: 600;
    line-height: 1.36;
    letter-spacing: 0;
    text-align: center;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-vrown-intro-strip {
    display: none !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yellowbird-tv {
    padding-top: 8px !important;
  }
}

/* ZUNGK object popup: strong black close tile with a yellow X. */
body[data-view="zungk"] .wf-detail-card .wf-close {
  right: 18px !important;
  top: 18px !important;
  width: 42px !important;
  height: 42px !important;
  border: 2px solid #050505 !important;
  border-radius: 0 !important;
  background: #050505 !important;
  color: #fef019 !important;
  box-shadow: 5px 5px 0 #fef019 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  transform: rotate(-2deg);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease !important;
}

body[data-view="zungk"] .wf-detail-card .wf-close:hover,
body[data-view="zungk"] .wf-detail-card .wf-close:focus-visible {
  color: #fef019 !important;
  box-shadow: 7px 7px 0 #fef019 !important;
  transform: rotate(5deg) scale(1.04);
}

body[data-view="zungk"] .wf-detail-card .wf-close:focus-visible {
  outline: 3px solid #050505 !important;
  outline-offset: 3px !important;
}

/* VROWN 3: keep the shared hamburger anchored while the menu opens below it. */
body[data-view="vrown"][data-active-view="vrownnnn"] .gate-menu.app-menu,
body[data-view="vrown"][data-active-view="vrownnnn"].is-yb-about-in-view .gate-menu.app-menu {
  --vrown3-menu-top-gap: clamp(10px, 1.1vw, 16px);
  --vrown3-menu-edge-gap: clamp(14px, 2vw, 34px);
  --vrown3-menu-content-edge: calc((100vw - 1366px) / 2 + clamp(18px, 1.7vw, 30px));
  --vrown3-menu-right: max(calc(env(safe-area-inset-right, 0px) + var(--vrown3-menu-edge-gap)), var(--vrown3-menu-content-edge));
  position: fixed !important;
  top: calc(var(--happly-banner-height, 0px) + env(safe-area-inset-top, 0px) + var(--vrown3-menu-top-gap)) !important;
  right: var(--vrown3-menu-right) !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  z-index: 40000 !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .gate-menu.app-menu.is-open,
body[data-view="vrown"][data-active-view="vrownnnn"].is-yb-about-in-view .gate-menu.app-menu.is-open {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .gate-menu.app-menu .app-menu-toggle {
  position: relative !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  pointer-events: auto !important;
  transform: none !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .gate-menu.app-menu .app-menu-items {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: clamp(176px, 14vw, 224px) !important;
  min-width: 176px !important;
  max-width: calc(100vw - 28px - env(safe-area-inset-right, 0px)) !important;
  max-height: calc(100svh - var(--happly-banner-height, 0px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 88px) !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 7px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  pointer-events: auto !important;
  transform: none !important;
  z-index: 40001 !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .gate-menu.app-menu .app-menu-items[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .gate-menu.app-menu,
  body[data-view="vrown"][data-active-view="vrownnnn"].is-yb-about-in-view .gate-menu.app-menu {
    --vrown3-menu-top-gap: clamp(10px, 2vw, 14px);
    --vrown3-menu-edge-gap: clamp(12px, 2.4vw, 20px);
    --vrown3-menu-right: calc(env(safe-area-inset-right, 0px) + var(--vrown3-menu-edge-gap));
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .gate-menu.app-menu .app-menu-items {
    width: clamp(166px, 28vw, 200px) !important;
    min-width: 166px !important;
    max-width: calc(100vw - 24px - env(safe-area-inset-right, 0px)) !important;
  }
}

@media (max-width: 640px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .gate-menu.app-menu,
  body[data-view="vrown"][data-active-view="vrownnnn"].is-yb-about-in-view .gate-menu.app-menu {
    --vrown3-menu-top-gap: 10px;
    --vrown3-menu-edge-gap: 12px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .gate-menu.app-menu .app-menu-items {
    top: calc(100% + 8px) !important;
    width: min(164px, calc(100vw - 24px - env(safe-area-inset-right, 0px))) !important;
    min-width: 0 !important;
    max-height: calc(100svh - var(--happly-banner-height, 0px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 76px) !important;
  }
}

/* VROWN 3 note arrows: keep navigation fixed at the section's vertical center. */
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title {
  position: relative !important;
  grid-template-rows: auto auto !important;
  min-height: clamp(560px, 66svh, 620px) !important;
  align-content: center !important;
  row-gap: clamp(28px, 3.2vw, 48px) !important;
  padding: clamp(48px, 5vw, 72px) clamp(40px, 6.4vw, 82px) clamp(38px, 4.4vw, 62px) !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title blockquote {
  align-self: center !important;
  width: min(980px, calc(100vw - clamp(116px, 18vw, 196px))) !important;
  max-width: min(980px, calc(100vw - clamp(116px, 18vw, 196px))) !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title blockquote p {
  max-width: 100% !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title .va-word-bird-arrow {
  top: 50% !important;
  bottom: auto !important;
  width: clamp(56px, 6vw, 86px) !important;
  height: clamp(44px, 5vw, 62px) !important;
  font-size: clamp(38px, 5vw, 54px) !important;
  transform: translateY(-50%) !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title .va-word-bird-arrow:hover,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title .va-word-bird-arrow:focus-visible {
  transform: translateY(-50%) translateX(var(--word-arrow-nudge, 0)) !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title .va-word-bird-prev {
  left: clamp(10px, 3vw, 34px) !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title .va-word-bird-next {
  right: clamp(10px, 3vw, 34px) !important;
}

@media (max-width: 1180px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title {
    min-height: clamp(540px, 64svh, 580px) !important;
    row-gap: clamp(24px, 3vw, 36px) !important;
    padding: clamp(44px, 5vw, 58px) clamp(32px, 5vw, 56px) clamp(34px, 4.2vw, 48px) !important;
  }
}

@media (max-width: 820px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    min-height: clamp(520px, 58svh, 620px) !important;
    align-content: center !important;
    row-gap: 18px !important;
    padding: 38px 24px 28px !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title .va-word-bird-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title blockquote {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: min(100%, calc(100vw - 56px)) !important;
    max-width: min(100%, calc(100vw - 56px)) !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title blockquote p {
    font-size: clamp(32px, 6vw, 40px) !important;
    line-height: 1.04 !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title .va-word-bird-arrow {
    position: static !important;
    grid-row: 3 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 54px !important;
    height: 40px !important;
    font-size: 34px !important;
    transform: none !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title .va-word-bird-arrow:hover,
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title .va-word-bird-arrow:focus-visible {
    transform: translateX(var(--word-arrow-nudge, 0)) !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title .va-word-bird-prev {
    grid-column: 1 !important;
    justify-self: end !important;
    margin-right: 14px !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title .va-word-bird-next {
    grid-column: 2 !important;
    justify-self: start !important;
    margin-left: 14px !important;
  }
}

@media (max-width: 620px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title {
    min-height: clamp(330px, 44svh, 420px) !important;
    row-gap: 14px !important;
    padding: 32px 20px 26px !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title blockquote {
    width: min(100%, calc(100vw - 40px)) !important;
    max-width: min(100%, calc(100vw - 40px)) !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title blockquote p {
    font-size: clamp(30px, 8.2vw, 38px) !important;
  }
}

@media (max-width: 420px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title {
    min-height: clamp(320px, 43svh, 380px) !important;
    row-gap: 12px !important;
    padding: 30px 16px 24px !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title blockquote {
    width: min(100%, calc(100vw - 32px)) !important;
    max-width: min(100%, calc(100vw - 32px)) !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird-with-title blockquote p {
    font-size: clamp(28px, 8vw, 34px) !important;
  }
}

/* VROWN 3 yellow unification: match the HOME surface yellow exactly. */
body[data-view="vrown"][data-active-view="vrownnnn"] {
  --vrown3-home-yellow: #fef019;
  --vrown-page-yellow: #fef019;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-hero,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-vrown-intro-strip,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yellowbird-tv,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-word-bird,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-player-card,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-toggle,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-skip,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-card,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-front,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-flip-back,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-work-after-intro,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-work-after-intro .va-work-carousel,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-work-after-intro .va-work-rail,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-work-after-intro .va-work-card,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-work-after-intro .va-v-object-slide img,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-membership,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-community,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-footer {
  background: var(--vrown3-home-yellow) !important;
  background-color: var(--vrown3-home-yellow) !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-quote {
  --yb-quote-yellow: var(--vrown3-home-yellow) !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends {
  --yb-about-yellow: var(--vrown3-home-yellow) !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word h2 span,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-membership-marquee,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-community h2,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-community p,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-footer,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band-green,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band-green .va-cassette-icon,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-button,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-word,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-footer-mark {
  color: var(--vrown3-home-yellow) !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word-badge::before,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-band-yellow,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-button:hover,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-md-kicker {
  background: var(--vrown3-home-yellow) !important;
  background-color: var(--vrown3-home-yellow) !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-footer-button {
  border-color: var(--vrown3-home-yellow) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vrown3-home-yellow) 16%, transparent) !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-shape path,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card.is-hovered .va-yb-promise-shape path,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-card:focus-visible .va-yb-promise-shape path,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-cta {
  background: var(--vrown3-home-yellow) !important;
  background-color: var(--vrown3-home-yellow) !important;
  fill: var(--vrown3-home-yellow) !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-cta {
  color: #050505 !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-cta:hover,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-cta:focus-visible {
  background: #050505 !important;
  background-color: #050505 !important;
  color: var(--vrown3-home-yellow) !important;
  box-shadow: 0 2px 0 var(--vrown3-home-yellow) !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise-cta:focus-visible {
  outline-color: var(--vrown3-home-yellow) !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-badge::before {
  background:
    radial-gradient(circle at 37% 34%, #050505 0 4px, transparent 4.5px),
    radial-gradient(circle at 60% 31%, #050505 0 4px, transparent 4.5px),
    radial-gradient(circle at 34% 31%, var(--vrown3-home-yellow) 0 1.5px, transparent 2px),
    radial-gradient(circle at 57% 28%, var(--vrown3-home-yellow) 0 1.5px, transparent 2px),
    var(--vrown3-home-yellow) !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-cassette-services::after {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 68%, rgba(255, 255, 255, 0.1) 0 1px, transparent 2px),
    linear-gradient(180deg, #050505 0 calc(100% - clamp(14px, 1.45vw, 22px)), var(--vrown3-home-yellow) calc(100% - clamp(14px, 1.45vw, 22px)) 100%) !important;
  background-size: 19px 19px, 31px 31px, auto !important;
}

/* VROWN 3 footbar: restore the existing bottom info instead of adding a new footer. */
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-membership#vnnn-network {
  position: relative;
  z-index: 6000 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.8vw, 34px);
  min-height: 0;
  padding: clamp(28px, 4.4vw, 56px) clamp(18px, 5vw, 72px) calc(env(safe-area-inset-bottom, 0px) + clamp(20px, 3vw, 38px));
  overflow: hidden;
  color: #f8f1dd !important;
  background: #050505 !important;
  background-color: #050505 !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-membership#vnnn-network .va-membership-marquee {
  display: flex;
  width: max-content;
  min-width: 0;
  gap: clamp(22px, 4vw, 58px);
  padding: 0 0 clamp(12px, 2vw, 24px);
  color: var(--vrown3-home-yellow) !important;
  background: transparent !important;
  background-color: transparent !important;
  animation-duration: 22s;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-membership#vnnn-network .va-membership-marquee span {
  color: var(--vrown3-home-yellow) !important;
  font-size: clamp(34px, 8vw, 112px);
  line-height: 0.78;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-membership#vnnn-network .va-community {
  display: flex;
  grid-template-columns: none;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 42px);
  padding: clamp(18px, 2.8vw, 34px) 0 0;
  color: #f8f1dd !important;
  background: transparent !important;
  background-color: transparent !important;
  border-top: 1px solid rgba(248, 241, 221, 0.28);
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-membership#vnnn-network .va-community h2 {
  max-width: 760px;
  min-width: 0;
  color: #f8f1dd !important;
  font-size: clamp(34px, 6.2vw, 84px);
  line-height: 0.88;
  overflow-wrap: anywhere;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-membership#vnnn-network .va-community p {
  max-width: 260px;
  min-width: 0;
  color: rgba(248, 241, 221, 0.82) !important;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.22;
  overflow-wrap: anywhere;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-membership#vnnn-network .va-footer {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  justify-content: space-between;
  gap: 10px clamp(14px, 2.4vw, 30px);
  padding: clamp(14px, 2vw, 24px) 0 0;
  color: rgba(248, 241, 221, 0.72) !important;
  background: transparent !important;
  background-color: transparent !important;
  border-top: 1px solid rgba(248, 241, 221, 0.2);
  font-size: clamp(10px, 0.9vw, 12px);
  line-height: 1.25;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-membership#vnnn-network .va-footer span {
  min-width: 0;
  color: inherit !important;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-membership#vnnn-network {
    gap: 18px;
    padding: 28px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-membership#vnnn-network .va-membership-marquee span {
    font-size: clamp(42px, 15vw, 68px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-membership#vnnn-network .va-community {
    display: grid;
    gap: 12px;
    padding-top: 18px;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-membership#vnnn-network .va-community h2 {
    font-size: clamp(38px, 12vw, 54px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-membership#vnnn-network .va-community p {
    max-width: 100%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-membership#vnnn-network .va-footer {
    justify-content: flex-start;
  }
}

/* VROWN 3 top alignment: prevent the shared view padding from creating a yellow strip under the fixed banner. */
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn.view.vrown-view.vrownnnn-view {
  padding-top: 0 !important;
}

/* VROWN 3 responsive opening rhythm: logo, intro copy, and video stay close on smaller screens. */
@media (max-width: 1180px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-hero {
    min-height: clamp(480px, 60svh, 620px) !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(58px, 6.4svh, 82px)) !important;
    padding-bottom: clamp(26px, 3.6svh, 48px) !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-logo {
    --touchy-size: clamp(106px, 18.4vw, 224px) !important;
    width: min(920px, calc(100vw - 36px)) !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-vrown-intro-strip {
    min-height: clamp(250px, 34svh, 360px) !important;
    padding-top: clamp(36px, 4.8vw, 64px) !important;
    padding-bottom: clamp(34px, 5vw, 62px) !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yellowbird-tv {
    padding-top: clamp(10px, 1.7vw, 18px) !important;
  }
}

@media (max-width: 900px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-hero {
    min-height: clamp(520px, 58svh, 620px) !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(62px, 7.4svh, 86px)) !important;
    padding-bottom: clamp(16px, 3svh, 28px) !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-logo {
    --touchy-size: clamp(84px, 18vw, 150px) !important;
    width: min(680px, calc(100vw - 34px)) !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-vrown-intro-strip {
    min-height: clamp(190px, 24svh, 260px) !important;
    padding-top: clamp(24px, 3.8vw, 42px) !important;
    padding-bottom: clamp(24px, 4vw, 42px) !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-vrown-intro-strip p {
    font-size: clamp(24px, 4.5vw, 40px) !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yellowbird-tv {
    padding-top: clamp(6px, 1.4vw, 12px) !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-frame {
    width: min(100%, calc(100vw - 20px)) !important;
  }
}

@media (max-width: 620px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-hero {
    gap: clamp(16px, 4.8vw, 22px) !important;
    min-height: auto !important;
    padding: calc(env(safe-area-inset-top, 0px) + 72px) 18px 34px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-logo {
    --touchy-size: clamp(44px, 11.5vw, 58px) !important;
    width: min(326px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 36px) !important;
    transform: translateX(-2px);
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-line-vrown {
    margin-top: -0.08em !important;
    transform: translateX(0.01em) translateY(10px) rotate(0.8deg) !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-mobile-intro {
    display: block !important;
    max-width: min(318px, calc(100vw - 38px)) !important;
    margin: clamp(6px, 1.6vw, 10px) auto 0 !important;
    font-size: clamp(13px, 3.55vw, 15px) !important;
    line-height: 1.34 !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-vrown-intro-strip {
    display: none !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yellowbird-tv {
    padding: clamp(12px, 3.8vw, 22px) 9px 0 !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-frame {
    width: calc(100vw - 18px) !important;
    aspect-ratio: 16 / 10.8 !important;
    border-radius: 18px !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-video-stage {
    inset: 0 0 clamp(92px, 24vw, 112px) !important;
  }
}

@media (max-width: 420px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-hero {
    gap: clamp(12px, 4.2vw, 18px) !important;
    padding: calc(env(safe-area-inset-top, 0px) + 50px) 16px 26px !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-logo {
    --touchy-size: clamp(42px, 11.7vw, 50px) !important;
    width: calc(100vw - 26px) !important;
    max-width: 318px !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-mobile-intro {
    max-width: calc(100vw - 52px) !important;
    font-size: clamp(12.5px, 3.45vw, 14px) !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yellowbird-tv {
    padding-top: 10px !important;
  }
}

@media (min-width: 621px) and (max-width: 900px) and (max-height: 720px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-hero {
    min-height: auto !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(46px, 8svh, 70px)) !important;
    padding-bottom: clamp(18px, 3svh, 28px) !important;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-logo {
    --touchy-size: clamp(68px, 14.5vw, 118px) !important;
  }
}

/* VROWN 3 - remove the hard divider under the opening title. */
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-hero,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-vrown-intro-strip,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yellowbird-tv {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-hero::before,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-hero::after,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-vrown-intro-strip::before,
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-vrown-intro-strip::after {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* VROWN 3 opening balance: center the title on large screens and portrait tablets. */
@media (min-width: 1181px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-hero {
    align-items: center;
  }
}

@media (min-width: 621px) and (max-width: 900px) and (min-height: 721px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-touchy-hero {
    align-items: center;
  }
}

/* LETTER menu cleanup: remove the stray white shell behind the hamburger. */
body[data-view="letter"] .gate-menu.app-menu {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-view="letter"] .gate-menu.app-menu .app-menu-toggle,
body[data-view="letter"] .gate-menu.app-menu .app-menu-toggle:hover,
body[data-view="letter"] .gate-menu.app-menu .app-menu-toggle:focus-visible {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* itsy bitzy page */
body[data-view="itsy-bitzy"] {
  background: #fef019;
}

.itsy-bitzy-view {
  min-height: 100vh;
  padding: clamp(86px, 10vw, 132px) clamp(18px, 5vw, 72px) clamp(54px, 7vw, 88px);
  background: #fef019;
  color: #101010;
}

.itsy-bitzy-gallery {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
}

.itsy-bitzy-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.itsy-bitzy-kicker {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.itsy-bitzy-view h1 {
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(48px, 8vw, 118px);
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: lowercase;
}

.itsy-bitzy-featured-video,
.itsy-bitzy-thumb-video {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 4px solid #101010;
  background: #101010;
  box-shadow: 8px 8px 0 #101010;
}

.itsy-bitzy-featured-video {
  aspect-ratio: 16 / 9;
}

.itsy-bitzy-thumb-video {
  aspect-ratio: 16 / 9;
  box-shadow: 5px 5px 0 #101010;
}

.itsy-bitzy-featured-video iframe,
.itsy-bitzy-thumb-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.itsy-bitzy-video-frame iframe {
  pointer-events: none;
}

.itsy-bitzy-video-frame.is-video-control-active iframe {
  pointer-events: auto;
}

.itsy-bitzy-cursor-shield {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: none;
}

.itsy-bitzy-video-frame.is-video-control-active .itsy-bitzy-cursor-shield {
  pointer-events: none;
}

.itsy-bitzy-cursor-shield:focus-visible {
  outline: 3px solid #ff5fa2;
  outline-offset: -8px;
}

.itsy-bitzy-playlist-bar {
  position: absolute;
  top: clamp(10px, 1.7vw, 20px);
  right: clamp(10px, 1.7vw, 20px);
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "copy meta"
    "dots dots"
    "progress progress";
  align-items: center;
  width: min(340px, calc(100% - 24px));
  padding: clamp(10px, 1.3vw, 14px) clamp(12px, 1.6vw, 18px) clamp(10px, 1.2vw, 13px);
  border: 3px solid #101010;
  border-radius: 18px;
  background: #fef019;
  color: #101010;
  box-shadow: 5px 5px 0 #101010;
  column-gap: 14px;
  row-gap: 8px;
  pointer-events: none;
}

.itsy-bitzy-playlist-copy {
  grid-area: copy;
  min-width: 0;
}

.itsy-bitzy-playlist-copy p,
.itsy-bitzy-playlist-meta {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(10px, 0.9vw, 12px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.itsy-bitzy-playlist-copy p {
  margin-bottom: 5px;
}

.itsy-bitzy-playlist-copy h2 {
  margin: 0;
  overflow: hidden;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(20px, 2.15vw, 30px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.itsy-bitzy-playlist-meta {
  grid-area: meta;
  justify-self: end;
  align-self: start;
  padding-top: 2px;
  white-space: nowrap;
}

.itsy-bitzy-playlist-dots {
  grid-area: dots;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.itsy-bitzy-playlist-dots span {
  display: block;
  height: 8px;
  border: 2px solid #101010;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
}

.itsy-bitzy-playlist-dots span.is-active {
  background: #ff5fa2;
}

.itsy-bitzy-playlist-progress {
  grid-area: progress;
  height: 7px;
  overflow: hidden;
  border: 2px solid #101010;
  border-radius: 999px;
  background: rgba(16, 16, 16, 0.16);
}

.itsy-bitzy-playlist-progress span {
  display: block;
  width: 14.285%;
  height: 100%;
  background: #101010;
}

@media (max-width: 680px) {
  .itsy-bitzy-playlist-bar {
    top: 8px;
    right: 8px;
    width: min(245px, calc(100% - 16px));
    padding: 8px 10px;
    border-width: 2px;
    border-radius: 14px;
    box-shadow: 3px 3px 0 #101010;
    row-gap: 6px;
  }

  .itsy-bitzy-playlist-copy h2 {
    font-size: 18px;
  }

  .itsy-bitzy-playlist-meta {
    font-size: 9px;
  }

  .itsy-bitzy-playlist-dots {
    gap: 3px;
  }

  .itsy-bitzy-playlist-dots span {
    height: 6px;
    border-width: 1px;
  }

  .itsy-bitzy-playlist-progress {
    height: 6px;
    border-width: 1px;
  }
}

.itsy-bitzy-video-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}

@media (max-width: 900px) {
  .itsy-bitzy-header {
    display: grid;
    justify-items: start;
  }

  .itsy-bitzy-video-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .itsy-bitzy-view {
    padding-inline: 16px;
  }

  .itsy-bitzy-view h1 {
    font-size: clamp(44px, 16vw, 76px);
  }

  .itsy-bitzy-video-row {
    grid-template-columns: 1fr;
  }
}

.itsy-bitzy-shorts {
  display: grid;
  gap: clamp(12px, 1.8vw, 18px);
}

.itsy-bitzy-shorts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.itsy-bitzy-shorts-count {
  min-width: 72px;
  border: 3px solid #101010;
  background: #fff;
  padding: 8px 10px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  box-shadow: 4px 4px 0 #101010;
}

.itsy-bitzy-shorts-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
}

.itsy-bitzy-carousel-button {
  display: grid;
  place-items: center;
  width: clamp(42px, 4vw, 54px);
  height: clamp(54px, 6vw, 76px);
  border: 3px solid #101010;
  border-radius: 0;
  background: #fff;
  color: #101010;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
  box-shadow: 5px 5px 0 #101010;
  cursor: pointer;
}

.itsy-bitzy-carousel-button:hover,
.itsy-bitzy-carousel-button:focus-visible {
  background: #ff5fa2;
  outline: none;
  transform: translate(-1px, -1px);
}

.itsy-bitzy-video-row[data-itsy-shorts-track] {
  display: flex;
  grid-template-columns: none;
  gap: clamp(14px, 1.8vw, 22px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-color: #101010 transparent;
  padding: 2px 6px 14px;
}

.itsy-bitzy-video-row[data-itsy-shorts-track]:focus-visible {
  outline: 3px solid #101010;
  outline-offset: 6px;
}

.itsy-bitzy-thumb-video[data-itsy-short-slide] {
  flex: 0 0 clamp(190px, 24vw, 292px);
  aspect-ratio: 9 / 16;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  box-shadow: 6px 6px 0 #101010;
}

@media (max-width: 760px) {
  .itsy-bitzy-shorts-shell {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 8px;
  }

  .itsy-bitzy-carousel-button {
    width: 38px;
    height: 54px;
    font-size: 26px;
    box-shadow: 3px 3px 0 #101010;
  }

  .itsy-bitzy-thumb-video[data-itsy-short-slide] {
    flex-basis: min(72vw, 310px);
  }
}
/* VROWN 3 video performance pass: keep video playback smooth while deferring below-the-fold work. */
@supports (content-visibility: auto) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-word,
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-word-bird,
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-about,
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-work-after-intro,
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends,
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-promise,
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-membership {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
  }
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-yb-progress span {
  transition: none !important;
}
/* VROWN ZUNGK object stickers: keep the statement readable while objects hug the edges. */
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-one {
  left: 0;
  top: 4%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-two {
  right: 0;
  top: 4%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-three {
  left: 7%;
  bottom: -8%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-four {
  right: 8%;
  bottom: -8%;
}

body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-five {
  top: -1%;
}

@media (max-width: 620px) {
  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-one {
    left: -14%;
    top: -2%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-two {
    right: -15%;
    top: 0;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-three {
    left: -14%;
    bottom: -10%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-four {
    right: -11%;
    bottom: -8%;
  }

  body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-proof-after-v-friends .va-zungk-sticker-five {
    top: -10%;
  }
}
/* LETTER ID issue desk and draggable floor archive. */
body[data-view="letter"] {
  background:
    linear-gradient(90deg, rgba(17, 17, 20, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17, 17, 20, 0.04) 1px, transparent 1px),
    #f5efe4 !important;
  background-size: 32px 32px;
  color: #111114;
}

body[data-view="letter"] .letter-id-shell {
  min-height: 100vh;
  padding: clamp(88px, 8vw, 126px) clamp(14px, 4vw, 56px) clamp(54px, 7vw, 96px);
}

body[data-view="letter"] .letter-id-panel {
  width: min(1440px, 100%);
  margin: 0 auto;
}

body[data-view="letter"] .letter-id-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(18px, 3vw, 38px);
  border-bottom: 3px solid #111114;
  padding-bottom: 14px;
}

body[data-view="letter"] .letter-id-topbar p,
body[data-view="letter"] .letter-feed-summary,
body[data-view="letter"] .letter-issue-status {
  margin: 0;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(8px, 0.8vw, 11px);
  line-height: 1.55;
  letter-spacing: 0;
}

body[data-view="letter"] .letter-id-topbar h1 {
  margin: 5px 0 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(56px, 10vw, 150px);
  line-height: 0.82;
  letter-spacing: 0;
}

body[data-view="letter"] .letter-id-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body[data-view="letter"] .letter-id-actions button,
body[data-view="letter"] .letter-issue-tabs button,
body[data-view="letter"] .letter-draw-tools button,
body[data-view="letter"] .letter-submit-message,
body[data-view="letter"] .letter-floor-open,
body[data-view="letter"] .letter-card-viewer-card > button {
  min-height: 38px;
  border: 2px solid #111114;
  border-radius: 0;
  background: #fff;
  color: #111114;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 #111114;
  cursor: pointer;
}

body[data-view="letter"] .letter-id-actions button,
body[data-view="letter"] .letter-issue-tabs button,
body[data-view="letter"] .letter-draw-tools button {
  padding: 0 12px;
}

body[data-view="letter"] .letter-issue-tabs .is-active,
body[data-view="letter"] .letter-draw-tools .is-active {
  background: #fef019;
}

body[data-view="letter"] .letter-id-panel[data-mode="issue"] .letter-feed-summary,
body[data-view="letter"] .letter-id-panel[data-mode="issue"] .letter-floor {
  display: none !important;
}

body[data-view="letter"] .letter-id-panel[data-mode="archive"] .letter-id-issuer {
  display: none !important;
}

body[data-view="letter"] .letter-id-issuer {
  display: grid;
  grid-template-columns: minmax(300px, 0.86fr) minmax(320px, 1fr);
  gap: clamp(18px, 3vw, 42px);
  align-items: start;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-view="letter"] .letter-issue-preview,
body[data-view="letter"] .letter-issue-desk {
  min-width: 0;
}

body[data-view="letter"] .letter-id-card-preview,
body[data-view="letter"] .letter-viewer-pass {
  --card-bg: #e3f3fb;
  --card-fg: #111114;
  position: relative;
  overflow: hidden;
  min-height: clamp(460px, 48vw, 620px);
  border: 3px solid #111114;
  border-radius: 8px;
  padding: clamp(18px, 2vw, 28px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 42%),
    var(--card-bg);
  color: var(--card-fg);
  box-shadow: 10px 12px 0 rgba(17, 17, 20, 0.88);
}

body[data-view="letter"] .letter-id-card-preview.is-issuing {
  animation: letterIssueStamp 0.78s steps(2, end);
}

body[data-view="letter"] .letter-id-card-head,
body[data-view="letter"] .letter-floor-card-head,
body[data-view="letter"] .letter-viewer-pass header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid currentColor;
  padding-bottom: 10px;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(8px, 0.95vw, 12px);
  line-height: 1.35;
}

body[data-view="letter"] .letter-id-card-photo {
  position: absolute;
  right: clamp(18px, 2vw, 30px);
  top: clamp(72px, 8vw, 104px);
  display: grid;
  place-items: center;
  width: clamp(92px, 12vw, 148px);
  aspect-ratio: 1;
  border: 2px solid currentColor;
  background: rgba(255, 255, 255, 0.72);
}

body[data-view="letter"] .letter-id-card-photo img {
  width: 76%;
  height: 76%;
  object-fit: contain;
}

body[data-view="letter"] .letter-id-card-lines {
  display: grid;
  gap: 10px;
  max-width: calc(100% - clamp(120px, 16vw, 190px));
  margin-top: clamp(26px, 4vw, 54px);
}

body[data-view="letter"] .letter-id-card-lines p {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  border-bottom: 2px solid currentColor;
  padding-bottom: 7px;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(8px, 0.9vw, 12px);
  line-height: 1.35;
}

body[data-view="letter"] .letter-id-card-lines strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="letter"] .letter-id-card-message {
  position: absolute;
  left: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  bottom: clamp(18px, 2vw, 28px);
  min-height: clamp(170px, 19vw, 230px);
  border: 2px solid currentColor;
  padding: 14px;
  background: rgba(255, 255, 255, 0.62);
}

body[data-view="letter"] .letter-id-card-message span,
body[data-view="letter"] .letter-id-card-lines span {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 9px;
}

body[data-view="letter"] .letter-id-card-message p {
  margin: 12px 0 0;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 900;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

body[data-view="letter"] .letter-id-card-message img,
body[data-view="letter"] .letter-viewer-drawing,
body[data-view="letter"] .letter-floor-drawing {
  display: block;
  max-width: 100%;
  margin-top: 10px;
  border: 2px solid currentColor;
  background: rgba(255, 255, 255, 0.68);
}

body[data-view="letter"] .letter-id-stamp {
  position: absolute;
  right: clamp(18px, 2.4vw, 36px);
  bottom: clamp(158px, 18vw, 220px);
  display: grid;
  place-items: center;
  width: clamp(68px, 8vw, 108px);
  aspect-ratio: 1;
  border: 3px solid #ef3558;
  border-radius: 50%;
  color: #ef3558;
  font-size: clamp(30px, 4vw, 54px);
  transform: rotate(-12deg);
}

body[data-view="letter"] .letter-issue-desk {
  display: grid;
  gap: 14px;
  border: 3px solid #111114;
  border-radius: 8px;
  padding: clamp(16px, 2vw, 26px);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 8px 10px 0 rgba(17, 17, 20, 0.82);
}

body[data-view="letter"] .letter-issue-tabs,
body[data-view="letter"] .letter-draw-tools,
body[data-view="letter"] .letter-issue-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

body[data-view="letter"] .letter-issue-field {
  display: grid;
  gap: 8px;
}

body[data-view="letter"] .letter-issue-field label,
body[data-view="letter"] .letter-composer-head {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 10px;
  line-height: 1.45;
}

body[data-view="letter"] .letter-composer-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

body[data-view="letter"] .letter-issue-field input,
body[data-view="letter"] .letter-id-issuer textarea {
  width: 100%;
  border: 2px solid #111114;
  border-radius: 0;
  background: #fff;
  color: #111114;
  box-shadow: inset 2px 2px 0 rgba(17, 17, 20, 0.12);
}

body[data-view="letter"] .letter-issue-field input {
  min-height: 44px;
  padding: 0 12px;
  font: 900 18px/1.1 "Trebuchet MS", Arial, sans-serif;
}

body[data-view="letter"] .letter-id-issuer textarea {
  min-height: 150px;
  padding: 14px;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(21px, 2.4vw, 32px);
  font-weight: 900;
  line-height: 1.12;
  resize: vertical;
}

body[data-view="letter"] .letter-draw-pane canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 3px solid #111114;
  background:
    linear-gradient(90deg, rgba(17, 17, 20, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17, 17, 20, 0.06) 1px, transparent 1px),
    #fffdf6;
  background-size: 20px 20px;
  cursor: crosshair;
  touch-action: none;
}

body[data-view="letter"] .letter-color-grid {
  display: grid;
  flex: 1 1 260px;
  grid-template-columns: repeat(16, minmax(14px, 1fr));
  gap: 5px;
}

body[data-view="letter"] .letter-color-swatch {
  min-height: 22px;
  border: 2px solid #111114;
  border-radius: 0;
  background: var(--swatch-bg);
  cursor: pointer;
}

body[data-view="letter"] .letter-color-swatch.is-active {
  outline: 3px solid #111114;
  outline-offset: 2px;
}

body[data-view="letter"] .letter-sticker-picker {
  position: relative;
}

body[data-view="letter"] .letter-sticker-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 2px solid #111114;
  border-radius: 0;
  padding: 0 12px;
  background: #fff;
  color: #111114;
  box-shadow: 3px 3px 0 #111114;
}

body[data-view="letter"] .letter-sticker-options {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 42px);
  gap: 6px;
  border: 2px solid #111114;
  padding: 8px;
  background: #fff;
  box-shadow: 4px 4px 0 #111114;
}

body[data-view="letter"] .letter-sticker-options[hidden] {
  display: none;
}

body[data-view="letter"] .letter-sticker-options button {
  min-height: 38px;
  border: 2px solid #111114;
  background: #fff;
  font-size: 20px;
}

body[data-view="letter"] .letter-sticker-options button.is-active {
  background: #fef019;
}

body[data-view="letter"] .letter-submit-message {
  justify-self: end;
  min-width: min(260px, 100%);
  min-height: 50px;
  padding: 0 18px;
  background: #fef019;
}

body[data-view="letter"] .letter-submit-message:disabled {
  background: #ddd6c8;
  color: rgba(17, 17, 20, 0.45);
  cursor: not-allowed;
}

body[data-view="letter"] .letter-feed-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

body[data-view="letter"] .letter-floor {
  position: relative;
  display: block !important;
  overflow: hidden;
  border: 3px solid #111114;
  border-radius: 8px;
  background:
    url("assets/readymag-ref/01-cassette.webp") 4% 8% / 150px auto no-repeat,
    url("assets/readymag-ref/17-key-tag.webp") 92% 16% / 104px auto no-repeat,
    url("assets/readymag-ref/08-crumpled-paper.webp") 9% 72% / 138px auto no-repeat,
    url("assets/readymag-ref/24-shell.webp") 88% 76% / 130px auto no-repeat,
    linear-gradient(90deg, rgba(17, 17, 20, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17, 17, 20, 0.035) 1px, transparent 1px),
    #efe2c8;
  background-size:
    150px auto,
    104px auto,
    138px auto,
    130px auto,
    28px 28px,
    28px 28px,
    auto;
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.34);
}

body[data-view="letter"] .message.letter-floor-card,
body[data-view="letter"] .message.letter-floor-card:nth-child(even) {
  position: absolute !important;
  left: var(--card-left);
  top: var(--card-top);
  z-index: var(--card-z);
  box-sizing: border-box;
  width: clamp(210px, 20vw, 310px);
  min-height: 260px;
  margin: 0 !important;
  border: 3px solid #111114 !important;
  border-radius: 7px !important;
  padding: 12px !important;
  background: var(--card-bg) !important;
  color: var(--card-fg) !important;
  box-shadow: 8px 10px 0 rgba(17, 17, 20, 0.72) !important;
  cursor: grab;
  touch-action: none;
  transform: rotate(var(--card-rotate)) scale(var(--card-scale));
  transition: box-shadow 160ms ease, transform 160ms ease;
}

body[data-view="letter"] .message.letter-floor-card.is-dragging {
  cursor: grabbing;
  box-shadow: 14px 18px 0 rgba(17, 17, 20, 0.62) !important;
  transform: rotate(0deg) scale(1.04);
}

body[data-view="letter"] .message.letter-floor-card.is-new {
  animation: letterCardDrop 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body[data-view="letter"] .letter-floor-card-body {
  display: grid;
  gap: 8px;
  min-height: 148px;
  padding: 12px 0;
}

body[data-view="letter"] .letter-floor-card-body p {
  margin: 0;
  color: currentColor;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(17px, 1.55vw, 24px);
  font-weight: 900;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

body[data-view="letter"] .letter-floor-card footer {
  display: grid;
  gap: 4px;
  border-top: 2px solid currentColor;
  padding-top: 8px;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 8px;
  line-height: 1.45;
}

body[data-view="letter"] .letter-floor-open {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 28px;
  padding: 0 8px;
  font-size: 8px;
  box-shadow: 2px 2px 0 #111114;
}

body[data-view="letter"] .letter-card-viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
}

body[data-view="letter"] .letter-card-viewer[hidden] {
  display: none;
}

body[data-view="letter"] .letter-card-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 20, 0.52);
}

body[data-view="letter"] .letter-card-viewer-card {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  border: 3px solid #111114;
  border-radius: 8px;
  padding: 14px;
  background: #f5efe4;
  box-shadow: 10px 12px 0 rgba(17, 17, 20, 0.88);
}

body[data-view="letter"] .letter-card-viewer-card > button {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  padding: 0 10px;
}

body[data-view="letter"] .letter-viewer-pass {
  min-height: 520px;
  padding-top: 58px;
}

body[data-view="letter"] .letter-viewer-pass dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 20px 0;
}

body[data-view="letter"] .letter-viewer-pass dl div {
  border: 2px solid currentColor;
  padding: 9px;
}

body[data-view="letter"] .letter-viewer-pass dt,
body[data-view="letter"] .letter-viewer-pass dd {
  margin: 0;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 9px;
  line-height: 1.45;
}

body[data-view="letter"] .letter-viewer-pass dd {
  margin-top: 6px;
  overflow-wrap: anywhere;
}

body[data-view="letter"] .letter-viewer-stamp {
  position: absolute;
  right: 24px;
  top: 74px;
  font-size: 52px;
  transform: rotate(10deg);
}

body[data-view="letter"] .letter-viewer-pass section p {
  margin: 12px 0 0;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 900;
  line-height: 1.1;
}

@keyframes letterIssueStamp {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  38% {
    transform: translateY(8px) rotate(-1deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes letterCardDrop {
  from {
    opacity: 0;
    transform: translateY(-80px) rotate(10deg) scale(1.12);
  }
  to {
    opacity: 1;
    transform: rotate(var(--card-rotate)) scale(var(--card-scale));
  }
}

@media (max-width: 920px) {
  body[data-view="letter"] .letter-id-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-view="letter"] .letter-id-issuer {
    grid-template-columns: 1fr;
  }

  body[data-view="letter"] .letter-color-grid {
    grid-template-columns: repeat(8, minmax(22px, 1fr));
  }

  body[data-view="letter"] .message.letter-floor-card,
  body[data-view="letter"] .message.letter-floor-card:nth-child(even) {
    width: clamp(190px, 46vw, 280px);
  }
}

@media (max-width: 560px) {
  body[data-view="letter"] .letter-id-shell {
    padding: 84px 10px 46px;
  }

  body[data-view="letter"] .letter-id-topbar h1 {
    font-size: clamp(48px, 18vw, 82px);
  }

  body[data-view="letter"] .letter-id-card-lines {
    max-width: 100%;
    margin-top: 170px;
  }

  body[data-view="letter"] .letter-id-card-photo {
    left: 18px;
    right: auto;
  }

  body[data-view="letter"] .letter-id-stamp {
    bottom: 178px;
  }

  body[data-view="letter"] .letter-feed-summary {
    flex-direction: column;
  }

  body[data-view="letter"] .message.letter-floor-card,
  body[data-view="letter"] .message.letter-floor-card:nth-child(even) {
    width: 220px;
  }
}
/* LETTER ID composer revision: one writable card, no split editor. */
body[data-view="letter"] .letter-id-issuer {
  display: flex !important;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  margin: 0 auto clamp(28px, 4vw, 54px);
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body[data-view="letter"] .letter-id-composer-card {
  --card-bg: #e3f3fb;
  --card-fg: #111114;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.28fr);
  gap: clamp(12px, 2vw, 24px);
  width: min(820px, calc(100vw - 28px));
  min-height: 0;
  border: 3px solid #111114;
  border-radius: 8px;
  padding: clamp(16px, 2.6vw, 28px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 46%),
    var(--card-bg);
  color: var(--card-fg);
  box-shadow: 11px 13px 0 rgba(17, 17, 20, 0.86);
}

body[data-view="letter"] .letter-id-composer-card.is-issuing {
  animation: letterIssueStamp 0.78s steps(2, end);
}

body[data-view="letter"] .letter-id-composer-card .letter-id-card-head {
  grid-column: 1 / -1;
}

body[data-view="letter"] .letter-id-composer-card .letter-id-card-photo {
  position: static;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  width: 100%;
  max-width: 148px;
  justify-self: end;
}

body[data-view="letter"] .letter-id-composer-card .letter-id-card-lines {
  grid-column: 1;
  grid-row: 2;
  max-width: none;
  margin-top: 0;
}

body[data-view="letter"] .letter-id-composer-card .letter-id-card-lines p {
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  min-height: 42px;
}

body[data-view="letter"] .letter-id-from-row .letter-from-label {
  position: static !important;
  width: auto !important;
  color: currentColor !important;
  font-family: "Press Start 2P", "Courier New", monospace !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  pointer-events: auto !important;
  transform: none !important;
}

body[data-view="letter"] .letter-id-from-row #letterFrom {
  position: static !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 0 !important;
  border-bottom: 2px solid currentColor !important;
  border-radius: 0 !important;
  padding: 0 2px !important;
  background: transparent !important;
  color: currentColor !important;
  font-family: "Press Start 2P", "Courier New", monospace !important;
  font-size: clamp(10px, 1.2vw, 15px) !important;
  box-shadow: none !important;
  outline: none;
}

body[data-view="letter"] .letter-id-composer-card .letter-id-card-message {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-rows: auto minmax(250px, 1fr);
  gap: 10px;
  min-height: clamp(320px, 36vw, 430px);
  border: 2px solid currentColor;
  padding: clamp(12px, 1.7vw, 18px);
  background:
    linear-gradient(90deg, rgba(17, 17, 20, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17, 17, 20, 0.05) 1px, transparent 1px),
    rgba(255, 255, 255, 0.54);
  background-size: 22px 22px;
}

body[data-view="letter"] .letter-id-card-surface .letter-composer-head {
  position: relative;
  z-index: 3;
  color: currentColor;
}

body[data-view="letter"] .letter-id-card-surface #letterText,
body[data-view="letter"] .letter-id-card-surface #letterDrawCanvas {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  height: 100%;
  min-height: clamp(250px, 28vw, 340px);
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-view="letter"] .letter-id-card-surface #letterText {
  z-index: 2;
  padding: clamp(10px, 1.5vw, 18px) clamp(12px, 1.7vw, 20px);
  color: currentColor;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(23px, 3vw, 40px);
  font-weight: 900;
  line-height: 1.08;
  outline: none;
  resize: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

body[data-view="letter"] .letter-id-card-surface #letterDrawCanvas {
  z-index: 1;
  cursor: crosshair;
  touch-action: none;
}

body[data-view="letter"] .letter-id-issuer[data-input-mode="type"] #letterDrawCanvas {
  pointer-events: none;
}

body[data-view="letter"] .letter-id-issuer[data-input-mode="draw"] #letterText {
  pointer-events: none;
  caret-color: transparent;
}

body[data-view="letter"] .letter-id-card-tools {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto auto auto minmax(180px, 1fr);
  gap: 10px;
  align-items: start;
  border-top: 2px dashed currentColor;
  padding-top: 12px;
}

body[data-view="letter"] .letter-id-card-tools .letter-color-grid {
  grid-template-columns: repeat(8, minmax(18px, 1fr));
  align-self: stretch;
}

body[data-view="letter"] .letter-id-card-issue-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 74px;
}

body[data-view="letter"] .letter-id-composer-card .letter-id-stamp {
  position: static;
  width: 68px;
  font-size: 32px;
  transform: rotate(-9deg);
}

body[data-view="letter"] .letter-id-card-issue-row .letter-submit-message {
  position: static !important;
  justify-self: end;
}

body[data-view="letter"] .letter-id-card-issue-row .letter-issue-status {
  color: currentColor;
}

body[data-view="letter"] .letter-floor {
  overflow: auto;
}

body[data-view="letter"] .message.letter-floor-card,
body[data-view="letter"] .message.letter-floor-card:nth-child(even) {
  left: var(--card-left) !important;
  top: var(--card-top) !important;
}

@media (max-width: 980px) {
  body[data-view="letter"] .letter-id-card-tools {
    grid-template-columns: 1fr 1fr;
  }

  body[data-view="letter"] .letter-id-card-tools .letter-color-grid {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  body[data-view="letter"] .letter-id-composer-card {
    grid-template-columns: 1fr;
  }

  body[data-view="letter"] .letter-id-composer-card .letter-id-card-photo {
    grid-column: 1;
    grid-row: 3;
    width: 112px;
    justify-self: start;
  }

  body[data-view="letter"] .letter-id-composer-card .letter-id-card-message {
    grid-row: 4;
  }

  body[data-view="letter"] .letter-id-card-tools,
  body[data-view="letter"] .letter-id-card-issue-row {
    grid-template-columns: 1fr;
  }

  body[data-view="letter"] .letter-id-card-issue-row .letter-submit-message {
    justify-self: stretch;
  }
}
/* VROWN note: isolate this quote panel from the page-wide yellow treatment. */
body[data-view="vrown"][data-active-view="vrownnnn"] .site-shell[data-view="vrown"] #vrownnnn .va-clone-stage .va-main > .va-word-bird-with-title {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #050505 !important;
}

/* itsy bitzy: full-viewport two-film loop. */
body[data-view="itsy-bitzy"] {
  overflow: hidden;
  background: #000;
}

html:has(body[data-view="itsy-bitzy"]) {
  overflow: hidden;
}

body[data-view="itsy-bitzy"] .itsy-bitzy-view {
  position: fixed;
  inset: var(--happly-banner-height) 0 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.itsy-scroll-viewer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background: #000;
  color: #fff;
  outline: none;
  overscroll-behavior: none;
  touch-action: none;
}

.itsy-scroll-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #000;
  transform: translate3d(0, 100%, 0);
  transition: transform 760ms cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}

.itsy-scroll-panel.is-active,
.itsy-scroll-panel.is-leaving {
  z-index: 2;
}

.itsy-scroll-panel.is-active {
  transform: translate3d(0, 0, 0);
}

.itsy-scroll-panel.is-entering {
  z-index: 3;
}

.itsy-scroll-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.itsy-scroll-media iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.778vh);
  height: max(100%, 56.25vw);
  border: 0;
  transform: translate(-50%, -50%) scale(1.012);
  pointer-events: none;
}

.itsy-scroll-viewer.is-player-fallback .itsy-scroll-media iframe {
  pointer-events: auto;
}

.itsy-scroll-meta {
  position: absolute;
  left: clamp(18px, 2.2vw, 38px);
  bottom: clamp(46px, 4.2vw, 64px);
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.76);
  pointer-events: none;
}

.itsy-scroll-meta strong {
  font: inherit;
  font-weight: 700;
}

.itsy-scroll-meta span {
  opacity: 0.72;
}

.itsy-scroll-controls {
  position: absolute;
  right: clamp(18px, 2.2vw, 38px);
  bottom: clamp(44px, 4vw, 60px);
  z-index: 6;
  display: flex;
  align-items: center;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.76);
}

.itsy-scroll-controls button {
  min-height: 30px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.itsy-scroll-controls button + button {
  border-left: 1px solid rgba(255, 255, 255, 0.64);
}

.itsy-scroll-controls button:hover,
.itsy-scroll-controls button:focus-visible {
  color: #ffe000;
}

.itsy-scroll-controls button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

body[data-view="itsy-bitzy"] .gate-menu.app-menu:not(.is-open) .app-menu-toggle span {
  background: #fff !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.52) !important;
}

@media (max-width: 640px) {
  .itsy-scroll-meta {
    top: 18px;
    bottom: auto;
    font-size: 10px;
  }

  .itsy-scroll-controls {
    right: 10px;
    bottom: max(64px, calc(env(safe-area-inset-bottom) + 48px));
  }

  .itsy-scroll-controls button {
    padding-inline: 9px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .itsy-scroll-panel {
    transition-duration: 1ms;
  }
}