.gutter-seq{--seq-ratio:1.5;gap:var(--space-2);display:grid}.gutter-seq__stage{gap:var(--space-1);overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;margin:0;padding:0;list-style:none;display:flex;overflow-x:auto}.gutter-seq__frame{aspect-ratio:var(--seq-ratio);border-radius:var(--radius-card);background:var(--canvas-deep);scroll-snap-align:center;flex:0 0 86vw;position:relative;overflow:hidden}.gutter-seq--one .gutter-seq__frame{flex:100%}.gutter-seq__frame img{object-fit:cover;width:100%;height:100%;display:block}.gutter-seq__thumbs{gap:var(--space-1);margin:0;padding:0;list-style:none;display:none}.gutter-seq__thumbs li{flex:1 1 0}.gutter-seq__thumb{width:100%;aspect-ratio:var(--seq-ratio);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:0 0;padding:0;transition:border-color .16s;display:block;overflow:hidden}.gutter-seq__thumb img{object-fit:cover;width:100%;height:100%;display:block}.gutter-seq__thumb:hover{border-color:var(--red-ink)}.gutter-seq__thumb[aria-current]{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}.gutter-seq :focus-visible{outline:2px solid var(--ink);outline-offset:2px}@media (width>=62rem){.gutter-seq[data-mode=static] .gutter-seq__stage{gap:var(--space-2);grid-template-columns:repeat(3,1fr);display:grid;overflow:visible}.gutter-seq[data-mode=static] .gutter-seq__frame{flex:none}.gutter-seq--one .gutter-seq__stage{display:block}.gutter-seq[data-mode=live]{--seq-width:min(46rem, calc(78vh * var(--seq-ratio)));grid-template-columns:minmax(0, var(--seq-width)) auto;column-gap:var(--space-2);row-gap:var(--space-1);justify-content:start}.gutter-seq[data-mode=live] .gutter-seq__stage{width:100%;aspect-ratio:var(--seq-ratio);border-radius:var(--radius-card);grid-area:1/1;display:block;position:relative;overflow:hidden}.gutter-seq[data-mode=live] .gutter-seq__thumbs{flex-direction:column;grid-area:1/2}.gutter-seq[data-mode=live] .gutter-seq__thumbs li{min-height:0}.gutter-seq[data-mode=live] .gutter-seq__thumb{width:auto;height:100%}.gutter-seq[data-mode=live] .gutter-seq__frame{opacity:0;border-radius:0;transition:opacity .28s;position:absolute;inset:0}.gutter-seq[data-mode=live] .gutter-seq__frame[data-active]{opacity:1}.gutter-seq[data-mode=live] .gutter-seq__thumbs{display:flex}}@media (prefers-reduced-motion:reduce){.gutter-seq__stage{scroll-behavior:auto}.gutter-seq__frame,.gutter-seq__thumb{transition:none}.gutter-seq[data-mode=live] .gutter-seq__frame[data-active]{opacity:1}}