.style-gallery{grid-column:1/-1;text-align:center;padding:65px 0 50px;border-top:1px solid #a780464a;margin-top:25px;width:100%}
.style-gallery .eyebrow{margin:0 0 14px!important;color:#c9a56c}.style-gallery h2{font-size:clamp(25px,3vw,34px);letter-spacing:.1em;margin:0 0 36px;color:#f4eee5}
.character-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px;padding:0;margin:0 auto 40px;max-width:1120px}
.style-character{min-width:0;background:linear-gradient(150deg,#1e1b1680,#0b0b1055);border:1px solid #ae874238;border-radius:8px;overflow:hidden;padding:8px 8px 22px;transition:transform .2s,border-color .2s}
.style-character:hover{transform:translateY(-4px);border-color:#c9a56c99}
.character-portrait{width:100%;aspect-ratio:1;background-image:url('characters-sheet.png');background-size:400% 400%;background-position:var(--sprite-x) var(--sprite-y);background-repeat:no-repeat;mix-blend-mode:lighten}
.style-character h3{margin:7px 0 0;font:500 19px/1.65 var(--serif);color:#f2e8d8;letter-spacing:.045em}.style-character h3>span{display:block}
#start .gallery-begin{justify-content:center;gap:30px;min-width:320px}
@media(max-width:750px){.style-gallery{padding:40px 0 30px}.character-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}.style-character{padding:4px 4px 17px}.style-character h3{font-size:clamp(14px,3.6vw,18px)}.style-gallery h2{font-size:25px;margin-bottom:25px}#start .gallery-begin{min-width:0;width:100%;font-size:14px;gap:15px}}
@media(prefers-reduced-motion:reduce){.style-character{transition:none}}

/* Keep sprite coordinates in the external stylesheet for the production CSP. */
.style-character:nth-child(1) .character-portrait{--sprite-x:0.0%;--sprite-y:0.0%}
.style-character:nth-child(2) .character-portrait{--sprite-x:33.333333333333336%;--sprite-y:0.0%}
.style-character:nth-child(3) .character-portrait{--sprite-x:66.66666666666667%;--sprite-y:0.0%}
.style-character:nth-child(4) .character-portrait{--sprite-x:100.0%;--sprite-y:0.0%}
.style-character:nth-child(5) .character-portrait{--sprite-x:0.0%;--sprite-y:33.333333333333336%}
.style-character:nth-child(6) .character-portrait{--sprite-x:33.333333333333336%;--sprite-y:33.333333333333336%}
.style-character:nth-child(7) .character-portrait{--sprite-x:66.66666666666667%;--sprite-y:33.333333333333336%}
.style-character:nth-child(8) .character-portrait{--sprite-x:100.0%;--sprite-y:33.333333333333336%}
.style-character:nth-child(9) .character-portrait{--sprite-x:0.0%;--sprite-y:66.66666666666667%}
.style-character:nth-child(10) .character-portrait{--sprite-x:33.333333333333336%;--sprite-y:66.66666666666667%}
.style-character:nth-child(11) .character-portrait{--sprite-x:66.66666666666667%;--sprite-y:66.66666666666667%}
.style-character:nth-child(12) .character-portrait{--sprite-x:100.0%;--sprite-y:66.66666666666667%}
.style-character:nth-child(13) .character-portrait{--sprite-x:0.0%;--sprite-y:100.0%}
.style-character:nth-child(14) .character-portrait{--sprite-x:33.333333333333336%;--sprite-y:100.0%}
.style-character:nth-child(15) .character-portrait{--sprite-x:66.66666666666667%;--sprite-y:100.0%}
.style-character:nth-child(16) .character-portrait{--sprite-x:100.0%;--sprite-y:100.0%}