.shot-deck{display: grid;gap: 16px}.jd-tabs{display: flex;gap: 8px;padding: 2px 2px 6px;overflow-x: auto;scrollbar-width: none}.jd-tabs::-webkit-scrollbar{display: none}.jd-tab{position: relative;display: inline-flex;flex: none;align-items: center;gap: 8px;padding: 7px 15px 7px 7px;overflow: hidden;font: inherit;font-size: 0.8125rem;font-weight: 600;color: var(--ink-2);white-space: nowrap;background: var(--surface);border: 1px solid var(--border);border-radius: 999px;cursor: pointer;transition: background 0.25s ease,color 0.25s ease,border-color 0.25s ease}.jd-tab b{display: grid;place-items: center;width: 24px;height: 24px;font-size: 0.75rem;color: var(--tint-ink);background: var(--tint);border-radius: 50%;transition: inherit}.jd-tab:hover{border-color: var(--border-strong)}.jd-tab[aria-selected='true']{color: var(--on-fill);background: var(--fill);border-color: var(--fill)}.jd-tab[aria-selected='true'] b{color: var(--on-fill);background: #ffffff33}.jd-tab[aria-selected='true']::after{content: '';position: absolute;inset: auto 0 0;height: 3px;background: #ffffffb3;transform-origin: left}.shot-deck.is-playing .jd-tab[aria-selected='true']::after{animation: jd-fill var(--jd-ms,5200ms) linear both}@keyframes jd-fill{from{transform: scaleX(0)}}.jd-tab:focus-visible,.jd-go:focus-visible{outline: 3px solid var(--accent-2);outline-offset: 2px}.jd-stage{position: relative}.jd-stage.has-phone{padding: 0 11% 15% 0}.jd-slides{position: relative;display: grid;touch-action: pan-y}.jd-slide{grid-area: 1 / 1;visibility: hidden;opacity: 0;transform: translateX(calc(var(--jd-dir,1) * 22px))}.jd-slide.is-on{visibility: visible;opacity: 1;transform: none}@media (prefers-reduced-motion: no-preference){.jd-slide{transition: opacity 0.5s ease,transform 0.6s cubic-bezier(0.2,0.7,0.2,1),visibility 0s 0.5s}.jd-slide.is-on{transition-delay: 0s}}.jd-slide img{display: block;width: 100%;height: auto}.jd-phone{position: absolute;right: 0;bottom: 0;width: 27%}.jd-ctl{position: absolute;bottom: 10px;right: 12px;display: flex;align-items: center;gap: 2px;padding: 3px;overflow: hidden;background: color-mix(in srgb,#14161b 78%,transparent);border: 1px solid #ffffff2e;border-radius: 999px;box-shadow: 0 10px 28px -10px #000000a6;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);opacity: 0;transform: translateY(6px);transition: opacity 0.25s ease,transform 0.25s ease}.has-phone .jd-ctl{right: auto;left: 12px}.jd-slides:hover .jd-ctl,.jd-slides:focus-within .jd-ctl{opacity: 1;transform: none}@media (hover: none){.jd-ctl{opacity: 1;transform: none}}.jd-ctl::after{content: '';position: absolute;inset: auto 12px 0;height: 2px;background: var(--accent-2);transform: scaleX(0);transform-origin: left}.shot-deck.is-playing .jd-ctl::after{animation: jd-fill var(--jd-ms,5200ms) linear both}.jd-count{min-width: 3em;padding: 0 3px;font-size: 0.75rem;font-weight: 600;font-variant-numeric: tabular-nums;text-align: center;color: #f4f0ea}.jd-count b{color: var(--accent-2)}.jd-go{display: grid;place-items: center;width: 26px;height: 26px;padding: 0;color: #fff;background: #ffffff1f;border: 0;border-radius: 50%;cursor: pointer;transition: background 0.2s ease,transform 0.2s ease}.jd-go .i{width: 13px;height: 13px;transition: transform 0.2s ease}.jd-go.is-prev .i{transform: scaleX(-1)}.jd-go:hover{background: var(--fill)}.jd-go.is-next:hover .i{transform: translateX(2px)}.jd-go.is-prev:hover .i{transform: scaleX(-1) translateX(2px)}.jd-go:active{transform: scale(0.92)}