.jar-showcase{margin:48px auto 8px;max-width:1120px;scroll-margin-top:110px;position:relative}
.jar-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(16rem,.9fr);gap:28px;align-items:center;padding:22px;border:1px solid #dca37438;border-radius:24px;background:#091218eb}
.jar-preview{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:transparent}
.jar-preview img{display:block;width:100%;height:100%;object-fit:contain}
.jar-preview iframe,.kit-ocean-hero iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;pointer-events:auto;touch-action:none}
.jar-gallery .gallery-stage{position:relative;aspect-ratio:4/5;max-height:min(640px,72vh);width:100%}
.jar-gallery .kit-ocean-hero{position:absolute;inset:0;z-index:5;background:transparent}
.jar-gallery.is-ocean-live .gallery-main{opacity:0;pointer-events:none}
.jar-gallery.is-ocean-live .gallery-arrow{opacity:0;pointer-events:none}
.jar-gallery [hidden],.jar-preview [hidden]{display:none!important}
.jar-gallery [data-hero-ocean]{position:relative;cursor:pointer}
.jar-thumb-label{position:absolute;bottom:3px;right:4px;background:#091218cc;color:#fff;border-radius:4px;padding:0 4px;font-size:10px;font-weight:700;line-height:1.6}
.jar-load-status{position:absolute;inset:auto 10px 12px;margin:0;text-align:center;color:#c7d9df;font:12px/1.5 system-ui,sans-serif;pointer-events:none;background:#091218b3;border-radius:8px;padding:8px}
.jar-copy h2,.jar-copy h3{margin:0 0 .4rem}.jar-copy p{margin:0 0 1rem;color:#c5d2d6}.jar-note{font-size:.92rem;color:#9bb0b6}.jar-actions{display:flex;flex-wrap:wrap;gap:10px}.jar-fallback{font-size:.85rem;color:#8aa1a9}
@media(max-width:820px){.jar-card{grid-template-columns:1fr;padding:16px}.jar-preview{aspect-ratio:1/1;min-height:280px}}