html[data-surface="white-oath"] .wo-app {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  isolation: isolate;
  background: var(--wo-porcelain);
  color: var(--wo-night);
}

html[data-surface="white-oath"] .wo-world {
  position: fixed;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background: var(--wo-night);
}

html[data-surface="white-oath"] .wo-world__porcelain,
html[data-surface="white-oath"] .wo-world__night,
html[data-surface="white-oath"] .wo-world__indigo {
  position: absolute;
  inset: 0;
}

html[data-surface="white-oath"] .wo-world__porcelain {
  left: clamp(8.5rem, 10vw, 13rem);
  background:
    linear-gradient(102deg, transparent 0 74%, rgba(181, 150, 82, 0.1) 74% 75%, transparent 75%),
    var(--wo-porcelain);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 7% 100%, 0 89%);
}

html[data-surface="white-oath"] .wo-world__night {
  width: clamp(9.2rem, 11.8vw, 14.5rem);
  right: auto;
  background:
    repeating-linear-gradient(0deg, transparent 0 2.45rem, rgba(233, 230, 222, 0.045) 2.45rem calc(2.45rem + 1px)),
    linear-gradient(155deg, var(--wo-night-deep), var(--wo-night));
}

html[data-surface="white-oath"] .wo-world__indigo {
  top: auto;
  left: clamp(41rem, 63vw, 99rem);
  height: clamp(12rem, 18vw, 34rem);
  background: linear-gradient(96deg, rgba(81, 88, 117, 0), rgba(81, 88, 117, 0.28) 25%, rgba(81, 88, 117, 0.08));
  clip-path: polygon(13% 4%, 100% 0, 100% 100%, 0 76%);
}

html[data-surface="white-oath"] .wo-world__event {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.72;
  overflow: hidden;
}

html[data-surface="white-oath"] .wo-world__arc {
  fill: none;
  stroke: url(#wo-event-gradient);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

html[data-surface="white-oath"] .wo-world__arc--two {
  opacity: 0.56;
  stroke-width: 1.2;
}

html[data-surface="white-oath"] .wo-world__arc--three {
  opacity: 0.34;
  stroke-width: 0.8;
}

html[data-surface="white-oath"] .wo-world__frozen {
  fill: rgba(198, 98, 116, 0.08);
  stroke: rgba(198, 98, 116, 0.38);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

html[data-surface="white-oath"] .wo-world__registration {
  fill: none;
  opacity: 0.28;
  stroke: var(--wo-cyan);
  stroke-dasharray: 3 10 72 18;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

html[data-surface="white-oath"] .wo-world__ash {
  position: absolute;
  width: 0.34rem;
  aspect-ratio: 1;
  background: var(--wo-ash);
  box-shadow:
    3.2rem 1.2rem 0 -0.08rem rgba(21, 23, 34, 0.48),
    7.7rem -2.4rem 0 -0.12rem rgba(198, 98, 116, 0.58),
    11.8rem 3.5rem 0 -0.09rem rgba(81, 88, 117, 0.48),
    17rem -0.4rem 0 -0.13rem rgba(21, 23, 34, 0.42),
    23rem 4.8rem 0 -0.1rem rgba(181, 150, 82, 0.48);
  transform: rotate(24deg);
}

html[data-surface="white-oath"] .wo-world__ash--one { top: 18%; left: 54%; }
html[data-surface="white-oath"] .wo-world__ash--two { top: 52%; left: 72%; transform: rotate(-17deg) scale(0.8); }
html[data-surface="white-oath"] .wo-world__ash--three { top: 77%; left: 36%; transform: rotate(58deg) scale(0.55); }

html[data-surface="white-oath"] .wo-mast {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  left: var(--wo-axis-width);
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) auto auto;
  gap: var(--wo-space-5);
  align-items: center;
  min-height: var(--wo-mast-height);
  padding: max(0.75rem, env(safe-area-inset-top)) clamp(1.2rem, 2.5vw, 4.5rem) 0.75rem;
  color: var(--wo-night);
}

html[data-surface="white-oath"] .wo-mast::after {
  position: absolute;
  right: clamp(1.2rem, 2.5vw, 4.5rem);
  bottom: 0;
  left: clamp(1.2rem, 2.5vw, 4.5rem);
  height: var(--wo-hairline);
  content: "";
  background: linear-gradient(90deg, var(--wo-night) 0 48%, transparent 48% 51%, var(--wo-indigo) 51% 93%, var(--wo-crimson) 93%);
  opacity: 0.58;
}

html[data-surface="white-oath"] .wo-mast__identity {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  flex-direction: column;
  justify-content: center;
  min-height: var(--wo-touch);
  line-height: 1.1;
}

html[data-surface="white-oath"] .wo-mast__identity span {
  color: var(--wo-text-muted-paper);
  font-family: var(--wo-font-data);
  font-size: var(--wo-text-2xs);
  font-weight: 650;
  letter-spacing: 0.17em;
}

html[data-surface="white-oath"] .wo-mast__identity b {
  margin-top: 0.22rem;
  font-family: var(--wo-font-display);
  font-size: var(--wo-text-lg);
  font-weight: 550;
  letter-spacing: -0.04em;
}

html[data-surface="white-oath"] .wo-mast__status {
  position: relative;
  display: grid;
  grid-template-columns: 0.5rem auto;
  column-gap: 0.72rem;
  align-items: center;
  min-height: var(--wo-touch);
  padding-inline: var(--wo-space-3);
  color: var(--wo-night);
  text-align: left;
  transition: transform var(--wo-duration-fast) var(--wo-ease-out);
}

html[data-surface="white-oath"] .wo-mast__status:hover,
html[data-surface="white-oath"] .wo-mast__status:focus-visible {
  transform: translateX(0.22rem);
}

html[data-surface="white-oath"] .wo-mast__status::before {
  position: absolute;
  inset: 0;
  border-left: var(--wo-rule) solid var(--wo-cyan);
  background: linear-gradient(90deg, var(--wo-cyan-42), transparent 72%);
  content: "";
  opacity: 0.22;
}

html[data-surface="white-oath"] .wo-mast__status i {
  position: relative;
  width: 0.48rem;
  aspect-ratio: 1;
  grid-row: 1 / span 2;
  border: 1px solid var(--wo-light);
  border-radius: 50%;
  background: var(--wo-cyan);
  box-shadow: 0 0 0 0.22rem var(--wo-cyan-42);
}

html[data-surface="white-oath"] .wo-mast__status span,
html[data-surface="white-oath"] .wo-mast__status b {
  position: relative;
  line-height: 1.2;
}

html[data-surface="white-oath"] .wo-mast__status span {
  color: var(--wo-text-muted-paper);
  font-size: var(--wo-text-2xs);
  letter-spacing: 0.08em;
}

html[data-surface="white-oath"] .wo-mast__status b {
  font-size: var(--wo-text-xs);
  font-weight: 670;
}

html[data-surface="white-oath"] .wo-mast__actions {
  display: flex;
  gap: var(--wo-space-2);
  align-items: center;
}

html[data-surface="white-oath"] .wo-icon-action {
  display: grid;
  width: var(--wo-touch);
  min-width: var(--wo-touch);
  height: var(--wo-touch);
  place-items: center;
  padding: 0;
  border: var(--wo-hairline) solid var(--wo-night-24);
  border-radius: 50%;
  background: transparent;
  color: var(--wo-night);
  transition: color var(--wo-duration-fast), background var(--wo-duration-fast), transform var(--wo-duration-fast);
}

html[data-surface="white-oath"] .wo-icon-action svg {
  width: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.6;
}

html[data-surface="white-oath"] .wo-icon-action:hover {
  background: var(--wo-night);
  color: var(--wo-light);
  transform: translateY(-2px);
}

html[data-surface="white-oath"] .wo-profile-trigger {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem auto 1rem;
  gap: 0.72rem;
  align-items: center;
  min-height: var(--wo-touch);
  padding: 0.25rem 0.2rem 0.25rem 0.35rem;
  background: transparent;
  color: var(--wo-night);
  text-align: left;
}

html[data-surface="white-oath"] .wo-profile-trigger::after {
  position: absolute;
  right: 0;
  bottom: -0.1rem;
  left: 0.35rem;
  height: var(--wo-hairline);
  content: "";
  background: var(--wo-night);
  transform: scaleX(0.28);
  transform-origin: right;
  transition: transform var(--wo-duration) var(--wo-ease-out);
}

html[data-surface="white-oath"] .wo-profile-trigger:hover::after,
html[data-surface="white-oath"] .wo-profile-trigger[aria-expanded="true"]::after {
  transform: scaleX(1);
}

html[data-surface="white-oath"] .wo-profile-trigger__avatar {
  position: relative;
  display: grid;
  width: 2.4rem;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--wo-indigo);
  color: var(--wo-light);
  font-family: var(--wo-font-display);
}

html[data-surface="white-oath"] .wo-profile-trigger__avatar::after {
  position: absolute;
  inset: 0.18rem;
  border: var(--wo-hairline) solid var(--wo-paper-78);
  border-radius: inherit;
  content: "";
}

html[data-surface="white-oath"] .wo-profile-trigger__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html[data-surface="white-oath"] .wo-mast__status.is-maintenance::before {
  border-color: var(--wo-gold);
  background: linear-gradient(90deg, var(--wo-gold-44), transparent 72%);
}

html[data-surface="white-oath"] .wo-mast__status.is-maintenance i {
  background: var(--wo-gold);
  box-shadow: 0 0 0 0.22rem var(--wo-gold-44);
}

html[data-surface="white-oath"] .wo-mast__status.is-degraded::before,
html[data-surface="white-oath"] .wo-mast__status.is-outage::before {
  border-color: var(--wo-crimson);
  background: linear-gradient(90deg, var(--wo-crimson-42), transparent 72%);
}

html[data-surface="white-oath"] .wo-mast__status.is-degraded i,
html[data-surface="white-oath"] .wo-mast__status.is-outage i {
  background: var(--wo-crimson);
  box-shadow: 0 0 0 0.22rem var(--wo-crimson-42);
}

html[data-surface="white-oath"] .wo-profile-trigger small,
html[data-surface="white-oath"] .wo-profile-trigger b {
  display: block;
  max-width: 11rem;
  overflow: hidden;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-surface="white-oath"] .wo-profile-trigger small {
  color: var(--wo-text-muted-paper);
  font-size: var(--wo-text-2xs);
  font-weight: 500;
}

html[data-surface="white-oath"] .wo-profile-trigger b {
  margin-top: 0.12rem;
  font-size: var(--wo-text-xs);
  font-weight: 680;
}

html[data-surface="white-oath"] .wo-profile-trigger > svg {
  width: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

html[data-surface="white-oath"] .wo-axis {
  position: fixed;
  z-index: 90;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--wo-axis-width);
  flex-direction: column;
  padding: max(1.65rem, env(safe-area-inset-top)) clamp(0.9rem, 1.2vw, 1.55rem) max(1.2rem, env(safe-area-inset-bottom));
  color: var(--wo-text-on-night);
}

html[data-surface="white-oath"] .wo-axis::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--wo-hairline);
  content: "";
  background: linear-gradient(var(--wo-cyan), rgba(233, 230, 222, 0.14) 18% 78%, var(--wo-crimson));
  opacity: 0.82;
}

html[data-surface="white-oath"] .wo-axis__caption {
  display: block;
  min-height: var(--wo-mast-height);
  color: var(--wo-text-muted-night);
  font-family: var(--wo-font-data);
  font-size: var(--wo-text-2xs);
  font-weight: 650;
  letter-spacing: 0.15em;
  line-height: 1.4;
}

html[data-surface="white-oath"] .wo-axis ol {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: var(--wo-space-4) 0;
  margin: 0;
  list-style: none;
}

html[data-surface="white-oath"] .wo-axis li {
  position: relative;
  margin: 0;
}

html[data-surface="white-oath"] .wo-axis li::after {
  position: absolute;
  top: 50%;
  right: calc(clamp(0.9rem, 1.2vw, 1.55rem) * -1 - 0.22rem);
  width: 0.42rem;
  aspect-ratio: 1;
  border: 1px solid var(--wo-night);
  border-radius: 50%;
  background: var(--wo-paper);
  content: "";
  opacity: 0.36;
  transform: translate(50%, -50%);
}

html[data-surface="white-oath"] .wo-axis a {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr;
  column-gap: 0.65rem;
  align-items: center;
  min-height: clamp(3.45rem, 5.8vh, 4.7rem);
  padding: 0.55rem 0;
  color: var(--wo-text-muted-night);
  transition: color var(--wo-duration), transform var(--wo-duration) var(--wo-ease-out);
}

html[data-surface="white-oath"] .wo-axis a::before {
  position: absolute;
  z-index: -1;
  inset: 0 calc(clamp(0.9rem, 1.2vw, 1.55rem) * -1) 0 -0.65rem;
  background: var(--wo-porcelain);
  box-shadow: inset 0 -1px 0 var(--wo-night-12);
  content: "";
  opacity: 0;
  transform: translateX(-1.2rem) scaleX(0.88);
  transform-origin: left;
  transition: opacity var(--wo-duration), transform var(--wo-duration-long) var(--wo-ease-freeze);
}

html[data-surface="white-oath"] .wo-axis a i {
  grid-row: 1 / span 2;
  color: inherit;
  font-family: var(--wo-font-data);
  font-size: var(--wo-text-xs);
  font-style: normal;
  letter-spacing: 0.08em;
}

html[data-surface="white-oath"] .wo-axis a span {
  align-self: end;
  color: inherit;
  font-size: var(--wo-text-sm);
  font-weight: 680;
  line-height: 1.3;
}

html[data-surface="white-oath"] .wo-axis a small {
  align-self: start;
  color: inherit;
  font-size: var(--wo-text-2xs);
  line-height: 1.3;
  opacity: 0.62;
}

html[data-surface="white-oath"] .wo-axis a:hover {
  color: var(--wo-light);
  transform: translateX(0.3rem);
}

html[data-surface="white-oath"] .wo-axis a[aria-current="page"],
html[data-surface="white-oath"] .wo-axis a.is-active {
  color: var(--wo-night);
  transform: translateX(0.35rem);
}

html[data-surface="white-oath"] .wo-axis a[aria-current="page"]::before,
html[data-surface="white-oath"] .wo-axis a.is-active::before {
  opacity: 1;
  transform: translateX(0) scaleX(1);
}

html[data-surface="white-oath"] .wo-axis li:has(a[aria-current="page"])::after,
html[data-surface="white-oath"] .wo-axis li:has(a.is-active)::after {
  background: var(--wo-crimson);
  box-shadow: 0 0 0 0.24rem var(--wo-crimson-42);
  opacity: 1;
}

html[data-surface="white-oath"] .wo-axis footer {
  display: grid;
  gap: var(--wo-space-2);
}

html[data-surface="white-oath"] .wo-axis footer button {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  min-height: var(--wo-touch);
  padding: 0.5rem 0;
  border-top: var(--wo-hairline) solid var(--wo-paper-18);
  border-bottom: var(--wo-hairline) solid var(--wo-paper-18);
  background: transparent;
  color: var(--wo-text-muted-night);
  font-size: var(--wo-text-xs);
  text-align: left;
  transition: color var(--wo-duration-fast), padding var(--wo-duration-fast);
}

html[data-surface="white-oath"] .wo-axis footer button:hover {
  padding-left: 0.35rem;
  color: var(--wo-light);
}

html[data-surface="white-oath"] .wo-axis footer button i {
  color: var(--wo-cyan);
  font-style: normal;
}

html[data-surface="white-oath"] .wo-axis footer small {
  color: var(--wo-text-muted-night);
  font-family: var(--wo-font-data);
  font-size: var(--wo-text-2xs);
  letter-spacing: 0.09em;
  opacity: 0.54;
}

html[data-surface="white-oath"] .wo-stage {
  position: relative;
  z-index: 1;
  width: min(calc(100% - var(--wo-axis-width)), var(--wo-stage-max));
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--wo-mast-height) clamp(1.2rem, 3.2vw, 5.4rem) 0;
  margin-left: var(--wo-axis-width);
}

html[data-surface="white-oath"] .wo-route-host.is-loading {
  position: relative;
  min-height: calc(100dvh - var(--wo-mast-height));
}

html[data-surface="white-oath"] .wo-route-canvas {
  position: relative;
  z-index: 1;
  min-height: inherit;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 140ms ease, transform 170ms var(--wo-ease-freeze);
}

html[data-surface="white-oath"] .wo-route-host.has-passage .wo-route-canvas {
  opacity: 0;
  transform: translate3d(0.55rem, 0.2rem, 0);
}

html[data-surface="white-oath"] .wo-route-passage {
  --wo-passage-accent: var(--wo-cyan);
  --wo-passage-angle: -8deg;
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  min-height: calc(100dvh - var(--wo-mast-height));
  align-content: center;
  padding: clamp(3rem, 7vw, 10rem) clamp(1rem, 5vw, 7rem);
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
  transition: opacity 140ms ease, clip-path 170ms var(--wo-ease-freeze);
}

html[data-surface="white-oath"] .wo-route-host.is-handing-off .wo-route-passage {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

html[data-surface="white-oath"] .wo-route-host.is-handing-off[data-wo-route-direction="backward"] .wo-route-passage {
  clip-path: inset(0 0 0 100%);
}

html[data-surface="white-oath"] .wo-route-passage::before {
  position: absolute;
  z-index: -2;
  inset: 18% 7% 14% 26%;
  background: linear-gradient(136deg, var(--wo-indigo-38), rgba(81, 88, 117, 0.08) 64%, transparent);
  content: "";
  transform: skewX(var(--wo-passage-angle));
  transform-origin: right center;
}

html[data-surface="white-oath"] .wo-route-passage::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 4%;
  left: 2%;
  height: var(--wo-rule);
  background: linear-gradient(90deg, transparent, var(--wo-passage-accent) 14% 34%, var(--wo-night) 34% 73%, var(--wo-crimson) 73% 87%, transparent);
  content: "";
  transform: rotate(var(--wo-passage-angle));
  transform-origin: center;
}

html[data-surface="white-oath"] .wo-route-passage[data-wo-passage="models"] { --wo-passage-accent: var(--wo-indigo); --wo-passage-angle: -11deg; }
html[data-surface="white-oath"] .wo-route-passage[data-wo-passage="records"] { --wo-passage-accent: var(--wo-crimson); --wo-passage-angle: 7deg; }
html[data-surface="white-oath"] .wo-route-passage[data-wo-passage="communications"] { --wo-passage-accent: var(--wo-gold); --wo-passage-angle: -5deg; }
html[data-surface="white-oath"] .wo-route-passage[data-wo-passage="keys"] { --wo-passage-accent: var(--wo-cyan); --wo-passage-angle: 9deg; }
html[data-surface="white-oath"] .wo-route-passage[data-wo-passage="guide"] { --wo-passage-accent: var(--wo-crimson); --wo-passage-angle: -9deg; }

html[data-surface="white-oath"] .wo-route-passage__index {
  position: absolute;
  top: clamp(1.5rem, 5vw, 6rem);
  right: clamp(0.5rem, 3vw, 4rem);
  color: var(--wo-indigo-38);
  font-family: var(--wo-font-data);
  font-size: clamp(6rem, 17vw, 25rem);
  font-weight: 700;
  letter-spacing: -0.11em;
  line-height: 0.72;
}

html[data-surface="white-oath"] .wo-route-passage__copy {
  position: relative;
  z-index: 2;
  width: min(49rem, 72%);
  padding: clamp(1.4rem, 3vw, 3.4rem);
  border-left: 0.3rem solid var(--wo-passage-accent);
  background: linear-gradient(102deg, var(--wo-paper-94), var(--wo-paper-78) 70%, transparent);
  box-shadow: var(--wo-shadow-paper);
}

html[data-surface="white-oath"] .wo-route-passage__copy > span {
  color: var(--wo-crimson);
  font-family: var(--wo-font-data);
  font-size: var(--wo-text-xs);
  font-weight: 700;
  letter-spacing: 0.17em;
}

html[data-surface="white-oath"] .wo-route-passage__copy h1 {
  margin: var(--wo-space-2) 0 0;
  font-family: var(--wo-font-display);
  font-size: clamp(2.7rem, 6.6vw, 8rem);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.94;
}

html[data-surface="white-oath"] .wo-route-passage__copy p {
  margin: var(--wo-space-4) 0 0;
  color: var(--wo-text-muted-paper);
  font-size: var(--wo-text-sm);
  letter-spacing: 0.08em;
}

html[data-surface="white-oath"] .wo-route-passage__field {
  position: absolute;
  z-index: 1;
  inset: 0;
}

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

html[data-surface="white-oath"] .wo-route-passage__field i {
  right: -6%;
  width: 58%;
  height: var(--wo-hairline);
  background: var(--wo-night-24);
  transform: rotate(var(--wo-passage-angle));
  transform-origin: right;
}

html[data-surface="white-oath"] .wo-route-passage__field i:nth-child(1) { top: 28%; }
html[data-surface="white-oath"] .wo-route-passage__field i:nth-child(2) { top: 61%; width: 76%; background: var(--wo-crimson-42); }
html[data-surface="white-oath"] .wo-route-passage__field i:nth-child(3) { top: 73%; width: 39%; background: var(--wo-cyan-42); }
html[data-surface="white-oath"] .wo-route-passage__field b {
  right: 13%;
  bottom: 8%;
  width: clamp(8rem, 19vw, 28rem);
  aspect-ratio: 1;
  border: var(--wo-hairline) solid var(--wo-cyan-42);
  border-radius: 50%;
}
html[data-surface="white-oath"] .wo-route-passage__field span {
  top: 21%;
  right: 24%;
  width: clamp(3rem, 8vw, 12rem);
  height: clamp(0.35rem, 0.7vw, 0.8rem);
  background: var(--wo-passage-accent);
}

@media (max-width: 680px) {
  html[data-surface="white-oath"] .wo-route-host.is-loading,
  html[data-surface="white-oath"] .wo-route-passage {
    min-height: calc(100dvh - var(--wo-mast-height) - var(--wo-mobile-tabs-height, 4.8rem));
  }

  html[data-surface="white-oath"] .wo-route-passage {
    padding: 2rem 0.35rem 4rem;
  }

  html[data-surface="white-oath"] .wo-route-passage::before {
    inset: 19% -12% 13% 18%;
  }

  html[data-surface="white-oath"] .wo-route-passage__index {
    top: 2rem;
    right: -0.03em;
    font-size: clamp(6rem, 31vw, 8.5rem);
  }

  html[data-surface="white-oath"] .wo-route-passage__copy {
    width: 94%;
    padding: 1.4rem 1.2rem;
    box-shadow: 0.45rem 0.45rem 0 var(--wo-indigo-deep);
  }

  html[data-surface="white-oath"] .wo-route-passage__copy h1 {
    font-size: clamp(2.8rem, 15vw, 4.6rem);
  }

  html[data-surface="white-oath"] .wo-route-passage__field i {
    right: -18%;
    width: 84%;
  }

  html[data-surface="white-oath"] .wo-route-passage__field b {
    right: -7%;
    bottom: 8%;
    width: 11rem;
  }
}

html[data-surface="white-oath"] .wo-mobile-tabs {
  display: none;
}

html[data-surface="white-oath"] .wo-toast-region {
  position: fixed;
  z-index: 250;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  width: min(25rem, calc(100vw - 2rem));
  gap: 0.6rem;
  pointer-events: none;
}

html[data-surface="white-oath"] .wo-dialog-layer {
  position: relative;
  z-index: 300;
}

html[data-surface="white-oath"] .wo-boot {
  position: fixed;
  z-index: 900;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.65fr);
  overflow: hidden;
  background: var(--wo-night);
  color: var(--wo-light);
}

html[data-surface="white-oath"] .wo-boot__field {
  position: relative;
  min-height: 100%;
  background:
    linear-gradient(102deg, transparent 0 62%, rgba(145, 194, 200, 0.09) 62% 63%, transparent 63%),
    linear-gradient(145deg, var(--wo-night-deep), var(--wo-indigo-deep));
}

html[data-surface="white-oath"] .wo-boot__field > i {
  position: absolute;
  width: 38%;
  height: 1px;
  background: var(--wo-paper-18);
  transform: rotate(-37deg);
  transform-origin: left;
}

html[data-surface="white-oath"] .wo-boot__field > i:nth-child(1) { top: 18%; left: 8%; }
html[data-surface="white-oath"] .wo-boot__field > i:nth-child(2) { top: 43%; left: 19%; width: 61%; }
html[data-surface="white-oath"] .wo-boot__field > i:nth-child(3) { top: 66%; left: 4%; width: 47%; background: var(--wo-crimson-42); }
html[data-surface="white-oath"] .wo-boot__field > i:nth-child(4) { top: 81%; left: 41%; width: 34%; background: var(--wo-cyan-42); }

html[data-surface="white-oath"] .wo-boot__field svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

html[data-surface="white-oath"] .wo-boot__event,
html[data-surface="white-oath"] .wo-boot__echo,
html[data-surface="white-oath"] .wo-boot__cut {
  fill: none;
  vector-effect: non-scaling-stroke;
}

html[data-surface="white-oath"] .wo-boot__event { stroke: var(--wo-crimson); stroke-width: 2; }
html[data-surface="white-oath"] .wo-boot__echo { stroke: var(--wo-cyan); stroke-width: 1; opacity: 0.66; }
html[data-surface="white-oath"] .wo-boot__cut { stroke: var(--wo-paper-18); stroke-width: 1; }
html[data-surface="white-oath"] .wo-boot__field circle { fill: var(--wo-gold); }

html[data-surface="white-oath"] .wo-boot__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--wo-space-7);
  background: var(--wo-porcelain);
  color: var(--wo-night);
}

html[data-surface="white-oath"] .wo-boot__copy::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.42rem;
  height: 48%;
  content: "";
  background: var(--wo-crimson);
}

html[data-surface="white-oath"] .wo-boot__copy span {
  font-family: var(--wo-font-data);
  font-size: var(--wo-text-xs);
  font-weight: 650;
  letter-spacing: 0.18em;
}

html[data-surface="white-oath"] .wo-boot__copy strong {
  margin-block: var(--wo-space-3) var(--wo-space-6);
  font-family: var(--wo-font-display);
  font-size: var(--wo-text-display);
  font-weight: 520;
  letter-spacing: -0.08em;
  line-height: 0.94;
  writing-mode: vertical-rl;
}

html[data-surface="white-oath"] .wo-boot__copy p {
  padding-top: var(--wo-space-3);
  margin: 0;
  border-top: var(--wo-hairline) solid var(--wo-night-24);
  color: var(--wo-text-muted-paper);
  font-size: var(--wo-text-sm);
}

html[data-surface="white-oath"] .wo-recovery {
  position: fixed;
  z-index: 950;
  inset: 0;
  display: grid;
  align-content: center;
  padding: clamp(2rem, 9vw, 11rem);
  background:
    linear-gradient(112deg, var(--wo-night) 0 42%, transparent 42%),
    var(--wo-porcelain);
  color: var(--wo-night);
}

html[data-surface="white-oath"] .wo-recovery > span,
html[data-surface="white-oath"] .wo-recovery h1,
html[data-surface="white-oath"] .wo-recovery p,
html[data-surface="white-oath"] .wo-recovery > div {
  width: min(38rem, 48vw);
  margin-left: auto;
}

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

html[data-surface="white-oath"] .wo-recovery h1 {
  margin-block: var(--wo-space-3);
  font-family: var(--wo-font-display);
  font-size: var(--wo-text-2xl);
  font-weight: 520;
  line-height: 1.1;
}

html[data-surface="white-oath"] .wo-recovery p {
  color: var(--wo-text-muted-paper);
  font-size: var(--wo-text-base);
}

html[data-surface="white-oath"] .wo-recovery > div {
  display: flex;
  gap: var(--wo-space-2);
  margin-top: var(--wo-space-5);
}

html[data-surface="white-oath"] .wo-recovery button {
  min-height: var(--wo-touch);
  padding: 0.7rem 1.15rem;
  background: var(--wo-night);
  color: var(--wo-light);
  font-weight: 650;
}

html[data-surface="white-oath"] .wo-recovery button + button {
  border: var(--wo-hairline) solid var(--wo-night);
  background: transparent;
  color: var(--wo-night);
}