/* A centered stack rather than a scrolling strip. */
.examples-section{overflow:hidden}
.examples-section .example-track{--card-step:215px;position:relative;display:block;width:100%;margin:0;padding:18px 0 14px;height:590px;overflow:hidden;scroll-snap-type:none;perspective:1200px;touch-action:pan-y pinch-zoom;isolation:isolate}
.example-track .example-card{position:absolute;top:16px;left:50%;width:300px;max-width:none;margin:0;transform:translateX(calc(-50% + var(--card-offset)*var(--card-step))) translateY(var(--card-y)) scale(var(--card-scale));transform-origin:center top;opacity:0;pointer-events:none;transition:transform 650ms cubic-bezier(.22,.8,.2,1),opacity 500ms ease;will-change:transform}
.example-track .example-card.is-visible{opacity:.58}
.example-track .example-card.is-active{opacity:1;pointer-events:auto}
.example-track .portrait-preview,html[lang=id] .example-track .portrait-preview{height:auto;min-height:470px;background-color:#f1f6ff;box-shadow:0 12px 28px #163f8910}
.example-track .example-box{background-color:var(--blue)}
.example-track .example-chapters,.example-track .example-wish{background-color:#deebff}
.example-track .example-note,.example-track .example-list{background-color:white}
.example-track .portrait-preview:hover{transform:none}
.example-track .example-card.is-active .portrait-preview{border-color:#9dbce9;box-shadow:0 18px 35px #163f8918}
.example-track .example-caption{transition:opacity 300ms;min-height:64px}
.example-track .example-card:not(.is-active) .example-caption{opacity:0}
.examples-section>.gallery-controls{display:flex;width:100%;justify-content:center;gap:22px;margin:18px 0 0}
.examples-section>.gallery-controls .carousel-status{margin:0;min-width:64px;text-align:center;color:#63738d;font:500 14px var(--font);font-variant-numeric:tabular-nums;letter-spacing:2px}
.examples-section>.gallery-controls button{height:48px;width:48px;background:var(--blue);border-color:var(--blue);color:white;border-radius:12px;transition:background .2s,transform .2s}
.examples-section>.gallery-controls button:hover{background:#2861cb;transform:translateY(-2px)}
.example-track:focus-visible{outline-offset:-4px}
@media(max-width:760px){.examples-section .example-track{--card-step:clamp(100px,22vw,160px);width:calc(100% + 36px);margin-left:-18px;padding:0;height:620px}.example-track .example-card{width:min(74vw,310px);top:16px}.example-track .portrait-preview,html[lang=id] .example-track .portrait-preview{min-height:490px;padding:18px 17px}.examples-section>.gallery-controls{margin-top:10px;gap:24px}.example-track .portrait-headline,.example-track .example-birthday .portrait-headline{font-size:clamp(1.6rem,6.8vw,2rem)}.example-track .portrait-note{font-size:.8125rem}.example-track .portrait-kicker{font-size:.625rem}.example-track .example-card.is-visible:not(.is-active){opacity:.42}.example-track .example-caption h3{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.example-track .example-card,.example-track .example-caption,.examples-section>.gallery-controls button{transition:none;will-change:auto}}