/* Showcase section rail. Labels expand over the page without moving its content. */
.showcase-dots{--showcase-rail:40px;--showcase-pink:#f38ab6;position:fixed;z-index:70;left:max(5px,env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%);width:min(310px,calc(100vw - 16px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;align-items:flex-start;isolation:isolate;pointer-events:none;font:600 13px/1.3 Manrope,system-ui,sans-serif;color:#fff0f6}
.showcase-dots::before{content:"";position:absolute;inset:0 auto 0 0;z-index:-1;width:var(--showcase-rail);border:1px solid rgba(255,235,246,.2);border-radius:22px;background:rgba(28,19,32,.76);box-shadow:0 8px 28px rgba(26,12,30,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:width .22s ease,background .22s ease}
.showcase-dots [data-showcase-dots-toggle]{display:grid;place-items:center;flex:0 0 auto;width:var(--showcase-rail);height:40px;padding:10px;border:0;border-radius:50%;background:transparent;color:#fff0f6;cursor:pointer;pointer-events:auto;touch-action:manipulation}
.showcase-dots [data-showcase-dots-toggle] svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;stroke-width:1.7}
.showcase-dots ol{list-style:none;width:100%;min-height:0;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;margin:0;padding:2px 0 7px;pointer-events:none}
.showcase-dots ol::-webkit-scrollbar{width:0}
.showcase-dots li{margin:0;padding:0;list-style:none}
.showcase-dots a{position:relative;display:flex;align-items:center;justify-content:center;width:var(--showcase-rail);height:32px;box-sizing:border-box;color:inherit;text-decoration:none;border-radius:18px;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.showcase-dots .showcase-dot{display:block;flex:none;width:8px;height:8px;border-radius:50%;background:rgba(255,240,246,.55);box-shadow:0 0 0 1px rgba(255,240,246,.24);transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
.showcase-dots .showcase-dot-label{position:absolute;left:calc(var(--showcase-rail) + 5px);top:50%;transform:translate(-5px,-50%);width:max-content;max-width:min(246px,calc(100vw - var(--showcase-rail) - 36px));box-sizing:border-box;padding:7px 11px;border:1px solid rgba(243,138,182,.4);border-radius:12px;background:rgba(29,18,34,.96);box-shadow:0 6px 22px rgba(24,10,28,.18);color:#fff4f8;font:inherit;line-height:1.3;white-space:normal;overflow-wrap:anywhere;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.showcase-dots a[aria-current="location"] .showcase-dot{background:var(--showcase-pink);transform:scale(1.3);box-shadow:0 0 0 2px rgba(243,138,182,.15),0 0 14px rgba(243,138,182,.7)}
.showcase-dots a:hover .showcase-dot,.showcase-dots a:focus-visible .showcase-dot{background:#fff3f9;box-shadow:0 0 16px rgba(243,138,182,.8);transform:scale(1.35)}
.showcase-dots a:focus-visible,.showcase-dots [data-showcase-dots-toggle]:focus-visible{outline:2px solid var(--showcase-pink);outline-offset:-3px;background:rgba(243,138,182,.12)}
.showcase-dots:not(.is-open) a:hover .showcase-dot-label,.showcase-dots:not(.is-open) a:focus-visible .showcase-dot-label{opacity:1;transform:translate(0,-50%)}
.showcase-dots.is-open::before{width:100%;background:rgba(28,19,32,.96)}
.showcase-dots.is-open a{width:100%;justify-content:flex-start;padding-left:calc((var(--showcase-rail) - 8px)/2);min-height:38px;height:auto}
.showcase-dots.is-open .showcase-dot{order:-1}
.showcase-dots.is-open .showcase-dot-label{position:static;transform:none;opacity:1;max-width:calc(100% - var(--showcase-rail) - 14px);margin-left:18px;padding:7px 0;border-color:transparent;background:none;box-shadow:none}
.showcase-dots.is-open ol{scrollbar-width:thin;scrollbar-color:rgba(243,138,182,.5) transparent}
.showcase-dots.is-open ol::-webkit-scrollbar{width:4px}
.showcase-dots.is-open ol::-webkit-scrollbar-thumb{background:rgba(243,138,182,.5);border-radius:4px}
@media (hover:hover) and (min-width:761px){.showcase-dots:not(.is-open) a[aria-current="location"] .showcase-dot-label{opacity:1;transform:translate(0,-50%)}}
/* Reserve the narrow rail before JS; expanding it never changes page width. */
@media (max-width:1199px){.showcase-dots{--showcase-rail:28px;left:max(4px,env(safe-area-inset-left,0px))}html.showcase-dots-ready .wrap,body:has([data-showcase-dots]) .wrap{width:calc(100% - 60px);margin-left:44px;margin-right:16px}}
@media (max-width:760px){
 .showcase-dots{--showcase-rail:28px;left:0;width:min(290px,calc(100vw - 16px));top:calc(50% - 40px);max-height:calc(100vh - 112px);max-height:calc(100dvh - 112px)}
 .showcase-dots::before{border-radius:0 16px 16px 0;border-left:0}
 .showcase-dots [data-showcase-dots-toggle]{height:34px;padding:6px;border-radius:0 14px 14px 0}
 .showcase-dots [data-showcase-dots-toggle] svg{width:16px;height:16px}
 .showcase-dots ol{max-height:calc(100vh - 146px);max-height:calc(100dvh - 146px)}
 .showcase-dots a{height:29px}
 .showcase-dots .showcase-dot{width:7px;height:7px}
 .showcase-dots .showcase-dot-label{left:calc(var(--showcase-rail) + 5px);font-size:12px}
 .showcase-dots.is-open a{min-height:38px}

}
@media (prefers-reduced-motion:reduce){.showcase-dots::before,.showcase-dots .showcase-dot,.showcase-dots .showcase-dot-label{transition:none}}
@media print{.showcase-dots{display:none!important}html.showcase-dots-ready .wrap,body:has([data-showcase-dots]) .wrap{width:min(1160px,100% - 32px);margin-left:auto;margin-right:auto}}