.page--shorts {
  --shorts-bg: #09090b;
  --shorts-panel: #141418;
  --shorts-muted: #b7b7c0;
  height: 100dvh;
  overflow: hidden;
  background: var(--shorts-bg);
  color: #fff;
}
.page--shorts .grain,
.page--shorts .masthead__rule,
.page--shorts .brand__sub,
.page--shorts .colophon { display: none; }
.page--shorts .masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding: .85rem 0 2.5rem;
  background: linear-gradient(#09090bee 0%, #09090bba 48%, transparent 100%);
  color: #fff;
}
.page--shorts .masthead__inner { align-items: center; }
.page--shorts .brand { align-items: center; }
.page--shorts .brand__mark {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  background: var(--vermillion);
  color: #fff;
}
.page--shorts .brand__name { font: 700 1rem var(--sans); letter-spacing: -.02em; }
.page--shorts .masthead__nav { font-size: .8rem; letter-spacing: 0; }
.page--shorts .masthead__nav a[href="/shorts/"] { color: #ff7c87; font-weight: 700; }
.page--shorts .masthead__toggle { border-color: #ffffff55; color: #fff; }
.page--shorts .masthead__toggle[aria-expanded="true"] { background: #fff; color: #111; border-color: #fff; }
.page--shorts .page {
  width: 100%;
  max-width: none;
  height: 100dvh;
  margin: 0;
  padding: 0;
}
.shorts,
.shorts__feed { height: 100%; }
.shorts__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.shorts__feed {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  touch-action: pan-y;
}
.shorts__feed::-webkit-scrollbar { display: none; }
.shorts__card {
  min-height: 100dvh;
  padding: 5.25rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  display: grid;
  place-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background:
    radial-gradient(circle at 50% 35%, #292930 0%, #111115 42%, #09090b 72%);
}
.shorts__card-inner {
  width: min(100%, 43rem, 80dvh);
  max-height: calc(100dvh - 6.25rem);
  overflow: hidden;
  border: 1px solid #ffffff1f;
  border-radius: 18px;
  background: var(--shorts-panel);
  box-shadow: 0 26px 80px #000a;
}
.shorts__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #050506;
}
.shorts__poster-bg {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  filter: blur(26px) saturate(.7) brightness(.38);
  transform: scale(1.05);
}
.shorts__poster {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.shorts__media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(transparent 64%, #0008 100%);
}
.shorts__play {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .7rem;
  border: 0;
  background: #0000000d;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow: 0 2px 12px #000;
}
.shorts__play-icon {
  width: 4.4rem;
  height: 4.4rem;
  padding-left: .25rem;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff77;
  border-radius: 50%;
  background: #0b0b0dbf;
  font-size: 1.45rem;
  box-shadow: 0 8px 28px #0008;
  transition: transform .2s ease, background .2s ease;
}
.shorts__play:hover .shorts__play-icon { transform: scale(1.05); background: var(--vermillion); }
.shorts__player {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.shorts__info { padding: 1rem 1.1rem 1.1rem; }
.shorts__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .55rem;
  color: var(--shorts-muted);
  font-size: .76rem;
}
.shorts__eyebrow a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shorts__eyebrow a:hover { color: #fff; }
.shorts__eyebrow span {
  flex: 0 0 auto;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: var(--vermillion);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.shorts__name {
  display: -webkit-box;
  min-height: 2.8em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #fff;
  font-size: clamp(.92rem, 3vw, 1.05rem);
  font-weight: 700;
  line-height: 1.4;
}
.shorts__name:hover { color: #ff9ca4; border-bottom-color: transparent; }
.shorts__price {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  margin-top: .6rem;
}
.shorts__price > span { color: #92929c; font-size: .72rem; }
.shorts__price strong { color: #ff737e; font-size: 1.55rem; line-height: 1; letter-spacing: -.04em; }
.shorts__price small { margin-left: .15rem; font-size: .65rem; letter-spacing: 0; }
.shorts__actions { display: grid; margin-top: .8rem; }
.shorts__buy {
  min-height: 44px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 0;
  border-radius: 10px;
  background: var(--vermillion);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
}
.shorts__buy:hover { border: 0; background: var(--vermillion-deep); }
.shorts__hint,
.shorts__position,
.shorts__nav,
.shorts__status { position: fixed; z-index: 70; }
.shorts__hint {
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: .42rem .75rem;
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  background: #09090bcc;
  color: #dddde3;
  font-size: .7rem;
  white-space: nowrap;
  transition: opacity .25s, transform .25s;
}
.shorts__hint.is-hidden { opacity: 0; transform: translate(-50%, .5rem); pointer-events: none; }
.shorts__position {
  top: 5rem;
  left: max(1rem, env(safe-area-inset-left));
  display: flex;
  align-items: baseline;
  gap: .5rem;
  color: #ffffff99;
  font: .62rem var(--mono);
  letter-spacing: .14em;
}
.shorts__position strong,
.shorts__position #shorts-current { color: #fff; font-size: .9rem; letter-spacing: .04em; }
.shorts__nav {
  right: max(.7rem, env(safe-area-inset-right));
  top: 50%;
  display: grid;
  gap: .5rem;
  transform: translateY(-50%);
}
.shorts__nav button {
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff2e;
  border-radius: 50%;
  background: #09090bcc;
  color: #fff;
  font-weight: 700;
}
.shorts__nav button:disabled { opacity: .25; cursor: default; }
.shorts__status {
  inset: 50% auto auto 50%;
  width: min(28rem, calc(100% - 2rem));
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}
.shorts__card--loading .shorts__card-inner { min-height: min(38rem, calc(100dvh - 7rem)); }
.shorts__loading-media { height: min(58dvh, 28rem); background: #24242a; }
.shorts__loading-copy { display: grid; gap: .75rem; padding: 1.2rem; }
.shorts__loading-copy i { height: .8rem; border-radius: 999px; background: #29292f; }
.shorts__loading-copy i:nth-child(2) { width: 78%; }
.shorts__loading-copy i:nth-child(3) { width: 48%; }

@media (max-width: 720px) {
  .page--shorts .masthead { padding: .65rem 0 2rem; background: linear-gradient(#09090bf5 0%, #09090bc4 58%, transparent 100%); }
  .page--shorts .masthead__inner { padding: 0 1rem; }
  .page--shorts .masthead__nav {
    margin: .5rem -1rem 0;
    padding: 0 1rem .5rem;
    border-top-color: #ffffff24;
    background: #09090bf5;
  }
  .page--shorts .masthead__nav a { border-bottom-color: #ffffff24; }
  .shorts__card { padding: 4.4rem 0 max(.75rem, env(safe-area-inset-bottom)); }
  .shorts__card-inner { width: min(100%, 34rem); max-height: calc(100dvh - 5.15rem); border-radius: 0; border-inline: 0; }
  .shorts__info { padding: .85rem max(1rem, env(safe-area-inset-right)) max(.9rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
  .shorts__nav { right: max(.45rem, env(safe-area-inset-right)); }
  .shorts__nav button { width: 40px; height: 40px; }
  .shorts__position { top: 4.15rem; }
  .shorts__hint { bottom: max(.6rem, env(safe-area-inset-bottom)); }
}

@media (orientation: landscape) and (max-height: 620px) {
  .shorts__card { padding-block: 3.8rem .6rem; }
  .shorts__card-inner {
    width: min(58rem, calc(100% - 7rem));
    max-height: calc(100dvh - 4.4rem);
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr);
  }
  .shorts__media { max-height: none; height: 100%; aspect-ratio: auto; }
  .shorts__info { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .shorts__feed { scroll-behavior: auto; }
  .shorts__play-icon,
  .shorts__hint { transition: none; }
}