.principles { --muted: #454d55; --line: #697078; background: #f3f5f7; color: #20262c; }
.principles h2, .principles h3 { color: inherit; }
.principles h2 { font-family: 'Outfit', Arial, sans-serif; font-weight: 500; }
.deck-help { margin: 2rem 0 1rem; color: #454d55; font-size: 1rem; }
.principle-list.is-deck {
  position: relative;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-color: #697078 #dde1e5;
  padding: .4rem .4rem 1.25rem;
  margin: 0;
  border: 0;
  counter-reset: none;
}
.principle-list.is-deck::after { content: ''; flex: 0 0 24%; }
.principle-list.is-deck > li {
  flex: 0 0 76%;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  margin: 0;
  border: 1px solid #697078;
  border-radius: 1rem;
  background: linear-gradient(125deg, #20262c, #0b0f12);
  color: #f3f5f7;
  scroll-snap-align: start;
  perspective: 1200px;
}
.principle-list.is-deck > li::before { content: none; }
.principle-panel { display: grid; flex: 1; transform-style: preserve-3d; transition: transform .5s ease; }
.principle-face { grid-area: 1 / 1; backface-visibility: hidden; min-width: 0; }
.principle-front { display: flex; flex-direction: column; justify-content: space-between; min-height: 18rem; padding-bottom: 2rem; }
.principle-list.is-deck .principle-front h3 { font: 500 clamp(1.65rem, 3vw, 2.65rem)/1.15 'Outfit', Arial, sans-serif; max-width: 23ch; margin: 2rem 0 0; }
.principle-number { font: 400 .875rem/1.5 'Outfit', Arial, sans-serif; letter-spacing: .15em; color: #c8cdd3; }
.principle-back { transform: rotateY(180deg); visibility: hidden; padding-bottom: 1.5rem; }
.principle-list.is-deck .principle-back h3 { font: 500 1.4rem/1.25 'Outfit', Arial, sans-serif; margin: 0 0 1.2rem; }
.principle-list.is-deck .principle-back p { color: #f3f5f7; font: 400 1.125rem/1.65 'Outfit', Arial, sans-serif; margin: 0; max-width: 60ch; }
.is-flipped .principle-panel { transform: rotateY(180deg); }
.is-flipped .principle-front { visibility: hidden; }
.is-flipped .principle-back { visibility: visible; }
.principle-flip, .deck-controls button {
  appearance: none;
  min-height: 48px;
  font: 400 1rem/1.3 'Outfit', Arial, sans-serif;
  border: 1px solid #697078;
  border-radius: 999px;
  padding: .75rem 1.25rem;
  cursor: pointer;
}
.principle-flip { align-self: flex-start; background: transparent; color: #f3f5f7; }
.principle-flip:hover { background: #303840; }
.principles .principle-flip:focus-visible { outline-color: #f3f5f7; }
.deck-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.deck-controls button { background: #20262c; color: #f3f5f7; }
.deck-controls button:disabled { background: #dde1e5; color: #515961; cursor: default; }
.deck-position { font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap; font-size: 1rem; }
@media (max-width: 600px) {
  .principle-list.is-deck { gap: 1rem; }
  .principle-list.is-deck > li { flex-basis: 90%; padding: 1.4rem; }
  .principle-list.is-deck::after { flex-basis: 10%; }
  .principle-front { min-height: 22rem; }
  .principle-list.is-deck .principle-back p { font-size: 1rem; line-height: 1.55; }
  .deck-controls { gap: .5rem; }
  .deck-controls button { padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .principle-panel { transition: none; }
  .principle-panel, .principle-back, .is-flipped .principle-panel { transform: none; }
}
@media print {
  .deck-help, .deck-controls, .principle-flip { display: none; }
  .principle-list.is-deck { display: block; overflow: visible; }
  .principle-list.is-deck > li { break-inside: avoid; margin-bottom: 1rem; background: white; color: black; }
  .principle-panel, .principle-back, .is-flipped .principle-panel { transform: none; }
  .principle-front { display: none; }
  .principle-back { visibility: visible; }
  .principle-list.is-deck .principle-back p { color: black; }
}