.wpmc-template-notes {
  --notes-ink: #211818;
  --notes-cream: #fff4e6;
  --notes-purple: #7f3cff;
  --notes-orange: #ff8b12;
  --notes-gold: #ffd33e;
  box-sizing: border-box;
}

.wpmc-template-notes *,
.wpmc-template-notes *::before,
.wpmc-template-notes *::after {
  box-sizing: border-box;
}

.wpmc-notes-card-shell {
  display: block;
  width: 100%;
  max-width: 1492px;
  min-width: 0;
  margin: 0 0 1.25rem;
  padding: 0;
  color: var(--notes-cream);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.wpmc-notes-card {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1492 / 1024;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  font-family: Inter, "Arial Black", Arial, sans-serif;
}

.wpmc-notes-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wpmc-notes-logo {
  position: absolute;
  z-index: 5;
  left: 8.05%;
  top: 8%;
  width: 9%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 15%;
  background: #fffdfa;
  border: 0.08cqw solid #e3d2ba;
  box-shadow: 0.8cqw 1cqw 1.5cqw rgba(0, 0, 0, 0.16);
}

.wpmc-notes-logo img {
  display: block;
  width: 76%;
  height: 76%;
  object-fit: contain;
}

.wpmc-notes-kicker,
.wpmc-notes-slogan {
  position: absolute;
  z-index: 5;
  top: 9%;
  height: 4.48%;
  display: flex;
  align-items: center;
  border-radius: 1.2cqw;
  font-size: 1.06cqw;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}

.wpmc-notes-kicker {
  left: 19.58%;
  width: 18.97%;
  padding-left: 1.52cqw;
  color: #c06e00;
  background: rgba(255, 240, 220, 0.92);
  border: 0.07cqw solid #db7a16;
}

.wpmc-notes-slogan {
  left: 39.8%;
  width: 16.82%;
  justify-content: center;
  color: #fff4e5;
  background: #211819;
  border: 0.07cqw solid var(--notes-purple);
}

.wpmc-notes-title {
  position: absolute;
  z-index: 6;
  left: 54.42%;
  top: 18.6%;
  width: 36%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.62cqw;
  font-family: Inter, "Arial Black", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.88;
}

.wpmc-notes-title span {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-weight: 1000;
  -webkit-text-stroke: 0.1cqw #140f10;
  paint-order: stroke fill;
}

.wpmc-notes-title-brand {
  color: #fff2e0;
  font-size: 2.82cqw;
}

.wpmc-notes-title-main {
  color: #fff2e0;
  font-size: 5.1cqw;
}

.wpmc-notes-title-accent {
  color: #8a42ff;
  font-size: 5.22cqw;
}

.wpmc-notes-side-word {
  position: absolute;
  z-index: 6;
  left: 83.45%;
  top: 18.4%;
  width: 7.3%;
  height: 21.48%;
  display: block;
  color: #fff4e6;
  background: #211818;
  border: 0.13cqw solid #7a35ea;
  border-radius: 1.75cqw;
  box-shadow: 0 1cqw 1.55cqw rgba(0, 0, 0, 0.18);
}

.wpmc-notes-side-word span {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 1.62cqw;
  line-height: 1;
  font-weight: 1000;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
}

.wpmc-notes-action {
  position: absolute;
  z-index: 8;
  left: 54.15%;
  top: 40.65%;
  width: 37.2%;
  height: 7.72%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5cqw;
  padding: 0 2.7cqw;
  color: #fffdfa;
  text-decoration: none;
  overflow: hidden;
  background: linear-gradient(135deg, #00d7ff 0%, #1678ff 46%, #5335ff 100%);
  border: 0.16cqw solid #bff8ff;
  border-radius: 1.55cqw;
  box-shadow: 0 1.05cqw 1.7cqw rgba(0, 0, 0, 0.34), 0 0 1.2cqw rgba(0, 215, 255, 0.52), inset 0 0 0 0.1cqw #061a32;
}

.wpmc-notes-action::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(42deg, transparent 0 57%, rgba(255, 255, 255, 0.34) 57% 61%, transparent 61%),
    linear-gradient(138deg, transparent 0 64%, rgba(191, 248, 255, 0.28) 64% 69%, transparent 69%),
    radial-gradient(circle at 17% 28%, rgba(255, 255, 255, 0.42) 0 7%, transparent 7.5%),
    radial-gradient(circle at 78% 68%, rgba(255, 211, 62, 0.34) 0 8%, transparent 8.5%),
    conic-gradient(from 45deg at 82% 28%, rgba(255, 255, 255, 0.26) 0 25%, transparent 0 100%);
  opacity: 0.82;
}

.wpmc-notes-action:hover {
  color: #fffdfa;
  filter: brightness(1.08);
  transform: translateY(-0.12cqw);
}

.wpmc-notes-action img {
  position: relative;
  z-index: 1;
  width: 2.72cqw;
  height: 2.72cqw;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(79%) sepia(91%) saturate(725%) hue-rotate(354deg) brightness(102%) contrast(104%);
}

.wpmc-notes-action span {
  position: relative;
  z-index: 1;
  min-width: 0;
  font-size: 2.32cqw;
  line-height: 1;
  font-weight: 1000;
  white-space: nowrap;
  text-shadow: 0 0.14cqw 0.32cqw rgba(0, 0, 0, 0.42);
}

.wpmc-notes-description {
  position: absolute;
  z-index: 7;
  left: 54.15%;
  top: 49.25%;
  width: 37.2%;
  height: 29.2%;
  padding: 2.05cqw 2.05cqw 1.35cqw 1.75cqw;
  color: #34231d;
}

.wpmc-notes-description-body {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-right: 0.3cqw;
  font-size: 2.84cqw;
  line-height: 1.14;
  font-weight: 500;
}

.wpmc-notes-description-body::-webkit-scrollbar,
.wpmc-notes-notes-body::-webkit-scrollbar {
  width: 0.58cqw;
}

.wpmc-notes-description-body::-webkit-scrollbar-track,
.wpmc-notes-notes-body::-webkit-scrollbar-track {
  background: rgba(33, 24, 24, 0.16);
  border-radius: 999px;
}

.wpmc-notes-description-body::-webkit-scrollbar-thumb,
.wpmc-notes-notes-body::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--notes-purple), var(--notes-orange));
  border-radius: 999px;
}

.wpmc-notes-description-body p,
.wpmc-notes-description-body ul,
.wpmc-notes-description-body ol {
  margin: 0 0 0.45cqw;
}

.wpmc-notes-description-body strong,
.wpmc-notes-description-body b {
  color: inherit;
  font-weight: 800;
}

.wpmc-notes-description-body em,
.wpmc-notes-description-body i {
  font-style: italic;
}

.wpmc-notes-description-body ul,
.wpmc-notes-description-body ol {
  display: block;
  margin-left: 0;
  padding-left: 1.55cqw;
}

.wpmc-notes-description-body ul {
  list-style: disc outside;
}

.wpmc-notes-description-body ol {
  list-style: decimal outside;
}

.wpmc-notes-description-body li {
  display: list-item;
  margin: 0 0 0.28cqw;
  padding-left: 0.18cqw;
}

.wpmc-notes-description-body li::marker {
  color: var(--notes-orange);
}

.wpmc-notes-description-body a {
  color: #4a2c8f;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(255, 139, 18, 0.72);
  text-underline-offset: 0.16em;
}

.wpmc-notes-stats {
  position: absolute;
  z-index: 7;
  left: 7.9%;
  top: 80.08%;
  width: 83.65%;
  height: 10.94%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  overflow: hidden;
  color: #fffdfa;
  border-radius: 1.6cqw;
}

.wpmc-notes-stat {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7cqw;
  padding: 1.65cqw 1.45cqw 1.25cqw;
  border-left: 0.07cqw solid rgba(255, 246, 233, 0.56);
}

.wpmc-notes-stat:first-child {
  border-left: 0;
}

.wpmc-notes-stat span {
  color: #fff7ec;
  font-size: 0.82cqw;
  line-height: 1.08;
  font-weight: 1000;
  text-transform: uppercase;
}

.wpmc-notes-stat strong {
  color: #fffdfa;
  font-size: 2.28cqw;
  line-height: 1;
  font-weight: 1000;
  white-space: nowrap;
}

.wpmc-notes-single {
  display: block;
  width: 100%;
  max-width: 1540px;
  min-width: 0;
  margin: 0 0 1.25rem;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.wpmc-notes-single-layout {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 1.1rem;
  background: #171111;
  border: 1px solid rgba(127, 60, 255, 0.72);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.wpmc-notes-single-scene {
  min-width: 0;
  width: 66.666%;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

.wpmc-notes-single-scene .wpmc-notes-card-shell {
  max-width: none;
  margin: 0;
}

.wpmc-notes-single-scene-card .wpmc-notes-logo {
  left: 7.65%;
  top: 7.1%;
  width: 12.5%;
}

.wpmc-notes-single-scene-card .wpmc-notes-side-word {
  top: 18.2%;
}

.wpmc-notes-single-scene-card .wpmc-notes-description {
  top: 39.2%;
  height: 39.5%;
  padding: 1.6cqw 2.2cqw 1.45cqw 1.9cqw;
  background: linear-gradient(180deg, rgba(255, 248, 237, 0.98), rgba(247, 232, 255, 0.94));
  border: 0.13cqw solid #7a35ea;
  border-radius: 1.65cqw;
  box-shadow: 0 0.85cqw 1.55cqw rgba(0, 0, 0, 0.16);
}

.wpmc-notes-single-scene-card .wpmc-notes-description-body {
  font-size: 1.99cqw;
  line-height: 1.22;
}

.wpmc-notes-single-left-stats {
  position: relative;
  z-index: 2;
  left: auto;
  top: auto;
  width: 80%;
  height: auto;
  min-height: clamp(4.8rem, 8.8cqw, 7.25rem);
  margin: clamp(0.8rem, 1.4cqw, 1.2rem) auto 0;
  border-radius: clamp(0.95rem, 1.65cqw, 1.35rem);
  background: linear-gradient(135deg, #25181c, #421d3e 55%, #6e2608);
  border: 1px solid rgba(255, 139, 18, 0.7);
}

.wpmc-notes-single-left-stats .wpmc-notes-stat {
  align-items: center;
  padding: clamp(0.55rem, 1.05cqw, 0.95rem);
  text-align: center;
}

.wpmc-notes-single-left-stats .wpmc-notes-stat span {
  font-size: clamp(1rem, 1.72cqw, 1.55rem);
  text-align: center;
}

.wpmc-notes-single-left-stats .wpmc-notes-stat strong {
  font-size: clamp(1.25rem, 2cqw, 1.9rem);
}

.wpmc-notes-side-panel {
  position: absolute;
  inset: 0 0 0 66.666%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(0.65rem, 1.15vw, 1rem);
  padding: clamp(1rem, 1.6vw, 1.55rem);
  color: #fff7e8;
  background:
    radial-gradient(circle at 88% 10%, rgba(127, 60, 255, 0.32), transparent 34%),
    linear-gradient(160deg, #241718 0%, #151112 45%, #34112f 100%);
  border-left: 1px solid rgba(255, 139, 18, 0.42);
  overflow: hidden;
}

.wpmc-notes-side-action,
.wpmc-notes-left-older-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #151112 0%, #241718 52%, #4c1c73 100%);
  border: 2px solid var(--notes-orange);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28), inset 0 0 0 1px var(--notes-purple);
}

.wpmc-notes-side-action {
  gap: 0.8rem;
  min-height: clamp(3.25rem, 5vw, 4.8rem);
  padding: 0.8rem 1rem;
  border-radius: 1.35rem;
  font-size: clamp(1.05rem, 1.75vw, 1.75rem);
  line-height: 1;
  font-weight: 1000;
}

.wpmc-notes-side-action img,
.wpmc-notes-left-older-button img {
  flex: 0 0 auto;
  width: 1.35em;
  height: 1.35em;
  object-fit: contain;
}

.wpmc-notes-side-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

.wpmc-notes-side-stat {
  min-width: 0;
  min-height: clamp(3.2rem, 4.6vw, 4.7rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.24rem;
  padding: 0.25rem;
  color: #fff8ea;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.wpmc-notes-side-stat img {
  width: clamp(1rem, 1.35vw, 1.35rem);
  height: clamp(1rem, 1.35vw, 1.35rem);
  object-fit: contain;
  filter: brightness(1.8) saturate(1.25);
}

.wpmc-notes-side-stat span {
  color: #ead9ff;
  font-size: clamp(0.55rem, 0.64vw, 0.7rem);
  line-height: 1.05;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
}

.wpmc-notes-side-stat strong {
  color: #fff;
  font-size: clamp(0.92rem, 1.2vw, 1.25rem);
  line-height: 1;
  font-weight: 1000;
  white-space: nowrap;
}

.wpmc-notes-side-section {
  min-width: 0;
  min-height: 0;
  color: #fff8ea;
}

.wpmc-notes-side-section h3,
.wpmc-notes-left-older h3 {
  margin: 0 0 0.7rem;
  color: #ffd33e;
  font-size: clamp(1.05rem, 1.35vw, 1.45rem);
  line-height: 1.08;
  font-weight: 1000;
  text-transform: uppercase;
}

.wpmc-notes-notes {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wpmc-notes-notes-body {
  min-height: 0;
  overflow: auto;
  padding: 0.85rem 0.95rem;
  color: #2d2017;
  background: rgba(255, 247, 237, 0.96);
  border: 1px solid var(--notes-purple);
  border-radius: 0.9rem;
  font-size: clamp(0.82rem, 0.98vw, 1rem);
  line-height: 1.45;
}

.wpmc-notes-notes-body p,
.wpmc-notes-notes-body ul,
.wpmc-notes-notes-body ol {
  margin: 0 0 0.8rem;
}

.wpmc-notes-notes-body ul,
.wpmc-notes-notes-body ol {
  padding-left: 1.25rem;
}

.wpmc-notes-notes-body strong,
.wpmc-notes-notes-body b {
  color: #7a35ea;
  font-weight: 900;
}

.wpmc-notes-left-older {
  min-width: 0;
  padding: clamp(0.9rem, 1.35vw, 1.35rem) clamp(1rem, 1.6vw, 1.65rem) clamp(1rem, 1.55vw, 1.45rem);
  color: #fff8ea;
  background:
    radial-gradient(circle at 50% 0%, rgba(127, 60, 255, 0.2), transparent 46%),
    linear-gradient(180deg, #181213 0%, #100d0d 100%);
  border-top: 1px solid rgba(255, 139, 18, 0.42);
}

.wpmc-notes-left-older-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.wpmc-notes-left-older-button {
  gap: 0.55rem;
  min-height: 2.8rem;
  padding: 0.62rem 0.78rem;
  border-radius: 999px;
  min-width: 0;
  overflow: hidden;
  font-size: clamp(0.76rem, 1.7vw, 0.95rem);
  line-height: 1;
  font-weight: 900;
}

.wpmc-notes-left-older-button span {
  min-width: 0;
  overflow: hidden;
  color: #ffd33e;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wpmc-notes-left-older-button strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .wpmc-notes-single-layout {
    display: flex;
    flex-direction: column;
  }

  .wpmc-notes-single-scene {
    order: 2;
    width: 100%;
  }

  .wpmc-notes-side-panel {
    display: contents;
    position: static;
    inset: auto;
    border-left: 0;
    border-top: 1px solid rgba(255, 139, 18, 0.42);
  }

  .wpmc-notes-side-action {
    order: 1;
    width: 100%;
    margin: 0 0 1rem;
  }

  .wpmc-notes-side-stats,
  .wpmc-notes-side-section {
    order: 3;
    margin: 1rem;
  }

  .wpmc-notes-single-left-stats {
    width: 92%;
    min-height: clamp(3.7rem, 11vw, 5.5rem);
  }

  .wpmc-notes-single-left-stats .wpmc-notes-stat {
    padding: clamp(0.28rem, 0.9vw, 0.5rem);
  }

  .wpmc-notes-single-left-stats .wpmc-notes-stat span {
    font-size: clamp(0.56rem, 2.2vw, 1rem);
  }

  .wpmc-notes-single-left-stats .wpmc-notes-stat strong {
    font-size: clamp(0.84rem, 3.4vw, 1.25rem);
  }
}

@media (max-width: 560px) {
  .wpmc-notes-left-older-buttons {
    grid-template-columns: 1fr;
  }
}