@property --strip-visible{syntax: "<integer>"; inherits: true; initial-value: 6;}@property --strip-gap{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --strip-h{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --strip-slot-w{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --strip-open-w{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --strip-collapsed-w{syntax: "<length>"; inherits: true; initial-value: 0px;}.port-strip{container-type:inline-size;--strip-card-radius: var(--radius-md);--label-inset: .875rem;--label-gap: .25rem;--label-lh: 1.375rem;--credit-h: 1.125rem}.port-strip__frame{position:relative;--max-visible: 3;--open-ratio: .75;--collapsed-ratio: .2;--strip-gap: .75rem;--strip-visible: min(var(--strip-count), var(--max-visible));--strip-h: calc( (100cqi - (var(--strip-visible) - 1) * var(--strip-gap)) / (var(--open-ratio) + (var(--strip-visible) - 1) * var(--collapsed-ratio)) );--strip-slot-w: calc( (100cqi - (var(--strip-visible) - 1) * var(--strip-gap)) / var(--strip-visible) );--strip-open-w: calc(var(--open-ratio) * var(--strip-h));--strip-collapsed-w: calc(var(--collapsed-ratio) * var(--strip-h));--strip-more: clamp(0, var(--strip-count) - var(--strip-visible), 1)}@container (min-width: 30rem){.port-strip__frame{--max-visible: 4;--open-ratio: 1.1;--collapsed-ratio: .24}}@container (min-width: 44rem){.port-strip__frame{--max-visible: 5;--open-ratio: calc(4 / 3);--collapsed-ratio: .26;--strip-gap: 1rem}}@container (min-width: 60rem){.port-strip__frame{--max-visible: 6;--open-ratio: var(--port-strip-open-ratio, 1.5 );--collapsed-ratio: .28}}.port-strip__scroller{position:relative;display:flex;gap:var(--strip-gap);overflow-x:auto;overflow-y:hidden;overflow-anchor:none;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}.port-strip__scroller::-webkit-scrollbar{display:none}.port-strip__snap{position:absolute;top:0;left:calc(var(--i) * (var(--strip-slot-w) + var(--strip-gap)));width:var(--strip-slot-w);height:1px;scroll-snap-align:start;pointer-events:none}.port-strip__slot{position:relative;flex:none;inline-size:var(--strip-slot-w);block-size:var(--strip-h);pointer-events:none}.port-strip__card{--a: 0;--l: 0;--x: 0px;--vw: var(--strip-slot-w);--label-lift: 0px;position:absolute;inset-block:0;left:0;inline-size:var(--vw);overflow:hidden;border-radius:var(--strip-card-radius);background:var(--color-muted);translate:var(--x) 0;isolation:isolate;pointer-events:auto;user-select:none;-webkit-tap-highlight-color:transparent}.port-strip__inner{position:absolute;inset-block:0;left:0;inline-size:var(--strip-open-w)}.port-strip__video{border-radius:var(--strip-card-radius)}.port-strip__embed{position:absolute;inset-block:0;left:0;width:var(--strip-open-w);aspect-ratio:auto;border-radius:0;translate:calc((var(--vw) - var(--strip-open-w)) / 2) 0}.port-strip__card[data-open] :is(.port-strip__embed,.port-strip__fade){z-index:2}.port-strip__embed>button{opacity:clamp(0,(var(--l) - .5) / .5,1)}.port-strip__card[data-playing] :is(.port-strip__label,.port-strip__fade,.port-strip__expand){opacity:0;pointer-events:none}.port-strip__card:not([data-open]) :is(.port-strip__expand,.port-strip__credit){visibility:hidden}.port-strip__card[data-credit]{--label-lift: calc(var(--credit-h) + var(--label-gap))}.port-strip__inner:after{content:"";position:absolute;inset-block:0;left:0;z-index:4;inline-size:var(--vw);border-radius:var(--strip-card-radius);box-shadow:inset 0 0 0 1px #ffffff14;pointer-events:none}.port-strip__photo{position:absolute;inset-block:0;left:0;display:block;width:var(--strip-open-w);height:100%;object-fit:cover;translate:calc((var(--vw) - var(--strip-open-w)) / 2) 0;scale:calc(1.12 - .12 * var(--a));will-change:scale}.port-strip__img{display:block;height:100%;object-fit:cover}.port-strip__placeholder{position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 .5rem,color-mix(in oklab,var(--color-foreground) 6%,transparent) .5rem .5625rem),var(--color-muted)}.port-strip__fade{position:absolute;inset:auto 0 0;height:50%;background:linear-gradient(to top,rgb(0 0 0 / .8),rgb(0 0 0 / .75) 20%,transparent);translate:0 calc(var(--label-lift) * (1 - var(--l)));pointer-events:none}.port-strip__label{position:absolute;bottom:var(--label-inset);left:var(--label-inset);z-index:2;max-inline-size:calc(var(--vw) - 2 * var(--label-inset));overflow:hidden;color:#fff;font-size:1rem;font-weight:700;line-height:var(--label-lh);text-overflow:ellipsis;text-shadow:0 1px 2px rgb(0 0 0 / .4);white-space:nowrap;translate:0 calc(-1 * var(--label-lift) * var(--l))}.port-strip__card[data-placeholder] .port-strip__label{color:var(--color-foreground);text-shadow:none}.port-strip__empty{position:absolute;bottom:calc(var(--label-inset) + var(--label-lh));left:var(--label-inset);z-index:2;max-inline-size:calc(var(--vw) - 2 * var(--label-inset));overflow:hidden;color:var(--color-muted-foreground);font-size:.6875rem;line-height:var(--credit-h);text-overflow:ellipsis;white-space:nowrap}.port-strip__credit{position:absolute;bottom:var(--label-inset);left:var(--label-inset);max-inline-size:calc(var(--vw) - 2 * var(--label-inset));z-index:3;overflow:hidden;color:#ffffffd1;font-size:.6875rem;line-height:var(--credit-h);text-overflow:ellipsis;white-space:nowrap;opacity:clamp(0,(var(--l) - .4) / .6,1);translate:0 calc(.375rem * (1 - var(--l)))}.port-strip__credit-link{color:inherit;text-decoration:underline;text-decoration-color:#ffffff59;text-underline-offset:2px}.port-strip__credit-link:hover{color:#fff;text-decoration-color:#fff}.port-strip__expand{position:absolute;top:var(--label-inset);right:var(--label-inset);z-index:3;display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:1px solid rgb(255 255 255 / .15);padding:0;border-radius:9999px;background:#0000008c;color:#fff;cursor:pointer;opacity:clamp(0,(var(--l) - .5) / .5,1);translate:calc(var(--vw) - var(--strip-open-w)) 0;scale:calc(.85 + .15 * var(--l));transition:background-color .15s ease}.port-strip__expand:hover{background:#000000a6}.port-strip__expand:focus-visible{outline:2px solid white;outline-offset:2px}.port-strip__toggle{position:absolute;inset-block:0;left:0;z-index:1;inline-size:var(--vw);border:0;padding:0;border-radius:var(--strip-card-radius);background:transparent;cursor:pointer}.port-strip__toggle:focus-visible{outline:2px solid white;outline-offset:-3px}.port-strip__progress{container-type:inline-size;position:relative;inline-size:min(7rem,40%);block-size:calc(var(--strip-more) * 3px);margin:calc(var(--strip-more) * .75rem) auto 0;overflow:hidden;border-radius:9999px;background:var(--color-border);--thumb-w: max( .75rem, calc(var(--strip-visible) / var(--strip-count) * 100cqi) )}.port-strip__progress:before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--thumb-w);border-radius:inherit;background:var(--color-muted-foreground);translate:calc(var(--strip-progress, 0) * (100cqi - var(--thumb-w))) 0}.port-strip__nav{display:none;position:absolute;top:calc(var(--strip-h) / 2);z-index:5;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:1px solid rgb(255 255 255 / .15);padding:0;border-radius:9999px;background:#0000008c;color:#fff;translate:0 -50%;cursor:pointer;transition:opacity .15s ease,background-color .15s ease}.port-strip__frame[data-scrollable] .port-strip__nav{display:flex}@media(pointer:coarse){.port-strip__frame[data-scrollable] .port-strip__nav{display:none}}.port-strip__nav--prev{left:.5rem}.port-strip__nav--next{right:.5rem}.port-strip__nav:hover{background:#000000a6}.port-strip__nav:focus-visible{outline:2px solid white;outline-offset:2px}.port-strip__nav:disabled{opacity:0;pointer-events:none}@media(prefers-reduced-motion:reduce){.port-strip__nav{transition:none}}