media-controller[data-portfolio]{background:0 0;position:relative;overflow:hidden}media-controller[data-portfolio] [slot=media]{object-fit:contain;width:100%;height:100%}media-controller[data-portfolio] .portfolio-cluster{z-index:2;opacity:0;pointer-events:none;align-items:flex-end;gap:8px;transition:opacity .2s;display:flex;position:absolute;bottom:28px;right:16px}media-controller[data-portfolio][userinactive]:not([mediapaused]) .portfolio-cluster{opacity:0;pointer-events:none}media-controller[data-portfolio]:hover .portfolio-cluster,media-controller[data-portfolio][mediapaused] .portfolio-cluster,media-controller[data-portfolio]:focus-within .portfolio-cluster{opacity:1;pointer-events:auto}media-controller[data-portfolio] .portfolio-pill{-webkit-backdrop-filter:blur(12px);color:#fff;--media-button-icon-width:22px;--media-button-icon-height:22px;--media-control-background:transparent;--media-control-hover-background:transparent;background:#0000008c;border-radius:9999px;justify-content:center;align-items:center;width:40px;height:40px;transition:background-color .2s,transform .2s;display:inline-flex}media-controller[data-portfolio] .portfolio-pill:hover{background:#000000c7;transform:scale(1.05)}media-controller[data-portfolio] .portfolio-volume-group{-webkit-backdrop-filter:blur(12px);background:#0000008c;border-radius:9999px;flex-direction:row;align-items:center;width:40px;height:40px;transition:width .25s,background-color .2s;display:flex;position:relative;overflow:hidden}media-controller[data-portfolio] .portfolio-volume-group:hover,media-controller[data-portfolio] .portfolio-volume-group:focus-within{background:#000000c7;width:136px}media-controller[data-portfolio] .portfolio-volume-mute{color:#fff;--media-button-icon-width:22px;--media-button-icon-height:22px;--media-control-background:transparent;--media-control-hover-background:transparent;background:0 0;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex}media-controller[data-portfolio] .portfolio-volume{opacity:0;--media-range-padding:0;--media-range-track-height:3px;--media-range-track-border-radius:2px;--media-range-track-background:#ffffff4d;--media-range-bar-color:white;--media-range-thumb-width:12px;--media-range-thumb-height:12px;--media-range-thumb-border-radius:9999px;--media-range-thumb-background:white;--media-range-thumb-border:none;--media-range-thumb-box-shadow:0 1px 3px #0006;--media-control-background:transparent;--media-control-hover-background:transparent;flex-shrink:0;width:72px;height:40px;margin-right:24px;transition:opacity .15s}media-controller[data-portfolio] .portfolio-volume-group:hover .portfolio-volume,media-controller[data-portfolio] .portfolio-volume-group:focus-within .portfolio-volume{opacity:1;transition:opacity .15s .1s}media-controller[data-portfolio] .portfolio-scrubber{z-index:1;opacity:1;pointer-events:auto;--media-range-padding:0;--media-range-track-height:4px;--media-range-thumb-width:0px;--media-range-thumb-height:0px;--media-range-track-background:#ffffff40;--media-range-track-border-radius:0;--media-range-bar-color:white;--media-control-background:transparent;--media-control-hover-background:transparent;width:100%;height:4px;min-height:4px;padding:0;display:block;position:absolute;bottom:0;left:0;right:0}media-controller[data-portfolio]:hover .portfolio-scrubber,media-controller[data-portfolio][mediapaused] .portfolio-scrubber,media-controller[data-portfolio]:focus-within .portfolio-scrubber{--media-range-track-height:6px;height:6px;min-height:6px}