/* A fixed-size filmstrip and a visible light layer above the images. */
.effect-showcase{position:relative;isolation:isolate;overflow:hidden;margin:0 0 10px;padding:8px;min-width:0;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--ui-glass) 65%,transparent),var(--ui-tint));box-shadow:inset 0 1px 0 #ffffff66,0 5px 18px #1734390a;overflow-anchor:none}
.showcase-stage{position:relative;z-index:1;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;overflow-anchor:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;scroll-behavior:auto}
.showcase-stage::-webkit-scrollbar{display:none}
.showcase-track{will-change:transform;display:flex;gap:10px;width:100%;padding:5px 0 7px;overflow-anchor:none}
.effect-showcase .start-example{flex:0 0 calc((100% - 20px)/3);display:flex;flex-direction:column;min-width:0;padding:0;gap:7px;border:0;border-radius:11px;background:none;box-shadow:none;font-size:11px;line-height:1.4;text-align:left;transform-origin:center center;will-change:transform;overflow-anchor:none;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none}
#app .effect-showcase .start-example-picture{display:block;position:relative;flex:none;width:100%;height:clamp(72px,23vw,102px);overflow:hidden;border-radius:11px;background:var(--ui-tint)}
.effect-showcase .start-example-picture img{display:block;position:static;width:100%;height:100%;object-fit:cover;object-position:center 35%;transform:none;pointer-events:none}
.effect-showcase .start-example>span:last-child{display:block;max-width:100%;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ui-ink);font-weight:500}
.effect-showcase [data-effect=type] img,.effect-showcase [data-effect=bubble] img{object-position:center top}.effect-showcase [data-effect=stencil] img,.effect-showcase [data-effect=ascii] img{object-position:center 20%}
@media(max-width:359px){.effect-showcase{padding:6px}.effect-showcase .start-example{font-size:10px}}
@media(min-width:820px){#app .effect-showcase .start-example-picture{height:92px}}
.effect-showcase .start-example{position:relative;isolation:isolate;--card-light:0}
.effect-showcase .start-example:before{content:'';position:absolute;z-index:-1;inset:-6px -7px 10px;border-radius:18px;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--ui-glow,#fff6dc) 85%,white),transparent 74%);opacity:var(--card-light);pointer-events:none}
.effect-showcase .start-example-picture:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,#ffffff40,transparent 42%,#fff5d513);box-shadow:inset 0 0 0 1.5px #fff9dcbb,inset 0 1px 10px #fff4d52b;opacity:var(--card-light);pointer-events:none}
[data-theme=ink] .effect-showcase .start-example:before{background:radial-gradient(ellipse at 50% 30%,#c5d9c466,transparent 74%)}.start-actions+.effect-showcase{margin-top:16px}.start-actions{margin-bottom:0}.example-dialog::backdrop{animation:example-backdrop-enter 280ms ease-out}@keyframes example-backdrop-enter{from{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.example-dialog::backdrop{animation:none}}