@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

      :root {
        --intro-pad: clamp(18px, 3vh, 36px);
        --bg: #164575;
        --bg-2: #1d5687;
        --ink: #ffffff;
        --muted: rgba(255, 255, 255, 0.9);
        --line: rgba(255, 255, 255, 0.16);
        --accent: #d9b96c;
        --accent-strong: #f0d58b;
        --blue: #145d9f;
        --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
      }

      * {
        box-sizing: border-box;
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      html,
      body {
        width: 100%;
        min-height: 100%;
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
      }

      body {
        overflow: hidden;
      }

      .intro {
        position: relative;
        height: 100dvh;
        min-height: 0;
        display: grid;
        place-items: center;
        isolation: isolate;
        overflow: hidden;
        padding: var(--intro-pad);
        background:
          linear-gradient(rgba(16, 75, 132, 0.5), rgba(8, 42, 78, 0.66)),
          url('../media/topics/chu-de-1/assets/images/window/6.jpg') center / cover no-repeat;
        transition:
          opacity 0.65s var(--ease),
          filter 0.65s var(--ease);
      }

      .intro::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -2;
        background: radial-gradient(circle at 50% 45%, transparent 20%, rgba(11, 55, 99, 0.16) 100%);
        mask-image: radial-gradient(circle at 50% 48%, white 0 45%, transparent 78%);
      }

      .intro::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(13, 65, 113, 0.08), rgba(11, 55, 99, 0.25)), radial-gradient(circle at 50% 102%, rgba(217, 185, 108, 0.07), transparent 34%);
        box-shadow: inset 0 0 120px rgba(11, 55, 99, 0.3);
      }

      .intro.is-leaving {
        opacity: 0;
        filter: blur(10px);
      }

      .intro-shell {
        width: min(1040px, 100%);
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: clamp(14px, 3vh, 28px);
      }

      .brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        opacity: 0;
        transform: translateY(10px);
        animation: riseIn 0.9s var(--ease) 0.1s forwards;
      }

      .brand__logos {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .brand__logo {
        width: clamp(42px, 6vw, 58px);
        height: clamp(42px, 6vw, 58px);
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
      }

      .brand__logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .brand__logo.brand__logo--union {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .brand__logo--union img {
        filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.38));
      }

      .brand__text {
        display: grid;
        gap: 4px;
        flex: 1;
      }

      .brand__text strong {
        color: #ffffff;
        font-size: clamp(13px, 1.6vw, 16px);
        font-weight: 800;
        letter-spacing: 0.04em;
      }

      .brand__text span {
        color: rgba(255, 255, 255, 0.88);
        font-size: 12px;
        font-weight: 600;
      }

      .language-switch {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
      }

      .language-switch button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 54px;
        min-height: 44px;
        padding: 6px;
        border: 1px solid rgba(255, 255, 255, 0.32);
        border-radius: 9px;
        background: rgba(15, 14, 12, 0.68);
        color: #ffffff;
        cursor: pointer;
        font:
          700 11px 'Be Vietnam Pro',
          'Segoe UI',
          Arial,
          sans-serif;
        transition:
          border-color 0.2s var(--ease),
          background 0.2s var(--ease);
      }

      .language-switch button:hover,
      .language-switch button[aria-pressed='true'] {
        border-color: var(--accent-strong);
        background: rgba(240, 213, 139, 0.18);
      }

      .language-switch button:focus-visible {
        outline: 3px solid var(--accent-strong);
        outline-offset: 3px;
      }

      .language-switch svg {
        width: 24px;
        height: 16px;
        flex-shrink: 0;
        border-radius: 2px;
      }

      .narrative {
        min-height: 0;
        align-self: center;
        display: grid;
        gap: clamp(10px, 2vh, 20px);
        padding-left: clamp(0px, 4vw, 82px);
      }

      .intro-kicker {
        width: max-content;
        max-width: 100%;
        color: rgba(240, 213, 139, 0.9);
        font-size: clamp(12px, 1.5vw, 14px);
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        opacity: 0;
        transform: translateY(8px);
        animation: riseIn 0.8s var(--ease) 0.5s forwards;
      }

      .typewriter {
        min-height: 0;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(5px, 1.05vh, 10px);
        max-width: 870px;
        overflow: hidden;
      }

      .type-line {
        min-height: 0;
        color: var(--ink);
        font-size: clamp(18px, 3.1vmin, 30px);
        font-weight: 700;
        line-height: 1.28;
        text-wrap: balance;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
        opacity: 0;
        transform: translateY(12px);
        transition:
          opacity 0.55s var(--ease),
          transform 0.55s var(--ease);
      }

      .type-line.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      .type-line.is-soft {
        color: rgba(255, 255, 255, 0.94);
        font-size: clamp(13px, 2.1vmin, 20px);
        font-weight: 500;
        line-height: 1.42;
      }

      .type-line.is-title {
        color: #ffffff;
        font-size: clamp(24px, 4.45vmin, 44px);
        font-weight: 800;
        line-height: 1.14;
      }

      .type-cursor {
        display: inline-block;
        width: 0.55ch;
        margin-left: 0.08ch;
        color: var(--accent-strong);
        animation: cursorPulse 0.82s steps(1) infinite;
      }

      .actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        min-height: clamp(46px, 7vh, 58px);
      }

      .actions-label {
        color: var(--muted);
        font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
        font-size: clamp(11px, 1.3vw, 13px);
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity 0.5s var(--ease);
      }

      .actions-label.is-visible {
        opacity: 1;
      }

      .topic-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
        width: 100%;
      }

      .enter-button {
        position: relative;
        min-height: clamp(44px, 6vh, 54px);
        padding: 0 clamp(18px, 3vw, 26px);
        border: 1px solid rgba(240, 213, 139, 0.48);
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(240, 213, 139, 0.2), rgba(240, 213, 139, 0.07)), rgba(255, 255, 255, 0.055);
        color: #ffffff;
        cursor: pointer;
        font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
        font-size: clamp(13px, 1.6vw, 15px);
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0;
        transform: translateY(12px);
        pointer-events: none;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.16),
          0 0 0 rgba(240, 213, 139, 0);
        transition:
          opacity 0.7s var(--ease),
          transform 0.22s var(--ease),
          border-color 0.22s var(--ease),
          background 0.22s var(--ease),
          box-shadow 0.22s var(--ease);
      }

      .enter-button.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

      .enter-button:hover {
        border-color: rgba(240, 213, 139, 0.9);
        background: linear-gradient(135deg, rgba(240, 213, 139, 0.28), rgba(240, 213, 139, 0.1)), rgba(255, 255, 255, 0.08);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.2),
          0 0 34px rgba(240, 213, 139, 0.22);
        transform: translateY(-1px);
      }

      .enter-button:active {
        transform: translateY(1px) scale(0.99);
      }

      .enter-button:focus-visible {
        outline: 3px solid rgba(240, 213, 139, 0.72);
        outline-offset: 4px;
      }

      .ambient-orbit {
        position: absolute;
        right: clamp(22px, 8vw, 120px);
        bottom: clamp(62px, 12vw, 150px);
        z-index: -1;
        width: clamp(170px, 30vw, 420px);
        aspect-ratio: 1;
        border: 1px solid rgba(240, 213, 139, 0.18);
        border-radius: 50%;
        opacity: 0.42;
        transform: rotate(-16deg);
      }

      .ambient-orbit::before,
      .ambient-orbit::after {
        content: '';
        position: absolute;
        inset: 14%;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: inherit;
      }

      .ambient-orbit::after {
        inset: 30%;
        border-color: rgba(217, 185, 108, 0.3);
      }

      @keyframes riseIn {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes cursorPulse {
        0%,
        48% {
          opacity: 1;
        }
        49%,
        100% {
          opacity: 0;
        }
      }

      @media (max-width: 760px) {
        body {
          overflow: hidden;
        }

        .intro {
          align-items: stretch;
        }

        .intro-shell {
          gap: clamp(10px, 2.5vh, 20px);
        }

        .brand {
          display: grid;
          grid-template-columns: auto 1fr;
          align-items: center;
          gap: 8px 12px;
        }

        .brand__logos {
          grid-column: 1;
          grid-row: 1;
        }

        .brand__text {
          grid-column: 1 / -1;
          grid-row: 2;
        }

        .language-switch {
          grid-column: 2;
          grid-row: 1;
          justify-self: end;
        }

        .narrative {
          padding-left: 0;
        }

        .typewriter {
          justify-content: center;
          gap: clamp(4px, 0.8vh, 8px);
        }

        .type-line,
        .type-line.is-soft,
        .type-line.is-title {
          text-wrap: pretty;
        }

        .actions {
          align-items: stretch;
        }

        .topic-grid {
          flex-direction: column;
        }

        .enter-button {
          width: 100%;
          padding: 0 18px;
          letter-spacing: 0.04em;
        }
      }

      @media (max-height: 680px) {
        :root {
          --intro-pad: 14px;
        }

        .brand__logo {
          width: 40px;
          height: 40px;
        }

        .brand__text strong {
          font-size: 12px;
        }

        .brand__text span,
        .intro-kicker {
          font-size: 11px;
        }

        .type-line {
          font-size: clamp(16px, 3vmin, 24px);
          line-height: 1.22;
        }

        .type-line.is-soft {
          font-size: clamp(12px, 1.9vmin, 16px);
          line-height: 1.32;
        }

        .type-line.is-title {
          font-size: clamp(21px, 4vmin, 34px);
          line-height: 1.1;
        }

        .enter-button {
          min-height: 42px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
          transition-duration: 0.001ms !important;
        }
      }

/* Entrance navigation keeps the existing blue and gold identity. */
.intro { padding-top: 84px; padding-bottom: 88px; }
.actions { align-items: center; }
.topic-grid { justify-content: center; }
.menu-toggle { position: fixed; top: max(18px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left)); z-index: 45; width: 46px; height: 46px; border: 1px solid #ffffff55; border-radius: 12px; color: white; background: #082b4d99; backdrop-filter: blur(12px); font-size: 23px; cursor: pointer; }
.menu-toggle:hover, .menu-toggle[aria-expanded="true"] { background: #082b4de6; }
.home-menu { position: fixed; top: 78px; left: 18px; z-index: 45; width: min(270px, calc(100vw - 36px)); padding: 20px; border: 1px solid #ffffff40; border-radius: 14px; background: #082b4de8; backdrop-filter: blur(18px); box-shadow: 0 16px 40px #001c3340; }
.home-menu p { margin: 0 0 14px; color: #f0d58b; font-size: 11px; letter-spacing: .16em; }
.home-menu button { display: block; width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: white; font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.home-menu button:hover { background: #ffffff18; }
.home-dialog { --museum-font: 'Be Vietnam Pro', 'Segoe UI', sans-serif; --museum-radius: 12px; width: min(1000px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: clamp(20px, 4vw, 38px); border: 1px solid #c8dde5; border-radius: 16px; background: #f7fbfd; color: #063a59; line-height: 1.8; }
.home-dialog::backdrop { background: #001c33b8; backdrop-filter: blur(8px); }
.home-dialog__header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.home-dialog__header h2 { margin: 0; font-size: clamp(22px, 4vw, 30px); }
.home-dialog__header button { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid #b9d4df; border-radius: 50%; background: white; color: #063a59; font-size: 28px; cursor: pointer; }
.home-dialog section[hidden], .home-menu[hidden], video[hidden] { display: none; }
#info-content { max-width: 70ch; }
#library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 26px 18px; }
.library-book { padding: 0; border: 0; background: transparent; color: #063a59; text-align: left; cursor: pointer; font: inherit; }
.library-book img { display: block; width: 100%; height: 210px; object-fit: contain; object-position: bottom; background: #e6f0f5; margin-bottom: 12px; transition: transform .2s; }
.library-book:hover img { transform: translateY(-4px); }
.library-book span { display: block; font-size: 13px; line-height: 1.6; }
#intro-video { width: 100%; max-height: 65dvh; background: #001c33; }
.menu-toggle:focus-visible, .home-menu button:focus-visible, .home-dialog button:focus-visible { outline: 3px solid #c39332; outline-offset: 3px; }
@media (max-width: 480px) { #library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .library-book img { height: 170px; } }
@media (max-height: 520px) { body { overflow: auto; } .intro { height: auto; min-height: 100dvh; } .intro-shell { gap: 24px; } }