/* ============================================================
   v6-experience.css — 발왕산의 사계 : 매거진 고도화
   ------------------------------------------------------------
   원본 문제
     ① 배경이 통짜 #1a1a1d 라 다른 섹션에 비해 밋밋하다.
        "잡지를 펼쳐 보는 자리" 라는 무대감이 전혀 없다.
     ② 펼쳐보라는 신호가 회색 글씨 한 줄(← 발왕산의 이야기를 펼쳐보세요)
        + translateX 8px 흔들림. 잡지 톤과 맞지 않는다.
     ③ 펼친 뒤에도 "책" 이라는 느낌이 약하다 —
        접힘(gutter) 그림자·러닝헤드·folio·계절 탭이 없다.

   v6 해법
     ① 무대 : 현재 계절 사진을 크게 흐려 깐 배경 + 계절색 기류 +
              거대 워터마크 타이포 + 바닥 반사. 페이지를 넘기면 배경이 바뀐다.
     ② 신호 : 표지 우하단 "페이지 컬(page curl)" + 금빛 힌트 pill.
     ③ 지물 : 종이 톤 · 접힘 그림자 · 러닝헤드 · folio · 계절 탭 ·
              하단 목차 스트립(현재 스프레드 표시 + 이동).

   ⚠ 원본 experience.css / experience.js 는 건드리지 않는다. 전부 덧입힘.
============================================================ */

/* ============================================================
   1) 무대 — 배경
============================================================ */
#experience {
    background: #090E16 !important;
    isolation: isolate;
}

/* ⚠ `#experience > *` 로 한꺼번에 position:relative 를 주면 안 된다.
   id 특이도가 높아 .xp-contents 의 position:absolute 를 덮어쓰고,
   목차 스트립이 flex 항목이 되어 책을 왼쪽으로 밀어낸다.
   → 올려야 할 것만 콕 집는다. (.xp-bg 가 z-index 0 이라 이것으로 충분) */
#experience-book-wrapper {
    z-index: 3;
}

.xp-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* 현재 계절 사진 — 두 장을 번갈아 크로스페이드한다 */
.xp-photo {
    position: absolute;
    inset: -8%;
    background-size: cover;
    background-position: center;
    filter: blur(34px) saturate(1.15) brightness(.44);
    transform: scale(1.08);
    opacity: 0;
    transition: opacity 1.4s ease;
}

.xp-photo.is-on {
    opacity: 1;
}

/* 계절 기류 — data-season 에 따라 색이 바뀐다 */
.xp-tone {
    position: absolute;
    inset: 0;
    transition: background 1.4s ease;
    background:
        radial-gradient(60% 55% at 18% 22%, color-mix(in srgb, var(--xp-a, #4A7BD1) 55%, transparent), transparent 70%),
        radial-gradient(55% 50% at 84% 78%, color-mix(in srgb, var(--xp-b, #1A60C9) 40%, transparent), transparent 70%);
    opacity: .5;
}

#experience[data-season="cover"] {
    --xp-a: #4A7BD1;
    --xp-b: #1A60C9;
}

#experience[data-season="spring"] {
    --xp-a: #86C46B;
    --xp-b: #E8A0BF;
}

#experience[data-season="summer"] {
    --xp-a: #2FBF9B;
    --xp-b: #1E7FB8;
}

#experience[data-season="autumn"] {
    --xp-a: #E08A2E;
    --xp-b: #C2452D;
}

#experience[data-season="winter"] {
    --xp-a: #9EC9E8;
    --xp-b: #4A6FA5;
}

#experience[data-season="sunrise"] {
    --xp-a: #F09030;
    --xp-b: #D33B3B;
}

#experience[data-season="clouds"] {
    --xp-a: #8FA6BF;
    --xp-b: #3F5A78;
}

#experience[data-season="galaxy"] {
    --xp-a: #7B6BD1;
    --xp-b: #2A2F6B;
}

/* 위아래 비네트 — 이음매와 자연스럽게 만난다 */
.xp-vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(9, 14, 22, .96) 0%, rgba(9, 14, 22, .35) 22%, transparent 45%),
        linear-gradient(0deg, rgba(9, 14, 22, .96) 0%, rgba(9, 14, 22, .35) 22%, transparent 45%),
        radial-gradient(120% 95% at 50% 50%, transparent 38%, rgba(4, 7, 14, .72) 100%);
}

/* 거대 워터마크 타이포 — 잡지 표제 */
.xp-word {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 800;
    font-size: clamp(4rem, 13vw, 13rem);
    line-height: .92;
    letter-spacing: .02em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .07);
    opacity: .9;
    user-select: none;
}

.xp-word small {
    display: block;
    margin-top: .35em;
    font-family: 'Montserrat', sans-serif;
    font-size: .11em;
    font-weight: 700;
    letter-spacing: .7em;
    -webkit-text-stroke: 0;
    color: rgba(255, 255, 255, .08);
}

/* 미세 그레인 — 인쇄물 질감 */
.xp-grain {
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px);
}

/* 책이 놓인 바닥 반사 */
.xp-floor {
    position: absolute;
    left: 50%;
    bottom: 8vh;
    transform: translateX(-50%);
    width: min(1180px, 84vw);
    height: 120px;
    background: radial-gradient(50% 100% at 50% 0%, rgba(0, 0, 0, .55), transparent 70%);
    filter: blur(14px);
}

/* ============================================================
   2) 책 — 종이 · 접힘 · 지물
============================================================ */

/* 펼침 확대는 조금 줄이고 살짝 들어올린다 */
#experience-book-wrapper.scaled-up {
    transform: scale(1.06) translateY(-1.2%);
}

#experience-book {
    filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .6));
}

/* 종이 톤 — 순백(#fdfdfd) 보다 살짝 따뜻하게 */
#experience-book .page {
    background-color: #FBF8F2;
}

/* ---------- 지면의 굴곡 ----------
   실제로 펼친 책은 제본 쪽으로 갈수록 종이가 말려 들어간다.
   바깥에서 안쪽으로 : 평평 → 살짝 솟은 능선(하이라이트) → 급격히 어두워짐.
   방향은 StPageFlip 이 붙이는 `--left` / `--right` 클래스가 정해준다. */
.xp-curve {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s var(--ease);
}

#experience.book-is-open:not(.is-single) .page.--left .xp-curve {
    opacity: 1;
    background:
        linear-gradient(90deg,
            rgba(60, 44, 20, 0) 50%,
            rgba(255, 253, 246, .07) 68%,
            rgba(255, 253, 246, .13) 77%,
            rgba(52, 38, 16, .05) 86%,
            rgba(52, 38, 16, .22) 94%,
            rgba(34, 24, 9, .5) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .06), transparent 16%, transparent 84%, rgba(0, 0, 0, .06));
}

#experience.book-is-open:not(.is-single) .page.--right .xp-curve {
    opacity: 1;
    background:
        linear-gradient(270deg,
            rgba(60, 44, 20, 0) 50%,
            rgba(255, 253, 246, .07) 68%,
            rgba(255, 253, 246, .13) 77%,
            rgba(52, 38, 16, .05) 86%,
            rgba(52, 38, 16, .22) 94%,
            rgba(34, 24, 9, .5) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .06), transparent 16%, transparent 84%, rgba(0, 0, 0, .06));
}

/* 러닝헤드 — 잡지 판형의 기본 지물 */
.xp-runhead {
    position: absolute;
    top: 1.15rem;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8em;
    font-family: 'Montserrat', sans-serif;
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .34em;
    color: rgba(120, 110, 95, .8);
    pointer-events: none;
}

.xp-runhead::before,
.xp-runhead::after {
    content: '';
    width: 34px;
    height: 1px;
    background: rgba(120, 110, 95, .35);
}

/* 영상 페이지 위에서는 밝게 */
.has-video .xp-runhead {
    color: rgba(255, 255, 255, .78);
    mix-blend-mode: normal;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.has-video .xp-runhead::before,
.has-video .xp-runhead::after {
    background: rgba(255, 255, 255, .38);
}

/* folio 라인 — 하단 바깥 모서리. 영문 계절명 + 헤어라인 + 쪽번호.
   (원래 바깥 가장자리 세로 탭이었는데 너무 크고, 왼쪽 페이지에서 글자가 뒤집혔다) */
.xp-folio-line {
    position: absolute;
    bottom: 1.1rem;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    font-family: 'Montserrat', sans-serif;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .3em;
    color: rgba(96, 88, 76, .95);
}

.xp-folio-line.is-left {
    left: 1.6rem;
}

.xp-folio-line.is-right {
    right: 1.6rem;
    flex-direction: row-reverse;
}

.xp-folio-line em {
    font-style: normal;
    color: var(--xp-mark, #8A7F6C);
}

.xp-rule {
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: .45;
}

/* 원본 쪽번호를 folio 라인 안으로 옮겼으므로 절대배치를 푼다 */
#experience-book .page .xp-folio-line .page-number {
    position: static;
    transform: none;
    bottom: auto;
    left: auto;
    font-family: 'Nanum Myeongjo', serif;
    font-size: .68rem;
    letter-spacing: .18em;
    color: inherit;
    opacity: .85;
}

/* 계절별 강조색 */
#experience[data-season="spring"] {
    --xp-mark: #4E8C3A;
}

#experience[data-season="summer"] {
    --xp-mark: #14806B;
}

#experience[data-season="autumn"] {
    --xp-mark: #B0561B;
}

#experience[data-season="winter"] {
    --xp-mark: #2F6597;
}

#experience[data-season="sunrise"] {
    --xp-mark: #C25417;
}

#experience[data-season="clouds"] {
    --xp-mark: #4B617C;
}

#experience[data-season="galaxy"] {
    --xp-mark: #574BA8;
}

/* 영상·풀블리드 사진 위에서는 밝게 */
.has-video .xp-folio-line,
.layout-image-3 .xp-folio-line,
.layout-image-3 .xp-runhead {
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}

.has-video .xp-folio-line em,
.layout-image-3 .xp-folio-line em {
    color: #fff;
}

.layout-image-3 .xp-runhead::before,
.layout-image-3 .xp-runhead::after {
    background: rgba(255, 255, 255, .4);
}

/* ---------- 제본 : 책등 + 실매기 ---------- */
/* 굴곡(.xp-curve)이 넓은 음영을 맡으므로 책등은 한가운데 접힘만 담당한다 */
.xp-spine {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 24px;
    transform: translateX(-50%);
    z-index: 11;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s var(--ease);
    background: linear-gradient(90deg,
            rgba(38, 28, 12, 0) 0%,
            rgba(38, 28, 12, .22) 38%,
            rgba(24, 17, 6, .5) 48%,
            rgba(255, 250, 240, .2) 50%,
            rgba(24, 17, 6, .5) 52%,
            rgba(38, 28, 12, .22) 62%,
            rgba(38, 28, 12, 0) 100%);
    /* 위아래 모서리에서 자연스럽게 사라지게 — 책배와 같은 이유 */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

/* 실매기(saddle stitch) */
.xp-stitch {
    position: absolute;
    left: 50%;
    top: 12%;
    bottom: 12%;
    width: 2px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(180deg,
            rgba(70, 55, 30, .5) 0 14px,
            transparent 14px 26px);
}

/* 책배(page stack) — 바깥 단면에 보이는 종이 뭉치.
   ------------------------------------------------------------
   ⚠ 두 번 고쳤다.
     ① 위아래 3% 를 띄운 곧은 막대 → 책 모서리와 맞물리는 데가 없어 따로 붙인 띠처럼 보였다.
     ② 타원(ellipse)으로 깎음 → 곡률이 너무 커서 원통처럼 보였다.
   ③ 지금 : 바깥 단면은 **곧게**, 위아래 끝 3.5% 만 짧게 깎아 책 모서리와 만나게 한다.
      책 가장자리에 1px 겹쳐 붙여 틈도 없앤다. */
.xp-stack {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12px;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s var(--ease);
}

.xp-stack.left {
    left: -11px;
    /* 바깥 단면은 곧게, 위아래 끝만 짧게 깎아 책 모서리와 만난다.
       (타원으로 깎았더니 원통처럼 보였다 — 각을 살린다) */
    clip-path: polygon(100% 0%, 0% 3.5%, 0% 96.5%, 100% 100%);
    background:
        repeating-linear-gradient(90deg,
            rgba(142, 130, 108, .22) 0 1px,
            rgba(255, 255, 255, 0) 1px 3px),
        linear-gradient(90deg,
            rgba(120, 108, 88, .8) 0%,
            rgba(212, 203, 184, .95) 30%,
            rgba(226, 218, 201, .96) 62%,
            rgba(196, 186, 166, 1) 100%);
    filter: drop-shadow(-4px 0 8px rgba(0, 0, 0, .34));
}

.xp-stack.right {
    right: -11px;
    clip-path: polygon(0% 0%, 100% 3.5%, 100% 96.5%, 0% 100%);
    background:
        repeating-linear-gradient(90deg,
            rgba(142, 130, 108, .22) 0 1px,
            rgba(255, 255, 255, 0) 1px 3px),
        linear-gradient(270deg,
            rgba(120, 108, 88, .8) 0%,
            rgba(212, 203, 184, .95) 30%,
            rgba(226, 218, 201, .96) 62%,
            rgba(196, 186, 166, 1) 100%);
    filter: drop-shadow(4px 0 8px rgba(0, 0, 0, .34));
}

/* 펼쳤을 때만 보이고, 넘기는 동안에는 숨는다 */
#experience.book-is-open .xp-spine,
#experience.book-is-open .xp-stack {
    opacity: 1;
}

/* 넘기는 동안에는 **책등만** 숨긴다.
   넘어가는 페이지가 한가운데를 지나는데 그 위에 고정된 접힘 선이 남으면
   페이지를 가로지르는 금처럼 보인다.
   책배(.xp-stack)는 페이지 바깥이라 가려질 일이 없으므로 계속 보인다.
   굴곡(.xp-curve)은 페이지 안에 있어 페이지와 함께 움직인다 — 물리적으로 맞다. */
#experience.is-flipping .xp-spine {
    opacity: 0;
    transition: opacity .16s ease;
}

/* 앞표지·뒤표지 — 스프레드가 아니라 한 장만 서 있다.
   그대로 두면 빈 자리에 책등·책배 띠만 떠 있게 된다. */
#experience.is-single .xp-spine,
#experience.is-single .xp-stack,
#experience.is-single .xp-curve {
    opacity: 0 !important;
}

.layout-image-3 .xp-runhead::before,
.layout-image-3 .xp-runhead::after {
    background: rgba(255, 255, 255, .4);
}

/* 이미지 페이지 — 인화지처럼 */
.image-page img {
    box-shadow: 0 10px 30px rgba(20, 14, 4, .22);
}

/* ============================================================
   3) 펼쳐보라는 신호
============================================================ */

/* 원본의 회색 한 줄 프롬프트는 끈다 */
.book-flip-prompt {
    display: none !important;
}

.book-container-with-prompt {
    position: relative;
}

/* ---- 힌트 pill — 표지에서의 유일한 신호. 버튼이라 눌러도 넘어간다. ---- */
.xp-hint {
    position: absolute;
    left: 50%;
    bottom: -3.4rem;
    transform: translateX(-50%);
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px 11px 16px;
    border-radius: 999px;
    border: 1px solid rgba(245, 237, 0, .34);
    background: rgba(9, 14, 22, .62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .45);
    white-space: nowrap;
    animation: xpFloat 3.6s ease-in-out infinite;
    transition: opacity .4s var(--ease), border-color .25s, background .25s;
    cursor: pointer;
    font: inherit;
}

.xp-hint:hover {
    border-color: var(--gold);
    background: rgba(9, 14, 22, .82);
}

.xp-hint svg {
    width: 17px;
    height: 17px;
    flex: none;
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xp-hint b {
    font-size: .86rem;
    font-weight: 700;
    color: #fff;
}

.xp-hint em {
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .24em;
    color: var(--gold);
}

@keyframes xpFloat {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-6px);
    }
}

/* 책이 펼쳐지면 신호는 사라진다 */
#experience.book-is-open .xp-hint {
    opacity: 0;
    animation: none;
    pointer-events: none;
}

/* ============================================================
   4) 하단 목차 스트립 (넘김 화살표 포함)
   ------------------------------------------------------------
   화살표를 책 위에 띄우면 계절 탭과 겹치고 지면을 가린다.
   내비게이션을 한 덩어리로 모은다.
============================================================ */
.xp-nav {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .05);
    color: var(--tx-2);
    cursor: pointer;
    transition: background .25s, color .25s, opacity .25s;
}

.xp-nav svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xp-nav:hover {
    background: rgba(255, 255, 255, .13);
    color: #fff;
    transform: none !important;
}

.xp-nav[disabled] {
    opacity: .28;
    pointer-events: none;
}

/* ---- 목차 스트립 ---- */
.xp-contents {
    position: absolute;
    left: 50%;
    bottom: clamp(16px, 4vh, 34px);
    transform: translateX(-50%);
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(9, 14, 22, .58);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    max-width: 94vw;
    transition: opacity .45s var(--ease), transform .45s var(--ease);
}

/* 표지 상태에서는 힌트 pill 이 그 자리를 쓴다.
   목차는 책을 펼친 뒤에 나타난다 — 둘이 겹치지 않는다. */
#experience:not(.book-is-open) .xp-contents {
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
    pointer-events: none;
}

.xp-folio {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding-right: 14px;
    border-right: 1px solid var(--line);
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: .06em;
    color: var(--tx-3);
    flex: none;
}

.xp-folio b {
    font-size: 1.15rem;
    color: var(--gold);
}

.xp-contents ul {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.xp-contents ul::-webkit-scrollbar {
    display: none;
}

.xp-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 0;
    background: none;
    color: var(--tx-3);
    font: inherit;
    font-size: .78rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background .25s, color .25s;
}

.xp-chip i {
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .16em;
    opacity: .6;
}

.xp-chip:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
    transform: none !important;
}

.xp-chip.is-current {
    color: #10140A;
    background: var(--gold);
    font-weight: 700;
}

.xp-chip.is-current i {
    opacity: .75;
}

.xp-contents.is-busy .xp-chip {
    pointer-events: none;
    opacity: .55;
}

/* ============================================================
   5) 반응형
============================================================ */
@media (max-width: 900px) {
    .xp-word {
        font-size: clamp(3rem, 18vw, 7rem);
    }

    .xp-nav {
        width: 28px;
        height: 28px;
    }

    .xp-runhead {
        top: .7rem;
        font-size: .46rem;
        letter-spacing: .26em;
    }

    .xp-runhead::before,
    .xp-runhead::after {
        width: 18px;
    }

    /* folio 는 가운데 아래로 */
    .xp-folio-line {
        bottom: .7rem;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        flex-direction: row !important;
        font-size: .48rem;
        gap: 8px;
    }

    .xp-rule {
        width: 16px;
    }

    .xp-hint {
        bottom: -2.8rem;
        padding: 9px 15px;
        gap: 9px;
    }

    .xp-hint b {
        font-size: .78rem;
    }

    .xp-hint em {
        display: none;
    }

    .xp-contents {
        gap: 12px;
        padding: 7px 10px;
        bottom: calc(10px + var(--tab-h));
    }

    .xp-chip {
        font-size: .72rem;
        padding: 6px 10px;
    }

    .xp-chip i {
        display: none;
    }

    .xp-floor {
        display: none;
    }
}

/* ---- 모바일(≤768px) : 원본 JS 가 여기서 1장씩 넘기는 portrait 모드로 바뀐다.
   한 장씩 보이므로 "펼친 책" 이 아니라 "엽서" 로 보이게 한다.
   ⚠ 이 브레이크포인트는 experience.js 의 isMobile 판정(768px)과 반드시 같아야 한다.
      900px 로 잡으면 768~900 구간에서 스프레드인데 엽서 테두리가 붙는다. ---- */
@media (max-width: 768px) {

    .xp-spine,
    .xp-stack {
        display: none;
    }

    #experience-book {
        filter: drop-shadow(0 22px 46px rgba(0, 0, 0, .55));
    }

    #experience-book .page {
        border-radius: 14px;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, .92),
            inset 0 0 0 9px #FBF8F2,
            0 18px 44px rgba(0, 0, 0, .5) !important;
    }

    /* 엽서 여백 안쪽으로 내용이 들어오게 */
    #experience-book .page .page-content-wrapper {
        position: absolute;
        inset: 9px;
        width: auto;
        height: auto;
        border-radius: 8px;
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xp-hint {
        animation: none;
    }
}