/* Shared streaming grammar for Toybox browse and learning surfaces. */
.streaming-refined {
  --stream-red: #e50914;
  --stream-text: #f5f5f7;
  --stream-muted: #a6a6af;
  --stream-line: rgba(255,255,255,.1);
}

.streaming-refined .sec {
  padding: 22px 0 6px;
}

.streaming-refined:not(.games-view) #bumpfiends {
  display: none;
}

.streaming-refined .sec__head {
  margin: 0 0 10px;
  padding: 0 40px;
}

.streaming-refined .sec__kicker {
  display: none;
}

.streaming-refined .sec__title,
.streaming-refined .creative-learning__shorts-head h3 {
  margin: 0;
  color: var(--stream-text);
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-transform: none;
}

.streaming-refined .sec__title .accent,
.streaming-refined .bf .sec__title .accent,
.streaming-refined .rp .sec__title .accent,
.streaming-refined .addon-showcase__head .accent {
  color: inherit;
}

.streaming-refined #rp-videos .sec__title .accent {
  color: inherit;
}

.streaming-refined .row__track {
  gap: 10px;
  padding: 4px 40px 22px;
}

.streaming-refined #featured .card {
  flex-basis: clamp(250px, 25vw, 360px);
  width: clamp(250px, 25vw, 360px);
  aspect-ratio: 16 / 9;
}

.streaming-refined #featured .card__overlay,
.streaming-refined #all .card__overlay {
  opacity: 1;
  background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.92));
}

.streaming-refined #featured .card__title,
.streaming-refined #all .card__title {
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
}

.streaming-refined #featured .card__sub,
.streaming-refined #all .card__sub {
  font-size: 11px;
}

.streaming-refined #bumpfiends .bf-strip,
.streaming-refined #roleplay .rp-strip {
  display: none;
}

.streaming-refined #bumpfiends .bf-card {
  flex-basis: clamp(250px, 23vw, 340px);
  width: clamp(250px, 23vw, 340px);
  aspect-ratio: 16 / 10;
  border-color: var(--stream-line);
}

.streaming-refined #bumpfiends .bf-card::after {
  opacity: .18;
}

.streaming-refined #bumpfiends .bf-card__no {
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-shadow: none;
}

.streaming-refined #bumpfiends .bf-card__name {
  opacity: 1;
  transform: none;
  background: linear-gradient(to top, rgba(0,0,0,.92), transparent);
}

.streaming-refined #bumpfiends .bf-card__name strong {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.streaming-refined #bumpfiends .bf-card__name span {
  color: rgba(255,255,255,.7);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: none;
}

.streaming-refined .toybox-show-card__tagline,
.streaming-refined .toybox-show-card__details {
  display: none;
}

.streaming-refined .toybox-show-card__body {
  padding-top: 9px;
}

.streaming-refined .toybox-show-card__title {
  font-size: 15px;
  letter-spacing: 0;
}

.streaming-refined .toybox-show-card__media,
.streaming-refined .cont__thumb,
.streaming-refined .vid__thumb,
.streaming-refined .rp-short-card {
  border-radius: 6px;
}

.streaming-refined .roleplay-guides {
  margin-top: 18px;
}

.streaming-refined .roleplay-guides__grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 40px 22px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.streaming-refined .roleplay-guides__grid::-webkit-scrollbar {
  display: none;
}

.streaming-refined .roleplay-guide {
  position: relative;
  flex: 0 0 clamp(250px, 26vw, 380px);
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  border-color: var(--stream-line);
  background: #111;
  scroll-snap-align: start;
  isolation: isolate;
}

.streaming-refined .roleplay-guide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.streaming-refined .roleplay-guide::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.94));
}

.streaming-refined .roleplay-guide__copy {
  position: absolute;
  z-index: 2;
  display: block;
  right: 16px;
  bottom: 14px;
  left: 16px;
}

.streaming-refined .roleplay-guide span {
  color: rgba(255,255,255,.7);
  font-size: 9px;
  letter-spacing: .1em;
}

.streaming-refined .roleplay-guide h3 {
  margin: 5px 0 0;
  font-size: 16px;
  line-height: 1.2;
}

.streaming-refined .roleplay-guide p {
  display: none;
}

.streaming-refined .roleplay-guide:is(:hover, :focus-visible) img {
  transform: scale(1.045);
}

.streaming-refined .addon-showcase {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.streaming-refined .addon-showcase__head {
  align-items: center;
  margin: 0 0 10px;
  padding: 0 40px;
}

.streaming-refined .addon-showcase__head > div > p:not(.sec__kicker) {
  display: none;
}

.streaming-refined .addon-showcase__head .btn {
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: transparent;
  color: #fff;
  font-size: 12px;
}

.streaming-refined .addon-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 40px 22px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.streaming-refined .addon-rail::-webkit-scrollbar {
  display: none;
}

.streaming-refined .addon-card {
  flex: 0 0 clamp(250px, 25vw, 360px);
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  border-color: var(--stream-line);
  border-radius: 6px;
  background: #111;
  scroll-snap-align: start;
  isolation: isolate;
}

.streaming-refined .addon-card::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.06) 22%, rgba(0,0,0,.94));
}

.streaming-refined .addon-card__art {
  position: absolute;
  inset: 0;
  height: auto;
  margin: 0;
  border-radius: 0;
}

.streaming-refined .addon-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.streaming-refined .addon-card__art--contain {
  background: #090814;
}

.streaming-refined .addon-card__art--contain img {
  padding: 13%;
  object-fit: contain;
}

.streaming-refined .addon-card__status {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  border-radius: 3px;
  background: rgba(229,9,20,.92);
  color: #fff;
}

.streaming-refined .addon-card h3 {
  position: absolute;
  z-index: 3;
  right: 42px;
  bottom: 16px;
  left: 16px;
  font-size: 16px;
  text-transform: none;
}

.streaming-refined .addon-card p {
  display: none;
}

.streaming-refined .addon-card__arrow {
  z-index: 3;
  color: #fff;
}

.streaming-refined .addon-card:is(:hover, :focus-visible) {
  transform: scale(1.04) translateY(-3px);
  border-color: rgba(255,255,255,.28);
}

.streaming-refined .addon-card:is(:hover, :focus-visible) .addon-card__art img {
  transform: scale(1.045);
}

.streaming-refined #community .empty {
  margin: 0;
  padding: 26px 40px;
  border-top: 1px solid var(--stream-line);
}

.streaming-refined #all .grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.streaming-refined #all .card {
  aspect-ratio: 2 / 3;
}

/* Dedicated tutorial browse surface. */
.tutorials-view .tutorials-nav__links a[aria-current='page'] {
  box-shadow: inset 0 -2px var(--stream-red);
}

.tutorials-view .tutorials-page__masthead {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  height: 72vh;
  overflow: hidden;
  padding: 118px 48px 62px;
  border-bottom: 0;
}

.tutorials-view .tutorials-page__masthead-backdrop {
  position: absolute;
  inset: 0;
}

.tutorials-view .tutorials-page__masthead-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tutorials-view .tutorials-page__masthead-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, #08080c 1%, transparent 42%),
    linear-gradient(to right, rgba(8,8,12,.95), rgba(8,8,12,.5) 52%, transparent 82%);
}

.tutorials-view .tutorials-page__masthead-content {
  position: relative;
  z-index: 1;
  max-width: 610px;
}

.tutorials-view .tutorials-page__masthead-content > p:first-child {
  margin: 0;
  color: #ff5963;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.tutorials-view .tutorials-page__masthead h1 {
  margin: 9px 0 14px;
  color: #fff;
  font-size: clamp(58px, 8vw, 108px);
  line-height: .9;
}

.tutorials-view .tutorials-page__masthead h1 span {
  color: inherit;
}

.tutorials-view .tutorials-page__masthead-meta {
  display: flex;
  gap: 9px;
  color: #c7c7cc;
  font-size: 13px;
}

.tutorials-view .tutorials-page__masthead-description {
  max-width: 500px;
  margin: 14px 0 22px;
  color: #d4d4d8;
  font-size: 15px;
  line-height: 1.55;
}

.tutorials-view .tutorials-page__masthead-actions {
  display: flex;
  gap: 12px;
}

.tutorials-view .tutorials-page__masthead-actions button,
.tutorials-view .tutorials-page__masthead-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 6px;
  font: 700 15px Inter, system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.tutorials-view .tutorials-page__masthead-actions button {
  background: #fff;
  color: #08080c;
}

.tutorials-view .tutorials-page__masthead-actions a {
  background: rgba(109,109,110,.65);
  color: #fff;
}

.tutorials-view .creative-learning__intro {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
  margin: -43px 40px 10px;
}

.tutorials-view .creative-learning__intro p {
  display: none;
}

.tutorials-view .creative-learning__intro a {
  color: #fff;
  font-size: 12px;
}

.tutorials-view .software-rail,
.tutorials-view .tutorial-short-rail {
  gap: 10px;
  padding: 4px 40px 24px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.tutorials-view .software-rail::-webkit-scrollbar,
.tutorials-view .tutorial-short-rail::-webkit-scrollbar {
  display: none;
}

.tutorials-view .software-card,
.tutorials-view .tutorial-short-card {
  flex: 0 0 clamp(250px, 26vw, 380px);
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  scroll-snap-align: start;
}

.tutorials-view .software-card {
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tutorials-view .software-card__index,
.tutorials-view .tutorial-short-card__eyebrow,
.tutorials-view .tutorial-player__eyebrow,
.tutorials-view .learning-detail__eyebrow {
  color: #ff5963;
}

.tutorials-view .software-card strong,
.tutorials-view .tutorial-short-card strong {
  font-size: 17px;
  text-transform: none;
}

.tutorials-view .software-card p,
.tutorials-view .tutorial-short-card p {
  display: none;
}

.tutorials-view .creative-learning__shorts-head {
  margin: 16px 40px 10px;
}

.tutorials-view .creative-learning__shorts-head span {
  display: none;
}

.tutorials-view .tutorial-short-card__play {
  width: 40px;
  height: 40px;
}

.learning-detail {
  position: fixed;
  z-index: 10070;
  inset: 0;
  display: none;
  place-items: center;
  padding: 22px;
  background: rgba(0,0,0,.9);
  backdrop-filter: blur(16px);
}

.learning-detail.is-open {
  display: grid;
}

.learning-detail__shell {
  width: min(900px, 100%);
  overflow: hidden;
  border-radius: 8px;
  background: #141419;
  box-shadow: 0 26px 90px rgba(0,0,0,.7);
}

.learning-detail__media {
  position: relative;
  aspect-ratio: 16 / 7;
}

.learning-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.learning-detail__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #141419, transparent 62%);
}

.learning-detail__close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.learning-detail__body {
  padding: 0 28px 28px;
}

.learning-detail__eyebrow {
  margin: 0 0 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.learning-detail__title {
  margin: 0;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1;
}

.learning-detail__description {
  max-width: 650px;
  margin: 13px 0 22px;
  color: var(--stream-muted);
  line-height: 1.55;
}

.learning-detail__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 6px;
  background: #fff;
  color: #08080c;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 760px) {
  .streaming-refined .sec {
    padding-top: 18px;
  }

  .streaming-refined .sec__head,
  .streaming-refined .addon-showcase__head {
    padding-right: 16px;
    padding-left: 16px;
  }

  .streaming-refined .row__track,
  .streaming-refined .roleplay-guides__grid,
  .streaming-refined .addon-rail,
  .tutorials-view .software-rail,
  .tutorials-view .tutorial-short-rail {
    padding-right: 16px;
    padding-left: 16px;
  }

  .streaming-refined #featured .card,
  .streaming-refined #bumpfiends .bf-card,
  .streaming-refined .rp-short-card,
  .streaming-refined .roleplay-guide,
  .streaming-refined .addon-card,
  .tutorials-view .software-card,
  .tutorials-view .tutorial-short-card {
    flex-basis: min(78vw, 330px);
  }

  .streaming-refined .addon-showcase__head {
    align-items: center;
    flex-direction: row;
  }

  .streaming-refined .addon-showcase__head .btn {
    flex: none;
  }

  .streaming-refined #all .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-right: 16px;
    padding-left: 16px;
  }

  .tutorials-view .tutorials-nav__links a[aria-current='page'] {
    box-shadow: inset 3px 0 var(--stream-red);
  }

  .tutorials-view .tutorials-page__masthead {
    min-height: 560px;
    height: 74vh;
    padding: 108px 16px 46px;
  }

  .tutorials-view .tutorials-page__masthead-backdrop img {
    object-position: 62% center;
  }

  .tutorials-view .tutorials-page__masthead-backdrop::after {
    background:
      linear-gradient(to top, #08080c 2%, transparent 46%),
      linear-gradient(to right, rgba(8,8,12,.96), rgba(8,8,12,.54) 72%, transparent);
  }

  .tutorials-view .tutorials-page__masthead h1 {
    font-size: clamp(58px, 17vw, 86px);
  }

  .tutorials-view .tutorials-page__masthead-description {
    max-width: 92%;
    font-size: 14px;
  }

  .tutorials-view .creative-learning__intro {
    margin: -38px 16px 8px;
  }

  .tutorials-view .creative-learning__shorts-head {
    margin-right: 16px;
    margin-left: 16px;
  }

  .learning-detail {
    padding: 12px;
  }

  .learning-detail__media {
    aspect-ratio: 16 / 9;
  }

  .learning-detail__body {
    padding: 0 20px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .streaming-refined .roleplay-guide img,
  .streaming-refined .addon-card,
  .streaming-refined .addon-card__art img,
  .tutorials-view .software-card img,
  .tutorials-view .tutorial-short-card img {
    transition: none !important;
  }
}