@font-face {
  font-display: swap;
  font-family: Jakarta;
  src: url(assets/fonts/jakarta-regular.woff2);
  font-weight: 400;
}
@font-face {
  font-display: swap;
  font-family: Jakarta;
  src: url(assets/fonts/jakarta-extrabold.woff2);
  font-weight: 700 900;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 30px;
}
body {
  margin: 0;
  background: #d9d9dc;
  font-family: Jakarta, Arial, sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
}
main {
  margin: auto;
}
.playground {
  background: #101014;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
nav {
  position: relative;
  z-index: 10;
  display: flex;
}
.brand {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -1.5px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.brand-mark {
  background: #eeeef5;
  color: #131318;
  border-radius: 12px;
  font-size: 27px;
  width: 34px;
  height: 34px;
  text-align: center;
}
.brand-dot {
  margin-left: -7px;
}
.nav-links {
  display: flex;
  gap: 20px;
  font-size: 11px;
  color: #898991;
}
.nav-links .active {
  color: white;
}
.nav-links .active:after {
  content: "";
  display: block;
  margin: 6px auto -9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d2ef7e;
}
.search {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #ffffff09;
  border: 1px solid #ffffff0b;
  border-radius: 99px;
  max-width: 230px;
}
.search > span {
  font-size: 19px;
  color: #a2a2af;
}
.search input {
  border: 0;
  outline: 0;
  width: 100%;
  background: none;
  color: #fff;
  font-size: 10px;
}
.nav-right {
  margin-left: auto;
  font-size: 10px;
}
.avatar {
  background: #d1ed7d;
  color: #242826;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  transform: rotate(8deg);
  font-weight: 800;
}
.hero-copy {
  text-align: center;
  position: relative;
  z-index: 2;
  margin: 45px auto 0;
  pointer-events: none;
}
.eyebrow {
  font: 9px monospace;
  letter-spacing: 1.6px;
  color: #a6a6af;
}
.eyebrow i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d0ed75;
  margin-right: 7px;
}
.hero-copy h1 {
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 800;
}
.hero-copy h1 span {
  color: #d9d9e0;
}
.hero-copy p {
  line-height: 1.9;
  color: #92929f;
}
.swipe-label {
  color: #bebec7;
  font-size: 9px;
  margin-top: 24px;
}
.sticker {
  position: absolute;
  z-index: 1;
  font-size: 65px;
  filter: drop-shadow(0 10px 20px #0005);
}
.sticker-one {
  color: #cbef7d;
  left: 9%;
  top: 240px;
  transform: rotate(-15deg);
}
.sticker-two {
  color: #9f8df8;
  right: 10%;
  top: 325px;
  transform: rotate(12deg);
}
.tiny-tag {
  position: absolute;
  right: 6%;
  top: 195px;
  transform: rotate(9deg);
  border: 1px solid #ffffff15;
  border-radius: 99px;
  padding: 10px 15px;
  font: 7px monospace;
  color: #92929c;
}
.fan-stage {
  position: absolute;
  left: 0;
  right: 0;
  touch-action: pan-y;
  cursor: grab;
  outline: none;
}
.fan-stage:active {
  cursor: grabbing;
}
.fan-stage:focus-visible {
  box-shadow: inset 0 0 0 2px #d0ed75;
  border-radius: 35px;
}
.fan-track {
  position: absolute;
  width: 100%;
  height: 100%;
  translate: var(--drag, 0px) 0;
  transition: translate 0.25s ease-out;
}
.game-tile {
  position: absolute;
  left: 50%;
  top: 0;
  width: 260px;
  margin-left: -130px;
  padding: 23px 23px 0;
  border: 1px solid #ffffff60;
  overflow: hidden;
  transform-origin: 50% 100%;
  background: var(--color);
  box-shadow:
    0 24px 40px #0004,
    inset 0 1px 0 #ffffff60;
  transition:
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.3s;
  user-select: none;
}
.game-tile:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 5px #ffffff08;
}
.tile-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.tile-head h3 {
  font-size: 23px;
  line-height: 1.1;
  margin: 0;
  max-width: 180px;
}
.tile-head > span {
  border-radius: 99px;
  padding: 6px;
  background: #0002;
  font-size: 9px;
}
.game-tile p {
  font-size: 10px;
  color: #ffffffbc;
  margin: 8px 0 17px;
  position: relative;
  z-index: 2;
}
.game-tile img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 29px 29px 0 0;
  pointer-events: none;
  mask-image: linear-gradient(transparent, #000 17%);
}
.stage-foot {
  position: absolute;
  right: 28px;
  z-index: 8;
  justify-content: space-between;
  font: 7px monospace;
  pointer-events: none;
}
.stage-foot > span {
  background: #101014a0;
  border: 1px solid #ffffff10;
  padding: 8px 11px;
  border-radius: 99px;
  backdrop-filter: blur(8px);
}
.ticker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #282830;
  padding: 32px 22px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: -0.3px;
}
.ticker i {
  font-size: 25px;
  color: #85858e;
  font-style: normal;
}
.unbox {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  background: #202024;
  border-radius: 40px;
  padding: 35px 45px;
  min-height: 630px;
  overflow: hidden;
  isolation: isolate;
}
.unbox:before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  border: 1px solid #ffffff16;
  right: 5%;
  top: 60px;
  box-shadow:
    0 0 0 45px #ffffff03,
    0 0 0 90px #ffffff02;
  z-index: -1;
}
.unbox h2,
.section-head h2 {
  font-size: clamp(35px, 4vw, 55px);
  letter-spacing: -2px;
  line-height: 1.12;
  margin: 20px 0;
}
.unbox p {
  font-size: 12px;
  line-height: 1.9;
  color: #a4a4ae;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  background: #f5f5f7;
  color: #1d1d23;
  border-radius: 99px;
  padding: 17px 22px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 20px;
}
.pill span {
  font-size: 18px;
}
.unbox small {
  display: block;
  font: 7px monospace;
  letter-spacing: 1px;
  color: #8b8b96;
  margin-top: 30px;
}
.unbox iframe {
  width: 100%;
  height: 560px;
  border: 0;
  color-scheme: dark;
  background: transparent;
}
.unbox-corner {
  position: absolute;
  right: 32px;
  bottom: 25px;
  font: 7px monospace;
  color: #777782;
  letter-spacing: 1px;
}
.collection {
  padding: 74px 0;
  color: #24242d;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 27px;
}
.section-head .eyebrow {
  color: #767681;
}
.section-head h2 {
  margin: 13px 0 0;
  font-size: 44px;
}
.section-head p {
  font-size: 11px;
  line-height: 1.8;
  color: #797982;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.category {
  position: relative;
  min-height: 380px;
  border-radius: 32px;
  padding: 26px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s;
}
.category:hover {
  transform: translateY(-5px);
}
.lavender {
  background: #c8b9f4;
}
.mint {
  background: #b8e7d4;
}
.peach {
  background: #f2c3ae;
}
.category > span {
  font: 8px monospace;
  letter-spacing: 1px;
}
.category h3 {
  font-size: 29px;
  letter-spacing: -1.1px;
  line-height: 1.15;
  margin: 18px 0;
}
.category b {
  position: absolute;
  bottom: 20px;
  left: 25px;
  right: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  z-index: 3;
}
.category b i {
  display: grid;
  place-items: center;
  font-size: 20px;
  background: #ffffff7c;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-style: normal;
}
.category-art {
  position: absolute;
  width: 180px;
  height: 220px;
  right: 10px;
  bottom: 25px;
  transform: rotate(12deg);
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 15px 20px #0002;
  z-index: -1;
}
.category-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gift-stack {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 75px;
  height: 130px;
}
.gift-stack img {
  position: absolute;
  left: 5%;
  top: 10px;
  width: 140px;
  height: 120px;
  object-fit: cover;
  border-radius: 20px;
  transform: rotate(-14deg);
  box-shadow: 0 12px 15px #0002;
}
.gift-stack img + img {
  left: 40%;
  transform: rotate(14deg);
  top: 0;
}
.utility-icons {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 45px;
  transform: rotate(-9deg);
}
.utility-icons span {
  width: 68px;
  height: 75px;
  border-radius: 22px;
  background: #ffffff80;
  box-shadow: 0 12px 0 #00000010;
  display: grid;
  place-items: center;
  font-size: 38px;
}
.end-note {
  position: relative;
  background: #ecece9;
  border-radius: 38px;
  padding: 50px;
  color: #23232b;
  overflow: hidden;
}
.end-note h2 {
  font-size: clamp(42px, 6vw, 75px);
  line-height: 1.07;
  letter-spacing: -3px;
  margin: 20px 0;
}
.end-note em {
  font-family: Georgia, serif;
  font-weight: 400;
}
.end-note .pill {
  background: #25252d;
  color: #fff;
}
.end-star {
  position: absolute;
  right: 9%;
  top: 25px;
  font-size: 280px;
  color: #b4b0cc;
  line-height: 1;
  transform: rotate(12deg);
}
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #6c6c76;
}
footer .brand {
  color: #24242c;
  font-size: 23px;
}
.notice {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #27272e;
  color: white;
  padding: 12px 22px;
  border-radius: 99px;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
}
.notice.show {
  opacity: 1;
}
@media (max-width: 1000px) {
  nav {
    gap: 18px;
    padding: 26px;
  }
  .nav-right {
    display: none;
  }
  .search {
    margin-left: auto;
    width: 180px;
  }
  .hero-copy {
    margin-top: 45px;
  }
  .game-tile {
    width: 220px;
    margin-left: -110px;
    height: 320px;
    border-radius: 30px;
  }
  .game-tile img {
    height: 230px;
  }
  .tile-head h3 {
    font-size: 20px;
  }
  .fan-stage {
    height: 325px;
  }
  .unbox {
    padding: 25px;
    grid-template-columns: 0.8fr 1.2fr;
  }
  .unbox h2 {
    font-size: 36px;
  }
  .category {
    padding: 22px;
    min-height: 330px;
  }
  .category h3 {
    font-size: 23px;
  }
  .category-art {
    width: 135px;
    height: 180px;
  }
  .gift-stack {
    left: 15px;
    right: 15px;
  }
  .gift-stack img {
    width: 115px;
    height: 100px;
  }
  .utility-icons span {
    width: 50px;
    height: 65px;
    font-size: 30px;
  }
  .end-star {
    font-size: 220px;
  }
}
@media (max-width: 650px) {
  nav {
    gap: 16px;
  }
  .brand {
    font-size: 23px;
  }
  .brand-mark {
    display: none;
  }
  .nav-links {
    font-size: 10px;
    gap: 14px;
  }
  .avatar {
    margin-left: auto;
    width: 30px;
    height: 30px;
  }
  .search {
    height: 36px;
  }
  .eyebrow {
    font-size: 6px;
    letter-spacing: 1.1px;
  }
  .hero-copy p {
    padding: 0 25px;
  }
  .swipe-label {
    font-size: 8px;
    margin-top: 16px;
  }
  .sticker {
    font-size: 35px;
  }
  .sticker-one {
    top: 210px;
    left: 1%;
    opacity: 0.6;
  }
  .sticker-two {
    top: 325px;
    right: 2%;
    opacity: 0.6;
  }
  .tiny-tag {
    display: none;
  }
  .game-tile {
    width: 180px;
    margin-left: -90px;
    padding: 19px 16px 0;
    border-radius: 27px;
  }
  .tile-head h3 {
    font-size: 18px;
  }
  .tile-head > span {
    font-size: 7px;
  }
  .game-tile p {
    font-size: 8px;
  }
  .stage-foot {
    left: 15px;
    right: 15px;
  }
  .stage-foot > span:last-child {
    display: none;
  }
  .ticker {
    padding: 22px 6px;
    font-size: 7px;
    gap: 9px;
  }
  .ticker i {
    font-size: 16px;
  }
  .unbox {
    display: block;
    padding: 30px 25px 0;
    border-radius: 28px;
    min-height: 720px;
  }
  .unbox-copy {
    position: relative;
    z-index: 2;
  }
  .unbox h2 {
    font-size: 37px;
    letter-spacing: -1.5px;
    margin: 17px 0;
  }
  .unbox p {
    font-size: 10px;
  }
  .unbox .pill {
    padding: 13px 18px;
    font-size: 10px;
    margin-top: 10px;
  }
  .unbox small {
    font-size: 6px;
    margin-top: 20px;
  }
  .unbox iframe {
    height: 430px;
    margin-top: 0;
    width: calc(100% + 40px);
    margin-left: -20px;
  }
  .unbox:before {
    width: 300px;
    height: 300px;
    top: 360px;
    right: 5%;
  }
  .unbox-corner {
    font-size: 5px;
    bottom: 18px;
  }
  .collection {
    padding: 45px 0;
  }
  .section-head {
    display: block;
  }
  .section-head h2 {
    font-size: 31px;
    letter-spacing: -1.4px;
  }
  .section-head p {
    font-size: 10px;
  }
  .category-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .category {
    min-height: 290px;
    padding: 25px;
  }
  .category h3 {
    font-size: 31px;
  }
  .category-art {
    width: 180px;
    height: 220px;
    bottom: 18px;
    right: 18px;
  }
  .gift-stack {
    left: 45%;
    bottom: 85px;
    right: 15px;
  }
  .gift-stack img {
    width: 100px;
    height: 100px;
  }
  .gift-stack img + img {
    left: 35%;
  }
  .utility-icons {
    position: absolute;
    bottom: 85px;
    right: 25px;
    margin: 0;
  }
  .end-note {
    padding: 30px;
    border-radius: 28px;
  }
  .end-note h2 {
    font-size: 45px;
    letter-spacing: -2px;
  }
  .end-star {
    font-size: 115px;
    right: -10px;
    top: 100px;
    opacity: 0.4;
  }
  footer {
    flex-wrap: wrap;
    padding: 25px 5px;
  }
  footer > span:last-child {
    width: 100%;
  }
  .end-note .pill {
    font-size: 10px;
    padding: 13px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

.hero-copy h1 {
  word-spacing: 0.06em;
}
.tile-head h3 {
  letter-spacing: -0.3px;
  word-spacing: 0.03em;
}

.category h3,
.section-head h2 {
  letter-spacing: -0.5px;
  word-spacing: 0.07em;
}

.logo-tile img {
  object-fit: contain;
  padding: 30px 20px 55px;
  background: #ffffffed;
  mask-image: linear-gradient(transparent, #000 15%);
}
.fan-stage:focus-visible {
  box-shadow: inset 0 0 0 1px #ffffff50;
}
.hero-copy p {
  margin-bottom: 0;
}
@media (max-width: 1000px) {
  .playground {
    height: 760px;
  }
}
@media (max-width: 650px) {
}

body {
  background: #151413;
  color: #fff;
  padding: 36px 4vw 0;
  --ink: #fff;
  --muted: #c7c3c0;
  --panel: rgba(12, 14, 19, 0.58);
}
.wallpaper {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  transition: opacity 0.65s;
}
.dark-wall {
  background-image: url(assets/workshop-dark.png);
}
.warm-wall {
  background-image: url(assets/workshop-warm.png);
  opacity: 0;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  background: #090a0d32;
  z-index: -1;
  pointer-events: none;
}
body.warm {
  --ink: #242421;
  --muted: #4e4a44;
  --panel: rgba(239, 232, 218, 0.5);
  color: var(--ink);
  background: #d8d0c2;
}
.warm .warm-wall {
  opacity: 1;
}
.warm:before {
  background: #e6dfd011;
}
main {
  max-width: 1320px;
}
.preview-status {
  text-align: center;
  font: 8px monospace;
  letter-spacing: 2px;
  color: var(--muted);
  margin: 0 0 20px;
}
.preview-status span {
  letter-spacing: 0.5px;
}
.playground {
  height: 820px;
  background:
    linear-gradient(130deg, #ffffff15, #ffffff03 38%, #ffffff11), var(--panel);
  border: 1px solid #ffffff69;
  border-radius: 44px;
  box-shadow:
    inset 0 1px 1px #ffffff6b,
    inset 0 -1px 0 #ffffff20,
    0 25px 80px #0005;
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}
nav {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  padding: 30px 36px;
  gap: 16px;
  align-items: center;
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-game,
.nav-store {
  font-size: 12px;
  white-space: nowrap;
  display: flex;
  gap: 8px;
  align-items: center;
}
.nav-store {
  color: var(--muted);
}
.search {
  width: 180px;
  background: #ffffff12;
  border-color: #ffffff20;
  padding: 7px 12px;
}
.search input {
  color: var(--ink);
}
.search input::placeholder {
  color: var(--muted);
}
.ib-logo {
  justify-self: center;
  display: block;
  width: 48px;
  position: relative;
}
/* A soft source behind the opaque Rubic lets light show through its gaps. */
body:not(.warm) .playground .ib-logo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 210px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, #ffffff38 0%, #ffffff1c 24%, #ffffff0a 46%, transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}
body:not(.warm) .playground .ib-logo img {
  filter: invert(1) drop-shadow(0 0 6px #ffffff70) drop-shadow(0 0 18px #ffffff40);
}
.ib-logo img {
  width: 100%;
  filter: invert(1);
}
.warm .ib-logo img,
.warm footer img {
  filter: none;
}
.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
#themeToggle,
.round-link {
  width: 38px;
  height: 38px;
  border: 1px solid #ffffff30;
  background: #ffffff12;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
}
.collection-pill {
  font-size: 10px;
  border-radius: 99px;
  padding: 12px 16px;
  background: #ffffff12;
  border: 1px solid #ffffff20;
}
.collection-pill span {
  margin-left: 13px;
}
.hero-copy {
  margin-top: 64px;
}
.hero-copy h1 {
  font-size: clamp(42px, 5vw, 67px);
  line-height: 1.12;
  margin: 22px 0;
  color: var(--ink);
  letter-spacing: -2px;
}
.hero-copy p {
  color: var(--muted);
  font-size: 11px;
}
.eyebrow {
  color: var(--muted);
}
.fan-stage {
  height: 350px;
  bottom: 0;
}
.game-tile {
  height: 365px;
  border-radius: 34px;
}
.game-tile img {
  height: 270px;
}
.stage-foot > span {
  background: #15161ab3;
  color: #eee;
}
.warm .stage-foot > span {
  background: #ddd3c5d9;
}
.home-catalog {
  margin: 36px 0 0;
  padding: 36px;
  border: 1px solid #ffffff3b;
  border-radius: 34px;
  background: var(--panel);
  backdrop-filter: blur(18px);
}
.home-catalog h2 {
  font-size: 32px;
  letter-spacing: -1px;
  margin: 13px 0;
}
.home-catalog header p {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 26px;
}
#catalogGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.catalog-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid #ffffff25;
  background: #ffffff07;
  border-radius: 22px;
  transition: background 0.2s;
}
.catalog-item:hover {
  background: #ffffff18;
}
.catalog-item img {
  width: 55px;
  height: 65px;
  object-fit: cover;
  border-radius: 14px;
  background: #fff;
}
.catalog-item span {
  font-size: 12px;
  font-weight: 700;
}
.catalog-item small {
  display: block;
  font-size: 9px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--muted);
  margin-top: 5px;
}
.catalog-item b {
  margin-left: auto;
  font-weight: 400;
}
footer {
  color: var(--muted);
  font-size: 9px;
  padding: 26px 4px;
}
footer img {
  width: 30px;
  filter: invert(1);
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid #e4e1d9;
  outline-offset: 4px;
}
.warm button:focus-visible,
.warm a:focus-visible {
  outline-color: #333;
}
@media (max-width: 1050px) {
  nav {
    grid-template-columns: 1fr 50px 1fr;
    padding: 26px;
    gap: 10px;
  }
  .nav-left {
    gap: 13px;
  }
  .search {
    width: 140px;
    margin: 0;
  }
  .nav-game,
  .nav-store {
    font-size: 10px;
  }
  .collection-pill {
    display: none;
  }
  .playground {
    height: 770px;
  }
  .hero-copy {
    margin-top: 65px;
  }
  .fan-stage {
    height: 325px;
  }
  .game-tile {
    height: 330px;
  }
  .game-tile img {
    height: 240px;
  }
  #catalogGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  body {
    padding: 18px 12px 0;
  }
  .preview-status {
    font-size: 6px;
    letter-spacing: 1px;
    margin-bottom: 13px;
  }
  .playground {
    height: 710px;
    border-radius: 30px;
  }
  nav {
    padding: 23px 20px;
    grid-template-columns: 1fr 45px 1fr;
  }
  .ib-logo {
    width: 38px;
  }
  .nav-left {
    gap: 11px;
  }
  .nav-game,
  .nav-store {
    font-size: 9px;
    gap: 4px;
  }
  .nav-actions {
    gap: 7px;
  }
  #themeToggle,
  .round-link {
    width: 31px;
    height: 31px;
    font-size: 17px;
  }
  .search {
    position: absolute;
    top: 79px;
    left: 20px;
    right: 20px;
    width: auto;
    max-width: none;
  }
  .hero-copy {
    margin-top: 86px;
  }
  .hero-copy h1 {
    font-size: 39px;
    letter-spacing: -1.5px;
    margin: 18px 0;
  }
  .hero-copy p {
    font-size: 10px;
  }
  .hero-copy .eyebrow {
    font-size: 6px;
  }
  .fan-stage {
    height: 280px;
  }
  .game-tile {
    height: 290px;
  }
  .game-tile img {
    height: 215px;
  }
  .home-catalog {
    padding: 23px 18px;
    border-radius: 28px;
    margin-top: 20px;
  }
  .home-catalog h2 {
    font-size: 27px;
  }
  #catalogGrid {
    grid-template-columns: 1fr;
  }
  .catalog-item img {
    height: 60px;
  }
  .wallpaper {
    background-position: 63% center;
  }
  footer {
    font-size: 7px;
    gap: 10px;
  }
  footer a {
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wallpaper {
    transition: none;
  }
}

/* Approved ITEMBOX typographic wallpaper */
body {
  padding-left: 10vw;
  padding-right: 10vw;
}
.dark-wall,
.warm-wall {
  background-image: url(assets/itembox-wallpaper-vivid.jpg);
  background-size: auto 94vh;
  background-position: 3vw center;
  background-repeat: no-repeat;
  background-color: #000;
}
.warm-wall {
  filter: none;
  background-image: url(assets/itembox-wallpaper-warm.jpg);
  background-color: #eeeae2;
}
.playground {
  background:
    linear-gradient(125deg, #ffffff0e, #ffffff02), rgba(9, 10, 14, 0.34);
  backdrop-filter: blur(7px) saturate(110%);
  -webkit-backdrop-filter: blur(7px) saturate(110%);
}
.warm .playground {
  background:
    linear-gradient(125deg, #ffffff20, #ffffff05), rgba(239, 234, 224, 0.45);
}
body:before {
  background: transparent;
}
.warm:before {
  background: transparent;
}
#productDetail {
  border: 1px solid #ffffff45;
  border-radius: 32px;
  padding: 26px;
  max-width: 660px;
  width: calc(100% - 36px);
  background: rgba(24, 25, 29, 0.92);
  color: #fff;
  backdrop-filter: blur(25px);
  box-shadow: 0 25px 100px #0008;
}
#productDetail[open] {
  display: flex;
  gap: 26px;
  align-items: center;
}
#productDetail::backdrop {
  background: #0008;
  backdrop-filter: blur(8px);
}
#detailImage {
  width: 36%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 22px;
}
.detail-copy {
  flex: 1;
}
.detail-copy h2 {
  font-size: 28px;
  line-height: 1.15;
  margin: 12px 0;
}
.detail-copy p {
  font-size: 12px;
  line-height: 1.7;
  color: #ccc;
}
.availability {
  padding-top: 16px;
  border-top: 1px solid #ffffff20;
  margin-top: 20px;
}
.detail-close {
  position: absolute;
  right: 12px;
  top: 10px;
  border: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #ffffff20;
  color: white;
  font-size: 24px;
  cursor: pointer;
}
.detail-back {
  border: 0;
  border-radius: 99px;
  padding: 12px 18px;
  margin-top: 12px;
  cursor: pointer;
}
.warm #productDetail {
  background: rgba(240, 235, 226, 0.95);
  color: #252525;
}
.warm .detail-copy p {
  color: #555;
}
.warm .detail-close {
  background: #0001;
  color: #222;
}
@media (max-width: 650px) {
  body {
    padding-left: 12px;
    padding-right: 12px;
  }
  .dark-wall,
  .warm-wall {
    background-size: auto 86vh;
    background-position: center;
  }
  .playground {
    background-color: #080a1080;
  }
  .warm .playground {
    background-color: #eee9df99;
  }
  #productDetail[open] {
    gap: 16px;
    padding: 24px 18px;
  }
  .detail-copy h2 {
    font-size: 22px;
  }
}

.playground {
  overflow: clip;
}
.game-tile {
  color: #fff;
}

/* Centered product navigation */
.stage-foot {
  bottom: 16px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: rgba(31, 34, 42, 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid #ffffff18;
  border-radius: 60px;
  font:
    15px ui-monospace,
    monospace;
  letter-spacing: 1px;
  white-space: nowrap;
}
.stage-foot > span,
.warm .stage-foot > span {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  backdrop-filter: none;
  color: #bec3cf;
  min-width: 65px;
  text-align: center;
}
.stage-foot button {
  border: 1px solid #ffffff40;
  border-radius: 50%;
  background: #ffffff08;
  color: #f2f3f7;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s;
}
.stage-foot button:hover {
  background: #ffffff18;
}
.stage-foot button:active {
  background: #ffffff28;
}
.warm .stage-foot {
  background: rgba(230, 225, 216, 0.85);
  border-color: #0001;
}
.warm .stage-foot > span {
  color: #50535c;
}
.warm .stage-foot button {
  color: #30333a;
  border-color: #0003;
  background: #00000006;
}
@media (max-width: 650px) {
  .stage-foot {
    gap: 23px;
    font-size: 13px;
    bottom: 12px;
    padding: 7px 10px;
  }
  .stage-foot button {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}
.swipe-guide {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: 140px;
  transform: translateX(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.25s;
}
.swipe-guide.show {
  opacity: 1;
}
.swipe-guide span {
  white-space: nowrap;
  background: #111d;
  border: 1px solid #ffffff25;
  padding: 9px 14px;
  border-radius: 99px;
  color: white;
  font-size: 11px;
  backdrop-filter: blur(10px);
}
.swipe-finger {
  position: relative;
  filter: drop-shadow(0 5px 8px #0008);
}
.swipe-finger i {
  position: absolute;
  top: 3px;
  left: 15px;
  width: 18px;
  height: 18px;
  border: 2px solid white;
  border-radius: 50%;
  opacity: 0.5;
}
.show .swipe-finger {
  animation: swipe-hint 1.65s ease-in-out 2;
}
.fan-track.intro-active {
  transition: none;
}
@keyframes swipe-hint {
  0%,
  100% {
    transform: translateX(38px) rotate(8deg);
  }
  15% {
    transform: translateX(38px) scale(0.94) rotate(8deg);
  }
  70%,
  85% {
    transform: translateX(-38px) rotate(-8deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .show .swipe-finger {
    animation: none;
  }
  .swipe-guide {
    transition: none;
  }
}

/* Touch hint 02 and compact navigation, including its outer pill. */
.stage-foot {
  gap: 19px;
  padding: 6px 9px;
  font-size: 11px;
}
.stage-foot button {
  width: 31px;
  height: 31px;
  font-size: 18px;
}
.stage-foot > span {
  min-width: 49px;
}
.swipe-guide {
  gap: 12px;
}
.touch-symbol {
  filter: drop-shadow(0 4px 9px #0008);
}
.show .touch-symbol {
  animation: touch-swipe 1.65s ease-in-out 2;
}
@keyframes touch-swipe {
  0%,
  15%,
  100% {
    transform: translateX(28px);
  }
  70%,
  85% {
    transform: translateX(-28px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .show .touch-symbol {
    animation: none;
  }
}

/* Desktop artwork includes the full console within its canvas. */
@media (min-width: 651px) {
  .dark-wall {
    background-image: url(assets/itembox-wallpaper-full.jpg);
  }
  .warm-wall {
    background-image: url(assets/itembox-wallpaper-full-warm.jpg);
  }
}

/* The swipe container must never draw a focus frame over the cards. */
#games.fan-stage,
#games.fan-stage:focus,
#games.fan-stage:focus-visible {
  outline: none;
  border: 0;
  box-shadow: none;
}

/* Text on the bare wallpaper inverts the pixels directly underneath its glyphs. */
.preview-status,
footer > span,
footer > a {
  color: #fff;
  mix-blend-mode: difference;
}

/* Fetch only the active theme; hidden layers must not download a second wallpaper. */
.home-catalog {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* Original typography wallpaper, without decorative objects. */
body {
  background: #000;
}
body.warm {
  background: #eeeae2;
}
body .dark-wall,
body .warm-wall {
  background-image: url(assets/itembox-typography-original.png);
  background-color: #000;
  background-size: auto 94vh;
  background-position: 3vw center;
  background-repeat: no-repeat;
}
body .dark-wall {
  filter: none;
}
body .warm-wall {
  filter: invert(1);
  mix-blend-mode: multiply;
}
body:not(.warm) .warm-wall,
body.warm .dark-wall {
  display: none;
  background-image: none;
}
@media (max-width: 650px) {
  body .dark-wall,
  body .warm-wall {
    background-size: auto 86vh;
    background-position: center center;
  }
}

/* Match Safari rubber-band canvas to the active page theme. */
html {
  min-height: 100%;
  background: #000;
}
html.warm {
  background: #eeeae2;
}
body {
  min-height: 100vh;
  min-height: 100svh;
}

/* Vector sun avoids platform-specific color emoji rendering. */
#themeToggle .theme-sun {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin: auto;
  pointer-events: none;
}
@media (max-width: 650px) {
  body:not(.warm) #themeToggle {
    padding: 0;
    line-height: 1;
  }
  #themeToggle .theme-sun {
    width: 18px;
    height: 18px;
    margin: 0;
  }
}

/* Decorative wallpaper stays behind content, not a viewport-covering UI layer.
   WebKit fixedContainerEdges excludes negative-z-index full-screen layers.
   Body isolation below keeps it visible above the page canvas. */
body > .wallpaper {
  z-index: -2;
  pointer-events: none;
}
body > main {
  position: relative;
  z-index: auto;
}
body > main > * {
  position: relative;
  z-index: 1;
}
body > main > .preview-status,
body > main > footer > span,
body > main > footer > a {
  color: var(--muted);
  mix-blend-mode: normal;
}

/* Give Safari a real warm edge color instead of a filtered black layer. */
body.warm .warm-wall {
  background-color: #eeeae2;
  background-image: url(assets/itembox-type-warm.svg);
  filter: none;
  mix-blend-mode: normal;
}

/* Keep Safari's native canvas and edge sampling aligned with the chosen theme. */
html {
  --page-canvas: #000;
  color-scheme: dark;
  background-color: var(--page-canvas);
}
html.warm {
  --page-canvas: #eeeae2;
  color-scheme: light;
  background-color: var(--page-canvas);
}
html body,
html body.warm {
  background-color: var(--page-canvas);
}
html body > .wallpaper {
  background-color: var(--page-canvas);
}
@media (max-width: 650px) {
  body {
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
}

.catalog-tools {
  margin: 24px 0;
}
.catalog-tools input {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid #ffffff30;
  background: #ffffff0a;
  color: var(--ink);
  border-radius: 16px;
  outline-offset: 3px;
}
#categoryFilters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
#categoryFilters button,
.package {
  cursor: pointer;
  border: 1px solid #ffffff30;
  background: #ffffff08;
  color: var(--ink);
  border-radius: 99px;
  padding: 10px 15px;
  font-size: 12px;
}
#categoryFilters button[aria-pressed="true"],
.package[aria-pressed="true"] {
  background: #d2ef7e;
  color: #18200d;
  border-color: #d2ef7e;
}
#resultCount {
  font-size: 11px;
  color: var(--muted);
}
.catalog-item[hidden] {
  display: none;
}
.selection {
  margin-bottom: 20px;
}
.empty-selection {
  padding: 35px;
  text-align: center;
  border: 1px dashed #ffffff30;
  border-radius: 22px;
}
.empty-selection > span {
  font-size: 40px;
  color: #d2ef7e;
}
.empty-selection h3 {
  font-size: 22px;
}
.empty-selection p,
.simulation-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
}
.action {
  display: inline-block;
  border: 0;
  background: #d2ef7e;
  color: #18200d;
  padding: 14px 22px;
  border-radius: 99px;
  font-weight: 700;
  cursor: pointer;
  font-size: 12px;
}
.selection-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.selected-product {
  display: flex;
  align-items: center;
  gap: 18px;
}
.selected-product img {
  width: 85px;
  height: 100px;
  object-fit: cover;
  border-radius: 18px;
}
.selected-product h3 {
  font-size: 24px;
  margin: 5px 0;
}
.selected-product p,
.product-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
}
.packages {
  display: grid;
  gap: 9px;
  margin: 22px 0;
}
.package {
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding: 16px;
}
.summary {
  padding: 24px;
  background: #ffffff08;
  border: 1px solid #ffffff25;
  border-radius: 22px;
  align-self: start;
}
.summary h3 {
  margin-top: 0;
}
.summary dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  font-size: 12px;
  line-height: 1.5;
}
.summary dd {
  text-align: right;
  margin: 0;
}
.summary dt {
  color: var(--muted);
}
.summary .action {
  width: 100%;
  margin-top: 15px;
}
.summary small {
  display: block;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 16px;
}
.simulation-note {
  margin: 25px 0 0;
}
.warm .catalog-tools input,
.warm #categoryFilters button,
.warm .package,
.warm .summary,
.warm .empty-selection {
  border-color: #0002;
}
.warm .catalog-item {
  border-color: #0002;
}
.warm #categoryFilters button[aria-pressed="true"],
.warm .package[aria-pressed="true"] {
  border-color: #8caa41;
}
.selection {
  scroll-margin-top: 24px;
}
@media (max-width: 650px) {
  .selection-layout {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .empty-selection {
    padding: 24px 12px;
  }
  .selected-product h3 {
    font-size: 20px;
  }
  .package {
    font-size: 11px;
  }
  .home-catalog header p {
    line-height: 1.8;
  }
  .selection .eyebrow {
    font-size: 8px;
  }
}

/* Product selection floats above the current page, with native modal focus handling. */
html.selection-open {
  overflow: hidden;
}
dialog#selection {
  position: fixed;
  inset: 0;
  width: min(1040px, calc(100% - 40px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 36px;
  border: 1px solid #ffffff35;
  border-radius: 30px;
  background:
    linear-gradient(125deg, #ffffff1c, #ffffff03 42%, #ffffff0d),
    rgba(12, 15, 20, 0.42);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  color: var(--ink);
  overscroll-behavior: contain;
  content-visibility: visible;
  contain-intrinsic-size: none;
  box-shadow:
    inset 0 1px 1px #ffffff80,
    inset 0 -1px 1px #ffffff24,
    0 24px 70px #0006;
}
dialog#selection:not([open]) {
  display: none;
}
dialog#selection::backdrop {
  /* No invisible viewport cover: WebKit samples native backdrops as solid edges. */
  display: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
dialog#selection header {
  padding-right: 44px;
}
.selection-close {
  position: absolute;
  right: 20px;
  top: 20px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #ffffff35;
  border-radius: 50%;
  background: #ffffff08;
  color: inherit;
  font-size: 26px;
  cursor: pointer;
}
.warm dialog#selection {
  background:
    linear-gradient(125deg, #ffffff65, #ffffff12 45%, #ffffff35),
    rgba(242, 238, 230, 0.52);
  border-color: #ffffff90;
  box-shadow:
    inset 0 1px 1px #ffffffcc,
    inset 0 -1px 1px #ffffff65,
    0 24px 70px #0003;
}
.warm .selection-close {
  border-color: #0003;
  background: #00000006;
}
@media (max-width: 650px) {
  dialog#selection {
    width: calc(100% - 24px);
    max-height: calc(100dvh - 24px);
  }
  .selection-close {
    right: 14px;
    top: 14px;
  }
  dialog#selection h2 {
    font-size: 25px;
  }
  dialog#selection .simulation-note {
    font-size: 10px;
  }
}

/* Nested surfaces share the glass tint without additional backdrop filters. */
dialog#selection .summary,
dialog#selection .package:not([aria-pressed="true"]) {
  background: linear-gradient(130deg, #ffffff12, #ffffff03), #10151b24;
  border-color: #ffffff35;
  box-shadow: inset 0 1px 0 #ffffff24;
}
.warm dialog#selection .summary,
.warm dialog#selection .package:not([aria-pressed="true"]) {
  background: linear-gradient(130deg, #ffffff55, #ffffff12);
  border-color: #00000020;
}
@media (max-width: 650px) {
  dialog#selection {
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
  }
}
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  dialog#selection {
    background: rgba(18, 20, 25, 0.9);
  }
  .warm dialog#selection {
    background: rgba(242, 238, 230, 0.94);
  }
}
/* Unified checkout remains inside the glass dialog. */
#popupCheckout .summary {
  position: sticky;
  top: 0;
}
.form-heading {
  font-size: 13px;
  letter-spacing: 0.2px;
  margin: 26px 0 15px;
}
.popup-fields {
  border-top: 1px solid #ffffff24;
  margin-top: 22px;
}
.popup-fields label {
  display: block;
  font-size: 12px;
  margin: 16px 0;
}
.popup-fields input,
.popup-fields select {
  display: block;
  width: 100%;
  padding: 13px 15px;
  margin-top: 8px;
  border: 1px solid #ffffff35;
  border-radius: 12px;
  background: #11182060;
  color: var(--ink);
  font: inherit;
}
.popup-fields select option {
  background: #20242b;
  color: white;
}
.popup-fields small,
.popup-payments > small {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
}
.popup-payments {
  border: 0;
  padding: 0;
  margin: 24px 0 0;
  min-width: 0;
}
.popup-payments label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin: 10px 0;
  border: 1px solid #ffffff30;
  background: #ffffff08;
  border-radius: 14px;
  cursor: pointer;
  font-size: 12px;
}
.popup-payments label:has(input:checked) {
  border-color: #d2ef7e;
  background: #d2ef7e12;
}
.popup-payments label small {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
}
.popup-consent {
  display: flex;
  gap: 10px;
  font-size: 11px;
  line-height: 1.8;
  margin-top: 20px;
}
.popup-consent input {
  align-self: flex-start;
  margin-top: 5px;
}
#popupCheckout input {
  accent-color: #a5c45c;
}
#popupResult {
  padding: 15px;
  background: #d2ef7e20;
  border: 1px solid #d2ef7e70;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.8;
}
.popup-fields input:focus-visible,
.popup-fields select:focus-visible {
  outline: 2px solid #d2ef7e;
  outline-offset: 3px;
}
.warm .popup-fields input,
.warm .popup-fields select {
  background: #ffffff60;
  border-color: #0003;
}
.warm .popup-fields select option {
  background: #eeeae2;
  color: #222;
}
.warm .popup-payments label {
  border-color: #0003;
}
.warm .popup-fields {
  border-color: #0002;
}
@media (max-width: 650px) {
  #popupCheckout .summary {
    position: static;
  }
}

/* Give light surfaces a visible edge without losing their glass finish. */
.warm .search,
.warm .catalog-tools input {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(55, 49, 39, 0.3);
  box-shadow:
    inset 0 1px 0 #ffffffcc,
    0 3px 10px #32291b10;
  color: #242421;
}
.warm .search > span {
  color: #534d43;
}
.warm .search input {
  color: #242421;
}
.warm .search input::placeholder,
.warm .catalog-tools input::placeholder {
  color: #625b50;
  opacity: 1;
}
.warm .search:focus-within,
.warm .catalog-tools input:focus-visible {
  border-color: #67604e;
  outline: 2px solid #69624755;
  outline-offset: 2px;
  box-shadow: 0 4px 14px #32291b18;
}
.warm .playground {
  border-color: #ffffffc0;
  box-shadow:
    inset 0 1px 1px #fff,
    inset 0 -1px 0 #ffffff70,
    0 14px 36px #32291b1c,
    0 3px 8px #32291b0d;
}
.warm .home-catalog:not(dialog) {
  box-shadow:
    inset 0 1px 0 #ffffffb0,
    0 12px 30px #32291b16,
    0 2px 6px #32291b0c;
}
.warm .catalog-item {
  box-shadow:
    inset 0 1px 0 #ffffff80,
    0 4px 10px #32291b12;
}
.warm .catalog-item:hover {
  background: #ffffff50;
  box-shadow:
    inset 0 1px 0 #ffffffb0,
    0 6px 16px #32291b1f;
}
.warm .game-tile {
  box-shadow:
    0 16px 30px #30271c28,
    0 4px 10px #30271c16,
    inset 0 1px 0 #ffffff80;
}

/* Main panels share the hero's exact edge and elevation tokens. */
body {
  --main-edge: #ffffff69;
  --main-radius: 50px;
  --main-shadow:
    inset 0 1px 1px #ffffff6b, inset 0 -1px 0 #ffffff20, 0 25px 80px #0005;
}
body.warm {
  --main-edge: #ffffffc0;
  --main-shadow:
    inset 0 1px 1px #fff, inset 0 -1px 0 #ffffff70, 0 14px 36px #32291b1c,
    0 3px 8px #32291b0d;
}
body .playground,
body #catalog.home-catalog {
  border: 1px solid var(--main-edge);
  border-radius: var(--main-radius);
  box-shadow: var(--main-shadow);
}
.warm #catalog {
  --muted: #514c43;
  background:
    linear-gradient(125deg, #ffffff20, #ffffff05), rgba(239, 234, 224, 0.45);
  color: #242421;
}
.warm #catalog .catalog-item {
  background: linear-gradient(125deg, #ffffff96, #ffffff65);
  border: 1px solid #746b5b42;
  box-shadow:
    inset 0 1px 0 #ffffffcc,
    0 4px 12px #32291b14;
  color: #242421;
}
.warm #catalog .catalog-item:hover {
  background: #ffffffbb;
  border-color: #746b5b70;
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 16px #32291b20;
}
.warm #catalog .catalog-item small {
  color: #514c43;
}
.warm #catalog .catalog-tools input {
  background: #ffffffe0;
  border-color: #746b5b80;
  color: #242421;
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 10px #32291b12;
}
.warm #catalog .catalog-tools input::placeholder {
  color: #625b50;
  opacity: 1;
}
.warm #catalog #categoryFilters button {
  background: #ffffff80;
  border-color: #746b5b60;
  color: #353127;
  box-shadow:
    inset 0 1px 0 #ffffffb0,
    0 2px 5px #32291b0c;
}
.warm #catalog #categoryFilters button:hover {
  background: #ffffffc0;
}
.warm #catalog #categoryFilters button[aria-pressed="true"] {
  background: #d2ef7e;
  border-color: #718d32;
  color: #202b10;
}
@media (max-width: 650px) {
  body {
    --main-radius: 34px;
  }
}

/* Separate entrance and hover movement from the carousel's positioning transform. */
.fan-track.fan-positioning .game-tile {
  transition: none;
}
.fan-track.intro-active {
  animation: fan-swipe-preview 1.65s ease-in-out 2;
}
.swipe-guide.show .swipe-finger {
  animation: none;
}
.swipe-guide.is-guiding .swipe-finger {
  animation: outline-swipe-preview 1.65s ease-in-out 2;
}
@keyframes fan-swipe-preview {
  0%,
  100% {
    translate: 0 0;
  }
  25% {
    translate: 12px 0;
  }
  70% {
    translate: -12px 0;
  }
}
@keyframes outline-swipe-preview {
  0%,
  100% {
    transform: translateX(0) rotate(0);
  }
  25% {
    transform: translateX(28px) rotate(5deg);
  }
  70% {
    transform: translateX(-28px) rotate(-5deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fan-track.intro-active,
  .swipe-guide.is-guiding .swipe-finger {
    animation: none;
  }
}
#catalog .catalog-item {
  position: relative;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.32s ease,
    border-color 0.32s ease,
    box-shadow 0.32s ease;
  backface-visibility: hidden;
}
/* Keep the gradient identical on hover so it cannot swap abruptly to a flat fill. */
.warm #catalog .catalog-item {
  background-image: linear-gradient(125deg, #ffffff96, #ffffff65);
  background-color: transparent;
}
.warm #catalog .catalog-item:hover {
  background-image: linear-gradient(125deg, #ffffff96, #ffffff65);
  background-color: #ffffff35;
}
@media (min-width: 651px) and (hover: hover) and (pointer: fine) {
  #catalog .catalog-item:hover {
    transform: translateY(-4px);
  }
  #catalog .catalog-item:before {
    content: "";
    position: absolute;
    inset: 0 0 -5px;
    pointer-events: auto;
    z-index: -1;
  }
  .game-tile {
    transition:
      transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
      opacity 0.35s ease,
      translate 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    translate: 0 0;
  }
  .game-tile:hover {
    translate: 0 -9px;
  }
  .fan-stage:active .game-tile:hover {
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fan-track.fan-enter {
    animation: none;
  }
  .game-tile:hover {
    translate: none;
  }
  #catalog .catalog-item:hover {
    transform: none;
  }
}

/* One compositor update per frame; no inherited drag variable invalidations. */
.fan-track {
  translate: 0 0;
  will-change: translate;
}
.fan-track.is-dragging {
  transition: none;
}
.game-tile {
  backface-visibility: hidden;
}
.game-tile[aria-hidden="false"] {
  will-change: transform, opacity;
}
/* Isolate stationary hero glass from the animated card subtree. */
.playground {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.playground:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  backdrop-filter: blur(7px) saturate(110%);
  -webkit-backdrop-filter: blur(7px) saturate(110%);
}

/* Retain rendering work only for the cards currently on screen. */
.fan-track {
  will-change: auto;
  contain: layout style;
}
.game-tile[aria-hidden="false"] {
  will-change: auto;
}
.fan-stage.in-view .fan-track {
  will-change: translate;
}
.fan-stage.in-view .game-tile[aria-hidden="false"] {
  will-change: transform, opacity;
}
.playground {
  content-visibility: visible;
}

/* Keep the modal inside the visible screen with a clear rim on every side. */
dialog#selection {
  --modal-gap: clamp(24px, 4vw, 40px);
  inset: max(var(--modal-gap), env(safe-area-inset-top))
    max(var(--modal-gap), env(safe-area-inset-right))
    max(var(--modal-gap), env(safe-area-inset-bottom))
    max(var(--modal-gap), env(safe-area-inset-left));
  width: min(
    1040px,
    calc(
      100% - max(var(--modal-gap), env(safe-area-inset-left)) -
        max(var(--modal-gap), env(safe-area-inset-right))
    )
  );
  max-height: calc(
    100vh - max(var(--modal-gap), env(safe-area-inset-top)) -
      max(var(--modal-gap), env(safe-area-inset-bottom))
  );
  max-height: calc(
    100dvh - max(var(--modal-gap), env(safe-area-inset-top)) -
      max(var(--modal-gap), env(safe-area-inset-bottom))
  );
  margin: auto;
  box-sizing: border-box;
  overflow: auto;
  scrollbar-width: thin;
}
@media (max-width: 650px) {
  dialog#selection {
    padding: 24px 16px;
    border-radius: 24px;
  }
  dialog#selection .selected-product {
    gap: 12px;
  }
  dialog#selection .selected-product img {
    width: 64px;
    height: 76px;
    flex-shrink: 0;
  }
  dialog#selection .selected-product > div {
    min-width: 0;
  }
  dialog#selection .selected-product h3 {
    font-size: 19px;
    overflow-wrap: anywhere;
  }
  dialog#selection .package {
    gap: 10px;
    padding: 14px 12px;
  }
  dialog#selection .package strong {
    flex-shrink: 0;
  }
}

/* Close stays inside the visible scrolling panel and above every checkout surface. */
dialog#selection > .selection-close {
  position: sticky;
  top: -2px;
  right: auto;
  float: right;
  margin: -2px -2px 2px 12px;
  z-index: 50;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: rgba(28, 32, 39, 0.92);
  color: #fff;
  box-shadow: 0 2px 8px #0002;
  pointer-events: auto;
}
/* Compensate for the mobile panel's 24px vertical / 16px horizontal padding. */
@media (max-width: 650px) {
  dialog#selection > .selection-close {
    top: -10px;
    margin-top: -10px;
    margin-bottom: 10px;
  }
}
.warm dialog#selection > .selection-close {
  background: rgba(245, 241, 233, 0.96);
  color: #242421;
}
dialog#selection > header {
  padding-right: 0;
}
dialog#selection > .selection-close:active {
  background: #525861;
}
.warm dialog#selection > .selection-close:active {
  background: #d5cfc4;
}
/* Lightweight glass: one small blur per main panel, no nested moving blur. */
.playground:before {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body #catalog.home-catalog,
body #journal.home-catalog {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background:
    linear-gradient(125deg, #ffffff0c, #ffffff02), rgba(14, 16, 21, 0.88);
}
body.warm #catalog.home-catalog,
body.warm #journal.home-catalog {
  background:
    linear-gradient(125deg, #ffffff35, #ffffff0c), rgba(239, 234, 224, 0.9);
}
.swipe-guide span {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.stage-foot {
  background: linear-gradient(135deg, #ffffff0d, #ffffff02), rgba(31, 34, 42, 0.62);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  border-color: #ffffff45;
  box-shadow: inset 0 1px 0 #ffffff24, 0 5px 16px #00000026;
}
.warm .stage-foot {
  background: linear-gradient(135deg, #ffffff45, #ffffff0d), rgba(230, 225, 216, 0.66);
  border-color: #706b634d;
  box-shadow: inset 0 1px 0 #ffffff80, 0 5px 16px #32291b1a;
}
body {
  --main-shadow: inset 0 1px 0 #ffffff60, 0 10px 24px #0003;
}
body.warm {
  --main-shadow: inset 0 1px 0 #ffffffcc, 0 8px 22px #32291b18;
}
body .playground,
body #catalog.home-catalog,
body #journal.home-catalog {
  box-shadow: var(--main-shadow);
}
.game-tile,
.warm .game-tile {
  box-shadow:
    0 10px 18px #0003,
    inset 0 1px 0 #ffffff60;
}
dialog#selection {
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  background:
    linear-gradient(125deg, #ffffff16, #ffffff04), rgba(17, 20, 26, 0.72);
  box-shadow:
    inset 0 1px 0 #ffffff70,
    0 14px 32px #0005;
}
.warm dialog#selection {
  background:
    linear-gradient(125deg, #ffffff50, #ffffff16), rgba(242, 238, 230, 0.78);
  box-shadow:
    inset 0 1px 0 #ffffffcc,
    0 14px 32px #0003;
}
@media (max-width: 650px) {
  .playground:before {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  dialog#selection {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}
body.warm .playground {
  box-shadow: var(--main-shadow);
}

/* A shared glass surface, with a modest blur budget on smaller screens. */
body {
  --panel-blur: 12px;
  --panel-glass:
    linear-gradient(125deg, #ffffff0c, #ffffff02), rgba(9, 10, 14, 0.34);
}
body.warm {
  --panel-glass:
    linear-gradient(125deg, #ffffff35, #ffffff0c), rgba(239, 234, 224, 0.45);
}
body .playground,
body.warm .playground,
body #catalog.home-catalog,
body.warm #catalog.home-catalog,
body #journal.home-catalog,
body.warm #journal.home-catalog {
  background: var(--panel-glass);
}
body .playground:before {
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
}
body #catalog.home-catalog,
body #journal.home-catalog {
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
}
@media (max-width: 650px) {
  body {
    --panel-blur: 9px;
  }
}

/* Warm glass rims and soft depth, shared by all primary panels. */
body.warm {
  --main-shadow:
    inset 0 1px 0 #ffffffcc, inset 0 -1px 0 #ffffff40, 0 18px 44px #32291b26,
    0 3px 9px #32291b15;
}
body.warm .playground,
body.warm #catalog.home-catalog,
body.warm #journal.home-catalog {
  box-shadow: var(--main-shadow);
}

/* Keep the mobile page tint unchanged outside checkout; separate it with a local edge only. */
@media (max-width: 650px) {
  body dialog#selection,
  body.warm dialog#selection {
    box-shadow:
      inset 0 1px 0 #ffffff70,
      0 2px 8px #00000012;
  }
}

/* Compact visual circle, centered vector, and a consistent 44px touch target. */
body dialog#selection > .selection-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  line-height: 1;
  isolation: isolate;
}
body dialog#selection > .selection-close:before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid #ffffff59;
  border-radius: 50%;
  background: rgba(28, 32, 39, 0.94);
  box-shadow: 0 2px 5px #00000012;
  z-index: -1;
  pointer-events: none;
}
body.warm dialog#selection > .selection-close:before {
  border-color: #504b4357;
  background: rgba(245, 241, 233, 0.96);
}
body dialog#selection > .selection-close svg {
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
body dialog#selection > .selection-close:focus-visible:before {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
body dialog#selection > .selection-close:active:before {
  background: #525861;
}
body.warm dialog#selection > .selection-close:active:before {
  background: #d5cfc4;
}

/* Skip only below-fold catalog rows, without changing the main glass panel. */
#catalogGrid .catalog-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 90px;
}
/* Initial fan is already in HTML; JavaScript takes over these exact positions. */
.fan-stage {
  container-type: inline-size;
}
.fan-prerender {
  --initial-step: min(205px, calc((100cqw - 420px) / 4));
  --initial-rise: 46px;
}
.fan-prerender .game-tile {
  transform: translateX(calc(var(--initial-d) * var(--initial-step)))
    translateY(calc(var(--initial-a) * var(--initial-rise)))
    rotate(calc(var(--initial-d) * 7deg)) scale(var(--initial-scale));
  transition: none;
}
@container (max-width:999px) {
  .fan-prerender {
    --initial-step: min(155px, calc((100cqw - 380px) / 4));
  }
}
@container (max-width:649px) {
  .fan-prerender {
    --initial-step: min(108px, calc((100cqw - 340px) / 4));
    --initial-rise: 38px;
  }
}

#journal.home-catalog {
  padding: 36px 0 24px;
  overflow: hidden;
  border: 1px solid var(--main-edge);
  border-radius: var(--main-radius);
  box-shadow: var(--main-shadow);
}
.journal-heading {
  padding: 0 36px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.journal-heading p {
  max-width: 500px;
  line-height: 1.8;
}
.journal-heading button {
  flex-shrink: 0;
  border: 1px solid #ffffff35;
  background: #ffffff12;
  color: var(--ink);
  padding: 10px 15px;
  border-radius: 99px;
  cursor: pointer;
  font-size: 11px;
}
.journal-window {
  overflow: hidden;
  padding: 35px 0 48px;
}
.journal-track {
  display: flex;
  width: max-content;
  animation: journal-drift 70s linear infinite;
  animation-play-state: paused;
}
.journal-group {
  display: flex;
  gap: 24px;
  padding-right: 24px;
}
.journal-slot {
  position: relative;
  width: 280px;
  height: 400px;
  perspective: 1100px;
  flex-shrink: 0;
}
.journal-slot:before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed #ffffff65;
  border-radius: 32px;
  opacity: 0;
  transition: opacity 0.3s;
}
.journal-card {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: white;
  text-align: left;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 32px;
}
.journal-front,
.journal-back {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid #ffffff38;
}
.journal-front {
  background: var(--article-tone);
}
.journal-front > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.journal-front:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0002, transparent 35%, #0003 58%, #000d);
}
.journal-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 1;
  font-size: 9px;
  letter-spacing: 0.4px;
  background: #2225;
  border: 1px solid #ffffff45;
  border-radius: 99px;
  padding: 8px 10px;
}
.journal-caption {
  position: absolute;
  bottom: 20px;
  left: 18px;
  right: 18px;
  z-index: 1;
}
.journal-caption > small {
  font-size: 8px;
  letter-spacing: 0.5px;
  color: #eee;
}
.journal-caption > strong {
  display: block;
  font-size: 25px;
  line-height: 1.16;
  letter-spacing: -0.7px;
  margin: 10px 0 14px;
}
.journal-tags {
  display: flex;
  gap: 6px;
  align-items: center;
}
.journal-tags > span {
  border-radius: 99px;
  padding: 8px 9px;
  background: #ffffff20;
  font-size: 8px;
  white-space: nowrap;
}
.journal-tags > span:last-child {
  margin-left: auto;
}
.journal-tick {
  position: absolute;
  right: 12px;
  top: 35%;
  width: 3px;
  height: 60px;
  background: #ffffff30;
  border-radius: 9px;
  z-index: 1;
}
.journal-tick:before {
  content: "";
  display: block;
  width: 3px;
  height: 16px;
  background: white;
  border-radius: 9px;
}
.journal-read {
  position: absolute;
  right: 12px;
  top: 24%;
  z-index: 2;
  padding: 12px 15px;
  border: 1px solid #ffffff60;
  border-radius: 20px;
  background: #ffffff38;
  font-size: 18px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.3s;
}
.journal-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #313741, #14171e);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  letter-spacing: 2px;
}
.journal-back strong {
  font-size: 32px;
}
.journal-back small {
  font-size: 10px;
  letter-spacing: 0;
}
.journal-card.is-flipping {
  transform: rotateY(180deg) !important;
}
.journal-visible .journal-track {
  animation-play-state: running;
}
.journal-paused .journal-track,
.journal-reading .journal-track,
.journal-hidden .journal-track,
.journal-track:focus-within {
  animation-play-state: paused;
}
@keyframes journal-drift {
  to {
    transform: translateX(-50%);
  }
}
@media (hover: hover) and (pointer: fine) {
  .journal-window:hover .journal-track {
    animation-play-state: paused;
  }
  .journal-slot:hover:before {
    opacity: 1;
  }
  .journal-slot:hover .journal-card {
    transform: translate(12px, -12px) rotate(7deg);
  }
  .journal-slot:hover .journal-read {
    opacity: 1;
  }
}
#articleDialog {
  inset: 24px;
  margin: auto;
  width: min(740px, calc(100% - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 30px;
  border: 1px solid #ffffff55;
  border-radius: 28px;
  background: rgba(18, 21, 27, 0.94);
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow:
    inset 0 1px 0 #ffffff60,
    0 24px 80px #0006;
}
#articleDialog::backdrop {
  background: #0007;
}
.article-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #ffffff40;
  background: #252930;
  color: white;
  font-size: 25px;
  cursor: pointer;
}
#articleTitle {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  margin: 18px 40px 22px 0;
  letter-spacing: -1px;
}
#articleMeta {
  font: 10px monospace;
  line-height: 1.8;
  color: var(--muted);
  margin-right: 45px;
}
#articleCover {
  width: 100%;
  height: 220px;
  border-radius: 20px;
}
#articleBody h3 {
  font-size: 19px;
  margin: 28px 0 10px;
}
#articleBody p {
  font-size: 14px;
  line-height: 1.95;
  color: var(--muted);
}
.warm #journal {
  background:
    linear-gradient(125deg, #ffffff20, #ffffff05), rgba(239, 234, 224, 0.58);
}
.warm .journal-heading button {
  border-color: #0003;
  background: #ffffff70;
}
.warm .journal-slot:before {
  border-color: #0006;
}
.warm #articleDialog {
  background: rgba(245, 241, 233, 0.97);
  border-color: var(--main-edge);
}
.warm .article-close {
  background: #e3ded5;
  color: #242421;
  border-color: #0003;
}
@media (max-width: 650px) {
  #journal.home-catalog {
    padding-top: 25px;
  }
  .journal-heading {
    padding: 0 20px;
    display: block;
  }
  .journal-heading button {
    margin: 0 0 5px;
  }
  .journal-slot {
    width: 245px;
    height: 355px;
  }
  .journal-group {
    gap: 18px;
    padding-right: 18px;
  }
  .journal-caption > strong {
    font-size: 23px;
  }
  .journal-window {
    padding-top: 24px;
  }
  #articleDialog {
    padding: 22px 18px;
  }
  #articleCover {
    height: 170px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .journal-track {
    animation: none;
  }
  .journal-window {
    overflow-x: auto;
  }
  .journal-group[aria-hidden="true"] {
    display: none;
  }
  .journal-card {
    transition: none;
  }
  .journal-slot:hover .journal-card {
    transform: none;
  }
}

/* Horizontal gestures leave vertical page scrolling available. */
.journal-window {
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}
.journal-card {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.journal-front > img {
  -webkit-user-drag: none;
  pointer-events: none;
}
.journal-dragging .journal-track {
  animation-play-state: paused !important;
}
.journal-dragging .journal-window,
.journal-dragging .journal-card {
  cursor: grabbing;
}
.journal-dragging .journal-slot .journal-card {
  transition: none;
  transform: none;
}
.journal-dragging .journal-slot:before,
.journal-dragging .journal-read {
  opacity: 0;
}

/* Shared, restrained contrast across glass panels and interactive surfaces. */
body {
  --muted: #d5d2ce;
  --main-edge: rgba(255, 255, 255, 0.46);
  --control-edge: rgba(255, 255, 255, 0.34);
  --control-fill: rgba(18, 20, 24, 0.64);
  --control-hover: rgba(30, 32, 36, 0.72);
  --control-shadow: inset 0 1px 0 #ffffff0a;
  --placeholder: #c7c5c2;
}
body.warm {
  --muted: #504b43;
  --main-edge: var(--control-edge);
  --control-edge: rgba(78, 69, 55, 0.34);
  --control-fill: rgba(255, 252, 246, 0.78);
  --control-hover: rgba(255, 252, 246, 0.94);
  --control-shadow: inset 0 1px 0 #ffffffa6, 0 3px 9px #32291b19;
  --placeholder: #625b51;
}
body:is(body, .warm) .playground,
body:is(body, .warm) #catalog.home-catalog,
body:is(body, .warm) #journal.home-catalog {
  border: 1px solid var(--main-edge);
  box-shadow: var(--main-shadow);
}
body:is(body, .warm) .search,
body:is(body, .warm) #catalog .catalog-tools input,
body:is(body, .warm) #catalog .catalog-item,
body:is(body, .warm) #catalog #categoryFilters button,
body:is(body, .warm) .journal-heading button,
body:is(body, .warm) .popup-fields input,
body:is(body, .warm) .popup-fields select,
body:is(body, .warm) .popup-payments label,
body:is(body, .warm) dialog#selection .package:not([aria-pressed="true"]) {
  border: 1px solid var(--control-edge);
  background: var(--control-fill);
  box-shadow: var(--control-shadow);
  color: var(--ink);
}
/* Match the checkout controls without enlarging the primary action. */
#popupCheckout .action {
  border: 1px solid var(--control-edge);
  padding: 13px 21px;
}
body:is(body, .warm) #catalog {
  --muted: #d5d2ce;
}
body.warm #catalog {
  --muted: #504b43;
}
body:is(body, .warm) .search input {
  color: var(--ink);
}
body:is(body, .warm) .search > span {
  color: var(--muted);
}
body:is(body, .warm) .search input::placeholder,
body:is(body, .warm) #catalog .catalog-tools input::placeholder,
body:is(body, .warm) .popup-fields input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}
body:is(body, .warm) #catalog .catalog-item small,
body:is(body, .warm) #catalog #resultCount,
body:is(body, .warm) .home-catalog header p,
body:is(body, .warm) .hero-copy p,
body:is(body, .warm) .simulation-note,
body:is(body, .warm) .package-note {
  color: var(--muted);
  font-weight: 450;
}
body:is(body, .warm) .eyebrow {
  color: var(--muted);
  font-weight: 500;
}
body:is(body, .warm) #catalog #categoryFilters button[aria-pressed="true"] {
  background: #d2ef7e;
  border-color: #a8c65f;
  color: #202b10;
  box-shadow: 0 2px 5px #0000000d;
}
body.warm #catalog #categoryFilters button[aria-pressed="true"] {
  border-color: #819d44;
}
body:is(body, .warm) dialog#selection .summary {
  border-color: var(--control-edge);
  box-shadow: var(--control-shadow);
}
body:is(body, .warm) .search:focus-within,
body:is(body, .warm) #catalog .catalog-tools input:focus-visible,
body:is(body, .warm) .popup-fields input:focus-visible,
body:is(body, .warm) .popup-fields select:focus-visible {
  border-color: var(--muted);
  outline: 2px solid var(--control-edge);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  body:is(body, .warm) #catalog .catalog-item:hover,
  body:is(body, .warm)
    #catalog
    #categoryFilters
    button:not([aria-pressed="true"]):hover,
  body:is(body, .warm) .journal-heading button:hover {
    background: var(--control-hover);
    border-color: var(--muted);
    box-shadow: var(--control-shadow);
  }
  body.warm #catalog .catalog-item:hover {
    box-shadow:
      inset 0 1px 0 #ffffffb0,
      0 6px 14px #32291b1a;
  }
}
/* Keep negative wallpaper layers above the page's overscroll canvas. */
body {
  isolation: isolate;
}

/* All four main panels share one theme border; preserve glass and shadows. */
body:is(body, .warm) .playground,
body:is(body, .warm) #catalog.home-catalog,
body:is(body, .warm) #journal.home-catalog,
body:is(body, .warm) dialog#selection {
  border: 1px solid var(--main-edge);
}

/* Native reader: same glass surface as checkout, one bounded scrolling region. */
body dialog#articleDialog {
  position: fixed;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
  width: min(740px, calc(100% - 48px));
  height: min(800px, calc(100vh - 48px));
  height: min(800px, calc(100dvh - 48px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--main-edge);
  border-radius: 28px;
  color: var(--ink);
  background:
    linear-gradient(125deg, #ffffff16, #ffffff04), rgba(17, 20, 26, 0.72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow:
    inset 0 1px 0 #ffffff70,
    0 14px 32px #0005;
  content-visibility: visible;
  contain: none;
}
body.warm dialog#articleDialog {
  background:
    linear-gradient(125deg, #ffffff50, #ffffff16), rgba(242, 238, 230, 0.78);
  box-shadow:
    inset 0 1px 0 #ffffffcc,
    0 14px 32px #0003;
}
body dialog#articleDialog:not([open]) {
  display: none;
}
body dialog#articleDialog::backdrop {
  display: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#articleDialog .article-scroll {
  scrollbar-width: thin;
}
body #articleDialog > .article-close {
  width: 44px;
  height: 44px;
  padding: 4px;
  display: grid;
  place-items: center;
  border: 0;
  outline: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  isolation: isolate;
}
#articleDialog > .article-close:before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--control-edge);
  border-radius: 50%;
  background: rgba(28, 32, 39, 0.94);
  z-index: -1;
}
body.warm #articleDialog > .article-close:before {
  background: rgba(245, 241, 233, 0.96);
}
#articleDialog > .article-close svg {
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
#articleDialog > .article-close:focus-visible:before {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
#articleMeta {
  margin-top: 0;
  padding: 0;
  min-height: 0;
}
#articleCover {
  display: block;
  object-fit: cover;
}
.journal-touching .journal-track {
  animation-play-state: paused;
}
@media (max-width: 650px) {
  body dialog#articleDialog {
    border-radius: 24px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow:
      inset 0 1px 0 #ffffff70,
      0 2px 8px #00000012;
  }
  #articleDialog .article-scroll {
    padding: 66px 18px 24px;
  }
}
@media (max-width: 650px), (hover: none), (pointer: coarse) {
  .journal-slot {
    perspective: none;
  }
  .journal-card {
    transform-style: flat;
    transition: none;
  }
  .journal-front {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }
  .journal-back {
    display: none;
  }
}

/* The glass is stationary. Only the article contents scroll; the close button
   is a sibling, never part of a filtered momentum-scrolling surface. */
body dialog#articleDialog,
body.warm dialog#articleDialog {
  padding: 0;
  overflow: hidden;
  border-color: var(--main-edge);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
}
body dialog#articleDialog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, #ffffff16, #ffffff04), rgba(17,20,26,.72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
body.warm dialog#articleDialog::before {
  background: linear-gradient(125deg, #ffffff50, #ffffff16), rgba(242,238,230,.78);
}
#articleDialog .article-scroll {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 66px 30px 30px;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
body #articleDialog > .article-close {
  position: absolute;
  top: 12px;
  right: 12px;
  float: none;
  margin: 0;
  z-index: 50;
  pointer-events: auto;
}
#articleDialog > .article-close:before { pointer-events: none; }
#articleDialog #articleCover { height: 220px; }
.journal-card { touch-action: pan-y; }
body.article-reading .journal-track,
body.article-reading .swipe-finger,
body.article-reading .touch-symbol,
body.article-reading .fan-track { animation-play-state: paused !important; }
@media (max-width:650px) {
  body dialog#articleDialog::before {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  #articleDialog .article-scroll { padding: 66px 18px 24px; }
  #articleDialog #articleCover { height: 170px; }
}

/* Neutral search edges in both themes. */
body:is(body, .warm) .search,
body:is(body, .warm) #catalog .catalog-tools input {
  border-color: var(--main-edge);
  box-shadow: inset 0 1px 0 #ffffff22;
}
body:is(body, .warm) .search:focus-within,
body:is(body, .warm) #catalog .catalog-tools input:focus {
  border-color: var(--main-edge);
  outline: none;
  box-shadow: inset 0 1px 0 #ffffff22;
}

/* Inset panel scrollbars: leave rounded corners and the glass border clear. */
body dialog,body dialog .article-scroll,body #omniResults,body .disclaimer-copy{scrollbar-width:auto!important;scrollbar-color:rgba(160,163,168,.65) transparent}
body dialog::-webkit-scrollbar,body dialog .article-scroll::-webkit-scrollbar,body #omniResults::-webkit-scrollbar,body .disclaimer-copy::-webkit-scrollbar{width:12px;height:12px}
body dialog::-webkit-scrollbar-track,body dialog .article-scroll::-webkit-scrollbar-track,body #omniResults::-webkit-scrollbar-track,body .disclaimer-copy::-webkit-scrollbar-track{background:transparent;margin-block:28px;margin-inline:28px}
body dialog::-webkit-scrollbar-thumb,body dialog .article-scroll::-webkit-scrollbar-thumb,body #omniResults::-webkit-scrollbar-thumb,body .disclaimer-copy::-webkit-scrollbar-thumb{background:rgba(160,163,168,.65);border:4px solid transparent;background-clip:padding-box;border-radius:20px}
body dialog::-webkit-scrollbar-corner,body dialog .article-scroll::-webkit-scrollbar-corner,body #omniResults::-webkit-scrollbar-corner{background:transparent}
/* Keep the article's inner scroll surface clear of its outer glass corners. */
body #articleDialog .article-scroll{margin:12px 4px;height:calc(100% - 24px);border-radius:20px;padding-top:54px;padding-bottom:18px}
@supports selector(::-webkit-scrollbar){body dialog,body dialog .article-scroll,body #omniResults,body .disclaimer-copy{scrollbar-color:auto!important}}

body #catalogSearch:focus-visible{outline:2px solid var(--control-edge);outline-offset:2px}