html[data-surface="white-oath"] .wo-theme-passage {
  width: min(76rem, calc(100vw - 2rem));
  overflow: hidden;
  border-top-color: var(--wo-gold);
}

html[data-surface="white-oath"] .wo-theme-passage > header {
  position: relative;
  padding: var(--wo-space-5) var(--wo-space-5) var(--wo-space-4);
  border-bottom: var(--wo-hairline) solid var(--wo-night-12);
}

html[data-surface="white-oath"] .wo-theme-passage > header > span {
  color: var(--wo-crimson);
  font-size: var(--wo-text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
}

html[data-surface="white-oath"] .wo-theme-passage > header h2 {
  margin: 0.35rem 0 0;
  font-family: var(--wo-font-display);
  font-size: var(--wo-text-xl);
  font-weight: 480;
  letter-spacing: -0.04em;
}

html[data-surface="white-oath"] .wo-theme-passage > header p {
  max-width: 40rem;
  margin: 0.55rem 0 0;
  color: var(--wo-text-muted-paper);
}

html[data-surface="white-oath"] .wo-theme-passage > header > button {
  position: absolute;
  top: var(--wo-space-4);
  right: var(--wo-space-4);
  display: grid;
  width: var(--wo-touch);
  height: var(--wo-touch);
  place-items: center;
  border: var(--wo-hairline) solid var(--wo-night-24);
  border-radius: 50%;
  background: transparent;
}

html[data-surface="white-oath"] .wo-theme-passage__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wo-space-3);
  padding: var(--wo-space-4) var(--wo-space-5) var(--wo-space-5);
}

html[data-surface="white-oath"] .wo-theme-passage__choices > button {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: 11rem auto;
  padding: 0;
  overflow: hidden;
  border: var(--wo-hairline) solid var(--wo-night-12);
  background: var(--wo-light);
  color: var(--wo-night);
  text-align: left;
  transition: transform var(--wo-duration) var(--wo-ease-out), box-shadow var(--wo-duration);
}

html[data-surface="white-oath"] .wo-theme-passage__choices > button:hover {
  box-shadow: 0.7rem 0.7rem 0 var(--wo-indigo-38);
  transform: translateY(-0.3rem);
}

html[data-surface="white-oath"] .wo-theme-passage__choices > button.is-current {
  border-color: var(--wo-crimson);
  box-shadow: 0.48rem 0.48rem 0 var(--wo-crimson-42);
  cursor: default;
}

html[data-surface="white-oath"] .wo-theme-passage__choices > button.is-current:hover {
  transform: none;
}

html[data-surface="white-oath"] .wo-theme-passage__choices > button > span:nth-child(2) {
  padding: var(--wo-space-4);
}

html[data-surface="white-oath"] .wo-theme-passage__choices small {
  color: var(--wo-text-muted-paper);
  font-family: var(--wo-font-data);
  font-size: var(--wo-text-2xs);
  letter-spacing: 0.1em;
}

html[data-surface="white-oath"] .wo-theme-passage__choices span > b {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--wo-font-display);
  font-size: var(--wo-text-lg);
  font-weight: 520;
}

html[data-surface="white-oath"] .wo-theme-passage__choices p {
  margin: 0.4rem 0 0;
  color: var(--wo-text-muted-paper);
  font-size: var(--wo-text-xs);
}

html[data-surface="white-oath"] .wo-theme-passage__choices > button > i {
  position: absolute;
  right: 0.85rem;
  bottom: 0.6rem;
  color: var(--wo-crimson);
  font-family: var(--wo-font-data);
  font-size: var(--wo-text-2xs);
  font-style: normal;
}

html[data-surface="white-oath"] .wo-theme-passage__art {
  position: relative;
  display: block;
  overflow: hidden;
}

html[data-surface="white-oath"] .wo-theme-passage__art > * {
  position: absolute;
  display: block;
}

html[data-surface="white-oath"] .wo-theme-passage__art.is-astera { background: #071012; }
html[data-surface="white-oath"] .wo-theme-passage__art.is-astera i:first-child { inset: 18% 8% 15% 31%; border: 1px solid rgba(194, 226, 228, 0.42); transform: skewX(-16deg); }
html[data-surface="white-oath"] .wo-theme-passage__art.is-astera i:nth-child(2) { right: -8%; bottom: 20%; width: 75%; height: 0.3rem; background: #e55d42; transform: rotate(-8deg); }
html[data-surface="white-oath"] .wo-theme-passage__art.is-astera i:nth-child(3) { top: 19%; left: -3%; width: 63%; height: 0.12rem; background: #8fc9cf; transform: rotate(7deg); }
html[data-surface="white-oath"] .wo-theme-passage__art.is-astera b { right: 18%; bottom: -35%; width: 10rem; aspect-ratio: 1; border: 1px solid rgba(143, 201, 207, 0.36); border-radius: 50%; box-shadow: inset 0 0 0 2rem rgba(143, 201, 207, 0.04); }
html[data-surface="white-oath"] .wo-theme-passage__art.is-astera em { top: 12%; left: 8%; width: 2.6rem; height: 0.55rem; background: #e55d42; }

html[data-surface="white-oath"] .wo-theme-passage__art.is-garden { background: linear-gradient(135deg, #edf2f4, #c8d5df 58%, #ebe7ef); }
html[data-surface="white-oath"] .wo-theme-passage__art.is-garden i:first-child { top: -24%; left: 14%; width: 7rem; aspect-ratio: 1; border: 1px solid rgba(127, 110, 157, 0.4); border-radius: 46% 54% 58% 42%; transform: rotate(22deg); }
html[data-surface="white-oath"] .wo-theme-passage__art.is-garden i:nth-child(2) { bottom: 12%; left: -4%; width: 85%; height: 1px; background: linear-gradient(90deg, transparent, #927fac 35%, #b59652 68%, transparent); transform: rotate(-9deg); }
html[data-surface="white-oath"] .wo-theme-passage__art.is-garden i:nth-child(3) { right: 12%; bottom: -44%; width: 9rem; aspect-ratio: 1; border: 1px solid rgba(181, 150, 82, 0.45); border-radius: 50%; box-shadow: inset 0 0 0 2.2rem rgba(255, 255, 255, 0.25); }
html[data-surface="white-oath"] .wo-theme-passage__art.is-garden b { top: 23%; right: 25%; width: 0.55rem; aspect-ratio: 1; border-radius: 50%; background: #927fac; box-shadow: 1.4rem 1.9rem 0 #b59652, -2.2rem 2.4rem 0 #aebfca; }
html[data-surface="white-oath"] .wo-theme-passage__art.is-garden em { top: 0; right: 0; width: 29%; height: 100%; background: rgba(255, 255, 255, 0.3); transform: skewX(-13deg); }

html[data-surface="white-oath"] .wo-theme-passage__art.is-white-oath { background: linear-gradient(145deg, #e9e6de 0 46%, #151722 46%); }
html[data-surface="white-oath"] .wo-theme-passage__art.is-white-oath i:first-child { top: -18%; left: 10%; width: 43%; height: 126%; background: rgba(255, 255, 255, 0.48); transform: rotate(19deg); }
html[data-surface="white-oath"] .wo-theme-passage__art.is-white-oath i:nth-child(2) { top: 15%; right: -9%; width: 69%; height: 53%; background: rgba(81, 88, 117, 0.86); transform: rotate(-7deg); }
html[data-surface="white-oath"] .wo-theme-passage__art.is-white-oath i:nth-child(3) { bottom: 13%; left: -4%; width: 82%; height: 0.28rem; background: #c66274; transform: rotate(-6deg); }
html[data-surface="white-oath"] .wo-theme-passage__art.is-white-oath b { right: 18%; bottom: -28%; width: 9rem; aspect-ratio: 1; border: 1px solid rgba(145, 194, 200, 0.5); transform: rotate(12deg); }
html[data-surface="white-oath"] .wo-theme-passage__art.is-white-oath em { top: 18%; left: 10%; width: 2.5rem; height: 0.45rem; background: #91c2c8; }

html[data-surface="white-oath"] .wo-theme-passage > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wo-space-3);
  padding: var(--wo-space-3) var(--wo-space-5);
  border-top: var(--wo-hairline) solid var(--wo-night-12);
  color: var(--wo-text-muted-paper);
  font-size: var(--wo-text-xs);
}

html[data-surface="white-oath"] .wo-theme-passage > footer button {
  min-height: var(--wo-touch);
  padding: 0.55rem 0;
  border-bottom: var(--wo-hairline) solid var(--wo-night-24);
  background: transparent;
  color: var(--wo-night);
}

@media (max-width: 42rem) {
  html[data-surface="white-oath"] .wo-theme-passage__choices { grid-template-columns: 1fr; overflow-y: auto; }
  html[data-surface="white-oath"] .wo-theme-passage__choices > button { grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: auto; }
  html[data-surface="white-oath"] .wo-theme-passage__art { min-height: 9.5rem; }
  html[data-surface="white-oath"] .wo-theme-passage > footer { align-items: flex-start; flex-direction: column; }
}