.strength-card {
  width: min(560px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #eeece440;
  border-top: 4px solid #df432f;
  background: #eeece4;
  color: #151715;
  color-scheme: light;
  box-shadow: 10px 10px 0 #15171550, 0 24px 80px #0006;
  scrollbar-width: thin;
}

.strength-card::backdrop { background: #111811a6; backdrop-filter: blur(7px); }
.strength-card[open] { animation: strength-open .34s cubic-bezier(.16,1,.3,1) both; }
.strength-card[open].is-closing { animation: strength-close .18s ease-in both; pointer-events: none; }
.strength-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 30px;
  border-bottom: 1px solid #15171526;
}
.strength-card-head > span { font-size: 11px; color: #62665f; }
.strength-card-close { display: flex; align-items: center; gap: 18px; min-height: 40px; padding: 0 0 0 12px; font-size: 11px; }
.strength-card-close span { font: 24px/1 Arial,sans-serif; }
.strength-card-close:hover { color: #bb3523; }
.strength-card-content { padding: 28px 32px 32px; }
.strength-card h2 { font-size: clamp(28px, 5vw, 36px); font-weight: 750; letter-spacing: -.035em; line-height: 1.3; }
.strength-card-label { margin-top: 10px; font-size: 13px; line-height: 1.6; font-weight: 650; color: #bb3523; }
.strength-card-prose { margin-top: 23px; padding-top: 21px; border-top: 1px solid #15171535; }
.strength-card-prose p { font-size: 14px; line-height: 1.95; overflow-wrap: anywhere; }
.strength-card-prose p + p { margin-top: 13px; }
.strength-card-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 24px 0 0; padding: 0; }
.strength-card-tags li { padding: 6px 10px; border: 1px solid #15171529; font-size: 10px; line-height: 1.5; color: #565c53; }
.method-list button[aria-expanded="true"] { color: var(--red-light); padding-left: 9px; }

@keyframes strength-open {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes strength-close {
  to { opacity: 0; transform: translateY(12px) scale(.975); }
}
@media (max-width: 600px) {
  .strength-card { width: calc(100vw - 32px); max-height: calc(100dvh - 32px); box-shadow: 5px 5px 0 #15171550, 0 16px 48px #0005; }
  .strength-card-head { padding: 9px 23px; }
  .strength-card-content { padding: 23px 24px 27px; }
  .strength-card-prose { margin-top: 20px; padding-top: 18px; }
  .strength-card-prose p { font-size: 14px; line-height: 1.85; }
}
@media (prefers-reduced-motion: reduce) {
  .strength-card[open], .strength-card[open].is-closing { animation: none; }
}