/* Shared pearl/plush four-factor layout, selected for the official website. */
.rhythm-illustration { display: block; width: min(188px, 100%); height: 188px; object-fit: contain; margin-inline: auto; }
html[data-rhythm-preview] { scroll-padding-top: 0; }
html[data-concept="stoic"][data-rhythm-look] main > .rhythm { padding-block: 128px 64px; }
html[data-concept="stoic"][data-rhythm-look] .rhythm-water { filter: brightness(.84) saturate(1.08); }
html[data-concept="stoic"][data-rhythm-look] .rhythm > .wrap { width: min(1180px, 100% - 64px); }
html[data-concept="stoic"][data-rhythm-look] .rhythm .section-head {
  max-width: none;
  margin: 0;
  text-align: left;
}
html[data-concept="stoic"][data-rhythm-look] .rhythm h2 {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.2;
  letter-spacing: -.035em;
  color: #fff;
  font-weight: 650;
  text-shadow: 0 0 4px rgb(255 255 255 / 25%), 0 0 28px rgb(255 255 255 / 25%);
}
html[data-concept="stoic"][data-rhythm-look] .rhythm .section-lead {
  max-width: 35em;
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 1.9;
  text-align: left;
  text-wrap: pretty;
  color: #fff;
  font-weight: 500;
  text-shadow: none;
}
html[data-concept="stoic"][data-rhythm-look] .rhythm .forces { margin-top: 44px; }
html[data-concept="stoic"][data-rhythm-look] .rhythm .force {
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
}
html[data-concept="stoic"][data-rhythm-look] .rhythm .force h3 { font-size: 20px; line-height: 1.4; font-weight: 600; color: #fff; text-shadow: none; }
html[data-concept="stoic"][data-rhythm-look] .rhythm .force svg { height: 88px; overflow: visible; }
html[data-concept="stoic"][data-rhythm-look] .rhythm .force svg [stroke="#7962c7"] { stroke: #7a58a6; }
html[data-concept="stoic"][data-rhythm-look] .rhythm .force svg text { fill: #705b83; }
html[data-concept="stoic"][data-rhythm-look="panel"] .rhythm .forces {
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 32px;
  background: linear-gradient(140deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%));
  box-shadow: inset 0 2px 1px rgb(255 255 255 / 45%), inset 0 -1px 1px rgb(255 255 255 / 22%), 0 10px 28px rgb(61 38 93 / 4%);
  backdrop-filter: blur(.6px);
  -webkit-backdrop-filter: blur(.6px);
}
/* 1. One uninterrupted surface with quiet vertical dividers. */
html[data-concept="stoic"][data-rhythm-look="panel"] .rhythm .forces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 32px 0;
}
html[data-concept="stoic"][data-rhythm-look="panel"] .rhythm .force {
  min-height: 280px;
  padding: 8px 26px 18px;
  justify-content: center;
  gap: 16px;
}
html[data-concept="stoic"][data-rhythm-look="panel"] .rhythm .force > svg { display: none; }
html[data-concept="stoic"][data-rhythm-look="panel"] .rhythm-illustration {
  display: block;
  width: min(188px, 100%);
  height: 188px;
  object-fit: contain;
  margin-inline: auto;
}
html[data-concept="stoic"][data-rhythm-look="panel"] .rhythm .force { position: relative; padding-bottom: 40px; }
html[data-concept="stoic"][data-rhythm-look="panel"] .forces > .force + .force { border-left: 1px solid rgb(255 255 255 / 48%); }
@media (max-width: 900px) {
  html[data-concept="stoic"][data-rhythm-look] .rhythm > .wrap { width: calc(100% - 40px); }
  html[data-concept="stoic"][data-rhythm-look="panel"] .rhythm .forces { grid-template-columns: 1fr 1fr; padding: 12px; }
  html[data-concept="stoic"][data-rhythm-look="panel"] .rhythm .force { padding: 22px 22px 40px; min-height: 172px; }
  html[data-concept="stoic"][data-rhythm-look="panel"] .forces > .force:nth-child(3) { border-left: 0; border-top: 1px solid rgb(255 255 255 / 48%); }
  html[data-concept="stoic"][data-rhythm-look="panel"] .forces > .force:nth-child(4) { border-top: 1px solid rgb(255 255 255 / 48%); }
}
@media (max-width: 520px) {
  html[data-concept="stoic"][data-rhythm-look] main > .rhythm { padding-block: 116px 48px; }
  html[data-concept="stoic"][data-rhythm-look] .rhythm h2 { font-size: 36px; }
  html[data-concept="stoic"][data-rhythm-look] .rhythm .section-lead { font-size: 16px; line-height: 1.9; }
  html[data-concept="stoic"][data-rhythm-look] .rhythm .forces { margin-top: 32px; }
  html[data-concept="stoic"][data-rhythm-look] .rhythm .force h3 { font-size: 18px; }
  html[data-concept="stoic"][data-rhythm-look="panel"] .rhythm .force { padding: 18px 12px; gap: 12px; }
  html[data-concept="stoic"][data-rhythm-look="panel"] .rhythm .force { padding-bottom: 36px; }
  html[data-concept="stoic"][data-rhythm-look="panel"] .rhythm-illustration { height: 116px; }
  }

/* Each illustration keeps its own gentle movement; labels remain still. */
@keyframes rhythm-day-turn {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
@keyframes rhythm-moon-float {
  0%, 100% { transform: translateY(3px) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}

@keyframes rhythm-cycle-turn {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
html[data-concept="stoic"][data-rhythm-look] .rhythm-illustration {
  animation: rhythm-day-turn 18s ease-in-out infinite;
  transform-origin: 50% 50%;
}
html[data-concept="stoic"][data-rhythm-look] .force:nth-child(2) .rhythm-illustration { animation-name: rhythm-moon-float; animation-duration: 9s; animation-delay: -2s; }
html[data-concept="stoic"][data-rhythm-look] .force:nth-child(3) .rhythm-illustration { animation: none; transform: none; filter: url(#rhythm-ribbon-flex); }
html[data-concept="stoic"][data-rhythm-look] .force:nth-child(4) .rhythm-illustration { animation-name: rhythm-cycle-turn; animation-duration: 24s; animation-delay: -7s; }
html[data-concept="stoic"][data-rhythm-look] .rhythm[data-motion-visible="false"] .rhythm-illustration { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html[data-concept="stoic"][data-rhythm-look] .rhythm-illustration { animation: none !important; transform: none; filter: none !important; }
}