* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --page-bg: #fbf9f2;
    --page-text: #050505;
    --app-bg: #e8e6df;
    --page-border: #ddd8c9;
    --header-text: #555;
    --header-line: #ece7d8;
    --chord: #b71c1c;
    --button-bg: rgba(255, 255, 255, 0.88);
    --button-text: #333;
    --button-border: rgba(0, 0, 0, 0.12);
    --book-shadow: rgba(60, 50, 30, 0.18);
    --cover-1: #aab69f;
    --cover-2: #97a78c;
    --cover-3: #879979;
    --book-width: 500px;
    --book-height: 650px;
    --page-pad-y: 28px;
    --page-pad-x: 36px;
}

body {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--app-bg);
    perspective: 2000px;
    overflow: hidden;
    touch-action: manipulation;
    transition: background-color 0.35s ease;
}

body.dark-mode {
    --page-bg: #161616;
    --page-text: #ece7de;
    --app-bg: #101010;
    --page-border: #2d2d2d;
    --header-text: #c8bfb7;
    --header-line: #34302c;
    --chord: #ff7a7a;
    --button-bg: rgba(30, 30, 30, 0.9);
    --button-text: #f4eee8;
    --button-border: rgba(255, 255, 255, 0.16);
    --book-shadow: rgba(0, 0, 0, 0.55);
}

.top-controls {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    will-change: transform;
}

.top-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.menu-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--page-text);
    font-family: "Segoe UI Symbol", Arial, sans-serif;
    font-size: 1.45rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    filter: opacity(0.4);
    -webkit-filter: opacity(0.4);
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    transition: filter 0.25s ease, transform 0.2s ease;
}

.menu-btn:hover,
.top-controls.menu-open .menu-btn {
    filter: opacity(0.8);
    -webkit-filter: opacity(0.8);
}

.menu-items {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease;
}

.top-controls.menu-open .menu-items {
    max-height: 280px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.theme-toggle {
    width: 64px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--button-border);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.theme-toggle:hover,
.gesture-toggle:hover {
    transform: translateY(-1px);
}

.gesture-toggle {
    width: 64px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(122, 143, 106, 0.55);
    border-radius: 999px;
    background: rgba(151, 167, 140, 0.28);
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

body.dark-mode .gesture-toggle {
    border-color: rgba(170, 182, 159, 0.45);
    background: rgba(151, 167, 140, 0.22);
}

.theme-toggle-track {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.theme-toggle-thumb {
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease;
}

body.dark-mode .theme-toggle-thumb {
    left: calc(100% - 25px);
}

.theme-emoji {
    position: absolute;
    font-size: 13px;
    line-height: 1;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.theme-emoji.dark {
    opacity: 0;
}

body.dark-mode .theme-emoji.light {
    opacity: 0;
}

body.dark-mode .theme-emoji.dark {
    opacity: 1;
}

#starfield {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
}
.sf-band {
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;   
}
.sf-layer {
    position: absolute;
    left: 0; top: 0;
    width: 1px; height: 1px;
    border-radius: 50%;
    background: transparent;
    will-change: transform;
    animation-name: sfDrift, sfTwinkle;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-direction: normal, alternate;
}
#starfield:not(.sf-run) .sf-layer { animation-play-state: paused; }
/* Samsung/Android: durante el flip el cielo fijo se re-rasterizaba y las estrellas
   se veian "como locas". Se congela el drift mientras se voltea la pagina. */
body.flipping #starfield .sf-layer,
body.flipping #starfield .sf-shoot { animation-play-state: paused !important; }
@keyframes sfDrift { from { transform: translateY(0); } to { transform: translateY(var(--tile)); } }
@keyframes sfTwinkle { 0% { opacity: 0.72; } 100% { opacity: 1; } }
.sf-shoot {
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 1px rgba(255,255,255,0.9);
    opacity: 0;
    pointer-events: none;
}
.sf-shoot::after {
    content: "";
    position: absolute;
    right: 2px; top: 0;
    width: 78px; height: 1.5px;
    background: linear-gradient(270deg, rgba(255,255,255,0.9), rgba(160,190,255,0));
}
@media (prefers-reduced-motion: reduce) {
    .sf-layer { animation: none; }
}

.chord-ix.has-diagram {
    cursor: pointer;
    position: relative;   
}
.chord-ix.has-diagram::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.75em;
    bottom: -0.3em;
}

.chord-pop {
    position: fixed;
    z-index: 500;
    width: 115px;
    max-width: 35vw;
    padding: 4px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
    animation: chordPopIn 0.13s ease-out;
}

.chord-pop[hidden] { display: none; }

.chord-pop img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

@keyframes chordPopIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: none; }
}

.chord-pop svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.dict-name {
    font-family: Georgia, serif;
}
.font-sans {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
.chord-font,
.chord-font text {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.dict-content {
    width: 100%;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dict-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.dict-table thead th {
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--header-text);
    text-align: left;
    padding: 4px 6px 6px;
    border-bottom: 1px solid var(--header-line);
}
.dict-table tbody td {
    padding: 1px 6px;
    border-bottom: 1px solid var(--page-border);
    vertical-align: middle;
}
.dict-name {
    font-size: 0.88rem;
    color: var(--page-text);
    white-space: nowrap;
}
.dict-rep {
    color: var(--chord);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    text-align: center;
}
.dict-table thead th:nth-child(2) {
    text-align: center;
}
.dict-rep .chord-ix.has-diagram {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    display: inline-block;
    padding: 0 5px;
}
.dict-rep .chord-ix.has-diagram:active {
    transform: scale(0.9);
}

.container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    transition: transform 0.7s cubic-bezier(0.2, 0.72, 0.16, 1);
}

.book {
    width: var(--book-width);
    height: var(--book-height);
    flex: 0 0 var(--book-width);
    position: relative;
    transition: transform 0.7s cubic-bezier(0.2, 0.72, 0.16, 1), box-shadow 0.9s ease;
    transform: translateZ(0);
    box-shadow: 0 16px 26px var(--book-shadow);
}


.paper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    transform-origin: left;
    transition: transform 1.8s cubic-bezier(0.15, 0.6, 0.25, 1);
}

.paper.turning {
    will-change: transform;
}

.front,
.back {
    background-color: var(--page-bg);
    background-image:
        radial-gradient(rgba(140,120,80,0.025) 1px, transparent 1px);
    background-size: 14px 14px;
    color: var(--page-text);
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 1px solid var(--page-border);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.02);
    border-radius: 3px 7px 7px 3px;
    padding: var(--page-pad-y) var(--page-pad-x) 52px;
    overflow: hidden;
}

.paper.near > .front,
.paper.near > .back {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.cover-page {
    background-color: var(--cover-2);
    background-image:
        radial-gradient(ellipse at 28% 22%, rgba(255,255,255,0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 80%, rgba(0,0,0,0.08) 0%, transparent 55%),
        linear-gradient(135deg, var(--cover-1) 0%, var(--cover-2) 55%, var(--cover-3) 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 1px solid var(--cover-3);
    border-radius: 3px 11px 11px 3px;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0;
}

.cover-title {
    position: relative;
    z-index: 2;
    margin-top: 20px;
    max-width: 80%;
    max-height: 45%;
    width: auto;
    height: auto;
    display: block;
}

.cover-silhouette {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

.front::before,
.back::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.front::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 38%, rgba(0, 0, 0, 0.1));
}

.back::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), transparent 48%, rgba(0, 0, 0, 0.3));
}

.paper.turning .front::before,
.paper.turning .back::before {
    opacity: 0.42;
}

.paper.turning .front,
.paper.turning .back {
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.22), inset 18px 0 24px rgba(0, 0, 0, 0.05);
}

.image-page {
    padding: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-image {
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    object-fit: cover;
    display: block;
    transform: scale(1.01);
}

.clean-bottom-mark::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 90px;
    height: 46px;
    background: #fff;
    transform: translateX(-50%);
    z-index: 2;
}

.clean-section-mark::after {
    bottom: 0;
    width: 180px;
    height: 86px;
}

.blank-page {
    background-color: var(--page-bg);
}

.section-page {
    align-items: center;
    justify-content: center;
}

.section-title-page {
    color: var(--page-text);
    font-family: Arial, sans-serif;
    font-size: 2.45rem;
    font-weight: 400;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
}

.decor-section-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: var(--page-bg);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.decor-section-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(-4px);
}

.decor-section-title {
    color: #c88778;
    position: relative;
    z-index: 2;
    font-family: "Bahnschrift Light Condensed", "Agency FB", "Arial Narrow", -apple-system-condensed, sans-serif-condensed, "Segoe UI Light", Arial, sans-serif;
    font-size: 4.4rem;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 0.88;
    text-align: center;
    text-transform: uppercase;
    transform: scaleX(0.68) scaleY(1.18);
    transform-origin: center bottom;
    white-space: nowrap;
}

.decor-section-title-long {
    max-width: 390px;
    font-size: 3.2rem;
    line-height: 0.92;
    white-space: normal;
}

.decor-section-leaves {
    width: 345px;
    max-width: 86%;
    height: auto;
    margin-top: -2px;
    display: block;
}

body.dark-mode .decor-section-title {
    color: #d79a8c;
}

/* FIX Samsung/Android (modo oscuro): el titulo de la divisora tiene transform
   (scaleX/scaleY) + z-index = capa GPU propia que en el compositor de Chromium-
   Android ESCAPA a la backface-visibility del padre y al orden de pintado, y
   flota por encima de la pagina de enfrente (se veia "INDICE" sobre la Plumeria
   al retroceder). Damos backface-visibility a las hijas, y como refuerzo la
   divisora que NO esta en escena no pinta su titulo/hojas. */
.decor-section-title,
.decor-section-leaves,
.decor-section-content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.paper:not(.onstage) .decor-section-title,
.paper:not(.onstage) .decor-section-leaves {
    visibility: hidden;
}

.back {
    transform: rotateY(180deg);
}

.flipped {
    transform: rotateY(-180deg);
}

.paper:not(.flipped) > .back,
.paper.flipped > .front {
    pointer-events: none;
}

.paper:not(.onstage),
.paper:not(.onstage) * {
    pointer-events: none;
}

.cover {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.cover h1 {
    font-family: Arial, sans-serif;
    font-size: 2.5rem;
    border: 3px double #000;
    padding: 15px;
}

.header {
    width: 100%;
    margin: 2px auto 16px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--header-line);
    color: var(--header-text);
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    font-size: 0.9rem;
    text-align: center;
}

.song-sheet {
    width: 292px;
    max-width: 100%;
    margin: 0 auto;
    color: var(--page-text);
    font-family: var(--song-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
}

.song-title {
    margin-bottom: 8px;
    font-family: var(--song-font);   
    font-size: calc(0.95rem * var(--font-scale));   
    font-weight: 700;
    text-align: left;
    text-decoration: underline;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.song-title .variant-btn {
    text-transform: none;
    padding: 0 0.2em;   
}

.song-line {
    position: relative;
    min-height: 39px;
    margin-bottom: 1px;
    overflow: hidden;
}

.song-line.compact {
    min-height: 31px;
}

.song-line.no-chord {
    min-height: 22px;
}

.song-line .lyric {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-wrap: anywhere;
}

.song-line .chord {
    position: absolute;
    top: 0;
    color: var(--chord);
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}

.song-space {
    height: 14px;
}

.song-two {
    width: 360px;
    max-width: 100%;
    margin: 0 auto;
    color: var(--page-text);
    font-family: var(--song-font);
    font-size: calc(14px * var(--font-scale));
    font-weight: 400;
    line-height: 1.12;
}

.song-two .song-title {
    margin-bottom: 6px;
    font-family: var(--song-font);
    font-size: calc(0.95rem * var(--font-scale));
    font-weight: 700;
}

.song-two .pair {
    margin-bottom: 4px;
}

.song-two .chord-row,
.song-two .lyric-row {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.song-two .chord-row {
    min-height: 14px;
    color: var(--chord);
    font-family: var(--song-font);
    font-size: calc(13px * var(--font-scale));
    font-weight: 700;
}

.song-two .song-space {
    height: 8px;
}

.song-two .extra-lyrics {
    margin-top: 10px;
    font-family: var(--song-font);
    font-size: calc(12px * var(--font-scale));
    font-weight: 400;
    line-height: 1.16;
}

.song-two .extra-lyrics p {
    margin-bottom: 9px;
}

.lyrics {
    width: 360px;
    max-width: 100%;
    margin: 0 auto;
    color: var(--page-text);
    font-family: var(--song-font);
    font-size: calc(15.5px * var(--font-scale));
    font-weight: 400;
    line-height: 1.25;
}

.lyrics p {
    margin-bottom: 18px;
    overflow-wrap: anywhere;
}

.lyrics .song-title {
    margin-bottom: 22px;
}

:root {
    --font-scale: 1;
    --song-font: "Courier New", Courier, monospace;
    --chord-font: "Roboto Mono", "Courier New", monospace;
}

.song-page {
    width: 368px;
    max-width: 100%;
    margin: 0 auto;
    color: var(--page-text);
    font-family: var(--song-font);
    font-size: calc(14px * var(--font-scale));
    font-weight: 400;
    line-height: 1.05;
}

.cline {
    position: relative;
    white-space: pre-wrap;              
    overflow-wrap: anywhere;
    line-height: 1.18;                  
    font-family: var(--song-font);      
}
.cline.has-chord {
    line-height: 2.0;                   
}

.cseg {
    position: relative;                 
}
.cchord {
    position: absolute;
    left: 0;
    bottom: 100%;                       
    margin-bottom: -0.17em;
    white-space: nowrap;
    color: var(--chord);
    font-family: var(--chord-font);
    font-weight: 700;
    font-size: 0.87em;
    line-height: 1;
}

.song-two.small {
    font-size: calc(13.5px * var(--font-scale));
    line-height: 1.05;
}
.song-two.small .chord-row {
    font-size: calc(11.5px * var(--font-scale));
    min-height: 12px;
}
.song-two.small .extra-lyrics {
    font-size: calc(10.5px * var(--font-scale));
}

.song-page.small {
    font-size: calc(14px * var(--font-scale));
    line-height: 1.05;
}

.song-page.snug {
    font-size: calc(10.5px * var(--font-scale));
    line-height: 1.03;
}

.song-page.tiny {
    font-size: calc(8.7px * var(--font-scale));
    line-height: 1.02;
}

.song-page.cozy {
    font-size: calc(9.5px * var(--font-scale));
    line-height: 1.03;
}
.song-page.cozy .chord-row {
    min-height: 9px;
    font-size: calc(9.5px * var(--font-scale));
}
.song-page.cozy .pair {
    margin-bottom: 1px;
}

.song-page.ultra {
    font-size: calc(8.2px * var(--font-scale));
    line-height: 1.01;
}

.song-page.wide {
    width: 414px;
    max-width: 100%;
}

.song-page .song-title {
    margin-bottom: 6px;
    font-family: var(--song-font);
    font-size: calc(0.95rem * var(--font-scale));
    font-weight: 700;
    text-align: left;
    text-decoration: underline;
    text-transform: uppercase;
    padding-top: 0.3em;
    line-height: 1.2;
}

.song-page.is-continuation {
    padding-top: 0.8em;
}

.song-num {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.song-num:active { opacity: 0.55; }
body.titles-no-underline .song-title {
    text-decoration: none;
}
.song-title[data-song="cred1"],
.song-title[data-song="cred4"] {
    text-decoration: none !important;
}

.song-page .note {
    margin-top: -4px;
    margin-bottom: 5px;
    font-family: Arial, sans-serif;
    font-size: 0.68rem;
}

.song-page .note.chord-color {
    color: var(--chord);
    font-weight: 700;
}

.song-page .pair {
    margin-bottom: 3px;
}

.song-page.small .pair {
    margin-bottom: 1px;
}

.song-page.snug .pair {
    margin-bottom: 1px;
}

.song-page.tiny .pair {
    margin-bottom: 1px;
}

.song-page.ultra .pair {
    margin-bottom: 1px;
}

.song-page .chord-row,
.song-page .lyric-row {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.song-page .chord-row {
    min-height: 11px;
    color: var(--chord);
    font-family: var(--song-font);
    font-size: calc(12px * var(--font-scale));
    font-weight: 700;
}

.song-page .chord-row:empty {
    min-height: 0;
    height: 0;
}

.song-page.small .chord-row {
    min-height: 11px;
    font-size: calc(12px * var(--font-scale));
}

.song-page.snug .chord-row {
    min-height: 10px;
    font-size: calc(10.5px * var(--font-scale));
}

.variant-btn {
    position: relative;   
    cursor: pointer;
    color: rgba(0, 0, 0, 0.35);
    text-decoration: none;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.variant-btn::after {
    content: "";
    position: absolute;
    top: -0.3em;
    bottom: -0.2em;
    left: -0.15em;
    right: -0.15em;
}
.variant-btn:first-of-type::after { left: -0.55em; }   
.variant-btn:last-of-type::after  { right: -0.55em; }  
[data-active-variant] .song-title { margin-bottom: 2.4em; }

.variant-btn.active {
    color: var(--chord);
}
.variant-btn:hover,
.variant-btn:focus {
    color: var(--chord);
    outline: none;
}
body.dark-mode .variant-btn {
    color: rgba(255, 255, 255, 0.35);
}
body.dark-mode .variant-btn.active,
body.dark-mode .variant-btn:hover,
body.dark-mode .variant-btn:focus {
    color: var(--chord);
}

.song-page[data-active-variant="Am"] .variant-only[data-variant="Em"],
.song-page[data-active-variant="Em"] .variant-only[data-variant="Am"],
.song-page[data-active-variant="Bm"] .variant-only[data-variant="Am"],
.song-page[data-active-variant="Am"] .variant-only[data-variant="Bm"],
.song-page[data-active-variant="A"] .variant-only[data-variant="G"],
.song-page[data-active-variant="G"] .variant-only[data-variant="A"],
.song-page[data-active-variant="Em"] .variant-only[data-variant="Bm"],
.song-page[data-active-variant="Bm"] .variant-only[data-variant="Em"] {
    display: none;
}
.song-page[data-active-variant="D"] .variant-only[data-variant="C"],
.song-page[data-active-variant="C"] .variant-only[data-variant="D"] {
    display: none;
}
.song-page[data-active-variant="Em"] .variant-only[data-variant="Dm"],
.song-page[data-active-variant="Dm"] .variant-only[data-variant="Em"],
.song-page[data-active-variant="G"] .variant-only[data-variant="E"],
.song-page[data-active-variant="E"] .variant-only[data-variant="G"] {
    display: none;
}
.song-page[data-active-variant="E"] .variant-only[data-variant="D"],
.song-page[data-active-variant="D"] .variant-only[data-variant="E"] {
    display: none;
}
.song-page[data-active-variant="G"] .variant-only[data-variant="F"],
.song-page[data-active-variant="F"] .variant-only[data-variant="G"] {
    display: none;
}
.song-page[data-active-variant="C"] .variant-only[data-variant="A"],
.song-page[data-active-variant="A"] .variant-only[data-variant="C"] {
    display: none;
}
.song-page[data-active-variant="D"] .variant-only[data-variant="G"],
.song-page[data-active-variant="G"] .variant-only[data-variant="D"] {
    display: none;
}

.song-page.tiny .chord-row {
    min-height: 8px;
    font-size: 8.7px;
}

.song-page.ultra .chord-row {
    min-height: 8px;
    font-size: 8.2px;
}

.song-page.ultra .song-title {
    margin-bottom: 4px;
}

.song-page p {
    margin-bottom: 7px;
    overflow-wrap: anywhere;
}

.song-page .plain-block {
    margin-top: 7px;
    overflow-wrap: anywhere;
}

.song-page .columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.song-page.flow-cols {
    column-count: 2;
    column-gap: 16px;
    column-fill: auto;
    height: 455px;
    width: 414px;
    max-width: 100%;
}

.song-page.flow-cols .pair {
    overflow: hidden;
}

.song-page.flow-cols .chord-row,
.song-page.flow-cols .lyric-row {
    white-space: pre-wrap;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.song-page.flow-cols .pair,
.song-page.flow-cols .plain-block {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.song-page.flow-cols .song-title {
    column-span: all;
    -webkit-column-span: all;
}

.song-page .column-title {
    margin-bottom: 4px;
    color: var(--header-text);
    font-family: Arial, sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
}

.page-content-wrap {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 48px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-y;
    overscroll-behavior: contain;
    position: relative;
    z-index: 1;
    will-change: scroll-position;
    min-height: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    contain: layout;
}

.page-content-wrap::-webkit-scrollbar {
    display: none;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 48px;
    pointer-events: none;
    z-index: 10;
}

.footer-line-2 {
    position: absolute;
    bottom: 12px;
    right: 0;
    height: 20px;
    background-color: #c88778;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px 0 20px;
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 1px 4px rgba(0, 0, 0, 0.08);
    z-index: 15;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.35s ease;
}

body.dark-mode .footer-line-2 {
    background-color: #d79a8c;
}



.footer-line-1 {
    height: 14px;
}

.zoom-widget {
    position: absolute;
    bottom: 26px;
    left: 50%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none;      
}

.zoom-widget.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.zoom-toggle {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 16;
    pointer-events: auto;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--page-text);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.zoom-toggle:hover { opacity: 0.8; }
body.font-slider-open .zoom-toggle {
    opacity: 0;
    pointer-events: none;
}

.zoom-toggle-a {
    font-family: Arial, sans-serif;
    font-weight: 700;
    line-height: 1;
}
.zoom-toggle-a.small { font-size: 0.68rem; }
.zoom-toggle-a.big   { font-size: 1rem; }

.zoom-slider-panel {
    position: absolute;
    left: 0;
    bottom: 32px;                       
    width: 156px;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) translateY(12px) scale(0.96);
    transform-origin: bottom center;
    transition: opacity 0.26s ease, transform 0.28s ease;
    padding: 3px 14px;
    border-radius: 999px;
    background: var(--page-bg);
    box-shadow: 0 6px 20px var(--book-shadow, rgba(0, 0, 0, 0.12));
}
.zoom-widget.open .zoom-slider-panel {
    pointer-events: auto;
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.pill-row {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 156px;
    height: 36px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--page-bg);
    box-shadow: 0 6px 20px var(--book-shadow, rgba(0, 0, 0, 0.12));
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 50%) scale(0.28);
    transform-origin: center;
    transition: opacity 0.24s ease, transform 0.3s cubic-bezier(0.34, 1.3, 0.5, 1);
}
.zoom-widget.open .pill-row {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 50%) scale(1);
}

.pill-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: transparent;
    color: var(--page-text);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;                
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.pill-btn.radial-italic { font-style: italic; font-weight: 600; }
.pill-btn.radial-bold   { font-weight: 900; }
.pill-btn:active { transform: scale(0.9); }

.pill-btn.is-active {
    background: #c88778;
    color: #ffffff;
}
body.dark-mode .pill-btn.is-active {
    background: #d79a8c;
}

.pill-center {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: transparent;
    color: var(--page-text);
    display: grid;
    place-items: center;          
    cursor: pointer;
    pointer-events: none;               
    opacity: 0;                         
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}
.aa-glyph {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
}
.aa-glyph .zoom-toggle-a.small { margin-right: 1.5px; }
.zoom-widget.open .pill-center {
    opacity: 1;
    pointer-events: auto;
    background: rgba(130, 130, 130, 0.16);
}

.page-content-wrap { font-synthesis: weight style; }
body.song-bold   .page-content-wrap,
body.song-bold   .page-content-wrap * { font-weight: 700; }
body.song-italic .page-content-wrap,
body.song-italic .page-content-wrap * { font-style: italic; }
body.song-italic .page-content-wrap .cchord { font-style: normal; }

.song-page.creditos {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.4;
}
.song-page.creditos .cline,
.song-page.creditos .cseg,
.song-page.creditos p {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    font-style: normal !important;
}
.song-page.creditos p {
    margin: 0 0 0.7em;
    text-align: justify;
}
.song-page.creditos .song-title {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
}

.cchord {
    font-weight: 700 !important;
    font-style: normal !important;
    text-decoration: none !important;
}

.zoom-slider {
    display: block;
    width: 100%;
    height: auto;
    color: var(--page-text);
    touch-action: none;
}

.zoom-slider .zs-ink {
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0.5;
}

.zoom-slider .zs-track-base {
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    opacity: 0.18;
}

.zoom-slider .zs-progress {
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    opacity: 0.5;
    pointer-events: none;
}

.zoom-slider .zs-hit {
    stroke: transparent;
    stroke-width: 30;
    cursor: pointer;
}

.zoom-slider .zs-thumb {
    fill: currentColor;
    opacity: 0.5;
    cursor: grab;
    transition: r 0.1s ease;
}

.zoom-widget.dragging .zoom-slider .zs-thumb {
    cursor: grabbing;
    r: 11;
}

.zoom-slider .zs-btn { cursor: pointer; }

.zoom-slider .zs-btn.zs-disabled {
    opacity: 0.3;
    pointer-events: none;
}

.font-picker-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--page-text);
    font-family: "Courier New", Courier, monospace;   
    font-size: 1.05rem;
    font-weight: 700;
    font-style: italic;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    filter: opacity(0.4);
    -webkit-filter: opacity(0.4);
    transition: filter 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.font-picker-toggle:hover {
    filter: opacity(0.8);
    -webkit-filter: opacity(0.8);
}

.font-picker-toggle:active {
    filter: opacity(0.5);
    -webkit-filter: opacity(0.5);
}

.font-picker-toggle.hidden {
    display: none;
}

body.dark-mode .font-picker-toggle {
    color: #f0e6df;
}

.font-picker {
    position: absolute;
    top: 48px;
    right: 0;                 
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border-radius: 10px;
    background: var(--page-bg);
    border: none;
    box-shadow: 0 4px 16px var(--book-shadow, rgba(0, 0, 0, 0.2));
    transition: opacity 0.2s ease, visibility 0.2s ease;
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        
    -ms-overflow-style: none;     
}
.font-picker::-webkit-scrollbar { width: 0; height: 0; display: none; }  

.font-picker.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.font-picker-option {
    min-width: 46px;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--page-text);
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.font-picker-option:hover {
    background: rgba(0, 0, 0, 0.06);
}

.font-picker-option.active {
    color: var(--chord);
    font-weight: 700;
}

body.dark-mode .font-picker-option.active {
    color: var(--chord);
}

.btn-nav {
    display: grid;
    position: absolute;
    bottom: 30px;
    width: 56px;
    height: 56px;
    place-items: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    font-family: "Segoe UI Symbol", "Arial", sans-serif;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--page-text);
    opacity: 0 !important;
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 100;
    padding: 0;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-nav:hover,
.btn-nav:active {
    opacity: 0 !important;
}

#prevBtn {
    left: 50px;
}

#nextBtn {
    right: 50px;
}


.short-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, minmax(min-content, 1fr));
    flex: 1;
    min-height: 0;
    column-gap: 18px;
    margin-top: 4px;
    margin-bottom: 8px;
    overflow: visible;
}

.short-grid .short-song {
    display: block;
    color: var(--page-text);
    font-family: var(--song-font);
    font-size: calc(12px * var(--font-scale, 1));   
    line-height: 1.15;
    overflow-wrap: break-word;
}

.short-grid .pos-1 { grid-column: 1; grid-row: 1; }
.short-grid .pos-4 { grid-column: 2; grid-row: 2; }
.short-grid .pos-5 { grid-column: 1; grid-row: 3; }
.short-grid .pos-8 { grid-column: 2; grid-row: 4; }
.short-grid .short-song.wide { grid-column: 1 / -1; }

.short-grid .short-song .song-title {
    margin-bottom: 6px;
    font-family: Arial, sans-serif;
    font-size: calc(0.85rem * var(--font-scale, 1));   
    font-weight: 700;
    text-align: left;
    text-decoration: underline;
    text-transform: uppercase;
}

.short-grid .pair {
    margin-bottom: 1px;
}

.short-grid .chord-row,
.short-grid .lyric-row {
    white-space: pre;
}

.short-grid .chord-row {
    min-height: 10px;
    color: var(--chord);
    font-weight: 700;
}


#m73 > .front,
#m73 > .back {
    padding: 10px var(--page-pad-x) 52px;
}

#m59 > .front,
#m59 > .back {
    padding-right: 10px;
}

#m74 > .front, #m74 > .back,
#m75 > .front, #m75 > .back,
#m76 > .front, #m76 > .back,
#m77 > .front, #m77 > .back {
    padding: 10px var(--page-pad-x) 52px;
}

.index-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px 28px 10px;   
}

.dict-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
#pDict1 > .front,
#pDict2 > .front {
    padding-bottom: 24px;
}
.front:has(> .index-page) {
    padding-bottom: 24px;
}

.index-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.index-section-label {
    font-family: Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--chord);
    margin: 6px 0 2px;
    letter-spacing: 0.03em;
}

.index-section-label:first-child {
    margin-top: 0;
}

.index-entry {
    display: flex;
    align-items: baseline;
    padding: 0;
    cursor: pointer;
    color: var(--page-text);
    text-decoration: none;
    font-size: 0.68rem;
    line-height: 1.4;
    font-family: Arial, sans-serif;
    transition: color 0.15s ease;
    user-select: none;
}

.index-entry:hover,
.index-entry:focus {
    color: var(--chord);
    outline: none;
}

.index-name {
    white-space: nowrap;
    flex-shrink: 0;
}

.index-dots {
    flex: 1;
    border-bottom: 1px dotted currentColor;
    opacity: 0.28;
    margin: 0 4px 3px;
    min-width: 8px;
}

.index-num {
    font-weight: 600;
    min-width: 22px;
    text-align: right;
    flex-shrink: 0;
    font-size: 0.67rem;
}

.index-entry-dict {
    color: var(--chord);
    font-weight: 700;
}
.index-entry-dict .index-num {
    font-weight: 700;
}

.btn-index {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    color: var(--button-text);
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.78rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: opacity 0.2s ease, transform 0.15s ease;
    z-index: 5;
    padding: 0;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btn-index:hover {
    opacity: 0.95;
    transform: scale(1.12);
}

.search-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    filter: opacity(0.4);
    -webkit-filter: opacity(0.4);
    transition: filter 0.25s ease;
}

.search-btn:hover {
    filter: opacity(0.8);
    -webkit-filter: opacity(0.8);
}

.index-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--button-border);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: transform 0.2s ease;
}

.index-btn:hover {
    transform: translateY(-1px) scale(1.04);
}


.search-overlay {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.search-overlay.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

.search-top {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.search-box {
    display: flex;
    align-items: center;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    overflow: hidden;
    flex: 1;
    min-width: 0;
    width: 280px;
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 14px;
    font-family: Arial, sans-serif;
    font-size: 0.82rem;
    color: var(--page-text);
    outline: none;
}

.search-input::placeholder {
    color: var(--header-text);
    opacity: 0.7;
}

.search-clear {
    position: relative;
    flex: 0 0 auto;
    width: 42px; height: 42px;
    padding: 0;
    border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; line-height: 1; font-weight: 400;
    color: #43412f;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background:
        radial-gradient(circle at 36% 30%,
            #ffffff 0%,
            color-mix(in srgb, var(--cover-1) 22%, #f3efe4) 16%,
            color-mix(in srgb, var(--cover-2) 34%, #e6ded0) 55%,
            color-mix(in srgb, var(--cover-3) 46%, #c7bda6) 100%);
    box-shadow:
        inset -3px -4px 9px rgba(199,189,166,.7),
        inset 3px 3px 7px rgba(255,255,255,.24),
        0 7px 12px -5px rgba(70,80,60,.28),
        0 2px 4px -1px rgba(70,80,60,.28);
    transition: box-shadow .25s ease, background .25s ease, transform .2s ease;
}
.search-clear:hover { transform: translateY(-1px); }
.search-clear:active {
    box-shadow:
        inset -3px -4px 9px color-mix(in srgb, var(--cover-3) 60%, transparent),
        inset 3px 3px 7px rgba(255,255,255,.22),
        0 0 0 4px color-mix(in srgb, var(--cover-2) 30%, transparent);
    background:
        radial-gradient(circle at 36% 30%,
            #ffffff 0%,
            color-mix(in srgb, var(--cover-1) 60%, #ffffff) 18%,
            var(--cover-2) 55%,
            color-mix(in srgb, var(--cover-3) 72%, #000000) 100%);
}
body.dark-mode .search-clear {
    color: #ece7de;
    background:
        radial-gradient(circle at 38% 26%, rgba(255,255,255,.10), rgba(255,255,255,.02) 40%, rgba(255,255,255,0) 66%),
        color-mix(in srgb, var(--cover-3) 16%, rgba(38,44,46,.72));
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.22),
        inset -3px -5px 11px rgba(0,0,0,.5),
        0 7px 15px -5px rgba(0,0,0,.6);
}

body.searching .top-controls {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.search-results {
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.16);
    width: 280px;
    max-height: 340px;
    overflow-y: auto;
    font-family: Arial, sans-serif;
    font-size: 0.78rem;
}

.search-results:empty {
    display: none;
}

.search-result-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--header-line);
    cursor: pointer;
    transition: background 0.15s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--header-line);
}

.search-result-title {
    font-weight: 700;
    color: var(--chord);
    margin-bottom: 2px;
    font-size: 0.75rem;
}

.search-result-snippet {
    color: var(--header-text);
    font-size: 0.72rem;
    line-height: 1.4;
}

.search-result-page {
    font-size: 0.68rem;
    color: var(--header-text);
    margin-top: 2px;
    opacity: 0.7;
}

.search-thinking {
    padding: 14px;
    text-align: center;
    color: var(--header-text);
    font-size: 0.75rem;
    opacity: 0.7;
}


body.single-page .book {
    transform-origin: top center;
}
body.single-page .container {
    align-items: flex-start;
    overflow: hidden;
    padding-top: max(64px, calc(env(safe-area-inset-top) + 50px));
}

@media (max-width: 820px) and (orientation: portrait) {
    :root {
        --book-width: 430px;
        --book-height: 650px;
        --page-pad-y: 24px;
        --page-pad-x: 22px;
    }

    .decor-section-title {
        font-size: 2.8rem;
    }

    .decor-section-title-long {
        font-size: 2.1rem;
        max-width: 310px;
    }

    body.single-page .book {
        transform-origin: top center;
    }

    body.single-page .container {
        align-items: flex-start;
        overflow: hidden;
        padding-top: max(64px, calc(env(safe-area-inset-top) + 50px));
    }

    .btn-nav {
        bottom: max(4px, env(safe-area-inset-bottom));
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
        opacity: 0 !important;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .btn-nav:active { opacity: 0 !important; }
    #prevBtn { left: max(10px, env(safe-area-inset-left)); }
    #nextBtn { right: max(10px, env(safe-area-inset-right)); }

    .top-controls {
        top: max(8px, env(safe-area-inset-top));
        right: max(8px, env(safe-area-inset-right));
        gap: 7px;
    }
    .theme-toggle, .gesture-toggle {
        width: 48px;
        height: 26px;
    }
    .index-btn {
        width: 30px;
        height: 30px;
    }
    .gesture-toggle-thumb,
    .theme-toggle-thumb {
        width: 18px;
        height: 18px;
    }
    .gesture-toggle.active .gesture-toggle-thumb {
        left: calc(100% - 21px);
    }
    .search-btn {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }

    .header {
        margin: 0 auto 10px;
        padding-bottom: 5px;
        font-size: 0.82rem;
    }

    .search-overlay {
        top: 10px;
        right: 10px;
        left: 10px;
        align-items: stretch;
    }
    .search-box,
    .search-results {
        width: 100%;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .btn-nav {
        bottom: 10px;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
        opacity: 0 !important;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .btn-nav:active { opacity: 0 !important; }
    #prevBtn { left: 12px; }
    #nextBtn { right: 12px; }

    .top-controls {
        top: 8px;
        right: 10px;
        gap: 6px;
    }
    .theme-toggle, .gesture-toggle {
        width: 52px;
        height: 25px;
        font-size: 0.85rem;
    }
    .index-btn {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }
    .search-overlay {
        top: 8px;
        right: 70px;
    }
    .search-box,
    .search-results {
        width: 220px;
    }
}

.plumeria-page {
    padding: 0;
    overflow: hidden;
    align-items: stretch;
    justify-content: stretch;
}
body:not(.dark-mode) .plumeria-page {
    background: linear-gradient(180deg, #d8ecf3 0%, var(--page-bg) 65%);
}
.plumeria-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    container-type: size;
    border-radius: inherit;
    /* Samsung/Android: `paint` contenía el árbol bitmap animado en una capa que el
       compositor teselaba y no repintaba al volver del flip (medio negro / cachitos).
       Sin `paint` deja de recortar/teselar; overflow:hidden ya recorta lo visible. */
    contain: layout style;
}
.plumeria-stage,
.plumeria-sky {
    position: absolute;
    inset: 0;
    pointer-events: none;   
}
.plumeria-stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}
.plumeria-stage svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;      
}
.plumeria-stage { z-index: 3; }
.plumeria-sky { z-index: 5; overflow: hidden; }
.plumeria-sky-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.plumeria-moon {
    position: absolute;
    top: 7%;
    right: 11%;
    width: 60px;
    height: 60px;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.5s ease;
}
body.dark-mode .plumeria-moon {
    opacity: 0.9;
}
@media (max-width: 400px) {
    .plumeria-moon {
        width: 48px;
        height: 48px;
    }
}

.plumeria-mountains {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.plumeria-mountains svg {
    width: 100%;
    height: 100%;
    display: block;
}
body.dark-mode .plumeria-mountains path:nth-of-type(1) {
    fill: rgba(50, 61, 100, 0.85);
}
body.dark-mode .plumeria-mountains path:nth-of-type(2) {
    fill: rgba(34, 42, 74, 0.92);
}

.plumeria-cloud {
    position: absolute;
    width: 170px;
    height: 85px;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.5s ease;
}
body:not(.dark-mode) .plumeria-cloud {
    opacity: 0.45;
}
.cloud-part {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
    filter: blur(3px);
    -webkit-filter: blur(3px);
}

.plumeria-flying-bird {
    position: absolute;
    z-index: 10;
    pointer-events: none;
}
.fb-svg {
    display: block;
    animation: birdFlap var(--flap, 0.8s) ease-in-out infinite;
    transform-origin: center 75%;
}
@keyframes birdFlap {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.72); }
}
body.dark-mode .plumeria-flying-bird,
.plumeria-rainy .plumeria-flying-bird { display: none !important; }

.nest-birds { display: none; }
body.dark-mode .nest-birds,
.plumeria-rainy .nest-birds { display: block; }
.nest-birds-live {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}
.plumeria-stage .nest-birds-live { display: none; }
body.dark-mode .plumeria-stage .nest-birds-live,
.plumeria-rainy .plumeria-stage .nest-birds-live { display: block; }

.plumeria-rain-back,
.plumeria-rain-front {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

body:not(.dark-mode) .plumeria-page.plumeria-rainy .plumeria-rain-back {
    opacity: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='160'><g stroke='rgba(135,160,175,0.3)' stroke-width='1.0' stroke-linecap='round'><line x1='5' y1='5' x2='0' y2='30' /><line x1='45' y1='55' x2='40' y2='80' /><line x1='20' y1='100' x2='15' y2='125' /><line x1='65' y1='15' x2='60' y2='40' /></g></svg>");
    background-repeat: repeat;
    background-size: 80px 160px;
    animation: rainFallBack 0.9s linear infinite;
}

body:not(.dark-mode) .plumeria-page.plumeria-rainy .plumeria-rain-front {
    opacity: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='280'><g stroke='rgba(120,150,165,0.48)' stroke-width='1.8' stroke-linecap='round'><line x1='15' y1='15' x2='0' y2='70' /><line x1='80' y1='95' x2='65' y2='150' /><line x1='115' y1='25' x2='100' y2='80' /><line x1='105' y1='200' x2='90' y2='255' /></g></svg>");
    background-repeat: repeat;
    background-size: 140px 280px;
    animation: rainFallFront 0.6s linear infinite;
}

@keyframes rainFallBack {
    0% { background-position: 0px 0px; }
    100% { background-position: -80px 160px; }
}

@keyframes rainFallFront {
    0% { background-position: 0px 0px; }
    100% { background-position: -140px 280px; }
}

body:not(.dark-mode) .plumeria-page.plumeria-rainy {
    background: linear-gradient(180deg, #adbcc3 0%, #d5e0e4 50%, var(--page-bg) 90%);
}

body:not(.dark-mode) .plumeria-page.plumeria-rainy .plumeria-cloud {
    opacity: 0.85;
}
body:not(.dark-mode) .plumeria-page.plumeria-rainy .cloud-part {
    background: #c5d2d9;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.05);
}

body:not(.dark-mode) .plumeria-page.plumeria-rainy #branchLayer,
body:not(.dark-mode) .plumeria-page.plumeria-rainy .leaf-canopy,
body:not(.dark-mode) .plumeria-page.plumeria-rainy .groundg,
body:not(.dark-mode) .plumeria-page.plumeria-rainy .flower-canopy {
    filter: brightness(0.8) saturate(0.85);
    -webkit-filter: brightness(0.8) saturate(0.85);
}

.plumeria-page #branchLayer{
    transform-box:view-box;transform-origin:500px 1255px;
    animation:growTree 1.7s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes growTree{
    0%{transform:scaleY(.02) scaleX(.55);opacity:.5;}
    55%{opacity:1;}
    100%{transform:scaleY(1) scaleX(1);opacity:1;}
}
.plumeria-page #sway{transform-box:view-box;transform-origin:500px 1255px;animation:sway 7s ease-in-out infinite;}
@keyframes sway{0%,100%{transform:rotate(-1deg);}50%{transform:rotate(1.4deg);}}
.plumeria-page #canopySway{transform-box:view-box;transform-origin:500px 880px;animation:swayTop 7s ease-in-out infinite;}
@keyframes swayTop{0%,100%{transform:rotate(.7deg);}50%{transform:rotate(-1deg);}}

.plumeria-stage .tree-bmp-grow,
.plumeria-stage .tree-bmp-sway{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; }
/* Samsung/Android: sin will-change permanente. Forzaba capa GPU del bitmap grande
   que el compositor teselaba mal al repintar (cachitos). El vaivén es lento (7s). */
.plumeria-stage .tree-bmp-sway{ transform-origin:50% 100%; animation:treeBmpSway 7s ease-in-out infinite; }
.plumeria-stage .tree-bmp-grow{ transform-origin:50% 100%; animation:treeBmpGrow 1.7s cubic-bezier(.2,.7,.2,1); }
.plumeria-stage .tree-bmp{ width:100%; height:100%; object-fit:contain; object-position:center bottom; display:block; transform:scale(1.06); user-select:none; -webkit-user-select:none; pointer-events:none; }
@keyframes treeBmpSway{ 0%,100%{transform:rotate(-0.5deg);} 50%{transform:rotate(0.65deg);} }
@keyframes treeBmpGrow{ 0%{transform:scaleY(.05) scaleX(.5);opacity:.4;} 55%{opacity:1;} 100%{transform:none;opacity:1;} }
.plumeria-page.plumeria-grown .tree-bmp-grow{ animation:none; transform:none; }
body.dark-mode .plumeria-page .tree-bmp{ opacity:.82; }
body:not(.dark-mode) .plumeria-page.plumeria-rainy .tree-bmp{ filter:brightness(.85) saturate(.85); -webkit-filter:brightness(.85) saturate(.85); }
.paper:not(.onstage) .plumeria-stage .tree-bmp-sway,
.paper:not(.onstage) .plumeria-stage .tree-bmp-grow,
body.flipping .plumeria-stage .tree-bmp-sway,
body.flipping .plumeria-stage .tree-bmp-grow{ animation-play-state:paused !important; }
@media (prefers-reduced-motion:reduce){ .plumeria-stage .tree-bmp-sway,.plumeria-stage .tree-bmp-grow{ animation:none !important; transform:none !important; } }
body.dark-mode .plumeria-page #sway,
body.dark-mode .plumeria-page #canopySway{animation:none;will-change:auto;}
.plumeria-page.plumeria-grown #branchLayer{animation:none;transform:none;opacity:1;}
.plumeria-page.plumeria-grown .leaf-pop{animation:none;transform:scale(1);rotate:0deg;}
.plumeria-page.plumeria-grown .flower-pop{animation:none;transform:scale(1) rotate(0deg);}
.plumeria-page.plumeria-grown .blade{animation:none;transform:scaleY(1);rotate:0deg;}
.plumeria-page.plumeria-grown .bush{animation:none;transform:scale(1);rotate:0deg;}
.plumeria-page .leaf-pop{
    transform-box:fill-box;transform-origin:50% 100%;transform:scale(0);
    animation-name:leafIn,flutter;
    animation-timing-function:cubic-bezier(.34,1.45,.5,1),ease-in-out;
    animation-iteration-count:1,infinite;
    animation-fill-mode:forwards,none;
}
@keyframes leafIn{to{transform:scale(1);}}
@keyframes flutter{0%,100%{rotate:0deg;}50%{rotate:2.6deg;}}
.plumeria-page .flower-pop{
    transform-box:fill-box;transform-origin:50% 50%;transform:scale(0);
    animation:bloom .95s cubic-bezier(.34,1.5,.4,1) forwards;
}
@keyframes bloom{0%{transform:scale(0) rotate(-35deg);}100%{transform:scale(1) rotate(0);}}
.plumeria-page .petal{stroke:rgba(255,255,255,.12);stroke-width:.3;}
.plumeria-page .blade{
    transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);
    animation-name:sproutY,bladeSway;
    animation-timing-function:ease-out,ease-in-out;
    animation-iteration-count:1,infinite;
    animation-fill-mode:forwards,none;
}
@keyframes sproutY{to{transform:scaleY(1);}}
@keyframes bladeSway{0%,100%{rotate:-4deg;}50%{rotate:5deg;}}
.plumeria-page .leaf-pop.still{animation-name:leafIn;animation-iteration-count:1;animation-fill-mode:forwards;}
.plumeria-page .blade.still{animation-name:sproutY;animation-iteration-count:1;animation-fill-mode:forwards;}
.plumeria-page .bush{
    transform-box:fill-box;transform-origin:50% 100%;transform:scale(0);
    animation-name:bushPop,bushSway;
    animation-timing-function:cubic-bezier(.34,1.45,.5,1),ease-in-out;
    animation-iteration-count:1,infinite;
    animation-fill-mode:forwards,none;
}
@keyframes bushPop{to{transform:scale(1);}}
@keyframes bushSway{0%,100%{rotate:-1.6deg;}50%{rotate:1.9deg;}}
.plumeria-page .firefly{display:none;}
body.dark-mode .plumeria-page .butterfly{display:none;}
body.dark-mode .plumeria-page .firefly{display:block;}

.plumeria-page.plumeria-rainy .butterfly { display: none !important; }
body:not(.dark-mode) .plumeria-page.plumeria-rainy .firefly { display: block !important; }
.plumeria-page .butterfly{position:absolute;left:0;top:0;will-change:transform;}
.plumeria-page .bsize{transform-origin:50% 50%;}
.plumeria-page .bwings{display:block;transform-origin:50% 50%;animation:flap .2s ease-in-out infinite;}
@keyframes flap{0%,100%{transform:scaleX(1);}50%{transform:scaleX(.34);}}
.plumeria-page .firefly{
    position:absolute;
    left:0; top:0;
    border-radius:50%;
    will-change:transform,opacity;
    pointer-events:none;
    opacity:0;
}
body.dark-mode .plumeria-page #branchLayer,
body.dark-mode .plumeria-page .leaf-canopy,
body.dark-mode .plumeria-page .groundg{opacity:0.8;}
@media (prefers-reduced-motion:reduce){
    .plumeria-sky{display:none;}
    .plumeria-page #branchLayer,.plumeria-page #sway,.plumeria-page #canopySway,
    .plumeria-page .leaf-pop,.plumeria-page .flower-pop,.plumeria-page .blade,.plumeria-page .bush{
        animation-duration:.001s!important;animation-iteration-count:1!important;
    }
    .plumeria-page .leaf-pop,.plumeria-page .flower-pop,.plumeria-page .bush{transform:scale(1)!important;}
    .plumeria-page .blade{transform:scaleY(1)!important;}
}

.page-sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    container-type: size;
    contain: layout paint style;
    z-index: 2;
}
body.dark-mode .page-sky { display: none; }
.page-sky .butterfly { position: absolute; left: 0; top: 0; will-change: transform; }
.page-sky .bsize { transform-origin: 50% 50%; }
.page-sky .bwings { display: block; transform-origin: 50% 50%; animation: flap .2s ease-in-out infinite; }
@supports not (container-type: size) {
    .page-sky { display: none; }
}
@media (prefers-reduced-motion:reduce){
    .page-sky { display: none; }
}

body.dark-mode .plumeria-page,
body.dark-mode .image-page,
body.dark-mode .decor-section-page,
body.dark-mode .index-page,
body.dark-mode .dict-page {
    background-color: var(--app-bg);
    background-image: none;
    position: relative;
}
body.dark-mode .plumeria-page {
    background: var(--app-bg) !important;
}
body.dark-mode .front:has(> .decor-section-page),
body.dark-mode .front:has(> .index-page),
body.dark-mode .front:has(> .dict-page) {
    background-color: var(--app-bg);
    background-image: none;
}
body.dark-mode .plumeria-page::before,
body.dark-mode .decor-section-page::before,
body.dark-mode .index-page::before,
body.dark-mode .dict-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    background: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><g fill='%23cfe0ff'><circle cx='510' cy='593' r='5.5' opacity='0.11'/><circle cx='300' cy='106' r='5.7' opacity='0.14'/><circle cx='520' cy='26' r='6.9' opacity='0.1'/><circle cx='344' cy='65' r='5.9' opacity='0.09'/><circle cx='229' cy='99' r='5.8' opacity='0.08'/><circle cx='98' cy='449' r='6.4' opacity='0.1'/><circle cx='555' cy='544' r='5.8' opacity='0.09'/><circle cx='469' cy='312' r='7.1' opacity='0.12'/><circle cx='148' cy='242' r='7.0' opacity='0.1'/></g><g fill='%23ffffff'><circle cx='127' cy='531' r='1.45' opacity='0.75'/><circle cx='598' cy='379' r='0.76' opacity='0.59'/><circle cx='13' cy='215' r='1.65' opacity='0.99'/><circle cx='165' cy='302' r='0.6' opacity='0.66'/><circle cx='564' cy='289' r='1.25' opacity='0.89'/><circle cx='415' cy='583' r='1.44' opacity='0.73'/><circle cx='265' cy='538' r='1.01' opacity='0.62'/><circle cx='431' cy='58' r='1.36' opacity='0.75'/><circle cx='375' cy='29' r='1.15' opacity='0.73'/><circle cx='510' cy='593' r='1.61' opacity='0.9'/><circle cx='57' cy='495' r='1.18' opacity='0.9'/><circle cx='366' cy='511' r='0.72' opacity='0.7'/><circle cx='365' cy='401' r='1.38' opacity='0.9'/><circle cx='267' cy='41' r='0.61' opacity='0.71'/><circle cx='337' cy='338' r='0.95' opacity='0.6'/><circle cx='300' cy='106' r='1.69' opacity='0.96'/><circle cx='476' cy='578' r='0.67' opacity='0.65'/><circle cx='244' cy='592' r='1.3' opacity='0.84'/><circle cx='87' cy='36' r='1.16' opacity='0.9'/><circle cx='541' cy='326' r='1.42' opacity='0.88'/><circle cx='172' cy='575' r='1.3' opacity='0.73'/><circle cx='189' cy='115' r='0.61' opacity='0.72'/><circle cx='385' cy='178' r='1.3' opacity='0.85'/><circle cx='439' cy='523' r='1.38' opacity='0.81'/><circle cx='102' cy='265' r='1.18' opacity='0.73'/><circle cx='520' cy='26' r='2.02' opacity='0.91'/><circle cx='544' cy='232' r='0.85' opacity='0.53'/><circle cx='598' cy='169' r='2.1' opacity='0.99'/><circle cx='409' cy='231' r='0.65' opacity='0.74'/><circle cx='122' cy='412' r='0.61' opacity='0.6'/><circle cx='122' cy='340' r='0.99' opacity='0.68'/><circle cx='58' cy='341' r='1.19' opacity='0.81'/><circle cx='49' cy='120' r='1.41' opacity='0.89'/><circle cx='505' cy='77' r='1.27' opacity='0.86'/><circle cx='432' cy='250' r='0.72' opacity='0.72'/><circle cx='256' cy='426' r='1.18' opacity='0.86'/><circle cx='5' cy='65' r='0.86' opacity='0.62'/><circle cx='331' cy='432' r='1.28' opacity='0.88'/><circle cx='85' cy='150' r='1.44' opacity='0.77'/><circle cx='14' cy='407' r='0.87' opacity='0.51'/><circle cx='223' cy='258' r='0.91' opacity='0.57'/><circle cx='301' cy='166' r='1.23' opacity='0.75'/><circle cx='344' cy='65' r='1.73' opacity='0.98'/><circle cx='540' cy='354' r='1.03' opacity='0.6'/><circle cx='128' cy='94' r='0.74' opacity='0.66'/><circle cx='264' cy='202' r='0.97' opacity='0.66'/><circle cx='505' cy='170' r='0.82' opacity='0.71'/><circle cx='580' cy='268' r='0.98' opacity='0.52'/><circle cx='229' cy='99' r='1.71' opacity='0.93'/><circle cx='98' cy='449' r='1.87' opacity='0.97'/><circle cx='555' cy='544' r='1.7' opacity='0.93'/><circle cx='217' cy='286' r='0.88' opacity='0.72'/><circle cx='340' cy='529' r='0.62' opacity='0.61'/><circle cx='403' cy='313' r='1.03' opacity='0.61'/><circle cx='368' cy='82' r='1.01' opacity='0.68'/><circle cx='198' cy='370' r='0.99' opacity='0.63'/><circle cx='598' cy='497' r='1.18' opacity='0.85'/><circle cx='474' cy='175' r='0.69' opacity='0.53'/><circle cx='340' cy='598' r='1.69' opacity='0.99'/><circle cx='473' cy='457' r='0.82' opacity='0.7'/><circle cx='469' cy='312' r='2.09' opacity='1.0'/><circle cx='148' cy='242' r='2.06' opacity='0.95'/><circle cx='22' cy='582' r='1.46' opacity='0.87'/><circle cx='235' cy='367' r='1.02' opacity='0.63'/><circle cx='517' cy='459' r='0.7' opacity='0.51'/><circle cx='40' cy='162' r='0.62' opacity='0.58'/><circle cx='55' cy='430' r='0.89' opacity='0.6'/><circle cx='288' cy='363' r='0.85' opacity='0.53'/><circle cx='483' cy='408' r='1.27' opacity='0.92'/><circle cx='200' cy='8' r='0.84' opacity='0.6'/></g></svg>");
    background-repeat: repeat;
    background-size: 600px 600px;
    /* Samsung/Android: `will-change: background-position` promovia toda la pagina
       oscura (index/dict/divisora/plumeria) a una capa que el compositor rasterizaba
       a MEDIAS (mitad superior sin pintar = se veia el cielo detras y la lista/arbol
       cortados). El drift es lentisimo (190s/380s) -> pinta en main thread sin costo. */
    animation: plmStarDrift 190s linear infinite;
}
body.dark-mode .plumeria-page::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><g fill='%23cfe0ff'><circle cx='510' cy='593' r='5.5' opacity='0.11'/><circle cx='300' cy='106' r='5.7' opacity='0.14'/><circle cx='520' cy='26' r='6.9' opacity='0.1'/><circle cx='344' cy='65' r='5.9' opacity='0.09'/><circle cx='229' cy='99' r='5.8' opacity='0.08'/><circle cx='98' cy='449' r='6.4' opacity='0.1'/><circle cx='555' cy='544' r='5.8' opacity='0.09'/><circle cx='469' cy='312' r='7.1' opacity='0.12'/><circle cx='148' cy='242' r='7.0' opacity='0.1'/></g><g fill='%23ffffff'><circle cx='127' cy='531' r='1.45' opacity='0.75'/><circle cx='598' cy='379' r='0.76' opacity='0.59'/><circle cx='13' cy='215' r='1.65' opacity='0.99'/><circle cx='165' cy='302' r='0.6' opacity='0.66'/><circle cx='564' cy='289' r='1.25' opacity='0.89'/><circle cx='415' cy='583' r='1.44' opacity='0.73'/><circle cx='265' cy='538' r='1.01' opacity='0.62'/><circle cx='431' cy='58' r='1.36' opacity='0.75'/><circle cx='375' cy='29' r='1.15' opacity='0.73'/><circle cx='510' cy='593' r='1.61' opacity='0.9'/><circle cx='57' cy='495' r='1.18' opacity='0.9'/><circle cx='366' cy='511' r='0.72' opacity='0.7'/><circle cx='365' cy='401' r='1.38' opacity='0.9'/><circle cx='267' cy='41' r='0.61' opacity='0.71'/><circle cx='337' cy='338' r='0.95' opacity='0.6'/><circle cx='300' cy='106' r='1.69' opacity='0.96'/><circle cx='476' cy='578' r='0.67' opacity='0.65'/><circle cx='244' cy='592' r='1.3' opacity='0.84'/><circle cx='87' cy='36' r='1.16' opacity='0.9'/><circle cx='541' cy='326' r='1.42' opacity='0.88'/><circle cx='172' cy='575' r='1.3' opacity='0.73'/><circle cx='189' cy='115' r='0.61' opacity='0.72'/><circle cx='385' cy='178' r='1.3' opacity='0.85'/><circle cx='439' cy='523' r='1.38' opacity='0.81'/><circle cx='102' cy='265' r='1.18' opacity='0.73'/><circle cx='520' cy='26' r='2.02' opacity='0.91'/><circle cx='544' cy='232' r='0.85' opacity='0.53'/><circle cx='598' cy='169' r='2.1' opacity='0.99'/><circle cx='409' cy='231' r='0.65' opacity='0.74'/><circle cx='122' cy='412' r='0.61' opacity='0.6'/><circle cx='122' cy='340' r='0.99' opacity='0.68'/><circle cx='58' cy='341' r='1.19' opacity='0.81'/><circle cx='49' cy='120' r='1.41' opacity='0.89'/><circle cx='505' cy='77' r='1.27' opacity='0.86'/><circle cx='432' cy='250' r='0.72' opacity='0.72'/><circle cx='256' cy='426' r='1.18' opacity='0.86'/><circle cx='5' cy='65' r='0.86' opacity='0.62'/><circle cx='331' cy='432' r='1.28' opacity='0.88'/><circle cx='85' cy='150' r='1.44' opacity='0.77'/><circle cx='14' cy='407' r='0.87' opacity='0.51'/><circle cx='223' cy='258' r='0.91' opacity='0.57'/><circle cx='301' cy='166' r='1.23' opacity='0.75'/><circle cx='344' cy='65' r='1.73' opacity='0.98'/><circle cx='540' cy='354' r='1.03' opacity='0.6'/><circle cx='128' cy='94' r='0.74' opacity='0.66'/><circle cx='264' cy='202' r='0.97' opacity='0.66'/><circle cx='505' cy='170' r='0.82' opacity='0.71'/><circle cx='580' cy='268' r='0.98' opacity='0.52'/><circle cx='229' cy='99' r='1.71' opacity='0.93'/><circle cx='98' cy='449' r='1.87' opacity='0.97'/><circle cx='555' cy='544' r='1.7' opacity='0.93'/><circle cx='217' cy='286' r='0.88' opacity='0.72'/><circle cx='340' cy='529' r='0.62' opacity='0.61'/><circle cx='403' cy='313' r='1.03' opacity='0.61'/><circle cx='368' cy='82' r='1.01' opacity='0.68'/><circle cx='198' cy='370' r='0.99' opacity='0.63'/><circle cx='598' cy='497' r='1.18' opacity='0.85'/><circle cx='474' cy='175' r='0.69' opacity='0.53'/><circle cx='340' cy='598' r='1.69' opacity='0.99'/><circle cx='473' cy='457' r='0.82' opacity='0.7'/><circle cx='469' cy='312' r='2.09' opacity='1.0'/><circle cx='148' cy='242' r='2.06' opacity='0.95'/><circle cx='22' cy='582' r='1.46' opacity='0.87'/><circle cx='235' cy='367' r='1.02' opacity='0.63'/><circle cx='517' cy='459' r='0.7' opacity='0.51'/><circle cx='40' cy='162' r='0.62' opacity='0.58'/><circle cx='55' cy='430' r='0.89' opacity='0.6'/><circle cx='288' cy='363' r='0.85' opacity='0.53'/><circle cx='483' cy='408' r='1.27' opacity='0.92'/><circle cx='200' cy='8' r='0.84' opacity='0.6'/></g></svg>");
    background-size: 600px 600px;
    animation: plmStarDrift600 380s linear infinite;
}
@keyframes plmStarDrift600 {
    from { background-position: 0 0; }
    to   { background-position: 0 600px; }
}
body.dark-mode .decor-section-page::before,
body.dark-mode .index-page::before,
body.dark-mode .dict-page::before {
    inset: calc(-1 * var(--page-pad-y)) calc(-1 * var(--page-pad-x));
}
body.dark-mode .decor-section-page::before,
body.dark-mode .index-page::before,
body.dark-mode .dict-page::before {
    top: calc(-600px - var(--page-pad-y));
    bottom: auto;
    height: calc(100% + var(--page-pad-y) * 2 + 600px);
    will-change: transform;
    transform: translateZ(0);
    animation: plmSkyDrift 380s linear infinite;   
}
@keyframes plmSkyDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 600px, 0); }
}
@keyframes plmStarDrift {
    from { background-position: 0 0; }
    to   { background-position: 0 300px; }   
}

.paper:not(.onstage) .plumeria-page::before,
.paper:not(.onstage) .decor-section-page::before,
.paper:not(.onstage) .index-page::before,
.paper:not(.onstage) .dict-page::before,
body.flipping .plumeria-page::before,
body.flipping .decor-section-page::before,
body.flipping .index-page::before,
body.flipping .dict-page::before {
    animation-play-state: paused !important;
}
body.dark-mode .decor-section-page > *,
body.dark-mode .index-page > *,
body.dark-mode .dict-page > * { position: relative; z-index: 1; }
/* La regla `> *` de arriba (sube el contenido sobre el starfield) tambien pegaba a
   los BOTONES ABSOLUTOS que cuelgan directo de la pagina (guia de acordes, Aa/zoom,
   T): en oscuro pasaban a `relative` y caian al flujo (abajo-izq, tamano/pos malos).
   Se les restaura `absolute`. Solo pasa en index/dict/decor (en cantos van en .footer). */
body.dark-mode .index-page > .guide-btn,
body.dark-mode .index-page > .zoom-toggle,
body.dark-mode .index-page > .transpose-btn,
body.dark-mode .dict-page > .guide-btn,
body.dark-mode .dict-page > .zoom-toggle,
body.dark-mode .dict-page > .transpose-btn,
body.dark-mode .decor-section-page > .zoom-toggle {
    position: absolute;
}
body.dark-mode .plumeria-page > .plumeria-wrap { z-index: 1; }

/* ===== Intento 3 (Samsung/Android, modo oscuro) ===== */
/* 1) El contenido de una pagina oscura que NO esta en escena no se pinta: mata el
   TRASLAPE (se veian dos rangos del indice encimados = la pagina vecina sangraba).
   Durante el flip (.turning) SI se ve, para que la animacion muestre el contenido. */
body.dark-mode .paper:not(.onstage):not(.turning) .index-content,
body.dark-mode .paper:not(.onstage):not(.turning) .dict-content,
body.dark-mode .paper:not(.onstage):not(.turning) .decor-section-content {
    visibility: hidden;
}
/* 2) Cada contenido oscuro en su PROPIA capa bien acotada: evita el paint parcial
   (la mitad de arriba de la lista quedaba sin pintar y se veia el cielo). */
body.dark-mode .index-content,
body.dark-mode .dict-content,
body.dark-mode .decor-section-content {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    isolation: isolate;
}
/* 3) Aisla el raster del starfield para que la animacion del bitmap del arbol (u otra
   pagina) no lo obligue a repintar cada frame (estrellas "flapeando" en Plumeria). */
body.dark-mode .plumeria-page::before,
body.dark-mode .decor-section-page::before,
body.dark-mode .index-page::before,
body.dark-mode .dict-page::before {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ===== Cielo REDUCIDO GENERAL (html.sky-lite fija = todos, incl. WebKit/iOS) =====
   La capa del starfield se acota al tamano de la pagina (sin el +600px que la volvia
   enorme y el compositor teselaba/pintaba a medias) y se deja ESTATICA (sin drift):
   se van los cachitos, el medio-negro y el churn en cualquier GPU. Siguen las 70 estrellas. */
.sky-lite body.dark-mode .plumeria-page::before,
.sky-lite body.dark-mode .decor-section-page::before,
.sky-lite body.dark-mode .index-page::before,
.sky-lite body.dark-mode .dict-page::before,
.sky-lite body.dark-mode .image-page::after {
    inset: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    height: 100% !important;
    animation: none !important;
    will-change: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
}
/* Bandas fijas #starfield: sin titileo ni drift = mata el "flapeo rapido" en Plumeria. */
.sky-lite #starfield .sf-layer,
.sky-lite #starfield .sf-shoot {
    animation: none !important;
    will-change: auto !important;
}
body.dark-mode .paper.turning .plumeria-page::before,
body.dark-mode .paper.turning .decor-section-page::before,
body.dark-mode .paper.turning .index-page::before,
body.dark-mode .paper.turning .dict-page::before { opacity: 1; }

@media (prefers-reduced-motion:reduce){
    body.dark-mode .plumeria-page::before,
    body.dark-mode .decor-section-page::before,
    body.dark-mode .index-page::before,
    body.dark-mode .dict-page::before { animation: none; }
}

body.dark-mode .plumeria-page::after,
body.dark-mode .decor-section-page::after,
body.dark-mode .index-page::after,
body.dark-mode .dict-page::after {
    content: "";
    position: absolute;
    top: 12%;
    left: 72%;
    width: 70px;
    height: 1.5px;
    background: linear-gradient(90deg,
        rgba(160,190,255,0),
        rgba(205,225,255,0.5) 30%,
        rgba(255,255,255,0.9));
    border-radius: 0 1px 1px 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    will-change: transform, opacity;
    animation: pageShoot 11s linear infinite;
}
body.dark-mode .decor-section-page::after { animation-delay: 1s; }
body.dark-mode .index-page::after { animation-delay: 4.5s; }
body.dark-mode .dict-page::after { animation-delay: 7.5s; }
body.dark-mode .plumeria-page::after,
body.dark-mode .index-page::after       { --shoot-rot: 14deg;  left: 8%;  top: 15%; }
body.dark-mode .decor-section-page::after,
body.dark-mode .dict-page::after        { --shoot-rot: 166deg; left: 74%; top: 11%; }

@keyframes pageShoot {
    0%, 92%   { opacity: 0; transform: rotate(var(--shoot-rot, 14deg)) translate(0, 0); }
    92.6%     { opacity: 1; transform: rotate(var(--shoot-rot, 14deg)) translate(40px, 0); }
    96.5%     { opacity: 1; transform: rotate(var(--shoot-rot, 14deg)) translate(300px, 0); }
    97.3%     { opacity: 0; transform: rotate(var(--shoot-rot, 14deg)) translate(330px, 0); }
    100%      { opacity: 0; transform: rotate(var(--shoot-rot, 14deg)) translate(330px, 0); }
}
@media (prefers-reduced-motion:reduce){
    body.dark-mode .plumeria-page::after,
    body.dark-mode .decor-section-page::after,
    body.dark-mode .index-page::after,
    body.dark-mode .dict-page::after { animation: none; }
}

body.dark-mode .image-page::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: rgba(8, 8, 18, 0.42);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><g fill='%23cfe0ff'><circle cx='510' cy='593' r='5.5' opacity='0.11'/><circle cx='300' cy='106' r='5.7' opacity='0.14'/><circle cx='520' cy='26' r='6.9' opacity='0.1'/><circle cx='344' cy='65' r='5.9' opacity='0.09'/><circle cx='229' cy='99' r='5.8' opacity='0.08'/><circle cx='98' cy='449' r='6.4' opacity='0.1'/><circle cx='555' cy='544' r='5.8' opacity='0.09'/><circle cx='469' cy='312' r='7.1' opacity='0.12'/><circle cx='148' cy='242' r='7.0' opacity='0.1'/></g><g fill='%23ffffff'><circle cx='127' cy='531' r='1.45' opacity='0.75'/><circle cx='598' cy='379' r='0.76' opacity='0.59'/><circle cx='13' cy='215' r='1.65' opacity='0.99'/><circle cx='165' cy='302' r='0.6' opacity='0.66'/><circle cx='564' cy='289' r='1.25' opacity='0.89'/><circle cx='415' cy='583' r='1.44' opacity='0.73'/><circle cx='265' cy='538' r='1.01' opacity='0.62'/><circle cx='431' cy='58' r='1.36' opacity='0.75'/><circle cx='375' cy='29' r='1.15' opacity='0.73'/><circle cx='510' cy='593' r='1.61' opacity='0.9'/><circle cx='57' cy='495' r='1.18' opacity='0.9'/><circle cx='366' cy='511' r='0.72' opacity='0.7'/><circle cx='365' cy='401' r='1.38' opacity='0.9'/><circle cx='267' cy='41' r='0.61' opacity='0.71'/><circle cx='337' cy='338' r='0.95' opacity='0.6'/><circle cx='300' cy='106' r='1.69' opacity='0.96'/><circle cx='476' cy='578' r='0.67' opacity='0.65'/><circle cx='244' cy='592' r='1.3' opacity='0.84'/><circle cx='87' cy='36' r='1.16' opacity='0.9'/><circle cx='541' cy='326' r='1.42' opacity='0.88'/><circle cx='172' cy='575' r='1.3' opacity='0.73'/><circle cx='189' cy='115' r='0.61' opacity='0.72'/><circle cx='385' cy='178' r='1.3' opacity='0.85'/><circle cx='439' cy='523' r='1.38' opacity='0.81'/><circle cx='102' cy='265' r='1.18' opacity='0.73'/><circle cx='520' cy='26' r='2.02' opacity='0.91'/><circle cx='544' cy='232' r='0.85' opacity='0.53'/><circle cx='598' cy='169' r='2.1' opacity='0.99'/><circle cx='409' cy='231' r='0.65' opacity='0.74'/><circle cx='122' cy='412' r='0.61' opacity='0.6'/><circle cx='122' cy='340' r='0.99' opacity='0.68'/><circle cx='58' cy='341' r='1.19' opacity='0.81'/><circle cx='49' cy='120' r='1.41' opacity='0.89'/><circle cx='505' cy='77' r='1.27' opacity='0.86'/><circle cx='432' cy='250' r='0.72' opacity='0.72'/><circle cx='256' cy='426' r='1.18' opacity='0.86'/><circle cx='5' cy='65' r='0.86' opacity='0.62'/><circle cx='331' cy='432' r='1.28' opacity='0.88'/><circle cx='85' cy='150' r='1.44' opacity='0.77'/><circle cx='14' cy='407' r='0.87' opacity='0.51'/><circle cx='223' cy='258' r='0.91' opacity='0.57'/><circle cx='301' cy='166' r='1.23' opacity='0.75'/><circle cx='344' cy='65' r='1.73' opacity='0.98'/><circle cx='540' cy='354' r='1.03' opacity='0.6'/><circle cx='128' cy='94' r='0.74' opacity='0.66'/><circle cx='264' cy='202' r='0.97' opacity='0.66'/><circle cx='505' cy='170' r='0.82' opacity='0.71'/><circle cx='580' cy='268' r='0.98' opacity='0.52'/><circle cx='229' cy='99' r='1.71' opacity='0.93'/><circle cx='98' cy='449' r='1.87' opacity='0.97'/><circle cx='555' cy='544' r='1.7' opacity='0.93'/><circle cx='217' cy='286' r='0.88' opacity='0.72'/><circle cx='340' cy='529' r='0.62' opacity='0.61'/><circle cx='403' cy='313' r='1.03' opacity='0.61'/><circle cx='368' cy='82' r='1.01' opacity='0.68'/><circle cx='198' cy='370' r='0.99' opacity='0.63'/><circle cx='598' cy='497' r='1.18' opacity='0.85'/><circle cx='474' cy='175' r='0.69' opacity='0.53'/><circle cx='340' cy='598' r='1.69' opacity='0.99'/><circle cx='473' cy='457' r='0.82' opacity='0.7'/><circle cx='469' cy='312' r='2.09' opacity='1.0'/><circle cx='148' cy='242' r='2.06' opacity='0.95'/><circle cx='22' cy='582' r='1.46' opacity='0.87'/><circle cx='235' cy='367' r='1.02' opacity='0.63'/><circle cx='517' cy='459' r='0.7' opacity='0.51'/><circle cx='40' cy='162' r='0.62' opacity='0.58'/><circle cx='55' cy='430' r='0.89' opacity='0.6'/><circle cx='288' cy='363' r='0.85' opacity='0.53'/><circle cx='483' cy='408' r='1.27' opacity='0.92'/><circle cx='200' cy='8' r='0.84' opacity='0.6'/></g></svg>");
    background-repeat: repeat;
    background-size: 600px 600px;
    /* Samsung/Android: sin will-change (misma razon que arriba: evita paint parcial). */
    animation: plmStarDrift600 380s linear infinite;
    z-index: 1;
}
@media (prefers-reduced-motion:reduce){
    body.dark-mode .image-page::after{ animation:none; }
}

@supports not (container-type: size) {
    .plumeria-sky { display: none; }
}

.paper:not(.near) .page-sky,
.paper.flipped:not(.turning) .page-sky,
.paper:not(.near) .plumeria-wrap,
.paper.flipped:not(.turning) .plumeria-wrap {
    display: none;
}
body.flipping .plumeria-page #sway,
body.flipping .plumeria-page #canopySway,
body.flipping .plumeria-page .leaf-pop,
body.flipping .plumeria-page .flower-pop,
body.flipping .plumeria-page .blade,
body.flipping .plumeria-page .bush,
body.flipping .plumeria-page .butterfly,
body.flipping .plumeria-page .bwings,
body.flipping .plumeria-cloud,
body.flipping .plumeria-flying-bird {
    animation-play-state: paused !important;
}
.paper.near:not(.onstage) .page-sky .butterfly,
.paper.near:not(.onstage) .page-sky .bwings,
.paper.near:not(.onstage) .plumeria-page #sway,
.paper.near:not(.onstage) .plumeria-page #canopySway,
.paper.near:not(.onstage) .plumeria-page .leaf-pop,
.paper.near:not(.onstage) .plumeria-page .flower-pop,
.paper.near:not(.onstage) .plumeria-page .blade,
.paper.near:not(.onstage) .plumeria-page .bush,
.paper.near:not(.onstage) .plumeria-page .butterfly,
.paper.near:not(.onstage) .plumeria-page .bwings,
.paper.near:not(.onstage) .plumeria-page .firefly,
.paper.near:not(.onstage) .plumeria-cloud,
.paper.near:not(.onstage) .plumeria-flying-bird {
    animation-play-state: paused !important;
}
body.flipping .paper.near .page-sky .butterfly,
body.flipping .paper.near .page-sky .bwings {
    animation-play-state: running !important;
}
body.intro-active #starfield,
body.intro-active .plumeria-page #sway,
body.intro-active .plumeria-page #canopySway,
body.intro-active .plumeria-page .leaf-pop,
body.intro-active .plumeria-page .flower-pop,
body.intro-active .plumeria-page .blade,
body.intro-active .plumeria-page .bush,
body.intro-active .plumeria-page .butterfly,
body.intro-active .plumeria-page .bwings,
body.intro-active .plumeria-page .firefly,
body.intro-active .plumeria-cloud,
body.intro-active .plumeria-flying-bird,
body.intro-active .page-sky .butterfly,
body.intro-active .page-sky .bwings {
    animation-play-state: paused !important;
}
body.dark-mode .paper:not(.near) .plumeria-page::before,
body.dark-mode .paper:not(.near) .decor-section-page::before,
body.dark-mode .paper:not(.near) .index-page::before,
body.dark-mode .paper:not(.near) .dict-page::before,
body.dark-mode .paper:not(.near) .plumeria-page::after,
body.dark-mode .paper:not(.near) .decor-section-page::after,
body.dark-mode .paper:not(.near) .index-page::after,
body.dark-mode .paper:not(.near) .dict-page::after,
body.dark-mode .paper:not(.near) .image-page::after,
body.dark-mode .paper.flipped:not(.turning) .plumeria-page::before,
body.dark-mode .paper.flipped:not(.turning) .decor-section-page::before,
body.dark-mode .paper.flipped:not(.turning) .index-page::before,
body.dark-mode .paper.flipped:not(.turning) .dict-page::before,
body.dark-mode .paper.flipped:not(.turning) .plumeria-page::after,
body.dark-mode .paper.flipped:not(.turning) .decor-section-page::after,
body.dark-mode .paper.flipped:not(.turning) .index-page::after,
body.dark-mode .paper.flipped:not(.turning) .dict-page::after,
body.dark-mode .paper.flipped:not(.turning) .image-page::after {
    animation-play-state: paused;
}

#orientationOverlay:not(.show) .plumeria-wrap,
#desktopGate:not(.show) .plumeria-wrap {
    display: none;
}

.gesture-toggle-track {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.gesture-toggle-thumb {
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease;
}

.gesture-toggle.active .gesture-toggle-thumb {
    left: calc(100% - 25px);
}

.gesture-emoji {
    position: absolute;
    font-size: 13px;
    line-height: 1;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.gesture-emoji.on {
    opacity: 1;
}

.gesture-emoji.off {
    opacity: 0;
}

.gesture-toggle.active .gesture-emoji.on {
    opacity: 0;
}

.gesture-toggle.active .gesture-emoji.off {
    opacity: 1;
}

.btn-nav.gesture-pulse {
    background-color: var(--chord) !important;
    color: #fff !important;
    transform: scale(1.15) !important;
    box-shadow: 0 0 15px var(--chord) !important;
}

body.gestures-on *,
body.gestures-on *::before,
body.gestures-on *::after {
    animation-play-state: paused !important;
}

.gesture-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.gesture-modal.show {
    opacity: 1;
    pointer-events: auto;
}

.gesture-modal-content {
    background: var(--page-bg);
    color: var(--page-text);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--page-border);
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    text-align: center;
}

.gesture-modal.show .gesture-modal-content {
    transform: scale(1);
}

.gesture-modal-content h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.gesture-modal-content p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 12px;
    opacity: 0.9;
}

.gesture-modal-note {
    font-size: 0.82rem !important;
    background: rgba(0, 0, 0, 0.05);
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--page-text);
    opacity: 0.8;
}

body.dark-mode .gesture-modal-note {
    background: rgba(255, 255, 255, 0.05);
}

.gesture-legend {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.gesture-legend li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    line-height: 1.35;
    background: rgba(0, 0, 0, 0.05);
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--page-text);
}
body.dark-mode .gesture-legend li {
    background: rgba(255, 255, 255, 0.05);
}
.gesture-legend .gl-icon {
    font-size: 1.5rem;
    flex: 0 0 auto;
    width: 1.7em;
    text-align: center;
}

.gesture-modal-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.gesture-modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.gesture-modal-btn.cancel {
    background: transparent;
    color: var(--page-text);
    border: 1px solid var(--page-border);
}

.gesture-modal-btn.cancel:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.dark-mode .gesture-modal-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.05);
}

.gesture-modal-btn.confirm {
    background: var(--chord);
    color: #fff;
}

.gesture-modal-btn.confirm:hover {
    filter: brightness(1.1);
}

.gesture-modal-btn:active {
    transform: scale(0.97);
}

#toastContainer {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 3000;
    pointer-events: none;
}

.toast-message {
    background: color-mix(in srgb, var(--page-bg, #fbf9f2) 90%, #cfc7b4);
    color: color-mix(in srgb, var(--page-text, #3f3220) 58%, transparent);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(140, 120, 80, 0.20);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-message.show {
    opacity: 0.9;
    transform: translateY(0);
}

.gesture-preview-container {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    width: 132px !important;
    height: 99px !important;
    opacity: 0 !important;
    background: #000 !important;
    border: 2px solid rgba(255,255,255,0.35);
    border-radius: 10px !important;
    overflow: hidden !important;
    z-index: 9990 !important;
    pointer-events: none !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
    transition: opacity 0.25s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gesture-preview-container.show {
    opacity: 0.92 !important;
}

.gesture-preview-container.hand-detected {
    border-color: #2ecc71 !important;
    box-shadow: 0 0 16px #2ecc71 !important;
}

.gesture-preview-container video,
.gesture-hidden-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transform: scaleX(-1) !important; 
}


#orientationOverlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--page-bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s, background-color 0.35s ease;
}

#orientationOverlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease, visibility 0s linear 0s, background-color 0.35s ease;
}

#orientationOverlay .orientation-card {
    transform: scale(0.92) translateY(8px);
    transition: transform 0.4s cubic-bezier(0.2, 0.72, 0.16, 1);
}

#orientationOverlay.show .orientation-card {
    transform: scale(1) translateY(0);
}

#orientationOverlay .orientation-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.orientation-dim {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: rgba(251, 249, 242, 0.08);
    transition: background 0.35s ease;
}

body.dark-mode .orientation-dim {
    background: rgba(10, 10, 10, 0.15);
}

.orientation-card {
    position: relative;
    z-index: 10;
    text-align: center;
    background: rgba(255, 253, 248, 0.22);
    backdrop-filter: blur(3px) saturate(1.15);
    -webkit-backdrop-filter: blur(3px) saturate(1.15);
    border-radius: 24px;
    padding: 26px 34px 22px;
    max-width: 310px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(200, 135, 120, 0.35);
    overflow: hidden;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.orientation-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -25%;
    width: 150%;
    height: 100%;
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.0) 70%
    );
    pointer-events: none;
}

body.dark-mode .orientation-card {
    background: rgba(20, 15, 12, 0.28);
    backdrop-filter: blur(3px) saturate(1.15);
    -webkit-backdrop-filter: blur(3px) saturate(1.15);
    border-color: rgba(215, 154, 140, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

body.dark-mode .orientation-card::before {
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.0) 70%
    );
}

.orientation-icon {
    font-size: 3.2rem;
    line-height: 1;
    display: inline-block;
    margin-bottom: 14px;
    animation: orientRotate 3s ease-in-out infinite;
}

@keyframes orientRotate {
    0%, 10%  { transform: rotate(0deg); }
    30%, 70% { transform: rotate(-90deg); }
    90%, 100% { transform: rotate(0deg); }
}

.orientation-card h2 {
    font-family: -apple-system, "SF Pro Display", "Segoe UI", Arial, sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #1e1510;
    margin-bottom: 10px;
    text-shadow:
        0 1px 0 rgba(255, 253, 248, 0.9),
        0 0 6px rgba(255, 253, 248, 0.85),
        0 0 14px rgba(255, 253, 248, 0.6);
}

body.dark-mode .orientation-card h2 {
    color: #ffffff;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.9),
        0 0 6px rgba(0, 0, 0, 0.85),
        0 0 14px rgba(0, 0, 0, 0.6);
}

.orientation-card p {
    font-family: -apple-system, "SF Pro Text", "Segoe UI", Arial, sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: #2a1f1a;
    line-height: 1.5;
    margin: 0;
    text-shadow:
        0 1px 0 rgba(255, 253, 248, 0.85),
        0 0 6px rgba(255, 253, 248, 0.8);
}

body.dark-mode .orientation-card p {
    color: #f5ece4;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.85),
        0 0 6px rgba(0, 0, 0, 0.75);
}

.orientation-card strong {
    color: #a04d3b;
    font-weight: 800;
}

body.dark-mode .orientation-card strong {
    color: #f0b5a5;
}


#desktopGate {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--page-bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s, background-color 0.35s ease;
}
#desktopGate.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease, visibility 0s linear 0s, background-color 0.35s ease;
}
#desktopGate .orientation-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
#desktopGate .orientation-card {
    transform: scale(0.92) translateY(8px);
    transition: transform 0.4s cubic-bezier(0.2, 0.72, 0.16, 1);
}
#desktopGate.show .orientation-card {
    transform: scale(1) translateY(0);
}

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


svg.cover-silhouette {
    display: block;
    height: auto;
    overflow: visible;
}

.cover-page .cover-title {
    -webkit-mask-image: linear-gradient(100deg,
        #000 0%, #000 42%,
        rgba(0,0,0,0.85) 48%,
        rgba(0,0,0,0.35) 55%,
        transparent 62%);
    -webkit-mask-size: 260% 100%;
    -webkit-mask-position: 100% 0;
    -webkit-mask-repeat: no-repeat;
    mask-image: linear-gradient(100deg,
        #000 0%, #000 42%,
        rgba(0,0,0,0.85) 48%,
        rgba(0,0,0,0.35) 55%,
        transparent 62%);
    mask-size: 260% 100%;
    mask-position: 100% 0;
    mask-repeat: no-repeat;
    will-change: mask-position, transform;
}

.cover-silhouette .virgin-stroke {
    stroke: #010101;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 9300;
    stroke-dashoffset: 9300;
    opacity: 0;
}

.cover-silhouette .virgin-stars {
    opacity: 0;
}

.cover-page.cover-animate .cover-title {
    animation:
        coverTitleReveal 3.4s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards,
        coverTitleSway   3.4s ease-in-out                     0.4s forwards;
}

.cover-page.cover-animate .cover-silhouette .virgin-stroke {
    opacity: 1;
    animation: coverSilhouetteDraw 5.5s cubic-bezier(0.4, 0, 0.2, 1) 7.5s forwards;
}

.cover-page.cover-animate .cover-silhouette .virgin-stars {
    animation: coverStarsFadeIn 1.5s ease 12.5s forwards;
}

.cover-silhouette .virgin-orbit {
    transform-box: view-box;
    transform-origin: 338px 129px;
}
.cover-page.cover-animate .virgin-orbit {
    animation: virginOrbit 25s linear infinite;
}
.cover-page.cover-animate .virgin-stars path {
    animation: virginTwinkle 2.8s ease-in-out infinite;
}
.cover-page.cover-animate .virgin-stars path:nth-of-type(1)  { animation-duration: 2.2s; }
.cover-page.cover-animate .virgin-stars path:nth-of-type(2)  { animation-duration: 3.0s; animation-delay: -0.3s; }
.cover-page.cover-animate .virgin-stars path:nth-of-type(3)  { animation-duration: 2.6s; animation-delay: -0.7s; }
.cover-page.cover-animate .virgin-stars path:nth-of-type(4)  { animation-duration: 3.4s; animation-delay: -1.2s; }
.cover-page.cover-animate .virgin-stars path:nth-of-type(5)  { animation-duration: 2.1s; animation-delay: -0.1s; }
.cover-page.cover-animate .virgin-stars path:nth-of-type(6)  { animation-duration: 3.7s; animation-delay: -0.6s; }
.cover-page.cover-animate .virgin-stars path:nth-of-type(7)  { animation-duration: 2.8s; animation-delay: -1.0s; }
.cover-page.cover-animate .virgin-stars path:nth-of-type(8)  { animation-duration: 3.2s; animation-delay: -0.4s; }
.cover-page.cover-animate .virgin-stars path:nth-of-type(9)  { animation-duration: 2.4s; animation-delay: -0.8s; }
.cover-page.cover-animate .virgin-stars path:nth-of-type(10) { animation-duration: 3.5s; animation-delay: -1.4s; }
.cover-page.cover-animate .virgin-stars path:nth-of-type(11) { animation-duration: 2.7s; animation-delay: -0.2s; }
.cover-page.cover-animate .virgin-stars path:nth-of-type(12) { animation-duration: 3.1s; animation-delay: -0.7s; }
@keyframes virginOrbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes virginTwinkle {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}
.paper.flipped:not(.turning) .virgin-orbit,
.paper.flipped:not(.turning) .virgin-stars path,
.paper:not(.near) .virgin-orbit,
.paper:not(.near) .virgin-stars path {
    animation-play-state: paused;
}

@keyframes coverTitleReveal {
    0%   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    100% { -webkit-mask-position: 0% 0;   mask-position: 0% 0;   }
}

@keyframes coverTitleSway {
    0%,100% { transform: translateY(0)     rotate(0);       }
    15%     { transform: translateY(-2px)  rotate(-0.4deg); }
    35%     { transform: translateY(2px)   rotate(0.5deg);  }
    55%     { transform: translateY(-1px)  rotate(-0.3deg); }
    75%     { transform: translateY(1.5px) rotate(0.35deg); }
}

@keyframes coverSilhouetteDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes coverStarsFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cover-page.cover-drawn .cover-title {
    animation: none;
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
}
.cover-page.cover-drawn .cover-silhouette .virgin-stroke {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
}
.cover-page.cover-drawn .cover-silhouette .virgin-stars {
    animation: none;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .cover-page.cover-animate .cover-title,
    .cover-page.cover-animate .cover-silhouette .virgin-stroke,
    .cover-page.cover-animate .cover-silhouette .virgin-stars,
    .cover-page.cover-animate .virgin-orbit,
    .cover-page.cover-animate .virgin-stars path {
        animation: none;
    }
    .cover-page .cover-title {
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
    }
    .cover-silhouette .virgin-stroke {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    .cover-silhouette .virgin-stars {
        opacity: 1;
    }
    .cover-page.cover-animate .cover-liturgy svg {
        animation: none;
    }
    .cover-liturgy svg {
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
    }
}

#welcomeIntro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: radial-gradient(ellipse at 50% 0%, #0d1b2a 0%, #070d15 50%, #030508 100%);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    opacity: 1;
    transition: opacity 0.7s ease-out;
    pointer-events: auto;
}
#welcomeIntro.wi-hide {
    opacity: 0;
    pointer-events: none;
}

.wi-sky-stars {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1px 1px at 10% 15%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 25% 8%, rgba(255,255,255,0.9) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 40% 22%, #fff 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 55% 5%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 70% 18%, #fff 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 85% 12%, rgba(224,255,255,0.9) 50%, transparent 100%),
        radial-gradient(0.7px 0.7px at 15% 35%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 32% 42%, #fff 50%, transparent 100%),
        radial-gradient(0.9px 0.9px at 48% 38%, rgba(255,255,255,0.8) 50%, transparent 100%),
        radial-gradient(1.1px 1.1px at 62% 30%, #fff 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 78% 45%, rgba(224,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 92% 28%, rgba(255,255,255,0.85) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 5% 55%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(0.9px 0.9px at 20% 62%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 38% 58%, rgba(224,255,255,0.8) 50%, transparent 100%),
        radial-gradient(0.7px 0.7px at 52% 65%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1.1px 1.1px at 68% 52%, #fff 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 82% 60%, rgba(255,255,255,0.75) 50%, transparent 100%),
        radial-gradient(1px 1px at 95% 48%, rgba(224,255,255,0.65) 50%, transparent 100%),
        radial-gradient(0.9px 0.9px at 8% 75%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 28% 80%, #fff 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 45% 72%, rgba(224,255,255,0.8) 50%, transparent 100%),
        radial-gradient(0.7px 0.7px at 58% 85%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 75% 78%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 88% 70%, #fff 50%, transparent 100%),
        radial-gradient(1.1px 1.1px at 18% 92%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(0.9px 0.9px at 42% 95%, rgba(224,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 65% 90%, rgba(255,255,255,0.65) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 90% 88%, rgba(255,255,255,0.55) 50%, transparent 100%);
    animation: wiStarsTwinkle 3s ease-in-out infinite alternate;
}
@keyframes wiStarsTwinkle {
    0%   { opacity: 0.7; }
    100% { opacity: 1; }
}

.wi-lead-star {
    position: absolute;
    left: 50%; top: 0;
    width: 40px; height: 40px;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    animation:
        wiLeadAppear 0.3s ease-out 0.2s forwards,
        wiLeadDescend 1.3s cubic-bezier(0.4, 0, 0.6, 1) 0.5s forwards;
    will-change: transform, opacity;
}
.wi-lead-star::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 30px; height: 30px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #fff 0%, #E0FFFF 45%, rgba(224,255,255,0) 100%);
    border-radius: 50%;
    box-shadow:
        0 0 10px 5px rgba(255,255,255,0.9),
        0 0 25px 12px rgba(224,255,255,0.45),
        0 0 60px 25px rgba(200,220,255,0.18),
        0 0 100px 50px rgba(180,200,240,0.06);
    animation: wiStarPulse 0.8s ease-in-out infinite;
}
.wi-spike {
    position: absolute;
    top: 50%; left: 50%;
    pointer-events: none;
}
.wi-spike-v {
    width: 1.6px; height: 90px;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(224,255,255,0.05) 20%,
        rgba(224,255,255,0.5) 38%,
        rgba(255,255,255,0.95) 48%,
        #fff 50%,
        rgba(255,255,255,0.95) 52%,
        rgba(224,255,255,0.5) 62%,
        rgba(224,255,255,0.05) 80%,
        transparent 100%);
    animation: wiSpikePulse 1.6s ease-in-out infinite;
}
.wi-spike-h {
    width: 120px; height: 1px;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(224,255,255,0.03) 15%,
        rgba(224,255,255,0.35) 35%,
        rgba(255,255,255,0.9) 47%,
        #fff 50%,
        rgba(255,255,255,0.9) 53%,
        rgba(224,255,255,0.35) 65%,
        rgba(224,255,255,0.03) 85%,
        transparent 100%);
    animation: wiSpikePulse 1.6s ease-in-out infinite 0.3s;
}
@keyframes wiSpikePulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scaleX(1) scaleY(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scaleX(1.15) scaleY(1.15); }
}
@keyframes wiLeadAppear {
    to { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
}
@keyframes wiLeadDescend {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
    55%  { opacity: 1; transform: translate(-50%, calc(50vh - 50%)) scale(1.8); }
    65%  { transform: translate(-50%, calc(50vh - 50%)) scale(4.2); }
    73%  { transform: translate(-50%, calc(50vh - 50%)) scale(2.5); }
    82%  { transform: translate(-50%, calc(50vh - 50%)) scale(6.2); }
    90%  { opacity: 0.85; transform: translate(-50%, calc(50vh - 50%)) scale(4.0); }
    100% { opacity: 0; transform: translate(-50%, calc(50vh - 50%)) scale(11.0); }
}
@keyframes wiStarPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.22); }
}
.wi-trail {
    position: absolute;
    left: 50%; top: 0;
    width: 2px;
    height: 50vh;
    background: linear-gradient(180deg,
        rgba(224,255,255,0) 0%,
        rgba(224,255,255,0.85) 100%);
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
    opacity: 0;
    animation: wiTrailAnim 1.3s cubic-bezier(0.4, 0, 0.6, 1) 0.5s forwards;
    z-index: 2;
    pointer-events: none;
}
@keyframes wiTrailAnim {
    0%   { transform: translateX(-50%) scaleY(0); opacity: 0; }
    15%  { opacity: 1; }
    55%  { transform: translateX(-50%) scaleY(1); opacity: 1; }
    100% { transform: translateX(-50%) scaleY(1); opacity: 0; }
}

.cover-butterflies {
    position: absolute;
    top: 6%;
    left: 5%;
    right: 5%;
    height: 42%;
    pointer-events: none;
    z-index: 12;
    overflow: visible;
    container-type: size;
}
.cover-butterfly {
    position: absolute;
    top: 50%;
    left: 0;
    opacity: 0;
    will-change: transform, opacity;
}
@supports not (container-type: size) {
    .cover-butterflies { display: none; }
}
.cover-butterfly svg {
    display: block;
    width: 100%; height: 100%;
    transform-origin: 50% 50%;
    animation: covFlap 0.18s ease-in-out infinite alternate;
}
@keyframes covFlap {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0.35); }
}
.cover-butterfly.cb-small  { width: 20px; height: 20px; }
.cover-butterfly.cb-medium { width: 30px; height: 30px; }
.cover-butterfly.cb-large  { width: 33px; height: 33px; }
@keyframes covFlyAcross {
    0%   { opacity: 0; transform: translate(-15cqw, 0); }
    8%   { opacity: 1; }
    25%  { transform: translate(20cqw, -18px); }
    50%  { transform: translate(45cqw, 14px); }
    75%  { transform: translate(70cqw, -12px); }
    92%  { opacity: 1; }
    100% { opacity: 0; transform: translate(115cqw, 4px); }
}

.cover-flowers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 500;
}
.cover-flower {
    position: absolute;
    top: -80px;
    opacity: 0;
    will-change: transform, opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.cover-flower svg { width: 100%; height: 100%; display: block; }
@keyframes covFallA {
    0%   { opacity: 0; transform: translateY(0) translateX(0) rotate(0deg); }
    10%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(120vh) translateX(80px) rotate(540deg); }
}
@keyframes covFallB {
    0%   { opacity: 0; transform: translateY(0) translateX(0) rotate(0deg); }
    10%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(120vh) translateX(-70px) rotate(-620deg); }
}


.morning-star {
    position: fixed;
    left: max(52px, calc(50% - var(--book-width) / 2 + 30px));
    top: 36px;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    z-index: 180;
    transition: opacity 1.4s ease-out;
    will-change: opacity;
}
.morning-star.on { opacity: 1; }
body:not(.dark-mode) .morning-star:not(.on) .ms-core,
body:not(.dark-mode) .morning-star:not(.on) .ms-halo,
body:not(.dark-mode) .morning-star:not(.on) .ms-spike {
    animation-play-state: paused;
}
.morning-star .ms-core {
    position: absolute;
    inset: 30%;
    background: radial-gradient(circle, #ffffff 0%, #E0FFFF 40%, rgba(224,255,255,0.4) 70%, transparent 100%);
    border-radius: 50%;
    animation: msCorePulse 3.0s ease-in-out infinite;
}
.morning-star .ms-halo {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(224,255,255,0.28) 30%, rgba(224,255,255,0.08) 55%, transparent 75%);
    border-radius: 50%;
    animation: msHaloPulse 3.4s ease-in-out infinite;
}
.ms-spike {
    position: absolute;
    top: 50%; left: 50%;
    pointer-events: none;
}
.ms-spike-v {
    width: 1px; height: 60px;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(224,255,255,0.05) 20%,
        rgba(224,255,255,0.45) 38%,
        rgba(255,255,255,0.9) 48%,
        #fff 50%,
        rgba(255,255,255,0.9) 52%,
        rgba(224,255,255,0.45) 62%,
        rgba(224,255,255,0.05) 80%,
        transparent 100%);
    animation: msSpikeV 3.2s ease-in-out infinite;
}
.ms-spike-h {
    width: 80px; height: 0.8px;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(224,255,255,0.03) 15%,
        rgba(224,255,255,0.3) 35%,
        rgba(255,255,255,0.85) 47%,
        #fff 50%,
        rgba(255,255,255,0.85) 53%,
        rgba(224,255,255,0.3) 65%,
        rgba(224,255,255,0.03) 85%,
        transparent 100%);
    animation: msSpikeH 3.2s ease-in-out infinite 0.5s;
}
@keyframes msSpikeV {
    0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scaleY(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scaleY(1.1); }
}
@keyframes msSpikeH {
    0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scaleX(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scaleX(1.08); }
}
@keyframes msCorePulse {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50%      { transform: scale(1.18); opacity: 1; }
}
@keyframes msHaloPulse {
    0%, 100% { opacity: 0.8; }
    50%      { opacity: 1;   }
}

body.intro-fx-off .morning-star,
body.intro-fx-off .cover-flowers,
body.intro-fx-off .cover-butterflies {
    display: none !important;
}

body.dark-mode .morning-star {
    display: block !important;
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    #welcomeIntro { display: none !important; }
    .cover-butterflies, .cover-flowers, .morning-star { display: none !important; }
}

.ribbon-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.ribbon-layer.open {
    z-index: 9980;
    pointer-events: auto;
}
.ribbon-layer.hidden,
.ribbon-hit.hidden {
    display: none;
}

.rib {
    position: absolute;
    top: -13px;
    left: 26px;
    width: 20px;
    height: 76px;
    margin: 0;
    padding: 0;
    border: 0;
    display: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(180deg, var(--rib-hi) 0%, var(--rib-c) 40%, var(--rib-lo) 100%);
    border-radius: 2px 2px 0 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transform: translate(calc(var(--off, 0) * 4px), calc(var(--off, 0) * 3px));
    transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
                height 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
                width 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.22s ease;
}
.rib.show { display: block; }

.rib[data-slot="0"] { --rib-c: #9aa890; --rib-hi: #aebaa4; --rib-lo: #7d8c72; --rib-thread: #6f7c66; }
.rib[data-slot="1"] { --rib-c: #c89b8e; --rib-hi: #d8b0a4; --rib-lo: #ac8073; --rib-thread: #8f6c62; }
.rib[data-slot="2"] { --rib-c: #a897b9; --rib-hi: #bcaccb; --rib-lo: #8b7a9e; --rib-thread: #6f6081; }
.rib[data-slot="3"] { --rib-c: #849ab2; --rib-hi: #9bb0c6; --rib-lo: #687f97; --rib-thread: #566a7f; }
.rib[data-slot="4"] { --rib-c: #bba874; --rib-hi: #cdbb8b; --rib-lo: #9d8c5c; --rib-thread: #7f7149; }

.rib::before {
    content: "";
    position: absolute;
    inset: 2px 3px 0 3px;
    border-left: 2px dashed var(--rib-thread, rgba(255, 255, 255, 0.4));
    border-right: 2px dashed var(--rib-thread, rgba(255, 255, 255, 0.4));
    border-radius: 2px 2px 0 0;
    opacity: 0.85;
    pointer-events: none;
}

.ribbon-layer.open .rib {
    width: 28px;
    height: 230px;
    transform: translate(calc(var(--i, 0) * 38px), 0);
}

.rib-num {
    position: absolute;
    left: 50%;
    top: 96px;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center;
    white-space: nowrap;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5),
                 0 -1px 0 rgba(255, 255, 255, 0.42),
                 0 0 1px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease 0.12s;
    pointer-events: none;
}
.ribbon-layer.open .rib-num { opacity: 1; }
.rib.here .rib-num {
    top: 46%;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55),
                 0 -1px 0 rgba(255, 255, 255, 0.5),
                 0 0 1px rgba(0, 0, 0, 0.35);
    opacity: 1;
}
.rib.free .rib-num {
    transform: translate(-50%, -50%);
    font-size: 17px;
    top: 28px;
}

.rib-tip {
    position: absolute;
    left: 50%;
    bottom: 13px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease 0.14s;
}
.rib.pinned .rib-tip { opacity: 1; }

.rib-x {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 35px;
    transform: translateX(-50%) scale(0.6);
    width: 24px;
    height: 24px;
    font-size: 0;
    color: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease 0.14s, transform 0.2s ease 0.14s;
}
.rib-x::before,
.rib-x::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 17px;
    height: 0;
    border-top: 2.5px dashed var(--rib-x-red, #f5352a);
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7))
            drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.5))
            drop-shadow(0 1px 0.5px rgba(255, 255, 255, 0.3));
}
.rib-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.rib-x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.ribbon-layer.open .rib.pinned .rib-x {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    pointer-events: auto;
}

.ribbon-hit {
    position: absolute;
    top: -18px;
    left: 14px;
    width: 46px;
    height: 46px;
    z-index: 9979;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rib.pinned {
    height: calc(100% + var(--rbase, 42px) + var(--rank, 0) * var(--rstep, 17px));
}
.ribbon-layer:not(.open) .rib.pinned {
    width: 22px;
    transform: translateX(calc(var(--rank, 0) * 30px));
    pointer-events: auto;
}
.ribbon-layer.open .rib.here {
    height: calc(100% + 47px);
}
.ribbon-layer.at-cover { pointer-events: none; }
.ribbon-layer.at-cover .rib { cursor: default; }

.rib-paint {
    position: absolute;
    top: 46px;
    left: calc(26px + var(--n, 1) * 38px);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--page-bg, #fbf9f2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
    font-size: 17px;
    line-height: 34px;
    text-align: center;
    padding: 0;
    cursor: pointer;
    z-index: 9990;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rib-paint.hidden { display: none; }
.rib-paint[aria-pressed="true"] {
    background: var(--cover-2, #97a78c);
    box-shadow: 0 0 0 3px rgba(151, 167, 140, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
    transform: scale(1.06);
}
.ribbon-layer.painting .rib { cursor: pointer; }
.ribbon-layer.painting .rib::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2px 2px 0 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

.rib-palette {
    position: absolute;
    top: 220px;
    left: 10px;
    right: 10px;
    display: none;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    padding: 12px 12px 14px;
    background: var(--page-bg, #fbf9f2);
    border: 1px solid var(--page-border, #ddd8c9);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
    z-index: 9991;
}
.rib-palette.open { display: flex; }
.rib-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.18);
    padding: 0;
    cursor: pointer;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.15);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
}
.rib-swatch:hover { transform: scale(1.12); }
.rib-swatch.sel {
    box-shadow: 0 0 0 3px var(--page-bg, #fbf9f2), 0 0 0 5px var(--cover-3, #879979);
}

.rib-close {
    position: absolute;
    top: 0;
    left: calc(26px + var(--n, 1) * 38px);
    width: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--page-bg);
    color: var(--page-text);
    border: 1px solid var(--page-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
    transition: opacity 0.22s ease 0.1s, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.rib-close svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ribbon-layer.open .rib-close:not(.hidden) {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.rib-close:active { transform: scale(0.9); }

@keyframes ribPin {
    0%   { transform: translate(calc(var(--i, 0) * 38px), -26px); }
    60%  { transform: translate(calc(var(--i, 0) * 38px), 6px); }
    100% { transform: translate(calc(var(--i, 0) * 38px), 0); }
}
.ribbon-layer.open .rib.pinning { animation: ribPin 0.5s cubic-bezier(0.3, 0.7, 0.3, 1); }

@media (prefers-reduced-motion: reduce) {
    .rib, .rib-num, .rib-x { transition: none; }
    .ribbon-layer.open .rib.pinning { animation: none; }
}


.rib-close {
    top: 3px;
    left: calc(26px + var(--n, 1) * 38px + 6px);
    right: 0;
    width: auto;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 14px 0 32px;
    border: 0;
    border-radius: 4px 0 0 4px;
    background: linear-gradient(180deg, #9fac94 0%, #8b9c80 58%, #7d8f70 100%);
    color: #f4f1e6;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform-origin: left center;
}

.rib-close::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 26px;
    right: 8px;
    border-top: 1px dashed rgba(244, 241, 230, 0.45);
    border-bottom: 1px dashed rgba(244, 241, 230, 0.45);
    pointer-events: none;
}

.rib-close::after {
    content: "";
    position: absolute;
    left: 10px;
    top: -2px;
    bottom: -2px;
    width: 11px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.14),
        inset -1px 0 0 rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

.rib-close svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    overflow: visible;
    stroke-width: 1.5;
}

.rib-close-label {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    white-space: nowrap;
}


.dedication-page {
    background: var(--page-bg);
    color: var(--page-text);
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 7% 8%;
    overflow: hidden;
}
.dedication-page .header { flex: 0 0 auto; }
.dedication-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.dedication-content {
    width: 100%;
    font-size: 0.86rem;
    line-height: 1.42;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.dedication-content p { margin: 0 0 0.62em; }
.dedication-content .ded-h {
    font-weight: 700;
    text-align: left;
    letter-spacing: 0.02em;
    margin-bottom: 0.22em;
}
.dedication-content ol,
.dedication-content ul {
    margin: 0.15em 0 0.62em;
    padding-left: 1.4em;
}
.dedication-content li {
    margin-bottom: 0.45em;
    text-align: justify;
    padding-left: 0.15em;
}
.dedication-content .ded-quote {
    font-style: italic;
    text-align: center;
    margin: 0.15em 0 0.1em;
}
.dedication-content .ded-cite {
    text-align: right;
    font-size: 0.92em;
    opacity: 0.8;
    margin: 0 0 0.7em;
}

.egg-trunk-hit {
    position: absolute;
    left: 40%;
    width: 20%;
    bottom: 0;
    height: 30%;
    z-index: 6;
    background: transparent;
    /* Debug: descomentar para ver la zona -> background: rgba(255,0,0,.15); */
    pointer-events: auto;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}

.plumeria-moon {
    pointer-events: auto;
    cursor: default;
}

.egg-page {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: rgba(20, 18, 22, 0.92);   
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.egg-page.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.6s ease;
}
.egg-inner {
    position: relative;
    box-sizing: border-box;
    max-width: 460px;
    width: 100%;
    aspect-ratio: 8.5 / 12.4;
    height: auto;
    max-height: 100%;
    padding: 2.6em 2.2em 2em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   
    overflow: hidden;              
    line-height: 1.62;
    background-color: #fbf9f2;
    background-image: radial-gradient(rgba(140, 120, 80, 0.025) 1px, transparent 1px);
    background-size: 14px 14px;
    color: #050505;
    border: 1px solid #ddd8c9;
    border-radius: 3px 7px 7px 3px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.02);
}
.egg-inner .header {
    flex: 0 0 auto;
    color: #555;
    border-bottom-color: #ece7d8;
}
.egg-text {
    position: relative;
    font-size: 1rem;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;          
    -ms-overflow-style: none;       
    padding-top: 0.9em;
}
.egg-text::-webkit-scrollbar { width: 0; height: 0; display: none; }  
.egg-text .egg-p {
    margin: 0 0 0.85em;
}
.egg-text .egg-p:last-child { margin-bottom: 0; }
.egg-text .egg-title {
    text-align: center;
    font-weight: 600;
    font-size: 1.08rem;
    margin-bottom: 1.1em;
    hyphens: none;
    -webkit-hyphens: none;
}
.egg-text .egg-quote {
    font-style: italic;
    padding-left: 0.6em;
    border-left: 2px solid rgba(120, 100, 70, 0.28);
}
.egg-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(20, 18, 22, 0.72);
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, background 0.2s ease;
    z-index: 2;
}
.egg-close:hover { transform: scale(1.06); }
.egg-close:active { transform: scale(0.94); background: rgba(40, 36, 40, 0.85); }

.lit-test {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 6px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.92);
    color: #333;
    font: 600 11px/1 system-ui, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.lit-test-tag {
    font-size: 8px;
    letter-spacing: 0.08em;
    background: #c0392b;
    color: #fff;
    padding: 2px 4px;
    border-radius: 6px;
}
.lit-test-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #97a78c;
}
.lit-test-label { white-space: nowrap; }
.candle-test { padding: 5px 9px; gap: 4px; }
.candle-test .lit-test-tag { background: none; color: inherit; padding: 0; font-size: 13px; letter-spacing: 0; }
.candle-test .lit-test-label { min-width: 0.8em; text-align: center; font-variant-numeric: tabular-nums; }

.cover-liturgy {
    position: absolute;
    left: 50%;
    bottom: 2%;
    width: 130%;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    line-height: 0;
}
.cover-liturgy:empty { display: none; }
.cover-liturgy svg {
    width: 100%;
    height: auto;
    display: block;
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(100deg,
        #000 0%, #000 40%, rgba(0,0,0,0.55) 50%, transparent 60%);
    mask-image: linear-gradient(100deg,
        #000 0%, #000 40%, rgba(0,0,0,0.55) 50%, transparent 60%);
    -webkit-mask-size: 260% 100%;
    mask-size: 260% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0% 0;   
    mask-position: 0% 0;
}
.cover-page.cover-animate .cover-liturgy svg {
    animation: litDraw 5.5s cubic-bezier(0.4, 0, 0.2, 1) 7.5s both;
    will-change: mask-position;
}
@keyframes litDraw {
    from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0;   }
}
.cover-page.cover-drawn .cover-liturgy svg {
    animation: none;
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
}
.cover-page.has-liturgy .cover-silhouette { display: none; }

body.lit-pentecostes .cover-liturgy svg,
body.lit-adviento .cover-liturgy svg,
body.lit-navidad .cover-liturgy svg,
body.lit-cuaresma .cover-liturgy svg,
body.lit-pascua .cover-liturgy svg {
    -webkit-mask-image: none;
    mask-image: none;
    animation: none;                 
}
.cover-liturgy .lit-pentestroke,
.cover-liturgy .lit-stroke-draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;         
}
.cover-page.cover-animate .cover-liturgy .lit-pentestroke,
.cover-page.cover-animate .cover-liturgy .lit-stroke-draw {
    animation: litStrokeDraw 5.5s cubic-bezier(0.4, 0, 0.2, 1) 7.5s both;
    will-change: stroke-dashoffset;
}
@keyframes litStrokeDraw {
    from { stroke-dashoffset: 1000; }
    to   { stroke-dashoffset: 0; }
}
.cover-page.cover-drawn .cover-liturgy .lit-pentestroke,
.cover-page.cover-drawn .cover-liturgy .lit-stroke-draw {
    animation: none;
    stroke-dashoffset: 0;
}
body.lit-pentecostes .cover-liturgy #animatedFlames { opacity: 0; }
.cover-page.cover-animate .cover-liturgy #animatedFlames {
    animation: litFlamesIn 1.2s ease 13s both;
}
@keyframes litFlamesIn { from { opacity: 0; } to { opacity: 1; } }
.cover-page.cover-drawn .cover-liturgy #animatedFlames {
    animation: none;
    opacity: 1;
}
body.lit-pentecostes .cover-liturgy #lightGlow { opacity: 0; }
.cover-page.cover-animate .cover-liturgy #lightGlow {
    animation: litFlamesIn 2.8s ease 10.2s both;   
}
.cover-page.cover-drawn .cover-liturgy #lightGlow {
    animation: none;
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .cover-liturgy .lit-pentestroke,
    .cover-liturgy .lit-stroke-draw { animation: none; stroke-dashoffset: 0; }
    body.lit-pentecostes .cover-liturgy #animatedFlames { animation: none; opacity: 1; }
    body.lit-pentecostes .cover-liturgy #lightGlow { animation: none; opacity: 1; }
}

.cover-liturgy .lit-overlay { opacity: 0; }
.cover-page.cover-animate .cover-liturgy .lit-overlay {
    animation: litFlamesIn 1.4s ease 13s both;
}
.cover-page.cover-drawn .cover-liturgy .lit-overlay {
    animation: none;
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .cover-liturgy .lit-overlay { animation: none; opacity: 1; }
}

body.lit-adviento .cover-liturgy {
    width: 140%;                 
    left: 50%;
    bottom: 11%;                 
    transform: translateX(-50%);
}
body.lit-navidad .cover-liturgy {
    width: 155%;                 
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
}
body.lit-cuaresma .cover-liturgy {
    width: 130%;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
}
body.lit-pascua .cover-liturgy {
    width: 130%;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
}
body.lit-pentecostes .cover-liturgy {
    width: 115%;                 
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
}

.paper:not(.near) .cover-liturgy *,
.paper.flipped:not(.turning) .cover-liturgy * {
    animation-play-state: paused !important;
}

body.lit-navidad .morning-star { display: none !important; }


.top-controls .top-bar { gap: 6px; }
.top-controls .menu-items {
    position: relative;
    gap: 11px;
    overflow: visible;
    max-height: none;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
    will-change: opacity, transform;
}
.top-controls.menu-open .menu-items {
    max-height: none;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#topControls { pointer-events: none; }
#topControls .top-bar { pointer-events: auto; }
#topControls .font-picker:not(.hidden) { pointer-events: auto; }

.top-controls .search-btn,
.top-controls .font-picker-toggle,
.top-controls .menu-btn,
.top-controls .index-btn,
.top-controls .theme-toggle,
.top-controls .gesture-toggle {
    position: relative;
    z-index: 1;                 
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    color: #43412f;             
    filter: none !important;    
    -webkit-filter: none !important;
    background:
        radial-gradient(circle at 36% 30%,
            #ffffff 0%, #f3efe4 16%, #e6ded0 55%, #c7bda6 100%);
    box-shadow:
        inset -3px -4px 9px rgba(199,189,166,.7),
        inset 3px 3px 7px rgba(255,255,255,.24),   
        0 7px 12px -5px rgba(70,80,60,.28),
        0 2px 4px -1px rgba(70,80,60,.28);
    transition: box-shadow .25s ease, background .25s ease, transform .2s ease;
    overflow: visible;
}
.top-controls .search-btn::after,
.top-controls .font-picker-toggle::after,
.top-controls .menu-btn::after,
.top-controls .index-btn::after,
.top-controls .theme-toggle::after,
.top-controls .gesture-toggle::after {
    content: "";
    position: absolute;
    top: 19%; left: 26%;
    width: 34%; height: 26%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.36), rgba(255,255,255,0) 70%);   
    z-index: 2;
    pointer-events: none;
}
.top-controls .search-btn:hover,
.top-controls .font-picker-toggle:hover,
.top-controls .index-btn:hover,
.top-controls .theme-toggle:hover,
.top-controls .gesture-toggle:hover { transform: translateY(-1px); }

.top-controls .theme-toggle-thumb,
.top-controls .gesture-toggle-thumb {
    position: absolute;
    inset: 0;
    left: 0 !important;
    width: 100%;
    height: 100%;
    transform: none !important;
    background: transparent;
}
.top-controls .theme-emoji,
.top-controls .gesture-emoji {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    z-index: 3;                 
}

.top-controls .index-btn { font-size: 1.05rem; }

.top-controls .menu-items::before {
    content: "";
    position: absolute;
    top: 21px;                  
    bottom: 21px;               
    right: 20px;                
    width: 2px;
    border-radius: 2px;
    background: rgba(111,128,101,.55);
    opacity: .5;
    z-index: 0;
    pointer-events: none;
}

.top-controls .search-btn:active,
.top-controls .font-picker-toggle:active,
.top-controls .font-picker-toggle.fp-open,
.top-controls .menu-btn:active,
.top-controls .index-btn:active,
.top-controls .theme-toggle:active,
.top-controls.menu-open .menu-btn,
.top-controls .gesture-toggle.active {
    background:
        radial-gradient(circle at 36% 30%,
            #ffffff 0%, #e9f0e0 18%, #aab69f 55%, #6f8065 100%);
    box-shadow:
        inset -3px -4px 9px rgba(111,128,101,.7),
        inset 3px 3px 7px rgba(255,255,255,.22),   
        0 0 0 4px rgba(151,167,140,.26),
        0 7px 12px -5px rgba(70,80,60,.28);
    filter: none !important;
    -webkit-filter: none !important;
}

body.dark-mode .top-controls .search-btn,
body.dark-mode .top-controls .font-picker-toggle,
body.dark-mode .top-controls .menu-btn,
body.dark-mode .top-controls .index-btn,
body.dark-mode .top-controls .theme-toggle,
body.dark-mode .top-controls .gesture-toggle {
    color: #ece7de;
    background:  
        radial-gradient(circle at 38% 26%, rgba(255,255,255,.10), rgba(255,255,255,.02) 40%, rgba(255,255,255,0) 66%),
        radial-gradient(120% 90% at 50% 122%, rgba(190,215,225,.12), rgba(255,255,255,0) 58%),
        rgba(38,44,46,.72);
    /* backdrop-filter: blur(3px) saturate(1.1); */
    /* -webkit-backdrop-filter: blur(3px) saturate(1.1); */
    box-shadow:  
        inset 0 1px 1px rgba(255,255,255,.22),
        inset -3px -5px 11px rgba(0,0,0,.5),
        inset 4px 6px 12px rgba(255,255,255,.05),
        inset 0 -8px 10px rgba(200,228,232,.09),
        0 7px 15px -5px rgba(0,0,0,.6),
        0 2px 4px -1px rgba(0,0,0,.5);
}
body.dark-mode .top-controls .search-btn::after,
body.dark-mode .top-controls .font-picker-toggle::after,
body.dark-mode .top-controls .menu-btn::after,
body.dark-mode .top-controls .index-btn::after,
body.dark-mode .top-controls .theme-toggle::after,
body.dark-mode .top-controls .gesture-toggle::after {
    background: radial-gradient(circle, rgba(255,255,255,.4), rgba(255,255,255,0) 68%);   
}
body.dark-mode .top-controls .search-btn::before,
body.dark-mode .top-controls .font-picker-toggle::before,
body.dark-mode .top-controls .menu-btn::before,
body.dark-mode .top-controls .index-btn::before,
body.dark-mode .top-controls .theme-toggle::before,
body.dark-mode .top-controls .gesture-toggle::before {
    content: "";
    position: absolute;
    left: 30%; right: 30%; bottom: 13%;
    height: 16%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 72%);   
    filter: blur(.5px);
    z-index: 1;
    pointer-events: none;
}
body.dark-mode .top-controls .menu-items::before { background: rgba(180,205,210,.35); }

body.dark-mode .top-controls .search-btn:active,
body.dark-mode .top-controls .font-picker-toggle:active,
body.dark-mode .top-controls .font-picker-toggle.fp-open,
body.dark-mode .top-controls .menu-btn:active,
body.dark-mode .top-controls .index-btn:active,
body.dark-mode .top-controls .theme-toggle:active,
body.dark-mode .top-controls.menu-open .menu-btn,
body.dark-mode .top-controls .gesture-toggle.active {
    background:  
        radial-gradient(circle at 38% 26%, rgba(255,255,255,.10), rgba(255,255,255,.02) 40%, rgba(255,255,255,0) 66%),
        radial-gradient(120% 90% at 50% 122%, rgba(150,200,150,.17), rgba(255,255,255,0) 58%),
        color-mix(in srgb, #97a78c 26%, transparent);
    box-shadow:  
        inset 0 1px 1px rgba(255,255,255,.2),
        inset -3px -5px 11px rgba(0,0,0,.5),
        inset 4px 6px 12px rgba(255,255,255,.05),
        inset 0 -8px 10px rgba(150,205,160,.32),
        0 0 0 3px rgba(151,167,140,.34),
        0 7px 15px -5px rgba(0,0,0,.6);
}

.top-controls .search-btn,
.top-controls .font-picker-toggle,
.top-controls .menu-btn,
.top-controls .index-btn,
.top-controls .theme-toggle,
.top-controls .gesture-toggle {
    background:
        radial-gradient(circle at 36% 30%,
            #ffffff 0%,
            color-mix(in srgb, var(--cover-1) 22%, #f3efe4) 16%,
            color-mix(in srgb, var(--cover-2) 34%, #e6ded0) 55%,
            color-mix(in srgb, var(--cover-3) 46%, #c7bda6) 100%);
}
.top-controls .search-btn:active,
.top-controls .font-picker-toggle:active,
.top-controls .font-picker-toggle.fp-open,
.top-controls .menu-btn:active,
.top-controls .index-btn:active,
.top-controls .theme-toggle:active,
.top-controls.menu-open .menu-btn,
.top-controls .gesture-toggle.active {
    background:
        radial-gradient(circle at 36% 30%,
            #ffffff 0%,
            color-mix(in srgb, var(--cover-1) 60%, #ffffff) 18%,
            var(--cover-2) 55%,
            color-mix(in srgb, var(--cover-3) 72%, #000000) 100%);
    box-shadow:
        inset -3px -4px 9px color-mix(in srgb, var(--cover-3) 60%, transparent),
        inset 3px 3px 7px rgba(255,255,255,.22),
        0 0 0 4px color-mix(in srgb, var(--cover-2) 30%, transparent),
        0 7px 12px -5px rgba(70,80,60,.28);
}
body.dark-mode .top-controls .search-btn,
body.dark-mode .top-controls .font-picker-toggle,
body.dark-mode .top-controls .menu-btn,
body.dark-mode .top-controls .index-btn,
body.dark-mode .top-controls .theme-toggle,
body.dark-mode .top-controls .gesture-toggle {
    background:
        radial-gradient(circle at 38% 26%, rgba(255,255,255,.10), rgba(255,255,255,.02) 40%, rgba(255,255,255,0) 66%),
        radial-gradient(120% 90% at 50% 122%, color-mix(in srgb, var(--cover-2) 30%, transparent), rgba(255,255,255,0) 60%),
        color-mix(in srgb, var(--cover-3) 16%, rgba(38,44,46,.72));
}
body.dark-mode .top-controls .search-btn:active,
body.dark-mode .top-controls .font-picker-toggle:active,
body.dark-mode .top-controls .font-picker-toggle.fp-open,
body.dark-mode .top-controls .menu-btn:active,
body.dark-mode .top-controls .index-btn:active,
body.dark-mode .top-controls .theme-toggle:active,
body.dark-mode .top-controls.menu-open .menu-btn,
body.dark-mode .top-controls .gesture-toggle.active {
    background:
        radial-gradient(circle at 38% 26%, rgba(255,255,255,.10), rgba(255,255,255,.02) 40%, rgba(255,255,255,0) 66%),
        radial-gradient(120% 90% at 50% 122%, color-mix(in srgb, var(--cover-2) 34%, transparent), rgba(255,255,255,0) 58%),
        color-mix(in srgb, var(--cover-2) 26%, transparent);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.2),
        inset -3px -5px 11px rgba(0,0,0,.5),
        inset 0 -8px 10px color-mix(in srgb, var(--cover-2) 40%, transparent),
        0 0 0 3px color-mix(in srgb, var(--cover-2) 34%, transparent),
        0 7px 15px -5px rgba(0,0,0,.6);
}


.top-controls .share-widget {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.top-controls .share-widget.open .share-btn {
    box-shadow:
        inset -3px -4px 9px color-mix(in srgb, var(--cover-3) 60%, transparent),
        inset 3px 3px 7px rgba(255,255,255,.22),
        0 0 0 4px color-mix(in srgb, var(--cover-2) 30%, transparent),
        0 7px 12px -5px rgba(70,80,60,.28);
    background:
        radial-gradient(circle at 36% 30%,
            #ffffff 0%,
            color-mix(in srgb, var(--cover-1) 60%, #ffffff) 18%,
            var(--cover-2) 55%,
            color-mix(in srgb, var(--cover-3) 72%, #000000) 100%);
}

.top-controls .share-cloud {
    position: absolute;
    top: 100%;                   
    left: 50%;
    margin-top: 9px;
    display: flex;
    flex-direction: column;      
    align-items: center;
    gap: 9px;
    opacity: 0;
    transform: translateX(-50%) translateY(-10px) scale(.9);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity .22s ease, transform .3s cubic-bezier(.34,1.4,.64,1);
    will-change: opacity, transform;
}
.top-controls .share-widget.open .share-cloud {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
}
.top-controls .share-dot {
    position: relative;
    z-index: 1;                  
    width: 42px; height: 42px;
    flex: 0 0 auto;
    border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: #4a5340;
    background:
        radial-gradient(circle at 36% 30%,
            #ffffff 0%,
            color-mix(in srgb, var(--cover-1) 20%, #f1ece0) 30%,
            color-mix(in srgb, var(--cover-3) 34%, #d8cfba) 100%);
    box-shadow:
        inset -2px -3px 6px rgba(199,189,166,.6),
        inset 2px 2px 4px rgba(255,255,255,.3),
        0 4px 8px -3px rgba(70,80,60,.4);
    transition: transform .18s ease, box-shadow .2s ease, color .2s ease;
}
.top-controls .share-dot svg { width: 21px; height: 21px; }
.top-controls .share-cloud::before {
    content: "";
    position: absolute;
    top: -30px;                 
    bottom: 21px;               
    left: 50%;
    width: 2px;
    border-radius: 2px;
    background: rgba(111,128,101,.55);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-1px) scaleY(0);
    transform-origin: top center;
    transition: opacity .2s ease, transform .45s cubic-bezier(.34,1.2,.64,1);
}
.top-controls .share-widget.open .share-cloud::before {
    opacity: .5;
    transform: translateX(-1px) scaleY(1);
    transition-delay: .1s;
}
.top-controls .share-dot:active { transform: scale(.9); box-shadow: inset 2px 2px 6px rgba(150,140,120,.6), inset -2px -2px 6px rgba(255,255,255,.35); }
.top-controls .share-dot:focus-visible { outline: 2px solid var(--cover-3); outline-offset: 2px; }
.top-controls .share-dot.wa { color: #1FA855; }
.top-controls .share-dot.fb { color: #1877F2; }
.top-controls .share-dot.ig { color: #C13584; }
.top-controls .share-dot.link { color: #5b6b4d; }
.top-controls .share-dot.qr { color: #3b4a54; }
.top-controls .share-widget.open .share-dot { animation: sharepop .34s cubic-bezier(.34,1.4,.64,1) both; }
.top-controls .share-widget.open .share-dot:nth-child(1){ animation-delay:.02s; }
.top-controls .share-widget.open .share-dot:nth-child(2){ animation-delay:.06s; }
.top-controls .share-widget.open .share-dot:nth-child(3){ animation-delay:.10s; }
.top-controls .share-widget.open .share-dot:nth-child(4){ animation-delay:.14s; }
.top-controls .share-widget.open .share-dot:nth-child(5){ animation-delay:.18s; }
@keyframes sharepop { from{ opacity:0; transform:scale(.5) translateY(-10px);} to{ opacity:1; transform:none;} }

body.dark-mode .top-controls .share-dot {
    color: #dfe6da;
    background:
        radial-gradient(circle at 38% 26%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
        color-mix(in srgb, var(--cover-3) 18%, rgba(40,46,48,.92));
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.18),
        inset -2px -3px 7px rgba(0,0,0,.5),
        0 4px 9px -3px rgba(0,0,0,.6);
}
body.dark-mode .top-controls .share-dot.wa { color: #4be08a; }
body.dark-mode .top-controls .share-dot.fb { color: #5b9dff; }
body.dark-mode .top-controls .share-dot.ig { color: #ff7cc4; }

.qr-modal {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20,24,20,.55);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    padding: 24px;
}
.qr-modal.show { opacity: 1; pointer-events: auto; }
.qr-card {
    background: #ffffff;                 
    border-radius: 20px;
    padding: 22px 22px 18px;
    text-align: center;
    box-shadow: 0 18px 50px -12px rgba(0,0,0,.55);
    transform: translateY(12px) scale(.96);
    transition: transform .3s cubic-bezier(.34,1.4,.64,1);
    max-width: 300px; width: 100%;
}
.qr-modal.show .qr-card { transform: none; }
.qr-img { width: 220px; height: 220px; max-width: 70vw; display: block; margin: 0 auto; }
.qr-url { margin: 12px 0 2px; font-weight: 700; color: #2b3a2b; letter-spacing: .02em; }
.qr-note { margin: 0 0 16px; font-size: 13px; color: #6b756b; }
.qr-close {
    font: inherit; font-size: 14px; cursor: pointer;
    border: none; border-radius: 999px; padding: 9px 22px;
    background: #aab69f; color: #24301e; font-weight: 600;
    transition: transform .15s ease, background .2s ease;
}
.qr-close:hover { transform: translateY(-1px); }
.qr-close:active { transform: scale(.96); }

.share-toast {
    position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 14px);
    z-index: 9100;
    background: rgba(30,36,28,.92); color: #f3efe4;
    font-size: 13.5px; padding: 10px 18px; border-radius: 999px;
    box-shadow: 0 8px 22px -8px rgba(0,0,0,.6);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    max-width: 84vw; text-align: center;
}
.share-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
    .top-controls .share-cloud,
    .top-controls .share-cloud::before,
    .top-controls .share-widget.open .share-cloud::before,
    .top-controls .share-widget.open .share-dot,
    .qr-card { transition: none; animation: none; }
    .top-controls .share-widget.open .share-cloud::before { opacity: .5; transform: translateX(-1px) scaleY(1); }
}

body.lite *,
body.lite *::before,
body.lite *::after {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
}
@media (prefers-reduced-motion: no-preference) {
    body.lite .paper,
    body.lite .paper > .front,
    body.lite .paper > .back {
        transition-property: transform !important;
        transition-timing-function: cubic-bezier(0.15, 0.6, 0.25, 1) !important;
        transition-duration: 600ms !important;
    }
    body.lite .paper.turning { will-change: transform !important; }
}
body.lite #starfield,
body.lite .morning-star,
body.lite #welcomeIntro,
body.lite .page-sky,
body.lite .plumeria-wrap,
body.lite .plumeria-sky,
body.lite .cover-liturgy,
body.lite #coverButterflies,
body.lite #coverFlowers,
body.lite .plumeria-flying-bird,
body.lite .plumeria-page::before,
body.lite .decor-section-page::before,
body.lite .index-page::before,
body.lite .dict-page::before,
body.lite .image-page::after {
    display: none !important;
}
body.lite .top-controls .search-btn,
body.lite .top-controls .font-picker-toggle,
body.lite .top-controls .menu-btn,
body.lite .top-controls .index-btn,
body.lite .top-controls .theme-toggle,
body.lite .top-controls .gesture-toggle,
body.lite .top-controls .share-dot,
body.lite .search-clear {
    background: var(--button-bg) !important;
    box-shadow: none !important;
    border: 1px solid var(--button-border) !important;
    color: var(--button-text) !important;
}

.guide-btn {
    position: absolute;
    right: 8px;
    bottom: 34px;              
    height: 18px;              
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;      
    line-height: 0;
    z-index: 16;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
}
.guide-btn svg { height: 18px; width: auto; display: block; }
.guide-btn:active { transform: scale(0.9); }
.dict-page { position: relative; }

.guide-modal {
    position: fixed;
    inset: 0;
    z-index: 9300;
    display: none;
    background: rgba(20, 18, 12, 0.14);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.guide-modal.show { display: block; opacity: 1; }
.guide-pop {
    position: absolute;               
    max-width: min(268px, 74vw);
    max-height: 58vh;
    transform-origin: bottom right;   
    transform: scale(0.08);
    opacity: 0;
}
.guide-modal.show .guide-pop {
    animation: guideGrow 0.36s cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}
.guide-sheet {
    display: block;
    width: 100%;
    height: auto;
    max-height: 56vh;
    border-radius: 16px;
}
@keyframes guideGrow {
    from { transform: scale(0.08); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.guide-flip {
    position: absolute;
    top: 2.4%;
    left: 2.4%;
    width: 12.5%;
    max-width: 32px;
    aspect-ratio: 1 / 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.guide-flip svg { width: 100%; height: 100%; display: block; }
.guide-flip:active { transform: scale(0.88); }
.guide-flip.is-zurdo { transform: rotate(180deg); }
.guide-flip.is-zurdo:active { transform: rotate(180deg) scale(0.88); }
.guide-modal-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    z-index: 2;
}

.install-fab {
    position: fixed;
    left: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 190;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 17px 9px 13px;
    border: 1px solid color-mix(in srgb, var(--cover-1) 55%, #fff);
    border-radius: 999px;
    font: 700 0.8rem/1 "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0.2px;
    color: #fff;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cover-1) 78%, #fff 10%) 0%,
        var(--cover-2) 52%,
        var(--cover-3) 100%);
    box-shadow:
        0 6px 16px -4px color-mix(in srgb, var(--cover-3) 60%, transparent),
        0 1px 0 rgba(255, 255, 255, 0.35) inset;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: installIn 0.55s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
.install-fab[hidden] { display: none; }
.install-fab-ico {
    font-size: 1.05rem;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.install-fab-txt { white-space: nowrap; }
.install-fab:active { transform: translateX(-50%) scale(0.96); }
.install-fab::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid color-mix(in srgb, var(--cover-2) 70%, #fff);
    opacity: 0;
    animation: installHalo 2.4s ease-out 6;
    pointer-events: none;
}
@keyframes installIn {
    from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.9); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes installHalo {
    0%        { opacity: 0.55; transform: scale(1); }
    70%, 100% { opacity: 0;    transform: scale(1.32); }
}
@media (prefers-reduced-motion: reduce) {
    .install-fab, .install-fab::before { animation: none; }
}
body.lite .install-fab::before { display: none; }

.ios-steps {
    list-style: none;
    margin: 15px 0 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    text-align: left;
    counter-reset: ios;
}
.ios-steps li {
    position: relative;
    padding-left: 38px;
    line-height: 1.4;
    counter-increment: ios;
}
.ios-steps li::before {
    content: counter(ios);
    position: absolute;
    left: 0;
    top: -1px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cover-2) 80%, #fff);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}
.ios-share-ico {
    display: inline-flex;
    vertical-align: -4px;
    width: 20px;
    height: 20px;
    color: var(--cover-3);
}
.ios-share-ico svg { width: 100%; height: 100%; }


.contraportada { position: relative; padding: 0; }

.contraportada .bc-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: clamp(46px, 8vh, 62px) 11% clamp(16px, 3.4vh, 28px);
    opacity: 0;                 
    transform: translateY(10px);
    z-index: 2;
}
.bc-top {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3.2vh, 24px);
}
.bc-bottom {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
body.book-at-back .contraportada .bc-content { animation: bcFade 1.1s ease var(--close-t-content, .92s) both; }
body.book-at-back .contraportada .bc-strap   { animation: bcFadeStrap .52s cubic-bezier(.2, 1.28, .36, 1) var(--close-t-strap, .98s) backwards; }
@keyframes bcFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bcFadeStrap { from { opacity: 0; transform: scaleX(.04); } 55% { opacity: 1; } to { opacity: 1; transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
    .contraportada .bc-content, body.book-at-back .contraportada .bc-strap { animation: none; opacity: 1; transform: none; }
}

.bc-seal { width: clamp(48px, 13vw, 68px); height: auto; filter: drop-shadow(0 1px 1px rgba(20, 14, 6, 0.26)); }

.bc-blurb {
    margin: 0;
    max-width: 26ch;
    font-family: 'Dancing Script', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.4;
    font-size: clamp(1.3rem, 5.4vw, 1.75rem);
    color: #3f3220;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
}
.bc-blurb[data-placeholder="1"] { opacity: .62; }

.bc-qr { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.bc-qr img {
    width: clamp(108px, 32vw, 148px);
    height: auto;
    background: #fff;
    padding: 1px;
    border-radius: 11px;
}
.bc-qr-url {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: .82rem;
    letter-spacing: .04em;
    color: #3f3220;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
}

.bc-year {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: .32em;
    font-size: clamp(.82rem, 3.3vw, .98rem);
    color: #b98a34;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
    padding-left: .32em; 
}

.bc-strap {
    position: absolute;
    top: clamp(8px, 1.6vh, 14px);
    left: clamp(34px, 11vw, 52px);   
    right: 0;
    height: 26px;
    transform-origin: left center;   
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 14px 0 32px;
    border: 0;
    border-radius: 4px 0 0 4px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cover-1) 84%, #3a352a) 0%,
        color-mix(in srgb, var(--cover-2) 84%, #322d22) 58%,
        color-mix(in srgb, var(--cover-3) 86%, #2a261c) 100%);
    color: #f4f1e6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform-origin: left center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease;
}
.bc-strap::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 26px;
    right: 8px;
    border-top: 1px dashed rgba(244, 241, 230, 0.45);
    border-bottom: 1px dashed rgba(244, 241, 230, 0.45);
    pointer-events: none;
}
.bc-strap::after {
    content: "";
    position: absolute;
    left: 10px;
    top: -2px;
    bottom: -2px;
    width: 11px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.14), inset -1px 0 0 rgba(0, 0, 0, 0.18);
    pointer-events: none;
}
.bc-strap-ico { width: 14px; height: 14px; flex: 0 0 auto; position: relative; z-index: 1; }
.bc-strap-label {
    position: relative;
    z-index: 1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    white-space: nowrap;
}
.bc-strap:active { transform: scale(0.97); }
body.book-at-back .install-fab { display: none !important; }



#pCoverBack .cp-sky,
#pCoverBack .cp-ff-sky,
#pCoverBack .cp-glow { display: none !important; }

.cp-sky {
    position: absolute;
    inset: 0;
    z-index: 1;                    
    pointer-events: none;
    transform-origin: 8% 90%;     
    opacity: 0;   
}
body.book-at-back .cp-sky { animation: cpSpiralIn 2.6s cubic-bezier(.16, .7, .3, 1) var(--close-t-bf, .95s) both; }

.cp-bf {                           
    position: absolute;
    left: 8%;                      
    top: 90%;                      
    width: 0;
    height: 0;
}

.cp-rise {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    animation: cpRise var(--dur) linear var(--del) infinite backwards;
}

.cp-orbit {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    animation: cpOrbit var(--orb) linear var(--del) infinite backwards;
}

.cp-body {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--sz);
    height: var(--sz);
    margin-left: calc(var(--sz) / -2);
    margin-top: calc(var(--sz) / -2);
    transform-style: preserve-3d;
    perspective: calc(var(--sz) * 5);
    filter: drop-shadow(0 2px 2px rgba(40, 48, 30, .22));
}

.cp-body svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cp-wing {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
}
.cp-wing-l { animation: cpFlapL var(--flap) ease-in-out infinite; }
.cp-wing-r { animation: cpFlapR var(--flap) ease-in-out infinite; }

.cp-glow {
    position: absolute;
    left: 8%;                      
    top: 90%;                      
    width: 0;
    height: 0;
    z-index: 0;
}
.cp-glow i {
    position: absolute;
    left: -72px;
    top: -72px;
    width: 144px;
    height: 144px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 248, 222, .62) 0%,
        rgba(255, 242, 205, .22) 42%,
        rgba(255, 242, 205, 0) 70%);
    opacity: 0;
}
body.book-at-back .cp-glow i { animation: cpGlow 2.8s ease-out var(--close-t-glow, .8s) both; }

@keyframes cpSpiralIn {
    0%   { opacity: 0; transform: scale(.28); }
    40%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes cpGlow {
    0%   { opacity: 0; transform: scale(.25); }
    24%  { opacity: .9; }
    100% { opacity: 0; transform: scale(2.5); }
}

@keyframes cpRise {
    0%   { transform: translate(0px, 0px) scale(.3); opacity: 0; }
    12%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translate(var(--dx), var(--rise)) scale(1.02); opacity: 0; }
}

@keyframes cpOrbit {
    0%      { transform: translate(calc(var(--rx) *  0),    calc(var(--ry) * -1))    rotate(8deg)    scale(.82)   scaleX(1);    opacity: .68; }
    8.33%   { transform: translate(calc(var(--rx) *  .5),   calc(var(--ry) * -.866)) rotate(6.9deg)  scale(.844)  scaleX(.866); opacity: .70; }
    16.66%  { transform: translate(calc(var(--rx) *  .866), calc(var(--ry) * -.5))   rotate(4deg)    scale(.91)   scaleX(.5);   opacity: .76; }
    25%     { transform: translate(calc(var(--rx) *  1),    calc(var(--ry) *  0))    rotate(0deg)    scale(1)     scaleX(.36);  opacity: .84; }
    33.33%  { transform: translate(calc(var(--rx) *  .866), calc(var(--ry) *  .5))   rotate(-4deg)   scale(1.09)  scaleX(-.5);  opacity: .92; }
    41.66%  { transform: translate(calc(var(--rx) *  .5),   calc(var(--ry) *  .866)) rotate(-6.9deg) scale(1.156) scaleX(-.866); opacity: .98; }
    50%     { transform: translate(calc(var(--rx) *  0),    calc(var(--ry) *  1))    rotate(-8deg)   scale(1.18)  scaleX(-1);   opacity: 1; }
    58.33%  { transform: translate(calc(var(--rx) * -.5),   calc(var(--ry) *  .866)) rotate(-6.9deg) scale(1.156) scaleX(-.866); opacity: .98; }
    66.66%  { transform: translate(calc(var(--rx) * -.866), calc(var(--ry) *  .5))   rotate(-4deg)   scale(1.09)  scaleX(-.5);  opacity: .92; }
    75%     { transform: translate(calc(var(--rx) * -1),    calc(var(--ry) *  0))    rotate(0deg)    scale(1)     scaleX(-.36); opacity: .84; }
    83.33%  { transform: translate(calc(var(--rx) * -.866), calc(var(--ry) * -.5))   rotate(4deg)    scale(.91)   scaleX(.5);   opacity: .76; }
    91.66%  { transform: translate(calc(var(--rx) * -.5),   calc(var(--ry) * -.866)) rotate(6.9deg)  scale(.844)  scaleX(.866); opacity: .70; }
    100%    { transform: translate(calc(var(--rx) *  0),    calc(var(--ry) * -1))    rotate(8deg)    scale(.82)   scaleX(1);    opacity: .68; }
}

@keyframes cpFlapL {
    0%   { transform: rotateY(5deg); }
    28%  { transform: rotateY(58deg); }
    56%  { transform: rotateY(2deg); }
    74%  { transform: rotateY(22deg); }
    100% { transform: rotateY(5deg); }
}
@keyframes cpFlapR {
    0%   { transform: rotateY(-5deg); }
    28%  { transform: rotateY(-58deg); }
    56%  { transform: rotateY(-2deg); }
    74%  { transform: rotateY(-22deg); }
    100% { transform: rotateY(-5deg); }
}

body.flipping .cp-sky,
body.flipping .cp-sky *,
body.intro-active .cp-sky,
body.intro-active .cp-sky *,
.paper:not(.near) .cp-sky,
.paper:not(.near) .cp-sky * {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .cp-sky,
    .cp-sky *,
    .cp-glow i {
        animation-duration: .001s !important;
        animation-iteration-count: 1 !important;
    }
}

.cp-ff-sky {
    position: absolute;
    inset: 0;
    z-index: 1;                 
    pointer-events: none;
    opacity: 0;                 
    display: none;              
}
body.dark-mode #pCoverBack .cp-ff-sky { display: block; }
body.dark-mode #pCoverBack .cp-sky { display: none; }
body.dark-mode.book-at-back #pCoverBack .cp-ff-sky {
    animation: cpFfReveal 2.2s ease var(--close-t-bf, .95s) both;
}
.cp-ff {
    position: absolute;
    width: var(--sz);
    height: var(--sz);
    margin-left: calc(var(--sz) / -2);
    margin-top: calc(var(--sz) / -2);
    border-radius: 50%;
    background: radial-gradient(circle, var(--c) 0%, var(--c) 36%, transparent 74%);
    box-shadow: 0 0 calc(var(--sz) * 3.6) calc(var(--sz) * 0.9) var(--c),
                0 0 calc(var(--sz) * 1.4) calc(var(--sz) * 0.5) var(--c);
    animation:
        cpFfDrift var(--dd) ease-in-out var(--ddl) infinite alternate,
        cpFfBlink var(--bd) ease-in-out var(--bdl) infinite;
    will-change: transform, opacity;
}
@keyframes cpFfDrift {
    from { transform: translate(0, 0); }
    to   { transform: translate(var(--tx), var(--ty)); }
}
@keyframes cpFfBlink {
    0%, 100% { opacity: .42; }
    45%, 55% { opacity: 1; }
}
@keyframes cpFfReveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}
body.flipping .cp-ff-sky *,
body.intro-active .cp-ff-sky *,
.paper:not(.near) .cp-ff-sky * {
    animation-play-state: paused;
}
body.lite #pCoverBack .cp-ff-sky { display: none; }
@media (prefers-reduced-motion: reduce) {
    body.dark-mode.book-at-back #pCoverBack .cp-ff-sky { animation: none; opacity: 1; }
    .cp-ff { animation: none; opacity: .5; }
}


:root {
    --close-t-content: .92s;   
    --close-t-strap:   .98s;   
    --close-t-bf:      .95s;   
    --close-t-glow:    .8s;    
}
.paper.closing-leaf { transition-timing-function: cubic-bezier(.42, .02, .34, 1); }
.bc-shade {
    position: absolute; inset: 0; z-index: 8; pointer-events: none;
    opacity: 0; visibility: hidden;
    background: radial-gradient(125% 92% at 50% 38%,
        rgba(0,0,0,.10) 0%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.52) 100%);
}
body.book-closing .bc-shade { visibility: visible; animation: bcShade 1150ms ease-out both; }
@keyframes bcShade { 0% { opacity: .62; } 58% { opacity: .5; } 100% { opacity: 0; } }
body.book-at-back .book { box-shadow: 0 26px 46px var(--book-shadow), 0 8px 14px rgba(0,0,0,.16); }
.bc-spine {
    position: absolute; left: 0; top: 0; bottom: 0; width: 14px; z-index: 3;
    pointer-events: none; border-radius: 3px 0 0 3px;
    background: linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.13) 46%, rgba(255,255,255,.10) 74%, rgba(0,0,0,.09) 100%);
}
.bc-spine::after { content: ""; position: absolute; top: 12px; bottom: 12px; right: 3px; border-left: 1px dashed rgba(244,241,230,.26); }
.bc-block {
    position: absolute; right: 0; top: 46px; bottom: 12px; width: 8px; z-index: 3;
    pointer-events: none; border-radius: 0 6px 6px 0;
    background:
        repeating-linear-gradient(180deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px),
        linear-gradient(90deg, rgba(0,0,0,.26) 0, var(--page-bg) 3px, var(--page-border) 100%);
    box-shadow: inset -1px 0 0 rgba(0,0,0,.10);
}
@media (prefers-reduced-motion: reduce) { body.book-closing .bc-shade { visibility: hidden; animation: none; } }
@keyframes bcStrapPulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .2); }
    50%      { box-shadow: 0 0 0 3px rgba(255, 248, 220, .55), 0 3px 9px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .32); }
}
.bc-strap.pulse { animation: bcStrapPulse .6s ease 2; }
@media (prefers-reduced-motion: reduce) { .bc-strap.pulse { animation: none; } }


#tourRoot { position: fixed; inset: 0; z-index: 4000; display: none; }
body.tour-on #tourRoot { display: block; }

#tourCatch {
    position: absolute; inset: 0;
    background: transparent; border: none; padding: 0; margin: 0;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}

#tourHole {
    position: absolute; left: 0; top: 0; width: 0; height: 0;
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(18, 16, 12, 0.62);
    pointer-events: none;
    transition: left .5s cubic-bezier(.4,.05,.2,1), top .5s cubic-bezier(.4,.05,.2,1),
                width .5s cubic-bezier(.4,.05,.2,1), height .5s cubic-bezier(.4,.05,.2,1);
}
#tourHole::after {
    content: ""; position: absolute; inset: -3px; border-radius: 16px;
    border: 1.5px solid rgba(207, 232, 138, 0.6);
    box-shadow: 0 0 12px rgba(207, 232, 138, 0.4);
    animation: tourRing 1.9s ease-in-out infinite;
}
body.tour-center #tourHole::after { display: none; }
@keyframes tourRing { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

#tourFirefly {
    position: absolute; left: 50%; top: 40%;
    width: 38px; height: 35px; margin: -17px 0 0 -19px;
    background: url("assets/luciernaga.png?v=1") center / contain no-repeat;
    pointer-events: none;
    transition: left .6s cubic-bezier(.5,.05,.2,1), top .6s cubic-bezier(.5,.05,.2,1);
    animation: tourFfPulse 2.6s ease-in-out infinite;
}
@keyframes tourFfPulse {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(183, 207, 107, .55)); transform: scale(.96); }
    50%      { filter: drop-shadow(0 0 12px rgba(183, 207, 107, .95)); transform: scale(1.06); }
}
#tourCard .t-bug {
    height: 1.15em; width: auto; vertical-align: -0.22em;
    filter: drop-shadow(0 0 3px rgba(183, 207, 107, .6));
}
.t-bug-ico {
    width: 22px; height: 22px; object-fit: contain;
    display: block; margin: 0 auto;
    filter: drop-shadow(0 0 2px rgba(183, 207, 107, .5));
}

#tourCard {
    position: absolute; left: -9999px; top: 0;
    max-width: min(300px, 80vw);
    background: color-mix(in srgb, var(--page-bg, #fbf9f2) 96%, #d9d2c2);
    color: var(--page-text, #2a2620);
    border: 1px solid rgba(140, 120, 80, 0.28);
    border-radius: 12px;
    padding: 13px 15px 11px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
    font-family: Georgia, "Times New Roman", serif;
}
#tourCard .t-title { font-size: 1.22rem; font-weight: 600; font-style: italic; margin-bottom: 4px; }
#tourCard .t-text  { font-size: 1.08rem; line-height: 1.44; opacity: .9; }
#tourCard .t-row   { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
#tourCard .t-dots  { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
#tourCard .t-dot   { width: 6px; height: 6px; border-radius: 50%; background: rgba(140, 120, 80, .32); }
#tourCard .t-dot.on{ background: var(--cover-2, #8b9c80); transform: scale(1.15); }
#tourCard .t-btns  { display: flex; justify-content: flex-end; gap: 8px; }
#tourCard button   { font: inherit; font-size: .94rem; border: none; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
#tourCard .t-skip  { background: transparent; color: var(--page-text); opacity: .55; }
#tourCard .t-next  {
    background: color-mix(in srgb, var(--cover-2, #8b9c80) 90%, #ffffff);
    border: 1.5px solid color-mix(in srgb, var(--cover-2, #8b9c80) 88%, #3a352a);
    color: #20241d; font-weight: 700;
}

body.lite #tourHole, body.lite #tourFirefly, body.lite #tourCard { transition: none !important; }
body.lite #tourFirefly, body.lite #tourHole::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    #tourHole, #tourFirefly, #tourCard { transition: none !important; }
    #tourFirefly, #tourHole::after { animation: none !important; }
}
.gesture-modal-content::before {
    content: "";
    display: block;
    width: 46px; height: 42px;
    margin: 2px auto 8px;
    background: url("assets/luciernaga.png?v=1") center / contain no-repeat;
    filter: drop-shadow(0 0 6px rgba(183, 207, 107, .55));
}