/* The front page and the Try it page. The site's own top bar, then a mix of Lunar Client's
   home (picture tiles, news, the blue band) and Modrinth's (mods drifting past, feature rows
   with a working mock beside them, cards with an icon tab, the footer). Buttons and icon tiles
   are cut like BONELAB's mod icons: a thick frame and a filled tab in the top right corner.
   Tokens, the header, the account menu and the phone menu come from style.css and home.css. */

.front {
  --card: #10151D;
  --card-2: #161C26;
  --r-lg: 22px;
  --r-md: 14px;
  --shade: 0 4px 0 rgba(0, 0, 0, .28), 0 10px 28px rgba(0, 0, 0, .35);
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
  background: #080A0E;
}

.lwrap { max-width: 1440px; margin: 0 auto; padding: 0 32px; }

/* No heading or intro line ends on one lonely word. */
.lhero__title, .lhero__sub, .mhead h2, .mhead p, .mrow__copy h3, .mrow__copy p, .mcard p, .lband__text { text-wrap: balance; }

/* Heavy uppercase, where the Lunar half of the page wants it. */
.ltile__title, .lpromo__logo, .lfeat__ribbon, .lfeat__title, .lmore, .lpost__title, .ltry__title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
}

/* Italic, spaced-out labels over the pictures. */
.lfeat__kick, .lpost__kick, .lsocial__kick, .lfeat__when, .lpost__when, .ltry__kick {
  font-family: var(--body);
  font-style: italic;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
}

/* ---- BONELAB buttons ----
   The face, a 2px frame drawn inside it, and the corner tab, which opens out a little under
   the pointer. The tab is clipped by the button's own corner so it never pokes past it. */

.blb {
  --face: var(--blue);
  --face-hi: #47A5FA;
  --edge: rgba(255, 255, 255, .34);
  --edge-hi: rgba(255, 255, 255, .5);
  --tab: #fff;
  --tab-hi: #fff;
  --glow: rgba(45, 151, 248, .3);
  --r: 10px;
  --t: 11px;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r);
  background: var(--face);
  box-shadow: inset 0 0 0 2px var(--edge);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out),
    color 220ms var(--ease-out),
    translate 220ms var(--ease-out),
    scale 120ms var(--ease-out);
}
.blb::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--t);
  height: var(--t);
  border-radius: 0 var(--r) 0 4px;
  background: var(--tab);
  transition:
    width 380ms var(--spring),
    height 380ms var(--spring),
    border-bottom-left-radius 380ms var(--spring),
    background-color 220ms var(--ease-out);
}
.blb:hover, .blb:focus-visible {
  background: var(--face-hi);
  box-shadow: inset 0 0 0 2px var(--edge-hi), 0 10px 26px var(--glow);
  translate: 0 -2px;
}
.blb:hover::after, .blb:focus-visible::after {
  width: calc(var(--t) + 6px);
  height: calc(var(--t) + 6px);
  border-bottom-left-radius: 7px;
  background: var(--tab-hi);
}
.blb:active { scale: .97; }
.blb:focus-visible { outline-offset: 3px; }
.blb svg { flex: none; width: 18px; height: 18px; }

.blb--lg { --r: 11px; --t: 13px; min-height: 54px; padding: 0 28px; font-size: 19px; }
.blb--lg svg { width: 20px; height: 20px; }
.blb--xl { --r: 14px; --t: 16px; min-height: 72px; padding: 0 42px; font-size: 26px; }
.blb--xl svg { width: 26px; height: 26px; }
.blb--ghost {
  --face: rgba(10, 13, 19, .72);
  --face-hi: rgba(20, 27, 38, .92);
  --edge: #3A465C;
  --edge-hi: #6A7C98;
  --tab: #3A465C;
  --tab-hi: #6A7C98;
  --glow: rgba(0, 0, 0, .3);
  color: #DCE3EC;
  text-shadow: none;
}
.blb--dark {
  --face: #0A0D13;
  --face-hi: #0E1420;
  --edge: var(--blue);
  --edge-hi: var(--blue-bright);
  --tab: var(--blue);
  --tab-hi: var(--blue-bright);
  --glow: rgba(45, 151, 248, .22);
}
.blb--white {
  --face: rgba(255, 255, 255, .1);
  --face-hi: #fff;
  --edge: rgba(255, 255, 255, .85);
  --edge-hi: #fff;
  --tab: #fff;
  --tab-hi: #1A6DBF;
  --glow: rgba(0, 30, 70, .25);
}
.blb--white:hover, .blb--white:focus-visible { color: #1A6DBF; text-shadow: none; }

/* An icon on a BONELAB tile: dark square, thick frame, the tab. */
.bltile {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #0A0D13;
  box-shadow: inset 0 0 0 3px var(--blue);
  color: #fff;
}
.bltile::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-radius: 0 14px 0 5px;
  background: var(--blue);
  transition: width 380ms var(--spring), height 380ms var(--spring), border-bottom-left-radius 380ms var(--spring);
}
.bltile svg { width: 30px; height: 30px; }

/* ---- Hero ---- */

.lhero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 136px;
  text-align: center;
}
.lhero__bg {
  position: absolute;
  inset: -24px;
  z-index: -2;
  background-size: cover;
  background-position: center 35%;
  filter: blur(3px);
  transform: scale(1.03);
}
.lhero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(8, 10, 14, .38), rgba(8, 10, 14, .82)),
    linear-gradient(180deg, rgba(8, 10, 14, .35) 0%, rgba(8, 10, 14, .5) 60%, #080A0E 100%);
}
.lhero__in { display: flex; flex-direction: column; align-items: center; padding: 124px 24px 0; }
.lhero__mark { width: 150px; height: auto; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .45)); }
.lhero__title {
  margin: 26px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 5.4vw, 74px);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: #fff;
  text-shadow: 0 4px 26px rgba(0, 0, 0, .5);
}
.lhero__sub {
  max-width: 34em;
  margin: 18px 0 0;
  font-size: 19px;
  line-height: 1.55;
  color: #C9D2DD;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.lhero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 30px; }

/* The word that changes. Each word sits in the same grid cell, so the old one leaves while
   the new one arrives and the line never jumps. */
.swap { display: grid; justify-items: center; color: var(--blue); }
.swap > span { grid-area: 1 / 1; }
.swap > span.in { animation: cz-word-in 640ms var(--spring) both; }
.swap > span.out { animation: cz-word-out 380ms var(--ease-in) both; }
@keyframes cz-word-in {
  from { opacity: 0; transform: translateY(42%); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes cz-word-out {
  to { opacity: 0; transform: translateY(-42%); filter: blur(6px); }
}

/* On load the hero comes in one piece after another. */
.enter { animation: cz-enter 760ms var(--spring) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
@keyframes cz-enter { from { opacity: 0; transform: translateY(18px); } }

/* ---- Rising in as you scroll ----
   Hidden only while home.js is watching (see the script in the page head). Transitions are
   kept in one variable so cards with their own hover transitions can add to it. */
.front {
  --rise-t:
    opacity 620ms var(--ease-out) calc(var(--i, 0) * 80ms),
    transform 760ms var(--spring) calc(var(--i, 0) * 80ms);
}
.rise { transition: var(--rise-t); }
.rise-armed .rise:not(.in) { opacity: 0; transform: translateY(26px); }

/* ---- Four picture tiles, pulled up over the bottom of the hero ---- */

.ltiles-sec { position: relative; z-index: 3; margin-top: -84px; }
.ltiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.ltile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 400px;
  padding: 26px 26px 30px;
  overflow: hidden;
  color: #fff;
}

/* Hover works like Lunar's: the picture zooms in and the words grow a little. Nothing is
   blurred and the tiles beside it are left alone. Coming in is slow and soft, leaving quick. */
.ltile__pic {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--img) center / cover;
  transform: scale(1.02);
  transition: transform 420ms var(--ease-out);
}
/* Dark at the bottom where the words sit, clear at the top so the picture shows. */
.ltile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6, 8, 12, .1) 0%, rgba(6, 8, 12, .25) 45%, rgba(6, 8, 12, .88) 100%);
}
.ltile + .ltile { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .06); }

/* Two tiles show the real thing moving behind their words: every mod on the first, mod packs on
   the last. The wall only fades in once home.js has filled it; until then the picture shows. */
.ltile__wall {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #0B0F15;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 700ms var(--ease-out), transform 420ms var(--ease-out);
}
.ltile__wall.is-ready { opacity: 1; }
.wall__tilt {
  position: absolute;
  inset: -30% -28%;
  display: flex;
  gap: 12px;
  transform: rotate(-9deg);
}
.wall__col { flex: 1; min-width: 0; animation: cz-up var(--dur, 60s) linear infinite; }
.wall__col:nth-child(2) { --dur: 70s; animation-direction: reverse; }
.wall__col:nth-child(3) { --dur: 80s; }
.wall__col:nth-child(4) { --dur: 66s; animation-direction: reverse; }
@keyframes cz-up { to { transform: translateY(-50%); } }
.wall__icon, .wall__pack {
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: 12px;
  border-radius: 14px;
  background: #121821 center / cover;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08);
}
.wall__icon { aspect-ratio: 1; }
.wall__pack { aspect-ratio: 16 / 10; }
.wall__pack span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 22px 10px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .82));
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ltile__text { transform-origin: left bottom; transition: transform 420ms var(--ease-out); }
.ltile__kick {
  display: block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .86);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.ltile__title {
  display: block;
  margin-top: 8px;
  font-size: clamp(38px, 3.9vw, 62px);
  line-height: .9;
  letter-spacing: .005em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .3), 0 8px 26px rgba(0, 0, 0, .45);
}
.ltile__title::after {
  content: "";
  display: block;
  width: 30px;
  height: 4px;
  margin-top: 16px;
  border-radius: 2px;
  background: var(--blue);
  transition: width 420ms var(--ease-out);
}

.ltile:is(:hover, :focus-visible) .ltile__pic,
.ltile:is(:hover, :focus-visible) .ltile__wall,
.ltile:is(:hover, :focus-visible) .ltile__text,
.ltile:is(:hover, :focus-visible) .ltile__title::after {
  transition-duration: 700ms;
  transition-timing-function: var(--spring);
}
.ltile:is(:hover, :focus-visible) .ltile__pic,
.ltile:is(:hover, :focus-visible) .ltile__wall { transform: scale(1.12); }
.ltile:is(:hover, :focus-visible) .ltile__text { transform: scale(1.06); }
.ltile:is(:hover, :focus-visible) .ltile__title::after { width: 64px; }
.ltile:focus-visible { outline-offset: -5px; }

/* ---- Section heads, Modrinth style: a small tag, a heading, a line under it ---- */

.mhead { max-width: 760px; margin: 0 auto; text-align: center; }
.mpill {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 9px 18px;
  border-radius: 9px;
  background: rgba(45, 151, 248, .13);
  box-shadow: inset 0 0 0 1px rgba(45, 151, 248, .3);
  color: var(--blue-bright);
  font-weight: 700;
  font-size: 14px;
}
.mpill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 0 9px 0 3px;
  background: var(--blue);
}
.mhead h2 {
  margin: 18px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #fff;
}
.mhead p { margin: 14px auto 0; max-width: 36em; font-size: 18px; line-height: 1.6; color: #AEB9C6; }

/* ---- Every BONELAB mod ---- */

.mhead > h2:first-child { margin-top: 0; }
.mstores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.mstore {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 18px 8px 8px;
  border-radius: 12px;
  background: #10151D;
  box-shadow: inset 0 0 0 2px #2A3444;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  transition: box-shadow 220ms var(--ease-out), translate 300ms var(--spring), background-color 220ms var(--ease-out);
}
.mstore::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 0 12px 0 4px;
  background: #2A3444;
  transition: background-color 220ms var(--ease-out), width 380ms var(--spring), height 380ms var(--spring);
}
.mstore img { width: 36px; height: 36px; border-radius: 9px; }
.mstore:hover, .mstore:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); background: #111A26; translate: 0 -2px; }
.mstore:hover::after, .mstore:focus-visible::after { background: var(--blue); width: 14px; height: 14px; }

/* ---- For players ---- */

.mplay { padding-top: 76px; }

/* Three rows of real mods drifting past, the middle one the other way. Each row holds its
   list twice and moves by exactly one copy, so the loop has no seam. */
.marquee {
  display: grid;
  gap: 14px;
  margin: 36px 0 72px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* home.js moves the rows, so a row can ease to a stop under the pointer without jumping. */
.marquee__track { display: flex; width: max-content; will-change: transform; }

.mmod {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 340px;
  margin-right: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-md);
  background: rgba(14, 19, 27, .92);
  transition: border-color 220ms var(--ease-out), background-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
/* home.js decides which card is under the pointer, because the cards move and the browser only
   rechecks :hover when the mouse itself moves. Nothing here changes the card's size or place,
   so the card under the pointer never slips out from under it. */
.mmod.is-hover, .mmod:focus-visible {
  border-color: rgba(45, 151, 248, .7);
  background: #111823;
  box-shadow: inset 0 0 0 1px rgba(45, 151, 248, .35), 0 10px 26px rgba(0, 0, 0, .35);
}
.mmod img { flex: none; width: 58px; height: 58px; border-radius: 10px; background: #0A0D13; }
.mmod__txt { min-width: 0; }
.mmod b { display: block; overflow: hidden; font-size: 17px; white-space: nowrap; text-overflow: ellipsis; }
.mmod span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 13.5px;
  line-height: 1.35;
  color: #AEB9C6;
}

/* A feature: words on one side, a working mock on the other. */
.mrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto 72px;
}
.mrow--flip .mrow__copy { order: 2; }
.mrow:last-child { margin-bottom: 0; }
.mrow__copy h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: #fff;
}
.mrow__copy p { max-width: 30em; margin: 14px 0 0; font-size: 19px; line-height: 1.6; color: #AEB9C6; }

/* The frame around every mock: a hairline edge and blue light pooling at the bottom. */
.mock {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, rgba(45, 151, 248, .16) 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}

/* Search that types itself. */
.msearch__bar { display: flex; gap: 10px; margin-bottom: 10px; }
.msearch__input, .msearch__sort {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 11px;
  background: #1A212C;
}
.msearch__input { flex: 1; gap: 10px; min-width: 0; font-size: 16px; color: #fff; }
.msearch__input svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.msearch__q { white-space: pre; }
.msearch__caret {
  width: 2px;
  height: 20px;
  margin-left: -9px;
  background: var(--blue-bright);
  animation: cz-blink 1s steps(1) infinite;
}
@keyframes cz-blink { 50% { opacity: 0; } }
.msearch__sort { font-size: 14px; font-weight: 600; color: #C3CCD8; white-space: nowrap; }
.msearch__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-height: 396px; align-content: start; }
.mres {
  display: flex;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 13px;
  background: var(--card-2);
  animation: cz-pop-in 460ms var(--spring) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.mres.out { animation: cz-pop-out 180ms var(--ease-in) both; }
@keyframes cz-pop-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes cz-pop-out { to { opacity: 0; transform: translateY(-6px); } }
.mres img { flex: none; width: 66px; height: 66px; border-radius: 11px; background: #0A0D13; }
.mres__txt { min-width: 0; flex: 1; }
.mres__name { display: block; overflow: hidden; font-size: 16px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.mres__name i { font-style: normal; font-weight: 400; color: var(--muted); }
.mres p { margin: 2px 0 8px; font-size: 13.5px; line-height: 1.4; color: #B7C1CE; }
.mres__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: #C3CCD8; }
.mres__meta span { display: inline-flex; align-items: center; gap: 5px; }
.mres__meta svg { width: 14px; height: 14px; }
.mres__tag { padding: 2px 9px; border-radius: 99px; background: rgba(255, 255, 255, .07); font-size: 12px; }

/* Updates arriving: each one opens a space at the top and the oldest folds away. */
.mnote__head { display: flex; align-items: center; gap: 9px; padding: 6px 6px 14px; font-family: var(--display); font-size: 21px; }
.mnote__head svg { width: 22px; height: 22px; color: var(--blue); }
.mnote__list { min-height: 348px; }
.mnote__slot {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--spring);
}
.mnote__slot.open { grid-template-rows: 1fr; }
.mnote__slot > div { min-height: 0; overflow: hidden; }
.mnote__item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 13px;
  background: var(--card-2);
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transition: opacity 360ms var(--ease-out) 120ms, transform 520ms var(--spring) 120ms, border-color 600ms var(--ease-out);
}
.mnote__slot.open .mnote__item { opacity: 1; transform: none; }
.mnote__slot.gone .mnote__item { opacity: 0; transform: scale(.98); transition-delay: 0s; }
.mnote__item.fresh { border-color: rgba(45, 151, 248, .55); }
.mnote__item img { flex: none; width: 62px; height: 62px; border-radius: 11px; background: #0A0D13; }
.mnote__item b { display: block; font-size: 16px; }
.mnote__item span { display: block; margin-top: 2px; font-size: 14px; color: #B7C1CE; }
.mnote__item small { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: #8C98A9; }
.mnote__item small svg { width: 13px; height: 13px; }

/* ---- Features: picture cards, each one a link that sends the app above to that part ---- */

.minside { padding-top: 10px; }
.fparts { padding-top: 72px; }
.fbento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 390px;
  gap: 20px;
  max-width: 1240px;
  margin: 44px auto 0;
}
.fb {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: #0D1118;
  color: inherit;
  transition: border-color 220ms var(--ease-out), translate 420ms var(--spring), box-shadow 320ms var(--ease-out);
}
.fb--wide { grid-column: span 2; }
.fb:is(:hover, :focus-visible) { translate: 0 -4px; border-color: rgba(45, 151, 248, .55); box-shadow: 0 22px 44px rgba(0, 0, 0, .4); }
.fb:focus-visible { outline-offset: 3px; }
.fb.is-on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 18px 44px rgba(45, 151, 248, .14); }

.fb__art { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #0A0E14; }
.fb__zoom { position: absolute; inset: 0; transition: scale 700ms var(--spring); }
.fb:is(:hover, :focus-visible) .fb__zoom { scale: 1.05; }
.fb__fade { mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.fb__glow { position: absolute; inset: 0; background: radial-gradient(60% 75% at 50% 100%, rgba(45, 151, 248, .3), transparent 72%); }

.fb__foot { display: flex; align-items: center; gap: 14px; padding: 16px 20px 18px 22px; border-top: 1px solid rgba(255, 255, 255, .06); }
.fb__words { min-width: 0; }
.fb__title { display: block; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; color: #fff; }
.fb__words > span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.4; color: #AEB9C6; }
.fb__go {
  position: relative;
  overflow: hidden;
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  border-radius: 11px;
  background: #131A24;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14);
  color: #fff;
  transition: background 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.fb__go::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 0 11px 0 4px;
  background: rgba(255, 255, 255, .3);
  transition: width 380ms var(--spring), height 380ms var(--spring), background 220ms var(--ease-out);
}
.fb__go svg { width: 18px; height: 18px; transition: translate 320ms var(--spring); }
.fb:is(:hover, :focus-visible) .fb__go, .fb.is-on .fb__go { background: var(--blue); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.fb:is(:hover, :focus-visible) .fb__go::after, .fb.is-on .fb__go::after { width: 14px; height: 14px; background: #fff; }
.fb:is(:hover, :focus-visible) .fb__go svg { translate: 0 -2px; }

/* Every loop waits until its card is on screen. */
.fb:not(.is-live) .fb__loop, .fb:not(.is-live) .fb__loop::after { animation-play-state: paused; }
@keyframes cz-left { to { transform: translateX(-50%); } }

/* Avatars walking past on a lit floor. */
.fb__slide { position: absolute; left: 0; bottom: 8px; display: flex; width: max-content; animation: cz-left 48s linear infinite; }
.fb__slide img { flex: none; width: 214px; height: 271px; margin: 0 -26px; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .55)); }
.fb__floor { position: absolute; inset: auto 0 0; height: 46px; background: linear-gradient(transparent, rgba(10, 14, 20, .85)); }

/* Installed mods: a list drifting up, switches flicking on and off. */
.fb__list { position: absolute; top: 0; left: 20px; right: 20px; display: flex; flex-direction: column; animation: cz-up 30s linear infinite; }
.fb__mod { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; background: #121821; }
.fb__mod img { flex: none; width: 40px; height: 40px; border-radius: 9px; background: #0A0D13; }
.fb__modtxt { flex: 1; min-width: 0; }
.fb__modtxt b { display: block; overflow: hidden; font-size: 14.5px; white-space: nowrap; text-overflow: ellipsis; color: #fff; }
.fb__modtxt small { display: block; font-size: 12px; color: var(--muted); }
.fb__mod > svg { flex: none; width: 18px; height: 18px; color: #7F8B9B; }
.fb__tog { position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; background: var(--blue); }
.fb__tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transform: translateX(16px); }
.fb__tog.off { background: #2A3340; }
.fb__tog.off::after { transform: none; }
.fb__tog.flip, .fb__tog.flip::after { animation: cz-tog 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
.fb__tog.flip::after { animation-name: cz-knob; }
@keyframes cz-tog { 0%, 40% { background: var(--blue); } 48%, 90% { background: #2A3340; } 98% { background: var(--blue); } }
@keyframes cz-knob { 0%, 40% { transform: translateX(16px); } 48%, 90% { transform: none; } 98% { transform: translateX(16px); } }

/* Three stores, three logos floating on their tiles. */
.fb__stores { display: flex; align-items: center; justify-content: center; gap: 22px; transition: scale 700ms var(--spring), gap 700ms var(--spring); }
.fb:is(:hover, :focus-visible) .fb__stores { gap: 32px; }
.fb__store {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  border-radius: 20px;
  background: #0E131B;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .14), 0 18px 34px rgba(0, 0, 0, .45);
  animation: cz-bob 3.4s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
  transition: box-shadow 220ms var(--ease-out);
}
.fb__store::after { content: ""; position: absolute; top: 0; right: 0; width: 18px; height: 18px; border-radius: 0 20px 0 6px; background: var(--blue); }
.fb__store img { width: 60px; height: 60px; border-radius: 13px; }
.fb:is(:hover, :focus-visible) .fb__store { box-shadow: inset 0 0 0 3px var(--blue), 0 18px 34px rgba(0, 0, 0, .45); }
@keyframes cz-bob { from { transform: translateY(9px); } to { transform: translateY(-9px); } }

/* Mod packs and levels: two rows sliding opposite ways. */
.fb__rows { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.fb__row { display: flex; width: max-content; animation: cz-left 56s linear infinite; }
.fb__row--back { animation-duration: 64s; animation-direction: reverse; }
.fb__pk { position: relative; overflow: hidden; flex: none; width: 206px; aspect-ratio: 16 / 10; margin-right: 12px; border-radius: 12px; background: #121821 center / cover; }
.fb__pk span {
  position: absolute;
  inset: auto 0 0;
  overflow: hidden;
  padding: 22px 10px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
}
.fb__rows--levels { inset: -20% -24%; gap: 10px; rotate: -8deg; }
.fb__rows--levels .fb__row { animation-duration: 40s; }
.fb__rows--levels .fb__row--back { animation-duration: 48s; }
.fb__rows--levels img { flex: none; width: 156px; aspect-ratio: 16 / 9; margin-right: 10px; border-radius: 10px; object-fit: cover; background: #121821; }

/* Craze's Camera: the picture drifting slowly, and the Craze+ tag. */
.fb__photo { background: #121821 center / cover; animation: cz-pan 16s ease-in-out infinite alternate; }
@keyframes cz-pan { from { transform: scale(1.1) translateX(-3%); } to { transform: scale(1.1) translateX(3%); } }
.fb__plus {
  position: absolute;
  top: 16px;
  left: 16px;
  overflow: hidden;
  padding: 9px 22px 9px 14px;
  border-radius: 10px;
  background: var(--blue);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3), 0 10px 26px rgba(0, 0, 0, .45);
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
.fb__plus::after { content: ""; position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-radius: 0 10px 0 4px; background: #fff; transition: width 380ms var(--spring), height 380ms var(--spring); }
.fb__plus { z-index: 2; cursor: pointer; transition: background 200ms var(--ease-out), translate 320ms var(--spring); }
.fb__plus:is(:hover, :focus-visible) { background: var(--blue-bright); translate: 0 -2px; }
.fb__plus:is(:hover, :focus-visible)::after { width: 15px; height: 15px; }

/* Console: MelonLoader's log rolling past. */
.fb__term {
  inset: 16px 16px 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: #06080C;
  mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
}
.fb__log { display: flex; flex-direction: column; padding: 0 14px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; line-height: 2; animation: cz-up 22s linear infinite; }
.fb__log span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fb__log i { font-style: normal; color: #3FB950; }
.fb__log b { font-weight: 500; color: #D3DBE6; }
.fb__log .c1 { color: #58A6FF; }
.fb__log .c2 { color: #D2A8FF; }
.fb__log .c3 { color: #FFA657; }
.fb__log .c4 { color: #FF7B9C; }
.fb__log .c5 { color: #7EE0C3; }
.fb__log .w { color: #F5C451; }
.fb__log .e { color: #FF6B6B; }

/* ---- News ---- */

.lnews { padding-top: 140px; }
.lnews__title {
  margin: 0 0 34px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 44px);
  text-align: center;
  color: #fff;
}
.lnews__grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 28px; }
.lnews__main, .lnews__side { display: grid; gap: 16px; align-content: start; }
/* The big card grows to meet the bottom of the news list beside it. */
.lnews__main { grid-template-rows: auto 1fr; }

.lpromo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 78px;
  padding: 0 14px 0 0;
  border-radius: var(--r-md);
  background: var(--card);
}
.lpromo__logo { display: flex; align-items: center; gap: 10px; padding: 0 20px; font-size: 21px; letter-spacing: .04em; white-space: nowrap; }
.lpromo__logo img { height: 36px; width: auto; }
.lpromo__logo b { color: var(--blue); }
.lpromo__text { flex: 1; margin: 0; padding: 12px 10px 12px 0; font-size: 15px; line-height: 1.45; color: #C3CCD8; }
.lpromo__text b { color: #fff; font-weight: 700; }
.lpromo__go { flex: none; }

/* A picture card: blurred art behind, darkened so the words stay readable. */
.lfeat, .lpost {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  color: #fff;
}
.lfeat::before, .lpost::before {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: -2;
  background: var(--img) center / cover;
  filter: blur(6px);
  transform: scale(1.04);
  transition: transform 520ms var(--spring);
}
.lfeat:hover::before, .lpost:hover::before { transform: scale(1.1); }

.lfeat { min-height: 500px; border-radius: var(--r-lg); }
.lfeat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6, 8, 12, .22) 0%, rgba(6, 8, 12, .38) 55%, rgba(6, 8, 12, .82) 100%);
}
.lfeat__ribbon {
  position: absolute;
  top: 30px;
  left: -48px;
  width: 190px;
  padding: 8px 0;
  background: var(--blue);
  font-size: 15px;
  letter-spacing: .12em;
  text-align: center;
  transform: rotate(-45deg);
}
.lfeat__when { position: absolute; top: 20px; right: 26px; font-size: 21px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .92); }
.lfeat__mid {
  position: absolute;
  inset: 0 40px 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.lfeat__kick { font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, .92); }
.lfeat__title { margin-top: 4px; font-size: clamp(40px, 4.8vw, 74px); line-height: 1; text-shadow: var(--shade); }
.lfeat__foot {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lby { display: flex; align-items: center; gap: 14px; font-size: 21px; font-weight: 700; letter-spacing: .02em; }
.lby img { width: 54px; height: 54px; border-radius: 10px; background: #0A0D12; object-fit: contain; }
.lmore { display: flex; align-items: center; gap: 12px; font-size: 21px; letter-spacing: .06em; }
.lmore svg { width: 28px; height: 28px; transition: transform 260ms var(--spring); }
.lfeat:hover .lmore svg { transform: translateX(4px); }

.lsocial {
  display: block;
  padding: 20px 24px 22px;
  border-radius: var(--r-md);
  background: var(--card);
  text-align: center;
  transition: var(--rise-t), background-color 220ms var(--ease-out);
}
.lsocial:hover { background: #141A24; }
.lsocial__kick { display: block; font-size: 14px; color: #C3CCD8; }
.lsocial__row { display: flex; align-items: center; gap: 14px; margin-top: 14px; text-align: left; }
.lsocial__logo { flex: none; width: 44px; height: 44px; padding: 9px; border-radius: 10px; background: #5865F2; color: #fff; }
.lsocial__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.lsocial__text b { font-family: var(--display); font-size: 18px; }
.lsocial__text span { font-size: 14px; color: var(--muted); }
.lsocial__go { flex: none; width: 26px; height: 26px; color: #DCE3EC; transition: transform 260ms var(--spring); }
.lsocial:hover .lsocial__go { transform: translateX(4px); }

.lpost { height: 146px; padding: 16px 22px; border-radius: var(--r-md); }
.lpost::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(6, 8, 12, .76) 0%, rgba(6, 8, 12, .42) 100%);
}
.lpost__kick { display: block; font-size: 12px; color: rgba(255, 255, 255, .9); }
.lpost__title { display: block; max-width: 78%; margin-top: 2px; font-size: 21px; line-height: 1.08; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.lpost__when { position: absolute; top: 14px; right: 18px; max-width: 70px; font-size: 13px; letter-spacing: 0; line-height: 1.25; text-align: right; text-transform: none; }
.lpost__foot { position: absolute; left: 22px; right: 18px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.lpost__by { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.lpost__by img { width: 24px; height: 24px; border-radius: 5px; background: #0A0D12; object-fit: contain; }
.lpost__foot svg { width: 22px; height: 22px; transition: transform 260ms var(--spring); }
.lpost:hover .lpost__foot svg { transform: translateX(4px); }

/* ---- The blue band ---- */

.lband-sec { padding-top: 72px; scroll-margin-top: 90px; }
.lband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 34px 50px 34px 44px;
  border-radius: var(--r-lg);
  /* Darker where the sentence sits, so white text on it passes contrast. */
  background: linear-gradient(90deg, #1A6DBF 0%, #2382DC 55%, var(--blue) 100%);
}
.lband::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  background: var(--img) center / cover;
  filter: blur(3px) grayscale(1);
  mix-blend-mode: soft-light;
  opacity: .5;
}
.lband__logo { flex: none; width: 118px; height: auto; }
.lband__text { flex: 1; max-width: 36em; margin: 0; font-size: 21px; line-height: 1.4; color: #fff; }
.lband__text b { font-weight: 700; }
.lband .blb { margin-left: auto; }

/* ---- Footer: the logo, the pages, Discord, and one small line under them ---- */

.mfoot {
  margin-top: 48px;
  padding: 30px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  background: #0A0D12;
}
.mfoot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; }
.mfoot__in .brand img { height: 32px; }
.mfoot__in .brand .wordmark { height: 16px; }
.mfoot__links { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 auto; }
.mfoot__links a {
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 15.5px;
  font-weight: 600;
  color: #AEB9C6;
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
.mfoot__links a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.mfoot__discord { min-height: 42px; padding: 0 18px; font-size: 14px; }
.mfoot__discord svg { width: 20px; height: 20px; }
.mfoot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  font-size: 13.5px;
  color: #6B7686;
}
.mfoot__base a { color: #8190A3; transition: color 180ms var(--ease-out); }
.mfoot__base a:hover { color: #fff; }
.mfoot__legal { margin-left: auto; }

/* ---- The phone menu, restyled to match ---- */

.front .mnav a {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom-color: rgba(255, 255, 255, .06);
  transition: color 180ms var(--ease-out);
}
.front .mnav a:hover { color: var(--blue-bright); }

/* ---- Try it: the live app on a page of its own ---- */

.ltry {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 20px;
}
.ltry__bg {
  position: absolute;
  inset: -24px;
  z-index: -2;
  height: 760px;
  background-size: cover;
  background-position: center 35%;
  filter: blur(6px);
}
.ltry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 10, 14, .55) 0%, rgba(8, 10, 14, .82) 380px, #080A0E 720px);
}
.ltry__head { max-width: 760px; margin: 0 auto; padding: 130px 24px 0; text-align: center; }
.ltry__kick { font-size: 14px; color: rgba(255, 255, 255, .88); }
.ltry__title { margin: 8px 0 0; font-size: clamp(40px, 5.4vw, 70px); line-height: 1; color: #fff; text-shadow: var(--shade); }
.ltry__head p { margin: 16px auto 0; max-width: 36em; font-size: 17px; color: #C9D2DD; }
.ltry__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 1100px;
  margin: 28px auto 0;
  padding: 0 24px;
}
.ltry__pages button {
  position: relative;
  overflow: hidden;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  background: rgba(10, 13, 18, .7);
  box-shadow: inset 0 0 0 2px #2A3444;
  color: #DCE3EC;
  font: 800 13px var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), color 180ms var(--ease-out);
}
.ltry__pages button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 0 9px 0 3px;
  background: #2A3444;
  transition: background-color 180ms var(--ease-out), width 320ms var(--spring), height 320ms var(--spring);
}
.ltry__pages button:hover { box-shadow: inset 0 0 0 2px #4A5870; color: #fff; }
.ltry__pages button:hover::after { background: #4A5870; width: 11px; height: 11px; }
.ltry__pages button[aria-pressed="true"] { background: var(--blue); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .34); color: #fff; }
.ltry__pages button[aria-pressed="true"]::after { background: #fff; }
.ltry__stage { max-width: 1328px; margin: 26px auto 0; padding: 0 24px; }
/* Stops just under the fixed header when a card brings you back up to it. */
.ltry__frame { scroll-margin-top: 92px; }
.ltry__frame {
  position: relative;
  overflow: hidden;
  height: 600px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  background: #070A10;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.ltry__frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 800px;
  border: 0;
  background: #070A10;
  transform-origin: 0 0;
  /* try.js sets the real scale. This only keeps a page whose script never ran from
     showing the middle of the window. */
  transform: scale(.75);
}
.ltry__frame:fullscreen { border: 0; border-radius: 0; background: #000; }
/* try.js sets --fw so the whole app fits on screen, and the bar under it lines up. */
.ltry__frame, .ltry__bar { max-width: var(--fw, none); margin-inline: auto; }
.ltry__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 16px; }
.ltry__bar p { margin: 0; font-size: 14px; color: var(--muted); }
.ltry__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.ltry__actions .blb[hidden] { display: none; }
.ltry__small { display: none; margin: 14px 0 0; font-size: 14px; color: var(--warn); }

/* ---- Mod packs page: CrazeLabs packs, then every mod.io collection, loading as you scroll ---- */

.pkp { padding-bottom: 40px; }
.pkp__hero { position: relative; overflow: hidden; isolation: isolate; padding: 150px 24px 70px; text-align: center; }
.pkp__wall {
  position: absolute;
  inset: -40px -10% 0;
  z-index: -2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  rotate: -6deg;
  opacity: .5;
}
.pkp__wall .fb__pk { width: 250px; }
.pkp__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 90% at 50% 45%, rgba(8, 10, 14, .55), #080A0E 88%), linear-gradient(transparent 60%, #080A0E);
}
.pkp__head { max-width: 760px; margin: 0 auto; }
.pkp__head .ltry__title { margin: 0; }
.pkp__head p { margin: 16px auto 0; max-width: 34em; font-size: 18px; color: #D3DBE6; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }

.pkp__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; max-width: 1240px; margin: 0 auto; }
.pkp__show { margin: 0; padding: 0; justify-content: flex-start; }
.pkp__sort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
  transition: opacity 300ms var(--ease-out), translate 420ms var(--spring);
}
.pkp__sort.is-off { opacity: 0; translate: 12px 0; pointer-events: none; }

/* The pressed button's blue lives on one block behind the row, which slides to whichever is
   pressed. The buttons themselves go see-through when pressed so it shows. */
.pkp__show { position: relative; isolation: isolate; }
.pkp__slide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  height: 100%;
  border-radius: 9px;
  background: var(--blue);
  box-shadow: inset 0 0 0 2px #4A5870;
  transition: transform 520ms var(--spring), width 520ms var(--spring);
}
.pkp__slide::after { content: ""; position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 0 9px 0 4px; background: #4A5870; }
.pkp__show button { transition: color 260ms var(--ease-out), background-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
.pkp__show button[aria-pressed="false"] { box-shadow: inset 0 0 0 2px var(--blue); }
.pkp__show button[aria-pressed="false"]::after { background: var(--blue); }
.pkp__show button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.pkp__show button[aria-pressed="true"]::after { opacity: 0; }

.pkp__drop { position: relative; }
.pkp__drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 40px;
  padding: 0 12px 0 14px;
  border: 0;
  border-radius: 9px;
  background: #0E131B;
  box-shadow: inset 0 0 0 2px #2A3446;
  color: #fff;
  font: 700 14px var(--body);
  cursor: pointer;
  transition: box-shadow 200ms var(--ease-out);
}
.pkp__drop-btn:hover, .pkp__drop.open .pkp__drop-btn { box-shadow: inset 0 0 0 2px var(--blue); }
.pkp__drop-btn svg { width: 16px; height: 16px; color: #AEB9C6; transition: rotate 360ms var(--spring); }
.pkp__drop.open .pkp__drop-btn svg { rotate: 180deg; }
.pkp__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 100%;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: #0E131B;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
  transform-origin: top right;
  opacity: 0;
  scale: .96;
  translate: 0 -6px;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), scale 320ms var(--spring), translate 320ms var(--spring);
}
.pkp__drop.open .pkp__menu { opacity: 1; scale: 1; translate: 0 0; pointer-events: auto; }
.pkp__menu button {
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #C3CCD8;
  font: 600 14px var(--body);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), translate 260ms var(--spring);
}
.pkp__menu button:hover { background: rgba(255, 255, 255, .06); color: #fff; translate: 2px 0; }
.pkp__menu button[aria-selected="true"] { background: rgba(45, 151, 248, .16); color: #fff; }

.pkp__sec { max-width: 1240px; margin: 44px auto 0; }
/* A section folds shut and slides up out of the way, and back again. */
.pkp__sec {
  interpolate-size: allow-keywords;
  overflow: clip;
  overflow-clip-margin: 30px;
  transition: height 560ms var(--spring), opacity 320ms var(--ease-out), translate 560ms var(--spring), margin-top 560ms var(--spring);
}
.pkp__sec.is-off { height: 0; margin-top: 0; opacity: 0; translate: 0 -14px; pointer-events: none; }
.pkp__grid.leaving .pk { animation: cz-pk-out 220ms var(--ease-in) both; }
@keyframes cz-pk-out { to { opacity: 0; translate: 0 10px; scale: .98; } }
.pkp__title { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pkp__title img { width: 34px; height: 34px; border-radius: 8px; }
.pkp__title h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 28px; color: #fff; }
.pkp__count { padding: 3px 11px; border-radius: 99px; background: rgba(255, 255, 255, .07); font-size: 13px; font-weight: 700; color: #C3CCD8; }
.pkp__count:empty { display: none; }

.pkp__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 18px; }
.pkp__empty { grid-column: 1 / -1; margin: 0; padding: 26px; border: 1px dashed rgba(255, 255, 255, .14); border-radius: 16px; color: var(--muted); text-align: center; }

.pk {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: #0D1118;
  color: inherit;
  animation: cz-pop-in 520ms var(--spring) both;
  animation-delay: calc(var(--i, 0) * 35ms);
  transition: border-color 220ms var(--ease-out), translate 420ms var(--spring), box-shadow 320ms var(--ease-out);
}
.pk:is(:hover, :focus-visible) { translate: 0 -4px; border-color: rgba(45, 151, 248, .55); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); }
.pk__pic { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #121821; }
.pk__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 700ms var(--spring); }
.pk:is(:hover, :focus-visible) .pk__pic img { scale: 1.07; }
.pk__letter { display: grid; place-items: center; height: 100%; font: 800 54px var(--display); color: #2D3A4E; }
.pk__src {
  position: absolute;
  top: 10px;
  left: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #0A0D13;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2), 0 6px 14px rgba(0, 0, 0, .4);
}
.pk__src::after { content: ""; position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-radius: 0 9px 0 3px; background: var(--blue); }
.pk__src img { width: 24px; height: 24px; border-radius: 5px; }
/* Approved is a green check; the word comes out of it on hover. */
.pk__ok {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #22B455;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3), 0 6px 14px rgba(0, 0, 0, .4);
  color: #fff;
  outline: none;
}
.pk__ok svg { width: 18px; height: 18px; }
.pk__tip {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  padding: 6px 10px;
  border-radius: 8px;
  background: #0E131B;
  box-shadow: inset 0 0 0 2px #22B455;
  font: 800 11px var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  translate: 6px -50%;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out), translate 260ms var(--spring);
}
.pk__ok:hover .pk__tip, .pk__ok:focus-visible .pk__tip { opacity: 1; translate: 0 -50%; }
.pk__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.pk__name { overflow: hidden; font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; color: #fff; }
.pk__by { overflow: hidden; font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }
.pk__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 13px; font-weight: 600; color: #C3CCD8; }
.pk__meta span { display: inline-flex; align-items: center; gap: 5px; }
.pk__meta svg { width: 14px; height: 14px; color: var(--muted); }

.pk--skel { pointer-events: none; animation: none; }
.pk--skel .pk__pic, .pk--skel .pk__name, .pk--skel .pk__by { background: linear-gradient(90deg, #121821 30%, #1A2230 50%, #121821 70%) 0 0 / 300% 100%; animation: cz-shimmer 1.4s linear infinite; }
.pk--skel .pk__name { width: 70%; height: 18px; border-radius: 6px; }
.pk--skel .pk__by { width: 45%; height: 13px; border-radius: 6px; }
@keyframes cz-shimmer { to { background-position: -300% 0; } }

.pkp__more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; }
.pkp__more .blb[hidden], .pkp__note[hidden] { display: none; }
.pkp__note { margin: 0; font-size: 14px; color: var(--muted); }

/* ---- Camera and Download pages ---- */

.cam-hero, .dl-hero { padding-bottom: 90px; }
.cam-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: center / cover;
  filter: blur(3px) saturate(1.1);
  transform: scale(1.06);
  animation: cz-drift 22s ease-in-out infinite alternate;
}
@keyframes cz-drift { to { transform: scale(1.12) translateX(-2%); } }
.cam-badge {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 20px 8px 14px;
  border-radius: 10px;
  background: var(--blue);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3);
  font: 800 13px var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.cam-badge::after { content: ""; position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 0 10px 0 4px; background: #fff; }
.cam-hero .lhero__cta { margin-top: 28px; }

.cam-sec, .dl-sec { max-width: 1240px; }
.cam-shot {
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.cam-shot img { display: block; width: 100%; height: auto; transition: scale 900ms var(--spring); }
.cam-shot:hover img { scale: 1.03; }

.cam-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 70px; }
.cam-tile {
  position: relative;
  padding: 46px 22px 24px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: linear-gradient(180deg, #10151D, #0C1017);
  transition: var(--rise-t), border-color 220ms var(--ease-out), translate 420ms var(--spring);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.cam-tile.in { transition-delay: 0s; }
.cam-tile:hover { translate: 0 -4px; border-color: rgba(45, 151, 248, .5); }
.cam-tile .bltile { position: absolute; top: -28px; left: 20px; width: 56px; height: 56px; }
.cam-tile .bltile svg { width: 26px; height: 26px; }
.cam-tile h3 { margin: 0; font: 700 21px var(--display); color: #fff; }
.cam-tile p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: #AEB9C6; }

.cam-how-head { margin-top: 90px; }
.dl-steps { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.cam-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dl-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: #0D1118;
  transition: var(--rise-t);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.dl-num {
  position: relative;
  overflow: hidden;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #0A0D13;
  box-shadow: inset 0 0 0 2px var(--blue);
  font: 800 18px var(--display);
  color: #fff;
}
.dl-num::after { content: ""; position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 0 10px 0 4px; background: var(--blue); }
.dl-step b { display: block; font: 700 18px var(--display); color: #fff; }
.dl-step p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: #AEB9C6; }
.dl-step p b { display: inline; font: inherit; font-weight: 700; color: #fff; }

.dl-hero { padding-bottom: 110px; }
.dl-kick { font: italic 600 15px var(--body) !important; letter-spacing: .3em; text-transform: uppercase; }
.dl-sec { margin-top: -70px; position: relative; z-index: 2; }
.dl-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 420px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  color: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.dl-card__pic { position: absolute; inset: 0; z-index: -2; background: var(--img) center / cover; filter: blur(4px); scale: 1.06; transition: scale 900ms var(--spring); }
.dl-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 12, 20, .35), rgba(8, 12, 20, .75)); }
.dl-card:hover .dl-card__pic { scale: 1.12; }
.dl-card__in { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 24px; text-align: center; }
.dl-card__logo svg { width: 96px; height: 96px; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5)); transition: translate 600ms var(--spring); }
.dl-card:hover .dl-card__logo svg { translate: 0 -4px; }
.dl-card__name { font: 800 clamp(44px, 6vw, 72px)/1 var(--display); text-transform: uppercase; text-shadow: var(--shade); }
.dl-card__small { font: italic 600 12.5px var(--body); letter-spacing: .25em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.dl-note { margin: 18px auto 0; max-width: 40em; font-size: 15px; color: var(--muted); text-align: center; transition: var(--rise-t); }

.dl-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; margin-top: 90px; }
.dl-how h2 { margin: 0; font: 700 clamp(30px, 3.4vw, 44px) var(--display); color: #fff; transition: var(--rise-t); }
.dl-how__art { transition: var(--rise-t); }

/* A drawing of Windows' SmartScreen box, with the two buttons you need lit up. */
.ss {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 0 18px;
  overflow: hidden;
  border-radius: 6px;
  background: #0B5CAD;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  font-family: 'Segoe UI', var(--body);
  color: #fff;
}
.ss__bar { padding: 26px 26px 0; font-size: 26px; font-weight: 300; }
.ss p { margin: 14px 26px 0; font-size: 14px; line-height: 1.5; opacity: .95; }
.ss__more { display: inline-block; margin: 12px 26px 0; font-size: 14px; text-decoration: underline; }
.ss__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 60px; padding: 0 26px; }
.ss__foot span { padding: 7px 22px; border: 1px solid rgba(255, 255, 255, .8); font-size: 14px; }
.ss__more, .ss__run { position: relative; animation: cz-ss 3.2s ease-in-out infinite; }
.ss__run { animation-delay: 1.6s; }
@keyframes cz-ss {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 90, 0); }
  20%, 40% { box-shadow: 0 0 0 4px rgba(255, 214, 90, .95); border-radius: 3px; }
}

@media (max-width: 1040px) {
  .cam-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .cam-steps { grid-template-columns: minmax(0, 1fr); }
  .dl-how { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 560px) {
  .cam-tiles { grid-template-columns: minmax(0, 1fr); }
  .dl-card { min-height: 340px; }
}

/* ---- The Craze+ page ----
   The camera and the colors, and nothing else. --acc and --acc2 are the look being shown:
   picking a color anywhere on the page sets them on the camera and color sections, and
   everything tinted in there follows with a short fade. */

.plx-show, .plx-colors { --acc: #2d97f8; --acc2: #7fd6ff; }

.plx-hero { position: relative; overflow: hidden; isolation: isolate; padding: 110px 0 0; }
.plx-hero__glow {
  position: absolute;
  inset: -20% -10% 0;
  z-index: -1;
  background:
    radial-gradient(40% 55% at 72% 48%, rgba(45, 151, 248, .28), transparent 70%),
    radial-gradient(30% 40% at 20% 30%, rgba(127, 214, 255, .08), transparent 70%),
    linear-gradient(transparent 70%, #080A0E);
  animation: plx-breathe 7s ease-in-out infinite alternate;
}
.plx-hero__glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(50% 60% at 60% 45%, #000, transparent);
}
@keyframes plx-breathe { to { opacity: .7; scale: 1.06; } }
.plx-hero__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 24px; min-height: 520px; }
.plx-title {
  margin: 0;
  font: 800 clamp(84px, 11vw, 168px)/.9 var(--display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: var(--shade);
}
.plx-title b { display: inline-block; color: var(--blue); animation: plx-plus 2.8s var(--spring) infinite; }
@keyframes plx-plus { 0%, 70%, 100% { rotate: 0deg; scale: 1; } 80% { rotate: 90deg; scale: 1.12; } }
.plx-hero__sub { margin: 20px 0 0; max-width: 30em; font-size: 20px; line-height: 1.5; color: #D3DBE6; text-wrap: balance; }
.plx-hero__price { margin: 18px 0 0; font-size: 16px; color: #AEB9C6; }
.plx-hero__price b { margin-right: 4px; font: 800 30px var(--display); color: #fff; }
.plx-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.plx-cam { position: relative; width: 100%; height: 100%; min-height: 300px; }
.plx-cam canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.plx-cam canvas:active { cursor: grabbing; }
.plx-hero__cam { height: 560px; }
.plx-cam--flat, .cam-model--flat { background: url(/assets/shots/camera-mod.jpg) center / contain no-repeat; }

.plx-head { max-width: 760px; margin: 0 auto; text-align: center; }
.plx-head h2 { margin: 14px 0 0; font: 800 clamp(40px, 5vw, 68px)/1 var(--display); text-transform: uppercase; color: #fff; text-wrap: balance; }
.plx-head p { margin: 14px auto 0; max-width: 34em; font-size: 18px; line-height: 1.55; color: #AEB9C6; text-wrap: balance; }
.plx-kick {
  position: relative;
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 10px;
  background: #0E131B;
  box-shadow: inset 0 0 0 2px var(--acc, var(--blue));
  font: 800 12px var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  transition: box-shadow 450ms var(--ease-out);
}
.plx-kick::after { content: ""; position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 0 10px 0 4px; background: var(--acc, var(--blue)); transition: background-color 450ms var(--ease-out); }

/* The camera stays put beside the steps while they scroll past it. */
.plx-show { padding: 30px 0 20px; scroll-margin-top: 60px; }
.plx-show__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; margin-top: 30px; }
.plx-show__stage { position: sticky; top: 90px; height: calc(100vh - 130px); max-height: 720px; }
.plx-show__stage::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 30%, transparent), transparent);
  filter: blur(10px);
  transition: background 450ms var(--ease-out);
}
.plx-show__stage .plx-cam { height: 100%; }
.plx-show__hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  translate: -50% 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(14, 19, 27, .8);
  font-size: 13px;
  font-weight: 600;
  color: #AEB9C6;
  pointer-events: none;
}
.plx-show__steps { padding: 18vh 0 22vh; }
.plx-step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 58vh;
  padding-left: 30px;
  opacity: .28;
  translate: 0 14px;
  transition: opacity 420ms var(--ease-out), translate 560ms var(--spring);
}
.plx-step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 0;
  border-radius: 3px;
  background: var(--acc);
  translate: 0 -50%;
  transition: height 560ms var(--spring), background-color 450ms var(--ease-out);
}
.plx-step.on { opacity: 1; translate: 0 0; }
.plx-step.on::before { height: 120px; }
.plx-step__n { font: 800 15px var(--display); letter-spacing: .1em; color: var(--acc); transition: color 450ms var(--ease-out); }
.plx-step h3 { margin: 8px 0 0; font: 800 clamp(28px, 3vw, 40px)/1.05 var(--display); text-transform: uppercase; color: #fff; }
.plx-step p { margin: 12px 0 0; max-width: 26em; font-size: 18px; line-height: 1.55; color: #C3CCD8; }

.plx-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.plx-modes span {
  padding: 8px 12px;
  border-radius: 9px;
  background: #0E131B;
  box-shadow: inset 0 0 0 2px #2A3446;
  font: 800 12px var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  scale: .8;
  transition: opacity 260ms var(--ease-out), scale 460ms var(--spring), box-shadow 300ms var(--ease-out);
  transition-delay: calc(var(--n) * 70ms);
}
.plx-step.on .plx-modes span { opacity: 1; scale: 1; }
.plx-modes span:hover { box-shadow: inset 0 0 0 2px var(--acc); }

/* Swatches: BONELAB tiles filled with the look, the corner tab and a lift on the one picked. */
.plx-sws { display: flex; flex-wrap: wrap; gap: 12px; }
.plx-sws--mini { gap: 8px; margin-top: 18px; }
.plx-sw {
  --s: 52px;
  position: relative;
  overflow: hidden;
  width: var(--s);
  height: var(--s);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--a), var(--b));
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: translate 300ms var(--spring), scale 300ms var(--spring), box-shadow 240ms var(--ease-out);
}
.plx-sws--mini .plx-sw { --s: 34px; border-radius: 9px; }
.plx-sw::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-radius: 0 12px 0 5px;
  background: #fff;
  transition: width 380ms var(--spring), height 380ms var(--spring);
}
.plx-sw:hover { translate: 0 -3px; }
.plx-sw:active { scale: .92; }
.plx-sw[aria-pressed="true"] { translate: 0 -4px; box-shadow: inset 0 0 0 3px #fff, 0 10px 26px color-mix(in srgb, var(--a) 45%, transparent); }
.plx-sw[aria-pressed="true"]::after { width: 13px; height: 13px; }
.plx-sws--mini .plx-sw[aria-pressed="true"]::after { width: 9px; height: 9px; }
.plx-sw:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.plx-colors .plx-sws .plx-sw { animation: plx-pop 520ms var(--spring) both; animation-delay: calc(var(--n) * 50ms); animation-play-state: paused; }
.plx-colors .rise.in .plx-sw { animation-play-state: running; }
@keyframes plx-pop { from { opacity: 0; scale: .5; } }

.plx-colors { padding: 90px 0 30px; }
.plx-colors__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 56px; max-width: 1180px; margin: 44px auto 0; }
.plx-colors__name { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.plx-colors__name span { font: 800 clamp(32px, 3.4vw, 48px)/1 var(--display); text-transform: uppercase; color: var(--acc); transition: color 450ms var(--ease-out); }
.plx-colors__name span.swap { animation: plx-swap 480ms var(--spring); }
@keyframes plx-swap { from { opacity: 0; translate: 0 12px; } }
.plx-colors__name em {
  padding: 5px 10px;
  border-radius: 8px;
  background: #22B455;
  font: 800 11px var(--display);
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.plx-colors__name em.is-plus { background: #0E131B; box-shadow: inset 0 0 0 2px var(--acc); }

/* A little CrazeLabs, drawn in CSS, wearing the look. */
.plx-app {
  overflow: hidden;
  border-radius: 16px;
  background: color-mix(in srgb, var(--acc) 6%, #070A10);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent), 0 30px 80px rgba(0, 0, 0, .55), 0 0 90px color-mix(in srgb, var(--acc) 16%, transparent);
  transition: background-color 450ms var(--ease-out), box-shadow 450ms var(--ease-out);
}
.plx-app * { transition: background-color 450ms var(--ease-out), color 450ms var(--ease-out), box-shadow 450ms var(--ease-out); }
.plx-app__bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: rgba(0, 0, 0, .3); }
.plx-app__bar span { width: 10px; height: 10px; border-radius: 50%; background: #2A3446; }
.plx-app__bar b { margin-left: 10px; font: 700 13px var(--display); color: #AEB9C6; }
.plx-app__body { display: flex; min-height: 330px; }
.plx-app__rail { display: flex; flex-direction: column; gap: 12px; width: 64px; padding: 16px 14px; background: rgba(0, 0, 0, .25); }
.plx-app__rail i { width: 36px; height: 36px; border-radius: 10px; background: #141B26; }
.plx-app__rail i.on { background: var(--acc); box-shadow: 0 6px 18px color-mix(in srgb, var(--acc) 45%, transparent); }
.plx-app__main { flex: 1; padding: 18px; }
.plx-app__hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 120px;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--acc) 55%, #0B1320), #0B1320 70%), url(/assets/bg/hub.jpg) center / cover;
  background-blend-mode: multiply;
}
.plx-app__hero em { font: 800 24px var(--display); font-style: normal; color: #fff; }
.plx-app__hero strong { padding: 10px 22px; border-radius: 10px; background: var(--acc); font: 800 14px var(--display); text-transform: uppercase; color: #fff; }
.plx-app__tabs { display: flex; gap: 18px; margin: 16px 0 10px; font-size: 13px; font-weight: 700; color: #6B7686; }
.plx-app__tabs .on { color: #fff; box-shadow: 0 3px 0 var(--acc); }
.plx-app__list { display: grid; gap: 8px; }
.plx-app__list div { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.plx-app__list i { width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--acc) 25%, #141B26); }
.plx-app__list span { flex: 1; display: grid; gap: 6px; }
.plx-app__list b { width: 45%; height: 9px; border-radius: 5px; background: #2A3446; }
.plx-app__list s { width: 28%; height: 7px; border-radius: 5px; background: #1B2330; }
.plx-app__list u { position: relative; width: 38px; height: 22px; border-radius: 11px; background: #2A3446; }
.plx-app__list u::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: translate 300ms var(--spring); }
.plx-app__list u.on { background: var(--acc); }
.plx-app__list u.on::after { translate: 16px 0; }

/* Buying: fills the screen, what you get on the left and the buttons on the right. */
.plx-get { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: calc(100vh - 70px); padding: 60px 0; scroll-margin-top: 70px; }
.plx-get__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 60% at 72% 50%, rgba(45, 151, 248, .2), transparent 70%),
    radial-gradient(35% 50% at 18% 40%, rgba(127, 214, 255, .06), transparent 70%);
}
.plx-get__glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent);
}
.plx-get__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 64px; width: 100%; max-width: 1240px; }
.plx-get__title { margin: 0; font: 800 clamp(52px, 6vw, 92px)/.95 var(--display); text-transform: uppercase; color: #fff; text-shadow: var(--shade); }
.plx-get__title b { color: var(--blue); }
.plx-get__price { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; font-size: 18px; color: #AEB9C6; }
.plx-get__price b { font: 800 44px var(--display); color: #fff; }
.plx-get__perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.plx-get__perks li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: var(--r-md);
  background: rgba(16, 21, 29, .8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  opacity: 0;
  translate: 0 16px;
  transition: opacity 420ms var(--ease-out), translate 620ms var(--spring), box-shadow 240ms var(--ease-out);
  transition-delay: calc(var(--n) * 90ms + 120ms);
}
.plx-get__pitch.in .plx-get__perks li { opacity: 1; translate: 0 0; }
.plx-get__perks li:hover { box-shadow: inset 0 0 0 1px rgba(45, 151, 248, .5); }
.plx-get__perks .bltile { flex: none; width: 46px; height: 46px; border-radius: 11px; }
.plx-get__perks .bltile::after { width: 10px; height: 10px; border-radius: 0 11px 0 4px; }
.plx-get__perks .bltile svg { width: 22px; height: 22px; }
.plx-get__perks b { display: block; font: 700 17px var(--display); color: #fff; }
.plx-get__perks span:not(.bltile) { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: #AEB9C6; }

.plx-buy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #111A27, #0B0F16 65%);
  box-shadow: inset 0 0 0 2px #2A3446, 0 30px 80px rgba(0, 0, 0, .5), 0 0 120px rgba(45, 151, 248, .12);
}
.plx-buy::after { content: ""; position: absolute; top: 0; right: 0; width: 20px; height: 20px; border-radius: 0 var(--r-lg) 0 7px; background: var(--blue); }
.plx-buy__go, .plx-buy__gift { width: 100%; }
.plx-buy .blb:disabled { opacity: .55; cursor: not-allowed; translate: none; }
.plx-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.plx-code > label[for="creatorCode"] { grid-column: 1 / -1; font-size: 14px; font-weight: 700; color: #C3CCD8; }
.plx-code__in {
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #0A0D13;
  box-shadow: inset 0 0 0 2px #2A3446;
  font: 800 16px var(--display);
  letter-spacing: .08em;
  color: #fff;
  transition: box-shadow 200ms var(--ease-out);
}
.plx-code__in:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
/* The anonymous tick. The browser's own checkbox can't be styled past its colour, so the real
   one stays for the keyboard and screen readers and a box of our own is drawn beside it. */
.plx-code__row { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; cursor: pointer; }

.plx-code__row input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  border: 0; overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}

.plx-code__box {
  flex: none;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  margin-top: 1px;
  border: 2px solid rgba(255, 255, 255, .18);
  border-radius: 6px;
  background: rgba(0, 0, 0, .25);
  color: #fff;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

.plx-code__box svg {
  width: 13px; height: 13px;
  opacity: 0; transform: scale(.7);
  transition: opacity 140ms var(--ease-out), transform 200ms cubic-bezier(.22, 1, .36, 1);
}

.plx-code__row:hover .plx-code__box { border-color: var(--blue); }
.plx-code__row input:checked + .plx-code__box { background: var(--blue); border-color: var(--blue); }
.plx-code__row input:checked + .plx-code__box svg { opacity: 1; transform: none; }
.plx-code__row input:focus-visible + .plx-code__box { outline: 2px solid #5BB0FF; outline-offset: 2px; }

.plx-code__text { display: block; font-size: 13.5px; line-height: 1.4; }
.plx-code__text b { display: block; color: #E6EDF6; font-weight: 600; }
.plx-code__text small { display: block; margin-top: 2px; font-size: 12.5px; color: #8E9AAB; }

@media (prefers-reduced-motion: reduce) {
  .plx-code__box, .plx-code__box svg { transition: none; }
}
#codeSay { grid-column: 1 / -1; }
#codeSay:empty { display: none; }
.plx-buy .code__bad { font-size: 13.5px; color: #ff8a8a; }
.plx-buy__note { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: #8190A3; }
.plx-buy .yours { display: none; padding: 12px 14px; border: 1px solid rgba(45, 151, 248, .4); border-radius: 10px; background: rgba(45, 151, 248, .08); font-size: 14.5px; color: #CFE6FF; }
.plx-buy .yours.show { display: block; }

@media (prefers-reduced-motion: reduce) {
  .front .plx-hero__glow,
  .front .plx-title b { animation-iteration-count: infinite !important; }
}

@media (max-width: 960px) {
  .plx-hero { padding-top: 110px; }
  .plx-hero__in { grid-template-columns: minmax(0, 1fr); min-height: 0; text-align: center; }
  .plx-hero__sub { margin-inline: auto; }
  .plx-hero__cta { justify-content: center; }
  .plx-hero__cam { height: 340px; }
  .plx-show__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .plx-show__stage { top: 64px; z-index: 2; height: 38vh; min-height: 240px; background: linear-gradient(#080A0E 80%, transparent); }
  .plx-show__steps { padding: 4vh 0 10vh; }
  .plx-step { min-height: 46vh; }
  .plx-colors__row { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .plx-colors__pick { order: -1; text-align: center; }
  .plx-colors__name, .plx-colors .plx-sws { justify-content: center; }
  .plx-get { min-height: 0; }
  .plx-get__in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .plx-get__pitch { text-align: center; }
  .plx-get__price { justify-content: center; }
  .plx-get__perks { text-align: left; }
}
@media (max-width: 520px) {
  .plx-sw { --s: 44px; }
  .plx-sws--mini .plx-sw { --s: 30px; }
  .plx-app__rail { display: none; }
  .plx-buy { padding: 24px 20px; }
  .plx-get__perks { grid-template-columns: minmax(0, 1fr); }
  .plx-code { grid-template-columns: minmax(0, 1fr); }
  .plx-show__hint { display: none; }
}

/* ---- Terms and Privacy ----
   A short head, the sections listed down the side (it follows you as you read), and the text
   at a comfortable width, with the short version in a card at the top. */

.lgl-hero { padding: 120px 0 26px; text-align: center; }
.lgl-title { margin: 14px 0 0; font: 800 clamp(40px, 5.4vw, 72px)/1 var(--display); text-transform: uppercase; color: #fff; text-shadow: var(--shade); }
.lgl-date { margin: 12px 0 0; font-size: 15px; color: #8190A3; }
.lgl-tabs { justify-content: center; margin-top: 22px; }
.lgl-tabs a { text-decoration: none; }
.lgl-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; max-width: 1160px; padding-bottom: 30px; }
.lgl-toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; }
.lgl-toc p { margin: 0 0 10px; font: 800 12px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #6B7686; }
.lgl-toc nav { display: grid; gap: 2px; }
.lgl-toc a {
  display: flex;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 14.5px;
  line-height: 1.3;
  color: #8E9AAB;
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
.lgl-toc a span { flex: none; width: 20px; font: 800 12px/1.6 var(--display); color: #4E5968; transition: color 180ms var(--ease-out); }
.lgl-toc a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.lgl-toc a.on { color: #fff; background: rgba(45, 151, 248, .12); }
.lgl-toc a.on span { color: var(--blue); }
.lgl-body { max-width: 760px; font-size: 17px; line-height: 1.7; color: #C3CCD8; }
.lgl-lead { margin: 0; font-size: 19px; line-height: 1.6; color: #E3E9F1; }
.lgl-sum {
  position: relative;
  margin: 26px 0 16px;
  padding: 24px 26px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #111A27, #0B0F16 70%);
  box-shadow: inset 0 0 0 2px #2A3446;
}
.lgl-sum::after { content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px; border-radius: 0 var(--r-lg) 0 6px; background: var(--blue); }
.lgl-sum h2 { margin: 0 0 10px; font: 800 20px var(--display); text-transform: uppercase; color: #fff; }
.lgl-sum ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lgl-sum li { position: relative; padding-left: 26px; color: #E3E9F1; }
.lgl-sum li::before { content: ""; position: absolute; top: .55em; left: 2px; width: 12px; height: 12px; border-radius: 3px; background: var(--blue); }
.lgl-sum p { margin: 14px 0 0; font-size: 14px; color: #8190A3; }
.lgl-sec { padding-top: 34px; scroll-margin-top: 80px; }
.lgl-sec h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font: 800 26px/1.2 var(--display); color: #fff; }
.lgl-sec h2 span { font-size: 15px; letter-spacing: .08em; color: var(--blue); }
.lgl-sec p { margin: 0 0 14px; }
.lgl-sec ul { display: grid; gap: 8px; margin: 0 0 14px; padding-left: 22px; }
.lgl-sec li::marker { color: var(--blue); }
.lgl-sec b { color: #fff; }
.lgl-body a { color: #7FC4FF; text-decoration: underline; text-decoration-color: rgba(127, 196, 255, .35); text-underline-offset: 3px; }
.lgl-body a:hover { color: #fff; text-decoration-color: currentColor; }
.lgl-table { overflow-x: auto; margin: 4px 0 16px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.lgl-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.lgl-table th { padding: 12px 16px; background: #10151D; font: 800 12px var(--display); letter-spacing: .08em; text-align: left; text-transform: uppercase; color: #8E9AAB; }
.lgl-table td { padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .06); vertical-align: top; }
.lgl-table td:first-child { width: 44%; color: #E3E9F1; font-weight: 600; }

@media (max-width: 960px) {
  .lgl-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lgl-toc { display: none; }
  .lgl-body { margin: 0 auto; }
}
@media (max-width: 560px) {
  .lgl-body { font-size: 16px; }
  .lgl-table td:first-child { width: auto; }
  .lgl-table tr { display: grid; }
  .lgl-table thead { display: none; }
  .lgl-table td + td { border-top: 0; padding-top: 0; }
}

/* ---- Motion stays on ----
   This PC, like plenty of others, has Windows animations switched off, and browsers pass
   that on as "reduce motion". style.css answers it by stopping every looping animation after
   one pass and showing scroll reveals at once, which on this page would leave the mods
   frozen and nothing moving. The owner asked for the page to move, so it keeps moving. */
@media (prefers-reduced-motion: reduce) {
  .front .msearch__caret,
  .front .wall__col,
  .front .fb__loop,
  .front .fb__loop::after,
  .front .pk--skel *,
  .front .cam-hero__bg,
  .front .ss__more,
  .front .ss__run { animation-iteration-count: infinite !important; }
}

/* ---- Narrower screens ---- */

@media (max-width: 1180px) {
  .lnews__grid { grid-template-columns: minmax(0, 1fr) 400px; }
  .lpromo__text { font-size: 14px; }
  .mrow { gap: 44px; }
}

@media (max-width: 1040px) {
  .ltiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ltile { height: 300px; }
  .lnews__grid { grid-template-columns: minmax(0, 1fr); }
  .mrow { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 72px; }
  .mrow--flip .mrow__copy { order: 0; }
  .fbento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fb--end { grid-column: span 2; }
  .lband { flex-wrap: wrap; padding: 32px; }
  .lband .blb { margin-left: 0; }
}

@media (max-width: 760px) {
  .lwrap { padding: 0 16px; }
  .lhero { padding-bottom: 100px; }
  .lhero__in { padding-top: 96px; }
  .lhero__mark { width: 112px; }
  .lhero__sub { font-size: 17px; }
  .lhero__cta { flex-direction: column; align-items: center; gap: 12px; }
  .lhero__cta .blb { width: 100%; max-width: 320px; }
  .ltiles-sec { margin-top: -64px; }
  .ltile { height: 210px; }
  .ltile__kick { font-size: 11px; letter-spacing: .14em; }
  .ltile { padding: 20px 20px 22px; }
  .mplay { padding-top: 56px; }
  .mhead p, .mrow__copy p { font-size: 17px; }
  .marquee { margin: 28px 0 64px; }
  .mmod { width: 280px; }
  .msearch__sort { display: none; }
  .mres img { width: 52px; height: 52px; }
  .fbento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 340px; gap: 16px; }
  .fb--wide, .fb--end { grid-column: auto; }
  .pkp__hero { padding: 110px 16px 50px; }
  .pkp__wall .fb__pk { width: 170px; }
  .pkp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pk__body { padding: 10px 11px 12px; }
  .pk__name { font-size: 15px; }
  .pk__by { font-size: 12.5px; }
  .pk__meta { gap: 4px 10px; font-size: 12px; }
  .pk__src { width: 30px; height: 30px; top: 7px; left: 7px; }
  .pk__src img { width: 20px; height: 20px; }
  .pk__ok { top: 7px; right: 7px; width: 28px; height: 28px; }
  .pkp__title h2 { font-size: 23px; }
  .fb__stores, .fb:is(:hover, :focus-visible) .fb__stores { gap: 14px; }
  .fb__store { width: 84px; height: 84px; border-radius: 17px; }
  .fb__store img { width: 50px; height: 50px; border-radius: 11px; }
  .fb__slide img { width: 170px; height: 215px; margin: 0 -20px; }
  .lnews { padding-top: 100px; }
  .lpromo { flex-wrap: wrap; padding: 14px; }
  .lpromo__logo { padding: 0; }
  .lpromo__text { flex-basis: 100%; padding: 4px 0 8px; }
  .lpromo__go { flex: 1; }
  .lfeat { min-height: 380px; }
  .lfeat__mid { inset: 0 20px 70px; }
  .lby { font-size: 16px; }
  .lby img { width: 40px; height: 40px; }
  .lmore { font-size: 16px; }
  .lfeat__when { font-size: 16px; }
  .lband-sec { padding-top: 60px; }
  .lband { padding: 26px 22px; gap: 20px; }
  .lband__logo { width: 80px; }
  .lband__text { font-size: 18px; flex-basis: 100%; }
  .lband .blb { width: 100%; }
  .blb--xl { min-height: 60px; font-size: 22px; }
  .ltry__frame { height: 300px; }
  .ltry__small { display: block; }
}

@media (max-width: 460px) {
  .ltiles { grid-template-columns: minmax(0, 1fr); }
  .ltile { height: 170px; }
  .mfoot__in, .mfoot__base { justify-content: center; text-align: center; }
  .mfoot__links { justify-content: center; }
  .mfoot__legal { margin-left: 0; }
}