/*
 * Three portrait-only visual shells.
 *
 * The DOM, content, state, event handlers and navigation targets stay shared
 * with the approved landscape site.  The `portrait` query parameter only
 * chooses a visual layer:
 *   1 / heritage  — same imperial language, redrawn for a tall canvas
 *   2 / reflow    — original artwork and controls, rearranged only
 *   3 / celestial — a new midnight-celestial visual system
 */

@media (orientation: portrait) and (max-width: 820px) {
  html[data-portrait-scheme] {
    --portrait-page-inline: max(8px, 2.4vw);
    --portrait-page-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    --portrait-surface-radius: 20px;
    background: var(--portrait-canvas, #f7f4e8);
    color-scheme: light;
  }

  html[data-portrait-scheme],
  html[data-portrait-scheme] body {
    min-width: 0;
    overflow-x: clip !important;
  }

  html[data-portrait-scheme] body,
  html[data-portrait-scheme] .site-shell,
  html[data-portrait-scheme] .screen-stack {
    background: var(--portrait-canvas, #f7f4e8) !important;
  }

  html[data-portrait-scheme] .screen-stack > .screen-stage {
    isolation: isolate;
    background: var(--portrait-stage, transparent) !important;
  }

  html[data-portrait-scheme]
    .screen-stack
    > .screen-stage:not(.screen-5)
    > .screen-viewport-content,
  html[data-portrait-scheme]
    .screen-stack
    > .screen-stage.screen-5
    > .screen-viewport-content {
    z-index: 2;
    border-radius: var(--portrait-surface-radius) !important;
    box-shadow: var(--portrait-scene-shadow) !important;
  }

  html[data-portrait-scheme]
    .screen-stack
    > .screen-stage:not(.screen-5)
    > .screen-viewport-content {
    width: calc(
      100vw - var(--phone-safe-left, 0px) - var(--phone-safe-right, 0px) -
        var(--portrait-page-inline) * 2
    ) !important;
    max-width: 760px !important;
  }

  html[data-portrait-scheme]
    .screen-stack
    > .screen-stage.screen-5
    > .screen-viewport-content {
    right: calc(var(--phone-safe-right, 0px) + var(--portrait-page-inline)) !important;
    bottom: var(--portrait-page-bottom) !important;
    left: calc(var(--phone-safe-left, 0px) + var(--portrait-page-inline)) !important;
    overflow: hidden !important;
  }

  html:is(
      [data-portrait-scheme="heritage"],
      [data-portrait-scheme="celestial"]
    )
    :is(
      .identity-gateway-portal,
      .first-visit-portal,
      .temporary-service-portal,
      .heart-service-portal,
      .lifetime-service-portal,
      .more-exclusive-services,
      .more-services-editor
    ) {
    --portrait-panel-fill: rgba(255, 254, 248, 0.96);
    --portrait-panel-line: rgba(178, 132, 55, 0.46);
    --portrait-panel-ink: #173f68;
    box-sizing: border-box;
  }

  html:is(
      [data-portrait-scheme="heritage"],
      [data-portrait-scheme="celestial"]
    )
    :is(
      .identity-gateway-portal__panel,
      .first-visit-portal__access-shell,
      .first-visit-portal__arrival-card,
      .first-visit-portal__composer-writing,
      .temporary-service-portal__stage,
      .heart-service-portal__stage,
      .lifetime-service-portal__stage,
      .more-exclusive-services__directory-shell,
      .more-service-detail__panel,
      .section-five-dream-kingdom__node-info,
      .wisdom-private-feature-page,
      .heart-scroll-panel__frame,
      .lifetime-service-workspace__frame,
      .temporary-service-workspace__frame
    ) {
    border-color: var(--portrait-panel-line) !important;
    background-color: var(--portrait-panel-fill) !important;
    box-shadow: var(--portrait-panel-shadow) !important;
  }

  html[data-portrait-scheme]
    :is(
      .identity-gateway-portal__content,
      .identity-gateway-portal__service-directory,
      .identity-gateway-portal__physiology-gallery-body,
      .identity-gateway-portal__physiology-text-dialog-body,
      .more-exclusive-services__bilingual-directory,
      .more-service-detail__content
    ) {
    min-width: 0 !important;
  }

  html[data-portrait-scheme]
    :is(
      .more-exclusive-services__bilingual-rows,
      .more-exclusive-services__node-scroll-region,
      .identity-gateway-portal__service-directory > div,
      .identity-gateway-portal__physiology-narrative-list,
      .identity-gateway-portal__physiology-translation > div,
      .more-service-detail__content,
      .more-services-editor__tab-shell,
      .heart-scroll-panel__conversation,
      .lifetime-chat-panel__conversation
    ) {
    scrollbar-width: thin;
    scrollbar-color: var(--portrait-scroll-thumb, #a77b34) transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  html[data-portrait-scheme]
    :is(
      .identity-gateway-portal__close,
      .identity-gateway-portal__physiology-return,
      .more-exclusive-services__close,
      .more-service-detail__close,
      .section-five-dream-kingdom__node-info-back,
      .section-five-dream-kingdom__node-info-close,
      .wisdom-private-feature-page__back,
      .first-visit-portal__close,
      .temporary-service-portal__close,
      .heart-service-portal__close,
      .lifetime-service-portal__close
    ) {
    color: var(--portrait-action-ink, #173f68) !important;
    text-shadow: none !important;
  }

  html[data-portrait-scheme]
    :is(
      .section-five-dream-kingdom__node-shortcut-item,
      .more-exclusive-services__node-selector-trigger,
      .more-exclusive-services__node-keys button,
      .identity-gateway-portal__actions button,
      .identity-gateway-portal__service-directory button,
      .first-visit-portal button,
      .temporary-service-portal button,
      .heart-service-portal button,
      .lifetime-service-portal button
    ) {
    -webkit-tap-highlight-color: transparent;
  }

  /* The active section remains the same React section on rotation.  Scrolling
     is limited to a deliberate full-page gesture rather than nested body drift. */
  html[data-portrait-scheme] {
    scroll-snap-type: y mandatory !important;
    overscroll-behavior-y: contain;
  }

  html[data-portrait-scheme] .screen-stack > .screen-stage {
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  html[data-portrait-scheme] .portrait-line-nav__item {
    touch-action: manipulation;
  }

  /* ---------------------------------------------------------------------- */
  /* Scheme 1 — Imperial jade gallery                                       */
  /* ---------------------------------------------------------------------- */

  html[data-portrait-scheme="heritage"] {
    --portrait-canvas: #f4f0df;
    --portrait-stage:
      radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.94), transparent 42%),
      linear-gradient(180deg, #f8f5e8 0%, #e9efe6 56%, #f5edda 100%);
    --portrait-surface-radius: 24px 8px 24px 8px;
    --portrait-scene-shadow:
      0 18px 38px rgba(29, 72, 66, 0.16),
      0 0 0 1px rgba(178, 128, 43, 0.48),
      inset 0 0 0 3px rgba(255, 255, 255, 0.68);
    --portrait-panel-fill: rgba(251, 250, 241, 0.97);
    --portrait-panel-line: rgba(174, 128, 47, 0.58);
    --portrait-panel-shadow:
      0 20px 48px rgba(25, 74, 66, 0.18),
      inset 0 0 0 2px rgba(255, 255, 255, 0.72);
    --portrait-action-ink: #174e4b;
    --portrait-scroll-thumb: #29776e;
  }

  html[data-portrait-scheme="heritage"]
    .screen-stack
    > .screen-stage::before {
    opacity: 0.18 !important;
    filter: blur(28px) saturate(0.72) brightness(1.12) !important;
  }

  html[data-portrait-scheme="heritage"]
    .screen-stack
    > .screen-stage::after {
    display: block !important;
    background:
      linear-gradient(90deg, rgba(34, 105, 96, 0.16), transparent 2.4% 97.6%, rgba(34, 105, 96, 0.16)),
      linear-gradient(180deg, rgba(178, 126, 37, 0.1), transparent 15% 86%, rgba(178, 126, 37, 0.12)) !important;
    opacity: 1 !important;
  }

  html[data-portrait-scheme="heritage"]
    .screen-stack
    > .screen-stage.screen-5::after {
    display: block !important;
    z-index: 1 !important;
    pointer-events: none;
  }

  html[data-portrait-scheme="heritage"]
    .imperial-nav.imperial-nav--line {
    border: 1px solid rgba(158, 109, 33, 0.62) !important;
    border-radius: 18px 5px 18px 5px !important;
    background:
      linear-gradient(90deg, rgba(40, 115, 104, 0.1), transparent 18% 82%, rgba(40, 115, 104, 0.1)),
      linear-gradient(180deg, #fffef8, #f0ead4) !important;
    box-shadow:
      0 8px 20px rgba(32, 78, 70, 0.15),
      inset 0 0 0 3px rgba(255, 255, 255, 0.78) !important;
  }

  html[data-portrait-scheme="heritage"]
    .portrait-line-nav::before,
  html[data-portrait-scheme="heritage"]
    .portrait-line-nav::after {
    height: 3px;
    background:
      radial-gradient(circle at var(--heritage-line-cap, 5px) 50%, #8f651f 0 2px, #ecda9f 2.4px 3.5px, transparent 4px),
      linear-gradient(180deg, #fff1be 0 25%, #9f6e22 25% 55%, #e0c078 55% 78%, #fff8dc 78%) center / 100% 3px no-repeat !important;
  }

  html[data-portrait-scheme="heritage"]
    .portrait-line-nav__word {
    background: rgba(247, 244, 228, 0.94) !important;
    color: #3b2b1f;
  }

  html[data-portrait-scheme="heritage"]
    .portrait-line-nav__item.is-active
    .portrait-line-nav__word {
    color: #17655e;
  }

  html[data-portrait-scheme="heritage"]
    .portrait-line-nav__gem {
    border-color: #d9bc73;
    background:
      radial-gradient(circle at 35% 28%, white 0 8%, transparent 9%),
      radial-gradient(circle at 43% 38%, #b9f2e2 0 14%, #369a8d 31%, #155a55 64%, #082d2b 100%);
    box-shadow: 0 0 8px rgba(42, 142, 129, 0.38);
  }

  html[data-portrait-scheme="heritage"]
    .portrait-line-nav__item.is-active
    .portrait-line-nav__gem {
    background:
      radial-gradient(circle at 35% 28%, white 0 8%, transparent 9%),
      radial-gradient(circle at 43% 38%, #fff0a9 0 15%, #d89b2d 34%, #945710 68%, #482302 100%);
    box-shadow: 0 0 12px rgba(211, 155, 48, 0.62);
  }

  html[data-portrait-scheme="heritage"]
    .portrait-line-nav__underline {
    background: linear-gradient(90deg, transparent, #247d73 28% 72%, transparent);
  }

  html[data-portrait-scheme="heritage"]
    :is(
      .section-five-dream-kingdom__node-shortcut-item,
      .more-exclusive-services__node-selector-trigger,
      .more-exclusive-services__node-keys button,
      .identity-gateway-portal__service-directory button
    ) {
    border-color: rgba(42, 118, 107, 0.42) !important;
    border-radius: 18px 5px 18px 5px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(231, 242, 235, 0.86)) !important;
    box-shadow:
      inset 3px 0 0 rgba(185, 132, 36, 0.55),
      0 6px 14px rgba(35, 91, 82, 0.1) !important;
  }

  html[data-portrait-scheme="heritage"]
    :is(
      .section-five-dream-kingdom__node-shortcut-item.is-active,
      .more-exclusive-services__node-keys button.is-active,
      .identity-gateway-portal__service-directory button.is-active
    ) {
    background: linear-gradient(135deg, #fff8dd, #dfeee5) !important;
    box-shadow:
      inset 5px 0 0 #b77c1c,
      0 0 0 1px rgba(172, 119, 28, 0.54),
      0 8px 18px rgba(39, 101, 91, 0.16) !important;
  }

  html[data-portrait-scheme="heritage"]
    :is(.login-card-slot, .identity-gateway-portal__card) {
    filter:
      drop-shadow(0 12px 16px rgba(29, 79, 70, 0.2))
      drop-shadow(0 0 10px rgba(211, 171, 78, 0.2));
  }

  /* ---------------------------------------------------------------------- */
  /* Scheme 2 — Original objects, portrait reflow only                       */
  /* ---------------------------------------------------------------------- */

  html[data-portrait-scheme="reflow"] {
    --portrait-page-inline: 0px;
    --portrait-canvas: #f8f6ed;
    --portrait-stage: #f8f6ed;
    --portrait-surface-radius: 0px;
    --portrait-scene-shadow: none;
    --portrait-panel-fill: rgba(255, 255, 250, 0.98);
    --portrait-panel-line: rgba(144, 174, 201, 0.55);
    --portrait-panel-shadow: 0 10px 28px rgba(37, 74, 111, 0.12);
    --portrait-action-ink: #174d7c;
    --portrait-scroll-thumb: #2f6fa8;
  }

  html[data-portrait-scheme="reflow"]
    .screen-stack
    > .screen-stage::before {
    display: none !important;
  }

  html[data-portrait-scheme="reflow"]
    .screen-stack
    > .screen-stage::after {
    display: block !important;
    background: linear-gradient(180deg, #faf9f2, #f4f1e5) !important;
  }

  html[data-portrait-scheme="reflow"]
    .screen-stack
    > .screen-stage:not(.screen-5)
    > .screen-viewport-content {
    width: calc(
      100vw - var(--phone-safe-left, 0px) - var(--phone-safe-right, 0px)
    ) !important;
    border: 0 !important;
  }

  html[data-portrait-scheme="reflow"]
    .screen-stack
    > .screen-stage:not(.screen-5)
    > .screen-viewport-content
    > .screen-artwork,
  html[data-portrait-scheme="reflow"]
    .screen-stack
    > .screen-stage:not(.screen-5)
    .screen-artwork {
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
  }

  html[data-portrait-scheme="reflow"]
    .portrait-line-nav {
    padding-inline: 4px;
  }

  html[data-portrait-scheme="reflow"]
    .portrait-line-nav__item {
    gap: clamp(2px, 0.8vw, 4px);
    padding-inline: 3px;
  }

  html[data-portrait-scheme="reflow"]
    .portrait-line-nav__word {
    background: rgba(249, 247, 236, 0.96);
  }

  html[data-portrait-scheme="reflow"]
    :is(
      .section-five-dream-kingdom__node-shortcut-item,
      .more-exclusive-services__node-selector-trigger,
      .more-exclusive-services__node-keys button,
      .identity-gateway-portal__service-directory button,
      .login-card-slot,
      .identity-gateway-portal__card
    ) {
    filter: none !important;
    transform-style: flat !important;
  }

  /* ---------------------------------------------------------------------- */
  /* Scheme 3 — Celestial archive                                            */
  /* ---------------------------------------------------------------------- */

  html[data-portrait-scheme="celestial"] {
    --portrait-canvas: #030914;
    --portrait-stage:
      radial-gradient(circle at 16% 18%, rgba(40, 118, 168, 0.18), transparent 31%),
      radial-gradient(circle at 84% 78%, rgba(156, 104, 30, 0.2), transparent 34%),
      radial-gradient(circle at 50% 48%, #10233b 0%, #071322 53%, #020812 100%);
    --portrait-surface-radius: 30px;
    --portrait-scene-shadow:
      0 0 0 1px rgba(238, 193, 91, 0.48),
      0 0 0 5px rgba(53, 145, 171, 0.1),
      0 24px 54px rgba(0, 0, 0, 0.58),
      0 0 28px rgba(72, 173, 202, 0.16);
    --portrait-panel-fill: rgba(8, 23, 39, 0.96);
    --portrait-panel-line: rgba(221, 178, 76, 0.5);
    --portrait-panel-shadow:
      0 0 0 1px rgba(78, 178, 202, 0.22),
      0 20px 54px rgba(0, 0, 0, 0.5);
    --portrait-action-ink: #d8eff4;
    --portrait-scroll-thumb: #d2a94e;
    color-scheme: dark;
  }

  html[data-portrait-scheme="celestial"]
    .screen-stack
    > .screen-stage::before {
    display: block !important;
    inset: 0 !important;
    background:
      radial-gradient(circle at 11% 24%, rgba(255, 244, 190, 0.92) 0 1px, transparent 1.5px),
      radial-gradient(circle at 78% 16%, rgba(163, 224, 255, 0.8) 0 1px, transparent 1.5px),
      radial-gradient(circle at 67% 72%, rgba(255, 218, 129, 0.72) 0 1px, transparent 1.6px),
      radial-gradient(circle at 29% 84%, rgba(152, 215, 244, 0.76) 0 1px, transparent 1.5px) !important;
    background-size: 83px 83px, 119px 119px, 157px 157px, 197px 197px !important;
    filter: none !important;
    opacity: 0.58 !important;
    transform: none !important;
  }

  html[data-portrait-scheme="celestial"]
    .screen-stack
    > .screen-stage::after {
    display: block !important;
    background:
      linear-gradient(90deg, rgba(218, 174, 73, 0.2), transparent 1.2% 98.8%, rgba(218, 174, 73, 0.2)),
      radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.42)) !important;
  }

  html[data-portrait-scheme="celestial"]
    .screen-stack
    > .screen-stage.screen-5::after,
  html[data-portrait-scheme="celestial"]
    .screen-stack
    > .screen-stage.screen-5::before {
    display: block !important;
    z-index: 1 !important;
    pointer-events: none;
  }

  html[data-portrait-scheme="celestial"]
    .screen-stack
    > .screen-stage:not(.screen-5)
    > .screen-viewport-content {
    border: 1px solid rgba(229, 189, 92, 0.48) !important;
    background: rgba(6, 17, 30, 0.88) !important;
  }

  html[data-portrait-scheme="celestial"]
    .imperial-nav.imperial-nav--line {
    border: 1px solid rgba(229, 187, 83, 0.62) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at center, rgba(33, 95, 118, 0.34), transparent 62%),
      linear-gradient(180deg, rgba(10, 29, 49, 0.985), rgba(2, 11, 23, 0.985)) !important;
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.54),
      inset 0 0 0 2px rgba(101, 193, 211, 0.1),
      0 0 22px rgba(65, 168, 193, 0.15) !important;
  }

  html[data-portrait-scheme="celestial"]
    .portrait-line-nav::before,
  html[data-portrait-scheme="celestial"]
    .portrait-line-nav::after {
    height: 1px;
    background: linear-gradient(90deg, transparent, #dcb85e 12% 88%, transparent) !important;
    box-shadow: 0 0 8px rgba(228, 190, 95, 0.62);
  }

  html[data-portrait-scheme="celestial"]
    .portrait-line-nav__item,
  html[data-portrait-scheme="celestial"]
    .portrait-line-nav__item.is-primary {
    color: #c8e4eb !important;
  }

  html[data-portrait-scheme="celestial"]
    .portrait-line-nav__word,
  html[data-portrait-scheme="celestial"]
    .portrait-line-nav__winged-gem {
    background: rgba(6, 20, 35, 0.92) !important;
  }

  html[data-portrait-scheme="celestial"]
    .portrait-line-nav__item.is-active {
    color: #ffe49a !important;
    text-shadow:
      0 0 8px rgba(111, 216, 239, 0.72),
      0 0 14px rgba(231, 186, 77, 0.44) !important;
  }

  html[data-portrait-scheme="celestial"]
    .portrait-line-nav__gem {
    border: 1px solid #f1cd74;
    background:
      radial-gradient(circle at 35% 28%, white 0 8%, transparent 9%),
      radial-gradient(circle at 44% 38%, #d6f7ff 0 15%, #4cb3cf 31%, #15516e 62%, #061b2e 100%);
    box-shadow: 0 0 9px rgba(84, 198, 224, 0.64);
  }

  html[data-portrait-scheme="celestial"]
    .portrait-line-nav__item.is-active
    .portrait-line-nav__gem {
    background:
      radial-gradient(circle at 35% 28%, white 0 8%, transparent 9%),
      radial-gradient(circle at 44% 38%, #fff4b6 0 15%, #e9b848 33%, #9c5c12 65%, #3e1c02 100%);
    box-shadow:
      0 0 8px rgba(255, 226, 142, 0.92),
      0 0 18px rgba(77, 191, 219, 0.52);
  }

  html[data-portrait-scheme="celestial"]
    .portrait-line-nav__underline {
    background: linear-gradient(90deg, transparent, #efc962 28% 72%, transparent);
    filter: drop-shadow(0 0 4px rgba(91, 207, 232, 0.64));
  }

  html[data-portrait-scheme="celestial"]
    :is(
      .identity-gateway-portal,
      .first-visit-portal,
      .temporary-service-portal,
      .heart-service-portal,
      .lifetime-service-portal,
      .more-exclusive-services,
      .more-services-editor
    ) {
    background:
      radial-gradient(circle at 12% 18%, rgba(40, 127, 157, 0.2), transparent 32%),
      radial-gradient(circle at 82% 78%, rgba(176, 120, 31, 0.18), transparent 35%),
      #030b17 !important;
  }

  html[data-portrait-scheme="celestial"]
    :is(
      .identity-gateway-portal__panel,
      .first-visit-portal__access-shell,
      .first-visit-portal__arrival-card,
      .first-visit-portal__composer-writing,
      .temporary-service-portal__stage,
      .heart-service-portal__stage,
      .lifetime-service-portal__stage,
      .more-exclusive-services__directory-shell,
      .more-service-detail__panel,
      .section-five-dream-kingdom__node-info,
      .wisdom-private-feature-page,
      .heart-scroll-panel__frame,
      .lifetime-service-workspace__frame,
      .temporary-service-workspace__frame
    ) {
    border-radius: 24px !important;
  }

  html[data-portrait-scheme="celestial"]
    :is(
      .section-five-dream-kingdom__node-shortcut-item,
      .more-exclusive-services__node-selector-trigger,
      .more-exclusive-services__node-keys button,
      .identity-gateway-portal__service-directory button
    ) {
    border: 1px solid rgba(226, 182, 76, 0.56) !important;
    border-radius: 50% 50% 18px 18px !important;
    background:
      radial-gradient(circle at 50% 20%, rgba(112, 218, 239, 0.3), transparent 45%),
      linear-gradient(180deg, rgba(12, 43, 66, 0.95), rgba(4, 17, 32, 0.98)) !important;
    box-shadow:
      inset 0 0 18px rgba(63, 167, 191, 0.16),
      0 0 13px rgba(56, 165, 194, 0.16) !important;
    color: #d9edf2 !important;
  }

  html[data-portrait-scheme="celestial"]
    :is(
      .section-five-dream-kingdom__node-shortcut-item.is-active,
      .more-exclusive-services__node-keys button.is-active,
      .identity-gateway-portal__service-directory button.is-active
    ) {
    border-color: #f1cc6e !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(255, 226, 132, 0.34), transparent 43%),
      linear-gradient(180deg, rgba(22, 66, 88, 0.98), rgba(5, 22, 38, 0.98)) !important;
    box-shadow:
      inset 0 0 22px rgba(80, 194, 218, 0.2),
      0 0 16px rgba(239, 197, 92, 0.4) !important;
    color: #fff0b7 !important;
  }

  html[data-portrait-scheme="celestial"]
    .section-five-dream-kingdom__celestial-core {
    filter:
      hue-rotate(14deg)
      saturate(1.14)
      drop-shadow(0 0 16px rgba(77, 199, 222, 0.62));
  }

  html[data-portrait-scheme="celestial"]
    :is(.login-card-slot, .identity-gateway-portal__card) {
    filter:
      saturate(0.86)
      drop-shadow(0 18px 22px rgba(0, 0, 0, 0.58))
      drop-shadow(0 0 14px rgba(74, 183, 206, 0.24));
  }

  html[data-portrait-scheme="celestial"]
    :is(
      .identity-gateway-portal__heading,
      .identity-gateway-portal__summary,
      .identity-gateway-portal__status,
      .more-exclusive-services__directory-heading,
      .more-service-detail__eyebrow,
      .section-five-dream-kingdom__node-info
    ) {
    color: #d9edf2 !important;
  }

  html[data-portrait-scheme="celestial"]
    :is(input, textarea, select) {
    border-color: rgba(220, 177, 72, 0.46) !important;
  }

  /* Every deep page keeps its existing handler and content tree. These
     explicit high-level surfaces make the selected visual language continue
     through animation choices, wisdom pages, cards, service rooms and the
     management workspace instead of stopping at the six home screens. */
  html[data-portrait-scheme="heritage"]
    :is(
      .entry-service-guide__panel,
      .cognition-cinema-final-dialog,
      .cognition-cinema-playback,
      .wisdom-teacher-notice__panel,
      .section-five-soul-veil__frame,
      .section-five-palace__copy,
      .section-five-dream-kingdom__node-info-panel,
      .login-composition__footer-notice,
      .first-visit-portal__access-panel,
      .first-visit-portal__intention-card,
      .temporary-service-panel__frame,
      .temporary-service-agreement,
      .temporary-service-addition,
      .temporary-service-renewal,
      .temporary-service-projects,
      .heart-service-setting-panel,
      .heart-service-setting-form,
      .lifetime-chat-panel,
      .lifetime-message-panel,
      .more-services-editor__tab-shell
    ) {
    border-color: rgba(44, 124, 112, 0.42) !important;
    border-radius: 20px 6px 20px 6px !important;
    background-color: rgba(253, 251, 239, 0.96) !important;
    box-shadow:
      inset 0 0 0 1px rgba(203, 156, 67, 0.26),
      0 12px 28px rgba(32, 88, 78, 0.12) !important;
  }

  html[data-portrait-scheme="heritage"]
    :is(
      .entry-service-guide__primary,
      .entry-service-guide__secondary,
      .cognition-cinema-choice-actions button,
      .wisdom-teacher-notice__confirm,
      .section-five-soul-veil__enter,
      .section-five-soul-veil__home,
      .section-five-dream-kingdom__browse-switch,
      .section-five-palace__primary-entry,
      .section-five-palace__more-entry,
      .identity-gateway-portal__primary,
      .identity-gateway-portal__secondary,
      .first-visit-portal__arrival-submit,
      .first-visit-portal__composer-submit,
      .temporary-service-portal__fan-action,
      .heart-service-portal__action
    ) {
    border: 1px solid rgba(172, 120, 32, 0.62) !important;
    border-radius: 16px 4px 16px 4px !important;
    background: linear-gradient(135deg, #fff9df, #dceee4) !important;
    box-shadow:
      inset 3px 0 0 rgba(39, 120, 108, 0.58),
      0 6px 15px rgba(41, 92, 83, 0.14) !important;
    color: #174f4a !important;
  }

  html[data-portrait-scheme="heritage"]
    :is(
      .wisdom-route-gem,
      .section-five-dream-kingdom__browse-relic,
      .section-five-dream-kingdom__timegate,
      .lifetime-service-portal__wheel
    ) {
    filter:
      saturate(0.9)
      hue-rotate(-8deg)
      drop-shadow(0 0 15px rgba(47, 139, 125, 0.3));
  }

  html[data-portrait-scheme="heritage"]
    .more-services-editor
    :is(
      [class$="-manager"],
      [class$="-panel"],
      [class$="-directory"],
      [class$="-list"]
    ) {
    border-color: rgba(47, 124, 111, 0.34) !important;
  }

  html[data-portrait-scheme="celestial"]
    :is(
      .entry-service-guide__panel,
      .cognition-cinema-final-dialog,
      .cognition-cinema-playback,
      .wisdom-teacher-notice__panel,
      .section-five-soul-veil__frame,
      .section-five-palace__copy,
      .section-five-dream-kingdom__node-info-panel,
      .login-composition__footer-notice,
      .first-visit-portal__access-panel,
      .first-visit-portal__intention-card,
      .temporary-service-panel__frame,
      .temporary-service-agreement,
      .temporary-service-addition,
      .temporary-service-renewal,
      .temporary-service-projects,
      .heart-service-setting-panel,
      .heart-service-setting-form,
      .lifetime-chat-panel,
      .lifetime-message-panel,
      .more-services-editor__tab-shell
    ) {
    border-color: rgba(225, 182, 78, 0.48) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 50% 0, rgba(46, 138, 167, 0.2), transparent 42%),
      linear-gradient(180deg, rgba(12, 36, 57, 0.97), rgba(3, 15, 29, 0.98)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(92, 192, 214, 0.13),
      0 16px 36px rgba(0, 0, 0, 0.45),
      0 0 18px rgba(67, 171, 197, 0.12) !important;
  }

  html[data-portrait-scheme="celestial"]
    :is(
      .entry-service-guide__panel,
      .cognition-cinema-final-dialog,
      .cognition-cinema-playback,
      .wisdom-teacher-notice__panel,
      .section-five-soul-veil__frame,
      .section-five-palace__copy,
      .section-five-dream-kingdom__node-info-panel,
      .login-composition__footer-notice,
      .temporary-service-panel__frame,
      .temporary-service-agreement,
      .temporary-service-addition,
      .temporary-service-renewal,
      .temporary-service-projects,
      .heart-service-setting-panel,
      .heart-service-setting-form,
      .lifetime-chat-panel,
      .lifetime-message-panel
    ) {
    color: #dceff3 !important;
  }

  html[data-portrait-scheme="celestial"]
    :is(
      .entry-service-guide__primary,
      .entry-service-guide__secondary,
      .cognition-cinema-choice-actions button,
      .wisdom-teacher-notice__confirm,
      .section-five-soul-veil__enter,
      .section-five-soul-veil__home,
      .section-five-dream-kingdom__browse-switch,
      .section-five-palace__primary-entry,
      .section-five-palace__more-entry,
      .identity-gateway-portal__primary,
      .identity-gateway-portal__secondary,
      .first-visit-portal__arrival-submit,
      .first-visit-portal__composer-submit,
      .temporary-service-portal__fan-action,
      .heart-service-portal__action
    ) {
    border: 1px solid rgba(232, 193, 95, 0.68) !important;
    border-radius: 999px !important;
    background:
      radial-gradient(circle at 50% 15%, rgba(93, 202, 225, 0.25), transparent 45%),
      linear-gradient(180deg, #123b57, #061a31) !important;
    box-shadow:
      inset 0 0 14px rgba(83, 192, 215, 0.16),
      0 0 14px rgba(227, 183, 75, 0.22) !important;
    color: #fff0ba !important;
  }

  html[data-portrait-scheme="celestial"]
    :is(
      .wisdom-route-gem,
      .section-five-dream-kingdom__browse-relic,
      .section-five-dream-kingdom__timegate,
      .lifetime-service-portal__wheel
    ) {
    filter:
      hue-rotate(18deg)
      saturate(1.2)
      brightness(0.94)
      drop-shadow(0 0 18px rgba(69, 188, 216, 0.62));
  }

  html[data-portrait-scheme="celestial"]
    .more-services-editor
    :is(
      [class$="-manager"],
      [class$="-panel"],
      [class$="-directory"],
      [class$="-list"]
    ) {
    border-color: rgba(220, 177, 72, 0.38) !important;
    background-color: rgba(8, 28, 45, 0.78) !important;
  }
}

@media (orientation: portrait) and (max-width: 380px) {
  html[data-portrait-scheme] {
    --portrait-page-inline: 5px;
  }

  html[data-portrait-scheme] .portrait-line-nav__item {
    min-height: 40px;
    padding-inline: 2px;
    font-size: 12px;
  }
}

@media not all and (orientation: portrait), (min-width: 821px) {
  html[data-portrait-scheme] {
    --portrait-canvas: initial;
  }
}