.cm-page-stars,
.cm-stars-page{
  background:#5c0014;
  color:#fff8f0;
}

.cm-stars-page{
  position:relative;
}

.cm-stars-hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  background:#170305;
}

.cm-stars-hero__media,
.cm-stars-hero__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.cm-stars-hero__media img{
  display:block;
  object-fit:cover;
  object-position:center center;
  filter:saturate(1.08) contrast(1.03);
}

.cm-stars-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,
      rgba(14,6,8,.04) 0%,
      rgba(14,6,8,.07) 52%,
      rgba(35,0,9,.12) 70%,
      rgba(80,0,19,.24) 84%,
      rgba(121,0,28,.58) 94%,
      rgba(141,6,34,.90) 100%),
    radial-gradient(circle at 82% 18%, rgba(255,237,183,.12), transparent 28%),
    radial-gradient(circle at 72% 12%, rgba(255,249,233,.08), transparent 18%);
}

.cm-stars-hero__inner{
  position:relative;
  z-index:2;
  width:min(100%, 1680px);
  min-height:100svh;
  margin:0 auto;
}

.cm-stars-hero__panel{
  position:absolute;
  top:10px;
  right:12px;
  width:min(430px, 26vw);
  max-width:calc(100vw - 20px);
  padding:22px 28px 24px 30px;
  border-radius:32px;
  border:1px solid rgba(255,228,188,.22);
  background:
    linear-gradient(180deg, rgba(81,8,20,.30), rgba(18,3,7,.48)),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,221,167,.02));
  box-shadow:
    0 24px 80px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,248,230,.16),
    inset 0 -1px 0 rgba(89,6,20,.38);
  backdrop-filter:blur(12px);
  overflow:hidden;
  isolation:isolate;
}

.cm-stars-hero__panel::before,
.cm-stars-hero__panel::after,
.cm-stars-stage__head::before,
.cm-stars-stage__head::after,
.cm-stars-section::after,
.cm-stars-block::after,
.cm-stars-card::after,
.cm-stars-switches__btn::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1.6px;
  background:linear-gradient(115deg,
      rgba(255,245,220,0) 0%,
      rgba(255,245,220,0) 34%,
      rgba(255,238,210,0) 42%,
      rgba(255,252,247,.98) 48%,
      rgba(255,222,130,.96) 50%,
      rgba(255,246,220,.88) 52%,
      rgba(255,238,210,0) 58%,
      rgba(255,245,220,0) 100%);
  background-size:240% 100%;
  background-position:165% 50%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  mix-blend-mode:screen;
  animation:cmStarsGoldSweep 8.4s linear infinite;
}

.cm-stars-hero__panel::before{
  padding:1.85px;
}

.cm-stars-hero__panel::after{
  inset:auto 18px auto auto;
  top:14px;
  right:18px;
  width:auto;
  height:auto;
  padding:0;
  background:none;
  -webkit-mask:none;
  animation:none;
  content:"✦  ✧  ✦";
  color:rgba(255,226,140,.86);
  font-size:1rem;
  letter-spacing:.34em;
  text-shadow:0 0 10px rgba(255,229,158,.72), 0 0 24px rgba(255,217,110,.32);
  opacity:.88;
}

.cm-stars-hero__title{
  margin:0 0 14px;
  padding-right:2rem;
  font-size:clamp(2.55rem, 4.9vw, 5.5rem);
  line-height:.92;
  letter-spacing:.01em;
  color:#fff8ea;
  background:linear-gradient(180deg, #fffefb 0%, #fff2c8 32%, #ffd66c 58%, #fff4d6 79%, #fffefb 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 2px 0 rgba(118,47,6,.30), 0 0 16px rgba(255,224,136,.22), 0 14px 30px rgba(0,0,0,.24);
  filter:drop-shadow(0 0 10px rgba(255,217,118,.22));
}

.cm-stars-hero__lead{
  margin:0;
  max-width:40ch;
  font-size:clamp(1rem, 1.65vw, 1.14rem);
  line-height:1.72;
  color:rgba(255,247,239,.94);
  text-shadow:0 3px 18px rgba(0,0,0,.20);
}

.cm-stars-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#ffe3a1;
}

.cm-stars-kicker::before{
  content:"";
  width:34px;
  height:1px;
  background:currentColor;
  opacity:.68;
}

.cm-stars-scrollcue{
  position:absolute;
  left:50%;
  bottom:max(10px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:3;
  display:block;
  text-decoration:none;
}

.cm-stars-scrollcue__img{
  display:block;
  width:min(7vw, 54px);
  height:auto;
  filter:drop-shadow(0 14px 18px rgba(91,10,21,.34));
  animation:cmScrollCueComic 2.5s ease-in-out infinite;
}

.cm-stars-stage{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, #8f0622 0%, #790019 33%, #680016 64%, #570012 100%);
}

.cm-stars-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('/assets/images/stars/stars-red-pattern.webp');
  background-repeat:repeat-y;
  background-position:center top;
  background-size:min(100%, 1060px) auto;
  opacity:.42;
  pointer-events:none;
}

.cm-stars-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,248,220,.08), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 20%, rgba(0,0,0,.08) 100%);
  pointer-events:none;
}

.cm-stars-stage__inner{
  position:relative;
  z-index:1;
  width:min(1360px, calc(100% - 34px));
  margin:0 auto;
  padding:78px 0 94px;
}

.cm-stars-stage__head{
  position:relative;
  max-width:980px;
  margin:0 auto 34px;
  padding:6px 10px 10px;
  text-align:center;
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  overflow:visible;
}

.cm-stars-stage__head::before,
.cm-stars-stage__head::after{
  display:none;
}

.cm-stars-stage__head h2{
  margin:16px 0 12px;
  font-size:clamp(1.95rem, 3.8vw, 3.15rem);
  line-height:1.06;
  color:#fff4d6;
  text-shadow:0 2px 0 rgba(67,16,12,.45), 0 12px 24px rgba(0,0,0,.20);
}

.cm-stars-stage__head p,
.cm-stars-section__lead{
  margin:0;
  line-height:1.72;
  color:rgba(255,247,239,.95);
  text-shadow:0 8px 18px rgba(0,0,0,.08);
}

.cm-stars-switches{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:22px;
}

.cm-stars-switches__btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:12px 28px;
  border-radius:999px;
  border:1px solid rgba(255,228,188,.26);
  background:
    linear-gradient(180deg, rgba(114,59,8,.20), rgba(66,24,4,.14)),
    linear-gradient(180deg, rgba(255,243,210,.10), rgba(255,213,117,.03));
  box-shadow:
    0 12px 28px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,245,222,.28),
    inset 0 -1px 0 rgba(119,62,4,.18),
    0 0 18px rgba(255,214,111,.10);
  color:#fff1ca;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.03em;
  overflow:hidden;
  isolation:isolate;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.cm-stars-switches__btn:hover,
.cm-stars-switches__btn:focus-visible,
.cm-stars-card__link:hover,
.cm-stars-card__link:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,232,170,.42);
  box-shadow:0 18px 38px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,248,233,.28), 0 0 18px rgba(255,215,110,.16);
}

.cm-stars-section{
  position:relative;
  margin-top:34px;
  border-radius:38px;
  border:1px solid rgba(255,228,188,.14);
  background:
    linear-gradient(180deg, rgba(83,8,20,.08), rgba(19,3,7,.16)),
    linear-gradient(135deg, rgba(255,255,255,.028), rgba(255,222,165,.008));
  box-shadow:0 22px 66px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,244,221,.08);
  backdrop-filter:blur(9px);
  overflow:hidden;
  isolation:isolate;
}

.cm-stars-section::after,
.cm-stars-block::after,
.cm-stars-card::after{
  padding:1.45px;
}

.cm-stars-section__shell{
  padding:30px;
}

.cm-stars-section__head{
  margin-bottom:18px;
}

.cm-stars-section__title{
  margin:16px 0 10px;
  font-size:clamp(1.7rem, 3vw, 2.55rem);
  color:#fff0cf;
  text-shadow:0 2px 0 rgba(72,19,10,.36);
}

.cm-stars-block + .cm-stars-block{
  margin-top:24px;
}

.cm-stars-block{
  position:relative;
  padding:24px;
  border-radius:30px;
  border:1px solid rgba(255,225,182,.14);
  background:
    linear-gradient(180deg, rgba(255,232,182,.035), rgba(255,232,182,.010)),
    linear-gradient(180deg, rgba(52,6,13,.20), rgba(20,3,7,.30));
  box-shadow:
    inset 0 1px 0 rgba(255,238,210,.07),
    0 16px 36px rgba(0,0,0,.10);
  backdrop-filter:blur(8px);
  overflow:hidden;
  isolation:isolate;
}

.cm-stars-block__head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-end;
  margin-bottom:18px;
}

.cm-stars-block__title{
  margin:0;
  font-size:clamp(1.32rem, 2.3vw, 1.9rem);
  color:#fff4da;
}

.cm-stars-block__text{
  margin:10px 0 0;
  line-height:1.72;
  color:rgba(255,244,235,.91);
}

.cm-stars-grid{
  display:grid;
  gap:20px;
}

.cm-stars-grid--videos{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.cm-stars-grid--sources{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.cm-stars-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100%;
  overflow:hidden;
  border-radius:26px;
  border:2.3px solid rgba(255,223,176,.30);
  background:
    linear-gradient(180deg, rgba(255,223,170,.09), rgba(255,223,170,.022)),
    linear-gradient(180deg, rgba(57,7,13,.44), rgba(27,4,8,.58));
  box-shadow:
    0 18px 40px rgba(0,0,0,.16),
    inset 0 0 0 1px rgba(255,243,215,.10);
  color:#fff4e1;
  backdrop-filter:blur(8px);
  isolation:isolate;
}

.cm-stars-card__body{
  position:relative;
  padding:18px 18px 16px;
  background:linear-gradient(180deg, rgba(255,214,145,.05), rgba(0,0,0,0));
  overflow:hidden;
}

.cm-stars-card__body::before,
.cm-stars-card__body::after{
  position:absolute;
  pointer-events:none;
  color:rgba(255,224,142,.82);
  text-shadow:0 0 8px rgba(255,229,157,.66), 0 0 18px rgba(255,216,110,.34);
  animation:cmStarsTwinkle 3.2s ease-in-out infinite;
}

.cm-stars-card__body::before{
  content:"✦";
  top:10px;
  right:14px;
  font-size:.82rem;
}

.cm-stars-card__body::after{
  content:"✧";
  top:28px;
  right:34px;
  font-size:.56rem;
  animation-delay:1.1s;
}

.cm-stars-card__eyebrow{
  display:block;
  margin-bottom:8px;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#f0c982;
}

.cm-stars-card__title{
  margin:0 0 10px;
  font-size:1.08rem;
  line-height:1.35;
  color:#fff1d1;
}

.cm-stars-card__text{
  margin:0;
  line-height:1.64;
  color:rgba(255,241,225,.92);
}

.cm-stars-card__actions{
  margin:0;
  padding:0 18px 18px;
}

.cm-stars-card__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,220,156,.24);
  background:linear-gradient(180deg, rgba(255,220,156,.12), rgba(255,220,156,.04));
  color:#fff2d2;
  text-decoration:none;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,244,221,.10);
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.cm-stars-video{
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,237,215,.18);
  background:rgba(24,3,7,.56);
  box-shadow:0 16px 34px rgba(0,0,0,.16);
  margin:16px 16px 0;
  backdrop-filter:blur(6px);
}

.cm-stars-video iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
}

@keyframes cmStarsGoldSweep{
  0%{background-position:165% 50%; opacity:.16;}
  16%{opacity:.34;}
  28%{opacity:.88;}
  42%{background-position:-35% 50%; opacity:.24;}
  100%{background-position:-35% 50%; opacity:.12;}
}

@keyframes cmStarsTwinkle{
  0%,100%{opacity:.48; transform:scale(.92) rotate(0deg);}
  50%{opacity:1; transform:scale(1.18) rotate(12deg);}
}

@keyframes cmScrollCueComic{
  0%,100%{transform:translateY(0) rotate(0deg);}
  18%{transform:translateY(8px) rotate(-2deg);}
  36%{transform:translateY(18px) rotate(2deg);}
  54%{transform:translateY(12px) rotate(-1deg);}
  72%{transform:translateY(4px) rotate(1deg);}
}

@media (max-width: 1360px){
  .cm-stars-hero__panel{
    width:min(408px, 28vw);
    right:10px;
    top:8px;
  }
}

@media (max-width: 1180px){
  .cm-stars-stage__inner{
    width:min(100% - 28px, 1220px);
  }

  .cm-stars-hero__panel{
    width:min(382px, 33vw);
  }
}

@media (max-width: 980px){
  .cm-stars-hero__panel{
    width:min(360px, 42vw);
    right:10px;
    top:8px;
    padding:20px 22px;
  }

  .cm-stars-grid--videos,
  .cm-stars-grid--sources{
    grid-template-columns:1fr;
  }

  .cm-stars-stage__inner{
    padding:64px 0 78px;
  }

  .cm-stars-section__shell,
  .cm-stars-stage__head{
    padding-left:22px;
    padding-right:22px;
  }
}

@media (max-width: 760px){
  .cm-stars-hero__media img{
    object-position:center top;
  }

  .cm-stars-hero__panel{
    width:min(330px, calc(100vw - 16px));
    top:max(8px, calc(env(safe-area-inset-top) + 4px));
    padding:16px 16px 18px;
    border-radius:24px;
  }

  .cm-stars-hero__lead{
    display:none;
  }

  .cm-stars-hero__title{
    margin:0;
    padding-right:1.15rem;
    font-size:clamp(2.15rem, 11vw, 3.6rem);
  }

  .cm-stars-scrollcue__img{
    width:min(20vw, 63px);
  }

  .cm-stars-stage__inner{
    width:min(100% - 22px, 740px);
    padding:54px 0 70px;
  }

  .cm-stars-stage__head,
  .cm-stars-section__shell{
    padding:18px;
  }

  .cm-stars-stage__head{
    border-radius:28px;
  }

  .cm-stars-section{
    border-radius:30px;
  }

  .cm-stars-block{
    padding:18px;
    border-radius:24px;
  }

  .cm-stars-block__head{
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:16px;
  }
}

@media (max-width: 760px) and (orientation: portrait){
  .cm-stars-hero__panel{
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:min(330px, calc(100vw - 14px));
  }
}

@media (max-width: 760px) and (orientation: landscape){
  .cm-stars-hero__panel{
    left:auto;
    right:8px;
    transform:none;
    width:min(300px, 44vw);
  }
}

@media (max-width: 560px){
  .cm-stars-switches{
    flex-direction:column;
    align-items:stretch;
  }

  .cm-stars-switches__btn{
    width:100%;
  }

  .cm-stars-scrollcue__img{
    width:min(10.5vw, 36px);
  }
}

@media (max-width: 420px){
  .cm-stars-scrollcue__img{
    width:min(9vw, 30px);
  }
}

@media (prefers-reduced-motion: reduce){
  .cm-stars-scrollcue__img,
  .cm-stars-hero__panel::before,
  .cm-stars-stage__head::before,
  .cm-stars-stage__head::after,
  .cm-stars-section::after,
  .cm-stars-block::after,
  .cm-stars-card::after,
  .cm-stars-switches__btn::after,
  .cm-stars-card__body::before,
  .cm-stars-card__body::after{
    animation:none !important;
    transition:none !important;
  }
}