/* Actual supplied sample cards: two continuous rails and a detail viewer. */
.real-card-gallery{padding:22px 0 15px;margin-block:20px 6px;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);background:linear-gradient(180deg,#f2f6fb00,#edf4f970,#f2f6fb00);display:grid;gap:17px;overflow:hidden}.real-card-row{min-width:0;overflow:hidden;padding-block:8px}.real-card-gallery .marquee-track{animation-duration:calc(var(--card-count)*2.8s);animation-timing-function:linear}.real-card-gallery .direction-right .marquee-track{animation-direction:reverse}.real-card-gallery .direction-left .marquee-track{animation-direction:normal}.real-card-gallery .marquee-set,.real-card-detail .marquee-set{gap:15px;padding-right:15px;align-items:start}.real-card-gallery .real-sample{flex:0 0 188px;padding:6px 6px 9px;border-radius:8px;border-color:#d8e4ed;background:white;box-shadow:0 4px 12px #1428460c;transform:none}.real-card-gallery .real-sample:nth-child(even){transform:none}.card-preview{display:block;position:relative;border:0;padding:0;width:100%;background:white;border-radius:3px;overflow:hidden;cursor:zoom-in;color:var(--navy);text-align:left}.card-preview img{display:block;width:100%;height:auto;border:0;border-radius:2px;box-shadow:none;aspect-ratio:1055/1490;object-fit:contain;background:white;transition:filter .2s}.card-preview:focus-visible{outline-offset:2px;outline:3px solid #9274cc}.preview-expand{position:absolute;bottom:8px;right:8px;display:grid;place-items:center;width:24px;height:24px;font-size:.95rem;color:#142846;background:#ffffffed;border:1px solid #d7e3ec;border-radius:50%;box-shadow:0 2px 6px #14284612;transition:background .2s}.card-preview:hover .preview-expand{background:#dff2f1}.real-sample figcaption{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 4px 0;color:#52647a;line-height:1.4;font-size:.56rem;min-height:35px}.real-sample figcaption>span:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.real-sample figcaption>span:last-child{color:#00818a;font-size:.55rem;font-weight:750;font-variant-numeric:tabular-nums;flex-shrink:0}.real-card-detail .marquee-track{animation-duration:19s}.real-card-detail .real-sample{flex:0 0 247px;padding:8px 8px 10px;border-radius:9px;transform:none;box-shadow:0 4px 15px #1428460c}.real-card-detail .real-sample:nth-child(even){transform:none}.real-card-detail .real-sample img{width:100%}.real-card-detail .real-sample figcaption{font-size:.63rem;min-height:38px;padding-top:10px}.viewer-open{overflow:hidden}.viewer-open .marquee-track{animation-play-state:paused!important}.card-viewer{width:calc(100% - 18px);height:calc(100dvh - 18px);max-width:1000px;max-height:calc(100dvh - 18px);margin:auto;padding:0;border:1px solid #cfdae6;border-radius:13px;background:#eff4f9;color:#142846;overflow:hidden;box-shadow:0 25px 90px #0a152366}.card-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}.card-viewer::backdrop{background:#0d1e34d9}.card-viewer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 13px 12px 17px;background:white;border-bottom:1px solid #dce5ee}.card-viewer-head>div{min-width:0}.card-viewer-head span{display:block;font-size:.53rem;letter-spacing:.1em;color:#00818a;font-weight:750}.card-viewer-head h2{font-size:.91rem;line-height:1.35;letter-spacing:-.02em;margin-top:5px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.viewer-close{font-size:1.6rem;line-height:1;border:1px solid #d8e4ec;background:#f5f8fb;color:#142846;width:39px;height:39px;border-radius:9px;flex-shrink:0;padding:0}.card-viewer-stage{position:relative;overflow:auto;overscroll-behavior:contain;min-height:0;text-align:center;background:#e1eaf3;scrollbar-width:thin;padding:10px;-webkit-overflow-scrolling:touch}.card-viewer-stage img{margin:auto;display:block;width:auto;height:100%;max-width:100%;object-fit:contain;box-shadow:0 2px 16px #14284612;background:white}.card-viewer-stage.is-zoomed img{width:min(1000px,220vw);height:auto;max-width:none;object-fit:initial}.card-viewer-stage.is-zoomed{touch-action:pan-x pan-y}.card-viewer-stage #card-loading{position:absolute;inset:0;display:grid;place-items:center;color:#52647a;font-size:.8rem;background:#e1eaf3}.card-viewer-stage #card-loading[hidden]{display:none}.card-viewer-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:10px 12px;background:white;border-top:1px solid #dce5ee}.card-viewer-tools button{min-width:42px;min-height:38px;padding:8px 14px;border:1px solid #d0dee9;border-radius:7px;background:#f3f7fa;color:#142846;font-size:.76rem;font-weight:650}.card-viewer-tools button:hover,.viewer-close:hover{background:#e6f1f4}.card-viewer-tools>span{flex-basis:100%;font-size:.55rem;line-height:1.5;color:#52647a;text-align:center;margin-top:2px}.card-viewer-tools #zoom-card{min-width:96px}
@media(min-width:600px){.real-card-gallery{gap:22px}.real-card-gallery .real-sample{flex-basis:220px}.real-card-gallery .marquee-set{gap:20px;padding-right:20px}.real-card-gallery .real-sample figcaption{font-size:.6rem;min-height:36px}.real-card-detail .real-sample{flex-basis:290px}.card-viewer{width:calc(100% - 40px);height:calc(100dvh - 40px);max-height:calc(100dvh - 40px)}.card-viewer-head{padding:16px 20px}.card-viewer-head h2{font-size:1.04rem}.card-viewer-tools>span{flex-basis:auto;margin-left:12px;font-size:.65rem}.card-viewer-stage{padding:16px}}
@media(min-width:900px){.real-card-gallery{margin-top:32px;gap:24px;padding-block:25px;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}.real-card-gallery .real-sample{flex-basis:244px;padding:7px 7px 10px}.real-card-gallery .real-sample figcaption{font-size:.62rem;min-height:39px;padding-inline:6px}.real-card-detail .real-sample{flex-basis:320px;padding:10px 10px 11px}.real-card-detail .marquee-set{gap:25px;padding-right:25px}.real-card-detail .real-sample figcaption{font-size:.67rem;min-height:38px}.card-viewer-head span{font-size:.61rem}}
@media(prefers-reduced-motion:reduce){.real-card-gallery .marquee-track{animation-duration:calc(var(--card-count)*10s)}.real-card-detail .marquee-track{animation-duration:65s}.card-preview img,.preview-expand{transition:none}}