@media (min-width: 160rem) {
  html[data-surface="white-oath"] {
    --wo-axis-width: 15rem;
    --wo-mast-height: 7rem;
    --wo-stage-max: 168rem;
  }

  html[data-surface="white-oath"] .wo-stage {
    padding-inline: clamp(5rem, 5vw, 9rem);
  }

  html[data-surface="white-oath"] .wo-world__porcelain {
    left: var(--wo-axis-width);
  }

  html[data-surface="white-oath"] .wo-page {
    max-width: 146rem;
    margin-inline: auto;
  }
}

@media (min-width: 210rem) {
  html[data-surface="white-oath"] {
    --wo-stage-gutter: calc((100vw - var(--wo-axis-width) - var(--wo-stage-max)) / 2);
  }

  html[data-surface="white-oath"] .wo-stage {
    margin-left: calc(var(--wo-axis-width) + var(--wo-stage-gutter));
    margin-right: auto;
  }

  html[data-surface="white-oath"] .wo-mast {
    right: var(--wo-stage-gutter);
    left: calc(var(--wo-axis-width) + var(--wo-stage-gutter));
  }
}

@media (max-width: 90rem) {
  html[data-surface="white-oath"] {
    --wo-axis-width: 10rem;
  }

  html[data-surface="white-oath"] .wo-axis {
    padding-inline: 0.85rem;
  }

  html[data-surface="white-oath"] .wo-axis a {
    grid-template-columns: 1.65rem 1fr;
    column-gap: 0.48rem;
  }

  html[data-surface="white-oath"] .wo-axis a small {
    display: none;
  }

  html[data-surface="white-oath"] .wo-axis a span {
    align-self: center;
  }

  html[data-surface="white-oath"] .wo-mast {
    gap: var(--wo-space-3);
    padding-inline: 1.5rem;
  }

  html[data-surface="white-oath"] .wo-mast::after {
    right: 1.5rem;
    left: 1.5rem;
  }

  html[data-surface="white-oath"] .wo-stage {
    padding-inline: clamp(1.2rem, 2.4vw, 2.8rem);
  }
}

@media (max-width: 75rem) {
  html[data-surface="white-oath"] .wo-mast__status {
    max-width: 12rem;
  }

  html[data-surface="white-oath"] .wo-mast__status b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-surface="white-oath"] .wo-grid > [data-span="3"],
  html[data-surface="white-oath"] .wo-grid > [data-span="4"] {
    grid-column: span 6;
  }

  html[data-surface="white-oath"] .wo-grid > [data-span="5"],
  html[data-surface="white-oath"] .wo-grid > [data-span="7"],
  html[data-surface="white-oath"] .wo-grid > [data-span="8"],
  html[data-surface="white-oath"] .wo-grid > [data-span="9"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 68rem) {
  html[data-surface="white-oath"] {
    --wo-mast-height: 4.8rem;
  }

  html[data-surface="white-oath"] .wo-world__porcelain {
    left: 0;
    clip-path: none;
  }

  html[data-surface="white-oath"] .wo-world__night {
    top: auto;
    width: 100%;
    height: 5.3rem;
    background: var(--wo-night);
  }

  html[data-surface="white-oath"] .wo-world__indigo {
    left: 48%;
  }

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

  html[data-surface="white-oath"] .wo-mast {
    left: 0;
    grid-template-columns: minmax(10rem, 1fr) auto auto;
    padding-top: max(0.55rem, env(safe-area-inset-top));
    background: rgba(233, 230, 222, 0.92);
  }

  html[data-surface="white-oath"] .wo-stage {
    width: 100%;
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom));
    margin-left: 0;
  }

  html[data-surface="white-oath"] .wo-mobile-tabs {
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 0.35rem max(0.45rem, env(safe-area-inset-right)) max(0.35rem, env(safe-area-inset-bottom)) max(0.45rem, env(safe-area-inset-left));
    border-top: var(--wo-hairline) solid var(--wo-paper-18);
    background: var(--wo-night-92);
    box-shadow: 0 -1rem 2.4rem rgba(12, 13, 20, 0.18);
    color: var(--wo-text-muted-night);
  }

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

  html[data-surface="white-oath"] .wo-mobile-tabs a {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 3.8rem;
    place-items: center;
    align-content: center;
    padding: 0.38rem 0.2rem;
    color: inherit;
    transition: color var(--wo-duration-fast), background var(--wo-duration-fast), transform var(--wo-duration-fast);
  }

  html[data-surface="white-oath"] .wo-mobile-tabs a i {
    color: var(--wo-cyan);
    font-family: var(--wo-font-data);
    font-size: 0.58rem;
    font-style: normal;
    line-height: 1;
    opacity: 0.68;
  }

  html[data-surface="white-oath"] .wo-mobile-tabs a span {
    overflow: hidden;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    font-weight: 620;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-surface="white-oath"] .wo-mobile-tabs a[aria-current="page"],
  html[data-surface="white-oath"] .wo-mobile-tabs a.is-active {
    background: var(--wo-porcelain);
    color: var(--wo-night);
    transform: translateY(-0.28rem);
  }

  html[data-surface="white-oath"] .wo-mobile-tabs a[aria-current="page"]::after,
  html[data-surface="white-oath"] .wo-mobile-tabs a.is-active::after {
    position: absolute;
    right: 22%;
    bottom: 0.25rem;
    left: 22%;
    height: 0.13rem;
    background: var(--wo-crimson);
    content: "";
  }

  html[data-surface="white-oath"] .wo-page-head {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 31%);
  }
}

@media (max-width: 52rem) {
  html[data-surface="white-oath"] .wo-mast {
    grid-template-columns: minmax(9rem, 1fr) auto;
  }

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

  html[data-surface="white-oath"] .wo-page-head {
    grid-template-columns: 1fr;
    gap: var(--wo-space-3);
    margin-bottom: var(--wo-space-6);
  }

  html[data-surface="white-oath"] .wo-page-head__aside {
    max-width: var(--wo-copy-max);
  }

  html[data-surface="white-oath"] .wo-page-head__index {
    font-size: clamp(4rem, 15vw, 7.5rem);
  }

  html[data-surface="white-oath"] .wo-grid > [data-span] {
    grid-column: 1 / -1;
  }

  html[data-surface="white-oath"] .wo-profile-dialog {
    width: min(45rem, calc(100vw - 1.5rem));
  }

  html[data-surface="white-oath"] .wo-profile-hero {
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    padding: var(--wo-space-6) var(--wo-space-4) var(--wo-space-4);
  }

  html[data-surface="white-oath"] .wo-profile-hero > span {
    left: var(--wo-space-4);
  }

  html[data-surface="white-oath"] .wo-profile-ledger,
  html[data-surface="white-oath"] .wo-profile-section {
    padding-inline: var(--wo-space-4);
  }

  html[data-surface="white-oath"] .wo-profile-wallet__total b {
    font-size: var(--wo-text-xl);
  }

  html[data-surface="white-oath"] .wo-boot {
    grid-template-columns: 1fr minmax(14rem, 0.65fr);
  }

  html[data-surface="white-oath"] .wo-boot__copy {
    padding: var(--wo-space-5);
  }
}

@media (max-width: 40rem) {
  html[data-surface="white-oath"] {
    --wo-mast-height: 4.45rem;
  }

  html[data-surface="white-oath"] .wo-mast {
    gap: 0.45rem;
    padding-inline: max(0.8rem, env(safe-area-inset-left)) max(0.8rem, env(safe-area-inset-right));
  }

  html[data-surface="white-oath"] .wo-mast::after {
    right: max(0.8rem, env(safe-area-inset-right));
    left: max(0.8rem, env(safe-area-inset-left));
  }

  html[data-surface="white-oath"] .wo-mast__identity span {
    overflow: hidden;
    max-width: 13rem;
    font-size: 0.56rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-surface="white-oath"] .wo-mast__identity b {
    font-size: 1.08rem;
  }

  html[data-surface="white-oath"] .wo-mast__actions {
    gap: 0.3rem;
  }

  html[data-surface="white-oath"] .wo-profile-trigger {
    grid-template-columns: 2.3rem;
    padding: 0;
  }

  html[data-surface="white-oath"] .wo-profile-trigger > span:nth-child(2),
  html[data-surface="white-oath"] .wo-profile-trigger > svg {
    display: none;
  }

  html[data-surface="white-oath"] .wo-profile-trigger::after {
    display: none;
  }

  html[data-surface="white-oath"] .wo-stage {
    padding-inline: max(0.95rem, env(safe-area-inset-left)) max(0.95rem, env(safe-area-inset-right));
  }

  html[data-surface="white-oath"] .wo-page {
    padding-block: var(--wo-space-5) var(--wo-space-7);
  }

  html[data-surface="white-oath"] .wo-page::before {
    top: 1rem;
    right: -5rem;
    opacity: 0.34;
  }

  html[data-surface="white-oath"] .wo-display,
  html[data-surface="white-oath"] .wo-page h1 {
    max-width: 10ch;
  }

  html[data-surface="white-oath"] .wo-page-head__index {
    top: 0;
    right: -0.05em;
    font-size: clamp(4rem, 23vw, 6.5rem);
    opacity: 0.72;
  }

  html[data-surface="white-oath"] .wo-page-head::after {
    background: linear-gradient(90deg, var(--wo-crimson) 0 18%, var(--wo-night) 18% 68%, var(--wo-cyan) 68%);
  }

  html[data-surface="white-oath"] .wo-section-head {
    align-items: start;
    flex-direction: column;
  }

  html[data-surface="white-oath"] .wo-plane,
  html[data-surface="white-oath"] .wo-sheet,
  html[data-surface="white-oath"] .wo-empty,
  html[data-surface="white-oath"] .wo-error {
    padding: var(--wo-space-4);
  }

  html[data-surface="white-oath"] .wo-segmented {
    display: grid;
    width: 100%;
    grid-auto-columns: 1fr;
  }

  html[data-surface="white-oath"] .wo-dialog-wrap {
    place-items: end center;
    padding: 0;
  }

  html[data-surface="white-oath"] .wo-dialog,
  html[data-surface="white-oath"] .wo-search-dialog,
  html[data-surface="white-oath"] .wo-profile-dialog {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - max(0.75rem, env(safe-area-inset-top)));
    border-top-width: 0.28rem;
    box-shadow: none;
  }

  html[data-surface="white-oath"] .wo-dialog,
  html[data-surface="white-oath"] .wo-profile-folio {
    transform-origin: bottom center;
  }

  html[data-surface="white-oath"] .wo-search-dialog > header {
    padding: var(--wo-space-4);
  }

  html[data-surface="white-oath"] .wo-search-field {
    margin: var(--wo-space-3) var(--wo-space-4);
  }

  html[data-surface="white-oath"] .wo-search-results {
    padding: 0 var(--wo-space-4) calc(var(--wo-space-5) + env(safe-area-inset-bottom));
  }

  html[data-surface="white-oath"] .wo-profile-hero {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    gap: var(--wo-space-3);
  }

  html[data-surface="white-oath"] .wo-profile-ledger dl {
    grid-template-columns: 1fr;
    gap: var(--wo-space-2);
  }

  html[data-surface="white-oath"] .wo-profile-checkin {
    grid-template-columns: 1fr;
  }

  html[data-surface="white-oath"] .wo-profile-checkin .wo-action {
    width: 100%;
  }

  html[data-surface="white-oath"] .wo-profile-actions,
  html[data-surface="white-oath"] .wo-profile-feedback form {
    grid-template-columns: 1fr;
  }

  html[data-surface="white-oath"] .wo-profile-feedback .wo-field--wide,
  html[data-surface="white-oath"] .wo-profile-feedback form footer {
    grid-column: auto;
  }

  html[data-surface="white-oath"] .wo-profile-feedback form footer {
    align-items: stretch;
    flex-direction: column;
  }

  html[data-surface="white-oath"] .wo-table-wrap {
    margin-inline: calc(max(0.95rem, env(safe-area-inset-left)) * -1);
    width: calc(100% + max(1.9rem, env(safe-area-inset-left) + env(safe-area-inset-right)));
    padding-inline: max(0.95rem, env(safe-area-inset-left));
  }

  html[data-surface="white-oath"] .wo-toast-region {
    right: max(0.65rem, env(safe-area-inset-right));
    bottom: calc(5.3rem + env(safe-area-inset-bottom));
    width: calc(100vw - max(1.3rem, env(safe-area-inset-left) + env(safe-area-inset-right)));
  }

  html[data-surface="white-oath"] .wo-boot {
    grid-template: minmax(0, 1fr) auto / 1fr;
  }

  html[data-surface="white-oath"] .wo-boot__field {
    min-height: 0;
  }

  html[data-surface="white-oath"] .wo-boot__copy {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--wo-space-2) var(--wo-space-4);
    padding: var(--wo-space-5) max(var(--wo-space-4), env(safe-area-inset-right)) max(var(--wo-space-5), env(safe-area-inset-bottom)) max(var(--wo-space-4), env(safe-area-inset-left));
  }

  html[data-surface="white-oath"] .wo-boot__copy strong {
    grid-row: 1 / span 2;
    grid-column: 2;
    margin: 0;
    font-size: clamp(2.6rem, 14vw, 4.5rem);
    writing-mode: horizontal-tb;
  }

  html[data-surface="white-oath"] .wo-boot__copy p {
    align-self: end;
  }

  html[data-surface="white-oath"] .wo-recovery {
    align-content: end;
    padding: var(--wo-space-5) max(var(--wo-space-4), env(safe-area-inset-right)) max(var(--wo-space-6), env(safe-area-inset-bottom)) max(var(--wo-space-4), env(safe-area-inset-left));
    background:
      linear-gradient(165deg, var(--wo-night) 0 34%, transparent 34%),
      var(--wo-porcelain);
  }

  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: 100%;
    margin-left: 0;
  }

  html[data-surface="white-oath"] .wo-recovery > div {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 23rem) {
  html[data-surface="white-oath"] .wo-mast__identity span {
    display: none;
  }

  html[data-surface="white-oath"] .wo-mobile-tabs a span {
    font-size: 0.64rem;
  }

  html[data-surface="white-oath"] .wo-profile-hero {
    grid-template-columns: 3.7rem minmax(0, 1fr) auto;
    padding-inline: var(--wo-space-3);
  }

  html[data-surface="white-oath"] .wo-profile-ledger,
  html[data-surface="white-oath"] .wo-profile-section {
    padding-inline: var(--wo-space-3);
  }
}

@media (max-height: 42rem) and (orientation: landscape) {
  html[data-surface="white-oath"] .wo-axis ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-surface="white-oath"] .wo-axis a {
    min-height: 2.7rem;
  }

  html[data-surface="white-oath"] .wo-axis a small {
    display: none;
  }

  html[data-surface="white-oath"] .wo-dialog,
  html[data-surface="white-oath"] .wo-search-dialog,
  html[data-surface="white-oath"] .wo-profile-dialog {
    max-height: calc(100dvh - 1rem);
  }
}

@media (forced-colors: active) {
  html[data-surface="white-oath"] .wo-world {
    display: none;
  }

  html[data-surface="white-oath"] .wo-axis,
  html[data-surface="white-oath"] .wo-mast,
  html[data-surface="white-oath"] .wo-mobile-tabs,
  html[data-surface="white-oath"] .wo-plane,
  html[data-surface="white-oath"] .wo-sheet,
  html[data-surface="white-oath"] .wo-dialog {
    border: 1px solid CanvasText;
    box-shadow: none;
  }

  html[data-surface="white-oath"] .wo-action,
  html[data-surface="white-oath"] .wo-button,
  html[data-surface="white-oath"] .wo-icon-action {
    forced-color-adjust: auto;
  }
}