.sample-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;margin:0 0 18px}.sample-heading h3{margin:0;color:#e9f3ff;font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:600;line-height:1.4}.sample-heading>span,.sample-status{color:#a8c2dc;font-size:14px;line-height:1.6}.showcase-entry+.showcase-entry{margin-top:48px;padding-top:36px;border-top:1px solid #24425e}#play-film{aspect-ratio:16/9}#play-film>img{object-position:center;filter:none}.sample-status{margin:12px 0}.sample-status[hidden]{display:none}#play-film[hidden],#film-video[hidden]{display:none}#play-film:focus-visible,#retry-film:focus-visible,#film-video:focus-visible{outline:2px solid #99d8ff;outline-offset:5px}@media(max-width:600px){.sample-heading{display:block}.sample-heading>span{display:block;margin-top:6px}.showcase-entry+.showcase-entry{margin-top:32px;padding-top:28px}#play-film .poster-bottom{font-size:14px}}
.showcase-entry{scroll-margin-top:24px}#play-film .poster-play{opacity:1;box-shadow:none}#play-film .poster-bottom{font-size:14px}

.sample-carousel{position:relative;scroll-margin-top:28px}.sample-carousel:focus-visible{outline:2px solid #99d8ff;outline-offset:6px}.sample-carousel[data-ready]>.showcase-entry{margin:0;padding:0;border:0}.sample-carousel [hidden]{display:none!important}.cylinder-scene{position:relative;width:100%;height:var(--scene-height,480px);perspective:var(--perspective,1500px);perspective-origin:50% 45%;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none}.cylinder-scene.is-dragging{cursor:grabbing}.cylinder-ring{position:absolute;top:24px;left:50%;width:var(--panel-width,680px);height:var(--panel-height,442px);margin-left:calc(var(--panel-width,680px)/-2);transform-style:preserve-3d;transform:translateZ(calc(-1*var(--radius,589px))) rotateY(var(--rotation,0deg));transition:transform 620ms cubic-bezier(.16,1,.3,1)}.is-dragging .cylinder-ring{transition:none;will-change:transform}.cylinder-panel{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;text-align:left;border:1px solid #355878;border-radius:8px;background:#081725;backface-visibility:hidden;transform:rotateY(var(--face-angle)) translateZ(var(--radius));overflow:hidden;color:#e9f3ff;cursor:pointer;box-shadow:0 20px 40px #0006;filter:brightness(.55);transition:filter 350ms,border-color 350ms}.cylinder-panel.is-current{filter:brightness(1);border-color:#92c7ee}.cylinder-panel:focus-visible{outline:3px solid #b4e1ff;outline-offset:-4px}.cylinder-panel img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;pointer-events:none;user-select:none}.cylinder-panel-info{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;height:68px;background:#081725}.cylinder-panel-title{font-size:20px;line-height:1.3;font-weight:600}.cylinder-panel-meta{font-size:13px;line-height:1.5;color:#abc5dd}.cylinder-play{position:absolute;top:calc((100% - 68px)/2);left:50%;display:grid;place-items:center;width:60px;height:60px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #d1e7fa;background:#07121dc9;opacity:0;transition:opacity 250ms}.is-current .cylinder-play{opacity:1}.cylinder-play svg{width:28px;height:28px;fill:currentColor;stroke:none}.cylinder-badge{position:absolute;left:14px;top:12px;padding:4px 8px;border-radius:3px;background:#081725dd;color:#c8dbee;font-size:12px}.cylinder-guide{display:flex;justify-content:center;align-items:center;gap:24px;margin:8px 0 0;color:#a8c2dc;font-size:14px;line-height:1.6}#sample-position{font-variant-numeric:tabular-nums;color:#dcecff;white-space:nowrap}.sample-back{display:flex;align-items:center;gap:6px;margin:0 0 20px;padding:10px 14px;border:1px solid #3a6287;border-radius:5px;background:#0b1c2d;color:#e9f3ff;font-size:14px;cursor:pointer}.sample-back:hover{background:#173954}.sample-back:focus-visible{outline:2px solid #99d8ff;outline-offset:3px}.sample-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.sample-carousel .poster-button{aspect-ratio:16/9}
body[data-motion=off] .cylinder-ring{transition:none}body[data-motion=off] .cylinder-panel,body[data-motion=off] .cylinder-play{transition:none}
@media(max-width:600px){.cylinder-ring{top:18px}.cylinder-panel{border-radius:5px}.cylinder-panel-info{height:68px;display:block;padding:10px 12px}.cylinder-panel-title{font-size:16px}.cylinder-panel-meta{display:block;font-size:11px;margin-top:4px;white-space:nowrap}.cylinder-play{width:42px;height:42px}.cylinder-play svg{width:22px;height:22px}.cylinder-badge{left:8px;top:8px;font-size:11px;padding:3px 6px}.cylinder-guide{font-size:12px;gap:16px;margin-top:4px}.sample-back{min-height:44px}.sample-carousel .sample-heading{display:block}.sample-carousel .sample-heading>span{display:block;margin-top:6px}}
@media(prefers-reduced-motion:reduce){.cylinder-ring,.cylinder-panel,.cylinder-play{transition:none!important}}